@bikdotai/bik-component-library 0.0.639--beta0.5 → 0.0.639--beta0.7

package/dist/cjs/components/dropdown/MenuItem/MenuItem.d.ts

@@ -4,5 +4,6 @@ export type MenuItemDropdownProps = OpenDropdownProps & {
     isHorizontal: boolean;
     children?: React.ReactNode;
     hideBorder?: boolean;
+    isNewTag?: boolean;
 };
 export declare const MenuItemDropdown: React.FC<MenuItemDropdownProps>;

package/dist/cjs/components/dropdown/MenuItem/MenuItem.js

@@ -1,5 +1,20 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../assets/icons/horizontal_dots.svg.js"),o=require("../../../assets/icons/vertical_dots.svg.js"),n=require("styled-components"),t=require("../DropdownPopover/index.js");require("../Dropdown.js"),require("../ChipDropdown.js"),require("react"),require("../../zeroState/ZeroState.js"),require("../../TypographyStyle.js");var s=require("../../../constants/Theme.js");require("../OpenedDropdown/components/description/Description.styled.js"),require("../../checkBox/CheckBox.styled.js"),require("../../list-item/ListItem.js"),require("../OpenedDropdown/components/menu/FreeFormMenu.styled.js"),require("../OpenedDropdown/components/menu/MenuItem.js"),require("../OpenedDropdown/components/menu/MenuList.styled.js"),require("../../button/Button.js"),require("../OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js"),require("../OpenedDropdown/components/OpennedDropdown.styled.js");var i=require("../../icon-button/IconButton.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../input/Input.js");const d=u(n).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../assets/icons/horizontal_dots.svg.js"),o=require("../../../assets/icons/vertical_dots.svg.js"),t=require("styled-components"),n=require("../DropdownPopover/index.js");require("../Dropdown.js"),require("../ChipDropdown.js"),require("react"),require("../../zeroState/ZeroState.js"),require("../../TypographyStyle.js");var s=require("../../../constants/Theme.js");require("../OpenedDropdown/components/description/Description.styled.js"),require("../../checkBox/CheckBox.styled.js"),require("../../list-item/ListItem.js"),require("../OpenedDropdown/components/menu/FreeFormMenu.styled.js"),require("../OpenedDropdown/components/menu/MenuItem.js"),require("../OpenedDropdown/components/menu/MenuList.styled.js"),require("../../button/Button.js"),require("../OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js"),require("../OpenedDropdown/components/OpennedDropdown.styled.js");var i=require("../../icon-button/IconButton.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../input/Input.js");const u=d(t).default.div`
 	:hover {
 		background: ${s.COLORS.surface.subdued};
 	}
-`,p=n=>e.jsx(d,{children:e.jsx(t.DropdownPopover,Object.assign({},n,{children:e.jsx("div",{children:e.jsx(i.IconButton,{Icon:n.isHorizontal?r.default:o.default,bordered:!(null==n?void 0:n.hideBorder)})})}))});p.displayName="MenuItemDropdown",exports.MenuItemDropdown=p;
+	position: ${e=>e.isNewTag?"":"relative"};
+	.new--tag {
+		box-sizing: border-box;
+		position: absolute;
+		right: -8px;
+		top: -5px;
+		border-radius: 50%;
+		width: 14px;
+		height: 14px;
+		background: ${s.COLORS.background.negative.vibrant};
+		border: 1.25px solid ${s.COLORS.surface.standard};
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+`,p=t=>e.jsx(u,Object.assign({isNewTag:t.isNewTag},{children:e.jsxs(n.DropdownPopover,Object.assign({},t,{children:[e.jsx("div",{children:e.jsx(i.IconButton,{Icon:t.isHorizontal?r.default:o.default,bordered:!(null==t?void 0:t.hideBorder)})}),t.isNewTag?e.jsx("div",{className:"new--tag"}):null]}))}));p.displayName="MenuItemDropdown",exports.MenuItemDropdown=p;

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

@@ -4,6 +4,7 @@ declare const TemplateAnalyticsComponent: React.FC<TemplateAnalyticsComponentI>;
 export default TemplateAnalyticsComponent;
 export declare const RightPanelTemplateAnalytics: React.FC<{
     analyticsData: TemplateAnalyticsDataI;
+    skipTitle?: boolean;
 }>;
 export declare const AnalyticsItem: React.FC<{
     icon: React.ElementType;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/alert_triangle.svg.js"),l=require("../../../assets/icons/tick_double.svg.js"),s=require("react"),a=require("../../modals/styledModal.js"),n=require("../../tag/Tag.js"),i=require("../../template-preview/models/WhatsAppTemplate.js"),c=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),o=require("../styles/TemplateAnalyticsStyles.js"),d=require("../utils/SegmentConstants.js"),u=require("./TemplateAnalyticsSkeleton.js");const j=t=>{let{analyticsData:s}=t;return e.jsxs(o.RightPanelContainer,{children:[e.jsx(c.TitleSmall,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e.jsx("div",Object.assign({className:"mt-3"},{children:d.ANALYTICS_ENGAGEMENT_MAP.map(((t,l)=>e.jsx(g,{icon:t.icon,title:t.title,value:s[t.valName]||0,percentValue:t.percentValName?s[t.percentValName]:null},l)))})),(null==s?void 0:s.clickAnalytics)&&e.jsxs(e.Fragment,{children:[e.jsx(c.TitleSmall,Object.assign({color:r.COLORS.content.secondary},{children:"Clicked"})),e.jsx("div",Object.assign({className:"mt-3"},{children:Object.entries(s.clickAnalytics).map(((t,s)=>{let[a,n]=t;return e.jsx(g,{icon:l.default,title:a,value:n.totalClicks||0,percentValue:n.clickPercentage},s)}))}))]})]})},g=t=>{let{icon:l,title:s,value:a,percentValue:i}=t;return e.jsxs("div",Object.assign({className:"each--analytics--container"},{children:[e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[e.jsx("div",Object.assign({className:"each--icon--container"},{children:e.jsx(l,{width:"16px",height:"16px",color:r.COLORS.background.brand})})),e.jsx(c.Caption,{children:s})]})),e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[i?e.jsx(n.Tag,{tagText:i||0,theme:"light",type:"neutral"}):e.jsx(e.Fragment,{}),e.jsx(o.CustomTitleMedium,{children:a})]}))]}))};exports.AnalyticsItem=g,exports.RightPanelTemplateAnalytics=j,exports.default=l=>{let{templateAnalytics:n,onClose:g,onProceed:h,onCancel:m,headingTitle:p,headingSubtitle:x,templateId:y}=l;const{templateQuality:T=i.TEMPLATE_QUALITY.GREEN,fetchAnalytics:b}=n||{},{icon:O,title:A,subline:C}=d.TEMPLATE_QUALITY_MAP[T||i.TEMPLATE_QUALITY.GREEN],[S,v]=s.useState({}),[N,E]=s.useState(!0);return s.useEffect((()=>{null==b||b(y||"").then((e=>{console.log("data",e),e.analytics&&v(e.analytics),E(!1)}))}),[]),e.jsx(a.StyledModal,Object.assign({open:!0,headingTitle:p,tintedHeader:!0,modalHeaderStyles:{backgroundColor:r.COLORS.surface.subdued},onBackPress:()=>{null==g||g()},headingSubtitle:x,footerShadow:!0,primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{null==g||g(),null==m||m()},disabled:N},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:()=>{null==h||h()},disabled:N},onClose:()=>{null==g||g()},width:"700px"},{children:e.jsxs(o.TemplateContainer,{children:[e.jsx(o.LeftPanelContainer,{children:e.jsxs("div",Object.assign({className:"inside--container"},{children:[O&&e.jsx("div",Object.assign({className:"icon--container"},{children:e.jsx(t.default,{width:40,height:40,color:r.COLORS.content.warning})})),A&&e.jsxs(c.TitleRegular,{children:[A," template"]}),e.jsx(c.Caption,Object.assign({style:{textAlign:"center"},color:r.COLORS.content.secondary},{children:C}))]}))}),N?e.jsx(u.TemplateAnalyticsSkeleton,{}):e.jsx(j,{analyticsData:S})]})}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/alert_triangle.svg.js"),l=require("../../../assets/icons/tick_double.svg.js"),s=require("react"),a=require("../../modals/styledModal.js"),n=require("../../tag/Tag.js"),i=require("../../template-preview/models/WhatsAppTemplate.js"),c=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),o=require("../styles/TemplateAnalyticsStyles.js"),d=require("../utils/SegmentConstants.js"),u=require("./TemplateAnalyticsSkeleton.js");const j=t=>{let{analyticsData:s,skipTitle:a}=t;return e.jsxs(o.RightPanelContainer,{children:[a?e.jsx(e.Fragment,{}):e.jsx(c.TitleSmall,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e.jsx("div",Object.assign({className:"mt-3"},{children:d.ANALYTICS_ENGAGEMENT_MAP.map(((t,l)=>e.jsx(g,{icon:t.icon,title:t.title,value:s[t.valName]||0,percentValue:t.percentValName?s[t.percentValName]:null},l)))})),(null==s?void 0:s.clickAnalytics)&&e.jsxs(e.Fragment,{children:[e.jsx(c.TitleSmall,Object.assign({color:r.COLORS.content.secondary},{children:"Clicked"})),e.jsx("div",Object.assign({className:"mt-3"},{children:Object.entries(s.clickAnalytics).map(((t,s)=>{let[a,n]=t;return e.jsx(g,{icon:l.default,title:a,value:n.totalClicks||0,percentValue:n.clickPercentage},s)}))}))]})]})},g=t=>{let{icon:l,title:s,value:a,percentValue:i}=t;return e.jsxs("div",Object.assign({className:"each--analytics--container"},{children:[e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[e.jsx("div",Object.assign({className:"each--icon--container"},{children:e.jsx(l,{width:"16px",height:"16px",color:r.COLORS.background.brand})})),e.jsx(c.Caption,{children:s})]})),e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[i?e.jsx(n.Tag,{tagText:i||0,theme:"light",type:"neutral"}):e.jsx(e.Fragment,{}),e.jsx(o.CustomTitleMedium,{children:a})]}))]}))};exports.AnalyticsItem=g,exports.RightPanelTemplateAnalytics=j,exports.default=l=>{let{templateAnalytics:n,onClose:g,onProceed:m,onCancel:h,headingTitle:p,headingSubtitle:x,templateId:y}=l;const{templateQuality:T=i.TEMPLATE_QUALITY.GREEN,fetchAnalytics:b}=n||{},{icon:O,title:A,subline:C}=d.TEMPLATE_QUALITY_MAP[T||i.TEMPLATE_QUALITY.GREEN],[S,v]=s.useState({}),[N,k]=s.useState(!0);return s.useEffect((()=>{null==b||b(y||"").then((e=>{console.log("data",e),e.analytics&&v(e.analytics),k(!1)}))}),[]),e.jsx(a.StyledModal,Object.assign({open:!0,headingTitle:p,tintedHeader:!0,modalHeaderStyles:{backgroundColor:r.COLORS.surface.subdued},onBackPress:()=>{null==g||g()},headingSubtitle:x,footerShadow:!0,primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{null==g||g(),null==h||h()},disabled:N},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:()=>{null==m||m()},disabled:N},onClose:()=>{null==g||g()},width:"700px"},{children:e.jsxs(o.TemplateContainer,{children:[e.jsx(o.LeftPanelContainer,{children:e.jsxs("div",Object.assign({className:"inside--container"},{children:[O&&e.jsx("div",Object.assign({className:"icon--container"},{children:e.jsx(t.default,{width:40,height:40,color:r.COLORS.content.warning})})),A&&e.jsxs(c.TitleRegular,{children:[A," template"]}),e.jsx(c.Caption,Object.assign({style:{textAlign:"center"},color:r.COLORS.content.secondary},{children:C}))]}))}),N?e.jsx(u.TemplateAnalyticsSkeleton,{}):e.jsx(j,{analyticsData:S})]})}))};

package/dist/cjs/components/template-context-mapper/styles/TemplateAnalyticsStyles.js

@@ -1,9 +1,6 @@
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../TypographyStyle.js"),t=require("../../../constants/Theme.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(require("styled-components"));const r=n.default.div`
 	display: flex;
 	padding: 16px 0px;
-	.align--center {
-		align-items: center;
-	}
 `,a=n.default.div`
 	max-width: 450px;
 	height: 456px;
@@ -31,6 +28,9 @@
 		justify-content: center;
 		border-radius: 4px;
 	}
+	.align--center {
+		align-items: center;
+	}
 `,o=n.default.div`
 	padding: 0px 23px 32px 23px;
 	flex: 1;

package/dist/esm/components/dropdown/MenuItem/MenuItem.d.ts

@@ -4,5 +4,6 @@ export type MenuItemDropdownProps = OpenDropdownProps & {
     isHorizontal: boolean;
     children?: React.ReactNode;
     hideBorder?: boolean;
+    isNewTag?: boolean;
 };
 export declare const MenuItemDropdown: React.FC<MenuItemDropdownProps>;

package/dist/esm/components/dropdown/MenuItem/MenuItem.js

@@ -1,5 +1,20 @@
-import{jsx as o}from"react/jsx-runtime";import t from"../../../assets/icons/horizontal_dots.svg.js";import e from"../../../assets/icons/vertical_dots.svg.js";import n from"styled-components";import{DropdownPopover as r}from"../DropdownPopover/index.js";import"../Dropdown.js";import"../ChipDropdown.js";import"react";import"../../zeroState/ZeroState.js";import"../../TypographyStyle.js";import{COLORS as s}from"../../../constants/Theme.js";import"../OpenedDropdown/components/description/Description.styled.js";import"../../checkBox/CheckBox.styled.js";import"../../list-item/ListItem.js";import"../OpenedDropdown/components/menu/FreeFormMenu.styled.js";import"../OpenedDropdown/components/menu/MenuItem.js";import"../OpenedDropdown/components/menu/MenuList.styled.js";import"../../button/Button.js";import"../OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../OpenedDropdown/components/OpennedDropdown.styled.js";import{IconButton as p}from"../../icon-button/IconButton.js";import"../../input/Input.js";const i=n.div`
+import{jsx as o,jsxs as e}from"react/jsx-runtime";import t from"../../../assets/icons/horizontal_dots.svg.js";import n from"../../../assets/icons/vertical_dots.svg.js";import r from"styled-components";import{DropdownPopover as s}from"../DropdownPopover/index.js";import"../Dropdown.js";import"../ChipDropdown.js";import"react";import"../../zeroState/ZeroState.js";import"../../TypographyStyle.js";import{COLORS as i}from"../../../constants/Theme.js";import"../OpenedDropdown/components/description/Description.styled.js";import"../../checkBox/CheckBox.styled.js";import"../../list-item/ListItem.js";import"../OpenedDropdown/components/menu/FreeFormMenu.styled.js";import"../OpenedDropdown/components/menu/MenuItem.js";import"../OpenedDropdown/components/menu/MenuList.styled.js";import"../../button/Button.js";import"../OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../OpenedDropdown/components/OpennedDropdown.styled.js";import{IconButton as p}from"../../icon-button/IconButton.js";import"../../input/Input.js";const d=r.div`
 	:hover {
-		background: ${s.surface.subdued};
+		background: ${i.surface.subdued};
 	}
-`,m=n=>o(i,{children:o(r,Object.assign({},n,{children:o("div",{children:o(p,{Icon:n.isHorizontal?t:e,bordered:!(null==n?void 0:n.hideBorder)})})}))});m.displayName="MenuItemDropdown";export{m as MenuItemDropdown};
+	position: ${o=>o.isNewTag?"":"relative"};
+	.new--tag {
+		box-sizing: border-box;
+		position: absolute;
+		right: -8px;
+		top: -5px;
+		border-radius: 50%;
+		width: 14px;
+		height: 14px;
+		background: ${i.background.negative.vibrant};
+		border: 1.25px solid ${i.surface.standard};
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+`,m=r=>o(d,Object.assign({isNewTag:r.isNewTag},{children:e(s,Object.assign({},r,{children:[o("div",{children:o(p,{Icon:r.isHorizontal?t:n,bordered:!(null==r?void 0:r.hideBorder)})}),r.isNewTag?o("div",{className:"new--tag"}):null]}))}));m.displayName="MenuItemDropdown";export{m as MenuItemDropdown};

package/dist/esm/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.d.ts

@@ -4,6 +4,7 @@ declare const TemplateAnalyticsComponent: React.FC<TemplateAnalyticsComponentI>;
 export default TemplateAnalyticsComponent;
 export declare const RightPanelTemplateAnalytics: React.FC<{
     analyticsData: TemplateAnalyticsDataI;
+    skipTitle?: boolean;
 }>;
 export declare const AnalyticsItem: React.FC<{
     icon: React.ElementType;

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import l from"../../../assets/icons/alert_triangle.svg.js";import a from"../../../assets/icons/tick_double.svg.js";import{useState as i,useEffect as c}from"react";import{StyledModal as s}from"../../modals/styledModal.js";import{Tag as r}from"../../tag/Tag.js";import{TEMPLATE_QUALITY as o}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleSmall as d,Caption as m,TitleRegular as p}from"../../TypographyStyle.js";import{COLORS as h}from"../../../constants/Theme.js";import{RightPanelContainer as u,CustomTitleMedium as g,TemplateContainer as y,LeftPanelContainer as b}from"../styles/TemplateAnalyticsStyles.js";import{ANALYTICS_ENGAGEMENT_MAP as j,TEMPLATE_QUALITY_MAP as f}from"../utils/SegmentConstants.js";import{TemplateAnalyticsSkeleton as v}from"./TemplateAnalyticsSkeleton.js";const N=n=>{let{templateAnalytics:a,onClose:r,onProceed:d,onCancel:u,headingTitle:g,headingSubtitle:j,templateId:N}=n;const{templateQuality:k=o.GREEN,fetchAnalytics:O}=a||{},{icon:x,title:C,subline:A}=f[k||o.GREEN],[S,w]=i({}),[V,E]=i(!0);return c((()=>{null==O||O(N||"").then((e=>{console.log("data",e),e.analytics&&w(e.analytics),E(!1)}))}),[]),t(s,Object.assign({open:!0,headingTitle:g,tintedHeader:!0,modalHeaderStyles:{backgroundColor:h.surface.subdued},onBackPress:()=>{null==r||r()},headingSubtitle:j,footerShadow:!0,primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{null==r||r(),null==u||u()},disabled:V},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:()=>{null==d||d()},disabled:V},onClose:()=>{null==r||r()},width:"700px"},{children:e(y,{children:[t(b,{children:e("div",Object.assign({className:"inside--container"},{children:[x&&t("div",Object.assign({className:"icon--container"},{children:t(l,{width:40,height:40,color:h.content.warning})})),C&&e(p,{children:[C," template"]}),t(m,Object.assign({style:{textAlign:"center"},color:h.content.secondary},{children:A}))]}))}),V?t(v,{}):t(T,{analyticsData:S})]})}))},T=l=>{let{analyticsData:i}=l;return e(u,{children:[t(d,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),t("div",Object.assign({className:"mt-3"},{children:j.map(((e,n)=>t(k,{icon:e.icon,title:e.title,value:i[e.valName]||0,percentValue:e.percentValName?i[e.percentValName]:null},n)))})),(null==i?void 0:i.clickAnalytics)&&e(n,{children:[t(d,Object.assign({color:h.content.secondary},{children:"Clicked"})),t("div",Object.assign({className:"mt-3"},{children:Object.entries(i.clickAnalytics).map(((e,n)=>{let[l,i]=e;return t(k,{icon:a,title:l,value:i.totalClicks||0,percentValue:i.clickPercentage},n)}))}))]})]})},k=l=>{let{icon:a,title:i,value:c,percentValue:s}=l;return e("div",Object.assign({className:"each--analytics--container"},{children:[e("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[t("div",Object.assign({className:"each--icon--container"},{children:t(a,{width:"16px",height:"16px",color:h.background.brand})})),t(m,{children:i})]})),e("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[s?t(r,{tagText:s||0,theme:"light",type:"neutral"}):t(n,{}),t(g,{children:c})]}))]}))};export{k as AnalyticsItem,T as RightPanelTemplateAnalytics,N as default};
+import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import n from"../../../assets/icons/alert_triangle.svg.js";import a from"../../../assets/icons/tick_double.svg.js";import{useState as i,useEffect as s}from"react";import{StyledModal as c}from"../../modals/styledModal.js";import{Tag as r}from"../../tag/Tag.js";import{TEMPLATE_QUALITY as o}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleSmall as d,Caption as m,TitleRegular as p}from"../../TypographyStyle.js";import{COLORS as h}from"../../../constants/Theme.js";import{RightPanelContainer as u,CustomTitleMedium as g,TemplateContainer as y,LeftPanelContainer as b}from"../styles/TemplateAnalyticsStyles.js";import{ANALYTICS_ENGAGEMENT_MAP as j,TEMPLATE_QUALITY_MAP as f}from"../utils/SegmentConstants.js";import{TemplateAnalyticsSkeleton as v}from"./TemplateAnalyticsSkeleton.js";const T=l=>{let{templateAnalytics:a,onClose:r,onProceed:d,onCancel:u,headingTitle:g,headingSubtitle:j,templateId:T}=l;const{templateQuality:N=o.GREEN,fetchAnalytics:O}=a||{},{icon:x,title:C,subline:A}=f[N||o.GREEN],[S,w]=i({}),[V,E]=i(!0);return s((()=>{null==O||O(T||"").then((e=>{console.log("data",e),e.analytics&&w(e.analytics),E(!1)}))}),[]),t(c,Object.assign({open:!0,headingTitle:g,tintedHeader:!0,modalHeaderStyles:{backgroundColor:h.surface.subdued},onBackPress:()=>{null==r||r()},headingSubtitle:j,footerShadow:!0,primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{null==r||r(),null==u||u()},disabled:V},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:()=>{null==d||d()},disabled:V},onClose:()=>{null==r||r()},width:"700px"},{children:e(y,{children:[t(b,{children:e("div",Object.assign({className:"inside--container"},{children:[x&&t("div",Object.assign({className:"icon--container"},{children:t(n,{width:40,height:40,color:h.content.warning})})),C&&e(p,{children:[C," template"]}),t(m,Object.assign({style:{textAlign:"center"},color:h.content.secondary},{children:A}))]}))}),V?t(v,{}):t(k,{analyticsData:S})]})}))},k=n=>{let{analyticsData:i,skipTitle:s}=n;return e(u,{children:[s?t(l,{}):t(d,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),t("div",Object.assign({className:"mt-3"},{children:j.map(((e,l)=>t(N,{icon:e.icon,title:e.title,value:i[e.valName]||0,percentValue:e.percentValName?i[e.percentValName]:null},l)))})),(null==i?void 0:i.clickAnalytics)&&e(l,{children:[t(d,Object.assign({color:h.content.secondary},{children:"Clicked"})),t("div",Object.assign({className:"mt-3"},{children:Object.entries(i.clickAnalytics).map(((e,l)=>{let[n,i]=e;return t(N,{icon:a,title:n,value:i.totalClicks||0,percentValue:i.clickPercentage},l)}))}))]})]})},N=n=>{let{icon:a,title:i,value:s,percentValue:c}=n;return e("div",Object.assign({className:"each--analytics--container"},{children:[e("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[t("div",Object.assign({className:"each--icon--container"},{children:t(a,{width:"16px",height:"16px",color:h.background.brand})})),t(m,{children:i})]})),e("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[c?t(r,{tagText:c||0,theme:"light",type:"neutral"}):t(l,{}),t(g,{children:s})]}))]}))};export{N as AnalyticsItem,k as RightPanelTemplateAnalytics,T as default};

package/dist/esm/components/template-context-mapper/styles/TemplateAnalyticsStyles.js

@@ -1,9 +1,6 @@
 import{TitleMedium as e}from"../../TypographyStyle.js";import{COLORS as i}from"../../../constants/Theme.js";import t from"styled-components";const n=t.div`
 	display: flex;
 	padding: 16px 0px;
-	.align--center {
-		align-items: center;
-	}
 `,r=t.div`
 	max-width: 450px;
 	height: 456px;
@@ -31,6 +28,9 @@ import{TitleMedium as e}from"../../TypographyStyle.js";import{COLORS as i}from".
 		justify-content: center;
 		border-radius: 4px;
 	}
+	.align--center {
+		align-items: center;
+	}
 `,o=t.div`
 	padding: 0px 23px 32px 23px;
 	flex: 1;

package/package.json

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