@weareconceptstudio/account 0.0.0 → 0.0.1

package/dist/styles/variables.js

@@ -0,0 +1,401 @@
+import { createGlobalStyle, css } from 'styled-components';
+const AccountVariables = createGlobalStyle `${css `
+	:root {
+		//! Fonts
+		--account_Font: ${(props) => `var(--${props.fontFamily})` || `var(--core_Font)`};
+
+		//! Transition
+		--account_trTime: 0.2s;
+
+		//! Line heights
+		--account_lineHeight: 1.5;
+		--account_lineHeightS: 1.3;
+
+		//! Primary Colors
+		--account_primaryColor1: ${(props) => props.theme.account.colors.account_primaryColor1};
+		--account_primaryColor2: ${(props) => props.theme.account.colors.account_primaryColor2};
+		--account_primaryColor3: ${(props) => props.theme.account.colors.account_primaryColor3};
+		--account_primaryColor4: ${(props) => props.theme.account.colors.account_primaryColor4};
+		--account_primaryColor5: ${(props) => props.theme.account.colors.account_primaryColor5};
+		--account_primaryColor6: ${(props) => props.theme.account.colors.account_primaryColor6};
+		--account_primaryColor7: ${(props) => props.theme.account.colors.account_primaryColor7};
+		--account_primaryColor8: ${(props) => props.theme.account.colors.account_primaryColor8};
+		--account_primaryColor9: ${(props) => props.theme.account.colors.account_primaryColor9};
+		--account_primaryColor10: ${(props) => props.theme.account.colors.account_primaryColor10};
+		--account_primaryColor11: ${(props) => props.theme.account.colors.account_primaryColor11};
+		--account_primaryColor12: ${(props) => props.theme.account.colors.account_primaryColor12};
+		--account_primaryColor13: ${(props) => props.theme.account.colors.account_primaryColor13};
+		--account_primaryColor14: ${(props) => props.theme.account.colors.account_primaryColor14};
+		--account_primaryColor15: ${(props) => props.theme.account.colors.account_primaryColor15};
+		--account_primaryColor16: ${(props) => props.theme.account.colors.account_primaryColor16};
+		--account_primaryColor17: ${(props) => props.theme.account.colors.account_primaryColor17};
+		--account_primaryColor18: ${(props) => props.theme.account.colors.account_primaryColor18};
+		--account_primaryColor19: ${(props) => props.theme.account.colors.account_primaryColor19};
+		--account_primaryColor20: ${(props) => props.theme.account.colors.account_primaryColor20};
+
+		//! Secondary Colors
+		--account_secondaryColor1: ${(props) => props.theme.account.colors.account_secondaryColor1};
+		--account_secondaryColor2: ${(props) => props.theme.account.colors.account_secondaryColor2};
+		--account_secondaryColor3: ${(props) => props.theme.account.colors.account_secondaryColor3};
+		--account_secondaryColor4: ${(props) => props.theme.account.colors.account_secondaryColor4};
+		--account_secondaryColor5: ${(props) => props.theme.account.colors.account_secondaryColor5};
+		--account_secondaryColor6: ${(props) => props.theme.account.colors.account_secondaryColor6};
+		--account_secondaryColor7: ${(props) => props.theme.account.colors.account_secondaryColor7};
+		--account_secondaryColor8: ${(props) => props.theme.account.colors.account_secondaryColor8};
+		--account_secondaryColor9: ${(props) => props.theme.account.colors.account_secondaryColor9};
+
+		//! Background Color
+		--account_backgroundColor: ${(props) => props.theme.account.colors.account_backgroundColor};
+
+		//! Error / Success Colors
+		--account_errorColor: ${(props) => props.theme.account.colors.account_errorColor};
+		--account_errorColorBg: ${(props) => props.theme.account.colors.account_errorColorBg};
+		--account_successColor: ${(props) => props.theme.account.colors.account_successColor};
+		--account_successColorBg: ${(props) => props.theme.account.colors.account_successColorBg};
+	}
+
+	/* //! 2560 */
+	@media only screen and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXL}) {
+		:root {
+			--account_h1: 128px;
+			--account_h2: 88px;
+			--account_h3: 64px;
+			--account_h4: 56px;
+			--account_h5: 48px;
+			--account_h6: 40px;
+			--account_p1: 32px;
+			--account_p2: 24px;
+			--account_p3: 20px;
+			--account_p4: 18px;
+			--account_p5: 12px;
+
+			//! Section distance
+			--account_sectionDistance: var(--sp23x);
+
+			//! Grid distance
+			--account_colPadding: var(--sp2-5x);
+
+			//! Container padding
+			--account_contPaddingLR: var(--sp14x);
+
+			//! Large icons size
+			--account_largeIconsSize: var(--sp9x);
+
+			//! Small icons size
+			--account_smallIconsSize: var(--sp2-5x);
+
+			//! Global error sizes
+			--account_globalErrorPad: var(--sp4x);
+			--account_errorItemMTop: var(--sp1-5x);
+			--account_globalErrorWrapMarTB: var(--sp7x);
+
+			//! Sidebar Small Image Width
+			--account_sidebarSmallImageWidth: 6.1718vw;
+
+			//! Header height size
+			--account_headerHeightSize: var(--sp14x);
+		}
+	}
+
+	/* //! 2559 - 1920 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		:root {
+			--account_h1: 96px;
+			--account_h2: 64px;
+			--account_h3: 56px;
+			--account_h4: 48px;
+			--account_h5: 40px;
+			--account_h6: 32px;
+			--account_p1: 24px;
+			--account_p2: 20px;
+			--account_p3: 16px;
+			--account_p4: 16px;
+			--account_p5: 10px;
+
+			//! Section distance
+			--account_sectionDistance: var(--sp20x);
+
+			//! Grid distance
+			--account_colPadding: var(--sp2x);
+
+			//! Container padding
+			--account_contPaddingLR: var(--sp11x);
+
+			//! Large icons size
+			--account_largeIconsSize: var(--sp8x);
+
+			//! Small icons size
+			--account_smallIconsSize: var(--sp2x);
+
+			//! Global error sizes
+			--account_globalErrorPad: var(--sp3x);
+			--account_errorItemMTop: var(--sp1x);
+			--account_globalErrorWrapMarTB: var(--sp5x);
+
+			//! Sidebar Small Image Width
+			--account_sidebarSmallImageWidth: 6.0416vw;
+
+			//! Header height size
+			--account_headerHeightSize: var(--sp11x);
+		}
+	}
+
+	/* //! 1910 - 1510 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		:root {
+			--account_h1: 80px;
+			--account_h2: 56px;
+			--account_h3: 48px;
+			--account_h4: 40px;
+			--account_h5: 32px;
+			--account_h6: 24px;
+			--account_p1: 20px;
+			--account_p2: 18px;
+			--account_p3: 16px;
+			--account_p4: 14px;
+			--account_p5: 10px;
+
+			//! Section distance
+			--account_sectionDistance: var(--sp16x);
+
+			//! Grid distance
+			--account_colPadding: var(--sp1-5x);
+
+			//! Container padding
+			--account_contPaddingLR: var(--sp8x);
+
+			//! Large icons size
+			--account_largeIconsSize: var(--sp7x);
+
+			//! Small icons size
+			--account_smallIconsSize: var(--sp1-5x);
+
+			//! Global error sizes
+			--account_globalErrorPad: var(--sp2-5x);
+			--account_errorItemMTop: var(--sp1-5x);
+			--account_globalErrorWrapMarTB: var(--sp4x);
+
+			//! Sidebar Small Image Width
+			--account_sidebarSmallImageWidth: 6.1589vw;
+
+			//! Header height size
+			--account_headerHeightSize: var(--sp11x);
+		}
+	}
+
+	/* //! 1509 - 1440 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		:root {
+			--account_h1: 72px;
+			--account_h2: 48px;
+			--account_h3: 40px;
+			--account_h4: 32px;
+			--account_h5: 24px;
+			--account_h6: 24px;
+			--account_p1: 20px;
+			--account_p2: 18px;
+			--account_p3: 16px;
+			--account_p4: 14px;
+			--account_p5: 10px;
+
+			//! Section distance
+			--account_sectionDistance: var(--sp15x);
+
+			//! Grid distance
+			--account_colPadding: var(--sp1-5x);
+
+			//! Container padding
+			--account_contPaddingLR: var(--sp7x);
+
+			//! Large icons size
+			--account_largeIconsSize: var(--sp7x);
+
+			//! Small icons size
+			--account_smallIconsSize: var(--sp1-5x);
+
+			//! Global error sizes
+			--account_globalErrorPad: var(--sp2x);
+			--account_errorItemMTop: var(--sp0-5x);
+			--account_globalErrorWrapMarTB: var(--sp4x);
+
+			//! Sidebar Small Image Width
+			--account_sidebarSmallImageWidth: 6.1111vw;
+
+			//! Header height size
+			--account_headerHeightSize: var(--sp10x);
+		}
+	}
+
+	/* //! 1439 - 1280 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		:root {
+			--account_h1: 64px;
+			--account_h2: 40px;
+			--account_h3: 32px;
+			--account_h4: 24px;
+			--account_h5: 20px;
+			--account_h6: 20px;
+			--account_p1: 20px;
+			--account_p2: 16px;
+			--account_p3: 16px;
+			--account_p4: 12px;
+			--account_p5: 8px;
+
+			//! Section distance
+			--account_sectionDistance: var(--sp13x);
+
+			//! Grid distance
+			--account_colPadding: var(--sp1-5x);
+
+			//! Container padding
+			--account_contPaddingLR: var(--sp5x);
+
+			//! Large icons size
+			--account_largeIconsSize: var(--sp6x);
+
+			//! Small icons size
+			--account_smallIconsSize: var(--sp1-5x);
+
+			//! Global error sizes
+			--account_globalErrorPad: var(--sp2x);
+			--account_errorItemMTop: var(--sp1x);
+			--account_globalErrorWrapMarTB: var(--sp3x);
+
+			//! Sidebar Small Image Width
+			--account_sidebarSmallImageWidth: 6.0937vw;
+
+			//! Header height size
+			--account_headerHeightSize: var(--sp8x);
+		}
+	}
+
+	/* //! 1279 - 1024 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		:root {
+			--account_h1: 56px;
+			--account_h2: 32px;
+			--account_h3: 28px;
+			--account_h4: 24px;
+			--account_h5: 20px;
+			--account_h6: 20px;
+			--account_p1: 18px;
+			--account_p2: 16px;
+			--account_p3: 16px;
+			--account_p4: 12px;
+			--account_p5: 8px;
+
+			//! Section distance
+			--account_sectionDistance: var(--sp12x);
+
+			//! Grid distance
+			--account_colPadding: var(--sp1-5x);
+
+			//! Container padding
+			--account_contPaddingLR: var(--sp4x);
+
+			//! Large icons size
+			--account_largeIconsSize: var(--sp6x);
+
+			//! Small icons size
+			--account_smallIconsSize: var(--sp1-5x);
+
+			//! Global error sizes
+			--account_globalErrorPad: var(--sp2x);
+			--account_errorItemMTop: var(--sp1x);
+			--account_globalErrorWrapMarTB: var(--sp3x);
+
+			//! Sidebar Small Image Width
+			--account_sidebarSmallImageWidth: auto;
+
+			//! Header height size
+			--account_headerHeightSize: var(--sp8x);
+		}
+	}
+
+	/* //! 1023 - 768 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		:root {
+			--account_h1: 56px;
+			--account_h2: 32px;
+			--account_h3: 28px;
+			--account_h4: 24px;
+			--account_h5: 20px;
+			--account_h6: 20px;
+			--account_p1: 18px;
+			--account_p2: 16px;
+			--account_p3: 16px;
+			--account_p4: 12px;
+			--account_p5: 8px;
+
+			//! Section distance
+			--account_sectionDistance: var(--sp12x);
+
+			//! Grid distance
+			--account_colPadding: var(--sp1x);
+
+			//! Container padding
+			--account_contPaddingLR: var(--sp4x);
+
+			//! Large icons size
+			--account_largeIconsSize: var(--sp6x);
+
+			//! Small icons size
+			--account_smallIconsSize: var(--sp1-5x);
+
+			//! Global error sizes
+			--account_globalErrorPad: var(--sp2x);
+			--account_errorItemMTop: var(--sp1x);
+			--account_globalErrorWrapMarTB: var(--sp3x);
+
+			//! Sidebar Small Image Width
+			--account_sidebarSmallImageWidth: auto;
+
+			//! Header height size
+			--account_headerHeightSize: var(--sp8x);
+		}
+	}
+
+	/* //! Mobile */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		:root {
+			--account_h1: 40px;
+			--account_h2: 32px;
+			--account_h3: 24px;
+			--account_h4: 24px;
+			--account_h5: 20px;
+			--account_h6: 20px;
+			--account_p1: 16px;
+			--account_p2: 16px;
+			--account_p3: 16px;
+			--account_p4: 12px;
+			--account_p5: 8px;
+
+			//! Section distance
+			--account_sectionDistance: var(--sp8x);
+
+			//! Grid distance
+			--account_colPadding: var(--sp1x);
+
+			//! Container padding
+			--account_contPaddingLR: var(--sp2x);
+
+			//! Large icons size
+			--account_largeIconsSize: var(--sp5x);
+
+			//! Small icons size
+			--account_smallIconsSize: var(--sp1-5x);
+
+			//! Global error sizes
+			--account_globalErrorPad: var(--sp2x);
+			--account_errorItemMTop: var(--sp1x);
+			--account_globalErrorWrapMarTB: var(--sp3x);
+
+			//! Sidebar Small Image Width
+			--account_sidebarSmallImageWidth: auto;
+
+			//! Header height size
+			--account_headerHeightSize: var(--sp8x);
+		}
+	}
+`}`;
+export default AccountVariables;

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

@@ -0,0 +1,38 @@
+export default AccountInfo;
+declare function AccountInfo({ user, onAccountUpdate, displayFields, formFields }: {
+    user: any;
+    onAccountUpdate: any;
+    displayFields?: {
+        label: string;
+        value: string;
+    }[];
+    formFields?: ({
+        fieldType: string;
+        labelProps: {
+            label: string;
+            name: string;
+        };
+        fieldProps: {
+            placeholder: string;
+            disabled?: undefined;
+        };
+    } | {
+        fieldType: string;
+        labelProps: {
+            label: string;
+            name: string;
+        };
+        fieldProps?: undefined;
+    } | {
+        fieldType: string;
+        labelProps: {
+            label: string;
+            name: string;
+        };
+        fieldProps: {
+            disabled: boolean;
+            placeholder?: undefined;
+        };
+    })[];
+}): React.JSX.Element;
+import React from 'react';

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

@@ -0,0 +1,37 @@
+import React, { useState, useCallback } from 'react';
+import { Text, useUi } from '@weareconceptstudio/core';
+import { FormBuilder } from '@weareconceptstudio/form';
+import { AccountButton, WarningMessageForPopup } from '../../../components';
+import AccountInfoStyle from './style';
+import { defaultDisplayFields, defaultFormFields } from './utils';
+const AccountInfo = ({ user, onAccountUpdate, displayFields = defaultDisplayFields, formFields = defaultFormFields }) => {
+    const { openPopup } = useUi();
+    //! State
+    const [edit, setEdit] = useState(false);
+    //! Handle Popup
+    const handleSuccessPopup = useCallback(() => {
+        openPopup(React.createElement(WarningMessageForPopup, { title: 'Testing success message title', description: 'Testing success message description' }), { className: 'messagePopup' });
+    }, []);
+    //! On Finish
+    const onFinish = useCallback((values) => {
+        return onAccountUpdate(values).then(() => {
+            setEdit(false);
+            handleSuccessPopup();
+        });
+    }, [edit]);
+    return (user && (React.createElement(AccountInfoStyle, { className: `account-info` },
+        React.createElement(Text, { text: `accountInformation`, className: `account-p account-p1 account-font-bold account-primary-color1` }),
+        !edit ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: `info-wrap` }, displayFields.map((displayField, index) => (React.createElement("div", { key: index, className: `info-item-wrap` },
+                React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: `${displayField.label}:` }),
+                "\u00A0",
+                React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1`, text: user[displayField.value] || '-' }))))),
+            React.createElement(AccountButton, { text: `edit`, btnType: `green-large-text`, onClick: () => setEdit(true) }))) : (React.createElement(React.Fragment, null,
+            React.createElement(FormBuilder, { fields: formFields, onSubmit: onFinish, className: 'form-items-wrap', formOptions: {
+                    initialValues: user,
+                } },
+                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 AccountInfo;

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

@@ -0,0 +1,2 @@
+export default AccountInfoStyle;
+declare const AccountInfoStyle: 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/AccountInfo/style.js

@@ -0,0 +1,165 @@
+import styled from 'styled-components';
+const AccountInfoStyle = styled.section `
+	--account_infoWrapMTop: var(--sp2x);
+	--account_infoItemWrapMTop: var(--sp1x);
+	--account_btnWrapMTop: var(--sp5x);
+
+	--account_accFormWrapperMTop: var(--sp5x);
+	--account_horizontalDistance: var(--sp5x);
+	--account_verticalDistance: var(--sp4x);
+	--account_inputItemWidth: calc(50% - var(--account_horizontalDistance) / 2);
+	--account_cancelAndSaveAndApplyWrapMTop: var(--sp7x);
+	--account_cancelDistance: var(--sp5x);
+
+	.info-wrap {
+		margin-top: var(--account_infoWrapMTop);
+
+		.info-item-wrap {
+			display: flex;
+			align-items: center;
+			margin-top: var(--account_infoItemWrapMTop);
+		}
+	}
+
+	.btn-wrap {
+		margin-top: var(--account_btnWrapMTop);
+	}
+
+	.empty-form-item {
+		width: var(--account_inputItemWidth);
+		padding: 0 calc(var(--account_horizontalDistance) / 2);
+	}
+
+	form {
+		margin-top: var(--account_accFormWrapperMTop);
+
+		.form-items-wrap {
+			display: flex;
+			flex-wrap: wrap;
+			row-gap: var(--account_verticalDistance);
+			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_infoWrapMTop: var(--sp2x);
+		--account_infoItemWrapMTop: var(--sp1x);
+		--account_btnWrapMTop: var(--sp4x);
+
+		--account_accFormWrapperMTop: var(--sp4x);
+		--account_horizontalDistance: var(--sp4x);
+		--account_verticalDistance: 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_infoWrapMTop: var(--sp2x);
+		--account_infoItemWrapMTop: var(--sp1x);
+		--account_btnWrapMTop: var(--sp4x);
+
+		--account_accFormWrapperMTop: var(--sp4x);
+		--account_horizontalDistance: var(--sp3x);
+		--account_verticalDistance: 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_infoWrapMTop: var(--sp2x);
+		--account_infoItemWrapMTop: var(--sp1x);
+		--account_btnWrapMTop: var(--sp4x);
+
+		--account_accFormWrapperMTop: var(--sp4x);
+		--account_horizontalDistance: var(--sp3x);
+		--account_verticalDistance: 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_infoWrapMTop: var(--sp2x);
+		--account_infoItemWrapMTop: var(--sp1x);
+		--account_btnWrapMTop: var(--sp3x);
+
+		--account_accFormWrapperMTop: var(--sp3x);
+		--account_horizontalDistance: var(--sp3x);
+		--account_verticalDistance: var(--sp2-5x);
+		--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_infoWrapMTop: var(--sp1-5x);
+		--account_infoItemWrapMTop: var(--sp1x);
+		--account_btnWrapMTop: var(--sp2x);
+
+		--account_accFormWrapperMTop: var(--sp3x);
+		--account_horizontalDistance: var(--sp3x);
+		--account_verticalDistance: var(--sp2-5x);
+		--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_infoWrapMTop: var(--sp3x);
+		--account_infoItemWrapMTop: var(--sp1x);
+		--account_btnWrapMTop: var(--sp2x);
+
+		--account_accFormWrapperMTop: var(--sp3x);
+		--account_horizontalDistance: var(--sp2x);
+		--account_verticalDistance: var(--sp2-5x);
+		--account_cancelAndSaveAndApplyWrapMTop: var(--sp3x);
+		--account_cancelDistance: var(--sp2-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_infoWrapMTop: var(--sp3x);
+		--account_infoItemWrapMTop: var(--sp1x);
+		--account_btnWrapMTop: var(--sp2x);
+
+		--account_accFormWrapperMTop: var(--sp3x);
+		--account_horizontalDistance: 0;
+		--account_verticalDistance: 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 AccountInfoStyle;

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

@@ -0,0 +1,32 @@
+export declare const defaultDisplayFields: {
+    label: string;
+    value: string;
+}[];
+export declare const defaultFormFields: ({
+    fieldType: string;
+    labelProps: {
+        label: string;
+        name: string;
+    };
+    fieldProps: {
+        placeholder: string;
+        disabled?: undefined;
+    };
+} | {
+    fieldType: string;
+    labelProps: {
+        label: string;
+        name: string;
+    };
+    fieldProps?: undefined;
+} | {
+    fieldType: string;
+    labelProps: {
+        label: string;
+        name: string;
+    };
+    fieldProps: {
+        disabled: boolean;
+        placeholder?: undefined;
+    };
+})[];