@wireapp/react-ui-kit 8.13.9 → 8.14.1

package/src/Form/InputBlock.js

@@ -1,26 +1,4 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.InputBlock = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@emotion/react");
-
-var _Identity = require("../Identity");
-
-var _Input = require("./Input");
-
-var _InputSubmitCombo = require("./InputSubmitCombo");
-
 /*
  * Wire
  * Copyright (C) 2018 Wire Swiss GmbH
@@ -39,29 +17,25 @@ var _InputSubmitCombo = require("./InputSubmitCombo");
  * along with this program. If not, see http://www.gnu.org/licenses/.
  *
  */
-
-/** @jsx jsx */
-var inputBlockStyle = function inputBlockStyle(props) {
-  var _ref;
-
-  return _ref = {
-    backgroundColor: _Identity.COLOR.GRAY_LIGHTEN_88,
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputBlock = void 0;
+const react_1 = require("@emotion/react");
+const Identity_1 = require("../Identity");
+const Input_1 = require("./Input");
+const InputSubmitCombo_1 = require("./InputSubmitCombo");
+const inputBlockStyle = props => ({
+    backgroundColor: Identity_1.COLOR.GRAY_LIGHTEN_88,
     borderRadius: '4px',
-    boxShadow: "inset 16px 16px 0 ".concat(_Identity.COLOR.WHITE, ", inset -16px -16px 0 ").concat(_Identity.COLOR.WHITE),
-    marginBottom: '16px'
-  }, (0, _defineProperty2["default"])(_ref, ".".concat(_Input.INPUT_CLASSNAME, ", .").concat(_InputSubmitCombo.INPUT_SUBMIT_COMBO_CLASSNAME), {
-    marginBottom: '1px !important',
-    marginTop: '0 !important'
-  }), (0, _defineProperty2["default"])(_ref, ".".concat(_Input.INPUT_GROUP), {
-    marginBottom: 0
-  }), _ref;
-};
-
-var InputBlock = function InputBlock(props) {
-  return (0, _react2.jsx)("div", (0, _extends2["default"])({
-    css: inputBlockStyle(props)
-  }, props));
-};
-
+    boxShadow: `inset 16px 16px 0 ${Identity_1.COLOR.WHITE}, inset -16px -16px 0 ${Identity_1.COLOR.WHITE}`,
+    marginBottom: '16px',
+    [`.${Input_1.INPUT_CLASSNAME}, .${InputSubmitCombo_1.INPUT_SUBMIT_COMBO_CLASSNAME}`]: {
+        marginBottom: '1px !important',
+        marginTop: '0 !important',
+    },
+    [`.${Input_1.INPUT_GROUP}`]: {
+        marginBottom: 0,
+    },
+});
+const InputBlock = (props) => (0, react_1.jsx)("div", Object.assign({ css: inputBlockStyle(props) }, props));
 exports.InputBlock = InputBlock;
 //# sourceMappingURL=InputBlock.js.map

package/src/Form/InputBlock.js.map

@@ -1 +1 @@
-{"version":3,"sources":["InputBlock.tsx"],"names":["inputBlockStyle","props","backgroundColor","COLOR","GRAY_LIGHTEN_88","borderRadius","boxShadow","WHITE","marginBottom","INPUT_CLASSNAME","INPUT_SUBMIT_COMBO_CLASSNAME","marginTop","INPUT_GROUP","InputBlock"],"mappings":";;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;AACA;;AAzBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAUA,IAAMA,eAAsD,GAAG,SAAzDA,eAAyD,CAAAC,KAAK;AAAA;;AAAA;AAClEC,IAAAA,eAAe,EAAEC,gBAAMC,eAD2C;AAElEC,IAAAA,YAAY,EAAE,KAFoD;AAGlEC,IAAAA,SAAS,8BAAuBH,gBAAMI,KAA7B,mCAA2DJ,gBAAMI,KAAjE,CAHyD;AAIlEC,IAAAA,YAAY,EAAE;AAJoD,uDAK7DC,sBAL6D,gBAKxCC,8CALwC,GAKP;AACzDF,IAAAA,YAAY,EAAE,gBAD2C;AAEzDG,IAAAA,SAAS,EAAE;AAF8C,GALO,qDAS7DC,kBAT6D,GAS7C;AACnBJ,IAAAA,YAAY,EAAE;AADK,GAT6C;AAAA,CAApE;;AAcO,IAAMK,UAAU,GAAG,SAAbA,UAAa,CAACZ,KAAD;AAAA,SAA4B;AAAK,IAAA,GAAG,EAAED,eAAe,CAACC,KAAD;AAAzB,KAAsCA,KAAtC,EAA5B;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 React from 'react';\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {COLOR} from '../Identity';\nimport {INPUT_CLASSNAME, INPUT_GROUP} from './Input';\nimport {INPUT_SUBMIT_COMBO_CLASSNAME} from './InputSubmitCombo';\n\nexport type InputBlockProps<T = HTMLDivElement> = React.HTMLProps<T>;\n\nconst inputBlockStyle: (props: InputBlockProps) => CSSObject = props => ({\n  backgroundColor: COLOR.GRAY_LIGHTEN_88,\n  borderRadius: '4px',\n  boxShadow: `inset 16px 16px 0 ${COLOR.WHITE}, inset -16px -16px 0 ${COLOR.WHITE}`,\n  marginBottom: '16px',\n  [`.${INPUT_CLASSNAME}, .${INPUT_SUBMIT_COMBO_CLASSNAME}`]: {\n    marginBottom: '1px !important',\n    marginTop: '0 !important',\n  },\n  [`.${INPUT_GROUP}`]: {\n    marginBottom: 0,\n  },\n});\n\nexport const InputBlock = (props: InputBlockProps) => <div css={inputBlockStyle(props)} {...props} />;\n"],"file":"InputBlock.js"}
+{"version":3,"file":"InputBlock.js","sourceRoot":"","sources":["InputBlock.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAIH,0CAA8C;AAE9C,0CAAkC;AAClC,mCAAqD;AACrD,yDAAgE;AAIhE,MAAM,eAAe,GAA0C,KAAK,CAAC,EAAE,CAAC,CAAC;IACvE,eAAe,EAAE,gBAAK,CAAC,eAAe;IACtC,YAAY,EAAE,KAAK;IACnB,SAAS,EAAE,qBAAqB,gBAAK,CAAC,KAAK,yBAAyB,gBAAK,CAAC,KAAK,EAAE;IACjF,YAAY,EAAE,MAAM;IACpB,CAAC,IAAI,uBAAe,MAAM,+CAA4B,EAAE,CAAC,EAAE;QACzD,YAAY,EAAE,gBAAgB;QAC9B,SAAS,EAAE,cAAc;KAC1B;IACD,CAAC,IAAI,mBAAW,EAAE,CAAC,EAAE;QACnB,YAAY,EAAE,CAAC;KAChB;CACF,CAAC,CAAC;AAEI,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE,CAAC,wCAAK,GAAG,EAAE,eAAe,CAAC,KAAK,CAAC,IAAM,KAAK,EAAI,CAAC;AAAzF,QAAA,UAAU,cAA+E"}

package/src/Form/InputLabel.js

@@ -1,49 +1,47 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = require("@emotion/react");
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _Identity = require("../Identity");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _excluded = ["htmlFor", "markInvalid", "isRequired", "children"];
-
-var InputLabel = function InputLabel(_ref) {
-  var htmlFor = _ref.htmlFor,
-      markInvalid = _ref.markInvalid,
-      isRequired = _ref.isRequired,
-      children = _ref.children,
-      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return (0, _react.jsx)("label", (0, _extends2["default"])({
-    htmlFor: htmlFor,
-    css: function css(theme) {
-      return {
-        fontSize: '14px',
-        fontWeight: 400,
-        lineHeight: '16px',
-        color: markInvalid ? _Identity.COLOR_V2.RED_LIGHT_500 : theme.Input.labelColor
-      };
-    }
-  }, props), children, isRequired && (0, _react.jsx)("span", {
-    css: /*#__PURE__*/(0, _react.css)({
-      fontSize: '16px',
-      marginLeft: '4px',
-      color: _Identity.COLOR_V2.RED_LIGHT_500
-    }, process.env.NODE_ENV === "production" ? "" : ";label:InputLabel;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklucHV0TGFiZWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZDeUIiLCJmaWxlIjoiSW5wdXRMYWJlbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDIyIFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge2pzeH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHtDT0xPUl9WMn0gZnJvbSAnLi4vSWRlbnRpdHknO1xuaW1wb3J0IHR5cGUge1RoZW1lfSBmcm9tICcuLi9MYXlvdXQnO1xuaW1wb3J0IFJlYWN0LCB7RkMsIFJlYWN0Tm9kZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgaW50ZXJmYWNlIElucHV0TGFiZWxQcm9wcyB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGUgfCBzdHJpbmc7XG4gIGh0bWxGb3I/OiBzdHJpbmc7XG4gIG1hcmtJbnZhbGlkPzogYm9vbGVhbjtcbiAgaXNSZXF1aXJlZD86IGJvb2xlYW47XG59XG5cbmNvbnN0IElucHV0TGFiZWw6IEZDPElucHV0TGFiZWxQcm9wcz4gPSAoe2h0bWxGb3IsIG1hcmtJbnZhbGlkLCBpc1JlcXVpcmVkLCBjaGlsZHJlbiwgLi4ucHJvcHN9KSA9PiAoXG4gIDxsYWJlbFxuICAgIGh0bWxGb3I9e2h0bWxGb3J9XG4gICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiAoe1xuICAgICAgZm9udFNpemU6ICcxNHB4JyxcbiAgICAgIGZvbnRXZWlnaHQ6IDQwMCxcbiAgICAgIGxpbmVIZWlnaHQ6ICcxNnB4JyxcbiAgICAgIGNvbG9yOiBtYXJrSW52YWxpZCA/IENPTE9SX1YyLlJFRF9MSUdIVF81MDAgOiB0aGVtZS5JbnB1dC5sYWJlbENvbG9yLFxuICAgIH0pfVxuICAgIHsuLi5wcm9wc31cbiAgPlxuICAgIHtjaGlsZHJlbn1cblxuICAgIHtpc1JlcXVpcmVkICYmIDxzcGFuIGNzcz17e2ZvbnRTaXplOiAnMTZweCcsIG1hcmdpbkxlZnQ6ICc0cHgnLCBjb2xvcjogQ09MT1JfVjIuUkVEX0xJR0hUXzUwMH19Pio8L3NwYW4+fVxuICA8L2xhYmVsPlxuKTtcblxuZXhwb3J0IGRlZmF1bHQgSW5wdXRMYWJlbDtcbiJdfQ== */")
-  }, "*"));
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
-
-var _default = InputLabel;
-exports["default"] = _default;
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const Identity_1 = require("../Identity");
+const InputLabel = (_a) => {
+    var { htmlFor, markInvalid, isRequired, children } = _a, props = __rest(_a, ["htmlFor", "markInvalid", "isRequired", "children"]);
+    return ((0, react_1.jsx)("label", Object.assign({ htmlFor: htmlFor, css: (theme) => ({
+            fontSize: '14px',
+            fontWeight: 400,
+            lineHeight: '16px',
+            color: markInvalid ? Identity_1.COLOR_V2.RED_LIGHT_500 : theme.Input.labelColor,
+        }) }, props),
+        children,
+        isRequired && (0, react_1.jsx)("span", { css: { fontSize: '16px', marginLeft: '4px', color: Identity_1.COLOR_V2.RED_LIGHT_500 } }, "*")));
+};
+exports.default = InputLabel;
 //# sourceMappingURL=InputLabel.js.map

package/src/Form/InputLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["InputLabel.tsx"],"names":["InputLabel","htmlFor","markInvalid","isRequired","children","props","theme","fontSize","fontWeight","lineHeight","color","COLOR_V2","RED_LIGHT_500","Input","labelColor","marginLeft"],"mappings":";;;;;;;;;;;AAoBA;;;;AACA;;AAEA;;;;AASA,IAAMA,UAA+B,GAAG,SAAlCA,UAAkC;AAAA,MAAEC,OAAF,QAAEA,OAAF;AAAA,MAAWC,WAAX,QAAWA,WAAX;AAAA,MAAwBC,UAAxB,QAAwBA,UAAxB;AAAA,MAAoCC,QAApC,QAAoCA,QAApC;AAAA,MAAiDC,KAAjD;AAAA,SACtC;AACE,IAAA,OAAO,EAAEJ,OADX;AAEE,IAAA,GAAG,EAAE,aAACK,KAAD;AAAA,aAAmB;AACtBC,QAAAA,QAAQ,EAAE,MADY;AAEtBC,QAAAA,UAAU,EAAE,GAFU;AAGtBC,QAAAA,UAAU,EAAE,MAHU;AAItBC,QAAAA,KAAK,EAAER,WAAW,GAAGS,mBAASC,aAAZ,GAA4BN,KAAK,CAACO,KAAN,CAAYC;AAJpC,OAAnB;AAAA;AAFP,KAQMT,KARN,GAUGD,QAVH,EAYGD,UAAU,IAAI;AAAM,IAAA,GAAG,+BAAE;AAACI,MAAAA,QAAQ,EAAE,MAAX;AAAmBQ,MAAAA,UAAU,EAAE,KAA/B;AAAsCL,MAAAA,KAAK,EAAEC,mBAASC;AAAtD,KAAF;AAAT,SAZjB,CADsC;AAAA,CAAxC;;eAiBeZ,U","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 {jsx} from '@emotion/react';\nimport {COLOR_V2} from '../Identity';\nimport type {Theme} from '../Layout';\nimport React, {FC, ReactNode} from 'react';\n\nexport interface InputLabelProps {\n  children: ReactNode | string;\n  htmlFor?: string;\n  markInvalid?: boolean;\n  isRequired?: boolean;\n}\n\nconst InputLabel: FC<InputLabelProps> = ({htmlFor, markInvalid, isRequired, children, ...props}) => (\n  <label\n    htmlFor={htmlFor}\n    css={(theme: Theme) => ({\n      fontSize: '14px',\n      fontWeight: 400,\n      lineHeight: '16px',\n      color: markInvalid ? COLOR_V2.RED_LIGHT_500 : theme.Input.labelColor,\n    })}\n    {...props}\n  >\n    {children}\n\n    {isRequired && <span css={{fontSize: '16px', marginLeft: '4px', color: COLOR_V2.RED_LIGHT_500}}>*</span>}\n  </label>\n);\n\nexport default InputLabel;\n"],"file":"InputLabel.js"}
+{"version":3,"file":"InputLabel.js","sourceRoot":"","sources":["InputLabel.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAAmC;AACnC,0CAAqC;AAWrC,MAAM,UAAU,GAAwB,CAAC,EAAsD,EAAE,EAAE;QAA1D,EAAC,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,OAAW,EAAN,KAAK,cAArD,oDAAsD,CAAD;IAAM,OAAA,CAClG,0CACE,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,CAAC;YACtB,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,GAAG;YACf,UAAU,EAAE,MAAM;YAClB,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,mBAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU;SACrE,CAAC,IACE,KAAK;QAER,QAAQ;QAER,UAAU,IAAI,2BAAM,GAAG,EAAE,EAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,mBAAQ,CAAC,aAAa,EAAC,QAAU,CAClG,CACT,CAAA;CAAA,CAAC;AAEF,kBAAe,UAAU,CAAC"}

package/src/Form/InputSubmitCombo.js

@@ -1,58 +1,54 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.InputSubmitCombo = exports.INPUT_SUBMIT_COMBO_CLASSNAME = 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 _Input = require("./Input");
-
-var _Identity = require("../Identity");
-
-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; }
-
-var INPUT_SUBMIT_COMBO_CLASSNAME = 'inputSubmitCombo';
-exports.INPUT_SUBMIT_COMBO_CLASSNAME = INPUT_SUBMIT_COMBO_CLASSNAME;
-
-var InputSubmitCombo = function InputSubmitCombo(_ref) {
-  var children = _ref.children,
-      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return (0, _react.jsx)("div", (0, _extends2["default"])({
-    className: INPUT_SUBMIT_COMBO_CLASSNAME,
-    css: function css(theme) {
-      var _objectSpread2;
-
-      return _objectSpread(_objectSpread({}, (0, _Input.inputStyle)(theme, props)), {}, (_objectSpread2 = {
-        '&:focus-within': {
-          boxShadow: "0 0 0 1px ".concat(_Identity.COLOR_V2.BLUE)
+/*
+ * Wire
+ * Copyright (C) 2018 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
         }
-      }, (0, _defineProperty2["default"])(_objectSpread2, ".".concat(_Input.INPUT_GROUP), {
-        flexGrow: 1
-      }), (0, _defineProperty2["default"])(_objectSpread2, ".".concat(_Input.INPUT_CLASSNAME), {
-        '&:focus, &:invalid:not(:focus)': {
-          boxShadow: 'none'
-        },
-        boxShadow: 'none',
-        margin: '0 8px 0 0',
-        padding: '0 0 0 16px'
-      }), (0, _defineProperty2["default"])(_objectSpread2, "alignItems", 'center'), (0, _defineProperty2["default"])(_objectSpread2, "display", 'flex'), (0, _defineProperty2["default"])(_objectSpread2, "height", '49px'), (0, _defineProperty2["default"])(_objectSpread2, "justifyContent", 'space-between'), (0, _defineProperty2["default"])(_objectSpread2, "marginBottom", '4px'), (0, _defineProperty2["default"])(_objectSpread2, "paddingLeft", 0), _objectSpread2));
-    }
-  }, props), children);
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputSubmitCombo = exports.INPUT_SUBMIT_COMBO_CLASSNAME = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const Input_1 = require("./Input");
+const Identity_1 = require("../Identity");
+exports.INPUT_SUBMIT_COMBO_CLASSNAME = 'inputSubmitCombo';
+const InputSubmitCombo = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return ((0, react_1.jsx)("div", Object.assign({ className: exports.INPUT_SUBMIT_COMBO_CLASSNAME, css: (theme) => (Object.assign(Object.assign({}, (0, Input_1.inputStyle)(theme, props)), { '&:focus-within': {
+                boxShadow: `0 0 0 1px ${Identity_1.COLOR_V2.BLUE}`,
+            }, [`.${Input_1.INPUT_GROUP}`]: {
+                flexGrow: 1,
+            }, [`.${Input_1.INPUT_CLASSNAME}`]: {
+                '&:focus, &:invalid:not(:focus)': {
+                    boxShadow: 'none',
+                },
+                boxShadow: 'none',
+                margin: '0 8px 0 0',
+                padding: '0 0 0 16px',
+            }, alignItems: 'center', display: 'flex', height: '49px', justifyContent: 'space-between', marginBottom: '4px', paddingLeft: 0 })) }, props), children));
 };
-
 exports.InputSubmitCombo = InputSubmitCombo;
 //# sourceMappingURL=InputSubmitCombo.js.map

package/src/Form/InputSubmitCombo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["InputSubmitCombo.tsx"],"names":["INPUT_SUBMIT_COMBO_CLASSNAME","InputSubmitCombo","children","props","theme","boxShadow","COLOR_V2","BLUE","INPUT_GROUP","flexGrow","INPUT_CLASSNAME","margin","padding"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AACA;;;;;;;;AAKO,IAAMA,4BAA4B,GAAG,kBAArC;;;AAEA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,MAAEC,QAAF,QAAEA,QAAF;AAAA,MAAeC,KAAf;AAAA,SAC9B;AACE,IAAA,SAAS,EAAEH,4BADb;AAEE,IAAA,GAAG,EAAE,aAACI,KAAD;AAAA;;AAAA,6CACA,uBAAWA,KAAX,EAAkBD,KAAlB,CADA;AAEH,0BAAkB;AAChBE,UAAAA,SAAS,sBAAeC,mBAASC,IAAxB;AADO;AAFf,qEAKEC,kBALF,GAKkB;AACnBC,QAAAA,QAAQ,EAAE;AADS,OALlB,+DAQEC,sBARF,GAQsB;AACvB,0CAAkC;AAChCL,UAAAA,SAAS,EAAE;AADqB,SADX;AAIvBA,QAAAA,SAAS,EAAE,MAJY;AAKvBM,QAAAA,MAAM,EAAE,WALe;AAMvBC,QAAAA,OAAO,EAAE;AANc,OARtB,kEAgBS,QAhBT,+DAiBM,MAjBN,8DAkBK,MAlBL,sEAmBa,eAnBb,oEAoBW,KApBX,mEAqBU,CArBV;AAAA;AAFP,KAyBMT,KAzBN,GA2BGD,QA3BH,CAD8B;AAAA,CAAzB","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';\n\nimport {INPUT_CLASSNAME, INPUT_GROUP, InputProps, inputStyle} from './Input';\nimport {COLOR_V2} from '../Identity';\nimport {Theme} from '../Layout';\n\nexport type InputSubmitComboProps<T = HTMLDivElement> = InputProps<T>;\n\nexport const INPUT_SUBMIT_COMBO_CLASSNAME = 'inputSubmitCombo';\n\nexport const InputSubmitCombo = ({children, ...props}: InputSubmitComboProps) => (\n  <div\n    className={INPUT_SUBMIT_COMBO_CLASSNAME}\n    css={(theme: Theme) => ({\n      ...inputStyle(theme, props),\n      '&:focus-within': {\n        boxShadow: `0 0 0 1px ${COLOR_V2.BLUE}`,\n      },\n      [`.${INPUT_GROUP}`]: {\n        flexGrow: 1,\n      },\n      [`.${INPUT_CLASSNAME}`]: {\n        '&:focus, &:invalid:not(:focus)': {\n          boxShadow: 'none',\n        },\n        boxShadow: 'none',\n        margin: '0 8px 0 0',\n        padding: '0 0 0 16px',\n      },\n      alignItems: 'center',\n      display: 'flex',\n      height: '49px', // needs a bit more space to not overlap with the `boxShadow` from `:focus`\n      justifyContent: 'space-between',\n      marginBottom: '4px',\n      paddingLeft: 0,\n    })}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"file":"InputSubmitCombo.js"}
+{"version":3,"file":"InputSubmitCombo.js","sourceRoot":"","sources":["InputSubmitCombo.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAAmC;AAEnC,mCAA6E;AAC7E,0CAAqC;AAKxB,QAAA,4BAA4B,GAAG,kBAAkB,CAAC;AAExD,MAAM,gBAAgB,GAAG,CAAC,EAA2C,EAAE,EAAE;QAA/C,EAAC,QAAQ,OAAkC,EAA7B,KAAK,cAAnB,YAAoB,CAAD;IAA6B,OAAA,CAC/E,wCACE,SAAS,EAAE,oCAA4B,EACvC,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,iCAClB,IAAA,kBAAU,EAAC,KAAK,EAAE,KAAK,CAAC,KAC3B,gBAAgB,EAAE;gBAChB,SAAS,EAAE,aAAa,mBAAQ,CAAC,IAAI,EAAE;aACxC,EACD,CAAC,IAAI,mBAAW,EAAE,CAAC,EAAE;gBACnB,QAAQ,EAAE,CAAC;aACZ,EACD,CAAC,IAAI,uBAAe,EAAE,CAAC,EAAE;gBACvB,gCAAgC,EAAE;oBAChC,SAAS,EAAE,MAAM;iBAClB;gBACD,SAAS,EAAE,MAAM;gBACjB,MAAM,EAAE,WAAW;gBACnB,OAAO,EAAE,YAAY;aACtB,EACD,UAAU,EAAE,QAAQ,EACpB,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,KAAK,EACnB,WAAW,EAAE,CAAC,IACd,IACE,KAAK,GAER,QAAQ,CACL,CACP,CAAA;CAAA,CAAC;AA9BW,QAAA,gBAAgB,oBA8B3B"}

package/src/Form/RangeInput.js

@@ -1,75 +1,51 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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))));
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const InputLabel_1 = require("./InputLabel");
+const RangeInput_styles_1 = require("./RangeInput.styles");
+exports.RangeInput = (0, react_2.forwardRef)((_a) => {
+    var { ref, id = Math.random().toString(), label, minValueLabel, maxValueLabel, min = '0', max = '100', value = '0', onChange, wrapperCSS } = _a, inputProps = __rest(_a, ["ref", "id", "label", "minValueLabel", "maxValueLabel", "min", "max", "value", "onChange", "wrapperCSS"]);
+    const minNum = Number(min);
+    const maxNum = Number(max);
+    const valueNum = Number(value);
+    const backgroundSize = `${((valueNum - minNum) * 100) / (maxNum - minNum)}% 100%`;
+    return ((0, react_1.jsx)("div", { css: wrapperCSS },
+        label && (0, react_1.jsx)(InputLabel_1.default, { htmlFor: id }, label),
+        (0, react_1.jsx)("div", { css: RangeInput_styles_1.rangeInputWrapperStyles },
+            minValueLabel && (0, react_1.jsx)("span", { css: (0, RangeInput_styles_1.getValueLabelStyles)(RangeInput_styles_1.ValueLabelPosition.LEFT) }, minValueLabel),
+            maxValueLabel && (0, react_1.jsx)("span", { css: (0, RangeInput_styles_1.getValueLabelStyles)(RangeInput_styles_1.ValueLabelPosition.RIGHT) }, maxValueLabel),
+            (0, react_1.jsx)("input", Object.assign({ ref: ref, css: (theme) => (0, RangeInput_styles_1.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

@@ -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,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"}
+{"version":3,"file":"RangeInput.js","sourceRoot":"","sources":["RangeInput.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAA8C;AAC9C,iCAA4C;AAG5C,6CAAsC;AACtC,2DAK6B;AAShB,QAAA,UAAU,GAAwB,IAAA,kBAAU,EACvD,CAAC,EAYA,EAAE,EAAE;QAZJ,EACC,GAAG,EACH,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,EAC7B,KAAK,EACL,aAAa,EACb,aAAa,EACb,GAAG,GAAG,GAAG,EACT,GAAG,GAAG,KAAK,EACX,KAAK,GAAG,GAAG,EACX,QAAQ,EACR,UAAU,OAEX,EADI,UAAU,cAXd,yGAYA,CADc;IAEb,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC3B,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC3B,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE/B,MAAM,cAAc,GAAG,GAAG,CAAC,CAAC,QAAQ,GAAG,MAAM,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,QAAiB,CAAC;IAE3F,OAAO,CACL,0BAAK,GAAG,EAAE,UAAU;QACjB,KAAK,IAAI,iBAAC,oBAAU,IAAC,OAAO,EAAE,EAAE,IAAG,KAAK,CAAc;QACvD,0BAAK,GAAG,EAAE,2CAAuB;YAC9B,aAAa,IAAI,2BAAM,GAAG,EAAE,IAAA,uCAAmB,EAAC,sCAAkB,CAAC,IAAI,CAAC,IAAG,aAAa,CAAQ;YAChG,aAAa,IAAI,2BAAM,GAAG,EAAE,IAAA,uCAAmB,EAAC,sCAAkB,CAAC,KAAK,CAAC,IAAG,aAAa,CAAQ;YAClG,0CACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,IAAA,+CAA2B,EAAC,KAAK,EAAE,cAAc,CAAC,EACzE,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,EAAE,EACR,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,OAAO,IACR,UAAU,EACd,CACE,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/src/Form/RangeInput.styles.js

@@ -1,76 +1,60 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+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'
+const Identity_1 = require("../Identity");
+const util_1 = require("../util");
+exports.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, {
+const thumbSelectors = ['&::-webkit-slider-thumb', '&::-moz-range-thumb', '&::-ms-thumb'];
+const sliderSelectors = ['&::-webkit-slider-runnable-track', '&::-moz-range-track', '&::-ms-track'];
+const getImageCropZoomInputStyles = (theme, backgroundSize) => (Object.assign(Object.assign({ display: 'block', '-webkit-appearance': 'none', width: '100%', height: '8px', background: Identity_1.COLOR_V2.GRAY_60, borderRadius: '4px', backgroundImage: `linear-gradient(${theme.general.primaryColor}, ${theme.general.primaryColor})`, backgroundSize: backgroundSize || '0% 100%', backgroundRepeat: 'no-repeat' }, (0, util_1.manySelectors)(thumbSelectors, {
     '-webkit-appearance': 'none',
     height: '18px',
     width: '18px',
     borderRadius: '50%',
-    background: _Identity.COLOR_V2.GRAY_80,
+    background: Identity_1.COLOR_V2.GRAY_80,
     cursor: 'pointer',
     border: 'none',
-    boxShadow: 'none'
-  })), (0, _util.manySelectors)(sliderSelectors, {
+    boxShadow: 'none',
+})), (0, util_1.manySelectors)(sliderSelectors, {
     '-webkit-appearance': 'none',
     boxShadow: 'none',
     border: 'none',
-    background: 'transparent'
-  }));
-};
-
+    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"])({
+    ValueLabelPosition["LEFT"] = "left";
+    ValueLabelPosition["RIGHT"] = "right";
+})(ValueLabelPosition = exports.ValueLabelPosition || (exports.ValueLabelPosition = {}));
+const getValueLabelStyles = (position) => ({
     pointerEvents: 'none',
     bottom: '100%',
     fontSize: '16px',
     fontWeight: 300,
-    position: 'absolute'
-  }, position, '4px');
-};
-
+    position: 'absolute',
+    [position]: '4px',
+});
 exports.getValueLabelStyles = getValueLabelStyles;
 //# sourceMappingURL=RangeInput.styles.js.map