@gardenfi/garden-book 0.2.3-beta.10 → 0.2.3-beta.11

package/dist/components/Footer/Footer.js

@@ -0,0 +1,395 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { cn } from "../../utils/utils.js";
+import { FooterBackgroundAnimation } from "./FooterBackgroundAnimation.js";
+import { FooterLinks } from "./FooterLink.js";
+import MaskURL from "../../assets/maskRect.svg.js";
+import { useClientOnly } from "../../hooks/useClientOnly.js";
+import { GardenIcon } from "../Logo/GardenIcon/GardenIcon.js";
+import { XIcon } from "../Icons/XIcon/XIcon.js";
+import { DiscordIcon } from "../Icons/DiscordIcon/DiscordIcon.js";
+import { Typography } from "../Typography/Typography.js";
+import { CopyrightsIcon } from "../Icons/CopyrightsIcon/CopyrightsIcon.js";
+const Footer = ({
+  className,
+  network = "mainnet",
+  maskUrl = MaskURL,
+  ...props
+}) => {
+  const [isLogoHovered, setIsLogoHovered] = useState(false);
+  const [hoveredRouteIndex, setHoveredRouteIndex] = useState(
+    null
+  );
+  const isClient = useClientOnly();
+  const hoverTimeoutRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+    };
+  }, []);
+  const appLink = network && network === "testnet" ? "https://testnet.garden.finance" : "https://app.garden.finance";
+  const homepage = "https://garden.finance";
+  const INTERNAL_ROUTES = {
+    Products: {
+      swap: {
+        title: "Swap",
+        link: network && network === "testnet" ? `${appLink}/?input-chain=bitcoin_testnet&input-asset=BTC` : `${appLink}/?input-chain=bitcoin&input-asset=BTC`,
+        isExternal: true
+      },
+      stake: {
+        title: "Stake",
+        link: network && network === "testnet" ? void 0 : `${appLink}/stake`,
+        isExternal: true
+      },
+      explorer: {
+        title: "Explorer",
+        link: network && network === "testnet" ? "https://testnet-explorer.garden.finance/" : "https://explorer.garden.finance/",
+        isExternal: true
+      }
+    },
+    Resources: {
+      blog: {
+        title: "Blog",
+        link: `${homepage}/blog`,
+        isExternal: true
+      },
+      faq: {
+        title: "FAQs",
+        link: `${homepage}/faq`,
+        isExternal: true
+      },
+      brandKit: {
+        title: "Brand kit",
+        link: `${homepage}/brand-kit`,
+        isExternal: true
+      },
+      analytics: {
+        title: "Analytics",
+        link: "https://dune.com/garden_finance/gardenfinance",
+        isExternal: true
+      },
+      Audits: {
+        title: "Audits",
+        link: "https://github.com/gardenfi/audits",
+        isExternal: true
+      }
+    },
+    Developers: {
+      docs: {
+        title: "Docs",
+        link: "https://docs.garden.finance/",
+        isExternal: true
+      },
+      api: {
+        title: "API",
+        link: "https://docs.garden.finance/developers/api/overview",
+        isExternal: true
+      },
+      sdk: {
+        title: "SDK",
+        link: "https://docs.garden.finance/developers/sdk/overview",
+        isExternal: true
+      }
+    }
+  };
+  const Routes = {
+    btcToSol: {
+      title: "BTC to SOL",
+      link: homepage + "/routes/bridge-btc-to-sol",
+      chain: "Solana",
+      isExternal: true
+    },
+    btcToEth: {
+      title: "BTC to ETH",
+      link: homepage + "/routes/bridge-btc-to-eth",
+      chain: "Ethereum",
+      isExternal: true
+    },
+    btcToUsdc: {
+      title: "BTC to USDC",
+      link: homepage + "/routes/bridge-btc-to-usdc-arbitrum",
+      chain: "Arbitrum",
+      isExternal: true
+    },
+    btctoUsdcEth: {
+      title: "BTC to USDC",
+      link: homepage + "/routes/bridge-btc-to-usdc-ethereum",
+      chain: "Ethereum",
+      isExternal: true
+    },
+    btcToWbtc: {
+      title: "BTC to WBTC",
+      link: homepage + "/routes/bridge-btc-to-wbtc-ethereum",
+      chain: "Ethereum",
+      isExternal: true
+    },
+    btcTocbBtc: {
+      title: "BTC to cbBtc",
+      link: homepage + "/routes/bridge-btc-to-cbbtc-base",
+      chain: "Base",
+      isExternal: true
+    },
+    btcToSui: {
+      title: "BTC to SUI",
+      link: homepage + "/routes/bridge-btc-to-sui",
+      chain: "Sui",
+      isExternal: true
+    },
+    btcToWbtcUni: {
+      title: "BTC to WBTC",
+      link: homepage + "/routes/bridge-btc-to-wbtc-unichain",
+      chain: "Unichain",
+      isExternal: true
+    },
+    btcToBnb: {
+      title: "BTC to BNB",
+      link: homepage + "/routes/bridge-btc-to-bnb",
+      chain: "BNB Chain",
+      isExternal: true
+    },
+    btcToMon: {
+      title: "BTC to MON",
+      link: homepage + "/routes/bridge-btc-to-mon",
+      chain: "Monad",
+      isExternal: true
+    },
+    cbBtcBaseTocbBtcSolana: {
+      title: " to cbBtc",
+      link: homepage + "/routes/bridge-cbbtc-base-to-cbbtc-solana",
+      inputAsset: "cbBtc",
+      inputChain: "Base",
+      chain: "Solana",
+      isExternal: true
+    },
+    usdcBnbToBtc: {
+      title: " to BTC",
+      link: homepage + "/routes/bridge-usdc-bnb-to-btc",
+      inputAsset: "USDC",
+      inputChain: "BNB Chain",
+      isExternal: true
+    },
+    btcToUsdtEthereum: {
+      title: " to USDT",
+      link: homepage + "/routes/bridge-btc-to-usdt-ethereum",
+      inputAsset: "BTC",
+      chain: "Ethereum",
+      isExternal: true
+    },
+    btcToUsdcSolana: {
+      title: " to USDC",
+      link: homepage + "/routes/bridge-btc-to-usdc-solana",
+      inputAsset: "BTC",
+      chain: "Solana",
+      isExternal: true
+    },
+    usdcEthereumToBtc: {
+      title: " to BTC",
+      link: homepage + "/routes/bridge-usdc-ethereum-to-btc",
+      inputAsset: "USDC",
+      inputChain: "Ethereum",
+      isExternal: true
+    },
+    solToBtc: {
+      title: " to BTC",
+      link: homepage + "/routes/bridge-sol-to-btc",
+      inputAsset: "SOL",
+      inputChain: "Solana",
+      isExternal: true
+    },
+    usdcEthereumToUsdcBase: {
+      title: " to USDC",
+      link: homepage + "/routes/bridge-usdc-ethereum-to-usdc-base",
+      inputAsset: "USDC",
+      inputChain: "Ethereum",
+      chain: "Base",
+      isExternal: true
+    }
+  };
+  const SOCIAL_LINKS = {
+    discord: "https://discord.gg/7feudTFMXB",
+    x: "https://x.com/gardenfi"
+  };
+  const { Products, Resources, Developers } = INTERNAL_ROUTES;
+  return /* @__PURE__ */ jsxs(
+    "footer",
+    {
+      className: cn(
+        "gf-z-10 gf-relative gf-mx-auto gf-flex gf-w-full gf-flex-col gf-items-center gf-justify-center gf-bg-white gf-px-6 gf-pb-10 gf-pt-20 md:gf-px-10",
+        className,
+        isLogoHovered ? "gf-text-white" : "gf-text-dark-grey"
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "gf-z-30 gf-w-full gf-max-w-screen-2xl", children: [
+          /* @__PURE__ */ jsxs("div", { className: "gf-mx-auto gf-flex gf-w-full gf-flex-col gf-items-start gf-justify-between gf-gap-8", children: [
+            /* @__PURE__ */ jsxs("div", { className: "gf-flex gf-w-full gf-items-center gf-justify-between gf-gap-6", children: [
+              /* @__PURE__ */ jsx(
+                GardenIcon,
+                {
+                  onMouseEnter: () => {
+                    if (hoverTimeoutRef.current) {
+                      clearTimeout(hoverTimeoutRef.current);
+                    }
+                    hoverTimeoutRef.current = setTimeout(() => {
+                      setIsLogoHovered(true);
+                    }, 300);
+                  },
+                  onMouseLeave: () => {
+                    if (hoverTimeoutRef.current) {
+                      clearTimeout(hoverTimeoutRef.current);
+                      hoverTimeoutRef.current = null;
+                    }
+                    setIsLogoHovered(false);
+                  },
+                  className: "gf-h-8 gf-w-8 gf-cursor-pointer gf-duration-500 gf-ease-in-out",
+                  onClick: (e) => e.preventDefault()
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "gf-flex gf-items-center gf-gap-4", children: [
+                /* @__PURE__ */ jsx(
+                  XIcon,
+                  {
+                    onClick: () => {
+                      if (isClient) {
+                        window.open(SOCIAL_LINKS.x, "_blank");
+                      }
+                    },
+                    className: "gf-cursor-pointer gf-duration-500 gf-ease-in-out"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  DiscordIcon,
+                  {
+                    onClick: () => {
+                      if (isClient) {
+                        window.open(SOCIAL_LINKS.discord, "_blank");
+                      }
+                    },
+                    className: "gf-cursor-pointer gf-duration-500 gf-ease-in-out"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "gf-flex gf-w-full gf-max-w-screen-2xl gf-flex-col-reverse gf-items-start gf-justify-between gf-gap-6 md:gf-flex-row", children: [
+              /* @__PURE__ */ jsxs("div", { className: "gf-flex gf-w-full gf-flex-col sm:gf-flex-row gf-gap-6 gf-items-start gf-justify-between sm:gf-gap-3 md:gf-w-fit", children: [
+                /* @__PURE__ */ jsx("div", { className: "gf-w-full md:gf-hidden", children: /* @__PURE__ */ jsx(
+                  FooterLinks,
+                  {
+                    title: "Resources",
+                    links: Resources,
+                    className: "gf-flex gf-w-full gf-flex-col gf-gap-3",
+                    listClassName: "gf-flex gf-flex-col gf-gap-2"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { className: "gf-flex gf-w-full gf-max-w-[400px] gf-flex-col gf-gap-3 md:gf-w-fit", children: /* @__PURE__ */ jsx(
+                  FooterLinks,
+                  {
+                    title: "Routes",
+                    links: Routes,
+                    hoveredIndex: hoveredRouteIndex,
+                    onHover: setHoveredRouteIndex,
+                    className: "gf-flex gf-w-full gf-max-w-[400px] gf-flex-col gf-gap-3 md:gf-w-fit",
+                    listClassName: "gf-grid gf-w-full gf-grid-cols-1 gf-gap-1 gf-gap-x-8 md:gf-grid-cols-2 md:gf-grid-rows-2",
+                    isRoutes: true
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "gf-flex gf-w-full gf-items-start gf-justify-between gf-gap-3 md:gf-w-fit md:gf-gap-16", children: [
+                /* @__PURE__ */ jsx(
+                  FooterLinks,
+                  {
+                    title: "Products",
+                    links: Products,
+                    className: "gf-flex gf-w-full gf-flex-col gf-gap-3 md:gf-w-fit",
+                    listClassName: "gf-flex gf-w-fit gf-flex-col gf-gap-1 gf-gap-x-6"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  FooterLinks,
+                  {
+                    title: "Developers",
+                    links: Developers,
+                    className: "gf-flex gf-w-full gf-flex-col gf-gap-3 md:gf-w-fit",
+                    listClassName: "gf-flex gf-flex-col gf-gap-1"
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "gf-hidden md:gf-flex", children: /* @__PURE__ */ jsx(
+                  FooterLinks,
+                  {
+                    title: "Resources",
+                    links: Resources,
+                    className: "gf-flex gf-w-full gf-flex-col gf-gap-3",
+                    listClassName: "gf-flex gf-flex-col gf-gap-1"
+                  }
+                ) })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "gf-relative gf-mt-6 gf-flex gf-w-full gf-max-w-screen-2xl gf-items-center gf-justify-center", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `gf-absolute gf-left-0 gf-top-0 gf-h-[1px] gf-w-full gf-transition-all gf-duration-500 gf-ease-in-out ${isLogoHovered ? "gf-bg-white" : "gf-bg-dark-grey"}`
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "gf-z-10 gf-my-6 gf-flex gf-w-full gf-items-center gf-justify-between gf-gap-4", children: [
+              /* @__PURE__ */ jsx("div", { className: "gf-flex gf-w-fit gf-items-center gf-justify-start gf-gap-6", children: /* @__PURE__ */ jsxs(
+                Typography,
+                {
+                  size: "h5",
+                  className: "gf-flex gf-items-center gf-gap-1 gf-transition-all gf-duration-500 gf-ease-in-out gf-text-inherit",
+                  weight: "regular",
+                  children: [
+                    /* @__PURE__ */ jsx(CopyrightsIcon, {}),
+                    /* @__PURE__ */ jsx("span", { children: "Garden" }),
+                    /* @__PURE__ */ jsx("span", { children: "2025" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: "gf-flex gf-w-fit gf-items-center gf-justify-end gf-gap-6", children: [
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    size: "h5",
+                    as: "a",
+                    className: "gf-cursor-pointer gf-underline-offset-2 gf-transition-all gf-duration-500 gf-ease-in-out gf-hover:underline gf-text-inherit",
+                    weight: "regular",
+                    href: "/privacy.pdf",
+                    target: "_blank",
+                    children: "Privacy Policy"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    as: "a",
+                    size: "h5",
+                    className: "gf-cursor-pointer gf-underline-offset-2 gf-transition-all gf-duration-500 gf-ease-in-out gf-hover:underline gf-text-inherit",
+                    weight: "regular",
+                    href: "/terms.pdf",
+                    target: "_blank",
+                    children: "Terms of Service"
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          FooterBackgroundAnimation,
+          {
+            isMobile: false,
+            isLogoHovered,
+            maskUrl
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Footer
+};
+//# sourceMappingURL=Footer.js.map

package/dist/components/Footer/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sources":["../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport { GardenIcon } from \"../Logo\";\nimport { CopyrightsIcon, DiscordIcon, Typography, XIcon } from \"../\";\nimport { cn } from \"../../utils/utils\";\nimport { FooterBackgroundAnimation } from \"./FooterBackgroundAnimation\";\nimport { FooterLinks } from \"./FooterLink\";\nimport MaskURL from \"../../assets/maskRect.svg\";\nimport { useClientOnly } from \"../../hooks/useClientOnly\";\n\ntype FooterProps = React.HTMLAttributes<HTMLDivElement> & {\n  network?: string;\n  navigate?: (path: string) => void;\n  maskUrl?: string;\n};\n\nenum Network {\n  MAINNET = \"mainnet\",\n  TESTNET = \"testnet\",\n}\n\nexport const Footer: React.FC<FooterProps> = ({\n  className,\n  network = \"mainnet\",\n  maskUrl = MaskURL,\n  ...props\n}) => {\n  const [isLogoHovered, setIsLogoHovered] = useState(false);\n  const [hoveredRouteIndex, setHoveredRouteIndex] = useState<number | null>(\n    null\n  );\n  const isClient = useClientOnly();\n  const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n  // Cleanup timeout on unmount\n  useEffect(() => {\n    return () => {\n      if (hoverTimeoutRef.current) {\n        clearTimeout(hoverTimeoutRef.current);\n      }\n    };\n  }, []);\n\n  const appLink =\n    network && network === Network.TESTNET\n      ? \"https://testnet.garden.finance\"\n      : \"https://app.garden.finance\";\n\n  const homepage = \"https://garden.finance\";\n\n  const INTERNAL_ROUTES = {\n    Products: {\n      swap: {\n        title: \"Swap\",\n        link:\n          network && network === Network.TESTNET\n            ? `${appLink}/?input-chain=bitcoin_testnet&input-asset=BTC`\n            : `${appLink}/?input-chain=bitcoin&input-asset=BTC`,\n        isExternal: true,\n      },\n      stake: {\n        title: \"Stake\",\n        link:\n          network && network === Network.TESTNET\n            ? undefined\n            : `${appLink}/stake`,\n        isExternal: true,\n      },\n      explorer: {\n        title: \"Explorer\",\n        link:\n          network && network === Network.TESTNET\n            ? \"https://testnet-explorer.garden.finance/\"\n            : \"https://explorer.garden.finance/\",\n        isExternal: true,\n      },\n    },\n    Resources: {\n      blog: {\n        title: \"Blog\",\n        link: `${homepage}/blog`,\n        isExternal: true,\n      },\n      faq: {\n        title: \"FAQs\",\n        link: `${homepage}/faq`,\n        isExternal: true,\n      },\n      brandKit: {\n        title: \"Brand kit\",\n        link: `${homepage}/brand-kit`,\n        isExternal: true,\n      },\n      analytics: {\n        title: \"Analytics\",\n        link: \"https://dune.com/garden_finance/gardenfinance\",\n        isExternal: true,\n      },\n      Audits: {\n        title: \"Audits\",\n        link: \"https://github.com/gardenfi/audits\",\n        isExternal: true,\n      },\n    },\n    Developers: {\n      docs: {\n        title: \"Docs\",\n        link: \"https://docs.garden.finance/\",\n        isExternal: true,\n      },\n      api: {\n        title: \"API\",\n        link: \"https://docs.garden.finance/developers/api/overview\",\n        isExternal: true,\n      },\n      sdk: {\n        title: \"SDK\",\n        link: \"https://docs.garden.finance/developers/sdk/overview\",\n        isExternal: true,\n      },\n    },\n  };\n\n  const Routes = {\n    btcToSol: {\n      title: \"BTC to SOL\",\n      link: homepage + \"/routes/bridge-btc-to-sol\",\n      chain: \"Solana\",\n      isExternal: true,\n    },\n    btcToEth: {\n      title: \"BTC to ETH\",\n      link: homepage + \"/routes/bridge-btc-to-eth\",\n      chain: \"Ethereum\",\n      isExternal: true,\n    },\n    btcToUsdc: {\n      title: \"BTC to USDC\",\n      link: homepage + \"/routes/bridge-btc-to-usdc-arbitrum\",\n      chain: \"Arbitrum\",\n      isExternal: true,\n    },\n    btctoUsdcEth: {\n      title: \"BTC to USDC\",\n      link: homepage + \"/routes/bridge-btc-to-usdc-ethereum\",\n      chain: \"Ethereum\",\n      isExternal: true,\n    },\n    btcToWbtc: {\n      title: \"BTC to WBTC\",\n      link: homepage + \"/routes/bridge-btc-to-wbtc-ethereum\",\n      chain: \"Ethereum\",\n      isExternal: true,\n    },\n    btcTocbBtc: {\n      title: \"BTC to cbBtc\",\n      link: homepage + \"/routes/bridge-btc-to-cbbtc-base\",\n      chain: \"Base\",\n      isExternal: true,\n    },\n    btcToSui: {\n      title: \"BTC to SUI\",\n      link: homepage + \"/routes/bridge-btc-to-sui\",\n      chain: \"Sui\",\n      isExternal: true,\n    },\n    btcToWbtcUni: {\n      title: \"BTC to WBTC\",\n      link: homepage + \"/routes/bridge-btc-to-wbtc-unichain\",\n      chain: \"Unichain\",\n      isExternal: true,\n    },\n    btcToBnb: {\n      title: \"BTC to BNB\",\n      link: homepage + \"/routes/bridge-btc-to-bnb\",\n      chain: \"BNB Chain\",\n      isExternal: true,\n    },\n    btcToMon:{\n      title: \"BTC to MON\",\n      link: homepage + \"/routes/bridge-btc-to-mon\",\n      chain: \"Monad\",\n      isExternal: true,\n    },\n    cbBtcBaseTocbBtcSolana: {\n      title: \" to cbBtc\",\n      link: homepage + \"/routes/bridge-cbbtc-base-to-cbbtc-solana\",\n      inputAsset: \"cbBtc\",\n      inputChain: \"Base\",\n      chain: \"Solana\",\n      isExternal: true,\n    },\n    usdcBnbToBtc: {\n      title: \" to BTC\",\n      link: homepage + \"/routes/bridge-usdc-bnb-to-btc\",\n      inputAsset: \"USDC\",\n      inputChain: \"BNB Chain\",\n      isExternal: true,\n    },\n    btcToUsdtEthereum: {\n      title: \" to USDT\",\n      link: homepage + \"/routes/bridge-btc-to-usdt-ethereum\",\n      inputAsset: \"BTC\",\n      chain: \"Ethereum\",\n      isExternal: true,\n    },\n    btcToUsdcSolana: {\n      title: \" to USDC\",\n      link: homepage + \"/routes/bridge-btc-to-usdc-solana\",\n      inputAsset: \"BTC\",\n      chain: \"Solana\",\n      isExternal: true,\n    },\n    usdcEthereumToBtc: {\n      title: \" to BTC\",\n      link: homepage + \"/routes/bridge-usdc-ethereum-to-btc\",\n      inputAsset: \"USDC\",\n      inputChain: \"Ethereum\",\n      isExternal: true,\n    },\n    solToBtc: {\n      title: \" to BTC\",\n      link: homepage + \"/routes/bridge-sol-to-btc\",\n      inputAsset: \"SOL\",\n      inputChain: \"Solana\",\n      isExternal: true,\n    },\n    usdcEthereumToUsdcBase: {\n      title: \" to USDC\",\n      link: homepage + \"/routes/bridge-usdc-ethereum-to-usdc-base\",\n      inputAsset: \"USDC\",\n      inputChain: \"Ethereum\",\n      chain: \"Base\",\n      isExternal: true,\n    },\n  };\n\n  const SOCIAL_LINKS = {\n    discord: \"https://discord.gg/7feudTFMXB\",\n    x: \"https://x.com/gardenfi\",\n  };\n\n  const { Products, Resources, Developers } = INTERNAL_ROUTES;\n\n  return (\n    <footer\n      className={cn(\n        \"gf-z-10 gf-relative gf-mx-auto gf-flex gf-w-full gf-flex-col gf-items-center gf-justify-center gf-bg-white gf-px-6 gf-pb-10 gf-pt-20 md:gf-px-10\",\n        className,\n        isLogoHovered ? \"gf-text-white\" : \"gf-text-dark-grey\"\n      )}\n      {...props}\n    >\n      <div className=\"gf-z-30 gf-w-full gf-max-w-screen-2xl\">\n        <div className=\"gf-mx-auto gf-flex gf-w-full gf-flex-col gf-items-start gf-justify-between gf-gap-8\">\n          <div className=\"gf-flex gf-w-full gf-items-center gf-justify-between gf-gap-6\">\n            <GardenIcon\n              onMouseEnter={() => {\n                if (hoverTimeoutRef.current) {\n                  clearTimeout(hoverTimeoutRef.current);\n                }\n                hoverTimeoutRef.current = setTimeout(() => {\n                  setIsLogoHovered(true);\n                }, 300);\n              }}\n              onMouseLeave={() => {\n                if (hoverTimeoutRef.current) {\n                  clearTimeout(hoverTimeoutRef.current);\n                  hoverTimeoutRef.current = null;\n                }\n                setIsLogoHovered(false);\n              }}\n              className=\"gf-h-8 gf-w-8 gf-cursor-pointer gf-duration-500 gf-ease-in-out\"\n              onClick={(e) => e.preventDefault()}\n            />\n            <div className=\"gf-flex gf-items-center gf-gap-4\">\n              <XIcon\n                onClick={() => {\n                  if (isClient) {\n                    window.open(SOCIAL_LINKS.x, \"_blank\");\n                  }\n                }}\n                className=\"gf-cursor-pointer gf-duration-500 gf-ease-in-out\"\n              />\n              <DiscordIcon\n                onClick={() => {\n                  if (isClient) {\n                    window.open(SOCIAL_LINKS.discord, \"_blank\");\n                  }\n                }}\n                className=\"gf-cursor-pointer gf-duration-500 gf-ease-in-out\"\n              />\n            </div>\n          </div>\n          <div className=\"gf-flex gf-w-full gf-max-w-screen-2xl gf-flex-col-reverse gf-items-start gf-justify-between gf-gap-6 md:gf-flex-row\">\n            <div className=\"gf-flex gf-w-full gf-flex-col sm:gf-flex-row gf-gap-6 gf-items-start gf-justify-between sm:gf-gap-3 md:gf-w-fit\">\n              <div className=\"gf-w-full md:gf-hidden\">\n                <FooterLinks\n                  title=\"Resources\"\n                  links={Resources}\n                  className=\"gf-flex gf-w-full gf-flex-col gf-gap-3\"\n                  listClassName=\"gf-flex gf-flex-col gf-gap-2\"\n                />\n              </div>\n              <div className=\"gf-flex gf-w-full gf-max-w-[400px] gf-flex-col gf-gap-3 md:gf-w-fit\">\n                <FooterLinks\n                  title=\"Routes\"\n                  links={Routes}\n                  hoveredIndex={hoveredRouteIndex}\n                  onHover={setHoveredRouteIndex}\n                  className=\"gf-flex gf-w-full gf-max-w-[400px] gf-flex-col gf-gap-3 md:gf-w-fit\"\n                  listClassName=\"gf-grid gf-w-full gf-grid-cols-1 gf-gap-1 gf-gap-x-8 md:gf-grid-cols-2 md:gf-grid-rows-2\"\n                  isRoutes={true}\n                />\n              </div>\n            </div>\n            <div className=\"gf-flex gf-w-full gf-items-start gf-justify-between gf-gap-3 md:gf-w-fit md:gf-gap-16\">\n              <FooterLinks\n                title=\"Products\"\n                links={Products}\n                className=\"gf-flex gf-w-full gf-flex-col gf-gap-3 md:gf-w-fit\"\n                listClassName=\"gf-flex gf-w-fit gf-flex-col gf-gap-1 gf-gap-x-6\"\n              />\n              <FooterLinks\n                title=\"Developers\"\n                links={Developers}\n                className=\"gf-flex gf-w-full gf-flex-col gf-gap-3 md:gf-w-fit\"\n                listClassName=\"gf-flex gf-flex-col gf-gap-1\"\n              />\n              <div className=\"gf-hidden md:gf-flex\">\n                <FooterLinks\n                  title=\"Resources\"\n                  links={Resources}\n                  className=\"gf-flex gf-w-full gf-flex-col gf-gap-3\"\n                  listClassName=\"gf-flex gf-flex-col gf-gap-1\"\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n        <div className=\"gf-relative gf-mt-6 gf-flex gf-w-full gf-max-w-screen-2xl gf-items-center gf-justify-center\">\n          <div\n            className={`gf-absolute gf-left-0 gf-top-0 gf-h-[1px] gf-w-full gf-transition-all gf-duration-500 gf-ease-in-out ${\n              isLogoHovered ? \"gf-bg-white\" : \"gf-bg-dark-grey\"\n            }`}\n          />\n          <div className=\"gf-z-10 gf-my-6 gf-flex gf-w-full gf-items-center gf-justify-between gf-gap-4\">\n            <div className=\"gf-flex gf-w-fit gf-items-center gf-justify-start gf-gap-6\">\n              <Typography\n                size=\"h5\"\n                className=\"gf-flex gf-items-center gf-gap-1 gf-transition-all gf-duration-500 gf-ease-in-out gf-text-inherit\"\n                weight=\"regular\"\n              >\n                <CopyrightsIcon />\n                <span>Garden</span>\n                <span>2025</span>\n              </Typography>\n            </div>\n            <div className=\"gf-flex gf-w-fit gf-items-center gf-justify-end gf-gap-6\">\n              <Typography\n                size=\"h5\"\n                as=\"a\"\n                className=\"gf-cursor-pointer gf-underline-offset-2 gf-transition-all gf-duration-500 gf-ease-in-out gf-hover:underline gf-text-inherit\"\n                weight=\"regular\"\n                href=\"/privacy.pdf\"\n                target=\"_blank\"\n              >\n                Privacy Policy\n              </Typography>\n\n              <Typography\n                as=\"a\"\n                size=\"h5\"\n                className=\"gf-cursor-pointer gf-underline-offset-2 gf-transition-all gf-duration-500 gf-ease-in-out gf-hover:underline gf-text-inherit\"\n                weight=\"regular\"\n                href=\"/terms.pdf\"\n                target=\"_blank\"\n              >\n                Terms of Service\n              </Typography>\n            </div>\n          </div>\n        </div>\n      </div>\n      <FooterBackgroundAnimation\n        isMobile={false}\n        isLogoHovered={isLogoHovered}\n        maskUrl={maskUrl}\n      />\n    </footer>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Footer/FooterBackgroundAnimation.js

@@ -0,0 +1,111 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useMotionValue, useTransform, AnimatePresence, motion } from "framer-motion";
+import { useState, useRef, useEffect } from "react";
+const FooterBackgroundAnimation = ({
+  isMobile,
+  isLogoHovered,
+  maskUrl
+}) => {
+  const [videoSrc] = useState(
+    "https://garden-bucket-cdn.s3.eu-central-1.amazonaws.com/flowers_bg.mp4"
+  );
+  const [animationState, setAnimationState] = useState("initial");
+  const videoRef = useRef(null);
+  const animatedVideoRef = useRef(null);
+  const maskX = useMotionValue(45);
+  const maskPos = useTransform(maskX, (x) => `${x}% center`);
+  useEffect(() => {
+    if (isLogoHovered) {
+      setAnimationState("visible");
+    } else {
+      setAnimationState("exit");
+      const timer = setTimeout(() => {
+        setAnimationState("initial");
+      }, 800);
+      return () => clearTimeout(timer);
+    }
+  }, [isLogoHovered]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "video",
+      {
+        ref: videoRef,
+        src: videoSrc,
+        autoPlay: true,
+        loop: true,
+        muted: true,
+        controls: false,
+        preload: "metadata",
+        playsInline: true,
+        className: "gf-pointer-events-none gf-absolute gf-left-0 gf-top-0 gf-z-0 gf-h-full gf-w-screen gf-object-cover gf-opacity-0"
+      },
+      "video-flowers"
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        animate: animationState,
+        variants: {
+          initial: { maskPosition: "45%", opacity: 0 },
+          visible: { maskPosition: "10%", opacity: 1 },
+          exit: {
+            maskPosition: "-60%",
+            opacity: 0,
+            transition: {
+              duration: 1.2,
+              ease: [0, 0.77, 0.3, 1],
+              opacity: {
+                delay: 0.4
+              }
+            }
+          }
+        },
+        transition: {
+          duration: 1,
+          ease: [0.22, 0.68, 0.88, 0.96],
+          delay: 0.15,
+          opacity: {
+            times: [0, 1, 1, 1]
+          }
+        },
+        style: {
+          maskImage: `linear-gradient(black, black), url('${maskUrl}')`,
+          maskComposite: "exclude",
+          maskSize: isMobile ? "1200% 200%" : "820% 600%",
+          maskPosition: maskPos
+        },
+        className: "gf-pointer-events-none gf-absolute gf-left-0 gf-top-0 gf-z-0 gf-h-full gf-w-full gf-overflow-hidden gf-opacity-0",
+        children: /* @__PURE__ */ jsx(
+          "video",
+          {
+            ref: animatedVideoRef,
+            src: videoSrc,
+            autoPlay: true,
+            loop: true,
+            muted: true,
+            controls: false,
+            preload: "metadata",
+            playsInline: true,
+            className: "gf-pointer-events-none gf-h-full gf-w-screen gf-object-cover",
+            onCanPlayThrough: () => {
+              if (animatedVideoRef.current) {
+                animatedVideoRef.current.play().catch(console.error);
+              }
+            },
+            onLoadStart: () => {
+              if (animatedVideoRef.current) {
+                animatedVideoRef.current.play().catch(console.error);
+              }
+            }
+          },
+          "video-flowers-animated"
+        )
+      },
+      "hovered"
+    ) })
+  ] });
+};
+export {
+  FooterBackgroundAnimation
+};
+//# sourceMappingURL=FooterBackgroundAnimation.js.map

package/dist/components/Footer/FooterBackgroundAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterBackgroundAnimation.js","sources":["../../../src/components/Footer/FooterBackgroundAnimation.tsx"],"sourcesContent":["import {\n  AnimatePresence,\n  motion,\n  useMotionValue,\n  useTransform,\n} from \"framer-motion\";\nimport { useEffect, useRef, useState } from \"react\";\n\ntype FooterBackgroundAnimationProps = {\n  isMobile: boolean;\n  isLogoHovered: boolean;\n  maskUrl?: string;\n};\n\ntype AnimationState = \"initial\" | \"visible\" | \"exit\";\n\nexport const FooterBackgroundAnimation = ({\n  isMobile,\n  isLogoHovered,\n  maskUrl,\n}: FooterBackgroundAnimationProps) => {\n  const [videoSrc] = useState(\n    \"https://garden-bucket-cdn.s3.eu-central-1.amazonaws.com/flowers_bg.mp4\"\n  );\n\n  const [animationState, setAnimationState] =\n    useState<AnimationState>(\"initial\");\n\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const animatedVideoRef = useRef<HTMLVideoElement>(null);\n\n  const maskX = useMotionValue(45);\n  const maskPos = useTransform(maskX, (x) => `${x}% center`);\n\n  useEffect(() => {\n    if (isLogoHovered) {\n      setAnimationState(\"visible\");\n    } else {\n      setAnimationState(\"exit\");\n      const timer = setTimeout(() => {\n        setAnimationState(\"initial\");\n      }, 800);\n\n      return () => clearTimeout(timer);\n    }\n  }, [isLogoHovered]);\n\n  return (\n    <>\n      {/* Hidden video that loads immediately on page load */}\n      <video\n        key=\"video-flowers\"\n        ref={videoRef}\n        src={videoSrc}\n        autoPlay\n        loop\n        muted\n        controls={false}\n        preload=\"metadata\"\n        playsInline\n        className=\"gf-pointer-events-none gf-absolute gf-left-0 gf-top-0 gf-z-0 gf-h-full gf-w-screen gf-object-cover gf-opacity-0\"\n      />\n      <AnimatePresence mode=\"wait\">\n        <motion.div\n          key=\"hovered\"\n          animate={animationState}\n          variants={{\n            initial: { maskPosition: \"45%\", opacity: 0 },\n            visible: { maskPosition: \"10%\", opacity: 1 },\n            exit: {\n              maskPosition: \"-60%\",\n              opacity: 0,\n              transition: {\n                duration: 1.2,\n                ease: [0, 0.77, 0.3, 1],\n                opacity: {\n                  delay: 0.4,\n                },\n              },\n            },\n          }}\n          transition={{\n            duration: 1,\n            ease: [0.22, 0.68, 0.88, 0.96],\n            delay: 0.15,\n            opacity: {\n              times: [0, 1, 1, 1],\n            },\n          }}\n          style={{\n            maskImage: `linear-gradient(black, black), url('${maskUrl}')`,\n            maskComposite: \"exclude\",\n            maskSize: isMobile ? \"1200% 200%\" : \"820% 600%\",\n            maskPosition: maskPos,\n          }}\n          className=\"gf-pointer-events-none gf-absolute gf-left-0 gf-top-0 gf-z-0 gf-h-full gf-w-full gf-overflow-hidden gf-opacity-0\"\n        >\n          <video\n            key=\"video-flowers-animated\"\n            ref={animatedVideoRef}\n            src={videoSrc}\n            autoPlay\n            loop\n            muted\n            controls={false}\n            preload=\"metadata\"\n            playsInline\n            className=\"gf-pointer-events-none gf-h-full gf-w-screen gf-object-cover\"\n            onCanPlayThrough={() => {\n              if (animatedVideoRef.current) {\n                animatedVideoRef.current.play().catch(console.error);\n              }\n            }}\n            onLoadStart={() => {\n              if (animatedVideoRef.current) {\n                animatedVideoRef.current.play().catch(console.error);\n              }\n            }}\n          />\n        </motion.div>\n      </AnimatePresence>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;AAgBO,MAAM,4BAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AACF,MAAsC;AACpC,QAAM,CAAC,QAAQ,IAAI;AAAA,IACjB;AAAA,EAAA;AAGF,QAAM,CAAC,gBAAgB,iBAAiB,IACtC,SAAyB,SAAS;AAEpC,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,mBAAmB,OAAyB,IAAI;AAEtD,QAAM,QAAQ,eAAe,EAAE;AAC/B,QAAM,UAAU,aAAa,OAAO,CAAC,MAAM,GAAG,CAAC,UAAU;AAEzD,YAAU,MAAM;AACd,QAAI,eAAe;AACjB,wBAAkB,SAAS;AAAA,IAC7B,OAAO;AACL,wBAAkB,MAAM;AACxB,YAAM,QAAQ,WAAW,MAAM;AAC7B,0BAAkB,SAAS;AAAA,MAC7B,GAAG,GAAG;AAEN,aAAO,MAAM,aAAa,KAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,aAAa,CAAC;AAElB,SACE,qBAAA,UAAA,EAEE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,KAAK;AAAA,QACL,KAAK;AAAA,QACL,UAAQ;AAAA,QACR,MAAI;AAAA,QACJ,OAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAQ;AAAA,QACR,aAAW;AAAA,QACX,WAAU;AAAA,MAAA;AAAA,MATN;AAAA,IAAA;AAAA,IAWN,oBAAC,iBAAA,EAAgB,MAAK,QACpB,UAAA;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QAEC,SAAS;AAAA,QACT,UAAU;AAAA,UACR,SAAS,EAAE,cAAc,OAAO,SAAS,EAAA;AAAA,UACzC,SAAS,EAAE,cAAc,OAAO,SAAS,EAAA;AAAA,UACzC,MAAM;AAAA,YACJ,cAAc;AAAA,YACd,SAAS;AAAA,YACT,YAAY;AAAA,cACV,UAAU;AAAA,cACV,MAAM,CAAC,GAAG,MAAM,KAAK,CAAC;AAAA,cACtB,SAAS;AAAA,gBACP,OAAO;AAAA,cAAA;AAAA,YACT;AAAA,UACF;AAAA,QACF;AAAA,QAEF,YAAY;AAAA,UACV,UAAU;AAAA,UACV,MAAM,CAAC,MAAM,MAAM,MAAM,IAAI;AAAA,UAC7B,OAAO;AAAA,UACP,SAAS;AAAA,YACP,OAAO,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,UAAA;AAAA,QACpB;AAAA,QAEF,OAAO;AAAA,UACL,WAAW,uCAAuC,OAAO;AAAA,UACzD,eAAe;AAAA,UACf,UAAU,WAAW,eAAe;AAAA,UACpC,cAAc;AAAA,QAAA;AAAA,QAEhB,WAAU;AAAA,QAEV,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,KAAK;AAAA,YACL,KAAK;AAAA,YACL,UAAQ;AAAA,YACR,MAAI;AAAA,YACJ,OAAK;AAAA,YACL,UAAU;AAAA,YACV,SAAQ;AAAA,YACR,aAAW;AAAA,YACX,WAAU;AAAA,YACV,kBAAkB,MAAM;AACtB,kBAAI,iBAAiB,SAAS;AAC5B,iCAAiB,QAAQ,KAAA,EAAO,MAAM,QAAQ,KAAK;AAAA,cACrD;AAAA,YACF;AAAA,YACA,aAAa,MAAM;AACjB,kBAAI,iBAAiB,SAAS;AAC5B,iCAAiB,QAAQ,KAAA,EAAO,MAAM,QAAQ,KAAK;AAAA,cACrD;AAAA,YACF;AAAA,UAAA;AAAA,UAnBI;AAAA,QAAA;AAAA,MAoBN;AAAA,MAtDI;AAAA,IAAA,EAuDN,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/Footer/FooterLink.js

@@ -0,0 +1,89 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { RollingText } from "../../animations/RollingText/RollingText.js";
+import { Typography } from "../Typography/Typography.js";
+const FooterLinks = ({
+  title,
+  links,
+  hoveredIndex,
+  onHover,
+  className = "gf-flex gf-w-full gf-flex-col gf-gap-3 md:gf-w-fit",
+  listClassName = "gf-flex gf-flex-col gf-gap-1",
+  isRoutes = false
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        size: "h4",
+        weight: "medium",
+        className: "gf-flex gf-items-center gf-gap-2 gf-transition-all gf-duration-500 gf-ease-in-out gf-text-inherit",
+        children: /* @__PURE__ */ jsx("span", { children: title })
+      }
+    ),
+    /* @__PURE__ */ jsx("ul", { className: listClassName, children: Object.values(links).map(
+      (link, index) => link.link && /* @__PURE__ */ jsx(
+        "li",
+        {
+          className: isRoutes ? "gf-w-fit" : "",
+          onMouseEnter: () => {
+            onHover == null ? void 0 : onHover(index);
+          },
+          onMouseLeave: () => {
+            onHover == null ? void 0 : onHover(null);
+          },
+          children: /* @__PURE__ */ jsxs(
+            Typography,
+            {
+              as: "a",
+              href: link.link,
+              target: "_blank",
+              size: "h4",
+              weight: "regular",
+              className: `gf-cursor-pointer gf-transition-all gf-duration-500 gf-ease-in-out gf-text-inherit ${isRoutes ? "gf-flex gf-w-fit gf-gap-0.5 gf-items-end gf-transition-colors gf-duration-500 gf-ease-in-out" : ""}`,
+              children: [
+                link.inputAsset && /* @__PURE__ */ jsx(
+                  RollingText,
+                  {
+                    value: link.inputAsset || "",
+                    isHovered: hoveredIndex === index
+                  }
+                ),
+                isRoutes && link.inputChain && /* @__PURE__ */ jsx(
+                  RollingText,
+                  {
+                    delay: 0.1,
+                    className: "gf-text-xs gf-italic gf-translate-y-[0.6px]",
+                    value: link.inputChain,
+                    isHovered: hoveredIndex === index
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  RollingText,
+                  {
+                    delay: 0.15,
+                    value: link.title,
+                    isHovered: hoveredIndex === index
+                  }
+                ),
+                isRoutes && link.chain && /* @__PURE__ */ jsx(
+                  RollingText,
+                  {
+                    delay: 0.3,
+                    className: "gf-text-xs gf-italic gf-translate-y-[0.6px] -gf-translate-x-[2px]",
+                    value: link.chain,
+                    isHovered: hoveredIndex === index
+                  }
+                )
+              ]
+            }
+          )
+        },
+        index
+      )
+    ) })
+  ] });
+};
+export {
+  FooterLinks
+};
+//# sourceMappingURL=FooterLink.js.map

package/dist/components/Footer/FooterLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterLink.js","sources":["../../../src/components/Footer/FooterLink.tsx"],"sourcesContent":["import { RollingText } from \"../../animations\";\nimport { Typography } from \"../\";\n\ntype FooterLink = {\n  title: string;\n  link: string | undefined;\n  isExternal: boolean;\n  chain?: string;\n  inputAsset?: string;\n  inputChain?: string;\n};\n\ntype FooterLinksProps = {\n  title: string;\n  links: Record<string, FooterLink>;\n  hoveredIndex?: number | null;\n  onHover?: (index: number | null) => void;\n  className?: string;\n  listClassName?: string;\n  isRoutes?: boolean;\n};\n\nexport const FooterLinks: React.FC<FooterLinksProps> = ({\n  title,\n  links,\n  hoveredIndex,\n  onHover,\n  className = \"gf-flex gf-w-full gf-flex-col gf-gap-3 md:gf-w-fit\",\n  listClassName = \"gf-flex gf-flex-col gf-gap-1\",\n  isRoutes = false,\n}) => {\n  return (\n    <div className={className}>\n      <Typography\n        size=\"h4\"\n        weight=\"medium\"\n        className=\"gf-flex gf-items-center gf-gap-2 gf-transition-all gf-duration-500 gf-ease-in-out gf-text-inherit\"\n      >\n        <span>{title}</span>\n      </Typography>\n      <ul className={listClassName}>\n        {Object.values(links).map(\n          (link, index) =>\n            link.link && (\n              <li\n                key={index}\n                className={isRoutes ? \"gf-w-fit\" : \"\"}\n                onMouseEnter={() => {\n                  onHover?.(index);\n                }}\n                onMouseLeave={() => {\n                  onHover?.(null);\n                }}\n              >\n                <Typography\n                  as=\"a\"\n                  href={link.link}\n                  target=\"_blank\"\n                  size=\"h4\"\n                  weight=\"regular\"\n                  className={`gf-cursor-pointer gf-transition-all gf-duration-500 gf-ease-in-out gf-text-inherit ${\n                    isRoutes\n                      ? \"gf-flex gf-w-fit gf-gap-0.5 gf-items-end gf-transition-colors gf-duration-500 gf-ease-in-out\"\n                      : \"\"\n                  }`}\n                >\n                  {link.inputAsset && (\n                    <RollingText\n                      value={link.inputAsset || \"\"}\n                      isHovered={hoveredIndex === index}\n                    />\n                  )}\n                  {isRoutes && link.inputChain && (\n                    <RollingText\n                      delay={0.1}\n                      className=\"gf-text-xs gf-italic gf-translate-y-[0.6px]\"\n                      value={link.inputChain}\n                      isHovered={hoveredIndex === index}\n                    />\n                  )}\n                  <RollingText\n                    delay={0.15}\n                    value={link.title}\n                    isHovered={hoveredIndex === index}\n                  />\n                  {isRoutes && link.chain && (\n                    <RollingText\n                      delay={0.3}\n                      className=\"gf-text-xs gf-italic gf-translate-y-[0.6px] -gf-translate-x-[2px]\"\n                      value={link.chain}\n                      isHovered={hoveredIndex === index}\n                    />\n                  )}\n                </Typography>\n              </li>\n            )\n        )}\n      </ul>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;AAsBO,MAAM,cAA0C,CAAC;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,WAAW;AACb,MAAM;AACJ,SACE,qBAAC,SAAI,WACH,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,QAAO;AAAA,QACP,WAAU;AAAA,QAEV,UAAA,oBAAC,UAAM,UAAA,MAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,wBAEd,MAAA,EAAG,WAAW,eACZ,UAAA,OAAO,OAAO,KAAK,EAAE;AAAA,MACpB,CAAC,MAAM,UACL,KAAK,QACH;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAW,WAAW,aAAa;AAAA,UACnC,cAAc,MAAM;AAClB,+CAAU;AAAA,UACZ;AAAA,UACA,cAAc,MAAM;AAClB,+CAAU;AAAA,UACZ;AAAA,UAEA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAG;AAAA,cACH,MAAM,KAAK;AAAA,cACX,QAAO;AAAA,cACP,MAAK;AAAA,cACL,QAAO;AAAA,cACP,WAAW,sFACT,WACI,iGACA,EACN;AAAA,cAEC,UAAA;AAAA,gBAAA,KAAK,cACJ;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,OAAO,KAAK,cAAc;AAAA,oBAC1B,WAAW,iBAAiB;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAG/B,YAAY,KAAK,cAChB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,OAAO;AAAA,oBACP,WAAU;AAAA,oBACV,OAAO,KAAK;AAAA,oBACZ,WAAW,iBAAiB;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGhC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,OAAO;AAAA,oBACP,OAAO,KAAK;AAAA,oBACZ,WAAW,iBAAiB;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAE7B,YAAY,KAAK,SAChB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,OAAO;AAAA,oBACP,WAAU;AAAA,oBACV,OAAO,KAAK;AAAA,oBACZ,WAAW,iBAAiB;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAC9B;AAAA,YAAA;AAAA,UAAA;AAAA,QAEJ;AAAA,QAhDK;AAAA,MAAA;AAAA,IAiDP,EAEN,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/Footer/index.d.ts

@@ -0,0 +1 @@
+export { Footer } from './Footer';