@gearbox-protocol/permissionless-ui 1.2.33 → 1.4.0

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

@@ -28,13 +28,82 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var footer_exports = {};
 __export(footer_exports, {
-  Footer: () => Footer
+  Footer: () => Footer,
+  FooterLink: () => FooterLink,
+  FooterLinkSection: () => FooterLinkSection,
+  GearboxFooter: () => GearboxFooter
 });
 module.exports = __toCommonJS(footer_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
+var import_cn = require('../../utils/cn.js');
 var import_app_logo = require('./app-logo.js');
 var import_legal_disclaimer = require('./legal-disclaimer.js');
+const Footer = import_react.default.forwardRef(
+  ({
+    logo,
+    copyright,
+    social,
+    version,
+    secondaryInfo,
+    legalLinks,
+    containerClassName,
+    className,
+    children,
+    mobileExtraContent,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "footer",
+      {
+        ref,
+        className: (0, import_cn.cn)(
+          "relative w-full border-t bg-card border-border mt-6 flex items-center justify-center",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: (0, import_cn.cn)(
+              "flex flex-col sm:flex-row sm:flex-nowrap justify-between items-center sm:items-start gap-4 sm:gap-0 py-6 w-full px-4 max-w-[1440px]",
+              containerClassName
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-center sm:text-left text-sm text-muted-foreground w-full sm:w-auto", children: [
+                logo && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex justify-center sm:justify-start", children: logo }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-2" })
+                ] }),
+                copyright && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: copyright }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-4 flex flex-col items-center justify-center gap-2 sm:hidden", children: mobileExtraContent })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full sm:w-auto", children: [
+                social && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-center sm:justify-end gap-2.5", children: social }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-3" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center justify-center sm:justify-end gap-2 text-sm text-muted-foreground", children: [
+                  version && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: version }),
+                  secondaryInfo && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "h-1 w-1 rounded-full bg-muted-foreground/30" }),
+                    secondaryInfo
+                  ] }),
+                  legalLinks && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "h-1 w-1 rounded-full bg-muted-foreground/30" }),
+                    legalLinks
+                  ] })
+                ] })
+              ] }),
+              children
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Footer.displayName = "Footer";
 function FooterLink({ href, text, external = false }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "a",
@@ -42,6 +111,7 @@ function FooterLink({ href, text, external = false }) {
       href,
       className: "text-muted-foreground hover:text-foreground transition-colors duration-200 text-sm",
       target: external ? "_blank" : void 0,
+      rel: external ? "noopener noreferrer" : void 0,
       children: text
     }
   );
@@ -51,70 +121,85 @@ function FooterLinkSection({
   links
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-1 md:items-end", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "font-semibold text-foreground", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-foreground", children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap gap-4", children: links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FooterLink, { ...link }),
       index < links.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-sm", children: "\u2022" })
     ] }, link.href)) })
   ] });
 }
-function Footer({
+function GearboxFooter({
   appName,
-  legalReferences
+  legalReferences,
+  className,
+  mobileStatusContent
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("footer", { className: "border-t border-gray-800 bg-background px-4 py-2 mt-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 items-top", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-8 h-full justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_app_logo.AppLogo, { appName, size: "small" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_legal_disclaimer.LegalDisclaimer, { hrefs: legalReferences })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-8 h-full justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        FooterLinkSection,
-        {
-          title: "Legal",
-          links: [
-            {
-              href: legalReferences.termsOfService,
-              text: "Terms of Service"
-            },
-            {
-              href: legalReferences.privacyNotice,
-              text: "Privacy Notice"
-            },
-            {
-              href: legalReferences.riskDisclosure,
-              text: "Risk Disclosure"
-            }
-          ]
-        }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "footer",
+    {
+      className: (0, import_cn.cn)(
+        "relative w-full border-t bg-card border-border mt-6 flex items-center justify-center",
+        className
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        FooterLinkSection,
-        {
-          title: "Developers",
-          links: [
-            {
-              href: "https://docs.gearbox.fi/gearbox-permissionless-doc",
-              text: "Documentation",
-              external: true
-            },
+      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: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4 h-full justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_app_logo.AppLogo, { appName, size: "small" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_legal_disclaimer.LegalDisclaimer, { hrefs: legalReferences })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4 h-full justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            FooterLinkSection,
             {
-              href: "https://docs.gearbox.finance/risk-and-security/audits-bug-bounty",
-              text: "Audits",
-              external: true
-            },
+              title: "Legal",
+              links: [
+                {
+                  href: legalReferences.termsOfService,
+                  text: "Terms of Service"
+                },
+                {
+                  href: legalReferences.privacyNotice,
+                  text: "Privacy Notice"
+                },
+                {
+                  href: legalReferences.riskDisclosure,
+                  text: "Risk Disclosure"
+                }
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            FooterLinkSection,
             {
-              href: "https://github.com/Gearbox-protocol",
-              text: "GitHub",
-              external: true
+              title: "Developers",
+              links: [
+                {
+                  href: "https://docs.gearbox.fi/gearbox-permissionless-doc",
+                  text: "Documentation",
+                  external: true
+                },
+                {
+                  href: "https://docs.gearbox.finance/risk-and-security/audits-bug-bounty",
+                  text: "Audits",
+                  external: true
+                },
+                {
+                  href: "https://github.com/Gearbox-protocol",
+                  text: "GitHub",
+                  external: true
+                }
+              ]
             }
-          ]
-        }
-      )
-    ] })
-  ] }) });
+          )
+        ] }),
+        mobileStatusContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex md:hidden w-full", children: mobileStatusContent })
+      ] })
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Footer
+  Footer,
+  FooterLink,
+  FooterLinkSection,
+  GearboxFooter
 });

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

@@ -0,0 +1,217 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var grid_exports = {};
+__export(grid_exports, {
+  Grid: () => Grid
+});
+module.exports = __toCommonJS(grid_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_cn = require('../../utils/cn.js');
+const GRID_COLS_CLASSES = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  5: "grid-cols-5",
+  6: "grid-cols-6",
+  7: "grid-cols-7",
+  8: "grid-cols-8",
+  9: "grid-cols-9",
+  10: "grid-cols-10",
+  11: "grid-cols-11",
+  12: "grid-cols-12"
+};
+const GRID_COLS_SM_CLASSES = {
+  1: "sm:grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-3",
+  4: "sm:grid-cols-4",
+  5: "sm:grid-cols-5",
+  6: "sm:grid-cols-6",
+  7: "sm:grid-cols-7",
+  8: "sm:grid-cols-8",
+  9: "sm:grid-cols-9",
+  10: "sm:grid-cols-10",
+  11: "sm:grid-cols-11",
+  12: "sm:grid-cols-12"
+};
+const GRID_COLS_MD_CLASSES = {
+  1: "md:grid-cols-1",
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4",
+  5: "md:grid-cols-5",
+  6: "md:grid-cols-6",
+  7: "md:grid-cols-7",
+  8: "md:grid-cols-8",
+  9: "md:grid-cols-9",
+  10: "md:grid-cols-10",
+  11: "md:grid-cols-11",
+  12: "md:grid-cols-12"
+};
+const GRID_COLS_LG_CLASSES = {
+  1: "lg:grid-cols-1",
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4",
+  5: "lg:grid-cols-5",
+  6: "lg:grid-cols-6",
+  7: "lg:grid-cols-7",
+  8: "lg:grid-cols-8",
+  9: "lg:grid-cols-9",
+  10: "lg:grid-cols-10",
+  11: "lg:grid-cols-11",
+  12: "lg:grid-cols-12"
+};
+const GRID_COLS_XL_CLASSES = {
+  1: "xl:grid-cols-1",
+  2: "xl:grid-cols-2",
+  3: "xl:grid-cols-3",
+  4: "xl:grid-cols-4",
+  5: "xl:grid-cols-5",
+  6: "xl:grid-cols-6",
+  7: "xl:grid-cols-7",
+  8: "xl:grid-cols-8",
+  9: "xl:grid-cols-9",
+  10: "xl:grid-cols-10",
+  11: "xl:grid-cols-11",
+  12: "xl:grid-cols-12"
+};
+const GAP_CLASSES = {
+  0: "gap-0",
+  1: "gap-1",
+  2: "gap-2",
+  3: "gap-3",
+  4: "gap-4",
+  5: "gap-5",
+  6: "gap-6",
+  7: "gap-7",
+  8: "gap-8",
+  9: "gap-9",
+  10: "gap-10",
+  12: "gap-12",
+  16: "gap-16",
+  20: "gap-20",
+  24: "gap-24"
+};
+const GAP_X_CLASSES = {
+  0: "gap-x-0",
+  1: "gap-x-1",
+  2: "gap-x-2",
+  3: "gap-x-3",
+  4: "gap-x-4",
+  5: "gap-x-5",
+  6: "gap-x-6",
+  7: "gap-x-7",
+  8: "gap-x-8",
+  9: "gap-x-9",
+  10: "gap-x-10",
+  12: "gap-x-12",
+  16: "gap-x-16",
+  20: "gap-x-20",
+  24: "gap-x-24"
+};
+const GAP_Y_CLASSES = {
+  0: "gap-y-0",
+  1: "gap-y-1",
+  2: "gap-y-2",
+  3: "gap-y-3",
+  4: "gap-y-4",
+  5: "gap-y-5",
+  6: "gap-y-6",
+  7: "gap-y-7",
+  8: "gap-y-8",
+  9: "gap-y-9",
+  10: "gap-y-10",
+  12: "gap-y-12",
+  16: "gap-y-16",
+  20: "gap-y-20",
+  24: "gap-y-24"
+};
+const getGridColsClass = (cols, breakpoint) => {
+  if (!cols) return "";
+  if (typeof cols === "number") {
+    if (breakpoint === "sm") return GRID_COLS_SM_CLASSES[cols] || "";
+    if (breakpoint === "md") return GRID_COLS_MD_CLASSES[cols] || "";
+    if (breakpoint === "lg") return GRID_COLS_LG_CLASSES[cols] || "";
+    if (breakpoint === "xl") return GRID_COLS_XL_CLASSES[cols] || "";
+    return GRID_COLS_CLASSES[cols] || "";
+  }
+  return "";
+};
+const getGapClass = (gap, axis) => {
+  if (gap === void 0) return "";
+  if (axis === "x") return GAP_X_CLASSES[gap] || "";
+  if (axis === "y") return GAP_Y_CLASSES[gap] || "";
+  return GAP_CLASSES[gap] || "";
+};
+const Grid = import_react.default.forwardRef(
+  ({
+    cols = 12,
+    sm,
+    md,
+    lg,
+    xl,
+    gap = 4,
+    gapX,
+    gapY,
+    className,
+    style,
+    children,
+    ...props
+  }, ref) => {
+    const customStyle = typeof cols === "string" ? { ...style, gridTemplateColumns: cols } : style;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_cn.cn)(
+          "grid",
+          getGridColsClass(cols),
+          getGridColsClass(sm, "sm"),
+          getGridColsClass(md, "md"),
+          getGridColsClass(lg, "lg"),
+          getGridColsClass(xl, "xl"),
+          gapX !== void 0 ? getGapClass(gapX, "x") : getGapClass(gap),
+          gapY !== void 0 && getGapClass(gapY, "y"),
+          className
+        ),
+        style: customStyle,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Grid.displayName = "Grid";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Grid
+});

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

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var header_exports = {};
 __export(header_exports, {
@@ -22,19 +32,71 @@ __export(header_exports, {
 });
 module.exports = __toCommonJS(header_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_buttons = require('../buttons/index.js');
-var import_app_logo = require('./app-logo.js');
-function Header({
-  appName,
-  navigation,
-  connectKitButton
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("header", { className: "sticky top-0 z-50 border-b border-gray-800 bg-background px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_app_logo.AppLogo, { appName }),
-    navigation.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "hidden md:flex space-x-4", children: navigation.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_buttons.NavigationButton, { ...item }, item.href)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-4", children: connectKitButton })
-  ] }) });
-}
+var import_lucide_react = require("lucide-react");
+var import_react = __toESM(require("react"));
+var import_cn = require('../../utils/cn.js');
+const Header = import_react.default.forwardRef(
+  ({
+    navigation,
+    logo,
+    actions,
+    fixed = false,
+    sticky = false,
+    containerClassName,
+    className,
+    children,
+    mobileMenuContent,
+    ...props
+  }, ref) => {
+    const [mobileMenuOpen, setMobileMenuOpen] = import_react.default.useState(false);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "header",
+      {
+        ref,
+        className: (0, import_cn.cn)(
+          "relative w-full bg-background h-18 mb-6 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
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              className: (0, import_cn.cn)(
+                "w-full h-full flex items-stretch justify-between mx-auto px-4 max-w-[1440px]",
+                containerClassName
+              ),
+              children: [
+                logo && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center", children: logo }),
+                navigation && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hidden md:flex items-center", children: navigation }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  actions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hidden md:flex items-center gap-2", children: actions }),
+                  (navigation || mobileMenuContent) && /* @__PURE__ */ (0, import_jsx_runtime.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",
+                      onClick: () => setMobileMenuOpen(!mobileMenuOpen),
+                      "aria-label": mobileMenuOpen ? "Close menu" : "Open menu",
+                      children: mobileMenuOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "h-6 w-6" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Menu, { className: "h-6 w-6" })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          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 })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+Header.displayName = "Header";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Header

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

@@ -16,15 +16,23 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var layout_exports = {};
 module.exports = __toCommonJS(layout_exports);
 __reExport(layout_exports, require('./app-logo.js'), module.exports);
+__reExport(layout_exports, require('./col.js'), module.exports);
+__reExport(layout_exports, require('./container.js'), module.exports);
 __reExport(layout_exports, require('./footer.js'), module.exports);
+__reExport(layout_exports, require('./grid.js'), module.exports);
 __reExport(layout_exports, require('./header.js'), module.exports);
+__reExport(layout_exports, require('./layout.js'), module.exports);
 __reExport(layout_exports, require('./legal-disclaimer.js'), module.exports);
 __reExport(layout_exports, require('./page-layout.js'), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ...require('./app-logo.js'),
+  ...require('./col.js'),
+  ...require('./container.js'),
   ...require('./footer.js'),
+  ...require('./grid.js'),
   ...require('./header.js'),
+  ...require('./layout.js'),
   ...require('./legal-disclaimer.js'),
   ...require('./page-layout.js')
 });

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

@@ -0,0 +1,65 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var layout_exports = {};
+__export(layout_exports, {
+  Layout: () => Layout
+});
+module.exports = __toCommonJS(layout_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_cn = require('../../utils/cn.js');
+const Layout = import_react.default.forwardRef(
+  ({ header, footer, children, className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_cn.cn)("grid min-h-screen grid-rows-[auto_1fr_auto]", className),
+        style: {
+          gridTemplateAreas: `
+            "header"
+            "main"
+            "footer"
+          `
+        },
+        ...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 }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { gridArea: "footer" }, children: footer })
+        ]
+      }
+    );
+  }
+);
+Layout.displayName = "Layout";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Layout
+});