{"version":3,"file":"static/js/bottom-navigation.753602c7.chunk.js","mappings":"gLAKA,MAAMA,GAAWC,EAAAA,EAAAA,KAAaC,EAAAA,GAAUC,UAAYD,EAAAA,GAAUE,WAExDC,EAAWC,EAAAA,GAAOC,IAAGC,WAAA,CAAAC,YAAA,qCAAAC,YAAA,cAAVJ,CAAU,sEAOdK,EAA2BA,KAEpCC,EAAAA,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SACGC,MAAMC,KAAK,CAAEC,OAAQ,IAAK,CAACC,EAAGC,IAAMA,IAAGC,KAAIC,IAC1CC,EAAAA,EAAAA,MAACjB,EAAQ,CAAAS,SAAA,EACPF,EAAAA,EAAAA,KAACW,EAAAA,EAASC,OAAM,CAACC,KAAMzB,EAAU0B,QAAM,KACvCd,EAAAA,EAAAA,KAACW,EAAAA,EAAQ,CACPI,MAAO,CAAEC,MAAO,CAAEC,OAAQ,EAAGC,MAAO,MAAOC,OAAQ,aACnDC,WAAW,EACXN,QAAM,MALKL,M,+HCZvB,MAAM,wBAAEY,IAA4BC,EAAAA,EAAAA,IAClC,IAAM,gMAGKC,EAAmBA,IACvBC,EAAAA,GAAcC,mBACnBzB,EAAAA,EAAAA,KAAC0B,EAAAA,SAAQ,CACPC,UACE3B,EAAAA,EAAAA,KAAC4B,EAAAA,GAAiB,CAAA1B,UAChBF,EAAAA,EAAAA,KAACD,EAAAA,EAAwB,MAE5BG,UAEDF,EAAAA,EAAAA,KAACqB,EAAuB,MAExB,I,qECnBC,MAAMO,EAAoBlC,EAAAA,GAAOC,IAAGC,WAAA,CAAAC,YAAA,2BAAAC,YAAA,eAAVJ,CAAU,0NAiB9BmC,EAAanC,EAAAA,GAAOC,IAAGC,WAAA,CAAAC,YAAA,oBAAAC,YAAA,eAAVJ,CAAU,wFAOzBoC,GARe,IAQLA,EAAMC,UAAkC,MAAQ,QAGxDC,EAAUtC,EAAAA,GAAOC,IAAGC,WAAA,CAAAC,YAAA,iBAAAC,YAAA,eAAVJ,CAAU,iIAS7BoC,GACAA,EAAMG,UACN,gE","sources":["elements/BottomNavigation/BottomNavigationSkeleton.tsx","elements/BottomNavigation/index.tsx","elements/BottomNavigation/style.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { ICON_SIZE } from 'utils/constants/app/ui';\nimport { isMobile } from 'utils/is-mobile';\nimport { Skeleton } from 'newcomponents/UI/Skeleton';\n\nconst iconSize = isMobile() ? ICON_SIZE.MOBILE_24 : ICON_SIZE.DESKTOP_32;\n\nconst MenuItem = styled.div`\n  width: 20%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n`;\n\nexport const BottomNavigationSkeleton = (): JSX.Element => {\n  return (\n    <>\n      {Array.from({ length: 5 }, (v, i) => i).map(key => (\n        <MenuItem key={key}>\n          <Skeleton.Avatar size={iconSize} active />\n          <Skeleton\n            title={{ style: { height: 9, width: '60%', margin: '5px auto' } }}\n            paragraph={false}\n            active\n          />\n        </MenuItem>\n      ))}\n    </>\n  );\n};\n","import { ReactElement, Suspense } from 'react';\nimport SpringConfigs from 'utils/constants/swarm/spring-configs';\nimport { lazy } from 'utils/generic/lazy';\nimport { BottomNavigationSkeleton } from './BottomNavigationSkeleton';\nimport { NavigationWrapper } from './style';\n\nconst { BottomNavigationContent } = lazy(\n  () => import(/* webpackChunkName: \"bottom-navigation-content\" */ './Content')\n);\n\nexport const BottomNavigation = (): ReactElement | null => {\n  return SpringConfigs.BOTTOM_NAVIGATION ? (\n    <Suspense\n      fallback={\n        <NavigationWrapper>\n          <BottomNavigationSkeleton />\n        </NavigationWrapper>\n      }\n    >\n      <BottomNavigationContent />\n    </Suspense>\n  ) : null;\n};\n","import styled from 'styled-components';\n\nexport const NavigationWrapper = styled.div`\n  overflow: hidden;\n  background-color: var(--v3-black-2);\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  z-index: 11;\n  height: 70px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-around;\n  padding-top: 4px;\n`;\n\nconst TAB_WRAPPER_COUNT = 4;\nexport const TabWrapper = styled.div<{\n  tabsCount: number;\n}>`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  position: relative;\n  width: ${props => (props.tabsCount === TAB_WRAPPER_COUNT ? '25%' : '20%')};\n`;\n\nexport const TabName = styled.div<{\n  isActive: boolean;\n}>`\n  font-size: 11px;\n  color: var(--v3-text-color);\n  line-height: 16px;\n  text-transform: capitalize;\n  text-align: center;\n\n  ${props =>\n    props.isActive &&\n    `\n    color: var(--v3-primary-6);\n    font-weight: 600;\n  `};\n  padding-top: 3px;\n`;\n"],"names":["iconSize","isMobile","ICON_SIZE","MOBILE_24","DESKTOP_32","MenuItem","styled","div","withConfig","displayName","componentId","BottomNavigationSkeleton","_jsx","_Fragment","children","Array","from","length","v","i","map","key","_jsxs","Skeleton","Avatar","size","active","title","style","height","width","margin","paragraph","BottomNavigationContent","lazy","BottomNavigation","SpringConfigs","BOTTOM_NAVIGATION","Suspense","fallback","NavigationWrapper","TabWrapper","props","tabsCount","TabName","isActive"],"sourceRoot":""}