@wireapp/react-ui-kit 8.9.0 → 8.10.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.10.0](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.9.0...@wireapp/react-ui-kit@8.10.0) (2022-07-25)
+
+
+### Features
+
+* **react-ui-kit:** add custom RangeInput component (#SQSERVICES-758) ([#4342](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/4342)) ([ff81011](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/ff810113075b131f49a5362a0e270541aeb21973)), closes [#SQSERVICES-758](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/SQSERVICES-758)
+* **react-ui-kit:** add multiselect option to Select component ([#4326](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/4326)) ([b08e8c6](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/b08e8c6a7c25318217705a843a36825d34d48015))
+
+
+
+
+
 # [8.9.0](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.8.4...@wireapp/react-ui-kit@8.9.0) (2022-07-19)
 
 

package/package.json

@@ -5,6 +5,7 @@
     "bazinga64": "5.10.0",
     "color": "3.1.3",
     "emotion-normalize": "11.0.1",
+    "react-select": "5.4.0",
     "react-transition-group": "4.4.2"
   },
   "devDependencies": {
@@ -69,6 +70,6 @@
     "test:update": "yarn test --updateSnapshot",
     "test:project": "yarn dist && yarn test"
   },
-  "version": "8.9.0",
-  "gitHead": "a53453a02b71cffb5639ad27f2e4da51635adfd3"
+  "version": "8.10.0",
+  "gitHead": "bd794e434b48bb978ea2ec071d4a772ca30f0964"
 }

package/src/Form/Checkbox.js

@@ -25,7 +25,7 @@ var _util = require("../util");
 
 var _Input = require("./Input");
 
-var _excluded = ["id", "children", "style", "disabled"],
+var _excluded = ["id", "children", "style", "disabled", "wrapperCSS"],
     _excluded2 = ["color"];
 
 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; }
@@ -96,10 +96,12 @@ var Checkbox = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref)
       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 (0, _defineProperty2["default"])({
+      return _objectSpread((0, _defineProperty2["default"])({
         alignItems: 'center',
         display: 'flex',
         justifyContent: 'flex-start',
@@ -108,7 +110,7 @@ var Checkbox = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref)
       }, ".".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"])({
@@ -134,10 +136,10 @@ var Checkbox = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref)
 
 exports.Checkbox = Checkbox;
 
-var CheckboxLabel = function CheckboxLabel(_ref4) {
-  var _ref4$color = _ref4.color,
-      color = _ref4$color === void 0 ? _Identity.COLOR.TEXT : _ref4$color,
-      props = (0, _objectWithoutProperties2["default"])(_ref4, _excluded2);
+var CheckboxLabel = function CheckboxLabel(_ref3) {
+  var _ref3$color = _ref3.color,
+      color = _ref3$color === void 0 ? _Identity.COLOR.TEXT : _ref3$color,
+      props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
   return (0, _react.jsx)(_Text.Text, (0, _extends2["default"])({
     css: function css(theme) {
       return _objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({

package/src/Form/Checkbox.js.map

@@ -1 +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","alignItems","justifyContent","outline","outlineOffset","marginBottom","opacity","cursor","CheckboxLabel","COLOR","TEXT","a","LINK","textDecoration"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\nimport {Theme} from '../Layout';\nimport {Text, TextProps, textStyle, textLinkStyle} from '../Text';\nimport {filterProps} from '../util';\nimport {INPUT_CLASSNAME, 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                  ? `1.5px solid ${theme.Checkbox.invalidBorderColor}`\n                  : `1.5px solid ${theme.Checkbox.border}`,\n              }\n            : {\n                border: `1.5px 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        a: {\n          ...textLinkStyle(theme, {}),\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      })}\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, ...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    })}\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 = ({color = COLOR.TEXT, ...props}: CheckboxLabelProps) => (\n  <Text\n    css={(theme: Theme) => ({\n      ...textStyle(theme, {\n        color,\n        ...props,\n      }),\n      a: {\n        color: COLOR.LINK,\n        textDecoration: 'none',\n      },\n    })}\n    {...props}\n  />\n);\n"],"file":"Checkbox.js"}
+{"version":3,"sources":["Checkbox.tsx"],"names":["filterStyledLabelProps","props","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","COLOR","TEXT","a","LINK","textDecoration"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\nimport {Theme} from '../Layout';\nimport {Text, TextProps, textStyle, textLinkStyle} from '../Text';\nimport {filterProps} from '../util';\nimport {INPUT_CLASSNAME, 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                  ? `1.5px solid ${theme.Checkbox.invalidBorderColor}`\n                  : `1.5px solid ${theme.Checkbox.border}`,\n              }\n            : {\n                border: `1.5px 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        a: {\n          ...textLinkStyle(theme, {}),\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      })}\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 = ({color = COLOR.TEXT, ...props}: CheckboxLabelProps) => (\n  <Text\n    css={(theme: Theme) => ({\n      ...textStyle(theme, {\n        color,\n        ...props,\n      }),\n      a: {\n        color: COLOR.LINK,\n        textDecoration: 'none',\n      },\n    })}\n    {...props}\n  />\n);\n"],"file":"Checkbox.js"}

package/src/Form/Checkbox.md

@@ -1,14 +1,16 @@
 Demo:
 
 ```js
-import {Fragment} from 'react';
+import {Fragment, useState} from 'react';
 import {Column, Columns, Checkbox, CheckboxLabel, Link} from '@wireapp/react-ui-kit';
 
+const [isChecked, setIsChecked] = useState(true);
+
 <Fragment>
   <Columns>
     <Column>Checkbox</Column>
     <Column>
-      <Checkbox id="ToU" checked>
+      <Checkbox id="ToU" checked={isChecked} onChange={ev => setIsChecked(ev.target.checked)}>
         <CheckboxLabel>{'ToU'}</CheckboxLabel>
       </Checkbox>
     </Column>

package/src/Form/RangeInput.d.js

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

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

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

package/src/Form/RangeInput.d.ts

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import { CSSObject } from '@emotion/react';
+import { FC } from 'react';
+import { TextProps } from '../Text';
+export interface RangeInputProps<T = HTMLInputElement> extends TextProps<T> {
+    label?: string;
+    minValueLabel?: string;
+    maxValueLabel?: string;
+    wrapperCSS?: CSSObject;
+}
+export declare const RangeInput: FC<RangeInputProps>;

package/src/Form/RangeInput.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RangeInput = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = require("@emotion/react");
+
+var _react2 = _interopRequireWildcard(require("react"));
+
+var _InputLabel = _interopRequireDefault(require("./InputLabel"));
+
+var _RangeInput = require("./RangeInput.styles");
+
+var _excluded = ["ref", "id", "label", "minValueLabel", "maxValueLabel", "min", "max", "value", "onChange", "wrapperCSS"];
+
+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; }
+
+var RangeInput = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref) {
+  var ref = _ref.ref,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? Math.random().toString() : _ref$id,
+      label = _ref.label,
+      minValueLabel = _ref.minValueLabel,
+      maxValueLabel = _ref.maxValueLabel,
+      _ref$min = _ref.min,
+      min = _ref$min === void 0 ? '0' : _ref$min,
+      _ref$max = _ref.max,
+      max = _ref$max === void 0 ? '100' : _ref$max,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '0' : _ref$value,
+      onChange = _ref.onChange,
+      wrapperCSS = _ref.wrapperCSS,
+      inputProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var minNum = Number(min);
+  var maxNum = Number(max);
+  var valueNum = Number(value);
+  var backgroundSize = "".concat((valueNum - minNum) * 100 / (maxNum - minNum), "% 100%");
+  return (0, _react.jsx)("div", {
+    css: wrapperCSS
+  }, label && (0, _react.jsx)(_InputLabel["default"], {
+    htmlFor: id
+  }, label), (0, _react.jsx)("div", {
+    css: _RangeInput.rangeInputWrapperStyles
+  }, minValueLabel && (0, _react.jsx)("span", {
+    css: (0, _RangeInput.getValueLabelStyles)(_RangeInput.ValueLabelPosition.LEFT)
+  }, minValueLabel), maxValueLabel && (0, _react.jsx)("span", {
+    css: (0, _RangeInput.getValueLabelStyles)(_RangeInput.ValueLabelPosition.RIGHT)
+  }, maxValueLabel), (0, _react.jsx)("input", (0, _extends2["default"])({
+    ref: ref,
+    css: function css(theme) {
+      return (0, _RangeInput.getImageCropZoomInputStyles)(theme, backgroundSize);
+    },
+    id: id,
+    name: id,
+    min: min,
+    max: max,
+    value: value,
+    onChange: onChange,
+    type: "range"
+  }, inputProps))));
+});
+exports.RangeInput = RangeInput;
+//# sourceMappingURL=RangeInput.js.map

package/src/Form/RangeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["RangeInput.tsx"],"names":["RangeInput","ref","id","Math","random","toString","label","minValueLabel","maxValueLabel","min","max","value","onChange","wrapperCSS","inputProps","minNum","Number","maxNum","valueNum","backgroundSize","rangeInputWrapperStyles","ValueLabelPosition","LEFT","RIGHT","theme"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AACA;;AAGA;;AACA;;;;;;;;AAcO,IAAMA,UAA+B,gBAAG,wBAC7C,gBAYM;AAAA,MAXJC,GAWI,QAXJA,GAWI;AAAA,qBAVJC,EAUI;AAAA,MAVJA,EAUI,wBAVCC,IAAI,CAACC,MAAL,GAAcC,QAAd,EAUD;AAAA,MATJC,KASI,QATJA,KASI;AAAA,MARJC,aAQI,QARJA,aAQI;AAAA,MAPJC,aAOI,QAPJA,aAOI;AAAA,sBANJC,GAMI;AAAA,MANJA,GAMI,yBANE,GAMF;AAAA,sBALJC,GAKI;AAAA,MALJA,GAKI,yBALE,KAKF;AAAA,wBAJJC,KAII;AAAA,MAJJA,KAII,2BAJI,GAIJ;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,UAEI,QAFJA,UAEI;AAAA,MADDC,UACC;AACJ,MAAMC,MAAM,GAAGC,MAAM,CAACP,GAAD,CAArB;AACA,MAAMQ,MAAM,GAAGD,MAAM,CAACN,GAAD,CAArB;AACA,MAAMQ,QAAQ,GAAGF,MAAM,CAACL,KAAD,CAAvB;AAEA,MAAMQ,cAAc,aAAO,CAACD,QAAQ,GAAGH,MAAZ,IAAsB,GAAvB,IAA+BE,MAAM,GAAGF,MAAxC,CAAN,WAApB;AAEA,SACE;AAAK,IAAA,GAAG,EAAEF;AAAV,KACGP,KAAK,IAAI,gBAAC,sBAAD;AAAY,IAAA,OAAO,EAAEJ;AAArB,KAA0BI,KAA1B,CADZ,EAEE;AAAK,IAAA,GAAG,EAAEc;AAAV,KACGb,aAAa,IAAI;AAAM,IAAA,GAAG,EAAE,qCAAoBc,+BAAmBC,IAAvC;AAAX,KAA0Df,aAA1D,CADpB,EAEGC,aAAa,IAAI;AAAM,IAAA,GAAG,EAAE,qCAAoBa,+BAAmBE,KAAvC;AAAX,KAA2Df,aAA3D,CAFpB,EAGE;AACE,IAAA,GAAG,EAAEP,GADP;AAEE,IAAA,GAAG,EAAE,aAACuB,KAAD;AAAA,aAAkB,6CAA4BA,KAA5B,EAAmCL,cAAnC,CAAlB;AAAA,KAFP;AAGE,IAAA,EAAE,EAAEjB,EAHN;AAIE,IAAA,IAAI,EAAEA,EAJR;AAKE,IAAA,GAAG,EAAEO,GALP;AAME,IAAA,GAAG,EAAEC,GANP;AAOE,IAAA,KAAK,EAAEC,KAPT;AAQE,IAAA,QAAQ,EAAEC,QARZ;AASE,IAAA,IAAI,EAAC;AATP,KAUME,UAVN,EAHF,CAFF,CADF;AAqBD,CAzC4C,CAAxC","sourcesContent":["/*\n * Wire\n * Copyright (C) 2022 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React, {FC, forwardRef} from 'react';\nimport {TextProps} from '../Text';\nimport {Theme} from '../Layout';\nimport InputLabel from './InputLabel';\nimport {\n  getImageCropZoomInputStyles,\n  getValueLabelStyles,\n  rangeInputWrapperStyles,\n  ValueLabelPosition,\n} from './RangeInput.styles';\n\nexport interface RangeInputProps<T = HTMLInputElement> extends TextProps<T> {\n  label?: string;\n  minValueLabel?: string;\n  maxValueLabel?: string;\n  wrapperCSS?: CSSObject;\n}\n\nexport const RangeInput: FC<RangeInputProps> = forwardRef<HTMLInputElement, RangeInputProps<HTMLInputElement>>(\n  ({\n    ref,\n    id = Math.random().toString(),\n    label,\n    minValueLabel,\n    maxValueLabel,\n    min = '0',\n    max = '100',\n    value = '0',\n    onChange,\n    wrapperCSS,\n    ...inputProps\n  }) => {\n    const minNum = Number(min);\n    const maxNum = Number(max);\n    const valueNum = Number(value);\n\n    const backgroundSize = `${((valueNum - minNum) * 100) / (maxNum - minNum)}% 100%` as const;\n\n    return (\n      <div css={wrapperCSS}>\n        {label && <InputLabel htmlFor={id}>{label}</InputLabel>}\n        <div css={rangeInputWrapperStyles}>\n          {minValueLabel && <span css={getValueLabelStyles(ValueLabelPosition.LEFT)}>{minValueLabel}</span>}\n          {maxValueLabel && <span css={getValueLabelStyles(ValueLabelPosition.RIGHT)}>{maxValueLabel}</span>}\n          <input\n            ref={ref}\n            css={(theme: Theme) => getImageCropZoomInputStyles(theme, backgroundSize)}\n            id={id}\n            name={id}\n            min={min}\n            max={max}\n            value={value}\n            onChange={onChange}\n            type=\"range\"\n            {...inputProps}\n          />\n        </div>\n      </div>\n    );\n  },\n);\n"],"file":"RangeInput.js"}

package/src/Form/RangeInput.md

@@ -0,0 +1,27 @@
+Demo:
+
+```js
+import {Columns, Column, RangeInput} from '@wireapp/react-ui-kit';
+import {useState} from 'react';
+
+const [zoom, setZoom] = useState(1);
+
+const handleChange = e => {
+  setZoom(+e.target.value);
+};
+
+<>
+  <div>
+    <RangeInput
+      label={'Zoom'}
+      minValueLabel="-"
+      maxValueLabel="+"
+      onChange={handleChange}
+      value={zoom}
+      min={1}
+      max={3}
+      step={0.1}
+    />
+  </div>
+</>;
+```

package/src/Form/RangeInput.styles.d.js

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

package/src/Form/RangeInput.styles.d.js.map

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

package/src/Form/RangeInput.styles.d.ts

@@ -0,0 +1,9 @@
+import { CSSObject } from '@emotion/react';
+import { Theme } from '../Layout';
+export declare const rangeInputWrapperStyles: CSSObject;
+export declare const getImageCropZoomInputStyles: (theme: Theme, backgroundSize: `${number}% ${number}%`) => CSSObject;
+export declare enum ValueLabelPosition {
+    LEFT = "left",
+    RIGHT = "right"
+}
+export declare const getValueLabelStyles: (position: ValueLabelPosition) => CSSObject;

package/src/Form/RangeInput.styles.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getValueLabelStyles = exports.ValueLabelPosition = exports.getImageCropZoomInputStyles = exports.rangeInputWrapperStyles = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _Identity = require("../Identity");
+
+var _util = require("../util");
+
+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 rangeInputWrapperStyles = {
+  position: 'relative',
+  marginTop: '19px'
+};
+exports.rangeInputWrapperStyles = rangeInputWrapperStyles;
+var thumbSelectors = ['&::-webkit-slider-thumb', '&::-moz-range-thumb', '&::-ms-thumb'];
+var sliderSelectors = ['&::-webkit-slider-runnable-track', '&::-moz-range-track', '&::-ms-track'];
+
+var getImageCropZoomInputStyles = function getImageCropZoomInputStyles(theme, backgroundSize) {
+  return _objectSpread(_objectSpread({
+    display: 'block',
+    '-webkit-appearance': 'none',
+    width: '100%',
+    height: '8px',
+    background: _Identity.COLOR_V2.GRAY_60,
+    borderRadius: '4px',
+    backgroundImage: "linear-gradient(".concat(theme.general.primaryColor, ", ").concat(theme.general.primaryColor, ")"),
+    backgroundSize: backgroundSize || '0% 100%',
+    backgroundRepeat: 'no-repeat'
+  }, (0, _util.manySelectors)(thumbSelectors, {
+    '-webkit-appearance': 'none',
+    height: '18px',
+    width: '18px',
+    borderRadius: '50%',
+    background: _Identity.COLOR_V2.GRAY_80,
+    cursor: 'pointer',
+    border: 'none',
+    boxShadow: 'none'
+  })), (0, _util.manySelectors)(sliderSelectors, {
+    '-webkit-appearance': 'none',
+    boxShadow: 'none',
+    border: 'none',
+    background: 'transparent'
+  }));
+};
+
+exports.getImageCropZoomInputStyles = getImageCropZoomInputStyles;
+var ValueLabelPosition;
+exports.ValueLabelPosition = ValueLabelPosition;
+
+(function (ValueLabelPosition) {
+  ValueLabelPosition["LEFT"] = "left";
+  ValueLabelPosition["RIGHT"] = "right";
+})(ValueLabelPosition || (exports.ValueLabelPosition = ValueLabelPosition = {}));
+
+var getValueLabelStyles = function getValueLabelStyles(position) {
+  return (0, _defineProperty2["default"])({
+    pointerEvents: 'none',
+    bottom: '100%',
+    fontSize: '16px',
+    fontWeight: 300,
+    position: 'absolute'
+  }, position, '4px');
+};
+
+exports.getValueLabelStyles = getValueLabelStyles;
+//# sourceMappingURL=RangeInput.styles.js.map

package/src/Form/RangeInput.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["RangeInput.styles.ts"],"names":["rangeInputWrapperStyles","position","marginTop","thumbSelectors","sliderSelectors","getImageCropZoomInputStyles","theme","backgroundSize","display","width","height","background","COLOR_V2","GRAY_60","borderRadius","backgroundImage","general","primaryColor","backgroundRepeat","GRAY_80","cursor","border","boxShadow","ValueLabelPosition","getValueLabelStyles","pointerEvents","bottom","fontSize","fontWeight"],"mappings":";;;;;;;;;;;AAqBA;;AACA;;;;;;AAEO,IAAMA,uBAAkC,GAAG;AAChDC,EAAAA,QAAQ,EAAE,UADsC;AAEhDC,EAAAA,SAAS,EAAE;AAFqC,CAA3C;;AAKP,IAAMC,cAAc,GAAG,CAAC,yBAAD,EAA4B,qBAA5B,EAAmD,cAAnD,CAAvB;AACA,IAAMC,eAAe,GAAG,CAAC,kCAAD,EAAqC,qBAArC,EAA4D,cAA5D,CAAxB;;AAEO,IAAMC,2BAA2B,GAAG,SAA9BA,2BAA8B,CAACC,KAAD,EAAeC,cAAf;AAAA;AACzCC,IAAAA,OAAO,EAAE,OADgC;AAEzC,0BAAsB,MAFmB;AAGzCC,IAAAA,KAAK,EAAE,MAHkC;AAIzCC,IAAAA,MAAM,EAAE,KAJiC;AAKzCC,IAAAA,UAAU,EAAEC,mBAASC,OALoB;AAMzCC,IAAAA,YAAY,EAAE,KAN2B;AAOzCC,IAAAA,eAAe,4BAAqBT,KAAK,CAACU,OAAN,CAAcC,YAAnC,eAAoDX,KAAK,CAACU,OAAN,CAAcC,YAAlE,MAP0B;AAQzCV,IAAAA,cAAc,EAAEA,cAAc,IAAI,SARO;AASzCW,IAAAA,gBAAgB,EAAE;AATuB,KAWtC,yBAAcf,cAAd,EAA8B;AAC/B,0BAAsB,MADS;AAE/BO,IAAAA,MAAM,EAAE,MAFuB;AAG/BD,IAAAA,KAAK,EAAE,MAHwB;AAI/BK,IAAAA,YAAY,EAAE,KAJiB;AAK/BH,IAAAA,UAAU,EAAEC,mBAASO,OALU;AAM/BC,IAAAA,MAAM,EAAE,SANuB;AAO/BC,IAAAA,MAAM,EAAE,MAPuB;AAQ/BC,IAAAA,SAAS,EAAE;AARoB,GAA9B,CAXsC,GAsBtC,yBAAclB,eAAd,EAA+B;AAChC,0BAAsB,MADU;AAEhCkB,IAAAA,SAAS,EAAE,MAFqB;AAGhCD,IAAAA,MAAM,EAAE,MAHwB;AAIhCV,IAAAA,UAAU,EAAE;AAJoB,GAA/B,CAtBsC;AAAA,CAApC;;;IA8BKY,kB;;;WAAAA,kB;AAAAA,EAAAA,kB;AAAAA,EAAAA,kB;GAAAA,kB,kCAAAA,kB;;AAKL,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACvB,QAAD;AAAA;AACjCwB,IAAAA,aAAa,EAAE,MADkB;AAEjCC,IAAAA,MAAM,EAAE,MAFyB;AAGjCC,IAAAA,QAAQ,EAAE,MAHuB;AAIjCC,IAAAA,UAAU,EAAE,GAJqB;AAKjC3B,IAAAA,QAAQ,EAAE;AALuB,KAMhCA,QANgC,EAMrB,KANqB;AAAA,CAA5B","sourcesContent":["/*\n * Wire\n * Copyright (C) 2022 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\nimport {CSSObject} from '@emotion/react';\nimport {Theme} from '../Layout';\nimport {COLOR_V2} from '../Identity';\nimport {manySelectors} from '../util';\n\nexport const rangeInputWrapperStyles: CSSObject = {\n  position: 'relative',\n  marginTop: '19px',\n};\n\nconst thumbSelectors = ['&::-webkit-slider-thumb', '&::-moz-range-thumb', '&::-ms-thumb'];\nconst sliderSelectors = ['&::-webkit-slider-runnable-track', '&::-moz-range-track', '&::-ms-track'];\n\nexport const getImageCropZoomInputStyles = (theme: Theme, backgroundSize: `${number}% ${number}%`): CSSObject => ({\n  display: 'block',\n  '-webkit-appearance': 'none',\n  width: '100%',\n  height: '8px',\n  background: COLOR_V2.GRAY_60,\n  borderRadius: '4px',\n  backgroundImage: `linear-gradient(${theme.general.primaryColor}, ${theme.general.primaryColor})`,\n  backgroundSize: backgroundSize || '0% 100%',\n  backgroundRepeat: 'no-repeat',\n\n  ...manySelectors(thumbSelectors, {\n    '-webkit-appearance': 'none',\n    height: '18px',\n    width: '18px',\n    borderRadius: '50%',\n    background: COLOR_V2.GRAY_80,\n    cursor: 'pointer',\n    border: 'none',\n    boxShadow: 'none',\n  }),\n\n  ...manySelectors(sliderSelectors, {\n    '-webkit-appearance': 'none',\n    boxShadow: 'none',\n    border: 'none',\n    background: 'transparent',\n  }),\n});\n\nexport enum ValueLabelPosition {\n  LEFT = 'left',\n  RIGHT = 'right',\n}\n\nexport const getValueLabelStyles = (position: ValueLabelPosition): CSSObject => ({\n  pointerEvents: 'none',\n  bottom: '100%',\n  fontSize: '16px',\n  fontWeight: 300,\n  position: 'absolute',\n  [position]: '4px',\n});\n"],"file":"RangeInput.styles.js"}

package/src/Form/Select.d.js

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

package/src/Form/Select.d.ts

@@ -1,25 +1,24 @@
 /** @jsx jsx */
-import { CSSObject, jsx } from '@emotion/react';
-import type { Theme } from '../Layout';
-import { ReactElement } from 'react';
-export declare type SelectOption = {
+import { CSSObject } from '@emotion/react';
+import { FC, ReactElement } from 'react';
+import { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager';
+export declare type Option = {
     value: string | number;
     label: string;
     description?: string;
+    isDisabled?: boolean;
 };
-export interface SelectProps<T extends SelectOption = SelectOption> {
+interface SelectProps extends StateManagerProps<Option> {
     id: string;
-    onChange: (selectedOption: T['value']) => void;
     dataUieName: string;
-    options: T[];
-    value?: T | null;
-    helperText?: string;
+    options: Option[];
+    wrapperCSS?: CSSObject;
     label?: string;
-    disabled?: boolean;
-    required?: boolean;
-    markInvalid?: boolean;
+    helperText?: string;
     error?: ReactElement;
-    wrapperCSS?: CSSObject;
+    markInvalid?: boolean;
+    required?: boolean;
+    isMulti?: boolean;
 }
-export declare const selectStyle: <T>(theme: Theme, props: any, error?: boolean) => CSSObject;
-export declare const Select: <T extends SelectOption = SelectOption>({ id, label, error, helperText, options, value, onChange, required, markInvalid, dataUieName, wrapperCSS, ...props }: SelectProps<T>) => jsx.JSX.Element;
+export declare const Select: FC<SelectProps>;
+export {};