@gearbox-protocol/permissionless-ui 1.7.4 → 1.8.0

package/README.md

@@ -244,10 +244,6 @@ import { TokenIcon } from '@gearbox-protocol/permissionless-ui/next';
 import { TokenIcon } from '@gearbox-protocol/permissionless-ui';
 ```
 
-## Migration
-
-If you're migrating from a version that required Next.js, see [MIGRATION.md](./MIGRATION.md) for detailed instructions.
-
 ### Important information for contributors
 
 As a contributor to the Gearbox Protocol GitHub repository, your pull requests indicate acceptance of our Gearbox Contribution Agreement. This agreement outlines that you assign the Intellectual Property Rights of your contributions to the Gearbox Foundation. This helps safeguard the Gearbox protocol and ensure the accumulation of its intellectual property. Contributions become part of the repository and may be used for various purposes, including commercial. As recognition for your expertise and work, you receive the opportunity to participate in the protocol's development and the potential to see your work integrated within it. The full Gearbox Contribution Agreement is accessible within the [repository](/ContributionAgreement) for comprehensive understanding. [Let's innovate together!]

package/dist/cjs/_virtual/_commonjsHelpers.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+exports.getDefaultExportFromCjs = getDefaultExportFromCjs;

package/dist/cjs/_virtual/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+const _commonjsHelpers = require('./_commonjsHelpers.cjs');
+const index = require('../node_modules/.pnpm/tailwind-scrollbar@4.0.2_react@19.2.0_tailwindcss@4.1.17/node_modules/tailwind-scrollbar/src/index.cjs');
+
+var srcExports = index.__require();
+const tailwindScrollbar = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(srcExports);
+
+module.exports = tailwindScrollbar;

package/dist/cjs/components/alert-dialog/alert-dialog.cjs

@@ -58,7 +58,7 @@ const AlertDialogContent = React__namespace.forwardRef(({ className, ...props },
     {
       ref,
       className: utils_cn.cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-input bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-input bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
         className
       ),
       ...props

package/dist/cjs/components/error-message/error-message.cjs

@@ -24,17 +24,17 @@ function ErrorMessage({
       maxWidth: "md",
       padding: true,
       className: utils_cn.cn(
-        "min-h-[200px] min-w-[320px] max-w-[600px]",
+        "min-w-[280px] md:min-w-[320px] max-w-[600px]",
         theme === "dark" && "bg-slate-900",
         theme === "light" && "bg-white"
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-wrap justify-center", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-wrap justify-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full text-center text-xl font-medium text-muted-foreground", children: [
           /* @__PURE__ */ jsxRuntime.jsx(components_typedIntl_index.FormattedMessageTyped, { messageId: "components.errorMessage.oops" }),
-          "😬"
+          " 😬"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full min-h-[100px] justify-center items-start pt-5 pr-8 pl-3 text-lg text-center text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(reactIntl.FormattedMessage, { id: err.message, defaultMessage: err.message }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(components_buttons_button_button.Button, { onClick, className: "w-1/2", children: btnTitle })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full justify-center items-start px-2 text-lg text-center text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(reactIntl.FormattedMessage, { id: err.message, defaultMessage: err.message }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(components_buttons_button_button.Button, { onClick, className: "w-1/2 mt-2", children: btnTitle })
       ] })
     }
   );

package/dist/cjs/components/graph/graph-current-value.cjs

@@ -24,8 +24,8 @@ function GraphCurrentValue({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: yFormatted }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-muted-foreground whitespace-nowrap overflow-hidden text-ellipsis mt-0.5", children: xFormatted })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: yFormatted }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs sm:text-sm font-medium text-muted-foreground whitespace-nowrap overflow-hidden text-ellipsis mt-0.5", children: xFormatted })
       ]
     }
   );

package/dist/cjs/components/graph/graph-tooltip.cjs

@@ -75,8 +75,8 @@ function GraphTooltip({
         className
       ),
       style: positionStyles,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-background/90 backdrop-blur-sm rounded border border-border p-2 space-y-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-muted-foreground mb-1 whitespace-nowrap", children: xFormatted }),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-background/90 backdrop-blur-sm rounded border border-border p-1.5 sm:p-2 space-y-1 sm:space-y-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs sm:text-sm font-medium text-muted-foreground mb-0.5 sm:mb-1 whitespace-nowrap", children: xFormatted }),
         series.map((s, index) => {
           const pointData = points.get(s.label);
           if (!pointData) return null;
@@ -94,12 +94,12 @@ function GraphTooltip({
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: "flex items-center gap-2 text-sm whitespace-nowrap",
+              className: "flex items-center gap-1.5 sm:gap-2 text-xs sm:text-sm whitespace-nowrap",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: "w-2 h-2 rounded-full flex-shrink-0",
+                    className: "w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full flex-shrink-0",
                     style: { backgroundColor: lineColor }
                   }
                 ),

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

@@ -38,10 +38,10 @@ const graphViewVariants = classVarianceAuthority.cva(
         ghost: "border-0 shadow-none"
       },
       size: {
-        sm: "h-64",
-        default: "h-96",
-        lg: "h-[32rem]",
-        xl: "h-[48rem]",
+        sm: "h-48 sm:h-64",
+        default: "h-64 sm:h-96",
+        lg: "h-96 sm:h-[32rem]",
+        xl: "h-[32rem] sm:h-[48rem]",
         full: "h-full"
       },
       padding: {
@@ -86,15 +86,15 @@ const GraphView = React__namespace.forwardRef(
         children: [
           hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 flex items-start justify-between gap-4 flex-shrink-0", children: [
             (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-              title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold leading-none tracking-tight", children: title }),
-              description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+              title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base sm:text-lg font-semibold leading-none tracking-tight", children: title }),
+              description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs sm:text-sm text-muted-foreground", children: description })
             ] }),
             toolbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 w-full", children: toolbar })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 w-full min-h-0", children: [
             loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-transparent backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Loading..." })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm text-muted-foreground", children: "Loading..." })
             ] }) }),
             error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 text-destructive", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -116,7 +116,7 @@ const GraphView = React__namespace.forwardRef(
                   )
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: error })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm font-medium", children: error })
             ] }) }),
             !error && !children && emptyMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 text-muted-foreground", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -138,7 +138,7 @@ const GraphView = React__namespace.forwardRef(
                   )
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: emptyMessage })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm", children: emptyMessage })
             ] }) }),
             !error && children
           ] })

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

@@ -588,7 +588,7 @@ function GraphLegend({
               style: { backgroundColor: lineColor }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-foreground", children: s.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] sm:text-xs font-medium text-foreground", children: s.label }),
           onUnselect && /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
@@ -597,7 +597,7 @@ function GraphLegend({
                 e.stopPropagation();
                 onUnselect(s.label);
               },
-              className: "ml-1 flex items-center justify-center w-4 h-4 rounded-sm hover:bg-muted transition-colors",
+              className: "ml-1 flex items-center justify-center w-4 h-4 rounded-sm hover:bg-muted transition-colors cursor-pointer",
               "aria-label": `Remove ${s.label}`,
               children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "svg",

package/dist/cjs/components/layout/app-logo/app-logo.cjs

@@ -14,8 +14,8 @@ function AppLogo({
     "div",
     {
       className: utils_cn.cn(
-        "text-foreground flex items-center gap-2",
-        size === "default" ? "text-xl" : "text-md"
+        "text-foreground flex items-center gap-1 sm:gap-2",
+        size === "default" ? "text-base sm:text-lg md:text-xl" : "text-sm sm:text-base md:text-md"
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -25,10 +25,14 @@ function AppLogo({
             alt: "Gearbox Protocol",
             width: size === "default" ? 120 : 100,
             height: size === "default" ? 24 : 20,
-            loading: "eager"
+            loading: "eager",
+            className: utils_cn.cn(
+              "h-auto",
+              size === "default" ? "w-20 sm:w-24 md:w-[120px]" : "w-16 sm:w-20 md:w-[100px]"
+            )
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: appName })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground truncate", children: appName })
       ]
     }
   );

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

@@ -112,7 +112,7 @@ function GearboxFooter({
       ),
       children: /* @__PURE__ */ jsxRuntime.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: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 h-full justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(components_layout_appLogo_appLogo.AppLogo, { appName, size: "small" }),
+          /* @__PURE__ */ jsxRuntime.jsx(components_layout_appLogo_appLogo.AppLogo, { appName }),
           /* @__PURE__ */ jsxRuntime.jsx(components_layout_legalDisclaimer_legalDisclaimer.LegalDisclaimer, { hrefs: legalReferences })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 h-full justify-between", children: [

package/dist/cjs/components/layout/grid/grid.cjs

@@ -129,6 +129,9 @@ const GAP_Y_CLASSES = {
 };
 const getGridColsClass = (cols, breakpoint) => {
   if (!cols) return "";
+  if (typeof cols === "string") {
+    return "";
+  }
   if (typeof cols === "number") {
     if (breakpoint === "sm") return GRID_COLS_SM_CLASSES[cols] || "";
     if (breakpoint === "md") return GRID_COLS_MD_CLASSES[cols] || "";
@@ -159,7 +162,10 @@ const Grid = React.forwardRef(
     children,
     ...props
   }, ref) => {
-    const customStyle = typeof cols === "string" ? { ...style, gridTemplateColumns: cols } : style;
+    const customStyle = typeof cols === "string" ? {
+      ...style,
+      gridTemplateColumns: cols === "auto" ? "repeat(auto-fit, minmax(0, auto))" : cols
+    } : style;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {

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

@@ -47,19 +47,19 @@ const Header = React.forwardRef(
             "div",
             {
               className: utils_cn.cn(
-                "w-full h-full flex items-stretch justify-between mx-auto px-4 max-w-[1440px]",
+                "w-full h-full flex items-stretch justify-between mx-auto px-4 sm:px-6 lg:px-8 max-w-[1440px]",
                 containerClassName
               ),
               children: [
                 logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: logo }),
                 navigation && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex items-center", children: navigation }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
                   actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex items-center gap-2", children: actions }),
-                  (navigation || mobileMenuContent) && /* @__PURE__ */ jsxRuntime.jsx(
+                  (navigation || mobileMenuContent || actions) && /* @__PURE__ */ jsxRuntime.jsx(
                     "button",
                     {
                       type: "button",
-                      className: "md:hidden flex items-center justify-center p-2 rounded-md hover:bg-accent hover:text-accent-foreground focus:outline-none",
+                      className: "md:hidden flex items-center justify-center p-2 rounded-md hover:bg-secondary hover:text-accent-foreground focus:outline-none cursor-pointer",
                       onClick: () => setMobileMenuOpen(!mobileMenuOpen),
                       "aria-label": mobileMenuOpen ? "Close menu" : "Open menu",
                       children: mobileMenuOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-6 w-6" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "h-6 w-6" })
@@ -69,13 +69,22 @@ const Header = React.forwardRef(
               ]
             }
           ),
-          mobileMenuOpen && (navigation || mobileMenuContent) && /* @__PURE__ */ jsxRuntime.jsx(
+          mobileMenuOpen && (navigation || mobileMenuContent || actions) && /* @__PURE__ */ jsxRuntime.jsx(
             MobileMenuContext.Provider,
             {
               value: { closeMobileMenu: () => setMobileMenuOpen(false) },
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-full left-0 right-0 bg-background border-b border-border md:hidden z-40 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col px-4 py-4 space-y-2", children: [
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-full left-0 right-0 bg-background border-b border-border md:hidden z-40 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col px-4 sm:px-6 py-4 space-y-2", children: [
                 mobileMenuContent || navigation,
-                actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 pt-4 border-t border-border mt-4", children: actions })
+                actions && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: utils_cn.cn(
+                      "flex flex-col gap-2",
+                      (mobileMenuContent || navigation) && "pt-4 border-t border-border mt-4"
+                    ),
+                    children: actions
+                  }
+                )
               ] }) })
             }
           )

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

@@ -29,8 +29,8 @@ function PageLayout({
       icon,
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center w-full", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold", children: title }),
-          actionButton
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold max-w-64 md:max-w-128 truncate", children: title }),
+          actionButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: actionButton })
         ] }),
         description
       ] })

package/dist/cjs/components/liquidation/liquidation-assets-table/liquidation-assets-table.cjs

@@ -7,8 +7,9 @@ const sdk = require('@gearbox-protocol/sdk');
 const React = require('react');
 const components_tokenSymbol_tokenSymbol = require('../../token-symbol/token-symbol.cjs');
 const components_typedIntl_index = require('../../typed-intl/index.cjs');
+const hooks_useMediaQuery = require('../../../hooks/use-media-query.cjs');
+const utils_cn = require('../../../utils/cn.cjs');
 
-const lineHeight = 51;
 function LiquidationModellingAssetsTable({
   tokensList,
   graphParams,
@@ -20,16 +21,21 @@ function LiquidationModellingAssetsTable({
   const fixedBalancesRecord = React.useMemo(() => {
     return sdk.AssetUtils.constructAssetRecord(fixedBalances);
   }, [fixedBalances]);
+  const isMobile = hooks_useMediaQuery.useIsMobile();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
     /* @__PURE__ */ jsxRuntime.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",
+        className: utils_cn.cn(
+          "grid w-full px-3 sm:px-4 gap-1 sm:gap-2 items-center",
+          "h-7 sm:h-8 md:h-[30px]",
+          "relative after:absolute after:bottom-0 after:left-2 sm:after:left-3 after:right-2 sm:after:right-3 after:h-px after:border-b after:border-border"
+        ),
         style: { gridTemplateColumns: "1fr 1fr 1fr" },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-left text-sm font-medium text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(components_typedIntl_index.FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.asset" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right text-sm font-medium text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(components_typedIntl_index.FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.currentPrice" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right text-sm font-medium text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(components_typedIntl_index.FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.modelPrice" }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-left text-xs sm:text-sm font-medium text-muted-foreground truncate", children: /* @__PURE__ */ jsxRuntime.jsx(components_typedIntl_index.FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.asset" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right text-xs sm:text-sm font-medium text-muted-foreground truncate", children: /* @__PURE__ */ jsxRuntime.jsx(components_typedIntl_index.FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.currentPrice" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right text-xs sm:text-sm font-medium text-muted-foreground truncate", children: /* @__PURE__ */ jsxRuntime.jsx(components_typedIntl_index.FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.modelPrice" }) })
         ]
       }
     ),
@@ -38,26 +44,30 @@ function LiquidationModellingAssetsTable({
       return /* @__PURE__ */ jsxRuntime.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"}`,
+          className: utils_cn.cn(
+            "grid w-full px-3 sm:px-4 gap-1 sm:gap-2 items-center relative",
+            "h-12 sm:h-14 md:h-[51px]",
+            !isLast && "after:absolute after:bottom-0 after:left-2 sm:after:left-3 after:right-2 sm:after:right-3 after:h-px after:border-b after:border-border"
+          ),
           style: {
-            gridTemplateColumns: "1fr 1fr 1fr",
-            height: `${lineHeight}px`
+            gridTemplateColumns: "1fr 1fr 1fr"
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-left", children: /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-left min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
               components_tokenSymbol_tokenSymbol.TokenSymbol,
               {
-                size: 24,
+                size: isMobile ? 18 : 24,
                 token: tokensList[c.token],
                 showSymbol: true,
-                maxLength: 8
+                maxLength: 6,
+                className: "gap-1.5 sm:gap-2"
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-right", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-right text-xs sm:text-sm md:text-base truncate", children: [
               "$",
               formatPrice(prices[c.token])
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: fixedBalancesRecord[c.token] ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(components_typedIntl_index.FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.seeGraph" }) }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right min-w-0", children: fixedBalancesRecord[c.token] ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm text-muted-foreground truncate", children: /* @__PURE__ */ jsxRuntime.jsx(components_typedIntl_index.FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.seeGraph" }) }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm md:text-base text-muted-foreground truncate", children: [
               "$",
               formatPrice(editedPrices[c.token] || prices[c.token])
             ] }) })

package/dist/cjs/components/loader-guard/loader-guard.cjs

@@ -21,12 +21,16 @@ function LoaderGuard({
   children,
   loader
 }) {
-  const defaultLoader = /* @__PURE__ */ jsxRuntime.jsx(components_layout_container_container.Container, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 p-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(components_skeleton_skeleton.Skeleton, { className: "h-8 w-64" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(components_skeleton_skeleton.Skeleton, { className: "h-4 w-full" }),
-      /* @__PURE__ */ jsxRuntime.jsx(components_skeleton_skeleton.Skeleton, { className: "h-4 w-full" }),
-      /* @__PURE__ */ jsxRuntime.jsx(components_skeleton_skeleton.Skeleton, { className: "h-4 w-3/4" })
+  const defaultLoader = /* @__PURE__ */ jsxRuntime.jsx(components_layout_container_container.Container, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 p-4 sm:p-6 w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(components_skeleton_skeleton.Skeleton, { className: "h-6 sm:h-8 w-48 sm:w-64" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 mb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(components_skeleton_skeleton.Skeleton, { className: "h-3 sm:h-4 w-full" }),
+      /* @__PURE__ */ jsxRuntime.jsx(components_skeleton_skeleton.Skeleton, { className: "h-3 sm:h-4 w-full" }),
+      /* @__PURE__ */ jsxRuntime.jsx(components_skeleton_skeleton.Skeleton, { className: "h-3 sm:h-4 w-3/4" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 md:flex-row flex-col w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(components_skeleton_skeleton.Skeleton, { className: "h-48 sm:h-64 md:h-72 md:w-2/3 w-full" }),
+      /* @__PURE__ */ jsxRuntime.jsx(components_skeleton_skeleton.Skeleton, { className: "h-48 sm:h-64 md:h-72 md:w-1/3 w-full" })
     ] })
   ] }) });
   const showGuard = show;

package/dist/cjs/components/navbar/navbar.cjs

@@ -60,7 +60,10 @@ const NavbarContent = ({ containerClassName, children }) => {
     {
       ref: indicatorContext?.containerRef,
       className: utils_cn.cn(
-        "flex items-center gap-2 flex-1 justify-center overflow-x-auto h-full relative",
+        "flex items-center gap-2 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",
+        "navbar-scrollbar",
         containerClassName
       ),
       children: [
@@ -108,7 +111,7 @@ const NavbarNav = React__namespace.forwardRef(({ className, children, ...props }
   "div",
   {
     ref,
-    className: utils_cn.cn("flex items-center gap-1", className),
+    className: utils_cn.cn("flex items-center gap-1 min-w-max", className),
     ...props,
     children
   }

package/dist/cjs/components/navitem/navitem.cjs

@@ -35,12 +35,12 @@ const navitemVariants = classVarianceAuthority.cva(
   {
     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: "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"
+        default: "text-decoration-none text-foreground hover:text-foreground hover:bg-secondary data-[active=true]:bg-transparent 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-transparent md:bg-secondary 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-transparent md:data-[active=true]:bg-transparent data-[active=true]:text-foreground active:bg-transparent focus:bg-transparent md:focus:bg-secondary",
+        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-transparent 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",

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

@@ -79,7 +79,7 @@ const PageTitle = React__namespace.forwardRef(
   }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils_cn.cn("w-full", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn(pageTitleRootVariants({ spacing })), children: [
       backButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: backButton }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex items-center gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col md:flex-row md:items-center gap-4", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
           icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: icon }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
@@ -93,7 +93,7 @@ const PageTitle = React__namespace.forwardRef(
             subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground mt-1", children: subtitle })
           ] })
         ] }),
-        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 flex items-center gap-2", children: actions })
+        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 flex items-center gap-2 md:ml-auto", children: actions })
       ] })
     ] }) });
   }

package/dist/cjs/components/tab-control/tab-control.cjs

@@ -86,7 +86,8 @@ function TabControl({
       {
         ref: wrapRef,
         className: utils_cn.cn(
-          "relative bottom-[-1px] flex items-stretch gap-3",
+          "relative bottom-[-1px] flex items-stretch gap-3 overflow-x-auto overflow-y-hidden w-full",
+          "navbar-scrollbar",
           showBorder && "border-b border-border"
         ),
         children: tabs.map((t, index, arr) => {
@@ -102,9 +103,9 @@ function TabControl({
               onClick: t.disabled ? void 0 : handleTabSelect(t.id, index),
               disabled: t.disabled,
               className: utils_cn.cn(
-                "flex items-center bg-transparent border-none",
+                "flex items-center bg-transparent border-none shrink-0",
                 tabItemWrapPadding || "pb-3.5",
-                variant === "equal" ? "flex-1 justify-center" : !isLast && "mr-10 sm:mr-8",
+                variant === "equal" ? "flex-1 justify-center min-w-0" : !isLast && "mr-10 sm:mr-8",
                 s || t.disabled ? "cursor-default" : "cursor-pointer",
                 !t.disabled && "hover:text-foreground"
               ),

package/dist/cjs/components/tabs/tabs.cjs

@@ -35,7 +35,7 @@ const TabsList = React__namespace.forwardRef(({ className, ...props }, ref) => /
   {
     ref,
     className: utils_cn.cn(
-      "inline-flex h-fit items-center justify-start rounded-lg bg-muted p-1 text-muted-foreground bg-transparent p-0 space-x-6",
+      "inline-flex h-fit items-center justify-start rounded-lg bg-muted p-1 text-muted-foreground bg-transparent p-0 space-x-6 overflow-x-auto overflow-y-hidden navbar-scrollbar min-w-max",
       className
     ),
     ...props
@@ -47,7 +47,7 @@ const TabsTrigger = React__namespace.forwardRef(({ className, ...props }, ref) =
   {
     ref,
     className: utils_cn.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-foreground data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground focus:outline-none cursor-pointer",
+      "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-foreground data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground focus:outline-none cursor-pointer shrink-0",
       className
     ),
     ...props

package/dist/cjs/components/theme-toggle/theme-toggle.cjs

@@ -12,7 +12,7 @@ function ThemeToggle() {
     {
       type: "button",
       onClick: () => setTheme(actualTheme === "dark" ? "light" : "dark"),
-      className: "rounded-md p-2 hover:bg-accent cursor-pointer",
+      className: "rounded-md p-2 hover:bg-secondary cursor-pointer",
       "aria-label": "Toggle theme",
       children: actualTheme === "dark" ? /* @__PURE__ */ jsxRuntime.jsxs(
         "svg",

package/dist/cjs/components/token-icon/token-icon.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const components_image_image = require('../image/image.cjs');
+const utils_cn = require('../../utils/cn.cjs');
 
 function TokenIcon({
   symbol,
@@ -61,7 +62,7 @@ function TokenIcon({
                 alt: "",
                 width: size,
                 height: size,
-                className,
+                className: utils_cn.cn("w-full h-full object-contain block", className),
                 onError: () => setSrc(defaultSrc),
                 onLoad: () => setIsLoading(false)
               }

package/dist/cjs/components/token-symbol/token-symbol.cjs

@@ -40,12 +40,12 @@ function TokenSymbol({
       {
         symbol,
         size,
-        className: "rounded-full border-0"
+        className: "rounded-full border-0 shrink-0 self-center"
       }
     ),
-    showSymbol && tokenTitle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: tokenTitle }),
-      comment && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-md text-muted-foreground", children: [
+    showSymbol && tokenTitle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 self-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs sm:text-sm md:text-base font-medium truncate whitespace-pre-wrap leading-tight", children: tokenTitle }),
+      comment && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-md text-muted-foreground leading-tight", children: [
         "(",
         comment,
         ")"