@bikdotai/bik-component-library 1.0.0-beta.1 → 1.0.0

package/dist/esm/components/template-context-mapper/modalElements/EditMediaV2.js

@@ -1,8 +0,0 @@
-import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import o from"../../../assets/icons/document_pdf.svg.js";import r from"../../../assets/icons/edit.svg.js";import s from"../../../assets/icons/refresh.svg.js";import n from"../../../assets/icons/video_camcorder.svg.js";import l from"styled-components";import{Spinner as c}from"../../spinner/Spinner.js";import{HEADER_TYPES as d}from"../../template-preview/models/TemplateMeta.js";import{BodyCaption as a,BodySecondary as m,Caption as p}from"../../TypographyStyle.js";import h from"../../../utils/StringUtils.js";import{COLORS as g}from"../../../constants/Theme.js";import{Container as f,ImageContainer as j,RightComponent as y}from"./EditMediaV2.style.js";const v=l.div`
-	padding-left: 14px;
-	padding-right: 6px;
-	width: 44px;
-	height: 24px;
-	border-left: 1px solid ${g.stroke.primary};
-	cursor: pointer;
-`,u=l=>{const{imageName:u,error:b,isLoading:x,mediaType:w,handleImageChange:O}=l,C=null==u?void 0:u[0].split("/"),L=null==C?void 0:C[C.length-1];return e(f,{children:[t(j,Object.assign({error:!!b,onClick:b?O:void 0},{children:b?t(s,{color:g.content.brand,width:32,height:32}):x?t(c,{size:"small"}):w===d.IMAGE?t("img",{alt:"",src:null==u?void 0:u[0],style:{width:"100%",height:"56px",borderRadius:8,objectFit:"cover"}}):w===d.VIDEO?t(n,{width:18,height:22,color:g.content.placeholder}):t(o,{width:18,height:22,color:g.content.placeholder})})),e(y,{children:[t("div",Object.assign({style:{flex:1}},{children:u&&b?t(i,{}):x?t(a,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):t(m,Object.assign({style:{color:g.content.primary,marginLeft:8}},{children:h.toCapitilize(null==w?void 0:w.toLowerCase())||L}))})),!!b&&e("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8}},{children:[e(m,Object.assign({style:{color:g.content.negative}},{children:["Error loading this ",null==w?void 0:w.toLowerCase(),". Retry"]})),t(p,Object.assign({style:{color:g.content.secondary}},{children:b}))]})),!b&&!x&&t(v,Object.assign({onClick:O,onKeyDown:O,role:"presentation"},{children:t(r,{width:24,height:24,color:g.content.placeholder})}))]})]})};export{u as default};

package/dist/esm/components/template-context-mapper/modalElements/EditMediaV2.style.d.ts

@@ -1,6 +0,0 @@
-export declare const RightComponent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ImageContainer: import("styled-components").StyledComponent<"div", any, {
-    error: boolean;
-}, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const EditTemplateMediaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/template-context-mapper/modalElements/EditMediaV2.style.js

@@ -1,31 +0,0 @@
-import e from"styled-components";import{COLORS as r}from"../../../constants/Theme.js";const t=e.div`
-	display: flex;
-	align-items: center;
-	gap: 12px;
-	/* justify-content: center; */
-	flex: 1;
-`,i=e.div`
-	width: 56px;
-	height: 56px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	align-self: center;
-	background-color: ${r.surface.hovered};
-	border-radius: 4px;
-	border: 1px solid ${r.stroke.primary};
-	box-sizing: content-box;
-	cursor: ${e=>e.error?"pointer":"default"};
-`,o=e.div`
-	padding: 8px;
-	flex-direction: row;
-	display: flex;
-	justify-content: space-between;
-	background: ${r.surface.subdued};
-	border: 1px solid ${r.stroke.primary};
-	border-radius: 4px;
-	margin-left: 8px;
-`,n=e.div`
-	padding-bottom: 0px;
-	min-width: 285px;
-`;export{o as Container,n as EditTemplateMediaContainer,i as ImageContainer,t as RightComponent};

package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
-declare const EditMediaTemplateMediaV2: React.FC<{
-    mediaComponent: WhatsAppTemplate['components'][0];
-    template: WhatsAppTemplate;
-    whatsappSpecificPickerMeta: WhatsAppPickerMeta;
-    updateTemplateImageUrl(url: string, format: WhatsAppTemplate['components'][0]['format']): void;
-}>;
-export default EditMediaTemplateMediaV2;

package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js

@@ -1 +0,0 @@
-import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as o,Fragment as i,jsx as t}from"react/jsx-runtime";import r,{useState as n}from"react";import{FileUploaderHelper as a}from"../../helpers/FileUploaderHelper.js";import{BikImageCropper as l}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import"../../states/StateComponent.js";import"../../modals/modal.styled.js";import"../../../constants/Theme.js";import"../../spinner/Spinner.js";import"../../modals/styledModal.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import m from"./EditMediaV2.js";const p=p=>{let{mediaComponent:d,template:c,updateTemplateImageUrl:f,whatsappSpecificPickerMeta:u}=p;var v,g;const[h,j]=n(void 0),[C,y]=n(),I=r.createRef(),[M,k]=n(!1),[w,A]=n("");function E(o){var i;return e(this,void 0,void 0,(function*(){const e=new a;if(o instanceof Blob){const t=e.validate(o);if(t)A(t),k(!1);else{const e=d.format===s.IMAGE,t=yield u.uploadMediaFiles({file:o,fileName:h,isImage:e});if(t.success){const[e]=o.type.split("/");f(null!==(i=t.url)&&void 0!==i?i:"","application"===e?s.DOCUMENT:s[e.toUpperCase()])}else A("An unknown technical error occured");k(!1)}}else A("An unknown technical error occured"),k(!1)}))}let T;return T=d.format===s.IMAGE?"image/png, image/jpeg":d.format===s.VIDEO?"video/mp4":"application/pdf",o(i,{children:[!!C&&t(l,{src:C,onCropComplete:function(o){return e(this,void 0,void 0,(function*(){k(!1),A("");const e=yield fetch(o);E(yield e.blob()).then((()=>{y(void 0)}))}))},onCancel:()=>{k(!1),y("")}}),t("input",{ref:I,style:{display:"none"},type:"file",onChange:function(e){var o;A(""),k(!0);const i=null===(o=e.target.files)||void 0===o?void 0:o[0];if(d.format===s.IMAGE){const e=new FileReader;y(""),j(""),e.onload=()=>{y(e.result),j(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else E(i)},accept:T}),t(m,{imageName:null!==(g=null===(v=null==d?void 0:d.example)||void 0===v?void 0:v.header_handle)&&void 0!==g?g:[],handleImageChange:function(){var e;(null===(e=null==I?void 0:I.current)||void 0===e?void 0:e.click)&&I.current.click()},mediaType:null==d?void 0:d.format,error:w,isLoading:M})]})};export{p as default};

package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
-import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
-import { WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
-export interface EditWhatsAppTemplateV2Props {
-    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
-    template: WhatsAppTemplate;
-    onTemplateChange?: (template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType) => void;
-}
-declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, }: EditWhatsAppTemplateV2Props) => JSX.Element;
-export default EditWhatsAppTemplateV2;

package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js

@@ -1 +0,0 @@
-import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useTemplateModalContext as e}from"../context/templateModalContext.js";import{getAllDataFromTemplateComponent as n}from"../utils/getDataFromTemplateComponent.js";import{EditTemplateMediaContainer as i}from"./EditMediaV2.style.js";import l from"./EditWhatsAppTemplateMediaV2.js";import{Container as s}from"./VariableConnectorsPanel.js";import a from"./VariableConnectorWhatsApp.js";import d from"./VariableEditorHeader.js";import p from"./WhatsAppTemplateCardButtonV2.js";const r=r=>{let{template:c,onTemplateChange:u,whatsappSpecificPickerMeta:m}=r;var b,v,g,h,f,j,T,O,x,y,E,C;const{originalVariableList:V}=e(),{descriptionComponents:w,urlBtns:B,qrbBtns:I,imageComponent:R,bodyVariables:L,headerVariables:A}=n(c);function U(t,o){var e,n,i,l;const s=Object.assign({},c),a=null==s?void 0:s.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==a&&a>-1){const d=null===(e=null==s?void 0:s.components[a].buttons)||void 0===e?void 0:e.findIndex((t=>"URL"===t.type));if(void 0!==d&&d>-1){const e="custom"===o&&"string"==typeof t,p=[...null!==(l=null===(i=null===(n=s.components)||void 0===n?void 0:n[a])||void 0===i?void 0:i.buttons)&&void 0!==l?l:[]];p[d]=Object.assign(Object.assign({},p[d]),{url:"https://d.bik.ai/{{1}}",example:[e?t:"string"!=typeof t?t.defaultValue:""]});const r=Object.assign(Object.assign({},s.components[a]),{buttons:p}),c=Object.assign(Object.assign({},s.mapping),{buttons:e?["((customBtnPlaceholder))"]:"string"!=typeof t?[t.placeHolder]:void 0});s.mapping=c;const u=[...s.components];u[a]=r,s.components=u}}null==u||u(s)}function S(t,o,e){var n;const i=Object.assign({},c),l=null==i?void 0:i.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==l&&l>-1){const o=null===(n=null==i?void 0:i.components[l].buttons)||void 0===n?void 0:n.filter((t=>"QUICK_REPLY"===t.type));o&&(o[e]=Object.assign(Object.assign({},o[e]),{flowId:t.flowId,flowName:t.flowName}));const s=Object.assign(Object.assign({},i.components[l]),{buttons:o}),a=[...i.components];a[l]=s,i.components=a}null==u||u(i)}return t(s,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!R&&o(i,{children:o(l,{whatsappSpecificPickerMeta:m,mediaComponent:R,updateTemplateImageUrl:function(t,o){var e;let n=Object.assign({},c);const i=null===(e=null==n?void 0:n.components)||void 0===e?void 0:e.findIndex((t=>{if("HEADER"===t.type&&"NONE"!==t.format&&"TEXT"!==t.format)return!0}));if(void 0!==i&&i>-1&&(null==n?void 0:n.components[i])){const e=Object.assign(Object.assign({},n.components[i]),{format:o,example:{header_handle:[t]}}),l=[...n.components];l[i]=e,n=Object.assign(Object.assign({},n),{components:l})}null==u||u(n)},template:c})}),(L.length>0||A.length>0)&&o(d,{containerStyle:{paddingTop:R?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null==w?void 0:w.map(((t,e)=>o(a,{originalVariableList:V,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?c.mapping.header:c.mapping.body},e))),(null===(v=null===(b=B[0])||void 0===b?void 0:b.component)||void 0===v?void 0:v.buttons)&&(null===(f=null===(h=null===(g=B[0])||void 0===g?void 0:g.component)||void 0===h?void 0:h.buttons)||void 0===f?void 0:f.length)>0&&o(d,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(j=null==V?void 0:V.buttons)||void 0===j?void 0:j.map(((t,e)=>{if("URL"===t.type)return o(p,{CTAoptions:null==m?void 0:m.CTAoptions,button:t,originalVariableList:V,updateSelectedURLTemplateBtn:U},`${e}`)})),(null===(O=null===(T=I[0])||void 0===T?void 0:T.component)||void 0===O?void 0:O.buttons)&&(null===(E=null===(y=null===(x=I[0])||void 0===x?void 0:x.component)||void 0===y?void 0:y.buttons)||void 0===E?void 0:E.length)>0&&o(d,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}),null===(C=null==V?void 0:V.buttons)||void 0===C?void 0:C.map(((t,e)=>{if("QUICK_REPLY"===t.type)return o(p,{QRBoptions:null==m?void 0:m.QRBoptions,button:t,originalVariableList:V,updateSelectedQRBTemplateBtn:S},`${e}`)}))]}))};export{r as default};

package/dist/esm/components/template-context-mapper/modalElements/Footer.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export interface FooterProps {
-    onSelect: () => void;
-}
-declare const Footer: ({ onSelect }: FooterProps) => JSX.Element;
-export default Footer;

package/dist/esm/components/template-context-mapper/modalElements/Footer.js

@@ -1,13 +0,0 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"styled-components";import{Button as r}from"../../button/Button.js";import{COLORS as i}from"../../../constants/Theme.js";import{Badge as n}from"../Badge/index.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";const p=o.div`
-	background: ${i.surface.standard};
-	border-top-width: 1px;
-	border-top-color: ${i.stroke.primary};
-	box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.12);
-	width: 100%;
-	padding: 16px 24px;
-	display: flex;
-	justify-content: end;
-	gap: 12;
-	border-bottom-left-radius: 4px;
-	border-bottom-right-radius: 4px;
-`,a=o=>{let{onSelect:i}=o;const{isError:a}=s();return t(p,{children:[a&&e(n,{errorText:"Some inputs are missing or incorrect. Please check"}),e(r,{id:"select-template-btn",buttonText:"Select template",size:"large",onClick:i})]})};export{a as default};

package/dist/esm/components/template-context-mapper/modalElements/Header.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export interface HeaderProps {
-    showOnlyContent?: boolean;
-}
-declare const Header: ({ showOnlyContent }: HeaderProps) => JSX.Element;
-export default Header;

package/dist/esm/components/template-context-mapper/modalElements/Header.js

@@ -1,23 +0,0 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../../assets/icons/desktop_custom.svg.js";import n from"../../../assets/icons/mobile_custom.svg.js";import i from"styled-components";import{BodyPrimary as r}from"../../TypographyStyle.js";import{COLORS as s}from"../../../constants/Theme.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";const c=i.div`
-	padding-top: 12px;
-	padding-bottom: 12px;
-	padding-left: 30px;
-	padding-right: 30px;
-	background-color: ${s.surface.subdued};
-	align-items: center;
-	display: flex;
-	filter: ${e=>e.showOnlyContent?"none":"drop-shadow(rgba(0, 0, 0, 0.12) 0px 12px 12px)"};
-`,a=i.div`
-	display: flex;
-	border: 1px solid ${s.stroke.primary};
-	border-radius: 4px;
-	overflow: hidden;
-	width: min-content;
-`,l=i.div`
-	background: ${e=>e.active?s.background.brandLight:s.background.base};
-	padding: 6px 8px;
-	justify-content: center;
-	align-items: center;
-`,p=i(l)`
-	border-left: 1px solid ${s.stroke.primary};
-`,m=i=>{let{showOnlyContent:m}=i;const{device:b,setDevice:g}=d();return e(c,Object.assign({showOnlyContent:m},{children:[e(a,{children:[t(l,Object.assign({active:"mobile"===b,onClick:()=>null==g?void 0:g("mobile")},{children:t(n,{color:"mobile"===b?s.content.brand:s.content.secondary,height:20,width:20})})),t(p,Object.assign({active:"desktop"===b,onClick:()=>null==g?void 0:g("desktop")},{children:t(o,{color:"desktop"===b?s.content.brand:s.content.secondary,height:20,width:20})}))]}),e(r,Object.assign({style:{color:s.content.primary,marginLeft:16}},{children:["mobile"===b?"Mobile":"Web"," view"]}))]}))};export{m as default};

package/dist/esm/components/template-context-mapper/modalElements/MobilePreview.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
-import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
-import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
-import { WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
-declare const MobilePreview: React.ForwardRefExoticComponent<{
-    display_content: string;
-    channel: CHANNEL_TYPE;
-    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null;
-} & React.RefAttributes<HTMLDivElement>>;
-export default MobilePreview;

package/dist/esm/components/template-context-mapper/modalElements/MobilePreview.js

@@ -1,20 +0,0 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import a from"styled-components";import{TemplatePreview as o}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../template-preview/models/TemplateMeta.js";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";const p=a.div`
-	position: relative;
-	height: 100%;
-	border-radius: 31px;
-	width: ${e=>e.channel===r.WHATSAPP?"236px":"213px"};
-	background-color: white;
-	margin: auto;
-	overflow-y: auto;
-`,l=a.div`
-	position: absolute;
-	flex: 1;
-	background-color: white;
-	scroll-behavior: smooth;
-	left: 12px;
-	top: 8px;
-	width: calc(100% - 25px);
-	height: calc(100% - 17px);
-	border-radius: 16px;
-	overflow-y: auto;
-`,s=i.forwardRef(((i,a)=>{let{display_content:s,channel:m,template:n}=i;return e("div",{children:t(p,Object.assign({channel:m},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:m===r.WHATSAPP?236:213,height:443}}),e(l,Object.assign({ref:a},{children:e(o,{template:n,channel:m,smsSpecificMeta:{smsDisplayContent:s},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:!0,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:s,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));s.displayName="MobilePreview";export{s as default};

package/dist/esm/components/template-context-mapper/modalElements/TemplateSelectModalContent.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
-import { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
-export interface TemplateSelectModalContentProps {
-    channel: CHANNEL_TYPE;
-    showVariableMapping?: boolean;
-    hideHeader?: boolean;
-    showOnlyContent?: boolean;
-    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
-}
-declare const TemplateSelectModalContent: ({ channel, showVariableMapping, showOnlyContent, whatsappSpecificPickerMeta, }: TemplateSelectModalContentProps) => JSX.Element;
-export default TemplateSelectModalContent;

package/dist/esm/components/template-context-mapper/modalElements/TemplateSelectModalContent.js

@@ -1 +0,0 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{CHANNEL_TYPE as i}from"../../template-preview/models/Channels.js";import n from"./Body.js";import o from"./Header.js";const a=a=>{let{channel:r,showVariableMapping:p,showOnlyContent:s,whatsappSpecificPickerMeta:l}=a;return e("div",Object.assign({style:{paddingBottom:0}},{children:t("div",{children:[r===i.EMAIL&&e(o,{showOnlyContent:s}),e(n,{whatsappSpecificPickerMeta:l,showVariableMapping:!!p,showOnlyContent:s})]})}))};export{a as default};

package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
-import { CUSTOM_VARIABLE } from "../../template-preview/models/TemplateMeta";
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
-    focused?: boolean | undefined;
-    channel?: CHANNEL_TYPE | undefined;
-}, never>;
-/** COMPONENT BELOW */
-export interface VariableConnectorProps {
-    onFocus?: () => void;
-    variable: CUSTOM_VARIABLE;
-    index: number;
-}
-declare const VariableConnector: ({ onFocus, variable, index, }: VariableConnectorProps) => JSX.Element;
-export default VariableConnector;

package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js

@@ -1,7 +0,0 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l,useEffect as n}from"react";import o from"styled-components";import{Dropdown as i}from"../../dropdown/Dropdown.js";import{Input as a}from"../../input/Input.js";import{placeHolderNamePattern as s}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as u}from"../../template-preview/models/Channels.js";import{BodySecondary as r}from"../../TypographyStyle.js";import d from"../../../utils/StringUtils.js";import{COLORS as c}from"../../../constants/Theme.js";import{useTemplateModalContext as m}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as v}from"../utils/getVariableNameEmail.js";import{validateIsUrl as p}from"../utils/validateIsUrl.js";const b=o.div`
-	/* surface/$color-background-warning-light */
-
-	background: ${e=>e.focused&&e.channel===u.EMAIL?c.background.warning.light:"transparent"};
-	border-radius: 4px;
-	padding: 8px 10px;
-`,g={value:"custom_link",label:"Custom URL"},x={value:"custom_text",label:"Custom text"},h=o=>{let{onFocus:h,variable:f,index:j}=o;var _;const[y,k]=l(!1),[A,O]=l(""),[P,T]=l([]),[E,S]=l(),{device:L,channel:W,isError:C,originalVariableList:M,template:V,templateSelectionTriggered:w,setTemplate:H,setDisplayContent:I,setOriginalVariableList:B,globalNormalizedPlaceholders:$}=m();function U(e,t){var l,n;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(W!==u.WHATSAPP){const n=v(j+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===L?"template_html_mobile":"template_html_desktop"),a=W===u.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(n):document.getElementById(n);a&&(a.textContent="custom_text"!==t&&"custom_link"!==t||e?e:f.variableName);const s=M.map(((t,l)=>l===j?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==B||B(s)}if(W===u.WHATSAPP){const t=null===(n=M.body)||void 0===n?void 0:n.map(((t,l)=>l===j?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==B||B((e=>Object.assign(Object.assign({},e),{body:t,buttons:M.buttons})))}}function N(e,t){var l;const n=Object.assign({},V),o=null===(l=null==n?void 0:n.components)||void 0===l?void 0:l.map((l=>{var n,o,i,a,s;const u=Object.assign({},l);if("BODY"===l.type&&(null===(o=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])){const l=[...null!==(s=null===(a=null===(i=u.example)||void 0===i?void 0:i.body_text)||void 0===a?void 0:a[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const n=Object.assign(Object.assign({},u.example),{body_text:[l]});return Object.assign(Object.assign({},u),{example:n})}return l}));n.components=o,null==H||H(n)}return n((()=>{y&&(null==h||h())}),[y]),n((()=>{!function(){var e,t,l,n,o;const i="mobile"===L?"template_html_mobile":"template_html_desktop",a=document.getElementById(i),s=(null!==(n=null===(l=null===(t=null===(e=null==a?void 0:a.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==n?n:"")+(null===(o=null==a?void 0:a.contentWindow)||void 0===o?void 0:o.document.head.innerHTML);W===u.EMAIL&&(null==I||I(s))}()}),[w]),n((()=>{var e;const t=[];let l=[];if(W===u.MESSAGE){const e=null!=$?$:[];T([{label:"",options:[x,g]},...e]),l=[{label:"",options:[x,g]},...e]}else{"link"===(null==f?void 0:f.type)?(t.push({label:"",options:[g,x]}),S(g)):(t.push({label:"",options:[g,x]}),S(x));const e=null!=$?$:[];T([...t,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:d.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),l=[...t,...e]}if((W===u.WHATSAPP||W===u.EMAIL||W===u.MESSAGE)&&f.updatedValue)if(s.test(f.updatedValue)&&W===u.WHATSAPP||f.updatedValue.startsWith("{{")&&W!==u.WHATSAPP){const e=function(e,t,l){let n={label:"",value:""};const o=l===u.WHATSAPP?e.replace("[[","").replace("]]",""):e.replace("{{","").replace("}}","");return t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===o.trim()&&(n=e)}))})),n}(f.updatedValue,l,W);e.value&&S(e)}else(null===(e=f.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(S(g),O(f.updatedValue.split("https://")[1])):(S(x),O(f.updatedValue))}),[]),e(b,Object.assign({channel:W,focused:y,onMouseEnter:()=>k(!0),onMouseLeave:()=>k(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(r,Object.assign({style:{color:C&&!E?c.content.negative:c.content.primary}},{children:[null===(_=f.variableName)||void 0===_?void 0:_.replace("{{","").replace("}}","")," ","link"===(null==f?void 0:f.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:t(i,{options:P,isSearchable:!1,onSelect:function(e,t){var l,n,o;const i=e;O(""),S(i),W===u.WHATSAPP?"custom_text"!==i.value&&"custom_link"!==i.value?(U(null!==(l=i.value)&&void 0!==l?l:"","string"),null==N||N(null!==(n=f.index)&&void 0!==n?n:0,`[[${i.value}]]`)):(null==N||N(null!==(o=f.index)&&void 0!==o?o:0,f.variableName),U("","url"===i.bikPlaceholderType?"link":"string")):"custom_text"!==i.value&&"custom_link"!==i.value?U(i.value,"url"===i.bikPlaceholderType?"link":"string"):(O(""),U("",i.value))},defaultOptions:E?[Object.assign(Object.assign({},E),{selected:!0})]:[]})})),("custom_text"===(null==E?void 0:E.value)||"custom_link"===(null==E?void 0:E.value))&&t(a,{labelText:"custom_text"===(null==E?void 0:E.value)?"Custom text value":"custom_link"===(null==E?void 0:E.value)?"Custom URL value":"",id:`variable-value-${null==E?void 0:E.value}-${j}`,value:A,errorMessage:C?A?"custom_link"!==E.value||p(A)?"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==E?void 0:E.value)?void 0:30,prefixText:"custom_link"===(null==E?void 0:E.value)?"https://":"",placeholder:"link"===f.type||"custom_link"===E.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>function(e,t){var l;O(t);const n="custom_link"===(null==E?void 0:E.value)?`https://${t}`:t;U(n,e),W===u.WHATSAPP&&(null==N||N(null!==(l=f.index)&&void 0!==l?l:0,n))}(E.value,e)})]}))};export{b as Container,h as default};

package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
-export type ComponentType = WhatsAppTemplate['components'][0];
-export interface VariableConnectorWhatsAppProps {
-    originalVariableList: WhatsAppTemplateVariables;
-    descriptionComponent: ComponentType;
-    variableMapping: string[] | undefined;
-    type: ComponentType['type'];
-}
-declare const VariableConnectorWhatsApp: ({ descriptionComponent, type, }: VariableConnectorWhatsAppProps) => JSX.Element;
-export default VariableConnectorWhatsApp;

package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js

@@ -1 +0,0 @@
-import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{Input as i}from"../../input/Input.js";import{BodySecondary as o}from"../../TypographyStyle.js";import{COLORS as a}from"../../../constants/Theme.js";import{useTemplateModalContext as n}from"../context/templateModalContext.js";import l from"./VariableConnector.js";const s=s=>{let{descriptionComponent:p,type:d}=s;var m;const{originalVariableList:c}=n();return"BODY"===p.type?e("div",{children:null===(m=null==c?void 0:c.body)||void 0===m?void 0:m.map(((r,n)=>r.isEditableVariable?e(l,{index:n,variable:r},`${n}-${r.index}`):t("div",Object.assign({style:{margin:"16px 8px"}},{children:[t(o,Object.assign({style:{color:a.content.primary}},{children:["HEADER"===d?"Header":""," Locked variable ",n+1]})),e(i,{state:"disabled",placeholder:r.variableName,onChangeText:()=>{}})]}),n)))}):e(r,{})};export{s as default};

package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export interface VariableConnectorsProps {
-    onFocus?: (variableIndex: number) => void;
-}
-declare const VariableConnectors: ({ onFocus }: VariableConnectorsProps) => JSX.Element;
-export default VariableConnectors;

package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.js

@@ -1,6 +0,0 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import i from"../../../assets/icons/info.svg.js";import o from"styled-components";import{Input as n}from"../../input/Input.js";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";import{Tooltip as l}from"../../tooltips/Tooltip.js";import{TitleRegular as a,BodySecondary as s}from"../../TypographyStyle.js";import{COLORS as c}from"../../../constants/Theme.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";import m from"./VariableConnector.js";const p=o.div`
-	overflow-y: auto;
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-`,h=o=>{let{onFocus:h}=o;const{originalVariableList:b,channel:y}=d();return e(p,{children:[e("div",Object.assign({style:{padding:8}},{children:[e("div",Object.assign({style:{display:"flex",gap:8}},{children:[t(a,Object.assign({style:{color:c.content.primary}},{children:"Edit variables and links"})),t(l,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:t("div",{children:t(i,{width:20,height:20,color:c.content.placeholder})})}))]})),t(s,Object.assign({style:{color:c.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==b?void 0:b.map(((i,o)=>y!==r.EMAIL||i.isEditableVariable?t("div",Object.assign({style:{marginTop:16}},{children:t(m,{index:o,variable:i,onFocus:()=>null==h?void 0:h(o)})}),o):e("div",Object.assign({style:{margin:"16px 8px"}},{children:[e(s,Object.assign({style:{color:c.content.primary}},{children:["Locked variable ",o+1]})),t(n,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),o)))]})};export{p as Container,h as default};

package/dist/esm/components/template-context-mapper/modalElements/VariableEditorHeader.d.ts

@@ -1,9 +0,0 @@
-import { CSSProperties } from 'react';
-export interface VariableEditorHeaderProps {
-    headerText: string;
-    subText: string;
-    toolTipInfo?: string;
-    containerStyle?: CSSProperties;
-}
-declare const VariableEditorHeader: ({ headerText, subText, toolTipInfo, containerStyle, }: VariableEditorHeaderProps) => JSX.Element;
-export default VariableEditorHeader;

package/dist/esm/components/template-context-mapper/modalElements/VariableEditorHeader.js

@@ -1,9 +0,0 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../../assets/icons/info.svg.js";import i from"styled-components";import{Tooltip as n}from"../../tooltips/Tooltip.js";import{BodySecondary as r,TitleRegular as s}from"../../TypographyStyle.js";import{COLORS as l}from"../../../constants/Theme.js";const a=i(r)`
-	line-height: 1.5 !important;
-`,c=i.div`
-	padding-top: 24px;
-	padding-left: 10px;
-	padding-right: 10px;
-	margin-bottom: 8px;
-	line-height: normal;
-`,p=i=>{let{headerText:r,subText:p,toolTipInfo:d,containerStyle:m}=i;return t(c,Object.assign({style:Object.assign({},m)},{children:[t("div",Object.assign({style:{display:"flex",gap:8}},{children:[e(s,Object.assign({style:{color:l.content.primary}},{children:r})),d&&e(n,Object.assign({body:p},{children:e("div",{children:e(o,{width:20,height:20,color:l.content.placeholder})})}))]})),e(a,Object.assign({style:{color:l.content.secondary,marginBottom:0,lineHeight:20,display:"block"}},{children:p}))]}))};export{p as default};

package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import { ButtonPlaceHolderOptions } from "../../template-preview/models/TemplateMeta";
-import { CTABtnValType, QRBBtnValType, TEMPLATE_BUTTON } from "../../template-preview/models/WhatsAppTemplate";
-import { WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
-export type URLBtnUpdateFunctionType = (val: CTABtnValType, mode: 'custom' | 'placeholder', btnIndex?: number) => void;
-export type QRBBtnUpdateFunctionType = (val: QRBBtnValType, mode: 'custom' | 'placeholder', btnIndex?: number) => void;
-export interface WhatsAppTemplateCardButtonV2Props {
-    originalVariableList: WhatsAppTemplateVariables;
-    updateSelectedURLTemplateBtn?: URLBtnUpdateFunctionType;
-    updateSelectedQRBTemplateBtn?: QRBBtnUpdateFunctionType;
-    button: TEMPLATE_BUTTON;
-    CTAoptions?: ButtonPlaceHolderOptions[];
-    QRBoptions?: ButtonPlaceHolderOptions[];
-}
-declare const WhatsAppTemplateCardButtonV2: ({ button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, originalVariableList, CTAoptions, QRBoptions, }: WhatsAppTemplateCardButtonV2Props) => JSX.Element;
-export default WhatsAppTemplateCardButtonV2;

package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js

@@ -1 +0,0 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l,useEffect as o}from"react";import{Dropdown as a}from"../../dropdown/Dropdown.js";import{Input as n}from"../../input/Input.js";import{editableVarPattern as s}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as i}from"../../template-preview/models/TemplateMeta.js";import{BUTTON_TYPE as r}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as p}from"../../TypographyStyle.js";import{COLORS as m}from"../../../constants/Theme.js";import{useTemplateModalContext as c}from"../context/templateModalContext.js";import{validateIsUrl as d}from"../utils/validateIsUrl.js";import{Container as u}from"./VariableConnector.js";const b=b=>{let{button:f,updateSelectedURLTemplateBtn:j,updateSelectedQRBTemplateBtn:g,originalVariableList:h,CTAoptions:v,QRBoptions:y}=b;const[x,O]=l(""),[R,L]=l(),{setOriginalVariableList:U,isError:w}=c();function T(e){O(e);const t=[Object.assign(Object.assign({},h.buttons[0]),{type:r.URL,buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]})];null==U||U({body:[...h.body],buttons:[...t]}),null==j||j(`https://${e}`,"custom")}return o((()=>{var e;if(f.buttonVariable&&s.test(f.buttonVariable))L(i),O((null===(e=f.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===f.type?v:y;e="URL"===f.type?t.findIndex((e=>e.placeHolder===f.buttonVariable)):t.findIndex((e=>e.label===f.flowName)),e>-1&&L(t[e])}}),[]),e(u,{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(p,Object.assign({style:{color:m.content.primary}},{children:[f.text," button"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:t(a,{options:"URL"===f.type?v:y,isSearchable:!1,onSelect:function(e,t){const l=e;L(l);const o=("URL"===f.type?v:y).find((e=>e.placeHolder===l.placeHolder));if(o)if("custom_link"!==o.value){let e;"URL"===f.type?(e=[Object.assign(Object.assign({},h.buttons[0]),{type:"URL",buttonVariable:l.placeHolder,example:["https://bik.ai/"]})],null==j||j({defaultValue:o.value,placeHolder:o.placeHolder},"placeholder")):(e=h.buttons.map(((e,t)=>t===f.index?Object.assign(Object.assign({},e),{type:"QUICK_REPLY",flowName:l.label,flowId:l.value}):e)),null==g||g({flowName:l.label,flowId:l.value},"placeholder",f.index)),null==U||U({body:[...h.body],buttons:[...e]})}else T("")},defaultOptions:R?[Object.assign(Object.assign({},R),{selected:!0})]:[]})})),"custom_link"===(null==R?void 0:R.value)&&t("div",Object.assign({style:{marginBottom:20}},{children:t(n,{errorMessage:w?x?d(x)?"":"Enter valid URL":"Required field":"",value:x,prefixText:"custom_link"===(null==R?void 0:R.value)?"https://":"",placeholder:"Enter custom URL here",onChangeText:T})}))]})};export{b as default};

package/dist/esm/components/template-context-mapper/utils/convertPlaceholdersToBikDropdown.d.ts

@@ -1,6 +0,0 @@
-import { SingleOption } from "../../dropdown/type";
-import { GlobalPlaceholderType } from "../../template-preview/models/TemplateMeta";
-export declare const convertPlaceholdersToBikDropdown: (data?: GlobalPlaceholderType) => {
-    label: string;
-    options: SingleOption[];
-}[];

package/dist/esm/components/template-context-mapper/utils/convertPlaceholdersToBikDropdown.js

@@ -1 +0,0 @@
-const l=l=>{const e=[];return l&&Object.keys(l).forEach((o=>{var t;const r=l[o],n=null!==(t=null==r?void 0:r.map((l=>{var e;return{label:l.title,value:l.placeHolder,bikPlaceholderType:null!==(e=l.type)&&void 0!==e?e:"string"}})))&&void 0!==t?t:[];e.push({label:o,options:n})})),e};export{l as convertPlaceholdersToBikDropdown};

package/dist/esm/components/template-context-mapper/utils/getDataFromTemplateComponent.d.ts

@@ -1,21 +0,0 @@
-import { WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
-type ComponentType = WhatsAppTemplate['components'][0];
-export declare const getAllDataFromTemplateComponent: (template: WhatsAppTemplate) => {
-    imageComponent: null;
-    descriptionComponents: {
-        component: ComponentType;
-        i: number;
-        type: ComponentType['type'];
-    }[];
-    urlBtns: {
-        component: ComponentType;
-        i: number;
-    }[];
-    qrbBtns: {
-        component: ComponentType;
-        i: number;
-    }[];
-    bodyVariables: string[];
-    headerVariables: string[];
-};
-export {};

package/dist/esm/components/template-context-mapper/utils/getDataFromTemplateComponent.js

@@ -1 +0,0 @@
-const o=o=>{var n,t;const e=[],i=[],p=[],l=[],s=[];let a=null;return o.components.forEach(((o,n)=>{var t,l,s,u,d,r;if("BODY"===o.type&&o.text&&e.push({component:o,i:n,type:"BODY"}),"HEADER"===o.type&&"NONE"!==o.format&&"TEXT"!==o.format&&(null===(l=null===(t=o.example)||void 0===t?void 0:t.header_handle)||void 0===l?void 0:l[0])&&(a=o),"HEADER"===o.type&&"TEXT"===o.format&&e.push({component:o,i:n,type:"HEADER"}),"BUTTONS"===o.type){const t=null===(u=null===(s=o.buttons)||void 0===s?void 0:s.filter)||void 0===u?void 0:u.call(s,(o=>"URL"===o.type));i.push({component:Object.assign(Object.assign({},o),{buttons:t}),i:n});const e=null===(r=null===(d=o.buttons)||void 0===d?void 0:d.filter)||void 0===r?void 0:r.call(d,(o=>"QUICK_REPLY"===o.type));p.push({component:Object.assign(Object.assign({},o),{buttons:e}),i:n}),p.push}})),o.mapping&&(null===(n=o.mapping.body)||void 0===n||n.forEach((o=>{l.push(o)}))),o.mapping&&(null===(t=o.mapping.header)||void 0===t||t.forEach((o=>{s.push(o)}))),{imageComponent:a,descriptionComponents:e,urlBtns:i,qrbBtns:p,bodyVariables:l,headerVariables:s}};export{o as getAllDataFromTemplateComponent};

package/dist/esm/components/template-context-mapper/utils/getFormattedMonthDate.d.ts

@@ -1 +0,0 @@
-export declare function getFormattedMonthDate(date: Date): string;

package/dist/esm/components/template-context-mapper/utils/getFormattedMonthDate.js

@@ -1 +0,0 @@
-const t=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];function e(e){if("string"==typeof e)return e;const n=t[e.getMonth()],r=e.getDate();return`${n} ${r<10?"0":""}${r}`}export{e as getFormattedMonthDate};

package/dist/esm/components/template-context-mapper/utils/getVariableNameEmail.d.ts

@@ -1,2 +0,0 @@
-export declare const SMS_TEMPLATE_VAR_PATTERN: RegExp;
-export declare const getVariableNameForEmailByIndex: (index: number) => string;

package/dist/esm/components/template-context-mapper/utils/getVariableNameEmail.js

@@ -1 +0,0 @@
-const o=o=>"connectors_variable_"+o;export{o as getVariableNameForEmailByIndex};

package/dist/esm/components/template-context-mapper/utils/highlightFor.d.ts

@@ -1,3 +0,0 @@
-import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
-import { DEVICE_TYPES } from '../context/templateModalContext';
-export declare function highlightFor(id: string, color: string, seconds: number, channel: CHANNEL_TYPE, device: DEVICE_TYPES): void;

package/dist/esm/components/template-context-mapper/utils/highlightFor.js

@@ -1 +0,0 @@
-import{CHANNEL_TYPE as e}from"../../template-preview/models/Channels.js";function o(o,t,n,l,d){var m;const i=null===document||void 0===document?void 0:document.getElementById("mobile"===d?"template_html_mobile":"template_html_desktop"),u=l===e.EMAIL?null===(m=null==i?void 0:i.contentWindow)||void 0===m?void 0:m.document.getElementById(o):document.getElementById(o);if(u){const e=u.style.backgroundColor;u.style.backgroundColor=t,setTimeout((function(){u.style.backgroundColor=e}),1e3*n)}}export{o as highlightFor};

package/dist/esm/components/template-context-mapper/utils/validateIsUrl.d.ts

@@ -1 +0,0 @@
-export declare const validateIsUrl: (recievedMediaLink: string) => boolean;

package/dist/esm/components/template-context-mapper/utils/validateIsUrl.js

@@ -1 +0,0 @@
-const d=d=>!!new RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_,.~+=-]*)?(\\#[-a-z\\d_]*)?$","i").test(d);export{d as validateIsUrl};

package/dist/esm/components/template-preview/EmailTemplateHTMLPreview.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const EmailTemplateHTMLPreview: React.FC<{
-    display_content: string;
-    containerId: string;
-}>;

package/dist/esm/components/template-preview/EmailTemplatePreview.styled.d.ts

@@ -1,12 +0,0 @@
-export declare const Header: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ImageContainer: import("styled-components").StyledComponent<"div", any, {
-    hideHeader?: boolean | undefined;
-}, never>;
-export declare const CardLoadingContainer: import("styled-components").StyledComponent<"div", any, {
-    hideHeader?: boolean | undefined;
-}, never>;
-export declare const IframeContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ViewButton: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const EmailContainer: import("styled-components").StyledComponent<"div", any, {
-    hideHeader?: boolean | undefined;
-}, never>;

package/dist/esm/components/template-preview/EmailTemplatePreview.styled.js

@@ -1,42 +0,0 @@
-import r from"styled-components";import{COLORS as e,BASE_COLORS as o}from"../../constants/Theme.js";const t=r.div`
-	padding: 16px;
-	padding-bottom: 12px;
-	border-top-left-radius: 4px;
-	border-top-right-radius: 4px;
-	border: 1px solid ${e.stroke.primary};
-`,d=r.div`
-	width: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	border-left: 1px solid ${e.stroke.primary};
-	border-right: 1px solid ${e.stroke.primary};
-	border-top-color: ${e.stroke.primary};
-	border-top-width: ${r=>r.hideHeader?"1px":"0px"};
-	overflow: scroll;
-`,i=r.div`
-	width: 100%;
-	height: 100%;
-	background-color: ${o.grayscale[100]};
-`,s=r.div`
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	flex-grow: 1;
-`,a=r.div`
-	display: flex;
-	justify-content: center;
-	width: 100%;
-	background: ${e.surface.standard};
-	border-bottom-left-radius: 4px;
-	border-bottom-right-radius: 4px;
-	border: 1px solid ${e.stroke.primary};
-`,p=r.div`
-	border-radius: 4px;
-	background-color: ${e.surface.standard};
-	margin-top: ${r=>r.hideHeader?0:16};
-	display: flex;
-	flex-direction: column;
-`;export{i as CardLoadingContainer,p as EmailContainer,t as Header,s as IframeContainer,d as ImageContainer,a as ViewButton};

package/dist/esm/components/template-preview/EmailTemplateThumbnailPreview.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import { CSSProperties } from 'styled-components';
-import { EmailTemplateType } from './models/EmailTemplate';
-declare const EmailTemplateThumbnailPreview: React.FC<{
-    template: EmailTemplateType;
-    hideHeader?: boolean;
-    handleViewTemplate: () => void;
-    hideViewButton?: boolean;
-    containerStyle?: CSSProperties;
-    emailHtmlContainerId?: string;
-    emailDisplayContent?: string;
-}>;
-export default EmailTemplateThumbnailPreview;

package/dist/esm/components/template-preview/EmailTemplateThumbnailPreview.js

@@ -1 +0,0 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Button as i}from"../button/Button.js";import{TitleRegular as n}from"../TypographyStyle.js";import{EmailContainer as r,Header as l,IframeContainer as a,ImageContainer as o,CardLoadingContainer as m,ViewButton as s}from"./EmailTemplatePreview.styled.js";const d=d=>{let{template:c,handleViewTemplate:h,hideHeader:p,hideViewButton:y,containerStyle:u,emailHtmlContainerId:j,emailDisplayContent:b}=d;return e(r,Object.assign({hideHeader:p,style:Object.assign({},null!=u?u:{})},{children:[!p&&t(l,{children:t(n,Object.assign({style:{maxWidth:"100%"}},{children:c.name}))}),t(a,{children:b?t("iframe",{title:"Email template preview",id:null!=j?j:"",width:"100%",srcDoc:b,height:"100%",style:{pointerEvents:"none"}}):t(o,Object.assign({hideHeader:p},{children:t(m,{})}))}),!y&&t(s,{children:t(i,{buttonType:"tertiary",buttonText:"View",onClick:()=>{h&&h()}})})]}))};export{d as default};

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

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-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) => JSX.Element;
-export default SMSBubble;

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

@@ -1,12 +0,0 @@
-import{jsxs as t,jsx as o}from"react/jsx-runtime";import e from"../../../assets/icons/union.svg.js";import i from"styled-components";import{COLORS as n}from"../../../constants/Theme.js";const r=i.div`
-	position: absolute;
-	width: 30px;
-	height: 30px;
-	left: -10px;
-	bottom: -1px;
-`,s=i.div`
-	padding: 12px;
-	background: ${n.background.base};
-	border-radius: 16px;
-	position: relative;
-`,d=i=>{const{content:d,size:a}=i;return t(s,{children:[o(r,{children:o(e,{color:n.background.base,height:27,width:27})}),o("div",{style:{fontSize:"small"===a?12:14},dangerouslySetInnerHTML:{__html:d}})]})};export{s as SMSContainer,r as SideCaret,d as default};

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

@@ -1,12 +0,0 @@
-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';
-}>;
-export default SmsTemplatePreview;

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

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

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

@@ -1,13 +0,0 @@
-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/esm/components/template-preview/SmsTemplatePreview.styled.js

@@ -1,46 +0,0 @@
-import r from"styled-components";import{COLORS as o}from"../../constants/Theme.js";r.div`
-	position: absolute;
-	width: 8px;
-	height: 8px;
-	left: -5px;
-	bottom: 2px;
-`;const d=r.div`
-	padding: ${r=>"small"===r.size?"12px 32px 12px 12px":"16px 56px 12px 16px"};
-	background: ${o.surface.standard};
-	border-radius: 4px;
-`,p=r.div`
-	padding: 16px;
-	background: ${o.surface.standard};
-	border-top-left-radius: 4px;
-	border-top-right-radius: 4px;
-	border-bottom: 1px solid ${o.stroke.primary};
-`;r.div`
-	border: 1px solid ${o.stroke.primary};
-	height: 100%;
-	border-top-left-radius: 4px;
-	border-top-right-radius: 4px;
-`,r.div`
-	margin-top: ${r=>r.hideHeader?0:"16px"};
-	border-radius: 4px;
-	border-color: ${o.stroke.primary};
-	border-width: ${r=>r.outsidePreview?0:"1px"};
-`,r.div`
-	position: absolute;
-	width: 30px;
-	height: 30px;
-	left: -10px;
-	bottom: -1px;
-`,r.div`
-	padding: 12px;
-	background: ${o.background.base};
-	border-radius: 16px;
-`;const t=r.div`
-	padding: 10px;
-	position: sticky;
-	top: 0;
-	z-index: 1;
-	background: ${o.surface.standard};
-	display: flex;
-	justify-content: space-between;
-	border-bottom: 1px solid ${o.background.base};
-`;export{d as SMSBubbleContainer,p as SMSCardHeader,t as SMSHeader};