@weareconceptstudio/account 0.2.6 → 0.2.8

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

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import { api, useTranslation } from '@weareconceptstudio/core';
+//* Style
+import AccountBalanceTemplateStyle from './style';
+//* Component
+import HeroBalance from './HeroBalance';
+import HistoryBalance from './HistoryBalance';
+import StatusBalance from './StatusBalance';
+const AccountBalanceTemplate = ({ iconValue, dataItem, className }) => {
+    const { selectedLang } = useTranslation();
+    //! State
+    const [dataBalance, setDataBalance] = useState(false);
+    useEffect(() => {
+        api.get({ url: `balance`, lang: selectedLang }).then((data) => {
+            setDataBalance(data);
+        });
+    }, []);
+    return dataBalance ? (React.createElement(AccountBalanceTemplateStyle, { className: className || '' },
+        React.createElement(HeroBalance, { cashback: dataBalance.cashback, balance: dataBalance.balance, title: dataBalance.info.status, totalSpent: dataBalance.info.spent.current, nextStatusValue: dataBalance.info.spent.next, progress: dataBalance.info.timeline, nextStatusTitle: 'Resident', iconValue: iconValue, description: (() => {
+                if (dataItem) {
+                    const { description1, description2 } = dataItem.find((item) => item.name?.toLowerCase() === dataBalance.info.status?.toLowerCase()) || {};
+                    return { description1, description2 };
+                }
+                else {
+                    return false;
+                }
+            })() }),
+        React.createElement(StatusBalance, { activeStatus: dataBalance.info.status, allItem: dataItem }),
+        React.createElement(HistoryBalance, null))) : null;
+};
+export default AccountBalanceTemplate;

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

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

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+const AccountBalanceTemplateStyle = styled.section `
+	/* //! 1920 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+	}
+
+	/* //! 1510 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+	}
+
+	/* //! 1440 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+	}
+
+	/* //! 1280 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+	}
+
+	/* //! 1024 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+	}
+
+	/* //! 768 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+	}
+
+	/* //! mobile */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+	}
+`;
+export default AccountBalanceTemplateStyle;

package/dist/modules/account/AccountTemplate/style.js

@@ -57,11 +57,13 @@ const AccountStyle = styled.section `
 						transition: color var(--account_trTime) ease-out;
 					}
 
-					@media (hover: hover) {
-						&:hover {
-							&:not(&.active) {
-								.sidebar-item {
-									color: var(--account_primaryColor1);
+					@media (pointer: fine) {
+						@media (hover: hover) {
+							&:hover {
+								&:not(&.active) {
+									.sidebar-item {
+										color: var(--account_primaryColor1);
+									}
 								}
 							}
 						}

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

@@ -1,2 +1,3 @@
 export { default as AccountTemplate } from './AccountTemplate';
 export { default as AccountSettingsTemplate } from './AccountSettingsTemplate';
+export { default as AccountBalanceTemplate } from './AccountBalanceTemplate';

package/dist/modules/account/index.js

@@ -1,2 +1,3 @@
 export { default as AccountTemplate } from './AccountTemplate';
 export { default as AccountSettingsTemplate } from './AccountSettingsTemplate';
+export { default as AccountBalanceTemplate } from './AccountBalanceTemplate';

package/dist/modules/auth/ForgotPasswordTemplate/index.js

@@ -1,15 +1,16 @@
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 import { Text, Link, Page } from '@weareconceptstudio/core';
 import { Form, Input } from '@weareconceptstudio/form';
-import { AccountButton, WarningMessage } from '../../../components';
+import { AccountButton } from '../../../components';
 import ForgotPasswordTemplateStyle from './style';
 import { useAccountContext } from '../../../AccountProvider';
+import AccountContainer from '../../../components/AccountContainer';
 const ForgotPasswordTemplate = ({ signInUrl = '/sign-in' }) => {
     //! Context
     const { useUser } = useAccountContext();
     const { forgotPassword } = useUser();
     //! Ref
-    const tryAgainTimeout = useRef(null);
+    // const tryAgainTimeout = useRef(null);
     //! State
     const [forgotState, setForgotState] = useState({
         isSuccess: false,
@@ -30,58 +31,74 @@ const ForgotPasswordTemplate = ({ signInUrl = '/sign-in' }) => {
             }));
         });
     };
+    // const handleTryAgain = () => {
+    // 	setForgotState((prev) => ({
+    // 		...prev,
+    // 		error: '',
+    // 		isBtnDisabled: true,
+    // 	}));
+    // 	// @ts-ignore
+    // 	tryAgainTimeout.current = setTimeout(() => {
+    // 		setForgotState((prev) => ({
+    // 			...prev,
+    // 			isSent: false,
+    // 			isBtnDisabled: false,
+    // 		}));
+    // 	}, 60000);
+    // 	return (
+    // 		!forgotState.isBtnDisabled &&
+    // 		onFormSubmit({ email: forgotState.email })
+    // 			.then(() => {
+    // 				setForgotState((prev) => ({
+    // 					...prev,
+    // 					isSent: true,
+    // 				}));
+    // 			})
+    // 			.catch((err) => {
+    // 				setForgotState((prev) => ({
+    // 					...prev,
+    // 					isBtnDisabled: true,
+    // 					error: err.data.errors.email[0],
+    // 				}));
+    // 				tryAgainTimeout.current && clearTimeout(tryAgainTimeout.current);
+    // 			})
+    // 	);
+    // };
     const handleTryAgain = () => {
         setForgotState((prev) => ({
             ...prev,
-            error: '',
-            isBtnDisabled: true,
+            isSuccess: !prev.isSuccess,
         }));
-        // @ts-ignore
-        tryAgainTimeout.current = setTimeout(() => {
-            setForgotState((prev) => ({
-                ...prev,
-                isSent: false,
-                isBtnDisabled: false,
-            }));
-        }, 60000);
-        return (!forgotState.isBtnDisabled &&
-            onFormSubmit({ email: forgotState.email })
-                .then(() => {
-                setForgotState((prev) => ({
-                    ...prev,
-                    isSent: true,
-                }));
-            })
-                .catch((err) => {
-                setForgotState((prev) => ({
-                    ...prev,
-                    isBtnDisabled: true,
-                    error: err.data.errors.email[0],
-                }));
-                tryAgainTimeout.current && clearTimeout(tryAgainTimeout.current);
-            }));
     };
-    return (React.createElement(Page, { className: 'forgot-password use-account' },
-        React.createElement(ForgotPasswordTemplateStyle, null,
-            React.createElement("div", { className: `forgot-password-wrapper` }, !forgotState.isSuccess ? (React.createElement(React.Fragment, null,
+    return (React.createElement(Page, { className: `forgot-password use-account ${forgotState.isSuccess ? 'success' : ''}` },
+        React.createElement(ForgotPasswordTemplateStyle, { className: 'forget-password-style' },
+            React.createElement("div", { className: 'forgot-password-wrapper' }, !forgotState.isSuccess ? (React.createElement("div", { className: `forgot-password-wrapper-form` },
                 React.createElement(Text, { tag: 'h1', className: 'account-h2 account-font-bold account-primary-color1 title', text: 'forgotPassword' }),
                 React.createElement(Text, { className: 'account-p account-p2 account-font-regular account-primary-color1 description', text: 'forgotPasswordDescription' }),
-                React.createElement(Form, { onSubmit: handleFormFinish },
+                React.createElement(Form, { onSubmit: handleFormFinish, initialValues: {
+                        ...(forgotState.email ? { email: forgotState.email } : {}),
+                    } },
                     React.createElement(Form.Item, { name: 'email', label: 'email', rules: [{ type: 'email' }] },
-                        React.createElement(Input, { placeholder: 'emailPlaceholder' })),
+                        React.createElement(Input
+                        // @ts-ignore
+                        , { 
+                            // @ts-ignore
+                            placeholder: 'emailPlaceholder' })),
                     React.createElement("div", { className: 'loginExternalBlock' },
                         React.createElement(Link, { href: signInUrl },
                             React.createElement(Text, { tag: 'span', className: 'account-p account-p3 account-font-medium account-primary-color1 underline login-external', text: 'login' }))),
-                    React.createElement(AccountButton, { text: `submit`, type: `submit`, btnType: `full-width` })))) : (React.createElement(React.Fragment, null,
-                React.createElement(Text, { tag: 'h2', className: 'account-h2 account-font-bold account-primary-color1 title', text: 'thankYou' }),
-                React.createElement("div", { className: 'recovery-wrap' },
-                    React.createElement(Text, { className: 'account-p account-p2 account-font-medium account-primary-color1 recovery-text', text: 'recoveryText' }),
-                    "\u00A0",
-                    React.createElement(Text, { className: 'account-p account-p2 account-font-bold account-primary-color1 recovery-email', text: forgotState.email })),
-                React.createElement("div", { className: 'try-again-wrap' },
-                    React.createElement(Text, { className: `account-p account-p2 account-font-medium account-primary-color1 try-text`, text: `tryAgainText` }),
-                    "\u00A0",
-                    React.createElement(Text, { text: `tryAgain`, onClick: handleTryAgain, className: `account-p account-p2 account-font-bold account-primary-color1 underline try-again-text ${forgotState.isBtnDisabled ? 'disabled' : ''}` })),
-                React.createElement(WarningMessage, { error: forgotState.error, errorSubtitle: 'forgotErrorDescription', isSent: forgotState.isSent, successTitle: 'recoverPassword', successSubtitle: 'recoverPasswordDesc' })))))));
+                    React.createElement(AccountButton, { text: `submit`, type: `submit`, btnType: `full-width` })))) : (React.createElement(AccountContainer, { className: 'wrapper-container', row: true, full: true },
+                React.createElement("div", { className: 'col-3 col-t-1 col-m-0' }),
+                React.createElement("div", { className: 'col-6 col-t-10 col-m-12 forget-password-wrapper' },
+                    React.createElement(Text, { tag: 'h2', className: 'account-h2 account-font-bold account-primary-color1 title', text: 'thankYou' }),
+                    React.createElement("div", { className: 'recovery-wrap' },
+                        React.createElement(Text, { className: 'account-p account-p2 account-font-medium account-primary-color1 recovery-text', text: 'recoveryText' }),
+                        "\u00A0",
+                        React.createElement(Text, { className: 'account-p account-p2 account-font-bold account-primary-color1 recovery-email', 
+                            // text={forgotState.email}
+                            text: 'antonyanwm@gmail.com' })),
+                    React.createElement("div", { className: 'try-again-wrap' },
+                        React.createElement(Text, { text: `resendNewLink`, onClick: handleTryAgain, className: `account-p account-p3 account-font-bold account-primary-color1 underline try-again-text ${forgotState.isBtnDisabled ? 'disabled' : ''}` }))),
+                React.createElement("div", { className: 'col-3 col-t-1 col-m-0' })))))));
 };
 export default ForgotPasswordTemplate;

package/dist/modules/auth/ForgotPasswordTemplate/style.js

@@ -11,14 +11,18 @@ const ForgotPasswordTemplateStyle = styled.section `
 
 	--account_loginExternalMTop: var(--sp2x);
 
-	display: flex;
-	justify-content: center;
 	padding-top: var(--account_forgotPasswordPadT);
 	padding-bottom: var(--account_forgotPasswordPadB);
 
 	.forgot-password-wrapper {
-		max-width: var(--account_forgotPasswordWrapperMaxWidth);
 		width: 100%;
+		display: flex;
+		justify-content: center;
+
+		.forgot-password-wrapper-form {
+			max-width: var(--account_forgotPasswordWrapperMaxWidth);
+			width: 100%;
+		}
 
 		.title {
 			text-align: center;
@@ -58,9 +62,11 @@ const ForgotPasswordTemplateStyle = styled.section `
 				transition: color var(--account_trTime) ease-out;
 				cursor: pointer;
 
-				@media (hover: hover) {
-					&:hover {
-						color: var(--account_primaryColor3);
+				@media (pointer: fine) {
+					@media (hover: hover) {
+						&:hover {
+							color: var(--account_primaryColor3);
+						}
 					}
 				}
 
@@ -80,9 +86,11 @@ const ForgotPasswordTemplateStyle = styled.section `
 		.login-external {
 			transition: color var(--account_trTime) ease-out;
 
-			@media (hover: hover) {
-				&:hover {
-					color: var(--account_primaryColor3);
+			@media (pointer: fine) {
+				@media (hover: hover) {
+					&:hover {
+						color: var(--account_primaryColor3);
+					}
 				}
 			}
 		}

package/dist/modules/auth/ResetPasswordTemplate/style.js

@@ -57,9 +57,11 @@ const ResetPasswordTemplateStyleStyle = styled.section `
 		.forgotLink {
 			transition: color var(--account_trTime) ease-out;
 
-			@media (hover: hover) {
-				&:hover {
-					color: var(--account_primaryColor3);
+			@media (pointer: fine) {
+				@media (hover: hover) {
+					&:hover {
+						color: var(--account_primaryColor3);
+					}
 				}
 			}
 		}

package/dist/modules/auth/SignInTemplate/style.js

@@ -42,9 +42,11 @@ const SignInTemplateStyle = styled.section `
 				.forgotLink {
 					transition: color var(--account_trTime) ease-out;
 
-					@media (hover: hover) {
-						&:hover {
-							color: var(--account_primaryColor3);
+					@media (pointer: fine) {
+						@media (hover: hover) {
+							&:hover {
+								color: var(--account_primaryColor3);
+							}
 						}
 					}
 				}
@@ -66,9 +68,11 @@ const SignInTemplateStyle = styled.section `
 					.joinNowLink {
 						transition: color var(--account_trTime) ease-out;
 
-						@media (hover: hover) {
-							&:hover {
-								color: var(--account_primaryColor3);
+						@media (pointer: fine) {
+							@media (hover: hover) {
+								&:hover {
+									color: var(--account_primaryColor3);
+								}
 							}
 						}
 					}

package/dist/modules/auth/VerifyEmailAddressTemplate/style.js

@@ -54,9 +54,11 @@ const VerifyEmailAddressTemplateStyle = styled.section `
 				cursor: pointer;
 				transition: color var(--account_trTime) ease;
 
-				@media (hover: hover) {
-					&:hover {
-						color: var(--account_primaryColor3);
+				@media (pointer: fine) {
+					@media (hover: hover) {
+						&:hover {
+							color: var(--account_primaryColor3);
+						}
 					}
 				}
 

package/dist/modules/cart/CartTemplate/index.js

@@ -15,11 +15,11 @@ import SkeletonCartTemplate from './Skeleton';
 const CartTemplate = ({ children, actions, btnDisabled, checkoutUrl = '/checkout/' }) => {
     const { shopUrl, useCart } = useAccountContext();
     const { translate } = useTranslation();
-    const { items, itemsCount, shippingCost, loading, subtotal, total } = useCart();
+    const { items, itemsCount, shippingCost, loading, subtotal, total, freeShippingRange } = useCart();
     return (React.createElement(Page, { className: 'cart use-account' },
         React.createElement(AccountContainer, { className: `second-version` },
             React.createElement(CartTemplateStyle, null,
-                React.createElement(TotalCheckout, { total: total, subtotal: subtotal, itemsCount: itemsCount, shippingCost: shippingCost, loading: loading, buttonProps: {
+                React.createElement(TotalCheckout, { total: total, loading: loading, subtotal: subtotal, itemsCount: itemsCount, shippingCost: shippingCost, freeShippingRange: freeShippingRange, buttonProps: {
                         url: checkoutUrl,
                         disabled: btnDisabled,
                         text: 'proceedToCheckout',

package/dist/modules/cart/CartTemplate/style.js

@@ -14,11 +14,13 @@ const CartTemplateStyle = styled.section `
 			gap: var(--sp1x);
 			text-decoration: unset !important;
 
-			@media (hover: hover) {
-				&:hover {
-					svg {
-						path {
-							fill: var(--account_secondColor9);
+			@media (pointer: fine) {
+				@media (hover: hover) {
+					&:hover {
+						svg {
+							path {
+								fill: var(--account_secondColor9);
+							}
 						}
 					}
 				}

package/dist/modules/cart/SimpleItems/Item/index.js

@@ -27,7 +27,7 @@ const Item = memo(({ data, remove, select, isLast, actions, maxQty, currency })
                         React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1`, text: data.product.short_info_1 })),
                     React.createElement("div", { className: `right-second-item-wrap` },
                         React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: data.product.short_info_2 })))),
-            React.createElement("div", { className: `col-item tl-col-2` }, select ? (React.createElement("div", { className: `select-and-out-of-stock-wrap` }, !data.product?.out_of_stock ? (React.createElement(Select, { value: data.qty, allowSearch: false, options: selectionList, onChange: (val) => actions.add({
+            React.createElement("div", { className: `col-item tl-col-2` }, select ? (React.createElement("div", { className: `select-and-out-of-stock-wrap` }, !data.product?.out_of_stock ? (React.createElement(Select, { value: data.qty, options: selectionList, onChange: (val) => actions.add({
                     qty: val,
                     productId: data.product.id,
                 }) })) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.qty })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.qty }))),

package/dist/modules/cart/SimpleItems/ItemMobile/index.js

@@ -26,7 +26,7 @@ const ItemMobile = memo(({ data, remove, select, actions, maxQty, currency }) =>
                         React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 mobile-short-info1`, text: data.product.short_info_1 })),
                     React.createElement("div", { className: 'mobile-info-item' },
                         React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 mobile-short-info2`, text: data.product.short_info_2 })),
-                    select ? (React.createElement("div", { className: `select-and-out-of-stock-mobile-wrap` }, !data.product?.out_of_stock ? (React.createElement(Select, { value: data.qty, allowSearch: false, options: selectionList, onChange: (val) => actions.add({
+                    select ? (React.createElement("div", { className: `select-and-out-of-stock-mobile-wrap` }, !data.product?.out_of_stock ? (React.createElement(Select, { value: data.qty, options: selectionList, onChange: (val) => actions.add({
                             qty: val,
                             productId: data.product.id,
                         }) })) : (React.createElement("div", { className: `mobile-info-item` },

package/dist/modules/cart/SimpleItems/style.js

@@ -229,8 +229,16 @@ const CartItemsStyle = styled.section `
 							padding: 0;
 
 							input {
-								width: 0;
-								padding: 0 !important;
+								width: unset !important;
+								background-color: unset !important;
+								color: unset !important;
+								font-size: unset !important;
+								line-height: unset !important;
+								font-family: unset !important;
+								font-weight: unset !important;
+								border-radius: unset !important;
+								border: unset !important;
+								padding: unset !important;
 							}
 						}
 
@@ -245,6 +253,14 @@ const CartItemsStyle = styled.section `
 						.react-select__option {
 							padding: var(--account_qntPadTB) var(--account_qntPadLR);
 							font-weight: 400;
+
+							@media (pointer: fine) {
+								@media (hover: hover) {
+									&:hover {
+										background-color: var(--mainColor) !important;
+									}
+								}
+							}
 						}
 					}
 				}
@@ -611,8 +627,16 @@ const CartItemsStyle = styled.section `
 										padding: 0;
 
 										input {
-											width: 0;
-											padding: 0 !important;
+											width: unset !important;
+											background-color: unset !important;
+											color: unset !important;
+											font-size: unset !important;
+											line-height: unset !important;
+											font-family: unset !important;
+											font-weight: unset !important;
+											border-radius: unset !important;
+											border: unset !important;
+											padding: unset !important;
 										}
 									}
 
@@ -627,6 +651,14 @@ const CartItemsStyle = styled.section `
 									.react-select__option {
 										padding: var(--account_qntPadTB) var(--account_qntPadLR);
 										font-weight: 400;
+
+										@media (pointer: fine) {
+											@media (hover: hover) {
+												&:hover {
+													background-color: var(--mainColor) !important;
+												}
+											}
+										}
 									}
 								}
 							}

package/dist/modules/checkout/CheckoutTemplate/index.js

@@ -15,7 +15,7 @@ import SkeletonAddressSelect from '../../address/SelectAddress/Skeleton';
 const CheckoutTemplate = () => {
     const { checkoutAddressId } = useAddressContext();
     const { useCart } = useAccountContext();
-    const { items, itemsCount, subtotal, total, shippingCost } = useCart();
+    const { items, itemsCount, subtotal, total, shippingCost, freeShippingRange } = useCart();
     const [checkoutData, setCheckoutData] = useState({
         note: '',
         paymentType: 'cash_on_delivery',
@@ -53,7 +53,7 @@ const CheckoutTemplate = () => {
     return (React.createElement(Page, { className: 'checkout use-account' },
         React.createElement(AccountContainer, { className: `second-version` },
             React.createElement(CheckoutTemplateStyle, null,
-                React.createElement(TotalCheckout, { isCheckout: true, total: total, subtotal: subtotal, itemsCount: itemsCount, shippingCost: shippingCost, isShipping: checkStep.isShipping, checkoutData: checkoutData, fillCheckoutData: fillCheckoutData, loading: addressLoading, buttonProps: {
+                React.createElement(TotalCheckout, { isCheckout: true, total: total, subtotal: subtotal, itemsCount: itemsCount, loading: addressLoading, shippingCost: shippingCost, checkoutData: checkoutData, isShipping: checkStep.isShipping, fillCheckoutData: fillCheckoutData, freeShippingRange: freeShippingRange, buttonProps: {
                         url: false,
                         disabled: false,
                         handleClick: handleCheckoutBtn,

package/dist/modules/order/OrderedItems/style.js

@@ -245,11 +245,13 @@ const OrderedItemsStyle = styled.div `
 									}
 								}
 
-								@media (hover: hover) {
-									&:hover {
-										color: var(--account_primaryColor6);
-										background-color: var(--account_backgroundColor);
-										border: 2px solid var(--account_primaryColor6);
+								@media (pointer: fine) {
+									@media (hover: hover) {
+										&:hover {
+											color: var(--account_primaryColor6);
+											background-color: var(--account_backgroundColor);
+											border: 2px solid var(--account_primaryColor6);
+										}
 									}
 								}
 							}
@@ -296,10 +298,12 @@ const OrderedItemsStyle = styled.div `
 					color: var(--account_primaryColor1);
 					border: 2px solid var(--account_primaryColor1);
 
-					@media (hover: hover) {
-						&:hover {
-							background-color: var(--account_primaryColor1);
-							color: var(--account_backgroundColor);
+					@media (pointer: fine) {
+						@media (hover: hover) {
+							&:hover {
+								background-color: var(--account_primaryColor1);
+								color: var(--account_backgroundColor);
+							}
 						}
 					}
 				}
@@ -313,11 +317,13 @@ const OrderedItemsStyle = styled.div `
 					background-color: var(--account_primaryColor1);
 					border: 2px solid var(--account_primaryColor1);
 
-					@media (hover: hover) {
-						&:hover {
-							color: var(--account_primaryColor1);
-							background-color: var(--account_backgroundColor);
-							border: 2px solid var(--account_primaryColor1);
+					@media (pointer: fine) {
+						@media (hover: hover) {
+							&:hover {
+								color: var(--account_primaryColor1);
+								background-color: var(--account_backgroundColor);
+								border: 2px solid var(--account_primaryColor1);
+							}
 						}
 					}
 				}
@@ -723,11 +729,13 @@ const OrderedItemsStyle = styled.div `
 									}
 								}
 
-								@media (hover: hover) {
-									&:hover {
-										color: var(--account_primaryColor6);
-										background-color: var(--account_backgroundColor);
-										border: 2px solid var(--account_primaryColor6);
+								@media (pointer: fine) {
+									@media (hover: hover) {
+										&:hover {
+											color: var(--account_primaryColor6);
+											background-color: var(--account_backgroundColor);
+											border: 2px solid var(--account_primaryColor6);
+										}
 									}
 								}
 							}
@@ -760,10 +768,12 @@ const OrderedItemsStyle = styled.div `
 						color: var(--account_primaryColor1);
 						border: 2px solid var(--account_primaryColor1);
 
-						@media (hover: hover) {
-							&:hover {
-								background-color: var(--account_primaryColor1);
-								color: var(--account_backgroundColor);
+						@media (pointer: fine) {
+							@media (hover: hover) {
+								&:hover {
+									background-color: var(--account_primaryColor1);
+									color: var(--account_backgroundColor);
+								}
 							}
 						}
 					}
@@ -781,11 +791,13 @@ const OrderedItemsStyle = styled.div `
 						background-color: var(--account_primaryColor1);
 						border: 2px solid var(--account_primaryColor1);
 
-						@media (hover: hover) {
-							&:hover {
-								color: var(--account_primaryColor1);
-								background-color: var(--account_backgroundColor);
-								border: 2px solid var(--account_primaryColor1);
+						@media (pointer: fine) {
+							@media (hover: hover) {
+								&:hover {
+									color: var(--account_primaryColor1);
+									background-color: var(--account_backgroundColor);
+									border: 2px solid var(--account_primaryColor1);
+								}
 							}
 						}
 					}

package/dist/styles/helperClass.js

@@ -260,6 +260,14 @@ const AccountHelperClass = createGlobalStyle `${css `
 		}
 	}
 
+	.account-surface-color {
+		color: var(--account_surfaceColor);
+
+		&-bg {
+			background-color: var(--account_surfaceColor);
+		}
+	}
+
 	.account-font-regular {
 		font-family: var(--account_Font);
 		font-weight: 400;

package/dist/styles/theme.js

@@ -35,6 +35,10 @@ export default (props) => ({
             account_secondaryColor7: '#FFDAD8',
             account_secondaryColor8: '#D7DBF5',
             account_secondaryColor9: '#B067CC',
+            account_secondaryColor10: '#E9ECEE',
+            account_secondaryColor11: '#F4F5F7',
+            account_secondaryColor12: '#0EC600',
+            account_surfaceColor: '#F7F7F7',
             //! Error Color
             account_errorColor: '#DE554E',
             account_errorColorBg: 'rgba(222, 85, 78, 0.1)',