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

package/dist/style.d.ts

@@ -18,10 +18,6 @@ export declare const getFieldContainerBorderStyle: ({ theme, hasError, focus, di
     borderStyle: string;
     borderColor: string;
     borderWidth: 1.5;
-} | {
-    borderStyle: string;
-    borderColor: string;
-    borderWidth: 1;
 };
 export declare const getFieldSpacingAndHeight: ({ isLabeledPlaceholder, theme, variant, focus, value, disabledPlaceHolder, customSpacingTop, }: Omit<IFieldContainerStylesParams, "hasError">) => {
     height: 40;
@@ -40,12 +36,6 @@ export declare const getFieldContainerStyles: ({ hasError, theme, focus, disable
     borderStyle: string;
     borderColor: string;
     borderWidth: 1.5;
-} | {
-    backgroundColor: string;
-    height: 40 | 56;
-    borderStyle: string;
-    borderColor: string;
-    borderWidth: 1;
 };
 export declare const getFieldPlaceholderStyles: ({ isFocused, variant, fieldType, }: {
     theme: Theme;

package/dist/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../packages/components/Field/src/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAqB,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAC3F,UAAU,2BAA2B;IACnC,OAAO,EAAE,GAAG,YAAY,EAAE,CAAC;IAC3B,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,eAAO,MAAM,4BAA4B,GAAI,uCAK1C,IAAI,CAAC,2BAA2B,EAAE,SAAS,GAAG,OAAO,CAAC;;;;;;;;CAUxD,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,gGAQtC,IAAI,CAAC,2BAA2B,EAAE,UAAU,CAAC;;;;;;;;;;CAyC/C,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,yEAQrC,2BAA2B;;;;;;;;;;;;CAuB7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,oCAIvC;IACD,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,GAAG,YAAY,EAAE,CAAC;IAC3B,SAAS,EAAE,GAAG,SAAS,EAAE,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;;;;;;;;;;;CAaA,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,iHAU5B;IACD,oBAAoB,EAAE,OAAO,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,GAAG,YAAY,EAAE,CAAC;IAC3B,IAAI,EAAE,GAAG,SAAS,EAAE,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;;;;;;;;;;;;;;CAkBA,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,OAAO,KAAK,EAAE,SAAS,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuKhF,CAAC"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../packages/components/Field/src/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAqB,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAC3F,UAAU,2BAA2B;IACnC,OAAO,EAAE,GAAG,YAAY,EAAE,CAAC;IAC3B,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,eAAO,MAAM,4BAA4B,GAAI,uCAK1C,IAAI,CAAC,2BAA2B,EAAE,SAAS,GAAG,OAAO,CAAC;;;;CAYxD,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,gGAQtC,IAAI,CAAC,2BAA2B,EAAE,UAAU,CAAC;;;;;;;;;;CAyC/C,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,yEAQrC,2BAA2B;;;;;;CAuB7B,CAAC;AAGF,eAAO,MAAM,yBAAyB,GAAI,oCAIvC;IACD,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,GAAG,YAAY,EAAE,CAAC;IAC3B,SAAS,EAAE,GAAG,SAAS,EAAE,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;;;;;;;;;;;CAcA,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,iHAU5B;IACD,oBAAoB,EAAE,OAAO,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,GAAG,YAAY,EAAE,CAAC;IAC3B,IAAI,EAAE,GAAG,SAAS,EAAE,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;;;;;;;;;;;;;;CAkBA,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,OAAO,KAAK,EAAE,SAAS,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuKhF,CAAC"}

package/dist/variants/Phone/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/components/Field/src/variants/Phone/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,SAAS,EAAE,MAAM,YAAY,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAmBrC,QAAA,MAAM,UAAU,mGAqDf,CAAC;AAGF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/components/Field/src/variants/Phone/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,SAAS,EAAE,MAAM,YAAY,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAoBrC,QAAA,MAAM,UAAU,mGAuCf,CAAC;AAGF,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleartrip/ct-design-field",
-  "version": "5.6.0",
+  "version": "5.7.0-SNAPSHOT-native-main.2",
   "description": "Field Component",
   "types": "dist/index.d.ts",
   "main": "./dist/ct-design-field.cjs.js",
@@ -26,23 +26,23 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@cleartrip/ct-design-theme": "5.6.0",
-    "@cleartrip/ct-design-typography": "5.6.0",
-    "@cleartrip/ct-design-container": "5.6.0",
-    "@cleartrip/ct-design-box": "5.6.0",
-    "@cleartrip/ct-design-types": "5.6.0",
-    "@cleartrip/ct-design-outside-click-handler": "5.6.0",
-    "@cleartrip/ct-design-common-utils": "5.6.0",
-    "@cleartrip/ct-design-dotted-loader": "5.6.0",
-    "@cleartrip/ct-design-common-constants": "5.6.0",
-    "@cleartrip/ct-design-card": "5.6.0",
-    "@cleartrip/ct-design-divider": "5.6.0",
-    "@cleartrip/ct-design-style-manager": "5.6.0",
-    "@cleartrip/ct-design-use-merge-refs": "5.6.0"
+    "@cleartrip/ct-design-theme": "5.7.0-SNAPSHOT-native-main.2",
+    "@cleartrip/ct-design-typography": "5.7.0-SNAPSHOT-native-main.2",
+    "@cleartrip/ct-design-container": "5.7.0-SNAPSHOT-native-main.2",
+    "@cleartrip/ct-design-types": "5.7.0-SNAPSHOT-native-main.2",
+    "@cleartrip/ct-design-box": "5.7.0-SNAPSHOT-native-main.2",
+    "@cleartrip/ct-design-outside-click-handler": "5.7.0-SNAPSHOT-native-main.2",
+    "@cleartrip/ct-design-common-utils": "5.7.0-SNAPSHOT-native-main.2",
+    "@cleartrip/ct-design-common-constants": "5.7.0-SNAPSHOT-native-main.1",
+    "@cleartrip/ct-design-divider": "5.7.0-SNAPSHOT-native-main.2",
+    "@cleartrip/ct-design-card": "5.7.0-SNAPSHOT-native-main.2",
+    "@cleartrip/ct-design-dotted-loader": "5.7.0-SNAPSHOT-native-main.2",
+    "@cleartrip/ct-design-style-manager": "5.7.0-SNAPSHOT-native-main.2",
+    "@cleartrip/ct-design-use-merge-refs": "5.7.0-SNAPSHOT-native-main.2"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.12.0",
-    "@cleartrip/ct-design-icons": "40.0.0"
+    "@cleartrip/ct-design-icons": "41.0.0-SNAPSHOT-native-main.2"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/src/Field.native.tsx

@@ -0,0 +1,204 @@
+import { cloneElement, forwardRef, isValidElement, useState } from 'react';
+import { IFieldProps, IFieldRef } from './type';
+import { Box } from '@cleartrip/ct-design-box';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+import { Container } from '@cleartrip/ct-design-container';
+import { Typography } from '@cleartrip/ct-design-typography';
+import InputFieldCore from './Input';
+import FieldLabelWrapper from './Label';
+import { getFieldContainerStyles } from './style';
+import TextArea from './TextAreaInput';
+
+const staticStyles = makeStyles((theme) => {
+  return {
+    fieldWrapper: {
+      flex: 1,
+      flexShrink: 1,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'relative',
+      height: '100%',
+    },
+    promptBox: {
+      paddingLeft: theme.spacing[4],
+      paddingRight: theme.spacing[4],
+      display: 'flex',
+      alignItems: 'center',
+    },
+    promptIcon: {
+      height: theme.size[4],
+      width: theme.size[4],
+      paddingRight: theme.spacing[1],
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    flexNoShrink: {
+      flexShrink: 0,
+    },
+    fieldContainer: {
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'row',
+      borderStyle: theme?.border.style.solid,
+      borderRadius: theme?.border.radius[8],
+      boxSizing: 'border-box',
+    },
+  };
+});
+
+const Field = forwardRef<IFieldRef, IFieldProps & { numberOfLines?: number }>(
+  (
+    {
+      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<boolean>(autoFocus);
+    const _isFocused = focus || value.length > 0;
+
+    const { promptStyles } = styleConfig || {};
+    const { Icon: promptIcon, message: promptMessage, hasError = false } = prompt || {};
+    const fieldContainerStyles = useStyles(
+      (theme) => ({
+        root: getFieldContainerStyles({
+          variant: variant ?? 'md',
+          theme,
+          hasError,
+          focus,
+          value,
+          disabled,
+        }),
+      }),
+      [variant, hasError, focus, value, disabled, styleConfig],
+    );
+
+    const InputField = numberOfLines && numberOfLines > 1 ? TextArea : InputFieldCore;
+
+    return (
+      <Box boxSize='micro' styleConfig={styleConfig}>
+        <Container
+          styleConfig={{
+            root: [fieldContainerStyles.root, staticStyles.fieldContainer, ...(styleConfig.fieldContainer || [])],
+          }}
+        >
+          {isValidElement(prefix) && (
+            <Container styleConfig={{ root: [staticStyles.flexNoShrink] }}>{cloneElement(prefix, { focus })}</Container>
+          )}
+          <Container styleConfig={{ root: [staticStyles.fieldWrapper, ...(styleConfig.field || [])] }}>
+            <FieldLabelWrapper
+              id={id}
+              variant={variant}
+              type={type}
+              value={value}
+              focus={_isFocused}
+              placeholder={placeholder}
+              placeholderType={placeholderType}
+              disabled={disabled}
+              styleConfig={styleConfig}
+              prefix={prefix}
+            />
+            <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?.(e);
+              }}
+              onBlur={(e) => {
+                setFocus(false);
+                onBlur?.(e);
+              }}
+              onKeyDown={onKeyDown}
+              maxLength={maxLength}
+              numberOfLines={numberOfLines}
+              showSoftInputOnFocus={showSoftInputOnFocus}
+              customSpacingTop={customSpacingTop}
+            />
+          </Container>
+          {isValidElement(suffix) && (
+            <Container styleConfig={{ root: [staticStyles.flexNoShrink] }}>{cloneElement(suffix, { focus })}</Container>
+          )}
+        </Container>
+        {(promptIcon || promptMessage) && (
+          <Box
+            boxSize='pico'
+            horizontal={true}
+            styleConfig={{
+              root: [staticStyles.promptBox, ...(promptStyles?.promptBox || [])],
+            }}
+          >
+            {promptIcon && (
+              <Container
+                styleConfig={{ root: [staticStyles.promptIcon, ...(promptStyles?.promptIconContainer || [])] }}
+              >
+                {promptIcon}
+              </Container>
+            )}
+            {promptMessage && (
+              <Typography
+                variant='B3'
+                color={hasError ? 'warning' : 'success'}
+                styleConfig={promptStyles?.promptMessageTypography}
+              >
+                {promptMessage}
+              </Typography>
+            )}
+          </Box>
+        )}
+      </Box>
+    );
+  },
+);
+
+Field.displayName = 'Field';
+
+export default Field;

package/src/Field.tsx

@@ -15,10 +15,11 @@ const staticStyles = 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],
@@ -34,7 +35,18 @@ const staticStyles = 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: {
@@ -81,6 +93,7 @@ const Field = forwardRef<IFieldRef, IFieldProps & { numberOfLines?: number }>(
       numberOfLines,
       showSoftInputOnFocus,
       customSpacingTop,
+      cursorColor,
     },
     ref,
   ) => {
@@ -113,7 +126,7 @@ const Field = forwardRef<IFieldRef, IFieldProps & { numberOfLines?: number }>(
           }}
         >
           {isValidElement(prefix) && (
-            <Container styleConfig={{ root: [staticStyles.flexNoShrink] }}>{cloneElement(prefix, { focus })}</Container>
+            <Container styleConfig={{ root: [staticStyles.prefixSlot] }}>{cloneElement(prefix, { focus })}</Container>
           )}
           <Container styleConfig={{ root: [staticStyles.fieldWrapper, ...(styleConfig.field || [])] }}>
             <FieldLabelWrapper
@@ -143,6 +156,8 @@ const Field = forwardRef<IFieldRef, IFieldProps & { numberOfLines?: number }>(
               fieldTypographyVariant={fieldTypographyVariant}
               styleConfig={styleConfig}
               focus={_isFocused}
+              prefix={prefix}
+              cursorColor={cursorColor}
               onChange={onChange}
               onSelect={onSelect}
               onPressIn={onPressIn}
@@ -162,7 +177,7 @@ const Field = forwardRef<IFieldRef, IFieldProps & { numberOfLines?: number }>(
             />
           </Container>
           {isValidElement(suffix) && (
-            <Container styleConfig={{ root: [staticStyles.flexNoShrink] }}>{cloneElement(suffix, { focus })}</Container>
+            <Container styleConfig={{ root: [staticStyles.suffixSlot] }}>{cloneElement(suffix, { focus })}</Container>
           )}
         </Container>
         {(promptIcon || promptMessage) && (

package/src/Input.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef, isValidElement, useCallback, useImperativeHandle, us
 import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
 import { css } from '@emotion/css';
 import { useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { useTheme } from '@cleartrip/ct-design-theme';
 import { IFieldRef, IFieldProps } from './type';
 import { getFieldStyles, getTypographyVariant } from './style';
 
@@ -11,18 +12,13 @@ const styles = css`
     outline: none;
   }
 `;
-const staticStyles = 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 staticStyles = makeStyles(() => ({
+  root: {
+    border: 'none',
+    outline: 'none',
+  },
+}));
 
 const InputFieldCore = forwardRef<IFieldRef, IFieldProps & { focus: boolean; numberOfLines?: number }>(
   (
@@ -44,25 +40,21 @@ const InputFieldCore = forwardRef<IFieldRef, IFieldProps & { focus: boolean; num
       autoCapitalize,
       fieldTypographyVariant,
       variant,
-      prefix,
       focus,
       placeholderType,
+      prefix,
+      cursorColor,
       id,
       maxLength,
     },
     forwardedRef,
   ) => {
+    const theme = useTheme();
     const inputRef = useRef<HTMLInputElement>(null);
-    const { field = [] } = styleConfig ?? {};
+    const { field = [], root = [] } = styleConfig ?? {};
     const isPrefixComponent = isValidElement(prefix);
     const disabledPlaceHolder = !placeholder?.length;
-
-    const dynamicStyles = useStyles(
-      (theme) => ({
-        root: getTypographyVariant(theme, fieldTypographyVariant ?? 'HM2'),
-      }),
-      [fieldTypographyVariant],
-    );
+    const inputPlaceholder = placeholderType === 'labeled' && focus ? '' : placeholder;
 
     const fieldStyles = useStyles(
       (theme) => {
@@ -83,9 +75,16 @@ const InputFieldCore = forwardRef<IFieldRef, IFieldProps & { focus: boolean; num
       [disabled, variant, focus, value, type, isPrefixComponent, disabledPlaceHolder],
     );
 
+    const typographyStyles = useStyles(
+      (theme) => ({
+        root: fieldTypographyVariant ? getTypographyVariant(theme, fieldTypographyVariant) : {},
+      }),
+      [fieldTypographyVariant],
+    );
+
     const mergedStyles = useWebMergeStyles(
-      [staticStyles.root, dynamicStyles.root, styles, fieldStyles.root, ...field],
-      [fieldStyles.root, dynamicStyles.root, field],
+      [staticStyles.root, styles, fieldStyles.root, typographyStyles.root, ...root, ...field],
+      [fieldStyles.root, typographyStyles.root, root, field],
     );
 
     useImperativeHandle(
@@ -116,6 +115,7 @@ const InputFieldCore = forwardRef<IFieldRef, IFieldProps & { focus: boolean; num
               inputRef.current?.setSelectionRange(start, end);
             },
           },
+          preventDefault: () => event.preventDefault(),
         });
       },
       [onChange],
@@ -209,21 +209,6 @@ const InputFieldCore = forwardRef<IFieldRef, IFieldProps & { focus: boolean; num
       [onPressIn],
     );
 
-    const webProps = {
-      onChange: handleOnChange,
-      onFocus: handleOnFocus,
-      onBlur: handleOnBlur,
-      onKeyDown: handleOnKeyDown,
-      onSelect: handleOnSelect,
-      onMouseDown: handleOnPressIn,
-      placeholder,
-      autoFocus,
-      readOnly,
-      type,
-      inputMode,
-      autoCapitalize,
-    };
-
     return (
       <input
         maxLength={maxLength}
@@ -231,8 +216,20 @@ const InputFieldCore = forwardRef<IFieldRef, IFieldProps & { focus: boolean; num
         ref={inputRef}
         value={value}
         disabled={disabled}
+        readOnly={readOnly}
         className={mergedStyles}
-        {...webProps}
+        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}
       />
     );
   },

package/src/Label.tsx

@@ -1,27 +1,34 @@
+import { isValidElement } from 'react';
 import { makeStyles, useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
 import { IFieldProps } from './type';
 import { FieldType, FieldVariant } from './constants';
 import { getFieldPlaceholderStyles } from './style';
-import { Container } from '@cleartrip/ct-design-container';
 import { Typography } from '@cleartrip/ct-design-typography';
-import { isValidElement } from 'react';
 
 const staticStyles = makeStyles((theme) => {
   return {
     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,
     },
   };
 });
 
+/** Web label overlay — behavior matches `Label.native.tsx`. */
 const FieldLabelWrapper: React.FC<
-  Omit<IFieldProps, 'onChange' | 'onSelect' | 'onPressIn' | 'onKeyDown' | 'onFocus' | 'onBlur'> & { focus: boolean }
+  Omit<IFieldProps, 'onChange' | 'onSelect' | 'onPressIn' | 'onKeyDown' | 'onFocus' | 'onBlur'> & {
+    focus: boolean;
+  }
 > = ({
   variant,
   type,
@@ -39,6 +46,7 @@ const FieldLabelWrapper: React.FC<
 
   const shiftPlaceholder = placeholderType === 'floating';
   const isPrefixComponent = isValidElement(prefix);
+  const fieldType = type ?? FieldType.TEXT;
 
   const baseStyles = useStyles(
     (theme) => ({
@@ -47,37 +55,46 @@ const FieldLabelWrapper: React.FC<
         isFocused: focus,
         disabled,
         variant: variant ?? 'md',
-        fieldType: type ?? 'text',
+        fieldType,
         isPrefixComponent,
         shiftPlaceholder,
       }),
     }),
     [focus, disabled, variant, type, isPrefixComponent, shiftPlaceholder],
   );
-
   const labelStyles = useWebMergeStyles(
-    [baseStyles.root, staticStyles.root, ...placeholderLabel],
-    [baseStyles.root, placeholderLabel],
+    [
+      staticStyles.root,
+      variant === FieldVariant.SM ? staticStyles.rootSM : undefined,
+      baseStyles.root,
+      ...placeholderLabel,
+    ],
+    [variant, baseStyles.root, placeholderLabel],
   );
 
   if (placeholderType === 'default' || !focus) {
     return null;
   }
+
   if (variant === FieldVariant.SM) {
-    if (value.length) return null;
+    if (value.length) {
+      return null;
+    }
 
     return (
-      <Container styleConfig={{ root: [baseStyles.root, staticStyles.root, ...placeholderLabel] }}>
+      <label className={labelStyles} htmlFor={id}>
         <Typography variant='B2' color='tertiary' styleConfig={placeholderTypography}>
           {placeholder}
         </Typography>
-      </Container>
+      </label>
     );
   }
 
-  if (type === FieldType.PHONE && value.length) return null;
+  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 (
     <label className={labelStyles} htmlFor={id}>