@bikdotai/bik-component-library 0.0.739 → 0.0.740-beta.0

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

@@ -1 +1 @@
-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};
+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{useState as p,useEffect as u,Suspense as g}from"react";import{Bar as v}from"react-chartjs-2";import{IconButton as b}from"../../../icon-button/IconButton.js";import{StyledModal as x}from"../../../modals/styledModal.js";import{TitleMedium as h}from"../../../TypographyStyle.js";import{COLORS as y,FONTS as m}from"../../../../constants/Theme.js";import{GraphContainerWrapper as f}from"./VerticalGraph.styles.js";e.register(n,s,r,d,c);const C=e=>{var n,s,r,d,c,C,A,k,j,z,$,D,S,O,P,T,w,H,I,R,B,E,F,G,L,M;const{PieChartComponent:N}=e,[V,q]=p(!1),[J,K]=p(!1),[Q,U]=p();u((()=>{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:y.content.secondary}},scales:{x:{title:{display:!!e.xAxis.title,text:e.xAxis.title,color:e.xAxis.titleColor,font:{size:m.caption.fontSize}},grid:{display:!1,borderColor:y.background.base},ticks:{fontSize:m.caption.fontSize,color:null!==(c=e.yAxis.labelColor)&&void 0!==c?c:y.content.secondary}},y:{title:{display:!!e.yAxis.title,text:e.yAxis.title,color:e.yAxis.titleColor,font:{size:m.caption.fontSize}},grid:{borderColor:"white",color:y.background.base},ticks:Object.assign({callback:e.yAxis.ticksCallback,fontSize:m.caption.fontSize,color:null!==(C=e.xAxis.labelColor)&&void 0!==C?C:y.content.secondary},X?Z:{})}},maintainAspectRatio:!1},oo={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!Y,callbacks:{label:e.yAxis.toolTipCallback}},datalabels:{display:null!==(A=e.showTotal)&&void 0!==A&&A,anchor:"end",align:"end",clamp:!0,color:y.content.secondary}},scales:{x:{title:{display:!!(null===(k=e.popupData)||void 0===k?void 0:k.xAxis.title),text:null===(j=e.popupData)||void 0===j?void 0:j.xAxis.title,color:null===(z=e.popupData)||void 0===z?void 0:z.xAxis.titleColor,font:{size:m.caption.fontSize}},grid:{display:!1,borderColor:y.background.base},ticks:{fontSize:m.caption.fontSize,color:null!==(D=null===($=e.popupData)||void 0===$?void 0:$.yAxis.labelColor)&&void 0!==D?D:y.content.secondary}},y:{title:{display:!!(null===(S=e.popupData)||void 0===S?void 0:S.yAxis.title),text:null===(O=e.popupData)||void 0===O?void 0:O.yAxis.title,color:null===(P=e.popupData)||void 0===P?void 0:P.yAxis.titleColor,font:{size:m.caption.fontSize}},grid:{borderColor:"white",color:y.background.base},ticks:Object.assign({callback:null===(T=e.popupData)||void 0===T?void 0:T.yAxis.ticksCallback,fontSize:m.caption.fontSize,color:null!==(H=null===(w=e.popupData)||void 0===w?void 0:w.xAxis.labelColor)&&void 0!==H?H:y.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===(I=e.popupData)||void 0===I?void 0:I.xAxis.data.map((o=>o.toString())),datasets:[{data:Y?W:null===(R=e.popupData)||void 0===R?void 0:R.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(f,Object.assign({padding:e.outerPadding},{children:[e.chartHeading&&t("div",Object.assign({style:{marginBottom:24}},{children:t(h,Object.assign({color:null!==(B=e.chartHeading.color)&&void 0!==B?B:y.content.secondary},{children:e.chartHeading.heading}))})),o("div",Object.assign({style:{display:"flex",justifyContent:"flex-end"}},{children:[e.showConvertToPieChart&&t(b,{Icon:a,onClick:()=>{K(!0),q(!0)}}),e.allowChartPopup&&t(b,{Icon:l,onClick:()=>{q(!0)}})]})),t("div",Object.assign({style:{height:null!==(E=e.graphCanvasHeight)&&void 0!==E?E:500}},{children:t(v,{options:_,data:to})})),V&&o(x,Object.assign({open:V,onClose:()=>{q(!1),K(!1)},closeOnOutsideClick:!0,headingTitle:null===(F=e.popupData)||void 0===F?void 0:F.chartHeading,width:"75%",headerRightCustomElement:e.showConvertToPieChart?t(b,J?{Icon:i,onClick:()=>{K(!1)}}:{Icon:a,onClick:()=>{K(!0)}}):null,headerLeftCustomElement:null===(G=e.popupData)||void 0===G?void 0:G.headerLeftCustomElement},{children:[J&&Q&&N&&t("div",Object.assign({style:{height:null!==(L=e.graphCanvasHeight)&&void 0!==L?L:500,padding:"24px"}},{children:t(g,Object.assign({fallback:t("div",{children:"Loading..."})},{children:t(N,{slices:Q,size:e.pieChartSize,hideTitle:!0,currencyProps:e.currencyProps})}))})),!J&&t("div",Object.assign({style:{height:null!==(M=e.graphCanvasHeight)&&void 0!==M?M:500}},{children:t(v,{options:oo,data:io})}))]}))]}))};export{C as VerticalGraph};

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

@@ -1,40 +1,40 @@
 /// <reference types="react" />
 export declare const HeatBoxStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     heatBoxHeight?: number | undefined;
     heatBoxWidth?: number | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const HeatBoxLegend: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     color: string;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const LegendContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const LegendItem: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const LegendValue: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const LegendLabels: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const LegendCaption: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -10,5 +10,5 @@ export interface HeatMapVerticalInputInterface {
 export declare const HeatMapVertical: React.FC<HeatMapVerticalInputInterface>;
 export declare const HeatBoxStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    as?: React.ElementType<any> | undefined;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/analytics-chips-and-dropdowns/chart/linearChipGroupedChart/LinearChipGroupedChart.styled.d.ts

@@ -1,25 +1,25 @@
 /// <reference types="react" />
 export declare const Container: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     separator?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Row: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Column: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledChip: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     type: 'positive' | 'neutral' | 'negative';
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledBarContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/analytics-chips-and-dropdowns/chart/scoreBlock/ScoreBlock.styled.d.ts

@@ -1,25 +1,25 @@
 /// <reference types="react" />
 export declare const Container: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     separator?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Row: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Column: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledChip: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     type: 'positive' | 'neutral' | 'negative';
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledBarContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/banner/Banner.styled.d.ts

@@ -1,87 +1,87 @@
 /// <reference types="react" />
 export declare const CardBannerWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CardBannerContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CardBannerIconsWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CardBannerButtonWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CompanyImageWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ButtonWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ImageWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CardWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CardFooterWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CardImageWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const CardButtonWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const BannerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const MainContentWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TextWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TagWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BottomButtonWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BannerWithImageContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ContentWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BannerImageWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BannerWithImageButtonWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/dist/esm/components/bik-layout/BikSidebar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Menu } from './SimpleSidebar';
+import { Menu } from './Sidebar.model';
 export interface MenuItem {
     key: string | number;
     displayName: string;

package/dist/esm/components/bik-layout/CommonStyles.d.ts

@@ -1,43 +1,43 @@
 /// <reference types="react" />
 export declare const GlobalContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const LoaderWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const LoadingMessageWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BikLayoutContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     type?: "overflow-within" | "overflow-body" | undefined;
     backgroundColor?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BikHeaderWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BikHeaderContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const MenuInnerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ProfileDropdownToggleContainer: import("@emotion/styled").StyledComponent<import("react-bootstrap/esm/helpers").Omit<any, import("react-bootstrap/esm/helpers").BsPrefixProps<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>> & import("react-bootstrap/esm/DropdownToggle").DropdownToggleProps> & import("react-bootstrap/esm/helpers").BsPrefixProps<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>> & import("react-bootstrap/esm/DropdownToggle").DropdownToggleProps & {
+export declare const ProfileDropdownToggleContainer: import("@emotion/styled").StyledComponent<import("react-bootstrap/esm/helpers").Omit<any, import("react-bootstrap/esm/helpers").BsPrefixProps<import("react").ElementType<any>> & import("react-bootstrap/esm/DropdownToggle").DropdownToggleProps> & import("react-bootstrap/esm/helpers").BsPrefixProps<import("react").ElementType<any>> & import("react-bootstrap/esm/DropdownToggle").DropdownToggleProps & {
     children?: import("react").ReactNode;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const ProfileDropdownInnerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     isDropdownOpen: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -55,24 +55,24 @@ export declare const UserNameTitleSmall: import("@emotion/styled").StyledCompone
 }, {}, {}>;
 export declare const UserAvatarContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledTooltip: import("@emotion/styled").StyledComponent<import("react-bootstrap").TooltipProps & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const UserInfoContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StatusContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     isAvailable: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const UserStatusContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledBodyCaption: import("@emotion/styled").StyledComponent<{
     [x: string]: any;
@@ -90,7 +90,7 @@ export declare const StyledBodyCaption: import("@emotion/styled").StyledComponen
 }, {}, {}>;
 export declare const FeatureModalContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     zIndex?: number | undefined;
     resetHeight?: boolean | undefined;
@@ -98,13 +98,13 @@ export declare const FeatureModalContainer: import("@emotion/styled").StyledComp
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const InnerModalContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const RelativeModalContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const FeatureModalV2Container: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

package/dist/esm/components/bik-layout/Sidebar.model.d.ts

@@ -0,0 +1,27 @@
+export interface Menu {
+    key: string | number;
+    displayName: string;
+    description?: string;
+    path?: string;
+    page?: string;
+    isNew?: string;
+}
+export type SidebarTheme = 'brand' | 'white';
+export interface SimpleSidebarProps {
+    menuList: Menu[];
+    activeMenu: Menu;
+    theme: SidebarTheme;
+    showAccessUpgradePanel?: boolean;
+    header?: string;
+    width?: number;
+    zIndex?: number;
+    left?: number;
+    postion?: 'fixed' | 'sticky';
+    top?: number;
+    router: any;
+    onMouseLeaveOnMenu?: () => void;
+    onMouseEnterOnMenu?: () => void;
+    onMenuClick: (menuSelected: Menu, reDirect?: boolean) => void;
+    onUpgrade?: () => void;
+    isNewSidebar?: boolean;
+}

package/dist/esm/components/bik-layout/SidebarPopup.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Menu } from './SimpleSidebar';
+import { Menu } from './Sidebar.model';
 export interface SidebarPopupI {
     menuList: Menu[];
     width?: number;

package/dist/esm/components/bik-layout/SidebarSkeleton.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SidebarTheme } from './SimpleSidebar';
+import { SidebarTheme } from './Sidebar.model';
 export interface BikSidebarShimmerProps {
     theme: SidebarTheme;
     width?: number;

package/dist/esm/components/bik-layout/SidebarStyles.d.ts

@@ -1,4 +1,4 @@
-import { SidebarTheme } from './SimpleSidebar';
+import { SidebarTheme } from './Sidebar.model';
 export declare const SideBarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MainSideBarMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SibeBarMenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/bik-layout/SimpleSidebar.d.ts

@@ -1,29 +1,3 @@
 /// <reference types="react" />
-export interface Menu {
-    key: string | number;
-    displayName: string;
-    description?: string;
-    path?: string;
-    page?: string;
-    isNew?: string;
-}
-export type SidebarTheme = 'brand' | 'white';
-export interface SimpleSidebarProps {
-    menuList: Menu[];
-    activeMenu: Menu;
-    theme: SidebarTheme;
-    showAccessUpgradePanel?: boolean;
-    header?: string;
-    width?: number;
-    zIndex?: number;
-    left?: number;
-    postion?: 'fixed' | 'sticky';
-    top?: number;
-    router: any;
-    onMouseLeaveOnMenu?: () => void;
-    onMouseEnterOnMenu?: () => void;
-    onMenuClick: (menuSelected: Menu, reDirect?: boolean) => void;
-    onUpgrade?: () => void;
-    isNewSidebar?: boolean;
-}
+import { SimpleSidebarProps } from './Sidebar.model';
 export declare const SimpleSidebar: React.FC<SimpleSidebarProps>;

package/dist/esm/components/button/Button.styled.d.ts

@@ -2,7 +2,7 @@
 import { Size, Type } from './model';
 export declare const Button: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     size: Size;
     buttonType: Type;

package/dist/esm/components/card-selection-modal/CardSelectionModal.styled.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 export declare const StyledCardContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledCard: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/carousel-secondary/CarouselSecondary.style.d.ts

@@ -2,35 +2,35 @@
 import { CarouselVersion } from './model';
 export declare const CarouselContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     version?: CarouselVersion | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CarouselBody: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     textAlign: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CarouselPage: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     isActive: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CarouselFooter: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     version?: CarouselVersion | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const PageIndicator: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Indicator: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     isActive: boolean;
     version?: CarouselVersion | undefined;

package/dist/esm/components/checkList/CheckList.styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const CheckListStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/colourInput/ColourInput.styled.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 export declare const ColorInputContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledColorInput: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;

package/dist/esm/components/country-code-picker/CountryCodePicker.styled.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 export declare const StyledCountryPickerOption: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledCountryPickerWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     height?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/custom-date-time/CustomDateTime.styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const CustomDateTimeStyle: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;