@weareconceptstudio/account 0.0.0 → 0.0.1

package/dist/templates/AccountSettingsTemplate/AccountInfo/utils.js

@@ -0,0 +1,45 @@
+export const defaultDisplayFields = [
+    { label: 'First Name', value: 'first_name' },
+    { label: 'Last Name', value: 'last_name' },
+    { label: 'Phone', value: 'phone' },
+    { label: 'Email', value: 'email' },
+];
+export const defaultFormFields = [
+    {
+        fieldType: 'input',
+        labelProps: {
+            label: 'firstName',
+            name: 'first_name',
+        },
+        fieldProps: {
+            placeholder: 'firstNamePlaceholder',
+        },
+    },
+    {
+        fieldType: 'input',
+        labelProps: {
+            label: 'lastName',
+            name: 'last_name',
+        },
+        fieldProps: {
+            placeholder: 'lastNamePlaceholder',
+        },
+    },
+    {
+        fieldType: 'phone',
+        labelProps: {
+            label: 'Phone',
+            name: 'phone',
+        },
+    },
+    {
+        fieldType: 'input',
+        labelProps: {
+            label: 'Email',
+            name: 'email',
+        },
+        fieldProps: {
+            disabled: true,
+        },
+    },
+];

package/dist/templates/AccountSettingsTemplate/AccountPassword/index.d.ts

@@ -0,0 +1,15 @@
+export default AccountPassword;
+declare function AccountPassword({ formFields, onPasswordUpdate }: {
+    formFields?: {
+        fieldType: string;
+        labelProps: {
+            label: string;
+            name: string;
+        };
+        fieldProps: {
+            placeholder: string;
+        };
+    }[];
+    onPasswordUpdate: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/templates/AccountSettingsTemplate/AccountPassword/index.js

@@ -0,0 +1,36 @@
+import React, { useState, useCallback } from 'react';
+import { useUi, Text } from '@weareconceptstudio/core';
+import { FormBuilder } from '@weareconceptstudio/form';
+import { AccountButton, WarningMessageForPopup } from '../../../components';
+import AccountPasswordStyle from './style';
+import { defaultFormFields } from './utils';
+const AccountPassword = ({ formFields = defaultFormFields, onPasswordUpdate }) => {
+    const { openPopup } = useUi();
+    //! State
+    const [edit, setEdit] = useState(false);
+    //! Handle Popup
+    const handleSuccessPopup = useCallback(() => {
+        openPopup(React.createElement(WarningMessageForPopup, { title: 'yourSettingsHaveBeenSaved', description: 'yourPasswordHaveBeenChanged' }), { className: 'messagePopup' });
+    }, []);
+    //! On Finish
+    const onFinish = useCallback((values) => {
+        return onPasswordUpdate(values).then(() => {
+            setEdit(false);
+            handleSuccessPopup();
+        });
+    }, []);
+    return (React.createElement(AccountPasswordStyle, { className: `account-password` },
+        React.createElement(Text, { className: `account-p account-p1 account-font-bold account-primary-color1`, text: `password_title` }),
+        !edit ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: `info-item-wrap` },
+                React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: `password_` }),
+                "\u00A0",
+                React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1`, text: '****************' })),
+            React.createElement(AccountButton, { text: `edit`, btnType: `green-large-text`, onClick: () => setEdit(true) }))) : (React.createElement(FormBuilder, { formOptions: {
+                className: 'password-form-wrapper',
+            }, className: 'form-items-wrap', onSubmit: onFinish, fields: formFields },
+            React.createElement("div", { className: `cancel-and-save-and-apply-wrap` },
+                React.createElement(AccountButton, { text: `cancel`, btnType: `green-large-text`, onClick: () => setEdit(false) }),
+                React.createElement(AccountButton, { type: 'submit', text: `saveAndApply`, btnType: `full-width` }))))));
+};
+export default AccountPassword;

package/dist/templates/AccountSettingsTemplate/AccountPassword/style.d.ts

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

package/dist/templates/AccountSettingsTemplate/AccountPassword/style.js

@@ -0,0 +1,141 @@
+import styled from 'styled-components';
+const AccountPasswordStyle = styled.section `
+	--account_passwordColMTop: var(--sp3x);
+	--account_btnMTop: var(--sp5x);
+
+	--account_pasFormWrapperMTop: var(--sp5x);
+	--account_horizontalDistance: var(--sp5x);
+	--account_inputItemWidth: calc(50% - var(--account_horizontalDistance) / 2);
+	--account_cancelAndSaveAndApplyWrapMTop: var(--sp7x);
+	--account_cancelDistance: var(--sp5x);
+
+	.info-item-wrap {
+		display: flex;
+		align-items: center;
+		margin-top: var(--account_passwordColMTop);
+	}
+
+	.btn-wrap {
+		margin-top: var(--account_btnMTop);
+	}
+
+	form {
+		margin-top: var(--account_pasFormWrapperMTop);
+
+		.form-items-wrap {
+			display: flex;
+			flex-wrap: wrap;
+			row-gap: var(--account_horizontalDistance);
+			column-gap: var(--account_horizontalDistance);
+
+			.form-item {
+				width: var(--account_inputItemWidth);
+			}
+		}
+
+		.cancel-and-save-and-apply-wrap {
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			margin-top: var(--account_cancelAndSaveAndApplyWrapMTop);
+
+			.btn-wrap {
+				margin-top: 0;
+
+				&: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_passwordColMTop: var(--sp2x);
+		--account_btnMTop: var(--sp4x);
+
+		--account_pasFormWrapperMTop: var(--sp4x);
+		--account_horizontalDistance: var(--sp4x);
+		--account_cancelAndSaveAndApplyWrapMTop: var(--sp5x);
+		--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_passwordColMTop: var(--sp2x);
+		--account_btnMTop: var(--sp4x);
+
+		--account_pasFormWrapperMTop: var(--sp4x);
+		--account_horizontalDistance: var(--sp3x);
+		--account_cancelAndSaveAndApplyWrapMTop: var(--sp4x);
+		--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_passwordColMTop: var(--sp2x);
+		--account_btnMTop: var(--sp4x);
+
+		--account_pasFormWrapperMTop: var(--sp4x);
+		--account_horizontalDistance: var(--sp3x);
+		--account_cancelAndSaveAndApplyWrapMTop: var(--sp4x);
+		--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_passwordColMTop: var(--sp2x);
+		--account_btnMTop: var(--sp4x);
+
+		--account_pasFormWrapperMTop: var(--sp3x);
+		--account_horizontalDistance: var(--sp3x);
+		--account_cancelAndSaveAndApplyWrapMTop: 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_passwordColMTop: var(--sp1-5x);
+		--account_btnMTop: var(--sp2x);
+
+		--account_pasFormWrapperMTop: var(--sp3x);
+		--account_horizontalDistance: var(--sp3x);
+		--account_cancelAndSaveAndApplyWrapMTop: 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_passwordColMTop: var(--sp3x);
+		--account_btnMTop: var(--sp2x);
+
+		--account_pasFormWrapperMTop: var(--sp3x);
+		--account_horizontalDistance: var(--sp2x);
+		--account_cancelAndSaveAndApplyWrapMTop: var(--sp3x);
+		--account_cancelDistance: var(--sp2-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_passwordColMTop: var(--sp3x);
+		--account_btnMTop: var(--sp2x);
+
+		--account_pasFormWrapperMTop: var(--sp3x);
+		--account_horizontalDistance: var(--sp2x);
+		--account_inputItemWidth: 100%;
+
+		--account_cancelAndSaveAndApplyWrapMTop: var(--sp3x);
+		--account_cancelDistance: var(--sp2-5x);
+
+		form {
+			.cancel-and-save-and-apply-wrap {
+				flex-direction: column-reverse;
+
+				.btn-wrap {
+					&:nth-child(1) {
+						margin-right: 0;
+						margin-top: var(--sp2x);
+					}
+
+					&:nth-child(2) {
+						width: 100%;
+					}
+				}
+			}
+		}
+	}
+`;
+export default AccountPasswordStyle;

package/dist/templates/AccountSettingsTemplate/AccountPassword/utils.d.ts

@@ -0,0 +1,10 @@
+export const defaultFormFields: {
+    fieldType: string;
+    labelProps: {
+        label: string;
+        name: string;
+    };
+    fieldProps: {
+        placeholder: string;
+    };
+}[];

package/dist/templates/AccountSettingsTemplate/AccountPassword/utils.js

@@ -0,0 +1,22 @@
+export const defaultFormFields = [
+    {
+        fieldType: 'password',
+        labelProps: {
+            label: 'enterCurrentPassword',
+            name: 'current_password',
+        },
+        fieldProps: {
+            placeholder: 'enterCurrentPasswordPlaceholder',
+        },
+    },
+    {
+        fieldType: 'password',
+        labelProps: {
+            label: 'enterNewPassword',
+            name: 'password',
+        },
+        fieldProps: {
+            placeholder: 'enterNewPasswordPlaceholder',
+        },
+    },
+];

package/dist/templates/AccountSettingsTemplate/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface AccountSettingsProps {
+    user: object;
+    displayFields?: [];
+    accountFormFields?: [];
+    passwordFormFields?: [];
+    onAccountUpdate: () => Promise<any>;
+    onPasswordUpdate: () => Promise<any>;
+}
+declare const AccountSettingsTemplate: ({ user, onAccountUpdate, onPasswordUpdate, displayFields, accountFormFields, passwordFormFields }: AccountSettingsProps) => React.JSX.Element;
+export default AccountSettingsTemplate;

package/dist/templates/AccountSettingsTemplate/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import AccountInfo from './AccountInfo';
+import AccountPassword from './AccountPassword';
+import AccountSettingsTemplateStyle from './style';
+const AccountSettingsTemplate = ({ user, onAccountUpdate, onPasswordUpdate, displayFields, accountFormFields, passwordFormFields }) => {
+    return (React.createElement(AccountSettingsTemplateStyle, null,
+        React.createElement(AccountInfo, { user: user, onAccountUpdate: onAccountUpdate, displayFields: displayFields, formFields: accountFormFields }),
+        React.createElement(AccountPassword, { onPasswordUpdate: onPasswordUpdate, formFields: passwordFormFields })));
+};
+export default AccountSettingsTemplate;

package/dist/templates/AccountSettingsTemplate/style.d.ts

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

package/dist/templates/AccountSettingsTemplate/style.js

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+const AccountSettingsTemplateStyle = styled.section `
+	--account_accPasswordMTop: var(--sp16x);
+
+	.account-password {
+		margin-top: var(--account_accPasswordMTop);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_accPasswordMTop: var(--sp11x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_accPasswordMTop: var(--sp8x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_accPasswordMTop: var(--sp8x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_accPasswordMTop: var(--sp8x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_accPasswordMTop: var(--sp8x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_accPasswordMTop: var(--sp8x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_accPasswordMTop: var(--sp6x);
+	}
+`;
+export default AccountSettingsTemplateStyle;

package/dist/templates/AccountTemplate/index.d.ts

@@ -0,0 +1,8 @@
+export default AccountTemplate;
+declare function AccountTemplate({ isFullWidth, menu_options, children, onSignOut }: {
+    isFullWidth?: boolean;
+    menu_options?: any[];
+    children: any;
+    onSignOut: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/templates/AccountTemplate/index.js

@@ -0,0 +1,32 @@
+import React, { useMemo } from 'react';
+import { Text, Link, useUi, Page } from '@weareconceptstudio/core';
+//* Style
+import AccountStyle from './style';
+const AccountTemplate = ({ isFullWidth = false, menu_options = [], children, onSignOut }) => {
+    const { winWidth } = useUi();
+    //! Line Store
+    const lineStore = useMemo(() => {
+        if (winWidth < 1024) {
+            return React.createElement("div", { className: `space-line` });
+        }
+    }, [winWidth]);
+    return (React.createElement(Page, { className: 'account use-account' },
+        React.createElement(AccountStyle, null,
+            React.createElement("div", { className: 'account-wrap' },
+                React.createElement("aside", { className: 'sidebar' },
+                    React.createElement("div", { className: `sidebar-inner-wrap` },
+                        React.createElement("div", { className: `my-acc-wrap` },
+                            React.createElement(Text, { className: 'account-p account-p1 account-font-bold account-primary-color1', text: 'myAccount' }),
+                            React.createElement("div", { className: `account-line` })),
+                        React.createElement("div", { className: 'tabs-wrap' }, menu_options?.length > 0
+                            ? menu_options.map((item, index) => {
+                                return (React.createElement(Link, { key: index, href: item.url, className: 'link-item' },
+                                    React.createElement(Text, { tag: `span`, className: `account-p account-p1 account-font-bold sidebar-item`, text: item.name })));
+                            })
+                            : null),
+                        React.createElement(Text, { text: 'signOut', onClick: onSignOut, className: 'account-p account-p1 account-error-color account-font-bold sign-out' }))),
+                lineStore,
+                React.createElement("div", { className: `right-bar` },
+                    React.createElement("div", { className: `max-width-wrap ${isFullWidth ? 'full-max-width' : ''}` }, children))))));
+};
+export default AccountTemplate;

package/dist/templates/AccountTemplate/style.d.ts

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

package/dist/templates/AccountTemplate/style.js

@@ -0,0 +1,293 @@
+import styled from 'styled-components';
+const AccountStyle = styled.section `
+	--account_accountPadT: var(--sp8x);
+	--account_accountLineWidth: var(--sp5x);
+	--account_accountLineDistance: var(--sp3x);
+	--account_colDistance: var(--sp14x);
+	--account_sidebarWidth: 24.3%;
+	--account_rightBarWidth: calc(100% - var(--account_sidebarWidth));
+	--account_sideBarItemDistance: var(--sp3x);
+	--account_signOutMTop: var(--sp16x);
+
+	//! Individual Sizes
+	--account_backToListMBot: var(--sp7x);
+	--account_col50Width: 50%;
+	--account_col50Distance: var(--sp5x);
+
+	//! Sticky Size
+	--account_stickyMarTop: var(--sp12x);
+
+	--account_maxWidthWrapSize: 88.7%;
+
+	padding: 0 var(--account_contPaddingLR);
+	padding-top: var(--account_accountPadT);
+	padding-bottom: var(--account_sectionDistance);
+
+	.account-wrap {
+		display: flex;
+		flex-wrap: wrap;
+		margin-left: calc(-1 * calc(var(--account_colDistance) / 2));
+		margin-right: calc(-1 * calc(var(--account_colDistance) / 2));
+
+		.sidebar {
+			width: var(--account_sidebarWidth);
+			padding: 0 calc(var(--account_colDistance) / 2);
+
+			//! Sticky Styles
+			.sidebar-inner-wrap {
+				position: sticky;
+				top: calc(var(--account_accountPadT) + ${(props) => props.$headerHeight}px);
+			}
+
+			.my-acc-wrap {
+				.account-line {
+					width: var(--account_accountLineWidth);
+					border-bottom: 2px solid var(--account_primaryColor1);
+					margin: var(--account_accountLineDistance) 0;
+				}
+			}
+
+			.tabs-wrap {
+				display: flex;
+				flex-direction: column;
+
+				.link-item {
+					width: fit-content;
+
+					&:not(:last-child) {
+						margin-bottom: var(--account_sideBarItemDistance);
+					}
+
+					.sidebar-item {
+						color: var(--account_primaryColor3);
+						transition: color var(--account_trTime);
+					}
+
+					@media (hover: hover) {
+						&:hover {
+							&:not(&.active) {
+								.sidebar-item {
+									color: var(--account_primaryColor1);
+								}
+							}
+						}
+					}
+
+					&.active {
+						pointer-events: none;
+
+						.sidebar-item {
+							color: var(--account_primaryColor1);
+						}
+					}
+				}
+			}
+
+			.sign-out {
+				width: fit-content;
+				cursor: pointer;
+				margin-top: var(--account_signOutMTop);
+			}
+		}
+
+		.right-bar {
+			width: var(--account_rightBarWidth);
+			padding: 0 calc(var(--account_colDistance) / 2);
+			margin-top: var(--account_stickyMarTop);
+
+			.max-width-wrap {
+				width: 100%;
+				max-width: var(--account_maxWidthWrapSize);
+
+				&.full-max-width {
+					max-width: 100%;
+				}
+
+				//! Order History Individual Styles
+				.order-info-wrap {
+					.btn-wrap {
+						margin-bottom: var(--account_backToListMBot);
+					}
+
+					.details-shipping-billing-wrap {
+						display: flex;
+						flex-wrap: wrap;
+						margin-left: calc(-1 * calc(var(--account_col50Distance) / 2));
+						margin-right: calc(-1 * calc(var(--account_col50Distance) / 2));
+
+						.col-50 {
+							width: var(--account_col50Width);
+							padding: 0 calc(var(--account_col50Distance) / 2);
+						}
+					}
+				}
+			}
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_accountPadT: var(--sp5x);
+		--account_accountLineWidth: var(--sp3x);
+		--account_accountLineDistance: var(--sp2x);
+		--account_colDistance: var(--sp8x);
+		--account_sidebarWidth: 24.6%;
+		--account_sideBarItemDistance: var(--sp2x);
+		--account_signOutMTop: var(--sp11x);
+
+		--account_backToListMBot: var(--sp5x);
+		--account_col50Distance: var(--sp4x);
+
+		//! Sticky Size
+		--account_stickyMarTop: var(--sp9x);
+
+		--account_maxWidthWrapSize: 88.7%;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_accountPadT: var(--sp5x);
+		--account_accountLineWidth: var(--sp3x);
+		--account_accountLineDistance: var(--sp2x);
+		--account_colDistance: var(--sp8x);
+		--account_sidebarWidth: 24.3%;
+		--account_sideBarItemDistance: var(--sp2x);
+		--account_signOutMTop: var(--sp8x);
+
+		--account_backToListMBot: var(--sp4x);
+		--account_col50Distance: var(--sp3x);
+
+		//! Sticky Size
+		--account_stickyMarTop: var(--sp8x);
+
+		--account_maxWidthWrapSize: 88.5%;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_accountPadT: var(--sp4x);
+		--account_accountLineWidth: var(--sp3x);
+		--account_accountLineDistance: var(--sp2x);
+		--account_colDistance: var(--sp6x);
+		--account_sidebarWidth: 24.6%;
+		--account_sideBarItemDistance: var(--sp2x);
+		--account_signOutMTop: var(--sp7x);
+
+		--account_backToListMBot: var(--sp4x);
+		--account_col50Distance: var(--sp3x);
+
+		//! Sticky Size
+		--account_stickyMarTop: var(--sp8x);
+
+		--account_maxWidthWrapSize: 88.2%;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_accountPadT: var(--sp3x);
+		--account_accountLineWidth: var(--sp3x);
+		--account_accountLineDistance: var(--sp2x);
+		--account_colDistance: var(--sp6x);
+		--account_sidebarWidth: 24.5%;
+		--account_sideBarItemDistance: var(--sp2x);
+		--account_signOutMTop: var(--sp6x);
+
+		--account_backToListMBot: var(--sp5x);
+		--account_col50Distance: var(--sp3x);
+
+		//! Sticky Size
+		--account_stickyMarTop: var(--sp8x);
+
+		--account_maxWidthWrapSize: 88.6%;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_accountPadT: var(--sp3x);
+		--account_accountLineWidth: var(--sp3x);
+		--account_accountLineDistance: var(--sp1-5x);
+		--account_colDistance: var(--sp4x);
+		--account_sidebarWidth: 24.8%;
+		--account_sideBarItemDistance: var(--sp1-5x);
+		--account_signOutMTop: var(--sp5x);
+
+		--account_backToListMBot: var(--sp3x);
+		--account_col50Distance: var(--sp3x);
+
+		//! Sticky Size
+		--account_stickyMarTop: var(--sp6x);
+
+		--account_maxWidthWrapSize: 88.6%;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_accountPadT: var(--sp3x);
+		--account_accountLineWidth: var(--sp3x);
+		--account_accountLineDistance: var(--sp1-5x);
+		--account_colDistance: 0;
+		--account_sidebarWidth: 100%;
+		--account_rightBarWidth: 100%;
+		--account_sideBarItemDistance: var(--sp1-5x);
+		--account_signOutMTop: var(--sp3x);
+
+		--account_backToListMBot: var(--sp6x);
+		--account_col50Distance: var(--sp2x);
+
+		//! Sticky Size
+		--account_stickyMarTop: 0;
+
+		--account_maxWidthWrapSize: 100%;
+
+		padding: 0 0;
+		padding-top: var(--account_accountPadT);
+		padding-bottom: var(--account_sectionDistance);
+
+		.account-wrap {
+			.sidebar,
+			.right-bar {
+				padding: 0 var(--account_contPaddingLR);
+			}
+
+			.space-line {
+				width: 100%;
+				border-bottom: 1px solid var(--account_primaryColor5);
+				margin-top: var(--sp3x);
+				margin-bottom: var(--sp4x);
+			}
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_accountPadT: var(--sp2x);
+		--account_accountLineWidth: var(--sp3x);
+		--account_accountLineDistance: var(--sp1-5x);
+		--account_colDistance: 0;
+		--account_sidebarWidth: 100%;
+		--account_rightBarWidth: 100%;
+		--account_sideBarItemDistance: var(--sp1-5x);
+		--account_signOutMTop: var(--sp3x);
+
+		--account_backToListMBot: var(--sp4x);
+		--account_col50Distance: 0;
+		--account_col50Width: 100%;
+
+		//! Sticky Size
+		--account_stickyMarTop: 0;
+
+		--account_maxWidthWrapSize: 100%;
+
+		padding: 0 0;
+		padding-top: var(--account_accountPadT);
+		padding-bottom: var(--account_sectionDistance);
+
+		.account-wrap {
+			.sidebar,
+			.right-bar {
+				padding: 0 var(--account_contPaddingLR);
+			}
+
+			.space-line {
+				width: 100%;
+				border-bottom: 1px solid var(--account_primaryColor5);
+				margin-top: var(--sp2x);
+				margin-bottom: var(--sp4x);
+			}
+		}
+	}
+`;
+export default AccountStyle;