@gardenfi/garden-book 0.2.24 → 0.2.25

package/dist/Footer/FooterBackgroundAnimation.js

@@ -0,0 +1,100 @@
+import { jsxs as g, Fragment as p, jsx as t } from "react/jsx-runtime";
+import { useMotionValue as y, useTransform as v, AnimatePresence as h, motion as k } from "framer-motion";
+import { useState as r, useRef as s, useEffect as b } from "react";
+const S = ({
+  isMobile: l,
+  isLogoHovered: n,
+  maskUrl: c
+}) => {
+  const [i] = r(
+    "https://garden-bucket-cdn.s3.eu-central-1.amazonaws.com/flowers_bg.mp4"
+  ), [f, o] = r("initial"), m = s(null), e = s(null), u = y(45), d = v(u, (a) => `${a}% center`);
+  return b(() => {
+    if (n)
+      o("visible");
+    else {
+      o("exit");
+      const a = setTimeout(() => {
+        o("initial");
+      }, 800);
+      return () => clearTimeout(a);
+    }
+  }, [n]), /* @__PURE__ */ g(p, { children: [
+    /* @__PURE__ */ t(
+      "video",
+      {
+        ref: m,
+        src: i,
+        autoPlay: !0,
+        loop: !0,
+        muted: !0,
+        controls: !1,
+        preload: "metadata",
+        playsInline: !0,
+        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__ */ t(h, { mode: "wait", children: /* @__PURE__ */ t(
+      k.div,
+      {
+        animate: f,
+        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('${c}')`,
+          maskComposite: "exclude",
+          maskSize: l ? "1200% 200%" : "820% 600%",
+          maskPosition: d
+        },
+        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__ */ t(
+          "video",
+          {
+            ref: e,
+            src: i,
+            autoPlay: !0,
+            loop: !0,
+            muted: !0,
+            controls: !1,
+            preload: "metadata",
+            playsInline: !0,
+            className: "gf-pointer-events-none gf-h-full gf-w-screen gf-object-cover",
+            onCanPlayThrough: () => {
+              e.current && e.current.play().catch(console.error);
+            },
+            onLoadStart: () => {
+              e.current && e.current.play().catch(console.error);
+            }
+          },
+          "video-flowers-animated"
+        )
+      },
+      "hovered"
+    ) })
+  ] });
+};
+export {
+  S as FooterBackgroundAnimation
+};

package/dist/Footer/FooterLink.js

@@ -0,0 +1,87 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { RollingText as i } from "../animations/RollingText/RollingText.js";
+import { Typography as r } from "../Typography/index.js";
+const o = ({
+  title: c,
+  links: n,
+  hoveredIndex: g,
+  onHover: e,
+  className: u = "gf-flex gf-w-full gf-flex-col gf-gap-3 md:gf-w-fit",
+  listClassName: p = "gf-flex gf-flex-col gf-gap-1",
+  isRoutes: l = !1
+}) => /* @__PURE__ */ s("div", { className: u, children: [
+  /* @__PURE__ */ t(
+    r,
+    {
+      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__ */ t("span", { children: c })
+    }
+  ),
+  /* @__PURE__ */ t("ul", { className: p, children: Object.values(n).map(
+    (a, f) => a.link && /* @__PURE__ */ t(
+      "li",
+      {
+        className: l ? "gf-w-fit" : "",
+        onMouseEnter: () => {
+          e == null || e(f);
+        },
+        onMouseLeave: () => {
+          e == null || e(null);
+        },
+        children: /* @__PURE__ */ s(
+          r,
+          {
+            as: "a",
+            href: a.link,
+            target: "_blank",
+            size: "h4",
+            weight: "regular",
+            className: `gf-cursor-pointer gf-transition-all gf-duration-500 gf-ease-in-out gf-text-inherit ${l ? "gf-flex gf-w-fit gf-gap-0.5 gf-items-end gf-transition-colors gf-duration-500 gf-ease-in-out" : ""}`,
+            children: [
+              a.inputAsset && /* @__PURE__ */ t(
+                i,
+                {
+                  delay: 0.2,
+                  value: a.inputAsset || "",
+                  isHovered: g === f
+                }
+              ),
+              l && a.inputChain && /* @__PURE__ */ t(
+                i,
+                {
+                  delay: 0.3,
+                  className: "gf-text-xs gf-italic gf-translate-y-[0.6px]",
+                  value: a.inputChain,
+                  isHovered: g === f
+                }
+              ),
+              /* @__PURE__ */ t(
+                i,
+                {
+                  delay: 0.35,
+                  value: a.title,
+                  isHovered: g === f
+                }
+              ),
+              l && a.chain && /* @__PURE__ */ t(
+                i,
+                {
+                  delay: 0.5,
+                  className: "gf-text-xs gf-italic gf-translate-y-[0.6px] -gf-translate-x-[2px]",
+                  value: a.chain,
+                  isHovered: g === f
+                }
+              )
+            ]
+          }
+        )
+      },
+      f
+    )
+  ) })
+] });
+export {
+  o as FooterLinks
+};

package/dist/Footer/index.d.ts

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

package/dist/Footer/index.js

@@ -0,0 +1,381 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { useState as d, useRef as v, useEffect as B } from "react";
+import { GardenIcon as N } from "../Logo/GardenIcon.js";
+import { CopyrightsIcon as S } from "../Icons/CopyrightsIcon.js";
+import { DiscordIcon as y } from "../Icons/DiscordIcon.js";
+import { XIcon as U } from "../Icons/XIcon.js";
+import { cn as D } from "../utils/index.js";
+import { FooterBackgroundAnimation as R } from "./FooterBackgroundAnimation.js";
+import { FooterLinks as l } from "./FooterLink.js";
+import A from "../assets/maskRect.svg.js";
+import { useClientOnly as I } from "../hooks/useClientOnly.js";
+import { Typography as a } from "../Typography/index.js";
+const q = ({
+  className: m,
+  network: s = "mainnet",
+  maskUrl: p = A,
+  ...x
+}) => {
+  const [n, g] = d(!1), [h, b] = d(
+    null
+  ), o = I(), r = v(null);
+  B(() => () => {
+    r.current && clearTimeout(r.current);
+  }, []);
+  const f = s && s === "testnet" ? "https://testnet.garden.finance" : "https://app.garden.finance", e = "https://garden.finance", w = {
+    Products: {
+      swap: {
+        title: "Swap",
+        link: s && s === "testnet" ? `${f}/?input-chain=bitcoin_testnet&input-asset=BTC` : `${f}/?input-chain=bitcoin&input-asset=BTC`,
+        isExternal: !0
+      },
+      stake: {
+        title: "Stake",
+        link: s && s === "testnet" ? void 0 : `${f}/stake`,
+        isExternal: !0
+      },
+      explorer: {
+        title: "Explorer",
+        link: s && s === "testnet" ? "https://testnet-explorer.garden.finance/" : "https://explorer.garden.finance/",
+        isExternal: !0
+      }
+    },
+    Resources: {
+      blog: {
+        title: "Blog",
+        link: `${e}/blog`,
+        isExternal: !0
+      },
+      routes: {
+        title: "Routes",
+        link: `${e}/routes`,
+        isExternal: !0
+      },
+      faq: {
+        title: "FAQs",
+        link: `${e}/faq`,
+        isExternal: !0
+      },
+      brandKit: {
+        title: "Brand kit",
+        link: `${e}/brand-kit`,
+        isExternal: !0
+      },
+      analytics: {
+        title: "Analytics",
+        link: "https://dune.com/garden_finance/gardenfinance",
+        isExternal: !0
+      },
+      Governance: {
+        title: "Governance",
+        link: "https://docs.garden.finance/home/governance",
+        isExternal: !0
+      }
+    },
+    Developers: {
+      docs: {
+        title: "Docs",
+        link: "https://docs.garden.finance/",
+        isExternal: !0
+      },
+      api: {
+        title: "API",
+        link: "https://docs.garden.finance/developers/api/overview",
+        isExternal: !0
+      },
+      sdk: {
+        title: "SDK",
+        link: "https://docs.garden.finance/developers/sdk/overview",
+        isExternal: !0
+      },
+      security: {
+        title: "Security",
+        link: `${e}/security`,
+        isExternal: !0
+      }
+    }
+  }, k = {
+    btcToSol: {
+      title: "BTC to SOL",
+      link: e + "/routes/bridge-btc-to-sol",
+      chain: "Solana",
+      isExternal: !0
+    },
+    btcToEth: {
+      title: "BTC to ETH",
+      link: e + "/routes/bridge-btc-to-eth",
+      chain: "Ethereum",
+      isExternal: !0
+    },
+    btcToUsdc: {
+      title: "BTC to USDC",
+      link: e + "/routes/bridge-btc-to-usdc-arbitrum",
+      chain: "Arbitrum",
+      isExternal: !0
+    },
+    btctoUsdcEth: {
+      title: "BTC to USDC",
+      link: e + "/routes/bridge-btc-to-usdc-ethereum",
+      chain: "Ethereum",
+      isExternal: !0
+    },
+    btcToWbtc: {
+      title: "BTC to WBTC",
+      link: e + "/routes/bridge-btc-to-wbtc-ethereum",
+      chain: "Ethereum",
+      isExternal: !0
+    },
+    btcTocbBtc: {
+      title: "BTC to cbBTC",
+      link: e + "/routes/bridge-btc-to-cbbtc-base",
+      chain: "Base",
+      isExternal: !0
+    },
+    btcToSui: {
+      title: "BTC to SUI",
+      link: e + "/routes/bridge-btc-to-sui",
+      chain: "Sui",
+      isExternal: !0
+    },
+    // btcToWbtcUni: {
+    //   title: "BTC to WBTC",
+    //   link: homepage + "/routes/bridge-btc-to-wbtc-unichain",
+    //   chain: "Unichain",
+    //   isExternal: true,
+    // },
+    btcToBnb: {
+      title: "BTC to BNB",
+      link: e + "/routes/bridge-btc-to-bnb",
+      chain: "BNB Chain",
+      isExternal: !0
+    },
+    btcToMon: {
+      title: "BTC to MON",
+      link: e + "/routes/bridge-btc-to-mon",
+      chain: "Monad",
+      isExternal: !0
+    },
+    cbBtcBaseTocbBtcSolana: {
+      title: " to cbBTC",
+      link: e + "/routes/bridge-cbbtc-base-to-cbbtc-solana",
+      inputAsset: "cbBTC",
+      inputChain: "Base",
+      chain: "Solana",
+      isExternal: !0
+    },
+    usdcBnbToBtc: {
+      title: " to BTC",
+      link: e + "/routes/bridge-usdc-bnb-to-btc",
+      inputAsset: "USDC",
+      inputChain: "BNB Chain",
+      isExternal: !0
+    },
+    btcToUsdtEthereum: {
+      title: " to USDT",
+      link: e + "/routes/bridge-btc-to-usdt-ethereum",
+      inputAsset: "BTC",
+      chain: "Ethereum",
+      isExternal: !0
+    },
+    btcToUsdcSolana: {
+      title: " to USDC",
+      link: e + "/routes/bridge-btc-to-usdc-solana",
+      inputAsset: "BTC",
+      chain: "Solana",
+      isExternal: !0
+    },
+    usdcEthereumToBtc: {
+      title: " to BTC",
+      link: e + "/routes/bridge-usdc-ethereum-to-btc",
+      inputAsset: "USDC",
+      inputChain: "Ethereum",
+      isExternal: !0
+    },
+    solToBtc: {
+      title: " to BTC",
+      link: e + "/routes/bridge-sol-to-btc",
+      inputAsset: "SOL",
+      inputChain: "Solana",
+      isExternal: !0
+    },
+    usdcEthereumToUsdcBase: {
+      title: " to USDC",
+      link: e + "/routes/bridge-usdc-ethereum-to-usdc-base",
+      inputAsset: "USDC",
+      inputChain: "Ethereum",
+      chain: "Base",
+      isExternal: !0
+    }
+  }, c = {
+    discord: "https://discord.gg/7feudTFMXB",
+    x: "https://x.com/gardenfi"
+  }, { Products: T, Resources: u, Developers: C } = w;
+  return /* @__PURE__ */ i(
+    "footer",
+    {
+      className: D(
+        "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",
+        m,
+        n ? "gf-text-white" : "gf-text-dark-grey"
+      ),
+      ...x,
+      children: [
+        /* @__PURE__ */ i("div", { className: "gf-z-30 gf-w-full gf-max-w-screen-2xl", children: [
+          /* @__PURE__ */ i("div", { className: "gf-mx-auto gf-flex gf-w-full gf-flex-col gf-items-start gf-justify-between gf-gap-8", children: [
+            /* @__PURE__ */ i("div", { className: "gf-flex gf-w-full gf-items-center gf-justify-between gf-gap-6", children: [
+              /* @__PURE__ */ t(
+                N,
+                {
+                  onMouseEnter: () => {
+                    r.current && clearTimeout(r.current), r.current = setTimeout(() => {
+                      g(!0);
+                    }, 300);
+                  },
+                  onMouseLeave: () => {
+                    r.current && (clearTimeout(r.current), r.current = null), g(!1);
+                  },
+                  className: "gf-h-8 gf-w-8 gf-cursor-pointer gf-duration-500 gf-ease-in-out",
+                  onClick: (E) => E.preventDefault()
+                }
+              ),
+              /* @__PURE__ */ i("div", { className: "gf-flex gf-items-center gf-gap-4", children: [
+                /* @__PURE__ */ t(
+                  U,
+                  {
+                    onClick: () => {
+                      o && window.open(c.x, "_blank");
+                    },
+                    className: "gf-cursor-pointer gf-duration-500 gf-ease-in-out"
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  y,
+                  {
+                    onClick: () => {
+                      o && window.open(c.discord, "_blank");
+                    },
+                    className: "gf-cursor-pointer gf-duration-500 gf-ease-in-out"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ i("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__ */ i("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__ */ t("div", { className: "gf-w-full md:gf-hidden", children: /* @__PURE__ */ t(
+                  l,
+                  {
+                    title: "Resources",
+                    links: u,
+                    className: "gf-flex gf-w-full gf-flex-col gf-gap-3",
+                    listClassName: "gf-flex gf-flex-col gf-gap-2"
+                  }
+                ) }),
+                /* @__PURE__ */ t("div", { className: "gf-flex gf-w-full gf-max-w-[400px] gf-flex-col gf-gap-3 md:gf-w-fit", children: /* @__PURE__ */ t(
+                  l,
+                  {
+                    title: "Routes",
+                    links: k,
+                    hoveredIndex: h,
+                    onHover: b,
+                    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: !0
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ i("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__ */ t(
+                  l,
+                  {
+                    title: "Products",
+                    links: T,
+                    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__ */ t(
+                  l,
+                  {
+                    title: "Developers",
+                    links: C,
+                    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__ */ t("div", { className: "gf-hidden md:gf-flex", children: /* @__PURE__ */ t(
+                  l,
+                  {
+                    title: "Resources",
+                    links: u,
+                    className: "gf-flex gf-w-full gf-flex-col gf-gap-3",
+                    listClassName: "gf-flex gf-flex-col gf-gap-1"
+                  }
+                ) })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ i("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__ */ t(
+              "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 ${n ? "gf-bg-white" : "gf-bg-dark-grey"}`
+              }
+            ),
+            /* @__PURE__ */ i("div", { className: "gf-z-10 gf-my-6 gf-flex gf-w-full gf-items-center gf-justify-between gf-gap-4", children: [
+              /* @__PURE__ */ t("div", { className: "gf-flex gf-w-fit gf-items-center gf-justify-start gf-gap-6", children: /* @__PURE__ */ i(
+                a,
+                {
+                  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__ */ t(S, {}),
+                    /* @__PURE__ */ t("span", { children: "Garden" }),
+                    /* @__PURE__ */ t("span", { children: "2026" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ i("div", { className: "gf-flex gf-w-fit gf-items-center gf-justify-end gf-gap-6", children: [
+                /* @__PURE__ */ t(
+                  a,
+                  {
+                    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__ */ t(
+                  a,
+                  {
+                    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__ */ t(
+          R,
+          {
+            isMobile: !1,
+            isLogoHovered: n,
+            maskUrl: p
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  q as Footer
+};

package/dist/GradientScroll/index.d.ts

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

package/dist/GradientScroll/index.js

@@ -0,0 +1,116 @@
+import { jsxs as D, jsx as n } from "react/jsx-runtime";
+import { useState as c, useRef as b, useCallback as F, useEffect as G } from "react";
+import { cn as o } from "../utils/index.js";
+const M = ({
+  children: S,
+  height: y,
+  width: u,
+  className: z,
+  gradientHeight: w = 24,
+  gradientWidth: v = 24,
+  gradientClassName: i,
+  gradientTopClassName: x,
+  gradientBottomClassName: R,
+  gradientLeftClassName: L,
+  gradientRightClassName: N,
+  onClose: d = !1,
+  direction: h = "vertical",
+  ...T
+}) => {
+  const [O, j] = c(!1), [B, H] = c(!1), [k, E] = c(!1), [V, W] = c(!1), e = b(null), p = b(null), l = h === "vertical", f = h === "horizontal", g = F(() => {
+    if (e.current) {
+      const { scrollTop: t, scrollHeight: a, clientHeight: s, scrollLeft: m, scrollWidth: q, clientWidth: A } = e.current;
+      l && (H(t + s < a), j(t > 0)), f && (W(m + A < q), E(m > 0));
+    }
+  }, [l, f]);
+  G(() => {
+    d && e.current && (e.current.scrollTop = 0, e.current.scrollLeft = 0);
+  }, [d]), G(() => {
+    const t = e.current, a = p.current;
+    if (!t || !a) return;
+    g();
+    const s = new ResizeObserver(() => {
+      g();
+    });
+    return s.observe(t), s.observe(a), () => {
+      s.disconnect();
+    };
+  }, [g]);
+  const $ = () => h === "horizontal" ? "gf-overflow-x-auto gf-overflow-y-hidden" : "gf-overflow-y-auto gf-overflow-x-hidden", r = (t) => typeof t == "number" ? `${t}px` : t;
+  return /* @__PURE__ */ D(
+    "div",
+    {
+      className: o(
+        "gf-bg-white gf-relative gf-overflow-hidden",
+        f ? "" : "gf-w-full",
+        z
+      ),
+      style: {
+        height: r(y),
+        ...u && { width: r(u) }
+      },
+      ...T,
+      children: [
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: o("gf-h-full gf-w-full gf-no-scrollbar", $()),
+            onScroll: g,
+            ref: e,
+            children: /* @__PURE__ */ n(
+              "div",
+              {
+                ref: p,
+                className: o(f && !l && "gf-inline-flex"),
+                children: S
+              }
+            )
+          }
+        ),
+        l && O && /* @__PURE__ */ n(
+          "div",
+          {
+            className: o(
+              "gf-w-full gf-absolute gf-top-0 gf-left-0 gf-z-40 gf-bg-gradient-to-b gf-from-white gf-via-white/80 gf-to-transparent gf-pointer-events-none",
+              x || i
+            ),
+            style: { height: r(w) }
+          }
+        ),
+        l && B && /* @__PURE__ */ n(
+          "div",
+          {
+            className: o(
+              "gf-w-full gf-absolute gf-bottom-0 gf-left-0 gf-z-40 gf-bg-gradient-to-t gf-from-white gf-via-white/80 gf-to-transparent gf-pointer-events-none",
+              R || i
+            ),
+            style: { height: r(w) }
+          }
+        ),
+        f && k && /* @__PURE__ */ n(
+          "div",
+          {
+            className: o(
+              "gf-h-full gf-absolute gf-top-0 gf-left-0 gf-z-40 gf-bg-gradient-to-r gf-from-white gf-via-white/80 gf-to-transparent gf-pointer-events-none",
+              L || i
+            ),
+            style: { width: r(v) }
+          }
+        ),
+        f && V && /* @__PURE__ */ n(
+          "div",
+          {
+            className: o(
+              "gf-h-full gf-absolute gf-top-0 gf-right-0 gf-z-40 gf-bg-gradient-to-l gf-from-white gf-via-white/80 gf-to-transparent gf-pointer-events-none",
+              N || i
+            ),
+            style: { width: r(v) }
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  M as GradientScroll
+};