@wireapp/react-ui-kit 8.17.3 → 8.17.5

package/package.json

@@ -1,7 +1,6 @@
 {
   "dependencies": {
     "@types/color": "3.0.3",
-    "bazinga64": "5.11.9",
     "color": "4.2.3",
     "emotion-normalize": "11.0.1",
     "react-select": "5.5.2",
@@ -10,8 +9,6 @@
   "devDependencies": {
     "@babel/cli": "7.19.3",
     "@babel/core": "7.19.3",
-    "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/plugin-transform-runtime": "7.19.1",
     "@babel/preset-env": "7.19.4",
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.18.6",
@@ -34,8 +31,6 @@
     "react-hot-loader": "4.13.0",
     "react-styleguidist": "13.0.0",
     "react-test-renderer": "18.2.0",
-    "rimraf": "3.0.2",
-    "typescript": "4.8.4",
     "webpack": "^5.74.0"
   },
   "homepage": "https://wire-react-ui-kit.netlify.app/",
@@ -73,6 +68,6 @@
     "test:update": "yarn test --updateSnapshot",
     "test:project": "yarn dist && yarn test"
   },
-  "version": "8.17.3",
-  "gitHead": "cc1de9547f2528a14d3d23937a154f58476d2faf"
+  "version": "8.17.5",
+  "gitHead": "097af2ac03f7edafca8c09724286cd6722f0a452"
 }

package/src/Form/Button.js

@@ -1,13 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.filterButtonProps = exports.buttonStyle = exports.ButtonVariant = exports.Button = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@emotion/react");
 var _Identity = require("../Identity");
 var _motions = require("../Identity/motions");
@@ -16,8 +12,12 @@ var _Text = require("../Text");
 var _util = require("../util");
 var _excluded = ["variant", "backgroundColor", "block", "disabled", "noCapital", "bold", "center", "color", "fontSize", "noWrap", "textTransform", "truncate"],
   _excluded2 = ["showLoading", "children", "loadingColor"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var ButtonVariant;
 exports.ButtonVariant = ButtonVariant;
 (function (ButtonVariant) {
@@ -51,7 +51,7 @@ var buttonStyle = function buttonStyle(theme, _ref) {
     textTransform = _ref$textTransform === void 0 ? 'none' : _ref$textTransform,
     _ref$truncate = _ref.truncate,
     truncate = _ref$truncate === void 0 ? true : _ref$truncate,
-    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
   return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
     block: block,
     bold: bold,
@@ -178,8 +178,8 @@ var Button = function Button(_ref2) {
     children = _ref2.children,
     _ref2$loadingColor = _ref2.loadingColor,
     loadingColor = _ref2$loadingColor === void 0 ? _Identity.COLOR.WHITE : _ref2$loadingColor,
-    props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
-  return (0, _react.jsx)("button", (0, _extends2["default"])({
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return (0, _react.jsx)("button", _extends({
     css: function css(theme) {
       return buttonStyle(theme, props);
     }

package/src/Form/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["ButtonVariant","buttonStyle","theme","variant","PRIMARY","backgroundColor","block","disabled","noCapital","bold","center","color","COLOR","WHITE","fontSize","noWrap","textTransform","truncate","props","textStyle","border","cursor","display","alignItems","justifyContent","marginBottom","padding","outline","textDecoration","touchAction","transition","defaultTransition","width","TERTIARY","borderRadius","SEND","height","lineHeight","maxWidth","minWidth","Button","primaryDisabledBg","primaryBg","primaryDisabledText","general","contrastColor","primaryHoverBg","primaryFocusBorder","primaryActiveBg","primaryActiveBorder","SECONDARY","COLOR_V2","GRAY_20","GRAY_40","GRAY_60","BLACK","BLUE","BLUE_LIGHT_50","tertiarydisabledBg","tertiaryBg","tertiaryDisabledBorder","tertiaryBorder","Input","placeholderColor","fontWeight","fill","tertiaryHoverBg","tertiaryHoverBorder","focusColor","tertiaryActiveBg","IconButton","primaryActiveFillColor","QUATERNARY","GRAY_50","GREEN","GRAY_80","GREEN_LIGHT_600","GREEN_LIGHT_700","GRAY_70","BLUE_LIGHT_600","BLUE_LIGHT_800","BLUE_LIGHT_700","showLoading","children","loadingColor","filterButtonProps","margin","filterProps","filterTextProps"],"sources":["Button.tsx"],"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 {Theme} from '../Layout';\nimport {Loading} from '../Misc';\nimport {TextProps, filterTextProps, textStyle} from '../Text';\nimport {filterProps} from '../util';\n\nexport enum ButtonVariant {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  TERTIARY = 'tertiary',\n  QUATERNARY = 'quaternary',\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 ? theme.Button.primaryDisabledBg : theme.Button.primaryBg),\n    color: disabled ? theme.Button.primaryDisabledText : theme.general.contrastColor,\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: theme.Button.primaryHoverBg,\n      },\n      '&:focus': {\n        border: `1px solid ${theme.Button.primaryFocusBorder}`,\n      },\n      '&:active': {\n        backgroundColor: theme.Button.primaryActiveBg,\n        border: `1px solid ${theme.Button.primaryActiveBorder}`,\n        color: COLOR.WHITE,\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    backgroundColor: backgroundColor || (disabled ? theme.Button.tertiarydisabledBg : theme.Button.tertiaryBg),\n    border: disabled ? `1px solid ${theme.Button.tertiaryDisabledBorder}` : `1px solid ${theme.Button.tertiaryBorder}`,\n    borderRadius: '12px',\n    color: disabled ? theme.Input.placeholderColor : theme.general.color,\n    fontSize: '14px',\n    fontWeight: 700,\n    lineHeight: '24px',\n    padding: '4px 8px',\n    '& > svg > path': {\n      fill: disabled ? theme.Input.placeholderColor : theme.general.color,\n    },\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: theme.Button.tertiaryHoverBg,\n        border: `1px solid ${theme.Button.tertiaryHoverBorder}`,\n      },\n      '&:focus': {\n        border: `1px solid ${theme.general.focusColor}`,\n      },\n      '&:active': {\n        backgroundColor: theme.Button.tertiaryActiveBg,\n        color: theme.IconButton.primaryActiveFillColor,\n        '& > svg > path': {\n          fill: theme.IconButton.primaryActiveFillColor,\n        },\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.QUATERNARY && {\n    backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_50 : COLOR_V2.GREEN),\n    color: disabled ? COLOR_V2.GRAY_80 : COLOR_V2.WHITE,\n    lineHeight: '24px',\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: COLOR_V2.GREEN_LIGHT_600,\n      },\n      '&:focus': {\n        border: `1px solid ${COLOR_V2.GREEN_LIGHT_700}`,\n      },\n      '&:active': {\n        backgroundColor: COLOR_V2.GREEN_LIGHT_700,\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"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":["ButtonVariant","buttonStyle","theme","variant","PRIMARY","backgroundColor","block","disabled","noCapital","bold","center","color","COLOR","WHITE","fontSize","noWrap","textTransform","truncate","props","textStyle","border","cursor","display","alignItems","justifyContent","marginBottom","padding","outline","textDecoration","touchAction","transition","defaultTransition","width","TERTIARY","borderRadius","SEND","height","lineHeight","maxWidth","minWidth","Button","primaryDisabledBg","primaryBg","primaryDisabledText","general","contrastColor","primaryHoverBg","primaryFocusBorder","primaryActiveBg","primaryActiveBorder","SECONDARY","COLOR_V2","GRAY_20","GRAY_40","GRAY_60","BLACK","BLUE","BLUE_LIGHT_50","tertiarydisabledBg","tertiaryBg","tertiaryDisabledBorder","tertiaryBorder","Input","placeholderColor","fontWeight","fill","tertiaryHoverBg","tertiaryHoverBorder","focusColor","tertiaryActiveBg","IconButton","primaryActiveFillColor","QUATERNARY","GRAY_50","GREEN","GRAY_80","GREEN_LIGHT_600","GREEN_LIGHT_700","GRAY_70","BLUE_LIGHT_600","BLUE_LIGHT_800","BLUE_LIGHT_700","showLoading","children","loadingColor","filterButtonProps","margin","filterProps","filterTextProps"],"sources":["Button.tsx"],"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 {Theme} from '../Layout';\nimport {Loading} from '../Misc';\nimport {TextProps, filterTextProps, textStyle} from '../Text';\nimport {filterProps} from '../util';\n\nexport enum ButtonVariant {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  TERTIARY = 'tertiary',\n  QUATERNARY = 'quaternary',\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 ? theme.Button.primaryDisabledBg : theme.Button.primaryBg),\n    color: disabled ? theme.Button.primaryDisabledText : theme.general.contrastColor,\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: theme.Button.primaryHoverBg,\n      },\n      '&:focus': {\n        border: `1px solid ${theme.Button.primaryFocusBorder}`,\n      },\n      '&:active': {\n        backgroundColor: theme.Button.primaryActiveBg,\n        border: `1px solid ${theme.Button.primaryActiveBorder}`,\n        color: COLOR.WHITE,\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    backgroundColor: backgroundColor || (disabled ? theme.Button.tertiarydisabledBg : theme.Button.tertiaryBg),\n    border: disabled ? `1px solid ${theme.Button.tertiaryDisabledBorder}` : `1px solid ${theme.Button.tertiaryBorder}`,\n    borderRadius: '12px',\n    color: disabled ? theme.Input.placeholderColor : theme.general.color,\n    fontSize: '14px',\n    fontWeight: 700,\n    lineHeight: '24px',\n    padding: '4px 8px',\n    '& > svg > path': {\n      fill: disabled ? theme.Input.placeholderColor : theme.general.color,\n    },\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: theme.Button.tertiaryHoverBg,\n        border: `1px solid ${theme.Button.tertiaryHoverBorder}`,\n      },\n      '&:focus': {\n        border: `1px solid ${theme.general.focusColor}`,\n      },\n      '&:active': {\n        backgroundColor: theme.Button.tertiaryActiveBg,\n        color: theme.IconButton.primaryActiveFillColor,\n        '& > svg > path': {\n          fill: theme.IconButton.primaryActiveFillColor,\n        },\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.QUATERNARY && {\n    backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_50 : COLOR_V2.GREEN),\n    color: disabled ? COLOR_V2.GRAY_80 : COLOR_V2.WHITE,\n    lineHeight: '24px',\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: COLOR_V2.GREEN_LIGHT_600,\n      },\n      '&:focus': {\n        border: `1px solid ${COLOR_V2.GREEN_LIGHT_700}`,\n      },\n      '&:active': {\n        backgroundColor: COLOR_V2.GREEN_LIGHT_700,\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"],"mappings":"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"}

package/src/Form/ButtonLink.js

@@ -1,13 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.buttonLinkStyle = exports.ButtonLink = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _Misc = require("../Misc");
 var _Identity = require("../Identity");
@@ -15,8 +11,12 @@ var _util = require("../util");
 var _Text = require("../Text");
 var _Button = require("./Button");
 var _excluded = ["children", "showLoading", "loadingColor"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 var buttonLinkStyle = function buttonLinkStyle(theme, props) {
   return _objectSpread(_objectSpread({}, (0, _Button.buttonStyle)(theme, props)), {}, {
     display: 'inline-flex !important'
@@ -31,8 +31,8 @@ var ButtonLink = function ButtonLink(_ref) {
     showLoading = _ref.showLoading,
     _ref$loadingColor = _ref.loadingColor,
     loadingColor = _ref$loadingColor === void 0 ? _Identity.COLOR.WHITE : _ref$loadingColor,
-    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return (0, _react.jsx)("a", (0, _extends2["default"])({
+    props = _objectWithoutProperties(_ref, _excluded);
+  return (0, _react.jsx)("a", _extends({
     css: function css(theme) {
       return buttonLinkStyle(theme, props);
     }

package/src/Form/ButtonLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonLink.js","names":["buttonLinkStyle","theme","props","buttonStyle","display","filterButtonLinkProps","filterProps","filterTextProps","ButtonLink","children","showLoading","loadingColor","COLOR","WHITE","margin"],"sources":["ButtonLink.tsx"],"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 {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"],"mappings":";;;;;;;;;;AAoBA;AAEA;AACA;AACA;AACA;AACA;AAAkD;AAAA;AAAA;AAG3C,IAAMA,eAAmF,GAAG,SAAtFA,eAAmF,CAAIC,KAAK,EAAEC,KAAK;EAAA,uCAC3G,IAAAC,mBAAW,EAACF,KAAK,EAAEC,KAAK,CAAC;IAC5BE,OAAO,EAAE;EAAwB;AAAA,CACjC;AAAC;AAEH,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,CAAIH,KAAqC,EAAK;EACvE,OAAO,IAAAI,iBAAW,EAAC,IAAAC,qBAAe,EAACL,KAAK,CAAC,EAAoC,CAC3E,iBAAiB,EACjB,UAAU,EACV,WAAW,CACZ,CAAC;AACJ,CAAC;AAEM,IAAMM,UAAU,GAAG,SAAbA,UAAU;EAAA,IACrBC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IAAA,yBACXC,YAAY;IAAZA,YAAY,kCAAGC,eAAK,CAACC,KAAK;IACvBX,KAAK;EAAA,OAER;IAAG,GAAG,EAAE,aAACD,KAAY;MAAA,OAAKD,eAAe,CAACC,KAAK,EAAEC,KAAK,CAAC;IAAA;EAAC,GAAKG,qBAAqB,CAACH,KAAK,CAAC,GACtFQ,WAAW,GAAG,gBAAC,aAAO;IAAC,IAAI,EAAE,EAAG;IAAC,KAAK,EAAEC,YAAa;IAAC,KAAK,EAAE;MAACP,OAAO,EAAE,MAAM;MAAEU,MAAM,EAAE;IAAM;EAAE,EAAG,GAAGL,QAAQ,CAC5G;AAAA,CACL;AAAC"}
+{"version":3,"file":"ButtonLink.js","names":["buttonLinkStyle","theme","props","buttonStyle","display","filterButtonLinkProps","filterProps","filterTextProps","ButtonLink","children","showLoading","loadingColor","COLOR","WHITE","margin"],"sources":["ButtonLink.tsx"],"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 {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"],"mappings":";;;;;;AAoBA;AAEA;AACA;AACA;AACA;AACA;AAAkD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAG3C,IAAMA,eAAmF,GAAG,SAAtFA,eAAmF,CAAIC,KAAK,EAAEC,KAAK;EAAA,uCAC3G,IAAAC,mBAAW,EAACF,KAAK,EAAEC,KAAK,CAAC;IAC5BE,OAAO,EAAE;EAAwB;AAAA,CACjC;AAAC;AAEH,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,CAAIH,KAAqC,EAAK;EACvE,OAAO,IAAAI,iBAAW,EAAC,IAAAC,qBAAe,EAACL,KAAK,CAAC,EAAoC,CAC3E,iBAAiB,EACjB,UAAU,EACV,WAAW,CACZ,CAAC;AACJ,CAAC;AAEM,IAAMM,UAAU,GAAG,SAAbA,UAAU;EAAA,IACrBC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IAAA,yBACXC,YAAY;IAAZA,YAAY,kCAAGC,eAAK,CAACC,KAAK;IACvBX,KAAK;EAAA,OAER;IAAG,GAAG,EAAE,aAACD,KAAY;MAAA,OAAKD,eAAe,CAACC,KAAK,EAAEC,KAAK,CAAC;IAAA;EAAC,GAAKG,qBAAqB,CAACH,KAAK,CAAC,GACtFQ,WAAW,GAAG,gBAAC,aAAO;IAAC,IAAI,EAAE,EAAG;IAAC,KAAK,EAAEC,YAAa;IAAC,KAAK,EAAE;MAACP,OAAO,EAAE,MAAM;MAAEU,MAAM,EAAE;IAAM;EAAE,EAAG,GAAGL,QAAQ,CAC5G;AAAA,CACL;AAAC"}

package/src/Form/Checkbox.js

@@ -1,15 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CheckboxLabel = exports.Checkbox = void 0;
-var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@emotion/react");
 var _react2 = _interopRequireWildcard(require("react"));
 var _Text = require("../Text");
@@ -18,8 +13,13 @@ var _excluded = ["disabled", "markInvalid", "aligncenter", "labelBeforeCheckbox"
   _excluded2 = ["id", "children", "style", "disabled", "wrapperCSS", "markInvalid", "aligncenter", "labelBeforeCheckbox", "outlineOffset"];
 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 _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure undefined"); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var StyledLabel = function StyledLabel(_ref) {
   var disabled = _ref.disabled,
     markInvalid = _ref.markInvalid,
@@ -28,16 +28,16 @@ var StyledLabel = function StyledLabel(_ref) {
     _ref$labelBeforeCheck = _ref.labelBeforeCheckbox,
     labelBeforeCheckbox = _ref$labelBeforeCheck === void 0 ? false : _ref$labelBeforeCheck,
     children = _ref.children,
-    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return (0, _react.jsx)("label", (0, _extends2["default"])({
+    props = _objectWithoutProperties(_ref, _excluded);
+  return (0, _react.jsx)("label", _extends({
     css: function css(theme) {
       var _objectSpread2;
-      return _objectSpread(_objectSpread(_objectSpread((_objectSpread2 = {}, (0, _defineProperty2["default"])(_objectSpread2, ".".concat(_Input.INPUT_CLASSNAME, ":checked + &::before"), {
+      return _objectSpread(_objectSpread(_objectSpread((_objectSpread2 = {}, _defineProperty(_objectSpread2, ".".concat(_Input.INPUT_CLASSNAME, ":checked + &::before"), {
         background: "".concat(disabled ? theme.Checkbox.disablecheckedBgColor : theme.general.primaryColor),
         borderColor: theme.general.primaryColor
-      }), (0, _defineProperty2["default"])(_objectSpread2, ".".concat(_Input.INPUT_CLASSNAME, ":checked + & > svg"), {
+      }), _defineProperty(_objectSpread2, ".".concat(_Input.INPUT_CLASSNAME, ":checked + & > svg"), {
         fill: theme.general.backgroundColor
-      }), (0, _defineProperty2["default"])(_objectSpread2, ".".concat(_Input.INPUT_CLASSNAME, " + & > svg"), _objectSpread({
+      }), _defineProperty(_objectSpread2, ".".concat(_Input.INPUT_CLASSNAME, " + & > svg"), _objectSpread({
         fill: 'none',
         position: 'absolute',
         top: '50%',
@@ -46,9 +46,9 @@ var StyledLabel = function StyledLabel(_ref) {
         right: '0.75rem'
       } : {
         left: '0.25rem'
-      })), _objectSpread2), !disabled && (0, _defineProperty2["default"])({}, ".".concat(_Input.INPUT_CLASSNAME, ":hover + &::before"), {
+      })), _objectSpread2), !disabled && _defineProperty({}, ".".concat(_Input.INPUT_CLASSNAME, ":hover + &::before"), {
         borderColor: theme.general.primaryColor
-      })), {}, (0, _defineProperty2["default"])({}, ".".concat(_Input.INPUT_CLASSNAME, " + &::before"), _objectSpread(_objectSpread({
+      })), {}, _defineProperty({}, ".".concat(_Input.INPUT_CLASSNAME, " + &::before"), _objectSpread(_objectSpread({
         background: disabled ? theme.Checkbox.disableBgColor : theme.Checkbox.background
       }, !disabled ? {
         border: markInvalid ? "2px solid ".concat(theme.Checkbox.invalidBorderColor) : "2px solid ".concat(theme.Checkbox.border)
@@ -101,10 +101,10 @@ var Checkbox = /*#__PURE__*/_react2["default"].forwardRef(function (_ref3, ref)
     labelBeforeCheckbox = _ref3.labelBeforeCheckbox,
     _ref3$outlineOffset = _ref3.outlineOffset,
     outlineOffset = _ref3$outlineOffset === void 0 ? '0.4rem' : _ref3$outlineOffset,
-    props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
+    props = _objectWithoutProperties(_ref3, _excluded2);
   return (0, _react.jsx)("div", {
     css: function css(theme) {
-      return _objectSpread((0, _defineProperty2["default"])({
+      return _objectSpread(_defineProperty({
         alignItems: 'center',
         display: 'flex',
         justifyContent: 'flex-start',
@@ -116,7 +116,7 @@ var Checkbox = /*#__PURE__*/_react2["default"].forwardRef(function (_ref3, ref)
       }), wrapperCSS);
     },
     style: style
-  }, (0, _react.jsx)("input", (0, _extends2["default"])({
+  }, (0, _react.jsx)("input", _extends({
     type: "checkbox",
     id: id,
     style: {
@@ -139,8 +139,8 @@ var Checkbox = /*#__PURE__*/_react2["default"].forwardRef(function (_ref3, ref)
 });
 exports.Checkbox = Checkbox;
 var CheckboxLabel = function CheckboxLabel(_ref4) {
-  var props = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref4), _ref4));
-  return (0, _react.jsx)(_Text.Text, (0, _extends2["default"])({
+  var props = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
+  return (0, _react.jsx)(_Text.Text, _extends({
     css: function css(theme) {
       return _objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({}, props)));
     }

package/src/Form/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["StyledLabel","disabled","markInvalid","aligncenter","labelBeforeCheckbox","children","props","theme","INPUT_CLASSNAME","background","Checkbox","disablecheckedBgColor","general","primaryColor","borderColor","fill","backgroundColor","position","top","transform","right","left","disableBgColor","border","invalidBorderColor","disableBorderColor","borderRadius","boxSizing","content","display","width","height","lineHeight","margin","color","flexDirection","justifyContent","alignItems","opacity","cursor","React","forwardRef","ref","id","useId","style","wrapperCSS","outlineOffset","outline","marginBottom","CheckboxLabel","textStyle"],"sources":["Checkbox.tsx"],"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 {Theme} from '../Layout';\nimport {Text, TextProps, textStyle} from '../Text';\nimport {INPUT_CLASSNAME, InputProps} from './Input';\n\nexport interface StyledLabelProps<T = HTMLLabelElement> extends React.HTMLProps<T> {\n  disabled?: boolean;\n  markInvalid?: boolean;\n  aligncenter?: boolean;\n  labelBeforeCheckbox?: boolean;\n}\n\nconst StyledLabel = ({\n  disabled,\n  markInvalid,\n  aligncenter = false,\n  labelBeforeCheckbox = false,\n  children,\n  ...props\n}: StyledLabelProps) => {\n  return (\n    <label\n      css={(theme: Theme) => ({\n        [`.${INPUT_CLASSNAME}:checked + &::before`]: {\n          background: `${disabled ? theme.Checkbox.disablecheckedBgColor : theme.general.primaryColor}`,\n          borderColor: theme.general.primaryColor,\n        },\n        [`.${INPUT_CLASSNAME}:checked + & > svg`]: {\n          fill: theme.general.backgroundColor,\n        },\n        [`.${INPUT_CLASSNAME} + & > svg`]: {\n          fill: 'none',\n          position: 'absolute',\n          top: '50%',\n          transform: 'translateY(-50%)',\n          ...(labelBeforeCheckbox\n            ? {\n                right: '0.75rem',\n              }\n            : {\n                left: '0.25rem',\n              }),\n        },\n        ...(!disabled && {\n          [`.${INPUT_CLASSNAME}:hover + &::before`]: {\n            borderColor: theme.general.primaryColor,\n          },\n        }),\n        [`.${INPUT_CLASSNAME} + &::before`]: {\n          background: disabled ? theme.Checkbox.disableBgColor : theme.Checkbox.background,\n          ...(!disabled\n            ? {\n                border: markInvalid\n                  ? `2px solid ${theme.Checkbox.invalidBorderColor}`\n                  : `2px solid ${theme.Checkbox.border}`,\n              }\n            : {\n                border: `2px solid ${theme.Checkbox.disableBorderColor}`,\n              }),\n          borderRadius: '3px',\n          boxSizing: 'border-box',\n          content: '\"\"',\n          display: 'inline-block',\n          width: '22px',\n          height: '22px',\n          lineHeight: 1.4,\n          margin: '0 8px 0 0px',\n          color: theme.general.color,\n        },\n        ...(labelBeforeCheckbox && {\n          flexDirection: 'row-reverse',\n          justifyContent: 'space-between',\n        }),\n        alignItems: 'center',\n        position: 'relative',\n        margin: '0 0 0 -16px',\n        width: aligncenter ? 'auto' : '100%',\n        lineHeight: 1.4,\n        display: 'flex',\n        opacity: disabled ? 0.56 : 1,\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        borderRadius: '4px',\n      })}\n      {...props}\n    >\n      {children}\n      <svg width=\"15\" height=\"13\" viewBox=\"0 0 16 13\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z\" />\n      </svg>\n    </label>\n  );\n};\n\ninterface CheckboxProps<T = HTMLInputElement> extends InputProps<T> {\n  id?: string;\n  aligncenter?: boolean;\n  labelBeforeCheckbox?: boolean;\n  outlineOffset?: string;\n}\n\nexport const Checkbox: React.FC<CheckboxProps<HTMLInputElement>> = React.forwardRef<\n  HTMLInputElement,\n  CheckboxProps<HTMLInputElement>\n>(\n  (\n    {\n      id = useId(),\n      children,\n      style,\n      disabled,\n      wrapperCSS = {},\n      markInvalid,\n      aligncenter,\n      labelBeforeCheckbox,\n      outlineOffset = '0.4rem',\n      ...props\n    },\n    ref,\n  ) => (\n    <div\n      css={(theme: Theme) => ({\n        alignItems: 'center',\n        display: 'flex',\n        justifyContent: 'flex-start',\n        position: 'relative',\n        left: '-0.3rem',\n        [`.${INPUT_CLASSNAME}:focus-visible + label`]: {\n          outline: `1px solid ${theme.general.primaryColor}`,\n          outlineOffset: outlineOffset,\n        },\n        ...wrapperCSS,\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          cursor: disabled ? 'not-allowed' : 'pointer',\n        }}\n        disabled={disabled}\n        ref={ref}\n        className={INPUT_CLASSNAME}\n        {...props}\n      />\n\n      <StyledLabel\n        htmlFor={id}\n        disabled={disabled}\n        markInvalid={markInvalid}\n        aligncenter={aligncenter}\n        labelBeforeCheckbox={labelBeforeCheckbox}\n      >\n        {children}\n      </StyledLabel>\n    </div>\n  ),\n);\n\nexport type CheckboxLabelProps<T = HTMLSpanElement> = TextProps<T>;\n\nexport const CheckboxLabel = ({...props}: CheckboxLabelProps) => (\n  <Text\n    css={(theme: Theme) => ({\n      ...textStyle(theme, {\n        ...props,\n      }),\n    })}\n    {...props}\n  />\n);\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["StyledLabel","disabled","markInvalid","aligncenter","labelBeforeCheckbox","children","props","theme","INPUT_CLASSNAME","background","Checkbox","disablecheckedBgColor","general","primaryColor","borderColor","fill","backgroundColor","position","top","transform","right","left","disableBgColor","border","invalidBorderColor","disableBorderColor","borderRadius","boxSizing","content","display","width","height","lineHeight","margin","color","flexDirection","justifyContent","alignItems","opacity","cursor","React","forwardRef","ref","id","useId","style","wrapperCSS","outlineOffset","outline","marginBottom","CheckboxLabel","textStyle"],"sources":["Checkbox.tsx"],"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 {Theme} from '../Layout';\nimport {Text, TextProps, textStyle} from '../Text';\nimport {INPUT_CLASSNAME, InputProps} from './Input';\n\nexport interface StyledLabelProps<T = HTMLLabelElement> extends React.HTMLProps<T> {\n  disabled?: boolean;\n  markInvalid?: boolean;\n  aligncenter?: boolean;\n  labelBeforeCheckbox?: boolean;\n}\n\nconst StyledLabel = ({\n  disabled,\n  markInvalid,\n  aligncenter = false,\n  labelBeforeCheckbox = false,\n  children,\n  ...props\n}: StyledLabelProps) => {\n  return (\n    <label\n      css={(theme: Theme) => ({\n        [`.${INPUT_CLASSNAME}:checked + &::before`]: {\n          background: `${disabled ? theme.Checkbox.disablecheckedBgColor : theme.general.primaryColor}`,\n          borderColor: theme.general.primaryColor,\n        },\n        [`.${INPUT_CLASSNAME}:checked + & > svg`]: {\n          fill: theme.general.backgroundColor,\n        },\n        [`.${INPUT_CLASSNAME} + & > svg`]: {\n          fill: 'none',\n          position: 'absolute',\n          top: '50%',\n          transform: 'translateY(-50%)',\n          ...(labelBeforeCheckbox\n            ? {\n                right: '0.75rem',\n              }\n            : {\n                left: '0.25rem',\n              }),\n        },\n        ...(!disabled && {\n          [`.${INPUT_CLASSNAME}:hover + &::before`]: {\n            borderColor: theme.general.primaryColor,\n          },\n        }),\n        [`.${INPUT_CLASSNAME} + &::before`]: {\n          background: disabled ? theme.Checkbox.disableBgColor : theme.Checkbox.background,\n          ...(!disabled\n            ? {\n                border: markInvalid\n                  ? `2px solid ${theme.Checkbox.invalidBorderColor}`\n                  : `2px solid ${theme.Checkbox.border}`,\n              }\n            : {\n                border: `2px solid ${theme.Checkbox.disableBorderColor}`,\n              }),\n          borderRadius: '3px',\n          boxSizing: 'border-box',\n          content: '\"\"',\n          display: 'inline-block',\n          width: '22px',\n          height: '22px',\n          lineHeight: 1.4,\n          margin: '0 8px 0 0px',\n          color: theme.general.color,\n        },\n        ...(labelBeforeCheckbox && {\n          flexDirection: 'row-reverse',\n          justifyContent: 'space-between',\n        }),\n        alignItems: 'center',\n        position: 'relative',\n        margin: '0 0 0 -16px',\n        width: aligncenter ? 'auto' : '100%',\n        lineHeight: 1.4,\n        display: 'flex',\n        opacity: disabled ? 0.56 : 1,\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        borderRadius: '4px',\n      })}\n      {...props}\n    >\n      {children}\n      <svg width=\"15\" height=\"13\" viewBox=\"0 0 16 13\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z\" />\n      </svg>\n    </label>\n  );\n};\n\ninterface CheckboxProps<T = HTMLInputElement> extends InputProps<T> {\n  id?: string;\n  aligncenter?: boolean;\n  labelBeforeCheckbox?: boolean;\n  outlineOffset?: string;\n}\n\nexport const Checkbox: React.FC<CheckboxProps<HTMLInputElement>> = React.forwardRef<\n  HTMLInputElement,\n  CheckboxProps<HTMLInputElement>\n>(\n  (\n    {\n      id = useId(),\n      children,\n      style,\n      disabled,\n      wrapperCSS = {},\n      markInvalid,\n      aligncenter,\n      labelBeforeCheckbox,\n      outlineOffset = '0.4rem',\n      ...props\n    },\n    ref,\n  ) => (\n    <div\n      css={(theme: Theme) => ({\n        alignItems: 'center',\n        display: 'flex',\n        justifyContent: 'flex-start',\n        position: 'relative',\n        left: '-0.3rem',\n        [`.${INPUT_CLASSNAME}:focus-visible + label`]: {\n          outline: `1px solid ${theme.general.primaryColor}`,\n          outlineOffset: outlineOffset,\n        },\n        ...wrapperCSS,\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          cursor: disabled ? 'not-allowed' : 'pointer',\n        }}\n        disabled={disabled}\n        ref={ref}\n        className={INPUT_CLASSNAME}\n        {...props}\n      />\n\n      <StyledLabel\n        htmlFor={id}\n        disabled={disabled}\n        markInvalid={markInvalid}\n        aligncenter={aligncenter}\n        labelBeforeCheckbox={labelBeforeCheckbox}\n      >\n        {children}\n      </StyledLabel>\n    </div>\n  ),\n);\n\nexport type CheckboxLabelProps<T = HTMLSpanElement> = TextProps<T>;\n\nexport const CheckboxLabel = ({...props}: CheckboxLabelProps) => (\n  <Text\n    css={(theme: Theme) => ({\n      ...textStyle(theme, {\n        ...props,\n      }),\n    })}\n    {...props}\n  />\n);\n"],"mappings":"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"}

package/src/Form/CodeInput.js

@@ -1,14 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CodeInput = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@emotion/react");
 var _react2 = _interopRequireWildcard(require("react"));
 var _util = require("../util");
@@ -16,8 +12,16 @@ var _Input = require("./Input");
 var _Identity = require("../Identity");
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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: "zl1inp",
@@ -29,7 +33,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var CodeInputWrapper = function CodeInputWrapper(props) {
-  return (0, _react.jsx)("div", (0, _extends2["default"])({
+  return (0, _react.jsx)("div", _extends({
     css: _ref
   }, props));
 };
@@ -51,7 +55,7 @@ var digitInputStyle = function digitInputStyle(theme, props) {
   });
 };
 var DigitInput = /*#__PURE__*/_react2["default"].forwardRef(function (props, ref) {
-  return (0, _react.jsx)("input", (0, _extends2["default"])({
+  return (0, _react.jsx)("input", _extends({
     ref: ref,
     css: function css(theme) {
       return digitInputStyle(theme, props);
@@ -71,7 +75,7 @@ var CodeInput = function CodeInput(_ref2) {
     onCodeComplete = _ref2$onCodeComplete === void 0 ? _util.noop : _ref2$onCodeComplete,
     disabled = _ref2.disabled;
   var _useState = (0, _react2.useState)(Array(digits).fill('')),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     values = _useState2[0],
     setValues = _useState2[1];
   var inputs = Array(digits);

package/src/Form/CodeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeInput.js","names":["CodeInputWrapper","props","digitInputStyle","theme","inputStyle","marginLeft","boxShadow","COLOR_V2","GRAY_60","fontSize","lineHeight","borderRadius","padding","textAlign","width","height","DigitInput","React","forwardRef","ref","CodeInput","style","digits","autoFocus","markInvalid","onCodeComplete","noop","disabled","useState","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","useEffect","completeCode","join","from","_","index","node"],"sources":["CodeInput.tsx"],"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 {Theme} from '../Layout';\nimport {noop} from '../util';\nimport {InputProps, inputStyle} from './Input';\nimport {COLOR_V2} from '../Identity';\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: 'min(19px, 2vw)',\n  },\n  '&:hover': {\n    boxShadow: `0 0 0 1px ${COLOR_V2.GRAY_60}`,\n  },\n  fontSize: '24px',\n  lineHeight: '28px',\n  borderRadius: '12px',\n  padding: 0,\n  textAlign: 'center',\n  width: 'min(48px, 13vw)',\n  height: '56px',\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"],"mappings":"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"}
+{"version":3,"file":"CodeInput.js","names":["CodeInputWrapper","props","digitInputStyle","theme","inputStyle","marginLeft","boxShadow","COLOR_V2","GRAY_60","fontSize","lineHeight","borderRadius","padding","textAlign","width","height","DigitInput","React","forwardRef","ref","CodeInput","style","digits","autoFocus","markInvalid","onCodeComplete","noop","disabled","useState","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","useEffect","completeCode","join","from","_","index","node"],"sources":["CodeInput.tsx"],"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 {Theme} from '../Layout';\nimport {noop} from '../util';\nimport {InputProps, inputStyle} from './Input';\nimport {COLOR_V2} from '../Identity';\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: 'min(19px, 2vw)',\n  },\n  '&:hover': {\n    boxShadow: `0 0 0 1px ${COLOR_V2.GRAY_60}`,\n  },\n  fontSize: '24px',\n  lineHeight: '28px',\n  borderRadius: '12px',\n  padding: 0,\n  textAlign: 'center',\n  width: 'min(48px, 13vw)',\n  height: '56px',\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"],"mappings":"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"}

package/src/Form/DropFileInput.js

@@ -1,15 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.dropFileZoneWrapperStyle = exports.dropFileZoneLabelStyle = exports.dropFileZoneHeadingStyle = exports.dropFileZonDescriptionStyle = exports.dropFileWrapperStyle = exports.DropFileInput = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@emotion/react");
 var _react2 = _interopRequireWildcard(require("react"));
 var _Identity = require("../Identity");
@@ -18,9 +13,19 @@ var _Layout = require("../Layout");
 var _excluded = ["onFilesUploaded", "onInvalidFilesDropError", "dropFileZoneWrapperCSS", "labelText", "headingText", "description", "accept", "multiple"];
 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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var visuallyHiddenStyles = {
   clip: 'rect(0 0 0 0)',
   clipPath: 'inset(50%)',
@@ -113,9 +118,9 @@ var DropFileInput = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
     description = _ref.description,
     accept = _ref.accept,
     multiple = _ref.multiple,
-    inputProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+    inputProps = _objectWithoutProperties(_ref, _excluded);
   var _useState = (0, _react2.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
   var resetDraggedOver = function resetDraggedOver() {
@@ -182,7 +187,7 @@ var DropFileInput = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
     css: function css(theme) {
       return dropFileZoneLabelStyle(theme);
     }
-  }, (0, _react.jsx)("span", null, labelText), (0, _react.jsx)("input", (0, _extends2["default"])({
+  }, (0, _react.jsx)("span", null, labelText), (0, _react.jsx)("input", _extends({
     "data-testid": "file-input",
     ref: ref,
     accept: accept,