@bikdotai/bik-component-library 0.0.533-analytics-beta56 → 0.0.533-beta.0

package/dist/esm/components/postPicker/postPicker.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import{SearchIcon as i}from"../../assets/icons/searchIcon.js";import{useState as n,useRef as r,useEffect as o}from"react";import{StyledProductGrid as s,StyledProduct as l}from"./PostPicker.styled.js";import{Tag as d}from"../tag/Tag.js";import{ButtonRegular as c,BodyPrimary as p,BodyCaption as m,TitleMedium as h,ButtonLarge as y,BodySecondary as g}from"../TypographyStyle.js";import{unCamelCase as u}from"../../utils/unCamelCase.js";import{PRIMARY as j}from"../../constants/colors.js";import{COLORS as w}from"../../constants/Theme.js";import v from"../../assets/icons/instagram.svg.js";import f from"../../assets/icons/warning.svg.js";import"../tooltips/Tooltip.js";import"../analytics-chips-and-dropdowns/CommonStyles.js";import{AnalyticsDropdown as b}from"../analytics-chips-and-dropdowns/AnalyticsDropdown.js";import"../analytics-chips-and-dropdowns/AnalyticsMetric.js";import"../shimmer/ShimmerComponent/ShimmerStyled.js";import"../../utils/DateUtils.js";import"../analytics-chips-and-dropdowns/chart/LineChart/LineChart.js";import"react-bootstrap";import"../analytics-chips-and-dropdowns/chart/linearChipGroupedChart/LinearChipGroupedChart.styled.js";import"../analytics-chips-and-dropdowns/chart/Pie/PieChartAnalytics.js";import"../analytics-chips-and-dropdowns/chart/Pie/PieChart.js";import"../analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.js";import"../analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js";import"../analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.js";import"../analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.model.js";import"../analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.js";import"../analytics-chips-and-dropdowns/chart/VerticalBarGraph/FunnelVerticalBarGraph.js";import"../analytics-chips-and-dropdowns/chart/heatmap/HeatMap.js";import"../analytics-chips-and-dropdowns/chart/heatmap/HeatMapVertical.js";import"../analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.js";import{StyledModal as C}from"../modals/styledModal.js";import{BikShimmer as D}from"../shimmer/ShimmerComponent/BikShimmer.js";import{ShimmerImage as T}from"../shimmer-image/ShimmerImage.js";import{StateComponent as O,StateInterface as S}from"../states/StateComponent.js";import"../../_virtual/_tslib.js";var k,x;!function(e){e.STORY="story",e.POST="post",e.REEL="reel"}(k||(k={})),function(e){e.Today="Today",e["7_Days"]="7",e["30_Days"]="30",e.custom="custom",e.Yesterday="Yesterday"}(x||(x={}));const B=[{label:"Today",value:"today",key:x.Today,typeValue:[new Date,new Date]},{label:"Last 7 days",value:"7 days",key:x["7_Days"],typeValue:[new Date((new Date).setDate((new Date).getDate()-6)),new Date]},{label:"Last 30 days",value:"30 days",key:x["30_Days"],typeValue:[new Date((new Date).setDate((new Date).getDate()-29)),new Date]},{label:"Custom range",value:"calender",key:x.custom,isCustom:!0,dateRangeSelectionOptions:{selectRange:!0,maxDate:new Date((new Date).setMonth((new Date).getMonth()+3))}}],I=x=>{var I,V;const[L,P]=n(null!==(I=x.previouslySelected)&&void 0!==I?I:[]),[G,_]=n(""),[E,N]=n(!1),[R,$]=n(x.media),[M,A]=n(!1),[F,H]=n(!1),[U,z]=n(!1),Y=r(null);o((()=>{x.media.length||(N(!0),setTimeout((()=>{N(!1)}),2e3)),P(x.selected||[])}),[]),o((()=>{x.media.length>0&&($(x.media),N(!1))}),[null===(V=null==x?void 0:x.media)||void 0===V?void 0:V.length]),o((()=>{L.length>0&&_("")}),[L.length]),o((()=>{M&&($(x.media),H(!1))}),[M]),o((()=>{const e=e=>{document.getElementById("analytic-dropdown").contains(e.target)||z(!U)},t=document.getElementById("post-picker");return t&&t.addEventListener("click",e),()=>{t&&t.removeEventListener("click",e)}}));return e("div",Object.assign({ref:Y},{children:t(C,Object.assign({zIndex:201,open:x.showModal,headingTitle:x.title,onClose:x.onClose,centralContainerStyles:{width:1071,height:x.showFilter?650:564},primaryButton:{disabled:!R.length,buttonType:"primary",buttonText:`Select ${u(x.mediaType)}`,onClick:()=>{L.length?x.onSelect(L):_(`Please select a ${x.mediaType} to proceed`)}},secondaryButton:{buttonType:"secondary",buttonText:"Back",onClick:()=>x.onClose()},footerLeftCustomElement:G?e(d,{tagText:G,type:"negative",LeadingIcon:f}):L.length?t(g,{children:[L.length," selected"]}):null,id:"post-picker"},{children:[x.showFilter&&t("div",Object.assign({style:{marginTop:24,marginBottom:24,padding:"0 24px",display:"flex",flexDirection:"row",gap:8,alignItems:"center"}},{children:[e(b,{options:B,placeholder:"posted on",resetDropdown:M,onOptionSelected:e=>{var t,a;let i=null,n=null;"Custom range"===e.label?(i=(null===(t=null==e?void 0:e.selectedRange)||void 0===t?void 0:t[0])||new Date,n=(null===(a=null==e?void 0:e.selectedRange)||void 0===a?void 0:a[1])||new Date):(i=e.typeValue[0],n=e.typeValue[1]);const r=x.media.filter((e=>function(e,t,a){const i=new Date(e),n=new Date(t),r=new Date(a);return i>=n&&i<=r}(e.timestamp,i,n)));$(r),H(!0),A(!1)},closeDropdown:U}),F&&e(c,Object.assign({color:w.content.secondary,onClick:()=>A(!0),style:{cursor:"pointer"}},{children:"Clear"}))]})),E?e("div",Object.assign({style:{padding:"0 24px"}},{children:e(D,{boxes:[{width:(x.mediaType==k.POST?148:104)+"px",height:(x.mediaType==k.POST?148:172)+"px"}]})})):e(a,{children:R&&R.length?e(s,Object.assign({mediaType:x.mediaType},{children:R.map((a=>{return t(l,Object.assign({mediaType:x.mediaType,className:""+(i=a,n=L,n.some((e=>e.id===i.id))?"selected":""),onClick:()=>{return e=a,void P((()=>L.find((t=>t.id===e.id))?L.filter((t=>t.id!==e.id)):!x.limit||L.length<x.limit?[...L,e]:(_(`Only ${x.limit} ${x.mediaType}s can be selected`),L)));var e}},{children:[e(T,{imageUrl:a.imageUrl,width:x.mediaType==k.POST?148:104,height:x.mediaType==k.POST?148:172,alt:a.overlayCaption}),t("div",Object.assign({className:"overlay"},{children:[e("a",Object.assign({target:"_blank",rel:"noreferrer",href:a.redirectionUrl},{children:t("div",Object.assign({className:"overlay__redirection"},{children:[e(v,{height:22,width:22}),e(p,Object.assign({color:j,style:{fontWeight:500}},{children:"View"}))]}))})),e("div",Object.assign({className:"overlay__caption"},{children:e(m,Object.assign({color:w.content.placeholder},{children:a.overlayCaption}))}))]}))]}),a.id);var i,n}))})):e("div",Object.assign({style:{justifyContent:"center",alignItems:"center",display:"flex",height:422}},{children:x.media.length?R.length?e(a,{}):t("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"16px"}},{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",width:"48px",height:"48px",backgroundColor:`${w.background.inverse}`,borderRadius:"50%"}},{children:e(i,{color:w.content.primaryInverse})})),t("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:"8px"}},{children:[e(h,{children:"No results found"}),e(p,{children:"Sorry we could not find any results for the selected filter"})]})),e("div",Object.assign({onClick:()=>{A(!0)},style:{cursor:"pointer"}},{children:e(y,Object.assign({color:`${w.content.brand}`},{children:"Clear Filter"}))}))]})):e(O,{states:S.WARNING,heading:`No ${x.mediaType}s on your account`,subline:`There seems to be no ${x.mediaType}s on your account`,isButtonEnabled:!1,width:400})}))})]}))}))};export{x as DateKeys,k as MEDIA_TYPES,I as PostPicker,B as dateOptions};
+import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import{SearchIcon as i}from"../../assets/icons/searchIcon.js";import{useState as n,useRef as r,useEffect as o}from"react";import{StyledProductGrid as s,StyledProduct as l}from"./PostPicker.styled.js";import{Tag as d}from"../tag/Tag.js";import{ButtonRegular as c,BodyPrimary as p,BodyCaption as m,TitleMedium as h,ButtonLarge as y,BodySecondary as g}from"../TypographyStyle.js";import{unCamelCase as u}from"../../utils/unCamelCase.js";import{PRIMARY as j}from"../../constants/colors.js";import{COLORS as w}from"../../constants/Theme.js";import v from"../../assets/icons/instagram.svg.js";import f from"../../assets/icons/warning.svg.js";import"../tooltips/Tooltip.js";import"../analytics-chips-and-dropdowns/CommonStyles.js";import{AnalyticsDropdown as b}from"../analytics-chips-and-dropdowns/AnalyticsDropdown.js";import"../analytics-chips-and-dropdowns/AnalyticsMetric.js";import"../shimmer/ShimmerComponent/ShimmerStyled.js";import"../../utils/DateUtils.js";import"../analytics-chips-and-dropdowns/chart/LineChart/LineChart.js";import"react-bootstrap";import"../analytics-chips-and-dropdowns/chart/linearChipGroupedChart/LinearChipGroupedChart.styled.js";import"../analytics-chips-and-dropdowns/chart/Pie/PieChartAnalytics.js";import"../analytics-chips-and-dropdowns/chart/Pie/PieChart.js";import"../analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.js";import"../analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js";import"../analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.js";import"../analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.model.js";import"../analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.js";import"../analytics-chips-and-dropdowns/chart/heatmap/HeatMap.js";import"../analytics-chips-and-dropdowns/chart/heatmap/HeatMapVertical.js";import"../analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.js";import{StyledModal as C}from"../modals/styledModal.js";import{BikShimmer as D}from"../shimmer/ShimmerComponent/BikShimmer.js";import{ShimmerImage as T}from"../shimmer-image/ShimmerImage.js";import{StateComponent as O,StateInterface as S}from"../states/StateComponent.js";import"../../_virtual/_tslib.js";var k,x;!function(e){e.STORY="story",e.POST="post",e.REEL="reel"}(k||(k={})),function(e){e.Today="Today",e["7_Days"]="7",e["30_Days"]="30",e.custom="custom",e.Yesterday="Yesterday"}(x||(x={}));const B=[{label:"Today",value:"today",key:x.Today,typeValue:[new Date,new Date]},{label:"Last 7 days",value:"7 days",key:x["7_Days"],typeValue:[new Date((new Date).setDate((new Date).getDate()-6)),new Date]},{label:"Last 30 days",value:"30 days",key:x["30_Days"],typeValue:[new Date((new Date).setDate((new Date).getDate()-29)),new Date]},{label:"Custom range",value:"calender",key:x.custom,isCustom:!0,dateRangeSelectionOptions:{selectRange:!0,maxDate:new Date((new Date).setMonth((new Date).getMonth()+3))}}],I=x=>{var I,L;const[P,V]=n(null!==(I=x.previouslySelected)&&void 0!==I?I:[]),[_,G]=n(""),[E,N]=n(!1),[R,$]=n(x.media),[M,A]=n(!1),[H,U]=n(!1),[z,F]=n(!1),Y=r(null);o((()=>{x.media.length||(N(!0),setTimeout((()=>{N(!1)}),2e3)),V(x.selected||[])}),[]),o((()=>{x.media.length>0&&($(x.media),N(!1))}),[null===(L=null==x?void 0:x.media)||void 0===L?void 0:L.length]),o((()=>{P.length>0&&G("")}),[P.length]),o((()=>{M&&($(x.media),U(!1))}),[M]),o((()=>{const e=e=>{document.getElementById("analytic-dropdown").contains(e.target)||F(!z)},t=document.getElementById("post-picker");return t&&t.addEventListener("click",e),()=>{t&&t.removeEventListener("click",e)}}));return e("div",Object.assign({ref:Y},{children:t(C,Object.assign({zIndex:201,open:x.showModal,headingTitle:x.title,onClose:x.onClose,centralContainerStyles:{width:1071,height:x.showFilter?650:564},primaryButton:{disabled:!R.length,buttonType:"primary",buttonText:`Select ${u(x.mediaType)}`,onClick:()=>{P.length?x.onSelect(P):G(`Please select a ${x.mediaType} to proceed`)}},secondaryButton:{buttonType:"secondary",buttonText:"Back",onClick:()=>x.onClose()},footerLeftCustomElement:_?e(d,{tagText:_,type:"negative",LeadingIcon:f}):P.length?t(g,{children:[P.length," selected"]}):null,id:"post-picker"},{children:[x.showFilter&&t("div",Object.assign({style:{marginTop:24,marginBottom:24,padding:"0 24px",display:"flex",flexDirection:"row",gap:8,alignItems:"center"}},{children:[e(b,{options:B,placeholder:"posted on",resetDropdown:M,onOptionSelected:e=>{var t,a;let i=null,n=null;"Custom range"===e.label?(i=(null===(t=null==e?void 0:e.selectedRange)||void 0===t?void 0:t[0])||new Date,n=(null===(a=null==e?void 0:e.selectedRange)||void 0===a?void 0:a[1])||new Date):(i=e.typeValue[0],n=e.typeValue[1]);const r=x.media.filter((e=>function(e,t,a){const i=new Date(e),n=new Date(t),r=new Date(a);return i>=n&&i<=r}(e.timestamp,i,n)));$(r),U(!0),A(!1)},closeDropdown:z}),H&&e(c,Object.assign({color:w.content.secondary,onClick:()=>A(!0),style:{cursor:"pointer"}},{children:"Clear"}))]})),E?e("div",Object.assign({style:{padding:"0 24px"}},{children:e(D,{boxes:[{width:(x.mediaType==k.POST?148:104)+"px",height:(x.mediaType==k.POST?148:172)+"px"}]})})):e(a,{children:R&&R.length?e(s,Object.assign({mediaType:x.mediaType},{children:R.map((a=>{return t(l,Object.assign({mediaType:x.mediaType,className:""+(i=a,n=P,n.some((e=>e.id===i.id))?"selected":""),onClick:()=>{return e=a,void V((()=>P.find((t=>t.id===e.id))?P.filter((t=>t.id!==e.id)):!x.limit||P.length<x.limit?[...P,e]:(G(`Only ${x.limit} ${x.mediaType}s can be selected`),P)));var e}},{children:[e(T,{imageUrl:a.imageUrl,width:x.mediaType==k.POST?148:104,height:x.mediaType==k.POST?148:172,alt:a.overlayCaption}),t("div",Object.assign({className:"overlay"},{children:[e("a",Object.assign({target:"_blank",rel:"noreferrer",href:a.redirectionUrl},{children:t("div",Object.assign({className:"overlay__redirection"},{children:[e(v,{height:22,width:22}),e(p,Object.assign({color:j,style:{fontWeight:500}},{children:"View"}))]}))})),e("div",Object.assign({className:"overlay__caption"},{children:e(m,Object.assign({color:w.content.placeholder},{children:a.overlayCaption}))}))]}))]}),a.id);var i,n}))})):e("div",Object.assign({style:{justifyContent:"center",alignItems:"center",display:"flex",height:422}},{children:x.media.length?R.length?e(a,{}):t("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"16px"}},{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",width:"48px",height:"48px",backgroundColor:`${w.background.inverse}`,borderRadius:"50%"}},{children:e(i,{color:w.content.primaryInverse})})),t("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:"8px"}},{children:[e(h,{children:"No results found"}),e(p,{children:"Sorry we could not find any results for the selected filter"})]})),e("div",Object.assign({onClick:()=>{A(!0)},style:{cursor:"pointer"}},{children:e(y,Object.assign({color:`${w.content.brand}`},{children:"Clear Filter"}))}))]})):e(O,{states:S.WARNING,heading:`No ${x.mediaType}s on your account`,subline:`There seems to be no ${x.mediaType}s on your account`,isButtonEnabled:!1,width:400})}))})]}))}))};export{x as DateKeys,k as MEDIA_TYPES,I as PostPicker,B as dateOptions};

package/dist/esm/components/radioButton/RadioButton.d.ts

@@ -7,8 +7,5 @@ export type RadioButtonProps = {
     onValueChange: (checked: boolean, value?: string) => void;
     skipHoverState?: boolean;
     size?: 'DEFAULT' | 'SMALL';
-    skipSelectingOff?: boolean;
-    labelSize?: 'DEFAULT' | 'MEDIUM';
-    boldOnChecked?: boolean;
 };
 export declare const RadioButton: React.FC<RadioButtonProps>;

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

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

package/dist/esm/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/esm/components/radioList/RadioList.js

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

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

@@ -3,7 +3,6 @@ import { ButtonProps } from '../button/model';
 export interface SideModalProps {
     header: string;
     children: React.ReactNode;
-    headerCustomComponent?: React.ReactNode;
     footerCustomComponent?: React.ReactNode;
     footerDirection?: 'row' | 'row-reverse';
     hideCrossButton?: boolean;
@@ -14,7 +13,6 @@ export interface SideModalProps {
     zIndex?: number;
     hideFooter?: boolean;
     bodyStyle?: React.CSSProperties;
-    headerStyle?: React.CSSProperties;
-    footerStyle?: React.CSSProperties;
+    element?: Element | DocumentFragment;
 }
 export declare const SideModal: React.FC<SideModalProps>;

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

@@ -1 +1 @@
-import{jsx as o,jsxs as t,Fragment as e}from"react/jsx-runtime";import r from"react-dom";import n from"../../assets/icons/cross.svg.js";import{Button as s}from"../button/Button.js";import{TitleMedium as i}from"../TypographyStyle.js";import{SideModalStyle as c,SideModalContainer as d,SideModalHeader as a,SideModalBody as l,SideModalFooter as h,FooterButtonWrapper as m}from"./SideModal.style.js";const p=p=>r.createPortal(o(c,Object.assign({zIndex:p.zIndex},{children:t(d,Object.assign({width:p.width},{children:[t(a,Object.assign({headerStyle:Object.assign({},p.headerStyle)},{children:[(null==p?void 0:p.headerCustomComponent)||o(i,{children:p.header}),!p.hideCrossButton&&o(n,{width:24,height:24,onClick:p.onClose})]})),o(l,Object.assign({hideFooter:p.hideFooter,bodyStyle:Object.assign({},p.bodyStyle)},{children:p.children})),!0===p.hideFooter?null:t(h,Object.assign({footerDirection:p.footerDirection,footerStyle:Object.assign({},p.footerStyle)},{children:[(p.saveButtonProps||p.cancelButtonProps)&&t(m,Object.assign({footerDirection:p.footerDirection},{children:[p.saveButtonProps&&o(s,Object.assign({},p.saveButtonProps)),p.cancelButtonProps&&o(s,Object.assign({},p.cancelButtonProps))]})),p.footerCustomComponent?p.footerCustomComponent:o(e,{})]}))]}))})),document.body);export{p as SideModal};
+import{jsx as o,jsxs as e,Fragment as t}from"react/jsx-runtime";import r from"react-dom";import i from"../../assets/icons/cross.svg.js";import{Button as n}from"../button/Button.js";import{TitleMedium as s}from"../TypographyStyle.js";import{SideModalStyle as c,SideModalContainer as d,SideModalHeader as l,SideModalBody as m,SideModalFooter as a,FooterButtonWrapper as h}from"./SideModal.style.js";const j=j=>{var p;return r.createPortal(o(c,Object.assign({zIndex:j.zIndex},{children:e(d,Object.assign({width:j.width},{children:[e(l,{children:[o(s,{children:j.header}),!j.hideCrossButton&&o(i,{width:24,height:24,onClick:j.onClose})]}),o(m,Object.assign({hideFooter:j.hideFooter,bodyStyle:Object.assign({},j.bodyStyle)},{children:j.children})),!0===j.hideFooter?null:e(a,Object.assign({footerDirection:j.footerDirection},{children:[e(h,Object.assign({footerDirection:j.footerDirection},{children:[o(n,Object.assign({},j.saveButtonProps)),o(n,Object.assign({},j.cancelButtonProps))]})),j.footerCustomComponent?j.footerCustomComponent:o(t,{})]}))]}))})),null!==(p=j.element)&&void 0!==p?p:document.body)};export{j as SideModal};

package/dist/esm/components/side-modal/SideModal.style.d.ts

@@ -4,16 +4,13 @@ export declare const SideModalStyle: import("styled-components").StyledComponent
 export declare const SideModalContainer: import("styled-components").StyledComponent<"div", any, {
     width?: string | undefined;
 }, never>;
-export declare const SideModalHeader: import("styled-components").StyledComponent<"div", any, {
-    headerStyle: React.CSSProperties;
-}, never>;
+export declare const SideModalHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SideModalBody: import("styled-components").StyledComponent<"div", any, {
     hideFooter?: boolean | undefined;
     bodyStyle: React.CSSProperties;
 }, never>;
 export declare const SideModalFooter: import("styled-components").StyledComponent<"div", any, {
     footerDirection?: "row" | "row-reverse" | undefined;
-    footerStyle: React.CSSProperties;
 }, never>;
 export declare const FooterButtonWrapper: import("styled-components").StyledComponent<"div", any, {
     footerDirection?: "row" | "row-reverse" | undefined;

package/dist/esm/components/side-modal/SideModal.style.js

@@ -31,9 +31,6 @@ import e,{css as t}from"styled-components";import{COLORS as i}from"../../constan
 	svg:hover {
 		cursor: pointer;
 	}
-	${e=>{let{headerStyle:i}=e;return t`
-		${Object.keys(i).map((e=>`${e}: ${i[e]};`)).join("\n")}
-	`}}
 `,s=e.div`
 	overflow-y: auto;
 	padding: 24px;
@@ -53,9 +50,6 @@ import e,{css as t}from"styled-components";import{COLORS as i}from"../../constan
 	background: ${i.surface.standard};
 	border-top: 1px solid ${i.stroke.primary};
 	padding: 0px 24px;
-	${e=>{let{footerStyle:i}=e;return t`
-		${Object.keys(i).map((e=>`${e}: ${i[e]};`)).join("\n")}
-	`}}
 `,a=e.div`
 	display: flex;
 	flex-direction: ${e=>e.footerDirection||"row"};

package/dist/esm/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/esm/components/spinner/Spinner.js

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

package/dist/esm/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/esm/components/states/StateComponent.js

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

package/dist/esm/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/esm/components/states/StateComponent.styled.js

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

package/dist/esm/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/esm/components/states-modal/StateModalComponent.js

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

package/dist/esm/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/esm/components/stepper/Stepper.js

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

package/dist/esm/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/esm/components/stepper/Stepper.styled.js

@@ -1,10 +1,10 @@
-import e from"styled-components";import{getTheme as t}from"./themes.js";const i=e.div`
+import e from"styled-components";import{getTheme as t}from"./themes.js";const o=e.div`
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
 	gap: 16px;
-`,o=e.div`
+`,i=e.div`
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
@@ -26,9 +26,9 @@ import e from"styled-components";import{getTheme as t}from"./themes.js";const i=
 		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 {
@@ -80,4 +80,4 @@ import e from"styled-components";import{getTheme as t}from"./themes.js";const i=
 		align-items: center;
 		overflow-y: auto;
 	}
-`;export{o as SingleStepperChildContainer,i as StepperContainer};
+`;export{i as SingleStepperChildContainer,o as StepperContainer};

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

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

package/dist/esm/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/esm/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/esm/components/template-context-mapper/TemplateContextMapper.js

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

package/dist/esm/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/esm/components/template-context-mapper/context/templateModalContext.js

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

package/dist/esm/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/esm/components/template-context-mapper/custom-hooks/useAdditionalVariables.js

@@ -1 +1 @@
-const a=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};export{a as useAdditionalVariables};
+const a=a=>{const{variableList:e,categoryDisplayName:i,variableDisplayName:l,variableValue:r}=a;if(!e)return e;const s={description:i,displayName:i,orderId:1,variables:{[l]:{description:void 0,displayName:l,actualValue:r,variableType:"any",isAvailable:!0}}};return e.find((a=>a.displayName===i))||e.unshift(s),e};export{a as updateVariables};

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

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

package/dist/esm/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/esm/components/template-context-mapper/modalElements/Body.js

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

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

@@ -1,4 +1,4 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"react";import i from"styled-components";import{Spinner as p}from"../../spinner/Spinner.js";import{TemplatePreview as a}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as o}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../template-preview/models/TemplateMeta.js";import"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as s}from"../../template-preview/models/Channels.js";const m=i.div`
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"react";import i from"styled-components";import{Spinner as p}from"../../spinner/Spinner.js";import{TemplatePreview as a}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as o}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as m}from"../../template-preview/models/Channels.js";const s=i.div`
 	background: ${o.surface.standard};
 	border: 1px solid ${o.stroke.primary};
 	border-radius: 8px;
@@ -17,4 +17,4 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"react";import i
 	height: 6px;
 	background: #d9d9d9;
 	border-radius: 3px;
-`,n=r.forwardRef(((r,i)=>{let{display_content:o,showSampleValues:n}=r;return e(m,Object.assign({ref:i},{children:[e(l,{children:[t(d,{}),t(d,{}),t(d,{})]}),t("div",{children:o?t(a,{showSampleValues:n,channel:s.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}}}):t("div",Object.assign({style:{padding:20}},{children:t(p,{size:"small"})}))})]}))}));n.displayName="DesktopPreview";export{n as default};
+`,n=r.forwardRef(((r,i)=>{let{display_content:o,showSampleValues:n}=r;return e(s,Object.assign({ref:i},{children:[e(l,{children:[t(d,{}),t(d,{}),t(d,{})]}),t("div",{children:o?t(a,{showSampleValues:n,channel:m.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}}}):t("div",Object.assign({style:{padding:20}},{children:t(p,{size:"small"})}))})]}))}));n.displayName="DesktopPreview";export{n as default};

package/dist/esm/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;