@bikdotai/bik-component-library 0.0.639--beta0.6 → 0.0.639--beta0.8

package/dist/cjs/assets/icons/click.svg.js

@@ -0,0 +1 @@
+"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r,a=e(require("react"));function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},l.apply(this,arguments)}var n=e=>a.createElement("svg",l({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},e),t||(t=a.createElement("path",{fill:"currentColor",d:"M11.194 3.987a.796.796 0 0 0 .566-.23l2.401-2.4A.8.8 0 0 0 13.03.224l-2.401 2.4a.804.804 0 0 0 .566 1.362ZM3.63 3.848a.8.8 0 0 1-1.004-.09L.225 1.355A.8.8 0 0 1 1.356.225l2.401 2.4a.8.8 0 0 1-.126 1.223ZM2.391 7.993H.848a.8.8 0 0 1 0-1.6H2.39a.8.8 0 0 1 0 1.6ZM7.193 3.193a.8.8 0 0 0 .8-.8V.848a.8.8 0 0 0-1.6 0v1.543a.8.8 0 0 0 .8.8ZM1.096 14.332a.797.797 0 0 1-.744-.08.804.804 0 0 1-.127-1.222l2.4-2.401a.8.8 0 0 1 1.132 1.132l-2.4 2.4a.796.796 0 0 1-.26.171Z"})),r||(r=a.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M12.064 23.712a1.733 1.733 0 0 1-.66-.823L5.707 7.934A1.705 1.705 0 0 1 6.1 6.1a1.707 1.707 0 0 1 1.835-.392l14.954 5.697a1.726 1.726 0 0 1-.119 3.265l-6.167 1.85a.124.124 0 0 0-.084.083l-1.85 6.168a1.704 1.704 0 0 1-1.59 1.228 1.733 1.733 0 0 1-1.015-.287ZM7.324 7.31l-.007-.003-.006.006-.004.004 5.697 14.957a.019.019 0 0 0 .018.012h.003l1.853-6.177a1.839 1.839 0 0 1 1.234-1.231l.004-.002 6.162-1.848a.012.012 0 0 0 .006-.004.012.012 0 0 0 .002-.007.01.01 0 0 0-.002-.006l-.001-.002-.005-.002L7.325 7.31Z",clipRule:"evenodd"})));exports.default=n;

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.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,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})]})}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/alert_triangle.svg.js"),s=require("../../../assets/icons/click.svg.js"),l=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:l,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,s)=>e.jsx(m,{icon:t.icon,title:t.title,value:l[t.valName]||0,percentValue:t.percentValName?l[t.percentValName]:null},s)))})),(null==l?void 0:l.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(l.clickAnalytics).map(((t,l)=>{let[a,n]=t;return e.jsx(m,{icon:s.default,title:a,value:n.totalClicks||0,percentValue:n.clickPercentage},l)}))}))]})]})},m=t=>{let{icon:s,title:l,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(s,{width:"16px",height:"16px",color:r.COLORS.background.brand})})),e.jsx(c.Caption,{children:l})]})),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=m,exports.RightPanelTemplateAnalytics=j,exports.default=s=>{let{templateAnalytics:n,onClose:m,onProceed:g,onCancel:h,headingTitle:p,headingSubtitle:x,templateId:y}=s;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]=l.useState({}),[N,k]=l.useState(!0);return l.useEffect((()=>{null==b||b(y||"").then((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==m||m()},headingSubtitle:x,footerShadow:!0,primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{null==m||m(),null==h||h()},disabled:N},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:()=>{null==g||g()},disabled:N},onClose:()=>{null==m||m()},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/modalElements/TemplateAnalyticsSkeleton.d.ts

@@ -1,2 +1,4 @@
 /// <reference types="react" />
-export declare const TemplateAnalyticsSkeleton: React.FC;
+export declare const TemplateAnalyticsSkeleton: React.FC<{
+    skipTitleShimmer?: boolean;
+}>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../shimmer/ShimmerComponent/BikShimmer.js"),i=require("../styles/TemplateAnalyticsStyles.js");const t=()=>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(s.BikShimmer,{boxes:[{width:"24px",height:"24px"}]}),e.jsx(s.BikShimmer,{boxes:[{width:"69px",height:"11px"}]})]})),e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[e.jsx(s.BikShimmer,{boxes:[{width:"43px",height:"18px"}]}),e.jsx(s.BikShimmer,{boxes:[{width:"69px",height:"28px"}]})]}))]}));exports.TemplateAnalyticsSkeleton=()=>e.jsxs(i.RightPanelContainer,{children:[e.jsx("div",{children:e.jsx(s.BikShimmer,{boxes:[{width:"76px",height:"18px"}]})}),e.jsx("div",Object.assign({className:"mt-3"},{children:[0,1,2].map((s=>e.jsx(t,{},s)))})),e.jsxs(e.Fragment,{children:[e.jsx("div",{children:e.jsx(s.BikShimmer,{boxes:[{width:"76px",height:"18px"}]})}),e.jsx("div",Object.assign({className:"mt-3"},{children:e.jsx(t,{})}))]})]});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../shimmer/ShimmerComponent/BikShimmer.js"),i=require("../styles/TemplateAnalyticsStyles.js");const t=()=>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(s.BikShimmer,{boxes:[{width:"24px",height:"24px"}]}),e.jsx(s.BikShimmer,{boxes:[{width:"69px",height:"11px"}]})]})),e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[e.jsx(s.BikShimmer,{boxes:[{width:"43px",height:"18px"}]}),e.jsx(s.BikShimmer,{boxes:[{width:"69px",height:"28px"}]})]}))]}));exports.TemplateAnalyticsSkeleton=r=>{let{skipTitleShimmer:x}=r;return e.jsxs(i.RightPanelContainer,{children:[e.jsx("div",{children:x?e.jsx(e.Fragment,{}):e.jsx(s.BikShimmer,{boxes:[{width:"76px",height:"18px"}]})}),e.jsx("div",Object.assign({className:"mt-3"},{children:[0,1,2].map((s=>e.jsx(t,{},s)))})),e.jsxs(e.Fragment,{children:[e.jsx("div",{children:e.jsx(s.BikShimmer,{boxes:[{width:"76px",height:"18px"}]})}),e.jsx("div",Object.assign({className:"mt-3"},{children:e.jsx(t,{})}))]})]})};

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/assets/icons/click.svg.js

@@ -0,0 +1 @@
+import*as a from"react";var l,e;function r(){return r=Object.assign?Object.assign.bind():function(a){for(var l=1;l<arguments.length;l++){var e=arguments[l];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(a[r]=e[r])}return a},r.apply(this,arguments)}var t=t=>a.createElement("svg",r({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},t),l||(l=a.createElement("path",{fill:"currentColor",d:"M11.194 3.987a.796.796 0 0 0 .566-.23l2.401-2.4A.8.8 0 0 0 13.03.224l-2.401 2.4a.804.804 0 0 0 .566 1.362ZM3.63 3.848a.8.8 0 0 1-1.004-.09L.225 1.355A.8.8 0 0 1 1.356.225l2.401 2.4a.8.8 0 0 1-.126 1.223ZM2.391 7.993H.848a.8.8 0 0 1 0-1.6H2.39a.8.8 0 0 1 0 1.6ZM7.193 3.193a.8.8 0 0 0 .8-.8V.848a.8.8 0 0 0-1.6 0v1.543a.8.8 0 0 0 .8.8ZM1.096 14.332a.797.797 0 0 1-.744-.08.804.804 0 0 1-.127-1.222l2.4-2.401a.8.8 0 0 1 1.132 1.132l-2.4 2.4a.796.796 0 0 1-.26.171Z"})),e||(e=a.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M12.064 23.712a1.733 1.733 0 0 1-.66-.823L5.707 7.934A1.705 1.705 0 0 1 6.1 6.1a1.707 1.707 0 0 1 1.835-.392l14.954 5.697a1.726 1.726 0 0 1-.119 3.265l-6.167 1.85a.124.124 0 0 0-.084.083l-1.85 6.168a1.704 1.704 0 0 1-1.59 1.228 1.733 1.733 0 0 1-1.015-.287ZM7.324 7.31l-.007-.003-.006.006-.004.004 5.697 14.957a.019.019 0 0 0 .018.012h.003l1.853-6.177a1.839 1.839 0 0 1 1.234-1.231l.004-.002 6.162-1.848a.012.012 0 0 0 .006-.004.012.012 0 0 0 .002-.007.01.01 0 0 0-.002-.006l-.001-.002-.005-.002L7.325 7.31Z",clipRule:"evenodd"})));export{t as default};

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.js

@@ -1 +1 @@
-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};
+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/click.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 T=n=>{let{templateAnalytics:a,onClose:r,onProceed:d,onCancel:u,headingTitle:g,headingSubtitle:j,templateId:T}=n;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 c((()=>{null==O||O(T||"").then((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(k,{analyticsData:S})]})}))},k=l=>{let{analyticsData:i,skipTitle:c}=l;return e(u,{children:[c?t(n,{}):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(N,{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(N,{icon:a,title:l,value:i.totalClicks||0,percentValue:i.clickPercentage},n)}))}))]})]})},N=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{N as AnalyticsItem,k as RightPanelTemplateAnalytics,T as default};

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

@@ -1,2 +1,4 @@
 /// <reference types="react" />
-export declare const TemplateAnalyticsSkeleton: React.FC;
+export declare const TemplateAnalyticsSkeleton: React.FC<{
+    skipTitleShimmer?: boolean;
+}>;

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

@@ -1 +1 @@
-import{jsxs as e,jsx as i,Fragment as s}from"react/jsx-runtime";import{BikShimmer as t}from"../../shimmer/ShimmerComponent/BikShimmer.js";import{RightPanelContainer as h}from"../styles/TemplateAnalyticsStyles.js";const a=()=>e(h,{children:[i("div",{children:i(t,{boxes:[{width:"76px",height:"18px"}]})}),i("div",Object.assign({className:"mt-3"},{children:[0,1,2].map((e=>i(c,{},e)))})),e(s,{children:[i("div",{children:i(t,{boxes:[{width:"76px",height:"18px"}]})}),i("div",Object.assign({className:"mt-3"},{children:i(c,{})}))]})]}),c=()=>e("div",Object.assign({className:"each--analytics--container"},{children:[e("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[i(t,{boxes:[{width:"24px",height:"24px"}]}),i(t,{boxes:[{width:"69px",height:"11px"}]})]})),e("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[i(t,{boxes:[{width:"43px",height:"18px"}]}),i(t,{boxes:[{width:"69px",height:"28px"}]})]}))]}));export{a as TemplateAnalyticsSkeleton};
+import{jsxs as e,jsx as i,Fragment as t}from"react/jsx-runtime";import{BikShimmer as s}from"../../shimmer/ShimmerComponent/BikShimmer.js";import{RightPanelContainer as h}from"../styles/TemplateAnalyticsStyles.js";const a=a=>{let{skipTitleShimmer:l}=a;return e(h,{children:[i("div",{children:l?i(t,{}):i(s,{boxes:[{width:"76px",height:"18px"}]})}),i("div",Object.assign({className:"mt-3"},{children:[0,1,2].map((e=>i(c,{},e)))})),e(t,{children:[i("div",{children:i(s,{boxes:[{width:"76px",height:"18px"}]})}),i("div",Object.assign({className:"mt-3"},{children:i(c,{})}))]})]})},c=()=>e("div",Object.assign({className:"each--analytics--container"},{children:[e("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[i(s,{boxes:[{width:"24px",height:"24px"}]}),i(s,{boxes:[{width:"69px",height:"11px"}]})]})),e("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[i(s,{boxes:[{width:"43px",height:"18px"}]}),i(s,{boxes:[{width:"69px",height:"28px"}]})]}))]}));export{a as TemplateAnalyticsSkeleton};

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.6",
+	"version": "0.0.639--beta0.8",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",