@bikdotai/bik-component-library 0.0.763-beta.37 → 0.0.763-beta.39

package/dist/cjs/components/analytics-card/AnalyticsCard.styled.d.ts

@@ -2,7 +2,7 @@
 import { ModeType } from './AnalyticsCard';
 export declare const AnalyticsContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     width: string;
     mode?: ModeType | undefined;
@@ -10,7 +10,7 @@ export declare const AnalyticsContainer: import("@emotion/styled").StyledCompone
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CardDataContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     count: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("react"),t=require("react-bootstrap"),n=require("react-dom"),s=require("../../constants/Theme.js"),i=require("../datePicker/DatePicker.js");require("react-calendar"),require("../../utils/DateUtils.js");var r=require("../TypographyStyle.js");require("../datePicker/DatePickerWrapper.styled.js"),require("../datePicker/model.js"),require("../dropdown/DropdownPopover/index.js"),require("../dropdown/Dropdown.js"),require("../dropdown/ChipDropdown.js"),require("../zeroState/ZeroState.js"),require("../dropdown/OpenedDropdown/components/description/Description.styled.js"),require("../checkBox/CheckBox.styled.js"),require("../list-item/ListItem.js"),require("../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js"),require("../dropdown/OpenedDropdown/components/menu/MenuItem.js"),require("../dropdown/OpenedDropdown/components/menu/MenuList.styled.js"),require("../button/Button.js"),require("../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js"),require("../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js"),require("../icon-button/IconButton.js"),require("../input/Input.js"),require("../dropdown/MenuItem/MenuItem.js"),require("../datePicker/DatePicker.styled.js");var d=require("./CommonStyles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=l(n);const c=o=>{let{eachOption:t,selectedOption:n,selectedDate:i,onClickingEachItem:l,rangeSelection:a,isLastItem:c,isFirstItem:p,showTimePicker:m}=o;return e.jsxs(d.ItemMenuContainer,Object.assign({isFirstItem:p,isLastItem:c,onClick:()=>l(t),isSelected:t.isCustom?t.key==(null==n?void 0:n.key)&&!!i:t.key==(null==n?void 0:n.key)},{children:[e.jsx(r.BodySecondary,Object.assign({color:t.key==(null==n?void 0:n.key)?s.BASE_COLORS.positive[900]:s.BASE_COLORS.grayscale[900]},{children:t.label})),t.subLabel?e.jsx(r.BodyCaption,Object.assign({style:{color:s.BASE_COLORS.grayscale[700]}},{children:t.subLabel})):e.jsx(e.Fragment,{}),i&&(null==n?void 0:n.isCustom)&&t.key==(null==n?void 0:n.key)&&e.jsx(r.BodyCaption,Object.assign({style:{whiteSpace:"normal",wordBreak:"break-word",textAlign:"left"}},{children:a?`${u(i[0],m)} to ${u(i[1],m)}`:`${u(i[0],m)}`}))]}),t.key)},u=(e,o)=>{const t=e.toLocaleString("default",{day:"numeric",month:"short",year:"numeric"});if(o){return`${t} (${e.toLocaleString("default",{hour:"numeric",minute:"2-digit",hour12:!0})})`}return t};exports.AnalyticsDropdown=n=>{let{options:l,placeholder:p="Select an option",selected:m,onOptionSelected:g,resetDropdown:j,maxHeight:v,backgroundcolor:w,calendarPopperConfig:O,variant:y="default",datePickerPlacement:D,closeDropdown:h,labelColor:b,styleProps:S,showTimePicker:f=!1}=n;var k,x,q;const[C,R]=o.useState(!1),[I,P]=o.useState(m),[E,L]=o.useState(),[T,B]=o.useState(!1),[M,F]=o.useState(m),A=o.useRef(null),$="small"===y?r.Caption:r.BodySecondary;o.useEffect((()=>{j&&P(void 0)}),[j]),o.useEffect((()=>{var e;(null==m?void 0:m.isCustom)&&(null===(e=m.dateRangeSelectionOptions)||void 0===e?void 0:e.selectedDates)?L(m.dateRangeSelectionOptions.selectedDates):L(void 0),P(m)}),[m]),o.useEffect((()=>{B(!1),R(!1)}),[h]);const _=e=>{void 0!==e?(B(e),C&&R(!1)):B((e=>!e))},H=e=>{A.current&&!A.current.contains(e.target)&&(C&&R(!1),_(!1))};return o.useEffect((()=>(T&&document.addEventListener("mousedown",H),()=>{document.removeEventListener("mousedown",H)})),[T]),e.jsx(e.Fragment,{children:e.jsxs(d.MainDropdown,Object.assign({drop:"down",show:T,onToggle:_,bgColor:w,id:"analytic-dropdown"},{children:[e.jsx(t.Dropdown.Toggle,Object.assign({id:"dropdown-autoclose-outside",className:"main--dropdown",style:"small"===y?{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",backgroundColor:"#FAFAFA",borderRadius:4,border:`1px solid ${s.DEFAULT_THEME.colorsV2.stroke.primary}`}:S||void 0},{children:e.jsx($,Object.assign({style:"small"===y||b?{color:b||s.DEFAULT_THEME.colorsV2.content.secondary}:void 0},{children:(null==I?void 0:I.isCustom)?E?u(E[0],f)===u(E[1],f)?`${u(E[0],f)}`:`${u(E[0],f)} to ${u(E[1],f)}`:(null==M?void 0:M.label)?null==M?void 0:M.label:p:I?null==I?void 0:I.label:p}))})),a.default.createPortal(e.jsx(t.Dropdown.Menu,Object.assign({className:"main--dropdown",style:{padding:0},ref:A},{children:e.jsxs(d.MainDropdown,Object.assign({drop:null!=D?D:"end",id:"sub--dropdown",show:C,onToggle:e=>{!e&&B(!1),R(!C)}},{children:[e.jsx("div",Object.assign({style:{maxHeight:v||"auto",overflowY:"scroll"}},{children:l.map(((o,n)=>{var s;return e.jsx("div",{children:(null==o?void 0:o.isCustom)?e.jsx(t.Dropdown.Toggle,Object.assign({className:"sub--dropdown"},{children:e.jsx(c,{isFirstItem:0===n,isLastItem:n===l.length-1,eachOption:o,selectedOption:I,selectedDate:E,onClickingEachItem:e=>{P(e),R(!0)},rangeSelection:!!(null===(s=null==o?void 0:o.dateRangeSelectionOptions)||void 0===s?void 0:s.selectRange),showTimePicker:f})})):e.jsx(c,{isFirstItem:0===n,isLastItem:n===l.length-1,eachOption:o,selectedOption:I,selectedDate:E,onClickingEachItem:e=>{if(L(void 0),P(e),F(e),_(),!e.noOfDays)return void g(e);const o=new Date,t=new Date;t.setDate(o.getDate()-e.noOfDays),g(Object.assign(Object.assign({},e),{selectedRange:[t,o]}))},showTimePicker:f})},null==o?void 0:o.key)}))})),e.jsx(t.Dropdown.Menu,Object.assign({className:"sub--dropdown",popperConfig:{modifiers:[{name:"offset",options:{offset:[(null==O?void 0:O.offsetSkid)||0,(null==O?void 0:O.offsetDistance)||0]}}]}},{children:e.jsx(i.DatePicker,{selectRange:(null===(k=null==I?void 0:I.dateRangeSelectionOptions)||void 0===k?void 0:k.selectRange)||!1,showTimePicker:f,maxDate:null===(x=null==I?void 0:I.dateRangeSelectionOptions)||void 0===x?void 0:x.maxDate,minDate:null===(q=null==I?void 0:I.dateRangeSelectionOptions)||void 0===q?void 0:q.minDate,selectedDates:E,onSelectRange:(e,o)=>{const t=[e,o];(null==I?void 0:I.dateRangeSelectionOptions)&&(I.dateRangeSelectionOptions.selectedDates=t,g(Object.assign(Object.assign({},I),{selectedRange:[e,o]}))),F(I),R(!1),L(t),B(!T)},onSelectDate:e=>{(null==I?void 0:I.dateRangeSelectionOptions)&&(I.dateRangeSelectionOptions.selectedDates=[e,e],g(Object.assign(Object.assign({},I),{selectedRange:[e,e]}))),F(I),R(!1),L([e,e]),B(!T)}})}))]}))})),document.body)]}))})},exports.EachItem=c,exports.formatDate=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("react"),t=require("react-bootstrap"),n=require("react-dom"),s=require("../../constants/Theme.js"),i=require("../datePicker/DatePicker.js");require("react-calendar"),require("../../utils/DateUtils.js");var r=require("../TypographyStyle.js");require("../datePicker/DatePickerWrapper.styled.js"),require("../datePicker/model.js"),require("../dropdown/DropdownPopover/index.js"),require("../dropdown/Dropdown.js"),require("../dropdown/ChipDropdown.js"),require("../zeroState/ZeroState.js"),require("lodash/debounce"),require("../dropdown/OpenedDropdown/components/description/Description.styled.js"),require("../checkBox/CheckBox.styled.js"),require("../list-item/ListItem.js"),require("../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js"),require("../dropdown/OpenedDropdown/components/menu/MenuItem.js"),require("../dropdown/OpenedDropdown/components/menu/MenuList.styled.js"),require("../button/Button.js"),require("../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js"),require("../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js"),require("../icon-button/IconButton.js"),require("../input/Input.js"),require("../dropdown/MenuItem/MenuItem.js"),require("../datePicker/DatePicker.styled.js");var d=require("./CommonStyles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=l(n);const c=o=>{let{eachOption:t,selectedOption:n,selectedDate:i,onClickingEachItem:l,rangeSelection:a,isLastItem:c,isFirstItem:p,showTimePicker:m}=o;return e.jsxs(d.ItemMenuContainer,Object.assign({isFirstItem:p,isLastItem:c,onClick:()=>l(t),isSelected:t.isCustom?t.key==(null==n?void 0:n.key)&&!!i:t.key==(null==n?void 0:n.key)},{children:[e.jsx(r.BodySecondary,Object.assign({color:t.key==(null==n?void 0:n.key)?s.BASE_COLORS.positive[900]:s.BASE_COLORS.grayscale[900]},{children:t.label})),t.subLabel?e.jsx(r.BodyCaption,Object.assign({style:{color:s.BASE_COLORS.grayscale[700]}},{children:t.subLabel})):e.jsx(e.Fragment,{}),i&&(null==n?void 0:n.isCustom)&&t.key==(null==n?void 0:n.key)&&e.jsx(r.BodyCaption,Object.assign({style:{whiteSpace:"normal",wordBreak:"break-word",textAlign:"left"}},{children:a?`${u(i[0],m)} to ${u(i[1],m)}`:`${u(i[0],m)}`}))]}),t.key)},u=(e,o)=>{const t=e.toLocaleString("default",{day:"numeric",month:"short",year:"numeric"});if(o){return`${t} (${e.toLocaleString("default",{hour:"numeric",minute:"2-digit",hour12:!0})})`}return t};exports.AnalyticsDropdown=n=>{let{options:l,placeholder:p="Select an option",selected:m,onOptionSelected:g,resetDropdown:j,maxHeight:v,backgroundcolor:w,calendarPopperConfig:O,variant:y="default",datePickerPlacement:D,closeDropdown:h,labelColor:b,styleProps:S,showTimePicker:f=!1}=n;var k,x,q;const[C,R]=o.useState(!1),[I,P]=o.useState(m),[E,L]=o.useState(),[T,B]=o.useState(!1),[M,F]=o.useState(m),A=o.useRef(null),$="small"===y?r.Caption:r.BodySecondary;o.useEffect((()=>{j&&P(void 0)}),[j]),o.useEffect((()=>{var e;(null==m?void 0:m.isCustom)&&(null===(e=m.dateRangeSelectionOptions)||void 0===e?void 0:e.selectedDates)?L(m.dateRangeSelectionOptions.selectedDates):L(void 0),P(m)}),[m]),o.useEffect((()=>{B(!1),R(!1)}),[h]);const _=e=>{void 0!==e?(B(e),C&&R(!1)):B((e=>!e))},H=e=>{A.current&&!A.current.contains(e.target)&&(C&&R(!1),_(!1))};return o.useEffect((()=>(T&&document.addEventListener("mousedown",H),()=>{document.removeEventListener("mousedown",H)})),[T]),e.jsx(e.Fragment,{children:e.jsxs(d.MainDropdown,Object.assign({drop:"down",show:T,onToggle:_,bgColor:w,id:"analytic-dropdown"},{children:[e.jsx(t.Dropdown.Toggle,Object.assign({id:"dropdown-autoclose-outside",className:"main--dropdown",style:"small"===y?{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",backgroundColor:"#FAFAFA",borderRadius:4,border:`1px solid ${s.DEFAULT_THEME.colorsV2.stroke.primary}`}:S||void 0},{children:e.jsx($,Object.assign({style:"small"===y||b?{color:b||s.DEFAULT_THEME.colorsV2.content.secondary}:void 0},{children:(null==I?void 0:I.isCustom)?E?u(E[0],f)===u(E[1],f)?`${u(E[0],f)}`:`${u(E[0],f)} to ${u(E[1],f)}`:(null==M?void 0:M.label)?null==M?void 0:M.label:p:I?null==I?void 0:I.label:p}))})),a.default.createPortal(e.jsx(t.Dropdown.Menu,Object.assign({className:"main--dropdown",style:{padding:0},ref:A},{children:e.jsxs(d.MainDropdown,Object.assign({drop:null!=D?D:"end",id:"sub--dropdown",show:C,onToggle:e=>{!e&&B(!1),R(!C)}},{children:[e.jsx("div",Object.assign({style:{maxHeight:v||"auto",overflowY:"scroll"}},{children:l.map(((o,n)=>{var s;return e.jsx("div",{children:(null==o?void 0:o.isCustom)?e.jsx(t.Dropdown.Toggle,Object.assign({className:"sub--dropdown"},{children:e.jsx(c,{isFirstItem:0===n,isLastItem:n===l.length-1,eachOption:o,selectedOption:I,selectedDate:E,onClickingEachItem:e=>{P(e),R(!0)},rangeSelection:!!(null===(s=null==o?void 0:o.dateRangeSelectionOptions)||void 0===s?void 0:s.selectRange),showTimePicker:f})})):e.jsx(c,{isFirstItem:0===n,isLastItem:n===l.length-1,eachOption:o,selectedOption:I,selectedDate:E,onClickingEachItem:e=>{if(L(void 0),P(e),F(e),_(),!e.noOfDays)return void g(e);const o=new Date,t=new Date;t.setDate(o.getDate()-e.noOfDays),g(Object.assign(Object.assign({},e),{selectedRange:[t,o]}))},showTimePicker:f})},null==o?void 0:o.key)}))})),e.jsx(t.Dropdown.Menu,Object.assign({className:"sub--dropdown",popperConfig:{modifiers:[{name:"offset",options:{offset:[(null==O?void 0:O.offsetSkid)||0,(null==O?void 0:O.offsetDistance)||0]}}]}},{children:e.jsx(i.DatePicker,{selectRange:(null===(k=null==I?void 0:I.dateRangeSelectionOptions)||void 0===k?void 0:k.selectRange)||!1,showTimePicker:f,maxDate:null===(x=null==I?void 0:I.dateRangeSelectionOptions)||void 0===x?void 0:x.maxDate,minDate:null===(q=null==I?void 0:I.dateRangeSelectionOptions)||void 0===q?void 0:q.minDate,selectedDates:E,onSelectRange:(e,o)=>{const t=[e,o];(null==I?void 0:I.dateRangeSelectionOptions)&&(I.dateRangeSelectionOptions.selectedDates=t,g(Object.assign(Object.assign({},I),{selectedRange:[e,o]}))),F(I),R(!1),L(t),B(!T)},onSelectDate:e=>{(null==I?void 0:I.dateRangeSelectionOptions)&&(I.dateRangeSelectionOptions.selectedDates=[e,e],g(Object.assign(Object.assign({},I),{selectedRange:[e,e]}))),F(I),R(!1),L([e,e]),B(!T)}})}))]}))})),document.body)]}))})},exports.EachItem=c,exports.formatDate=u;

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

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 export declare const AnalyticsChipContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     backgroundColor?: string | undefined;
     width?: string | number | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const AnalyticsMultiWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const MainDropdown: import("@emotion/styled").StyledComponent<{
     [x: string]: any;
@@ -27,7 +27,7 @@ export declare const MainDropdown: import("@emotion/styled").StyledComponent<{
 }, {}, {}>;
 export declare const ItemMenuContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     isSelected?: boolean | undefined;
     isLastItem?: boolean | undefined;
@@ -35,11 +35,11 @@ export declare const ItemMenuContainer: import("@emotion/styled").StyledComponen
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const AnalyticsTrendContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     card: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("chart.js"),a=require("chartjs-plugin-datalabels"),o=require("react-chartjs-2"),i=require("../../../TypographyStyle.js"),r=require("../../../../constants/Theme.js"),l=require("../utils/calcPercentage.js"),n=require("./HorizontalGraph.styles.js");function s(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var d=s(a);e.Chart.register(e.CategoryScale,e.LinearScale,e.BarElement,e.Tooltip,d.default);exports.HorizontalGraph=e=>{var a,s,d,c,u,p,x,g,b;const y=-1===e.xAxis.data.findIndex((t=>0!==t)),S={min:0,max:2e3,stepSize:null!==(a=e.xAxis.stepSize)&&void 0!==a?a:200},h={indexAxis:"y",elements:{},responsive:!0,maintainAspectRatio:e.maintainAspectRatio,layout:{padding:{right:e.showTotal?50:0}},plugins:{legend:{display:!1},tooltip:{enabled:!y,callbacks:{label:e.xAxis.toolTipCallback,footer:null===(s=e.tooltipConfig)||void 0===s?void 0:s.footerCallback},footerFont:null===(c=null===(d=e.tooltipConfig)||void 0===d?void 0:d.footerStyles)||void 0===c?void 0:c.footerFont},datalabels:{display:null!==(u=!y&&e.showTotal)&&void 0!==u&&u,anchor:"end",align:"end",clamp:!0,formatter:(t,a)=>{var o;const i=a.datasetIndex,r=a.chart.data.datasets;if(i!==r.length-1)return"";const n=a.dataIndex;let s=0;for(let t=0;t<r.length;t++)s+=null!==(o=r[t].data[n])&&void 0!==o?o:0;return s?e.isInternationalStore?l.truncateValueForInternationalStore(s):l.truncateValueForIndianStore(s):""},color:r.COLORS.content.secondary}},scales:{y:{title:{display:!!e.yAxis.title,text:e.yAxis.title,color:e.yAxis.titleColor,font:{size:r.FONTS.caption.fontSize,color:e.yAxis.titleColor},padding:{bottom:10}},grid:{display:!1,borderColor:r.COLORS.background.base},ticks:{fontSize:r.FONTS.caption.fontSize,color:null!==(p=e.yAxis.labelColor)&&void 0!==p?p:r.COLORS.content.secondary}},x:{title:{display:!!e.xAxis.title,text:e.xAxis.title,color:e.xAxis.titleColor,font:{size:r.FONTS.caption.fontSize},padding:{top:10}},grid:{borderColor:"white",color:r.COLORS.background.base},ticks:Object.assign({callback:e.xAxis.ticksCallback,fontSize:r.FONTS.caption.fontSize,color:null!==(x=e.xAxis.labelColor)&&void 0!==x?x:r.COLORS.content.secondary},y?S:{max:e.xAxis.max,stepSize:e.xAxis.stepSize})}}},f={labels:e.yAxis.data.map((t=>t.toString())),datasets:[{data:y?[250,1e3,800,1500,300,600]:e.xAxis.data,backgroundColor:t=>(t=>{var a;const o=t.chart.ctx.createLinearGradient(0,0,0,200);let i="";if(y)i="rgba(0,0,0,0)";else if(e.barColorRGBA){const t=e.barColorRGBA;i=`rgba(${t.r}, ${t.g}, ${t.b}, ${null!==(a=t.a)&&void 0!==a?a:"0.3"})`}return o.addColorStop(0,i||"rgba(146, 96, 237, 0.3)"),o.addColorStop(1,i||"rgba(146, 96, 237, 0.3)"),o})(t),barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return t.jsxs(n.GraphContainerWrapper,Object.assign({padding:e.outerPadding,skipOuterLayout:e.skipOuterLayout},{children:[e.chartHeading&&t.jsx(i.TitleRegular,Object.assign({color:null!==(g=e.chartHeading.color)&&void 0!==g?g:r.COLORS.content.secondary},{children:e.chartHeading.heading})),t.jsx("div",Object.assign({style:{height:e.maintainAspectRatio?void 0:null!==(b=e.graphCanvasHeight)&&void 0!==b?b:500}},{children:t.jsx(o.Bar,{options:h,data:f})}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("chart.js"),a=require("chartjs-plugin-datalabels"),o=require("react-chartjs-2"),r=require("../../../TypographyStyle.js"),i=require("../../../../constants/Theme.js"),l=require("../utils/calcPercentage.js"),n=require("./HorizontalGraph.styles.js");function s(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var d=s(a);e.Chart.register(e.CategoryScale,e.LinearScale,e.BarElement,e.Tooltip,d.default);exports.HorizontalGraph=e=>{var a,s,d,c,u,g,p,x,b,C,h;const y=[250,1e3,800,1500,300,600],k=e.stacked&&e.stackedDatasets&&e.stackedDatasets.length>0&&e.stackedDatasets.some((t=>t.data.some((t=>0!==t)))),S=-1!==e.xAxis.data.findIndex((t=>0!==t)),f=!k&&!S,v={min:0,max:2e3,stepSize:null!==(a=e.xAxis.stepSize)&&void 0!==a?a:200},A={indexAxis:"y",elements:{},responsive:!0,maintainAspectRatio:e.maintainAspectRatio,layout:{padding:{right:e.showTotal?50:0}},plugins:{legend:{display:!1},tooltip:{enabled:!f,callbacks:{label:e.xAxis.toolTipCallback,footer:null===(s=e.tooltipConfig)||void 0===s?void 0:s.footerCallback},footerFont:null===(c=null===(d=e.tooltipConfig)||void 0===d?void 0:d.footerStyles)||void 0===c?void 0:c.footerFont},datalabels:{display:null!==(u=!f&&e.showTotal)&&void 0!==u&&u,anchor:"end",align:"end",clamp:!0,formatter:(t,a)=>{var o;const r=a.datasetIndex,i=a.chart.data.datasets;if(r!==i.length-1)return"";const n=a.dataIndex;let s=0;for(let t=0;t<i.length;t++)s+=null!==(o=i[t].data[n])&&void 0!==o?o:0;return s?e.isInternationalStore?l.truncateValueForInternationalStore(s):l.truncateValueForIndianStore(s):""},color:i.COLORS.content.secondary}},scales:{y:{stacked:null!==(g=e.stacked)&&void 0!==g&&g,title:{display:!!e.yAxis.title,text:e.yAxis.title,color:e.yAxis.titleColor,font:{size:i.FONTS.caption.fontSize,color:e.yAxis.titleColor},padding:{bottom:10}},grid:{display:!1,borderColor:i.COLORS.background.base},ticks:{fontSize:i.FONTS.caption.fontSize,color:null!==(p=e.yAxis.labelColor)&&void 0!==p?p:i.COLORS.content.secondary}},x:{stacked:null!==(x=e.stacked)&&void 0!==x&&x,title:{display:!!e.xAxis.title,text:e.xAxis.title,color:e.xAxis.titleColor,font:{size:i.FONTS.caption.fontSize},padding:{top:10}},grid:{borderColor:"white",color:i.COLORS.background.base},ticks:Object.assign({callback:e.xAxis.ticksCallback,fontSize:i.FONTS.caption.fontSize,color:null!==(b=e.xAxis.labelColor)&&void 0!==b?b:i.COLORS.content.secondary},f?v:{max:e.xAxis.max,stepSize:e.xAxis.stepSize})}},onClick:(t,a)=>{if(a.length>0&&e.onBarClick){const t=a[0].index;e.onBarClick(t)}}},O=()=>f?"rgba(0,0,0,0)":e.barColors&&e.barColors.length>0?e.barColors:t=>(t=>{var a;const o=t.chart.ctx.createLinearGradient(0,0,0,200);let r="";if(f)r="rgba(0,0,0,0)";else if(e.barColorRGBA){const t=e.barColorRGBA;r=`rgba(${t.r}, ${t.g}, ${t.b}, ${null!==(a=t.a)&&void 0!==a?a:"0.3"})`}return o.addColorStop(0,r||"rgba(146, 96, 237, 0.3)"),o.addColorStop(1,r||"rgba(146, 96, 237, 0.3)"),o})(t),j={labels:e.yAxis.data.map((t=>t.toString())),datasets:e.stacked&&e.stackedDatasets&&e.stackedDatasets.length>0?e.stackedDatasets.map((t=>({label:t.label||"",data:f?y:t.data,backgroundColor:t.backgroundColor,barPercentage:.4,categoryPercentage:1,borderRadius:4}))):[{data:f?y:e.xAxis.data,backgroundColor:O(),barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return t.jsxs(n.GraphContainerWrapper,Object.assign({padding:e.outerPadding,skipOuterLayout:e.skipOuterLayout},{children:[e.chartHeading&&t.jsx(r.TitleRegular,Object.assign({color:null!==(C=e.chartHeading.color)&&void 0!==C?C:i.COLORS.content.secondary},{children:e.chartHeading.heading})),t.jsx("div",Object.assign({style:{height:e.maintainAspectRatio?void 0:null!==(h=e.graphCanvasHeight)&&void 0!==h?h:500}},{children:t.jsx(o.Bar,{options:A,data:j})}))]}))};

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/LineChart/LineChart.styled.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 export declare const LegendContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const LegendColor: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     color: string;
     newStyle?: boolean | undefined;
@@ -13,7 +13,7 @@ export declare const LegendColor: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const LegendWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     position?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -16,6 +16,10 @@ export interface HeatMapInputInterface {
     heatBoxWidth?: number;
     heatBoxHeight?: number;
     isLooseFit?: boolean;
+    /**
+     * If true, xLabels are center-aligned. Defaults to false (left-aligned).
+     */
+    centerAlignXLabels?: boolean;
 }
 export declare enum HEAT {
     LOW = 0,

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,s=require("react/jsx-runtime"),o=require("react"),n=require("../../../tooltips/Tooltip.js"),r=require("../../../TypographyStyle.js"),i=require("../../../../constants/Theme.js"),c=require("./HeatMapStyled.js");exports.HEAT_GRADING_TYPE=void 0,(e=exports.HEAT_GRADING_TYPE||(exports.HEAT_GRADING_TYPE={}))[e.ABSOLUTE=0]="ABSOLUTE",e[e.RELATIVE=1]="RELATIVE",exports.HEAT=void 0,(t=exports.HEAT||(exports.HEAT={}))[t.LOW=0]="LOW",t[t.MEDIUM=1]="MEDIUM",t[t.HIGH=2]="HIGH",t[t.HIGHEST=3]="HIGHEST";const a={[exports.HEAT.LOW]:"#EBDBFF",[exports.HEAT.MEDIUM]:"#D2AEFF",[exports.HEAT.HIGH]:"#9E77ED",[exports.HEAT.HIGHEST]:"#5E07BB"},l=e=>{if(e>=1e3){const t=e/1e3;return`${Math.round(10*t)/10}K`}return e.toString()};exports.HEAT_COLORS=a,exports.HeatMap=e=>{let{title:t,xLabels:x,yLabels:d,values:H,heatType:j,absolutHeatValues:p,showAbsoluteValuesOnLegend:E,hideXLabels:h,customComponent:T,heatBoxWidth:L,heatBoxHeight:g,isLooseFit:A}=e;const[O,I]=o.useState(),u=A?{display:"flex",justifyContent:"center",alignItems:"center"}:{};return o.useEffect((()=>{const e=Math.max(...H.flat()),t=Math.min(...H.flat());I(H.map((s=>s.map((s=>((e,t,s,o,n)=>{if(t===exports.HEAT_GRADING_TYPE.ABSOLUTE)return e<=s[0]?exports.HEAT.LOW:e<=s[1]?exports.HEAT.MEDIUM:e<=s[2]?exports.HEAT.HIGH:exports.HEAT.HIGHEST;{const t=(n-o)/4;return e<=o+t?exports.HEAT.LOW:e<=o+2*t?exports.HEAT.MEDIUM:e<=o+3*t?exports.HEAT.HIGH:exports.HEAT.HIGHEST}})(s,j,p||[],t,e))))))}),[H,p,j]),O?s.jsxs(c.HeatBoxStyled,Object.assign({isLooseFit:A},{children:[s.jsxs("div",Object.assign({className:"top-container"},{children:[s.jsxs("div",Object.assign({className:"top-container__heading"},{children:[s.jsx(r.TitleMedium,Object.assign({style:{color:i.COLORS.content.primary}},{children:t})),T]})),s.jsx("div",Object.assign({className:"top-container__legend"},{children:s.jsx(c.LegendContainer,{children:j===exports.HEAT_GRADING_TYPE.ABSOLUTE&&E&&p&&p.length>=3?s.jsxs(s.Fragment,{children:[s.jsxs(c.LegendItem,{children:[s.jsx(c.HeatBoxLegend,{color:a[exports.HEAT.LOW]}),s.jsx(c.LegendValue,{children:s.jsx(r.BodyCaption,Object.assign({color:i.COLORS.content.secondary},{children:l(p[0])}))})]}),s.jsxs(c.LegendItem,{children:[s.jsx(c.HeatBoxLegend,{color:a[exports.HEAT.MEDIUM]}),s.jsx(c.LegendValue,{children:s.jsx(r.BodyCaption,Object.assign({color:i.COLORS.content.secondary},{children:l(p[1])}))})]}),s.jsxs(c.LegendItem,{children:[s.jsx(c.HeatBoxLegend,{color:a[exports.HEAT.HIGH]}),s.jsx(c.LegendValue,{children:s.jsx(r.BodyCaption,Object.assign({color:i.COLORS.content.secondary},{children:l(p[2])}))})]}),s.jsxs(c.LegendItem,{children:[s.jsx(c.HeatBoxLegend,{color:a[exports.HEAT.HIGHEST]}),s.jsx(c.LegendValue,{children:s.jsx(r.BodyCaption,Object.assign({color:i.COLORS.content.secondary},{children:p[3]?l(p[3]):l(p[2])+"+"}))})]})]}):s.jsxs(c.LegendLabels,{children:[s.jsx(c.LegendCaption,{children:s.jsx(r.Caption,{children:"Less"})}),s.jsx(c.HeatBoxLegend,{color:a[exports.HEAT.LOW]}),s.jsx(c.HeatBoxLegend,{color:a[exports.HEAT.MEDIUM]}),s.jsx(c.HeatBoxLegend,{color:a[exports.HEAT.HIGH]}),s.jsx(c.HeatBoxLegend,{color:a[exports.HEAT.HIGHEST]}),s.jsx(c.LegendCaption,{children:s.jsx(r.Caption,{children:"More"})})]})})}))]})),s.jsx("table",Object.assign({style:u},{children:s.jsxs("tbody",{children:[d.map(((e,t)=>s.jsxs("tr",{children:[s.jsx("td",{children:s.jsx(r.BodyTiny,Object.assign({style:{color:i.COLORS.content.placeholder}},{children:e}))}),x.map(((e,o)=>s.jsx("td",{children:s.jsx(n.Tooltip,Object.assign({body:l(H[t][o]),placement:"bottom"},{children:s.jsx(c.HeatBox,{color:a[O[t][o]],heatBoxWidth:L,heatBoxHeight:g})}))},e)))]},e))),!h&&s.jsxs("tr",{children:[s.jsx("th",{}),x.map((e=>s.jsx("th",{children:s.jsx(r.BodyTiny,Object.assign({style:{color:i.COLORS.content.placeholder}},{children:e}))},e)))]})]})}))]})):s.jsx(s.Fragment,{})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,s=require("react/jsx-runtime"),o=require("react"),n=require("../../../tooltips/Tooltip.js"),r=require("../../../TypographyStyle.js"),i=require("../../../../constants/Theme.js"),c=require("./HeatMapStyled.js");exports.HEAT_GRADING_TYPE=void 0,(e=exports.HEAT_GRADING_TYPE||(exports.HEAT_GRADING_TYPE={}))[e.ABSOLUTE=0]="ABSOLUTE",e[e.RELATIVE=1]="RELATIVE",exports.HEAT=void 0,(t=exports.HEAT||(exports.HEAT={}))[t.LOW=0]="LOW",t[t.MEDIUM=1]="MEDIUM",t[t.HIGH=2]="HIGH",t[t.HIGHEST=3]="HIGHEST";const l={[exports.HEAT.LOW]:"#EBDBFF",[exports.HEAT.MEDIUM]:"#D2AEFF",[exports.HEAT.HIGH]:"#9E77ED",[exports.HEAT.HIGHEST]:"#5E07BB"},a=e=>{if(e>=1e3){const t=e/1e3;return`${Math.round(10*t)/10}K`}return e.toString()};exports.HEAT_COLORS=l,exports.HeatMap=e=>{let{title:t,xLabels:x,yLabels:d,values:H,heatType:j,absolutHeatValues:p,showAbsoluteValuesOnLegend:E,hideXLabels:h,customComponent:T,heatBoxWidth:L,heatBoxHeight:g,isLooseFit:A,centerAlignXLabels:O=!1}=e;const[I,y]=o.useState(),u=A?{display:"flex",justifyContent:"center",alignItems:"center"}:{};return o.useEffect((()=>{const e=Math.max(...H.flat()),t=Math.min(...H.flat());y(H.map((s=>s.map((s=>((e,t,s,o,n)=>{if(t===exports.HEAT_GRADING_TYPE.ABSOLUTE)return e<=s[0]?exports.HEAT.LOW:e<=s[1]?exports.HEAT.MEDIUM:e<=s[2]?exports.HEAT.HIGH:exports.HEAT.HIGHEST;{const t=(n-o)/4;return e<=o+t?exports.HEAT.LOW:e<=o+2*t?exports.HEAT.MEDIUM:e<=o+3*t?exports.HEAT.HIGH:exports.HEAT.HIGHEST}})(s,j,p||[],t,e))))))}),[H,p,j]),I?s.jsxs(c.HeatBoxStyled,Object.assign({isLooseFit:A},{children:[s.jsxs("div",Object.assign({className:"top-container"},{children:[s.jsxs("div",Object.assign({className:"top-container__heading"},{children:[s.jsx(r.TitleMedium,Object.assign({style:{color:i.COLORS.content.primary}},{children:t})),T]})),s.jsx("div",Object.assign({className:"top-container__legend"},{children:s.jsx(c.LegendContainer,{children:j===exports.HEAT_GRADING_TYPE.ABSOLUTE&&E&&p&&p.length>=3?s.jsxs(s.Fragment,{children:[s.jsxs(c.LegendItem,{children:[s.jsx(c.HeatBoxLegend,{color:l[exports.HEAT.LOW]}),s.jsx(c.LegendValue,{children:s.jsx(r.BodyCaption,Object.assign({color:i.COLORS.content.secondary},{children:a(p[0])}))})]}),s.jsxs(c.LegendItem,{children:[s.jsx(c.HeatBoxLegend,{color:l[exports.HEAT.MEDIUM]}),s.jsx(c.LegendValue,{children:s.jsx(r.BodyCaption,Object.assign({color:i.COLORS.content.secondary},{children:a(p[1])}))})]}),s.jsxs(c.LegendItem,{children:[s.jsx(c.HeatBoxLegend,{color:l[exports.HEAT.HIGH]}),s.jsx(c.LegendValue,{children:s.jsx(r.BodyCaption,Object.assign({color:i.COLORS.content.secondary},{children:a(p[2])}))})]}),s.jsxs(c.LegendItem,{children:[s.jsx(c.HeatBoxLegend,{color:l[exports.HEAT.HIGHEST]}),s.jsx(c.LegendValue,{children:s.jsx(r.BodyCaption,Object.assign({color:i.COLORS.content.secondary},{children:p[3]?a(p[3]):a(p[2])+"+"}))})]})]}):s.jsxs(c.LegendLabels,{children:[s.jsx(c.LegendCaption,{children:s.jsx(r.Caption,{children:"Less"})}),s.jsx(c.HeatBoxLegend,{color:l[exports.HEAT.LOW]}),s.jsx(c.HeatBoxLegend,{color:l[exports.HEAT.MEDIUM]}),s.jsx(c.HeatBoxLegend,{color:l[exports.HEAT.HIGH]}),s.jsx(c.HeatBoxLegend,{color:l[exports.HEAT.HIGHEST]}),s.jsx(c.LegendCaption,{children:s.jsx(r.Caption,{children:"More"})})]})})}))]})),s.jsx("table",Object.assign({style:u},{children:s.jsxs("tbody",{children:[d.map(((e,t)=>s.jsxs("tr",{children:[s.jsx("td",{children:s.jsx(r.BodyTiny,Object.assign({style:{color:i.COLORS.content.placeholder}},{children:e}))}),x.map(((e,o)=>s.jsx("td",{children:s.jsx(n.Tooltip,Object.assign({body:a(H[t][o]),placement:"bottom"},{children:s.jsx(c.HeatBox,{color:l[I[t][o]],heatBoxWidth:L,heatBoxHeight:g})}))},e)))]},e))),!h&&s.jsxs("tr",{children:[s.jsx("th",{}),x.map((e=>s.jsx("th",Object.assign({style:O?{textAlign:"center"}:void 0},{children:s.jsx(r.BodyTiny,Object.assign({style:O?{color:i.COLORS.content.placeholder,textAlign:"center",display:"block",width:"100%"}:{color:i.COLORS.content.placeholder}},{children:e}))}),e)))]})]})}))]})):s.jsx(s.Fragment,{})};

package/dist/cjs/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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/cjs/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> | undefined;
+    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/cjs/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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/cjs/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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/cjs/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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/dist/cjs/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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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>> & import("react-bootstrap/esm/DropdownToggle").DropdownToggleProps> & import("react-bootstrap/esm/helpers").BsPrefixProps<import("react").ElementType<any>> & 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, 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 & {
     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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/cjs/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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     size: Size;
     buttonType: Type;

package/dist/cjs/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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/cjs/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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     isActive: boolean;
     version?: CarouselVersion | undefined;