@deriv-web-design/ui 0.1.14 → 0.1.17

package/dist/index.mjs

@@ -47,6 +47,7 @@ var Link = ({
   colorScheme = "coral",
   label,
   icon,
+  iconPosition = "left",
   showChevron = true,
   disabled = false,
   children,
@@ -78,8 +79,9 @@ var Link = ({
       onClick: handleClick,
       ...props,
       children: [
-        hasIcon && /* @__PURE__ */ jsx2("span", { className: "icon", children: icon }),
+        hasIcon && iconPosition === "left" && /* @__PURE__ */ jsx2("span", { className: "icon", children: icon }),
         /* @__PURE__ */ jsx2("span", { className: "label", children: label ?? children }),
+        hasIcon && iconPosition === "right" && /* @__PURE__ */ jsx2("span", { className: "icon", children: icon }),
         !hasIcon && showChevron && /* @__PURE__ */ jsx2("span", { className: "chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(ChevronIcon, {}) })
       ]
     }
@@ -5278,6 +5280,34 @@ var Leaders = AvatarGrid;
 
 // templates/ImageBanner/ImageBanner.tsx
 import { jsx as jsx43, jsxs as jsxs39 } from "react/jsx-runtime";
+var DEFAULT_CHIPS = [
+  "Dynamic ads",
+  "AI insights",
+  "Performance tracking",
+  "Events"
+];
+var IMAGE_BANNER_CHIPS_DEFAULT_IMAGE = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/69a13cf79748b347527dc74d_tier-cover.webp";
+var ChipCheckIcon = () => /* @__PURE__ */ jsx43(
+  "svg",
+  {
+    className: "image-banner__chip-icon",
+    width: "11",
+    height: "12",
+    viewBox: "0 0 11 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ jsx43(
+      "path",
+      {
+        d: "M10.5156 5.98438C10.8203 6.26562 10.8203 6.75781 10.5156 7.03906L4.51562 13.0391C4.23438 13.3438 3.74219 13.3438 3.46094 13.0391L0.460938 10.0391C0.15625 9.75781 0.15625 9.26562 0.460938 8.98438C0.742188 8.67969 1.23438 8.67969 1.51562 8.98438L4 11.4453L9.46094 5.98438C9.74219 5.67969 10.2344 5.67969 10.5156 5.98438Z",
+        fill: "currentColor",
+        fillOpacity: "0.88"
+      }
+    )
+  }
+);
 var ImageBanner = ({
   variant = "split-left",
   title = "Join our global community",
@@ -5285,16 +5315,25 @@ var ImageBanner = ({
   ctaLabel = "Trader's Hub",
   ctaHref,
   onCtaClick,
+  chips = DEFAULT_CHIPS,
   imageUrl,
   imageAlt = "",
   className,
   ...props
 }) => {
   const isFullBg = variant === "full-bg-left" || variant === "full-bg-right";
+  const isChips = variant === "chips-left" || variant === "chips-right";
+  const showCta = !isChips && Boolean(ctaLabel);
+  const visibleChips = isChips ? chips.filter((label) => label.trim().length > 0) : [];
+  const resolvedImageUrl = imageUrl ?? (isChips ? IMAGE_BANNER_CHIPS_DEFAULT_IMAGE : void 0);
   return /* @__PURE__ */ jsx43(
     "section",
     {
-      className: ["image-banner", className].filter(Boolean).join(" "),
+      className: [
+        "image-banner",
+        isChips ? "image-banner--chips" : "",
+        className
+      ].filter(Boolean).join(" "),
       ...props,
       children: /* @__PURE__ */ jsxs39(
         "div",
@@ -5304,11 +5343,11 @@ var ImageBanner = ({
             `image-banner__inner--${variant}`
           ].join(" "),
           children: [
-            isFullBg && imageUrl && /* @__PURE__ */ jsxs39("div", { className: "image-banner__bg-image-wrapper", children: [
+            isFullBg && resolvedImageUrl && /* @__PURE__ */ jsxs39("div", { className: "image-banner__bg-image-wrapper", children: [
               /* @__PURE__ */ jsx43(
                 "img",
                 {
-                  src: imageUrl,
+                  src: resolvedImageUrl,
                   alt: imageAlt,
                   className: "image-banner__bg-image",
                   loading: "lazy"
@@ -5319,7 +5358,11 @@ var ImageBanner = ({
             /* @__PURE__ */ jsxs39("div", { className: "image-banner__content", children: [
               /* @__PURE__ */ jsx43("h2", { className: "image-banner__title", children: title }),
               description && /* @__PURE__ */ jsx43("p", { className: "image-banner__description", children: description }),
-              ctaLabel && /* @__PURE__ */ jsx43("div", { className: "image-banner__actions", children: /* @__PURE__ */ jsx43(
+              visibleChips.length > 0 && /* @__PURE__ */ jsx43("ul", { className: "image-banner__chips", "aria-label": "Features", children: visibleChips.map((label) => /* @__PURE__ */ jsxs39("li", { className: "image-banner__chip", children: [
+                /* @__PURE__ */ jsx43(ChipCheckIcon, {}),
+                /* @__PURE__ */ jsx43("span", { className: "image-banner__chip-label", children: label })
+              ] }, label)) }),
+              showCta && /* @__PURE__ */ jsx43("div", { className: "image-banner__actions", children: /* @__PURE__ */ jsx43(
                 Link,
                 {
                   colorScheme: "coral",
@@ -5331,15 +5374,24 @@ var ImageBanner = ({
                 }
               ) })
             ] }),
-            !isFullBg && imageUrl && /* @__PURE__ */ jsx43("div", { className: "image-banner__image-wrapper", children: /* @__PURE__ */ jsx43(
-              "img",
-              {
-                src: imageUrl,
-                alt: imageAlt,
-                className: "image-banner__image",
-                loading: "lazy"
-              }
-            ) })
+            !isFullBg && resolvedImageUrl && /* @__PURE__ */ jsxs39("div", { className: "image-banner__image-wrapper", children: [
+              /* @__PURE__ */ jsx43(
+                "img",
+                {
+                  src: resolvedImageUrl,
+                  alt: imageAlt,
+                  className: "image-banner__image",
+                  loading: "lazy"
+                }
+              ),
+              isChips && /* @__PURE__ */ jsx43(
+                "div",
+                {
+                  className: "image-banner__image-fade",
+                  "aria-hidden": "true"
+                }
+              )
+            ] })
           ]
         }
       )
@@ -8019,6 +8071,248 @@ var FeatureOffices = ({
     /* @__PURE__ */ jsx58("div", { className: "fo-grid", children: filteredOffices.map((office, index) => /* @__PURE__ */ jsx58(OfficeCard, { linkText, office }, `${office.city}-${index}`)) })
   ] }) });
 };
+
+// templates/Tiers/Tiers.tsx
+import { jsx as jsx59, jsxs as jsxs55 } from "react/jsx-runtime";
+var DEFAULT_ACCENTS = ["bronze", "silver", "gold", "platinum"];
+var resolveAccent = (tier, index) => tier.accent ?? DEFAULT_ACCENTS[index] ?? "bronze";
+var Tiers = ({
+  title,
+  description,
+  tiers,
+  showLink = false,
+  linkText = "Learn more about partner tiers",
+  linkHref,
+  onLinkClick
+}) => {
+  return /* @__PURE__ */ jsx59("section", { className: "tiers", children: /* @__PURE__ */ jsxs55("div", { className: "tiers__container", children: [
+    /* @__PURE__ */ jsxs55("header", { className: "tiers__header", children: [
+      /* @__PURE__ */ jsx59("h2", { className: "tiers__title", children: title }),
+      description && /* @__PURE__ */ jsx59("p", { className: "tiers__description", children: description })
+    ] }),
+    /* @__PURE__ */ jsx59("ol", { className: "tiers__list", children: tiers.map((tier, index) => {
+      const accent = resolveAccent(tier, index);
+      return /* @__PURE__ */ jsx59(
+        "li",
+        {
+          className: `tiers__item tiers__item--${accent}`,
+          children: /* @__PURE__ */ jsxs55("div", { className: "tiers__shell", children: [
+            /* @__PURE__ */ jsxs55("div", { className: "tiers__icon-row", children: [
+              /* @__PURE__ */ jsx59(
+                "span",
+                {
+                  className: "tiers__line tiers__line--left",
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx59("div", { className: "tiers__icon-wrap", children: /* @__PURE__ */ jsx59(
+                "img",
+                {
+                  src: tier.icon,
+                  alt: tier.iconAlt ?? tier.name,
+                  className: "tiers__icon",
+                  width: 64,
+                  height: 64,
+                  loading: "lazy"
+                }
+              ) }),
+              /* @__PURE__ */ jsx59(
+                "span",
+                {
+                  className: "tiers__line tiers__line--right",
+                  "aria-hidden": "true"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs55("div", { className: "tiers__heading", children: [
+              /* @__PURE__ */ jsx59("h3", { className: "tiers__name", children: tier.name }),
+              /* @__PURE__ */ jsx59("p", { className: "tiers__status", children: tier.status })
+            ] }),
+            /* @__PURE__ */ jsxs55("div", { className: "tiers__card", children: [
+              /* @__PURE__ */ jsx59("p", { className: "tiers__card-title", children: tier.title }),
+              /* @__PURE__ */ jsx59("p", { className: "tiers__card-description", children: tier.description })
+            ] }),
+            tier.requirement && /* @__PURE__ */ jsx59("p", { className: "tiers__requirement", children: tier.requirement })
+          ] })
+        },
+        tier.name
+      );
+    }) }),
+    showLink && /* @__PURE__ */ jsx59("div", { className: "tiers__footer", children: /* @__PURE__ */ jsx59(
+      Link,
+      {
+        colorScheme: "coral",
+        label: linkText,
+        href: linkHref,
+        onClick: onLinkClick
+      }
+    ) })
+  ] }) });
+};
+
+// templates/PartnersPayout/PartnersPayout.tsx
+import { jsx as jsx60, jsxs as jsxs56 } from "react/jsx-runtime";
+var PartnersPayout = ({
+  title,
+  period,
+  payouts,
+  imageUrl,
+  imageAlt = "",
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx60(
+  "section",
+  {
+    className: ["partners-payout", className].filter(Boolean).join(" "),
+    ...props,
+    children: /* @__PURE__ */ jsxs56("div", { className: "partners-payout__container", children: [
+      /* @__PURE__ */ jsxs56("div", { className: "partners-payout__content", children: [
+        /* @__PURE__ */ jsxs56("header", { className: "partners-payout__header", children: [
+          /* @__PURE__ */ jsx60("h2", { className: "partners-payout__title", children: title }),
+          /* @__PURE__ */ jsx60("p", { className: "partners-payout__period", children: period })
+        ] }),
+        /* @__PURE__ */ jsx60("ul", { className: "partners-payout__grid", children: payouts.map((payout, index) => /* @__PURE__ */ jsxs56(
+          "li",
+          {
+            className: "partners-payout__item",
+            children: [
+              /* @__PURE__ */ jsx60("span", { className: "partners-payout__region", children: payout.region }),
+              /* @__PURE__ */ jsx60("span", { className: "partners-payout__amount", children: payout.amount })
+            ]
+          },
+          `${payout.region}-${index}`
+        )) })
+      ] }),
+      /* @__PURE__ */ jsx60(
+        "img",
+        {
+          className: "partners-payout__image",
+          src: imageUrl,
+          alt: imageAlt,
+          loading: "lazy"
+        }
+      )
+    ] })
+  }
+);
+
+// templates/MasterPartner/MasterPartner.tsx
+import { jsx as jsx61, jsxs as jsxs57 } from "react/jsx-runtime";
+var MasterPartner = ({
+  title,
+  description,
+  note,
+  closingText,
+  ctaLabel,
+  ctaHref,
+  onCtaClick,
+  image,
+  imageAlt = "",
+  steps
+}) => {
+  const ctaButton = /* @__PURE__ */ jsx61(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel, onClick: onCtaClick });
+  return /* @__PURE__ */ jsx61("section", { className: "master-partner", children: /* @__PURE__ */ jsxs57("div", { className: "master-partner__container", children: [
+    /* @__PURE__ */ jsxs57("div", { className: "master-partner__top", children: [
+      /* @__PURE__ */ jsxs57("div", { className: "master-partner__content", children: [
+        /* @__PURE__ */ jsx61("h2", { className: "master-partner__title", children: title }),
+        /* @__PURE__ */ jsxs57("div", { className: "master-partner__copy", children: [
+          /* @__PURE__ */ jsx61("p", { className: "master-partner__paragraph", children: description }),
+          note && /* @__PURE__ */ jsxs57("p", { className: "master-partner__paragraph", children: [
+            /* @__PURE__ */ jsx61("strong", { children: note.label }),
+            " ",
+            note.text
+          ] }),
+          closingText && /* @__PURE__ */ jsx61("p", { className: "master-partner__paragraph", children: closingText })
+        ] }),
+        ctaLabel && /* @__PURE__ */ jsx61("div", { className: "master-partner__cta", children: ctaHref ? /* @__PURE__ */ jsx61("a", { href: ctaHref, children: ctaButton }) : ctaButton })
+      ] }),
+      /* @__PURE__ */ jsx61("div", { className: "master-partner__image-wrapper", children: /* @__PURE__ */ jsx61(
+        "img",
+        {
+          className: "master-partner__image",
+          src: image,
+          alt: imageAlt,
+          loading: "lazy"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx61("ol", { className: "master-partner__steps", children: steps.map((step, index) => /* @__PURE__ */ jsxs57("li", { className: "master-partner__step", children: [
+      /* @__PURE__ */ jsx61(
+        "img",
+        {
+          className: "master-partner__step-icon",
+          src: step.icon,
+          alt: step.iconAlt ?? "",
+          "aria-hidden": "true",
+          width: 32,
+          height: 32,
+          loading: "lazy"
+        }
+      ),
+      /* @__PURE__ */ jsx61("p", { className: "master-partner__step-description", children: step.description })
+    ] }, index)) })
+  ] }) });
+};
+
+// templates/ResourceBanner/ResourceBanner.tsx
+import { jsx as jsx62, jsxs as jsxs58 } from "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__ */ jsx62("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx62(
+  "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__ */ jsx62("section", { className: rootClass, ...props, children: /* @__PURE__ */ jsx62("div", { className: "rsb__inner", children: /* @__PURE__ */ jsx62("div", { className: "rsb__card", children: /* @__PURE__ */ jsxs58("div", { className: "rsb__grid", children: [
+    /* @__PURE__ */ jsxs58("div", { className: "rsb__content", children: [
+      /* @__PURE__ */ jsx62(HeadingTag, { className: "rsb__title", children: title }),
+      description && /* @__PURE__ */ jsx62("p", { className: "rsb__description", children: description })
+    ] }),
+    /* @__PURE__ */ jsx62("ul", { className: "rsb__links", children: resolvedLinks.map((link, i) => {
+      const isExternal = link.external ?? true;
+      return /* @__PURE__ */ jsx62("li", { className: "rsb__links-item", children: /* @__PURE__ */ jsx62(
+        Link,
+        {
+          className: "rsb__link",
+          colorScheme: "white",
+          href: link.href,
+          label: link.label,
+          icon: isExternal ? /* @__PURE__ */ jsx62(ExternalLinkIcon2, {}) : void 0,
+          iconPosition: "right",
+          showChevron: !isExternal,
+          target: isExternal ? "_blank" : void 0,
+          rel: isExternal ? "noopener noreferrer" : void 0
+        }
+      ) }, link.id ?? i);
+    }) })
+  ] }) }) }) });
+};
 export {
   AVATAR_DATA,
   Accordion,
@@ -8067,15 +8361,20 @@ export {
   HelpCentreCategories,
   HelpCentreSubCategories,
   Hero,
+  IMAGE_BANNER_CHIPS_DEFAULT_IMAGE,
   ImageBanner,
   Leaders,
   Link,
   LogoMarquee,
+  MasterPartner,
   Navbar,
   PARALLAX_BANNER_TEXT_CONTENT,
   Pagination,
   ParallaxBanner,
+  PartnersPayout,
   PeopleGrid,
+  RESOURCE_BANNER_DERIV_CONTENT,
+  ResourceBanner,
   STEPS_DATA,
   SearchField,
   Stats,
@@ -8090,6 +8389,7 @@ export {
   Testimonial,
   TextField,
   TextScroll,
+  Tiers,
   TradingCalculator,
   TradingCalculatorHowTo,
   dayNightTransitionV2Preset