@deriv-web-design/ui 0.0.2 → 0.0.4

package/dist/index.mjs

@@ -1,6 +1,3 @@
-// primitives/Button/Button.module.css
-var Button_default = {};
-
 // primitives/Button/Button.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var Button = ({
@@ -18,13 +15,13 @@ var Button = ({
 }) => {
   const isIconOnly = iconPosition === "icon-only";
   const classNames = [
-    Button_default.button,
-    Button_default[`${colorScheme}_${variant}`],
-    isIconOnly ? Button_default.iconOnly : "",
-    fullWidth ? Button_default.fullWidth : "",
+    "button",
+    `${colorScheme}_${variant}`,
+    isIconOnly ? "iconOnly" : "",
+    fullWidth ? "fullWidth" : "",
     className ?? ""
   ].filter(Boolean).join(" ");
-  const iconNode = icon ? /* @__PURE__ */ jsx("span", { className: Button_default.icon, children: icon }) : null;
+  const iconNode = icon ? /* @__PURE__ */ jsx("span", { className: "icon", children: icon }) : null;
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -34,18 +31,15 @@ var Button = ({
       ...props,
       children: [
         iconPosition === "icon-left" && iconNode,
-        !isIconOnly && /* @__PURE__ */ jsx("span", { className: Button_default.label, children: label ?? children }),
+        !isIconOnly && /* @__PURE__ */ jsx("span", { className: "label", children: label ?? children }),
         iconPosition === "icon-only" && iconNode,
         iconPosition === "icon-right" && iconNode,
-        showFocusRing && /* @__PURE__ */ jsx("span", { className: Button_default.focusRing, "aria-hidden": "true" })
+        showFocusRing && /* @__PURE__ */ jsx("span", { className: "focusRing", "aria-hidden": "true" })
       ]
     }
   );
 };
 
-// primitives/Link/Link.module.css
-var Link_default = {};
-
 // primitives/Link/Link.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var ChevronIcon = () => /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M3 8h10M9 4l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
@@ -62,10 +56,10 @@ var Link = ({
 }) => {
   const hasIcon = !!icon;
   const classNames = [
-    Link_default.link,
-    Link_default[colorScheme],
-    hasIcon ? Link_default.withIcon : Link_default.withChevron,
-    disabled ? Link_default.disabled : "",
+    "link",
+    colorScheme,
+    hasIcon ? "withIcon" : "withChevron",
+    disabled ? "disabled" : "",
     className ?? ""
   ].filter(Boolean).join(" ");
   const handleClick = (e) => {
@@ -84,17 +78,14 @@ var Link = ({
       onClick: handleClick,
       ...props,
       children: [
-        hasIcon && /* @__PURE__ */ jsx2("span", { className: Link_default.icon, children: icon }),
-        /* @__PURE__ */ jsx2("span", { className: Link_default.label, children: label ?? children }),
-        !hasIcon && showChevron && /* @__PURE__ */ jsx2("span", { className: Link_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx2(ChevronIcon, {}) })
+        hasIcon && /* @__PURE__ */ jsx2("span", { className: "icon", children: icon }),
+        /* @__PURE__ */ jsx2("span", { className: "label", children: label ?? children }),
+        !hasIcon && showChevron && /* @__PURE__ */ jsx2("span", { className: "chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(ChevronIcon, {}) })
       ]
     }
   );
 };
 
-// primitives/Chip/Chip.module.css
-var Chip_default = {};
-
 // primitives/Chip/Chip.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var Chip = ({
@@ -110,9 +101,9 @@ var Chip = ({
   ...props
 }) => {
   const classNames = [
-    Chip_default.chip,
-    Chip_default[size],
-    selected ? Chip_default.selected : "",
+    "chip",
+    size,
+    selected ? "selected" : "",
     className ?? ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs3(
@@ -123,18 +114,15 @@ var Chip = ({
       "aria-pressed": selected,
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx3("span", { className: Chip_default.icon, children: icon }),
-        /* @__PURE__ */ jsx3("span", { className: Chip_default.label, children: label ?? children }),
-        tag && /* @__PURE__ */ jsx3("span", { className: Chip_default.tag, children: tag }),
-        showFocusRing && /* @__PURE__ */ jsx3("span", { className: Chip_default.focusRing, "aria-hidden": "true" })
+        icon && /* @__PURE__ */ jsx3("span", { className: "icon", children: icon }),
+        /* @__PURE__ */ jsx3("span", { className: "label", children: label ?? children }),
+        tag && /* @__PURE__ */ jsx3("span", { className: "tag", children: tag }),
+        showFocusRing && /* @__PURE__ */ jsx3("span", { className: "focusRing", "aria-hidden": "true" })
       ]
     }
   );
 };
 
-// primitives/Tag/Tag.module.css
-var Tag_default = {};
-
 // primitives/Tag/Tag.tsx
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var Tag = ({
@@ -148,25 +136,20 @@ var Tag = ({
   ...props
 }) => {
   const classNames = [
-    Tag_default.tag,
-    Tag_default[size],
-    Tag_default[variant],
-    Tag_default[fontWeight],
+    "tag",
+    size,
+    variant,
+    fontWeight,
     className ?? ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs4("span", { className: classNames, ...props, children: [
-    icon && /* @__PURE__ */ jsx4("span", { className: Tag_default.icon, children: icon }),
-    /* @__PURE__ */ jsx4("span", { className: Tag_default.label, children: label ?? children })
+    icon && /* @__PURE__ */ jsx4("span", { className: "icon", children: icon }),
+    /* @__PURE__ */ jsx4("span", { className: "label", children: label ?? children })
   ] });
 };
 
 // primitives/Accordion/Accordion.tsx
 import { useState } from "react";
-
-// primitives/Accordion/Accordion.module.css
-var Accordion_default = {};
-
-// primitives/Accordion/Accordion.tsx
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var ChevronIcon2 = () => /* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var Accordion = ({
@@ -188,7 +171,7 @@ var Accordion = ({
     if (!isControlled) setInternalOpen(next);
     onToggle?.(next);
   };
-  const classNames = [Accordion_default.accordion, className ?? ""].filter(Boolean).join(" ");
+  const classNames = ["accordion", className ?? ""].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs5(
     "div",
     {
@@ -201,17 +184,17 @@ var Accordion = ({
         /* @__PURE__ */ jsxs5(
           "button",
           {
-            className: Accordion_default.header,
+            className: "header",
             onClick: handleToggle,
             "aria-expanded": isOpen,
             children: [
-              /* @__PURE__ */ jsx5("span", { className: Accordion_default.titleWrapper, children: /* @__PURE__ */ jsx5("span", { className: Accordion_default.title, children: title }) }),
-              /* @__PURE__ */ jsx5("span", { className: [Accordion_default.chevron, isOpen ? Accordion_default.chevronRotated : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx5(ChevronIcon2, {}) }),
-              showFocusRing && /* @__PURE__ */ jsx5("span", { className: Accordion_default.focusRing, "aria-hidden": "true" })
+              /* @__PURE__ */ jsx5("span", { className: "titleWrapper", children: /* @__PURE__ */ jsx5("span", { className: "title", children: title }) }),
+              /* @__PURE__ */ jsx5("span", { className: ["chevron", isOpen ? "chevronRotated" : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx5(ChevronIcon2, {}) }),
+              showFocusRing && /* @__PURE__ */ jsx5("span", { className: "focusRing", "aria-hidden": "true" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx5("div", { className: [Accordion_default.bodyWrapper, isOpen ? Accordion_default.bodyWrapperOpen : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx5("div", { className: Accordion_default.bodyInner, children: /* @__PURE__ */ jsx5("div", { className: Accordion_default.body, children }) }) })
+        /* @__PURE__ */ jsx5("div", { className: ["bodyWrapper", isOpen ? "bodyWrapperOpen" : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx5("div", { className: "bodyInner", children: /* @__PURE__ */ jsx5("div", { className: "body", children }) }) })
       ]
     }
   );
@@ -219,11 +202,6 @@ var Accordion = ({
 
 // primitives/TextField/TextField.tsx
 import { forwardRef } from "react";
-
-// primitives/TextField/TextField.module.css
-var TextField_default = {};
-
-// primitives/TextField/TextField.tsx
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var SuccessIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
   /* @__PURE__ */ jsx6("circle", { cx: "8", cy: "8", r: "6", stroke: "currentColor", strokeWidth: "1.5" }),
@@ -243,9 +221,9 @@ var TextField = forwardRef(
     ...inputProps
   }, ref) => {
     const wrapperClass = [
-      TextField_default.wrapper,
-      TextField_default[variant],
-      TextField_default[status],
+      "tf-wrapper",
+      variant,
+      status,
       className ?? ""
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs6("div", { className: wrapperClass, "data-disabled": disabled || void 0, children: [
@@ -253,13 +231,13 @@ var TextField = forwardRef(
         "input",
         {
           ref,
-          className: TextField_default.input,
+          className: "tf-input",
           disabled,
           ...inputProps
         }
       ),
-      status === "success" && /* @__PURE__ */ jsx6("span", { className: [TextField_default.iconSlot, TextField_default.iconSuccess].join(" "), children: /* @__PURE__ */ jsx6(SuccessIcon, {}) }),
-      status === "fail" && /* @__PURE__ */ jsx6("span", { className: [TextField_default.iconSlot, TextField_default.iconFail].join(" "), children: /* @__PURE__ */ jsx6(FailIcon, {}) })
+      status === "success" && /* @__PURE__ */ jsx6("span", { className: "iconSlot iconSuccess", children: /* @__PURE__ */ jsx6(SuccessIcon, {}) }),
+      status === "fail" && /* @__PURE__ */ jsx6("span", { className: "iconSlot iconFail", children: /* @__PURE__ */ jsx6(FailIcon, {}) })
     ] });
   }
 );
@@ -267,11 +245,6 @@ TextField.displayName = "TextField";
 
 // primitives/SearchField/SearchField.tsx
 import { forwardRef as forwardRef2, useRef, useState as useState2, useCallback } from "react";
-
-// primitives/SearchField/SearchField.module.css
-var SearchField_default = {};
-
-// primitives/SearchField/SearchField.tsx
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var SearchIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
   /* @__PURE__ */ jsx7("circle", { cx: "6.5", cy: "6.5", r: "4", stroke: "currentColor", strokeWidth: "1.25" }),
@@ -336,8 +309,8 @@ var SearchField = forwardRef2(
     const showSuccessIcon = status === "success" && hasValue && !disabled;
     const showClearButton = hasValue && !disabled;
     const wrapperClass = [
-      SearchField_default.wrapper,
-      SearchField_default[status],
+      "sf-wrapper",
+      status,
       className ?? ""
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs7(
@@ -346,12 +319,12 @@ var SearchField = forwardRef2(
         className: wrapperClass,
         "data-disabled": disabled || void 0,
         children: [
-          /* @__PURE__ */ jsx7("span", { className: SearchField_default.iconSlot, children: /* @__PURE__ */ jsx7(SearchIcon, {}) }),
+          /* @__PURE__ */ jsx7("span", { className: "iconSlot", children: /* @__PURE__ */ jsx7(SearchIcon, {}) }),
           /* @__PURE__ */ jsx7(
             "input",
             {
               ref: setRef,
-              className: SearchField_default.input,
+              className: "sf-input",
               disabled,
               value,
               defaultValue,
@@ -359,13 +332,13 @@ var SearchField = forwardRef2(
               ...inputProps
             }
           ),
-          showSuccessIcon && /* @__PURE__ */ jsx7("span", { className: [SearchField_default.iconSlot, SearchField_default.iconSuccess].join(" "), children: /* @__PURE__ */ jsx7(SuccessIcon2, {}) }),
-          showFailIcon && /* @__PURE__ */ jsx7("span", { className: [SearchField_default.iconSlot, SearchField_default.iconFail].join(" "), children: /* @__PURE__ */ jsx7(FailIcon2, {}) }),
+          showSuccessIcon && /* @__PURE__ */ jsx7("span", { className: "iconSlot iconSuccess", children: /* @__PURE__ */ jsx7(SuccessIcon2, {}) }),
+          showFailIcon && /* @__PURE__ */ jsx7("span", { className: "iconSlot iconFail", children: /* @__PURE__ */ jsx7(FailIcon2, {}) }),
           showClearButton && /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
-              className: SearchField_default.clearButton,
+              className: "clearButton",
               onClick: handleClear,
               "aria-label": "Clear search",
               tabIndex: -1,
@@ -382,12 +355,114 @@ SearchField.displayName = "SearchField";
 // primitives/Breadcrumb/Breadcrumb.tsx
 import { useState as useState3 } from "react";
 
-// primitives/Breadcrumb/Breadcrumb.module.css
-var Breadcrumb_default = {};
+// primitives/BottomSheet/BottomSheet.tsx
+import { useEffect, useId } from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var XMarkIcon = () => /* @__PURE__ */ jsx8(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx8(
+      "path",
+      {
+        d: "M3 3l10 10M13 3L3 13",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
+      }
+    )
+  }
+);
+var BottomSheet = ({
+  open,
+  onClose,
+  title,
+  showHeader = true,
+  showHandleBar = true,
+  primaryAction,
+  secondaryAction,
+  children
+}) => {
+  const titleId = useId();
+  useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, onClose]);
+  if (!open || typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className: "bs-overlay",
+        onClick: onClose,
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            className: "bs-sheet",
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": title ? titleId : void 0,
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              showHandleBar && /* @__PURE__ */ jsx8("div", { className: "bs-handle-container", children: /* @__PURE__ */ jsx8("div", { className: "bs-handle-bar" }) }),
+              showHeader && /* @__PURE__ */ jsxs8("div", { className: "bs-header", children: [
+                /* @__PURE__ */ jsx8("div", { className: "bs-header-spacer" }),
+                title && /* @__PURE__ */ jsx8("p", { id: titleId, className: "bs-title", children: title }),
+                /* @__PURE__ */ jsx8("div", { className: "bs-close-container", children: /* @__PURE__ */ jsx8(
+                  "button",
+                  {
+                    type: "button",
+                    className: "bs-close-btn",
+                    onClick: onClose,
+                    "aria-label": "Close",
+                    children: /* @__PURE__ */ jsx8(XMarkIcon, {})
+                  }
+                ) })
+              ] }),
+              children && /* @__PURE__ */ jsx8("div", { className: "bs-body", children }),
+              (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs8("div", { className: "bs-actions", children: [
+                primaryAction && /* @__PURE__ */ jsx8(
+                  "button",
+                  {
+                    type: "button",
+                    className: "bs-action-primary",
+                    onClick: primaryAction.onClick,
+                    children: primaryAction.label
+                  }
+                ),
+                secondaryAction && /* @__PURE__ */ jsx8(
+                  "button",
+                  {
+                    type: "button",
+                    className: "bs-action-secondary",
+                    onClick: secondaryAction.onClick,
+                    children: secondaryAction.label
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+};
 
 // primitives/Breadcrumb/Breadcrumb.tsx
-import { Fragment, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-var ChevronRightIcon = () => /* @__PURE__ */ jsx8(
+import { Fragment, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var ChevronRightIcon = () => /* @__PURE__ */ jsx9(
   "svg",
   {
     width: "1em",
@@ -396,7 +471,7 @@ var ChevronRightIcon = () => /* @__PURE__ */ jsx8(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx8(
+    children: /* @__PURE__ */ jsx9(
       "path",
       {
         d: "M6 3.5L10.5 8L6 12.5",
@@ -409,9 +484,9 @@ var ChevronRightIcon = () => /* @__PURE__ */ jsx8(
   }
 );
 function BreadcrumbLink({ item }) {
-  return /* @__PURE__ */ jsxs8(Fragment, { children: [
-    /* @__PURE__ */ jsx8("a", { href: item.href, onClick: item.onClick, className: Breadcrumb_default.link, children: item.label }),
-    /* @__PURE__ */ jsx8("span", { className: Breadcrumb_default.separator, "aria-hidden": "true", children: /* @__PURE__ */ jsx8(ChevronRightIcon, {}) })
+  return /* @__PURE__ */ jsxs9(Fragment, { children: [
+    /* @__PURE__ */ jsx9("a", { href: item.href, onClick: item.onClick, className: "bc-link", children: item.label }),
+    /* @__PURE__ */ jsx9("span", { className: "bc-separator", "aria-hidden": "true", children: /* @__PURE__ */ jsx9(ChevronRightIcon, {}) })
   ] });
 }
 function Breadcrumb({
@@ -421,53 +496,67 @@ function Breadcrumb({
   className,
   ...navProps
 }) {
-  const [expanded, setExpanded] = useState3(false);
+  const [sheetOpen, setSheetOpen] = useState3(false);
   const truncatable = collapsible && items.length > 3;
-  const listClass = [
-    Breadcrumb_default.list,
-    Breadcrumb_default[size],
-    truncatable ? Breadcrumb_default.collapsible : "",
-    truncatable && expanded ? Breadcrumb_default.expanded : ""
-  ].filter(Boolean).join(" ");
+  const listClass = ["bc-list", size, truncatable ? "collapsible" : ""].filter(Boolean).join(" ");
   if (!truncatable) {
-    return /* @__PURE__ */ jsx8("nav", { "aria-label": "Breadcrumb", className, ...navProps, children: /* @__PURE__ */ jsx8("ol", { className: listClass, children: items.map((item, index) => {
+    return /* @__PURE__ */ jsx9("nav", { "aria-label": "Breadcrumb", className, ...navProps, children: /* @__PURE__ */ jsx9("ol", { className: listClass, children: items.map((item, index) => {
       const isLast = index === items.length - 1;
-      return /* @__PURE__ */ jsx8("li", { className: Breadcrumb_default.item, children: isLast ? /* @__PURE__ */ jsx8("span", { className: Breadcrumb_default.current, "aria-current": "page", children: item.label }) : /* @__PURE__ */ jsx8(BreadcrumbLink, { item }) }, index);
+      return /* @__PURE__ */ jsx9("li", { className: "bc-item", children: isLast ? /* @__PURE__ */ jsx9("span", { className: "bc-current", "aria-current": "page", children: item.label }) : /* @__PURE__ */ jsx9(BreadcrumbLink, { item }) }, index);
     }) }) });
   }
   const firstItem = items[0];
   const middleItems = items.slice(1, items.length - 2);
   const parentItem = items[items.length - 2];
   const currentItem = items[items.length - 1];
-  return /* @__PURE__ */ jsx8("nav", { "aria-label": "Breadcrumb", className, ...navProps, children: /* @__PURE__ */ jsxs8("ol", { className: listClass, children: [
-    /* @__PURE__ */ jsx8("li", { className: Breadcrumb_default.item, children: /* @__PURE__ */ jsx8(BreadcrumbLink, { item: firstItem }) }),
-    /* @__PURE__ */ jsxs8("li", { className: Breadcrumb_default.ellipsisItem, "aria-hidden": expanded, children: [
-      /* @__PURE__ */ jsx8(
-        "button",
-        {
-          className: Breadcrumb_default.ellipsisButton,
-          onClick: () => setExpanded(true),
-          "aria-label": "Show all breadcrumb items",
-          children: "\u2026"
-        }
-      ),
-      /* @__PURE__ */ jsx8("span", { className: Breadcrumb_default.separator, "aria-hidden": "true", children: /* @__PURE__ */ jsx8(ChevronRightIcon, {}) })
-    ] }),
-    middleItems.map((item, index) => /* @__PURE__ */ jsx8("li", { className: Breadcrumb_default.middleItem, children: /* @__PURE__ */ jsx8(BreadcrumbLink, { item }) }, `m-${index}`)),
-    /* @__PURE__ */ jsx8("li", { className: Breadcrumb_default.item, children: /* @__PURE__ */ jsx8(BreadcrumbLink, { item: parentItem }) }),
-    /* @__PURE__ */ jsx8("li", { className: Breadcrumb_default.item, children: /* @__PURE__ */ jsx8("span", { className: Breadcrumb_default.current, "aria-current": "page", children: currentItem.label }) })
-  ] }) });
+  return /* @__PURE__ */ jsxs9(Fragment, { children: [
+    /* @__PURE__ */ jsx9("nav", { "aria-label": "Breadcrumb", className, ...navProps, children: /* @__PURE__ */ jsxs9("ol", { className: listClass, children: [
+      /* @__PURE__ */ jsx9("li", { className: "bc-item", children: /* @__PURE__ */ jsx9(BreadcrumbLink, { item: firstItem }) }),
+      /* @__PURE__ */ jsxs9("li", { className: "bc-ellipsisItem", children: [
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            className: "bc-ellipsisButton",
+            onClick: () => setSheetOpen(true),
+            "aria-label": "Show all breadcrumb items",
+            "aria-haspopup": "dialog",
+            children: "\u2026"
+          }
+        ),
+        /* @__PURE__ */ jsx9("span", { className: "bc-separator", "aria-hidden": "true", children: /* @__PURE__ */ jsx9(ChevronRightIcon, {}) })
+      ] }),
+      middleItems.map((item, index) => /* @__PURE__ */ jsx9("li", { className: "bc-middleItem", children: /* @__PURE__ */ jsx9(BreadcrumbLink, { item }) }, `m-${index}`)),
+      /* @__PURE__ */ jsx9("li", { className: "bc-item", children: /* @__PURE__ */ jsx9(BreadcrumbLink, { item: parentItem }) }),
+      /* @__PURE__ */ jsx9("li", { className: "bc-item", children: /* @__PURE__ */ jsx9("span", { className: "bc-current", "aria-current": "page", children: currentItem.label }) })
+    ] }) }),
+    /* @__PURE__ */ jsx9(
+      BottomSheet,
+      {
+        open: sheetOpen,
+        onClose: () => setSheetOpen(false),
+        showHandleBar: true,
+        showHeader: false,
+        children: /* @__PURE__ */ jsx9("ul", { className: "bc-sheet-list", role: "list", children: middleItems.map((item, index) => /* @__PURE__ */ jsx9("li", { className: "bc-sheet-item", children: /* @__PURE__ */ jsx9(
+          "a",
+          {
+            href: item.href,
+            className: "bc-sheet-link",
+            onClick: (e) => {
+              item.onClick?.(e);
+              setSheetOpen(false);
+            },
+            children: item.label
+          }
+        ) }, `sheet-${index}`)) })
+      }
+    )
+  ] });
 }
 
 // primitives/ChipDropdown/ChipDropdown.tsx
-import { useEffect, useRef as useRef2, useState as useState4 } from "react";
-
-// primitives/ChipDropdown/ChipDropdown.module.css
-var ChipDropdown_default = {};
-
-// primitives/ChipDropdown/ChipDropdown.tsx
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
-var ChevronDownIcon = () => /* @__PURE__ */ jsx9(
+import { useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var ChevronDownIcon = () => /* @__PURE__ */ jsx10(
   "svg",
   {
     width: "16",
@@ -476,7 +565,7 @@ var ChevronDownIcon = () => /* @__PURE__ */ jsx9(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx9(
+    children: /* @__PURE__ */ jsx10(
       "path",
       {
         d: "M3 6l5 5 5-5",
@@ -488,7 +577,7 @@ var ChevronDownIcon = () => /* @__PURE__ */ jsx9(
     )
   }
 );
-var CheckIcon = () => /* @__PURE__ */ jsx9(
+var CheckIcon = () => /* @__PURE__ */ jsx10(
   "svg",
   {
     width: "12",
@@ -497,7 +586,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx9(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx9(
+    children: /* @__PURE__ */ jsx10(
       "path",
       {
         d: "M2 6l3 3 5-5",
@@ -522,12 +611,21 @@ var ChipDropdown = ({
   ...props
 }) => {
   const [open, setOpen] = useState4(false);
+  const [isMobile, setIsMobile] = useState4(
+    () => typeof window !== "undefined" && window.matchMedia("(max-width: 767px)").matches
+  );
   const wrapperRef = useRef2(null);
   const selectedOption = options.find((o) => o.value === value) ?? null;
   const displayLabel = selectedOption ? selectedOption.label : label;
   const isSelected = selectedOption !== null;
-  useEffect(() => {
-    if (!open) return;
+  useEffect2(() => {
+    const mq = window.matchMedia("(max-width: 767px)");
+    const handler = (e) => setIsMobile(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  useEffect2(() => {
+    if (!open || isMobile) return;
     const handleClickOutside = (e) => {
       if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
         setOpen(false);
@@ -535,19 +633,40 @@ var ChipDropdown = ({
     };
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [open]);
+  }, [open, isMobile]);
   const triggerClassNames = [
-    ChipDropdown_default.trigger,
-    ChipDropdown_default[size],
-    isSelected ? ChipDropdown_default.selected : "",
-    open ? ChipDropdown_default.expand : "",
+    "cd-trigger",
+    size,
+    isSelected ? "selected" : "",
+    open ? "expand" : "",
     className ?? ""
   ].filter(Boolean).join(" ");
   const handleKeyDown = (e) => {
     if (e.key === "Escape") setOpen(false);
   };
-  return /* @__PURE__ */ jsxs9("div", { ref: wrapperRef, className: ChipDropdown_default.wrapper, children: [
-    /* @__PURE__ */ jsxs9(
+  const handleSelect = (optionValue) => {
+    onChange?.(optionValue);
+    setOpen(false);
+  };
+  const optionList = options.map((option) => {
+    const isActive = option.value === value;
+    return /* @__PURE__ */ jsxs10(
+      "li",
+      {
+        role: "option",
+        "aria-selected": isActive,
+        className: ["cd-item", isActive ? "itemSelected" : ""].filter(Boolean).join(" "),
+        onClick: () => handleSelect(option.value),
+        children: [
+          /* @__PURE__ */ jsx10("span", { className: "cd-itemLabel", children: option.label }),
+          isActive && /* @__PURE__ */ jsx10("span", { className: "cd-itemCheck", children: /* @__PURE__ */ jsx10(CheckIcon, {}) })
+        ]
+      },
+      option.value
+    );
+  });
+  return /* @__PURE__ */ jsxs10("div", { ref: wrapperRef, className: "cd-wrapper", children: [
+    /* @__PURE__ */ jsxs10(
       "button",
       {
         type: "button",
@@ -559,80 +678,37 @@ var ChipDropdown = ({
         onKeyDown: handleKeyDown,
         ...props,
         children: [
-          icon && /* @__PURE__ */ jsx9("span", { className: ChipDropdown_default.icon, children: icon }),
-          /* @__PURE__ */ jsx9("span", { className: ChipDropdown_default.label, children: displayLabel }),
-          tag && /* @__PURE__ */ jsx9("span", { className: ChipDropdown_default.tag, children: tag }),
-          /* @__PURE__ */ jsx9(
+          icon && /* @__PURE__ */ jsx10("span", { className: "cd-icon", children: icon }),
+          /* @__PURE__ */ jsx10("span", { className: "cd-label", children: displayLabel }),
+          tag && /* @__PURE__ */ jsx10("span", { className: "cd-tag", children: tag }),
+          /* @__PURE__ */ jsx10(
             "span",
             {
-              className: [ChipDropdown_default.chevron, open ? ChipDropdown_default.chevronOpen : ""].filter(Boolean).join(" "),
+              className: ["cd-chevron", open ? "chevronOpen" : ""].filter(Boolean).join(" "),
               "aria-hidden": "true",
-              children: /* @__PURE__ */ jsx9(ChevronDownIcon, {})
+              children: /* @__PURE__ */ jsx10(ChevronDownIcon, {})
             }
           )
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx9(
-      "ul",
+    !isMobile && open && /* @__PURE__ */ jsx10("ul", { role: "listbox", "aria-label": label, className: "cd-list", children: optionList }),
+    isMobile && /* @__PURE__ */ jsx10(
+      BottomSheet,
       {
-        role: "listbox",
-        "aria-label": label,
-        className: ChipDropdown_default.list,
-        children: options.map((option) => {
-          const isActive = option.value === value;
-          return /* @__PURE__ */ jsxs9(
-            "li",
-            {
-              role: "option",
-              "aria-selected": isActive,
-              className: [
-                ChipDropdown_default.item,
-                isActive ? ChipDropdown_default.itemSelected : ""
-              ].filter(Boolean).join(" "),
-              onClick: () => {
-                onChange?.(option.value);
-                setOpen(false);
-              },
-              children: [
-                /* @__PURE__ */ jsx9("span", { className: ChipDropdown_default.itemLabel, children: option.label }),
-                isActive && /* @__PURE__ */ jsx9("span", { className: ChipDropdown_default.itemCheck, children: /* @__PURE__ */ jsx9(CheckIcon, {}) })
-              ]
-            },
-            option.value
-          );
-        })
+        open,
+        onClose: () => setOpen(false),
+        title: label,
+        showHandleBar: true,
+        showHeader: true,
+        children: /* @__PURE__ */ jsx10("ul", { role: "listbox", "aria-label": label, className: "cd-list cd-list--sheet", children: optionList })
       }
     )
   ] });
 };
 
-// components/Card/CardPrimaryVariant.module.css
-var CardPrimaryVariant_default = {};
-
 // components/Card/CardPrimaryVariant.tsx
-import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
-var ArrowRightIcon = () => /* @__PURE__ */ jsx10(
-  "svg",
-  {
-    "aria-hidden": "true",
-    fill: "none",
-    height: "16",
-    viewBox: "0 0 16 16",
-    width: "16",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx10(
-      "path",
-      {
-        d: "M3 8h10M9 4l4 4-4 4",
-        stroke: "currentColor",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "1.5"
-      }
-    )
-  }
-);
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 var CardPrimaryVariant = ({
   colorScheme = "light",
   title,
@@ -647,68 +723,40 @@ var CardPrimaryVariant = ({
   ...props
 }) => {
   const isInverse = colorScheme === "dark" || colorScheme === "brand" || colorScheme === "image";
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       className: [
-        CardPrimaryVariant_default.card,
-        CardPrimaryVariant_default[`style--${colorScheme}`],
+        "card-primary",
+        `style--${colorScheme}`,
         className ?? ""
       ].filter(Boolean).join(" "),
       ...props,
       children: [
-        colorScheme === "image" && image && /* @__PURE__ */ jsxs10("div", { "aria-hidden": "true", className: CardPrimaryVariant_default.imageOverlay, children: [
-          /* @__PURE__ */ jsx10("img", { alt: "", className: CardPrimaryVariant_default.overlayImg, src: image }),
-          /* @__PURE__ */ jsx10("div", { className: CardPrimaryVariant_default.gradient })
+        colorScheme === "image" && image && /* @__PURE__ */ jsxs11("div", { "aria-hidden": "true", className: "cp-imageOverlay", children: [
+          /* @__PURE__ */ jsx11("img", { alt: "", className: "cp-overlayImg", src: image }),
+          /* @__PURE__ */ jsx11("div", { className: "cp-gradient" })
         ] }),
-        /* @__PURE__ */ jsxs10("div", { className: CardPrimaryVariant_default.content, children: [
-          /* @__PURE__ */ jsx10("p", { className: [CardPrimaryVariant_default.title, isInverse ? CardPrimaryVariant_default.textInverse : CardPrimaryVariant_default.textDefault].join(" "), children: title }),
-          /* @__PURE__ */ jsx10("p", { className: [CardPrimaryVariant_default.description, isInverse ? CardPrimaryVariant_default.textInverse : CardPrimaryVariant_default.textDefault].join(" "), children: description }),
-          showLink && /* @__PURE__ */ jsxs10(
-            "button",
+        /* @__PURE__ */ jsxs11("div", { className: "cp-content", children: [
+          /* @__PURE__ */ jsx11("p", { className: ["cp-title", isInverse ? "textInverse" : "textDefault"].join(" "), children: title }),
+          /* @__PURE__ */ jsx11("p", { className: ["cp-description", isInverse ? "textInverse" : "textDefault"].join(" "), children: description }),
+          showLink && /* @__PURE__ */ jsx11(
+            Link,
             {
-              className: [CardPrimaryVariant_default.link, isInverse ? CardPrimaryVariant_default.linkInverse : CardPrimaryVariant_default.linkCoral].join(" "),
-              onClick: onLinkClick,
-              type: "button",
-              children: [
-                /* @__PURE__ */ jsx10("span", { children: linkText }),
-                /* @__PURE__ */ jsx10(ArrowRightIcon, {})
-              ]
+              colorScheme: isInverse ? "white" : "coral",
+              label: linkText,
+              onClick: onLinkClick
             }
           )
         ] }),
-        colorScheme !== "image" && /* @__PURE__ */ jsx10("div", { className: CardPrimaryVariant_default.imageSection, children: image && /* @__PURE__ */ jsx10("img", { alt: imageAlt, className: CardPrimaryVariant_default.image, src: image }) })
+        colorScheme !== "image" && image && /* @__PURE__ */ jsx11("div", { className: "cp-imageSection", children: /* @__PURE__ */ jsx11("img", { alt: imageAlt, className: "cp-image", src: image }) })
       ]
     }
   );
 };
 
-// components/Card/CardSecondaryVariant.module.css
-var CardSecondaryVariant_default = {};
-
 // components/Card/CardSecondaryVariant.tsx
-import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
-var ArrowRightIcon2 = () => /* @__PURE__ */ jsx11(
-  "svg",
-  {
-    "aria-hidden": "true",
-    fill: "none",
-    height: "16",
-    viewBox: "0 0 16 16",
-    width: "16",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx11(
-      "path",
-      {
-        d: "M3 8h10M9 4l4 4-4 4",
-        stroke: "currentColor",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "1.5"
-      }
-    )
-  }
-);
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 var CardSecondaryVariant = ({
   title,
   description,
@@ -721,25 +769,21 @@ var CardSecondaryVariant = ({
   variant: _variant,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
-      className: [CardSecondaryVariant_default.card, className ?? ""].filter(Boolean).join(" "),
+      className: ["card-secondary", className ?? ""].filter(Boolean).join(" "),
       ...props,
       children: [
-        showIcon && icon && /* @__PURE__ */ jsx11("span", { className: CardSecondaryVariant_default.icon, children: icon }),
-        /* @__PURE__ */ jsx11("p", { className: CardSecondaryVariant_default.title, children: title }),
-        /* @__PURE__ */ jsx11("p", { className: CardSecondaryVariant_default.description, children: description }),
-        showLink && /* @__PURE__ */ jsxs11(
-          "button",
+        showIcon && icon && /* @__PURE__ */ jsx12("span", { className: "cs-icon", children: icon }),
+        /* @__PURE__ */ jsx12("p", { className: "cs-title", children: title }),
+        /* @__PURE__ */ jsx12("p", { className: "cs-description", children: description }),
+        showLink && /* @__PURE__ */ jsx12(
+          Link,
           {
-            className: CardSecondaryVariant_default.link,
-            onClick: onLinkClick,
-            type: "button",
-            children: [
-              /* @__PURE__ */ jsx11("span", { children: linkText }),
-              /* @__PURE__ */ jsx11(ArrowRightIcon2, {})
-            ]
+            colorScheme: "coral",
+            label: linkText,
+            onClick: onLinkClick
           }
         )
       ]
@@ -747,12 +791,9 @@ var CardSecondaryVariant = ({
   );
 };
 
-// components/Card/CardThumbnailVariant.module.css
-var CardThumbnailVariant_default = {};
-
 // components/Card/CardThumbnailVariant.tsx
-import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
-var LinkIcon = () => /* @__PURE__ */ jsxs12(
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+var LinkIcon = () => /* @__PURE__ */ jsxs13(
   "svg",
   {
     "aria-hidden": "true",
@@ -762,7 +803,7 @@ var LinkIcon = () => /* @__PURE__ */ jsxs12(
     width: "14",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13(
         "path",
         {
           d: "M5.25 2.625H3.5A1.75 1.75 0 0 0 1.75 4.375v5.25A1.75 1.75 0 0 0 3.5 11.375h5.25a1.75 1.75 0 0 0 1.75-1.75V7.875",
@@ -772,7 +813,7 @@ var LinkIcon = () => /* @__PURE__ */ jsxs12(
           strokeWidth: "1.25"
         }
       ),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13(
         "path",
         {
           d: "M7.875 1.75h4.375v4.375M12.25 1.75 6.125 7.875",
@@ -785,7 +826,7 @@ var LinkIcon = () => /* @__PURE__ */ jsxs12(
     ]
   }
 );
-var PlayIcon = () => /* @__PURE__ */ jsxs12(
+var PlayIcon = () => /* @__PURE__ */ jsxs13(
   "svg",
   {
     "aria-hidden": "true",
@@ -795,8 +836,8 @@ var PlayIcon = () => /* @__PURE__ */ jsxs12(
     width: "80",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ jsx12("circle", { cx: "40", cy: "40", fill: "rgba(255,255,255,0.88)", r: "40" }),
-      /* @__PURE__ */ jsx12("path", { d: "M32 27l22 13-22 13V27z", fill: "rgba(24,28,37,0.72)" })
+      /* @__PURE__ */ jsx13("circle", { cx: "40", cy: "40", fill: "rgba(255,255,255,0.88)", r: "40" }),
+      /* @__PURE__ */ jsx13("path", { d: "M32 27l22 13-22 13V27z", fill: "rgba(24,28,37,0.72)" })
     ]
   }
 );
@@ -817,33 +858,33 @@ var CardThumbnailVariant = ({
   ...props
 }) => {
   const isVideo = type === "video";
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
-      className: [CardThumbnailVariant_default.card, className ?? ""].filter(Boolean).join(" "),
+      className: ["card-thumbnail", className ?? ""].filter(Boolean).join(" "),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs12("div", { className: CardThumbnailVariant_default.thumbnailWrapper, children: [
-          /* @__PURE__ */ jsx12("img", { alt: thumbnailAlt, className: CardThumbnailVariant_default.thumbnailImage, src: thumbnail }),
-          isVideo && /* @__PURE__ */ jsx12("span", { "aria-label": "Play video", className: CardThumbnailVariant_default.playButton, children: /* @__PURE__ */ jsx12(PlayIcon, {}) }),
-          !isVideo && avatar && /* @__PURE__ */ jsx12("img", { alt: avatarAlt, className: CardThumbnailVariant_default.avatar, src: avatar })
+        /* @__PURE__ */ jsxs13("div", { className: "ct-thumbnailWrapper", children: [
+          /* @__PURE__ */ jsx13("img", { alt: thumbnailAlt, className: "ct-thumbnailImage", src: thumbnail }),
+          isVideo && /* @__PURE__ */ jsx13("span", { "aria-label": "Play video", className: "ct-playButton", children: /* @__PURE__ */ jsx13(PlayIcon, {}) }),
+          !isVideo && avatar && /* @__PURE__ */ jsx13("img", { alt: avatarAlt, className: "ct-avatar", src: avatar })
         ] }),
-        /* @__PURE__ */ jsxs12("div", { className: CardThumbnailVariant_default.content, children: [
-          /* @__PURE__ */ jsxs12("div", { className: CardThumbnailVariant_default.metaRow, children: [
-            !hideTags && /* @__PURE__ */ jsx12("div", { className: CardThumbnailVariant_default.tagsList, children: tags.map((tag, i) => /* @__PURE__ */ jsx12(Tag, { icon: tag.icon, label: tag.label, size: "md", variant: "fill" }, i)) }),
-            showCopyLink && /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsxs13("div", { className: "ct-content", children: [
+          /* @__PURE__ */ jsxs13("div", { className: "ct-metaRow", children: [
+            !hideTags && /* @__PURE__ */ jsx13("div", { className: "ct-tagsList", children: tags.map((tag, i) => /* @__PURE__ */ jsx13(Tag, { icon: tag.icon, label: tag.label, size: "md", variant: "fill" }, i)) }),
+            showCopyLink && /* @__PURE__ */ jsx13(
               "button",
               {
                 "aria-label": "Copy link",
-                className: CardThumbnailVariant_default.copyLink,
+                className: "ct-copyLink",
                 onClick: onCopyLink,
                 type: "button",
-                children: /* @__PURE__ */ jsx12(LinkIcon, {})
+                children: /* @__PURE__ */ jsx13(LinkIcon, {})
               }
             )
           ] }),
-          /* @__PURE__ */ jsx12("p", { className: CardThumbnailVariant_default.title, children: title }),
-          /* @__PURE__ */ jsx12("p", { className: CardThumbnailVariant_default.summary, children: summary })
+          /* @__PURE__ */ jsx13("p", { className: "ct-title", children: title }),
+          /* @__PURE__ */ jsx13("p", { className: "ct-summary", children: summary })
         ] })
       ]
     }
@@ -851,24 +892,21 @@ var CardThumbnailVariant = ({
 };
 
 // components/Card/Card.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var Card = (props) => {
   if (props.variant === "primary") {
-    return /* @__PURE__ */ jsx13(CardPrimaryVariant, { ...props });
+    return /* @__PURE__ */ jsx14(CardPrimaryVariant, { ...props });
   }
   if (props.variant === "secondary") {
-    return /* @__PURE__ */ jsx13(CardSecondaryVariant, { ...props });
+    return /* @__PURE__ */ jsx14(CardSecondaryVariant, { ...props });
   }
-  return /* @__PURE__ */ jsx13(CardThumbnailVariant, { ...props });
+  return /* @__PURE__ */ jsx14(CardThumbnailVariant, { ...props });
 };
 
-// primitives/Pagination/Pagination.module.css
-var Pagination_default = {};
-
 // primitives/Pagination/Pagination.tsx
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
-var ChevronLeft = () => /* @__PURE__ */ jsx14("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx14("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var ChevronRight = () => /* @__PURE__ */ jsx14("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx14("path", { d: "M6 4L10 8L6 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+var ChevronLeft = () => /* @__PURE__ */ jsx15("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx15("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var ChevronRight = () => /* @__PURE__ */ jsx15("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx15("path", { d: "M6 4L10 8L6 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function getPageItems(currentPage, totalPages) {
   if (totalPages <= 5) {
     return Array.from({ length: totalPages }, (_, i) => i + 1);
@@ -890,28 +928,28 @@ var Pagination = ({
   const items = getPageItems(currentPage, totalPages);
   const isPrevDisabled = currentPage <= 1;
   const isNextDisabled = currentPage >= totalPages;
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "nav",
     {
-      className: [Pagination_default.pagination, className ?? ""].filter(Boolean).join(" "),
+      className: ["pagination", className ?? ""].filter(Boolean).join(" "),
       "aria-label": "Pagination navigation",
       children: [
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           "button",
           {
-            className: [Pagination_default.navButton, isPrevDisabled ? Pagination_default.navButtonDisabled : ""].filter(Boolean).join(" "),
+            className: ["navButton", isPrevDisabled ? "navButtonDisabled" : ""].filter(Boolean).join(" "),
             onClick: () => onPageChange(currentPage - 1),
             disabled: isPrevDisabled,
             "aria-label": "Previous page",
-            children: /* @__PURE__ */ jsx14("span", { className: Pagination_default.navIcon, children: /* @__PURE__ */ jsx14(ChevronLeft, {}) })
+            children: /* @__PURE__ */ jsx15("span", { className: "navIcon", children: /* @__PURE__ */ jsx15(ChevronLeft, {}) })
           }
         ),
         items.map((item, index) => {
           if (item === "ellipsis-left" || item === "ellipsis-right") {
-            return /* @__PURE__ */ jsx14(
+            return /* @__PURE__ */ jsx15(
               "span",
               {
-                className: Pagination_default.ellipsis,
+                className: "ellipsis",
                 "aria-hidden": "true",
                 children: "\u2026"
               },
@@ -919,10 +957,10 @@ var Pagination = ({
             );
           }
           const isSelected = item === currentPage;
-          return /* @__PURE__ */ jsx14(
+          return /* @__PURE__ */ jsx15(
             "button",
             {
-              className: [Pagination_default.pageButton, isSelected ? Pagination_default.pageButtonSelected : ""].filter(Boolean).join(" "),
+              className: ["pageButton", isSelected ? "pageButtonSelected" : ""].filter(Boolean).join(" "),
               onClick: () => {
                 if (!isSelected) onPageChange(item);
               },
@@ -933,30 +971,1486 @@ var Pagination = ({
             item
           );
         }),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           "button",
           {
-            className: [Pagination_default.navButton, isNextDisabled ? Pagination_default.navButtonDisabled : ""].filter(Boolean).join(" "),
+            className: ["navButton", isNextDisabled ? "navButtonDisabled" : ""].filter(Boolean).join(" "),
             onClick: () => onPageChange(currentPage + 1),
             disabled: isNextDisabled,
             "aria-label": "Next page",
-            children: /* @__PURE__ */ jsx14("span", { className: Pagination_default.navIcon, children: /* @__PURE__ */ jsx14(ChevronRight, {}) })
+            children: /* @__PURE__ */ jsx15("span", { className: "navIcon", children: /* @__PURE__ */ jsx15(ChevronRight, {}) })
           }
         )
       ]
     }
   );
 };
+
+// templates/FeatureCards/FeatureCards.tsx
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+var FeatureCards = ({
+  sectionTitle,
+  sectionDescription,
+  showLink = false,
+  linkText = "Learn more",
+  onLinkClick,
+  cardColorScheme = "image",
+  cards
+}) => {
+  return /* @__PURE__ */ jsx16("section", { className: "fc-section", children: /* @__PURE__ */ jsxs15("div", { className: "fc-container", children: [
+    /* @__PURE__ */ jsxs15("div", { className: "fc-header", children: [
+      /* @__PURE__ */ jsx16("h2", { className: "fc-sectionTitle", children: sectionTitle }),
+      sectionDescription && /* @__PURE__ */ jsx16("p", { className: "fc-sectionDescription", children: sectionDescription }),
+      showLink && /* @__PURE__ */ jsx16(
+        Link,
+        {
+          colorScheme: "coral",
+          label: linkText,
+          onClick: onLinkClick
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx16("div", { className: "fc-grid", children: cards.map((card, index) => /* @__PURE__ */ jsx16(
+      Card,
+      {
+        variant: "primary",
+        colorScheme: card.colorScheme ?? cardColorScheme,
+        title: card.title,
+        description: card.description,
+        image: card.image,
+        imageAlt: card.imageAlt,
+        showLink: card.showLink,
+        linkText: card.linkText,
+        onLinkClick: card.onLinkClick
+      },
+      index
+    )) })
+  ] }) });
+};
+
+// templates/Footer/Footer.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+var ExternalLinkIcon = () => /* @__PURE__ */ jsx17(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ jsx17(
+      "path",
+      {
+        d: "M2 2H10M10 2V10M10 2L2 10",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+var ChevronDownIcon2 = () => /* @__PURE__ */ jsx17(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ jsx17(
+      "path",
+      {
+        d: "M2 4L6 8L10 4",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+var DerivGoBadges = ({
+  googlePlayBadge,
+  appStoreBadge,
+  huaweiBadge,
+  availabilityNote
+}) => /* @__PURE__ */ jsxs16("div", { className: "footer__app-badges", children: [
+  googlePlayBadge && /* @__PURE__ */ jsx17(
+    "a",
+    {
+      href: googlePlayBadge.href,
+      className: googlePlayBadge.icon ? "footer__app-badge-svg" : "footer__app-badge",
+      "aria-label": googlePlayBadge.imageAlt,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children: googlePlayBadge.icon ?? /* @__PURE__ */ jsx17("img", { src: googlePlayBadge.imageSrc, alt: googlePlayBadge.imageAlt })
+    }
+  ),
+  appStoreBadge && /* @__PURE__ */ jsx17(
+    "a",
+    {
+      href: appStoreBadge.href,
+      className: appStoreBadge.icon ? "footer__app-badge-svg" : "footer__app-badge",
+      "aria-label": appStoreBadge.imageAlt,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children: appStoreBadge.icon ?? /* @__PURE__ */ jsx17("img", { src: appStoreBadge.imageSrc, alt: appStoreBadge.imageAlt })
+    }
+  ),
+  huaweiBadge && /* @__PURE__ */ jsx17(
+    "a",
+    {
+      href: huaweiBadge.href,
+      className: huaweiBadge.icon ? "footer__app-badge-svg" : "footer__app-badge",
+      "aria-label": huaweiBadge.imageAlt,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children: huaweiBadge.icon ?? /* @__PURE__ */ jsx17("img", { src: huaweiBadge.imageSrc, alt: huaweiBadge.imageAlt })
+    }
+  ),
+  availabilityNote && /* @__PURE__ */ jsx17("p", { className: "footer__app-note", children: availabilityNote })
+] });
+var NavLink = ({ label, href, isExternal, onClick }) => /* @__PURE__ */ jsxs16(
+  "a",
+  {
+    href,
+    className: "footer__nav-link",
+    onClick,
+    ...isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {},
+    children: [
+      label,
+      isExternal && /* @__PURE__ */ jsx17(ExternalLinkIcon, {})
+    ]
+  }
+);
+var Footer = ({
+  logoSrc,
+  logoAlt = "Deriv",
+  navColumns,
+  socialLinks = [],
+  derivGo,
+  investorsInPeopleSrc,
+  investorsInPeopleAlt = "Investors in People - Platinum",
+  licenseText,
+  riskWarningText,
+  aiSummary,
+  className,
+  ...props
+}) => {
+  const allSections = navColumns.flat();
+  const [openSections, setOpenSections] = useState5(/* @__PURE__ */ new Set());
+  const toggleSection = (index) => {
+    setOpenSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return next;
+    });
+  };
+  const aiLabel = aiSummary?.label ?? "Ask AI for a summary of Deriv";
+  return /* @__PURE__ */ jsx17(
+    "footer",
+    {
+      className: ["footer", className].filter(Boolean).join(" "),
+      ...props,
+      children: /* @__PURE__ */ jsxs16("div", { className: "footer__inner", children: [
+        /* @__PURE__ */ jsxs16("div", { className: "footer__header", children: [
+          /* @__PURE__ */ jsx17("div", { className: "footer__logo-wrapper", children: /* @__PURE__ */ jsx17(
+            "img",
+            {
+              src: logoSrc,
+              alt: logoAlt,
+              className: "footer__logo"
+            }
+          ) }),
+          aiSummary && /* @__PURE__ */ jsxs16("div", { className: "footer__ai-bar footer__ai-bar--inline", children: [
+            /* @__PURE__ */ jsx17("span", { className: "footer__ai-bar-label", children: aiLabel }),
+            /* @__PURE__ */ jsx17("div", { className: "footer__ai-bar-icons", children: aiSummary.items.map((item, i) => /* @__PURE__ */ jsx17(
+              "a",
+              {
+                href: item.href,
+                className: "footer__ai-icon",
+                "aria-label": item.imageAlt,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: /* @__PURE__ */ jsx17("img", { src: item.imageSrc, alt: item.imageAlt })
+              },
+              i
+            )) })
+          ] }),
+          /* @__PURE__ */ jsx17("div", { className: "footer__social footer__social--in-header", children: socialLinks.map((link, i) => /* @__PURE__ */ jsx17(
+            "a",
+            {
+              href: link.href,
+              className: "footer__social-icon",
+              "aria-label": link.ariaLabel,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children: link.icon
+            },
+            i
+          )) })
+        ] }),
+        aiSummary && /* @__PURE__ */ jsx17("div", { className: "footer__ai-section", children: /* @__PURE__ */ jsxs16("div", { className: "footer__ai-bar footer__ai-bar--block", children: [
+          /* @__PURE__ */ jsx17("span", { className: "footer__ai-bar-label", children: aiLabel }),
+          /* @__PURE__ */ jsx17("div", { className: "footer__ai-bar-icons", children: aiSummary.items.map((item, i) => /* @__PURE__ */ jsx17(
+            "a",
+            {
+              href: item.href,
+              className: "footer__ai-icon",
+              "aria-label": item.imageAlt,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children: /* @__PURE__ */ jsx17("img", { src: item.imageSrc, alt: item.imageAlt })
+            },
+            i
+          )) })
+        ] }) }),
+        /* @__PURE__ */ jsxs16("div", { className: "footer__nav footer__nav--columns", children: [
+          navColumns.map((column, colIdx) => /* @__PURE__ */ jsx17("div", { className: "footer__column", children: column.map((section, secIdx) => /* @__PURE__ */ jsxs16("div", { className: "footer__nav-section", children: [
+            /* @__PURE__ */ jsx17("p", { className: "footer__nav-title", children: section.title }),
+            /* @__PURE__ */ jsx17("ul", { className: "footer__nav-links", children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx17("li", { children: /* @__PURE__ */ jsx17(NavLink, { ...link }) }, linkIdx)) })
+          ] }, secIdx)) }, colIdx)),
+          /* @__PURE__ */ jsxs16("div", { className: "footer__sidebar", children: [
+            investorsInPeopleSrc && /* @__PURE__ */ jsx17("div", { className: "footer__investors-card", children: /* @__PURE__ */ jsx17(
+              "img",
+              {
+                src: investorsInPeopleSrc,
+                alt: investorsInPeopleAlt,
+                className: "footer__investors-img"
+              }
+            ) }),
+            derivGo && /* @__PURE__ */ jsxs16("div", { className: "footer__deriv-go-card", children: [
+              /* @__PURE__ */ jsxs16("div", { className: "footer__deriv-go-header", children: [
+                /* @__PURE__ */ jsx17(
+                  "img",
+                  {
+                    src: derivGo.logoSrc,
+                    alt: derivGo.logoAlt ?? "Deriv GO",
+                    className: "footer__deriv-go-logo"
+                  }
+                ),
+                /* @__PURE__ */ jsx17("span", { className: "footer__deriv-go-title", children: derivGo.title ?? "Deriv GO" })
+              ] }),
+              /* @__PURE__ */ jsx17("p", { className: "footer__deriv-go-desc", children: derivGo.description ?? "Trade multipliers on our mobile app." }),
+              (derivGo.qrCodeSrc || derivGo.qrCodeIcon) && /* @__PURE__ */ jsxs16("div", { className: "footer__deriv-go-qr", children: [
+                derivGo.qrCodeIcon ? /* @__PURE__ */ jsx17("div", { className: "footer__deriv-go-qr-icon", children: derivGo.qrCodeIcon }) : /* @__PURE__ */ jsx17(
+                  "img",
+                  {
+                    src: derivGo.qrCodeSrc,
+                    alt: derivGo.qrCodeAlt ?? "Scan to download",
+                    className: "footer__deriv-go-qr-img"
+                  }
+                ),
+                /* @__PURE__ */ jsx17("span", { className: "footer__deriv-go-qr-label", children: "Scan to download" })
+              ] }),
+              /* @__PURE__ */ jsx17(
+                DerivGoBadges,
+                {
+                  googlePlayBadge: derivGo.googlePlayBadge,
+                  appStoreBadge: derivGo.appStoreBadge,
+                  huaweiBadge: derivGo.huaweiBadge,
+                  availabilityNote: derivGo.availabilityNote
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx17("div", { className: "footer__nav footer__nav--accordion", children: allSections.map((section, idx) => {
+          const isOpen = openSections.has(idx);
+          return /* @__PURE__ */ jsxs16(
+            "div",
+            {
+              className: [
+                "footer__accordion-item",
+                isOpen && "footer__accordion-item--open"
+              ].filter(Boolean).join(" "),
+              children: [
+                /* @__PURE__ */ jsxs16(
+                  "button",
+                  {
+                    type: "button",
+                    className: "footer__accordion-toggle",
+                    onClick: () => toggleSection(idx),
+                    "aria-expanded": isOpen,
+                    children: [
+                      /* @__PURE__ */ jsx17("span", { className: "footer__accordion-label", children: section.title }),
+                      /* @__PURE__ */ jsx17("span", { className: "footer__accordion-chevron", children: /* @__PURE__ */ jsx17(ChevronDownIcon2, {}) })
+                    ]
+                  }
+                ),
+                isOpen && /* @__PURE__ */ jsx17("ul", { className: "footer__accordion-links", children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx17("li", { children: /* @__PURE__ */ jsx17(NavLink, { ...link }) }, linkIdx)) })
+              ]
+            },
+            idx
+          );
+        }) }),
+        socialLinks.length > 0 && /* @__PURE__ */ jsx17("div", { className: "footer__social footer__social--standalone", children: socialLinks.map((link, i) => /* @__PURE__ */ jsx17(
+          "a",
+          {
+            href: link.href,
+            className: "footer__social-icon",
+            "aria-label": link.ariaLabel,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: link.icon
+          },
+          i
+        )) }),
+        derivGo && /* @__PURE__ */ jsxs16("div", { className: "footer__deriv-go-banner", children: [
+          /* @__PURE__ */ jsxs16("div", { className: "footer__deriv-go-banner-info", children: [
+            /* @__PURE__ */ jsxs16("div", { className: "footer__deriv-go-header", children: [
+              /* @__PURE__ */ jsx17(
+                "img",
+                {
+                  src: derivGo.logoSrc,
+                  alt: derivGo.logoAlt ?? "Deriv GO",
+                  className: "footer__deriv-go-logo"
+                }
+              ),
+              /* @__PURE__ */ jsx17("span", { className: "footer__deriv-go-title", children: derivGo.title ?? "Deriv GO" })
+            ] }),
+            /* @__PURE__ */ jsx17("p", { className: "footer__deriv-go-desc", children: derivGo.description ?? "Trade multipliers on our mobile app." })
+          ] }),
+          /* @__PURE__ */ jsx17("div", { className: "footer__deriv-go-banner-badges", children: /* @__PURE__ */ jsx17(
+            DerivGoBadges,
+            {
+              googlePlayBadge: derivGo.googlePlayBadge,
+              appStoreBadge: derivGo.appStoreBadge,
+              huaweiBadge: derivGo.huaweiBadge,
+              availabilityNote: derivGo.availabilityNote
+            }
+          ) })
+        ] }),
+        (licenseText || riskWarningText) && /* @__PURE__ */ jsxs16("div", { className: "footer__legal-block", children: [
+          licenseText && /* @__PURE__ */ jsx17("div", { className: "footer__license", children: licenseText }),
+          riskWarningText && /* @__PURE__ */ jsx17("div", { className: "footer__risk-warning", children: /* @__PURE__ */ jsx17("p", { className: "footer__risk-warning-text", children: riskWarningText }) })
+        ] }),
+        investorsInPeopleSrc && /* @__PURE__ */ jsx17("div", { className: "footer__investors-stacked", children: /* @__PURE__ */ jsx17(
+          "img",
+          {
+            src: investorsInPeopleSrc,
+            alt: investorsInPeopleAlt,
+            className: "footer__investors-img"
+          }
+        ) })
+      ] })
+    }
+  );
+};
+
+// templates/Hero/Hero.tsx
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+var Visual = ({
+  src,
+  className,
+  alt = ""
+}) => /* @__PURE__ */ jsx18("div", { className, children: typeof src === "string" ? /* @__PURE__ */ jsx18("img", { src, alt }) : src });
+var Hero = ({
+  variant,
+  subtitle,
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  backgroundImageSrc,
+  heroImage,
+  leftVisual,
+  rightVisual,
+  className,
+  ...props
+}) => {
+  const variantClass = `hero--${variant}`;
+  const textBlock = /* @__PURE__ */ jsxs17("div", { className: "hero__text", children: [
+    subtitle && /* @__PURE__ */ jsx18("p", { className: "hero__subtitle", children: subtitle }),
+    /* @__PURE__ */ jsx18("p", { className: "hero__title", children: title }),
+    description && /* @__PURE__ */ jsx18("p", { className: "hero__description", children: description })
+  ] });
+  const buttonBlock = (primaryButton || secondaryButton) && /* @__PURE__ */ jsxs17("div", { className: "hero__buttons", children: [
+    primaryButton && (primaryButton.href ? /* @__PURE__ */ jsx18("a", { href: primaryButton.href, children: /* @__PURE__ */ jsx18(
+      Button,
+      {
+        colorScheme: "coral",
+        variant: "primary",
+        label: primaryButton.label,
+        onClick: primaryButton.onClick
+      }
+    ) }) : /* @__PURE__ */ jsx18(
+      Button,
+      {
+        colorScheme: "coral",
+        variant: "primary",
+        label: primaryButton.label,
+        onClick: primaryButton.onClick
+      }
+    )),
+    secondaryButton && (secondaryButton.href ? /* @__PURE__ */ jsx18("a", { href: secondaryButton.href, children: /* @__PURE__ */ jsx18(
+      Button,
+      {
+        colorScheme: "white",
+        variant: "secondary",
+        label: secondaryButton.label,
+        onClick: secondaryButton.onClick
+      }
+    ) }) : /* @__PURE__ */ jsx18(
+      Button,
+      {
+        colorScheme: "white",
+        variant: "secondary",
+        label: secondaryButton.label,
+        onClick: secondaryButton.onClick
+      }
+    ))
+  ] });
+  if (variant === "homepage") {
+    return /* @__PURE__ */ jsxs17(
+      "section",
+      {
+        className: ["hero", variantClass, className].filter(Boolean).join(" "),
+        ...props,
+        children: [
+          backgroundImageSrc && /* @__PURE__ */ jsx18(
+            "img",
+            {
+              src: backgroundImageSrc,
+              alt: "",
+              className: "hero__bg-image",
+              "aria-hidden": "true"
+            }
+          ),
+          heroImage && /* @__PURE__ */ jsx18(
+            Visual,
+            {
+              src: heroImage,
+              className: "hero__image-slot",
+              alt: ""
+            }
+          ),
+          /* @__PURE__ */ jsx18("div", { className: "hero__overlay", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx18("div", { className: "hero__inner", children: /* @__PURE__ */ jsx18("div", { className: "hero__content", children: /* @__PURE__ */ jsx18("div", { className: "hero__left", children: /* @__PURE__ */ jsxs17("div", { className: "hero__body", children: [
+            textBlock,
+            buttonBlock
+          ] }) }) }) })
+        ]
+      }
+    );
+  }
+  if (variant === "full-image") {
+    return /* @__PURE__ */ jsxs17(
+      "section",
+      {
+        className: ["hero", variantClass, className].filter(Boolean).join(" "),
+        ...props,
+        children: [
+          backgroundImageSrc && /* @__PURE__ */ jsx18(
+            "img",
+            {
+              src: backgroundImageSrc,
+              alt: "",
+              className: "hero__bg-image",
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx18("div", { className: "hero__overlay", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx18("div", { className: "hero__inner", children: /* @__PURE__ */ jsx18("div", { className: "hero__content", children: /* @__PURE__ */ jsxs17("div", { className: "hero__body", children: [
+            textBlock,
+            buttonBlock
+          ] }) }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs17(
+    "section",
+    {
+      className: ["hero", variantClass, className].filter(Boolean).join(" "),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx18("div", { className: "hero__grid", "aria-hidden": "true" }),
+        variant === "visuals" && leftVisual && /* @__PURE__ */ jsx18(
+          Visual,
+          {
+            src: leftVisual,
+            className: "hero__visual hero__visual--left",
+            alt: ""
+          }
+        ),
+        variant === "visuals" && rightVisual && /* @__PURE__ */ jsx18(
+          Visual,
+          {
+            src: rightVisual,
+            className: "hero__visual hero__visual--right",
+            alt: ""
+          }
+        ),
+        /* @__PURE__ */ jsx18("div", { className: "hero__overlay", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx18("div", { className: "hero__inner", children: /* @__PURE__ */ jsx18("div", { className: "hero__content", children: /* @__PURE__ */ jsxs17("div", { className: "hero__body", children: [
+          textBlock,
+          buttonBlock
+        ] }) }) })
+      ]
+    }
+  );
+};
+
+// templates/Stats/Stats.tsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState6 } from "react";
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+var INTERVAL_MS = 2e3;
+var TRANSITION = "transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1)";
+function relativePos(index, active, total) {
+  const raw = ((index - active) % total + total) % total;
+  return raw > total / 2 ? raw - total : raw;
+}
+function getStatStyle(rel) {
+  if (rel === 0) {
+    return { transform: "translateY(-50%) scale(1)", opacity: 1, zIndex: 2, transition: TRANSITION };
+  }
+  if (rel === -1) {
+    return { transform: "translateY(calc(-50% - 110%)) scale(0.7)", opacity: 1, zIndex: 1, transition: TRANSITION };
+  }
+  if (rel === 1) {
+    return { transform: "translateY(calc(-50% + 110%)) scale(0.7)", opacity: 1, zIndex: 1, transition: TRANSITION };
+  }
+  return {
+    transform: rel < 0 ? "translateY(calc(-50% - 110%)) scale(0.4)" : "translateY(calc(-50% + 110%)) scale(0.4)",
+    opacity: 0,
+    zIndex: 0,
+    transition: TRANSITION
+  };
+}
+var AwardBadge = ({ imageSrc, imageAlt = "" }) => /* @__PURE__ */ jsx19("div", { className: "stats__award", children: /* @__PURE__ */ jsx19("img", { src: imageSrc, alt: imageAlt, className: "stats__award-image" }) });
+var Stats = ({
+  title,
+  description,
+  stats,
+  leftAwards = [],
+  rightAwards = [],
+  className,
+  ...props
+}) => {
+  const [activeIndex, setActiveIndex] = useState6(0);
+  const intervalRef = useRef3(null);
+  const hasAwards = leftAwards.length > 0 || rightAwards.length > 0;
+  const allAwards = [...leftAwards, ...rightAwards];
+  const total = stats.length;
+  useEffect3(() => {
+    if (total <= 1) return;
+    intervalRef.current = setInterval(() => {
+      setActiveIndex((prev) => (prev + 1) % total);
+    }, INTERVAL_MS);
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [total]);
+  return /* @__PURE__ */ jsx19(
+    "section",
+    {
+      className: ["stats", className].filter(Boolean).join(" "),
+      ...props,
+      children: /* @__PURE__ */ jsxs18("div", { className: "stats__inner", children: [
+        /* @__PURE__ */ jsxs18("div", { className: "stats__header", children: [
+          /* @__PURE__ */ jsx19("h2", { className: "stats__title", children: title }),
+          description && /* @__PURE__ */ jsx19("p", { className: "stats__description", children: description })
+        ] }),
+        /* @__PURE__ */ jsxs18("div", { className: "stats__content", children: [
+          leftAwards.length > 0 && /* @__PURE__ */ jsx19("div", { className: "stats__awards-col stats__awards-col--left", children: leftAwards.map((award, i) => /* @__PURE__ */ jsx19(AwardBadge, { ...award }, i)) }),
+          /* @__PURE__ */ jsx19("div", { className: "stats__card", children: /* @__PURE__ */ jsxs18("div", { className: "stats__card-track", children: [
+            /* @__PURE__ */ jsx19("div", { className: "stats__fade stats__fade--top", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx19("div", { className: "stats__fade stats__fade--bottom", "aria-hidden": "true" }),
+            stats.map((stat, i) => {
+              const rel = relativePos(i, activeIndex, total);
+              const active = rel === 0;
+              return /* @__PURE__ */ jsxs18(
+                "div",
+                {
+                  className: [
+                    "stats__stat",
+                    active ? "stats__stat--active" : "stats__stat--inactive"
+                  ].join(" "),
+                  style: getStatStyle(rel),
+                  "aria-hidden": !active,
+                  children: [
+                    /* @__PURE__ */ jsx19("span", { className: "stats__stat-value", children: stat.value }),
+                    /* @__PURE__ */ jsx19("span", { className: "stats__stat-label", children: stat.label })
+                  ]
+                },
+                i
+              );
+            })
+          ] }) }),
+          rightAwards.length > 0 && /* @__PURE__ */ jsx19("div", { className: "stats__awards-col stats__awards-col--right", children: rightAwards.map((award, i) => /* @__PURE__ */ jsx19(AwardBadge, { ...award }, i)) }),
+          hasAwards && /* @__PURE__ */ jsx19("div", { className: "stats__awards-mobile", children: allAwards.map((award, i) => /* @__PURE__ */ jsx19(AwardBadge, { ...award }, i)) })
+        ] })
+      ] })
+    }
+  );
+};
+
+// templates/Scrollytelling/Scrollytelling.tsx
+import { useEffect as useEffect4, useRef as useRef4, useState as useState7 } from "react";
+import { DotLottieReact } from "@lottiefiles/dotlottie-react";
+import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+var SCROLLYTELLING_DATA = [
+  {
+    title: "Forex",
+    description: "Trade the most popular currency pairs with high leverage, tight spreads, and fast execution.",
+    linkLabel: "Learn more",
+    link: "/markets/forex",
+    mediaUrl: "https://cdn.prod.website-files.com/66fbaad381fa6866fa4991f3/675a906489e5aadf94e501c4_Forex.lottie"
+  },
+  {
+    title: "Derived Indices",
+    description: "Trade 24/7 on exclusive Synthetic and Derived Indices. Choose volatility levels that match your strategy.",
+    linkLabel: "Learn more",
+    link: "/markets/derived-indices/synthetic-indices",
+    mediaUrl: "https://cdn.prod.website-files.com/66fbaad381fa6866fa4991f3/675a9064588b0d2709e7ceac_Derived%20Indices.lottie"
+  },
+  {
+    title: "Stocks",
+    description: "Trade global market leaders like Apple, Tesla, and NVIDIA.",
+    linkLabel: "Learn more",
+    link: "/markets/stocks",
+    mediaUrl: "https://cdn.prod.website-files.com/66fbaad381fa6866fa4991f3/675a9064892f97175b724a9c_Stocks.lottie"
+  },
+  {
+    title: "Commodities",
+    description: "Trade gold, silver, oil, natural gas, sugar, and more.",
+    linkLabel: "Learn more",
+    link: "/markets/commodities",
+    mediaUrl: "https://cdn.prod.website-files.com/66fbaad381fa6866fa4991f3/675a9064edd96a014a6092cf_Commodities.lottie"
+  },
+  {
+    title: "Cryptos",
+    description: "Trade round the clock on the volatility of cryptocurrencies like Bitcoin and Ethereum.",
+    linkLabel: "Learn more",
+    link: "/markets/cryptocurrencies",
+    mediaUrl: "https://cdn.prod.website-files.com/66fbaad381fa6866fa4991f3/675a90647b8d9652a28b94e3_Crypto.lottie"
+  },
+  {
+    title: "Stock Indices",
+    description: "Trade offerings that track the top global stock indices.",
+    linkLabel: "Learn more",
+    link: "/markets/stock-indices",
+    mediaUrl: "https://cdn.prod.website-files.com/66fbaad381fa6866fa4991f3/675a9064f2c16e4e0732abfb_Stock%20Indices.lottie"
+  }
+];
+var ChevronRight2 = () => /* @__PURE__ */ jsx20(
+  "svg",
+  {
+    className: "scrolly__item-link-icon",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx20(
+      "path",
+      {
+        d: "M6 3l5 5-5 5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+function resolveMediaType(item) {
+  if (item.mediaType) return item.mediaType;
+  return item.mediaUrl.split("?")[0].endsWith(".lottie") ? "lottie" : "image";
+}
+var MediaRenderer = ({ item, active }) => {
+  if (resolveMediaType(item) === "lottie") {
+    return /* @__PURE__ */ jsx20(
+      DotLottieReact,
+      {
+        src: item.mediaUrl,
+        loop: true,
+        autoplay: active
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx20(
+    "img",
+    {
+      src: item.mediaUrl,
+      alt: item.title,
+      loading: "lazy"
+    }
+  );
+};
+var Scrollytelling = ({
+  header,
+  items,
+  variant = "media-right",
+  className,
+  ...props
+}) => {
+  const [activeIndex, setActiveIndex] = useState7(0);
+  const itemRefs = useRef4([]);
+  useEffect4(() => {
+    const elements = itemRefs.current.filter(Boolean);
+    if (!elements.length) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const idx = itemRefs.current.indexOf(
+              entry.target
+            );
+            if (idx !== -1) setActiveIndex(idx);
+          }
+        });
+      },
+      {
+        /* Fire when 50 % of the text block is visible.
+           rootMargin trims the effective viewport to its
+           middle third, preventing accidental fires when
+           items are only just entering / leaving the screen. */
+        threshold: 0.5,
+        rootMargin: "-15% 0px -15% 0px"
+      }
+    );
+    elements.forEach((el) => observer.observe(el));
+    return () => observer.disconnect();
+  }, [items.length]);
+  const rootClass = [
+    "scrolly",
+    `scrolly--${variant}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx20("section", { className: rootClass, ...props, children: /* @__PURE__ */ jsxs19("div", { className: "scrolly__inner", children: [
+    /* @__PURE__ */ jsx20("h2", { className: "scrolly__header", children: header }),
+    /* @__PURE__ */ jsxs19("div", { className: "scrolly__layout", children: [
+      /* @__PURE__ */ jsx20("div", { className: "scrolly__media-col", "aria-hidden": "true", children: /* @__PURE__ */ jsx20("div", { className: "scrolly__media-wrap", children: items.map((item, i) => /* @__PURE__ */ jsx20(
+        "div",
+        {
+          className: [
+            "scrolly__media-item",
+            i === activeIndex ? "scrolly__media-item--active" : ""
+          ].filter(Boolean).join(" "),
+          children: /* @__PURE__ */ jsx20(
+            MediaRenderer,
+            {
+              item,
+              active: i === activeIndex
+            }
+          )
+        },
+        i
+      )) }) }),
+      /* @__PURE__ */ jsx20("div", { className: "scrolly__content-col", children: items.map((item, i) => /* @__PURE__ */ jsxs19(
+        "div",
+        {
+          ref: (el) => {
+            itemRefs.current[i] = el;
+          },
+          className: [
+            "scrolly__item",
+            i === activeIndex ? "scrolly__item--active" : "scrolly__item--inactive"
+          ].join(" "),
+          children: [
+            /* @__PURE__ */ jsx20("h3", { className: "scrolly__item-title", children: item.title }),
+            /* @__PURE__ */ jsx20("p", { className: "scrolly__item-desc", children: item.description }),
+            /* @__PURE__ */ jsxs19(
+              "a",
+              {
+                href: item.link,
+                className: "scrolly__item-link",
+                children: [
+                  /* @__PURE__ */ jsx20("span", { children: item.linkLabel }),
+                  /* @__PURE__ */ jsx20(ChevronRight2, {})
+                ]
+              }
+            )
+          ]
+        },
+        i
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx20("div", { className: "scrolly__mobile-list", children: items.map((item, i) => /* @__PURE__ */ jsxs19("div", { className: "scrolly__mobile-item", children: [
+      /* @__PURE__ */ jsx20("h3", { className: "scrolly__item-title", children: item.title }),
+      /* @__PURE__ */ jsx20("p", { className: "scrolly__item-desc", children: item.description }),
+      /* @__PURE__ */ jsxs19(
+        "a",
+        {
+          href: item.link,
+          className: "scrolly__item-link",
+          children: [
+            /* @__PURE__ */ jsx20("span", { children: "Learn more" }),
+            /* @__PURE__ */ jsx20(ChevronRight2, {})
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx20("div", { className: "scrolly__mobile-media", children: /* @__PURE__ */ jsx20(MediaRenderer, { item, active: true }) })
+    ] }, i)) })
+  ] }) });
+};
+
+// templates/StickyStackedCards/StickyStackedCards.tsx
+import { useEffect as useEffect5, useRef as useRef5 } from "react";
+import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+var STEPS_DATA = [
+  {
+    title: "Sign up",
+    description: "Sign up in minutes. Practise with a zero-risk demo account.",
+    imageUrl: "https://cdn.prod.website-files.com/66585fe0e1dc7e70cc75d440/677cfad9dd757e95ee7fb4d9_image%20phone.webp",
+    theme: "light"
+  },
+  {
+    title: "Deposit",
+    description: "Use your favourite local payment method to fund your account.",
+    imageUrl: "https://cdn.prod.website-files.com/66585fe0e1dc7e70cc75d440/6757df583bf331c84b6c6a61_card-2.webp",
+    theme: "coral"
+  },
+  {
+    title: "Trade",
+    description: "Start your trading journey.",
+    imageUrl: "https://cdn.prod.website-files.com/66585fe0e1dc7e70cc75d440/6757df583bf331c84b6c6a59_card-3.webp",
+    theme: "dark"
+  }
+];
+var MIN_SCALE = { 0: 0.88, 1: 0.94 };
+var StickyStackedCards = ({
+  header,
+  items,
+  className,
+  ...props
+}) => {
+  const cardRefs = useRef5([]);
+  useEffect5(() => {
+    if (typeof window === "undefined") return;
+    let rafId = 0;
+    const update = () => {
+      const cards = cardRefs.current.filter(Boolean);
+      const n = cards.length;
+      cards.forEach((card, i) => {
+        const minScale = MIN_SCALE[i];
+        if (minScale === void 0) {
+          card.style.setProperty("--card-scale", "1");
+          return;
+        }
+        const nextCard = cards[i + 1];
+        if (!nextCard) return;
+        const cardRect = card.getBoundingClientRect();
+        const nextRect = nextCard.getBoundingClientRect();
+        const cardHeight = cardRect.height;
+        const gap = nextRect.top - cardRect.top;
+        const progress = Math.max(0, Math.min(1, 1 - gap / cardHeight));
+        const scale = 1 - (1 - minScale) * progress;
+        card.style.setProperty("--card-scale", String(+scale.toFixed(4)));
+      });
+    };
+    const onScroll = () => {
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(update);
+    };
+    window.addEventListener("scroll", onScroll, { passive: true });
+    update();
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      cancelAnimationFrame(rafId);
+    };
+  }, [items.length]);
+  return /* @__PURE__ */ jsx21(
+    "section",
+    {
+      className: ["ssc", className].filter(Boolean).join(" "),
+      ...props,
+      children: /* @__PURE__ */ jsxs20("div", { className: "ssc__inner", children: [
+        /* @__PURE__ */ jsx21("h2", { className: "ssc__header", children: header }),
+        /* @__PURE__ */ jsx21("div", { className: "ssc__track", children: items.map((item, i) => /* @__PURE__ */ jsxs20(
+          "div",
+          {
+            ref: (el) => {
+              cardRefs.current[i] = el;
+            },
+            className: [
+              "ssc__card",
+              `ssc__card--${item.theme ?? "light"}`
+            ].join(" "),
+            style: {
+              zIndex: i + 1,
+              /*
+               * PEEK OFFSET — every card gets i × peek-offset so each
+               * prior card shows as a thin strip at the top of the next.
+               *
+               * Example with 3 cards, peek = 16px:
+               *   Card 0 (Sign up)  → 80px
+               *   Card 1 (Deposit)  → 96px  (Sign up peeks 16px above)
+               *   Card 2 (Trade)    → 112px (Deposit peeks 16px, Sign up 32px above)
+               *
+               * Final state: two 16px colour strips at top, Trade fills the rest.
+               */
+              top: `calc(var(--ssc-sticky-top) + ${i} * var(--ssc-peek-offset))`
+            },
+            children: [
+              /* @__PURE__ */ jsxs20("div", { className: "ssc__card-content", children: [
+                /* @__PURE__ */ jsx21("h3", { className: "ssc__card-title", children: item.title }),
+                /* @__PURE__ */ jsx21("p", { className: "ssc__card-desc", children: item.description })
+              ] }),
+              /* @__PURE__ */ jsx21("div", { className: "ssc__card-image", children: /* @__PURE__ */ jsx21(
+                "img",
+                {
+                  src: item.imageUrl,
+                  alt: item.title,
+                  loading: i === 0 ? "eager" : "lazy"
+                }
+              ) })
+            ]
+          },
+          i
+        )) })
+      ] })
+    }
+  );
+};
+
+// templates/CTABanner/CTABanner.tsx
+import { useRef as useRef6 } from "react";
+import {
+  motion,
+  useScroll,
+  useSpring,
+  useTransform,
+  useMotionTemplate
+} from "framer-motion";
+import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+var ENTRANCE = {
+  near: 80,
+  mid: 130,
+  far: 180,
+  edge: 240,
+  blurStart: 28
+};
+var SPRING = { stiffness: 80, damping: 30, restDelta: 1e-3 };
+var LOCK_AT = 0.5;
+var PLACEHOLDER_URL = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/68da5c86c91c54f39c86ce1a_footer-member-5.webp";
+var AVATAR_DATA = [
+  /* ── Rank 0 — bottom-centre-ish (dist ≈ 285) ─── */
+  {
+    id: 11,
+    staggerRank: 0,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "45.7%", top: "84.9%" },
+    mobilePos: { left: "calc(50% - var(--ctab-avatar-size) / 2)", top: "81.8%" },
+    mobileVisible: true
+  },
+  /* ── Rank 1 — top-centre (dist ≈ 293) ────────── */
+  {
+    id: 12,
+    staggerRank: 1,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "calc(50% - var(--ctab-avatar-size) / 2)", top: "0%" },
+    mobilePos: { left: "calc(50% - var(--ctab-avatar-size) / 2)", top: "9.2%" },
+    mobileVisible: true
+  },
+  /* ── Rank 2 — right mid-lower (dist ≈ 341) ───── */
+  {
+    id: 10,
+    staggerRank: 2,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "68.5%", top: "70.7%" },
+    mobilePos: null,
+    mobileVisible: false
+  },
+  /* ── Rank 3 — left mid-lower (dist ≈ 342) ────── */
+  {
+    id: 1,
+    staggerRank: 3,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "24.0%", top: "70.7%" },
+    mobilePos: null,
+    mobileVisible: false
+  },
+  /* ── Rank 4 — left upper (dist ≈ 345) ────────── */
+  {
+    id: 3,
+    staggerRank: 4,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "24.0%", top: "14.4%" },
+    mobilePos: { left: "8.3%", top: "18.2%" },
+    mobileVisible: true
+  },
+  /* ── Rank 5 — right upper (dist ≈ 345) ───────── */
+  {
+    id: 6,
+    staggerRank: 5,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "68.5%", top: "14.4%" },
+    mobilePos: { right: "7.8%", top: "18.3%" },
+    mobileVisible: true
+  },
+  /* ── Rank 6 — far-right middle (dist ≈ 572) ──── */
+  {
+    id: 8,
+    staggerRank: 6,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "91.0%", top: "43.0%" },
+    mobilePos: { right: "7.8%", top: "77.2%" },
+    mobileVisible: true
+  },
+  /* ── Rank 7 — far-left middle (dist ≈ 577) ───── */
+  {
+    id: 5,
+    staggerRank: 7,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "1.25%", top: "43.0%" },
+    mobilePos: { left: "8.6%", top: "72.8%" },
+    mobileVisible: true
+  },
+  /* ── Rank 8 — far-right bottom (dist ≈ 639) ──── */
+  {
+    id: 9,
+    staggerRank: 8,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "91.0%", top: "84.9%" },
+    mobilePos: null,
+    mobileVisible: false
+  },
+  /* ── Rank 9 — far-right top (dist ≈ 642) ─────── */
+  {
+    id: 7,
+    staggerRank: 9,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "91.0%", top: "0%" },
+    mobilePos: null,
+    mobileVisible: false
+  },
+  /* ── Rank 10 — far-left bottom (dist ≈ 643) ──── */
+  {
+    id: 2,
+    staggerRank: 10,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "1.25%", top: "84.9%" },
+    mobilePos: null,
+    mobileVisible: false
+  },
+  /* ── Rank 11 — far-left top (dist ≈ 647) ─────── */
+  {
+    id: 4,
+    staggerRank: 11,
+    imageUrl: PLACEHOLDER_URL,
+    desktopPos: { left: "1.25%", top: "0%" },
+    mobilePos: null,
+    mobileVisible: false
+  }
+];
+function useAvatarYValues(smooth) {
+  const y0 = useTransform(smooth, [0, LOCK_AT], [ENTRANCE.near, 0]);
+  const y1 = useTransform(smooth, [0, LOCK_AT], [-ENTRANCE.near, 0]);
+  const y2 = useTransform(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
+  const y3 = useTransform(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
+  const y4 = useTransform(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
+  const y5 = useTransform(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
+  const y6 = useTransform(smooth, [0, LOCK_AT], [0, 0]);
+  const y7 = useTransform(smooth, [0, LOCK_AT], [0, 0]);
+  const y8 = useTransform(smooth, [0, LOCK_AT], [ENTRANCE.far, 0]);
+  const y9 = useTransform(smooth, [0, LOCK_AT], [-ENTRANCE.edge, 0]);
+  const y10 = useTransform(smooth, [0, LOCK_AT], [ENTRANCE.edge, 0]);
+  const y11 = useTransform(smooth, [0, LOCK_AT], [-ENTRANCE.edge, 0]);
+  return [y0, y1, y2, y3, y4, y5, y6, y7, y8, y9, y10, y11];
+}
+function useAvatarXValues(smooth) {
+  const x0 = useTransform(smooth, [0, LOCK_AT], [0, 0]);
+  const x1 = useTransform(smooth, [0, LOCK_AT], [0, 0]);
+  const x2 = useTransform(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
+  const x3 = useTransform(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
+  const x4 = useTransform(smooth, [0, LOCK_AT], [-ENTRANCE.mid, 0]);
+  const x5 = useTransform(smooth, [0, LOCK_AT], [ENTRANCE.mid, 0]);
+  const x6 = useTransform(smooth, [0, LOCK_AT], [ENTRANCE.far, 0]);
+  const x7 = useTransform(smooth, [0, LOCK_AT], [-ENTRANCE.far, 0]);
+  const x8 = useTransform(smooth, [0, LOCK_AT], [ENTRANCE.far, 0]);
+  const x9 = useTransform(smooth, [0, LOCK_AT], [ENTRANCE.edge, 0]);
+  const x10 = useTransform(smooth, [0, LOCK_AT], [-ENTRANCE.edge, 0]);
+  const x11 = useTransform(smooth, [0, LOCK_AT], [-ENTRANCE.edge, 0]);
+  return [x0, x1, x2, x3, x4, x5, x6, x7, x8, x9, x10, x11];
+}
+var CTABanner = ({
+  headline = "Join 3M+ global traders",
+  ctaLabel = "Open account",
+  ctaHref = "#",
+  avatars = AVATAR_DATA,
+  className,
+  ...props
+}) => {
+  const sectionRef = useRef6(null);
+  const { scrollYProgress } = useScroll({
+    target: sectionRef,
+    offset: ["start end", "end start"]
+  });
+  const smooth = useSpring(scrollYProgress, SPRING);
+  const gridOpacity = useTransform(smooth, [0, 0.3], [0, 1]);
+  const heroY = useTransform(smooth, [0, LOCK_AT], [32, 0]);
+  const heroOpacity = useTransform(smooth, [0, 0.3], [0, 1]);
+  const avatarOpacity = useTransform(smooth, [0, 0.25], [0, 1]);
+  const blurPx = useTransform(smooth, [0, 0.3, 0.7, 1], [ENTRANCE.blurStart, 0, 0, ENTRANCE.blurStart]);
+  const avatarFilter = useMotionTemplate`blur(${blurPx}px)`;
+  const avatarYValues = useAvatarYValues(smooth);
+  const avatarXValues = useAvatarXValues(smooth);
+  return /* @__PURE__ */ jsxs21(
+    "section",
+    {
+      ref: sectionRef,
+      className: ["ctab", className].filter(Boolean).join(" "),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx22(
+          motion.div,
+          {
+            className: "ctab__grid",
+            style: { opacity: gridOpacity },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx22("div", { className: "ctab__inner", children: /* @__PURE__ */ jsxs21("div", { className: "ctab__stage", children: [
+          avatars.map((avatar, index) => {
+            const posStyle = {};
+            if (avatar.desktopPos.left) posStyle["--av-d-left"] = avatar.desktopPos.left;
+            if (avatar.desktopPos.right) posStyle["--av-d-right"] = avatar.desktopPos.right;
+            if (avatar.desktopPos.top) posStyle["--av-d-top"] = avatar.desktopPos.top;
+            if (avatar.mobilePos?.left) posStyle["--av-m-left"] = avatar.mobilePos.left;
+            if (avatar.mobilePos?.right) posStyle["--av-m-right"] = avatar.mobilePos.right;
+            if (avatar.mobilePos?.top) posStyle["--av-m-top"] = avatar.mobilePos.top;
+            return /* @__PURE__ */ jsx22(
+              motion.div,
+              {
+                className: [
+                  "ctab__avatar",
+                  !avatar.mobileVisible ? "ctab__avatar--desktop-only" : ""
+                ].filter(Boolean).join(" "),
+                style: {
+                  ...posStyle,
+                  x: avatarXValues[index],
+                  y: avatarYValues[index],
+                  opacity: avatarOpacity,
+                  filter: avatarFilter
+                },
+                children: /* @__PURE__ */ jsx22(
+                  "img",
+                  {
+                    src: avatar.imageUrl,
+                    alt: "",
+                    loading: "lazy",
+                    draggable: false
+                  }
+                )
+              },
+              avatar.id
+            );
+          }),
+          /* @__PURE__ */ jsxs21(
+            motion.div,
+            {
+              className: "ctab__hero",
+              style: { y: heroY, opacity: heroOpacity },
+              children: [
+                /* @__PURE__ */ jsx22("h2", { className: "ctab__headline", children: headline }),
+                /* @__PURE__ */ jsx22("a", { href: ctaHref, className: "ctab__btn", children: ctaLabel })
+              ]
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+};
+
+// templates/DayNightTransition/DayNightTransition.tsx
+import { useRef as useRef7 } from "react";
+import {
+  motion as motion2,
+  useScroll as useScroll2,
+  useSpring as useSpring2,
+  useTransform as useTransform2,
+  useMotionTemplate as useMotionTemplate2
+} from "framer-motion";
+import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
+var SPRING2 = { stiffness: 80, damping: 30, restDelta: 1e-3 };
+var FADE_START = 0.35;
+var FADE_END = 0.65;
+var WORD_START = 0.4;
+var WORD_END = 0.6;
+var TEXT_CHANNEL_DAY = 0;
+var TEXT_CHANNEL_NIGHT = 255;
+var DayNightTransition = ({
+  dayImageUrl,
+  nightImageUrl,
+  dayHeadline = "Trade all day",
+  nightHeadline = "Trade all night",
+  dayDescription,
+  nightDescription,
+  ctaLabel = "Get started",
+  ctaHref = "#",
+  className,
+  ...props
+}) => {
+  const wrapperRef = useRef7(null);
+  const { scrollYProgress } = useScroll2({
+    target: wrapperRef,
+    offset: ["start end", "end start"]
+  });
+  const smooth = useSpring2(scrollYProgress, SPRING2);
+  const nightOpacity = useTransform2(smooth, [FADE_START, FADE_END], [0, 1]);
+  const channel = useTransform2(smooth, [FADE_START, FADE_END], [TEXT_CHANNEL_DAY, TEXT_CHANNEL_NIGHT]);
+  const textColor = useMotionTemplate2`rgb(${channel}, ${channel}, ${channel})`;
+  const dayOpacity = useTransform2(smooth, [WORD_START, WORD_END], [1, 0]);
+  const nightOpacity2 = useTransform2(smooth, [WORD_START, WORD_END], [0, 1]);
+  const hasDescription = Boolean(dayDescription || nightDescription);
+  return /* @__PURE__ */ jsx23(
+    "div",
+    {
+      ref: wrapperRef,
+      className: ["dnt", className].filter(Boolean).join(" "),
+      ...props,
+      children: /* @__PURE__ */ jsxs22("div", { className: "dnt__sticky", children: [
+        /* @__PURE__ */ jsx23(
+          "img",
+          {
+            className: "dnt__bg dnt__bg--day",
+            src: dayImageUrl,
+            alt: "",
+            loading: "eager",
+            draggable: false
+          }
+        ),
+        /* @__PURE__ */ jsx23(
+          motion2.img,
+          {
+            className: "dnt__bg dnt__bg--night",
+            src: nightImageUrl,
+            alt: "",
+            loading: "eager",
+            draggable: false,
+            style: { opacity: nightOpacity }
+          }
+        ),
+        /* @__PURE__ */ jsx23("div", { className: "dnt__content", children: /* @__PURE__ */ jsxs22(
+          motion2.div,
+          {
+            className: "dnt__text-wrap",
+            style: { color: textColor },
+            children: [
+              /* @__PURE__ */ jsxs22("div", { className: "dnt__crossfade-wrap", children: [
+                /* @__PURE__ */ jsx23(
+                  motion2.h2,
+                  {
+                    className: "dnt__headline",
+                    style: { opacity: dayOpacity },
+                    children: dayHeadline
+                  }
+                ),
+                /* @__PURE__ */ jsx23(
+                  motion2.h2,
+                  {
+                    className: "dnt__headline",
+                    "aria-hidden": "true",
+                    style: { opacity: nightOpacity2 },
+                    children: nightHeadline
+                  }
+                )
+              ] }),
+              hasDescription && /* @__PURE__ */ jsxs22("div", { className: "dnt__crossfade-wrap", children: [
+                /* @__PURE__ */ jsx23(
+                  motion2.p,
+                  {
+                    className: "dnt__description",
+                    style: { opacity: dayOpacity },
+                    children: dayDescription ?? ""
+                  }
+                ),
+                /* @__PURE__ */ jsx23(
+                  motion2.p,
+                  {
+                    className: "dnt__description",
+                    "aria-hidden": "true",
+                    style: { opacity: nightOpacity2 },
+                    children: nightDescription ?? ""
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx23("a", { href: ctaHref, className: "dnt__btn", children: ctaLabel })
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+};
+
+// templates/PaymentMethods/PaymentMethods.tsx
+import { useRef as useRef8 } from "react";
+import {
+  motion as motion3,
+  useScroll as useScroll3,
+  useVelocity,
+  useAnimationFrame,
+  useMotionValue
+} from "framer-motion";
+import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
+function modWrap(min, max, v) {
+  const range = max - min;
+  return ((v - min) % range + range) % range + min;
+}
+var VELOCITY_FACTOR = 0.4;
+var MAX_SCROLL_V = 2500;
+var DEADZONE = 2;
+var CDN = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/";
+var COL_ONE_LOGOS = [
+  { name: "Mastercard", url: `${CDN}68dcd915dc1a82f278b6c061_payment%20method-mastercard.svg` },
+  { name: "Visa", url: `${CDN}68dcd9d10fda048e2d53a3a1_payment%20method-visa.svg` },
+  { name: "Visa Electron", url: `${CDN}68dcd9d10fda048e2d53a3a1_payment%20method-visa-electron.svg` },
+  { name: "Maestro", url: `${CDN}68dcd9d183a5dcfaa9a06587_payment%20method-maestro.svg` },
+  { name: "Pix", url: `${CDN}68dcd9d13461263dcd8ccf54_payment%20method-pix.svg` },
+  { name: "Help2Pay", url: `${CDN}68dcd9d13461263dcd8ccf54_payment%20method-help2pay.svg` },
+  { name: "UPI Neo", url: `${CDN}68dcd9d13461263dcd8ccf54_payment%20method-upineo.svg` },
+  { name: "M-Pesa", url: `${CDN}68dcd9d13461263dcd8ccf54_payment%20method-mpesa.svg` },
+  { name: "Ozow", url: `${CDN}68dcd9d13461263dcd8ccf54_payment%20method-ozow.svg` },
+  { name: "MTN", url: `${CDN}68dcd9d13461263dcd8ccf54_payment%20method-mtn.svg` },
+  { name: "Airtm", url: `${CDN}68dcd9d13461263dcd8ccf54_payment%20method-airtm.svg` }
+];
+var COL_TWO_LOGOS = [
+  { name: "Bitcoin", url: `${CDN}68dcd9d13384aff3f072511a_payment%20method-bitcoin.svg` },
+  { name: "Ethereum", url: `${CDN}68dcd9d10fda048e2d53a3a1_payment%20method-ethereum.svg` },
+  { name: "Tron", url: `${CDN}68dcd9d109305b54383580e5_payment%20method-tron.svg` },
+  { name: "Skrill", url: `${CDN}68dcd9d183a5dcfaa9a06587_payment%20method-skrill.svg` },
+  { name: "Skrill 1-tap", url: `${CDN}68dcd9d183a5dcfaa9a06587_payment%20method-skrill-1tap.svg` },
+  { name: "SticPay", url: `${CDN}68dcd9d183a5dcfaa9a06587_payment%20method-sticpay.svg` },
+  { name: "Litecoin", url: `${CDN}68dcd9d13384aff3f072511a_payment%20method-litecoin.svg` },
+  { name: "USD Coin", url: `${CDN}68dcd9d13384aff3f072511a_payment%20method-usdc.svg` },
+  { name: "Dogecoin", url: `${CDN}68dcd9d13384aff3f072511a_payment%20method-dogecoin.svg` },
+  { name: "Cardano", url: `${CDN}68dcd9d13384aff3f072511a_payment%20method-cardano.svg` },
+  { name: "BNB", url: `${CDN}68dcd9d13384aff3f072511a_payment%20method-bnb.svg` }
+];
+var TEXT_CONTENT = {
+  headline: "Your money, your way",
+  body: "Quick deposits, easy withdrawals, and 60+ payment options mean your money is always accessible.",
+  disclaimer: "*Availability of payment methods and processing speeds may vary based on location and selected payment option.",
+  ctaLabel: "Learn more",
+  ctaHref: "#"
+};
+var PaymentMethods = ({
+  headline = TEXT_CONTENT.headline,
+  body = TEXT_CONTENT.body,
+  disclaimer = TEXT_CONTENT.disclaimer,
+  ctaLabel = TEXT_CONTENT.ctaLabel,
+  ctaHref = TEXT_CONTENT.ctaHref,
+  col1Logos = COL_ONE_LOGOS,
+  col2Logos = COL_TWO_LOGOS,
+  className,
+  ...props
+}) => {
+  const { scrollY } = useScroll3();
+  const scrollVelocity = useVelocity(scrollY);
+  const col1Y = useMotionValue(0);
+  const col2Y = useMotionValue(0);
+  const col1Ref = useRef8(null);
+  const col2Ref = useRef8(null);
+  useAnimationFrame((_, delta) => {
+    const raw = scrollVelocity.get();
+    if (Math.abs(raw) < DEADZONE) return;
+    const clamped = Math.sign(raw) * Math.min(Math.abs(raw), MAX_SCROLL_V);
+    const step = clamped * VELOCITY_FACTOR * (delta / 1e3);
+    const cycleH1 = (col1Ref.current?.offsetHeight ?? 2e3) / 2;
+    const cycleH2 = (col2Ref.current?.offsetHeight ?? 2e3) / 2;
+    col1Y.set(modWrap(-cycleH1, 0, col1Y.get() - step));
+    col2Y.set(modWrap(-cycleH2, 0, col2Y.get() + step));
+  });
+  const track1 = [...col1Logos, ...col1Logos];
+  const track2 = [...col2Logos, ...col2Logos];
+  return /* @__PURE__ */ jsx24(
+    "section",
+    {
+      className: ["pm", className].filter(Boolean).join(" "),
+      ...props,
+      children: /* @__PURE__ */ jsxs23("div", { className: "pm__inner", children: [
+        /* @__PURE__ */ jsx24("div", { className: "pm__media", children: /* @__PURE__ */ jsxs23("div", { className: "pm__carousel", children: [
+          /* @__PURE__ */ jsx24("div", { className: "pm__fade pm__fade--top", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx24(
+            motion3.div,
+            {
+              ref: col1Ref,
+              className: "pm__col",
+              style: { y: col1Y },
+              children: track1.map((logo, i) => /* @__PURE__ */ jsx24("div", { className: "pm__card", children: /* @__PURE__ */ jsx24("div", { className: "pm__card-img-wrap", children: /* @__PURE__ */ jsx24(
+                "img",
+                {
+                  src: logo.url,
+                  alt: logo.name,
+                  loading: "lazy",
+                  draggable: false
+                }
+              ) }) }, `c1-${i}`))
+            }
+          ),
+          /* @__PURE__ */ jsx24(
+            motion3.div,
+            {
+              ref: col2Ref,
+              className: "pm__col",
+              style: { y: col2Y },
+              children: track2.map((logo, i) => /* @__PURE__ */ jsx24("div", { className: "pm__card", children: /* @__PURE__ */ jsx24("div", { className: "pm__card-img-wrap", children: /* @__PURE__ */ jsx24(
+                "img",
+                {
+                  src: logo.url,
+                  alt: logo.name,
+                  loading: "lazy",
+                  draggable: false
+                }
+              ) }) }, `c2-${i}`))
+            }
+          ),
+          /* @__PURE__ */ jsx24("div", { className: "pm__fade pm__fade--bottom", "aria-hidden": "true" })
+        ] }) }),
+        /* @__PURE__ */ jsxs23("div", { className: "pm__content", children: [
+          /* @__PURE__ */ jsx24("h2", { className: "pm__headline", children: headline }),
+          /* @__PURE__ */ jsxs23("div", { className: "pm__text-group", children: [
+            /* @__PURE__ */ jsx24("p", { className: "pm__body", children: body }),
+            /* @__PURE__ */ jsx24("p", { className: "pm__disclaimer", children: disclaimer })
+          ] }),
+          /* @__PURE__ */ jsxs23("a", { href: ctaHref, className: "pm__link", children: [
+            ctaLabel,
+            /* @__PURE__ */ jsx24("span", { "aria-hidden": "true", children: "\u2192" })
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
 export {
+  AVATAR_DATA,
   Accordion,
+  BottomSheet,
   Breadcrumb,
   Button,
+  COL_ONE_LOGOS,
+  COL_TWO_LOGOS,
+  CTABanner,
   Card,
   Chip,
   ChipDropdown,
+  DayNightTransition,
+  FeatureCards,
+  Footer,
+  Hero,
   Link,
   Pagination,
+  PaymentMethods,
+  SCROLLYTELLING_DATA,
+  STEPS_DATA,
+  Scrollytelling,
   SearchField,
+  Stats,
+  StickyStackedCards,
+  TEXT_CONTENT,
   Tag,
   TextField
 };