{"version":3,"sources":["Shared/Notifications/Models/KexNotificationBanner.tsx"],"names":["NotificationContainer","styled","div","position","top","left","right","margin","xy","animationIterationCount","animationDuration","theme","timings","five","MozAnimationDirection","animationName","transform","maxHeight","maxWidth","NotificationBox","backgroundColor","secondary","color","primary","padding","x","y","boxShadow","textAlign","KexNotificationBanner","notification","message"],"mappings":"kHAAA,kCAsBA,IAAMA,EAAwBC,IAAOC,IAAI,CACvCC,SAAU,QACVC,IAAK,SACLC,KAAM,IACNC,MAAO,IACPC,OAAQ,CACNC,GAAI,QAENC,wBAAyB,EACzBC,kBAAmBC,IAAMC,QAAQC,KACjCC,sBAAuB,UACvBC,cAAe,CACb,KAAM,CACJC,UAAW,sBAEb,MAAO,CACLA,UAAW,qBAEb,MAAO,CACLA,UAAW,qBAEb,MAAO,CACLA,UAAW,qBAEb,OAAQ,CACNA,UAAW,uBAGfC,UAAW,OACXC,SAAU,UAGNC,EAAkBlB,IAAOC,IAAI,CACjCkB,gBAAiBT,IAAMU,UACvBC,MAAOX,IAAMY,QACbhB,OAAQ,CACNC,GAAI,QAENgB,QAAS,CACPC,EAAG,OACHC,EAAG,QAELC,UACE,0EACFC,UAAW,WAGEC,UA7Df,YAA4D,IAA3BC,EAA0B,EAA1BA,aAC/B,OACE,oCACGA,GAAgBA,EAAaC,QAC5B,kBAAC/B,EAAD,KACE,kBAACmB,EAAD,KAAkBW,EAAaC,UAGjC","file":"Dist/build-client/static/js/Models-KexNotificationBanner.0cce63ab.chunk.js","sourcesContent":["import React from 'react';\r\nimport { styled, theme } from '../../../Theme';\r\nimport BaseNotification from './BaseNotification.interface';\r\n\r\ntype PropType = {\r\n  notification: BaseNotification;\r\n};\r\n\r\nfunction KexNotificationBanner({ notification }: PropType) {\r\n  return (\r\n    <>\r\n      {notification && notification.message ? (\r\n        <NotificationContainer>\r\n          <NotificationBox>{notification.message}</NotificationBox>\r\n        </NotificationContainer>\r\n      ) : (\r\n        ''\r\n      )}\r\n    </>\r\n  );\r\n}\r\n\r\nconst NotificationContainer = styled.div({\r\n  position: 'fixed',\r\n  top: '-100px',\r\n  left: '0',\r\n  right: '0',\r\n  margin: {\r\n    xy: 'auto',\r\n  },\r\n  animationIterationCount: 1,\r\n  animationDuration: theme.timings.five,\r\n  MozAnimationDirection: 'forward',\r\n  animationName: {\r\n    '0%': {\r\n      transform: 'translateY(-100px)',\r\n    },\r\n    '30%': {\r\n      transform: 'translateY(100px)',\r\n    },\r\n    '50%': {\r\n      transform: 'translateY(100px)',\r\n    },\r\n    '80%': {\r\n      transform: 'translateY(100px)',\r\n    },\r\n    '100%': {\r\n      transform: 'translateY(-100px)',\r\n    },\r\n  },\r\n  maxHeight: '30vh',\r\n  maxWidth: '350px',\r\n});\r\n\r\nconst NotificationBox = styled.div({\r\n  backgroundColor: theme.secondary,\r\n  color: theme.primary,\r\n  margin: {\r\n    xy: 'auto',\r\n  },\r\n  padding: {\r\n    x: '16px',\r\n    y: '12px',\r\n  },\r\n  boxShadow:\r\n    '0 2px 32px 2px rgba(59, 72, 80, 0.05), 0 0 4px 0 rgba(72, 72, 72, 0.15)',\r\n  textAlign: 'center',\r\n});\r\n\r\nexport default KexNotificationBanner;\r\n"],"sourceRoot":""}