@gearbox-protocol/permissionless-ui 1.2.32 → 1.3.0

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

@@ -0,0 +1,158 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { cn } from "../../utils/cn.js";
+const COL_SPAN_CLASSES = {
+  1: "col-span-1",
+  2: "col-span-2",
+  3: "col-span-3",
+  4: "col-span-4",
+  5: "col-span-5",
+  6: "col-span-6",
+  7: "col-span-7",
+  8: "col-span-8",
+  9: "col-span-9",
+  10: "col-span-10",
+  11: "col-span-11",
+  12: "col-span-12",
+  full: "col-span-full",
+  auto: "col-auto"
+};
+const COL_SPAN_SM_CLASSES = {
+  1: "sm:col-span-1",
+  2: "sm:col-span-2",
+  3: "sm:col-span-3",
+  4: "sm:col-span-4",
+  5: "sm:col-span-5",
+  6: "sm:col-span-6",
+  7: "sm:col-span-7",
+  8: "sm:col-span-8",
+  9: "sm:col-span-9",
+  10: "sm:col-span-10",
+  11: "sm:col-span-11",
+  12: "sm:col-span-12",
+  full: "sm:col-span-full",
+  auto: "sm:col-auto"
+};
+const COL_SPAN_MD_CLASSES = {
+  1: "md:col-span-1",
+  2: "md:col-span-2",
+  3: "md:col-span-3",
+  4: "md:col-span-4",
+  5: "md:col-span-5",
+  6: "md:col-span-6",
+  7: "md:col-span-7",
+  8: "md:col-span-8",
+  9: "md:col-span-9",
+  10: "md:col-span-10",
+  11: "md:col-span-11",
+  12: "md:col-span-12",
+  full: "md:col-span-full",
+  auto: "md:col-auto"
+};
+const COL_SPAN_LG_CLASSES = {
+  1: "lg:col-span-1",
+  2: "lg:col-span-2",
+  3: "lg:col-span-3",
+  4: "lg:col-span-4",
+  5: "lg:col-span-5",
+  6: "lg:col-span-6",
+  7: "lg:col-span-7",
+  8: "lg:col-span-8",
+  9: "lg:col-span-9",
+  10: "lg:col-span-10",
+  11: "lg:col-span-11",
+  12: "lg:col-span-12",
+  full: "lg:col-span-full",
+  auto: "lg:col-auto"
+};
+const COL_SPAN_XL_CLASSES = {
+  1: "xl:col-span-1",
+  2: "xl:col-span-2",
+  3: "xl:col-span-3",
+  4: "xl:col-span-4",
+  5: "xl:col-span-5",
+  6: "xl:col-span-6",
+  7: "xl:col-span-7",
+  8: "xl:col-span-8",
+  9: "xl:col-span-9",
+  10: "xl:col-span-10",
+  11: "xl:col-span-11",
+  12: "xl:col-span-12",
+  full: "xl:col-span-full",
+  auto: "xl:col-auto"
+};
+const getColSpanClass = (span, breakpoint) => {
+  if (!span) return "";
+  if (breakpoint === "sm") return COL_SPAN_SM_CLASSES[span] || "";
+  if (breakpoint === "md") return COL_SPAN_MD_CLASSES[span] || "";
+  if (breakpoint === "lg") return COL_SPAN_LG_CLASSES[span] || "";
+  if (breakpoint === "xl") return COL_SPAN_XL_CLASSES[span] || "";
+  return COL_SPAN_CLASSES[span] || "";
+};
+const COL_START_CLASSES = {
+  1: "col-start-1",
+  2: "col-start-2",
+  3: "col-start-3",
+  4: "col-start-4",
+  5: "col-start-5",
+  6: "col-start-6",
+  7: "col-start-7",
+  8: "col-start-8",
+  9: "col-start-9",
+  10: "col-start-10",
+  11: "col-start-11",
+  12: "col-start-12",
+  13: "col-start-13",
+  auto: "col-start-auto"
+};
+const ORDER_CLASSES = {
+  1: "order-1",
+  2: "order-2",
+  3: "order-3",
+  4: "order-4",
+  5: "order-5",
+  6: "order-6",
+  7: "order-7",
+  8: "order-8",
+  9: "order-9",
+  10: "order-10",
+  11: "order-11",
+  12: "order-12",
+  first: "order-first",
+  last: "order-last",
+  none: "order-none"
+};
+const getColStartClass = (start) => {
+  if (!start) return "";
+  return COL_START_CLASSES[start] || "";
+};
+const getOrderClass = (order) => {
+  if (!order) return "";
+  return ORDER_CLASSES[order] || "";
+};
+const Col = React.forwardRef(
+  ({ span = 12, sm, md, lg, xl, start, order, className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          getColSpanClass(span),
+          getColSpanClass(sm, "sm"),
+          getColSpanClass(md, "md"),
+          getColSpanClass(lg, "lg"),
+          getColSpanClass(xl, "xl"),
+          getColStartClass(start),
+          getOrderClass(order),
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Col.displayName = "Col";
+export {
+  Col
+};

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

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { cn } from "../../utils/cn.js";
+const maxWidthClasses = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-screen-xl",
+  "2xl": "max-w-screen-2xl",
+  full: "max-w-full"
+};
+const Container = React.forwardRef(
+  ({
+    maxWidth = "xl",
+    padding = true,
+    center = true,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full",
+          maxWidthClasses[maxWidth],
+          center && "mx-auto",
+          padding && "px-4 sm:px-6 lg:px-8",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+export {
+  Container
+};

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

@@ -1,7 +1,73 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import { cn } from "../../utils/cn.js";
 import { AppLogo } from "./app-logo.js";
 import { LegalDisclaimer } from "./legal-disclaimer.js";
+const Footer = React.forwardRef(
+  ({
+    logo,
+    copyright,
+    social,
+    version,
+    secondaryInfo,
+    legalLinks,
+    containerClassName,
+    className,
+    children,
+    mobileExtraContent,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "footer",
+      {
+        ref,
+        className: cn(
+          "relative w-full border-t bg-card border-border mt-6 flex items-center justify-center",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: 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__ */ jsxs("div", { className: "text-center sm:text-left text-sm text-muted-foreground w-full sm:w-auto", children: [
+                logo && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex justify-center sm:justify-start", children: logo }),
+                  /* @__PURE__ */ jsx("div", { className: "h-2" })
+                ] }),
+                copyright && /* @__PURE__ */ jsx("div", { children: copyright }),
+                /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col items-center justify-center gap-2 sm:hidden", children: mobileExtraContent })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "w-full sm:w-auto", children: [
+                social && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center sm:justify-end gap-2.5", children: social }),
+                  /* @__PURE__ */ jsx("div", { className: "h-3" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center sm:justify-end gap-2 text-sm text-muted-foreground", children: [
+                  version && /* @__PURE__ */ jsx("span", { children: version }),
+                  secondaryInfo && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { className: "h-1 w-1 rounded-full bg-muted-foreground/30" }),
+                    secondaryInfo
+                  ] }),
+                  legalLinks && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ 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__ */ jsx(
     "a",
@@ -9,6 +75,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
     }
   );
@@ -18,69 +85,84 @@ function FooterLinkSection({
   links
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 md:items-end", children: [
-    /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground", children: title }),
+    /* @__PURE__ */ jsx("h3", { className: "text-foreground", children: title }),
     /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4", children: links.map((link, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
       /* @__PURE__ */ jsx(FooterLink, { ...link }),
       index < links.length - 1 && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: "\u2022" })
     ] }, link.href)) })
   ] });
 }
-function Footer({
+function GearboxFooter({
   appName,
-  legalReferences
+  legalReferences,
+  className,
+  mobileStatusContent
 }) {
-  return /* @__PURE__ */ jsx("footer", { className: "border-t border-gray-800 bg-background px-4 py-2 mt-auto", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 items-top", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 h-full justify-between", children: [
-      /* @__PURE__ */ jsx(AppLogo, { appName, size: "small" }),
-      /* @__PURE__ */ jsx(LegalDisclaimer, { hrefs: legalReferences })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 h-full justify-between", children: [
-      /* @__PURE__ */ 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__ */ jsx(
+    "footer",
+    {
+      className: cn(
+        "relative w-full border-t bg-card border-border mt-6 flex items-center justify-center",
+        className
       ),
-      /* @__PURE__ */ jsx(
-        FooterLinkSection,
-        {
-          title: "Developers",
-          links: [
-            {
-              href: "https://docs.gearbox.fi/gearbox-permissionless-doc",
-              text: "Documentation",
-              external: true
-            },
+      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: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 h-full justify-between", children: [
+          /* @__PURE__ */ jsx(AppLogo, { appName, size: "small" }),
+          /* @__PURE__ */ jsx(LegalDisclaimer, { hrefs: legalReferences })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 h-full justify-between", children: [
+          /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "flex md:hidden w-full", children: mobileStatusContent })
+      ] })
+    }
+  );
 }
 export {
-  Footer
+  Footer,
+  FooterLink,
+  FooterLinkSection,
+  GearboxFooter
 };

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

@@ -0,0 +1,183 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { cn } from "../../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 = React.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__ */ jsx(
+      "div",
+      {
+        ref,
+        className: 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";
+export {
+  Grid
+};

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

@@ -1,17 +1,69 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { NavigationButton } from "../buttons/index.js";
-import { AppLogo } from "./app-logo.js";
-function Header({
-  appName,
-  navigation,
-  connectKitButton
-}) {
-  return /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-50 border-b border-gray-800 bg-background px-4 py-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-    /* @__PURE__ */ jsx(AppLogo, { appName }),
-    navigation.length > 0 && /* @__PURE__ */ jsx("nav", { className: "hidden md:flex space-x-4", children: navigation.map((item) => /* @__PURE__ */ jsx(NavigationButton, { ...item }, item.href)) }),
-    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: connectKitButton })
-  ] }) });
-}
+import { Menu, X } from "lucide-react";
+import React from "react";
+import { cn } from "../../utils/cn.js";
+const Header = React.forwardRef(
+  ({
+    navigation,
+    logo,
+    actions,
+    fixed = false,
+    sticky = false,
+    containerClassName,
+    className,
+    children,
+    mobileMenuContent,
+    ...props
+  }, ref) => {
+    const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
+    return /* @__PURE__ */ jsxs(
+      "header",
+      {
+        ref,
+        className: 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__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "w-full h-full flex items-stretch justify-between mx-auto px-4 max-w-[1440px]",
+                containerClassName
+              ),
+              children: [
+                logo && /* @__PURE__ */ jsx("div", { className: "flex items-center", children: logo }),
+                navigation && /* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center", children: navigation }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  actions && /* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center gap-2", children: actions }),
+                  (navigation || mobileMenuContent) && /* @__PURE__ */ 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__ */ jsx(X, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx(Menu, { className: "h-6 w-6" })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          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 })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+Header.displayName = "Header";
 export {
   Header
 };

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

@@ -1,5 +1,9 @@
 export * from "./app-logo.js";
+export * from "./col.js";
+export * from "./container.js";
 export * from "./footer.js";
+export * from "./grid.js";
 export * from "./header.js";
+export * from "./layout.js";
 export * from "./legal-disclaimer.js";
 export * from "./page-layout.js";