@weareconceptstudio/account 0.0.0 → 0.0.1

package/dist/components/AddressItem/style.js

@@ -0,0 +1,191 @@
+import styled from 'styled-components';
+const AddressItemStyle = styled.section `
+	--account_itemWidth: 50%;
+	--account_itemBorderRadius: var(--sp1-5x);
+	--account_itemInternalWrapPad: var(--sp4x);
+	--account_smallMarginDistance: var(--sp1x);
+	--account_marginTopSize: var(--sp3x);
+	--account_verticalLineHeight: var(--sp2x);
+	--account_verticalDistance: var(--sp2x);
+	--account_changeAddressWrapMBot: var(--sp5x);
+	--account_circleSize: var(--sp4x);
+	--account_checkSize: var(--sp2x);
+
+	width: var(--account_itemWidth);
+	padding: 0 calc(var(--account_itemDistance) / 2);
+
+	&:nth-child(n + 3) {
+		margin-top: var(--account_itemDistance);
+	}
+
+	.item-internal-wrap {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		padding: var(--account_itemInternalWrapPad);
+		border: 2px solid var(--account_primaryColor5);
+		border-radius: var(--account_itemBorderRadius);
+		height: 100%;
+
+		.personal-data-wrap {
+			.col-wrap {
+				margin-top: var(--account_smallMarginDistance);
+			}
+		}
+
+		.margin-style {
+			margin-top: var(--account_marginTopSize);
+		}
+
+		.edit-remove-wrapper {
+			display: flex;
+			align-items: center;
+			margin-top: var(--account_marginTopSize);
+
+			.vertical-line {
+				width: 2px;
+				height: var(--account_verticalLineHeight);
+				background-color: var(--account_primaryColor3);
+				margin: 0 var(--account_verticalDistance);
+			}
+		}
+
+		//! Relative styles
+		.relative-wrapper {
+			position: relative;
+
+			.circle-selected-wrap {
+				position: absolute;
+				width: var(--account_circleSize);
+				height: var(--account_circleSize);
+				border-radius: 50%;
+				border: 2px solid var(--account_primaryColor5);
+				background-color: var(--account_backgroundColor);
+				top: 0;
+				right: 0;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				i {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+
+					&:before {
+						font-size: var(--account_checkSize);
+					}
+				}
+
+				.selected,
+				.note-selected {
+					color: var(--account_backgroundColor);
+				}
+
+				&.active {
+					border: 2px solid var(--account_primaryColor1);
+					background-color: var(--account_primaryColor1);
+				}
+
+				.checkbox-icon {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+
+					width: var(--account_checkSize);
+					height: var(--account_checkSize);
+					fill: var(--account_backgroundColor);
+				}
+			}
+		}
+	}
+
+	.change-address-wrap {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: var(--account_changeAddressWrapMBot);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_itemInternalWrapPad: var(--sp3x);
+		--account_verticalLineHeight: var(--sp1-5x);
+		--account_marginTopSize: var(--sp2x);
+		--account_changeAddressWrapMBot: var(--sp4x);
+		--account_circleSize: var(--sp3x);
+		--account_checkSize: var(--sp1-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_itemInternalWrapPad: var(--sp3x);
+		--account_smallMarginDistance: var(--sp0-5x);
+		--account_verticalLineHeight: var(--sp1-5x);
+		--account_verticalDistance: var(--sp1-5x);
+		--account_marginTopSize: var(--sp1-5x);
+		--account_changeAddressWrapMBot: var(--sp4x);
+		--account_circleSize: var(--sp3x);
+		--account_checkSize: var(--sp1-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_itemInternalWrapPad: var(--sp3x);
+		--account_smallMarginDistance: var(--sp0-5x);
+		--account_verticalLineHeight: var(--sp1-5x);
+		--account_verticalDistance: var(--sp1-5x);
+		--account_marginTopSize: var(--sp1-5x);
+		--account_changeAddressWrapMBot: var(--sp3x);
+		--account_circleSize: var(--sp3x);
+		--account_checkSize: var(--sp1-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_itemInternalWrapPad: var(--sp2x);
+		--account_smallMarginDistance: var(--sp0-5x);
+		--account_verticalLineHeight: var(--sp1-5x);
+		--account_verticalDistance: var(--sp1-5x);
+		--account_marginTopSize: var(--sp1x);
+		--account_changeAddressWrapMBot: var(--sp3x);
+		--account_circleSize: var(--sp2-5x);
+		--account_checkSize: var(--sp1x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_itemInternalWrapPad: var(--sp2x);
+		--account_smallMarginDistance: var(--sp0-5x);
+		--account_verticalLineHeight: var(--sp1-5x);
+		--account_verticalDistance: var(--sp1x);
+		--account_marginTopSize: var(--sp1x);
+		--account_changeAddressWrapMBot: var(--sp3x);
+		--account_circleSize: var(--sp2-5x);
+		--account_checkSize: var(--sp1x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_itemBorderRadius: var(--sp1x);
+		--account_itemInternalWrapPad: var(--sp2x);
+		--account_smallMarginDistance: var(--sp0-5x);
+		--account_verticalLineHeight: var(--sp1-5x);
+		--account_verticalDistance: var(--sp1x);
+		--account_marginTopSize: var(--sp1x);
+		--account_changeAddressWrapMBot: var(--sp3x);
+		--account_circleSize: var(--sp2-5x);
+		--account_checkSize: var(--sp1x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_itemInternalWrapPad: var(--sp1-5x);
+		--account_smallMarginDistance: var(--sp0-5x);
+		--account_verticalLineHeight: var(--sp1-5x);
+		--account_verticalDistance: var(--sp1x);
+		--account_itemWidth: 100%;
+		--account_marginTopSize: var(--sp1x);
+		--account_changeAddressWrapMBot: var(--sp2x);
+		--account_circleSize: var(--sp2-5x);
+		--account_checkSize: var(--sp1x);
+
+		&:nth-child(2) {
+			margin-top: var(--account_itemDistance);
+		}
+	}
+`;
+export default AddressItemStyle;

package/dist/components/CustomCheckbox/index.d.ts

@@ -0,0 +1,7 @@
+export default CustomCheckbox;
+declare function CustomCheckbox({ hide, setHide, isText }: {
+    hide: any;
+    setHide: any;
+    isText?: boolean;
+}): React.JSX.Element;
+import React from 'react';

package/dist/components/CustomCheckbox/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Text } from '@weareconceptstudio/core';
+//* Icons
+import { CheckboxCheckedIcon, CheckboxIcon } from '../../utils/icons';
+//* Style
+import CustomCheckboxStyle from './style';
+const CustomCheckbox = ({ hide, setHide, isText = true }) => {
+    return (React.createElement(CustomCheckboxStyle, { className: `${isText ? 'is-text' : ''}` },
+        React.createElement("div", { onClick: () => setHide(!hide), className: `custom-checkbox-wrap cursor-pointer` },
+            hide ? (React.createElement("div", { className: 'checkbox-wrap', role: 'button' },
+                React.createElement(CheckboxCheckedIcon, null))) : (React.createElement("div", { className: 'checkbox-wrap', role: 'button' },
+                React.createElement(CheckboxIcon, null))),
+            isText ? (React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 checkbox-text`, text: `useAlsoBillingAddress` })) : null)));
+};
+export default CustomCheckbox;

package/dist/components/CustomCheckbox/style.d.ts

@@ -0,0 +1,2 @@
+export default CustomCheckboxStyle;
+declare const CustomCheckboxStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/CustomCheckbox/style.js

@@ -0,0 +1,85 @@
+import styled from 'styled-components';
+const CustomCheckboxStyle = styled.div `
+	--account_checkboxWrapSize: var(--sp4x);
+	--account_checkboxWrapDistance: var(--sp2x);
+	--account_checkboxMarTopSize: var(--sp4x);
+
+	.custom-checkbox-wrap {
+		display: inline-flex;
+		align-items: center;
+
+		.checkbox-wrap {
+			display: flex;
+			align-items: center;
+
+			svg {
+				cursor: pointer;
+				width: var(--account_checkboxWrapSize);
+				height: var(--account_checkboxWrapSize);
+			}
+		}
+	}
+
+	.checkbox-text {
+		margin-left: var(--account_checkboxWrapDistance);
+	}
+
+	&.is-text {
+		margin-top: var(--account_checkboxMarTopSize);
+	}
+
+	.r-1 {
+		fill: var(--account_backgroundColor);
+	}
+
+	.r-2 {
+		fill: var(--account_primaryColor1);
+	}
+
+	.r-3 {
+		fill: var(--account_primaryColor4);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_checkboxWrapSize: var(--sp2-5x);
+		--account_checkboxWrapDistance: var(--sp2x);
+		--account_checkboxMarTopSize: var(--sp4x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_checkboxWrapSize: var(--sp3x);
+		--account_checkboxWrapDistance: var(--sp2x);
+		--account_checkboxMarTopSize: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_checkboxWrapSize: var(--sp3x);
+		--account_checkboxWrapDistance: var(--sp1-5x);
+		--account_checkboxMarTopSize: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_checkboxWrapSize: var(--sp2-5x);
+		--account_checkboxWrapDistance: var(--sp1x);
+		--account_checkboxMarTopSize: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_checkboxWrapSize: var(--sp2-5x);
+		--account_checkboxWrapDistance: var(--sp1x);
+		--account_checkboxMarTopSize: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_checkboxWrapSize: var(--sp2-5x);
+		--account_checkboxWrapDistance: var(--sp1x);
+		--account_checkboxMarTopSize: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_checkboxWrapSize: var(--sp2-5x);
+		--account_checkboxWrapDistance: var(--sp1x);
+		--account_checkboxMarTopSize: var(--sp3x);
+	}
+`;
+export default CustomCheckboxStyle;

package/dist/components/EmptyCart/index.d.ts

@@ -0,0 +1,5 @@
+export default EmptyCart;
+declare function EmptyCart({ shoppingUrl }: {
+    shoppingUrl: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/components/EmptyCart/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Text } from '@weareconceptstudio/core';
+//* Style
+import EmptyCartStyle from './style';
+//* Components
+import AccountButton from '../AccountButton';
+const EmptyCart = ({ shoppingUrl }) => {
+    return (React.createElement(EmptyCartStyle, null,
+        React.createElement("div", { className: `empty-cart-wrap` },
+            React.createElement(Text, { tag: `h4`, className: `account-h4 account-font-bold account-primary-color1`, text: `cartEmpty` }),
+            React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 description`, text: `cartEmptyDesc` }),
+            shoppingUrl ? (React.createElement(AccountButton, { btnType: 'purple-text', text: `shopNow`, url: shoppingUrl })) : null)));
+};
+export default EmptyCart;

package/dist/components/EmptyCart/style.d.ts

@@ -0,0 +1,2 @@
+export default EmptyCartStyle;
+declare const EmptyCartStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;

package/dist/components/EmptyCart/style.js

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+const EmptyCartStyle = styled.section `
+	--account_emptyCartWrapMaxWidth: var(--sp94x);
+	--account_descriptionMTop: var(--sp3x);
+	--account_btnWrapMTop: var(--sp7x);
+
+	.empty-cart-wrap {
+		max-width: var(--account_emptyCartWrapMaxWidth);
+		width: 100%;
+
+		.description {
+			margin-top: var(--account_descriptionMTop);
+		}
+
+		.btn-wrap {
+			margin-top: var(--account_btnWrapMTop);
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_emptyCartWrapMaxWidth: var(--sp51x);
+		--account_descriptionMTop: var(--sp2x);
+		--account_btnWrapMTop: var(--sp5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_emptyCartWrapMaxWidth: var(--sp55x);
+		--account_descriptionMTop: var(--sp2x);
+		--account_btnWrapMTop: var(--sp4x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_emptyCartWrapMaxWidth: var(--sp53x);
+		--account_descriptionMTop: var(--sp2x);
+		--account_btnWrapMTop: var(--sp4x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_emptyCartWrapMaxWidth: var(--sp48x);
+		--account_descriptionMTop: var(--sp2x);
+		--account_btnWrapMTop: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_emptyCartWrapMaxWidth: var(--sp43x);
+		--account_descriptionMTop: var(--sp2x);
+		--account_btnWrapMTop: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_emptyCartWrapMaxWidth: var(--sp43x);
+		--account_descriptionMTop: var(--sp2x);
+		--account_btnWrapMTop: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_emptyCartWrapMaxWidth: 100%;
+		--account_descriptionMTop: var(--sp1x);
+		--account_btnWrapMTop: var(--sp3x);
+	}
+`;
+export default EmptyCartStyle;

package/dist/components/EmptyOrders/index.d.ts

@@ -0,0 +1,3 @@
+export default EmptyOrders;
+declare const EmptyOrders: React.MemoExoticComponent<() => React.JSX.Element>;
+import React from 'react';

package/dist/components/EmptyOrders/index.js

@@ -0,0 +1,12 @@
+import React, { memo as Memo } from 'react';
+import { Text } from '@weareconceptstudio/core';
+//* Style
+import EmptyOrdersStyle from './style';
+//* Components
+import AccountButton from '../AccountButton';
+const EmptyOrders = Memo(() => {
+    return (React.createElement(EmptyOrdersStyle, null,
+        React.createElement(Text, { tag: `h6`, className: `account-h6 account-font-bold account-primary-color1`, text: `emptyTitle` }),
+        React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 description`, text: `emptyDesc` })));
+});
+export default EmptyOrders;

package/dist/components/EmptyOrders/style.d.ts

@@ -0,0 +1,2 @@
+export default EmptyOrdersStyle;
+declare const EmptyOrdersStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;

package/dist/components/EmptyOrders/style.js

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+const EmptyOrdersStyle = styled.section `
+	--account_descMTop: var(--sp3x);
+	--account_descMBot: var(--sp7x);
+
+	.description {
+		margin-top: var(--account_descMTop);
+		margin-bottom: var(--account_descMBot);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_descMTop: var(--sp2x);
+		--account_descMBot: var(--sp5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_descMTop: var(--sp2x);
+		--account_descMBot: var(--sp4x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_descMTop: var(--sp2x);
+		--account_descMBot: var(--sp4x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_descMTop: var(--sp2x);
+		--account_descMBot: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_descMTop: var(--sp1-5x);
+		--account_descMBot: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_descMTop: var(--sp1-5x);
+		--account_descMBot: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_descMTop: var(--sp1-5x);
+		--account_descMBot: var(--sp3x);
+	}
+`;
+export default EmptyOrdersStyle;

package/dist/components/FormInputCode/index.d.ts

@@ -0,0 +1,24 @@
+export default class ReactCodeInput extends React.Component<any, any, any> {
+    static defaultProps: {
+        type: string;
+        fields: number;
+        autoFocus: boolean;
+        disabled: boolean;
+        required: boolean;
+        placeholder: any[];
+    };
+    constructor(props: any);
+    state: {
+        values: any[];
+        autoFocusIndex: number;
+    };
+    iRefs: React.RefObject<any>[];
+    id: number;
+    __clearvalues__: () => void;
+    triggerChange: (values?: any[]) => void;
+    onChange: (e: any) => void;
+    onKeyDown: (e: any) => void;
+    onFocus: (e: any) => void;
+    render(): React.JSX.Element;
+}
+import React from 'react';

package/dist/components/FormInputCode/index.js

@@ -0,0 +1,145 @@
+import React, { Component } from 'react';
+//* Style
+import FormInputCodeStyle from './style';
+const KEY_CODE = {
+    backspace: 8,
+    left: 37,
+    up: 38,
+    right: 39,
+    down: 40,
+};
+export default class ReactCodeInput extends Component {
+    static defaultProps = {
+        type: 'number',
+        fields: 6,
+        autoFocus: true,
+        disabled: false,
+        required: false,
+        placeholder: [],
+    };
+    constructor(props) {
+        super(props);
+        const { fields, values } = props;
+        let vals;
+        let autoFocusIndex = 0;
+        if (values && values.length) {
+            vals = [];
+            for (let i = 0; i < fields; i++) {
+                vals.push(values[i] || '');
+            }
+            autoFocusIndex = values.length >= fields ? 0 : values.length;
+        }
+        else {
+            vals = Array(fields).fill('');
+        }
+        this.state = { values: vals, autoFocusIndex };
+        this.iRefs = [];
+        for (let i = 0; i < fields; i++) {
+            this.iRefs.push(React.createRef());
+        }
+        this.id = +new Date();
+    }
+    __clearvalues__ = () => {
+        const { fields } = this.props;
+        this.setState({ values: Array(fields).fill('') });
+        this.iRefs[0].current.focus();
+    };
+    triggerChange = (values = this.state.values) => {
+        const { onChange, onComplete, fields } = this.props;
+        const val = values.join('');
+        onChange && onChange(val);
+        if (onComplete && val.length >= fields) {
+            onComplete(val);
+        }
+    };
+    onChange = (e) => {
+        const index = parseInt(e.target.dataset.id);
+        if (this.props.type === 'number') {
+            e.target.value = e.target.value.replace(/[^\d]/gi, '');
+        }
+        if (e.target.value === '' || (this.props.type === 'number' && !e.target.validity.valid)) {
+            return;
+        }
+        const { fields } = this.props;
+        let next;
+        const value = e.target.value;
+        let { values } = this.state;
+        values = Object.assign([], values);
+        if (value.length > 1) {
+            let nextIndex = value.length + index - 1;
+            if (nextIndex >= fields) {
+                nextIndex = fields - 1;
+            }
+            next = this.iRefs[nextIndex];
+            const split = value.split('');
+            split.forEach((item, i) => {
+                const cursor = index + i;
+                if (cursor < fields) {
+                    values[cursor] = item;
+                }
+            });
+            this.setState({ values });
+        }
+        else {
+            next = this.iRefs[index + 1];
+            values[index] = value;
+            this.setState({ values });
+        }
+        if (next) {
+            next.current.focus();
+            next.current.select();
+        }
+        this.triggerChange(values);
+    };
+    onKeyDown = (e) => {
+        const index = parseInt(e.target.dataset.id);
+        const prevIndex = index - 1;
+        const nextIndex = index + 1;
+        const prev = this.iRefs[prevIndex];
+        const next = this.iRefs[nextIndex];
+        switch (e.keyCode) {
+            case KEY_CODE.backspace:
+                e.preventDefault();
+                const vals = [...this.state.values];
+                if (this.state.values[index]) {
+                    vals[index] = '';
+                    this.setState({ values: vals });
+                    this.triggerChange(vals);
+                }
+                else if (prev) {
+                    vals[prevIndex] = '';
+                    prev.current.focus();
+                    this.setState({ values: vals });
+                    this.triggerChange(vals);
+                }
+                break;
+            case KEY_CODE.left:
+                e.preventDefault();
+                if (prev) {
+                    prev.current.focus();
+                }
+                break;
+            case KEY_CODE.right:
+                e.preventDefault();
+                if (next) {
+                    next.current.focus();
+                }
+                break;
+            case KEY_CODE.up:
+            case KEY_CODE.down:
+                e.preventDefault();
+                break;
+            default:
+                break;
+        }
+    };
+    onFocus = (e) => {
+        e.target.select(e);
+    };
+    render() {
+        const { values, autoFocusIndex } = this.state;
+        const { autoFocus, className, type } = this.props;
+        return (React.createElement(FormInputCodeStyle, { className: `${className || ''}` },
+            React.createElement("div", { className: 'react-code-input-container' }, values.map((value, index) => (React.createElement("input", { autoComplete: 'on', type: type === 'number' ? 'tel' : type, pattern: type === 'number' ? '[0-9]*' : null, autoFocus: autoFocus && index === autoFocusIndex, key: `${this.id}-${index}`, "data-id": index, value: value, className: `input-item ${value ? 'completed' : ''}`, id: this.props.id ? `${this.props.id}-${index}` : null, ref: this.iRefs[index], onChange: this.onChange, onKeyDown: this.onKeyDown, onFocus: this.onFocus, disabled: this.props.disabled, required: this.props.required, placeholder: this.props.placeholder[index] }))))));
+    }
+}

package/dist/components/FormInputCode/style.d.ts

@@ -0,0 +1,2 @@
+export default FormInputCodeStyle;
+declare const FormInputCodeStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;