@antscorp/antsomi-ui 1.3.5-beta.23 → 1.3.5-beta.25

package/es/components/atoms/MobileFrame/MobileFrame.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 export interface MobileFrameProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+    size?: 'large' | 'medium';
 }
 export declare const MobileFrame: React.FC<React.PropsWithChildren<MobileFrameProps>>;

package/es/components/atoms/MobileFrame/MobileFrame.js

@@ -16,7 +16,7 @@ import { MobileWrapper, MobileInner, MobileBottomLine } from './styled';
 export const MobileFrame = (_a) => {
     var { children } = _a, restOfProps = __rest(_a, ["children"]);
     return (React.createElement(MobileWrapper, Object.assign({}, restOfProps),
-        React.createElement(MobileInner, null,
+        React.createElement(MobileInner, { size: restOfProps.size },
             children,
             React.createElement(MobileBottomLine, null))));
 };

package/es/components/atoms/MobileFrame/styled.d.ts

@@ -1,3 +1,4 @@
+import type { MobileFrameProps } from './MobileFrame';
 export declare const MobileWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MobileInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MobileInner: import("styled-components").StyledComponent<"div", any, MobileFrameProps, never>;
 export declare const MobileBottomLine: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/atoms/MobileFrame/styled.js

@@ -12,11 +12,11 @@ export const MobileWrapper = styled.div `
 export const MobileInner = styled.div `
   position: relative;
   width: 100%;
-  max-width: 336px;
-  height: 695px;
-  margin: 61px 23px 20px 24px;
-  border-bottom-left-radius: 50px;
-  border-bottom-right-radius: 50px;
+  max-width: ${props => (props.size === 'medium' ? 290 : 336)}px;
+  height: ${props => (props.size === 'medium' ? 600 : 695)}px;
+  margin: ${props => (props.size === 'medium' ? '52px 23px 18px 24px' : '61px 23px 20px 24px')};
+  border-bottom-left-radius: ${props => (props.size === 'medium' ? 37 : 50)}px;
+  border-bottom-right-radius: ${props => (props.size === 'medium' ? 37 : 50)}px;
   overflow: hidden;
 `;
 export const MobileBottomLine = styled.div `

package/es/components/molecules/RichMenu/RichMenuChatBar/RichMenuChatBar.d.ts

@@ -4,6 +4,7 @@ export interface RichMenuChatBarProps extends React.HtmlHTMLAttributes<HTMLDivEl
     showRichMenu?: boolean;
     showTypingChat?: boolean;
     disabled?: boolean;
+    size?: 'large' | 'medium';
     onToggleRichMenu?: (toggle: boolean) => void;
     onToggleTypingChat?: (toggle: boolean) => void;
 }

package/es/components/molecules/RichMenu/RichMenuChatBar/RichMenuChatBar.js

@@ -19,11 +19,12 @@ import { TypingChat } from './TypingChat';
 const defaultProps = {
     label: 'Menu',
     showRichMenu: true,
+    size: 'large',
     showTypingChat: false,
 };
 export const RichMenuChatBar = props => {
-    const { disabled, label, showRichMenu, showTypingChat, className, onToggleRichMenu, onToggleTypingChat = () => { } } = props, restOfProps = __rest(props, ["disabled", "label", "showRichMenu", "showTypingChat", "className", "onToggleRichMenu", "onToggleTypingChat"]);
-    return (React.createElement(ChatBarWrapper, Object.assign({ "$showRichMenu": showRichMenu, "$showTypingChat": showTypingChat, "$disabled": disabled, className: `antsomi-chat-bar ${className}` }, restOfProps), showTypingChat ? (React.createElement(TypingChat, { onClickMenu: () => onToggleTypingChat(!showTypingChat) })) : (React.createElement(React.Fragment, null,
+    const { disabled, label, showRichMenu, showTypingChat, className, size, onToggleRichMenu, onToggleTypingChat = () => { } } = props, restOfProps = __rest(props, ["disabled", "label", "showRichMenu", "showTypingChat", "className", "size", "onToggleRichMenu", "onToggleTypingChat"]);
+    return (React.createElement(ChatBarWrapper, Object.assign({ "$showRichMenu": showRichMenu, "$showTypingChat": showTypingChat, "$disabled": disabled, "$size": size, className: `antsomi-chat-bar ${className}` }, restOfProps), showTypingChat ? (React.createElement(TypingChat, { onClickMenu: () => onToggleTypingChat(!showTypingChat) })) : (React.createElement(React.Fragment, null,
         React.createElement(Icon, { type: "icon-ants-keyboard", className: "icon-keyboard", onClick: () => onToggleTypingChat(!showTypingChat) }),
         React.createElement(ChatBarMenuBox, { onClick: () => onToggleRichMenu && onToggleRichMenu(!showRichMenu) },
             React.createElement(Typography.Text, { className: "ants-text-sm" }, label),

package/es/components/molecules/RichMenu/RichMenuChatBar/styled.d.ts

@@ -3,6 +3,7 @@ interface ChatBarWrapperProps {
     $showRichMenu?: boolean;
     $showTypingChat?: boolean;
     $disabled?: boolean;
+    $size?: 'large' | 'medium';
 }
 export declare const ChatBarWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, ChatBarWrapperProps, never>;
 export declare const ChatBarMenuBox: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/es/components/molecules/RichMenu/RichMenuChatBar/styled.js

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
 export const ChatBarWrapper = styled(Flex) `
   position: relative;
-  height: 84px;
+  height: ${props => (props.$size === 'medium' ? 45 : 84)}px;
   padding: 10px 20px;
   background-color: #fff;
   z-index: 10;

package/es/components/molecules/RichMenu/RichMenuMobileView/RichMenuMobileView.d.ts

@@ -5,6 +5,7 @@ interface RichMenuMobileViewProps extends React.HTMLAttributes<HTMLDivElement> {
     isPreview?: boolean;
     onChangeRichMenu?: (richMenu: RichMenu, source?: 'user' | 'system') => void;
     onClickCell?: (cellIndex: number) => void;
+    size?: 'large' | 'medium';
     reCalculateFlag?: boolean | number;
 }
 export declare const RichMenuMobileView: React.FC<RichMenuMobileViewProps>;

package/es/components/molecules/RichMenu/RichMenuMobileView/RichMenuMobileView.js

@@ -20,7 +20,7 @@ import { RichMenuBlock } from '../RichMenuBlock';
 // Styles
 import { MobileContent, RichMenuWrapper, TopBar } from './styled';
 export const RichMenuMobileView = props => {
-    const { richMenu, className, isPreview, onChangeRichMenu, onClickCell, reCalculateFlag } = props, restOfProps = __rest(props, ["richMenu", "className", "isPreview", "onChangeRichMenu", "onClickCell", "reCalculateFlag"]);
+    const { richMenu, className, isPreview, onChangeRichMenu, onClickCell, reCalculateFlag, size } = props, restOfProps = __rest(props, ["richMenu", "className", "isPreview", "onChangeRichMenu", "onClickCell", "reCalculateFlag", "size"]);
     // State
     const [state, setState] = useState({
         showRichMenu: true,
@@ -29,9 +29,9 @@ export const RichMenuMobileView = props => {
     });
     // Variables
     const { showRichMenu, showTypingChat } = state;
-    return (React.createElement(MobileFrame, Object.assign({ className: `ants-mx-auto ${className}` }, restOfProps),
+    return (React.createElement(MobileFrame, Object.assign({ size: size, className: `ants-mx-auto ${className}` }, restOfProps),
         isPreview && React.createElement(TopBar, { src: IphoneTopBar, width: "100%", height: "auto" }),
         React.createElement(MobileContent, null,
             React.createElement(RichMenuWrapper, { "$showRichMenu": showRichMenu && !showTypingChat, "$isPreview": !!isPreview }, richMenu && (React.createElement(RichMenuBlock, { richMenu: richMenu, isPreview: isPreview, onChange: onChangeRichMenu, onClickCell: onClickCell, reCalculateFlag: reCalculateFlag }))),
-            React.createElement(RichMenuChatBar, { disabled: !isPreview, label: richMenu === null || richMenu === void 0 ? void 0 : richMenu.chatBar.label, showRichMenu: showRichMenu, showTypingChat: showTypingChat, onToggleRichMenu: showRichMenu => setState(prevState => (Object.assign(Object.assign({}, prevState), { showRichMenu: !!showRichMenu }))), onToggleTypingChat: showTypingChat => setState(prevState => (Object.assign(Object.assign({}, prevState), { showTypingChat: !!showTypingChat }))) }))));
+            React.createElement(RichMenuChatBar, { disabled: !isPreview, label: richMenu === null || richMenu === void 0 ? void 0 : richMenu.chatBar.label, size: size, showRichMenu: showRichMenu, showTypingChat: showTypingChat, onToggleRichMenu: showRichMenu => setState(prevState => (Object.assign(Object.assign({}, prevState), { showRichMenu: !!showRichMenu }))), onToggleTypingChat: showTypingChat => setState(prevState => (Object.assign(Object.assign({}, prevState), { showTypingChat: !!showTypingChat }))) }))));
 };

package/es/components/molecules/TemplateSaveAs/index.d.ts

@@ -1,3 +1,4 @@
 export { TemplateSaveAs } from './TemplateSaveAs';
 export { TemplateSaveAsModal } from './TemplateSaveAsModal';
+export { useTemplateSave } from './hooks/useTemplateSave';
 export type { TemplateValueOptions } from './TemplateSaveAs';

package/es/components/molecules/TemplateSaveAs/index.js

@@ -1,2 +1,3 @@
 export { TemplateSaveAs } from './TemplateSaveAs';
 export { TemplateSaveAsModal } from './TemplateSaveAsModal';
+export { useTemplateSave } from './hooks/useTemplateSave';

package/es/components/molecules/ThumbnailCard/ThumbnailCard.js

@@ -30,17 +30,11 @@ import { Button, Flex, Typography } from '../../atoms';
 import { THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH } from './constants';
 export const ThumbnailCard = memo(props => {
     const [modal, contextHolder] = Modal.useModal();
-    const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, removable = true, actionAvailable = true, editText = 'Edit thumbnail', previewText = 'Preview', removeModalProps, onClickEdit, onClickPreview, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "removable", "actionAvailable", "editText", "previewText", "removeModalProps", "onClickEdit", "onClickPreview", "onClickWrapper"]);
+    const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, removable = true, actionAvailable = true, removeModalProps, editBtnProps, previewBtnProps, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "removable", "actionAvailable", "removeModalProps", "editBtnProps", "previewBtnProps", "onClickWrapper"]);
     const _a = removeModalProps || {}, { onOk } = _a, restOfRemoveTemplateModalProps = __rest(_a, ["onOk"]);
+    const _b = editBtnProps || {}, { text: editText = 'Edit thumbnail', onClick: onClickEdit } = _b, restOfEditBtnProps = __rest(_b, ["text", "onClick"]);
+    const _c = previewBtnProps || {}, { text: previewText = 'Preview', onClick: onClickPreview } = _c, restOfPreviewBtnProps = __rest(_c, ["text", "onClick"]);
     // Handlers
-    const handleClickEdit = e => {
-        e.stopPropagation();
-        onClickEdit === null || onClickEdit === void 0 ? void 0 : onClickEdit(id);
-    };
-    const handleClickPreview = e => {
-        e.stopPropagation();
-        onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview(id);
-    };
     const handleRemoveThumbnail = e => {
         e.stopPropagation();
         modal.confirm(Object.assign(Object.assign({ title: 'Remove Template', centered: true, icon: React.createElement(Icon, { type: "icon-ants-info", style: { fontSize: 16, lineHeight: '25px' } }), content: (React.createElement("div", null,
@@ -59,9 +53,15 @@ export const ThumbnailCard = memo(props => {
             React.createElement("div", { className: "screen" }, thumbnail && React.createElement("img", { src: thumbnail, alt: "" })),
             actionAvailable && (React.createElement(React.Fragment, null,
                 React.createElement(Flex, { className: "center-action", align: "center", gap: 10, vertical: true },
-                    React.createElement(Button, { type: "primary", className: "animate__animated animate__fadeIn", onClick: handleClickEdit },
+                    React.createElement(Button, Object.assign({ type: "primary", className: "animate__animated animate__fadeIn" }, restOfEditBtnProps, { onClick: e => {
+                            e.stopPropagation();
+                            onClickEdit === null || onClickEdit === void 0 ? void 0 : onClickEdit(id);
+                        } }),
                         React.createElement(Typography.Text, { ellipsis: { tooltip: editText }, style: { maxWidth: '100%', color: 'inherit' } }, editText)),
-                    React.createElement(Button, { className: "animate__animated animate__fadeIn", onClick: handleClickPreview },
+                    React.createElement(Button, Object.assign({ className: "animate__animated animate__fadeIn", onClick: e => {
+                            e.stopPropagation();
+                            onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview(id);
+                        } }, restOfPreviewBtnProps),
                         React.createElement(Typography.Text, { ellipsis: { tooltip: previewText }, style: { maxWidth: '100%', color: 'inherit' } }, previewText))),
                 removable && (React.createElement("div", { className: "top-right-corner-action animate__animated animate__fadeIn" },
                     React.createElement(Button, { type: "primary", icon: React.createElement(Icon, { type: "icon-ants-trash-outline", style: { fontSize: 24, color: '#FFFFFF' } }), onClick: handleRemoveThumbnail }))),

package/es/components/molecules/ThumbnailCard/types.d.ts

@@ -1,9 +1,13 @@
-import { ModalFuncProps } from 'antd';
+import { ModalFuncProps, ButtonProps } from 'antd';
 import { HTMLAttributes } from 'react';
 export type TThumbnailCardId = string | number;
 export type TRemoveModalProps = Omit<ModalFuncProps, 'onOk'> & {
     onOk?: (id: TThumbnailCardId) => void;
 };
+export type TThumbnailButton = Omit<ButtonProps, 'onClick'> & {
+    text?: string;
+    onClick?: (id: TThumbnailCardId) => void;
+};
 export interface ThumbnailCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
     id: TThumbnailCardId;
     name?: string;
@@ -11,11 +15,9 @@ export interface ThumbnailCardProps extends Omit<HTMLAttributes<HTMLDivElement>,
     height?: number;
     thumbnail?: string;
     removable?: boolean;
-    editText?: string;
-    previewText?: string;
+    editBtnProps?: TThumbnailButton;
+    previewBtnProps?: TThumbnailButton;
     actionAvailable?: boolean;
     removeModalProps?: TRemoveModalProps;
-    onClickEdit?: (id: TThumbnailCardId) => void;
-    onClickPreview?: (id: TThumbnailCardId) => void;
     onClickWrapper?: (id: TThumbnailCardId) => void;
 }

package/es/components/molecules/index.d.ts

@@ -35,7 +35,7 @@ export { Form } from './Form';
 export { ResizeGrid } from './ResizeGrid';
 export * from './RichMenu';
 export { ModalV2 } from './ModalV2';
-export { TemplateSaveAs, TemplateSaveAsModal } from './TemplateSaveAs';
+export { TemplateSaveAs, TemplateSaveAsModal, useTemplateSave } from './TemplateSaveAs';
 export * from './PreviewModal';
 export * from './Drawer';
 export { EditorScript } from './EditorScript';

package/es/components/molecules/index.js

@@ -35,7 +35,7 @@ export { Form } from './Form';
 export { ResizeGrid } from './ResizeGrid';
 export * from './RichMenu';
 export { ModalV2 } from './ModalV2';
-export { TemplateSaveAs, TemplateSaveAsModal } from './TemplateSaveAs';
+export { TemplateSaveAs, TemplateSaveAsModal, useTemplateSave } from './TemplateSaveAs';
 export * from './PreviewModal';
 export * from './Drawer';
 export { EditorScript } from './EditorScript';

package/es/components/organism/PreviewTemplateModal/components/Banner/index.js

@@ -6,6 +6,7 @@ export const Banner = memo(props => {
     const { deviceType, showBackgroundSkeleton = false, children } = props;
     return (React.createElement(BannerWrapper, { deviceType: deviceType, showBackgroundSkeleton: showBackgroundSkeleton },
         React.createElement("div", { className: "device-type" },
+            React.createElement("div", { className: "device-type__background" }),
             React.createElement("div", { className: "device-type__wrapper" },
                 React.createElement("div", { className: "content-wrapper" }, children || null),
                 React.createElement("div", { className: "backdrop" })))));

package/es/components/organism/PreviewTemplateModal/components/Banner/styled.js

@@ -6,11 +6,12 @@ import MobileFrame from '../../../../../assets/svg/mobile-frame.svg';
 import { DEVICE_TYPE } from '../../constants';
 const THUMBNAIL_CARD_RADIUS = 5;
 const { MOBILE } = DEVICE_TYPE;
+const MOBILE_BORDER_RADIUS = '19px 19px 19px 21px / 21px 21px 21px 21px';
 export const BannerWrapper = styled.div `
   width: 100%;
   height: 762px;
   max-height: 762px;
-  overflow-y: auto;
+  overflow-y: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -22,9 +23,11 @@ export const BannerWrapper = styled.div `
     border-radius: ${THUMBNAIL_CARD_RADIUS}px;
     width: 100%;
 
-    .device-type__wrapper {
+    .device-type__wrapper,
+    .device-type__background {
       width: 100%;
       height: 100%;
+      position: absolute;
     }
 
     ${p => {
@@ -32,27 +35,28 @@ export const BannerWrapper = styled.div `
         case MOBILE.value:
             return `
           width: 416.004px;
-          height: 713px;      
-          z-index: 20;
-          background: url(${MobileFrame}) no-repeat center center;
+          height: 713px;             
           display: flex;
           justify-content: center;
           align-items: center;
 
+          .device-type__background {
+            background: url(${MobileFrame}) no-repeat center center;
+          }
+
           .device-type__wrapper {
             width: 391px;
             left: 11px;    
             height: 661px;
-            top: 11px;    
-            position: absolute;
+            top: 11px;              
             z-index: 1;
-            border-radius: 19px 19px 19px 21px / 21px 21px 21px 21px;
+            border-radius: ${MOBILE_BORDER_RADIUS};
 
             .content-wrapper {
-              border-radius: 19px 19px 19px 21px / 21px 21px 21px 21px;
+              border-radius: inherit;
 
-              img {
-                border-radius: 19px 19px 19px 21px / 21px 21px 21px 21px;
+              & > * {
+                border-radius: inherit;
               }
             }
           }
@@ -60,8 +64,11 @@ export const BannerWrapper = styled.div `
         default:
             return p.showBackgroundSkeleton
                 ? `
-                .device-type__wrapper {
+                .device-type__background {
                   background: center / cover no-repeat url(${skeletonBackground});
+                }
+
+                .device-type__wrapper {              
                   .backdrop {
                     border-radius: ${THUMBNAIL_CARD_RADIUS}px;
                     position: absolute;

package/es/components/organism/PreviewTemplateModal/components/Information/index.js

@@ -8,7 +8,7 @@ import { Button, Radio, Typography, Flex } from '../../../../atoms';
 // Constants
 import { DEVICE_TYPE } from '../../constants';
 export const Information = memo(props => {
-    const { deviceType, itemName = 'Template name', buttonText = 'Use template', description = 'Description show here', categoryListing, showDeviceRadios = true, onButtonClick, onDeviceTypeChange, } = props;
+    const { deviceType, itemName = 'Template name', buttonText = 'Use template', description = '', categoryListing, showDeviceRadios = true, onButtonClick, onDeviceTypeChange, } = props;
     return (React.createElement(InformationWrapper, { gap: 20, vertical: true },
         React.createElement("div", { style: { flexShrink: 0 }, className: "title" }, itemName),
         React.createElement(Flex, { gap: 20, vertical: true, className: "content-information" },

package/es/components/organism/PreviewTemplateModal/constants/html.d.ts

@@ -0,0 +1 @@
+export declare const HTML: string;

package/es/components/organism/PreviewTemplateModal/constants/html.js

@@ -0,0 +1 @@
+export const HTML = '\n    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n    <html\n      xmlns="http://www.w3.org/1999/xhtml"\n      xmlns:v="urn:schemas-microsoft-com:vml"\n      xmlns:o="urn:schemas-microsoft-com:office:office"\n    >\n      <head>\n        <!--[if gte mso 9]>\n          <xml>\n            <o:OfficeDocumentSettings>\n              <o:AllowPNG />\n              <o:PixelsPerInch>96</o:PixelsPerInch>\n            </o:OfficeDocumentSettings>\n          </xml>\n        <![endif]-->\n        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />\n        <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n        <meta name="x-apple-disable-message-reformatting" />\n        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, max-age=1" /> \n        <meta http-equiv="Pragma" content="no-cache" /> \n        <meta http-equiv="Expires" content="0" />\n        <!--[if !mso]><!-->\n        <meta http-equiv="X-UA-Compatible" content="IE=edge" />\n        <!--<![endif]-->\n        <title></title>\n    \n        <style type="text/css">\n          \n        </style>\n  \n        <style type="text/css">\n          * {\n            line-height: inherit;\n          }\n\n          @media (max-width: 640px) {\n            .hide-mobile {\n              max-height: 0px;\n              overflow: hidden;\n              display: none !important;\n            } \n          }\n\n          @media (min-width: 0px) {\n            .hide-default__display-block {\n              display: block !important;\n              mso-hide: unset !important;\n            }\n          }\n\n          @media (min-width: 641px) {\n            .hide-desktop {\n              max-height: 0px;\n              overflow: hidden;\n              display: none !important;\n            }\n          }\n    \n          body {\n            margin: 0;\n            padding: 0;\n          }\n    \n          .ie-container table,\n          .mso-container table {\n            table-layout: fixed;\n          }\n    \n          a[x-apple-data-detectors="true"] {\n            color: inherit !important;\n            text-decoration: none !important;\n          }\n    \n          p {\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n          }\n  \n          table th {\n            font-weight: inherit;\n          }\n  \n          .table-block__wrapper a {\n            text-decoration: none !important;\n            color: inherit !important;\n          }\n\n          .table-block__wrapper .cell--nowrap {\n            white-space: nowrap !important;\n          }\n\n          @media (max-width: 640px) {\n            .table-block__wrapper td,\n            .table-block__wrapper th {\n              word-break: normal !important;\n            }\n          }\n\n          body a {\n            color: inherit;\n            text-decoration: none;\n          }\n  \n          table th {\n            font-weight: inherit;\n          }\n  \n          .table-block__wrapper a {\n            text-decoration: none !important;\n            color: inherit !important;\n          }\n\n          .table-block__wrapper .cell--nowrap {\n            white-space: nowrap !important;\n          }\n\n          @media (max-width: 640px) {\n            .table-block__wrapper td,\n            .table-block__wrapper th {\n              word-break: normal !important;\n            }\n          }\n\n          ul li {\n            text-indent: unset !important;\n          }\n        </style>\n          \n        <style type="text/css">\n          .kYUYrk{min-height:0px;padding:0px;} \n\n.kYUYrk ol,.kYUYrk ul{margin:0 0 0 1.1em !important;padding:0 !important;} \n\n.kYUYrk p{line-height:1;} \n\ndata-styled.g68[id="styled__TextEditorWrapper-sc-1sowtti-0"]{content:"kYUYrk,"} \n\n.zlGab p{padding:0px;margin:0px;} \n\n@media (max-width:640px){.zlGab .u-col-stack{display:block !important;width:100% !important;} } \n\ndata-styled.g212[id="styled__ExportHTMLWrapper-sc-edcwe-4"]{content:"zlGab,"} \n\n.hJTsAW a{-webkit-text-decoration:none;text-decoration:none;word-break:break-word !important;} \n\ndata-styled.g225[id="styled__TextBlockWrapper-sc-1vhinni-0"]{content:"hJTsAW,"} \n\n.crxXZk{font-size:16px;line-height:100%;} \n\n@media (max-width:640px){} \n\ndata-styled.g226[id="styled__TextBlockContent-sc-1vhinni-1"]{content:"crxXZk,"} \n\n.gcTDtb .image__content{max-width:100%;clear:both;border:none;float:none;-ms-interpolation-mode:bicubic;} \n\n@media (max-width:640px){.gcTDtb .image__align{text-align:center !important;} .gcTDtb .image__content{max-width:12% !important;width:12% !important;height:auto !important;} } \n\n.cAwjkv .image__content{max-width:100%;clear:both;border:none;float:none;-ms-interpolation-mode:bicubic;} \n\n@media (max-width:640px){.cAwjkv .image__align{text-align:center !important;} .cAwjkv .image__content{max-width:50% !important;width:50% !important;height:auto !important;} } \n\ndata-styled.g230[id="styled__ExportImageBlock-sc-360zd1-3"]{content:"gcTDtb,cAwjkv,"} \n\n.gAAMOc{font-family:Montserrat,sans-serif !important;} \n\ndata-styled.g236[id="styled__ExportLink-sc-15pmnos-5"]{content:"gAAMOc,"} \n\n@media (max-width:640px){.knOWNZ .button__align{text-align:center !important;} .knOWNZ .button__link{color:#000000 !important;width:50% !important;font-size:16px !important;font-style:normal !important;background:#ccbae4 !important;font-family:Montserrat,sans-serif !important;font-weight:400 !important;line-height:1 !important;border-color:rgba(0,0,0,.35) !important;border-style:none !important;-webkit-letter-spacing:0px !important;-moz-letter-spacing:0px !important;-ms-letter-spacing:0px !important;letter-spacing:0px !important;text-transform:none !important;border-top-width:1px !important;-webkit-text-decoration:none !important;text-decoration:none !important;border-left-width:1px !important;border-right-width:1px !important;border-bottom-width:1px !important;border-top-left-radius:22px !important;border-top-right-radius:22px !important;border-bottom-left-radius:22px !important;border-bottom-right-radius:22px !important;} .knOWNZ .button__link span{padding-top:10px !important;padding-right:20px !important;padding-bottom:10px !important;padding-left:20px !important;} } \n\n@media (max-width:640px){.dyxpBH .button__align{text-align:center !important;} .dyxpBH .button__link{color:#ffffff !important;width:50% !important;font-size:16px !important;font-style:normal !important;background:#000000 !important;font-family:Montserrat,sans-serif !important;font-weight:400 !important;line-height:1 !important;border-color:rgba(0,0,0,.35) !important;border-style:none !important;-webkit-letter-spacing:0px !important;-moz-letter-spacing:0px !important;-ms-letter-spacing:0px !important;letter-spacing:0px !important;text-transform:none !important;border-top-width:1px !important;-webkit-text-decoration:none !important;text-decoration:none !important;border-left-width:1px !important;border-right-width:1px !important;border-bottom-width:1px !important;border-top-left-radius:22px !important;border-top-right-radius:22px !important;border-bottom-left-radius:22px !important;border-bottom-right-radius:22px !important;} .dyxpBH .button__link span{padding-top:10px !important;padding-right:20px !important;padding-bottom:10px !important;padding-left:20px !important;} } \n\ndata-styled.g237[id="styled__ExportButton-sc-15pmnos-6"]{content:"knOWNZ,dyxpBH,"} \n\n.gfWeGG .icon__item{display:inline-block;} \n\n@media (max-width:640px){.gfWeGG{text-align:center !important;} .gfWeGG .img__icon{width:32px !important;height:32px !important;} .gfWeGG .icon__item.has-space{margin-right:5px !important;} } \n\ndata-styled.g265[id="styled__ExportIconWrapper-sc-169bc7z-3"]{content:"gfWeGG,"} \n\n@media (max-width:640px){.hoWHDE{text-align:center !important;} .hoWHDE .icon__item{display:inline-block !important;font-size:14px !important;} .hoWHDE .separator__item{display:inline-block !important;font-size:14px !important;} } \n\ndata-styled.g267[id="styled__ExportMenuItemBlock-sc-15geg5n-1"]{content:"hoWHDE,"} \n\n@media (max-width:640px){.gxjdRc{background-repeat:no-repeat !important;background-position:left top !important;background-size:cover !important;background-color:#ffffff !important;} } \n\n@media (max-width:640px){.UynTi{background-repeat:no-repeat !important;background-position:left top !important;background-size:cover !important;background-color:#ccbae4 !important;} } \n\ndata-styled.g274[id="styled__URow-sc-tne0x7-6"]{content:"gxjdRc,UynTi,"} \n\n@media (max-width:640px){.bBYvFX > .col__background{background-color:transparent !important;background-position:left top !important;background-repeat:no-repeat !important;background-size:cover !important;} } \n\n@media (max-width:640px){} \n\ndata-styled.g276[id="styled__UCol-sc-tne0x7-8"]{content:"bBYvFX,"} \n\n@media (max-width:640px){.cKVLlN .spacer__content{padding-top:30px !important;} } \n\ndata-styled.g278[id="styled__ExportSpacerBlock-sc-rof487-1"]{content:"cKVLlN,"} \n\n\n        </style>\n\n        <!--[if !mso]><!-->\n        <link\n          href="https://fonts.googleapis.com/css?family=Sacramento:400,700|Abril Fatface:400|Aleo:300,400,700|Arvo:400,700|Bitter:100,200,300,400,500,600,700,800,900|Bree Serif:400|Cabin:400,500,600,700|Cookie:400|Delius Swash Caps:400|Dosis:200,300,400,500,600,700,800|Droid Sans:400,700|Droid Serif:400,700|EB Garamond:400,500,600,700,800|Josefin Slab:100,200,300,400,500,600,700|Just Another Hand:400|Lakki Reddy:400|Lato:100,300,400,700,900|Libre Baskerville:400,700|Lobster:400|Lora:400,500,600,700|Mali:200,300,400,500,600,700|Merriweather:300,400,700,900|Montserrat:100,200,300,400,500,600,700,800,900|Noto Sans:400,700|Noto Serif:400,700|Nunito:200,300,400,500,600,700,800,900|Open Sans:300,400,500,600,700,800|Oswald:200,300,400,500,600,700|Poppins:100,200,300,400,500,600,700,800,900|PT Sans:400,700|PT Serif:400,700|Pinyon Script:400|Playfair Display:400,500,600,700,800,900|Quicksand:300,400,500,600,700|Raleway:100,200,300,400,500,600,700,800,900|Righteous:400|Roboto Slab:100,200,300,400,500,600,700,800,900|Roboto:100,300,400,500,700,900|Rubik:300,400,500,600,700,800,900|Sarabun:100,200,300,400,500,600,700,800|Source Sans Pro:200,300,400,600,700,900|Ubuntu:300,400,500,700|Vollkorn:400,500,600,700,800,900 "\n          rel="stylesheet"\n          type="text/css"\n        />\n        <!--<![endif]-->\n      </head>\n      <body>\n      <div id="mt-19739" class="styled__ExportHTMLWrapper-sc-edcwe-4 zlGab" style="box-shadow: none; background: rgba(0, 0, 0, 0); padding: 0px; border-color: rgb(255, 255, 255); border-style: none; border-width: 0px; border-radius: 0px;"><table id="u-body" cellpadding="0" cellspacing="0" style="border-collapse: collapse; table-layout: fixed; border-spacing: 0px; vertical-align: top; min-width: 320px; margin: 0px auto; background-color: rgba(0, 0, 0, 0); width: 100%;"><tbody><tr style="vertical-align: top;"><td style="word-break: break-word; border-collapse: collapse; vertical-align: top;">                    <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" style="background-color: rgba(0, 0, 0, 0);padding: 0px 0px 0px 0px;"><![endif]-->                  <div id="" class="template-row template-row-1 mt-row Row row__block u-row-container">           <!--[if mso]><center style="width:100%"><![endif]-->          <div class="styled__URow-sc-tne0x7-6 gxjdRc u-row" style="margin: 0px auto; min-width: 320px; max-width: 100%; overflow-wrap: break-word; word-break: break-word; background-color: rgb(255, 255, 255); border-radius: 0px;"><div class="styled__URowContent-sc-tne0x7-7" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; align-items: center; padding: 5px 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px;"><div style="display: table; border-collapse: collapse; width: 100%; height: 100%; background-color: transparent;">                  <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 5px 0px 5px 0px;background-color: #ffffff;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:100%;"><tr style="background-color: #ffffff;"><![endif]-->                          <!--[if (mso)|(IE)]><td style="width: 25%;background-color: transparent;padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: middle; display: table-cell; width: 25%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-SpacerElement--wrapper--hcd3xq1g1y8y1fjgvejn" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-SpacerElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                    <!--[if (mso)|(IE)]><td style="width: 20%;background-color: transparent;padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: middle; display: table-cell; width: 20%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 10px 10px 10px 10px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-TextElement--wrapper--t2am4gmzivv4anrma3rg" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-TextElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 10px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <div class="styled__TextBlockWrapper-sc-1vhinni-0 hJTsAW template-te-content template-TextElement--content"><div data-dynamic-display="1" class="styled__TextBlockContent-sc-1vhinni-1 crxXZk" style="display: block; text-align: left; color: rgb(0, 0, 0);"><div id="text-editor-t2am4gmzivv4anrma3rg-export__bound" class="styled__TextEditorWrapper-sc-1sowtti-0 kYUYrk"><div class="fr-box" role="application"><div class="fr-wrapper" dir="auto"><div class="fr-element fr-view fr-disabled" dir="auto" contenteditable="false" aria-disabled="true" spellcheck="true"><p><span style="font-family: Montserrat, sans-serif; font-size: 22px; letter-spacing: 0px; color: rgb(0, 0, 0); font-weight: 700;">Email Template</span></p></div></div></div></div></div></div>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                    <!--[if (mso)|(IE)]><td style="width: 30%;background-color: transparent;padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: middle; display: table-cell; width: 30%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 10px 10px 10px 10px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-MenuElement--wrapper--bvyemsm4iny07cp5ycex" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-MenuElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 10px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <!--[if (mso)|(IE)]><table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center"><tr><![endif]--><div class="styled__ExportMenuItemBlock-sc-15geg5n-1 hoWHDE direction__block" data-align="center" data-direction="horizontal" style="text-align: center;"><!--[if (mso)|(IE)]><td style="padding: 5px 15px 5px 15px;background-color: transparent;border-width: 0 0 0 0; border-color: rgba(0,0,0,.35); border-style: none;"><![endif]--><span class="icon__item" style="color: rgb(0, 0, 0); height: 100%; font-size: 14px; max-width: 100%; box-shadow: none; font-style: normal; margin: 0px; background: transparent; font-family: Montserrat, sans-serif; font-weight: 400; line-height: 1; padding: 5px 15px; border-color: rgba(0, 0, 0, 0.35); border-style: none; letter-spacing: 0px; text-transform: capitalize; border-width: 0px; text-decoration: none; border-radius: 0px; word-break: break-word; display: inline-block;">Products</span><!--[if (mso)|(IE)]></td><![endif]--><!--[if (mso)|(IE)]><td style="padding: 5px 15px 5px 15px;background-color: transparent;border-width: 0 0 0 0; border-color: rgba(0,0,0,.35); border-style: none;"><![endif]--><span class="icon__item" style="color: rgb(0, 0, 0); height: 100%; font-size: 14px; max-width: 100%; box-shadow: none; font-style: normal; margin: 0px; background: transparent; font-family: Montserrat, sans-serif; font-weight: 400; line-height: 1; padding: 5px 15px; border-color: rgba(0, 0, 0, 0.35); border-style: none; letter-spacing: 0px; text-transform: capitalize; border-width: 0px; text-decoration: none; border-radius: 0px; word-break: break-word; display: inline-block;">Why Unlayer</span><!--[if (mso)|(IE)]></td><![endif]--><!--[if (mso)|(IE)]><td style="padding: 5px 15px 5px 15px;background-color: transparent;border-width: 0 0 0 0; border-color: rgba(0,0,0,.35); border-style: none;"><![endif]--><span class="icon__item" style="color: rgb(0, 0, 0); height: 100%; font-size: 14px; max-width: 100%; box-shadow: none; font-style: normal; margin: 0px; background: transparent; font-family: Montserrat, sans-serif; font-weight: 400; line-height: 1; padding: 5px 15px; border-color: rgba(0, 0, 0, 0.35); border-style: none; letter-spacing: 0px; text-transform: capitalize; border-width: 0px; text-decoration: none; border-radius: 0px; word-break: break-word; display: inline-block;">Refer a friend</span><!--[if (mso)|(IE)]></td><![endif]--></div><!--[if (mso)|(IE)]></tr></table><![endif]-->          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                    <!--[if (mso)|(IE)]><td style="width: 25%;background-color: transparent;padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: middle; display: table-cell; width: 25%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-SpacerElement--wrapper--2g8xfhd7wbjcwqvfpknz" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-SpacerElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                          <!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->              </div></div></div>           <!--[if mso]></center><![endif]-->          </div><div id="" class="template-row template-row-2 mt-row Row row__block u-row-container">           <!--[if mso]><center style="width:100%"><![endif]-->          <div class="styled__URow-sc-tne0x7-6 UynTi u-row" style="margin: 0px auto; min-width: 320px; max-width: 100%; overflow-wrap: break-word; word-break: break-word; background-color: rgb(204, 186, 228); border-radius: 0px;"><div class="styled__URowContent-sc-tne0x7-7" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; align-items: flex-start; padding: 30px 0px 20px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px;"><div style="display: table; border-collapse: collapse; width: 100%; height: 100%; background-color: transparent;">                  <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 30px 0px 20px 0px;background-color: #ccbae4;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:100%;"><tr style="background-color: #ccbae4;"><![endif]-->                          <!--[if (mso)|(IE)]><td style="width: 25%;background-color: transparent;padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: top; display: table-cell; width: 25%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-SpacerElement--wrapper--ci19jb1lpqo65f1c81hc" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-SpacerElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                    <!--[if (mso)|(IE)]><td style="width: 50%;background-color: transparent;padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: top; display: table-cell; width: 50%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 10px 10px 10px 10px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-ImageElement--wrapper--9324245ztyb2yq92napt" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-ImageElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 10px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <table class="styled__ExportImageBlock-sc-360zd1-3 gcTDtb template-imge-content template-ImageElement--content" role="presentation" width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td class="image__align" align="center" style="font-size: 0px;"><img class="image__content" src="https://st-media-template.antsomi.com/upload/2022/07/28/88195a1c-0a47-4293-88bd-08cc74b32e9d.png" alt="" width="87.40625" height="NaN" data-proxy-image-url="https://sandbox-media-template.antsomi.com/cdp/api/v1/saved-image/external-url/r5chk55i?_token=5474r2x214z25484z254y424f4r5x2c48434i4v4r5e4&_user_id=1600080360&_account_id=1600080360&imageUrl=https://st-media-template.antsomi.com/upload/2022/07/28/88195a1c-0a47-4293-88bd-08cc74b32e9d.png" data-dynamic-display="1" style="width: 12%; opacity: 1; box-shadow: none; border-color: rgb(255, 255, 255); border-style: solid; border-width: 0px; border-radius: 0px; display: inline-block;"></td></tr></tbody></table>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div><div class="template-element template-el-2 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 18px 50px 10px 50px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-TextElement--wrapper--3pe5uleqx09xijb0h3m5" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-TextElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 18px 50px 10px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <div class="styled__TextBlockWrapper-sc-1vhinni-0 hJTsAW template-te-content template-TextElement--content"><div data-dynamic-display="1" class="styled__TextBlockContent-sc-1vhinni-1 crxXZk" style="display: block; text-align: left; color: rgb(0, 0, 0);"><div id="text-editor-3pe5uleqx09xijb0h3m5-export__bound" class="styled__TextEditorWrapper-sc-1sowtti-0 kYUYrk"><div class="fr-box" role="application"><div class="fr-wrapper" dir="auto"><div class="fr-element fr-view fr-disabled" dir="auto" contenteditable="false" aria-disabled="true" spellcheck="true"><h1 id="isPasted" style="line-height: 47.3px; color: rgb(0, 0, 0); letter-spacing: normal; text-transform: none; background-color: rgb(204, 186, 228); text-align: center; font-weight: normal; font-family: Raleway, sans-serif; font-size: 43px;"><strong style="line-height: inherit;">IT LOOKS LIKE YOU FORGOT SOMETHING</strong></h1></div></div></div></div></div></div>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div><div class="template-element template-el-3 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 10px 10px 10px 10px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-TextElement--wrapper--qo97cl2njnpsloeyhean" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-TextElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 10px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <div class="styled__TextBlockWrapper-sc-1vhinni-0 hJTsAW template-te-content template-TextElement--content"><div data-dynamic-display="1" class="styled__TextBlockContent-sc-1vhinni-1 crxXZk" style="display: block; text-align: left; color: rgb(0, 0, 0);"><div id="text-editor-qo97cl2njnpsloeyhean-export__bound" class="styled__TextEditorWrapper-sc-1sowtti-0 kYUYrk"><div class="fr-box" role="application"><div class="fr-wrapper" dir="auto"><div class="fr-element fr-view fr-disabled" dir="auto" contenteditable="false" aria-disabled="true" spellcheck="true"><p style="text-align: center;"><span style="font-family: Montserrat,sans-serif; font-size: 22px; letter-spacing: 0px; color: rgb(0, 0, 0);"><span id="isPasted" style="color: rgb(0, 0, 0); font-family: Montserrat, sans-serif; font-size: 18px; font-weight: 400; letter-spacing: normal; text-align: center; text-transform: none; background-color: rgb(204, 186, 228);">Would you like to complete your purchase?</span></span></p></div></div></div></div></div></div>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                    <!--[if (mso)|(IE)]><td style="width: 25%;background-color: transparent;padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: top; display: table-cell; width: 25%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-SpacerElement--wrapper--wdtnn0u0pgh2m50m9jth" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-SpacerElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                          <!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->              </div></div></div>           <!--[if mso]></center><![endif]-->          </div><div id="" class="template-row template-row-3 mt-row Row row__block u-row-container">           <!--[if mso]><center style="width:100%"><![endif]-->          <div class="styled__URow-sc-tne0x7-6 gxjdRc u-row" style="margin: 0px auto; min-width: 320px; max-width: 100%; overflow-wrap: break-word; word-break: break-word; background-color: rgb(255, 255, 255); border-radius: 0px;"><div class="styled__URowContent-sc-tne0x7-7" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; align-items: flex-start; padding: 30px 0px 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px;"><div style="display: table; border-collapse: collapse; width: 100%; height: 100%; background-color: transparent;">                  <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 30px 0px 0px 0px;background-color: #ffffff;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:100%;"><tr style="background-color: #ffffff;"><![endif]-->                          <!--[if (mso)|(IE)]><td style="width: 25%;background-color: transparent;padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: top; display: table-cell; width: 25%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-SpacerElement--wrapper--xnegsz66kjhvo431rv3i" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-SpacerElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                    <!--[if (mso)|(IE)]><td style="width: 50%;background-color: transparent;padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: top; display: table-cell; width: 50%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 18px 50px 17px 50px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-TextElement--wrapper--zu9bc4r8kw34y7p0mi3u" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-TextElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 18px 50px 17px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <div class="styled__TextBlockWrapper-sc-1vhinni-0 hJTsAW template-te-content template-TextElement--content"><div data-dynamic-display="1" class="styled__TextBlockContent-sc-1vhinni-1 crxXZk" style="display: block; text-align: left; color: rgb(0, 0, 0);"><div id="text-editor-zu9bc4r8kw34y7p0mi3u-export__bound" class="styled__TextEditorWrapper-sc-1sowtti-0 kYUYrk"><div class="fr-box" role="application"><div class="fr-wrapper" dir="auto"><div class="fr-element fr-view fr-disabled" dir="auto" contenteditable="false" aria-disabled="true" spellcheck="true"><h1 id="isPasted" style="line-height: 47.3px; color: rgb(0, 0, 0); letter-spacing: normal; text-transform: none; background-color: rgb(255, 255, 255); text-align: center; font-weight: normal; font-family: Raleway, sans-serif; font-size: 43px;"><strong style="line-height: inherit;">YOUR CART</strong></h1></div></div></div></div></div></div>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div><div class="template-element template-el-2 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 10px 10px 10px 10px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-ImageElement--wrapper--mfzx1so6zsk7ckehjjmz" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-ImageElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 10px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <table class="styled__ExportImageBlock-sc-360zd1-3 cAwjkv template-imge-content template-ImageElement--content" role="presentation" width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td class="image__align" align="center" style="font-size: 0px;"><img class="image__content" src="https://st-media-template.antsomi.com/upload/2022/07/28/f4524797-ed03-47ee-a688-7fc8a9eabf02.png" alt="" width="364.25" height="NaN" data-proxy-image-url="https://sandbox-media-template.antsomi.com/cdp/api/v1/saved-image/external-url/tjn4as8z?_token=5474r2x214z25484z254y424f4r5x2c48434i4v4r5e4&_user_id=1600080360&_account_id=1600080360&imageUrl=https://st-media-template.antsomi.com/upload/2022/07/28/f4524797-ed03-47ee-a688-7fc8a9eabf02.png" data-dynamic-display="1" style="width: 50%; opacity: 1; box-shadow: none; border-color: rgb(255, 255, 255); border-style: solid; border-width: 0px; border-radius: 0px; display: inline-block;"></td></tr></tbody></table>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div><div class="template-element template-el-3 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 10px 10px 10px 10px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-DividerElement--wrapper--6etcf1u42oy74j8nq69o" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-DividerElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 10px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <table role="presentation" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td align="center"><table width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; table-layout: fixed; border-spacing: 0px; vertical-align: top; border-top: 1px solid rgb(0, 0, 0);"><tbody><tr style="vertical-align: top;"><td></td></tr></tbody></table></td></tr></tbody></table>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div><div class="template-element template-el-4 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 18px 50px 0px 50px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-TextElement--wrapper--j5g4v1bim7qp9rnuuu4c" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-TextElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 18px 50px 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <div class="styled__TextBlockWrapper-sc-1vhinni-0 hJTsAW template-te-content template-TextElement--content"><div data-dynamic-display="1" class="styled__TextBlockContent-sc-1vhinni-1 crxXZk" style="display: block; text-align: left; color: rgb(0, 0, 0);"><div id="text-editor-j5g4v1bim7qp9rnuuu4c-export__bound" class="styled__TextEditorWrapper-sc-1sowtti-0 kYUYrk"><div class="fr-box" role="application"><div class="fr-wrapper" dir="auto"><div class="fr-element fr-view fr-disabled" dir="auto" contenteditable="false" aria-disabled="true" spellcheck="true"><h1 id="isPasted" style="line-height: 1.1; color: rgb(0, 0, 0); letter-spacing: normal; text-transform: none; background-color: rgb(255, 255, 255); text-align: center; font-weight: normal; font-family: Raleway, sans-serif; font-size: 22px;"><strong style="line-height: inherit;">35W Dual USB-C Port Compact Power Adapter</strong></h1></div></div></div></div></div></div>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                    <!--[if (mso)|(IE)]><td style="width: 25%;background-color: transparent;padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: top; display: table-cell; width: 25%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-SpacerElement--wrapper--8orissd091q15097zorg" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-SpacerElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                          <!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->              </div></div></div>           <!--[if mso]></center><![endif]-->          </div><div id="" class="template-row template-row-4 mt-row Row row__block u-row-container">           <!--[if mso]><center style="width:100%"><![endif]-->          <div class="styled__URow-sc-tne0x7-6 gxjdRc u-row" style="margin: 0px auto; min-width: 320px; max-width: 100%; overflow-wrap: break-word; word-break: break-word; background-color: rgb(255, 255, 255); border-radius: 0px;"><div class="styled__URowContent-sc-tne0x7-7" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; align-items: flex-start; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px;"><div style="display: table; border-collapse: collapse; width: 100%; height: 100%; background-color: transparent;">                  <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px 0px 0px 0px;background-color: #ffffff;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:100%;"><tr style="background-color: #ffffff;"><![endif]-->                          <!--[if (mso)|(IE)]><td style="width: 25%;background-color: transparent;padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: top; display: table-cell; width: 25%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-SpacerElement--wrapper--7onnlqbjcvq46wrwh8wi" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-SpacerElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                    <!--[if (mso)|(IE)]><td style="width: 25%;background-color: transparent;padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: top; display: table-cell; width: 25%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 18px 50px 10px 50px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-TextElement--wrapper--hletv8zx24jiz0ssd0zc" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-TextElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 18px 50px 10px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <div class="styled__TextBlockWrapper-sc-1vhinni-0 hJTsAW template-te-content template-TextElement--content"><div data-dynamic-display="1" class="styled__TextBlockContent-sc-1vhinni-1 crxXZk" style="display: block; text-align: left; color: rgb(0, 0, 0);"><div id="text-editor-hletv8zx24jiz0ssd0zc-export__bound" class="styled__TextEditorWrapper-sc-1sowtti-0 kYUYrk"><div class="fr-box" role="application"><div class="fr-wrapper" dir="auto"><div class="fr-element fr-view fr-disabled" dir="auto" contenteditable="false" aria-disabled="true" spellcheck="true"><h1 id="isPasted" style="line-height: 24.2px; color: rgb(0, 0, 0); letter-spacing: normal; text-transform: none; background-color: rgb(255, 255, 255); text-align: right; font-weight: normal; font-family: Raleway, sans-serif; font-size: 22px;">Price : $150</h1></div></div></div></div></div></div>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                    <!--[if (mso)|(IE)]><td style="width: 25%;background-color: transparent;padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: top; display: table-cell; width: 25%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 18px 50px 10px 50px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-TextElement--wrapper--h68cea28gwg0j859afmh" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-TextElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 18px 50px 10px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <div class="styled__TextBlockWrapper-sc-1vhinni-0 hJTsAW template-te-content template-TextElement--content"><div data-dynamic-display="1" class="styled__TextBlockContent-sc-1vhinni-1 crxXZk" style="display: block; text-align: left; color: rgb(0, 0, 0);"><div id="text-editor-h68cea28gwg0j859afmh-export__bound" class="styled__TextEditorWrapper-sc-1sowtti-0 kYUYrk"><div class="fr-box" role="application"><div class="fr-wrapper" dir="auto"><div class="fr-element fr-view fr-disabled" dir="auto" contenteditable="false" aria-disabled="true" spellcheck="true"><h1 id="isPasted" style="line-height: 24.2px; color: rgb(0, 0, 0); letter-spacing: normal; text-transform: none; background-color: rgb(255, 255, 255); text-align: left; font-weight: normal; font-family: Raleway, sans-serif; font-size: 22px;">Quantity : 1</h1></div></div></div></div></div></div>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                    <!--[if (mso)|(IE)]><td style="width: 25%;background-color: transparent;padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: top; display: table-cell; width: 25%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-SpacerElement--wrapper--qabhpqa9h59ip17xwe2c" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-SpacerElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                          <!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->              </div></div></div>           <!--[if mso]></center><![endif]-->          </div><div id="" class="template-row template-row-5 mt-row Row row__block u-row-container">           <!--[if mso]><center style="width:100%"><![endif]-->          <div class="styled__URow-sc-tne0x7-6 gxjdRc u-row" style="margin: 0px auto; min-width: 320px; max-width: 100%; overflow-wrap: break-word; word-break: break-word; background-color: rgb(255, 255, 255); border-radius: 0px;"><div class="styled__URowContent-sc-tne0x7-7" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; align-items: flex-start; padding: 0px 0px 30px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px;"><div style="display: table; border-collapse: collapse; width: 100%; height: 100%; background-color: transparent;">                  <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px 0px 30px 0px;background-color: #ffffff;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:100%;"><tr style="background-color: #ffffff;"><![endif]-->                          <!--[if (mso)|(IE)]><td style="width: 25%;background-color: transparent;padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: top; display: table-cell; width: 25%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-SpacerElement--wrapper--0amnjslq5jxqyy3i5g1e" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-SpacerElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                    <!--[if (mso)|(IE)]><td style="width: 50%;background-color: transparent;padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: top; display: table-cell; width: 50%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 10px 10px 10px 10px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-DividerElement--wrapper--dskiwlrgeo3p5n0wpkiv" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-DividerElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 10px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <table role="presentation" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td align="center"><table width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; table-layout: fixed; border-spacing: 0px; vertical-align: top; border-top: 1px solid rgb(0, 0, 0);"><tbody><tr style="vertical-align: top;"><td></td></tr></tbody></table></td></tr></tbody></table>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div><div class="template-element template-el-2 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 10px 10px 10px 10px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-ButtonElement--wrapper--aqe81y3rf7dmea91tw2x" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-ButtonElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 10px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <table class="styled__ExportButton-sc-15pmnos-6 knOWNZ template-be-content template-ButtonElement--content" role="presentation" cellspacing="0" cellpadding="0" width="100%"><tbody><tr><td id="template-ButtonElement--aqe81y3rf7dmea91tw2x" data-copy="" align="center" class="template-button--aqe81y3rf7dmea91tw2x button__align">            <!--[if mso]><v:roundrect            xmlns:v="urn:schemas-microsoft-com:vml"            xmlns:w="urn:schemas-microsoft-com:office:word"            href=""            style="height: 36px; v-text-anchor: middle; width: 364.25px"            arcsize="12.079615648593%"            stroke="f"            fillcolor=#ccbae4"          >            <v:stroke dashstyle="none" />            <w:anchorlock />            <center              style="                color: #000000;                font-family: Montserrat;                font-weight: 400;                font-size: 16px;                text-transform: none;                letter-spacing: 0px;                font-style: normal;                line-height: 1;                text-decoration: none;              "            >Check Out</center></v:roundrect><![endif]-->                        <!--[if !mso]><!-->          <a href="#" target="_blank" rel="noopener noreferrer" data-dynamic-display="1"><div class="styled__ExportLink-sc-15pmnos-5 gAAMOc button__link" font-family="Montserrat, sans-serif" style="color: rgb(0, 0, 0); width: 50%; height: 100%; font-size: 16px; max-width: 100%; box-shadow: none; font-style: normal; margin: 0px; text-align: center; background: rgb(204, 186, 228); font-family: sans-serif; font-weight: 400; line-height: 1; border-color: rgba(0, 0, 0, 0.35); border-style: none; letter-spacing: 0px; text-transform: none; border-width: 1px; text-decoration: none; border-radius: 22px; box-sizing: border-box; display: inline-block;"><span style="padding: 10px 20px; display: block;">Check Out</span></div></a>            <!--<![endif]-->        </td></tr></tbody></table>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                    <!--[if (mso)|(IE)]><td style="width: 25%;background-color: transparent;padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: top; display: table-cell; width: 25%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-SpacerElement--wrapper--wybl4zzd1pcqzn2l9wfd" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-SpacerElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                          <!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->              </div></div></div>           <!--[if mso]></center><![endif]-->          </div><div id="" class="template-row template-row-6 mt-row Row row__block u-row-container">           <!--[if mso]><center style="width:100%"><![endif]-->          <div class="styled__URow-sc-tne0x7-6 UynTi u-row" style="margin: 0px auto; min-width: 320px; max-width: 100%; overflow-wrap: break-word; word-break: break-word; background-color: rgb(204, 186, 228); border-radius: 0px;"><div class="styled__URowContent-sc-tne0x7-7" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; align-items: flex-start; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px;"><div style="display: table; border-collapse: collapse; width: 100%; height: 100%; background-color: transparent;">                  <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px 0px 0px 0px;background-color: #ccbae4;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:100%;"><tr style="background-color: #ccbae4;"><![endif]-->                          <!--[if (mso)|(IE)]><td style="width: 25%;background-color: transparent;padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: top; display: table-cell; width: 25%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-SpacerElement--wrapper--6p7llm223069afw3w7jt" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-SpacerElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                    <!--[if (mso)|(IE)]><td style="width: 50%;background-color: transparent;padding: 30px 0px 30px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: top; display: table-cell; width: 50%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 30px 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 18px 50px 0px 50px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-TextElement--wrapper--9x79u4iesx12bh75reud" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-TextElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 18px 50px 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <div class="styled__TextBlockWrapper-sc-1vhinni-0 hJTsAW template-te-content template-TextElement--content"><div data-dynamic-display="1" class="styled__TextBlockContent-sc-1vhinni-1 crxXZk" style="display: block; text-align: left; color: rgb(0, 0, 0);"><div id="text-editor-9x79u4iesx12bh75reud-export__bound" class="styled__TextEditorWrapper-sc-1sowtti-0 kYUYrk"><div class="fr-box" role="application"><div class="fr-wrapper" dir="auto"><div class="fr-element fr-view fr-disabled" dir="auto" contenteditable="false" aria-disabled="true" spellcheck="true"><h1 id="isPasted" style="line-height: 1.2; color: rgb(0, 0, 0); letter-spacing: normal; text-transform: none; background-color: rgb(204, 186, 228); text-align: center; font-weight: normal; font-family: Raleway, sans-serif; font-size: 22px;"><strong style="line-height: inherit;">Any questions?</strong></h1></div></div></div></div></div></div>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div><div class="template-element template-el-2 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 10px 10px 10px 10px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-TextElement--wrapper--4c3frctqtgjh84xaci86" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-TextElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 10px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <div class="styled__TextBlockWrapper-sc-1vhinni-0 hJTsAW template-te-content template-TextElement--content"><div data-dynamic-display="1" class="styled__TextBlockContent-sc-1vhinni-1 crxXZk" style="display: block; text-align: left; color: rgb(0, 0, 0);"><div id="text-editor-4c3frctqtgjh84xaci86-export__bound" class="styled__TextEditorWrapper-sc-1sowtti-0 kYUYrk"><div class="fr-box" role="application"><div class="fr-wrapper" dir="auto"><div class="fr-element fr-view fr-disabled" dir="auto" contenteditable="false" aria-disabled="true" spellcheck="true"><p style="text-align: center;"><span style="font-family: Montserrat,sans-serif; font-size: 22px; letter-spacing: 0px; color: rgb(0, 0, 0);"><strong><span id="isPasted" style="color: rgb(0, 0, 0); font-family: Montserrat, sans-serif; font-size: 14px; font-weight: 400; letter-spacing: normal; text-align: center; text-transform: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.&nbsp;</span></strong></span></p></div></div></div></div></div></div>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div><div class="template-element template-el-3 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 10px 10px 10px 10px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-ButtonElement--wrapper--9zm69vj0xt37bnlxh2mu" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-ButtonElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 10px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <table class="styled__ExportButton-sc-15pmnos-6 dyxpBH template-be-content template-ButtonElement--content" role="presentation" cellspacing="0" cellpadding="0" width="100%"><tbody><tr><td id="template-ButtonElement--9zm69vj0xt37bnlxh2mu" data-copy="" align="center" class="template-button--9zm69vj0xt37bnlxh2mu button__align">            <!--[if mso]><v:roundrect            xmlns:v="urn:schemas-microsoft-com:vml"            xmlns:w="urn:schemas-microsoft-com:office:word"            href=""            style="height: 36px; v-text-anchor: middle; width: 364.25px"            arcsize="12.079615648593%"            stroke="f"            fillcolor=#000000"          >            <v:stroke dashstyle="none" />            <w:anchorlock />            <center              style="                color: #ffffff;                font-family: Montserrat;                font-weight: 400;                font-size: 16px;                text-transform: none;                letter-spacing: 0px;                font-style: normal;                line-height: 1;                text-decoration: none;              "            >Contact Us</center></v:roundrect><![endif]-->                        <!--[if !mso]><!-->          <a href="#" target="_blank" rel="noopener noreferrer" data-dynamic-display="1"><div class="styled__ExportLink-sc-15pmnos-5 gAAMOc button__link" font-family="Montserrat, sans-serif" style="color: rgb(255, 255, 255); width: 50%; height: 100%; font-size: 16px; max-width: 100%; box-shadow: none; font-style: normal; margin: 0px; text-align: center; background: rgb(0, 0, 0); font-family: sans-serif; font-weight: 400; line-height: 1; border-color: rgba(0, 0, 0, 0.35); border-style: none; letter-spacing: 0px; text-transform: none; border-width: 1px; text-decoration: none; border-radius: 22px; box-sizing: border-box; display: inline-block;"><span style="padding: 10px 20px; display: block;">Contact Us</span></div></a>            <!--<![endif]-->        </td></tr></tbody></table>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                    <!--[if (mso)|(IE)]><td style="width: 25%;background-color: transparent;padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: top; display: table-cell; width: 25%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-SpacerElement--wrapper--9fqgfejj1l2yvghhle6p" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-SpacerElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                          <!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->              </div></div></div>           <!--[if mso]></center><![endif]-->          </div><div id="" class="template-row template-row-7 mt-row Row row__block u-row-container">           <!--[if mso]><center style="width:100%"><![endif]-->          <div class="styled__URow-sc-tne0x7-6 gxjdRc u-row" style="margin: 0px auto; min-width: 320px; max-width: 100%; overflow-wrap: break-word; word-break: break-word; background-color: rgb(255, 255, 255); border-radius: 0px;"><div class="styled__URowContent-sc-tne0x7-7" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; align-items: flex-start; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px;"><div style="display: table; border-collapse: collapse; width: 100%; height: 100%; background-color: transparent;">                  <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px 0px 0px 0px;background-color: #ffffff;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:100%;"><tr style="background-color: #ffffff;"><![endif]-->                          <!--[if (mso)|(IE)]><td style="width: 25%;background-color: transparent;padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: top; display: table-cell; width: 25%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-SpacerElement--wrapper--n4gg48f3rn74338oz8c4" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-SpacerElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                    <!--[if (mso)|(IE)]><td style="width: 50%;background-color: transparent;padding: 30px 0px 30px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: top; display: table-cell; width: 50%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 30px 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 10px 10px 10px 10px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-EmailIconsElement--wrapper--24bl9zacj40vmc01tmpq" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-EmailIconsElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 10px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <div><div class="styled__ExportIconWrapper-sc-169bc7z-3 gfWeGG icons__block" data-align="center" style="display: block; text-align: center;">            <!--[if (mso)|(IE)]><table width="100%" cellPadding="0" cellSpacing="0"><tbody><tr><td align="center"><table><tbody><tr><![endif]-->                            <!--[if (mso)|(IE)]><td style="padding-right: 5px"><![endif]-->                <a class="icon__item has-space" href="https://facebook.com/" target="_blank" rel="" title="https://facebook.com/" style="margin-right: 5px;"><img class="img__icon" src="https://st-media-template.antsomi.com/icons/circle-black/facebook.png" alt="facebook" width="32" height="32"></a>                  <!--[if (mso)|(IE)]></td><![endif]-->                                  <!--[if (mso)|(IE)]><td style="padding-right: 5px"><![endif]-->                <a class="icon__item has-space" href="https://instagram.com/" target="_blank" rel="" title="https://instagram.com/" style="margin-right: 5px;"><img class="img__icon" src="https://st-media-template.antsomi.com/icons/circle-black/instagram.png" alt="instagram" width="32" height="32"></a>                  <!--[if (mso)|(IE)]></td><![endif]-->                                  <!--[if (mso)|(IE)]><td style="padding-right: 0"><![endif]-->                <a class="icon__item " href="https://pinterest.com/" target="_blank" rel="" title="https://pinterest.com/" style="margin-right: 0px;"><img class="img__icon" src="https://st-media-template.antsomi.com/icons/circle-black/pinterest.png" alt="pinterest" width="32" height="32"></a>                  <!--[if (mso)|(IE)]></td><![endif]-->                            <!--[if (mso)|(IE)]></tr></tbody></table></td></tr></tbody></table><![endif]-->          </div></div>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div><div class="template-element template-el-2 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 10px 10px 10px 10px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-DividerElement--wrapper--4w8unvj32lk5e84x2p3b" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-DividerElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 10px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <table role="presentation" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td align="center"><table width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; table-layout: fixed; border-spacing: 0px; vertical-align: top; border-top: 1px solid rgb(0, 0, 0);"><tbody><tr style="vertical-align: top;"><td></td></tr></tbody></table></td></tr></tbody></table>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div><div class="template-element template-el-3 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 10px 50px 10px 50px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-TextElement--wrapper--ntyvbh9jf8g9kw9s1trj" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-TextElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 10px 50px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <div class="styled__TextBlockWrapper-sc-1vhinni-0 hJTsAW template-te-content template-TextElement--content"><div data-dynamic-display="1" class="styled__TextBlockContent-sc-1vhinni-1 crxXZk" style="display: block; text-align: left; color: rgb(0, 0, 0);"><div id="text-editor-ntyvbh9jf8g9kw9s1trj-export__bound" class="styled__TextEditorWrapper-sc-1sowtti-0 kYUYrk"><div class="fr-box" role="application"><div class="fr-wrapper" dir="auto"><div class="fr-element fr-view fr-disabled" dir="auto" contenteditable="false" aria-disabled="true" spellcheck="true"><p style="text-align: center;"><span style="font-family: Montserrat, sans-serif; font-size: 13px; letter-spacing: 0px; color: rgb(0, 0, 0);"><span id="isPasted" style="color: rgb(0, 0, 0); font-family: Montserrat, sans-serif; font-weight: 400; letter-spacing: normal; text-align: center; text-transform: none;">2261 Market Street #4667 San Francisco, CA 94114 All rights reserved. &nbsp;</span></span></p><p style="text-align: center;"><span style="font-family: Montserrat, sans-serif; font-size: 13px; letter-spacing: 0px; color: rgb(0, 0, 0);"><span style="color: rgb(0, 0, 0); font-family: Montserrat, sans-serif; font-weight: 400; letter-spacing: normal; text-align: center; text-transform: none;">Company No. 94114</span></span><span style="font-family: Montserrat,sans-serif; font-size: 22px; letter-spacing: 0px; color: rgb(0, 0, 0);"></span></p></div></div></div></div></div></div>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div><div class="template-element template-el-4 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 10px 10px 10px 10px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-MenuElement--wrapper--4tdemjjphy0vvgc50zrz" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-MenuElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 10px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <!--[if (mso)|(IE)]><table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center"><tr><![endif]--><div class="styled__ExportMenuItemBlock-sc-15geg5n-1 hoWHDE direction__block" data-align="center" data-direction="horizontal" style="text-align: center;"><!--[if (mso)|(IE)]><td style="padding: 0px 2px 0px 2px;background-color: transparent;border-width: 0 0 0 0; border-color: rgba(0,0,0,.35); border-style: none;"><![endif]--><span class="icon__item" style="color: rgb(0, 0, 0); height: 100%; font-size: 14px; max-width: 100%; box-shadow: none; font-style: normal; margin: 0px; background: transparent; font-family: Arial, sans-serif; font-weight: 400; line-height: 1; padding: 0px 2px; border-color: rgba(0, 0, 0, 0.35); border-style: none; letter-spacing: 0px; text-transform: capitalize; border-width: 0px; text-decoration: none; border-radius: 0px; word-break: break-word; display: inline-block;">Preferences</span><!--[if (mso)|(IE)]></td><![endif]--><!--[if (mso)|(IE)]><td style="padding: 0px 2px 0px 2px;background-color: transparent;border-width: 0 0 0 0; border-color: rgba(0,0,0,.35); border-style: none;"><![endif]--><span class="separator__item" style="color: rgb(0, 0, 0); height: 100%; font-size: 14px; max-width: 100%; box-shadow: none; font-style: normal; margin: 0px; background: transparent; font-family: Arial, sans-serif; font-weight: 400; line-height: 1; padding: 0px 2px; border-color: rgba(0, 0, 0, 0.35); border-style: none; letter-spacing: 0px; text-transform: capitalize; border-width: 0px; text-decoration: none; border-radius: 0px; word-break: break-word; display: inline-block;">|</span><!--[if (mso)|(IE)]></td><![endif]--><!--[if (mso)|(IE)]><td style="padding: 0px 2px 0px 2px;background-color: transparent;border-width: 0 0 0 0; border-color: rgba(0,0,0,.35); border-style: none;"><![endif]--><span class="icon__item" style="color: rgb(0, 0, 0); height: 100%; font-size: 14px; max-width: 100%; box-shadow: none; font-style: normal; margin: 0px; background: transparent; font-family: Arial, sans-serif; font-weight: 400; line-height: 1; padding: 0px 2px; border-color: rgba(0, 0, 0, 0.35); border-style: none; letter-spacing: 0px; text-transform: capitalize; border-width: 0px; text-decoration: none; border-radius: 0px; word-break: break-word; display: inline-block;">Unsubscribe </span><!--[if (mso)|(IE)]></td><![endif]--><!--[if (mso)|(IE)]><td style="padding: 0px 2px 0px 2px;background-color: transparent;border-width: 0 0 0 0; border-color: rgba(0,0,0,.35); border-style: none;"><![endif]--><span class="separator__item" style="color: rgb(0, 0, 0); height: 100%; font-size: 14px; max-width: 100%; box-shadow: none; font-style: normal; margin: 0px; background: transparent; font-family: Arial, sans-serif; font-weight: 400; line-height: 1; padding: 0px 2px; border-color: rgba(0, 0, 0, 0.35); border-style: none; letter-spacing: 0px; text-transform: capitalize; border-width: 0px; text-decoration: none; border-radius: 0px; word-break: break-word; display: inline-block;">|</span><!--[if (mso)|(IE)]></td><![endif]--><!--[if (mso)|(IE)]><td style="padding: 0px 2px 0px 2px;background-color: transparent;border-width: 0 0 0 0; border-color: rgba(0,0,0,.35); border-style: none;"><![endif]--><span class="icon__item" style="color: rgb(0, 0, 0); height: 100%; font-size: 14px; max-width: 100%; box-shadow: none; font-style: normal; margin: 0px; background: transparent; font-family: Arial, sans-serif; font-weight: 400; line-height: 1; padding: 0px 2px; border-color: rgba(0, 0, 0, 0.35); border-style: none; letter-spacing: 0px; text-transform: capitalize; border-width: 0px; text-decoration: none; border-radius: 0px; word-break: break-word; display: inline-block;">View in browser</span><!--[if (mso)|(IE)]></td><![endif]--></div><!--[if (mso)|(IE)]></tr></table><![endif]-->          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                    <!--[if (mso)|(IE)]><td style="width: 25%;background-color: transparent;padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->        <div id="" class="styled__UCol-sc-tne0x7-8 bBYvFX u-col u-col-stack" style="height: 100%; vertical-align: top; display: table-cell; width: 25%;"><div class="col__background" style="background-color: transparent; border-radius: 0px;">              <!--[if (!mso)&(!IE)]><!-->             <div class="col__styles" style="inset: 0px; width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px;">              <!--<![endif]-->            <div class="template-element template-el-1 Element mt-element"><div>          <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"><tr><td style="padding: 0px 0px 0px 0px;border-width: 0px 0px 0px 0px; border-color: #000000; border-style: none;background: transparent;"><![endif]-->                  <!--[if !mso]><!-->        <div id="template-SpacerElement--wrapper--yajkzevoakcsj0tjqwhw" class="styled__ContentExportBlock-sc-1iyxbro-4 iSSqBW  template-SpacerElement--wrapper" style="width: auto; z-index: 0; max-width: 100%; position: relative; box-shadow: none; margin: 0px; background: transparent; padding: 0px; border-color: rgb(0, 0, 0); border-style: none; border-width: 0px; border-radius: 0px; inset: 0px; overflow: hidden; box-sizing: border-box;">          <!--<![endif]-->          <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>          <!--[if !mso]><!-->        </div>          <!--<![endif]-->                          <!--[if (mso)|(IE)]></td></tr></table><![endif]-->              </div></div>                <!--[if (!mso)&(!IE)]><!-->               </div>              <!--<![endif]-->            </div></div>           <!--[if mso]></td><![endif]-->                          <!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->              </div></div></div>           <!--[if mso]></center><![endif]-->          </div>                    <!--[if (mso)|(IE)]></td></tr></table><![endif]-->                  </td></tr></tbody></table></div>\n      </body>\n    </html>\n  ';

package/es/components/organism/PreviewTemplateModal/constants/index.d.ts

@@ -1,3 +1,4 @@
 export * from './dataSample';
 export * from './defaultProps';
 export * from './variables';
+export * from './html';

package/es/components/organism/PreviewTemplateModal/constants/index.js

@@ -1,3 +1,4 @@
 export * from './dataSample';
 export * from './defaultProps';
 export * from './variables';
+export * from './html';

package/es/components/template/TemplateListing/components/CategoryListing/index.js

@@ -106,7 +106,7 @@ export const CategoryListing = memo(props => {
         return menuItems;
     }, [getItem, items]);
     return show ? (React.createElement(MenuWrapper, { "$width": width },
-        React.createElement(Spin, { spinning: loading, wrapperClassName: "template-listing__loading" }, isEmpty(menuItems) ? (React.createElement("div", { className: "empty-wrapper" },
+        React.createElement(Spin, { spinning: loading, wrapperClassName: "template-listing__loading" }, isEmpty(menuItems) && !loading ? (React.createElement("div", { className: "empty-wrapper" },
             React.createElement(Empty, null))) : (React.createElement(Menu, Object.assign({ items: menuItems, inlineIndent: 0, mode: "inline", defaultOpenKeys: items === null || items === void 0 ? void 0 : items.map(item => String(item.key)), expandIcon: React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: 20, color: (_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } }), onClick: handleClickMenu }, restOfProps)))))) : null;
 });
 CategoryListing.displayName = 'CategoryListing';

package/es/components/template/TemplateListing/components/CategoryListing/styled.js

@@ -8,6 +8,7 @@ export const MenuWrapper = styled.div `
   width: ${({ $width }) => ($width !== undefined ? `${$width}px` : 'auto')};
   overflow: auto;
   overflow-x: hidden;
+  border-right: 1px solid rgba(5, 5, 5, 0.06);
 
   .antsomi-menu {
     height: 100%;
@@ -33,7 +34,6 @@ export const MenuWrapper = styled.div `
   .empty-wrapper {
     width: 100%;
     height: 100%;
-    border-right: 1px solid rgba(5, 5, 5, 0.06);
     box-sizing: border-box;
   }
 `;

package/es/components/template/TemplateListing/hooks/useTemplateListing.d.ts

@@ -9,11 +9,11 @@ interface TemplateListingOptions {
     config: TTemplateListingConfig;
     checkedCategoriesDefault?: TCheckedCategories;
 }
-type TState = {
+type TState<T> = {
     checkedCategories: TCheckedCategories;
     openCategoryKeys: string[];
     selectedTemplateId?: TThumbnailCardId;
-    selectTemplateAction?: TSelectTemplateAction;
+    selectTemplateAction?: TSelectTemplateAction | T;
 };
 /**
  * Custom React Hook for managing state and data fetching logic related to a template listing.
@@ -38,14 +38,15 @@ type TState = {
  *
  * @property {Function} onLoadMore - A function to load more template data when scrolling in the template listing.
  */
-export declare const useTemplateListing: (options: TemplateListingOptions) => {
+export declare const useTemplateListing: <T = undefined>(options: TemplateListingOptions) => {
     categoryItems: TCategoryItem[];
     templateItems: TTemplateItem[];
     openCategoryKeys: string[];
     similarTemplates: TTemplateItem[];
     templateDetail: import("../../../../models/ObjectTemplate").ObjectTemplate | undefined;
     checkedCategories: TCheckedCategories;
-    selectTemplateAction: TSelectTemplateAction | undefined;
+    selectTemplateAction: TSelectTemplateAction | T | undefined;
+    previewTemplateCategories: TCategoryItem[];
     isLoadingCategoryList: boolean;
     isLoadingTemplateList: boolean;
     isLoadingTemplateDetail: boolean;
@@ -56,7 +57,6 @@ export declare const useTemplateListing: (options: TemplateListingOptions) => {
     onRemoveObjectTemplate: (id: TThumbnailCardId) => void;
     onLoadMore: () => void;
     onSelectTemplate: (id: TThumbnailCardId, action: TSelectTemplateAction) => void;
-    onClosePreviewModal: () => void;
-    setState: import("react").Dispatch<import("react").SetStateAction<TState>>;
+    setState: import("react").Dispatch<import("react").SetStateAction<TState<T>>>;
 };
 export {};

package/es/components/template/TemplateListing/hooks/useTemplateListing.js

@@ -137,6 +137,28 @@ export const useTemplateListing = (options) => {
         const maxSimilarTemplateLength = 4;
         return (getShuffleArray(templateItems.filter(item => item.id !== selectedTemplateId)).slice(0, maxSimilarTemplateLength) || []);
     }, [templateItems, selectedTemplateId]);
+    const previewTemplateCategories = useDeepCompareMemo(() => {
+        if ((categoryItems === null || categoryItems === void 0 ? void 0 : categoryItems.length) && !!templateDetail) {
+            /**
+             * Filter category items has value of object template
+             * and filter child items has value of object template
+             */
+            return categoryItems
+                .filter(item => {
+                const values = templateDetail.model[item.key];
+                return typeof values === 'object' ? !isEmpty(values) : !!values;
+            })
+                .map(item => {
+                var _a;
+                return (Object.assign(Object.assign({}, item), { children: (_a = item.children) === null || _a === void 0 ? void 0 : _a.filter(childItem => {
+                        let values = templateDetail.model[item.key];
+                        values = Array.isArray(values) ? values : [values];
+                        return values.includes(+`${childItem.key}`.split(CATEGORY_SPLIT_KEY)[1]);
+                    }) }));
+            });
+        }
+        return [];
+    }, [categoryItems, templateDetail]);
     // Effects
     useDeepCompareEffect(() => {
         setState(prev => (Object.assign(Object.assign({}, prev), { openCategoryKeys: (categoryList === null || categoryList === void 0 ? void 0 : categoryList.map(({ categoryCode }) => categoryCode)) || [] })));
@@ -176,9 +198,6 @@ export const useTemplateListing = (options) => {
     const onSelectTemplate = useCallback((id, action) => {
         setState(prev => (Object.assign(Object.assign({}, prev), { selectedTemplateId: id, selectTemplateAction: action })));
     }, []);
-    const onClosePreviewModal = useCallback(() => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { selectedTemplateId: undefined })));
-    }, []);
     return {
         // MapKeys
         categoryItems,
@@ -189,6 +208,7 @@ export const useTemplateListing = (options) => {
         templateDetail,
         checkedCategories,
         selectTemplateAction,
+        previewTemplateCategories,
         isLoadingCategoryList,
         isLoadingTemplateList,
         isLoadingTemplateDetail,
@@ -200,7 +220,6 @@ export const useTemplateListing = (options) => {
         onRemoveObjectTemplate,
         onLoadMore,
         onSelectTemplate,
-        onClosePreviewModal,
         setState,
     };
 };

package/es/components/template/TemplateListing/index.js

@@ -31,9 +31,9 @@ export const TemplateListing = memo(props => {
     const [openPreviewModal, setOpenPreviewModal] = useState(false);
     // Variables
     const { items = [], gap = LISTING_GAP_DEFAULT, loading = false, onLoadMoreTemplates = () => { }, } = templatesProps || {};
-    const _a = previewModalProps || {}, { informationProps, onOk, onCancel } = _a, restOfPreviewModalProps = __rest(_a, ["informationProps", "onOk", "onCancel"]);
-    const _b = informationProps || {}, { onButtonClick } = _b, restOfPreviewModalInfoProps = __rest(_b, ["onButtonClick"]);
-    const _c = templateItemProps || {}, { width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, onClickPreview } = _c, restOfTemplateItemProps = __rest(_c, ["width", "height", "onClickPreview"]);
+    const _a = previewModalProps || {}, { onOk, onCancel } = _a, restOfPreviewModalProps = __rest(_a, ["onOk", "onCancel"]);
+    const _b = templateItemProps || {}, { width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, previewBtnProps } = _b, restOfTemplateItemProps = __rest(_b, ["width", "height", "previewBtnProps"]);
+    const { onClick: onClickPreview } = previewBtnProps || {};
     const isHasData = items.length > 0;
     // Hooks
     const { ref: containerRef, itemPerRow, ratio, gap: listingGap, } = useListingItemResize({
@@ -62,10 +62,6 @@ export const TemplateListing = memo(props => {
         onCancel === null || onCancel === void 0 ? void 0 : onCancel(e);
         setOpenPreviewModal(false);
     };
-    const handleClickPreviewModalInfoBtn = e => {
-        onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick(e);
-        onCancel === null || onCancel === void 0 ? void 0 : onCancel(e);
-    };
     return (React.createElement(TemplateListingWrapper, null,
         React.createElement(CategoryListing, Object.assign({}, categoryListingProps)),
         React.createElement(Spin, { spinning: loading, wrapperClassName: "template-listing__loading template-listing__loading--full" },
@@ -77,10 +73,12 @@ export const TemplateListing = memo(props => {
                     } },
                     React.createElement(BlankTemplate, Object.assign({ width: width * ratio, height: height * ratio }, blankTemplateProps)), items === null || items === void 0 ? void 0 :
                     items.map(({ id, name, thumbnail }, index) => (React.createElement("div", { key: id },
-                        React.createElement(ThumbnailCard, Object.assign({ id: id, name: name, width: width * ratio, height: height * ratio, thumbnail: thumbnail, className: `animate__animated animate__fadeIn ${templateItemProps.className}`, onClickPreview: handleClickThumbnailPreview }, restOfTemplateItemProps)),
+                        React.createElement(ThumbnailCard, Object.assign({ id: id, name: name, width: width * ratio, height: height * ratio, thumbnail: thumbnail, className: `animate__animated animate__fadeIn ${templateItemProps.className}`, previewBtnProps: {
+                                onClick: handleClickThumbnailPreview,
+                            } }, restOfTemplateItemProps)),
                         index === items.length - 1 && React.createElement(LoadMoreBlock, { ref: loadMoreRef }))))),
                 !loading && !blankTemplateProps.show && !isHasData && React.createElement(Empty, Object.assign({}, emptyProps)))),
-        React.createElement(PreviewTemplateModal, Object.assign({ informationProps: Object.assign({ onButtonClick: handleClickPreviewModalInfoBtn }, restOfPreviewModalInfoProps), open: openPreviewModal, onOk: handleOkPreviewModal, onCancel: handleCancelPreviewModal }, restOfPreviewModalProps))));
+        React.createElement(PreviewTemplateModal, Object.assign({ open: openPreviewModal, onOk: handleOkPreviewModal, onCancel: handleCancelPreviewModal }, restOfPreviewModalProps))));
 });
 TemplateListing.displayName = 'TemplateListing';
 TemplateListing.defaultProps = TEMPLATE_LISTING_DEFAULT;

package/es/components/template/TemplateListing/types/TemplateListing.d.ts

@@ -23,4 +23,4 @@ export interface TTemplateItem {
     name?: ThumbnailCardProps['name'];
     thumbnail?: ThumbnailCardProps['thumbnail'];
 }
-export type TSelectTemplateAction = 'edit' | 'preview';
+export type TSelectTemplateAction = 'edit' | 'preview' | 'use';

package/es/queries/TemplateListing/index.js

@@ -9,6 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 // Libraries
 import { useInfiniteQuery, useMutation, useQuery, } from '@tanstack/react-query';
+import { omit } from 'lodash';
 // Services
 import { templateListingServices, } from '@antscorp/antsomi-ui/es/services/TemplateListing';
 // Constants
@@ -80,7 +81,7 @@ export const usePersistTemplate = (params) => {
                     return objectTemplate.update(params);
                 case 'create':
                 default:
-                    return objectTemplate.create(params);
+                    return objectTemplate.create(Object.assign(Object.assign({}, params), { data: omit(params.data, ['template_id']) }));
             }
         }, onSettled() {
             queryClientAntsomiUI.invalidateQueries([QUERY_KEYS.GET_OBJECT_TEMPLATE_LIST], {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.23",
+  "version": "1.3.5-beta.25",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",