@cleartrip/ct-design-field 4.0.0-TEST.3 → 5.0.0

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

@@ -1,38 +1,23 @@
 'use strict';
 
-var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var ctDesignTheme = require('@cleartrip/ct-design-theme');
-var ctDesignTypography = require('@cleartrip/ct-design-typography');
 var ctDesignBox = require('@cleartrip/ct-design-box');
+var ctDesignStyleManager = require('@cleartrip/ct-design-style-manager');
 var ctDesignContainer = require('@cleartrip/ct-design-container');
-var styled = require('styled-components');
+var ctDesignTypography = require('@cleartrip/ct-design-typography');
+var css = require('@emotion/css');
+var tslib = require('tslib');
+var ctDesignDivider = require('@cleartrip/ct-design-divider');
 var ctDesignCommonConstants = require('@cleartrip/ct-design-common-constants');
+var ctDesignTheme = require('@cleartrip/ct-design-theme');
 var ctDesignCommonUtils = require('@cleartrip/ct-design-common-utils');
-var ctDesignDivider = require('@cleartrip/ct-design-divider');
-var ctDesignIcons = require('@cleartrip/ct-design-icons');
+var useMergeRefs = require('@cleartrip/ct-design-use-merge-refs');
 var ctDesignDottedLoader = require('@cleartrip/ct-design-dotted-loader');
-var ctDesignCard = require('@cleartrip/ct-design-card');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefault(styled);
-
-var StyledFieldContainer = styled__default.default.div(function (_a) {
-    var borderColor = _a.borderColor, borderWidth = _a.borderWidth, theme = _a.theme, backgroundColor = _a.backgroundColor, cursor = _a.cursor, css = _a.css;
-    return (tslib.__assign({ borderColor: borderColor, borderWidth: borderWidth, borderStyle: theme.border.style.solid, borderRadius: theme.border.radius[8], backgroundColor: backgroundColor, cursor: "".concat(cursor, " !important"), boxSizing: 'border-box', position: 'relative', display: 'flex', alignItems: 'center' }, css));
-});
-
-var StyledFieldPlaceholder = styled__default.default.label(function (_a) {
-    var position = _a.position, marginLeft = _a.marginLeft, top = _a.top, _b = _a.css, css = _b === void 0 ? {} : _b;
-    return (tslib.__assign({ position: position || 'absolute', display: 'flex', alignItems: 'center', transition: 'position 1s ease-in-out', marginLeft: marginLeft, top: top, pointerEvents: 'none' }, css));
-});
-
-var StyledField = styled__default.default.input(function (_a) {
-    var theme = _a.theme, cursor = _a.cursor, color = _a.color, backgroundColor = _a.backgroundColor, height = _a.height, paddingTop = _a.paddingTop, paddingBottom = _a.paddingBottom, paddingLeft = _a.paddingLeft, marginLeft = _a.marginLeft, paddingRight = _a.paddingRight, _b = _a.css, css = _b === void 0 ? {} : _b;
-    return (tslib.__assign({ width: '100%', border: 'none', outline: 'none', backgroundColor: backgroundColor, cursor: cursor, color: color, height: height, paddingTop: paddingTop, paddingBottom: paddingBottom, paddingRight: paddingRight, paddingLeft: paddingLeft, marginLeft: marginLeft, fontSize: theme.typography.size[16], fontWeight: theme.typography.weight.medium, lineHeight: theme.typography.lineHeight[24] }, css));
-});
+var useMergeRefs__default = /*#__PURE__*/_interopDefault(useMergeRefs);
 
 exports.FieldVariant = void 0;
 (function (FieldVariant) {
@@ -46,449 +31,1071 @@ exports.FieldType = void 0;
     FieldType["PHONE"] = "phone";
 })(exports.FieldType || (exports.FieldType = {}));
 
-var getFieldContainerBorderStyle = function (_a) {
-    var theme = _a.theme, hasError = _a.hasError, focus = _a.focus, disabled = _a.disabled;
+const getFieldContainerBorderStyle = ({ theme, hasError, focus, disabled, }) => {
     if (hasError) {
-        return {
-            borderColor: theme.color.border.warning,
-            borderWidth: theme.border.width.md,
-        };
+        return { borderStyle: 'solid', borderColor: theme.color.border.warning, borderWidth: theme.border.width.md };
     }
     if (focus && !disabled) {
-        return {
-            borderColor: theme.color.border.primary,
-            borderWidth: theme.border.width.md,
-        };
+        return { borderStyle: 'solid', borderColor: theme.color.border.primary, borderWidth: theme.border.width.md };
     }
-    return {
-        borderColor: theme.color.border.disabledDark,
-        borderWidth: theme.border.width.sm,
-    };
+    return { borderStyle: 'solid', borderColor: theme.color.border.disabledDark, borderWidth: theme.border.width.sm };
 };
-var getFieldSpacingAndHeight = function (_a) {
-    var _b, _c;
-    var theme = _a.theme, variant = _a.variant, focus = _a.focus, value = _a.value, isPrefixComponent = _a.isPrefixComponent, disabledPlaceHolder = _a.disabledPlaceHolder;
-    var isFieldNotEmpty = focus || value.length > 0;
-    var valueWithPlaceholder = isFieldNotEmpty && !disabledPlaceHolder;
-    var leftMargin = isPrefixComponent ? (_b = theme === null || theme === void 0 ? void 0 : theme.spacing) === null || _b === void 0 ? void 0 : _b[13] : (_c = theme === null || theme === void 0 ? void 0 : theme.spacing) === null || _c === void 0 ? void 0 : _c[4];
-    var commonStyles = {
-        paddingLeft: leftMargin,
+const getFieldSpacingAndHeight = ({ isLabeledPlaceholder, theme, variant, focus, value, disabledPlaceHolder, customSpacingTop = 4, }) => {
+    const isFieldNotEmpty = focus || value.length > 0;
+    const valueWithPlaceholder = isFieldNotEmpty && !disabledPlaceHolder;
+    const commonStyles = {
         paddingRight: theme.spacing[4],
+        paddingLeft: theme.spacing[4],
     };
     switch (variant) {
         case exports.FieldVariant.SM: {
-            return tslib.__assign(tslib.__assign({}, commonStyles), { height: theme.size[10] });
+            return Object.assign(Object.assign({}, commonStyles), { height: theme.size[10] });
         }
         case exports.FieldVariant.MD: {
-            return tslib.__assign(tslib.__assign({}, commonStyles), { height: theme.size[14], paddingTop: valueWithPlaceholder ? theme.spacing[6] : theme.spacing[4], paddingBottom: valueWithPlaceholder ? theme.spacing[2] : theme.spacing[4] });
+            return Object.assign(Object.assign({}, commonStyles), { height: theme.size[14], paddingTop: (isLabeledPlaceholder && focus) || (isLabeledPlaceholder && value.length > 0)
+                    ? 24
+                    : valueWithPlaceholder
+                        ? theme.spacing[customSpacingTop]
+                        : theme.spacing[4], paddingBottom: valueWithPlaceholder ? theme.spacing[2] : theme.spacing[4] });
         }
         default: {
-            return tslib.__assign(tslib.__assign({}, commonStyles), { height: theme.size[14], paddingTop: valueWithPlaceholder ? theme.spacing[6] : theme.spacing[4], paddingBottom: valueWithPlaceholder ? theme.spacing[2] : theme.spacing[4] });
+            return Object.assign(Object.assign({}, commonStyles), { height: theme.size[14], paddingTop: valueWithPlaceholder ? theme.spacing[6] : theme.spacing[4], paddingBottom: valueWithPlaceholder ? theme.spacing[2] : theme.spacing[4] });
         }
     }
 };
-var getFieldContainerStyles = function (_a) {
-    var hasError = _a.hasError, theme = _a.theme, focus = _a.focus, disabled = _a.disabled;
-    var fieldContainerBorderStyle = getFieldContainerBorderStyle({
-        theme: theme,
-        hasError: hasError,
-        focus: focus,
-        disabled: disabled,
+const getFieldContainerStyles = ({ hasError, theme, focus, disabled, variant, value, customSpacingTop, }) => {
+    const fieldContainerBorderStyle = getFieldContainerBorderStyle({
+        theme,
+        hasError,
+        focus,
+        disabled,
+    });
+    const { height } = getFieldSpacingAndHeight({
+        theme,
+        variant,
+        focus,
+        value,
+        customSpacingTop,
     });
-    return tslib.__assign(tslib.__assign({}, fieldContainerBorderStyle), { backgroundColor: disabled ? theme.color.background.disabled : theme.color.background.neutral, cursor: disabled ? 'not-allowed' : 'auto' });
+    return Object.assign(Object.assign({}, fieldContainerBorderStyle), { backgroundColor: disabled ? theme.color.background.disabled : theme.color.background.neutral, height });
 };
-var getFieldPlaceholderStyles = function (_a) {
-    var _b, _c;
-    var theme = _a.theme, isFocused = _a.isFocused; _a.disabled; var variant = _a.variant, fieldType = _a.fieldType, _d = _a.isPrefixComponent, isPrefixComponent = _d === void 0 ? false : _d;
-    var leftMargin = isPrefixComponent ? (_b = theme === null || theme === void 0 ? void 0 : theme.spacing) === null || _b === void 0 ? void 0 : _b[13] : (_c = theme === null || theme === void 0 ? void 0 : theme.spacing) === null || _c === void 0 ? void 0 : _c[4];
-    var fieldPlaceholderStyles = {
-        position: 'absolute',
-        marginLeft: leftMargin,
-    };
-    if (variant === exports.FieldVariant.SM || fieldType === exports.FieldType.PHONE) {
-        return fieldPlaceholderStyles;
+const getFieldPlaceholderStyles = ({ isFocused, variant, fieldType, }) => {
+    if (variant === exports.FieldVariant.SM) {
+        return { top: 8 };
+    }
+    if (fieldType === exports.FieldType.PHONE) {
+        return {};
     }
     if (isFocused) {
-        fieldPlaceholderStyles = tslib.__assign(tslib.__assign({}, fieldPlaceholderStyles), { top: theme === null || theme === void 0 ? void 0 : theme.spacing[2] });
+        return { transform: [{ translateY: -12 }] };
     }
-    return fieldPlaceholderStyles;
+    return {};
 };
-var getFieldStyles = function (_a) {
-    var disabled = _a.disabled, theme = _a.theme, variant = _a.variant, focus = _a.focus, value = _a.value, type = _a.type, _b = _a.isPrefixComponent, isPrefixComponent = _b === void 0 ? false : _b, disabledPlaceHolder = _a.disabledPlaceHolder;
-    var fieldSpacingAndHeight = getFieldSpacingAndHeight({
-        theme: theme,
-        variant: variant,
-        focus: focus,
-        value: value,
-        type: type,
-        isPrefixComponent: isPrefixComponent,
-        disabledPlaceHolder: disabledPlaceHolder,
+const getFieldStyles = ({ isLabeledPlaceholder, disabled, theme, variant, focus, value, type, isPrefixComponent = false, disabledPlaceHolder, }) => {
+    const fieldSpacingAndHeight = getFieldSpacingAndHeight({
+        isLabeledPlaceholder,
+        theme,
+        variant,
+        focus,
+        value,
+        type,
+        isPrefixComponent,
+        disabledPlaceHolder,
+        customSpacingTop: 2,
     });
-    return tslib.__assign(tslib.__assign({}, fieldSpacingAndHeight), { cursor: disabled ? 'not-allowed' : 'auto', color: disabled ? theme.color.text.disabled : theme.color.text.primary, backgroundColor: disabled ? theme.color.background.disabled : 'transparent' });
+    return Object.assign(Object.assign({}, fieldSpacingAndHeight), { backgroundColor: 'transparent', color: disabled ? theme.color.text.disabled : theme.color.text.primary });
 };
-
-var Field = react.forwardRef(function (_a, forwardedRef) {
-    var _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? '' : _c, onChange = _a.onChange, prefix = _a.prefix, suffix = _a.suffix, _d = _a.variant, variant = _d === void 0 ? exports.FieldVariant.MD : _d, _e = _a.type, type = _e === void 0 ? exports.FieldType.TEXT : _e, prompt = _a.prompt, _f = _a.disabled, disabled = _f === void 0 ? false : _f; _a.prefixGap; _a.suffixGap; var css = _a.css, id = _a.id, autoFocus = _a.autoFocus, rootCss = _a.rootCss, _g = _a.styleConfig, styleConfig = _g === void 0 ? {} : _g, onFocus = _a.onFocus, onBlur = _a.onBlur, rest = tslib.__rest(_a, ["value", "placeholder", "onChange", "prefix", "suffix", "variant", "type", "prompt", "disabled", "prefixGap", "suffixGap", "css", "id", "autoFocus", "rootCss", "styleConfig", "onFocus", "onBlur"]);
-    var theme = ctDesignTheme.useTheme();
-    var rootBox = styleConfig.rootBox, fieldContainer = styleConfig.fieldContainer, placeholderLabel = styleConfig.placeholderLabel, placeholderTypography = styleConfig.placeholderTypography, field = styleConfig.field, promptBox = styleConfig.promptBox, promptIconContainer = styleConfig.promptIconContainer, promptMessageTypography = styleConfig.promptMessageTypography;
-    var _h = react.useState(autoFocus || false), focus = _h[0], setFocus = _h[1];
-    var _j = prompt || {}, _k = _j.hasError, hasError = _k === void 0 ? false : _k, promptIcon = _j.Icon, promptMessage = _j.message;
-    var isFocused = focus || value.length > 0;
-    var isPrefixComponent = react.isValidElement(prefix);
-    var disabledPlaceHolder = !(placeholder === null || placeholder === void 0 ? void 0 : placeholder.length);
-    var fieldContainerStyles = getFieldContainerStyles({
-        variant: variant,
-        theme: theme,
-        hasError: hasError,
-        focus: focus,
-        value: value,
-        disabled: disabled,
-    });
-    var fieldPlaceholderStyles = getFieldPlaceholderStyles({
-        isFocused: isFocused,
-        theme: theme,
-        disabled: disabled,
-        variant: variant,
-        fieldType: type,
-        isPrefixComponent: isPrefixComponent,
-    });
-    var fieldStyles = getFieldStyles({
-        disabled: disabled,
-        theme: theme,
-        variant: variant,
-        focus: focus,
-        value: value,
-        type: type,
-        isPrefixComponent: isPrefixComponent,
-        disabledPlaceHolder: disabledPlaceHolder,
-    });
-    var onFieldChange = function (e) {
-        var value = e.target.value;
-        var isValidValue = true;
-        switch (type) {
-            case exports.FieldType.NUMBER: {
-                if (value && !ctDesignCommonConstants.ONLY_NUMERIC.test(value)) {
-                    isValidValue = false;
-                }
-                break;
-            }
+const getTypographyVariant = (theme, variant) => {
+    switch (variant) {
+        case ctDesignTypography.TypographyVariant.HD1: {
+            return {
+                fontSize: theme.typography.size[48],
+                fontWeight: theme.typography.weight.semibold,
+                lineHeight: theme.typography.lineHeight[56],
+            };
+        }
+        case ctDesignTypography.TypographyVariant.HD2: {
+            return {
+                fontSize: theme.typography.size[40],
+                fontWeight: theme.typography.weight.semibold,
+                lineHeight: theme.typography.lineHeight[48],
+            };
+        }
+        case ctDesignTypography.TypographyVariant.HD3: {
+            return {
+                fontSize: theme.typography.size[32],
+                fontWeight: theme.typography.weight.semibold,
+                lineHeight: theme.typography.lineHeight[40],
+            };
+        }
+        case ctDesignTypography.TypographyVariant.HM1: {
+            return {
+                fontSize: theme.typography.size[24],
+                fontWeight: theme.typography.weight.semibold,
+                lineHeight: theme.typography.lineHeight[32],
+            };
+        }
+        case ctDesignTypography.TypographyVariant.HM2: {
+            return {
+                fontSize: theme.typography.size[20],
+                fontWeight: theme.typography.weight.semibold,
+                lineHeight: theme.typography.lineHeight[28],
+            };
+        }
+        case ctDesignTypography.TypographyVariant.HM3: {
+            return {
+                fontSize: theme.typography.size[16],
+                fontWeight: theme.typography.weight.semibold,
+                lineHeight: theme.typography.lineHeight[24],
+            };
+        }
+        case ctDesignTypography.TypographyVariant.HM4: {
+            return {
+                fontSize: theme.typography.size[14],
+                fontWeight: theme.typography.weight.semibold,
+                lineHeight: theme.typography.lineHeight[20],
+            };
+        }
+        case ctDesignTypography.TypographyVariant.B1: {
+            return {
+                fontSize: theme.typography.size[16],
+                fontWeight: theme.typography.weight.medium,
+                lineHeight: theme.typography.lineHeight[24],
+            };
+        }
+        case ctDesignTypography.TypographyVariant.B2: {
+            return {
+                fontSize: theme.typography.size[14],
+                fontWeight: theme.typography.weight.medium,
+                lineHeight: theme.typography.lineHeight[20],
+            };
+        }
+        case ctDesignTypography.TypographyVariant.B3: {
+            return {
+                fontSize: theme.typography.size[12],
+                fontWeight: theme.typography.weight.medium,
+                lineHeight: theme.typography.lineHeight[16],
+            };
+        }
+        case ctDesignTypography.TypographyVariant.B3CAPS: {
+            return {
+                fontSize: theme.typography.size[12],
+                fontWeight: theme.typography.weight.semibold,
+                lineHeight: theme.typography.lineHeight[16],
+                letterSpacing: theme.typography.letterSpacing.point4,
+            };
+        }
+        case ctDesignTypography.TypographyVariant.B4: {
+            return {
+                fontSize: theme.typography.size[10],
+                fontWeight: theme.typography.weight.medium,
+                lineHeight: theme.typography.lineHeight[14],
+            };
+        }
+        case ctDesignTypography.TypographyVariant.B4CAPS: {
+            return {
+                fontSize: theme.typography.size[10],
+                fontWeight: theme.typography.weight.semibold,
+                lineHeight: theme.typography.lineHeight[12],
+                letterSpacing: theme.typography.letterSpacing.point4,
+            };
         }
-        if (isValidValue) {
-            onChange(e);
+        case ctDesignTypography.TypographyVariant.P1: {
+            return {
+                fontSize: theme.typography.size[16],
+                fontWeight: theme.typography.weight.normal,
+                lineHeight: theme.typography.lineHeight[22],
+            };
         }
+        case ctDesignTypography.TypographyVariant.P2: {
+            return {
+                fontSize: theme.typography.size[14],
+                fontWeight: theme.typography.weight.normal,
+                lineHeight: theme.typography.lineHeight[20],
+            };
+        }
+        case ctDesignTypography.TypographyVariant.P3: {
+            return {
+                fontSize: theme.typography.size[12],
+                fontWeight: theme.typography.weight.normal,
+                lineHeight: theme.typography.lineHeight[16],
+            };
+        }
+        case ctDesignTypography.TypographyVariant.P4: {
+            return {
+                fontSize: theme.typography.size[12],
+                fontWeight: theme.typography.weight.normal,
+                lineHeight: theme.typography.lineHeight[16],
+            };
+        }
+        case ctDesignTypography.TypographyVariant.L1: {
+            return {
+                fontSize: theme.typography.size[16],
+                fontWeight: theme.typography.weight.semibold,
+                lineHeight: theme.typography.lineHeight[24],
+            };
+        }
+        case ctDesignTypography.TypographyVariant.L2: {
+            return {
+                fontSize: theme.typography.size[14],
+                fontWeight: theme.typography.weight.semibold,
+                lineHeight: theme.typography.lineHeight[20],
+            };
+        }
+        case ctDesignTypography.TypographyVariant.L3: {
+            return {
+                fontSize: theme.typography.size[12],
+                fontWeight: theme.typography.weight.semibold,
+                lineHeight: theme.typography.lineHeight[16],
+            };
+        }
+        case ctDesignTypography.TypographyVariant.OVERLINE: {
+            return {
+                fontSize: theme.typography.size[12],
+                fontWeight: theme.typography.weight.semibold,
+                lineHeight: theme.typography.lineHeight[16],
+            };
+        }
+        case ctDesignTypography.TypographyVariant.TAG: {
+            return {
+                fontSize: theme.typography.size[10],
+                fontWeight: theme.typography.weight.semibold,
+                lineHeight: theme.typography.lineHeight[12],
+                letterSpacing: theme.typography.letterSpacing.point5,
+            };
+        }
+        default: {
+            return {
+                fontSize: theme.typography.size[20],
+                fontWeight: theme.typography.weight.semibold,
+                lineHeight: theme.typography.lineHeight[28],
+            };
+        }
+    }
+};
+
+const styles$4 = css.css `
+  outline: none;
+  &:focus {
+    outline: none;
+  }
+`;
+const staticStyles$5 = ctDesignStyleManager.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],
+        },
     };
-    var customOnFocus = function (e) {
-        setFocus(true);
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+});
+const InputFieldCore$1 = react.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 inputRef = react.useRef(null);
+    const { field = [] } = styleConfig !== null && styleConfig !== void 0 ? styleConfig : {};
+    const isPrefixComponent = react.isValidElement(prefix);
+    const disabledPlaceHolder = !(placeholder === null || placeholder === void 0 ? void 0 : placeholder.length);
+    const dynamicStyles = ctDesignStyleManager.useStyles((theme) => ({
+        root: getTypographyVariant(theme, fieldTypographyVariant !== null && fieldTypographyVariant !== void 0 ? fieldTypographyVariant : 'HM2'),
+    }), [fieldTypographyVariant]);
+    const fieldStyles = ctDesignStyleManager.useStyles((theme) => {
+        return {
+            root: getFieldStyles({
+                isLabeledPlaceholder: placeholderType === 'labeled',
+                disabled: disabled !== null && disabled !== void 0 ? disabled : false,
+                theme,
+                variant: variant !== null && variant !== void 0 ? variant : 'md',
+                focus,
+                value,
+                type: type !== null && type !== void 0 ? type : 'text',
+                isPrefixComponent,
+                disabledPlaceHolder,
+            }),
+        };
+    }, [disabled, variant, focus, value, type, isPrefixComponent, disabledPlaceHolder]);
+    const mergedStyles = ctDesignStyleManager.useWebMergeStyles([staticStyles$5.root, dynamicStyles.root, styles$4, fieldStyles.root, ...field], [fieldStyles.root, dynamicStyles.root, field]);
+    react.useImperativeHandle(forwardedRef, () => ({
+        focus: () => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        },
+        blur: () => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        },
+        setSelection: (start, end) => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+        },
+    }), []);
+    const handleOnChange = react.useCallback((event) => {
+        const inputValue = event.target.value;
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+            target: { value: inputValue, selectionStart: event.target.selectionStart || 0 },
+            currentTarget: {
+                focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                setSelection: (start, end) => {
+                    var _a;
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                },
+            },
+        });
+    }, [onChange]);
+    const handleOnFocus = react.useCallback((event) => {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus({
+            target: { value: event.target.value },
+            currentTarget: {
+                focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                setSelection: (start, end) => {
+                    var _a;
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                },
+            },
+            preventDefault: () => event.preventDefault(),
+        });
+    }, [onFocus]);
+    const handleOnBlur = react.useCallback((event) => {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur({
+            target: { value: event.target.value },
+            currentTarget: {
+                focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                setSelection: (start, end) => {
+                    var _a;
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                },
+            },
+            preventDefault: () => event.preventDefault(),
+        });
+    }, [onBlur]);
+    const handleOnKeyDown = react.useCallback((event) => {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown({
+            target: { value: event.target.value, key: event.key },
+            currentTarget: {
+                focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                setSelection: (start, end) => {
+                    var _a;
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                },
+            },
+            preventDefault: () => event.preventDefault(),
+        });
+    }, [onKeyDown]);
+    const handleOnSelect = react.useCallback((event) => {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect({
+            target: {
+                value: event.target.value,
+                selectionStart: event.target.selectionStart || 0,
+            },
+            currentTarget: {
+                focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                setSelection: (start, end) => {
+                    var _a;
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                },
+            },
+            preventDefault: () => event.preventDefault(),
+        });
+    }, [onSelect]);
+    const handleOnPressIn = react.useCallback((event) => {
+        var _a;
+        onPressIn === null || onPressIn === void 0 ? void 0 : onPressIn({
+            target: { value: ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) || '' },
+            currentTarget: {
+                focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                setSelection: (start, end) => {
+                    var _a;
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                },
+            },
+            preventDefault: () => event.preventDefault(),
+        });
+    }, [onPressIn]);
+    const webProps = {
+        onChange: handleOnChange,
+        onFocus: handleOnFocus,
+        onBlur: handleOnBlur,
+        onKeyDown: handleOnKeyDown,
+        onSelect: handleOnSelect,
+        onMouseDown: handleOnPressIn,
+        placeholder,
+        autoFocus,
+        readOnly,
+        type,
+        inputMode,
+        autoCapitalize,
     };
-    var customOnBlur = function (e) {
-        setFocus(false);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    return (jsxRuntime.jsx("input", Object.assign({ maxLength: maxLength, id: id, ref: inputRef, value: value, disabled: disabled, className: mergedStyles }, webProps)));
+});
+InputFieldCore$1.displayName = 'InputFieldCore';
+
+const staticStyles$4 = ctDesignStyleManager.makeStyles((theme) => {
+    return {
+        root: {
+            position: 'absolute',
+            paddingLeft: theme.spacing[4],
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            transform: [{ translateY: 0 }],
+            top: 16,
+        },
     };
-    var getFieldPlaceholder = function () {
-        switch (variant) {
-            case exports.FieldVariant.SM: {
-                if (!value.length) {
-                    return (jsxRuntime.jsx(StyledFieldPlaceholder, tslib.__assign({}, fieldPlaceholderStyles, { htmlFor: id, className: placeholderLabel === null || placeholderLabel === void 0 ? void 0 : placeholderLabel.className, css: placeholderLabel === null || placeholderLabel === void 0 ? void 0 : placeholderLabel.css }, { children: jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'B1', color: 'tertiary', styleConfig: placeholderTypography }, { children: placeholder })) })));
-                }
-                break;
+});
+const FieldLabelWrapper = ({ variant, type, value, focus = false, placeholder, placeholderType, disabled = false, styleConfig, prefix, id, }) => {
+    const { placeholder: placeholderStyleConfig } = styleConfig !== null && styleConfig !== void 0 ? styleConfig : {};
+    const { placeholderLabel = [], placeholderTypography = {} } = placeholderStyleConfig !== null && placeholderStyleConfig !== void 0 ? placeholderStyleConfig : {};
+    const shiftPlaceholder = placeholderType === 'floating';
+    const isPrefixComponent = react.isValidElement(prefix);
+    const baseStyles = ctDesignStyleManager.useStyles((theme) => ({
+        root: getFieldPlaceholderStyles({
+            theme,
+            isFocused: focus,
+            disabled,
+            variant: variant !== null && variant !== void 0 ? variant : 'md',
+            fieldType: type !== null && type !== void 0 ? type : 'text',
+            isPrefixComponent,
+            shiftPlaceholder,
+        }),
+    }), [focus, disabled, variant, type, isPrefixComponent, shiftPlaceholder]);
+    const labelStyles = ctDesignStyleManager.useWebMergeStyles([baseStyles.root, staticStyles$4.root, ...placeholderLabel], [baseStyles.root, placeholderLabel]);
+    if (placeholderType === 'default' || !focus) {
+        return null;
+    }
+    if (variant === exports.FieldVariant.SM) {
+        if (value.length)
+            return null;
+        return (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [baseStyles.root, staticStyles$4.root, ...placeholderLabel] }, children: jsxRuntime.jsx(ctDesignTypography.Typography, { variant: 'B2', color: 'tertiary', styleConfig: placeholderTypography, children: placeholder }) }));
+    }
+    if (type === exports.FieldType.PHONE && value.length)
+        return null;
+    const typographyVariant = type === exports.FieldType.PHONE ? 'B1' : focus ? 'B3' : 'B1';
+    return (jsxRuntime.jsx("label", { className: labelStyles, htmlFor: id, children: jsxRuntime.jsx(ctDesignTypography.Typography, { variant: typographyVariant, color: 'tertiary', styleConfig: placeholderTypography, children: placeholder }) }));
+};
+
+const styles$3 = css.css `
+  outline: none;
+  &:focus {
+    outline: none;
+  }
+`;
+const staticStyles$3 = ctDesignStyleManager.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 = react.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 inputRef = react.useRef(null);
+    const { field = [] } = styleConfig !== null && styleConfig !== void 0 ? styleConfig : {};
+    const isPrefixComponent = react.isValidElement(prefix);
+    const disabledPlaceHolder = !(placeholder === null || placeholder === void 0 ? void 0 : placeholder.length);
+    const dynamicStyles = ctDesignStyleManager.useStyles((theme) => ({
+        root: getTypographyVariant(theme, fieldTypographyVariant !== null && fieldTypographyVariant !== void 0 ? fieldTypographyVariant : 'HM2'),
+    }), [fieldTypographyVariant]);
+    const fieldStyles = ctDesignStyleManager.useStyles((theme) => {
+        return {
+            root: getFieldStyles({
+                isLabeledPlaceholder: placeholderType === 'labeled',
+                disabled: disabled !== null && disabled !== void 0 ? disabled : false,
+                theme,
+                variant: variant !== null && variant !== void 0 ? variant : 'md',
+                focus,
+                value,
+                type: type !== null && type !== void 0 ? type : 'text',
+                isPrefixComponent,
+                disabledPlaceHolder,
+            }),
+        };
+    }, [disabled, variant, focus, value, type, isPrefixComponent, disabledPlaceHolder]);
+    const mergedStyles = ctDesignStyleManager.useWebMergeStyles([staticStyles$3.root, dynamicStyles.root, styles$3, fieldStyles.root, ...field], [fieldStyles.root, dynamicStyles.root, field]);
+    react.useImperativeHandle(forwardedRef, () => ({
+        focus: () => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        },
+        blur: () => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        },
+        setSelection: (start, end) => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+        },
+    }), []);
+    const handleOnChange = react.useCallback((event) => {
+        const inputValue = event.target.value;
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+            target: { value: inputValue, selectionStart: event.target.selectionStart || 0 },
+            currentTarget: {
+                focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                setSelection: (start, end) => {
+                    var _a;
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                },
+            },
+        });
+    }, [onChange]);
+    const handleOnFocus = react.useCallback((event) => {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus({
+            target: { value: event.target.value },
+            currentTarget: {
+                focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                setSelection: (start, end) => {
+                    var _a;
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                },
+            },
+            preventDefault: () => event.preventDefault(),
+        });
+    }, [onFocus]);
+    const handleOnBlur = react.useCallback((event) => {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur({
+            target: { value: event.target.value },
+            currentTarget: {
+                focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                setSelection: (start, end) => {
+                    var _a;
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                },
+            },
+            preventDefault: () => event.preventDefault(),
+        });
+    }, [onBlur]);
+    const handleOnKeyDown = react.useCallback((event) => {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown({
+            target: { value: event.target.value, key: event.key },
+            currentTarget: {
+                focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                setSelection: (start, end) => {
+                    var _a;
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                },
+            },
+            preventDefault: () => event.preventDefault(),
+        });
+    }, [onKeyDown]);
+    const handleOnSelect = react.useCallback((event) => {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect({
+            target: {
+                value: event.target.value,
+                selectionStart: event.target.selectionStart || 0,
+            },
+            currentTarget: {
+                focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                setSelection: (start, end) => {
+                    var _a;
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                },
+            },
+            preventDefault: () => event.preventDefault(),
+        });
+    }, [onSelect]);
+    const handleOnPressIn = react.useCallback((event) => {
+        var _a;
+        onPressIn === null || onPressIn === void 0 ? void 0 : onPressIn({
+            target: { value: ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) || '' },
+            currentTarget: {
+                focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                setSelection: (start, end) => {
+                    var _a;
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                },
+            },
+            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 (jsxRuntime.jsx("textarea", Object.assign({ maxLength: maxLength, id: id, ref: inputRef, value: value, disabled: disabled, className: mergedStyles }, webProps)));
+});
+InputFieldCore.displayName = 'TextArea';
+
+const staticStyles$2 = ctDesignStyleManager.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 === null || theme === void 0 ? void 0 : theme.border.style.solid,
+            borderRadius: theme === null || theme === void 0 ? void 0 : theme.border.radius[8],
+            boxSizing: 'border-box',
+        },
+    };
+});
+const Field = react.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 [focus, setFocus] = react.useState(autoFocus);
+    const _isFocused = focus || value.length > 0;
+    const { promptStyles } = styleConfig || {};
+    const { Icon: promptIcon, message: promptMessage, hasError = false } = prompt || {};
+    const fieldContainerStyles = ctDesignStyleManager.useStyles((theme) => ({
+        root: getFieldContainerStyles({
+            variant: variant !== null && variant !== void 0 ? variant : 'md',
+            theme,
+            hasError,
+            focus,
+            value,
+            disabled,
+        }),
+    }), [variant, hasError, focus, value, disabled, styleConfig]);
+    const InputField = numberOfLines && numberOfLines > 1 ? InputFieldCore : InputFieldCore$1;
+    return (jsxRuntime.jsxs(ctDesignBox.Box, { boxSize: 'micro', styleConfig: styleConfig, children: [jsxRuntime.jsxs(ctDesignContainer.Container, { styleConfig: {
+                    root: [fieldContainerStyles.root, staticStyles$2.fieldContainer, ...(styleConfig.fieldContainer || [])],
+                }, children: [react.isValidElement(prefix) && (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [staticStyles$2.flexNoShrink] }, children: react.cloneElement(prefix, { focus }) })), jsxRuntime.jsxs(ctDesignContainer.Container, { styleConfig: { root: [staticStyles$2.fieldWrapper, ...(styleConfig.field || [])] }, children: [jsxRuntime.jsx(FieldLabelWrapper, { id: id, variant: variant, type: type, value: value, focus: _isFocused, placeholder: placeholder, placeholderType: placeholderType, disabled: disabled, styleConfig: styleConfig, prefix: prefix }), jsxRuntime.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) => {
+                                    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 })] }), react.isValidElement(suffix) && (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [staticStyles$2.flexNoShrink] }, children: react.cloneElement(suffix, { focus }) }))] }), (promptIcon || promptMessage) && (jsxRuntime.jsxs(ctDesignBox.Box, { boxSize: 'pico', horizontal: true, styleConfig: {
+                    root: [staticStyles$2.promptBox, ...((promptStyles === null || promptStyles === void 0 ? void 0 : promptStyles.promptBox) || [])],
+                }, children: [promptIcon && (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [staticStyles$2.promptIcon, ...((promptStyles === null || promptStyles === void 0 ? void 0 : promptStyles.promptIconContainer) || [])] }, children: promptIcon })), promptMessage && (jsxRuntime.jsx(ctDesignTypography.Typography, { variant: 'B3', color: hasError ? 'warning' : 'success', styleConfig: promptStyles === null || promptStyles === void 0 ? void 0 : promptStyles.promptMessageTypography, children: promptMessage }))] }))] }));
+});
+Field.displayName = 'Field';
+
+const styles$2 = ctDesignStyleManager.makeStyles((theme) => {
+    return {
+        wrapper: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'row',
+            paddingLeft: 16,
+        },
+        flagContainer: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'row',
+            height: theme.size[6],
+            width: theme.size[6],
+        },
+        countryCode: {
+            alignSelf: 'flex-start',
+        },
+        divider: {
+            borderRightWidth: 1,
+            height: '100%',
+            borderRightColor: theme.color.background.disabledDark,
+        },
+        disabledColor: {
+            color: theme.color.text.disabled,
+        },
+        enabledColor: {
+            color: theme.color.text.primary,
+        },
+        container: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: theme.spacing[2],
+        },
+    };
+});
+const DownChevronV2 = (_a) => {
+    var { color = '#1A1A1A' } = _a, rest = tslib.__rest(_a, ["color"]);
+    return (jsxRuntime.jsx("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', width: '12', height: '12', fill: 'none', viewBox: '0 0 12 12' }, rest, { children: jsxRuntime.jsx("path", { stroke: color, strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2', d: 'M2 4l4 4 4-4' }) })));
+};
+const PhoneFieldPrefix = ({ countryCode, disabled = false, flagIcon, onDropdownClick, showDropdownIcon, }) => {
+    const onClick = () => {
+        if (disabled)
+            return;
+        onDropdownClick === null || onDropdownClick === void 0 ? void 0 : onDropdownClick();
+    };
+    return (jsxRuntime.jsxs(ctDesignBox.Box, { boxSize: 'micro', styleConfig: { root: [styles$2.wrapper] }, onClick: onClick, children: [jsxRuntime.jsxs(ctDesignContainer.Container, { styleConfig: {
+                    root: [styles$2.container],
+                }, children: [flagIcon && jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [styles$2.flagContainer] }, children: flagIcon }), jsxRuntime.jsx(ctDesignTypography.Typography, { variant: 'B1', color: disabled ? 'disabled' : 'primary', styleConfig: { root: [styles$2.countryCode] }, children: countryCode }), showDropdownIcon && (jsxRuntime.jsx(DownChevronV2, { color: disabled ? styles$2.disabledColor.color : styles$2.enabledColor.color }))] }), jsxRuntime.jsx(ctDesignDivider.Divider, { dividerWidth: 1, dividerLength: 0, orientation: 'vertical', styleConfig: { root: [styles$2.divider] } })] }));
+};
+
+const styles$1 = ctDesignStyleManager.makeStyles((theme) => {
+    return {
+        fieldConfig: {
+            flex: 1,
+            paddingTop: 0,
+            paddingBottom: 0,
+            paddingVertical: 0,
+            lineHeight: 18,
+            paddingLeft: theme.spacing[4],
+        },
+    };
+});
+const PhoneField = react.forwardRef((_a, forwardedRef) => {
+    var _b;
+    var { flagIcon, countryCode, showDropdownIcon, onDropdownClick, disabled, max, onChange, styleConfig } = _a, rest = tslib.__rest(_a, ["flagIcon", "countryCode", "showDropdownIcon", "onDropdownClick", "disabled", "max", "onChange", "styleConfig"]);
+    const [prefixWidth, setPrefixWidth] = react.useState(0);
+    const handleChange = (event) => {
+        const value = event.target.value;
+        const isValidValue = value ? new RegExp(ctDesignCommonConstants.ONLY_NUMERIC).test(value) : true;
+        if (value.length <= max && isValidValue) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        }
+    };
+    const customPlaceHolderStyling = ctDesignStyleManager.useStyles(() => {
+        return {
+            placeholderStyles: {
+                marginLeft: prefixWidth,
+            },
+        };
+    }, [prefixWidth]);
+    return (jsxRuntime.jsx(Field, Object.assign({}, rest, { type: exports.FieldType.PHONE, ref: forwardedRef, disabled: disabled, onChange: handleChange, prefix: jsxRuntime.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: jsxRuntime.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) })));
+});
+PhoneField.displayName = 'PhoneField';
+
+const styles = ctDesignStyleManager.makeStyles((theme) => ({
+    rootContainer: {
+        justifyContent: 'center',
+    },
+    otpContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        gap: theme.spacing[3],
+    },
+    otpBox: {
+        width: theme.size[15],
+        height: theme.size[15],
+        borderRadius: theme === null || theme === void 0 ? void 0 : theme.border.radius[8],
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderStyle: theme.border.style.solid,
+    },
+    otpInput: {
+        width: '100%',
+        height: '100%',
+        fontSize: theme === null || theme === void 0 ? void 0 : theme.typography.size[20],
+        fontWeight: theme === null || theme === void 0 ? void 0 : theme.typography.weight.semibold,
+        color: theme.color.text.primary,
+        textAlign: 'center',
+    },
+    errorText: {
+        marginVertical: theme === null || theme === void 0 ? void 0 : theme.spacing[2],
+        fontSize: theme === null || theme === void 0 ? void 0 : theme.typography.size[14],
+        fontWeight: theme === null || theme === void 0 ? void 0 : theme.typography.weight.semibold,
+        color: theme === null || theme === void 0 ? void 0 : theme.color.text.warning,
+    },
+}));
+const OtpBox = ({ value, focus, inputMode, onChange, onFocus, readOnly, onBlur, onPressIn, onKeyDown, onSelect, maxLength, prompt, styleConfig, }) => {
+    const theme = ctDesignTheme.useTheme();
+    const ref = react.useRef(null);
+    const { hasError = false } = prompt || {};
+    const { otpBox = [], otpRootInput = [] } = styleConfig || {};
+    react.useEffect(() => {
+        if (focus && ref.current) {
+            ref.current.focus();
+        }
+    }, [focus]);
+    const dynamicStyles = ctDesignStyleManager.useStyles((theme) => {
+        if (hasError) {
+            return {
+                otpBox: {
+                    borderColor: theme.color.border.warning,
+                    borderWidth: theme.border.width.lg,
+                },
+            };
+        }
+        return {
+            otpBox: {
+                borderColor: focus ? theme.color.border.primary : theme.color.border.disabledDark,
+                borderWidth: focus ? theme.border.width.lg : theme.border.width.sm,
+            },
+        };
+    }, [hasError, focus]);
+    return (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: {
+            root: [styles.otpBox, dynamicStyles.otpBox, ...otpBox],
+        }, children: jsxRuntime.jsx(InputFieldCore$1, { id: `otp-box`, disabled: readOnly, ref: ref, value: value, maxLength: maxLength, inputMode: inputMode, onChange: onChange, onBlur: onBlur, onPressIn: onPressIn, onKeyDown: onKeyDown, onSelect: onSelect, autoCapitalize: 'characters', cursorColor: theme.color.text.grapetini900, onFocus: onFocus, focus: focus, styleConfig: { root: [styles.otpInput, ...otpRootInput] } }) }));
+};
+const OtpField = ({ value = '', numberOfBoxes = 4, inputMode = 'numeric', autoFocus = true, refocus = false, onChange, readOnly = false, onComplete, onKeyDown, onSelect, onBlur, onPressIn, onFocus, prompt, styleConfig = {}, }) => {
+    const [focusedIndex, setFocusedIndex] = react.useState(autoFocus ? 0 : -1);
+    const { hasError = false, message: errorMessage } = prompt || {};
+    const { promptStyles, otpRootContainer = [], otpRootInput = [] } = styleConfig || {};
+    const { promptMessageTypography } = promptStyles || {};
+    const otpValues = Array(numberOfBoxes)
+        .fill('')
+        .map((_, index) => {
+        const char = value[index];
+        return char && char !== ' ' ? char : '';
+    });
+    react.useEffect(() => {
+        if (autoFocus && !readOnly) {
+            setFocusedIndex(0);
+        }
+    }, [autoFocus, readOnly]);
+    react.useEffect(() => {
+        if (refocus) {
+            setFocusedIndex(0);
+        }
+    }, [refocus]);
+    const validateInput = react.useCallback((text) => {
+        if (inputMode === 'numeric') {
+            return text.replace(/[^0-9]/g, '');
+        }
+        return text.replace(/[^0-9A-Za-z]/g, '').toUpperCase();
+    }, [inputMode]);
+    const handleInputChange = react.useCallback((e, index) => {
+        const validatedText = validateInput(e.target.value);
+        const otpString = value || '';
+        const currentOtpValues = Array(numberOfBoxes)
+            .fill('')
+            .map((_, idx) => {
+            const char = otpString[idx];
+            return char && char !== ' ' ? char : '';
+        });
+        if (validatedText.length > 1) {
+            const newValues = [...currentOtpValues];
+            for (let i = 0; i < validatedText.length && index + i < numberOfBoxes; i++) {
+                newValues[index + i] = validatedText[i];
+            }
+            const newValue = newValues.join('');
+            onChange === null || onChange === void 0 ? void 0 : onChange({
+                target: { value: newValue, selectionStart: index },
+                currentTarget: e.currentTarget,
+                preventDefault: e.preventDefault,
+            });
+            const nextEmptyIndex = newValues.findIndex((val) => !val);
+            if (nextEmptyIndex !== -1) {
+                setFocusedIndex(nextEmptyIndex);
+            }
+            else {
+                setFocusedIndex(numberOfBoxes - 1);
             }
-            case exports.FieldVariant.MD: {
-                if (type === exports.FieldType.PHONE && value.length)
-                    return;
-                return (jsxRuntime.jsx(StyledFieldPlaceholder, tslib.__assign({}, fieldPlaceholderStyles, { htmlFor: id, className: placeholderLabel === null || placeholderLabel === void 0 ? void 0 : placeholderLabel.className, css: placeholderLabel === null || placeholderLabel === void 0 ? void 0 : placeholderLabel.css }, { children: jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: type === exports.FieldType.PHONE ? 'B1' : isFocused ? 'B3' : 'B1', color: 'tertiary', styleConfig: placeholderTypography }, { children: placeholder })) })));
+            if (!newValues.includes('')) {
+                onComplete === null || onComplete === void 0 ? void 0 : onComplete(newValue);
             }
-            default: {
-                if (type === exports.FieldType.PHONE && value.length)
-                    return;
-                return (jsxRuntime.jsx(StyledFieldPlaceholder, tslib.__assign({}, fieldPlaceholderStyles, { htmlFor: id, className: placeholderLabel === null || placeholderLabel === void 0 ? void 0 : placeholderLabel.className, css: placeholderLabel === null || placeholderLabel === void 0 ? void 0 : placeholderLabel.css }, { children: jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: type === exports.FieldType.PHONE ? 'B1' : isFocused ? 'B3' : 'B1', color: 'tertiary', styleConfig: placeholderTypography }, { children: placeholder })) })));
+            return;
+        }
+        if (validatedText) {
+            const newValues = [...currentOtpValues];
+            newValues[index] = validatedText;
+            const newValue = newValues.join('');
+            onChange === null || onChange === void 0 ? void 0 : onChange({
+                target: { value: newValue, selectionStart: index },
+                currentTarget: e.currentTarget,
+                preventDefault: e.preventDefault,
+            });
+            if (index < numberOfBoxes - 1) {
+                setFocusedIndex(index + 1);
+            }
+            if (!newValues.includes('')) {
+                onComplete === null || onComplete === void 0 ? void 0 : onComplete(newValue);
             }
         }
-    };
-    return (jsxRuntime.jsxs(ctDesignBox.Box, tslib.__assign({ boxSize: 'micro', className: rootBox === null || rootBox === void 0 ? void 0 : rootBox.className, css: (rootBox === null || rootBox === void 0 ? void 0 : rootBox.css) || rootCss }, { children: [jsxRuntime.jsxs(StyledFieldContainer, tslib.__assign({}, fieldContainerStyles, { className: fieldContainer === null || fieldContainer === void 0 ? void 0 : fieldContainer.className, css: (fieldContainer === null || fieldContainer === void 0 ? void 0 : fieldContainer.css) || css }, { children: [react.isValidElement(prefix) && react.cloneElement(prefix, { focus: focus }), !disabledPlaceHolder && getFieldPlaceholder(), jsxRuntime.jsx(StyledField, tslib.__assign({}, fieldStyles, { id: id, value: value, onChange: onFieldChange, autoComplete: 'off', disabled: disabled, ref: forwardedRef, autoFocus: autoFocus, onFocus: customOnFocus, onBlur: customOnBlur, css: field === null || field === void 0 ? void 0 : field.css, className: field === null || field === void 0 ? void 0 : field.className }, rest)), react.isValidElement(suffix) && react.cloneElement(suffix, { focus: focus })] })), (promptIcon || promptMessage) && (jsxRuntime.jsxs(ctDesignBox.Box, tslib.__assign({ boxSize: 'pico', horizontal: true, css: tslib.__assign({ paddingLeft: theme.spacing[4], paddingRight: theme.spacing[4], display: 'flex', alignItems: 'center' }, promptBox === null || promptBox === void 0 ? void 0 : promptBox.css), className: promptBox === null || promptBox === void 0 ? void 0 : promptBox.className }, { children: [promptIcon && (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ css: tslib.__assign({ height: theme.size[4], width: theme.size[4], paddingRight: theme.spacing[1], display: 'flex', justifyContent: 'center', alignItems: 'center' }, promptIconContainer === null || promptIconContainer === void 0 ? void 0 : promptIconContainer.css), className: promptIconContainer === null || promptIconContainer === void 0 ? void 0 : promptIconContainer.className }, { children: promptIcon }))), promptMessage && (jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'B3', color: hasError ? 'warning' : 'success', styleConfig: promptMessageTypography }, { children: promptMessage })))] })))] })));
-});
+    }, [validateInput, value, numberOfBoxes, onChange, onComplete]);
+    const handleKeyPress = react.useCallback((e, index) => {
+        var _a, _b;
+        const key = e.target.key;
+        if (key === 'Backspace') {
+            const otpString = value || '';
+            const currentOtpValues = Array(numberOfBoxes)
+                .fill('')
+                .map((_, idx) => {
+                const char = otpString[idx];
+                return char && char !== ' ' ? char : '';
+            });
+            if (currentOtpValues[index]) {
+                const newValues = [...currentOtpValues];
+                newValues[index] = ' ';
+                onChange === null || onChange === void 0 ? void 0 : onChange({
+                    target: { value: newValues.join(''), selectionStart: index },
+                    currentTarget: e.currentTarget,
+                    preventDefault: e.preventDefault,
+                });
+            }
+            else if (index > 0) {
+                setFocusedIndex(index - 1);
+            }
+        }
+        else if (key === 'ArrowLeft' && index > 0) {
+            (_a = e.preventDefault) === null || _a === void 0 ? void 0 : _a.call(e);
+            setFocusedIndex(index - 1);
+        }
+        else if (key === 'ArrowRight' && index < numberOfBoxes - 1) {
+            (_b = e.preventDefault) === null || _b === void 0 ? void 0 : _b.call(e);
+            setFocusedIndex(index + 1);
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown({
+            target: { value, key },
+            currentTarget: e.currentTarget,
+            preventDefault: e.preventDefault,
+        });
+    }, [numberOfBoxes, onKeyDown, value, onChange]);
+    const handleFocus = react.useCallback((e, index) => {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus({
+            target: { value, index },
+            currentTarget: e.currentTarget,
+            preventDefault: e.preventDefault,
+        });
+        setFocusedIndex(index);
+    }, [onFocus, value]);
+    return (jsxRuntime.jsxs(ctDesignContainer.Container, { styleConfig: { root: [styles.rootContainer, ...otpRootContainer] }, children: [jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [styles.otpContainer, ...otpRootInput] }, children: Array(numberOfBoxes)
+                    .fill(null)
+                    .map((_, index) => (jsxRuntime.jsx(OtpBox, { value: otpValues[index], focus: focusedIndex === index, prompt: { hasError }, inputMode: inputMode, maxLength: ctDesignCommonUtils.isIOS() ? numberOfBoxes : 1, onFocus: (e) => handleFocus(e, index), onChange: (e) => handleInputChange(e, index), readOnly: readOnly, onPressIn: onPressIn, onKeyDown: (e) => handleKeyPress(e, index), onSelect: onSelect, onBlur: onBlur, styleConfig: styleConfig }, index))) }), hasError && !!errorMessage && (jsxRuntime.jsx(ctDesignTypography.Typography, { variant: ctDesignTypography.TypographyVariant.P3, color: ctDesignTypography.TypographyColor.WARNING, styleConfig: Object.assign({ root: [styles.errorText] }, promptMessageTypography), children: errorMessage }))] }));
+};
 
-exports.CURSOR_OPERATION = void 0;
+var CURSOR_OPERATION;
 (function (CURSOR_OPERATION) {
     CURSOR_OPERATION["NONE"] = "NONE";
     CURSOR_OPERATION["ADD"] = "ADD";
     CURSOR_OPERATION["SUBSTRACT"] = "SUBSTRACT";
-})(exports.CURSOR_OPERATION || (exports.CURSOR_OPERATION = {}));
-
-var CardField = react.forwardRef(function (_a, forwardedRef) {
-    var onChange = _a.onChange, _b = _a.gap, gap = _b === void 0 ? 4 : _b, value = _a.value, rest = tslib.__rest(_a, ["onChange", "gap", "value"]);
-    var cursorRef = react.useRef({
+})(CURSOR_OPERATION || (CURSOR_OPERATION = {}));
+const CardField = react.forwardRef((_a, forwardedRef) => {
+    var { onChange, value } = _a, rest = tslib.__rest(_a, ["onChange", "value"]);
+    const ref = react.useRef(null);
+    const mergedRef = useMergeRefs__default.default(forwardedRef, ref);
+    const cursorRef = react.useRef({
         cursorPos: 0,
-        operation: exports.CURSOR_OPERATION.NONE,
+        operation: CURSOR_OPERATION.NONE,
     });
-    react.useEffect(function () {
+    react.useEffect(() => {
         var _a;
-        (_a = forwardedRef === null || forwardedRef === void 0 ? void 0 : forwardedRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(cursorRef.current.cursorPos, cursorRef.current.cursorPos);
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.setSelection(cursorRef.current.cursorPos, cursorRef.current.cursorPos);
         cursorRef.current = {
             cursorPos: cursorRef.current.cursorPos,
-            operation: exports.CURSOR_OPERATION.NONE,
+            operation: CURSOR_OPERATION.NONE,
         };
     }, [value]);
-    var onFieldChange = function (e) {
-        onChange(ctDesignCommonUtils.removeNonNumerals(ctDesignCommonUtils.removeSpace(e.target.value)), e);
-        var selectionStart = e.target.selectionStart || 0;
+    const handleChange = (e) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+        let selectionStart = e.target.selectionStart || 0;
         switch (cursorRef.current.operation) {
-            case exports.CURSOR_OPERATION.SUBSTRACT: {
+            case CURSOR_OPERATION.SUBSTRACT: {
                 --selectionStart;
                 break;
             }
-            case exports.CURSOR_OPERATION.ADD: {
+            case CURSOR_OPERATION.ADD: {
                 ++selectionStart;
                 break;
             }
         }
         cursorRef.current = {
             cursorPos: selectionStart,
-            operation: exports.CURSOR_OPERATION.NONE,
+            operation: CURSOR_OPERATION.NONE,
         };
-        setTimeout(function () {
-            var _a;
-            (_a = forwardedRef === null || forwardedRef === void 0 ? void 0 : forwardedRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(cursorRef.current.cursorPos, cursorRef.current.cursorPos);
-        }, 0);
-    };
-    var onKeyDown = function (e) {
-        var _a;
-        var oldValues = ctDesignCommonUtils.removeNonNumerals(ctDesignCommonUtils.removeSpace(e.target.value));
-        var cursorOpration = {
-            cursorPos: cursorRef.current.cursorPos,
-            operation: exports.CURSOR_OPERATION.NONE,
-        };
-        switch (e.code) {
-            case 'Backspace': {
-                cursorOpration.operation = exports.CURSOR_OPERATION.NONE;
-                break;
-            }
-            case 'Space': {
-                cursorOpration.operation = exports.CURSOR_OPERATION.SUBSTRACT;
-                break;
-            }
-            default: {
-                if (oldValues.length % gap === 0) {
-                    cursorOpration.operation = exports.CURSOR_OPERATION.ADD;
-                }
-            }
-        }
-        cursorRef.current = cursorOpration;
-        (_a = rest === null || rest === void 0 ? void 0 : rest.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(rest, e);
     };
-    return (jsxRuntime.jsx(Field, tslib.__assign({}, rest, { type: exports.FieldType.TEXT, ref: forwardedRef, onChange: onFieldChange, onKeyDown: onKeyDown, value: ctDesignCommonUtils.addSpaceAtInterval(value, gap) })));
+    return (jsxRuntime.jsx(Field, Object.assign({ ref: mergedRef, onChange: handleChange }, rest, { type: exports.FieldType.NUMBER, value: value, inputMode: 'numeric' })));
 });
+CardField.displayName = 'CardField';
 
-var PhoneFieldPrefix = react.forwardRef(function (_a, forwardedRef) {
-    var countryCode = _a.countryCode, _b = _a.disabled, disabled = _b === void 0 ? false : _b, flagIcon = _a.flagIcon, onDropdownClick = _a.onDropdownClick, showDropdownIcon = _a.showDropdownIcon;
-    var theme = ctDesignTheme.useTheme();
-    var onClick = function () {
-        if (disabled)
-            return;
-        onDropdownClick === null || onDropdownClick === void 0 ? void 0 : onDropdownClick();
-    };
-    return (jsxRuntime.jsxs(ctDesignBox.Box, tslib.__assign({ boxSize: 'micro', horizontal: true, css: {
-            alignItems: 'center',
-            justifyContent: 'center',
-            cursor: disabled ? 'not-allowed' : 'pointer',
-            paddingLeft: '16px',
-        }, onClick: onClick, ref: forwardedRef }, { children: [flagIcon && (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', height: theme.size[6], width: theme.size[6] }, { children: flagIcon }))), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ css: { minWidth: 'fit-content' }, variant: 'B1', color: disabled ? 'disabled' : 'primary', isClickable: true }, { children: countryCode })), showDropdownIcon && jsxRuntime.jsx(ctDesignIcons.DownChevron, { color: disabled ? theme.color.text.disabled : theme.color.text.primary }), jsxRuntime.jsx(ctDesignDivider.Divider, { width: '1px', height: '24px', css: { borderBottom: "24px ".concat(theme.color.background.disabledDark, " solid") } })] })));
+const InputField = react.forwardRef((props, forwardedRef) => {
+    if (props.fieldType === 'phone') {
+        return jsxRuntime.jsx(PhoneField, Object.assign({}, props, { ref: forwardedRef }));
+    }
+    if (props.fieldType === 'otp') {
+        return jsxRuntime.jsx(OtpField, Object.assign({}, props));
+    }
+    if (props.fieldType === 'card') {
+        return jsxRuntime.jsx(CardField, Object.assign({}, props, { ref: forwardedRef }));
+    }
+    return jsxRuntime.jsx(Field, Object.assign({}, props, { ref: forwardedRef }));
 });
+InputField.displayName = 'InputField';
 
-var PhoneField = react.forwardRef(function (_a, forwardedRef) {
-    var max = _a.max, flagIcon = _a.flagIcon, countryCode = _a.countryCode, showDropdownIcon = _a.showDropdownIcon, onChange = _a.onChange, onDropdownClick = _a.onDropdownClick, disabled = _a.disabled, rest = tslib.__rest(_a, ["max", "flagIcon", "countryCode", "showDropdownIcon", "onChange", "onDropdownClick", "disabled"]);
-    var theme = styled.useTheme();
-    var _b = react.useState(0), prefixWidth = _b[0], setPrefixWidth = _b[1];
-    var onFieldChange = function (event) {
-        var value = event.target.value;
-        var isValidValue = value ? new RegExp(ctDesignCommonConstants.ONLY_NUMERIC).test(value) : true;
-        if (value.length <= max && isValidValue) {
-            onChange(event);
-        }
-    };
-    var calculatePrefixWidth = react.useCallback(function (node) {
-        var _a;
-        if (node) {
-            setPrefixWidth(((_a = node.getBoundingClientRect().width) !== null && _a !== void 0 ? _a : 0) + 16);
-        }
-    }, [countryCode, flagIcon]);
-    var customPlaceHolderStyling = {
-        marginLeft: prefixWidth,
+const staticStyles$1 = ctDesignStyleManager.makeStyles((theme) => {
+    return {
+        root: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginLeft: theme.spacing[4],
+            width: theme.size[6],
+            height: theme.size[6],
+        },
     };
-    return (jsxRuntime.jsx(Field, tslib.__assign({}, rest, { type: exports.FieldType.PHONE, ref: forwardedRef, onChange: onFieldChange, disabled: disabled, prefix: jsxRuntime.jsx(PhoneFieldPrefix, { flagIcon: flagIcon, countryCode: countryCode, showDropdownIcon: showDropdownIcon, onDropdownClick: onDropdownClick, disabled: disabled, ref: calculatePrefixWidth }), inputMode: 'numeric', styleConfig: {
-            field: {
-                css: {
-                    paddingTop: 'unset',
-                    paddingBottom: 'unset',
-                    paddingLeft: theme.spacing[4],
-                },
-            },
-            placeholderLabel: {
-                css: tslib.__assign({}, customPlaceHolderStyling),
-            },
-        } })));
 });
-
-var FieldIcon = function (_a) {
-    var icon = _a.icon, onClick = _a.onClick, focus = _a.focus, focusedIcon = _a.focusedIcon, css = _a.css;
-    var theme = ctDesignTheme.useTheme();
-    var iconPrefix = icon;
-    if (focus && focusedIcon) {
-        iconPrefix = focusedIcon;
+const FieldIcon = ({ icon, onClick, focus, focusedIcon, styleConfig }) => {
+    const { root: customRootStyles = [] } = styleConfig || {};
+    if (!react.isValidElement(icon))
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    let IconPrefix = icon;
+    if (focus && react.isValidElement(focusedIcon)) {
+        IconPrefix = focusedIcon;
     }
-    var showIconWithoutPointer = !onClick;
-    var iconStyles = showIconWithoutPointer ? { pointerEvents: 'none' } : { cursor: 'pointer' };
-    return (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ height: theme.size[6], width: theme.size[6], display: 'flex', alignItems: 'center', justifyContent: 'center', onClick: onClick, css: tslib.__assign(tslib.__assign({ position: 'absolute' }, iconStyles), css), marginLeft: theme.spacing[4] }, { children: iconPrefix })));
+    const handleClick = () => {
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    return (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [staticStyles$1.root, ...customRootStyles] }, onClick: handleClick, children: IconPrefix }));
 };
 
-var FieldAction = function (_a) {
-    var _b = _a.actionsList, actionsList = _b === void 0 ? [] : _b;
-    return (jsxRuntime.jsx(ctDesignBox.Box, tslib.__assign({ boxSize: 'tiny', horizontal: true, css: { paddingRight: '16px' } }, { children: actionsList.map(function (actionItem) {
-            var _a = actionItem || {}, label = _a.label, color = _a.color, onClick = _a.onClick, isDisabled = _a.isDisabled, isLoading = _a.isLoading;
+const staticStyles = ctDesignStyleManager.makeStyles((theme) => ({
+    root: {
+        paddingRight: theme.spacing[4],
+    },
+}));
+const FieldAction = ({ actionsList = [] }) => {
+    return (jsxRuntime.jsx(ctDesignBox.Box, { boxSize: 'tiny', horizontal: true, styleConfig: { root: [staticStyles.root] }, children: actionsList.map((actionItem) => {
+            const { label, color, onClick, isDisabled, isLoading } = actionItem || {};
             if (isLoading) {
-                return jsxRuntime.jsx(ctDesignDottedLoader.DottedLoader, {});
+                return jsxRuntime.jsx(ctDesignDottedLoader.DottedLoader, {}, 'fieldAction');
             }
-            return (jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'HM4', color: isDisabled ? ctDesignTypography.TypographyColor.DISABLED : color, onClick: !isDisabled ? onClick : function () { }, isClickable: true, isDisabled: isDisabled }, { children: label })));
-        }) })));
+            return (jsxRuntime.jsx(ctDesignTypography.Typography, { variant: 'HM4', color: isDisabled ? ctDesignTypography.TypographyColor.DISABLED : color, onClick: !isDisabled
+                    ? onClick
+                    : () => {
+                    }, isClickable: true, isDisabled: isDisabled, children: label }, 'fieldAction'));
+        }) }));
 };
 
-var SingleOTPField = react.forwardRef(function (_a, forwardedRef) {
-    var _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, otpBoxCss = _a.otpBoxCss, rest = tslib.__rest(_a, ["isLoading", "otpBoxCss"]);
-    var theme = ctDesignTheme.useTheme();
-    var loadingStyles = isLoading
-        ? {
-            backgroundColor: 'unset',
-        }
-        : {};
-    var OTP_FIELD_TEXT_STYLING = tslib.__assign(tslib.__assign({}, ctDesignTypography.getTypographyStyles({ theme: theme, variant: ctDesignTypography.TypographyVariant.HM1 })), { letterSpacing: ' -0.25px', textAlign: 'center', padding: theme.spacing[3] });
-    return (jsxRuntime.jsx(Field, tslib.__assign({ ref: forwardedRef, disabled: isLoading, styleConfig: {
-            field: {
-                css: tslib.__assign(tslib.__assign(tslib.__assign({}, otpBoxCss), OTP_FIELD_TEXT_STYLING), loadingStyles),
-            },
-            fieldContainer: {
-                css: tslib.__assign({}, loadingStyles),
-            },
-        } }, rest)));
-});
-
-exports.BoxCount = void 0;
-(function (BoxCount) {
-    BoxCount[BoxCount["SM"] = 4] = "SM";
-    BoxCount[BoxCount["MD"] = 6] = "MD";
-})(exports.BoxCount || (exports.BoxCount = {}));
-
-var _a;
-var SPACEBAR = ctDesignCommonConstants.KEYBOARD_KEY_CODE.SPACEBAR, LEFT_ARROW = ctDesignCommonConstants.KEYBOARD_KEY_CODE.LEFT_ARROW, RIGHT_ARROW = ctDesignCommonConstants.KEYBOARD_KEY_CODE.RIGHT_ARROW;
-var boxStyling = (_a = {},
-    _a[exports.BoxCount.MD] = { width: '48px' },
-    _a[exports.BoxCount.SM] = { width: '56px' },
-    _a);
-var OTPField = react.forwardRef(function (_a, forwardedRef) {
-    var _b = _a.boxCount, boxCount = _b === void 0 ? exports.BoxCount.MD : _b, onChanged = _a.onChanged, onSubmit = _a.onSubmit, onResend = _a.onResend, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, _d = _a.message, message = _d === void 0 ? '' : _d, _e = _a.hasError, hasError = _e === void 0 ? false : _e, _f = _a.showCountDown, showCountDown = _f === void 0 ? true : _f, _g = _a.initialCountDownTime, initialCountDownTime = _g === void 0 ? 30 : _g;
-    var theme = ctDesignTheme.useTheme();
-    var otpInputsArr = Array.from(Array(boxCount), function (_, index) { return index; });
-    var _h = react.useState(initialCountDownTime), countDown = _h[0], setCountDown = _h[1];
-    var _j = react.useState(showCountDown), startCounter = _j[0], setStartCounter = _j[1];
-    var _k = react.useState([]), otpValue = _k[0], setOtpValue = _k[1];
-    var refs = react.useRef(new Array(boxCount));
-    var messageIcon = !hasError && message ? jsxRuntime.jsx(ctDesignIcons.CheckCircle, {}) : null;
-    react.useEffect(function () {
-        var _a;
-        (_a = refs.current) === null || _a === void 0 ? void 0 : _a[0].focus();
-        var timerId;
-        if (showCountDown && startCounter) {
-            timerId = setInterval(function () {
-                setCountDown(function (prev) {
-                    var updatedValue = --prev;
-                    if (updatedValue === 0) {
-                        clearInterval(timerId);
-                        setStartCounter(false);
-                    }
-                    return updatedValue;
-                });
-            }, 1000);
-        }
-        return function () {
-            timerId && clearInterval(timerId);
-        };
-    }, [startCounter]);
-    react.useEffect(function () {
-        var val = otpValue.join('');
-        if (val.length === boxCount) {
-            onSubmit(val);
-        }
-    }, [otpValue]);
-    var onFieldChange = function (index) { return function (event) {
-        var _a, _b, _c, _d;
-        var value = event.target.value;
-        if (value.length) {
-            (_b = (_a = refs.current) === null || _a === void 0 ? void 0 : _a[index + 1]) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-        else {
-            (_d = (_c = refs.current) === null || _c === void 0 ? void 0 : _c[index - 1]) === null || _d === void 0 ? void 0 : _d.focus();
-        }
-        var updatedOtp = tslib.__spreadArray([], otpValue, true);
-        updatedOtp[index] = value;
-        setOtpValue(updatedOtp);
-        onChanged === null || onChanged === void 0 ? void 0 : onChanged(event, value);
-    }; };
-    var onPasteOTP = function (index) { return function (e) {
-        e.preventDefault();
-        var paste = e.clipboardData.getData('text').split('').slice(0, otpInputsArr.length);
-        if (!ctDesignCommonConstants.ONLY_NUMERIC.test(paste.join(''))) {
-            return;
-        }
-        var focusIndex = Math.min(index + paste.length, otpInputsArr.length - 1);
-        setOtpValue(paste);
-        refs.current[focusIndex].focus();
-    }; };
-    var handleOnKeyDown = function (index) { return function (e) {
-        var _a, _b;
-        if (e.keyCode === LEFT_ARROW) {
-            e.preventDefault();
-            (_a = refs.current) === null || _a === void 0 ? void 0 : _a[index - 1].focus();
-        }
-        else if (e.keyCode === RIGHT_ARROW) {
-            e.preventDefault();
-            (_b = refs.current) === null || _b === void 0 ? void 0 : _b[index + 1].focus();
-        }
-        else if (e.keyCode === SPACEBAR || e.key === ' ' || e.key === 'Spacebar' || e.key === 'Space') {
-            e.preventDefault();
-        }
-    }; };
-    var onResendHandler = function () {
-        onResend === null || onResend === void 0 ? void 0 : onResend();
-        setStartCounter(true);
-        setCountDown(initialCountDownTime);
-    };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ ref: forwardedRef, position: 'relative', width: 'fit-content' }, { children: [jsxRuntime.jsx(ctDesignBox.Box, tslib.__assign({ boxSize: 'micro', horizontal: true }, { children: otpInputsArr.map(function (otp, i) {
-                            return (jsxRuntime.jsx(SingleOTPField, { type: exports.FieldType.NUMBER, ref: function (el) { return (refs.current[i] = el); }, onChange: onFieldChange(i), onKeyDown: handleOnKeyDown(i), onPaste: onPasteOTP(i), value: otpValue === null || otpValue === void 0 ? void 0 : otpValue[i], prompt: { hasError: hasError }, otpBoxCss: tslib.__assign({ height: '56px' }, boxStyling[boxCount]), maxLength: 1, isLoading: isLoading }, 'otp_Input_' + otp));
-                        }) })), isLoading && (jsxRuntime.jsx(ctDesignCard.Card, tslib.__assign({ shadowDirection: ctDesignCard.CardBorderDirection.BOTTOM, shadowVariant: ctDesignCard.CardShadowVariant.E3, css: {
-                            position: 'absolute',
-                            height: '34px',
-                            width: '66px',
-                            padding: theme.spacing[3],
-                            borderRadius: theme.spacing[8],
-                            top: '50%',
-                            left: '50%',
-                            transform: 'translate(-50%, -50%)',
-                        } }, { children: jsxRuntime.jsx(ctDesignDottedLoader.DottedLoader, {}) })))] })), (messageIcon || message) && (jsxRuntime.jsxs(ctDesignBox.Box, tslib.__assign({ boxSize: 'pico', horizontal: true, css: {
-                    paddingTop: theme.spacing[2],
-                    alignItems: 'center',
-                } }, { children: [messageIcon && (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ css: {
-                            height: theme.size[4],
-                            width: theme.size[4],
-                            display: 'flex',
-                            justifyContent: 'center',
-                            alignItems: 'center',
-                        } }, { children: messageIcon }))), message && (jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'B3', color: hasError ? 'warning' : 'success' }, { children: message })))] }))), showCountDown && (jsxRuntime.jsxs(ctDesignTypography.Typography, tslib.__assign({ className: 'mt-3 flex', variant: 'B2' }, { children: ["Haven\u2019t received OTP yet?", jsxRuntime.jsxs(ctDesignTypography.Typography, tslib.__assign({ variant: 'B2', className: 'ml-1', color: countDown ? 'disabled' : 'link', onClick: !countDown ? onResendHandler : undefined, isClickable: !countDown }, { children: [' ', "Resend ", !!countDown && "(".concat(countDown, "s)")] }))] })))] }));
-});
-
-exports.CardField = CardField;
 exports.FieldAction = FieldAction;
 exports.FieldIcon = FieldIcon;
-exports.FieldV2 = Field;
-exports.OTPField = OTPField;
-exports.PhoneField = PhoneField;
-exports.PhoneFieldPrefix = PhoneFieldPrefix;
+exports.InputField = InputField;
+exports.TextArea = InputFieldCore;
 //# sourceMappingURL=ct-design-field.cjs.js.map