@wireapp/react-ui-kit 8.2.0 → 8.5.0

package/src/Form/InputBlock.js

@@ -42,15 +42,19 @@ var _InputSubmitCombo = require("./InputSubmitCombo");
 
 /** @jsx jsx */
 var inputBlockStyle = function inputBlockStyle(props) {
-  return (0, _defineProperty2["default"])({
+  var _ref;
+
+  return _ref = {
     backgroundColor: _Identity.COLOR.GRAY_LIGHTEN_88,
     borderRadius: '4px',
     boxShadow: "inset 16px 16px 0 ".concat(_Identity.COLOR.WHITE, ", inset -16px -16px 0 ").concat(_Identity.COLOR.WHITE),
     marginBottom: '16px'
-  }, ".".concat(_Input.INPUT_CLASSNAME, ", .").concat(_InputSubmitCombo.INPUT_SUBMIT_COMBO_CLASSNAME), {
+  }, (0, _defineProperty2["default"])(_ref, ".".concat(_Input.INPUT_CLASSNAME, ", .").concat(_InputSubmitCombo.INPUT_SUBMIT_COMBO_CLASSNAME), {
     marginBottom: '1px !important',
     marginTop: '0 !important'
-  });
+  }), (0, _defineProperty2["default"])(_ref, ".".concat(_Input.INPUT_GROUP), {
+    marginBottom: 0
+  }), _ref;
 };
 
 var InputBlock = function InputBlock(props) {

package/src/Form/InputBlock.js.map

@@ -1 +1 @@
-{"version":3,"sources":["InputBlock.tsx"],"names":["inputBlockStyle","props","backgroundColor","COLOR","GRAY_LIGHTEN_88","borderRadius","boxShadow","WHITE","marginBottom","INPUT_CLASSNAME","INPUT_SUBMIT_COMBO_CLASSNAME","marginTop","InputBlock"],"mappings":";;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;AACA;;AAzBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAUA,IAAMA,eAAsD,GAAG,SAAzDA,eAAyD,CAAAC,KAAK;AAAA;AAClEC,IAAAA,eAAe,EAAEC,gBAAMC,eAD2C;AAElEC,IAAAA,YAAY,EAAE,KAFoD;AAGlEC,IAAAA,SAAS,8BAAuBH,gBAAMI,KAA7B,mCAA2DJ,gBAAMI,KAAjE,CAHyD;AAIlEC,IAAAA,YAAY,EAAE;AAJoD,gBAK7DC,sBAL6D,gBAKxCC,8CALwC,GAKP;AACzDF,IAAAA,YAAY,EAAE,gBAD2C;AAEzDG,IAAAA,SAAS,EAAE;AAF8C,GALO;AAAA,CAApE;;AAWO,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAACX,KAAD;AAAA,SAA4B;AAAK,IAAA,GAAG,EAAED,eAAe,CAACC,KAAD;AAAzB,KAAsCA,KAAtC,EAA5B;AAAA,CAAnB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport React from 'react';\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {COLOR} from '../Identity';\nimport {INPUT_CLASSNAME} from './Input';\nimport {INPUT_SUBMIT_COMBO_CLASSNAME} from './InputSubmitCombo';\n\nexport type InputBlockProps<T = HTMLDivElement> = React.HTMLProps<T>;\n\nconst inputBlockStyle: (props: InputBlockProps) => CSSObject = props => ({\n  backgroundColor: COLOR.GRAY_LIGHTEN_88,\n  borderRadius: '4px',\n  boxShadow: `inset 16px 16px 0 ${COLOR.WHITE}, inset -16px -16px 0 ${COLOR.WHITE}`,\n  marginBottom: '16px',\n  [`.${INPUT_CLASSNAME}, .${INPUT_SUBMIT_COMBO_CLASSNAME}`]: {\n    marginBottom: '1px !important',\n    marginTop: '0 !important',\n  },\n});\n\nexport const InputBlock = (props: InputBlockProps) => <div css={inputBlockStyle(props)} {...props} />;\n"],"file":"InputBlock.js"}
+{"version":3,"sources":["InputBlock.tsx"],"names":["inputBlockStyle","props","backgroundColor","COLOR","GRAY_LIGHTEN_88","borderRadius","boxShadow","WHITE","marginBottom","INPUT_CLASSNAME","INPUT_SUBMIT_COMBO_CLASSNAME","marginTop","INPUT_GROUP","InputBlock"],"mappings":";;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;AACA;;AAzBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAUA,IAAMA,eAAsD,GAAG,SAAzDA,eAAyD,CAAAC,KAAK;AAAA;;AAAA;AAClEC,IAAAA,eAAe,EAAEC,gBAAMC,eAD2C;AAElEC,IAAAA,YAAY,EAAE,KAFoD;AAGlEC,IAAAA,SAAS,8BAAuBH,gBAAMI,KAA7B,mCAA2DJ,gBAAMI,KAAjE,CAHyD;AAIlEC,IAAAA,YAAY,EAAE;AAJoD,uDAK7DC,sBAL6D,gBAKxCC,8CALwC,GAKP;AACzDF,IAAAA,YAAY,EAAE,gBAD2C;AAEzDG,IAAAA,SAAS,EAAE;AAF8C,GALO,qDAS7DC,kBAT6D,GAS7C;AACnBJ,IAAAA,YAAY,EAAE;AADK,GAT6C;AAAA,CAApE;;AAcO,IAAMK,UAAU,GAAG,SAAbA,UAAa,CAACZ,KAAD;AAAA,SAA4B;AAAK,IAAA,GAAG,EAAED,eAAe,CAACC,KAAD;AAAzB,KAAsCA,KAAtC,EAA5B;AAAA,CAAnB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport React from 'react';\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {COLOR} from '../Identity';\nimport {INPUT_CLASSNAME, INPUT_GROUP} from './Input';\nimport {INPUT_SUBMIT_COMBO_CLASSNAME} from './InputSubmitCombo';\n\nexport type InputBlockProps<T = HTMLDivElement> = React.HTMLProps<T>;\n\nconst inputBlockStyle: (props: InputBlockProps) => CSSObject = props => ({\n  backgroundColor: COLOR.GRAY_LIGHTEN_88,\n  borderRadius: '4px',\n  boxShadow: `inset 16px 16px 0 ${COLOR.WHITE}, inset -16px -16px 0 ${COLOR.WHITE}`,\n  marginBottom: '16px',\n  [`.${INPUT_CLASSNAME}, .${INPUT_SUBMIT_COMBO_CLASSNAME}`]: {\n    marginBottom: '1px !important',\n    marginTop: '0 !important',\n  },\n  [`.${INPUT_GROUP}`]: {\n    marginBottom: 0,\n  },\n});\n\nexport const InputBlock = (props: InputBlockProps) => <div css={inputBlockStyle(props)} {...props} />;\n"],"file":"InputBlock.js"}

package/src/Form/InputLabel.d.js

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

package/src/Form/InputLabel.d.js.map

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

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

@@ -40,12 +40,13 @@ var InputSubmitCombo = function InputSubmitCombo(_ref) {
         '&:focus-within': {
           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", '49px'), (0, _defineProperty2["default"])(_objectSpread2, "justifyContent", 'space-between'), (0, _defineProperty2["default"])(_objectSpread2, "marginBottom", '4px'), (0, _defineProperty2["default"])(_objectSpread2, "paddingLeft", 0), _objectSpread2));

package/src/Form/InputSubmitCombo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["InputSubmitCombo.tsx"],"names":["INPUT_SUBMIT_COMBO_CLASSNAME","InputSubmitCombo","children","props","theme","boxShadow","COLOR_V2","BLUE","INPUT_CLASSNAME","flexGrow","margin","padding"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AACA;;;;;;;;AAKO,IAAMA,4BAA4B,GAAG,kBAArC;;;AAEA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,MAAEC,QAAF,QAAEA,QAAF;AAAA,MAAeC,KAAf;AAAA,SAC9B;AACE,IAAA,SAAS,EAAEH,4BADb;AAEE,IAAA,GAAG,EAAE,aAACI,KAAD;AAAA;;AAAA,6CACA,uBAAWA,KAAX,EAAkBD,KAAlB,CADA;AAEH,0BAAkB;AAChBE,UAAAA,SAAS,sBAAeC,mBAASC,IAAxB;AADO;AAFf,qEAKEC,sBALF,GAKsB;AACvB,0CAAkC;AAChCH,UAAAA,SAAS,EAAE;AADqB,SADX;AAIvBA,QAAAA,SAAS,EAAE,MAJY;AAKvBI,QAAAA,QAAQ,EAAE,CALa;AAMvBC,QAAAA,MAAM,EAAE,WANe;AAOvBC,QAAAA,OAAO,EAAE;AAPc,OALtB,kEAcS,QAdT,+DAeM,MAfN,8DAgBK,MAhBL,sEAiBa,eAjBb,oEAkBW,KAlBX,mEAmBU,CAnBV;AAAA;AAFP,KAuBMR,KAvBN,GAyBGD,QAzBH,CAD8B;AAAA,CAAzB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {jsx} from '@emotion/react';\n\nimport {INPUT_CLASSNAME, InputProps, inputStyle} from './Input';\nimport {COLOR_V2} from '../Identity';\nimport {Theme} from '../Layout';\n\nexport type InputSubmitComboProps<T = HTMLDivElement> = InputProps<T>;\n\nexport const INPUT_SUBMIT_COMBO_CLASSNAME = 'inputSubmitCombo';\n\nexport const InputSubmitCombo = ({children, ...props}: InputSubmitComboProps) => (\n  <div\n    className={INPUT_SUBMIT_COMBO_CLASSNAME}\n    css={(theme: Theme) => ({\n      ...inputStyle(theme, props),\n      '&:focus-within': {\n        boxShadow: `0 0 0 1px ${COLOR_V2.BLUE}`,\n      },\n      [`.${INPUT_CLASSNAME}`]: {\n        '&:focus, &:invalid:not(:focus)': {\n          boxShadow: 'none',\n        },\n        boxShadow: 'none',\n        flexGrow: 1,\n        margin: '0 8px 0 0',\n        padding: '0 0 0 16px',\n      },\n      alignItems: 'center',\n      display: 'flex',\n      height: '49px', // needs a bit more space to not overlap with the `boxShadow` from `:focus`\n      justifyContent: 'space-between',\n      marginBottom: '4px',\n      paddingLeft: 0,\n    })}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"file":"InputSubmitCombo.js"}
+{"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.js

@@ -1,2 +1,6 @@
 "use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 //# sourceMappingURL=Select.d.js.map

package/src/Form/Select.d.ts

@@ -1,10 +1,24 @@
 /** @jsx jsx */
 import { CSSObject, jsx } from '@emotion/react';
 import type { Theme } from '../Layout';
-import { InputProps } from './Input';
-export interface SelectProps<T = HTMLSelectElement> extends InputProps<T> {
+import { ReactElement } from 'react';
+declare type Option = {
+    value: string | number;
+    label: string;
+};
+export interface SelectProps {
+    id: string;
+    onChange: (selectedOption: string | number) => void;
+    dataUieName: string;
+    options: Option[];
+    value?: Option | null;
+    helperText?: string;
+    label?: string;
     disabled?: boolean;
+    required?: 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: any, error?: boolean) => CSSObject;
+export declare const Select: ({ id, label, error, helperText, options, value, onChange, required, markInvalid, dataUieName, ...props }: SelectProps) => jsx.JSX.Element;
+export {};