@deriv-web-design/ui 0.0.15 → 0.0.17

package/dist/index.js

@@ -52,7 +52,9 @@ __export(index_exports, {
   StickyStackedCards: () => StickyStackedCards,
   TEXT_CONTENT: () => TEXT_CONTENT,
   Tag: () => Tag,
-  TextField: () => TextField
+  TextField: () => TextField,
+  TextScroll: () => TextScroll,
+  dayNightTransitionV2Preset: () => dayNightTransitionV2Preset
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -2985,7 +2987,11 @@ var Navbar = ({
                     "button",
                     {
                       ref: langBtnRef,
-                      className: "navbar__nav-item navbar__lang-btn",
+                      className: [
+                        "navbar__nav-item",
+                        "navbar__lang-btn",
+                        hasLangDropdown && langDropdownOpen ? "navbar__nav-item--open" : ""
+                      ].filter(Boolean).join(" "),
                       onClick: hasLangDropdown ? () => setLangDropdownOpen((o) => !o) : onLanguageClick,
                       "aria-haspopup": hasLangDropdown ? "true" : void 0,
                       "aria-expanded": hasLangDropdown ? langDropdownOpen : void 0,
@@ -3198,14 +3204,96 @@ var Navbar = ({
 // templates/DayNightTransition/DayNightTransition.tsx
 var import_react15 = require("react");
 var import_framer_motion3 = require("framer-motion");
+
+// templates/DayNightTransition/webflowDayNightV2Ix.ts
+var DESC_SWATCH = { r: 24, g: 28, b: 37 };
+var BODY_TEXT = { r: 51, g: 51, b: 51 };
+var rgb = (r, g, b) => `rgb(${r},${g},${b})`;
+var lerp = (a, b, u) => a + (b - a) * u;
+var seg = (t, t0, t1, v0, v1) => {
+  if (t <= t0) return v0;
+  if (t >= t1) return v1;
+  return lerp(v0, v1, (t - t0) / (t1 - t0));
+};
+function webflowV2DescriptionColor(t, media) {
+  if (media === "desktop") {
+    const body2 = rgb(BODY_TEXT.r, BODY_TEXT.g, BODY_TEXT.b);
+    const dark2 = rgb(DESC_SWATCH.r, DESC_SWATCH.g, DESC_SWATCH.b);
+    const white2 = rgb(255, 255, 255);
+    if (t < 0.49) return body2;
+    if (t < 0.5) return dark2;
+    return white2;
+  }
+  const white = rgb(255, 255, 255);
+  const dark = rgb(DESC_SWATCH.r, DESC_SWATCH.g, DESC_SWATCH.b);
+  const body = rgb(BODY_TEXT.r, BODY_TEXT.g, BODY_TEXT.b);
+  if (t < 0.58) return body;
+  if (t < 0.59) return dark;
+  return white;
+}
+function webflowV2TitleColor(t, media) {
+  if (media === "desktop") {
+    const body2 = rgb(BODY_TEXT.r, BODY_TEXT.g, BODY_TEXT.b);
+    const black = rgb(0, 0, 0);
+    const white2 = rgb(255, 255, 255);
+    if (t < 0.51) return body2;
+    if (t >= 0.52) return white2;
+    return seg(t, 0.51, 0.52, black, white2);
+  }
+  const dark = rgb(DESC_SWATCH.r, DESC_SWATCH.g, DESC_SWATCH.b);
+  const white = rgb(255, 255, 255);
+  const body = rgb(BODY_TEXT.r, BODY_TEXT.g, BODY_TEXT.b);
+  if (t < 0.6) return body;
+  if (t >= 0.61) return white;
+  const u = (t - 0.6) / 0.01;
+  return rgb(
+    lerp(DESC_SWATCH.r, 255, u),
+    lerp(DESC_SWATCH.g, 255, u),
+    lerp(DESC_SWATCH.b, 255, u)
+  );
+}
+function webflowV2DayWordOpacity(t, media) {
+  if (media === "desktop") {
+    if (t < 0.51) return 1;
+    if (t >= 0.52) return 0;
+    return seg(t, 0.51, 0.52, 1, 0);
+  }
+  if (t < 0.6) return 1;
+  if (t >= 0.61) return 0;
+  return seg(t, 0.6, 0.61, 1, 0);
+}
+function webflowV2NightWordOpacity(t, media) {
+  if (media === "desktop") {
+    if (t < 0.51) return 0;
+    if (t >= 0.52) return 1;
+    return seg(t, 0.51, 0.52, 0, 1);
+  }
+  if (t < 0.6) return 0;
+  if (t >= 0.61) return 1;
+  return seg(t, 0.6, 0.61, 0, 1);
+}
+var WEBFLOW_V2_DAY_CLIP_SCROLL_END = 0.65;
+function webflowV2DayClipPercent(t, media) {
+  if (media === "desktop") return 100;
+  return seg(t, 0, WEBFLOW_V2_DAY_CLIP_SCROLL_END, 100, 0);
+}
+
+// templates/DayNightTransition/DayNightTransition.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var SPRING2 = { stiffness: 80, damping: 30, restDelta: 1e-3 };
 var FADE_START = 0.35;
 var FADE_END = 0.65;
-var WORD_START = 0.4;
-var WORD_END = 0.6;
+var V2_TEXT_SCROLL_CROSSFADE_DESKTOP_START = 0.49;
+var V2_TEXT_SCROLL_CROSSFADE_DESKTOP_END = 0.52;
+var V2_TEXT_SCROLL_CROSSFADE_MOBILE_START = 0.58;
+var V2_TEXT_SCROLL_CROSSFADE_MOBILE_END = 0.61;
 var TEXT_CHANNEL_DAY = 0;
 var TEXT_CHANNEL_NIGHT = 255;
+var seg2 = (t, t0, t1, v0, v1) => {
+  if (t <= t0) return v0;
+  if (t >= t1) return v1;
+  return v0 + (v1 - v0) * ((t - t0) / (t1 - t0));
+};
 var DayNightTransition = ({
   dayImageUrl,
   nightImageUrl,
@@ -3215,102 +3303,348 @@ var DayNightTransition = ({
   nightDescription = "Description goes here. Description goes here. Description goes here.",
   ctaLabel = "Get started",
   ctaHref = "#",
+  hideCta = false,
+  headlineLevel = "h2",
+  descriptionLevel = "body-md",
+  inlineDayNightHeadline,
+  scrollPreset = "default",
   className,
   ...props
 }) => {
   const wrapperRef = (0, import_react15.useRef)(null);
+  const dayWordRef = (0, import_react15.useRef)(null);
+  const [nightMarginStart, setNightMarginStart] = (0, import_react15.useState)("0px");
+  const [nightMarginEnd, setNightMarginEnd] = (0, import_react15.useState)("0px");
+  const [ixMedia, setIxMedia] = (0, import_react15.useState)("desktop");
+  const webflowV2 = scrollPreset === "webflow-day-night-v2";
+  (0, import_react15.useEffect)(() => {
+    const mq = window.matchMedia("(max-width: 991px)");
+    const sync = () => setIxMedia(mq.matches ? "mobile" : "desktop");
+    sync();
+    mq.addEventListener("change", sync);
+    return () => mq.removeEventListener("change", sync);
+  }, []);
+  const MotionHeadline = headlineLevel === "h1" ? import_framer_motion3.motion.h1 : import_framer_motion3.motion.h2;
+  (0, import_react15.useLayoutEffect)(() => {
+    if (!inlineDayNightHeadline) return;
+    const syncNightPull = () => {
+      const dayEl = dayWordRef.current;
+      if (!dayEl) return;
+      const w = dayEl.offsetWidth;
+      const doc = document.documentElement;
+      const rtl = doc.getAttribute("dir") === "rtl" || doc.lang.toLowerCase().startsWith("ar");
+      if (rtl) {
+        setNightMarginStart("0px");
+        setNightMarginEnd(w ? `-${w}px` : "0px");
+      } else {
+        setNightMarginStart(w ? `-${w}px` : "0px");
+        setNightMarginEnd("0px");
+      }
+    };
+    syncNightPull();
+    const ro = new ResizeObserver(syncNightPull);
+    if (dayWordRef.current) ro.observe(dayWordRef.current);
+    window.addEventListener("resize", syncNightPull);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", syncNightPull);
+    };
+  }, [
+    inlineDayNightHeadline,
+    inlineDayNightHeadline?.dayWord,
+    inlineDayNightHeadline?.nightWord,
+    inlineDayNightHeadline?.prefix
+  ]);
   const { scrollYProgress } = (0, import_framer_motion3.useScroll)({
     target: wrapperRef,
     offset: ["start end", "end start"]
   });
   const smooth = (0, import_framer_motion3.useSpring)(scrollYProgress, SPRING2);
-  const nightOpacity = (0, import_framer_motion3.useTransform)(smooth, [FADE_START, FADE_END], [0, 1]);
-  const channel = (0, import_framer_motion3.useTransform)(smooth, [FADE_START, FADE_END], [TEXT_CHANNEL_DAY, TEXT_CHANNEL_NIGHT]);
+  const progress = webflowV2 ? scrollYProgress : smooth;
+  const nightOpacity = (0, import_framer_motion3.useTransform)(progress, [FADE_START, FADE_END], [0, 1]);
+  const channel = (0, import_framer_motion3.useTransform)(progress, [FADE_START, FADE_END], [TEXT_CHANNEL_DAY, TEXT_CHANNEL_NIGHT]);
   const textColor = import_framer_motion3.useMotionTemplate`rgb(${channel}, ${channel}, ${channel})`;
-  const dayOpacity = (0, import_framer_motion3.useTransform)(smooth, [WORD_START, WORD_END], [1, 0]);
-  const nightOpacity2 = (0, import_framer_motion3.useTransform)(smooth, [WORD_START, WORD_END], [0, 1]);
+  const dayOpacity = (0, import_framer_motion3.useTransform)(progress, (t) => {
+    if (webflowV2) {
+      return ixMedia === "mobile" ? seg2(
+        t,
+        V2_TEXT_SCROLL_CROSSFADE_MOBILE_START,
+        V2_TEXT_SCROLL_CROSSFADE_MOBILE_END,
+        1,
+        0
+      ) : seg2(
+        t,
+        V2_TEXT_SCROLL_CROSSFADE_DESKTOP_START,
+        V2_TEXT_SCROLL_CROSSFADE_DESKTOP_END,
+        1,
+        0
+      );
+    }
+    return seg2(t, FADE_START, FADE_END, 1, 0);
+  });
+  const nightOpacity2 = (0, import_framer_motion3.useTransform)(progress, (t) => {
+    if (webflowV2) {
+      return ixMedia === "mobile" ? seg2(
+        t,
+        V2_TEXT_SCROLL_CROSSFADE_MOBILE_START,
+        V2_TEXT_SCROLL_CROSSFADE_MOBILE_END,
+        0,
+        1
+      ) : seg2(
+        t,
+        V2_TEXT_SCROLL_CROSSFADE_DESKTOP_START,
+        V2_TEXT_SCROLL_CROSSFADE_DESKTOP_END,
+        0,
+        1
+      );
+    }
+    return seg2(t, FADE_START, FADE_END, 0, 1);
+  });
+  const v2DescColor = (0, import_framer_motion3.useTransform)(progress, (t) => webflowV2DescriptionColor(t, ixMedia));
+  const v2TitleColor = (0, import_framer_motion3.useTransform)(progress, (t) => webflowV2TitleColor(t, ixMedia));
+  const v2DayWordOp = (0, import_framer_motion3.useTransform)(progress, (t) => webflowV2DayWordOpacity(t, ixMedia));
+  const v2NightWordOp = (0, import_framer_motion3.useTransform)(progress, (t) => webflowV2NightWordOpacity(t, ixMedia));
+  const v2DayHeight = (0, import_framer_motion3.useTransform)(
+    progress,
+    (t) => ixMedia === "mobile" ? `${webflowV2DayClipPercent(t, ixMedia)}%` : "100vh"
+  );
   const hasDescription = Boolean(dayDescription || nightDescription);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  const useInlineHeadline = Boolean(inlineDayNightHeadline);
+  const rootClass = [
+    "dnt",
+    headlineLevel === "h1" && "dnt--headline-h1",
+    descriptionLevel === "body-lg" && "dnt--desc-body-lg",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
     {
       ref: wrapperRef,
-      className: ["dnt", className].filter(Boolean).join(" "),
+      className: rootClass,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "dnt__sticky", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-          "img",
-          {
-            className: "dnt__bg dnt__bg--day",
-            src: dayImageUrl,
-            alt: "",
-            loading: "eager",
-            draggable: false
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-          import_framer_motion3.motion.img,
-          {
-            className: "dnt__bg dnt__bg--night",
-            src: nightImageUrl,
-            alt: "",
-            loading: "eager",
-            draggable: false,
-            style: { opacity: nightOpacity }
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "dnt__content", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "dnt__inner", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-          import_framer_motion3.motion.div,
-          {
-            className: "dnt__text-wrap",
-            style: { color: textColor },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                  import_framer_motion3.motion.h2,
-                  {
-                    className: "dnt__headline",
-                    style: { opacity: dayOpacity },
-                    children: dayHeadline
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                  import_framer_motion3.motion.h2,
-                  {
-                    className: "dnt__headline",
-                    "aria-hidden": "true",
-                    style: { opacity: nightOpacity2 },
-                    children: nightHeadline
-                  }
-                )
-              ] }),
-              hasDescription && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                  import_framer_motion3.motion.p,
-                  {
-                    className: "dnt__description",
-                    style: { opacity: dayOpacity },
-                    children: dayDescription ?? ""
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                  import_framer_motion3.motion.p,
+      children: [
+        webflowV2 && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "dnt__v2-background-wrapper", "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            import_framer_motion3.motion.div,
+            {
+              className: "dnt__v2-bg-day trade-day-night_background-day is-alternative",
+              style: {
+                backgroundImage: `url(${dayImageUrl})`,
+                height: v2DayHeight
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            "div",
+            {
+              className: "dnt__v2-bg-night trade-day-night_background-night is-alternative",
+              style: { backgroundImage: `url(${nightImageUrl})` }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: webflowV2 ? "dnt__sticky dnt__sticky--webflow-v2" : "dnt__sticky", children: [
+          !webflowV2 && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              "img",
+              {
+                className: "dnt__bg dnt__bg--day",
+                src: dayImageUrl,
+                alt: "",
+                loading: "eager",
+                draggable: false
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              import_framer_motion3.motion.img,
+              {
+                className: "dnt__bg dnt__bg--night",
+                src: nightImageUrl,
+                alt: "",
+                loading: "eager",
+                draggable: false,
+                style: { opacity: nightOpacity }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "dnt__content", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "dnt__inner", children: webflowV2 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "dnt__text-wrap", children: [
+            useInlineHeadline && inlineDayNightHeadline ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+              MotionHeadline,
+              {
+                className: "dnt__headline dnt__headline--inline-day-night",
+                style: { color: v2TitleColor },
+                "aria-label": `${inlineDayNightHeadline.prefix}${inlineDayNightHeadline.dayWord} / ${inlineDayNightHeadline.prefix}${inlineDayNightHeadline.nightWord}`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "dnt__headline-prefix", children: inlineDayNightHeadline.prefix }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "dnt__headline-pair", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                      import_framer_motion3.motion.span,
+                      {
+                        ref: dayWordRef,
+                        className: "dnt__headline-wday",
+                        style: { opacity: v2DayWordOp },
+                        children: inlineDayNightHeadline.dayWord
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                      import_framer_motion3.motion.span,
+                      {
+                        className: "dnt__headline-wnight",
+                        style: {
+                          opacity: v2NightWordOp,
+                          marginInlineStart: nightMarginStart,
+                          marginInlineEnd: nightMarginEnd
+                        },
+                        children: inlineDayNightHeadline.nightWord
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                MotionHeadline,
+                {
+                  className: "dnt__headline",
+                  style: { color: v2TitleColor, opacity: dayOpacity },
+                  children: dayHeadline
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                MotionHeadline,
+                {
+                  className: "dnt__headline",
+                  "aria-hidden": "true",
+                  style: { color: v2TitleColor, opacity: nightOpacity2 },
+                  children: nightHeadline
+                }
+              )
+            ] }),
+            hasDescription && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                import_framer_motion3.motion.p,
+                {
+                  className: "dnt__description",
+                  style: {
+                    color: v2DescColor,
+                    opacity: dayOpacity
+                  },
+                  children: dayDescription ?? ""
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                import_framer_motion3.motion.p,
+                {
+                  className: "dnt__description",
+                  "aria-hidden": "true",
+                  style: {
+                    color: v2DescColor,
+                    opacity: nightOpacity2
+                  },
+                  children: nightDescription ?? ""
+                }
+              )
+            ] }),
+            !hideCta && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("a", { href: ctaHref, className: "dnt__btn", children: ctaLabel })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+            import_framer_motion3.motion.div,
+            {
+              className: "dnt__text-wrap",
+              style: { color: textColor },
+              children: [
+                useInlineHeadline && inlineDayNightHeadline ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                  MotionHeadline,
                   {
-                    className: "dnt__description",
-                    "aria-hidden": "true",
-                    style: { opacity: nightOpacity2 },
-                    children: nightDescription ?? ""
+                    className: "dnt__headline dnt__headline--inline-day-night",
+                    "aria-label": `${inlineDayNightHeadline.prefix}${inlineDayNightHeadline.dayWord} / ${inlineDayNightHeadline.prefix}${inlineDayNightHeadline.nightWord}`,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "dnt__headline-prefix", children: inlineDayNightHeadline.prefix }),
+                      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "dnt__headline-pair", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                          import_framer_motion3.motion.span,
+                          {
+                            ref: dayWordRef,
+                            className: "dnt__headline-wday",
+                            style: { opacity: dayOpacity },
+                            children: inlineDayNightHeadline.dayWord
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                          import_framer_motion3.motion.span,
+                          {
+                            className: "dnt__headline-wnight",
+                            style: {
+                              opacity: nightOpacity2,
+                              marginInlineStart: nightMarginStart,
+                              marginInlineEnd: nightMarginEnd
+                            },
+                            children: inlineDayNightHeadline.nightWord
+                          }
+                        )
+                      ] })
+                    ]
                   }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("a", { href: ctaHref, className: "dnt__btn", children: ctaLabel })
-            ]
-          }
-        ) }) })
-      ] })
+                ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    MotionHeadline,
+                    {
+                      className: "dnt__headline",
+                      style: { opacity: dayOpacity },
+                      children: dayHeadline
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    MotionHeadline,
+                    {
+                      className: "dnt__headline",
+                      "aria-hidden": "true",
+                      style: { opacity: nightOpacity2 },
+                      children: nightHeadline
+                    }
+                  )
+                ] }),
+                hasDescription && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    import_framer_motion3.motion.p,
+                    {
+                      className: "dnt__description",
+                      style: { opacity: dayOpacity },
+                      children: dayDescription ?? ""
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    import_framer_motion3.motion.p,
+                    {
+                      className: "dnt__description",
+                      "aria-hidden": "true",
+                      style: { opacity: nightOpacity2 },
+                      children: nightDescription ?? ""
+                    }
+                  )
+                ] }),
+                !hideCta && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("a", { href: ctaHref, className: "dnt__btn", children: ctaLabel })
+              ]
+            }
+          ) }) })
+        ] })
+      ]
     }
   );
 };
 
+// templates/DayNightTransition/dayNightTransitionPresets.ts
+var dayNightTransitionV2Preset = {
+  className: "dnt--layout-v2 dnt--webflow-v2",
+  scrollPreset: "webflow-day-night-v2",
+  dayImageUrl: "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/68da5c86c91c54f39c86cd8f_trade_day.webp",
+  nightImageUrl: "https://cdn.prod.website-files.com/66585fe0e1dc7e70cc75d440/6757df573bf331c84b6c69fe_trade_night.webp",
+  dayHeadline: "Section title light\n",
+  nightHeadline: "Section title dark\n",
+  dayDescription: "This section is designed to give your visitors a quick overview of why your solution is the right choice. Use this space to provide high-level context.\n",
+  nightDescription: "This section is designed to give your visitors a quick overview of why your solution is the right choice. Use this space to provide high-level context.",
+  ctaLabel: "Open account",
+  ctaHref: "#"
+};
+
 // templates/LogoMarquee/LogoMarquee.tsx
 var import_react16 = require("react");
 var import_framer_motion4 = require("framer-motion");
@@ -3624,6 +3958,74 @@ var DownloadBanner = ({
     ] })
   ] }) }) });
 };
+
+// templates/TextScroll/TextScroll.tsx
+var import_react17 = require("react");
+var import_gsap = require("gsap");
+var import_ScrollTrigger = require("gsap/ScrollTrigger");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+import_gsap.gsap.registerPlugin(import_ScrollTrigger.ScrollTrigger);
+var TextScroll = ({ text, className }) => {
+  const sectionRef = (0, import_react17.useRef)(null);
+  const wordsRef = (0, import_react17.useRef)([]);
+  const words = text.split(/\s+/).filter(Boolean);
+  (0, import_react17.useEffect)(() => {
+    const section = sectionRef.current;
+    const wordEls = wordsRef.current.filter(Boolean);
+    if (!section || wordEls.length === 0) return;
+    const isMobile = window.matchMedia("(max-width: 767px)").matches;
+    const startValue = isMobile ? "top 35%" : "top center";
+    const endValue = isMobile ? "bottom 90%" : "bottom center";
+    const rafId = requestAnimationFrame(() => {
+      import_gsap.gsap.set(wordEls, { opacity: 0.2 });
+      const tl = import_gsap.gsap.timeline({
+        scrollTrigger: {
+          trigger: section,
+          start: startValue,
+          end: endValue,
+          scrub: 2
+        }
+      });
+      tl.to(wordEls, {
+        opacity: 1,
+        stagger: 0.1,
+        ease: "none"
+      });
+      section._tl = tl;
+    });
+    return () => {
+      cancelAnimationFrame(rafId);
+      const tl = section._tl;
+      if (tl) {
+        tl.scrollTrigger?.kill();
+        tl.kill();
+      }
+      import_gsap.gsap.set(wordEls, { clearProps: "opacity" });
+    };
+  }, [text]);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    "section",
+    {
+      ref: sectionRef,
+      className: ["ts", className].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "ts__inner", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "ts__text", "aria-label": text, children: words.map((word, i) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+        "span",
+        {
+          ref: (el) => {
+            if (el) wordsRef.current[i] = el;
+          },
+          className: "ts__word",
+          "aria-hidden": "true",
+          children: [
+            word,
+            i < words.length - 1 ? " " : ""
+          ]
+        },
+        i
+      )) }) })
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AVATAR_DATA,
@@ -3658,6 +4060,8 @@ var DownloadBanner = ({
   StickyStackedCards,
   TEXT_CONTENT,
   Tag,
-  TextField
+  TextField,
+  TextScroll,
+  dayNightTransitionV2Preset
 });
 //# sourceMappingURL=index.js.map