@weareconceptstudio/account 0.0.0 → 0.0.1

package/dist/components/ShippingBillingInfo/index.d.ts

@@ -0,0 +1,3 @@
+export default ShippingBillingInfo;
+declare const ShippingBillingInfo: React.NamedExoticComponent<object>;
+import React from 'react';

package/dist/components/ShippingBillingInfo/index.js

@@ -0,0 +1,22 @@
+import React, { memo } from 'react';
+import { Text } from '@weareconceptstudio/core';
+//* Style
+import ShippingBillingInfoStyle from './style';
+const ShippingBillingInfo = memo(({ className, shipping_address, billing_address }) => {
+    return (React.createElement(ShippingBillingInfoStyle, { className: `${className || ''}` },
+        React.createElement(Text, { className: `account-p account-p1 account-font-bold account-primary-color1`, text: 'shippingAndBillingInfo' }),
+        React.createElement("div", { className: `info-space-line` }),
+        React.createElement("div", { className: `info-wrap shipped` },
+            React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 value`, text: `shippedTo` }),
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 nowrap`, text: `${shipping_address.first_name} ${shipping_address.last_name}` }),
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 nowrap`, text: `${shipping_address.address_1}, ${shipping_address.address_2 ? shipping_address.address_2 + ',' : ''}` }),
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 nowrap`, text: `${shipping_address.region.name}, ${shipping_address.zip_code}, ${shipping_address.city.name}, ${shipping_address.country.name}` }),
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 phone`, text: `${shipping_address.phone_number}` })),
+        billing_address !== null && (React.createElement("div", { className: `info-wrap billed` },
+            React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 value`, text: `billedTo` }),
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 nowrap`, text: `${billing_address.first_name} ${billing_address.last_name}` }),
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 nowrap`, text: `${billing_address.address_1}, ${billing_address.address_2 ? billing_address.address_2 + ',' : ''}` }),
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 nowrap`, text: `${billing_address.region.name}, ${billing_address.zip_code}, ${billing_address.city.name}, ${billing_address.country.name}` }),
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 phone`, text: `${billing_address.phone_number}` })))));
+});
+export default ShippingBillingInfo;

package/dist/components/ShippingBillingInfo/style.d.ts

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

package/dist/components/ShippingBillingInfo/style.js

@@ -0,0 +1,98 @@
+import styled from 'styled-components';
+const ShippingBillingInfoStyle = styled.section `
+	--account_spaceLineMTop: var(--sp3x);
+	--account_spaceLineMBot: var(--sp5x);
+	--account_valueMBot: var(--sp2x);
+	--account_billedMTop: var(--sp5x);
+	--account_phoneMTop: var(--sp1x);
+	--account_infoWrapWidth: 57%;
+
+	.info-space-line {
+		width: 100%;
+		border-bottom: 2px solid var(--account_primaryColor1);
+		margin-top: var(--account_spaceLineMTop);
+		margin-bottom: var(--account_spaceLineMBot);
+	}
+
+	.info-wrap {
+		width: var(--account_infoWrapWidth);
+
+		.value {
+			margin-bottom: var(--account_valueMBot);
+		}
+
+		.phone {
+			margin-top: var(--account_phoneMTop);
+		}
+	}
+
+	.billed {
+		margin-top: var(--account_billedMTop);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_spaceLineMTop: var(--sp2x);
+		--account_spaceLineMBot: var(--sp4x);
+		--account_valueMBot: var(--sp1x);
+		--account_billedMTop: var(--sp4x);
+		--account_phoneMTop: var(--sp1x);
+		--account_infoWrapWidth: 46.3%;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_spaceLineMTop: var(--sp2x);
+		--account_spaceLineMBot: var(--sp4x);
+		--account_valueMBot: var(--sp1x);
+		--account_billedMTop: var(--sp4x);
+		--account_phoneMTop: var(--sp1x);
+		--account_infoWrapWidth: 58.3%;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_spaceLineMTop: var(--sp2x);
+		--account_spaceLineMBot: var(--sp3x);
+		--account_valueMBot: var(--sp1x);
+		--account_billedMTop: var(--sp3x);
+		--account_phoneMTop: var(--sp1x);
+		--account_infoWrapWidth: 61.3%;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_spaceLineMTop: var(--sp2x);
+		--account_spaceLineMBot: var(--sp3x);
+		--account_valueMBot: var(--sp1x);
+		--account_billedMTop: var(--sp3x);
+		--account_phoneMTop: var(--sp1x);
+		--account_infoWrapWidth: 66.3%;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_spaceLineMTop: var(--sp2x);
+		--account_spaceLineMBot: var(--sp3x);
+		--account_valueMBot: var(--sp1x);
+		--account_billedMTop: var(--sp3x);
+		--account_phoneMTop: var(--sp1x);
+		--account_infoWrapWidth: 82.3%;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_spaceLineMTop: var(--sp2x);
+		--account_spaceLineMBot: var(--sp2x);
+		--account_valueMBot: var(--sp1x);
+		--account_billedMTop: var(--sp2x);
+		--account_phoneMTop: var(--sp1x);
+		--account_infoWrapWidth: 74.3%;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_spaceLineMTop: var(--sp2x);
+		--account_spaceLineMBot: var(--sp2x);
+		--account_valueMBot: var(--sp1x);
+		--account_billedMTop: var(--sp2x);
+		--account_phoneMTop: var(--sp1x);
+		--account_infoWrapWidth: 67.3%;
+
+		margin-top: var(--sp5x);
+	}
+`;
+export default ShippingBillingInfoStyle;

package/dist/components/TotalCheckout/index.d.ts

@@ -0,0 +1,3 @@
+export default TotalCheckout;
+declare const TotalCheckout: React.NamedExoticComponent<object>;
+import React from 'react';

package/dist/components/TotalCheckout/index.js

@@ -0,0 +1,49 @@
+import React, { memo, useState, useEffect } from 'react';
+import { Text, useUi } from '@weareconceptstudio/core';
+import { Input } from '@weareconceptstudio/form';
+import AccountButton from '../AccountButton';
+//* Utils
+import { handlePriceCheckFunc, numToLocalString } from '../../utils/_functions';
+//* Style
+import TotalCheckoutStyle from './style';
+//TODO: Input filed textarea
+// TODO: itemsCount, subtotal, total, loading, currency, shippingCost
+const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, itemsCount, subtotal, total, loading, currency, shippingCost }) => {
+    const { winWidth } = useUi();
+    //! States
+    const [headerHeight, setHeaderHeight] = useState();
+    const [note, setNote] = useState();
+    //! useEffect
+    useEffect(() => {
+        setHeaderHeight(document.getElementsByTagName('header')[0]?.clientHeight);
+    }, [winWidth]);
+    return (React.createElement(TotalCheckoutStyle, { "$headerHeight": headerHeight },
+        React.createElement("div", { className: `cart-main-wrap` },
+            React.createElement("div", { className: `left-panel-wrap panel` }, children),
+            React.createElement("div", { className: `right-panel-wrap panel ${confirmation ? 'display-none-wrap' : ''}` }, !confirmation && (React.createElement("div", { className: `max-width-wrapper sticky-wrap` },
+                React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1`, text: `orderSummary` }),
+                React.createElement("div", { className: `od-line` }),
+                React.createElement("div", { className: `od-item-wrap` },
+                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `subtotal` }),
+                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: itemsCount ? handlePriceCheckFunc(subtotal, currency) : `0 ${currency}` })),
+                React.createElement("div", { className: `od-item-wrap` },
+                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `shipping` }),
+                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `${String(shippingCost).toLowerCase() === 'free' || shippingCost === '-' ? shippingCost : `${numToLocalString(shippingCost)} ${currency}`}` })),
+                React.createElement("div", { className: `od-item-wrap` },
+                    React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1`, text: `total` }),
+                    React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1`, text: itemsCount ? handlePriceCheckFunc(total, currency) : `0 ${currency}` })),
+                typeof isShipping === 'boolean' && !isShipping ? (
+                // <Input.TextArea
+                // 	value={note}
+                // 	autoSize={{ minRows: 5, maxRows: 10 }}
+                // 	onChange={(e) => setNote(e.target.value)}
+                // 	placeholder={translate('checkoutCommentPlaceholder')}
+                // 	className={`comment-field account-p account-p3 account-font-regular account-primary-color1`}
+                // />
+                React.createElement("div", { style: {
+                        textAlign: 'center',
+                        margin: '16px 0',
+                    }, className: 'account-p account-p3 account-font-regular account-primary-color1' }, "Input Filed Textarea")) : null,
+                React.createElement(AccountButton, { url: buttonProps.url, btnType: `full-width`, text: buttonProps.text, type: buttonProps.type, onClick: () => buttonProps.handleClick && buttonProps.handleClick(note), className: `${!itemsCount || loading || buttonProps.disabled ? 'disabled' : ''}` })))))));
+});
+export default TotalCheckout;

package/dist/components/TotalCheckout/style.d.ts

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

package/dist/components/TotalCheckout/style.js

@@ -0,0 +1,211 @@
+import styled from 'styled-components';
+const TotalCheckoutStyle = styled.section `
+	--account_distance: var(--sp14x);
+	--account_rightPanelWrapWidth: var(--sp85x);
+	--account_cartMainWrapPadTop: var(--sp8x);
+	--account_leftPanelWrapWidth: calc(100% - var(--account_rightPanelWrapWidth));
+
+	//! Right Layout Sizes
+	--account_odLineMTop: var(--sp2x);
+	--account_odLineMBot: var(--sp6x);
+	--account_itemMTop: var(--sp3x);
+	--account_commentMarginTop: var(--sp6x);
+	--account_commentPadding: var(--sp2x) var(--sp3x);
+	--account_btnMTop: var(--sp2x);
+
+	.cart-main-wrap {
+		display: flex;
+		flex-wrap: wrap;
+		margin-left: calc(-1 * calc(var(--account_distance)));
+		padding-top: var(--account_cartMainWrapPadTop);
+		padding-bottom: var(--account_sectionDistance);
+
+		.left-panel-wrap {
+			width: var(--account_leftPanelWrapWidth);
+			padding: 0 var(--account_distance);
+		}
+
+		.right-panel-wrap {
+			max-width: var(--account_rightPanelWrapWidth);
+			width: 100%;
+
+			.max-width-wrapper {
+				.od-line {
+					width: 100%;
+					border-bottom: 2px solid var(--account_primaryColor1);
+					margin-top: var(--account_odLineMTop);
+					margin-bottom: var(--account_odLineMBot);
+				}
+
+				.od-item-wrap {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+
+					&:not(:first-child) {
+						margin-top: var(--account_itemMTop);
+					}
+				}
+
+				.comment-field {
+					width: 100%;
+					height: var(--sp10x);
+					padding: var(--account_commentPadding);
+					margin-top: var(--account_commentMarginTop);
+					vertical-align: top;
+					border: 2px solid var(--account_primaryColor5);
+					border-radius: var(--sp1x);
+					background: transparent;
+					-ms-overflow-style: none; /* IE and Edge */
+					scrollbar-width: none;
+
+					::-webkit-scrollbar {
+						display: none;
+					}
+
+					::placeholder {
+						color: var(--account_primaryColor3);
+						opacity: 1;
+					}
+
+					:-ms-input-placeholder {
+						color: var(--account_primaryColor3);
+					}
+
+					::-ms-input-placeholder {
+						color: var(--account_primaryColor3);
+					}
+				}
+
+				.btn-wrap {
+					width: 100%;
+					margin-top: var(--account_btnMTop);
+				}
+			}
+
+			//! Sticky Wrapper
+			.sticky-wrap {
+				position: sticky;
+				height: fit-content;
+				top: calc(${(props) => props.$headerHeight}px + var(--account_cartMainWrapPadTop));
+			}
+		}
+	}
+
+	.display-none-wrap {
+		display: none !important;
+	}
+
+	@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: var(--sp8x);
+		--account_rightPanelWrapWidth: var(--sp66x);
+		--account_cartMainWrapPadTop: var(--sp5x);
+
+		//! Right Layout Sizes
+		--account_odLineMTop: var(--sp2x);
+		--account_odLineMBot: var(--sp4x);
+		--account_itemMTop: var(--sp2x);
+		--account_commentMarginTop: var(--sp4x);
+		--account_commentPadding: var(--sp2x);
+		--account_btnMTop: var(--sp2x);
+	}
+
+	@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: var(--sp8x);
+		--account_rightPanelWrapWidth: var(--sp50x);
+		--account_cartMainWrapPadTop: var(--sp5x);
+
+		//! Right Layout Sizes
+		--account_odLineMTop: var(--sp2x);
+		--account_odLineMBot: var(--sp4x);
+		--account_itemMTop: var(--sp2x);
+		--account_commentMarginTop: var(--sp4x);
+		--account_commentPadding: var(--sp1x) var(--sp2x);
+		--account_btnMTop: var(--sp2x);
+	}
+
+	@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: var(--sp6x);
+		--account_rightPanelWrapWidth: var(--sp50x);
+		--account_cartMainWrapPadTop: var(--sp4x);
+
+		//! Right Layout Sizes
+		--account_odLineMTop: var(--sp2x);
+		--account_odLineMBot: var(--sp3x);
+		--account_itemMTop: var(--sp2x);
+		--account_commentMarginTop: var(--sp3x);
+		--account_commentPadding: var(--sp1x) var(--sp2x);
+		--account_btnMTop: var(--sp2x);
+	}
+
+	@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: var(--sp5x);
+		--account_rightPanelWrapWidth: var(--sp46x);
+		--account_cartMainWrapPadTop: var(--sp4x);
+
+		//! Right Layout Sizes
+		--account_odLineMTop: var(--sp2x);
+		--account_odLineMBot: var(--sp3x);
+		--account_itemMTop: var(--sp2x);
+		--account_commentMarginTop: var(--sp3x);
+		--account_commentPadding: var(--sp1x) var(--sp2x);
+		--account_btnMTop: var(--sp2x);
+	}
+
+	@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: var(--sp3x);
+		--account_rightPanelWrapWidth: var(--sp38x);
+		--account_cartMainWrapPadTop: var(--sp4x);
+
+		//! Right Layout Sizes
+		--account_odLineMTop: var(--sp2x);
+		--account_odLineMBot: var(--sp3x);
+		--account_itemMTop: var(--sp1x);
+		--account_commentMarginTop: var(--sp3x);
+		--account_commentPadding: var(--sp1x) var(--sp2x);
+		--account_btnMTop: var(--sp2x);
+	}
+
+	@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: 0;
+		--account_rightPanelWrapWidth: 100%;
+		--account_leftPanelWrapWidth: 100%;
+		--account_cartMainWrapPadTop: var(--sp4x);
+
+		//! Right Layout Sizes
+		--account_odLineMTop: var(--sp2x);
+		--account_odLineMBot: var(--sp3x);
+		--account_itemMTop: var(--sp1x);
+		--account_commentMarginTop: var(--sp3x);
+		--account_commentPadding: var(--sp1x) var(--sp2x);
+		--account_btnMTop: var(--sp2x);
+
+		.cart-main-wrap {
+			.right-panel-wrap {
+				margin-top: var(--sp12x);
+			}
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_distance: 0;
+		--account_rightPanelWrapWidth: 100%;
+		--account_leftPanelWrapWidth: 100%;
+		--account_cartMainWrapPadTop: var(--sp4x);
+
+		//! Right Layout Sizes
+		--account_odLineMTop: var(--sp2x);
+		--account_odLineMBot: var(--sp3x);
+		--account_itemMTop: var(--sp1x);
+		--account_commentMarginTop: var(--sp3x);
+		--account_commentPadding: var(--sp1x) var(--sp2x);
+		--account_btnMTop: var(--sp2x);
+
+		.cart-main-wrap {
+			.right-panel-wrap {
+				margin-top: var(--sp8x);
+			}
+		}
+	}
+`;
+export default TotalCheckoutStyle;

package/dist/components/WarningMessage/index.d.ts

@@ -0,0 +1,3 @@
+export default WarningMessage;
+declare const WarningMessage: React.NamedExoticComponent<object>;
+import React from 'react';

package/dist/components/WarningMessage/index.js

@@ -0,0 +1,10 @@
+import React, { memo as Memo } from 'react';
+import { Text } from '@weareconceptstudio/core';
+//* Style
+import WarningMessageStyle from './style';
+const WarningMessage = Memo(({ error, isSent, successTitle, successSubtitle }) => {
+    return ((isSent || error) && (React.createElement(WarningMessageStyle, { className: `message-container ${error ? 'error' : 'success'}Color-bg` },
+        React.createElement(Text, { className: `account-p account-p4 message-title account-font-bold ${error ? 'error' : 'success'}Color`, text: error || successTitle }),
+        !error && (React.createElement(Text, { className: `account-p account-p4 message-subtitle account-font-regular ${error ? 'error' : 'success'}Color`, text: successSubtitle })))));
+});
+export default WarningMessage;

package/dist/components/WarningMessage/style.d.ts

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

package/dist/components/WarningMessage/style.js

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+const WarningMessageStyle = styled.div `
+	--account_messageMarginTop: var(--sp5x);
+	--account_messagePadding: var(--sp3x);
+
+	&.message-container {
+		margin-top: var(--account_messageMarginTop);
+		padding: var(--account_messagePadding);
+		border-radius: var(--sp1x);
+
+		&.account-success-color-bg {
+			border: 2px solid var(--account_successColor);
+		}
+
+		&.account-error-color-bg {
+			border: 2px solid var(--account_errorColor);
+		}
+
+		.message-subtitle {
+			margin-top: var(--sp1x);
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_messageMarginTop: var(--sp3x);
+		--account_messagePadding: var(--sp2x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_messageMarginTop: var(--sp3x);
+		--account_messagePadding: var(--sp2x);
+	}
+`;
+export default WarningMessageStyle;

package/dist/components/WarningMessageForPopup/index.d.ts

@@ -0,0 +1,3 @@
+export default WarningMessageForPopup;
+declare const WarningMessageForPopup: React.NamedExoticComponent<object>;
+import React from 'react';

package/dist/components/WarningMessageForPopup/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useUi, Text } from '@weareconceptstudio/core';
+import { useTheme } from 'styled-components';
+import theme from '../../styles/theme';
+//* Style
+import WarningMessageForPopupStyle from './style';
+//* Components
+import AccountButton from '../AccountButton';
+const WarningMessageForPopup = React.memo(({ isDelete = false, isThankYou = false, onRemove, title, description, globalData }) => {
+    const { closePopup } = useUi();
+    const globalTheme = useTheme();
+    return (React.createElement(WarningMessageForPopupStyle, { theme: theme(globalTheme) },
+        React.createElement(Text, { tag: `h6`, className: `account-h6 account-font-bold account-primary-color1`, text: title }),
+        React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 confirm-delete-address-text`, text: description }),
+        React.createElement("div", { className: `cancel-remove-wrap ${!isDelete && 'mobile-margin'}` }, isDelete ? (React.createElement(React.Fragment, null,
+            React.createElement(AccountButton, { btnType: `green-large-text`, text: `cancel`, onClick: closePopup }),
+            React.createElement(AccountButton, { text: `remove`, btnType: `full-width`, onClick: () => {
+                    onRemove();
+                    closePopup();
+                } }))) : isThankYou ? (
+        // globalData?.menu_bar[0]?.slug ? (
+        // 	<AccountButton
+        // 		onClick={closePopup}
+        // 		btnType={`full-width`}
+        // 		text={`continueToShop`}
+        // 		url={globalData?.menu_bar[0]?.slug}
+        // 	/>
+        // ) : null
+        React.createElement("div", null, "Global Data")) : (React.createElement(AccountButton, { text: `done`, btnType: `full-width`, onClick: closePopup })))));
+});
+export default WarningMessageForPopup;

package/dist/components/WarningMessageForPopup/style.d.ts

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

package/dist/components/WarningMessageForPopup/style.js

@@ -0,0 +1,82 @@
+import styled from 'styled-components';
+const WarningMessageForPopupStyle = styled.div `
+	--account_confirmDeleteAddressTextMTop: var(--sp3x);
+	--account_cancelRemoveWrapMTop: var(--sp7x);
+	--account_distance: var(--sp5x);
+
+	.confirm-delete-address-text {
+		margin-top: var(--account_confirmDeleteAddressTextMTop);
+	}
+
+	.cancel-remove-wrap {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		margin-top: var(--account_cancelRemoveWrapMTop);
+
+		.btn-wrap {
+			&:last-child {
+				margin-left: var(--account_distance);
+			}
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_confirmDeleteAddressTextMTop: var(--sp1x);
+		--account_cancelRemoveWrapMTop: var(--sp4x);
+		--account_distance: 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_confirmDeleteAddressTextMTop: var(--sp2x);
+		--account_cancelRemoveWrapMTop: var(--sp3x);
+		--account_distance: 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_confirmDeleteAddressTextMTop: var(--sp2x);
+		--account_cancelRemoveWrapMTop: var(--sp3x);
+		--account_distance: 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_confirmDeleteAddressTextMTop: var(--sp2x);
+		--account_cancelRemoveWrapMTop: var(--sp3x);
+		--account_distance: 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_confirmDeleteAddressTextMTop: var(--sp1-5x);
+		--account_cancelRemoveWrapMTop: var(--sp3x);
+		--account_distance: 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_confirmDeleteAddressTextMTop: var(--sp1-5x);
+		--account_cancelRemoveWrapMTop: var(--sp3x);
+		--account_distance: var(--sp2-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_confirmDeleteAddressTextMTop: var(--sp1-5x);
+		--account_cancelRemoveWrapMTop: var(--sp3x);
+		--account_distance: var(--sp2x);
+
+		.cancel-remove-wrap {
+			flex-direction: column-reverse;
+
+			.btn-wrap {
+				&:last-child {
+					width: 100%;
+					margin-left: 0;
+					margin-bottom: var(--account_distance);
+				}
+			}
+
+			&.mobile-margin {
+				margin-top: var(--sp8x);
+			}
+		}
+	}
+`;
+export default WarningMessageForPopupStyle;

package/dist/components/index.d.ts

@@ -0,0 +1,18 @@
+export { default as AddressForm } from './AddressForm';
+export { default as AddressItem } from './AddressItem';
+export { default as EmptyCart } from './EmptyCart';
+export { default as EmptyOrders } from './EmptyOrders';
+export { default as OrderDetails } from './OrderDetails';
+export { default as OrderedItems } from './OrderedItems';
+export { default as OrdersList } from './OrdersList';
+export { default as Pagination } from './Pagination';
+export { default as ShippingBillingInfo } from './ShippingBillingInfo';
+export { default as TotalCheckout } from './TotalCheckout';
+export { default as WarningMessage } from './WarningMessage';
+export { default as WarningMessageForPopup } from './WarningMessageForPopup';
+export { default as Sequence } from './Sequence';
+export { default as ShippingBillingForm } from './ShippingBillingForm';
+export { default as CustomCheckbox } from './CustomCheckbox';
+export { default as SelectShippingBilling } from './SelectShippingBilling';
+export { default as FormInputCode } from './FormInputCode';
+export { default as AccountButton } from './AccountButton';

package/dist/components/index.js

@@ -0,0 +1,18 @@
+export { default as AddressForm } from './AddressForm';
+export { default as AddressItem } from './AddressItem';
+export { default as EmptyCart } from './EmptyCart';
+export { default as EmptyOrders } from './EmptyOrders';
+export { default as OrderDetails } from './OrderDetails';
+export { default as OrderedItems } from './OrderedItems';
+export { default as OrdersList } from './OrdersList';
+export { default as Pagination } from './Pagination';
+export { default as ShippingBillingInfo } from './ShippingBillingInfo';
+export { default as TotalCheckout } from './TotalCheckout';
+export { default as WarningMessage } from './WarningMessage';
+export { default as WarningMessageForPopup } from './WarningMessageForPopup';
+export { default as Sequence } from './Sequence';
+export { default as ShippingBillingForm } from './ShippingBillingForm';
+export { default as CustomCheckbox } from './CustomCheckbox';
+export { default as SelectShippingBilling } from './SelectShippingBilling';
+export { default as FormInputCode } from './FormInputCode';
+export { default as AccountButton } from './AccountButton';

package/dist/index.d.ts

@@ -1 +1,2 @@
+export * from './AccountConfig';
 export * from './templates';

package/dist/index.js

@@ -1 +1,3 @@
+'use client';
+export * from './AccountConfig';
 export * from './templates';

package/dist/styles/helperClass.d.ts

@@ -0,0 +1,2 @@
+export default AccountHelperClass;
+declare const AccountHelperClass: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;