@asdp/ferryui 0.1.22-dev.10750 → 0.1.22-dev.10751

package/dist/index.d.mts

@@ -3811,6 +3811,7 @@ interface PaymentMethodCategory {
 }
 interface CardPaymentMethodListLabels {
     selectAriaLabel: string;
+    method: string;
 }
 interface CardPaymentMethodListProps {
     /**

package/dist/index.d.ts

@@ -3811,6 +3811,7 @@ interface PaymentMethodCategory {
 }
 interface CardPaymentMethodListLabels {
     selectAriaLabel: string;
+    method: string;
 }
 interface CardPaymentMethodListProps {
     /**

package/dist/index.js

@@ -16432,10 +16432,12 @@ var CardPriceDetails = ({
 // src/components/CardPaymentMethodList/CardPaymentMethodList.constants.ts
 var DEFAULT_LABELS36 = {
   id: {
-    selectAriaLabel: "Pilih metode pembayaran"
+    selectAriaLabel: "Pilih metode pembayaran",
+    method: "Metode Pembayaran"
   },
   en: {
-    selectAriaLabel: "Select payment method"
+    selectAriaLabel: "Select payment method",
+    method: "Payment Method"
   }
 };
 var useStyles38 = reactComponents.makeStyles({
@@ -16500,51 +16502,54 @@ var CardPaymentMethodList = ({
 }) => {
   const styles = useStyles38();
   const mergedLabels = { ...DEFAULT_LABELS36[language], ...labels };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.container}`, children: methods.map((category, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    index > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Accordion, { multiple: true, collapsible: true, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.AccordionItem, { value: category.value, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        reactComponents.AccordionHeader,
-        {
-          expandIconPosition: "end",
-          className: styles.title,
-          children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: category.title || category.value })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.itemContainer, children: category.options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: styles.optionContainer,
-          onClick: () => onSelect(option.value),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.codeImage, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles.container}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.method }),
+    methods.map((category, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      index > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Accordion, { multiple: true, collapsible: true, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.AccordionItem, { value: category.value, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.AccordionHeader,
+          {
+            expandIconPosition: "end",
+            className: styles.title,
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: category.title || category.value })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.itemContainer, children: category.options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: styles.optionContainer,
+            onClick: () => onSelect(option.value),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.codeImage, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: option.image,
+                    alt: option.label,
+                    className: styles.image
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { className: styles.optionLabel, children: option.label })
+              ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
-                "img",
+                reactComponents.Radio,
                 {
-                  src: option.image,
-                  alt: option.label,
-                  className: styles.image
+                  checked: selectedValue === option.value,
+                  onChange: () => onSelect(option.value),
+                  value: option.value,
+                  name: "payment-method",
+                  disabled: option.disabled,
+                  "aria-label": `${mergedLabels.selectAriaLabel} ${option.label}`
                 }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { className: styles.optionLabel, children: option.label })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              reactComponents.Radio,
-              {
-                checked: selectedValue === option.value,
-                onChange: () => onSelect(option.value),
-                value: option.value,
-                name: "payment-method",
-                disabled: option.disabled,
-                "aria-label": `${mergedLabels.selectAriaLabel} ${option.label}`
-              }
-            )
-          ]
-        },
-        option.value
-      )) }) })
-    ] }) })
-  ] }, category.value || index)) }) });
+              )
+            ]
+          },
+          option.value
+        )) }) })
+      ] }) })
+    ] }, category.value || index))
+  ] }) });
 };
 
 // src/components/CardPaymentGuide/CardPaymentGuide.constants.ts