@deriv-web-design/ui 0.0.2 → 0.0.3

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,
@@ -381,11 +354,6 @@ SearchField.displayName = "SearchField";
 
 // primitives/Breadcrumb/Breadcrumb.tsx
 import { useState as useState3 } from "react";
-
-// primitives/Breadcrumb/Breadcrumb.module.css
-var Breadcrumb_default = {};
-
-// primitives/Breadcrumb/Breadcrumb.tsx
 import { Fragment, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var ChevronRightIcon = () => /* @__PURE__ */ jsx8(
   "svg",
@@ -410,8 +378,8 @@ 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, {}) })
+    /* @__PURE__ */ jsx8("a", { href: item.href, onClick: item.onClick, className: "bc-link", children: item.label }),
+    /* @__PURE__ */ jsx8("span", { className: "bc-separator", "aria-hidden": "true", children: /* @__PURE__ */ jsx8(ChevronRightIcon, {}) })
   ] });
 }
 function Breadcrumb({
@@ -424,15 +392,15 @@ function Breadcrumb({
   const [expanded, setExpanded] = 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 : ""
+    "bc-list",
+    size,
+    truncatable ? "collapsible" : "",
+    truncatable && expanded ? "expanded" : ""
   ].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) => {
       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__ */ jsx8("li", { className: "bc-item", children: isLast ? /* @__PURE__ */ jsx8("span", { className: "bc-current", "aria-current": "page", children: item.label }) : /* @__PURE__ */ jsx8(BreadcrumbLink, { item }) }, index);
     }) }) });
   }
   const firstItem = items[0];
@@ -440,32 +408,27 @@ function Breadcrumb({
   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("li", { className: "bc-item", children: /* @__PURE__ */ jsx8(BreadcrumbLink, { item: firstItem }) }),
+    /* @__PURE__ */ jsxs8("li", { className: "bc-ellipsisItem", "aria-hidden": expanded, children: [
       /* @__PURE__ */ jsx8(
         "button",
         {
-          className: Breadcrumb_default.ellipsisButton,
+          className: "bc-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, {}) })
+      /* @__PURE__ */ jsx8("span", { className: "bc-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 }) })
+    middleItems.map((item, index) => /* @__PURE__ */ jsx8("li", { className: "bc-middleItem", children: /* @__PURE__ */ jsx8(BreadcrumbLink, { item }) }, `m-${index}`)),
+    /* @__PURE__ */ jsx8("li", { className: "bc-item", children: /* @__PURE__ */ jsx8(BreadcrumbLink, { item: parentItem }) }),
+    /* @__PURE__ */ jsx8("li", { className: "bc-item", children: /* @__PURE__ */ jsx8("span", { className: "bc-current", "aria-current": "page", children: currentItem.label }) })
   ] }) });
 }
 
 // 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(
   "svg",
@@ -537,16 +500,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__ */ jsxs9("div", { ref: wrapperRef, className: ChipDropdown_default.wrapper, children: [
+  return /* @__PURE__ */ jsxs9("div", { ref: wrapperRef, className: "cd-wrapper", children: [
     /* @__PURE__ */ jsxs9(
       "button",
       {
@@ -559,13 +522,13 @@ 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 }),
+          icon && /* @__PURE__ */ jsx9("span", { className: "cd-icon", children: icon }),
+          /* @__PURE__ */ jsx9("span", { className: "cd-label", children: displayLabel }),
+          tag && /* @__PURE__ */ jsx9("span", { className: "cd-tag", children: tag }),
           /* @__PURE__ */ jsx9(
             "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, {})
             }
@@ -578,7 +541,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__ */ jsxs9(
@@ -587,16 +550,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__ */ jsx9("span", { className: ChipDropdown_default.itemLabel, children: option.label }),
-                isActive && /* @__PURE__ */ jsx9("span", { className: ChipDropdown_default.itemCheck, children: /* @__PURE__ */ jsx9(CheckIcon, {}) })
+                /* @__PURE__ */ jsx9("span", { className: "cd-itemLabel", children: option.label }),
+                isActive && /* @__PURE__ */ jsx9("span", { className: "cd-itemCheck", children: /* @__PURE__ */ jsx9(CheckIcon, {}) })
               ]
             },
             option.value
@@ -607,32 +570,8 @@ var ChipDropdown = ({
   ] });
 };
 
-// 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"
-      }
-    )
-  }
-);
 var CardPrimaryVariant = ({
   colorScheme = "light",
   title,
@@ -651,64 +590,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__ */ 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__ */ jsxs10("div", { "aria-hidden": "true", className: "cp-imageOverlay", children: [
+          /* @__PURE__ */ jsx10("img", { alt: "", className: "cp-overlayImg", src: image }),
+          /* @__PURE__ */ jsx10("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__ */ jsxs10("div", { className: "cp-content", children: [
+          /* @__PURE__ */ jsx10("p", { className: ["cp-title", isInverse ? "textInverse" : "textDefault"].join(" "), children: title }),
+          /* @__PURE__ */ jsx10("p", { className: ["cp-description", isInverse ? "textInverse" : "textDefault"].join(" "), children: description }),
+          showLink && /* @__PURE__ */ jsx10(
+            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__ */ jsx10("div", { className: "cp-imageSection", children: /* @__PURE__ */ jsx10("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"
-      }
-    )
-  }
-);
 var CardSecondaryVariant = ({
   title,
   description,
@@ -724,22 +635,18 @@ var CardSecondaryVariant = ({
   return /* @__PURE__ */ jsxs11(
     "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__ */ jsx11("span", { className: "cs-icon", children: icon }),
+        /* @__PURE__ */ jsx11("p", { className: "cs-title", children: title }),
+        /* @__PURE__ */ jsx11("p", { className: "cs-description", children: description }),
+        showLink && /* @__PURE__ */ jsx11(
+          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,9 +654,6 @@ 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(
@@ -820,30 +724,30 @@ var CardThumbnailVariant = ({
   return /* @__PURE__ */ jsxs12(
     "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__ */ jsxs12("div", { className: "ct-thumbnailWrapper", children: [
+          /* @__PURE__ */ jsx12("img", { alt: thumbnailAlt, className: "ct-thumbnailImage", src: thumbnail }),
+          isVideo && /* @__PURE__ */ jsx12("span", { "aria-label": "Play video", className: "ct-playButton", children: /* @__PURE__ */ jsx12(PlayIcon, {}) }),
+          !isVideo && avatar && /* @__PURE__ */ jsx12("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)) }),
+        /* @__PURE__ */ jsxs12("div", { className: "ct-content", children: [
+          /* @__PURE__ */ jsxs12("div", { className: "ct-metaRow", children: [
+            !hideTags && /* @__PURE__ */ jsx12("div", { className: "ct-tagsList", children: tags.map((tag, i) => /* @__PURE__ */ jsx12(Tag, { icon: tag.icon, label: tag.label, size: "md", variant: "fill" }, i)) }),
             showCopyLink && /* @__PURE__ */ jsx12(
               "button",
               {
                 "aria-label": "Copy link",
-                className: CardThumbnailVariant_default.copyLink,
+                className: "ct-copyLink",
                 onClick: onCopyLink,
                 type: "button",
                 children: /* @__PURE__ */ jsx12(LinkIcon, {})
               }
             )
           ] }),
-          /* @__PURE__ */ jsx12("p", { className: CardThumbnailVariant_default.title, children: title }),
-          /* @__PURE__ */ jsx12("p", { className: CardThumbnailVariant_default.summary, children: summary })
+          /* @__PURE__ */ jsx12("p", { className: "ct-title", children: title }),
+          /* @__PURE__ */ jsx12("p", { className: "ct-summary", children: summary })
         ] })
       ]
     }
@@ -862,9 +766,6 @@ var Card = (props) => {
   return /* @__PURE__ */ jsx13(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" }) });
@@ -893,17 +794,17 @@ var Pagination = ({
   return /* @__PURE__ */ jsxs13(
     "nav",
     {
-      className: [Pagination_default.pagination, className ?? ""].filter(Boolean).join(" "),
+      className: ["pagination", className ?? ""].filter(Boolean).join(" "),
       "aria-label": "Pagination navigation",
       children: [
         /* @__PURE__ */ jsx14(
           "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__ */ jsx14("span", { className: "navIcon", children: /* @__PURE__ */ jsx14(ChevronLeft, {}) })
           }
         ),
         items.map((item, index) => {
@@ -911,7 +812,7 @@ var Pagination = ({
             return /* @__PURE__ */ jsx14(
               "span",
               {
-                className: Pagination_default.ellipsis,
+                className: "ellipsis",
                 "aria-hidden": "true",
                 children: "\u2026"
               },
@@ -922,7 +823,7 @@ var Pagination = ({
           return /* @__PURE__ */ jsx14(
             "button",
             {
-              className: [Pagination_default.pageButton, isSelected ? Pagination_default.pageButtonSelected : ""].filter(Boolean).join(" "),
+              className: ["pageButton", isSelected ? "pageButtonSelected" : ""].filter(Boolean).join(" "),
               onClick: () => {
                 if (!isSelected) onPageChange(item);
               },
@@ -936,17 +837,59 @@ var Pagination = ({
         /* @__PURE__ */ jsx14(
           "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__ */ jsx14("span", { className: "navIcon", children: /* @__PURE__ */ jsx14(ChevronRight, {}) })
           }
         )
       ]
     }
   );
 };
+
+// templates/FeatureCards/FeatureCards.tsx
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+var FeatureCards = ({
+  sectionTitle,
+  sectionDescription,
+  showLink = false,
+  linkText = "Learn more",
+  onLinkClick,
+  cardColorScheme = "image",
+  cards
+}) => {
+  return /* @__PURE__ */ jsx15("section", { className: "fc-section", children: /* @__PURE__ */ jsxs14("div", { className: "fc-container", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "fc-header", children: [
+      /* @__PURE__ */ jsx15("h2", { className: "fc-sectionTitle", children: sectionTitle }),
+      sectionDescription && /* @__PURE__ */ jsx15("p", { className: "fc-sectionDescription", children: sectionDescription }),
+      showLink && /* @__PURE__ */ jsx15(
+        Link,
+        {
+          colorScheme: "coral",
+          label: linkText,
+          onClick: onLinkClick
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx15("div", { className: "fc-grid", children: cards.map((card, index) => /* @__PURE__ */ jsx15(
+      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
+    )) })
+  ] }) });
+};
 export {
   Accordion,
   Breadcrumb,
@@ -954,6 +897,7 @@ export {
   Card,
   Chip,
   ChipDropdown,
+  FeatureCards,
   Link,
   Pagination,
   SearchField,