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/cjs/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","Icon","ActiveIcon","HoverIcon","COLORS","LockedIcon"],"mappings":"4dA6DaA,GAAyCC,GAAoB,CACzE,KAAM,CACL,QAAAC,EACA,YAAAC,EACA,eAAAC,EACA,cAAAC,EACA,OAAAC,EACA,mBAAAC,EACA,kBAAAC,EACA,6BAAAC,EACA,wBAAAC,EACA,eAAAC,EACA,aAAAC,EACA,UAAAC,CAAA,EACGZ,EACE,CAACa,EAAgBC,CAAiB,EACvCC,EAAAA,SAAmBZ,CAAc,EAC5B,CAACa,EAAaC,CAAc,EAAIF,WAAA,EAChC,CAACG,EAAeC,CAAgB,EAAIJ,EAAAA,SAAeX,CAAa,EAChE,CAACgB,EAAYC,CAAa,EAAIN,EAAAA,SAAS,EAAK,EAC5C,CAACO,EAAWC,CAAY,EAAIR,WAAA,EAC5B,CAACS,EAAcC,CAAe,EAAIV,WAAA,EAClC,CAACW,EAAoBC,CAAqB,EAAIZ,WAAA,EAC9C,CAACa,EAAgBC,CAAiB,EAAId,EAAAA,SAC3C,IAAA,EAEKe,EAAwBC,EAAAA,QAC7B,IACC7B,EAAY,OAAQ8B,GAASA,EAAK,iBAAmBA,EAAK,YAAY,EACpE,OACH,CAAC9B,CAAW,CAAA,EAGb+B,EAAAA,UAAU,IAAM,CACfnB,EAAkBX,CAAc,CACjC,EAAG,CAACA,CAAc,CAAC,EAEnB8B,EAAAA,UAAU,IAAM,CACfd,EAAiBf,CAAa,CAC/B,EAAG,CAACA,CAAa,CAAC,EAElB,MAAM8B,EAAuBC,EAAAA,YAC3BC,GAAqB,CACjBA,GAAQ,SAAW,UAGvBb,EAAa,MAAS,EACtBN,EAAe,MAAS,EACxBI,EAAc,EAAI,EAClBP,EAAkBsB,CAAM,EACnBA,EAAO,MACX9B,EAAmB8B,CAAM,EAE1BA,GAAQ,UAAU,OACfjB,EAAiBiB,GAAQ,SAAS,CAAC,CAAC,EACpCjB,EAAiB,EAAU,EAC9BF,EAAe,MAAS,EACxB,WAAW,IAAM,CAChBI,EAAc,EAAK,CACpB,EAAG,GAAI,EACR,EACA,CAACf,CAAkB,CAAA,EAGd+B,EAA8BF,cAAaC,GAAqB,CAIrE,GAHAE,EAAA,EACArB,EAAe,MAAS,EACxBM,EAAa,MAAS,EAClBa,GAAQ,QAAU,QAAS,CAC9B,MAAMG,EAAMC,EAAA,EACZD,GAAOd,EAAgBc,CAAG,EAC1BhB,EAAaa,CAAM,CACpB,KAAO,CACN,MAAMK,EAAgB,SAAS,eAC9BL,EAAO,aAAa,MAAM,GAAG,GAAG,KAAK,EAAE,GAAKA,EAAO,IAAI,SAAA,CAAS,EAEjE,GAAIK,EAAe,CAClB,MAAMC,EAAWC,EAA4BF,CAAa,EAC1Dd,EAAsBe,CAAQ,CAC/B,CACAzB,EAAemB,CAAM,EACrBQ,EAAA,CACD,CACD,EAAG,CAAA,CAAE,EACCD,EAA+BF,GAA+B,CACnE,MAAMI,EAAaJ,EAAc,sBAAA,EACjC,IAAIC,EAAWG,EAAW,IAC1B,MAAMC,EAAsBL,EAAc,iBAAiB,KAAK,EAChE,IAAIM,EAAqB,KAEzB,GADoB,OAAO,aACR,IAClB,OAAOL,EAOR,GALAI,EAAoB,QAASE,GAAY,CACpCA,EAAQ,UAAU,SAAS,QAAQ,IACtCD,EAAqBC,EAEvB,CAAC,EACGD,EAAoB,CAEvB,MAAME,EADe,OAAO,YACYJ,EAAW,OACnDH,EAAWG,EAAW,IAAMI,EAAmB,GAChD,CACA,OAAOP,CACR,EAEAT,EAAAA,UAAU,IAAM,CACf,MAAMiB,EAAe,IAAM,CAC1B,MAAMC,EAASX,EAAA,EACfW,GAAU1B,EAAgB0B,CAAM,EAChCC,EAAA,CACD,EACA,cAAO,iBAAiB,SAAUF,CAAY,EACvC,IAAM,CACZ,OAAO,oBAAoB,SAAUA,CAAY,CAClD,CAED,EAAG,CAAA,CAAE,EACL,MAAME,EAAkC,IAAM,CAE7C,MAAMC,EADsB,SAAS,eAAe,WAAW,GAEzC,sBAAA,EAAwB,OAC1CA,GACH1B,EAAsB,OAAO,YAAc0B,CAAyB,CAEtE,EACMb,EAAsB,IAAM,CACjC,GAAIlB,EAAW,CACd,MAAMgC,EACLhC,EAAU,aAAa,MAAM,GAAG,GAAG,KAAK,EAAE,EAAI,QAC9CA,EAAU,IAAI,WAAa,OAEtBmB,EAAgB,SAAS,eAAea,CAAS,EACvD,GAAIb,EAAe,CAClB,MAAMc,EAAed,EAAc,sBAAA,EACnC,IAAIe,EAAYD,EAAa,IAC7B,MAAME,EAAc/C,GAAkB,IACtC,OAAI6C,EAAa,OAASE,EAAc,OAAO,cAC9CD,GAAaD,EAAa,OAASE,EAAc,OAAO,aAElDD,CACR,CACA,OAAO,IACR,CACD,EAEMZ,EAAoB,IAAM,CAC/BN,EAAA,EACA,MAAMoB,EAAQ,WAAW,IAAMzC,EAAe,MAAS,EAAG,GAAK,EAC/DY,EAAkB6B,CAAK,CACxB,EAEMpB,EAAqB,IAAM,CAChC,aAAaV,CAAe,CAC7B,EAEA,cACE+B,mBAAA,CACA,SAAA,CAAAC,EAAAA,IAAC,MAAA,CACA,UAAU,kBACV,QAAS,IAAA,GACT,UAAW,IAAA,GACX,cAAY,OAEX,SAAA3D,GAAoB2D,EAAAA,IAACC,EAAAA,QAAA,CAAA,CAAQ,CAAA,CAAA,EAE/BC,EAAAA,KAACC,EAAAA,uBAAA,CAAuB,MAAOnD,EAC7B,SAAA,CAAAV,GAAa,IAAI,CAACkC,EAAQ4B,IAC1BF,OAACG,EAAAA,SAAA,CACC,SAAA,CAAA7B,EAAO,KACPwB,EAAAA,IAACM,sBAAA,CAAoB,KAAM9B,EAAO,KAAM,OAAA/B,EACvC,SAAAuD,EAAAA,IAACO,EAAA,CACA,OAAA/B,EACA,MAAA4B,EACA,qBAAA9B,EACA,4BAAAG,EACA,WAAAjB,EACA,eAAAH,EACA,aAAAM,EACA,eAAAV,EACA,YAAAG,EACA,UAAAM,CAAA,CAAA,EAEF,EAEAsC,EAAAA,IAACO,EAAA,CACA,OAAA/B,EACA,MAAA4B,EACA,qBAAA9B,EACA,4BAAAG,EACA,WAAAjB,EACA,eAAAH,EACA,aAAAM,EACA,eAAAV,EACA,YAAAG,EACA,UAAAM,CAAA,CAAA,EAGFwC,OAAAG,EAAAA,SAAA,CACE,SAAA,CAAA7B,EAAO,SAAW,SAAWd,GAAW,UAAU,QAClDsC,EAAAA,IAACQ,EAAAA,aAAA,CACA,IAAK5C,GAAgB,OACrB,SAAUF,GAAW,SACrB,oBAAsB+C,GAAsB,CAC3C5D,GACCA,EAAwB4D,CAAiB,EAC1C9C,EAAa,MAAS,CACvB,EACA,mBAAoB,IAAMA,EAAa,MAAS,CAAA,CAAA,EAGjDP,GAAa,UAAU,QACvB4C,EAAAA,IAACU,GAAAA,cAAA,CACA,SAAUtD,GAAa,SACvB,WAAYE,EACZ,mBAAoB,IAAMoB,EAAA,EAC1B,mBAAoB,IAAM,CACzBA,EAAA,EACArB,EAAe,MAAS,CACzB,EACA,KAAMN,EAAe,GAAK,GAC1B,QAAS,QACT,OAAQK,EAAY,YACpB,MAAO,QACP,OAAAX,EACA,uBAAwBW,EAAY,uBACpC,YAAa,CAACuD,EAAcC,IAAa,CACxCrD,EAAiBoD,CAAY,EAC7BzD,EAAkBE,CAAW,EAC7BC,EAAe,MAAS,EACxBM,EAAa,MAAS,EACtBiD,GAAYjE,EAAkBgE,CAAY,CAC3C,EACA,UAAW/D,EACX,IACCG,GACGe,GAEC,EAGL,aAAAf,CAAA,CAAA,CACD,CAAA,CAEF,CAAA,CAAA,EA5EcqD,CA6Ef,CACA,EACA,OAAOhE,EAAgB,sBAAyB,gBAC/CyE,EAAAA,gBAAA,CACA,SAAAb,EAAAA,IAAC,MAAA,CAAI,UAAU,gBACd,SAAAA,EAAAA,IAAC,MAAA,CACA,GAAI,4BACJ,UAAW,qBACV9B,IAA0B,EACvB,cACAA,IAA0B,EAC1B,kBACA,mBACJ,GAEA,SAAA8B,EAAAA,IAACc,EAAAA,QAAA,CACA,WAAY1E,EAAgB,qBAC5B,MAAO,EAAA,CAAA,CACR,CAAA,EAEF,CAAA,CACD,CAAA,CAAA,CAEF,CAAA,EACD,CAEF,EAEM2E,GAMAC,GAAuB,CAC5B,KAAM,CAAE,KAAAC,EAAM,SAAAC,EAAU,gBAAAC,EAAiB,eAAAC,EAAgB,UAAAC,GACxDL,EACKM,EAAOL,EACPM,EAAaJ,EACbK,EAAYJ,EAClB,OACCpB,EAAAA,IAAAK,EAAAA,SAAA,CACE,SAAAa,EACAlB,EAAAA,IAACuB,EAAA,CAAW,MAAO,GAAI,OAAQ,EAAA,CAAI,EAChCF,EACHrB,EAAAA,IAACwB,EAAA,CAAU,MAAO,GAAI,OAAQ,GAAI,MAAOC,SAAO,QAAQ,SAAU,QAEjEH,EAAA,CAAK,MAAO,GAAI,OAAQ,GAAI,MAAOG,EAAAA,OAAO,QAAQ,SAAU,EAE/D,CAEF,EAEMlB,EAAyD,CAAC,CAC/D,OAAA/B,EACA,MAAA4B,EACA,qBAAA9B,EACA,4BAAAG,EACA,WAAAjB,EACA,eAAAH,EACA,aAAAM,EACA,eAAAV,EACA,YAAAG,EACA,UAAAM,CACD,UAEGmD,EAAAA,gBAAA,CACA,SAAAX,EAAAA,KAAC,MAAA,CACA,GAAI1B,EAAO,aAAa,MAAM,GAAG,GAAG,KAAK,EAAE,GAAKA,EAAO,IAAI,SAAA,EAC3D,UAAU,gBAEV,QAAS,IAAMF,EAAqBE,CAAM,EAC1C,aAAc,IAAM,CACnB,CAAChB,GAAciB,EAA4BD,CAAM,CAClD,EACA,YAAa,IAAM,CAClB,CAAChB,GAAciB,EAA4BD,CAAM,CAClD,EACA,aAAc,IAAM,CACdA,GAAQ,UAAU,SACtBnB,EAAe,MAAS,EACxBM,EAAa,MAAS,EAExB,EACA,QAAS,IAAM,CAEf,EACA,cAAY,OAEX,SAAA,CAAAa,EAAO,OACPwB,EAAAA,IAAC,MAAA,CAAI,UAAW,WAAWxB,EAAO,aAAe,aAAe,EAAE,GAAI,SAAA,KAAA,CAEtE,EAEAA,EAAO,UACPwB,EAAAA,IAAC,MAAA,CACA,UAAW,mBACVxB,EAAO,aAAe,aAAe,EACtC,KAAKA,EAAO,gBAAkB,eAAiB,EAAE,GAEjD,SAAAwB,EAAAA,IAAC0B,UAAA,CAAW,OAAQ,GAAI,MAAO,EAAA,CAAI,CAAA,CAAA,EAGrCxB,EAAAA,KAAC,MAAA,CAEA,GACC1B,EAAO,aAAa,MAAM,GAAG,GAAG,KAAK,EAAE,EAAI,QAC3CA,EAAO,IAAI,WAAa,OAEzB,UAAW;AAAA,OACTvB,GAAgB,MAAQuB,EAAO,IAAM,yBAA2B,EAAE;AAAA,OAClEA,EAAO,aAAe,kBAAoB,EAAE;AAAA,OAC5CA,EAAO,gBAAkB,cAAgB,EAAE;AAAA,OAC3CA,EAAO,MAAQpB,GAAa,IAAM,0BAA4B,EAAE;AAAA,OAChEoB,EAAO,MAAQ,gBAAkB,EAAE,GAErC,SAAA,CAAAwB,EAAAA,IAACe,GAAA,CACA,KAAMvC,EAAO,KACb,SAAUA,EAAO,KAAOvB,GAAgB,IACxC,gBACCuB,EAAO,YACN,CAAA,EAEF,eACCA,EAAO,WACN,CAAA,EAEF,UACCA,EAAO,KAAOpB,GAAa,KAAOoB,EAAO,KAAOd,GAAW,GAAA,CAAA,EAG7DsC,EAAAA,IAAC,MAAA,CAAI,UAAU,sBACd,SAAAA,EAAAA,IAAC,IAAA,CACA,UAAW,kBACVxB,GAAQ,MAAQvB,GAAgB,IAC7B,wBACA,EACJ,GAEC,SAAAuB,EAAO,WAAA,CAAA,CACT,CACD,CAAA,CAAA,EArCK4B,CAAA,CAsCN,CAAA,EAxEKA,CAAA,EA0EP"}
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","Icon","ActiveIcon","HoverIcon","COLORS","LockedIcon"],"mappings":"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"}

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

@@ -81,7 +81,7 @@
 	z-index: 10;
 `,x=o.default.div`
 	background-color: ${t.DEFAULT_THEME.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/cjs/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/cjs/components/button/Button.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("react"),y=require("./Button.styled.js"),i=require("./themes.js"),G=require("../spinner/Spinner.js"),M=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=M(u),S=u.forwardRef(({version:e,id:v,buttonType:n="primary",size:s="small",buttonText:m,disabled:a,IconComponent:x,LeadingIcon:h,TrailingIcon:j,isLoading:l,inverse:c,onClick:q,matchParentWidth:C,subtitle:E,darkMode:f,activated:R,error:_,buttonTextColor:g,buttonFontSize:k,customIconColor:r,buttonColor:w,LeadingIconStyles:D,...p},P)=>{const F=i.GetButtonTextComponent(s,n,a),B=i.getButtonIconColor(s,n,c,a,l,f),o=u.useCallback(()=>{const N=s==="chip"||s==="xs"?16:20;return{height:N,width:N,color:r||B,style:{display:"block"},className:"icon"}},[s,r,B]);return t.jsx(y.Button,{"data-test":p["data-test"],version:e,onClick:l?()=>{}:q,ref:P,id:v,disabled:a,size:s,buttonType:n,isLoading:l,inverse:c,matchParentWidth:C,darkMode:f,activated:R,error:_,buttonColor:w,...p,children:t.jsxs("div",{className:"button-container",children:[n.startsWith("dash")&&t.jsx(y.ButtonCustomDashedBorder,{}),t.jsx("div",{className:"overlay-container",children:l&&t.jsx(G.Spinner,{className:"spinner",size:"small",color:i.SpinnerColorMap(n,c)})}),x&&t.jsx("div",{className:"icon-component",children:d.default.createElement(x,o())}),h&&t.jsx("div",{className:"icon-leading",style:{zIndex:1,...D},children:d.default.createElement(h,o())}),m?t.jsxs(F,{className:"text",style:{color:g,fontSize:k},children:[m,t.jsx("div",{className:"text-subtitle",children:E})]}):t.jsx(t.Fragment,{}),j&&t.jsx("div",{className:"icon-trailing",style:{zIndex:1},children:d.default.createElement(j,o())})]})})});S.displayName="Button";exports.Button=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("react"),y=require("./Button.styled.js"),i=require("./themes.js"),F=require("../spinner/Spinner.js"),G=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=G(u),S=u.forwardRef(({version:e,id:v,buttonType:s="primary",size:n="small",buttonText:m,disabled:a,IconComponent:x,LeadingIcon:h,TrailingIcon:j,isLoading:l,inverse:c,onClick:q,matchParentWidth:C,subtitle:E,darkMode:f,activated:R,error:_,buttonTextColor:g,buttonFontSize:k,customIconColor:r,buttonColor:w,LeadingIconStyles:D,...p},P)=>{const z=i.GetButtonTextComponent(n,s,a),B=i.getButtonIconColor(n,s,c,a,l,f),o=u.useCallback(()=>{const N=n==="chip"?16:20;return{height:N,width:N,color:r||B,style:{display:"block"},className:"icon"}},[n,r,B]);return t.jsx(y.Button,{"data-test":p["data-test"],version:e,onClick:l?()=>{}:q,ref:P,id:v,disabled:a,size:n,buttonType:s,isLoading:l,inverse:c,matchParentWidth:C,darkMode:f,activated:R,error:_,buttonColor:w,...p,children:t.jsxs("div",{className:"button-container",children:[s.startsWith("dash")&&t.jsx(y.ButtonCustomDashedBorder,{}),t.jsx("div",{className:"overlay-container",children:l&&t.jsx(F.Spinner,{className:"spinner",size:"small",color:i.SpinnerColorMap(s,c)})}),x&&t.jsx("div",{className:"icon-component",children:d.default.createElement(x,o())}),h&&t.jsx("div",{className:"icon-leading",style:{zIndex:1,...D},children:d.default.createElement(h,o())}),m?t.jsxs(z,{className:"text",style:{color:g,fontSize:k},children:[m,t.jsx("div",{className:"text-subtitle",children:E})]}):t.jsx(t.Fragment,{}),j&&t.jsx("div",{className:"icon-trailing",style:{zIndex:1},children:d.default.createElement(j,o())})]})})});S.displayName="Button";exports.Button=S;
 //# sourceMappingURL=Button.js.map

package/dist/cjs/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":"mSAWaA,EAASC,EAAAA,WACrB,CACC,CACC,QAAAC,EACA,GAAAC,EACA,WAAAC,EAAa,UACb,KAAAC,EAAO,QACP,WAAAC,EACA,SAAAC,EACA,cAAAC,EACA,YAAAC,EACA,aAAAC,EACA,UAAAC,EACA,QAAAC,EACA,QAAAC,EACA,iBAAAC,EACA,SAAAC,EACA,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,GAAGC,CAAA,EAEJC,IACI,CACJ,MAAMC,EAAoBC,EAAAA,uBACzBtB,EACAD,EACAG,CAAA,EAGKqB,EAAYC,EAAAA,mBACjBxB,EACAD,EACAQ,EACAL,EACAI,EACAK,CAAA,EAGKc,EAAeC,EAAAA,YAAY,IAAM,CACtC,MAAMC,EAAW3B,IAAS,~~QAAUA~~,~~IAAS,KAAO,~~GAAK,~~GACzD~~,MAAO,CACN,OAAQ2B,EACR,MAAOA,EACP,MAAOX,GAAoCO,EAC3C,MAAO,CAAE,QAAS,OAAA,EAClB,UAAW,MAAA,CAEb,EAAG,CAACvB,EAAMgB,EAAiBO,CAAS,CAAC,EAErC,OACCK,EAAAA,IAACC,EAAAA,OAAA,CACA,YAAWV,EAAK,WAAW,EAC3B,QAAAtB,EACA,QACCS,EACG,IAAM,CAEN,EACAE,EAEJ,IAAAY,EACA,GAAAtB,EACA,SAAAI,EACA,KAAAF,EACA,WAAAD,EACA,UAAAO,EACA,QAAAC,EACA,iBAAAE,EACA,SAAAE,EACA,UAAAC,EACA,MAAAC,EACA,YAAAI,EACC,GAAGE,EAEJ,SAAAW,EAAAA,KAAC,MAAA,CAAI,UAAU,mBACb,SAAA,CAAA/B,EAAW,WAAW,MAAM,GAAK6B,EAAAA,IAACG,EAAAA,yBAAA,CAAA,CAA4B,EAC/DH,EAAAA,IAAC,MAAA,CAAI,UAAU,oBACb,SAAAtB,GACAsB,EAAAA,IAACI,EAAAA,QAAA,CACA,UAAU,UACV,KAAK,QACL,MAAOC,EAAAA,gBAAgBlC,EAAYQ,CAAO,CAAA,CAAA,EAG7C,EACCJ,GACAyB,EAAAA,IAAC,MAAA,CAAI,UAAU,iBACb,mBAAM,cAAczB,EAAesB,EAAA,CAAc,CAAA,CACnD,EAEArB,GACAwB,EAAAA,IAAC,MAAA,CACA,UAAU,eACV,MAAO,CAAE,OAAQ,EAAG,GAAGV,CAAA,EAEtB,SAAAgB,EAAAA,QAAM,cAAc9B,EAAaqB,EAAA,CAAc,CAAA,CAAA,EAGjDxB,EACA6B,EAAAA,KAACT,EAAA,CACA,UAAU,OACV,MAAO,CACN,MAAOP,EACP,SAAUC,CAAA,EAGV,SAAA,CAAAd,EACD2B,EAAAA,IAAC,MAAA,CAAI,UAAU,gBAAiB,SAAAlB,CAAA,CAAS,CAAA,CAAA,CAAA,EAG1CkB,EAAAA,IAAAO,EAAAA,SAAA,EAAE,EAEF9B,GACAuB,EAAAA,IAAC,MAAA,CAAI,UAAU,gBAAgB,MAAO,CAAE,OAAQ,CAAA,EAC9C,SAAAM,EAAAA,QAAM,cAAc7B,EAAcoB,EAAA,CAAc,CAAA,CAClD,CAAA,CAAA,CAEF,CAAA,CAAA,CAGH,CACD,EAEA9B,EAAO,YAAc"}
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":"mSAWaA,EAASC,EAAAA,WACrB,CACC,CACC,QAAAC,EACA,GAAAC,EACA,WAAAC,EAAa,UACb,KAAAC,EAAO,QACP,WAAAC,EACA,SAAAC,EACA,cAAAC,EACA,YAAAC,EACA,aAAAC,EACA,UAAAC,EACA,QAAAC,EACA,QAAAC,EACA,iBAAAC,EACA,SAAAC,EACA,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,GAAGC,CAAA,EAEJC,IACI,CACJ,MAAMC,EAAoBC,EAAAA,uBACzBtB,EACAD,EACAG,CAAA,EAGKqB,EAAYC,EAAAA,mBACjBxB,EACAD,EACAQ,EACAL,EACAI,EACAK,CAAA,EAGKc,EAAeC,EAAAA,YAAY,IAAM,CACtC,MAAMC,EAAW3B,IAAS,OAAS,GAAK,GACxC,MAAO,CACN,OAAQ2B,EACR,MAAOA,EACP,MAAOX,GAAoCO,EAC3C,MAAO,CAAE,QAAS,OAAA,EAClB,UAAW,MAAA,CAEb,EAAG,CAACvB,EAAMgB,EAAiBO,CAAS,CAAC,EAErC,OACCK,EAAAA,IAACC,EAAAA,OAAA,CACA,YAAWV,EAAK,WAAW,EAC3B,QAAAtB,EACA,QACCS,EACG,IAAM,CAEN,EACAE,EAEJ,IAAAY,EACA,GAAAtB,EACA,SAAAI,EACA,KAAAF,EACA,WAAAD,EACA,UAAAO,EACA,QAAAC,EACA,iBAAAE,EACA,SAAAE,EACA,UAAAC,EACA,MAAAC,EACA,YAAAI,EACC,GAAGE,EAEJ,SAAAW,EAAAA,KAAC,MAAA,CAAI,UAAU,mBACb,SAAA,CAAA/B,EAAW,WAAW,MAAM,GAAK6B,EAAAA,IAACG,EAAAA,yBAAA,CAAA,CAA4B,EAC/DH,EAAAA,IAAC,MAAA,CAAI,UAAU,oBACb,SAAAtB,GACAsB,EAAAA,IAACI,EAAAA,QAAA,CACA,UAAU,UACV,KAAK,QACL,MAAOC,EAAAA,gBAAgBlC,EAAYQ,CAAO,CAAA,CAAA,EAG7C,EACCJ,GACAyB,EAAAA,IAAC,MAAA,CAAI,UAAU,iBACb,mBAAM,cAAczB,EAAesB,EAAA,CAAc,CAAA,CACnD,EAEArB,GACAwB,EAAAA,IAAC,MAAA,CACA,UAAU,eACV,MAAO,CAAE,OAAQ,EAAG,GAAGV,CAAA,EAEtB,SAAAgB,EAAAA,QAAM,cAAc9B,EAAaqB,EAAA,CAAc,CAAA,CAAA,EAGjDxB,EACA6B,EAAAA,KAACT,EAAA,CACA,UAAU,OACV,MAAO,CACN,MAAOP,EACP,SAAUC,CAAA,EAGV,SAAA,CAAAd,EACD2B,EAAAA,IAAC,MAAA,CAAI,UAAU,gBAAiB,SAAAlB,CAAA,CAAS,CAAA,CAAA,CAAA,EAG1CkB,EAAAA,IAAAO,EAAAA,SAAA,EAAE,EAEF9B,GACAuB,EAAAA,IAAC,MAAA,CAAI,UAAU,gBAAgB,MAAO,CAAE,OAAQ,CAAA,EAC9C,SAAAM,EAAAA,QAAM,cAAc7B,EAAcoB,EAAA,CAAc,CAAA,CAClD,CAAA,CAAA,CAEF,CAAA,CAAA,CAGH,CACD,EAEA9B,EAAO,YAAc"}

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

@@ -1,6 +1,5 @@
 "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),o=require("styled-components"),n=require("../../constants/Theme.js"),e=require("./themes.js"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},d=a(o),l=d.default.button`
 	all: unset;
-	outline: none;
 	cursor: pointer;
 	display: flex;
 	gap: 8.83px;
@@ -21,13 +20,13 @@
 	${e.getBorder(t.version??"1.0",t.buttonType,t.size,t.inverse,t.error)}`}
 	.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 {
@@ -35,8 +34,8 @@
 	}
 	.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=>e.getDashedBorderStyling(t.buttonType,t.size,t.isLoading?n.COLORS.stroke.brandLightAlt:t.error?n.COLORS.stroke.negative.vibrant:void 0)}
@@ -116,19 +115,21 @@
 			${t.buttonColor?`background-color: ${e.getLoadingButtonBackgroundCustom(t.buttonColor,15)};`:""}
 			padding: ${e.getPadding(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%;
 				${e.getLoadingBackground(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;
@@ -150,8 +151,7 @@
 					${e.getHoverButtonBackground(t.buttonType,t.inverse)}
 				}
 				${t.size==="chip"&&t.buttonType!=="text"?t.darkMode?`background-color: ${n.COLORS.stroke.primary};`:`background-color: ${n.COLORS.surface.hovered};`:""}
-				${t.buttonType==="special"?`background-color: ${n.COLORS.background.brandLight};`:t.buttonType==="secondaryGray"?`background-color: ${n.COLORS.surface.hovered};`:""}
-				${t.buttonType==="primary"&&t.size!=="chip"&&t.size!=="xs"&&!t.inverse&&!t.buttonColor?`background-color: ${n.COLORS.background.inverse};`:""}
+				${t.buttonType==="primary"&&t.size!=="chip"&&!t.inverse&&!t.buttonColor?`background-color: ${n.COLORS.background.inverse};`:""}
 			}
 			${t.buttonType==="text"?e.getHoverButtonTextDecorationStyle(t.buttonType,t.disabled):""}
 			${t.inverse?e.generateInverseHoverBackground(t.buttonType,t.disabled):""}

package/dist/cjs/components/button/Button.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.styled.js","sources":["../../../../src/components/button/Button.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { Size, Type } from './model';\nimport {\n\tgenerateDisabledStyling,\n\tgenerateInverseHoverBackground,\n\tgetBackgroundColor,\n\tgetBorder,\n\tgetClickEffect,\n\tgetColor,\n\tgetDashedBorderStyling,\n\tgetDisabledTextColor,\n\tgetHoverButtonBackground,\n\tgetHoverButtonBackgroundCustom,\n\tgetHoverButtonTextDecorationStyle,\n\tgetLoadingBackground,\n\tgetLoadingBorder,\n\tgetLoadingButtonBackgroundCustom,\n\tgetPadding,\n} from './themes';\n\nexport const Button = styled.button<{\n\tsize: Size;\n\tbuttonType: Type;\n\tisLoading?: boolean;\n\tinverse?: boolean;\n\tdisabled?: boolean;\n\tmatchParentWidth?: boolean;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tdarkMode?: boolean;\n\tactivated?: boolean;\n\terror?: boolean;\n\tbuttonColor?: string;\n}>`\n\tall: unset;\n\toutline: none;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: 8.83px;\n\tborder-radius: ${(props) => (props.buttonType == 'text' ? '0' : '4px')};\n\toverflow: hidden;\n\t${(props) => (props.matchParentWidth ? `flex-grow: 1;` : '')}\n\tbackground-color: ${(props) =>\n\t\tgetBackgroundColor(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.darkMode,\n\t\t\tprops.buttonColor,\n\t\t)};\n\n\t${(props) =>\n\t\tprops.buttonType.startsWith('dash')\n\t\t\t? `.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t}`\n\t\t\t: `padding: ${getPadding(props.buttonType, props.size)};\n\t${getBorder(\n\t\tprops.version ?? '1.0',\n\t\tprops.buttonType,\n\t\tprops.size,\n\t\tprops.inverse,\n\t\tprops.error,\n\t)}`}\n\n\t.icon-component {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.icon-trailing {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.text {\n\t\tcolor: ${(props) =>\n\t\t\tgetColor(props.buttonType, props.size, props.inverse, props.darkMode)};\n\t}\n\n\t.icon-leading {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t${(props) =>\n\t\tgetDashedBorderStyling(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.isLoading\n\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t: props.error\n\t\t\t\t? COLORS.stroke.negative.vibrant\n\t\t\t\t: undefined,\n\t\t)}\n\n\t.overlay-container {\n\t\tdisplay: none;\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\tprops.activated &&\n\t\t(props.buttonType == 'dashBold' \|\| props.buttonType == 'dashRegular') &&\n\t\t`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t${`.text {\n\t\t\tcolor: ${COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${COLORS.background.brand};\n\t\t}\n\t\t`}\n\t}\n\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t`}\n\n\t:disabled {\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tcursor: ${(props) =>\n\t\t\tprops.buttonType === 'text' ? 'auto' : 'not-allowed'};\n\t\t${(props) =>\n\t\t\tgenerateDisabledStyling(props.buttonType, props.size, props.inverse)}\n\t\t.text {\n\t\t\tcolor: ${(props) => getDisabledTextColor(props.inverse)} !important;\n\t\t}\n\t\t${(props) =>\n\t\t\tgetDashedBorderStyling(\n\t\t\t\tprops.buttonType,\n\t\t\t\tprops.size,\n\t\t\t\tCOLORS.stroke.primary,\n\t\t\t)}\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\t`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tprops.size === 'chip' &&\n\t\t\t\t\t\t`.text {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t\t\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t\t}`}\n\n\t${(props) =>\n\t\t// do not load hover styles for loading state and also active state\n\t\t!props.isLoading\n\t\t\t? `:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t{${\n\t\t\t\t\tprops.buttonColor\n\t\t\t\t\t\t? `background-color: ${getHoverButtonBackgroundCustom(\n\t\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t\t15,\n\t\t\t\t\t\t )}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${getHoverButtonBackground(props.buttonType, props.inverse)}\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.size === 'chip' && props.buttonType !== 'text'\n\t\t\t\t\t\t? props.darkMode\n\t\t\t\t\t\t\t? `background-color: ${COLORS.stroke.primary};`\n\t\t\t\t\t\t\t: `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'special'\n\t\t\t\t\t\t? `background-color: ${COLORS.background.brandLight};`\n\t\t\t\t\t\t: props.buttonType === 'secondaryGray'\n\t\t\t\t\t\t? `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'primary' &&\n\t\t\t\t\tprops.size !== 'chip' &&\n\t\t\t\t\tprops.size !== 'xs' &&\n\t\t\t\t\t!props.inverse &&\n\t\t\t\t\t!props.buttonColor\n\t\t\t\t\t\t? `background-color: ${COLORS.background.inverse};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonType === 'text'\n\t\t\t\t\t? getHoverButtonTextDecorationStyle(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.inverse\n\t\t\t\t\t? generateInverseHoverBackground(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t}`\n\t\t\t: `\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${getLoadingBorder(props.buttonType, props.size, props.inverse)}\n\n\t\t.button-container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonColor\n\t\t\t\t\t? `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t15,\n\t\t\t\t\t )};`\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${getLoadingBackground(\n\t\t\t\t\tprops.buttonType,\n\t\t\t\t\tprops.size,\n\t\t\t\t\tprops.inverse,\n\t\t\t\t\tprops.buttonColor,\n\t\t\t\t)}\n\t\t\t\t.spinner {\n\t\t\t\t\tline-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}`}\n\n\t\t.button-container {\n\t\tdisplay: flex;\n\t\tgap: 8.33px;\n\t\t${(props) => (props.matchParentWidth ? 'margin: auto;' : '')}\n\t}\n`;\n\nexport const ButtonCustomDashedBorder = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"line-top\"></div>\n\t\t\t<div className=\"line-left\"></div>\n\t\t\t<div className=\"line-bottom\"></div>\n\t\t\t<div className=\"line-right\"></div>\n\t\t</>\n\t);\n};\n"],"names":["Button","styled","props","getBackgroundColor","getPadding","getBorder","getColor","getDashedBorderStyling","COLORS","getClickEffect","generateDisabledStyling","getDisabledTextColor","getLoadingBorder","getLoadingButtonBackgroundCustom","getLoadingBackground","getHoverButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","jsxs","Fragment","jsx"],"mappings":"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"}
1	+ {"version":3,"file":"Button.styled.js","sources":["../../../../src/components/button/Button.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { Size, Type } from './model';\nimport {\n\tgenerateDisabledStyling,\n\tgenerateInverseHoverBackground,\n\tgetBackgroundColor,\n\tgetBorder,\n\tgetClickEffect,\n\tgetColor,\n\tgetDashedBorderStyling,\n\tgetDisabledTextColor,\n\tgetHoverButtonBackground,\n\tgetHoverButtonBackgroundCustom,\n\tgetHoverButtonTextDecorationStyle,\n\tgetLoadingBackground,\n\tgetLoadingBorder,\n\tgetLoadingButtonBackgroundCustom,\n\tgetPadding,\n} from './themes';\n\nexport const Button = styled.button<{\n\tsize: Size;\n\tbuttonType: Type;\n\tisLoading?: boolean;\n\tinverse?: boolean;\n\tdisabled?: boolean;\n\tmatchParentWidth?: boolean;\n\tversion?: '1.0' \| '2.0';\n\tdarkMode?: boolean;\n\tactivated?: boolean;\n\terror?: boolean;\n\tbuttonColor?: string;\n}>`\n\tall: unset;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: 8.83px;\n\tborder-radius: ${(props) => (props.buttonType == 'text' ? '0' : '4px')};\n\toverflow: hidden;\n\t${(props) => (props.matchParentWidth ? `flex-grow: 1;` : '')}\n\tbackground-color: ${(props) =>\n\t\tgetBackgroundColor(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.darkMode,\n\t\t\tprops.buttonColor,\n\t\t)};\n\n\t${(props) =>\n\t\tprops.buttonType.startsWith('dash')\n\t\t\t? `.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t}`\n\t\t\t: `padding: ${getPadding(props.buttonType, props.size)};\n\t${getBorder(\n\t\tprops.version ?? '1.0',\n\t\tprops.buttonType,\n\t\tprops.size,\n\t\tprops.inverse,\n\t\tprops.error,\n\t)}`}\n\n\t.icon-component {\n\t\theight: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t\twidth: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t}\n\n\t.icon-trailing {\n\t\theight: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t\twidth: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t}\n\n\t.text {\n\t\tcolor: ${(props) =>\n\t\t\tgetColor(props.buttonType, props.size, props.inverse, props.darkMode)};\n\t}\n\n\t.icon-leading {\n\t\theight: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t\twidth: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t}\n\n\t${(props) =>\n\t\tgetDashedBorderStyling(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.isLoading\n\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t: props.error\n\t\t\t\t? COLORS.stroke.negative.vibrant\n\t\t\t\t: undefined,\n\t\t)}\n\n\t.overlay-container {\n\t\tdisplay: none;\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\tprops.activated &&\n\t\t(props.buttonType == 'dashBold' \|\| props.buttonType == 'dashRegular') &&\n\t\t`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t${`.text {\n\t\t\tcolor: ${COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${COLORS.background.brand};\n\t\t}\n\t\t`}\n\t}\n\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t`}\n\n\t:disabled {\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tcursor: ${(props) =>\n\t\t\tprops.buttonType === 'text' ? 'auto' : 'not-allowed'};\n\t\t${(props) =>\n\t\t\tgenerateDisabledStyling(props.buttonType, props.size, props.inverse)}\n\t\t.text {\n\t\t\tcolor: ${(props) => getDisabledTextColor(props.inverse)} !important;\n\t\t}\n\t\t${(props) =>\n\t\t\tgetDashedBorderStyling(\n\t\t\t\tprops.buttonType,\n\t\t\t\tprops.size,\n\t\t\t\tCOLORS.stroke.primary,\n\t\t\t)}\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\t`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tprops.size === 'chip' &&\n\t\t\t\t\t\t`.text {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t\t\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t\t}`}\n\n\t${(props) =>\n\t\t// do not load hover styles for loading state and also active state\n\t\t!props.isLoading\n\t\t\t? `:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t{${\n\t\t\t\t\tprops.buttonColor\n\t\t\t\t\t\t? `background-color: ${getHoverButtonBackgroundCustom(\n\t\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t\t15,\n\t\t\t\t\t\t )}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${getHoverButtonBackground(props.buttonType, props.inverse)}\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.size === 'chip' && props.buttonType !== 'text'\n\t\t\t\t\t\t? props.darkMode\n\t\t\t\t\t\t\t? `background-color: ${COLORS.stroke.primary};`\n\t\t\t\t\t\t\t: `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'primary' &&\n\t\t\t\t\tprops.size !== 'chip' &&\n\t\t\t\t\t!props.inverse &&\n\t\t\t\t\t!props.buttonColor\n\t\t\t\t\t\t? `background-color: ${COLORS.background.inverse};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonType === 'text'\n\t\t\t\t\t? getHoverButtonTextDecorationStyle(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.inverse\n\t\t\t\t\t? generateInverseHoverBackground(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t}`\n\t\t\t: `\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${getLoadingBorder(props.buttonType, props.size, props.inverse)}\n\n\t\t.button-container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonColor\n\t\t\t\t\t? `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t15,\n\t\t\t\t\t )};`\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: block;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\tpadding-top: 1px;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${getLoadingBackground(\n\t\t\t\t\tprops.buttonType,\n\t\t\t\t\tprops.size,\n\t\t\t\t\tprops.inverse,\n\t\t\t\t\tprops.buttonColor,\n\t\t\t\t)}\n\t\t\t\t.spinner {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\ttop: calc(50% - 14px);\n\t\t\t\t\tleft: calc(50% - 7px);\n\t\t\t\t}\n\n\t\t\t}\n\t\t}`}\n\n\t\t.button-container {\n\t\tdisplay: flex;\n\t\tgap: 8.33px;\n\t\t${(props) => (props.matchParentWidth ? 'margin: auto;' : '')}\n\t}\n`;\n\nexport const ButtonCustomDashedBorder = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"line-top\"></div>\n\t\t\t<div className=\"line-left\"></div>\n\t\t\t<div className=\"line-bottom\"></div>\n\t\t\t<div className=\"line-right\"></div>\n\t\t</>\n\t);\n};\n"],"names":["Button","styled","props","getBackgroundColor","getPadding","getBorder","getColor","getDashedBorderStyling","COLORS","getClickEffect","generateDisabledStyling","getDisabledTextColor","getLoadingBorder","getLoadingButtonBackgroundCustom","getLoadingBackground","getHoverButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","jsxs","Fragment","jsx"],"mappings":"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"}

package/dist/cjs/components/button/themes.js CHANGED Viewed

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),O=(t,n,e,o,a)=>{if(t==="special")return r.COLORS.background.brandVeryLight;if(t==="secondaryGray")return"transparent";if(n==="chip")return t==="text"?"transparent":o?r.COLORS.surface.hovered:r.COLORS.surface.subdued;switch(t){case"primary":return a||(e?r.COLORS.background.warning.vibrant:r.COLORS.background.inverseLight);case"destructive":return r.COLORS.background.negative.vibrant;case"tertiary":return"transparent";default:return"transparent"}},l=(t,n,e,o)=>{if(t==="special")return r.COLORS.background.inverseLight;if(t==="secondaryGray")return r.COLORS.content.secondary;if(n==="chip")return t==="text"?e?r.COLORS.content.inactive:r.COLORS.content.brand:o?r.COLORS.content.primary:r.COLORS.content.secondary;switch(t){case"primary":return e?r.COLORS.content.primary:r.COLORS.content.primaryInverse;case"tertiaryGray":return r.COLORS.content.secondary;case"destructive":return r.COLORS.content.primaryInverse;case"dashBold":return r.COLORS.content.secondary;case"dashRegular":return r.COLORS.content.secondary;case"ai":return r.COLORS.content.ai;default:return e?r.COLORS.content.primaryInverse:r.COLORS.stroke.brand}},L=t=>t?"rgba(255, 255, 255, 0.5)":r.COLORS.content.inactive,f=(t,n)=>{if(t==="text")return"0px";if(n==="xs")return t==="secondary"||t==="special"||t==="secondaryGray"?"3px 6px":"4px 6px";if(n==="chip")return"4px 8px";if(n==="small")switch(t){case"tertiary":return"6px 4px";case"tertiaryGray":return"6px 4px";default:return"6px 12px"}else if(n==="medium")switch(t){case"tertiary":return"10px 4px";case"tertiaryGray":return"10px 4px";default:return"10px 12px"}else if(n==="large")switch(t){case"tertiary":return"14px 4px";case"tertiaryGray":return"14px 4px";default:return"14px 12px"}},b=(t,n,e)=>!e&&n==="ai"?t==="small"?i.ButtonRegularAI:i.ButtonLargeAI:n==="dashRegular"?i.BodySecondary:t==="chip"||t==="xs"?i.BodyCaption:t==="small"?i.ButtonRegular:i.ButtonLarge,d=(t,n,e)=>e?r.COLORS.stroke.negative.vibrant:n?r.COLORS.surface.standard:t=="secondary"?r.COLORS.stroke.brand:r.COLORS.content.placeholder,p=(t,n,e,o,a)=>n=="text"?"border: none;":n==="special"?`border: 1px solid ${r.COLORS.stroke.brandLightAlt};`:n==="secondaryGray"?`border: 1px solid ${r.COLORS.stroke.primary};`:e==="chip"?`border: ${t==="2.0"?.5:1}px solid ${r.COLORS.stroke.primary};`:o?n==="secondary"?`border: ${t==="2.0"?.5:1}px solid ${d(n,o,a)};`:"border: none;":n==="secondary"?`border: ${t==="2.0"?.5:1}px solid ${d(n,!1,a)};`:"border: none;",u=t=>t==="medium"?`5px,
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),O=(t,n,e,o,a)=>{if(n==="chip")return t==="text"?"transparent":o?r.COLORS.surface.hovered:r.COLORS.surface.subdued;switch(t){case"primary":return a||(e?r.COLORS.background.warning.vibrant:r.COLORS.background.inverseLight);case"destructive":return r.COLORS.background.negative.vibrant;case"tertiary":return"transparent";default:return"transparent"}},l=(t,n,e,o)=>{if(n==="chip")return t==="text"?e?r.COLORS.content.inactive:r.COLORS.content.brand:o?r.COLORS.content.primary:r.COLORS.content.secondary;switch(t){case"primary":return e?r.COLORS.content.primary:r.COLORS.content.primaryInverse;case"tertiaryGray":return r.COLORS.content.secondary;case"destructive":return r.COLORS.content.primaryInverse;case"dashBold":return r.COLORS.content.secondary;case"dashRegular":return r.COLORS.content.secondary;case"ai":return r.COLORS.content.ai;default:return e?r.COLORS.content.primaryInverse:r.COLORS.stroke.brand}},p=t=>t?"rgba(255, 255, 255, 0.5)":r.COLORS.content.inactive,f=(t,n)=>{if(t==="text")return"0px";if(n==="chip")return"4px 8px";if(n==="small")switch(t){case"tertiary":return"6px 4px";case"tertiaryGray":return"6px 4px";default:return"6px 12px"}else if(n==="medium")switch(t){case"tertiary":return"10px 4px";case"tertiaryGray":return"10px 4px";default:return"10px 12px"}else if(n==="large")switch(t){case"tertiary":return"14px 4px";case"tertiaryGray":return"14px 4px";default:return"14px 12px"}},L=(t,n,e)=>!e&&n==="ai"?t==="small"?i.ButtonRegularAI:i.ButtonLargeAI:n==="dashRegular"?i.BodySecondary:t==="chip"?i.BodyCaption:t==="small"?i.ButtonRegular:i.ButtonLarge,g=(t,n,e)=>e?r.COLORS.stroke.negative.vibrant:n?r.COLORS.surface.standard:t=="secondary"?r.COLORS.stroke.brand:r.COLORS.content.placeholder,b=(t,n,e,o,a)=>n=="text"?"border: none;":e==="chip"?`border: ${t==="2.0"?.5:1}px solid ${r.COLORS.stroke.primary};`:o?n==="secondary"?`border: ${t==="2.0"?.5:1}px solid ${g(n,o,a)};`:"border: none;":n==="secondary"?`border: ${t==="2.0"?.5:1}px solid ${g(n,!1,a)};`:"border: none;",u=t=>t==="medium"?`5px,
 		transparent 5px,
 		transparent 10px`:`6px,
 		transparent 6px,
-		transparent 12px`,S=(t,n)=>{const e=parseInt(t.replace("#",""),16),o=Math.round(2.55*n),a=(e>>16)-o,c=(e>>8&255)-o,s=(e&255)-o;return`#${(16777216+(Math.max(a,0)<<16)+(Math.max(c,0)<<8)+Math.max(s,0)).toString(16).slice(1)}`},g=(t,n)=>{const e=parseInt(t.replace("#",""),16),o=Math.round(2.55*n),a=(e>>16)+o,c=(e>>8&255)+o,s=(e&255)+o;return`#${(16777216+(Math.min(a,255)<<16)+(Math.min(c,255)<<8)+Math.min(s,255)).toString(16).slice(1)}`},C=(t,n)=>t==="ai"?`background: ${r.COLORS.surface.aiLight};`:t==="text"?"background-color:transparent;":t==="special"||t==="secondaryGray"?"":!n&&t!=="primary"?`background-color: #000000;
-				opacity: 0.03;`:"",R=(t,n)=>n?"":`text-decoration-line: underline;
-			text-decoration-color: ${r.COLORS.content.brand};`,x=(t,n)=>n?"":t==="primary"?`background-color: ${r.COLORS.stroke.warning.lightAlt};`:"background-color: rgba(255, 255, 255, 0.1)",h=(t,n,e)=>t==="special"?`background-color: ${r.COLORS.background.base}; border: 1px solid ${r.COLORS.stroke.primary};`:t==="secondaryGray"?`border: 1px solid ${r.COLORS.stroke.primary};`:n==="chip"?"background-color: transparent;":t==="primary"||t==="destructive"?e?"background-color: rgba(255,255,255,0.3);":`background-color: ${r.COLORS.background.inactive};`:t==="secondary"?e?"border: 1px solid rgba(255, 255, 255, 0.5);":`border: 1px solid ${r.COLORS.stroke.primary};`:"",k=(t,n,e=d(t,!1))=>`
+		transparent 12px`,S=(t,n)=>{const e=parseInt(t.replace("#",""),16),o=Math.round(2.55*n),a=(e>>16)-o,c=(e>>8&255)-o,d=(e&255)-o;return`#${(16777216+(Math.max(a,0)<<16)+(Math.max(c,0)<<8)+Math.max(d,0)).toString(16).slice(1)}`},s=(t,n)=>{const e=parseInt(t.replace("#",""),16),o=Math.round(2.55*n),a=(e>>16)+o,c=(e>>8&255)+o,d=(e&255)+o;return`#${(16777216+(Math.min(a,255)<<16)+(Math.min(c,255)<<8)+Math.min(d,255)).toString(16).slice(1)}`},C=(t,n)=>t==="ai"?`background: ${r.COLORS.surface.aiLight};`:t==="text"?"background-color:transparent;":!n&&t!=="primary"?`background-color: #000000;
+				opacity: 0.03;`:"",x=(t,n)=>n?"":`text-decoration-line: underline;
+			text-decoration-color: ${r.COLORS.content.brand};`,R=(t,n)=>n?"":t==="primary"?`background-color: ${r.COLORS.stroke.warning.lightAlt};`:"background-color: rgba(255, 255, 255, 0.1)",h=(t,n,e)=>n==="chip"?"background-color: transparent;":t==="primary"||t==="destructive"?e?"background-color: rgba(255,255,255,0.3);":`background-color: ${r.COLORS.background.inactive};`:t==="secondary"?e?"border: 1px solid rgba(255, 255, 255, 0.5);":`border: 1px solid ${r.COLORS.stroke.primary};`:"",k=(t,n,e=g(t,!1))=>`
 	.line-top {
 		position: absolute;
 		left: 0;
@@ -59,8 +59,8 @@
 	}
 	`,m=(t,n,e)=>{if(t==="text")return`background-color: ${r.COLORS.background.brandLight};
 			text-decoration-line: underline;
-			text-decoration-color: ${r.COLORS.content.brand};`;if(t==="special")return`background-color: ${r.COLORS.background.brandLight}; border: 1px solid ${r.COLORS.stroke.brandLightAlt};`;if(t==="secondaryGray")return`background-color: ${r.COLORS.surface.hovered}; border: 1px solid ${r.COLORS.stroke.primary};`;if(n==="chip")return`border: 1px solid ${r.COLORS.stroke.brandLightAlt};
+			text-decoration-color: ${r.COLORS.content.brand};`;if(n==="chip")return`border: 1px solid ${r.COLORS.stroke.brandLightAlt};
 		background-color: ${r.COLORS.background.brandLight};`;if(t==="primary"||t==="destructive")return e?`background-color: ${r.COLORS.background.warning.vibrant} !important;
 			box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);
-			`:"box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);";if(t==="secondary"||t==="tertiary"||t==="tertiaryGray"||t.startsWith("dash"))return e?`background-color: ${r.COLORS.background.inverseLight}  !important;`:`background-color: ${r.COLORS.background.brandLight};`},y=(t,n,e,o)=>t==="special"?`background-color: ${r.COLORS.background.brandVeryLight};`:t==="secondaryGray"?`background-color: ${r.COLORS.surface.subdued};`:n==="chip"?`background-color: ${r.COLORS.background.base};`:t==="primary"?o?`background-color: ${g(o,50)};`:`background-color: ${e?r.COLORS.background.warning.vibrant:r.COLORS.background.brandLight};`:t==="destructive"?`background-color: ${r.COLORS.background.negative.light};`:"background-color: transparent;",$=(t,n,e)=>t==="special"?`border: 1px solid ${r.COLORS.stroke.brandLightAlt};`:t==="secondaryGray"?`border: 1px solid ${r.COLORS.stroke.primary};`:n==="chip"?"border: none;":t==="secondary"?e?`border: 1px solid ${r.COLORS.content.secondary};`:`border: 1px solid ${r.COLORS.stroke.brandLightAlt};`:"",B=(t,n)=>t==="secondaryGray"?r.COLORS.content.secondary:n?t==="primary"?r.COLORS.content.primary:r.COLORS.content.primaryInverse:t==="destructive"?r.COLORS.content.negative:r.COLORS.content.brand,v=(t,n,e,o,a,c)=>{if(t==="chip")return o?r.COLORS.content.inactive:c?r.COLORS.content.primary:r.COLORS.content.secondary;if(a)return"transparent";if(n==="special")return o?r.COLORS.content.inactive:r.COLORS.background.inverseLight;if(n==="secondaryGray")return o?r.COLORS.content.inactive:r.COLORS.content.secondary;if(n==="primary"||n==="destructive")return e?o?"rgba(255, 255, 255, 0.5)":r.COLORS.content.primary:o?r.COLORS.content.inactive:r.COLORS.content.primaryInverse;if(n==="secondary")return e?o?"rgba(255, 255, 255, 0.5)":r.COLORS.content.primaryInverse:o?r.COLORS.content.inactive:r.COLORS.content.brand;if(n==="tertiary")return e?o?"rgba(255, 255, 255, 0.5)":r.COLORS.content.primaryInverse:o?r.COLORS.content.inactive:r.COLORS.content.brand;if(n==="tertiaryGray"||n.startsWith("dash"))return o?r.COLORS.content.inactive:r.COLORS.content.secondary};exports.GetButtonTextComponent=b;exports.SpinnerColorMap=B;exports.generateDisabledStyling=h;exports.generateInverseHoverBackground=x;exports.getBackgroundColor=O;exports.getBorder=p;exports.getBorderColor=d;exports.getButtonIconColor=v;exports.getClickEffect=m;exports.getColor=l;exports.getDashedBorderStyling=k;exports.getDisabledTextColor=L;exports.getHoverButtonBackground=C;exports.getHoverButtonBackgroundCustom=S;exports.getHoverButtonTextDecorationStyle=R;exports.getLinearGradientValue=u;exports.getLoadingBackground=y;exports.getLoadingBorder=$;exports.getLoadingButtonBackgroundCustom=g;exports.getPadding=f;
+			`:"box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);";if(t==="secondary"||t==="tertiary"||t==="tertiaryGray"||t.startsWith("dash"))return e?`background-color: ${r.COLORS.background.inverseLight}  !important;`:`background-color: ${r.COLORS.background.brandLight};`},y=(t,n,e,o)=>n==="chip"?`background-color: ${r.COLORS.background.base};`:t==="primary"?o?`background-color: ${s(o,50)};`:`background-color: ${e?r.COLORS.background.warning.vibrant:r.COLORS.background.brandLight};`:t==="destructive"?`background-color: ${r.COLORS.background.negative.light};`:"background-color: transparent;",B=(t,n,e)=>n==="chip"?"border: none;":t==="secondary"?e?`border: 1px solid ${r.COLORS.content.secondary};`:`border: 1px solid ${r.COLORS.stroke.brandLightAlt};`:"",$=(t,n)=>n?t==="primary"?r.COLORS.content.primary:r.COLORS.content.primaryInverse:t==="destructive"?r.COLORS.content.negative:r.COLORS.content.brand,v=(t,n,e,o,a,c)=>{if(t==="chip")return o?r.COLORS.content.inactive:c?r.COLORS.content.primary:r.COLORS.content.secondary;if(a)return"transparent";if(n==="primary"||n==="destructive")return e?o?"rgba(255, 255, 255, 0.5)":r.COLORS.content.primary:o?r.COLORS.content.inactive:r.COLORS.content.primaryInverse;if(n==="secondary")return e?o?"rgba(255, 255, 255, 0.5)":r.COLORS.content.primaryInverse:o?r.COLORS.content.inactive:r.COLORS.content.brand;if(n==="tertiary")return e?o?"rgba(255, 255, 255, 0.5)":r.COLORS.content.primaryInverse:o?r.COLORS.content.inactive:r.COLORS.content.brand;if(n==="tertiaryGray"||n.startsWith("dash"))return o?r.COLORS.content.inactive:r.COLORS.content.secondary};exports.GetButtonTextComponent=L;exports.SpinnerColorMap=$;exports.generateDisabledStyling=h;exports.generateInverseHoverBackground=R;exports.getBackgroundColor=O;exports.getBorder=b;exports.getBorderColor=g;exports.getButtonIconColor=v;exports.getClickEffect=m;exports.getColor=l;exports.getDashedBorderStyling=k;exports.getDisabledTextColor=p;exports.getHoverButtonBackground=C;exports.getHoverButtonBackgroundCustom=S;exports.getHoverButtonTextDecorationStyle=x;exports.getLinearGradientValue=u;exports.getLoadingBackground=y;exports.getLoadingBorder=B;exports.getLoadingButtonBackgroundCustom=s;exports.getPadding=f;
 //# sourceMappingURL=themes.js.map

package/dist/cjs/components/button/themes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"themes.js","sources":["../../../../src/components/button/themes.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tButtonLarge,\n\tButtonLargeAI,\n\tButtonRegular,\n\tButtonRegularAI,\n} from '../TypographyStyle';\nimport { Size, Type } from './model';\n\nexport const getBackgroundColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n\tbuttonColor?: string,\n): string => {\n\tif (type === 'special') return COLORS.background.brandVeryLight;\n\tif (type === 'secondaryGray') return 'transparent';\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn 'transparent';\n\t\t}\n\t\treturn darkMode ? COLORS.surface.hovered : COLORS.surface.subdued;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn buttonColor\n\t\t\t\t? buttonColor\n\t\t\t\t: inverse\n\t\t\t\t? COLORS.background.warning.vibrant\n\t\t\t\t: COLORS.background.inverseLight;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.background.negative.vibrant;\n\t\tcase 'tertiary':\n\t\t\treturn 'transparent';\n\t\tdefault:\n\t\t\treturn 'transparent';\n\t}\n};\n\nexport const getColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n): string => {\n\tif (type === 'special') return COLORS.background.inverseLight;\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn inverse ? COLORS.content.inactive : COLORS.content.brand;\n\t\t}\n\t\treturn darkMode ? COLORS.content.primary : COLORS.content.secondary;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn inverse ? COLORS.content.primary : COLORS.content.primaryInverse;\n\t\tcase 'tertiaryGray':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.content.primaryInverse;\n\t\tcase 'dashBold':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'dashRegular':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'ai':\n\t\t\treturn COLORS.content.ai;\n\t\tdefault:\n\t\t\treturn inverse ? COLORS.content.primaryInverse : COLORS.stroke.brand;\n\t}\n};\n\nexport const getDisabledTextColor = (inverse?: boolean) => {\n\tif (inverse) {\n\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t}\n\treturn COLORS.content.inactive;\n};\n\nexport const getPadding = (type: Type, size: Size) => {\n\tif (type === 'text') {\n\t\treturn '0px';\n\t} else if (size === 'xs') {\n\t\tconst hasBorder =\n\t\t\ttype === 'secondary' \|\| type === 'special' \|\| type === 'secondaryGray';\n\t\treturn hasBorder ? '3px 6px' : '4px 6px';\n\t} else if (size === 'chip') {\n\t\treturn '4px 8px';\n\t} else if (size === 'small') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '6px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '6px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '6px 12px';\n\t\t}\n\t} else if (size === 'medium') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '10px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '10px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '10px 12px';\n\t\t}\n\t} else if (size === 'large') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '14px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '14px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '14px 12px';\n\t\t}\n\t}\n};\nexport const GetButtonTextComponent = (\n\tsize: Size,\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (!disabled && type === 'ai') {\n\t\tif (size === 'small') {\n\t\t\treturn ButtonRegularAI;\n\t\t} else {\n\t\t\treturn ButtonLargeAI;\n\t\t}\n\t}\n\n\tif (type === 'dashRegular') {\n\t\treturn BodySecondary;\n\t}\n\tif (size === 'chip' \|\| size === 'xs') {\n\t\treturn BodyCaption;\n\t} else if (size === 'small') {\n\t\treturn ButtonRegular;\n\t}\n\treturn ButtonLarge;\n};\n\nexport const getBorderColor = (\n\ttype: Type,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (error) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\n\tif (inverse) {\n\t\treturn COLORS.surface.standard;\n\t}\n\tif (type == 'secondary') {\n\t\treturn COLORS.stroke.brand;\n\t}\n\treturn COLORS.content.placeholder;\n};\n\nexport const getBorder = (\n\tversion: '1.0' \| '2.0' \| '3.0',\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (type == 'text') {\n\t\treturn 'border: none;';\n\t}\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${\n\t\t\tCOLORS.stroke.primary\n\t\t};`;\n\t}\n\tif (inverse) {\n\t\tif (type === 'secondary') {\n\t\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\t\ttype,\n\t\t\t\tinverse,\n\t\t\t\terror,\n\t\t\t)};`;\n\t\t}\n\t\treturn 'border: none;';\n\t}\n\n\tif (type === 'secondary') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\ttype,\n\t\t\tfalse,\n\t\t\terror,\n\t\t)};`;\n\t}\n\treturn 'border: none;';\n};\n\nexport const getLinearGradientValue = (size: Size): string => {\n\tif (size === 'medium') {\n\t\treturn `5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px`;\n\t}\n\treturn `6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px`;\n};\n\n/*\n Adjusts the brightness of a given hex color by a specified percentage.\n * Below function is used to generate a hover effect for button backgrounds.\n \n @param {string} color - The hex color code to be adjusted (e.g., \"#ff0000\").\n * @param {number} percent - The percentage by which to darken the color. Positive values darken the color.\n * @returns {string} - The adjusted hex color code.\n \n @example\n * // Darken the color #ff0000 (red) by 10%\n * const darkerRed = getHoverButtonBackgroundCustom(\"#ff0000\", 10);\n * console.log(darkerRed); // Output might be \"#e60000\"\n /\n\nexport const getHoverButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 percent),\n\t\tR = (num >> 16) - amt,\n\t\tG = ((num >> 8) & 0x00ff) - amt,\n\t\tB = (num & 0x0000ff) - amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.max(R, 0) << 16) +\n\t\t(Math.max(G, 0) << 8) +\n\t\tMath.max(B, 0)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\n/*\n Generates a new color by adjusting the brightness of the given color by a specified percentage.\n \n @param color - The original color in hexadecimal format (e.g., \"#RRGGBB\").\n * @param percent - The percentage to adjust the brightness. Positive values will lighten the color, while negative values will darken it.\n * @returns The new color in hexadecimal format after adjusting the brightness.\n \n @example\n * // Lighten the color by 20%\n * const newColor = getLoadingButtonBackgroundCustom(\"#ff0000\", 20); // \"#ff3333\"\n \n @example\n * // Darken the color by 10%\n * const newColor = getLoadingButtonBackgroundCustom(\"#00ff00\", -10); // \"#00e600\"\n /\nexport const getLoadingButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 percent),\n\t\tR = (num >> 16) + amt,\n\t\tG = ((num >> 8) & 0x00ff) + amt,\n\t\tB = (num & 0x0000ff) + amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.min(R, 255) << 16) +\n\t\t(Math.min(G, 255) << 8) +\n\t\tMath.min(B, 255)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\nexport const getHoverButtonBackground = (type: Type, inverse?: boolean) => {\n\tif (type === 'ai') {\n\t\treturn `background: ${COLORS.surface.aiLight};`;\n\t}\n\n\tif (type === 'text') {\n\t\treturn `background-color:transparent;`;\n\t}\n\tif (type === 'special' \|\| type === 'secondaryGray') {\n\t\treturn '';\n\t}\n\tif (!inverse && type !== 'primary') {\n\t\treturn `background-color: #000000;\n\t\t\t\topacity: 0.03;`;\n\t}\n\n\treturn ``;\n};\n\nexport const getHoverButtonTextDecorationStyle = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\treturn `text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n};\n\nexport const generateInverseHoverBackground = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\tif (type === 'primary') {\n\t\treturn `background-color: ${COLORS.stroke.warning.lightAlt};`;\n\t}\n\treturn `background-color: rgba(255, 255, 255, 0.1)`;\n};\n\nexport const generateDisabledStyling = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.base}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: transparent;`;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\treturn inverse\n\t\t\t? 'background-color: rgba(255,255,255,0.3);'\n\t\t\t: `background-color: ${COLORS.background.inactive};`;\n\t} else if (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid rgba(255, 255, 255, 0.5);`\n\t\t\t: `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\treturn '';\n};\n\nexport const getDashedBorderStyling = (\n\ttype: Type,\n\tsize: Size,\n\tborderColor: string = getBorderColor(type, false),\n) => {\n\treturn `\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t`;\n};\n\nexport const getClickEffect = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'text') {\n\t\treturn `background-color: ${COLORS.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n\t}\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandLight}; border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.hovered}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};\n\t\tbackground-color: ${COLORS.background.brandLight};`;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\tif (inverse) {\n\t\t\treturn `background-color: ${COLORS.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`;\n\t\t}\n\t\treturn 'box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);';\n\t} else if (\n\t\ttype === 'secondary' \|\|\n\t\ttype === 'tertiary' \|\|\n\t\ttype === 'tertiaryGray' \|\|\n\t\ttype.startsWith('dash')\n\t) {\n\t\treturn inverse\n\t\t\t? `background-color: ${COLORS.background.inverseLight} !important;`\n\t\t\t: `background-color: ${COLORS.background.brandLight};`;\n\t}\n};\nexport const getLoadingBackground = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tbuttonColor?: string,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandVeryLight};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.subdued};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: ${COLORS.background.base};`;\n\t}\n\tif (type === 'primary') {\n\t\tif (buttonColor) {\n\t\t\treturn `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\tbuttonColor,\n\t\t\t\t50,\n\t\t\t)};`;\n\t\t}\n\t\treturn `background-color: ${\n\t\t\tinverse ? COLORS.background.warning.vibrant : COLORS.background.brandLight\n\t\t};`;\n\t}\n\tif (type === 'destructive') {\n\t\treturn `background-color: ${COLORS.background.negative.light};`;\n\t}\n\treturn 'background-color: transparent;';\n};\n\nexport const getLoadingBorder = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: none;`;\n\t}\n\tif (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid ${COLORS.content.secondary};`\n\t\t\t: `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\treturn '';\n};\n\nexport const SpinnerColorMap = (type: Type, inverse?: boolean) => {\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\tif (inverse) {\n\t\tif (type === 'primary') {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t}\n\tif (type === 'destructive') {\n\t\treturn COLORS.content.negative;\n\t}\n\treturn COLORS.content.brand;\n};\n\nexport const getButtonIconColor = (\n\tsize: Size,\n\ttype: Type,\n\tinverse?: boolean,\n\tdisabled?: boolean,\n\tisLoading?: boolean,\n\tdarkMode?: boolean,\n) => {\n\tif (size === 'chip') {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t} else if (darkMode) {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n\tif (isLoading) {\n\t\treturn 'transparent';\n\t}\n\tif (type === 'special') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.background.inverseLight;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.content.secondary;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t} else if (type === 'secondary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiaryGray' \|\| type.startsWith('dash')) {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n};\n"],"names":["getBackgroundColor","type","size","inverse","darkMode","buttonColor","COLORS","getColor","getDisabledTextColor","getPadding","GetButtonTextComponent","disabled","ButtonRegularAI","ButtonLargeAI","BodySecondary","BodyCaption","ButtonRegular","ButtonLarge","getBorderColor","error","getBorder","version","getLinearGradientValue","getHoverButtonBackgroundCustom","color","percent","num","amt","R","G","B","getLoadingButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","generateDisabledStyling","getDashedBorderStyling","borderColor","getClickEffect","getLoadingBackground","getLoadingBorder","SpinnerColorMap","getButtonIconColor","isLoading"],"mappings":"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"}
1	+ {"version":3,"file":"themes.js","sources":["../../../../src/components/button/themes.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tButtonLarge,\n\tButtonLargeAI,\n\tButtonRegular,\n\tButtonRegularAI,\n} from '../TypographyStyle';\nimport { Size, Type } from './model';\n\nexport const getBackgroundColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n\tbuttonColor?: string,\n): string => {\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn 'transparent';\n\t\t}\n\t\treturn darkMode ? COLORS.surface.hovered : COLORS.surface.subdued;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn buttonColor\n\t\t\t\t? buttonColor\n\t\t\t\t: inverse\n\t\t\t\t? COLORS.background.warning.vibrant\n\t\t\t\t: COLORS.background.inverseLight;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.background.negative.vibrant;\n\t\tcase 'tertiary':\n\t\t\treturn 'transparent';\n\t\tdefault:\n\t\t\treturn 'transparent';\n\t}\n};\n\nexport const getColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n): string => {\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn inverse ? COLORS.content.inactive : COLORS.content.brand;\n\t\t}\n\t\treturn darkMode ? COLORS.content.primary : COLORS.content.secondary;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn inverse ? COLORS.content.primary : COLORS.content.primaryInverse;\n\t\tcase 'tertiaryGray':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.content.primaryInverse;\n\t\tcase 'dashBold':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'dashRegular':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'ai':\n\t\t\treturn COLORS.content.ai;\n\t\tdefault:\n\t\t\treturn inverse ? COLORS.content.primaryInverse : COLORS.stroke.brand;\n\t}\n};\n\nexport const getDisabledTextColor = (inverse?: boolean) => {\n\tif (inverse) {\n\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t}\n\treturn COLORS.content.inactive;\n};\n\nexport const getPadding = (type: Type, size: Size) => {\n\tif (type === 'text') {\n\t\treturn '0px';\n\t} else if (size === 'chip') {\n\t\treturn '4px 8px';\n\t} else if (size === 'small') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '6px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '6px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '6px 12px';\n\t\t}\n\t} else if (size === 'medium') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '10px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '10px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '10px 12px';\n\t\t}\n\t} else if (size === 'large') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '14px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '14px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '14px 12px';\n\t\t}\n\t}\n};\nexport const GetButtonTextComponent = (\n\tsize: Size,\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (!disabled && type === 'ai') {\n\t\tif (size === 'small') {\n\t\t\treturn ButtonRegularAI;\n\t\t} else {\n\t\t\treturn ButtonLargeAI;\n\t\t}\n\t}\n\n\tif (type === 'dashRegular') {\n\t\treturn BodySecondary;\n\t}\n\tif (size === 'chip') {\n\t\treturn BodyCaption;\n\t} else if (size === 'small') {\n\t\treturn ButtonRegular;\n\t}\n\treturn ButtonLarge;\n};\n\nexport const getBorderColor = (\n\ttype: Type,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (error) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\n\tif (inverse) {\n\t\treturn COLORS.surface.standard;\n\t}\n\tif (type == 'secondary') {\n\t\treturn COLORS.stroke.brand;\n\t}\n\treturn COLORS.content.placeholder;\n};\n\nexport const getBorder = (\n\tversion: '1.0' \| '2.0',\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (type == 'text') {\n\t\treturn 'border: none;';\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${\n\t\t\tCOLORS.stroke.primary\n\t\t};`;\n\t}\n\tif (inverse) {\n\t\tif (type === 'secondary') {\n\t\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\t\ttype,\n\t\t\t\tinverse,\n\t\t\t\terror,\n\t\t\t)};`;\n\t\t}\n\t\treturn 'border: none;';\n\t}\n\n\tif (type === 'secondary') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\ttype,\n\t\t\tfalse,\n\t\t\terror,\n\t\t)};`;\n\t}\n\treturn 'border: none;';\n};\n\nexport const getLinearGradientValue = (size: Size): string => {\n\tif (size === 'medium') {\n\t\treturn `5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px`;\n\t}\n\treturn `6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px`;\n};\n\n/*\n Adjusts the brightness of a given hex color by a specified percentage.\n * Below function is used to generate a hover effect for button backgrounds.\n \n @param {string} color - The hex color code to be adjusted (e.g., \"#ff0000\").\n * @param {number} percent - The percentage by which to darken the color. Positive values darken the color.\n * @returns {string} - The adjusted hex color code.\n \n @example\n * // Darken the color #ff0000 (red) by 10%\n * const darkerRed = getHoverButtonBackgroundCustom(\"#ff0000\", 10);\n * console.log(darkerRed); // Output might be \"#e60000\"\n /\n\nexport const getHoverButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 percent),\n\t\tR = (num >> 16) - amt,\n\t\tG = ((num >> 8) & 0x00ff) - amt,\n\t\tB = (num & 0x0000ff) - amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.max(R, 0) << 16) +\n\t\t(Math.max(G, 0) << 8) +\n\t\tMath.max(B, 0)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\n/*\n Generates a new color by adjusting the brightness of the given color by a specified percentage.\n \n @param color - The original color in hexadecimal format (e.g., \"#RRGGBB\").\n * @param percent - The percentage to adjust the brightness. Positive values will lighten the color, while negative values will darken it.\n * @returns The new color in hexadecimal format after adjusting the brightness.\n \n @example\n * // Lighten the color by 20%\n * const newColor = getLoadingButtonBackgroundCustom(\"#ff0000\", 20); // \"#ff3333\"\n \n @example\n * // Darken the color by 10%\n * const newColor = getLoadingButtonBackgroundCustom(\"#00ff00\", -10); // \"#00e600\"\n /\nexport const getLoadingButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 percent),\n\t\tR = (num >> 16) + amt,\n\t\tG = ((num >> 8) & 0x00ff) + amt,\n\t\tB = (num & 0x0000ff) + amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.min(R, 255) << 16) +\n\t\t(Math.min(G, 255) << 8) +\n\t\tMath.min(B, 255)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\nexport const getHoverButtonBackground = (type: Type, inverse?: boolean) => {\n\tif (type === 'ai') {\n\t\treturn `background: ${COLORS.surface.aiLight};`;\n\t}\n\n\tif (type === 'text') {\n\t\treturn `background-color:transparent;`;\n\t}\n\tif (!inverse && type !== 'primary') {\n\t\treturn `background-color: #000000;\n\t\t\t\topacity: 0.03;`;\n\t}\n\n\treturn ``;\n};\n\nexport const getHoverButtonTextDecorationStyle = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\treturn `text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n};\n\nexport const generateInverseHoverBackground = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\tif (type === 'primary') {\n\t\treturn `background-color: ${COLORS.stroke.warning.lightAlt};`;\n\t}\n\treturn `background-color: rgba(255, 255, 255, 0.1)`;\n};\n\nexport const generateDisabledStyling = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n) => {\n\tif (size === 'chip') {\n\t\treturn `background-color: transparent;`;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\treturn inverse\n\t\t\t? 'background-color: rgba(255,255,255,0.3);'\n\t\t\t: `background-color: ${COLORS.background.inactive};`;\n\t} else if (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid rgba(255, 255, 255, 0.5);`\n\t\t\t: `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\treturn '';\n};\n\nexport const getDashedBorderStyling = (\n\ttype: Type,\n\tsize: Size,\n\tborderColor: string = getBorderColor(type, false),\n) => {\n\treturn `\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t`;\n};\n\nexport const getClickEffect = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'text') {\n\t\treturn `background-color: ${COLORS.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};\n\t\tbackground-color: ${COLORS.background.brandLight};`;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\tif (inverse) {\n\t\t\treturn `background-color: ${COLORS.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`;\n\t\t}\n\t\treturn 'box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);';\n\t} else if (\n\t\ttype === 'secondary' \|\|\n\t\ttype === 'tertiary' \|\|\n\t\ttype === 'tertiaryGray' \|\|\n\t\ttype.startsWith('dash')\n\t) {\n\t\treturn inverse\n\t\t\t? `background-color: ${COLORS.background.inverseLight} !important;`\n\t\t\t: `background-color: ${COLORS.background.brandLight};`;\n\t}\n};\nexport const getLoadingBackground = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tbuttonColor?: string,\n) => {\n\tif (size === 'chip') {\n\t\treturn `background-color: ${COLORS.background.base};`;\n\t}\n\tif (type === 'primary') {\n\t\tif (buttonColor) {\n\t\t\treturn `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\tbuttonColor,\n\t\t\t\t50,\n\t\t\t)};`;\n\t\t}\n\t\treturn `background-color: ${\n\t\t\tinverse ? COLORS.background.warning.vibrant : COLORS.background.brandLight\n\t\t};`;\n\t}\n\tif (type === 'destructive') {\n\t\treturn `background-color: ${COLORS.background.negative.light};`;\n\t}\n\treturn 'background-color: transparent;';\n};\n\nexport const getLoadingBorder = (type: Type, size: Size, inverse?: boolean) => {\n\tif (size === 'chip') {\n\t\treturn `border: none;`;\n\t}\n\tif (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid ${COLORS.content.secondary};`\n\t\t\t: `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\treturn '';\n};\n\nexport const SpinnerColorMap = (type: Type, inverse?: boolean) => {\n\tif (inverse) {\n\t\tif (type === 'primary') {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t}\n\tif (type === 'destructive') {\n\t\treturn COLORS.content.negative;\n\t}\n\treturn COLORS.content.brand;\n};\n\nexport const getButtonIconColor = (\n\tsize: Size,\n\ttype: Type,\n\tinverse?: boolean,\n\tdisabled?: boolean,\n\tisLoading?: boolean,\n\tdarkMode?: boolean,\n) => {\n\tif (size === 'chip') {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t} else if (darkMode) {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n\tif (isLoading) {\n\t\treturn 'transparent';\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t} else if (type === 'secondary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiaryGray' \|\| type.startsWith('dash')) {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n};\n"],"names":["getBackgroundColor","type","size","inverse","darkMode","buttonColor","COLORS","getColor","getDisabledTextColor","getPadding","GetButtonTextComponent","disabled","ButtonRegularAI","ButtonLargeAI","BodySecondary","BodyCaption","ButtonRegular","ButtonLarge","getBorderColor","error","getBorder","version","getLinearGradientValue","getHoverButtonBackgroundCustom","color","percent","num","amt","R","G","B","getLoadingButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","generateDisabledStyling","getDashedBorderStyling","borderColor","getClickEffect","getLoadingBackground","getLoadingBorder","SpinnerColorMap","getButtonIconColor","isLoading"],"mappings":"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"}

package/dist/cjs/components/checkBox/CheckBox.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),c=require("react"),C=require("./CheckBox.styled.js"),a=require("../TypographyStyle.js"),i=require("../../constants/Theme.js"),f=e=>{const s=c.useMemo(()=>e.activeColor||i.COLORS.background.positive.vibrant,[e.activeColor]),t=e.size==="XS"?{box:12,check:{w:6,h:5,x:3,y:3.5},partial:{x:3,y:5,w:6}}:e.size==="SMALL"?{box:16,check:{w:8,h:7,x:4,y:4},partial:{x:5,y:7,w:6}}:{box:18,check:{w:10,h:9,x:4,y:4},partial:{x:5,y:8,w:8}};return l.jsxs("svg",{width:t.box,height:t.box,viewBox:`0 0 ${t.box} ${t.box}`,fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[l.jsx("rect",{x:"0",y:"0",width:t.box,height:t.box,rx:"4",fill:e.isDisabled?i.COLORS.content.inactive:s}),!e.isPartial&&l.jsx("svg",{width:t.check.w,height:t.check.h,x:t.check.x,y:t.check.y,viewBox:"0 0 10 9",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z",fill:"white"})}),e.isPartial&&l.jsx("rect",{x:t.partial.x,y:t.partial.y,width:t.partial.w,height:"2",rx:"1",fill:i.COLORS.surface.standard})]})},L=e=>{const[s,t]=c.useState(e.isChecked||!1),[d,o]=c.useState(e.isPartiallyChecked||!1),[n,y]=c.useState(e.isDisabled||!1),[S,h]=c.useState(!1),[u,x]=c.useState(!1),O=r=>{if(!e.isDisabled){const b=!s;d?o(!d):t(b),e.onValueChange?.(b,e.value,r)}};c.useEffect(()=>{t(e.isChecked)},[e.isChecked]),c.useEffect(()=>{y(e.isDisabled||!1)},[e.isDisabled]),c.useEffect(()=>{o(e.isPartiallyChecked||!1)},[e.isPartiallyChecked]);const k=()=>{if(!e.label)return l.jsx(l.Fragment,{});if(e.labelTypography){const r={bodyCaption:a.BodyCaption,bodySecondary:a.BodySecondary,bodyPrimary:a.BodyPrimary,titleSmall:a.TitleSmall}[e.labelTypography];return l.jsx(r,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label})}return e.size==="XS"?l.jsx(a.BodyCaption,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):e.boldOnChecked&&s||e.bold?e.labelSize==="DEFAULT"?l.jsx(a.TitleRegular,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):l.jsx(a.TitleSmall,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):e.size==="SMALL"?l.jsx(a.BodySecondary,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):e.labelSize==="SMALL"?l.jsx(a.BodySecondary,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):l.jsx(a.BodyPrimary,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label})};return l.jsxs(C.CheckboxContainer,{onClick:O,onMouseEnter:()=>h(!e.skipHoverState),onMouseLeave:()=>h(!1),onMouseDown:()=>x(!e.skipHoverState),onMouseUp:()=>x(!1),isDisabled:n,enableHover:e.enableHover,style:e.style??{},children:[l.jsx(C.CheckboxIcon,{checked:s,hovered:S,clicked:u,isDisabled:n,size:e.size,borderColor:e.checkboxBorderColor,children:s&&l.jsx(f,{isPartial:d||!1,isDisabled:n,size:e.size,activeColor:e?.activeColor})}),k(),e.rightComponent]})};exports.CheckBox=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),t=require("react"),S=require("./CheckBox.styled.js"),s=require("../TypographyStyle.js"),i=require("../../constants/Theme.js"),y=e=>{const a=t.useMemo(()=>e.activeColor||i.COLORS.background.positive.vibrant,[e.activeColor]);return l.jsxs("svg",{width:e.isSmall?"16":"18",height:e.isSmall?"16":"18",viewBox:e.isSmall?"0 0 16 16":"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[l.jsx("rect",{x:"0",y:"0",width:e.isSmall?"16":"18",height:e.isSmall?"16":"18",rx:"4",fill:e.isDisabled?i.COLORS.content.inactive:a}),!e.isPartial&&l.jsx("svg",{width:e.isSmall?"8":"10",height:e.isSmall?"7":"9",x:"4",y:"4",viewBox:"0 0 10 9",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z",fill:"white"})}),e.isPartial&&l.jsx("rect",{x:"5",y:e.isSmall?"7":"8",width:e.isSmall?"6":"8",height:"2",rx:"1",fill:i.COLORS.surface.standard})]})},L=e=>{const[a,n]=t.useState(e.isChecked||!1),[c,r]=t.useState(e.isPartiallyChecked||!1),[d,x]=t.useState(e.isDisabled||!1),[b,h]=t.useState(!1),[u,C]=t.useState(!1),f=O=>{if(!e.isDisabled){const o=!a;c?r(!c):n(o),e.onValueChange?.(o,e.value,O)}};t.useEffect(()=>{n(e.isChecked)},[e.isChecked]),t.useEffect(()=>{x(e.isDisabled||!1)},[e.isDisabled]),t.useEffect(()=>{r(e.isPartiallyChecked||!1)},[e.isPartiallyChecked]);const k=()=>e.label?e.boldOnChecked&&a||e.bold?e.labelSize==="DEFAULT"?l.jsx(s.TitleRegular,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):l.jsx(s.TitleSmall,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):e.size==="SMALL"?l.jsx(s.BodySecondary,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):e.labelSize==="SMALL"?l.jsx(s.BodySecondary,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):l.jsx(s.BodyPrimary,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):l.jsx(l.Fragment,{});return l.jsxs(S.CheckboxContainer,{onClick:f,onMouseEnter:()=>h(!e.skipHoverState),onMouseLeave:()=>h(!1),onMouseDown:()=>C(!e.skipHoverState),onMouseUp:()=>C(!1),isDisabled:d,enableHover:e.enableHover,style:e.style??{},children:[l.jsx(S.CheckboxIcon,{checked:a,hovered:b,clicked:u,isDisabled:d,size:e.size,borderColor:e.checkboxBorderColor,children:a&&l.jsx(y,{isPartial:c||!1,isDisabled:d,isSmall:e.size==="SMALL",activeColor:e?.activeColor})}),k(),e.rightComponent]})};exports.CheckBox=L;
 //# sourceMappingURL=CheckBox.js.map