@weareconceptstudio/account 0.2.0 → 0.2.1

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

@@ -3,9 +3,13 @@ import { Text, Link, Page } from '@weareconceptstudio/core';
 import { Form, Input } from '@weareconceptstudio/form';
 import { AccountButton, WarningMessage } from '../../../components';
 import ForgotPasswordTemplateStyle from './style';
-const ForgotPasswordTemplate = ({ onFormSubmit }) => {
+import { useAccountContext } from '../../../AccountProvider';
+const ForgotPasswordTemplate = ({ signInUrl = '/sign-in' }) => {
+    //! Context
+    const { useUser } = useAccountContext();
+    const { forgotPassword } = useUser();
     //! Ref
-    const tryAgainTimeout = useRef();
+    const tryAgainTimeout = useRef(null);
     //! State
     const [forgotState, setForgotState] = useState({
         isSuccess: false,
@@ -14,6 +18,9 @@ const ForgotPasswordTemplate = ({ onFormSubmit }) => {
         isSent: false,
         isBtnDisabled: false,
     });
+    const onFormSubmit = async (values) => {
+        return await forgotPassword(values);
+    };
     const handleFormFinish = async (values) => {
         return await onFormSubmit(values).then(() => {
             setForgotState((prev) => ({
@@ -63,13 +70,9 @@ const ForgotPasswordTemplate = ({ onFormSubmit }) => {
                     React.createElement(Form.Item, { name: 'email', label: 'email', rules: [{ type: 'email' }] },
                         React.createElement(Input, { placeholder: 'emailPlaceholder' })),
                     React.createElement("div", { className: 'loginExternalBlock' },
-                        React.createElement(Link, { href: '/sign-in' },
+                        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
-                    // @ts-ignore
-                    , { 
-                        // @ts-ignore
-                        text: `submit`, type: `submit`, btnType: `full-width` })))) : (React.createElement(React.Fragment, null,
+                    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', text: 'recoveryText' }),
@@ -79,10 +82,6 @@ const ForgotPasswordTemplate = ({ onFormSubmit }) => {
                     React.createElement(Text, { className: `account-p account-p2 account-font-medium account-primary-color1`, 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
-                // @ts-ignore
-                , { 
-                    // @ts-ignore
-                    error: forgotState.error, isSent: forgotState.isSent, successTitle: 'recoverPassword', successSubtitle: 'recoverPasswordDesc' })))))));
+                React.createElement(WarningMessage, { error: forgotState.error, isSent: forgotState.isSent, successTitle: 'recoverPassword', successSubtitle: 'recoverPasswordDesc' })))))));
 };
 export default ForgotPasswordTemplate;

package/dist/modules/auth/ResetPasswordTemplate/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 interface ResetPasswordProps {
-    formFields: [];
-    onFormSubmit: (values: any) => Promise<any>;
+    formFields?: [];
+    urlParams?: any;
 }
-declare const ResetPasswordTemplate: ({ formFields, onFormSubmit }: ResetPasswordProps) => React.JSX.Element;
+declare const ResetPasswordTemplate: ({ formFields, urlParams }: ResetPasswordProps) => React.JSX.Element;
 export default ResetPasswordTemplate;

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

@@ -1,17 +1,23 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Text, Link, Page } from '@weareconceptstudio/core';
 import { FormBuilder } from '@weareconceptstudio/form';
 import { AccountButton } from '../../../components';
 import ResetPasswordTemplateStyle from './style';
 import { defaultFormFields } from './utils';
+import { useAccountContext } from '../../../AccountProvider';
 // @ts-ignore
-const ResetPasswordTemplate = ({ formFields = defaultFormFields, onFormSubmit }) => {
+const ResetPasswordTemplate = ({ formFields = defaultFormFields, urlParams = {} }) => {
+    const { useUser } = useAccountContext();
+    const { resetPassword } = useUser();
     const [isSuccess, setIsSuccess] = useState(false);
-    const onSubmit = async (values) => {
-        return await onFormSubmit(values).then(() => {
+    const onSubmit = useCallback(async (values) => {
+        return await resetPassword({
+            ...values,
+            ...urlParams
+        }).then(() => {
             setIsSuccess(true);
         });
-    };
+    }, []);
     return (React.createElement(Page, { className: 'reset-password use-account' },
         React.createElement(ResetPasswordTemplateStyle, null,
             React.createElement("div", { className: `reset-password-wrapper` }, !isSuccess ? (React.createElement(React.Fragment, null,
@@ -20,17 +26,9 @@ const ResetPasswordTemplate = ({ formFields = defaultFormFields, onFormSubmit })
                     React.createElement("div", { className: 'forgotLinkWrap' },
                         React.createElement(Link, { href: '/forgot-password' },
                             React.createElement(Text, { tag: 'span', className: 'account-p account-p3 account-font-medium account-primary-color1 underline forgotLink', text: 'forgotPasswordLink' }))),
-                    React.createElement(AccountButton
-                    // @ts-ignore
-                    , { 
-                        // @ts-ignore
-                        type: `submit`, text: `submit`, btnType: `full-width` })))) : (React.createElement(React.Fragment, null,
+                    React.createElement(AccountButton, { type: `submit`, text: `submit`, btnType: `full-width` })))) : (React.createElement(React.Fragment, null,
                 React.createElement(Text, { tag: 'h1', className: 'account-h2 account-font-bold account-primary-color1 title', text: 'thankYou' }),
                 React.createElement(Text, { className: 'account-p account-p2 account-font-regular account-primary-color1 successfully-message', text: 'successfullyMessage' }),
-                React.createElement(AccountButton
-                // @ts-ignore
-                , { 
-                    // @ts-ignore
-                    text: `login`, btnType: `full-width`, url: '/sign-in', className: `additional-btn-wrap` })))))));
+                React.createElement(AccountButton, { text: `login`, btnType: `full-width`, url: '/sign-in', className: `additional-btn-wrap` })))))));
 };
 export default ResetPasswordTemplate;

package/dist/modules/auth/SignInTemplate/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 interface SignInProps {
-    formFields: [];
-    onFormSubmit: () => Promise<any>;
+    formFields?: [];
+    signUpUrl?: string;
 }
-declare const SignInTemplate: ({ formFields, onFormSubmit, signUpUrl }: SignInProps) => React.JSX.Element;
+declare const SignInTemplate: ({ formFields, signUpUrl }: SignInProps) => React.JSX.Element;
 export default SignInTemplate;

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

@@ -1,11 +1,22 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Text, Link, Page } from '@weareconceptstudio/core';
 import { FormBuilder } from '@weareconceptstudio/form';
+import { useAccountContext } from '../../../AccountProvider';
 import { AccountButton } from '../../../components';
 import SignInTemplateStyle from './style';
 import { defaultFormFields } from './utils';
 // @ts-ignore
-const SignInTemplate = ({ formFields = defaultFormFields, onFormSubmit, signUpUrl = '/sign-up' }) => {
+const SignInTemplate = ({ formFields = defaultFormFields, signUpUrl = '/sign-up' }) => {
+    const { useUser } = useAccountContext();
+    const { signIn } = useUser();
+    const [btnDisabled, setBtnDisabled] = useState(false);
+    const onFormSubmit = async (values) => {
+        setBtnDisabled(true);
+        return await signIn(values).catch((err) => {
+            setBtnDisabled(false);
+            return Promise.reject(err);
+        });
+    };
     return (React.createElement(Page, { className: 'sign-in use-account' },
         React.createElement(SignInTemplateStyle, null,
             React.createElement("div", { className: 'sign-in-wrapper' },
@@ -14,11 +25,7 @@ const SignInTemplate = ({ formFields = defaultFormFields, onFormSubmit, signUpUr
                     React.createElement("div", { className: 'forgotLinkWrap' },
                         React.createElement(Link, { href: '/forgot-password' },
                             React.createElement(Text, { tag: 'span', className: 'account-p account-p3 account-font-medium account-primary-color1 underline forgotLink', text: 'forgotPasswordLink' }))),
-                    React.createElement(AccountButton
-                    // @ts-ignore
-                    , { 
-                        // @ts-ignore
-                        type: `submit`, text: `login`, btnType: `full-width` }),
+                    React.createElement(AccountButton, { type: `submit`, text: `login`, btnType: `full-width`, disabled: btnDisabled }),
                     React.createElement("div", { className: 'joinNowWrap' },
                         React.createElement(Text, { className: `account-p account-p3 account-primary-color1 account-font-medium`, text: 'accountText' }),
                         React.createElement("div", { className: 'joinNowLinkWrap' },

package/dist/modules/auth/SignUpTemplate/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 interface SignUpProps {
-    formFields: [];
-    onFormSubmit: () => Promise<any>;
+    formFields?: [];
+    signInUrl?: string;
 }
-declare const SignUpTemplate: ({ formFields, onFormSubmit, signInUrl }: SignUpProps) => React.JSX.Element;
+declare const SignUpTemplate: ({ formFields, signInUrl }: SignUpProps) => React.JSX.Element;
 export default SignUpTemplate;

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

@@ -4,10 +4,23 @@ import { FormBuilder } from '@weareconceptstudio/form';
 import { AccountButton, CustomCheckbox } from '../../../components';
 import SignUpTemplateStyle from './style';
 import { defaultFormFields } from './utils';
+import { useAccountContext } from '../../../AccountProvider';
 // @ts-ignore
-const SignUpTemplate = ({ formFields = defaultFormFields, onFormSubmit, signInUrl = '/sign-in' }) => {
+const SignUpTemplate = ({ formFields = defaultFormFields, signInUrl = '/sign-in' }) => {
+    //! Context
     const { translate } = useTranslation();
+    const { useUser } = useAccountContext();
+    const { signUp } = useUser();
+    //! States
     const [isChecked, setIsChecked] = useState(false);
+    const [btnDisabled, setBtnDisabled] = useState(false);
+    const onFormSubmit = (values) => {
+        setBtnDisabled(true);
+        return signUp(values).catch((err) => {
+            setBtnDisabled(false);
+            return Promise.reject(err);
+        });
+    };
     return (React.createElement(Page, { className: 'sign-up use-account' },
         React.createElement(SignUpTemplateStyle, null,
             React.createElement("div", { className: `sign-up-wrapper` },
@@ -21,11 +34,7 @@ const SignUpTemplate = ({ formFields = defaultFormFields, onFormSubmit, signInUr
                             React.createElement(Link, { href: '/privacy-policy', className: `capitalize underline account-font-bold` }, translate('privacyPolicy')),
                             "\u00A0",
                             translate('checkedText2'))),
-                    React.createElement(AccountButton
-                    //@ts-ignore
-                    , { 
-                        //@ts-ignore
-                        type: `submit`, text: `signUp`, btnType: `full-width`, className: !isChecked ? 'disabled' : '' }),
+                    React.createElement(AccountButton, { type: `submit`, text: `signUp`, btnType: `full-width`, disabled: !isChecked || btnDisabled }),
                     React.createElement("div", { className: 'already-wrap' },
                         React.createElement(Text, { className: `account-p account-p3 account-primary-color1 account-font-medium`, text: 'alreadyHaveAnAccount' }),
                         React.createElement("div", { className: 'login-wrap' },

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

@@ -15,9 +15,9 @@ const VerifyEmailAddressTemplate = ({}) => {
     const { translate } = useTranslation();
     const { openPopup } = useUi();
     //! Refs
-    const inputRef = useRef();
-    const resendTimeout = useRef();
-    const verificationLoading = useRef();
+    const inputRef = useRef(null);
+    const resendTimeout = useRef(null);
+    const verificationLoading = useRef(null);
     //! States
     const [error, setError] = useState();
     const [isBtnDisabled, setIsBtnDisabled] = useState(true);
@@ -94,7 +94,7 @@ const VerifyEmailAddressTemplate = ({}) => {
                     React.createElement(Text, { tag: `span`, className: `account-font-bold`, text: `${user?.email}.` })),
                 React.createElement(Text, { className: `account-p account-p2 account-primary-color1 account-font-medium verify-text2`, text: `verifyText2` }),
                 React.createElement(FormInputCode, { ref: inputRef, onChange: handleChange, onComplete: onComplete }),
-                React.createElement(AccountButton, { text: `verify`, type: `submit`, btnType: `full-width`, onClick: handleVerify, className: `${isBtnDisabled ? 'disabled' : ''}` }),
+                React.createElement(AccountButton, { text: `verify`, type: `submit`, btnType: `full-width`, onClick: handleVerify, disabled: isBtnDisabled }),
                 React.createElement("p", { className: `receive-your-code-wrap account-font-medium account-p account-p4` },
                     translate('haveNotReceivedIt'),
                     "\u00A0",

package/dist/modules/cart/CartTemplate/Skeleton/SkeletonItem/index.d.ts

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

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

@@ -0,0 +1,23 @@
+import React from 'react';
+//* Files Skeleton
+import { skeletonMobileCart, skeletonCart, skeletonCart1, skeletonCart2, skeletonCart3, skeletonCartBottom2, skeletonCartBottom1 } from '../icons';
+import SkeletonItemCartStyle from './style';
+import { useUi } from '@weareconceptstudio/core';
+const SkeletonItemCart = () => {
+    const { winWidth } = useUi();
+    return (React.createElement(SkeletonItemCartStyle, null,
+        React.createElement("div", { className: 'wrapper-skeleton-item' },
+            React.createElement("div", { className: 'line' }),
+            React.createElement("div", { className: 'wrapper-cart-skeleton' }, winWidth < 768 ? (skeletonMobileCart) : winWidth < 1510 ? (React.createElement("div", { className: 'cart-desktop-wrapper' }, skeletonCart)) : (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: 'cart-desktop-wrapper' },
+                    React.createElement("div", null, skeletonCart1),
+                    React.createElement("div", null, skeletonCart2),
+                    React.createElement("div", null,
+                        React.createElement("div", { className: 'skeleton-cart-middle three-cart-middle' }, skeletonCart3)),
+                    React.createElement("div", null,
+                        React.createElement("div", { className: 'skeleton-cart-middle' }, skeletonCart3))),
+                React.createElement("div", { className: 'wrapper-bottom-cart' },
+                    skeletonCartBottom1,
+                    skeletonCartBottom2)))))));
+};
+export default SkeletonItemCart;

package/dist/modules/cart/CartTemplate/Skeleton/SkeletonItem/style.d.ts

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

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

@@ -0,0 +1,110 @@
+import styled from 'styled-components';
+const SkeletonItemCartStyle = styled.div `
+	--account_itemWrapPadTB: var(--sp5x);
+
+	.skeleton-cart-middle {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		gap: var(--sp0-5x);
+
+		svg {
+			width: auto;
+		}
+	}
+
+	.wrapper-skeleton-item {
+		.wrapper-cart-skeleton {
+			padding: var(--account_itemWrapPadTB) 0;
+		}
+
+		.wrapper-bottom-cart {
+			display: flex;
+			justify-content: space-between;
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_itemWrapPadTB: var(--sp4x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_itemWrapPadTB: 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_itemWrapPadTB: var(--sp3x);
+
+		.category-name,
+		.cart-desktop-wrapper {
+			display: flex;
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_itemWrapPadTB: var(--sp3x);
+
+		.skeleton-cart-middle {
+			padding-left: var(--sp1x);
+		}
+
+		.three-cart-middle {
+			transform: translateX(calc(var(--sp1x) * -1));
+		}
+
+		.category-name,
+		.cart-desktop-wrapper {
+			display: flex;
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_itemWrapPadTB: var(--sp3x);
+
+		.skeleton-cart-middle {
+			padding-left: var(--sp1x);
+		}
+
+		.three-cart-middle {
+			transform: translateX(calc(var(--sp1x) * -1));
+		}
+
+		.category-name,
+		.cart-desktop-wrapper {
+			display: flex;
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_itemWrapPadTB: var(--sp3x);
+
+		.skeleton-cart-middle {
+			padding-left: var(--sp1x);
+		}
+
+		.three-cart-middle {
+			transform: translateX(calc(var(--sp1x) * -1));
+		}
+
+		.category-name,
+		.cart-desktop-wrapper {
+			display: flex;
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		.category-name {
+			display: none;
+		}
+		.wrapper-cat {
+			.order-items-line {
+				border: 0px;
+			}
+		}
+
+		.cart-desktop-wrapper {
+			display: flex;
+		}
+	}
+`;
+export default SkeletonItemCartStyle;

package/dist/modules/cart/CartTemplate/Skeleton/icons.d.ts

@@ -0,0 +1,13 @@
+export const skeletonCart: React.JSX.Element;
+export const skeletonShopUrl: React.JSX.Element;
+export const skeletonCategoryNameAdapting: React.JSX.Element;
+export const skeletonMenuTitle: React.JSX.Element;
+export const skeletonMobileCart: React.JSX.Element;
+export const skeletonCategoryName: React.JSX.Element;
+export const skeletonCart1: React.JSX.Element;
+export const skeletonCart2: React.JSX.Element;
+export const skeletonCart3: React.JSX.Element;
+export const skeletonCartBottom1: React.JSX.Element;
+export const skeletonCartBottom2: React.JSX.Element;
+export const skeletonCartMiddle: React.JSX.Element;
+import React from 'react';

package/dist/modules/cart/CartTemplate/Skeleton/icons.js

@@ -0,0 +1,57 @@
+import React from 'react';
+export const skeletonCart = (React.createElement("svg", { width: '1154', height: '174', viewBox: '0 0 1154 174', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', id: 'cart-skeleton' },
+    React.createElement("rect", { x: '104', width: '91', height: '36', rx: '12', fill: '#EFF1F2', style: { fill: '#EFF1F2', fillOpacity: 1 } }),
+    React.createElement("rect", { x: '592', width: '69', height: '30', rx: '12', fill: '#EFF1F2', style: { fill: '#EFF1F2', fillOpacity: 1 } }),
+    React.createElement("rect", { x: '809', width: '144', height: '21', rx: '10.5', fill: '#EFF1F2', style: { fill: '#EFF1F2', fillOpacity: 1 } }),
+    React.createElement("rect", { x: '1008', width: '144', height: '21', rx: '10.5', fill: '#EFF1F2', style: { fill: '#EFF1F2', fillOpacity: 1 } }),
+    React.createElement("rect", { x: '809', y: '27', width: '144', height: '21', rx: '10.5', fill: '#EFF1F2', style: { fill: '#EFF1F2', fillOpacity: 1 } }),
+    React.createElement("rect", { x: '1008', y: '27', width: '144', height: '21', rx: '10.5', fill: '#EFF1F2', style: { fill: '#EFF1F2', fillOpacity: 1 } }),
+    React.createElement("rect", { x: '104', y: '50', width: '456', height: '20', rx: '10', fill: '#EFF1F2', style: { fill: '#EFF1F2', fillOpacity: 1 } }),
+    React.createElement("rect", { x: '104', y: '82', width: '279', height: '20', rx: '10', fill: '#EFF1F2', style: { fill: '#EFF1F2', fillOpacity: 1 } }),
+    React.createElement("rect", { x: '104', y: '114', width: '79', height: '20', rx: '10', fill: '#EFF1F2', style: { fill: '#EFF1F2', fillOpacity: 1 } }),
+    React.createElement("rect", { x: '107', y: '146', width: '101', height: '28', rx: '12', fill: '#EFF1F2', style: { fill: '#EFF1F2', fillOpacity: 1 } }),
+    React.createElement("rect", { x: '953', y: '146', width: '119', height: '28', rx: '12', fill: '#EFF1F2', style: { fill: '#EFF1F2', fillOpacity: 1 } }),
+    React.createElement("rect", { x: '1079', y: '146', width: '75', height: '28', rx: '12', fill: '#EFF1F2', style: { fill: '#EFF1F2', fillOpacity: 1 } }),
+    React.createElement("rect", { width: '80', height: '100', rx: '12', fill: '#EFF1F2', style: { fill: '#EFF1F2', fillOpacity: 1 } })));
+export const skeletonShopUrl = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '116', height: '25', viewBox: '0 0 116 25', fill: 'none' },
+    React.createElement("rect", { width: '116', height: '25', rx: '12', fill: '#EFF1F2' })));
+export const skeletonCategoryNameAdapting = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '1152', height: '25', viewBox: '0 0 1152 25', fill: 'none' },
+    React.createElement("rect", { x: '1079', width: '73', height: '25', rx: '12', fill: '#EFF1F2' }),
+    React.createElement("rect", { x: '844', width: '73', height: '25', rx: '12', fill: '#EFF1F2' }),
+    React.createElement("rect", { x: '592', width: '73', height: '25', rx: '12', fill: '#EFF1F2' }),
+    React.createElement("rect", { width: '73', height: '25', rx: '12', fill: '#EFF1F2' })));
+export const skeletonMenuTitle = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '73', height: '25', viewBox: '0 0 73 25', fill: 'none' },
+    React.createElement("rect", { width: '73', height: '25', rx: '12', fill: '#EFF1F2' })));
+export const skeletonMobileCart = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '382', height: '292', viewBox: '0 0 382 292', fill: 'none' },
+    React.createElement("path", { d: 'M100 10C100 4.47715 104.477 0 110 0H320C325.523 0 330 4.47715 330 10C330 15.5228 325.523 20 320 20H110C104.477 20 100 15.5228 100 10Z', fill: '#EFF1F2' }),
+    React.createElement("path", { d: 'M100 38C100 32.4772 104.477 28 110 28H231C236.523 28 241 32.4772 241 38C241 43.5228 236.523 48 231 48H110C104.477 48 100 43.5228 100 38Z', fill: '#EFF1F2' }),
+    React.createElement("path", { d: 'M100 72C100 67.5817 103.582 64 108 64H149C153.418 64 157 67.5817 157 72C157 76.4183 153.418 80 149 80H108C103.582 80 100 76.4183 100 72Z', fill: '#EFF1F2' }),
+    React.createElement("path", { d: 'M100 96C100 91.5817 103.582 88 108 88H165C169.418 88 173 91.5817 173 96C173 100.418 169.418 104 165 104H108C103.582 104 100 100.418 100 96Z', fill: '#EFF1F2' }),
+    React.createElement("path", { d: 'M100 140C100 133.373 105.373 128 112 128H179C185.627 128 191 133.373 191 140V157C191 163.627 185.627 169 179 169H112C105.373 169 100 163.627 100 157V140Z', fill: '#EFF1F2' }),
+    React.createElement("path", { d: 'M100 201C100 196.582 103.582 193 108 193H193C197.418 193 201 196.582 201 201C201 205.418 197.418 209 193 209H108C103.582 209 100 205.418 100 201Z', fill: '#EFF1F2' }),
+    React.createElement("path", { d: 'M100 225C100 220.582 103.582 217 108 217H165C169.418 217 173 220.582 173 225C173 229.418 169.418 233 165 233H108C103.582 233 100 229.418 100 225Z', fill: '#EFF1F2' }),
+    React.createElement("path", { d: 'M0 284C0 279.582 3.58172 276 8 276H37C41.4183 276 45 279.582 45 284C45 288.418 41.4183 292 37 292H8C3.58172 292 0 288.418 0 284Z', fill: '#EFF1F2' }),
+    React.createElement("path", { d: 'M199 284C199 279.582 202.582 276 207 276H258C262.418 276 266 279.582 266 284C266 288.418 262.418 292 258 292H207C202.582 292 199 288.418 199 284Z', fill: '#EFF1F2' }),
+    React.createElement("path", { d: 'M274 284C274 279.582 277.582 276 282 276H374C378.418 276 382 279.582 382 284C382 288.418 378.418 292 374 292H282C277.582 292 274 288.418 274 284Z', fill: '#EFF1F2' }),
+    React.createElement("path", { d: 'M1 12.72C1 5.69494 6.69494 0 13.72 0H73.08C80.1051 0 85.8 5.69494 85.8 12.72V93.28C85.8 100.305 80.1051 106 73.08 106H13.72C6.69493 106 1 100.305 1 93.28V12.72Z', fill: '#EFF1F2' })));
+export const skeletonCategoryName = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '73', height: '25', viewBox: '0 0 73 25', fill: 'none' },
+    React.createElement("rect", { width: '73', height: '25', rx: '12', fill: '#EFF1F2' })));
+export const skeletonCart1 = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '560', height: '134', viewBox: '0 0 560 134', fill: 'none' },
+    React.createElement("path", { d: 'M104 12C104 5.37258 109.373 0 116 0H183C189.627 0 195 5.37258 195 12V24C195 30.6274 189.627 36 183 36H116C109.373 36 104 30.6274 104 24V12Z', fill: '#EFF1F2' }),
+    React.createElement("path", { d: 'M104 60C104 54.4772 108.477 50 114 50H550C555.523 50 560 54.4772 560 60C560 65.5229 555.523 70 550 70H114C108.477 70 104 65.5229 104 60Z', fill: '#EFF1F2' }),
+    React.createElement("path", { d: 'M104 92C104 86.4771 108.477 82 114 82H373C378.523 82 383 86.4771 383 92C383 97.5229 378.523 102 373 102H114C108.477 102 104 97.5229 104 92Z', fill: '#EFF1F2' }),
+    React.createElement("path", { d: 'M104 124C104 118.477 108.477 114 114 114H173C178.523 114 183 118.477 183 124C183 129.523 178.523 134 173 134H114C108.477 134 104 129.523 104 124Z', fill: '#EFF1F2' }),
+    React.createElement("path", { d: 'M0 12C0 5.37258 5.37258 0 12 0H68C74.6274 0 80 5.37258 80 12V88C80 94.6274 74.6274 100 68 100H12C5.37258 100 0 94.6274 0 88V12Z', fill: '#EFF1F2' })));
+export const skeletonCart2 = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '69', height: '30', viewBox: '0 0 69 30', fill: 'none' },
+    React.createElement("rect", { width: '69', height: '30', rx: '12', fill: '#EFF1F2' })));
+export const skeletonCart3 = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '144', height: '48', viewBox: '0 0 144 48', fill: 'none' },
+    React.createElement("g", { id: 'Vector' },
+        React.createElement("path", { d: 'M0 10.5C0 4.70101 4.70101 0 10.5 0H133.5C139.299 0 144 4.70101 144 10.5C144 16.299 139.299 21 133.5 21H10.5C4.70101 21 0 16.299 0 10.5Z', fill: '#EFF1F2' }),
+        React.createElement("path", { d: 'M0 37.5C0 31.701 4.70101 27 10.5 27H133.5C139.299 27 144 31.701 144 37.5C144 43.299 139.299 48 133.5 48H10.5C4.70101 48 0 43.299 0 37.5Z', fill: '#EFF1F2' }))));
+export const skeletonCartBottom1 = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '200', height: '40', viewBox: '0 0 200 40', fill: 'none' },
+    React.createElement("rect", { x: '99', y: '12', width: '101', height: '28', rx: '12', fill: '#EFF1F2' })));
+export const skeletonCartBottom2 = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '201', height: '40', viewBox: '0 0 201 40', fill: 'none' },
+    React.createElement("rect", { y: '12', width: '119', height: '28', rx: '12', fill: '#EFF1F2' }),
+    React.createElement("rect", { x: '126', y: '12', width: '75', height: '28', rx: '12', fill: '#EFF1F2' })));
+export const skeletonCartMiddle = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '144', height: '21', viewBox: '0 0 144 21', fill: 'none' },
+    React.createElement("rect", { width: '144', height: '21', rx: '10.5', fill: '#EFF1F2' })));

package/dist/modules/cart/CartTemplate/Skeleton/index.d.ts

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

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

@@ -0,0 +1,24 @@
+import React from 'react';
+//* Styles
+import SkeletonCartTemplateStyle from './style';
+//* Files Skeleton
+import { skeletonCategoryName, skeletonMenuTitle, skeletonShopUrl, skeletonCategoryNameAdapting } from './icons';
+import SkeletonItemCart from './SkeletonItem';
+import { useUi } from '@weareconceptstudio/core';
+const SkeletonCartTemplate = ({ shopUrl }) => {
+    const { winWidth } = useUi();
+    return (React.createElement(SkeletonCartTemplateStyle, null,
+        React.createElement("div", { className: 'left-bar' },
+            shopUrl ? React.createElement("div", { className: 'wrapper-url' }, skeletonShopUrl) : React.createElement(React.Fragment, null),
+            React.createElement("div", { className: 'wrapper-cat' },
+                React.createElement("div", { className: 'title-wrapper' }, skeletonMenuTitle),
+                React.createElement("div", { className: 'order-items-line' }),
+                winWidth < 1510 ? (React.createElement("div", { className: 'category-name' }, skeletonCategoryNameAdapting)) : (React.createElement("div", { className: 'category-name' }, Array.from({ length: 4 }).map((_, i) => {
+                    return React.createElement("div", { key: i }, skeletonCategoryName);
+                })))),
+            Array.from({ length: 3 }).map((_, i) => {
+                return React.createElement(SkeletonItemCart, { key: i });
+            }),
+            React.createElement("div", { className: 'line' }))));
+};
+export default SkeletonCartTemplate;

package/dist/modules/cart/CartTemplate/Skeleton/style.d.ts

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