@bikdotai/bik-component-library 0.0.3202-beta.1 → 0.0.5581-tooltip-beta

package/dist/cjs/components/action-button/ActionButton.styled.js

@@ -0,0 +1,23 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const t=o(e).default.div`
+	width: ${e=>{var r;return null!==(r=e.width)&&void 0!==r?r:"100%"}};
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: 8px;
+	padding: 14px 0px;
+	box-shadow: ${e=>e.isConfigured||e.isSelected||e.isError?"0px 2px 8px 0px #0000001f":""};
+	background-color: white;
+	border-radius: 4px;
+	border: ${e=>{var o;return null!==(o=e.border)&&void 0!==o?o:`1px solid ${r.BASE_COLORS.grayscale[200]}`}};
+	cursor: pointer;
+	:hover {
+		background-color: ${e=>e.isSelected||e.isError?"":r.BASE_COLORS.grayscale[200]};
+		border: ${e=>e.isSelected||e.isError?"":e.isConfigured?`1px solid ${r.BASE_COLORS.grayscale[400]}`:`1px dashed ${r.BASE_COLORS.grayscale[400]}`};
+	}
+
+	.action__icon {
+		height: 20px;
+		width: 20px;
+	}
+`;exports.ActionButtonContainer=t;

package/dist/cjs/components/action-button/ActionButtons.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface ActionButtonInterface {
+    state: 'CONFIGURED' | 'NOT-CONFIGURED';
+    buttonText: string;
+    isSelected: boolean;
+    isError: boolean;
+    onClick: () => void;
+    icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+}
+export declare const ActionButtons: React.FC<ActionButtonInterface>;

package/dist/cjs/components/action-button/ActionButtons.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),o=require("../../assets/icons/similar.svg.js"),s=require("../TypographyStyle.js"),i=require("./ActionButton.styled.js");exports.ActionButtons=t=>{let{state:l,buttonText:c,icon:a=o.default,isSelected:n,isError:d,onClick:O}=t;const{color:S,border:E}="CONFIGURED"===l?(e=>{let{isSelected:o,isError:s}=e;return o&&s?{color:r.BASE_COLORS.negative[700],border:`1px solid ${r.BASE_COLORS.negative[700]}`}:o?{color:r.BASE_COLORS.brand[500],border:`1px solid ${r.BASE_COLORS.brand[500]}`}:s?{color:r.BASE_COLORS.grayscale[900],border:`1px solid ${r.BASE_COLORS.negative[700]}`}:{color:r.BASE_COLORS.grayscale[900],border:`1px solid ${r.BASE_COLORS.grayscale[200]}`}})({isSelected:n,isError:d}):(e=>{let{isSelected:o,isError:s}=e;return o&&s?{color:r.BASE_COLORS.negative[700],border:`1px solid ${r.BASE_COLORS.negative[700]}`}:o?{color:r.BASE_COLORS.brand[500],border:`1px solid ${r.BASE_COLORS.brand[500]}`}:s?{color:r.BASE_COLORS.grayscale[700],border:`1px solid ${r.BASE_COLORS.negative[700]}`}:{color:r.BASE_COLORS.grayscale[700],border:`1px dashed ${r.BASE_COLORS.grayscale[200]}`}})({isSelected:n,isError:d}),C={height:20,width:20,color:S,style:{display:"block"},className:"icon"};return e.jsxs(i.ActionButtonContainer,Object.assign({isSelected:n,isError:d,border:E,isConfigured:"CONFIGURED"===l,onClick:O},{children:[e.jsx("div",Object.assign({className:"action__icon"},{children:e.jsx(a,Object.assign({},C))})),e.jsx(s.BodyPrimary,Object.assign({style:{fontWeight:600,color:S}},{children:c}))]}))};

package/dist/cjs/components/action-button/index.d.ts

@@ -0,0 +1 @@
+export * from './ActionButtons';

package/dist/cjs/components/add-variableV2/AddVariableBox.styled.d.ts

@@ -1,3 +1 @@
-export declare const AddVariableStyled: import("styled-components").StyledComponent<"button", any, {
-    right: string;
-}, never>;
+export declare const AddVariableStyled: import("styled-components").StyledComponent<"button", any, {}, never>;

package/dist/cjs/components/add-variableV2/AddVariableBox.styled.js

@@ -1,25 +1,25 @@
 "use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}Object.defineProperty(exports,"__esModule",{value:!0});const e=t(require("styled-components")).default.button`
-    padding: 2px 8px;
-    position: absolute;
-    right: ${t=>t.right};
-    cursor: pointer;
-    color: white;
-    background-color: black;
-    width: fit-content;
-    float: right;
-    margin-top: 0px;
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 20px;
-    border-radius: 4px;
-    border: 1px solid #ccc;
-    margin-right: 1px;
-    z-index: 100;
+	padding: 2px 8px;
+	position: absolute;
+	right: 0px;
+	cursor: pointer;
+	color: white;
+	background-color: black;
+	width: fit-content;
+	float: right;
+	margin-top: 0px;
+	font-family: Inter;
+	font-style: normal;
+	font-weight: 600;
+	font-size: 14px;
+	line-height: 20px;
+	border-radius: 4px;
+	border: 1px solid #ccc;
+	margin-right: 1px;
+	z-index: 100;
 
-    .add {
-        display: flex;
-        align-items: center;
-    }
+	.add {
+		display: flex;
+		align-items: center;
+	}
 `;exports.AddVariableStyled=e;

package/dist/cjs/components/add-variableV2/AddVariableV2.d.ts

@@ -7,6 +7,7 @@ export interface VariableListInterfaceV2 {
 }
 export interface Variable {
     description?: string;
+    defaultValue?: string;
     displayName: string;
     actualValue: string;
     variableType: string;
@@ -29,6 +30,7 @@ export interface AddVariableProps {
     isSearchRequired?: boolean;
     isModalState?: boolean;
     leftPosition?: number;
+    topPosition?: string;
     pickerSize?: string;
     enableVariable?: boolean;
     isEvaluationList?: boolean;
@@ -41,12 +43,16 @@ export interface AddVariableProps {
     height?: string;
     needsBorder?: boolean;
     reRender?: string;
+    styledCloseBtn?: boolean;
+    width?: string;
+    readonly?: boolean;
 }
 type Props = AddVariableProps;
 export interface VariableBoxProps {
     item: Variable;
     raw?: string;
     parentKey?: string;
+    readonly?: boolean;
 }
 export declare const AddVariableV2: React.FC<Props>;
 export {};

package/dist/cjs/components/add-variableV2/AddVariableV2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/back_icon.svg.js"),a=require("../../assets/icons/chevronRightAlt.svg.js"),i=require("../../assets/icons/cross.svg.js"),t=require("../../assets/icons/plus.svg.js"),l=require("../../assets/icons/undo.svg.js"),r=require("react"),n=require("./AddVariableV2.styled.js"),c=require("../button/Button.js"),o=require("../icon-button/IconButton.js"),d=require("../searchBar/searchBar.js"),b=require("../tooltips/Tooltip.js"),u=require("../../constants/Theme.js"),j=require("../TypographyStyle.js");const v=r.memo((v=>{const{data:g,hasHeader:h=!0}=v,[m,p]=r.useState({}),[y,x]=r.useState(),[O,f]=r.useState(""),[N,V]=r.useState(""),[S,T]=r.useState(!0),C=/^[^.]*\.[^.]*$/;r.useEffect((()=>{const e={};g.forEach((s=>{e[s.displayName]=[]})),x(e)}),[g]),r.useEffect((()=>{if(N){v.data.filter((e=>Object.keys(e.variables).filter((s=>{var a;return(null===(a=e.variables[s].displayName)||void 0===a?void 0:a.toLowerCase().includes(N.toLowerCase()))||k(e.variables[s])})).length>0)).length>0?T(!0):T(!1)}else T(!0)}),[N]);const _=(e,s)=>{const a=g.find((e=>e.displayName===s));if(a){let i=a;e.forEach(((e,s)=>{i=i.variables[e]})),p((e=>Object.assign(Object.assign({},e),{[s]:i})))}},k=e=>{let s=!1;if(e.isSubHeader&&e.variables){const a=Object.keys(e.variables);for(let i=0;i<a.length;i++){const t=a[i];if(e.variables&&e.variables[t].displayName.toLowerCase().includes(N.toLowerCase())){s=!0;break}}}return s},B=s=>{const a=s.item.description;return e.jsx(e.Fragment,{children:e.jsx(b.Tooltip,Object.assign({body:"",tooltipContent:e.jsx(j.BodyCaption,Object.assign({color:u.COLORS.content.primaryInverse,style:{whiteSpace:"pre-line",padding:8}},{children:s.item.isAvailable?a?`• ${a}\n• Recommended here`:"Recommended here":"Not recommended here"})),width:300,delay:300,placement:"bottom"},{children:e.jsx("div",{children:e.jsx(w,{item:s.item})})}))})},w=s=>e.jsx(c.Button,{darkMode:v.enableVariable?v.enableVariable:s.item.isAvailable,size:"chip",LeadingIcon:s.item.isSubHeader?void 0:t.default,TrailingIcon:()=>s.item.isSubHeader?e.jsx("div",Object.assign({className:"icon-trailing",style:{display:"flex"}},{children:e.jsx(a.default,{})})):e.jsx(e.Fragment,{}),buttonText:s.item.displayName}),F=(s,a)=>e.jsx("div",Object.assign({onClick:s.isSubHeader?()=>{const e=[...y[O],a];_(e,O),x((s=>Object.assign(Object.assign({},s),{[O]:e})))}:()=>{v.customTrigger?(v.customTrigger(s),v.setShowVariable(!1)):v.isEvaluationList?q(s):v.setVariableValue(v.selectWithTypes?{actualValue:s.actualValue,variableType:s.variableType,needsFetching:s.needsFetching}:s.actualValue)}},{children:e.jsx(B,{item:s})})),L=(e,s)=>{const a=[...y[e.displayName],s];_(a,e.displayName),x((s=>Object.assign(Object.assign({},s),{[e.displayName]:a}))),f(e.displayName)},q=e=>{if(e.actualValue.match(C)){const s=e.actualValue.replace("{{","").replace("}}","").split("."),a=s[0]+`['${s[1]}']`;v.setVariableValue(v.selectWithTypes?{actualValue:a,variableType:e.variableType,needsFetching:e.needsFetching}:a)}else{const s=e.actualValueEval?e.actualValueEval:e.actualValue;v.setVariableValue(v.selectWithTypes?{actualValue:s,variableType:e.variableType,needsFetching:e.needsFetching}:s)}},I=(e,s)=>{if(v.customTrigger)v.customTrigger(e.variables[s]),v.setShowVariable(!1);else if(v.isEvaluationList){const a=e.variables[s];q(a)}else v.setVariableValue(v.selectWithTypes?{actualValue:e.variables[s].actualValue,variableType:e.variables[s].variableType,needsFetching:e.variables[s].needsFetching}:e.variables[s].actualValue)},E=v.isModalState?void 0:{top:"small"===v.pickerSize?"300px":"60px",left:`${v.leftPosition?v.leftPosition+24:430}px`};return e.jsx("div",Object.assign({id:"varList",tabIndex:-1},{children:e.jsx(n.AddVariableStyled,Object.assign({style:E,onClick:e=>{e.stopPropagation()},pickerSize:v.pickerSize||"large",isModalState:v.isModalState,positionStrategy:v.positionStrategy,zIndex:v.zindex,height:v.height,needsBorder:v.needsBorder},{children:v.showVariable&&e.jsxs("div",Object.assign({className:"popup"},{children:[e.jsxs("div",Object.assign({className:"sticky__bar"},{children:[h&&e.jsxs("div",Object.assign({className:"header__bar"},{children:[e.jsx("div",Object.assign({className:"add__variable"},{children:"Add a new variable"})),e.jsx("div",Object.assign({onClick:()=>{v.setShowVariable(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center"}},{children:e.jsx(o.IconButton,{iconButtonType:"default",Icon:i.default})}))]})),e.jsx("div",Object.assign({className:"search__bar",onBlur:e=>{v.onSearchBlur&&v.onSearchBlur(e)}},{children:e.jsx(d.SearchBar,{width:"100%",isEnabled:!0,onChange:e=>{V(e)},onEnter:()=>{},placeholder:"Search...",variant:"default"})})),!S&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16}},{children:[e.jsx(j.TitleSmall,{children:"No results found!"}),e.jsx(j.BodyCaption,{children:`Sorry we could not find any results for "${N}"`})]})),O&&y[O].length>0&&e.jsxs("div",Object.assign({className:"nav__bar",style:{marginTop:8}},{children:[e.jsxs("div",Object.assign({className:"left__nav"},{children:[e.jsx(o.IconButton,{Icon:s.default,style:{color:"#919191",display:"flex"},onClick:()=>{const e=y[O].slice(0,-1);_(e,O),x((s=>Object.assign(Object.assign({},s),{[O]:e}))),e.length||f("")}}),e.jsxs("div",Object.assign({className:"block"},{children:[e.jsx(j.TitleSmall,{children:m[O].displayName}),m[O].description&&e.jsx(j.BodyCaption,{children:m[O].description})]}))]})),e.jsxs("div",Object.assign({className:"right__nav"},{children:[e.jsx(o.IconButton,{Icon:l.default,style:{display:"flex"},onClick:()=>{_([],O),x((e=>Object.assign(Object.assign({},e),{[O]:[]}))),f("")}}),e.jsx("div",{children:"First page"})]}))]}))]})),e.jsx("div",Object.assign({className:"wrapper"},{children:e.jsx("div",Object.assign({className:"list__map"},{children:e.jsxs("div",Object.assign({className:"items"},{children:[!O&&v.data.map((s=>{let a=[];return N&&(a=Object.keys(s.variables).filter((e=>{var a;return(null===(a=s.variables[e].displayName)||void 0===a?void 0:a.toLowerCase().includes(N.toLowerCase()))||k(s.variables[e])}))),e.jsxs(e.Fragment,{children:[N?a.length>0?e.jsxs("div",Object.assign({className:"block"},{children:[e.jsx("div",Object.assign({className:"heading__font"},{children:null==s?void 0:s.displayName})),e.jsx(j.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==s?void 0:s.description}))]})):e.jsx(e.Fragment,{}):e.jsxs("div",Object.assign({className:"block"},{children:[e.jsx("div",Object.assign({className:"heading__font"},{children:null==s?void 0:s.displayName})),e.jsx(j.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==s?void 0:s.description}))]})),Object.keys(s.variables).map((a=>{var i;return N?(null===(i=s.variables[a].displayName)||void 0===i?void 0:i.toLowerCase().includes(N.toLowerCase()))||k(s.variables[a])?e.jsx("div",Object.assign({onClick:s.variables[a].isSubHeader?()=>L(s,a):()=>I(s,a)},{children:e.jsx(B,{item:s.variables[a]})})):e.jsx(e.Fragment,{}):e.jsx("div",Object.assign({onClick:s.variables[a].isSubHeader?()=>L(s,a):()=>I(s,a)},{children:e.jsx(B,{item:s.variables[a]})}))}))]})})),O&&e.jsx("div",Object.assign({className:"list__map"},{children:e.jsx("div",Object.assign({className:"items",style:{marginTop:16}},{children:Object.keys(m[O].variables).map(((s,a)=>{var i;return N?(null===(i=m[O].variables[s].displayName)||void 0===i?void 0:i.toLowerCase().includes(N.toLowerCase()))||k(m[O].variables[s])?F(m[O].variables[s],s):e.jsx(e.Fragment,{}):F(m[O].variables[s],s)}))}))}))]}))}))})),e.jsx("div",{className:"bottom__padding"})]}))}))}))}),((e,s)=>e.enableVariable===s.enableVariable&&(e.leftPosition===s.leftPosition&&e.reRender===s.reRender)));exports.AddVariableV2=v;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),a=require("react/jsx-runtime"),s=require("../../assets/icons/back_icon.svg.js"),i=require("../../assets/icons/chevronRightAlt.svg.js"),t=require("../../assets/icons/cross.svg.js"),l=require("../../assets/icons/plus.svg.js"),n=require("../../assets/icons/undo.svg.js"),r=require("react"),c=require("./AddVariableV2.styled.js"),o=require("../button/Button.js"),d=require("../icon-button/IconButton.js"),b=require("../searchBar/searchBar.js"),u=require("../tooltips/Tooltip.js"),v=require("../../constants/Theme.js"),j=require("../modals/modal.styled.js"),g=require("../switch/Switch.js"),h=require("../TypographyStyle.js");const m=r.memo((m=>{const{data:p,hasHeader:y=!0,needsBorder:x=!0,styledCloseBtn:f=!1,readonly:O=!1}=m,[S,N]=r.useState({}),[C,V]=r.useState(),[w,_]=r.useState(""),[T,B]=r.useState(""),[k,q]=r.useState(!0),L=/.*\..*/,[F,I]=r.useState(m.data),[E,A]=r.useState(!0);r.useEffect((()=>{const e={};p.forEach((a=>{e[a.displayName]=[]})),V(e)}),[p]),r.useEffect((()=>{z(!0)}),[]),r.useEffect((()=>{z(E,!w)}),[S,w]),r.useEffect((()=>{A(!0),B(""),R([],w),V((e=>Object.assign(Object.assign({},e),{[w]:[]}))),_("");const e=m.data.map((e=>$(e))).filter((e=>null!==e));I(e),e.length>0?q(!0):q(!1)}),[m.reRender]),r.useEffect((()=>{let e=m.data;w&&(e=[S[w]]);H(e,E).length>0?q(!0):q(!1)}),[T]);const H=function(e){let a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return e.flatMap((e=>Object.keys(e.variables).filter((s=>{var i;return(null===(i=e.variables[s].displayName)||void 0===i?void 0:i.toLowerCase().includes(T.toLowerCase()))&&(!a||e.variables[s].isAvailable===a)||P(e.variables[s])}))))},R=(e,a)=>{const s=p.find((e=>e.displayName===a));if(s){let i=s;e.forEach(((e,a)=>{i=i.variables[e]})),N((e=>Object.assign(Object.assign({},e),{[a]:i})))}},P=e=>{let a=!1;if(e.isSubHeader&&e.variables){const s=Object.keys(e.variables);for(let i=0;i<s.length;i++){const t=s[i];if(e.variables&&e.variables[t].displayName.toLowerCase().includes(T.toLowerCase())&&e.variables[t].isAvailable===E){a=!0;break}}}return a},z=function(e){let a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(A(e),e){let s=[];if(!w||a)s=m.data.map((e=>$(e))).filter((e=>null!==e));else{const e=S[w];s=m.data.filter((e=>e.displayName===w)).map((a=>$(a,e))).filter((e=>null!=e))}I(s),T&&(s=H(s,e)),s.length>0?q(!0):q(!1)}else if(I(m.data),T){H(m.data,e).length>0?q(!0):q(!1)}else q(!0)};function $(e,a){let s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(a)for(const i in e.variables)if(e.variables[i].displayName===a.displayName)for(const a in e.variables[i].variables)e.variables[i].variables[a].isAvailable&&(s[a]=e.variables[i].variables[a]);else e.variables[i].isSubHeader&&$(e.variables[i],a,s);else for(const a in e.variables)e.variables[a].isAvailable&&(s[a]=e.variables[a]);return 0===Object.keys(s).length?null:Object.assign(Object.assign({},e),{variables:s})}const M=e=>{const s=e.item.description;return e.readonly?a.jsx("div",{children:a.jsx(W,{item:e.item,readonly:e.readonly})}):a.jsx(a.Fragment,{children:a.jsx(u.Tooltip,Object.assign({body:"",tooltipContent:a.jsx(h.BodyCaption,Object.assign({color:v.COLORS.content.primaryInverse,style:{whiteSpace:"pre-line",padding:8}},{children:e.item.isAvailable?s?`• ${s}\n• Recommended here`:"Recommended here":"Not recommended here"})),width:300,delay:300,placement:"bottom"},{children:a.jsx("div",{children:a.jsx(W,{item:e.item})})}))})},W=e=>a.jsx(o.Button,{darkMode:m.enableVariable?m.enableVariable:e.item.isAvailable,size:"chip",disabled:!!e.readonly&&!e.item.isSubHeader,LeadingIcon:e.item.isSubHeader||e.readonly?void 0:l.default,TrailingIcon:()=>e.item.isSubHeader?a.jsx("div",Object.assign({className:"icon-trailing",style:{display:"flex"}},{children:a.jsx(i.default,{})})):a.jsx(a.Fragment,{}),buttonText:e.item.displayName}),D=(e,s)=>E&&!e.isAvailable?a.jsx(a.Fragment,{}):a.jsx("div",Object.assign({onClick:e.isSubHeader?()=>{H([e],E).length||q(!1),B("");const a=[...C[w],s];R(a,w),V((e=>Object.assign(Object.assign({},e),{[w]:a})))}:()=>{m.customTrigger?(m.customTrigger(e),m.setShowVariable(!1)):m.isEvaluationList?J(e):m.setVariableValue(m.selectWithTypes?{actualValue:e.actualValue,variableType:e.variableType,needsFetching:e.needsFetching}:e.actualValue)}},{children:a.jsx(M,{item:e,readonly:O})})),G=(e,a)=>{const s=[...C[e.displayName],a];R(s,e.displayName),V((a=>Object.assign(Object.assign({},a),{[e.displayName]:s}))),_(e.displayName)},J=e=>{if(e.actualValue.match(L)){const a=e.actualValue.replace("{{","").replace("}}","").split(".");let s=a[0];a.forEach(((e,a)=>{if(0===a)return;const i=(e=>/\w+\[\d+\]/g.test(e))(e);if(i){const a=e.match(/(\w+)\[(\d+)\]/);if(a){const e=a[1],i=a[2];s+=`['${e}'][${i}]`}}else s+=`['${e}']`})),m.setVariableValue(m.selectWithTypes?{actualValue:s,variableType:e.variableType,needsFetching:e.needsFetching}:s)}else{const a=e.actualValueEval?e.actualValueEval:e.actualValue;m.setVariableValue(m.selectWithTypes?{actualValue:a,variableType:e.variableType,needsFetching:e.needsFetching}:a)}},K=(e,a)=>{if(m.customTrigger)m.customTrigger(e.variables[a]),m.setShowVariable(!1);else if(m.isEvaluationList){const s=e.variables[a];J(s)}else m.setVariableValue(m.selectWithTypes?{actualValue:e.variables[a].actualValue,variableType:e.variables[a].variableType,needsFetching:e.variables[a].needsFetching}:e.variables[a].actualValue)},Q=m.isModalState?void 0:{top:`${m.topPosition?m.topPosition:"small"===m.pickerSize?"300px":"60px"}`,left:`${m.leftPosition?m.leftPosition+24:430}px`};return a.jsx("div",Object.assign({id:"varList",tabIndex:-1},{children:a.jsxs(c.AddVariableStyled,Object.assign({style:Q,onClick:e=>{e.stopPropagation()},pickerSize:m.pickerSize||"large",isModalState:m.isModalState,positionStrategy:m.positionStrategy,zIndex:m.zindex,height:m.height,needsBorder:x,width:m.width},{children:[f&&a.jsx(j.CloseButtonContainer,Object.assign({onClick:()=>{m.setShowVariable(!1)},style:{zIndex:300}},{children:a.jsx(t.default,{height:20,width:20,color:v.COLORS.content.secondary})})),m.showVariable&&a.jsxs("div",Object.assign({className:"popup"},{children:[a.jsxs("div",Object.assign({className:"sticky__bar"},{children:[y&&a.jsxs("div",Object.assign({className:"header__bar"},{children:[a.jsx("div",Object.assign({className:"add__variable"},{children:"Add a new variable"})),!f&&a.jsx("div",Object.assign({onClick:()=>{m.setShowVariable(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center"}},{children:a.jsx(d.IconButton,{iconButtonType:"default",Icon:t.default})}))]})),a.jsxs("div",Object.assign({className:"search__bar",onBlur:e=>{m.onSearchBlur&&m.onSearchBlur(e)}},{children:[a.jsx(b.SearchBar,{width:"100%",isEnabled:!0,onChange:e=>{B(e)},onEnter:()=>{},reset:!T,placeholder:"Search...",variant:"default"}),a.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",marginTop:8,justifyContent:"space-between"}},{children:[a.jsx(h.BodySecondary,Object.assign({style:{color:v.COLORS.content.secondary}},{children:"Show only recommended variables"})),a.jsx(g.Switch,{value:E,onValueChange:a=>e.__awaiter(void 0,void 0,void 0,(function*(){return yield z(a)}))})]}))]})),w&&C[w].length>0&&a.jsxs("div",Object.assign({className:"nav__bar"},{children:[a.jsxs("div",Object.assign({className:"left__nav"},{children:[a.jsx(d.IconButton,{Icon:s.default,style:{color:"#919191",display:"flex"},onClick:()=>{B("");const e=C[w].slice(0,-1);R(e,w),V((a=>Object.assign(Object.assign({},a),{[w]:e}))),e.length||_("")}}),a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx(h.TitleSmall,{children:S[w].displayName}),S[w].description&&a.jsx(h.BodyCaption,{children:S[w].description})]}))]})),a.jsxs("div",Object.assign({className:"right__nav"},{children:[a.jsx(d.IconButton,{Icon:n.default,style:{display:"flex"},onClick:()=>{B(""),R([],w),V((e=>Object.assign(Object.assign({},e),{[w]:[]}))),_("")}}),a.jsx("div",{children:"First page"})]}))]}))]})),!k&&a.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16}},{children:[a.jsx(h.TitleSmall,{children:"No results found!"}),E?a.jsx(h.BodyCaption,{children:"Sorry we could not find any recommended variables"}):a.jsx(h.BodyCaption,{children:`Sorry we could not find any results for "${T}"`})]})),a.jsx("div",Object.assign({className:"wrapper"},{children:a.jsx("div",Object.assign({className:"list__map"},{children:a.jsxs("div",Object.assign({className:"items"},{children:[!w&&F.map((e=>{let s=[];return T&&(s=Object.keys(e.variables).filter((a=>{var s;return(null===(s=e.variables[a].displayName)||void 0===s?void 0:s.toLowerCase().includes(T.toLowerCase()))||P(e.variables[a])}))),a.jsxs(a.Fragment,{children:[T?s.length>0?a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx("div",Object.assign({className:"heading__font"},{children:null==e?void 0:e.displayName})),a.jsx(h.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==e?void 0:e.description}))]})):a.jsx(a.Fragment,{}):a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx("div",Object.assign({className:"heading__font"},{children:null==e?void 0:e.displayName})),a.jsx(h.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==e?void 0:e.description}))]})),Object.keys(e.variables).map((s=>{var i;return T?(null===(i=e.variables[s].displayName)||void 0===i?void 0:i.toLowerCase().includes(T.toLowerCase()))||P(e.variables[s])?a.jsx("div",Object.assign({onClick:e.variables[s].isSubHeader?()=>G(e,s):()=>K(e,s)},{children:a.jsx(M,{item:e.variables[s],readonly:O})})):a.jsx(a.Fragment,{}):a.jsx("div",Object.assign({onClick:e.variables[s].isSubHeader?()=>G(e,s):()=>K(e,s)},{children:a.jsx(M,{item:e.variables[s],readonly:O})}))}))]})})),w&&a.jsx("div",Object.assign({className:"list__map"},{children:a.jsx("div",Object.assign({className:"items",style:{marginTop:16}},{children:Object.keys(S[w].variables).map(((e,s)=>{var i;return T?(null===(i=S[w].variables[e].displayName)||void 0===i?void 0:i.toLowerCase().includes(T.toLowerCase()))||P(S[w].variables[e])?D(S[w].variables[e],e):a.jsx(a.Fragment,{}):D(S[w].variables[e],e)}))}))}))]}))}))})),a.jsx("div",{className:"bottom__padding"})]}))]}))}))}),((e,a)=>e.enableVariable===a.enableVariable&&(e.leftPosition===a.leftPosition&&e.reRender===a.reRender)));exports.AddVariableV2=m;

package/dist/cjs/components/add-variableV2/AddVariableV2.styled.d.ts

@@ -5,6 +5,7 @@ export declare const AddVariableStyled: import("styled-components").StyledCompon
     positionStrategy?: string | undefined;
     height?: string | undefined;
     needsBorder?: boolean | undefined;
+    width?: string | undefined;
 }, never>;
 export declare const VariableBoxStyled: import("styled-components").StyledComponent<"div", any, {
     isAvailable?: boolean | undefined;

package/dist/cjs/components/add-variableV2/AddVariableV2.styled.js

@@ -10,7 +10,7 @@
 	}
 	.popup {
 		background: white;
-		width: ${e=>e.isModalState?"566px":"480px"};
+		width: ${e=>e.width?e.width:e.isModalState?"566px":"480px"};
 		height: ${e=>e.isModalState?"100vh":e.height?e.height:"small"===e.pickerSize?"40vh":"90vh"};
 		border: ${e=>e.needsBorder?e.isModalState?"unset":"1px solid #e0e0e0":"none"};
 		border-radius: 8px;
@@ -40,6 +40,8 @@
 
 			.search__bar {
 				padding: 24px 24px 8px 24px;
+				background-color: #fafafa;
+				border-bottom: 1px solid var(--stroke-color-stroke-primary, #e0e0e0);
 			}
 			.nav__bar {
 				display: flex;

package/dist/cjs/components/ai-modals/ActivateBikAI.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { POD } from '../template-preview/models/WhatsAppTemplate';
+export declare const ActivateBikAi: React.FC<{
+    open: boolean;
+    onModalClose: () => void;
+    onRightBtnClick: () => void;
+    onLeftBtnClick: () => void;
+    source: POD.CHATBOT | POD.CRM;
+}>;

package/dist/cjs/components/ai-modals/ActivateBikAI.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../constants/Theme.js"),i=require("../../assets/icons/graph.svg.js"),s=require("../../assets/icons/sparkle.svg.js"),r=require("../button/Button.js"),n=require("../modals/Modal.js"),o=require("../TypographyStyle.js");exports.ActivateBikAi=a=>{let{open:l,onModalClose:c,onRightBtnClick:d,onLeftBtnClick:x,source:g}=a;return e.jsx(n.Modal,Object.assign({open:l,centralContainerStyles:{height:"430px",width:"464px",borderRadius:"12px"},zIndex:40,onClose:c,closeOnOutsideClick:!0},{children:e.jsxs("div",{children:[e.jsxs("div",Object.assign({style:{height:"180px",width:"100%",backgroundColor:"rgba(142, 142, 142, 0.2)",display:"flex",justifyContent:"center",alignItems:"center",gap:"18px",padding:"24px"}},{children:[e.jsx("div",{children:e.jsx(i.default,{width:100,height:90})}),e.jsx("div",{children:"CHATBOT"===g?e.jsx(o.TitleMedium,{children:"Unlock higher conversion and ease agent work with BIK.AI"}):e.jsx(o.TitleMedium,{children:"Experience reduced Average Handling Time of your tickets with Bik.AI!"})})]})),e.jsxs("div",Object.assign({style:{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",gap:"16px",padding:"24px"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:"4px"}},{children:[e.jsx(o.TitleLarge,{children:"Activate BIK AI"}),e.jsx(s.default,{width:32,height:32})]})),"CHATBOT"===g?e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"}},{children:[e.jsx(o.BodyPrimary,Object.assign({color:"#888888"},{children:"Sync your Shopify Data to Bik.AI to supercharge it with"})),e.jsx(o.BodyPrimary,Object.assign({color:"#888888"},{children:"your store’s data to start personalizing it to your"})),e.jsx(o.BodyPrimary,Object.assign({color:"#888888"},{children:"customers!"}))]})):e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"}},{children:[e.jsxs(o.BodyPrimary,Object.assign({color:"#888888"},{children:["Sync your Shopify Data to Bik.AI to supercharge it with"," "]})),e.jsx(o.BodyPrimary,Object.assign({color:"#888888"},{children:"your store’s data to start responding to customer"})),e.jsx(o.BodyPrimary,Object.assign({color:"#888888"},{children:"queries right away!"}))]}))]})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:"12px",paddingBottom:"24px",paddingLeft:"24px",paddingRight:"24px"}},{children:[e.jsx(r.Button,{buttonText:"Learn More",buttonType:"text",size:"large",onClick:x}),e.jsx(r.Button,{buttonText:"Sync Shopify Data",size:"large",style:{backgroundColor:t.COLORS.background.brand},onClick:d})]}))]})}))};

package/dist/cjs/components/ai-modals/AiCreditsExhausted.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const AiCreditsExhausted: React.FC<{
+    open: boolean;
+    onModalClose: () => void;
+    body?: string;
+    onRightBtnClick: () => void;
+    onLeftBtnClick: () => void;
+}>;

package/dist/cjs/components/ai-modals/AiCreditsExhausted.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../constants/Theme.js"),s=require("../../assets/icons/alert_triangle.svg.js"),n=require("../button/Button.js"),i=require("../modals/Modal.js"),r=require("../progress-bar/ProgressBarComponent.js"),o=require("../TypographyStyle.js");exports.AiCreditsExhausted=l=>{let{open:a,onModalClose:d,body:c,onRightBtnClick:x,onLeftBtnClick:j}=l;return e.jsx(i.Modal,Object.assign({open:a,centralContainerStyles:{width:"498px",height:"312px",borderRadius:"12px"},onClose:d,closeOnOutsideClick:!0,zIndex:40},{children:e.jsxs("div",Object.assign({style:{padding:"24px",display:"flex",flexDirection:"column"}},{children:[e.jsx("div",Object.assign({style:{display:"flex",justifyContent:"center"}},{children:e.jsx(o.TitleLarge,{children:"Free AI Credits Exhausted"})})),e.jsx("div",{style:{height:"24px"}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"12px"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center",gap:"4px"}},{children:[e.jsx(s.default,{color:t.COLORS.content.negative,width:20,height:20}),e.jsx("div",{style:{width:"8px"}}),e.jsx(o.TitleRegular,{children:"0/100"}),e.jsx(o.BodySecondary,Object.assign({color:t.COLORS.content.secondary},{children:"Free Credits left"}))]})),e.jsx(r.ProgressBarComponent,{completed:100,isAnimated:!1,height:16,color:t.COLORS.content.negative})]})),e.jsx("div",{style:{height:"24px"}}),e.jsx(o.BodyPrimary,Object.assign({color:t.COLORS.content.secondary},{children:c||"Contact support to add credits to generate replies using AI, and enjoy continued AI assistance!"})),e.jsx("div",{style:{height:"44px"}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:"12px"}},{children:[e.jsx(n.Button,{buttonText:"Learn More",buttonType:"text",size:"small",onClick:j}),e.jsx(n.Button,{buttonText:"Contact Support",size:"small",style:{backgroundColor:t.COLORS.background.brand},onClick:x})]}))]}))}))};

package/dist/cjs/components/ai-modals/AiCreditsLow.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const AiCreditsLow: React.FC<{
+    open: boolean;
+    onModalClose: () => void;
+    onRightBtnClick: () => void;
+    onLeftBtnClick: () => void;
+}>;

package/dist/cjs/components/ai-modals/AiCreditsLow.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../constants/Theme.js"),s=require("../../assets/icons/alert_triangle.svg.js"),i=require("../button/Button.js"),n=require("../modals/Modal.js"),r=require("../TypographyStyle.js");exports.AiCreditsLow=o=>{let{open:l,onModalClose:d,onLeftBtnClick:c,onRightBtnClick:a}=o;return e.jsx(n.Modal,Object.assign({open:l,centralContainerStyles:{width:"498px",borderRadius:"12px"},onClose:d,closeOnOutsideClick:!0,zIndex:40},{children:e.jsxs("div",Object.assign({style:{padding:"24px",display:"flex",flexDirection:"column",width:"100%"}},{children:[e.jsx("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"center"}},{children:e.jsx("div",Object.assign({style:{backgroundColor:t.COLORS.background.negative.light,width:"64px",height:"64px",padding:"12px",borderRadius:"40px"}},{children:e.jsx(s.default,{width:40,height:40,color:t.COLORS.content.negative})}))})),e.jsx("div",{style:{height:"32px"}}),e.jsx(r.TitleLarge,{children:"Your AI Credits are running low"}),e.jsx("div",{style:{height:"24px"}}),e.jsx(r.BodyPrimary,Object.assign({color:t.COLORS.content.secondary},{children:"Recharge your credits now to ensure uninterrupted service."})),e.jsx("div",{style:{height:"12px"}}),e.jsx("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"center"}},{children:e.jsx(r.BodyPrimary,Object.assign({color:t.COLORS.content.secondary},{children:"Don’t let the growth stop. Add AI Credits"}))})),e.jsx("div",{style:{height:"32px"}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:"12px"}},{children:[e.jsx(i.Button,{buttonText:"Close",buttonType:"text",size:"small",onClick:c}),e.jsx(i.Button,{buttonText:"Contact Support",size:"small",style:{backgroundColor:t.COLORS.background.brand},onClick:a})]}))]}))}))};

package/dist/cjs/components/ai-modals/AiSyncProgress.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const AiSyncProgress: React.FC<{
+    open: boolean;
+    onModalClose: () => void;
+    completedPercent: number;
+    onRightBtnClick: () => void;
+    onLeftBtnClick: () => void;
+}>;

package/dist/cjs/components/ai-modals/AiSyncProgress.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../constants/Theme.js"),s=require("../../assets/icons/sync.svg.js"),i=require("../button/Button.js"),n=require("../modals/Modal.js"),r=require("../progress-bar/ProgressBarComponent.js"),o=require("../TypographyStyle.js");exports.AiSyncProgress=l=>{let{open:a,onModalClose:c,completedPercent:d,onLeftBtnClick:x,onRightBtnClick:p}=l;return e.jsx(n.Modal,Object.assign({open:a,centralContainerStyles:{width:"498px",height:"324px",borderRadius:"12px"},onClose:c,closeOnOutsideClick:!0,zIndex:40},{children:e.jsxs("div",Object.assign({style:{padding:"24px",display:"flex",flexDirection:"column"}},{children:[e.jsx("div",Object.assign({style:{display:"flex",justifyContent:"center"}},{children:e.jsx(o.TitleLarge,{children:"Wait for Sync to complete"})})),e.jsx("div",{style:{height:"24px"}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"12px"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:"12px"}},{children:[e.jsx(s.default,{width:24,height:24}),e.jsx(o.BodyPrimary,Object.assign({color:"#616161"},{children:"Syncing Shopify Store Data..."}))]})),e.jsx(r.ProgressBarComponent,{completed:d,isAnimated:!1,height:16,color:t.COLORS.background.positive.vibrant})]})),e.jsx("div",{style:{height:"24px"}}),e.jsx(o.BodyPrimary,Object.assign({color:t.COLORS.content.secondary},{children:"You can start replying with AI after sync is complete. In the meanwhile, learn how to leverage AI for maximum efficiency"})),e.jsx("div",{style:{height:"32px"}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:"12px"}},{children:[e.jsx(i.Button,{buttonText:"Close",buttonType:"text",size:"small",onClick:x}),e.jsx(i.Button,{buttonText:"Explore Bik.ai",size:"small",style:{backgroundColor:t.COLORS.background.brand},onClick:p})]}))]}))}))};

package/dist/cjs/components/ai-modals/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ActivateBikAI';
+export * from './AiSyncProgress';
+export * from './AiCreditsExhausted';
+export * from './AiCreditsLow';

package/dist/cjs/components/alerts/Alert.d.ts

@@ -1,13 +1,15 @@
 import React from 'react';
-import { ALERT_TYPES } from "./AlertHelper";
+import { ALERT_TYPES, CONTENT_POSITION } from "./AlertHelper";
 export type AlertProps = {
     type: ALERT_TYPES;
-    text: string;
+    text: string | React.ReactNode;
     icon?: React.FC<{
         width: number;
         height: number;
         color: string;
     }>;
     textColor?: string;
+    contentPosition?: CONTENT_POSITION;
+    containerStyle?: React.CSSProperties;
 };
 export declare const Alert: React.FC<AlertProps>;

package/dist/cjs/components/alerts/Alert.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("./Alert.styled.js"),r=require("./AlertHelper.js"),s=require("../TypographyStyle.js");exports.Alert=l=>e.jsxs(t.AlertStyle,Object.assign({type:l.type},{children:[l.icon&&e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(l.icon,{color:r.COLOR_CONFIG_MAP[l.type].textColor,height:20,width:20})})),e.jsx(s.BodyCaption,Object.assign({style:{color:l.textColor||r.COLOR_CONFIG_MAP[l.type].textColor,marginLeft:12}},{children:l.text}))]}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("./Alert.styled.js"),r=require("./AlertHelper.js"),s=require("../TypographyStyle.js");exports.Alert=i=>e.jsxs(t.AlertStyle,Object.assign({type:i.type,contentPosition:i.contentPosition,style:i.containerStyle},{children:[i.icon&&e.jsx("div",Object.assign({style:{display:"flex",alignSelf:"flex-start"}},{children:e.jsx(i.icon,{color:r.COLOR_CONFIG_MAP[i.type].textColor,height:20,width:20})})),e.jsx(s.BodyCaption,Object.assign({style:{color:i.textColor||r.COLOR_CONFIG_MAP[i.type].textColor,marginLeft:12}},{children:i.text}))]}));

package/dist/cjs/components/alerts/Alert.styled.d.ts

@@ -1,4 +1,5 @@
-import { ALERT_TYPES } from "./AlertHelper";
+import { ALERT_TYPES, CONTENT_POSITION } from "./AlertHelper";
 export declare const AlertStyle: import("styled-components").StyledComponent<"div", any, {
     type: ALERT_TYPES;
+    contentPosition?: CONTENT_POSITION | undefined;
 }, never>;

package/dist/cjs/components/alerts/Alert.styled.js

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("./AlertHelper.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const o=t(e).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("./AlertHelper.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const o=r(e).default.div`
 	display: flex;
 	align-items: center;
-	justify-content: center;
+	justify-content: ${e=>e.contentPosition||t.CONTENT_POSITION.CENTER};
 	padding: 8px 16px;
-	background-color: ${e=>r.COLOR_CONFIG_MAP[e.type].backgroundColor};
+	background-color: ${e=>t.COLOR_CONFIG_MAP[e.type].backgroundColor};
 	border-radius: 4px;
-	border: 1px solid ${e=>r.COLOR_CONFIG_MAP[e.type].borderColor};
+	border: 1px solid ${e=>t.COLOR_CONFIG_MAP[e.type].borderColor};
 `;exports.AlertStyle=o;

package/dist/cjs/components/alerts/AlertHelper.d.ts

@@ -5,6 +5,11 @@ export declare enum ALERT_TYPES {
     NEUTRAL = "Neutral",
     BRAND = "Brand"
 }
+export declare enum CONTENT_POSITION {
+    START = "start",
+    CENTER = "center",
+    END = "end"
+}
 export declare const COLOR_CONFIG_MAP: {
     Negative: {
         backgroundColor: string;

package/dist/cjs/components/alerts/AlertHelper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o,r=require("../../constants/Theme.js");exports.ALERT_TYPES=void 0,(o=exports.ALERT_TYPES||(exports.ALERT_TYPES={})).NEGATIVE="Negative",o.WARNING="Warning",o.POSITIVE="Positive",o.NEUTRAL="Neutral",o.BRAND="Brand";const t={[exports.ALERT_TYPES.NEGATIVE]:{backgroundColor:r.COLORS.background.negative.light,textColor:r.COLORS.content.negative,borderColor:r.COLORS.stroke.negative.lightAlt},[exports.ALERT_TYPES.WARNING]:{backgroundColor:r.COLORS.background.warning.light,textColor:r.COLORS.content.warning,borderColor:r.COLORS.stroke.warning.lightAlt},[exports.ALERT_TYPES.POSITIVE]:{backgroundColor:r.COLORS.background.positive.light,textColor:r.COLORS.content.positive,borderColor:r.COLORS.stroke.positive.lightAlt},[exports.ALERT_TYPES.NEUTRAL]:{backgroundColor:r.COLORS.surface.subdued,textColor:r.COLORS.content.secondary,borderColor:r.COLORS.stroke.primary},[exports.ALERT_TYPES.BRAND]:{backgroundColor:r.COLORS.background.brandLight,textColor:r.COLORS.content.brand,borderColor:r.COLORS.stroke.brandLightAlt}};exports.COLOR_CONFIG_MAP=t;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o,r,t=require("../../constants/Theme.js");exports.ALERT_TYPES=void 0,(o=exports.ALERT_TYPES||(exports.ALERT_TYPES={})).NEGATIVE="Negative",o.WARNING="Warning",o.POSITIVE="Positive",o.NEUTRAL="Neutral",o.BRAND="Brand",exports.CONTENT_POSITION=void 0,(r=exports.CONTENT_POSITION||(exports.CONTENT_POSITION={})).START="start",r.CENTER="center",r.END="end";const e={[exports.ALERT_TYPES.NEGATIVE]:{backgroundColor:t.COLORS.background.negative.light,textColor:t.COLORS.content.negative,borderColor:t.COLORS.stroke.negative.lightAlt},[exports.ALERT_TYPES.WARNING]:{backgroundColor:t.COLORS.background.warning.light,textColor:t.COLORS.content.warning,borderColor:t.COLORS.stroke.warning.lightAlt},[exports.ALERT_TYPES.POSITIVE]:{backgroundColor:t.COLORS.background.positive.light,textColor:t.COLORS.content.positive,borderColor:t.COLORS.stroke.positive.lightAlt},[exports.ALERT_TYPES.NEUTRAL]:{backgroundColor:t.COLORS.surface.subdued,textColor:t.COLORS.content.secondary,borderColor:t.COLORS.stroke.primary},[exports.ALERT_TYPES.BRAND]:{backgroundColor:t.COLORS.background.brandLight,textColor:t.COLORS.content.brand,borderColor:t.COLORS.stroke.brandLightAlt}};exports.COLOR_CONFIG_MAP=e;

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsChip.d.ts

@@ -8,5 +8,12 @@ export interface AnalyticsChipInterface {
     width?: number | string;
     extraJSX?: JSX.Element;
     tooltipContent?: string;
+    style?: React.CSSProperties;
+    channelConfig?: {
+        whatsapp?: string;
+        instagram?: string;
+        email?: string;
+        sms?: string;
+    };
 }
 export declare const AnalyticsChip: React.FC<AnalyticsChipInterface>;

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsChip.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/info.svg.js"),r=require("../tooltips/Tooltip.js"),t=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),o=require("./CommonStyles.js");exports.AnalyticsChip=l=>{const{title:a,primaryValue:n,titleColor:c,captionColor:j=t.BASE_COLORS.grayscale[700],backgroundColor:d=t.BASE_COLORS.grayscale[50],width:u="224.67px",extraJSX:h,tooltipContent:p}=l;return e.jsxs(o.AnalyticsChipContainer,Object.assign({backgroundColor:d,width:u},{children:[e.jsxs("div",Object.assign({className:"sub--container"},{children:[e.jsx(i.BodyCaption,Object.assign({style:{color:j}},{children:a})),p&&e.jsx(r.Tooltip,Object.assign({body:p},{children:e.jsx("div",{children:e.jsx(s.default,{height:14.67,width:14.67,color:t.BASE_COLORS.grayscale[500]})})}))]})),e.jsx(i.TitleLarge,Object.assign({style:{color:c}},{children:n})),h]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/info.svg.js"),t=require("../tooltips/Tooltip.js"),i=require("../../constants/Theme.js"),r=require("../TypographyStyle.js"),o=require("./AnalyticsChipChannelFooter.js"),n=require("./CommonStyles.js");exports.AnalyticsChip=l=>{const{title:a,primaryValue:c,titleColor:h,captionColor:j=i.BASE_COLORS.grayscale[700],backgroundColor:y=i.BASE_COLORS.grayscale[50],width:C="224.67px",extraJSX:d,tooltipContent:u,channelConfig:p,style:g}=l;return e.jsxs(n.AnalyticsChipContainer,Object.assign({style:null!=g?g:{},backgroundColor:y,width:C},{children:[e.jsxs("div",Object.assign({className:"sub--container"},{children:[e.jsx(r.BodyCaption,Object.assign({style:{color:j}},{children:a})),u&&e.jsx(t.Tooltip,Object.assign({body:u},{children:e.jsx("div",{children:e.jsx(s.default,{height:14.67,width:14.67,color:i.BASE_COLORS.grayscale[500]})})}))]})),e.jsx(r.TitleLarge,Object.assign({style:{color:h}},{children:c})),p&&e.jsx(o.AnalyticsChipChannelFooter,{channelConfig:p}),d]}))};

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsChipChannelFooter.d.ts

@@ -0,0 +1,4 @@
+import { AnalyticsChipInterface } from './AnalyticsChip';
+export declare const AnalyticsChipChannelFooter: (props: {
+    channelConfig: AnalyticsChipInterface['channelConfig'];
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsChipChannelFooter.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/chat-channel.svg.js"),n=require("../../assets/icons/email-channel.svg.js"),a=require("../../assets/icons/instagram-channel.svg.js"),t=require("../../assets/icons/whatsapp-channel.svg.js"),r=require("../../constants/Theme.js"),l=require("../TypographyStyle.js");const i=s=>{const{ChannelIcon:n,value:a}=s;return e.jsxs("div",Object.assign({style:{display:"flex",gap:"4px"}},{children:[e.jsx(n,{width:12,height:12}),e.jsx(l.BodyTiny,Object.assign({color:r.COLORS.content.secondary},{children:a}))]}))};exports.AnalyticsChipChannelFooter=r=>{if(!r.channelConfig)return e.jsx(e.Fragment,{});const{whatsapp:l,instagram:c,email:o,sms:h}=r.channelConfig;return e.jsxs("div",Object.assign({style:{display:"flex",gap:"16px"}},{children:[!!l&&e.jsx(i,{ChannelIcon:t.default,value:l}),!!c&&e.jsx(i,{ChannelIcon:a.default,value:c}),!!o&&e.jsx(i,{ChannelIcon:n.default,value:o}),!!h&&e.jsx(i,{ChannelIcon:s.default,value:h})]}))};

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsDropdown.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 import { DropDirection } from 'react-bootstrap/esm/DropdownContext';
 export interface DropdownOptions {
     label: string;
+    subLabel?: string;
     value: string;
     key: string | number;
     noOfDays?: number;
@@ -24,13 +25,14 @@ export interface AnalyticsDropdownInterface {
         selectedRange?: [Date, Date];
     }) => void;
     maxHeight?: string;
-    backgroundColor?: string;
+    backgroundcolor?: string;
     calendarPopperConfig?: {
         offsetSkid?: number;
         offsetDistance?: number;
     };
     variant?: 'small' | 'default';
     datePickerPlacement?: DropDirection;
+    closeDropdown?: boolean;
 }
 export declare const AnalyticsDropdown: React.FC<AnalyticsDropdownInterface>;
 export declare const EachItem: React.FC<{
@@ -39,5 +41,7 @@ export declare const EachItem: React.FC<{
     selectedDate: Date[] | undefined;
     onClickingEachItem: (optionSelected: DropdownOptions) => void;
     rangeSelection?: boolean;
+    isLastItem?: boolean;
+    isFirstItem?: boolean;
 }>;
 export declare const formatDate: (dateVal: Date) => string;

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsDropdown.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("react"),t=require("react-bootstrap"),n=require("../../constants/Theme.js"),s=require("../datePicker/DatePicker.js"),i=require("../TypographyStyle.js"),l=require("./CommonStyles.js");const a=o=>{let{eachOption:t,selectedOption:s,selectedDate:a,onClickingEachItem:c,rangeSelection:r}=o;return e.jsxs(l.ItemMenuContainer,Object.assign({onClick:()=>c(t),isSelected:t.isCustom?t.key==(null==s?void 0:s.key)&&!!a:t.key==(null==s?void 0:s.key)},{children:[e.jsx(i.BodySecondary,Object.assign({color:t.key==(null==s?void 0:s.key)?n.BASE_COLORS.positive[900]:n.BASE_COLORS.grayscale[900]},{children:t.label})),a&&(null==s?void 0:s.isCustom)&&t.key==(null==s?void 0:s.key)&&e.jsx(i.BodyCaption,{children:r?`${d(a[0])} to ${d(a[1])}`:`${d(a[0])}`})]}),t.key)},d=e=>e.toLocaleString("default",{day:"numeric",month:"short",year:"numeric"});exports.AnalyticsDropdown=c=>{let{options:r,placeholder:u="Select an option",selected:g,onOptionSelected:p,resetDropdown:v,maxHeight:m,backgroundColor:O,calendarPopperConfig:j,variant:D="default",datePickerPlacement:y}=c;var S,b,h;const[x,f]=o.useState(!1),[k,w]=o.useState(g),[C,R]=o.useState(),[E,T]=o.useState(!1),A=()=>{!x&&T(!E)},[M,q]=o.useState(g),P="small"===D?i.Caption:i.BodySecondary;return o.useEffect((()=>{v&&w(void 0)}),[v]),o.useEffect((()=>{var e;(null==g?void 0:g.isCustom)&&(null===(e=g.dateRangeSelectionOptions)||void 0===e?void 0:e.selectedDates)?R(g.dateRangeSelectionOptions.selectedDates):g&&w(g)}),[g]),e.jsx(e.Fragment,{children:e.jsxs(l.MainDropdown,Object.assign({drop:"down",show:E,onToggle:A,backgroundColor:O},{children:[e.jsx(t.Dropdown.Toggle,Object.assign({id:"dropdown-autoclose-outside",className:"main--dropdown",style:"small"===D?{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",backgroundColor:"#FAFAFA",borderRadius:4,border:`1px solid ${n.DEFAULT_THEME.colorsV2.stroke.primary}`}:void 0},{children:e.jsx(P,Object.assign({style:"small"===D?{color:n.DEFAULT_THEME.colorsV2.content.secondary}:void 0},{children:(null==k?void 0:k.isCustom)?C?d(C[0])===d(C[1])?`${d(C[0])}`:`${d(C[0])} to ${d(C[1])}`:null==M?void 0:M.label:k?null==k?void 0:k.label:u}))})),e.jsx(t.Dropdown.Menu,Object.assign({className:"main--dropdown"},{children:e.jsxs(l.MainDropdown,Object.assign({drop:null!=y?y:"end",id:"sub--dropdown",show:x,onToggle:e=>{!e&&T(!1),f(!x)}},{children:[e.jsx("div",Object.assign({style:{maxHeight:m||"auto",overflowY:"scroll"}},{children:r.map((o=>{var n;return e.jsx("div",{children:(null==o?void 0:o.isCustom)?e.jsx(t.Dropdown.Toggle,Object.assign({className:"sub--dropdown"},{children:e.jsx(a,{eachOption:o,selectedOption:k,selectedDate:C,onClickingEachItem:e=>{w(e),f(!0)},rangeSelection:!!(null===(n=null==o?void 0:o.dateRangeSelectionOptions)||void 0===n?void 0:n.selectRange)})})):e.jsx(a,{eachOption:o,selectedOption:k,selectedDate:C,onClickingEachItem:e=>{if(R(void 0),w(e),q(e),A(),!e.noOfDays)return void p(e);const o=new Date,t=new Date;t.setDate(o.getDate()-e.noOfDays),p(Object.assign(Object.assign({},e),{selectedRange:[t,o]}))}})},null==o?void 0:o.key)}))})),e.jsx(t.Dropdown.Menu,Object.assign({className:"sub--dropdown",popperConfig:{modifiers:[{name:"offset",options:{offset:[(null==j?void 0:j.offsetSkid)||0,(null==j?void 0:j.offsetDistance)||0]}}]}},{children:e.jsx(s.DatePicker,{selectRange:(null===(S=null==k?void 0:k.dateRangeSelectionOptions)||void 0===S?void 0:S.selectRange)||!1,maxDate:null===(b=null==k?void 0:k.dateRangeSelectionOptions)||void 0===b?void 0:b.maxDate,minDate:null===(h=null==k?void 0:k.dateRangeSelectionOptions)||void 0===h?void 0:h.minDate,selectedDates:C,onSelectRange:(e,o)=>{const t=[e,o];(null==k?void 0:k.dateRangeSelectionOptions)&&(k.dateRangeSelectionOptions.selectedDates=t,p(Object.assign(Object.assign({},k),{selectedRange:[e,o]}))),q(k),f(!1),R(t),T(!E)},onSelectDate:e=>{(null==k?void 0:k.dateRangeSelectionOptions)&&(k.dateRangeSelectionOptions.selectedDates=[e,e],p(Object.assign(Object.assign({},k),{selectedRange:[e,e]}))),q(k),f(!1),R([e,e]),T(!E)}})}))]}))}))]}))})},exports.EachItem=a,exports.formatDate=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),o=require("react-bootstrap"),n=require("../../constants/Theme.js"),s=require("../datePicker/DatePicker.js");require("react-calendar"),require("../../utils/DateUtils.js");var i=require("../TypographyStyle.js");require("../datePicker/DatePickerWrapper.styled.js");var a=require("./CommonStyles.js");const l=t=>{let{eachOption:o,selectedOption:s,selectedDate:l,onClickingEachItem:r,rangeSelection:c,isLastItem:u,isFirstItem:g}=t;return e.jsxs(a.ItemMenuContainer,Object.assign({isFirstItem:g,isLastItem:u,onClick:()=>r(o),isSelected:o.isCustom?o.key==(null==s?void 0:s.key)&&!!l:o.key==(null==s?void 0:s.key)},{children:[e.jsx(i.BodySecondary,Object.assign({color:o.key==(null==s?void 0:s.key)?n.BASE_COLORS.positive[900]:n.BASE_COLORS.grayscale[900]},{children:o.label})),o.subLabel?e.jsx(i.BodyCaption,Object.assign({style:{color:n.BASE_COLORS.grayscale[700]}},{children:o.subLabel})):e.jsx(e.Fragment,{}),l&&(null==s?void 0:s.isCustom)&&o.key==(null==s?void 0:s.key)&&e.jsx(i.BodyCaption,{children:c?`${d(l[0])} to ${d(l[1])}`:`${d(l[0])}`})]}),o.key)},d=e=>e.toLocaleString("default",{day:"numeric",month:"short",year:"numeric"});exports.AnalyticsDropdown=r=>{let{options:c,placeholder:u="Select an option",selected:g,onOptionSelected:p,resetDropdown:m,maxHeight:v,backgroundcolor:j,calendarPopperConfig:O,variant:y="default",datePickerPlacement:D,closeDropdown:b}=r;var S,h,x;const[f,k]=t.useState(!1),[w,C]=t.useState(g),[R,E]=t.useState(),[I,L]=t.useState(!1),F=()=>{!f&&L(!I)},[q,T]=t.useState(g),A="small"===y?i.Caption:i.BodySecondary;return t.useEffect((()=>{m&&C(void 0)}),[m]),t.useEffect((()=>{var e;(null==g?void 0:g.isCustom)&&(null===(e=g.dateRangeSelectionOptions)||void 0===e?void 0:e.selectedDates)?E(g.dateRangeSelectionOptions.selectedDates):E(void 0),C(g)}),[g]),t.useEffect((()=>{L(!1),k(!1)}),[b]),e.jsx(e.Fragment,{children:e.jsxs(a.MainDropdown,Object.assign({drop:"down",show:I,onToggle:F,backgroundColor:j,id:"analytic-dropdown"},{children:[e.jsx(o.Dropdown.Toggle,Object.assign({id:"dropdown-autoclose-outside",className:"main--dropdown",style:"small"===y?{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",backgroundColor:"#FAFAFA",borderRadius:4,border:`1px solid ${n.DEFAULT_THEME.colorsV2.stroke.primary}`}:void 0},{children:e.jsx(A,Object.assign({style:"small"===y?{color:n.DEFAULT_THEME.colorsV2.content.secondary}:void 0},{children:(null==w?void 0:w.isCustom)?R?d(R[0])===d(R[1])?`${d(R[0])}`:`${d(R[0])} to ${d(R[1])}`:(null==q?void 0:q.label)?null==q?void 0:q.label:u:w?null==w?void 0:w.label:u}))})),e.jsx(o.Dropdown.Menu,Object.assign({className:"main--dropdown"},{children:e.jsxs(a.MainDropdown,Object.assign({drop:null!=D?D:"end",id:"sub--dropdown",show:f,onToggle:e=>{!e&&L(!1),k(!f)}},{children:[e.jsx("div",Object.assign({style:{maxHeight:v||"auto",overflowY:"scroll"}},{children:c.map(((t,n)=>{var s;return e.jsx("div",{children:(null==t?void 0:t.isCustom)?e.jsx(o.Dropdown.Toggle,Object.assign({className:"sub--dropdown"},{children:e.jsx(l,{isFirstItem:0===n,isLastItem:n===c.length-1,eachOption:t,selectedOption:w,selectedDate:R,onClickingEachItem:e=>{C(e),k(!0)},rangeSelection:!!(null===(s=null==t?void 0:t.dateRangeSelectionOptions)||void 0===s?void 0:s.selectRange)})})):e.jsx(l,{isFirstItem:0===n,isLastItem:n===c.length-1,eachOption:t,selectedOption:w,selectedDate:R,onClickingEachItem:e=>{if(E(void 0),C(e),T(e),F(),!e.noOfDays)return void p(e);const t=new Date,o=new Date;o.setDate(t.getDate()-e.noOfDays),p(Object.assign(Object.assign({},e),{selectedRange:[o,t]}))}})},null==t?void 0:t.key)}))})),e.jsx(o.Dropdown.Menu,Object.assign({className:"sub--dropdown",popperConfig:{modifiers:[{name:"offset",options:{offset:[(null==O?void 0:O.offsetSkid)||0,(null==O?void 0:O.offsetDistance)||0]}}]}},{children:e.jsx(s.DatePicker,{selectRange:(null===(S=null==w?void 0:w.dateRangeSelectionOptions)||void 0===S?void 0:S.selectRange)||!1,maxDate:null===(h=null==w?void 0:w.dateRangeSelectionOptions)||void 0===h?void 0:h.maxDate,minDate:null===(x=null==w?void 0:w.dateRangeSelectionOptions)||void 0===x?void 0:x.minDate,selectedDates:R,onSelectRange:(e,t)=>{const o=[e,t];(null==w?void 0:w.dateRangeSelectionOptions)&&(w.dateRangeSelectionOptions.selectedDates=o,p(Object.assign(Object.assign({},w),{selectedRange:[e,t]}))),T(w),k(!1),E(o),L(!I)},onSelectDate:e=>{(null==w?void 0:w.dateRangeSelectionOptions)&&(w.dateRangeSelectionOptions.selectedDates=[e,e],p(Object.assign(Object.assign({},w),{selectedRange:[e,e]}))),T(w),k(!1),E([e,e]),L(!I)}})}))]}))}))]}))})},exports.EachItem=l,exports.formatDate=d;

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsMetric.d.ts

@@ -5,7 +5,12 @@ export declare const AnalyticsMetric: React.FC<{
     RightHeaderComponent?: React.ReactElement;
     trends: AnalyticsTrendInterface[];
     containerStyle?: React.CSSProperties;
+    trendStyle?: React.CSSProperties;
+    trendContainerStyle?: React.CSSProperties;
+    trendIconStyle?: React.CSSProperties;
     titleSize?: 'large' | 'small';
     titleColor?: string;
     perRow?: number;
+    isLoading?: boolean;
+    hideHeaderDiv?: boolean;
 }>;

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsMetric.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var g=require("@emotion/styled/base"),I=require("react/jsx-runtime"),C=require("../../constants/Theme.js"),A=require("../TypographyStyle.js"),c=require("./AnalyticsTrend.js");function l(g){return g&&"object"==typeof g&&"default"in g?g:{default:g}}var e=l(g);function b(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}const d=e.default("div","production"===process.env.NODE_ENV?{target:"e1bel8cf1"}:{target:"e1bel8cf1",label:"TrendContainer"})("production"===process.env.NODE_ENV?{name:"jovua5",styles:"display:flex;flex-direction:row;flex-wrap:wrap"}:{name:"jovua5",styles:"display:flex;flex-direction:row;flex-wrap:wrap",map:"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFuYWx5dGljc01ldHJpYy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2tDIiwiZmlsZSI6IkFuYWx5dGljc01ldHJpYy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBqc3ggYXMgX2pzeCwganN4cyBhcyBfanN4cywgRnJhZ21lbnQgYXMgX0ZyYWdtZW50IH0gZnJvbSBcInJlYWN0L2pzeC1ydW50aW1lXCI7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSBcIi4uLy4uL2NvbnN0YW50cy9UaGVtZVwiO1xyXG5pbXBvcnQgeyBUaXRsZU1lZGl1bSwgVGl0bGVSZWd1bGFyIH0gZnJvbSAnLi4vVHlwb2dyYXBoeVN0eWxlJztcclxuaW1wb3J0IHsgQW5hbHl0aWNzVHJlbmQgfSBmcm9tICcuL0FuYWx5dGljc1RyZW5kJztcclxuY29uc3QgVHJlbmRDb250YWluZXIgPSBzdHlsZWQuZGl2IGBcblx0ZGlzcGxheTogZmxleDtcblx0ZmxleC1kaXJlY3Rpb246IHJvdztcblx0ZmxleC13cmFwOiB3cmFwO1xuYDtcclxuY29uc3QgQnJlYWsgPSBzdHlsZWQuZGl2IGBcblx0ZmxleC1iYXNpczogMTAwJTtcblx0aGVpZ2h0OiAwO1xuYDtcclxuZXhwb3J0IGNvbnN0IEFuYWx5dGljc01ldHJpYyA9ICh7IHRpdGxlLCB0cmVuZHMsIFJpZ2h0SGVhZGVyQ29tcG9uZW50LCBjb250YWluZXJTdHlsZSwgdGl0bGVTaXplLCB0aXRsZUNvbG9yLCBwZXJSb3csIH0pID0+IHtcclxuICAgIGNvbnN0IFR5cG8gPSB0aXRsZVNpemUgPT09ICdsYXJnZScgPyBUaXRsZU1lZGl1bSA6IFRpdGxlUmVndWxhcjtcclxuICAgIGNvbnN0IHBlclJvd0xvY2FsID0gcGVyUm93IHx8XHJcbiAgICAgICAgKHRyZW5kcy5sZW5ndGggPD0gNCA/IHRyZW5kcy5sZW5ndGggOiB0cmVuZHMubGVuZ3RoICUgMyA9PSAwID8gMyA6IDQpO1xyXG4gICAgY29uc3Qgcm93cyA9IE1hdGguY2VpbCh0cmVuZHMubGVuZ3RoIC8gcGVyUm93TG9jYWwpO1xyXG4gICAgcmV0dXJuIChfanN4cyhcImRpdlwiLCBPYmplY3QuYXNzaWduKHsgc3R5bGU6IE9iamVjdC5hc3NpZ24oeyBwYWRkaW5nVG9wOiAyNCwgcGFkZGluZ0JvdHRvbTogMjQgfSwgKGNvbnRhaW5lclN0eWxlICE9PSBudWxsICYmIGNvbnRhaW5lclN0eWxlICE9PSB2b2lkIDAgPyBjb250YWluZXJTdHlsZSA6IHt9KSkgfSwgeyBjaGlsZHJlbjogW19qc3hzKFwiZGl2XCIsIE9iamVjdC5hc3NpZ24oeyBzdHlsZToge1xyXG4gICAgICAgICAgICAgICAgICAgIGRpc3BsYXk6ICdmbGV4JyxcclxuICAgICAgICAgICAgICAgICAgICBmbGV4RGlyZWN0aW9uOiAncm93JyxcclxuICAgICAgICAgICAgICAgICAgICBqdXN0aWZ5Q29udGVudDogJ3NwYWNlLWJldHdlZW4nLFxyXG4gICAgICAgICAgICAgICAgfSB9LCB7IGNoaWxkcmVuOiBbdGl0bGUgJiYgKF9qc3goVHlwbywgT2JqZWN0LmFzc2lnbih7IGNvbG9yOiB0aXRsZUNvbG9yICE9PSBudWxsICYmIHRpdGxlQ29sb3IgIT09IHZvaWQgMCA/IHRpdGxlQ29sb3IgOiBDT0xPUlMuY29udGVudC5zZWNvbmRhcnksIHN0eWxlOiB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBwYWRkaW5nTGVmdDogMjQsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBwYWRkaW5nUmlnaHQ6IDI0LFxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgcGFkZGluZ0JvdHRvbTogOCxcclxuICAgICAgICAgICAgICAgICAgICAgICAgfSB9LCB7IGNoaWxkcmVuOiB0aXRsZSB9KSkpLCBSaWdodEhlYWRlckNvbXBvbmVudF0gfSkpLCBfanN4KFRyZW5kQ29udGFpbmVyLCB7IGNoaWxkcmVuOiBBcnJheS5mcm9tKHsgbGVuZ3RoOiByb3dzIH0pLm1hcCgoXywgcm93SW5kZXgpID0+IChfanN4cyhfRnJhZ21lbnQsIHsgY2hpbGRyZW46IFtfanN4KFwiZGl2XCIsIE9iamVjdC5hc3NpZ24oeyBzdHlsZTogeyBkaXNwbGF5OiAnZmxleCcsIHdpZHRoOiAnMTAwJScgfSB9LCB7IGNoaWxkcmVuOiB0cmVuZHNcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAuc2xpY2Uocm93SW5kZXggKiBwZXJSb3dMb2NhbCwgKHJvd0luZGV4ICsgMSkgKiBwZXJSb3dMb2NhbClcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAubWFwKCh0cmVuZCwgaSkgPT4ge1xyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHZhciBfYTtcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICByZXR1cm4gKF9qc3goXCJkaXZcIiwgT2JqZWN0LmFzc2lnbih7IHN0eWxlOiB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBmbGV4OiAxLFxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgbWF4V2lkdGg6IGA1MCVgLFxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9IH0sIHsgY2hpbGRyZW46IF9qc3goQW5hbHl0aWNzVHJlbmQsIE9iamVjdC5hc3NpZ24oe30sIHRyZW5kLCB7IGNhcmQ6IGZhbHNlLCBzaXplOiAoX2EgPSB0cmVuZC5zaXplKSAhPT0gbnVsbCAmJiBfYSAhPT0gdm9pZCAwID8gX2EgOiAnc21hbGwnLCByaWdodFNlcGFyYXRvcjogaSArIHJvd0luZGV4ICogcGVyUm93TG9jYWwgPFxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIE1hdGgubWluKChyb3dJbmRleCArIDEpICogcGVyUm93TG9jYWwgLSAxLCB0cmVuZHMubGVuZ3RoIC0gMSkgfSkpIH0pLCBpKSk7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB9KSB9KSwgcm93SW5kZXgpLCBfanN4KEJyZWFrLCB7IHN0eWxlOiB7IG1hcmdpblRvcDogJzMycHgnIH0gfSldIH0pKSkgfSldIH0pKSk7XHJcbn07XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPUFuYWx5dGljc01ldHJpYy5qcy5tYXAiXX0= */",toString:b}),G=e.default("div","production"===process.env.NODE_ENV?{target:"e1bel8cf0"}:{target:"e1bel8cf0",label:"Break"})("production"===process.env.NODE_ENV?{name:"1f76xva",styles:"flex-basis:100%;height:0"}:{name:"1f76xva",styles:"flex-basis:100%;height:0",map:"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFuYWx5dGljc01ldHJpYy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVXlCIiwiZmlsZSI6IkFuYWx5dGljc01ldHJpYy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBqc3ggYXMgX2pzeCwganN4cyBhcyBfanN4cywgRnJhZ21lbnQgYXMgX0ZyYWdtZW50IH0gZnJvbSBcInJlYWN0L2pzeC1ydW50aW1lXCI7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSBcIi4uLy4uL2NvbnN0YW50cy9UaGVtZVwiO1xyXG5pbXBvcnQgeyBUaXRsZU1lZGl1bSwgVGl0bGVSZWd1bGFyIH0gZnJvbSAnLi4vVHlwb2dyYXBoeVN0eWxlJztcclxuaW1wb3J0IHsgQW5hbHl0aWNzVHJlbmQgfSBmcm9tICcuL0FuYWx5dGljc1RyZW5kJztcclxuY29uc3QgVHJlbmRDb250YWluZXIgPSBzdHlsZWQuZGl2IGBcblx0ZGlzcGxheTogZmxleDtcblx0ZmxleC1kaXJlY3Rpb246IHJvdztcblx0ZmxleC13cmFwOiB3cmFwO1xuYDtcclxuY29uc3QgQnJlYWsgPSBzdHlsZWQuZGl2IGBcblx0ZmxleC1iYXNpczogMTAwJTtcblx0aGVpZ2h0OiAwO1xuYDtcclxuZXhwb3J0IGNvbnN0IEFuYWx5dGljc01ldHJpYyA9ICh7IHRpdGxlLCB0cmVuZHMsIFJpZ2h0SGVhZGVyQ29tcG9uZW50LCBjb250YWluZXJTdHlsZSwgdGl0bGVTaXplLCB0aXRsZUNvbG9yLCBwZXJSb3csIH0pID0+IHtcclxuICAgIGNvbnN0IFR5cG8gPSB0aXRsZVNpemUgPT09ICdsYXJnZScgPyBUaXRsZU1lZGl1bSA6IFRpdGxlUmVndWxhcjtcclxuICAgIGNvbnN0IHBlclJvd0xvY2FsID0gcGVyUm93IHx8XHJcbiAgICAgICAgKHRyZW5kcy5sZW5ndGggPD0gNCA/IHRyZW5kcy5sZW5ndGggOiB0cmVuZHMubGVuZ3RoICUgMyA9PSAwID8gMyA6IDQpO1xyXG4gICAgY29uc3Qgcm93cyA9IE1hdGguY2VpbCh0cmVuZHMubGVuZ3RoIC8gcGVyUm93TG9jYWwpO1xyXG4gICAgcmV0dXJuIChfanN4cyhcImRpdlwiLCBPYmplY3QuYXNzaWduKHsgc3R5bGU6IE9iamVjdC5hc3NpZ24oeyBwYWRkaW5nVG9wOiAyNCwgcGFkZGluZ0JvdHRvbTogMjQgfSwgKGNvbnRhaW5lclN0eWxlICE9PSBudWxsICYmIGNvbnRhaW5lclN0eWxlICE9PSB2b2lkIDAgPyBjb250YWluZXJTdHlsZSA6IHt9KSkgfSwgeyBjaGlsZHJlbjogW19qc3hzKFwiZGl2XCIsIE9iamVjdC5hc3NpZ24oeyBzdHlsZToge1xyXG4gICAgICAgICAgICAgICAgICAgIGRpc3BsYXk6ICdmbGV4JyxcclxuICAgICAgICAgICAgICAgICAgICBmbGV4RGlyZWN0aW9uOiAncm93JyxcclxuICAgICAgICAgICAgICAgICAgICBqdXN0aWZ5Q29udGVudDogJ3NwYWNlLWJldHdlZW4nLFxyXG4gICAgICAgICAgICAgICAgfSB9LCB7IGNoaWxkcmVuOiBbdGl0bGUgJiYgKF9qc3goVHlwbywgT2JqZWN0LmFzc2lnbih7IGNvbG9yOiB0aXRsZUNvbG9yICE9PSBudWxsICYmIHRpdGxlQ29sb3IgIT09IHZvaWQgMCA/IHRpdGxlQ29sb3IgOiBDT0xPUlMuY29udGVudC5zZWNvbmRhcnksIHN0eWxlOiB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBwYWRkaW5nTGVmdDogMjQsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBwYWRkaW5nUmlnaHQ6IDI0LFxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgcGFkZGluZ0JvdHRvbTogOCxcclxuICAgICAgICAgICAgICAgICAgICAgICAgfSB9LCB7IGNoaWxkcmVuOiB0aXRsZSB9KSkpLCBSaWdodEhlYWRlckNvbXBvbmVudF0gfSkpLCBfanN4KFRyZW5kQ29udGFpbmVyLCB7IGNoaWxkcmVuOiBBcnJheS5mcm9tKHsgbGVuZ3RoOiByb3dzIH0pLm1hcCgoXywgcm93SW5kZXgpID0+IChfanN4cyhfRnJhZ21lbnQsIHsgY2hpbGRyZW46IFtfanN4KFwiZGl2XCIsIE9iamVjdC5hc3NpZ24oeyBzdHlsZTogeyBkaXNwbGF5OiAnZmxleCcsIHdpZHRoOiAnMTAwJScgfSB9LCB7IGNoaWxkcmVuOiB0cmVuZHNcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAuc2xpY2Uocm93SW5kZXggKiBwZXJSb3dMb2NhbCwgKHJvd0luZGV4ICsgMSkgKiBwZXJSb3dMb2NhbClcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAubWFwKCh0cmVuZCwgaSkgPT4ge1xyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHZhciBfYTtcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICByZXR1cm4gKF9qc3goXCJkaXZcIiwgT2JqZWN0LmFzc2lnbih7IHN0eWxlOiB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBmbGV4OiAxLFxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgbWF4V2lkdGg6IGA1MCVgLFxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9IH0sIHsgY2hpbGRyZW46IF9qc3goQW5hbHl0aWNzVHJlbmQsIE9iamVjdC5hc3NpZ24oe30sIHRyZW5kLCB7IGNhcmQ6IGZhbHNlLCBzaXplOiAoX2EgPSB0cmVuZC5zaXplKSAhPT0gbnVsbCAmJiBfYSAhPT0gdm9pZCAwID8gX2EgOiAnc21hbGwnLCByaWdodFNlcGFyYXRvcjogaSArIHJvd0luZGV4ICogcGVyUm93TG9jYWwgPFxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIE1hdGgubWluKChyb3dJbmRleCArIDEpICogcGVyUm93TG9jYWwgLSAxLCB0cmVuZHMubGVuZ3RoIC0gMSkgfSkpIH0pLCBpKSk7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB9KSB9KSwgcm93SW5kZXgpLCBfanN4KEJyZWFrLCB7IHN0eWxlOiB7IG1hcmdpblRvcDogJzMycHgnIH0gfSldIH0pKSkgfSldIH0pKSk7XHJcbn07XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPUFuYWx5dGljc01ldHJpYy5qcy5tYXAiXX0= */",toString:b});exports.AnalyticsMetric=g=>{let{title:l,trends:e,RightHeaderComponent:b,containerStyle:a,titleSize:i,titleColor:n,perRow:Z}=g;const u="large"===i?A.TitleMedium:A.TitleRegular,s=Z||(e.length<=4?e.length:e.length%3==0?3:4),t=Math.ceil(e.length/s);return I.jsxs("div",Object.assign({style:Object.assign({paddingTop:24,paddingBottom:24},null!=a?a:{})},{children:[I.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[l&&I.jsx(u,Object.assign({color:null!=n?n:C.COLORS.content.secondary,style:{paddingLeft:24,paddingRight:24,paddingBottom:8}},{children:l})),b]})),I.jsx(d,{children:Array.from({length:t}).map(((g,C)=>I.jsxs(I.Fragment,{children:[I.jsx("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e.slice(C*s,(C+1)*s).map(((g,A)=>{var l;return I.jsx("div",Object.assign({style:{flex:1,maxWidth:"50%"}},{children:I.jsx(c.AnalyticsTrend,Object.assign({},g,{card:!1,size:null!==(l=g.size)&&void 0!==l?l:"small",rightSeparator:A+C*s<Math.min((C+1)*s-1,e.length-1)}))}),A)}))}),C),I.jsx(G,{style:{marginTop:"32px"}})]})))})]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var g=require("@emotion/styled/base"),I=require("react/jsx-runtime"),C=require("../../constants/Theme.js"),l=require("../TypographyStyle.js"),A=require("./AnalyticsTrend.js");function e(g){return g&&"object"==typeof g&&"default"in g?g:{default:g}}const c=e(g).default("div","production"===process.env.NODE_ENV?{target:"e1bel8cf0"}:{target:"e1bel8cf0",label:"TrendContainer"})("production"===process.env.NODE_ENV?{name:"jovua5",styles:"display:flex;flex-direction:row;flex-wrap:wrap"}:{name:"jovua5",styles:"display:flex;flex-direction:row;flex-wrap:wrap",map:"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFuYWx5dGljc01ldHJpYy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2tDIiwiZmlsZSI6IkFuYWx5dGljc01ldHJpYy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBqc3ggYXMgX2pzeCwganN4cyBhcyBfanN4cywgRnJhZ21lbnQgYXMgX0ZyYWdtZW50IH0gZnJvbSBcInJlYWN0L2pzeC1ydW50aW1lXCI7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSBcIi4uLy4uL2NvbnN0YW50cy9UaGVtZVwiO1xyXG5pbXBvcnQgeyBUaXRsZU1lZGl1bSwgVGl0bGVSZWd1bGFyIH0gZnJvbSAnLi4vVHlwb2dyYXBoeVN0eWxlJztcclxuaW1wb3J0IHsgQW5hbHl0aWNzVHJlbmQgfSBmcm9tICcuL0FuYWx5dGljc1RyZW5kJztcclxuY29uc3QgVHJlbmRDb250YWluZXIgPSBzdHlsZWQuZGl2IGBcblx0ZGlzcGxheTogZmxleDtcblx0ZmxleC1kaXJlY3Rpb246IHJvdztcblx0ZmxleC13cmFwOiB3cmFwO1xuYDtcclxuZXhwb3J0IGNvbnN0IEFuYWx5dGljc01ldHJpYyA9ICh7IHRpdGxlLCB0cmVuZHMsIFJpZ2h0SGVhZGVyQ29tcG9uZW50LCBjb250YWluZXJTdHlsZSwgdGl0bGVTaXplLCB0aXRsZUNvbG9yLCBwZXJSb3csIGlzTG9hZGluZywgdHJlbmRTdHlsZSwgdHJlbmRDb250YWluZXJTdHlsZSwgdHJlbmRJY29uU3R5bGUsIGhpZGVIZWFkZXJEaXYsIH0pID0+IHtcclxuICAgIGNvbnN0IFR5cG8gPSB0aXRsZVNpemUgPT09ICdsYXJnZScgPyBUaXRsZU1lZGl1bSA6IFRpdGxlUmVndWxhcjtcclxuICAgIGNvbnN0IHBlclJvd0xvY2FsID0gcGVyUm93IHx8XHJcbiAgICAgICAgKHRyZW5kcy5sZW5ndGggPD0gNCA/IHRyZW5kcy5sZW5ndGggOiB0cmVuZHMubGVuZ3RoICUgMyA9PSAwID8gMyA6IDQpO1xyXG4gICAgY29uc3Qgcm93cyA9IE1hdGguY2VpbCh0cmVuZHMubGVuZ3RoIC8gcGVyUm93TG9jYWwpO1xyXG4gICAgcmV0dXJuIChfanN4cyhcImRpdlwiLCBPYmplY3QuYXNzaWduKHsgc3R5bGU6IE9iamVjdC5hc3NpZ24oeyBwYWRkaW5nVG9wOiAyNCwgcGFkZGluZ0JvdHRvbTogMjQgfSwgKGNvbnRhaW5lclN0eWxlICE9PSBudWxsICYmIGNvbnRhaW5lclN0eWxlICE9PSB2b2lkIDAgPyBjb250YWluZXJTdHlsZSA6IHt9KSkgfSwgeyBjaGlsZHJlbjogW19qc3hzKFwiZGl2XCIsIE9iamVjdC5hc3NpZ24oeyBzdHlsZToge1xyXG4gICAgICAgICAgICAgICAgICAgIGRpc3BsYXk6ICdmbGV4JyxcclxuICAgICAgICAgICAgICAgICAgICBmbGV4RGlyZWN0aW9uOiAncm93JyxcclxuICAgICAgICAgICAgICAgICAgICBqdXN0aWZ5Q29udGVudDogJ3NwYWNlLWJldHdlZW4nLFxyXG4gICAgICAgICAgICAgICAgICAgIHBhZGRpbmdCb3R0b206IGhpZGVIZWFkZXJEaXYgPyAwIDogMTIsXHJcbiAgICAgICAgICAgICAgICB9IH0sIHsgY2hpbGRyZW46IFt0aXRsZSAmJiAoX2pzeChUeXBvLCBPYmplY3QuYXNzaWduKHsgY29sb3I6IHRpdGxlQ29sb3IgIT09IG51bGwgJiYgdGl0bGVDb2xvciAhPT0gdm9pZCAwID8gdGl0bGVDb2xvciA6IENPTE9SUy5jb250ZW50LnNlY29uZGFyeSwgc3R5bGU6IHtcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHBhZGRpbmdMZWZ0OiAyNCxcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHBhZGRpbmdSaWdodDogMjQsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIH0gfSwgeyBjaGlsZHJlbjogdGl0bGUgfSkpKSwgUmlnaHRIZWFkZXJDb21wb25lbnRdIH0pKSwgX2pzeChUcmVuZENvbnRhaW5lciwgeyBjaGlsZHJlbjogQXJyYXkuZnJvbSh7IGxlbmd0aDogcm93cyB9KS5tYXAoKF8sIHJvd0luZGV4KSA9PiAoX2pzeChfRnJhZ21lbnQsIHsgY2hpbGRyZW46IF9qc3goXCJkaXZcIiwgT2JqZWN0LmFzc2lnbih7IHN0eWxlOiB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBkaXNwbGF5OiAnZmxleCcsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB3aWR0aDogJzEwMCUnLFxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgbWFyZ2luVG9wOiByb3dJbmRleCA9PT0gMCA/IDAgOiAxNixcclxuICAgICAgICAgICAgICAgICAgICAgICAgfSB9LCB7IGNoaWxkcmVuOiB0cmVuZHNcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIC5zbGljZShyb3dJbmRleCAqIHBlclJvd0xvY2FsLCAocm93SW5kZXggKyAxKSAqIHBlclJvd0xvY2FsKVxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgLm1hcCgodHJlbmQsIGkpID0+IHtcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHZhciBfYTtcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHJldHVybiAoX2pzeChcImRpdlwiLCBPYmplY3QuYXNzaWduKHsgc3R5bGU6IHtcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZmxleDogMSxcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgbWF4V2lkdGg6IHRyZW5kcy5sZW5ndGggPT09IDEgPyAnMTAwJScgOiAnNTAlJyxcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9IH0sIHsgY2hpbGRyZW46IF9qc3goQW5hbHl0aWNzVHJlbmQsIE9iamVjdC5hc3NpZ24oe30sIHRyZW5kLCB7IGlzTG9hZGluZzogaXNMb2FkaW5nLCBjYXJkOiBmYWxzZSwgc2l6ZTogKF9hID0gdHJlbmQuc2l6ZSkgIT09IG51bGwgJiYgX2EgIT09IHZvaWQgMCA/IF9hIDogJ3NtYWxsJywgcmlnaHRTZXBhcmF0b3I6IGkgKyByb3dJbmRleCAqIHBlclJvd0xvY2FsIDxcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIE1hdGgubWluKChyb3dJbmRleCArIDEpICogcGVyUm93TG9jYWwgLSAxLCB0cmVuZHMubGVuZ3RoIC0gMSksIHRyZW5kU3R5bGU6IHRyZW5kU3R5bGUsIHRyZW5kSWNvblN0eWxlOiB0cmVuZEljb25TdHlsZSwgdHJlbmRDb250YWluZXJTdHlsZTogdHJlbmRDb250YWluZXJTdHlsZSB9KSkgfSksIGkpKTtcclxuICAgICAgICAgICAgICAgICAgICAgICAgfSkgfSksIHJvd0luZGV4KSB9KSkpIH0pXSB9KSkpO1xyXG59O1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1BbmFseXRpY3NNZXRyaWMuanMubWFwIl19 */",toString:function(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}});exports.AnalyticsMetric=g=>{let{title:e,trends:t,RightHeaderComponent:d,containerStyle:n,titleSize:s,titleColor:b,perRow:i,isLoading:a,trendStyle:Z,trendContainerStyle:u,trendIconStyle:y,hideHeaderDiv:G}=g;const o="large"===s?l.TitleMedium:l.TitleRegular,r=i||(t.length<=4?t.length:t.length%3==0?3:4),x=Math.ceil(t.length/r);return I.jsxs("div",Object.assign({style:Object.assign({paddingTop:24,paddingBottom:24},null!=n?n:{})},{children:[I.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between",paddingBottom:G?0:12}},{children:[e&&I.jsx(o,Object.assign({color:null!=b?b:C.COLORS.content.secondary,style:{paddingLeft:24,paddingRight:24}},{children:e})),d]})),I.jsx(c,{children:Array.from({length:x}).map(((g,C)=>I.jsx(I.Fragment,{children:I.jsx("div",Object.assign({style:{display:"flex",width:"100%",marginTop:0===C?0:16}},{children:t.slice(C*r,(C+1)*r).map(((g,l)=>{var e;return I.jsx("div",Object.assign({style:{flex:1,maxWidth:1===t.length?"100%":"50%"}},{children:I.jsx(A.AnalyticsTrend,Object.assign({},g,{isLoading:a,card:!1,size:null!==(e=g.size)&&void 0!==e?e:"small",rightSeparator:l+C*r<Math.min((C+1)*r-1,t.length-1),trendStyle:Z,trendIconStyle:y,trendContainerStyle:u}))}),l)}))}),C)})))})]}))};

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsMultiChip.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 import { AnalyticsChipInterface } from './AnalyticsChip';
 export declare const AnalyticsMultiChip: React.FC<{
     chipDetails: AnalyticsChipInterface[];
+    wrapperStyle?: React.CSSProperties;
 }>;

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsMultiChip.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("./AnalyticsChip.js"),i=require("./CommonStyles.js");exports.AnalyticsMultiChip=s=>{let{chipDetails:a}=s;return e.jsx(i.AnalyticsMultiWrapper,{children:a.map(((e,i)=>r.createElement(t.AnalyticsChip,Object.assign({},e,{key:i+"_chip"}))))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("./AnalyticsChip.js"),i=require("./CommonStyles.js");exports.AnalyticsMultiChip=s=>{let{chipDetails:l,wrapperStyle:a}=s;return e.jsx(i.AnalyticsMultiWrapper,Object.assign({style:null!=a?a:{}},{children:l.map(((e,i)=>r.createElement(t.AnalyticsChip,Object.assign({},e,{key:i+"_chip"}))))}))};

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsTrend.d.ts

@@ -3,6 +3,7 @@ export interface AnalyticsTrendInterface {
     title: string;
     value?: number | string;
     trendPercent?: number;
+    trendRaw?: number;
     formatVal?: boolean;
     timeline?: 'today' | 'yesterday' | '7 days' | '30 days' | 'custom';
     customRange?: Date[];
@@ -16,5 +17,13 @@ export interface AnalyticsTrendInterface {
     trailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
     onTrailIconClick?: () => void;
     iconTooltipBody?: string;
+    funnelPercent?: number;
+    isLoading?: boolean;
+    suffixText?: string;
+    trendStyle?: React.CSSProperties;
+    trendContainerStyle?: React.CSSProperties;
+    trendIconStyle?: React.CSSProperties;
+    containerStyle?: React.CSSProperties;
+    prevTrendDiff?: number;
 }
 export declare const AnalyticsTrend: React.FC<AnalyticsTrendInterface>;

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsTrend.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("../../constants/Theme.js"),s=require("../../assets/icons/arrow_down.svg.js"),n=require("../../assets/icons/arrow_up.svg.js"),r=require("../../assets/icons/info.svg.js"),o=require("../tag/Tag.js"),a=require("../template-context-mapper/utils/getFormattedMonthDate.js"),l=require("../tooltips/Tooltip.js"),c=require("../TypographyStyle.js"),d=require("./CommonStyles.js");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=g(t);const y=t=>{let{percent:r,direction:o,timeline:l,customRange:d}=t;const g="negative"===o?s.default:n.default,h="negative"===o?i.COLORS.background.negative.vibrant:"positive"===o?i.COLORS.background.positive.vibrant:i.COLORS.content.placeholder,y="today"===l?"vs yesterday":"yesterday"===l?"vs 1 day before":"7 days"===l?"vs last 7 days":"30 days"===l?"vs last 30 days":"custom"===l&&d?`vs ${a.getFormattedMonthDate(d[0])} - ${a.getFormattedMonthDate(d[1])}`:"";return e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",flexDirection:"row"}},{children:["number"==typeof r&&e.jsx(g,{color:h,height:20,width:20,style:{marginRight:2}}),"number"==typeof r&&o&&e.jsxs(c.TitleSmall,Object.assign({style:{color:h}},{children:["neutral"===o?0:r,"%"]})),l&&e.jsx(c.Caption,Object.assign({style:{marginLeft:4,color:i.COLORS.content.placeholder}},{children:y}))]}))};exports.AnalyticsTrend=t=>{let{title:s,value:n,trendPercent:a,type:g="horizontal",timeline:p,customRange:u,tooltip:j,card:m=!0,rightSeparator:b=!1,size:v="big",share:x=!1,formatVal:O,prefixSymbol:f,trailingIcon:R,onTrailIconClick:C,iconTooltipBody:S}=t;const T="big"===v?c.TitleLarge:c.TitleMedium,w=void 0!==a?a<0?"negative":0===a?"neutral":"positive":void 0,L=void 0!==a?x?Math.round(a):Math.abs(Math.round(a)):void 0;return e.jsx(d.AnalyticsTrendContainer,Object.assign({card:m},{children:e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,borderRightWidth:b?1:0,borderRightColor:i.COLORS.stroke.primary,borderRightStyle:"solid",paddingLeft:m?0:24,paddingRight:m?0:24,height:"100%",justifyContent:"space-between",alignItems:"center"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:4,height:"100%"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"}},{children:[e.jsx(c.BodySecondary,Object.assign({style:{color:i.COLORS.content.secondary}},{children:s})),j&&e.jsx(l.Tooltip,Object.assign({body:j,placement:"right",width:300},{children:e.jsx("div",Object.assign({style:{display:"flex",alignItems:"center",cursor:"pointer"}},{children:e.jsx(r.default,{color:i.COLORS.content.inactive,height:16,width:16})}))}))]})),e.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:12,alignItems:"center"},x?{justifyContent:"space-between"}:{})},{children:[e.jsx(T,Object.assign({style:{color:i.COLORS.content.primary}},{children:void 0===n?"--":"number"==typeof n&&O?`${null!=f?f:""}${new Intl.NumberFormat("en-IN",{}).format(n)}`:`${null!=f?f:""}${n}`})),"horizontal"===g&&!x&&e.jsx(y,{timeline:p,customRange:u,percent:L,direction:w}),x&&void 0!==L&&e.jsx(o.Tag,{tagText:`${L} %`,theme:"light",type:"neutral"})]})),"vertical"===g&&!x&&e.jsx("div",Object.assign({style:{marginTop:12}},{children:e.jsx(y,{timeline:p,customRange:u,percent:L,direction:w})}))]})),S&&e.jsx(l.Tooltip,Object.assign({body:S,placement:"right"},{children:R&&e.jsx("div",Object.assign({className:"icon--holder",onClick:C},{children:h.default.createElement(R,{height:20,width:20,color:i.COLORS.content.secondary})}))}))]}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("../shimmer/ShimmerComponent/ShimmerStyled.js"),n=require("../../utils/DateUtils.js"),r=require("../../constants/Theme.js"),s=require("../../assets/icons/arrow_down.svg.js"),l=require("../../assets/icons/arrow_up.svg.js"),a=require("../../assets/icons/info.svg.js"),o=require("../tag/Tag.js"),c=require("../tooltips/Tooltip.js"),d=require("../TypographyStyle.js"),g=require("./chart/utils/calcPercentage.js"),u=require("./CommonStyles.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var y=h(t);const m=i=>{let{percent:a,direction:o,timeline:c,customRange:u,trendRaw:h,prefixSymbol:y,trendIconStyle:m}=i;const p="negative"===o?s.default:l.default,j="negative"===o?r.COLORS.background.negative.vibrant:"positive"===o?r.COLORS.background.positive.vibrant:r.COLORS.content.placeholder,x=t.useRef("today"===c?"vs yesterday":"yesterday"===c?"vs 1 day before":"7 days"===c?"vs last 7 days":"30 days"===c?"vs last 30 days":"custom"===c&&u?n.default.getAnalyticsCustomDateTimelineText(u):""),b=t.useRef((()=>{const e=((null!=h?h:0)>0?"+":"")+(null!=y?y:"");return void 0===h?"--":`${null!=e?e:""}${g.truncateValueTo10K(h)}`})());return e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",flexDirection:"row",flexWrap:"wrap"}},{children:["number"==typeof a&&e.jsx(p,{color:j,height:16,width:16,style:Object.assign({marginRight:2},null!=m?m:{})}),"number"==typeof a&&o&&e.jsxs(d.Caption,Object.assign({style:{color:j}},{children:["neutral"===o?0:a<1e3?a:">999","%"]})),!!h&&e.jsx(d.Caption,Object.assign({style:{marginLeft:4,color:r.COLORS.content.placeholder}},{children:`(${b.current})`})),c&&e.jsx(d.Caption,Object.assign({style:{marginLeft:4,color:r.COLORS.content.placeholder}},{children:x.current}))]}))};exports.AnalyticsTrend=t=>{let{title:n,value:s,trendPercent:l,type:h="horizontal",timeline:p,customRange:j,tooltip:x,card:b=!0,rightSeparator:f=!1,size:O="big",share:v=!1,formatVal:S,prefixSymbol:C,trailingIcon:T,onTrailIconClick:R,iconTooltipBody:w,funnelPercent:$,isLoading:L,trendRaw:q,suffixText:I,trendStyle:D,trendContainerStyle:M,trendIconStyle:k,containerStyle:z,prevTrendDiff:F}=t;const P="big"===O?d.TitleLarge:d.TitleMedium,_=void 0!==l?l<0?"negative":0===l?"neutral":"positive":void 0,A=void 0!==l?v?Math.round(l):Math.abs(Math.round(l)):void 0;return e.jsx(u.AnalyticsTrendContainer,Object.assign({card:b,style:Object.assign({},z)},{children:e.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:4,borderRightWidth:f?1:0,borderRightColor:r.COLORS.stroke.primary,borderRightStyle:"solid",paddingLeft:b?0:24,paddingRight:b?0:24,height:"100%",justifyContent:"space-between",alignItems:"center"},null!=M?M:{})},{children:[e.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"column",gap:4,height:"100%"},null!=D?D:{})},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"}},{children:[e.jsx(d.BodyCaption,Object.assign({style:{color:r.COLORS.content.secondary}},{children:n})),x&&e.jsx(c.Tooltip,Object.assign({body:x,placement:"right",width:300},{children:e.jsx("div",Object.assign({style:{display:"flex",alignItems:"center",cursor:"pointer"}},{children:e.jsx(a.default,{color:r.COLORS.content.primary,height:16,width:16})}))}))]})),e.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:12,alignItems:"center"},v?{justifyContent:"space-between"}:{})},{children:[L&&e.jsx(i.ShimmerComponentStyled,{width:108,height:26}),!L&&e.jsx(P,Object.assign({style:{color:r.COLORS.content.primary}},{children:void 0===s?"--":"number"==typeof s&&S?s>9999?`${null!=C?C:""}${g.truncateValueTo10K(s)} ${null!=I?I:""}`:`${null!=C?C:""}${new Intl.NumberFormat("en-IN",{maximumFractionDigits:2}).format(s)} ${null!=I?I:""}`:`${null!=C?C:""}${s} ${null!=I?I:""}`})),"horizontal"===h&&!L&&!v&&e.jsx(m,{timeline:p,customRange:j,percent:A,direction:_,trendRaw:q,prefixSymbol:C,trendIconStyle:k}),L&&!v&&"horizontal"===h&&e.jsx(i.ShimmerComponentStyled,{height:20,width:141,marginTop:6}),"vertical"===h&&!L&&void 0!==$&&e.jsx(o.Tag,{tagText:`${$} %`,theme:"light",type:"neutral"}),v&&!L&&void 0!==A&&e.jsx(o.Tag,{tagText:`${A} %`,theme:"light",type:"neutral"}),v||L||!F||0==F?e.jsx(e.Fragment,{}):e.jsx(o.Tag,{tagText:(e=>{const t=Math.abs(e);return t%1!=0?`${t.toFixed(1)} %`:`${t} %`})(F),theme:"light",type:"neutral"})]})),"vertical"===h&&!L&&!v&&e.jsx("div",Object.assign({style:{marginTop:10}},{children:e.jsx(m,{timeline:p,customRange:j,percent:A,direction:_,trendRaw:q,prefixSymbol:C,trendIconStyle:k})})),L&&"vertical"===h&&e.jsx(i.ShimmerComponentStyled,{height:20,width:141,marginTop:6})]})),w&&!L&&e.jsx(c.Tooltip,Object.assign({body:w,placement:"right"},{children:T&&e.jsx("div",Object.assign({className:"icon--holder",onClick:R},{children:y.default.createElement(T,{height:20,width:20,color:r.COLORS.content.secondary})}))}))]}))}))};

package/dist/cjs/components/analytics-chips-and-dropdowns/CommonStyles.d.ts

@@ -30,6 +30,8 @@ export declare const ItemMenuContainer: import("@emotion/styled").StyledComponen
     as?: import("react").ElementType<any> | undefined;
 } & {
     isSelected?: boolean | undefined;
+    isLastItem?: boolean | undefined;
+    isFirstItem?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const AnalyticsTrendContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;