@weareconceptstudio/account 0.2.6 → 0.2.8

package/dist/modules/account/AccountBalanceTemplate/HistoryBalance/ItemHistory/style.js

@@ -0,0 +1,144 @@
+import styled from 'styled-components';
+const ItemHistoryStyle = styled.div `
+	--account_min_item_distance_inner_category: var(--sp1x);
+	--account_activity_pad: var(--sp1x) var(--sp2x);
+	--account_radius_activity: var(--sp5x);
+	--account_distance_line: var(--sp4x) 0;
+	--account_mobile_distance_row_gap: var(--sp3x);
+
+	.inner-wrapper-info {
+		display: flex;
+		align-items: center;
+
+		> :nth-child(n) {
+			padding-right: var(--account_min_item_distance_inner_category);
+		}
+
+		> :first-child {
+			text-align: left;
+		}
+
+		> :last-child {
+			flex: 1;
+			text-align: right;
+			min-width: fit-content;
+			padding-right: 0px;
+		}
+	}
+
+	.line-info {
+		margin: var(--account_distance_line);
+	}
+
+	.activity-info-text {
+		background-color: var(--account_secondaryColor11);
+		padding: var(--account_activity_pad);
+		border-radius: var(--account_radius_activity);
+		width: fit-content;
+	}
+
+	.amount-info-text {
+		color: var(--account_secondaryColor12);
+
+		&.subtract {
+			color: var(--account_errorColor);
+		}
+	}
+
+	.mobile-amount-info-text,
+	.mobile-date-info-text {
+		display: none;
+	}
+
+	/* //! 1920 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_activity_pad: var(--sp1x) var(--sp2x);
+		--account_radius_activity: var(--sp5x);
+		--account_distance_line: var(--sp3x) 0 var(--sp2-5x);
+	}
+
+	/* //! 1510 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_activity_pad: var(--sp1x) var(--sp2x);
+		--account_radius_activity: var(--sp5x);
+		--account_distance_line: var(--sp3x) 0;
+	}
+
+	/* //! 1440 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_activity_pad: var(--sp1x) var(--sp2x);
+		--account_radius_activity: var(--sp5x);
+		--account_distance_line: var(--sp2-5x) 0;
+	}
+
+	/* //! 1280 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_activity_pad: var(--sp1x) var(--sp2x);
+		--account_radius_activity: var(--sp5x);
+		--account_distance_line: var(--sp2x) 0;
+	}
+
+	/* //! 1024 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_activity_pad: var(--sp0-5x) var(--sp1-5x);
+		--account_radius_activity: var(--sp5x);
+		--account_distance_line: var(--sp2x) 0;
+	}
+
+	/* //! 768 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_activity_pad: var(--sp0-5x) var(--sp1-5x);
+		--account_radius_activity: var(--sp5x);
+		--account_distance_line: var(--sp2x) 0;
+	}
+
+	/* //! mobile */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_activity_pad: var(--sp0-5x) var(--sp1x);
+		--account_radius_activity: var(--sp5x);
+		--account_distance_line: var(--sp2-5x) 0;
+		--account_min_item_distance_inner_category: var(--sp2x);
+
+		.mobile-amount-info-text,
+		.mobile-date-info-text {
+			display: inline-block;
+		}
+
+		.wrapper-activity-text {
+			display: flex;
+			justify-content: flex-end;
+		}
+
+		.inner-wrapper-info {
+			display: grid;
+			grid-template-columns: repeat(2, 0.5fr);
+			align-items: flex-start;
+			row-gap: var(--account_mobile_distance_row_gap);
+		}
+
+		.amount-info-text {
+			grid-area: 2/1/2/3;
+		}
+
+		.date-info-text {
+			font-weight: 400;
+		}
+
+		.inner-wrapper-info {
+			> :nth-child(n) {
+				padding-right: 0;
+				text-align: center;
+			}
+
+			> :first-child {
+				text-align: left;
+				padding-right: var(--account_min_item_distance_inner_category);
+			}
+
+			> :last-child {
+				text-align: left;
+			}
+		}
+	}
+`;
+export default ItemHistoryStyle;

package/dist/modules/account/AccountBalanceTemplate/HistoryBalance/index.d.ts

@@ -0,0 +1,3 @@
+export default HistoryBalance;
+declare function HistoryBalance(): React.JSX.Element;
+import React from 'react';

package/dist/modules/account/AccountBalanceTemplate/HistoryBalance/index.js

@@ -0,0 +1,42 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { api, Text, useTranslation } from '@weareconceptstudio/core';
+//* Styles
+import HistoryBalanceStyle from './style';
+//* Component
+import ItemHistory from './ItemHistory';
+import { Pagination } from '../../../../components';
+const dataCategoryName = ['balanceCategoryDate', 'balanceCategoryActivity', 'balanceCategoryAmount'];
+const HistoryBalance = () => {
+    const { translate, selectedLang } = useTranslation();
+    const [currentPage, setCurrentPage] = useState(1);
+    const [pagination, setPagination] = useState({
+        total: 0,
+        pageSize: 0,
+    });
+    const [data, setData] = useState();
+    const [loading, setLoading] = useState(true);
+    const getHistory = useCallback((page) => {
+        api.get({ url: 'balance-history', params: { page }, lang: selectedLang }).then((res) => {
+            setData(res.histories);
+            setPagination(res.pagination);
+            setLoading(false);
+        });
+    }, []);
+    useEffect(() => {
+        getHistory(currentPage);
+    }, [currentPage]);
+    return data && data.length ? (React.createElement(HistoryBalanceStyle, null,
+        React.createElement("div", { className: 'wrapper-title-section-history' },
+            React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-p account-p1 first-letter title-section-history', text: 'balanceRecentActivity' }),
+            React.createElement("div", { className: 'line-title' })),
+        React.createElement("div", { className: 'wrapper-history-container' },
+            React.createElement("div", { className: 'wrapper-history-category-title', id: 'history-category-title' }, dataCategoryName.map((item, i) => {
+                return (React.createElement(Text, { key: i, className: 'account-primary-color1 account-font-medium account-p account-p1 first-letter category-desktop-text' }, translate(item)));
+            })),
+            React.createElement("div", { className: 'wrapper-history-content' },
+                React.createElement("div", { className: 'line-info first-line' }),
+                data &&
+                    data.map((item, i) => (React.createElement(ItemHistory, { key: i, ...item }))),
+                React.createElement(Pagination, { activePageState: currentPage, ...pagination, onChange: (page) => setCurrentPage(page) }))))) : null;
+};
+export default HistoryBalance;

package/dist/modules/account/AccountBalanceTemplate/HistoryBalance/style.d.ts

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

package/dist/modules/account/AccountBalanceTemplate/HistoryBalance/style.js

@@ -0,0 +1,90 @@
+import styled from 'styled-components';
+const HistoryBalanceStyle = styled.section `
+	--account_distance_line_history_marginTB: var(--sp4x) 0 var(--sp3x);
+	--account_first_line_category_distance: var(--sp4x) 0 var(--sp4x);
+	--account_distance_pagination: var(--sp5x);
+
+	.wrapper-title-section-history {
+		.line-title {
+			width: 100%;
+			height: 2px;
+			background-color: var(--account_primaryColor1);
+			margin: var(--account_distance_line_history_marginTB);
+		}
+	}
+
+	.wrapper-history-category-title {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.line-info {
+		width: 100%;
+		height: 1px;
+		background-color: var(--account_primaryColor5);
+
+		&.first-line {
+			margin: var(--account_first_line_category_distance);
+		}
+	}
+
+	.pg-container {
+		justify-content: flex-end;
+		margin-top: var(--account_distance_pagination);
+	}
+
+	/* //! 1920 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_distance_line_history_marginTB: var(--sp3x) 0 var(--sp3x);
+		--account_first_line_category_distance: var(--sp3x) 0 var(--sp3x);
+		--account_distance_pagination: var(--sp5x);
+	}
+
+	/* //! 1510 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_distance_line_history_marginTB: var(--sp3x) 0 var(--sp3x);
+		--account_first_line_category_distance: var(--sp3x) 0 var(--sp3x);
+		--account_distance_pagination: var(--sp3x);
+	}
+
+	/* //! 1440 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_distance_line_history_marginTB: var(--sp3x) 0 var(--sp3x);
+		--account_first_line_category_distance: var(--sp3x) 0 var(--sp2-5x);
+		--account_distance_pagination: var(--sp4x);
+	}
+
+	/* //! 1280 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_distance_line_history_marginTB: var(--sp3x) 0 var(--sp3x);
+		--account_first_line_category_distance: var(--sp3x) 0 var(--sp2x);
+		--account_distance_pagination: var(--sp3x);
+	}
+
+	/* //! 1024 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_distance_line_history_marginTB: var(--sp3x) 0 var(--sp3x);
+		--account_first_line_category_distance: var(--sp3x) 0 var(--sp2x);
+		--account_distance_pagination: var(--sp3x);
+	}
+
+	/* //! 768 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_distance_line_history_marginTB: var(--sp3x) 0 var(--sp3x);
+		--account_first_line_category_distance: var(--sp3x) 0 var(--sp2x);
+		--account_distance_pagination: var(--sp3x);
+	}
+
+	/* //! mobile */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_distance_line_history_marginTB: var(--sp2x) 0 var(--sp3x);
+		--account_first_line_category_distance: 0;
+		--account_distance_pagination: var(--sp4x);
+
+		.wrapper-history-category-title,
+		.first-line {
+			display: none;
+		}
+	}
+`;
+export default HistoryBalanceStyle;

package/dist/modules/account/AccountBalanceTemplate/StatusBalance/ItemStatus/index.d.ts

@@ -0,0 +1,8 @@
+export default ItemStatus;
+declare function ItemStatus({ title, cashback, value, className }: {
+    title: any;
+    cashback: any;
+    value: any;
+    className: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/modules/account/AccountBalanceTemplate/StatusBalance/ItemStatus/index.js

@@ -0,0 +1,23 @@
+import { Text, useTranslation } from '@weareconceptstudio/core';
+import React from 'react';
+//* Helpers
+import { handlePriceCheckFunc } from '../../../../../utils/_functions';
+const ItemStatus = ({ title, cashback, value, className }) => {
+    const { translate } = useTranslation();
+    return (React.createElement("div", { className: `wrapper-item-status ${className}` },
+        React.createElement("div", { className: 'title' },
+            React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-p account-p3 first-letter title-status-progress' }, title)),
+        React.createElement("div", { className: 'circle-line' },
+            React.createElement("div", { className: 'circle' })),
+        React.createElement("div", { className: 'cashback' },
+            React.createElement(Text, { className: 'account-primary-color1 account-p account-p4 first-letter text-progress-cashback' },
+                cashback + '%',
+                " ",
+                translate('balanceCashback'))),
+        React.createElement("div", { className: 'value' },
+            React.createElement(Text, { className: 'account-primary-color1 account-p account-p4 first-letter text-progress-value' }, value ? (React.createElement(React.Fragment, null,
+                translate('balanceStarting'),
+                " ",
+                handlePriceCheckFunc(value, translate('priceValue')))) : (translate('balanceFirstOrderStatus'))))));
+};
+export default ItemStatus;

package/dist/modules/account/AccountBalanceTemplate/StatusBalance/index.d.ts

@@ -0,0 +1,6 @@
+export default StatusBalance;
+declare function StatusBalance({ allItem, activeStatus }: {
+    allItem: any;
+    activeStatus: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/modules/account/AccountBalanceTemplate/StatusBalance/index.js

@@ -0,0 +1,77 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Text, useUi } from '@weareconceptstudio/core';
+//* Styles
+import StatusBalanceStyle from './style';
+//* Component
+import ItemStatus from './ItemStatus';
+const StatusBalance = ({ allItem, activeStatus }) => {
+    const { winWidth } = useUi();
+    //! Refs
+    const wrapperStatusRef = useRef();
+    const resizableRefs = useRef();
+    const resizeTimeoutRef = useRef();
+    const statusActiveItem = useRef(false);
+    const styleRef = useRef();
+    const contentRef = useRef();
+    const outsideContentRef = useRef();
+    //! State
+    const [sizeLine, setSizeLine] = useState();
+    const [resize, setResize] = useState();
+    //! Resize logic
+    useEffect(() => {
+        const bodyElement = document.querySelector('body');
+        resizableRefs.current = new ResizeObserver((entries) => {
+            if (resizeTimeoutRef.current) {
+                clearTimeout(resizeTimeoutRef.current);
+            }
+            resizeTimeoutRef.current = setTimeout(() => {
+                setResize(entries[0].contentRect.height);
+            }, 300);
+        });
+        resizableRefs.current.observe(bodyElement);
+        return () => {
+            if (resizableRefs.current) {
+                resizableRefs.current.disconnect();
+            }
+        };
+    }, [winWidth]);
+    //! Calculate size range
+    useEffect(() => {
+        if (wrapperStatusRef.current && resize && styleRef.current) {
+            const allCircle = wrapperStatusRef.current.querySelectorAll('.circle-line');
+            const sizeCircleLeftRight = [...allCircle].map((item) => Math.floor(item.getBoundingClientRect().left));
+            const differences = sizeCircleLeftRight.slice(1).map((value, index) => Math.floor(value - (sizeCircleLeftRight[index] + allCircle[0].getBoundingClientRect().width)));
+            setSizeLine(differences);
+            if (parseInt(contentRef.current.style.width) < winWidth) {
+                contentRef.current.style.width = '100%';
+            }
+            //! dragging logic
+            const isLessThan253 = differences.some((number) => number < 253);
+            if (isLessThan253 && contentRef.current) {
+                contentRef.current.style.width = differences.length * 351 + 'px';
+            }
+        }
+        if (allItem.length) {
+            statusActiveItem.current = allItem.findIndex((item) => item.name?.toLowerCase() === activeStatus?.toLowerCase());
+        }
+    }, [resize, winWidth]);
+    return (React.createElement(StatusBalanceStyle, { ref: styleRef, className: 'account-progress-status-wrapper' },
+        React.createElement("div", { className: 'wrapper-title-section' },
+            React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-p account-p1 first-letter status-title-section-progress', text: 'balanceStatus' }),
+            React.createElement("div", { className: 'line-title' })),
+        React.createElement("div", { ref: outsideContentRef, className: 'outside-wrapper-content' },
+            React.createElement("div", { ref: contentRef, className: 'content-wrapper' },
+                React.createElement("div", { ref: wrapperStatusRef, className: 'wrapper-status' }, allItem.length &&
+                    statusActiveItem.current !== false &&
+                    allItem.map((item, i, arr) => {
+                        return (React.createElement(ItemStatus, { className: `${i == 0 ? 'start-item' : i == arr.length - 1 ? 'end-item' : ''} ${i <= statusActiveItem.current ? 'active-status' : ''}`, key: i, title: item.name, cashback: item.cashback, value: item.value }));
+                    })),
+                React.createElement("div", { className: 'wrapper-line-all' }, allItem.length &&
+                    statusActiveItem.current !== false &&
+                    sizeLine &&
+                    allItem.map((_, i, arr) => {
+                        return (i < arr.length - 1 && (React.createElement("div", { key: i, className: `line`, style: { width: sizeLine[i] + 'px' } },
+                            React.createElement("div", { className: `inner-line-background  ${i < statusActiveItem.current ? 'active-status' : ''}` }))));
+                    }))))));
+};
+export default StatusBalance;

package/dist/modules/account/AccountBalanceTemplate/StatusBalance/style.d.ts

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

package/dist/modules/account/AccountBalanceTemplate/StatusBalance/style.js

@@ -0,0 +1,234 @@
+import styled from 'styled-components';
+const StatusBalanceStyle = styled.div `
+	--account_line_size: calc(var(--sp1x) - var(--sp0-5x) / 2);
+	--account_progress_sizeCircle: var(--sp3x);
+	--account_line_border_radius: var(--sp1-5x);
+	--account_distance_line_marginTB: var(--sp4x) 0;
+	--account_distance_circle_marginT: var(--sp3x);
+	--account_distance_circle_marginB: var(--sp3x);
+	--account_cashback_distance_bottom: var(--sp2x);
+	--account_font_size_status_progress: var(--account_p4);
+	--account_line_height_status_progress: var(--account_lineHeightS);
+	--account_progress_inner_circle_size_pad: var(--sp0-5x);
+	--sizeInnerCircleP: 2px;
+	--account_distance_section_status: var(--sp7x);
+
+	margin-bottom: var(--account_distance_section_status);
+
+	.outside-wrapper-content {
+		width: 100%;
+		overflow: auto;
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+	}
+
+	.content-wrapper {
+		position: relative;
+	}
+
+	.wrapper-status {
+		display: flex;
+		justify-content: space-between;
+
+		.wrapper-item-status {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+
+			&.start-item {
+				align-items: flex-start;
+			}
+
+			&.end-item {
+				align-items: flex-end;
+			}
+
+			&.active-status {
+				.circle-line {
+					.circle {
+						&:before {
+							background-color: var(--account_secondaryColor9);
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.circle-line {
+		background-color: var(--account_secondaryColor10);
+		width: var(--account_progress_sizeCircle);
+		height: var(--account_progress_sizeCircle);
+		border-radius: 100%;
+		padding: var(--account_progress_inner_circle_size_pad);
+		margin-top: var(--account_distance_circle_marginT);
+		margin-bottom: var(--account_distance_circle_marginB);
+
+		.circle {
+			background-color: var(--account_backgroundColor);
+			width: 100%;
+			height: 100%;
+			border-radius: 100%;
+			position: relative;
+
+			&:before {
+				content: ' ';
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
+				width: calc(100% + var(--sizeInnerCircleP));
+				height: calc(100% + var(--sizeInnerCircleP));
+				border-radius: 100%;
+			}
+		}
+	}
+
+	.line {
+		height: var(--account_line_size);
+		background-color: transparent;
+		width: 100%;
+		padding: 0 var(--sp1x);
+		will-change: transform;
+
+		.inner-line-background {
+			background-color: var(--account_secondaryColor10);
+			width: 100%;
+			height: var(--account_line_size);
+			border-radius: var(--account_line_border_radius);
+
+			&.active-status {
+				background-color: var(--account_secondaryColor9);
+			}
+		}
+	}
+
+	.title-status-progress {
+		font-size: var(--account_font_size_status_progress);
+		line-height: var(--account_line_height_status_progress);
+		font-weight: 600;
+	}
+
+	.wrapper-line-all {
+		position: absolute;
+		top: calc(var(--account_font_size_status_progress) * var(--account_line_height_status_progress) + var(--account_progress_sizeCircle) / 2 - var(--account_line_size) / 2 + var(--account_distance_circle_marginT));
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		padding: 0 calc(var(--account_progress_sizeCircle));
+	}
+
+	.wrapper-title-section {
+		.line-title {
+			width: 100%;
+			height: 2px;
+			background-color: var(--account_primaryColor1);
+			margin: var(--account_distance_line_marginTB);
+		}
+	}
+
+	.cashback {
+		margin-bottom: var(--account_cashback_distance_bottom);
+	}
+
+	.text-progress-value {
+		color: var(--account_primaryColor5);
+	}
+
+	/* //! 1920 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_line_size: calc(var(--sp1x) - var(--sp0-5x) / 2);
+		--account_progress_sizeCircle: calc(var(--sp2x) + var(--sp0-5x) / 2);
+		--account_progress_inner_circle_size_pad: 4px;
+		--account_line_border_radius: var(--sp1-5x);
+		--account_distance_line_marginTB: var(--sp2-5x) 0 var(--sp4x);
+		--account_distance_circle_marginT: var(--sp1x);
+		--account_distance_circle_marginB: var(--sp1x);
+		--account_cashback_distance_bottom: var(--sp1x);
+		--account_distance_section_status: var(--sp10x);
+	}
+
+	/* //! 1510 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_line_size: var(--sp0-5x);
+		--account_progress_sizeCircle: calc(var(--sp2x) + var(--sp0-5x) / 2);
+		--account_progress_inner_circle_size_pad: 4px;
+		--account_line_border_radius: calc(var(--sp1x) + var(--sp0-5x) / 2);
+		--account_distance_line_marginTB: var(--sp3x) 0 var(--sp3x);
+		--account_distance_circle_marginT: var(--sp1x);
+		--account_distance_circle_marginB: var(--sp1x);
+		--account_cashback_distance_bottom: var(--sp1x);
+		--account_distance_section_status: var(--sp7x);
+	}
+
+	/* //! 1440 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_line_size: var(--sp0-5x);
+		--account_progress_sizeCircle: calc(var(--sp2x) + var(--sp0-5x) / 2);
+		--account_progress_inner_circle_size_pad: 4px;
+		--account_line_border_radius: calc(var(--sp1x) + var(--sp0-5x) / 2);
+		--account_distance_line_marginTB: var(--sp3x) 0 var(--sp3x);
+		--account_distance_circle_marginT: var(--sp2-5x);
+		--account_distance_circle_marginB: var(--sp1x);
+		--account_cashback_distance_bottom: var(--sp1x);
+		--account_distance_section_status: var(--sp7x);
+	}
+
+	/* //! 1280 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_line_size: var(--sp0-5x);
+		--account_progress_sizeCircle: calc(var(--sp2x) + var(--sp0-5x) / 2);
+		--account_progress_inner_circle_size_pad: 4px;
+		--account_line_border_radius: calc(var(--sp1x) + var(--sp0-5x) / 2);
+		--account_distance_line_marginTB: var(--sp3x) 0 var(--sp3x);
+		--account_distance_circle_marginT: var(--sp2-5x);
+		--account_distance_circle_marginB: var(--sp1x);
+		--account_cashback_distance_bottom: var(--sp1x);
+		--account_distance_section_status: var(--sp6x);
+	}
+
+	/* //! 1024 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_line_size: var(--sp0-5x);
+		--account_progress_sizeCircle: calc(var(--sp2x) + var(--sp0-5x) / 2);
+		--account_progress_inner_circle_size_pad: 4px;
+		--account_line_border_radius: calc(var(--sp1x) + var(--sp0-5x) / 2);
+		--account_distance_line_marginTB: var(--sp3x) 0 var(--sp3x);
+		--account_distance_circle_marginT: var(--sp2-5x);
+		--account_distance_circle_marginB: var(--sp1x);
+		--account_cashback_distance_bottom: var(--sp1x);
+		--account_distance_section_status: var(--sp8x);
+	}
+
+	/* //! 768 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_line_size: var(--sp0-5x);
+		--account_progress_sizeCircle: calc(var(--sp2x) + var(--sp0-5x) / 2);
+		--account_progress_inner_circle_size_pad: 4px;
+		--account_line_border_radius: calc(var(--sp1x) + var(--sp0-5x) / 2);
+		--account_distance_line_marginTB: var(--sp3x) 0 var(--sp3x);
+		--account_distance_circle_marginT: var(--sp2-5x);
+		--account_distance_circle_marginB: var(--sp1x);
+		--account_cashback_distance_bottom: var(--sp1x);
+		--account_distance_section_status: var(--sp8x);
+	}
+
+	/* //! mobile */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_line_size: calc(var(--sp0-5x) / 2);
+		--account_progress_sizeCircle: var(--sp2x);
+		--account_progress_inner_circle_size_pad: 2px;
+		--account_line_border_radius: calc(var(--sp1x) + var(--sp0-5x) / 2);
+		--account_distance_line_marginTB: var(--sp2x) 0 var(--sp1-5x);
+		--account_distance_circle_marginT: var(--sp2x);
+		--account_distance_circle_marginB: var(--sp1x);
+		--account_cashback_distance_bottom: var(--sp1x);
+		--sizeInnerCircleP: 0px;
+		--account_distance_section_status: var(--sp6x);
+	}
+`;
+export default StatusBalanceStyle;

package/dist/modules/account/AccountBalanceTemplate/index.d.ts

@@ -0,0 +1,7 @@
+export default AccountBalanceTemplate;
+declare function AccountBalanceTemplate({ iconValue, dataItem, className }: {
+    iconValue: any;
+    dataItem: any;
+    className: any;
+}): React.JSX.Element;
+import React from 'react';