@bikdotai/bik-component-library 0.0.31 → 0.0.33

package/dist/esm/components/tag/Tag.styled.js

@@ -1,26 +1,28 @@
-import r from"styled-components";import{getPadding as e,getBackgroundColor as t,generateBorder as i,getTextColor as o}from"./themes.js";const a=r.div`
+import e from"styled-components";import{getPadding as r,getBackgroundColor as t,generateBorder as a,getTextColor as i}from"./themes.js";const o=e.div`
 	cursor: default;
-	${r=>"regular"===r.variant?"display: block;":""}
-	${r=>"circle"===r.variant&&"height: 20px;"}
+	${e=>"regular"===e.variant?"display: block;":""}
+	${e=>"circle"===e.variant&&"height: 20px;"}
 	.container {
 		display: flex;
 		gap: 6px;
-		padding: ${r=>e(r.variant)};
+		padding: ${e=>r(e.variant)};
 
-		background-color: ${r=>t(r.theme,r.type)};
+		background-color: ${e=>t(e.theme,e.type)};
 
-		border-radius: ${r=>"regular"===r.variant?"4px":"12px"};
+		border-radius: ${e=>"regular"===e.variant?"4px":"12px"};
 
-		${r=>"light"===r.theme&&`border: 1px solid ${i(r.type)};`}
+		${e=>"light"===e.theme&&`border: 1px solid ${a(e.type)};`}
 
 		.text {
-			color: ${r=>o(r.theme,r.type)};
+			color: ${e=>i(e.theme,e.type)};
 		}
 
 		.icon-trailing {
+			all: unset;
 		}
 
 		.icon-leading {
+			all: unset;
 		}
 	}
-`;export{a as Tag};
+`;export{o as Tag};

package/dist/esm/components/tag/model.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
+import { MouseEventHandler } from 'react';
 export type TagTheme = 'light' | 'dark';
 export type TagVariant = 'regular' | 'circle';
 export type TagType = 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey';
@@ -21,7 +22,7 @@ export declare const ValidTagTypeMap: {
         grey: boolean;
     };
 };
-export interface TagProps {
+export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
     /**
      * Set the theme of the Tag
      * @default default light
@@ -38,16 +39,34 @@ export interface TagProps {
      */
     variant?: TagVariant;
     /**
-     * The icon component that is the left of the text
+     * The icon component that is the right of the text
      * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
      * @default undefined
      */
     TrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
     /**
-     * The icon component that is to the right of the text
+     * The right icon id,
+     * @default trailing-icon
+     */
+    trailingIconId?: string;
+    /**
+     * The left icon on click event, defaults to () => {}
+     */
+    onTrailingIconClicked?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * The icon component that is to the left of the text
      * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
      * @default undefined
      */
     LeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    /**
+     * The right icon on click event, defaults to () => {}
+     */
+    onLeadingIconClicked?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * The left icon id,
+     * @default leading-icon
+     */
+    leadingIconId?: string;
     tagText: string | number;
 }

package/dist/esm/components/tag/themes.js

@@ -1 +1 @@
-import{COLORS as r}from"../../constants/Theme.js";const n={blue:{iconColor:{light:r.content.blue,dark:r.content.primaryInverse},textColor:{light:r.content.blue,dark:r.content.primaryInverse},border:r.stroke.blue.lightAlt,backgroundColor:{light:r.background.blue.light,dark:r.content.blue,circle:r.content.blue}},purple:{iconColor:{light:r.background.inverseLight,dark:r.content.primaryInverse},textColor:{light:r.background.inverseLight,dark:r.content.primaryInverse},border:r.stroke.brandLightAlt,backgroundColor:{light:r.background.brandLight,dark:r.background.inverse,circle:r.background.inverse}},negative:{iconColor:{light:r.content.negative,dark:r.content.primaryInverse},textColor:{light:r.content.negative,dark:r.content.primaryInverse},border:r.stroke.negative.lightAlt,backgroundColor:{light:r.background.negative.light,dark:r.background.negative.vibrant,circle:r.background.negative.vibrant}},positive:{iconColor:{light:r.content.positive,dark:r.content.primaryInverse},textColor:{light:r.content.positive,dark:r.content.primaryInverse},border:r.stroke.positive.lightAlt,backgroundColor:{light:r.background.positive.light,dark:r.background.positive.vibrant,circle:r.background.positive.vibrant}},warning:{iconColor:{light:r.content.warning,dark:r.content.primary},textColor:{light:r.content.warning,dark:r.content.primary},border:r.stroke.warning.lightAlt,backgroundColor:{light:r.background.warning.light,dark:r.background.warning.vibrant,circle:r.background.warning.vibrant}},neutral:{iconColor:{light:r.content.secondary,dark:r.content.primaryInverse},textColor:{light:r.content.secondary,dark:r.content.primaryInverse},border:r.stroke.primary,backgroundColor:{light:r.surface.subdued,dark:r.background.inverse,circle:r.background.inverseLight}},white:{iconColor:{light:r.content.secondary,dark:r.content.primaryInverse},textColor:{light:r.content.secondary,dark:r.content.primaryInverse},border:r.stroke.primary,backgroundColor:{light:r.surface.subdued,dark:r.background.inverse,circle:r.background.inverseLight}},grey:{iconColor:{light:r.content.secondary,dark:r.content.primaryInverse},textColor:{light:r.content.secondary,dark:r.content.primaryInverse},border:r.stroke.primary,backgroundColor:{light:r.surface.subdued,dark:r.content.secondary,circle:r.content.secondary}}},t=(r,t)=>n[t].iconColor[r],e=(r,t)=>n[t].textColor[r],o=r=>n[r].border,i=(r,t)=>n[t].backgroundColor[r],a=r=>"regular"===r?"4px 8px":"2px 6px";export{o as generateBorder,i as getBackgroundColor,a as getPadding,t as getTagIconColor,e as getTextColor};
+import{COLORS as r}from"../../constants/Theme.js";const n={blue:{iconColor:{light:r.content.blue,dark:r.content.primaryInverse},textColor:{light:r.content.blue,dark:r.content.primaryInverse},border:r.stroke.blue.lightAlt,backgroundColor:{light:r.background.blue.light,dark:r.content.blue,circle:r.content.blue}},purple:{iconColor:{light:r.background.inverseLight,dark:r.content.primaryInverse},textColor:{light:r.background.inverseLight,dark:r.content.primaryInverse},border:r.stroke.brandLightAlt,backgroundColor:{light:r.background.brandLight,dark:r.background.inverse,circle:r.background.inverse}},negative:{iconColor:{light:r.content.negative,dark:r.content.primaryInverse},textColor:{light:r.content.negative,dark:r.content.primaryInverse},border:r.stroke.negative.lightAlt,backgroundColor:{light:r.background.negative.light,dark:r.background.negative.vibrant,circle:r.background.negative.vibrant}},positive:{iconColor:{light:r.content.positive,dark:r.content.primaryInverse},textColor:{light:r.content.positive,dark:r.content.primaryInverse},border:r.stroke.positive.lightAlt,backgroundColor:{light:r.background.positive.light,dark:r.background.positive.vibrant,circle:r.background.positive.vibrant}},warning:{iconColor:{light:r.content.warning,dark:r.content.primary},textColor:{light:r.content.warning,dark:r.content.primary},border:r.stroke.warning.lightAlt,backgroundColor:{light:r.background.warning.light,dark:r.background.warning.vibrant,circle:r.background.warning.vibrant}},neutral:{iconColor:{light:r.content.secondary,dark:r.content.primaryInverse},textColor:{light:r.content.secondary,dark:r.content.primaryInverse},border:r.stroke.primary,backgroundColor:{light:r.surface.subdued,dark:r.background.inverse,circle:r.background.inverseLight}},white:{iconColor:{light:r.content.secondary,dark:r.content.primaryInverse},textColor:{light:r.content.secondary,dark:r.content.primaryInverse},border:r.stroke.primary,backgroundColor:{light:r.surface.standard,dark:r.background.inverse,circle:r.background.inverseLight}},grey:{iconColor:{light:r.content.secondary,dark:r.content.primaryInverse},textColor:{light:r.content.secondary,dark:r.content.primaryInverse},border:r.stroke.primary,backgroundColor:{light:r.surface.subdued,dark:r.content.secondary,circle:r.content.secondary}}},t=(r,t)=>n[t].iconColor[r],o=(r,t)=>n[t].textColor[r],e=r=>n[r].border,i=(r,t)=>n[t].backgroundColor[r],a=r=>"regular"===r?"4px 8px":"2px 6px";export{e as generateBorder,i as getBackgroundColor,a as getPadding,t as getTagIconColor,o as getTextColor};

package/dist/esm/components/template-context-mapper/TemplateContextMapper.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{useEffect as o,useState as i,useMemo as a}from"react";import n from"../../utils/StringUtils.js";import{StyledModal as r}from"../modals/styledModal.js";import{CHANNEL_TYPE as s}from"../template-preview/models/Channels.js";import{TemplateModalContext as c}from"./context/templateModalContext.js";import m from"./modalElements/Footer.js";import p from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as d}from"./utils/convertPlaceholdersToBikDropdown.js";const h=h=>{let{selectedTemplate:u,closeDialog:g,showVariableMapping:f,channel:v,htmlContent:b,templateVariables:j,onTemplateSelect:M,globalPlaceholders:S,showOnlyContent:C,whatsappSpecificPickerMeta:w}=h;var P,y;o((()=>{A(b)}),[b]);const[E,T]=i(v===s.EMAIL?"desktop":"mobile"),[L,A]=i(b),[O,V]=i(!1),[k,x]=i(u),[D,I]=i(null!=j?j:[]);const F=a((()=>d(S)),[S]);return e(c.Provider,Object.assign({value:{template:k,setTemplate:x,device:E,setDevice:T,display_content:L,setDisplayContent:A,originalVariableList:D,setOriginalVariableList:I,isError:O,setIsError:V,channel:v,globalNormalizedPlaceholders:F}},{children:C?e(p,{channel:s.EMAIL,hideHeader:!0}):t(r,Object.assign({centralContainerStyles:{width:v===s.EMAIL&&f?1e3:650},open:!0,onClose:()=>{null==g||g()},headingTitle:null==k?void 0:k.label,headingSubtitle:v===s.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(P=null==k?void 0:k.category)&&void 0!==P?P:"")} • ${null!==(y=null==k?void 0:k.templateCategory)&&void 0!==y?y:""}`:""},{children:[e(p,{showVariableMapping:f,channel:v,whatsappSpecificPickerMeta:w}),M?e(m,{onSelect:function(){const e=null==M?void 0:M(k,D,null!=L?L:"");e&&V(!!e)}}):e(l,{})]}))}))};export{h as TemplateContextMapper};
+import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{useEffect as o,useState as i,useMemo as a}from"react";import n from"../../utils/StringUtils.js";import{StyledModal as r}from"../modals/styledModal.js";import{CHANNEL_TYPE as s}from"../template-preview/models/Channels.js";import{TemplateModalContext as c}from"./context/templateModalContext.js";import m from"./modalElements/Footer.js";import p from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as d}from"./utils/convertPlaceholdersToBikDropdown.js";const h=h=>{let{selectedTemplate:g,closeDialog:u,showVariableMapping:f,channel:v,htmlContent:b,templateVariables:S,onTemplateSelect:j,globalPlaceholders:M,showOnlyContent:T,whatsappSpecificPickerMeta:C}=h;var w,P;o((()=>{A(b)}),[b]);const[y,E]=i(v===s.EMAIL?"desktop":"mobile"),[L,A]=i(b),[O,V]=i(!1),[k,x]=i(g),[D,I]=i(null!=S?S:[]),[F,H]=i(!1);const $=a((()=>d(M)),[M]);return e(c.Provider,Object.assign({value:{template:k,setTemplate:x,device:y,setDevice:E,display_content:L,setDisplayContent:A,originalVariableList:D,setOriginalVariableList:I,isError:O,setIsError:V,channel:v,globalNormalizedPlaceholders:$,templateSelectionTriggered:F,setTemplateSelectionTriggered:H}},{children:T?e(p,{channel:s.EMAIL,hideHeader:!0}):t(r,Object.assign({centralContainerStyles:{width:v===s.EMAIL&&f?1e3:650},open:!0,onClose:()=>{null==u||u()},headingTitle:null==k?void 0:k.label,headingSubtitle:v===s.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(w=null==k?void 0:k.category)&&void 0!==w?w:"")} • ${null!==(P=null==k?void 0:k.templateCategory)&&void 0!==P?P:""}`:""},{children:[e(p,{showVariableMapping:f,channel:v,whatsappSpecificPickerMeta:C}),j?e(m,{onSelect:function(){const e=null==j?void 0:j(k,D,null!=L?L:"");e?V(!!e):H(!0)}}):e(l,{})]}))}))};export{h as TemplateContextMapper};

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

@@ -19,6 +19,8 @@ export declare const TemplateModalContext: React.Context<{
     isError: boolean;
     setIsError?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
     globalNormalizedPlaceholders?: globalNormalizedPlaceholdersType[] | undefined;
+    templateSelectionTriggered: boolean;
+    setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
     device: DEVICE_TYPES;
@@ -34,4 +36,6 @@ export declare const useTemplateModalContext: () => {
     isError: boolean;
     setIsError?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
     globalNormalizedPlaceholders?: globalNormalizedPlaceholdersType[] | undefined;
+    templateSelectionTriggered: boolean;
+    setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
 };

package/dist/esm/components/template-context-mapper/context/templateModalContext.js

@@ -1 +1 @@
-import e,{useContext as t}from"react";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";const l=e.createContext({device:"desktop",display_content:null,originalVariableList:[],channel:r.EMAIL,template:null,isError:!1}),o=()=>t(l);export{l as TemplateModalContext,o as useTemplateModalContext};
+import e,{useContext as t}from"react";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";const l=e.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:r.EMAIL,template:null,isError:!1}),o=()=>t(l);export{l as TemplateModalContext,o as useTemplateModalContext};

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

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

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

@@ -1,6 +1,6 @@
-import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import i from"../../../assets/icons/info.svg.js";import n from"styled-components";import{CHANNEL_TYPE as l}from"../../template-preview/models/Channels.js";import{Tooltip as r}from"../../tooltips/Tooltip.js";import"../../tooltips/CustomisedTooltip.js";import{TitleRegular as s,BodySecondary as a}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=n.div`
+import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import o from"../../../assets/icons/info.svg.js";import n from"styled-components";import{CHANNEL_TYPE as l}from"../../template-preview/models/Channels.js";import{Tooltip as r}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=n.div`
 	overflow-y: auto;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-`,h=n=>{let{onFocus:h}=n;const{originalVariableList:b,channel:f}=d();return e(p,{children:[e("div",Object.assign({style:{padding:8}},{children:[e("div",Object.assign({style:{display:"flex",gap:8}},{children:[t(s,Object.assign({style:{color:c.content.primary}},{children:"Edit variables and links"})),t(r,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(a,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(((e,i)=>f!==l.EMAIL||e.isEditableVariable?t("div",Object.assign({style:{marginTop:16}},{children:t(m,{index:i,variable:e,onFocus:()=>null==h?void 0:h(i)})}),i):t(o,{})))]})};export{p as Container,h as default};
+`,h=n=>{let{onFocus:h}=n;const{originalVariableList:b,channel:f}=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(r,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(o,{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(((e,o)=>f!==l.EMAIL||e.isEditableVariable?t("div",Object.assign({style:{marginTop:16}},{children:t(m,{index:o,variable:e,onFocus:()=>null==h?void 0:h(o)})}),o):t(i,{})))]})};export{p as Container,h as default};

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

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

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

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

@@ -1,5 +1,5 @@
-import t from"styled-components";import{Caption as o}from"../../TypographyStyle.js";import{COLORS as e}from"../../../constants/Theme.js";const r=t.div`
-	background: ${e.surface.standard};
+import t from"styled-components";import{Caption as e}from"../../TypographyStyle.js";import{COLORS as o}from"../../../constants/Theme.js";const r=t.div`
+	background: ${o.surface.standard};
 	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
 	border-top-left-radius: 0px;
 	border-top-right-radius: 12px;
@@ -7,8 +7,12 @@ import t from"styled-components";import{Caption as o}from"../../TypographyStyle.
 	border-bottom-left-radius: 12px;
 	position: relative;
 	padding: 8px 0px;
-`,i=t(o)`
-	color: ${e.content.secondary};
+`,i=t(e)`
+	color: ${o.content.secondary};
+	max-width: 80px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
 `,p=t.div`
 	border-radius: 8px;
 	display: flex;
@@ -24,7 +28,7 @@ import t from"styled-components";import{Caption as o}from"../../TypographyStyle.
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
-	border-top: 1px solid ${e.stroke.primary};
+	border-top: 1px solid ${o.stroke.primary};
 `,n=t.div`
 	display: flex;
 
@@ -42,7 +46,7 @@ import t from"styled-components";import{Caption as o}from"../../TypographyStyle.
 	display: flex;
 	flex-direction: row;
 	justify-content: start;
-	background: ${e.surface.hovered};
+	background: ${o.surface.hovered};
 	border-bottom-right-radius: 8px;
 	border-bottom-left-radius: 8px;
 `,t.div`

package/dist/esm/components/tooltips/Tooltip.d.ts

@@ -1,10 +1,10 @@
 import { FunctionComponent, ReactNode } from 'react';
 import { TooltipInternalProps } from "./TooltipInternal";
-type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 export interface TooltipProps extends TooltipInternalProps {
     width?: number;
     placement?: Placement;
     children: ReactNode;
+    tooltipContent?: JSX.Element;
 }
 export declare const Tooltip: FunctionComponent<TooltipProps>;
-export {};

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

@@ -1 +1 @@
-import{jsxs as t,Fragment as n,jsx as r}from"react/jsx-runtime";import e from"@tippyjs/react";import i from"react";import o from"./TooltipInternal.js";import{COLORS as p}from"../../constants/Theme.js";const a=`\n  .tippy-content {\n    padding: 0px;\n  }\n  .tippy-arrow {\n    \tcolor: ${t=>p.content.primary};\n  }\n`,c=p=>i.isValidElement(p.children)?t(n,{children:[r("style",{children:a}),r(e,Object.assign({placement:p.placement||"right",maxWidth:p.width,animation:"fade",arrow:!0,interactive:!0,content:r(o,{title:p.title,body:p.body,buttonProps:p.buttonProps})},{children:p.children}))]}):null;export{c as Tooltip};
+import{jsxs as t,Fragment as n,jsx as o}from"react/jsx-runtime";import r from"@tippyjs/react";import e from"react";import i from"./TooltipInternal.js";import{COLORS as p}from"../../constants/Theme.js";const l=`\n  .tippy-content {\n    padding: 0px;\n  }\n  .tippy-arrow {\n    \tcolor: ${t=>p.content.primary};\n  }\n`,a=p=>e.isValidElement(p.children)?t(n,{children:[o("style",{children:l}),o(r,Object.assign({placement:p.placement||"right",maxWidth:p.width,animation:"fade",arrow:!0,interactive:!0,content:p.tooltipContent?p.tooltipContent:o(i,{title:p.title,body:p.body,buttonProps:p.buttonProps})},{children:p.children}))]}):null;export{a as Tooltip};

package/dist/esm/components/tooltips/index.d.ts

@@ -1,2 +1 @@
 export * from './Tooltip';
-export * from './CustomisedTooltip';

package/dist/esm/index.js

@@ -1 +1 @@
-import*as o from"./components/template-preview/constants/regexPatterns.js";export{o as regexPatterns};export{default as StringUtils}from"./utils/StringUtils.js";export{BASE_COLORS,COLORS,DEFAULT_THEME,FONTS}from"./constants/Theme.js";export{CheckBox}from"./components/checkBox/CheckBox.js";export{ListItem}from"./components/list-item/ListItem.js";export{Pagination}from"./components/pagination/Pagination.js";export{RadioButton}from"./components/radioButton/RadioButton.js";export{Toaster}from"./components/toaster/Toaster.js";export{Tooltip}from"./components/tooltips/Tooltip.js";export{CustomisedTooltip,TooltipPlacement}from"./components/tooltips/CustomisedTooltip.js";export{Spinner}from"./components/spinner/Spinner.js";export{Stepper}from"./components/stepper/Stepper.js";export{Tag}from"./components/tag/Tag.js";export{IconButton}from"./components/icon-button/IconButton.js";export{TemplatePreview}from"./components/template-preview/TemplatePreview.js";export{WhatsappLikePreview}from"./components/template-preview/WhatsApp/WhatsAppLikePreview.js";export{renderVariableUIForPreview}from"./components/template-preview/helpers/SmsTemplateHelper.js";export{WhatsAppFormatToHTML}from"./components/template-preview/helpers/WhatsAppFormatToHTML.js";export{TemplateContextMapper}from"./components/template-context-mapper/TemplateContextMapper.js";export{getAllDataFromTemplateComponent}from"./components/template-context-mapper/utils/getDataFromTemplateComponent.js";export{validateIsUrl}from"./components/template-context-mapper/utils/validateIsUrl.js";export{FABMenu}from"./components/fab-menu/FABMenu.js";export{FloatingActionButton}from"./components/floating-action-button/FloatingActionButton.js";export{DROP_POSITION,DropdownToggleContainer,FAB_POSITION,FloatingActionButtonContainer,FloatingActionButtonOuterContainer,MENU_ALIGNMENT,StyledDropdown}from"./components/floating-action-button/FloatingActionButton.styles.js";export{ImageService}from"./components/image-compress/ImageCompress.js";export{BodyCaption,BodyLarge,BodyPrimary,BodyPrimaryLink,BodyRegular,BodySecondary,BodySecondaryLink,BodyTiny,ButtonLarge,ButtonRegular,Caption,Display,SubHeading,TitleLarge,TitleMedium,TitleRegular,TitleSmall}from"./components/TypographyStyle.js";export{Button}from"./components/button/Button.js";export{ProgressBarComponent,ProgressCompletedBar}from"./components/progress-bar/ProgressBarComponent.js";export{StyledModal}from"./components/modals/styledModal.js";export{Dropdown}from"./components/dropdown/Dropdown.js";export{DropdownPopover}from"./components/dropdown/DropdownPopover/index.js";export{OpenedDropdown}from"./components/dropdown/OpenedDropdown/components/OpennedDropdown.js";export{AnalyticsCard}from"./components/analytics-card/AnalyticsCard.js";export{AnalyticsContainer,CardDataContainer}from"./components/analytics-card/AnalyticsCard.styled.js";export{Input}from"./components/input/Input.js";export{AnalyticsChip}from"./components/analytics-chips-and-dropdowns/AnalyticsChip.js";export{AnalyticsDropdown,EachItem}from"./components/analytics-chips-and-dropdowns/AnalyticsDropdown.js";export{AnalyticsMultiChip}from"./components/analytics-chips-and-dropdowns/AnalyticsMultiChip.js";export{AVATAR_SIZE_VS_ICON_SIZE_MAP,Avatar,BACKGROUND_VS_TEXT_COLOR_MAP}from"./components/avatar/Avatar.js";export{RATIO,Thumbnail}from"./components/thumbnail/Thumbnail.js";export{Curtain}from"./components/curtain/Curtain.js";export{DatePicker}from"./components/datePicker/DatePicker.js";
+import*as o from"./components/template-preview/constants/regexPatterns.js";export{o as regexPatterns};export{default as StringUtils}from"./utils/StringUtils.js";export{BASE_COLORS,COLORS,DEFAULT_THEME,FONTS}from"./constants/Theme.js";export{CheckBox}from"./components/checkBox/CheckBox.js";export{ListItem}from"./components/list-item/ListItem.js";export{Pagination}from"./components/pagination/Pagination.js";export{RadioButton}from"./components/radioButton/RadioButton.js";export{Toaster}from"./components/toaster/Toaster.js";export{Tooltip}from"./components/tooltips/Tooltip.js";export{Spinner}from"./components/spinner/Spinner.js";export{Stepper}from"./components/stepper/Stepper.js";export{Tag}from"./components/tag/Tag.js";export{IconButton}from"./components/icon-button/IconButton.js";export{TemplatePreview}from"./components/template-preview/TemplatePreview.js";export{WhatsappLikePreview}from"./components/template-preview/WhatsApp/WhatsAppLikePreview.js";export{renderVariableUIForPreview}from"./components/template-preview/helpers/SmsTemplateHelper.js";export{WhatsAppFormatToHTML}from"./components/template-preview/helpers/WhatsAppFormatToHTML.js";export{TemplateContextMapper}from"./components/template-context-mapper/TemplateContextMapper.js";export{getAllDataFromTemplateComponent}from"./components/template-context-mapper/utils/getDataFromTemplateComponent.js";export{validateIsUrl}from"./components/template-context-mapper/utils/validateIsUrl.js";export{FABMenu}from"./components/fab-menu/FABMenu.js";export{FloatingActionButton}from"./components/floating-action-button/FloatingActionButton.js";export{DROP_POSITION,DropdownToggleContainer,FAB_POSITION,FloatingActionButtonContainer,FloatingActionButtonOuterContainer,MENU_ALIGNMENT,StyledDropdown,TooltipStyled}from"./components/floating-action-button/FloatingActionButton.styles.js";export{ImageService}from"./components/image-compress/ImageCompress.js";export{BodyCaption,BodyLarge,BodyPrimary,BodyPrimaryLink,BodyRegular,BodySecondary,BodySecondaryLink,BodyTiny,ButtonLarge,ButtonRegular,Caption,Display,SubHeading,TitleLarge,TitleMedium,TitleRegular,TitleSmall}from"./components/TypographyStyle.js";export{Button}from"./components/button/Button.js";export{ProgressBarComponent,ProgressCompletedBar}from"./components/progress-bar/ProgressBarComponent.js";export{StyledModal}from"./components/modals/styledModal.js";export{Dropdown}from"./components/dropdown/Dropdown.js";export{DropdownPopover}from"./components/dropdown/DropdownPopover/index.js";export{OpenedDropdown}from"./components/dropdown/OpenedDropdown/components/OpennedDropdown.js";export{AnalyticsCard}from"./components/analytics-card/AnalyticsCard.js";export{AnalyticsContainer,CardDataContainer}from"./components/analytics-card/AnalyticsCard.styled.js";export{Input}from"./components/input/Input.js";export{AnalyticsChip}from"./components/analytics-chips-and-dropdowns/AnalyticsChip.js";export{AnalyticsDropdown,EachItem}from"./components/analytics-chips-and-dropdowns/AnalyticsDropdown.js";export{AnalyticsMultiChip}from"./components/analytics-chips-and-dropdowns/AnalyticsMultiChip.js";export{AVATAR_SIZE_VS_ICON_SIZE_MAP,Avatar,BACKGROUND_VS_TEXT_COLOR_MAP}from"./components/avatar/Avatar.js";export{RATIO,Thumbnail}from"./components/thumbnail/Thumbnail.js";export{Curtain}from"./components/curtain/Curtain.js";export{DatePicker}from"./components/datePicker/DatePicker.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.31",
+	"version": "0.0.33",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",

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

@@ -1,26 +0,0 @@
-import 'bootstrap/dist/css/bootstrap.min.css';
-import React from 'react';
-export declare enum TooltipPlacement {
-    Top = "top",
-    Bottom = "bottom",
-    Right = "right",
-    Left = "left",
-    Auto_Start = "auto-start",
-    Auto = "auto",
-    Auto_end = "auto-end",
-    Top_Start = "top-start",
-    Top_End = "top-end",
-    Right_Start = "right-start",
-    Right_End = "right-end",
-    Bottom_End = "bottom-end",
-    Bottom_Start = "bottom-start",
-    Left_End = "left-end",
-    Left_Start = "left-start"
-}
-export declare const CustomisedTooltip: React.FC<{
-    tooltipContent: JSX.Element;
-    tooltipTriggerContent: JSX.Element;
-    tooltipPlacement: TooltipPlacement;
-    showOnHover: boolean;
-    isTooltipVisible?: boolean;
-}>;

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

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=require("react/jsx-runtime"),o=require("react"),r=require("react-bootstrap");exports.TooltipPlacement=void 0,(t=exports.TooltipPlacement||(exports.TooltipPlacement={})).Top="top",t.Bottom="bottom",t.Right="right",t.Left="left",t.Auto_Start="auto-start",t.Auto="auto",t.Auto_end="auto-end",t.Top_Start="top-start",t.Top_End="top-end",t.Right_Start="right-start",t.Right_End="right-end",t.Bottom_End="bottom-end",t.Bottom_Start="bottom-start",t.Left_End="left-end",t.Left_Start="left-start";exports.CustomisedTooltip=t=>{const{tooltipContent:i,tooltipPlacement:n,tooltipTriggerContent:s,showOnHover:a,isTooltipVisible:l=!0}=t,[p,u]=o.useState(!1),c=o.useRef(null);return e.jsx(r.OverlayTrigger,Object.assign({placement:n,target:c.current,show:p,overlay:l?e.jsx(r.Tooltip,Object.assign({id:`tooltip-${n}`},{children:i})):e.jsx(e.Fragment,{})},{children:e.jsx("div",Object.assign({ref:c,onMouseEnter:()=>{a&&u(!0)},onMouseLeave:()=>{a&&u(!1)},onClick:()=>{a||u(!p)}},{children:s}))}),n)};

package/dist/esm/components/tooltips/CustomisedTooltip.d.ts

@@ -1,26 +0,0 @@
-import 'bootstrap/dist/css/bootstrap.min.css';
-import React from 'react';
-export declare enum TooltipPlacement {
-    Top = "top",
-    Bottom = "bottom",
-    Right = "right",
-    Left = "left",
-    Auto_Start = "auto-start",
-    Auto = "auto",
-    Auto_end = "auto-end",
-    Top_Start = "top-start",
-    Top_End = "top-end",
-    Right_Start = "right-start",
-    Right_End = "right-end",
-    Bottom_End = "bottom-end",
-    Bottom_Start = "bottom-start",
-    Left_End = "left-end",
-    Left_Start = "left-start"
-}
-export declare const CustomisedTooltip: React.FC<{
-    tooltipContent: JSX.Element;
-    tooltipTriggerContent: JSX.Element;
-    tooltipPlacement: TooltipPlacement;
-    showOnHover: boolean;
-    isTooltipVisible?: boolean;
-}>;

package/dist/esm/components/tooltips/CustomisedTooltip.js

@@ -1 +0,0 @@
-import{jsx as t,Fragment as o}from"react/jsx-runtime";import{useState as e,useRef as r}from"react";import{OverlayTrigger as n,Tooltip as i}from"react-bootstrap";var a;!function(t){t.Top="top",t.Bottom="bottom",t.Right="right",t.Left="left",t.Auto_Start="auto-start",t.Auto="auto",t.Auto_end="auto-end",t.Top_Start="top-start",t.Top_End="top-end",t.Right_Start="right-start",t.Right_End="right-end",t.Bottom_End="bottom-end",t.Bottom_Start="bottom-start",t.Left_End="left-end",t.Left_Start="left-start"}(a||(a={}));const s=a=>{const{tooltipContent:s,tooltipPlacement:l,tooltipTriggerContent:p,showOnHover:c,isTooltipVisible:d=!0}=a,[m,u]=e(!1),g=r(null);return t(n,Object.assign({placement:l,target:g.current,show:m,overlay:d?t(i,Object.assign({id:`tooltip-${l}`},{children:s})):t(o,{})},{children:t("div",Object.assign({ref:g,onMouseEnter:()=>{c&&u(!0)},onMouseLeave:()=>{c&&u(!1)},onClick:()=>{c||u(!m)}},{children:p}))}),l)};export{s as CustomisedTooltip,a as TooltipPlacement};