@bikdotai/bik-component-library 0.0.533-beta.4 → 0.0.533-beta.5

package/dist/cjs/components/input-with-vars/InputWithVariables.d.ts

@@ -2,6 +2,7 @@
 import { Variable } from '../add-variableV2/AddVariableV2';
 import { SelectedVariable } from '../add-variableV2/types';
 import { InputTypeI } from '../input';
+import { PickerType } from '../variable-picker-v3/model';
 export interface InputWithVariablesProps {
     type?: InputTypeI;
     variablesList: any;
@@ -14,7 +15,6 @@ export interface InputWithVariablesProps {
     placeHolder?: string;
     showAddButton?: boolean;
     errorMessage?: string;
-    showSideModal?: boolean;
     noMaxCharCheck?: boolean;
     maxCharLimit?: number;
     labelText?: string;
@@ -22,5 +22,7 @@ export interface InputWithVariablesProps {
     isRequired?: boolean;
     hintText?: string;
     onEnterPress?: (input: string) => void;
+    pickerType?: PickerType;
+    portalElement?: HTMLElement;
 }
 export declare const InputWithVariables: React.FC<InputWithVariablesProps>;

package/dist/cjs/components/input-with-vars/InputWithVariables.js

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../assets/icons/PlusIcon.js"),t=require("react"),r=require("styled-components"),l=require("uuid"),i=require("../../constants/Theme.js"),s=require("../add-variableV2/AddVariableBox.styled.js"),n=require("../floater/floater.js"),u=require("../input/Input.js"),c=require("../TypographyStyle.js"),o=require("../variable-picker-v3/VariablePicker.js"),d=require("../variable-picker-v3/model.js");function v(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const b=v(r).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../assets/icons/PlusIcon.js"),t=require("react"),r=require("styled-components"),l=require("uuid"),i=require("../../constants/Theme.js"),s=require("../add-variableV2/AddVariableBox.styled.js"),n=require("../floater/floater.js"),c=require("../input/Input.js"),u=require("../TypographyStyle.js"),o=require("../variable-picker-v3/VariablePicker.js"),d=require("../variable-picker-v3/model.js"),v=require("./customPortal.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const b=p(r).default.div`
 	position: relative;
 	margin-bottom: 16px;
 	input {
 		color: ${e=>e.isVar?i.COLORS.stroke.brand:"black"};
 	}
-`;exports.InputWithVariables=r=>{let{type:i,allowMix:v,onChange:p,prevVariable:h,variablesList:j,onBlur:g,onlyVariables:x,placeHolder:y,showAddButton:f=!0,showHelp:V,errorMessage:T,showSideModal:k,maxCharLimit:m,noMaxCharCheck:C,labelText:S,labelElement:q,isRequired:O=!1,hintText:R,onEnterPress:w}=r;const E=t.useRef(),A=t.useRef(!0),F=t.useRef(null),[M,I]=t.useState(!1),[P]=t.useState(l.v4()),[B,L]=t.useState(),[N,$]=t.useState(h),[D,H]=t.useState(!1),[_,z]=t.useState(!1),[K,W]=t.useState(0);return t.useEffect((()=>{if(B&&B.actualValue)if(v){if($((e=>{return{actualValue:(a=e.actualValue,t=B.actualValue,r=K,a.slice(0,r)+t+a.slice(r)),variableType:"string"};var a,t,r})),F.current){W(F.current.selectionStart);const e=K+B.actualValue.length+2;F.current.setSelectionRange(e,e),W(e)}}else $((e=>({actualValue:B.actualValue,variableType:B.variableType,needsFetching:B.needsFetching})))}),[B]),t.useEffect((()=>{A.current?A.current=!1:p(N)}),[N]),e.jsx(e.Fragment,{children:e.jsxs(b,Object.assign({isVar:/^{{.*}}$/.test(N.actualValue),onKeyDown:e=>{console.log("key",e.key),"Enter"===e.key&&(null==w||w(N.actualValue))}},{children:[e.jsx(u.Input,{isRequired:O,hintText:R,type:null!=i?i:"text",id:P,ref:F,skipFocus:!0,isActive:M,value:N.actualValue,validate:e=>[!0,""],errorMessage:T,noMaxCharCheck:C,maxCharLimit:m,labelText:S,labelElement:q,placeholder:y||"Add a value",onClick:e=>{F.current&&W(F.current.selectionStart)},onChangeText:(e,a)=>{if(F.current&&W(F.current.selectionStart),x){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||$({actualValue:"",variableType:"string"})}else $(v?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{I(!0),z(!0)},onBlur:e=>{var a,t,r,l,i,s,n;console.log("ee",null===(a=e.relatedTarget)||void 0===a?void 0:a.id),null==g||g(e,N),"addVar"===(null===(t=e.relatedTarget)||void 0===t?void 0:t.id)||"variable-picker-v3"===(null===(r=e.relatedTarget)||void 0===r?void 0:r.id)||(null===(i=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===i?void 0:i.includes("accordion"))||"back-btn-v3"===(null===(s=e.relatedTarget)||void 0===s?void 0:s.id)?(F.current&&F.current.focus(),I(!0)):"search-bar-v3-picker"===(null===(n=e.relatedTarget)||void 0===n?void 0:n.id)?I(!0):(I(!1),H(!1),z(!1))}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[N.actualValue&&V&&e.jsx("div",Object.assign({style:{marginTop:4}},{children:e.jsx(c.BodyCaption,{children:`This value is of type ${N.variableType}`})})),f&&_&&e.jsx("div",Object.assign({style:{marginTop:T||R?"-24px":"0px"}},{children:e.jsx(s.AddVariableStyled,Object.assign({ref:E,id:"addVar",onClick:()=>{H(!D)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(a.default,{color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),D&&e.jsx("div",Object.assign({style:{zIndex:101,position:"relative"}},{children:e.jsx(n.Floater,Object.assign({refElement:E},{children:e.jsx("div",Object.assign({style:{height:500}},{children:e.jsx(o.VariablePicker,{onClose:()=>H(!1),type:d.PickerType.FLOATER,data:j,onSelect:e=>{L(e),H(!1)}})}))}))}))]}))})};
+`;exports.InputWithVariables=r=>{let{type:i,allowMix:p,onChange:j,prevVariable:x,variablesList:y,onBlur:h,onlyVariables:g,placeHolder:T,showAddButton:f=!0,showHelp:V,errorMessage:m,maxCharLimit:k,noMaxCharCheck:C,labelText:O,labelElement:S,isRequired:q=!1,hintText:E,onEnterPress:P,pickerType:R=d.PickerType.FLOATER,portalElement:F}=r;const A=t.useRef(),w=t.useRef(!0),I=t.useRef(null),[L,M]=t.useState(!1),[B]=t.useState(l.v4()),[D,N]=t.useState(),[$,z]=t.useState(x),[H,_]=t.useState(!1),[K,W]=t.useState(!1),[G,J]=t.useState(0);return t.useEffect((()=>{if(D&&D.actualValue)if(p){if(z((e=>{return{actualValue:(a=e.actualValue,t=D.actualValue,r=G,a.slice(0,r)+t+a.slice(r)),variableType:"string"};var a,t,r})),I.current){J(I.current.selectionStart);const e=G+D.actualValue.length+2;I.current.setSelectionRange(e,e),J(e)}}else z((e=>({actualValue:D.actualValue,variableType:D.variableType,needsFetching:D.needsFetching})))}),[D]),t.useEffect((()=>{w.current?w.current=!1:j($)}),[$]),e.jsxs(e.Fragment,{children:[e.jsxs(b,Object.assign({isVar:/^{{.*}}$/.test($.actualValue),onKeyDown:e=>{console.log("key",e.key),"Enter"===e.key&&(null==P||P($.actualValue))}},{children:[e.jsx(c.Input,{isRequired:q,hintText:E,type:null!=i?i:"text",id:B,ref:I,skipFocus:!0,isActive:L,value:$.actualValue,validate:e=>[!0,""],errorMessage:m,noMaxCharCheck:C,maxCharLimit:k,labelText:O,labelElement:S,placeholder:T||"Add a value",onClick:e=>{I.current&&J(I.current.selectionStart)},onChangeText:(e,a)=>{if(I.current&&J(I.current.selectionStart),g){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||z({actualValue:"",variableType:"string"})}else z(p?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{M(!0),W(!0)},onBlur:e=>{var a,t,r,l,i,s,n;console.log("ee",null===(a=e.relatedTarget)||void 0===a?void 0:a.id),null==h||h(e,$),"addVar"===(null===(t=e.relatedTarget)||void 0===t?void 0:t.id)||"variable-picker-v3"===(null===(r=e.relatedTarget)||void 0===r?void 0:r.id)||(null===(i=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===i?void 0:i.includes("accordion"))||"back-btn-v3"===(null===(s=e.relatedTarget)||void 0===s?void 0:s.id)?(I.current&&I.current.focus(),M(!0)):"search-bar-v3-picker"===(null===(n=e.relatedTarget)||void 0===n?void 0:n.id)?M(!0):(M(!1),_(!1),W(!1))}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[$.actualValue&&V&&e.jsx("div",Object.assign({style:{marginTop:4}},{children:e.jsx(u.BodyCaption,{children:`This value is of type ${$.variableType}`})})),f&&K&&e.jsx("div",Object.assign({style:{marginTop:m||E?"-24px":"0px"}},{children:e.jsx(s.AddVariableStyled,Object.assign({ref:A,id:"addVar",onClick:()=>{_(!H)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(a.default,{color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]}))]})),H&&e.jsx(e.Fragment,{children:R===d.PickerType.EMBEDDED?e.jsx(v.CustomPortal,Object.assign({zIndex:101,element:null!=F?F:document.body},{children:e.jsx(o.VariablePicker,{onClose:()=>_(!1),type:d.PickerType.FLOATER,data:y,onSelect:e=>{N(e),_(!1)}})})):e.jsx("div",Object.assign({style:{zIndex:101,position:"relative"}},{children:e.jsx(n.Floater,Object.assign({refElement:A},{children:e.jsx("div",Object.assign({style:{height:500}},{children:e.jsx(o.VariablePicker,{onClose:()=>_(!1),type:d.PickerType.FLOATER,data:y,onSelect:e=>{N(e),_(!1)}})}))}))}))})]})};

package/dist/cjs/components/input-with-vars/customPortal.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface CustomPortalProps {
+    children: React.ReactNode;
+    element: HTMLElement;
+    zIndex?: number;
+}
+export declare const CustomPortal: (props: CustomPortalProps) => import("react").ReactPortal;
+export {};

package/dist/cjs/components/input-with-vars/customPortal.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(require("react-dom"));exports.CustomPortal=t=>{var i;return r.default.createPortal(e.jsx("div",Object.assign({style:{zIndex:null!==(i=t.zIndex)&&void 0!==i?i:2,position:"absolute",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(0, 0, 0, 0.7)",display:"flex",alignItems:"center",justifyContent:"flex-end",borderRadius:4,border:"1px solid #9E9E9E"}},{children:e.jsx("div",Object.assign({style:{height:"100%",display:"flex",flexDirection:"column"}},{children:t.children}))})),t.element)};

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

@@ -11,4 +11,4 @@
 	gap: 12;
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
-`;exports.default=r=>{let{isWhatsappCarousel:a,onSelect:u}=r;var c,p,x,b;const{isError:g,selectedCarouselIndex:j,setSelectedCarouselIndex:f,setErrorIndexes:m,template:v}=i.useTemplateModalContext(),[y,h]=t.useState(a?"Next":"Select template");return t.useEffect((()=>{a&&-1===j?h("Next"):a&&null!=j&&j>-1&&h("Save & Select Template")}),[j]),e.jsxs(d,Object.assign({justifyContent:a&&(null===(p=null===(c=null==v?void 0:v.mapping)||void 0===c?void 0:c.body)||void 0===p?void 0:p.length)?"space-between":"end"},{children:[a&&null!=j&&j>=-1&&(null===(b=null===(x=null==v?void 0:v.mapping)||void 0===x?void 0:x.body)||void 0===b?void 0:b.length)&&e.jsx(n.TitleRegular,Object.assign({color:l.COLORS.text.secondary},{children:`Step ${-1===j?1:2}/2`})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row"}},{children:[g&&e.jsx(s.Badge,{errorText:"Some inputs are missing or incorrect. Please check"}),e.jsx(o.Button,{id:"select-template-btn",buttonText:y,size:a?"small":"large",onClick:function(){a&&-1===j&&f?f(0):(null==m||m([]),u())}})]}))]}))};
+`;exports.default=r=>{let{isWhatsappCarousel:a,onSelect:u}=r;var c,p,x,b;const{isError:g,selectedCarouselIndex:j,setSelectedCarouselIndex:f,setErrorIndexes:m,template:v}=i.useTemplateModalContext(),[y,h]=t.useState(a?"Next":"Select template");return t.useEffect((()=>{a&&-1===j?h("Next"):a&&null!=j&&j>-1&&h("Save & Select Template")}),[j]),e.jsxs(d,Object.assign({justifyContent:a&&(null===(p=null===(c=null==v?void 0:v.mapping)||void 0===c?void 0:c.body)||void 0===p?void 0:p.length)?"space-between":"end"},{children:[a&&null!=j&&j>=-1&&!!(null===(b=null===(x=null==v?void 0:v.mapping)||void 0===x?void 0:x.body)||void 0===b?void 0:b.length)&&e.jsx(n.TitleRegular,Object.assign({color:l.COLORS.text.secondary},{children:`Step ${-1===j?1:2}/2`})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row"}},{children:[g&&e.jsx(s.Badge,{errorText:"Some inputs are missing or incorrect. Please check"}),e.jsx(o.Button,{id:"select-template-btn",buttonText:y,size:a?"small":"large",onClick:function(){a&&-1===j&&f?f(0):(null==m||m([]),u())}})]}))]}))};

package/dist/esm/components/input-with-vars/InputWithVariables.d.ts

@@ -2,6 +2,7 @@
 import { Variable } from '../add-variableV2/AddVariableV2';
 import { SelectedVariable } from '../add-variableV2/types';
 import { InputTypeI } from '../input';
+import { PickerType } from '../variable-picker-v3/model';
 export interface InputWithVariablesProps {
     type?: InputTypeI;
     variablesList: any;
@@ -14,7 +15,6 @@ export interface InputWithVariablesProps {
     placeHolder?: string;
     showAddButton?: boolean;
     errorMessage?: string;
-    showSideModal?: boolean;
     noMaxCharCheck?: boolean;
     maxCharLimit?: number;
     labelText?: string;
@@ -22,5 +22,7 @@ export interface InputWithVariablesProps {
     isRequired?: boolean;
     hintText?: string;
     onEnterPress?: (input: string) => void;
+    pickerType?: PickerType;
+    portalElement?: HTMLElement;
 }
 export declare const InputWithVariables: React.FC<InputWithVariablesProps>;

package/dist/esm/components/input-with-vars/InputWithVariables.js

@@ -1,7 +1,7 @@
-import{jsx as e,Fragment as a,jsxs as l}from"react/jsx-runtime";import r from"../../assets/icons/PlusIcon.js";import{useRef as i,useState as t,useEffect as n}from"react";import o from"styled-components";import{v4 as s}from"uuid";import{COLORS as c}from"../../constants/Theme.js";import{AddVariableStyled as d}from"../add-variableV2/AddVariableBox.styled.js";import{Floater as u}from"../floater/floater.js";import{Input as v}from"../input/Input.js";import{BodyCaption as p}from"../TypographyStyle.js";import{VariablePicker as m}from"../variable-picker-v3/VariablePicker.js";import{PickerType as b}from"../variable-picker-v3/model.js";const h=o=>{let{type:c,allowMix:h,onChange:y,prevVariable:f,variablesList:T,onBlur:V,onlyVariables:j,placeHolder:x,showAddButton:k=!0,showHelp:C,errorMessage:O,showSideModal:w,maxCharLimit:S,noMaxCharCheck:A,labelText:E,labelElement:M,isRequired:F=!1,hintText:R,onEnterPress:B}=o;const I=i(),L=i(!0),N=i(null),[P,$]=t(!1),[q]=t(s()),[D,H]=t(),[z,K]=t(f),[G,J]=t(!1),[Q,U]=t(!1),[W,X]=t(0);return n((()=>{if(D&&D.actualValue)if(h){if(K((e=>{return{actualValue:(a=e.actualValue,l=D.actualValue,r=W,a.slice(0,r)+l+a.slice(r)),variableType:"string"};var a,l,r})),N.current){X(N.current.selectionStart);const e=W+D.actualValue.length+2;N.current.setSelectionRange(e,e),X(e)}}else K((e=>({actualValue:D.actualValue,variableType:D.variableType,needsFetching:D.needsFetching})))}),[D]),n((()=>{L.current?L.current=!1:y(z)}),[z]),e(a,{children:l(g,Object.assign({isVar:/^{{.*}}$/.test(z.actualValue),onKeyDown:e=>{console.log("key",e.key),"Enter"===e.key&&(null==B||B(z.actualValue))}},{children:[e(v,{isRequired:F,hintText:R,type:null!=c?c:"text",id:q,ref:N,skipFocus:!0,isActive:P,value:z.actualValue,validate:e=>[!0,""],errorMessage:O,noMaxCharCheck:A,maxCharLimit:S,labelText:E,labelElement:M,placeholder:x||"Add a value",onClick:e=>{N.current&&X(N.current.selectionStart)},onChangeText:(e,a)=>{if(N.current&&X(N.current.selectionStart),j){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||K({actualValue:"",variableType:"string"})}else K(h?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{$(!0),U(!0)},onBlur:e=>{var a,l,r,i,t,n,o;console.log("ee",null===(a=e.relatedTarget)||void 0===a?void 0:a.id),null==V||V(e,z),"addVar"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||"variable-picker-v3"===(null===(r=e.relatedTarget)||void 0===r?void 0:r.id)||(null===(t=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===t?void 0:t.includes("accordion"))||"back-btn-v3"===(null===(n=e.relatedTarget)||void 0===n?void 0:n.id)?(N.current&&N.current.focus(),$(!0)):"search-bar-v3-picker"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.id)?$(!0):($(!1),J(!1),U(!1))}}),l("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[z.actualValue&&C&&e("div",Object.assign({style:{marginTop:4}},{children:e(p,{children:`This value is of type ${z.variableType}`})})),k&&Q&&e("div",Object.assign({style:{marginTop:O||R?"-24px":"0px"}},{children:e(d,Object.assign({ref:I,id:"addVar",onClick:()=>{J(!G)}},{children:l("div",Object.assign({className:"add"},{children:[e(r,{color:"white"}),e("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),G&&e("div",Object.assign({style:{zIndex:101,position:"relative"}},{children:e(u,Object.assign({refElement:I},{children:e("div",Object.assign({style:{height:500}},{children:e(m,{onClose:()=>J(!1),type:b.FLOATER,data:T,onSelect:e=>{H(e),J(!1)}})}))}))}))]}))})},g=o.div`
+import{jsxs as e,Fragment as a,jsx as l}from"react/jsx-runtime";import r from"../../assets/icons/PlusIcon.js";import{useRef as t,useState as i,useEffect as n}from"react";import o from"styled-components";import{v4 as s}from"uuid";import{COLORS as c}from"../../constants/Theme.js";import{AddVariableStyled as d}from"../add-variableV2/AddVariableBox.styled.js";import{Floater as u}from"../floater/floater.js";import{Input as p}from"../input/Input.js";import{BodyCaption as v}from"../TypographyStyle.js";import{VariablePicker as m}from"../variable-picker-v3/VariablePicker.js";import{PickerType as b}from"../variable-picker-v3/model.js";import{CustomPortal as h}from"./customPortal.js";const g=o=>{let{type:c,allowMix:g,onChange:f,prevVariable:T,variablesList:V,onBlur:j,onlyVariables:x,placeHolder:k,showAddButton:C=!0,showHelp:O,errorMessage:E,maxCharLimit:A,noMaxCharCheck:w,labelText:F,labelElement:R,isRequired:S=!1,hintText:L,onEnterPress:M,pickerType:B=b.FLOATER,portalElement:D}=o;const I=t(),P=t(!0),N=t(null),[$,q]=i(!1),[z]=i(s()),[H,K]=i(),[G,J]=i(T),[Q,U]=i(!1),[W,X]=i(!1),[Y,Z]=i(0);return n((()=>{if(H&&H.actualValue)if(g){if(J((e=>{return{actualValue:(a=e.actualValue,l=H.actualValue,r=Y,a.slice(0,r)+l+a.slice(r)),variableType:"string"};var a,l,r})),N.current){Z(N.current.selectionStart);const e=Y+H.actualValue.length+2;N.current.setSelectionRange(e,e),Z(e)}}else J((e=>({actualValue:H.actualValue,variableType:H.variableType,needsFetching:H.needsFetching})))}),[H]),n((()=>{P.current?P.current=!1:f(G)}),[G]),e(a,{children:[e(y,Object.assign({isVar:/^{{.*}}$/.test(G.actualValue),onKeyDown:e=>{console.log("key",e.key),"Enter"===e.key&&(null==M||M(G.actualValue))}},{children:[l(p,{isRequired:S,hintText:L,type:null!=c?c:"text",id:z,ref:N,skipFocus:!0,isActive:$,value:G.actualValue,validate:e=>[!0,""],errorMessage:E,noMaxCharCheck:w,maxCharLimit:A,labelText:F,labelElement:R,placeholder:k||"Add a value",onClick:e=>{N.current&&Z(N.current.selectionStart)},onChangeText:(e,a)=>{if(N.current&&Z(N.current.selectionStart),x){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||J({actualValue:"",variableType:"string"})}else J(g?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{q(!0),X(!0)},onBlur:e=>{var a,l,r,t,i,n,o;console.log("ee",null===(a=e.relatedTarget)||void 0===a?void 0:a.id),null==j||j(e,G),"addVar"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||"variable-picker-v3"===(null===(r=e.relatedTarget)||void 0===r?void 0:r.id)||(null===(i=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===i?void 0:i.includes("accordion"))||"back-btn-v3"===(null===(n=e.relatedTarget)||void 0===n?void 0:n.id)?(N.current&&N.current.focus(),q(!0)):"search-bar-v3-picker"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.id)?q(!0):(q(!1),U(!1),X(!1))}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[G.actualValue&&O&&l("div",Object.assign({style:{marginTop:4}},{children:l(v,{children:`This value is of type ${G.variableType}`})})),C&&W&&l("div",Object.assign({style:{marginTop:E||L?"-24px":"0px"}},{children:l(d,Object.assign({ref:I,id:"addVar",onClick:()=>{U(!Q)}},{children:e("div",Object.assign({className:"add"},{children:[l(r,{color:"white"}),l("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]}))]})),Q&&l(a,{children:B===b.EMBEDDED?l(h,Object.assign({zIndex:101,element:null!=D?D:document.body},{children:l(m,{onClose:()=>U(!1),type:b.FLOATER,data:V,onSelect:e=>{K(e),U(!1)}})})):l("div",Object.assign({style:{zIndex:101,position:"relative"}},{children:l(u,Object.assign({refElement:I},{children:l("div",Object.assign({style:{height:500}},{children:l(m,{onClose:()=>U(!1),type:b.FLOATER,data:V,onSelect:e=>{K(e),U(!1)}})}))}))}))})]})},y=o.div`
 	position: relative;
 	margin-bottom: 16px;
 	input {
 		color: ${e=>e.isVar?c.stroke.brand:"black"};
 	}
-`;export{h as InputWithVariables};
+`;export{g as InputWithVariables};

package/dist/esm/components/input-with-vars/customPortal.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface CustomPortalProps {
+    children: React.ReactNode;
+    element: HTMLElement;
+    zIndex?: number;
+}
+export declare const CustomPortal: (props: CustomPortalProps) => import("react").ReactPortal;
+export {};

package/dist/esm/components/input-with-vars/customPortal.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import t from"react-dom";const r=r=>{var o;return t.createPortal(e("div",Object.assign({style:{zIndex:null!==(o=r.zIndex)&&void 0!==o?o:2,position:"absolute",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(0, 0, 0, 0.7)",display:"flex",alignItems:"center",justifyContent:"flex-end",borderRadius:4,border:"1px solid #9E9E9E"}},{children:e("div",Object.assign({style:{height:"100%",display:"flex",flexDirection:"column"}},{children:r.children}))})),r.element)};export{r as CustomPortal};

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

@@ -11,4 +11,4 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useEffect
 	gap: 12;
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
-`,c=n=>{let{isWhatsappCarousel:c,onSelect:m}=n;var u,x,b,f;const{isError:g,selectedCarouselIndex:v,setSelectedCarouselIndex:y,setErrorIndexes:h,template:j}=a(),[S,C]=o(c?"Next":"Select template");return r((()=>{c&&-1===v?C("Next"):c&&null!=v&&v>-1&&C("Save & Select Template")}),[v]),e(p,Object.assign({justifyContent:c&&(null===(x=null===(u=null==j?void 0:j.mapping)||void 0===u?void 0:u.body)||void 0===x?void 0:x.length)?"space-between":"end"},{children:[c&&null!=v&&v>=-1&&(null===(f=null===(b=null==j?void 0:j.mapping)||void 0===b?void 0:b.body)||void 0===f?void 0:f.length)&&t(i,Object.assign({color:s.text.secondary},{children:`Step ${-1===v?1:2}/2`})),e("div",Object.assign({style:{display:"flex",flexDirection:"row"}},{children:[g&&t(d,{errorText:"Some inputs are missing or incorrect. Please check"}),t(l,{id:"select-template-btn",buttonText:S,size:c?"small":"large",onClick:function(){c&&-1===v&&y?y(0):(null==h||h([]),m())}})]}))]}))};export{c as default};
+`,c=n=>{let{isWhatsappCarousel:c,onSelect:m}=n;var u,x,b,f;const{isError:g,selectedCarouselIndex:v,setSelectedCarouselIndex:y,setErrorIndexes:h,template:j}=a(),[S,C]=o(c?"Next":"Select template");return r((()=>{c&&-1===v?C("Next"):c&&null!=v&&v>-1&&C("Save & Select Template")}),[v]),e(p,Object.assign({justifyContent:c&&(null===(x=null===(u=null==j?void 0:j.mapping)||void 0===u?void 0:u.body)||void 0===x?void 0:x.length)?"space-between":"end"},{children:[c&&null!=v&&v>=-1&&!!(null===(f=null===(b=null==j?void 0:j.mapping)||void 0===b?void 0:b.body)||void 0===f?void 0:f.length)&&t(i,Object.assign({color:s.text.secondary},{children:`Step ${-1===v?1:2}/2`})),e("div",Object.assign({style:{display:"flex",flexDirection:"row"}},{children:[g&&t(d,{errorText:"Some inputs are missing or incorrect. Please check"}),t(l,{id:"select-template-btn",buttonText:S,size:c?"small":"large",onClick:function(){c&&-1===v&&y?y(0):(null==h||h([]),m())}})]}))]}))};export{c as default};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.533-beta.4",
+	"version": "0.0.533-beta.5",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",