@cleartrip/ct-design-field 4.0.0 → 5.1.0

package/dist/style.d.ts

@@ -1,6 +1,6 @@
 import { Theme } from '@cleartrip/ct-design-theme';
-import { FieldType, FieldVariant } from './type';
-import { IStyledFieldPlaceholder } from './StyledFieldPlaceholder/type';
+import { FieldType, FieldVariant } from './constants';
+import { TypographyVariantType } from '@cleartrip/ct-design-typography';
 interface IFieldContainerStylesParams {
     variant: `${FieldVariant}`;
     theme: Theme;
@@ -11,69 +11,177 @@ interface IFieldContainerStylesParams {
     isPrefixComponent?: boolean;
     type?: `${FieldType}`;
     disabledPlaceHolder?: boolean;
+    customSpacingTop?: number;
+    isLabeledPlaceholder?: boolean;
 }
-export declare const getFieldContainerBorderStyle: ({ theme, hasError, focus, disabled, }: Omit<IFieldContainerStylesParams, 'variant' | 'value'>) => {
+export declare const getFieldContainerBorderStyle: ({ theme, hasError, focus, disabled, }: Omit<IFieldContainerStylesParams, "variant" | "value">) => {
+    borderStyle: string;
     borderColor: string;
-    borderWidth: "1.5px";
+    borderWidth: 1.5;
 } | {
+    borderStyle: string;
     borderColor: string;
-    borderWidth: "1px";
+    borderWidth: 1;
 };
-export declare const getFieldSpacingAndHeight: ({ theme, variant, focus, value, isPrefixComponent, disabledPlaceHolder, }: Omit<IFieldContainerStylesParams, 'hasError'>) => {
-    height: "40px";
-    paddingLeft: "16px" | "52px";
-    paddingRight: "16px";
-} | {
-    height: "56px";
-    paddingTop: "16px" | "24px";
-    paddingBottom: "8px" | "16px";
-    paddingLeft: "16px" | "52px";
-    paddingRight: "16px";
+export declare const getFieldSpacingAndHeight: ({ isLabeledPlaceholder, theme, variant, focus, value, disabledPlaceHolder, customSpacingTop, }: Omit<IFieldContainerStylesParams, "hasError">) => {
+    height: 40;
+    paddingRight: 16;
+    paddingLeft: 16;
+} | {
+    height: 56;
+    paddingTop: 0 | 4 | 1 | 2 | 3 | 6 | 8 | 12 | 16 | 20 | 40 | 56 | 24 | 28 | 32 | 36 | 44 | 48 | 52 | 64;
+    paddingBottom: 8 | 16;
+    paddingRight: 16;
+    paddingLeft: 16;
 };
-export declare const getFieldContainerStyles: ({ hasError, theme, focus, disabled }: IFieldContainerStylesParams) => {
+export declare const getFieldContainerStyles: ({ hasError, theme, focus, disabled, variant, value, customSpacingTop, }: IFieldContainerStylesParams) => {
     backgroundColor: string;
-    cursor: string;
+    height: 40 | 56;
+    borderStyle: string;
     borderColor: string;
-    borderWidth: "1.5px";
+    borderWidth: 1.5;
 } | {
     backgroundColor: string;
-    cursor: string;
+    height: 40 | 56;
+    borderStyle: string;
     borderColor: string;
-    borderWidth: "1px";
+    borderWidth: 1;
 };
-export declare const getFieldPlaceholderStyles: ({ theme, isFocused, disabled, variant, fieldType, isPrefixComponent, }: {
+export declare const getFieldPlaceholderStyles: ({ isFocused, variant, fieldType, }: {
     theme: Theme;
     isFocused: boolean;
     disabled: boolean;
     variant: `${FieldVariant}`;
     fieldType: `${FieldType}`;
-    isPrefixComponent?: boolean | undefined;
-}) => IStyledFieldPlaceholder;
-export declare const getFieldStyles: ({ disabled, theme, variant, focus, value, type, isPrefixComponent, disabledPlaceHolder, }: {
+    isPrefixComponent?: boolean;
+    shiftPlaceholder?: boolean;
+}) => {
+    top: number;
+    transform?: undefined;
+} | {
+    top?: undefined;
+    transform?: undefined;
+} | {
+    transform: {
+        translateY: number;
+    }[];
+    top?: undefined;
+};
+export declare const getFieldStyles: ({ isLabeledPlaceholder, disabled, theme, variant, focus, value, type, isPrefixComponent, disabledPlaceHolder, }: {
+    isLabeledPlaceholder: boolean;
     disabled: boolean;
     theme: Theme;
     variant: `${FieldVariant}`;
     type: `${FieldType}`;
     value: string;
     focus: boolean;
-    isPrefixComponent?: boolean | undefined;
-    disabledPlaceHolder?: boolean | undefined;
+    isPrefixComponent?: boolean;
+    disabledPlaceHolder?: boolean;
 }) => {
-    cursor: string;
-    color: string;
     backgroundColor: string;
-    height: "40px";
-    paddingLeft: "16px" | "52px";
-    paddingRight: "16px";
-} | {
-    cursor: string;
     color: string;
+    height: 40;
+    paddingRight: 16;
+    paddingLeft: 16;
+} | {
     backgroundColor: string;
-    height: "56px";
-    paddingTop: "16px" | "24px";
-    paddingBottom: "8px" | "16px";
-    paddingLeft: "16px" | "52px";
-    paddingRight: "16px";
+    color: string;
+    height: 56;
+    paddingTop: 0 | 4 | 1 | 2 | 3 | 6 | 8 | 12 | 16 | 20 | 40 | 56 | 24 | 28 | 32 | 36 | 44 | 48 | 52 | 64;
+    paddingBottom: 8 | 16;
+    paddingRight: 16;
+    paddingLeft: 16;
+};
+export declare const getTypographyVariant: (theme: Theme, variant: TypographyVariantType) => {
+    fontSize: 48;
+    fontWeight: "600";
+    lineHeight: 56;
+    letterSpacing?: undefined;
+} | {
+    fontSize: 40;
+    fontWeight: "600";
+    lineHeight: 48;
+    letterSpacing?: undefined;
+} | {
+    fontSize: 32;
+    fontWeight: "600";
+    lineHeight: 40;
+    letterSpacing?: undefined;
+} | {
+    fontSize: 24;
+    fontWeight: "600";
+    lineHeight: 32;
+    letterSpacing?: undefined;
+} | {
+    fontSize: 20;
+    fontWeight: "600";
+    lineHeight: 28;
+    letterSpacing?: undefined;
+} | {
+    fontSize: 16;
+    fontWeight: "600";
+    lineHeight: 24;
+    letterSpacing?: undefined;
+} | {
+    fontSize: 14;
+    fontWeight: "600";
+    lineHeight: 20;
+    letterSpacing?: undefined;
+} | {
+    fontSize: 16;
+    fontWeight: "500";
+    lineHeight: 24;
+    letterSpacing?: undefined;
+} | {
+    fontSize: 14;
+    fontWeight: "500";
+    lineHeight: 20;
+    letterSpacing?: undefined;
+} | {
+    fontSize: 12;
+    fontWeight: "500";
+    lineHeight: 16;
+    letterSpacing?: undefined;
+} | {
+    fontSize: 12;
+    fontWeight: "600";
+    lineHeight: 16;
+    letterSpacing: 0.4;
+} | {
+    fontSize: 10;
+    fontWeight: "500";
+    lineHeight: 14;
+    letterSpacing?: undefined;
+} | {
+    fontSize: 10;
+    fontWeight: "600";
+    lineHeight: 12;
+    letterSpacing: 0.4;
+} | {
+    fontSize: 16;
+    fontWeight: "400";
+    lineHeight: 22;
+    letterSpacing?: undefined;
+} | {
+    fontSize: 14;
+    fontWeight: "400";
+    lineHeight: 20;
+    letterSpacing?: undefined;
+} | {
+    fontSize: 12;
+    fontWeight: "400";
+    lineHeight: 16;
+    letterSpacing?: undefined;
+} | {
+    fontSize: 12;
+    fontWeight: "600";
+    lineHeight: 16;
+    letterSpacing?: undefined;
+} | {
+    fontSize: 10;
+    fontWeight: "600";
+    lineHeight: 12;
+    letterSpacing: 0.5;
 };
 export {};
 //# sourceMappingURL=style.d.ts.map

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,QAAQ,CAAC;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AAExE,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;CAC/B;AAED,eAAO,MAAM,4BAA4B,0CAKtC,KAAK,2BAA2B,EAAE,SAAS,GAAG,OAAO,CAAC;;;;;;CAmBxD,CAAC;AAEF,eAAO,MAAM,wBAAwB,8EAOlC,KAAK,2BAA2B,EAAE,UAAU,CAAC;;;;;;;;;;CAqC/C,CAAC;AAEF,eAAO,MAAM,uBAAuB,yCAA0C,2BAA2B;;;;;;;;;;CAaxG,CAAC;AAEF,eAAO,MAAM,yBAAyB;WAQ7B,KAAK;eACD,OAAO;cACR,OAAO;aACR,GAAG,YAAY,EAAE;eACf,GAAG,SAAS,EAAE;;6BA0B1B,CAAC;AAEF,eAAO,MAAM,cAAc;cAUf,OAAO;WACV,KAAK;aACH,GAAG,YAAY,EAAE;UACpB,GAAG,SAAS,EAAE;WACb,MAAM;WACN,OAAO;;;;;;;;;;;;;;;;;;;CAoBf,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;;;;;;;;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"}

package/dist/type.d.ts

@@ -1,37 +1,126 @@
-import { ChangeEvent, ReactNode } from 'react';
-import { CSSProperties } from 'styled-components';
-import { BaseStyleConfigProps, TypographyStyleConfigProps, IFieldPrompt } from '@cleartrip/ct-design-types';
-export declare enum FieldVariant {
-    SM = "sm",
-    MD = "md"
-}
-export declare enum FieldType {
-    TEXT = "text",
-    NUMBER = "number",
-    PHONE = "phone"
+import { ReactElement, ReactNode } from 'react';
+import { Styles } from '@cleartrip/ct-design-types';
+import { TypographyStyleConfigProps, TypographyVariantType } from '@cleartrip/ct-design-typography';
+import { ICardFieldProps } from './variants/Card/type';
+import { IOtpFieldProps } from './variants/OTP/type';
+import { IPhoneField } from './variants/Phone/type';
+export interface IFieldPrompt {
+    message?: string | ReactNode;
+    Icon?: ReactNode;
+    hasError: boolean;
+}
+import { FieldVariant, FieldType } from './constants';
+export interface FieldChangeEvent {
+    target: {
+        value: string;
+        selectionStart: number;
+    };
+    currentTarget: IFieldRef;
+    preventDefault?: () => void;
+}
+export interface FieldSelectEvent {
+    target: {
+        value: string;
+        selectionStart: number;
+    };
+    currentTarget: IFieldRef;
+    preventDefault?: () => void;
+}
+export interface FieldFocusEvent {
+    target: {
+        value: string;
+    };
+    currentTarget: IFieldRef;
+    preventDefault?: () => void;
+}
+export interface FieldBlurEvent {
+    target: {
+        value: string;
+    };
+    currentTarget: IFieldRef;
+    preventDefault?: () => void;
+}
+export interface FieldPressInEvent {
+    target: {
+        value: string;
+    };
+    currentTarget: IFieldRef;
+    preventDefault?: () => void;
+}
+export interface FieldKeyDownEvent {
+    target: {
+        value: string;
+        key: string;
+    };
+    currentTarget: IFieldRef;
+    preventDefault?: () => void;
+}
+export interface IFieldRef {
+    focus: () => void;
+    blur: () => void;
+    setSelection: (start: number, end: number) => void;
 }
 export interface IFieldProps {
+    id?: string;
     placeholder?: string;
+    placeholderType?: 'default' | 'labeled' | 'floating';
     value: string;
-    prefix?: ReactNode;
-    suffix?: ReactNode;
+    prefix?: ReactElement<{
+        focus?: boolean;
+    }>;
+    suffix?: ReactElement<{
+        focus?: boolean;
+    }>;
+    prefixGap?: string;
+    suffixGap?: string;
     variant?: `${FieldVariant}`;
+    inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    autoFocus?: boolean;
+    autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters' | undefined;
     type?: `${FieldType}`;
     prompt?: IFieldPrompt;
-    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: FieldChangeEvent) => void;
+    onSelect?: (e: FieldSelectEvent) => void;
+    onFocus?: (e: FieldFocusEvent) => void;
+    onBlur?: (e: FieldBlurEvent) => void;
+    onPressIn?: (e: FieldPressInEvent) => void;
+    onKeyDown?: (e: FieldKeyDownEvent) => void;
     disabled?: boolean;
-    prefixGap?: string;
-    suffixGap?: string;
-    rootCss?: CSSProperties;
+    readOnly?: boolean;
+    showSoftInputOnFocus?: boolean;
+    cursorColor?: string;
+    maxLength?: number;
     styleConfig?: {
-        rootBox?: BaseStyleConfigProps;
-        fieldContainer?: BaseStyleConfigProps;
-        placeholderLabel?: BaseStyleConfigProps;
-        placeholderTypography?: TypographyStyleConfigProps;
-        field?: BaseStyleConfigProps;
-        promptBox?: BaseStyleConfigProps;
-        promptIconContainer?: BaseStyleConfigProps;
-        promptMessageTypography?: TypographyStyleConfigProps;
+        root?: Styles[];
+        fieldContainer?: Styles[];
+        field?: Styles[];
+        placeholder?: placeholderStyleConfig;
+        promptStyles?: promptStyleConfig;
+    };
+    fieldTypographyVariant?: TypographyVariantType;
+    selection?: {
+        start: number;
+        end?: number;
     };
+    customSpacingTop?: number;
+}
+interface promptStyleConfig {
+    promptBox?: Styles[];
+    promptIconContainer?: Styles[];
+    promptMessageTypography?: TypographyStyleConfigProps;
+}
+interface placeholderStyleConfig {
+    placeholderLabel?: Styles[];
+    placeholderTypography?: TypographyStyleConfigProps;
 }
+export type InputFieldProps = (IPhoneField & {
+    fieldType: 'phone';
+}) | (IOtpFieldProps & {
+    fieldType: 'otp';
+}) | (ICardFieldProps & {
+    fieldType: 'card';
+}) | (IFieldProps & {
+    fieldType?: 'default';
+});
+export {};
 //# sourceMappingURL=type.d.ts.map

package/dist/type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/Field/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE5G,oBAAY,YAAY;IACtB,EAAE,OAAO;IACT,EAAE,OAAO;CACV;AAED,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,WAAW;IAI1B,WAAW,CAAC,EAAE,MAAM,CAAC;IAIrB,KAAK,EAAE,MAAM,CAAC;IAKd,MAAM,CAAC,EAAE,SAAS,CAAC;IAKnB,MAAM,CAAC,EAAE,SAAS,CAAC;IAKnB,OAAO,CAAC,EAAE,GAAG,YAAY,EAAE,CAAC;IAK5B,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IAItB,MAAM,CAAC,EAAE,YAAY,CAAC;IAItB,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAIrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAInB,SAAS,CAAC,EAAE,MAAM,CAAC;IAInB,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,OAAO,CAAC,EAAE,aAAa,CAAC;IAIxB,WAAW,CAAC,EAAE;QAIZ,OAAO,CAAC,EAAE,oBAAoB,CAAC;QAI/B,cAAc,CAAC,EAAE,oBAAoB,CAAC;QAItC,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;QAIxC,qBAAqB,CAAC,EAAE,0BAA0B,CAAC;QAInD,KAAK,CAAC,EAAE,oBAAoB,CAAC;QAI7B,SAAS,CAAC,EAAE,oBAAoB,CAAC;QAIjC,mBAAmB,CAAC,EAAE,oBAAoB,CAAC;QAI3C,uBAAuB,CAAC,EAAE,0BAA0B,CAAC;KACtD,CAAC;CACH"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/Field/src/type.ts"],"names":[],"mappings":"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"}

package/dist/variants/Card/index.d.ts

@@ -0,0 +1,13 @@
+import { IFieldProps, IFieldRef } from '../../type';
+export interface ICursorRef {
+    cursorPos: number;
+    operation: string;
+}
+export declare enum CURSOR_OPERATION {
+    NONE = "NONE",
+    ADD = "ADD",
+    SUBSTRACT = "SUBSTRACT"
+}
+declare const CardField: import("react").ForwardRefExoticComponent<IFieldProps & import("react").RefAttributes<IFieldRef>>;
+export default CardField;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/components/Field/src/variants/Card/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoB,WAAW,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAKtE,MAAM,WAAW,UAAU;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,oBAAY,gBAAgB;IAC1B,IAAI,SAAS;IACb,GAAG,QAAQ;IACX,SAAS,cAAc;CACxB;AAWD,QAAA,MAAM,SAAS,mGAyDb,CAAC;AAIH,eAAe,SAAS,CAAC"}

package/dist/variants/Card/index.native.d.ts

@@ -0,0 +1,13 @@
+import { IFieldProps, IFieldRef } from '../../type';
+export interface ICursorRef {
+    cursorPos: number;
+    operation: string;
+}
+export declare enum CURSOR_OPERATION {
+    NONE = "NONE",
+    ADD = "ADD",
+    SUBSTRACT = "SUBSTRACT"
+}
+declare const CardField: import("react").ForwardRefExoticComponent<IFieldProps & import("react").RefAttributes<IFieldRef>>;
+export default CardField;
+//# sourceMappingURL=index.native.d.ts.map

package/dist/variants/Card/index.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../packages/components/Field/src/variants/Card/index.native.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAKpD,MAAM,WAAW,UAAU;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,oBAAY,gBAAgB;IAC1B,IAAI,SAAS;IACb,GAAG,QAAQ;IACX,SAAS,cAAc;CACxB;AAWD,QAAA,MAAM,SAAS,mGAcb,CAAC;AAIH,eAAe,SAAS,CAAC"}

package/dist/variants/Card/type.d.ts

@@ -0,0 +1,5 @@
+import { IFieldProps } from '../../type';
+export interface ICardFieldProps extends IFieldProps {
+    gap: number;
+}
+//# sourceMappingURL=type.d.ts.map

package/dist/variants/Card/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../packages/components/Field/src/variants/Card/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,GAAG,EAAE,MAAM,CAAC;CACb"}

package/dist/variants/OTP/index.d.ts

@@ -0,0 +1,4 @@
+import { IOtpFieldProps } from './type';
+declare const OtpField: React.FC<IOtpFieldProps>;
+export default OtpField;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/components/Field/src/variants/OTP/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAmHxC,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAgOtC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/variants/OTP/type.d.ts

@@ -0,0 +1,25 @@
+import { Styles } from '@cleartrip/ct-design-types';
+import { FieldFocusEvent, IFieldProps } from '../../type';
+type OtpFieldStyleConfig = {
+    otpBox?: Styles[];
+    otpRootInput?: Styles[];
+    otpRootContainer?: Styles[];
+} & IFieldProps['styleConfig'];
+export interface OtpFieldFocusEvent extends FieldFocusEvent {
+    target: {
+        value: string;
+        index: number;
+    };
+}
+interface OwnOtpFieldProps extends IFieldProps {
+    numberOfBoxes?: number;
+    onComplete?: (otp: string) => void;
+    refocus?: boolean;
+    maxLength?: number;
+}
+export type IOtpFieldProps = Omit<OwnOtpFieldProps, 'onFocus' | 'styleConfig'> & {
+    onFocus?: (e: OtpFieldFocusEvent) => void;
+    styleConfig?: OtpFieldStyleConfig;
+};
+export {};
+//# sourceMappingURL=type.d.ts.map

package/dist/variants/OTP/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../packages/components/Field/src/variants/OTP/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE1D,KAAK,mBAAmB,GAAG;IACzB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AACD,UAAU,gBAAiB,SAAQ,WAAW;IAE5C,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAGnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAIlB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,aAAa,CAAC,GAAG;IAC/E,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,mBAAmB,CAAC;CACnC,CAAC"}

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

@@ -0,0 +1,4 @@
+import { IPhoneFieldPrefix } from './type';
+declare const PhoneFieldPrefix: React.FC<IPhoneFieldPrefix>;
+export default PhoneFieldPrefix;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/components/Field/src/variants/Phone/Prefix/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAoD3C,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+BjD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/variants/Phone/Prefix/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../packages/components/Field/src/variants/Phone/Prefix/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,iBAAiB;IAIhC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAIrB,WAAW,EAAE,MAAM,CAAC;IAIpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAI3B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAI7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

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

@@ -0,0 +1,5 @@
+import { IFieldRef } from '../../type';
+import { IPhoneField } from './type';
+declare const PhoneField: import("react").ForwardRefExoticComponent<IPhoneField & import("react").RefAttributes<IFieldRef>>;
+export default PhoneField;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,5 @@
+import { IFieldRef } from '../../type';
+import { IPhoneField } from './type';
+declare const PhoneField: import("react").ForwardRefExoticComponent<IPhoneField & import("react").RefAttributes<IFieldRef>>;
+export default PhoneField;
+//# sourceMappingURL=index.native.d.ts.map

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

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

package/dist/variants/Phone/type.d.ts

@@ -0,0 +1,7 @@
+import { IFieldProps } from '../../type';
+import { IPhoneFieldPrefix } from './Prefix/type';
+export interface IPhoneField extends IFieldProps, IPhoneFieldPrefix {
+    max: number;
+    min: number;
+}
+//# sourceMappingURL=type.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../packages/components/Field/src/variants/Phone/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,iBAAiB;IAIjE,GAAG,EAAE,MAAM,CAAC;IAIZ,GAAG,EAAE,MAAM,CAAC;CACb"}

package/package.json

@@ -1,40 +1,52 @@
 {
   "name": "@cleartrip/ct-design-field",
-  "version": "4.0.0",
+  "version": "5.1.0",
   "description": "Field Component",
   "types": "dist/index.d.ts",
-  "main": "dist/ct-design-field.cjs.js",
+  "main": "./dist/ct-design-field.cjs.js",
   "jsnext:main": "dist/ct-design-field.esm.js",
+  "react-native": "src/index.ts",
   "module": "dist/ct-design-field.esm.js",
   "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/ct-design-field.esm.js",
+      "default": "./dist/ct-design-field.cjs.js"
+    }
+  },
   "browser": {
     "./dist/ct-design-field.esm.js": "./dist/ct-design-field.browser.esm.js",
     "./dist/ct-design-field.cjs.js": "./dist/ct-design-field.browser.cjs.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@cleartrip/ct-design-typography": "4.0.0",
-    "@cleartrip/ct-design-container": "4.0.0",
-    "@cleartrip/ct-design-types": "4.0.0",
-    "@cleartrip/ct-design-theme": "4.0.0",
-    "@cleartrip/ct-design-box": "4.0.0",
-    "@cleartrip/ct-design-outside-click-handler": "4.0.0",
-    "@cleartrip/ct-design-dotted-loader": "4.0.0",
-    "@cleartrip/ct-design-divider": "4.0.0",
-    "@cleartrip/ct-design-card": "4.0.0",
-    "@cleartrip/ct-design-common-utils": "4.0.0",
-    "@cleartrip/ct-design-common-constants": "4.0.0"
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@cleartrip/ct-design-typography": "5.1.0",
+    "@cleartrip/ct-design-container": "5.1.0",
+    "@cleartrip/ct-design-types": "5.1.0",
+    "@cleartrip/ct-design-box": "5.1.0",
+    "@cleartrip/ct-design-common-utils": "5.1.0",
+    "@cleartrip/ct-design-common-constants": "5.1.0",
+    "@cleartrip/ct-design-divider": "5.1.0",
+    "@cleartrip/ct-design-dotted-loader": "5.1.0",
+    "@cleartrip/ct-design-style-manager": "5.1.0",
+    "@cleartrip/ct-design-theme": "5.1.0",
+    "@cleartrip/ct-design-outside-click-handler": "5.1.0",
+    "@cleartrip/ct-design-card": "5.1.0",
+    "@cleartrip/ct-design-use-merge-refs": "5.1.0"
   },
   "devDependencies": {
-    "@cleartrip/ct-design-icons": "26.0.0",
-    "@cleartrip/ct-design-styles": "4.0.0"
+    "@emotion/babel-plugin": "^11.12.0",
+    "@cleartrip/ct-design-icons": "6.0.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "styled-components": "^5.3.6"
+    "react-dom": ">=16.8.0"
   },
   "publishConfig": {
     "access": "public"
@@ -45,6 +57,8 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch-package": "rollup -c -w",
     "build-package": "rollup -c",
-    "build-package:clean": "rm -rf dist && rollup -c"
+    "build-package:clean": "rm -rf dist && rollup -c",
+    "publish-package:local": "yalc publish --no-scripts",
+    "publish-package:local:registry": "pnpm publish --registry http://localhost:4873 --no-git-checks --access public"
   }
 }