npm - @antscorp/antsomi-ui - Versions diffs - 1.3.5-beta.24 → 1.3.5-beta.26 - Mend

@antscorp/antsomi-ui 1.3.5-beta.24 → 1.3.5-beta.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

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

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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 \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 \n <meta http-equiv="X-UA-Compatible" content="IE=edge" />\n \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 \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 \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;">  <div id="" class="template-row template-row-1 mt-row Row row__block u-row-container">  <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;">   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>  </div>   </div></div>  </div>  </div></div>   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <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>  </div>   </div></div>  </div>  </div></div>   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <div class="styled__ExportMenuItemBlock-sc-15geg5n-1 hoWHDE direction__block" data-align="center" data-direction="horizontal" style="text-align: center;"><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><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><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></div>  </div>   </div></div>  </div>  </div></div>   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>  </div>   </div></div>  </div>  </div></div>   </div></div></div>  </div><div id="" class="template-row template-row-2 mt-row Row row__block u-row-container">  <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;">   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>  </div>   </div></div>  </div>  </div></div>   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <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>  </div>   </div></div><div class="template-element template-el-2 Element mt-element"><div>   <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;">  <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>  </div>   </div></div><div class="template-element template-el-3 Element mt-element"><div>   <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;">  <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>  </div>   </div></div>  </div>  </div></div>   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>  </div>   </div></div>  </div>  </div></div>   </div></div></div>  </div><div id="" class="template-row template-row-3 mt-row Row row__block u-row-container">  <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;">   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>  </div>   </div></div>  </div>  </div></div>   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <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>  </div>   </div></div><div class="template-element template-el-2 Element mt-element"><div>   <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;">  <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>  </div>   </div></div><div class="template-element template-el-3 Element mt-element"><div>   <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;">  <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>  </div>   </div></div><div class="template-element template-el-4 Element mt-element"><div>   <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;">  <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>  </div>   </div></div>  </div>  </div></div>   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>  </div>   </div></div>  </div>  </div></div>   </div></div></div>  </div><div id="" class="template-row template-row-4 mt-row Row row__block u-row-container">  <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;">   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>  </div>   </div></div>  </div>  </div></div>   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <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>  </div>   </div></div>  </div>  </div></div>   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <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>  </div>   </div></div>  </div>  </div></div>   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>  </div>   </div></div>  </div>  </div></div>   </div></div></div>  </div><div id="" class="template-row template-row-5 mt-row Row row__block u-row-container">  <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;">   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>  </div>   </div></div>  </div>  </div></div>   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <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>  </div>   </div></div><div class="template-element template-el-2 Element mt-element"><div>   <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;">  <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">   <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>  </td></tr></tbody></table>  </div>   </div></div>  </div>  </div></div>   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>  </div>   </div></div>  </div>  </div></div>   </div></div></div>  </div><div id="" class="template-row template-row-6 mt-row Row row__block u-row-container">  <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;">   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>  </div>   </div></div>  </div>  </div></div>   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <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>  </div>   </div></div><div class="template-element template-el-2 Element mt-element"><div>   <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;">  <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. </span></strong></span></p></div></div></div></div></div></div>  </div>   </div></div><div class="template-element template-el-3 Element mt-element"><div>   <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;">  <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">   <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>  </td></tr></tbody></table>  </div>   </div></div>  </div>  </div></div>   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>  </div>   </div></div>  </div>  </div></div>   </div></div></div>  </div><div id="" class="template-row template-row-7 mt-row Row row__block u-row-container">  <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;">   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>  </div>   </div></div>  </div>  </div></div>   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <div><div class="styled__ExportIconWrapper-sc-169bc7z-3 gfWeGG icons__block" data-align="center" style="display: block; text-align: center;">   <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>   <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>   <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>   </div></div>  </div>   </div></div><div class="template-element template-el-2 Element mt-element"><div>   <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;">  <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>  </div>   </div></div><div class="template-element template-el-3 Element mt-element"><div>   <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;">  <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.  </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>  </div>   </div></div><div class="template-element template-el-4 Element mt-element"><div>   <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;">  <div class="styled__ExportMenuItemBlock-sc-15geg5n-1 hoWHDE direction__block" data-align="center" data-direction="horizontal" style="text-align: center;"><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><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><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><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><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></div>  </div>   </div></div>  </div>  </div></div>   <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;">  <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;">  <div class="template-element template-el-1 Element mt-element"><div>   <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;">  <table class="styled__ExportSpacerBlock-sc-rof487-1 cKVLlN"><tbody><tr><td class="spacer__content" style="padding-top: 30px;"></td></tr></tbody></table>  </div>   </div></div>  </div>  </div></div>   </div></div></div>  </div>  </td></tr></tbody></table></div>\n </body>\n </html>\n ';

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

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/constants/theme.js CHANGED Viewed

@@ -149,7 +149,7 @@ THEME.components = {
     },
     Tabs: {
         colorPrimary: '#1F5FAC',
-        horizontalItemPadding: '10px 20px',
+        horizontalItemPadding: '17px 30px',
         horizontalItemGutter: 0,
         lineWidthBold: 3,
         titleFontSize: 14,

package/es/queries/TemplateListing/index.js CHANGED Viewed

@@ -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 CHANGED Viewed

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