@gearbox-protocol/permissionless-ui 1.7.2 → 1.7.4

package/dist/esm/components/help-center-container/help-center-container.js

@@ -0,0 +1,82 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { BlockSync } from '../block-sync/block-sync.js';
+import { cn } from '../../utils/cn.js';
+
+function usePageParams() {
+  const [pageVerticalOffset, setPageVerticalOffset] = useState(
+    typeof window !== "undefined" ? window.scrollY : 0
+  );
+  const [clientHeight, setClientHeight] = useState(
+    typeof document !== "undefined" ? document.documentElement.clientHeight : 0
+  );
+  useEffect(() => {
+    const handleWindowScroll = () => {
+      setPageVerticalOffset(window.scrollY);
+    };
+    const handleDocumentResize = () => {
+      setClientHeight(document.documentElement.clientHeight);
+    };
+    window.addEventListener("scroll", handleWindowScroll);
+    window.addEventListener("resize", handleDocumentResize);
+    return () => {
+      window.removeEventListener("scroll", handleWindowScroll);
+      window.removeEventListener("resize", handleDocumentResize);
+    };
+  }, []);
+  const clientOffsetHeight = typeof document !== "undefined" ? Math.max(
+    document.body.scrollHeight,
+    document.documentElement.scrollHeight,
+    document.body.offsetHeight,
+    document.documentElement.offsetHeight,
+    document.body.clientHeight,
+    document.documentElement.clientHeight
+  ) : 0;
+  return {
+    pageVerticalOffset,
+    clientHeight,
+    clientOffsetHeight
+  };
+}
+function HelpCenterContainer({
+  blockSyncProps,
+  footerHeight,
+  gapFromFooter
+}) {
+  const [bottomDistance, setBottomDistance] = useState(gapFromFooter);
+  const { pageVerticalOffset, clientOffsetHeight, clientHeight } = usePageParams();
+  useEffect(() => {
+    const gapFromBottom = footerHeight + gapFromFooter;
+    const distance = clientOffsetHeight - (clientHeight + pageVerticalOffset);
+    const visibleFooter = distance < gapFromBottom ? gapFromBottom - distance : 0;
+    setBottomDistance(gapFromFooter + visibleFooter);
+  }, [
+    pageVerticalOffset,
+    clientHeight,
+    clientOffsetHeight,
+    footerHeight,
+    gapFromFooter
+  ]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        // Desktop: fixed position with dynamic bottom
+        "hidden sm:flex",
+        "fixed right-9 flex-col items-end gap-2 text-xs text-muted-foreground z-[100]",
+        "transition-[bottom] duration-300 ease-in-out"
+      ),
+      style: { bottom: `${bottomDistance}px` },
+      children: /* @__PURE__ */ jsx(
+        BlockSync,
+        {
+          blockByChain: blockSyncProps.blockByChain,
+          explorerAddresses: blockSyncProps.explorerAddresses,
+          networkById: blockSyncProps.networkById
+        }
+      )
+    }
+  );
+}
+
+export { HelpCenterContainer };

package/dist/esm/components/help-center-container/index.js

@@ -0,0 +1 @@
+export { HelpCenterContainer } from './help-center-container.js';

package/dist/esm/components/hide-on/hide-on.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../utils/cn.js';
+
+const breakpointClasses = {
+  small: "sm:hidden",
+  medium: "md:hidden",
+  large: "lg:hidden",
+  xlarge: "xl:hidden"
+};
+function HideOn({
+  $breakpoint,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn(breakpointClasses[$breakpoint], className), ...props, children });
+}
+const showBreakpointClasses = {
+  small: "hidden sm:block",
+  medium: "hidden md:block",
+  large: "hidden lg:block",
+  xlarge: "hidden xl:block"
+};
+function ShowOn({
+  $breakpoint,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(showBreakpointClasses[$breakpoint], className),
+      ...props,
+      children
+    }
+  );
+}
+
+export { HideOn, ShowOn };

package/dist/esm/components/hide-on/index.js

@@ -0,0 +1 @@
+export { HideOn, ShowOn } from './hide-on.js';

package/dist/esm/components/horizontal-indicator/horizontal-indicator.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { HelpCircle } from 'lucide-react';
+import * as React from 'react';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../tooltip/tooltip.js';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+const HorizontalIndicator = React.forwardRef(({ label, value, tip, valueDescription, className }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-2 w-full", className), children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("span", { children: label }),
+    tip && /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors cursor-help",
+          children: /* @__PURE__ */ jsx(HelpCircle, { className: "h-3.5 w-3.5" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "top", className: "max-w-xs", children: /* @__PURE__ */ jsx("p", { children: tip }) })
+    ] }) })
+  ] }),
+  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-base font-semibold text-foreground", children: value }),
+    valueDescription && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: valueDescription })
+  ] })
+] }));
+HorizontalIndicator.displayName = "HorizontalIndicator";
+
+export { HorizontalIndicator };

package/dist/esm/components/horizontal-indicator/index.js

@@ -0,0 +1 @@
+export { HorizontalIndicator } from './horizontal-indicator.js';

package/dist/esm/components/image/image.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+
+function Image({
+  src,
+  alt,
+  width,
+  height,
+  onError,
+  onLoad,
+  className,
+  loading = "lazy"
+}) {
+  return (
+    // biome-ignore lint: This is a universal component that works outside Next.js
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt,
+        width,
+        height,
+        className,
+        onError,
+        onLoad,
+        loading,
+        decoding: "async"
+      }
+    )
+  );
+}
+
+export { Image };

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

@@ -0,0 +1 @@
+export { Image } from './image.js';

package/dist/esm/components/index.js

@@ -1,63 +1,133 @@
-export * from "./alert-dialog.js";
-export * from "./asset-line.js";
-export * from "./assets-list-cell.js";
-export * from "./assets-ratio.js";
-export * from "./auth/index.js";
-export * from "./badge.js";
-export * from "./base-link.js";
-export * from "./block-sync.js";
-export * from "./breadcrumbs.js";
-export * from "./buttons/index.js";
-export * from "./card-grid.js";
-export * from "./cards/index.js";
-export * from "./checkbox.js";
-export * from "./checkbox-item.js";
-export * from "./compound-apy.js";
-export * from "./credit-session-status.js";
-export * from "./description.js";
-export * from "./detailed-page-title.js";
-export * from "./dialog/index.js";
-export * from "./dropdown-menu/index.js";
-export * from "./error-message.js";
-export * from "./filter/index.js";
-export * from "./form/index.js";
-export * from "./graph/index.js";
-export * from "./guard.js";
-export * from "./health-factor.js";
-export * from "./help-center-container.js";
-export * from "./hide-on.js";
-export * from "./horizontal-indicator.js";
-export * from "./image.js";
-export * from "./input.js";
-export * from "./label.js";
-export * from "./layout/index.js";
-export * from "./liquidation/index.js";
-export * from "./loader-guard.js";
-export * from "./loading-guard.js";
-export * from "./navbar.js";
-export * from "./navbar-indicator-context.js";
-export * from "./navitem.js";
-export * from "./not-found.js";
-export * from "./options-list.js";
-export * from "./page-title.js";
-export * from "./percent-indicator.js";
-export * from "./pool-points-indicator.js";
-export * from "./search-bar.js";
-export * from "./search-line.js";
-export * from "./select.js";
-export * from "./short-string.js";
-export * from "./signatures/index.js";
-export * from "./skeleton.js";
-export * from "./stat-badge.js";
-export * from "./tab-control.js";
-export * from "./table/index.js";
-export * from "./tabs.js";
-export * from "./textarea.js";
-export * from "./theme-provider.js";
-export * from "./theme-toggle.js";
-export * from "./token-icon.js";
-export * from "./token-symbol.js";
-export * from "./tooltip.js";
-export * from "./typed-intl/index.js";
-export * from "./vspace.js";
-export * from "./with-filter-button.js";
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from './alert-dialog/alert-dialog.js';
+export { AssetLine } from './asset-line/asset-line.js';
+export { AssetsListCell } from './assets-list-cell/assets-list-cell.js';
+export { AssetsRatio } from './assets-ratio/assets-ratio.js';
+export { SignInRequired } from './auth/signin-required.js';
+export { SIWEClientProvider } from './auth/siwe-provider.js';
+export { Badge, badgeVariants } from './badge/badge.js';
+export { BaseLink } from './base-link/base-link.js';
+export { BlockSync } from './block-sync/block-sync.js';
+export { BreadCrumbs } from './breadcrumbs/breadcrumbs.js';
+export { BackButton, backButtonVariants } from './buttons/back-button/back-button.js';
+export { Button, buttonVariants } from './buttons/button/button.js';
+export { CopyButton } from './buttons/copy-button/copy-button.js';
+export { ExternalButton } from './buttons/external-button/external-button.js';
+export { FilterButton } from './buttons/filter-button/filter-button.js';
+export { NavigationButton } from './buttons/navigation-button/navigation-button.js';
+export { RangeButtons } from './buttons/range-buttons/range-buttons.js';
+export { TabButton } from './buttons/tab-button/tab-button.js';
+export { CardGrid, cardGridVariants } from './card-grid/card-grid.js';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './cards/card/card.js';
+export { DangerZone } from './cards/danger-zone/danger-zone.js';
+export { ExpandablCall } from './cards/expandable-call/expandable-call.js';
+export { ExpandableCard } from './cards/expandable-card/expandable-card.js';
+export { Checkbox } from './checkbox/checkbox.js';
+export { CheckboxItem } from './checkbox-item/checkbox-item.js';
+export { CompoundAPY } from './compound-apy/compound-apy.js';
+export { CreditSessionStatus } from './credit-session-status/credit-session-status.js';
+export { Description } from './description/description.js';
+export { DetailedPageTitle } from './detailed-page-title/detailed-page-title.js';
+export { Dialog, DialogPortal, DialogTrigger } from './dialog/dialog.js';
+export { DialogContainer } from './dialog/dialog-container.js';
+export { DialogContent } from './dialog/dialog-content.js';
+export { DialogDescription } from './dialog/dialog-description.js';
+export { DialogFooter } from './dialog/dialog-footer.js';
+export { DialogHeader } from './dialog/dialog-header.js';
+export { DialogOverlay } from './dialog/dialog-overlay.js';
+export { DialogTitle } from './dialog/dialog-title.js';
+export { DropdownMenu, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSub, DropdownMenuTrigger } from './dropdown-menu/dropdown-menu.js';
+export { DropdownMenuCheckboxItem } from './dropdown-menu/dropdown-menu-checkbox-item.js';
+export { DropdownMenuContent } from './dropdown-menu/dropdown-menu-content.js';
+export { DropdownMenuItem } from './dropdown-menu/dropdown-menu-item.js';
+export { DropdownMenuLabel } from './dropdown-menu/dropdown-menu-label.js';
+export { DropdownMenuRadioItem } from './dropdown-menu/dropdown-menu-radio-item.js';
+export { DropdownMenuSeparator } from './dropdown-menu/dropdown-menu-separator.js';
+export { DropdownMenuShortcut } from './dropdown-menu/dropdown-menu-shortcut.js';
+export { DropdownMenuSubContent } from './dropdown-menu/dropdown-menu-sub-content.js';
+export { DropdownMenuSubTrigger } from './dropdown-menu/dropdown-menu-sub-trigger.js';
+export { ErrorMessage } from './error-message/error-message.js';
+export { FilterBlock } from './filter/filter-block.js';
+export { FilterCheckboxItem } from './filter/filter-checkbox-item.js';
+export { FilterChip } from './filter/filter-chip.js';
+export { FilterChips } from './filter/filter-chips.js';
+export { FilterDropdownItem } from './filter/filter-dropdown-item.js';
+export { FilterGroup } from './filter/filter-group.js';
+export { FilterLabel } from './filter/filter-label.js';
+export { FilterModal } from './filter/filter-modal.js';
+export { FilterModalItem } from './filter/filter-modal-item.js';
+export { FilterRadioItem } from './filter/filter-radio-item.js';
+export { FilterSeparator } from './filter/filter-separator.js';
+export { filterBlockVariants } from './filter/variants.js';
+export { FormField } from './form/form-field.js';
+export { DEFAULT_AREA_SERIES, DEFAULT_OPTIONS, DEFAULT_VERTICAL_LINE, getDefaultOptions, getDefaultSeries, getDefaultVerticalLine } from './graph/default-config.js';
+export { getXFormatter, getYFormatter } from './graph/formatters.js';
+export { DEFAULT_SERIES_COLORS, Graph } from './graph/graph.js';
+export { GraphCurrentValue } from './graph/graph-current-value.js';
+export { GraphTooltip } from './graph/graph-tooltip.js';
+export { GraphView, GraphViewWithData, graphViewVariants, useGraphAside } from './graph/graph-view.js';
+export { VertLine } from './graph/plugins/vertical-line.js';
+export { Guard } from './guard/guard.js';
+export { BAD_HF, GOOD_HF, HealthFactor, getHFZones } from './health-factor/health-factor.js';
+export { HelpCenterContainer } from './help-center-container/help-center-container.js';
+export { HideOn, ShowOn } from './hide-on/hide-on.js';
+export { HorizontalIndicator } from './horizontal-indicator/horizontal-indicator.js';
+export { Image } from './image/image.js';
+export { Input, inputVariants } from './input/input.js';
+export { Label, labelVariants } from './label/label.js';
+export { AppLogo } from './layout/app-logo/app-logo.js';
+export { Col } from './layout/col/col.js';
+export { Container } from './layout/container/container.js';
+export { Footer, FooterLink, FooterLinkSection, GearboxFooter } from './layout/footer/footer.js';
+export { Grid } from './layout/grid/grid.js';
+export { Header, useMobileMenu } from './layout/header/header.js';
+export { Layout } from './layout/layout/layout.js';
+export { LegalDisclaimer } from './layout/legal-disclaimer/legal-disclaimer.js';
+export { PageLayout } from './layout/page-layout/page-layout.js';
+export { LiquidationModellingAssetsTable } from './liquidation/liquidation-assets-table/liquidation-assets-table.js';
+export { LiquidationGraph } from './liquidation/liquidation-graph/liquidation-graph.js';
+export { LiquidationGraphLegend } from './liquidation/liquidation-graph-legend/liquidation-graph-legend.js';
+export { LiquidationGraphTip } from './liquidation/liquidation-graph-tip/liquidation-graph-tip.js';
+export { LoaderGuard } from './loader-guard/loader-guard.js';
+export { Navbar, NavbarNav, navbarVariants } from './navbar/navbar.js';
+export { NavbarIndicatorProvider, useNavbarIndicator } from './navbar/navbar-indicator-context.js';
+export { NavItem, navitemVariants } from './navitem/navitem.js';
+export { NotFound } from './not-found/not-found.js';
+export { OptionsItem, OptionsList } from './options-list/options-list.js';
+export { PageTitle, pageTitleRootVariants, pageTitleVariants } from './page-title/page-title.js';
+export { PercentIndicator } from './percent-indicator/percent-indicator.js';
+export { PoolPointsIndicator } from './pool-points-indicator/pool-points-indicator.js';
+export { SearchBar } from './search-bar/search-bar.js';
+export { SearchLine, WithSearchLine, searchLineInputVariants, searchLineVariants } from './search-line/search-line.js';
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants } from './select/select.js';
+export { ShortString } from './short-string/short-string.js';
+export { ConfirmationItem } from './signatures/confirmation-item.js';
+export { Identicon } from './signatures/identicon.js';
+export { VerticalTimeline } from './signatures/vertical-timeline.js';
+export { Skeleton, skeletonVariants } from './skeleton/skeleton.js';
+export { StatBadge, StatBadgeGrid, statBadgeContentVariants, statBadgeGridVariants, statBadgeTitleVariants, statBadgeVariants } from './stat-badge/stat-badge.js';
+export { TabControl, TabItem, useHashTabs, useSectionTab, useTabControl } from './tab-control/tab-control.js';
+export { EditButton } from './table/edit-button.js';
+export { GridTableCellAsset, GridTableCellUpdatable, GridTableEditable } from './table/editable-grid-table.js';
+export { TableCellAsset, TableCellUpdatable, TableEditable } from './table/editable-table.js';
+export { GridErrorLine } from './table/grid-error-line.js';
+export { GridLoadingLine } from './table/grid-loading-line.js';
+export { GridTable, GridTableBody, GridTableCaption, GridTableCell, GridTableFooter, GridTableHead, GridTableHeader, GridTableRow, gridTableCellVariants, gridTableHeadVariants, gridTableVariants } from './table/grid-table.js';
+export { GridTableLoader } from './table/grid-table-loader.js';
+export { SortableHeadCell } from './table/sortable-head-cell.js';
+export { SortingTableHead, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, tableCellVariants, tableHeadVariants, tableVariants } from './table/table.js';
+export { TableLoader } from './table/table-loader.js';
+export { TableLoaderGuard } from './table/table-loader-guard.js';
+export { TableCellSm, TableLineSm } from './table/table-sm.js';
+export { UpdatedValue } from './table/updated-value.js';
+export { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs/tabs.js';
+export { Textarea, textareaVariants } from './textarea/textarea.js';
+export { ThemeProvider, useTheme } from './theme-provider.js';
+export { ThemeToggle } from './theme-toggle/theme-toggle.js';
+export { TokenIcon } from './token-icon/token-icon.js';
+export { TokenSymbol } from './token-symbol/token-symbol.js';
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip/tooltip.js';
+export { GraphDropdown } from './trading-view/graph-dropdown.js';
+export { TradingView } from './trading-view/trading-view.js';
+export { FormattedMessageTyped, useIntlTyped } from './typed-intl/index.js';
+export { VSpace } from './vspace/vspace.js';
+export { WithFilterButton } from './with-filter-button/with-filter-button.js';

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

@@ -0,0 +1 @@
+export { Input, inputVariants } from './input.js';

package/dist/esm/components/input/input.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+const inputVariants = cva(
+  "flex w-full rounded-md border border-input px-3 py-1 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/70 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm bg-[rgb(40,40,40)] text-foreground border-[rgb(100,100,100)] focus:bg-[rgb(40,40,40)] active:bg-[rgb(40,40,40)] [&:not(:placeholder-shown)]:bg-[rgb(40,40,40)] autofill:bg-[rgb(40,40,40)] [-webkit-autofill]:bg-[rgb(40,40,40)] [&:-webkit-autofill]:shadow-[0_0_0_1000px_rgb(40,40,40)_inset] [&:-webkit-autofill]:[text-fill-color:currentColor] outline-none",
+  {
+    variants: {
+      size: {
+        sm: "h-8 text-xs px-2",
+        default: "h-9",
+        lg: "h-11 text-base px-4"
+      },
+      variant: {
+        default: "",
+        error: "border-destructive",
+        success: "border-success"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default"
+    }
+  }
+);
+function Input({
+  hasError,
+  errorMessage,
+  value,
+  size,
+  variant,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-2", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...props,
+        value,
+        className: cn(
+          inputVariants({
+            size,
+            variant: hasError ? "error" : variant,
+            className
+          })
+        ),
+        onWheel: props.type === "number" ? (e) => e.currentTarget.blur() : void 0
+      }
+    ),
+    hasError && errorMessage && /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", children: errorMessage })
+  ] });
+}
+
+export { Input, inputVariants };

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

@@ -0,0 +1 @@
+export { Label, labelVariants } from './label.js';

package/dist/esm/components/label/label.js

@@ -0,0 +1,44 @@
+import { jsx } from 'react/jsx-runtime';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+const labelVariants = cva(
+  "flex font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  {
+    variants: {
+      size: {
+        sm: "text-sm",
+        default: "text-md",
+        lg: "text-xl"
+      },
+      variant: {
+        default: "text-foreground",
+        muted: "text-muted-foreground",
+        error: "text-destructive",
+        success: "text-green-500"
+      },
+      required: {
+        true: "after:content-['*'] after:ml-0.5 after:text-destructive"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default"
+    }
+  }
+);
+const Label = React.forwardRef(({ className, size, variant, required, ...props }, ref) => /* @__PURE__ */ jsx(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants({ size, variant, required, className })),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label, labelVariants };

package/dist/esm/components/layout/app-logo/app-logo.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Image } from '../../image/image.js';
+import { cn } from '../../../utils/cn.js';
+
+function AppLogo({
+  appName,
+  size = "default"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "text-foreground flex items-center gap-2",
+        size === "default" ? "text-xl" : "text-md"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Image,
+          {
+            src: "https://static.gearbox.fi/logo/logo_monochrome_white@2x.png",
+            alt: "Gearbox Protocol",
+            width: size === "default" ? 120 : 100,
+            height: size === "default" ? 24 : 20,
+            loading: "eager"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: appName })
+      ]
+    }
+  );
+}
+
+export { AppLogo };

package/dist/esm/components/layout/app-logo/index.js

@@ -0,0 +1 @@
+export { AppLogo } from './app-logo.js';