@deriv-web-design/ui 0.0.22 → 0.0.24

package/dist/index.mjs

@@ -150,11 +150,6 @@ var Tag = ({
 
 // 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 = ({
@@ -176,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",
     {
@@ -189,17 +184,17 @@ var Accordion = ({
         /* @__PURE__ */ jsxs5(
           "button",
           {
-            className: Accordion_default.header,
+            className: "accordion__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: "accordion__title-wrapper", children: /* @__PURE__ */ jsx5("span", { className: "accordion__title", children: title }) }),
+              /* @__PURE__ */ jsx5("span", { className: ["accordion__chevron", isOpen ? "accordion__chevron--rotated" : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx5(ChevronIcon2, {}) }),
+              showFocusRing && /* @__PURE__ */ jsx5("span", { className: "accordion__focus-ring", "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: ["accordion__body-wrapper", isOpen ? "accordion__body-wrapper--open" : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx5("div", { className: "accordion__body-inner", children: /* @__PURE__ */ jsx5("div", { className: "accordion__body", children }) }) })
       ]
     }
   );
@@ -1031,9 +1026,6 @@ var Tabs = ({
   );
 };
 
-// templates/FaqAccordion/FaqAccordion.module.css
-var FaqAccordion_default = {};
-
 // templates/FaqAccordion/FaqAccordion.tsx
 import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 var FaqAccordion = ({
@@ -1041,9 +1033,9 @@ var FaqAccordion = ({
   items,
   colorScheme = "white"
 }) => {
-  return /* @__PURE__ */ jsx17("section", { className: [FaqAccordion_default.section, FaqAccordion_default[`section--${colorScheme}`]].join(" "), children: /* @__PURE__ */ jsxs15("div", { className: FaqAccordion_default.container, children: [
-    /* @__PURE__ */ jsx17("div", { className: FaqAccordion_default.header, children: /* @__PURE__ */ jsx17("h2", { className: FaqAccordion_default.title, children: title }) }),
-    /* @__PURE__ */ jsx17("div", { className: FaqAccordion_default.list, children: items.map((item, index) => /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx17("section", { className: ["faq-accordion", `faq-accordion--${colorScheme}`].join(" "), children: /* @__PURE__ */ jsxs15("div", { className: "faq-accordion__container", children: [
+    /* @__PURE__ */ jsx17("div", { className: "faq-accordion__header", children: /* @__PURE__ */ jsx17("h2", { className: "faq-accordion__title", children: title }) }),
+    /* @__PURE__ */ jsx17("div", { className: "faq-accordion__list", children: items.map((item, index) => /* @__PURE__ */ jsx17(
       Accordion,
       {
         title: item.question,
@@ -1273,12 +1265,9 @@ var FeatureCardsIcon = ({
   ] }) });
 };
 
-// templates/FeatureBullets/FeatureBullets.module.css
-var FeatureBullets_default = {};
-
 // templates/FeatureBullets/FeatureBullets.tsx
 import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
-var CheckIcon2 = () => /* @__PURE__ */ jsx20("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", className: FeatureBullets_default.icon, children: /* @__PURE__ */ jsx20("path", { d: "M12 4.375C9.07031 4.375 6.41406 5.9375 4.92969 8.4375C3.48438 10.9766 3.48438 14.0625 4.92969 16.5625C6.41406 19.1016 9.07031 20.625 12 20.625C14.8906 20.625 17.5469 19.1016 19.0312 16.5625C20.4766 14.0625 20.4766 10.9766 19.0312 8.4375C17.5469 5.9375 14.8906 4.375 12 4.375ZM12 22.5C8.40625 22.5 5.125 20.625 3.32812 17.5C1.53125 14.4141 1.53125 10.625 3.32812 7.5C5.125 4.41406 8.40625 2.5 12 2.5C15.5547 2.5 18.8359 4.41406 20.6328 7.5C22.4297 10.625 22.4297 14.4141 20.6328 17.5C18.8359 20.625 15.5547 22.5 12 22.5ZM16.4141 10.6641L11.4141 15.6641C11.0234 16.0547 10.4375 16.0547 10.0859 15.6641L7.58594 13.1641C7.19531 12.8125 7.19531 12.2266 7.58594 11.875C7.9375 11.4844 8.52344 11.4844 8.91406 11.875L10.75 13.7109L15.0859 9.375C15.4375 8.98438 16.0234 8.98438 16.4141 9.375C16.7656 9.72656 16.7656 10.3125 16.4141 10.6641Z", fill: "currentColor" }) });
+var CheckIcon2 = () => /* @__PURE__ */ jsx20("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", className: "feature-bullets__icon", children: /* @__PURE__ */ jsx20("path", { d: "M12 4.375C9.07031 4.375 6.41406 5.9375 4.92969 8.4375C3.48438 10.9766 3.48438 14.0625 4.92969 16.5625C6.41406 19.1016 9.07031 20.625 12 20.625C14.8906 20.625 17.5469 19.1016 19.0312 16.5625C20.4766 14.0625 20.4766 10.9766 19.0312 8.4375C17.5469 5.9375 14.8906 4.375 12 4.375ZM12 22.5C8.40625 22.5 5.125 20.625 3.32812 17.5C1.53125 14.4141 1.53125 10.625 3.32812 7.5C5.125 4.41406 8.40625 2.5 12 2.5C15.5547 2.5 18.8359 4.41406 20.6328 7.5C22.4297 10.625 22.4297 14.4141 20.6328 17.5C18.8359 20.625 15.5547 22.5 12 22.5ZM16.4141 10.6641L11.4141 15.6641C11.0234 16.0547 10.4375 16.0547 10.0859 15.6641L7.58594 13.1641C7.19531 12.8125 7.19531 12.2266 7.58594 11.875C7.9375 11.4844 8.52344 11.4844 8.91406 11.875L10.75 13.7109L15.0859 9.375C15.4375 8.98438 16.0234 8.98438 16.4141 9.375C16.7656 9.72656 16.7656 10.3125 16.4141 10.6641Z", fill: "currentColor" }) });
 var FeatureBullets = ({
   title,
   bullets,
@@ -1286,26 +1275,26 @@ var FeatureBullets = ({
   imageAlt = "",
   imagePosition = "right"
 }) => {
-  return /* @__PURE__ */ jsx20("section", { className: FeatureBullets_default.section, children: /* @__PURE__ */ jsx20("div", { className: FeatureBullets_default.container, children: /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsx20("section", { className: "feature-bullets", children: /* @__PURE__ */ jsx20("div", { className: "feature-bullets__container", children: /* @__PURE__ */ jsxs18(
     "div",
     {
       className: [
-        FeatureBullets_default.split,
-        imagePosition === "left" ? FeatureBullets_default["split--image-left"] : ""
+        "feature-bullets__split",
+        imagePosition === "left" ? "feature-bullets__split--image-left" : ""
       ].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ jsxs18("div", { className: FeatureBullets_default.content, children: [
-          /* @__PURE__ */ jsx20("h2", { className: FeatureBullets_default.title, children: title }),
-          bullets && bullets.length > 0 && /* @__PURE__ */ jsx20("div", { className: FeatureBullets_default.bulletList, children: bullets.map((bullet, i) => /* @__PURE__ */ jsxs18("div", { className: FeatureBullets_default.bulletItem, children: [
-            /* @__PURE__ */ jsx20("div", { className: FeatureBullets_default.iconWrapper, children: /* @__PURE__ */ jsx20(CheckIcon2, {}) }),
-            /* @__PURE__ */ jsx20("p", { className: FeatureBullets_default.bulletText, children: bullet })
+        /* @__PURE__ */ jsxs18("div", { className: "feature-bullets__content", children: [
+          /* @__PURE__ */ jsx20("h2", { className: "feature-bullets__title", children: title }),
+          bullets && bullets.length > 0 && /* @__PURE__ */ jsx20("div", { className: "feature-bullets__bullet-list", children: bullets.map((bullet, i) => /* @__PURE__ */ jsxs18("div", { className: "feature-bullets__bullet-item", children: [
+            /* @__PURE__ */ jsx20("div", { className: "feature-bullets__icon-wrapper", children: /* @__PURE__ */ jsx20(CheckIcon2, {}) }),
+            /* @__PURE__ */ jsx20("p", { className: "feature-bullets__bullet-text", children: bullet })
           ] }, i)) })
         ] }),
-        image && /* @__PURE__ */ jsx20("div", { className: FeatureBullets_default.imageWrapper, children: /* @__PURE__ */ jsx20(
+        image && /* @__PURE__ */ jsx20("div", { className: "feature-bullets__image-wrapper", children: /* @__PURE__ */ jsx20(
           "img",
           {
             alt: imageAlt,
-            className: FeatureBullets_default.image,
+            className: "feature-bullets__image",
             src: image
           }
         ) })
@@ -4585,28 +4574,23 @@ var Table = ({
 
 // templates/Leaders/Leaders.tsx
 import { useState as useState12 } from "react";
-
-// templates/Leaders/Leaders.module.css
-var Leaders_default = {};
-
-// templates/Leaders/Leaders.tsx
 import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
 var LinkedInIcon = () => /* @__PURE__ */ jsx38("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx38("path", { d: "M14.816 0H1.18C0.528 0 0 0.516 0 1.153V14.846C0 15.484 0.528 16 1.18 16H14.816C15.468 16 16 15.484 16 14.846V1.153C16 0.516 15.468 0 14.816 0ZM4.744 13.642H2.368V5.996H4.744V13.642ZM3.556 4.952C2.796 4.952 2.18 4.336 2.18 3.576C2.18 2.816 2.796 2.2 3.556 2.2C4.316 2.2 4.932 2.816 4.932 3.576C4.932 4.336 4.316 4.952 3.556 4.952ZM13.642 13.642H11.266V9.924C11.266 9.038 11.25 7.896 10.032 7.896C8.814 7.896 8.626 8.846 8.626 9.86V13.642H6.25V5.996H8.53V7.04H8.562C8.88 6.44 9.534 5.806 10.686 5.806C12.958 5.806 13.642 7.3 13.642 9.386V13.642Z", fill: "currentColor" }) });
 var ChevronDownIcon4 = () => /* @__PURE__ */ jsx38("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx38("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var ChevronUpIcon = () => /* @__PURE__ */ jsx38("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx38("path", { d: "M12 10L8 6L4 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var CardContent = ({ item }) => /* @__PURE__ */ jsxs34(Fragment5, { children: [
-  /* @__PURE__ */ jsx38("div", { className: Leaders_default.imageWrapper, children: /* @__PURE__ */ jsx38(
+  /* @__PURE__ */ jsx38("div", { className: "leaders__image-wrapper", children: /* @__PURE__ */ jsx38(
     "img",
     {
       src: item.imageUrl,
       alt: item.name,
-      className: Leaders_default.image,
+      className: "leaders__image",
       loading: "lazy"
     }
   ) }),
-  /* @__PURE__ */ jsxs34("div", { className: Leaders_default.content, children: [
-    /* @__PURE__ */ jsx38("h3", { className: Leaders_default.name, children: item.name }),
-    /* @__PURE__ */ jsx38("p", { className: Leaders_default.role, children: item.role })
+  /* @__PURE__ */ jsxs34("div", { className: "leaders__content", children: [
+    /* @__PURE__ */ jsx38("h3", { className: "leaders__name", children: item.name }),
+    /* @__PURE__ */ jsx38("p", { className: "leaders__role", children: item.role })
   ] }),
   item.linkedinUrl && /* @__PURE__ */ jsx38(
     Link,
@@ -4618,7 +4602,7 @@ var CardContent = ({ item }) => /* @__PURE__ */ jsxs34(Fragment5, { children: [
       label: "LinkedIn",
       colorScheme: "black",
       showChevron: false,
-      className: Leaders_default.link
+      className: "leaders__link"
     }
   )
 ] });
@@ -4635,25 +4619,25 @@ var Leaders = ({
   const hasMore = items.length > initialVisibleCount;
   const visibleItems = items.slice(0, initialVisibleCount);
   const extraItems = items.slice(initialVisibleCount);
-  return /* @__PURE__ */ jsx38("section", { className: [Leaders_default.section, className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ jsxs34("div", { className: Leaders_default.container, children: [
-    title && /* @__PURE__ */ jsx38("div", { className: Leaders_default.header, children: /* @__PURE__ */ jsx38("h2", { className: Leaders_default.title, children: title }) }),
-    /* @__PURE__ */ jsxs34("div", { className: Leaders_default.gridWrapper, children: [
-      /* @__PURE__ */ jsx38("div", { className: Leaders_default.grid, children: visibleItems.map((item, i) => /* @__PURE__ */ jsx38("div", { className: Leaders_default.card, children: /* @__PURE__ */ jsx38(CardContent, { item }) }, i)) }),
+  return /* @__PURE__ */ jsx38("section", { className: ["leaders", className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ jsxs34("div", { className: "leaders__container", children: [
+    title && /* @__PURE__ */ jsx38("div", { className: "leaders__header", children: /* @__PURE__ */ jsx38("h2", { className: "leaders__title", children: title }) }),
+    /* @__PURE__ */ jsxs34("div", { className: "leaders__grid-wrapper", children: [
+      /* @__PURE__ */ jsx38("div", { className: "leaders__grid", children: visibleItems.map((item, i) => /* @__PURE__ */ jsx38("div", { className: "leaders__card", children: /* @__PURE__ */ jsx38(CardContent, { item }) }, i)) }),
       hasMore && /* @__PURE__ */ jsx38(
         "div",
         {
           className: [
-            Leaders_default.extraCards,
-            isExpanded ? Leaders_default.extraCardsOpen : ""
+            "leaders__extra-cards",
+            isExpanded ? "leaders__extra-cards--open" : ""
           ].join(" "),
           "aria-hidden": !isExpanded,
-          children: /* @__PURE__ */ jsx38("div", { className: Leaders_default.extraGrid, children: extraItems.map((item, i) => /* @__PURE__ */ jsx38(
+          children: /* @__PURE__ */ jsx38("div", { className: "leaders__extra-grid", children: extraItems.map((item, i) => /* @__PURE__ */ jsx38(
             "div",
             {
               className: [
-                Leaders_default.card,
-                Leaders_default.extraCard,
-                isExpanded ? Leaders_default.extraCardVisible : ""
+                "leaders__card",
+                "leaders__extra-card",
+                isExpanded ? "leaders__extra-card--visible" : ""
               ].join(" "),
               style: {
                 transitionDelay: isExpanded ? `${i * 70 + 120}ms` : "0ms"
@@ -4665,7 +4649,7 @@ var Leaders = ({
         }
       )
     ] }),
-    hasMore && /* @__PURE__ */ jsx38("div", { className: Leaders_default.actions, children: /* @__PURE__ */ jsx38(
+    hasMore && /* @__PURE__ */ jsx38("div", { className: "leaders__actions", children: /* @__PURE__ */ jsx38(
       Button,
       {
         variant: "secondary",