npm - @bikdotai/bik-component-library - Versions diffs - 0.0.821-beta.9 → 0.0.821 - Mend

@bikdotai/bik-component-library 0.0.821-beta.9 → 0.0.821

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (513) hide show

package/dist/esm/components/avatar/Avatar.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.styled.js","sources":["../../../../src/components/avatar/Avatar.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const AvatarStyle = styled.div<{\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\ttype: AVATAR_TYPES;\n}>`\n\twidth: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\theight: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground-color: ${(props) =>\n\t\tprops.type === AVATAR_TYPES.IMAGE\n\t\t\t? 'null'\n\t\t\t: props.background === AVATAR_BACKGROUND.LIGHT\n\t\t\t? COLORS.background.base\n\t\t\t: props.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? COLORS.surface.standard\n\t\t\t: ~~props.background === AVATAR_BACKGROUND.BRAND\n\t\t\t?~~ COLORS.background.~~brandLight\n\t\t\t: COLORS.background.~~inverse};\n\tborder: ${(props) =>\n\t\tprops.background === AVATAR_BACKGROUND.LIGHT \|\|\n\t\tprops.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? '1px solid ' + COLORS.stroke.primary\n\t\t\t: 0};\n\tborder-radius: 50%;\n`;\n"],"names":["AvatarStyle","styled","props","AVATAR_SIZE_MAP","AVATAR_TYPES","AVATAR_BACKGROUND","COLORS"],"mappings":";;;AASO,MAAMA,IAAcC,EAAO;AAAA,UAKxB,CAACC,MAAUC,EAAgBD,EAAM,IAAI,IAAI,IAAI;AAAA,WAC5C,CAACA,MAAUC,EAAgBD,EAAM,IAAI,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA,qBAInC,CAACA,MACpBA,EAAM,SAASE,EAAa,QACzB,SACAF,EAAM,eAAeG,EAAkB,QACvCC,EAAO,WAAW,OAClBJ,EAAM,eAAeG,EAAkB,QACvCC,EAAO,QAAQ,~~WACfJ~~,~~EAAM,eAAeG,EAAkB,QACvCC,~~EAAO,WAAW,~~aAClBA,EAAO,WAAW,~~OAAO;AAAA,WACnB,CAACJ,MACVA,EAAM,eAAeG,EAAkB,SACvCH,EAAM,eAAeG,EAAkB,QACpC,eAAeC,EAAO,OAAO,UAC7B,CAAC;AAAA;AAAA;"}
1	+ {"version":3,"file":"Avatar.styled.js","sources":["../../../../src/components/avatar/Avatar.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const AvatarStyle = styled.div<{\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\ttype: AVATAR_TYPES;\n}>`\n\twidth: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\theight: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground-color: ${(props) =>\n\t\tprops.type === AVATAR_TYPES.IMAGE\n\t\t\t? 'null'\n\t\t\t: props.background === AVATAR_BACKGROUND.LIGHT\n\t\t\t? COLORS.background.base\n\t\t\t: props.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? COLORS.surface.standard\n\t\t\t: COLORS.background.inverse};\n\tborder: ${(props) =>\n\t\tprops.background === AVATAR_BACKGROUND.LIGHT \|\|\n\t\tprops.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? '1px solid ' + COLORS.stroke.primary\n\t\t\t: 0};\n\tborder-radius: 50%;\n`;\n"],"names":["AvatarStyle","styled","props","AVATAR_SIZE_MAP","AVATAR_TYPES","AVATAR_BACKGROUND","COLORS"],"mappings":";;;AASO,MAAMA,IAAcC,EAAO;AAAA,UAKxB,CAACC,MAAUC,EAAgBD,EAAM,IAAI,IAAI,IAAI;AAAA,WAC5C,CAACA,MAAUC,EAAgBD,EAAM,IAAI,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA,qBAInC,CAACA,MACpBA,EAAM,SAASE,EAAa,QACzB,SACAF,EAAM,eAAeG,EAAkB,QACvCC,EAAO,WAAW,OAClBJ,EAAM,eAAeG,EAAkB,QACvCC,EAAO,QAAQ,WACfA,EAAO,WAAW,OAAO;AAAA,WACnB,CAACJ,MACVA,EAAM,eAAeG,EAAkB,SACvCH,EAAM,eAAeG,EAAkB,QACpC,eAAeC,EAAO,OAAO,UAC7B,CAAC;AAAA;AAAA;"}

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

@@ -4,20 +4,19 @@ export declare enum AVATAR_TYPES {
     ICON = "ICON"
 }
 export declare enum SIZE {
-    EXTRA_SMALL = "EXTRA_SMALL",
     SMALL = "SMALL",
     MEDIUM = "MEDIUM",
-    LARGE = "LARGE"
+    LARGE = "LARGE",
+    INBOX = "INBOX"
 }
 export declare enum AVATAR_BACKGROUND {
     LIGHT = "LIGHT",
     DARK = "DARK",
-    WHITE = "WHITE",
-    BRAND = "BRAND"
+    WHITE = "WHITE"
 }
 export declare const AVATAR_SIZE_MAP: {
-    EXTRA_SMALL: number;
     SMALL: number;
     MEDIUM: number;
     LARGE: number;
+    INBOX: number;
 };

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

@@ -1,14 +1,14 @@
-var I = /* @__PURE__ */ ((L) => (L.IMAGE = "IMAGE", L.INITIALS = "INITIALS", L.ICON = "ICON", L))(I || {}), M = /* @__PURE__ */ ((L) => (L.EXTRA_SMALL = "EXTRA_SMALL", L.SMALL = "SMALL", L.MEDIUM = "MEDIUM", L.LARGE = "LARGE", L))(M || {}), r = /* @__PURE__ */ ((L) => (L.LIGHT = "LIGHT", L.DARK = "DARK", L.WHITE = "WHITE", L.BRAND = "BRAND", L))(r || {});
+var L = /* @__PURE__ */ ((I) => (I.IMAGE = "IMAGE", I.INITIALS = "INITIALS", I.ICON = "ICON", I))(L || {}), M = /* @__PURE__ */ ((I) => (I.SMALL = "SMALL", I.MEDIUM = "MEDIUM", I.LARGE = "LARGE", I.INBOX = "INBOX", I))(M || {}), r = /* @__PURE__ */ ((I) => (I.LIGHT = "LIGHT", I.DARK = "DARK", I.WHITE = "WHITE", I))(r || {});
 const E = {
-  EXTRA_SMALL: 16,
   SMALL: 24,
   MEDIUM: 40,
-  LARGE: 64
+  LARGE: 64,
+  INBOX: 30
 };
 export {
   r as AVATAR_BACKGROUND,
   E as AVATAR_SIZE_MAP,
-  I as AVATAR_TYPES,
+  L as AVATAR_TYPES,
   M as SIZE
 };
 //# sourceMappingURL=AvatarHelper.js.map

package/dist/esm/components/avatar/AvatarHelper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarHelper.js","sources":["../../../../src/components/avatar/AvatarHelper.ts"],"sourcesContent":["export enum AVATAR_TYPES {\n\tIMAGE = 'IMAGE',\n\tINITIALS = 'INITIALS',\n\tICON = 'ICON',\n}\n\nexport enum SIZE {\n\~~tEXTRA_SMALL~~ = '~~EXTRA_SMALL~~',\n\~~tSMALL~~ = '~~SMALL~~',\n\~~tMEDIUM~~ = '~~MEDIUM~~',\n\~~tLARGE~~ = '~~LARGE~~',\n}\n\nexport enum AVATAR_BACKGROUND {\n\tLIGHT = 'LIGHT',\n\tDARK = 'DARK',\n\tWHITE = 'WHITE',\n~~\tBRAND = 'BRAND',\n~~}\n\nexport const AVATAR_SIZE_MAP = {\n\t[SIZE.~~EXTRA_SMALL~~]: 16,\n\t[SIZE.~~SMALL~~]: 24,\n\t[SIZE.~~MEDIUM~~]: 40,\n\t[SIZE.~~LARGE~~]: 64,\n};\n"],"names":["AVATAR_TYPES","SIZE","AVATAR_BACKGROUND","AVATAR_SIZE_MAP"],"mappings":"AAAO,IAAKA,sBAAAA,OACXA,EAAA,QAAQ,SACRA,EAAA,WAAW,YACXA,EAAA,OAAO,QAHIA,IAAAA,KAAA,CAAA,CAAA,GAMAC,sBAAAA,OACXA,EAAA,~~cAAc,eACdA,EAAA,~~QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAJGA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACXA,EAAA,QAAQ,SACRA,EAAA,OAAO,QACPA,EAAA,QAAQ,~~SACRA~~,~~EAAA,QAAQ,SAJGA,~~IAAAA,KAAA,CAAA,CAAA;~~AAOL~~,MAAMC,IAAkB;AAAA,EAC7B,~~aAAmB;AAAA,EACnB,~~OAAa;AAAA,EACb,QAAc;AAAA,EACd,OAAa;AACf;"}
1	+ {"version":3,"file":"AvatarHelper.js","sources":["../../../../src/components/avatar/AvatarHelper.ts"],"sourcesContent":["export enum AVATAR_TYPES {\n\tIMAGE = 'IMAGE',\n\tINITIALS = 'INITIALS',\n\tICON = 'ICON',\n}\n\nexport enum SIZE {\n\tSMALL = 'SMALL',\n\tMEDIUM = 'MEDIUM',\n\tLARGE = 'LARGE',\n\tINBOX = 'INBOX',\n}\n\nexport enum AVATAR_BACKGROUND {\n\tLIGHT = 'LIGHT',\n\tDARK = 'DARK',\n\tWHITE = 'WHITE',\n}\n\nexport const AVATAR_SIZE_MAP = {\n\t[SIZE.SMALL]: 24,\n\t[SIZE.MEDIUM]: 40,\n\t[SIZE.LARGE]: 64,\n\t[SIZE.INBOX]: 30,\n};\n"],"names":["AVATAR_TYPES","SIZE","AVATAR_BACKGROUND","AVATAR_SIZE_MAP"],"mappings":"AAAO,IAAKA,sBAAAA,OACXA,EAAA,QAAQ,SACRA,EAAA,WAAW,YACXA,EAAA,OAAO,QAHIA,IAAAA,KAAA,CAAA,CAAA,GAMAC,sBAAAA,OACXA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SAJGA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACXA,EAAA,QAAQ,SACRA,EAAA,OAAO,QACPA,EAAA,QAAQ,SAHGA,IAAAA,KAAA,CAAA,CAAA;AAML,MAAMC,IAAkB;AAAA,EAC7B,OAAa;AAAA,EACb,QAAc;AAAA,EACd,OAAa;AAAA,EACb,OAAa;AACf;"}

package/dist/esm/components/bik-layout/BikSidebar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BikSidebar.js","sources":["../../../../src/components/bik-layout/BikSidebar.tsx"],"sourcesContent":["import BikIcon from '@src/assets/icons/Bik_logo.svg';\nimport LockedIcon from '@src/assets/icons/locked.svg';\nimport { Fragment, useCallback, useEffect, useMemo, useState } from 'react';\nimport React from 'react';\nimport CircularProgressBar from '@src/components/progress-bar/CircularProgressBar';\nimport { COLORS } from '@src/constants/Theme';\nimport { NavigationHyperlink } from '../navigation-hyperlink/NavigationHyperlink';\nimport { Menu } from './Sidebar.model';\nimport { SidebarPopup } from './SidebarPopup';\nimport {\n\tMainSideBarMenuWrapper,\n\tSibeBarMenuItem,\n\tSideBarContainer,\n} from './SidebarStyles';\nimport { SimpleSidebar } from './SimpleSidebar';\n\nexport interface MenuItem {\n\tkey: string \| number;\n\tdisplayName: string;\n\ticon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; // Main Icon element that is to display\n\tactiveIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; // Icon element to pass when the menu is active\n\thoverIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; //Icon element to pass when the menu is hovered upon\n\tisLastSticky?: boolean; // to stick any menu at the end of the list\n\tis2ndLastSticky?: boolean; // to stick any menu at 2nd last end of list\n\tchildren?: Menu[];\n\tshowAccessUpgradePanel?: boolean;\n\tpath?: string;\n\tlayout?: 'fullScreen' \| 'popup' \| string \| undefined;\n\tisNew?: boolean;\n\tisLocked?: boolean;\n}\n\nexport interface BikSidebarProps {\n\tlogoSvg?: JSX.Element;\n\tallMenuList: MenuItem[];\n\tactiveMainMenu: MenuItem;\n\tactiveSubMenu: Menu;\n\trouter: any;\n\tonClickingMainMenu: (menu: MenuItem) => void;\n\tonClickingSubMenu: (subMenu: Menu) => void;\n\tonClickingAccessUpgradePanel?: () => void;\n\tonClickingPopupMenuItem?: (menu: Menu) => void;\n\tpopupMinHeight?: number;\n\tisNewSidebar?: boolean;\n\tonboardingPercentage?: number;\n\tmenuStyle?: React.CSSProperties;\n}\n\ninterface GetSideBarMenuItemProps {\n\toption: MenuItem;\n\tindex: number;\n\tonClickMainMenuLogic: (option: MenuItem) => void;\n\tsetHandleHoverForFullLayout: (option: MenuItem) => void;\n\tisDisabled: boolean;\n\tsetHoveredComp: (comp: any) => void;\n\tsetPopupMenu: (menu: any) => void;\n\tmainActiveMenu: MenuItem \| undefined;\n\thoveredComp: MenuItem \| undefined;\n\tpopupMenu: MenuItem \| undefined;\n}\n\nexport const BikSidebar: React.FC<BikSidebarProps> = (bikSidebarProps) => {\n\tconst {\n\t\tlogoSvg,\n\t\tallMenuList,\n\t\tactiveMainMenu,\n\t\tactiveSubMenu,\n\t\trouter,\n\t\tonClickingMainMenu,\n\t\tonClickingSubMenu,\n\t\tonClickingAccessUpgradePanel,\n\t\tonClickingPopupMenuItem,\n\t\tpopupMinHeight,\n\t\tisNewSidebar,\n\t\tmenuStyle,\n\t} = bikSidebarProps;\n\tconst [mainActiveMenu, setMainActiveMenu] =\n\t\tuseState<MenuItem>(activeMainMenu);\n\tconst [hoveredComp, setHoveredComp] = useState<MenuItem>();\n\tconst [subActiveMenu, setSubActiveMenu] = useState<Menu>(activeSubMenu);\n\tconst [isDisabled, setIsDisabled] = useState(false);\n\tconst [popupMenu, setPopupMenu] = useState<MenuItem>();\n\tconst [popupMenuTop, setPopupMenuTop] = useState<number>();\n\tconst [sidebarEachMenuTop, setSidebarEachMenuTop] = useState<number>();\n\tconst [autoCloseTimer, setAutoCloseTimer] = useState<NodeJS.Timeout \| null>(\n\t\tnull,\n\t);\n\tconst numberOfStickyOptions = useMemo(\n\t\t() =>\n\t\t\tallMenuList.filter((menu) => menu.is2ndLastSticky \|\| menu.isLastSticky)\n\t\t\t\t.length,\n\t\t[allMenuList],\n\t);\n\n\tuseEffect(() => {\n\t\tsetMainActiveMenu(activeMainMenu);\n\t}, [activeMainMenu]);\n\n\tuseEffect(() => {\n\t\tsetSubActiveMenu(activeSubMenu);\n\t}, [activeSubMenu]);\n\n\tconst onClickMainMenuLogic = useCallback(\n\t\t(option: MenuItem) => {\n\t\t\tif (option?.layout === 'popup') {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetPopupMenu(undefined);\n\t\t\tsetHoveredComp(undefined);\n\t\t\tsetIsDisabled(true);\n\t\t\tsetMainActiveMenu(option);\n\t\t\tif (!option.path) {\n\t\t\t\tonClickingMainMenu(option);\n\t\t\t}\n\t\t\toption?.children?.length\n\t\t\t\t? setSubActiveMenu(option?.children[0])\n\t\t\t\t: setSubActiveMenu({} as Menu);\n\t\t\tsetHoveredComp(undefined);\n\t\t\tsetTimeout(() => {\n\t\t\t\tsetIsDisabled(false);\n\t\t\t}, 1000);\n\t\t},\n\t\t[onClickingMainMenu],\n\t);\n\n\tconst setHandleHoverForFullLayout = useCallback((option: MenuItem) => {\n\t\tclearRemnantTimers();\n\t\tsetHoveredComp(undefined);\n\t\tsetPopupMenu(undefined);\n\t\tif (option?.layout == 'popup') {\n\t\t\tconst top = determineElementTop();\n\t\t\ttop && setPopupMenuTop(top);\n\t\t\tsetPopupMenu(option);\n\t\t} else {\n\t\t\tconst targetElement = document.getElementById(\n\t\t\t\toption.displayName?.split(' ')?.join('') \|\| option.key.toString(),\n\t\t\t);\n\t\t\tif (targetElement) {\n\t\t\t\tconst topValue = calculateTopSideBarPosition(targetElement);\n\t\t\t\tsetSidebarEachMenuTop(topValue);\n\t\t\t}\n\t\t\tsetHoveredComp(option);\n\t\t\tinitiateAutoClose();\n\t\t}\n\t}, []);\n\tconst calculateTopSideBarPosition = (targetElement: HTMLElement) => {\n\t\tconst targetRect = targetElement.getBoundingClientRect();\n\t\tlet topValue = targetRect.top;\n\t\tconst innerStickyElements = targetElement.querySelectorAll('div');\n\t\tlet innerStickyElement = null as HTMLElement \| null;\n\t\tconst innerHeight = window.innerHeight;\n\t\tif (innerHeight <= 768) {\n\t\t\treturn topValue;\n\t\t}\n\t\tinnerStickyElements.forEach((element) => {\n\t\t\tif (element.className.includes('sticky')) {\n\t\t\t\tinnerStickyElement = element;\n\t\t\t}\n\t\t});\n\t\tif (innerStickyElement) {\n\t\t\tconst windowHeight = window.innerHeight;\n\t\t\tconst distanceToBottom = windowHeight - targetRect.bottom;\n\t\t\ttopValue = targetRect.top + distanceToBottom - 200; // sample height for lower elements\n\t\t}\n\t\treturn topValue;\n\t};\n\n\tuseEffect(() => {\n\t\tconst handleResize = () => {\n\t\t\tconst newTop = determineElementTop();\n\t\t\tnewTop && setPopupMenuTop(newTop);\n\t\t\tdetermineSideMenuTopWhileResize();\n\t\t};\n\t\twindow.addEventListener('resize', handleResize);\n\t\treturn () => {\n\t\t\twindow.removeEventListener('resize', handleResize);\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\tconst determineSideMenuTopWhileResize = () => {\n\t\tconst openSideMenuElement = document.getElementById('_sub-menu');\n\t\tconst openSideMenuElementHeight =\n\t\t\topenSideMenuElement?.getBoundingClientRect().height;\n\t\tif (openSideMenuElementHeight) {\n\t\t\tsetSidebarEachMenuTop(window.innerHeight - openSideMenuElementHeight);\n\t\t}\n\t};\n\tconst determineElementTop = () => {\n\t\tif (popupMenu) {\n\t\t\tconst currentId =\n\t\t\t\tpopupMenu.displayName?.split(' ')?.join('') + '_sub' \|\|\n\t\t\t\tpopupMenu.key.toString() + '_sub';\n\n\t\t\tconst targetElement = document.getElementById(currentId);\n\t\t\tif (targetElement) {\n\t\t\t\tconst sideMenuRect = targetElement.getBoundingClientRect();\n\t\t\t\tlet divBoxTop = sideMenuRect.top;\n\t\t\t\tconst popupHeight = popupMinHeight ?? 320;\n\t\t\t\tif (sideMenuRect.bottom + popupHeight > window.innerHeight) {\n\t\t\t\t\tdivBoxTop -= sideMenuRect.bottom + popupHeight - window.innerHeight;\n\t\t\t\t}\n\t\t\t\treturn divBoxTop;\n\t\t\t}\n\t\t\treturn null;\n\t\t}\n\t};\n\n\tconst initiateAutoClose = () => {\n\t\tclearRemnantTimers();\n\t\tconst timer = setTimeout(() => setHoveredComp(undefined), 10000); // 10-second delay\n\t\tsetAutoCloseTimer(timer);\n\t};\n\n\tconst clearRemnantTimers = () => {\n\t\tclearTimeout(autoCloseTimer!);\n\t};\n\n\treturn (\n\t\t<SideBarContainer>\n\t\t\t<div\n\t\t\t\tclassName=\"bik-header-logo\"\n\t\t\t\tonClick={() => undefined}\n\t\t\t\tonKeyDown={() => undefined}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t{logoSvg ? logoSvg : <BikIcon />}\n\t\t\t</div>\n\t\t\t<MainSideBarMenuWrapper style={menuStyle}>\n\t\t\t\t{allMenuList?.map((option, index) => (\n\t\t\t\t\t<Fragment key={index}>\n\t\t\t\t\t\t{option.path ? (\n\t\t\t\t\t\t\t<NavigationHyperlink href={option.path} router={router}>\n\t\t\t\t\t\t\t\t<EachSidebarMenuItem\n\t\t\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\tonClickMainMenuLogic={onClickMainMenuLogic}\n\t\t\t\t\t\t\t\t\tsetHandleHoverForFullLayout={setHandleHoverForFullLayout}\n\t\t\t\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\t\t\t\tsetHoveredComp={setHoveredComp}\n\t\t\t\t\t\t\t\t\tsetPopupMenu={setPopupMenu}\n\t\t\t\t\t\t\t\t\tmainActiveMenu={mainActiveMenu}\n\t\t\t\t\t\t\t\t\thoveredComp={hoveredComp}\n\t\t\t\t\t\t\t\t\tpopupMenu={popupMenu}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</NavigationHyperlink>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<EachSidebarMenuItem\n\t\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\tonClickMainMenuLogic={onClickMainMenuLogic}\n\t\t\t\t\t\t\t\tsetHandleHoverForFullLayout={setHandleHoverForFullLayout}\n\t\t\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\t\t\tsetHoveredComp={setHoveredComp}\n\t\t\t\t\t\t\t\tsetPopupMenu={setPopupMenu}\n\t\t\t\t\t\t\t\tmainActiveMenu={mainActiveMenu}\n\t\t\t\t\t\t\t\thoveredComp={hoveredComp}\n\t\t\t\t\t\t\t\tpopupMenu={popupMenu}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{option.layout === 'popup' && popupMenu?.children?.length && (\n\t\t\t\t\t\t\t\t<SidebarPopup\n\t\t\t\t\t\t\t\t\ttop={popupMenuTop ?? undefined}\n\t\t\t\t\t\t\t\t\tmenuList={popupMenu?.children}\n\t\t\t\t\t\t\t\t\tonClickingPopupMenu={(popupMenuSelected) => {\n\t\t\t\t\t\t\t\t\t\tonClickingPopupMenuItem &&\n\t\t\t\t\t\t\t\t\t\t\tonClickingPopupMenuItem(popupMenuSelected);\n\t\t\t\t\t\t\t\t\t\tsetPopupMenu(undefined);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonMouseLeaveOnMenu={() => setPopupMenu(undefined)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{hoveredComp?.children?.length && (\n\t\t\t\t\t\t\t\t<SimpleSidebar\n\t\t\t\t\t\t\t\t\tmenuList={hoveredComp?.children}\n\t\t\t\t\t\t\t\t\tactiveMenu={subActiveMenu}\n\t\t\t\t\t\t\t\t\tonMouseEnterOnMenu={() => clearRemnantTimers()}\n\t\t\t\t\t\t\t\t\tonMouseLeaveOnMenu={() => {\n\t\t\t\t\t\t\t\t\t\tclearRemnantTimers();\n\t\t\t\t\t\t\t\t\t\tsetHoveredComp(undefined);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tleft={isNewSidebar ? 92 : 88}\n\t\t\t\t\t\t\t\t\tpostion={'fixed'}\n\t\t\t\t\t\t\t\t\theader={hoveredComp.displayName}\n\t\t\t\t\t\t\t\t\ttheme={'brand'}\n\t\t\t\t\t\t\t\t\trouter={router}\n\t\t\t\t\t\t\t\t\tshowAccessUpgradePanel={hoveredComp.showAccessUpgradePanel}\n\t\t\t\t\t\t\t\t\tonMenuClick={(menuSelected, reDirect) => {\n\t\t\t\t\t\t\t\t\t\tsetSubActiveMenu(menuSelected);\n\t\t\t\t\t\t\t\t\t\tsetMainActiveMenu(hoveredComp);\n\t\t\t\t\t\t\t\t\t\tsetHoveredComp(undefined);\n\t\t\t\t\t\t\t\t\t\tsetPopupMenu(undefined);\n\t\t\t\t\t\t\t\t\t\treDirect && onClickingSubMenu(menuSelected);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonUpgrade={onClickingAccessUpgradePanel}\n\t\t\t\t\t\t\t\t\ttop={\n\t\t\t\t\t\t\t\t\t\tisNewSidebar\n\t\t\t\t\t\t\t\t\t\t\t? sidebarEachMenuTop\n\t\t\t\t\t\t\t\t\t\t\t\t? sidebarEachMenuTop\n\t\t\t\t\t\t\t\t\t\t\t\t: 0\n\t\t\t\t\t\t\t\t\t\t\t: 0\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tisNewSidebar={isNewSidebar}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t</Fragment>\n\t\t\t\t))}\n\t\t\t\t{typeof bikSidebarProps.onboardingPercentage === 'number' && (\n\t\t\t\t\t<SibeBarMenuItem>\n\t\t\t\t\t\t<div className=\"main--sidebar\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tid={'bik-onboarding__checklist'}\n\t\t\t\t\t\t\t\tclassName={`sidebar-menu-item ${\n\t\t\t\t\t\t\t\t\tnumberOfStickyOptions === 0\n\t\t\t\t\t\t\t\t\t\t? 'sticky-menu'\n\t\t\t\t\t\t\t\t\t\t: numberOfStickyOptions === 1\n\t\t\t\t\t\t\t\t\t\t? 'sticky-menu-int'\n\t\t\t\t\t\t\t\t\t\t: 'sticky-menu-three'\n\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<CircularProgressBar\n\t\t\t\t\t\t\t\t\tpercentage={bikSidebarProps.onboardingPercentage}\n\t\t\t\t\t\t\t\t\twidth={48}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</SibeBarMenuItem>\n\t\t\t\t)}\n\t\t\t</MainSideBarMenuWrapper>\n\t\t</SideBarContainer>\n\t);\n};\n\nconst IconComponent: React.FC<{\n\ticon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tisActive: boolean;\n\tactiveStateIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\thoverStateIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tisHovered: boolean;\n}> = (iconComponentProps) => {\n\tconst { icon, isActive, activeStateIcon, hoverStateIcon, isHovered } =\n\t\ticonComponentProps;\n\tconst Icon = icon;\n\tconst ActiveIcon = activeStateIcon;\n\tconst HoverIcon = hoverStateIcon;\n\treturn (\n\t\t<>\n\t\t\t{isActive ? (\n\t\t\t\t<ActiveIcon width={20} height={20} />\n\t\t\t) : isHovered ? (\n\t\t\t\t<HoverIcon width={20} height={20} color={COLORS.surface.standard} />\n\t\t\t) : (\n\t\t\t\t<Icon width={20} height={20} color={COLORS.surface.standard} />\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst EachSidebarMenuItem: React.FC<GetSideBarMenuItemProps> = ({\n\toption,\n\tindex,\n\tonClickMainMenuLogic,\n\tsetHandleHoverForFullLayout,\n\tisDisabled,\n\tsetHoveredComp,\n\tsetPopupMenu,\n\tmainActiveMenu,\n\thoveredComp,\n\tpopupMenu,\n}) => {\n\treturn (\n\t\t<SibeBarMenuItem>\n\t\t\t<div\n\t\t\t\tid={option.displayName?.split(' ')?.join('') \|\| option.key.toString()}\n\t\t\t\tclassName=\"main--sidebar\"\n\t\t\t\tkey={index}\n\t\t\t\tonClick={() => onClickMainMenuLogic(option)}\n\t\t\t\tonMouseEnter={() => {\n\t\t\t\t\t!isDisabled && setHandleHoverForFullLayout(option);\n\t\t\t\t}}\n\t\t\t\tonMouseOver={() => {\n\t\t\t\t\t!isDisabled && setHandleHoverForFullLayout(option);\n\t\t\t\t}}\n\t\t\t\tonMouseLeave={() => {\n\t\t\t\t\tif (!option?.children?.length) {\n\t\t\t\t\t\tsetHoveredComp(undefined);\n\t\t\t\t\t\tsetPopupMenu(undefined);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonFocus={() => {\n\t\t\t\t\t// do nothing\n\t\t\t\t}}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t{option.isNew && (\n\t\t\t\t\t<div className={`new-tag ${option.isLastSticky ? 'tag-sticky' : ''}`}>\n\t\t\t\t\t\tNEW\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{option.isLocked && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`locked--channel ${\n\t\t\t\t\t\t\toption.isLastSticky ? 'tag-sticky' : ''\n\t\t\t\t\t\t} ${option.is2ndLastSticky ? 'tag-sticky-2' : ''}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<LockedIcon height={16} width={16} />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tkey={index}\n\t\t\t\t\tid={\n\t\t\t\t\t\toption.displayName?.split(' ')?.join('') + '_sub' \|\|\n\t\t\t\t\t\toption.key.toString() + '_sub'\n\t\t\t\t\t}\n\t\t\t\t\tclassName={`sidebar-menu-item \n\t\t\t\t\t${mainActiveMenu?.key === option.key ? 'main-menu-active-class' : ''} \n\t\t\t\t\t${option.isLastSticky ? 'sticky-menu-int' : ''} \n\t\t\t\t\t${option.is2ndLastSticky ? 'sticky-menu' : ''} \n\t\t\t\t\t${option.key === hoveredComp?.key ? 'sidebar-menu-item-hover' : ''} \n\t\t\t\t\t${option.isNew ? 'new-menu-item' : ''}`}\n\t\t\t\t>\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\ticon={option.icon}\n\t\t\t\t\t\tisActive={option.key == mainActiveMenu?.key}\n\t\t\t\t\t\tactiveStateIcon={\n\t\t\t\t\t\t\toption.activeIcon ??\n\t\t\t\t\t\t\t({} as React.FunctionComponent<React.SVGAttributes<SVGElement>>)\n\t\t\t\t\t\t}\n\t\t\t\t\t\thoverStateIcon={\n\t\t\t\t\t\t\toption.hoverIcon ??\n\t\t\t\t\t\t\t({} as React.FunctionComponent<React.SVGAttributes<SVGElement>>)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisHovered={\n\t\t\t\t\t\t\toption.key == hoveredComp?.key \|\| option.key == popupMenu?.key\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"menu-item-container\">\n\t\t\t\t\t\t<p\n\t\t\t\t\t\t\tclassName={`menu-item-text ${\n\t\t\t\t\t\t\t\toption?.key === mainActiveMenu?.key\n\t\t\t\t\t\t\t\t\t? 'active-menu-item-text'\n\t\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{option.displayName}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</SibeBarMenuItem>\n\t);\n};\n"],"names":["BikSidebar","bikSidebarProps","logoSvg","allMenuList","activeMainMenu","activeSubMenu","router","onClickingMainMenu","onClickingSubMenu","onClickingAccessUpgradePanel","onClickingPopupMenuItem","popupMinHeight","isNewSidebar","menuStyle","mainActiveMenu","setMainActiveMenu","useState","hoveredComp","setHoveredComp","subActiveMenu","setSubActiveMenu","isDisabled","setIsDisabled","popupMenu","setPopupMenu","popupMenuTop","setPopupMenuTop","sidebarEachMenuTop","setSidebarEachMenuTop","autoCloseTimer","setAutoCloseTimer","numberOfStickyOptions","useMemo","menu","useEffect","onClickMainMenuLogic","useCallback","option","setHandleHoverForFullLayout","clearRemnantTimers","top","determineElementTop","targetElement","topValue","calculateTopSideBarPosition","initiateAutoClose","targetRect","innerStickyElements","innerStickyElement","element","distanceToBottom","handleResize","newTop","determineSideMenuTopWhileResize","openSideMenuElementHeight","currentId","sideMenuRect","divBoxTop","popupHeight","timer","SideBarContainer","jsx","BikIcon","jsxs","MainSideBarMenuWrapper","index","Fragment","NavigationHyperlink","EachSidebarMenuItem","SidebarPopup","popupMenuSelected","SimpleSidebar","menuSelected","reDirect","SibeBarMenuItem","CircularProgressBar","IconComponent","iconComponentProps","icon","isActive","activeStateIcon","hoverStateIcon","isHovered","COLORS","LockedIcon"],"mappings":"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"}
1	+ {"version":3,"file":"BikSidebar.js","sources":["../../../../src/components/bik-layout/BikSidebar.tsx"],"sourcesContent":["import BikIcon from '@src/assets/icons/Bik_logo.svg';\nimport LockedIcon from '@src/assets/icons/locked.svg';\nimport { Fragment, useCallback, useEffect, useMemo, useState } from 'react';\nimport React from 'react';\nimport CircularProgressBar from '@src/components/progress-bar/CircularProgressBar';\nimport { COLORS } from '@src/constants/Theme';\nimport { NavigationHyperlink } from '../navigation-hyperlink/NavigationHyperlink';\nimport { Menu } from './Sidebar.model';\nimport { SidebarPopup } from './SidebarPopup';\nimport {\n\tMainSideBarMenuWrapper,\n\tSibeBarMenuItem,\n\tSideBarContainer,\n} from './SidebarStyles';\nimport { SimpleSidebar } from './SimpleSidebar';\n\nexport interface MenuItem {\n\tkey: string \| number;\n\tdisplayName: string;\n\ticon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; // Main Icon element that is to display\n\tactiveIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; // Icon element to pass when the menu is active\n\thoverIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; //Icon element to pass when the menu is hovered upon\n\tisLastSticky?: boolean; // to stick any menu at the end of the list\n\tis2ndLastSticky?: boolean; // to stick any menu at 2nd last end of list\n\tchildren?: Menu[];\n\tshowAccessUpgradePanel?: boolean;\n\tpath?: string;\n\tlayout?: 'fullScreen' \| 'popup' \| string \| undefined;\n\tisNew?: boolean;\n\tisLocked?: boolean;\n}\n\nexport interface BikSidebarProps {\n\tlogoSvg?: JSX.Element;\n\tallMenuList: MenuItem[];\n\tactiveMainMenu: MenuItem;\n\tactiveSubMenu: Menu;\n\trouter: any;\n\tonClickingMainMenu: (menu: MenuItem) => void;\n\tonClickingSubMenu: (subMenu: Menu) => void;\n\tonClickingAccessUpgradePanel?: () => void;\n\tonClickingPopupMenuItem?: (menu: Menu) => void;\n\tpopupMinHeight?: number;\n\tisNewSidebar?: boolean;\n\tonboardingPercentage?: number;\n\tmenuStyle?: React.CSSProperties;\n}\n\ninterface GetSideBarMenuItemProps {\n\toption: MenuItem;\n\tindex: number;\n\tonClickMainMenuLogic: (option: MenuItem) => void;\n\tsetHandleHoverForFullLayout: (option: MenuItem) => void;\n\tisDisabled: boolean;\n\tsetHoveredComp: (comp: any) => void;\n\tsetPopupMenu: (menu: any) => void;\n\tmainActiveMenu: MenuItem \| undefined;\n\thoveredComp: MenuItem \| undefined;\n\tpopupMenu: MenuItem \| undefined;\n}\n\nexport const BikSidebar: React.FC<BikSidebarProps> = (bikSidebarProps) => {\n\tconst {\n\t\tlogoSvg,\n\t\tallMenuList,\n\t\tactiveMainMenu,\n\t\tactiveSubMenu,\n\t\trouter,\n\t\tonClickingMainMenu,\n\t\tonClickingSubMenu,\n\t\tonClickingAccessUpgradePanel,\n\t\tonClickingPopupMenuItem,\n\t\tpopupMinHeight,\n\t\tisNewSidebar,\n\t\tmenuStyle,\n\t} = bikSidebarProps;\n\tconst [mainActiveMenu, setMainActiveMenu] =\n\t\tuseState<MenuItem>(activeMainMenu);\n\tconst [hoveredComp, setHoveredComp] = useState<MenuItem>();\n\tconst [subActiveMenu, setSubActiveMenu] = useState<Menu>(activeSubMenu);\n\tconst [isDisabled, setIsDisabled] = useState(false);\n\tconst [popupMenu, setPopupMenu] = useState<MenuItem>();\n\tconst [popupMenuTop, setPopupMenuTop] = useState<number>();\n\tconst [sidebarEachMenuTop, setSidebarEachMenuTop] = useState<number>();\n\tconst [autoCloseTimer, setAutoCloseTimer] = useState<NodeJS.Timeout \| null>(\n\t\tnull,\n\t);\n\tconst numberOfStickyOptions = useMemo(\n\t\t() =>\n\t\t\tallMenuList.filter((menu) => menu.is2ndLastSticky \|\| menu.isLastSticky)\n\t\t\t\t.length,\n\t\t[allMenuList],\n\t);\n\n\tuseEffect(() => {\n\t\tsetMainActiveMenu(activeMainMenu);\n\t}, [activeMainMenu]);\n\n\tuseEffect(() => {\n\t\tsetSubActiveMenu(activeSubMenu);\n\t}, [activeSubMenu]);\n\n\tconst onClickMainMenuLogic = useCallback(\n\t\t(option: MenuItem) => {\n\t\t\tif (option?.layout === 'popup') {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetPopupMenu(undefined);\n\t\t\tsetHoveredComp(undefined);\n\t\t\tsetIsDisabled(true);\n\t\t\tsetMainActiveMenu(option);\n\t\t\tif (!option.path) {\n\t\t\t\tonClickingMainMenu(option);\n\t\t\t}\n\t\t\toption?.children?.length\n\t\t\t\t? setSubActiveMenu(option?.children[0])\n\t\t\t\t: setSubActiveMenu({} as Menu);\n\t\t\tsetHoveredComp(undefined);\n\t\t\tsetTimeout(() => {\n\t\t\t\tsetIsDisabled(false);\n\t\t\t}, 1000);\n\t\t},\n\t\t[onClickingMainMenu],\n\t);\n\n\tconst setHandleHoverForFullLayout = useCallback((option: MenuItem) => {\n\t\tclearRemnantTimers();\n\t\tsetHoveredComp(undefined);\n\t\tsetPopupMenu(undefined);\n\t\tif (option?.layout == 'popup') {\n\t\t\tconst top = determineElementTop();\n\t\t\ttop && setPopupMenuTop(top);\n\t\t\tsetPopupMenu(option);\n\t\t} else {\n\t\t\tconst targetElement = document.getElementById(\n\t\t\t\toption.displayName?.split(' ')?.join('') \|\| option.key.toString(),\n\t\t\t);\n\t\t\tif (targetElement) {\n\t\t\t\tconst topValue = calculateTopSideBarPosition(targetElement);\n\t\t\t\tsetSidebarEachMenuTop(topValue);\n\t\t\t}\n\t\t\tsetHoveredComp(option);\n\t\t\tinitiateAutoClose();\n\t\t}\n\t}, []);\n\tconst calculateTopSideBarPosition = (targetElement: HTMLElement) => {\n\t\tconst targetRect = targetElement.getBoundingClientRect();\n\t\tlet topValue = targetRect.top;\n\t\tconst innerStickyElements = targetElement.querySelectorAll('div');\n\t\tlet innerStickyElement = null as HTMLElement \| null;\n\t\tconst innerHeight = window.innerHeight;\n\t\tif (innerHeight <= 768) {\n\t\t\treturn topValue;\n\t\t}\n\t\tinnerStickyElements.forEach((element) => {\n\t\t\tif (element.className.includes('sticky')) {\n\t\t\t\tinnerStickyElement = element;\n\t\t\t}\n\t\t});\n\t\tif (innerStickyElement) {\n\t\t\tconst windowHeight = window.innerHeight;\n\t\t\tconst distanceToBottom = windowHeight - targetRect.bottom;\n\t\t\ttopValue = targetRect.top + distanceToBottom - 200; // sample height for lower elements\n\t\t}\n\t\treturn topValue;\n\t};\n\n\tuseEffect(() => {\n\t\tconst handleResize = () => {\n\t\t\tconst newTop = determineElementTop();\n\t\t\tnewTop && setPopupMenuTop(newTop);\n\t\t\tdetermineSideMenuTopWhileResize();\n\t\t};\n\t\twindow.addEventListener('resize', handleResize);\n\t\treturn () => {\n\t\t\twindow.removeEventListener('resize', handleResize);\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\tconst determineSideMenuTopWhileResize = () => {\n\t\tconst openSideMenuElement = document.getElementById('_sub-menu');\n\t\tconst openSideMenuElementHeight =\n\t\t\topenSideMenuElement?.getBoundingClientRect().height;\n\t\tif (openSideMenuElementHeight) {\n\t\t\tsetSidebarEachMenuTop(window.innerHeight - openSideMenuElementHeight);\n\t\t}\n\t};\n\tconst determineElementTop = () => {\n\t\tif (popupMenu) {\n\t\t\tconst currentId =\n\t\t\t\tpopupMenu.displayName?.split(' ')?.join('') + '_sub' \|\|\n\t\t\t\tpopupMenu.key.toString() + '_sub';\n\n\t\t\tconst targetElement = document.getElementById(currentId);\n\t\t\tif (targetElement) {\n\t\t\t\tconst sideMenuRect = targetElement.getBoundingClientRect();\n\t\t\t\tlet divBoxTop = sideMenuRect.top;\n\t\t\t\tconst popupHeight = popupMinHeight ?? 320;\n\t\t\t\tif (sideMenuRect.bottom + popupHeight > window.innerHeight) {\n\t\t\t\t\tdivBoxTop -= sideMenuRect.bottom + popupHeight - window.innerHeight;\n\t\t\t\t}\n\t\t\t\treturn divBoxTop;\n\t\t\t}\n\t\t\treturn null;\n\t\t}\n\t};\n\n\tconst initiateAutoClose = () => {\n\t\tclearRemnantTimers();\n\t\tconst timer = setTimeout(() => setHoveredComp(undefined), 10000); // 10-second delay\n\t\tsetAutoCloseTimer(timer);\n\t};\n\n\tconst clearRemnantTimers = () => {\n\t\tclearTimeout(autoCloseTimer!);\n\t};\n\n\treturn (\n\t\t<SideBarContainer>\n\t\t\t<div\n\t\t\t\tclassName=\"bik-header-logo\"\n\t\t\t\tonClick={() => undefined}\n\t\t\t\tonKeyDown={() => undefined}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t{logoSvg ? logoSvg : <BikIcon />}\n\t\t\t</div>\n\t\t\t<MainSideBarMenuWrapper style={menuStyle}>\n\t\t\t\t{allMenuList?.map((option, index) => (\n\t\t\t\t\t<Fragment key={index}>\n\t\t\t\t\t\t{option.path ? (\n\t\t\t\t\t\t\t<NavigationHyperlink href={option.path} router={router}>\n\t\t\t\t\t\t\t\t<EachSidebarMenuItem\n\t\t\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\tonClickMainMenuLogic={onClickMainMenuLogic}\n\t\t\t\t\t\t\t\t\tsetHandleHoverForFullLayout={setHandleHoverForFullLayout}\n\t\t\t\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\t\t\t\tsetHoveredComp={setHoveredComp}\n\t\t\t\t\t\t\t\t\tsetPopupMenu={setPopupMenu}\n\t\t\t\t\t\t\t\t\tmainActiveMenu={mainActiveMenu}\n\t\t\t\t\t\t\t\t\thoveredComp={hoveredComp}\n\t\t\t\t\t\t\t\t\tpopupMenu={popupMenu}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</NavigationHyperlink>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<EachSidebarMenuItem\n\t\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\tonClickMainMenuLogic={onClickMainMenuLogic}\n\t\t\t\t\t\t\t\tsetHandleHoverForFullLayout={setHandleHoverForFullLayout}\n\t\t\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\t\t\tsetHoveredComp={setHoveredComp}\n\t\t\t\t\t\t\t\tsetPopupMenu={setPopupMenu}\n\t\t\t\t\t\t\t\tmainActiveMenu={mainActiveMenu}\n\t\t\t\t\t\t\t\thoveredComp={hoveredComp}\n\t\t\t\t\t\t\t\tpopupMenu={popupMenu}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{option.layout === 'popup' && popupMenu?.children?.length && (\n\t\t\t\t\t\t\t\t<SidebarPopup\n\t\t\t\t\t\t\t\t\ttop={popupMenuTop ?? undefined}\n\t\t\t\t\t\t\t\t\tmenuList={popupMenu?.children}\n\t\t\t\t\t\t\t\t\tonClickingPopupMenu={(popupMenuSelected) => {\n\t\t\t\t\t\t\t\t\t\tonClickingPopupMenuItem &&\n\t\t\t\t\t\t\t\t\t\t\tonClickingPopupMenuItem(popupMenuSelected);\n\t\t\t\t\t\t\t\t\t\tsetPopupMenu(undefined);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonMouseLeaveOnMenu={() => setPopupMenu(undefined)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{hoveredComp?.children?.length && (\n\t\t\t\t\t\t\t\t<SimpleSidebar\n\t\t\t\t\t\t\t\t\tmenuList={hoveredComp?.children}\n\t\t\t\t\t\t\t\t\tactiveMenu={subActiveMenu}\n\t\t\t\t\t\t\t\t\tonMouseEnterOnMenu={() => clearRemnantTimers()}\n\t\t\t\t\t\t\t\t\tonMouseLeaveOnMenu={() => {\n\t\t\t\t\t\t\t\t\t\tclearRemnantTimers();\n\t\t\t\t\t\t\t\t\t\tsetHoveredComp(undefined);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tleft={isNewSidebar ? 92 : 88}\n\t\t\t\t\t\t\t\t\tpostion={'fixed'}\n\t\t\t\t\t\t\t\t\theader={hoveredComp.displayName}\n\t\t\t\t\t\t\t\t\ttheme={'brand'}\n\t\t\t\t\t\t\t\t\trouter={router}\n\t\t\t\t\t\t\t\t\tshowAccessUpgradePanel={hoveredComp.showAccessUpgradePanel}\n\t\t\t\t\t\t\t\t\tonMenuClick={(menuSelected, reDirect) => {\n\t\t\t\t\t\t\t\t\t\tsetSubActiveMenu(menuSelected);\n\t\t\t\t\t\t\t\t\t\tsetMainActiveMenu(hoveredComp);\n\t\t\t\t\t\t\t\t\t\tsetHoveredComp(undefined);\n\t\t\t\t\t\t\t\t\t\tsetPopupMenu(undefined);\n\t\t\t\t\t\t\t\t\t\treDirect && onClickingSubMenu(menuSelected);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonUpgrade={onClickingAccessUpgradePanel}\n\t\t\t\t\t\t\t\t\ttop={\n\t\t\t\t\t\t\t\t\t\tisNewSidebar\n\t\t\t\t\t\t\t\t\t\t\t? sidebarEachMenuTop\n\t\t\t\t\t\t\t\t\t\t\t\t? sidebarEachMenuTop\n\t\t\t\t\t\t\t\t\t\t\t\t: 0\n\t\t\t\t\t\t\t\t\t\t\t: 0\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tisNewSidebar={isNewSidebar}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t</Fragment>\n\t\t\t\t))}\n\t\t\t\t{typeof bikSidebarProps.onboardingPercentage === 'number' && (\n\t\t\t\t\t<SibeBarMenuItem>\n\t\t\t\t\t\t<div className=\"main--sidebar\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tid={'bik-onboarding__checklist'}\n\t\t\t\t\t\t\t\tclassName={`sidebar-menu-item ${\n\t\t\t\t\t\t\t\t\tnumberOfStickyOptions === 0\n\t\t\t\t\t\t\t\t\t\t? 'sticky-menu'\n\t\t\t\t\t\t\t\t\t\t: numberOfStickyOptions === 1\n\t\t\t\t\t\t\t\t\t\t? 'sticky-menu-int'\n\t\t\t\t\t\t\t\t\t\t: 'sticky-menu-three'\n\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<CircularProgressBar\n\t\t\t\t\t\t\t\t\tpercentage={bikSidebarProps.onboardingPercentage}\n\t\t\t\t\t\t\t\t\twidth={48}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</SibeBarMenuItem>\n\t\t\t\t)}\n\t\t\t</MainSideBarMenuWrapper>\n\t\t</SideBarContainer>\n\t);\n};\n\nconst IconComponent: React.FC<{\n\ticon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tisActive: boolean;\n\tactiveStateIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\thoverStateIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tisHovered: boolean;\n}> = (iconComponentProps) => {\n\tconst { icon, isActive, activeStateIcon, hoverStateIcon, isHovered } =\n\t\ticonComponentProps;\n\tconst Icon = icon;\n\tconst ActiveIcon = activeStateIcon;\n\tconst HoverIcon = hoverStateIcon;\n\treturn (\n\t\t<>\n\t\t\t{isActive ? (\n\t\t\t\t<ActiveIcon width={20} height={20} />\n\t\t\t) : isHovered ? (\n\t\t\t\t<HoverIcon width={20} height={20} color={COLORS.surface.standard} />\n\t\t\t) : (\n\t\t\t\t<Icon width={20} height={20} color={COLORS.surface.standard} />\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst EachSidebarMenuItem: React.FC<GetSideBarMenuItemProps> = ({\n\toption,\n\tindex,\n\tonClickMainMenuLogic,\n\tsetHandleHoverForFullLayout,\n\tisDisabled,\n\tsetHoveredComp,\n\tsetPopupMenu,\n\tmainActiveMenu,\n\thoveredComp,\n\tpopupMenu,\n}) => {\n\treturn (\n\t\t<SibeBarMenuItem>\n\t\t\t<div\n\t\t\t\tid={option.displayName?.split(' ')?.join('') \|\| option.key.toString()}\n\t\t\t\tclassName=\"main--sidebar\"\n\t\t\t\tkey={index}\n\t\t\t\tonClick={() => onClickMainMenuLogic(option)}\n\t\t\t\tonMouseEnter={() => {\n\t\t\t\t\t!isDisabled && setHandleHoverForFullLayout(option);\n\t\t\t\t}}\n\t\t\t\tonMouseOver={() => {\n\t\t\t\t\t!isDisabled && setHandleHoverForFullLayout(option);\n\t\t\t\t}}\n\t\t\t\tonMouseLeave={() => {\n\t\t\t\t\tif (!option?.children?.length) {\n\t\t\t\t\t\tsetHoveredComp(undefined);\n\t\t\t\t\t\tsetPopupMenu(undefined);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonFocus={() => {}}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t{option.isNew && (\n\t\t\t\t\t<div className={`new-tag ${option.isLastSticky ? 'tag-sticky' : ''}`}>\n\t\t\t\t\t\tNEW\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{option.isLocked && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`locked--channel ${\n\t\t\t\t\t\t\toption.isLastSticky ? 'tag-sticky' : ''\n\t\t\t\t\t\t} ${option.is2ndLastSticky ? 'tag-sticky-2' : ''}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<LockedIcon height={16} width={16} />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tkey={index}\n\t\t\t\t\tid={\n\t\t\t\t\t\toption.displayName?.split(' ')?.join('') + '_sub' \|\|\n\t\t\t\t\t\toption.key.toString() + '_sub'\n\t\t\t\t\t}\n\t\t\t\t\tclassName={`sidebar-menu-item \n\t\t\t\t\t${mainActiveMenu?.key === option.key ? 'main-menu-active-class' : ''} \n\t\t\t\t\t${option.isLastSticky ? 'sticky-menu-int' : ''} \n\t\t\t\t\t${option.is2ndLastSticky ? 'sticky-menu' : ''} \n\t\t\t\t\t${option.key === hoveredComp?.key ? 'sidebar-menu-item-hover' : ''} \n\t\t\t\t\t${option.isNew ? 'new-menu-item' : ''}`}\n\t\t\t\t>\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\ticon={option.icon}\n\t\t\t\t\t\tisActive={option.key == mainActiveMenu?.key}\n\t\t\t\t\t\tactiveStateIcon={\n\t\t\t\t\t\t\toption.activeIcon ??\n\t\t\t\t\t\t\t({} as React.FunctionComponent<React.SVGAttributes<SVGElement>>)\n\t\t\t\t\t\t}\n\t\t\t\t\t\thoverStateIcon={\n\t\t\t\t\t\t\toption.hoverIcon ??\n\t\t\t\t\t\t\t({} as React.FunctionComponent<React.SVGAttributes<SVGElement>>)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisHovered={\n\t\t\t\t\t\t\toption.key == hoveredComp?.key \|\| option.key == popupMenu?.key\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"menu-item-container\">\n\t\t\t\t\t\t<p\n\t\t\t\t\t\t\tclassName={`menu-item-text ${\n\t\t\t\t\t\t\t\toption?.key === mainActiveMenu?.key\n\t\t\t\t\t\t\t\t\t? 'active-menu-item-text'\n\t\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{option.displayName}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</SibeBarMenuItem>\n\t);\n};\n"],"names":["BikSidebar","bikSidebarProps","logoSvg","allMenuList","activeMainMenu","activeSubMenu","router","onClickingMainMenu","onClickingSubMenu","onClickingAccessUpgradePanel","onClickingPopupMenuItem","popupMinHeight","isNewSidebar","menuStyle","mainActiveMenu","setMainActiveMenu","useState","hoveredComp","setHoveredComp","subActiveMenu","setSubActiveMenu","isDisabled","setIsDisabled","popupMenu","setPopupMenu","popupMenuTop","setPopupMenuTop","sidebarEachMenuTop","setSidebarEachMenuTop","autoCloseTimer","setAutoCloseTimer","numberOfStickyOptions","useMemo","menu","useEffect","onClickMainMenuLogic","useCallback","option","setHandleHoverForFullLayout","clearRemnantTimers","top","determineElementTop","targetElement","topValue","calculateTopSideBarPosition","initiateAutoClose","targetRect","innerStickyElements","innerStickyElement","element","distanceToBottom","handleResize","newTop","determineSideMenuTopWhileResize","openSideMenuElementHeight","currentId","sideMenuRect","divBoxTop","popupHeight","timer","SideBarContainer","jsx","BikIcon","jsxs","MainSideBarMenuWrapper","index","Fragment","NavigationHyperlink","EachSidebarMenuItem","SidebarPopup","popupMenuSelected","SimpleSidebar","menuSelected","reDirect","SibeBarMenuItem","CircularProgressBar","IconComponent","iconComponentProps","icon","isActive","activeStateIcon","hoverStateIcon","isHovered","COLORS","LockedIcon"],"mappings":"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"}

package/dist/esm/components/bik-layout/CommonStyles.js CHANGED Viewed

@@ -87,7 +87,7 @@ const f = t.div`
 	z-index: 10;
 `, m = t.div`
 	background-color: ${o.colorsV2.surface.standard};
-	border-bottom: 1px solid #e0e0e0;
+	border-bottom: 0.5px solid #e0e0e0;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;

package/dist/esm/components/bik-layout/CommonStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CommonStyles.js","sources":["../../../../src/components/bik-layout/CommonStyles.tsx"],"sourcesContent":["import { Dropdown, Tooltip } from 'react-bootstrap';\nimport styled from 'styled-components';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { ComponentZindex } from '@src/constants/zindex';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\n\nexport const GlobalContainer = styled.div`\n\t.global-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\twidth: 100%;\n\t}\n\t.component-container {\n\t\tflex: 1 1 0%;\n\t}\n`;\n\n//page spinner\nexport const LoaderWrapper = styled.div`\n\twidth: 100%;\n\theight: 100vh;\n\tmargin: 0;\n\tbackground-color: rgba(0, 0, 0, 0.6);\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\talign-content: center;\n\t.inner {\n\t\twidth: 100%;\n\t\theight: 100vh;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 40px;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\t\tbox-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);\n\t\tborder-radius: 4px;\n\t\tflex-direction: column;\n\t}\n\n\t.loader {\n\t\twidth: 48px;\n\t\theight: 48px;\n\t\tborder: 5px solid ${DEFAULT_THEME.colorsV2.stroke.brand};\n\t\tborder-bottom-color: transparent;\n\t\tborder-radius: 50%;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t\tanimation: rotation 1s linear infinite;\n\t}\n\n\t@keyframes rotation {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n`;\nexport const LoadingMessageWrapper = styled.div`\n\tmargin-top: 16px;\n`;\n\n//bik-layout\nexport const BikLayoutContainer = styled.div<{\n\ttype?: 'overflow-within' \| 'overflow-body';\n\tbackgroundColor?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\t${(props) => {\n\t\tif (props.type === 'overflow-within') {\n\t\t\treturn `\n flex-grow: 0 !important;\n flex-shrink: 0 !important;\n flex-basis: calc(100vh - 56px) !important;\n overflow: scroll;\n `;\n\t\t} else {\n\t\t\treturn 'flex: 1;';\n\t\t}\n\t}}\n\tbackground-color: ${(props) =>\n\t\tprops.backgroundColor ?? DEFAULT_THEME.colorsV2.surface.hovered};\n\t.pd-24 {\n\t\tpadding: 24px;\n\t}\n\t.inner-wrapper {\n\t\twidth: 100%;\n\t}\n\t.disabled--wrapper {\n\t\tposition: fixed;\n\t\topacity: 0.5;\n\t\tz-index: 4;\n\t\theight: 500vh;\n\t\twidth: 100%;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\n\n//bik-\n\nexport const BikHeaderWrapper = styled.div`\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 10;\n`;\n\nexport const BikHeaderContainer = styled.div`\n\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\tborder-bottom: 1px solid #e0e0e0;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\talign-items: center;\n\theight: 56px;\n\tborder-bottom-width: 0.5px;\n\tborder-color: ${DEFAULT_THEME.colorsV2.background.inactive};\n\tpadding: 16px;\n\t.cursor {\n\t\tcursor: pointer;\n\t}\n\t.brand {\n\t\tcolor: ${DEFAULT_THEME.colorsV2.stroke.brand};\n\t}\n\t.row--flex {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t}\n`;\n\n//profile\n\nexport const MenuInnerContainer = styled.div`\n\tz-index: 1;\n\tpadding-top: 16px;\n\tpadding: 8px;\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 291px;\n\t.divider {\n\t\tborder: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n\t\tmargin: 0px 4px;\n\t}\n\t.logout--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tpadding: 8px;\n\t\tgap: 8px;\n\t\tborder-radius: 8px;\n\t\tcursor: pointer;\n\t\tmargin-top: 10px;\n\t\t&:hover {\n\t\t\tbackground-color: ${DEFAULT_THEME.colorsV2.background.negative.light};\n\t\t}\n\t}\n`;\n\nexport const ProfileDropdownToggleContainer = styled(Dropdown.Toggle)`\n\tborder-radius: 4px;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 6px 8px;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n .inner\n`;\n\nexport const ProfileDropdownInnerContainer = styled.div<{\n\tisDropdownOpen: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 0px 8px;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-radius: 50%;\n\tpadding: 6px;\n\tbackground-color: ${(props) =>\n\t\tprops.isDropdownOpen && DEFAULT_THEME.colorsV2.background.brandLight};\n\t&:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isDropdownOpen\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.brandLight\n\t\t\t\t: DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\n\nexport const UserNameTitleSmall = styled(TitleSmall)`\n\twhite-space: nowrap;\n\tmax-width: 161px;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n`;\n\nexport const UserAvatarContainer = styled.div`\n\twidth: 32px;\n\theight: 32px;\n\tborder-radius: 50%;\n\t.avatar--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.background.inverse};\n\t\tborder-radius: 50%;\n\t\twidth: 32px;\n\t\theight: 32px;\n\t}\n\timg {\n\t\tobject-fit: contain;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n`;\n\nexport const StyledTooltip = styled(Tooltip)`\n\t.tooltip-inner {\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\t\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\t}\n\t.tooltip-arrow::before {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const UserInfoContainer = styled.div`\n\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\tmin-width: 188px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tborder-top-right-radius: 4px;\n\tborder-top-left-radius: 4px;\n\tmargin-bottom: 8px;\n\tpadding: 8px;\n\tborder-radius: 8px;\n\tcursor: pointer;\n\t&:hover {\n\t\tbackground: ${DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\nexport const StatusContainer = styled.div<{ isAvailable: boolean }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tmargin-top: 4px;\n\t.availability--container {\n\t\tborder-width: 1px;\n\t\tmargin-right: 4px;\n\t\theight: 6px;\n\t\twidth: 6px;\n\t\tborder-style: solid;\n\t\tborder-color: ${(props) =>\n\t\t\tprops.isAvailable\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isAvailable\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t\t: DEFAULT_THEME.colorsV2.surface.standard};\n\t\tborder-radius: 4px;\n\t}\n`;\n\nexport const UserStatusContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-left: 16px;\n\tjustify-content: space-between;\n\tjustify-content: flex-start;\n`;\n\nexport const StyledBodyCaption = styled(BodyCaption)<{\n\tisAvailable: boolean;\n}>`\n\tcolor: ${(props) =>\n\t\tprops.isAvailable\n\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n`;\n\n//feature modal\n\nexport const FeatureModalContainer = styled.div<{\n\tzIndex?: number;\n\tresetHeight?: boolean;\n\trelativePostion?: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tposition: fixed;\n\tbottom: 0;\n\twidth: fill-available;\n\theight: ${(props) => (props.resetHeight ? 'fit-content' : '650px')};\n\tpadding: 24px;\n\tz-index: ${(props) =>\n\t\tprops.zIndex ? props.zIndex : ComponentZindex.FEATURE_MODAL};\n\tbackground: linear-gradient(\n\t\t180deg,\n\t\trgba(255, 255, 255, 0) 0%,\n\t\t#ffffff 71.35%\n\t);\n\tfilter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.12));\n\t.cross-button {\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tbackground-color: ${COLORS.scrim.standard};\n\t\tborder-radius: 50%;\n\t\tposition: fixed;\n\t\tmargin: auto;\n\t\tbottom: 164px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t\tcursor: pointer;\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 5)};\n\t}\n`;\n\nexport const InnerModalContainer = styled.div`\n\twidth: 100%;\n\theight: 132px;\n\tbackground: ${COLORS.background.inverse};\n\tbox-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);\n\tborder-radius: 8px;\n\n\t.mt-8 {\n\t\tmargin-top: 9px;\n\t}\n\t.content-layout {\n\t\tpadding: 24px;\n\t\tgap: 8px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\n\t.cta-buttons {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t}\n\t.title-color {\n\t\tcolor: ${COLORS.surface.subdued};\n\t}\n\t.subtitle-color {\n\t\tcolor: ${COLORS.content.secondaryInverse};\n\t}\n`;\nexport const RelativeModalContainer = styled.div`\n\twidth: fit-content;\n\tborder-radius: 8px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tposition: relative;\n\n\t.cross-container {\n\t\tposition: absolute;\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t\tjustify-content: flex-end;\n\t\tpadding: 12px;\n\t\tcursor: pointer;\n\t}\n\t.demo-container {\n\t\tpadding: 18px 24px;\n\t\tborder: 1px solid var(--stroke-color-stroke-negative-light-alt, #ffced4);\n\t\tbackground: var(--surface-color-background-negative-light, #ffebef);\n\t\tgap: 8px;\n\t\theight: 132px;\n\t\tmax-width: 494px;\n\t\tborder-radius: 8px;\n\t}\n\t.content-layout {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: flex-start;\n\t\tjustify-content: flex-start;\n\t\theight: 220px;\n\t}\n\t.left-content {\n\t\twidth: 261px;\n\t\timg {\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tobject-fit: contain;\n\t\t}\n\t}\n\t.right-content {\n\t\tpadding: 36px 24px;\n\t\theight: 100%;\n\t\tbackground-color: white;\n\t\t> * {\n\t\t\tmargin-top: 8px;\n\t\t}\n\t}\n\t.cta-button-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t\tmargin-top: 16px;\n\t}\n`;\n\nexport const FeatureModalV2Container = styled.div`\n\t.top-feature-content {\n\t\tmax-height: 285px;\n\t\timg {\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tobject-fit: contain;\n\t\t}\n\t}\n\t.mt-8 {\n\t\tmargin-top: 8px;\n\t}\n\t.bottom-feature-content {\n\t\tpadding: 36px 20px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 16px;\n\t}\n\t.cta-buttons {\n\t\twidth: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t\tjustify-content: center;\n\t\tmargin-top: 8px;\n\t}\n\t.title-class {\n\t\tmax-width: 500px;\n\t}\n\t.text-align-center {\n\t\ttext-align: center;\n\t}\n`;\n"],"names":["styled","LoaderWrapper","DEFAULT_THEME","LoadingMessageWrapper","BikLayoutContainer","props","BikHeaderWrapper","BikHeaderContainer","MenuInnerContainer","ProfileDropdownToggleContainer","Dropdown","ProfileDropdownInnerContainer","UserNameTitleSmall","TitleSmall","UserAvatarContainer","StyledTooltip","Tooltip","UserInfoContainer","StatusContainer","UserStatusContainer","StyledBodyCaption","BodyCaption","FeatureModalContainer","ComponentZindex","COLORS","InnerModalContainer","RelativeModalContainer","FeatureModalV2Container"],"mappings":"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"}
1	+ {"version":3,"file":"CommonStyles.js","sources":["../../../../src/components/bik-layout/CommonStyles.tsx"],"sourcesContent":["import { Dropdown, Tooltip } from 'react-bootstrap';\nimport styled from 'styled-components';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { ComponentZindex } from '@src/constants/zindex';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\n\nexport const GlobalContainer = styled.div`\n\t.global-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\twidth: 100%;\n\t}\n\t.component-container {\n\t\tflex: 1 1 0%;\n\t}\n`;\n\n//page spinner\nexport const LoaderWrapper = styled.div`\n\twidth: 100%;\n\theight: 100vh;\n\tmargin: 0;\n\tbackground-color: rgba(0, 0, 0, 0.6);\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\talign-content: center;\n\t.inner {\n\t\twidth: 100%;\n\t\theight: 100vh;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 40px;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\t\tbox-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);\n\t\tborder-radius: 4px;\n\t\tflex-direction: column;\n\t}\n\n\t.loader {\n\t\twidth: 48px;\n\t\theight: 48px;\n\t\tborder: 5px solid ${DEFAULT_THEME.colorsV2.stroke.brand};\n\t\tborder-bottom-color: transparent;\n\t\tborder-radius: 50%;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t\tanimation: rotation 1s linear infinite;\n\t}\n\n\t@keyframes rotation {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n`;\nexport const LoadingMessageWrapper = styled.div`\n\tmargin-top: 16px;\n`;\n\n//bik-layout\nexport const BikLayoutContainer = styled.div<{\n\ttype?: 'overflow-within' \| 'overflow-body';\n\tbackgroundColor?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\t${(props) => {\n\t\tif (props.type === 'overflow-within') {\n\t\t\treturn `\n flex-grow: 0 !important;\n flex-shrink: 0 !important;\n flex-basis: calc(100vh - 56px) !important;\n overflow: scroll;\n `;\n\t\t} else {\n\t\t\treturn 'flex: 1;';\n\t\t}\n\t}}\n\tbackground-color: ${(props) =>\n\t\tprops.backgroundColor ?? DEFAULT_THEME.colorsV2.surface.hovered};\n\t.pd-24 {\n\t\tpadding: 24px;\n\t}\n\t.inner-wrapper {\n\t\twidth: 100%;\n\t}\n\t.disabled--wrapper {\n\t\tposition: fixed;\n\t\topacity: 0.5;\n\t\tz-index: 4;\n\t\theight: 500vh;\n\t\twidth: 100%;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\n\n//bik-\n\nexport const BikHeaderWrapper = styled.div`\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 10;\n`;\n\nexport const BikHeaderContainer = styled.div`\n\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\tborder-bottom: 0.5px solid #e0e0e0;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\talign-items: center;\n\theight: 56px;\n\tborder-bottom-width: 0.5px;\n\tborder-color: ${DEFAULT_THEME.colorsV2.background.inactive};\n\tpadding: 16px;\n\t.cursor {\n\t\tcursor: pointer;\n\t}\n\t.brand {\n\t\tcolor: ${DEFAULT_THEME.colorsV2.stroke.brand};\n\t}\n\t.row--flex {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t}\n`;\n\n//profile\n\nexport const MenuInnerContainer = styled.div`\n\tz-index: 1;\n\tpadding-top: 16px;\n\tpadding: 8px;\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 291px;\n\t.divider {\n\t\tborder: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n\t\tmargin: 0px 4px;\n\t}\n\t.logout--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tpadding: 8px;\n\t\tgap: 8px;\n\t\tborder-radius: 8px;\n\t\tcursor: pointer;\n\t\tmargin-top: 10px;\n\t\t&:hover {\n\t\t\tbackground-color: ${DEFAULT_THEME.colorsV2.background.negative.light};\n\t\t}\n\t}\n`;\n\nexport const ProfileDropdownToggleContainer = styled(Dropdown.Toggle)`\n\tborder-radius: 4px;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 6px 8px;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n .inner\n`;\n\nexport const ProfileDropdownInnerContainer = styled.div<{\n\tisDropdownOpen: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 0px 8px;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-radius: 50%;\n\tpadding: 6px;\n\tbackground-color: ${(props) =>\n\t\tprops.isDropdownOpen && DEFAULT_THEME.colorsV2.background.brandLight};\n\t&:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isDropdownOpen\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.brandLight\n\t\t\t\t: DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\n\nexport const UserNameTitleSmall = styled(TitleSmall)`\n\twhite-space: nowrap;\n\tmax-width: 161px;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n`;\n\nexport const UserAvatarContainer = styled.div`\n\twidth: 32px;\n\theight: 32px;\n\tborder-radius: 50%;\n\t.avatar--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.background.inverse};\n\t\tborder-radius: 50%;\n\t\twidth: 32px;\n\t\theight: 32px;\n\t}\n\timg {\n\t\tobject-fit: contain;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n`;\n\nexport const StyledTooltip = styled(Tooltip)`\n\t.tooltip-inner {\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\t\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\t}\n\t.tooltip-arrow::before {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const UserInfoContainer = styled.div`\n\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\tmin-width: 188px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tborder-top-right-radius: 4px;\n\tborder-top-left-radius: 4px;\n\tmargin-bottom: 8px;\n\tpadding: 8px;\n\tborder-radius: 8px;\n\tcursor: pointer;\n\t&:hover {\n\t\tbackground: ${DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\nexport const StatusContainer = styled.div<{ isAvailable: boolean }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tmargin-top: 4px;\n\t.availability--container {\n\t\tborder-width: 1px;\n\t\tmargin-right: 4px;\n\t\theight: 6px;\n\t\twidth: 6px;\n\t\tborder-style: solid;\n\t\tborder-color: ${(props) =>\n\t\t\tprops.isAvailable\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isAvailable\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t\t: DEFAULT_THEME.colorsV2.surface.standard};\n\t\tborder-radius: 4px;\n\t}\n`;\n\nexport const UserStatusContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-left: 16px;\n\tjustify-content: space-between;\n\tjustify-content: flex-start;\n`;\n\nexport const StyledBodyCaption = styled(BodyCaption)<{\n\tisAvailable: boolean;\n}>`\n\tcolor: ${(props) =>\n\t\tprops.isAvailable\n\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n`;\n\n//feature modal\n\nexport const FeatureModalContainer = styled.div<{\n\tzIndex?: number;\n\tresetHeight?: boolean;\n\trelativePostion?: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tposition: fixed;\n\tbottom: 0;\n\twidth: fill-available;\n\theight: ${(props) => (props.resetHeight ? 'fit-content' : '650px')};\n\tpadding: 24px;\n\tz-index: ${(props) =>\n\t\tprops.zIndex ? props.zIndex : ComponentZindex.FEATURE_MODAL};\n\tbackground: linear-gradient(\n\t\t180deg,\n\t\trgba(255, 255, 255, 0) 0%,\n\t\t#ffffff 71.35%\n\t);\n\tfilter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.12));\n\t.cross-button {\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tbackground-color: ${COLORS.scrim.standard};\n\t\tborder-radius: 50%;\n\t\tposition: fixed;\n\t\tmargin: auto;\n\t\tbottom: 164px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t\tcursor: pointer;\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 5)};\n\t}\n`;\n\nexport const InnerModalContainer = styled.div`\n\twidth: 100%;\n\theight: 132px;\n\tbackground: ${COLORS.background.inverse};\n\tbox-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);\n\tborder-radius: 8px;\n\n\t.mt-8 {\n\t\tmargin-top: 9px;\n\t}\n\t.content-layout {\n\t\tpadding: 24px;\n\t\tgap: 8px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\n\t.cta-buttons {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t}\n\t.title-color {\n\t\tcolor: ${COLORS.surface.subdued};\n\t}\n\t.subtitle-color {\n\t\tcolor: ${COLORS.content.secondaryInverse};\n\t}\n`;\nexport const RelativeModalContainer = styled.div`\n\twidth: fit-content;\n\tborder-radius: 8px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tposition: relative;\n\n\t.cross-container {\n\t\tposition: absolute;\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t\tjustify-content: flex-end;\n\t\tpadding: 12px;\n\t\tcursor: pointer;\n\t}\n\t.demo-container {\n\t\tpadding: 18px 24px;\n\t\tborder: 1px solid var(--stroke-color-stroke-negative-light-alt, #ffced4);\n\t\tbackground: var(--surface-color-background-negative-light, #ffebef);\n\t\tgap: 8px;\n\t\theight: 132px;\n\t\tmax-width: 494px;\n\t\tborder-radius: 8px;\n\t}\n\t.content-layout {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: flex-start;\n\t\tjustify-content: flex-start;\n\t\theight: 220px;\n\t}\n\t.left-content {\n\t\twidth: 261px;\n\t\timg {\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tobject-fit: contain;\n\t\t}\n\t}\n\t.right-content {\n\t\tpadding: 36px 24px;\n\t\theight: 100%;\n\t\tbackground-color: white;\n\t\t> * {\n\t\t\tmargin-top: 8px;\n\t\t}\n\t}\n\t.cta-button-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t\tmargin-top: 16px;\n\t}\n`;\n\nexport const FeatureModalV2Container = styled.div`\n\t.top-feature-content {\n\t\tmax-height: 285px;\n\t\timg {\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tobject-fit: contain;\n\t\t}\n\t}\n\t.mt-8 {\n\t\tmargin-top: 8px;\n\t}\n\t.bottom-feature-content {\n\t\tpadding: 36px 20px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 16px;\n\t}\n\t.cta-buttons {\n\t\twidth: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t\tjustify-content: center;\n\t\tmargin-top: 8px;\n\t}\n\t.title-class {\n\t\tmax-width: 500px;\n\t}\n\t.text-align-center {\n\t\ttext-align: center;\n\t}\n`;\n"],"names":["styled","LoaderWrapper","DEFAULT_THEME","LoadingMessageWrapper","BikLayoutContainer","props","BikHeaderWrapper","BikHeaderContainer","MenuInnerContainer","ProfileDropdownToggleContainer","Dropdown","ProfileDropdownInnerContainer","UserNameTitleSmall","TitleSmall","UserAvatarContainer","StyledTooltip","Tooltip","UserInfoContainer","StatusContainer","UserStatusContainer","StyledBodyCaption","BodyCaption","FeatureModalContainer","ComponentZindex","COLORS","InnerModalContainer","RelativeModalContainer","FeatureModalV2Container"],"mappings":"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"}

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

@@ -3,8 +3,6 @@ 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.js CHANGED Viewed

@@ -1,17 +1,17 @@
-import { jsx as t, jsxs as B, Fragment as F } from "react/jsx-runtime";
-import s, { forwardRef as G, useCallback as P } from "react";
-import { Button as W, ButtonCustomDashedBorder as $ } from "./Button.styled.js";
-import { getButtonIconColor as q, SpinnerColorMap as z, GetButtonTextComponent as A } from "./themes.js";
+import { jsx as t, jsxs as u, Fragment as D } from "react/jsx-runtime";
+import s, { forwardRef as F, useCallback as G } from "react";
+import { Button as P, ButtonCustomDashedBorder as W } from "./Button.styled.js";
+import { getButtonIconColor as $, SpinnerColorMap as q, GetButtonTextComponent as A } from "./themes.js";
 import { Spinner as H } from "../spinner/Spinner.js";
-const J = G(
+const J = F(
   ({
-    version: u,
+    version: x,
     id: v,
-    buttonType: l = "primary",
-    size: e = "small",
-    buttonText: m,
+    buttonType: e = "primary",
+    size: l = "small",
+    buttonText: i,
     disabled: a,
-    IconComponent: i,
+    IconComponent: m,
     LeadingIcon: d,
     TrailingIcon: h,
     isLoading: r,
@@ -29,39 +29,39 @@ const J = G(
     LeadingIconStyles: _,
     ...N
   }, g) => {
-    const D = A(
-      e,
+    const z = A(
       l,
-      a
-    ), f = q(
       e,
+      a
+    ), f = $(
       l,
+      e,
       n,
       a,
       r,
       p
-    ), o = P(() => {
-      const x = e === "chip" || e === "xs" ? 16 : 20;
+    ), o = G(() => {
+      const B = l === "chip" ? 16 : 20;
       return {
-        height: x,
-        width: x,
+        height: B,
+        width: B,
         color: c || f,
         style: { display: "block" },
         className: "icon"
       };
-    }, [e, c, f]);
+    }, [l, c, f]);
     return /* @__PURE__ */ t(
-      W,
+      P,
       {
         "data-test": N["data-test"],
-        version: u,
+        version: x,
         onClick: r ? () => {
         } : y,
         ref: g,
         id: v,
         disabled: a,
-        size: e,
-        buttonType: l,
+        size: l,
+        buttonType: e,
         isLoading: r,
         inverse: n,
         matchParentWidth: C,
@@ -70,17 +70,17 @@ const J = G(
         error: j,
         buttonColor: R,
         ...N,
-        children: /* @__PURE__ */ B("div", { className: "button-container", children: [
-          l.startsWith("dash") && /* @__PURE__ */ t($, {}),
+        children: /* @__PURE__ */ u("div", { className: "button-container", children: [
+          e.startsWith("dash") && /* @__PURE__ */ t(W, {}),
           /* @__PURE__ */ t("div", { className: "overlay-container", children: r && /* @__PURE__ */ t(
             H,
             {
               className: "spinner",
               size: "small",
-              color: z(l, n)
+              color: q(e, n)
             }
           ) }),
-          i && /* @__PURE__ */ t("div", { className: "icon-component", children: s.createElement(i, o()) }),
+          m && /* @__PURE__ */ t("div", { className: "icon-component", children: s.createElement(m, o()) }),
           d && /* @__PURE__ */ t(
             "div",
             {
@@ -89,8 +89,8 @@ const J = G(
               children: s.createElement(d, o())
             }
           ),
-          m ? /* @__PURE__ */ B(
-            D,
+          i ? /* @__PURE__ */ u(
+            z,
             {
               className: "text",
               style: {
@@ -98,11 +98,11 @@ const J = G(
                 fontSize: w
               },
               children: [
-                m,
+                i,
                 /* @__PURE__ */ t("div", { className: "text-subtitle", children: E })
               ]
             }
-          ) : /* @__PURE__ */ t(F, {}),
+          ) : /* @__PURE__ */ t(D, {}),
           h && /* @__PURE__ */ t("div", { className: "icon-trailing", style: { zIndex: 1 }, children: s.createElement(h, o()) })
         ] })
       }

package/dist/esm/components/button/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import { forwardRef, useCallback } from 'react';\nimport React from 'react';\nimport { Spinner } from '../spinner';\nimport * as Sc from './Button.styled';\nimport { ButtonProps } from './model';\nimport {\n\tgetButtonIconColor,\n\tGetButtonTextComponent,\n\tSpinnerColorMap,\n} from './themes';\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tversion,\n\t\t\tid,\n\t\t\tbuttonType = 'primary',\n\t\t\tsize = 'small',\n\t\t\tbuttonText,\n\t\t\tdisabled,\n\t\t\tIconComponent,\n\t\t\tLeadingIcon,\n\t\t\tTrailingIcon,\n\t\t\tisLoading,\n\t\t\tinverse,\n\t\t\tonClick,\n\t\t\tmatchParentWidth,\n\t\t\tsubtitle,\n\t\t\tdarkMode,\n\t\t\tactivated,\n\t\t\terror,\n\t\t\tbuttonTextColor,\n\t\t\tbuttonFontSize,\n\t\t\tcustomIconColor,\n\t\t\tbuttonColor,\n\t\t\tLeadingIconStyles,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ButtonTextElement = GetButtonTextComponent(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tdisabled,\n\t\t);\n\n\t\tconst iconColor = getButtonIconColor(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tinverse,\n\t\t\tdisabled,\n\t\t\tisLoading,\n\t\t\tdarkMode,\n\t\t);\n\n\t\tconst getIconProps = useCallback(() => {\n\t\t\tconst iconSize = size === 'chip' ~~\|\| size === 'xs'~~ ? 16 : 20;\n\t\t\treturn {\n\t\t\t\theight: iconSize,\n\t\t\t\twidth: iconSize,\n\t\t\t\tcolor: customIconColor ? customIconColor : iconColor,\n\t\t\t\tstyle: { display: 'block' },\n\t\t\t\tclassName: 'icon',\n\t\t\t};\n\t\t}, [size, customIconColor, iconColor]);\n\n\t\treturn (\n\t\t\t<Sc.Button\n\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\tversion={version}\n\t\t\t\tonClick={\n\t\t\t\t\tisLoading\n\t\t\t\t\t\t? () => {\n\t\t\t\t\t\t\t\t// Do nothing\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: onClick\n\t\t\t\t}\n\t\t\t\tref={ref}\n\t\t\t\tid={id}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tsize={size}\n\t\t\t\tbuttonType={buttonType}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tinverse={inverse}\n\t\t\t\tmatchParentWidth={matchParentWidth}\n\t\t\t\tdarkMode={darkMode}\n\t\t\t\tactivated={activated}\n\t\t\t\terror={error}\n\t\t\t\tbuttonColor={buttonColor}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<div className=\"button-container\">\n\t\t\t\t\t{buttonType.startsWith('dash') && <Sc.ButtonCustomDashedBorder />}\n\t\t\t\t\t<div className=\"overlay-container\">\n\t\t\t\t\t\t{isLoading && (\n\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tcolor={SpinnerColorMap(buttonType, inverse)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{IconComponent && (\n\t\t\t\t\t\t<div className=\"icon-component\">\n\t\t\t\t\t\t\t{React.createElement(IconComponent, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{LeadingIcon && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tstyle={{ zIndex: 1, ...LeadingIconStyles }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{buttonText ? (\n\t\t\t\t\t\t<ButtonTextElement\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: buttonTextColor,\n\t\t\t\t\t\t\t\tfontSize: buttonFontSize,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{buttonText}\n\t\t\t\t\t\t\t<div className=\"text-subtitle\">{subtitle}</div>\n\t\t\t\t\t\t</ButtonTextElement>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t\t{TrailingIcon && (\n\t\t\t\t\t\t<div className=\"icon-trailing\" style={{ zIndex: 1 }}>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Sc.Button>\n\t\t);\n\t},\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","version","id","buttonType","size","buttonText","disabled","IconComponent","LeadingIcon","TrailingIcon","isLoading","inverse","onClick","matchParentWidth","subtitle","darkMode","activated","error","buttonTextColor","buttonFontSize","customIconColor","buttonColor","LeadingIconStyles","rest","ref","ButtonTextElement","GetButtonTextComponent","iconColor","getButtonIconColor","getIconProps","useCallback","iconSize","jsx","Sc.Button","jsxs","Sc.ButtonCustomDashedBorder","Spinner","SpinnerColorMap","React","Fragment"],"mappings":";;;;;AAWO,MAAMA,IAASC;AAAA,EACrB,CACC;AAAA,IACC,SAAAC;AAAA,IACA,IAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,MAAAC,IAAO;AAAA,IACP,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEJC,MACI;AACJ,UAAMC,IAAoBC;AAAA,MACzBtB;AAAA,MACAD;AAAA,MACAG;AAAA,IAAA,GAGKqB,IAAYC;AAAA,MACjBxB;AAAA,MACAD;AAAA,MACAQ;AAAA,MACAL;AAAA,MACAI;AAAA,MACAK;AAAA,IAAA,GAGKc,IAAeC,EAAY,MAAM;AACtC,YAAMC,IAAW3B,MAAS,~~UAAUA~~,~~MAAS,OAAO,~~KAAK;~~AACzD~~,aAAO;AAAA,QACN,QAAQ2B;AAAA,QACR,OAAOA;AAAA,QACP,OAAOX,KAAoCO;AAAA,QAC3C,OAAO,EAAE,SAAS,QAAA;AAAA,QAClB,WAAW;AAAA,MAAA;AAAA,IAEb,GAAG,CAACvB,GAAMgB,GAAiBO,CAAS,CAAC;AAErC,WACC,gBAAAK;AAAA,MAACC;AAAAA,MAAA;AAAA,QACA,aAAWV,EAAK,WAAW;AAAA,QAC3B,SAAAtB;AAAA,QACA,SACCS,IACG,MAAM;AAAA,QAEN,IACAE;AAAA,QAEJ,KAAAY;AAAA,QACA,IAAAtB;AAAA,QACA,UAAAI;AAAA,QACA,MAAAF;AAAA,QACA,YAAAD;AAAA,QACA,WAAAO;AAAA,QACA,SAAAC;AAAA,QACA,kBAAAE;AAAA,QACA,UAAAE;AAAA,QACA,WAAAC;AAAA,QACA,OAAAC;AAAA,QACA,aAAAI;AAAA,QACC,GAAGE;AAAA,QAEJ,UAAA,gBAAAW,EAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,UAAA/B,EAAW,WAAW,MAAM,KAAK,gBAAA6B,EAACG,GAAA,CAAA,CAA4B;AAAA,UAC/D,gBAAAH,EAAC,OAAA,EAAI,WAAU,qBACb,UAAAtB,KACA,gBAAAsB;AAAA,YAACI;AAAA,YAAA;AAAA,cACA,WAAU;AAAA,cACV,MAAK;AAAA,cACL,OAAOC,EAAgBlC,GAAYQ,CAAO;AAAA,YAAA;AAAA,UAAA,GAG7C;AAAA,UACCJ,KACA,gBAAAyB,EAAC,OAAA,EAAI,WAAU,kBACb,YAAM,cAAczB,GAAesB,EAAA,CAAc,EAAA,CACnD;AAAA,UAEArB,KACA,gBAAAwB;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,WAAU;AAAA,cACV,OAAO,EAAE,QAAQ,GAAG,GAAGV,EAAA;AAAA,cAEtB,UAAAgB,EAAM,cAAc9B,GAAaqB,EAAA,CAAc;AAAA,YAAA;AAAA,UAAA;AAAA,UAGjDxB,IACA,gBAAA6B;AAAA,YAACT;AAAA,YAAA;AAAA,cACA,WAAU;AAAA,cACV,OAAO;AAAA,gBACN,OAAOP;AAAA,gBACP,UAAUC;AAAA,cAAA;AAAA,cAGV,UAAA;AAAA,gBAAAd;AAAA,gBACD,gBAAA2B,EAAC,OAAA,EAAI,WAAU,iBAAiB,UAAAlB,EAAA,CAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA,IAG1C,gBAAAkB,EAAAO,GAAA,EAAE;AAAA,UAEF9B,KACA,gBAAAuB,EAAC,OAAA,EAAI,WAAU,iBAAgB,OAAO,EAAE,QAAQ,EAAA,GAC9C,UAAAM,EAAM,cAAc7B,GAAcoB,EAAA,CAAc,EAAA,CAClD;AAAA,QAAA,EAAA,CAEF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGH;AACD;AAEA9B,EAAO,cAAc;"}
1	+ {"version":3,"file":"Button.js","sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import { forwardRef, useCallback } from 'react';\nimport React from 'react';\nimport { Spinner } from '../spinner';\nimport * as Sc from './Button.styled';\nimport { ButtonProps } from './model';\nimport {\n\tgetButtonIconColor,\n\tGetButtonTextComponent,\n\tSpinnerColorMap,\n} from './themes';\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tversion,\n\t\t\tid,\n\t\t\tbuttonType = 'primary',\n\t\t\tsize = 'small',\n\t\t\tbuttonText,\n\t\t\tdisabled,\n\t\t\tIconComponent,\n\t\t\tLeadingIcon,\n\t\t\tTrailingIcon,\n\t\t\tisLoading,\n\t\t\tinverse,\n\t\t\tonClick,\n\t\t\tmatchParentWidth,\n\t\t\tsubtitle,\n\t\t\tdarkMode,\n\t\t\tactivated,\n\t\t\terror,\n\t\t\tbuttonTextColor,\n\t\t\tbuttonFontSize,\n\t\t\tcustomIconColor,\n\t\t\tbuttonColor,\n\t\t\tLeadingIconStyles,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ButtonTextElement = GetButtonTextComponent(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tdisabled,\n\t\t);\n\n\t\tconst iconColor = getButtonIconColor(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tinverse,\n\t\t\tdisabled,\n\t\t\tisLoading,\n\t\t\tdarkMode,\n\t\t);\n\n\t\tconst getIconProps = useCallback(() => {\n\t\t\tconst iconSize = size === 'chip' ? 16 : 20;\n\t\t\treturn {\n\t\t\t\theight: iconSize,\n\t\t\t\twidth: iconSize,\n\t\t\t\tcolor: customIconColor ? customIconColor : iconColor,\n\t\t\t\tstyle: { display: 'block' },\n\t\t\t\tclassName: 'icon',\n\t\t\t};\n\t\t}, [size, customIconColor, iconColor]);\n\n\t\treturn (\n\t\t\t<Sc.Button\n\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\tversion={version}\n\t\t\t\tonClick={\n\t\t\t\t\tisLoading\n\t\t\t\t\t\t? () => {\n\t\t\t\t\t\t\t\t// Do nothing\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: onClick\n\t\t\t\t}\n\t\t\t\tref={ref}\n\t\t\t\tid={id}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tsize={size}\n\t\t\t\tbuttonType={buttonType}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tinverse={inverse}\n\t\t\t\tmatchParentWidth={matchParentWidth}\n\t\t\t\tdarkMode={darkMode}\n\t\t\t\tactivated={activated}\n\t\t\t\terror={error}\n\t\t\t\tbuttonColor={buttonColor}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<div className=\"button-container\">\n\t\t\t\t\t{buttonType.startsWith('dash') && <Sc.ButtonCustomDashedBorder />}\n\t\t\t\t\t<div className=\"overlay-container\">\n\t\t\t\t\t\t{isLoading && (\n\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tcolor={SpinnerColorMap(buttonType, inverse)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{IconComponent && (\n\t\t\t\t\t\t<div className=\"icon-component\">\n\t\t\t\t\t\t\t{React.createElement(IconComponent, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{LeadingIcon && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tstyle={{ zIndex: 1, ...LeadingIconStyles }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{buttonText ? (\n\t\t\t\t\t\t<ButtonTextElement\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: buttonTextColor,\n\t\t\t\t\t\t\t\tfontSize: buttonFontSize,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{buttonText}\n\t\t\t\t\t\t\t<div className=\"text-subtitle\">{subtitle}</div>\n\t\t\t\t\t\t</ButtonTextElement>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t\t{TrailingIcon && (\n\t\t\t\t\t\t<div className=\"icon-trailing\" style={{ zIndex: 1 }}>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Sc.Button>\n\t\t);\n\t},\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","version","id","buttonType","size","buttonText","disabled","IconComponent","LeadingIcon","TrailingIcon","isLoading","inverse","onClick","matchParentWidth","subtitle","darkMode","activated","error","buttonTextColor","buttonFontSize","customIconColor","buttonColor","LeadingIconStyles","rest","ref","ButtonTextElement","GetButtonTextComponent","iconColor","getButtonIconColor","getIconProps","useCallback","iconSize","jsx","Sc.Button","jsxs","Sc.ButtonCustomDashedBorder","Spinner","SpinnerColorMap","React","Fragment"],"mappings":"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"}

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

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

package/dist/esm/components/button/Button.styled.js CHANGED Viewed

@@ -1,17 +1,16 @@
-import { jsxs as d, Fragment as r, jsx as n } from "react/jsx-runtime";
-import c from "styled-components";
+import { jsxs as d, Fragment as l, jsx as n } from "react/jsx-runtime";
+import r from "styled-components";
 import { COLORS as e } from "../../constants/Theme.js";
-import { getBackgroundColor as l, getPadding as i, getBorder as u, getColor as b, getDashedBorderStyling as o, getClickEffect as a, generateDisabledStyling as g, getDisabledTextColor as y, getHoverButtonBackgroundCustom as h, getHoverButtonBackground as $, getHoverButtonTextDecorationStyle as s, generateInverseHoverBackground as v, getLoadingBorder as x, getLoadingButtonBackgroundCustom as m, getLoadingBackground as z } from "./themes.js";
-const w = c.button`
+import { getBackgroundColor as c, getPadding as i, getBorder as u, getColor as b, getDashedBorderStyling as o, getClickEffect as a, generateDisabledStyling as g, getDisabledTextColor as y, getHoverButtonBackgroundCustom as h, getHoverButtonBackground as $, getHoverButtonTextDecorationStyle as s, generateInverseHoverBackground as v, getLoadingBorder as x, getLoadingButtonBackgroundCustom as m, getLoadingBackground as T } from "./themes.js";
+const w = r.button`
 	all: unset;
-	outline: none;
 	cursor: pointer;
 	display: flex;
 	gap: 8.83px;
 	border-radius: ${(t) => t.buttonType == "text" ? "0" : "4px"};
 	overflow: hidden;
 	${(t) => t.matchParentWidth ? "flex-grow: 1;" : ""}
-	background-color: ${(t) => l(
+	background-color: ${(t) => c(
   t.buttonType,
   t.size,
   t.inverse,
@@ -37,13 +36,13 @@ const w = c.button`
 )}`}
 	.icon-component {
-		height: ${(t) => t.size === "chip" || t.size === "xs" ? "16px" : "20px"};
-		width: ${(t) => t.size === "chip" || t.size === "xs" ? "16px" : "20px"};
+		height: ${(t) => t.size === "chip" ? "16px" : "20px"};
+		width: ${(t) => t.size === "chip" ? "16px" : "20px"};
 	}
 	.icon-trailing {
-		height: ${(t) => t.size === "chip" || t.size === "xs" ? "16px" : "20px"};
-		width: ${(t) => t.size === "chip" || t.size === "xs" ? "16px" : "20px"};
+		height: ${(t) => t.size === "chip" ? "16px" : "20px"};
+		width: ${(t) => t.size === "chip" ? "16px" : "20px"};
 	}
 	.text {
@@ -51,8 +50,8 @@ const w = c.button`
 	}
 	.icon-leading {
-		height: ${(t) => t.size === "chip" || t.size === "xs" ? "16px" : "20px"};
-		width: ${(t) => t.size === "chip" || t.size === "xs" ? "16px" : "20px"};
+		height: ${(t) => t.size === "chip" ? "16px" : "20px"};
+		width: ${(t) => t.size === "chip" ? "16px" : "20px"};
 	}
 	${(t) => o(
@@ -145,24 +144,26 @@ const w = c.button`
   )};` : ""}
 			padding: ${i(t.buttonType, t.size)};
 			.overlay-container {
-				display: flex;
-				align-items: center;
-				justify-content: center;
+				display: block;
 				position: absolute;
 				padding: 0;
+				padding-top: 1px;
 				top: 0;
 				left: 0;
 				width: 100%;
 				height: 100%;
-				${z(
+				${T(
     t.buttonType,
     t.size,
     t.inverse,
     t.buttonColor
   )}
 				.spinner {
-					line-height: 0;
+					position: absolute;
+					top: calc(50% - 14px);
+					left: calc(50% - 7px);
 				}
 			}
 		}` : `:not(:active):not(:disabled):hover {
 			padding: 0;
@@ -187,8 +188,7 @@ const w = c.button`
 					${$(t.buttonType, t.inverse)}
 				}
 				${t.size === "chip" && t.buttonType !== "text" ? t.darkMode ? `background-color: ${e.stroke.primary};` : `background-color: ${e.surface.hovered};` : ""}
-				${t.buttonType === "special" ? `background-color: ${e.background.brandLight};` : t.buttonType === "secondaryGray" ? `background-color: ${e.surface.hovered};` : ""}
-				${t.buttonType === "primary" && t.size !== "chip" && t.size !== "xs" && !t.inverse && !t.buttonColor ? `background-color: ${e.background.inverse};` : ""}
+				${t.buttonType === "primary" && t.size !== "chip" && !t.inverse && !t.buttonColor ? `background-color: ${e.background.inverse};` : ""}
 			}
 			${t.buttonType === "text" ? s(t.buttonType, t.disabled) : ""}
 			${t.inverse ? v(t.buttonType, t.disabled) : ""}
@@ -200,7 +200,7 @@ const w = c.button`
 		gap: 8.33px;
 		${(t) => t.matchParentWidth ? "margin: auto;" : ""}
 	}
-`, C = () => /* @__PURE__ */ d(r, { children: [
+`, C = () => /* @__PURE__ */ d(l, { children: [
   /* @__PURE__ */ n("div", { className: "line-top" }),
   /* @__PURE__ */ n("div", { className: "line-left" }),
   /* @__PURE__ */ n("div", { className: "line-bottom" }),