@bikdotai/bik-component-library 0.0.269-beta--switch → 0.0.269

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../template-preview/models/Channels.js"),r=require("./Body.js"),s=require("./Header.js");exports.default=a=>{let{channel:i,showVariableMapping:n,showOnlyContent:l,whatsappSpecificPickerMeta:o}=a;return e.jsx("div",Object.assign({style:{paddingBottom:0}},{children:e.jsxs("div",{children:[i===t.CHANNEL_TYPE.EMAIL&&e.jsx(s.default,{showOnlyContent:l}),e.jsx(r.default,{whatsappSpecificPickerMeta:o,showVariableMapping:!!n,showOnlyContent:l})]})}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../template-preview/models/Channels.js"),t=require("./Body.js"),i=require("./Header.js");exports.default=r=>{let{channel:s,showVariableMapping:l,showOnlyContent:n,whatsappSpecificPickerMeta:o,showVariableModal:d,variableList:p}=r;return e.jsx("div",Object.assign({style:{paddingBottom:0}},{children:e.jsxs("div",{children:[s===a.CHANNEL_TYPE.EMAIL&&e.jsx(i.default,{showOnlyContent:n}),e.jsx(t.default,{whatsappSpecificPickerMeta:o,showVariableMapping:!!l,showOnlyContent:n,showVariableModal:d,variableList:p})]})}))};

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
 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, {
@@ -10,6 +11,8 @@ export interface VariableConnectorProps {
     onFocus?: () => void;
     variable: CUSTOM_VARIABLE;
     index: number;
+    showVariableModal?: boolean;
+    variableList?: VariableListInterfaceV2[];
 }
-declare const VariableConnector: ({ onFocus, variable, index, }: VariableConnectorProps) => JSX.Element;
+declare const VariableConnector: ({ onFocus, variable, index, showVariableModal, variableList, }: VariableConnectorProps) => JSX.Element;
 export default VariableConnector;

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

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

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
 import { WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
 export type ComponentType = WhatsAppTemplate['components'][0];
 export interface VariableConnectorWhatsAppProps {
@@ -6,6 +7,8 @@ export interface VariableConnectorWhatsAppProps {
     descriptionComponent: ComponentType;
     variableMapping: string[] | undefined;
     type: ComponentType['type'];
+    showVariableModal?: boolean;
+    variableList?: VariableListInterfaceV2[];
 }
-declare const VariableConnectorWhatsApp: ({ descriptionComponent, type, }: VariableConnectorWhatsAppProps) => JSX.Element;
+declare const VariableConnectorWhatsApp: ({ descriptionComponent, type, showVariableModal, variableList, }: VariableConnectorWhatsAppProps) => JSX.Element;
 export default VariableConnectorWhatsApp;

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

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

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

@@ -1,7 +1,10 @@
 /// <reference types="react" />
+import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 export interface VariableConnectorsProps {
     onFocus?: (variableIndex: number) => void;
+    showVariableModal?: boolean;
+    variableList?: VariableListInterfaceV2[];
 }
-declare const VariableConnectors: ({ onFocus }: VariableConnectorsProps) => JSX.Element;
+declare const VariableConnectors: ({ onFocus, showVariableModal, variableList, }: VariableConnectorsProps) => JSX.Element;
 export default VariableConnectors;

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

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/info.svg.js"),i=require("styled-components"),s=require("../../template-preview/models/Channels.js"),n=require("../../tooltips/Tooltip.js"),l=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),a=require("../context/templateModalContext.js"),o=require("./VariableConnector.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const d=c(i).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/info.svg.js"),i=require("styled-components"),s=require("../../input/Input.js"),a=require("../../template-preview/models/Channels.js"),l=require("../../tooltips/Tooltip.js"),r=require("../../TypographyStyle.js"),n=require("../../../constants/Theme.js"),o=require("../context/templateModalContext.js"),d=require("./VariableConnector.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const u=c(i).default.div`
 	overflow-y: auto;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-`;exports.Container=d,exports.default=i=>{let{onFocus:c}=i;const{originalVariableList:u,channel:j}=a.useTemplateModalContext();return e.jsxs(d,{children:[e.jsxs("div",Object.assign({style:{padding:8}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8}},{children:[e.jsx(l.TitleRegular,Object.assign({style:{color:r.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(n.Tooltip,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:e.jsx("div",{children:e.jsx(t.default,{width:20,height:20,color:r.COLORS.content.placeholder})})}))]})),e.jsx(l.BodySecondary,Object.assign({style:{color:r.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==u?void 0:u.map(((t,i)=>j!==s.CHANNEL_TYPE.EMAIL||t.isEditableVariable?e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(o.default,{index:i,variable:t,onFocus:()=>null==c?void 0:c(i)})}),i):e.jsx(e.Fragment,{})))]})};
+`;exports.Container=u,exports.default=i=>{let{onFocus:c,showVariableModal:p,variableList:h}=i;const{originalVariableList:j,channel:x}=o.useTemplateModalContext();return e.jsxs(u,{children:[e.jsxs("div",Object.assign({style:{padding:8}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8}},{children:[e.jsx(r.TitleRegular,Object.assign({style:{color:n.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(l.Tooltip,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:e.jsx("div",{children:e.jsx(t.default,{width:20,height:20,color:n.COLORS.content.placeholder})})}))]})),e.jsx(r.BodySecondary,Object.assign({style:{color:n.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==j?void 0:j.map(((t,i)=>x!==a.CHANNEL_TYPE.EMAIL||t.isEditableVariable?e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(d.default,{index:i,variable:t,onFocus:()=>null==c?void 0:c(i),showVariableModal:p,variableList:h})}),i):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(r.BodySecondary,Object.assign({style:{color:n.COLORS.content.primary}},{children:["Locked variable ",i+1]})),e.jsx(s.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),i)))]})};

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

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

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.validateIsUrl=e=>!!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(e);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.validateIsUrl=e=>!!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(e);

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

@@ -2,6 +2,10 @@ export declare const Header: import("styled-components").StyledComponent<"div",
 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;

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

@@ -1,29 +1,42 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("styled-components"),e=require("../../constants/Theme.js");function t(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var o=t(r);const d=o.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../constants/Theme.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=t(e);const d=o.default.div`
 	padding: 16px;
 	padding-bottom: 12px;
 	border-top-left-radius: 4px;
 	border-top-right-radius: 4px;
-	border: 1px solid ${e.COLORS.stroke.primary};
+	border: 1px solid ${r.COLORS.stroke.primary};
 `,i=o.default.div`
 	width: 100%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border-left: 1px solid ${e.COLORS.stroke.primary};
-	border-right: 1px solid ${e.COLORS.stroke.primary};
-	border-top-color: ${e.COLORS.stroke.primary};
-	border-top-width: ${r=>r.hideHeader?"1px":"0px"};
+	border-left: 1px solid ${r.COLORS.stroke.primary};
+	border-right: 1px solid ${r.COLORS.stroke.primary};
+	border-top-color: ${r.COLORS.stroke.primary};
+	border-top-width: ${e=>e.hideHeader?"1px":"0px"};
 	overflow: scroll;
 `,a=o.default.div`
+	width: 100%;
+	height: 100%;
+	background-color: ${r.BASE_COLORS.grayscale[100]};
+`,n=o.default.div`
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	flex-grow: 1;
+`,s=o.default.div`
 	display: flex;
 	justify-content: center;
 	width: 100%;
-	background: ${e.COLORS.surface.standard};
+	background: ${r.COLORS.surface.standard};
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
-	border: 1px solid ${e.COLORS.stroke.primary};
-`,s=o.default.div`
+	border: 1px solid ${r.COLORS.stroke.primary};
+`,l=o.default.div`
 	border-radius: 4px;
-	background-color: ${e.COLORS.surface.standard};
-	margin-top: ${r=>r.hideHeader?0:16};
-`;exports.EmailContainer=s,exports.Header=d,exports.ImageContainer=i,exports.ViewButton=a;
+	background-color: ${r.COLORS.surface.standard};
+	margin-top: ${e=>e.hideHeader?0:16};
+	display: flex;
+	flex-direction: column;
+`;exports.CardLoadingContainer=a,exports.EmailContainer=l,exports.Header=d,exports.IframeContainer=n,exports.ImageContainer=i,exports.ViewButton=s;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../button/Button.js"),i=require("../TypographyStyle.js"),r=require("./EmailTemplatePreview.styled.js");exports.default=n=>{let{template:l,handleViewTemplate:a,hideHeader:s,hideViewButton:d,containerStyle:o,emailHtmlContainerId:u,emailDisplayContent:c}=n;return e.jsxs(r.EmailContainer,Object.assign({hideHeader:s,style:Object.assign({},null!=o?o:{})},{children:[!s&&e.jsx(r.Header,{children:e.jsx(i.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:l.name}))}),c?e.jsx("iframe",{title:"Email template preview",id:null!=u?u:"",width:"100%",srcDoc:c,height:"100%",style:{pointerEvents:"none"}}):e.jsx(r.ImageContainer,Object.assign({hideHeader:s},{children:e.jsx("img",{alt:"",src:l.thumbnailUrl,style:{objectFit:"contain",width:"100%"}})})),!d&&e.jsx(r.ViewButton,{children:e.jsx(t.Button,{buttonType:"tertiary",buttonText:"View",onClick:()=>{a&&a()}})})]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../button/Button.js"),i=require("../TypographyStyle.js"),r=require("./EmailTemplatePreview.styled.js");exports.default=n=>{let{template:a,handleViewTemplate:l,hideHeader:s,hideViewButton:d,containerStyle:o,emailHtmlContainerId:u,emailDisplayContent:j}=n;return e.jsxs(r.EmailContainer,Object.assign({hideHeader:s,style:Object.assign({},null!=o?o:{})},{children:[!s&&e.jsx(r.Header,{children:e.jsx(i.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:a.name}))}),e.jsx(r.IframeContainer,{children:j?e.jsx("iframe",{title:"Email template preview",id:null!=u?u:"",width:"100%",srcDoc:j,height:"100%",style:{pointerEvents:"none"}}):e.jsx(r.ImageContainer,Object.assign({hideHeader:s},{children:e.jsx(r.CardLoadingContainer,{})}))}),!d&&e.jsx(r.ViewButton,{children:e.jsx(t.Button,{buttonType:"tertiary",buttonText:"View",onClick:()=>{l&&l()}})})]}))};

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

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

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

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

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

@@ -1,5 +1,8 @@
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TimeStamp: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TimeStamp: 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>;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
+export declare const ChatUIV2: (props: WhatsappLikePreviewTypes) => 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("react/jsx-runtime"),t=require("../../../assets/icons/halfRectangle.svg.js"),r=require("../../../assets/icons/phone.svg.js"),s=require("../../../assets/icons/RedirectToNew.svg.js"),a=require("styled-components"),i=require("../../tooltips/Tooltip.js"),o=require("../../TypographyStyle.js"),n=require("../../../constants/Theme.js"),l=require("../helpers/VariableEditorHelper.js"),d=require("../models/TemplateMeta.js"),p=require("./ChatBtn.js"),h=require("./ChatUI.style.js"),x=require("./MediaCard.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(a);const j=u.default.div`
+	position: absolute;
+	width: 8px;
+	height: 8px;
+	left: -8px;
+	top: -9px;
+`,m=u.default.div`
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 20px;
+	padding: 8px 12px 0px;
+	color: ${n.COLORS.content.primary};
+	word-wrap: break-word;
+`,T=u.default(m)`
+	font-weight: 600;
+	margin-bottom: 8px;
+`,y=new l.VariableEditorHelper;exports.ChatUIV2=a=>{const{bodyText:n,footerText:l,headerMediaType:c,headerText:u,headerAssetLink:f,headerAssetName:g,quickReplybtn:E,ctaBtn:b,actionTypes:S,extras:v,showHeader:C,imagePreviewStyles:q,size:w,bodyVariableList:_,headerVariableList:A}=a,I=y.format(n,_),N=y.format(u,A);return e.jsxs(h.Container,{children:[e.jsx(j,{children:e.jsx(t.default,{color:"white",height:8,width:8})}),c===d.HEADER_TYPES.TEXT?e.jsx(T,{dangerouslySetInnerHTML:{__html:N}}):c!==d.HEADER_TYPES.NONE?e.jsx(x.MediaCard,{headerAssetLink:f,headerAssetName:g,mediaType:c,imagePreviewStyles:c===d.HEADER_TYPES.IMAGE?q:{}}):e.jsx(e.Fragment,{}),!!n&&e.jsx(e.Fragment,{children:e.jsx(m,{dangerouslySetInnerHTML:{__html:I}})}),e.jsxs(h.FooterWrapper,{children:[e.jsx(i.Tooltip,Object.assign({body:null!=l?l:"",placement:"top"},{children:e.jsx(h.TimeStamp,Object.assign({style:{flex:1}},{children:l}))})),e.jsx(h.TimeStamp,{children:"16:48"})]}),S===d.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==E?void 0:E.map(((t,r)=>e.jsx(p.ChatBtn,{text:t.text},r)))}):S===d.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==b?void 0:b.map(((t,a)=>e.jsx(p.ChatBtn,{textTypography:C?o.Caption:o.BodySecondary,extraContent:v?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?r.default:s.default,size:w},a)))}):e.jsx(e.Fragment,{})]})};

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>;

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

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),t=require("../../TypographyStyle.js"),s=require("../../../constants/Theme.js"),a=require("../utils/getPreviewPropLen.js"),i=require("./ChatHeader.js"),o=require("./ChatUiV2.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=d(r);const p=n.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;
+`,c=n.default(t.TitleRegular)`
+	color: ${s.COLORS.content.primary};
+`;exports.WhatsappLikePreviewV2=r=>3===a.getPreviewPropLen(r)?e.jsx(e.Fragment,{children:r.zeroStateComponent}):e.jsx(e.Fragment,{children:e.jsxs(p,Object.assign({style:r.containerStyle,showHeader:r.showHeader},{children:[r.showHeader&&e.jsx(i.default,{}),e.jsxs("div",Object.assign({style:{padding:"small"===r.size?"12px 32px 12px 12px":"16px 56px 12px 16px"}},{children:[!r.hidePreviewText&&e.jsx("div",Object.assign({style:{marginBottom:16}},{children:e.jsx(c,{children:"Preview"})})),e.jsx(o.ChatUIV2,Object.assign({showHeader:r.showHeader},r))]}))]}))});

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("./helpers/TemplateCreatorHelper.js"),i=require("./models/TemplateMeta.js"),n=require("./utils/TemplateHelperUtils.js"),r=require("./WhatsApp/WhatsAppLikePreview.js");exports.default=a=>{let{template:o,extras:d,containerStyle:s,usePlaceHolderName:u,showHeader:p,zeroStateComponent:v,size:h}=a;var x,c,m,b,T,y,B,w,k,j,N,q,H,L,P,f;const[A,S]=t.useState(),g=new l.TemplateCreatorHelper,C=new n.TemplateHelperUtils,F=[];return(null===(c=null===(x=null==A?void 0:A.ctaBtn)||void 0===x?void 0:x.phoneNumber)||void 0===c?void 0:c.isChecked)&&F.push({type:"phoneNumber",text:null!==(m=A.ctaBtn.phoneNumber.btnText)&&void 0!==m?m:"",extra:null!==(b=A.ctaBtn.phoneNumber.phoneNumber)&&void 0!==b?b:""}),(null===(y=null===(T=null==A?void 0:A.ctaBtn)||void 0===T?void 0:T.websiteLinkBtn)||void 0===y?void 0:y.isChecked)&&F.push({type:"website",text:null!==(B=A.ctaBtn.websiteLinkBtn.btnText)&&void 0!==B?B:"",extra:null!==(k=null===(w=A.ctaBtn.websiteLinkBtn)||void 0===w?void 0:w.linkOpens)&&void 0!==k?k:"",placeholder:null!==(j=A.ctaBtn.websiteLinkBtn.placeholder)&&void 0!==j?j:""}),t.useEffect((()=>{o&&g.parseUITemplateFromDBFormat(o).then((e=>{S(Object.assign({},e))}))}),[o]),o?e.jsx(r.WhatsappLikePreview,{showHeader:p,containerPadding:"large"===h?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:s,textType:"html",bodyText:C.whatsappOnlyFillVariablesValueInBodyText(null!==(N=null==A?void 0:A.bodyText)&&void 0!==N?N:"",null!==(q=null==A?void 0:A.bodyVariables)&&void 0!==q?q:[],u),footerText:null==A?void 0:A.footerText,headerMediaType:(null==A?void 0:A.headerType)||i.HEADER_TYPES.NONE,headerText:C.fillVariablesValInBodyText(null!==(H=null==A?void 0:A.headerText)&&void 0!==H?H:"",null!==(L=null==A?void 0:A.headerVariables)&&void 0!==L?L:[],u),headerAssetLink:null!==(P=null==A?void 0:A.headerAssetLink)&&void 0!==P?P:"",headerAssetName:null!==(f=null==A?void 0:A.headerAssetName)&&void 0!==f?f:"",quickReplybtn:null==A?void 0:A.quickReply,ctaBtn:F,actionTypes:null==A?void 0:A.actionsType,extras:d,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},zeroStateComponent:null!=v?v:e.jsx(e.Fragment,{children:" "})}):e.jsx(e.Fragment,{children:v})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),t=require("./helpers/TemplateCreatorHelper.js"),a=require("./models/TemplateMeta.js"),i=require("./utils/TemplateHelperUtils.js"),r=require("./WhatsApp/WhatsAppLikePreview.js"),n=require("./WhatsApp/WhatsAppLikePreviewV2.js");exports.default=o=>{let{template:d,extras:s,containerStyle:u,usePlaceHolderName:p,showHeader:v,zeroStateComponent:h,size:x}=o;var c,b,m,T,y,k,w,N,B,j,A,L,P,V,q,S,g,H,f,C,E,F;const[O,R]=l.useState(),W=new t.TemplateCreatorHelper,U=new i.TemplateHelperUtils,z=[];return(null===(b=null===(c=null==O?void 0:O.ctaBtn)||void 0===c?void 0:c.phoneNumber)||void 0===b?void 0:b.isChecked)&&z.push({type:"phoneNumber",text:null!==(m=O.ctaBtn.phoneNumber.btnText)&&void 0!==m?m:"",extra:null!==(T=O.ctaBtn.phoneNumber.phoneNumber)&&void 0!==T?T:""}),(null===(k=null===(y=null==O?void 0:O.ctaBtn)||void 0===y?void 0:y.websiteLinkBtn)||void 0===k?void 0:k.isChecked)&&z.push({type:"website",text:null!==(w=O.ctaBtn.websiteLinkBtn.btnText)&&void 0!==w?w:"",extra:null!==(B=null===(N=O.ctaBtn.websiteLinkBtn)||void 0===N?void 0:N.linkOpens)&&void 0!==B?B:"",placeholder:null!==(j=O.ctaBtn.websiteLinkBtn.placeholder)&&void 0!==j?j:""}),l.useEffect((()=>{d&&W.parseUITemplateFromDBFormat(d,!1,!d.htmlContentUrl).then((e=>{R(Object.assign({},e))}))}),[d]),d?d.htmlContentUrl?e.jsx(r.WhatsappLikePreview,{showHeader:v,containerPadding:"large"===x?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:u,textType:"html",bodyText:U.whatsappOnlyFillVariablesValueInBodyText(null!==(g=null==O?void 0:O.bodyText)&&void 0!==g?g:"",null!==(H=null==O?void 0:O.bodyVariables)&&void 0!==H?H:[],p),footerText:null==O?void 0:O.footerText,headerMediaType:(null==O?void 0:O.headerType)||a.HEADER_TYPES.NONE,headerText:U.fillVariablesValInBodyText(null!==(f=null==O?void 0:O.headerText)&&void 0!==f?f:"",null!==(C=null==O?void 0:O.headerVariables)&&void 0!==C?C:[],p),headerAssetLink:null!==(E=null==O?void 0:O.headerAssetLink)&&void 0!==E?E:"",headerAssetName:null!==(F=null==O?void 0:O.headerAssetName)&&void 0!==F?F:"",quickReplybtn:null==O?void 0:O.quickReply,ctaBtn:z,actionTypes:null==O?void 0:O.actionsType,extras:s,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},zeroStateComponent:null!=h?h:e.jsx(e.Fragment,{children:" "})}):e.jsx(n.WhatsappLikePreviewV2,{showHeader:v,containerPadding:"large"===x?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:u,textType:"html",bodyText:null==O?void 0:O.bodyText,footerText:null==O?void 0:O.footerText,headerMediaType:(null==O?void 0:O.headerType)||a.HEADER_TYPES.NONE,headerText:null==O?void 0:O.headerText,headerAssetLink:null!==(A=null==O?void 0:O.headerAssetLink)&&void 0!==A?A:"",headerAssetName:null!==(L=null==O?void 0:O.headerAssetName)&&void 0!==L?L:"",quickReplybtn:null==O?void 0:O.quickReply,ctaBtn:z,actionTypes:null==O?void 0:O.actionsType,extras:s,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},zeroStateComponent:null!=h?h:e.jsx(e.Fragment,{children:" "}),bodyVariableList:null!==(V=null===(P=null==O?void 0:O.bodyVariables)||void 0===P?void 0:P.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==V?V:[],headerVariableList:null!==(S=null===(q=null==O?void 0:O.headerVariables)||void 0===q?void 0:q.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==S?S:[]}):e.jsx(e.Fragment,{children:h})};

package/dist/cjs/components/template-preview/constants/regexPatterns.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=/\{\{[A-Za-z0-9 ]+\}\}/g,t=e;exports.editableBracketPattern=/[((|))]/,exports.editableVarPattern=/\((\(|\[)[A-Za-z0-9 ]+(\]|\))\)/,exports.globalHalfVariablePattern=/\{\{[a-zA-Z0-9]+(?=( |\}))(?!\}\})/g,exports.globalVariablePattern=e,exports.lockedVarPattern=/\[\[[A-Za-z0-9 ]+\]\]/,exports.placeHolderNamePattern=/(\[\[|\(\()(.*)(\)\)|\]\])/,exports.previewLinkMDFormatPattern=/\[([^[]+)\](\(.*\))/,exports.specialCharPattern=/[!@#$%^&*()_+\-={};':"\\|,.<>?]+/,exports.templateVariablePattern=t,exports.variablePattern=/\{\{[A-Za-z0-9 _]+\}\}/,exports.variablePatternGlobal=/\{\{[A-Za-z0-9 _]+\}\}/g;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=/\{\{[A-Za-z0-9 .]+\}\}/g,t=e;exports.editableBracketPattern=/[((|))]/,exports.editableVarPattern=/\((\(|\[)[A-Za-z0-9 ]+(\]|\))\)/,exports.globalHalfVariablePattern=/\{\{[a-zA-Z0-9]+(?=( |\}))(?!\}\})/g,exports.globalVariablePattern=e,exports.lockedVarPattern=/\[\[[A-Za-z0-9 .]+\]\]/,exports.placeHolderNamePattern=/(\[\[|\(\()(.*)(\)\)|\]\])/,exports.previewLinkMDFormatPattern=/\[([^[]+)\](\(.*\))/,exports.specialCharPattern=/[!@#$%^&*()_+\-={};':"\\|,.<>?]+/,exports.templateVariablePattern=t,exports.variablePattern=/\{\{[A-Za-z0-9 ._]+\}\}/,exports.variablePatternGlobal=/\{\{[A-Za-z0-9 _]+\}\}/g;

package/dist/cjs/components/template-preview/helpers/TemplateCreatorHelper.d.ts

@@ -12,5 +12,5 @@ export declare class TemplateCreatorHelper {
     private parseBodyComponent;
     private parseFooterComponent;
     private parseButtonComponent;
-    parseUITemplateFromDBFormat(dbFormattedTemplate: WhatsAppTemplate, isDuplicate?: boolean): Promise<CreateTemplateType>;
+    parseUITemplateFromDBFormat(dbFormattedTemplate: WhatsAppTemplate, isDuplicate?: boolean, isV2?: boolean): Promise<CreateTemplateType>;
 }

package/dist/cjs/components/template-preview/helpers/TemplateCreatorHelper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("../../../constants/Theme.js"),n=require("../constants/regexPatterns.js"),i=require("../constants/TemplateConstants.js"),o=require("../models/TemplateMeta.js"),l=require("../utils/TemplateHelperUtils.js");exports.TemplateCreatorHelper=class{parseDataFromHeaderComponent(e){var t,n,i,l,a,d,r;const s={headerType:o.HEADER_TYPES.NONE,headerVariables:[]},v=null===(t=e.components)||void 0===t?void 0:t.find((e=>"HEADER"===e.type));if(v){s.headerType=v.format,s.headerText=v.text,s.headerAssetLink=null===(i=null===(n=v.example)||void 0===n?void 0:n.header_handle)||void 0===i?void 0:i[0];const t=null===(a=null===(l=v.example)||void 0===l?void 0:l.header_text)||void 0===a?void 0:a[0],o=null===(r=null===(d=e.mapping)||void 0===d?void 0:d.header)||void 0===r?void 0:r[0];if(t&&o){const e=/\(\(/.test(o),n={idx:0,variableVal:t,editable:e,editableDefaultValues:e?void 0:t,variableName:o};s.headerVariables=[n]}}return s}validateState(e){var t,a,d,r,s,v,E,u,T,p,_,c,R,m,b,h,I,L,N,y,B;const A=/\p{Extended_Pictographic}/u;let C="valid";const D={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},O=new l.TemplateHelperUtils;let x=!1;const P=e=>{var t;null===(t=document.getElementById(e))||void 0===t||t.scrollIntoView({behavior:"smooth",block:"nearest"})};if((null===(t=e.meta)||void 0===t?void 0:t.name)?e.meta.name.trim().length>i.NAME_LEN_LIMIT?(D.meta.name=i.NAME_LEN_ERROR,C="invalid"):n.specialCharPattern.test(e.meta.name.trim())&&(D.meta.name=i.NO_SPECIAL_CHAR,C="invalid"):(D.meta.name=i.REQUIRED_FIELD,C="invalid"),D.meta.name&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.name),x=!0),e.headerType===o.HEADER_TYPES.TEXT){const t=null!==(d=null===(a=e.headerText)||void 0===a?void 0:a.trim())&&void 0!==d?d:"";if(t)if(t.length>i.HEADER_TEXT_LEN_LIMIT)D.header=i.HEADER_LEN_ERROR,C="invalid";else{const e=O.getTemplateVariablesFromState(t);e&&e.length>1&&(D.header=i.ONE_VAR_ALLOWED,C="invalid")}else D.header=i.REQUIRED_FIELD,C="invalid"}else e.headerType===o.HEADER_TYPES.DOCUMENT||e.headerType===o.HEADER_TYPES.IMAGE||(e.headerType,o.HEADER_TYPES.VIDEO);if(e.headerType!==o.HEADER_TYPES.DOCUMENT&&e.headerType!==o.HEADER_TYPES.IMAGE&&e.headerType!==o.HEADER_TYPES.VIDEO||e.headerAssetLink||(D.header=i.HEADER_ASSET_LINK_ERROR,C="invalid"),D.header&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.header),x=!0),e.bodyText?e.bodyTextRaw&&(null===(r=e.bodyTextRaw)||void 0===r?void 0:r.trim().length)>i.BODY_TEXT_LEN_LIMIT&&(D.body=i.BODY_LEN_ERROR,C="invalid"):(D.body=i.REQUIRED_FIELD,C="invalid"),D.body&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.body),x=!0),e.footerText&&e.footerText.length>i.HEADER_TEXT_LEN_LIMIT&&(D.footer=i.HEADER_LEN_ERROR,C="invalid"),(null==D?void 0:D.footer)&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.footer),x=!0),e.actionsType===o.ACTIONS_TYPES.CTA_BTN){if(null===(v=null===(s=e.ctaBtn)||void 0===s?void 0:s.phoneNumber)||void 0===v?void 0:v.isChecked){const t=null===(E=e.ctaBtn.phoneNumber.btnText)||void 0===E?void 0:E.trim(),n=e.ctaBtn.phoneNumber.phoneNumber;D.ctaBtn&&!t?(D.ctaBtn.phoneNumber.btnText=i.REQUIRED_FIELD,C="invalid"):D.ctaBtn&&t&&t.length>i.QUICK_REPLY_BTN_TEXT_LIMIT?(D.ctaBtn.phoneNumber.btnText=i.QUICK_REPLY_LEN_ERROR,C="invalid"):D.ctaBtn&&t&&A.test(t)&&(D.ctaBtn.phoneNumber.btnText=i.BUTTON_EMOJI_ERROR,C="invalid"),D.ctaBtn&&!n?(D.ctaBtn.phoneNumber.link=i.REQUIRED_FIELD,C="invalid"):D.ctaBtn&&n&&n.length<10&&(D.ctaBtn.phoneNumber.link=i.VALID_PHONE_NUMBER,C="invalid")}if(null===(T=null===(u=e.ctaBtn)||void 0===u?void 0:u.websiteLinkBtn)||void 0===T?void 0:T.isChecked){const t=null===(p=e.ctaBtn.websiteLinkBtn.btnText)||void 0===p?void 0:p.trim(),n=null===(_=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===_?void 0:_.trim(),o=null===(c=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===c?void 0:c.trim();D.ctaBtn&&!t?(D.ctaBtn.websiteLink.btnText=i.REQUIRED_FIELD,C="invalid"):D.ctaBtn&&t&&t.length>i.QUICK_REPLY_BTN_TEXT_LIMIT?(D.ctaBtn.websiteLink.btnText=i.QUICK_REPLY_LEN_ERROR,C="invalid"):D.ctaBtn&&t&&A.test(t)&&(D.ctaBtn.websiteLink.btnText=i.BUTTON_EMOJI_ERROR,C="invalid"),!D.ctaBtn||n||o||(D.ctaBtn.websiteLink.link=i.REQUIRED_FIELD,C="invalid")}}else if(e.actionsType===o.ACTIONS_TYPES.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((n,o)=>{const l=n.text.trim();if(l)if(l.length>i.QUICK_REPLY_NAME_LEN_LIMIT)t[o]=i.QUICK_REPLY_LEN_ERROR,C="invalid";else if(A.test(l))t[o]=i.BUTTON_EMOJI_ERROR,C="invalid";else{const n=[...e.quickReply];n.splice(o,1);n.find((e=>e.text===l))&&(t[o]=i.QUICK_REPLY_NAME_ERROR,C="invalid")}else t[o]=i.REQUIRED_FIELD,C="invalid"})),D.quickReply=t}if(e.actionsType===o.ACTIONS_TYPES.CTA_BTN||e.actionsType===o.ACTIONS_TYPES.QUICK_REPLY){const e=null===(R=D.quickReply)||void 0===R?void 0:R.reduce(((e,t)=>e||!!t),!1);((null===(b=null===(m=null==D?void 0:D.ctaBtn)||void 0===m?void 0:m.websiteLink)||void 0===b?void 0:b.link)||(null===(I=null===(h=D.ctaBtn)||void 0===h?void 0:h.websiteLink)||void 0===I?void 0:I.btnText)||(null===(N=null===(L=D.ctaBtn)||void 0===L?void 0:L.phoneNumber)||void 0===N?void 0:N.link)||(null===(B=null===(y=D.ctaBtn)||void 0===y?void 0:y.phoneNumber)||void 0===B?void 0:B.btnText)||e)&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.actionButtons),x=!0)}return{status:C,errors:D}}parseBodyComponent(e){var i,o,l,a,d;const r=[];let s="";const v=null===(i=e.components)||void 0===i?void 0:i.find((e=>"BODY"===e.type));return v&&(null===(l=null===(o=v.example)||void 0===o?void 0:o.body_text)||void 0===l||l[0].forEach(((t,i)=>{var o,l;let a=null===(l=null===(o=e.mapping)||void 0===o?void 0:o.body)||void 0===l?void 0:l[i];const d=a&&/\(\(/.test(a),s=null==a?void 0:a.match(n.placeHolderNamePattern);(null==s?void 0:s[2])&&(a=null==s?void 0:s[2]),r.push({idx:i,variableVal:t,editable:!!d,editableDefaultValues:d?void 0:t,variableName:null!=a?a:""})})),s=e.htmlContentUrl?e.htmlContentUrl:(null===(a=v.text)||void 0===a?void 0:a.split(/\{\{[0-9]+\}\}/).length)?null===(d=v.text)||void 0===d?void 0:d.split(/\{\{[0-9]+\}\}/).map(((e,n)=>{if(null==r?void 0:r[n]){const i=r[n].variableName;return`${e} <span> </span><span  style="color: ${t.COLORS.content.brand}; text-decoration: underline;">{{${i}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:r,bodyText:s}}parseFooterComponent(e){var t;const n=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==n?void 0:n.text}parseButtonComponent(e){var t,i,l,a,d,r;const s={actionsType:o.ACTIONS_TYPES.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0}},v=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(v&&(null===(i=null==v?void 0:v.buttons)||void 0===i?void 0:i.length)){const t="QUICK_REPLY"===(null===(l=null==v?void 0:v.buttons)||void 0===l?void 0:l[0].type)?o.ACTIONS_TYPES.QUICK_REPLY:o.ACTIONS_TYPES.CTA_BTN;if(s.actionsType=t,t===o.ACTIONS_TYPES.QUICK_REPLY){const e=null!==(d=null===(a=null==v?void 0:v.buttons)||void 0===a?void 0:a.map((e=>e)))&&void 0!==d?d:[];return s.quickReply=e,s}t===o.ACTIONS_TYPES.CTA_BTN&&(null===(r=null==v?void 0:v.buttons)||void 0===r||r.forEach((t=>{var i,o,l,a;if(t.phone_number&&(s.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(l=null===(o=null===(i=null==e?void 0:e.mapping)||void 0===i?void 0:i.buttons)||void 0===o?void 0:o[0])&&void 0!==l?l:void 0;let r=!1;d&&n.editableVarPattern.test(d)&&(r=!0),s.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:t.text,linkOpens:r?null===(a=t.example)||void 0===a?void 0:a[0]:t.url,placeholder:r?void 0:d}}})))}return s}parseUITemplateFromDBFormat(t,n){var i;return e.__awaiter(this,void 0,void 0,(function*(){const{headerType:e,headerAssetLink:o,headerAssetName:l,headerText:a,headerVariables:d}=yield this.parseDataFromHeaderComponent(t),{bodyText:r,bodyVariable:s}=yield this.parseBodyComponent(t),{actionsType:v,quickReply:E,ctaBtn:u}=yield this.parseButtonComponent(t),T={quickReply:E,ctaBtn:u,meta:{name:n?`${t.label} Copy`:t.label,category:null===(i=t.category)||void 0===i?void 0:i.toUpperCase(),subCategory:t.templateCategory,language:t.language,templateId:t.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:v,footerText:this.parseFooterComponent(t),bodyVariables:s,bodyText:r,headerType:e,headerAssetLink:o,headerAssetName:l,headerText:a,headerVariables:d,alreadyAsADraft:t.isDraft,mode:"edit",initialLoading:!1},{errors:p}=this.validateState(T);return T.error=p,T}))}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("../../../constants/Theme.js"),n=require("../constants/regexPatterns.js"),i=require("../constants/TemplateConstants.js"),l=require("../models/TemplateMeta.js"),o=require("../utils/TemplateHelperUtils.js");exports.TemplateCreatorHelper=class{parseDataFromHeaderComponent(e){var t,n,i,o,a,d,r,v,s,E;const u={headerType:l.HEADER_TYPES.NONE,headerVariables:[]},T=null===(t=e.components)||void 0===t?void 0:t.find((e=>"HEADER"===e.type));if(T){u.headerType=T.format,u.headerText=T.text,u.headerAssetLink=null===(i=null===(n=T.example)||void 0===n?void 0:n.header_handle)||void 0===i?void 0:i[0];const t=null===(a=null===(o=T.example)||void 0===o?void 0:o.header_text)||void 0===a?void 0:a[0],l=null===(r=null===(d=e.mapping)||void 0===d?void 0:d.header)||void 0===r?void 0:r[0];if(t&&l){const e=null==l?void 0:l.replace("[[","").replace("]]","").replace("((","").replace("))",""),n=/\(\(/.test(l),i={idx:0,variableVal:t,editable:n,editableDefaultValues:n?void 0:t,variableName:e};u.headerVariables=[i],(null===(s=null===(v=T.example)||void 0===v?void 0:v.header_text)||void 0===s?void 0:s.length)&&(u.headerText=null===(E=u.headerText)||void 0===E?void 0:E.replace("{{1}}",`{{${e}}}`))}}return u}validateState(e){var t,a,d,r,v,s,E,u,T,p,_,c,R,m,h,b,I,L,N,y,B;const A=/\p{Extended_Pictographic}/u;let C="valid";const D={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},O=new o.TemplateHelperUtils;let x=!1;const P=e=>{var t;null===(t=document.getElementById(e))||void 0===t||t.scrollIntoView({behavior:"smooth",block:"nearest"})};if((null===(t=e.meta)||void 0===t?void 0:t.name)?e.meta.name.trim().length>i.NAME_LEN_LIMIT?(D.meta.name=i.NAME_LEN_ERROR,C="invalid"):n.specialCharPattern.test(e.meta.name.trim())&&(D.meta.name=i.NO_SPECIAL_CHAR,C="invalid"):(D.meta.name=i.REQUIRED_FIELD,C="invalid"),D.meta.name&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.name),x=!0),e.headerType===l.HEADER_TYPES.TEXT){const t=null!==(d=null===(a=e.headerText)||void 0===a?void 0:a.trim())&&void 0!==d?d:"";if(t)if(t.length>i.HEADER_TEXT_LEN_LIMIT)D.header=i.HEADER_LEN_ERROR,C="invalid";else{const e=O.getTemplateVariablesFromState(t);e&&e.length>1&&(D.header=i.ONE_VAR_ALLOWED,C="invalid")}else D.header=i.REQUIRED_FIELD,C="invalid"}else e.headerType===l.HEADER_TYPES.DOCUMENT||e.headerType===l.HEADER_TYPES.IMAGE||(e.headerType,l.HEADER_TYPES.VIDEO);if(e.headerType!==l.HEADER_TYPES.DOCUMENT&&e.headerType!==l.HEADER_TYPES.IMAGE&&e.headerType!==l.HEADER_TYPES.VIDEO||e.headerAssetLink||(D.header=i.HEADER_ASSET_LINK_ERROR,C="invalid"),D.header&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.header),x=!0),e.bodyText?e.bodyTextRaw&&(null===(r=e.bodyTextRaw)||void 0===r?void 0:r.trim().length)>i.BODY_TEXT_LEN_LIMIT&&(D.body=i.BODY_LEN_ERROR,C="invalid"):(D.body=i.REQUIRED_FIELD,C="invalid"),D.body&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.body),x=!0),e.footerText&&e.footerText.length>i.HEADER_TEXT_LEN_LIMIT&&(D.footer=i.HEADER_LEN_ERROR,C="invalid"),(null==D?void 0:D.footer)&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.footer),x=!0),e.actionsType===l.ACTIONS_TYPES.CTA_BTN){if(null===(s=null===(v=e.ctaBtn)||void 0===v?void 0:v.phoneNumber)||void 0===s?void 0:s.isChecked){const t=null===(E=e.ctaBtn.phoneNumber.btnText)||void 0===E?void 0:E.trim(),n=e.ctaBtn.phoneNumber.phoneNumber;D.ctaBtn&&!t?(D.ctaBtn.phoneNumber.btnText=i.REQUIRED_FIELD,C="invalid"):D.ctaBtn&&t&&t.length>i.QUICK_REPLY_BTN_TEXT_LIMIT?(D.ctaBtn.phoneNumber.btnText=i.QUICK_REPLY_LEN_ERROR,C="invalid"):D.ctaBtn&&t&&A.test(t)&&(D.ctaBtn.phoneNumber.btnText=i.BUTTON_EMOJI_ERROR,C="invalid"),D.ctaBtn&&!n?(D.ctaBtn.phoneNumber.link=i.REQUIRED_FIELD,C="invalid"):D.ctaBtn&&n&&n.length<10&&(D.ctaBtn.phoneNumber.link=i.VALID_PHONE_NUMBER,C="invalid")}if(null===(T=null===(u=e.ctaBtn)||void 0===u?void 0:u.websiteLinkBtn)||void 0===T?void 0:T.isChecked){const t=null===(p=e.ctaBtn.websiteLinkBtn.btnText)||void 0===p?void 0:p.trim(),n=null===(_=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===_?void 0:_.trim(),l=null===(c=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===c?void 0:c.trim();D.ctaBtn&&!t?(D.ctaBtn.websiteLink.btnText=i.REQUIRED_FIELD,C="invalid"):D.ctaBtn&&t&&t.length>i.QUICK_REPLY_BTN_TEXT_LIMIT?(D.ctaBtn.websiteLink.btnText=i.QUICK_REPLY_LEN_ERROR,C="invalid"):D.ctaBtn&&t&&A.test(t)&&(D.ctaBtn.websiteLink.btnText=i.BUTTON_EMOJI_ERROR,C="invalid"),!D.ctaBtn||n||l||(D.ctaBtn.websiteLink.link=i.REQUIRED_FIELD,C="invalid")}}else if(e.actionsType===l.ACTIONS_TYPES.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((n,l)=>{const o=n.text.trim();if(o)if(o.length>i.QUICK_REPLY_NAME_LEN_LIMIT)t[l]=i.QUICK_REPLY_LEN_ERROR,C="invalid";else if(A.test(o))t[l]=i.BUTTON_EMOJI_ERROR,C="invalid";else{const n=[...e.quickReply];n.splice(l,1);n.find((e=>e.text===o))&&(t[l]=i.QUICK_REPLY_NAME_ERROR,C="invalid")}else t[l]=i.REQUIRED_FIELD,C="invalid"})),D.quickReply=t}if(e.actionsType===l.ACTIONS_TYPES.CTA_BTN||e.actionsType===l.ACTIONS_TYPES.QUICK_REPLY){const e=null===(R=D.quickReply)||void 0===R?void 0:R.reduce(((e,t)=>e||!!t),!1);((null===(h=null===(m=null==D?void 0:D.ctaBtn)||void 0===m?void 0:m.websiteLink)||void 0===h?void 0:h.link)||(null===(I=null===(b=D.ctaBtn)||void 0===b?void 0:b.websiteLink)||void 0===I?void 0:I.btnText)||(null===(N=null===(L=D.ctaBtn)||void 0===L?void 0:L.phoneNumber)||void 0===N?void 0:N.link)||(null===(B=null===(y=D.ctaBtn)||void 0===y?void 0:y.phoneNumber)||void 0===B?void 0:B.btnText)||e)&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.actionButtons),x=!0)}return{status:C,errors:D}}parseBodyComponent(e){let i=arguments.length>1&&void 0!==arguments[1]&&arguments[1];var l,o,a,d,r;const v=[];let s="";const E=null===(l=e.components)||void 0===l?void 0:l.find((e=>"BODY"===e.type));return E&&(null===(a=null===(o=E.example)||void 0===o?void 0:o.body_text)||void 0===a||a[0].forEach(((t,i)=>{var l,o;let a=null===(o=null===(l=e.mapping)||void 0===l?void 0:l.body)||void 0===o?void 0:o[i];const d=a&&/\(\(/.test(a),r=null==a?void 0:a.match(n.placeHolderNamePattern);(null==r?void 0:r[2])&&(a=null==r?void 0:r[2]),v.push({idx:i,variableVal:t,editable:!!d,editableDefaultValues:d?void 0:t,variableName:null!=a?a:""})})),s=e.htmlContentUrl?e.htmlContentUrl:(null===(d=E.text)||void 0===d?void 0:d.split(/\{\{[0-9]+\}\}/).length)?null===(r=E.text)||void 0===r?void 0:r.split(/\{\{[0-9]+\}\}/).map(((e,n)=>{if(null==v?void 0:v[n]){const l=v[n].variableName;return i?`${e}{{${l}}}`:`${e} <span> </span><span  style="color: ${t.COLORS.content.brand}; text-decoration: underline;">{{${l}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:v,bodyText:s}}parseFooterComponent(e){var t;const n=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==n?void 0:n.text}parseButtonComponent(e){var t,i,o,a,d,r;const v={actionsType:l.ACTIONS_TYPES.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0}},s=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(s&&(null===(i=null==s?void 0:s.buttons)||void 0===i?void 0:i.length)){const t="QUICK_REPLY"===(null===(o=null==s?void 0:s.buttons)||void 0===o?void 0:o[0].type)?l.ACTIONS_TYPES.QUICK_REPLY:l.ACTIONS_TYPES.CTA_BTN;if(v.actionsType=t,t===l.ACTIONS_TYPES.QUICK_REPLY){const e=null!==(d=null===(a=null==s?void 0:s.buttons)||void 0===a?void 0:a.map((e=>e)))&&void 0!==d?d:[];return v.quickReply=e,v}t===l.ACTIONS_TYPES.CTA_BTN&&(null===(r=null==s?void 0:s.buttons)||void 0===r||r.forEach((t=>{var i,l,o,a;if(t.phone_number&&(v.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(o=null===(l=null===(i=null==e?void 0:e.mapping)||void 0===i?void 0:i.buttons)||void 0===l?void 0:l[0])&&void 0!==o?o:void 0;let r=!1;d&&n.editableVarPattern.test(d)&&(r=!0),v.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:t.text,linkOpens:r?null===(a=t.example)||void 0===a?void 0:a[0]:t.url,placeholder:r?void 0:d}}})))}return v}parseUITemplateFromDBFormat(t,n){let i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];var l;return e.__awaiter(this,void 0,void 0,(function*(){const{headerType:e,headerAssetLink:o,headerAssetName:a,headerText:d,headerVariables:r}=yield this.parseDataFromHeaderComponent(t),{bodyText:v,bodyVariable:s}=yield this.parseBodyComponent(t,i),{actionsType:E,quickReply:u,ctaBtn:T}=yield this.parseButtonComponent(t),p={quickReply:u,ctaBtn:T,meta:{name:n?`${t.label} Copy`:t.label,category:null===(l=t.category)||void 0===l?void 0:l.toUpperCase(),subCategory:t.templateCategory,language:t.language,templateId:t.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:E,footerText:this.parseFooterComponent(t),bodyVariables:s,bodyText:v,headerType:e,headerAssetLink:o,headerAssetName:a,headerText:d,headerVariables:r,alreadyAsADraft:t.isDraft,mode:"edit",initialLoading:!1},{errors:_}=this.validateState(p);return p.error=_,p}))}};

package/dist/cjs/components/template-preview/helpers/VariableEditorHelper.d.ts

@@ -0,0 +1,7 @@
+export type variableType = {
+    placeholder: string;
+    value: string;
+};
+export declare class VariableEditorHelper {
+    format(text?: string, variableList?: variableType[]): string;
+}

package/dist/cjs/components/template-preview/helpers/VariableEditorHelper.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../helpers/BaseWhatsappContentLang.helper.js"),r=require("../constants/regexPatterns.js");const a=new e.BaseWhatsappContentLangHelper;exports.VariableEditorHelper=class{format(e,l){var t;if(!e)return"";const n=new RegExp(r.variablePattern,"g"),p=e.match(n),c=null!==(t=null==l?void 0:l.map((e=>{let{placeholder:r}=e;return r})))&&void 0!==t?t:[],o=e.split(r.variablePattern).map(((e,r)=>{var a;const t=null==p?void 0:p[r];if(t){const r=t.replace("{{","").replace("}}","").replace("[[","").replace("]]","").replace("((","").replace("))",""),n=c.findIndex((e=>e.replace("{{","").replace("}}","").replace("[[","").replace("]]","").replace("((","").replace("))","")===r));return n>-1?e+'<code style="color: #731DCF">'+(null===(a=null==l?void 0:l[n])||void 0===a?void 0:a.value)+"</code>":e+t}return e})).join("");return a.getHTML(o)}};

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

@@ -2,5 +2,9 @@ import * as regexPatterns from './constants/regexPatterns';
 export { regexPatterns };
 export * from './TemplatePreview';
 export * from './WhatsApp/WhatsAppLikePreview';
+export * from './WhatsApp/WhatsAppLikePreviewV2';
 export * from './helpers/SmsTemplateHelper';
 export * from './helpers/WhatsAppFormatToHTML';
+export * from './helpers/VariableEditorHelper';
+export * from './models/EmailTemplate';
+export * from './models/TemplateMeta';

package/dist/cjs/components/template-preview/models/WhatsAppTemplate.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactElement } from 'react';
+import { variableType } from '../helpers/VariableEditorHelper';
 import { CHANNEL_TYPE } from './Channels';
 import { ACTIONS_TYPES, ButtonPlaceHolderOptions, CUSTOM_VARIABLE, HEADER_TYPES, QUICK_REPLY_BUTTON, TEMPLATE_STATUS } from './TemplateMeta';
 export type WhatsAppTemplate = {
@@ -168,6 +169,9 @@ export type WhatsappLikePreviewTypes = {
     imagePreviewStyles?: React.CSSProperties;
     size?: 'small' | 'large';
     zeroStateComponent: ReactElement<any, any>;
+    children?: React.ReactNode;
+    bodyVariableList?: variableType[];
+    headerVariableList?: variableType[];
 };
 export type WhatsappMeta = {
     containerStyle?: React.CSSProperties | undefined;

package/dist/cjs/components/toaster/Toaster.d.ts

@@ -9,7 +9,7 @@ export type ToasterButtonProps = {
 export type ToasterProps = {
     text: string;
     position?: ToastPosition;
-    type?: 'info' | 'success' | 'error' | 'default';
+    type?: 'info' | 'success' | 'error' | 'default' | 'warning';
     closeOnClick?: boolean;
     hideProgressBar?: boolean;
     autoClose?: number | false | undefined;

package/dist/cjs/components/toaster/Toaster.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("../../assets/icons/cross.svg.js"),e=require("react"),s=require("react-toastify"),n=require("./Toaster.styled.js"),i=require("../TypographyStyle.js"),r=require("../../constants/Theme.js");const l=e=>{const s="default"===e.type?r.COLORS.content.secondary:("success"===e.type||e.type,r.COLORS.content.secondaryInverse);return t.jsx("div",Object.assign({tabIndex:0,role:"button",style:{width:20,display:"flex",margin:"auto",cursor:"pointer"},onClick:e.closeToast,onKeyDown:t=>{"Enter"===t.key&&e.closeToast()}},{children:t.jsx(o.default,{height:20,width:20,color:s})}))},u=o=>{const e="default"===o.type?r.COLORS.stroke.primary:"success"===o.type?r.COLORS.background.positive.vibrant:"error"===o.type?r.COLORS.background.negative.vibrant:r.COLORS.background.inverseLight;return t.jsx(t.Fragment,{children:t.jsxs("div",Object.assign({style:{display:"flex",flexGrow:1,borderRight:o.hideCloseButton?"unset":`1px solid ${e}`}},{children:[t.jsx("div",Object.assign({style:{flexGrow:1,marginRight:o.showButton?16:o.hideCloseButton?0:12}},{children:t.jsx(i.BodyPrimary,Object.assign({color:"inherit"},{children:o.toastText}))})),o.showButton&&t.jsx(i.ButtonRegular,Object.assign({style:{marginRight:o.hideCloseButton?0:12,marginTop:"auto",marginBottom:"auto",display:"flex",cursor:"pointer"},onClick:o.onButtonClick,color:"default"===o.type?r.COLORS.content.brand:"inherit"},{children:o.buttonText}))]}))})};exports.Toaster=o=>(e.useEffect((()=>{var e,n,i,r,a,c;void 0!==o.hideLeftIcon||o.leftIcon?s.toast(t.jsx(u,{toastText:o.text,type:o.type||"info",buttonText:null===(e=o.buttonProps)||void 0===e?void 0:e.buttonText,showButton:null===(n=o.buttonProps)||void 0===n?void 0:n.showButton,onButtonClick:null===(i=o.buttonProps)||void 0===i?void 0:i.onButtonClick,hideCloseButton:o.hideCloseButton}),{onClose:o.onCloseToast?o.onCloseToast:()=>({}),icon:t=>!1!==o.hideLeftIcon&&(o.leftIcon?o.leftIcon:null),type:o.type,closeButton:!o.hideCloseButton&&t.jsx(l,{type:o.type||"default"})}):s.toast(t.jsx(u,{toastText:o.text,type:o.type||"info",buttonText:null===(r=o.buttonProps)||void 0===r?void 0:r.buttonText,showButton:null===(a=o.buttonProps)||void 0===a?void 0:a.showButton,onButtonClick:null===(c=o.buttonProps)||void 0===c?void 0:c.onButtonClick,hideCloseButton:o.hideCloseButton}),{onClose:o.onCloseToast?o.onCloseToast:()=>({}),type:o.type,closeButton:!o.hideCloseButton&&t.jsx(l,{type:o.type||"info"})})}),[]),t.jsx(n.ToasterStyled,Object.assign({width:o.width,height:o.height},{children:t.jsx(s.ToastContainer,{position:o.position||"top-right",closeOnClick:o.closeOnClick||!1,hideProgressBar:o.hideProgressBar||!1,draggable:!1,autoClose:o.autoClose||!1,theme:"colored"})})));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("../../assets/icons/cross.svg.js"),e=require("react"),n=require("react-toastify"),s=require("./Toaster.styled.js"),i=require("../TypographyStyle.js"),r=require("../../constants/Theme.js");const l=e=>{const n="default"===e.type?r.COLORS.content.secondary:r.COLORS.content.secondaryInverse;return t.jsx("div",Object.assign({tabIndex:0,role:"button",style:{width:20,display:"flex",margin:"auto",cursor:"pointer"},onClick:e.closeToast,onKeyDown:t=>{"Enter"===t.key&&e.closeToast()}},{children:t.jsx(o.default,{height:20,width:20,color:n})}))},u=o=>{const e="default"===o.type?r.COLORS.stroke.primary:"success"===o.type?r.COLORS.background.positive.vibrant:"error"===o.type?r.COLORS.background.negative.vibrant:"warning"===o.type?r.COLORS.background.warning.vibrant:r.COLORS.background.inverseLight;return t.jsx(t.Fragment,{children:t.jsxs("div",Object.assign({style:{display:"flex",flexGrow:1,borderRight:o.hideCloseButton?"unset":`1px solid ${e}`}},{children:[t.jsx("div",Object.assign({style:{flexGrow:1,marginRight:o.showButton?16:o.hideCloseButton?0:12}},{children:t.jsx(i.BodyPrimary,Object.assign({color:"inherit"},{children:o.toastText}))})),o.showButton&&t.jsx(i.ButtonRegular,Object.assign({style:{marginRight:o.hideCloseButton?0:12,marginTop:"auto",marginBottom:"auto",display:"flex",cursor:"pointer"},onClick:o.onButtonClick,color:"default"===o.type?r.COLORS.content.brand:"inherit"},{children:o.buttonText}))]}))})};exports.Toaster=o=>(e.useEffect((()=>{var e,s,i,r,a,d;void 0!==o.hideLeftIcon||o.leftIcon?n.toast(t.jsx(u,{toastText:o.text,type:o.type||"info",buttonText:null===(e=o.buttonProps)||void 0===e?void 0:e.buttonText,showButton:null===(s=o.buttonProps)||void 0===s?void 0:s.showButton,onButtonClick:null===(i=o.buttonProps)||void 0===i?void 0:i.onButtonClick,hideCloseButton:o.hideCloseButton}),{onClose:o.onCloseToast?o.onCloseToast:()=>({}),icon:t=>!1!==o.hideLeftIcon&&(o.leftIcon?o.leftIcon:null),type:o.type,closeButton:!o.hideCloseButton&&t.jsx(l,{type:o.type||"default"})}):n.toast(t.jsx(u,{toastText:o.text,type:o.type||"info",buttonText:null===(r=o.buttonProps)||void 0===r?void 0:r.buttonText,showButton:null===(a=o.buttonProps)||void 0===a?void 0:a.showButton,onButtonClick:null===(d=o.buttonProps)||void 0===d?void 0:d.onButtonClick,hideCloseButton:o.hideCloseButton}),{onClose:o.onCloseToast?o.onCloseToast:()=>({}),type:o.type,closeButton:!o.hideCloseButton&&t.jsx(l,{type:o.type||"info"})})}),[]),t.jsx(s.ToasterStyled,Object.assign({width:o.width,height:o.height},{children:t.jsx(n.ToastContainer,{position:o.position||"top-right",closeOnClick:o.closeOnClick||!1,hideProgressBar:o.hideProgressBar||!1,draggable:!1,autoClose:o.autoClose||!1,theme:"colored"})})));

package/dist/cjs/components/toaster/Toaster.styled.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@emotion/styled/base"),c=require("../../constants/Theme.js");function b(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const o=b(t).default("div","production"===process.env.NODE_ENV?{target:"e1tdeuzc0"}:{target:"e1tdeuzc0",label:"ToasterStyled"})("--toastify-color-light:#fff;--toastify-color-dark:#121212;--toastify-color-info:",c.COLORS.background.inverse,";--toastify-color-success:",c.COLORS.content.positive,";--toastify-color-error:",c.COLORS.content.negative,";--toastify-text-color-light:",c.COLORS.content.primary,';--toastify-toast-width:"fit-content";--toastify-toast-min-height:',(t=>t.height||"44px"),";--toastify-toast-max-height:",(t=>t.height||"fit-content"),";font-family:inherit;.custom-position{position:relative;}.Toastify__toast{padding:6px;max-width:",(t=>t.width),";.Toastify__close-button{display:block;margin:auto;}.Toastify__toast-body{padding:0 6px;}.Toastify__progress-bar-theme--colored.Toastify__progress-bar--default{background:",c.COLORS.content.brand,";}.Toastify__toast-body>div:last-child{display:flex;}}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvYXN0ZXIuc3R5bGVkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFd0MiLCJmaWxlIjoiVG9hc3Rlci5zdHlsZWQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xyXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tIFwiLi4vLi4vY29uc3RhbnRzL1RoZW1lXCI7XHJcbmV4cG9ydCBjb25zdCBUb2FzdGVyU3R5bGVkID0gc3R5bGVkLmRpdiBgXG5cblx0LS10b2FzdGlmeS1jb2xvci1saWdodDogI2ZmZjtcblx0LS10b2FzdGlmeS1jb2xvci1kYXJrOiAjMTIxMjEyO1xuXHQtLXRvYXN0aWZ5LWNvbG9yLWluZm86ICR7Q09MT1JTLmJhY2tncm91bmQuaW52ZXJzZX07XG5cdC0tdG9hc3RpZnktY29sb3Itc3VjY2VzczogJHtDT0xPUlMuY29udGVudC5wb3NpdGl2ZX07XG5cdC0tdG9hc3RpZnktY29sb3ItZXJyb3I6ICR7Q09MT1JTLmNvbnRlbnQubmVnYXRpdmV9O1xuXHQtLXRvYXN0aWZ5LXRleHQtY29sb3ItbGlnaHQ6ICR7Q09MT1JTLmNvbnRlbnQucHJpbWFyeX07XG5cdC0tdG9hc3RpZnktdG9hc3Qtd2lkdGg6IFwiZml0LWNvbnRlbnRcIjtcblx0LS10b2FzdGlmeS10b2FzdC1taW4taGVpZ2h0OiAkeyhwcm9wcykgPT4gcHJvcHMuaGVpZ2h0IHx8ICc0NHB4J307XG5cdC0tdG9hc3RpZnktdG9hc3QtbWF4LWhlaWdodDogJHsocHJvcHMpID0+IHByb3BzLmhlaWdodCB8fCAnZml0LWNvbnRlbnQnfTtcblx0Zm9udC1mYW1pbHk6IGluaGVyaXQ7XG5cblx0LmN1c3RvbS1wb3NpdGlvbiB7XG5cdFx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR9XG5cdC5Ub2FzdGlmeV9fdG9hc3Qge1xuXHRcdHBhZGRpbmc6IDZweDtcblx0XHRtYXgtd2lkdGg6ICR7KHByb3BzKSA9PiBwcm9wcy53aWR0aH07XG5cblx0LlRvYXN0aWZ5X19jbG9zZS1idXR0b24ge1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdG1hcmdpbjogYXV0bztcblx0fVxuXG5cdC5Ub2FzdGlmeV9fdG9hc3QtYm9keXtcblx0XHRwYWRkaW5nOiAwIDZweDtcblx0fVxuXG5cdC5Ub2FzdGlmeV9fcHJvZ3Jlc3MtYmFyLXRoZW1lLS1jb2xvcmVkLlRvYXN0aWZ5X19wcm9ncmVzcy1iYXItLWRlZmF1bHQge1xuXHRcdGJhY2tncm91bmQ6ICR7Q09MT1JTLmNvbnRlbnQuYnJhbmR9O1xuXHR9XG5cblx0LlRvYXN0aWZ5X190b2FzdC1ib2R5ID4gZGl2Omxhc3QtY2hpbGQge1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdH1cbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVRvYXN0ZXIuc3R5bGVkLmpzLm1hcCJdfQ== */"));exports.ToasterStyled=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@emotion/styled/base"),c=require("../../constants/Theme.js");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const d=o(t).default("div","production"===process.env.NODE_ENV?{target:"e1tdeuzc0"}:{target:"e1tdeuzc0",label:"ToasterStyled"})("--toastify-color-light:#fff;--toastify-color-dark:#121212;--toastify-color-info:",c.COLORS.background.inverse,";--toastify-color-success:",c.COLORS.content.positive,";--toastify-color-error:",c.COLORS.content.negative,";--toastify-color-warning:",c.COLORS.content.warning,";--toastify-text-color-light:",c.COLORS.content.primary,';--toastify-toast-width:"fit-content";--toastify-toast-min-height:',(t=>t.height||"44px"),";--toastify-toast-max-height:",(t=>t.height||"fit-content"),";font-family:inherit;.custom-position{position:relative;}.Toastify__toast{padding:6px;max-width:",(t=>t.width),";.Toastify__close-button{display:block;margin:auto;}.Toastify__toast-body{padding:0 6px;}.Toastify__progress-bar-theme--colored.Toastify__progress-bar--default{background:",c.COLORS.content.brand,";}.Toastify__toast-body>div:last-child{display:flex;}}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvYXN0ZXIuc3R5bGVkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFd0MiLCJmaWxlIjoiVG9hc3Rlci5zdHlsZWQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xyXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tIFwiLi4vLi4vY29uc3RhbnRzL1RoZW1lXCI7XHJcbmV4cG9ydCBjb25zdCBUb2FzdGVyU3R5bGVkID0gc3R5bGVkLmRpdiBgXG5cblx0LS10b2FzdGlmeS1jb2xvci1saWdodDogI2ZmZjtcblx0LS10b2FzdGlmeS1jb2xvci1kYXJrOiAjMTIxMjEyO1xuXHQtLXRvYXN0aWZ5LWNvbG9yLWluZm86ICR7Q09MT1JTLmJhY2tncm91bmQuaW52ZXJzZX07XG5cdC0tdG9hc3RpZnktY29sb3Itc3VjY2VzczogJHtDT0xPUlMuY29udGVudC5wb3NpdGl2ZX07XG5cdC0tdG9hc3RpZnktY29sb3ItZXJyb3I6ICR7Q09MT1JTLmNvbnRlbnQubmVnYXRpdmV9O1xuXHQtLXRvYXN0aWZ5LWNvbG9yLXdhcm5pbmc6ICR7Q09MT1JTLmNvbnRlbnQud2FybmluZ307XG5cdC0tdG9hc3RpZnktdGV4dC1jb2xvci1saWdodDogJHtDT0xPUlMuY29udGVudC5wcmltYXJ5fTtcblx0LS10b2FzdGlmeS10b2FzdC13aWR0aDogXCJmaXQtY29udGVudFwiO1xuXHQtLXRvYXN0aWZ5LXRvYXN0LW1pbi1oZWlnaHQ6ICR7KHByb3BzKSA9PiBwcm9wcy5oZWlnaHQgfHwgJzQ0cHgnfTtcblx0LS10b2FzdGlmeS10b2FzdC1tYXgtaGVpZ2h0OiAkeyhwcm9wcykgPT4gcHJvcHMuaGVpZ2h0IHx8ICdmaXQtY29udGVudCd9O1xuXHRmb250LWZhbWlseTogaW5oZXJpdDtcblxuXHQuY3VzdG9tLXBvc2l0aW9uIHtcblx0XHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdH1cblx0LlRvYXN0aWZ5X190b2FzdCB7XG5cdFx0cGFkZGluZzogNnB4O1xuXHRcdG1heC13aWR0aDogJHsocHJvcHMpID0+IHByb3BzLndpZHRofTtcblxuXHQuVG9hc3RpZnlfX2Nsb3NlLWJ1dHRvbiB7XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0bWFyZ2luOiBhdXRvO1xuXHR9XG5cblx0LlRvYXN0aWZ5X190b2FzdC1ib2R5e1xuXHRcdHBhZGRpbmc6IDAgNnB4O1xuXHR9XG5cblx0LlRvYXN0aWZ5X19wcm9ncmVzcy1iYXItdGhlbWUtLWNvbG9yZWQuVG9hc3RpZnlfX3Byb2dyZXNzLWJhci0tZGVmYXVsdCB7XG5cdFx0YmFja2dyb3VuZDogJHtDT0xPUlMuY29udGVudC5icmFuZH07XG5cdH1cblxuXHQuVG9hc3RpZnlfX3RvYXN0LWJvZHkgPiBkaXY6bGFzdC1jaGlsZCB7XG5cdFx0ZGlzcGxheTogZmxleDtcblx0fVxuYDtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9VG9hc3Rlci5zdHlsZWQuanMubWFwIl19 */"));exports.ToasterStyled=d;

package/dist/cjs/components/tooltips/Tooltip.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("@tippyjs/react"),n=require("react"),r=require("./TooltipInternal.js"),i=require("../../constants/Theme.js");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var a=o(e),l=o(n);const s=`\n  .tippy-content {\n    padding: 0px;\n  }\n  .tippy-arrow {\n    \tcolor: ${t=>i.COLORS.content.primary};\n  }\n`;exports.Tooltip=e=>l.default.isValidElement(e.children)?t.jsxs(t.Fragment,{children:[t.jsx("style",{children:s}),t.jsx(a.default,Object.assign({placement:e.placement||"right",maxWidth:e.width,animation:"fade",arrow:!0,interactive:!0,content:e.tooltipContent?e.tooltipContent:t.jsx(r.default,{title:e.title,body:e.body,buttonProps:e.buttonProps})},{children:e.children}))]}):null;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("@tippyjs/react"),n=require("react"),r=require("./TooltipInternal.js"),o=require("../../constants/Theme.js");function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var a=i(e),l=i(n);const p=`\n\t.tippy-content {\n\t\tpadding: 0px;\n\t}\n\t.tippy-arrow {\n\t\tcolor: ${t=>o.COLORS.content.primary};\n\t}\n\t.overflow-wrap-tippy {\n\t\toverflow-wrap: anywhere;\n\t}\n`;exports.Tooltip=e=>l.default.isValidElement(e.children)?t.jsxs(t.Fragment,{children:[t.jsx("style",{children:p}),t.jsx(a.default,Object.assign({appendTo:document.body,className:"overflow-wrap-tippy",placement:e.placement||"right",maxWidth:e.width,animation:"fade",arrow:!0,interactive:!0,delay:e.delay,content:e.tooltipContent?e.tooltipContent:t.jsx(r.default,{title:e.title,body:e.body,buttonProps:e.buttonProps})},{children:e.children}))]}):null;

package/dist/cjs/components/tooltips/TooltipInternal.d.ts

@@ -4,6 +4,7 @@ export interface TooltipInternalProps {
     title?: string;
     body: string;
     buttonProps?: ButtonProps;
+    delay?: number;
 }
 type Props = TooltipInternalProps;
 declare const TooltipInternal: FunctionComponent<Props>;

package/dist/cjs/components/zeroState/ZeroState.js

@@ -14,4 +14,4 @@
 	align-items: center;
 	justify-content: center;
 	border-radius: 24px;
-`;exports.ZeroState=t=>{let{subTitle:l,title:i,IconHolderStyle:a,style:u}=t;return e.jsxs(o,Object.assign({style:null!=u?u:{}},{children:[e.jsx(c,Object.assign({style:null!=a?a:{}},{children:e.jsx(s.default,{color:n.COLORS.content.placeholder,height:24,width:24})})),e.jsx(r.TitleRegular,Object.assign({style:{marginTop:8,color:n.COLORS.content.primary}},{children:null!=i?i:"No results found"})),!!l&&e.jsx(r.BodyCaption,Object.assign({style:{marginTop:4,color:n.COLORS.content.secondary}},{children:l}))]}))};
+`;exports.ZeroState=t=>{let{subTitle:l,title:i,IconHolderStyle:a,style:d}=t;return e.jsxs(o,Object.assign({style:null!=d?d:{}},{children:[e.jsx(c,Object.assign({style:null!=a?a:{}},{children:e.jsx(s.default,{color:n.COLORS.content.placeholder,height:24,width:24})})),e.jsx(r.TitleRegular,Object.assign({style:{marginTop:8,color:n.COLORS.content.primary}},{children:null!=i?i:"No results found"})),!!l&&e.jsx(r.BodyCaption,Object.assign({style:{marginTop:4,color:n.COLORS.content.secondary,textAlign:"center",maxWidth:184}},{children:l}))]}))};

package/dist/cjs/constants/Theme.d.ts

@@ -92,9 +92,11 @@ export declare const COLORS: {
         };
         warning: {
             lightAlt: string;
+            vibrant: string;
         };
         positive: {
             lightAlt: string;
+            vibrant: string;
         };
         brandLightAlt: string;
         blue: {
@@ -370,9 +372,11 @@ export declare const DEFAULT_THEME: {
             };
             warning: {
                 lightAlt: string;
+                vibrant: string;
             };
             positive: {
                 lightAlt: string;
+                vibrant: string;
             };
             brandLightAlt: string;
             blue: {