@wireapp/react-ui-kit 8.1.0 → 8.4.0

package/src/Form/InputLabel.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+export interface InputLabelProps {
+    children: ReactNode | string;
+    htmlFor?: string;
+    markInvalid?: boolean;
+    isRequired?: boolean;
+}
+declare const InputLabel: FC<InputLabelProps>;
+export default InputLabel;

package/src/Form/InputLabel.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = require("@emotion/react");
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _Identity = require("../Identity");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _excluded = ["htmlFor", "markInvalid", "isRequired", "children"];
+
+var InputLabel = function InputLabel(_ref) {
+  var htmlFor = _ref.htmlFor,
+      markInvalid = _ref.markInvalid,
+      isRequired = _ref.isRequired,
+      children = _ref.children,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return (0, _react.jsx)("label", (0, _extends2["default"])({
+    htmlFor: htmlFor,
+    css: /*#__PURE__*/(0, _react.css)({
+      fontSize: '14px',
+      fontWeight: 400,
+      lineHeight: '16px',
+      color: markInvalid ? _Identity.COLOR_V2.RED_LIGHT_500 : _Identity.COLOR_V2.GRAY_80
+    }, process.env.NODE_ENV === "production" ? "" : ";label:InputLabel;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklucHV0TGFiZWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtDSSIsImZpbGUiOiJJbnB1dExhYmVsLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBXaXJlXG4gKiBDb3B5cmlnaHQgKEMpIDIwMjIgV2lyZSBTd2lzcyBHbWJIXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGZyZWUgc29mdHdhcmU6IHlvdSBjYW4gcmVkaXN0cmlidXRlIGl0IGFuZC9vciBtb2RpZnlcbiAqIGl0IHVuZGVyIHRoZSB0ZXJtcyBvZiB0aGUgR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgYXMgcHVibGlzaGVkIGJ5XG4gKiB0aGUgRnJlZSBTb2Z0d2FyZSBGb3VuZGF0aW9uLCBlaXRoZXIgdmVyc2lvbiAzIG9mIHRoZSBMaWNlbnNlLCBvclxuICogKGF0IHlvdXIgb3B0aW9uKSBhbnkgbGF0ZXIgdmVyc2lvbi5cbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZGlzdHJpYnV0ZWQgaW4gdGhlIGhvcGUgdGhhdCBpdCB3aWxsIGJlIHVzZWZ1bCxcbiAqIGJ1dCBXSVRIT1VUIEFOWSBXQVJSQU5UWTsgd2l0aG91dCBldmVuIHRoZSBpbXBsaWVkIHdhcnJhbnR5IG9mXG4gKiBNRVJDSEFOVEFCSUxJVFkgb3IgRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UuIFNlZSB0aGVcbiAqIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGZvciBtb3JlIGRldGFpbHMuXG4gKlxuICogWW91IHNob3VsZCBoYXZlIHJlY2VpdmVkIGEgY29weSBvZiB0aGUgR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2VcbiAqIGFsb25nIHdpdGggdGhpcyBwcm9ncmFtLiBJZiBub3QsIHNlZSBodHRwOi8vd3d3LmdudS5vcmcvbGljZW5zZXMvLlxuICpcbiAqL1xuXG4vKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7anN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQge0NPTE9SX1YyfSBmcm9tICcuLi9JZGVudGl0eSc7XG5pbXBvcnQgUmVhY3QsIHtGQywgUmVhY3ROb2RlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgSW5wdXRMYWJlbFByb3BzIHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZSB8IHN0cmluZztcbiAgaHRtbEZvcj86IHN0cmluZztcbiAgbWFya0ludmFsaWQ/OiBib29sZWFuO1xuICBpc1JlcXVpcmVkPzogYm9vbGVhbjtcbn1cblxuY29uc3QgSW5wdXRMYWJlbDogRkM8SW5wdXRMYWJlbFByb3BzPiA9ICh7aHRtbEZvciwgbWFya0ludmFsaWQsIGlzUmVxdWlyZWQsIGNoaWxkcmVuLCAuLi5wcm9wc30pID0+IChcbiAgPGxhYmVsXG4gICAgaHRtbEZvcj17aHRtbEZvcn1cbiAgICBjc3M9e3tcbiAgICAgIGZvbnRTaXplOiAnMTRweCcsXG4gICAgICBmb250V2VpZ2h0OiA0MDAsXG4gICAgICBsaW5lSGVpZ2h0OiAnMTZweCcsXG4gICAgICBjb2xvcjogbWFya0ludmFsaWQgPyBDT0xPUl9WMi5SRURfTElHSFRfNTAwIDogQ09MT1JfVjIuR1JBWV84MCxcbiAgICB9fVxuICAgIHsuLi5wcm9wc31cbiAgPlxuICAgIHtjaGlsZHJlbn1cblxuICAgIHtpc1JlcXVpcmVkICYmIDxzcGFuIGNzcz17e2ZvbnRTaXplOiAnMTZweCcsIG1hcmdpbkxlZnQ6ICc0cHgnLCBjb2xvcjogQ09MT1JfVjIuUkVEX0xJR0hUXzUwMH19Pio8L3NwYW4+fVxuICA8L2xhYmVsPlxuKTtcblxuZXhwb3J0IGRlZmF1bHQgSW5wdXRMYWJlbDtcbiJdfQ== */")
+  }, props), children, isRequired && (0, _react.jsx)("span", {
+    css: /*#__PURE__*/(0, _react.css)({
+      fontSize: '16px',
+      marginLeft: '4px',
+      color: _Identity.COLOR_V2.RED_LIGHT_500
+    }, process.env.NODE_ENV === "production" ? "" : ";label:InputLabel;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklucHV0TGFiZWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRDeUIiLCJmaWxlIjoiSW5wdXRMYWJlbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDIyIFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge2pzeH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHtDT0xPUl9WMn0gZnJvbSAnLi4vSWRlbnRpdHknO1xuaW1wb3J0IFJlYWN0LCB7RkMsIFJlYWN0Tm9kZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgaW50ZXJmYWNlIElucHV0TGFiZWxQcm9wcyB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGUgfCBzdHJpbmc7XG4gIGh0bWxGb3I/OiBzdHJpbmc7XG4gIG1hcmtJbnZhbGlkPzogYm9vbGVhbjtcbiAgaXNSZXF1aXJlZD86IGJvb2xlYW47XG59XG5cbmNvbnN0IElucHV0TGFiZWw6IEZDPElucHV0TGFiZWxQcm9wcz4gPSAoe2h0bWxGb3IsIG1hcmtJbnZhbGlkLCBpc1JlcXVpcmVkLCBjaGlsZHJlbiwgLi4ucHJvcHN9KSA9PiAoXG4gIDxsYWJlbFxuICAgIGh0bWxGb3I9e2h0bWxGb3J9XG4gICAgY3NzPXt7XG4gICAgICBmb250U2l6ZTogJzE0cHgnLFxuICAgICAgZm9udFdlaWdodDogNDAwLFxuICAgICAgbGluZUhlaWdodDogJzE2cHgnLFxuICAgICAgY29sb3I6IG1hcmtJbnZhbGlkID8gQ09MT1JfVjIuUkVEX0xJR0hUXzUwMCA6IENPTE9SX1YyLkdSQVlfODAsXG4gICAgfX1cbiAgICB7Li4ucHJvcHN9XG4gID5cbiAgICB7Y2hpbGRyZW59XG5cbiAgICB7aXNSZXF1aXJlZCAmJiA8c3BhbiBjc3M9e3tmb250U2l6ZTogJzE2cHgnLCBtYXJnaW5MZWZ0OiAnNHB4JywgY29sb3I6IENPTE9SX1YyLlJFRF9MSUdIVF81MDB9fT4qPC9zcGFuPn1cbiAgPC9sYWJlbD5cbik7XG5cbmV4cG9ydCBkZWZhdWx0IElucHV0TGFiZWw7XG4iXX0= */")
+  }, "*"));
+};
+
+var _default = InputLabel;
+exports["default"] = _default;
+//# sourceMappingURL=InputLabel.js.map

package/src/Form/InputLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InputLabel.tsx"],"names":["InputLabel","htmlFor","markInvalid","isRequired","children","props","fontSize","fontWeight","lineHeight","color","COLOR_V2","RED_LIGHT_500","GRAY_80","marginLeft"],"mappings":";;;;;;;;;;;AAoBA;;;;AACA;;AACA;;;;AASA,IAAMA,UAA+B,GAAG,SAAlCA,UAAkC;AAAA,MAAEC,OAAF,QAAEA,OAAF;AAAA,MAAWC,WAAX,QAAWA,WAAX;AAAA,MAAwBC,UAAxB,QAAwBA,UAAxB;AAAA,MAAoCC,QAApC,QAAoCA,QAApC;AAAA,MAAiDC,KAAjD;AAAA,SACtC;AACE,IAAA,OAAO,EAAEJ,OADX;AAEE,IAAA,GAAG,+BAAE;AACHK,MAAAA,QAAQ,EAAE,MADP;AAEHC,MAAAA,UAAU,EAAE,GAFT;AAGHC,MAAAA,UAAU,EAAE,MAHT;AAIHC,MAAAA,KAAK,EAAEP,WAAW,GAAGQ,mBAASC,aAAZ,GAA4BD,mBAASE;AAJpD,KAAF;AAFL,KAQMP,KARN,GAUGD,QAVH,EAYGD,UAAU,IAAI;AAAM,IAAA,GAAG,+BAAE;AAACG,MAAAA,QAAQ,EAAE,MAAX;AAAmBO,MAAAA,UAAU,EAAE,KAA/B;AAAsCJ,MAAAA,KAAK,EAAEC,mBAASC;AAAtD,KAAF;AAAT,SAZjB,CADsC;AAAA,CAAxC;;eAiBeX,U","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\n/** @jsx jsx */\nimport {jsx} from '@emotion/react';\nimport {COLOR_V2} from '../Identity';\nimport React, {FC, ReactNode} from 'react';\n\nexport interface InputLabelProps {\n  children: ReactNode | string;\n  htmlFor?: string;\n  markInvalid?: boolean;\n  isRequired?: boolean;\n}\n\nconst InputLabel: FC<InputLabelProps> = ({htmlFor, markInvalid, isRequired, children, ...props}) => (\n  <label\n    htmlFor={htmlFor}\n    css={{\n      fontSize: '14px',\n      fontWeight: 400,\n      lineHeight: '16px',\n      color: markInvalid ? COLOR_V2.RED_LIGHT_500 : COLOR_V2.GRAY_80,\n    }}\n    {...props}\n  >\n    {children}\n\n    {isRequired && <span css={{fontSize: '16px', marginLeft: '4px', color: COLOR_V2.RED_LIGHT_500}}>*</span>}\n  </label>\n);\n\nexport default InputLabel;\n"],"file":"InputLabel.js"}

package/src/Form/InputLabel.md

@@ -0,0 +1,33 @@
+Demo:
+
+```js
+import {Fragment} from 'react';
+import {Columns, Column} from '@wireapp/react-ui-kit';
+import InputLabel from './InputLabel';
+
+<Fragment>
+  <Columns>
+    <Column>InputLabel Default</Column>
+
+    <Column>
+      <InputLabel>InputLabel</InputLabel>
+    </Column>
+  </Columns>
+
+  <Columns>
+    <Column>InputLabel - Mandatory</Column>
+
+    <Column>
+      <InputLabel isRequired>InputLabel</InputLabel>
+    </Column>
+  </Columns>
+
+  <Columns>
+    <Column>InputLabel - Invalid</Column>
+
+    <Column>
+      <InputLabel markInvalid>InputLabel</InputLabel>
+    </Column>
+  </Columns>
+</Fragment>;
+```

package/src/Form/InputSubmitCombo.js

@@ -38,17 +38,18 @@ 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), {
+      }, (0, _defineProperty2["default"])(_objectSpread2, ".".concat(_Input.INPUT_GROUP), {
+        flexGrow: 1
+      }), (0, _defineProperty2["default"])(_objectSpread2, ".".concat(_Input.INPUT_CLASSNAME), {
         '&:focus, &:invalid:not(:focus)': {
           boxShadow: 'none'
         },
         boxShadow: 'none',
-        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_GROUP","flexGrow","INPUT_CLASSNAME","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,kBALF,GAKkB;AACnBC,QAAAA,QAAQ,EAAE;AADS,OALlB,+DAQEC,sBARF,GAQsB;AACvB,0CAAkC;AAChCL,UAAAA,SAAS,EAAE;AADqB,SADX;AAIvBA,QAAAA,SAAS,EAAE,MAJY;AAKvBM,QAAAA,MAAM,EAAE,WALe;AAMvBC,QAAAA,OAAO,EAAE;AANc,OARtB,kEAgBS,QAhBT,+DAiBM,MAjBN,8DAkBK,MAlBL,sEAmBa,eAnBb,oEAoBW,KApBX,mEAqBU,CArBV;AAAA;AAFP,KAyBMT,KAzBN,GA2BGD,QA3BH,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, INPUT_GROUP, 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_GROUP}`]: {\n        flexGrow: 1,\n      },\n      [`.${INPUT_CLASSNAME}`]: {\n        '&:focus, &:invalid:not(:focus)': {\n          boxShadow: 'none',\n        },\n        boxShadow: 'none',\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/Select.d.ts

@@ -2,9 +2,13 @@
 import { CSSObject, jsx } from '@emotion/react';
 import type { Theme } from '../Layout';
 import { InputProps } from './Input';
+import { ReactElement } from 'react';
 export interface SelectProps<T = HTMLSelectElement> extends InputProps<T> {
+    helperText?: string;
+    label?: string;
     disabled?: boolean;
     markInvalid?: boolean;
+    error?: ReactElement;
 }
-export declare const selectStyle: <T>(theme: Theme, props: SelectProps<T>) => CSSObject;
-export declare const Select: (props: SelectProps) => jsx.JSX.Element;
+export declare const selectStyle: <T>(theme: Theme, props: SelectProps<T>, error?: boolean) => CSSObject;
+export declare const Select: ({ label, children, error, helperText, ...props }: SelectProps) => jsx.JSX.Element;

package/src/Form/Select.js

@@ -9,26 +9,31 @@ exports.Select = exports.selectStyle = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _react = require("@emotion/react");
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = require("@emotion/react");
-
 var _Identity = require("../Identity");
 
 var _util = require("../util");
 
 var _Input = require("./Input");
 
-var _excluded = ["disabled", "markInvalid"];
+var _react2 = _interopRequireDefault(require("react"));
+
+var _InputLabel = _interopRequireDefault(require("./InputLabel"));
+
+var _excluded = ["disabled", "markInvalid"],
+    _excluded2 = ["label", "children", "error", "helperText"];
 
 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; }
 
 var ArrowDown = function ArrowDown(theme) {
-  return "\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\">\n    <path fill=\"".concat(theme.general.color, "\" fillRule=\"evenodd\" d=\"M0 2h8L4 7\" />\n  </svg>\n");
+  return "\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n        <path fill=\"".concat(theme.general.color, "\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.99963 12.5711L15.6565 4.91421L14.2423 3.5L7.99963 9.74264L1.75699 3.5L0.342773 4.91421L7.99963 12.5711Z\"/>\n    </svg>\n");
 };
 
 var selectStyle = function selectStyle(theme, _ref) {
@@ -36,21 +41,33 @@ var selectStyle = function selectStyle(theme, _ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       markInvalid = _ref.markInvalid,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var error = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return _objectSpread(_objectSpread({}, (0, _Input.inputStyle)(theme, props)), {}, {
     '&:-moz-focusring': {
       color: 'transparent',
       textShadow: '0 0 0 #000'
     },
     '&:disabled': {
-      color: _Identity.COLOR.GRAY
+      color: _Identity.COLOR_V2.GRAY
     },
     appearance: 'none',
-    background: disabled ? theme.Input.backgroundColorDisabled : "".concat(theme.Input.backgroundColor, " center right 16px no-repeat url(\"").concat((0, _util.inlineSVG)(ArrowDown(theme)), "\")"),
-    boxShadow: markInvalid ? "0 0 0 1px ".concat(_Identity.COLOR.RED) : "0 0 0 1px ".concat(_Identity.COLOR.GRAY),
+    background: disabled ? "".concat(theme.Input.backgroundColorDisabled, " center right 16px no-repeat url(\"").concat((0, _util.inlineSVG)(ArrowDown(theme)), "\")") : "".concat(theme.Input.backgroundColor, " center right 16px no-repeat url(\"").concat((0, _util.inlineSVG)(ArrowDown(theme)), "\")"),
+    boxShadow: markInvalid ? "0 0 0 1px ".concat(_Identity.COLOR_V2.RED) : "0 0 0 1px ".concat(_Identity.COLOR_V2.GRAY_40),
     cursor: disabled ? 'normal' : 'pointer',
     fontSize: '16px',
     fontWeight: 300,
-    paddingRight: '30px'
+    paddingRight: '30px',
+    marginBottom: error && '8px',
+    '&:invalid, option:first-of-type': {
+      color: _Identity.COLOR_V2.RED
+    }
+  }, !disabled && {
+    '&:hover': {
+      boxShadow: "0 0 0 1px ".concat(_Identity.COLOR_V2.GRAY_60)
+    },
+    '&:focus, &:active': {
+      boxShadow: "0 0 0 1px ".concat(_Identity.COLOR_V2.BLUE)
+    }
   });
 };
 
@@ -60,12 +77,40 @@ var filterSelectProps = function filterSelectProps(props) {
   return (0, _util.filterProps)(props, ['markInvalid']);
 };
 
-var Select = function Select(props) {
-  return (0, _react.jsx)("select", (0, _extends2["default"])({
+var Select = function Select(_ref2) {
+  var label = _ref2.label,
+      children = _ref2.children,
+      error = _ref2.error,
+      helperText = _ref2.helperText,
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+  var hasError = !!error;
+  return (0, _react.jsx)("div", {
+    css: /*#__PURE__*/(0, _react.css)({
+      marginBottom: props.markInvalid ? '2px' : '20px',
+      '&:focus-within label': {
+        color: _Identity.COLOR_V2.BLUE
+      }
+    }, process.env.NODE_ENV === "production" ? "" : ";label:Select;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNlbGVjdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUZNIiwiZmlsZSI6IlNlbGVjdC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDE4IFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge0NTU09iamVjdCwganN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7Q09MT1JfVjJ9IGZyb20gJy4uL0lkZW50aXR5JztcbmltcG9ydCB0eXBlIHtUaGVtZX0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB7ZmlsdGVyUHJvcHMsIGlubGluZVNWR30gZnJvbSAnLi4vdXRpbCc7XG5pbXBvcnQge0lucHV0UHJvcHMsIGlucHV0U3R5bGV9IGZyb20gJy4vSW5wdXQnO1xuaW1wb3J0IFJlYWN0LCB7UmVhY3RFbGVtZW50fSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgSW5wdXRMYWJlbCBmcm9tICcuL0lucHV0TGFiZWwnO1xuXG5leHBvcnQgaW50ZXJmYWNlIFNlbGVjdFByb3BzPFQgPSBIVE1MU2VsZWN0RWxlbWVudD4gZXh0ZW5kcyBJbnB1dFByb3BzPFQ+IHtcbiAgaGVscGVyVGV4dD86IHN0cmluZztcbiAgbGFiZWw/OiBzdHJpbmc7XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgbWFya0ludmFsaWQ/OiBib29sZWFuO1xuICBlcnJvcj86IFJlYWN0RWxlbWVudDtcbn1cblxuY29uc3QgQXJyb3dEb3duID0gKHRoZW1lOiBUaGVtZSkgPT4gYFxuICAgIDxzdmcgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiIHdpZHRoPVwiMTZcIiBoZWlnaHQ9XCIxNlwiIHZpZXdCb3g9XCIwIDAgMTYgMTZcIj5cbiAgICAgICAgPHBhdGggZmlsbD1cIiR7dGhlbWUuZ2VuZXJhbC5jb2xvcn1cIiBmaWxsLXJ1bGU9XCJldmVub2RkXCIgY2xpcC1ydWxlPVwiZXZlbm9kZFwiIGQ9XCJNNy45OTk2MyAxMi41NzExTDE1LjY1NjUgNC45MTQyMUwxNC4yNDIzIDMuNUw3Ljk5OTYzIDkuNzQyNjRMMS43NTY5OSAzLjVMMC4zNDI3NzMgNC45MTQyMUw3Ljk5OTYzIDEyLjU3MTFaXCIvPlxuICAgIDwvc3ZnPlxuYDtcbmV4cG9ydCBjb25zdCBzZWxlY3RTdHlsZTogPFQ+KHRoZW1lOiBUaGVtZSwgcHJvcHM6IFNlbGVjdFByb3BzPFQ+LCBlcnJvcj86IGJvb2xlYW4pID0+IENTU09iamVjdCA9IChcbiAgdGhlbWUsXG4gIHtkaXNhYmxlZCA9IGZhbHNlLCBtYXJrSW52YWxpZCwgLi4ucHJvcHN9LFxuICBlcnJvciA9IGZhbHNlLFxuKSA9PiAoe1xuICAuLi5pbnB1dFN0eWxlKHRoZW1lLCBwcm9wcyksXG4gICcmOi1tb3otZm9jdXNyaW5nJzoge1xuICAgIGNvbG9yOiAndHJhbnNwYXJlbnQnLFxuICAgIHRleHRTaGFkb3c6ICcwIDAgMCAjMDAwJyxcbiAgfSxcbiAgJyY6ZGlzYWJsZWQnOiB7XG4gICAgY29sb3I6IENPTE9SX1YyLkdSQVksXG4gIH0sXG4gIGFwcGVhcmFuY2U6ICdub25lJyxcbiAgYmFja2dyb3VuZDogZGlzYWJsZWRcbiAgICA/IGAke3RoZW1lLklucHV0LmJhY2tncm91bmRDb2xvckRpc2FibGVkfSBjZW50ZXIgcmlnaHQgMTZweCBuby1yZXBlYXQgdXJsKFwiJHtpbmxpbmVTVkcoQXJyb3dEb3duKHRoZW1lKSl9XCIpYFxuICAgIDogYCR7dGhlbWUuSW5wdXQuYmFja2dyb3VuZENvbG9yfSBjZW50ZXIgcmlnaHQgMTZweCBuby1yZXBlYXQgdXJsKFwiJHtpbmxpbmVTVkcoQXJyb3dEb3duKHRoZW1lKSl9XCIpYCxcbiAgYm94U2hhZG93OiBtYXJrSW52YWxpZCA/IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5SRUR9YCA6IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5HUkFZXzQwfWAsXG4gIGN1cnNvcjogZGlzYWJsZWQgPyAnbm9ybWFsJyA6ICdwb2ludGVyJyxcbiAgZm9udFNpemU6ICcxNnB4JyxcbiAgZm9udFdlaWdodDogMzAwLFxuICBwYWRkaW5nUmlnaHQ6ICczMHB4JyxcbiAgbWFyZ2luQm90dG9tOiBlcnJvciAmJiAnOHB4JyxcbiAgJyY6aW52YWxpZCwgb3B0aW9uOmZpcnN0LW9mLXR5cGUnOiB7XG4gICAgY29sb3I6IENPTE9SX1YyLlJFRCxcbiAgfSxcbiAgLi4uKCFkaXNhYmxlZCAmJiB7XG4gICAgJyY6aG92ZXInOiB7XG4gICAgICBib3hTaGFkb3c6IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5HUkFZXzYwfWAsXG4gICAgfSxcbiAgICAnJjpmb2N1cywgJjphY3RpdmUnOiB7XG4gICAgICBib3hTaGFkb3c6IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5CTFVFfWAsXG4gICAgfSxcbiAgfSksXG59KTtcblxuY29uc3QgZmlsdGVyU2VsZWN0UHJvcHMgPSAocHJvcHM6IFNlbGVjdFByb3BzKSA9PiBmaWx0ZXJQcm9wcyhwcm9wcywgWydtYXJrSW52YWxpZCddKTtcblxuZXhwb3J0IGNvbnN0IFNlbGVjdCA9ICh7bGFiZWwsIGNoaWxkcmVuLCBlcnJvciwgaGVscGVyVGV4dCwgLi4ucHJvcHN9OiBTZWxlY3RQcm9wcykgPT4ge1xuICBjb25zdCBoYXNFcnJvciA9ICEhZXJyb3I7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e3tcbiAgICAgICAgbWFyZ2luQm90dG9tOiBwcm9wcy5tYXJrSW52YWxpZCA/ICcycHgnIDogJzIwcHgnLFxuICAgICAgICAnJjpmb2N1cy13aXRoaW4gbGFiZWwnOiB7XG4gICAgICAgICAgY29sb3I6IENPTE9SX1YyLkJMVUUsXG4gICAgICAgIH0sXG4gICAgICB9fVxuICAgID5cbiAgICAgIHtsYWJlbCAmJiAoXG4gICAgICAgIDxJbnB1dExhYmVsIGh0bWxGb3I9e3Byb3BzLmlkfSBpc1JlcXVpcmVkPXtwcm9wcy5yZXF1aXJlZH0gbWFya0ludmFsaWQ9e3Byb3BzLm1hcmtJbnZhbGlkfT5cbiAgICAgICAgICB7bGFiZWx9XG4gICAgICAgIDwvSW5wdXRMYWJlbD5cbiAgICAgICl9XG5cbiAgICAgIDxzZWxlY3QgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiBzZWxlY3RTdHlsZSh0aGVtZSwgcHJvcHMsIGhhc0Vycm9yKX0gey4uLmZpbHRlclNlbGVjdFByb3BzKHByb3BzKX0+XG4gICAgICAgIDxvcHRpb24gZGlzYWJsZWQgc2VsZWN0ZWQgaGlkZGVuPlxuICAgICAgICAgIC0gUGxlYXNlIHNlbGVjdCAtXG4gICAgICAgIDwvb3B0aW9uPlxuXG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvc2VsZWN0PlxuXG4gICAgICB7IWhhc0Vycm9yICYmIGhlbHBlclRleHQgJiYgKFxuICAgICAgICA8cCBjc3M9e3tmb250U2l6ZTogJzEycHgnLCBmb250V2VpZ2h0OiA0MDAsIGNvbG9yOiBDT0xPUl9WMi5HUkFZXzgwLCBtYXJnaW5Ub3A6IDh9fT57aGVscGVyVGV4dH08L3A+XG4gICAgICApfVxuXG4gICAgICB7ZXJyb3J9XG4gICAgPC9kaXY+XG4gICk7XG59O1xuIl19 */")
+  }, label && (0, _react.jsx)(_InputLabel["default"], {
+    htmlFor: props.id,
+    isRequired: props.required,
+    markInvalid: props.markInvalid
+  }, label), (0, _react.jsx)("select", (0, _extends2["default"])({
     css: function css(theme) {
-      return selectStyle(theme, props);
+      return selectStyle(theme, props, hasError);
     }
-  }, filterSelectProps(props)));
+  }, filterSelectProps(props)), (0, _react.jsx)("option", {
+    disabled: true,
+    selected: true,
+    hidden: true
+  }, "- Please select -"), children), !hasError && helperText && (0, _react.jsx)("p", {
+    css: /*#__PURE__*/(0, _react.css)({
+      fontSize: '12px',
+      fontWeight: 400,
+      color: _Identity.COLOR_V2.GRAY_80,
+      marginTop: 8
+    }, process.env.NODE_ENV === "production" ? "" : ";label:Select;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNlbGVjdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkdXIiwiZmlsZSI6IlNlbGVjdC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDE4IFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge0NTU09iamVjdCwganN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7Q09MT1JfVjJ9IGZyb20gJy4uL0lkZW50aXR5JztcbmltcG9ydCB0eXBlIHtUaGVtZX0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB7ZmlsdGVyUHJvcHMsIGlubGluZVNWR30gZnJvbSAnLi4vdXRpbCc7XG5pbXBvcnQge0lucHV0UHJvcHMsIGlucHV0U3R5bGV9IGZyb20gJy4vSW5wdXQnO1xuaW1wb3J0IFJlYWN0LCB7UmVhY3RFbGVtZW50fSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgSW5wdXRMYWJlbCBmcm9tICcuL0lucHV0TGFiZWwnO1xuXG5leHBvcnQgaW50ZXJmYWNlIFNlbGVjdFByb3BzPFQgPSBIVE1MU2VsZWN0RWxlbWVudD4gZXh0ZW5kcyBJbnB1dFByb3BzPFQ+IHtcbiAgaGVscGVyVGV4dD86IHN0cmluZztcbiAgbGFiZWw/OiBzdHJpbmc7XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgbWFya0ludmFsaWQ/OiBib29sZWFuO1xuICBlcnJvcj86IFJlYWN0RWxlbWVudDtcbn1cblxuY29uc3QgQXJyb3dEb3duID0gKHRoZW1lOiBUaGVtZSkgPT4gYFxuICAgIDxzdmcgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiIHdpZHRoPVwiMTZcIiBoZWlnaHQ9XCIxNlwiIHZpZXdCb3g9XCIwIDAgMTYgMTZcIj5cbiAgICAgICAgPHBhdGggZmlsbD1cIiR7dGhlbWUuZ2VuZXJhbC5jb2xvcn1cIiBmaWxsLXJ1bGU9XCJldmVub2RkXCIgY2xpcC1ydWxlPVwiZXZlbm9kZFwiIGQ9XCJNNy45OTk2MyAxMi41NzExTDE1LjY1NjUgNC45MTQyMUwxNC4yNDIzIDMuNUw3Ljk5OTYzIDkuNzQyNjRMMS43NTY5OSAzLjVMMC4zNDI3NzMgNC45MTQyMUw3Ljk5OTYzIDEyLjU3MTFaXCIvPlxuICAgIDwvc3ZnPlxuYDtcbmV4cG9ydCBjb25zdCBzZWxlY3RTdHlsZTogPFQ+KHRoZW1lOiBUaGVtZSwgcHJvcHM6IFNlbGVjdFByb3BzPFQ+LCBlcnJvcj86IGJvb2xlYW4pID0+IENTU09iamVjdCA9IChcbiAgdGhlbWUsXG4gIHtkaXNhYmxlZCA9IGZhbHNlLCBtYXJrSW52YWxpZCwgLi4ucHJvcHN9LFxuICBlcnJvciA9IGZhbHNlLFxuKSA9PiAoe1xuICAuLi5pbnB1dFN0eWxlKHRoZW1lLCBwcm9wcyksXG4gICcmOi1tb3otZm9jdXNyaW5nJzoge1xuICAgIGNvbG9yOiAndHJhbnNwYXJlbnQnLFxuICAgIHRleHRTaGFkb3c6ICcwIDAgMCAjMDAwJyxcbiAgfSxcbiAgJyY6ZGlzYWJsZWQnOiB7XG4gICAgY29sb3I6IENPTE9SX1YyLkdSQVksXG4gIH0sXG4gIGFwcGVhcmFuY2U6ICdub25lJyxcbiAgYmFja2dyb3VuZDogZGlzYWJsZWRcbiAgICA/IGAke3RoZW1lLklucHV0LmJhY2tncm91bmRDb2xvckRpc2FibGVkfSBjZW50ZXIgcmlnaHQgMTZweCBuby1yZXBlYXQgdXJsKFwiJHtpbmxpbmVTVkcoQXJyb3dEb3duKHRoZW1lKSl9XCIpYFxuICAgIDogYCR7dGhlbWUuSW5wdXQuYmFja2dyb3VuZENvbG9yfSBjZW50ZXIgcmlnaHQgMTZweCBuby1yZXBlYXQgdXJsKFwiJHtpbmxpbmVTVkcoQXJyb3dEb3duKHRoZW1lKSl9XCIpYCxcbiAgYm94U2hhZG93OiBtYXJrSW52YWxpZCA/IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5SRUR9YCA6IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5HUkFZXzQwfWAsXG4gIGN1cnNvcjogZGlzYWJsZWQgPyAnbm9ybWFsJyA6ICdwb2ludGVyJyxcbiAgZm9udFNpemU6ICcxNnB4JyxcbiAgZm9udFdlaWdodDogMzAwLFxuICBwYWRkaW5nUmlnaHQ6ICczMHB4JyxcbiAgbWFyZ2luQm90dG9tOiBlcnJvciAmJiAnOHB4JyxcbiAgJyY6aW52YWxpZCwgb3B0aW9uOmZpcnN0LW9mLXR5cGUnOiB7XG4gICAgY29sb3I6IENPTE9SX1YyLlJFRCxcbiAgfSxcbiAgLi4uKCFkaXNhYmxlZCAmJiB7XG4gICAgJyY6aG92ZXInOiB7XG4gICAgICBib3hTaGFkb3c6IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5HUkFZXzYwfWAsXG4gICAgfSxcbiAgICAnJjpmb2N1cywgJjphY3RpdmUnOiB7XG4gICAgICBib3hTaGFkb3c6IGAwIDAgMCAxcHggJHtDT0xPUl9WMi5CTFVFfWAsXG4gICAgfSxcbiAgfSksXG59KTtcblxuY29uc3QgZmlsdGVyU2VsZWN0UHJvcHMgPSAocHJvcHM6IFNlbGVjdFByb3BzKSA9PiBmaWx0ZXJQcm9wcyhwcm9wcywgWydtYXJrSW52YWxpZCddKTtcblxuZXhwb3J0IGNvbnN0IFNlbGVjdCA9ICh7bGFiZWwsIGNoaWxkcmVuLCBlcnJvciwgaGVscGVyVGV4dCwgLi4ucHJvcHN9OiBTZWxlY3RQcm9wcykgPT4ge1xuICBjb25zdCBoYXNFcnJvciA9ICEhZXJyb3I7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e3tcbiAgICAgICAgbWFyZ2luQm90dG9tOiBwcm9wcy5tYXJrSW52YWxpZCA/ICcycHgnIDogJzIwcHgnLFxuICAgICAgICAnJjpmb2N1cy13aXRoaW4gbGFiZWwnOiB7XG4gICAgICAgICAgY29sb3I6IENPTE9SX1YyLkJMVUUsXG4gICAgICAgIH0sXG4gICAgICB9fVxuICAgID5cbiAgICAgIHtsYWJlbCAmJiAoXG4gICAgICAgIDxJbnB1dExhYmVsIGh0bWxGb3I9e3Byb3BzLmlkfSBpc1JlcXVpcmVkPXtwcm9wcy5yZXF1aXJlZH0gbWFya0ludmFsaWQ9e3Byb3BzLm1hcmtJbnZhbGlkfT5cbiAgICAgICAgICB7bGFiZWx9XG4gICAgICAgIDwvSW5wdXRMYWJlbD5cbiAgICAgICl9XG5cbiAgICAgIDxzZWxlY3QgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiBzZWxlY3RTdHlsZSh0aGVtZSwgcHJvcHMsIGhhc0Vycm9yKX0gey4uLmZpbHRlclNlbGVjdFByb3BzKHByb3BzKX0+XG4gICAgICAgIDxvcHRpb24gZGlzYWJsZWQgc2VsZWN0ZWQgaGlkZGVuPlxuICAgICAgICAgIC0gUGxlYXNlIHNlbGVjdCAtXG4gICAgICAgIDwvb3B0aW9uPlxuXG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvc2VsZWN0PlxuXG4gICAgICB7IWhhc0Vycm9yICYmIGhlbHBlclRleHQgJiYgKFxuICAgICAgICA8cCBjc3M9e3tmb250U2l6ZTogJzEycHgnLCBmb250V2VpZ2h0OiA0MDAsIGNvbG9yOiBDT0xPUl9WMi5HUkFZXzgwLCBtYXJnaW5Ub3A6IDh9fT57aGVscGVyVGV4dH08L3A+XG4gICAgICApfVxuXG4gICAgICB7ZXJyb3J9XG4gICAgPC9kaXY+XG4gICk7XG59O1xuIl19 */")
+  }, helperText), error);
 };
 
 exports.Select = Select;

package/src/Form/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Select.tsx"],"names":["ArrowDown","theme","general","color","selectStyle","disabled","markInvalid","props","textShadow","COLOR","GRAY","appearance","background","Input","backgroundColorDisabled","backgroundColor","boxShadow","RED","cursor","fontSize","fontWeight","paddingRight","filterSelectProps","Select"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AAEA;;AACA;;;;;;;;AAOA,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,KAAD;AAAA,iIAEAA,KAAK,CAACC,OAAN,CAAcC,KAFd;AAAA,CAAlB;;AAMO,IAAMC,WAAkE,GAAG,SAArEA,WAAqE,CAChFH,KADgF;AAAA,2BAE/EI,QAF+E;AAAA,MAE/EA,QAF+E,8BAEpE,KAFoE;AAAA,MAE7DC,WAF6D,QAE7DA,WAF6D;AAAA,MAE7CC,KAF6C;AAAA,yCAI7E,uBAAWN,KAAX,EAAkBM,KAAlB,CAJ6E;AAKhF,wBAAoB;AAClBJ,MAAAA,KAAK,EAAE,aADW;AAElBK,MAAAA,UAAU,EAAE;AAFM,KAL4D;AAShF,kBAAc;AACZL,MAAAA,KAAK,EAAEM,gBAAMC;AADD,KATkE;AAYhFC,IAAAA,UAAU,EAAE,MAZoE;AAahFC,IAAAA,UAAU,EAAEP,QAAQ,GAChBJ,KAAK,CAACY,KAAN,CAAYC,uBADI,aAEbb,KAAK,CAACY,KAAN,CAAYE,eAFC,gDAEmD,qBAAUf,SAAS,CAACC,KAAD,CAAnB,CAFnD,QAb4D;AAgBhFe,IAAAA,SAAS,EAAEV,WAAW,uBAAgBG,gBAAMQ,GAAtB,wBAA2CR,gBAAMC,IAAjD,CAhB0D;AAiBhFQ,IAAAA,MAAM,EAAEb,QAAQ,GAAG,QAAH,GAAc,SAjBkD;AAkBhFc,IAAAA,QAAQ,EAAE,MAlBsE;AAmBhFC,IAAAA,UAAU,EAAE,GAnBoE;AAoBhFC,IAAAA,YAAY,EAAE;AApBkE;AAAA,CAA3E;;;;AAuBP,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACf,KAAD;AAAA,SAAwB,uBAAYA,KAAZ,EAAmB,CAAC,aAAD,CAAnB,CAAxB;AAAA,CAA1B;;AAEO,IAAMgB,MAAM,GAAG,SAATA,MAAS,CAAChB,KAAD;AAAA,SACpB;AAAQ,IAAA,GAAG,EAAE,aAACN,KAAD;AAAA,aAAkBG,WAAW,CAACH,KAAD,EAAQM,KAAR,CAA7B;AAAA;AAAb,KAA8De,iBAAiB,CAACf,KAAD,CAA/E,EADoB;AAAA,CAAf","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 {COLOR} from '../Identity';\nimport type {Theme} from '../Layout';\nimport {filterProps, inlineSVG} from '../util';\nimport {InputProps, inputStyle} from './Input';\n\nexport interface SelectProps<T = HTMLSelectElement> extends InputProps<T> {\n  disabled?: boolean;\n  markInvalid?: boolean;\n}\n\nconst ArrowDown = (theme: Theme) => `\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\">\n    <path fill=\"${theme.general.color}\" fillRule=\"evenodd\" d=\"M0 2h8L4 7\" />\n  </svg>\n`;\n\nexport const selectStyle: <T>(theme: Theme, props: SelectProps<T>) => CSSObject = (\n  theme,\n  {disabled = false, markInvalid, ...props},\n) => ({\n  ...inputStyle(theme, props),\n  '&:-moz-focusring': {\n    color: 'transparent',\n    textShadow: '0 0 0 #000',\n  },\n  '&:disabled': {\n    color: COLOR.GRAY,\n  },\n  appearance: 'none',\n  background: disabled\n    ? theme.Input.backgroundColorDisabled\n    : `${theme.Input.backgroundColor} center right 16px no-repeat url(\"${inlineSVG(ArrowDown(theme))}\")`,\n  boxShadow: markInvalid ? `0 0 0 1px ${COLOR.RED}` : `0 0 0 1px ${COLOR.GRAY}`,\n  cursor: disabled ? 'normal' : 'pointer',\n  fontSize: '16px',\n  fontWeight: 300,\n  paddingRight: '30px',\n});\n\nconst filterSelectProps = (props: SelectProps) => filterProps(props, ['markInvalid']);\n\nexport const Select = (props: SelectProps) => (\n  <select css={(theme: Theme) => selectStyle(theme, props)} {...filterSelectProps(props)} />\n);\n"],"file":"Select.js"}
+{"version":3,"sources":["Select.tsx"],"names":["ArrowDown","theme","general","color","selectStyle","disabled","markInvalid","props","error","textShadow","COLOR_V2","GRAY","appearance","background","Input","backgroundColorDisabled","backgroundColor","boxShadow","RED","GRAY_40","cursor","fontSize","fontWeight","paddingRight","marginBottom","GRAY_60","BLUE","filterSelectProps","Select","label","children","helperText","hasError","id","required","GRAY_80","marginTop"],"mappings":";;;;;;;;;;;AAoBA;;;;;;AAEA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;AAUA,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,KAAD;AAAA,2IAEIA,KAAK,CAACC,OAAN,CAAcC,KAFlB;AAAA,CAAlB;;AAKO,IAAMC,WAAmF,GAAG,SAAtFA,WAAsF,CACjGH,KADiG;AAAA,2BAEhGI,QAFgG;AAAA,MAEhGA,QAFgG,8BAErF,KAFqF;AAAA,MAE9EC,WAF8E,QAE9EA,WAF8E;AAAA,MAE9DC,KAF8D;AAAA,MAGjGC,KAHiG,uEAGzF,KAHyF;AAAA,yCAK9F,uBAAWP,KAAX,EAAkBM,KAAlB,CAL8F;AAMjG,wBAAoB;AAClBJ,MAAAA,KAAK,EAAE,aADW;AAElBM,MAAAA,UAAU,EAAE;AAFM,KAN6E;AAUjG,kBAAc;AACZN,MAAAA,KAAK,EAAEO,mBAASC;AADJ,KAVmF;AAajGC,IAAAA,UAAU,EAAE,MAbqF;AAcjGC,IAAAA,UAAU,EAAER,QAAQ,aACbJ,KAAK,CAACa,KAAN,CAAYC,uBADC,gDAC2D,qBAAUf,SAAS,CAACC,KAAD,CAAnB,CAD3D,qBAEbA,KAAK,CAACa,KAAN,CAAYE,eAFC,gDAEmD,qBAAUhB,SAAS,CAACC,KAAD,CAAnB,CAFnD,QAd6E;AAiBjGgB,IAAAA,SAAS,EAAEX,WAAW,uBAAgBI,mBAASQ,GAAzB,wBAA8CR,mBAASS,OAAvD,CAjB2E;AAkBjGC,IAAAA,MAAM,EAAEf,QAAQ,GAAG,QAAH,GAAc,SAlBmE;AAmBjGgB,IAAAA,QAAQ,EAAE,MAnBuF;AAoBjGC,IAAAA,UAAU,EAAE,GApBqF;AAqBjGC,IAAAA,YAAY,EAAE,MArBmF;AAsBjGC,IAAAA,YAAY,EAAEhB,KAAK,IAAI,KAtB0E;AAuBjG,uCAAmC;AACjCL,MAAAA,KAAK,EAAEO,mBAASQ;AADiB;AAvB8D,KA0B7F,CAACb,QAAD,IAAa;AACf,eAAW;AACTY,MAAAA,SAAS,sBAAeP,mBAASe,OAAxB;AADA,KADI;AAIf,yBAAqB;AACnBR,MAAAA,SAAS,sBAAeP,mBAASgB,IAAxB;AADU;AAJN,GA1BgF;AAAA,CAA5F;;;;AAoCP,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACpB,KAAD;AAAA,SAAwB,uBAAYA,KAAZ,EAAmB,CAAC,aAAD,CAAnB,CAAxB;AAAA,CAA1B;;AAEO,IAAMqB,MAAM,GAAG,SAATA,MAAS,QAAiE;AAAA,MAA/DC,KAA+D,SAA/DA,KAA+D;AAAA,MAAxDC,QAAwD,SAAxDA,QAAwD;AAAA,MAA9CtB,KAA8C,SAA9CA,KAA8C;AAAA,MAAvCuB,UAAuC,SAAvCA,UAAuC;AAAA,MAAxBxB,KAAwB;AACrF,MAAMyB,QAAQ,GAAG,CAAC,CAACxB,KAAnB;AAEA,SACE;AACE,IAAA,GAAG,+BAAE;AACHgB,MAAAA,YAAY,EAAEjB,KAAK,CAACD,WAAN,GAAoB,KAApB,GAA4B,MADvC;AAEH,8BAAwB;AACtBH,QAAAA,KAAK,EAAEO,mBAASgB;AADM;AAFrB,KAAF;AADL,KAQGG,KAAK,IACJ,gBAAC,sBAAD;AAAY,IAAA,OAAO,EAAEtB,KAAK,CAAC0B,EAA3B;AAA+B,IAAA,UAAU,EAAE1B,KAAK,CAAC2B,QAAjD;AAA2D,IAAA,WAAW,EAAE3B,KAAK,CAACD;AAA9E,KACGuB,KADH,CATJ,EAcE;AAAQ,IAAA,GAAG,EAAE,aAAC5B,KAAD;AAAA,aAAkBG,WAAW,CAACH,KAAD,EAAQM,KAAR,EAAeyB,QAAf,CAA7B;AAAA;AAAb,KAAwEL,iBAAiB,CAACpB,KAAD,CAAzF,GACE;AAAQ,IAAA,QAAQ,MAAhB;AAAiB,IAAA,QAAQ,MAAzB;AAA0B,IAAA,MAAM;AAAhC,yBADF,EAKGuB,QALH,CAdF,EAsBG,CAACE,QAAD,IAAaD,UAAb,IACC;AAAG,IAAA,GAAG,+BAAE;AAACV,MAAAA,QAAQ,EAAE,MAAX;AAAmBC,MAAAA,UAAU,EAAE,GAA/B;AAAoCnB,MAAAA,KAAK,EAAEO,mBAASyB,OAApD;AAA6DC,MAAAA,SAAS,EAAE;AAAxE,KAAF;AAAN,KAAqFL,UAArF,CAvBJ,EA0BGvB,KA1BH,CADF;AA8BD,CAjCM","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 {COLOR_V2} from '../Identity';\nimport type {Theme} from '../Layout';\nimport {filterProps, inlineSVG} from '../util';\nimport {InputProps, inputStyle} from './Input';\nimport React, {ReactElement} from 'react';\nimport InputLabel from './InputLabel';\n\nexport interface SelectProps<T = HTMLSelectElement> extends InputProps<T> {\n  helperText?: string;\n  label?: string;\n  disabled?: boolean;\n  markInvalid?: boolean;\n  error?: ReactElement;\n}\n\nconst ArrowDown = (theme: Theme) => `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n        <path fill=\"${theme.general.color}\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.99963 12.5711L15.6565 4.91421L14.2423 3.5L7.99963 9.74264L1.75699 3.5L0.342773 4.91421L7.99963 12.5711Z\"/>\n    </svg>\n`;\nexport const selectStyle: <T>(theme: Theme, props: SelectProps<T>, error?: boolean) => CSSObject = (\n  theme,\n  {disabled = false, markInvalid, ...props},\n  error = false,\n) => ({\n  ...inputStyle(theme, props),\n  '&:-moz-focusring': {\n    color: 'transparent',\n    textShadow: '0 0 0 #000',\n  },\n  '&:disabled': {\n    color: COLOR_V2.GRAY,\n  },\n  appearance: 'none',\n  background: disabled\n    ? `${theme.Input.backgroundColorDisabled} center right 16px no-repeat url(\"${inlineSVG(ArrowDown(theme))}\")`\n    : `${theme.Input.backgroundColor} center right 16px no-repeat url(\"${inlineSVG(ArrowDown(theme))}\")`,\n  boxShadow: markInvalid ? `0 0 0 1px ${COLOR_V2.RED}` : `0 0 0 1px ${COLOR_V2.GRAY_40}`,\n  cursor: disabled ? 'normal' : 'pointer',\n  fontSize: '16px',\n  fontWeight: 300,\n  paddingRight: '30px',\n  marginBottom: error && '8px',\n  '&:invalid, option:first-of-type': {\n    color: COLOR_V2.RED,\n  },\n  ...(!disabled && {\n    '&:hover': {\n      boxShadow: `0 0 0 1px ${COLOR_V2.GRAY_60}`,\n    },\n    '&:focus, &:active': {\n      boxShadow: `0 0 0 1px ${COLOR_V2.BLUE}`,\n    },\n  }),\n});\n\nconst filterSelectProps = (props: SelectProps) => filterProps(props, ['markInvalid']);\n\nexport const Select = ({label, children, error, helperText, ...props}: SelectProps) => {\n  const hasError = !!error;\n\n  return (\n    <div\n      css={{\n        marginBottom: props.markInvalid ? '2px' : '20px',\n        '&:focus-within label': {\n          color: COLOR_V2.BLUE,\n        },\n      }}\n    >\n      {label && (\n        <InputLabel htmlFor={props.id} isRequired={props.required} markInvalid={props.markInvalid}>\n          {label}\n        </InputLabel>\n      )}\n\n      <select css={(theme: Theme) => selectStyle(theme, props, hasError)} {...filterSelectProps(props)}>\n        <option disabled selected hidden>\n          - Please select -\n        </option>\n\n        {children}\n      </select>\n\n      {!hasError && helperText && (\n        <p css={{fontSize: '12px', fontWeight: 400, color: COLOR_V2.GRAY_80, marginTop: 8}}>{helperText}</p>\n      )}\n\n      {error}\n    </div>\n  );\n};\n"],"file":"Select.js"}

package/src/Form/Select.md

@@ -2,13 +2,14 @@ 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';
 
 <Fragment>
   <Columns>
     <Column>Select</Column>
+
     <Column>
-      <Select>
+      <Select label="Select" id="firstSelect">
         <option>a</option>
         <option>b</option>
         <option>c</option>
@@ -16,18 +17,38 @@ import {Columns, Column, Select} from '@wireapp/react-ui-kit';
       </Select>
     </Column>
   </Columns>
+
   <Columns>
     <Column>Disabled Select</Column>
+
     <Column>
-      <Select disabled>
+      <Select disabled label="Disabled select" id="disabledSelect">
         <option>a</option>
       </Select>
     </Column>
   </Columns>
+
+  <Columns>
+    <Column>Required Select</Column>
+
+    <Column>
+      <Select label="Required select" required id="requiredSelect">
+        <option>a</option>
+      </Select>
+    </Column>
+  </Columns>
+
   <Columns>
     <Column>Invalid Select</Column>
+
     <Column>
-      <Select markInvalid>
+      <Select
+        markInvalid
+        label="InputLabel"
+        id="invalidSelect"
+        required
+        error={<ErrorMessage>Error message</ErrorMessage>}
+      >
         <option>a</option>
       </Select>
     </Column>

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/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/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: 11
   }, 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={11} {...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.ts

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

package/src/Identity/colors-v2.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.COLOR = exports.BASE_DARK_COLOR = exports.BASE_LIGHT_COLOR = void 0;
+exports.COLOR_V2 = exports.BASE_DARK_COLOR = exports.BASE_LIGHT_COLOR = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -212,10 +212,10 @@ var GRAYS = {
   GRAY_100: '#17181a'
 };
 
-var COLOR = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, BASE_DARK_COLOR), BASE_LIGHT_COLOR), DARK), LIGHT), GRAYS), {}, {
+var COLOR_V2 = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, BASE_DARK_COLOR), BASE_LIGHT_COLOR), DARK), LIGHT), GRAYS), {}, {
   BLACK: '#000',
   WHITE: '#fff'
 });
 
-exports.COLOR = COLOR;
+exports.COLOR_V2 = COLOR_V2;
 //# sourceMappingURL=colors-v2.js.map