@deriv-web-design/ui 0.1.5 → 0.1.6

package/dist/index.mjs

@@ -267,6 +267,7 @@ var SearchField = forwardRef2(
   ({
     variant = "outline",
     status = "neutral",
+    showSearchIcon = true,
     value,
     defaultValue,
     onChange,
@@ -321,7 +322,7 @@ var SearchField = forwardRef2(
         className: wrapperClass,
         "data-disabled": disabled || void 0,
         children: [
-          /* @__PURE__ */ jsx7("span", { className: "iconSlot", children: /* @__PURE__ */ jsx7(SearchIcon, {}) }),
+          showSearchIcon && /* @__PURE__ */ jsx7("span", { className: "iconSlot", children: /* @__PURE__ */ jsx7(SearchIcon, {}) }),
           /* @__PURE__ */ jsx7(
             "input",
             {
@@ -865,6 +866,21 @@ var CardThumbnailVariant = ({
   const isVideo = type === "video";
   const isHorizontal = layout === "horizontal" || layout === "horizontal-reverse";
   const isReversed = layout === "horizontal-reverse";
+  const hasTags = !hideTags && tags.length > 0;
+  const tagsNode = hasTags && (isHorizontal ? /* @__PURE__ */ jsx13("div", { className: "ct-tagsList", children: tags.map((tag, i) => /* @__PURE__ */ jsxs13("span", { className: "ct-tagItem", children: [
+    i > 0 && /* @__PURE__ */ jsx13("span", { "aria-hidden": "true", className: "ct-tagDot", children: "\xB7" }),
+    /* @__PURE__ */ jsx13(Tag, { icon: tag.icon, label: tag.label, size: "md", variant: "custom" })
+  ] }, i)) }) : /* @__PURE__ */ jsx13("div", { className: "ct-tagsRow", children: tags.map((tag, i) => /* @__PURE__ */ jsx13(Tag, { icon: tag.icon, label: tag.label, size: "md", variant: "fill" }, i)) }));
+  const copyLinkNode = showCopyLink && /* @__PURE__ */ jsx13(
+    "button",
+    {
+      "aria-label": "Copy link",
+      className: "ct-copyLink",
+      onClick: onCopyLink,
+      type: "button",
+      children: /* @__PURE__ */ jsx13(LinkIcon, {})
+    }
+  );
   return /* @__PURE__ */ jsxs13(
     "div",
     {
@@ -877,24 +893,13 @@ var CardThumbnailVariant = ({
           !isVideo && !hideAvatar && avatar && /* @__PURE__ */ jsx13("img", { alt: avatarAlt, className: "ct-avatar", src: avatar })
         ] }),
         /* @__PURE__ */ jsxs13("div", { className: "ct-content", children: [
+          !isHorizontal && tagsNode,
           /* @__PURE__ */ jsx13("p", { className: "ct-title", children: title }),
           /* @__PURE__ */ jsx13("p", { className: "ct-summary", children: summary }),
-          /* @__PURE__ */ jsxs13("div", { className: "ct-metaRow", children: [
-            !hideTags && /* @__PURE__ */ jsx13("div", { className: "ct-tagsList", children: tags.map((tag, i) => /* @__PURE__ */ jsxs13("span", { className: "ct-tagItem", children: [
-              i > 0 && /* @__PURE__ */ jsx13("span", { "aria-hidden": "true", className: "ct-tagDot", children: "\xB7" }),
-              /* @__PURE__ */ jsx13(Tag, { icon: tag.icon, label: tag.label, size: "md", variant: "custom" })
-            ] }, i)) }),
-            showCopyLink && /* @__PURE__ */ jsx13(
-              "button",
-              {
-                "aria-label": "Copy link",
-                className: "ct-copyLink",
-                onClick: onCopyLink,
-                type: "button",
-                children: /* @__PURE__ */ jsx13(LinkIcon, {})
-              }
-            )
-          ] })
+          isHorizontal ? (tagsNode || copyLinkNode) && /* @__PURE__ */ jsxs13("div", { className: "ct-metaRow", children: [
+            tagsNode,
+            copyLinkNode
+          ] }) : copyLinkNode && /* @__PURE__ */ jsx13("div", { className: "ct-metaRow ct-metaRow--end", children: copyLinkNode })
         ] })
       ]
     }
@@ -1897,6 +1902,24 @@ var ButtonBlock2 = ({
     ))
   ] });
 };
+var SearchBlock = ({ search }) => {
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      search?.onSubmit?.(event.currentTarget.value);
+    }
+  };
+  return /* @__PURE__ */ jsx24("div", { className: "header__search", children: /* @__PURE__ */ jsx24(
+    SearchField,
+    {
+      placeholder: search?.placeholder ?? "Search",
+      value: search?.value,
+      onChange: search?.onChange,
+      onClear: search?.onClear,
+      onKeyDown: handleKeyDown,
+      showSearchIcon: false
+    }
+  ) });
+};
 var Header = ({
   variant,
   subtitle,
@@ -1906,6 +1929,7 @@ var Header = ({
   secondaryButton,
   leftVisual,
   rightVisual,
+  search,
   className,
   ...props
 }) => {
@@ -1961,6 +1985,7 @@ var Header = ({
         /* @__PURE__ */ jsx24("div", { className: "header__overlay", "aria-hidden": "true" }),
         /* @__PURE__ */ jsx24("div", { className: "header__inner", children: /* @__PURE__ */ jsx24("div", { className: "header__content", children: /* @__PURE__ */ jsxs22("div", { className: "header__body", children: [
           textBlock,
+          variant === "dark-search" && /* @__PURE__ */ jsx24(SearchBlock, { search }),
           /* @__PURE__ */ jsx24(
             ButtonBlock2,
             {
@@ -5180,7 +5205,7 @@ var ImageBanner = ({
 };
 
 // templates/Testimonial/Testimonial.tsx
-import { useState as useState15, useEffect as useEffect12, useRef as useRef15 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect12, useId as useId2, useRef as useRef15, useState as useState15 } from "react";
 
 // assets/quote-left.webp
 var quote_left_default = "./quote-left-63QMW5NQ.webp";
@@ -5188,9 +5213,181 @@ var quote_left_default = "./quote-left-63QMW5NQ.webp";
 // assets/quote-right.webp
 var quote_right_default = "./quote-right-W6AS4YHN.webp";
 
+// assets/trustpilot-rating-badge.png
+var trustpilot_rating_badge_default = "./trustpilot-rating-badge-D7JOW3KJ.png";
+
 // templates/Testimonial/Testimonial.tsx
 import { jsx as jsx43, jsxs as jsxs39 } from "react/jsx-runtime";
-var Testimonial = ({
+var StarCell = ({ fill }) => {
+  const clipId = useId2();
+  const clamped = Math.max(0, Math.min(1, fill));
+  return /* @__PURE__ */ jsxs39(
+    "svg",
+    {
+      className: "testimonial__tp-star",
+      viewBox: "0 0 96 96",
+      width: "20",
+      height: "20",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx43("rect", { width: "96", height: "96", className: "testimonial__tp-star-bg" }),
+        /* @__PURE__ */ jsx43("clipPath", { id: clipId, children: /* @__PURE__ */ jsx43("rect", { width: 96 * clamped, height: "96" }) }),
+        /* @__PURE__ */ jsx43(
+          "rect",
+          {
+            width: "96",
+            height: "96",
+            className: "testimonial__tp-star-fill",
+            clipPath: `url(#${clipId})`
+          }
+        ),
+        /* @__PURE__ */ jsx43(
+          "path",
+          {
+            d: "M48,64.7L62.6,61l6.1,18.8L48,64.7z M81.6,40.4H55.9L48,16.2l-7.9,24.2H14.4l20.8,15l-7.9,24.2 l20.8-15l12.8-9.2L81.6,40.4L81.6,40.4L81.6,40.4L81.6,40.4z",
+            className: "testimonial__tp-star-glyph"
+          }
+        )
+      ]
+    }
+  );
+};
+var StarRow = ({ rating, size = "sm" }) => {
+  const stars = [0, 1, 2, 3, 4].map((i) => Math.max(0, Math.min(1, rating - i)));
+  return /* @__PURE__ */ jsx43(
+    "span",
+    {
+      className: ["testimonial__tp-stars", `testimonial__tp-stars--${size}`].join(" "),
+      role: "img",
+      "aria-label": `Rated ${rating} out of 5 stars`,
+      children: stars.map((fill, i) => /* @__PURE__ */ jsx43(StarCell, { fill }, i))
+    }
+  );
+};
+var ArrowIcon = ({ direction }) => /* @__PURE__ */ jsx43("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: direction === "prev" ? /* @__PURE__ */ jsx43("path", { d: "M10 3.5 5.5 8l4.5 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) : /* @__PURE__ */ jsx43("path", { d: "M6 3.5 10.5 8 6 12.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var SCROLL_EPS = 4;
+function readScrollState(el) {
+  if (!el) return { canPrev: false, canNext: false };
+  const { scrollLeft, scrollWidth, clientWidth } = el;
+  const maxScroll = scrollWidth - clientWidth;
+  return {
+    canPrev: scrollLeft > SCROLL_EPS,
+    canNext: scrollLeft < maxScroll - SCROLL_EPS
+  };
+}
+var TrustpilotTestimonial = ({
+  title,
+  items,
+  className,
+  trustpilotUrl = "https://www.trustpilot.com/review/deriv.com?utm_medium=trustbox&utm_source=Mini",
+  trustpilotScore = 4.5,
+  ...props
+}) => {
+  const trackRef = useRef15(null);
+  const [canPrev, setCanPrev] = useState15(false);
+  const [canNext, setCanNext] = useState15(true);
+  const syncScrollState = useCallback3(() => {
+    const next = readScrollState(trackRef.current);
+    setCanPrev(next.canPrev);
+    setCanNext(next.canNext);
+  }, []);
+  useEffect12(() => {
+    const el = trackRef.current;
+    if (!el) return;
+    syncScrollState();
+    const ro = new ResizeObserver(() => syncScrollState());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [syncScrollState]);
+  const scrollByCard = (direction) => {
+    const el = trackRef.current;
+    if (!el) return;
+    const card = el.querySelector(".testimonial__tp-card-wrap");
+    const gap = Number.parseFloat(getComputedStyle(el).columnGap || "0") || 0;
+    const delta = card?.offsetWidth ?? el.clientWidth * 0.85;
+    el.scrollBy({ left: direction * (delta + gap), behavior: "smooth" });
+    window.requestAnimationFrame(() => window.setTimeout(syncScrollState, 320));
+  };
+  return /* @__PURE__ */ jsxs39(
+    "section",
+    {
+      className: ["testimonial", "testimonial--trustpilot", className].filter(Boolean).join(" "),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx43("div", { className: "testimonial__tp-head", children: title && /* @__PURE__ */ jsx43("h2", { className: "testimonial__title testimonial__title--trustpilot", children: title }) }),
+        /* @__PURE__ */ jsx43("div", { className: "testimonial__tp-bleed", children: /* @__PURE__ */ jsx43(
+          "div",
+          {
+            ref: trackRef,
+            className: "testimonial__tp-carousel",
+            tabIndex: 0,
+            role: "region",
+            "aria-roledescription": "carousel",
+            "aria-label": "Customer reviews on Trustpilot",
+            onScroll: syncScrollState,
+            children: /* @__PURE__ */ jsx43("div", { className: "testimonial__tp-track", children: items.map((item, i) => /* @__PURE__ */ jsx43("div", { className: "testimonial__tp-card-wrap", children: /* @__PURE__ */ jsxs39(
+              "a",
+              {
+                href: item.reviewUrl ?? trustpilotUrl,
+                className: "testimonial__tp-card",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: [
+                  /* @__PURE__ */ jsx43(StarRow, { rating: item.rating ?? 5, size: "sm" }),
+                  /* @__PURE__ */ jsx43("p", { className: "testimonial__tp-quote", children: item.quote }),
+                  /* @__PURE__ */ jsx43("p", { className: "testimonial__tp-author", children: item.authorName })
+                ]
+              }
+            ) }, i)) })
+          }
+        ) }),
+        /* @__PURE__ */ jsx43("div", { className: "testimonial__tp-foot", children: /* @__PURE__ */ jsxs39("div", { className: "testimonial__tp-footer", children: [
+          /* @__PURE__ */ jsx43("div", { className: "testimonial__tp-trust", children: /* @__PURE__ */ jsx43(
+            "a",
+            {
+              href: trustpilotUrl,
+              className: "testimonial__tp-badge",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              "aria-label": `Deriv on Trustpilot \u2014 rated ${trustpilotScore} out of 5`,
+              children: /* @__PURE__ */ jsx43(
+                "img",
+                {
+                  src: trustpilot_rating_badge_default,
+                  alt: "",
+                  className: "testimonial__tp-badge-img"
+                }
+              )
+            }
+          ) }),
+          items.length > 1 && (canPrev || canNext) && /* @__PURE__ */ jsxs39("div", { className: "testimonial__tp-nav", children: [
+            canPrev && /* @__PURE__ */ jsx43(
+              "button",
+              {
+                type: "button",
+                className: "testimonial__tp-nav-btn",
+                "aria-label": "Show previous testimonials",
+                onClick: () => scrollByCard(-1),
+                children: /* @__PURE__ */ jsx43(ArrowIcon, { direction: "prev" })
+              }
+            ),
+            canNext && /* @__PURE__ */ jsx43(
+              "button",
+              {
+                type: "button",
+                className: "testimonial__tp-nav-btn",
+                "aria-label": "Show next testimonials",
+                onClick: () => scrollByCard(1),
+                children: /* @__PURE__ */ jsx43(ArrowIcon, { direction: "next" })
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  );
+};
+var DefaultTestimonial = ({
   title,
   items,
   className,
@@ -5225,7 +5422,6 @@ var Testimonial = ({
       if (autoRef.current) clearTimeout(autoRef.current);
     };
   }, [activeIndex, items.length]);
-  if (!items || items.length === 0) return null;
   return /* @__PURE__ */ jsx43(
     "section",
     {
@@ -5301,6 +5497,13 @@ var Testimonial = ({
     }
   );
 };
+var Testimonial = (props) => {
+  if (!props.items || props.items.length === 0) return null;
+  if (props.variant === "trustpilot") {
+    return /* @__PURE__ */ jsx43(TrustpilotTestimonial, { ...props });
+  }
+  return /* @__PURE__ */ jsx43(DefaultTestimonial, { ...props });
+};
 
 // templates/ArticleHero/ArticleHero.tsx
 import { jsx as jsx44, jsxs as jsxs40 } from "react/jsx-runtime";
@@ -5583,7 +5786,7 @@ var ArticleSection = ({
 };
 
 // templates/CoralBanner/CoralBanner.tsx
-import { useCallback as useCallback3, useEffect as useEffect13, useRef as useRef16, useState as useState16 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect13, useRef as useRef16, useState as useState16 } from "react";
 import { jsx as jsx46, jsxs as jsxs42 } from "react/jsx-runtime";
 var DEFAULT_SLIDES = [
   {
@@ -5700,7 +5903,7 @@ var CoralBanner = ({
   const [activeIndex, setActiveIndex] = useState16(0);
   const autoplayTimer = useRef16(null);
   const dragState = useRef16(null);
-  const goTo = useCallback3(
+  const goTo = useCallback4(
     (index) => {
       if (count <= 1) return;
       const next = infinite ? (index % count + count) % count : Math.max(0, Math.min(index, count - 1));
@@ -5708,8 +5911,8 @@ var CoralBanner = ({
     },
     [count, infinite]
   );
-  const goNext = useCallback3(() => goTo(activeIndex + 1), [activeIndex, goTo]);
-  const goPrev = useCallback3(() => goTo(activeIndex - 1), [activeIndex, goTo]);
+  const goNext = useCallback4(() => goTo(activeIndex + 1), [activeIndex, goTo]);
+  const goPrev = useCallback4(() => goTo(activeIndex - 1), [activeIndex, goTo]);
   const resetAutoplay = () => {
     if (autoplayTimer.current) clearTimeout(autoplayTimer.current);
   };
@@ -5910,11 +6113,212 @@ var FeatureAwards = ({
   );
 };
 
-// templates/HelpCentreCategories/HelpCentreCategories.tsx
-import { Fragment as Fragment7, jsx as jsx48, jsxs as jsxs44 } from "react/jsx-runtime";
+// templates/FeatureBlog/FeatureBlog.tsx
+import { jsx as jsx48, jsxs as jsxs44 } from "react/jsx-runtime";
 var externalLinkRel2 = (href) => href && /^https?:\/\//i.test(href) ? "noopener noreferrer" : void 0;
-var CategoryTileContent = ({ category }) => /* @__PURE__ */ jsxs44(Fragment7, { children: [
-  category.icon && /* @__PURE__ */ jsx48("span", { className: "hcc-tile-icon", children: typeof category.icon === "string" ? /* @__PURE__ */ jsx48(
+var FEATURE_BLOG_TEXT_CONTENT = {
+  title: "Deriv press releases",
+  linkText: "See all press releases"
+};
+var PostCard = ({ post, index }) => {
+  const tags = [post.date, post.category].filter((value) => Boolean(value)).map((label) => ({ label }));
+  const card = /* @__PURE__ */ jsx48(
+    Card,
+    {
+      hideAvatar: true,
+      layout: "vertical",
+      showCopyLink: false,
+      summary: post.summary,
+      tags,
+      thumbnail: post.thumbnail,
+      thumbnailAlt: post.thumbnailAlt,
+      title: post.title,
+      type: "article",
+      variant: "thumbnail"
+    }
+  );
+  if (post.href) {
+    return /* @__PURE__ */ jsx48(
+      "a",
+      {
+        className: "fb-cardLink",
+        href: post.href,
+        rel: externalLinkRel2(post.href),
+        children: card
+      },
+      `${post.title}-${index}`
+    );
+  }
+  if (post.onClick) {
+    return /* @__PURE__ */ jsx48(
+      "button",
+      {
+        className: "fb-cardLink fb-cardButton",
+        onClick: post.onClick,
+        type: "button",
+        children: card
+      },
+      `${post.title}-${index}`
+    );
+  }
+  return /* @__PURE__ */ jsx48("div", { children: card }, `${post.title}-${index}`);
+};
+var FeatureBlog = ({
+  title = FEATURE_BLOG_TEXT_CONTENT.title,
+  posts,
+  showLink = true,
+  linkText = FEATURE_BLOG_TEXT_CONTENT.linkText,
+  linkHref,
+  onLinkClick,
+  className,
+  ...props
+}) => {
+  if (!posts || posts.length === 0) return null;
+  return /* @__PURE__ */ jsx48("section", { className: ["fb-section", className ?? ""].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ jsxs44("div", { className: "fb-container", children: [
+    title && /* @__PURE__ */ jsx48("h2", { className: "fb-title", children: title }),
+    /* @__PURE__ */ jsx48("div", { className: "fb-grid", children: posts.map((post, index) => /* @__PURE__ */ jsx48(PostCard, { index, post }, `${post.title}-${index}`)) }),
+    showLink && /* @__PURE__ */ jsx48("div", { className: "fb-linkWrap", children: /* @__PURE__ */ jsx48(
+      Link,
+      {
+        colorScheme: "coral",
+        href: linkHref,
+        label: linkText,
+        rel: externalLinkRel2(linkHref),
+        onClick: onLinkClick
+      }
+    ) })
+  ] }) });
+};
+
+// templates/FeatureBlogCategories/FeatureBlogCategories.tsx
+import { useMemo as useMemo3, useState as useState17 } from "react";
+import { jsx as jsx49, jsxs as jsxs45 } from "react/jsx-runtime";
+var isExternalUrl = (href) => Boolean(href && /^https?:\/\//i.test(href));
+var FEATURE_BLOG_CATEGORIES_TEXT_CONTENT = {
+  title: "Deriv press releases",
+  allCategoryId: "all",
+  allCategoryLabel: "View all",
+  searchPlaceholder: "Search",
+  emptyStateText: "Sorry, we couldn't find any results matching."
+};
+var PostCard2 = ({
+  post,
+  categoryLabel
+}) => {
+  const tags = [post.date, categoryLabel].filter((value) => Boolean(value)).map((label) => ({ label }));
+  const card = /* @__PURE__ */ jsx49(
+    Card,
+    {
+      hideAvatar: true,
+      layout: "vertical",
+      showCopyLink: false,
+      summary: post.summary,
+      tags,
+      thumbnail: post.thumbnail,
+      thumbnailAlt: post.thumbnailAlt,
+      title: post.title,
+      type: "article",
+      variant: "thumbnail"
+    }
+  );
+  if (post.href) {
+    const external = isExternalUrl(post.href);
+    return /* @__PURE__ */ jsx49(
+      "a",
+      {
+        className: "fbc-cardLink",
+        href: post.href,
+        rel: external ? "noopener noreferrer" : void 0,
+        target: external ? "_blank" : void 0,
+        children: card
+      }
+    );
+  }
+  if (post.onClick) {
+    return /* @__PURE__ */ jsx49("button", { className: "fbc-cardLink fbc-cardButton", onClick: post.onClick, type: "button", children: card });
+  }
+  return /* @__PURE__ */ jsx49("div", { children: card });
+};
+var FeatureBlogCategories = ({
+  title = FEATURE_BLOG_CATEGORIES_TEXT_CONTENT.title,
+  categories,
+  allCategoryId = FEATURE_BLOG_CATEGORIES_TEXT_CONTENT.allCategoryId,
+  allCategoryLabel = FEATURE_BLOG_CATEGORIES_TEXT_CONTENT.allCategoryLabel,
+  activeCategoryId,
+  defaultActiveCategoryId,
+  onCategoryChange,
+  posts,
+  searchPlaceholder = FEATURE_BLOG_CATEGORIES_TEXT_CONTENT.searchPlaceholder,
+  searchAriaLabel,
+  onSearchChange,
+  emptyStateText = FEATURE_BLOG_CATEGORIES_TEXT_CONTENT.emptyStateText,
+  className,
+  ...props
+}) => {
+  const [search, setSearch] = useState17("");
+  const [internalActiveId, setInternalActiveId] = useState17(defaultActiveCategoryId ?? allCategoryId);
+  const isControlled = activeCategoryId !== void 0;
+  const activeId = isControlled ? activeCategoryId : internalActiveId;
+  const tabs = useMemo3(
+    () => [{ id: allCategoryId, label: allCategoryLabel }, ...categories],
+    [allCategoryId, allCategoryLabel, categories]
+  );
+  const categoryLabelById = useMemo3(() => {
+    const map = /* @__PURE__ */ new Map();
+    categories.forEach((category) => map.set(category.id, category.label));
+    return map;
+  }, [categories]);
+  const filteredPosts = useMemo3(() => {
+    const query = search.trim().toLowerCase();
+    return posts.filter((post) => {
+      const matchesCategory = activeId === allCategoryId || post.category === activeId;
+      if (!matchesCategory) return false;
+      if (!query) return true;
+      return post.title.toLowerCase().includes(query) || post.summary.toLowerCase().includes(query);
+    });
+  }, [posts, activeId, allCategoryId, search]);
+  const handleTabChange = (id) => {
+    if (!isControlled) setInternalActiveId(id);
+    onCategoryChange?.(id);
+  };
+  const handleSearchChange = (e) => {
+    setSearch(e.target.value);
+    onSearchChange?.(e.target.value);
+  };
+  const handleSearchClear = () => {
+    setSearch("");
+    onSearchChange?.("");
+  };
+  return /* @__PURE__ */ jsx49("section", { className: ["fbc-section", className ?? ""].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ jsxs45("div", { className: "fbc-container", children: [
+    title && /* @__PURE__ */ jsx49("h2", { className: "fbc-title", children: title }),
+    /* @__PURE__ */ jsx49("div", { className: "fbc-searchWrap", children: /* @__PURE__ */ jsx49(
+      SearchField,
+      {
+        "aria-label": searchAriaLabel ?? searchPlaceholder,
+        onChange: handleSearchChange,
+        onClear: handleSearchClear,
+        placeholder: searchPlaceholder,
+        value: search,
+        variant: "outline"
+      }
+    ) }),
+    /* @__PURE__ */ jsx49("div", { className: "fbc-tabsWrap", children: /* @__PURE__ */ jsx49(Tabs, { activeId: activeId ?? allCategoryId, items: tabs, onChange: handleTabChange }) }),
+    filteredPosts.length > 0 ? /* @__PURE__ */ jsx49("div", { className: "fbc-grid", children: filteredPosts.map((post, index) => /* @__PURE__ */ jsx49(
+      PostCard2,
+      {
+        categoryLabel: post.categoryLabel ?? categoryLabelById.get(post.category),
+        post
+      },
+      `${post.title}-${index}`
+    )) }) : /* @__PURE__ */ jsx49("p", { className: "fbc-emptyState", children: emptyStateText })
+  ] }) });
+};
+
+// templates/HelpCentreCategories/HelpCentreCategories.tsx
+import { Fragment as Fragment7, jsx as jsx50, jsxs as jsxs46 } from "react/jsx-runtime";
+var externalLinkRel3 = (href) => href && /^https?:\/\//i.test(href) ? "noopener noreferrer" : void 0;
+var CategoryTileContent = ({ category }) => /* @__PURE__ */ jsxs46(Fragment7, { children: [
+  category.icon && /* @__PURE__ */ jsx50("span", { className: "hcc-tile-icon", children: typeof category.icon === "string" ? /* @__PURE__ */ jsx50(
     "img",
     {
       alt: category.iconAlt ?? "",
@@ -5926,22 +6330,22 @@ var CategoryTileContent = ({ category }) => /* @__PURE__ */ jsxs44(Fragment7, {
       width: 48
     }
   ) : category.icon }),
-  /* @__PURE__ */ jsx48("span", { className: "hcc-tile-title", children: category.title })
+  /* @__PURE__ */ jsx50("span", { className: "hcc-tile-title", children: category.title })
 ] });
 var CategoryTile = ({ category }) => {
   if (category.href) {
-    return /* @__PURE__ */ jsx48(
+    return /* @__PURE__ */ jsx50(
       "a",
       {
         className: "hcc-tile",
         href: category.href,
         onClick: category.onClick,
-        rel: externalLinkRel2(category.href),
-        children: /* @__PURE__ */ jsx48(CategoryTileContent, { category })
+        rel: externalLinkRel3(category.href),
+        children: /* @__PURE__ */ jsx50(CategoryTileContent, { category })
       }
     );
   }
-  return /* @__PURE__ */ jsx48("button", { className: "hcc-tile", onClick: category.onClick, type: "button", children: /* @__PURE__ */ jsx48(CategoryTileContent, { category }) });
+  return /* @__PURE__ */ jsx50("button", { className: "hcc-tile", onClick: category.onClick, type: "button", children: /* @__PURE__ */ jsx50(CategoryTileContent, { category }) });
 };
 var getColumnCount = (categoryCount) => Math.max(1, Math.min(categoryCount, 3));
 var HelpCentreCategories = ({
@@ -5950,24 +6354,24 @@ var HelpCentreCategories = ({
   categories
 }) => {
   const columnCount = getColumnCount(categories.length);
-  return /* @__PURE__ */ jsx48("section", { className: "hcc-section", children: /* @__PURE__ */ jsxs44("div", { className: "hcc-container", children: [
-    (sectionTitle || sectionDescription) && /* @__PURE__ */ jsxs44("div", { className: "hcc-header", children: [
-      sectionTitle && /* @__PURE__ */ jsx48("h2", { className: "hcc-sectionTitle", children: sectionTitle }),
-      sectionDescription && /* @__PURE__ */ jsx48("p", { className: "hcc-sectionDescription", children: sectionDescription })
+  return /* @__PURE__ */ jsx50("section", { className: "hcc-section", children: /* @__PURE__ */ jsxs46("div", { className: "hcc-container", children: [
+    (sectionTitle || sectionDescription) && /* @__PURE__ */ jsxs46("div", { className: "hcc-header", children: [
+      sectionTitle && /* @__PURE__ */ jsx50("h2", { className: "hcc-sectionTitle", children: sectionTitle }),
+      sectionDescription && /* @__PURE__ */ jsx50("p", { className: "hcc-sectionDescription", children: sectionDescription })
     ] }),
-    /* @__PURE__ */ jsx48("div", { className: `hcc-grid hcc-grid--${columnCount}`, role: "list", children: categories.map((category, index) => /* @__PURE__ */ jsx48("div", { className: "hcc-gridItem", role: "listitem", children: /* @__PURE__ */ jsx48(CategoryTile, { category }) }, category.id ?? `${category.title}-${index}`)) })
+    /* @__PURE__ */ jsx50("div", { className: `hcc-grid hcc-grid--${columnCount}`, role: "list", children: categories.map((category, index) => /* @__PURE__ */ jsx50("div", { className: "hcc-gridItem", role: "listitem", children: /* @__PURE__ */ jsx50(CategoryTile, { category }) }, category.id ?? `${category.title}-${index}`)) })
   ] }) });
 };
 
 // templates/HelpCentreSubCategories/HelpCentreSubCategories.tsx
-import { useMemo as useMemo3, useState as useState17 } from "react";
-import { jsx as jsx49, jsxs as jsxs45 } from "react/jsx-runtime";
-var externalLinkRel3 = (href) => href && /^https?:\/\//i.test(href) ? "noopener noreferrer" : void 0;
+import { useMemo as useMemo4, useState as useState18 } from "react";
+import { jsx as jsx51, jsxs as jsxs47 } from "react/jsx-runtime";
+var externalLinkRel4 = (href) => href && /^https?:\/\//i.test(href) ? "noopener noreferrer" : void 0;
 var QuestionCard = ({ item }) => {
   if (item.href) {
-    return /* @__PURE__ */ jsx49("a", { className: "hcsc-card", href: item.href, onClick: item.onClick, rel: externalLinkRel3(item.href), children: /* @__PURE__ */ jsx49("span", { className: "hcsc-card-text", children: item.question }) });
+    return /* @__PURE__ */ jsx51("a", { className: "hcsc-card", href: item.href, onClick: item.onClick, rel: externalLinkRel4(item.href), children: /* @__PURE__ */ jsx51("span", { className: "hcsc-card-text", children: item.question }) });
   }
-  return /* @__PURE__ */ jsx49("button", { className: "hcsc-card", onClick: item.onClick, type: "button", children: /* @__PURE__ */ jsx49("span", { className: "hcsc-card-text", children: item.question }) });
+  return /* @__PURE__ */ jsx51("button", { className: "hcsc-card", onClick: item.onClick, type: "button", children: /* @__PURE__ */ jsx51("span", { className: "hcsc-card-text", children: item.question }) });
 };
 var HelpCentreSubCategories = ({
   title,
@@ -5977,8 +6381,8 @@ var HelpCentreSubCategories = ({
   noResultsText = 'No results found for "{query}"',
   onSearchChange
 }) => {
-  const [search, setSearch] = useState17("");
-  const filtered = useMemo3(() => {
+  const [search, setSearch] = useState18("");
+  const filtered = useMemo4(() => {
     const q = search.trim().toLowerCase();
     if (!q) return items;
     return items.filter((item) => item.question.toLowerCase().includes(q));
@@ -5991,9 +6395,9 @@ var HelpCentreSubCategories = ({
     setSearch("");
     onSearchChange?.("");
   };
-  return /* @__PURE__ */ jsx49("section", { className: "hcsc-section", children: /* @__PURE__ */ jsxs45("div", { className: "hcsc-container", children: [
-    /* @__PURE__ */ jsx49("h1", { className: "hcsc-title", children: title }),
-    /* @__PURE__ */ jsx49("div", { className: "hcsc-searchWrap", children: /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx51("section", { className: "hcsc-section", children: /* @__PURE__ */ jsxs47("div", { className: "hcsc-container", children: [
+    /* @__PURE__ */ jsx51("h1", { className: "hcsc-title", children: title }),
+    /* @__PURE__ */ jsx51("div", { className: "hcsc-searchWrap", children: /* @__PURE__ */ jsx51(
       SearchField,
       {
         "aria-label": searchAriaLabel ?? searchPlaceholder,
@@ -6004,25 +6408,25 @@ var HelpCentreSubCategories = ({
         variant: "outline"
       }
     ) }),
-    filtered.length > 0 ? /* @__PURE__ */ jsx49("div", { className: "hcsc-grid", role: "list", children: filtered.map((item, index) => /* @__PURE__ */ jsx49("div", { className: "hcsc-gridItem", role: "listitem", children: /* @__PURE__ */ jsx49(QuestionCard, { item }) }, item.id ?? `${item.question}-${index}`)) }) : /* @__PURE__ */ jsx49("p", { className: "hcsc-noResults", children: noResultsText.replace("{query}", search) })
+    filtered.length > 0 ? /* @__PURE__ */ jsx51("div", { className: "hcsc-grid", role: "list", children: filtered.map((item, index) => /* @__PURE__ */ jsx51("div", { className: "hcsc-gridItem", role: "listitem", children: /* @__PURE__ */ jsx51(QuestionCard, { item }) }, item.id ?? `${item.question}-${index}`)) }) : /* @__PURE__ */ jsx51("p", { className: "hcsc-noResults", children: noResultsText.replace("{query}", search) })
   ] }) });
 };
 
 // templates/HelpCenterPage/HelpCenterPage.tsx
-import { useMemo as useMemo4, useState as useState18 } from "react";
-import { jsx as jsx50, jsxs as jsxs46 } from "react/jsx-runtime";
-var externalLinkRel4 = (href) => href && /^https?:\/\//i.test(href) ? "noopener noreferrer" : void 0;
-var ChevronDownIcon5 = () => /* @__PURE__ */ jsx50("svg", { "aria-hidden": "true", fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx50("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) });
+import { useMemo as useMemo5, useState as useState19 } from "react";
+import { jsx as jsx52, jsxs as jsxs48 } from "react/jsx-runtime";
+var externalLinkRel5 = (href) => href && /^https?:\/\//i.test(href) ? "noopener noreferrer" : void 0;
+var ChevronDownIcon5 = () => /* @__PURE__ */ jsx52("svg", { "aria-hidden": "true", fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx52("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) });
 var renderBlock = (block, index) => {
   if (block.type === "heading") {
     const HeadingTag = block.level === 3 ? "h3" : "h2";
-    return /* @__PURE__ */ jsx50(HeadingTag, { className: "hcp-blockHeading", children: block.text }, index);
+    return /* @__PURE__ */ jsx52(HeadingTag, { className: "hcp-blockHeading", children: block.text }, index);
   }
   if (block.type === "list") {
     const ListTag = block.ordered ? "ol" : "ul";
-    return /* @__PURE__ */ jsx50(ListTag, { className: "hcp-blockList", children: (block.items ?? []).map((item, i) => /* @__PURE__ */ jsx50("li", { className: "hcp-blockListItem", children: item }, i)) }, index);
+    return /* @__PURE__ */ jsx52(ListTag, { className: "hcp-blockList", children: (block.items ?? []).map((item, i) => /* @__PURE__ */ jsx52("li", { className: "hcp-blockListItem", children: item }, i)) }, index);
   }
-  return /* @__PURE__ */ jsx50("p", { className: "hcp-blockParagraph", children: block.text }, index);
+  return /* @__PURE__ */ jsx52("p", { className: "hcp-blockParagraph", children: block.text }, index);
 };
 var QuestionRow = ({
   item,
@@ -6031,7 +6435,7 @@ var QuestionRow = ({
 }) => {
   const rowClass = ["hcp-row", isActive ? "hcp-row--active" : ""].filter(Boolean).join(" ");
   if (item.href) {
-    return /* @__PURE__ */ jsx50(
+    return /* @__PURE__ */ jsx52(
       "a",
       {
         "aria-current": isActive ? "page" : void 0,
@@ -6041,12 +6445,12 @@ var QuestionRow = ({
           item.onClick?.();
           onSelect(item);
         },
-        rel: externalLinkRel4(item.href),
-        children: /* @__PURE__ */ jsx50("span", { className: "hcp-rowText", children: item.question })
+        rel: externalLinkRel5(item.href),
+        children: /* @__PURE__ */ jsx52("span", { className: "hcp-rowText", children: item.question })
       }
     );
   }
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx52(
     "button",
     {
       "aria-current": isActive ? "page" : void 0,
@@ -6056,7 +6460,7 @@ var QuestionRow = ({
         onSelect(item);
       },
       type: "button",
-      children: /* @__PURE__ */ jsx50("span", { className: "hcp-rowText", children: item.question })
+      children: /* @__PURE__ */ jsx52("span", { className: "hcp-rowText", children: item.question })
     }
   );
 };
@@ -6075,13 +6479,13 @@ var HelpCenterPage = ({
   articlesSheetTitle = "Articles in this section",
   className
 }) => {
-  const [search, setSearch] = useState18("");
-  const [internalActiveId, setInternalActiveId] = useState18(defaultActiveQuestionId ?? questions[0]?.id);
-  const [sheetOpen, setSheetOpen] = useState18(false);
+  const [search, setSearch] = useState19("");
+  const [internalActiveId, setInternalActiveId] = useState19(defaultActiveQuestionId ?? questions[0]?.id);
+  const [sheetOpen, setSheetOpen] = useState19(false);
   const isControlled = activeQuestionId !== void 0;
   const activeId = isControlled ? activeQuestionId : internalActiveId;
   const activeItem = questions.find((item) => item.id === activeId);
-  const filtered = useMemo4(() => {
+  const filtered = useMemo5(() => {
     const q = search.trim().toLowerCase();
     if (!q) return questions;
     return questions.filter((item) => item.question.toLowerCase().includes(q));
@@ -6102,9 +6506,9 @@ var HelpCenterPage = ({
   const resolvedTitle = activeItem?.content ? activeItem.contentTitle ?? contentTitle : contentTitle;
   const resolvedContent = activeItem?.content ?? content;
   const rootClass = ["hcp-section", className ?? ""].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs46("section", { className: rootClass, children: [
-    /* @__PURE__ */ jsxs46("div", { className: "hcp-container", children: [
-      /* @__PURE__ */ jsx50("div", { className: "hcp-searchWrap", children: /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsxs48("section", { className: rootClass, children: [
+    /* @__PURE__ */ jsxs48("div", { className: "hcp-container", children: [
+      /* @__PURE__ */ jsx52("div", { className: "hcp-searchWrap", children: /* @__PURE__ */ jsx52(
         SearchField,
         {
           "aria-label": searchAriaLabel ?? searchPlaceholder,
@@ -6115,12 +6519,12 @@ var HelpCenterPage = ({
           variant: "outline"
         }
       ) }),
-      /* @__PURE__ */ jsxs46("div", { className: "hcp-body", children: [
-        /* @__PURE__ */ jsx50("aside", { className: "hcp-sidebar", children: /* @__PURE__ */ jsxs46("div", { className: "hcp-sidebarCard", children: [
-          /* @__PURE__ */ jsx50("h2", { className: "hcp-sidebarTitle", children: categoryTitle }),
-          filtered.length > 0 ? /* @__PURE__ */ jsx50("div", { className: "hcp-list", role: "list", children: filtered.map((item) => /* @__PURE__ */ jsx50("div", { className: "hcp-listItem", role: "listitem", children: /* @__PURE__ */ jsx50(QuestionRow, { isActive: item.id === activeId, item, onSelect: handleSelect }) }, item.id)) }) : /* @__PURE__ */ jsx50("p", { className: "hcp-noResults", children: searchNoResultsText.replace("{query}", search) })
+      /* @__PURE__ */ jsxs48("div", { className: "hcp-body", children: [
+        /* @__PURE__ */ jsx52("aside", { className: "hcp-sidebar", children: /* @__PURE__ */ jsxs48("div", { className: "hcp-sidebarCard", children: [
+          /* @__PURE__ */ jsx52("h2", { className: "hcp-sidebarTitle", children: categoryTitle }),
+          filtered.length > 0 ? /* @__PURE__ */ jsx52("div", { className: "hcp-list", role: "list", children: filtered.map((item) => /* @__PURE__ */ jsx52("div", { className: "hcp-listItem", role: "listitem", children: /* @__PURE__ */ jsx52(QuestionRow, { isActive: item.id === activeId, item, onSelect: handleSelect }) }, item.id)) }) : /* @__PURE__ */ jsx52("p", { className: "hcp-noResults", children: searchNoResultsText.replace("{query}", search) })
         ] }) }),
-        /* @__PURE__ */ jsxs46(
+        /* @__PURE__ */ jsxs48(
           "button",
           {
             "aria-expanded": sheetOpen,
@@ -6128,20 +6532,439 @@ var HelpCenterPage = ({
             onClick: () => setSheetOpen(true),
             type: "button",
             children: [
-              /* @__PURE__ */ jsx50("span", { className: "hcp-mobileToggleLabel", children: categoryTitle }),
-              /* @__PURE__ */ jsx50("span", { className: "hcp-mobileToggleChevron", children: /* @__PURE__ */ jsx50(ChevronDownIcon5, {}) })
+              /* @__PURE__ */ jsx52("span", { className: "hcp-mobileToggleLabel", children: categoryTitle }),
+              /* @__PURE__ */ jsx52("span", { className: "hcp-mobileToggleChevron", children: /* @__PURE__ */ jsx52(ChevronDownIcon5, {}) })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs46("div", { className: "hcp-content", children: [
-          /* @__PURE__ */ jsx50("h1", { className: "hcp-contentTitle", children: resolvedTitle }),
-          /* @__PURE__ */ jsx50("div", { className: "hcp-contentBody", children: resolvedContent.map(renderBlock) })
+        /* @__PURE__ */ jsxs48("div", { className: "hcp-content", children: [
+          /* @__PURE__ */ jsx52("h1", { className: "hcp-contentTitle", children: resolvedTitle }),
+          /* @__PURE__ */ jsx52("div", { className: "hcp-contentBody", children: resolvedContent.map(renderBlock) })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx50(BottomSheet, { onClose: () => setSheetOpen(false), open: sheetOpen, title: articlesSheetTitle, children: filtered.length > 0 ? /* @__PURE__ */ jsx50("div", { className: "hcp-sheetList", role: "list", children: filtered.map((item) => /* @__PURE__ */ jsx50("div", { className: "hcp-sheetItem", role: "listitem", children: /* @__PURE__ */ jsx50(QuestionRow, { isActive: item.id === activeId, item, onSelect: handleSelect }) }, item.id)) }) : /* @__PURE__ */ jsx50("p", { className: "hcp-noResults", children: searchNoResultsText.replace("{query}", search) }) })
+    /* @__PURE__ */ jsx52(BottomSheet, { onClose: () => setSheetOpen(false), open: sheetOpen, title: articlesSheetTitle, children: filtered.length > 0 ? /* @__PURE__ */ jsx52("div", { className: "hcp-sheetList", role: "list", children: filtered.map((item) => /* @__PURE__ */ jsx52("div", { className: "hcp-sheetItem", role: "listitem", children: /* @__PURE__ */ jsx52(QuestionRow, { isActive: item.id === activeId, item, onSelect: handleSelect }) }, item.id)) }) : /* @__PURE__ */ jsx52("p", { className: "hcp-noResults", children: searchNoResultsText.replace("{query}", search) }) })
   ] });
 };
+
+// templates/FeatureBlogPage/FeatureBlogPage.tsx
+import { useEffect as useEffect14, useMemo as useMemo6, useState as useState20 } from "react";
+
+// assets/share-link.png
+var share_link_default = "./share-link-QGD6KIDA.png";
+
+// assets/share-facebook.png
+var share_facebook_default = "./share-facebook-3B3NOC5Q.png";
+
+// assets/share-x.png
+var share_x_default = "./share-x-UTEBBL73.png";
+
+// assets/share-telegram.png
+var share_telegram_default = "./share-telegram-QRXGSHQT.png";
+
+// assets/share-linkedin.png
+var share_linkedin_default = "./share-linkedin-UCIII3JU.png";
+
+// templates/FeatureBlogPage/FeatureBlogPage.tsx
+import { jsx as jsx53, jsxs as jsxs49 } from "react/jsx-runtime";
+var ChevronDownIcon6 = () => /* @__PURE__ */ jsx53("svg", { "aria-hidden": "true", fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx53("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) });
+var CheckIcon3 = () => /* @__PURE__ */ jsx53("svg", { "aria-hidden": "true", fill: "none", height: "18", viewBox: "0 0 16 16", width: "18", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx53("path", { d: "M3.5 8.5l3 3 6-7", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.6" }) });
+var SHARE_ICONS = {
+  facebook: { src: share_facebook_default, alt: "Facebook" },
+  twitter: { src: share_x_default, alt: "X" },
+  linkedin: { src: share_linkedin_default, alt: "LinkedIn" },
+  telegram: { src: share_telegram_default, alt: "Telegram" }
+};
+var LABELS = {
+  facebook: "Share on Facebook",
+  twitter: "Share on X",
+  linkedin: "Share on LinkedIn",
+  telegram: "Share on Telegram"
+};
+var slugify = (text) => text.toLowerCase().trim().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+function shareHref(platform, url, text) {
+  const encodedUrl = encodeURIComponent(url);
+  const encodedText = encodeURIComponent(text);
+  switch (platform) {
+    case "facebook":
+      return `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`;
+    case "twitter":
+      return `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedText}`;
+    case "linkedin":
+      return `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`;
+    case "telegram":
+      return `https://t.me/share/url?url=${encodedUrl}&text=${encodedText}`;
+  }
+}
+var TocCard = ({
+  tocTitle,
+  headings,
+  activeId,
+  defaultOpen,
+  onNavigate,
+  idSuffix,
+  collapsible
+}) => {
+  const [open, setOpen] = useState20(defaultOpen);
+  const panelId = `fbp-toc-panel-${idSuffix}`;
+  const isOpen = collapsible ? open : true;
+  const list = /* @__PURE__ */ jsx53("ol", { className: "fbp-tocList", id: panelId, children: headings.map((heading) => /* @__PURE__ */ jsx53("li", { className: "fbp-tocItem", children: /* @__PURE__ */ jsx53(
+    "a",
+    {
+      "aria-current": activeId === heading.id ? "location" : void 0,
+      className: ["fbp-tocLink", activeId === heading.id ? "fbp-tocLink--active" : ""].filter(Boolean).join(" "),
+      href: `#${heading.id}`,
+      onClick: (e) => {
+        e.preventDefault();
+        onNavigate(heading.id);
+      },
+      children: heading.text
+    }
+  ) }, heading.id)) });
+  return /* @__PURE__ */ jsxs49("div", { className: "fbp-tocCard", children: [
+    collapsible ? /* @__PURE__ */ jsxs49(
+      "button",
+      {
+        "aria-controls": panelId,
+        "aria-expanded": isOpen,
+        className: "fbp-tocHeader fbp-tocHeader--button",
+        onClick: () => setOpen((prev) => !prev),
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx53("span", { className: "fbp-tocTitle", children: tocTitle }),
+          /* @__PURE__ */ jsx53("span", { className: ["fbp-tocChevron", isOpen ? "fbp-tocChevron--open" : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx53(ChevronDownIcon6, {}) })
+        ]
+      }
+    ) : /* @__PURE__ */ jsx53("div", { className: "fbp-tocHeader", children: /* @__PURE__ */ jsx53("span", { className: "fbp-tocTitle", children: tocTitle }) }),
+    isOpen && list
+  ] });
+};
+var ShareRow = ({
+  shareTitle,
+  shareUrl,
+  shareText,
+  platforms,
+  onShare,
+  copiedLabel
+}) => {
+  const [copied, setCopied] = useState20(false);
+  const handleCopy = async () => {
+    onShare?.("copy");
+    try {
+      if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(shareUrl);
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 2e3);
+      }
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs49("div", { className: "fbp-shareCard", children: [
+    /* @__PURE__ */ jsx53("span", { className: "fbp-shareTitle", children: shareTitle }),
+    /* @__PURE__ */ jsxs49("div", { className: "fbp-shareIcons", children: [
+      /* @__PURE__ */ jsx53(
+        "button",
+        {
+          "aria-label": copied ? copiedLabel : "Copy link",
+          className: "fbp-shareIcon",
+          onClick: handleCopy,
+          type: "button",
+          children: copied ? /* @__PURE__ */ jsx53(CheckIcon3, {}) : /* @__PURE__ */ jsx53("img", { alt: "", className: "fbp-shareIconImg", src: share_link_default })
+        }
+      ),
+      platforms.map((platform) => {
+        const icon = SHARE_ICONS[platform];
+        return /* @__PURE__ */ jsx53(
+          "a",
+          {
+            "aria-label": LABELS[platform],
+            className: "fbp-shareIcon",
+            href: shareHref(platform, shareUrl, shareText),
+            onClick: () => onShare?.(platform),
+            rel: "noopener noreferrer",
+            target: "_blank",
+            children: /* @__PURE__ */ jsx53("img", { alt: "", className: "fbp-shareIconImg", src: icon.src })
+          },
+          platform
+        );
+      })
+    ] })
+  ] });
+};
+var renderBlock2 = (block, index, headingIds) => {
+  if (block.type === "heading") {
+    const level = block.level ?? 2;
+    const HeadingTag = level === 3 ? "h3" : "h2";
+    const headingClass = level === 3 ? "fbp-blockHeading fbp-blockHeading--h3" : "fbp-blockHeading";
+    return /* @__PURE__ */ jsx53(HeadingTag, { className: headingClass, id: headingIds.get(index), children: block.text }, index);
+  }
+  if (block.type === "list") {
+    const ListTag = block.ordered ? "ol" : "ul";
+    return /* @__PURE__ */ jsx53(ListTag, { className: "fbp-blockList", children: (block.items ?? []).map((item, i) => /* @__PURE__ */ jsx53("li", { className: "fbp-blockListItem", children: item }, i)) }, index);
+  }
+  if (block.type === "quote") {
+    return /* @__PURE__ */ jsxs49("blockquote", { className: "fbp-blockQuote", children: [
+      /* @__PURE__ */ jsx53("p", { className: "fbp-blockQuoteText", children: block.text }),
+      block.cite && /* @__PURE__ */ jsx53("cite", { className: "fbp-blockQuoteCite", children: block.cite })
+    ] }, index);
+  }
+  if (block.type === "image") {
+    return /* @__PURE__ */ jsxs49("figure", { className: "fbp-blockImageWrap", children: [
+      /* @__PURE__ */ jsx53("img", { alt: block.imageAlt ?? "", className: "fbp-blockImage", src: block.image }),
+      block.caption && /* @__PURE__ */ jsx53("figcaption", { className: "fbp-blockCaption", children: block.caption })
+    ] }, index);
+  }
+  return /* @__PURE__ */ jsx53("p", { className: "fbp-blockParagraph", children: block.text }, index);
+};
+var FeatureBlogPage = ({
+  category,
+  title,
+  publishDate,
+  author,
+  heroImage,
+  heroImageAlt,
+  content,
+  tocTitle = "Contents",
+  tocDefaultOpen = true,
+  hideToc = false,
+  shareTitle = "Share article",
+  shareUrl,
+  shareText,
+  sharePlatforms = ["facebook", "twitter", "telegram", "linkedin"],
+  hideShare = false,
+  onShare,
+  copiedLabel = "Copied!",
+  className
+}) => {
+  const headingIds = useMemo6(() => {
+    const seen = /* @__PURE__ */ new Map();
+    const ids = /* @__PURE__ */ new Map();
+    content.forEach((block, i) => {
+      if (block.type !== "heading") return;
+      const base = block.id ?? (slugify(block.text ?? "") || `section-${i}`);
+      const count = seen.get(base) ?? 0;
+      seen.set(base, count + 1);
+      ids.set(i, count === 0 ? base : `${base}-${count}`);
+    });
+    return ids;
+  }, [content]);
+  const headings = useMemo6(
+    () => content.map((block, i) => ({ block, i })).filter(({ block }) => block.type === "heading" && (block.level ?? 2) === 2).map(({ block, i }) => ({ id: headingIds.get(i), text: block.text ?? "" })),
+    [content, headingIds]
+  );
+  const [activeId, setActiveId] = useState20(null);
+  useEffect14(() => {
+    if (typeof IntersectionObserver === "undefined" || headings.length === 0) return;
+    const elements = headings.map((heading) => document.getElementById(heading.id)).filter((el) => el !== null);
+    if (elements.length === 0) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries.filter((entry) => entry.isIntersecting);
+        if (visible.length === 0) return;
+        const topMost = visible.reduce(
+          (a, b) => a.boundingClientRect.top < b.boundingClientRect.top ? a : b
+        );
+        setActiveId(topMost.target.id);
+      },
+      { rootMargin: "-112px 0px -70% 0px", threshold: 0 }
+    );
+    elements.forEach((el) => observer.observe(el));
+    return () => observer.disconnect();
+  }, [headings]);
+  const handleNavigate = (id) => {
+    setActiveId(id);
+    const el = document.getElementById(id);
+    if (!el) return;
+    const prefersReducedMotion = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    el.scrollIntoView({ behavior: prefersReducedMotion ? "auto" : "smooth", block: "start" });
+  };
+  const showToc = !hideToc && headings.length > 0;
+  const showShare = !hideShare && Boolean(shareUrl);
+  const resolvedShareText = shareText ?? title;
+  return /* @__PURE__ */ jsx53("section", { className: ["fbp-section", className ?? ""].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs49("div", { className: "fbp-container", children: [
+    showToc && /* @__PURE__ */ jsx53("div", { className: "fbp-tocMobileWrap", children: /* @__PURE__ */ jsx53(
+      TocCard,
+      {
+        activeId,
+        collapsible: true,
+        defaultOpen: tocDefaultOpen,
+        headings,
+        idSuffix: "mobile",
+        onNavigate: handleNavigate,
+        tocTitle
+      }
+    ) }),
+    /* @__PURE__ */ jsxs49("div", { className: "fbp-body", children: [
+      /* @__PURE__ */ jsxs49("div", { className: "fbp-main", children: [
+        /* @__PURE__ */ jsxs49("header", { className: "fbp-header", children: [
+          category && /* @__PURE__ */ jsx53(Tag, { label: category, size: "md", variant: "fill" }),
+          /* @__PURE__ */ jsx53("h1", { className: "fbp-title", children: title }),
+          (publishDate || author) && /* @__PURE__ */ jsxs49("div", { className: "fbp-meta", children: [
+            author && /* @__PURE__ */ jsxs49("span", { className: "fbp-metaAuthor", children: [
+              author.avatar && /* @__PURE__ */ jsx53(
+                "img",
+                {
+                  alt: author.avatarAlt ?? "",
+                  className: "fbp-avatar",
+                  src: author.avatar
+                }
+              ),
+              /* @__PURE__ */ jsx53("span", { className: "fbp-authorName", children: author.name })
+            ] }),
+            publishDate && /* @__PURE__ */ jsx53("span", { className: "fbp-dateChip", children: publishDate })
+          ] })
+        ] }),
+        heroImage && /* @__PURE__ */ jsx53("div", { className: "fbp-heroImageWrap", children: /* @__PURE__ */ jsx53("img", { alt: heroImageAlt ?? "", className: "fbp-heroImage", src: heroImage }) }),
+        /* @__PURE__ */ jsx53("div", { className: "fbp-content", children: content.map((block, index) => renderBlock2(block, index, headingIds)) }),
+        showShare && /* @__PURE__ */ jsx53("div", { className: "fbp-shareMobileWrap", children: /* @__PURE__ */ jsx53(
+          ShareRow,
+          {
+            copiedLabel,
+            onShare,
+            platforms: sharePlatforms,
+            shareText: resolvedShareText,
+            shareTitle,
+            shareUrl
+          }
+        ) })
+      ] }),
+      (showToc || showShare) && /* @__PURE__ */ jsx53("aside", { className: "fbp-sidebar", children: /* @__PURE__ */ jsxs49("div", { className: "fbp-sidebarSticky", children: [
+        showToc && /* @__PURE__ */ jsx53(
+          TocCard,
+          {
+            activeId,
+            collapsible: false,
+            defaultOpen: tocDefaultOpen,
+            headings,
+            idSuffix: "desktop",
+            onNavigate: handleNavigate,
+            tocTitle
+          }
+        ),
+        showShare && /* @__PURE__ */ jsx53(
+          ShareRow,
+          {
+            copiedLabel,
+            onShare,
+            platforms: sharePlatforms,
+            shareText: resolvedShareText,
+            shareTitle,
+            shareUrl
+          }
+        )
+      ] }) })
+    ] })
+  ] }) });
+};
+
+// templates/ParallaxBanner/ParallaxBanner.tsx
+import { useRef as useRef17 } from "react";
+import { motion as motion5, useScroll as useScroll4, useSpring as useSpring3, useTransform as useTransform3, useReducedMotion } from "framer-motion";
+import { jsx as jsx54, jsxs as jsxs50 } from "react/jsx-runtime";
+var PARALLAX_BANNER_TEXT_CONTENT = {
+  title: "Our culture",
+  description: "We combine human values with AI precision. Collaboration, integrity, and continuous learning guide every project.",
+  ctaLabel: "Culture at Deriv"
+};
+var DEFAULT_CULTURE_CARDS = [
+  {
+    title: "Customer focus",
+    description: "We obsess over customers, prioritising measurable user value and using AI to surface insights and tailor experiences, always keeping human judgment central."
+  },
+  {
+    title: "Integrity",
+    description: "We act with candour and accountability. We make clear trade-offs, give honest feedback, and design our AI and data use with ethics and transparency to build trust."
+  },
+  {
+    title: "Teamwork",
+    description: "We move together in cross-functional teams. We share credit, solve problems collaboratively, and welcome diverse perspectives to deliver better outcomes."
+  },
+  {
+    title: "Competence",
+    description: "We hold high standards and keep learning. We pair deep expertise with pragmatic delivery from prototype to production, and we use AI thoughtfully to amplify judgment and scale impact."
+  }
+];
+var PLACEHOLDER_IMAGE4 = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/69b9309379ac08e59ca8210a_1f3f555da9a5cbb13a6fe1bf0d5fe1b6_placeholder-image.webp";
+var PARALLAX_PX = 36;
+var PARALLAX_SPRING = { stiffness: 90, damping: 26, restDelta: 1e-3 };
+var ParallaxBanner = ({
+  variant = "default",
+  title = PARALLAX_BANNER_TEXT_CONTENT.title,
+  description = PARALLAX_BANNER_TEXT_CONTENT.description,
+  ctaLabel = PARALLAX_BANNER_TEXT_CONTENT.ctaLabel,
+  ctaHref,
+  onCtaClick,
+  imageUrl = PLACEHOLDER_IMAGE4,
+  imageAlt = "",
+  cards = DEFAULT_CULTURE_CARDS,
+  enableParallax = true,
+  className,
+  ...props
+}) => {
+  const sectionRef = useRef17(null);
+  const prefersReducedMotion = useReducedMotion();
+  const parallaxActive = enableParallax && !prefersReducedMotion;
+  const showCards = variant !== "banner-only" && cards.length > 0;
+  const { scrollYProgress } = useScroll4({
+    target: sectionRef,
+    offset: ["start end", "end start"]
+  });
+  const smoothProgress = useSpring3(scrollYProgress, PARALLAX_SPRING);
+  const parallaxY = useTransform3(smoothProgress, [0, 1], [-PARALLAX_PX, PARALLAX_PX]);
+  return /* @__PURE__ */ jsx54(
+    "section",
+    {
+      ref: sectionRef,
+      className: [
+        "parallax-banner",
+        variant === "banner-only" ? "parallax-banner--banner-only" : "",
+        className
+      ].filter(Boolean).join(" "),
+      ...props,
+      children: /* @__PURE__ */ jsxs50("div", { className: "parallax-banner__inner", children: [
+        /* @__PURE__ */ jsxs50("div", { className: "parallax-banner__card", children: [
+          /* @__PURE__ */ jsxs50("div", { className: "parallax-banner__content", children: [
+            /* @__PURE__ */ jsx54("h2", { className: "parallax-banner__title", children: title }),
+            description && /* @__PURE__ */ jsx54("p", { className: "parallax-banner__description", children: description }),
+            ctaLabel && /* @__PURE__ */ jsx54("div", { className: "parallax-banner__actions", children: /* @__PURE__ */ jsx54(
+              Link,
+              {
+                colorScheme: "white",
+                label: ctaLabel,
+                href: ctaHref,
+                onClick: onCtaClick,
+                showChevron: true,
+                className: "parallax-banner__cta-link"
+              }
+            ) })
+          ] }),
+          imageUrl && /* @__PURE__ */ jsx54("div", { className: "parallax-banner__image-wrapper", children: /* @__PURE__ */ jsx54(
+            motion5.img,
+            {
+              src: imageUrl,
+              alt: imageAlt,
+              className: "parallax-banner__image",
+              loading: "lazy",
+              style: parallaxActive ? { y: parallaxY } : void 0
+            }
+          ) })
+        ] }),
+        showCards && /* @__PURE__ */ jsx54("div", { className: "parallax-banner__cards", role: "list", children: cards.map((card, index) => /* @__PURE__ */ jsxs50(
+          "div",
+          {
+            className: "parallax-banner__card-item",
+            role: "listitem",
+            children: [
+              /* @__PURE__ */ jsx54("h3", { className: "parallax-banner__card-title", children: card.title }),
+              /* @__PURE__ */ jsx54("p", { className: "parallax-banner__card-description", children: card.description })
+            ]
+          },
+          `${card.title}-${index}`
+        )) })
+      ] })
+    }
+  );
+};
 export {
   AVATAR_DATA,
   Accordion,
@@ -6160,14 +6983,20 @@ export {
   ChipDropdown,
   CoralBanner,
   DEFAULT_AWARDS,
+  DEFAULT_CULTURE_CARDS,
   DayNightTransition,
   DotLottieInView,
   DownloadBadge,
   DownloadBanner,
   FEATURE_AWARDS_TEXT_CONTENT,
+  FEATURE_BLOG_CATEGORIES_TEXT_CONTENT,
+  FEATURE_BLOG_TEXT_CONTENT,
   FEATURE_SCROLL_DATA,
   FaqAccordion,
   FeatureAwards,
+  FeatureBlog,
+  FeatureBlogCategories,
+  FeatureBlogPage,
   FeatureBullets,
   FeatureCards,
   FeatureCardsIcon,
@@ -6184,7 +7013,9 @@ export {
   Link,
   LogoMarquee,
   Navbar,
+  PARALLAX_BANNER_TEXT_CONTENT,
   Pagination,
+  ParallaxBanner,
   PeopleGrid,
   STEPS_DATA,
   SearchField,