@wireapp/react-ui-kit 8.14.3 → 8.14.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
     "@emotion/react": "11.9.0",
-    "bazinga64": "5.11.3",
+    "bazinga64": "5.11.6",
     "color": "3.1.3",
     "emotion-normalize": "11.0.1",
     "react-select": "5.4.0",
@@ -72,6 +72,6 @@
     "test:update": "yarn test --updateSnapshot",
     "test:project": "yarn dist && yarn test"
   },
-  "version": "8.14.3",
-  "gitHead": "fd01ebbb32a4341a6b56590cd007bddc9d2d3229"
+  "version": "8.14.6",
+  "gitHead": "6616575aeeb2017803d5243fe7afb273297997ac"
 }

package/src/Form/Button.d.js

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

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

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

package/src/Form/Button.d.ts

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

package/src/Form/Button.js

@@ -0,0 +1,221 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.filterButtonProps = exports.Button = exports.buttonStyle = exports.ButtonVariant = 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");
+
+var _Misc = require("../Misc");
+
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var ButtonVariant;
+exports.ButtonVariant = ButtonVariant;
+
+(function (ButtonVariant) {
+  ButtonVariant["PRIMARY"] = "primary";
+  ButtonVariant["SECONDARY"] = "secondary";
+  ButtonVariant["TERTIARY"] = "tertiary";
+  ButtonVariant["QUATERNARY"] = "quaternary";
+  ButtonVariant["SEND"] = "send";
+})(ButtonVariant || (exports.ButtonVariant = ButtonVariant = {}));
+
+var buttonStyle = function buttonStyle(theme, _ref) {
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? ButtonVariant.PRIMARY : _ref$variant,
+      backgroundColor = _ref.backgroundColor,
+      _ref$block = _ref.block,
+      block = _ref$block === void 0 ? false : _ref$block,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$noCapital = _ref.noCapital,
+      noCapital = _ref$noCapital === void 0 ? false : _ref$noCapital,
+      _ref$bold = _ref.bold,
+      bold = _ref$bold === void 0 ? true : _ref$bold,
+      _ref$center = _ref.center,
+      center = _ref$center === void 0 ? true : _ref$center,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? _Identity.COLOR.WHITE : _ref$color,
+      _ref$fontSize = _ref.fontSize,
+      fontSize = _ref$fontSize === void 0 ? '16px' : _ref$fontSize,
+      _ref$noWrap = _ref.noWrap,
+      noWrap = _ref$noWrap === void 0 ? true : _ref$noWrap,
+      _ref$textTransform = _ref.textTransform,
+      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);
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
+    block: block,
+    bold: bold,
+    center: center,
+    disabled: disabled,
+    fontSize: fontSize,
+    noWrap: noWrap,
+    textTransform: textTransform,
+    truncate: truncate
+  }, props))), {}, {
+    border: 0,
+    cursor: disabled ? 'default' : 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: '16px',
+    padding: 0,
+    outline: 'none',
+    textDecoration: 'none',
+    touchAction: 'manipulation',
+    transition: _motions.defaultTransition,
+    width: block ? '100%' : 'auto',
+    '&:hover, &:focus': {
+      textDecoration: 'none'
+    }
+  }, variant !== ButtonVariant.TERTIARY && _objectSpread({
+    borderRadius: variant === ButtonVariant.SEND ? '100%' : '16px',
+    height: variant === ButtonVariant.SEND ? '40px' : '48px',
+    lineHeight: variant === ButtonVariant.SEND ? '40px' : '48px'
+  }, variant !== ButtonVariant.SEND && {
+    maxWidth: '100%',
+    minWidth: '125px',
+    padding: '0 16px'
+  })), variant === ButtonVariant.PRIMARY && _objectSpread({
+    backgroundColor: backgroundColor || (disabled ? theme.Button.primaryDisabledBg : theme.Button.primaryBg),
+    color: disabled ? theme.Button.primaryDisabledText : theme.general.contrastColor
+  }, !disabled && {
+    '&:hover, &:focus': {
+      backgroundColor: theme.Button.primaryHoverBg
+    },
+    '&:focus': {
+      border: "1px solid ".concat(theme.Button.primaryFocusBorder)
+    },
+    '&:active': {
+      backgroundColor: theme.Button.primaryActiveBg,
+      border: "1px solid ".concat(theme.Button.primaryActiveBorder),
+      color: _Identity.COLOR.WHITE
+    }
+  })), variant === ButtonVariant.SECONDARY && _objectSpread({
+    backgroundColor: backgroundColor || (disabled ? _Identity.COLOR_V2.GRAY_20 : _Identity.COLOR_V2.WHITE),
+    border: "1px solid ".concat(_Identity.COLOR_V2.GRAY_40),
+    color: disabled ? _Identity.COLOR_V2.GRAY_60 : _Identity.COLOR_V2.BLACK
+  }, !disabled && {
+    '&:hover, &:focus': {
+      border: "1px solid ".concat(_Identity.COLOR_V2.BLUE)
+    },
+    '&:focus': {
+      color: _Identity.COLOR_V2.BLUE
+    },
+    '&:active': {
+      backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_50,
+      border: "1px solid ".concat(_Identity.COLOR_V2.BLUE),
+      color: _Identity.COLOR_V2.BLUE
+    }
+  })), variant === ButtonVariant.TERTIARY && _objectSpread({
+    backgroundColor: backgroundColor || (disabled ? theme.Button.tertiarydisabledBg : theme.Button.tertiaryBg),
+    border: disabled ? "1px solid ".concat(theme.Button.tertiaryDisabledBorder) : "1px solid ".concat(theme.Button.tertiaryBorder),
+    borderRadius: '12px',
+    color: disabled ? theme.Input.placeholderColor : theme.general.color,
+    fontSize: '14px',
+    fontWeight: 700,
+    lineHeight: '24px',
+    padding: '4px 8px',
+    '& > svg > path': {
+      fill: disabled ? theme.Input.placeholderColor : theme.general.color
+    }
+  }, !disabled && {
+    '&:hover, &:focus': {
+      backgroundColor: theme.Button.tertiaryHoverBg,
+      border: "1px solid ".concat(theme.Button.tertiaryHoverBorder)
+    },
+    '&:focus': {
+      border: "1px solid ".concat(theme.general.focusColor)
+    },
+    '&:active': {
+      backgroundColor: theme.Button.tertiaryActiveBg,
+      color: theme.IconButton.primaryActiveFillColor,
+      '& > svg > path': {
+        fill: theme.IconButton.primaryActiveFillColor
+      }
+    }
+  })), variant === ButtonVariant.QUATERNARY && _objectSpread({
+    backgroundColor: backgroundColor || (disabled ? _Identity.COLOR_V2.GRAY_50 : _Identity.COLOR_V2.GREEN),
+    color: disabled ? _Identity.COLOR_V2.GRAY_80 : _Identity.COLOR_V2.WHITE,
+    lineHeight: '24px'
+  }, !disabled && {
+    '&:hover, &:focus': {
+      backgroundColor: _Identity.COLOR_V2.GREEN_LIGHT_600
+    },
+    '&:focus': {
+      border: "1px solid ".concat(_Identity.COLOR_V2.GREEN_LIGHT_700)
+    },
+    '&:active': {
+      backgroundColor: _Identity.COLOR_V2.GREEN_LIGHT_700
+    }
+  })), variant === ButtonVariant.SEND && _objectSpread({
+    backgroundColor: backgroundColor || (disabled ? _Identity.COLOR_V2.GRAY_70 : _Identity.COLOR_V2.BLUE),
+    width: '40px'
+  }, !disabled && {
+    '&:hover, &:focus': {
+      backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_600
+    },
+    '&:focus': {
+      border: "1px solid ".concat(_Identity.COLOR_V2.BLUE_LIGHT_800)
+    },
+    '&:active': {
+      backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_700
+    }
+  }));
+};
+
+exports.buttonStyle = buttonStyle;
+
+var Button = function Button(_ref2) {
+  var showLoading = _ref2.showLoading,
+      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"])({
+    css: function css(theme) {
+      return buttonStyle(theme, props);
+    }
+  }, filterButtonProps(props)), showLoading ? (0, _react.jsx)(_Misc.Loading, {
+    size: 30,
+    color: loadingColor,
+    style: {
+      display: 'flex',
+      margin: 'auto'
+    }
+  }) : children);
+};
+
+exports.Button = Button;
+
+var filterButtonProps = function filterButtonProps(props) {
+  return (0, _util.filterProps)((0, _Text.filterTextProps)(props), ['backgroundColor', 'noCapital']);
+};
+
+exports.filterButtonProps = filterButtonProps;
+//# sourceMappingURL=Button.js.map

package/src/Form/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Button.tsx"],"names":["ButtonVariant","buttonStyle","theme","variant","PRIMARY","backgroundColor","block","disabled","noCapital","bold","center","color","COLOR","WHITE","fontSize","noWrap","textTransform","truncate","props","border","cursor","display","alignItems","justifyContent","marginBottom","padding","outline","textDecoration","touchAction","transition","defaultTransition","width","TERTIARY","borderRadius","SEND","height","lineHeight","maxWidth","minWidth","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"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {COLOR, COLOR_V2} from '../Identity';\nimport {defaultTransition} from '../Identity/motions';\nimport {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"],"file":"Button.js"}

package/src/Form/ButtonLink.d.js

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

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

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

package/src/Form/ButtonLink.d.ts

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

package/src/Form/ButtonLink.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonLink = exports.buttonLinkStyle = 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");
+
+var _util = require("../util");
+
+var _Text = require("../Text");
+
+var _Button = require("./Button");
+
+var _excluded = ["children", "showLoading", "loadingColor"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var buttonLinkStyle = function buttonLinkStyle(theme, props) {
+  return _objectSpread(_objectSpread({}, (0, _Button.buttonStyle)(theme, props)), {}, {
+    display: 'inline-flex !important'
+  });
+};
+
+exports.buttonLinkStyle = buttonLinkStyle;
+
+var filterButtonLinkProps = function filterButtonLinkProps(props) {
+  return (0, _util.filterProps)((0, _Text.filterTextProps)(props), ['backgroundColor', 'disabled', 'noCapital']);
+};
+
+var ButtonLink = function ButtonLink(_ref) {
+  var children = _ref.children,
+      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"])({
+    css: function css(theme) {
+      return buttonLinkStyle(theme, props);
+    }
+  }, filterButtonLinkProps(props)), showLoading ? (0, _react.jsx)(_Misc.Loading, {
+    size: 30,
+    color: loadingColor,
+    style: {
+      display: 'flex',
+      margin: 'auto'
+    }
+  }) : children);
+};
+
+exports.ButtonLink = ButtonLink;
+//# sourceMappingURL=ButtonLink.js.map

package/src/Form/ButtonLink.js.map

@@ -0,0 +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,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 {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.js

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

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

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

package/src/Form/Checkbox.d.ts

@@ -0,0 +1,18 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React from 'react';
+import { TextProps } from '../Text';
+import { InputProps } from './Input';
+export interface StyledLabelProps<T = HTMLLabelElement> extends React.HTMLProps<T> {
+    disabled?: boolean;
+    markInvalid?: boolean;
+    aligncenter?: boolean;
+}
+interface CheckboxProps<T = HTMLInputElement> extends InputProps<T> {
+    id?: string;
+    aligncenter?: boolean;
+}
+export declare const Checkbox: React.FC<CheckboxProps<HTMLInputElement>>;
+export declare type CheckboxLabelProps<T = HTMLSpanElement> = TextProps<T>;
+export declare const CheckboxLabel: ({ ...props }: CheckboxLabelProps) => jsx.JSX.Element;
+export {};

package/src/Form/Checkbox.js

@@ -0,0 +1,146 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxLabel = exports.Checkbox = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("@emotion/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _Text = require("../Text");
+
+var _util = require("../util");
+
+var _Input = require("./Input");
+
+var _excluded = ["id", "children", "style", "disabled", "wrapperCSS"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var filterStyledLabelProps = function filterStyledLabelProps(props) {
+  return (0, _util.filterProps)(props, ['markInvalid']);
+};
+
+var StyledLabel = function StyledLabel(props) {
+  var disabled = props.disabled,
+      markInvalid = props.markInvalid,
+      _props$aligncenter = props.aligncenter,
+      aligncenter = _props$aligncenter === void 0 ? false : _props$aligncenter;
+  return (0, _react.jsx)("label", (0, _extends2["default"])({
+    css: function css(theme) {
+      var _objectSpread2, _objectSpread3;
+
+      return _objectSpread(_objectSpread((_objectSpread2 = {}, (0, _defineProperty2["default"])(_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"), {
+        fill: theme.general.backgroundColor
+      }), (0, _defineProperty2["default"])(_objectSpread2, ".".concat(_Input.INPUT_CLASSNAME, " + & > svg"), {
+        fill: 'none',
+        position: 'absolute',
+        left: '0.25rem',
+        top: '0.25rem'
+      }), _objectSpread2), !disabled && (0, _defineProperty2["default"])({}, ".".concat(_Input.INPUT_CLASSNAME, ":hover + &::before"), {
+        borderColor: theme.general.primaryColor
+      })), {}, (_objectSpread3 = {}, (0, _defineProperty2["default"])(_objectSpread3, ".".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)
+      } : {
+        border: "2px solid ".concat(theme.Checkbox.disableBorderColor)
+      }), {}, {
+        borderRadius: '3px',
+        boxSizing: 'border-box',
+        content: '""',
+        display: 'inline-block',
+        width: '22px',
+        height: '22px',
+        lineHeight: 1.4,
+        margin: '0 8px 0 0px',
+        color: theme.general.color
+      })), (0, _defineProperty2["default"])(_objectSpread3, "position", 'relative'), (0, _defineProperty2["default"])(_objectSpread3, "margin", '0 0 0 -16px'), (0, _defineProperty2["default"])(_objectSpread3, "width", aligncenter ? 'auto' : '100%'), (0, _defineProperty2["default"])(_objectSpread3, "lineHeight", 1.4), (0, _defineProperty2["default"])(_objectSpread3, "display", 'flex'), (0, _defineProperty2["default"])(_objectSpread3, "opacity", disabled ? 0.56 : 1), (0, _defineProperty2["default"])(_objectSpread3, "cursor", disabled ? 'not-allowed' : 'pointer'), (0, _defineProperty2["default"])(_objectSpread3, "borderRadius", '4px'), _objectSpread3));
+    }
+  }, filterStyledLabelProps(props)), props.children, (0, _react.jsx)("svg", {
+    width: "15",
+    height: "13",
+    viewBox: "0 0 16 13",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, (0, _react.jsx)("path", {
+    d: "M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z"
+  })));
+};
+
+var filterCheckboxProps = function filterCheckboxProps(props) {
+  return (0, _util.filterProps)(props, ['markInvalid']);
+}; // We use Math.random..., because some of apps doesn't migrated to newest version of React.
+
+
+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,
+      _ref2$wrapperCSS = _ref2.wrapperCSS,
+      wrapperCSS = _ref2$wrapperCSS === void 0 ? {} : _ref2$wrapperCSS,
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  return (0, _react.jsx)("div", {
+    css: function css(theme) {
+      return _objectSpread((0, _defineProperty2["default"])({
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'flex-start',
+        position: 'relative',
+        left: '-0.3rem'
+      }, ".".concat(_Input.INPUT_CLASSNAME, ":focus-visible + label"), {
+        outline: "1px solid ".concat(theme.general.primaryColor),
+        outlineOffset: '0.4rem'
+      }), wrapperCSS);
+    },
+    style: style
+  }, (0, _react.jsx)("input", (0, _extends2["default"])({
+    type: "checkbox",
+    id: id,
+    style: {
+      height: '22px',
+      marginBottom: '0',
+      opacity: 0,
+      width: '22px',
+      cursor: disabled ? 'not-allowed' : 'pointer'
+    },
+    disabled: disabled,
+    ref: ref,
+    className: _Input.INPUT_CLASSNAME
+  }, filterCheckboxProps(props))), (0, _react.jsx)(StyledLabel, {
+    htmlFor: id,
+    disabled: disabled,
+    markInvalid: props.markInvalid,
+    aligncenter: props.aligncenter
+  }, children));
+});
+
+exports.Checkbox = Checkbox;
+
+var CheckboxLabel = function CheckboxLabel(_ref3) {
+  var props = (0, _extends2["default"])({}, _ref3);
+  return (0, _react.jsx)(_Text.Text, (0, _extends2["default"])({
+    css: function css(theme) {
+      return _objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({}, props)));
+    }
+  }, props));
+};
+
+exports.CheckboxLabel = CheckboxLabel;
+//# sourceMappingURL=Checkbox.js.map

package/src/Form/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Checkbox.tsx"],"names":["filterStyledLabelProps","props","StyledLabel","disabled","markInvalid","aligncenter","theme","INPUT_CLASSNAME","background","Checkbox","disablecheckedBgColor","general","primaryColor","borderColor","fill","backgroundColor","position","left","top","disableBgColor","border","invalidBorderColor","disableBorderColor","borderRadius","boxSizing","content","display","width","height","lineHeight","margin","color","children","filterCheckboxProps","React","forwardRef","ref","id","Math","random","toString","style","wrapperCSS","alignItems","justifyContent","outline","outlineOffset","marginBottom","opacity","cursor","CheckboxLabel"],"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 {Theme} from '../Layout';\nimport {Text, TextProps, textStyle} from '../Text';\nimport {filterProps} from '../util';\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}\n\nconst filterStyledLabelProps = (props: StyledLabelProps) => filterProps(props, ['markInvalid']);\n\nconst StyledLabel = (props: StyledLabelProps) => {\n  const {disabled, markInvalid, aligncenter = false} = props;\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          left: '0.25rem',\n          top: '0.25rem',\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        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      {...filterStyledLabelProps(props)}\n    >\n      {props.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}\n\nconst filterCheckboxProps = (props: CheckboxProps) => filterProps(props, ['markInvalid']);\n\n// We use Math.random..., because some of apps doesn't migrated to newest version of React.\nexport const Checkbox: React.FC<CheckboxProps<HTMLInputElement>> = React.forwardRef<\n  HTMLInputElement,\n  CheckboxProps<HTMLInputElement>\n>(({id = Math.random().toString(), children, style, disabled, wrapperCSS = {}, ...props}, ref) => (\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: '0.4rem',\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      {...filterCheckboxProps(props)}\n    />\n\n    <StyledLabel htmlFor={id} disabled={disabled} markInvalid={props.markInvalid} aligncenter={props.aligncenter}>\n      {children}\n    </StyledLabel>\n  </div>\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"],"file":"Checkbox.js"}

package/src/Form/CodeInput.d.js

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

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

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

package/src/Form/CodeInput.d.ts

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