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

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

@@ -0,0 +1,53 @@
+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 };

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

@@ -0,0 +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;

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

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("./AvatarHelper.js"),t=require("../../constants/Theme.js");function A(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=A(e).default.div`
+	width: ${e=>r.AVATAR_SIZE_MAP[e.size]+"px"};
+	height: ${e=>r.AVATAR_SIZE_MAP[e.size]+"px"};
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: ${e=>e.type===r.AVATAR_TYPES.IMAGE?"null":e.background===r.AVATAR_BACKGROUND.LIGHT?t.COLORS.background.base:e.background===r.AVATAR_BACKGROUND.WHITE?t.COLORS.surface.standard:t.COLORS.background.inverse};
+	border: ${e=>e.background===r.AVATAR_BACKGROUND.LIGHT||e.background===r.AVATAR_BACKGROUND.WHITE?"1px solid "+t.COLORS.stroke.primary:0};
+	border-radius: 50%;
+`;exports.AvatarStyle=a;

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

@@ -0,0 +1,24 @@
+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 };

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

@@ -0,0 +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;

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

@@ -0,0 +1,19 @@
+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 };

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

@@ -0,0 +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,{})]})};

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

@@ -0,0 +1,27 @@
+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 };

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

@@ -0,0 +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})})]})})};

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

@@ -0,0 +1,14 @@
+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 };

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

@@ -0,0 +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"})]})]})]})})]})};

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

@@ -0,0 +1,37 @@
+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 };

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

@@ -0,0 +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})})})})]})]})};

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

@@ -0,0 +1,366 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@emotion/styled"),t=require("react-bootstrap"),o=require("../../constants/Theme.js"),r=require("../../constants/zindex.js"),i=require("../TypographyStyle.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(e);a.default.div`
+	.global-container {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		width: 100%;
+	}
+	.component-container {
+		flex: 1 1 0%;
+	}
+`;const d=a.default.div`
+	width: 100%;
+	height: 100vh;
+	margin: 0;
+	background-color: rgba(0, 0, 0, 0.6);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	align-content: center;
+	.inner {
+		width: 100%;
+		height: 100vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 40px;
+		background-color: ${o.DEFAULT_THEME.colorsV2.surface.standard};
+		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
+		border-radius: 4px;
+		flex-direction: column;
+	}
+
+	.loader {
+		width: 48px;
+		height: 48px;
+		border: 5px solid ${o.DEFAULT_THEME.colorsV2.stroke.brand};
+		border-bottom-color: transparent;
+		border-radius: 50%;
+		display: inline-block;
+		box-sizing: border-box;
+		animation: rotation 1s linear infinite;
+	}
+
+	@keyframes rotation {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+`,l=a.default.div`
+	margin-top: 16px;
+`,p=a.default.div`
+	display: flex;
+	flex-direction: row;
+	${e=>"overflow-within"===e.type?"\n      flex-grow: 0 !important;\n      flex-shrink: 0 !important;\n      flex-basis: calc(100vh - 56px) !important;\n      overflow: scroll;\n    ":"flex: 1;"}
+	background-color: ${e=>e.backgroundColor??o.DEFAULT_THEME.colorsV2.surface.hovered};
+	.pd-24 {
+		padding: 24px;
+	}
+	.inner-wrapper {
+		width: 100%;
+	}
+	.disabled--wrapper {
+		position: fixed;
+		opacity: 0.5;
+		z-index: 4;
+		height: 500vh;
+		width: 100%;
+		background-color: ${o.DEFAULT_THEME.colorsV2.surface.hovered};
+	}
+`,s=a.default.div`
+	position: sticky;
+	top: 0;
+	z-index: 6;
+`,c=a.default.div`
+	background-color: ${o.DEFAULT_THEME.colorsV2.surface.standard};
+	border-bottom: 0.5px solid #e0e0e0;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	height: 56px;
+	border-bottom-width: 0.5px;
+	border-color: ${o.DEFAULT_THEME.colorsV2.background.inactive};
+	padding: 16px;
+	.cursor {
+		cursor: pointer;
+	}
+	.brand {
+		color: ${o.DEFAULT_THEME.colorsV2.stroke.brand};
+	}
+	.row--flex {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 8px;
+	}
+`,x=a.default.div`
+	z-index: 1;
+	padding-top: 16px;
+	padding: 8px;
+	display: flex;
+	flex-direction: column;
+	width: 291px;
+	.divider {
+		border: 1px solid ${o.DEFAULT_THEME.colorsV2.background.inactive};
+		margin: 0px 4px;
+	}
+	.logout--container {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		padding: 8px;
+		gap: 8px;
+		border-radius: 8px;
+		cursor: pointer;
+		margin-top: 10px;
+		&:hover {
+			background-color: ${o.DEFAULT_THEME.colorsV2.background.negative.light};
+		}
+	}
+`,f=a.default(t.Dropdown.Toggle)`
+	border-radius: 4px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	padding: 6px 8px;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 20px;
+   .inner
+`,g=a.default.div`
+	display: flex;
+	flex-direction: row;
+	gap: 0px 8px;
+	justify-content: center;
+	align-items: center;
+	border-radius: 50%;
+	padding: 6px;
+	background-color: ${e=>e.isDropdownOpen&&o.DEFAULT_THEME.colorsV2.background.brandLight};
+	&:hover {
+		background-color: ${e=>e.isDropdownOpen?o.DEFAULT_THEME.colorsV2.background.brandLight:o.DEFAULT_THEME.colorsV2.surface.hovered};
+	}
+`,u=a.default(i.TitleSmall)`
+	white-space: nowrap;
+	max-width: 161px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+`,b=a.default.div`
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	.avatar--container {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		background-color: ${o.DEFAULT_THEME.colorsV2.background.inverse};
+		border-radius: 50%;
+		width: 32px;
+		height: 32px;
+	}
+	img {
+		object-fit: contain;
+		height: 100%;
+		width: 100%;
+	}
+`,h=a.default(t.Tooltip)`
+	.tooltip-inner {
+		background-color: ${o.DEFAULT_THEME.colorsV2.surface.standard};
+		box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
+	}
+	.tooltip-arrow::before {
+		display: none;
+	}
+`,m=a.default.div`
+	background-color: ${o.DEFAULT_THEME.colorsV2.surface.standard};
+	min-width: 188px;
+	display: flex;
+	flex-direction: row;
+	border-top-right-radius: 4px;
+	border-top-left-radius: 4px;
+	margin-bottom: 8px;
+	padding: 8px;
+	border-radius: 8px;
+	cursor: pointer;
+	&:hover {
+		background: ${o.DEFAULT_THEME.colorsV2.surface.hovered};
+	}
+`,E=a.default.div`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	margin-top: 4px;
+	.availability--container {
+		border-width: 1px;
+		margin-right: 4px;
+		height: 6px;
+		width: 6px;
+		border-style: solid;
+		border-color: ${e=>e.isAvailable?o.DEFAULT_THEME.colorsV2.background.positive.vibrant:o.DEFAULT_THEME.colorsV2.content.secondary};
+		background-color: ${e=>e.isAvailable?o.DEFAULT_THEME.colorsV2.background.positive.vibrant:o.DEFAULT_THEME.colorsV2.surface.standard};
+		border-radius: 4px;
+	}
+`,w=a.default.div`
+	display: flex;
+	flex-direction: column;
+	margin-left: 16px;
+	justify-content: space-between;
+	justify-content: flex-start;
+`,y=a.default(i.BodyCaption)`
+	color: ${e=>e.isAvailable?o.DEFAULT_THEME.colorsV2.background.positive.vibrant:o.DEFAULT_THEME.colorsV2.content.secondary};
+`,v=a.default.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+	align-items: flex-end;
+	position: fixed;
+	bottom: 0;
+	width: fill-available;
+	height: ${e=>e.resetHeight?"fit-content":"650px"};
+	padding: 24px;
+	z-index: ${e=>e.zIndex?e.zIndex:r.ComponentZindex.FEATURE_MODAL};
+	background: linear-gradient(
+		180deg,
+		rgba(255, 255, 255, 0) 0%,
+		#ffffff 71.35%
+	);
+	filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.12));
+	.cross-button {
+		width: 40px;
+		height: 40px;
+		background-color: ${o.COLORS.scrim.standard};
+		border-radius: 50%;
+		position: fixed;
+		margin: auto;
+		bottom: 164px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 1px solid ${o.COLORS.stroke.primary};
+		cursor: pointer;
+		z-index: ${e=>e.zIndex?e.zIndex:5};
+	}
+`,T=a.default.div`
+	width: 100%;
+	height: 132px;
+	background: ${o.COLORS.background.inverse};
+	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
+	border-radius: 8px;
+
+	.mt-8 {
+		margin-top: 9px;
+	}
+	.content-layout {
+		padding: 24px;
+		gap: 8px;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.cta-buttons {
+		display: flex;
+		align-items: center;
+		gap: 16px;
+	}
+	.title-color {
+		color: ${o.COLORS.surface.subdued};
+	}
+	.subtitle-color {
+		color: ${o.COLORS.content.secondaryInverse};
+	}
+`,k=a.default.div`
+	width: fit-content;
+	border-radius: 8px;
+	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
+	position: relative;
+
+	.cross-container {
+		position: absolute;
+		display: flex;
+		width: 100%;
+		justify-content: flex-end;
+		padding: 12px;
+		cursor: pointer;
+	}
+	.demo-container {
+		padding: 18px 24px;
+		border: 1px solid var(--stroke-color-stroke-negative-light-alt, #ffced4);
+		background: var(--surface-color-background-negative-light, #ffebef);
+		gap: 8px;
+		height: 132px;
+		max-width: 494px;
+		border-radius: 8px;
+	}
+	.content-layout {
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+		justify-content: flex-start;
+		height: 220px;
+	}
+	.left-content {
+		width: 261px;
+		img {
+			height: 100%;
+			width: 100%;
+			object-fit: contain;
+		}
+	}
+	.right-content {
+		padding: 36px 24px;
+		height: 100%;
+		background-color: white;
+		> * {
+			margin-top: 8px;
+		}
+	}
+	.cta-button-container {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+		gap: 16px;
+		margin-top: 16px;
+	}
+`,L=a.default.div`
+	.top-feature-content {
+		max-height: 285px;
+		img {
+			height: 100%;
+			width: 100%;
+			object-fit: contain;
+		}
+	}
+	.mt-8 {
+		margin-top: 8px;
+	}
+	.bottom-feature-content {
+		padding: 36px 20px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 16px;
+	}
+	.cta-buttons {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		gap: 16px;
+		justify-content: center;
+		margin-top: 8px;
+	}
+	.title-class {
+		max-width: 500px;
+	}
+	.text-align-center {
+		text-align: center;
+	}
+`;exports.BikHeaderContainer=c,exports.BikHeaderWrapper=s,exports.BikLayoutContainer=p,exports.FeatureModalContainer=v,exports.FeatureModalV2Container=L,exports.InnerModalContainer=T,exports.LoaderWrapper=d,exports.LoadingMessageWrapper=l,exports.MenuInnerContainer=x,exports.ProfileDropdownInnerContainer=g,exports.ProfileDropdownToggleContainer=f,exports.RelativeModalContainer=k,exports.StatusContainer=E,exports.StyledBodyCaption=y,exports.StyledTooltip=h,exports.UserAvatarContainer=b,exports.UserInfoContainer=m,exports.UserNameTitleSmall=u,exports.UserStatusContainer=w;

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

@@ -0,0 +1,16 @@
+interface FeatureModalProps {
+    zIndex?: number;
+    disableCross?: boolean;
+    onClickingCross: () => void;
+    otherContent?: JSX.Element;
+    onUpgrade?: () => void;
+    primaryButtonText?: string;
+    title?: string;
+    subTitle?: string;
+    showBookADemo?: boolean;
+    demoLink?: string;
+}
+declare const FeatureModal: React.FC<FeatureModalProps>;
+
+export { FeatureModal };
+export type { FeatureModalProps };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react-dom"),r=require("../../constants/Theme.js"),s=require("../../assets/icons/cross.svg.js"),n=require("../button/Button.js"),o=require("../TypographyStyle.js"),i=require("./CommonStyles.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=a(t);exports.FeatureModal=t=>{const{zIndex:a,disableCross:l=!1,otherContent:u,onClickingCross:c,onUpgrade:h,title:j,subTitle:m,showBookADemo:x,demoLink:p,primaryButtonText:y}=t,b=j||"Upgrade to access this feature",g=m||"This feature is not included in the current plan. Upgrade to get access and use this feature.";return d.default.createPortal(e.jsxs(i.FeatureModalContainer,{zIndex:a,children:[!l&&e.jsx("div",{className:"cross-button",onClick:()=>c(),"aria-hidden":"true",children:e.jsx(s.default,{height:20,width:20,color:r.COLORS.surface.subdued})}),e.jsx(i.InnerModalContainer,{children:u?e.jsx(e.Fragment,{children:u}):e.jsxs("div",{className:"content-layout",children:[e.jsxs("div",{children:[e.jsx(o.TitleMedium,{className:"title-color",children:b}),e.jsx(o.BodyPrimary,{className:"title-color mt-8",children:g})]}),e.jsxs("div",{className:"cta-buttons",children:[x&&e.jsx(n.Button,{buttonText:"Book a demo",buttonType:"secondary",size:"large",inverse:!0,onClick:()=>{window.open(p,"_blank")}}),e.jsx(n.Button,{buttonText:y||"Upgrade plan",buttonType:"primary",size:"large",inverse:!0,onClick:()=>h?h():""})]})]})})]}),document.body)};

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

@@ -0,0 +1,15 @@
+interface FeatureModalV2Props {
+    zIndex?: number;
+    otherContent?: JSX.Element;
+    onUpgrade?: () => void;
+    primaryButtonText?: string;
+    title?: string;
+    subTitle?: string;
+    onClose?: () => void;
+    featureImage?: string;
+    id?: string;
+}
+declare const FeatureModalV2: React.FC<FeatureModalV2Props>;
+
+export { FeatureModalV2 };
+export type { FeatureModalV2Props };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-dom"),a=require("../../constants/Theme.js"),n=require("../button/Button.js"),o=require("../modals/styledModal.js"),s=require("../TypographyStyle.js"),i=require("./CommonStyles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(r);exports.FeatureModalV2=r=>{const{zIndex:l,otherContent:d,onUpgrade:u,title:y,subTitle:m,primaryButtonText:b,onClose:x,featureImage:p,id:g}=r,h=void 0===y?"Start your 14-day free trial to test your AI assistant on your website":y,j=m||"Test your assistant on your website and unlock many other features for free by starting your trial now. Don't worry, you can cancel anytime before the trial ends and no charges will be deducted.",f=p||"https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2Fb74e0e4c-9b3b-47ca-b0af-704b246e3c54?alt=media&token=bb48a397-1981-4c93-a835-eb4f400d5a60",[C,q]=t.useState(!0);return c.default.createPortal(e.jsx(o.StyledModal,{zIndex:l,open:C,onClose:function(){x&&x(),q(!1)},closeOnOutsideClick:!0,centralContainerStyles:{maxWidth:"568px"},innerModalId:g,children:e.jsx(i.FeatureModalV2Container,{children:d?e.jsx(e.Fragment,{children:d}):e.jsxs(t.Fragment,{children:[e.jsx("div",{className:"top-feature-content",children:e.jsx("img",{src:f,alt:"general-icon"})}),e.jsxs("div",{className:"bottom-feature-content",children:[e.jsx(s.TitleMedium,{className:"title-class text-align-center mt-8",style:{textAlign:"center"},children:h}),e.jsx(s.BodySecondary,{className:"text-align-center",style:{color:a.COLORS.content.secondary},children:j}),e.jsx("div",{className:"cta-buttons",children:e.jsx(n.Button,{buttonText:b||"Upgrade to growth plan",buttonType:"primary",size:"large",onClick:()=>{u&&u(),q(!1)}})})]})]})})}),document.body)};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../constants/Theme.js"),r=require("../TypographyStyle.js"),a=require("./CommonStyles.js");exports.PageLoader=o=>e.jsx(a.LoaderWrapper,{children:e.jsxs("div",{className:"inner",children:[e.jsx("span",{className:"loader"}),o.message&&e.jsxs(a.LoadingMessageWrapper,{children:[e.jsx(r.TitleMedium,{children:o.message}),e.jsx(r.BodyPrimary,{style:{color:s.DEFAULT_THEME.colorsV2.content.secondary,marginTop:8},children:o.subMessage})]})]})});

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

@@ -0,0 +1,15 @@
+interface ShowShopifyRestrictedModalProps {
+    containerType: 'demo_store' | 'connect_shopify';
+    handleButtonClick: (type: 'shopify' | 'demo' | 'close') => void;
+    connectShopifyDescription?: string;
+    demoDescription?: string;
+    zIndex?: number;
+    triggerPosition?: {
+        top: number;
+        left: number;
+    };
+}
+declare const ShowShopifyRestrictedModal: React.FC<ShowShopifyRestrictedModalProps>;
+
+export { ShowShopifyRestrictedModal };
+export type { ShowShopifyRestrictedModalProps };