@bikdotai/bik-component-library 0.0.795-beta.3 → 0.0.796-beta.0

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import { AVATAR_BACKGROUND, AVATAR_TYPES, SIZE } from "./AvatarHelper";
+import { AVATAR_BACKGROUND, AVATAR_TYPES, SIZE } from './AvatarHelper';
 export declare const AVATAR_SIZE_VS_ICON_SIZE_MAP: {
+    EXTRA_SMALL: number;
     SMALL: number;
     MEDIUM: number;
     INBOX: number;

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

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

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

@@ -4,6 +4,7 @@ export declare enum AVATAR_TYPES {
     ICON = "ICON"
 }
 export declare enum SIZE {
+    EXTRA_SMALL = "EXTRA_SMALL",
     SMALL = "SMALL",
     MEDIUM = "MEDIUM",
     LARGE = "LARGE",
@@ -15,6 +16,7 @@ export declare enum AVATAR_BACKGROUND {
     WHITE = "WHITE"
 }
 export declare const AVATAR_SIZE_MAP: {
+    EXTRA_SMALL: number;
     SMALL: number;
     MEDIUM: number;
     LARGE: number;

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

@@ -1 +1 @@
-var I,L,A;!function(I){I.IMAGE="IMAGE",I.INITIALS="INITIALS",I.ICON="ICON"}(I||(I={})),function(I){I.SMALL="SMALL",I.MEDIUM="MEDIUM",I.LARGE="LARGE",I.INBOX="INBOX"}(L||(L={})),function(I){I.LIGHT="LIGHT",I.DARK="DARK",I.WHITE="WHITE"}(A||(A={}));const M={[L.SMALL]:24,[L.MEDIUM]:40,[L.LARGE]:64,[L.INBOX]:30};export{A as AVATAR_BACKGROUND,M as AVATAR_SIZE_MAP,I as AVATAR_TYPES,L as SIZE};
+var I,L,A;!function(I){I.IMAGE="IMAGE",I.INITIALS="INITIALS",I.ICON="ICON"}(I||(I={})),function(I){I.EXTRA_SMALL="EXTRA_SMALL",I.SMALL="SMALL",I.MEDIUM="MEDIUM",I.LARGE="LARGE",I.INBOX="INBOX"}(L||(L={})),function(I){I.LIGHT="LIGHT",I.DARK="DARK",I.WHITE="WHITE"}(A||(A={}));const M={[L.EXTRA_SMALL]:16,[L.SMALL]:24,[L.MEDIUM]:40,[L.LARGE]:64,[L.INBOX]:30};export{A as AVATAR_BACKGROUND,M as AVATAR_SIZE_MAP,I as AVATAR_TYPES,L as SIZE};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Menu } from './SidebarV2.model';
+export interface MenuItemV2 {
+    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 BikSidebarV2Props {
+    logoSvg?: JSX.Element;
+    allMenuList: MenuItemV2[];
+    activeMainMenu: MenuItemV2;
+    activeSubMenu: Menu;
+    router: any;
+    onClickingMainMenu: (menu: MenuItemV2) => void;
+    onClickingSubMenu: (subMenu: Menu) => void;
+    onClickingAccessUpgradePanel?: () => void;
+    onClickingPopupMenuItem?: (menu: Menu) => void;
+    popupMinHeight?: number;
+    isNewSidebar?: boolean;
+    onboardingPercentage?: number;
+    menuStyle?: React.CSSProperties;
+}
+export declare const BikSidebarV2: React.FC<BikSidebarV2Props>;

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

@@ -0,0 +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 t from"../../../assets/icons/locked.svg.js";import{useState as l,useRef as s,useMemo as r,useEffect as d,useCallback as c,Fragment as u}from"react";import a from"../../progress-bar/CircularProgressBar.js";import{COLORS as v}from"../../../constants/Theme.js";import{NavigationHyperlink as p}from"../../navigation-hyperlink/NavigationHyperlink.js";import{SidebarV2Popup as g}from"./SidebarV2Popup.js";import{SideBarV2Container as h,MainSideBarV2MenuWrapper as m,SibeBarV2MenuItem as y,SidebarMainMenu as k,SidebarMenuItemInner as M,SidebarNewTag as b,SidebarLockedChannel as L,SidebarMenuItemContainer as S,SidebarMenuItemText as w}from"./SidebarV2Styles.js";import{SimpleSidebarV2 as j}from"./SimpleSidebarV2.js";const f=t=>{const{logoSvg:v,allMenuList:b,activeMainMenu:L,activeSubMenu:S,router:w,onClickingMainMenu:f,onClickingSubMenu:C,onClickingAccessUpgradePanel:I,onClickingPopupMenuItem:N,popupMinHeight:O,isNewSidebar:P,menuStyle:A}=t,[B,E]=l(L),[F,_]=l(),[x,D]=l(S),[T,U]=l(!1),[R,V]=l(),[z,K]=l(),[W,q]=l(),G=s(null),J=r((()=>b.filter((e=>e.is2ndLastSticky||e.isLastSticky)).length),[b]);d((()=>{E(L)}),[L]),d((()=>{D(S)}),[S]);const Q=c((e=>{var i;"popup"!==(null==e?void 0:e.layout)&&(V(void 0),_(void 0),U(!0),E(e),e.path||f(e),(null===(i=null==e?void 0:e.children)||void 0===i?void 0:i.length)?D(null==e?void 0:e.children[0]):D({}),_(void 0),setTimeout((()=>{U(!1)}),1e3))}),[f]),X=c((e=>{var i,n;if($(),_(void 0),V(void 0),"popup"==(null==e?void 0:e.layout)){const i=ie();i&&K(i),V(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 i=Y(o,e);q(i)}_(e)}}),[]),Y=(e,i)=>{const n=e.getBoundingClientRect();let o=n.top;if(window.innerHeight<=768)return o;if(i.isLastSticky||i.is2ndLastSticky){const e=window.innerHeight-n.bottom;o=n.top+e-200}return o};d((()=>{const e=()=>{const e=ie();e&&K(e),Z()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const Z=()=>{const e=document.getElementById("_sub-menu"),i=null==e?void 0:e.getBoundingClientRect().height;i&&q(window.innerHeight-i)},$=c((()=>{G.current&&(clearTimeout(G.current),G.current=null)}),[]),ee=c((()=>{$(),G.current=setTimeout((()=>{_(void 0),V(void 0)}),150)}),[$]),ie=()=>{var e,i;if(R){const n=(null===(i=null===(e=R.displayName)||void 0===e?void 0:e.split(" "))||void 0===i?void 0:i.join(""))+"_sub"||R.key.toString()+"_sub",o=document.getElementById(n);if(o){const e=o.getBoundingClientRect();let i=e.top;const n=null!=O?O:320;return e.bottom+n>window.innerHeight&&(i-=e.bottom+n-window.innerHeight),i}return null}};return e(h,{children:[i("div",Object.assign({className:"bik-header-logo",onClick:()=>{},onKeyDown:()=>{},"aria-hidden":"true"},{children:v||i(o,{})})),e(m,Object.assign({style:A},{children:[null==b?void 0:b.map(((o,t)=>{var l,s;return e(u,{children:[o.path?i(p,Object.assign({href:o.path,router:w},{children:i(H,{option:o,index:t,onClickMainMenuLogic:Q,setHandleHoverForFullLayout:X,isDisabled:T,setHoveredComp:_,setPopupMenu:V,mainActiveMenu:B,hoveredComp:F,popupMenu:R,onMouseLeaveMenuItem:ee})})):i(H,{option:o,index:t,onClickMainMenuLogic:Q,setHandleHoverForFullLayout:X,isDisabled:T,setHoveredComp:_,setPopupMenu:V,mainActiveMenu:B,hoveredComp:F,popupMenu:R,onMouseLeaveMenuItem:ee}),e(n,{children:["popup"===o.layout&&(null===(l=null==R?void 0:R.children)||void 0===l?void 0:l.length)&&i(g,{top:null!=z?z:void 0,menuList:null==R?void 0:R.children,onClickingPopupMenu:e=>{N&&N(e),V(void 0)},onMouseEnterOnMenu:$,onMouseLeaveOnMenu:ee}),(null===(s=null==F?void 0:F.children)||void 0===s?void 0:s.length)&&i(j,{menuList:null==F?void 0:F.children,width:200,activeMenu:x,onMouseEnterOnMenu:$,onMouseLeaveOnMenu:()=>_(void 0),left:78,postion:"fixed",header:F.displayName,theme:"brand",router:w,showAccessUpgradePanel:F.showAccessUpgradePanel,onMenuClick:(e,i)=>{D(e),E(F),_(void 0),V(void 0),i&&C(e)},onUpgrade:I,top:P&&W||0,isNewSidebar:P})]})]},t)})),"number"==typeof t.onboardingPercentage&&i(y,{children:i(k,{children:i(M,Object.assign({id:"bik-onboarding__checklist",stickyBottom:0===J?0:1===J?64:128},{children:i(a,{percentage:t.onboardingPercentage,width:48})}))})})]}))]})},C=e=>{const{icon:o,isActive:t,activeStateIcon:l}=e,s=o;return i(n,{children:t?i(l,{width:16,height:16,color:v.content.primaryInverse}):i(s,{width:16,height:16,color:v.content.secondaryInverse})})},H=n=>{let{option:o,index:l,onClickMainMenuLogic:s,setHandleHoverForFullLayout:r,isDisabled:d,mainActiveMenu:c,hoveredComp:u,popupMenu:a,onMouseLeaveMenuItem:v}=n;var p,g,h,m,j,f;return i(y,{children:e(k,Object.assign({id:(null===(g=null===(p=o.displayName)||void 0===p?void 0:p.split(" "))||void 0===g?void 0:g.join(""))||o.key.toString(),onClick:()=>!d&&s(o),onMouseEnter:()=>{r(o)},onMouseLeave:v,onFocus:()=>{},"aria-hidden":"true"},{children:[o.isNew&&i(b,Object.assign({isLastSticky:o.isLastSticky},{children:"NEW"})),o.isLocked&&i(L,Object.assign({isLastSticky:o.isLastSticky,is2ndLastSticky:o.is2ndLastSticky},{children:i(t,{height:16,width:16})})),e(M,Object.assign({id:(null===(m=null===(h=o.displayName)||void 0===h?void 0:h.split(" "))||void 0===m?void 0:m.join(""))+"_sub"||o.key.toString()+"_sub",isActive:(null==c?void 0:c.key)===o.key,isLastSticky:o.isLastSticky,is2ndLastSticky:o.is2ndLastSticky,isHovered:o.key===(null==u?void 0:u.key),isNew:o.isNew},{children:[i(C,{icon:o.icon,isActive:o.key==(null==c?void 0:c.key),activeStateIcon:null!==(j=o.activeIcon)&&void 0!==j?j:{},hoverStateIcon:null!==(f=o.hoverIcon)&&void 0!==f?f:{},isHovered:o.key==(null==u?void 0:u.key)||o.key==(null==a?void 0:a.key)}),i(S,{children:i(w,Object.assign({isActive:(null==o?void 0:o.key)===(null==c?void 0:c.key)},{children:o.displayName}))})]}),l)]}),l)})};export{f as BikSidebarV2};

package/dist/esm/components/bik-layout/BikSidebarV2/SidebarV2.model.d.ts

@@ -0,0 +1,27 @@
+export interface Menu {
+    key: string | number;
+    displayName: string;
+    description?: string;
+    path?: string;
+    page?: string;
+    isNew?: string;
+}
+export type SidebarV2Theme = 'brand' | 'white';
+export interface SimpleSidebarV2Props {
+    menuList: Menu[];
+    activeMenu: Menu;
+    theme: SidebarV2Theme;
+    showAccessUpgradePanel?: boolean;
+    header?: string;
+    width?: number;
+    zIndex?: number;
+    left?: number;
+    postion?: 'fixed' | 'sticky';
+    top?: number;
+    router: any;
+    onMouseLeaveOnMenu?: () => void;
+    onMouseEnterOnMenu?: () => void;
+    onMenuClick: (menuSelected: Menu, reDirect?: boolean) => void;
+    onUpgrade?: () => void;
+    isNewSidebar?: boolean;
+}

package/dist/esm/components/bik-layout/BikSidebarV2/SidebarV2Popup.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Menu } from './SidebarV2.model';
+export interface SidebarV2PopupI {
+    menuList: Menu[];
+    width?: number;
+    zIndex?: number;
+    left?: number;
+    top?: number;
+    onMouseLeaveOnMenu?: () => void;
+    onMouseEnterOnMenu?: () => void;
+    onClickingPopupMenu: (menuSelected: Menu, reDirect?: boolean) => void;
+}
+export declare const SidebarV2Popup: React.FC<SidebarV2PopupI>;

package/dist/esm/components/bik-layout/BikSidebarV2/SidebarV2Popup.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import{TitleRegular as s,BodySecondary as t}from"../../TypographyStyle.js";import{SidebarV2PopupContainer as o}from"./SidebarV2Styles.js";const i=i=>{const{top:r,menuList:l,zIndex:a,left:c,onMouseLeaveOnMenu:m,onMouseEnterOnMenu:u,onClickingPopupMenu:d}=i;return e(o,Object.assign({top:r,theme:"white",zIndex:a,left:null!=c?c:78,postion:"fixed"},{children:e("div",Object.assign({id:"_sub-menu",className:"sidebar-right-menu transform-class",onMouseEnter:u,onMouseLeave:m},{children:null==l?void 0:l.map(((o,i)=>n("div",Object.assign({className:"each-menu",style:{borderBottom:i==l.length-1?"none":void 0},onClick:()=>d(o)},{children:[e(s,Object.assign({style:{fontSize:14}},{children:o.displayName})),e(t,Object.assign({style:{fontSize:12}},{children:o.description}))]}),i)))}),"_sub-menu")}))};export{i as SidebarV2Popup};

package/dist/esm/components/bik-layout/BikSidebarV2/SidebarV2Styles.d.ts

@@ -0,0 +1,44 @@
+import { SidebarV2Theme } from './SidebarV2.model';
+export declare const SideBarV2Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MainSideBarV2MenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SibeBarV2MenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SidebarMainMenu: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SidebarNewTag: import("styled-components").StyledComponent<"div", any, {
+    isLastSticky?: boolean | undefined;
+}, never>;
+export declare const SidebarLockedChannel: import("styled-components").StyledComponent<"div", any, {
+    isLastSticky?: boolean | undefined;
+    is2ndLastSticky?: boolean | undefined;
+}, never>;
+export declare const SidebarMenuItemInner: import("styled-components").StyledComponent<"div", any, {
+    isActive?: boolean | undefined;
+    isHovered?: boolean | undefined;
+    isNew?: boolean | undefined;
+    isLastSticky?: boolean | undefined;
+    is2ndLastSticky?: boolean | undefined;
+    stickyBottom?: number | undefined;
+}, never>;
+export declare const SidebarMenuItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SidebarMenuItemText: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+} & {
+    isActive?: boolean | undefined;
+}, never>;
+export declare const SimpleSidebarV2Container: import("styled-components").StyledComponent<"div", any, {
+    postion?: "fixed" | "sticky" | undefined;
+    top?: number | undefined;
+    theme: SidebarV2Theme;
+    width?: number | undefined;
+    zIndex?: number | undefined;
+    left?: number | undefined;
+    isNewSidebar?: boolean | undefined;
+}, never>;
+export declare const SidebarV2PopupContainer: import("styled-components").StyledComponent<"div", any, {
+    postion?: "fixed" | "sticky" | undefined;
+    top?: number | undefined;
+    theme: SidebarV2Theme;
+    zIndex?: number | undefined;
+    left?: number | undefined;
+    bottom?: number | undefined;
+}, never>;

package/dist/esm/components/bik-layout/BikSidebarV2/SidebarV2Styles.js

@@ -0,0 +1,287 @@
+import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../TypographyStyle.js";import{COLORS as o,BASE_COLORS as r,FONTS as n}from"../../../constants/Theme.js";const d=e.div`
+	background-color: #28034e;
+	width: 72px;
+	justify-content: space-between;
+	position: sticky;
+	top: 0;
+	left: 0;
+	z-index: 10;
+	overflow-y: auto;
+	height: 100vh;
+
+	.bik-header-logo {
+		padding: 8px 8px 0 8px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		cursor: pointer;
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: container;
+		}
+	}
+`,a=e.div`
+	margin: 0px 0px 16px;
+	padding-bottom: 8px;
+`,p=e.div``,s=e.div`
+	padding: 0px 6px;
+	margin-bottom: 6px;
+	> * {
+		gap: 4px;
+	}
+`,b=e.div`
+	position: absolute;
+	right: 5px;
+	background: ${o.stroke.warning.vibrant} !important;
+	font-size: 7.7px;
+	font-family: 'Inter';
+	line-height: 10px;
+	padding: 2px 9.27px 2px 9.27px;
+	border-radius: 16px 16px 0px 16px;
+	background: ${o.background.inverse};
+	${e=>{let{isLastSticky:i}=e;return i&&t`
+			@media (min-height: 768px) {
+				bottom: 116px;
+				z-index: 1;
+			}
+		`}}
+`,x=e.div`
+	position: absolute;
+	right: 10px;
+	margin-top: -5px;
+	${e=>{let{isLastSticky:i}=e;return i&&t`
+			@media (min-height: 768px) {
+				bottom: 116px;
+				z-index: 1;
+			}
+		`}}
+	${e=>{let{is2ndLastSticky:i}=e;return i&&t`
+			@media (min-height: 768px) {
+				bottom: 48px;
+				z-index: 1;
+			}
+		`}}
+`,c=e.div`
+	display: flex;
+	flex-direction: column;
+	border-radius: 10px;
+	align-items: center;
+	justify-content: space-around;
+	cursor: pointer;
+	> * {
+		gap: 10px;
+	}
+	padding: 8px;
+
+	${e=>{let{isNew:i}=e;return i&&t`
+			padding-top: 14px;
+		`}}
+
+	${e=>{let{isActive:i}=e;return i&&t`
+			border-radius: 8px;
+			background-color: ${r.brand[850]};
+			color: ${o.content.primaryInverse};
+			box-shadow: inset 0 0 0 1px ${o.stroke.brandSubdued};
+		`}}
+
+	${e=>{let{isHovered:i}=e;return i&&t`
+			background: ${o.background.brandHovered};
+			border-radius: 8px;
+		`}}
+
+	${e=>{let{isActive:i,isHovered:o}=e;return i&&o&&t`
+			border-radius: 8px;
+			border: 1px solid ${r.brand[700]};
+			background-color: ${r.brand[800]};
+		`}}
+
+
+	${e=>{let{isLastSticky:i}=e;return i&&t`
+			@media (min-height: 768px) {
+				position: absolute;
+				bottom: 72px;
+				left: 6px;
+				right: 6px;
+			}
+		`}}
+
+	${e=>{let{is2ndLastSticky:i}=e;return i&&t`
+			@media (min-height: 768px) {
+				position: absolute;
+				bottom: 8px;
+				left: 6px;
+				right: 6px;
+			}
+		`}}
+
+	${e=>{let{stickyBottom:i}=e;return void 0!==i&&t`
+			@media (min-height: 768px) {
+				position: absolute;
+				bottom: ${i}px;
+				left: 6px;
+				right: 6px;
+			}
+		`}}
+`,l=e.div`
+	display: flex;
+	flex-direction: row;
+	cursor: pointer;
+`,u=e(i)`
+	user-select: none;
+	color: ${e=>{let{isActive:t}=e;return t?o.content.primaryInverse:o.content.secondaryInverse}};
+	margin-bottom: 0px;
+	text-align: center;
+`,g=e.div`
+	.transform-class {
+		position: relative;
+		animation: animatebottom 0.2s;
+		transition-timing-function: ease-out;
+	}
+	@keyframes animatebottom {
+		from {
+			opacity: 0;
+		}
+
+		to {
+			opacity: 1;
+		}
+	}
+	.sidebar-right-menu {
+		position: ${e=>e.postion?e.postion:"sticky"};
+		top: ${e=>e.top?e.top:0}px;
+		left: ${e=>e.left?e.left:0}px; //72
+		width: ${e=>e.width?e.width:240}px;
+		z-index: ${e=>e.zIndex?e.zIndex:2};
+		background-color: ${e=>"brand"==e.theme?o.background.inverse:o.surface.standard};
+		height: ${e=>e.isNewSidebar?"fit-content":"100vh"};
+		display: flex;
+		flex-direction: column;
+		padding: 4px;
+		border-radius: ${e=>e.isNewSidebar?"8px":""};
+
+		.sidebar-bridge {
+			position: absolute;
+			right: 100%;
+			top: 0;
+			width: 6px;
+			height: 100%;
+		}
+	}
+
+	.sub-child-menu {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		margin-bottom: ${e=>e.isNewSidebar?"":"8px"};
+		cursor: pointer;
+		background: ${e=>"brand"==e.theme?o.background.inverse:"transparent"};
+		border-radius: 4px;
+		.sub-child-text {
+			color: ${e=>"brand"==e.theme?o.surface.standard:""};
+			margin-bottom: 0px;
+			padding: 8px 12px;
+			font-size: ${n.caption.fontSize}px;
+			line-height: ${n.caption.lineHeight}px;
+			font-weight: ${n.caption.fontWeight};
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+		.sub-child-new-tag {
+			padding: 2px 9px 2px 9px;
+			border-radius: 16px;
+			background-color: rgba(254, 192, 45, 1);
+			font-family: Inter;
+			font-size: 7px;
+			font-weight: 600;
+			line-height: 10px;
+			color: rgba(40, 3, 78, 1);
+		}
+		.sub-child-active-text {
+			display: none;
+		}
+		.active-bold-weight {
+			font-weight: 600;
+			color: ${e=>e.isNewSidebar?o.background.warning.vibrant:""};
+		}
+		.sub-child-active-menu-style {
+			color: ${e=>e.isNewSidebar?o.background.warning.vibrant:""};
+		}
+	}
+	.sub-child-menu:hover {
+		background: ${e=>"brand"==e.theme?o.background.brandHovered:o.background.base};
+		border-radius: 4px;
+	}
+	.sub-child-active-menu {
+		background: ${e=>"brand"==e.theme?o.background.brandHovered:o.background.base};
+		border-radius: 4px;
+		border: ${e=>"brand"==e.theme?`1px solid ${o.stroke.brandSubdued}`:"none"};
+		.sub-child-active-text {
+			background: ${e=>"brand"==e.theme?o.stroke.brandSubdued:o.background.warning.vibrant};
+		}
+	}
+	.sub-child-active-menu:hover {
+		background: ${e=>"brand"==e.theme?o.background.inverseLight:o.background.base};
+		border-radius: 4px;
+		border: ${e=>"brand"==e.theme?`1px solid ${o.stroke.brandSubdued}`:"none"};
+		.sub-child-active-text {
+			background: ${e=>"brand"==e.theme?o.stroke.brandSubdued:o.background.warning.vibrant};
+		}
+	}
+	.sub-child-display-name {
+		padding: 14px 12px;
+		color: ${e=>"brand"==e.theme?o.content.secondaryInverse:o.text.secondary};
+	}
+	.lower-sticky-panel {
+		position: ${e=>e.isNewSidebar?"relative":"absolute"};
+		bottom: ${e=>e.isNewSidebar?"":"16px"};
+		margin-top: ${e=>e.isNewSidebar?"auto":""};
+		margin-bottom: ${e=>e.isNewSidebar?"16px":""};
+		.title-text {
+			padding: 8px 12px;
+			text-align: center;
+		}
+		.upgrade-button {
+			margin: auto;
+		}
+	}
+	.sidebar-skeleton {
+		padding: 8px;
+	}
+`,m=e.div`
+	.sidebar-right-menu {
+		border-radius: 8px;
+		border: 0.5px solid var(--stroke-color-stroke-primary, #e0e0e0);
+		box-shadow: 0px 0px 12px 0px rgba(222, 236, 255, 0.6);
+		position: ${e=>e.postion?e.postion:"sticky"};
+		top: ${e=>e.top?e.top:void 0}px;
+		bottom: 10px;
+		left: ${e=>e.left?e.left:0}px; //72
+		z-index: ${e=>e.zIndex?e.zIndex:2};
+		background-color: ${e=>"brand"==e.theme?"#381062":o.surface.standard};
+		display: flex;
+		flex-direction: column;
+		padding: 4px;
+		gap: 4px;
+		min-height: 100px;
+		overflow-y: auto;
+	}
+	.each-menu {
+		padding: 8px;
+		gap: 4px;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: flex-start;
+		border-bottom: 0.5px solid #e0e0e0;
+		cursor: pointer;
+		max-width: 320px;
+		&:hover {
+			background-color: ${o.background.base};
+			border-radius: 8px;
+		}
+	}
+`;export{a as MainSideBarV2MenuWrapper,p as SibeBarV2MenuItem,d as SideBarV2Container,x as SidebarLockedChannel,s as SidebarMainMenu,l as SidebarMenuItemContainer,c as SidebarMenuItemInner,u as SidebarMenuItemText,b as SidebarNewTag,m as SidebarV2PopupContainer,g as SimpleSidebarV2Container};

package/dist/esm/components/bik-layout/BikSidebarV2/SimpleSidebarV2.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SimpleSidebarV2Props } from './SidebarV2.model';
+export declare const SimpleSidebarV2: React.FC<SimpleSidebarV2Props>;

package/dist/esm/components/bik-layout/BikSidebarV2/SimpleSidebarV2.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as s}from"react";import{COLORS as n}from"../../../constants/Theme.js";import{Button as a}from"../../button/Button.js";import{NavigationHyperlink as t}from"../../navigation-hyperlink/NavigationHyperlink.js";import{BodyCaption as r,TitleSmall as l}from"../../TypographyStyle.js";import{SimpleSidebarV2Container as o}from"./SidebarV2Styles.js";const c=c=>{const{menuList:d,activeMenu:u,theme:m,showAccessUpgradePanel:p=!1,header:h,width:b,zIndex:g,left:v,postion:y,top:N,router:j,onMouseLeaveOnMenu:f,onMouseEnterOnMenu:k,onMenuClick:O,onUpgrade:w,isNewSidebar:x}=c,[M,S]=s(u),T=(s,n)=>i("div",Object.assign({className:"sub-child-menu  "+((null==M?void 0:M.key)==(null==s?void 0:s.key)?"sub-child-active-menu":""),onClick:()=>{S(s),O(s,!s.page)},"aria-hidden":"true"},{children:[e("span",{className:(null==M?void 0:M.key)==(null==s?void 0:s.key)&&"brand"==m?"sub-child-active-text":""}),e(r,Object.assign({className:"sub-child-text "+((null==M?void 0:M.key)==(null==s?void 0:s.key)&&"white"==m?"active-bold-weight":"")},{children:null==s?void 0:s.displayName})),s.isNew&&e("div",Object.assign({className:"sub-child-new-tag"},{children:"NEW"}))]}),n);return e(o,Object.assign({width:b,zIndex:g,left:v,theme:m,postion:y,top:N,isNewSidebar:x},{children:i("div",Object.assign({id:"_sub-menu",className:"sidebar-right-menu transform-class",onMouseLeave:f,onMouseEnter:k},{children:[e("div",{className:"sidebar-bridge"}),i("div",{children:[!x&&e(r,Object.assign({className:"sub-child-display-name"},{children:h})),null==d?void 0:d.map(((i,s)=>i.page?e(t,Object.assign({href:i.page,router:j},{children:T(i,s)})):T(i,s)))]}),p&&i("div",Object.assign({className:"lower-sticky-panel"},{children:[e(l,Object.assign({className:"title-text",style:{color:n.surface.standard}},{children:"Upgrade plan to access this feature."})),e(a,{className:"upgrade-button",buttonText:"Upgrade plan",buttonType:"primary",size:"small",inverse:!0,onClick:()=>w?w():""})]}))]}),"_sub-menu")}))};export{c as SimpleSidebarV2};

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

@@ -3,6 +3,8 @@ export * from './BikLayout';
 export * from './BikProfile';
 export * from './SimpleSidebar';
 export * from './BikSidebar';
+export * from './BikSidebarV2/BikSidebarV2';
+export * from './BikSidebarV2/SidebarV2.model';
 export * from './FeatureModal';
 export * from './SidebarSkeleton';
 export * from './ShowShopifyRestrictedModal';

package/dist/esm/components/button/Button.styled.d.ts

@@ -10,7 +10,7 @@ export declare const Button: import("@emotion/styled").StyledComponent<{
     inverse?: boolean | undefined;
     disabled?: boolean | undefined;
     matchParentWidth?: boolean | undefined;
-    version?: "1.0" | "2.0" | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
     darkMode?: boolean | undefined;
     activated?: boolean | undefined;
     error?: boolean | undefined;

package/dist/esm/components/button/model.d.ts

@@ -66,7 +66,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      */
     matchParentWidth?: boolean;
     subtitle?: string;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
     darkMode?: boolean;
     activated?: boolean;
     error?: boolean;

package/dist/esm/components/button/themes.d.ts

@@ -8,7 +8,7 @@ export declare const GetButtonTextComponent: (size: Size, type: Type, disabled?:
     color?: string | undefined;
 }, never>;
 export declare const getBorderColor: (type: Type, inverse?: boolean, error?: boolean) => string;
-export declare const getBorder: (version: '1.0' | '2.0', type: Type, size: Size, inverse?: boolean, error?: boolean) => string;
+export declare const getBorder: (version: '1.0' | '2.0' | '3.0', type: Type, size: Size, inverse?: boolean, error?: boolean) => string;
 export declare const getLinearGradientValue: (size: Size) => string;
 /**
  * Adjusts the brightness of a given hex color by a specified percentage.

package/dist/esm/components/carousel-preview/CarouselPreview.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import o from"react";import l from"../../assets/icons/aiContentIcon.svg.js";import{AiContentBadge as t}from"../template-preview/TemplatePreview.styled.js";import s from"react-slick";import{Container as i,CarouselSlickContainer as n}from"./CarouselPreview.style.js";import a from"./CarouselPreviewCard.js";import{useTemplateModalContext as d}from"../template-context-mapper/context/templateModalContext.js";import{determineCardIndex as c,isRCSChannel as m}from"../template-preview/helpers/templateMiscHelper.js";import{RCSCarousalContainer as u}from"../template-preview/RCS/RCSPreview.styled.js";import{CustomCarouselRightArrow as p,CustomCarouselLeftArrow as v}from"./CustomCarouselArrows.js";const w=o.forwardRef((o=>{let{channel:s,template:n,isPreview:p,removeBottomBorder:v,borderRadius:w,showArrows:C,hideBorder:f,showSampleValues:P}=o;var g,j;const{sliderRef:x,selectedCarouselIndex:I,cardCount:b,setIsCarouselHovered:R,cardIndex:S,showVariablePicker:A}=d(),V=-1==S?c(s):S,B=null===(j=null===(g=null==n?void 0:n.components)||void 0===g?void 0:g[V])||void 0===j?void 0:j.cards,T=(null==B?void 0:B.length)?e(h,{cards:B,cardCount:null!=b?b:0,selectedCarouselIndex:null!=I?I:-1,sliderRef:x,isPreview:p,showArrows:C,channel:s,template:n,setIsCarouselHovered:R,showSampleValues:!!P,showVariablePicker:A}):null;return m(s)?e(u,Object.assign({borderRadius:w},{children:T})):r(i,Object.assign({removeBottomBorder:v,borderRadius:w,hideBorder:f},{children:[(!!(null==n?void 0:n.aiContentConfigId)||!!(null==n?void 0:n.isAiGenerated))&&e(t,{children:e(l,{width:48,height:48})}),e(a,{channel:s,currentTemplate:n,carouselCardIndex:-1,isPreview:p,width:"77%"}),T]}))})),h=r=>{let{cards:o,cardCount:l,selectedCarouselIndex:t,sliderRef:i,isPreview:d,showArrows:c,channel:m,template:u,setIsCarouselHovered:w,showSampleValues:h,showVariablePicker:C}=r;return e(n,Object.assign({cardCount:l,selectedCarouselIndex:t,onMouseEnter:()=>!C&&(null==w?void 0:w(!0)),onMouseLeave:()=>!C&&(null==w?void 0:w(!1))},{children:e(s,Object.assign({ref:i,swipeToSlide:!0,draggable:!0,swipe:!0,infinite:!1,focusOnSelect:!d,centerMode:!0,arrows:c,adaptiveHeight:!0,nextArrow:e(p,{isPreview:null!=d&&d}),prevArrow:e(v,{isPreview:null!=d&&d})},{children:null==o?void 0:o.map(((r,o)=>{var l,t;const s={components:r.components,mapping:null===(t=null===(l=null==u?void 0:u.mapping)||void 0===l?void 0:l.cards)||void 0===t?void 0:t[o],content:null==u?void 0:u.content,templateType:null==u?void 0:u.templateType};return e(a,{channel:m,currentTemplate:s,carouselCardIndex:o,isPreview:d,width:"100%",showSampleValues:h},o)}))}))}))};export{w as CarouselPreview};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import o from"react";import l from"react-slick";import{Container as t,CarouselSlickContainer as s}from"./CarouselPreview.style.js";import i from"./CarouselPreviewCard.js";import{useTemplateModalContext as a}from"../template-context-mapper/context/templateModalContext.js";import{determineCardIndex as n,isRCSChannel as d}from"../template-preview/helpers/templateMiscHelper.js";import{RCSCarousalContainer as c}from"../template-preview/RCS/RCSPreview.styled.js";import{CustomCarouselRightArrow as u,CustomCarouselLeftArrow as m}from"./CustomCarouselArrows.js";const p=o.forwardRef((o=>{let{channel:l,template:s,isPreview:u,removeBottomBorder:m,borderRadius:p,showArrows:w,hideBorder:h,showSampleValues:C}=o;var f,x;const{sliderRef:P,selectedCarouselIndex:b,cardCount:j,setIsCarouselHovered:g,cardIndex:I,showVariablePicker:R}=a(),S=-1==I?n(l):I,V=null===(x=null===(f=null==s?void 0:s.components)||void 0===f?void 0:f[S])||void 0===x?void 0:x.cards,A=(null==V?void 0:V.length)?e(v,{cards:V,cardCount:null!=j?j:0,selectedCarouselIndex:null!=b?b:-1,sliderRef:P,isPreview:u,showArrows:w,channel:l,template:s,setIsCarouselHovered:g,showSampleValues:!!C,showVariablePicker:R}):null;return d(l)?e(c,Object.assign({borderRadius:p},{children:A})):r(t,Object.assign({removeBottomBorder:m,borderRadius:p,hideBorder:h},{children:[e(i,{channel:l,currentTemplate:s,carouselCardIndex:-1,isPreview:u,width:"77%"}),A]}))})),v=r=>{let{cards:o,cardCount:t,selectedCarouselIndex:a,sliderRef:n,isPreview:d,showArrows:c,channel:p,template:v,setIsCarouselHovered:w,showSampleValues:h,showVariablePicker:C}=r;return e(s,Object.assign({cardCount:t,selectedCarouselIndex:a,onMouseEnter:()=>!C&&(null==w?void 0:w(!0)),onMouseLeave:()=>!C&&(null==w?void 0:w(!1))},{children:e(l,Object.assign({ref:n,swipeToSlide:!0,draggable:!0,swipe:!0,infinite:!1,focusOnSelect:!d,centerMode:!0,arrows:c,adaptiveHeight:!0,nextArrow:e(u,{isPreview:null!=d&&d}),prevArrow:e(m,{isPreview:null!=d&&d})},{children:null==o?void 0:o.map(((r,o)=>{var l,t;const s={components:r.components,mapping:null===(t=null===(l=null==v?void 0:v.mapping)||void 0===l?void 0:l.cards)||void 0===t?void 0:t[o],content:null==v?void 0:v.content,templateType:null==v?void 0:v.templateType};return e(i,{channel:p,currentTemplate:s,carouselCardIndex:o,isPreview:d,width:"100%",showSampleValues:h},o)}))}))}))};export{p as CarouselPreview};

package/dist/esm/components/country-code-picker/CountryCodePicker.d.ts

@@ -2,7 +2,7 @@ import { Placement, PositioningStrategy } from '@popperjs/core';
 import React from 'react';
 import { CountryCode } from "./CountryCodePicker.modal";
 export declare const CountryCodePicker: React.FC<{
-    version: '1.0' | '2.0';
+    version: '1.0' | '2.0' | '3.0';
     onCountrySelect: (country: CountryCode) => void;
     selectedCountry: CountryCode;
     popoverWidth?: string;

package/dist/esm/components/country-code-picker/CountryPicker.d.ts

@@ -8,7 +8,7 @@ export interface CountryPickerProps {
     /**
      * Version of the dropdown popover to use
      */
-    version: '1.0' | '2.0';
+    version: '1.0' | '2.0' | '3.0';
     /**
      * Callback function when a country is selected
      */

package/dist/esm/components/dropdown/Dropdown.js

@@ -1 +1 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,Fragment as n,jsxs as t}from"react/jsx-runtime";import{useState as i,useRef as l,useEffect as r}from"react";import{COLORS as s}from"../../constants/Theme.js";import a from"../../assets/icons/chevronDown.svg.js";import{Input as d}from"../input/Input.js";import{InputStyleContext as c}from"../input/context/InputStyleProvider.js";import p from"./ChipInput.js";import{DropdownPopover as h}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as u}from"./OpenedDropdown/utils/iterationOnOptions.js";function v(){}const m=m=>{var g,f,w,b,x,{placeHolder:j,size:O,onSelect:I,defaultOptions:y,disabled:S,noErrorHint:H,placeHolderHeight:T,showPlaceholderWhenSelected:D=!1,inputStyle:E={},inputType:P="default",onDeleteChip:C,truncatedText:M,showLeadingIconInPlaceholder:W=!1,showTrailingIconPlaceholder:L=!1,showLabelsOnMoreHover:k=!1,value:z,showSelected:A=!1}=m,_=e(m,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected"]);const[N,U]=i(!1),[V,q]=i(!1),B=null!=O?O:"default",F=l(),[G,J]=i(null!=y?y:[]);r((()=>{var e;const o=[];null===(e=null==_?void 0:_.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&o.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&o.push(e)})),J([...o])}),[_.options]),r((()=>{y&&J([...y])}),[y]);const K=u(G),Q=D?j:null!==(g=null!=K?K:j)&&void 0!==g?g:"Select an option",R=_.buttonWidth,X=null!==(f=null!=R?R:_.width)&&void 0!==f?f:"100%",Y=null!==(w=_.dropdownWidth)&&void 0!==w?w:X;return o(n,{children:o(c.Provider,Object.assign({value:{InputWrapper:Object.assign(Object.assign(Object.assign({height:T||("x-small"===B?24:"small"===B?32:48),width:X},R?{maxWidth:R}:{}),{zIndex:1,cursor:"pointer",padding:"x-small"===B?"4px 8px":"6px 8px",backgroundColor:A&&void 0!==z?s.background.positive.light:V?"#E0E0E0":"#ffffff",transition:"background-color 0.3s ease"}),E),input:{minHeight:"100%",maxWidth:"100%",color:A&&void 0!==z?s.content.positive:"inherit"}}},{children:o("div",Object.assign({onMouseEnter:()=>q(!0),onMouseLeave:()=>q(!1),style:_.width?{width:_.width}:void 0},{children:t(h,Object.assign({"data-test":_["data-test"],ref:F,onSelect:function(e){Array.isArray(e)?J([...e]):J([e]),null==I||I(e)},disabled:S,onDropdownVisbilityChange:e=>U(e)},_,{width:Y},{children:["default"==P&&o(d,{version:_.version,noErrorHint:H,state:S?"disabled":"none",value:void 0===z?Q:z,errorMessage:_.error,variant:B,placeholder:null!=j?j:"Select an option",onChangeText:v,leftIcon:W&&(null===(b=G[0])||void 0===b?void 0:b.leadingIcon)?{icon:()=>{var e;return o(n,{children:null===(e=G[0])||void 0===e?void 0:e.leadingIcon})}}:void 0,rightIcon:{icon:()=>{var e;return t("div",Object.assign({style:{display:"flex"}},{children:[L&&(null===(e=G[0])||void 0===e?void 0:e.trailingIcon),o(a,{style:{transform:N?"rotate(180deg)":"rotate(0deg)"},onClick:v,width:"x-small"===B?16:"small"===B?20:24,height:"x-small"===B?16:"small"===B?20:24,color:A?s.content.positive:s.content.primary})]}))}},truncateText:null==M||M}),"chip"==P&&o(p,{placeholder:null!=j?j:"Select options",chips:G,onDeleteChip:e=>{null==C||C(e)},errorMessage:_.error,isDropdownOpened:N,sizeToUse:B,containerStyle:{width:null!==(x=_.width)&&void 0!==x?x:"100%",cursor:"pointer"},showLabelsOnMoreHover:k})]}))}))}))})};m.displayName="Dropdown";export{m as Dropdown};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,Fragment as n,jsxs as t}from"react/jsx-runtime";import{useState as i,useRef as r,useEffect as l}from"react";import{COLORS as s,BASE_COLORS as a}from"../../constants/Theme.js";import d from"../../assets/icons/chevronDown.svg.js";import{Input as c}from"../input/Input.js";import{InputStyleContext as p}from"../input/context/InputStyleProvider.js";import h from"./ChipInput.js";import{DropdownPopover as u}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as v}from"./OpenedDropdown/utils/iterationOnOptions.js";function m(){}const g=g=>{var w,f,b,x,j,{placeHolder:O,size:I,onSelect:y,defaultOptions:S,disabled:H,noErrorHint:T,placeHolderHeight:D,showPlaceholderWhenSelected:P=!1,inputStyle:C={},inputType:M="default",onDeleteChip:W,truncatedText:E,showLeadingIconInPlaceholder:L=!1,showTrailingIconPlaceholder:k=!1,showLabelsOnMoreHover:z=!1,value:A,showSelected:_=!1}=g,N=e(g,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected"]);const[U,V]=i(!1),[q,B]=i(!1),F=null!=I?I:"default",G=r(),[J,K]=i(null!=S?S:[]);l((()=>{var e;const o=[];null===(e=null==N?void 0:N.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&o.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&o.push(e)})),K([...o])}),[N.options]),l((()=>{S&&K([...S])}),[S]);const Q=v(J),R=P?O:null!==(w=null!=Q?Q:O)&&void 0!==w?w:"Select an option",X=N.buttonWidth,Y=null!==(f=null!=X?X:N.width)&&void 0!==f?f:"100%",Z=null!==(b=N.dropdownWidth)&&void 0!==b?b:Y;return o(n,{children:o(p.Provider,Object.assign({value:{InputWrapper:Object.assign(Object.assign(Object.assign({height:D||("x-small"===F?24:"small"===F?32:48),width:Y},X?{maxWidth:X}:{}),{zIndex:1,cursor:"pointer",padding:"x-small"===F?"4px 8px":"6px 8px",backgroundColor:"3.0"===N.version?U||q?s.surface.hovered:s.surface.standard:_&&void 0!==A?a.positive[100]:q?s.background.inactive:s.surface.standard,transition:"background-color 0.3s ease"}),C),input:{minHeight:"100%",maxWidth:"100%",color:_&&void 0!==A?s.content.positive:"inherit"}}},{children:o("div",Object.assign({onMouseEnter:()=>B(!0),onMouseLeave:()=>B(!1),style:N.width?{width:N.width}:void 0},{children:t(u,Object.assign({"data-test":N["data-test"],ref:G,onSelect:function(e){Array.isArray(e)?K([...e]):K([e]),null==y||y(e)},disabled:H,onDropdownVisbilityChange:e=>V(e)},N,{width:Z},{children:["default"==M&&o(c,{version:N.version,noErrorHint:T,state:H?"disabled":"none",value:void 0===A?R:A,errorMessage:N.error,variant:F,placeholder:null!=O?O:"Select an option",onChangeText:m,leftIcon:L&&(null===(x=J[0])||void 0===x?void 0:x.leadingIcon)?{icon:()=>{var e;return o(n,{children:null===(e=J[0])||void 0===e?void 0:e.leadingIcon})}}:void 0,rightIcon:{icon:()=>{var e;return t("div",Object.assign({style:{display:"flex"}},{children:[k&&(null===(e=J[0])||void 0===e?void 0:e.trailingIcon),o(d,{style:{transform:U?"rotate(180deg)":"rotate(0deg)"},onClick:m,width:"x-small"===F?16:"small"===F?20:24,height:"x-small"===F?16:"small"===F?20:24,color:_?s.content.positive:s.content.primary})]}))}},truncateText:null==E||E}),"chip"==M&&o(h,{placeholder:null!=O?O:"Select options",chips:J,onDeleteChip:e=>{null==W||W(e)},errorMessage:N.error,isDropdownOpened:U,sizeToUse:F,containerStyle:{width:null!==(j=N.width)&&void 0!==j?j:"100%",cursor:"pointer"},showLabelsOnMoreHover:z})]}))}))}))})};g.displayName="Dropdown";export{g as Dropdown};

package/dist/esm/components/dropdown/DropdownPopover/index.js

@@ -1 +1 @@
-import{__rest as o}from"../../../_virtual/_tslib.js";import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import l,{useState as r,useRef as i,useImperativeHandle as s,useEffect as d}from"react";import{usePopper as a}from"react-popper";import{DropShadow as p}from"../../dropShadow/DropShadow.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{OverLapAbs as v,OpenDropdownContainer as u}from"../Common.styled.js";import{OpenedDropdown as m}from"../OpenedDropdown/components/OpennedDropdown.js";const w=l.forwardRef(((l,w)=>{var{children:h,onDropdownVisbilityChange:b,version:g="1.0",tooltipContent:f,tooltipDirection:O,showTooltipArrow:j,isChildLoading:D,forceOpen:y}=l,C=o(l,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen"]);const S=w,[R,x]=r(!1),[z,E]=r(null),[A,L]=r(null),T=i(null),{styles:I,attributes:M}=a(z,A,{placement:C.placement,strategy:C.strategy}),V=o=>{var e,t;"2.0"===g&&C.isMultiSelect&&o&&(null===(e=C.onSelect)||void 0===e||e.call(C,[...o])),x(!1),null===(t=null==C?void 0:C.onClose)||void 0===t||t.call(C)};s(S,(()=>({openDropdown:R})),[]),d((()=>{(null==S?void 0:S.current)&&(S.current.openDropdown=R)}),[R]),d((()=>{null==b||b(R)}),[R]);const _=()=>{var o;return n(t,{children:[n("div",Object.assign({style:{position:"relative"},ref:E},{children:[e(v,Object.assign({ref:T,allowEvents:C.allowEvents,disabled:C.disabled,onClick:o=>{var e;null===(e=C.onDropdownOpen)||void 0===e||e.call(C),R?(x(!1),o.preventDefault()):C.disabled||x(!0)},isChildLoading:D},{children:C.allowEvents?h:null})),C.allowEvents?null:h]})),(R||y)&&e(u,Object.assign({ref:L,style:Object.assign(Object.assign({},I.popper),{zIndex:null!==(o=C.dropdownZIndex)&&void 0!==o?o:3})},M.popper,{"data-test":C["data-test"]},{children:e(p,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:e(m,Object.assign({},C,{onSelect:o=>{var e;"2.0"===g&&C.isMultiSelect||(null===(e=C.onSelect)||void 0===e||e.call(C,o),x(!1))},onClose:V,version:g,headerRef:T,zeroState:null==C?void 0:C.zeroState,isDraggable:C.isDraggable,onOptionsReorder:C.onOptionsReorder}))}))}))]})};return e(t,{children:R||y||void 0===f?_():e(c,Object.assign({body:f,placement:O,hideArrow:!j},{children:e("div",Object.assign({"data-test":C["data-test"]},{children:_()}))}))})}));w.displayName="DropdownPopover";export{w as DropdownPopover};
+import{__rest as o}from"../../../_virtual/_tslib.js";import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import r,{useState as i,useRef as l,useImperativeHandle as s,useEffect as a}from"react";import{usePopper as d}from"react-popper";import{DropShadow as p}from"../../dropShadow/DropShadow.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{COLORS as u}from"../../../constants/Theme.js";import{OverLapAbs as v,OpenDropdownContainer as m}from"../Common.styled.js";import{OpenedDropdown as b}from"../OpenedDropdown/components/OpennedDropdown.js";const g=r.forwardRef(((r,g)=>{var{children:h,onDropdownVisbilityChange:w,version:f="1.0",tooltipContent:j,tooltipDirection:O,showTooltipArrow:D,isChildLoading:C,forceOpen:y}=r,S=o(r,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen"]);const x=g,[R,E]=i(!1),[z,L]=i(!1),[M,T]=i(null),[k,A]=i(null),I=l(null),{styles:V,attributes:_}=d(M,k,{placement:S.placement,strategy:S.strategy}),N=o=>{var e,n;"2.0"===f&&S.isMultiSelect&&o&&(null===(e=S.onSelect)||void 0===e||e.call(S,[...o])),E(!1),null===(n=null==S?void 0:S.onClose)||void 0===n||n.call(S)};s(x,(()=>({openDropdown:R})),[]),a((()=>{(null==x?void 0:x.current)&&(x.current.openDropdown=R)}),[R]),a((()=>{null==w||w(R)}),[R]);const P=()=>{var o;return t(n,{children:[t("div",Object.assign({style:Object.assign({position:"relative"},"3.0"===f&&{backgroundColor:R||z?u.surface.hovered:u.surface.standard,transition:"background-color 0.3s ease",borderRadius:4}),ref:T,onMouseEnter:"3.0"===f?()=>L(!0):void 0,onMouseLeave:"3.0"===f?()=>L(!1):void 0},{children:[e(v,Object.assign({ref:I,allowEvents:S.allowEvents,disabled:S.disabled,onClick:o=>{var e;null===(e=S.onDropdownOpen)||void 0===e||e.call(S),R?(E(!1),o.preventDefault()):S.disabled||E(!0)},isChildLoading:C},{children:S.allowEvents?h:null})),S.allowEvents?null:h]})),(R||y)&&e(m,Object.assign({ref:A,style:Object.assign(Object.assign({},V.popper),{zIndex:null!==(o=S.dropdownZIndex)&&void 0!==o?o:3})},_.popper,{"data-test":S["data-test"]},{children:e(p,Object.assign({level:"z2",position:"down",style:{borderRadius:"3.0"===f?4:8,boxShadow:"0 2px 8px 0 rgba(0, 0, 0, 0.12)"}},{children:e(b,Object.assign({},S,{onSelect:o=>{var e;"2.0"===f&&S.isMultiSelect||(null===(e=S.onSelect)||void 0===e||e.call(S,o),E(!1))},onClose:N,version:f,headerRef:I,zeroState:null==S?void 0:S.zeroState,isDraggable:S.isDraggable,onOptionsReorder:S.onOptionsReorder}))}))}))]})};return e(n,{children:R||y||void 0===j?P():e(c,Object.assign({body:j,placement:O,hideArrow:!D},{children:e("div",Object.assign({"data-test":S["data-test"]},{children:P()}))}))})}));g.displayName="DropdownPopover";export{g as DropdownPopover};