@cleartrip/ct-design-field 5.6.0 → 5.7.0-SNAPSHOT-native-main.2

package/dist/ct-design-field.esm.js

@@ -5,10 +5,10 @@ import { makeStyles, useStyles, useWebMergeStyles } from '@cleartrip/ct-design-s
 import { Container } from '@cleartrip/ct-design-container';
 import { TypographyVariant, Typography, TypographyColor } from '@cleartrip/ct-design-typography';
 import { css } from '@emotion/css';
+import { useTheme } from '@cleartrip/ct-design-theme';
 import { __rest } from 'tslib';
 import { Divider } from '@cleartrip/ct-design-divider';
 import { ONLY_NUMERIC } from '@cleartrip/ct-design-common-constants';
-import { useTheme } from '@cleartrip/ct-design-theme';
 import { isIOS } from '@cleartrip/ct-design-common-utils';
 import useMergeRefs from '@cleartrip/ct-design-use-merge-refs';
 import { DottedLoader } from '@cleartrip/ct-design-dotted-loader';
@@ -26,13 +26,14 @@ var FieldType;
 })(FieldType || (FieldType = {}));
 
 const getFieldContainerBorderStyle = ({ theme, hasError, focus, disabled, }) => {
+    const borderWidth = theme.border.width.md;
     if (hasError) {
-        return { borderStyle: 'solid', borderColor: theme.color.border.warning, borderWidth: theme.border.width.md };
+        return { borderStyle: 'solid', borderColor: theme.color.border.warning, borderWidth };
     }
     if (focus && !disabled) {
-        return { borderStyle: 'solid', borderColor: theme.color.border.primary, borderWidth: theme.border.width.md };
+        return { borderStyle: 'solid', borderColor: theme.color.border.primary, borderWidth };
     }
-    return { borderStyle: 'solid', borderColor: theme.color.border.disabledDark, borderWidth: theme.border.width.sm };
+    return { borderStyle: 'solid', borderColor: theme.color.border.disabledDark, borderWidth };
 };
 const getFieldSpacingAndHeight = ({ isLabeledPlaceholder, theme, variant, focus, value, disabledPlaceHolder, customSpacingTop = 4, }) => {
     const isFieldNotEmpty = focus || value.length > 0;
@@ -274,26 +275,19 @@ const styles$4 = css `
     outline: none;
   }
 `;
-const staticStyles$5 = makeStyles((theme) => {
-    return {
-        root: {
-            width: '100%',
-            border: 'none',
-            outline: 'none',
-            fontSize: theme.typography.size[16],
-            fontWeight: theme.typography.weight.medium,
-            lineHeight: theme.typography.lineHeight[24],
-        },
-    };
-});
-const InputFieldCore$1 = forwardRef(({ value, disabled, styleConfig, onChange, onFocus, onBlur, onKeyDown, onSelect, onPressIn, placeholder, autoFocus, readOnly, type, inputMode, autoCapitalize, fieldTypographyVariant, variant, prefix, focus, placeholderType, id, maxLength, }, forwardedRef) => {
+const staticStyles$5 = makeStyles(() => ({
+    root: {
+        border: 'none',
+        outline: 'none',
+    },
+}));
+const InputFieldCore$1 = forwardRef(({ value, disabled, styleConfig, onChange, onFocus, onBlur, onKeyDown, onSelect, onPressIn, placeholder, autoFocus, readOnly, type, inputMode, autoCapitalize, fieldTypographyVariant, variant, focus, placeholderType, prefix, cursorColor, id, maxLength, }, forwardedRef) => {
+    const theme = useTheme();
     const inputRef = useRef(null);
-    const { field = [] } = styleConfig !== null && styleConfig !== void 0 ? styleConfig : {};
+    const { field = [], root = [] } = styleConfig !== null && styleConfig !== void 0 ? styleConfig : {};
     const isPrefixComponent = isValidElement(prefix);
     const disabledPlaceHolder = !(placeholder === null || placeholder === void 0 ? void 0 : placeholder.length);
-    const dynamicStyles = useStyles((theme) => ({
-        root: getTypographyVariant(theme, fieldTypographyVariant !== null && fieldTypographyVariant !== void 0 ? fieldTypographyVariant : 'HM2'),
-    }), [fieldTypographyVariant]);
+    const inputPlaceholder = placeholderType === 'labeled' && focus ? '' : placeholder;
     const fieldStyles = useStyles((theme) => {
         return {
             root: getFieldStyles({
@@ -309,7 +303,10 @@ const InputFieldCore$1 = forwardRef(({ value, disabled, styleConfig, onChange, o
             }),
         };
     }, [disabled, variant, focus, value, type, isPrefixComponent, disabledPlaceHolder]);
-    const mergedStyles = useWebMergeStyles([staticStyles$5.root, dynamicStyles.root, styles$4, fieldStyles.root, ...field], [fieldStyles.root, dynamicStyles.root, field]);
+    const typographyStyles = useStyles((theme) => ({
+        root: fieldTypographyVariant ? getTypographyVariant(theme, fieldTypographyVariant) : {},
+    }), [fieldTypographyVariant]);
+    const mergedStyles = useWebMergeStyles([staticStyles$5.root, styles$4, fieldStyles.root, typographyStyles.root, ...root, ...field], [fieldStyles.root, typographyStyles.root, root, field]);
     useImperativeHandle(forwardedRef, () => ({
         focus: () => {
             var _a;
@@ -336,6 +333,7 @@ const InputFieldCore$1 = forwardRef(({ value, disabled, styleConfig, onChange, o
                     (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
                 },
             },
+            preventDefault: () => event.preventDefault(),
         });
     }, [onChange]);
     const handleOnFocus = useCallback((event) => {
@@ -412,21 +410,7 @@ const InputFieldCore$1 = forwardRef(({ value, disabled, styleConfig, onChange, o
             preventDefault: () => event.preventDefault(),
         });
     }, [onPressIn]);
-    const webProps = {
-        onChange: handleOnChange,
-        onFocus: handleOnFocus,
-        onBlur: handleOnBlur,
-        onKeyDown: handleOnKeyDown,
-        onSelect: handleOnSelect,
-        onMouseDown: handleOnPressIn,
-        placeholder,
-        autoFocus,
-        readOnly,
-        type,
-        inputMode,
-        autoCapitalize,
-    };
-    return (jsx("input", Object.assign({ maxLength: maxLength, id: id, ref: inputRef, value: value, disabled: disabled, className: mergedStyles }, webProps)));
+    return (jsx("input", { maxLength: maxLength, id: id, ref: inputRef, value: value, disabled: disabled, readOnly: readOnly, className: mergedStyles, style: { caretColor: cursorColor || theme.color.text.primary }, onChange: handleOnChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: handleOnKeyDown, onSelect: handleOnSelect, onMouseDown: handleOnPressIn, placeholder: inputPlaceholder, autoFocus: autoFocus, type: type, inputMode: inputMode, autoCapitalize: autoCapitalize }));
 });
 InputFieldCore$1.displayName = 'InputFieldCore';
 
@@ -435,11 +419,16 @@ const staticStyles$4 = makeStyles((theme) => {
         root: {
             position: 'absolute',
             paddingLeft: theme.spacing[4],
+            paddingRight: theme.spacing[4],
             width: '100%',
             height: '100%',
             display: 'flex',
-            transform: [{ translateY: 0 }],
             top: 16,
+            pointerEvents: 'none',
+            boxSizing: 'border-box',
+        },
+        rootSM: {
+            top: 8,
         },
     };
 });
@@ -448,29 +437,37 @@ const FieldLabelWrapper = ({ variant, type, value, focus = false, placeholder, p
     const { placeholderLabel = [], placeholderTypography = {} } = placeholderStyleConfig !== null && placeholderStyleConfig !== void 0 ? placeholderStyleConfig : {};
     const shiftPlaceholder = placeholderType === 'floating';
     const isPrefixComponent = isValidElement(prefix);
+    const fieldType = type !== null && type !== void 0 ? type : FieldType.TEXT;
     const baseStyles = useStyles((theme) => ({
         root: getFieldPlaceholderStyles({
             theme,
             isFocused: focus,
             disabled,
             variant: variant !== null && variant !== void 0 ? variant : 'md',
-            fieldType: type !== null && type !== void 0 ? type : 'text',
+            fieldType,
             isPrefixComponent,
             shiftPlaceholder,
         }),
     }), [focus, disabled, variant, type, isPrefixComponent, shiftPlaceholder]);
-    const labelStyles = useWebMergeStyles([baseStyles.root, staticStyles$4.root, ...placeholderLabel], [baseStyles.root, placeholderLabel]);
+    const labelStyles = useWebMergeStyles([
+        staticStyles$4.root,
+        variant === FieldVariant.SM ? staticStyles$4.rootSM : undefined,
+        baseStyles.root,
+        ...placeholderLabel,
+    ], [variant, baseStyles.root, placeholderLabel]);
     if (placeholderType === 'default' || !focus) {
         return null;
     }
     if (variant === FieldVariant.SM) {
-        if (value.length)
+        if (value.length) {
             return null;
-        return (jsx(Container, { styleConfig: { root: [baseStyles.root, staticStyles$4.root, ...placeholderLabel] }, children: jsx(Typography, { variant: 'B2', color: 'tertiary', styleConfig: placeholderTypography, children: placeholder }) }));
+        }
+        return (jsx("label", { className: labelStyles, htmlFor: id, children: jsx(Typography, { variant: 'B2', color: 'tertiary', styleConfig: placeholderTypography, children: placeholder }) }));
     }
-    if (type === FieldType.PHONE && value.length)
+    if (fieldType === FieldType.PHONE && value.length) {
         return null;
-    const typographyVariant = type === FieldType.PHONE ? 'B1' : focus ? 'B3' : 'B1';
+    }
+    const typographyVariant = fieldType === FieldType.PHONE ? 'B1' : focus ? 'B3' : 'B1';
     return (jsx("label", { className: labelStyles, htmlFor: id, children: jsx(Typography, { variant: typographyVariant, color: 'tertiary', styleConfig: placeholderTypography, children: placeholder }) }));
 };
 
@@ -492,14 +489,13 @@ const staticStyles$3 = makeStyles((theme) => {
         },
     };
 });
-const InputFieldCore = forwardRef(({ value, disabled, styleConfig, onChange, onFocus, onBlur, onKeyDown, onSelect, onPressIn, placeholder, autoFocus, readOnly, type, inputMode, autoCapitalize, fieldTypographyVariant, variant, prefix, focus, placeholderType, id, maxLength, }, forwardedRef) => {
+const InputFieldCore = forwardRef(({ value, disabled, styleConfig, onChange, onFocus, onBlur, onKeyDown, onSelect, onPressIn, placeholder, autoFocus, readOnly, type, inputMode, autoCapitalize, fieldTypographyVariant, variant, focus, placeholderType, prefix, cursorColor, id, maxLength, }, forwardedRef) => {
+    const theme = useTheme();
     const inputRef = useRef(null);
-    const { field = [] } = styleConfig !== null && styleConfig !== void 0 ? styleConfig : {};
+    const { field = [], root = [] } = styleConfig !== null && styleConfig !== void 0 ? styleConfig : {};
     const isPrefixComponent = isValidElement(prefix);
     const disabledPlaceHolder = !(placeholder === null || placeholder === void 0 ? void 0 : placeholder.length);
-    const dynamicStyles = useStyles((theme) => ({
-        root: getTypographyVariant(theme, fieldTypographyVariant !== null && fieldTypographyVariant !== void 0 ? fieldTypographyVariant : 'HM2'),
-    }), [fieldTypographyVariant]);
+    const inputPlaceholder = placeholderType === 'labeled' && focus ? '' : placeholder;
     const fieldStyles = useStyles((theme) => {
         return {
             root: getFieldStyles({
@@ -515,7 +511,10 @@ const InputFieldCore = forwardRef(({ value, disabled, styleConfig, onChange, onF
             }),
         };
     }, [disabled, variant, focus, value, type, isPrefixComponent, disabledPlaceHolder]);
-    const mergedStyles = useWebMergeStyles([staticStyles$3.root, dynamicStyles.root, styles$3, fieldStyles.root, ...field], [fieldStyles.root, dynamicStyles.root, field]);
+    const typographyStyles = useStyles((theme) => ({
+        root: fieldTypographyVariant ? getTypographyVariant(theme, fieldTypographyVariant) : {},
+    }), [fieldTypographyVariant]);
+    const mergedStyles = useWebMergeStyles([staticStyles$3.root, styles$3, fieldStyles.root, typographyStyles.root, ...root, ...field], [fieldStyles.root, typographyStyles.root, root, field]);
     useImperativeHandle(forwardedRef, () => ({
         focus: () => {
             var _a;
@@ -542,6 +541,7 @@ const InputFieldCore = forwardRef(({ value, disabled, styleConfig, onChange, onF
                     (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
                 },
             },
+            preventDefault: () => event.preventDefault(),
         });
     }, [onChange]);
     const handleOnFocus = useCallback((event) => {
@@ -618,21 +618,7 @@ const InputFieldCore = forwardRef(({ value, disabled, styleConfig, onChange, onF
             preventDefault: () => event.preventDefault(),
         });
     }, [onPressIn]);
-    const webProps = {
-        onChange: handleOnChange,
-        onFocus: handleOnFocus,
-        onBlur: handleOnBlur,
-        onKeyDown: handleOnKeyDown,
-        onSelect: handleOnSelect,
-        onMouseDown: handleOnPressIn,
-        placeholder,
-        autoFocus,
-        readOnly,
-        type,
-        inputMode,
-        autoCapitalize,
-    };
-    return (jsx("textarea", Object.assign({ maxLength: maxLength, id: id, ref: inputRef, value: value, disabled: disabled, className: mergedStyles }, webProps)));
+    return (jsx("textarea", { maxLength: maxLength, id: id, ref: inputRef, value: value, disabled: disabled, readOnly: readOnly, className: mergedStyles, style: { caretColor: cursorColor || theme.color.text.primary }, onChange: handleOnChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: handleOnKeyDown, onSelect: handleOnSelect, onMouseDown: handleOnPressIn, placeholder: inputPlaceholder, autoFocus: autoFocus, inputMode: inputMode, autoCapitalize: autoCapitalize }));
 });
 InputFieldCore.displayName = 'TextArea';
 
@@ -642,10 +628,11 @@ const staticStyles$2 = makeStyles((theme) => {
             flex: 1,
             flexShrink: 1,
             display: 'flex',
-            alignItems: 'center',
+            alignItems: 'stretch',
             justifyContent: 'center',
             position: 'relative',
             height: '100%',
+            minHeight: 0,
         },
         promptBox: {
             paddingLeft: theme.spacing[4],
@@ -661,7 +648,18 @@ const staticStyles$2 = makeStyles((theme) => {
             justifyContent: 'center',
             alignItems: 'center',
         },
-        flexNoShrink: {
+        prefixSlot: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'stretch',
+            alignSelf: 'stretch',
+            flexShrink: 0,
+        },
+        suffixSlot: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            alignSelf: 'stretch',
             flexShrink: 0,
         },
         fieldContainer: {
@@ -676,7 +674,7 @@ const staticStyles$2 = makeStyles((theme) => {
         },
     };
 });
-const Field = forwardRef(({ prefix, onBlur, onFocus, onChange, onKeyDown, onPressIn, onSelect, value, autoCapitalize, autoFocus = false, disabled, inputMode, placeholder, prefixGap: _prefixGap, prompt, readOnly, placeholderType = 'default', suffix, suffixGap: _suffixGap, type, variant, styleConfig = {}, fieldTypographyVariant, id, maxLength, numberOfLines, showSoftInputOnFocus, customSpacingTop, }, ref) => {
+const Field = forwardRef(({ prefix, onBlur, onFocus, onChange, onKeyDown, onPressIn, onSelect, value, autoCapitalize, autoFocus = false, disabled, inputMode, placeholder, prefixGap: _prefixGap, prompt, readOnly, placeholderType = 'default', suffix, suffixGap: _suffixGap, type, variant, styleConfig = {}, fieldTypographyVariant, id, maxLength, numberOfLines, showSoftInputOnFocus, customSpacingTop, cursorColor, }, ref) => {
     const [focus, setFocus] = useState(autoFocus);
     const _isFocused = focus || value.length > 0;
     const { promptStyles } = styleConfig || {};
@@ -694,13 +692,13 @@ const Field = forwardRef(({ prefix, onBlur, onFocus, onChange, onKeyDown, onPres
     const InputField = numberOfLines && numberOfLines > 1 ? InputFieldCore : InputFieldCore$1;
     return (jsxs(Box, { boxSize: 'micro', styleConfig: styleConfig, children: [jsxs(Container, { styleConfig: {
                     root: [fieldContainerStyles.root, staticStyles$2.fieldContainer, ...(styleConfig.fieldContainer || [])],
-                }, children: [isValidElement(prefix) && (jsx(Container, { styleConfig: { root: [staticStyles$2.flexNoShrink] }, children: cloneElement(prefix, { focus }) })), jsxs(Container, { styleConfig: { root: [staticStyles$2.fieldWrapper, ...(styleConfig.field || [])] }, children: [jsx(FieldLabelWrapper, { id: id, variant: variant, type: type, value: value, focus: _isFocused, placeholder: placeholder, placeholderType: placeholderType, disabled: disabled, styleConfig: styleConfig, prefix: prefix }), jsx(InputField, { id: id, ref: ref, value: value, disabled: disabled, placeholder: placeholder, placeholderType: placeholderType, autoFocus: autoFocus, readOnly: readOnly, type: type, inputMode: inputMode, autoCapitalize: autoCapitalize, fieldTypographyVariant: fieldTypographyVariant, styleConfig: styleConfig, focus: _isFocused, onChange: onChange, onSelect: onSelect, onPressIn: onPressIn, onFocus: (e) => {
+                }, children: [isValidElement(prefix) && (jsx(Container, { styleConfig: { root: [staticStyles$2.prefixSlot] }, children: cloneElement(prefix, { focus }) })), jsxs(Container, { styleConfig: { root: [staticStyles$2.fieldWrapper, ...(styleConfig.field || [])] }, children: [jsx(FieldLabelWrapper, { id: id, variant: variant, type: type, value: value, focus: _isFocused, placeholder: placeholder, placeholderType: placeholderType, disabled: disabled, styleConfig: styleConfig, prefix: prefix }), jsx(InputField, { id: id, ref: ref, value: value, disabled: disabled, placeholder: placeholder, placeholderType: placeholderType, autoFocus: autoFocus, readOnly: readOnly, type: type, inputMode: inputMode, autoCapitalize: autoCapitalize, fieldTypographyVariant: fieldTypographyVariant, styleConfig: styleConfig, focus: _isFocused, prefix: prefix, cursorColor: cursorColor, onChange: onChange, onSelect: onSelect, onPressIn: onPressIn, onFocus: (e) => {
                                     setFocus(true);
                                     onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
                                 }, onBlur: (e) => {
                                     setFocus(false);
                                     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-                                }, onKeyDown: onKeyDown, maxLength: maxLength, numberOfLines: numberOfLines, showSoftInputOnFocus: showSoftInputOnFocus, customSpacingTop: customSpacingTop })] }), isValidElement(suffix) && (jsx(Container, { styleConfig: { root: [staticStyles$2.flexNoShrink] }, children: cloneElement(suffix, { focus }) }))] }), (promptIcon || promptMessage) && (jsxs(Box, { boxSize: 'pico', horizontal: true, styleConfig: {
+                                }, onKeyDown: onKeyDown, maxLength: maxLength, numberOfLines: numberOfLines, showSoftInputOnFocus: showSoftInputOnFocus, customSpacingTop: customSpacingTop })] }), isValidElement(suffix) && (jsx(Container, { styleConfig: { root: [staticStyles$2.suffixSlot] }, children: cloneElement(suffix, { focus }) }))] }), (promptIcon || promptMessage) && (jsxs(Box, { boxSize: 'pico', horizontal: true, styleConfig: {
                     root: [staticStyles$2.promptBox, ...((promptStyles === null || promptStyles === void 0 ? void 0 : promptStyles.promptBox) || [])],
                 }, children: [promptIcon && (jsx(Container, { styleConfig: { root: [staticStyles$2.promptIcon, ...((promptStyles === null || promptStyles === void 0 ? void 0 : promptStyles.promptIconContainer) || [])] }, children: promptIcon })), promptMessage && (jsx(Typography, { variant: 'B3', color: hasError ? 'warning' : 'success', styleConfig: promptStyles === null || promptStyles === void 0 ? void 0 : promptStyles.promptMessageTypography, children: promptMessage }))] }))] }));
 });
@@ -709,10 +707,12 @@ Field.displayName = 'Field';
 const styles$2 = makeStyles((theme) => {
     return {
         wrapper: {
+            height: '100%',
             alignItems: 'center',
             justifyContent: 'center',
             flexDirection: 'row',
-            paddingLeft: 16,
+            paddingLeft: theme.spacing[4],
+            paddingRight: theme.spacing[2],
         },
         flagContainer: {
             display: 'flex',
@@ -722,12 +722,10 @@ const styles$2 = makeStyles((theme) => {
             height: theme.size[6],
             width: theme.size[6],
         },
-        countryCode: {
-            alignSelf: 'flex-start',
-        },
         divider: {
             borderRightWidth: 1,
-            height: '100%',
+            alignSelf: 'center',
+            height: theme.size[6],
             borderRightColor: theme.color.background.disabledDark,
         },
         disabledColor: {
@@ -753,27 +751,26 @@ const PhoneFieldPrefix = ({ countryCode, disabled = false, flagIcon, onDropdownC
             return;
         onDropdownClick === null || onDropdownClick === void 0 ? void 0 : onDropdownClick();
     };
-    return (jsxs(Box, { boxSize: 'micro', styleConfig: { root: [styles$2.wrapper] }, onClick: onClick, children: [jsxs(Container, { styleConfig: {
+    return (jsxs(Box, { horizontal: true, boxSize: 'micro', styleConfig: { root: [styles$2.wrapper] }, onClick: onClick, children: [jsxs(Container, { styleConfig: {
                     root: [styles$2.container],
-                }, children: [flagIcon && jsx(Container, { styleConfig: { root: [styles$2.flagContainer] }, children: flagIcon }), jsx(Typography, { variant: 'B1', color: disabled ? 'disabled' : 'primary', styleConfig: { root: [styles$2.countryCode] }, children: countryCode }), showDropdownIcon && (jsx(DownChevronV2, { color: disabled ? styles$2.disabledColor.color : styles$2.enabledColor.color }))] }), jsx(Divider, { dividerWidth: 1, dividerLength: 0, orientation: 'vertical', styleConfig: { root: [styles$2.divider] } })] }));
+                }, children: [flagIcon && jsx(Container, { styleConfig: { root: [styles$2.flagContainer] }, children: flagIcon }), jsx(Typography, { variant: 'B1', color: disabled ? 'disabled' : 'primary', children: countryCode }), showDropdownIcon && (jsx(DownChevronV2, { color: disabled ? styles$2.disabledColor.color : styles$2.enabledColor.color }))] }), jsx(Divider, { dividerWidth: 1, dividerLength: 0, orientation: 'vertical', styleConfig: { root: [styles$2.divider] } })] }));
 };
 
 const styles$1 = makeStyles((theme) => {
     return {
         fieldConfig: {
             flex: 1,
+            minWidth: 0,
             paddingTop: 0,
             paddingBottom: 0,
             paddingVertical: 0,
-            lineHeight: 18,
-            paddingLeft: theme.spacing[4],
+            paddingLeft: 0,
+            lineHeight: theme.typography.lineHeight[24],
         },
     };
 });
 const PhoneField = forwardRef((_a, forwardedRef) => {
-    var _b;
     var { flagIcon, countryCode, showDropdownIcon, onDropdownClick, disabled, max, onChange, styleConfig } = _a, rest = __rest(_a, ["flagIcon", "countryCode", "showDropdownIcon", "onDropdownClick", "disabled", "max", "onChange", "styleConfig"]);
-    const [prefixWidth, setPrefixWidth] = useState(0);
     const handleChange = (event) => {
         const value = event.target.value;
         const isValidValue = value ? new RegExp(ONLY_NUMERIC).test(value) : true;
@@ -781,19 +778,7 @@ const PhoneField = forwardRef((_a, forwardedRef) => {
             onChange === null || onChange === void 0 ? void 0 : onChange(event);
         }
     };
-    const customPlaceHolderStyling = useStyles(() => {
-        return {
-            placeholderStyles: {
-                marginLeft: prefixWidth,
-            },
-        };
-    }, [prefixWidth]);
-    return (jsx(Field, Object.assign({}, rest, { type: FieldType.PHONE, ref: forwardedRef, disabled: disabled, onChange: handleChange, prefix: jsx("div", { ref: (ref) => { var _a; return setPrefixWidth((_a = ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().width) !== null && _a !== void 0 ? _a : 0); }, children: jsx(PhoneFieldPrefix, { flagIcon: flagIcon, countryCode: countryCode, showDropdownIcon: showDropdownIcon, onDropdownClick: onDropdownClick, disabled: disabled }) }), inputMode: 'numeric', styleConfig: Object.assign({ field: [styles$1.fieldConfig, ...((styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.field) || [])], placeholder: {
-                placeholderLabel: [
-                    customPlaceHolderStyling.placeholderStyles,
-                    ...(((_b = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.placeholder) === null || _b === void 0 ? void 0 : _b.placeholderLabel) || []),
-                ],
-            } }, styleConfig) })));
+    return (jsx(Field, Object.assign({}, rest, { type: FieldType.PHONE, ref: forwardedRef, disabled: disabled, onChange: handleChange, prefix: jsx("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', height: '100%', flexShrink: 0 }, children: jsx(PhoneFieldPrefix, { flagIcon: flagIcon, countryCode: countryCode, showDropdownIcon: showDropdownIcon, onDropdownClick: onDropdownClick, disabled: disabled }) }), inputMode: 'numeric', styleConfig: Object.assign({ field: [styles$1.fieldConfig, ...((styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.field) || [])] }, styleConfig) })));
 });
 PhoneField.displayName = 'PhoneField';