@deriv-web-design/ui 0.0.22 → 0.0.24

package/dist/index.js

@@ -217,11 +217,6 @@ var Tag = ({
 
 // 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 = ({
@@ -243,7 +238,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",
     {
@@ -256,17 +251,17 @@ var Accordion = ({
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "button",
           {
-            className: Accordion_default.header,
+            className: "accordion__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: "accordion__title-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "accordion__title", children: title }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: ["accordion__chevron", isOpen ? "accordion__chevron--rotated" : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronIcon2, {}) }),
+              showFocusRing && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "accordion__focus-ring", "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: ["accordion__body-wrapper", isOpen ? "accordion__body-wrapper--open" : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "accordion__body-inner", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "accordion__body", children }) }) })
       ]
     }
   );
@@ -1098,9 +1093,6 @@ var Tabs = ({
   );
 };
 
-// templates/FaqAccordion/FaqAccordion.module.css
-var FaqAccordion_default = {};
-
 // templates/FaqAccordion/FaqAccordion.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var FaqAccordion = ({
@@ -1108,9 +1100,9 @@ var FaqAccordion = ({
   items,
   colorScheme = "white"
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("section", { className: [FaqAccordion_default.section, FaqAccordion_default[`section--${colorScheme}`]].join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: FaqAccordion_default.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: FaqAccordion_default.header, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h2", { className: FaqAccordion_default.title, children: title }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: FaqAccordion_default.list, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("section", { className: ["faq-accordion", `faq-accordion--${colorScheme}`].join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "faq-accordion__container", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "faq-accordion__header", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h2", { className: "faq-accordion__title", children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "faq-accordion__list", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       Accordion,
       {
         title: item.question,
@@ -1340,12 +1332,9 @@ var FeatureCardsIcon = ({
   ] }) });
 };
 
-// templates/FeatureBullets/FeatureBullets.module.css
-var FeatureBullets_default = {};
-
 // templates/FeatureBullets/FeatureBullets.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var CheckIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("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__ */ (0, import_jsx_runtime20.jsx)("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__ */ (0, import_jsx_runtime20.jsx)("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__ */ (0, import_jsx_runtime20.jsx)("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,
@@ -1353,26 +1342,26 @@ var FeatureBullets = ({
   imageAlt = "",
   imagePosition = "right"
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("section", { className: FeatureBullets_default.section, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: FeatureBullets_default.container, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("section", { className: "feature-bullets", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "feature-bullets__container", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "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__ */ (0, import_jsx_runtime20.jsxs)("div", { className: FeatureBullets_default.content, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { className: FeatureBullets_default.title, children: title }),
-          bullets && bullets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: FeatureBullets_default.bulletList, children: bullets.map((bullet, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: FeatureBullets_default.bulletItem, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: FeatureBullets_default.iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CheckIcon2, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: FeatureBullets_default.bulletText, children: bullet })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "feature-bullets__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { className: "feature-bullets__title", children: title }),
+          bullets && bullets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "feature-bullets__bullet-list", children: bullets.map((bullet, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "feature-bullets__bullet-item", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "feature-bullets__icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CheckIcon2, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "feature-bullets__bullet-text", children: bullet })
           ] }, i)) })
         ] }),
-        image && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: FeatureBullets_default.imageWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        image && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "feature-bullets__image-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "img",
           {
             alt: imageAlt,
-            className: FeatureBullets_default.image,
+            className: "feature-bullets__image",
             src: image
           }
         ) })
@@ -4634,28 +4623,23 @@ var Table = ({
 
 // templates/Leaders/Leaders.tsx
 var import_react20 = require("react");
-
-// templates/Leaders/Leaders.module.css
-var Leaders_default = {};
-
-// templates/Leaders/Leaders.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var LinkedInIcon = () => /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.jsx)("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__ */ (0, import_jsx_runtime38.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_runtime38.jsx)("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var ChevronUpIcon = () => /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.jsx)("path", { d: "M12 10L8 6L4 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var CardContent = ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: Leaders_default.imageWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "leaders__image-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "img",
     {
       src: item.imageUrl,
       alt: item.name,
-      className: Leaders_default.image,
+      className: "leaders__image",
       loading: "lazy"
     }
   ) }),
-  /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: Leaders_default.content, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h3", { className: Leaders_default.name, children: item.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: Leaders_default.role, children: item.role })
+  /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "leaders__content", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h3", { className: "leaders__name", children: item.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "leaders__role", children: item.role })
   ] }),
   item.linkedinUrl && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     Link,
@@ -4667,7 +4651,7 @@ var CardContent = ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(i
       label: "LinkedIn",
       colorScheme: "black",
       showChevron: false,
-      className: Leaders_default.link
+      className: "leaders__link"
     }
   )
 ] });
@@ -4684,25 +4668,25 @@ var Leaders = ({
   const hasMore = items.length > initialVisibleCount;
   const visibleItems = items.slice(0, initialVisibleCount);
   const extraItems = items.slice(initialVisibleCount);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("section", { className: [Leaders_default.section, className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: Leaders_default.container, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: Leaders_default.header, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h2", { className: Leaders_default.title, children: title }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: Leaders_default.gridWrapper, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: Leaders_default.grid, children: visibleItems.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: Leaders_default.card, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CardContent, { item }) }, i)) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("section", { className: ["leaders", className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "leaders__container", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "leaders__header", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h2", { className: "leaders__title", children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "leaders__grid-wrapper", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "leaders__grid", children: visibleItems.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "leaders__card", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CardContent, { item }) }, i)) }),
       hasMore && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "div",
         {
           className: [
-            Leaders_default.extraCards,
-            isExpanded ? Leaders_default.extraCardsOpen : ""
+            "leaders__extra-cards",
+            isExpanded ? "leaders__extra-cards--open" : ""
           ].join(" "),
           "aria-hidden": !isExpanded,
-          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: Leaders_default.extraGrid, children: extraItems.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "leaders__extra-grid", children: extraItems.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "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"
@@ -4714,7 +4698,7 @@ var Leaders = ({
         }
       )
     ] }),
-    hasMore && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: Leaders_default.actions, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    hasMore && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "leaders__actions", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       Button,
       {
         variant: "secondary",