@bikdotai/bik-component-library 0.0.533-beta.0.2 → 0.0.533-beta.1

package/dist/cjs/components/radioButton/RadioButton.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("react"),s=require("./RadioButton.styled.js"),t=require("../TypographyStyle.js"),l=require("../../constants/Theme.js");const a=i=>{const s=i.isDisabled?l.COLORS.content.inactive:i.isActive?l.COLORS.background.positive.vibrant:l.COLORS.content.primary;return e.jsxs("svg",Object.assign({width:i.isSmall?"16":"20",height:i.isSmall?"16":"20",viewBox:i.isSmall?"0 0 16 16":"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e.jsx("circle",{cx:i.isSmall?"8":"10",cy:i.isSmall?"8":"10",r:i.isSmall?6:9,stroke:s,strokeWidth:i.isSmall?1.5:2}),i.isActive&&e.jsx("circle",{cx:i.isSmall?"8":"10",cy:i.isSmall?"8":"10",r:i.isSmall?3:5,fill:i.isDisabled?l.COLORS.content.inactive:l.COLORS.background.positive.vibrant})]}))};exports.RadioButton=r=>{const[n,o]=i.useState(r.isActive||!1),[c,d]=i.useState(!1),[O,S]=i.useState(!1);i.useEffect((()=>{o(r.isActive)}),[r.isActive]);return e.jsxs(s.RadioButtonContainer,Object.assign({onClick:()=>{var e;if(!r.skipSelectingOff&&!r.isDisabled){const i=!n;o(i),null===(e=r.onValueChange)||void 0===e||e.call(r,i,r.value)}},onMouseEnter:()=>d(!r.skipHoverState),onMouseLeave:()=>d(!1),onMouseDown:()=>S(!r.skipHoverState),onMouseUp:()=>S(!1)},{children:[e.jsx(s.RadioButtonIcon,Object.assign({checked:n,hovered:c,clicked:O,isDisabled:r.isDisabled||!1,size:r.size},{children:e.jsx(a,{isSmall:"SMALL"===r.size,isActive:n,isDisabled:r.isDisabled||!1})})),r.label?r.boldOnChecked&&n?e.jsx(t.TitleSmall,Object.assign({color:r.isDisabled?l.COLORS.text.disabled:l.COLORS.text.primary},{children:r.label})):"SMALL"===r.size?e.jsx(t.BodyCaption,Object.assign({color:r.isDisabled?l.COLORS.text.disabled:l.COLORS.text.primary},{children:r.label})):"MEDIUM"===r.labelSize?e.jsx(t.BodySecondary,Object.assign({color:r.isDisabled?l.COLORS.text.disabled:l.COLORS.text.primary},{children:r.label})):e.jsx(t.BodyPrimary,Object.assign({color:r.isDisabled?l.COLORS.text.disabled:l.COLORS.text.primary},{children:r.label})):e.jsx(e.Fragment,{})]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("react"),s=require("./RadioButton.styled.js"),t=require("../TypographyStyle.js"),l=require("../../constants/Theme.js");const a=i=>{const s=i.isDisabled?l.COLORS.content.inactive:i.isActive?l.COLORS.background.positive.vibrant:l.COLORS.content.primary;return e.jsxs("svg",Object.assign({width:i.isSmall?"16":"20",height:i.isSmall?"16":"20",viewBox:i.isSmall?"0 0 16 16":"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e.jsx("circle",{cx:i.isSmall?"8":"10",cy:i.isSmall?"8":"10",r:i.isSmall?6:9,stroke:s,strokeWidth:i.isSmall?1.5:2}),i.isActive&&e.jsx("circle",{cx:i.isSmall?"8":"10",cy:i.isSmall?"8":"10",r:i.isSmall?3:5,fill:i.isDisabled?l.COLORS.content.inactive:l.COLORS.background.positive.vibrant})]}))};exports.RadioButton=r=>{const[o,n]=i.useState(r.isActive||!1),[c,d]=i.useState(!1),[S,u]=i.useState(!1);return i.useEffect((()=>{n(r.isActive)}),[r.isActive]),e.jsxs(s.RadioButtonContainer,Object.assign({onClick:()=>{var e;if(!r.isDisabled){const i=!o;n(i),null===(e=r.onValueChange)||void 0===e||e.call(r,i,r.value)}},onMouseEnter:()=>d(!r.skipHoverState),onMouseLeave:()=>d(!1),onMouseDown:()=>u(!r.skipHoverState),onMouseUp:()=>u(!1)},{children:[e.jsx(s.RadioButtonIcon,Object.assign({checked:o,hovered:c,clicked:S,isDisabled:r.isDisabled||!1,size:r.size},{children:e.jsx(a,{isSmall:"SMALL"===r.size,isActive:o,isDisabled:r.isDisabled||!1})})),r.label&&"SMALL"!==r.size&&e.jsx(t.BodyPrimary,Object.assign({color:r.isDisabled?l.COLORS.text.disabled:l.COLORS.text.primary},{children:r.label})),r.label&&"SMALL"===r.size&&e.jsx(t.BodyCaption,Object.assign({color:r.isDisabled?l.COLORS.text.disabled:l.COLORS.text.primary},{children:r.label}))]}))};

package/dist/cjs/components/radioList/RadioList.d.ts

@@ -8,7 +8,6 @@ export type RadioListProps = {
     subTitle?: string;
     listItems: RadioListItem[];
     onChange: (option: RadioListItem) => void;
-    listContainerStyles?: React.CSSProperties;
 };
 export declare const RadioList: React.FC<RadioListProps>;
 export {};

package/dist/cjs/components/radioList/RadioList.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("../radioButton/RadioButton.js"),i=require("./RadioList.styled.js"),r=require("../TypographyStyle.js"),a=require("../../constants/Theme.js");exports.RadioList=l=>{var n;const[o,c]=t.useState(l.listItems);t.useEffect((()=>{c(l.listItems)}),[l.listItems]);const u=(e,t)=>{let s;const i=[...o];i.forEach((i=>{i.value===t?(s=i,i.isActive=e):i.isActive=!e})),c(i),l.onChange(s)};return e.jsxs(i.RadioListStyled,{children:[(l.title||l.subTitle)&&e.jsxs("div",Object.assign({className:"title__container"},{children:[l.title&&e.jsx(r.TitleRegular,{children:l.title}),l.subTitle&&e.jsx(r.BodySecondary,Object.assign({color:a.COLORS.text.secondary},{children:l.subTitle}))]})),e.jsx("div",Object.assign({style:null!==(n=l.listContainerStyles)&&void 0!==n?n:{},className:"list__container"},{children:o.map((t=>e.jsx(s.RadioButton,Object.assign({},t,{onValueChange:u}),t.value)))}))]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("../radioButton/RadioButton.js"),i=require("./RadioList.styled.js"),r=require("../TypographyStyle.js"),a=require("../../constants/Theme.js");exports.RadioList=l=>{const[n,c]=t.useState(l.listItems);t.useEffect((()=>{c(l.listItems)}),[l.listItems]);const o=(e,t)=>{let s;const i=[...n];i.forEach((i=>{i.value===t?(s=i,i.isActive=e):i.isActive=!e})),c(i),l.onChange(s)};return e.jsxs(i.RadioListStyled,{children:[(l.title||l.subTitle)&&e.jsxs("div",Object.assign({className:"title__container"},{children:[l.title&&e.jsx(r.TitleRegular,{children:l.title}),l.subTitle&&e.jsx(r.BodySecondary,Object.assign({color:a.COLORS.text.secondary},{children:l.subTitle}))]})),e.jsx("div",Object.assign({className:"list__container"},{children:n.map((t=>e.jsx(s.RadioButton,Object.assign({},t,{onValueChange:o}),t.value)))}))]})};

package/dist/cjs/components/side-modal/SideModal.d.ts

@@ -13,5 +13,6 @@ export interface SideModalProps {
     zIndex?: number;
     hideFooter?: boolean;
     bodyStyle?: React.CSSProperties;
+    element?: Element | DocumentFragment;
 }
 export declare const SideModal: React.FC<SideModalProps>;

package/dist/cjs/components/side-modal/SideModal.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react-dom"),o=require("../../assets/icons/cross.svg.js"),r=require("../button/Button.js"),s=require("../TypographyStyle.js"),i=require("./SideModal.style.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=n(t);exports.SideModal=t=>d.default.createPortal(e.jsx(i.SideModalStyle,Object.assign({zIndex:t.zIndex},{children:e.jsxs(i.SideModalContainer,Object.assign({width:t.width},{children:[e.jsxs(i.SideModalHeader,{children:[e.jsx(s.TitleMedium,{children:t.header}),!t.hideCrossButton&&e.jsx(o.default,{width:24,height:24,onClick:t.onClose})]}),e.jsx(i.SideModalBody,Object.assign({hideFooter:t.hideFooter,bodyStyle:Object.assign({},t.bodyStyle)},{children:t.children})),!0===t.hideFooter?null:e.jsxs(i.SideModalFooter,Object.assign({footerDirection:t.footerDirection},{children:[e.jsxs(i.FooterButtonWrapper,Object.assign({footerDirection:t.footerDirection},{children:[e.jsx(r.Button,Object.assign({},t.saveButtonProps)),e.jsx(r.Button,Object.assign({},t.cancelButtonProps))]})),t.footerCustomComponent?t.footerCustomComponent:e.jsx(e.Fragment,{})]}))]}))})),document.body);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react-dom"),o=require("../../assets/icons/cross.svg.js"),r=require("../button/Button.js"),s=require("../TypographyStyle.js"),i=require("./SideModal.style.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=n(t);exports.SideModal=t=>{var n;return d.default.createPortal(e.jsx(i.SideModalStyle,Object.assign({zIndex:t.zIndex},{children:e.jsxs(i.SideModalContainer,Object.assign({width:t.width},{children:[e.jsxs(i.SideModalHeader,{children:[e.jsx(s.TitleMedium,{children:t.header}),!t.hideCrossButton&&e.jsx(o.default,{width:24,height:24,onClick:t.onClose})]}),e.jsx(i.SideModalBody,Object.assign({hideFooter:t.hideFooter,bodyStyle:Object.assign({},t.bodyStyle)},{children:t.children})),!0===t.hideFooter?null:e.jsxs(i.SideModalFooter,Object.assign({footerDirection:t.footerDirection},{children:[e.jsxs(i.FooterButtonWrapper,Object.assign({footerDirection:t.footerDirection},{children:[e.jsx(r.Button,Object.assign({},t.saveButtonProps)),e.jsx(r.Button,Object.assign({},t.cancelButtonProps))]})),t.footerCustomComponent?t.footerCustomComponent:e.jsx(e.Fragment,{})]}))]}))})),null!==(n=t.element)&&void 0!==n?n:document.body)};

package/dist/cjs/components/spinner/Spinner.d.ts

@@ -3,9 +3,3 @@ export declare const Spinner: {
     ({ size, color, className }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export declare const PureSpinner: import("styled-components").StyledComponent<"div", any, {
-    width: string;
-    height: string;
-    color?: string | undefined;
-    backgroundColor?: string | undefined;
-}, never>;

package/dist/cjs/components/spinner/Spinner.js

@@ -1,18 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react-lottie"),t=require("styled-components"),n=require("../../constants/Theme.js"),i=require("./lotties/black.json.js"),o=require("./lotties/brand.json.js"),s=require("./lotties/red.json.js"),a=require("./lotties/white.json.js"),l=require("./themes.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(r),c=d(t);const p={[n.COLORS.stroke.brand]:o,[n.COLORS.content.primary]:i,[n.COLORS.content.primaryInverse]:a,[n.COLORS.content.negative]:s},j=r=>{let{size:t,color:i,className:o}=r;const s={loop:!0,autoplay:!0,animationData:p[null!=i?i:n.COLORS.stroke.brand],rendererSettings:{preserveAspectRatio:"xMidYMid slice"}};return e.jsx("div",Object.assign({className:`spinner-container ${o}`},{children:e.jsx(u.default,{options:s,width:l.SizeMap[t],isStopped:!1,isPaused:!1})}))};j.displayName="Spinner";const m=c.default.div`
-	width: ${e=>e.width};
-	height: ${e=>e.height};
-	border: 5px solid ${e=>{var r;return null!==(r=e.backgroundColor)&&void 0!==r?r:"transparent"}};
-	border-bottom-color: ${e=>{var r;return null!==(r=e.color)&&void 0!==r?r:n.COLORS.stroke.brand}};
-	border-radius: 50%;
-	display: inline-block;
-	animation: rotation 1s linear infinite;
-
-	@keyframes rotation {
-		0% {
-			transform: rotate(0deg);
-		}
-		100% {
-			transform: rotate(360deg);
-		}
-	}
-`;exports.PureSpinner=m,exports.Spinner=j;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react-lottie"),r=require("../../constants/Theme.js"),s=require("./lotties/black.json.js"),i=require("./lotties/brand.json.js"),n=require("./lotties/red.json.js"),o=require("./lotties/white.json.js"),a=require("./themes.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(t);const u={[r.COLORS.stroke.brand]:i,[r.COLORS.content.primary]:s,[r.COLORS.content.primaryInverse]:o,[r.COLORS.content.negative]:n},d=t=>{let{size:s,color:i,className:n}=t;const o={loop:!0,autoplay:!0,animationData:u[null!=i?i:r.COLORS.stroke.brand],rendererSettings:{preserveAspectRatio:"xMidYMid slice"}};return e.jsx("div",Object.assign({className:`spinner-container ${n}`},{children:e.jsx(c.default,{options:o,width:a.SizeMap[s],isStopped:!1,isPaused:!1})}))};d.displayName="Spinner",exports.Spinner=d;

package/dist/cjs/components/states/StateComponent.d.ts

@@ -30,7 +30,5 @@ export type StateComponentProps = {
     leadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
     width: number;
     size?: 'DEFAULT' | 'SMALL';
-    iconHeight?: number;
-    iconWidth?: number;
 };
 export declare const StateComponent: React.FC<React.PropsWithChildren<StateComponentProps>>;

package/dist/cjs/components/states/StateComponent.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,n,s=require("react/jsx-runtime"),o=require("../../constants/Theme.js"),r=require("../../assets/icons/errorIcon.svg.js"),i=require("../../assets/icons/successIcon.svg.js"),a=require("../../assets/icons/warningIcon.svg.js"),c=require("../button/Button.js"),u=require("../spinner/Spinner.js"),d=require("../TypographyStyle.js"),l=require("./StateComponent.styled.js");exports.StateInterface=void 0,(e=exports.StateInterface||(exports.StateInterface={})).SUCCESS="success",e.ERROR="error",e.WARNING="warning",e.LOADING="loading",exports.ButtonActions=void 0,(t=exports.ButtonActions||(exports.ButtonActions={})).CANCEL="cancel",t.OTHER="other",exports.ButtonTypes=void 0,(n=exports.ButtonTypes||(exports.ButtonTypes={})).SINGLE="SINGLE",n.DOUBLE="DOUBLE";exports.StateComponent=e=>{var t;const n=()=>x==exports.StateInterface.SUCCESS?s.jsx(i.default,{}):x==exports.StateInterface.WARNING?s.jsx(a.default,{}):x==exports.StateInterface.ERROR?s.jsx(r.default,{}):x===exports.StateInterface.LOADING?s.jsx(u.Spinner,{size:"large"}):void 0,{states:x,heading:p,subline:j,icon:S=n(),isButtonEnabled:h,type:g,buttonText:y,buttonType:B,onButtonClick:I,leadingIcon:L,width:O,headerImage:C,iconWidth:b,iconHeight:T}=e;return s.jsxs(l.StateComponentContainer,Object.assign({width:O},{children:[s.jsx(l.StateIcon,Object.assign({iconWidth:b,iconHeight:T},{children:C?s.jsx("img",{src:C,width:"100%",height:"auto",alt:""}):S})),s.jsxs(l.StateHeading,Object.assign({size:e.size},{children:["SMALL"===e.size&&s.jsx(d.TitleRegular,{children:p}),"SMALL"!==e.size&&s.jsx(d.TitleMedium,{children:p})]})),s.jsxs(l.StateSubline,{children:["SMALL"!==e.size&&s.jsx(d.BodyPrimary,Object.assign({color:o.COLORS.content.secondary},{children:j})),"SMALL"===e.size&&s.jsx(d.BodySecondary,Object.assign({color:o.COLORS.content.secondary},{children:j}))]}),null!==(t=e.children)&&void 0!==t?t:s.jsx(s.Fragment,{}),h&&s.jsx(s.Fragment,{children:s.jsxs(l.ButtonContainer,Object.assign({size:e.size},{children:[g==exports.ButtonTypes.DOUBLE&&s.jsx(c.Button,{onClick:()=>I&&I(exports.ButtonActions.CANCEL),buttonType:"secondary",buttonText:"Cancel",matchParentWidth:!0}),s.jsx(c.Button,{onClick:()=>I&&I(exports.ButtonActions.OTHER),buttonType:null!=B?B:"primary",LeadingIcon:L,buttonText:null!=y?y:"Retry",matchParentWidth:!0})]}))})]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,n,s=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),o=require("../../assets/icons/errorIcon.svg.js"),i=require("../../assets/icons/successIcon.svg.js"),a=require("../../assets/icons/warningIcon.svg.js"),c=require("../button/Button.js"),u=require("../spinner/Spinner.js"),d=require("../TypographyStyle.js"),l=require("./StateComponent.styled.js");exports.StateInterface=void 0,(e=exports.StateInterface||(exports.StateInterface={})).SUCCESS="success",e.ERROR="error",e.WARNING="warning",e.LOADING="loading",exports.ButtonActions=void 0,(t=exports.ButtonActions||(exports.ButtonActions={})).CANCEL="cancel",t.OTHER="other",exports.ButtonTypes=void 0,(n=exports.ButtonTypes||(exports.ButtonTypes={})).SINGLE="SINGLE",n.DOUBLE="DOUBLE";exports.StateComponent=e=>{var t;const n=()=>x==exports.StateInterface.SUCCESS?s.jsx(i.default,{}):x==exports.StateInterface.WARNING?s.jsx(a.default,{}):x==exports.StateInterface.ERROR?s.jsx(o.default,{}):x===exports.StateInterface.LOADING?s.jsx(u.Spinner,{size:"large"}):void 0,{states:x,heading:p,subline:j,icon:S=n(),isButtonEnabled:h,type:g,buttonText:y,buttonType:B,onButtonClick:I,leadingIcon:L,width:C,headerImage:O}=e;return s.jsxs(l.StateComponentContainer,Object.assign({width:C},{children:[s.jsx(l.StateIcon,{children:O?s.jsx("img",{src:O,width:"100%",height:"auto",alt:""}):S}),s.jsxs(l.StateHeading,Object.assign({size:e.size},{children:["SMALL"===e.size&&s.jsx(d.TitleRegular,{children:p}),"SMALL"!==e.size&&s.jsx(d.TitleMedium,{children:p})]})),s.jsxs(l.StateSubline,{children:["SMALL"!==e.size&&s.jsx(d.BodyPrimary,Object.assign({color:r.COLORS.content.secondary},{children:j})),"SMALL"===e.size&&s.jsx(d.BodySecondary,Object.assign({color:r.COLORS.content.secondary},{children:j}))]}),null!==(t=e.children)&&void 0!==t?t:s.jsx(s.Fragment,{}),h&&s.jsx(s.Fragment,{children:s.jsxs(l.ButtonContainer,Object.assign({size:e.size},{children:[g==exports.ButtonTypes.DOUBLE&&s.jsx(c.Button,{onClick:()=>I&&I(exports.ButtonActions.CANCEL),buttonType:"secondary",buttonText:"Cancel",matchParentWidth:!0}),s.jsx(c.Button,{onClick:()=>I&&I(exports.ButtonActions.OTHER),buttonType:null!=B?B:"primary",LeadingIcon:L,buttonText:null!=y?y:"Retry",matchParentWidth:!0})]}))})]}))};

package/dist/cjs/components/states/StateComponent.styled.d.ts

@@ -1,10 +1,7 @@
 export declare const StateComponentContainer: import("styled-components").StyledComponent<"div", any, {
     width: number;
 }, never>;
-export declare const StateIcon: import("styled-components").StyledComponent<"div", any, {
-    iconWidth?: number | undefined;
-    iconHeight?: number | undefined;
-}, never>;
+export declare const StateIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StateHeading: import("styled-components").StyledComponent<"div", any, {
     size?: "SMALL" | "DEFAULT" | undefined;
 }, never>;

package/dist/cjs/components/states/StateComponent.styled.js

@@ -7,23 +7,23 @@
 	flex-direction: column;
 	align-items: center;
 `,n=e.default.div`
-	width: ${t=>t.iconWidth?t.iconWidth:64}px;
-	height: ${t=>t.iconHeight?t.iconHeight:64}px;
+	width: 64px;
+	height: 64px;
 	display: flex;
 	justify-content: center;
 	align-items: end;
-`,d=e.default.div`
+`,a=e.default.div`
 	margin-top: ${t=>"SMALL"===t.size?8:16}px;
 	text-align: center;
 	max-width: 100%;
-`,a=e.default.div`
+`,d=e.default.div`
 	display: flex;
 	margin-top: ${t=>"SMALL"===t.size?8:24}px;
 	gap: 12px;
 	width: 100%;
-`,o=e.default.div`
+`,p=e.default.div`
 	margin-top: 4px;
 	max-width: 100%;
 	text-align: center;
 	max-width: 100%;
-`;exports.ButtonContainer=a,exports.StateComponentContainer=i,exports.StateHeading=d,exports.StateIcon=n,exports.StateSubline=o;
+`;exports.ButtonContainer=d,exports.StateComponentContainer=i,exports.StateHeading=a,exports.StateIcon=n,exports.StateSubline=p;

package/dist/cjs/components/states-modal/StateModalComponent.d.ts

@@ -16,7 +16,5 @@ export type StateModalComponentProps = {
     onClose?: () => void;
     zIndex?: number;
     headerImage?: string;
-    iconWidth?: number;
-    iconHeight?: number;
 };
 export declare const StateModalComponent: React.FC<React.PropsWithChildren<StateModalComponentProps>>;

package/dist/cjs/components/states-modal/StateModalComponent.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../../constants/zindex.js"),s=require("../../assets/icons/errorIcon.svg.js"),i=require("../../assets/icons/successIcon.svg.js"),o=require("../../assets/icons/warningIcon.svg.js"),r=require("../modals/styledModal.js"),a=require("../spinner/Spinner.js"),c=require("../states/StateComponent.js");exports.StateModalComponent=d=>{const l=()=>u==c.StateInterface.SUCCESS?e.jsx(i.default,{}):u==c.StateInterface.WARNING?e.jsx(o.default,{}):u==c.StateInterface.ERROR?e.jsx(s.default,{}):u===c.StateInterface.LOADING?e.jsx(a.Spinner,{size:"large"}):void 0,{states:u,heading:I,subline:j,icon:S=l(),isButtonEnabled:g,type:x,buttonText:h,onButtonClick:C,leadingIcon:p,width:f,zIndex:O,headerImage:b,iconHeight:m,iconWidth:q}=d,[y,v]=t.useState(!0);return e.jsx(r.StyledModal,Object.assign({open:y,onClose:function(){d.onClose&&d.onClose(),v(!1)},closeOnOutsideClick:!(u===c.StateInterface.LOADING),centralContainerStyles:{display:"flex",alignItems:"center",justifyContent:"center",width:f},hideCrossButton:u===c.StateInterface.LOADING,zIndex:O||n.ComponentZindex.STATE_MODAL},{children:e.jsx(c.StateComponent,Object.assign({states:u,heading:I,subline:j,isButtonEnabled:g,leadingIcon:p,type:x,buttonText:h,onButtonClick:C,icon:S,width:f||400,headerImage:b,iconHeight:m,iconWidth:q},{children:d.children}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../../constants/zindex.js"),s=require("../../assets/icons/errorIcon.svg.js"),r=require("../../assets/icons/successIcon.svg.js"),a=require("../../assets/icons/warningIcon.svg.js"),i=require("../modals/styledModal.js"),o=require("../spinner/Spinner.js"),c=require("../states/StateComponent.js");exports.StateModalComponent=d=>{const l=()=>u==c.StateInterface.SUCCESS?e.jsx(r.default,{}):u==c.StateInterface.WARNING?e.jsx(a.default,{}):u==c.StateInterface.ERROR?e.jsx(s.default,{}):u===c.StateInterface.LOADING?e.jsx(o.Spinner,{size:"large"}):void 0,{states:u,heading:I,subline:j,icon:S=l(),isButtonEnabled:x,type:C,buttonText:g,onButtonClick:p,leadingIcon:f,width:h,zIndex:O,headerImage:b}=d,[m,q]=t.useState(!0);return e.jsx(i.StyledModal,Object.assign({open:m,onClose:function(){d.onClose&&d.onClose(),q(!1)},closeOnOutsideClick:!(u===c.StateInterface.LOADING),centralContainerStyles:{display:"flex",alignItems:"center",justifyContent:"center",width:h},hideCrossButton:u===c.StateInterface.LOADING,zIndex:O||n.ComponentZindex.STATE_MODAL},{children:e.jsx(c.StateComponent,Object.assign({states:u,heading:I,subline:j,isButtonEnabled:x,leadingIcon:f,type:C,buttonText:g,onButtonClick:p,icon:S,width:h||400,headerImage:b},{children:d.children}))}))};

package/dist/cjs/components/stepper/Stepper.d.ts

@@ -3,7 +3,6 @@ export interface StepperProps {
     steps: EachStep[];
     activeStep: EachStep;
     onClickingEachStep: (step: EachStep) => void;
-    hideHoverState?: boolean;
 }
 export interface EachStep {
     stepKey: string;
@@ -19,6 +18,5 @@ export interface SingleStepperProps {
     isActive: boolean;
     onClickingStep: (step: EachStep) => void;
     stepsCount: number;
-    hideHoverState?: boolean;
 }
 export declare const Stepper: (stepperDetails: StepperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/stepper/Stepper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../constants/Theme.js"),s=require("../../assets/icons/check.svg.js"),i=require("../../assets/icons/errorInfo.svg.js"),r=require("../TypographyStyle.js"),n=require("./Stepper.styled.js");const c=c=>{const{eachStep:a,isLastElement:o,index:l,isActive:d,onClickingStep:p,hideHoverState:h}=c,{stepName:j,isCompleted:v,isError:u,isInActive:g}=a,S=()=>d?"active":v?"completed":u?"error":g?"inactive":"default";return e.jsxs(n.SingleStepperChildContainer,Object.assign({stepsCount:c.stepsCount,onClick:()=>{!g&&p(a)},selectedState:S(),isInActive:g||h},{children:[e.jsxs("div",Object.assign({className:`hover-container ${g?"blocked":"pointer"} `},{children:[e.jsx("div",Object.assign({className:"badge"},{children:"completed"==S()?e.jsx(s.default,{height:16,width:16,color:t.COLORS.content.positive}):"error"==S()?e.jsx(i.default,{height:16,width:16}):e.jsx(r.BodySecondary,Object.assign({className:"badge-text"},{children:l+1}))})),e.jsx(r.BodyPrimary,Object.assign({className:"step-text",title:j},{children:j}))]})),e.jsx("div",{className:o?"":"horizontal-divider"})]}))};exports.Stepper=t=>{const{steps:s,activeStep:i,onClickingEachStep:r,hideHoverState:a}=t;return e.jsx(n.StepperContainer,{children:s.map(((t,n)=>e.jsx(c,{stepsCount:s.length,eachStep:t,onClickingStep:e=>{r(e)},isActive:(null==i?void 0:i.stepKey)==(null==t?void 0:t.stepKey),isLastElement:n==s.length-1,index:n,hideHoverState:a},n)))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../constants/Theme.js"),s=require("../../assets/icons/check.svg.js"),i=require("../../assets/icons/errorInfo.svg.js"),r=require("../TypographyStyle.js"),n=require("./Stepper.styled.js");const c=c=>{const{eachStep:a,isLastElement:o,index:l,isActive:d,onClickingStep:p}=c,{stepName:h,isCompleted:j,isError:u,isInActive:g}=a,v=()=>d?"active":j?"completed":u?"error":g?"inactive":"default";return e.jsxs(n.SingleStepperChildContainer,Object.assign({stepsCount:c.stepsCount,onClick:()=>{!g&&p(a)},selectedState:v()},{children:[e.jsxs("div",Object.assign({className:`hover-container ${g?"blocked":"pointer"} `},{children:[e.jsx("div",Object.assign({className:"badge"},{children:"completed"==v()?e.jsx(s.default,{height:16,width:16,color:t.COLORS.content.positive}):"error"==v()?e.jsx(i.default,{height:16,width:16}):e.jsx(r.BodySecondary,Object.assign({className:"badge-text"},{children:l+1}))})),e.jsx(r.BodyPrimary,Object.assign({className:"step-text",title:h},{children:h}))]})),e.jsx("div",{className:o?"":"horizontal-divider"})]}))};exports.Stepper=t=>{const{steps:s,activeStep:i,onClickingEachStep:r}=t;return e.jsx(n.StepperContainer,{children:s.map(((t,n)=>e.jsx(c,{stepsCount:s.length,eachStep:t,onClickingStep:e=>{r(e)},isActive:(null==i?void 0:i.stepKey)==(null==t?void 0:t.stepKey),isLastElement:n==s.length-1,index:n},n)))})};

package/dist/cjs/components/stepper/Stepper.styled.d.ts

@@ -3,6 +3,5 @@ export declare const StepperContainer: import("styled-components").StyledCompone
 export declare const SingleStepperChildContainer: import("styled-components").StyledComponent<"div", any, {
     selectedState: StepperStates;
     stepsCount: number;
-    isInActive?: boolean | undefined;
 }, never>;
 export declare const WorkingStepperContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/cjs/components/stepper/Stepper.styled.js

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("./themes.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(e);const o=n.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("./themes.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(e);const i=o.default.div`
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
 	gap: 16px;
-`,r=n.default.div`
+`,r=o.default.div`
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
@@ -26,9 +26,9 @@
 		align-items: center;
 		gap: 8px;
 		&:hover {
-			padding: ${e=>e.isInActive?void 0:"6px 8px 6px 6px"};
-			background: ${e=>e.isInActive?void 0:"#f0f0f0"};
-			border-radius: ${e=>e.isInActive?void 0:"30px"};
+			padding: 6px 8px 6px 6px;
+			background: #f0f0f0;
+			border-radius: 30px;
 		}
 	}
 	.badge {
@@ -63,7 +63,7 @@
 		background: ${e=>t.getTheme(e.selectedState).dividerBackground};
 		margin-left: 8px;
 	}
-`;n.default.div`
+`;o.default.div`
 	.top-bar {
 		position: sticky;
 		top: 0px;
@@ -80,4 +80,4 @@
 		align-items: center;
 		overflow-y: auto;
 	}
-`,exports.SingleStepperChildContainer=r,exports.StepperContainer=o;
+`,exports.SingleStepperChildContainer=r,exports.StepperContainer=i;

package/dist/cjs/components/tabs/Tabs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("../../constants/Theme.js"),r=require("../TypographyStyle.js"),a=require("./Tabs.styles.js");const n=r=>{var n,l;const{tabs:i,initialTab:c,onTabSelected:d,TabItemStyledProps:b,selectedTab:u,extendedBorder:p,rightComponent:x,size:T="default",isSquared:m=!1,containerStyles:g}=r,[y,C]=t.useState(c||i[0].key),{colorsV2:j}=s.DEFAULT_THEME;t.useEffect((()=>{u&&C(u)}),[u]);const S=r.backgroundColor,h=null!==(n=r.selectedTextColor)&&void 0!==n?n:j.background.brand,q=null!==(l=r.textColor)&&void 0!==l?l:j.content.secondary;return e.jsxs(a.TabHeader,Object.assign({style:null!=g?g:{},bgColor:S},{children:[i.map(((t,s)=>e.jsx(o,{hasEqualSpacing:r.hasEqualSpacing,selectedTextColor:h,textColor:q,tab:t,currentTab:y,TabItemStyledProps:b,IconComponent:t.icon,size:T,setCurrentTab:e=>{d(e),C(e)},isSquared:m,isFirstlement:0==s,isLastElement:s==i.length-1},t.key))),p&&e.jsx(a.EmptyTab,{}),e.jsx(a.RightComponent,{children:x})]}))},o=n=>{const{tab:o,currentTab:l,setCurrentTab:i,TabItemStyledProps:c,IconComponent:d,size:b="default",isSquared:u=!1,isFirstlement:p,isLastElement:x}=n,T=o.key===l,{colorsV2:m}=s.DEFAULT_THEME,g=t.useCallback((()=>Object.assign(Object.assign({},c),{borderRadius:n.isSquared?p?"4px 0px 0px 4px":x?"0px 4px 4px 0px":"":""})),[]);return e.jsxs(a.TabItem,Object.assign({style:g(),selected:T,hasEqualSpacing:n.hasEqualSpacing,onClick:()=>i(n.tab.key),selectedTextColor:n.selectedTextColor,isSquared:u},{children:[d&&e.jsx(d,{selected:T?m.background.brand:m.content.secondary}),e.jsx(a.TabItemText,Object.assign({style:"small"===b?{fontSize:14,fontStyle:"normal",fontWeight:600}:void 0,textColor:n.textColor,selectedTextColor:n.selectedTextColor,selected:T},{children:o.title})),void 0!==o.trailingNumber&&null!==o.trailingNumber&&e.jsx(a.TrailingNumberContainer,Object.assign({selected:T},{children:e.jsx(r.BodyCaption,Object.assign({color:m.content.primaryInverse},{children:o.trailingNumber}))}))]}))};n.displayName="Tabs",o.displayName="TabItemComponent",exports.TabItemComponent=o,exports.Tabs=n;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("../../constants/Theme.js"),r=require("../TypographyStyle.js"),a=require("./Tabs.styles.js");const n=r=>{var n,l;const{tabs:i,initialTab:c,onTabSelected:d,TabItemStyledProps:b,selectedTab:u,extendedBorder:p,rightComponent:x,size:T="default",isSquared:m=!1}=r,[g,C]=t.useState(c||i[0].key),{colorsV2:y}=s.DEFAULT_THEME;t.useEffect((()=>{u&&C(u)}),[u]);const j=r.backgroundColor,S=null!==(n=r.selectedTextColor)&&void 0!==n?n:y.background.brand,h=null!==(l=r.textColor)&&void 0!==l?l:y.content.secondary;return e.jsxs(a.TabHeader,Object.assign({bgColor:j},{children:[i.map(((t,s)=>e.jsx(o,{hasEqualSpacing:r.hasEqualSpacing,selectedTextColor:S,textColor:h,tab:t,currentTab:g,TabItemStyledProps:b,IconComponent:t.icon,size:T,setCurrentTab:e=>{d(e),C(e)},isSquared:m,isFirstlement:0==s,isLastElement:s==i.length-1},t.key))),p&&e.jsx(a.EmptyTab,{}),e.jsx(a.RightComponent,{children:x})]}))},o=n=>{const{tab:o,currentTab:l,setCurrentTab:i,TabItemStyledProps:c,IconComponent:d,size:b="default",isSquared:u=!1,isFirstlement:p,isLastElement:x}=n,T=o.key===l,{colorsV2:m}=s.DEFAULT_THEME,g=t.useCallback((()=>Object.assign(Object.assign({},c),{borderRadius:n.isSquared?p?"4px 0px 0px 4px":x?"0px 4px 4px 0px":"":""})),[]);return e.jsxs(a.TabItem,Object.assign({style:g(),selected:T,hasEqualSpacing:n.hasEqualSpacing,onClick:()=>i(n.tab.key),selectedTextColor:n.selectedTextColor,isSquared:u},{children:[d&&e.jsx(d,{selected:T?m.background.brand:m.content.secondary}),e.jsx(a.TabItemText,Object.assign({style:"small"===b?{fontSize:14,fontStyle:"normal",fontWeight:600}:void 0,textColor:n.textColor,selectedTextColor:n.selectedTextColor,selected:T},{children:o.title})),void 0!==o.trailingNumber&&null!==o.trailingNumber&&e.jsx(a.TrailingNumberContainer,Object.assign({selected:T},{children:e.jsx(r.BodyCaption,Object.assign({color:m.content.primaryInverse},{children:o.trailingNumber}))}))]}))};n.displayName="Tabs",o.displayName="TabItemComponent",exports.TabItemComponent=o,exports.Tabs=n;

package/dist/cjs/components/tabs/Tabs.model.d.ts

@@ -36,7 +36,6 @@ export interface TabViewHeaderProps {
     rightComponent?: JSX.Element;
     size?: 'small' | 'default';
     isSquared?: boolean;
-    containerStyles?: React.CSSProperties;
 }
 export interface TabItemComponentProps {
     hasEqualSpacing?: boolean;

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

@@ -1,3 +1,4 @@
+import 'pure-react-carousel/dist/react-carousel.es.css';
 import { VariableListInterfaceV2 } from "../add-variableV2/AddVariableV2";
 import { CarouselProduct } from "./modalElements/EditWhatsAppCarouselTemplateV2";
 import { WhatsAppCarouselTemplate, WhatsAppCarouselTemplateVariables } from "../template-preview/models/WhatsappCarouselTemplate";
@@ -53,4 +54,4 @@ export interface TemplateContextMapperProps {
     setFileName?: (name: string) => void;
     hideDeviceContainerInPreview?: boolean;
 }
-export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues, disableEditVariable, pod, extras, pickerConf, selectedCarouselProducts, disableEditExpiry, cardWidth, onDeleteSelectedProducts, fileName, setFileName, hideDeviceContainerInPreview, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList: variableListFromProps, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues, disableEditVariable, pod, extras, pickerConf, selectedCarouselProducts, disableEditExpiry, cardWidth, onDeleteSelectedProducts, fileName, setFileName, hideDeviceContainerInPreview, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),t=require("../../utils/StringUtils.js"),o=require("../../constants/Theme.js"),a=require("../modals/styledModal.js"),r=require("../template-preview/models/Channels.js"),s=require("./context/templateModalContext.js"),i=require("./modalElements/Footer.js"),n=require("./modalElements/TemplateSelectModalContent.js"),d=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=u=>{let{selectedTemplate:c,closeDialog:v,showVariableMapping:p,channel:m,htmlContent:h,templateVariables:C,onTemplateSelect:S,globalPlaceholders:E,showOnlyContent:x,whatsappSpecificPickerMeta:b,zIndex:g,showVariableModal:P,variableList:f,discountCode:T,setDiscountCode:I,onBackPress:y,enabledCustomText:j,variableListForImage:L,showSampleValues:M,disableEditVariable:w,pod:N,extras:A,pickerConf:D,selectedCarouselProducts:H,disableEditExpiry:V,cardWidth:k,onDeleteSelectedProducts:q,fileName:O,setFileName:_,hideDeviceContainerInPreview:F}=u;var W,B,R,Y,z,$,U,G;l.useEffect((()=>{ee(h)}),[h]);const J=m===r.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===(B=null===(W=null==c?void 0:c.components)||void 0===W?void 0:W[1])||void 0===B?void 0:B.type),K=null==c?void 0:c.isProductCarouselType,[Q,X]=l.useState(m===r.CHANNEL_TYPE.EMAIL||J?"desktop":"mobile"),[Z,ee]=l.useState(h),[le,te]=l.useState(!1),[oe,ae]=l.useState([]),[re,se]=l.useState({}),[ie,ne]=l.useState(c),[de,ue]=l.useState([]),[ce,ve]=l.useState(!1),[pe,me]=l.useState(null!=C?C:[]),[he,Ce]=l.useState(!1),[Se,Ee]=l.useState(J?(null===(Y=null===(R=null==ie?void 0:ie.mapping)||void 0===R?void 0:R.body)||void 0===Y?void 0:Y.length)?-1:0:-1),[xe,be]=l.useState([]),ge=l.useRef(null),[Pe,fe]=l.useState(!1);l.useEffect((()=>{H?be(H):K&&be([])}),[H]),l.useEffect((()=>{var e;if(!ce&&K&&(!H||0===be.length)){const l=null===(e=null==ie?void 0:ie.components)||void 0===e?void 0:e[1].cards,t=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,o,a;"HEADER"===e.type&&t.push(null!==(a=null===(o=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===o?void 0:o[0])&&void 0!==a?a:"")}))})),ue(t),ve(!0)}}),[ce]);const Te=l.useMemo((()=>d.convertPlaceholdersToBikDropdown(E)),[E]);return e.jsx(s.TemplateModalContext.Provider,Object.assign({value:{template:ie,setTemplate:ne,device:Q,setDevice:X,display_content:Z,setDisplayContent:ee,originalVariableList:pe,setOriginalVariableList:me,isError:le,setIsError:te,channel:m,globalNormalizedPlaceholders:Te,templateSelectionTriggered:he,setTemplateSelectionTriggered:Ce,enabledCustomText:j,disableEditVariable:w,pod:N,extras:A,isWhatsappCarousel:J,selectedCarouselIndex:Se,setSelectedCarouselIndex:Ee,isProductCarouselType:K,templateErrorIndexes:re,cardCount:J?null===($=null===(z=c.components)||void 0===z?void 0:z[1].cards)||void 0===$?void 0:$.length:void 0,errorIndexes:oe,setErrorIndexes:ae,pickerConf:D,carouselProducts:xe,setCarouselProducts:be,disableEditExpiry:V,cardWidth:k,cardImages:de,onDeleteSelectedProducts:q,hideDeviceContainerInPreview:F,sliderRef:ge,isCarouselHovered:Pe,setIsCarouselHovered:fe}},{children:x?e.jsx(n.default,{channel:r.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(a.StyledModal,Object.assign({zIndex:g,centralContainerStyles:{width:J?900:m===r.CHANNEL_TYPE.EMAIL&&p?1e3:800},open:!0,onClose:()=>{null==v||v()},headingTitle:null==ie?void 0:ie.label,headingSubtitle:m===r.CHANNEL_TYPE.WHATSAPP?`${t.default.capitaliseFirstLetterOfString(null!==(U=null==ie?void 0:ie.category)&&void 0!==U?U:"")} • ${null!==(G=null==ie?void 0:ie.templateCategory)&&void 0!==G?G:""}`:"",onBackPress:()=>{null==y||y()},modalHeaderStyles:{borderBottom:`1px solid ${o.COLORS.stroke.primary}`}},{children:[e.jsx(n.default,{showSampleValues:M,showVariableMapping:p,channel:m,whatsappSpecificPickerMeta:b,showVariableModal:P,variableList:f,discountCode:T,setDiscountCode:I,variableListForImage:L&&(null==L?void 0:L.length)>0?L:f,fileName:O,setFileName:e=>{null==_||_(e)}}),S?e.jsx(i.default,{isWhatsappCarousel:null!=J&&J,onSelect:function(){var e;if((null==xe?void 0:xe.length)<1&&K)return void te(!0);const l=null==S?void 0:S(ie,pe,null!=Z?Z:"",xe);se(null!==(e=null==l?void 0:l.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==l?void 0:l.errorIndexes)||(null==l?void 0:l.error)?((null==l?void 0:l.errorIndexes)&&ae(l.errorIndexes),(null==l?void 0:l.error)&&te(!!(null==l?void 0:l.error))):Ce(!0)}}):e.jsx(e.Fragment,{})]}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("lodash"),t=require("react"),a=require("../../utils/StringUtils.js"),o=require("../../constants/Theme.js"),r=require("../modals/styledModal.js"),s=require("../template-preview/models/Channels.js"),i=require("./context/templateModalContext.js"),n=require("./modalElements/Footer.js"),d=require("./modalElements/TemplateSelectModalContent.js"),u=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=c=>{let{selectedTemplate:p,closeDialog:v,showVariableMapping:m,channel:h,htmlContent:b,templateVariables:C,onTemplateSelect:S,globalPlaceholders:E,showOnlyContent:x,whatsappSpecificPickerMeta:P,zIndex:g,showVariableModal:T,variableList:f,discountCode:I,setDiscountCode:L,onBackPress:j,enabledCustomText:y,variableListForImage:w,showSampleValues:M,disableEditVariable:N,pod:V,extras:k,pickerConf:A,selectedCarouselProducts:D,disableEditExpiry:q,cardWidth:H,onDeleteSelectedProducts:F,fileName:O,setFileName:_,hideDeviceContainerInPreview:W}=c;var B,Y,z,R,$,U;t.useEffect((()=>{le(b)}),[b]);const G=h===s.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===(Y=null===(B=null==p?void 0:p.components)||void 0===B?void 0:B[1])||void 0===Y?void 0:Y.type),J=null==p?void 0:p.isProductCarouselType,[K,Q]=t.useState(h===s.CHANNEL_TYPE.EMAIL||G?"desktop":"mobile"),[X,Z]=t.useState(!1),[ee,le]=t.useState(b),[te,ae]=t.useState(!1),[oe,re]=t.useState([]),[se,ie]=t.useState({}),[ne,de]=t.useState(p),[ue,ce]=t.useState([]),[pe,ve]=t.useState(null),[me,he]=t.useState(!1),[be,Ce]=t.useState(null!=C?C:[]),[Se,Ee]=t.useState(!1),[xe,Pe]=t.useState(-1),[ge,Te]=t.useState([]),[fe,Ie]=t.useState(l.cloneDeep(f));t.useEffect((()=>{D?Te(D):J&&Te([])}),[D]),t.useEffect((()=>{var e;if(!me&&J&&(!D||0===Te.length)){const l=null===(e=null==ne?void 0:ne.components)||void 0===e?void 0:e[1].cards,t=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,a,o;"HEADER"===e.type&&t.push(null!==(o=null===(a=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===a?void 0:a[0])&&void 0!==o?o:"")}))})),ce(t),he(!0)}}),[me]);const Le=t.useMemo((()=>u.convertPlaceholdersToBikDropdown(E)),[E]);return e.jsx(i.TemplateModalContext.Provider,Object.assign({value:{variableList:fe,setVariableList:Ie,variableCallback:pe,setVariableCallback:ve,showVariablePicker:X,setShowVariablePicker:Z,template:ne,setTemplate:de,device:K,setDevice:Q,display_content:ee,setDisplayContent:le,originalVariableList:be,setOriginalVariableList:Ce,isError:te,setIsError:ae,channel:h,globalNormalizedPlaceholders:Le,templateSelectionTriggered:Se,setTemplateSelectionTriggered:Ee,enabledCustomText:y,disableEditVariable:N,pod:V,extras:k,isWhatsappCarousel:G,selectedCarouselIndex:xe,setSelectedCarouselIndex:Pe,isProductCarouselType:J,templateErrorIndexes:se,cardCount:G?null===(R=null===(z=p.components)||void 0===z?void 0:z[1].cards)||void 0===R?void 0:R.length:void 0,errorIndexes:oe,setErrorIndexes:re,pickerConf:A,carouselProducts:ge,setCarouselProducts:Te,disableEditExpiry:q,cardWidth:H,cardImages:ue,onDeleteSelectedProducts:F,hideDeviceContainerInPreview:W}},{children:x?e.jsx(d.default,{variableListFromProps:f,channel:s.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(r.StyledModal,Object.assign({zIndex:g,centralContainerStyles:{width:G?900:h===s.CHANNEL_TYPE.EMAIL&&m?1e3:800},open:!0,onClose:()=>{null==v||v()},headingTitle:null==ne?void 0:ne.label,headingSubtitle:h===s.CHANNEL_TYPE.WHATSAPP?`${a.default.capitaliseFirstLetterOfString(null!==($=null==ne?void 0:ne.category)&&void 0!==$?$:"")} • ${null!==(U=null==ne?void 0:ne.templateCategory)&&void 0!==U?U:""}`:"",onBackPress:()=>{null==j||j()},modalHeaderStyles:{borderBottom:`1px solid ${o.COLORS.stroke.primary}`}},{children:[e.jsx(d.default,{variableListFromProps:f,showSampleValues:M,showVariableMapping:m,channel:h,whatsappSpecificPickerMeta:P,showVariableModal:T,discountCode:I,setDiscountCode:L,variableListForImage:w&&(null==w?void 0:w.length)>0?w:fe,fileName:O,setFileName:e=>{null==_||_(e)}}),S?e.jsx(n.default,{isWhatsappCarousel:null!=G&&G,onSelect:function(){var e;if((null==ge?void 0:ge.length)<1&&J)return void ae(!0);const l=null==S?void 0:S(ne,be,null!=ee?ee:"",ge);ie(null!==(e=null==l?void 0:l.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==l?void 0:l.errorIndexes)||(null==l?void 0:l.error)?((null==l?void 0:l.errorIndexes)&&re(l.errorIndexes),(null==l?void 0:l.error)&&ae(!!(null==l?void 0:l.error))):Ee(!0)}}):e.jsx(e.Fragment,{})]}))}))};

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

@@ -1,5 +1,5 @@
-import React, { LegacyRef } from 'react';
-import Slider from 'react-slick';
+import React from 'react';
+import { VariableListInterfaceV2 } from "../../add-variableV2";
 import { CarouselProduct } from "../modalElements/EditWhatsAppCarouselTemplateV2";
 import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
 import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
@@ -9,6 +9,12 @@ import { WhatsAppCarouselTemplate, WhatsAppCarouselTemplateVariables } from "../
 import { ExtrasWhatsapp, WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
 export type DEVICE_TYPES = 'desktop' | 'mobile';
 export declare const TemplateModalContext: React.Context<{
+    variableList: VariableListInterfaceV2[] | undefined;
+    setVariableList: React.Dispatch<React.SetStateAction<VariableListInterfaceV2[] | undefined>>;
+    variableCallback: any;
+    setVariableCallback: any;
+    showVariablePicker: boolean;
+    setShowVariablePicker: React.Dispatch<React.SetStateAction<boolean>>;
     device: DEVICE_TYPES;
     setDevice?: React.Dispatch<React.SetStateAction<DEVICE_TYPES>> | undefined;
     display_content: string | null;
@@ -53,11 +59,14 @@ export declare const TemplateModalContext: React.Context<{
         body?: number[] | undefined;
         buttons?: number[] | undefined;
     } | undefined;
-    sliderRef?: LegacyRef<Slider> | undefined;
-    isCarouselHovered?: boolean | undefined;
-    setIsCarouselHovered?: ((value: boolean) => void) | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
+    variableList: VariableListInterfaceV2[] | undefined;
+    setVariableList: React.Dispatch<React.SetStateAction<VariableListInterfaceV2[] | undefined>>;
+    variableCallback: any;
+    setVariableCallback: any;
+    showVariablePicker: boolean;
+    setShowVariablePicker: React.Dispatch<React.SetStateAction<boolean>>;
     device: DEVICE_TYPES;
     setDevice?: React.Dispatch<React.SetStateAction<DEVICE_TYPES>> | undefined;
     display_content: string | null;
@@ -102,7 +111,4 @@ export declare const useTemplateModalContext: () => {
         body?: number[] | undefined;
         buttons?: number[] | undefined;
     } | undefined;
-    sliderRef?: LegacyRef<Slider> | undefined;
-    isCarouselHovered?: boolean | undefined;
-    setIsCarouselHovered?: ((value: boolean) => void) | undefined;
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=l(e).default.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:t.CHANNEL_TYPE.EMAIL,template:null,isError:!1,enabledCustomText:!1,disableEditVariable:!1,disableEditExpiry:!1});exports.TemplateModalContext=a,exports.useTemplateModalContext=()=>e.useContext(a);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../template-preview/models/Channels.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const l=a(e).default.createContext({variableList:[],setVariableList:()=>{},variableCallback:null,setVariableCallback:null,showVariablePicker:!1,setShowVariablePicker:()=>{},device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:t.CHANNEL_TYPE.EMAIL,template:null,isError:!1,enabledCustomText:!1,disableEditVariable:!1,disableEditExpiry:!1});exports.TemplateModalContext=l,exports.useTemplateModalContext=()=>e.useContext(l);

package/dist/cjs/components/template-context-mapper/custom-hooks/useAdditionalVariables.d.ts

@@ -9,4 +9,4 @@ export type AdditionalVariableProps = {
  * Takes the previous variable list and adds any custom variable given as prop.
  * E.g - Custom Text, Custom URL, Static Expiry
  */
-export declare const useAdditionalVariables: (props: AdditionalVariableProps) => VariableListInterfaceV2[] | undefined;
+export declare const updateVariables: (props: AdditionalVariableProps) => VariableListInterfaceV2[] | undefined;

package/dist/cjs/components/template-context-mapper/custom-hooks/useAdditionalVariables.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.useAdditionalVariables=a=>{const{variableList:e,categoryDisplayName:i,variableDisplayName:r,variableValue:l}=a;return e?[...e,{description:i,displayName:i,orderId:1,variables:{variableDisplayName:{description:void 0,displayName:r,actualValue:l,variableType:"any",isAvailable:!0}}}].sort(((a,e)=>a.orderId-e.orderId)):e};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.updateVariables=a=>{const{variableList:e,categoryDisplayName:i,variableDisplayName:r,variableValue:s}=a;if(!e)return e;const l={description:i,displayName:i,orderId:1,variables:{[r]:{description:void 0,displayName:r,actualValue:s,variableType:"any",isAvailable:!0}}};return e.find((a=>a.displayName===i))||e.unshift(l),e};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../checkBox/CheckBox.js"),a=require("../../TypographyStyle.js"),i=require("../../input/Input.js");exports.BackTrackComponent=s=>{const{backTrackMessage:n,setBackTrackMessage:c}=s,[l,x]=r.useState(!!n);return e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8,width:"300px",padding:"20px 0px"}},{children:[e.jsx(t.CheckBox,{isChecked:l,onValueChange:()=>{l&&c&&c(""),x(!l)}}),e.jsx(a.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Prevent BackTracking"}))]})),l&&e.jsx("div",Object.assign({style:{margin:10}},{children:e.jsx(i.Input,{type:"multiline",placeholder:"Enter your text here",labelText:"Message if user tries backtracking",onChangeText:e=>{c&&c(e)},height:"120px",maxCharLimit:1024,value:n,noErrorHint:!0,validate:e=>[!0,""]})}))]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../checkBox/CheckBox.js"),a=require("../../TypographyStyle.js"),i=require("../../input/Input.js");exports.BackTrackComponent=s=>{const{backTrackMessage:n,setBackTrackMessage:c}=s,[l,o]=r.useState(!!n);return e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8,width:"300px"}},{children:[e.jsx(t.CheckBox,{isChecked:l,onValueChange:()=>{l&&c&&c(""),o(!l)}}),e.jsx(a.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Prevent BackTracking"}))]})),l&&e.jsx("div",Object.assign({style:{margin:10}},{children:e.jsx(i.Input,{type:"multiline",placeholder:"Enter your text here",labelText:"Message if user tries backtracking",onChangeText:e=>{c&&c(e)},height:"120px",maxCharLimit:1024,value:n,noErrorHint:!0,validate:e=>[!0,""]})}))]})};

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

@@ -5,13 +5,13 @@ export interface BodyProps {
     showOnlyContent?: boolean;
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
     showVariableModal?: boolean;
-    variableList?: VariableListInterfaceV2[];
     variableListForImage?: VariableListInterfaceV2[];
     discountCode?: string;
     setDiscountCode?: (code: string) => void;
     showSampleValues?: boolean;
     fileName?: string;
     setFileName?: (name: string) => void;
+    variableListFromProps?: VariableListInterfaceV2[];
 }
 declare const Body: (props: BodyProps) => import("react/jsx-runtime").JSX.Element;
 export default Body;

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

@@ -1,22 +1,18 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),a=require("../../carousel-preview/CarouselPreview.js"),l=require("./EditWhatsAppCarouselTemplateV2.js"),o=require("../../template-preview/models/Channels.js"),n=require("../../TypographyStyle.js"),s=require("../../../constants/Theme.js"),r=require("../context/templateModalContext.js"),d=require("../utils/constants.js"),p=require("../utils/getVariableNameEmail.js"),u=require("../utils/highlightFor.js"),c=require("./DesktopPreview.js"),h=require("./EditWhatsAppTemplateV2.js"),m=require("./MobilePreview.js"),C=require("./VariableConnectorsPanel.js");function v(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var P=v(i);const w=P.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("../../curtain/CurtainHelper.js");var a=require("../../variable-picker-v3/model.js"),t=require("lodash"),i=require("react"),o=require("styled-components"),l=require("../../carousel-preview/CarouselPreview.js"),r=require("./EditWhatsAppCarouselTemplateV2.js"),s=require("../../template-preview/models/Channels.js"),n=require("../../variable-picker-v3/VariablePicker.js"),d=require("../../../constants/Theme.js"),u=require("../context/templateModalContext.js"),p=require("../utils/getVariableNameEmail.js"),c=require("../utils/highlightFor.js"),h=require("./DesktopPreview.js"),m=require("./EditWhatsAppTemplateV2.js"),b=require("./MobilePreview.js"),v=require("./VariableConnectorsPanel.js");function C(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=C(o);const g=f.default.div`
 	display: flex;
 	//	height: 100%;
-`,f=P.default.div`
-	padding: 16px 14px;
-	max-width: ${e=>e.channel===o.CHANNEL_TYPE.EMAIL?"400px":"450px"};
+`,w=f.default.div`
+	max-width: 450px;
 
-	height: ${e=>e.channel===o.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
+	height: ${e=>e.channel===s.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
 	overflow-y: auto;
 	padding-bottom: 24px;
-	border-left: ${s.COLORS.stroke.primary} 1px solid;
-	border-top: ${e=>e.isWhatsappCarousel?`${s.COLORS.stroke.primary} 1px solid`:void 0};
-	${e=>!e.showVariableMapping&&"width: 340px; height: 500px"};
-`,x=P.default.div`
+	border-left: ${d.COLORS.stroke.primary} 1px solid;
+	border-top: ${e=>e.isWhatsappCarousel?`${d.COLORS.stroke.primary} 1px solid`:void 0};
+`,x=f.default.div`
 	padding: ${e=>e.isWhatsappCarousel?void 0:e.showOnlyContent?"16px 14px":"16px 32px"};
 	flex: 1;
 	height: ${e=>e.isWhatsappCarousel||e.hideDeviceContainerInPreview?"500px":"475px"};
 	overflow-y: auto;
-	background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===o.CHANNEL_TYPE.WHATSAPP?`url(${d.BACKGROUND_PREVIEW_IMAGE});`:"none"};
-	display: ${e=>e.hideDeviceContainerInPreview&&e.channel===o.CHANNEL_TYPE.WHATSAPP?"flex":"initial"};
-	align-items: flex-start;
-`;exports.default=i=>{const{showVariableMapping:d,showOnlyContent:v,whatsappSpecificPickerMeta:P,showVariableModal:g,variableList:E,discountCode:b,setDiscountCode:A,variableListForImage:j,showSampleValues:N,fileName:T,setFileName:y}=i,L=t.useRef(),S=t.useRef(),{device:_,display_content:M,channel:W,template:H,setTemplate:O,isWhatsappCarousel:V,isProductCarouselType:I,hideDeviceContainerInPreview:q}=r.useTemplateModalContext();const k=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e.jsxs(w,{children:[e.jsx(x,Object.assign({showOnlyContent:v,showVariableMapping:d,isWhatsappCarousel:V,hideDeviceContainerInPreview:q,channel:W},{children:"mobile"===_?e.jsx(m.default,{ref:S,display_content:null!=M?M:"",channel:W,template:H,showSampleValues:N}):W===o.CHANNEL_TYPE.WHATSAPP&&V?e.jsx(a.CarouselPreview,{ref:L,channel:W,template:H,showSampleValues:N,isPreview:!1,showArrows:!0}):W!==o.CHANNEL_TYPE.MESSAGE?e.jsx(c.default,{ref:L,channel:W,display_content:null!=M?M:"",showSampleValues:N}):e.jsx(e.Fragment,{})})),(I||d)&&e.jsx(f,Object.assign({channel:W,isWhatsappCarousel:V,showVariableMapping:!0},{children:W!==o.CHANNEL_TYPE.WHATSAPP?e.jsx(C.default,{onFocus:W===o.CHANNEL_TYPE.EMAIL?function(e){var t,i,a;const l=null===document||void 0===document?void 0:document.getElementById("mobile"===_?"template_html_mobile":"template_html_desktop"),n=p.getVariableNameForEmailByIndex(e+1),r=W===o.CHANNEL_TYPE.EMAIL?null===(t=null==l?void 0:l.contentWindow)||void 0===t?void 0:t.document.getElementById(n):document.getElementById(n),d=k(r),c=null==r?void 0:r.offsetLeft;"desktop"===_?d&&L.current&&(null===(i=null==l?void 0:l.contentWindow)||void 0===i||i.scrollTo(null!=c?c:0,d),u.highlightFor(n,s.COLORS.background.warning.light,2,W,_)):d&&S.current&&(null===(a=null==l?void 0:l.contentWindow)||void 0===a||a.scrollTo(null!=c?c:0,d),u.highlightFor(n,s.COLORS.background.warning.light,2,W,_))}:void 0,showVariableModal:g,variableList:E,discountCode:b,setDiscountCode:A}):W===o.CHANNEL_TYPE.WHATSAPP&&V?e.jsx(l.default,{whatsappSpecificPickerMeta:P,template:H,showVariableModal:g,variableList:E,variableListForImage:j,discountCode:b,setDiscountCode:A}):e.jsx(h.default,{whatsappSpecificPickerMeta:P,template:H,onTemplateChange:e=>{null==O||O(e)},showVariableModal:g,variableList:E,variableListForImage:j,discountCode:b,setDiscountCode:A,fileName:T,setFileName:y})})),W===o.CHANNEL_TYPE.WHATSAPP&&!d&&!I&&e.jsx(f,{children:e.jsx(n.BodySecondary,Object.assign({color:s.COLORS.content.secondary,style:{fontStyle:"italic"}},{children:"Click on ‘Select template’ below to use it"}))})]})};
+	background-image: ${e=>e.hideDeviceContainerInPreview?"url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');":"none"};
+`;exports.default=o=>{const{showVariableMapping:C,showOnlyContent:f,whatsappSpecificPickerMeta:P,showVariableModal:j,discountCode:E,setDiscountCode:y,variableListForImage:k,showSampleValues:T,variableListFromProps:A}=o,L=i.useRef(),V=i.useRef(),{variableList:S,setVariableList:q,variableCallback:M,showVariablePicker:N,setShowVariablePicker:O,device:_,display_content:W,channel:D,template:H,setTemplate:I,isWhatsappCarousel:F,isProductCarouselType:B,hideDeviceContainerInPreview:Y}=u.useTemplateModalContext();const $=e=>{let a=0;for(;e;)a+=e.offsetTop,e=e.offsetParent;return a};return console.log("Body.tsx",S,A),e.jsxs(g,{children:[e.jsx(x,Object.assign({showOnlyContent:f,showVariableMapping:C,isWhatsappCarousel:F,hideDeviceContainerInPreview:Y},{children:"mobile"===_?e.jsx(b.default,{ref:V,display_content:null!=W?W:"",channel:D,template:H,showSampleValues:T}):D===s.CHANNEL_TYPE.WHATSAPP&&F?e.jsx(l.CarouselPreview,{ref:L,channel:D,template:H,showSampleValues:T,isPreview:!1}):D!==s.CHANNEL_TYPE.MESSAGE?e.jsx(h.default,{ref:L,channel:D,display_content:null!=W?W:"",showSampleValues:T}):e.jsx(e.Fragment,{})})),(B||C)&&e.jsxs(w,Object.assign({channel:D,isWhatsappCarousel:F},{children:[e.jsx("div",Object.assign({style:{height:"100%",width:428,display:N?"block":"none"}},{children:e.jsx(n.VariablePicker,{hideHeaderCross:!0,showHeader:!0,showBackButton:!0,onBackButtonClick:()=>{q(t.cloneDeep(A)),O(!1)},onSelect:e=>{M(e),q(t.cloneDeep(A)),O(!1)},type:a.PickerType.EMBEDDED,data:null!=S?S:[]},Math.random())})),e.jsx("div",Object.assign({style:{padding:"16px 14px",display:N?"none":"block"}},{children:D!==s.CHANNEL_TYPE.WHATSAPP?e.jsx(v.default,{onFocus:D===s.CHANNEL_TYPE.EMAIL?function(e){var a,t,i;const o=null===document||void 0===document?void 0:document.getElementById("mobile"===_?"template_html_mobile":"template_html_desktop"),l=p.getVariableNameForEmailByIndex(e+1),r=D===s.CHANNEL_TYPE.EMAIL?null===(a=null==o?void 0:o.contentWindow)||void 0===a?void 0:a.document.getElementById(l):document.getElementById(l),n=$(r),u=null==r?void 0:r.offsetLeft;"desktop"===_?n&&L.current&&(null===(t=null==o?void 0:o.contentWindow)||void 0===t||t.scrollTo(null!=u?u:0,n),c.highlightFor(l,d.COLORS.background.warning.light,2,D,_)):n&&V.current&&(null===(i=null==o?void 0:o.contentWindow)||void 0===i||i.scrollTo(null!=u?u:0,n),c.highlightFor(l,d.COLORS.background.warning.light,2,D,_))}:void 0,showVariableModal:j,discountCode:E,setDiscountCode:y}):D===s.CHANNEL_TYPE.WHATSAPP&&F?e.jsx(r.default,{whatsappSpecificPickerMeta:P,template:H,showVariableModal:j,variableListForImage:k,discountCode:E,setDiscountCode:y}):e.jsx(m.default,{whatsappSpecificPickerMeta:P,template:H,onTemplateChange:e=>{null==I||I(e)},showVariableModal:j,variableListForImage:k,discountCode:E,setDiscountCode:y})}))]}))]})};

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("styled-components"),i=require("../../spinner/Spinner.js"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var s=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js"),require("../../template-preview/models/TemplateMeta.js"),require("../../template-preview/models/WhatsAppTemplate.js");var p=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(r),o=l(t);const n=o.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("styled-components"),i=require("../../spinner/Spinner.js"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var s=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js"),require("../../template-preview/models/WhatsAppTemplate.js");var p=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(r),o=l(t);const n=o.default.div`
 	background: ${s.COLORS.surface.standard};
 	border: 1px solid ${s.COLORS.stroke.primary};
 	border-radius: 8px;

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

@@ -1,6 +1,4 @@
-import { VariableListInterfaceV2 } from "../../add-variableV2";
 export declare const DiscountCodeComponent: (props: {
     discountCode?: string | undefined;
     setDiscountCode?: ((code: string) => void) | undefined;
-    variableList?: VariableListInterfaceV2[] | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../assets/icons/PlusIcon.js"),a=require("react"),s=require("../../add-variableV2/AddVariableV2SideModal.js");require("../../../_virtual/_tslib.js"),require("../../add-variableV2/AddVariableV2.styled.js"),require("../../button/Button.js"),require("../../icon-button/IconButton.js");var i=require("../../input/Input.js");require("../../tooltips/Tooltip.js"),require("../../../constants/Theme.js"),require("../../modals/modal.styled.js"),require("../../switch/Switch.js");var t=require("../../TypographyStyle.js"),l=require("../../checkBox/CheckBox.js"),d=require("./VariableConnectorsPanel.js");exports.DiscountCodeComponent=o=>{const{discountCode:n,setDiscountCode:u,variableList:c}=o,[j,b]=a.useState(""),[h,v]=a.useState(!!n),[x,g]=a.useState(!1),[V,p]=a.useState(!1),q=a.useRef(),m=a.useRef();return a.useEffect((()=>{u&&j&&u(n+j)}),[j]),e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(l.CheckBox,{isChecked:h,onValueChange:()=>{h&&u&&(u(""),b("")),v(!h)}}),e.jsx(t.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),h&&e.jsxs("div",Object.assign({ref:q,style:{margin:10}},{children:[e.jsx(i.Input,{placeholder:"Enter your discount code",onChangeText:e=>{u&&u(e)},value:n,onFocus:()=>{g(!0)},onBlur:e=>{var r;"addVar"===(null===(r=e.relatedTarget)||void 0===r?void 0:r.id)?(q.current&&q.current.focus(),g(!0)):(g(!1),p(!1))},noErrorHint:!0,validate:e=>[!0,""]}),x&&e.jsx(d.AddVariableStyled,Object.assign({ref:m,id:"addVar",onClick:e=>{e.stopPropagation(),p(!0)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(r.default,{width:14,height:14,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),V&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=c?c:[],showVariable:V,setShowVariable:p,variableValue:j,setVariableValue:b,placeholder:"Add a variable",customTrigger:e=>{b(e.actualValue),g(!1)}})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../../assets/icons/PlusIcon.js"),t=require("react"),r=require("../../checkBox/CheckBox.js"),a=require("../../TypographyStyle.js"),i=require("../context/templateModalContext.js"),n=require("./VariableConnectorsPanel.js"),o=require("../../input/Input.js");exports.DiscountCodeComponent=l=>{const{discountCode:c,setDiscountCode:d}=l,[u,j]=t.useState(""),[x,h]=t.useState(!!c),[g,p]=t.useState(!1),{setVariableCallback:b,setShowVariablePicker:C}=i.useTemplateModalContext(),f=t.useRef(),v=t.useRef();t.useEffect((()=>{d&&u&&d(c+u)}),[u]);const m=e=>{j(e.actualValue)};return e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(r.CheckBox,{isChecked:x,onValueChange:()=>{x&&d&&(d(""),j("")),h(!x)}}),e.jsx(a.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),x&&e.jsxs("div",Object.assign({ref:f,style:{margin:10}},{children:[e.jsx(o.Input,{placeholder:"Enter your discount code",onChangeText:e=>{d&&d(e)},value:c,onFocus:()=>{p(!0)},onBlur:e=>{var s;"addVar"===(null===(s=e.relatedTarget)||void 0===s?void 0:s.id)?(f.current&&f.current.focus(),p(!0)):p(!1)},noErrorHint:!0,validate:e=>[!0,""]}),g&&e.jsx(n.AddVariableStyled,Object.assign({ref:v,id:"addVar",onClick:e=>{e.stopPropagation(),b((()=>m)),C(!0)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(s.default,{width:14,height:14,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]}))]})};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/arrow_back.svg.js"),a=require("react"),i=require("../../button/Button.js"),r=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../_virtual/_tslib.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js");var s=require("../../spinner/Spinner.js"),l=require("../../input-with-vars/InputWithVariables.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var n=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js");var o=require("../../template-preview/models/TemplateMeta.js"),d=require("../../template-preview/models/WhatsAppTemplate.js"),p=require("../../TypographyStyle.js"),c=require("../../../utils/validator.js"),u=require("../../../assets/icons/file.svg.js"),g=require("../../../assets/icons/filePdf.svg.js"),m=require("../../../assets/icons/image.svg.js"),j=require("../../../assets/icons/upload.svg.js"),h=require("../context/templateModalContext.js"),x=require("../utils/validateIsUrl.js");exports.default=E=>{let{setOpenEditMedia:v,mediaComponentFormat:b,variableListForImage:y,openEditMedia:f,uploadMedia:C,fileRef:M,useEditWhatsappTemplateMediaResponse:I}=E;const{pod:T}=h.useTemplateModalContext(),[q,A]=a.useState("");let P;if(P=b===o.HEADER_TYPES.IMAGE?"image/png, image/jpeg":b===o.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",!f)return e.jsx(e.Fragment,{});return e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"}},{children:[e.jsx(t.default,{onClick:e=>{e.stopPropagation(),v(!1),A("")},style:{cursor:"pointer"},width:16,height:16}),e.jsx(p.TitleRegular,{children:"Update Media"})]})),e.jsxs("div",Object.assign({style:{padding:24,borderRadius:4,border:`1px dashed ${n.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:n.DEFAULT_THEME.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:I.loading?"flex":"initial"}},{children:[e.jsxs("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[I.loading?e.jsx(s.PureSpinner,{width:"40px",height:"40px",color:n.COLORS.content.brand}):e.jsx("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:n.DEFAULT_THEME.colorsV2.background.base}},{children:b===o.HEADER_TYPES.IMAGE?e.jsx(m.default,{width:40,height:40}):b===o.HEADER_TYPES.VIDEO?e.jsx(u.default,{width:40,height:40}):e.jsx(g.default,{width:40,height:40})})),e.jsx(p.TitleMedium,{children:I.loading?"Upload in progress...":b===o.HEADER_TYPES.IMAGE?"Upload an image":b===o.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document"}),e.jsx(p.BodySecondary,Object.assign({color:n.COLORS.content.secondary},{children:I.loading?`Your ${b.toLowerCase()} is getting loaded. This may take a couple of minutes.`:b===o.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":b===o.HEADER_TYPES.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB"}))]})),!I.loading&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"6px"}},{children:[e.jsx(p.BodyCaption,{children:"Press Enter after adding url/variable to add"}),e.jsx(l.InputWithVariables,{noMaxCharCheck:!0,allowMix:!1,onChange:()=>{},onEnterPress:e=>{e&&(c.validateURL(e)||x.isVariable(e)?(C(e),v(!1),A("")):A("Invalid Url/Variable"))},errorMessage:q,prevVariable:{actualValue:"",variableType:"string"},variablesList:y,showSideVariablePanel:!0,placeHolder:"Enter URL/Add variable",showAddButton:T!==d.POD.CAMPAIGN||b===o.HEADER_TYPES.IMAGE})]})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"16px"}},{children:[e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e.jsx(p.BodyCaption,{children:"Or upload media from device"}),e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e.jsx("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e.jsx(i.Button,{matchParentWidth:!0,buttonText:"Upload",buttonType:"secondary",LeadingIcon:j.default,onClick:()=>C(),size:"medium"})}))]})]})),e.jsx("input",{ref:M,style:{display:"none"},type:"file",onChange:I.handleImageUpload,accept:P}),!!I.selectedImage&&e.jsx(r.BikImageCropper,{aspectRatio:15/8,src:I.selectedImage,onCropComplete:I.onCropComplete,onCancel:()=>{I.setLoading(!1),I.setSelectedImage(""),M.current&&(M.current.value="")}})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/arrow_back.svg.js"),a=require("react"),i=require("../../button/Button.js"),r=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../_virtual/_tslib.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js");var s=require("../../spinner/Spinner.js"),l=require("../../input-with-vars/InputWithVariables.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var o=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js");var n=require("../../template-preview/models/TemplateMeta.js"),d=require("../../template-preview/models/WhatsAppTemplate.js"),p=require("../../TypographyStyle.js"),c=require("../../../utils/validator.js"),u=require("../../../assets/icons/file.svg.js"),g=require("../../../assets/icons/filePdf.svg.js"),m=require("../../../assets/icons/image.svg.js"),j=require("../../../assets/icons/upload.svg.js"),h=require("../context/templateModalContext.js"),x=require("../utils/validateIsUrl.js");exports.default=E=>{let{setOpenEditMedia:v,mediaComponentFormat:b,variableListForImage:f,openEditMedia:y,uploadMedia:C,fileRef:M,useEditWhatsappTemplateMediaResponse:q}=E;console.log("Variable list for image",f);const{pod:I}=h.useTemplateModalContext(),[T,A]=a.useState("");let P;if(P=b===n.HEADER_TYPES.IMAGE?"image/png, image/jpeg":b===n.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",!y)return e.jsx(e.Fragment,{});return e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"}},{children:[e.jsx(t.default,{onClick:e=>{e.stopPropagation(),v(!1),A("")},style:{cursor:"pointer"},width:16,height:16}),e.jsx(p.TitleRegular,{children:"Update Media"})]})),e.jsxs("div",Object.assign({style:{padding:24,borderRadius:4,border:`1px dashed ${o.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:o.DEFAULT_THEME.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:q.loading?"flex":"initial"}},{children:[e.jsxs("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[q.loading?e.jsx(s.Spinner,{size:"large"}):e.jsx("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:o.DEFAULT_THEME.colorsV2.background.base}},{children:b===n.HEADER_TYPES.IMAGE?e.jsx(m.default,{width:40,height:40}):b===n.HEADER_TYPES.VIDEO?e.jsx(u.default,{width:40,height:40}):e.jsx(g.default,{width:40,height:40})})),e.jsx(p.TitleMedium,{children:q.loading?"Upload in progress...":b===n.HEADER_TYPES.IMAGE?"Upload an image":b===n.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document"}),e.jsx(p.BodySecondary,Object.assign({color:o.COLORS.content.secondary},{children:q.loading?"Your image is getting loaded. This may take a couple of minutes.":b===n.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":b===n.HEADER_TYPES.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB"}))]})),!q.loading&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"6px"}},{children:[e.jsx(p.BodyCaption,{children:"Press Enter after adding url/variable to add"}),e.jsx(l.InputWithVariables,{noMaxCharCheck:!0,allowMix:!1,onChange:()=>{},onEnterPress:e=>{e&&(c.validateURL(e)||x.isVariable(e)?(C(e),v(!1),A("")):A("Invalid Url/Variable"))},errorMessage:T,prevVariable:{actualValue:"",variableType:"string"},variablesList:f,placeHolder:"Enter URL/Add variable",showAddButton:I!==d.POD.CAMPAIGN||b===n.HEADER_TYPES.IMAGE})]})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"16px"}},{children:[e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e.jsx(p.BodyCaption,{children:"Or upload media from device"}),e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e.jsx("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e.jsx(i.Button,{matchParentWidth:!0,buttonText:"Upload",buttonType:"secondary",LeadingIcon:j.default,onClick:()=>C(),size:"medium"})}))]})]})),e.jsx("input",{ref:M,style:{display:"none"},type:"file",onChange:q.handleImageUpload,accept:P}),!!q.selectedImage&&e.jsx(r.BikImageCropper,{aspectRatio:15/8,src:q.selectedImage,onCropComplete:q.onCropComplete,onCancel:()=>{q.setLoading(!1),q.setSelectedImage(""),M.current&&(M.current.value="")}})]})};

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

@@ -26,6 +26,7 @@
 	border-radius: 4px;
 	margin-left: 8px;
 	align-items: center;
+	height: 100%;
 `,a=i.default.div`
 	padding-bottom: 0px;
 	min-width: 285px;

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

@@ -5,7 +5,6 @@ export interface EditWhatsAppCarouselTemplateV2Props {
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
     template: WhatsAppCarouselTemplate;
     showVariableModal?: boolean;
-    variableList?: VariableListInterfaceV2[];
     variableListForImage?: VariableListInterfaceV2[];
     discountCode?: string;
     setDiscountCode?: (code: string) => void;
@@ -21,5 +20,5 @@ export interface CarouselProduct {
     productName: string;
     productImage: string;
 }
-declare const EditWhatsAppCarouselTemplateV2: ({ template, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, discountCode, setDiscountCode, }: EditWhatsAppCarouselTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
+declare const EditWhatsAppCarouselTemplateV2: ({ template, whatsappSpecificPickerMeta, showVariableModal, variableListForImage, discountCode, setDiscountCode, }: EditWhatsAppCarouselTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
 export default EditWhatsAppCarouselTemplateV2;