@weareconceptstudio/account 0.0.0 → 0.0.2

package/dist/components/SelectShippingBilling/style.js

@@ -0,0 +1,112 @@
+import styled from 'styled-components';
+const SelectShippingBillingAddressStyle = styled.section `
+	--account_selectAddressWrapMBot: var(--sp5x);
+	--account_itemDistance: var(--sp3x);
+	--account_cancelAndSaveWrapMTop: var(--sp5x);
+	--account_cancelDistance: var(--sp5x);
+
+	.select-address-wrap {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: var(--account_selectAddressWrapMBot);
+	}
+
+	.flex-wrapper {
+		display: flex;
+		flex-wrap: wrap;
+		margin-left: calc(-1 * calc(var(--account_itemDistance) / 2));
+		margin-right: calc(-1 * calc(var(--account_itemDistance) / 2));
+
+		.item-container {
+			&:not(:nth-child(1), :nth-child(2)) {
+				margin-top: var(--account_itemDistance) !important;
+			}
+		}
+	}
+
+	.cancel-and-save-wrap {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		margin-top: var(--account_cancelAndSaveWrapMTop);
+
+		.btn-wrap {
+			&:first-child {
+				margin-right: var(--account_cancelDistance);
+			}
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_selectAddressWrapMBot: var(--sp4x);
+		--account_itemDistance: var(--sp3x);
+		--account_cancelAndSaveWrapMTop: var(--sp4x);
+		--account_cancelDistance: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_itemDistance: var(--sp2x);
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_cancelDistance: 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_selectAddressWrapMBot: var(--sp3x);
+		--account_itemDistance: var(--sp2x);
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_cancelDistance: 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_selectAddressWrapMBot: var(--sp3x);
+		--account_itemDistance: var(--sp2x);
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_cancelDistance: var(--sp2-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_itemDistance: var(--sp2x);
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_cancelDistance: var(--sp2-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_itemDistance: var(--sp2x);
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_cancelDistance: var(--sp2-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_itemDistance: var(--sp2x);
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_cancelDistance: var(--sp2x);
+
+		.cancel-and-save-wrap {
+			flex-direction: column-reverse;
+
+			.btn-wrap {
+				&:first-child {
+					margin-right: 0;
+					margin-top: var(--account_cancelDistance);
+				}
+
+				&:last-child {
+					width: 100%;
+				}
+			}
+		}
+
+		.select-address-wrap {
+			.btn-wrap {
+				margin-top: var(--sp1x);
+			}
+		}
+	}
+`;
+export default SelectShippingBillingAddressStyle;

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

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

package/dist/components/Sequence/index.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Icon, Text } from '@weareconceptstudio/core';
+//* Style
+import SequenceStyle from './style';
+//* Icons
+const checkbox = (React.createElement("svg", { version: '1.1', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { d: 'M13.345 30.462c-1.062 0-1.859-0.531-2.39-1.328l-9.56-16.996c-0.797-1.328-0.266-2.921 1.062-3.718 1.328-0.531 2.921 0 3.718 1.328l7.436 13.012 12.481-20.183c0.797-1.328 2.39-1.593 3.718-0.797s1.593 2.39 0.797 3.718l-14.871 23.635c-0.531 0.797-1.328 1.328-2.39 1.328z' })));
+const Sequence = ({ step }) => {
+    return (React.createElement(SequenceStyle, null,
+        React.createElement("div", { className: `steps-container` }, step === 'shipping' ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: `step step-1 ${step}` },
+                React.createElement("div", { className: `circle-wrap` },
+                    React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-number`, text: 1 })),
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'shipping' }),
+                React.createElement("div", { className: `step-line` })),
+            React.createElement("div", { className: `step step-2` },
+                React.createElement("div", { className: `circle-wrap` },
+                    React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-number`, text: 2 })),
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'review' }),
+                React.createElement("div", { className: `step-line` })),
+            React.createElement("div", { className: `step step-3` },
+                React.createElement("div", { className: `circle-wrap` },
+                    React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-number`, text: 3 })),
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'payment' }),
+                React.createElement("div", { className: `step-line` })),
+            React.createElement("div", { className: `step step-4` },
+                React.createElement("div", { className: `circle-wrap` },
+                    React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-number`, text: 4 })),
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'confirmation' })))) : step === 'review' ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: `step step-1 ${step}` },
+                React.createElement("div", { className: `circle-wrap` }, checkbox),
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'shipping' }),
+                React.createElement("div", { className: `step-line` })),
+            React.createElement("div", { className: `step step-2 ${step}` },
+                React.createElement("div", { className: `circle-wrap` },
+                    React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-number`, text: 2 })),
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'review' }),
+                React.createElement("div", { className: `step-line` })),
+            React.createElement("div", { className: `step step-3` },
+                React.createElement("div", { className: `circle-wrap` },
+                    React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-number`, text: 3 })),
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'payment' }),
+                React.createElement("div", { className: `step-line` })),
+            React.createElement("div", { className: `step step-4` },
+                React.createElement("div", { className: `circle-wrap` },
+                    React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-number`, text: 4 })),
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'confirmation' })))) : (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: `step step-1 ${step}` },
+                React.createElement("div", { className: `circle-wrap` }, checkbox),
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'shipping' }),
+                React.createElement("div", { className: `step-line` })),
+            React.createElement("div", { className: `step step-2 ${step}` },
+                React.createElement("div", { className: `circle-wrap` }, checkbox),
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'review' }),
+                React.createElement("div", { className: `step-line` })),
+            React.createElement("div", { className: `step step-3 ${step}` },
+                React.createElement("div", { className: `circle-wrap` }, checkbox),
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'payment' }),
+                React.createElement("div", { className: `step-line` })),
+            React.createElement("div", { className: `step step-4 ${step}` },
+                React.createElement("div", { className: `circle-wrap` },
+                    React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-number`, text: 4 })),
+                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color4 step-text`, text: 'confirmation' })))))));
+};
+export default Sequence;

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

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

package/dist/components/Sequence/style.js

@@ -0,0 +1,317 @@
+import styled from 'styled-components';
+const SequenceStyle = styled.section `
+	--account_circleWrapSize: var(--sp5x);
+	--account_stepTextML: var(--sp1-5x);
+	--account_stepLineWidth: var(--sp8x);
+	--account_stepLineML: var(--sp1-5x);
+	--account_stepML: var(--sp1-5x);
+	--account_sequenceMB: var(--sp8x);
+
+	margin-bottom: var(--account_sequenceMB);
+
+	i {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		&:before {
+			font-size: var(--account_p4);
+		}
+	}
+
+	svg {
+		width: var(--account_p4);
+		height: var(--account_p4);
+	}
+
+	.steps-container {
+		display: flex;
+		flex-wrap: wrap;
+
+		.step {
+			display: flex;
+			align-items: center;
+
+			&:not(:last-child) {
+				margin-right: var(--account_stepML);
+			}
+
+			.circle-wrap {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: var(--account_circleWrapSize);
+				height: var(--account_circleWrapSize);
+				border: 2px solid var(--account_primaryColor4);
+				border-radius: 50%;
+			}
+
+			.step-text {
+				margin-left: var(--account_stepTextML);
+			}
+
+			.step-line {
+				width: var(--account_stepLineWidth);
+				border-bottom: 2px solid var(--account_primaryColor4);
+				margin-left: var(--account_stepLineML);
+			}
+		}
+
+		//! Step 1
+		.step-1 {
+			&.shipping {
+				.circle-wrap {
+					border: 2px solid var(--account_primaryColor1);
+					background-color: var(--account_primaryColor1);
+
+					.step-number {
+						color: var(--account_backgroundColor);
+					}
+				}
+
+				.step-text {
+					color: var(--account_primaryColor1);
+				}
+
+				.step-line {
+					border-bottom: 2px solid var(--account_primaryColor1);
+				}
+			}
+
+			&.review {
+				.circle-wrap {
+					border: 2px solid var(--account_primaryColor1);
+					background-color: var(--account_backgroundColor);
+
+					i {
+						&:before {
+							color: var(--account_primaryColor1);
+						}
+					}
+
+					svg {
+						fill: var(--account_primaryColor1);
+					}
+
+					.step-number {
+						color: var(--account_backgroundColor);
+					}
+				}
+
+				.step-text {
+					color: var(--account_primaryColor1);
+				}
+
+				.step-line {
+					border-bottom: 2px solid var(--account_primaryColor1);
+				}
+			}
+
+			&.confirmed {
+				.circle-wrap {
+					border: 2px solid var(--account_primaryColor1);
+					background-color: var(--account_backgroundColor);
+
+					i {
+						&:before {
+							color: var(--account_primaryColor1);
+						}
+					}
+
+					svg {
+						fill: var(--account_primaryColor1);
+					}
+
+					.step-number {
+						color: var(--account_backgroundColor);
+					}
+				}
+
+				.step-text {
+					color: var(--account_primaryColor1);
+				}
+
+				.step-line {
+					border-bottom: 2px solid var(--account_primaryColor1);
+				}
+			}
+		}
+
+		//! Step 2
+		.step-2 {
+			&.review {
+				.circle-wrap {
+					border: 2px solid var(--account_primaryColor1);
+					background-color: var(--account_primaryColor1);
+
+					.step-number {
+						color: var(--account_backgroundColor);
+					}
+				}
+
+				.step-text {
+					color: var(--account_primaryColor1);
+				}
+
+				.step-line {
+					border-bottom: 2px solid var(--account_primaryColor1);
+				}
+			}
+
+			&.confirmed {
+				.circle-wrap {
+					border: 2px solid var(--account_primaryColor1);
+					background-color: var(--account_backgroundColor);
+
+					i {
+						&:before {
+							color: var(--account_primaryColor1);
+						}
+					}
+
+					svg {
+						fill: var(--account_primaryColor1);
+					}
+
+					.step-number {
+						color: var(--account_backgroundColor);
+					}
+				}
+
+				.step-text {
+					color: var(--account_primaryColor1);
+				}
+
+				.step-line {
+					border-bottom: 2px solid var(--account_primaryColor1);
+				}
+			}
+		}
+
+		//! Step 3
+		.step-3 {
+			&.confirmed {
+				.circle-wrap {
+					border: 2px solid var(--account_primaryColor1);
+					background-color: var(--account_backgroundColor);
+
+					i {
+						&:before {
+							color: var(--account_primaryColor1);
+						}
+					}
+
+					svg {
+						fill: var(--account_primaryColor1);
+					}
+
+					.step-number {
+						color: var(--account_backgroundColor);
+					}
+				}
+
+				.step-text {
+					color: var(--account_primaryColor1);
+				}
+
+				.step-line {
+					border-bottom: 2px solid var(--account_primaryColor1);
+				}
+			}
+		}
+
+		//! Step 4
+		.step-4 {
+			&.confirmed {
+				.circle-wrap {
+					border: 2px solid var(--account_primaryColor1);
+					background-color: var(--account_primaryColor1);
+
+					.step-number {
+						color: var(--account_backgroundColor);
+					}
+				}
+
+				.step-text {
+					color: var(--account_primaryColor1);
+				}
+
+				.step-line {
+					border-bottom: 2px solid var(--account_primaryColor1);
+				}
+			}
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_circleWrapSize: var(--sp4x);
+		--account_stepTextML: var(--sp1-5x);
+		--account_stepLineWidth: var(--sp8x);
+		--account_stepLineML: var(--sp1-5x);
+		--account_stepML: var(--sp1x);
+		--account_sequenceMB: 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_circleWrapSize: var(--sp4x);
+		--account_stepTextML: var(--sp1-5x);
+		--account_stepLineWidth: var(--sp8x);
+		--account_stepLineML: var(--sp1-5x);
+		--account_stepML: var(--sp1x);
+		--account_sequenceMB: var(--sp5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_circleWrapSize: var(--sp4x);
+		--account_stepTextML: var(--sp1-5x);
+		--account_stepLineWidth: var(--sp8x);
+		--account_stepLineML: var(--sp1-5x);
+		--account_stepML: var(--sp1x);
+		--account_sequenceMB: var(--sp5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_circleWrapSize: var(--sp3x);
+		--account_stepTextML: var(--sp1-5x);
+		--account_stepLineWidth: var(--sp6x);
+		--account_stepLineML: var(--sp1-5x);
+		--account_stepML: var(--sp1x);
+		--account_sequenceMB: var(--sp5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_circleWrapSize: var(--sp3x);
+		--account_stepTextML: var(--sp1-5x);
+		--account_stepLineWidth: var(--sp6x);
+		--account_stepLineML: var(--sp1-5x);
+		--account_stepML: var(--sp1x);
+		--account_sequenceMB: var(--sp5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_circleWrapSize: var(--sp3x);
+		--account_stepTextML: var(--sp1-5x);
+		--account_stepLineWidth: var(--sp6x);
+		--account_stepLineML: var(--sp1-5x);
+		--account_stepML: var(--sp1x);
+		--account_sequenceMB: var(--sp4x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_circleWrapSize: var(--sp3x);
+		--account_stepTextML: var(--sp1x);
+		--account_stepLineWidth: var(--sp3x);
+		--account_stepLineML: var(--sp1x);
+		--account_stepML: var(--sp1x);
+		--account_sequenceMB: var(--sp4x);
+
+		.steps-container {
+			margin-top: calc(-1 * var(--sp1-5x));
+
+			.step {
+				margin-top: var(--sp1-5x);
+			}
+		}
+	}
+`;
+export default SequenceStyle;

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

@@ -0,0 +1,3 @@
+export default ShippingBillingForm;
+declare const ShippingBillingForm: React.NamedExoticComponent<object>;
+import React from 'react';

package/dist/components/ShippingBillingForm/index.js

@@ -0,0 +1,96 @@
+import React, { memo as Memo } from 'react';
+import { Text, useTranslation } from '@weareconceptstudio/core';
+import { Form, Input, PhoneNumber, Select } from '@weareconceptstudio/form';
+//* Style
+import ShippingBillingFormStyle from './style';
+//TODO: Global Data
+const globalData = {
+    countries: [],
+    cities: [],
+    regions: [
+        { value: 'yerevan', label: 'Yerevan' },
+        { value: 'shirak', label: 'Shirak' },
+        { value: 'aragatsotn', label: 'Aragatsotn' },
+        { value: 'lori', label: 'Lori' },
+        { value: 'kotayq', label: 'Kotayq' },
+        { value: 'tavush', label: 'Tavush' },
+        { value: 'vayots-dzor', label: 'Vayots Dzor' },
+        { value: 'syuniq', label: 'Syuniq' },
+        { value: 'ararat', label: 'Ararat' },
+        { value: 'armavir', label: 'Armavir' },
+        { value: 'gegharquniq', label: 'Gegharquniq' },
+    ],
+};
+const ShippingBillingForm = Memo(({ title, type, className, countryId, regionId, onChange, onSubmit, initialValues, formRef }) => {
+    const { translate } = useTranslation();
+    return (React.createElement(ShippingBillingFormStyle, { className: className || '' },
+        React.createElement(Text, { text: title, className: `account-p account-p2 account-font-bold account-primary-color1 title` }),
+        React.createElement(Form
+        // ref={formRef}
+        , { 
+            // ref={formRef}
+            onChange: onChange, onSubmit: onSubmit, initialValues: initialValues },
+            React.createElement("div", { className: `form-wrapper` },
+                React.createElement(Form.Item, { className: `disabled`, 
+                    // autocomplete='new-password'
+                    // name={[type, 'country_id']}
+                    name: 'country_id', label: 'country' },
+                    React.createElement(Select, { disabled: true, placeholder: 'Armenia' })),
+                React.createElement(Form.Item
+                // name={[type, 'type']}
+                , { 
+                    // name={[type, 'type']}
+                    name: 'type' },
+                    React.createElement(Input, { type: 'hidden' })),
+                React.createElement(Form.Item
+                // name={[type, 'first_name']}
+                , { 
+                    // name={[type, 'first_name']}
+                    name: 'first_name', label: 'firstName' },
+                    React.createElement(Input, { placeholder: 'firstNamePlaceholder' })),
+                React.createElement(Form.Item
+                // name={[type, 'last_name']}
+                , { 
+                    // name={[type, 'last_name']}
+                    name: 'last_name', label: 'lastName' },
+                    React.createElement(Input, { placeholder: 'lastNamePlaceholder' })),
+                React.createElement(Form.Item
+                // name={[type, 'region_id']}
+                , { 
+                    // name={[type, 'region_id']}
+                    name: 'region_id', label: 'region', className: !countryId ? 'disabled' : '' },
+                    React.createElement(Select, { placeholder: translate('regionPlaceholder'), options: globalData.regions })),
+                React.createElement(Form.Item
+                // name={[type, 'city_id']}
+                , { 
+                    // name={[type, 'city_id']}
+                    name: 'city_id', label: 'city' },
+                    React.createElement(Select, { placeholder: 'City', 
+                        // placeholder={translate('cityPlaceholder')}
+                        disabled: !regionId })),
+                React.createElement(Form.Item
+                // name={[type, 'address_1']}
+                , { 
+                    // name={[type, 'address_1']}
+                    name: 'address_1', label: 'address_1' },
+                    React.createElement(Input, { placeholder: 'address_1Placeholder' })),
+                React.createElement(Form.Item
+                // name={[type, 'address_2']}
+                , { 
+                    // name={[type, 'address_2']}
+                    name: 'address_2', label: 'address_2' },
+                    React.createElement(Input, { placeholder: 'address_2Placeholder' })),
+                React.createElement(Form.Item
+                // name={[type, 'zip_code']}
+                , { 
+                    // name={[type, 'zip_code']}
+                    name: 'zip_code', label: 'zipCode' },
+                    React.createElement(Input.Number, { placeholder: 'zipCodePlaceholder' })),
+                React.createElement(Form.Item
+                // name={[type, 'phone_number']}
+                , { 
+                    // name={[type, 'phone_number']}
+                    name: 'phone', label: 'phone' },
+                    React.createElement(PhoneNumber, null))))));
+});
+export default ShippingBillingForm;

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

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

package/dist/components/ShippingBillingForm/style.js

@@ -0,0 +1,77 @@
+import styled from 'styled-components';
+const ShippingBillingFormStyle = styled.div `
+	--account_titleMBot: var(--sp6x);
+	--account_antFormItemWidth: 50%;
+	--account_antFormItemMTop: var(--sp4x);
+	--account_formItemDistance: var(--sp5x);
+
+	.title {
+		margin-bottom: var(--account_titleMBot);
+	}
+
+	.form-wrapper {
+		display: flex;
+		flex-wrap: wrap;
+		margin-left: calc(-1 * calc(var(--account_formItemDistance) / 2));
+		margin-right: calc(-1 * calc(var(--account_formItemDistance) / 2));
+
+		.form-item {
+			width: var(--account_antFormItemWidth);
+			padding: 0 calc(var(--account_formItemDistance) / 2);
+
+			&:not(:nth-child(1), :nth-child(2)) {
+				margin-top: var(--account_antFormItemMTop);
+			}
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_titleMBot: var(--sp4x);
+		--account_antFormItemWidth: 50%;
+		--account_antFormItemMTop: var(--sp4x);
+		--account_formItemDistance: 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_titleMBot: var(--sp4x);
+		--account_antFormItemWidth: 50%;
+		--account_antFormItemMTop: var(--sp3x);
+		--account_formItemDistance: 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_titleMBot: var(--sp3x);
+		--account_antFormItemWidth: 50%;
+		--account_antFormItemMTop: var(--sp3x);
+		--account_formItemDistance: 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_titleMBot: var(--sp3x);
+		--account_antFormItemWidth: 50%;
+		--account_antFormItemMTop: var(--sp2-5x);
+		--account_formItemDistance: 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_titleMBot: var(--sp3x);
+		--account_antFormItemWidth: 50%;
+		--account_antFormItemMTop: var(--sp2-5x);
+		--account_formItemDistance: 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_titleMBot: var(--sp3x);
+		--account_antFormItemWidth: 50%;
+		--account_antFormItemMTop: var(--sp2-5x);
+		--account_formItemDistance: var(--sp2x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_titleMBot: var(--sp3x);
+		--account_antFormItemWidth: 100%;
+		--account_antFormItemMTop: var(--sp2x);
+		--account_formItemDistance: 0;
+	}
+`;
+export default ShippingBillingFormStyle;