@deriv-web-design/ui 0.0.1 → 0.0.3

package/dist/index.js

@@ -26,6 +26,7 @@ __export(index_exports, {
   Card: () => Card,
   Chip: () => Chip,
   ChipDropdown: () => ChipDropdown,
+  FeatureCards: () => FeatureCards,
   Link: () => Link,
   Pagination: () => Pagination,
   SearchField: () => SearchField,
@@ -34,9 +35,6 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// primitives/Button/Button.module.css
-var Button_default = {};
-
 // primitives/Button/Button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Button = ({
@@ -54,13 +52,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__ */ (0, import_jsx_runtime.jsx)("span", { className: Button_default.icon, children: icon }) : null;
+  const iconNode = icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "icon", children: icon }) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "button",
     {
@@ -70,18 +68,15 @@ var Button = ({
       ...props,
       children: [
         iconPosition === "icon-left" && iconNode,
-        !isIconOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: Button_default.label, children: label ?? children }),
+        !isIconOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "label", children: label ?? children }),
         iconPosition === "icon-only" && iconNode,
         iconPosition === "icon-right" && iconNode,
-        showFocusRing && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: Button_default.focusRing, "aria-hidden": "true" })
+        showFocusRing && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "focusRing", "aria-hidden": "true" })
       ]
     }
   );
 };
 
-// primitives/Link/Link.module.css
-var Link_default = {};
-
 // primitives/Link/Link.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ChevronIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 8h10M9 4l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
@@ -98,10 +93,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) => {
@@ -120,17 +115,14 @@ var Link = ({
       onClick: handleClick,
       ...props,
       children: [
-        hasIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: Link_default.icon, children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: Link_default.label, children: label ?? children }),
-        !hasIcon && showChevron && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: Link_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronIcon, {}) })
+        hasIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "icon", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "label", children: label ?? children }),
+        !hasIcon && showChevron && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronIcon, {}) })
       ]
     }
   );
 };
 
-// primitives/Chip/Chip.module.css
-var Chip_default = {};
-
 // primitives/Chip/Chip.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Chip = ({
@@ -146,9 +138,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__ */ (0, import_jsx_runtime3.jsxs)(
@@ -159,18 +151,15 @@ var Chip = ({
       "aria-pressed": selected,
       ...props,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: Chip_default.icon, children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: Chip_default.label, children: label ?? children }),
-        tag && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: Chip_default.tag, children: tag }),
-        showFocusRing && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: Chip_default.focusRing, "aria-hidden": "true" })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "icon", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "label", children: label ?? children }),
+        tag && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "tag", children: tag }),
+        showFocusRing && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "focusRing", "aria-hidden": "true" })
       ]
     }
   );
 };
 
-// primitives/Tag/Tag.module.css
-var Tag_default = {};
-
 // primitives/Tag/Tag.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var Tag = ({
@@ -184,25 +173,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__ */ (0, import_jsx_runtime4.jsxs)("span", { className: classNames, ...props, children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: Tag_default.icon, children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: Tag_default.label, children: label ?? children })
+    icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "icon", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "label", children: label ?? children })
   ] });
 };
 
 // primitives/Accordion/Accordion.tsx
 var import_react = require("react");
-
-// primitives/Accordion/Accordion.module.css
-var Accordion_default = {};
-
-// primitives/Accordion/Accordion.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var ChevronIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var Accordion = ({
@@ -224,7 +208,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__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
@@ -237,17 +221,17 @@ var Accordion = ({
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "button",
           {
-            className: Accordion_default.header,
+            className: "header",
             onClick: handleToggle,
             "aria-expanded": isOpen,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: Accordion_default.titleWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: Accordion_default.title, children: title }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: [Accordion_default.chevron, isOpen ? Accordion_default.chevronRotated : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronIcon2, {}) }),
-              showFocusRing && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: Accordion_default.focusRing, "aria-hidden": "true" })
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "titleWrapper", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "title", children: title }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: ["chevron", isOpen ? "chevronRotated" : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronIcon2, {}) }),
+              showFocusRing && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "focusRing", "aria-hidden": "true" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: [Accordion_default.bodyWrapper, isOpen ? Accordion_default.bodyWrapperOpen : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: Accordion_default.bodyInner, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: Accordion_default.body, children }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: ["bodyWrapper", isOpen ? "bodyWrapperOpen" : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "bodyInner", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "body", children }) }) })
       ]
     }
   );
@@ -255,11 +239,6 @@ var Accordion = ({
 
 // primitives/TextField/TextField.tsx
 var import_react2 = require("react");
-
-// primitives/TextField/TextField.module.css
-var TextField_default = {};
-
-// primitives/TextField/TextField.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var SuccessIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
   /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "8", cy: "8", r: "6", stroke: "currentColor", strokeWidth: "1.5" }),
@@ -279,9 +258,9 @@ var TextField = (0, import_react2.forwardRef)(
     ...inputProps
   }, ref) => {
     const wrapperClass = [
-      TextField_default.wrapper,
-      TextField_default[variant],
-      TextField_default[status],
+      "tf-wrapper",
+      variant,
+      status,
       className ?? ""
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: wrapperClass, "data-disabled": disabled || void 0, children: [
@@ -289,13 +268,13 @@ var TextField = (0, import_react2.forwardRef)(
         "input",
         {
           ref,
-          className: TextField_default.input,
+          className: "tf-input",
           disabled,
           ...inputProps
         }
       ),
-      status === "success" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: [TextField_default.iconSlot, TextField_default.iconSuccess].join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SuccessIcon, {}) }),
-      status === "fail" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: [TextField_default.iconSlot, TextField_default.iconFail].join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FailIcon, {}) })
+      status === "success" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "iconSlot iconSuccess", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SuccessIcon, {}) }),
+      status === "fail" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "iconSlot iconFail", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FailIcon, {}) })
     ] });
   }
 );
@@ -303,11 +282,6 @@ TextField.displayName = "TextField";
 
 // primitives/SearchField/SearchField.tsx
 var import_react3 = require("react");
-
-// primitives/SearchField/SearchField.module.css
-var SearchField_default = {};
-
-// primitives/SearchField/SearchField.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var SearchIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "6.5", cy: "6.5", r: "4", stroke: "currentColor", strokeWidth: "1.25" }),
@@ -372,8 +346,8 @@ var SearchField = (0, import_react3.forwardRef)(
     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__ */ (0, import_jsx_runtime7.jsxs)(
@@ -382,12 +356,12 @@ var SearchField = (0, import_react3.forwardRef)(
         className: wrapperClass,
         "data-disabled": disabled || void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: SearchField_default.iconSlot, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "iconSlot", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchIcon, {}) }),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "input",
             {
               ref: setRef,
-              className: SearchField_default.input,
+              className: "sf-input",
               disabled,
               value,
               defaultValue,
@@ -395,13 +369,13 @@ var SearchField = (0, import_react3.forwardRef)(
               ...inputProps
             }
           ),
-          showSuccessIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: [SearchField_default.iconSlot, SearchField_default.iconSuccess].join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SuccessIcon2, {}) }),
-          showFailIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: [SearchField_default.iconSlot, SearchField_default.iconFail].join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FailIcon2, {}) }),
+          showSuccessIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "iconSlot iconSuccess", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SuccessIcon2, {}) }),
+          showFailIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "iconSlot iconFail", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FailIcon2, {}) }),
           showClearButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
               type: "button",
-              className: SearchField_default.clearButton,
+              className: "clearButton",
               onClick: handleClear,
               "aria-label": "Clear search",
               tabIndex: -1,
@@ -417,11 +391,6 @@ SearchField.displayName = "SearchField";
 
 // primitives/Breadcrumb/Breadcrumb.tsx
 var import_react4 = require("react");
-
-// primitives/Breadcrumb/Breadcrumb.module.css
-var Breadcrumb_default = {};
-
-// primitives/Breadcrumb/Breadcrumb.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var ChevronRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
   "svg",
@@ -446,8 +415,8 @@ var ChevronRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
 );
 function BreadcrumbLink({ item }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("a", { href: item.href, onClick: item.onClick, className: Breadcrumb_default.link, children: item.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: Breadcrumb_default.separator, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronRightIcon, {}) })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("a", { href: item.href, onClick: item.onClick, className: "bc-link", children: item.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "bc-separator", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronRightIcon, {}) })
   ] });
 }
 function Breadcrumb({
@@ -460,15 +429,15 @@ function Breadcrumb({
   const [expanded, setExpanded] = (0, import_react4.useState)(false);
   const truncatable = collapsible && items.length > 3;
   const listClass = [
-    Breadcrumb_default.list,
-    Breadcrumb_default[size],
-    truncatable ? Breadcrumb_default.collapsible : "",
-    truncatable && expanded ? Breadcrumb_default.expanded : ""
+    "bc-list",
+    size,
+    truncatable ? "collapsible" : "",
+    truncatable && expanded ? "expanded" : ""
   ].filter(Boolean).join(" ");
   if (!truncatable) {
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("nav", { "aria-label": "Breadcrumb", className, ...navProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ol", { className: listClass, children: items.map((item, index) => {
       const isLast = index === items.length - 1;
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { className: Breadcrumb_default.item, children: isLast ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: Breadcrumb_default.current, "aria-current": "page", children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BreadcrumbLink, { item }) }, index);
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { className: "bc-item", children: isLast ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "bc-current", "aria-current": "page", children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BreadcrumbLink, { item }) }, index);
     }) }) });
   }
   const firstItem = items[0];
@@ -476,32 +445,27 @@ function Breadcrumb({
   const parentItem = items[items.length - 2];
   const currentItem = items[items.length - 1];
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("nav", { "aria-label": "Breadcrumb", className, ...navProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("ol", { className: listClass, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { className: Breadcrumb_default.item, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BreadcrumbLink, { item: firstItem }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("li", { className: Breadcrumb_default.ellipsisItem, "aria-hidden": expanded, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { className: "bc-item", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BreadcrumbLink, { item: firstItem }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("li", { className: "bc-ellipsisItem", "aria-hidden": expanded, children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "button",
         {
-          className: Breadcrumb_default.ellipsisButton,
+          className: "bc-ellipsisButton",
           onClick: () => setExpanded(true),
           "aria-label": "Show all breadcrumb items",
           children: "\u2026"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: Breadcrumb_default.separator, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronRightIcon, {}) })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "bc-separator", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronRightIcon, {}) })
     ] }),
-    middleItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { className: Breadcrumb_default.middleItem, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BreadcrumbLink, { item }) }, `m-${index}`)),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { className: Breadcrumb_default.item, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BreadcrumbLink, { item: parentItem }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { className: Breadcrumb_default.item, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: Breadcrumb_default.current, "aria-current": "page", children: currentItem.label }) })
+    middleItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { className: "bc-middleItem", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BreadcrumbLink, { item }) }, `m-${index}`)),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { className: "bc-item", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BreadcrumbLink, { item: parentItem }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { className: "bc-item", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "bc-current", "aria-current": "page", children: currentItem.label }) })
   ] }) });
 }
 
 // primitives/ChipDropdown/ChipDropdown.tsx
 var import_react5 = require("react");
-
-// primitives/ChipDropdown/ChipDropdown.module.css
-var ChipDropdown_default = {};
-
-// primitives/ChipDropdown/ChipDropdown.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var ChevronDownIcon = () => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   "svg",
@@ -573,16 +537,16 @@ var ChipDropdown = ({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open]);
   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__ */ (0, import_jsx_runtime9.jsxs)("div", { ref: wrapperRef, className: ChipDropdown_default.wrapper, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref: wrapperRef, className: "cd-wrapper", children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "button",
       {
@@ -595,13 +559,13 @@ var ChipDropdown = ({
         onKeyDown: handleKeyDown,
         ...props,
         children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: ChipDropdown_default.icon, children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: ChipDropdown_default.label, children: displayLabel }),
-          tag && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: ChipDropdown_default.tag, children: tag }),
+          icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "cd-icon", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "cd-label", children: displayLabel }),
+          tag && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "cd-tag", children: tag }),
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "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__ */ (0, import_jsx_runtime9.jsx)(ChevronDownIcon, {})
             }
@@ -614,7 +578,7 @@ var ChipDropdown = ({
       {
         role: "listbox",
         "aria-label": label,
-        className: ChipDropdown_default.list,
+        className: "cd-list",
         children: options.map((option) => {
           const isActive = option.value === value;
           return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
@@ -623,16 +587,16 @@ var ChipDropdown = ({
               role: "option",
               "aria-selected": isActive,
               className: [
-                ChipDropdown_default.item,
-                isActive ? ChipDropdown_default.itemSelected : ""
+                "cd-item",
+                isActive ? "itemSelected" : ""
               ].filter(Boolean).join(" "),
               onClick: () => {
                 onChange?.(option.value);
                 setOpen(false);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: ChipDropdown_default.itemLabel, children: option.label }),
-                isActive && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: ChipDropdown_default.itemCheck, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckIcon, {}) })
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "cd-itemLabel", children: option.label }),
+                isActive && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "cd-itemCheck", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckIcon, {}) })
               ]
             },
             option.value
@@ -643,32 +607,8 @@ var ChipDropdown = ({
   ] });
 };
 
-// components/Card/CardPrimaryVariant.module.css
-var CardPrimaryVariant_default = {};
-
 // components/Card/CardPrimaryVariant.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var ArrowRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-  "svg",
-  {
-    "aria-hidden": "true",
-    fill: "none",
-    height: "16",
-    viewBox: "0 0 16 16",
-    width: "16",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      "path",
-      {
-        d: "M3 8h10M9 4l4 4-4 4",
-        stroke: "currentColor",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "1.5"
-      }
-    )
-  }
-);
 var CardPrimaryVariant = ({
   colorScheme = "light",
   title,
@@ -687,64 +627,36 @@ var CardPrimaryVariant = ({
     "div",
     {
       className: [
-        CardPrimaryVariant_default.card,
-        CardPrimaryVariant_default[`style--${colorScheme}`],
+        "card-primary",
+        `style--${colorScheme}`,
         className ?? ""
       ].filter(Boolean).join(" "),
       ...props,
       children: [
-        colorScheme === "image" && image && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { "aria-hidden": "true", className: CardPrimaryVariant_default.imageOverlay, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { alt: "", className: CardPrimaryVariant_default.overlayImg, src: image }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: CardPrimaryVariant_default.gradient })
+        colorScheme === "image" && image && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { "aria-hidden": "true", className: "cp-imageOverlay", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { alt: "", className: "cp-overlayImg", src: image }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "cp-gradient" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: CardPrimaryVariant_default.content, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: [CardPrimaryVariant_default.title, isInverse ? CardPrimaryVariant_default.textInverse : CardPrimaryVariant_default.textDefault].join(" "), children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: [CardPrimaryVariant_default.description, isInverse ? CardPrimaryVariant_default.textInverse : CardPrimaryVariant_default.textDefault].join(" "), children: description }),
-          showLink && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-            "button",
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cp-content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: ["cp-title", isInverse ? "textInverse" : "textDefault"].join(" "), children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: ["cp-description", isInverse ? "textInverse" : "textDefault"].join(" "), children: description }),
+          showLink && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            Link,
             {
-              className: [CardPrimaryVariant_default.link, isInverse ? CardPrimaryVariant_default.linkInverse : CardPrimaryVariant_default.linkCoral].join(" "),
-              onClick: onLinkClick,
-              type: "button",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: linkText }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ArrowRightIcon, {})
-              ]
+              colorScheme: isInverse ? "white" : "coral",
+              label: linkText,
+              onClick: onLinkClick
             }
           )
         ] }),
-        colorScheme !== "image" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: CardPrimaryVariant_default.imageSection, children: image && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { alt: imageAlt, className: CardPrimaryVariant_default.image, src: image }) })
+        colorScheme !== "image" && image && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "cp-imageSection", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { alt: imageAlt, className: "cp-image", src: image }) })
       ]
     }
   );
 };
 
-// components/Card/CardSecondaryVariant.module.css
-var CardSecondaryVariant_default = {};
-
 // components/Card/CardSecondaryVariant.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var ArrowRightIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-  "svg",
-  {
-    "aria-hidden": "true",
-    fill: "none",
-    height: "16",
-    viewBox: "0 0 16 16",
-    width: "16",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      "path",
-      {
-        d: "M3 8h10M9 4l4 4-4 4",
-        stroke: "currentColor",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "1.5"
-      }
-    )
-  }
-);
 var CardSecondaryVariant = ({
   title,
   description,
@@ -760,22 +672,18 @@ var CardSecondaryVariant = ({
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "div",
     {
-      className: [CardSecondaryVariant_default.card, className ?? ""].filter(Boolean).join(" "),
+      className: ["card-secondary", className ?? ""].filter(Boolean).join(" "),
       ...props,
       children: [
-        showIcon && icon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: CardSecondaryVariant_default.icon, children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: CardSecondaryVariant_default.title, children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: CardSecondaryVariant_default.description, children: description }),
-        showLink && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-          "button",
+        showIcon && icon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "cs-icon", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "cs-title", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "cs-description", children: description }),
+        showLink && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          Link,
           {
-            className: CardSecondaryVariant_default.link,
-            onClick: onLinkClick,
-            type: "button",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: linkText }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ArrowRightIcon2, {})
-            ]
+            colorScheme: "coral",
+            label: linkText,
+            onClick: onLinkClick
           }
         )
       ]
@@ -783,9 +691,6 @@ var CardSecondaryVariant = ({
   );
 };
 
-// components/Card/CardThumbnailVariant.module.css
-var CardThumbnailVariant_default = {};
-
 // components/Card/CardThumbnailVariant.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var LinkIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
@@ -856,30 +761,30 @@ var CardThumbnailVariant = ({
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
-      className: [CardThumbnailVariant_default.card, className ?? ""].filter(Boolean).join(" "),
+      className: ["card-thumbnail", className ?? ""].filter(Boolean).join(" "),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: CardThumbnailVariant_default.thumbnailWrapper, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("img", { alt: thumbnailAlt, className: CardThumbnailVariant_default.thumbnailImage, src: thumbnail }),
-          isVideo && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { "aria-label": "Play video", className: CardThumbnailVariant_default.playButton, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PlayIcon, {}) }),
-          !isVideo && avatar && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("img", { alt: avatarAlt, className: CardThumbnailVariant_default.avatar, src: avatar })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ct-thumbnailWrapper", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("img", { alt: thumbnailAlt, className: "ct-thumbnailImage", src: thumbnail }),
+          isVideo && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { "aria-label": "Play video", className: "ct-playButton", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PlayIcon, {}) }),
+          !isVideo && avatar && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("img", { alt: avatarAlt, className: "ct-avatar", src: avatar })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: CardThumbnailVariant_default.content, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: CardThumbnailVariant_default.metaRow, children: [
-            !hideTags && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: CardThumbnailVariant_default.tagsList, children: tags.map((tag, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Tag, { icon: tag.icon, label: tag.label, size: "md", variant: "fill" }, i)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ct-content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ct-metaRow", children: [
+            !hideTags && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ct-tagsList", children: tags.map((tag, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Tag, { icon: tag.icon, label: tag.label, size: "md", variant: "fill" }, i)) }),
             showCopyLink && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "button",
               {
                 "aria-label": "Copy link",
-                className: CardThumbnailVariant_default.copyLink,
+                className: "ct-copyLink",
                 onClick: onCopyLink,
                 type: "button",
                 children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LinkIcon, {})
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: CardThumbnailVariant_default.title, children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: CardThumbnailVariant_default.summary, children: summary })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "ct-title", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "ct-summary", children: summary })
         ] })
       ]
     }
@@ -898,9 +803,6 @@ var Card = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardThumbnailVariant, { ...props });
 };
 
-// primitives/Pagination/Pagination.module.css
-var Pagination_default = {};
-
 // primitives/Pagination/Pagination.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var ChevronLeft = () => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
@@ -929,17 +831,17 @@ var Pagination = ({
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "nav",
     {
-      className: [Pagination_default.pagination, className ?? ""].filter(Boolean).join(" "),
+      className: ["pagination", className ?? ""].filter(Boolean).join(" "),
       "aria-label": "Pagination navigation",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "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__ */ (0, import_jsx_runtime14.jsx)("span", { className: Pagination_default.navIcon, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronLeft, {}) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "navIcon", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronLeft, {}) })
           }
         ),
         items.map((item, index) => {
@@ -947,7 +849,7 @@ var Pagination = ({
             return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "span",
               {
-                className: Pagination_default.ellipsis,
+                className: "ellipsis",
                 "aria-hidden": "true",
                 children: "\u2026"
               },
@@ -958,7 +860,7 @@ var Pagination = ({
           return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "button",
             {
-              className: [Pagination_default.pageButton, isSelected ? Pagination_default.pageButtonSelected : ""].filter(Boolean).join(" "),
+              className: ["pageButton", isSelected ? "pageButtonSelected" : ""].filter(Boolean).join(" "),
               onClick: () => {
                 if (!isSelected) onPageChange(item);
               },
@@ -972,17 +874,59 @@ var Pagination = ({
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "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__ */ (0, import_jsx_runtime14.jsx)("span", { className: Pagination_default.navIcon, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronRight, {}) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "navIcon", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronRight, {}) })
           }
         )
       ]
     }
   );
 };
+
+// templates/FeatureCards/FeatureCards.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var FeatureCards = ({
+  sectionTitle,
+  sectionDescription,
+  showLink = false,
+  linkText = "Learn more",
+  onLinkClick,
+  cardColorScheme = "image",
+  cards
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("section", { className: "fc-section", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "fc-container", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "fc-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h2", { className: "fc-sectionTitle", children: sectionTitle }),
+      sectionDescription && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "fc-sectionDescription", children: sectionDescription }),
+      showLink && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        Link,
+        {
+          colorScheme: "coral",
+          label: linkText,
+          onClick: onLinkClick
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "fc-grid", children: cards.map((card, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      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
+    )) })
+  ] }) });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -991,6 +935,7 @@ var Pagination = ({
   Card,
   Chip,
   ChipDropdown,
+  FeatureCards,
   Link,
   Pagination,
   SearchField,