@wireapp/react-ui-kit 8.17.1 → 8.17.3

package/src/Form/RangeInput.js

@@ -1,47 +1,35 @@
 "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 = ["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, ref) {
   var _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);
+    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);

package/src/Form/RangeInput.js.map

@@ -1 +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,gBAaEC,GAbF,EAcK;AAAA,qBAZDC,EAYC;AAAA,MAZDA,EAYC,wBAZIC,IAAI,CAACC,MAAL,GAAcC,QAAd,EAYJ;AAAA,MAXDC,KAWC,QAXDA,KAWC;AAAA,MAVDC,aAUC,QAVDA,aAUC;AAAA,MATDC,aASC,QATDA,aASC;AAAA,sBARDC,GAQC;AAAA,MARDA,GAQC,yBARK,GAQL;AAAA,sBAPDC,GAOC;AAAA,MAPDA,GAOC,yBAPK,KAOL;AAAA,wBANDC,KAMC;AAAA,MANDA,KAMC,2BANO,GAMP;AAAA,MALDC,QAKC,QALDA,QAKC;AAAA,MAJDC,UAIC,QAJDA,UAIC;AAAA,MAHEC,UAGF;AACH,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,CA3C4C,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    {\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    ref,\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"}
+{"version":3,"file":"RangeInput.js","names":["RangeInput","forwardRef","ref","id","Math","random","toString","label","minValueLabel","maxValueLabel","min","max","value","onChange","wrapperCSS","inputProps","minNum","Number","maxNum","valueNum","backgroundSize","rangeInputWrapperStyles","getValueLabelStyles","ValueLabelPosition","LEFT","RIGHT","theme","getImageCropZoomInputStyles"],"sources":["RangeInput.tsx"],"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    {\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    ref,\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"],"mappings":";;;;;;;;;;AAoBA;AACA;AAGA;AACA;AAK6B;AAAA;AAAA;AAStB,IAAMA,UAA+B,gBAAG,IAAAC,kBAAU,EACvD,gBAaEC,GAAG,EACA;EAAA,mBAZDC,EAAE;IAAFA,EAAE,wBAAGC,IAAI,CAACC,MAAM,EAAE,CAACC,QAAQ,EAAE;IAC7BC,KAAK,QAALA,KAAK;IACLC,aAAa,QAAbA,aAAa;IACbC,aAAa,QAAbA,aAAa;IAAA,gBACbC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IAAA,gBACTC,GAAG;IAAHA,GAAG,yBAAG,KAAK;IAAA,kBACXC,KAAK;IAALA,KAAK,2BAAG,GAAG;IACXC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACPC,UAAU;EAIf,IAAMC,MAAM,GAAGC,MAAM,CAACP,GAAG,CAAC;EAC1B,IAAMQ,MAAM,GAAGD,MAAM,CAACN,GAAG,CAAC;EAC1B,IAAMQ,QAAQ,GAAGF,MAAM,CAACL,KAAK,CAAC;EAE9B,IAAMQ,cAAc,aAAO,CAACD,QAAQ,GAAGH,MAAM,IAAI,GAAG,IAAKE,MAAM,GAAGF,MAAM,CAAC,WAAiB;EAE1F,OACE;IAAK,GAAG,EAAEF;EAAW,GAClBP,KAAK,IAAI,gBAAC,sBAAU;IAAC,OAAO,EAAEJ;EAAG,GAAEI,KAAK,CAAc,EACvD;IAAK,GAAG,EAAEc;EAAwB,GAC/Bb,aAAa,IAAI;IAAM,GAAG,EAAE,IAAAc,+BAAmB,EAACC,8BAAkB,CAACC,IAAI;EAAE,GAAEhB,aAAa,CAAQ,EAChGC,aAAa,IAAI;IAAM,GAAG,EAAE,IAAAa,+BAAmB,EAACC,8BAAkB,CAACE,KAAK;EAAE,GAAEhB,aAAa,CAAQ,EAClG;IACE,GAAG,EAAEP,GAAI;IACT,GAAG,EAAE,aAACwB,KAAY;MAAA,OAAK,IAAAC,uCAA2B,EAACD,KAAK,EAAEN,cAAc,CAAC;IAAA,CAAC;IAC1E,EAAE,EAAEjB,EAAG;IACP,IAAI,EAAEA,EAAG;IACT,GAAG,EAAEO,GAAI;IACT,GAAG,EAAEC,GAAI;IACT,KAAK,EAAEC,KAAM;IACb,QAAQ,EAAEC,QAAS;IACnB,IAAI,EAAC;EAAO,GACRE,UAAU,EACd,CACE,CACF;AAEV,CAAC,CACF;AAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"RangeInput.styles.d.js"}
+{"version":3,"file":"RangeInput.styles.d.js","names":[],"sources":["RangeInput.styles.d.ts"],"sourcesContent":["import { CSSObject } from '@emotion/react';\nimport { Theme } from '../Layout';\nexport declare const rangeInputWrapperStyles: CSSObject;\nexport declare const getImageCropZoomInputStyles: (theme: Theme, backgroundSize: `${number}% ${number}%`) => CSSObject;\nexport declare enum ValueLabelPosition {\n    LEFT = \"left\",\n    RIGHT = \"right\"\n}\nexport declare const getValueLabelStyles: (position: ValueLabelPosition) => CSSObject;\n"],"mappings":""}

package/src/Form/RangeInput.styles.js

@@ -1,22 +1,15 @@
 "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;
-
+exports.rangeInputWrapperStyles = exports.getValueLabelStyles = exports.getImageCropZoomInputStyles = exports.ValueLabelPosition = 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; }
-
+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; }
 var rangeInputWrapperStyles = {
   position: 'relative',
   marginTop: '19px'
@@ -24,7 +17,6 @@ var rangeInputWrapperStyles = {
 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',
@@ -52,16 +44,13 @@ var getImageCropZoomInputStyles = function getImageCropZoomInputStyles(theme, ba
     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',
@@ -71,6 +60,5 @@ var getValueLabelStyles = function getValueLabelStyles(position) {
     position: 'absolute'
   }, position, '4px');
 };
-
 exports.getValueLabelStyles = getValueLabelStyles;
 //# sourceMappingURL=RangeInput.styles.js.map

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

@@ -1 +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"}
+{"version":3,"file":"RangeInput.styles.js","names":["rangeInputWrapperStyles","position","marginTop","thumbSelectors","sliderSelectors","getImageCropZoomInputStyles","theme","backgroundSize","display","width","height","background","COLOR_V2","GRAY_60","borderRadius","backgroundImage","general","primaryColor","backgroundRepeat","manySelectors","GRAY_80","cursor","border","boxShadow","ValueLabelPosition","getValueLabelStyles","pointerEvents","bottom","fontSize","fontWeight"],"sources":["RangeInput.styles.ts"],"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"],"mappings":";;;;;;;;AAqBA;AACA;AAAsC;AAAA;AAE/B,IAAMA,uBAAkC,GAAG;EAChDC,QAAQ,EAAE,UAAU;EACpBC,SAAS,EAAE;AACb,CAAC;AAAC;AAEF,IAAMC,cAAc,GAAG,CAAC,yBAAyB,EAAE,qBAAqB,EAAE,cAAc,CAAC;AACzF,IAAMC,eAAe,GAAG,CAAC,kCAAkC,EAAE,qBAAqB,EAAE,cAAc,CAAC;AAE5F,IAAMC,2BAA2B,GAAG,SAA9BA,2BAA2B,CAAIC,KAAY,EAAEC,cAAuC;EAAA;IAC/FC,OAAO,EAAE,OAAO;IAChB,oBAAoB,EAAE,MAAM;IAC5BC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,KAAK;IACbC,UAAU,EAAEC,kBAAQ,CAACC,OAAO;IAC5BC,YAAY,EAAE,KAAK;IACnBC,eAAe,4BAAqBT,KAAK,CAACU,OAAO,CAACC,YAAY,eAAKX,KAAK,CAACU,OAAO,CAACC,YAAY,MAAG;IAChGV,cAAc,EAAEA,cAAc,IAAI,SAAS;IAC3CW,gBAAgB,EAAE;EAAW,GAE1B,IAAAC,mBAAa,EAAChB,cAAc,EAAE;IAC/B,oBAAoB,EAAE,MAAM;IAC5BO,MAAM,EAAE,MAAM;IACdD,KAAK,EAAE,MAAM;IACbK,YAAY,EAAE,KAAK;IACnBH,UAAU,EAAEC,kBAAQ,CAACQ,OAAO;IAC5BC,MAAM,EAAE,SAAS;IACjBC,MAAM,EAAE,MAAM;IACdC,SAAS,EAAE;EACb,CAAC,CAAC,GAEC,IAAAJ,mBAAa,EAACf,eAAe,EAAE;IAChC,oBAAoB,EAAE,MAAM;IAC5BmB,SAAS,EAAE,MAAM;IACjBD,MAAM,EAAE,MAAM;IACdX,UAAU,EAAE;EACd,CAAC,CAAC;AAAA,CACF;AAAC;AAAA,IAESa,kBAAkB;AAAA;AAAA,WAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAlBA,kBAAkB;AAAA,GAAlBA,kBAAkB,kCAAlBA,kBAAkB;AAKvB,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,CAAIxB,QAA4B;EAAA;IAC9DyB,aAAa,EAAE,MAAM;IACrBC,MAAM,EAAE,MAAM;IACdC,QAAQ,EAAE,MAAM;IAChBC,UAAU,EAAE,GAAG;IACf5B,QAAQ,EAAE;EAAU,GACnBA,QAAQ,EAAG,KAAK;AAAA,CACjB;AAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"RoundIconButton.d.js"}
+{"version":3,"file":"RoundIconButton.d.js","names":[],"sources":["RoundIconButton.d.ts"],"sourcesContent":["/** @jsx jsx */\nimport { CSSObject } from '@emotion/react';\nimport React from 'react';\nimport { Theme } from '../Layout';\nimport { ButtonProps } from './Button';\nexport interface RoundIconButtonProps<T = HTMLButtonElement> extends ButtonProps<T> {\n}\nexport declare const roundIconButtonStyle: <T>(theme: Theme, props: RoundIconButtonProps<T>) => CSSObject;\nexport declare const RoundIconButton: React.FC<RoundIconButtonProps>;\n"],"mappings":""}

package/src/Form/RoundIconButton.js

@@ -1,34 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RoundIconButton = exports.roundIconButtonStyle = void 0;
-
+exports.roundIconButtonStyle = exports.RoundIconButton = 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 _react2 = _interopRequireDefault(require("react"));
-
 var _Identity = require("../Identity");
-
 var _Misc = require("../Misc/");
-
 var _Button = require("./Button");
-
 var _excluded = ["children"];
-
-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; }
-
+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; }
 var roundIconButtonStyle = function roundIconButtonStyle(theme, props) {
   return _objectSpread(_objectSpread({}, (0, _Button.buttonStyle)(theme, props)), {}, {
     alignItems: 'center',
@@ -43,12 +30,10 @@ var roundIconButtonStyle = function roundIconButtonStyle(theme, props) {
     width: "".concat(props.size, "px")
   });
 };
-
 exports.roundIconButtonStyle = roundIconButtonStyle;
-
 var RoundIconButton = function RoundIconButton(_ref) {
   var children = _ref.children,
-      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return (0, _react.jsx)("button", (0, _extends2["default"])({
     css: function css(theme) {
       return roundIconButtonStyle(theme, props);
@@ -60,7 +45,6 @@ var RoundIconButton = function RoundIconButton(_ref) {
     }
   }));
 };
-
 exports.RoundIconButton = RoundIconButton;
 RoundIconButton.defaultProps = {
   backgroundColor: _Identity.COLOR.BLUE,

package/src/Form/RoundIconButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["RoundIconButton.tsx"],"names":["roundIconButtonStyle","theme","props","alignItems","borderRadius","display","height","size","justifyContent","lineHeight","margin","minWidth","padding","width","RoundIconButton","children","defaultProps","color","COLOR","WHITE","backgroundColor","BLUE"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AACA;;AAGA;;AAEA;;AACA;;;;;;;;AAIO,IAAMA,oBAAoF,GAAG,SAAvFA,oBAAuF,CAACC,KAAD,EAAQC,KAAR;AAAA,yCAC/F,yBAAYD,KAAZ,EAAmBC,KAAnB,CAD+F;AAElGC,IAAAA,UAAU,EAAE,QAFsF;AAGlGC,IAAAA,YAAY,EAAE,KAHoF;AAIlGC,IAAAA,OAAO,EAAE,MAJyF;AAKlGC,IAAAA,MAAM,YAAKJ,KAAK,CAACK,IAAX,OAL4F;AAMlGC,IAAAA,cAAc,EAAE,QANkF;AAOlGC,IAAAA,UAAU,EAAE,SAPsF;AAQlGC,IAAAA,MAAM,EAAE,QAR0F;AASlGC,IAAAA,QAAQ,YAAKT,KAAK,CAACK,IAAX,OAT0F;AAUlGK,IAAAA,OAAO,EAAE,CAVyF;AAWlGC,IAAAA,KAAK,YAAKX,KAAK,CAACK,IAAX;AAX6F;AAAA,CAA7F;;;;AAcA,IAAMO,eAA+C,GAAG,SAAlDA,eAAkD;AAAA,MAAEC,QAAF,QAAEA,QAAF;AAAA,MAAeb,KAAf;AAAA,SAC7D;AAAQ,IAAA,GAAG,EAAE,aAACD,KAAD;AAAA,aAAkBD,oBAAoB,CAACC,KAAD,EAAQC,KAAR,CAAtC;AAAA;AAAb,KAAuE,+BAAkBA,KAAlB,CAAvE,GACG,oCAAsD;AAACa,IAAAA,QAAQ,EAARA,QAAD;AAAWC,IAAAA,YAAY,EAAE;AAACC,MAAAA,KAAK,EAAEC,gBAAMC;AAAd;AAAzB,GAAtD,CADH,CAD6D;AAAA,CAAxD;;;AAMPL,eAAe,CAACE,YAAhB,GAA+B;AAC7BI,EAAAA,eAAe,EAAEF,gBAAMG,IADM;AAE7Bd,EAAAA,IAAI,EAAE;AAFuB,CAA/B","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 from 'react';\n\nimport {SVGIconProps} from '../Icon/SVGIcon';\nimport {COLOR} from '../Identity';\nimport {Theme} from '../Layout';\nimport {childrenWithDefaultProps} from '../Misc/';\nimport {ButtonProps, buttonStyle, filterButtonProps} from './Button';\n\nexport interface RoundIconButtonProps<T = HTMLButtonElement> extends ButtonProps<T> {}\n\nexport const roundIconButtonStyle: <T>(theme: Theme, props: RoundIconButtonProps<T>) => CSSObject = (theme, props) => ({\n  ...buttonStyle(theme, props),\n  alignItems: 'center',\n  borderRadius: '50%',\n  display: 'flex',\n  height: `${props.size}px`,\n  justifyContent: 'center',\n  lineHeight: 'initial',\n  margin: '0 auto',\n  minWidth: `${props.size}px`,\n  padding: 0,\n  width: `${props.size}px`,\n});\n\nexport const RoundIconButton: React.FC<RoundIconButtonProps> = ({children, ...props}) => (\n  <button css={(theme: Theme) => roundIconButtonStyle(theme, props)} {...filterButtonProps(props)}>\n    {childrenWithDefaultProps<SVGSVGElement, SVGIconProps>({children, defaultProps: {color: COLOR.WHITE}})}\n  </button>\n);\n\nRoundIconButton.defaultProps = {\n  backgroundColor: COLOR.BLUE,\n  size: 32,\n};\n"],"file":"RoundIconButton.js"}
+{"version":3,"file":"RoundIconButton.js","names":["roundIconButtonStyle","theme","props","buttonStyle","alignItems","borderRadius","display","height","size","justifyContent","lineHeight","margin","minWidth","padding","width","RoundIconButton","children","filterButtonProps","childrenWithDefaultProps","defaultProps","color","COLOR","WHITE","backgroundColor","BLUE"],"sources":["RoundIconButton.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 from 'react';\n\nimport {SVGIconProps} from '../Icon/SVGIcon';\nimport {COLOR} from '../Identity';\nimport {Theme} from '../Layout';\nimport {childrenWithDefaultProps} from '../Misc/';\nimport {ButtonProps, buttonStyle, filterButtonProps} from './Button';\n\nexport interface RoundIconButtonProps<T = HTMLButtonElement> extends ButtonProps<T> {}\n\nexport const roundIconButtonStyle: <T>(theme: Theme, props: RoundIconButtonProps<T>) => CSSObject = (theme, props) => ({\n  ...buttonStyle(theme, props),\n  alignItems: 'center',\n  borderRadius: '50%',\n  display: 'flex',\n  height: `${props.size}px`,\n  justifyContent: 'center',\n  lineHeight: 'initial',\n  margin: '0 auto',\n  minWidth: `${props.size}px`,\n  padding: 0,\n  width: `${props.size}px`,\n});\n\nexport const RoundIconButton: React.FC<RoundIconButtonProps> = ({children, ...props}) => (\n  <button css={(theme: Theme) => roundIconButtonStyle(theme, props)} {...filterButtonProps(props)}>\n    {childrenWithDefaultProps<SVGSVGElement, SVGIconProps>({children, defaultProps: {color: COLOR.WHITE}})}\n  </button>\n);\n\nRoundIconButton.defaultProps = {\n  backgroundColor: COLOR.BLUE,\n  size: 32,\n};\n"],"mappings":";;;;;;;;;;AAoBA;AACA;AAGA;AAEA;AACA;AAAqE;AAAA;AAAA;AAI9D,IAAMA,oBAAoF,GAAG,SAAvFA,oBAAoF,CAAIC,KAAK,EAAEC,KAAK;EAAA,uCAC5G,IAAAC,mBAAW,EAACF,KAAK,EAAEC,KAAK,CAAC;IAC5BE,UAAU,EAAE,QAAQ;IACpBC,YAAY,EAAE,KAAK;IACnBC,OAAO,EAAE,MAAM;IACfC,MAAM,YAAKL,KAAK,CAACM,IAAI,OAAI;IACzBC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,SAAS;IACrBC,MAAM,EAAE,QAAQ;IAChBC,QAAQ,YAAKV,KAAK,CAACM,IAAI,OAAI;IAC3BK,OAAO,EAAE,CAAC;IACVC,KAAK,YAAKZ,KAAK,CAACM,IAAI;EAAI;AAAA,CACxB;AAAC;AAEI,IAAMO,eAA+C,GAAG,SAAlDA,eAA+C;EAAA,IAAKC,QAAQ,QAARA,QAAQ;IAAKd,KAAK;EAAA,OACjF;IAAQ,GAAG,EAAE,aAACD,KAAY;MAAA,OAAKD,oBAAoB,CAACC,KAAK,EAAEC,KAAK,CAAC;IAAA;EAAC,GAAK,IAAAe,yBAAiB,EAACf,KAAK,CAAC,GAC5F,IAAAgB,8BAAwB,EAA8B;IAACF,QAAQ,EAARA,QAAQ;IAAEG,YAAY,EAAE;MAACC,KAAK,EAAEC,eAAK,CAACC;IAAK;EAAC,CAAC,CAAC,CAC/F;AAAA,CACV;AAAC;AAEFP,eAAe,CAACI,YAAY,GAAG;EAC7BI,eAAe,EAAEF,eAAK,CAACG,IAAI;EAC3BhB,IAAI,EAAE;AACR,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"Select.d.js"}
+{"version":3,"file":"Select.d.js","names":[],"sources":["Select.d.ts"],"sourcesContent":["/** @jsx jsx */\nimport { CSSObject, jsx } from '@emotion/react';\nimport { ReactElement } from 'react';\nimport { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager';\nexport declare type Option = {\n    value: string | number;\n    label: string;\n    description?: string;\n    isDisabled?: boolean;\n};\ninterface SelectProps<IsMulti extends boolean> extends StateManagerProps<Option, IsMulti> {\n    id: string;\n    disabled?: boolean;\n    dataUieName: string;\n    options: Option[];\n    wrapperCSS?: CSSObject;\n    label?: string;\n    helperText?: string;\n    error?: ReactElement;\n    markInvalid?: boolean;\n    required?: boolean;\n    isMulti?: IsMulti;\n}\nexport declare const Select: <IsMulti extends boolean = false>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, markInvalid, required, ...props }: SelectProps<IsMulti>) => jsx.JSX.Element;\nexport {};\n"],"mappings":""}

package/src/Form/Select.js

@@ -1,53 +1,39 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Select = 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 _react2 = _interopRequireDefault(require("react"));
-
 var _reactSelect = _interopRequireDefault(require("react-select"));
-
 var _SelectStyles = require("./SelectStyles");
-
 var _SelectComponents = require("./SelectComponents");
-
 var _InputLabel = _interopRequireDefault(require("./InputLabel"));
-
 var _excluded = ["id", "label", "error", "helperText", "disabled", "dataUieName", "options", "isMulti", "wrapperCSS", "markInvalid", "required"];
-
-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; }
-
+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; }
 var Select = function Select(_ref) {
   var id = _ref.id,
-      label = _ref.label,
-      error = _ref.error,
-      helperText = _ref.helperText,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      dataUieName = _ref.dataUieName,
-      options = _ref.options,
-      isMulti = _ref.isMulti,
-      _ref$wrapperCSS = _ref.wrapperCSS,
-      wrapperCSS = _ref$wrapperCSS === void 0 ? {} : _ref$wrapperCSS,
-      _ref$markInvalid = _ref.markInvalid,
-      markInvalid = _ref$markInvalid === void 0 ? false : _ref$markInvalid,
-      _ref$required = _ref.required,
-      required = _ref$required === void 0 ? false : _ref$required,
-      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+    label = _ref.label,
+    error = _ref.error,
+    helperText = _ref.helperText,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    dataUieName = _ref.dataUieName,
+    options = _ref.options,
+    isMulti = _ref.isMulti,
+    _ref$wrapperCSS = _ref.wrapperCSS,
+    wrapperCSS = _ref$wrapperCSS === void 0 ? {} : _ref$wrapperCSS,
+    _ref$markInvalid = _ref.markInvalid,
+    markInvalid = _ref$markInvalid === void 0 ? false : _ref$markInvalid,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var theme = (0, _react.useTheme)();
   var hasError = !!error;
   return (0, _react.jsx)("div", {
@@ -95,6 +81,5 @@ var Select = function Select(_ref) {
     }
   }, helperText), error);
 };
-
 exports.Select = Select;
 //# sourceMappingURL=Select.js.map

package/src/Form/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Select.tsx"],"names":["Select","id","label","error","helperText","disabled","dataUieName","options","isMulti","wrapperCSS","markInvalid","required","props","theme","hasError","marginBottom","width","color","general","primaryColor","SelectContainer","DropdownIndicator","Option","Menu","ValueContainer","IndicatorsContainer","fontSize","fontWeight","Input","labelColor","marginTop"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AACA;;AAIA;;AACA;;AASA;;;;;;;;AAuBO,IAAMA,MAAM,GAAG,SAATA,MAAS,OAaM;AAAA,MAZ1BC,EAY0B,QAZ1BA,EAY0B;AAAA,MAX1BC,KAW0B,QAX1BA,KAW0B;AAAA,MAV1BC,KAU0B,QAV1BA,KAU0B;AAAA,MAT1BC,UAS0B,QAT1BA,UAS0B;AAAA,2BAR1BC,QAQ0B;AAAA,MAR1BA,QAQ0B,8BARf,KAQe;AAAA,MAP1BC,WAO0B,QAP1BA,WAO0B;AAAA,MAN1BC,OAM0B,QAN1BA,OAM0B;AAAA,MAL1BC,OAK0B,QAL1BA,OAK0B;AAAA,6BAJ1BC,UAI0B;AAAA,MAJ1BA,UAI0B,gCAJb,EAIa;AAAA,8BAH1BC,WAG0B;AAAA,MAH1BA,WAG0B,iCAHZ,KAGY;AAAA,2BAF1BC,QAE0B;AAAA,MAF1BA,QAE0B,8BAFf,KAEe;AAAA,MADvBC,KACuB;AAC1B,MAAMC,KAAK,GAAG,sBAAd;AACA,MAAMC,QAAQ,GAAG,CAAC,CAACX,KAAnB;AAEA,SACE;AACE,IAAA,GAAG,EAAE,aAACU,KAAD;AAAA;AACHE,QAAAA,YAAY,EAAEL,WAAW,GAAG,KAAH,GAAW,MADjC;AAEHM,QAAAA,KAAK,EAAE,MAFJ;AAGH,gCAAwB;AACtBC,UAAAA,KAAK,EAAEJ,KAAK,CAACK,OAAN,CAAcC;AADC;AAHrB,SAMAV,UANA;AAAA,KADP;AASE,qBAAeH;AATjB,KAWGJ,KAAK,IACJ,gBAAC,sBAAD;AAAY,IAAA,OAAO,EAAED,EAArB;AAAyB,IAAA,WAAW,EAAES,WAAtC;AAAmD,IAAA,UAAU,EAAEC;AAA/D,KACGT,KADH,CAZJ,EAiBE,gBAAC,uBAAD;AACE,IAAA,EAAE,EAAED,EADN;AAEE,IAAA,MAAM,EAAE,gCAAaY,KAAb,EAA6BH,WAA7B,CAFV;AAGE,IAAA,UAAU,EAAE;AACVU,MAAAA,eAAe,EAAfA,iCADU;AAEVC,MAAAA,iBAAiB,EAAjBA,mCAFU;AAGVC,MAAAA,MAAM,EAAE,oCAAahB,WAAb,CAHE;AAIViB,MAAAA,IAAI,EAAE,4BAAKjB,WAAL,CAJI;AAKVkB,MAAAA,cAAc,EAAdA,gCALU;AAMVC,MAAAA,mBAAmB,EAAnBA;AANU,KAHd;AAWE,IAAA,QAAQ,EAAE,CAAC,CAXb;AAYE,IAAA,UAAU,EAAEpB,QAZd;AAaE,IAAA,mBAAmB,EAAE,KAbvB;AAcE,IAAA,YAAY,EAAE,KAdhB;AAeE,IAAA,WAAW,EAAE,KAff;AAgBE,IAAA,iBAAiB,EAAE,CAACG,OAhBtB;AAiBE,IAAA,OAAO,EAAEA,OAjBX;AAkBE,IAAA,OAAO,EAAED;AAlBX,KAmBMK,KAnBN,EAjBF,EAuCG,CAACE,QAAD,IAAaV,UAAb,IACC;AAAG,IAAA,GAAG,EAAE,aAACS,KAAD;AAAA,aAAmB;AAACa,QAAAA,QAAQ,EAAE,MAAX;AAAmBC,QAAAA,UAAU,EAAE,GAA/B;AAAoCV,QAAAA,KAAK,EAAEJ,KAAK,CAACe,KAAN,CAAYC,UAAvD;AAAmEC,QAAAA,SAAS,EAAE;AAA9E,OAAnB;AAAA;AAAR,KACG1B,UADH,CAxCJ,EA6CGD,KA7CH,CADF;AAiDD,CAlEM","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 {useTheme} from '@emotion/react';\nimport React, {ReactElement} from 'react';\nimport ReactSelect from 'react-select';\nimport {StylesConfig} from 'react-select/dist/declarations/src/styles';\nimport {StateManagerProps} from 'react-select/dist/declarations/src/useStateManager';\n\nimport {customStyles} from './SelectStyles';\nimport {\n  CustomOption,\n  DropdownIndicator,\n  IndicatorsContainer,\n  Menu,\n  SelectContainer,\n  ValueContainer,\n} from './SelectComponents';\nimport {Theme} from '../Layout';\nimport InputLabel from './InputLabel';\n\nexport type Option = {\n  value: string | number;\n  label: string;\n  description?: string;\n  isDisabled?: boolean;\n};\n\ninterface SelectProps<IsMulti extends boolean> extends StateManagerProps<Option, IsMulti> {\n  id: string;\n  disabled?: boolean;\n  dataUieName: string;\n  options: Option[];\n  wrapperCSS?: CSSObject;\n  label?: string;\n  helperText?: string;\n  error?: ReactElement;\n  markInvalid?: boolean;\n  required?: boolean;\n  isMulti?: IsMulti;\n}\n\nexport const Select = <IsMulti extends boolean = false>({\n  id,\n  label,\n  error,\n  helperText,\n  disabled = false,\n  dataUieName,\n  options,\n  isMulti,\n  wrapperCSS = {},\n  markInvalid = false,\n  required = false,\n  ...props\n}: SelectProps<IsMulti>) => {\n  const theme = useTheme();\n  const hasError = !!error;\n\n  return (\n    <div\n      css={(theme: Theme) => ({\n        marginBottom: markInvalid ? '2px' : '20px',\n        width: '100%',\n        '&:focus-within label': {\n          color: theme.general.primaryColor,\n        },\n        ...wrapperCSS,\n      })}\n      data-uie-name={dataUieName}\n    >\n      {label && (\n        <InputLabel htmlFor={id} markInvalid={markInvalid} isRequired={required}>\n          {label}\n        </InputLabel>\n      )}\n\n      <ReactSelect\n        id={id}\n        styles={customStyles(theme as Theme, markInvalid) as StylesConfig}\n        components={{\n          SelectContainer,\n          DropdownIndicator,\n          Option: CustomOption(dataUieName),\n          Menu: Menu(dataUieName),\n          ValueContainer,\n          IndicatorsContainer,\n        }}\n        tabIndex={-1}\n        isDisabled={disabled}\n        hideSelectedOptions={false}\n        isSearchable={false}\n        isClearable={false}\n        closeMenuOnSelect={!isMulti}\n        isMulti={isMulti}\n        options={options}\n        {...props}\n      />\n\n      {!hasError && helperText && (\n        <p css={(theme: Theme) => ({fontSize: '12px', fontWeight: 400, color: theme.Input.labelColor, marginTop: 8})}>\n          {helperText}\n        </p>\n      )}\n\n      {error}\n    </div>\n  );\n};\n"],"file":"Select.js"}
+{"version":3,"file":"Select.js","names":["Select","id","label","error","helperText","disabled","dataUieName","options","isMulti","wrapperCSS","markInvalid","required","props","theme","useTheme","hasError","marginBottom","width","color","general","primaryColor","customStyles","SelectContainer","DropdownIndicator","Option","CustomOption","Menu","ValueContainer","IndicatorsContainer","fontSize","fontWeight","Input","labelColor","marginTop"],"sources":["Select.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 {useTheme} from '@emotion/react';\nimport React, {ReactElement} from 'react';\nimport ReactSelect from 'react-select';\nimport {StylesConfig} from 'react-select/dist/declarations/src/styles';\nimport {StateManagerProps} from 'react-select/dist/declarations/src/useStateManager';\n\nimport {customStyles} from './SelectStyles';\nimport {\n  CustomOption,\n  DropdownIndicator,\n  IndicatorsContainer,\n  Menu,\n  SelectContainer,\n  ValueContainer,\n} from './SelectComponents';\nimport {Theme} from '../Layout';\nimport InputLabel from './InputLabel';\n\nexport type Option = {\n  value: string | number;\n  label: string;\n  description?: string;\n  isDisabled?: boolean;\n};\n\ninterface SelectProps<IsMulti extends boolean> extends StateManagerProps<Option, IsMulti> {\n  id: string;\n  disabled?: boolean;\n  dataUieName: string;\n  options: Option[];\n  wrapperCSS?: CSSObject;\n  label?: string;\n  helperText?: string;\n  error?: ReactElement;\n  markInvalid?: boolean;\n  required?: boolean;\n  isMulti?: IsMulti;\n}\n\nexport const Select = <IsMulti extends boolean = false>({\n  id,\n  label,\n  error,\n  helperText,\n  disabled = false,\n  dataUieName,\n  options,\n  isMulti,\n  wrapperCSS = {},\n  markInvalid = false,\n  required = false,\n  ...props\n}: SelectProps<IsMulti>) => {\n  const theme = useTheme();\n  const hasError = !!error;\n\n  return (\n    <div\n      css={(theme: Theme) => ({\n        marginBottom: markInvalid ? '2px' : '20px',\n        width: '100%',\n        '&:focus-within label': {\n          color: theme.general.primaryColor,\n        },\n        ...wrapperCSS,\n      })}\n      data-uie-name={dataUieName}\n    >\n      {label && (\n        <InputLabel htmlFor={id} markInvalid={markInvalid} isRequired={required}>\n          {label}\n        </InputLabel>\n      )}\n\n      <ReactSelect\n        id={id}\n        styles={customStyles(theme as Theme, markInvalid) as StylesConfig}\n        components={{\n          SelectContainer,\n          DropdownIndicator,\n          Option: CustomOption(dataUieName),\n          Menu: Menu(dataUieName),\n          ValueContainer,\n          IndicatorsContainer,\n        }}\n        tabIndex={-1}\n        isDisabled={disabled}\n        hideSelectedOptions={false}\n        isSearchable={false}\n        isClearable={false}\n        closeMenuOnSelect={!isMulti}\n        isMulti={isMulti}\n        options={options}\n        {...props}\n      />\n\n      {!hasError && helperText && (\n        <p css={(theme: Theme) => ({fontSize: '12px', fontWeight: 400, color: theme.Input.labelColor, marginTop: 8})}>\n          {helperText}\n        </p>\n      )}\n\n      {error}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAoBA;AAEA;AACA;AAIA;AACA;AASA;AAAsC;AAAA;AAAA;AAuB/B,IAAMA,MAAM,GAAG,SAATA,MAAM,OAaS;EAAA,IAZ1BC,EAAE,QAAFA,EAAE;IACFC,KAAK,QAALA,KAAK;IACLC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IAAA,qBACVC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,WAAW,QAAXA,WAAW;IACXC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IAAA,uBACPC,UAAU;IAAVA,UAAU,gCAAG,CAAC,CAAC;IAAA,wBACfC,WAAW;IAAXA,WAAW,iCAAG,KAAK;IAAA,qBACnBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IACbC,KAAK;EAER,IAAMC,KAAK,GAAG,IAAAC,eAAQ,GAAE;EACxB,IAAMC,QAAQ,GAAG,CAAC,CAACZ,KAAK;EAExB,OACE;IACE,GAAG,EAAE,aAACU,KAAY;MAAA;QAChBG,YAAY,EAAEN,WAAW,GAAG,KAAK,GAAG,MAAM;QAC1CO,KAAK,EAAE,MAAM;QACb,sBAAsB,EAAE;UACtBC,KAAK,EAAEL,KAAK,CAACM,OAAO,CAACC;QACvB;MAAC,GACEX,UAAU;IAAA,CACZ;IACH,iBAAeH;EAAY,GAE1BJ,KAAK,IACJ,gBAAC,sBAAU;IAAC,OAAO,EAAED,EAAG;IAAC,WAAW,EAAES,WAAY;IAAC,UAAU,EAAEC;EAAS,GACrET,KAAK,CAET,EAED,gBAAC,uBAAW;IACV,EAAE,EAAED,EAAG;IACP,MAAM,EAAE,IAAAoB,0BAAY,EAACR,KAAK,EAAWH,WAAW,CAAkB;IAClE,UAAU,EAAE;MACVY,eAAe,EAAfA,iCAAe;MACfC,iBAAiB,EAAjBA,mCAAiB;MACjBC,MAAM,EAAE,IAAAC,8BAAY,EAACnB,WAAW,CAAC;MACjCoB,IAAI,EAAE,IAAAA,sBAAI,EAACpB,WAAW,CAAC;MACvBqB,cAAc,EAAdA,gCAAc;MACdC,mBAAmB,EAAnBA;IACF,CAAE;IACF,QAAQ,EAAE,CAAC,CAAE;IACb,UAAU,EAAEvB,QAAS;IACrB,mBAAmB,EAAE,KAAM;IAC3B,YAAY,EAAE,KAAM;IACpB,WAAW,EAAE,KAAM;IACnB,iBAAiB,EAAE,CAACG,OAAQ;IAC5B,OAAO,EAAEA,OAAQ;IACjB,OAAO,EAAED;EAAQ,GACbK,KAAK,EACT,EAED,CAACG,QAAQ,IAAIX,UAAU,IACtB;IAAG,GAAG,EAAE,aAACS,KAAY;MAAA,OAAM;QAACgB,QAAQ,EAAE,MAAM;QAAEC,UAAU,EAAE,GAAG;QAAEZ,KAAK,EAAEL,KAAK,CAACkB,KAAK,CAACC,UAAU;QAAEC,SAAS,EAAE;MAAC,CAAC;IAAA;EAAE,GAC1G7B,UAAU,CAEd,EAEAD,KAAK,CACF;AAEV,CAAC;AAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"SelectComponents.d.js"}
+{"version":3,"file":"SelectComponents.d.js","names":[],"sources":["SelectComponents.d.ts"],"sourcesContent":["/** @jsx jsx */\nimport { jsx } from '@emotion/react';\nimport { OptionProps, ValueContainerProps } from 'react-select';\nimport { MenuProps } from 'react-select/dist/declarations/src/components/Menu';\nimport { IndicatorsContainerProps } from 'react-select/dist/declarations/src/components/containers';\nimport { Option } from './Select';\nexport declare const SelectContainer: (props: any) => jsx.JSX.Element;\nexport declare const DropdownIndicator: (props: any) => jsx.JSX.Element;\nexport declare const CustomOption: (dataUieName: string) => (props: OptionProps<Option>) => jsx.JSX.Element;\nexport declare const Menu: (dataUieName: string) => (props: MenuProps) => jsx.JSX.Element;\nexport declare const renderValue: (value: any) => any;\nexport declare const ValueContainer: ({ children, ...restProps }: ValueContainerProps<Option>) => jsx.JSX.Element;\nexport declare const IndicatorsContainer: ({ children, ...restProps }: IndicatorsContainerProps<Option>) => jsx.JSX.Element;\n"],"mappings":""}