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

package/dist/index.js

@@ -2237,6 +2237,15 @@ var useStyles7 = reactComponents.makeStyles({
   },
   labelLarge: {
     fontSize: reactComponents.tokens.fontSizeBase300
+  },
+  valueSmall: {
+    fontSize: reactComponents.tokens.fontSizeBase200
+  },
+  valueMedium: {
+    fontSize: reactComponents.tokens.fontSizeBase300
+  },
+  valueLarge: {
+    fontSize: reactComponents.tokens.fontSizeBase400
   }
 });
 var detectIdentityType = (value) => {
@@ -2512,6 +2521,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" ? reactComponents.tokens.fontSizeBase200 : size === "medium" ? reactComponents.tokens.fontSizeBase300 : reactComponents.tokens.fontSizeBase400;
     if (type === "emailOrPhone") {
       updateEmailOrPhoneType(field.value);
       const stringValue = typeof field.value === "string" ? field.value : "";
@@ -2551,6 +2562,9 @@ var InputDynamic = ({
           children: /* @__PURE__ */ jsxRuntime.jsx(
             PhoneInput,
             {
+              inputStyle: {
+                fontSize: fontSizeValuePhoneInput
+              },
               country: defaultCountry.toLowerCase(),
               value: stringValue.startsWith("+") ? stringValue.substring(1) : stringValue,
               onChange: (value, data) => {
@@ -2610,6 +2624,7 @@ var InputDynamic = ({
             field.onChange(normalizedValue);
             updateEmailOrPhoneType(normalizedValue);
           },
+          className: classNameSize,
           placeholder: inputPlaceholder,
           disabled,
           appearance,
@@ -2689,7 +2704,10 @@ var InputDynamic = ({
               placeholder: inputPlaceholder,
               disabled,
               enableSearch: true,
-              disableSearchIcon: true
+              disableSearchIcon: true,
+              inputStyle: {
+                fontSize: fontSizeValuePhoneInput
+              }
             }
           )
         }
@@ -2712,13 +2730,22 @@ var InputDynamic = ({
           appearance,
           size,
           type: inputType,
-          style: { width: "100%" }
+          style: { width: "100%" },
+          className: classNameSize
         }
       ) });
     }
     switch (type) {
       case "textarea":
-        return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Textarea, { ...commonProps, rows, resize: "vertical" });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Textarea,
+          {
+            ...commonProps,
+            rows,
+            resize: "vertical",
+            className: classNameSize
+          }
+        );
       case "select":
         return /* @__PURE__ */ jsxRuntime.jsx(
           Select__default.default,
@@ -2729,7 +2756,7 @@ var InputDynamic = ({
             placeholder,
             options,
             styles: getSelectStyles(!!error),
-            className: styles.reactSelect,
+            className: reactComponents.mergeClasses(styles.reactSelect, classNameSize),
             classNamePrefix: "react-select",
             isMulti: isMultiSelect,
             inputProps: {
@@ -2765,7 +2792,7 @@ var InputDynamic = ({
             placeholder: placeholder || "Select country",
             options: COUNTRIES,
             styles: getSelectStyles(!!error),
-            className: styles.reactSelect,
+            className: reactComponents.mergeClasses(styles.reactSelect, classNameSize),
             classNamePrefix: "react-select",
             inputProps: {
               autoComplete: "new-password",
@@ -2782,10 +2809,16 @@ var InputDynamic = ({
             },
             getOptionLabel: (option) => option.label,
             getOptionValue: (option) => option.value,
-            formatOptionLabel: (option) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: option.flag, width: 20, height: 20 }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label })
-            ] }),
+            formatOptionLabel: (option) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: { display: "flex", alignItems: "center", gap: "8px" },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: option.flag, width: 20, height: 20 }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label })
+                ]
+              }
+            ),
             menuPlacement
           }
         );
@@ -2816,7 +2849,10 @@ var InputDynamic = ({
                 placeholder: placeholder || mergedLabels.phoneDefaultPlaceholder,
                 disabled,
                 enableSearch: true,
-                disableSearchIcon: true
+                disableSearchIcon: true,
+                inputStyle: {
+                  fontSize: fontSizeValuePhoneInput
+                }
               }
             )
           }
@@ -2922,7 +2958,10 @@ var InputDynamic = ({
             min,
             max,
             step,
-            className: styles.inputWithAutocomplete
+            className: reactComponents.mergeClasses(
+              styles.inputWithAutocomplete,
+              classNameSize
+            )
           }
         );
       case "time":
@@ -2934,7 +2973,10 @@ var InputDynamic = ({
             type,
             min,
             max,
-            className: styles.inputWithAutocomplete
+            className: reactComponents.mergeClasses(
+              styles.inputWithAutocomplete,
+              classNameSize
+            )
           }
         );
       case "password":
@@ -2943,7 +2985,10 @@ var InputDynamic = ({
           {
             ...commonProps,
             type: showPassword ? "text" : "password",
-            className: styles.inputWithAutocomplete,
+            className: reactComponents.mergeClasses(
+              styles.inputWithAutocomplete,
+              classNameSize
+            ),
             contentAfter: /* @__PURE__ */ jsxRuntime.jsx(
               reactComponents.Button,
               {
@@ -3106,7 +3151,10 @@ var InputDynamic = ({
             ...commonProps,
             type,
             onInput,
-            className: styles.inputWithAutocomplete
+            className: reactComponents.mergeClasses(
+              styles.inputWithAutocomplete,
+              classNameSize
+            )
           }
         );
     }
@@ -11282,14 +11330,11 @@ var CardPaymentInfo = ({
         {
           size: "large",
           label: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { style: { color: reactComponents.tokens.colorNeutralForeground1 }, children: mergedLabels.totalPayment }),
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            reactComponents.Input,
-            {
-              disabled: true,
-              value: `${mergedLabels.currencySymbol} ${totalAmount.toLocaleString(language === "id" ? "id-ID" : "en-US")}`,
-              className: styles.input
-            }
-          )
+          children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Title2, { children: [
+            mergedLabels.currencySymbol,
+            " ",
+            totalAmount.toLocaleString(language === "id" ? "id-ID" : "en-US")
+          ] })
         }
       )
     ] }),