@wireapp/react-ui-kit 8.0.0 → 8.2.0

package/src/Form/Input.js

@@ -36,7 +36,7 @@ var inputStyle = function inputStyle(theme, _ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   var placeholderStyle = {
     color: theme.Input.placeholderColor,
-    fontSize: '11px',
+    fontSize: '16px',
     textTransform: placeholderTextTransform
   };
   return {
@@ -46,19 +46,19 @@ var inputStyle = function inputStyle(theme, _ref) {
     '&::-ms-input-placeholder': _objectSpread({}, placeholderStyle),
     '&::-webkit-input-placeholder': _objectSpread({}, placeholderStyle),
     '&:focus': {
-      boxShadow: "0 0 0 1px ".concat(_Identity.COLOR.BLUE)
+      boxShadow: "0 0 0 1px ".concat(_Identity.COLOR_V2.BLUE)
     },
     '&:invalid:not(:focus)': !markInvalid ? {
-      boxShadow: "0 0 0 1px ".concat(_Identity.COLOR.GRAY)
+      boxShadow: "0 0 0 1px ".concat(_Identity.COLOR_V2.GRAY)
     } : {},
     background: disabled ? theme.Input.backgroundColorDisabled : theme.Input.backgroundColor,
     border: 'none',
     borderRadius: '4px',
-    boxShadow: markInvalid ? "0 0 0 1px ".concat(_Identity.COLOR.RED) : "0 0 0 1px ".concat(_Identity.COLOR.GRAY),
-    caretColor: _Identity.COLOR.BLUE,
+    boxShadow: markInvalid ? "0 0 0 1px ".concat(_Identity.COLOR_V2.RED) : "0 0 0 1px ".concat(_Identity.COLOR_V2.GRAY),
+    caretColor: _Identity.COLOR_V2.BLUE,
     color: theme.general.color,
     fontWeight: 300,
-    height: '56px',
+    height: '48px',
     lineHeight: '24px',
     margin: '0 0 16px',
     outline: 'none',

package/src/Form/Input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Input.tsx"],"names":["inputStyle","theme","markInvalid","placeholderTextTransform","disabled","placeholderStyle","color","Input","placeholderColor","fontSize","textTransform","opacity","boxShadow","COLOR","BLUE","GRAY","background","backgroundColorDisabled","backgroundColor","border","borderRadius","RED","caretColor","general","fontWeight","height","lineHeight","margin","outline","padding","width","INPUT_CLASSNAME","filterInputProps","props","React","forwardRef","ref","type"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AAEA;;AAGA;;;;;;;;AAOO,IAAMA,UAAgE,GAAG,SAAnEA,UAAmE,CAC9EC,KAD8E,QAG3E;AAAA,8BADFC,WACE;AAAA,MADFA,WACE,iCADY,KACZ;AAAA,mCADmBC,wBACnB;AAAA,MADmBA,wBACnB,sCAD8C,MAC9C;AAAA,2BADsDC,QACtD;AAAA,MADsDA,QACtD,8BADiE,KACjE;AACH,MAAMC,gBAAgB,GAAG;AACvBC,IAAAA,KAAK,EAAEL,KAAK,CAACM,KAAN,CAAYC,gBADI;AAEvBC,IAAAA,QAAQ,EAAE,MAFa;AAGvBC,IAAAA,aAAa,EAAEP;AAHQ,GAAzB;AAMA,SAAO;AACL,2DACKE,gBADL;AAEEM,MAAAA,OAAO,EAAE;AAFX,MADK;AAKL,kDACKN,gBADL,CALK;AAQL,sDACKA,gBADL,CARK;AAWL,eAAW;AACTO,MAAAA,SAAS,sBAAeC,gBAAMC,IAArB;AADA,KAXN;AAcL,6BAAyB,CAACZ,WAAD,GACrB;AACEU,MAAAA,SAAS,sBAAeC,gBAAME,IAArB;AADX,KADqB,GAIrB,EAlBC;AAmBLC,IAAAA,UAAU,EAAEZ,QAAQ,GAAGH,KAAK,CAACM,KAAN,CAAYU,uBAAf,GAAyChB,KAAK,CAACM,KAAN,CAAYW,eAnBpE;AAoBLC,IAAAA,MAAM,EAAE,MApBH;AAqBLC,IAAAA,YAAY,EAAE,KArBT;AAsBLR,IAAAA,SAAS,EAAEV,WAAW,uBAAgBW,gBAAMQ,GAAtB,wBAA2CR,gBAAME,IAAjD,CAtBjB;AAuBLO,IAAAA,UAAU,EAAET,gBAAMC,IAvBb;AAwBLR,IAAAA,KAAK,EAAEL,KAAK,CAACsB,OAAN,CAAcjB,KAxBhB;AAyBLkB,IAAAA,UAAU,EAAE,GAzBP;AA0BLC,IAAAA,MAAM,EAAE,MA1BH;AA2BLC,IAAAA,UAAU,EAAE,MA3BP;AA4BLC,IAAAA,MAAM,EAAE,UA5BH;AA6BLC,IAAAA,OAAO,EAAE,MA7BJ;AA8BLC,IAAAA,OAAO,EAAE,QA9BJ;AA+BLC,IAAAA,KAAK,EAAE;AA/BF,GAAP;AAiCD,CA3CM;;;AA6CA,IAAMC,eAAe,GAAG,WAAxB;;;AACP,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD;AAAA,SAAuB,uBAAYA,KAAZ,EAAmB,CAAC,aAAD,EAAgB,0BAAhB,CAAnB,CAAvB;AAAA,CAAzB;;AAEO,IAAM1B,KAA6C,gBAAG2B,mBAAMC,UAAN,CAG3D,iBAAmBC,GAAnB,EAA2B;AAAA,MAAzBC,IAAyB,SAAzBA,IAAyB;AAAA,MAAhBJ,KAAgB;AAC3B,SACE;AACE,IAAA,SAAS,EAAEF,eADb;AAEE,IAAA,GAAG,EAAE,aAAC9B,KAAD;AAAA,aAAkBD,UAAU,CAACC,KAAD,EAAQgC,KAAR,CAA5B;AAAA,KAFP;AAGE,IAAA,GAAG,EAAEG,GAHP;AAIE,IAAA,IAAI,EAAEC;AAJR,KAKML,gBAAgB,CAACC,KAAD,CALtB,EADF;AASD,CAb4D,CAAtD","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 type {Property} from 'csstype';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\nimport type {Theme} from '../Layout';\nimport type {TextProps} from '../Text';\nimport {filterProps} from '../util';\n\nexport interface InputProps<T = HTMLInputElement> extends TextProps<T> {\n  markInvalid?: boolean;\n  placeholderTextTransform?: Property.TextTransform;\n}\n\nexport const inputStyle: <T>(theme: Theme, props: InputProps<T>) => CSSObject = (\n  theme,\n  {markInvalid = false, placeholderTextTransform = 'none', disabled = false},\n) => {\n  const placeholderStyle = {\n    color: theme.Input.placeholderColor,\n    fontSize: '11px',\n    textTransform: placeholderTextTransform,\n  };\n\n  return {\n    '&::-moz-placeholder': {\n      ...placeholderStyle,\n      opacity: 1,\n    },\n    '&::-ms-input-placeholder': {\n      ...placeholderStyle,\n    },\n    '&::-webkit-input-placeholder': {\n      ...placeholderStyle,\n    },\n    '&:focus': {\n      boxShadow: `0 0 0 1px ${COLOR.BLUE}`,\n    },\n    '&:invalid:not(:focus)': !markInvalid\n      ? {\n          boxShadow: `0 0 0 1px ${COLOR.GRAY}`,\n        }\n      : {},\n    background: disabled ? theme.Input.backgroundColorDisabled : theme.Input.backgroundColor,\n    border: 'none',\n    borderRadius: '4px',\n    boxShadow: markInvalid ? `0 0 0 1px ${COLOR.RED}` : `0 0 0 1px ${COLOR.GRAY}`,\n    caretColor: COLOR.BLUE,\n    color: theme.general.color,\n    fontWeight: 300,\n    height: '56px',\n    lineHeight: '24px',\n    margin: '0 0 16px',\n    outline: 'none',\n    padding: '0 16px',\n    width: '100%',\n  };\n};\n\nexport const INPUT_CLASSNAME = 'wireinput';\nconst filterInputProps = (props: InputProps) => filterProps(props, ['markInvalid', 'placeholderTextTransform']);\n\nexport const Input: React.FC<InputProps<HTMLInputElement>> = React.forwardRef<\n  HTMLInputElement,\n  InputProps<HTMLInputElement>\n>(({type, ...props}, ref) => {\n  return (\n    <input\n      className={INPUT_CLASSNAME}\n      css={(theme: Theme) => inputStyle(theme, props)}\n      ref={ref}\n      type={type}\n      {...filterInputProps(props)}\n    />\n  );\n});\n"],"file":"Input.js"}
+{"version":3,"sources":["Input.tsx"],"names":["inputStyle","theme","markInvalid","placeholderTextTransform","disabled","placeholderStyle","color","Input","placeholderColor","fontSize","textTransform","opacity","boxShadow","COLOR_V2","BLUE","GRAY","background","backgroundColorDisabled","backgroundColor","border","borderRadius","RED","caretColor","general","fontWeight","height","lineHeight","margin","outline","padding","width","INPUT_CLASSNAME","filterInputProps","props","React","forwardRef","ref","type"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AAEA;;AAGA;;;;;;;;AAOO,IAAMA,UAAgE,GAAG,SAAnEA,UAAmE,CAC9EC,KAD8E,QAG3E;AAAA,8BADFC,WACE;AAAA,MADFA,WACE,iCADY,KACZ;AAAA,mCADmBC,wBACnB;AAAA,MADmBA,wBACnB,sCAD8C,MAC9C;AAAA,2BADsDC,QACtD;AAAA,MADsDA,QACtD,8BADiE,KACjE;AACH,MAAMC,gBAAgB,GAAG;AACvBC,IAAAA,KAAK,EAAEL,KAAK,CAACM,KAAN,CAAYC,gBADI;AAEvBC,IAAAA,QAAQ,EAAE,MAFa;AAGvBC,IAAAA,aAAa,EAAEP;AAHQ,GAAzB;AAMA,SAAO;AACL,2DACKE,gBADL;AAEEM,MAAAA,OAAO,EAAE;AAFX,MADK;AAKL,kDACKN,gBADL,CALK;AAQL,sDACKA,gBADL,CARK;AAWL,eAAW;AACTO,MAAAA,SAAS,sBAAeC,mBAASC,IAAxB;AADA,KAXN;AAcL,6BAAyB,CAACZ,WAAD,GACrB;AACEU,MAAAA,SAAS,sBAAeC,mBAASE,IAAxB;AADX,KADqB,GAIrB,EAlBC;AAmBLC,IAAAA,UAAU,EAAEZ,QAAQ,GAAGH,KAAK,CAACM,KAAN,CAAYU,uBAAf,GAAyChB,KAAK,CAACM,KAAN,CAAYW,eAnBpE;AAoBLC,IAAAA,MAAM,EAAE,MApBH;AAqBLC,IAAAA,YAAY,EAAE,KArBT;AAsBLR,IAAAA,SAAS,EAAEV,WAAW,uBAAgBW,mBAASQ,GAAzB,wBAA8CR,mBAASE,IAAvD,CAtBjB;AAuBLO,IAAAA,UAAU,EAAET,mBAASC,IAvBhB;AAwBLR,IAAAA,KAAK,EAAEL,KAAK,CAACsB,OAAN,CAAcjB,KAxBhB;AAyBLkB,IAAAA,UAAU,EAAE,GAzBP;AA0BLC,IAAAA,MAAM,EAAE,MA1BH;AA2BLC,IAAAA,UAAU,EAAE,MA3BP;AA4BLC,IAAAA,MAAM,EAAE,UA5BH;AA6BLC,IAAAA,OAAO,EAAE,MA7BJ;AA8BLC,IAAAA,OAAO,EAAE,QA9BJ;AA+BLC,IAAAA,KAAK,EAAE;AA/BF,GAAP;AAiCD,CA3CM;;;AA6CA,IAAMC,eAAe,GAAG,WAAxB;;;AACP,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD;AAAA,SAAuB,uBAAYA,KAAZ,EAAmB,CAAC,aAAD,EAAgB,0BAAhB,CAAnB,CAAvB;AAAA,CAAzB;;AAEO,IAAM1B,KAA6C,gBAAG2B,mBAAMC,UAAN,CAG3D,iBAAmBC,GAAnB,EAA2B;AAAA,MAAzBC,IAAyB,SAAzBA,IAAyB;AAAA,MAAhBJ,KAAgB;AAC3B,SACE;AACE,IAAA,SAAS,EAAEF,eADb;AAEE,IAAA,GAAG,EAAE,aAAC9B,KAAD;AAAA,aAAkBD,UAAU,CAACC,KAAD,EAAQgC,KAAR,CAA5B;AAAA,KAFP;AAGE,IAAA,GAAG,EAAEG,GAHP;AAIE,IAAA,IAAI,EAAEC;AAJR,KAKML,gBAAgB,CAACC,KAAD,CALtB,EADF;AASD,CAb4D,CAAtD","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 type {Property} from 'csstype';\nimport React from 'react';\n\nimport {COLOR_V2} from '../Identity';\nimport type {Theme} from '../Layout';\nimport type {TextProps} from '../Text';\nimport {filterProps} from '../util';\n\nexport interface InputProps<T = HTMLInputElement> extends TextProps<T> {\n  markInvalid?: boolean;\n  placeholderTextTransform?: Property.TextTransform;\n}\n\nexport const inputStyle: <T>(theme: Theme, props: InputProps<T>) => CSSObject = (\n  theme,\n  {markInvalid = false, placeholderTextTransform = 'none', disabled = false},\n) => {\n  const placeholderStyle = {\n    color: theme.Input.placeholderColor,\n    fontSize: '16px',\n    textTransform: placeholderTextTransform,\n  };\n\n  return {\n    '&::-moz-placeholder': {\n      ...placeholderStyle,\n      opacity: 1,\n    },\n    '&::-ms-input-placeholder': {\n      ...placeholderStyle,\n    },\n    '&::-webkit-input-placeholder': {\n      ...placeholderStyle,\n    },\n    '&:focus': {\n      boxShadow: `0 0 0 1px ${COLOR_V2.BLUE}`,\n    },\n    '&:invalid:not(:focus)': !markInvalid\n      ? {\n          boxShadow: `0 0 0 1px ${COLOR_V2.GRAY}`,\n        }\n      : {},\n    background: disabled ? theme.Input.backgroundColorDisabled : theme.Input.backgroundColor,\n    border: 'none',\n    borderRadius: '4px',\n    boxShadow: markInvalid ? `0 0 0 1px ${COLOR_V2.RED}` : `0 0 0 1px ${COLOR_V2.GRAY}`,\n    caretColor: COLOR_V2.BLUE,\n    color: theme.general.color,\n    fontWeight: 300,\n    height: '48px',\n    lineHeight: '24px',\n    margin: '0 0 16px',\n    outline: 'none',\n    padding: '0 16px',\n    width: '100%',\n  };\n};\n\nexport const INPUT_CLASSNAME = 'wireinput';\nconst filterInputProps = (props: InputProps) => filterProps(props, ['markInvalid', 'placeholderTextTransform']);\n\nexport const Input: React.FC<InputProps<HTMLInputElement>> = React.forwardRef<\n  HTMLInputElement,\n  InputProps<HTMLInputElement>\n>(({type, ...props}, ref) => {\n  return (\n    <input\n      className={INPUT_CLASSNAME}\n      css={(theme: Theme) => inputStyle(theme, props)}\n      ref={ref}\n      type={type}\n      {...filterInputProps(props)}\n    />\n  );\n});\n"],"file":"Input.js"}

package/src/Form/InputSubmitCombo.js

@@ -38,7 +38,7 @@ var InputSubmitCombo = function InputSubmitCombo(_ref) {
 
       return _objectSpread(_objectSpread({}, (0, _Input.inputStyle)(theme, props)), {}, (_objectSpread2 = {
         '&:focus-within': {
-          boxShadow: "0 0 0 1px ".concat(_Identity.COLOR.BLUE)
+          boxShadow: "0 0 0 1px ".concat(_Identity.COLOR_V2.BLUE)
         }
       }, (0, _defineProperty2["default"])(_objectSpread2, ".".concat(_Input.INPUT_CLASSNAME), {
         '&:focus, &:invalid:not(:focus)': {
@@ -48,7 +48,7 @@ var InputSubmitCombo = function InputSubmitCombo(_ref) {
         flexGrow: 1,
         margin: '0 8px 0 0',
         padding: '0 0 0 16px'
-      }), (0, _defineProperty2["default"])(_objectSpread2, "alignItems", 'center'), (0, _defineProperty2["default"])(_objectSpread2, "display", 'flex'), (0, _defineProperty2["default"])(_objectSpread2, "height", '57px'), (0, _defineProperty2["default"])(_objectSpread2, "justifyContent", 'space-between'), (0, _defineProperty2["default"])(_objectSpread2, "marginBottom", '4px'), (0, _defineProperty2["default"])(_objectSpread2, "paddingLeft", 0), _objectSpread2));
+      }), (0, _defineProperty2["default"])(_objectSpread2, "alignItems", 'center'), (0, _defineProperty2["default"])(_objectSpread2, "display", 'flex'), (0, _defineProperty2["default"])(_objectSpread2, "height", '49px'), (0, _defineProperty2["default"])(_objectSpread2, "justifyContent", 'space-between'), (0, _defineProperty2["default"])(_objectSpread2, "marginBottom", '4px'), (0, _defineProperty2["default"])(_objectSpread2, "paddingLeft", 0), _objectSpread2));
     }
   }, props), children);
 };

package/src/Form/InputSubmitCombo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["InputSubmitCombo.tsx"],"names":["INPUT_SUBMIT_COMBO_CLASSNAME","InputSubmitCombo","children","props","theme","boxShadow","COLOR","BLUE","INPUT_CLASSNAME","flexGrow","margin","padding"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AACA;;;;;;;;AAKO,IAAMA,4BAA4B,GAAG,kBAArC;;;AAEA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,MAAEC,QAAF,QAAEA,QAAF;AAAA,MAAeC,KAAf;AAAA,SAC9B;AACE,IAAA,SAAS,EAAEH,4BADb;AAEE,IAAA,GAAG,EAAE,aAACI,KAAD;AAAA;;AAAA,6CACA,uBAAWA,KAAX,EAAkBD,KAAlB,CADA;AAEH,0BAAkB;AAChBE,UAAAA,SAAS,sBAAeC,gBAAMC,IAArB;AADO;AAFf,qEAKEC,sBALF,GAKsB;AACvB,0CAAkC;AAChCH,UAAAA,SAAS,EAAE;AADqB,SADX;AAIvBA,QAAAA,SAAS,EAAE,MAJY;AAKvBI,QAAAA,QAAQ,EAAE,CALa;AAMvBC,QAAAA,MAAM,EAAE,WANe;AAOvBC,QAAAA,OAAO,EAAE;AAPc,OALtB,kEAcS,QAdT,+DAeM,MAfN,8DAgBK,MAhBL,sEAiBa,eAjBb,oEAkBW,KAlBX,mEAmBU,CAnBV;AAAA;AAFP,KAuBMR,KAvBN,GAyBGD,QAzBH,CAD8B;AAAA,CAAzB","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 {jsx} from '@emotion/react';\n\nimport {INPUT_CLASSNAME, InputProps, inputStyle} from './Input';\nimport {COLOR} from '../Identity';\nimport {Theme} from '../Layout';\n\nexport type InputSubmitComboProps<T = HTMLDivElement> = InputProps<T>;\n\nexport const INPUT_SUBMIT_COMBO_CLASSNAME = 'inputSubmitCombo';\n\nexport const InputSubmitCombo = ({children, ...props}: InputSubmitComboProps) => (\n  <div\n    className={INPUT_SUBMIT_COMBO_CLASSNAME}\n    css={(theme: Theme) => ({\n      ...inputStyle(theme, props),\n      '&:focus-within': {\n        boxShadow: `0 0 0 1px ${COLOR.BLUE}`,\n      },\n      [`.${INPUT_CLASSNAME}`]: {\n        '&:focus, &:invalid:not(:focus)': {\n          boxShadow: 'none',\n        },\n        boxShadow: 'none',\n        flexGrow: 1,\n        margin: '0 8px 0 0',\n        padding: '0 0 0 16px',\n      },\n      alignItems: 'center',\n      display: 'flex',\n      height: '57px', // needs a bit more space to not overlap with the `boxShadow` from `:focus`\n      justifyContent: 'space-between',\n      marginBottom: '4px',\n      paddingLeft: 0,\n    })}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"file":"InputSubmitCombo.js"}
+{"version":3,"sources":["InputSubmitCombo.tsx"],"names":["INPUT_SUBMIT_COMBO_CLASSNAME","InputSubmitCombo","children","props","theme","boxShadow","COLOR_V2","BLUE","INPUT_CLASSNAME","flexGrow","margin","padding"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AACA;;;;;;;;AAKO,IAAMA,4BAA4B,GAAG,kBAArC;;;AAEA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,MAAEC,QAAF,QAAEA,QAAF;AAAA,MAAeC,KAAf;AAAA,SAC9B;AACE,IAAA,SAAS,EAAEH,4BADb;AAEE,IAAA,GAAG,EAAE,aAACI,KAAD;AAAA;;AAAA,6CACA,uBAAWA,KAAX,EAAkBD,KAAlB,CADA;AAEH,0BAAkB;AAChBE,UAAAA,SAAS,sBAAeC,mBAASC,IAAxB;AADO;AAFf,qEAKEC,sBALF,GAKsB;AACvB,0CAAkC;AAChCH,UAAAA,SAAS,EAAE;AADqB,SADX;AAIvBA,QAAAA,SAAS,EAAE,MAJY;AAKvBI,QAAAA,QAAQ,EAAE,CALa;AAMvBC,QAAAA,MAAM,EAAE,WANe;AAOvBC,QAAAA,OAAO,EAAE;AAPc,OALtB,kEAcS,QAdT,+DAeM,MAfN,8DAgBK,MAhBL,sEAiBa,eAjBb,oEAkBW,KAlBX,mEAmBU,CAnBV;AAAA;AAFP,KAuBMR,KAvBN,GAyBGD,QAzBH,CAD8B;AAAA,CAAzB","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 {jsx} from '@emotion/react';\n\nimport {INPUT_CLASSNAME, InputProps, inputStyle} from './Input';\nimport {COLOR_V2} from '../Identity';\nimport {Theme} from '../Layout';\n\nexport type InputSubmitComboProps<T = HTMLDivElement> = InputProps<T>;\n\nexport const INPUT_SUBMIT_COMBO_CLASSNAME = 'inputSubmitCombo';\n\nexport const InputSubmitCombo = ({children, ...props}: InputSubmitComboProps) => (\n  <div\n    className={INPUT_SUBMIT_COMBO_CLASSNAME}\n    css={(theme: Theme) => ({\n      ...inputStyle(theme, props),\n      '&:focus-within': {\n        boxShadow: `0 0 0 1px ${COLOR_V2.BLUE}`,\n      },\n      [`.${INPUT_CLASSNAME}`]: {\n        '&:focus, &:invalid:not(:focus)': {\n          boxShadow: 'none',\n        },\n        boxShadow: 'none',\n        flexGrow: 1,\n        margin: '0 8px 0 0',\n        padding: '0 0 0 16px',\n      },\n      alignItems: 'center',\n      display: 'flex',\n      height: '49px', // needs a bit more space to not overlap with the `boxShadow` from `:focus`\n      justifyContent: 'space-between',\n      marginBottom: '4px',\n      paddingLeft: 0,\n    })}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"file":"InputSubmitCombo.js"}

package/src/Form/TextArea.js

@@ -32,7 +32,7 @@ var textAreaStyle = function textAreaStyle(theme, _ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   var placeholderStyle = {
     color: theme.Input.placeholderColor,
-    fontSize: '11px',
+    fontSize: '16px',
     textTransform: placeholderTextTransform
   };
   return {

package/src/Form/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TextArea.tsx"],"names":["textAreaStyle","theme","markInvalid","placeholderTextTransform","disabled","placeholderStyle","color","Input","placeholderColor","fontSize","textTransform","opacity","boxShadow","COLOR","BLUE","GRAY","background","backgroundColorDisabled","backgroundColor","border","borderRadius","RED","caretColor","general","fontWeight","lineHeight","margin","outline","padding","resize","width","TEXTAREA_CLASSNAME","filterTextAreaProps","props","TextArea","React","forwardRef","ref"],"mappings":";;;;;;;;;;;;;AAoBA;;AAEA;;AAEA;;AAGA;;;;;;AAOO,IAAMA,aAAsE,GAAG,SAAzEA,aAAyE,CACpFC,KADoF,QAGjF;AAAA,8BADFC,WACE;AAAA,MADFA,WACE,iCADY,KACZ;AAAA,mCADmBC,wBACnB;AAAA,MADmBA,wBACnB,sCAD8C,MAC9C;AAAA,2BADsDC,QACtD;AAAA,MADsDA,QACtD,8BADiE,KACjE;AACH,MAAMC,gBAAgB,GAAG;AACvBC,IAAAA,KAAK,EAAEL,KAAK,CAACM,KAAN,CAAYC,gBADI;AAEvBC,IAAAA,QAAQ,EAAE,MAFa;AAGvBC,IAAAA,aAAa,EAAEP;AAHQ,GAAzB;AAMA,SAAO;AACL,2DACKE,gBADL;AAEEM,MAAAA,OAAO,EAAE;AAFX,MADK;AAKL,kDACKN,gBADL,CALK;AAQL,sDACKA,gBADL,CARK;AAWL,eAAW;AACTO,MAAAA,SAAS,sBAAeC,gBAAMC,IAArB;AADA,KAXN;AAcL,iBAAa,CAACZ,WAAD,GACT;AACEU,MAAAA,SAAS,sBAAeC,gBAAME,IAArB;AADX,KADS,GAIT,EAlBC;AAmBLC,IAAAA,UAAU,EAAEZ,QAAQ,GAAGH,KAAK,CAACM,KAAN,CAAYU,uBAAf,GAAyChB,KAAK,CAACM,KAAN,CAAYW,eAnBpE;AAoBLC,IAAAA,MAAM,EAAE,MApBH;AAqBLC,IAAAA,YAAY,EAAE,KArBT;AAsBLR,IAAAA,SAAS,EAAEV,WAAW,uBAAgBW,gBAAMQ,GAAtB,wBAA2CR,gBAAME,IAAjD,CAtBjB;AAuBLO,IAAAA,UAAU,EAAET,gBAAMC,IAvBb;AAwBLR,IAAAA,KAAK,EAAEL,KAAK,CAACsB,OAAN,CAAcjB,KAxBhB;AAyBLkB,IAAAA,UAAU,EAAE,GAzBP;AA0BLC,IAAAA,UAAU,EAAE,MA1BP;AA2BLC,IAAAA,MAAM,EAAE,UA3BH;AA4BLC,IAAAA,OAAO,EAAE,MA5BJ;AA6BLC,IAAAA,OAAO,EAAE,WA7BJ;AA8BLC,IAAAA,MAAM,EAAE,MA9BH;AA+BLC,IAAAA,KAAK,EAAE;AA/BF,GAAP;AAiCD,CA3CM;;;AA6CA,IAAMC,kBAAkB,GAAG,UAA3B;;;AACP,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,KAAD;AAAA,SAA0B,uBAAYA,KAAZ,EAAmB,CAAC,aAAD,EAAgB,0BAAhB,CAAnB,CAA1B;AAAA,CAA5B;;AAEO,IAAMC,QAAsD,gBAAGC,mBAAMC,UAAN,CAGpE,UAACH,KAAD,EAAQI,GAAR;AAAA,SACA;AACE,IAAA,SAAS,EAAEN,kBADb;AAEE,IAAA,GAAG,EAAE,aAAC9B,KAAD;AAAA,aAAkBD,aAAa,CAACC,KAAD,EAAQgC,KAAR,CAA/B;AAAA,KAFP;AAGE,IAAA,GAAG,EAAEI;AAHP,KAIML,mBAAmB,CAACC,KAAD,CAJzB,EADA;AAAA,CAHoE,CAA/D","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 type {Property} from 'csstype';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\nimport type {Theme} from '../Layout';\nimport type {TextProps} from '../Text';\nimport {filterProps} from '../util';\n\nexport interface TextAreaProps<T = HTMLTextAreaElement> extends TextProps<T> {\n  markInvalid?: boolean;\n  placeholderTextTransform?: Property.TextTransform;\n}\n\nexport const textAreaStyle: <T>(theme: Theme, props: TextAreaProps<T>) => CSSObject = (\n  theme,\n  {markInvalid = false, placeholderTextTransform = 'none', disabled = false},\n) => {\n  const placeholderStyle = {\n    color: theme.Input.placeholderColor,\n    fontSize: '11px',\n    textTransform: placeholderTextTransform,\n  };\n\n  return {\n    '&::-moz-placeholder': {\n      ...placeholderStyle,\n      opacity: 1,\n    },\n    '&::-ms-input-placeholder': {\n      ...placeholderStyle,\n    },\n    '&::-webkit-input-placeholder': {\n      ...placeholderStyle,\n    },\n    '&:focus': {\n      boxShadow: `0 0 0 1px ${COLOR.BLUE}`,\n    },\n    '&:invalid': !markInvalid\n      ? {\n          boxShadow: `0 0 0 1px ${COLOR.GRAY}`,\n        }\n      : {},\n    background: disabled ? theme.Input.backgroundColorDisabled : theme.Input.backgroundColor,\n    border: 'none',\n    borderRadius: '4px',\n    boxShadow: markInvalid ? `0 0 0 1px ${COLOR.RED}` : `0 0 0 1px ${COLOR.GRAY}`,\n    caretColor: COLOR.BLUE,\n    color: theme.general.color,\n    fontWeight: 300,\n    lineHeight: '24px',\n    margin: '0 0 16px',\n    outline: 'none',\n    padding: '16px 16px',\n    resize: 'none',\n    width: '100%',\n  };\n};\n\nexport const TEXTAREA_CLASSNAME = 'textarea';\nconst filterTextAreaProps = (props: TextAreaProps) => filterProps(props, ['markInvalid', 'placeholderTextTransform']);\n\nexport const TextArea: React.FC<TextAreaProps<HTMLTextAreaElement>> = React.forwardRef<\n  HTMLTextAreaElement,\n  TextAreaProps<HTMLTextAreaElement>\n>((props, ref) => (\n  <textarea\n    className={TEXTAREA_CLASSNAME}\n    css={(theme: Theme) => textAreaStyle(theme, props)}\n    ref={ref}\n    {...filterTextAreaProps(props)}\n  />\n));\n"],"file":"TextArea.js"}
+{"version":3,"sources":["TextArea.tsx"],"names":["textAreaStyle","theme","markInvalid","placeholderTextTransform","disabled","placeholderStyle","color","Input","placeholderColor","fontSize","textTransform","opacity","boxShadow","COLOR","BLUE","GRAY","background","backgroundColorDisabled","backgroundColor","border","borderRadius","RED","caretColor","general","fontWeight","lineHeight","margin","outline","padding","resize","width","TEXTAREA_CLASSNAME","filterTextAreaProps","props","TextArea","React","forwardRef","ref"],"mappings":";;;;;;;;;;;;;AAoBA;;AAEA;;AAEA;;AAGA;;;;;;AAOO,IAAMA,aAAsE,GAAG,SAAzEA,aAAyE,CACpFC,KADoF,QAGjF;AAAA,8BADFC,WACE;AAAA,MADFA,WACE,iCADY,KACZ;AAAA,mCADmBC,wBACnB;AAAA,MADmBA,wBACnB,sCAD8C,MAC9C;AAAA,2BADsDC,QACtD;AAAA,MADsDA,QACtD,8BADiE,KACjE;AACH,MAAMC,gBAAgB,GAAG;AACvBC,IAAAA,KAAK,EAAEL,KAAK,CAACM,KAAN,CAAYC,gBADI;AAEvBC,IAAAA,QAAQ,EAAE,MAFa;AAGvBC,IAAAA,aAAa,EAAEP;AAHQ,GAAzB;AAMA,SAAO;AACL,2DACKE,gBADL;AAEEM,MAAAA,OAAO,EAAE;AAFX,MADK;AAKL,kDACKN,gBADL,CALK;AAQL,sDACKA,gBADL,CARK;AAWL,eAAW;AACTO,MAAAA,SAAS,sBAAeC,gBAAMC,IAArB;AADA,KAXN;AAcL,iBAAa,CAACZ,WAAD,GACT;AACEU,MAAAA,SAAS,sBAAeC,gBAAME,IAArB;AADX,KADS,GAIT,EAlBC;AAmBLC,IAAAA,UAAU,EAAEZ,QAAQ,GAAGH,KAAK,CAACM,KAAN,CAAYU,uBAAf,GAAyChB,KAAK,CAACM,KAAN,CAAYW,eAnBpE;AAoBLC,IAAAA,MAAM,EAAE,MApBH;AAqBLC,IAAAA,YAAY,EAAE,KArBT;AAsBLR,IAAAA,SAAS,EAAEV,WAAW,uBAAgBW,gBAAMQ,GAAtB,wBAA2CR,gBAAME,IAAjD,CAtBjB;AAuBLO,IAAAA,UAAU,EAAET,gBAAMC,IAvBb;AAwBLR,IAAAA,KAAK,EAAEL,KAAK,CAACsB,OAAN,CAAcjB,KAxBhB;AAyBLkB,IAAAA,UAAU,EAAE,GAzBP;AA0BLC,IAAAA,UAAU,EAAE,MA1BP;AA2BLC,IAAAA,MAAM,EAAE,UA3BH;AA4BLC,IAAAA,OAAO,EAAE,MA5BJ;AA6BLC,IAAAA,OAAO,EAAE,WA7BJ;AA8BLC,IAAAA,MAAM,EAAE,MA9BH;AA+BLC,IAAAA,KAAK,EAAE;AA/BF,GAAP;AAiCD,CA3CM;;;AA6CA,IAAMC,kBAAkB,GAAG,UAA3B;;;AACP,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,KAAD;AAAA,SAA0B,uBAAYA,KAAZ,EAAmB,CAAC,aAAD,EAAgB,0BAAhB,CAAnB,CAA1B;AAAA,CAA5B;;AAEO,IAAMC,QAAsD,gBAAGC,mBAAMC,UAAN,CAGpE,UAACH,KAAD,EAAQI,GAAR;AAAA,SACA;AACE,IAAA,SAAS,EAAEN,kBADb;AAEE,IAAA,GAAG,EAAE,aAAC9B,KAAD;AAAA,aAAkBD,aAAa,CAACC,KAAD,EAAQgC,KAAR,CAA/B;AAAA,KAFP;AAGE,IAAA,GAAG,EAAEI;AAHP,KAIML,mBAAmB,CAACC,KAAD,CAJzB,EADA;AAAA,CAHoE,CAA/D","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 type {Property} from 'csstype';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\nimport type {Theme} from '../Layout';\nimport type {TextProps} from '../Text';\nimport {filterProps} from '../util';\n\nexport interface TextAreaProps<T = HTMLTextAreaElement> extends TextProps<T> {\n  markInvalid?: boolean;\n  placeholderTextTransform?: Property.TextTransform;\n}\n\nexport const textAreaStyle: <T>(theme: Theme, props: TextAreaProps<T>) => CSSObject = (\n  theme,\n  {markInvalid = false, placeholderTextTransform = 'none', disabled = false},\n) => {\n  const placeholderStyle = {\n    color: theme.Input.placeholderColor,\n    fontSize: '16px',\n    textTransform: placeholderTextTransform,\n  };\n\n  return {\n    '&::-moz-placeholder': {\n      ...placeholderStyle,\n      opacity: 1,\n    },\n    '&::-ms-input-placeholder': {\n      ...placeholderStyle,\n    },\n    '&::-webkit-input-placeholder': {\n      ...placeholderStyle,\n    },\n    '&:focus': {\n      boxShadow: `0 0 0 1px ${COLOR.BLUE}`,\n    },\n    '&:invalid': !markInvalid\n      ? {\n          boxShadow: `0 0 0 1px ${COLOR.GRAY}`,\n        }\n      : {},\n    background: disabled ? theme.Input.backgroundColorDisabled : theme.Input.backgroundColor,\n    border: 'none',\n    borderRadius: '4px',\n    boxShadow: markInvalid ? `0 0 0 1px ${COLOR.RED}` : `0 0 0 1px ${COLOR.GRAY}`,\n    caretColor: COLOR.BLUE,\n    color: theme.general.color,\n    fontWeight: 300,\n    lineHeight: '24px',\n    margin: '0 0 16px',\n    outline: 'none',\n    padding: '16px 16px',\n    resize: 'none',\n    width: '100%',\n  };\n};\n\nexport const TEXTAREA_CLASSNAME = 'textarea';\nconst filterTextAreaProps = (props: TextAreaProps) => filterProps(props, ['markInvalid', 'placeholderTextTransform']);\n\nexport const TextArea: React.FC<TextAreaProps<HTMLTextAreaElement>> = React.forwardRef<\n  HTMLTextAreaElement,\n  TextAreaProps<HTMLTextAreaElement>\n>((props, ref) => (\n  <textarea\n    className={TEXTAREA_CLASSNAME}\n    css={(theme: Theme) => textAreaStyle(theme, props)}\n    ref={ref}\n    {...filterTextAreaProps(props)}\n  />\n));\n"],"file":"TextArea.js"}

package/src/Icon/HideIcon.js

@@ -36,7 +36,7 @@ var _SVGIcon = require("./SVGIcon");
 var HideIcon = function HideIcon(props) {
   return (0, _react.jsx)(_SVGIcon.SVGIcon, (0, _extends2["default"])({
     realWidth: 16,
-    realHeight: 16
+    realHeight: 13
   }, props), (0, _react.jsx)("path", {
     d: "M8 2.667A3.334 3.334 0 0111.333 6c0 .433-.086.84-.24 1.22l1.947 1.947A7.88 7.88 0 0015.327 6c-1.154-2.927-4-5-7.334-5-.933 0-1.826.167-2.653.467l1.44 1.44c.38-.154.787-.24 1.22-.24zM1.333.847l1.52 1.52.307.306A7.867 7.867 0 00.667 6c1.153 2.927 4 5 7.333 5 1.033 0 2.02-.2 2.92-.56l.28.28 1.953 1.947.847-.847L2.18 0l-.847.847zM5.02 4.533l1.033 1.034C6.02 5.707 6 5.853 6 6c0 1.107.893 2 2 2 .147 0 .293-.02.433-.053L9.467 8.98c-.447.22-.94.353-1.467.353A3.334 3.334 0 014.667 6c0-.527.133-1.02.353-1.467zm2.873-.52l2.1 2.1.014-.106c0-1.107-.894-2-2-2l-.114.006z"
   }));

package/src/Icon/HideIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["HideIcon.tsx"],"names":["HideIcon","props"],"mappings":";;;;;;;;;;;AAoBA;;AAEA;;AAtBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAKO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD;AAAA,SACtB,gBAAC,gBAAD;AAAS,IAAA,SAAS,EAAE,EAApB;AAAwB,IAAA,UAAU,EAAE;AAApC,KAA4CA,KAA5C,GACE;AAAM,IAAA,CAAC,EAAC;AAAR,IADF,CADsB;AAAA,CAAjB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2020 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 {jsx} from '@emotion/react';\n\nimport {SVGIcon, SVGIconProps} from './SVGIcon';\n\nexport const HideIcon = (props: SVGIconProps) => (\n  <SVGIcon realWidth={16} realHeight={16} {...props}>\n    <path d=\"M8 2.667A3.334 3.334 0 0111.333 6c0 .433-.086.84-.24 1.22l1.947 1.947A7.88 7.88 0 0015.327 6c-1.154-2.927-4-5-7.334-5-.933 0-1.826.167-2.653.467l1.44 1.44c.38-.154.787-.24 1.22-.24zM1.333.847l1.52 1.52.307.306A7.867 7.867 0 00.667 6c1.153 2.927 4 5 7.333 5 1.033 0 2.02-.2 2.92-.56l.28.28 1.953 1.947.847-.847L2.18 0l-.847.847zM5.02 4.533l1.033 1.034C6.02 5.707 6 5.853 6 6c0 1.107.893 2 2 2 .147 0 .293-.02.433-.053L9.467 8.98c-.447.22-.94.353-1.467.353A3.334 3.334 0 014.667 6c0-.527.133-1.02.353-1.467zm2.873-.52l2.1 2.1.014-.106c0-1.107-.894-2-2-2l-.114.006z\" />\n  </SVGIcon>\n);\n"],"file":"HideIcon.js"}
+{"version":3,"sources":["HideIcon.tsx"],"names":["HideIcon","props"],"mappings":";;;;;;;;;;;AAoBA;;AAEA;;AAtBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAKO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD;AAAA,SACtB,gBAAC,gBAAD;AAAS,IAAA,SAAS,EAAE,EAApB;AAAwB,IAAA,UAAU,EAAE;AAApC,KAA4CA,KAA5C,GACE;AAAM,IAAA,CAAC,EAAC;AAAR,IADF,CADsB;AAAA,CAAjB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2020 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 {jsx} from '@emotion/react';\n\nimport {SVGIcon, SVGIconProps} from './SVGIcon';\n\nexport const HideIcon = (props: SVGIconProps) => (\n  <SVGIcon realWidth={16} realHeight={13} {...props}>\n    <path d=\"M8 2.667A3.334 3.334 0 0111.333 6c0 .433-.086.84-.24 1.22l1.947 1.947A7.88 7.88 0 0015.327 6c-1.154-2.927-4-5-7.334-5-.933 0-1.826.167-2.653.467l1.44 1.44c.38-.154.787-.24 1.22-.24zM1.333.847l1.52 1.52.307.306A7.867 7.867 0 00.667 6c1.153 2.927 4 5 7.333 5 1.033 0 2.02-.2 2.92-.56l.28.28 1.953 1.947.847-.847L2.18 0l-.847.847zM5.02 4.533l1.033 1.034C6.02 5.707 6 5.853 6 6c0 1.107.893 2 2 2 .147 0 .293-.02.433-.053L9.467 8.98c-.447.22-.94.353-1.467.353A3.334 3.334 0 014.667 6c0-.527.133-1.02.353-1.467zm2.873-.52l2.1 2.1.014-.106c0-1.107-.894-2-2-2l-.114.006z\" />\n  </SVGIcon>\n);\n"],"file":"HideIcon.js"}

package/src/Icon/ShowIcon.js

@@ -36,7 +36,7 @@ var _SVGIcon = require("./SVGIcon");
 var ShowIcon = function ShowIcon(props) {
   return (0, _react.jsx)(_SVGIcon.SVGIcon, (0, _extends2["default"])({
     realWidth: 16,
-    realHeight: 16
+    realHeight: 10
   }, props), (0, _react.jsx)("path", {
     d: "M8 0C4.667 0 1.82 2.073.667 5c1.153 2.927 4 5 7.333 5s6.18-2.073 7.333-5c-1.153-2.927-4-5-7.333-5zm0 8.333a3.334 3.334 0 010-6.666 3.334 3.334 0 010 6.666zM8 3c-1.107 0-2 .893-2 2s.893 2 2 2 2-.893 2-2-.893-2-2-2z"
   }));

package/src/Icon/ShowIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ShowIcon.tsx"],"names":["ShowIcon","props"],"mappings":";;;;;;;;;;;AAoBA;;AAEA;;AAtBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAKO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD;AAAA,SACtB,gBAAC,gBAAD;AAAS,IAAA,SAAS,EAAE,EAApB;AAAwB,IAAA,UAAU,EAAE;AAApC,KAA4CA,KAA5C,GACE;AAAM,IAAA,CAAC,EAAC;AAAR,IADF,CADsB;AAAA,CAAjB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2020 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 {jsx} from '@emotion/react';\n\nimport {SVGIcon, SVGIconProps} from './SVGIcon';\n\nexport const ShowIcon = (props: SVGIconProps) => (\n  <SVGIcon realWidth={16} realHeight={16} {...props}>\n    <path d=\"M8 0C4.667 0 1.82 2.073.667 5c1.153 2.927 4 5 7.333 5s6.18-2.073 7.333-5c-1.153-2.927-4-5-7.333-5zm0 8.333a3.334 3.334 0 010-6.666 3.334 3.334 0 010 6.666zM8 3c-1.107 0-2 .893-2 2s.893 2 2 2 2-.893 2-2-.893-2-2-2z\" />\n  </SVGIcon>\n);\n"],"file":"ShowIcon.js"}
+{"version":3,"sources":["ShowIcon.tsx"],"names":["ShowIcon","props"],"mappings":";;;;;;;;;;;AAoBA;;AAEA;;AAtBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAKO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD;AAAA,SACtB,gBAAC,gBAAD;AAAS,IAAA,SAAS,EAAE,EAApB;AAAwB,IAAA,UAAU,EAAE;AAApC,KAA4CA,KAA5C,GACE;AAAM,IAAA,CAAC,EAAC;AAAR,IADF,CADsB;AAAA,CAAjB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2020 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 {jsx} from '@emotion/react';\n\nimport {SVGIcon, SVGIconProps} from './SVGIcon';\n\nexport const ShowIcon = (props: SVGIconProps) => (\n  <SVGIcon realWidth={16} realHeight={10} {...props}>\n    <path d=\"M8 0C4.667 0 1.82 2.073.667 5c1.153 2.927 4 5 7.333 5s6.18-2.073 7.333-5c-1.153-2.927-4-5-7.333-5zm0 8.333a3.334 3.334 0 010-6.666 3.334 3.334 0 010 6.666zM8 3c-1.107 0-2 .893-2 2s.893 2 2 2 2-.893 2-2-.893-2-2-2z\" />\n  </SVGIcon>\n);\n"],"file":"ShowIcon.js"}

package/src/Identity/colors-v2.d.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=colors-v2.d.js.map

package/src/Identity/colors-v2.d.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"colors-v2.d.js"}

package/src/Identity/colors-v2.d.ts

@@ -0,0 +1,3 @@
+export declare const BASE_LIGHT_COLOR: Record<string, string>;
+export declare const BASE_DARK_COLOR: Record<string, string>;
+export declare const COLOR_V2: any;

package/src/Identity/colors-v2.js

@@ -0,0 +1,221 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.COLOR_V2 = exports.BASE_DARK_COLOR = exports.BASE_LIGHT_COLOR = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+var BASE_LIGHT_COLOR = {
+  BLUE: '#0667c8',
+  GREEN: '#1d7833',
+  PETROL: '#01718e',
+  PURPLE: '#8944ab',
+  RED: '#c20013',
+  AMBER: '#a25915'
+};
+exports.BASE_LIGHT_COLOR = BASE_LIGHT_COLOR;
+var BASE_DARK_COLOR = {
+  BLUE: '#54a6ff',
+  GREEN: '#30db5b',
+  PETROL: '#5de6ff',
+  PURPLE: '#da8fff',
+  RED: '#ff7770',
+  AMBER: '#ffd426'
+};
+exports.BASE_DARK_COLOR = BASE_DARK_COLOR;
+var LIGHT_BLUE = {
+  BLUE_LIGHT_50: '#e7f0fa',
+  BLUE_LIGHT_100: '#cde1f4',
+  BLUE_LIGHT_200: '#9bc2e9',
+  BLUE_LIGHT_300: '#6aa4de',
+  BLUE_LIGHT_400: '#3885d3',
+  BLUE_LIGHT_500: BASE_LIGHT_COLOR.BLUE,
+  BLUE_LIGHT_600: '#0552a0',
+  BLUE_LIGHT_700: '#043e78',
+  BLUE_LIGHT_800: '#022950',
+  BLUE_LIGHT_900: '#19324d'
+};
+var DARK_BLUE = {
+  BLUE_DARK_50: '#eef7ff',
+  BLUE_DARK_100: '#ddedff',
+  BLUE_DARK_200: '#bbdbff',
+  BLUE_DARK_300: '#98caff',
+  BLUE_DARK_400: '#76b8ff',
+  BLUE_DARK_500: BASE_DARK_COLOR.BLUE,
+  BLUE_DARK_600: '#4385cc',
+  BLUE_DARK_700: '#326499',
+  BLUE_DARK_800: '#224266',
+  BLUE_DARK_900: '#19324d'
+};
+var LIGHT_GREEN = {
+  GREEN_LIGHT_50: '#e8f1ea',
+  GREEN_LIGHT_100: '#d2e4d6',
+  GREEN_LIGHT_200: '#a5c9ad',
+  GREEN_LIGHT_300: '#77ae85',
+  GREEN_LIGHT_400: '#4a935c',
+  GREEN_LIGHT_500: BASE_LIGHT_COLOR.GREEN,
+  GREEN_LIGHT_600: '#176029',
+  GREEN_LIGHT_700: '#11481f',
+  GREEN_LIGHT_800: '#0c3014',
+  GREEN_LIGHT_900: '#0e421b'
+};
+var DARK_GREEN = {
+  GREEN_DARK_50: '#ebfcef',
+  GREEN_DARK_100: '#d6f8de',
+  GREEN_DARK_200: '#acf1bd',
+  GREEN_DARK_300: '#83e99d',
+  GREEN_DARK_400: '#59e27c',
+  GREEN_DARK_500: BASE_DARK_COLOR.GREEN,
+  GREEN_DARK_600: '#26af49',
+  GREEN_DARK_700: '#1d8337',
+  GREEN_DARK_800: '#135824',
+  GREEN_DARK_900: '#0e421b'
+};
+var LIGHT_PETROL = {
+  PETROL_LIGHT_50: '#e5f1f3',
+  PETROL_LIGHT_100: '#cce2e7',
+  PETROL_LIGHT_200: '#99c6d0',
+  PETROL_LIGHT_300: '#67a9b8',
+  PETROL_LIGHT_400: '#348da1',
+  PETROL_LIGHT_500: BASE_LIGHT_COLOR.PETROL,
+  PETROL_LIGHT_600: '#015a6e',
+  PETROL_LIGHT_700: '#014352',
+  PETROL_LIGHT_800: '#002d37',
+  PETROL_LIGHT_900: '#1c454d'
+};
+var DARK_PETROL = {
+  PETROL_DARK_50: '#effdff',
+  PETROL_DARK_100: '#dffaff',
+  PETROL_DARK_200: '#bef5ff',
+  PETROL_DARK_300: '#9ef0ff',
+  PETROL_DARK_400: '#7debff',
+  PETROL_DARK_500: BASE_DARK_COLOR.PETROL,
+  PETROL_DARK_600: '#4Ab8cc',
+  PETROL_DARK_700: '#388a99',
+  PETROL_DARK_800: '#255c66',
+  PETROL_DARK_900: '#1c454d'
+};
+var LIGHT_PURPLE = {
+  PURPLE_LIGHT_50: '#f4edf7',
+  PURPLE_LIGHT_100: '#e7daee',
+  PURPLE_LIGHT_200: '#d0b4dd',
+  PURPLE_LIGHT_300: '#b88fcd',
+  PURPLE_LIGHT_400: '#a169bc',
+  PURPLE_LIGHT_500: BASE_LIGHT_COLOR.PURPLE,
+  PURPLE_LIGHT_600: '#6e3689',
+  PURPLE_LIGHT_700: '#522967',
+  PURPLE_LIGHT_800: '#371b44',
+  PURPLE_LIGHT_900: '#412b4d'
+};
+var DARK_PURPLE = {
+  PURPLE_DARK_50: '#fcf4ff',
+  PURPLE_DARK_100: '#f8e9ff',
+  PURPLE_DARK_200: '#f0d2ff',
+  PURPLE_DARK_300: '#e9bcff',
+  PURPLE_DARK_400: '#e1a5ff',
+  PURPLE_DARK_500: BASE_DARK_COLOR.PURPLE,
+  PURPLE_DARK_600: '#ae72cc',
+  PURPLE_DARK_700: '#835699',
+  PURPLE_DARK_800: '#573966',
+  PURPLE_DARK_900: '#412b4d'
+};
+var LIGHT_RED = {
+  RED_LIGHT_50: '#f9e6e8',
+  RED_LIGHT_100: '#f3ccd0',
+  RED_LIGHT_200: '#e799a1',
+  RED_LIGHT_300: '#da6671',
+  RED_LIGHT_400: '#ce3342',
+  RED_LIGHT_500: BASE_LIGHT_COLOR.RED,
+  RED_LIGHT_600: '#9b000f',
+  RED_LIGHT_700: '#74000b',
+  RED_LIGHT_800: '#4e0008',
+  RED_LIGHT_900: '#4d2422'
+};
+var DARK_RED = {
+  RED_DARK_50: '#fff2f1',
+  RED_DARK_100: '#ffe4e2',
+  RED_DARK_200: '#ffc9c6',
+  RED_DARK_300: '#ffada9',
+  RED_DARK_400: '#ff928d',
+  RED_DARK_500: BASE_DARK_COLOR.RED,
+  RED_DARK_600: '#cc5f5a',
+  RED_DARK_700: '#994743',
+  RED_DARK_800: '#66302d',
+  RED_DARK_900: '#4d2422'
+};
+var LIGHT_AMBER = {
+  AMBER_LIGHT_50: '#f6eee8',
+  AMBER_LIGHT_100: '#ecded0',
+  AMBER_LIGHT_200: '#dabda1',
+  AMBER_LIGHT_300: '#c79b73',
+  AMBER_LIGHT_400: '#b57A44',
+  AMBER_LIGHT_500: BASE_LIGHT_COLOR.AMBER,
+  AMBER_LIGHT_600: '#824711',
+  AMBER_LIGHT_700: '#61350d',
+  AMBER_LIGHT_800: '#412408',
+  AMBER_LIGHT_900: '#201204'
+};
+var DARK_AMBER = {
+  AMBER_DARK_50: '#fffbea',
+  AMBER_DARK_100: '#fff6d4',
+  AMBER_DARK_200: '#ffeea8',
+  AMBER_DARK_300: '#ffe57d',
+  AMBER_DARK_400: '#ffdd51',
+  AMBER_DARK_500: BASE_DARK_COLOR.AMBER,
+  AMBER_DARK_600: '#ccaa1e',
+  AMBER_DARK_700: '#997f17',
+  AMBER_DARK_800: '#66550f',
+  AMBER_DARK_900: '#4d400b'
+};
+
+var DARK = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, DARK_BLUE), DARK_GREEN), DARK_PETROL), DARK_PURPLE), DARK_RED), DARK_AMBER);
+
+var LIGHT = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, LIGHT_BLUE), LIGHT_GREEN), LIGHT_PETROL), LIGHT_PURPLE), LIGHT_RED), LIGHT_AMBER);
+
+var GRAYS = {
+  GRAY_10: '#fafafa',
+  GRAY_20: '#edeff0',
+  GRAY_30: '#e5e8ea',
+  GRAY_40: '#dce0e3',
+  GRAY_50: '#cbced1',
+  GRAY_60: '#9fa1a7',
+  GRAY_70: '#676b71',
+  GRAY_80: '#54585f',
+  GRAY_90: '#34373d',
+  GRAY_95: '#26272c',
+  GRAY_100: '#17181a'
+};
+
+var COLOR_V2 = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, BASE_DARK_COLOR), BASE_LIGHT_COLOR), DARK), LIGHT), GRAYS), {}, {
+  BLACK: '#000',
+  WHITE: '#fff'
+});
+
+exports.COLOR_V2 = COLOR_V2;
+//# sourceMappingURL=colors-v2.js.map

package/src/Identity/colors-v2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["colors-v2.ts"],"names":["BASE_LIGHT_COLOR","BLUE","GREEN","PETROL","PURPLE","RED","AMBER","BASE_DARK_COLOR","LIGHT_BLUE","BLUE_LIGHT_50","BLUE_LIGHT_100","BLUE_LIGHT_200","BLUE_LIGHT_300","BLUE_LIGHT_400","BLUE_LIGHT_500","BLUE_LIGHT_600","BLUE_LIGHT_700","BLUE_LIGHT_800","BLUE_LIGHT_900","DARK_BLUE","BLUE_DARK_50","BLUE_DARK_100","BLUE_DARK_200","BLUE_DARK_300","BLUE_DARK_400","BLUE_DARK_500","BLUE_DARK_600","BLUE_DARK_700","BLUE_DARK_800","BLUE_DARK_900","LIGHT_GREEN","GREEN_LIGHT_50","GREEN_LIGHT_100","GREEN_LIGHT_200","GREEN_LIGHT_300","GREEN_LIGHT_400","GREEN_LIGHT_500","GREEN_LIGHT_600","GREEN_LIGHT_700","GREEN_LIGHT_800","GREEN_LIGHT_900","DARK_GREEN","GREEN_DARK_50","GREEN_DARK_100","GREEN_DARK_200","GREEN_DARK_300","GREEN_DARK_400","GREEN_DARK_500","GREEN_DARK_600","GREEN_DARK_700","GREEN_DARK_800","GREEN_DARK_900","LIGHT_PETROL","PETROL_LIGHT_50","PETROL_LIGHT_100","PETROL_LIGHT_200","PETROL_LIGHT_300","PETROL_LIGHT_400","PETROL_LIGHT_500","PETROL_LIGHT_600","PETROL_LIGHT_700","PETROL_LIGHT_800","PETROL_LIGHT_900","DARK_PETROL","PETROL_DARK_50","PETROL_DARK_100","PETROL_DARK_200","PETROL_DARK_300","PETROL_DARK_400","PETROL_DARK_500","PETROL_DARK_600","PETROL_DARK_700","PETROL_DARK_800","PETROL_DARK_900","LIGHT_PURPLE","PURPLE_LIGHT_50","PURPLE_LIGHT_100","PURPLE_LIGHT_200","PURPLE_LIGHT_300","PURPLE_LIGHT_400","PURPLE_LIGHT_500","PURPLE_LIGHT_600","PURPLE_LIGHT_700","PURPLE_LIGHT_800","PURPLE_LIGHT_900","DARK_PURPLE","PURPLE_DARK_50","PURPLE_DARK_100","PURPLE_DARK_200","PURPLE_DARK_300","PURPLE_DARK_400","PURPLE_DARK_500","PURPLE_DARK_600","PURPLE_DARK_700","PURPLE_DARK_800","PURPLE_DARK_900","LIGHT_RED","RED_LIGHT_50","RED_LIGHT_100","RED_LIGHT_200","RED_LIGHT_300","RED_LIGHT_400","RED_LIGHT_500","RED_LIGHT_600","RED_LIGHT_700","RED_LIGHT_800","RED_LIGHT_900","DARK_RED","RED_DARK_50","RED_DARK_100","RED_DARK_200","RED_DARK_300","RED_DARK_400","RED_DARK_500","RED_DARK_600","RED_DARK_700","RED_DARK_800","RED_DARK_900","LIGHT_AMBER","AMBER_LIGHT_50","AMBER_LIGHT_100","AMBER_LIGHT_200","AMBER_LIGHT_300","AMBER_LIGHT_400","AMBER_LIGHT_500","AMBER_LIGHT_600","AMBER_LIGHT_700","AMBER_LIGHT_800","AMBER_LIGHT_900","DARK_AMBER","AMBER_DARK_50","AMBER_DARK_100","AMBER_DARK_200","AMBER_DARK_300","AMBER_DARK_400","AMBER_DARK_500","AMBER_DARK_600","AMBER_DARK_700","AMBER_DARK_800","AMBER_DARK_900","DARK","LIGHT","GRAYS","GRAY_10","GRAY_20","GRAY_30","GRAY_40","GRAY_50","GRAY_60","GRAY_70","GRAY_80","GRAY_90","GRAY_95","GRAY_100","COLOR_V2","BLACK","WHITE"],"mappings":";;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,IAAMA,gBAAwC,GAAG;AACtDC,EAAAA,IAAI,EAAE,SADgD;AAEtDC,EAAAA,KAAK,EAAE,SAF+C;AAGtDC,EAAAA,MAAM,EAAE,SAH8C;AAItDC,EAAAA,MAAM,EAAE,SAJ8C;AAKtDC,EAAAA,GAAG,EAAE,SALiD;AAMtDC,EAAAA,KAAK,EAAE;AAN+C,CAAjD;;AASA,IAAMC,eAAuC,GAAG;AACrDN,EAAAA,IAAI,EAAE,SAD+C;AAErDC,EAAAA,KAAK,EAAE,SAF8C;AAGrDC,EAAAA,MAAM,EAAE,SAH6C;AAIrDC,EAAAA,MAAM,EAAE,SAJ6C;AAKrDC,EAAAA,GAAG,EAAE,SALgD;AAMrDC,EAAAA,KAAK,EAAE;AAN8C,CAAhD;;AASP,IAAME,UAAkC,GAAG;AACzCC,EAAAA,aAAa,EAAE,SAD0B;AAEzCC,EAAAA,cAAc,EAAE,SAFyB;AAGzCC,EAAAA,cAAc,EAAE,SAHyB;AAIzCC,EAAAA,cAAc,EAAE,SAJyB;AAKzCC,EAAAA,cAAc,EAAE,SALyB;AAMzCC,EAAAA,cAAc,EAAEd,gBAAgB,CAACC,IANQ;AAOzCc,EAAAA,cAAc,EAAE,SAPyB;AAQzCC,EAAAA,cAAc,EAAE,SARyB;AASzCC,EAAAA,cAAc,EAAE,SATyB;AAUzCC,EAAAA,cAAc,EAAE;AAVyB,CAA3C;AAaA,IAAMC,SAAiC,GAAG;AACxCC,EAAAA,YAAY,EAAE,SAD0B;AAExCC,EAAAA,aAAa,EAAE,SAFyB;AAGxCC,EAAAA,aAAa,EAAE,SAHyB;AAIxCC,EAAAA,aAAa,EAAE,SAJyB;AAKxCC,EAAAA,aAAa,EAAE,SALyB;AAMxCC,EAAAA,aAAa,EAAElB,eAAe,CAACN,IANS;AAOxCyB,EAAAA,aAAa,EAAE,SAPyB;AAQxCC,EAAAA,aAAa,EAAE,SARyB;AASxCC,EAAAA,aAAa,EAAE,SATyB;AAUxCC,EAAAA,aAAa,EAAE;AAVyB,CAA1C;AAaA,IAAMC,WAAmC,GAAG;AAC1CC,EAAAA,cAAc,EAAE,SAD0B;AAE1CC,EAAAA,eAAe,EAAE,SAFyB;AAG1CC,EAAAA,eAAe,EAAE,SAHyB;AAI1CC,EAAAA,eAAe,EAAE,SAJyB;AAK1CC,EAAAA,eAAe,EAAE,SALyB;AAM1CC,EAAAA,eAAe,EAAEpC,gBAAgB,CAACE,KANQ;AAO1CmC,EAAAA,eAAe,EAAE,SAPyB;AAQ1CC,EAAAA,eAAe,EAAE,SARyB;AAS1CC,EAAAA,eAAe,EAAE,SATyB;AAU1CC,EAAAA,eAAe,EAAE;AAVyB,CAA5C;AAaA,IAAMC,UAAkC,GAAG;AACzCC,EAAAA,aAAa,EAAE,SAD0B;AAEzCC,EAAAA,cAAc,EAAE,SAFyB;AAGzCC,EAAAA,cAAc,EAAE,SAHyB;AAIzCC,EAAAA,cAAc,EAAE,SAJyB;AAKzCC,EAAAA,cAAc,EAAE,SALyB;AAMzCC,EAAAA,cAAc,EAAExC,eAAe,CAACL,KANS;AAOzC8C,EAAAA,cAAc,EAAE,SAPyB;AAQzCC,EAAAA,cAAc,EAAE,SARyB;AASzCC,EAAAA,cAAc,EAAE,SATyB;AAUzCC,EAAAA,cAAc,EAAE;AAVyB,CAA3C;AAaA,IAAMC,YAAoC,GAAG;AAC3CC,EAAAA,eAAe,EAAE,SAD0B;AAE3CC,EAAAA,gBAAgB,EAAE,SAFyB;AAG3CC,EAAAA,gBAAgB,EAAE,SAHyB;AAI3CC,EAAAA,gBAAgB,EAAE,SAJyB;AAK3CC,EAAAA,gBAAgB,EAAE,SALyB;AAM3CC,EAAAA,gBAAgB,EAAE1D,gBAAgB,CAACG,MANQ;AAO3CwD,EAAAA,gBAAgB,EAAE,SAPyB;AAQ3CC,EAAAA,gBAAgB,EAAE,SARyB;AAS3CC,EAAAA,gBAAgB,EAAE,SATyB;AAU3CC,EAAAA,gBAAgB,EAAE;AAVyB,CAA7C;AAaA,IAAMC,WAAmC,GAAG;AAC1CC,EAAAA,cAAc,EAAE,SAD0B;AAE1CC,EAAAA,eAAe,EAAE,SAFyB;AAG1CC,EAAAA,eAAe,EAAE,SAHyB;AAI1CC,EAAAA,eAAe,EAAE,SAJyB;AAK1CC,EAAAA,eAAe,EAAE,SALyB;AAM1CC,EAAAA,eAAe,EAAE9D,eAAe,CAACJ,MANS;AAO1CmE,EAAAA,eAAe,EAAE,SAPyB;AAQ1CC,EAAAA,eAAe,EAAE,SARyB;AAS1CC,EAAAA,eAAe,EAAE,SATyB;AAU1CC,EAAAA,eAAe,EAAE;AAVyB,CAA5C;AAaA,IAAMC,YAAoC,GAAG;AAC3CC,EAAAA,eAAe,EAAE,SAD0B;AAE3CC,EAAAA,gBAAgB,EAAE,SAFyB;AAG3CC,EAAAA,gBAAgB,EAAE,SAHyB;AAI3CC,EAAAA,gBAAgB,EAAE,SAJyB;AAK3CC,EAAAA,gBAAgB,EAAE,SALyB;AAM3CC,EAAAA,gBAAgB,EAAEhF,gBAAgB,CAACI,MANQ;AAO3C6E,EAAAA,gBAAgB,EAAE,SAPyB;AAQ3CC,EAAAA,gBAAgB,EAAE,SARyB;AAS3CC,EAAAA,gBAAgB,EAAE,SATyB;AAU3CC,EAAAA,gBAAgB,EAAE;AAVyB,CAA7C;AAaA,IAAMC,WAAmC,GAAG;AAC1CC,EAAAA,cAAc,EAAE,SAD0B;AAE1CC,EAAAA,eAAe,EAAE,SAFyB;AAG1CC,EAAAA,eAAe,EAAE,SAHyB;AAI1CC,EAAAA,eAAe,EAAE,SAJyB;AAK1CC,EAAAA,eAAe,EAAE,SALyB;AAM1CC,EAAAA,eAAe,EAAEpF,eAAe,CAACH,MANS;AAO1CwF,EAAAA,eAAe,EAAE,SAPyB;AAQ1CC,EAAAA,eAAe,EAAE,SARyB;AAS1CC,EAAAA,eAAe,EAAE,SATyB;AAU1CC,EAAAA,eAAe,EAAE;AAVyB,CAA5C;AAaA,IAAMC,SAAiC,GAAG;AACxCC,EAAAA,YAAY,EAAE,SAD0B;AAExCC,EAAAA,aAAa,EAAE,SAFyB;AAGxCC,EAAAA,aAAa,EAAE,SAHyB;AAIxCC,EAAAA,aAAa,EAAE,SAJyB;AAKxCC,EAAAA,aAAa,EAAE,SALyB;AAMxCC,EAAAA,aAAa,EAAEtG,gBAAgB,CAACK,GANQ;AAOxCkG,EAAAA,aAAa,EAAE,SAPyB;AAQxCC,EAAAA,aAAa,EAAE,SARyB;AASxCC,EAAAA,aAAa,EAAE,SATyB;AAUxCC,EAAAA,aAAa,EAAE;AAVyB,CAA1C;AAaA,IAAMC,QAAgC,GAAG;AACvCC,EAAAA,WAAW,EAAE,SAD0B;AAEvCC,EAAAA,YAAY,EAAE,SAFyB;AAGvCC,EAAAA,YAAY,EAAE,SAHyB;AAIvCC,EAAAA,YAAY,EAAE,SAJyB;AAKvCC,EAAAA,YAAY,EAAE,SALyB;AAMvCC,EAAAA,YAAY,EAAE1G,eAAe,CAACF,GANS;AAOvC6G,EAAAA,YAAY,EAAE,SAPyB;AAQvCC,EAAAA,YAAY,EAAE,SARyB;AASvCC,EAAAA,YAAY,EAAE,SATyB;AAUvCC,EAAAA,YAAY,EAAE;AAVyB,CAAzC;AAaA,IAAMC,WAAmC,GAAG;AAC1CC,EAAAA,cAAc,EAAE,SAD0B;AAE1CC,EAAAA,eAAe,EAAE,SAFyB;AAG1CC,EAAAA,eAAe,EAAE,SAHyB;AAI1CC,EAAAA,eAAe,EAAE,SAJyB;AAK1CC,EAAAA,eAAe,EAAE,SALyB;AAM1CC,EAAAA,eAAe,EAAE5H,gBAAgB,CAACM,KANQ;AAO1CuH,EAAAA,eAAe,EAAE,SAPyB;AAQ1CC,EAAAA,eAAe,EAAE,SARyB;AAS1CC,EAAAA,eAAe,EAAE,SATyB;AAU1CC,EAAAA,eAAe,EAAE;AAVyB,CAA5C;AAaA,IAAMC,UAAkC,GAAG;AACzCC,EAAAA,aAAa,EAAE,SAD0B;AAEzCC,EAAAA,cAAc,EAAE,SAFyB;AAGzCC,EAAAA,cAAc,EAAE,SAHyB;AAIzCC,EAAAA,cAAc,EAAE,SAJyB;AAKzCC,EAAAA,cAAc,EAAE,SALyB;AAMzCC,EAAAA,cAAc,EAAEhI,eAAe,CAACD,KANS;AAOzCkI,EAAAA,cAAc,EAAE,SAPyB;AAQzCC,EAAAA,cAAc,EAAE,SARyB;AASzCC,EAAAA,cAAc,EAAE,SATyB;AAUzCC,EAAAA,cAAc,EAAE;AAVyB,CAA3C;;AAaA,IAAMC,IAA4B,2FAC7BzH,SAD6B,GAE7BsB,UAF6B,GAG7BsB,WAH6B,GAI7BsB,WAJ6B,GAK7BsB,QAL6B,GAM7BsB,UAN6B,CAAlC;;AASA,IAAMY,KAA6B,2FAC9BrI,UAD8B,GAE9BsB,WAF8B,GAG9BsB,YAH8B,GAI9BsB,YAJ8B,GAK9BsB,SAL8B,GAM9BsB,WAN8B,CAAnC;;AASA,IAAMwB,KAA6B,GAAG;AACpCC,EAAAA,OAAO,EAAE,SAD2B;AAEpCC,EAAAA,OAAO,EAAE,SAF2B;AAGpCC,EAAAA,OAAO,EAAE,SAH2B;AAIpCC,EAAAA,OAAO,EAAE,SAJ2B;AAKpCC,EAAAA,OAAO,EAAE,SAL2B;AAMpCC,EAAAA,OAAO,EAAE,SAN2B;AAOpCC,EAAAA,OAAO,EAAE,SAP2B;AAQpCC,EAAAA,OAAO,EAAE,SAR2B;AASpCC,EAAAA,OAAO,EAAE,SAT2B;AAUpCC,EAAAA,OAAO,EAAE,SAV2B;AAWpCC,EAAAA,QAAQ,EAAE;AAX0B,CAAtC;;AAcO,IAAMC,QAAa,2FACrBnJ,eADqB,GAErBP,gBAFqB,GAGrB4I,IAHqB,GAIrBC,KAJqB,GAKrBC,KALqB;AAMxBa,EAAAA,KAAK,EAAE,MANiB;AAOxBC,EAAAA,KAAK,EAAE;AAPiB,EAAnB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2022 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\nexport const BASE_LIGHT_COLOR: Record<string, string> = {\n  BLUE: '#0667c8',\n  GREEN: '#1d7833',\n  PETROL: '#01718e',\n  PURPLE: '#8944ab',\n  RED: '#c20013',\n  AMBER: '#a25915',\n};\n\nexport const BASE_DARK_COLOR: Record<string, string> = {\n  BLUE: '#54a6ff',\n  GREEN: '#30db5b',\n  PETROL: '#5de6ff',\n  PURPLE: '#da8fff',\n  RED: '#ff7770',\n  AMBER: '#ffd426',\n};\n\nconst LIGHT_BLUE: Record<string, string> = {\n  BLUE_LIGHT_50: '#e7f0fa',\n  BLUE_LIGHT_100: '#cde1f4',\n  BLUE_LIGHT_200: '#9bc2e9',\n  BLUE_LIGHT_300: '#6aa4de',\n  BLUE_LIGHT_400: '#3885d3',\n  BLUE_LIGHT_500: BASE_LIGHT_COLOR.BLUE,\n  BLUE_LIGHT_600: '#0552a0',\n  BLUE_LIGHT_700: '#043e78',\n  BLUE_LIGHT_800: '#022950',\n  BLUE_LIGHT_900: '#19324d',\n};\n\nconst DARK_BLUE: Record<string, string> = {\n  BLUE_DARK_50: '#eef7ff',\n  BLUE_DARK_100: '#ddedff',\n  BLUE_DARK_200: '#bbdbff',\n  BLUE_DARK_300: '#98caff',\n  BLUE_DARK_400: '#76b8ff',\n  BLUE_DARK_500: BASE_DARK_COLOR.BLUE,\n  BLUE_DARK_600: '#4385cc',\n  BLUE_DARK_700: '#326499',\n  BLUE_DARK_800: '#224266',\n  BLUE_DARK_900: '#19324d',\n};\n\nconst LIGHT_GREEN: Record<string, string> = {\n  GREEN_LIGHT_50: '#e8f1ea',\n  GREEN_LIGHT_100: '#d2e4d6',\n  GREEN_LIGHT_200: '#a5c9ad',\n  GREEN_LIGHT_300: '#77ae85',\n  GREEN_LIGHT_400: '#4a935c',\n  GREEN_LIGHT_500: BASE_LIGHT_COLOR.GREEN,\n  GREEN_LIGHT_600: '#176029',\n  GREEN_LIGHT_700: '#11481f',\n  GREEN_LIGHT_800: '#0c3014',\n  GREEN_LIGHT_900: '#0e421b',\n};\n\nconst DARK_GREEN: Record<string, string> = {\n  GREEN_DARK_50: '#ebfcef',\n  GREEN_DARK_100: '#d6f8de',\n  GREEN_DARK_200: '#acf1bd',\n  GREEN_DARK_300: '#83e99d',\n  GREEN_DARK_400: '#59e27c',\n  GREEN_DARK_500: BASE_DARK_COLOR.GREEN,\n  GREEN_DARK_600: '#26af49',\n  GREEN_DARK_700: '#1d8337',\n  GREEN_DARK_800: '#135824',\n  GREEN_DARK_900: '#0e421b',\n};\n\nconst LIGHT_PETROL: Record<string, string> = {\n  PETROL_LIGHT_50: '#e5f1f3',\n  PETROL_LIGHT_100: '#cce2e7',\n  PETROL_LIGHT_200: '#99c6d0',\n  PETROL_LIGHT_300: '#67a9b8',\n  PETROL_LIGHT_400: '#348da1',\n  PETROL_LIGHT_500: BASE_LIGHT_COLOR.PETROL,\n  PETROL_LIGHT_600: '#015a6e',\n  PETROL_LIGHT_700: '#014352',\n  PETROL_LIGHT_800: '#002d37',\n  PETROL_LIGHT_900: '#1c454d',\n};\n\nconst DARK_PETROL: Record<string, string> = {\n  PETROL_DARK_50: '#effdff',\n  PETROL_DARK_100: '#dffaff',\n  PETROL_DARK_200: '#bef5ff',\n  PETROL_DARK_300: '#9ef0ff',\n  PETROL_DARK_400: '#7debff',\n  PETROL_DARK_500: BASE_DARK_COLOR.PETROL,\n  PETROL_DARK_600: '#4Ab8cc',\n  PETROL_DARK_700: '#388a99',\n  PETROL_DARK_800: '#255c66',\n  PETROL_DARK_900: '#1c454d',\n};\n\nconst LIGHT_PURPLE: Record<string, string> = {\n  PURPLE_LIGHT_50: '#f4edf7',\n  PURPLE_LIGHT_100: '#e7daee',\n  PURPLE_LIGHT_200: '#d0b4dd',\n  PURPLE_LIGHT_300: '#b88fcd',\n  PURPLE_LIGHT_400: '#a169bc',\n  PURPLE_LIGHT_500: BASE_LIGHT_COLOR.PURPLE,\n  PURPLE_LIGHT_600: '#6e3689',\n  PURPLE_LIGHT_700: '#522967',\n  PURPLE_LIGHT_800: '#371b44',\n  PURPLE_LIGHT_900: '#412b4d',\n};\n\nconst DARK_PURPLE: Record<string, string> = {\n  PURPLE_DARK_50: '#fcf4ff',\n  PURPLE_DARK_100: '#f8e9ff',\n  PURPLE_DARK_200: '#f0d2ff',\n  PURPLE_DARK_300: '#e9bcff',\n  PURPLE_DARK_400: '#e1a5ff',\n  PURPLE_DARK_500: BASE_DARK_COLOR.PURPLE,\n  PURPLE_DARK_600: '#ae72cc',\n  PURPLE_DARK_700: '#835699',\n  PURPLE_DARK_800: '#573966',\n  PURPLE_DARK_900: '#412b4d',\n};\n\nconst LIGHT_RED: Record<string, string> = {\n  RED_LIGHT_50: '#f9e6e8',\n  RED_LIGHT_100: '#f3ccd0',\n  RED_LIGHT_200: '#e799a1',\n  RED_LIGHT_300: '#da6671',\n  RED_LIGHT_400: '#ce3342',\n  RED_LIGHT_500: BASE_LIGHT_COLOR.RED,\n  RED_LIGHT_600: '#9b000f',\n  RED_LIGHT_700: '#74000b',\n  RED_LIGHT_800: '#4e0008',\n  RED_LIGHT_900: '#4d2422',\n};\n\nconst DARK_RED: Record<string, string> = {\n  RED_DARK_50: '#fff2f1',\n  RED_DARK_100: '#ffe4e2',\n  RED_DARK_200: '#ffc9c6',\n  RED_DARK_300: '#ffada9',\n  RED_DARK_400: '#ff928d',\n  RED_DARK_500: BASE_DARK_COLOR.RED,\n  RED_DARK_600: '#cc5f5a',\n  RED_DARK_700: '#994743',\n  RED_DARK_800: '#66302d',\n  RED_DARK_900: '#4d2422',\n};\n\nconst LIGHT_AMBER: Record<string, string> = {\n  AMBER_LIGHT_50: '#f6eee8',\n  AMBER_LIGHT_100: '#ecded0',\n  AMBER_LIGHT_200: '#dabda1',\n  AMBER_LIGHT_300: '#c79b73',\n  AMBER_LIGHT_400: '#b57A44',\n  AMBER_LIGHT_500: BASE_LIGHT_COLOR.AMBER,\n  AMBER_LIGHT_600: '#824711',\n  AMBER_LIGHT_700: '#61350d',\n  AMBER_LIGHT_800: '#412408',\n  AMBER_LIGHT_900: '#201204',\n};\n\nconst DARK_AMBER: Record<string, string> = {\n  AMBER_DARK_50: '#fffbea',\n  AMBER_DARK_100: '#fff6d4',\n  AMBER_DARK_200: '#ffeea8',\n  AMBER_DARK_300: '#ffe57d',\n  AMBER_DARK_400: '#ffdd51',\n  AMBER_DARK_500: BASE_DARK_COLOR.AMBER,\n  AMBER_DARK_600: '#ccaa1e',\n  AMBER_DARK_700: '#997f17',\n  AMBER_DARK_800: '#66550f',\n  AMBER_DARK_900: '#4d400b',\n};\n\nconst DARK: Record<string, string> = {\n  ...DARK_BLUE,\n  ...DARK_GREEN,\n  ...DARK_PETROL,\n  ...DARK_PURPLE,\n  ...DARK_RED,\n  ...DARK_AMBER,\n};\n\nconst LIGHT: Record<string, string> = {\n  ...LIGHT_BLUE,\n  ...LIGHT_GREEN,\n  ...LIGHT_PETROL,\n  ...LIGHT_PURPLE,\n  ...LIGHT_RED,\n  ...LIGHT_AMBER,\n};\n\nconst GRAYS: Record<string, string> = {\n  GRAY_10: '#fafafa',\n  GRAY_20: '#edeff0',\n  GRAY_30: '#e5e8ea',\n  GRAY_40: '#dce0e3',\n  GRAY_50: '#cbced1',\n  GRAY_60: '#9fa1a7',\n  GRAY_70: '#676b71',\n  GRAY_80: '#54585f',\n  GRAY_90: '#34373d',\n  GRAY_95: '#26272c',\n  GRAY_100: '#17181a',\n};\n\nexport const COLOR_V2: any = {\n  ...BASE_DARK_COLOR,\n  ...BASE_LIGHT_COLOR,\n  ...DARK,\n  ...LIGHT,\n  ...GRAYS,\n  BLACK: '#000',\n  WHITE: '#fff',\n};\n"],"file":"colors-v2.js"}

package/src/Identity/colors-v2.md

@@ -0,0 +1,111 @@
+```js
+/** @jsx jsx */
+import {jsx} from '@emotion/react';
+import {COLOR, Container, H1, H2, H3, Line} from '@wireapp/react-ui-kit';
+import Color from 'color';
+import {COLOR_V2 as Colors, BASE_LIGHT_COLOR, BASE_DARK_COLOR} from './colors-v2';
+
+const colorElementStyle = props => ({
+  '&::after': {
+    alignItems: 'center',
+    color: '#fff',
+    content: 'attr(data-text)',
+    display: 'flex',
+    fontSize: '10px',
+    fontWeight: 600,
+    height: '100%',
+    justifyContent: 'center',
+    opacity: 0,
+    position: 'absolute',
+    textAlign: 'center',
+    textShadow: '#000 0 0 2px',
+    transform: 'scale(1.2)',
+    transition: 'all 0.2s ease-in-out',
+    whiteSpace: 'pre-wrap',
+    width: '100%',
+    zIndex: 1,
+  },
+  '&:hover::after': {
+    opacity: 1,
+    transform: 'scale(1)',
+  },
+  cursor: 'pointer',
+  backgroundColor: props.backgroundColor,
+  border: '1px solid black',
+  borderRadius: '40px',
+  display: 'inline-block',
+  height: '80px',
+  position: 'relative',
+  width: '80px',
+});
+
+const ColorElement = ({name, backgroundColor}) => {
+  return (
+    <div
+      onClick={() => navigator.clipboard.writeText(backgroundColor)}
+      css={colorElementStyle({backgroundColor})}
+      data-text={`${name}\n${backgroundColor}`}
+    />
+  );
+};
+
+const filterAndRenderColors = colorToFilter =>
+  Object.entries(Colors)
+    .filter(([name]) => name.includes(colorToFilter))
+    .map(([name, color]) => <ColorElement key={name} name={name} backgroundColor={color} />);
+
+<Container>
+  <H2>Light UI</H2>
+  <H3>Main Accent Colors</H3>
+
+  {Object.entries(BASE_LIGHT_COLOR).map(([name, color]) => (
+    <ColorElement key={name} name={name} backgroundColor={color} />
+  ))}
+
+  <H3>Blue</H3>
+  {filterAndRenderColors('BLUE_LIGHT')}
+
+  <H3>Green</H3>
+  {filterAndRenderColors('GREEN_LIGHT')}
+
+  <H3>Petrol</H3>
+  {filterAndRenderColors('PETROL_LIGHT')}
+
+  <H3>Purple</H3>
+  {filterAndRenderColors('PURPLE_LIGHT')}
+
+  <H3>Red</H3>
+  {filterAndRenderColors('RED_LIGHT')}
+
+  <H3>Amber</H3>
+  {filterAndRenderColors('AMBER_LIGHT')}
+
+  <H2>Dark UI</H2>
+  <H3>Main Accent Colors</H3>
+
+  {Object.entries(BASE_DARK_COLOR).map(([name, color]) => (
+    <ColorElement key={name} name={name} backgroundColor={color} />
+  ))}
+
+  <H3>Blue</H3>
+  {filterAndRenderColors('BLUE_DARK')}
+
+  <H3>Green</H3>
+  {filterAndRenderColors('GREEN_DARK')}
+
+  <H3>Petrol</H3>
+  {filterAndRenderColors('PETROL_DARK')}
+
+  <H3>Purple</H3>
+  {filterAndRenderColors('PURPLE_DARK')}
+
+  <H3>Red</H3>
+  {filterAndRenderColors('RED_DARK')}
+
+  <H3>Amber</H3>
+  {filterAndRenderColors('AMBER_DARK')}
+
+  <H2>Grays</H2>
+  {filterAndRenderColors('GRAY')}
+</Container>;
+```

package/src/Identity/index.d.js

@@ -56,6 +56,19 @@ Object.keys(_colors).forEach(function (key) {
   });
 });
 
+var _colorsV = require("./colors-v2");
+
+Object.keys(_colorsV).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _colorsV[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _colorsV[key];
+    }
+  });
+});
+
 var _Logo = require("./Logo");
 
 Object.keys(_Logo).forEach(function (key) {

package/src/Identity/index.d.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.d.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './Animation';\nexport * from './Avatar';\nexport * from './AvatarGrid';\nexport * from './colors';\nexport * from './Logo';\n"],"file":"index.d.js"}
+{"version":3,"sources":["index.d.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './Animation';\nexport * from './Avatar';\nexport * from './AvatarGrid';\nexport * from './colors';\nexport * from './colors-v2';\nexport * from './Logo';\n"],"file":"index.d.js"}

package/src/Identity/index.d.ts

@@ -2,4 +2,5 @@ export * from './Animation';
 export * from './Avatar';
 export * from './AvatarGrid';
 export * from './colors';
+export * from './colors-v2';
 export * from './Logo';

package/src/Identity/index.js

@@ -56,6 +56,19 @@ Object.keys(_colors).forEach(function (key) {
   });
 });
 
+var _colorsV = require("./colors-v2");
+
+Object.keys(_colorsV).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _colorsV[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _colorsV[key];
+    }
+  });
+});
+
 var _Logo = require("./Logo");
 
 Object.keys(_Logo).forEach(function (key) {

package/src/Identity/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;AAmBA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","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\nexport * from './Animation';\nexport * from './Avatar';\nexport * from './AvatarGrid';\nexport * from './colors';\nexport * from './Logo';\n"],"file":"index.js"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;AAmBA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","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\nexport * from './Animation';\nexport * from './Avatar';\nexport * from './AvatarGrid';\nexport * from './colors';\nexport * from './colors-v2';\nexport * from './Logo';\n"],"file":"index.js"}