@wireapp/react-ui-kit 7.55.0 → 8.0.0

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@7.55.2...@wireapp/react-ui-kit@8.0.0) (2022-04-20)
+
+
+### Features
+
+* upgrade to react 18 ([#4254](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/4254)) ([724e5a0](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/724e5a0d27578b07757c17662403a550c2817cc5))
+
+
+### BREAKING CHANGES
+
+* needs react 18
+
+
+
+
+
+## [7.55.2](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@7.55.1...@wireapp/react-ui-kit@7.55.2) (2022-04-06)
+
+
+### Bug Fixes
+
+* **react-ui-kit:** fix issue with mobile keyboard ([#4252](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/4252)) ([434a931](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/434a931a3b5794240583960505050c5b40916194))
+
+
+
+
+
+## [7.55.1](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@7.55.0...@wireapp/react-ui-kit@7.55.1) (2022-03-30)
+
+
+### Bug Fixes
+
+* **react-ui-kit/accessibility:** add aria-hidden to error message icon #ACC-23 ([#4249](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/4249)) ([f18e4ff](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/f18e4ff57d73a60b2a681f5c6db701e9cd029102)), closes [#ACC-23](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/ACC-23)
+
+
+
+
+
 # [7.55.0](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@7.54.0...@wireapp/react-ui-kit@7.55.0) (2021-12-02)
 
 

package/package.json

@@ -1,11 +1,10 @@
 {
   "dependencies": {
-    "@emotion/core": "10.1.1",
+    "@emotion/react": "11.9.0",
     "@types/color": "3.0.2",
     "bazinga64": "5.10.0",
     "color": "3.1.3",
-    "emotion-normalize": "10.1.0",
-    "emotion-theming": "10.0.27",
+    "emotion-normalize": "11.0.1",
     "react-transition-group": "4.4.2"
   },
   "devDependencies": {
@@ -16,21 +15,21 @@
     "@babel/preset-env": "7.14.9",
     "@babel/preset-react": "7.14.5",
     "@babel/preset-typescript": "7.14.5",
+    "@emotion/babel-plugin": "11.9.2",
+    "@emotion/jest": "11.9.1",
     "@hot-loader/react-dom": "17.0.1",
     "@types/jest": "26.0.24",
-    "@types/react": "17.0.15",
+    "@types/react": "18.0.5",
     "@types/webpack-env": "1.16.2",
     "babel-jest": "27.0.6",
     "babel-loader": "8.2.2",
-    "babel-plugin-emotion": "10.0.33",
     "jest": "26.6.1",
-    "jest-emotion": "10.0.32",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
     "react-helmet": "6.1.0",
     "react-hot-loader": "4.13.0",
-    "react-styleguidist": "11.1.7",
-    "react-test-renderer": "17.0.1",
+    "react-styleguidist": "11.2.0",
+    "react-test-renderer": "18.0.0",
     "rimraf": "3.0.2",
     "typescript": "4.4.2"
   },
@@ -68,6 +67,6 @@
     "test:update": "yarn test --updateSnapshot",
     "test:project": "yarn dist && yarn test"
   },
-  "version": "7.55.0",
-  "gitHead": "63d45c5a4ced820c52c3bce6f904370060bc588f"
+  "version": "8.0.0",
+  "gitHead": "25ba1b252f62a7b4902e1de54b77097b61014a84"
 }

package/src/Form/Button.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 /** @jsx jsx */
-import { CSSObject } from '@emotion/core';
+import { CSSObject, jsx } from '@emotion/react';
 import type { Theme } from '../Layout';
 import { TextProps } from '../Text';
 export interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {
@@ -10,5 +9,5 @@ export interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {
     showLoading?: boolean;
 }
 export declare const buttonStyle: <T>(theme: Theme, props: ButtonProps<T>) => CSSObject;
-export declare const Button: ({ showLoading, children, loadingColor, ...props }: ButtonProps) => JSX.Element;
+export declare const Button: ({ showLoading, children, loadingColor, ...props }: ButtonProps) => jsx.JSX.Element;
 export declare const filterButtonProps: (props: ButtonProps) => Object;

package/src/Form/Button.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _Identity = require("../Identity");
 
@@ -99,11 +99,11 @@ var Button = function Button(_ref2) {
       _ref2$loadingColor = _ref2.loadingColor,
       loadingColor = _ref2$loadingColor === void 0 ? _Identity.COLOR.WHITE : _ref2$loadingColor,
       props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
-  return (0, _core.jsx)("button", (0, _extends2["default"])({
+  return (0, _react.jsx)("button", (0, _extends2["default"])({
     css: function css(theme) {
       return buttonStyle(theme, props);
     }
-  }, filterButtonProps(props)), showLoading ? (0, _core.jsx)(_Misc.Loading, {
+  }, filterButtonProps(props)), showLoading ? (0, _react.jsx)(_Misc.Loading, {
     size: 30,
     color: loadingColor,
     style: {

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/core';\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 => 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":["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"}

package/src/Form/ButtonLink.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 /** @jsx jsx */
-import { CSSObject } from '@emotion/core';
+import { CSSObject, jsx } from '@emotion/react';
 import { ButtonProps } from './Button';
 import type { Theme } from '../Layout';
 export declare const buttonLinkStyle: (theme: Theme, props: ButtonProps<HTMLAnchorElement>) => CSSObject;
-export declare const ButtonLink: ({ children, showLoading, loadingColor, ...props }: ButtonProps<HTMLAnchorElement>) => JSX.Element;
+export declare const ButtonLink: ({ children, showLoading, loadingColor, ...props }: ButtonProps<HTMLAnchorElement>) => jsx.JSX.Element;

package/src/Form/ButtonLink.js

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _Misc = require("../Misc");
 
@@ -49,11 +49,11 @@ var ButtonLink = function ButtonLink(_ref) {
       _ref$loadingColor = _ref.loadingColor,
       loadingColor = _ref$loadingColor === void 0 ? _Identity.COLOR.WHITE : _ref$loadingColor,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return (0, _core.jsx)("a", (0, _extends2["default"])({
+  return (0, _react.jsx)("a", (0, _extends2["default"])({
     css: function css(theme) {
       return buttonLinkStyle(theme, props);
     }
-  }, filterButtonLinkProps(props)), showLoading ? (0, _core.jsx)(_Misc.Loading, {
+  }, filterButtonLinkProps(props)), showLoading ? (0, _react.jsx)(_Misc.Loading, {
     size: 30,
     color: loadingColor,
     style: {

package/src/Form/ButtonLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ButtonLink.tsx"],"names":["buttonLinkStyle","theme","props","display","filterButtonLinkProps","ButtonLink","children","showLoading","loadingColor","COLOR","WHITE","margin"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAGO,IAAMA,eAAmF,GAAG,SAAtFA,eAAsF,CAACC,KAAD,EAAQC,KAAR;AAAA,yCAC9F,yBAAYD,KAAZ,EAAmBC,KAAnB,CAD8F;AAEjGC,IAAAA,OAAO,EAAE;AAFwF;AAAA,CAA5F;;;;AAKP,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACF,KAAD,EAA2C;AACvE,SAAO,uBAAY,2BAAgBA,KAAhB,CAAZ,EAAsE,CAC3E,iBAD2E,EAE3E,UAF2E,EAG3E,WAH2E,CAAtE,CAAP;AAKD,CAND;;AAQO,IAAMG,UAAU,GAAG,SAAbA,UAAa;AAAA,MACxBC,QADwB,QACxBA,QADwB;AAAA,MAExBC,WAFwB,QAExBA,WAFwB;AAAA,+BAGxBC,YAHwB;AAAA,MAGxBA,YAHwB,kCAGTC,gBAAMC,KAHG;AAAA,MAIrBR,KAJqB;AAAA,SAMxB;AAAG,IAAA,GAAG,EAAE,aAAAD,KAAK;AAAA,aAAID,eAAe,CAACC,KAAD,EAAQC,KAAR,CAAnB;AAAA;AAAb,KAAoDE,qBAAqB,CAACF,KAAD,CAAzE,GACGK,WAAW,GAAG,eAAC,aAAD;AAAS,IAAA,IAAI,EAAE,EAAf;AAAmB,IAAA,KAAK,EAAEC,YAA1B;AAAwC,IAAA,KAAK,EAAE;AAACL,MAAAA,OAAO,EAAE,MAAV;AAAkBQ,MAAAA,MAAM,EAAE;AAA1B;AAA/C,IAAH,GAA0FL,QADxG,CANwB;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 {CSSObject, jsx} from '@emotion/core';\n\nimport {Loading} from '../Misc';\nimport {COLOR} from '../Identity';\nimport {filterProps} from '../util';\nimport {filterTextProps} from '../Text';\nimport {ButtonProps, buttonStyle} from './Button';\nimport type {Theme} from '../Layout';\n\nexport const buttonLinkStyle: (theme: Theme, props: ButtonProps<HTMLAnchorElement>) => CSSObject = (theme, props) => ({\n  ...buttonStyle(theme, props),\n  display: 'inline-flex !important',\n});\n\nconst filterButtonLinkProps = (props: ButtonProps<HTMLAnchorElement>) => {\n  return filterProps(filterTextProps(props) as ButtonProps<HTMLAnchorElement>, [\n    'backgroundColor',\n    'disabled',\n    'noCapital',\n  ]);\n};\n\nexport const ButtonLink = ({\n  children,\n  showLoading,\n  loadingColor = COLOR.WHITE,\n  ...props\n}: ButtonProps<HTMLAnchorElement>) => (\n  <a css={theme => buttonLinkStyle(theme, props)} {...filterButtonLinkProps(props)}>\n    {showLoading ? <Loading size={30} color={loadingColor} style={{display: 'flex', margin: 'auto'}} /> : children}\n  </a>\n);\n"],"file":"ButtonLink.js"}
+{"version":3,"sources":["ButtonLink.tsx"],"names":["buttonLinkStyle","theme","props","display","filterButtonLinkProps","ButtonLink","children","showLoading","loadingColor","COLOR","WHITE","margin"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAGO,IAAMA,eAAmF,GAAG,SAAtFA,eAAsF,CAACC,KAAD,EAAQC,KAAR;AAAA,yCAC9F,yBAAYD,KAAZ,EAAmBC,KAAnB,CAD8F;AAEjGC,IAAAA,OAAO,EAAE;AAFwF;AAAA,CAA5F;;;;AAKP,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACF,KAAD,EAA2C;AACvE,SAAO,uBAAY,2BAAgBA,KAAhB,CAAZ,EAAsE,CAC3E,iBAD2E,EAE3E,UAF2E,EAG3E,WAH2E,CAAtE,CAAP;AAKD,CAND;;AAQO,IAAMG,UAAU,GAAG,SAAbA,UAAa;AAAA,MACxBC,QADwB,QACxBA,QADwB;AAAA,MAExBC,WAFwB,QAExBA,WAFwB;AAAA,+BAGxBC,YAHwB;AAAA,MAGxBA,YAHwB,kCAGTC,gBAAMC,KAHG;AAAA,MAIrBR,KAJqB;AAAA,SAMxB;AAAG,IAAA,GAAG,EAAE,aAACD,KAAD;AAAA,aAAkBD,eAAe,CAACC,KAAD,EAAQC,KAAR,CAAjC;AAAA;AAAR,KAA6DE,qBAAqB,CAACF,KAAD,CAAlF,GACGK,WAAW,GAAG,gBAAC,aAAD;AAAS,IAAA,IAAI,EAAE,EAAf;AAAmB,IAAA,KAAK,EAAEC,YAA1B;AAAwC,IAAA,KAAK,EAAE;AAACL,MAAAA,OAAO,EAAE,MAAV;AAAkBQ,MAAAA,MAAM,EAAE;AAA1B;AAA/C,IAAH,GAA0FL,QADxG,CANwB;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 {CSSObject, jsx} from '@emotion/react';\n\nimport {Loading} from '../Misc';\nimport {COLOR} from '../Identity';\nimport {filterProps} from '../util';\nimport {filterTextProps} from '../Text';\nimport {ButtonProps, buttonStyle} from './Button';\nimport type {Theme} from '../Layout';\n\nexport const buttonLinkStyle: (theme: Theme, props: ButtonProps<HTMLAnchorElement>) => CSSObject = (theme, props) => ({\n  ...buttonStyle(theme, props),\n  display: 'inline-flex !important',\n});\n\nconst filterButtonLinkProps = (props: ButtonProps<HTMLAnchorElement>) => {\n  return filterProps(filterTextProps(props) as ButtonProps<HTMLAnchorElement>, [\n    'backgroundColor',\n    'disabled',\n    'noCapital',\n  ]);\n};\n\nexport const ButtonLink = ({\n  children,\n  showLoading,\n  loadingColor = COLOR.WHITE,\n  ...props\n}: ButtonProps<HTMLAnchorElement>) => (\n  <a css={(theme: Theme) => buttonLinkStyle(theme, props)} {...filterButtonLinkProps(props)}>\n    {showLoading ? <Loading size={30} color={loadingColor} style={{display: 'flex', margin: 'auto'}} /> : children}\n  </a>\n);\n"],"file":"ButtonLink.js"}

package/src/Form/Checkbox.d.ts

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { TextProps } from '../Text';
 import { InputProps } from './Input';
@@ -10,5 +12,5 @@ interface CheckboxProps<T = HTMLInputElement> extends InputProps<T> {
 }
 export declare const Checkbox: React.FC<CheckboxProps<HTMLInputElement>>;
 export declare type CheckboxLabelProps<T = HTMLSpanElement> = TextProps<T>;
-export declare const CheckboxLabel: ({ color, ...props }: CheckboxLabelProps) => JSX.Element;
+export declare const CheckboxLabel: ({ color, ...props }: CheckboxLabelProps) => jsx.JSX.Element;
 export {};

package/src/Form/Checkbox.js

@@ -13,9 +13,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
-var _react = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireDefault(require("react"));
 
 var _Identity = require("../Identity");
 
@@ -40,7 +40,7 @@ var filterStyledLabelProps = function filterStyledLabelProps(props) {
 
 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>';
-  return (0, _core.jsx)("label", (0, _extends2["default"])({
+  return (0, _react.jsx)("label", (0, _extends2["default"])({
     css: function css(theme) {
       var _ref;
 
@@ -69,26 +69,26 @@ var filterCheckboxProps = function filterCheckboxProps(props) {
 };
 
 var _ref3 = process.env.NODE_ENV === "production" ? {
-  name: "ofijmy-Checkbox",
-  styles: "align-items:center;display:flex;justify-content:flex-start;;label:Checkbox;"
+  name: "cz23tk",
+  styles: "align-items:center;display:flex;justify-content:flex-start"
 } : {
-  name: "ofijmy-Checkbox",
-  styles: "align-items:center;display:flex;justify-content:flex-start;;label:Checkbox;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNoZWNrYm94LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpRkkiLCJmaWxlIjoiQ2hlY2tib3gudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFdpcmVcbiAqIENvcHlyaWdodCAoQykgMjAxOCBXaXJlIFN3aXNzIEdtYkhcbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZnJlZSBzb2Z0d2FyZTogeW91IGNhbiByZWRpc3RyaWJ1dGUgaXQgYW5kL29yIG1vZGlmeVxuICogaXQgdW5kZXIgdGhlIHRlcm1zIG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBhcyBwdWJsaXNoZWQgYnlcbiAqIHRoZSBGcmVlIFNvZnR3YXJlIEZvdW5kYXRpb24sIGVpdGhlciB2ZXJzaW9uIDMgb2YgdGhlIExpY2Vuc2UsIG9yXG4gKiAoYXQgeW91ciBvcHRpb24pIGFueSBsYXRlciB2ZXJzaW9uLlxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBkaXN0cmlidXRlZCBpbiB0aGUgaG9wZSB0aGF0IGl0IHdpbGwgYmUgdXNlZnVsLFxuICogYnV0IFdJVEhPVVQgQU5ZIFdBUlJBTlRZOyB3aXRob3V0IGV2ZW4gdGhlIGltcGxpZWQgd2FycmFudHkgb2ZcbiAqIE1FUkNIQU5UQUJJTElUWSBvciBGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRS4gU2VlIHRoZVxuICogR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgZm9yIG1vcmUgZGV0YWlscy5cbiAqXG4gKiBZb3Ugc2hvdWxkIGhhdmUgcmVjZWl2ZWQgYSBjb3B5IG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZVxuICogYWxvbmcgd2l0aCB0aGlzIHByb2dyYW0uIElmIG5vdCwgc2VlIGh0dHA6Ly93d3cuZ251Lm9yZy9saWNlbnNlcy8uXG4gKlxuICovXG5cbi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHtqc3h9IGZyb20gJ0BlbW90aW9uL2NvcmUnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHtDT0xPUn0gZnJvbSAnLi4vSWRlbnRpdHknO1xuaW1wb3J0IHtUZXh0LCBUZXh0UHJvcHMsIHRleHRTdHlsZSwgdGV4dExpbmtTdHlsZX0gZnJvbSAnLi4vVGV4dCc7XG5pbXBvcnQge2ZpbHRlclByb3BzfSBmcm9tICcuLi91dGlsJztcbmltcG9ydCB7SU5QVVRfQ0xBU1NOQU1FLCBJbnB1dCwgSW5wdXRQcm9wc30gZnJvbSAnLi9JbnB1dCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgU3R5bGVkTGFiZWxQcm9wczxUID0gSFRNTExhYmVsRWxlbWVudD4gZXh0ZW5kcyBSZWFjdC5IVE1MUHJvcHM8VD4ge1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG4gIG1hcmtJbnZhbGlkPzogYm9vbGVhbjtcbn1cblxuY29uc3QgZmlsdGVyU3R5bGVkTGFiZWxQcm9wcyA9IChwcm9wczogU3R5bGVkTGFiZWxQcm9wcykgPT4gZmlsdGVyUHJvcHMocHJvcHMsIFsnbWFya0ludmFsaWQnXSk7XG5cbmNvbnN0IFN0eWxlZExhYmVsID0gKHByb3BzOiBTdHlsZWRMYWJlbFByb3BzKSA9PiB7XG4gIGNvbnN0IGNoZWNrU3ZnID1cbiAgICAnPHN2ZyB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIgd2lkdGg9XCIxMlwiIGhlaWdodD1cIjEwXCIgdmlld0JveD1cIjAgMCA4IDZcIj48cGF0aCBmaWxsPVwid2hpdGVcIiBkPVwiTTIuOCA2TDggLjcgNy4zIDAgMi44IDQuNi43IDIuNGwtLjcuN3pcIi8+PC9zdmc+JztcbiAgcmV0dXJuIChcbiAgICA8bGFiZWxcbiAgICAgIGNzcz17dGhlbWUgPT4gKHtcbiAgICAgICAgW2AuJHtJTlBVVF9DTEFTU05BTUV9OmNoZWNrZWQgKyAmOjpiZWZvcmVgXToge1xuICAgICAgICAgIGJhY2tncm91bmQ6IGAke0NPTE9SLkJMVUV9IHVybCgnZGF0YTppbWFnZS9zdmcreG1sOyB1dGY4LCAke2NoZWNrU3ZnfScpIG5vLXJlcGVhdCBjZW50ZXJgLFxuICAgICAgICB9LFxuICAgICAgICBbYC4ke0lOUFVUX0NMQVNTTkFNRX06Zm9jdXMgKyAmOjpiZWZvcmVgXToge1xuICAgICAgICAgIGJvcmRlckNvbG9yOiBDT0xPUi5CTFVFLFxuICAgICAgICB9LFxuICAgICAgICAnJjo6YmVmb3JlJzoge1xuICAgICAgICAgIGJhY2tncm91bmQ6IENPTE9SLldISVRFLFxuICAgICAgICAgIGJvcmRlcjogcHJvcHMubWFya0ludmFsaWQgPyBgMXB4IHNvbGlkICR7Q09MT1IuUkVEfWAgOiBgMXB4IHNvbGlkICR7Q09MT1IuR1JBWX1gLFxuICAgICAgICAgIGJvcmRlclJhZGl1czogJzFweCcsXG4gICAgICAgICAgYm94U2l6aW5nOiAnYm9yZGVyLWJveCcsXG4gICAgICAgICAgY29udGVudDogJ1wiXCInLFxuICAgICAgICAgIGRpc3BsYXk6ICdpbmxpbmUtYmxvY2snLFxuICAgICAgICAgIGhlaWdodDogJzE2cHgnLFxuICAgICAgICAgIG1hcmdpbjogJzRweCA4cHggMCAtMTZweCcsXG4gICAgICAgICAgb3BhY2l0eTogcHJvcHMuZGlzYWJsZWQgPyAwLjU2IDogMSxcbiAgICAgICAgICB3aWR0aDogJzE2cHgnLFxuICAgICAgICB9LFxuICAgICAgICBhOiB7XG4gICAgICAgICAgLi4udGV4dExpbmtTdHlsZSh0aGVtZSwge30pLFxuICAgICAgICB9LFxuICAgICAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgICAgIG9wYWNpdHk6IHByb3BzLmRpc2FibGVkID8gMC41NiA6IDEsXG4gICAgICB9KX1cbiAgICAgIHsuLi5maWx0ZXJTdHlsZWRMYWJlbFByb3BzKHByb3BzKX1cbiAgICAvPlxuICApO1xufTtcblxuaW50ZXJmYWNlIENoZWNrYm94UHJvcHM8VCA9IEhUTUxJbnB1dEVsZW1lbnQ+IGV4dGVuZHMgSW5wdXRQcm9wczxUPiB7XG4gIGlkPzogc3RyaW5nO1xufVxuXG5jb25zdCBmaWx0ZXJDaGVja2JveFByb3BzID0gKHByb3BzOiBDaGVja2JveFByb3BzKSA9PiBmaWx0ZXJQcm9wcyhwcm9wcywgWydtYXJrSW52YWxpZCddKTtcblxuZXhwb3J0IGNvbnN0IENoZWNrYm94OiBSZWFjdC5GQzxDaGVja2JveFByb3BzPEhUTUxJbnB1dEVsZW1lbnQ+PiA9IFJlYWN0LmZvcndhcmRSZWY8XG4gIEhUTUxJbnB1dEVsZW1lbnQsXG4gIENoZWNrYm94UHJvcHM8SFRNTElucHV0RWxlbWVudD5cbj4oKHtpZCA9IE1hdGgucmFuZG9tKCkudG9TdHJpbmcoKSwgY2hpbGRyZW4sIHN0eWxlLCBkaXNhYmxlZCwgLi4ucHJvcHN9LCByZWYpID0+IChcbiAgPGRpdlxuICAgIGNzcz17e1xuICAgICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgICBqdXN0aWZ5Q29udGVudDogJ2ZsZXgtc3RhcnQnLFxuICAgIH19XG4gICAgc3R5bGU9e3N0eWxlfVxuICA+XG4gICAgPElucHV0XG4gICAgICB0eXBlPXsnY2hlY2tib3gnfVxuICAgICAgaWQ9e2lkfVxuICAgICAgc3R5bGU9e3tcbiAgICAgICAgaGVpZ2h0OiAnMTZweCcsXG4gICAgICAgIG1hcmdpbkJvdHRvbTogJzAnLFxuICAgICAgICBvcGFjaXR5OiAwLFxuICAgICAgICB3aWR0aDogJzE2cHgnLFxuICAgICAgfX1cbiAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgIHJlZj17cmVmfVxuICAgICAgey4uLmZpbHRlckNoZWNrYm94UHJvcHMocHJvcHMpfVxuICAgIC8+XG4gICAgPFN0eWxlZExhYmVsIGh0bWxGb3I9e2lkfSBkaXNhYmxlZD17ZGlzYWJsZWR9IG1hcmtJbnZhbGlkPXtwcm9wcy5tYXJrSW52YWxpZH0+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9TdHlsZWRMYWJlbD5cbiAgPC9kaXY+XG4pKTtcblxuZXhwb3J0IHR5cGUgQ2hlY2tib3hMYWJlbFByb3BzPFQgPSBIVE1MU3BhbkVsZW1lbnQ+ID0gVGV4dFByb3BzPFQ+O1xuXG5leHBvcnQgY29uc3QgQ2hlY2tib3hMYWJlbCA9ICh7Y29sb3IgPSBDT0xPUi5URVhULCAuLi5wcm9wc306IENoZWNrYm94TGFiZWxQcm9wcykgPT4gKFxuICA8VGV4dFxuICAgIGNzcz17dGhlbWUgPT4gKHtcbiAgICAgIC4uLnRleHRTdHlsZSh0aGVtZSwge1xuICAgICAgICBjb2xvcixcbiAgICAgICAgLi4ucHJvcHMsXG4gICAgICB9KSxcbiAgICAgIGE6IHtcbiAgICAgICAgY29sb3I6IENPTE9SLkxJTkssXG4gICAgICAgIHRleHREZWNvcmF0aW9uOiAnbm9uZScsXG4gICAgICB9LFxuICAgIH0pfVxuICAgIHsuLi5wcm9wc31cbiAgLz5cbik7XG4iXX0= */",
+  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== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var Checkbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
+var Checkbox = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref) {
   var _ref2$id = _ref2.id,
       id = _ref2$id === void 0 ? Math.random().toString() : _ref2$id,
       children = _ref2.children,
       style = _ref2.style,
       disabled = _ref2.disabled,
       props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: _ref3,
     style: style
-  }, (0, _core.jsx)(_Input.Input, (0, _extends2["default"])({
+  }, (0, _react.jsx)(_Input.Input, (0, _extends2["default"])({
     type: 'checkbox',
     id: id,
     style: {
@@ -99,7 +99,7 @@ var Checkbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
     },
     disabled: disabled,
     ref: ref
-  }, filterCheckboxProps(props))), (0, _core.jsx)(StyledLabel, {
+  }, filterCheckboxProps(props))), (0, _react.jsx)(StyledLabel, {
     htmlFor: id,
     disabled: disabled,
     markInvalid: props.markInvalid
@@ -112,7 +112,7 @@ var CheckboxLabel = function CheckboxLabel(_ref4) {
   var _ref4$color = _ref4.color,
       color = _ref4$color === void 0 ? _Identity.COLOR.TEXT : _ref4$color,
       props = (0, _objectWithoutProperties2["default"])(_ref4, _excluded2);
-  return (0, _core.jsx)(_Text.Text, (0, _extends2["default"])({
+  return (0, _react.jsx)(_Text.Text, (0, _extends2["default"])({
     css: function css(theme) {
       return _objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
         color: color

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/core';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\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 => ({\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 => ({\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","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"}

package/src/Form/CodeInput.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { InputProps } from './Input';
 export interface CodeInputProps<T = HTMLInputElement> extends InputProps<T> {
     autoFocus?: boolean;
@@ -6,4 +7,4 @@ export interface CodeInputProps<T = HTMLInputElement> extends InputProps<T> {
     markInvalid?: boolean;
     onCodeComplete?: (completeCode?: string) => void;
 }
-export declare const CodeInput: ({ style, digits, autoFocus, markInvalid, onCodeComplete, disabled, }: CodeInputProps) => JSX.Element;
+export declare const CodeInput: ({ style, digits, autoFocus, markInvalid, onCodeComplete, disabled, }: CodeInputProps) => jsx.JSX.Element;

package/src/Form/CodeInput.js

@@ -15,9 +15,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
-var _react = _interopRequireWildcard(require("react"));
+var _react2 = _interopRequireWildcard(require("react"));
 
 var _util = require("../util");
 
@@ -34,17 +34,17 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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)."; }
 
 var _ref = process.env.NODE_ENV === "production" ? {
-  name: "140dmuy-CodeInputWrapper",
-  styles: "display:flex;justify-content:center;;label:CodeInputWrapper;"
+  name: "zl1inp",
+  styles: "display:flex;justify-content:center"
 } : {
-  name: "140dmuy-CodeInputWrapper",
-  styles: "display:flex;justify-content:center;;label:CodeInputWrapper;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvZGVJbnB1dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkJJIiwiZmlsZSI6IkNvZGVJbnB1dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDE4IFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge0NTU09iamVjdCwganN4fSBmcm9tICdAZW1vdGlvbi9jb3JlJztcbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHR5cGUge1RoZW1lfSBmcm9tICcuLi9MYXlvdXQnO1xuaW1wb3J0IHtub29wfSBmcm9tICcuLi91dGlsJztcbmltcG9ydCB7SW5wdXRQcm9wcywgaW5wdXRTdHlsZX0gZnJvbSAnLi9JbnB1dCc7XG5cbmNvbnN0IENvZGVJbnB1dFdyYXBwZXIgPSAocHJvcHM6IFJlYWN0LkhUTUxQcm9wczxIVE1MRGl2RWxlbWVudD4pID0+IChcbiAgPGRpdlxuICAgIGNzcz17e1xuICAgICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgICAganVzdGlmeUNvbnRlbnQ6ICdjZW50ZXInLFxuICAgIH19XG4gICAgey4uLnByb3BzfVxuICAvPlxuKTtcblxudHlwZSBEaWdpdElucHV0UHJvcHM8VCA9IEhUTUxJbnB1dEVsZW1lbnQ+ID0gSW5wdXRQcm9wczxUPjtcblxuY29uc3QgZGlnaXRJbnB1dFN0eWxlOiA8VD4odGhlbWU6IFRoZW1lLCBwcm9wczogRGlnaXRJbnB1dFByb3BzPFQ+KSA9PiBDU1NPYmplY3QgPSAodGhlbWUsIHByb3BzKSA9PiAoe1xuICAuLi5pbnB1dFN0eWxlKHRoZW1lLCBwcm9wcyksXG4gICcmICsgJic6IHtcbiAgICBtYXJnaW5MZWZ0OiAnMTlweCcsXG4gIH0sXG4gIGZvbnRTaXplOiAnMzJweCcsXG4gIGxpbmVIZWlnaHQ6ICc1NnB4JyxcbiAgcGFkZGluZzogMCxcbiAgdGV4dEFsaWduOiAnY2VudGVyJyxcbiAgd2lkdGg6ICc0OHB4Jyxcbn0pO1xuXG5jb25zdCBEaWdpdElucHV0OiBSZWFjdC5GQzxEaWdpdElucHV0UHJvcHM8SFRNTElucHV0RWxlbWVudD4+ID0gUmVhY3QuZm9yd2FyZFJlZjxcbiAgSFRNTElucHV0RWxlbWVudCxcbiAgRGlnaXRJbnB1dFByb3BzPEhUTUxJbnB1dEVsZW1lbnQ+XG4+KChwcm9wcywgcmVmKSA9PiA8aW5wdXQgcmVmPXtyZWZ9IGNzcz17dGhlbWUgPT4gZGlnaXRJbnB1dFN0eWxlKHRoZW1lLCBwcm9wcyl9IHsuLi5wcm9wc30gLz4pO1xuXG5leHBvcnQgaW50ZXJmYWNlIENvZGVJbnB1dFByb3BzPFQgPSBIVE1MSW5wdXRFbGVtZW50PiBleHRlbmRzIElucHV0UHJvcHM8VD4ge1xuICBhdXRvRm9jdXM/OiBib29sZWFuO1xuICBkaWdpdHM/OiBudW1iZXI7XG4gIG1hcmtJbnZhbGlkPzogYm9vbGVhbjtcbiAgb25Db2RlQ29tcGxldGU/OiAoY29tcGxldGVDb2RlPzogc3RyaW5nKSA9PiB2b2lkO1xufVxuXG5leHBvcnQgY29uc3QgQ29kZUlucHV0ID0gKHtcbiAgc3R5bGUsXG4gIGRpZ2l0cyA9IDYsXG4gIGF1dG9Gb2N1cyA9IGZhbHNlLFxuICBtYXJrSW52YWxpZCxcbiAgb25Db2RlQ29tcGxldGUgPSBub29wLFxuICBkaXNhYmxlZCxcbn06IENvZGVJbnB1dFByb3BzKSA9PiB7XG4gIGNvbnN0IFt2YWx1ZXMsIHNldFZhbHVlc10gPSB1c2VTdGF0ZShBcnJheShkaWdpdHMpLmZpbGwoJycpKTtcbiAgY29uc3QgaW5wdXRzID0gQXJyYXkoZGlnaXRzKTtcblxuICBjb25zdCBmb3JjZVNlbGVjdGlvbiA9IChcbiAgICBldmVudDpcbiAgICAgIHwgUmVhY3QuTW91c2VFdmVudDxIVE1MSW5wdXRFbGVtZW50PlxuICAgICAgfCBSZWFjdC5Ub3VjaEV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+XG4gICAgICB8IFJlYWN0LktleWJvYXJkRXZlbnQ8SFRNTElucHV0RWxlbWVudD5cbiAgICAgIHwgUmVhY3QuRm9jdXNFdmVudDxIVE1MSW5wdXRFbGVtZW50PixcbiAgKSA9PiB7XG4gICAgY29uc3QgdGFyZ2V0ID0gZXZlbnQudGFyZ2V0IGFzIEhUTUxJbnB1dEVsZW1lbnQ7XG4gICAgdGFyZ2V0LnNlbGVjdCgpO1xuICB9O1xuXG4gIGNvbnN0IGZvcmNlU2VsZWN0aW9uUHJldmVudERlZmF1bHQgPSAoXG4gICAgZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQ8SFRNTElucHV0RWxlbWVudD4gfCBSZWFjdC5Ub3VjaEV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+LFxuICApID0+IHtcbiAgICBmb3JjZVNlbGVjdGlvbihldmVudCk7XG4gICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgfTtcblxuICBjb25zdCBuZXh0RmllbGQgPSAoY3VycmVudEZpZWxkSW5kZXg6IG51bWJlcikgPT4ge1xuICAgIGNvbnN0IG5leHRGaWVsZEluZGV4ID0gY3VycmVudEZpZWxkSW5kZXggKyAxO1xuICAgIGlmIChuZXh0RmllbGRJbmRleCA8IGRpZ2l0cykge1xuICAgICAgaW5wdXRzW25leHRGaWVsZEluZGV4XS5mb2N1cygpO1xuICAgIH1cbiAgfTtcblxuICBjb25zdCBwcmV2aW91c0ZpZWxkID0gKGN1cnJlbnRGaWVsZEluZGV4OiBudW1iZXIpID0+IHtcbiAgICBpZiAoY3VycmVudEZpZWxkSW5kZXggPiAwKSB7XG4gICAgICBpbnB1dHNbY3VycmVudEZpZWxkSW5kZXggLSAxXS5mb2N1cygpO1xuICAgIH1cbiAgfTtcblxuICBjb25zdCBzZXRWYWx1ZSA9IChmaWVsZEluZGV4OiBudW1iZXIsIHZhbHVlOiBzdHJpbmcpID0+IHtcbiAgICBpZiAoL15bMC05XT8kLy50ZXN0KHZhbHVlKSkge1xuICAgICAgY29uc3QgdmFsdWVzQ29weSA9IHZhbHVlcy5zbGljZSgpO1xuICAgICAgdmFsdWVzQ29weVtmaWVsZEluZGV4XSA9IHZhbHVlO1xuICAgICAgc2V0VmFsdWVzKHZhbHVlc0NvcHkpO1xuICAgICAgaWYgKHZhbHVlLmxlbmd0aCkge1xuICAgICAgICBuZXh0RmllbGQoZmllbGRJbmRleCk7XG4gICAgICB9XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUtleURvd24gPSAoZmllbGRJbmRleDogbnVtYmVyLCB7a2V5fTogUmVhY3QuS2V5Ym9hcmRFdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4ge1xuICAgIHN3aXRjaCAoa2V5KSB7XG4gICAgICBjYXNlICdCYWNrc3BhY2UnOlxuICAgICAgICBzZXRWYWx1ZShmaWVsZEluZGV4LCAnJyk7XG4gICAgICAgIHByZXZpb3VzRmllbGQoZmllbGRJbmRleCk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnQXJyb3dMZWZ0JzpcbiAgICAgICAgcHJldmlvdXNGaWVsZChmaWVsZEluZGV4KTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdBcnJvd1JpZ2h0JzpcbiAgICAgICAgbmV4dEZpZWxkKGZpZWxkSW5kZXgpO1xuICAgICAgICBicmVhaztcbiAgICB9XG4gICAgaWYgKC9eWzAtOV0kLy50ZXN0KGtleSkpIHtcbiAgICAgIHNldFZhbHVlKGZpZWxkSW5kZXgsIGtleSk7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZVBhc3RlID0gKGZpZWxkSW5kZXg6IG51bWJlciwgZXZlbnQ6IFJlYWN0LkNsaXBib2FyZEV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSA9PiB7XG4gICAgY29uc3QgcGFzdGVkVmFsdWUgPSBldmVudC5jbGlwYm9hcmREYXRhLmdldERhdGEoJ1RleHQnKTtcbiAgICBjb25zdCBjbGVhbmVkUGFzdGUgPSBwYXN0ZWRWYWx1ZS5yZXBsYWNlKC9bXjAtOV0vZywgJycpO1xuICAgIGlmICgvXlswLTldKyQvLnRlc3QoY2xlYW5lZFBhc3RlKSkge1xuICAgICAgc2V0VmFsdWVzKHZhbHVlcy5zbGljZSgwLCBmaWVsZEluZGV4KS5jb25jYXQoY2xlYW5lZFBhc3RlLnNwbGl0KCcnKSkuc2xpY2UoMCwgZGlnaXRzKSk7XG4gICAgfVxuICB9O1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgY29tcGxldGVDb2RlID0gdmFsdWVzLmpvaW4oJycpO1xuICAgIGlmIChjb21wbGV0ZUNvZGUubGVuZ3RoID09PSBkaWdpdHMpIHtcbiAgICAgIG9uQ29kZUNvbXBsZXRlKGNvbXBsZXRlQ29kZSk7XG4gICAgfVxuICB9LCBbdmFsdWVzXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8Q29kZUlucHV0V3JhcHBlciBzdHlsZT17c3R5bGV9PlxuICAgICAge0FycmF5LmZyb20oe2xlbmd0aDogZGlnaXRzfSwgKF8sIGluZGV4KSA9PiAoXG4gICAgICAgIDxEaWdpdElucHV0XG4gICAgICAgICAgYXV0b0ZvY3VzPXtpbmRleCA9PT0gMCAmJiBhdXRvRm9jdXN9XG4gICAgICAgICAga2V5PXtpbmRleH1cbiAgICAgICAgICBvblBhc3RlPXtldmVudCA9PiBoYW5kbGVQYXN0ZShpbmRleCwgZXZlbnQpfVxuICAgICAgICAgIG9uRm9jdXM9e2ZvcmNlU2VsZWN0aW9ufVxuICAgICAgICAgIG9uTW91c2VEb3duPXtmb3JjZVNlbGVjdGlvblByZXZlbnREZWZhdWx0fVxuICAgICAgICAgIG9uVG91Y2hTdGFydD17Zm9yY2VTZWxlY3Rpb25QcmV2ZW50RGVmYXVsdH1cbiAgICAgICAgICBvbktleURvd249e2V2ZW50ID0+IGhhbmRsZUtleURvd24oaW5kZXgsIGV2ZW50KX1cbiAgICAgICAgICBvbktleVVwPXtmb3JjZVNlbGVjdGlvbn1cbiAgICAgICAgICBtYXJrSW52YWxpZD17bWFya0ludmFsaWR9XG4gICAgICAgICAgcmVmPXtub2RlID0+IChpbnB1dHNbaW5kZXhdID0gbm9kZSl9XG4gICAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICAgIHZhbHVlPXt2YWx1ZXNbaW5kZXhdfVxuICAgICAgICAgIG9uQ2hhbmdlPXsoKSA9PiB7fX1cbiAgICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgIC8+XG4gICAgICApKX1cbiAgICA8L0NvZGVJbnB1dFdyYXBwZXI+XG4gICk7XG59O1xuIl19 */",
+  name: "tvpiqi-CodeInputWrapper",
+  styles: "display:flex;justify-content:center;label:CodeInputWrapper;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvZGVJbnB1dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkJJIiwiZmlsZSI6IkNvZGVJbnB1dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDE4IFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge0NTU09iamVjdCwganN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgUmVhY3QsIHt1c2VFZmZlY3QsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB0eXBlIHtUaGVtZX0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB7bm9vcH0gZnJvbSAnLi4vdXRpbCc7XG5pbXBvcnQge0lucHV0UHJvcHMsIGlucHV0U3R5bGV9IGZyb20gJy4vSW5wdXQnO1xuXG5jb25zdCBDb2RlSW5wdXRXcmFwcGVyID0gKHByb3BzOiBSZWFjdC5IVE1MUHJvcHM8SFRNTERpdkVsZW1lbnQ+KSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e3tcbiAgICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICAgIGp1c3RpZnlDb250ZW50OiAnY2VudGVyJyxcbiAgICB9fVxuICAgIHsuLi5wcm9wc31cbiAgLz5cbik7XG5cbnR5cGUgRGlnaXRJbnB1dFByb3BzPFQgPSBIVE1MSW5wdXRFbGVtZW50PiA9IElucHV0UHJvcHM8VD47XG5cbmNvbnN0IGRpZ2l0SW5wdXRTdHlsZTogPFQ+KHRoZW1lOiBUaGVtZSwgcHJvcHM6IERpZ2l0SW5wdXRQcm9wczxUPikgPT4gQ1NTT2JqZWN0ID0gKHRoZW1lLCBwcm9wcykgPT4gKHtcbiAgLi4uaW5wdXRTdHlsZSh0aGVtZSwgcHJvcHMpLFxuICAnJiArICYnOiB7XG4gICAgbWFyZ2luTGVmdDogJzE5cHgnLFxuICB9LFxuICBmb250U2l6ZTogJzMycHgnLFxuICBsaW5lSGVpZ2h0OiAnNTZweCcsXG4gIHBhZGRpbmc6IDAsXG4gIHRleHRBbGlnbjogJ2NlbnRlcicsXG4gIHdpZHRoOiAnNDhweCcsXG59KTtcblxuY29uc3QgRGlnaXRJbnB1dDogUmVhY3QuRkM8RGlnaXRJbnB1dFByb3BzPEhUTUxJbnB1dEVsZW1lbnQ+PiA9IFJlYWN0LmZvcndhcmRSZWY8XG4gIEhUTUxJbnB1dEVsZW1lbnQsXG4gIERpZ2l0SW5wdXRQcm9wczxIVE1MSW5wdXRFbGVtZW50PlxuPigocHJvcHMsIHJlZikgPT4gPGlucHV0IHJlZj17cmVmfSBjc3M9eyh0aGVtZTogVGhlbWUpID0+IGRpZ2l0SW5wdXRTdHlsZSh0aGVtZSwgcHJvcHMpfSB7Li4ucHJvcHN9IHR5cGU9XCJ0ZWxcIiAvPik7XG5cbmV4cG9ydCBpbnRlcmZhY2UgQ29kZUlucHV0UHJvcHM8VCA9IEhUTUxJbnB1dEVsZW1lbnQ+IGV4dGVuZHMgSW5wdXRQcm9wczxUPiB7XG4gIGF1dG9Gb2N1cz86IGJvb2xlYW47XG4gIGRpZ2l0cz86IG51bWJlcjtcbiAgbWFya0ludmFsaWQ/OiBib29sZWFuO1xuICBvbkNvZGVDb21wbGV0ZT86IChjb21wbGV0ZUNvZGU/OiBzdHJpbmcpID0+IHZvaWQ7XG59XG5cbmV4cG9ydCBjb25zdCBDb2RlSW5wdXQgPSAoe1xuICBzdHlsZSxcbiAgZGlnaXRzID0gNixcbiAgYXV0b0ZvY3VzID0gZmFsc2UsXG4gIG1hcmtJbnZhbGlkLFxuICBvbkNvZGVDb21wbGV0ZSA9IG5vb3AsXG4gIGRpc2FibGVkLFxufTogQ29kZUlucHV0UHJvcHMpID0+IHtcbiAgY29uc3QgW3ZhbHVlcywgc2V0VmFsdWVzXSA9IHVzZVN0YXRlKEFycmF5KGRpZ2l0cykuZmlsbCgnJykpO1xuICBjb25zdCBpbnB1dHMgPSBBcnJheShkaWdpdHMpO1xuXG4gIGNvbnN0IGZvcmNlU2VsZWN0aW9uID0gKFxuICAgIGV2ZW50OlxuICAgICAgfCBSZWFjdC5Nb3VzZUV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+XG4gICAgICB8IFJlYWN0LlRvdWNoRXZlbnQ8SFRNTElucHV0RWxlbWVudD5cbiAgICAgIHwgUmVhY3QuS2V5Ym9hcmRFdmVudDxIVE1MSW5wdXRFbGVtZW50PlxuICAgICAgfCBSZWFjdC5Gb2N1c0V2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+LFxuICApID0+IHtcbiAgICBjb25zdCB0YXJnZXQgPSBldmVudC50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudDtcbiAgICB0YXJnZXQuc2VsZWN0KCk7XG4gIH07XG5cbiAgY29uc3QgZm9yY2VTZWxlY3Rpb25QcmV2ZW50RGVmYXVsdCA9IChcbiAgICBldmVudDogUmVhY3QuTW91c2VFdmVudDxIVE1MSW5wdXRFbGVtZW50PiB8IFJlYWN0LlRvdWNoRXZlbnQ8SFRNTElucHV0RWxlbWVudD4sXG4gICkgPT4ge1xuICAgIGZvcmNlU2VsZWN0aW9uKGV2ZW50KTtcbiAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICB9O1xuXG4gIGNvbnN0IG5leHRGaWVsZCA9IChjdXJyZW50RmllbGRJbmRleDogbnVtYmVyKSA9PiB7XG4gICAgY29uc3QgbmV4dEZpZWxkSW5kZXggPSBjdXJyZW50RmllbGRJbmRleCArIDE7XG4gICAgaWYgKG5leHRGaWVsZEluZGV4IDwgZGlnaXRzKSB7XG4gICAgICBpbnB1dHNbbmV4dEZpZWxkSW5kZXhdLmZvY3VzKCk7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IHByZXZpb3VzRmllbGQgPSAoY3VycmVudEZpZWxkSW5kZXg6IG51bWJlcikgPT4ge1xuICAgIGlmIChjdXJyZW50RmllbGRJbmRleCA+IDApIHtcbiAgICAgIGlucHV0c1tjdXJyZW50RmllbGRJbmRleCAtIDFdLmZvY3VzKCk7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IHNldFZhbHVlID0gKGZpZWxkSW5kZXg6IG51bWJlciwgdmFsdWU6IHN0cmluZykgPT4ge1xuICAgIGlmICgvXlswLTldPyQvLnRlc3QodmFsdWUpKSB7XG4gICAgICBjb25zdCB2YWx1ZXNDb3B5ID0gdmFsdWVzLnNsaWNlKCk7XG4gICAgICB2YWx1ZXNDb3B5W2ZpZWxkSW5kZXhdID0gdmFsdWU7XG4gICAgICBzZXRWYWx1ZXModmFsdWVzQ29weSk7XG4gICAgICBpZiAodmFsdWUubGVuZ3RoKSB7XG4gICAgICAgIG5leHRGaWVsZChmaWVsZEluZGV4KTtcbiAgICAgIH1cbiAgICB9XG4gIH07XG5cbiAgY29uc3QgaGFuZGxlS2V5RG93biA9IChmaWVsZEluZGV4OiBudW1iZXIsIHtrZXl9OiBSZWFjdC5LZXlib2FyZEV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSA9PiB7XG4gICAgc3dpdGNoIChrZXkpIHtcbiAgICAgIGNhc2UgJ0JhY2tzcGFjZSc6XG4gICAgICAgIHNldFZhbHVlKGZpZWxkSW5kZXgsICcnKTtcbiAgICAgICAgcHJldmlvdXNGaWVsZChmaWVsZEluZGV4KTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdBcnJvd0xlZnQnOlxuICAgICAgICBwcmV2aW91c0ZpZWxkKGZpZWxkSW5kZXgpO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ0Fycm93UmlnaHQnOlxuICAgICAgICBuZXh0RmllbGQoZmllbGRJbmRleCk7XG4gICAgICAgIGJyZWFrO1xuICAgIH1cbiAgICBpZiAoL15bMC05XSQvLnRlc3Qoa2V5KSkge1xuICAgICAgc2V0VmFsdWUoZmllbGRJbmRleCwga2V5KTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgaGFuZGxlUGFzdGUgPSAoZmllbGRJbmRleDogbnVtYmVyLCBldmVudDogUmVhY3QuQ2xpcGJvYXJkRXZlbnQ8SFRNTElucHV0RWxlbWVudD4pID0+IHtcbiAgICBjb25zdCBwYXN0ZWRWYWx1ZSA9IGV2ZW50LmNsaXBib2FyZERhdGEuZ2V0RGF0YSgnVGV4dCcpO1xuICAgIGNvbnN0IGNsZWFuZWRQYXN0ZSA9IHBhc3RlZFZhbHVlLnJlcGxhY2UoL1teMC05XS9nLCAnJyk7XG4gICAgaWYgKC9eWzAtOV0rJC8udGVzdChjbGVhbmVkUGFzdGUpKSB7XG4gICAgICBzZXRWYWx1ZXModmFsdWVzLnNsaWNlKDAsIGZpZWxkSW5kZXgpLmNvbmNhdChjbGVhbmVkUGFzdGUuc3BsaXQoJycpKS5zbGljZSgwLCBkaWdpdHMpKTtcbiAgICB9XG4gIH07XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBjb25zdCBjb21wbGV0ZUNvZGUgPSB2YWx1ZXMuam9pbignJyk7XG4gICAgaWYgKGNvbXBsZXRlQ29kZS5sZW5ndGggPT09IGRpZ2l0cykge1xuICAgICAgb25Db2RlQ29tcGxldGUoY29tcGxldGVDb2RlKTtcbiAgICB9XG4gIH0sIFt2YWx1ZXNdKTtcblxuICByZXR1cm4gKFxuICAgIDxDb2RlSW5wdXRXcmFwcGVyIHN0eWxlPXtzdHlsZX0+XG4gICAgICB7QXJyYXkuZnJvbSh7bGVuZ3RoOiBkaWdpdHN9LCAoXywgaW5kZXgpID0+IChcbiAgICAgICAgPERpZ2l0SW5wdXRcbiAgICAgICAgICBhdXRvRm9jdXM9e2luZGV4ID09PSAwICYmIGF1dG9Gb2N1c31cbiAgICAgICAgICBrZXk9e2luZGV4fVxuICAgICAgICAgIG9uUGFzdGU9e2V2ZW50ID0+IGhhbmRsZVBhc3RlKGluZGV4LCBldmVudCl9XG4gICAgICAgICAgb25Gb2N1cz17Zm9yY2VTZWxlY3Rpb259XG4gICAgICAgICAgb25Nb3VzZURvd249e2ZvcmNlU2VsZWN0aW9uUHJldmVudERlZmF1bHR9XG4gICAgICAgICAgb25Ub3VjaFN0YXJ0PXtmb3JjZVNlbGVjdGlvblByZXZlbnREZWZhdWx0fVxuICAgICAgICAgIG9uS2V5RG93bj17ZXZlbnQgPT4gaGFuZGxlS2V5RG93bihpbmRleCwgZXZlbnQpfVxuICAgICAgICAgIG9uS2V5VXA9e2ZvcmNlU2VsZWN0aW9ufVxuICAgICAgICAgIG1hcmtJbnZhbGlkPXttYXJrSW52YWxpZH1cbiAgICAgICAgICByZWY9e25vZGUgPT4gKGlucHV0c1tpbmRleF0gPSBub2RlKX1cbiAgICAgICAgICB2YWx1ZT17dmFsdWVzW2luZGV4XX1cbiAgICAgICAgICBvbkNoYW5nZT17KCkgPT4ge319XG4gICAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICAvPlxuICAgICAgKSl9XG4gICAgPC9Db2RlSW5wdXRXcmFwcGVyPlxuICApO1xufTtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
 var CodeInputWrapper = function CodeInputWrapper(props) {
-  return (0, _core.jsx)("div", (0, _extends2["default"])({
+  return (0, _react.jsx)("div", (0, _extends2["default"])({
     css: _ref
   }, props));
 };
@@ -62,13 +62,15 @@ var digitInputStyle = function digitInputStyle(theme, props) {
   });
 };
 
-var DigitInput = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
-  return (0, _core.jsx)("input", (0, _extends2["default"])({
+var DigitInput = /*#__PURE__*/_react2["default"].forwardRef(function (props, ref) {
+  return (0, _react.jsx)("input", (0, _extends2["default"])({
     ref: ref,
     css: function css(theme) {
       return digitInputStyle(theme, props);
     }
-  }, props));
+  }, props, {
+    type: "tel"
+  }));
 });
 
 var CodeInput = function CodeInput(_ref2) {
@@ -82,7 +84,7 @@ var CodeInput = function CodeInput(_ref2) {
       onCodeComplete = _ref2$onCodeComplete === void 0 ? _util.noop : _ref2$onCodeComplete,
       disabled = _ref2.disabled;
 
-  var _useState = (0, _react.useState)(Array(digits).fill('')),
+  var _useState = (0, _react2.useState)(Array(digits).fill('')),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       values = _useState2[0],
       setValues = _useState2[1];
@@ -157,19 +159,19 @@ var CodeInput = function CodeInput(_ref2) {
     }
   };
 
-  (0, _react.useEffect)(function () {
+  (0, _react2.useEffect)(function () {
     var completeCode = values.join('');
 
     if (completeCode.length === digits) {
       onCodeComplete(completeCode);
     }
   }, [values]);
-  return (0, _core.jsx)(CodeInputWrapper, {
+  return (0, _react.jsx)(CodeInputWrapper, {
     style: style
   }, Array.from({
     length: digits
   }, function (_, index) {
-    return (0, _core.jsx)(DigitInput, {
+    return (0, _react.jsx)(DigitInput, {
       autoFocus: index === 0 && autoFocus,
       key: index,
       onPaste: function onPaste(event) {
@@ -186,7 +188,6 @@ var CodeInput = function CodeInput(_ref2) {
       ref: function ref(node) {
         return inputs[index] = node;
       },
-      type: "text",
       value: values[index],
       onChange: function onChange() {},
       disabled: disabled

package/src/Form/CodeInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CodeInput.tsx"],"names":["CodeInputWrapper","props","digitInputStyle","theme","marginLeft","fontSize","lineHeight","padding","textAlign","width","DigitInput","React","forwardRef","ref","CodeInput","style","digits","autoFocus","markInvalid","onCodeComplete","noop","disabled","Array","fill","values","setValues","inputs","forceSelection","event","target","select","forceSelectionPreventDefault","preventDefault","nextField","currentFieldIndex","nextFieldIndex","focus","previousField","setValue","fieldIndex","value","test","valuesCopy","slice","length","handleKeyDown","key","handlePaste","pastedValue","clipboardData","getData","cleanedPaste","replace","concat","split","completeCode","join","from","_","index","node"],"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/core';\nimport React, {useEffect, useState} from 'react';\n\nimport type {Theme} from '../Layout';\nimport {noop} from '../util';\nimport {InputProps, inputStyle} from './Input';\n\nconst CodeInputWrapper = (props: React.HTMLProps<HTMLDivElement>) => (\n  <div\n    css={{\n      display: 'flex',\n      justifyContent: 'center',\n    }}\n    {...props}\n  />\n);\n\ntype DigitInputProps<T = HTMLInputElement> = InputProps<T>;\n\nconst digitInputStyle: <T>(theme: Theme, props: DigitInputProps<T>) => CSSObject = (theme, props) => ({\n  ...inputStyle(theme, props),\n  '& + &': {\n    marginLeft: '19px',\n  },\n  fontSize: '32px',\n  lineHeight: '56px',\n  padding: 0,\n  textAlign: 'center',\n  width: '48px',\n});\n\nconst DigitInput: React.FC<DigitInputProps<HTMLInputElement>> = React.forwardRef<\n  HTMLInputElement,\n  DigitInputProps<HTMLInputElement>\n>((props, ref) => <input ref={ref} css={theme => digitInputStyle(theme, props)} {...props} />);\n\nexport interface CodeInputProps<T = HTMLInputElement> extends InputProps<T> {\n  autoFocus?: boolean;\n  digits?: number;\n  markInvalid?: boolean;\n  onCodeComplete?: (completeCode?: string) => void;\n}\n\nexport const CodeInput = ({\n  style,\n  digits = 6,\n  autoFocus = false,\n  markInvalid,\n  onCodeComplete = noop,\n  disabled,\n}: CodeInputProps) => {\n  const [values, setValues] = useState(Array(digits).fill(''));\n  const inputs = Array(digits);\n\n  const forceSelection = (\n    event:\n      | React.MouseEvent<HTMLInputElement>\n      | React.TouchEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.FocusEvent<HTMLInputElement>,\n  ) => {\n    const target = event.target as HTMLInputElement;\n    target.select();\n  };\n\n  const forceSelectionPreventDefault = (\n    event: React.MouseEvent<HTMLInputElement> | React.TouchEvent<HTMLInputElement>,\n  ) => {\n    forceSelection(event);\n    event.preventDefault();\n  };\n\n  const nextField = (currentFieldIndex: number) => {\n    const nextFieldIndex = currentFieldIndex + 1;\n    if (nextFieldIndex < digits) {\n      inputs[nextFieldIndex].focus();\n    }\n  };\n\n  const previousField = (currentFieldIndex: number) => {\n    if (currentFieldIndex > 0) {\n      inputs[currentFieldIndex - 1].focus();\n    }\n  };\n\n  const setValue = (fieldIndex: number, value: string) => {\n    if (/^[0-9]?$/.test(value)) {\n      const valuesCopy = values.slice();\n      valuesCopy[fieldIndex] = value;\n      setValues(valuesCopy);\n      if (value.length) {\n        nextField(fieldIndex);\n      }\n    }\n  };\n\n  const handleKeyDown = (fieldIndex: number, {key}: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (key) {\n      case 'Backspace':\n        setValue(fieldIndex, '');\n        previousField(fieldIndex);\n        break;\n      case 'ArrowLeft':\n        previousField(fieldIndex);\n        break;\n      case 'ArrowRight':\n        nextField(fieldIndex);\n        break;\n    }\n    if (/^[0-9]$/.test(key)) {\n      setValue(fieldIndex, key);\n    }\n  };\n\n  const handlePaste = (fieldIndex: number, event: React.ClipboardEvent<HTMLInputElement>) => {\n    const pastedValue = event.clipboardData.getData('Text');\n    const cleanedPaste = pastedValue.replace(/[^0-9]/g, '');\n    if (/^[0-9]+$/.test(cleanedPaste)) {\n      setValues(values.slice(0, fieldIndex).concat(cleanedPaste.split('')).slice(0, digits));\n    }\n  };\n\n  useEffect(() => {\n    const completeCode = values.join('');\n    if (completeCode.length === digits) {\n      onCodeComplete(completeCode);\n    }\n  }, [values]);\n\n  return (\n    <CodeInputWrapper style={style}>\n      {Array.from({length: digits}, (_, index) => (\n        <DigitInput\n          autoFocus={index === 0 && autoFocus}\n          key={index}\n          onPaste={event => handlePaste(index, event)}\n          onFocus={forceSelection}\n          onMouseDown={forceSelectionPreventDefault}\n          onTouchStart={forceSelectionPreventDefault}\n          onKeyDown={event => handleKeyDown(index, event)}\n          onKeyUp={forceSelection}\n          markInvalid={markInvalid}\n          ref={node => (inputs[index] = node)}\n          type=\"text\"\n          value={values[index]}\n          onChange={() => {}}\n          disabled={disabled}\n        />\n      ))}\n    </CodeInputWrapper>\n  );\n};\n"],"file":"CodeInput.js"}
+{"version":3,"sources":["CodeInput.tsx"],"names":["CodeInputWrapper","props","digitInputStyle","theme","marginLeft","fontSize","lineHeight","padding","textAlign","width","DigitInput","React","forwardRef","ref","CodeInput","style","digits","autoFocus","markInvalid","onCodeComplete","noop","disabled","Array","fill","values","setValues","inputs","forceSelection","event","target","select","forceSelectionPreventDefault","preventDefault","nextField","currentFieldIndex","nextFieldIndex","focus","previousField","setValue","fieldIndex","value","test","valuesCopy","slice","length","handleKeyDown","key","handlePaste","pastedValue","clipboardData","getData","cleanedPaste","replace","concat","split","completeCode","join","from","_","index","node"],"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';\nimport React, {useEffect, useState} from 'react';\n\nimport type {Theme} from '../Layout';\nimport {noop} from '../util';\nimport {InputProps, inputStyle} from './Input';\n\nconst CodeInputWrapper = (props: React.HTMLProps<HTMLDivElement>) => (\n  <div\n    css={{\n      display: 'flex',\n      justifyContent: 'center',\n    }}\n    {...props}\n  />\n);\n\ntype DigitInputProps<T = HTMLInputElement> = InputProps<T>;\n\nconst digitInputStyle: <T>(theme: Theme, props: DigitInputProps<T>) => CSSObject = (theme, props) => ({\n  ...inputStyle(theme, props),\n  '& + &': {\n    marginLeft: '19px',\n  },\n  fontSize: '32px',\n  lineHeight: '56px',\n  padding: 0,\n  textAlign: 'center',\n  width: '48px',\n});\n\nconst DigitInput: React.FC<DigitInputProps<HTMLInputElement>> = React.forwardRef<\n  HTMLInputElement,\n  DigitInputProps<HTMLInputElement>\n>((props, ref) => <input ref={ref} css={(theme: Theme) => digitInputStyle(theme, props)} {...props} type=\"tel\" />);\n\nexport interface CodeInputProps<T = HTMLInputElement> extends InputProps<T> {\n  autoFocus?: boolean;\n  digits?: number;\n  markInvalid?: boolean;\n  onCodeComplete?: (completeCode?: string) => void;\n}\n\nexport const CodeInput = ({\n  style,\n  digits = 6,\n  autoFocus = false,\n  markInvalid,\n  onCodeComplete = noop,\n  disabled,\n}: CodeInputProps) => {\n  const [values, setValues] = useState(Array(digits).fill(''));\n  const inputs = Array(digits);\n\n  const forceSelection = (\n    event:\n      | React.MouseEvent<HTMLInputElement>\n      | React.TouchEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.FocusEvent<HTMLInputElement>,\n  ) => {\n    const target = event.target as HTMLInputElement;\n    target.select();\n  };\n\n  const forceSelectionPreventDefault = (\n    event: React.MouseEvent<HTMLInputElement> | React.TouchEvent<HTMLInputElement>,\n  ) => {\n    forceSelection(event);\n    event.preventDefault();\n  };\n\n  const nextField = (currentFieldIndex: number) => {\n    const nextFieldIndex = currentFieldIndex + 1;\n    if (nextFieldIndex < digits) {\n      inputs[nextFieldIndex].focus();\n    }\n  };\n\n  const previousField = (currentFieldIndex: number) => {\n    if (currentFieldIndex > 0) {\n      inputs[currentFieldIndex - 1].focus();\n    }\n  };\n\n  const setValue = (fieldIndex: number, value: string) => {\n    if (/^[0-9]?$/.test(value)) {\n      const valuesCopy = values.slice();\n      valuesCopy[fieldIndex] = value;\n      setValues(valuesCopy);\n      if (value.length) {\n        nextField(fieldIndex);\n      }\n    }\n  };\n\n  const handleKeyDown = (fieldIndex: number, {key}: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (key) {\n      case 'Backspace':\n        setValue(fieldIndex, '');\n        previousField(fieldIndex);\n        break;\n      case 'ArrowLeft':\n        previousField(fieldIndex);\n        break;\n      case 'ArrowRight':\n        nextField(fieldIndex);\n        break;\n    }\n    if (/^[0-9]$/.test(key)) {\n      setValue(fieldIndex, key);\n    }\n  };\n\n  const handlePaste = (fieldIndex: number, event: React.ClipboardEvent<HTMLInputElement>) => {\n    const pastedValue = event.clipboardData.getData('Text');\n    const cleanedPaste = pastedValue.replace(/[^0-9]/g, '');\n    if (/^[0-9]+$/.test(cleanedPaste)) {\n      setValues(values.slice(0, fieldIndex).concat(cleanedPaste.split('')).slice(0, digits));\n    }\n  };\n\n  useEffect(() => {\n    const completeCode = values.join('');\n    if (completeCode.length === digits) {\n      onCodeComplete(completeCode);\n    }\n  }, [values]);\n\n  return (\n    <CodeInputWrapper style={style}>\n      {Array.from({length: digits}, (_, index) => (\n        <DigitInput\n          autoFocus={index === 0 && autoFocus}\n          key={index}\n          onPaste={event => handlePaste(index, event)}\n          onFocus={forceSelection}\n          onMouseDown={forceSelectionPreventDefault}\n          onTouchStart={forceSelectionPreventDefault}\n          onKeyDown={event => handleKeyDown(index, event)}\n          onKeyUp={forceSelection}\n          markInvalid={markInvalid}\n          ref={node => (inputs[index] = node)}\n          value={values[index]}\n          onChange={() => {}}\n          disabled={disabled}\n        />\n      ))}\n    </CodeInputWrapper>\n  );\n};\n"],"file":"CodeInput.js"}

package/src/Form/ErrorMessage.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 /** @jsx jsx */
-import { CSSObject } from '@emotion/core';
+import { CSSObject, jsx } from '@emotion/react';
 import { FlexBoxProps, Theme } from '../Layout';
 declare type ErrorMessageProps<T = HTMLDivElement> = FlexBoxProps<T>;
 export declare const errorMessageStyle: <T>(theme: Theme, props: ErrorMessageProps<T>) => CSSObject;
 export declare const filterErrorMessageProps: (props: ErrorMessageProps) => Object;
-export declare const ErrorMessage: ({ children, ...props }: ErrorMessageProps) => JSX.Element;
+export declare const ErrorMessage: ({ children, ...props }: ErrorMessageProps) => jsx.JSX.Element;
 export {};

package/src/Form/ErrorMessage.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _Icon = require("../Icon");
 
@@ -62,15 +62,16 @@ exports.filterErrorMessageProps = filterErrorMessageProps;
 var ErrorMessage = function ErrorMessage(_ref2) {
   var children = _ref2.children,
       props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
-  return (0, _core.jsx)(_Layout.FlexBox, (0, _extends2["default"])({
+  return (0, _react.jsx)(_Layout.FlexBox, (0, _extends2["default"])({
     css: function css(theme) {
       return errorMessageStyle(theme, props);
     }
-  }, props), (0, _core.jsx)(_Icon.ErrorIcon, {
+  }, props), (0, _react.jsx)(_Icon.ErrorIcon, {
     style: {
       marginRight: '8px'
-    }
-  }), (0, _core.jsx)(_Text.Text, {
+    },
+    "aria-hidden": "true"
+  }), (0, _react.jsx)(_Text.Text, {
     color: _Identity.COLOR.RED,
     fontSize: '11px'
   }, children));