@bikdotai/bik-component-library 0.0.718-beta.7 → 0.0.718-beta.8

package/dist/cjs/components/template-preview/RCS/RCSPreview.styled.js

@@ -0,0 +1,128 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(e);o.default.div`
+	background-color: ${e=>e.isCarousal?"#E0E0E0":"white"};
+	border-radius: 4px;
+	position: relative;
+	height: ${e=>e.isCarousal?"100%":"auto"};
+`;const i=o.default.div`
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 20px;
+	padding: 12px;
+	color: ${t.COLORS.content.primary};
+	word-wrap: break-word;
+`,n=o.default(i)`
+	font-weight: 600;
+	margin-bottom: 8px;
+`,a=o.default(i)`
+	font-weight: 600;
+`,d=o.default.div`
+	background: ${t.COLORS.surface.standard};
+	border-radius: 12px;
+	position: relative;
+	height: 100%;
+	display: flex;
+	flex-direction: ${e=>e.isHorizontalOrientation?"row":"column"};
+
+	${e=>e.needBorder?e.showDashedBorder?`border: 2px dashed ${t.COLORS.content.brand};`:e.hasError?`border: 2px solid ${t.COLORS.content.negative};`:e.showBorder?`border: 2px solid ${t.COLORS.stroke.brand};`:`border: 2px solid ${t.COLORS.stroke.primary};`:"border: none;"}
+
+	:hover {
+		${e=>{if(e.isPreview||!e.needBorder)return"";return`\n\t\t\t\tborder: 2px ${e.isWhatsappCarousel?e.hasError?"dashed":e.showBorder?"solid":"dashed":"solid"} ${t.COLORS.stroke.brand};\n\t\t\t\tbox-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);\n\t\t\t`}}
+	}
+
+	.text--template {
+		border: 2px solid ${t.COLORS.stroke.primary};
+		border-radius: 12px;
+		flex: 1;
+	}
+`,s=o.default.div`
+	padding: 12px 0px;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: center;
+	gap: 12px;
+	flex-wrap: wrap;
+`,p=o.default.div`
+	border-radius: 8px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: 152px;
+	margin-bottom: ${e=>e.isHorizontal?"":"4px"};
+	width: ${e=>e.isHorizontal?"50%":"auto"};
+`,l=o.default.div`
+	border-radius: 12px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	padding: 4px;
+	background-color: #ede7e8;
+	margin: 4px;
+	max-width: 200px;
+`,x=o.default.div`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	margin-left: 4px;
+	max-width: 180px;
+`,f=o.default.p`
+	white-space: nowrap;
+	color: #4c5567;
+	max-width: 100px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding: 0px;
+	margin: 0px;
+	font-size: 12px;
+	font-weight: 500;
+	line-width: 20px;
+`,u=o.default.div`
+	border: 1px solid ${t.COLORS.stroke.primary};
+	position: relative;
+	height: 500px;
+	overflow-y: auto;
+	border-radius: ${e=>{var t;return null!==(t=e.borderRadius)&&void 0!==t?t:"8px"}};
+	box-shadow: 0px 2px 8px 0px #0000001f;
+	background-color: white;
+`,c=o.default.div`
+	height: 50px;
+	background-color: ${t.COLORS.background.inactive};
+	position: sticky;
+	top: 0px;
+	z-index: 200;
+	padding: 6px 4px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 5px;
+`,h=o.default.div`
+	display: flex;
+	align-items: center;
+	gap: 5px;
+`,g=o.default.div`
+	height: 27px;
+	width: 27px;
+	border-radius: 15px;
+	background-color: #d1d8db;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 6px;
+`,b=o.default.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+`,m=o.default.p`
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-size: 8px;
+	line-height: 11px;
+	color: ${t.COLORS.content.secondary};
+	margin-bottom: 0px;
+`;exports.HeaderContainer=c,exports.HeaderTextContainer=n,exports.IconContainer=g,exports.LeftContainer=h,exports.PdfComineText=x,exports.PdfText=f,exports.RCSCarousalContainer=u,exports.RCSChatBtnContainer=s,exports.RCSMediaContainer=p,exports.RCSPdfContainer=l,exports.RCSPreviewContainer=d,exports.RcsHtmlContainer=i,exports.SubTitle=m,exports.TitleContainer=b,exports.TitleTextContainer=a;

package/dist/cjs/components/template-preview/RCS/RCSTemplateLikePreview.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { RCSPreviewPropsV2 } from '../models/RCSTemplate';
+export declare const RCSTemplateLikePreview: React.FC<RCSPreviewPropsV2>;

package/dist/cjs/components/template-preview/RCS/RCSTemplateLikePreview.js

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/react/jsx-runtime.js"),t=require("styled-components"),s=require("../../template-context-mapper/context/templateModalContext.js"),r=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js"),a=require("../utils/getPreviewPropLen.js"),o=require("./RCSChatHeader.js"),n=require("./RCSChatPreview.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=p(t);const u=x.default.div`
+	background-color: white;
+	border-radius: 4px;
+	position: relative;
+	height: ${e=>e.isWhatsappCarousel?"100%":"auto"};
+`,l=x.default(r.TitleRegular)`
+	color: ${i.COLORS.content.primary};
+`;exports.RCSTemplateLikePreview=t=>{const{hideDeviceContainerInPreview:r}=s.useTemplateModalContext();return 3===a.getPreviewPropLen(t)?e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:t.zeroStateComponent}):r?e.jsxRuntimeExports.jsx(n.RCSChatPreview,Object.assign({showHeader:t.showHeader},t)):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:e.jsxRuntimeExports.jsxs(u,Object.assign({style:t.containerStyle,showHeader:t.showHeader,isWhatsappCarousel:t.isWhatsappCarousel},{children:[t.showHeader&&e.jsxRuntimeExports.jsx(o.default,{}),e.jsxRuntimeExports.jsxs("div",Object.assign({style:{padding:"small"===t.size?"10px 32px 10px 10px":`10px ${t.isWhatsappCarousel?"0px":"12px"} ${t.isWhatsappCarousel?"2px":"16px"} 16px`,height:t.isWhatsappCarousel?"100%":"auto"}},{children:[!t.hidePreviewText&&e.jsxRuntimeExports.jsx("div",Object.assign({style:{marginBottom:16}},{children:e.jsxRuntimeExports.jsx(l,{children:"Preview"})})),e.jsxRuntimeExports.jsx(n.RCSChatPreview,Object.assign({showHeader:t.showHeader},t))]}))]}))})};

package/dist/cjs/components/template-preview/SMS/SMSBubble.d.ts

@@ -0,0 +1,8 @@
+export declare const SideCaret: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SMSContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export type SMSBubbleProps = {
+    content: string;
+    size?: 'small' | 'large';
+};
+declare const SMSBubble: (props: SMSBubbleProps) => import("react/jsx-runtime").JSX.Element;
+export default SMSBubble;

package/dist/cjs/components/template-preview/SMS/SMSBubble.js

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/react/jsx-runtime.js"),t=require("../../../assets/icons/union.svg.js"),s=require("styled-components"),r=require("../../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=o(s);const i=n.default.div`
+	position: absolute;
+	width: 30px;
+	height: 30px;
+	left: -10px;
+	bottom: -1px;
+`,u=n.default.div`
+	padding: 12px;
+	background: ${r.COLORS.background.base};
+	border-radius: 16px;
+	position: relative;
+`;exports.SMSContainer=u,exports.SideCaret=i,exports.default=s=>{const{content:o,size:n}=s;return e.jsxRuntimeExports.jsxs(u,{children:[e.jsxRuntimeExports.jsx(i,{children:e.jsxRuntimeExports.jsx(t.default,{color:r.COLORS.background.base,height:27,width:27})}),e.jsxRuntimeExports.jsx("div",{style:{fontSize:"small"===n?12:14},dangerouslySetInnerHTML:{__html:o}})]})};

package/dist/cjs/components/template-preview/SmsTemplatePreview.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SMSTemplateType } from './models/SmsTemplate';
+import { CUSTOM_VARIABLE } from './models/TemplateMeta';
+declare const SmsTemplatePreview: React.FC<{
+    template: SMSTemplateType;
+    variableStore?: CUSTOM_VARIABLE[];
+    hideHeader?: boolean;
+    onlyTemplateContent?: boolean;
+    display_content?: string;
+    size?: 'small' | 'large';
+    uniqueId?: string;
+}>;
+export default SmsTemplatePreview;

package/dist/cjs/components/template-preview/SmsTemplatePreview.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),s=require("../../assets/icons/arrow_left.svg.js"),t=require("../../assets/icons/more_vertical.svg.js"),r=require("../../assets/icons/search.svg.js"),n=require("../../constants/Theme.js"),i=require("../template-context-mapper/context/templateModalContext.js"),l=require("../TypographyStyle.js"),o=require("./helpers/SmsTemplateHelper.js"),a=require("./SMS/SMSBubble.js"),x=require("./SmsTemplatePreview.styled.js");exports.default=u=>{let{template:d,variableStore:j,hideHeader:c,display_content:p,onlyTemplateContent:m,size:h,uniqueId:v}=u;var R;const g=null==d?void 0:d.content,{hideDeviceContainerInPreview:S}=i.useTemplateModalContext();return S?e.jsxRuntimeExports.jsx(x.SMSBubbleContainer,Object.assign({size:h},{children:e.jsxRuntimeExports.jsx(a.default,{size:null!=h?h:"large",content:null!=p?p:o.renderVariableUIForPreview(g,null!=j?j:[],void 0,null!=v?v:"")})})):e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[!c&&!m&&e.jsxRuntimeExports.jsx(x.SMSCardHeader,{children:e.jsxRuntimeExports.jsx(l.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:d.name}))}),!m&&e.jsxRuntimeExports.jsx(x.SMSHeader,{children:e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsxRuntimeExports.jsx(s.default,{width:16,height:16,color:n.COLORS.content.secondary}),e.jsxRuntimeExports.jsx(l.Caption,{children:null===(R=null==d?void 0:d.headers)||void 0===R?void 0:R[0]})]})),e.jsxRuntimeExports.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsxRuntimeExports.jsx(r.default,{width:16,height:16,color:n.COLORS.content.secondary}),e.jsxRuntimeExports.jsx(t.default,{width:16,height:16,color:n.COLORS.content.secondary})]}))]})}),e.jsxRuntimeExports.jsx(x.SMSBubbleContainer,Object.assign({size:h},{children:e.jsxRuntimeExports.jsx(a.default,{size:null!=h?h:"large",content:null!=p?p:o.renderVariableUIForPreview(g,null!=j?j:[],void 0,null!=v?v:"")})}))]})};

package/dist/cjs/components/template-preview/SmsTemplatePreview.styled.d.ts

@@ -0,0 +1,13 @@
+export declare const SideCaret: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SMSBubbleContainer: import("styled-components").StyledComponent<"div", any, {
+    size?: "small" | "large" | undefined;
+}, never>;
+export declare const SMSCardHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SMSContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SMSInnerContainer: import("styled-components").StyledComponent<"div", any, {
+    hideHeader?: boolean | undefined;
+    outsidePreview?: boolean | undefined;
+}, never>;
+export declare const BubbleSideCaret: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BubbleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SMSHeader: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/cjs/components/template-preview/SmsTemplatePreview.styled.js

@@ -0,0 +1,46 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../constants/Theme.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=d(e);t.default.div`
+	position: absolute;
+	width: 8px;
+	height: 8px;
+	left: -5px;
+	bottom: 2px;
+`;const o=t.default.div`
+	padding: ${e=>"small"===e.size?"12px 32px 12px 12px":"16px 56px 12px 16px"};
+	background: ${r.COLORS.surface.standard};
+	border-radius: 4px;
+`,a=t.default.div`
+	padding: 16px;
+	background: ${r.COLORS.surface.standard};
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+	border-bottom: 1px solid ${r.COLORS.stroke.primary};
+`;t.default.div`
+	border: 1px solid ${r.COLORS.stroke.primary};
+	height: 100%;
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+`,t.default.div`
+	margin-top: ${e=>e.hideHeader?0:"16px"};
+	border-radius: 4px;
+	border-color: ${r.COLORS.stroke.primary};
+	border-width: ${e=>e.outsidePreview?0:"1px"};
+`,t.default.div`
+	position: absolute;
+	width: 30px;
+	height: 30px;
+	left: -10px;
+	bottom: -1px;
+`,t.default.div`
+	padding: 12px;
+	background: ${r.COLORS.background.base};
+	border-radius: 16px;
+`;const p=t.default.div`
+	padding: 10px;
+	position: sticky;
+	top: 0;
+	z-index: 1;
+	background: ${r.COLORS.surface.standard};
+	display: flex;
+	justify-content: space-between;
+	border-bottom: 1px solid ${r.COLORS.background.base};
+`;exports.SMSBubbleContainer=o,exports.SMSCardHeader=a,exports.SMSHeader=p;

package/dist/cjs/components/template-preview/TemplatePreview.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { CHANNEL_TYPE } from './models/Channels';
+import { EmailMeta } from './models/EmailTemplate';
+import { SMSMeta } from './models/SmsTemplate';
+import { AllTemplateTypes } from './models/types';
+import { WebpushMetaType } from './models/WebpushTemplate';
+import { WhatsappMeta } from './models/WhatsAppTemplate';
+export interface TemplatePreviewProps {
+    template?: AllTemplateTypes;
+    channel: CHANNEL_TYPE;
+    onlyTemplateContent?: boolean;
+    outsidePreview?: boolean;
+    templateCreationsInfo?: boolean;
+    whatsAppSpecificMeta?: WhatsappMeta;
+    emailSpecificMeta?: EmailMeta;
+    smsSpecificMeta?: SMSMeta;
+    hideHeader?: boolean;
+    size?: 'small' | 'large';
+    templateContainerStyles?: React.CSSProperties;
+    showSampleValues?: boolean;
+    carouselCardIndex?: number;
+    isWhatsappCarousel?: boolean;
+    isPreview?: boolean;
+    applyBorderBottom?: boolean;
+    webPushSpecificMeta?: WebpushMetaType;
+    hidePointerEvents?: boolean;
+}
+export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, carouselCardIndex, isWhatsappCarousel, isPreview, applyBorderBottom, webPushSpecificMeta, hidePointerEvents, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/template-preview/TemplatePreview.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),t=require("../template-context-mapper/context/templateModalContext.js"),i=require("../../utils/StringUtils.js"),s=require("../../constants/Theme.js"),l=require("../../assets/icons/aiContentIcon.svg.js"),n=require("../TypographyStyle.js"),a=require("./EmailTemplateThumbnailPreview.js"),r=require("./models/Channels.js"),o=require("./SmsTemplatePreview.js"),d=require("./webpush/WebpushPreview.js"),u=require("./WhatsAppTemplatePreview.js");const p={WhatsAppWrapper:{backgroundColor:s.COLORS.surface.standard,borderRadius:4,border:`1px solid ${s.COLORS.background.inactive}`,marginTop:16}};exports.TemplatePreview=m=>{let{template:x,channel:c,whatsAppSpecificMeta:j,templateCreationsInfo:v,hideHeader:h,size:C,onlyTemplateContent:g,emailSpecificMeta:E,smsSpecificMeta:b,showSampleValues:y,carouselCardIndex:S,isWhatsappCarousel:T,isPreview:R,applyBorderBottom:w,webPushSpecificMeta:O,hidePointerEvents:P}=m;var f,H;const{setSelectedCarouselIndex:A}=t.useTemplateModalContext();return c===r.CHANNEL_TYPE.SMS?e.jsxRuntimeExports.jsx("div",Object.assign({style:Object.assign({marginTop:v?16:0,border:v?`1px solid ${s.COLORS.stroke.primary}`:"none",borderRadius:4},null==b?void 0:b.templateContainerStyles)},{children:e.jsxRuntimeExports.jsx(o.default,{template:x,hideHeader:h,onlyTemplateContent:g,size:null!=C?C:"large",variableStore:null==b?void 0:b.smsVariableStore,display_content:null==b?void 0:b.smsDisplayContent,uniqueId:null==b?void 0:b.uniqueId})})):c===r.CHANNEL_TYPE.EMAIL?e.jsxRuntimeExports.jsx("div",Object.assign({style:Object.assign({marginTop:v?16:0},null==E?void 0:E.templateContainerStyles)},{children:e.jsxRuntimeExports.jsx(a.default,{template:x,handleViewTemplate:()=>{var e;null===(e=null==E?void 0:E.handleViewTemplate)||void 0===e||e.call(E)},hideHeader:h,hideViewButton:null==E?void 0:E.hideViewButtonForEmail,containerStyle:null==E?void 0:E.containerStyle,emailDisplayContent:null==E?void 0:E.emailDisplayContent,emailHtmlContainerId:null==E?void 0:E.emailHtmlContainerId,applyBorderBottom:w,hidePointerEvents:P})})):c===r.CHANNEL_TYPE.WHATSAPP||c===r.CHANNEL_TYPE.RCS?e.jsxRuntimeExports.jsxs("div",Object.assign({style:Object.assign(Object.assign(Object.assign({},null==j?void 0:j.templateContainerStyles),v?p.WhatsAppWrapper:{}),{position:"relative"}),onClick:()=>{var e,t;if(A&&T){if(-1===S&&!(null===(t=null===(e=null==x?void 0:x.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length))return;A(null!=S?S:-1)}}},{children:[v?e.jsxRuntimeExports.jsx("div",Object.assign({style:{padding:16}},{children:e.jsxRuntimeExports.jsx(n.TitleRegular,{children:i.default.convertToTitleCase(null!==(f=null==x?void 0:x.label)&&void 0!==f?f:"")})})):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{}),e.jsxRuntimeExports.jsx(u.default,{showSampleValues:y,showHeader:null==j?void 0:j.showWhatsAppHeader,extras:null==j?void 0:j.whatsAppExtras,template:x,size:v?"small":null!=C?C:"large",containerStyle:Object.assign(Object.assign({borderWidth:v?0:1,borderTopWidth:1},null!==(H=null==j?void 0:j.containerStyle)&&void 0!==H?H:{}),{height:"100%"}),zeroStateComponent:null==j?void 0:j.zeroStateComponent,usePlaceHolderName:null==j?void 0:j.usePlaceHolderName,carouselCardIndex:S,isWhatsappCarousel:T,isPreview:R,channel:c}),!!(null==x?void 0:x.aiContentConfigId)&&e.jsxRuntimeExports.jsx("div",Object.assign({style:{position:"absolute",top:0,right:0,display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,zIndex:5}},{children:e.jsxRuntimeExports.jsx(l.default,{width:48,height:48})}))]})):c==r.CHANNEL_TYPE.WEBPUSH?e.jsxRuntimeExports.jsx("div",Object.assign({style:Object.assign({},null==O?void 0:O.containerStyle)},{children:e.jsxRuntimeExports.jsx(d.default,{template:x,extraContainerCss:null==O?void 0:O.extraContainerCss})})):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{})};

package/dist/cjs/components/template-preview/WhatsApp/ChatBtn.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare const ChatBtn: React.FC<{
+    Icon?: React.FC<React.SVGProps<SVGSVGElement>>;
+    text: string;
+    extraContent?: string;
+    placeholder?: string;
+    textTypography?: React.FC;
+    size?: 'small' | 'large';
+    iconPosition?: 'left' | 'right';
+}>;

package/dist/cjs/components/template-preview/WhatsApp/ChatBtn.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/react/jsx-runtime.js"),t=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),s=require("./ChatUI.style.js");exports.ChatBtn=n=>{let{Icon:i,text:o,extraContent:l,placeholder:a,textTypography:c,size:p,iconPosition:x="left"}=n;const d=c||t.BodySecondary;return e.jsxRuntimeExports.jsx(s.ChatBtnContainer,{children:e.jsxRuntimeExports.jsxs("div",Object.assign({style:{textAlign:"center",maxWidth:"100%"}},{children:[e.jsxRuntimeExports.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"}},{children:[i&&"left"===x&&e.jsxRuntimeExports.jsx(i,{color:r.COLORS.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e.jsxRuntimeExports.jsx(d,Object.assign({style:{color:r.COLORS.special.brand.facebook,textAlign:"center",fontSize:"small"===p?12:14,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:o})),i&&"right"===x&&e.jsxRuntimeExports.jsx(i,{color:r.COLORS.special.brand.facebook,height:16,width:16,style:{marginLeft:8}})]})),!!l&&e.jsxRuntimeExports.jsx(t.Caption,Object.assign({style:{marginTop:2,color:r.COLORS.content.placeholder,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:a?function(e){return e.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,(function(e){return e.toUpperCase()}))}(a):l}))]}))})};

package/dist/cjs/components/template-preview/WhatsApp/ChatHeader.d.ts

@@ -0,0 +1,2 @@
+declare const ChatHeader: () => import("react/jsx-runtime").JSX.Element;
+export default ChatHeader;

package/dist/cjs/components/template-preview/WhatsApp/ChatHeader.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/react/jsx-runtime.js"),s=require("../../../assets/icons/arrow_left.svg.js"),r=require("../../../assets/icons/user_icon.svg.js"),t=require("../../../assets/icons/vertical_dots.svg.js"),n=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js"),o=require("./ChatHeader.style.js");exports.default=()=>e.jsxRuntimeExports.jsxs(o.HeaderContainer,{children:[e.jsxRuntimeExports.jsxs(o.LeftContainer,{children:[e.jsxRuntimeExports.jsx(s.default,{height:16,width:16,color:i.COLORS.content.primaryInverse}),e.jsxRuntimeExports.jsx(o.IconContainer,{children:e.jsxRuntimeExports.jsx(r.default,{height:14,width:14,color:i.COLORS.content.primaryInverse})}),e.jsxRuntimeExports.jsxs(o.TitleContainer,{children:[e.jsxRuntimeExports.jsx(n.BodyTiny,Object.assign({color:i.COLORS.content.primaryInverse},{children:"Brand name"})),e.jsxRuntimeExports.jsx(o.SubTitle,{children:"Business account"})]})]}),e.jsxRuntimeExports.jsx(t.default,{height:16,width:16,color:i.COLORS.content.primaryInverse})]});

package/dist/cjs/components/template-preview/WhatsApp/ChatHeader.style.d.ts

@@ -0,0 +1,5 @@
+export declare const HeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LeftContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SubTitle: import("styled-components").StyledComponent<"p", any, {}, never>;

package/dist/cjs/components/template-preview/WhatsApp/ChatHeader.style.js

@@ -0,0 +1,37 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../../constants/Theme.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=n(e);const o=i.default.div`
+	height: 50px;
+	background-color: #008069;
+	position: sticky;
+	top: 0px;
+	z-index: 200;
+	padding: 6px 4px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 5px;
+`,r=i.default.div`
+	display: flex;
+	align-items: center;
+	gap: 5px;
+`,a=i.default.div`
+	height: 27px;
+	width: 27px;
+	border-radius: 15px;
+	background-color: #d1d8db;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 6px;
+`,p=i.default.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+`,s=i.default.p`
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-size: 8px;
+	line-height: 11px;
+	color: ${t.COLORS.content.primaryInverse};
+	margin-bottom: 0px;
+`;exports.HeaderContainer=o,exports.IconContainer=a,exports.LeftContainer=r,exports.SubTitle=s,exports.TitleContainer=p;

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.d.ts

@@ -0,0 +1,3 @@
+import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
+declare const ChatUI: (props: WhatsappLikePreviewTypes) => import("react/jsx-runtime").JSX.Element;
+export default ChatUI;

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.js

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/react/jsx-runtime.js"),t=require("../../../assets/icons/halfRectangle.svg.js"),s=require("../../../assets/icons/phone.svg.js"),r=require("../../../assets/icons/RedirectToNew.svg.js"),i=require("react"),o=require("styled-components"),n=require("../../tooltips/Tooltip.js"),a=require("../../TypographyStyle.js"),x=require("../../../constants/Theme.js"),p=require("../helpers/WhatsAppFormatToHTML.js"),l=require("../models/TemplateMeta.js"),d=require("./ChatBtn.js"),u=require("./ChatUI.style.js"),j=require("./MediaCard.js"),m=require("./RenderTemplateWithVariable.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const h=c(o).default.div`
+	position: absolute;
+	width: 8px;
+	height: 8px;
+	left: -7.7px;
+	top: -8px;
+`;exports.default=o=>{const{bodyText:c,footerText:E,headerMediaType:T,headerText:R,headerAssetLink:y,headerAssetName:g,quickReplybtn:S,ctaBtn:f,actionTypes:v,textType:q,extras:b,showHeader:w,imagePreviewStyles:C,size:A,children:N,isPreview:F}=o,O=new p.WhatsAppFormatToHTML,_=i.useMemo((()=>({color:x.COLORS.content.primary,margin:12,fontSize:w?x.FONTS.caption.fontSize:x.FONTS.bodySecondary.fontSize,fontWeight:x.FONTS.bodySecondary.fontWeight,maxWidth:"100%",whiteSpace:"pre-wrap",marginBottom:0,marginTop:8,wordBreak:"break-word"})),[]);return e.jsxRuntimeExports.jsxs(u.Container,Object.assign({isPreview:F},{children:[e.jsxRuntimeExports.jsx(h,{children:e.jsxRuntimeExports.jsx(t.default,{color:"white",height:8,width:8})}),T===l.HEADER_TYPES.TEXT?e.jsxRuntimeExports.jsx(m.default,{bold:!0,text:null==R?void 0:R.replace(/</g,"&lt;").replace(/>/g,"&gt;")}):T!==l.HEADER_TYPES.NONE?e.jsxRuntimeExports.jsx(j.MediaCard,{headerAssetLink:y,headerAssetName:g,mediaType:T,imagePreviewStyles:T===l.HEADER_TYPES.IMAGE?C:{}}):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{}),!!c&&e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:N?e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:N}):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:"html"===q?e.jsxRuntimeExports.jsx("div",{className:"richTextEditor",style:_,dangerouslySetInnerHTML:{__html:O.convertToHTML(c)}}):e.jsxRuntimeExports.jsx(a.BodySecondary,{children:null==c?void 0:c.replace(/</g,"&lt;").replace(/>/g,"&gt;")})})}),e.jsxRuntimeExports.jsxs(u.FooterWrapper,{children:[e.jsxRuntimeExports.jsx(n.Tooltip,Object.assign({body:null!=E?E:"",placement:"top"},{children:e.jsxRuntimeExports.jsx(u.FooterText,Object.assign({style:{flex:1}},{children:E}))})),e.jsxRuntimeExports.jsx(u.TimeStamp,{children:"16:48"})]}),v===l.ACTIONS_TYPES.QUICK_REPLY?e.jsxRuntimeExports.jsx("div",{children:null==S?void 0:S.map(((t,s)=>e.jsxRuntimeExports.jsx(d.ChatBtn,{text:t.text},s)))}):v===l.ACTIONS_TYPES.CTA_BTN?e.jsxRuntimeExports.jsx("div",{children:null==f?void 0:f.map(((t,i)=>e.jsxRuntimeExports.jsx(d.ChatBtn,{textTypography:w?a.Caption:a.BodySecondary,extraContent:b?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?s.default:r.default,size:A},i)))}):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{})]}))};

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.d.ts

@@ -0,0 +1,21 @@
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    isCarouselCard?: boolean | undefined;
+    showBorder?: boolean | undefined;
+    showDashedBorder?: boolean | undefined;
+    isWhatsappCarousel?: boolean | undefined;
+    hasError?: boolean | undefined;
+    isPreview?: boolean | undefined;
+}, never>;
+export declare const TimeStamp: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const FooterText: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const MediaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChatBtnContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FooterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MediaNameAbsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DownloadMediaIconHolder: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.js

@@ -0,0 +1,69 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(e);const a=i.default.div`
+	background: ${r.COLORS.surface.standard};
+	border-top-left-radius: ${e=>e.isCarouselCard?"12px":"0px"};
+	border-top-right-radius: 12px;
+	border-bottom-right-radius: 12px;
+	border-bottom-left-radius: 12px;
+	position: relative;
+	padding: 8px 0px;
+	border: 2px solid
+		${e=>e.hasError?`${r.COLORS.content.negative}`:e.showBorder?`${r.COLORS.stroke.brand}`:`${r.COLORS.stroke.primary}`};
+	border: ${e=>e.showDashedBorder&&`2px dashed ${r.COLORS.content.brand}`};
+	height: ${e=>e.isWhatsappCarousel?"100%":"auto"};
+	display: flex;
+	flex-direction: column;
+	:hover {
+		border: 2px
+			${e=>e.isPreview?"unset":e.isWhatsappCarousel?e.hasError?"dashed":e.showBorder?"solid":"dashed":"solid"}
+			${r.COLORS.stroke.brand};
+		box-shadow: ${e=>!e.isPreview&&"4px 4px 12px rgba(0, 0, 0, 0.25)"};
+	}
+`,d=i.default(t.Caption)`
+	color: ${r.COLORS.content.secondary};
+	max-width: 80px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	text-wrap: wrap;
+`,s=i.default(d)`
+	max-width: 200px;
+`,p=i.default.div`
+	border-radius: 8px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: 152px;
+	margin-bottom: 4px;
+	margin: 0px 8px;
+`,n=i.default.div`
+	padding: 12px;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	border-top: 1px solid ${r.COLORS.stroke.primary};
+`,l=i.default.div`
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	margin: 8px 12px;
+`;i.default.div`
+	position: absolute;
+	bottom: -1px;
+	left: 0;
+	text-align: center;
+	width: 100%;
+	padding: 10px;
+	align-items: center;
+	display: flex;
+	flex-direction: row;
+	justify-content: start;
+	background: ${r.COLORS.surface.hovered};
+	border-bottom-right-radius: 8px;
+	border-bottom-left-radius: 8px;
+`,i.default.div`
+	position: absolute;
+	top: 16px;
+	right: 16px;
+`,exports.ChatBtnContainer=n,exports.Container=a,exports.FooterText=s,exports.FooterWrapper=l,exports.MediaContainer=p,exports.TimeStamp=d;

package/dist/cjs/components/template-preview/WhatsApp/ChatUiV2.d.ts

@@ -0,0 +1,3 @@
+import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
+export declare const HtmlContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChatUIV2: (props: WhatsappLikePreviewTypes) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/template-preview/WhatsApp/ChatUiV2.js

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/react/jsx-runtime.js"),t=require("../../../assets/icons/chevronDownOutline.svg.js"),s=require("../../../assets/icons/copy-code-icon.svg.js"),r=require("../../../assets/icons/halfRectangle.svg.js"),i=require("../../../assets/icons/phone.svg.js"),o=require("../../../assets/icons/qrb.svg.js"),n=require("../../../assets/icons/RedirectToNew.svg.js"),a=require("styled-components"),l=require("../../template-context-mapper/context/templateModalContext.js"),x=require("../../tooltips/Tooltip.js"),d=require("../../TypographyStyle.js"),p=require("../../../constants/Theme.js"),u=require("../helpers/VariableEditorHelper.js"),m=require("../models/TemplateMeta.js"),j=require("./ChatBtn.js"),c=require("./ChatUI.style.js"),h=require("./LimitedTimeOffer/LimitedTimeOffer.index.js"),E=require("./MediaCard.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var C=f(a);const T=C.default.div`
+	position: absolute;
+	width: 8px;
+	height: 8px;
+	left: -7.7px;
+	top: -8px;
+`,R=C.default.div`
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 20px;
+	padding: 8px 12px 0px;
+	color: ${p.COLORS.content.primary};
+	word-wrap: break-word;
+`,y=C.default(R)`
+	font-weight: 600;
+	margin-bottom: 8px;
+`,g=new u.VariableEditorHelper;exports.ChatUIV2=a=>{const{bodyText:p,footerText:u,headerMediaType:f,headerText:C,headerAssetLink:v,headerAssetName:O,quickReplybtn:I,ctaBtn:S,actionTypes:_,extras:L,showHeader:q,imagePreviewStyles:P,size:b,bodyVariableList:w,headerVariableList:A,buttons:M,limitedTimeOfferComponent:N,carouselCardIndex:H,isWhatsappCarousel:B,isPreview:Y,children:D,hideFooter:F=!1}=a,U=g.format(null==p?void 0:p.replace(/</g,"&lt;").replace(/>/g,"&gt;"),w),V=g.format(null==C?void 0:C.replace(/</g,"&lt;").replace(/>/g,"&gt;"),A),{selectedCarouselIndex:k,isProductCarouselType:z,errorIndexes:W,isCarouselHovered:K}=l.useTemplateModalContext(),Q={COPY_CODE:s.default,PHONE_NUMBER:i.default,URL:n.default,QUICK_REPLY:o.default,VOICE_CALL:i.default,CALL_PERMISSION:t.default};return e.jsxRuntimeExports.jsxs(c.Container,Object.assign({isCarouselCard:null!=H&&H>-1,showBorder:null!=H&&H===k||z&&null!=H&&H>-1&&null!=k&&k>-1,hasError:null==W?void 0:W.includes(null!=H?H:-2),isWhatsappCarousel:B,isPreview:Y,showDashedBorder:z&&K&&(null!=k?k:-1)<0&&(null!=H?H:-1)>-1},{children:[!B&&e.jsxRuntimeExports.jsx(T,{children:e.jsxRuntimeExports.jsx(r.default,{color:"white",height:8,width:8})}),f===m.HEADER_TYPES.TEXT?e.jsxRuntimeExports.jsx(y,{dangerouslySetInnerHTML:{__html:V}}):f!==m.HEADER_TYPES.NONE?e.jsxRuntimeExports.jsx(E.MediaCard,{headerAssetLink:v,headerAssetName:O,mediaType:f,imagePreviewStyles:f===m.HEADER_TYPES.IMAGE?P:{}}):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{}),(null==N?void 0:N.dateTime)?e.jsxRuntimeExports.jsx(h.LimitedTimeOffer,{text:N.text,dateTime:N.dateTime,code:N.code}):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{}),!!p&&e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:e.jsxRuntimeExports.jsx(R,{dangerouslySetInnerHTML:{__html:U},style:{flex:1}})}),D,!F&&e.jsxRuntimeExports.jsxs(c.FooterWrapper,{children:[e.jsxRuntimeExports.jsx(x.Tooltip,Object.assign({body:null!=u?u:"",placement:"top"},{children:e.jsxRuntimeExports.jsx(c.FooterText,Object.assign({style:{flex:1}},{children:u}))})),e.jsxRuntimeExports.jsx(c.TimeStamp,{children:"16:48"})]}),M&&M.length>0?M.map(((t,s)=>e.jsxRuntimeExports.jsx(j.ChatBtn,{text:"COPY_CODE"===t.type?"Copy code":t.text,Icon:Q[t.type],size:b,iconPosition:"CALL_PERMISSION"===t.type?"right":"left",textTypography:"CALL_PERMISSION"===t.type?d.TitleSmall:void 0},s))):_===m.ACTIONS_TYPES.QUICK_REPLY?e.jsxRuntimeExports.jsx("div",{children:null==I?void 0:I.map(((t,s)=>e.jsxRuntimeExports.jsx(j.ChatBtn,{text:t.text},s)))}):_===m.ACTIONS_TYPES.CTA_BTN?e.jsxRuntimeExports.jsx("div",{children:null==S?void 0:S.map(((t,s)=>e.jsxRuntimeExports.jsx(j.ChatBtn,{textTypography:q?d.Caption:d.BodySecondary,extraContent:L?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?i.default:n.default,size:b},s)))}):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{})]}))},exports.HtmlContainer=R;

package/dist/cjs/components/template-preview/WhatsApp/LimitedTimeOffer/LimitedTimeOffer.index.d.ts

@@ -0,0 +1,9 @@
+import { CreateTemplateType } from '../../models/WhatsAppTemplate';
+/**
+ * Renders Limited Time Offer component
+ * Type of props is infered from template
+ */
+export declare const LimitedTimeOffer: (props: CreateTemplateType['limitedTimeOfferComponent']) => import("react/jsx-runtime").JSX.Element;
+export declare const StyledLimitedOfferTime: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledLtoIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledLtoText: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/cjs/components/template-preview/WhatsApp/LimitedTimeOffer/LimitedTimeOffer.index.js

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../node_modules/react/jsx-runtime.js"),t=require("../../../../assets/icons/lto_icon.svg.js"),r=require("styled-components"),s=require("../../../TypographyStyle.js"),n=require("../../../../constants/Theme.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=i(r);const d=o.default.div`
+	display: flex;
+	flex-direction: row;
+	background: #f6f6f6;
+	margin: 0px 10px;
+	overflow: hidden;
+	align-items: center;
+`,l=o.default.div`
+	width: 48px;
+	height: 48px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 24px;
+	background: #d8f0e7;
+	margin: 5px;
+`,x=o.default.div`
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+`;exports.LimitedTimeOffer=r=>{const{text:i,dateTime:o,code:c}=r;return e.jsxRuntimeExports.jsxs(d,{children:[e.jsxRuntimeExports.jsx(l,{children:e.jsxRuntimeExports.jsx(t.default,{width:24,height:24,style:{display:"flex"}})}),e.jsxRuntimeExports.jsxs(x,{children:[e.jsxRuntimeExports.jsx(s.BodySecondary,Object.assign({numberOfLines:2,color:n.COLORS.content.primary},{children:i})),e.jsxRuntimeExports.jsxs(s.BodyTiny,Object.assign({numberOfLines:3,style:{overflowWrap:"anywhere"},color:n.COLORS.content.secondary},{children:["Offer Ends on ",o]})),e.jsxRuntimeExports.jsxs(s.BodyTiny,Object.assign({numberOfLines:2,color:n.COLORS.content.placeholder},{children:["Code ",c]}))]})]})},exports.StyledLimitedOfferTime=d,exports.StyledLtoIcon=l,exports.StyledLtoText=x;

package/dist/cjs/components/template-preview/WhatsApp/MediaCard.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CSSProperties } from 'styled-components';
+import { HEADER_TYPES } from '../models/TemplateMeta';
+export declare const NoMediaCard: React.FC<{
+    headerAssetLink?: string;
+    headerAssetName?: string;
+    mediaType?: HEADER_TYPES;
+}>;
+export declare const MediaCard: React.FC<{
+    headerAssetLink?: string;
+    headerAssetName?: string;
+    mediaType: HEADER_TYPES;
+    imagePreviewStyles?: CSSProperties;
+}>;

package/dist/cjs/components/template-preview/WhatsApp/MediaCard.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/react/jsx-runtime.js"),s=require("../../../assets/icons/filePdf.svg.js"),r=require("../../../assets/icons/image.svg.js"),t=require("../../../assets/icons/videoRecorder.svg.js"),i=require("../../shimmer-image/ShimmerImage.js"),a=require("../../TypographyStyle.js"),n=require("../../../constants/Theme.js"),o=require("../models/TemplateMeta.js"),d=require("./ChatUI.style.js");const m=i=>{let{headerAssetName:m,mediaType:x}=i;const u=x===o.HEADER_TYPES.IMAGE?r.default:x===o.HEADER_TYPES.VIDEO?t.default:s.default;return e.jsxRuntimeExports.jsxs(d.MediaContainer,{children:[e.jsxRuntimeExports.jsx(u,{height:40,width:40,color:n.COLORS.icon.placeholder}),!!m&&e.jsxRuntimeExports.jsx(a.BodySecondary,Object.assign({style:{color:n.COLORS.content.secondary,marginTop:8}},{children:m}))]})};exports.MediaCard=s=>{let{headerAssetLink:r,headerAssetName:t,mediaType:a,imagePreviewStyles:n}=s;if(!r||a===o.HEADER_TYPES.DOCUMENT)return e.jsxRuntimeExports.jsx(m,Object.assign({},{headerAssetLink:r,headerAssetName:t,mediaType:a}));return e.jsxRuntimeExports.jsx(d.MediaContainer,{children:a===o.HEADER_TYPES.IMAGE?e.jsxRuntimeExports.jsx(i.ShimmerImage,{imageUrl:r,alt:r,width:"100%",height:240,borderRadius:8}):a===o.HEADER_TYPES.VIDEO?e.jsxRuntimeExports.jsx("video",Object.assign({src:r,style:{width:"100%",minHeight:"240px",height:"240px",borderRadius:8},controls:!0,muted:!0},{children:e.jsxRuntimeExports.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:r})})):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{})})},exports.NoMediaCard=m;

package/dist/cjs/components/template-preview/WhatsApp/RenderTemplateWithVariable.d.ts

@@ -0,0 +1,6 @@
+export interface RenderTemplateWithVariableInterface {
+    text?: string;
+    bold?: boolean;
+}
+declare const RenderTemplateWithVariable: (props: RenderTemplateWithVariableInterface) => import("react/jsx-runtime").JSX.Element;
+export default RenderTemplateWithVariable;

package/dist/cjs/components/template-preview/WhatsApp/RenderTemplateWithVariable.js

@@ -0,0 +1,4 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/react/jsx-runtime.js"),t=require("styled-components"),s=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),n=require("../constants/regexPatterns.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const o=i(t).default.div`
+	padding: 8px 12px 0px;
+	/* display: inline; */
+`;exports.default=t=>{const{text:i,bold:l}=t,a=null==i?void 0:i.match(n.templateVariablePattern),u=l?{fontWeight:"600"}:{};return i?e.jsxRuntimeExports.jsx(o,{children:i.split(n.templateVariablePattern).map(((t,n)=>e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(s.BodyRegular,Object.assign({style:u},{children:t})),!!(null==a?void 0:a[n])&&e.jsxRuntimeExports.jsx(s.BodyRegular,Object.assign({style:Object.assign({color:r.COLORS.content.brand},u)},{children:null==a?void 0:a[n]}))]})))}):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{})};

package/dist/cjs/components/template-preview/WhatsApp/WhatsAppLikePreview.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
+export declare const WhatsappLikePreview: React.FC<WhatsappLikePreviewTypes>;

package/dist/cjs/components/template-preview/WhatsApp/WhatsAppLikePreview.js

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/react/jsx-runtime.js"),r=require("styled-components"),t=require("../../TypographyStyle.js"),s=require("../../../constants/Theme.js"),i=require("../utils/getPreviewPropLen.js"),o=require("./ChatHeader.js"),a=require("./ChatUI.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=n(r);const p=d.default.div`
+	background-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');
+	border: ${e=>e.showHeader?0:1}px solid
+		${s.COLORS.stroke.primary};
+	border-radius: 4px;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+	position: relative;
+`,x=d.default(t.TitleRegular)`
+	color: ${s.COLORS.content.primary};
+`;exports.WhatsappLikePreview=r=>3===i.getPreviewPropLen(r)?e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:r.zeroStateComponent}):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:e.jsxRuntimeExports.jsxs(p,Object.assign({style:r.containerStyle,showHeader:r.showHeader},{children:[r.showHeader&&e.jsxRuntimeExports.jsx(o.default,{}),e.jsxRuntimeExports.jsxs("div",Object.assign({style:{padding:"small"===r.size?"12px 32px 12px 12px":"16px 56px 12px 16px"}},{children:[!r.hidePreviewText&&e.jsxRuntimeExports.jsx("div",Object.assign({style:{marginBottom:16}},{children:e.jsxRuntimeExports.jsx(x,{children:"Preview"})})),e.jsxRuntimeExports.jsx(a.default,Object.assign({showHeader:r.showHeader},r))]}))]}))});

package/dist/cjs/components/template-preview/WhatsApp/WhatsAppLikePreviewV2.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
+export declare const WhatsappLikePreviewV2: React.FC<WhatsappLikePreviewTypes>;