@bikdotai/bik-component-library 0.0.437 → 0.0.438

package/dist/cjs/components/input/Input.d.ts

@@ -17,6 +17,7 @@ export interface InputProps {
         icon: React.FC;
         callback?: () => void;
     };
+    labelElement?: React.ReactNode;
     labelText?: string;
     maxCharLimit?: number;
     isRequired?: boolean;
@@ -39,6 +40,7 @@ export interface InputProps {
     reset?: boolean;
     onBlur?: (e: any) => void;
     onFocus?: (e: any) => void;
+    onClick?: (e: any) => void;
     isActive?: boolean;
     id?: string;
     onReferenceInit?: (element: HTMLInputElement | HTMLTextAreaElement) => void;

package/dist/cjs/components/input/Input.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../button/Button.js"),i=require("./Input-helper.js"),r=require("../TypographyStyle.js"),s=require("../../assets/icons/errorInfo.svg.js"),l=require("./context/InputStyleProvider.js"),a=require("./Input.styled.js");const o=t.forwardRef(((o,u)=>{var c,d,v,h,p;const{placeholder:x,leftIcon:f,rightIcon:g,labelText:j,maxCharLimit:y,isRequired:b,hintText:I,type:C,state:m,validate:w,variant:E,button:S,suffixText:O,prefixText:k,onChangeText:q,value:F,noErrorHint:H,reset:L,rangeValidation:M,noKeyDownChange:T,version:B,noMaxCharCheck:R}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},o),z=null==f?void 0:f.icon,A=null==g?void 0:g.icon,[D,K]=t.useState(!1),[P,W]=t.useState(!1),[_,N]=t.useState(),V="small"===E?"18px":"22px",G=t.useContext(l.InputStyleContext),[J,Q]=t.useState(),U=t.useRef(null),X=null!=u?u:U;t.useEffect((()=>{Q(F)}),[F]),t.useEffect((()=>{var e;X.current&&(null===(e=o.onReferenceInit)||void 0===e||e.call(o,X.current))}),[X]),t.useEffect((()=>{const e=X.current;if(e&&["phonenumber","zip","number"].includes(C))return e.addEventListener("wheel",ee,{passive:!1}),()=>{e.removeEventListener("wheel",ee)}}),[]),t.useEffect((()=>{L&&Q("")}),[L]),t.useEffect((()=>{var e;W(!!o.isActive),o.isActive&&(null===(e=X.current)||void 0===e||e.focus())}),[o.isActive]),t.useEffect((()=>{N(o.errorMessage)}),[o.errorMessage]),t.useEffect((()=>{var e;K(!1),("invalid"===o.state||_)&&K(!0),"active"===o.state&&(null===(e=X.current)||void 0===e||e.focus())}),[o.state,_]),t.useEffect((()=>{K(!!_)}),[_]);const Y=function(e){if(i.isFunction(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];e(...n)}},Z=()=>"zip"===C?6:60,$=e=>{const t=0!==y?y:Z();if(T||q(F||"",e),R)return;const n=e.target.value;![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},ee=e=>{e.preventDefault()},te=e=>{let t=e.target.value;const n=0!==y?y+1:Z();!R&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),q(t,e),o.textControl||Q(t);const r=w||i.validateInput;if(!r||!i.isFunction(r))return;const[s,l]=r(t,C,M);K(!s),N(o.errorMessage?o.errorMessage:l)},ne=e=>{var t;o.skipFocus||W(!0),Y(null===(t=o.onFocus)||void 0===t?void 0:t.call(o,e))},ie=e=>{var t;o.skipFocus||W(!1),Y(null===(t=o.onBlur)||void 0===t?void 0:t.call(o,e))},re=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==C&&e.jsx("input",{"data-test":o["data-test"],id:o.id,style:null!==(t=null==G?void 0:G.input)&&void 0!==t?t:{},ref:X,type:["phonenumber","zip","number"].includes(C)?"number":C,value:J,onFocus:e=>ne(e),onBlur:e=>ie(e),placeholder:x||"Enter here",onChange:te,onKeyDown:e=>$(e)}),"multiline"===C&&e.jsx("textarea",{"data-test":o["data-test"],value:J,ref:X,onFocus:e=>ne(e),onBlur:e=>ie(e),placeholder:x||"Enter here",onChange:te,onKeyDown:e=>$(e),maxLength:y>0?y:void 0})]})};return e.jsxs(a.RootContainer,Object.assign({width:o.width,height:o.height,state:m,type:C,style:null!==(c=null==G?void 0:G.RootContainer)&&void 0!==c?c:{}},{children:[!H&&(!!I||!!_)&&e.jsxs(a.InputFooter,Object.assign({invalid:!!_},{children:[!!_&&e.jsx(s.default,{width:16,height:16}),_||I]})),e.jsxs(a.InputWrapper,Object.assign({variant:E,state:m,width:o.width,isActive:"active"===m||P,isInvalid:D,style:null!==(d=null==G?void 0:G.InputWrapper)&&void 0!==d?d:{},version:B,height:o.height},{children:[!!z&&e.jsx(a.IconHolder,Object.assign({variant:E,iconSize:V,onClick:()=>Y(null==f?void 0:f.callback),isLeft:!0,style:null!==(v=null==G?void 0:G.IconHolder)&&void 0!==v?v:{}},{children:e.jsx(z,{})})),!!k&&e.jsx(a.PrefixHolder,Object.assign({variant:E},{children:k})),"default"===E&&e.jsx(a.InputContainer,Object.assign({height:o.height,type:o.type},{children:re()})),"small"===E&&e.jsx(a.InputContainerSmall,Object.assign({height:o.height,type:o.type},{children:re()})),!!A&&e.jsx(a.IconHolder,Object.assign({variant:E,iconSize:V,onClick:()=>Y(null==g?void 0:g.callback),isLeft:!1},{children:e.jsx(A,{})})),!!O&&e.jsx(a.SuffixHolder,Object.assign({variant:E},{children:O})),S&&S.text&&e.jsx(n.Button,{buttonText:S.text,onClick:()=>Y(null==S?void 0:S.onClick)})]})),(!!j||!!y)&&e.jsxs(a.InputHeader,Object.assign({invalid:D},{children:[e.jsxs(r.BodySecondary,{children:[j,b?e.jsx("span",{children:"*"}):""]}),y>0&&e.jsxs(a.MaxCharStyle,{children:[null!==(p=null===(h=o.value)||void 0===h?void 0:h.length)&&void 0!==p?p:0,"/",y]})]}))]}))}));o.displayName="Input",exports.Input=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../button/Button.js"),i=require("./Input-helper.js"),r=require("../TypographyStyle.js"),l=require("../../assets/icons/errorInfo.svg.js"),s=require("./context/InputStyleProvider.js"),a=require("./Input.styled.js");const o=t.forwardRef(((o,u)=>{var c,d,v,h,p;const{placeholder:x,leftIcon:f,rightIcon:g,labelText:j,maxCharLimit:y,isRequired:b,hintText:C,type:I,state:m,validate:E,variant:k,button:w,suffixText:S,prefixText:O,onChangeText:q,value:F,noErrorHint:H,reset:L,rangeValidation:M,noKeyDownChange:T,version:B,noMaxCharCheck:R,labelElement:z}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},o),A=null==f?void 0:f.icon,D=null==g?void 0:g.icon,[K,P]=t.useState(!1),[W,_]=t.useState(!1),[N,V]=t.useState(),G="small"===k?"18px":"22px",J=t.useContext(s.InputStyleContext),[Q,U]=t.useState(),X=t.useRef(null),Y=null!=u?u:X;t.useEffect((()=>{U(F)}),[F]),t.useEffect((()=>{var e;Y.current&&(null===(e=o.onReferenceInit)||void 0===e||e.call(o,Y.current))}),[Y]),t.useEffect((()=>{const e=Y.current;if(e&&["phonenumber","zip","number"].includes(I))return e.addEventListener("wheel",te,{passive:!1}),()=>{e.removeEventListener("wheel",te)}}),[]),t.useEffect((()=>{L&&U("")}),[L]),t.useEffect((()=>{var e;_(!!o.isActive),o.isActive&&(null===(e=Y.current)||void 0===e||e.focus())}),[o.isActive]),t.useEffect((()=>{V(o.errorMessage)}),[o.errorMessage]),t.useEffect((()=>{var e;P(!1),("invalid"===o.state||N)&&P(!0),"active"===o.state&&(null===(e=Y.current)||void 0===e||e.focus())}),[o.state,N]),t.useEffect((()=>{P(!!N)}),[N]);const Z=function(e){if(i.isFunction(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];e(...n)}},$=()=>"zip"===I?6:60,ee=e=>{const t=0!==y?y:$();if(T||q(F||"",e),R)return;const n=e.target.value;![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},te=e=>{e.preventDefault()},ne=e=>{let t=e.target.value;const n=0!==y?y+1:$();!R&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),q(t,e),o.textControl||U(t);const r=E||i.validateInput;if(!r||!i.isFunction(r))return;const[l,s]=r(t,I,M);P(!l),V(o.errorMessage?o.errorMessage:s)},ie=e=>{var t;o.skipFocus||_(!0),Z(null===(t=o.onFocus)||void 0===t?void 0:t.call(o,e))},re=e=>{var t;o.skipFocus||_(!1),Z(null===(t=o.onBlur)||void 0===t?void 0:t.call(o,e))},le=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==I&&e.jsx("input",{"data-test":o["data-test"],id:o.id,style:null!==(t=null==J?void 0:J.input)&&void 0!==t?t:{},ref:Y,type:["phonenumber","zip","number"].includes(I)?"number":I,value:Q,onFocus:e=>ie(e),onBlur:e=>re(e),placeholder:x||"Enter here",onChange:ne,onClick:e=>Z(o.onClick),onKeyDown:e=>ee(e)}),"multiline"===I&&e.jsx("textarea",{"data-test":o["data-test"],value:Q,ref:Y,onFocus:e=>ie(e),onBlur:e=>re(e),onClick:e=>Z(o.onClick),placeholder:x||"Enter here",onChange:ne,onKeyDown:e=>ee(e),maxLength:y>0?y:void 0})]})};return e.jsxs(a.RootContainer,Object.assign({width:o.width,height:o.height,state:m,type:I,style:null!==(c=null==J?void 0:J.RootContainer)&&void 0!==c?c:{}},{children:[!H&&(!!C||!!N)&&e.jsxs(a.InputFooter,Object.assign({invalid:!!N},{children:[!!N&&e.jsx(l.default,{width:16,height:16}),N||C]})),e.jsxs(a.InputWrapper,Object.assign({variant:k,state:m,width:o.width,isActive:"active"===m||W,isInvalid:K,style:null!==(d=null==J?void 0:J.InputWrapper)&&void 0!==d?d:{},version:B,height:o.height},{children:[!!A&&e.jsx(a.IconHolder,Object.assign({variant:k,iconSize:G,onClick:()=>Z(null==f?void 0:f.callback),isLeft:!0,style:null!==(v=null==J?void 0:J.IconHolder)&&void 0!==v?v:{}},{children:e.jsx(A,{})})),!!O&&e.jsx(a.PrefixHolder,Object.assign({variant:k},{children:O})),"default"===k&&e.jsx(a.InputContainer,Object.assign({height:o.height,type:o.type},{children:le()})),"small"===k&&e.jsx(a.InputContainerSmall,Object.assign({height:o.height,type:o.type},{children:le()})),!!D&&e.jsx(a.IconHolder,Object.assign({variant:k,iconSize:G,onClick:()=>Z(null==g?void 0:g.callback),isLeft:!1},{children:e.jsx(D,{})})),!!S&&e.jsx(a.SuffixHolder,Object.assign({variant:k},{children:S})),w&&w.text&&e.jsx(n.Button,{buttonText:w.text,onClick:()=>Z(null==w?void 0:w.onClick)})]})),(!!j||!!y)&&e.jsxs(a.InputHeader,Object.assign({invalid:K},{children:[z&&z,e.jsxs(r.BodySecondary,{children:[j,b?e.jsx("span",{children:"*"}):""]}),y>0&&e.jsxs(a.MaxCharStyle,{children:[null!==(p=null===(h=o.value)||void 0===h?void 0:h.length)&&void 0!==p?p:0,"/",y]})]}))]}))}));o.displayName="Input",exports.Input=o;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Variable } from '../add-variableV2/AddVariableV2';
 import { SelectedVariable } from '../add-variableV2/types';
-interface InputWithVariablesProps {
+export interface InputWithVariablesProps {
     variablesList: any;
     onChange: (val: SelectedVariable) => void;
     onBlur?: (e: Event, val?: SelectedVariable | Variable) => void;
@@ -16,6 +16,8 @@ interface InputWithVariablesProps {
     errorMessage?: string;
     showSideModal?: boolean;
     noMaxCharCheck?: boolean;
+    maxCharLimit?: number;
+    labelText?: string;
+    labelElement?: React.ReactNode;
 }
 export declare const InputWithVariables: React.FC<InputWithVariablesProps>;
-export {};

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

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../assets/icons/PlusIcon.js"),l=require("react"),r=require("styled-components"),i=require("uuid"),t=require("../../constants/Theme.js"),d=require("../add-variableV2/AddVariableV2SideModal.js"),s=require("../add-variableV2/AddVariableV2.js"),u=require("../add-variableV2/AddVariableBox.styled.js"),o=require("../input/Input.js"),n=require("../TypographyStyle.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const v=c(r).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../assets/icons/PlusIcon.js"),l=require("react"),r=require("styled-components"),t=require("uuid"),i=require("../../constants/Theme.js"),d=require("../add-variableV2/AddVariableV2SideModal.js"),s=require("../add-variableV2/AddVariableV2.js"),u=require("../add-variableV2/AddVariableBox.styled.js"),n=require("../input/Input.js"),o=require("../TypographyStyle.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const v=c(r).default.div`
 	margin-bottom: 16px;
 	input {
-		color: ${e=>e.isVar?t.COLORS.stroke.brand:"black"};
+		color: ${e=>e.isVar?i.COLORS.stroke.brand:"black"};
 	}
-`;exports.InputWithVariables=r=>{let{addVarBoxRight:t,allowMix:c,onChange:b,prevVariable:g,variablesList:V,onBlur:h,onlyVariables:p,placeHolder:x,showAddButton:j=!0,showHelp:T,showSideVariablePanel:y,errorMessage:f,showSideModal:m,noMaxCharCheck:S}=r;const q=l.useRef(null),[C,w]=l.useState(!1),[A]=l.useState(i.v4()),[B,O]=l.useState(),[M,k]=l.useState(g),[I,N]=l.useState(!1),[L,E]=l.useState(!1),[F,R]=l.useState(f||"");return l.useEffect((()=>{B&&B.actualValue&&k(c?e=>({actualValue:e.actualValue+B.actualValue,variableType:"string"}):e=>({actualValue:B.actualValue,variableType:B.variableType,needsFetching:B.needsFetching}))}),[B]),l.useEffect((()=>{b(M)}),[M]),e.jsxs(e.Fragment,{children:[e.jsxs(v,Object.assign({isVar:/^{{.*}}$/.test(M.actualValue)},{children:[e.jsx(o.Input,{id:A,ref:q,skipFocus:!0,textControl:!0,isActive:C,value:M.actualValue,validate:e=>[!0,""],errorMessage:F,placeholder:x||"Add a value",onChangeText:(e,a)=>{if(R(""),p){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||k({actualValue:"",variableType:"string"})}else k(c?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{w(!0),E(!0),document.getElementById("varList")&&!I&&N(!0)},onBlur:e=>{var a,l,r,i,t,d;null==h||h(e,M),"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(i=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===i?void 0:i.includes("exlualr0"))||(null===(d=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?(q.current&&q.current.focus(),w(!0)):document.getElementById("varList")?w(!0):(w(!1),N(!1),E(!1))},noMaxCharCheck:S}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[M.actualValue&&T&&e.jsx("div",Object.assign({style:{marginTop:4}},{children:e.jsx(n.BodyCaption,{children:`This value is of type ${M.variableType}`})})),j&&L&&e.jsx("div",Object.assign({style:{marginTop:f?"-24px":"0px"}},{children:e.jsx(u.AddVariableStyled,Object.assign({right:t,id:"addVar",onClick:()=>{N(!I)}},{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"}))]}))}))}))]})),!y&&I&&e.jsx(s.AddVariableV2,{data:V,showVariable:!0,setShowVariable:()=>{N(!1)},variableValue:B,setVariableValue:O,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,t,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(t=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?q.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==A&&(N(!1),E(!1),w(!1)):(N(!1),E(!1),w(!1))}})]})),y&&I&&e.jsx(d.AddVariableV2SideModal,{zIndex:2e3,data:null!=V?V:[],showVariable:I,setShowVariable:()=>{N(!1)},placeholder:"Add a variable",customTrigger:e=>{O({actualValue:e.actualValue,variableType:"string"}),k(e)},onSearchBlur:e=>{var a,l,r,i,t,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(t=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?q.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==A&&(N(!1),E(!1),w(!1)):(N(!1),E(!1),w(!1))}})]})};
+`;exports.InputWithVariables=r=>{let{addVarBoxRight:i,allowMix:c,onChange:b,prevVariable:g,variablesList:h,onBlur:V,onlyVariables:p,placeHolder:x,showAddButton:T=!0,showHelp:j,showSideVariablePanel:y,errorMessage:m,showSideModal:f,maxCharLimit:S,noMaxCharCheck:C,labelText:q,labelElement:w}=r;const A=l.useRef(null),[B,O]=l.useState(!1),[k]=l.useState(t.v4()),[L,M]=l.useState(),[E,I]=l.useState(g),[N,F]=l.useState(!1),[R,P]=l.useState(!1),[Z,$]=l.useState(m||""),[z,H]=l.useState(0);return l.useEffect((()=>{if(L&&L.actualValue)if(c){if(I((e=>{return{actualValue:(a=e.actualValue,l=" "+L.actualValue+" ",r=z,a.slice(0,r)+l+a.slice(r)),variableType:"string"};var a,l,r})),A.current){H(A.current.selectionStart);const e=z+L.actualValue.length+2;A.current.setSelectionRange(e,e),H(e)}}else I((e=>({actualValue:L.actualValue,variableType:L.variableType,needsFetching:L.needsFetching})))}),[L]),l.useEffect((()=>{b(E)}),[E]),e.jsxs(e.Fragment,{children:[e.jsxs(v,Object.assign({isVar:/^{{.*}}$/.test(E.actualValue)},{children:[e.jsx(n.Input,{id:k,ref:A,skipFocus:!0,isActive:B,value:E.actualValue,validate:e=>[!0,""],errorMessage:Z,noMaxCharCheck:C,maxCharLimit:S,labelText:q,labelElement:w,placeholder:x||"Add a value",onClick:e=>{A.current&&H(A.current.selectionStart)},onChangeText:(e,a)=>{if(A.current&&H(A.current.selectionStart),$(""),p){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||I({actualValue:"",variableType:"string"})}else I(c?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{O(!0),P(!0),document.getElementById("varList")&&!N&&F(!0)},onBlur:e=>{var a,l,r,t,i,d;null==V||V(e,E),"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(t=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===t?void 0:t.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?(A.current&&A.current.focus(),O(!0)):document.getElementById("varList")?O(!0):(O(!1),F(!1),P(!1))}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[E.actualValue&&j&&e.jsx("div",Object.assign({style:{marginTop:4}},{children:e.jsx(o.BodyCaption,{children:`This value is of type ${E.variableType}`})})),T&&R&&e.jsx("div",Object.assign({style:{marginTop:m?"-24px":"0px"}},{children:e.jsx(u.AddVariableStyled,Object.assign({right:i,id:"addVar",onClick:()=>{F(!N)}},{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"}))]}))}))}))]})),!y&&N&&e.jsx(s.AddVariableV2,{data:h,showVariable:!0,setShowVariable:()=>{F(!1)},variableValue:L,setVariableValue:M,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,t,i,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(i=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===i?void 0:i.includes("sc-dZoequ "))?A.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==k&&(F(!1),P(!1),O(!1)):(F(!1),P(!1),O(!1))}})]})),y&&N&&e.jsx(d.AddVariableV2SideModal,{zIndex:2e3,data:null!=h?h:[],showVariable:N,setShowVariable:()=>{F(!1)},placeholder:"Add a variable",customTrigger:e=>{M({actualValue:e.actualValue,variableType:"string"}),I(e)},onSearchBlur:e=>{var a,l,r,t,i,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(i=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===i?void 0:i.includes("sc-dZoequ "))?A.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==k&&(F(!1),P(!1),O(!1)):(F(!1),P(!1),O(!1))}})]})};

package/dist/esm/components/input/Input.d.ts

@@ -17,6 +17,7 @@ export interface InputProps {
         icon: React.FC;
         callback?: () => void;
     };
+    labelElement?: React.ReactNode;
     labelText?: string;
     maxCharLimit?: number;
     isRequired?: boolean;
@@ -39,6 +40,7 @@ export interface InputProps {
     reset?: boolean;
     onBlur?: (e: any) => void;
     onFocus?: (e: any) => void;
+    onClick?: (e: any) => void;
     isActive?: boolean;
     id?: string;
     onReferenceInit?: (element: HTMLInputElement | HTMLTextAreaElement) => void;

package/dist/esm/components/input/Input.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import{forwardRef as i,useState as r,useContext as l,useRef as o,useEffect as a}from"react";import{Button as s}from"../button/Button.js";import{isFunction as c,validateInput as u}from"./Input-helper.js";import{BodySecondary as d}from"../TypographyStyle.js";import v from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as h}from"./context/InputStyleProvider.js";import{RootContainer as p,InputFooter as g,InputWrapper as m,IconHolder as f,PrefixHolder as b,InputContainer as x,InputContainerSmall as y,SuffixHolder as j,InputHeader as C,MaxCharStyle as w}from"./Input.styled.js";const I=i(((i,I)=>{var O,k,L,T,z;const{placeholder:A,leftIcon:D,rightIcon:E,labelText:F,maxCharLimit:M,isRequired:B,hintText:S,type:K,state:R,validate:H,variant:q,button:N,suffixText:P,prefixText:V,onChangeText:W,value:G,noErrorHint:J,reset:Q,rangeValidation:U,noKeyDownChange:X,version:Y,noMaxCharCheck:Z}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},i),$=null==D?void 0:D.icon,_=null==E?void 0:E.icon,[ee,te]=r(!1),[ne,ie]=r(!1),[re,le]=r(),oe="small"===q?"18px":"22px",ae=l(h),[se,ce]=r(),ue=o(null),de=null!=I?I:ue;a((()=>{ce(G)}),[G]),a((()=>{var e;de.current&&(null===(e=i.onReferenceInit)||void 0===e||e.call(i,de.current))}),[de]),a((()=>{const e=de.current;if(e&&["phonenumber","zip","number"].includes(K))return e.addEventListener("wheel",ge,{passive:!1}),()=>{e.removeEventListener("wheel",ge)}}),[]),a((()=>{Q&&ce("")}),[Q]),a((()=>{var e;ie(!!i.isActive),i.isActive&&(null===(e=de.current)||void 0===e||e.focus())}),[i.isActive]),a((()=>{le(i.errorMessage)}),[i.errorMessage]),a((()=>{var e;te(!1),("invalid"===i.state||re)&&te(!0),"active"===i.state&&(null===(e=de.current)||void 0===e||e.focus())}),[i.state,re]),a((()=>{te(!!re)}),[re]);const ve=function(e){if(c(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},he=()=>"zip"===K?6:60,pe=e=>{const t=0!==M?M:he();if(X||W(G||"",e),Z)return;const n=e.target.value;![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},ge=e=>{e.preventDefault()},me=e=>{let t=e.target.value;const n=0!==M?M+1:he();!Z&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),W(t,e),i.textControl||ce(t);const r=H||u;if(!r||!c(r))return;const[l,o]=r(t,K,U);te(!l),le(i.errorMessage?i.errorMessage:o)},fe=e=>{var t;i.skipFocus||ie(!0),ve(null===(t=i.onFocus)||void 0===t?void 0:t.call(i,e))},be=e=>{var t;i.skipFocus||ie(!1),ve(null===(t=i.onBlur)||void 0===t?void 0:t.call(i,e))},xe=()=>{var r;return e(n,{children:["multiline"!==K&&t("input",{"data-test":i["data-test"],id:i.id,style:null!==(r=null==ae?void 0:ae.input)&&void 0!==r?r:{},ref:de,type:["phonenumber","zip","number"].includes(K)?"number":K,value:se,onFocus:e=>fe(e),onBlur:e=>be(e),placeholder:A||"Enter here",onChange:me,onKeyDown:e=>pe(e)}),"multiline"===K&&t("textarea",{"data-test":i["data-test"],value:se,ref:de,onFocus:e=>fe(e),onBlur:e=>be(e),placeholder:A||"Enter here",onChange:me,onKeyDown:e=>pe(e),maxLength:M>0?M:void 0})]})};return e(p,Object.assign({width:i.width,height:i.height,state:R,type:K,style:null!==(O=null==ae?void 0:ae.RootContainer)&&void 0!==O?O:{}},{children:[!J&&(!!S||!!re)&&e(g,Object.assign({invalid:!!re},{children:[!!re&&t(v,{width:16,height:16}),re||S]})),e(m,Object.assign({variant:q,state:R,width:i.width,isActive:"active"===R||ne,isInvalid:ee,style:null!==(k=null==ae?void 0:ae.InputWrapper)&&void 0!==k?k:{},version:Y,height:i.height},{children:[!!$&&t(f,Object.assign({variant:q,iconSize:oe,onClick:()=>ve(null==D?void 0:D.callback),isLeft:!0,style:null!==(L=null==ae?void 0:ae.IconHolder)&&void 0!==L?L:{}},{children:t($,{})})),!!V&&t(b,Object.assign({variant:q},{children:V})),"default"===q&&t(x,Object.assign({height:i.height,type:i.type},{children:xe()})),"small"===q&&t(y,Object.assign({height:i.height,type:i.type},{children:xe()})),!!_&&t(f,Object.assign({variant:q,iconSize:oe,onClick:()=>ve(null==E?void 0:E.callback),isLeft:!1},{children:t(_,{})})),!!P&&t(j,Object.assign({variant:q},{children:P})),N&&N.text&&t(s,{buttonText:N.text,onClick:()=>ve(null==N?void 0:N.onClick)})]})),(!!F||!!M)&&e(C,Object.assign({invalid:ee},{children:[e(d,{children:[F,B?t("span",{children:"*"}):""]}),M>0&&e(w,{children:[null!==(z=null===(T=i.value)||void 0===T?void 0:T.length)&&void 0!==z?z:0,"/",M]})]}))]}))}));I.displayName="Input";export{I as Input};
+import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import{forwardRef as i,useState as l,useContext as r,useRef as o,useEffect as a}from"react";import{Button as s}from"../button/Button.js";import{isFunction as c,validateInput as u}from"./Input-helper.js";import{BodySecondary as d}from"../TypographyStyle.js";import v from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as h}from"./context/InputStyleProvider.js";import{RootContainer as p,InputFooter as g,InputWrapper as m,IconHolder as f,PrefixHolder as b,InputContainer as x,InputContainerSmall as y,SuffixHolder as j,InputHeader as C,MaxCharStyle as k}from"./Input.styled.js";const w=i(((i,w)=>{var I,O,L,T,E;const{placeholder:z,leftIcon:A,rightIcon:D,labelText:F,maxCharLimit:M,isRequired:B,hintText:S,type:K,state:R,validate:H,variant:q,button:N,suffixText:P,prefixText:V,onChangeText:W,value:G,noErrorHint:J,reset:Q,rangeValidation:U,noKeyDownChange:X,version:Y,noMaxCharCheck:Z,labelElement:$}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},i),_=null==A?void 0:A.icon,ee=null==D?void 0:D.icon,[te,ne]=l(!1),[ie,le]=l(!1),[re,oe]=l(),ae="small"===q?"18px":"22px",se=r(h),[ce,ue]=l(),de=o(null),ve=null!=w?w:de;a((()=>{ue(G)}),[G]),a((()=>{var e;ve.current&&(null===(e=i.onReferenceInit)||void 0===e||e.call(i,ve.current))}),[ve]),a((()=>{const e=ve.current;if(e&&["phonenumber","zip","number"].includes(K))return e.addEventListener("wheel",me,{passive:!1}),()=>{e.removeEventListener("wheel",me)}}),[]),a((()=>{Q&&ue("")}),[Q]),a((()=>{var e;le(!!i.isActive),i.isActive&&(null===(e=ve.current)||void 0===e||e.focus())}),[i.isActive]),a((()=>{oe(i.errorMessage)}),[i.errorMessage]),a((()=>{var e;ne(!1),("invalid"===i.state||re)&&ne(!0),"active"===i.state&&(null===(e=ve.current)||void 0===e||e.focus())}),[i.state,re]),a((()=>{ne(!!re)}),[re]);const he=function(e){if(c(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},pe=()=>"zip"===K?6:60,ge=e=>{const t=0!==M?M:pe();if(X||W(G||"",e),Z)return;const n=e.target.value;![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},me=e=>{e.preventDefault()},fe=e=>{let t=e.target.value;const n=0!==M?M+1:pe();!Z&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),W(t,e),i.textControl||ue(t);const l=H||u;if(!l||!c(l))return;const[r,o]=l(t,K,U);ne(!r),oe(i.errorMessage?i.errorMessage:o)},be=e=>{var t;i.skipFocus||le(!0),he(null===(t=i.onFocus)||void 0===t?void 0:t.call(i,e))},xe=e=>{var t;i.skipFocus||le(!1),he(null===(t=i.onBlur)||void 0===t?void 0:t.call(i,e))},ye=()=>{var l;return e(n,{children:["multiline"!==K&&t("input",{"data-test":i["data-test"],id:i.id,style:null!==(l=null==se?void 0:se.input)&&void 0!==l?l:{},ref:ve,type:["phonenumber","zip","number"].includes(K)?"number":K,value:ce,onFocus:e=>be(e),onBlur:e=>xe(e),placeholder:z||"Enter here",onChange:fe,onClick:e=>he(i.onClick),onKeyDown:e=>ge(e)}),"multiline"===K&&t("textarea",{"data-test":i["data-test"],value:ce,ref:ve,onFocus:e=>be(e),onBlur:e=>xe(e),onClick:e=>he(i.onClick),placeholder:z||"Enter here",onChange:fe,onKeyDown:e=>ge(e),maxLength:M>0?M:void 0})]})};return e(p,Object.assign({width:i.width,height:i.height,state:R,type:K,style:null!==(I=null==se?void 0:se.RootContainer)&&void 0!==I?I:{}},{children:[!J&&(!!S||!!re)&&e(g,Object.assign({invalid:!!re},{children:[!!re&&t(v,{width:16,height:16}),re||S]})),e(m,Object.assign({variant:q,state:R,width:i.width,isActive:"active"===R||ie,isInvalid:te,style:null!==(O=null==se?void 0:se.InputWrapper)&&void 0!==O?O:{},version:Y,height:i.height},{children:[!!_&&t(f,Object.assign({variant:q,iconSize:ae,onClick:()=>he(null==A?void 0:A.callback),isLeft:!0,style:null!==(L=null==se?void 0:se.IconHolder)&&void 0!==L?L:{}},{children:t(_,{})})),!!V&&t(b,Object.assign({variant:q},{children:V})),"default"===q&&t(x,Object.assign({height:i.height,type:i.type},{children:ye()})),"small"===q&&t(y,Object.assign({height:i.height,type:i.type},{children:ye()})),!!ee&&t(f,Object.assign({variant:q,iconSize:ae,onClick:()=>he(null==D?void 0:D.callback),isLeft:!1},{children:t(ee,{})})),!!P&&t(j,Object.assign({variant:q},{children:P})),N&&N.text&&t(s,{buttonText:N.text,onClick:()=>he(null==N?void 0:N.onClick)})]})),(!!F||!!M)&&e(C,Object.assign({invalid:te},{children:[$&&$,e(d,{children:[F,B?t("span",{children:"*"}):""]}),M>0&&e(k,{children:[null!==(E=null===(T=i.value)||void 0===T?void 0:T.length)&&void 0!==E?E:0,"/",M]})]}))]}))}));w.displayName="Input";export{w as Input};

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Variable } from '../add-variableV2/AddVariableV2';
 import { SelectedVariable } from '../add-variableV2/types';
-interface InputWithVariablesProps {
+export interface InputWithVariablesProps {
     variablesList: any;
     onChange: (val: SelectedVariable) => void;
     onBlur?: (e: Event, val?: SelectedVariable | Variable) => void;
@@ -16,6 +16,8 @@ interface InputWithVariablesProps {
     errorMessage?: string;
     showSideModal?: boolean;
     noMaxCharCheck?: boolean;
+    maxCharLimit?: number;
+    labelText?: string;
+    labelElement?: React.ReactNode;
 }
 export declare const InputWithVariables: React.FC<InputWithVariablesProps>;
-export {};

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

@@ -1,6 +1,6 @@
-import{jsxs as e,Fragment as a,jsx as l}from"react/jsx-runtime";import r from"../../assets/icons/PlusIcon.js";import{useRef as i,useState as d,useEffect as t}from"react";import o from"styled-components";import{v4 as s}from"uuid";import{COLORS as n}from"../../constants/Theme.js";import{AddVariableV2SideModal as u}from"../add-variableV2/AddVariableV2SideModal.js";import{AddVariableV2 as c}from"../add-variableV2/AddVariableV2.js";import{AddVariableStyled as v}from"../add-variableV2/AddVariableBox.styled.js";import{Input as p}from"../input/Input.js";import{BodyCaption as g}from"../TypographyStyle.js";const h=o=>{let{addVarBoxRight:n,allowMix:h,onChange:b,prevVariable:V,variablesList:T,onBlur:y,onlyVariables:f,placeHolder:x,showAddButton:j=!0,showHelp:w,showSideVariablePanel:C,errorMessage:B,showSideModal:S,noMaxCharCheck:k}=o;const A=i(null),[N,M]=d(!1),[O]=d(s()),[I,L]=d(),[E,F]=d(V),[q,Z]=d(!1),[$,z]=d(!1),[H,P]=d(B||"");return t((()=>{I&&I.actualValue&&F(h?e=>({actualValue:e.actualValue+I.actualValue,variableType:"string"}):e=>({actualValue:I.actualValue,variableType:I.variableType,needsFetching:I.needsFetching}))}),[I]),t((()=>{b(E)}),[E]),e(a,{children:[e(m,Object.assign({isVar:/^{{.*}}$/.test(E.actualValue)},{children:[l(p,{id:O,ref:A,skipFocus:!0,textControl:!0,isActive:N,value:E.actualValue,validate:e=>[!0,""],errorMessage:H,placeholder:x||"Add a value",onChangeText:(e,a)=>{if(P(""),f){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||F({actualValue:"",variableType:"string"})}else F(h?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{M(!0),z(!0),document.getElementById("varList")&&!q&&Z(!0)},onBlur:e=>{var a,l,r,i,d,t;null==y||y(e,E),"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(i=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===i?void 0:i.includes("exlualr0"))||(null===(t=null===(d=e.relatedTarget)||void 0===d?void 0:d.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?(A.current&&A.current.focus(),M(!0)):document.getElementById("varList")?M(!0):(M(!1),Z(!1),z(!1))},noMaxCharCheck:k}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[E.actualValue&&w&&l("div",Object.assign({style:{marginTop:4}},{children:l(g,{children:`This value is of type ${E.variableType}`})})),j&&$&&l("div",Object.assign({style:{marginTop:B?"-24px":"0px"}},{children:l(v,Object.assign({right:n,id:"addVar",onClick:()=>{Z(!q)}},{children:e("div",Object.assign({className:"add"},{children:[l(r,{color:"white"}),l("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),!C&&q&&l(c,{data:T,showVariable:!0,setShowVariable:()=>{Z(!1)},variableValue:I,setVariableValue:L,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,d,t;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?A.current.focus():"Enter here"===(null===(t=e.relatedTarget)||void 0===t?void 0:t.placeholder)?e.relatedTarget.id!==O&&(Z(!1),z(!1),M(!1)):(Z(!1),z(!1),M(!1))}})]})),C&&q&&l(u,{zIndex:2e3,data:null!=T?T:[],showVariable:q,setShowVariable:()=>{Z(!1)},placeholder:"Add a variable",customTrigger:e=>{L({actualValue:e.actualValue,variableType:"string"}),F(e)},onSearchBlur:e=>{var a,l,r,i,d,t;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?A.current.focus():"Enter here"===(null===(t=e.relatedTarget)||void 0===t?void 0:t.placeholder)?e.relatedTarget.id!==O&&(Z(!1),z(!1),M(!1)):(Z(!1),z(!1),M(!1))}})]})},m=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 i,useState as t,useEffect as d}from"react";import o from"styled-components";import{v4 as n}from"uuid";import{COLORS as s}from"../../constants/Theme.js";import{AddVariableV2SideModal as c}from"../add-variableV2/AddVariableV2SideModal.js";import{AddVariableV2 as u}from"../add-variableV2/AddVariableV2.js";import{AddVariableStyled as v}from"../add-variableV2/AddVariableBox.styled.js";import{Input as m}from"../input/Input.js";import{BodyCaption as p}from"../TypographyStyle.js";const g=o=>{let{addVarBoxRight:s,allowMix:g,onChange:b,prevVariable:V,variablesList:T,onBlur:f,onlyVariables:y,placeHolder:x,showAddButton:j=!0,showHelp:C,showSideVariablePanel:S,errorMessage:w,showSideModal:k,maxCharLimit:B,noMaxCharCheck:A,labelText:L,labelElement:N}=o;const M=i(null),[O,E]=t(!1),[I]=t(n()),[F,q]=t(),[R,Z]=t(V),[$,z]=t(!1),[H,P]=t(!1),[D,W]=t(w||""),[G,J]=t(0);return d((()=>{if(F&&F.actualValue)if(g){if(Z((e=>{return{actualValue:(a=e.actualValue,l=" "+F.actualValue+" ",r=G,a.slice(0,r)+l+a.slice(r)),variableType:"string"};var a,l,r})),M.current){J(M.current.selectionStart);const e=G+F.actualValue.length+2;M.current.setSelectionRange(e,e),J(e)}}else Z((e=>({actualValue:F.actualValue,variableType:F.variableType,needsFetching:F.needsFetching})))}),[F]),d((()=>{b(R)}),[R]),e(a,{children:[e(h,Object.assign({isVar:/^{{.*}}$/.test(R.actualValue)},{children:[l(m,{id:I,ref:M,skipFocus:!0,isActive:O,value:R.actualValue,validate:e=>[!0,""],errorMessage:D,noMaxCharCheck:A,maxCharLimit:B,labelText:L,labelElement:N,placeholder:x||"Add a value",onClick:e=>{M.current&&J(M.current.selectionStart)},onChangeText:(e,a)=>{if(M.current&&J(M.current.selectionStart),W(""),y){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||Z({actualValue:"",variableType:"string"})}else Z(g?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{E(!0),P(!0),document.getElementById("varList")&&!$&&z(!0)},onBlur:e=>{var a,l,r,i,t,d;null==f||f(e,R),"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(i=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===i?void 0:i.includes("exlualr0"))||(null===(d=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?(M.current&&M.current.focus(),E(!0)):document.getElementById("varList")?E(!0):(E(!1),z(!1),P(!1))}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[R.actualValue&&C&&l("div",Object.assign({style:{marginTop:4}},{children:l(p,{children:`This value is of type ${R.variableType}`})})),j&&H&&l("div",Object.assign({style:{marginTop:w?"-24px":"0px"}},{children:l(v,Object.assign({right:s,id:"addVar",onClick:()=>{z(!$)}},{children:e("div",Object.assign({className:"add"},{children:[l(r,{color:"white"}),l("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),!S&&$&&l(u,{data:T,showVariable:!0,setShowVariable:()=>{z(!1)},variableValue:F,setVariableValue:q,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,t,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(t=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?M.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==I&&(z(!1),P(!1),E(!1)):(z(!1),P(!1),E(!1))}})]})),S&&$&&l(c,{zIndex:2e3,data:null!=T?T:[],showVariable:$,setShowVariable:()=>{z(!1)},placeholder:"Add a variable",customTrigger:e=>{q({actualValue:e.actualValue,variableType:"string"}),Z(e)},onSearchBlur:e=>{var a,l,r,i,t,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(t=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?M.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==I&&(z(!1),P(!1),E(!1)):(z(!1),P(!1),E(!1))}})]})},h=o.div`
 	margin-bottom: 16px;
 	input {
-		color: ${e=>e.isVar?n.stroke.brand:"black"};
+		color: ${e=>e.isVar?s.stroke.brand:"black"};
 	}
-`;export{h as InputWithVariables};
+`;export{g as InputWithVariables};

package/package.json

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