@wireapp/react-ui-kit 8.3.0 → 8.5.1

package/src/Form/Select.md

@@ -2,34 +2,77 @@ Demo:
 
 ```js
 import {Fragment} from 'react';
-import {Columns, Column, Select} from '@wireapp/react-ui-kit';
+import {Columns, Column, ErrorMessage, Select} from '@wireapp/react-ui-kit';
+
+const options = [
+  {value: '1', label: 'Option 1'},
+  {value: '2', label: 'Option 2'},
+  {value: '3', label: 'Option 3'},
+  {value: '4', label: 'Option 4'},
+  {value: '5', label: 'Option 5'},
+  {value: '6', label: 'Option 6'},
+];
 
 <Fragment>
   <Columns>
     <Column>Select</Column>
+
     <Column>
-      <Select>
-        <option>a</option>
-        <option>b</option>
-        <option>c</option>
-        <option>d</option>
-      </Select>
+      <Select
+        label="Select"
+        id="firstSelect"
+        options={options}
+        value={options[0]}
+        onChange={selectedOption => console.log('Selected option', selectedOption)}
+        dataUieName="select"
+      />
     </Column>
   </Columns>
+
   <Columns>
     <Column>Disabled Select</Column>
+
+    <Column>
+      <Select
+        disabled
+        label="Disabled select"
+        id="disabledSelect"
+        options={options}
+        onChange={selectedOption => console.log('Selected option', selectedOption)}
+        dataUieName="disabled-select"
+      />
+    </Column>
+  </Columns>
+
+  <Columns>
+    <Column>Required Select</Column>
+
     <Column>
-      <Select disabled>
-        <option>a</option>
-      </Select>
+      <Select
+        label="Required select"
+        required
+        id="requiredSelect"
+        options={options}
+        onChange={selectedOption => console.log('Selected option', selectedOption)}
+        dataUieName="required-select"
+      />
     </Column>
   </Columns>
+
   <Columns>
     <Column>Invalid Select</Column>
+
     <Column>
-      <Select markInvalid>
-        <option>a</option>
-      </Select>
+      <Select
+        markInvalid
+        label="InputLabel"
+        id="invalidSelect"
+        required
+        error={<ErrorMessage>Error message</ErrorMessage>}
+        options={options}
+        onChange={selectedOption => console.log('Selected option', selectedOption)}
+        dataUieName="invalid-select"
+      />
     </Column>
   </Columns>
 </Fragment>;

package/src/Form/index.d.js

@@ -198,4 +198,17 @@ Object.keys(_Tooltip).forEach(function (key) {
     }
   });
 });
+
+var _InputLabel = require("./InputLabel");
+
+Object.keys(_InputLabel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InputLabel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _InputLabel[key];
+    }
+  });
+});
 //# sourceMappingURL=index.d.js.map

package/src/Form/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;;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;;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 './Button';\nexport * from './ButtonLink';\nexport * from './Checkbox';\nexport * from './CodeInput';\nexport * from './ErrorMessage';\nexport * from './Form';\nexport * from './Input';\nexport * from './InputBlock';\nexport * from './InputSubmitCombo';\nexport * from './RoundIconButton';\nexport * from './Select';\nexport * from './ShakeBox';\nexport * from './Switch';\nexport * from './TextArea';\nexport * from './Tooltip';\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;;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;;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 './Button';\nexport * from './ButtonLink';\nexport * from './Checkbox';\nexport * from './CodeInput';\nexport * from './ErrorMessage';\nexport * from './Form';\nexport * from './Input';\nexport * from './InputBlock';\nexport * from './InputSubmitCombo';\nexport * from './RoundIconButton';\nexport * from './Select';\nexport * from './ShakeBox';\nexport * from './Switch';\nexport * from './TextArea';\nexport * from './Tooltip';\nexport * from './InputLabel';\n"],"file":"index.d.js"}

package/src/Form/index.d.ts

@@ -13,3 +13,4 @@ export * from './ShakeBox';
 export * from './Switch';
 export * from './TextArea';
 export * from './Tooltip';
+export * from './InputLabel';

package/src/Form/index.js

@@ -198,4 +198,17 @@ Object.keys(_Tooltip).forEach(function (key) {
     }
   });
 });
+
+var _InputLabel = require("./InputLabel");
+
+Object.keys(_InputLabel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InputLabel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _InputLabel[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

package/src/Form/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;;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;;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 './Button';\nexport * from './ButtonLink';\nexport * from './Checkbox';\nexport * from './CodeInput';\nexport * from './ErrorMessage';\nexport * from './Form';\nexport * from './Input';\nexport * from './InputBlock';\nexport * from './InputSubmitCombo';\nexport * from './RoundIconButton';\nexport * from './Select';\nexport * from './ShakeBox';\nexport * from './Switch';\nexport * from './TextArea';\nexport * from './Tooltip';\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;;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;;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 './Button';\nexport * from './ButtonLink';\nexport * from './Checkbox';\nexport * from './CodeInput';\nexport * from './ErrorMessage';\nexport * from './Form';\nexport * from './Input';\nexport * from './InputBlock';\nexport * from './InputSubmitCombo';\nexport * from './RoundIconButton';\nexport * from './Select';\nexport * from './ShakeBox';\nexport * from './Switch';\nexport * from './TextArea';\nexport * from './Tooltip';\nexport * from './InputLabel';\n"],"file":"index.js"}

package/src/Layout/Theme.js

@@ -17,6 +17,8 @@ var _react2 = _interopRequireDefault(require("react"));
 
 var _colors = require("../Identity/colors");
 
+var _colorsV = require("../Identity/colors-v2");
+
 var _util = require("../util");
 
 var _themes;
@@ -32,7 +34,7 @@ exports.THEME_ID = THEME_ID;
 var themes = (_themes = {}, (0, _defineProperty2["default"])(_themes, THEME_ID.LIGHT, {
   Input: {
     backgroundColor: _colors.COLOR.WHITE,
-    backgroundColorDisabled: _colors.COLOR.DISABLED,
+    backgroundColorDisabled: _colorsV.COLOR_V2.GRAY_20,
     placeholderColor: _colors.COLOR.GRAY_DARKEN_24
   },
   general: {

package/src/Layout/Theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Theme.tsx"],"names":["THEME_ID","themes","LIGHT","Input","backgroundColor","COLOR","WHITE","backgroundColorDisabled","DISABLED","placeholderColor","GRAY_DARKEN_24","general","GRAY_LIGHTEN_88","color","TEXT","DARK","BLACK_LIGHTEN_24","BLACK","filterThemeProps","props","ThemeProvider","themeId"],"mappings":";;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;;;IAEYA,Q;;;WAAAA,Q;AAAAA,EAAAA,Q;AAAAA,EAAAA,Q;GAAAA,Q,wBAAAA,Q;;AAiBL,IAAMC,MAAsC,4DAChDD,QAAQ,CAACE,KADuC,EAC/B;AAChBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,eAAe,EAAEC,cAAMC,KADlB;AAELC,IAAAA,uBAAuB,EAAEF,cAAMG,QAF1B;AAGLC,IAAAA,gBAAgB,EAAEJ,cAAMK;AAHnB,GADS;AAMhBC,EAAAA,OAAO,EAAE;AACPP,IAAAA,eAAe,EAAEC,cAAMO,eADhB;AAEPC,IAAAA,KAAK,EAAER,cAAMS;AAFN;AANO,CAD+B,6CAYhDd,QAAQ,CAACe,IAZuC,EAYhC;AACfZ,EAAAA,KAAK,EAAE;AACLC,IAAAA,eAAe,EAAEC,cAAMW,gBADlB;AAELT,IAAAA,uBAAuB,EAAEF,cAAMG,QAF1B;AAGLC,IAAAA,gBAAgB,EAAEJ,cAAMO;AAHnB,GADQ;AAMfD,EAAAA,OAAO,EAAE;AACPP,IAAAA,eAAe,EAAEC,cAAMY,KADhB;AAEPJ,IAAAA,KAAK,EAAER,cAAMC;AAFN;AANM,CAZgC,WAA5C;;;AA6BP,IAAMY,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD;AAAA,SAAuB,uBAAYA,KAAZ,EAAmB,CAAC,SAAD,CAAnB,CAAvB;AAAA,CAAzB;;AAEO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACD,KAAD;AAAA,SAC3B,gBAAC,oBAAD;AAAsB,IAAA,KAAK,EAAElB,MAAM,CAACkB,KAAK,CAACE,OAAP;AAAnC,KAAwDH,gBAAgB,CAACC,KAAD,CAAxE,EAD2B;AAAA,CAAtB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2019 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, ThemeProvider as EmotionThemeProvider} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity/colors';\nimport {filterProps} from '../util';\n\nexport enum THEME_ID {\n  DARK = 'THEME_DARK',\n  LIGHT = 'THEME_LIGHT',\n}\n\nexport interface Theme {\n  general: {\n    backgroundColor: string;\n    color: string;\n  };\n  Input: {\n    backgroundColor: string;\n    backgroundColorDisabled: string;\n    placeholderColor: string;\n  };\n}\n\nexport const themes: {[themeId in THEME_ID]: Theme} = {\n  [THEME_ID.LIGHT]: {\n    Input: {\n      backgroundColor: COLOR.WHITE,\n      backgroundColorDisabled: COLOR.DISABLED,\n      placeholderColor: COLOR.GRAY_DARKEN_24,\n    },\n    general: {\n      backgroundColor: COLOR.GRAY_LIGHTEN_88,\n      color: COLOR.TEXT,\n    },\n  },\n  [THEME_ID.DARK]: {\n    Input: {\n      backgroundColor: COLOR.BLACK_LIGHTEN_24,\n      backgroundColorDisabled: COLOR.DISABLED,\n      placeholderColor: COLOR.GRAY_LIGHTEN_88,\n    },\n    general: {\n      backgroundColor: COLOR.BLACK,\n      color: COLOR.WHITE,\n    },\n  },\n};\n\nexport interface ThemeProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  themeId: THEME_ID;\n}\n\nconst filterThemeProps = (props: ThemeProps) => filterProps(props, ['themeId']);\n\nexport const ThemeProvider = (props: ThemeProps) => (\n  <EmotionThemeProvider theme={themes[props.themeId]} {...filterThemeProps(props)} />\n);\n"],"file":"Theme.js"}
+{"version":3,"sources":["Theme.tsx"],"names":["THEME_ID","themes","LIGHT","Input","backgroundColor","COLOR","WHITE","backgroundColorDisabled","COLOR_V2","GRAY_20","placeholderColor","GRAY_DARKEN_24","general","GRAY_LIGHTEN_88","color","TEXT","DARK","BLACK_LIGHTEN_24","DISABLED","BLACK","filterThemeProps","props","ThemeProvider","themeId"],"mappings":";;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;AACA;;;;IAEYA,Q;;;WAAAA,Q;AAAAA,EAAAA,Q;AAAAA,EAAAA,Q;GAAAA,Q,wBAAAA,Q;;AAiBL,IAAMC,MAAsC,4DAChDD,QAAQ,CAACE,KADuC,EAC/B;AAChBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,eAAe,EAAEC,cAAMC,KADlB;AAELC,IAAAA,uBAAuB,EAAEC,kBAASC,OAF7B;AAGLC,IAAAA,gBAAgB,EAAEL,cAAMM;AAHnB,GADS;AAMhBC,EAAAA,OAAO,EAAE;AACPR,IAAAA,eAAe,EAAEC,cAAMQ,eADhB;AAEPC,IAAAA,KAAK,EAAET,cAAMU;AAFN;AANO,CAD+B,6CAYhDf,QAAQ,CAACgB,IAZuC,EAYhC;AACfb,EAAAA,KAAK,EAAE;AACLC,IAAAA,eAAe,EAAEC,cAAMY,gBADlB;AAELV,IAAAA,uBAAuB,EAAEF,cAAMa,QAF1B;AAGLR,IAAAA,gBAAgB,EAAEL,cAAMQ;AAHnB,GADQ;AAMfD,EAAAA,OAAO,EAAE;AACPR,IAAAA,eAAe,EAAEC,cAAMc,KADhB;AAEPL,IAAAA,KAAK,EAAET,cAAMC;AAFN;AANM,CAZgC,WAA5C;;;AA6BP,IAAMc,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD;AAAA,SAAuB,uBAAYA,KAAZ,EAAmB,CAAC,SAAD,CAAnB,CAAvB;AAAA,CAAzB;;AAEO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACD,KAAD;AAAA,SAC3B,gBAAC,oBAAD;AAAsB,IAAA,KAAK,EAAEpB,MAAM,CAACoB,KAAK,CAACE,OAAP;AAAnC,KAAwDH,gBAAgB,CAACC,KAAD,CAAxE,EAD2B;AAAA,CAAtB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2019 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, ThemeProvider as EmotionThemeProvider} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity/colors';\nimport {COLOR_V2} from '../Identity/colors-v2';\nimport {filterProps} from '../util';\n\nexport enum THEME_ID {\n  DARK = 'THEME_DARK',\n  LIGHT = 'THEME_LIGHT',\n}\n\nexport interface Theme {\n  general: {\n    backgroundColor: string;\n    color: string;\n  };\n  Input: {\n    backgroundColor: string;\n    backgroundColorDisabled: string;\n    placeholderColor: string;\n  };\n}\n\nexport const themes: {[themeId in THEME_ID]: Theme} = {\n  [THEME_ID.LIGHT]: {\n    Input: {\n      backgroundColor: COLOR.WHITE,\n      backgroundColorDisabled: COLOR_V2.GRAY_20,\n      placeholderColor: COLOR.GRAY_DARKEN_24,\n    },\n    general: {\n      backgroundColor: COLOR.GRAY_LIGHTEN_88,\n      color: COLOR.TEXT,\n    },\n  },\n  [THEME_ID.DARK]: {\n    Input: {\n      backgroundColor: COLOR.BLACK_LIGHTEN_24,\n      backgroundColorDisabled: COLOR.DISABLED,\n      placeholderColor: COLOR.GRAY_LIGHTEN_88,\n    },\n    general: {\n      backgroundColor: COLOR.BLACK,\n      color: COLOR.WHITE,\n    },\n  },\n};\n\nexport interface ThemeProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  themeId: THEME_ID;\n}\n\nconst filterThemeProps = (props: ThemeProps) => filterProps(props, ['themeId']);\n\nexport const ThemeProvider = (props: ThemeProps) => (\n  <EmotionThemeProvider theme={themes[props.themeId]} {...filterThemeProps(props)} />\n);\n"],"file":"Theme.js"}

package/src/Text/Label.md

@@ -4,7 +4,7 @@ Demo:
 import React from 'react';
 import {
   Container,
-  Label,
+  InputLabel,
   LabelLink,
   InputSubmitCombo,
   RoundIconButton,
@@ -16,48 +16,48 @@ import {
 } from '@wireapp/react-ui-kit';
 
 <Container>
-  <Label>Label</Label>
+  <InputLabel>InputLabel</InputLabel>
   <LabelLink block>LabelLink</LabelLink>
 
   <Line />
-  <Label>
+  <InputLabel>
     <div style={{marginLeft: '16px'}}>{"I'm a label!"}</div>
     <Input placeholder="Focus me!" />
-  </Label>
-  <Label markInvalid>
+  </InputLabel>
+  <InputLabel markInvalid>
     <div style={{marginLeft: '16px'}}>{'Uh error!'}</div>
     <Input placeholder="Error" markInvalid />
-  </Label>
+  </InputLabel>
 
-  <Label>
+  <InputLabel>
     <div style={{marginLeft: '16px'}}>{'TextArea!'}</div>
     <TextArea placeholder="Text" />
-  </Label>
+  </InputLabel>
 
-  <Label markInvalid>
+  <InputLabel markInvalid>
     <div style={{marginLeft: '16px'}}>{'Uh error!'}</div>
     <TextArea placeholder="Text" markInvalid />
-  </Label>
+  </InputLabel>
 
-  <Label>
+  <InputLabel>
     <div style={{marginLeft: '16px'}}>{'Select!'}</div>
     <Select>
       <option>a</option>
       <option>b</option>
       <option>c</option>
     </Select>
-  </Label>
+  </InputLabel>
 
-  <Label markInvalid>
+  <InputLabel markInvalid>
     <div style={{marginLeft: '16px'}}>{'Uh error!'}</div>
     <Select markInvalid>
       <option>a</option>
       <option>b</option>
       <option>c</option>
     </Select>
-  </Label>
+  </InputLabel>
 
-  <Label>
+  <InputLabel>
     <div style={{marginLeft: '16px'}}>{'SubmitCombo label'}</div>
     <InputSubmitCombo>
       <Input placeholder="Input submit Combo" name="password" />
@@ -65,9 +65,9 @@ import {
         <ArrowIcon />
       </RoundIconButton>
     </InputSubmitCombo>
-  </Label>
+  </InputLabel>
 
-  <Label markInvalid>
+  <InputLabel markInvalid>
     <div style={{marginLeft: '16px'}}>{'SubmitCombo label'}</div>
     <InputSubmitCombo markInvalid>
       <Input placeholder="Input submit Combo" name="password" />
@@ -75,6 +75,6 @@ import {
         <ArrowIcon />
       </RoundIconButton>
     </InputSubmitCombo>
-  </Label>
+  </InputLabel>
 </Container>;
 ```