@deriv-web-design/ui 0.1.15 → 0.1.18

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // index.ts
@@ -79,6 +89,8 @@ __export(index_exports, {
   ParallaxBanner: () => ParallaxBanner,
   PartnersPayout: () => PartnersPayout,
   PeopleGrid: () => PeopleGrid,
+  RESOURCE_BANNER_DERIV_CONTENT: () => RESOURCE_BANNER_DERIV_CONTENT,
+  ResourceBanner: () => ResourceBanner,
   STEPS_DATA: () => STEPS_DATA,
   SearchField: () => SearchField,
   Stats: () => Stats,
@@ -149,6 +161,7 @@ var Link = ({
   colorScheme = "coral",
   label,
   icon,
+  iconPosition = "left",
   showChevron = true,
   disabled = false,
   children,
@@ -180,8 +193,9 @@ var Link = ({
       onClick: handleClick,
       ...props,
       children: [
-        hasIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "icon", children: icon }),
+        hasIcon && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "icon", children: icon }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "label", children: label ?? children }),
+        hasIcon && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "icon", children: icon }),
         !hasIcon && showChevron && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronIcon, {}) })
       ]
     }
@@ -2631,18 +2645,22 @@ var import_react13 = require("react");
 
 // components/DotLottieInView/DotLottieInView.tsx
 var import_react12 = require("react");
-var import_dotlottie_react = require("@lottiefiles/dotlottie-react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
+var DotLottiePlayer = (0, import_react12.lazy)(
+  () => import("@lottiefiles/dotlottie-react").then((m) => ({ default: m.DotLottieReact }))
+);
 function DotLottieInView({
   enabled = true,
   rootMargin = "0px",
   threshold = 0.2,
   className,
   style,
+  poster,
   ...dotProps
 }) {
   const wrapRef = (0, import_react12.useRef)(null);
   const [inView, setInView] = (0, import_react12.useState)(false);
+  const [mounted, setMounted] = (0, import_react12.useState)(false);
   const [dotLottie, setDotLottie] = (0, import_react12.useState)(null);
   (0, import_react12.useEffect)(() => {
     const el = wrapRef.current;
@@ -2656,6 +2674,24 @@ function DotLottieInView({
     observer.observe(el);
     return () => observer.disconnect();
   }, [rootMargin, threshold]);
+  (0, import_react12.useEffect)(() => {
+    if (mounted) return;
+    if (!(inView && enabled)) return;
+    if (typeof window === "undefined") return;
+    let cancelled = false;
+    const commit = () => {
+      if (!cancelled) setMounted(true);
+    };
+    const idleId = typeof window.requestIdleCallback === "function" ? window.requestIdleCallback(commit, { timeout: 400 }) : null;
+    const timerId = idleId === null ? window.setTimeout(commit, 0) : null;
+    return () => {
+      cancelled = true;
+      if (idleId !== null && typeof window.cancelIdleCallback === "function") {
+        window.cancelIdleCallback(idleId);
+      }
+      if (timerId !== null) window.clearTimeout(timerId);
+    };
+  }, [inView, enabled, mounted]);
   (0, import_react12.useEffect)(() => {
     if (!dotLottie) return;
     if (!enabled || !inView) {
@@ -2680,15 +2716,15 @@ function DotLottieInView({
         backgroundColor: "transparent",
         ...style
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-        import_dotlottie_react.DotLottieReact,
+      children: mounted ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react12.Suspense, { fallback: poster ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        DotLottiePlayer,
         {
           ...dotProps,
           loop: false,
           autoplay: false,
           dotLottieRefCallback: setDotLottie
         }
-      )
+      ) }) : poster ?? null
     }
   );
 }
@@ -2760,26 +2796,45 @@ var ChevronRight2 = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     )
   }
 );
+function mediaSrc(item) {
+  return typeof item.mediaUrl === "string" && item.mediaUrl !== "" ? item.mediaUrl : null;
+}
 function resolveMediaType(item) {
   if (item.mediaType) return item.mediaType;
-  return item.mediaUrl.split("?")[0].endsWith(".lottie") ? "lottie" : "image";
+  const src = mediaSrc(item);
+  return src?.split("?")[0].endsWith(".lottie") ? "lottie" : "image";
 }
-var MediaRenderer = ({ item, active }) => {
+var MediaRenderer = ({ item, active, rootMargin, threshold }) => {
+  const src = mediaSrc(item);
+  if (!src) return null;
   if (resolveMediaType(item) === "lottie") {
     return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       DotLottieInView,
       {
-        src: item.mediaUrl,
-        enabled: active
+        src,
+        enabled: active,
+        rootMargin,
+        threshold,
+        poster: item.posterUrl ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "img",
+          {
+            src: item.posterUrl,
+            alt: "",
+            "aria-hidden": "true",
+            loading: "lazy",
+            decoding: "async"
+          }
+        ) : void 0
       }
     );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "img",
     {
-      src: item.mediaUrl,
+      src,
       alt: item.title,
-      loading: "lazy"
+      loading: "lazy",
+      decoding: "async"
     }
   );
 };
@@ -2788,10 +2843,16 @@ var FeatureScroll = ({
   items,
   variant = "media-right",
   className,
+  // Destructured, not spread: `...props` lands on the <section>, and an
+  // unknown attribute there is a React DOM warning at best.
+  mediaRootMargin,
+  mediaThreshold,
   ...props
 }) => {
   const [activeIndex, setActiveIndex] = (0, import_react13.useState)(0);
+  const [mobileActiveIndex, setMobileActiveIndex] = (0, import_react13.useState)(0);
   const titleRefs = (0, import_react13.useRef)([]);
+  const mobileItemRefs = (0, import_react13.useRef)([]);
   const mediaColRef = (0, import_react13.useRef)(null);
   (0, import_react13.useLayoutEffect)(() => {
     if (items.length === 0) return;
@@ -2839,6 +2900,40 @@ var FeatureScroll = ({
       if (rafId !== 0) window.cancelAnimationFrame(rafId);
     };
   }, [items.length]);
+  (0, import_react13.useEffect)(() => {
+    if (items.length === 0) return;
+    if (typeof window === "undefined") return;
+    const ratios = /* @__PURE__ */ new Map();
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (window.matchMedia("(min-width: 992px)").matches) return;
+        for (const entry of entries) {
+          const idx = Number(entry.target.getAttribute("data-fs-mobile-idx"));
+          if (!Number.isFinite(idx)) continue;
+          ratios.set(idx, entry.isIntersecting ? entry.intersectionRatio : 0);
+        }
+        let best = 0;
+        let bestRatio = -1;
+        for (const [idx, ratio] of ratios) {
+          if (ratio > bestRatio) {
+            bestRatio = ratio;
+            best = idx;
+          }
+        }
+        if (bestRatio <= 0) return;
+        setMobileActiveIndex((prev) => prev === best ? prev : best);
+      },
+      {
+        root: null,
+        rootMargin: "-28% 0px -28% 0px",
+        threshold: [0, 0.15, 0.3, 0.5, 0.75, 1]
+      }
+    );
+    for (const el of mobileItemRefs.current) {
+      if (el) observer.observe(el);
+    }
+    return () => observer.disconnect();
+  }, [items.length]);
   const rootClass = [
     "fs",
     `fs--${variant}`,
@@ -2866,7 +2961,9 @@ var FeatureScroll = ({
                 MediaRenderer,
                 {
                   item,
-                  active: i === activeIndex
+                  active: i === activeIndex,
+                  rootMargin: mediaRootMargin,
+                  threshold: mediaThreshold
                 }
               )
             },
@@ -2906,22 +3003,41 @@ var FeatureScroll = ({
         i
       )) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "fs__mobile-list", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "fs__mobile-item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "fs__item-title", children: item.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "fs__mobile-media", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MediaRenderer, { item, active: true }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "fs__item-desc", children: item.description }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-        "a",
-        {
-          href: item.link,
-          className: "fs__item-link",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: item.linkLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronRight2, {})
-          ]
-        }
-      )
-    ] }, i)) })
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "fs__mobile-list", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      "div",
+      {
+        className: "fs__mobile-item",
+        "data-fs-mobile-idx": i,
+        ref: (el) => {
+          mobileItemRefs.current[i] = el;
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "fs__item-title", children: item.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "fs__mobile-media", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            MediaRenderer,
+            {
+              item,
+              active: i === mobileActiveIndex,
+              rootMargin: mediaRootMargin,
+              threshold: mediaThreshold
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "fs__item-desc", children: item.description }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+            "a",
+            {
+              href: item.link,
+              className: "fs__item-link",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: item.linkLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronRight2, {})
+              ]
+            }
+          )
+        ]
+      },
+      i
+    )) })
   ] }) });
 };
 
@@ -8335,6 +8451,66 @@ var MasterPartner = ({
     ] }, index)) })
   ] }) });
 };
+
+// templates/ResourceBanner/ResourceBanner.tsx
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var DEFAULT_LINKS = [{ label: "Learn more", href: "#" }];
+var RESOURCE_BANNER_DERIV_CONTENT = {
+  title: "Learn more about staying safe",
+  description: "Read our guide on secure and responsible trading for more on protecting your account.",
+  links: [
+    {
+      id: "responsible",
+      label: "Secure and responsible trading",
+      href: "/responsible",
+      external: true
+    }
+  ]
+};
+var ExternalLinkIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  "path",
+  {
+    d: "M4.5 11.5 11.5 4.5M5.5 4.5h6v6",
+    stroke: "currentColor",
+    strokeWidth: "1.75",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var ResourceBanner = ({
+  title = "Section title goes here",
+  description = "Explain how this specific feature helps your user.",
+  links,
+  headingLevel: HeadingTag = "h2",
+  className,
+  ...props
+}) => {
+  const resolvedLinks = links && links.length > 0 ? links : DEFAULT_LINKS;
+  const rootClass = ["rsb", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("section", { className: rootClass, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "rsb__inner", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "rsb__card", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "rsb__grid", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "rsb__content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(HeadingTag, { className: "rsb__title", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "rsb__description", children: description })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("ul", { className: "rsb__links", children: resolvedLinks.map((link, i) => {
+      const isExternal = link.external ?? true;
+      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("li", { className: "rsb__links-item", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        Link,
+        {
+          className: "rsb__link",
+          colorScheme: "white",
+          href: link.href,
+          label: link.label,
+          icon: isExternal ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ExternalLinkIcon2, {}) : void 0,
+          iconPosition: "right",
+          showChevron: !isExternal,
+          target: isExternal ? "_blank" : void 0,
+          rel: isExternal ? "noopener noreferrer" : void 0
+        }
+      ) }, link.id ?? i);
+    }) })
+  ] }) }) }) });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AVATAR_DATA,
@@ -8396,6 +8572,8 @@ var MasterPartner = ({
   ParallaxBanner,
   PartnersPayout,
   PeopleGrid,
+  RESOURCE_BANNER_DERIV_CONTENT,
+  ResourceBanner,
   STEPS_DATA,
   SearchField,
   Stats,