@bikdotai/bik-component-library 0.0.433 → 0.0.434-beta.1

package/dist/esm/components/bik-layout/BikHeader.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import i from"../../assets/icons/arrow_left.svg.js";import{useState as n}from"react";import{Curtain as s}from"../curtain/Curtain.js";import{BodyCaption as c,TitleMedium as o,TitleRegular as a}from"../TypographyStyle.js";import{BikHeaderWrapper as l,BikHeaderContainer as d}from"./CommonStyles.js";const h=h=>{const{header:m,subHeader:g,hideBackButton:u=!0,rightActionButton:j,onClickingBackButton:p,secondaryHeader:f,curtainProps:y,curtainZIndex:b,headerStyles:O}=h,[v,x]=n(!!y);return e(l,Object.assign({style:Object.assign({},O)},{children:[e(d,{children:[e("div",Object.assign({className:"row--flex left-container"},{children:[!u&&t(i,{className:"cursor",height:24,width:24,onClick:p}),e("div",{children:[g?t(c,Object.assign({className:"brand"},{children:m})):t(o,{children:m}),t(a,{children:g})]})]})),t("div",Object.assign({className:"row--flex right-container"},{children:j}))]}),v&&y&&e(r,{children:[t("div",Object.assign({style:{position:"sticky",top:0,width:"auto",zIndex:b||6}},{children:t(s,Object.assign({},y,{onCloseHandler:()=>{x(!1)}}))})),t("div",{style:{height:20}})]}),null!=f?f:t(r,{})]}))};export{h as BikHeader};
+import{jsxs as r,jsx as e,Fragment as i}from"react/jsx-runtime";import t from"../../assets/icons/arrow_left.svg.js";import{useState as n}from"react";import{Curtain as s}from"../curtain/Curtain.js";import{BodyCaption as o,TitleMedium as c,TitleRegular as a}from"../TypographyStyle.js";import{BikHeaderWrapper as l,BikHeaderContainer as d}from"./CommonStyles.js";const h=h=>{const{header:m,subHeader:u,hideBackButton:g=!0,rightActionButton:p,onClickingBackButton:f,secondaryHeader:j,curtainProps:y,curtainZIndex:b}=h,[v,x]=n(!!y);return r(l,{children:[r(d,{children:[r("div",Object.assign({className:"row--flex left-container"},{children:[!g&&e(t,{className:"cursor",height:24,width:24,onClick:f}),r("div",{children:[u?e(o,Object.assign({className:"brand"},{children:m})):e(c,{children:m}),e(a,{children:u})]})]})),e("div",Object.assign({className:"row--flex right-container"},{children:p}))]}),v&&y&&r(i,{children:[e("div",Object.assign({style:{position:"sticky",top:0,width:"auto",zIndex:b||6}},{children:e(s,Object.assign({},y,{onCloseHandler:()=>{x(!1)}}))})),e("div",{style:{height:20}})]}),null!=j?j:e(i,{})]})};export{h as BikHeader};

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

@@ -17,8 +17,6 @@ export interface BikLayoutProps {
         subTitle?: string;
         showBookADemo?: boolean;
         demoLink?: string;
-        featureImage?: string;
     };
-    useFeautureModalV2?: boolean;
 }
 export declare const BikLayout: React.FC<BikLayoutProps>;

package/dist/esm/components/bik-layout/BikLayout.js

@@ -1 +1 @@
-import{jsx as e,Fragment as r,jsxs as o}from"react/jsx-runtime";import{BikLayoutContainer as n}from"./CommonStyles.js";import{FeatureModal as a}from"./FeatureModal.js";import{FeatureModalV2 as t}from"./FeatureModalV2.js";import{PageLoader as i}from"./PageLoader.js";const s=s=>{const{isLoading:d,isFeatureModalEnabled:l=!1,isDisabled:c=!1,loadingAnimation:p,hidePadding:m=!1,height:g,children:h,containerStyles:u,onClickingCrossOnFeatureModal:j,onUpgrade:b,extraContentForModal:C,featureModalProps:M,type:f,useFeautureModalV2:F}=s;return d?e(n,{children:p||e(i,{})}):e(r,{children:o(n,Object.assign({type:f},{children:[e("div",{className:""+(c?"disabled--wrapper":"")}),e("div",Object.assign({className:""+(m?"inner-wrapper":"inner-wrapper pd-24"),style:Object.assign({height:`${g||""}`},null!=u?u:{})},{children:h})),l&&e(r,{children:F?e(t,Object.assign({onUpgrade:b},M,{otherContent:C})):e(a,Object.assign({showBookADemo:!0,onClickingCross:()=>j?j():"",onUpgrade:b},M,{otherContent:C}))})]}))})};export{s as BikLayout};
+import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import{BikLayoutContainer as o}from"./CommonStyles.js";import{FeatureModal as i}from"./FeatureModal.js";import{PageLoader as a}from"./PageLoader.js";const t=t=>{const{isLoading:s,isFeatureModalEnabled:d=!1,isDisabled:l=!1,loadingAnimation:c,hidePadding:p=!1,height:m,children:g,containerStyles:h,onClickingCrossOnFeatureModal:j,onUpgrade:b,extraContentForModal:u,featureModalProps:C,type:f}=t;return s?e(o,{children:c||e(a,{})}):e(r,{children:n(o,Object.assign({type:f},{children:[e("div",{className:""+(l?"disabled--wrapper":"")}),e("div",Object.assign({className:""+(p?"inner-wrapper":"inner-wrapper pd-24"),style:Object.assign({height:`${m||""}`},null!=h?h:{})},{children:g})),d&&e(i,Object.assign({showBookADemo:!0,onClickingCross:()=>j?j():"",onUpgrade:b},C,{otherContent:u}))]}))})};export{t as BikLayout};

package/dist/esm/components/bik-layout/BikProfile.js

@@ -1 +1 @@
-import{jsx as i,jsxs as e,Fragment as n}from"react/jsx-runtime";import t from"../../assets/icons/log_out.svg.js";import{useState as o}from"react";import{Dropdown as s,OverlayTrigger as r}from"react-bootstrap";import{COLORS as a,DEFAULT_THEME as c}from"../../constants/Theme.js";import"../tooltips/Tooltip.js";import{BodyCaption as l,TitleSmall as d,BodySecondary as m}from"../TypographyStyle.js";import{StyledDropdown as g}from"../floating-action-button/FloatingActionButton.styles.js";import{StyledTooltip as h,MenuInnerContainer as p,UserInfoContainer as b,UserStatusContainer as j,UserNameTitleSmall as v,StatusContainer as u,StyledBodyCaption as O,ProfileDropdownToggleContainer as A,ProfileDropdownInnerContainer as y,UserAvatarContainer as f}from"./CommonStyles.js";const w=A=>{const[y,f]=o(!1),{userName:w,hideLogout:N=!1,photoUrl:C,isActiveAwayStatus:x=!0,isAvailable:D=!1,extraJSX:S,onProfileClicked:T,onLogout:k}=A,L=i=>{const e=(i||"").split("."),n=e[1]||e[0];if(!n)return"";return n.split(" ").map((i=>i.charAt(0).toUpperCase())).slice(0,2).join("")},B=i(h,Object.assign({id:"tooltip"},{children:i(l,{children:w})}));return e(g,Object.assign({onToggle:i=>{f(i)}},{children:[i(U,{isDropdownOpen:y,imageUrl:C,initialsAsIcon:C?"":L(w)}),i(s.Menu,{children:e(p,{children:[e(b,Object.assign({onClick:T},{children:[i(I,{imageUrl:C,initialsAsIcon:C?"":L(w)}),e(j,{children:[i(r,Object.assign({delay:{show:100,hide:400},placement:"top",overlay:B},{children:i(v,{children:i(d,{children:w})})})),x&&e(u,Object.assign({isAvailable:D},{children:[i("div",{className:"availability--container"}),!D&&i(O,Object.assign({isAvailable:D},{children:"Away"})),D&&i(O,Object.assign({isAvailable:D},{children:"Active"}))]}))]})]})),S&&e(n,{children:[i("div",{className:"divider"}),S]}),!N&&e(n,{children:[i("div",{className:"divider"}),e("div",Object.assign({className:"logout--container",onClick:k,onKeyDown:k,role:"button",tabIndex:0},{children:[i(t,{color:a.content.negative,height:17,width:17}),i(m,Object.assign({style:{color:c.colorsV2.content.negative}},{children:"Logout"}))]}))]})]})})]}))},U=e=>{const{isDropdownOpen:n,imageUrl:t,initialsAsIcon:o}=e;return i(A,Object.assign({id:"dropdown-basic"},{children:i(y,Object.assign({isDropdownOpen:n},{children:i(I,{imageUrl:t,initialsAsIcon:o})}))}))},I=e=>{const{imageUrl:t,initialsAsIcon:o}=e;return i(n,{children:(o||t)&&i(f,{children:t?i("img",{src:t,alt:"general-icon"}):i("div",Object.assign({className:"avatar--container"},{children:i(m,Object.assign({style:{color:a.surface.standard}},{children:o}))}))})})};export{w as BikProfile};
+import{jsx as i,jsxs as e,Fragment as t}from"react/jsx-runtime";import n from"../../assets/icons/log_out.svg.js";import{useState as o}from"react";import{Dropdown as s,OverlayTrigger as r}from"react-bootstrap";import{COLORS as a,DEFAULT_THEME as c}from"../../constants/Theme.js";import"@tippyjs/react";import"../tooltips/TooltipInternal.js";import{BodyCaption as l,TitleSmall as d,BodySecondary as m}from"../TypographyStyle.js";import{StyledDropdown as g}from"../floating-action-button/FloatingActionButton.styles.js";import{StyledTooltip as p,MenuInnerContainer as h,UserInfoContainer as b,UserStatusContainer as j,UserNameTitleSmall as v,StatusContainer as u,StyledBodyCaption as O,ProfileDropdownToggleContainer as A,ProfileDropdownInnerContainer as y,UserAvatarContainer as f}from"./CommonStyles.js";const w=A=>{const[y,f]=o(!1),{userName:w,hideLogout:N=!1,photoUrl:C,isActiveAwayStatus:x=!0,isAvailable:D=!1,extraJSX:S,onProfileClicked:T,onLogout:k}=A,L=i=>{const e=(i||"").split("."),t=e[1]||e[0];if(!t)return"";return t.split(" ").map((i=>i.charAt(0).toUpperCase())).slice(0,2).join("")},B=i(p,Object.assign({id:"tooltip"},{children:i(l,{children:w})}));return e(g,Object.assign({onToggle:i=>{f(i)}},{children:[i(I,{isDropdownOpen:y,imageUrl:C,initialsAsIcon:C?"":L(w)}),i(s.Menu,{children:e(h,{children:[e(b,Object.assign({onClick:T},{children:[i(U,{imageUrl:C,initialsAsIcon:C?"":L(w)}),e(j,{children:[i(r,Object.assign({delay:{show:100,hide:400},placement:"top",overlay:B},{children:i(v,{children:i(d,{children:w})})})),x&&e(u,Object.assign({isAvailable:D},{children:[i("div",{className:"availability--container"}),!D&&i(O,Object.assign({isAvailable:D},{children:"Away"})),D&&i(O,Object.assign({isAvailable:D},{children:"Active"}))]}))]})]})),S&&e(t,{children:[i("div",{className:"divider"}),S]}),!N&&e(t,{children:[i("div",{className:"divider"}),e("div",Object.assign({className:"logout--container",onClick:k,onKeyDown:k,role:"button",tabIndex:0},{children:[i(n,{color:a.content.negative,height:17,width:17}),i(m,Object.assign({style:{color:c.colorsV2.content.negative}},{children:"Logout"}))]}))]})]})})]}))},I=e=>{const{isDropdownOpen:t,imageUrl:n,initialsAsIcon:o}=e;return i(A,Object.assign({id:"dropdown-basic"},{children:i(y,Object.assign({isDropdownOpen:t},{children:i(U,{imageUrl:n,initialsAsIcon:o})}))}))},U=e=>{const{imageUrl:n,initialsAsIcon:o}=e;return i(t,{children:(o||n)&&i(f,{children:n?i("img",{src:n,alt:"general-icon"}):i("div",Object.assign({className:"avatar--container"},{children:i(m,Object.assign({style:{color:a.surface.standard}},{children:o}))}))})})};export{w as BikProfile};

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

@@ -11,8 +11,6 @@ export interface MenuItem {
     children?: Menu[];
     showAccessUpgradePanel?: boolean;
     path?: string;
-    layout?: 'fullScreen' | 'popup' | string | undefined;
-    isNew?: boolean;
 }
 export interface BikSidebarProps {
     logoSvg?: JSX.Element;
@@ -23,8 +21,5 @@ export interface BikSidebarProps {
     onClickingMainMenu: (menu: MenuItem) => void;
     onClickingSubMenu: (subMenu: Menu) => void;
     onClickingAccessUpgradePanel?: () => void;
-    onClickingPopupMenuItem?: (menu: Menu) => void;
-    popupMinHeight?: number;
-    isNewSidebar?: boolean;
 }
 export declare const BikSidebar: React.FC<BikSidebarProps>;

package/dist/esm/components/bik-layout/BikSidebar.js

@@ -1 +1 @@
-import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import o from"../../assets/icons/Bik_logo.svg.js";import{useState as t,useEffect as l,Fragment as d}from"react";import{COLORS as s}from"../../constants/Theme.js";import{NavigationHyperlink as r}from"../navigation-hyperlink/NavigationHyperlink.js";import{SidebarPopup as a}from"./SidebarPopup.js";import{SideBarContainer as u,SibeBarMenuItem as c}from"./SidebarStyles.js";import{SimpleSidebar as v}from"./SimpleSidebar.js";const m=s=>{const{logoSvg:m,allMenuList:h,activeMainMenu:g,activeSubMenu:y,router:k,onClickingMainMenu:b,onClickingSubMenu:w,onClickingAccessUpgradePanel:S,onClickingPopupMenuItem:M,popupMinHeight:j,isNewSidebar:N}=s,[f,C]=t(g),[I,L]=t(),[O,B]=t(y),[E,H]=t(!1),[P,_]=t(),[x,A]=t(),[$,U]=t();l((()=>{C(g)}),[g]),l((()=>{B(y)}),[y]);const R=e=>{var i,n;if(L(void 0),_(void 0),"popup"==(null==e?void 0:e.layout)){const i=T();i&&A(i),_(e)}else{const o=document.getElementById((null===(n=null===(i=e.displayName)||void 0===i?void 0:i.split(" "))||void 0===n?void 0:n.join(""))||e.key.toString());if(o){const e=o.getBoundingClientRect().top;U(e)}L(e)}},z=(n,o)=>{var t,l,d,s,r,a;return e("div",Object.assign({id:(null===(l=null===(t=n.displayName)||void 0===t?void 0:t.split(" "))||void 0===l?void 0:l.join(""))||n.key.toString(),className:"main--sidebar",onClick:()=>(e=>{var i;"popup"!==(null==e?void 0:e.layout)&&(_(void 0),L(void 0),H(!0),C(e),!e.path&&b(e),(null===(i=null==e?void 0:e.children)||void 0===i?void 0:i.length)?B(null==e?void 0:e.children[0]):B({}),L(void 0),setTimeout((()=>{H(!1)}),1e3))})(n),onMouseEnter:()=>{!E&&R(n)},onMouseOver:()=>{!E&&R(n)},onMouseLeave:()=>{var e;(null===(e=null==n?void 0:n.children)||void 0===e?void 0:e.length)||(L(void 0),_(void 0))},onFocus:()=>{console.log(";")},"aria-hidden":"true"},{children:[n.isNew&&i("div",Object.assign({className:"new-tag"},{children:" NEW"})),e("div",Object.assign({id:(null===(s=null===(d=n.displayName)||void 0===d?void 0:d.split(" "))||void 0===s?void 0:s.join(""))+"_sub"||n.key.toString()+"_sub",className:`sidebar-menu-item ${(null==f?void 0:f.key)==n.key?" main-menu-active-class":""}  ${n.isLastSticky?"sticky-menu-int":""} ${n.is2ndLastSticky?"sticky-menu":""}\n\t\t\t\t\t${n.key==(null==I?void 0:I.key)?"sidebar-menu-item-hover":""}\`}\n\t\t\t\t\t${n.isNew?"new-menu-item":""}`},{children:[i(p,{icon:n.icon,isActive:n.key==(null==f?void 0:f.key),activeStateIcon:null!==(r=n.activeIcon)&&void 0!==r?r:{},hoverStateIcon:null!==(a=n.hoverIcon)&&void 0!==a?a:{},isHovered:n.key==(null==I?void 0:I.key)}),i("div",Object.assign({className:"menu-item-container"},{children:i("p",Object.assign({className:"menu-item-text "+((null==n?void 0:n.key)===(null==f?void 0:f.key)?"active-menu-item-text":"")},{children:n.displayName}))}))]}),o)]}),o)};l((()=>{const e=()=>{const e=T();e&&A(e),F()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const F=()=>{const e=document.getElementById("_sub-menu"),i=null==e?void 0:e.getBoundingClientRect().height;i&&U(window.innerHeight-i)},T=()=>{var e,i;if(P){const n=(null===(i=null===(e=P.displayName)||void 0===e?void 0:e.split(" "))||void 0===i?void 0:i.join(""))+"_sub"||P.key.toString()+"_sub",o=document.getElementById(n);if(o){const e=o.getBoundingClientRect();let i=e.top;const n=null!=j?j:320;return e.bottom+n>window.innerHeight&&(i-=e.bottom+n-window.innerHeight),i}return null}};return e(u,{children:[i("div",Object.assign({className:"bik-header-logo",onClick:()=>{},onKeyDown:()=>{},"aria-hidden":"true"},{children:m||i(o,{})})),i(c,{children:null==h?void 0:h.map(((o,t)=>{var l,s;return e(d,{children:[o.path?i(r,Object.assign({href:o.path,router:k},{children:z(o,t)})):z(o,t),e(n,{children:["popup"===o.layout&&(null===(l=null==P?void 0:P.children)||void 0===l?void 0:l.length)&&i(a,{top:null!=x?x:void 0,menuList:null==P?void 0:P.children,onClickingPopupMenu:e=>{M&&M(e),_(void 0)},onMouseLeaveOnMenu:()=>_(void 0)}),(null===(s=null==I?void 0:I.children)||void 0===s?void 0:s.length)&&i(v,{menuList:null==I?void 0:I.children,activeMenu:O,onMouseLeaveOnMenu:()=>L(void 0),left:N?92:88,postion:"fixed",header:I.displayName,theme:"brand",router:k,showAccessUpgradePanel:I.showAccessUpgradePanel,onMenuClick:(e,i)=>{B(e),C(I),L(void 0),_(void 0),i&&w(e)},onUpgrade:S,top:N&&$||0,isNewSidebar:N})]})]},t)}))})]})},p=e=>{const{icon:o,isActive:t,activeStateIcon:l,hoverStateIcon:d,isHovered:r}=e,a=o,u=d;return i(n,{children:t?i(l,{width:20,height:20}):i(r?u:a,{width:20,height:20,color:s.surface.standard})})};export{m as BikSidebar};
+import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import o from"../../assets/icons/Bik_logo.svg.js";import{useState as t,useEffect as l,Fragment as a}from"react";import{COLORS as r}from"../../constants/Theme.js";import{NavigationHyperlink as s}from"../navigation-hyperlink/NavigationHyperlink.js";import{SideBarContainer as d,SibeBarMenuItem as c}from"./SidebarStyles.js";import{SimpleSidebar as v}from"./SimpleSidebar.js";const u=r=>{const{logoSvg:u,allMenuList:h,activeMainMenu:g,activeSubMenu:k,router:p,onClickingMainMenu:y,onClickingSubMenu:b,onClickingAccessUpgradePanel:M}=r,[S,j]=t(g),[f,N]=t(),[O,C]=t(k),[I,L]=t(!1);l((()=>{j(g)}),[g]),l((()=>{C(k)}),[k]);const w=(n,o)=>{var t,l,a,r;return i("div",Object.assign({id:(null===(l=null===(t=n.displayName)||void 0===t?void 0:t.split(" "))||void 0===l?void 0:l.join(""))||n.key.toString(),className:"main--sidebar",onClick:()=>(e=>{var i;N(void 0),L(!0),j(e),!e.path&&y(e),(null===(i=null==e?void 0:e.children)||void 0===i?void 0:i.length)?C(null==e?void 0:e.children[0]):C({}),N(void 0),setTimeout((()=>{L(!1)}),1e3)})(n),onMouseEnter:()=>{!I&&N(n)},onMouseOver:()=>{!I&&N(n)},onMouseLeave:()=>{var e;!(null===(e=null==n?void 0:n.children)||void 0===e?void 0:e.length)&&N(void 0)},onFocus:()=>{console.log(";")},"aria-hidden":"true"},{children:e("div",Object.assign({className:`sidebar-menu-item ${(null==S?void 0:S.key)==n.key?" main-menu-active-class":""}  ${n.isLastSticky?"sticky-menu-int":""} ${n.is2ndLastSticky?"sticky-menu":""}\n\t\t\t${n.key==(null==f?void 0:f.key)?"sidebar-menu-item-hover":""}`},{children:[i(m,{icon:n.icon,isActive:n.key==(null==S?void 0:S.key),activeStateIcon:null!==(a=n.activeIcon)&&void 0!==a?a:{},hoverStateIcon:null!==(r=n.hoverIcon)&&void 0!==r?r:{},isHovered:n.key==(null==f?void 0:f.key)}),i("div",Object.assign({className:"menu-item-container"},{children:i("p",Object.assign({className:"menu-item-text "+((null==n?void 0:n.key)===(null==S?void 0:S.key)?"active-menu-item-text":"")},{children:n.displayName}))}))]}),o)}),o)};return e(d,{children:[i("div",Object.assign({className:"bik-header-logo",onClick:()=>{},onKeyDown:()=>{},"aria-hidden":"true"},{children:u||i(o,{})})),i(c,{children:null==h?void 0:h.map(((o,t)=>{var l;return e(a,{children:[o.path?i(s,Object.assign({href:o.path,router:p},{children:w(o,t)})):w(o,t),i(n,{children:(null===(l=null==f?void 0:f.children)||void 0===l?void 0:l.length)&&i(v,{menuList:null==f?void 0:f.children,activeMenu:O,onMouseLeaveOnMenu:()=>N(void 0),left:88,postion:"fixed",header:f.displayName,theme:"brand",router:p,showAccessUpgradePanel:f.showAccessUpgradePanel,onMenuClick:(e,i)=>{C(e),j(f),N(void 0),i&&b(e)},onUpgrade:M})})]},t)}))})]})},m=e=>{const{icon:o,isActive:t,activeStateIcon:l,hoverStateIcon:a,isHovered:s}=e,d=o,c=a;return i(n,{children:t?i(l,{width:20,height:20}):i(s?c:d,{width:20,height:20,color:r.surface.standard})})};export{u as BikSidebar};

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

@@ -92,18 +92,8 @@ export declare const FeatureModalContainer: import("@emotion/styled").StyledComp
     as?: import("react").ElementType<any> | undefined;
 } & {
     zIndex?: number | undefined;
-    resetHeight?: boolean | undefined;
-    relativePostion?: boolean | undefined;
 }, 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;
 }, 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;
-}, 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;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;