@wireapp/react-ui-kit 8.1.0 → 8.4.0

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.4.0](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.3.0...@wireapp/react-ui-kit@8.4.0) (2022-05-30)
+
+
+### Features
+
+* Prepare new form elements ([#4273](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/4273)) ([a80de23](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/a80de238d2a9b396e7495f89d757f531f8f9abd3))
+
+
+
+
+
+# [8.3.0](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.2.0...@wireapp/react-ui-kit@8.3.0) (2022-05-27)
+
+
+### Features
+
+* Prepare Input component ([#4272](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/4272)) ([2b695b2](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/2b695b25b22433da0851567677786aceec2f2ff2))
+
+
+
+
+
+# [8.2.0](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.1.0...@wireapp/react-ui-kit@8.2.0) (2022-05-24)
+
+
+### Features
+
+* prepare new components ui (ACC-82) ([#4269](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/4269)) ([8b0cbce](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/8b0cbcebec48b14d6df6efece68e98c03731f8db))
+
+
+
+
+
 # [8.1.0](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.0.1...@wireapp/react-ui-kit@8.1.0) (2022-05-19)
 
 
@@ -870,7 +903,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### Features
 
-* **react-ui-kit:** External Label ([#3113](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/3113)) ([44c0767](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/44c076733ff64be12a583b937265eda6724506a5))
+* **react-ui-kit:** External InputLabel ([#3113](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/3113)) ([44c0767](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/44c076733ff64be12a583b937265eda6724506a5))
 
 
 
@@ -4205,7 +4238,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### BREAKING CHANGES
 
-* **react-ui-kit:** H1: 
+* **react-ui-kit:** H1:
 - font size 40px -> 48px
 - line-height: 56px
 - margin-bottom: 64px
@@ -4213,7 +4246,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 - font-size 24px -> 40px
 - line-height: 32px -> 48px
 
-H2: 
+H2:
 - font-weight: 300 -> 700
 - line-height: 32px;
 - margin-bottom: 24px;

package/package.json

@@ -19,7 +19,7 @@
     "@emotion/jest": "11.9.1",
     "@hot-loader/react-dom": "17.0.1",
     "@types/jest": "26.0.24",
-    "@types/react": "18.0.5",
+    "@types/react": "18.0.9",
     "@types/webpack-env": "1.16.2",
     "babel-jest": "27.0.6",
     "babel-loader": "8.2.2",
@@ -35,7 +35,7 @@
   },
   "homepage": "https://wire-react-ui-kit.netlify.app/",
   "peerDependencies": {
-    "@types/react": "^17.0.0",
+    "@types/react": "^18.0.9",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"
   },
@@ -67,6 +67,6 @@
     "test:update": "yarn test --updateSnapshot",
     "test:project": "yarn dist && yarn test"
   },
-  "version": "8.1.0",
-  "gitHead": "e6c73564a2d4d848a5796a92a74e37720791be27"
+  "version": "8.4.0",
+  "gitHead": "4a9e90c8c5c46e4d3cc3f24ee83d2a5ed1673aef"
 }

package/src/Form/Button.d.js

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

package/src/Form/Button.d.ts

@@ -2,7 +2,14 @@
 import { CSSObject, jsx } from '@emotion/react';
 import type { Theme } from '../Layout';
 import { TextProps } from '../Text';
+declare enum ButtonVariant {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    TERTIARY = "tertiary",
+    SEND = "send"
+}
 export interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {
+    variant?: ButtonVariant;
     backgroundColor?: string;
     loadingColor?: string;
     noCapital?: boolean;
@@ -11,3 +18,4 @@ export interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {
 export declare const buttonStyle: <T>(theme: Theme, props: ButtonProps<T>) => CSSObject;
 export declare const Button: ({ showLoading, children, loadingColor, ...props }: ButtonProps) => jsx.JSX.Element;
 export declare const filterButtonProps: (props: ButtonProps) => Object;
+export {};

package/src/Form/Button.js

@@ -25,16 +25,26 @@ var _Text = require("../Text");
 
 var _util = require("../util");
 
-var _excluded = ["backgroundColor", "block", "disabled", "noCapital", "bold", "center", "color", "fontSize", "noWrap", "textTransform", "truncate"],
+var _excluded = ["variant", "backgroundColor", "block", "disabled", "noCapital", "bold", "center", "color", "fontSize", "noWrap", "textTransform", "truncate"],
     _excluded2 = ["showLoading", "children", "loadingColor"];
 
 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 ButtonVariant;
+
+(function (ButtonVariant) {
+  ButtonVariant["PRIMARY"] = "primary";
+  ButtonVariant["SECONDARY"] = "secondary";
+  ButtonVariant["TERTIARY"] = "tertiary";
+  ButtonVariant["SEND"] = "send";
+})(ButtonVariant || (ButtonVariant = {}));
+
 var buttonStyle = function buttonStyle(theme, _ref) {
-  var _ref$backgroundColor = _ref.backgroundColor,
-      backgroundColor = _ref$backgroundColor === void 0 ? _Identity.COLOR.BLUE : _ref$backgroundColor,
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? ButtonVariant.PRIMARY : _ref$variant,
+      backgroundColor = _ref.backgroundColor,
       _ref$block = _ref.block,
       block = _ref$block === void 0 ? false : _ref$block,
       _ref$disabled = _ref.disabled,
@@ -56,39 +66,92 @@ var buttonStyle = function buttonStyle(theme, _ref) {
       _ref$truncate = _ref.truncate,
       truncate = _ref$truncate === void 0 ? true : _ref$truncate,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return _objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
     block: block,
     bold: bold,
     center: center,
-    color: color,
     disabled: disabled,
     fontSize: fontSize,
     noWrap: noWrap,
     textTransform: textTransform,
     truncate: truncate
   }, props))), {}, {
-    '&:hover, &:focus': {
-      backgroundColor: disabled ? backgroundColor : _Identity.COLOR.shade(backgroundColor, 0.06),
-      textDecoration: 'none'
-    },
-    backgroundColor: backgroundColor,
     border: 0,
-    borderRadius: '8px',
     cursor: disabled ? 'default' : 'pointer',
-    display: 'inline-block',
-    height: '48px',
-    lineHeight: '48px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
     marginBottom: '16px',
-    maxWidth: '100%',
-    minWidth: '150px',
-    opacity: disabled ? 0.56 : 1,
+    padding: 0,
     outline: 'none',
-    padding: '0 32px',
     textDecoration: 'none',
     touchAction: 'manipulation',
     transition: _motions.defaultTransition,
-    width: block ? '100%' : 'auto'
-  });
+    width: block ? '100%' : 'auto',
+    '&:hover, &:focus': {
+      textDecoration: 'none'
+    }
+  }, variant !== ButtonVariant.TERTIARY && _objectSpread({
+    borderRadius: variant === ButtonVariant.SEND ? '100%' : '16px',
+    height: variant === ButtonVariant.SEND ? '40px' : '48px',
+    lineHeight: variant === ButtonVariant.SEND ? '40px' : '48px'
+  }, variant !== ButtonVariant.SEND && {
+    maxWidth: '100%',
+    minWidth: '125px',
+    padding: '0 16px'
+  })), variant === ButtonVariant.PRIMARY && _objectSpread({
+    backgroundColor: backgroundColor || disabled ? _Identity.COLOR_V2.GRAY_50 : _Identity.COLOR_V2.BLUE,
+    color: disabled ? _Identity.COLOR_V2.GRAY_80 : _Identity.COLOR_V2.WHITE
+  }, !disabled && {
+    '&:hover, &:focus': {
+      backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_600
+    },
+    '&:focus': {
+      border: "1px solid ".concat(_Identity.COLOR_V2.BLUE_LIGHT_700)
+    },
+    '&:active': {
+      backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_700
+    }
+  })), variant === ButtonVariant.SECONDARY && _objectSpread({
+    backgroundColor: backgroundColor || disabled ? _Identity.COLOR_V2.GRAY_20 : _Identity.COLOR_V2.WHITE,
+    border: "1px solid ".concat(_Identity.COLOR_V2.GRAY_40),
+    color: disabled ? _Identity.COLOR_V2.GRAY_60 : _Identity.COLOR_V2.BLACK
+  }, !disabled && {
+    '&:hover, &:focus': {
+      border: "1px solid ".concat(_Identity.COLOR_V2.BLUE)
+    },
+    '&:focus': {
+      color: _Identity.COLOR_V2.BLUE
+    },
+    '&:active': {
+      backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_50,
+      border: "1px solid ".concat(_Identity.COLOR_V2.BLUE),
+      color: _Identity.COLOR_V2.BLUE
+    }
+  })), variant === ButtonVariant.TERTIARY && _objectSpread({
+    color: disabled ? _Identity.COLOR_V2.GRAY_60 : _Identity.COLOR_V2.BLACK,
+    lineHeight: '24px'
+  }, !disabled && {
+    '&:hover, &:focus': {
+      color: _Identity.COLOR_V2.BLUE
+    },
+    '&:focus': {
+      border: "1px solid ".concat(_Identity.COLOR_V2.BLUE_LIGHT_300)
+    }
+  })), variant === ButtonVariant.SEND && _objectSpread({
+    backgroundColor: backgroundColor || disabled ? _Identity.COLOR_V2.GRAY_70 : _Identity.COLOR_V2.BLUE,
+    width: '40px'
+  }, !disabled && {
+    '&:hover, &:focus': {
+      backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_600
+    },
+    '&:focus': {
+      border: "1px solid ".concat(_Identity.COLOR_V2.BLUE_LIGHT_800)
+    },
+    '&:active': {
+      backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_700
+    }
+  }));
 };
 
 exports.buttonStyle = buttonStyle;

package/src/Form/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Button.tsx"],"names":["buttonStyle","theme","backgroundColor","COLOR","BLUE","block","disabled","noCapital","bold","center","color","WHITE","fontSize","noWrap","textTransform","truncate","props","shade","textDecoration","border","borderRadius","cursor","display","height","lineHeight","marginBottom","maxWidth","minWidth","opacity","outline","padding","touchAction","transition","defaultTransition","width","Button","showLoading","children","loadingColor","filterButtonProps","margin"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {COLOR} from '../Identity';\nimport {defaultTransition} from '../Identity/motions';\nimport type {Theme} from '../Layout';\nimport {Loading} from '../Misc';\nimport {TextProps, filterTextProps, textStyle} from '../Text';\nimport {filterProps} from '../util';\n\nexport interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {\n  backgroundColor?: string;\n  loadingColor?: string;\n  noCapital?: boolean;\n  showLoading?: boolean;\n}\n\nexport const buttonStyle: <T>(theme: Theme, props: ButtonProps<T>) => CSSObject = (\n  theme,\n  {\n    backgroundColor = COLOR.BLUE,\n    block = false,\n    disabled = false,\n    noCapital = false,\n    bold = true,\n    center = true,\n    color = COLOR.WHITE,\n    fontSize = '16px',\n    noWrap = true,\n    textTransform = 'none',\n    truncate = true,\n    ...props\n  },\n) => ({\n  ...textStyle(theme, {\n    block,\n    bold,\n    center,\n    color,\n    disabled,\n    fontSize,\n    noWrap,\n    textTransform,\n    truncate,\n    ...props,\n  }),\n  '&:hover, &:focus': {\n    backgroundColor: disabled ? backgroundColor : COLOR.shade(backgroundColor, 0.06),\n    textDecoration: 'none',\n  },\n  backgroundColor: backgroundColor,\n  border: 0,\n  borderRadius: '8px',\n  cursor: disabled ? 'default' : 'pointer',\n  display: 'inline-block',\n  height: '48px',\n  lineHeight: '48px',\n  marginBottom: '16px',\n  maxWidth: '100%',\n  minWidth: '150px',\n  opacity: disabled ? 0.56 : 1,\n  outline: 'none',\n  padding: '0 32px',\n  textDecoration: 'none',\n  touchAction: 'manipulation',\n  transition: defaultTransition,\n  width: block ? '100%' : 'auto',\n});\n\nexport const Button = ({showLoading, children, loadingColor = COLOR.WHITE, ...props}: ButtonProps) => (\n  <button css={(theme: Theme) => buttonStyle(theme, props)} {...filterButtonProps(props)}>\n    {showLoading ? <Loading size={30} color={loadingColor} style={{display: 'flex', margin: 'auto'}} /> : children}\n  </button>\n);\n\nexport const filterButtonProps = (props: ButtonProps) => {\n  return filterProps(filterTextProps(props) as ButtonProps, ['backgroundColor', 'noCapital']);\n};\n"],"file":"Button.js"}
+{"version":3,"sources":["Button.tsx"],"names":["ButtonVariant","buttonStyle","theme","variant","PRIMARY","backgroundColor","block","disabled","noCapital","bold","center","color","COLOR","WHITE","fontSize","noWrap","textTransform","truncate","props","border","cursor","display","alignItems","justifyContent","marginBottom","padding","outline","textDecoration","touchAction","transition","defaultTransition","width","TERTIARY","borderRadius","SEND","height","lineHeight","maxWidth","minWidth","COLOR_V2","GRAY_50","BLUE","GRAY_80","BLUE_LIGHT_600","BLUE_LIGHT_700","SECONDARY","GRAY_20","GRAY_40","GRAY_60","BLACK","BLUE_LIGHT_50","BLUE_LIGHT_300","GRAY_70","BLUE_LIGHT_800","Button","showLoading","children","loadingColor","filterButtonProps","margin"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {COLOR, COLOR_V2} from '../Identity';\nimport {defaultTransition} from '../Identity/motions';\nimport type {Theme} from '../Layout';\nimport {Loading} from '../Misc';\nimport {TextProps, filterTextProps, textStyle} from '../Text';\nimport {filterProps} from '../util';\n\nenum ButtonVariant {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  TERTIARY = 'tertiary',\n  SEND = 'send',\n}\n\nexport interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {\n  variant?: ButtonVariant;\n  backgroundColor?: string;\n  loadingColor?: string;\n  noCapital?: boolean;\n  showLoading?: boolean;\n}\n\nexport const buttonStyle: <T>(theme: Theme, props: ButtonProps<T>) => CSSObject = (\n  theme,\n  {\n    variant = ButtonVariant.PRIMARY,\n    backgroundColor,\n    block = false,\n    disabled = false,\n    noCapital = false,\n    bold = true,\n    center = true,\n    color = COLOR.WHITE,\n    fontSize = '16px',\n    noWrap = true,\n    textTransform = 'none',\n    truncate = true,\n    ...props\n  },\n) => ({\n  ...textStyle(theme, {\n    block,\n    bold,\n    center,\n    disabled,\n    fontSize,\n    noWrap,\n    textTransform,\n    truncate,\n    ...props,\n  }),\n  border: 0,\n  cursor: disabled ? 'default' : 'pointer',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  marginBottom: '16px',\n  padding: 0,\n  outline: 'none',\n  textDecoration: 'none',\n  touchAction: 'manipulation',\n  transition: defaultTransition,\n  width: block ? '100%' : 'auto',\n  '&:hover, &:focus': {\n    textDecoration: 'none',\n  },\n  ...(variant !== ButtonVariant.TERTIARY && {\n    borderRadius: variant === ButtonVariant.SEND ? '100%' : '16px',\n    height: variant === ButtonVariant.SEND ? '40px' : '48px',\n    lineHeight: variant === ButtonVariant.SEND ? '40px' : '48px',\n    ...(variant !== ButtonVariant.SEND && {\n      maxWidth: '100%',\n      minWidth: '125px',\n      padding: '0 16px',\n    }),\n  }),\n  ...(variant === ButtonVariant.PRIMARY && {\n    backgroundColor: backgroundColor || disabled ? COLOR_V2.GRAY_50 : COLOR_V2.BLUE,\n    color: disabled ? COLOR_V2.GRAY_80 : COLOR_V2.WHITE,\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: COLOR_V2.BLUE_LIGHT_600,\n      },\n      '&:focus': {\n        border: `1px solid ${COLOR_V2.BLUE_LIGHT_700}`,\n      },\n      '&:active': {\n        backgroundColor: COLOR_V2.BLUE_LIGHT_700,\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.SECONDARY && {\n    backgroundColor: backgroundColor || disabled ? COLOR_V2.GRAY_20 : COLOR_V2.WHITE,\n    border: `1px solid ${COLOR_V2.GRAY_40}`,\n    color: disabled ? COLOR_V2.GRAY_60 : COLOR_V2.BLACK,\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        border: `1px solid ${COLOR_V2.BLUE}`,\n      },\n      '&:focus': {\n        color: COLOR_V2.BLUE,\n      },\n      '&:active': {\n        backgroundColor: COLOR_V2.BLUE_LIGHT_50,\n        border: `1px solid ${COLOR_V2.BLUE}`,\n        color: COLOR_V2.BLUE,\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.TERTIARY && {\n    color: disabled ? COLOR_V2.GRAY_60 : COLOR_V2.BLACK,\n    lineHeight: '24px',\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        color: COLOR_V2.BLUE,\n      },\n      '&:focus': {\n        border: `1px solid ${COLOR_V2.BLUE_LIGHT_300}`,\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.SEND && {\n    backgroundColor: backgroundColor || disabled ? COLOR_V2.GRAY_70 : COLOR_V2.BLUE,\n    width: '40px',\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: COLOR_V2.BLUE_LIGHT_600,\n      },\n      '&:focus': {\n        border: `1px solid ${COLOR_V2.BLUE_LIGHT_800}`,\n      },\n      '&:active': {\n        backgroundColor: COLOR_V2.BLUE_LIGHT_700,\n      },\n    }),\n  }),\n});\n\nexport const Button = ({showLoading, children, loadingColor = COLOR.WHITE, ...props}: ButtonProps) => (\n  <button css={(theme: Theme) => buttonStyle(theme, props)} {...filterButtonProps(props)}>\n    {showLoading ? <Loading size={30} color={loadingColor} style={{display: 'flex', margin: 'auto'}} /> : children}\n  </button>\n);\n\nexport const filterButtonProps = (props: ButtonProps) => {\n  return filterProps(filterTextProps(props) as ButtonProps, ['backgroundColor', 'noCapital']);\n};\n"],"file":"Button.js"}

package/src/Form/Button.md

@@ -1,13 +1,14 @@
 Demo:
 
 ```js
-import {Button, Container, Columns, Column, COLOR} from '@wireapp/react-ui-kit';
+import {Button, Container, Columns, Column, COLOR, COLOR_V2, H2, PlaneIcon} from '@wireapp/react-ui-kit';
 
 <Container>
+  <H2>Primary Button</H2>
   <Columns>
     <Column>Button</Column>
     <Column>
-      <Button backgroundColor={COLOR.BLUE}>Button</Button>
+      <Button>Button</Button>
     </Column>
   </Columns>
   <Columns>
@@ -26,5 +27,63 @@ import {Button, Container, Columns, Column, COLOR} from '@wireapp/react-ui-kit';
       </Button>
     </Column>
   </Columns>
+
+  <H2>Secondary Button</H2>
+  <Columns>
+    <Column>Button</Column>
+    <Column>
+      <Button variant="secondary">Button</Button>
+    </Column>
+  </Columns>
+  <Columns>
+    <Column>Disabled Button</Column>
+    <Column>
+      <Button variant="secondary" disabled onClick={() => alert('This should not work')}>
+        Disabled Button
+      </Button>
+    </Column>
+  </Columns>
+  <Columns>
+    <Column>Loading Button</Column>
+    <Column>
+      <Button variant="secondary" showLoading disabled onClick={() => alert('This should not work')}>
+        Loading Button
+      </Button>
+    </Column>
+  </Columns>
+
+  <H2>Tertiary Button</H2>
+  <Columns>
+    <Column>Button</Column>
+    <Column>
+      <Button variant="tertiary">Copy link</Button>
+    </Column>
+  </Columns>
+  <Columns>
+    <Column>Disabled Button</Column>
+    <Column>
+      <Button variant="tertiary" disabled onClick={() => alert('This should not work')}>
+        Copy link
+      </Button>
+    </Column>
+  </Columns>
+
+  <H2>Send Button</H2>
+  <Columns>
+    <Column>Button</Column>
+    <Column>
+      <Button variant="send">
+        <PlaneIcon color={COLOR_V2.WHITE} />
+      </Button>
+    </Column>
+  </Columns>
+  <Columns>
+    <Column>Disabled Button</Column>
+    <Column>
+      <Button variant="send" disabled onClick={() => alert('This should not work')}>
+        <PlaneIcon color={COLOR_V2.WHITE} />
+      </Button>
+    </Column>
+  </Columns>
 </Container>;
 ```

package/src/Form/Checkbox.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,7 +17,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("@emotion/react");
 
-var _react2 = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireWildcard(require("react"));
 
 var _Identity = require("../Identity");
 
@@ -28,6 +30,10 @@ var _Input = require("./Input");
 var _excluded = ["id", "children", "style", "disabled"],
     _excluded2 = ["color"];
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 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; }
@@ -38,28 +44,44 @@ var filterStyledLabelProps = function filterStyledLabelProps(props) {
   return (0, _util.filterProps)(props, ['markInvalid']);
 };
 
+var checkSvg = '<svg width="15" height="13" viewBox="0 0 16 13" xmlns="http://www.w3.org/2000/svg"><path d="M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z" fill="white"/></svg>';
+
 var StyledLabel = function StyledLabel(props) {
-  var checkSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="10" viewBox="0 0 8 6"><path fill="white" d="M2.8 6L8 .7 7.3 0 2.8 4.6.7 2.4l-.7.7z"/></svg>';
+  var disabled = props.disabled,
+      markInvalid = props.markInvalid;
   return (0, _react.jsx)("label", (0, _extends2["default"])({
     css: function css(theme) {
       var _ref;
 
-      return _ref = {}, (0, _defineProperty2["default"])(_ref, ".".concat(_Input.INPUT_CLASSNAME, ":checked + &::before"), {
-        background: "".concat(_Identity.COLOR.BLUE, " url('data:image/svg+xml; utf8, ").concat(checkSvg, "') no-repeat center")
-      }), (0, _defineProperty2["default"])(_ref, ".".concat(_Input.INPUT_CLASSNAME, ":focus + &::before"), {
-        borderColor: _Identity.COLOR.BLUE
-      }), (0, _defineProperty2["default"])(_ref, '&::before', {
-        background: _Identity.COLOR.WHITE,
-        border: props.markInvalid ? "1px solid ".concat(_Identity.COLOR.RED) : "1px solid ".concat(_Identity.COLOR.GRAY),
-        borderRadius: '1px',
-        boxSizing: 'border-box',
-        content: '""',
-        display: 'inline-block',
-        height: '16px',
-        margin: '4px 8px 0 -16px',
-        opacity: props.disabled ? 0.56 : 1,
-        width: '16px'
-      }), (0, _defineProperty2["default"])(_ref, "a", _objectSpread({}, (0, _Text.textLinkStyle)(theme, {}))), (0, _defineProperty2["default"])(_ref, "display", 'flex'), (0, _defineProperty2["default"])(_ref, "opacity", props.disabled ? 0.56 : 1), _ref;
+      return _objectSpread(_objectSpread((0, _defineProperty2["default"])({}, ".".concat(_Input.INPUT_CLASSNAME, ":checked + &::before"), {
+        background: "".concat(disabled ? _Identity.COLOR_V2.GRAY_60 : _Identity.COLOR_V2.BLUE, " url('data:image/svg+xml; utf8, ").concat(checkSvg, "') no-repeat center"),
+        borderColor: _Identity.COLOR_V2.BLUE
+      }), !disabled && (_ref = {}, (0, _defineProperty2["default"])(_ref, ".".concat(_Input.INPUT_CLASSNAME, ":focus + &::before"), {
+        borderColor: _Identity.COLOR_V2.BLUE
+      }), (0, _defineProperty2["default"])(_ref, ".".concat(_Input.INPUT_CLASSNAME, ":hover + &::before"), {
+        borderColor: _Identity.COLOR_V2.BLUE
+      }), _ref)), {}, {
+        '&::before': _objectSpread(_objectSpread({
+          background: disabled ? _Identity.COLOR_V2.GRAY_10 : _Identity.COLOR_V2.GRAY_20
+        }, !disabled ? {
+          border: markInvalid ? "1.5px solid ".concat(_Identity.COLOR_V2.RED) : "1.5px solid ".concat(_Identity.COLOR_V2.GRAY_80)
+        } : {
+          border: "1.5px solid ".concat(_Identity.COLOR_V2.GRAY_60)
+        }), {}, {
+          borderRadius: '3px',
+          boxSizing: 'border-box',
+          content: '""',
+          display: 'inline-block',
+          height: '22px',
+          lineHeight: '22px',
+          margin: '0 8px 0 -16px',
+          width: '22px'
+        }),
+        a: _objectSpread({}, (0, _Text.textLinkStyle)(theme, {})),
+        lineHeight: '22px',
+        display: 'flex',
+        opacity: disabled ? 0.56 : 1
+      });
     }
   }, filterStyledLabelProps(props)));
 };
@@ -74,13 +96,13 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "1uw42d7-Checkbox",
   styles: "align-items:center;display:flex;justify-content:flex-start;label:Checkbox;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNoZWNrYm94LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrRkkiLCJmaWxlIjoiQ2hlY2tib3gudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFdpcmVcbiAqIENvcHlyaWdodCAoQykgMjAxOCBXaXJlIFN3aXNzIEdtYkhcbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZnJlZSBzb2Z0d2FyZTogeW91IGNhbiByZWRpc3RyaWJ1dGUgaXQgYW5kL29yIG1vZGlmeVxuICogaXQgdW5kZXIgdGhlIHRlcm1zIG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBhcyBwdWJsaXNoZWQgYnlcbiAqIHRoZSBGcmVlIFNvZnR3YXJlIEZvdW5kYXRpb24sIGVpdGhlciB2ZXJzaW9uIDMgb2YgdGhlIExpY2Vuc2UsIG9yXG4gKiAoYXQgeW91ciBvcHRpb24pIGFueSBsYXRlciB2ZXJzaW9uLlxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBkaXN0cmlidXRlZCBpbiB0aGUgaG9wZSB0aGF0IGl0IHdpbGwgYmUgdXNlZnVsLFxuICogYnV0IFdJVEhPVVQgQU5ZIFdBUlJBTlRZOyB3aXRob3V0IGV2ZW4gdGhlIGltcGxpZWQgd2FycmFudHkgb2ZcbiAqIE1FUkNIQU5UQUJJTElUWSBvciBGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRS4gU2VlIHRoZVxuICogR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgZm9yIG1vcmUgZGV0YWlscy5cbiAqXG4gKiBZb3Ugc2hvdWxkIGhhdmUgcmVjZWl2ZWQgYSBjb3B5IG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZVxuICogYWxvbmcgd2l0aCB0aGlzIHByb2dyYW0uIElmIG5vdCwgc2VlIGh0dHA6Ly93d3cuZ251Lm9yZy9saWNlbnNlcy8uXG4gKlxuICovXG5cbi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHtqc3h9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7Q09MT1J9IGZyb20gJy4uL0lkZW50aXR5JztcbmltcG9ydCB7VGhlbWV9IGZyb20gJy4uL0xheW91dCc7XG5pbXBvcnQge1RleHQsIFRleHRQcm9wcywgdGV4dFN0eWxlLCB0ZXh0TGlua1N0eWxlfSBmcm9tICcuLi9UZXh0JztcbmltcG9ydCB7ZmlsdGVyUHJvcHN9IGZyb20gJy4uL3V0aWwnO1xuaW1wb3J0IHtJTlBVVF9DTEFTU05BTUUsIElucHV0LCBJbnB1dFByb3BzfSBmcm9tICcuL0lucHV0JztcblxuZXhwb3J0IGludGVyZmFjZSBTdHlsZWRMYWJlbFByb3BzPFQgPSBIVE1MTGFiZWxFbGVtZW50PiBleHRlbmRzIFJlYWN0LkhUTUxQcm9wczxUPiB7XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgbWFya0ludmFsaWQ/OiBib29sZWFuO1xufVxuXG5jb25zdCBmaWx0ZXJTdHlsZWRMYWJlbFByb3BzID0gKHByb3BzOiBTdHlsZWRMYWJlbFByb3BzKSA9PiBmaWx0ZXJQcm9wcyhwcm9wcywgWydtYXJrSW52YWxpZCddKTtcblxuY29uc3QgU3R5bGVkTGFiZWwgPSAocHJvcHM6IFN0eWxlZExhYmVsUHJvcHMpID0+IHtcbiAgY29uc3QgY2hlY2tTdmcgPVxuICAgICc8c3ZnIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIiB3aWR0aD1cIjEyXCIgaGVpZ2h0PVwiMTBcIiB2aWV3Qm94PVwiMCAwIDggNlwiPjxwYXRoIGZpbGw9XCJ3aGl0ZVwiIGQ9XCJNMi44IDZMOCAuNyA3LjMgMCAyLjggNC42LjcgMi40bC0uNy43elwiLz48L3N2Zz4nO1xuICByZXR1cm4gKFxuICAgIDxsYWJlbFxuICAgICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiAoe1xuICAgICAgICBbYC4ke0lOUFVUX0NMQVNTTkFNRX06Y2hlY2tlZCArICY6OmJlZm9yZWBdOiB7XG4gICAgICAgICAgYmFja2dyb3VuZDogYCR7Q09MT1IuQkxVRX0gdXJsKCdkYXRhOmltYWdlL3N2Zyt4bWw7IHV0ZjgsICR7Y2hlY2tTdmd9Jykgbm8tcmVwZWF0IGNlbnRlcmAsXG4gICAgICAgIH0sXG4gICAgICAgIFtgLiR7SU5QVVRfQ0xBU1NOQU1FfTpmb2N1cyArICY6OmJlZm9yZWBdOiB7XG4gICAgICAgICAgYm9yZGVyQ29sb3I6IENPTE9SLkJMVUUsXG4gICAgICAgIH0sXG4gICAgICAgICcmOjpiZWZvcmUnOiB7XG4gICAgICAgICAgYmFja2dyb3VuZDogQ09MT1IuV0hJVEUsXG4gICAgICAgICAgYm9yZGVyOiBwcm9wcy5tYXJrSW52YWxpZCA/IGAxcHggc29saWQgJHtDT0xPUi5SRUR9YCA6IGAxcHggc29saWQgJHtDT0xPUi5HUkFZfWAsXG4gICAgICAgICAgYm9yZGVyUmFkaXVzOiAnMXB4JyxcbiAgICAgICAgICBib3hTaXppbmc6ICdib3JkZXItYm94JyxcbiAgICAgICAgICBjb250ZW50OiAnXCJcIicsXG4gICAgICAgICAgZGlzcGxheTogJ2lubGluZS1ibG9jaycsXG4gICAgICAgICAgaGVpZ2h0OiAnMTZweCcsXG4gICAgICAgICAgbWFyZ2luOiAnNHB4IDhweCAwIC0xNnB4JyxcbiAgICAgICAgICBvcGFjaXR5OiBwcm9wcy5kaXNhYmxlZCA/IDAuNTYgOiAxLFxuICAgICAgICAgIHdpZHRoOiAnMTZweCcsXG4gICAgICAgIH0sXG4gICAgICAgIGE6IHtcbiAgICAgICAgICAuLi50ZXh0TGlua1N0eWxlKHRoZW1lLCB7fSksXG4gICAgICAgIH0sXG4gICAgICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICAgICAgb3BhY2l0eTogcHJvcHMuZGlzYWJsZWQgPyAwLjU2IDogMSxcbiAgICAgIH0pfVxuICAgICAgey4uLmZpbHRlclN0eWxlZExhYmVsUHJvcHMocHJvcHMpfVxuICAgIC8+XG4gICk7XG59O1xuXG5pbnRlcmZhY2UgQ2hlY2tib3hQcm9wczxUID0gSFRNTElucHV0RWxlbWVudD4gZXh0ZW5kcyBJbnB1dFByb3BzPFQ+IHtcbiAgaWQ/OiBzdHJpbmc7XG59XG5cbmNvbnN0IGZpbHRlckNoZWNrYm94UHJvcHMgPSAocHJvcHM6IENoZWNrYm94UHJvcHMpID0+IGZpbHRlclByb3BzKHByb3BzLCBbJ21hcmtJbnZhbGlkJ10pO1xuXG5leHBvcnQgY29uc3QgQ2hlY2tib3g6IFJlYWN0LkZDPENoZWNrYm94UHJvcHM8SFRNTElucHV0RWxlbWVudD4+ID0gUmVhY3QuZm9yd2FyZFJlZjxcbiAgSFRNTElucHV0RWxlbWVudCxcbiAgQ2hlY2tib3hQcm9wczxIVE1MSW5wdXRFbGVtZW50PlxuPigoe2lkID0gTWF0aC5yYW5kb20oKS50b1N0cmluZygpLCBjaGlsZHJlbiwgc3R5bGUsIGRpc2FibGVkLCAuLi5wcm9wc30sIHJlZikgPT4gKFxuICA8ZGl2XG4gICAgY3NzPXt7XG4gICAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICAgIGp1c3RpZnlDb250ZW50OiAnZmxleC1zdGFydCcsXG4gICAgfX1cbiAgICBzdHlsZT17c3R5bGV9XG4gID5cbiAgICA8SW5wdXRcbiAgICAgIHR5cGU9eydjaGVja2JveCd9XG4gICAgICBpZD17aWR9XG4gICAgICBzdHlsZT17e1xuICAgICAgICBoZWlnaHQ6ICcxNnB4JyxcbiAgICAgICAgbWFyZ2luQm90dG9tOiAnMCcsXG4gICAgICAgIG9wYWNpdHk6IDAsXG4gICAgICAgIHdpZHRoOiAnMTZweCcsXG4gICAgICB9fVxuICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICB7Li4uZmlsdGVyQ2hlY2tib3hQcm9wcyhwcm9wcyl9XG4gICAgLz5cbiAgICA8U3R5bGVkTGFiZWwgaHRtbEZvcj17aWR9IGRpc2FibGVkPXtkaXNhYmxlZH0gbWFya0ludmFsaWQ9e3Byb3BzLm1hcmtJbnZhbGlkfT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1N0eWxlZExhYmVsPlxuICA8L2Rpdj5cbikpO1xuXG5leHBvcnQgdHlwZSBDaGVja2JveExhYmVsUHJvcHM8VCA9IEhUTUxTcGFuRWxlbWVudD4gPSBUZXh0UHJvcHM8VD47XG5cbmV4cG9ydCBjb25zdCBDaGVja2JveExhYmVsID0gKHtjb2xvciA9IENPTE9SLlRFWFQsIC4uLnByb3BzfTogQ2hlY2tib3hMYWJlbFByb3BzKSA9PiAoXG4gIDxUZXh0XG4gICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiAoe1xuICAgICAgLi4udGV4dFN0eWxlKHRoZW1lLCB7XG4gICAgICAgIGNvbG9yLFxuICAgICAgICAuLi5wcm9wcyxcbiAgICAgIH0pLFxuICAgICAgYToge1xuICAgICAgICBjb2xvcjogQ09MT1IuTElOSyxcbiAgICAgICAgdGV4dERlY29yYXRpb246ICdub25lJyxcbiAgICAgIH0sXG4gICAgfSl9XG4gICAgey4uLnByb3BzfVxuICAvPlxuKTtcbiJdfQ== */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNoZWNrYm94LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvR0kiLCJmaWxlIjoiQ2hlY2tib3gudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFdpcmVcbiAqIENvcHlyaWdodCAoQykgMjAxOCBXaXJlIFN3aXNzIEdtYkhcbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZnJlZSBzb2Z0d2FyZTogeW91IGNhbiByZWRpc3RyaWJ1dGUgaXQgYW5kL29yIG1vZGlmeVxuICogaXQgdW5kZXIgdGhlIHRlcm1zIG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBhcyBwdWJsaXNoZWQgYnlcbiAqIHRoZSBGcmVlIFNvZnR3YXJlIEZvdW5kYXRpb24sIGVpdGhlciB2ZXJzaW9uIDMgb2YgdGhlIExpY2Vuc2UsIG9yXG4gKiAoYXQgeW91ciBvcHRpb24pIGFueSBsYXRlciB2ZXJzaW9uLlxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBkaXN0cmlidXRlZCBpbiB0aGUgaG9wZSB0aGF0IGl0IHdpbGwgYmUgdXNlZnVsLFxuICogYnV0IFdJVEhPVVQgQU5ZIFdBUlJBTlRZOyB3aXRob3V0IGV2ZW4gdGhlIGltcGxpZWQgd2FycmFudHkgb2ZcbiAqIE1FUkNIQU5UQUJJTElUWSBvciBGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRS4gU2VlIHRoZVxuICogR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgZm9yIG1vcmUgZGV0YWlscy5cbiAqXG4gKiBZb3Ugc2hvdWxkIGhhdmUgcmVjZWl2ZWQgYSBjb3B5IG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZVxuICogYWxvbmcgd2l0aCB0aGlzIHByb2dyYW0uIElmIG5vdCwgc2VlIGh0dHA6Ly93d3cuZ251Lm9yZy9saWNlbnNlcy8uXG4gKlxuICovXG5cbi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHtqc3h9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBSZWFjdCwge3VzZUlkfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7Q09MT1IsIENPTE9SX1YyfSBmcm9tICcuLi9JZGVudGl0eSc7XG5pbXBvcnQge1RoZW1lfSBmcm9tICcuLi9MYXlvdXQnO1xuaW1wb3J0IHtUZXh0LCBUZXh0UHJvcHMsIHRleHRTdHlsZSwgdGV4dExpbmtTdHlsZX0gZnJvbSAnLi4vVGV4dCc7XG5pbXBvcnQge2ZpbHRlclByb3BzfSBmcm9tICcuLi91dGlsJztcbmltcG9ydCB7SU5QVVRfQ0xBU1NOQU1FLCBJbnB1dCwgSW5wdXRQcm9wc30gZnJvbSAnLi9JbnB1dCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgU3R5bGVkTGFiZWxQcm9wczxUID0gSFRNTExhYmVsRWxlbWVudD4gZXh0ZW5kcyBSZWFjdC5IVE1MUHJvcHM8VD4ge1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG4gIG1hcmtJbnZhbGlkPzogYm9vbGVhbjtcbn1cblxuY29uc3QgZmlsdGVyU3R5bGVkTGFiZWxQcm9wcyA9IChwcm9wczogU3R5bGVkTGFiZWxQcm9wcykgPT4gZmlsdGVyUHJvcHMocHJvcHMsIFsnbWFya0ludmFsaWQnXSk7XG5cbmNvbnN0IGNoZWNrU3ZnID1cbiAgJzxzdmcgd2lkdGg9XCIxNVwiIGhlaWdodD1cIjEzXCIgdmlld0JveD1cIjAgMCAxNiAxM1wiIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIj48cGF0aCBkPVwiTTUuNjU2ODUgMTIuMDcxMUwxNS45ODQyIDEuNjI3MzhMMTQuNTcgMC4yMTMxNjdMNS42NTY4NSA5LjI0MjY0TDEuNDE0MjEgNUwwIDYuNDE0MjFMNS42NTY4NSAxMi4wNzExWlwiIGZpbGw9XCJ3aGl0ZVwiLz48L3N2Zz4nO1xuXG5jb25zdCBTdHlsZWRMYWJlbCA9IChwcm9wczogU3R5bGVkTGFiZWxQcm9wcykgPT4ge1xuICBjb25zdCB7ZGlzYWJsZWQsIG1hcmtJbnZhbGlkfSA9IHByb3BzO1xuXG4gIHJldHVybiAoXG4gICAgPGxhYmVsXG4gICAgICBjc3M9eyh0aGVtZTogVGhlbWUpID0+ICh7XG4gICAgICAgIFtgLiR7SU5QVVRfQ0xBU1NOQU1FfTpjaGVja2VkICsgJjo6YmVmb3JlYF06IHtcbiAgICAgICAgICBiYWNrZ3JvdW5kOiBgJHtcbiAgICAgICAgICAgIGRpc2FibGVkID8gQ09MT1JfVjIuR1JBWV82MCA6IENPTE9SX1YyLkJMVUVcbiAgICAgICAgICB9IHVybCgnZGF0YTppbWFnZS9zdmcreG1sOyB1dGY4LCAke2NoZWNrU3ZnfScpIG5vLXJlcGVhdCBjZW50ZXJgLFxuICAgICAgICAgIGJvcmRlckNvbG9yOiBDT0xPUl9WMi5CTFVFLFxuICAgICAgICB9LFxuICAgICAgICAuLi4oIWRpc2FibGVkICYmIHtcbiAgICAgICAgICBbYC4ke0lOUFVUX0NMQVNTTkFNRX06Zm9jdXMgKyAmOjpiZWZvcmVgXToge1xuICAgICAgICAgICAgYm9yZGVyQ29sb3I6IENPTE9SX1YyLkJMVUUsXG4gICAgICAgICAgfSxcbiAgICAgICAgICBbYC4ke0lOUFVUX0NMQVNTTkFNRX06aG92ZXIgKyAmOjpiZWZvcmVgXToge1xuICAgICAgICAgICAgYm9yZGVyQ29sb3I6IENPTE9SX1YyLkJMVUUsXG4gICAgICAgICAgfSxcbiAgICAgICAgfSksXG4gICAgICAgICcmOjpiZWZvcmUnOiB7XG4gICAgICAgICAgYmFja2dyb3VuZDogZGlzYWJsZWQgPyBDT0xPUl9WMi5HUkFZXzEwIDogQ09MT1JfVjIuR1JBWV8yMCxcbiAgICAgICAgICAuLi4oIWRpc2FibGVkXG4gICAgICAgICAgICA/IHtcbiAgICAgICAgICAgICAgICBib3JkZXI6IG1hcmtJbnZhbGlkID8gYDEuNXB4IHNvbGlkICR7Q09MT1JfVjIuUkVEfWAgOiBgMS41cHggc29saWQgJHtDT0xPUl9WMi5HUkFZXzgwfWAsXG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIDoge1xuICAgICAgICAgICAgICAgIGJvcmRlcjogYDEuNXB4IHNvbGlkICR7Q09MT1JfVjIuR1JBWV82MH1gLFxuICAgICAgICAgICAgICB9KSxcbiAgICAgICAgICBib3JkZXJSYWRpdXM6ICczcHgnLFxuICAgICAgICAgIGJveFNpemluZzogJ2JvcmRlci1ib3gnLFxuICAgICAgICAgIGNvbnRlbnQ6ICdcIlwiJyxcbiAgICAgICAgICBkaXNwbGF5OiAnaW5saW5lLWJsb2NrJyxcbiAgICAgICAgICBoZWlnaHQ6ICcyMnB4JyxcbiAgICAgICAgICBsaW5lSGVpZ2h0OiAnMjJweCcsXG4gICAgICAgICAgbWFyZ2luOiAnMCA4cHggMCAtMTZweCcsXG4gICAgICAgICAgd2lkdGg6ICcyMnB4JyxcbiAgICAgICAgfSxcbiAgICAgICAgYToge1xuICAgICAgICAgIC4uLnRleHRMaW5rU3R5bGUodGhlbWUsIHt9KSxcbiAgICAgICAgfSxcbiAgICAgICAgbGluZUhlaWdodDogJzIycHgnLFxuICAgICAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgICAgIG9wYWNpdHk6IGRpc2FibGVkID8gMC41NiA6IDEsXG4gICAgICB9KX1cbiAgICAgIHsuLi5maWx0ZXJTdHlsZWRMYWJlbFByb3BzKHByb3BzKX1cbiAgICAvPlxuICApO1xufTtcblxuaW50ZXJmYWNlIENoZWNrYm94UHJvcHM8VCA9IEhUTUxJbnB1dEVsZW1lbnQ+IGV4dGVuZHMgSW5wdXRQcm9wczxUPiB7XG4gIGlkPzogc3RyaW5nO1xufVxuXG5jb25zdCBmaWx0ZXJDaGVja2JveFByb3BzID0gKHByb3BzOiBDaGVja2JveFByb3BzKSA9PiBmaWx0ZXJQcm9wcyhwcm9wcywgWydtYXJrSW52YWxpZCddKTtcblxuZXhwb3J0IGNvbnN0IENoZWNrYm94OiBSZWFjdC5GQzxDaGVja2JveFByb3BzPEhUTUxJbnB1dEVsZW1lbnQ+PiA9IFJlYWN0LmZvcndhcmRSZWY8XG4gIEhUTUxJbnB1dEVsZW1lbnQsXG4gIENoZWNrYm94UHJvcHM8SFRNTElucHV0RWxlbWVudD5cbj4oKHtpZCA9IHVzZUlkKCksIGNoaWxkcmVuLCBzdHlsZSwgZGlzYWJsZWQsIC4uLnByb3BzfSwgcmVmKSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e3tcbiAgICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgICAganVzdGlmeUNvbnRlbnQ6ICdmbGV4LXN0YXJ0JyxcbiAgICB9fVxuICAgIHN0eWxlPXtzdHlsZX1cbiAgPlxuICAgIDxJbnB1dFxuICAgICAgdHlwZT17J2NoZWNrYm94J31cbiAgICAgIGlkPXtpZH1cbiAgICAgIHN0eWxlPXt7XG4gICAgICAgIGhlaWdodDogJzIycHgnLFxuICAgICAgICBtYXJnaW5Cb3R0b206ICcwJyxcbiAgICAgICAgb3BhY2l0eTogMCxcbiAgICAgICAgd2lkdGg6ICcyMnB4JyxcbiAgICAgIH19XG4gICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICByZWY9e3JlZn1cbiAgICAgIHsuLi5maWx0ZXJDaGVja2JveFByb3BzKHByb3BzKX1cbiAgICAvPlxuICAgIDxTdHlsZWRMYWJlbCBodG1sRm9yPXtpZH0gZGlzYWJsZWQ9e2Rpc2FibGVkfSBtYXJrSW52YWxpZD17cHJvcHMubWFya0ludmFsaWR9PlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvU3R5bGVkTGFiZWw+XG4gIDwvZGl2PlxuKSk7XG5cbmV4cG9ydCB0eXBlIENoZWNrYm94TGFiZWxQcm9wczxUID0gSFRNTFNwYW5FbGVtZW50PiA9IFRleHRQcm9wczxUPjtcblxuZXhwb3J0IGNvbnN0IENoZWNrYm94TGFiZWwgPSAoe2NvbG9yID0gQ09MT1IuVEVYVCwgLi4ucHJvcHN9OiBDaGVja2JveExhYmVsUHJvcHMpID0+IChcbiAgPFRleHRcbiAgICBjc3M9eyh0aGVtZTogVGhlbWUpID0+ICh7XG4gICAgICAuLi50ZXh0U3R5bGUodGhlbWUsIHtcbiAgICAgICAgY29sb3IsXG4gICAgICAgIC4uLnByb3BzLFxuICAgICAgfSksXG4gICAgICBhOiB7XG4gICAgICAgIGNvbG9yOiBDT0xPUi5MSU5LLFxuICAgICAgICB0ZXh0RGVjb3JhdGlvbjogJ25vbmUnLFxuICAgICAgfSxcbiAgICB9KX1cbiAgICB7Li4ucHJvcHN9XG4gIC8+XG4pO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
 var Checkbox = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref) {
   var _ref2$id = _ref2.id,
-      id = _ref2$id === void 0 ? Math.random().toString() : _ref2$id,
+      id = _ref2$id === void 0 ? (0, _react2.useId)() : _ref2$id,
       children = _ref2.children,
       style = _ref2.style,
       disabled = _ref2.disabled,
@@ -92,10 +114,10 @@ var Checkbox = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref)
     type: 'checkbox',
     id: id,
     style: {
-      height: '16px',
+      height: '22px',
       marginBottom: '0',
       opacity: 0,
-      width: '16px'
+      width: '22px'
     },
     disabled: disabled,
     ref: ref

package/src/Form/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Checkbox.tsx"],"names":["filterStyledLabelProps","props","StyledLabel","checkSvg","theme","INPUT_CLASSNAME","background","COLOR","BLUE","borderColor","WHITE","border","markInvalid","RED","GRAY","borderRadius","boxSizing","content","display","height","margin","opacity","disabled","width","filterCheckboxProps","Checkbox","React","forwardRef","ref","id","Math","random","toString","children","style","marginBottom","CheckboxLabel","color","TEXT","a","LINK","textDecoration"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\nimport {Theme} from '../Layout';\nimport {Text, TextProps, textStyle, textLinkStyle} from '../Text';\nimport {filterProps} from '../util';\nimport {INPUT_CLASSNAME, Input, InputProps} from './Input';\n\nexport interface StyledLabelProps<T = HTMLLabelElement> extends React.HTMLProps<T> {\n  disabled?: boolean;\n  markInvalid?: boolean;\n}\n\nconst filterStyledLabelProps = (props: StyledLabelProps) => filterProps(props, ['markInvalid']);\n\nconst StyledLabel = (props: StyledLabelProps) => {\n  const checkSvg =\n    '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" viewBox=\"0 0 8 6\"><path fill=\"white\" d=\"M2.8 6L8 .7 7.3 0 2.8 4.6.7 2.4l-.7.7z\"/></svg>';\n  return (\n    <label\n      css={(theme: Theme) => ({\n        [`.${INPUT_CLASSNAME}:checked + &::before`]: {\n          background: `${COLOR.BLUE} url('data:image/svg+xml; utf8, ${checkSvg}') no-repeat center`,\n        },\n        [`.${INPUT_CLASSNAME}:focus + &::before`]: {\n          borderColor: COLOR.BLUE,\n        },\n        '&::before': {\n          background: COLOR.WHITE,\n          border: props.markInvalid ? `1px solid ${COLOR.RED}` : `1px solid ${COLOR.GRAY}`,\n          borderRadius: '1px',\n          boxSizing: 'border-box',\n          content: '\"\"',\n          display: 'inline-block',\n          height: '16px',\n          margin: '4px 8px 0 -16px',\n          opacity: props.disabled ? 0.56 : 1,\n          width: '16px',\n        },\n        a: {\n          ...textLinkStyle(theme, {}),\n        },\n        display: 'flex',\n        opacity: props.disabled ? 0.56 : 1,\n      })}\n      {...filterStyledLabelProps(props)}\n    />\n  );\n};\n\ninterface CheckboxProps<T = HTMLInputElement> extends InputProps<T> {\n  id?: string;\n}\n\nconst filterCheckboxProps = (props: CheckboxProps) => filterProps(props, ['markInvalid']);\n\nexport const Checkbox: React.FC<CheckboxProps<HTMLInputElement>> = React.forwardRef<\n  HTMLInputElement,\n  CheckboxProps<HTMLInputElement>\n>(({id = Math.random().toString(), children, style, disabled, ...props}, ref) => (\n  <div\n    css={{\n      alignItems: 'center',\n      display: 'flex',\n      justifyContent: 'flex-start',\n    }}\n    style={style}\n  >\n    <Input\n      type={'checkbox'}\n      id={id}\n      style={{\n        height: '16px',\n        marginBottom: '0',\n        opacity: 0,\n        width: '16px',\n      }}\n      disabled={disabled}\n      ref={ref}\n      {...filterCheckboxProps(props)}\n    />\n    <StyledLabel htmlFor={id} disabled={disabled} markInvalid={props.markInvalid}>\n      {children}\n    </StyledLabel>\n  </div>\n));\n\nexport type CheckboxLabelProps<T = HTMLSpanElement> = TextProps<T>;\n\nexport const CheckboxLabel = ({color = COLOR.TEXT, ...props}: CheckboxLabelProps) => (\n  <Text\n    css={(theme: Theme) => ({\n      ...textStyle(theme, {\n        color,\n        ...props,\n      }),\n      a: {\n        color: COLOR.LINK,\n        textDecoration: 'none',\n      },\n    })}\n    {...props}\n  />\n);\n"],"file":"Checkbox.js"}
+{"version":3,"sources":["Checkbox.tsx"],"names":["filterStyledLabelProps","props","checkSvg","StyledLabel","disabled","markInvalid","theme","INPUT_CLASSNAME","background","COLOR_V2","GRAY_60","BLUE","borderColor","GRAY_10","GRAY_20","border","RED","GRAY_80","borderRadius","boxSizing","content","display","height","lineHeight","margin","width","a","opacity","filterCheckboxProps","Checkbox","React","forwardRef","ref","id","children","style","marginBottom","CheckboxLabel","color","COLOR","TEXT","LINK","textDecoration"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {jsx} from '@emotion/react';\nimport React, {useId} from 'react';\n\nimport {COLOR, COLOR_V2} from '../Identity';\nimport {Theme} from '../Layout';\nimport {Text, TextProps, textStyle, textLinkStyle} from '../Text';\nimport {filterProps} from '../util';\nimport {INPUT_CLASSNAME, Input, InputProps} from './Input';\n\nexport interface StyledLabelProps<T = HTMLLabelElement> extends React.HTMLProps<T> {\n  disabled?: boolean;\n  markInvalid?: boolean;\n}\n\nconst filterStyledLabelProps = (props: StyledLabelProps) => filterProps(props, ['markInvalid']);\n\nconst checkSvg =\n  '<svg width=\"15\" height=\"13\" viewBox=\"0 0 16 13\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z\" fill=\"white\"/></svg>';\n\nconst StyledLabel = (props: StyledLabelProps) => {\n  const {disabled, markInvalid} = props;\n\n  return (\n    <label\n      css={(theme: Theme) => ({\n        [`.${INPUT_CLASSNAME}:checked + &::before`]: {\n          background: `${\n            disabled ? COLOR_V2.GRAY_60 : COLOR_V2.BLUE\n          } url('data:image/svg+xml; utf8, ${checkSvg}') no-repeat center`,\n          borderColor: COLOR_V2.BLUE,\n        },\n        ...(!disabled && {\n          [`.${INPUT_CLASSNAME}:focus + &::before`]: {\n            borderColor: COLOR_V2.BLUE,\n          },\n          [`.${INPUT_CLASSNAME}:hover + &::before`]: {\n            borderColor: COLOR_V2.BLUE,\n          },\n        }),\n        '&::before': {\n          background: disabled ? COLOR_V2.GRAY_10 : COLOR_V2.GRAY_20,\n          ...(!disabled\n            ? {\n                border: markInvalid ? `1.5px solid ${COLOR_V2.RED}` : `1.5px solid ${COLOR_V2.GRAY_80}`,\n              }\n            : {\n                border: `1.5px solid ${COLOR_V2.GRAY_60}`,\n              }),\n          borderRadius: '3px',\n          boxSizing: 'border-box',\n          content: '\"\"',\n          display: 'inline-block',\n          height: '22px',\n          lineHeight: '22px',\n          margin: '0 8px 0 -16px',\n          width: '22px',\n        },\n        a: {\n          ...textLinkStyle(theme, {}),\n        },\n        lineHeight: '22px',\n        display: 'flex',\n        opacity: disabled ? 0.56 : 1,\n      })}\n      {...filterStyledLabelProps(props)}\n    />\n  );\n};\n\ninterface CheckboxProps<T = HTMLInputElement> extends InputProps<T> {\n  id?: string;\n}\n\nconst filterCheckboxProps = (props: CheckboxProps) => filterProps(props, ['markInvalid']);\n\nexport const Checkbox: React.FC<CheckboxProps<HTMLInputElement>> = React.forwardRef<\n  HTMLInputElement,\n  CheckboxProps<HTMLInputElement>\n>(({id = useId(), children, style, disabled, ...props}, ref) => (\n  <div\n    css={{\n      alignItems: 'center',\n      display: 'flex',\n      justifyContent: 'flex-start',\n    }}\n    style={style}\n  >\n    <Input\n      type={'checkbox'}\n      id={id}\n      style={{\n        height: '22px',\n        marginBottom: '0',\n        opacity: 0,\n        width: '22px',\n      }}\n      disabled={disabled}\n      ref={ref}\n      {...filterCheckboxProps(props)}\n    />\n    <StyledLabel htmlFor={id} disabled={disabled} markInvalid={props.markInvalid}>\n      {children}\n    </StyledLabel>\n  </div>\n));\n\nexport type CheckboxLabelProps<T = HTMLSpanElement> = TextProps<T>;\n\nexport const CheckboxLabel = ({color = COLOR.TEXT, ...props}: CheckboxLabelProps) => (\n  <Text\n    css={(theme: Theme) => ({\n      ...textStyle(theme, {\n        color,\n        ...props,\n      }),\n      a: {\n        color: COLOR.LINK,\n        textDecoration: 'none',\n      },\n    })}\n    {...props}\n  />\n);\n"],"file":"Checkbox.js"}