@gearbox-protocol/permissionless-ui 1.4.4 → 1.6.0

package/dist/cjs/components/auth/siwe-provider.js

@@ -1,5 +1,4 @@
 "use strict";
-"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/cjs/components/buttons/button.js

@@ -38,7 +38,7 @@ var import_class_variance_authority = require("class-variance-authority");
 var React = __toESM(require("react"));
 var import_utils = __toESM(require('../../utils/index.js'));
 const buttonVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-transparent",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-transparent outline-none focus-visible:outline-none",
   {
     variants: {
       variant: {

package/dist/cjs/components/cards/card.js

@@ -40,18 +40,21 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_class_variance_authority = require("class-variance-authority");
 var React = __toESM(require("react"));
 var import_utils = __toESM(require('../../utils/index.js'));
-const cardVariants = (0, import_class_variance_authority.cva)("rounded-xl border bg-card text-card-foreground", {
-  variants: {
-    variant: {
-      default: "",
-      interactive: "hover:bg-accent/50 transition-colors cursor-pointer",
-      transparent: "bg-card/0"
+const cardVariants = (0, import_class_variance_authority.cva)(
+  "rounded-xl border border-border bg-card text-card-foreground",
+  {
+    variants: {
+      variant: {
+        default: "",
+        interactive: "hover:bg-secondary transition-colors cursor-pointer",
+        transparent: "bg-card/0"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
     }
-  },
-  defaultVariants: {
-    variant: "default"
   }
-});
+);
 const Card = React.forwardRef(
   ({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",

package/dist/cjs/components/detailed-page-title.js

@@ -33,24 +33,28 @@ __export(detailed_page_title_exports, {
 module.exports = __toCommonJS(detailed_page_title_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_lucide_react = require("lucide-react");
+var React = __toESM(require("react"));
 var import_utils = __toESM(require('../utils/index.js'));
 var import_copy = require('../utils/copy.js');
 var import_button = require('./buttons/button.js');
 var import_dropdown_menu = require('./dropdown-menu/index.js');
 var import_page_title = require('./page-title.js');
 var import_token_icon = require('./token-icon.js');
+var import_typed_intl = require('./typed-intl/index.js');
 function DetailedPageTitle({
   title,
   token,
   toCopy,
   explorerLinks,
-  className,
-  onCopySuccess
+  className
 }) {
+  const intl = (0, import_typed_intl.useIntlTyped)();
+  const [isPressed, setIsPressed] = React.useState(false);
   const handleCopy = () => {
     if (toCopy) {
       (0, import_copy.copyToClipboard)({ text: toCopy });
-      onCopySuccess?.();
+      setIsPressed(true);
+      setTimeout(() => setIsPressed(false), 150);
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -65,6 +69,10 @@ function DetailedPageTitle({
             size: "icon",
             onClick: handleCopy,
             title: "Copy address",
+            className: (0, import_utils.default)(
+              "transition-all",
+              isPressed ? "scale-75" : "scale-100"
+            ),
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Copy, { className: "h-4 w-4" })
           }
         ),

package/dist/cjs/components/graph/graph-view.js

@@ -61,8 +61,8 @@ const graphViewVariants = (0, import_class_variance_authority.cva)(
       padding: {
         none: "p-0",
         sm: "p-2",
-        default: "p-6",
-        lg: "p-8"
+        default: "p-4 sm:p-6",
+        lg: "p-6"
       }
     },
     defaultVariants: {

package/dist/cjs/components/graph/graph.js

@@ -37,6 +37,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_lightweight_charts = require("lightweight-charts");
 var React = __toESM(require("react"));
 var import_react = require("react");
+var import_use_media_query = require('../../hooks/use-media-query.js');
 var import_cn = require('../../utils/cn.js');
 var import_colors = require('../../utils/colors.js');
 var import_default_config = require('./default-config.js');
@@ -100,6 +101,7 @@ function Graph({
   const chartRef = (0, import_react.useRef)(null);
   const seriesRefs = (0, import_react.useRef)(/* @__PURE__ */ new Map());
   const parentRef = (0, import_react.useRef)(null);
+  const isMobile = (0, import_use_media_query.useIsMobile)();
   const allPoints = React.useMemo(() => {
     return series.flatMap((s) => s.data);
   }, [series]);
@@ -145,7 +147,7 @@ function Graph({
     const hasZero = allPoints.some((p) => p.value === 0);
     const shouldPreventNegativeAxis = !hasNegativeValues && hasZero;
     const useMultiplePriceScales = series.length > 1;
-    const shouldHideScaleLabels = useMultiplePriceScales;
+    const shouldHideScaleLabels = useMultiplePriceScales || isMobile;
     const defaultOptions = (0, import_default_config.getDefaultOptions)();
     const chart = initChart(graphId, {
       ...defaultOptions,
@@ -166,6 +168,7 @@ function Graph({
       },
       rightPriceScale: {
         ...defaultOptions.rightPriceScale || {},
+        visible: !isMobile,
         ...shouldPreventNegativeAxis && {
           scaleMargins: {
             top: 0.3,
@@ -308,7 +311,8 @@ function Graph({
     xMeasureUnit,
     yMeasureUnit,
     optionsOverrides,
-    subscribeLegendMove
+    subscribeLegendMove,
+    isMobile
   ]);
   (0, import_react.useEffect)(() => {
     const ch = chartRef.current;

package/dist/cjs/components/layout/footer.js

@@ -58,7 +58,7 @@ const Footer = import_react.default.forwardRef(
       {
         ref,
         className: (0, import_cn.cn)(
-          "relative w-full border-t bg-card border-border mt-6 flex items-center justify-center",
+          "relative w-full border-t bg-card border-border flex items-center justify-center",
           className
         ),
         ...props,
@@ -138,7 +138,7 @@ function GearboxFooter({
     "footer",
     {
       className: (0, import_cn.cn)(
-        "relative w-full border-t bg-card border-border mt-6 flex items-center justify-center",
+        "relative w-full border-t bg-card border-border flex items-center justify-center",
         className
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 items-top py-6 w-full px-4 max-w-[1440px]", children: [

package/dist/cjs/components/layout/header.js

@@ -28,13 +28,24 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var header_exports = {};
 __export(header_exports, {
-  Header: () => Header
+  Header: () => Header,
+  useMobileMenu: () => useMobileMenu
 });
 module.exports = __toCommonJS(header_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_lucide_react = require("lucide-react");
 var import_react = __toESM(require("react"));
 var import_cn = require('../../utils/cn.js');
+const MobileMenuContext = import_react.default.createContext(
+  null
+);
+function useMobileMenu() {
+  const context = import_react.default.useContext(MobileMenuContext);
+  if (!context) {
+    throw new Error("useMobileMenu must be used within Header component");
+  }
+  return context;
+}
 const Header = import_react.default.forwardRef(
   ({
     navigation,
@@ -54,7 +65,7 @@ const Header = import_react.default.forwardRef(
       {
         ref,
         className: (0, import_cn.cn)(
-          "relative w-full bg-background h-18 mb-6 border-b flex flex-nowrap items-center border-border",
+          "relative w-full bg-background h-18 border-b flex flex-nowrap items-center border-border",
           fixed && "fixed top-0 left-0 right-0 z-50",
           sticky && "sticky top-0 z-50",
           className
@@ -87,10 +98,16 @@ const Header = import_react.default.forwardRef(
               ]
             }
           ),
-          mobileMenuOpen && (navigation || mobileMenuContent) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute top-full left-0 right-0 bg-background border-b border-border md:hidden z-40 shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col px-4 py-4 space-y-2", children: [
-            mobileMenuContent || navigation,
-            actions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-2 pt-4 border-t border-border mt-4", children: actions })
-          ] }) })
+          mobileMenuOpen && (navigation || mobileMenuContent) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            MobileMenuContext.Provider,
+            {
+              value: { closeMobileMenu: () => setMobileMenuOpen(false) },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute top-full left-0 right-0 bg-background border-b border-border md:hidden z-40 shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col px-4 py-4 space-y-2", children: [
+                mobileMenuContent || navigation,
+                actions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-2 pt-4 border-t border-border mt-4", children: actions })
+              ] }) })
+            }
+          )
         ]
       }
     );
@@ -99,5 +116,6 @@ const Header = import_react.default.forwardRef(
 Header.displayName = "Header";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Header
+  Header,
+  useMobileMenu
 });

package/dist/cjs/components/layout/layout.js

@@ -51,7 +51,18 @@ const Layout = import_react.default.forwardRef(
         ...props,
         children: [
           header && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { gridArea: "header" }, children: header }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("main", { className: "overflow-x-hidden", style: { gridArea: "main" }, children }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "main",
+            {
+              className: "overflow-x-hidden py-6",
+              style: {
+                gridArea: "main",
+                backgroundColor: "hsl(var(--main-background))",
+                color: "hsl(var(--main-foreground))"
+              },
+              children
+            }
+          ),
           footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { gridArea: "footer" }, children: footer })
         ]
       }

package/dist/cjs/components/layout/page-layout.js

@@ -23,15 +23,18 @@ __export(page_layout_exports, {
 module.exports = __toCommonJS(page_layout_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_back_button = require('../buttons/back-button.js');
+var import_container = require('./container.js');
 function PageLayout({
   children,
   title,
   description,
   icon,
   backButton,
-  actionButton
+  actionButton,
+  maxContainerWidth = "xl",
+  containerClassName
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-h-screen bg-black text-white p-6 overflow-y-auto", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_container.Container, { maxWidth: maxContainerWidth, className: containerClassName, children: [
     backButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_back_button.BackButton,
       {

package/dist/cjs/components/navitem.js

@@ -43,11 +43,11 @@ const navitemVariants = (0, import_class_variance_authority.cva)(
   {
     variants: {
       variant: {
-        default: "text-decoration-none text-foreground hover:text-foreground hover:bg-secondary",
-        active: "text-foreground",
-        ghost: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-secondary",
-        link: "text-decoration-none text-muted-foreground hover:text-foreground underline-offset-4 hover:underline",
-        pill: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-accent rounded-full",
+        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: "text-foreground 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",
+        link: "text-decoration-none text-muted-foreground hover:text-foreground underline-offset-4 hover:underline data-[active=true]:text-foreground data-[active=true]:underline",
+        pill: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-accent rounded-full data-[active=true]:bg-accent data-[active=true]:text-foreground",
         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"
       },
       size: {

package/dist/cjs/components/table/table-sm.js

@@ -63,7 +63,7 @@ function TableLineSm({
     "div",
     {
       className: (0, import_utils.default)(
-        "flex flex-col gap-3 p-4 border-b border-border",
+        "flex flex-col gap-3 py-3 px-0 md:px-4 border-b border-border",
         className
       ),
       ...props,
@@ -72,7 +72,7 @@ function TableLineSm({
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
-            className: "grid gap-4 table-sm-grid",
+            className: "grid gap-2 md:gap-4 table-sm-grid",
             style: {
               "--grid-cols-xs": colsXs,
               "--grid-cols-sm": colsSm,

package/dist/cjs/components/tabs.js

@@ -56,7 +56,7 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: (0, import_utils.default)(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow rounded-none border-b-2 border-transparent px-2 py-2 text-gray-400 hover:text-white data-[state=active]:border-white data-[state=active]:bg-transparent data-[state=active]:text-white focus:outline-none",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow rounded-none border-b-2 border-transparent px-2 py-2 text-gray-400 hover:text-white data-[state=active]:border-white data-[state=active]:bg-transparent data-[state=active]:text-white focus:outline-none cursor-pointer",
       className
     ),
     ...props

package/dist/esm/components/auth/siwe-provider.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx } from "react/jsx-runtime";
 import { SIWEProvider } from "connectkit";
 import { createSiweMessage } from "viem/siwe";

package/dist/esm/components/buttons/button.js

@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority";
 import * as React from "react";
 import cn from "../../utils/index.js";
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-transparent",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-transparent outline-none focus-visible:outline-none",
   {
     variants: {
       variant: {

package/dist/esm/components/cards/card.js

@@ -2,18 +2,21 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 import cn from "../../utils/index.js";
-const cardVariants = cva("rounded-xl border bg-card text-card-foreground", {
-  variants: {
-    variant: {
-      default: "",
-      interactive: "hover:bg-accent/50 transition-colors cursor-pointer",
-      transparent: "bg-card/0"
+const cardVariants = cva(
+  "rounded-xl border border-border bg-card text-card-foreground",
+  {
+    variants: {
+      variant: {
+        default: "",
+        interactive: "hover:bg-secondary transition-colors cursor-pointer",
+        transparent: "bg-card/0"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
     }
-  },
-  defaultVariants: {
-    variant: "default"
   }
-});
+);
 const Card = React.forwardRef(
   ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",

package/dist/esm/components/detailed-page-title.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Copy, ExternalLink } from "lucide-react";
+import * as React from "react";
 import cn from "../utils/index.js";
 import { copyToClipboard } from "../utils/copy.js";
 import { Button } from "./buttons/button.js";
@@ -11,18 +12,21 @@ import {
 } from "./dropdown-menu/index.js";
 import { PageTitle } from "./page-title.js";
 import { TokenIcon } from "./token-icon.js";
+import { useIntlTyped } from "./typed-intl/index.js";
 function DetailedPageTitle({
   title,
   token,
   toCopy,
   explorerLinks,
-  className,
-  onCopySuccess
+  className
 }) {
+  const intl = useIntlTyped();
+  const [isPressed, setIsPressed] = React.useState(false);
   const handleCopy = () => {
     if (toCopy) {
       copyToClipboard({ text: toCopy });
-      onCopySuccess?.();
+      setIsPressed(true);
+      setTimeout(() => setIsPressed(false), 150);
     }
   };
   return /* @__PURE__ */ jsx(
@@ -37,6 +41,10 @@ function DetailedPageTitle({
             size: "icon",
             onClick: handleCopy,
             title: "Copy address",
+            className: cn(
+              "transition-all",
+              isPressed ? "scale-75" : "scale-100"
+            ),
             children: /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" })
           }
         ),

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

@@ -25,8 +25,8 @@ const graphViewVariants = cva(
       padding: {
         none: "p-0",
         sm: "p-2",
-        default: "p-6",
-        lg: "p-8"
+        default: "p-4 sm:p-6",
+        lg: "p-6"
       }
     },
     defaultVariants: {

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

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { createChart } from "lightweight-charts";
 import * as React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useIsMobile } from "../../hooks/use-media-query.js";
 import { cn } from "../../utils/cn.js";
 import { generateColorsFromBase } from "../../utils/colors.js";
 import {
@@ -70,6 +71,7 @@ function Graph({
   const chartRef = useRef(null);
   const seriesRefs = useRef(/* @__PURE__ */ new Map());
   const parentRef = useRef(null);
+  const isMobile = useIsMobile();
   const allPoints = React.useMemo(() => {
     return series.flatMap((s) => s.data);
   }, [series]);
@@ -115,7 +117,7 @@ function Graph({
     const hasZero = allPoints.some((p) => p.value === 0);
     const shouldPreventNegativeAxis = !hasNegativeValues && hasZero;
     const useMultiplePriceScales = series.length > 1;
-    const shouldHideScaleLabels = useMultiplePriceScales;
+    const shouldHideScaleLabels = useMultiplePriceScales || isMobile;
     const defaultOptions = getDefaultOptions();
     const chart = initChart(graphId, {
       ...defaultOptions,
@@ -136,6 +138,7 @@ function Graph({
       },
       rightPriceScale: {
         ...defaultOptions.rightPriceScale || {},
+        visible: !isMobile,
         ...shouldPreventNegativeAxis && {
           scaleMargins: {
             top: 0.3,
@@ -278,7 +281,8 @@ function Graph({
     xMeasureUnit,
     yMeasureUnit,
     optionsOverrides,
-    subscribeLegendMove
+    subscribeLegendMove,
+    isMobile
   ]);
   useEffect(() => {
     const ch = chartRef.current;

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

@@ -22,7 +22,7 @@ const Footer = React.forwardRef(
       {
         ref,
         className: cn(
-          "relative w-full border-t bg-card border-border mt-6 flex items-center justify-center",
+          "relative w-full border-t bg-card border-border flex items-center justify-center",
           className
         ),
         ...props,
@@ -102,7 +102,7 @@ function GearboxFooter({
     "footer",
     {
       className: cn(
-        "relative w-full border-t bg-card border-border mt-6 flex items-center justify-center",
+        "relative w-full border-t bg-card border-border flex items-center justify-center",
         className
       ),
       children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 items-top py-6 w-full px-4 max-w-[1440px]", children: [

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

@@ -2,6 +2,16 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu, X } from "lucide-react";
 import React from "react";
 import { cn } from "../../utils/cn.js";
+const MobileMenuContext = React.createContext(
+  null
+);
+function useMobileMenu() {
+  const context = React.useContext(MobileMenuContext);
+  if (!context) {
+    throw new Error("useMobileMenu must be used within Header component");
+  }
+  return context;
+}
 const Header = React.forwardRef(
   ({
     navigation,
@@ -21,7 +31,7 @@ const Header = React.forwardRef(
       {
         ref,
         className: cn(
-          "relative w-full bg-background h-18 mb-6 border-b flex flex-nowrap items-center border-border",
+          "relative w-full bg-background h-18 border-b flex flex-nowrap items-center border-border",
           fixed && "fixed top-0 left-0 right-0 z-50",
           sticky && "sticky top-0 z-50",
           className
@@ -54,10 +64,16 @@ const Header = React.forwardRef(
               ]
             }
           ),
-          mobileMenuOpen && (navigation || mobileMenuContent) && /* @__PURE__ */ jsx("div", { className: "absolute top-full left-0 right-0 bg-background border-b border-border md:hidden z-40 shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-4 py-4 space-y-2", children: [
-            mobileMenuContent || navigation,
-            actions && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 pt-4 border-t border-border mt-4", children: actions })
-          ] }) })
+          mobileMenuOpen && (navigation || mobileMenuContent) && /* @__PURE__ */ jsx(
+            MobileMenuContext.Provider,
+            {
+              value: { closeMobileMenu: () => setMobileMenuOpen(false) },
+              children: /* @__PURE__ */ jsx("div", { className: "absolute top-full left-0 right-0 bg-background border-b border-border md:hidden z-40 shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-4 py-4 space-y-2", children: [
+                mobileMenuContent || navigation,
+                actions && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 pt-4 border-t border-border mt-4", children: actions })
+              ] }) })
+            }
+          )
         ]
       }
     );
@@ -65,5 +81,6 @@ const Header = React.forwardRef(
 );
 Header.displayName = "Header";
 export {
-  Header
+  Header,
+  useMobileMenu
 };

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

@@ -18,7 +18,18 @@ const Layout = React.forwardRef(
         ...props,
         children: [
           header && /* @__PURE__ */ jsx("div", { style: { gridArea: "header" }, children: header }),
-          /* @__PURE__ */ jsx("main", { className: "overflow-x-hidden", style: { gridArea: "main" }, children }),
+          /* @__PURE__ */ jsx(
+            "main",
+            {
+              className: "overflow-x-hidden py-6",
+              style: {
+                gridArea: "main",
+                backgroundColor: "hsl(var(--main-background))",
+                color: "hsl(var(--main-foreground))"
+              },
+              children
+            }
+          ),
           footer && /* @__PURE__ */ jsx("div", { style: { gridArea: "footer" }, children: footer })
         ]
       }

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

@@ -1,14 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { BackButton } from "../buttons/back-button.js";
+import { Container } from "./container.js";
 function PageLayout({
   children,
   title,
   description,
   icon,
   backButton,
-  actionButton
+  actionButton,
+  maxContainerWidth = "xl",
+  containerClassName
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-black text-white p-6 overflow-y-auto", children: [
+  return /* @__PURE__ */ jsxs(Container, { maxWidth: maxContainerWidth, className: containerClassName, children: [
     backButton && /* @__PURE__ */ jsx(
       BackButton,
       {

package/dist/esm/components/navitem.js

@@ -9,11 +9,11 @@ const navitemVariants = cva(
   {
     variants: {
       variant: {
-        default: "text-decoration-none text-foreground hover:text-foreground hover:bg-secondary",
-        active: "text-foreground",
-        ghost: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-secondary",
-        link: "text-decoration-none text-muted-foreground hover:text-foreground underline-offset-4 hover:underline",
-        pill: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-accent rounded-full",
+        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: "text-foreground 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",
+        link: "text-decoration-none text-muted-foreground hover:text-foreground underline-offset-4 hover:underline data-[active=true]:text-foreground data-[active=true]:underline",
+        pill: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-accent rounded-full data-[active=true]:bg-accent data-[active=true]:text-foreground",
         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"
       },
       size: {

package/dist/esm/components/table/table-sm.js

@@ -29,7 +29,7 @@ function TableLineSm({
     "div",
     {
       className: cn(
-        "flex flex-col gap-3 p-4 border-b border-border",
+        "flex flex-col gap-3 py-3 px-0 md:px-4 border-b border-border",
         className
       ),
       ...props,
@@ -38,7 +38,7 @@ function TableLineSm({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "grid gap-4 table-sm-grid",
+            className: "grid gap-2 md:gap-4 table-sm-grid",
             style: {
               "--grid-cols-xs": colsXs,
               "--grid-cols-sm": colsSm,

package/dist/esm/components/tabs.js

@@ -20,7 +20,7 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow rounded-none border-b-2 border-transparent px-2 py-2 text-gray-400 hover:text-white data-[state=active]:border-white data-[state=active]:bg-transparent data-[state=active]:text-white focus:outline-none",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow rounded-none border-b-2 border-transparent px-2 py-2 text-gray-400 hover:text-white data-[state=active]:border-white data-[state=active]:bg-transparent data-[state=active]:text-white focus:outline-none cursor-pointer",
       className
     ),
     ...props

package/dist/globals.css

@@ -1,5 +1,5 @@
-@import "tailwindcss";
 @import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap");
+@import "tailwindcss";
 @import "./grid-safelist.css";
 
 @layer base {
@@ -32,6 +32,8 @@
     --white: 0 0% 100%;
     --black: 0 0% 0%;
     --border: 0 0% 89.8%;
+    --main-background: 240 10% 3.9%;
+    --main-foreground: 0 0% 98%;
   }
 
   .dark {
@@ -74,6 +76,8 @@
     --white: 0 0% 100%;
     --black: 0 0% 0%;
     --border: 225 7% 22%;
+    --main-background: 240 10% 3.9%;
+    --main-foreground: 0 0% 98%;
   }
 }
 

package/dist/types/components/detailed-page-title.d.ts

@@ -1,5 +1,5 @@
 import type { TokenData } from "@gearbox-protocol/sdk";
-import type * as React from "react";
+import * as React from "react";
 export interface ExplorerLink {
     link: string;
     label: string;
@@ -10,7 +10,6 @@ export interface DetailedPageTitleProps {
     toCopy?: string;
     explorerLinks?: Array<ExplorerLink>;
     className?: string;
-    onCopySuccess?: () => void;
 }
 /**
  * DetailedPageTitle - page title with token icon, copy functionality, and explorer links
@@ -28,4 +27,4 @@ export interface DetailedPageTitleProps {
  * />
  * ```
  */
-export declare function DetailedPageTitle({ title, token, toCopy, explorerLinks, className, onCopySuccess, }: DetailedPageTitleProps): React.ReactElement;
+export declare function DetailedPageTitle({ title, token, toCopy, explorerLinks, className, }: DetailedPageTitleProps): React.ReactElement;

package/dist/types/components/layout/header.d.ts

@@ -1,4 +1,25 @@
 import React from "react";
+interface MobileMenuContextValue {
+    closeMobileMenu: () => void;
+}
+/**
+ * Hook to access mobile menu control functions
+ * Use this hook inside mobileMenuContent to close the menu on navigation
+ *
+ * @example
+ * ```tsx
+ * function MobileNav() {
+ *   const { closeMobileMenu } = useMobileMenu();
+ *
+ *   return (
+ *     <nav>
+ *       <a href="/" onClick={closeMobileMenu}>Home</a>
+ *     </nav>
+ *   );
+ * }
+ * ```
+ */
+export declare function useMobileMenu(): MobileMenuContextValue;
 export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Navigation content (shown on desktop, hidden on mobile unless specified)
@@ -79,3 +100,4 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
  * ```
  */
 export declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/types/components/layout/page-layout.d.ts

@@ -9,6 +9,8 @@ interface PageLayoutProps {
         onClick?: () => void;
     };
     actionButton?: JSX.Element;
+    maxContainerWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+    containerClassName?: string;
 }
 /**
  * PageLayout — main layout component for application pages.
@@ -35,5 +37,5 @@ interface PageLayoutProps {
  * - for modal dialogs or overlays (use Dialog component instead).
  * - for nested page sections (use Card or other container components).
  */
-export declare function PageLayout({ children, title, description, icon, backButton, actionButton, }: PageLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageLayout({ children, title, description, icon, backButton, actionButton, maxContainerWidth, containerClassName, }: PageLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/permissionless-ui",
-  "version": "1.4.4",
+  "version": "1.6.0",
   "description": "Internal UI components",
   "license": "MIT",
   "main": "./dist/cjs/index.js",
@@ -66,13 +66,13 @@
     "react-markdown": "^9.0.3",
     "react-markdown-math": "^1.0.2",
     "remark-gfm": "^4.0.0",
-    "sonner": "^1.7.2",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "peerDependencies": {
     "@gearbox-protocol/sdk": "*",
-    "@tanstack/react-query": "^5.0.0",
+    "@tanstack/react-query": "^5.64.1",
     "@types/react": "^18 || ^19",
     "@types/react-dom": "^18 || ^19",
     "connectkit": "^1.8.0",
@@ -82,6 +82,7 @@
     "react-intl": "^6.0.0 || ^7.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0",
     "reactochart": "^6.1.1",
+    "sonner": "^2.0.0",
     "viem": "^2.0.0",
     "wagmi": "^2.0.0"
   },
@@ -94,6 +95,9 @@
     },
     "react-router-dom": {
       "optional": true
+    },
+    "sonner": {
+      "optional": true
     }
   },
   "devDependencies": {