@wireapp/react-ui-kit 7.55.2 → 8.1.0

package/src/Layout/headerMenu/HeaderSubMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["HeaderSubMenu.tsx"],"names":["desktopStyledHeaderSubMenuStyle","theme","props","alignItems","backgroundColor","COLOR","tint","general","borderRadius","boxShadow","display","flexDirection","justifyContent","minWidth","padding","span","height","margin","paddingLeft","paddingRight","whiteSpace","MENU_LINK_CLASSNAME","marginTop","DESKTOP_HEADER_SUB_MENU_CLASSNAME","DesktopStyledHeaderSubMenu","mobileStyledHeaderSubMenuStyle","fontWeight","borderTop","GRAY_LIGHTEN_72","paddingTop","MobileStyledHeaderSubMenu","HeaderSubMenu","caption","isOpen","children","isDesktop","window","matchMedia","QUERY","desktop","matches","cursor","position","textAlign","DURATION","DEFAULT","left","zIndex"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/core';\nimport React from 'react';\n\nimport {COLOR, Opacity, Slide, YAxisMovement} from '../../Identity';\nimport {DURATION} from '../../Identity/motions';\nimport {QUERY} from '../../mediaQueries';\nimport type {Theme} from '../Theme';\nimport {MenuSubLink} from './MenuSubLink';\nimport {MENU_LINK_CLASSNAME} from './MenuLink';\n\nexport type DesktopStyledHeaderSubMenuProps<T = HTMLDivElement> = React.HTMLProps<T>;\n\nconst desktopStyledHeaderSubMenuStyle: (theme: Theme, props: DesktopStyledHeaderSubMenuProps) => CSSObject = (\n  theme,\n  props,\n) => ({\n  alignItems: 'left',\n  backgroundColor: COLOR.tint(theme.general.backgroundColor, 0.16),\n  borderRadius: '8px',\n  boxShadow: '0 8px 24px 0 rgba(0, 0, 0, 0.16)',\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'center',\n  minWidth: '200px',\n  padding: '8px 8px',\n  span: {\n    '&:hover': {\n      backgroundColor: theme.general.backgroundColor,\n      borderRadius: '4px',\n    },\n    alignItems: 'center',\n    display: 'flex',\n    height: '30px',\n    margin: 0,\n    paddingLeft: '10px !important',\n    paddingRight: '10px !important',\n    whiteSpace: 'nowrap',\n  },\n  [`.${MENU_LINK_CLASSNAME}:nth-of-type(n+2)`]: {\n    marginTop: '8px',\n  },\n});\n\nexport const DESKTOP_HEADER_SUB_MENU_CLASSNAME = 'desktopStyledHeaderSubMenu';\n\nexport const DesktopStyledHeaderSubMenu = (props: DesktopStyledHeaderSubMenuProps) => (\n  <div\n    className={DESKTOP_HEADER_SUB_MENU_CLASSNAME}\n    css={theme => desktopStyledHeaderSubMenuStyle(theme, props)}\n    {...props}\n  />\n);\n\nexport interface MobileStyledHeaderSubMenuProps<T = HTMLSpanElement> extends React.HTMLProps<T> {\n  open?: boolean;\n}\n\nconst mobileStyledHeaderSubMenuStyle: (props: MobileStyledHeaderSubMenuProps) => CSSObject = props => ({\n  '*': {\n    fontWeight: 200,\n  },\n  alignItems: 'center',\n  borderTop: `1px solid ${COLOR.GRAY_LIGHTEN_72}`,\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'center',\n  marginTop: '16px',\n  paddingTop: '8px',\n});\n\nexport const MobileStyledHeaderSubMenu = (props: MobileStyledHeaderSubMenuProps) => (\n  <span css={mobileStyledHeaderSubMenuStyle(props)} {...props} />\n);\n\nexport interface HeaderSubMenuProps<T = HTMLParagraphElement> extends React.PropsWithRef<React.HTMLProps<T>> {\n  caption: string;\n  isOpen: boolean;\n}\n\nexport const HeaderSubMenu: React.FC<HeaderSubMenuProps> = ({caption, isOpen, children, ...props}) => {\n  const isDesktop = typeof window !== 'undefined' && window.matchMedia(`(${QUERY.desktop})`).matches;\n  return (\n    <MenuSubLink\n      {...props}\n      style={{cursor: 'pointer', display: 'inline-block', position: 'relative', textAlign: 'center'}}\n    >\n      <span>{caption}</span>\n      <Opacity\n        in={isOpen && isDesktop}\n        timeout={DURATION.DEFAULT}\n        style={{display: 'inline-block', left: -18, marginTop: 10, paddingTop: 20, position: 'absolute', zIndex: 1}}\n        mountOnEnter={false}\n        unmountOnExit={false}\n      >\n        <YAxisMovement\n          in={isOpen && isDesktop}\n          startValue={'-30px'}\n          endValue={'0px'}\n          style={{display: 'inline-block'}}\n          timeout={DURATION.DEFAULT}\n          mountOnEnter={false}\n          unmountOnExit={true}\n        >\n          <DesktopStyledHeaderSubMenu>{children}</DesktopStyledHeaderSubMenu>\n        </YAxisMovement>\n      </Opacity>\n      <Opacity\n        in={isOpen && !isDesktop}\n        timeout={DURATION.DEFAULT}\n        mountOnEnter={false}\n        unmountOnExit={false}\n        style={{display: 'block', position: 'relative'}}\n      >\n        <Slide\n          in={isOpen && !isDesktop}\n          startValue={'-56%'}\n          endValue={'0'}\n          timeout={DURATION.DEFAULT}\n          mountOnEnter={false}\n          unmountOnExit={true}\n        >\n          <MobileStyledHeaderSubMenu>{children}</MobileStyledHeaderSubMenu>\n        </Slide>\n      </Opacity>\n    </MenuSubLink>\n  );\n};\n"],"file":"HeaderSubMenu.js"}
+{"version":3,"sources":["HeaderSubMenu.tsx"],"names":["desktopStyledHeaderSubMenuStyle","theme","props","alignItems","backgroundColor","COLOR","tint","general","borderRadius","boxShadow","display","flexDirection","justifyContent","minWidth","padding","span","height","margin","paddingLeft","paddingRight","whiteSpace","MENU_LINK_CLASSNAME","marginTop","DESKTOP_HEADER_SUB_MENU_CLASSNAME","DesktopStyledHeaderSubMenu","mobileStyledHeaderSubMenuStyle","fontWeight","borderTop","GRAY_LIGHTEN_72","paddingTop","MobileStyledHeaderSubMenu","HeaderSubMenu","caption","isOpen","children","isDesktop","window","matchMedia","QUERY","desktop","matches","cursor","position","textAlign","DURATION","DEFAULT","left","zIndex"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;AACA;;AAEA;;AACA;;;;AAIA,IAAMA,+BAAoG,GAAG,SAAvGA,+BAAuG,CAC3GC,KAD2G,EAE3GC,KAF2G;AAAA;AAI3GC,IAAAA,UAAU,EAAE,MAJ+F;AAK3GC,IAAAA,eAAe,EAAEC,gBAAMC,IAAN,CAAWL,KAAK,CAACM,OAAN,CAAcH,eAAzB,EAA0C,IAA1C,CAL0F;AAM3GI,IAAAA,YAAY,EAAE,KAN6F;AAO3GC,IAAAA,SAAS,EAAE,kCAPgG;AAQ3GC,IAAAA,OAAO,EAAE,MARkG;AAS3GC,IAAAA,aAAa,EAAE,QAT4F;AAU3GC,IAAAA,cAAc,EAAE,QAV2F;AAW3GC,IAAAA,QAAQ,EAAE,OAXiG;AAY3GC,IAAAA,OAAO,EAAE,SAZkG;AAa3GC,IAAAA,IAAI,EAAE;AACJ,iBAAW;AACTX,QAAAA,eAAe,EAAEH,KAAK,CAACM,OAAN,CAAcH,eADtB;AAETI,QAAAA,YAAY,EAAE;AAFL,OADP;AAKJL,MAAAA,UAAU,EAAE,QALR;AAMJO,MAAAA,OAAO,EAAE,MANL;AAOJM,MAAAA,MAAM,EAAE,MAPJ;AAQJC,MAAAA,MAAM,EAAE,CARJ;AASJC,MAAAA,WAAW,EAAE,iBATT;AAUJC,MAAAA,YAAY,EAAE,iBAVV;AAWJC,MAAAA,UAAU,EAAE;AAXR;AAbqG,gBA0BtGC,6BA1BsG,wBA0B7D;AAC5CC,IAAAA,SAAS,EAAE;AADiC,GA1B6D;AAAA,CAA7G;;AA+BO,IAAMC,iCAAiC,GAAG,4BAA1C;;;AAEA,IAAMC,0BAA0B,GAAG,SAA7BA,0BAA6B,CAACtB,KAAD;AAAA,SACxC;AACE,IAAA,SAAS,EAAEqB,iCADb;AAEE,IAAA,GAAG,EAAE,aAACtB,KAAD;AAAA,aAAkBD,+BAA+B,CAACC,KAAD,EAAQC,KAAR,CAAjD;AAAA;AAFP,KAGMA,KAHN,EADwC;AAAA,CAAnC;;;;AAYP,IAAMuB,8BAAoF,GAAG,SAAvFA,8BAAuF,CAAAvB,KAAK;AAAA,SAAK;AACrG,SAAK;AACHwB,MAAAA,UAAU,EAAE;AADT,KADgG;AAIrGvB,IAAAA,UAAU,EAAE,QAJyF;AAKrGwB,IAAAA,SAAS,sBAAetB,gBAAMuB,eAArB,CAL4F;AAMrGlB,IAAAA,OAAO,EAAE,MAN4F;AAOrGC,IAAAA,aAAa,EAAE,QAPsF;AAQrGC,IAAAA,cAAc,EAAE,QARqF;AASrGU,IAAAA,SAAS,EAAE,MAT0F;AAUrGO,IAAAA,UAAU,EAAE;AAVyF,GAAL;AAAA,CAAlG;;AAaO,IAAMC,yBAAyB,GAAG,SAA5BA,yBAA4B,CAAC5B,KAAD;AAAA,SACvC;AAAM,IAAA,GAAG,EAAEuB,8BAA8B,CAACvB,KAAD;AAAzC,KAAsDA,KAAtD,EADuC;AAAA,CAAlC;;;;AASA,IAAM6B,aAA2C,GAAG,SAA9CA,aAA8C,QAA2C;AAAA,MAAzCC,OAAyC,SAAzCA,OAAyC;AAAA,MAAhCC,MAAgC,SAAhCA,MAAgC;AAAA,MAAxBC,QAAwB,SAAxBA,QAAwB;AAAA,MAAXhC,KAAW;AACpG,MAAMiC,SAAS,GAAG,OAAOC,MAAP,KAAkB,WAAlB,IAAiCA,MAAM,CAACC,UAAP,YAAsBC,oBAAMC,OAA5B,QAAwCC,OAA3F;AACA,SACE,gBAAC,wBAAD,gCACMtC,KADN;AAEE,IAAA,KAAK,EAAE;AAACuC,MAAAA,MAAM,EAAE,SAAT;AAAoB/B,MAAAA,OAAO,EAAE,cAA7B;AAA6CgC,MAAAA,QAAQ,EAAE,UAAvD;AAAmEC,MAAAA,SAAS,EAAE;AAA9E;AAFT,MAIE,8BAAOX,OAAP,CAJF,EAKE,gBAAC,iBAAD;AACE,UAAIC,MAAM,IAAIE,SADhB;AAEE,IAAA,OAAO,EAAES,kBAASC,OAFpB;AAGE,IAAA,KAAK,EAAE;AAACnC,MAAAA,OAAO,EAAE,cAAV;AAA0BoC,MAAAA,IAAI,EAAE,CAAC,EAAjC;AAAqCxB,MAAAA,SAAS,EAAE,EAAhD;AAAoDO,MAAAA,UAAU,EAAE,EAAhE;AAAoEa,MAAAA,QAAQ,EAAE,UAA9E;AAA0FK,MAAAA,MAAM,EAAE;AAAlG,KAHT;AAIE,IAAA,YAAY,EAAE,KAJhB;AAKE,IAAA,aAAa,EAAE;AALjB,KAOE,gBAAC,uBAAD;AACE,UAAId,MAAM,IAAIE,SADhB;AAEE,IAAA,UAAU,EAAE,OAFd;AAGE,IAAA,QAAQ,EAAE,KAHZ;AAIE,IAAA,KAAK,EAAE;AAACzB,MAAAA,OAAO,EAAE;AAAV,KAJT;AAKE,IAAA,OAAO,EAAEkC,kBAASC,OALpB;AAME,IAAA,YAAY,EAAE,KANhB;AAOE,IAAA,aAAa,EAAE;AAPjB,KASE,gBAAC,0BAAD,QAA6BX,QAA7B,CATF,CAPF,CALF,EAwBE,gBAAC,iBAAD;AACE,UAAID,MAAM,IAAI,CAACE,SADjB;AAEE,IAAA,OAAO,EAAES,kBAASC,OAFpB;AAGE,IAAA,YAAY,EAAE,KAHhB;AAIE,IAAA,aAAa,EAAE,KAJjB;AAKE,IAAA,KAAK,EAAE;AAACnC,MAAAA,OAAO,EAAE,OAAV;AAAmBgC,MAAAA,QAAQ,EAAE;AAA7B;AALT,KAOE,gBAAC,eAAD;AACE,UAAIT,MAAM,IAAI,CAACE,SADjB;AAEE,IAAA,UAAU,EAAE,MAFd;AAGE,IAAA,QAAQ,EAAE,GAHZ;AAIE,IAAA,OAAO,EAAES,kBAASC,OAJpB;AAKE,IAAA,YAAY,EAAE,KALhB;AAME,IAAA,aAAa,EAAE;AANjB,KAQE,gBAAC,yBAAD,QAA4BX,QAA5B,CARF,CAPF,CAxBF,CADF;AA6CD,CA/CM","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR, Opacity, Slide, YAxisMovement} from '../../Identity';\nimport {DURATION} from '../../Identity/motions';\nimport {QUERY} from '../../mediaQueries';\nimport type {Theme} from '../Theme';\nimport {MenuSubLink} from './MenuSubLink';\nimport {MENU_LINK_CLASSNAME} from './MenuLink';\n\nexport type DesktopStyledHeaderSubMenuProps<T = HTMLDivElement> = React.HTMLProps<T>;\n\nconst desktopStyledHeaderSubMenuStyle: (theme: Theme, props: DesktopStyledHeaderSubMenuProps) => CSSObject = (\n  theme,\n  props,\n) => ({\n  alignItems: 'left',\n  backgroundColor: COLOR.tint(theme.general.backgroundColor, 0.16),\n  borderRadius: '8px',\n  boxShadow: '0 8px 24px 0 rgba(0, 0, 0, 0.16)',\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'center',\n  minWidth: '200px',\n  padding: '8px 8px',\n  span: {\n    '&:hover': {\n      backgroundColor: theme.general.backgroundColor,\n      borderRadius: '4px',\n    },\n    alignItems: 'center',\n    display: 'flex',\n    height: '30px',\n    margin: 0,\n    paddingLeft: '10px !important',\n    paddingRight: '10px !important',\n    whiteSpace: 'nowrap',\n  },\n  [`.${MENU_LINK_CLASSNAME}:nth-of-type(n+2)`]: {\n    marginTop: '8px',\n  },\n});\n\nexport const DESKTOP_HEADER_SUB_MENU_CLASSNAME = 'desktopStyledHeaderSubMenu';\n\nexport const DesktopStyledHeaderSubMenu = (props: DesktopStyledHeaderSubMenuProps) => (\n  <div\n    className={DESKTOP_HEADER_SUB_MENU_CLASSNAME}\n    css={(theme: Theme) => desktopStyledHeaderSubMenuStyle(theme, props)}\n    {...props}\n  />\n);\n\nexport interface MobileStyledHeaderSubMenuProps<T = HTMLSpanElement> extends React.HTMLProps<T> {\n  open?: boolean;\n}\n\nconst mobileStyledHeaderSubMenuStyle: (props: MobileStyledHeaderSubMenuProps) => CSSObject = props => ({\n  '*': {\n    fontWeight: 200,\n  },\n  alignItems: 'center',\n  borderTop: `1px solid ${COLOR.GRAY_LIGHTEN_72}`,\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'center',\n  marginTop: '16px',\n  paddingTop: '8px',\n});\n\nexport const MobileStyledHeaderSubMenu = (props: MobileStyledHeaderSubMenuProps) => (\n  <span css={mobileStyledHeaderSubMenuStyle(props)} {...props} />\n);\n\nexport interface HeaderSubMenuProps<T = HTMLParagraphElement> extends React.PropsWithRef<React.HTMLProps<T>> {\n  caption: string;\n  isOpen: boolean;\n}\n\nexport const HeaderSubMenu: React.FC<HeaderSubMenuProps> = ({caption, isOpen, children, ...props}) => {\n  const isDesktop = typeof window !== 'undefined' && window.matchMedia(`(${QUERY.desktop})`).matches;\n  return (\n    <MenuSubLink\n      {...props}\n      style={{cursor: 'pointer', display: 'inline-block', position: 'relative', textAlign: 'center'}}\n    >\n      <span>{caption}</span>\n      <Opacity\n        in={isOpen && isDesktop}\n        timeout={DURATION.DEFAULT}\n        style={{display: 'inline-block', left: -18, marginTop: 10, paddingTop: 20, position: 'absolute', zIndex: 1}}\n        mountOnEnter={false}\n        unmountOnExit={false}\n      >\n        <YAxisMovement\n          in={isOpen && isDesktop}\n          startValue={'-30px'}\n          endValue={'0px'}\n          style={{display: 'inline-block'}}\n          timeout={DURATION.DEFAULT}\n          mountOnEnter={false}\n          unmountOnExit={true}\n        >\n          <DesktopStyledHeaderSubMenu>{children}</DesktopStyledHeaderSubMenu>\n        </YAxisMovement>\n      </Opacity>\n      <Opacity\n        in={isOpen && !isDesktop}\n        timeout={DURATION.DEFAULT}\n        mountOnEnter={false}\n        unmountOnExit={false}\n        style={{display: 'block', position: 'relative'}}\n      >\n        <Slide\n          in={isOpen && !isDesktop}\n          startValue={'-56%'}\n          endValue={'0'}\n          timeout={DURATION.DEFAULT}\n          mountOnEnter={false}\n          unmountOnExit={true}\n        >\n          <MobileStyledHeaderSubMenu>{children}</MobileStyledHeaderSubMenu>\n        </Slide>\n      </Opacity>\n    </MenuSubLink>\n  );\n};\n"],"file":"HeaderSubMenu.js"}

package/src/Layout/headerMenu/MenuContent.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 /** @jsx jsx */
-import { CSSObject } from '@emotion/core';
+import { CSSObject, jsx } from '@emotion/react';
 import type { TextProps } from '../../Text';
 export interface MenuContentProps<T = HTMLDivElement> extends TextProps<T> {
     open?: boolean;
 }
 export declare const menuContentStyle: <T>(props: MenuContentProps<T>) => CSSObject;
-export declare const MenuContent: (props: MenuContentProps) => JSX.Element;
+export declare const MenuContent: (props: MenuContentProps) => jsx.JSX.Element;

package/src/Layout/headerMenu/MenuContent.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _util = require("../../util");
 
@@ -43,7 +43,7 @@ var filterMenuContentProps = function filterMenuContentProps(props) {
 };
 
 var MenuContent = function MenuContent(props) {
-  return (0, _core.jsx)("div", (0, _extends2["default"])({
+  return (0, _react.jsx)("div", (0, _extends2["default"])({
     css: menuContentStyle(props)
   }, filterMenuContentProps(props)));
 };

package/src/Layout/headerMenu/MenuContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuContent.tsx"],"names":["menuContentStyle","props","alignItems","display","gridColumnGap","gridTemplateColumns","height","justifyContent","left","open","undefined","position","width","zIndex","filterMenuContentProps","MenuContent"],"mappings":";;;;;;;;;;;;;AAoBA;;AAGA;;AACA;;;;;;AAMO,IAAMA,gBAA8D,GAAG,SAAjEA,gBAAiE,CAAAC,KAAK;AAAA,yCAC9E,2BAAaA,KAAb,CAD8E;AAEjFC,IAAAA,UAAU,EAAE,QAFqE;AAGjFC,IAAAA,OAAO,EAAE,MAHwE;AAIjFC,IAAAA,aAAa,EAAE,KAJkE;AAKjFC,IAAAA,mBAAmB,EAAE,cAL4D;AAMjFC,IAAAA,MAAM,EAAE,MANyE;AAOjFC,IAAAA,cAAc,EAAE,eAPiE;AAQjFC,IAAAA,IAAI,EAAEP,KAAK,CAACQ,IAAN,GAAa,CAAb,GAAiBC,SAR0D;AASjFC,IAAAA,QAAQ,EAAEV,KAAK,CAACQ,IAAN,GAAa,OAAb,GAAuBC,SATgD;AAUjFE,IAAAA,KAAK,EAAEX,KAAK,CAACQ,IAAN,GAAa,MAAb,GAAsBC,SAVoD;AAWjFG,IAAAA,MAAM,EAAEZ,KAAK,CAACQ,IAAN,GAAa,KAAb,GAAqBC;AAXoD;AAAA,CAA5E;;;;AAcP,IAAMI,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACb,KAAD;AAAA,SAA6B,uBAAYA,KAAZ,EAAmB,CAAC,MAAD,CAAnB,CAA7B;AAAA,CAA/B;;AAEO,IAAMc,WAAW,GAAG,SAAdA,WAAc,CAACd,KAAD;AAAA,SACzB;AAAK,IAAA,GAAG,EAAED,gBAAgB,CAACC,KAAD;AAA1B,KAAuCa,sBAAsB,CAACb,KAAD,CAA7D,EADyB;AAAA,CAApB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/core';\n\nimport type {TextProps} from '../../Text';\nimport {filterProps} from '../../util';\nimport {contentStyle} from '../Content';\n\nexport interface MenuContentProps<T = HTMLDivElement> extends TextProps<T> {\n  open?: boolean;\n}\n\nexport const menuContentStyle: <T>(props: MenuContentProps<T>) => CSSObject = props => ({\n  ...contentStyle(props),\n  alignItems: 'center',\n  display: 'grid',\n  gridColumnGap: '8px',\n  gridTemplateColumns: '1fr auto 1fr',\n  height: '64px',\n  justifyContent: 'space-between',\n  left: props.open ? 0 : undefined,\n  position: props.open ? 'fixed' : undefined,\n  width: props.open ? '100%' : undefined,\n  zIndex: props.open ? 10000 : undefined,\n});\n\nconst filterMenuContentProps = (props: MenuContentProps) => filterProps(props, ['open']);\n\nexport const MenuContent = (props: MenuContentProps) => (\n  <div css={menuContentStyle(props)} {...filterMenuContentProps(props)} />\n);\n"],"file":"MenuContent.js"}
+{"version":3,"sources":["MenuContent.tsx"],"names":["menuContentStyle","props","alignItems","display","gridColumnGap","gridTemplateColumns","height","justifyContent","left","open","undefined","position","width","zIndex","filterMenuContentProps","MenuContent"],"mappings":";;;;;;;;;;;;;AAoBA;;AAGA;;AACA;;;;;;AAMO,IAAMA,gBAA8D,GAAG,SAAjEA,gBAAiE,CAAAC,KAAK;AAAA,yCAC9E,2BAAaA,KAAb,CAD8E;AAEjFC,IAAAA,UAAU,EAAE,QAFqE;AAGjFC,IAAAA,OAAO,EAAE,MAHwE;AAIjFC,IAAAA,aAAa,EAAE,KAJkE;AAKjFC,IAAAA,mBAAmB,EAAE,cAL4D;AAMjFC,IAAAA,MAAM,EAAE,MANyE;AAOjFC,IAAAA,cAAc,EAAE,eAPiE;AAQjFC,IAAAA,IAAI,EAAEP,KAAK,CAACQ,IAAN,GAAa,CAAb,GAAiBC,SAR0D;AASjFC,IAAAA,QAAQ,EAAEV,KAAK,CAACQ,IAAN,GAAa,OAAb,GAAuBC,SATgD;AAUjFE,IAAAA,KAAK,EAAEX,KAAK,CAACQ,IAAN,GAAa,MAAb,GAAsBC,SAVoD;AAWjFG,IAAAA,MAAM,EAAEZ,KAAK,CAACQ,IAAN,GAAa,KAAb,GAAqBC;AAXoD;AAAA,CAA5E;;;;AAcP,IAAMI,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACb,KAAD;AAAA,SAA6B,uBAAYA,KAAZ,EAAmB,CAAC,MAAD,CAAnB,CAA7B;AAAA,CAA/B;;AAEO,IAAMc,WAAW,GAAG,SAAdA,WAAc,CAACd,KAAD;AAAA,SACzB;AAAK,IAAA,GAAG,EAAED,gBAAgB,CAACC,KAAD;AAA1B,KAAuCa,sBAAsB,CAACb,KAAD,CAA7D,EADyB;AAAA,CAApB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport type {TextProps} from '../../Text';\nimport {filterProps} from '../../util';\nimport {contentStyle} from '../Content';\n\nexport interface MenuContentProps<T = HTMLDivElement> extends TextProps<T> {\n  open?: boolean;\n}\n\nexport const menuContentStyle: <T>(props: MenuContentProps<T>) => CSSObject = props => ({\n  ...contentStyle(props),\n  alignItems: 'center',\n  display: 'grid',\n  gridColumnGap: '8px',\n  gridTemplateColumns: '1fr auto 1fr',\n  height: '64px',\n  justifyContent: 'space-between',\n  left: props.open ? 0 : undefined,\n  position: props.open ? 'fixed' : undefined,\n  width: props.open ? '100%' : undefined,\n  zIndex: props.open ? 10000 : undefined,\n});\n\nconst filterMenuContentProps = (props: MenuContentProps) => filterProps(props, ['open']);\n\nexport const MenuContent = (props: MenuContentProps) => (\n  <div css={menuContentStyle(props)} {...filterMenuContentProps(props)} />\n);\n"],"file":"MenuContent.js"}

package/src/Layout/headerMenu/MenuItems.d.ts

@@ -1,9 +1,9 @@
 /** @jsx jsx */
 import React from 'react';
-import { CSSObject } from '@emotion/core';
+import { CSSObject, jsx } from '@emotion/react';
 import type { Theme } from '../Theme';
 export interface MenuItemsProps<T = HTMLDivElement> extends React.HTMLProps<T> {
     open?: boolean;
 }
 export declare const menuItemsStyle: <T>(theme: Theme, props: MenuItemsProps<T>) => CSSObject;
-export declare const MenuItems: (props: MenuItemsProps) => JSX.Element;
+export declare const MenuItems: (props: MenuItemsProps) => jsx.JSX.Element;

package/src/Layout/headerMenu/MenuItems.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _mediaQueries = require("../../mediaQueries");
 
@@ -65,7 +65,7 @@ var filterMenuItemProps = function filterMenuItemProps(props) {
 };
 
 var MenuItems = function MenuItems(props) {
-  return (0, _core.jsx)("div", (0, _extends2["default"])({
+  return (0, _react2.jsx)("div", (0, _extends2["default"])({
     css: function css(theme) {
       return menuItemsStyle(theme, props);
     }

package/src/Layout/headerMenu/MenuItems.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuItems.tsx"],"names":["menuItemsStyle","theme","props","alignSelf","display","justifySelf","media","QueryKeys","TABLET_DOWN","backgroundColor","general","bottom","left","overflowY","position","right","top","transform","open","transition","zIndex","filterMenuItemProps","MenuItems"],"mappings":";;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;AAxBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAYO,IAAMA,cAAwE,GAAG,SAA3EA,cAA2E,CAACC,KAAD,EAAQC,KAAR;AAAA;AACtFC,IAAAA,SAAS,EAAE,QAD2E;AAEtFC,IAAAA,OAAO,EAAE,MAF6E;AAGtFC,IAAAA,WAAW,EAAE;AAHyE,KAIrFC,oBAAMC,wBAAUC,WAAhB,CAJqF,EAItD;AAC9BC,IAAAA,eAAe,EAAER,KAAK,CAACS,OAAN,CAAcD,eADD;AAE9BE,IAAAA,MAAM,EAAE,CAFsB;AAG9BC,IAAAA,IAAI,EAAE,CAHwB;AAI9BC,IAAAA,SAAS,EAAE,MAJmB;AAK9BC,IAAAA,QAAQ,EAAE,OALoB;AAM9BC,IAAAA,KAAK,EAAE,CANuB;AAO9BC,IAAAA,GAAG,EAAE,CAPyB;AAQ9BC,IAAAA,SAAS,EAAEf,KAAK,CAACgB,IAAN,GAAa,eAAb,GAA+B,kBARZ;AAS9BC,IAAAA,UAAU,EAAE,sBATkB;AAU9BC,IAAAA,MAAM,EAAE;AAVsB,GAJsD;AAAA,CAAjF;;;;AAkBP,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACnB,KAAD;AAAA,SAA2B,uBAAYA,KAAZ,EAAmB,CAAC,MAAD,CAAnB,CAA3B;AAAA,CAA5B;;AAEO,IAAMoB,SAAS,GAAG,SAAZA,SAAY,CAACpB,KAAD;AAAA,SACvB;AAAK,IAAA,GAAG,EAAE,aAAAD,KAAK;AAAA,aAAID,cAAc,CAACC,KAAD,EAAQC,KAAR,CAAlB;AAAA;AAAf,KAAqDmB,mBAAmB,CAACnB,KAAD,CAAxE,EADuB;AAAA,CAAlB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport React from 'react';\nimport {CSSObject, jsx} from '@emotion/core';\n\nimport {QueryKeys, media} from '../../mediaQueries';\nimport {filterProps} from '../../util';\nimport type {Theme} from '../Theme';\n\nexport interface MenuItemsProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  open?: boolean;\n}\n\nexport const menuItemsStyle: <T>(theme: Theme, props: MenuItemsProps<T>) => CSSObject = (theme, props) => ({\n  alignSelf: 'center',\n  display: 'flex',\n  justifySelf: 'end',\n  [media[QueryKeys.TABLET_DOWN]]: {\n    backgroundColor: theme.general.backgroundColor,\n    bottom: 0,\n    left: 0,\n    overflowY: 'auto',\n    position: 'fixed',\n    right: 0,\n    top: 0,\n    transform: props.open ? 'translateX(0)' : 'translateX(110%)',\n    transition: 'transform 0.25s ease',\n    zIndex: 1,\n  },\n});\n\nconst filterMenuItemProps = (props: MenuItemsProps) => filterProps(props, ['open']);\n\nexport const MenuItems = (props: MenuItemsProps) => (\n  <div css={theme => menuItemsStyle(theme, props)} {...filterMenuItemProps(props)} />\n);\n"],"file":"MenuItems.js"}
+{"version":3,"sources":["MenuItems.tsx"],"names":["menuItemsStyle","theme","props","alignSelf","display","justifySelf","media","QueryKeys","TABLET_DOWN","backgroundColor","general","bottom","left","overflowY","position","right","top","transform","open","transition","zIndex","filterMenuItemProps","MenuItems"],"mappings":";;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;AAxBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAYO,IAAMA,cAAwE,GAAG,SAA3EA,cAA2E,CAACC,KAAD,EAAQC,KAAR;AAAA;AACtFC,IAAAA,SAAS,EAAE,QAD2E;AAEtFC,IAAAA,OAAO,EAAE,MAF6E;AAGtFC,IAAAA,WAAW,EAAE;AAHyE,KAIrFC,oBAAMC,wBAAUC,WAAhB,CAJqF,EAItD;AAC9BC,IAAAA,eAAe,EAAER,KAAK,CAACS,OAAN,CAAcD,eADD;AAE9BE,IAAAA,MAAM,EAAE,CAFsB;AAG9BC,IAAAA,IAAI,EAAE,CAHwB;AAI9BC,IAAAA,SAAS,EAAE,MAJmB;AAK9BC,IAAAA,QAAQ,EAAE,OALoB;AAM9BC,IAAAA,KAAK,EAAE,CANuB;AAO9BC,IAAAA,GAAG,EAAE,CAPyB;AAQ9BC,IAAAA,SAAS,EAAEf,KAAK,CAACgB,IAAN,GAAa,eAAb,GAA+B,kBARZ;AAS9BC,IAAAA,UAAU,EAAE,sBATkB;AAU9BC,IAAAA,MAAM,EAAE;AAVsB,GAJsD;AAAA,CAAjF;;;;AAkBP,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACnB,KAAD;AAAA,SAA2B,uBAAYA,KAAZ,EAAmB,CAAC,MAAD,CAAnB,CAA3B;AAAA,CAA5B;;AAEO,IAAMoB,SAAS,GAAG,SAAZA,SAAY,CAACpB,KAAD;AAAA,SACvB;AAAK,IAAA,GAAG,EAAE,aAACD,KAAD;AAAA,aAAkBD,cAAc,CAACC,KAAD,EAAQC,KAAR,CAAhC;AAAA;AAAV,KAA8DmB,mBAAmB,CAACnB,KAAD,CAAjF,EADuB;AAAA,CAAlB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport React from 'react';\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {QueryKeys, media} from '../../mediaQueries';\nimport {filterProps} from '../../util';\nimport type {Theme} from '../Theme';\n\nexport interface MenuItemsProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  open?: boolean;\n}\n\nexport const menuItemsStyle: <T>(theme: Theme, props: MenuItemsProps<T>) => CSSObject = (theme, props) => ({\n  alignSelf: 'center',\n  display: 'flex',\n  justifySelf: 'end',\n  [media[QueryKeys.TABLET_DOWN]]: {\n    backgroundColor: theme.general.backgroundColor,\n    bottom: 0,\n    left: 0,\n    overflowY: 'auto',\n    position: 'fixed',\n    right: 0,\n    top: 0,\n    transform: props.open ? 'translateX(0)' : 'translateX(110%)',\n    transition: 'transform 0.25s ease',\n    zIndex: 1,\n  },\n});\n\nconst filterMenuItemProps = (props: MenuItemsProps) => filterProps(props, ['open']);\n\nexport const MenuItems = (props: MenuItemsProps) => (\n  <div css={(theme: Theme) => menuItemsStyle(theme, props)} {...filterMenuItemProps(props)} />\n);\n"],"file":"MenuItems.js"}

package/src/Layout/headerMenu/MenuLink.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 /** @jsx jsx */
-import { CSSObject } from '@emotion/core';
+import { CSSObject, jsx } from '@emotion/react';
 import { LinkProps } from '../../Text';
 import type { Theme } from '../Theme';
 export interface MenuLinkProps<T = HTMLAnchorElement> extends LinkProps<T> {
@@ -9,4 +8,4 @@ export interface MenuLinkProps<T = HTMLAnchorElement> extends LinkProps<T> {
 export declare const menuLinkStyle: <T>(theme: Theme, props: MenuLinkProps<T>) => CSSObject;
 export declare const MENU_LINK_CLASSNAME = "menu-link";
 export declare const filterMenuLinkProps: (props: MenuLinkProps) => Object;
-export declare const MenuLink: (props: MenuLinkProps) => JSX.Element;
+export declare const MenuLink: (props: MenuLinkProps) => jsx.JSX.Element;

package/src/Layout/headerMenu/MenuLink.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _mediaQueries = require("../../mediaQueries");
 
@@ -84,7 +84,7 @@ var filterMenuLinkProps = function filterMenuLinkProps(props) {
 exports.filterMenuLinkProps = filterMenuLinkProps;
 
 var MenuLink = function MenuLink(props) {
-  return (0, _core.jsx)("a", (0, _extends2["default"])({
+  return (0, _react.jsx)("a", (0, _extends2["default"])({
     className: MENU_LINK_CLASSNAME,
     css: function css(theme) {
       return menuLinkStyle(theme, props);

package/src/Layout/headerMenu/MenuLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuLink.tsx"],"names":["menuLinkStyle","theme","bold","color","general","fontSize","textTransform","button","props","media","QueryKeys","DESKTOP","marginLeft","marginRight","margin","DESKTOP_HEADER_SUB_MENU_CLASSNAME","TABLET_DOWN","border","fontWeight","maxWidth","padding","undefined","MENU_LINK_CLASSNAME","filterMenuLinkProps","MenuLink"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AACA;;AACA;;AAEA;;;;;;;;AAMO,IAAMA,aAAsE,GAAG,SAAzEA,aAAyE,CACpFC,KADoF;AAAA;;AAAA,uBAEnFC,IAFmF;AAAA,MAEnFA,IAFmF,0BAE5E,IAF4E;AAAA,wBAEtEC,KAFsE;AAAA,MAEtEA,KAFsE,2BAE9DF,KAAK,CAACG,OAAN,CAAcD,KAFgD;AAAA,2BAEzCE,QAFyC;AAAA,MAEzCA,QAFyC,8BAE9B,MAF8B;AAAA,gCAEtBC,aAFsB;AAAA,MAEtBA,aAFsB,mCAEN,WAFM;AAAA,yBAEOC,MAFP;AAAA,MAEOA,MAFP,4BAEgB,KAFhB;AAAA,MAE0BC,KAF1B;AAAA,yCAIjF,qBAAUP,KAAV;AAAkBC,IAAAA,IAAI,EAAJA,IAAlB;AAAwBC,IAAAA,KAAK,EAALA,KAAxB;AAA+BE,IAAAA,QAAQ,EAARA,QAA/B;AAAyCC,IAAAA,aAAa,EAAbA;AAAzC,KAA2DE,KAA3D,EAJiF,8EAKnFC,oBAAMC,wBAAUC,OAAhB,CALmF;AAMlF,uBAAmB;AACjBC,MAAAA,UAAU,EAAE;AADK,KAN+D;AASlF,sBAAkB;AAChBC,MAAAA,WAAW,EAAE;AADG,KATgE;AAYlFC,IAAAA,MAAM,EAAE;AAZ0E,gBAa7EC,gDAb6E,SAarC;AAC3C,uBAAmB;AACjBH,MAAAA,UAAU,EAAE;AADK,KADwB;AAI3C,sBAAkB;AAChBC,MAAAA,WAAW,EAAE;AADG;AAJyB,GAbqC,qDAsBnFJ,oBAAMC,wBAAUM,WAAhB,CAtBmF,EAsBpD;AAC9BC,IAAAA,MAAM,EAAE,MADsB;AAE9BZ,IAAAA,QAAQ,EAAE,iBAFoB;AAG9Ba,IAAAA,UAAU,EAAE,GAHkB;AAI9BC,IAAAA,QAAQ,EAAE,OAJoB;AAK9BC,IAAAA,OAAO,EAAE,UALqB;AAM9Bd,IAAAA,aAAa,EAAE;AANe,GAtBoD,8DA8B5EC,MAAM,GAAG,8BAAH,GAAoCc,SA9BkC,oEA+BtEd,MAAM,GAAG,KAAH,GAAWc,SA/BqD,+DAgC3Ed,MAAM,GAAG,WAAH,GAAiBc,SAhCoD;AAAA,CAA/E;;;AAmCA,IAAMC,mBAAmB,GAAG,WAA5B;;;AAEA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACf,KAAD;AAAA,SACjC,uBAAY,2BAAgBA,KAAhB,CAAZ,EAAqD,CAAC,QAAD,CAArD,CADiC;AAAA,CAA5B;;;;AAGA,IAAMgB,QAAQ,GAAG,SAAXA,QAAW,CAAChB,KAAD;AAAA,SACtB;AAAG,IAAA,SAAS,EAAEc,mBAAd;AAAmC,IAAA,GAAG,EAAE,aAAArB,KAAK;AAAA,aAAID,aAAa,CAACC,KAAD,EAAQO,KAAR,CAAjB;AAAA;AAA7C,KAAkFe,mBAAmB,CAACf,KAAD,CAArG,EADsB;AAAA,CAAjB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/core';\n\nimport {QueryKeys, media} from '../../mediaQueries';\nimport {LinkProps, filterLinkProps, linkStyle} from '../../Text';\nimport {filterProps} from '../../util';\nimport type {Theme} from '../Theme';\nimport {DESKTOP_HEADER_SUB_MENU_CLASSNAME} from './HeaderSubMenu';\n\nexport interface MenuLinkProps<T = HTMLAnchorElement> extends LinkProps<T> {\n  button?: boolean;\n}\n\nexport const menuLinkStyle: <T>(theme: Theme, props: MenuLinkProps<T>) => CSSObject = (\n  theme,\n  {bold = true, color = theme.general.color, fontSize = '11px', textTransform = 'uppercase', button = false, ...props},\n) => ({\n  ...linkStyle(theme, {bold, color, fontSize, textTransform, ...props}),\n  [media[QueryKeys.DESKTOP]]: {\n    '&:first-of-type': {\n      marginLeft: 0,\n    },\n    '&:last-of-type': {\n      marginRight: 0,\n    },\n    margin: '0 26px 0 10px',\n    [`.${DESKTOP_HEADER_SUB_MENU_CLASSNAME} &`]: {\n      '&:first-of-type': {\n        marginLeft: '10px',\n      },\n      '&:last-of-type': {\n        marginRight: '26px',\n      },\n    },\n  },\n  [media[QueryKeys.TABLET_DOWN]]: {\n    border: 'none',\n    fontSize: '32px !important',\n    fontWeight: 300,\n    maxWidth: '480px',\n    padding: '8px 24px',\n    textTransform: 'none !important',\n  },\n  border: button ? '1px solid rgb(219, 226, 231)' : undefined,\n  borderRadius: button ? '4px' : undefined,\n  padding: button ? '10px 16px' : undefined,\n});\n\nexport const MENU_LINK_CLASSNAME = 'menu-link';\n\nexport const filterMenuLinkProps = (props: MenuLinkProps) =>\n  filterProps(filterLinkProps(props) as MenuLinkProps, ['button']);\n\nexport const MenuLink = (props: MenuLinkProps) => (\n  <a className={MENU_LINK_CLASSNAME} css={theme => menuLinkStyle(theme, props)} {...filterMenuLinkProps(props)} />\n);\n"],"file":"MenuLink.js"}
+{"version":3,"sources":["MenuLink.tsx"],"names":["menuLinkStyle","theme","bold","color","general","fontSize","textTransform","button","props","media","QueryKeys","DESKTOP","marginLeft","marginRight","margin","DESKTOP_HEADER_SUB_MENU_CLASSNAME","TABLET_DOWN","border","fontWeight","maxWidth","padding","undefined","MENU_LINK_CLASSNAME","filterMenuLinkProps","MenuLink"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AACA;;AACA;;AAEA;;;;;;;;AAMO,IAAMA,aAAsE,GAAG,SAAzEA,aAAyE,CACpFC,KADoF;AAAA;;AAAA,uBAEnFC,IAFmF;AAAA,MAEnFA,IAFmF,0BAE5E,IAF4E;AAAA,wBAEtEC,KAFsE;AAAA,MAEtEA,KAFsE,2BAE9DF,KAAK,CAACG,OAAN,CAAcD,KAFgD;AAAA,2BAEzCE,QAFyC;AAAA,MAEzCA,QAFyC,8BAE9B,MAF8B;AAAA,gCAEtBC,aAFsB;AAAA,MAEtBA,aAFsB,mCAEN,WAFM;AAAA,yBAEOC,MAFP;AAAA,MAEOA,MAFP,4BAEgB,KAFhB;AAAA,MAE0BC,KAF1B;AAAA,yCAIjF,qBAAUP,KAAV;AAAkBC,IAAAA,IAAI,EAAJA,IAAlB;AAAwBC,IAAAA,KAAK,EAALA,KAAxB;AAA+BE,IAAAA,QAAQ,EAARA,QAA/B;AAAyCC,IAAAA,aAAa,EAAbA;AAAzC,KAA2DE,KAA3D,EAJiF,8EAKnFC,oBAAMC,wBAAUC,OAAhB,CALmF;AAMlF,uBAAmB;AACjBC,MAAAA,UAAU,EAAE;AADK,KAN+D;AASlF,sBAAkB;AAChBC,MAAAA,WAAW,EAAE;AADG,KATgE;AAYlFC,IAAAA,MAAM,EAAE;AAZ0E,gBAa7EC,gDAb6E,SAarC;AAC3C,uBAAmB;AACjBH,MAAAA,UAAU,EAAE;AADK,KADwB;AAI3C,sBAAkB;AAChBC,MAAAA,WAAW,EAAE;AADG;AAJyB,GAbqC,qDAsBnFJ,oBAAMC,wBAAUM,WAAhB,CAtBmF,EAsBpD;AAC9BC,IAAAA,MAAM,EAAE,MADsB;AAE9BZ,IAAAA,QAAQ,EAAE,iBAFoB;AAG9Ba,IAAAA,UAAU,EAAE,GAHkB;AAI9BC,IAAAA,QAAQ,EAAE,OAJoB;AAK9BC,IAAAA,OAAO,EAAE,UALqB;AAM9Bd,IAAAA,aAAa,EAAE;AANe,GAtBoD,8DA8B5EC,MAAM,GAAG,8BAAH,GAAoCc,SA9BkC,oEA+BtEd,MAAM,GAAG,KAAH,GAAWc,SA/BqD,+DAgC3Ed,MAAM,GAAG,WAAH,GAAiBc,SAhCoD;AAAA,CAA/E;;;AAmCA,IAAMC,mBAAmB,GAAG,WAA5B;;;AAEA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACf,KAAD;AAAA,SACjC,uBAAY,2BAAgBA,KAAhB,CAAZ,EAAqD,CAAC,QAAD,CAArD,CADiC;AAAA,CAA5B;;;;AAGA,IAAMgB,QAAQ,GAAG,SAAXA,QAAW,CAAChB,KAAD;AAAA,SACtB;AACE,IAAA,SAAS,EAAEc,mBADb;AAEE,IAAA,GAAG,EAAE,aAACrB,KAAD;AAAA,aAAkBD,aAAa,CAACC,KAAD,EAAQO,KAAR,CAA/B;AAAA;AAFP,KAGMe,mBAAmB,CAACf,KAAD,CAHzB,EADsB;AAAA,CAAjB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {QueryKeys, media} from '../../mediaQueries';\nimport {LinkProps, filterLinkProps, linkStyle} from '../../Text';\nimport {filterProps} from '../../util';\nimport type {Theme} from '../Theme';\nimport {DESKTOP_HEADER_SUB_MENU_CLASSNAME} from './HeaderSubMenu';\n\nexport interface MenuLinkProps<T = HTMLAnchorElement> extends LinkProps<T> {\n  button?: boolean;\n}\n\nexport const menuLinkStyle: <T>(theme: Theme, props: MenuLinkProps<T>) => CSSObject = (\n  theme,\n  {bold = true, color = theme.general.color, fontSize = '11px', textTransform = 'uppercase', button = false, ...props},\n) => ({\n  ...linkStyle(theme, {bold, color, fontSize, textTransform, ...props}),\n  [media[QueryKeys.DESKTOP]]: {\n    '&:first-of-type': {\n      marginLeft: 0,\n    },\n    '&:last-of-type': {\n      marginRight: 0,\n    },\n    margin: '0 26px 0 10px',\n    [`.${DESKTOP_HEADER_SUB_MENU_CLASSNAME} &`]: {\n      '&:first-of-type': {\n        marginLeft: '10px',\n      },\n      '&:last-of-type': {\n        marginRight: '26px',\n      },\n    },\n  },\n  [media[QueryKeys.TABLET_DOWN]]: {\n    border: 'none',\n    fontSize: '32px !important',\n    fontWeight: 300,\n    maxWidth: '480px',\n    padding: '8px 24px',\n    textTransform: 'none !important',\n  },\n  border: button ? '1px solid rgb(219, 226, 231)' : undefined,\n  borderRadius: button ? '4px' : undefined,\n  padding: button ? '10px 16px' : undefined,\n});\n\nexport const MENU_LINK_CLASSNAME = 'menu-link';\n\nexport const filterMenuLinkProps = (props: MenuLinkProps) =>\n  filterProps(filterLinkProps(props) as MenuLinkProps, ['button']);\n\nexport const MenuLink = (props: MenuLinkProps) => (\n  <a\n    className={MENU_LINK_CLASSNAME}\n    css={(theme: Theme) => menuLinkStyle(theme, props)}\n    {...filterMenuLinkProps(props)}\n  />\n);\n"],"file":"MenuLink.js"}

package/src/Layout/headerMenu/MenuOpenButton.d.ts

@@ -1,9 +1,9 @@
 /** @jsx jsx */
-import { CSSObject } from '@emotion/core';
+import { CSSObject, jsx } from '@emotion/react';
 import React from 'react';
 import type { Theme } from '../Theme';
 export interface MenuOpenButtonProps<T = HTMLDivElement> extends React.HTMLProps<T> {
     open?: boolean;
 }
 export declare const menuOpenButtonStyle: <T>(theme: Theme, props: MenuOpenButtonProps<T>) => CSSObject;
-export declare const MenuOpenButton: (props: MenuOpenButtonProps) => JSX.Element;
+export declare const MenuOpenButton: (props: MenuOpenButtonProps) => jsx.JSX.Element;

package/src/Layout/headerMenu/MenuOpenButton.js

@@ -11,9 +11,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
-var _react = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireDefault(require("react"));
 
 var _mediaQueries = require("../../mediaQueries");
 
@@ -52,14 +52,14 @@ var menuOpenButtonStyle = function menuOpenButtonStyle(theme, _ref) {
       transition: 'all 0.25s ease-in-out',
       width: '16px'
     },
-    'div:nth-child(1)': {
+    'div:nth-of-type(1)': {
       transform: open ? 'translateY(6px) rotate(-45deg)' : undefined
     },
-    'div:nth-child(2)': {
+    'div:nth-of-type(2)': {
       opacity: open ? 0 : undefined,
       transform: open ? 'scale(0, 1)' : undefined
     },
-    'div:nth-child(3)': {
+    'div:nth-of-type(3)': {
       transform: open ? 'translateY(-6px) rotate(45deg)' : undefined
     }
   }, (0, _defineProperty2["default"])(_ref2, _mediaQueries.media[_mediaQueries.QueryKeys.DESKTOP], {
@@ -74,11 +74,11 @@ var filterMenuOpenButtonProps = function filterMenuOpenButtonProps(props) {
 };
 
 var MenuOpenButton = function MenuOpenButton(props) {
-  return (0, _core.jsx)("div", (0, _extends2["default"])({
+  return (0, _react.jsx)("div", (0, _extends2["default"])({
     css: function css(theme) {
       return menuOpenButtonStyle(theme, props);
     }
-  }, filterMenuOpenButtonProps(props)), (0, _core.jsx)("div", null), (0, _core.jsx)("div", null), (0, _core.jsx)("div", null));
+  }, filterMenuOpenButtonProps(props)), (0, _react.jsx)("div", null), (0, _react.jsx)("div", null), (0, _react.jsx)("div", null));
 };
 
 exports.MenuOpenButton = MenuOpenButton;

package/src/Layout/headerMenu/MenuOpenButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuOpenButton.tsx"],"names":["menuOpenButtonStyle","theme","open","display","div","backgroundColor","general","color","height","margin","transition","width","transform","undefined","opacity","media","QueryKeys","DESKTOP","filterMenuOpenButtonProps","props","MenuOpenButton"],"mappings":";;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;AAxBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAYO,IAAMA,mBAAkF,GAAG,SAArFA,mBAAqF,CAACC,KAAD;AAAA;;AAAA,MAASC,IAAT,QAASA,IAAT;AAAA;AAChGC,IAAAA,OAAO,EAAE,OADuF;AAEhGC,IAAAA,GAAG,EAAE;AACHC,MAAAA,eAAe,EAAEJ,KAAK,CAACK,OAAN,CAAcC,KAD5B;AAEHC,MAAAA,MAAM,EAAE,KAFL;AAGHC,MAAAA,MAAM,EAAE,KAHL;AAIHC,MAAAA,UAAU,EAAE,uBAJT;AAKHC,MAAAA,KAAK,EAAE;AALJ,KAF2F;AAShG,wBAAoB;AAClBC,MAAAA,SAAS,EAAEV,IAAI,GAAG,gCAAH,GAAsCW;AADnC,KAT4E;AAYhG,wBAAoB;AAClBC,MAAAA,OAAO,EAAEZ,IAAI,GAAG,CAAH,GAAOW,SADF;AAElBD,MAAAA,SAAS,EAAEV,IAAI,GAAG,aAAH,GAAmBW;AAFhB,KAZ4E;AAgBhG,wBAAoB;AAClBD,MAAAA,SAAS,EAAEV,IAAI,GAAG,gCAAH,GAAsCW;AADnC;AAhB4E,6CAmB/FE,oBAAMC,wBAAUC,OAAhB,CAnB+F,EAmBpE;AAC1Bd,IAAAA,OAAO,EAAE;AADiB,GAnBoE,qDAsBxF,CAtBwF;AAAA,CAA3F;;;;AAyBP,IAAMe,yBAAyB,GAAG,SAA5BA,yBAA4B,CAACC,KAAD;AAAA,SAAgC,uBAAYA,KAAZ,EAAmB,CAAC,MAAD,CAAnB,CAAhC;AAAA,CAAlC;;AAEO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACD,KAAD;AAAA,SAC5B;AAAK,IAAA,GAAG,EAAE,aAAAlB,KAAK;AAAA,aAAID,mBAAmB,CAACC,KAAD,EAAQkB,KAAR,CAAvB;AAAA;AAAf,KAA0DD,yBAAyB,CAACC,KAAD,CAAnF,GACE,2BADF,EAEE,2BAFF,EAGE,2BAHF,CAD4B;AAAA,CAAvB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/core';\nimport React from 'react';\n\nimport {QueryKeys, media} from '../../mediaQueries';\nimport {filterProps} from '../../util';\nimport type {Theme} from '../Theme';\n\nexport interface MenuOpenButtonProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  open?: boolean;\n}\n\nexport const menuOpenButtonStyle: <T>(theme: Theme, props: MenuOpenButtonProps<T>) => CSSObject = (theme, {open}) => ({\n  display: 'block',\n  div: {\n    backgroundColor: theme.general.color,\n    height: '2px',\n    margin: '4px',\n    transition: 'all 0.25s ease-in-out',\n    width: '16px',\n  },\n  'div:nth-child(1)': {\n    transform: open ? 'translateY(6px) rotate(-45deg)' : undefined,\n  },\n  'div:nth-child(2)': {\n    opacity: open ? 0 : undefined,\n    transform: open ? 'scale(0, 1)' : undefined,\n  },\n  'div:nth-child(3)': {\n    transform: open ? 'translateY(-6px) rotate(45deg)' : undefined,\n  },\n  [media[QueryKeys.DESKTOP]]: {\n    display: 'none',\n  },\n  zIndex: 2,\n});\n\nconst filterMenuOpenButtonProps = (props: MenuOpenButtonProps) => filterProps(props, ['open']);\n\nexport const MenuOpenButton = (props: MenuOpenButtonProps) => (\n  <div css={theme => menuOpenButtonStyle(theme, props)} {...filterMenuOpenButtonProps(props)}>\n    <div />\n    <div />\n    <div />\n  </div>\n);\n"],"file":"MenuOpenButton.js"}
+{"version":3,"sources":["MenuOpenButton.tsx"],"names":["menuOpenButtonStyle","theme","open","display","div","backgroundColor","general","color","height","margin","transition","width","transform","undefined","opacity","media","QueryKeys","DESKTOP","filterMenuOpenButtonProps","props","MenuOpenButton"],"mappings":";;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;AAxBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAYO,IAAMA,mBAAkF,GAAG,SAArFA,mBAAqF,CAACC,KAAD;AAAA;;AAAA,MAASC,IAAT,QAASA,IAAT;AAAA;AAChGC,IAAAA,OAAO,EAAE,OADuF;AAEhGC,IAAAA,GAAG,EAAE;AACHC,MAAAA,eAAe,EAAEJ,KAAK,CAACK,OAAN,CAAcC,KAD5B;AAEHC,MAAAA,MAAM,EAAE,KAFL;AAGHC,MAAAA,MAAM,EAAE,KAHL;AAIHC,MAAAA,UAAU,EAAE,uBAJT;AAKHC,MAAAA,KAAK,EAAE;AALJ,KAF2F;AAShG,0BAAsB;AACpBC,MAAAA,SAAS,EAAEV,IAAI,GAAG,gCAAH,GAAsCW;AADjC,KAT0E;AAYhG,0BAAsB;AACpBC,MAAAA,OAAO,EAAEZ,IAAI,GAAG,CAAH,GAAOW,SADA;AAEpBD,MAAAA,SAAS,EAAEV,IAAI,GAAG,aAAH,GAAmBW;AAFd,KAZ0E;AAgBhG,0BAAsB;AACpBD,MAAAA,SAAS,EAAEV,IAAI,GAAG,gCAAH,GAAsCW;AADjC;AAhB0E,6CAmB/FE,oBAAMC,wBAAUC,OAAhB,CAnB+F,EAmBpE;AAC1Bd,IAAAA,OAAO,EAAE;AADiB,GAnBoE,qDAsBxF,CAtBwF;AAAA,CAA3F;;;;AAyBP,IAAMe,yBAAyB,GAAG,SAA5BA,yBAA4B,CAACC,KAAD;AAAA,SAAgC,uBAAYA,KAAZ,EAAmB,CAAC,MAAD,CAAnB,CAAhC;AAAA,CAAlC;;AAEO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACD,KAAD;AAAA,SAC5B;AAAK,IAAA,GAAG,EAAE,aAAClB,KAAD;AAAA,aAAkBD,mBAAmB,CAACC,KAAD,EAAQkB,KAAR,CAArC;AAAA;AAAV,KAAmED,yBAAyB,CAACC,KAAD,CAA5F,GACE,4BADF,EAEE,4BAFF,EAGE,4BAHF,CAD4B;AAAA,CAAvB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {QueryKeys, media} from '../../mediaQueries';\nimport {filterProps} from '../../util';\nimport type {Theme} from '../Theme';\n\nexport interface MenuOpenButtonProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  open?: boolean;\n}\n\nexport const menuOpenButtonStyle: <T>(theme: Theme, props: MenuOpenButtonProps<T>) => CSSObject = (theme, {open}) => ({\n  display: 'block',\n  div: {\n    backgroundColor: theme.general.color,\n    height: '2px',\n    margin: '4px',\n    transition: 'all 0.25s ease-in-out',\n    width: '16px',\n  },\n  'div:nth-of-type(1)': {\n    transform: open ? 'translateY(6px) rotate(-45deg)' : undefined,\n  },\n  'div:nth-of-type(2)': {\n    opacity: open ? 0 : undefined,\n    transform: open ? 'scale(0, 1)' : undefined,\n  },\n  'div:nth-of-type(3)': {\n    transform: open ? 'translateY(-6px) rotate(45deg)' : undefined,\n  },\n  [media[QueryKeys.DESKTOP]]: {\n    display: 'none',\n  },\n  zIndex: 2,\n});\n\nconst filterMenuOpenButtonProps = (props: MenuOpenButtonProps) => filterProps(props, ['open']);\n\nexport const MenuOpenButton = (props: MenuOpenButtonProps) => (\n  <div css={(theme: Theme) => menuOpenButtonStyle(theme, props)} {...filterMenuOpenButtonProps(props)}>\n    <div />\n    <div />\n    <div />\n  </div>\n);\n"],"file":"MenuOpenButton.js"}

package/src/Layout/headerMenu/MenuScrollableItems.d.ts

@@ -1,8 +1,8 @@
 /** @jsx jsx */
-import { CSSObject } from '@emotion/core';
+import { CSSObject, jsx } from '@emotion/react';
 import React from 'react';
 export interface MenuScrollableItemsProps<T = HTMLDivElement> extends React.HTMLProps<T> {
     open?: boolean;
 }
 export declare const menuScrollableItemsStyle: <T>(props: MenuScrollableItemsProps<T>) => CSSObject;
-export declare const MenuScrollableItems: (props: MenuScrollableItemsProps) => JSX.Element;
+export declare const MenuScrollableItems: (props: MenuScrollableItemsProps) => jsx.JSX.Element;

package/src/Layout/headerMenu/MenuScrollableItems.js

@@ -11,9 +11,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
-var _react = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireDefault(require("react"));
 
 var _mediaQueries = require("../../mediaQueries");
 
@@ -52,7 +52,7 @@ var menuScrollableItemsStyle = function menuScrollableItemsStyle(props) {
 exports.menuScrollableItemsStyle = menuScrollableItemsStyle;
 
 var MenuScrollableItems = function MenuScrollableItems(props) {
-  return (0, _core.jsx)("div", (0, _extends2["default"])({
+  return (0, _react.jsx)("div", (0, _extends2["default"])({
     css: menuScrollableItemsStyle(props)
   }, props));
 };

package/src/Layout/headerMenu/MenuScrollableItems.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuScrollableItems.tsx"],"names":["menuScrollableItemsStyle","props","alignItems","alignSelf","display","media","QueryKeys","TABLET_DOWN","flexDirection","margin","MenuScrollableItems"],"mappings":";;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AAvBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAUO,IAAMA,wBAA8E,GAAG,SAAjFA,wBAAiF,CAAAC,KAAK;AAAA;AACjGC,IAAAA,UAAU,EAAE,QADqF;AAEjGC,IAAAA,SAAS,EAAE,QAFsF;AAGjGC,IAAAA,OAAO,EAAE;AAHwF,KAIhGC,oBAAMC,wBAAUC,WAAhB,CAJgG,EAIjE;AAC9BL,IAAAA,UAAU,EAAE,QADkB;AAE9BM,IAAAA,aAAa,EAAE,QAFe;AAG9BC,IAAAA,MAAM,EAAE;AAHsB,GAJiE;AAAA,CAA5F;;;;AAWA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACT,KAAD;AAAA,SACjC;AAAK,IAAA,GAAG,EAAED,wBAAwB,CAACC,KAAD;AAAlC,KAA+CA,KAA/C,EADiC;AAAA,CAA5B","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/core';\nimport React from 'react';\n\nimport {QueryKeys, media} from '../../mediaQueries';\n\nexport interface MenuScrollableItemsProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  open?: boolean;\n}\n\nexport const menuScrollableItemsStyle: <T>(props: MenuScrollableItemsProps<T>) => CSSObject = props => ({\n  alignItems: 'center',\n  alignSelf: 'center',\n  display: 'flex',\n  [media[QueryKeys.TABLET_DOWN]]: {\n    alignItems: 'center',\n    flexDirection: 'column',\n    margin: 'auto',\n  },\n});\n\nexport const MenuScrollableItems = (props: MenuScrollableItemsProps) => (\n  <div css={menuScrollableItemsStyle(props)} {...props} />\n);\n"],"file":"MenuScrollableItems.js"}
+{"version":3,"sources":["MenuScrollableItems.tsx"],"names":["menuScrollableItemsStyle","props","alignItems","alignSelf","display","media","QueryKeys","TABLET_DOWN","flexDirection","margin","MenuScrollableItems"],"mappings":";;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AAvBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAUO,IAAMA,wBAA8E,GAAG,SAAjFA,wBAAiF,CAAAC,KAAK;AAAA;AACjGC,IAAAA,UAAU,EAAE,QADqF;AAEjGC,IAAAA,SAAS,EAAE,QAFsF;AAGjGC,IAAAA,OAAO,EAAE;AAHwF,KAIhGC,oBAAMC,wBAAUC,WAAhB,CAJgG,EAIjE;AAC9BL,IAAAA,UAAU,EAAE,QADkB;AAE9BM,IAAAA,aAAa,EAAE,QAFe;AAG9BC,IAAAA,MAAM,EAAE;AAHsB,GAJiE;AAAA,CAA5F;;;;AAWA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACT,KAAD;AAAA,SACjC;AAAK,IAAA,GAAG,EAAED,wBAAwB,CAACC,KAAD;AAAlC,KAA+CA,KAA/C,EADiC;AAAA,CAA5B","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {QueryKeys, media} from '../../mediaQueries';\n\nexport interface MenuScrollableItemsProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  open?: boolean;\n}\n\nexport const menuScrollableItemsStyle: <T>(props: MenuScrollableItemsProps<T>) => CSSObject = props => ({\n  alignItems: 'center',\n  alignSelf: 'center',\n  display: 'flex',\n  [media[QueryKeys.TABLET_DOWN]]: {\n    alignItems: 'center',\n    flexDirection: 'column',\n    margin: 'auto',\n  },\n});\n\nexport const MenuScrollableItems = (props: MenuScrollableItemsProps) => (\n  <div css={menuScrollableItemsStyle(props)} {...props} />\n);\n"],"file":"MenuScrollableItems.js"}

package/src/Layout/headerMenu/MenuSubLink.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 /** @jsx jsx */
-import { CSSObject } from '@emotion/core';
+import { CSSObject, jsx } from '@emotion/react';
 import { TextProps } from '../../Text';
 import type { Theme } from '../Theme';
 declare type MenuSubLinkProps<T = HTMLDivElement> = TextProps<T>;
 export declare const menuSubLinkStyle: <T>(theme: Theme, props: MenuSubLinkProps<T>) => CSSObject;
-export declare const MenuSubLink: (props: MenuSubLinkProps) => JSX.Element;
+export declare const MenuSubLink: (props: MenuSubLinkProps) => jsx.JSX.Element;
 export {};

package/src/Layout/headerMenu/MenuSubLink.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _color = _interopRequireDefault(require("color"));
 
@@ -40,7 +40,7 @@ var menuSubLinkStyle = function menuSubLinkStyle(theme, props) {
     textDecoration: 'none',
     transition: _motions.defaultTransition
   }, (0, _defineProperty2["default"])(_objectSpread2, _mediaQueries.media[_mediaQueries.QueryKeys.DESKTOP], {
-    '&:first-child': {
+    '&:first-of-type': {
       marginLeft: 0
     },
     '&:last-child': {
@@ -62,7 +62,7 @@ var menuSubLinkStyle = function menuSubLinkStyle(theme, props) {
 exports.menuSubLinkStyle = menuSubLinkStyle;
 
 var MenuSubLink = function MenuSubLink(props) {
-  return (0, _core.jsx)("div", (0, _extends2["default"])({
+  return (0, _react.jsx)("div", (0, _extends2["default"])({
     css: function css(theme) {
       return menuSubLinkStyle(theme, props);
     }

package/src/Layout/headerMenu/MenuSubLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuSubLink.tsx"],"names":["menuSubLinkStyle","theme","props","color","general","mix","COLOR","BLACK","toString","cursor","fontWeight","textDecoration","transition","defaultTransition","media","QueryKeys","DESKTOP","marginLeft","marginRight","fontSize","margin","textTransform","TABLET_DOWN","border","maxWidth","padding","MenuSubLink"],"mappings":";;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAKO,IAAMA,gBAA4E,GAAG,SAA/EA,gBAA+E,CAACC,KAAD,EAAQC,KAAR;AAAA;;AAAA,yCACvF,qBAAUD,KAAV,EAAiBC,KAAjB,CADuF;AAE1F,eAAW;AACTC,MAAAA,KAAK,EAAE,uBAAMF,KAAK,CAACG,OAAN,CAAcD,KAApB,EAA2BE,GAA3B,CAA+B,uBAAMC,gBAAMC,KAAZ,CAA/B,EAAmD,IAAnD,EAAyDC,QAAzD;AADE,KAF+E;AAK1FL,IAAAA,KAAK,EAAEF,KAAK,CAACG,OAAN,CAAcD,KALqE;AAM1FM,IAAAA,MAAM,EAAE,SANkF;AAO1FC,IAAAA,UAAU,EAAE,GAP8E;AAQ1FC,IAAAA,cAAc,EAAE,MAR0E;AAS1FC,IAAAA,UAAU,EAAEC;AAT8E,sDAUzFC,oBAAMC,wBAAUC,OAAhB,CAVyF,EAU9D;AAC1B,qBAAiB;AACfC,MAAAA,UAAU,EAAE;AADG,KADS;AAI1B,oBAAgB;AACdC,MAAAA,WAAW,EAAE;AADC,KAJU;AAO1BC,IAAAA,QAAQ,EAAE,MAPgB;AAQ1BC,IAAAA,MAAM,EAAE,eARkB;AAS1BC,IAAAA,aAAa,EAAE;AATW,GAV8D,oDAsBzFP,oBAAMC,wBAAUO,WAAhB,CAtByF,EAsB1D;AAC9BC,IAAAA,MAAM,EAAE,MADsB;AAE9BJ,IAAAA,QAAQ,EAAE,iBAFoB;AAG9BT,IAAAA,UAAU,EAAE,gBAHkB;AAI9Bc,IAAAA,QAAQ,EAAE,OAJoB;AAK9BC,IAAAA,OAAO,EAAE,UALqB;AAM9BJ,IAAAA,aAAa,EAAE;AANe,GAtB0D;AAAA,CAArF;;;;AAgCA,IAAMK,WAAW,GAAG,SAAdA,WAAc,CAACxB,KAAD;AAAA,SACzB;AAAK,IAAA,GAAG,EAAE,aAAAD,KAAK;AAAA,aAAID,gBAAgB,CAACC,KAAD,EAAQC,KAAR,CAApB;AAAA;AAAf,KAAuDA,KAAvD,EADyB;AAAA,CAApB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/core';\nimport Color from 'color';\n\nimport {COLOR} from '../../Identity';\nimport {defaultTransition} from '../../Identity/motions';\nimport {QueryKeys, media} from '../../mediaQueries';\nimport {TextProps, textStyle} from '../../Text';\nimport type {Theme} from '../Theme';\n\ntype MenuSubLinkProps<T = HTMLDivElement> = TextProps<T>;\n\nexport const menuSubLinkStyle: <T>(theme: Theme, props: MenuSubLinkProps<T>) => CSSObject = (theme, props) => ({\n  ...textStyle(theme, props),\n  '&:hover': {\n    color: Color(theme.general.color).mix(Color(COLOR.BLACK), 0.16).toString(),\n  },\n  color: theme.general.color,\n  cursor: 'pointer',\n  fontWeight: 600,\n  textDecoration: 'none',\n  transition: defaultTransition,\n  [media[QueryKeys.DESKTOP]]: {\n    '&:first-child': {\n      marginLeft: 0,\n    },\n    '&:last-child': {\n      marginRight: 0,\n    },\n    fontSize: '11px',\n    margin: '0 26px 0 10px',\n    textTransform: 'uppercase',\n  },\n\n  [media[QueryKeys.TABLET_DOWN]]: {\n    border: 'none',\n    fontSize: '32px !important',\n    fontWeight: '300 !important',\n    maxWidth: '480px',\n    padding: '8px 24px',\n    textTransform: 'none !important',\n  },\n});\n\nexport const MenuSubLink = (props: MenuSubLinkProps) => (\n  <div css={theme => menuSubLinkStyle(theme, props)} {...props} />\n);\n"],"file":"MenuSubLink.js"}
+{"version":3,"sources":["MenuSubLink.tsx"],"names":["menuSubLinkStyle","theme","props","color","general","mix","COLOR","BLACK","toString","cursor","fontWeight","textDecoration","transition","defaultTransition","media","QueryKeys","DESKTOP","marginLeft","marginRight","fontSize","margin","textTransform","TABLET_DOWN","border","maxWidth","padding","MenuSubLink"],"mappings":";;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAKO,IAAMA,gBAA4E,GAAG,SAA/EA,gBAA+E,CAACC,KAAD,EAAQC,KAAR;AAAA;;AAAA,yCACvF,qBAAUD,KAAV,EAAiBC,KAAjB,CADuF;AAE1F,eAAW;AACTC,MAAAA,KAAK,EAAE,uBAAMF,KAAK,CAACG,OAAN,CAAcD,KAApB,EAA2BE,GAA3B,CAA+B,uBAAMC,gBAAMC,KAAZ,CAA/B,EAAmD,IAAnD,EAAyDC,QAAzD;AADE,KAF+E;AAK1FL,IAAAA,KAAK,EAAEF,KAAK,CAACG,OAAN,CAAcD,KALqE;AAM1FM,IAAAA,MAAM,EAAE,SANkF;AAO1FC,IAAAA,UAAU,EAAE,GAP8E;AAQ1FC,IAAAA,cAAc,EAAE,MAR0E;AAS1FC,IAAAA,UAAU,EAAEC;AAT8E,sDAUzFC,oBAAMC,wBAAUC,OAAhB,CAVyF,EAU9D;AAC1B,uBAAmB;AACjBC,MAAAA,UAAU,EAAE;AADK,KADO;AAI1B,oBAAgB;AACdC,MAAAA,WAAW,EAAE;AADC,KAJU;AAO1BC,IAAAA,QAAQ,EAAE,MAPgB;AAQ1BC,IAAAA,MAAM,EAAE,eARkB;AAS1BC,IAAAA,aAAa,EAAE;AATW,GAV8D,oDAsBzFP,oBAAMC,wBAAUO,WAAhB,CAtByF,EAsB1D;AAC9BC,IAAAA,MAAM,EAAE,MADsB;AAE9BJ,IAAAA,QAAQ,EAAE,iBAFoB;AAG9BT,IAAAA,UAAU,EAAE,gBAHkB;AAI9Bc,IAAAA,QAAQ,EAAE,OAJoB;AAK9BC,IAAAA,OAAO,EAAE,UALqB;AAM9BJ,IAAAA,aAAa,EAAE;AANe,GAtB0D;AAAA,CAArF;;;;AAgCA,IAAMK,WAAW,GAAG,SAAdA,WAAc,CAACxB,KAAD;AAAA,SACzB;AAAK,IAAA,GAAG,EAAE,aAACD,KAAD;AAAA,aAAkBD,gBAAgB,CAACC,KAAD,EAAQC,KAAR,CAAlC;AAAA;AAAV,KAAgEA,KAAhE,EADyB;AAAA,CAApB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport Color from 'color';\n\nimport {COLOR} from '../../Identity';\nimport {defaultTransition} from '../../Identity/motions';\nimport {QueryKeys, media} from '../../mediaQueries';\nimport {TextProps, textStyle} from '../../Text';\nimport type {Theme} from '../Theme';\n\ntype MenuSubLinkProps<T = HTMLDivElement> = TextProps<T>;\n\nexport const menuSubLinkStyle: <T>(theme: Theme, props: MenuSubLinkProps<T>) => CSSObject = (theme, props) => ({\n  ...textStyle(theme, props),\n  '&:hover': {\n    color: Color(theme.general.color).mix(Color(COLOR.BLACK), 0.16).toString(),\n  },\n  color: theme.general.color,\n  cursor: 'pointer',\n  fontWeight: 600,\n  textDecoration: 'none',\n  transition: defaultTransition,\n  [media[QueryKeys.DESKTOP]]: {\n    '&:first-of-type': {\n      marginLeft: 0,\n    },\n    '&:last-child': {\n      marginRight: 0,\n    },\n    fontSize: '11px',\n    margin: '0 26px 0 10px',\n    textTransform: 'uppercase',\n  },\n\n  [media[QueryKeys.TABLET_DOWN]]: {\n    border: 'none',\n    fontSize: '32px !important',\n    fontWeight: '300 !important',\n    maxWidth: '480px',\n    padding: '8px 24px',\n    textTransform: 'none !important',\n  },\n});\n\nexport const MenuSubLink = (props: MenuSubLinkProps) => (\n  <div css={(theme: Theme) => menuSubLinkStyle(theme, props)} {...props} />\n);\n"],"file":"MenuSubLink.js"}

package/src/Menu/MenuModal.d.ts

@@ -1,8 +1,10 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 interface MenuModalProps<T = HTMLDivElement> extends React.HTMLProps<T> {
     onBackgroundClick?: () => void;
 }
-export declare const MenuModal: ({ children, onBackgroundClick, ...props }: MenuModalProps & React.HTMLProps<HTMLDivElement>) => JSX.Element;
+export declare const MenuModal: ({ children, onBackgroundClick, ...props }: MenuModalProps & React.HTMLProps<HTMLDivElement>) => jsx.JSX.Element;
 export declare type MenuItemProps<T = HTMLLIElement> = React.HTMLProps<T>;
-export declare const MenuItem: ({ children, ...props }: MenuItemProps & React.HTMLProps<HTMLLIElement>) => JSX.Element;
+export declare const MenuItem: ({ children, ...props }: MenuItemProps & React.HTMLProps<HTMLLIElement>) => jsx.JSX.Element;
 export {};

package/src/Menu/MenuModal.js

@@ -9,15 +9,13 @@ exports.MenuItem = exports.MenuModal = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _css2 = _interopRequireDefault(require("@emotion/css"));
+var _react = require("@emotion/react");
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _core = require("@emotion/core");
-
-var _react = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireDefault(require("react"));
 
 var _Identity = require("../Identity/");
 
@@ -47,13 +45,13 @@ var menuModalWrapperStyle = function menuModalWrapperStyle(props) {
 };
 
 var MenuModalWrapper = function MenuModalWrapper(props) {
-  return (0, _core.jsx)("div", (0, _extends2["default"])({
+  return (0, _react.jsx)("div", (0, _extends2["default"])({
     css: menuModalWrapperStyle
   }, props));
 };
 
 var MenuModalBody = function MenuModalBody(props) {
-  return (0, _core.jsx)("div", (0, _extends2["default"])({
+  return (0, _react.jsx)("div", (0, _extends2["default"])({
     css: function css(theme) {
       return (0, _defineProperty2["default"])({
         animation: "".concat(_motions.ANIMATION.bottomUpMovement, " ").concat(_motions.DURATION.DEFAULT, "ms ").concat(_motions.EASE.EXPONENTIAL),
@@ -76,8 +74,8 @@ var MenuModalBody = function MenuModalBody(props) {
 };
 
 var MenuModalContent = function MenuModalContent(props) {
-  return (0, _core.jsx)("ul", (0, _extends2["default"])({
-    css: /*#__PURE__*/(0, _css2["default"])({
+  return (0, _react.jsx)("ul", (0, _extends2["default"])({
+    css: /*#__PURE__*/(0, _react.css)({
       li: {
         borderBottom: "1px solid ".concat(_Identity.COLOR.GRAY_LIGHTEN_72)
       },
@@ -88,7 +86,7 @@ var MenuModalContent = function MenuModalContent(props) {
       maxWidth: '100%',
       minWidth: '100%',
       padding: 0
-    }, ";label:MenuModalContent;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1lbnVNb2RhbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUVJIiwiZmlsZSI6Ik1lbnVNb2RhbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDE4IFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge0NTU09iamVjdCwganN4fSBmcm9tICdAZW1vdGlvbi9jb3JlJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7Q09MT1J9IGZyb20gJy4uL0lkZW50aXR5Lyc7XG5pbXBvcnQge0FOSU1BVElPTiwgRFVSQVRJT04sIEVBU0V9IGZyb20gJy4uL0lkZW50aXR5L21vdGlvbnMnO1xuaW1wb3J0IHtRdWVyeUtleXMsIG1lZGlhfSBmcm9tICcuLi9tZWRpYVF1ZXJpZXMnO1xuaW1wb3J0IHtPdmVybGF5QmFja2dyb3VuZFByb3BzLCBPdmVybGF5V3JhcHBlclByb3BzLCBvdmVybGF5QmFja2dyb3VuZFN0eWxlfSBmcm9tICcuLi9Nb2RhbC9PdmVybGF5JztcbmltcG9ydCB7bm9vcH0gZnJvbSAnLi4vdXRpbCc7XG5cbmNvbnN0IG1lbnVNb2RhbFdyYXBwZXJTdHlsZTogPFQ+KHByb3BzOiBPdmVybGF5V3JhcHBlclByb3BzPFQ+KSA9PiBDU1NPYmplY3QgPSBwcm9wcyA9PiAoe1xuICAuLi5vdmVybGF5QmFja2dyb3VuZFN0eWxlKHByb3BzKSxcbiAgYWxpZ25JdGVtczogJ2ZsZXgtZW5kJyxcbiAgYWxpZ25TZWxmOiAnZmxleC1lbmQnLFxuICBkaXNwbGF5OiAnZmxleCcsXG4gIG92ZXJmbG93WTogJ2hpZGRlbicsXG4gIHBhZGRpbmc6IDAsXG59KTtcblxuY29uc3QgTWVudU1vZGFsV3JhcHBlciA9IChwcm9wczogT3ZlcmxheVdyYXBwZXJQcm9wcykgPT4gPGRpdiBjc3M9e21lbnVNb2RhbFdyYXBwZXJTdHlsZX0gey4uLnByb3BzfSAvPjtcblxuY29uc3QgTWVudU1vZGFsQm9keSA9IChwcm9wczogUmVhY3QuSFRNTFByb3BzPEhUTUxEaXZFbGVtZW50PikgPT4gKFxuICA8ZGl2XG4gICAgY3NzPXt0aGVtZSA9PiAoe1xuICAgICAgYW5pbWF0aW9uOiBgJHtBTklNQVRJT04uYm90dG9tVXBNb3ZlbWVudH0gJHtEVVJBVElPTi5ERUZBVUxUfW1zICR7RUFTRS5FWFBPTkVOVElBTH1gLFxuICAgICAgYmFja2dyb3VuZENvbG9yOiBDT0xPUi50aW50KHRoZW1lLmdlbmVyYWwuYmFja2dyb3VuZENvbG9yLCAwLjE2KSxcbiAgICAgIGJveFNoYWRvdzogJzAgMTZweCA2NHB4IDAgcmdiYSgwLCAwLCAwLCAwLjE2KScsXG4gICAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgICBmbGV4RGlyZWN0aW9uOiAnY29sdW1uJyxcbiAgICAgIGp1c3RpZnlDb250ZW50OiAnc3BhY2UtYmV0d2VlbicsXG4gICAgICBtYXJnaW5MZWZ0OiAnYXV0bycsXG4gICAgICBtYXJnaW5SaWdodDogJ2F1dG8nLFxuICAgICAgcGFkZGluZzogJzhweCAxNnB4JyxcbiAgICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgICAgd2lkdGg6ICc3NjdweCcsXG4gICAgICB6SW5kZXg6IDk5OTksXG4gICAgICBbbWVkaWFbUXVlcnlLZXlzLlRBQkxFVF9ET1dOXV06IHtcbiAgICAgICAgd2lkdGg6ICcxMDAlJyxcbiAgICAgIH0sXG4gICAgfSl9XG4gICAgey4uLnByb3BzfVxuICAvPlxuKTtcblxuY29uc3QgTWVudU1vZGFsQ29udGVudCA9IChwcm9wczogUmVhY3QuSFRNTFByb3BzPEhUTUxVTGlzdEVsZW1lbnQ+KSA9PiAoXG4gIDx1bFxuICAgIGNzcz17e1xuICAgICAgbGk6IHtcbiAgICAgICAgYm9yZGVyQm90dG9tOiBgMXB4IHNvbGlkICR7Q09MT1IuR1JBWV9MSUdIVEVOXzcyfWAsXG4gICAgICB9LFxuICAgICAgJ2xpOmxhc3QtY2hpbGQnOiB7XG4gICAgICAgIGJvcmRlckJvdHRvbTogMCxcbiAgICAgIH0sXG4gICAgICBtYXJnaW46IDAsXG4gICAgICBtYXhXaWR0aDogJzEwMCUnLFxuICAgICAgbWluV2lkdGg6ICcxMDAlJyxcbiAgICAgIHBhZGRpbmc6IDAsXG4gICAgfX1cbiAgICB7Li4ucHJvcHN9XG4gIC8+XG4pO1xuXG5jb25zdCBtb2RhbEJhY2tncm91bmRTdHlsZTogPFQ+KHByb3BzOiBPdmVybGF5QmFja2dyb3VuZFByb3BzPFQ+KSA9PiBDU1NPYmplY3QgPSBwcm9wcyA9PiAoe1xuICAuLi5vdmVybGF5QmFja2dyb3VuZFN0eWxlKHByb3BzKSxcbiAgYmFja2dyb3VuZDogJ3JnYmEoNTAsIDU0LCA1NywgMC40KScsXG59KTtcblxuY29uc3QgTWVudU1vZGFsQmFja2dyb3VuZCA9IChwcm9wczogT3ZlcmxheUJhY2tncm91bmRQcm9wcykgPT4gPGRpdiBjc3M9e21vZGFsQmFja2dyb3VuZFN0eWxlfSB7Li4ucHJvcHN9IC8+O1xuXG5pbnRlcmZhY2UgTWVudU1vZGFsUHJvcHM8VCA9IEhUTUxEaXZFbGVtZW50PiBleHRlbmRzIFJlYWN0LkhUTUxQcm9wczxUPiB7XG4gIG9uQmFja2dyb3VuZENsaWNrPzogKCkgPT4gdm9pZDtcbn1cblxuZXhwb3J0IGNvbnN0IE1lbnVNb2RhbCA9ICh7XG4gIGNoaWxkcmVuID0gbnVsbCxcbiAgb25CYWNrZ3JvdW5kQ2xpY2sgPSBub29wLFxuICAuLi5wcm9wc1xufTogTWVudU1vZGFsUHJvcHMgJiBSZWFjdC5IVE1MUHJvcHM8SFRNTERpdkVsZW1lbnQ+KSA9PiAoXG4gIDxNZW51TW9kYWxXcmFwcGVyIHsuLi5wcm9wc30+XG4gICAgPE1lbnVNb2RhbEJvZHk+XG4gICAgICA8TWVudU1vZGFsQ29udGVudD57Y2hpbGRyZW59PC9NZW51TW9kYWxDb250ZW50PlxuICAgIDwvTWVudU1vZGFsQm9keT5cbiAgICA8TWVudU1vZGFsQmFja2dyb3VuZCBvbkNsaWNrPXtvbkJhY2tncm91bmRDbGlja30gZGF0YS11aWUtbmFtZT1cIm1lbnUtYmFja2dyb3VuZFwiIC8+XG4gIDwvTWVudU1vZGFsV3JhcHBlcj5cbik7XG5cbmV4cG9ydCB0eXBlIE1lbnVJdGVtUHJvcHM8VCA9IEhUTUxMSUVsZW1lbnQ+ID0gUmVhY3QuSFRNTFByb3BzPFQ+O1xuXG5leHBvcnQgY29uc3QgTWVudUl0ZW0gPSAoe2NoaWxkcmVuID0gbnVsbCwgLi4ucHJvcHN9OiBNZW51SXRlbVByb3BzICYgUmVhY3QuSFRNTFByb3BzPEhUTUxMSUVsZW1lbnQ+KSA9PiAoXG4gIDxsaVxuICAgIGNzcz17dGhlbWUgPT4gKHtcbiAgICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgICAgY29sb3I6IHRoZW1lLmdlbmVyYWwuY29sb3IsXG4gICAgICBjdXJzb3I6ICdwb2ludGVyJyxcbiAgICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICAgIGhlaWdodDogJzU2cHgnLFxuICAgICAgbGlzdFN0eWxlVHlwZTogJ25vbmUnLFxuICAgICAgbWF4V2lkdGg6ICcxMDAlJyxcbiAgICB9KX1cbiAgICB7Li4ucHJvcHN9XG4gID5cbiAgICB7Y2hpbGRyZW59XG4gIDwvbGk+XG4pO1xuIl19 */"))
+    }, process.env.NODE_ENV === "production" ? "" : ";label:MenuModalContent;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1lbnVNb2RhbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0VJIiwiZmlsZSI6Ik1lbnVNb2RhbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDE4IFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge0NTU09iamVjdCwganN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge0NPTE9SfSBmcm9tICcuLi9JZGVudGl0eS8nO1xuaW1wb3J0IHtBTklNQVRJT04sIERVUkFUSU9OLCBFQVNFfSBmcm9tICcuLi9JZGVudGl0eS9tb3Rpb25zJztcbmltcG9ydCB7VGhlbWV9IGZyb20gJy4uL0xheW91dCc7XG5pbXBvcnQge1F1ZXJ5S2V5cywgbWVkaWF9IGZyb20gJy4uL21lZGlhUXVlcmllcyc7XG5pbXBvcnQge092ZXJsYXlCYWNrZ3JvdW5kUHJvcHMsIE92ZXJsYXlXcmFwcGVyUHJvcHMsIG92ZXJsYXlCYWNrZ3JvdW5kU3R5bGV9IGZyb20gJy4uL01vZGFsL092ZXJsYXknO1xuaW1wb3J0IHtub29wfSBmcm9tICcuLi91dGlsJztcblxuY29uc3QgbWVudU1vZGFsV3JhcHBlclN0eWxlOiA8VD4ocHJvcHM6IE92ZXJsYXlXcmFwcGVyUHJvcHM8VD4pID0+IENTU09iamVjdCA9IHByb3BzID0+ICh7XG4gIC4uLm92ZXJsYXlCYWNrZ3JvdW5kU3R5bGUocHJvcHMpLFxuICBhbGlnbkl0ZW1zOiAnZmxleC1lbmQnLFxuICBhbGlnblNlbGY6ICdmbGV4LWVuZCcsXG4gIGRpc3BsYXk6ICdmbGV4JyxcbiAgb3ZlcmZsb3dZOiAnaGlkZGVuJyxcbiAgcGFkZGluZzogMCxcbn0pO1xuXG5jb25zdCBNZW51TW9kYWxXcmFwcGVyID0gKHByb3BzOiBPdmVybGF5V3JhcHBlclByb3BzKSA9PiA8ZGl2IGNzcz17bWVudU1vZGFsV3JhcHBlclN0eWxlfSB7Li4ucHJvcHN9IC8+O1xuXG5jb25zdCBNZW51TW9kYWxCb2R5ID0gKHByb3BzOiBSZWFjdC5IVE1MUHJvcHM8SFRNTERpdkVsZW1lbnQ+KSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9eyh0aGVtZTogVGhlbWUpID0+ICh7XG4gICAgICBhbmltYXRpb246IGAke0FOSU1BVElPTi5ib3R0b21VcE1vdmVtZW50fSAke0RVUkFUSU9OLkRFRkFVTFR9bXMgJHtFQVNFLkVYUE9ORU5USUFMfWAsXG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IENPTE9SLnRpbnQodGhlbWUuZ2VuZXJhbC5iYWNrZ3JvdW5kQ29sb3IsIDAuMTYpLFxuICAgICAgYm94U2hhZG93OiAnMCAxNnB4IDY0cHggMCByZ2JhKDAsIDAsIDAsIDAuMTYpJyxcbiAgICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICAgIGZsZXhEaXJlY3Rpb246ICdjb2x1bW4nLFxuICAgICAganVzdGlmeUNvbnRlbnQ6ICdzcGFjZS1iZXR3ZWVuJyxcbiAgICAgIG1hcmdpbkxlZnQ6ICdhdXRvJyxcbiAgICAgIG1hcmdpblJpZ2h0OiAnYXV0bycsXG4gICAgICBwYWRkaW5nOiAnOHB4IDE2cHgnLFxuICAgICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgICB3aWR0aDogJzc2N3B4JyxcbiAgICAgIHpJbmRleDogOTk5OSxcbiAgICAgIFttZWRpYVtRdWVyeUtleXMuVEFCTEVUX0RPV05dXToge1xuICAgICAgICB3aWR0aDogJzEwMCUnLFxuICAgICAgfSxcbiAgICB9KX1cbiAgICB7Li4ucHJvcHN9XG4gIC8+XG4pO1xuXG5jb25zdCBNZW51TW9kYWxDb250ZW50ID0gKHByb3BzOiBSZWFjdC5IVE1MUHJvcHM8SFRNTFVMaXN0RWxlbWVudD4pID0+IChcbiAgPHVsXG4gICAgY3NzPXt7XG4gICAgICBsaToge1xuICAgICAgICBib3JkZXJCb3R0b206IGAxcHggc29saWQgJHtDT0xPUi5HUkFZX0xJR0hURU5fNzJ9YCxcbiAgICAgIH0sXG4gICAgICAnbGk6bGFzdC1jaGlsZCc6IHtcbiAgICAgICAgYm9yZGVyQm90dG9tOiAwLFxuICAgICAgfSxcbiAgICAgIG1hcmdpbjogMCxcbiAgICAgIG1heFdpZHRoOiAnMTAwJScsXG4gICAgICBtaW5XaWR0aDogJzEwMCUnLFxuICAgICAgcGFkZGluZzogMCxcbiAgICB9fVxuICAgIHsuLi5wcm9wc31cbiAgLz5cbik7XG5cbmNvbnN0IG1vZGFsQmFja2dyb3VuZFN0eWxlOiA8VD4ocHJvcHM6IE92ZXJsYXlCYWNrZ3JvdW5kUHJvcHM8VD4pID0+IENTU09iamVjdCA9IHByb3BzID0+ICh7XG4gIC4uLm92ZXJsYXlCYWNrZ3JvdW5kU3R5bGUocHJvcHMpLFxuICBiYWNrZ3JvdW5kOiAncmdiYSg1MCwgNTQsIDU3LCAwLjQpJyxcbn0pO1xuXG5jb25zdCBNZW51TW9kYWxCYWNrZ3JvdW5kID0gKHByb3BzOiBPdmVybGF5QmFja2dyb3VuZFByb3BzKSA9PiA8ZGl2IGNzcz17bW9kYWxCYWNrZ3JvdW5kU3R5bGV9IHsuLi5wcm9wc30gLz47XG5cbmludGVyZmFjZSBNZW51TW9kYWxQcm9wczxUID0gSFRNTERpdkVsZW1lbnQ+IGV4dGVuZHMgUmVhY3QuSFRNTFByb3BzPFQ+IHtcbiAgb25CYWNrZ3JvdW5kQ2xpY2s/OiAoKSA9PiB2b2lkO1xufVxuXG5leHBvcnQgY29uc3QgTWVudU1vZGFsID0gKHtcbiAgY2hpbGRyZW4gPSBudWxsLFxuICBvbkJhY2tncm91bmRDbGljayA9IG5vb3AsXG4gIC4uLnByb3BzXG59OiBNZW51TW9kYWxQcm9wcyAmIFJlYWN0LkhUTUxQcm9wczxIVE1MRGl2RWxlbWVudD4pID0+IChcbiAgPE1lbnVNb2RhbFdyYXBwZXIgey4uLnByb3BzfT5cbiAgICA8TWVudU1vZGFsQm9keT5cbiAgICAgIDxNZW51TW9kYWxDb250ZW50PntjaGlsZHJlbn08L01lbnVNb2RhbENvbnRlbnQ+XG4gICAgPC9NZW51TW9kYWxCb2R5PlxuICAgIDxNZW51TW9kYWxCYWNrZ3JvdW5kIG9uQ2xpY2s9e29uQmFja2dyb3VuZENsaWNrfSBkYXRhLXVpZS1uYW1lPVwibWVudS1iYWNrZ3JvdW5kXCIgLz5cbiAgPC9NZW51TW9kYWxXcmFwcGVyPlxuKTtcblxuZXhwb3J0IHR5cGUgTWVudUl0ZW1Qcm9wczxUID0gSFRNTExJRWxlbWVudD4gPSBSZWFjdC5IVE1MUHJvcHM8VD47XG5cbmV4cG9ydCBjb25zdCBNZW51SXRlbSA9ICh7Y2hpbGRyZW4gPSBudWxsLCAuLi5wcm9wc306IE1lbnVJdGVtUHJvcHMgJiBSZWFjdC5IVE1MUHJvcHM8SFRNTExJRWxlbWVudD4pID0+IChcbiAgPGxpXG4gICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiAoe1xuICAgICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgICBjb2xvcjogdGhlbWUuZ2VuZXJhbC5jb2xvcixcbiAgICAgIGN1cnNvcjogJ3BvaW50ZXInLFxuICAgICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgICAgaGVpZ2h0OiAnNTZweCcsXG4gICAgICBsaXN0U3R5bGVUeXBlOiAnbm9uZScsXG4gICAgICBtYXhXaWR0aDogJzEwMCUnLFxuICAgIH0pfVxuICAgIHsuLi5wcm9wc31cbiAgPlxuICAgIHtjaGlsZHJlbn1cbiAgPC9saT5cbik7XG4iXX0= */")
   }, props));
 };
 
@@ -99,7 +97,7 @@ var modalBackgroundStyle = function modalBackgroundStyle(props) {
 };
 
 var MenuModalBackground = function MenuModalBackground(props) {
-  return (0, _core.jsx)("div", (0, _extends2["default"])({
+  return (0, _react.jsx)("div", (0, _extends2["default"])({
     css: modalBackgroundStyle
   }, props));
 };
@@ -110,7 +108,7 @@ var MenuModal = function MenuModal(_ref2) {
       _ref2$onBackgroundCli = _ref2.onBackgroundClick,
       onBackgroundClick = _ref2$onBackgroundCli === void 0 ? _util.noop : _ref2$onBackgroundCli,
       props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
-  return (0, _core.jsx)(MenuModalWrapper, props, (0, _core.jsx)(MenuModalBody, null, (0, _core.jsx)(MenuModalContent, null, children)), (0, _core.jsx)(MenuModalBackground, {
+  return (0, _react.jsx)(MenuModalWrapper, props, (0, _react.jsx)(MenuModalBody, null, (0, _react.jsx)(MenuModalContent, null, children)), (0, _react.jsx)(MenuModalBackground, {
     onClick: onBackgroundClick,
     "data-uie-name": "menu-background"
   }));
@@ -122,7 +120,7 @@ var MenuItem = function MenuItem(_ref3) {
   var _ref3$children = _ref3.children,
       children = _ref3$children === void 0 ? null : _ref3$children,
       props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
-  return (0, _core.jsx)("li", (0, _extends2["default"])({
+  return (0, _react.jsx)("li", (0, _extends2["default"])({
     css: function css(theme) {
       return {
         alignItems: 'center',

package/src/Menu/MenuModal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuModal.tsx"],"names":["menuModalWrapperStyle","props","alignItems","alignSelf","display","overflowY","padding","MenuModalWrapper","MenuModalBody","theme","animation","ANIMATION","bottomUpMovement","DURATION","DEFAULT","EASE","EXPONENTIAL","backgroundColor","COLOR","tint","general","boxShadow","flexDirection","justifyContent","marginLeft","marginRight","position","width","zIndex","media","QueryKeys","TABLET_DOWN","MenuModalContent","li","borderBottom","GRAY_LIGHTEN_72","margin","maxWidth","minWidth","modalBackgroundStyle","background","MenuModalBackground","MenuModal","children","onBackgroundClick","noop","MenuItem","color","cursor","height","listStyleType"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/core';\nimport React from 'react';\n\nimport {COLOR} from '../Identity/';\nimport {ANIMATION, DURATION, EASE} from '../Identity/motions';\nimport {QueryKeys, media} from '../mediaQueries';\nimport {OverlayBackgroundProps, OverlayWrapperProps, overlayBackgroundStyle} from '../Modal/Overlay';\nimport {noop} from '../util';\n\nconst menuModalWrapperStyle: <T>(props: OverlayWrapperProps<T>) => CSSObject = props => ({\n  ...overlayBackgroundStyle(props),\n  alignItems: 'flex-end',\n  alignSelf: 'flex-end',\n  display: 'flex',\n  overflowY: 'hidden',\n  padding: 0,\n});\n\nconst MenuModalWrapper = (props: OverlayWrapperProps) => <div css={menuModalWrapperStyle} {...props} />;\n\nconst MenuModalBody = (props: React.HTMLProps<HTMLDivElement>) => (\n  <div\n    css={theme => ({\n      animation: `${ANIMATION.bottomUpMovement} ${DURATION.DEFAULT}ms ${EASE.EXPONENTIAL}`,\n      backgroundColor: COLOR.tint(theme.general.backgroundColor, 0.16),\n      boxShadow: '0 16px 64px 0 rgba(0, 0, 0, 0.16)',\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'space-between',\n      marginLeft: 'auto',\n      marginRight: 'auto',\n      padding: '8px 16px',\n      position: 'relative',\n      width: '767px',\n      zIndex: 9999,\n      [media[QueryKeys.TABLET_DOWN]]: {\n        width: '100%',\n      },\n    })}\n    {...props}\n  />\n);\n\nconst MenuModalContent = (props: React.HTMLProps<HTMLUListElement>) => (\n  <ul\n    css={{\n      li: {\n        borderBottom: `1px solid ${COLOR.GRAY_LIGHTEN_72}`,\n      },\n      'li:last-child': {\n        borderBottom: 0,\n      },\n      margin: 0,\n      maxWidth: '100%',\n      minWidth: '100%',\n      padding: 0,\n    }}\n    {...props}\n  />\n);\n\nconst modalBackgroundStyle: <T>(props: OverlayBackgroundProps<T>) => CSSObject = props => ({\n  ...overlayBackgroundStyle(props),\n  background: 'rgba(50, 54, 57, 0.4)',\n});\n\nconst MenuModalBackground = (props: OverlayBackgroundProps) => <div css={modalBackgroundStyle} {...props} />;\n\ninterface MenuModalProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  onBackgroundClick?: () => void;\n}\n\nexport const MenuModal = ({\n  children = null,\n  onBackgroundClick = noop,\n  ...props\n}: MenuModalProps & React.HTMLProps<HTMLDivElement>) => (\n  <MenuModalWrapper {...props}>\n    <MenuModalBody>\n      <MenuModalContent>{children}</MenuModalContent>\n    </MenuModalBody>\n    <MenuModalBackground onClick={onBackgroundClick} data-uie-name=\"menu-background\" />\n  </MenuModalWrapper>\n);\n\nexport type MenuItemProps<T = HTMLLIElement> = React.HTMLProps<T>;\n\nexport const MenuItem = ({children = null, ...props}: MenuItemProps & React.HTMLProps<HTMLLIElement>) => (\n  <li\n    css={theme => ({\n      alignItems: 'center',\n      color: theme.general.color,\n      cursor: 'pointer',\n      display: 'flex',\n      height: '56px',\n      listStyleType: 'none',\n      maxWidth: '100%',\n    })}\n    {...props}\n  >\n    {children}\n  </li>\n);\n"],"file":"MenuModal.js"}
+{"version":3,"sources":["MenuModal.tsx"],"names":["menuModalWrapperStyle","props","alignItems","alignSelf","display","overflowY","padding","MenuModalWrapper","MenuModalBody","theme","animation","ANIMATION","bottomUpMovement","DURATION","DEFAULT","EASE","EXPONENTIAL","backgroundColor","COLOR","tint","general","boxShadow","flexDirection","justifyContent","marginLeft","marginRight","position","width","zIndex","media","QueryKeys","TABLET_DOWN","MenuModalContent","li","borderBottom","GRAY_LIGHTEN_72","margin","maxWidth","minWidth","modalBackgroundStyle","background","MenuModalBackground","MenuModal","children","onBackgroundClick","noop","MenuItem","color","cursor","height","listStyleType"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity/';\nimport {ANIMATION, DURATION, EASE} from '../Identity/motions';\nimport {Theme} from '../Layout';\nimport {QueryKeys, media} from '../mediaQueries';\nimport {OverlayBackgroundProps, OverlayWrapperProps, overlayBackgroundStyle} from '../Modal/Overlay';\nimport {noop} from '../util';\n\nconst menuModalWrapperStyle: <T>(props: OverlayWrapperProps<T>) => CSSObject = props => ({\n  ...overlayBackgroundStyle(props),\n  alignItems: 'flex-end',\n  alignSelf: 'flex-end',\n  display: 'flex',\n  overflowY: 'hidden',\n  padding: 0,\n});\n\nconst MenuModalWrapper = (props: OverlayWrapperProps) => <div css={menuModalWrapperStyle} {...props} />;\n\nconst MenuModalBody = (props: React.HTMLProps<HTMLDivElement>) => (\n  <div\n    css={(theme: Theme) => ({\n      animation: `${ANIMATION.bottomUpMovement} ${DURATION.DEFAULT}ms ${EASE.EXPONENTIAL}`,\n      backgroundColor: COLOR.tint(theme.general.backgroundColor, 0.16),\n      boxShadow: '0 16px 64px 0 rgba(0, 0, 0, 0.16)',\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'space-between',\n      marginLeft: 'auto',\n      marginRight: 'auto',\n      padding: '8px 16px',\n      position: 'relative',\n      width: '767px',\n      zIndex: 9999,\n      [media[QueryKeys.TABLET_DOWN]]: {\n        width: '100%',\n      },\n    })}\n    {...props}\n  />\n);\n\nconst MenuModalContent = (props: React.HTMLProps<HTMLUListElement>) => (\n  <ul\n    css={{\n      li: {\n        borderBottom: `1px solid ${COLOR.GRAY_LIGHTEN_72}`,\n      },\n      'li:last-child': {\n        borderBottom: 0,\n      },\n      margin: 0,\n      maxWidth: '100%',\n      minWidth: '100%',\n      padding: 0,\n    }}\n    {...props}\n  />\n);\n\nconst modalBackgroundStyle: <T>(props: OverlayBackgroundProps<T>) => CSSObject = props => ({\n  ...overlayBackgroundStyle(props),\n  background: 'rgba(50, 54, 57, 0.4)',\n});\n\nconst MenuModalBackground = (props: OverlayBackgroundProps) => <div css={modalBackgroundStyle} {...props} />;\n\ninterface MenuModalProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  onBackgroundClick?: () => void;\n}\n\nexport const MenuModal = ({\n  children = null,\n  onBackgroundClick = noop,\n  ...props\n}: MenuModalProps & React.HTMLProps<HTMLDivElement>) => (\n  <MenuModalWrapper {...props}>\n    <MenuModalBody>\n      <MenuModalContent>{children}</MenuModalContent>\n    </MenuModalBody>\n    <MenuModalBackground onClick={onBackgroundClick} data-uie-name=\"menu-background\" />\n  </MenuModalWrapper>\n);\n\nexport type MenuItemProps<T = HTMLLIElement> = React.HTMLProps<T>;\n\nexport const MenuItem = ({children = null, ...props}: MenuItemProps & React.HTMLProps<HTMLLIElement>) => (\n  <li\n    css={(theme: Theme) => ({\n      alignItems: 'center',\n      color: theme.general.color,\n      cursor: 'pointer',\n      display: 'flex',\n      height: '56px',\n      listStyleType: 'none',\n      maxWidth: '100%',\n    })}\n    {...props}\n  >\n    {children}\n  </li>\n);\n"],"file":"MenuModal.js"}

package/src/Menu/TabBar.d.ts

@@ -1,8 +1,10 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { TextProps } from '../Text';
 export declare type TabBarProps<T = HTMLDivElement> = React.HTMLProps<T>;
-export declare const TabBar: ({ children, ...props }: TabBarProps<HTMLDivElement>) => JSX.Element;
+export declare const TabBar: ({ children, ...props }: TabBarProps<HTMLDivElement>) => jsx.JSX.Element;
 export interface TabBarItemProps<T = HTMLSpanElement> extends TextProps<T> {
     active: boolean;
 }
-export declare const TabBarItem: ({ children, ...props }: TabBarItemProps) => JSX.Element;
+export declare const TabBarItem: ({ children, ...props }: TabBarItemProps) => jsx.JSX.Element;