@asdp/ferryui 0.1.22-dev.10695 → 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

@@ -1442,7 +1442,7 @@ var CardTicket = ({
                     children: /* @__PURE__ */ jsxRuntime.jsx(
                       reactComponents.Badge,
                       {
-                        size: "large",
+                        size: "extra-large",
                         appearance: "filled",
                         style: {
                           backgroundColor: departureItem?.availableTicket <= 0 ? reactComponents.tokens.colorNeutralForeground3 : departureItem?.provider?.serviceColor,
@@ -1479,8 +1479,8 @@ var CardTicket = ({
                     src: departureItem?.provider?.logo,
                     className: styles.asdpLogo,
                     alt: mergedLabels.logoAlt,
-                    height: 56,
-                    width: 82,
+                    height: 98,
+                    width: 137,
                     style: departureItem?.availableTicket <= 0 ? { filter: "grayscale(100%)", opacity: 0.7 } : {}
                   }
                 )
@@ -1521,7 +1521,12 @@ var CardTicket = ({
             /* @__PURE__ */ jsxRuntime.jsx(
               reactGridSystem.Col,
               {
-                style: { textAlign: "center" },
+                style: {
+                  textAlign: "center",
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center"
+                },
                 xs: 12,
                 sm: 12,
                 md: 12,
@@ -1529,7 +1534,7 @@ var CardTicket = ({
                 xl: 12,
                 xxl: 12,
                 xxxl: 12,
-                children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: departureItem?.provider?.name })
+                children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: departureItem?.provider?.name })
               }
             )
           ] }),
@@ -1875,7 +1880,7 @@ var CardTicket = ({
                   /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: mergedLabels.facilitiesLabel }),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.facilitiesList, children: departureItem?.provider?.facilities.map((facility, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.facilityItem, children: [
                     /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:checkmark-circle-24-filled" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1Strong, { children: facility })
+                    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: facility })
                   ] }, idx)) })
                 ] })
               ] }),
@@ -6376,7 +6381,7 @@ var useStyles10 = reactComponents.makeStyles({
     // borderBottomRightRadius: '0',
     padding: "1rem",
     paddingTop: "2rem",
-    paddingBottom: "7rem",
+    paddingBottom: "4rem",
     position: "relative",
     overflow: "visible",
     // boxShadow: '0 0 2px rgba(0,0,0,0.12), 0 -8px 16px rgba(0,0,0,0.14)',
@@ -6416,7 +6421,7 @@ var useStyles10 = reactComponents.makeStyles({
   },
   buttonSearchContainer: {
     display: "flex",
-    justifyContent: "center",
+    justifyContent: "end",
     alignItems: "center",
     height: "100%",
     width: "100%"
@@ -6535,8 +6540,8 @@ var CardTicketSearchSummary = ({
           md: 12,
           lg: 12,
           xl: 12,
-          xxl: 4,
-          xxxl: 4,
+          xxl: 6,
+          xxxl: 6,
           className: styles.paddingResponsive,
           children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { height: "100%", alignItems: "center" }, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -6721,8 +6726,22 @@ var CardTicketSearchSummary = ({
           md: 12,
           lg: 12,
           xl: 12,
-          xxl: 2,
-          xxxl: 2,
+          xxl: 6,
+          xxxl: 6,
+          className: styles.paddingResponsive,
+          children: children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.filterButtonContainer, children })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactGridSystem.Col,
+        {
+          xs: 12,
+          sm: 12,
+          md: 12,
+          lg: 12,
+          xl: 12,
+          xxl: 6,
+          xxxl: 6,
           className: styles.paddingResponsive,
           children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.buttonSearchContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
             reactComponents.Button,
@@ -6731,6 +6750,7 @@ var CardTicketSearchSummary = ({
               appearance: "primary",
               size: "medium",
               style: {
+                marginTop: "1rem",
                 width: "100%",
                 borderRadius: reactComponents.tokens.borderRadiusCircular
               },
@@ -6743,7 +6763,6 @@ var CardTicketSearchSummary = ({
         }
       )
     ] }),
-    children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.filterButtonContainer, children }),
     Array.from({ length: circularConfig.count }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -16413,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({
@@ -16481,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