@bikdotai/bik-component-library 0.0.754-beta.12 → 0.0.754-beta.2

package/dist/esm/components/ProgressChecklist/ProgressChecklist.style.js

@@ -0,0 +1,133 @@
+import e from"styled-components";import{COLORS as i}from"../../constants/Theme.js";const o=e.div`
+	border-radius: ${e=>e.noBorder?"0":"8px"};
+	border: ${e=>e.noBorder?"none":"1px solid #e0e0e0"};
+	padding: ${e=>e.noBorder?"0":"24px"};
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	background: ${i.surface.standard};
+
+	.accordion__overview {
+		padding: 16px !important;
+		border-bottom: none;
+	}
+`,r=e.div`
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+`,t=e.div`
+	display: flex;
+	flex-direction: row;
+	gap: 12px;
+`;e.div`
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	overflow-y: auto;
+	flex: 1;
+
+	&::-webkit-scrollbar {
+		width: 6px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: ${i.stroke.primary};
+		border-radius: 3px;
+	}
+`,e.div`
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+	padding: 12px;
+	background: ${e=>e.completed?"#F0F7F4":i.surface.standard};
+	border: 1px solid
+		${e=>e.completed?"#D4E9E3":i.stroke.primary};
+	border-radius: 6px;
+	cursor: pointer;
+	transition: all 0.2s ease;
+
+	&:hover {
+		background: ${e=>e.completed?"#E8F4F0":i.background.base};
+	}
+`,e.input`
+	width: 18px;
+	height: 18px;
+	margin-top: 2px;
+	cursor: pointer;
+	flex-shrink: 0;
+`,e.div`
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	flex: 1;
+`,e.p`
+	margin: 0;
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 20px;
+	color: ${e=>e.completed?i.content.secondary:i.content.primary};
+	text-decoration: ${e=>e.completed?"line-through":"none"};
+`,e.p`
+	margin: 0;
+	font-size: 12px;
+	font-weight: 400;
+	line-height: 16px;
+	color: ${i.content.secondary};
+	opacity: ${e=>e.completed?.6:1};
+`;const n=e.div`
+	border-radius: 8px;
+	border: 1px solid
+		${e=>e.isActive?i.stroke.primary:"#E0E0E0"};
+	padding: 16px;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	background: ${i.surface.standard};
+	transition: all 0.2s ease;
+
+	&:hover {
+		border-color: ${e=>e.isActive?i.stroke.primary:"#D0D0D0"};
+	}
+`,d=e.div`
+	display: flex;
+	align-items: center;
+	gap: 16px;
+	width: 100%;
+`,p=e.div`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+`,a=e.div`
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	flex: 1;
+`,l=e.div`
+	font-size: 16px;
+	font-weight: 600;
+	line-height: 24px;
+	color: ${e=>e.completed?i.background.positive.vibrant:e.isActive?i.content.primary:i.content.placeholder} !important;
+	margin: 0;
+	display: flex;
+	flex-direction: row;
+	gap: 12px;
+`,c=e.div`
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 20px;
+	color: ${e=>e.isActive?i.content.secondary:i.content.placeholder};
+	margin: 0;
+`,s=e.div`
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex-shrink: 0;
+`,x=e.div`
+	width: 100%;
+	margin-top: 8px;
+`;export{r as HeaderSection,t as ProgressBarSection,o as ProgressChecklistContainer,s as SingleChecklistActionWrapper,x as SingleChecklistAlertRow,a as SingleChecklistContent,l as SingleChecklistHeader,p as SingleChecklistIconWrapper,n as SingleChecklistItem,d as SingleChecklistMainRow,c as SingleChecklistSubheader};

package/dist/esm/components/ProgressChecklist/ProgressStepper.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface StepItem {
+    id?: string;
+    text: string;
+    label?: string;
+    onClick?: () => void;
+    isCompleted?: boolean;
+}
+interface ProgressStepperProps {
+    steps?: StepItem[];
+    onStepClick?: (id: string) => void;
+    isStepperActive?: boolean;
+}
+declare const _default: React.NamedExoticComponent<ProgressStepperProps>;
+export default _default;

package/dist/esm/components/ProgressChecklist/ProgressStepper.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import i,{useState as l}from"react";import{COLORS as n}from"../../constants/Theme.js";import{Button as d}from"../button/Button.js";const o=o=>{let{steps:s=[],onStepClick:r,isStepperActive:a}=o;var c,p;const h=s.length>0?s:[{id:"step-1",text:"Step One"},{id:"step-2",text:"Step Two"},{id:"step-3",text:"Step Three"}],[g,v]=l(null!==(p=null===(c=h[0])||void 0===c?void 0:c.id)&&void 0!==p?p:null);return e("div",Object.assign({style:{paddingLeft:52}},{children:e("div",Object.assign({style:{margin:0,padding:0,display:"flex",flexDirection:"column",gap:12}},{children:h.map(((l,o)=>{var s,c,p,u,m,x,C;return t(i.Fragment,{children:[t("div",Object.assign({style:{display:"flex",alignItems:"center",gap:8}},{children:[(()=>{var i;const n=(0===o||(null===(i=h[o-1])||void 0===i?void 0:i.isCompleted))&&!0===a,d=!0===l.isCompleted;return e("div",d?Object.assign({style:{width:24,height:24,flex:"0 0 24px"},"aria-hidden":!0},{children:t("svg",Object.assign({width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e("rect",{x:"0.5",y:"0.5",width:"23",height:"23",rx:"11.5",fill:"#EFE6F9"}),e("rect",{x:"0.5",y:"0.5",width:"23",height:"23",rx:"11.5",stroke:"#4B1583"}),e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M17.8047 7.52851C18.0651 7.78886 18.0651 8.21097 17.8047 8.47132L10.4714 15.8047C10.2111 16.065 9.78894 16.065 9.5286 15.8047L6.19526 12.4713C5.93491 12.211 5.93491 11.7889 6.19526 11.5285C6.45561 11.2682 6.87772 11.2682 7.13807 11.5285L10 14.3904L16.8619 7.52851C17.1223 7.26816 17.5444 7.26816 17.8047 7.52851Z",fill:"#4B1583"})]}))}):Object.assign({style:{width:24,height:24,borderRadius:30,padding:4,display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",background:n?"#4B1583":"transparent",color:n?"#FFFFFF":"#BDBDBD",border:"1px solid "+(n?"#4B1583":"#E0E0E0"),fontSize:12,lineHeight:"12px",flex:"0 0 24px"},"aria-hidden":!0},{children:e("span",Object.assign({style:{fontSize:12,fontWeight:500}},{children:o+1}))}))})(),e("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"flex-start",minWidth:0},"aria-label":`Open ${null!==(c=null!==(s=l.label)&&void 0!==s?s:l.text)&&void 0!==c?c:`step ${o+1}`}`},{children:e(d,{buttonText:null!==(u=null!==(p=l.label)&&void 0!==p?p:l.text)&&void 0!==u?u:`Step ${o+1}`,buttonType:"text",buttonTextColor:l.isCompleted?n.text.secondary:0!==o&&!0!==(null===(m=h[o-1])||void 0===m?void 0:m.isCompleted)||!a?n.content.inactive:"#4B1583",matchParentWidth:!1,size:"small",style:{width:"fit-content",paddingLeft:0,textDecoration:"none",textDecorationLine:"none"},onClick:()=>{var e,t;v(null!==(e=l.id)&&void 0!==e?e:g),(!l.isCompleted&&a&&(0===o||!0===(null===(t=h[o-1])||void 0===t?void 0:t.isCompleted))||l.isCompleted)&&(l.onClick?l.onClick():l.id&&(null==r||r(l.id)))}})})),!l.isCompleted&&(0===o||!0===(null===(x=h[o-1])||void 0===x?void 0:x.isCompleted))&&a&&e("div",Object.assign({style:{width:20,height:20,display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer"},"aria-hidden":!0,onClick:e=>{var t,i;v(null!==(t=l.id)&&void 0!==t?t:g),l.isCompleted||!a||0!==o&&!0!==(null===(i=h[o-1])||void 0===i?void 0:i.isCompleted)||(l.onClick?l.onClick():l.id&&(null==r||r(l.id)))}},{children:e("svg",Object.assign({width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M5.83333 6.66667C5.3731 6.66667 5 6.29357 5 5.83333C5 5.3731 5.3731 5 5.83333 5H14.1667C14.6269 5 15 5.3731 15 5.83333V14.1667C15 14.6269 14.6269 15 14.1667 15C13.7064 15 13.3333 14.6269 13.3333 14.1667V7.84518L6.42259 14.7559C6.09715 15.0814 5.56951 15.0814 5.24408 14.7559C4.91864 14.4305 4.91864 13.9028 5.24408 13.5774L12.1548 6.66667H5.83333Z",fill:"#4B1583"})}))}))]})),o!==h.length-1&&e("div",{"aria-hidden":!0,style:{width:8,height:1,borderRadius:2,background:"#BDBDBD",transform:"rotate(90deg)",marginLeft:8}})]},null!==(C=l.id)&&void 0!==C?C:`step-${o}`)}))}))}))};var s=i.memo(o);export{s as default};

package/dist/esm/components/ProgressChecklist/SimpleChecklistItem.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+interface TagProps {
+    tagText: string | number;
+    variant?: 'regular' | 'circle' | 'compressed';
+    type?: 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
+    theme?: 'light' | 'dark';
+}
+interface SimpleChecklistItemProps {
+    header: string;
+    subheader?: string;
+    icon?: React.ReactNode;
+    activeIcon?: React.ReactNode;
+    completedIcon?: React.ReactNode;
+    isActive?: boolean;
+    isCompleted?: boolean;
+    tag?: TagProps;
+}
+declare const SimpleChecklistItem: React.FC<SimpleChecklistItemProps>;
+export default SimpleChecklistItem;

package/dist/esm/components/ProgressChecklist/SimpleChecklistItem.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{ActiveChecklistIcon as i}from"../../assets/icons/ActiveChecklistIcon.js";import{CompletedChecklistIcon as s}from"../../assets/icons/CompletedChecklistIcon.js";import{InactiveChecklistIcon as c}from"../../assets/icons/InactiveChecklistIcon.js";import{Tag as n}from"../tag/Tag.js";import{SingleChecklistMainRow as r,SingleChecklistIconWrapper as l,SingleChecklistContent as o,SingleChecklistHeader as a,SingleChecklistSubheader as m}from"./ProgressChecklist.style.js";const d=d=>{let{header:h,subheader:p,icon:g,activeIcon:v,completedIcon:j,isActive:f,isCompleted:u,tag:I}=d;return e("div",{children:t(r,{children:[e(l,{children:u?null!=j?j:e(s,{}):f?null!=v?v:e(i,{}):null!=g?g:e(c,{})}),t(o,{children:[t("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[e(a,Object.assign({completed:u,isActive:f},{children:h})),(null==I?void 0:I.tagText)&&e(n,{tagText:I.tagText,variant:I.variant,type:I.type,theme:I.theme})]})),p&&e(m,Object.assign({isActive:f},{children:p}))]})]})})};export{d as default};

package/dist/esm/components/ProgressChecklist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ProgressChecklist } from './ProgressChecklist';
+export type { ChecklistItemType } from './ProgressChecklist';

package/dist/esm/components/TablePagination/TablePagination.d.ts

@@ -9,5 +9,6 @@ export type TablePaginationProps = {
     updatePageSize: (option: DropdownOption | DropdownOption[]) => void;
     showTotalText?: boolean;
     removeBorder?: boolean;
+    containerStyle?: React.CSSProperties;
 };
 export declare const TablePagination: React.FC<TablePaginationProps>;

package/dist/esm/components/TablePagination/TablePagination.js

@@ -1 +1 @@
-import{jsxs as e,jsx as o}from"react/jsx-runtime";import t from"../../assets/icons/chevronLeft.svg.js";import n from"../../assets/icons/chevronRight.svg.js";import"../dropdown/DropdownPopover/index.js";import{Dropdown as r}from"../dropdown/Dropdown.js";import"../dropdown/ChipDropdown.js";import"react";import"../zeroState/ZeroState.js";import{BodySecondary as s}from"../TypographyStyle.js";import{DEFAULT_THEME as i}from"../../constants/Theme.js";import"../dropdown/OpenedDropdown/components/description/Description.styled.js";import"../checkBox/CheckBox.styled.js";import"../list-item/ListItem.js";import"../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js";import"../dropdown/OpenedDropdown/components/menu/MenuItem.js";import"../dropdown/OpenedDropdown/components/menu/MenuList.styled.js";import"../button/Button.js";import"../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js";import"../icon-button/IconButton.js";import"../input/Input.js";import"../dropdown/MenuItem/MenuItem.js";import{StyledTablePaginationContainer as p,StyledPagingContainer as d}from"./TablePagination.styled.js";const c=c=>{let{pageNumber:l,pageSize:a,totalRows:m,updatePageNumber:h,updatePageSize:w,hidePageSizeOptions:j,showTotalText:g}=c;const u=i.colorsV2,y=(l-1)*a+1,b=(l-1)*a+a,O=Math.ceil(m/a),v=1==O;let f=[];f=O>=5?l===O?[l-4,l-3,l-2,l-1,l]:1===l?[l,l+1,l+2,l+3,l+4]:2===l?[l-1,l,l+1,l+2,l+3]:l===O-1?[l-3,l-2,l-1,l,l+1]:[l-2,l-1,l,l+1,l+2]:Array.from({length:O},((e,o)=>o+1));return e(p,{children:[!j&&o("div",{children:o(r,{size:"small",options:[{label:"5 rows per page",value:"5",selected:5===a},{label:"10 rows per page",value:"10",selected:10===a},{label:"20 rows per page",value:"20",selected:20===a}],onSelect:w,width:"162px"})}),e("div",Object.assign({className:"paging__container"},{children:[!j&&m&&e(s,Object.assign({style:{color:u.content.placeholder}},{children:["Showing ",y,"-",b>m?m:b," of"," ",m," results"]})),e("div",Object.assign({className:"pages__buttons-container"},{children:[!v&&o(d,Object.assign({active:!1,onClick:()=>{1!==l&&h(Math.max(l-1,1))},disabled:1===l},{children:o(t,{color:u.content.secondary,height:14,width:14})})),f.map((e=>o(d,Object.assign({active:e==l,onClick:()=>h(e),style:{display:1==e&&m<=a?"none":"flex"}},{children:o(s,Object.assign({style:{color:e==l?u.content.primaryInverse:u.content.secondary}},{children:e}))}),e))),!v&&o(d,Object.assign({isLast:!0,active:!1,onClick:()=>{l!==O&&h(Math.min(l+1,O))},disabled:l===O},{children:o(n,{color:u.content.secondary,height:14,width:14})}))]})),j&&m&&g&&e(s,Object.assign({style:{color:u.content.placeholder}},{children:["Showing ",y,"-",b>m?m:b," of"," ",m," results"]}))]}))]})};export{c as TablePagination};
+import{jsxs as e,jsx as o}from"react/jsx-runtime";import t from"../../assets/icons/chevronLeft.svg.js";import n from"../../assets/icons/chevronRight.svg.js";import"../dropdown/DropdownPopover/index.js";import{Dropdown as s}from"../dropdown/Dropdown.js";import"../dropdown/ChipDropdown.js";import"react";import"../zeroState/ZeroState.js";import{BodySecondary as r}from"../TypographyStyle.js";import{DEFAULT_THEME as i}from"../../constants/Theme.js";import"../dropdown/OpenedDropdown/components/description/Description.styled.js";import"../checkBox/CheckBox.styled.js";import"../list-item/ListItem.js";import"../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js";import"../dropdown/OpenedDropdown/components/menu/MenuItem.js";import"../dropdown/OpenedDropdown/components/menu/MenuList.styled.js";import"../button/Button.js";import"../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js";import"../icon-button/IconButton.js";import"../input/Input.js";import"../dropdown/MenuItem/MenuItem.js";import{StyledTablePaginationContainer as p,StyledPagingContainer as d}from"./TablePagination.styled.js";const c=c=>{let{pageNumber:l,pageSize:a,totalRows:m,updatePageNumber:h,updatePageSize:j,hidePageSizeOptions:w,showTotalText:g,containerStyle:u={}}=c;const y=i.colorsV2,b=(l-1)*a+1,O=(l-1)*a+a,v=Math.ceil(m/a),f=1==v;let D=[];D=v>=5?l===v?[l-4,l-3,l-2,l-1,l]:1===l?[l,l+1,l+2,l+3,l+4]:2===l?[l-1,l,l+1,l+2,l+3]:l===v-1?[l-3,l-2,l-1,l,l+1]:[l-2,l-1,l,l+1,l+2]:Array.from({length:v},((e,o)=>o+1));const S=[{label:"5 rows per page",value:"5",selected:5===a},{label:"10 rows per page",value:"10",selected:10===a},{label:"20 rows per page",value:"20",selected:20===a}];return e(p,Object.assign({style:u},{children:[!w&&o("div",{children:o(s,{size:"small",options:S,onSelect:j,width:"162px"})}),e("div",Object.assign({className:"paging__container"},{children:[!w&&m&&e(r,Object.assign({style:{color:y.content.placeholder}},{children:["Showing ",b,"-",O>m?m:O," of"," ",m," results"]})),e("div",Object.assign({className:"pages__buttons-container"},{children:[!f&&o(d,Object.assign({active:!1,onClick:()=>{1!==l&&h(Math.max(l-1,1))},disabled:1===l},{children:o(t,{color:y.content.secondary,height:14,width:14})})),D.map((e=>o(d,Object.assign({active:e==l,onClick:()=>h(e),style:{display:1==e&&m<=a?"none":"flex"}},{children:o(r,Object.assign({style:{color:e==l?y.content.primaryInverse:y.content.secondary}},{children:e}))}),e))),!f&&o(d,Object.assign({isLast:!0,active:!1,onClick:()=>{l!==v&&h(Math.min(l+1,v))},disabled:l===v},{children:o(n,{color:y.content.secondary,height:14,width:14})}))]})),w&&m&&g&&e(r,Object.assign({style:{color:y.content.placeholder}},{children:["Showing ",b,"-",O>m?m:O," of"," ",m," results"]}))]}))]}))};export{c as TablePagination};

package/dist/esm/components/TablePagination/TablePaginationCard.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { TablePaginationProps } from "./TablePagination";
 export declare const TablePaginationCardStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any> | undefined;
+    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
 } & {
     removeBorder?: boolean | undefined;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/WhatsAppTextEditor/CustomEditor.styled.d.ts

@@ -1,15 +1,15 @@
 /// <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;
 } & {
     isError: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TextSpace: 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").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {}>;
 export declare const OuterContainer: 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/esm/components/WhatsAppTextEditor/WhatsAppTextEditorHeader.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export declare const CustomRightBorder: 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>, {}>;
 export declare enum EditorActionTypes {
     'BOLD' = "BOLD",

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