@bikdotai/bik-component-library 0.0.687-beta.9 → 0.0.688

package/dist/cjs/components/avatar/Avatar.d.ts

@@ -1,53 +1,49 @@
-import React__default from 'react';
-import { AVATAR_TYPES, SIZE, AVATAR_BACKGROUND } from './AvatarHelper.js';
-
-declare const AVATAR_SIZE_VS_ICON_SIZE_MAP: {
-    SMALL: number;
-    MEDIUM: number;
-    INBOX: number;
-    LARGE: number;
-};
-declare const BACKGROUND_VS_TEXT_COLOR_MAP: {
-    LIGHT: string;
-    WHITE: string;
-    DARK: string;
-};
-type AvatarProps = {
-    type: AVATAR_TYPES;
-    size: SIZE;
-    background: AVATAR_BACKGROUND;
-    name?: string;
-    photoUrl?: string;
-    icon?: React__default.FC<{
-        width: number;
-        height: number;
-        color: string;
-    }>;
-    useNameFallback?: boolean;
-    channelName?: MESSAGE_CHANNELS;
-    borderRadius?: string;
-    inboxSettings?: {
-        isSelected: boolean;
-        isComments: boolean;
-    };
-    status?: 'ONLINE' | 'OFFLINE' | 'AWAY';
-};
-declare const enum MESSAGE_CHANNELS {
-    INSTAGRAM = "instagram",
-    MESSENGER = "messenger",
-    WHATSAPP = "whatsapp",
-    GMAIL = "gmail",
-    LIVECHAT = "livechat",
-    GOOGLE_BUSINESS_CHAT = "gbm",
-    SHOPIFY = "shopify",
-    FACEBOOK = "facebook",
-    EMAIL = "email",
-    SMTP = "smtp",
-    FACEBOOK_CATALOG = "facebook-catalog",
-    TASKS = "tasks",
-    BIK_LIVECHAT = "livechat"
-}
-declare const Avatar: React__default.FC<AvatarProps>;
-
-export { AVATAR_SIZE_VS_ICON_SIZE_MAP, Avatar, BACKGROUND_VS_TEXT_COLOR_MAP, MESSAGE_CHANNELS };
-export type { AvatarProps };
+import React from 'react';
+import { AVATAR_BACKGROUND, AVATAR_TYPES, SIZE } from "./AvatarHelper";
+export declare const AVATAR_SIZE_VS_ICON_SIZE_MAP: {
+    SMALL: number;
+    MEDIUM: number;
+    INBOX: number;
+    LARGE: number;
+};
+export declare const BACKGROUND_VS_TEXT_COLOR_MAP: {
+    LIGHT: string;
+    WHITE: string;
+    DARK: string;
+};
+export type AvatarProps = {
+    type: AVATAR_TYPES;
+    size: SIZE;
+    background: AVATAR_BACKGROUND;
+    name?: string;
+    photoUrl?: string;
+    icon?: React.FC<{
+        width: number;
+        height: number;
+        color: string;
+    }>;
+    useNameFallback?: boolean;
+    channelName?: MESSAGE_CHANNELS;
+    borderRadius?: string;
+    inboxSettings?: {
+        isSelected: boolean;
+        isComments: boolean;
+    };
+    status?: 'ONLINE' | 'OFFLINE' | 'AWAY';
+};
+export declare const enum MESSAGE_CHANNELS {
+    INSTAGRAM = "instagram",
+    MESSENGER = "messenger",
+    WHATSAPP = "whatsapp",
+    GMAIL = "gmail",
+    LIVECHAT = "livechat",
+    GOOGLE_BUSINESS_CHAT = "gbm",
+    SHOPIFY = "shopify",
+    FACEBOOK = "facebook",
+    EMAIL = "email",
+    SMTP = "smtp",
+    FACEBOOK_CATALOG = "facebook-catalog",
+    TASKS = "tasks",
+    BIK_LIVECHAT = "livechat"
+}
+export declare const Avatar: React.FC<AvatarProps>;

package/dist/cjs/components/avatar/Avatar.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("react"),t=require("./Avatar.styled.js"),i=require("./AvatarHelper.js"),a=require("../TypographyStyle.js"),r=require("../../constants/Theme.js"),n=require("../../assets/icons/bik_livechat.svg.js"),o=require("../../assets/icons/email-channel.svg.js"),c=require("../../assets/icons/facebook_channel.svg.js"),l=require("../../assets/icons/gmail.svg.js"),d=require("../../assets/icons/instagram-channel.svg.js"),A=require("../../assets/icons/task.svg.js"),h=require("../../assets/icons/whatsapp_color.svg.js");const u={[i.SIZE.SMALL]:16,[i.SIZE.MEDIUM]:20,[i.SIZE.INBOX]:24,[i.SIZE.LARGE]:32},S={[i.AVATAR_BACKGROUND.LIGHT]:r.COLORS.content.secondary,[i.AVATAR_BACKGROUND.WHITE]:r.COLORS.content.secondary,[i.AVATAR_BACKGROUND.DARK]:r.COLORS.surface.standard};var g=(e=>(e.INSTAGRAM="instagram",e.MESSENGER="messenger",e.WHATSAPP="whatsapp",e.GMAIL="gmail",e.LIVECHAT="livechat",e.GOOGLE_BUSINESS_CHAT="gbm",e.SHOPIFY="shopify",e.FACEBOOK="facebook",e.EMAIL="email",e.SMTP="smtp",e.FACEBOOK_CATALOG="facebook-catalog",e.TASKS="tasks",e.BIK_LIVECHAT="livechat",e))(g||{});exports.AVATAR_SIZE_VS_ICON_SIZE_MAP=u,exports.Avatar=g=>{const[p,E]=s.useState(!1),I=()=>{const s=(g.name||"").split(".").join(" ").split(" ").map((e=>e.charAt(0).toUpperCase())).slice(0,2).join("");return g.size===i.SIZE.SMALL?e.jsx(a.BodyTiny,{style:{color:S[g.background]},children:s}):g.size===i.SIZE.MEDIUM||g.size===i.SIZE.INBOX?e.jsx(a.TitleSmall,{style:{color:S[g.background]},children:s}):g.size===i.SIZE.LARGE?e.jsx(a.TitleMedium,{style:{color:S[g.background]},children:s}):void 0};return e.jsxs("div",{style:{position:"relative"},children:[e.jsxs(t.AvatarStyle,{type:g.type===i.AVATAR_TYPES.IMAGE&&p&&g.useNameFallback&&g.name?i.AVATAR_TYPES.INITIALS:g.type,size:g.size,background:g.background,children:[g.type===i.AVATAR_TYPES.IMAGE&&(g.useNameFallback&&!p?e.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[g.size],height:i.AVATAR_SIZE_MAP[g.size],style:{borderRadius:g?.borderRadius||"50%",objectFit:"contain"},src:g.photoUrl,onError:()=>{E(!0)}}):g.useNameFallback&&p&&g.name?e.jsx("div",{children:I()}):e.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[g.size],height:i.AVATAR_SIZE_MAP[g.size],style:{borderRadius:g?.borderRadius||"50%",objectFit:"contain"},src:g.photoUrl})),g.type===i.AVATAR_TYPES.INITIALS&&e.jsx("div",{children:I()}),g.type===i.AVATAR_TYPES.ICON&&g.icon&&e.jsx(g.icon,{width:u[g.size],height:u[g.size],color:S[g.background]})]}),g.inboxSettings&&e.jsx("div",{style:{position:"absolute",left:u[g.size]+"px",top:u[g.size]+"px",width:14,height:14,borderRadius:g?.borderRadius||"50%",display:"flex",justifyContent:"center",backgroundColor:g.inboxSettings.isSelected?g.inboxSettings.isComments?r.COLORS.content.primary:r.COLORS.background.brandLight:g.inboxSettings.isComments?r.COLORS.content.primary:r.COLORS.surface.standard,alignItems:"center"},children:(()=>{switch(g.channelName){case"email":case"smtp":return e.jsx(o.default,{width:11,height:11});case"facebook":case"facebook-catalog":case"messenger":return e.jsx(c.default,{width:11,height:11});case"instagram":return e.jsx(d.default,{width:11,height:11});case"whatsapp":return e.jsx(h.default,{width:11,height:11});case"gmail":return e.jsx(l.default,{width:11,height:11});case"tasks":return e.jsx(A.default,{width:11,height:11});case"livechat":return e.jsx(n.default,{width:11,height:11})}})()}),g.status&&e.jsx("div",{style:{position:"absolute",left:u[g.size]+"px",top:u[g.size]+"px",width:11,height:11,borderRadius:"50%",display:"flex",justifyContent:"center",backgroundColor:r.COLORS.surface.standard,alignItems:"center"},children:g.status?e.jsx("div",{style:{backgroundColor:"ONLINE"===g.status?r.COLORS.special.whatsapp.brand:r.COLORS.content.inactive,width:"8px",height:"8px",borderRadius:"50%"}}):null})]})},exports.BACKGROUND_VS_TEXT_COLOR_MAP=S,exports.MESSAGE_CHANNELS=g;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("react"),t=require("./Avatar.styled.js"),i=require("./AvatarHelper.js"),r=require("../TypographyStyle.js"),a=require("../../constants/Theme.js"),o=require("../../assets/icons/bik_livechat.svg.js"),n=require("../../assets/icons/email-channel.svg.js"),A=require("../../assets/icons/facebook_channel.svg.js"),S=require("../../assets/icons/gmail.svg.js"),c=require("../../assets/icons/instagram-channel.svg.js"),l=require("../../assets/icons/task.svg.js"),E=require("../../assets/icons/whatsapp_color.svg.js");const d={[i.SIZE.SMALL]:16,[i.SIZE.MEDIUM]:20,[i.SIZE.INBOX]:24,[i.SIZE.LARGE]:32},u={[i.AVATAR_BACKGROUND.LIGHT]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.WHITE]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.DARK]:a.COLORS.surface.standard};var h;exports.MESSAGE_CHANNELS=void 0,(h=exports.MESSAGE_CHANNELS||(exports.MESSAGE_CHANNELS={})).INSTAGRAM="instagram",h.MESSENGER="messenger",h.WHATSAPP="whatsapp",h.GMAIL="gmail",h.LIVECHAT="livechat",h.GOOGLE_BUSINESS_CHAT="gbm",h.SHOPIFY="shopify",h.FACEBOOK="facebook",h.EMAIL="email",h.SMTP="smtp",h.FACEBOOK_CATALOG="facebook-catalog",h.TASKS="tasks",h.BIK_LIVECHAT="livechat";exports.AVATAR_SIZE_VS_ICON_SIZE_MAP=d,exports.Avatar=h=>{const[p,g]=s.useState(!1),O=()=>{const s=(h.name||"").split(".").join(" ").split(" ").map((e=>e.charAt(0).toUpperCase())).slice(0,2).join("");return h.size===i.SIZE.SMALL?e.jsx(r.BodyTiny,Object.assign({style:{color:u[h.background]}},{children:s})):h.size===i.SIZE.MEDIUM||h.size===i.SIZE.INBOX?e.jsx(r.TitleSmall,Object.assign({style:{color:u[h.background]}},{children:s})):h.size===i.SIZE.LARGE?e.jsx(r.TitleMedium,Object.assign({style:{color:u[h.background]}},{children:s})):void 0};return e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[e.jsxs(t.AvatarStyle,Object.assign({type:h.type===i.AVATAR_TYPES.IMAGE&&p&&h.useNameFallback&&h.name?i.AVATAR_TYPES.INITIALS:h.type,size:h.size,background:h.background},{children:[h.type===i.AVATAR_TYPES.IMAGE&&(h.useNameFallback&&!p?e.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[h.size],height:i.AVATAR_SIZE_MAP[h.size],style:{borderRadius:(null==h?void 0:h.borderRadius)||"50%",objectFit:"contain"},src:h.photoUrl,onError:()=>{g(!0)}}):h.useNameFallback&&p&&h.name?e.jsx("div",{children:O()}):e.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[h.size],height:i.AVATAR_SIZE_MAP[h.size],style:{borderRadius:(null==h?void 0:h.borderRadius)||"50%",objectFit:"contain"},src:h.photoUrl})),h.type===i.AVATAR_TYPES.INITIALS&&e.jsx("div",{children:O()}),h.type===i.AVATAR_TYPES.ICON&&h.icon&&e.jsx(h.icon,{width:d[h.size],height:d[h.size],color:u[h.background]})]})),h.inboxSettings&&e.jsx("div",Object.assign({style:{position:"absolute",left:d[h.size]+"px",top:d[h.size]+"px",width:14,height:14,borderRadius:(null==h?void 0:h.borderRadius)||"50%",display:"flex",justifyContent:"center",backgroundColor:h.inboxSettings.isSelected?h.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.background.brandLight:h.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.surface.standard,alignItems:"center"}},{children:(()=>{switch(h.channelName){case exports.MESSAGE_CHANNELS.EMAIL:case exports.MESSAGE_CHANNELS.SMTP:return e.jsx(n.default,{width:11,height:11});case exports.MESSAGE_CHANNELS.FACEBOOK:case exports.MESSAGE_CHANNELS.FACEBOOK_CATALOG:case exports.MESSAGE_CHANNELS.MESSENGER:return e.jsx(A.default,{width:11,height:11});case exports.MESSAGE_CHANNELS.INSTAGRAM:return e.jsx(c.default,{width:11,height:11});case exports.MESSAGE_CHANNELS.WHATSAPP:return e.jsx(E.default,{width:11,height:11});case exports.MESSAGE_CHANNELS.GMAIL:return e.jsx(S.default,{width:11,height:11});case exports.MESSAGE_CHANNELS.TASKS:return e.jsx(l.default,{width:11,height:11});case exports.MESSAGE_CHANNELS.BIK_LIVECHAT:return e.jsx(o.default,{width:11,height:11})}})()})),h.status&&e.jsx("div",Object.assign({style:{position:"absolute",left:d[h.size]+"px",top:d[h.size]+"px",width:11,height:11,borderRadius:"50%",display:"flex",justifyContent:"center",backgroundColor:a.COLORS.surface.standard,alignItems:"center"}},{children:h.status?e.jsx("div",{style:{backgroundColor:"ONLINE"===h.status?a.COLORS.special.whatsapp.brand:a.COLORS.content.inactive,width:"8px",height:"8px",borderRadius:"50%"}}):null}))]}))},exports.BACKGROUND_VS_TEXT_COLOR_MAP=u;

package/dist/cjs/components/avatar/Avatar.styled.d.ts

@@ -0,0 +1,6 @@
+import { AVATAR_BACKGROUND, AVATAR_TYPES, SIZE } from "./AvatarHelper";
+export declare const AvatarStyle: import("styled-components").StyledComponent<"div", any, {
+    size: SIZE;
+    background: AVATAR_BACKGROUND;
+    type: AVATAR_TYPES;
+}, never>;

package/dist/cjs/components/avatar/AvatarHelper.d.ts

@@ -1,24 +1,22 @@
-declare enum AVATAR_TYPES {
-    IMAGE = "IMAGE",
-    INITIALS = "INITIALS",
-    ICON = "ICON"
-}
-declare enum SIZE {
-    SMALL = "SMALL",
-    MEDIUM = "MEDIUM",
-    LARGE = "LARGE",
-    INBOX = "INBOX"
-}
-declare enum AVATAR_BACKGROUND {
-    LIGHT = "LIGHT",
-    DARK = "DARK",
-    WHITE = "WHITE"
-}
-declare const AVATAR_SIZE_MAP: {
-    SMALL: number;
-    MEDIUM: number;
-    LARGE: number;
-    INBOX: number;
-};
-
-export { AVATAR_BACKGROUND, AVATAR_SIZE_MAP, AVATAR_TYPES, SIZE };
+export declare enum AVATAR_TYPES {
+    IMAGE = "IMAGE",
+    INITIALS = "INITIALS",
+    ICON = "ICON"
+}
+export declare enum SIZE {
+    SMALL = "SMALL",
+    MEDIUM = "MEDIUM",
+    LARGE = "LARGE",
+    INBOX = "INBOX"
+}
+export declare enum AVATAR_BACKGROUND {
+    LIGHT = "LIGHT",
+    DARK = "DARK",
+    WHITE = "WHITE"
+}
+export declare const AVATAR_SIZE_MAP: {
+    SMALL: number;
+    MEDIUM: number;
+    LARGE: number;
+    INBOX: number;
+};

package/dist/cjs/components/avatar/AvatarHelper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var A=(A=>(A.IMAGE="IMAGE",A.INITIALS="INITIALS",A.ICON="ICON",A))(A||{}),I=(A=>(A.SMALL="SMALL",A.MEDIUM="MEDIUM",A.LARGE="LARGE",A.INBOX="INBOX",A))(I||{}),e=(A=>(A.LIGHT="LIGHT",A.DARK="DARK",A.WHITE="WHITE",A))(e||{});const E={SMALL:24,MEDIUM:40,LARGE:64,INBOX:30};exports.AVATAR_BACKGROUND=e,exports.AVATAR_SIZE_MAP=E,exports.AVATAR_TYPES=A,exports.SIZE=I;
+"use strict";var A,I,e;Object.defineProperty(exports,"__esModule",{value:!0}),exports.AVATAR_TYPES=void 0,(A=exports.AVATAR_TYPES||(exports.AVATAR_TYPES={})).IMAGE="IMAGE",A.INITIALS="INITIALS",A.ICON="ICON",exports.SIZE=void 0,(I=exports.SIZE||(exports.SIZE={})).SMALL="SMALL",I.MEDIUM="MEDIUM",I.LARGE="LARGE",I.INBOX="INBOX",exports.AVATAR_BACKGROUND=void 0,(e=exports.AVATAR_BACKGROUND||(exports.AVATAR_BACKGROUND={})).LIGHT="LIGHT",e.DARK="DARK",e.WHITE="WHITE";const o={[exports.SIZE.SMALL]:24,[exports.SIZE.MEDIUM]:40,[exports.SIZE.LARGE]:64,[exports.SIZE.INBOX]:30};exports.AVATAR_SIZE_MAP=o;

package/dist/cjs/components/avatar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Avatar';
+export * from './AvatarHelper';

package/dist/cjs/components/bik-layout/BikHeader.d.ts

@@ -1,19 +1,15 @@
-import React__default from 'react';
-import { CurtainProps } from '../curtain/Curtain.js';
-
-interface HeaderProps {
-    header: string;
-    subHeader?: string;
-    hideBackButton?: boolean;
-    rightActionButton?: JSX.Element;
-    leftLayout?: JSX.Element;
-    onClickingBackButton?: () => void;
-    secondaryHeader?: JSX.Element;
-    curtainProps?: CurtainProps;
-    curtainZIndex?: number;
-    headerStyles?: React__default.CSSProperties;
-}
-declare const BikHeader: React__default.FC<HeaderProps>;
-
-export { BikHeader };
-export type { HeaderProps };
+import React from 'react';
+import { CurtainProps } from "../curtain";
+export interface HeaderProps {
+    header: string;
+    subHeader?: string;
+    hideBackButton?: boolean;
+    rightActionButton?: JSX.Element;
+    leftLayout?: JSX.Element;
+    onClickingBackButton?: () => void;
+    secondaryHeader?: JSX.Element;
+    curtainProps?: CurtainProps;
+    curtainZIndex?: number;
+    headerStyles?: React.CSSProperties;
+}
+export declare const BikHeader: React.FC<HeaderProps>;

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

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

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

@@ -1,27 +1,25 @@
-interface BikLayoutProps {
-    isLoading: boolean;
-    isFeatureModalEnabled?: boolean;
-    isDisabled?: boolean;
-    hidePadding?: boolean;
-    loadingAnimation?: JSX.Element;
-    height?: string;
-    children?: React.ReactNode;
-    containerStyles?: React.CSSProperties;
-    onClickingCrossOnFeatureModal?: () => void;
-    onUpgrade?: () => void;
-    extraContentForModal?: JSX.Element;
-    type?: 'overflow-within' | 'overflow-body';
-    featureModalProps?: {
-        title?: string;
-        subTitle?: string;
-        showBookADemo?: boolean;
-        demoLink?: string;
-        featureImage?: string;
-    };
-    useFeautureModalV2?: boolean;
-    backgroundColor?: string;
-}
-declare const BikLayout: React.FC<BikLayoutProps>;
-
-export { BikLayout };
-export type { BikLayoutProps };
+/// <reference types="react" />
+export interface BikLayoutProps {
+    isLoading: boolean;
+    isFeatureModalEnabled?: boolean;
+    isDisabled?: boolean;
+    hidePadding?: boolean;
+    loadingAnimation?: JSX.Element;
+    height?: string;
+    children?: React.ReactNode;
+    containerStyles?: React.CSSProperties;
+    onClickingCrossOnFeatureModal?: () => void;
+    onUpgrade?: () => void;
+    extraContentForModal?: JSX.Element;
+    type?: 'overflow-within' | 'overflow-body';
+    featureModalProps?: {
+        title?: string;
+        subTitle?: string;
+        showBookADemo?: boolean;
+        demoLink?: string;
+        featureImage?: string;
+    };
+    useFeautureModalV2?: boolean;
+    backgroundColor?: string;
+}
+export declare const BikLayout: React.FC<BikLayoutProps>;

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

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

package/dist/cjs/components/bik-layout/BikProfile.d.ts

@@ -1,14 +1,12 @@
-interface BikProfileProps {
-    userName: string;
-    hideLogout?: boolean;
-    photoUrl?: string;
-    isActiveAwayStatus?: boolean;
-    isAvailable?: boolean;
-    onProfileClicked?: () => void;
-    onLogout?: () => void;
-    extraJSX?: JSX.Element;
-}
-declare const BikProfile: React.FC<BikProfileProps>;
-
-export { BikProfile };
-export type { BikProfileProps };
+/// <reference types="react" />
+export interface BikProfileProps {
+    userName: string;
+    hideLogout?: boolean;
+    photoUrl?: string;
+    isActiveAwayStatus?: boolean;
+    isAvailable?: boolean;
+    onProfileClicked?: () => void;
+    onLogout?: () => void;
+    extraJSX?: JSX.Element;
+}
+export declare const BikProfile: React.FC<BikProfileProps>;

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

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

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

@@ -1,37 +1,33 @@
-import React__default from 'react';
-import { Menu } from './SimpleSidebar.js';
-
-interface MenuItem {
-    key: string | number;
-    displayName: string;
-    icon: React__default.FunctionComponent<React__default.SVGAttributes<SVGElement>>;
-    activeIcon: React__default.FunctionComponent<React__default.SVGAttributes<SVGElement>>;
-    hoverIcon: React__default.FunctionComponent<React__default.SVGAttributes<SVGElement>>;
-    isLastSticky?: boolean;
-    is2ndLastSticky?: boolean;
-    children?: Menu[];
-    showAccessUpgradePanel?: boolean;
-    path?: string;
-    layout?: 'fullScreen' | 'popup' | string | undefined;
-    isNew?: boolean;
-    isLocked?: boolean;
-}
-interface BikSidebarProps {
-    logoSvg?: JSX.Element;
-    allMenuList: MenuItem[];
-    activeMainMenu: MenuItem;
-    activeSubMenu: Menu;
-    router: any;
-    onClickingMainMenu: (menu: MenuItem) => void;
-    onClickingSubMenu: (subMenu: Menu) => void;
-    onClickingAccessUpgradePanel?: () => void;
-    onClickingPopupMenuItem?: (menu: Menu) => void;
-    popupMinHeight?: number;
-    isNewSidebar?: boolean;
-    onboardingPercentage?: number;
-    menuStyle?: React__default.CSSProperties;
-}
-declare const BikSidebar: React__default.FC<BikSidebarProps>;
-
-export { BikSidebar };
-export type { BikSidebarProps, MenuItem };
+import React from 'react';
+import { Menu } from './SimpleSidebar';
+export interface MenuItem {
+    key: string | number;
+    displayName: string;
+    icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    activeIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    hoverIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    isLastSticky?: boolean;
+    is2ndLastSticky?: boolean;
+    children?: Menu[];
+    showAccessUpgradePanel?: boolean;
+    path?: string;
+    layout?: 'fullScreen' | 'popup' | string | undefined;
+    isNew?: boolean;
+    isLocked?: boolean;
+}
+export interface BikSidebarProps {
+    logoSvg?: JSX.Element;
+    allMenuList: MenuItem[];
+    activeMainMenu: MenuItem;
+    activeSubMenu: Menu;
+    router: any;
+    onClickingMainMenu: (menu: MenuItem) => void;
+    onClickingSubMenu: (subMenu: Menu) => void;
+    onClickingAccessUpgradePanel?: () => void;
+    onClickingPopupMenuItem?: (menu: Menu) => void;
+    popupMinHeight?: number;
+    isNewSidebar?: boolean;
+    onboardingPercentage?: number;
+    menuStyle?: React.CSSProperties;
+}
+export declare const BikSidebar: React.FC<BikSidebarProps>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("../../assets/icons/Bik_logo.svg.js"),t=require("../../assets/icons/locked.svg.js"),n=require("react"),s=require("../progress-bar/CircularProgressBar.js"),o=require("../../constants/Theme.js"),r=require("../navigation-hyperlink/NavigationHyperlink.js"),a=require("./SidebarPopup.js"),c=require("./SidebarStyles.js"),d=require("./SimpleSidebar.js");const u=i=>{const{icon:t,isActive:n,activeStateIcon:s,hoverStateIcon:r,isHovered:a}=i,c=t,d=s,u=r;return e.jsx(e.Fragment,{children:n?e.jsx(d,{width:20,height:20}):a?e.jsx(u,{width:20,height:20,color:o.COLORS.surface.standard}):e.jsx(c,{width:20,height:20,color:o.COLORS.surface.standard})})},l=({option:i,index:n,onClickMainMenuLogic:s,setHandleHoverForFullLayout:o,isDisabled:r,setHoveredComp:a,setPopupMenu:d,mainActiveMenu:l,hoveredComp:p,popupMenu:m})=>e.jsx(c.SibeBarMenuItem,{children:e.jsxs("div",{id:i.displayName?.split(" ")?.join("")||i.key.toString(),className:"main--sidebar",onClick:()=>s(i),onMouseEnter:()=>{!r&&o(i)},onMouseOver:()=>{!r&&o(i)},onMouseLeave:()=>{i?.children?.length||(a(void 0),d(void 0))},onFocus:()=>{console.log(";")},"aria-hidden":"true",children:[i.isNew&&e.jsx("div",{className:"new-tag "+(i.isLastSticky?"tag-sticky":""),children:"NEW"}),i.isLocked&&e.jsx("div",{className:`locked--channel ${i.isLastSticky?"tag-sticky":""}  ${i.is2ndLastSticky?"tag-sticky-2":""}`,children:e.jsx(t.default,{height:16,width:16})}),e.jsxs("div",{id:i.displayName?.split(" ")?.join("")+"_sub"||i.key.toString()+"_sub",className:`sidebar-menu-item \n\t\t\t\t\t${l?.key===i.key?"main-menu-active-class":""} \n\t\t\t\t\t${i.isLastSticky?"sticky-menu-int":""} \n\t\t\t\t\t${i.is2ndLastSticky?"sticky-menu":""} \n\t\t\t\t\t${i.key===p?.key?"sidebar-menu-item-hover":""} \n\t\t\t\t\t${i.isNew?"new-menu-item":""}`,children:[e.jsx(u,{icon:i.icon,isActive:i.key==l?.key,activeStateIcon:i.activeIcon??{},hoverStateIcon:i.hoverIcon??{},isHovered:i.key==p?.key||i.key==m?.key}),e.jsx("div",{className:"menu-item-container",children:e.jsx("p",{className:"menu-item-text "+(i?.key===l?.key?"active-menu-item-text":""),children:i.displayName})})]},n)]},n)});exports.BikSidebar=t=>{const{logoSvg:o,allMenuList:u,activeMainMenu:p,activeSubMenu:m,router:h,onClickingMainMenu:g,onClickingSubMenu:v,onClickingAccessUpgradePanel:y,onClickingPopupMenuItem:k,popupMinHeight:S,isNewSidebar:j,menuStyle:M}=t,[b,x]=n.useState(p),[w,C]=n.useState(),[f,L]=n.useState(m),[N,H]=n.useState(!1),[P,B]=n.useState(),[E,I]=n.useState(),[q,F]=n.useState(),[_,A]=n.useState(null),O=n.useMemo((()=>u.filter((e=>e.is2ndLastSticky||e.isLastSticky)).length),[u]);n.useEffect((()=>{x(p)}),[p]),n.useEffect((()=>{L(m)}),[m]);const $=n.useCallback((e=>{"popup"!==e?.layout&&(B(void 0),C(void 0),H(!0),x(e),e.path||g(e),L(e?.children?.length?e?.children[0]:{}),C(void 0),setTimeout((()=>{H(!1)}),1e3))}),[g]),R=n.useCallback((e=>{if(W(),C(void 0),B(void 0),"popup"==e?.layout){const i=U();i&&I(i),B(e)}else{const i=document.getElementById(e.displayName?.split(" ")?.join("")||e.key.toString());if(i){const e=D(i);F(e)}C(e),z()}}),[]),D=e=>{const i=e.getBoundingClientRect();let t=i.top;const n=e.querySelectorAll("div");let s=null;if(window.innerHeight<=768)return t;if(n.forEach((e=>{e.className.includes("sticky")&&(s=e)})),s){const e=window.innerHeight-i.bottom;t=i.top+e-140}return t};n.useEffect((()=>{const e=()=>{const e=U();e&&I(e),T()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const T=()=>{const e=document.getElementById("_sub-menu"),i=e?.getBoundingClientRect().height;i&&F(window.innerHeight-i)},U=()=>{if(P){const e=P.displayName?.split(" ")?.join("")+"_sub"||P.key.toString()+"_sub",i=document.getElementById(e);if(i){const e=i.getBoundingClientRect();let t=e.top;const n=S??320;return e.bottom+n>window.innerHeight&&(t-=e.bottom+n-window.innerHeight),t}return null}},z=()=>{W();const e=setTimeout((()=>C(void 0)),1e4);A(e)},W=()=>{clearTimeout(_)};return e.jsxs(c.SideBarContainer,{children:[e.jsx("div",{className:"bik-header-logo",onClick:()=>{},onKeyDown:()=>{},"aria-hidden":"true",children:o||e.jsx(i.default,{})}),e.jsxs(c.MainSideBarMenuWrapper,{style:M,children:[u?.map(((i,t)=>e.jsxs(n.Fragment,{children:[i.path?e.jsx(r.NavigationHyperlink,{href:i.path,router:h,children:e.jsx(l,{option:i,index:t,onClickMainMenuLogic:$,setHandleHoverForFullLayout:R,isDisabled:N,setHoveredComp:C,setPopupMenu:B,mainActiveMenu:b,hoveredComp:w,popupMenu:P})}):e.jsx(l,{option:i,index:t,onClickMainMenuLogic:$,setHandleHoverForFullLayout:R,isDisabled:N,setHoveredComp:C,setPopupMenu:B,mainActiveMenu:b,hoveredComp:w,popupMenu:P}),e.jsxs(e.Fragment,{children:["popup"===i.layout&&P?.children?.length&&e.jsx(a.SidebarPopup,{top:E??void 0,menuList:P?.children,onClickingPopupMenu:e=>{k&&k(e),B(void 0)},onMouseLeaveOnMenu:()=>B(void 0)}),w?.children?.length&&e.jsx(d.SimpleSidebar,{menuList:w?.children,activeMenu:f,onMouseEnterOnMenu:()=>W(),onMouseLeaveOnMenu:()=>{W(),C(void 0)},left:j?92:88,postion:"fixed",header:w.displayName,theme:"brand",router:h,showAccessUpgradePanel:w.showAccessUpgradePanel,onMenuClick:(e,i)=>{L(e),x(w),C(void 0),B(void 0),i&&v(e)},onUpgrade:y,top:j&&q||0,isNewSidebar:j})]})]},t))),"number"==typeof t.onboardingPercentage&&e.jsx(c.SibeBarMenuItem,{children:e.jsx("div",{className:"main--sidebar",children:e.jsx("div",{id:"bik-onboarding__checklist",className:"sidebar-menu-item "+(0===O?"sticky-menu":1===O?"sticky-menu-int":"sticky-menu-three"),children:e.jsx(s.default,{percentage:t.onboardingPercentage,width:48})})})})]})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("../../assets/icons/Bik_logo.svg.js"),n=require("../../assets/icons/locked.svg.js"),t=require("react"),o=require("../progress-bar/CircularProgressBar.js"),s=require("../../constants/Theme.js"),l=require("../navigation-hyperlink/NavigationHyperlink.js"),a=require("./SidebarPopup.js"),d=require("./SidebarStyles.js"),r=require("./SimpleSidebar.js");const u=i=>{const{icon:n,isActive:t,activeStateIcon:o,hoverStateIcon:l,isHovered:a}=i,d=n,r=o,u=l;return e.jsx(e.Fragment,{children:t?e.jsx(r,{width:20,height:20}):a?e.jsx(u,{width:20,height:20,color:s.COLORS.surface.standard}):e.jsx(d,{width:20,height:20,color:s.COLORS.surface.standard})})},c=i=>{let{option:t,index:o,onClickMainMenuLogic:s,setHandleHoverForFullLayout:l,isDisabled:a,setHoveredComp:r,setPopupMenu:c,mainActiveMenu:v,hoveredComp:p,popupMenu:m}=i;var g,h,y,k,j,b;return e.jsx(d.SibeBarMenuItem,{children:e.jsxs("div",Object.assign({id:(null===(h=null===(g=t.displayName)||void 0===g?void 0:g.split(" "))||void 0===h?void 0:h.join(""))||t.key.toString(),className:"main--sidebar",onClick:()=>s(t),onMouseEnter:()=>{!a&&l(t)},onMouseOver:()=>{!a&&l(t)},onMouseLeave:()=>{var e;(null===(e=null==t?void 0:t.children)||void 0===e?void 0:e.length)||(r(void 0),c(void 0))},onFocus:()=>{console.log(";")},"aria-hidden":"true"},{children:[t.isNew&&e.jsx("div",Object.assign({className:"new-tag "+(t.isLastSticky?"tag-sticky":"")},{children:"NEW"})),t.isLocked&&e.jsx("div",Object.assign({className:`locked--channel ${t.isLastSticky?"tag-sticky":""}  ${t.is2ndLastSticky?"tag-sticky-2":""}`},{children:e.jsx(n.default,{height:16,width:16})})),e.jsxs("div",Object.assign({id:(null===(k=null===(y=t.displayName)||void 0===y?void 0:y.split(" "))||void 0===k?void 0:k.join(""))+"_sub"||t.key.toString()+"_sub",className:`sidebar-menu-item \n\t\t\t\t\t${(null==v?void 0:v.key)===t.key?"main-menu-active-class":""} \n\t\t\t\t\t${t.isLastSticky?"sticky-menu-int":""} \n\t\t\t\t\t${t.is2ndLastSticky?"sticky-menu":""} \n\t\t\t\t\t${t.key===(null==p?void 0:p.key)?"sidebar-menu-item-hover":""} \n\t\t\t\t\t${t.isNew?"new-menu-item":""}`},{children:[e.jsx(u,{icon:t.icon,isActive:t.key==(null==v?void 0:v.key),activeStateIcon:null!==(j=t.activeIcon)&&void 0!==j?j:{},hoverStateIcon:null!==(b=t.hoverIcon)&&void 0!==b?b:{},isHovered:t.key==(null==p?void 0:p.key)||t.key==(null==m?void 0:m.key)}),e.jsx("div",Object.assign({className:"menu-item-container"},{children:e.jsx("p",Object.assign({className:"menu-item-text "+((null==t?void 0:t.key)===(null==v?void 0:v.key)?"active-menu-item-text":"")},{children:t.displayName}))}))]}),o)]}),o)})};exports.BikSidebar=n=>{const{logoSvg:s,allMenuList:u,activeMainMenu:v,activeSubMenu:p,router:m,onClickingMainMenu:g,onClickingSubMenu:h,onClickingAccessUpgradePanel:y,onClickingPopupMenuItem:k,popupMinHeight:j,isNewSidebar:b,menuStyle:S}=n,[M,x]=t.useState(v),[w,C]=t.useState(),[f,L]=t.useState(p),[N,O]=t.useState(!1),[H,P]=t.useState(),[B,E]=t.useState(),[I,q]=t.useState(),[F,_]=t.useState(null),A=t.useMemo((()=>u.filter((e=>e.is2ndLastSticky||e.isLastSticky)).length),[u]);t.useEffect((()=>{x(v)}),[v]),t.useEffect((()=>{L(p)}),[p]);const $=t.useCallback((e=>{var i;"popup"!==(null==e?void 0:e.layout)&&(P(void 0),C(void 0),O(!0),x(e),e.path||g(e),(null===(i=null==e?void 0:e.children)||void 0===i?void 0:i.length)?L(null==e?void 0:e.children[0]):L({}),C(void 0),setTimeout((()=>{O(!1)}),1e3))}),[g]),R=t.useCallback((e=>{var i,n;if(W(),C(void 0),P(void 0),"popup"==(null==e?void 0:e.layout)){const i=U();i&&E(i),P(e)}else{const t=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(t){const e=D(t);q(e)}C(e),z()}}),[]),D=e=>{const i=e.getBoundingClientRect();let n=i.top;const t=e.querySelectorAll("div");let o=null;if(window.innerHeight<=768)return n;if(t.forEach((e=>{e.className.includes("sticky")&&(o=e)})),o){const e=window.innerHeight-i.bottom;n=i.top+e-140}return n};t.useEffect((()=>{const e=()=>{const e=U();e&&E(e),T()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const T=()=>{const e=document.getElementById("_sub-menu"),i=null==e?void 0:e.getBoundingClientRect().height;i&&q(window.innerHeight-i)},U=()=>{var e,i;if(H){const n=(null===(i=null===(e=H.displayName)||void 0===e?void 0:e.split(" "))||void 0===i?void 0:i.join(""))+"_sub"||H.key.toString()+"_sub",t=document.getElementById(n);if(t){const e=t.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}},z=()=>{W();const e=setTimeout((()=>C(void 0)),1e4);_(e)},W=()=>{clearTimeout(F)};return e.jsxs(d.SideBarContainer,{children:[e.jsx("div",Object.assign({className:"bik-header-logo",onClick:()=>{},onKeyDown:()=>{},"aria-hidden":"true"},{children:s||e.jsx(i.default,{})})),e.jsxs(d.MainSideBarMenuWrapper,Object.assign({style:S},{children:[null==u?void 0:u.map(((i,n)=>{var o,s;return e.jsxs(t.Fragment,{children:[i.path?e.jsx(l.NavigationHyperlink,Object.assign({href:i.path,router:m},{children:e.jsx(c,{option:i,index:n,onClickMainMenuLogic:$,setHandleHoverForFullLayout:R,isDisabled:N,setHoveredComp:C,setPopupMenu:P,mainActiveMenu:M,hoveredComp:w,popupMenu:H})})):e.jsx(c,{option:i,index:n,onClickMainMenuLogic:$,setHandleHoverForFullLayout:R,isDisabled:N,setHoveredComp:C,setPopupMenu:P,mainActiveMenu:M,hoveredComp:w,popupMenu:H}),e.jsxs(e.Fragment,{children:["popup"===i.layout&&(null===(o=null==H?void 0:H.children)||void 0===o?void 0:o.length)&&e.jsx(a.SidebarPopup,{top:null!=B?B:void 0,menuList:null==H?void 0:H.children,onClickingPopupMenu:e=>{k&&k(e),P(void 0)},onMouseLeaveOnMenu:()=>P(void 0)}),(null===(s=null==w?void 0:w.children)||void 0===s?void 0:s.length)&&e.jsx(r.SimpleSidebar,{menuList:null==w?void 0:w.children,activeMenu:f,onMouseEnterOnMenu:()=>W(),onMouseLeaveOnMenu:()=>{W(),C(void 0)},left:b?92:88,postion:"fixed",header:w.displayName,theme:"brand",router:m,showAccessUpgradePanel:w.showAccessUpgradePanel,onMenuClick:(e,i)=>{L(e),x(w),C(void 0),P(void 0),i&&h(e)},onUpgrade:y,top:b&&I||0,isNewSidebar:b})]})]},n)})),"number"==typeof n.onboardingPercentage&&e.jsx(d.SibeBarMenuItem,{children:e.jsx("div",Object.assign({className:"main--sidebar"},{children:e.jsx("div",Object.assign({id:"bik-onboarding__checklist",className:"sidebar-menu-item "+(0===A?"sticky-menu":1===A?"sticky-menu-int":"sticky-menu-three")},{children:e.jsx(o.default,{percentage:n.onboardingPercentage,width:48})}))}))})]}))]})};

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

@@ -0,0 +1,110 @@
+/// <reference types="react" />
+export declare const GlobalContainer: 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 LoaderWrapper: 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 LoadingMessageWrapper: 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 BikLayoutContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    type?: "overflow-within" | "overflow-body" | undefined;
+    backgroundColor?: string | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BikHeaderWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | 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;
+}, 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;
+}, 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 & {
+    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;
+} & {
+    isDropdownOpen: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const UserNameTitleSmall: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const UserAvatarContainer: 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 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;
+}, 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;
+} & {
+    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;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledBodyCaption: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    isAvailable: boolean;
+}, {}, {}>;
+export declare const FeatureModalContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    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>, {}>;