@deriv-web-design/ui 0.1.4 → 0.1.5

package/dist/index.js

@@ -30,16 +30,21 @@ __export(index_exports, {
   Button: () => Button,
   COL_ONE_LOGOS: () => COL_ONE_LOGOS,
   COL_TWO_LOGOS: () => COL_TWO_LOGOS,
+  CORAL_BANNER_DERIV_SLIDES: () => CORAL_BANNER_DERIV_SLIDES,
   CTABanner: () => CTABanner,
   Card: () => Card,
   Chip: () => Chip,
   ChipDropdown: () => ChipDropdown,
+  CoralBanner: () => CoralBanner,
+  DEFAULT_AWARDS: () => DEFAULT_AWARDS,
   DayNightTransition: () => DayNightTransition,
   DotLottieInView: () => DotLottieInView,
   DownloadBadge: () => DownloadBadge,
   DownloadBanner: () => DownloadBanner,
+  FEATURE_AWARDS_TEXT_CONTENT: () => FEATURE_AWARDS_TEXT_CONTENT,
   FEATURE_SCROLL_DATA: () => FEATURE_SCROLL_DATA,
   FaqAccordion: () => FaqAccordion,
+  FeatureAwards: () => FeatureAwards,
   FeatureBullets: () => FeatureBullets,
   FeatureCards: () => FeatureCards,
   FeatureCardsIcon: () => FeatureCardsIcon,
@@ -47,6 +52,9 @@ __export(index_exports, {
   FeatureSplit: () => FeatureSplit,
   Footer: () => Footer,
   Header: () => Header,
+  HelpCenterPage: () => HelpCenterPage,
+  HelpCentreCategories: () => HelpCentreCategories,
+  HelpCentreSubCategories: () => HelpCentreSubCategories,
   Hero: () => Hero,
   ImageBanner: () => ImageBanner,
   Leaders: () => Leaders,
@@ -5638,6 +5646,567 @@ var ArticleSection = ({
     ] })
   ] });
 };
+
+// templates/CoralBanner/CoralBanner.tsx
+var import_react24 = require("react");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var DEFAULT_SLIDES = [
+  {
+    title: "Section title goes here",
+    description: "Explain how this specific feature helps your user.",
+    primaryButton: { label: "Get started", href: "#" }
+  }
+];
+var CORAL_BANNER_DERIV_SLIDES = [
+  {
+    id: "ai-insights",
+    title: "Analyse markets with AI-powered insights",
+    primaryButton: { label: "Explore TradersView", href: "#" }
+  },
+  {
+    id: "join-traders",
+    title: "Join 3M+\nglobal traders",
+    description: "Open an account in minutes and start trading the world's markets \u2014 forex, stocks, indices, and more.",
+    primaryButton: { label: "Trade now", href: "#" }
+  }
+];
+var LeftArrowIcon = () => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  "path",
+  {
+    d: "M3.31066 8.75001L9.03033 14.4697L7.96967 15.5303L0.439339 8.00001L7.96967 0.469676L9.03033 1.53034L3.31066 7.25001L15.5 7.25L15.5 8.75L3.31066 8.75001Z",
+    fill: "currentColor"
+  }
+) });
+var RightArrowIcon = () => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  "path",
+  {
+    d: "M12.6893 7.25L6.96967 1.53033L8.03033 0.469666L15.5607 8L8.03033 15.5303L6.96967 14.4697L12.6893 8.75H0.5V7.25H12.6893Z",
+    fill: "currentColor"
+  }
+) });
+var renderTitleLines = (title) => {
+  const lines = title.split("\n");
+  return lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { children: [
+    line,
+    i < lines.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("br", {})
+  ] }, i));
+};
+var ButtonBlock3 = ({
+  primaryButton,
+  secondaryButton
+}) => {
+  if (!primaryButton && !secondaryButton) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "crb__buttons", children: [
+    primaryButton && (primaryButton.href ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("a", { href: primaryButton.href, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      Button,
+      {
+        colorScheme: "black",
+        variant: "primary",
+        label: primaryButton.label,
+        onClick: primaryButton.onClick
+      }
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      Button,
+      {
+        colorScheme: "black",
+        variant: "primary",
+        label: primaryButton.label,
+        onClick: primaryButton.onClick
+      }
+    )),
+    secondaryButton && (secondaryButton.href ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("a", { href: secondaryButton.href, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      Button,
+      {
+        colorScheme: "white",
+        variant: "secondary",
+        label: secondaryButton.label,
+        onClick: secondaryButton.onClick
+      }
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      Button,
+      {
+        colorScheme: "white",
+        variant: "secondary",
+        label: secondaryButton.label,
+        onClick: secondaryButton.onClick
+      }
+    ))
+  ] });
+};
+var SlideContent = ({ slide }) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "crb__grid", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "crb__content", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("h3", { className: "crb__title", children: renderTitleLines(slide.title) }),
+    slide.description && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "crb__description", children: slide.description }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      ButtonBlock3,
+      {
+        primaryButton: slide.primaryButton,
+        secondaryButton: slide.secondaryButton
+      }
+    )
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "crb__spacer", "aria-hidden": "true" })
+] });
+var CoralBanner = ({
+  variant = "static",
+  slides,
+  autoplay = true,
+  autoplayDelay = 2e3,
+  transitionDuration = 330,
+  infinite = true,
+  showArrows = true,
+  showDots = true,
+  className,
+  ...props
+}) => {
+  const resolvedSlides = slides && slides.length > 0 ? slides : DEFAULT_SLIDES;
+  const count = resolvedSlides.length;
+  const isCarousel = variant === "carousel" && count > 1;
+  const [activeIndex, setActiveIndex] = (0, import_react24.useState)(0);
+  const autoplayTimer = (0, import_react24.useRef)(null);
+  const dragState = (0, import_react24.useRef)(null);
+  const goTo = (0, import_react24.useCallback)(
+    (index) => {
+      if (count <= 1) return;
+      const next = infinite ? (index % count + count) % count : Math.max(0, Math.min(index, count - 1));
+      setActiveIndex(next);
+    },
+    [count, infinite]
+  );
+  const goNext = (0, import_react24.useCallback)(() => goTo(activeIndex + 1), [activeIndex, goTo]);
+  const goPrev = (0, import_react24.useCallback)(() => goTo(activeIndex - 1), [activeIndex, goTo]);
+  const resetAutoplay = () => {
+    if (autoplayTimer.current) clearTimeout(autoplayTimer.current);
+  };
+  (0, import_react24.useEffect)(() => {
+    if (!isCarousel || !autoplay) return;
+    autoplayTimer.current = setTimeout(() => {
+      goTo(activeIndex + 1);
+    }, autoplayDelay);
+    return () => resetAutoplay();
+  }, [isCarousel, autoplay, autoplayDelay, activeIndex]);
+  const handlePointerDown = (e) => {
+    if (!isCarousel) return;
+    dragState.current = { startX: e.clientX };
+  };
+  const handlePointerUp = (e) => {
+    if (!isCarousel || !dragState.current) return;
+    const delta = e.clientX - dragState.current.startX;
+    dragState.current = null;
+    const SWIPE_THRESHOLD = 40;
+    if (delta > SWIPE_THRESHOLD) {
+      resetAutoplay();
+      goPrev();
+    } else if (delta < -SWIPE_THRESHOLD) {
+      resetAutoplay();
+      goNext();
+    }
+  };
+  const rootClass = [
+    "crb",
+    isCarousel ? "crb--carousel" : "crb--static",
+    className
+  ].filter(Boolean).join(" ");
+  if (!isCarousel) {
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("section", { className: rootClass, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "crb__inner", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "crb__stage", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SlideContent, { slide: resolvedSlides[0] }) }) }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("section", { className: rootClass, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "crb__inner", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "crb__stage", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      "div",
+      {
+        className: "crb__viewport",
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          "div",
+          {
+            className: "crb__track",
+            style: {
+              transform: `translateX(-${activeIndex * 100}%)`,
+              transitionDuration: `${transitionDuration}ms`
+            },
+            children: resolvedSlides.map((slide, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+              "div",
+              {
+                className: "crb__slide",
+                role: "group",
+                "aria-roledescription": "slide",
+                "aria-label": `${i + 1} of ${count}`,
+                "aria-hidden": i !== activeIndex,
+                children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SlideContent, { slide })
+              },
+              slide.id ?? i
+            ))
+          }
+        )
+      }
+    ),
+    showDots && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "crb__dots", role: "tablist", "aria-label": "Banner slide navigation", children: resolvedSlides.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": i === activeIndex,
+        "aria-label": `Go to slide ${i + 1} of ${count}`,
+        className: [
+          "crb__dot",
+          i === activeIndex ? "crb__dot--active" : ""
+        ].filter(Boolean).join(" "),
+        onClick: () => {
+          resetAutoplay();
+          goTo(i);
+        }
+      },
+      i
+    )) }),
+    showArrows && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "crb__arrows", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "crb__arrow crb__arrow--prev",
+          "aria-label": "Previous slide",
+          onClick: () => {
+            resetAutoplay();
+            goPrev();
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(LeftArrowIcon, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "crb__arrow crb__arrow--next",
+          "aria-label": "Next slide",
+          onClick: () => {
+            resetAutoplay();
+            goNext();
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(RightArrowIcon, {})
+        }
+      )
+    ] })
+  ] }) }) });
+};
+
+// assets/award-leaf-left.png
+var award_leaf_left_default = "./award-leaf-left-HVAB5T5H.png";
+
+// assets/award-leaf-right.png
+var award_leaf_right_default = "./award-leaf-right-WR5I37KI.png";
+
+// templates/FeatureAwards/FeatureAwards.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var FEATURE_AWARDS_TEXT_CONTENT = {
+  title: "Our awards"
+};
+var DEFAULT_AWARDS = [
+  { title: "Best Trade Execution Award (MEA)", subtitle: "Ultimate Fintech 2026" },
+  { title: "Best Trading Experience - Global", subtitle: "UF Awards 2025" },
+  { title: "Best CFD Broker - LATAM", subtitle: "UF Awards 2025" },
+  { title: "Most Innovative Broker - MEA", subtitle: "UF Awards 2025" },
+  { title: "Most Transparent Broker - Global", subtitle: "Global Forex Awards 2025" },
+  { title: "Best Broker - Africa", subtitle: "Global Forex Awards 2025" },
+  { title: "Best Trading Platform - MENA", subtitle: "Global Forex Awards 2025" },
+  { title: "Most Innovative Online Trading Platform", subtitle: "Forex Expo Dubai 2025" },
+  { title: "Chief Risk & Compliance Officer of the Year", subtitle: "Forex Expo Dubai 2025" },
+  { title: "Best Broker - APAC", subtitle: "UF Awards 2025" },
+  { title: "Best Trading Conditions - Global", subtitle: "Finance Magnates 2025" },
+  { title: "Most Trusted Broker - Middle East", subtitle: "Finance Magnates 2025" },
+  { title: "Affiliate Program of the Year", subtitle: "Forex Expo Dubai 2024" },
+  { title: "Best Customer Service - Global", subtitle: "Global Forex Awards 2024" },
+  { title: "Most Trusted Broker - Africa", subtitle: "Finance Magnates 2024" },
+  { title: "Best LATAM Region Broker", subtitle: "ADVFN Awards 2024" },
+  { title: "Broker of the Year - Global", subtitle: "Finance Magnates 2024" }
+];
+var LaurelIcon = ({ side }) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  "img",
+  {
+    className: `fa__leaf fa__leaf--${side}`,
+    src: side === "left" ? award_leaf_left_default : award_leaf_right_default,
+    alt: "",
+    "aria-hidden": "true",
+    loading: "lazy",
+    draggable: false
+  }
+);
+var AwardBadge2 = ({ award }) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "fa__item", role: "listitem", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(LaurelIcon, { side: "left" }),
+  /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "fa__item-text", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "fa__item-title", children: award.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "fa__item-subtitle", children: award.subtitle })
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(LaurelIcon, { side: "right" })
+] });
+var FeatureAwards = ({
+  title = FEATURE_AWARDS_TEXT_CONTENT.title,
+  awards = DEFAULT_AWARDS,
+  autoScrollDuration = 32,
+  className,
+  ...props
+}) => {
+  if (!awards || awards.length === 0) return null;
+  const trackStyle = {
+    "--fa-duration": `${autoScrollDuration}s`
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    "section",
+    {
+      className: ["fa", className].filter(Boolean).join(" "),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "fa__inner", children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("h2", { className: "fa__title", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "fa__grid", role: "list", children: awards.map((award, i) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AwardBadge2, { award }, `g-${i}`)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "fa__scroller", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "fa__track fa__track--auto", style: trackStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "fa__track-group", role: "list", children: awards.map((award, i) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AwardBadge2, { award }, `m-${i}`)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            "div",
+            {
+              className: "fa__track-group",
+              role: "presentation",
+              "aria-hidden": "true",
+              children: awards.map((award, i) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AwardBadge2, { award }, `m-dup-${i}`))
+            }
+          )
+        ] }) })
+      ] })
+    }
+  );
+};
+
+// templates/HelpCentreCategories/HelpCentreCategories.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var externalLinkRel2 = (href) => href && /^https?:\/\//i.test(href) ? "noopener noreferrer" : void 0;
+var CategoryTileContent = ({ category }) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+  category.icon && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "hcc-tile-icon", children: typeof category.icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "img",
+    {
+      alt: category.iconAlt ?? "",
+      className: "hcc-tile-iconImage",
+      decoding: "async",
+      height: 48,
+      loading: "lazy",
+      src: category.icon,
+      width: 48
+    }
+  ) : category.icon }),
+  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "hcc-tile-title", children: category.title })
+] });
+var CategoryTile = ({ category }) => {
+  if (category.href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      "a",
+      {
+        className: "hcc-tile",
+        href: category.href,
+        onClick: category.onClick,
+        rel: externalLinkRel2(category.href),
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CategoryTileContent, { category })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("button", { className: "hcc-tile", onClick: category.onClick, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CategoryTileContent, { category }) });
+};
+var getColumnCount = (categoryCount) => Math.max(1, Math.min(categoryCount, 3));
+var HelpCentreCategories = ({
+  sectionTitle,
+  sectionDescription,
+  categories
+}) => {
+  const columnCount = getColumnCount(categories.length);
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("section", { className: "hcc-section", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "hcc-container", children: [
+    (sectionTitle || sectionDescription) && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "hcc-header", children: [
+      sectionTitle && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h2", { className: "hcc-sectionTitle", children: sectionTitle }),
+      sectionDescription && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "hcc-sectionDescription", children: sectionDescription })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: `hcc-grid hcc-grid--${columnCount}`, role: "list", children: categories.map((category, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "hcc-gridItem", role: "listitem", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CategoryTile, { category }) }, category.id ?? `${category.title}-${index}`)) })
+  ] }) });
+};
+
+// templates/HelpCentreSubCategories/HelpCentreSubCategories.tsx
+var import_react25 = require("react");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var externalLinkRel3 = (href) => href && /^https?:\/\//i.test(href) ? "noopener noreferrer" : void 0;
+var QuestionCard = ({ item }) => {
+  if (item.href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("a", { className: "hcsc-card", href: item.href, onClick: item.onClick, rel: externalLinkRel3(item.href), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "hcsc-card-text", children: item.question }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("button", { className: "hcsc-card", onClick: item.onClick, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "hcsc-card-text", children: item.question }) });
+};
+var HelpCentreSubCategories = ({
+  title,
+  searchPlaceholder = "Search",
+  searchAriaLabel,
+  items,
+  noResultsText = 'No results found for "{query}"',
+  onSearchChange
+}) => {
+  const [search, setSearch] = (0, import_react25.useState)("");
+  const filtered = (0, import_react25.useMemo)(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return items;
+    return items.filter((item) => item.question.toLowerCase().includes(q));
+  }, [items, search]);
+  const handleSearchChange = (e) => {
+    setSearch(e.target.value);
+    onSearchChange?.(e.target.value);
+  };
+  const handleClear = () => {
+    setSearch("");
+    onSearchChange?.("");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("section", { className: "hcsc-section", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "hcsc-container", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("h1", { className: "hcsc-title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "hcsc-searchWrap", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      SearchField,
+      {
+        "aria-label": searchAriaLabel ?? searchPlaceholder,
+        onChange: handleSearchChange,
+        onClear: handleClear,
+        placeholder: searchPlaceholder,
+        value: search,
+        variant: "outline"
+      }
+    ) }),
+    filtered.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "hcsc-grid", role: "list", children: filtered.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "hcsc-gridItem", role: "listitem", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(QuestionCard, { item }) }, item.id ?? `${item.question}-${index}`)) }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "hcsc-noResults", children: noResultsText.replace("{query}", search) })
+  ] }) });
+};
+
+// templates/HelpCenterPage/HelpCenterPage.tsx
+var import_react26 = require("react");
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var externalLinkRel4 = (href) => href && /^https?:\/\//i.test(href) ? "noopener noreferrer" : void 0;
+var ChevronDownIcon5 = () => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("svg", { "aria-hidden": "true", fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("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__ */ (0, import_jsx_runtime50.jsx)(HeadingTag, { className: "hcp-blockHeading", children: block.text }, index);
+  }
+  if (block.type === "list") {
+    const ListTag = block.ordered ? "ol" : "ul";
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ListTag, { className: "hcp-blockList", children: (block.items ?? []).map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("li", { className: "hcp-blockListItem", children: item }, i)) }, index);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "hcp-blockParagraph", children: block.text }, index);
+};
+var QuestionRow = ({
+  item,
+  isActive,
+  onSelect
+}) => {
+  const rowClass = ["hcp-row", isActive ? "hcp-row--active" : ""].filter(Boolean).join(" ");
+  if (item.href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      "a",
+      {
+        "aria-current": isActive ? "page" : void 0,
+        className: rowClass,
+        href: item.href,
+        onClick: () => {
+          item.onClick?.();
+          onSelect(item);
+        },
+        rel: externalLinkRel4(item.href),
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "hcp-rowText", children: item.question })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    "button",
+    {
+      "aria-current": isActive ? "page" : void 0,
+      className: rowClass,
+      onClick: () => {
+        item.onClick?.();
+        onSelect(item);
+      },
+      type: "button",
+      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "hcp-rowText", children: item.question })
+    }
+  );
+};
+var HelpCenterPage = ({
+  categoryTitle,
+  questions,
+  activeQuestionId,
+  defaultActiveQuestionId,
+  onQuestionSelect,
+  contentTitle,
+  content,
+  searchPlaceholder = "Search",
+  searchAriaLabel,
+  onSearchChange,
+  searchNoResultsText = 'No results found for "{query}"',
+  articlesSheetTitle = "Articles in this section",
+  className
+}) => {
+  const [search, setSearch] = (0, import_react26.useState)("");
+  const [internalActiveId, setInternalActiveId] = (0, import_react26.useState)(defaultActiveQuestionId ?? questions[0]?.id);
+  const [sheetOpen, setSheetOpen] = (0, import_react26.useState)(false);
+  const isControlled = activeQuestionId !== void 0;
+  const activeId = isControlled ? activeQuestionId : internalActiveId;
+  const activeItem = questions.find((item) => item.id === activeId);
+  const filtered = (0, import_react26.useMemo)(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return questions;
+    return questions.filter((item) => item.question.toLowerCase().includes(q));
+  }, [questions, search]);
+  const handleSearchChange = (e) => {
+    setSearch(e.target.value);
+    onSearchChange?.(e.target.value);
+  };
+  const handleClear = () => {
+    setSearch("");
+    onSearchChange?.("");
+  };
+  const handleSelect = (item) => {
+    if (!isControlled) setInternalActiveId(item.id);
+    onQuestionSelect?.(item.id);
+    setSheetOpen(false);
+  };
+  const resolvedTitle = activeItem?.content ? activeItem.contentTitle ?? contentTitle : contentTitle;
+  const resolvedContent = activeItem?.content ?? content;
+  const rootClass = ["hcp-section", className ?? ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("section", { className: rootClass, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "hcp-container", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "hcp-searchWrap", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        SearchField,
+        {
+          "aria-label": searchAriaLabel ?? searchPlaceholder,
+          onChange: handleSearchChange,
+          onClear: handleClear,
+          placeholder: searchPlaceholder,
+          value: search,
+          variant: "outline"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "hcp-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("aside", { className: "hcp-sidebar", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "hcp-sidebarCard", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("h2", { className: "hcp-sidebarTitle", children: categoryTitle }),
+          filtered.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "hcp-list", role: "list", children: filtered.map((item) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "hcp-listItem", role: "listitem", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(QuestionRow, { isActive: item.id === activeId, item, onSelect: handleSelect }) }, item.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "hcp-noResults", children: searchNoResultsText.replace("{query}", search) })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+          "button",
+          {
+            "aria-expanded": sheetOpen,
+            className: "hcp-mobileToggle",
+            onClick: () => setSheetOpen(true),
+            type: "button",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "hcp-mobileToggleLabel", children: categoryTitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "hcp-mobileToggleChevron", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ChevronDownIcon5, {}) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "hcp-content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("h1", { className: "hcp-contentTitle", children: resolvedTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "hcp-contentBody", children: resolvedContent.map(renderBlock) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(BottomSheet, { onClose: () => setSheetOpen(false), open: sheetOpen, title: articlesSheetTitle, children: filtered.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "hcp-sheetList", role: "list", children: filtered.map((item) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "hcp-sheetItem", role: "listitem", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(QuestionRow, { isActive: item.id === activeId, item, onSelect: handleSelect }) }, item.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "hcp-noResults", children: searchNoResultsText.replace("{query}", search) }) })
+  ] });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AVATAR_DATA,
@@ -5650,16 +6219,21 @@ var ArticleSection = ({
   Button,
   COL_ONE_LOGOS,
   COL_TWO_LOGOS,
+  CORAL_BANNER_DERIV_SLIDES,
   CTABanner,
   Card,
   Chip,
   ChipDropdown,
+  CoralBanner,
+  DEFAULT_AWARDS,
   DayNightTransition,
   DotLottieInView,
   DownloadBadge,
   DownloadBanner,
+  FEATURE_AWARDS_TEXT_CONTENT,
   FEATURE_SCROLL_DATA,
   FaqAccordion,
+  FeatureAwards,
   FeatureBullets,
   FeatureCards,
   FeatureCardsIcon,
@@ -5667,6 +6241,9 @@ var ArticleSection = ({
   FeatureSplit,
   Footer,
   Header,
+  HelpCenterPage,
+  HelpCentreCategories,
+  HelpCentreSubCategories,
   Hero,
   ImageBanner,
   Leaders,