@bikdotai/bik-component-library 0.0.687-beta.8 → 0.0.687

package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const GraphContainerWrapper: import("styled-components").StyledComponent<"div", any, {
+    padding?: string | undefined;
+    chartWrapperHeight?: string | undefined;
+    isFunnel?: boolean | undefined;
+    customLegend?: boolean | undefined;
+}, never>;
+export declare const HeaderIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.styles.js

@@ -1,6 +1,6 @@
-import e from"styled-components";import{COLORS as p}from"../../../../constants/Theme.js";const r=e.div`
-	background-color: ${p.surface.standard};
-	padding: ${e=>e.padding??"24px"};
+import e from"styled-components";import{COLORS as r}from"../../../../constants/Theme.js";const n=e.div`
+	background-color: ${r.surface.standard};
+	padding: ${e=>{var r;return null!==(r=e.padding)&&void 0!==r?r:"24px"}};
 	border: none;
 	width: 100%;
 
@@ -8,7 +8,7 @@ import e from"styled-components";import{COLORS as p}from"../../../../constants/T
 		width: 100%;
 		display: flex;
 		gap: 24px;
-		height: ${e=>e.chartWrapperHeight??"100%"};
+		height: ${e=>{var r;return null!==(r=e.chartWrapperHeight)&&void 0!==r?r:"100%"}};
 		flex-direction: ${e=>e.isFunnel||e.customLegend?"column":"row"};
 	}
 
@@ -28,8 +28,8 @@ import e from"styled-components";import{COLORS as p}from"../../../../constants/T
 	.legend__set {
 		margin-top: 16px;
 	}
-`,t=e.div`
+`,p=e.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
-`;export{r as GraphContainerWrapper,t as HeaderIconWrapper};
+`;export{n as GraphContainerWrapper,p as HeaderIconWrapper};

package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.d.ts

@@ -1,6 +1,2 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { StackedBarDistributionGraphI } from './StackedBarDistributionChart.model.js';
-
-declare const StackedBarDistributionChart: (props: StackedBarDistributionGraphI) => react_jsx_runtime.JSX.Element;
-
-export { StackedBarDistributionChart };
+import { StackedBarDistributionGraphI } from './StackedBarDistributionChart.model';
+export declare const StackedBarDistributionChart: (props: StackedBarDistributionGraphI) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import{Chart as o,CategoryScale as l,LinearScale as n,BarElement as r,Tooltip as i,Legend as c}from"chart.js";import s from"chartjs-plugin-datalabels";import{useState as d,useEffect as p,useCallback as h}from"react";import{Bar as g}from"react-chartjs-2";import{BodyTiny as b,TitleRegular as f}from"../../../TypographyStyle.js";import{COLORS as u,FONTS as m}from"../../../../constants/Theme.js";import{truncateValueForInternationalStore as y,truncateValueForIndianStore as F}from"../utils/calcPercentage.js";import{GraphContainerWrapper as T}from"./StackedBarChart.styles.js";import{GRAPH_ORIENTATION as A}from"./StackedBarDistributionChart.model.js";o.register(l,n,r,i,c,s),o.defaults.plugins.datalabels.display=!1;const C=o=>{const[l,n]=d([]),[r,i]=d(),c=!o.data.filter((e=>!!e.value)).length,s=o.colorMatrix&&o.colorMatrix.length?o.colorMatrix:[["#09A35B","#33D2A1","#A8E5C0","#075E54","#128C7E","#25D366","#DCF8C6"],["#FC4183","#FCA0C2","#FEE3EF","#F5016C","#F972AD","#FCAACE","#FEE3EF"],["#1B95D6","#74B2E5","#A0D1F1","#0078D5","#55A5E3","#8EC3EC","#C6E1F6"],["#FF4F52","#FFA3A4","#FFD9DA","#FF0012","#FF797D","#FFC4C5","#F9DFDF"],["#4B2E91","#7B1FA2","#A77BCA","#5E07BB","#9E77ED","#D2AEFF","#EBDBFF"]],C={min:0,max:200,stepSize:20},O={min:o.minValue,max:o.maxValue,stepSize:o.valuesStepSize},v={barPercentage:.4,categoryPercentage:1,pointStyle:"circle",barThickness:c?0:o.barThickness??100},k={plugins:{legend:{display:!1},tooltip:{enabled:!c,callbacks:{label:o.tooltipConfig?.labelCallback,footer:o.tooltipConfig?.footerCallback},footerFont:o.tooltipConfig?.footerStyles?.footerFont},datalabels:{display:(!c&&o.showTotal)??!1,anchor:"end",align:"end",clamp:!0,formatter:(e,t)=>{const a=t.datasetIndex,l=t.chart.data.datasets;if(a!==l.length-1)return"";const n=t.dataIndex;let r=0;for(let e=0;e<l.length;e++)r+=l[e].data[n]??0;return r?o.isInternationalStore?y(r):F(r):""},color:u.content.secondary}},responsive:!0,maintainAspectRatio:!1,legend:{display:!1},indexAxis:o.orientation===A.HORIZONTAL?"y":"x",layout:{padding:{right:o.showTotal&&o.orientation===A.HORIZONTAL?50:0,top:o.showTotal&&o.orientation!=A.HORIZONTAL?25:0}},scales:{x:{title:{display:!!(o.orientation===A.HORIZONTAL?o.valueTitle?.heading:o.labelTitle?.heading),text:o.orientation===A.HORIZONTAL?o.valueTitle?.heading:o.labelTitle?.heading,color:(o.orientation===A.HORIZONTAL?o.valueTitle?.color:o.labelTitle?.color)??u.content.secondary,font:{size:m.bodySecondary.fontSize}},grid:{display:o.orientation===A.HORIZONTAL,color:u.background.base},ticks:{stepSize:30,fontSize:m.caption.fontSize,color:(o.orientation===A.HORIZONTAL?o.labelTitle?.color:o.valueTitle?.color)??u.content.secondary,...o.orientation===A.HORIZONTAL?c?C:O:{},callback:(e,t)=>o.orientation!==A.HORIZONTAL?r?.labels?.[t]??"":"number"!=typeof e?e:o.isInternationalStore?y(e):F(e)},stacked:!0},y:{title:{display:!!(o.orientation===A.HORIZONTAL?o.labelTitle?.heading:o.valueTitle?.heading),text:o.orientation===A.HORIZONTAL?o.labelTitle?.heading:o.valueTitle?.heading,color:(o.orientation===A.HORIZONTAL?o.labelTitle?.color:o.valueTitle?.color)??u.content.secondary,font:{size:m.bodySecondary.fontSize}},grid:{display:o.orientation!==A.HORIZONTAL,color:u.background.base},ticks:{fontSize:m.caption.fontSize,color:(o.orientation===A.HORIZONTAL?o.valueTitle?.color:o.labelTitle?.color)??u.content.secondary,...o.orientation===A.HORIZONTAL?{}:c?C:O,callback:(e,t)=>o.orientation===A.HORIZONTAL?r?.labels?.[t]??"":"number"!=typeof e?e:o.isInternationalStore?y(e):F(e)},stacked:!0}},onClick:(e,t)=>{if(!o.onBarClick)return;const a=t[0].datasetIndex,l=t[0].index,n=e.chart.data.datasets[a].label,r=e.chart.data.labels[l];o.onBarClick(r,n)},onHover:(e,t)=>{o.onBarClick&&t.length&&(e.native.target.style.cursor="pointer")}},x=Array.from(new Set(o.data.map((e=>e.label)))),E={labels:(H=x,H.map((e=>e.length>0?e.charAt(0).toUpperCase()+e.slice(1):e))),datasets:c?[{data:[10,20,30,40,50,60,80,100,120],backgroundColor:"rgba(0,0,0,0)"}]:[]};var H;p((()=>{const e=[];x.forEach(((t,a)=>{const l=[],n=o.data.filter((e=>e.label===t));o.isFunnel||n.sort(((e,t)=>t.value-e.value)),n.forEach(((e,t)=>{const o=((e,t,a)=>s[e].slice(-a)[t])(a,t,n.length);l.push({color:o,label:e.stackLabel});const r={label:e.stackLabel,backgroundColor:o,data:Array(x.length).fill(0),...v};r.data[a]=e.value,E.datasets.push(r)})),e.push(l)})),n(e),i(E)}),[o.data]);const I=h((()=>e("div",{style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",justifyContent:"flex-end"},children:N().map((a=>t("div",{className:"legend__row",children:[e("div",{className:"legend__palette",style:{backgroundColor:a.color}}),e(b,{color:u.content.secondary,children:a.label})]},a.label.replace(" ","_"))))})),[l]),N=()=>{const e=[];return l.forEach(((t,a)=>{e.push({color:t[0].color,label:x[a]})})),e};if(!r)return e(a,{});return t(T,{style:o.wrapperStyle??{},padding:o.outerPadding,chartWrapperHeight:o.chartWrapperHeight,isFunnel:o.isFunnel,children:[o.chartHeading&&e("div",{style:{marginBottom:24},children:e(f,{color:o.chartHeading.color??u.content.secondary,children:o.chartHeading.heading})}),t("div",{className:"graph__wrapper",children:[(o.showLegend??!0)&&o.isFunnel&&I(),e("div",{style:{height:o.graphCanvasHeight??500,width:o.graphCanvasWidth??"100%",flex:1},children:e(g,{options:k,data:r})}),(o.showLegend??!0)&&!o.isFunnel&&e("div",{style:{overflowY:"scroll",display:"flex",flexDirection:"column"},children:l.map(((a,o)=>e("div",{className:"legend__set",children:a.map((a=>t("div",{className:"legend__row",children:[e("div",{className:"legend__palette",style:{backgroundColor:a.color}}),e(b,{color:u.content.secondary,children:a.label})]},a.label.replace(" ","_"))))},`Legend_set_${o}`)))})]})]})};export{C as StackedBarDistributionChart};
+import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{Chart as t,CategoryScale as a,LinearScale as i,BarElement as n,Tooltip as r,Legend as d}from"chart.js";import s from"chartjs-plugin-datalabels";import{useState as c,useEffect as v,useCallback as u}from"react";import{Bar as g}from"react-chartjs-2";import{BodyTiny as p,TitleRegular as h}from"../../../TypographyStyle.js";import{COLORS as b,FONTS as O}from"../../../../constants/Theme.js";import{truncateValueForInternationalStore as f,truncateValueForIndianStore as m}from"../utils/calcPercentage.js";import{GraphContainerWrapper as y}from"./StackedBarChart.styles.js";import{GRAPH_ORIENTATION as F}from"./StackedBarDistributionChart.model.js";t.register(a,i,n,r,d,s),t.defaults.plugins.datalabels.display=!1;const T=t=>{var a,i,n,r,d,s,T,A,C,j,k,x,E,H,I,N,S,L,D,R,Z,B,_,w,z,P,M,W,V,Y,U,$;const[q,G]=c([]),[J,K]=c(),Q=!t.data.filter((e=>!!e.value)).length,X=t.colorMatrix&&t.colorMatrix.length?t.colorMatrix:[["#09A35B","#33D2A1","#A8E5C0","#075E54","#128C7E","#25D366","#DCF8C6"],["#FC4183","#FCA0C2","#FEE3EF","#F5016C","#F972AD","#FCAACE","#FEE3EF"],["#1B95D6","#74B2E5","#A0D1F1","#0078D5","#55A5E3","#8EC3EC","#C6E1F6"],["#FF4F52","#FFA3A4","#FFD9DA","#FF0012","#FF797D","#FFC4C5","#F9DFDF"],["#4B2E91","#7B1FA2","#A77BCA","#5E07BB","#9E77ED","#D2AEFF","#EBDBFF"]],ee={min:0,max:200,stepSize:20},le={min:t.minValue,max:t.maxValue,stepSize:t.valuesStepSize},oe={barPercentage:.4,categoryPercentage:1,pointStyle:"circle",barThickness:Q?0:null!==(a=t.barThickness)&&void 0!==a?a:100},te={plugins:{legend:{display:!1},tooltip:{enabled:!Q,callbacks:{label:null===(i=t.tooltipConfig)||void 0===i?void 0:i.labelCallback,footer:null===(n=t.tooltipConfig)||void 0===n?void 0:n.footerCallback},footerFont:null===(d=null===(r=t.tooltipConfig)||void 0===r?void 0:r.footerStyles)||void 0===d?void 0:d.footerFont},datalabels:{display:null!==(s=!Q&&t.showTotal)&&void 0!==s&&s,anchor:"end",align:"end",clamp:!0,formatter:(e,l)=>{var o;const a=l.datasetIndex,i=l.chart.data.datasets;if(a!==i.length-1)return"";const n=l.dataIndex;let r=0;for(let e=0;e<i.length;e++)r+=null!==(o=i[e].data[n])&&void 0!==o?o:0;return r?t.isInternationalStore?f(r):m(r):""},color:b.content.secondary}},responsive:!0,maintainAspectRatio:!1,legend:{display:!1},indexAxis:t.orientation===F.HORIZONTAL?"y":"x",layout:{padding:{right:t.showTotal&&t.orientation===F.HORIZONTAL?50:0,top:t.showTotal&&t.orientation!=F.HORIZONTAL?25:0}},scales:{x:{title:{display:!!(t.orientation===F.HORIZONTAL?null===(T=t.valueTitle)||void 0===T?void 0:T.heading:null===(A=t.labelTitle)||void 0===A?void 0:A.heading),text:t.orientation===F.HORIZONTAL?null===(C=t.valueTitle)||void 0===C?void 0:C.heading:null===(j=t.labelTitle)||void 0===j?void 0:j.heading,color:null!==(E=t.orientation===F.HORIZONTAL?null===(k=t.valueTitle)||void 0===k?void 0:k.color:null===(x=t.labelTitle)||void 0===x?void 0:x.color)&&void 0!==E?E:b.content.secondary,font:{size:O.bodySecondary.fontSize}},grid:{display:t.orientation===F.HORIZONTAL,color:b.background.base},ticks:Object.assign(Object.assign({stepSize:30,fontSize:O.caption.fontSize,color:null!==(N=t.orientation===F.HORIZONTAL?null===(H=t.labelTitle)||void 0===H?void 0:H.color:null===(I=t.valueTitle)||void 0===I?void 0:I.color)&&void 0!==N?N:b.content.secondary},t.orientation===F.HORIZONTAL?Q?ee:le:{}),{callback:(e,l)=>{var o,a;return t.orientation!==F.HORIZONTAL?null!==(a=null===(o=null==J?void 0:J.labels)||void 0===o?void 0:o[l])&&void 0!==a?a:"":"number"!=typeof e?e:t.isInternationalStore?f(e):m(e)}}),stacked:!0},y:{title:{display:!!(t.orientation===F.HORIZONTAL?null===(S=t.labelTitle)||void 0===S?void 0:S.heading:null===(L=t.valueTitle)||void 0===L?void 0:L.heading),text:t.orientation===F.HORIZONTAL?null===(D=t.labelTitle)||void 0===D?void 0:D.heading:null===(R=t.valueTitle)||void 0===R?void 0:R.heading,color:null!==(_=t.orientation===F.HORIZONTAL?null===(Z=t.labelTitle)||void 0===Z?void 0:Z.color:null===(B=t.valueTitle)||void 0===B?void 0:B.color)&&void 0!==_?_:b.content.secondary,font:{size:O.bodySecondary.fontSize}},grid:{display:t.orientation!==F.HORIZONTAL,color:b.background.base},ticks:Object.assign(Object.assign({fontSize:O.caption.fontSize,color:null!==(P=t.orientation===F.HORIZONTAL?null===(w=t.valueTitle)||void 0===w?void 0:w.color:null===(z=t.labelTitle)||void 0===z?void 0:z.color)&&void 0!==P?P:b.content.secondary},t.orientation===F.HORIZONTAL?{}:Q?ee:le),{callback:(e,l)=>{var o,a;return t.orientation===F.HORIZONTAL?null!==(a=null===(o=null==J?void 0:J.labels)||void 0===o?void 0:o[l])&&void 0!==a?a:"":"number"!=typeof e?e:t.isInternationalStore?f(e):m(e)}}),stacked:!0}},onClick:(e,l)=>{if(!t.onBarClick)return;const o=l[0].datasetIndex,a=l[0].index,i=e.chart.data.datasets[o].label,n=e.chart.data.labels[a];t.onBarClick(n,i)},onHover:(e,l)=>{t.onBarClick&&l.length&&(e.native.target.style.cursor="pointer")}},ae=Array.from(new Set(t.data.map((e=>e.label)))),ie={labels:(ne=ae,ne.map((e=>e.length>0?e.charAt(0).toUpperCase()+e.slice(1):e))),datasets:Q?[{data:[10,20,30,40,50,60,80,100,120],backgroundColor:"rgba(0,0,0,0)"}]:[]};var ne;v((()=>{const e=[];ae.forEach(((l,o)=>{const a=[],i=t.data.filter((e=>e.label===l));t.isFunnel||i.sort(((e,l)=>l.value-e.value)),i.forEach(((e,l)=>{const t=((e,l,o)=>X[e].slice(-o)[l])(o,l,i.length);a.push({color:t,label:e.stackLabel});const n=Object.assign({label:e.stackLabel,backgroundColor:t,data:Array(ae.length).fill(0)},oe);n.data[o]=e.value,ie.datasets.push(n)})),e.push(a)})),G(e),K(ie)}),[t.data]);const re=u((()=>e("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",justifyContent:"flex-end"}},{children:de().map((o=>l("div",Object.assign({className:"legend__row"},{children:[e("div",{className:"legend__palette",style:{backgroundColor:o.color}}),e(p,Object.assign({color:b.content.secondary},{children:o.label}))]}),o.label.replace(" ","_"))))}))),[q]),de=()=>{const e=[];return q.forEach(((l,o)=>{e.push({color:l[0].color,label:ae[o]})})),e};if(!J)return e(o,{});return l(y,Object.assign({style:null!==(M=t.wrapperStyle)&&void 0!==M?M:{},padding:t.outerPadding,chartWrapperHeight:t.chartWrapperHeight,isFunnel:t.isFunnel},{children:[t.chartHeading&&e("div",Object.assign({style:{marginBottom:24}},{children:e(h,Object.assign({color:null!==(W=t.chartHeading.color)&&void 0!==W?W:b.content.secondary},{children:t.chartHeading.heading}))})),l("div",Object.assign({className:"graph__wrapper"},{children:[(null===(V=t.showLegend)||void 0===V||V)&&t.isFunnel&&re(),e("div",Object.assign({style:{height:null!==(Y=t.graphCanvasHeight)&&void 0!==Y?Y:500,width:null!==(U=t.graphCanvasWidth)&&void 0!==U?U:"100%",flex:1}},{children:e(g,{options:te,data:J})})),(null===($=t.showLegend)||void 0===$||$)&&!t.isFunnel&&e("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"column"}},{children:q.map(((o,t)=>e("div",Object.assign({className:"legend__set"},{children:o.map((o=>l("div",Object.assign({className:"legend__row"},{children:[e("div",{className:"legend__palette",style:{backgroundColor:o.color}}),e(p,Object.assign({color:b.content.secondary},{children:o.label}))]}),o.label.replace(" ","_"))))}),`Legend_set_${t}`)))}))]}))]}))};export{T as StackedBarDistributionChart};

package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.model.d.ts

@@ -1,51 +1,48 @@
-import { TooltipItem, FontSpec } from 'chart.js';
-
-interface ChartHeadingI {
-    heading: string;
-    color?: string;
-}
-declare enum GRAPH_ORIENTATION {
-    VERTICAL = "vertical",
-    HORIZONTAL = "horizontal"
-}
-interface StackedBarDistributionGraphDataI {
-    label: string;
-    value: number;
-    stackLabel: string;
-}
-interface StackedBarDistributionGraphI {
-    graphCanvasHeight?: number | string;
-    graphCanvasWidth?: string;
-    tickColor?: string;
-    labelColor?: string;
-    chartHeading?: ChartHeadingI;
-    data: StackedBarDistributionGraphDataI[];
-    outerPadding?: string;
-    onBarClick?: (xAxisLabel: string, yAxisLabel: string) => void;
-    labelTitle?: ChartHeadingI;
-    valueTitle?: ChartHeadingI;
-    orientation?: GRAPH_ORIENTATION;
-    barThickness?: number;
-    valuesStepSize?: number;
-    minValue?: number;
-    maxValue?: number;
-    chartWrapperHeight?: string;
-    showLegend?: boolean;
-    isFunnel?: boolean;
-    colorMatrix?: string[][];
-    wrapperStyle?: React.CSSProperties;
-    showTotal?: boolean;
-    skipSortingByLabels?: boolean;
-    tooltipConfig?: {
-        titleCallback?: (toolTipItems: TooltipItem<'bar'>[]) => string | string[];
-        labelCallback?: (toolTipItem: TooltipItem<'bar'>) => string | string[];
-        footerCallback?: (toolTipItems: TooltipItem<'bar'>[]) => string | string[];
-        footerStyles?: {
-            footerFont?: Partial<FontSpec>;
-        };
-    };
-    isInternationalStore?: boolean;
-}
-
-export { GRAPH_ORIENTATION };
-export type { ChartHeadingI, StackedBarDistributionGraphDataI, StackedBarDistributionGraphI };
+/// <reference types="react" />
+import { FontSpec, TooltipItem } from 'chart.js';
+export interface ChartHeadingI {
+    heading: string;
+    color?: string;
+}
+export declare enum GRAPH_ORIENTATION {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
+export interface StackedBarDistributionGraphDataI {
+    label: string;
+    value: number;
+    stackLabel: string;
+}
+export interface StackedBarDistributionGraphI {
+    graphCanvasHeight?: number | string;
+    graphCanvasWidth?: string;
+    tickColor?: string;
+    labelColor?: string;
+    chartHeading?: ChartHeadingI;
+    data: StackedBarDistributionGraphDataI[];
+    outerPadding?: string;
+    onBarClick?: (xAxisLabel: string, yAxisLabel: string) => void;
+    labelTitle?: ChartHeadingI;
+    valueTitle?: ChartHeadingI;
+    orientation?: GRAPH_ORIENTATION;
+    barThickness?: number;
+    valuesStepSize?: number;
+    minValue?: number;
+    maxValue?: number;
+    chartWrapperHeight?: string;
+    showLegend?: boolean;
+    isFunnel?: boolean;
+    colorMatrix?: string[][];
+    wrapperStyle?: React.CSSProperties;
+    showTotal?: boolean;
+    skipSortingByLabels?: boolean;
+    tooltipConfig?: {
+        titleCallback?: (toolTipItems: TooltipItem<'bar'>[]) => string | string[];
+        labelCallback?: (toolTipItem: TooltipItem<'bar'>) => string | string[];
+        footerCallback?: (toolTipItems: TooltipItem<'bar'>[]) => string | string[];
+        footerStyles?: {
+            footerFont?: Partial<FontSpec>;
+        };
+    };
+    isInternationalStore?: boolean;
+}

package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.model.js

@@ -1 +1 @@
-var r=(r=>(r.VERTICAL="vertical",r.HORIZONTAL="horizontal",r))(r||{});export{r as GRAPH_ORIENTATION};
+var o;!function(o){o.VERTICAL="vertical",o.HORIZONTAL="horizontal"}(o||(o={}));export{o as GRAPH_ORIENTATION};

package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.d.ts

@@ -1,6 +1,3 @@
-import React__default from 'react';
-import { VerticalBarAndLinearGraphI } from './VerticalBarAndLinearGraphModel.js';
-
-declare const VerticalBarAndLinearGraph: React__default.FC<VerticalBarAndLinearGraphI>;
-
-export { VerticalBarAndLinearGraph };
+import React from 'react';
+import { VerticalBarAndLinearGraphI } from './VerticalBarAndLinearGraphModel';
+export declare const VerticalBarAndLinearGraph: React.FC<VerticalBarAndLinearGraphI>;

package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.js

@@ -1 +1 @@
-import{jsxs as i,jsx as t,Fragment as o}from"react/jsx-runtime";import{Chart as e,CategoryScale as r,LinearScale as a,BarElement as l,Tooltip as n}from"chart.js";import{Chart as s}from"react-chartjs-2";import{SmallRegular as c,TitleRegular as d}from"../../../TypographyStyle.js";import{FONTS as p,COLORS as x}from"../../../../constants/Theme.js";import{LegendWrapper as g,LegendContainer as b,LegendColor as h}from"../LineChart/LineChart.styled.js";import{GraphContainerWrapper as A}from"./VerticalBarAndLinearGraph.styles.js";e.register(r,a,l,n);const f=e=>{const r=[0,0,0,0,0,0],a=-1===e.barAxis.data.findIndex((i=>0!==i)),l=-1===e.lineAxis.data.findIndex((i=>0!==i)),n={min:0,max:2e3,stepSize:200},f=[{legend:e.barAxis.title,color:e.barAxis.graphColor},{legend:e.lineAxis.title,color:e.lineAxis.graphColor}],y={responsive:!0,plugins:{legend:{display:!1}},scales:{x:{title:{display:!!e.xAxis.title,text:e.xAxis.title,color:e.xAxis.titleColor,font:{size:p.caption.fontSize}},grid:{display:!1,borderColor:x.background.base},ticks:{fontSize:p.caption.fontSize,color:e.xAxis.labelColor??x.content.secondary}},bar:{position:"left",title:{display:!!e.barAxis.title,text:e.barAxis.title,color:e.barAxis.titleColor,font:{size:p.caption.fontSize}},grid:{borderColor:"white",color:x.background.base},ticks:{fontSize:p.caption.fontSize,color:e.barAxis.labelColor??x.content.secondary,...a?n:{}}},line:{position:"right",title:{display:!!e.lineAxis.title,text:e.lineAxis.title,color:e.lineAxis.titleColor,font:{size:p.caption.fontSize}},grid:{display:!1,borderColor:"white",color:x.background.base},ticks:{fontSize:p.caption.fontSize,color:e.lineAxis.labelColor??x.content.secondary,...l?n:{}},display:!0}},maintainAspectRatio:!1},m={labels:e.xAxis.forceShowXAxis?e.xAxis.data.map((i=>i.toString())):a&&l?["-","-","-","-","-","-"]:e.xAxis.data.map((i=>i.toString())),datasets:[{yAxisID:"line",type:"line",data:l?r:e.lineAxis.data,borderColor:e.lineAxis.graphColor||"rgba(0,0,0,0)",borderWidth:2,fill:!1,pointRadius:1},{yAxisID:"bar",type:"bar",data:a?r:e.barAxis.data,backgroundColor:e.barAxis.graphColor||"rgba(0,0,0,0)",barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return i("div",{style:{display:"flex",flexDirection:"column",gap:2},children:[t(g,{position:"center",children:f.map((({legend:e,color:r},a)=>e?i(b,{children:[t(h,{color:r}),t(c,{color:"#667085",children:e})]},a):t(o,{})))}),i(A,{children:[e.chartHeading&&t("div",{style:{marginBottom:24},children:t(d,{color:e.chartHeading.color??x.content.secondary,children:e.chartHeading.heading})}),t("div",{style:{height:e.graphCanvasHeight??500},children:t(s,{type:"bar",data:m,options:y})})]})]})};export{f as VerticalBarAndLinearGraph};
+import{jsxs as i,jsx as t,Fragment as e}from"react/jsx-runtime";import{Chart as o,CategoryScale as r,LinearScale as a,BarElement as l,Tooltip as n}from"chart.js";import{Chart as s}from"react-chartjs-2";import{SmallRegular as c,TitleRegular as d}from"../../../TypographyStyle.js";import{FONTS as p,COLORS as x}from"../../../../constants/Theme.js";import{LegendWrapper as g,LegendContainer as b,LegendColor as h}from"../LineChart/LineChart.styled.js";import{GraphContainerWrapper as A}from"./VerticalBarAndLinearGraph.styles.js";o.register(r,a,l,n);const f=o=>{var r,a,l,n,f;const y=[0,0,0,0,0,0],m=-1===o.barAxis.data.findIndex((i=>0!==i)),C=-1===o.lineAxis.data.findIndex((i=>0!==i)),u={min:0,max:2e3,stepSize:200},j=[{legend:o.barAxis.title,color:o.barAxis.graphColor},{legend:o.lineAxis.title,color:o.lineAxis.graphColor}],S={responsive:!0,plugins:{legend:{display:!1}},scales:{x:{title:{display:!!o.xAxis.title,text:o.xAxis.title,color:o.xAxis.titleColor,font:{size:p.caption.fontSize}},grid:{display:!1,borderColor:x.background.base},ticks:{fontSize:p.caption.fontSize,color:null!==(r=o.xAxis.labelColor)&&void 0!==r?r:x.content.secondary}},bar:{position:"left",title:{display:!!o.barAxis.title,text:o.barAxis.title,color:o.barAxis.titleColor,font:{size:p.caption.fontSize}},grid:{borderColor:"white",color:x.background.base},ticks:Object.assign({fontSize:p.caption.fontSize,color:null!==(a=o.barAxis.labelColor)&&void 0!==a?a:x.content.secondary},m?u:{})},line:{position:"right",title:{display:!!o.lineAxis.title,text:o.lineAxis.title,color:o.lineAxis.titleColor,font:{size:p.caption.fontSize}},grid:{display:!1,borderColor:"white",color:x.background.base},ticks:Object.assign({fontSize:p.caption.fontSize,color:null!==(l=o.lineAxis.labelColor)&&void 0!==l?l:x.content.secondary},C?u:{}),display:!0}},maintainAspectRatio:!1},z={labels:o.xAxis.forceShowXAxis?o.xAxis.data.map((i=>i.toString())):m&&C?["-","-","-","-","-","-"]:o.xAxis.data.map((i=>i.toString())),datasets:[{yAxisID:"line",type:"line",data:C?y:o.lineAxis.data,borderColor:o.lineAxis.graphColor||"rgba(0,0,0,0)",borderWidth:2,fill:!1,pointRadius:1},{yAxisID:"bar",type:"bar",data:m?y:o.barAxis.data,backgroundColor:o.barAxis.graphColor||"rgba(0,0,0,0)",barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return i("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:2}},{children:[t(g,Object.assign({position:"center"},{children:j.map(((o,r)=>{let{legend:a,color:l}=o;return a?i(b,{children:[t(h,{color:l}),t(c,Object.assign({color:"#667085"},{children:a}))]},r):t(e,{})}))})),i(A,{children:[o.chartHeading&&t("div",Object.assign({style:{marginBottom:24}},{children:t(d,Object.assign({color:null!==(n=o.chartHeading.color)&&void 0!==n?n:x.content.secondary},{children:o.chartHeading.heading}))})),t("div",Object.assign({style:{height:null!==(f=o.graphCanvasHeight)&&void 0!==f?f:500}},{children:t(s,{type:"bar",data:z,options:S})}))]})]}))};export{f as VerticalBarAndLinearGraph};

package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.styles.d.ts

@@ -0,0 +1 @@
+export declare const GraphContainerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraphModel.d.ts

@@ -1,24 +1,22 @@
-interface AxisDetailsI {
-    title?: string;
-    titleColor?: string;
-    data: number[] | string[];
-    labelColor?: string;
-    graphColor?: string;
-}
-interface ChartHeadingI {
-    heading: string;
-    color?: string;
-}
-interface VerticalBarAndLinearGraphI {
-    graphCanvasHeight?: number;
-    tickColor?: string;
-    labelColor?: string;
-    chartHeading?: ChartHeadingI;
-    xAxis: AxisDetailsI & {
-        forceShowXAxis?: boolean;
-    };
-    lineAxis: AxisDetailsI;
-    barAxis: AxisDetailsI;
-}
-
-export type { AxisDetailsI, ChartHeadingI, VerticalBarAndLinearGraphI };
+export interface AxisDetailsI {
+    title?: string;
+    titleColor?: string;
+    data: number[] | string[];
+    labelColor?: string;
+    graphColor?: string;
+}
+export interface ChartHeadingI {
+    heading: string;
+    color?: string;
+}
+export interface VerticalBarAndLinearGraphI {
+    graphCanvasHeight?: number;
+    tickColor?: string;
+    labelColor?: string;
+    chartHeading?: ChartHeadingI;
+    xAxis: AxisDetailsI & {
+        forceShowXAxis?: boolean;
+    };
+    lineAxis: AxisDetailsI;
+    barAxis: AxisDetailsI;
+}

package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/FunnelVerticalBarGraph.d.ts

@@ -1,18 +1,14 @@
-import React__default from 'react';
-
-interface FunnelBarChartI {
-    data?: {
-        label: string;
-        current: number;
-        previous?: number;
-        previousLabel?: string;
-    }[];
-    maintainAspectRatio?: boolean;
-    canvasHeight?: number;
-    barColors?: string[];
-    titleToolTipCallback?: (tooltipItems: any) => string;
-}
-declare const FunnelVerticalBarGraph: React__default.FC<FunnelBarChartI>;
-
-export { FunnelVerticalBarGraph };
-export type { FunnelBarChartI };
+import React from 'react';
+export interface FunnelBarChartI {
+    data?: {
+        label: string;
+        current: number;
+        previous?: number;
+        previousLabel?: string;
+    }[];
+    maintainAspectRatio?: boolean;
+    canvasHeight?: number;
+    barColors?: string[];
+    titleToolTipCallback?: (tooltipItems: any) => string;
+}
+export declare const FunnelVerticalBarGraph: React.FC<FunnelBarChartI>;

package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/FunnelVerticalBarGraph.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{Chart as a,CategoryScale as l,LinearScale as o,BarElement as i,Tooltip as n}from"chart.js";import{Bar as s}from"react-chartjs-2";import{SmallRegular as c}from"../../../TypographyStyle.js";import{LegendWrapper as d,LegendContainer as p,LegendColor as h}from"../LineChart/LineChart.styled.js";a.register(l,o,i,n);const m=["#DEEFFF","#FEDEF3","#FEC6C6","#DBAFFF","#FEDEBC"],b=({data:a=[],maintainAspectRatio:l=!1,canvasHeight:o=300,barColors:i=m,titleToolTipCallback:n})=>{0===a.length&&(a=[{label:"",current:0,previousLabel:""}]);const b=a.map((e=>e.label)),g=a.map((e=>e.current||0)),u=a.map((e=>e.previous?Math.max((e.previous||0)-e.current,0):0)),y=a.map((e=>e.previousLabel||"")),x=i,C=a.map((e=>({text:e.label,color:x[a.indexOf(e)]}))),f=[{label:"Current Value",data:g,backgroundColor:x.slice(0,a.length),borderColor:"white",borderWidth:1,stack:"combined"},{label:"Previous Value",data:u.map((e=>e||0)),backgroundColor:x.slice(0,a.length).map((e=>((e,t)=>{let r=0,a=0,l=0;return 4===e.length?(r=parseInt(e[1]+e[1],16),a=parseInt(e[2]+e[2],16),l=parseInt(e[3]+e[3],16)):7===e.length&&(r=parseInt(e[1]+e[2],16),a=parseInt(e[3]+e[4],16),l=parseInt(e[5]+e[6],16)),`rgba(${r}, ${a}, ${l}, ${t})`})(e,.3))),borderColor:"white",borderWidth:1,stack:"combined"}],k={labels:b,datasets:f},v={maintainAspectRatio:l,responsive:!0,scales:{x:{stacked:!0,grid:{display:!1},ticks:{display:a.length>0}},y:{stacked:!0,barPercentage:.6,categoryPercentage:.7,ticks:{display:a.length>0},grid:{drawBorder:a.length>0}}},plugins:{legend:{display:!1},tooltip:{callbacks:{title:n||(e=>{const t=e[0].datasetIndex,r=e[0].dataIndex;if(1===t){return`${y[r]} but not ${b[r]}`}return e[0].label}),label:e=>` ${e.raw}`}}}};return e("div",{style:{height:l?void 0:o,display:"flex",flexDirection:"column",gap:5,width:"100%"},children:[t(d,{children:C.map((({text:a,color:l},o)=>a?e(p,{children:[t(h,{color:l,newStyle:!0}),t(c,{color:"#667085",children:a})]},o):t(r,{})))}),t("div",{style:{flex:1},children:t(s,{data:k,options:v})})]})};export{b as FunnelVerticalBarGraph};
+import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{Chart as a,CategoryScale as l,LinearScale as i,BarElement as o,Tooltip as n}from"chart.js";import{Bar as s}from"react-chartjs-2";import{SmallRegular as c}from"../../../TypographyStyle.js";import{LegendWrapper as d,LegendContainer as p,LegendColor as b}from"../LineChart/LineChart.styled.js";a.register(l,i,o,n);const h=["#DEEFFF","#FEDEF3","#FEC6C6","#DBAFFF","#FEDEBC"],g=a=>{let{data:l=[],maintainAspectRatio:i=!1,canvasHeight:o=300,barColors:n=h,titleToolTipCallback:g}=a;0===l.length&&(l=[{label:"",current:0,previousLabel:""}]);const m=l.map((e=>e.label)),u=l.map((e=>e.current||0)),y=l.map((e=>e.previous?Math.max((e.previous||0)-e.current,0):0)),x=l.map((e=>e.previousLabel||"")),C=n,f=l.map((e=>({text:e.label,color:C[l.indexOf(e)]}))),k=[{label:"Current Value",data:u,backgroundColor:C.slice(0,l.length),borderColor:"white",borderWidth:1,stack:"combined"},{label:"Previous Value",data:y.map((e=>e||0)),backgroundColor:C.slice(0,l.length).map((e=>((e,t)=>{let r=0,a=0,l=0;return 4===e.length?(r=parseInt(e[1]+e[1],16),a=parseInt(e[2]+e[2],16),l=parseInt(e[3]+e[3],16)):7===e.length&&(r=parseInt(e[1]+e[2],16),a=parseInt(e[3]+e[4],16),l=parseInt(e[5]+e[6],16)),`rgba(${r}, ${a}, ${l}, ${t})`})(e,.3))),borderColor:"white",borderWidth:1,stack:"combined"}],v={labels:m,datasets:k},F={maintainAspectRatio:i,responsive:!0,scales:{x:{stacked:!0,grid:{display:!1},ticks:{display:l.length>0}},y:{stacked:!0,barPercentage:.6,categoryPercentage:.7,ticks:{display:l.length>0},grid:{drawBorder:l.length>0}}},plugins:{legend:{display:!1},tooltip:{callbacks:{title:g||(e=>{const t=e[0].datasetIndex,r=e[0].dataIndex;if(1===t){return`${x[r]} but not ${m[r]}`}return e[0].label}),label:e=>` ${e.raw}`}}}};return e("div",Object.assign({style:{height:i?void 0:o,display:"flex",flexDirection:"column",gap:5,width:"100%"}},{children:[t(d,{children:f.map(((a,l)=>{let{text:i,color:o}=a;return i?e(p,{children:[t(b,{color:o,newStyle:!0}),t(c,Object.assign({color:"#667085"},{children:i}))]},l):t(r,{})}))}),t("div",Object.assign({style:{flex:1}},{children:t(s,{data:v,options:F})}))]}))};export{g as FunnelVerticalBarGraph};

package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.d.ts

@@ -1,49 +1,3 @@
-interface AxisDetailsI {
-	title?: string;
-	titleColor?: string;
-	data: (string | number)[];
-	labelColor?: string;
-	ticksCallback?: (value: string) => string;
-	toolTipCallback?: (value: string) => string;
-}
-
-interface RGBColorI {
-	r: number;
-	g: number;
-	b: number;
-	a?: number;
-}
-
-interface ChartHeadingI {
-	heading: string;
-	color?: string;
-}
-
-interface VerticalGraphI {
-	graphCanvasHeight?: number;
-	tickColor?: string;
-	labelColor?: string;
-	chartHeading?: ChartHeadingI;
-	xAxis: AxisDetailsI;
-	yAxis: AxisDetailsI;
-	barColorRGBA: RGBColorI;
-	isFunnel?: boolean;
-	outerPadding?: string;
-	allowChartPopup?: boolean;
-	showConvertToPieChart?: boolean;
-	pieChartSize?: number;
-	popupData?: {
-		xAxis: AxisDetailsI;
-		yAxis: AxisDetailsI;
-		barColorRGBA: RGBColorI;
-		chartHeading?: string;
-		headerLeftCustomElement?: React.ReactNode;
-	};
-	currencyProps?: {
-		symbol?: string;
-		isInternationalStore?: boolean;
-	};
-	showTotal?: boolean;
-}
-
-export type { AxisDetailsI, ChartHeadingI, RGBColorI, VerticalGraphI };
+import React from 'react';
+import { VerticalGraphI } from './VerticalGraph.d';
+export declare const VerticalGraph: React.FC<VerticalGraphI>;

package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.js

@@ -1 +1 @@
-import{jsxs as t,jsx as a}from"react/jsx-runtime";import o from"../../../../assets/icons/ChartBar.svg.js";import e from"../../../../assets/icons/ChartPie.svg.js";import i from"../../../../assets/icons/maximize.svg.js";import{Chart as r,CategoryScale as l,LinearScale as s,BarElement as n,Tooltip as c}from"chart.js";import p from"chartjs-plugin-datalabels";import d,{useState as g,useEffect as h,Suspense as x}from"react";import{Bar as y}from"react-chartjs-2";import{IconButton as u}from"../../../icon-button/IconButton.js";import{StyledModal as b}from"../../../modals/styledModal.js";import{TitleMedium as m}from"../../../TypographyStyle.js";import{COLORS as f,FONTS as C}from"../../../../constants/Theme.js";import{GraphContainerWrapper as A}from"./VerticalGraph.styles.js";r.register(l,s,n,c,p);const k=d.lazy((()=>import("../Pie/PieChartAnalytics.js").then((t=>({default:t.PieChartAnalytics}))))),z=r=>{const[l,s]=g(!1),[n,c]=g(!1),[p,d]=g();h((()=>{const t=[];n&&(r.popupData?.xAxis.data.forEach(((a,o)=>{t.push({name:a.toString(),count:Number(r.popupData?.yAxis.data[o])||0})})),d(t))}),[n,r.popupData?.xAxis.data,r.popupData?.yAxis.data]);const z=[250,1e3,800,1500,300,600],$=-1===r.yAxis.data.findIndex((t=>0!==t)),D=-1===r.popupData?.yAxis.data.findIndex((t=>0!==t)),S={min:0,max:2e3,stepSize:200},v={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!$,callbacks:{label:r.yAxis.toolTipCallback}},datalabels:{display:r.showTotal??!1,anchor:"end",align:"end",clamp:!0,color:f.content.secondary}},scales:{x:{title:{display:!!r.xAxis.title,text:r.xAxis.title,color:r.xAxis.titleColor,font:{size:C.caption.fontSize}},grid:{display:!1,borderColor:f.background.base},ticks:{fontSize:C.caption.fontSize,color:r.yAxis.labelColor??f.content.secondary}},y:{title:{display:!!r.yAxis.title,text:r.yAxis.title,color:r.yAxis.titleColor,font:{size:C.caption.fontSize}},grid:{borderColor:"white",color:f.background.base},ticks:{callback:r.yAxis.ticksCallback,fontSize:C.caption.fontSize,color:r.xAxis.labelColor??f.content.secondary,...$?S:{}}}},maintainAspectRatio:!1},j={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!D,callbacks:{label:r.yAxis.toolTipCallback}},datalabels:{display:r.showTotal??!1,anchor:"end",align:"end",clamp:!0,color:f.content.secondary}},scales:{x:{title:{display:!!r.popupData?.xAxis.title,text:r.popupData?.xAxis.title,color:r.popupData?.xAxis.titleColor,font:{size:C.caption.fontSize}},grid:{display:!1,borderColor:f.background.base},ticks:{fontSize:C.caption.fontSize,color:r.popupData?.yAxis.labelColor??f.content.secondary}},y:{title:{display:!!r.popupData?.yAxis.title,text:r.popupData?.yAxis.title,color:r.popupData?.yAxis.titleColor,font:{size:C.caption.fontSize}},grid:{borderColor:"white",color:f.background.base},ticks:{callback:r.popupData?.yAxis.ticksCallback,fontSize:C.caption.fontSize,color:r.popupData?.xAxis.labelColor??f.content.secondary,...D?S:{}}}},maintainAspectRatio:!1},P={labels:r.xAxis.data.map((t=>t.toString())),datasets:[{data:$?z:r.yAxis.data,backgroundColor:t=>{const a=r.barColorRGBA;let o=[];const e=r.xAxis.data.length;if($)return"rgba(0,0,0,0)";if(r.isFunnel){let t=+(e>10?.1:(1/e).toFixed(2));const i=`rgba(${a.r}, ${a.g}, ${a.b}`;for(let a=1;a<e+1;a++){let e="";a>10?e=`${i},1)`:(e=`${i},${t})`,t+=.1),o.push(e)}}else{const t=`rgba(${a.r}, ${a.g}, ${a.b}, ${a.a??"1"})`;o=Array(e).fill(t)}return o},barPercentage:.4,categoryPercentage:1,borderRadius:4}]},T={labels:r.popupData?.xAxis.data.map((t=>t.toString())),datasets:[{data:D?z:r.popupData?.yAxis.data,backgroundColor:t=>{const a=r.barColorRGBA;let o=[];const e=r.popupData?.xAxis.data.length||0;if($)return"rgba(0,0,0,0)";if(r.isFunnel){let t=+(e>10?.1:(1/e).toFixed(2));const i=`rgba(${a.r}, ${a.g}, ${a.b}`;for(let a=1;a<e+1;a++){let e="";a>10?e=`${i},1)`:(e=`${i},${t})`,t+=.1),o.push(e)}}else{const t=`rgba(${a.r}, ${a.g}, ${a.b}, ${a.a??"1"})`;o=Array(e).fill(t)}return o},barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return t(A,{padding:r.outerPadding,children:[r.chartHeading&&a("div",{style:{marginBottom:24},children:a(m,{color:r.chartHeading.color??f.content.secondary,children:r.chartHeading.heading})}),t("div",{style:{display:"flex",justifyContent:"flex-end"},children:[r.showConvertToPieChart&&a(u,{Icon:e,onClick:()=>{c(!0),s(!0)}}),r.allowChartPopup&&a(u,{Icon:i,onClick:()=>{s(!0)}})]}),a("div",{style:{height:r.graphCanvasHeight??500},children:a(y,{options:v,data:P})}),l&&t(b,{open:l,onClose:()=>{s(!1),c(!1)},closeOnOutsideClick:!0,headingTitle:r.popupData?.chartHeading,width:"75%",headerRightCustomElement:r.showConvertToPieChart?a(u,n?{Icon:o,onClick:()=>{c(!1)}}:{Icon:e,onClick:()=>{c(!0)}}):null,headerLeftCustomElement:r.popupData?.headerLeftCustomElement,children:[n&&p&&a("div",{style:{height:r.graphCanvasHeight??500,padding:"24px"},children:a(x,{fallback:a("div",{children:"Loading..."}),children:a(k,{slices:p,size:r.pieChartSize,hideTitle:!0,currencyProps:r.currencyProps})})}),!n&&a("div",{style:{height:r.graphCanvasHeight??500},children:a(y,{options:j,data:T})})]})]})};export{z as VerticalGraph};
+import{jsxs as o,jsx as t}from"react/jsx-runtime";import i from"../../../../assets/icons/ChartBar.svg.js";import a from"../../../../assets/icons/ChartPie.svg.js";import l from"../../../../assets/icons/maximize.svg.js";import{Chart as e,CategoryScale as n,LinearScale as s,BarElement as r,Tooltip as d}from"chart.js";import c from"chartjs-plugin-datalabels";import p,{useState as u,useEffect as g,Suspense as v}from"react";import{Bar as b}from"react-chartjs-2";import{IconButton as h}from"../../../icon-button/IconButton.js";import{StyledModal as x}from"../../../modals/styledModal.js";import{TitleMedium as y}from"../../../TypographyStyle.js";import{COLORS as m,FONTS as f}from"../../../../constants/Theme.js";import{GraphContainerWrapper as C}from"./VerticalGraph.styles.js";e.register(n,s,r,d,c);const A=p.lazy((()=>import("../Pie/PieChartAnalytics.js").then((o=>({default:o.PieChartAnalytics}))))),k=e=>{var n,s,r,d,c,p,k,j,z,$,D,S,P,O,T,w,H,I,R,B,E,F,G,L,M,N;const[V,q]=u(!1),[J,K]=u(!1),[Q,U]=u();g((()=>{var o;const t=[];J&&(null===(o=e.popupData)||void 0===o||o.xAxis.data.forEach(((o,i)=>{var a;t.push({name:o.toString(),count:Number(null===(a=e.popupData)||void 0===a?void 0:a.yAxis.data[i])||0})})),U(t))}),[J,null===(n=e.popupData)||void 0===n?void 0:n.xAxis.data,null===(s=e.popupData)||void 0===s?void 0:s.yAxis.data]);const W=[250,1e3,800,1500,300,600],X=-1===e.yAxis.data.findIndex((o=>0!==o)),Y=-1===(null===(r=e.popupData)||void 0===r?void 0:r.yAxis.data.findIndex((o=>0!==o))),Z={min:0,max:2e3,stepSize:200},_={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!X,callbacks:{label:e.yAxis.toolTipCallback}},datalabels:{display:null!==(d=e.showTotal)&&void 0!==d&&d,anchor:"end",align:"end",clamp:!0,color:m.content.secondary}},scales:{x:{title:{display:!!e.xAxis.title,text:e.xAxis.title,color:e.xAxis.titleColor,font:{size:f.caption.fontSize}},grid:{display:!1,borderColor:m.background.base},ticks:{fontSize:f.caption.fontSize,color:null!==(c=e.yAxis.labelColor)&&void 0!==c?c:m.content.secondary}},y:{title:{display:!!e.yAxis.title,text:e.yAxis.title,color:e.yAxis.titleColor,font:{size:f.caption.fontSize}},grid:{borderColor:"white",color:m.background.base},ticks:Object.assign({callback:e.yAxis.ticksCallback,fontSize:f.caption.fontSize,color:null!==(p=e.xAxis.labelColor)&&void 0!==p?p:m.content.secondary},X?Z:{})}},maintainAspectRatio:!1},oo={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!Y,callbacks:{label:e.yAxis.toolTipCallback}},datalabels:{display:null!==(k=e.showTotal)&&void 0!==k&&k,anchor:"end",align:"end",clamp:!0,color:m.content.secondary}},scales:{x:{title:{display:!!(null===(j=e.popupData)||void 0===j?void 0:j.xAxis.title),text:null===(z=e.popupData)||void 0===z?void 0:z.xAxis.title,color:null===($=e.popupData)||void 0===$?void 0:$.xAxis.titleColor,font:{size:f.caption.fontSize}},grid:{display:!1,borderColor:m.background.base},ticks:{fontSize:f.caption.fontSize,color:null!==(S=null===(D=e.popupData)||void 0===D?void 0:D.yAxis.labelColor)&&void 0!==S?S:m.content.secondary}},y:{title:{display:!!(null===(P=e.popupData)||void 0===P?void 0:P.yAxis.title),text:null===(O=e.popupData)||void 0===O?void 0:O.yAxis.title,color:null===(T=e.popupData)||void 0===T?void 0:T.yAxis.titleColor,font:{size:f.caption.fontSize}},grid:{borderColor:"white",color:m.background.base},ticks:Object.assign({callback:null===(w=e.popupData)||void 0===w?void 0:w.yAxis.ticksCallback,fontSize:f.caption.fontSize,color:null!==(I=null===(H=e.popupData)||void 0===H?void 0:H.xAxis.labelColor)&&void 0!==I?I:m.content.secondary},Y?Z:{})}},maintainAspectRatio:!1},to={labels:e.xAxis.data.map((o=>o.toString())),datasets:[{data:X?W:e.yAxis.data,backgroundColor:o=>{var t;const i=e.barColorRGBA;let a=[];const l=e.xAxis.data.length;if(X)return"rgba(0,0,0,0)";if(e.isFunnel){let o=+(l>10?.1:(1/l).toFixed(2));const t=`rgba(${i.r}, ${i.g}, ${i.b}`;for(let i=1;i<l+1;i++){let l="";i>10?l=`${t},1)`:(l=`${t},${o})`,o+=.1),a.push(l)}}else{const o=`rgba(${i.r}, ${i.g}, ${i.b}, ${null!==(t=i.a)&&void 0!==t?t:"1"})`;a=Array(l).fill(o)}return a},barPercentage:.4,categoryPercentage:1,borderRadius:4}]},io={labels:null===(R=e.popupData)||void 0===R?void 0:R.xAxis.data.map((o=>o.toString())),datasets:[{data:Y?W:null===(B=e.popupData)||void 0===B?void 0:B.yAxis.data,backgroundColor:o=>{var t,i;const a=e.barColorRGBA;let l=[];const n=(null===(t=e.popupData)||void 0===t?void 0:t.xAxis.data.length)||0;if(X)return"rgba(0,0,0,0)";if(e.isFunnel){let o=+(n>10?.1:(1/n).toFixed(2));const t=`rgba(${a.r}, ${a.g}, ${a.b}`;for(let i=1;i<n+1;i++){let a="";i>10?a=`${t},1)`:(a=`${t},${o})`,o+=.1),l.push(a)}}else{const o=`rgba(${a.r}, ${a.g}, ${a.b}, ${null!==(i=a.a)&&void 0!==i?i:"1"})`;l=Array(n).fill(o)}return l},barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return o(C,Object.assign({padding:e.outerPadding},{children:[e.chartHeading&&t("div",Object.assign({style:{marginBottom:24}},{children:t(y,Object.assign({color:null!==(E=e.chartHeading.color)&&void 0!==E?E:m.content.secondary},{children:e.chartHeading.heading}))})),o("div",Object.assign({style:{display:"flex",justifyContent:"flex-end"}},{children:[e.showConvertToPieChart&&t(h,{Icon:a,onClick:()=>{K(!0),q(!0)}}),e.allowChartPopup&&t(h,{Icon:l,onClick:()=>{q(!0)}})]})),t("div",Object.assign({style:{height:null!==(F=e.graphCanvasHeight)&&void 0!==F?F:500}},{children:t(b,{options:_,data:to})})),V&&o(x,Object.assign({open:V,onClose:()=>{q(!1),K(!1)},closeOnOutsideClick:!0,headingTitle:null===(G=e.popupData)||void 0===G?void 0:G.chartHeading,width:"75%",headerRightCustomElement:e.showConvertToPieChart?t(h,J?{Icon:i,onClick:()=>{K(!1)}}:{Icon:a,onClick:()=>{K(!0)}}):null,headerLeftCustomElement:null===(L=e.popupData)||void 0===L?void 0:L.headerLeftCustomElement},{children:[J&&Q&&t("div",Object.assign({style:{height:null!==(M=e.graphCanvasHeight)&&void 0!==M?M:500,padding:"24px"}},{children:t(v,Object.assign({fallback:t("div",{children:"Loading..."})},{children:t(A,{slices:Q,size:e.pieChartSize,hideTitle:!0,currencyProps:e.currencyProps})}))})),!J&&t("div",Object.assign({style:{height:null!==(N=e.graphCanvasHeight)&&void 0!==N?N:500}},{children:t(b,{options:oo,data:io})}))]}))]}))};export{k as VerticalGraph};

package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const GraphContainerWrapper: import("styled-components").StyledComponent<"div", any, {
+    padding?: string | undefined;
+}, never>;

package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.styles.js

@@ -1,4 +1,4 @@
-import o from"styled-components";import{COLORS as d}from"../../../../constants/Theme.js";const n=o.div`
-	background-color: ${d.surface.standard};
-	padding: ${o=>o.padding??"24px"};
+import o from"styled-components";import{COLORS as r}from"../../../../constants/Theme.js";const n=o.div`
+	background-color: ${r.surface.standard};
+	padding: ${o=>{var r;return null!==(r=o.padding)&&void 0!==r?r:"24px"}};
 `;export{n as GraphContainerWrapper};

package/dist/esm/components/analytics-chips-and-dropdowns/chart/heatmap/HeatMap.d.ts

@@ -1,35 +1,31 @@
-import React__default, { ReactNode } from 'react';
-
-declare enum HEAT_GRADING_TYPE {
-    ABSOLUTE = 0,
-    RELATIVE = 1
-}
-interface HeatMapInputInterface {
-    title: string;
-    xLabels: string[];
-    yLabels: string[];
-    values: number[][];
-    heatType: HEAT_GRADING_TYPE;
-    absolutHeatValues?: number[];
-    hideXLabels?: boolean;
-    customComponent?: ReactNode;
-    heatBoxWidth?: number;
-    heatBoxHeight?: number;
-    isLooseFit?: boolean;
-}
-declare enum HEAT {
-    LOW = 0,
-    MEDIUM = 1,
-    HIGH = 2,
-    HIGHEST = 3
-}
-declare const HEAT_COLORS: {
-    0: string;
-    1: string;
-    2: string;
-    3: string;
-};
-declare const HeatMap: React__default.FC<HeatMapInputInterface>;
-
-export { HEAT, HEAT_COLORS, HEAT_GRADING_TYPE, HeatMap };
-export type { HeatMapInputInterface };
+import React, { ReactNode } from 'react';
+export declare enum HEAT_GRADING_TYPE {
+    ABSOLUTE = 0,
+    RELATIVE = 1
+}
+export interface HeatMapInputInterface {
+    title: string;
+    xLabels: string[];
+    yLabels: string[];
+    values: number[][];
+    heatType: HEAT_GRADING_TYPE;
+    absolutHeatValues?: number[];
+    hideXLabels?: boolean;
+    customComponent?: ReactNode;
+    heatBoxWidth?: number;
+    heatBoxHeight?: number;
+    isLooseFit?: boolean;
+}
+export declare enum HEAT {
+    LOW = 0,
+    MEDIUM = 1,
+    HIGH = 2,
+    HIGHEST = 3
+}
+export declare const HEAT_COLORS: {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+};
+export declare const HeatMap: React.FC<HeatMapInputInterface>;

package/dist/esm/components/analytics-chips-and-dropdowns/chart/heatmap/HeatMap.js

@@ -1 +1 @@
-import{jsx as t,Fragment as e,jsxs as o}from"react/jsx-runtime";import{useState as r,useEffect as l}from"react";import{Tooltip as i}from"../../../tooltips/Tooltip.js";import{TitleMedium as n,Caption as a,BodyTiny as c}from"../../../TypographyStyle.js";import{COLORS as h}from"../../../../constants/Theme.js";import{HeatBoxStyled as s,HeatBox as d}from"./HeatMapStyled.js";var m=(t=>(t[t.ABSOLUTE=0]="ABSOLUTE",t[t.RELATIVE=1]="RELATIVE",t))(m||{}),p=(t=>(t[t.LOW=0]="LOW",t[t.MEDIUM=1]="MEDIUM",t[t.HIGH=2]="HIGH",t[t.HIGHEST=3]="HIGHEST",t))(p||{});const y={0:"#EBDBFF",1:"#D2AEFF",2:"#9E77ED",3:"#5E07BB"},B=({title:m,xLabels:p,yLabels:B,values:x,heatType:H,absolutHeatValues:E,hideXLabels:L,customComponent:f,heatBoxWidth:g,heatBoxHeight:T,isLooseFit:u})=>{const[I,b]=r(),M=u?{display:"flex",justifyContent:"center",alignItems:"center"}:{};return l((()=>{const t=Math.max(...x.flat()),e=Math.min(...x.flat());b(x.map((o=>o.map((o=>((t,e,o,r,l)=>{if(0===e)return t<=o[0]?0:t<=o[1]?1:t<=o[2]?2:3;{const e=(l-r)/4;return t<=r+e?0:t<=r+2*e?1:t<=r+3*e?2:3}})(o,H,E||[],e,t))))))}),[x,E]),I?o(s,{isLooseFit:u,children:[o("div",{className:"top-container",children:[o("div",{className:"top-container__heading",children:[t(n,{style:{color:h.content.primary},children:m}),f]}),o("div",{className:"top-container__legend",children:[t(a,{style:{color:h.content.secondary},children:"Less"}),t(d,{heatBoxWidth:g,heatBoxHeight:T,color:y[0]}),t(d,{heatBoxWidth:g,heatBoxHeight:T,color:y[1]}),t(d,{heatBoxWidth:g,heatBoxHeight:T,color:y[2]}),t(d,{heatBoxWidth:g,heatBoxHeight:T,color:y[3]}),t(a,{style:{color:h.content.secondary},children:"More"})]})]}),t("table",{style:M,children:o("tbody",{children:[B.map(((e,r)=>o("tr",{children:[t("td",{children:t(c,{style:{color:h.content.placeholder},children:e})}),p.map(((e,o)=>t("td",{children:t(i,{body:x[r][o].toString(),placement:"bottom",children:t(d,{color:y[I[r][o]],heatBoxWidth:g,heatBoxHeight:T})})},e)))]},e))),!L&&o("tr",{children:[t("th",{}),p.map(((e,o)=>t("th",{children:t(c,{style:{color:h.content.placeholder},children:e})},e)))]})]})})]}):t(e,{})};export{p as HEAT,y as HEAT_COLORS,m as HEAT_GRADING_TYPE,B as HeatMap};
+import{jsx as t,Fragment as e,jsxs as o}from"react/jsx-runtime";import{useState as n,useEffect as i}from"react";import{Tooltip as a}from"../../../tooltips/Tooltip.js";import{TitleMedium as c,Caption as r,BodyTiny as s}from"../../../TypographyStyle.js";import{COLORS as l}from"../../../../constants/Theme.js";import{HeatBoxStyled as h,HeatBox as d}from"./HeatMapStyled.js";var H,m;!function(t){t[t.ABSOLUTE=0]="ABSOLUTE",t[t.RELATIVE=1]="RELATIVE"}(H||(H={})),function(t){t[t.LOW=0]="LOW",t[t.MEDIUM=1]="MEDIUM",t[t.HIGH=2]="HIGH",t[t.HIGHEST=3]="HIGHEST"}(m||(m={}));const p={[m.LOW]:"#EBDBFF",[m.MEDIUM]:"#D2AEFF",[m.HIGH]:"#9E77ED",[m.HIGHEST]:"#5E07BB"},E=E=>{let{title:g,xLabels:I,yLabels:O,values:b,heatType:y,absolutHeatValues:B,hideXLabels:j,customComponent:x,heatBoxWidth:L,heatBoxHeight:M,isLooseFit:T}=E;const[f,G]=n(),S=T?{display:"flex",justifyContent:"center",alignItems:"center"}:{};return i((()=>{const t=Math.max(...b.flat()),e=Math.min(...b.flat());G(b.map((o=>o.map((o=>((t,e,o,n,i)=>{if(e===H.ABSOLUTE)return t<=o[0]?m.LOW:t<=o[1]?m.MEDIUM:t<=o[2]?m.HIGH:m.HIGHEST;{const e=(i-n)/4;return t<=n+e?m.LOW:t<=n+2*e?m.MEDIUM:t<=n+3*e?m.HIGH:m.HIGHEST}})(o,y,B||[],e,t))))))}),[b,B]),f?o(h,Object.assign({isLooseFit:T},{children:[o("div",Object.assign({className:"top-container"},{children:[o("div",Object.assign({className:"top-container__heading"},{children:[t(c,Object.assign({style:{color:l.content.primary}},{children:g})),x]})),o("div",Object.assign({className:"top-container__legend"},{children:[t(r,Object.assign({style:{color:l.content.secondary}},{children:"Less"})),t(d,{heatBoxWidth:L,heatBoxHeight:M,color:p[m.LOW]}),t(d,{heatBoxWidth:L,heatBoxHeight:M,color:p[m.MEDIUM]}),t(d,{heatBoxWidth:L,heatBoxHeight:M,color:p[m.HIGH]}),t(d,{heatBoxWidth:L,heatBoxHeight:M,color:p[m.HIGHEST]}),t(r,Object.assign({style:{color:l.content.secondary}},{children:"More"}))]}))]})),t("table",Object.assign({style:S},{children:o("tbody",{children:[O.map(((e,n)=>o("tr",{children:[t("td",{children:t(s,Object.assign({style:{color:l.content.placeholder}},{children:e}))}),I.map(((e,o)=>t("td",{children:t(a,Object.assign({body:b[n][o].toString(),placement:"bottom"},{children:t(d,{color:p[f[n][o]],heatBoxWidth:L,heatBoxHeight:M})}))},e)))]},e))),!j&&o("tr",{children:[t("th",{}),I.map(((e,o)=>t("th",{children:t(s,Object.assign({style:{color:l.content.placeholder}},{children:e}))},e)))]})]})}))]})):t(e,{})};export{m as HEAT,p as HEAT_COLORS,H as HEAT_GRADING_TYPE,E as HeatMap};

package/dist/esm/components/analytics-chips-and-dropdowns/chart/heatmap/HeatMapStyled.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const HeatBoxStyled: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    isLooseFit?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const HeatBox: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    heatBoxHeight?: number | undefined;
+    heatBoxWidth?: number | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/analytics-chips-and-dropdowns/chart/heatmap/HeatMapStyled.js

@@ -1,38 +1 @@
-import e from"@emotion/styled";const t=e.div`
-	width: ${e=>e.isLooseFit?"100%":"fit-content"};
-	.top-container {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		margin-bottom: 16px;
-
-		&__heading {
-			display: flex;
-			flex-direction: row;
-			gap: 8px;
-			align-items: center;
-			justify-content: center;
-		}
-
-		&__legend {
-			display: flex;
-			flex-direction: row;
-			gap: 6px;
-			align-items: center;
-		}
-	}
-
-	.box {
-		width: 74px;
-		height: 14px;
-		border-radius: 2px;
-		margin: 2px;
-		background-color: ${e=>e.color};
-	}
-`,i=e.div`
-	width: ${e=>e.heatBoxWidth?e.heatBoxWidth:24}px;
-	height: ${e=>e.heatBoxHeight?e.heatBoxHeight:24}px;
-	border-radius: 2px;
-	margin: 2px;
-	background-color: ${e=>e.color};
-`;export{i as HeatBox,t as HeatBoxStyled};
+import c from"@emotion/styled/base";const d=c("div","production"===process.env.NODE_ENV?{target:"e1p0nfj71"}:{target:"e1p0nfj71",label:"HeatBoxStyled"})("width:",(c=>c.isLooseFit?"100%":"fit-content"),";.top-container{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:16px;&__heading{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;}&__legend{display:flex;flex-direction:row;gap:6px;align-items:center;}}.box{width:74px;height:14px;border-radius:2px;margin:2px;background-color:",(c=>c.color),";}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkhlYXRNYXBTdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUN3QyIsImZpbGUiOiJIZWF0TWFwU3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuZXhwb3J0IGNvbnN0IEhlYXRCb3hTdHlsZWQgPSBzdHlsZWQuZGl2IGBcblx0d2lkdGg6ICR7KHByb3BzKSA9PiAocHJvcHMuaXNMb29zZUZpdCA/ICcxMDAlJyA6ICdmaXQtY29udGVudCcpfTtcblx0LnRvcC1jb250YWluZXIge1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0ZmxleC1kaXJlY3Rpb246IHJvdztcblx0XHRqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG5cdFx0bWFyZ2luLWJvdHRvbTogMTZweDtcblxuXHRcdCZfX2hlYWRpbmcge1xuXHRcdFx0ZGlzcGxheTogZmxleDtcblx0XHRcdGZsZXgtZGlyZWN0aW9uOiByb3c7XG5cdFx0XHRnYXA6IDhweDtcblx0XHRcdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdFx0XHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblx0XHR9XG5cblx0XHQmX19sZWdlbmQge1xuXHRcdFx0ZGlzcGxheTogZmxleDtcblx0XHRcdGZsZXgtZGlyZWN0aW9uOiByb3c7XG5cdFx0XHRnYXA6IDZweDtcblx0XHRcdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdFx0fVxuXHR9XG5cblx0LmJveCB7XG5cdFx0d2lkdGg6IDc0cHg7XG5cdFx0aGVpZ2h0OiAxNHB4O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHRtYXJnaW46IDJweDtcblx0XHRiYWNrZ3JvdW5kLWNvbG9yOiAkeyhwcm9wcykgPT4gcHJvcHMuY29sb3J9O1xuXHR9XG5gO1xyXG5leHBvcnQgY29uc3QgSGVhdEJveCA9IHN0eWxlZC5kaXYgYFxuXHR3aWR0aDogJHsocHJvcHMpID0+IChwcm9wcy5oZWF0Qm94V2lkdGggPyBwcm9wcy5oZWF0Qm94V2lkdGggOiAyNCl9cHg7XG5cdGhlaWdodDogJHsocHJvcHMpID0+IChwcm9wcy5oZWF0Qm94SGVpZ2h0ID8gcHJvcHMuaGVhdEJveEhlaWdodCA6IDI0KX1weDtcblx0Ym9yZGVyLXJhZGl1czogMnB4O1xuXHRtYXJnaW46IDJweDtcblx0YmFja2dyb3VuZC1jb2xvcjogJHsocHJvcHMpID0+IHByb3BzLmNvbG9yfTtcbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPUhlYXRNYXBTdHlsZWQuanMubWFwIl19 */")),b=c("div","production"===process.env.NODE_ENV?{target:"e1p0nfj70"}:{target:"e1p0nfj70",label:"HeatBox"})("width:",(c=>c.heatBoxWidth?c.heatBoxWidth:24),"px;height:",(c=>c.heatBoxHeight?c.heatBoxHeight:24),"px;border-radius:2px;margin:2px;background-color:",(c=>c.color),";"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkhlYXRNYXBTdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlDa0MiLCJmaWxlIjoiSGVhdE1hcFN0eWxlZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XHJcbmV4cG9ydCBjb25zdCBIZWF0Qm94U3R5bGVkID0gc3R5bGVkLmRpdiBgXG5cdHdpZHRoOiAkeyhwcm9wcykgPT4gKHByb3BzLmlzTG9vc2VGaXQgPyAnMTAwJScgOiAnZml0LWNvbnRlbnQnKX07XG5cdC50b3AtY29udGFpbmVyIHtcblx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdGZsZXgtZGlyZWN0aW9uOiByb3c7XG5cdFx0anVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuXHRcdG1hcmdpbi1ib3R0b206IDE2cHg7XG5cblx0XHQmX19oZWFkaW5nIHtcblx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0XHRmbGV4LWRpcmVjdGlvbjogcm93O1xuXHRcdFx0Z2FwOiA4cHg7XG5cdFx0XHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRcdFx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdFx0fVxuXG5cdFx0Jl9fbGVnZW5kIHtcblx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0XHRmbGV4LWRpcmVjdGlvbjogcm93O1xuXHRcdFx0Z2FwOiA2cHg7XG5cdFx0XHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRcdH1cblx0fVxuXG5cdC5ib3gge1xuXHRcdHdpZHRoOiA3NHB4O1xuXHRcdGhlaWdodDogMTRweDtcblx0XHRib3JkZXItcmFkaXVzOiAycHg7XG5cdFx0bWFyZ2luOiAycHg7XG5cdFx0YmFja2dyb3VuZC1jb2xvcjogJHsocHJvcHMpID0+IHByb3BzLmNvbG9yfTtcblx0fVxuYDtcclxuZXhwb3J0IGNvbnN0IEhlYXRCb3ggPSBzdHlsZWQuZGl2IGBcblx0d2lkdGg6ICR7KHByb3BzKSA9PiAocHJvcHMuaGVhdEJveFdpZHRoID8gcHJvcHMuaGVhdEJveFdpZHRoIDogMjQpfXB4O1xuXHRoZWlnaHQ6ICR7KHByb3BzKSA9PiAocHJvcHMuaGVhdEJveEhlaWdodCA/IHByb3BzLmhlYXRCb3hIZWlnaHQgOiAyNCl9cHg7XG5cdGJvcmRlci1yYWRpdXM6IDJweDtcblx0bWFyZ2luOiAycHg7XG5cdGJhY2tncm91bmQtY29sb3I6ICR7KHByb3BzKSA9PiBwcm9wcy5jb2xvcn07XG5gO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1IZWF0TWFwU3R5bGVkLmpzLm1hcCJdfQ== */"));export{b as HeatBox,d as HeatBoxStyled};