@asdp/ferryui 0.1.22-dev.8826 → 0.1.22-dev.8882

package/dist/index.mjs

@@ -2228,6 +2228,15 @@ var useStyles7 = makeStyles({
   },
   labelLarge: {
     fontSize: tokens.fontSizeBase300
+  },
+  valueSmall: {
+    fontSize: tokens.fontSizeBase200
+  },
+  valueMedium: {
+    fontSize: tokens.fontSizeBase300
+  },
+  valueLarge: {
+    fontSize: tokens.fontSizeBase400
   }
 });
 var detectIdentityType = (value) => {
@@ -2503,6 +2512,8 @@ var InputDynamic = ({
     };
     const otpMatch = /^otp(\d+)$/.exec(String(name));
     const otpIndex2 = otpMatch ? parseInt(otpMatch[1], 10) : null;
+    const classNameSize = size === "small" ? styles.valueSmall : size === "medium" ? styles.valueMedium : styles.valueLarge;
+    const fontSizeValuePhoneInput = size == "small" ? tokens.fontSizeBase200 : size === "medium" ? tokens.fontSizeBase300 : tokens.fontSizeBase400;
     if (type === "emailOrPhone") {
       updateEmailOrPhoneType(field.value);
       const stringValue = typeof field.value === "string" ? field.value : "";
@@ -2542,6 +2553,9 @@ var InputDynamic = ({
           children: /* @__PURE__ */ jsx(
             PhoneInput,
             {
+              inputStyle: {
+                fontSize: fontSizeValuePhoneInput
+              },
               country: defaultCountry.toLowerCase(),
               value: stringValue.startsWith("+") ? stringValue.substring(1) : stringValue,
               onChange: (value, data) => {
@@ -2601,6 +2615,7 @@ var InputDynamic = ({
             field.onChange(normalizedValue);
             updateEmailOrPhoneType(normalizedValue);
           },
+          className: classNameSize,
           placeholder: inputPlaceholder,
           disabled,
           appearance,
@@ -2680,7 +2695,10 @@ var InputDynamic = ({
               placeholder: inputPlaceholder,
               disabled,
               enableSearch: true,
-              disableSearchIcon: true
+              disableSearchIcon: true,
+              inputStyle: {
+                fontSize: fontSizeValuePhoneInput
+              }
             }
           )
         }
@@ -2703,13 +2721,22 @@ var InputDynamic = ({
           appearance,
           size,
           type: inputType,
-          style: { width: "100%" }
+          style: { width: "100%" },
+          className: classNameSize
         }
       ) });
     }
     switch (type) {
       case "textarea":
-        return /* @__PURE__ */ jsx(Textarea, { ...commonProps, rows, resize: "vertical" });
+        return /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            ...commonProps,
+            rows,
+            resize: "vertical",
+            className: classNameSize
+          }
+        );
       case "select":
         return /* @__PURE__ */ jsx(
           Select,
@@ -2720,7 +2747,7 @@ var InputDynamic = ({
             placeholder,
             options,
             styles: getSelectStyles(!!error),
-            className: styles.reactSelect,
+            className: mergeClasses(styles.reactSelect, classNameSize),
             classNamePrefix: "react-select",
             isMulti: isMultiSelect,
             inputProps: {
@@ -2756,7 +2783,7 @@ var InputDynamic = ({
             placeholder: placeholder || "Select country",
             options: COUNTRIES,
             styles: getSelectStyles(!!error),
-            className: styles.reactSelect,
+            className: mergeClasses(styles.reactSelect, classNameSize),
             classNamePrefix: "react-select",
             inputProps: {
               autoComplete: "new-password",
@@ -2773,10 +2800,16 @@ var InputDynamic = ({
             },
             getOptionLabel: (option) => option.label,
             getOptionValue: (option) => option.value,
-            formatOptionLabel: (option) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-              /* @__PURE__ */ jsx(Icon, { icon: option.flag, width: 20, height: 20 }),
-              /* @__PURE__ */ jsx("span", { children: option.label })
-            ] }),
+            formatOptionLabel: (option) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: { display: "flex", alignItems: "center", gap: "8px" },
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { icon: option.flag, width: 20, height: 20 }),
+                  /* @__PURE__ */ jsx("span", { children: option.label })
+                ]
+              }
+            ),
             menuPlacement
           }
         );
@@ -2807,7 +2840,10 @@ var InputDynamic = ({
                 placeholder: placeholder || mergedLabels.phoneDefaultPlaceholder,
                 disabled,
                 enableSearch: true,
-                disableSearchIcon: true
+                disableSearchIcon: true,
+                inputStyle: {
+                  fontSize: fontSizeValuePhoneInput
+                }
               }
             )
           }
@@ -2913,7 +2949,10 @@ var InputDynamic = ({
             min,
             max,
             step,
-            className: styles.inputWithAutocomplete
+            className: mergeClasses(
+              styles.inputWithAutocomplete,
+              classNameSize
+            )
           }
         );
       case "time":
@@ -2925,7 +2964,10 @@ var InputDynamic = ({
             type,
             min,
             max,
-            className: styles.inputWithAutocomplete
+            className: mergeClasses(
+              styles.inputWithAutocomplete,
+              classNameSize
+            )
           }
         );
       case "password":
@@ -2934,7 +2976,10 @@ var InputDynamic = ({
           {
             ...commonProps,
             type: showPassword ? "text" : "password",
-            className: styles.inputWithAutocomplete,
+            className: mergeClasses(
+              styles.inputWithAutocomplete,
+              classNameSize
+            ),
             contentAfter: /* @__PURE__ */ jsx(
               Button,
               {
@@ -3097,7 +3142,10 @@ var InputDynamic = ({
             ...commonProps,
             type,
             onInput,
-            className: styles.inputWithAutocomplete
+            className: mergeClasses(
+              styles.inputWithAutocomplete,
+              classNameSize
+            )
           }
         );
     }
@@ -11273,14 +11321,11 @@ var CardPaymentInfo = ({
         {
           size: "large",
           label: /* @__PURE__ */ jsx(Subtitle2, { style: { color: tokens.colorNeutralForeground1 }, children: mergedLabels.totalPayment }),
-          children: /* @__PURE__ */ jsx(
-            Input,
-            {
-              disabled: true,
-              value: `${mergedLabels.currencySymbol} ${totalAmount.toLocaleString(language === "id" ? "id-ID" : "en-US")}`,
-              className: styles.input
-            }
-          )
+          children: /* @__PURE__ */ jsxs(Title2, { children: [
+            mergedLabels.currencySymbol,
+            " ",
+            totalAmount.toLocaleString(language === "id" ? "id-ID" : "en-US")
+          ] })
         }
       )
     ] }),