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

package/dist/cjs/components/postPicker/postPicker.js

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

package/dist/cjs/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/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

@@ -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/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"),s=require("../button/Button.js"),r=require("../TypographyStyle.js"),n=require("./SideModal.style.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=i(t);exports.SideModal=t=>d.default.createPortal(e.jsx(n.SideModalStyle,Object.assign({zIndex:t.zIndex},{children:e.jsxs(n.SideModalContainer,Object.assign({width:t.width},{children:[e.jsxs(n.SideModalHeader,Object.assign({headerStyle:Object.assign({},t.headerStyle)},{children:[(null==t?void 0:t.headerCustomComponent)||e.jsx(r.TitleMedium,{children:t.header}),!t.hideCrossButton&&e.jsx(o.default,{width:24,height:24,onClick:t.onClose})]})),e.jsx(n.SideModalBody,Object.assign({hideFooter:t.hideFooter,bodyStyle:Object.assign({},t.bodyStyle)},{children:t.children})),!0===t.hideFooter?null:e.jsxs(n.SideModalFooter,Object.assign({footerDirection:t.footerDirection,footerStyle:Object.assign({},t.footerStyle)},{children:[(t.saveButtonProps||t.cancelButtonProps)&&e.jsxs(n.FooterButtonWrapper,Object.assign({footerDirection:t.footerDirection},{children:[t.saveButtonProps&&e.jsx(s.Button,Object.assign({},t.saveButtonProps)),t.cancelButtonProps&&e.jsx(s.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/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/cjs/components/side-modal/SideModal.style.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js"),o=require("../../constants/zindex.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=i(e);const d=r.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js"),o=require("../../constants/zindex.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=i(e);const r=d.default.div`
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -9,14 +9,14 @@
 	display: flex;
 	align-items: center;
 	justify-content: flex-end;
-`,n=r.default.div`
+`,n=d.default.div`
 	height: 100%;
 	width: ${e=>e.width||"566px"};
 	background: ${t.COLORS.surface.standard};
 	position: relative;
 	display: flex;
 	flex-direction: column;
-`,a=r.default.div`
+`,a=d.default.div`
 	width: 100%;
 	height: 60px;
 	position: sticky;
@@ -31,17 +31,14 @@
 	svg:hover {
 		cursor: pointer;
 	}
-	${t=>{let{headerStyle:o}=t;return e.css`
-		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
-	`}}
-`,s=r.default.div`
+`,s=d.default.div`
 	overflow-y: auto;
 	padding: 24px;
 	height: ${e=>e.hideFooter?"calc(100% - 60px)":"calc(100% - 120px)"};
 	${t=>{let{bodyStyle:o}=t;return e.css`
 		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
 	`}}
-`,l=r.default.div`
+`,p=d.default.div`
 	height: 60px;
 	width: 100%;
 	position: sticky;
@@ -53,11 +50,8 @@
 	background: ${t.COLORS.surface.standard};
 	border-top: 1px solid ${t.COLORS.stroke.primary};
 	padding: 0px 24px;
-	${t=>{let{footerStyle:o}=t;return e.css`
-		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
-	`}}
-`,p=r.default.div`
+`,l=d.default.div`
 	display: flex;
 	flex-direction: ${e=>e.footerDirection||"row"};
 	gap: 8px;
-`;exports.FooterButtonWrapper=p,exports.SideModalBody=s,exports.SideModalContainer=n,exports.SideModalFooter=l,exports.SideModalHeader=a,exports.SideModalStyle=d;
+`;exports.FooterButtonWrapper=l,exports.SideModalBody=s,exports.SideModalContainer=n,exports.SideModalFooter=p,exports.SideModalHeader=a,exports.SideModalStyle=r;

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;