@wireapp/react-ui-kit 8.17.3 → 8.17.4

package/src/Form/DropFileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropFileInput.js","names":["visuallyHiddenStyles","clip","clipPath","height","overflow","position","whiteSpace","width","dropFileWrapperStyle","maxWidth","dropFileZoneWrapperStyle","theme","isDraggedOver","padding","border","general","primaryColor","borderBottomWidth","borderRadius","textAlign","backgroundColor","COLOR","WHITE","fontWeight","fontSize","lineHeight","color","GRAY","dropFileZoneLabelStyle","cursor","outline","textDecoration","dropFileZoneHeadingStyle","display","dropFileZonDescriptionStyle","marginTop","DropFileInput","forwardRef","ref","onFilesUploaded","onInvalidFilesDropError","dropFileZoneWrapperCSS","labelText","headingText","description","accept","multiple","inputProps","useState","setIsDraggedOver","resetDraggedOver","handleDragOver","event","preventDefault","stopPropagation","dataTransfer","dropEffect","items","length","handleDrop","files","filesArr","Array","from","areFilesValid","every","file","split","map","v","trim","includes","type","handleChange","target"],"sources":["DropFileInput.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, {useState, FC, forwardRef, DragEvent} from 'react';\n\nimport {COLOR} from '../Identity';\nimport {Theme} from '../Layout';\nimport {TextProps} from '../Text';\nimport {UploadIcon} from '../Icon';\nimport {FlexBox} from '../Layout';\n\nexport interface DropFileInputProps<T = HTMLInputElement> extends TextProps<T> {\n  onFilesUploaded: (files: File[]) => void;\n  onInvalidFilesDropError: () => void;\n  labelText: string;\n  headingText: string;\n  description?: string;\n  dropFileZoneWrapperCSS?: CSSObject;\n}\n\nconst visuallyHiddenStyles: CSSObject = {\n  clip: 'rect(0 0 0 0)',\n  clipPath: 'inset(50%)',\n  height: '1px',\n  overflow: 'hidden',\n  position: 'absolute',\n  whiteSpace: 'nowrap',\n  width: '1px',\n};\n\nexport const dropFileWrapperStyle: CSSObject = {\n  maxWidth: '330px',\n};\n\nexport const dropFileZoneWrapperStyle: <T>(theme: Theme, isDraggedOver: boolean) => CSSObject = (\n  theme,\n  isDraggedOver,\n) => ({\n  width: '100%',\n  padding: '28px 12px',\n  border: `1px dashed ${theme.general.primaryColor}`,\n  borderBottomWidth: '2px',\n  borderRadius: '6px',\n  textAlign: 'center',\n  backgroundColor: isDraggedOver ? theme.general.backgroundColor : COLOR.WHITE,\n  fontWeight: 400,\n  fontSize: '12px',\n  lineHeight: '13px',\n  color: COLOR.GRAY,\n});\n\nexport const dropFileZoneLabelStyle: <T>(theme: Theme) => CSSObject = theme => ({\n  color: theme.general.primaryColor,\n  cursor: 'pointer',\n  ':focus-within': {\n    outline: `1px solid ${theme.general.primaryColor}`,\n  },\n  ':hover': {\n    textDecoration: 'underline',\n  },\n});\n\nexport const dropFileZoneHeadingStyle: CSSObject = {\n  display: 'block',\n  whiteSpace: 'pre-line',\n};\n\nexport const dropFileZonDescriptionStyle: CSSObject = {\n  marginTop: '12px',\n  fontWeight: 400,\n  fontSize: '10px',\n  lineHeight: '13px',\n  color: COLOR.GRAY,\n  whiteSpace: 'pre-line',\n};\n\nexport const DropFileInput: FC<DropFileInputProps<HTMLInputElement>> = forwardRef<\n  HTMLInputElement,\n  DropFileInputProps<HTMLInputElement>\n>(\n  (\n    {\n      onFilesUploaded,\n      onInvalidFilesDropError,\n      dropFileZoneWrapperCSS,\n      labelText,\n      headingText,\n      description,\n      accept,\n      multiple,\n      ...inputProps\n    },\n    ref,\n  ) => {\n    const [isDraggedOver, setIsDraggedOver] = useState(false);\n\n    const resetDraggedOver = () => setIsDraggedOver(false);\n\n    const handleDragOver = (event: DragEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n      event.dataTransfer.dropEffect = 'copy';\n\n      if (event.dataTransfer.items.length > 0) {\n        setIsDraggedOver(true);\n      }\n    };\n\n    const handleDrop = (event: DragEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      resetDraggedOver();\n\n      const {files} = event.dataTransfer;\n      if (files.length < 1) {\n        return;\n      }\n\n      const filesArr = multiple ? Array.from(files) : [files[0]];\n\n      const areFilesValid = !!accept\n        ? filesArr.every(file =>\n            accept\n              .split(',')\n              .map(v => v.trim())\n              .includes(file.type),\n          )\n        : true;\n\n      if (!areFilesValid) {\n        onInvalidFilesDropError();\n        return;\n      }\n\n      onFilesUploaded(filesArr);\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      const {files} = event.target;\n\n      if (files.length < 1) {\n        return;\n      }\n\n      onFilesUploaded(Array.from(files));\n    };\n\n    return (\n      <div css={dropFileWrapperStyle}>\n        <div\n          css={(theme: Theme) => ({\n            ...dropFileZoneWrapperStyle(theme, isDraggedOver),\n            ...dropFileZoneWrapperCSS,\n          })}\n          data-testid=\"dropzone\"\n          onDragOver={handleDragOver}\n          onDragLeave={resetDraggedOver}\n          onDrop={handleDrop}\n        >\n          <FlexBox align=\"center\" justify=\"center\" flexWrap=\"wrap\" css={{maxWidth: '280px', margin: '0 auto'}}>\n            <UploadIcon css={{margin: '12px 0'}} />\n            <div css={{maxWidth: '160px', margin: '0 25px'}}>\n              <span css={dropFileZoneHeadingStyle}>{headingText}</span>\n              <label\n                aria-label={`${headingText} ${labelText} (${description})`}\n                css={(theme: Theme) => dropFileZoneLabelStyle(theme)}\n              >\n                <span>{labelText}</span>\n                <input\n                  data-testid=\"file-input\"\n                  ref={ref}\n                  accept={accept}\n                  multiple={multiple}\n                  css={visuallyHiddenStyles}\n                  onChange={handleChange}\n                  type=\"file\"\n                  {...inputProps}\n                />\n              </label>\n            </div>\n          </FlexBox>\n        </div>\n        {description && <p css={dropFileZonDescriptionStyle}>{description}</p>}\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"DropFileInput.js","names":["visuallyHiddenStyles","clip","clipPath","height","overflow","position","whiteSpace","width","dropFileWrapperStyle","maxWidth","dropFileZoneWrapperStyle","theme","isDraggedOver","padding","border","general","primaryColor","borderBottomWidth","borderRadius","textAlign","backgroundColor","COLOR","WHITE","fontWeight","fontSize","lineHeight","color","GRAY","dropFileZoneLabelStyle","cursor","outline","textDecoration","dropFileZoneHeadingStyle","display","dropFileZonDescriptionStyle","marginTop","DropFileInput","forwardRef","ref","onFilesUploaded","onInvalidFilesDropError","dropFileZoneWrapperCSS","labelText","headingText","description","accept","multiple","inputProps","useState","setIsDraggedOver","resetDraggedOver","handleDragOver","event","preventDefault","stopPropagation","dataTransfer","dropEffect","items","length","handleDrop","files","filesArr","Array","from","areFilesValid","every","file","split","map","v","trim","includes","type","handleChange","target"],"sources":["DropFileInput.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, {useState, FC, forwardRef, DragEvent} from 'react';\n\nimport {COLOR} from '../Identity';\nimport {Theme} from '../Layout';\nimport {TextProps} from '../Text';\nimport {UploadIcon} from '../Icon';\nimport {FlexBox} from '../Layout';\n\nexport interface DropFileInputProps<T = HTMLInputElement> extends TextProps<T> {\n  onFilesUploaded: (files: File[]) => void;\n  onInvalidFilesDropError: () => void;\n  labelText: string;\n  headingText: string;\n  description?: string;\n  dropFileZoneWrapperCSS?: CSSObject;\n}\n\nconst visuallyHiddenStyles: CSSObject = {\n  clip: 'rect(0 0 0 0)',\n  clipPath: 'inset(50%)',\n  height: '1px',\n  overflow: 'hidden',\n  position: 'absolute',\n  whiteSpace: 'nowrap',\n  width: '1px',\n};\n\nexport const dropFileWrapperStyle: CSSObject = {\n  maxWidth: '330px',\n};\n\nexport const dropFileZoneWrapperStyle: <T>(theme: Theme, isDraggedOver: boolean) => CSSObject = (\n  theme,\n  isDraggedOver,\n) => ({\n  width: '100%',\n  padding: '28px 12px',\n  border: `1px dashed ${theme.general.primaryColor}`,\n  borderBottomWidth: '2px',\n  borderRadius: '6px',\n  textAlign: 'center',\n  backgroundColor: isDraggedOver ? theme.general.backgroundColor : COLOR.WHITE,\n  fontWeight: 400,\n  fontSize: '12px',\n  lineHeight: '13px',\n  color: COLOR.GRAY,\n});\n\nexport const dropFileZoneLabelStyle: <T>(theme: Theme) => CSSObject = theme => ({\n  color: theme.general.primaryColor,\n  cursor: 'pointer',\n  ':focus-within': {\n    outline: `1px solid ${theme.general.primaryColor}`,\n  },\n  ':hover': {\n    textDecoration: 'underline',\n  },\n});\n\nexport const dropFileZoneHeadingStyle: CSSObject = {\n  display: 'block',\n  whiteSpace: 'pre-line',\n};\n\nexport const dropFileZonDescriptionStyle: CSSObject = {\n  marginTop: '12px',\n  fontWeight: 400,\n  fontSize: '10px',\n  lineHeight: '13px',\n  color: COLOR.GRAY,\n  whiteSpace: 'pre-line',\n};\n\nexport const DropFileInput: FC<DropFileInputProps<HTMLInputElement>> = forwardRef<\n  HTMLInputElement,\n  DropFileInputProps<HTMLInputElement>\n>(\n  (\n    {\n      onFilesUploaded,\n      onInvalidFilesDropError,\n      dropFileZoneWrapperCSS,\n      labelText,\n      headingText,\n      description,\n      accept,\n      multiple,\n      ...inputProps\n    },\n    ref,\n  ) => {\n    const [isDraggedOver, setIsDraggedOver] = useState(false);\n\n    const resetDraggedOver = () => setIsDraggedOver(false);\n\n    const handleDragOver = (event: DragEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n      event.dataTransfer.dropEffect = 'copy';\n\n      if (event.dataTransfer.items.length > 0) {\n        setIsDraggedOver(true);\n      }\n    };\n\n    const handleDrop = (event: DragEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      resetDraggedOver();\n\n      const {files} = event.dataTransfer;\n      if (files.length < 1) {\n        return;\n      }\n\n      const filesArr = multiple ? Array.from(files) : [files[0]];\n\n      const areFilesValid = !!accept\n        ? filesArr.every(file =>\n            accept\n              .split(',')\n              .map(v => v.trim())\n              .includes(file.type),\n          )\n        : true;\n\n      if (!areFilesValid) {\n        onInvalidFilesDropError();\n        return;\n      }\n\n      onFilesUploaded(filesArr);\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      const {files} = event.target;\n\n      if (files.length < 1) {\n        return;\n      }\n\n      onFilesUploaded(Array.from(files));\n    };\n\n    return (\n      <div css={dropFileWrapperStyle}>\n        <div\n          css={(theme: Theme) => ({\n            ...dropFileZoneWrapperStyle(theme, isDraggedOver),\n            ...dropFileZoneWrapperCSS,\n          })}\n          data-testid=\"dropzone\"\n          onDragOver={handleDragOver}\n          onDragLeave={resetDraggedOver}\n          onDrop={handleDrop}\n        >\n          <FlexBox align=\"center\" justify=\"center\" flexWrap=\"wrap\" css={{maxWidth: '280px', margin: '0 auto'}}>\n            <UploadIcon css={{margin: '12px 0'}} />\n            <div css={{maxWidth: '160px', margin: '0 25px'}}>\n              <span css={dropFileZoneHeadingStyle}>{headingText}</span>\n              <label\n                aria-label={`${headingText} ${labelText} (${description})`}\n                css={(theme: Theme) => dropFileZoneLabelStyle(theme)}\n              >\n                <span>{labelText}</span>\n                <input\n                  data-testid=\"file-input\"\n                  ref={ref}\n                  accept={accept}\n                  multiple={multiple}\n                  css={visuallyHiddenStyles}\n                  onChange={handleChange}\n                  type=\"file\"\n                  {...inputProps}\n                />\n              </label>\n            </div>\n          </FlexBox>\n        </div>\n        {description && <p css={dropFileZonDescriptionStyle}>{description}</p>}\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/src/Form/ErrorMessage.js

@@ -1,13 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.filterErrorMessageProps = exports.errorMessageStyle = exports.ErrorMessage = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@emotion/react");
 var _Identity = require("../Identity");
 var _Layout = require("../Layout");
@@ -15,15 +11,19 @@ var _Text = require("../Text");
 var _util = require("../util");
 var _excluded = ["justify", "align"],
   _excluded2 = ["children"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var errorMessageStyle = function errorMessageStyle(theme, _ref) {
   var _ref$justify = _ref.justify,
     justify = _ref$justify === void 0 ? 'flex-start' : _ref$justify,
     _ref$align = _ref.align,
     align = _ref$align === void 0 ? 'center' : _ref$align,
-    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
   return _objectSpread(_objectSpread({}, (0, _Layout.flexBoxStyle)(_objectSpread({
     align: align,
     justify: justify
@@ -52,8 +52,8 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 };
 var ErrorMessage = function ErrorMessage(_ref2) {
   var children = _ref2.children,
-    props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
-  return (0, _react.jsx)(_Layout.FlexBox, (0, _extends2["default"])({
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return (0, _react.jsx)(_Layout.FlexBox, _extends({
     css: function css(theme) {
       return errorMessageStyle(theme, props);
     }

package/src/Form/ErrorMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorMessage.js","names":["errorMessageStyle","theme","justify","align","props","flexBoxStyle","a","linkStyle","bold","fontSize","textTransform","marginBottom","filterErrorMessageProps","filterProps","filterFlexBoxProps","ErrorMessage","children","COLOR_V2","RED_LIGHT_500"],"sources":["ErrorMessage.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {COLOR_V2} from '../Identity';\nimport {FlexBox, FlexBoxProps, flexBoxStyle, filterFlexBoxProps, Theme} from '../Layout';\nimport {Text, linkStyle} from '../Text';\nimport {filterProps} from '../util';\n\ntype ErrorMessageProps<T = HTMLDivElement> = FlexBoxProps<T>;\n\nexport const errorMessageStyle: <T>(theme: Theme, props: ErrorMessageProps<T>) => CSSObject = (\n  theme,\n  {justify = 'flex-start', align = 'center', ...props},\n) => ({\n  ...flexBoxStyle({align, justify, ...props}),\n  a: {\n    ...linkStyle(theme, {bold: false, fontSize: '12px', textTransform: 'none', ...props}),\n  },\n  marginBottom: '12px',\n});\n\nexport const filterErrorMessageProps = (props: ErrorMessageProps) => {\n  return filterProps(filterFlexBoxProps(props) as ErrorMessageProps, []);\n};\n\nexport const ErrorMessage = ({children, ...props}: ErrorMessageProps) => (\n  <FlexBox css={(theme: Theme) => errorMessageStyle(theme, props)} {...props}>\n    <Text color={COLOR_V2.RED_LIGHT_500} fontSize={'12px'} css={{fontWeight: 400}}>\n      {children}\n    </Text>\n  </FlexBox>\n);\n"],"mappings":";;;;;;;;;;AAoBA;AAEA;AACA;AACA;AACA;AAAoC;EAAA;AAAA;AAAA;AAAA;AAI7B,IAAMA,iBAA8E,GAAG,SAAjFA,iBAA8E,CACzFC,KAAK;EAAA,wBACJC,OAAO;IAAPA,OAAO,6BAAG,YAAY;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAG,QAAQ;IAAKC,KAAK;EAAA,uCAEhD,IAAAC,oBAAY;IAAEF,KAAK,EAALA,KAAK;IAAED,OAAO,EAAPA;EAAO,GAAKE,KAAK,EAAE;IAC3CE,CAAC,oBACI,IAAAC,eAAS,EAACN,KAAK;MAAGO,IAAI,EAAE,KAAK;MAAEC,QAAQ,EAAE,MAAM;MAAEC,aAAa,EAAE;IAAM,GAAKN,KAAK,EAAE,CACtF;IACDO,YAAY,EAAE;EAAM;AAAA,CACpB;AAAC;AAEI,IAAMC,uBAAuB,GAAG,SAA1BA,uBAAuB,CAAIR,KAAwB,EAAK;EACnE,OAAO,IAAAS,iBAAW,EAAC,IAAAC,0BAAkB,EAACV,KAAK,CAAC,EAAuB,EAAE,CAAC;AACxE,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAEK,IAAMW,YAAY,GAAG,SAAfA,YAAY;EAAA,IAAKC,QAAQ,SAARA,QAAQ;IAAKZ,KAAK;EAAA,OAC9C,gBAAC,eAAO;IAAC,GAAG,EAAE,aAACH,KAAY;MAAA,OAAKD,iBAAiB,CAACC,KAAK,EAAEG,KAAK,CAAC;IAAA;EAAC,GAAKA,KAAK,GACxE,gBAAC,UAAI;IAAC,KAAK,EAAEa,kBAAQ,CAACC,aAAc;IAAC,QAAQ,EAAE,MAAO;IAAC,GAAG;EAAoB,GAC3EF,QAAQ,CACJ,CACC;AAAA,CACX;AAAC"}
+{"version":3,"file":"ErrorMessage.js","names":["errorMessageStyle","theme","justify","align","props","flexBoxStyle","a","linkStyle","bold","fontSize","textTransform","marginBottom","filterErrorMessageProps","filterProps","filterFlexBoxProps","ErrorMessage","children","COLOR_V2","RED_LIGHT_500"],"sources":["ErrorMessage.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {COLOR_V2} from '../Identity';\nimport {FlexBox, FlexBoxProps, flexBoxStyle, filterFlexBoxProps, Theme} from '../Layout';\nimport {Text, linkStyle} from '../Text';\nimport {filterProps} from '../util';\n\ntype ErrorMessageProps<T = HTMLDivElement> = FlexBoxProps<T>;\n\nexport const errorMessageStyle: <T>(theme: Theme, props: ErrorMessageProps<T>) => CSSObject = (\n  theme,\n  {justify = 'flex-start', align = 'center', ...props},\n) => ({\n  ...flexBoxStyle({align, justify, ...props}),\n  a: {\n    ...linkStyle(theme, {bold: false, fontSize: '12px', textTransform: 'none', ...props}),\n  },\n  marginBottom: '12px',\n});\n\nexport const filterErrorMessageProps = (props: ErrorMessageProps) => {\n  return filterProps(filterFlexBoxProps(props) as ErrorMessageProps, []);\n};\n\nexport const ErrorMessage = ({children, ...props}: ErrorMessageProps) => (\n  <FlexBox css={(theme: Theme) => errorMessageStyle(theme, props)} {...props}>\n    <Text color={COLOR_V2.RED_LIGHT_500} fontSize={'12px'} css={{fontWeight: 400}}>\n      {children}\n    </Text>\n  </FlexBox>\n);\n"],"mappings":";;;;;;AAoBA;AAEA;AACA;AACA;AACA;AAAoC;EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAI7B,IAAMA,iBAA8E,GAAG,SAAjFA,iBAA8E,CACzFC,KAAK;EAAA,wBACJC,OAAO;IAAPA,OAAO,6BAAG,YAAY;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAG,QAAQ;IAAKC,KAAK;EAAA,uCAEhD,IAAAC,oBAAY;IAAEF,KAAK,EAALA,KAAK;IAAED,OAAO,EAAPA;EAAO,GAAKE,KAAK,EAAE;IAC3CE,CAAC,oBACI,IAAAC,eAAS,EAACN,KAAK;MAAGO,IAAI,EAAE,KAAK;MAAEC,QAAQ,EAAE,MAAM;MAAEC,aAAa,EAAE;IAAM,GAAKN,KAAK,EAAE,CACtF;IACDO,YAAY,EAAE;EAAM;AAAA,CACpB;AAAC;AAEI,IAAMC,uBAAuB,GAAG,SAA1BA,uBAAuB,CAAIR,KAAwB,EAAK;EACnE,OAAO,IAAAS,iBAAW,EAAC,IAAAC,0BAAkB,EAACV,KAAK,CAAC,EAAuB,EAAE,CAAC;AACxE,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAEK,IAAMW,YAAY,GAAG,SAAfA,YAAY;EAAA,IAAKC,QAAQ,SAARA,QAAQ;IAAKZ,KAAK;EAAA,OAC9C,gBAAC,eAAO;IAAC,GAAG,EAAE,aAACH,KAAY;MAAA,OAAKD,iBAAiB,CAACC,KAAK,EAAEG,KAAK,CAAC;IAAA;EAAC,GAAKA,KAAK,GACxE,gBAAC,UAAI;IAAC,KAAK,EAAEa,kBAAQ,CAACC,aAAc;IAAC,QAAQ,EAAE,MAAO;IAAC,GAAG;EAAoB,GAC3EF,QAAQ,CACJ,CACC;AAAA,CACX;AAAC"}

package/src/Form/Form.js

@@ -1,13 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Form = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@emotion/react");
 var _react2 = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "y2mk5a",
@@ -19,7 +19,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var Form = function Form(props) {
-  return (0, _react.jsx)("form", (0, _extends2["default"])({
+  return (0, _react.jsx)("form", _extends({
     css: _ref
   }, props));
 };

package/src/Form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","names":["Form","props"],"sources":["Form.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {jsx} from '@emotion/react';\nimport React from 'react';\n\nexport const Form = (props: React.HTMLProps<HTMLFormElement>) => (\n  <form\n    css={{\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'space-between',\n      marginBottom: 0,\n      width: '100%',\n    }}\n    {...props}\n  />\n);\n"],"mappings":";;;;;;;;AAoBA;AACA;AAA0B;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAEnB,IAAMA,IAAI,GAAG,SAAPA,IAAI,CAAIC,KAAuC;EAAA,OAC1D;IACE,GAAG;EAMD,GACEA,KAAK,EACT;AAAA,CACH;AAAC"}
+{"version":3,"file":"Form.js","names":["Form","props"],"sources":["Form.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {jsx} from '@emotion/react';\nimport React from 'react';\n\nexport const Form = (props: React.HTMLProps<HTMLFormElement>) => (\n  <form\n    css={{\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'space-between',\n      marginBottom: 0,\n      width: '100%',\n    }}\n    {...props}\n  />\n);\n"],"mappings":";;;;;;AAoBA;AACA;AAA0B;AAAA;AAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAEnB,IAAMA,IAAI,GAAG,SAAPA,IAAI,CAAIC,KAAuC;EAAA,OAC1D;IACE,GAAG;EAMD,GACEA,KAAK,EACT;AAAA,CACH;AAAC"}

package/src/Form/Input.js

@@ -1,25 +1,31 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.inputStyle = exports.Input = exports.INPUT_GROUP = exports.INPUT_CLASSNAME = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@emotion/react");
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react2 = _interopRequireWildcard(require("react"));
 var _util = require("../util");
 var _Icon = require("../Icon");
 var _InputLabel = _interopRequireDefault(require("./InputLabel"));
 var _excluded = ["type", "label", "error", "helperText", "wrapperCSS", "className"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 var inputStyle = function inputStyle(theme, _ref) {
   var _ref$markInvalid = _ref.markInvalid,
     markInvalid = _ref$markInvalid === void 0 ? false : _ref$markInvalid,
@@ -84,9 +90,9 @@ var Input = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref) {
     wrapperCSS = _ref2$wrapperCSS === void 0 ? {} : _ref2$wrapperCSS,
     _ref2$className = _ref2.className,
     className = _ref2$className === void 0 ? '' : _ref2$className,
-    props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+    props = _objectWithoutProperties(_ref2, _excluded);
   var _useState = (0, _react2.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     togglePassword = _useState2[0],
     setTogglePassword = _useState2[1];
   var hasError = !!error;
@@ -118,7 +124,7 @@ var Input = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref) {
       marginBottom: hasError && '8px',
       position: 'relative'
     }, process.env.NODE_ENV === "production" ? "" : ";label:Input;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrSVciLCJmaWxlIjoiSW5wdXQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFdpcmVcbiAqIENvcHlyaWdodCAoQykgMjAxOCBXaXJlIFN3aXNzIEdtYkhcbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZnJlZSBzb2Z0d2FyZTogeW91IGNhbiByZWRpc3RyaWJ1dGUgaXQgYW5kL29yIG1vZGlmeVxuICogaXQgdW5kZXIgdGhlIHRlcm1zIG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBhcyBwdWJsaXNoZWQgYnlcbiAqIHRoZSBGcmVlIFNvZnR3YXJlIEZvdW5kYXRpb24sIGVpdGhlciB2ZXJzaW9uIDMgb2YgdGhlIExpY2Vuc2UsIG9yXG4gKiAoYXQgeW91ciBvcHRpb24pIGFueSBsYXRlciB2ZXJzaW9uLlxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBkaXN0cmlidXRlZCBpbiB0aGUgaG9wZSB0aGF0IGl0IHdpbGwgYmUgdXNlZnVsLFxuICogYnV0IFdJVEhPVVQgQU5ZIFdBUlJBTlRZOyB3aXRob3V0IGV2ZW4gdGhlIGltcGxpZWQgd2FycmFudHkgb2ZcbiAqIE1FUkNIQU5UQUJJTElUWSBvciBGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRS4gU2VlIHRoZVxuICogR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgZm9yIG1vcmUgZGV0YWlscy5cbiAqXG4gKiBZb3Ugc2hvdWxkIGhhdmUgcmVjZWl2ZWQgYSBjb3B5IG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZVxuICogYWxvbmcgd2l0aCB0aGlzIHByb2dyYW0uIElmIG5vdCwgc2VlIGh0dHA6Ly93d3cuZ251Lm9yZy9saWNlbnNlcy8uXG4gKlxuICovXG5cbi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHtDU1NPYmplY3QsIGpzeCwgdXNlVGhlbWV9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7UHJvcGVydHl9IGZyb20gJ2Nzc3R5cGUnO1xuaW1wb3J0IFJlYWN0LCB7UmVhY3RFbGVtZW50LCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge1RoZW1lfSBmcm9tICcuLi9MYXlvdXQnO1xuaW1wb3J0IHtUZXh0UHJvcHN9IGZyb20gJy4uL1RleHQnO1xuaW1wb3J0IHtmaWx0ZXJQcm9wc30gZnJvbSAnLi4vdXRpbCc7XG5pbXBvcnQge0Vycm9ySWNvbiwgSGlkZUljb24sIFNob3dJY29ufSBmcm9tICcuLi9JY29uJztcbmltcG9ydCBJbnB1dExhYmVsIGZyb20gJy4vSW5wdXRMYWJlbCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgSW5wdXRQcm9wczxUID0gSFRNTElucHV0RWxlbWVudD4gZXh0ZW5kcyBUZXh0UHJvcHM8VD4ge1xuICBsYWJlbD86IHN0cmluZztcbiAgZXJyb3I/OiBSZWFjdEVsZW1lbnQ7XG4gIG1hcmtJbnZhbGlkPzogYm9vbGVhbjtcbiAgaGVscGVyVGV4dD86IHN0cmluZztcbiAgcGxhY2Vob2xkZXJUZXh0VHJhbnNmb3JtPzogUHJvcGVydHkuVGV4dFRyYW5zZm9ybTtcbiAgd3JhcHBlckNTUz86IENTU09iamVjdDtcbn1cblxuZXhwb3J0IGNvbnN0IGlucHV0U3R5bGU6IDxUPih0aGVtZTogVGhlbWUsIHByb3BzOiBJbnB1dFByb3BzPFQ+LCBoYXNFcnJvcj86IGJvb2xlYW4pID0+IENTU09iamVjdCA9IChcbiAgdGhlbWUsXG4gIHttYXJrSW52YWxpZCA9IGZhbHNlLCBwbGFjZWhvbGRlclRleHRUcmFuc2Zvcm0gPSAnbm9uZScsIGRpc2FibGVkID0gZmFsc2V9LFxuKSA9PiB7XG4gIGNvbnN0IHBsYWNlaG9sZGVyU3R5bGUgPSB7XG4gICAgY29sb3I6IHRoZW1lLklucHV0LnBsYWNlaG9sZGVyQ29sb3IsXG4gICAgZm9udFNpemU6ICcxNnB4JyxcbiAgICB0ZXh0VHJhbnNmb3JtOiBwbGFjZWhvbGRlclRleHRUcmFuc2Zvcm0sXG4gIH07XG5cbiAgcmV0dXJuIHtcbiAgICAnJjo6LW1vei1wbGFjZWhvbGRlcic6IHtcbiAgICAgIC4uLnBsYWNlaG9sZGVyU3R5bGUsXG4gICAgICBvcGFjaXR5OiAxLFxuICAgIH0sXG4gICAgJyY6Oi1tcy1pbnB1dC1wbGFjZWhvbGRlcic6IHtcbiAgICAgIC4uLnBsYWNlaG9sZGVyU3R5bGUsXG4gICAgfSxcbiAgICAnJjo6LXdlYmtpdC1pbnB1dC1wbGFjZWhvbGRlcic6IHtcbiAgICAgIC4uLnBsYWNlaG9sZGVyU3R5bGUsXG4gICAgfSxcbiAgICAnJjpob3Zlcic6IHtcbiAgICAgIGJveFNoYWRvdzogIWRpc2FibGVkICYmIGAwIDAgMCAxcHggJHt0aGVtZS5JbnB1dC5ib3JkZXJIb3Zlcn1gLFxuICAgIH0sXG4gICAgJyY6Zm9jdXMtdmlzaWJsZSwgJjpmb2N1cywgJjphY3RpdmUnOiB7XG4gICAgICBib3hTaGFkb3c6IGAwIDAgMCAxcHggJHt0aGVtZS5nZW5lcmFsLnByaW1hcnlDb2xvcn1gLFxuICAgIH0sXG4gICAgJyY6aW52YWxpZDpub3QoOmZvY3VzLCA6aG92ZXIpJzogIW1hcmtJbnZhbGlkXG4gICAgICA/IHtcbiAgICAgICAgICBib3hTaGFkb3c6IGAwIDAgMCAxcHggJHt0aGVtZS5TZWxlY3QuYm9yZGVyQ29sb3J9YCxcbiAgICAgICAgfVxuICAgICAgOiB7fSxcbiAgICBiYWNrZ3JvdW5kOiBkaXNhYmxlZCA/IHRoZW1lLklucHV0LmJhY2tncm91bmRDb2xvckRpc2FibGVkIDogdGhlbWUuSW5wdXQuYmFja2dyb3VuZENvbG9yLFxuICAgIGJvcmRlcjogJ25vbmUnLFxuICAgIGJvcmRlclJhZGl1czogJzEycHgnLFxuICAgIGJveFNoYWRvdzogbWFya0ludmFsaWQgPyBgMCAwIDAgMXB4ICR7dGhlbWUuZ2VuZXJhbC5kYW5nZXJDb2xvcn1gIDogYDAgMCAwIDFweCAke3RoZW1lLlNlbGVjdC5ib3JkZXJDb2xvcn1gLFxuICAgIGNhcmV0Q29sb3I6IHRoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yLFxuICAgIGNvbG9yOiB0aGVtZS5nZW5lcmFsLmNvbG9yLFxuICAgIGZvbnRXZWlnaHQ6IDMwMCxcbiAgICBoZWlnaHQ6ICc0OHB4JyxcbiAgICBsaW5lSGVpZ2h0OiAnMjRweCcsXG4gICAgb3V0bGluZTogJ25vbmUnLFxuICAgIHBhZGRpbmc6ICcwIDE2cHgnLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gIH07XG59O1xuXG5leHBvcnQgY29uc3QgSU5QVVRfQ0xBU1NOQU1FID0gJ3dpcmVpbnB1dCc7XG5leHBvcnQgY29uc3QgSU5QVVRfR1JPVVAgPSAnaW5wdXQtZ3JvdXAnO1xuXG5jb25zdCBmaWx0ZXJJbnB1dFByb3BzID0gKHByb3BzOiBJbnB1dFByb3BzKSA9PiBmaWx0ZXJQcm9wcyhwcm9wcywgWydtYXJrSW52YWxpZCcsICdwbGFjZWhvbGRlclRleHRUcmFuc2Zvcm0nXSk7XG5cbmNvbnN0IGNlbnRlcklucHV0QWN0aW9uOiBDU1NPYmplY3QgPSB7XG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICByaWdodDogJzE2cHgnLFxuICB0b3A6ICc1MCUnLFxuICB0cmFuc2Zvcm06ICd0cmFuc2xhdGVZKC01MCUpJyxcbn07XG5cbmV4cG9ydCBjb25zdCBJbnB1dDogUmVhY3QuRkM8SW5wdXRQcm9wczxIVE1MSW5wdXRFbGVtZW50Pj4gPSBSZWFjdC5mb3J3YXJkUmVmPFxuICBIVE1MSW5wdXRFbGVtZW50LFxuICBJbnB1dFByb3BzPEhUTUxJbnB1dEVsZW1lbnQ+XG4+KCh7dHlwZSwgbGFiZWwsIGVycm9yLCBoZWxwZXJUZXh0LCB3cmFwcGVyQ1NTID0ge30sIGNsYXNzTmFtZSA9ICcnLCAuLi5wcm9wc30sIHJlZikgPT4ge1xuICBjb25zdCBbdG9nZ2xlUGFzc3dvcmQsIHNldFRvZ2dsZVBhc3N3b3JkXSA9IHVzZVN0YXRlPGJvb2xlYW4+KGZhbHNlKTtcblxuICBjb25zdCBoYXNFcnJvciA9ICEhZXJyb3I7XG4gIGNvbnN0IGlzUGFzc3dvcmRJbnB1dCA9IHR5cGUgPT09ICdwYXNzd29yZCc7XG4gIGNvbnN0IHRvZ2dsZWRQYXNzd29yZFR5cGUgPSB0b2dnbGVQYXNzd29yZCA/ICd0ZXh0JyA6ICdwYXNzd29yZCc7XG5cbiAgY29uc3QgdG9nZ2xlU2V0UGFzc3dvcmQgPSAoKSA9PiBzZXRUb2dnbGVQYXNzd29yZChwcmV2U3RhdGUgPT4gIXByZXZTdGF0ZSk7XG5cbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY2xhc3NOYW1lPXtJTlBVVF9HUk9VUH1cbiAgICAgIGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gKHtcbiAgICAgICAgbWFyZ2luQm90dG9tOiBoYXNFcnJvciA/ICcycHgnIDogJzIwcHgnLFxuICAgICAgICB3aWR0aDogJzEwMCUnLFxuICAgICAgICAnJjpmb2N1cy13aXRoaW4gbGFiZWwnOiB7XG4gICAgICAgICAgY29sb3I6IHRoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yLFxuICAgICAgICB9LFxuICAgICAgICAuLi53cmFwcGVyQ1NTLFxuICAgICAgfSl9XG4gICAgPlxuICAgICAge2xhYmVsICYmIChcbiAgICAgICAgPElucHV0TGFiZWwgaHRtbEZvcj17cHJvcHMuaWR9IGlzUmVxdWlyZWQ9e3Byb3BzLnJlcXVpcmVkfSBtYXJrSW52YWxpZD17cHJvcHMubWFya0ludmFsaWR9PlxuICAgICAgICAgIHtsYWJlbH1cbiAgICAgICAgPC9JbnB1dExhYmVsPlxuICAgICAgKX1cblxuICAgICAgPGRpdiBjc3M9e3ttYXJnaW5Cb3R0b206IGhhc0Vycm9yICYmICc4cHgnLCBwb3NpdGlvbjogJ3JlbGF0aXZlJ319PlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjbGFzc05hbWU9e0lOUFVUX0NMQVNTTkFNRX1cbiAgICAgICAgICBjc3M9eyh0aGVtZTogVGhlbWUpID0+IGlucHV0U3R5bGUodGhlbWUsIHByb3BzLCBoYXNFcnJvcil9XG4gICAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgICAgdHlwZT17aXNQYXNzd29yZElucHV0ID8gdG9nZ2xlZFBhc3N3b3JkVHlwZSA6IHR5cGV9XG4gICAgICAgICAgYXJpYS1yZXF1aXJlZD17cHJvcHMucmVxdWlyZWR9XG4gICAgICAgICAgey4uLmZpbHRlcklucHV0UHJvcHMocHJvcHMpfVxuICAgICAgICAvPlxuXG4gICAgICAgIHtoYXNFcnJvciAmJiAhaXNQYXNzd29yZElucHV0ICYmIChcbiAgICAgICAgICA8RXJyb3JJY29uIGNzcz17Y2VudGVySW5wdXRBY3Rpb259IHdpZHRoPXsxNn0gaGVpZ2h0PXsxNn0gYXJpYS1oaWRkZW49XCJ0cnVlXCIgLz5cbiAgICAgICAgKX1cblxuICAgICAgICB7aXNQYXNzd29yZElucHV0ICYmIChcbiAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgIGRhdGEtdWllLW5hbWU9eyF0b2dnbGVQYXNzd29yZCA/ICdkby1zaG93LXBhc3N3b3JkJyA6ICdkby1oaWRlLXBhc3N3b3JkJ31cbiAgICAgICAgICAgIGNzcz17ey4uLmNlbnRlcklucHV0QWN0aW9uLCBiYWNrZ3JvdW5kOiAndHJhbnNwYXJlbnQnLCBib3JkZXI6ICdub25lJywgY3Vyc29yOiAncG9pbnRlcicsIHBhZGRpbmc6IDB9fVxuICAgICAgICAgICAgb25DbGljaz17dG9nZ2xlU2V0UGFzc3dvcmR9XG4gICAgICAgICAgICB0aXRsZT1cIlRvZ2dsZSBwYXNzd29yZCB2aXNpYmlsaXR5XCJcbiAgICAgICAgICAgIGFyaWEtY29udHJvbHM9e3Byb3BzLmlkfVxuICAgICAgICAgICAgYXJpYS1leHBhbmRlZD17dG9nZ2xlUGFzc3dvcmR9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge3RvZ2dsZVBhc3N3b3JkID8gPEhpZGVJY29uIC8+IDogPFNob3dJY29uIC8+fVxuICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICApfVxuICAgICAgPC9kaXY+XG5cbiAgICAgIHshaGFzRXJyb3IgJiYgaGVscGVyVGV4dCAmJiAoXG4gICAgICAgIDxwXG4gICAgICAgICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiAoe1xuICAgICAgICAgICAgZm9udFNpemU6ICcxMnB4JyxcbiAgICAgICAgICAgIGZvbnRXZWlnaHQ6IDQwMCxcbiAgICAgICAgICAgIGNvbG9yOiB0aGVtZS5JbnB1dC5wbGFjZWhvbGRlckNvbG9yLFxuICAgICAgICAgICAgbWFyZ2luVG9wOiA4LFxuICAgICAgICAgIH0pfVxuICAgICAgICA+XG4gICAgICAgICAge2hlbHBlclRleHR9XG4gICAgICAgIDwvcD5cbiAgICAgICl9XG5cbiAgICAgIHtlcnJvcn1cbiAgICA8L2Rpdj5cbiAgKTtcbn0pO1xuIl19 */")
-  }, (0, _react.jsx)("input", (0, _extends2["default"])({
+  }, (0, _react.jsx)("input", _extends({
     className: INPUT_CLASSNAME,
     css: function css(theme) {
       return inputStyle(theme, props, hasError);

package/src/Form/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["inputStyle","theme","markInvalid","placeholderTextTransform","disabled","placeholderStyle","color","Input","placeholderColor","fontSize","textTransform","opacity","boxShadow","borderHover","general","primaryColor","Select","borderColor","background","backgroundColorDisabled","backgroundColor","border","borderRadius","dangerColor","caretColor","fontWeight","height","lineHeight","outline","padding","width","INPUT_CLASSNAME","INPUT_GROUP","filterInputProps","props","filterProps","centerInputAction","position","right","top","transform","React","forwardRef","ref","type","label","error","helperText","wrapperCSS","className","useState","togglePassword","setTogglePassword","hasError","isPasswordInput","toggledPasswordType","toggleSetPassword","prevState","useTheme","marginBottom","id","required","cursor","marginTop"],"sources":["Input.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, useTheme} from '@emotion/react';\nimport {Property} from 'csstype';\nimport React, {ReactElement, useState} from 'react';\n\nimport {Theme} from '../Layout';\nimport {TextProps} from '../Text';\nimport {filterProps} from '../util';\nimport {ErrorIcon, HideIcon, ShowIcon} from '../Icon';\nimport InputLabel from './InputLabel';\n\nexport interface InputProps<T = HTMLInputElement> extends TextProps<T> {\n  label?: string;\n  error?: ReactElement;\n  markInvalid?: boolean;\n  helperText?: string;\n  placeholderTextTransform?: Property.TextTransform;\n  wrapperCSS?: CSSObject;\n}\n\nexport const inputStyle: <T>(theme: Theme, props: InputProps<T>, hasError?: boolean) => CSSObject = (\n  theme,\n  {markInvalid = false, placeholderTextTransform = 'none', disabled = false},\n) => {\n  const placeholderStyle = {\n    color: theme.Input.placeholderColor,\n    fontSize: '16px',\n    textTransform: placeholderTextTransform,\n  };\n\n  return {\n    '&::-moz-placeholder': {\n      ...placeholderStyle,\n      opacity: 1,\n    },\n    '&::-ms-input-placeholder': {\n      ...placeholderStyle,\n    },\n    '&::-webkit-input-placeholder': {\n      ...placeholderStyle,\n    },\n    '&:hover': {\n      boxShadow: !disabled && `0 0 0 1px ${theme.Input.borderHover}`,\n    },\n    '&:focus-visible, &:focus, &:active': {\n      boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,\n    },\n    '&:invalid:not(:focus, :hover)': !markInvalid\n      ? {\n          boxShadow: `0 0 0 1px ${theme.Select.borderColor}`,\n        }\n      : {},\n    background: disabled ? theme.Input.backgroundColorDisabled : theme.Input.backgroundColor,\n    border: 'none',\n    borderRadius: '12px',\n    boxShadow: markInvalid ? `0 0 0 1px ${theme.general.dangerColor}` : `0 0 0 1px ${theme.Select.borderColor}`,\n    caretColor: theme.general.primaryColor,\n    color: theme.general.color,\n    fontWeight: 300,\n    height: '48px',\n    lineHeight: '24px',\n    outline: 'none',\n    padding: '0 16px',\n    width: '100%',\n  };\n};\n\nexport const INPUT_CLASSNAME = 'wireinput';\nexport const INPUT_GROUP = 'input-group';\n\nconst filterInputProps = (props: InputProps) => filterProps(props, ['markInvalid', 'placeholderTextTransform']);\n\nconst centerInputAction: CSSObject = {\n  position: 'absolute',\n  right: '16px',\n  top: '50%',\n  transform: 'translateY(-50%)',\n};\n\nexport const Input: React.FC<InputProps<HTMLInputElement>> = React.forwardRef<\n  HTMLInputElement,\n  InputProps<HTMLInputElement>\n>(({type, label, error, helperText, wrapperCSS = {}, className = '', ...props}, ref) => {\n  const [togglePassword, setTogglePassword] = useState<boolean>(false);\n\n  const hasError = !!error;\n  const isPasswordInput = type === 'password';\n  const toggledPasswordType = togglePassword ? 'text' : 'password';\n\n  const toggleSetPassword = () => setTogglePassword(prevState => !prevState);\n\n  const theme = useTheme();\n\n  return (\n    <div\n      className={INPUT_GROUP}\n      css={(theme: Theme) => ({\n        marginBottom: hasError ? '2px' : '20px',\n        width: '100%',\n        '&:focus-within label': {\n          color: theme.general.primaryColor,\n        },\n        ...wrapperCSS,\n      })}\n    >\n      {label && (\n        <InputLabel htmlFor={props.id} isRequired={props.required} markInvalid={props.markInvalid}>\n          {label}\n        </InputLabel>\n      )}\n\n      <div css={{marginBottom: hasError && '8px', position: 'relative'}}>\n        <input\n          className={INPUT_CLASSNAME}\n          css={(theme: Theme) => inputStyle(theme, props, hasError)}\n          ref={ref}\n          type={isPasswordInput ? toggledPasswordType : type}\n          aria-required={props.required}\n          {...filterInputProps(props)}\n        />\n\n        {hasError && !isPasswordInput && (\n          <ErrorIcon css={centerInputAction} width={16} height={16} aria-hidden=\"true\" />\n        )}\n\n        {isPasswordInput && (\n          <button\n            type=\"button\"\n            data-uie-name={!togglePassword ? 'do-show-password' : 'do-hide-password'}\n            css={{...centerInputAction, background: 'transparent', border: 'none', cursor: 'pointer', padding: 0}}\n            onClick={toggleSetPassword}\n            title=\"Toggle password visibility\"\n            aria-controls={props.id}\n            aria-expanded={togglePassword}\n          >\n            {togglePassword ? <HideIcon /> : <ShowIcon />}\n          </button>\n        )}\n      </div>\n\n      {!hasError && helperText && (\n        <p\n          css={(theme: Theme) => ({\n            fontSize: '12px',\n            fontWeight: 400,\n            color: theme.Input.placeholderColor,\n            marginTop: 8,\n          })}\n        >\n          {helperText}\n        </p>\n      )}\n\n      {error}\n    </div>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":["inputStyle","theme","markInvalid","placeholderTextTransform","disabled","placeholderStyle","color","Input","placeholderColor","fontSize","textTransform","opacity","boxShadow","borderHover","general","primaryColor","Select","borderColor","background","backgroundColorDisabled","backgroundColor","border","borderRadius","dangerColor","caretColor","fontWeight","height","lineHeight","outline","padding","width","INPUT_CLASSNAME","INPUT_GROUP","filterInputProps","props","filterProps","centerInputAction","position","right","top","transform","React","forwardRef","ref","type","label","error","helperText","wrapperCSS","className","useState","togglePassword","setTogglePassword","hasError","isPasswordInput","toggledPasswordType","toggleSetPassword","prevState","useTheme","marginBottom","id","required","cursor","marginTop"],"sources":["Input.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, useTheme} from '@emotion/react';\nimport {Property} from 'csstype';\nimport React, {ReactElement, useState} from 'react';\n\nimport {Theme} from '../Layout';\nimport {TextProps} from '../Text';\nimport {filterProps} from '../util';\nimport {ErrorIcon, HideIcon, ShowIcon} from '../Icon';\nimport InputLabel from './InputLabel';\n\nexport interface InputProps<T = HTMLInputElement> extends TextProps<T> {\n  label?: string;\n  error?: ReactElement;\n  markInvalid?: boolean;\n  helperText?: string;\n  placeholderTextTransform?: Property.TextTransform;\n  wrapperCSS?: CSSObject;\n}\n\nexport const inputStyle: <T>(theme: Theme, props: InputProps<T>, hasError?: boolean) => CSSObject = (\n  theme,\n  {markInvalid = false, placeholderTextTransform = 'none', disabled = false},\n) => {\n  const placeholderStyle = {\n    color: theme.Input.placeholderColor,\n    fontSize: '16px',\n    textTransform: placeholderTextTransform,\n  };\n\n  return {\n    '&::-moz-placeholder': {\n      ...placeholderStyle,\n      opacity: 1,\n    },\n    '&::-ms-input-placeholder': {\n      ...placeholderStyle,\n    },\n    '&::-webkit-input-placeholder': {\n      ...placeholderStyle,\n    },\n    '&:hover': {\n      boxShadow: !disabled && `0 0 0 1px ${theme.Input.borderHover}`,\n    },\n    '&:focus-visible, &:focus, &:active': {\n      boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,\n    },\n    '&:invalid:not(:focus, :hover)': !markInvalid\n      ? {\n          boxShadow: `0 0 0 1px ${theme.Select.borderColor}`,\n        }\n      : {},\n    background: disabled ? theme.Input.backgroundColorDisabled : theme.Input.backgroundColor,\n    border: 'none',\n    borderRadius: '12px',\n    boxShadow: markInvalid ? `0 0 0 1px ${theme.general.dangerColor}` : `0 0 0 1px ${theme.Select.borderColor}`,\n    caretColor: theme.general.primaryColor,\n    color: theme.general.color,\n    fontWeight: 300,\n    height: '48px',\n    lineHeight: '24px',\n    outline: 'none',\n    padding: '0 16px',\n    width: '100%',\n  };\n};\n\nexport const INPUT_CLASSNAME = 'wireinput';\nexport const INPUT_GROUP = 'input-group';\n\nconst filterInputProps = (props: InputProps) => filterProps(props, ['markInvalid', 'placeholderTextTransform']);\n\nconst centerInputAction: CSSObject = {\n  position: 'absolute',\n  right: '16px',\n  top: '50%',\n  transform: 'translateY(-50%)',\n};\n\nexport const Input: React.FC<InputProps<HTMLInputElement>> = React.forwardRef<\n  HTMLInputElement,\n  InputProps<HTMLInputElement>\n>(({type, label, error, helperText, wrapperCSS = {}, className = '', ...props}, ref) => {\n  const [togglePassword, setTogglePassword] = useState<boolean>(false);\n\n  const hasError = !!error;\n  const isPasswordInput = type === 'password';\n  const toggledPasswordType = togglePassword ? 'text' : 'password';\n\n  const toggleSetPassword = () => setTogglePassword(prevState => !prevState);\n\n  const theme = useTheme();\n\n  return (\n    <div\n      className={INPUT_GROUP}\n      css={(theme: Theme) => ({\n        marginBottom: hasError ? '2px' : '20px',\n        width: '100%',\n        '&:focus-within label': {\n          color: theme.general.primaryColor,\n        },\n        ...wrapperCSS,\n      })}\n    >\n      {label && (\n        <InputLabel htmlFor={props.id} isRequired={props.required} markInvalid={props.markInvalid}>\n          {label}\n        </InputLabel>\n      )}\n\n      <div css={{marginBottom: hasError && '8px', position: 'relative'}}>\n        <input\n          className={INPUT_CLASSNAME}\n          css={(theme: Theme) => inputStyle(theme, props, hasError)}\n          ref={ref}\n          type={isPasswordInput ? toggledPasswordType : type}\n          aria-required={props.required}\n          {...filterInputProps(props)}\n        />\n\n        {hasError && !isPasswordInput && (\n          <ErrorIcon css={centerInputAction} width={16} height={16} aria-hidden=\"true\" />\n        )}\n\n        {isPasswordInput && (\n          <button\n            type=\"button\"\n            data-uie-name={!togglePassword ? 'do-show-password' : 'do-hide-password'}\n            css={{...centerInputAction, background: 'transparent', border: 'none', cursor: 'pointer', padding: 0}}\n            onClick={toggleSetPassword}\n            title=\"Toggle password visibility\"\n            aria-controls={props.id}\n            aria-expanded={togglePassword}\n          >\n            {togglePassword ? <HideIcon /> : <ShowIcon />}\n          </button>\n        )}\n      </div>\n\n      {!hasError && helperText && (\n        <p\n          css={(theme: Theme) => ({\n            fontSize: '12px',\n            fontWeight: 400,\n            color: theme.Input.placeholderColor,\n            marginTop: 8,\n          })}\n        >\n          {helperText}\n        </p>\n      )}\n\n      {error}\n    </div>\n  );\n});\n"],"mappings":"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"}

package/src/Form/InputBlock.js

@@ -1,38 +1,17 @@
 "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
- *
- * 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/.
- *
- */
-
-/** @jsx jsx */
-
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 var inputBlockStyle = function inputBlockStyle(props) {
   var _ref;
   return _ref = {
@@ -40,15 +19,15 @@ var inputBlockStyle = function inputBlockStyle(props) {
     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), {
+  }, _defineProperty(_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), {
+  }), _defineProperty(_ref, ".".concat(_Input.INPUT_GROUP), {
     marginBottom: 0
   }), _ref;
 };
 var InputBlock = function InputBlock(props) {
-  return (0, _react2.jsx)("div", (0, _extends2["default"])({
+  return (0, _react2.jsx)("div", _extends({
     css: inputBlockStyle(props)
   }, props));
 };

package/src/Form/InputBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputBlock.js","names":["inputBlockStyle","props","backgroundColor","COLOR","GRAY_LIGHTEN_88","borderRadius","boxShadow","WHITE","marginBottom","INPUT_CLASSNAME","INPUT_SUBMIT_COMBO_CLASSNAME","marginTop","INPUT_GROUP","InputBlock"],"sources":["InputBlock.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 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"],"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,eAAsD,CAAGC,KAAK;EAAA;EAAA;IAClEC,eAAe,EAAEC,eAAK,CAACC,eAAe;IACtCC,YAAY,EAAE,KAAK;IACnBC,SAAS,8BAAuBH,eAAK,CAACI,KAAK,mCAAyBJ,eAAK,CAACI,KAAK,CAAE;IACjFC,YAAY,EAAE;EAAM,qDACfC,sBAAe,gBAAMC,8CAA4B,GAAK;IACzDF,YAAY,EAAE,gBAAgB;IAC9BG,SAAS,EAAE;EACb,CAAC,qDACIC,kBAAW,GAAK;IACnBJ,YAAY,EAAE;EAChB,CAAC;AAAA,CACD;AAEK,IAAMK,UAAU,GAAG,SAAbA,UAAU,CAAIZ,KAAsB;EAAA,OAAK;IAAK,GAAG,EAAED,eAAe,CAACC,KAAK;EAAE,GAAKA,KAAK,EAAI;AAAA;AAAC"}
+{"version":3,"file":"InputBlock.js","names":["inputBlockStyle","props","backgroundColor","COLOR","GRAY_LIGHTEN_88","borderRadius","boxShadow","WHITE","marginBottom","INPUT_CLASSNAME","INPUT_SUBMIT_COMBO_CLASSNAME","marginTop","INPUT_GROUP","InputBlock"],"sources":["InputBlock.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 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"],"mappings":";;;;;;AAoBA;AACA;AAEA;AACA;AACA;AAAgE;AAAA;AAAA;AAIhE,IAAMA,eAAsD,GAAG,SAAzDA,eAAsD,CAAGC,KAAK;EAAA;EAAA;IAClEC,eAAe,EAAEC,eAAK,CAACC,eAAe;IACtCC,YAAY,EAAE,KAAK;IACnBC,SAAS,8BAAuBH,eAAK,CAACI,KAAK,mCAAyBJ,eAAK,CAACI,KAAK,CAAE;IACjFC,YAAY,EAAE;EAAM,oCACfC,sBAAe,gBAAMC,8CAA4B,GAAK;IACzDF,YAAY,EAAE,gBAAgB;IAC9BG,SAAS,EAAE;EACb,CAAC,oCACIC,kBAAW,GAAK;IACnBJ,YAAY,EAAE;EAChB,CAAC;AAAA,CACD;AAEK,IAAMK,UAAU,GAAG,SAAbA,UAAU,CAAIZ,KAAsB;EAAA,OAAK;IAAK,GAAG,EAAED,eAAe,CAACC,KAAK;EAAE,GAAKA,KAAK,EAAI;AAAA;AAAC"}

package/src/Form/InputLabel.js

@@ -1,23 +1,24 @@
 "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"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var 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"])({
+    props = _objectWithoutProperties(_ref, _excluded);
+  return (0, _react.jsx)("label", _extends({
     htmlFor: htmlFor,
     css: function css(theme) {
       return {

package/src/Form/InputLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputLabel.js","names":["InputLabel","htmlFor","markInvalid","isRequired","children","props","theme","fontSize","fontWeight","lineHeight","color","COLOR_V2","RED_LIGHT_500","Input","labelColor","marginLeft"],"sources":["InputLabel.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 {jsx} from '@emotion/react';\nimport {COLOR_V2} from '../Identity';\nimport {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"],"mappings":";;;;;;;;AAoBA;AAAmC;AACnC;AAEA;AAA2C;AAS3C,IAAMA,UAA+B,GAAG,SAAlCA,UAA+B;EAAA,IAAKC,OAAO,QAAPA,OAAO;IAAEC,WAAW,QAAXA,WAAW;IAAEC,UAAU,QAAVA,UAAU;IAAEC,QAAQ,QAARA,QAAQ;IAAKC,KAAK;EAAA,OAC5F;IACE,OAAO,EAAEJ,OAAQ;IACjB,GAAG,EAAE,aAACK,KAAY;MAAA,OAAM;QACtBC,QAAQ,EAAE,MAAM;QAChBC,UAAU,EAAE,GAAG;QACfC,UAAU,EAAE,MAAM;QAClBC,KAAK,EAAER,WAAW,GAAGS,kBAAQ,CAACC,aAAa,GAAGN,KAAK,CAACO,KAAK,CAACC;MAC5D,CAAC;IAAA;EAAE,GACCT,KAAK,GAERD,QAAQ,EAERD,UAAU,IAAI;IAAM,GAAG,+BAAE;MAACI,QAAQ,EAAE,MAAM;MAAEQ,UAAU,EAAE,KAAK;MAAEL,KAAK,EAAEC,kBAAQ,CAACC;IAAa,CAAC;EAAC,OAAS,CAClG;AAAA,CACT;AAAC,eAEaZ,UAAU;AAAA"}
+{"version":3,"file":"InputLabel.js","names":["InputLabel","htmlFor","markInvalid","isRequired","children","props","theme","fontSize","fontWeight","lineHeight","color","COLOR_V2","RED_LIGHT_500","Input","labelColor","marginLeft"],"sources":["InputLabel.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 {jsx} from '@emotion/react';\nimport {COLOR_V2} from '../Identity';\nimport {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"],"mappings":";;;;;;AAoBA;AACA;AAEA;AAA2C;AAAA;AAAA;AAAA;AAAA;AAS3C,IAAMA,UAA+B,GAAG,SAAlCA,UAA+B;EAAA,IAAKC,OAAO,QAAPA,OAAO;IAAEC,WAAW,QAAXA,WAAW;IAAEC,UAAU,QAAVA,UAAU;IAAEC,QAAQ,QAARA,QAAQ;IAAKC,KAAK;EAAA,OAC5F;IACE,OAAO,EAAEJ,OAAQ;IACjB,GAAG,EAAE,aAACK,KAAY;MAAA,OAAM;QACtBC,QAAQ,EAAE,MAAM;QAChBC,UAAU,EAAE,GAAG;QACfC,UAAU,EAAE,MAAM;QAClBC,KAAK,EAAER,WAAW,GAAGS,kBAAQ,CAACC,aAAa,GAAGN,KAAK,CAACO,KAAK,CAACC;MAC5D,CAAC;IAAA;EAAE,GACCT,KAAK,GAERD,QAAQ,EAERD,UAAU,IAAI;IAAM,GAAG,+BAAE;MAACI,QAAQ,EAAE,MAAM;MAAEQ,UAAU,EAAE,KAAK;MAAEL,KAAK,EAAEC,kBAAQ,CAACC;IAAa,CAAC;EAAC,OAAS,CAClG;AAAA,CACT;AAAC,eAEaZ,UAAU;AAAA"}

package/src/Form/InputSubmitCombo.js

@@ -1,25 +1,25 @@
 "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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var 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"])({
+    props = _objectWithoutProperties(_ref, _excluded);
+  return (0, _react.jsx)("div", _extends({
     className: INPUT_SUBMIT_COMBO_CLASSNAME,
     css: function css(theme) {
       var _objectSpread2;
@@ -27,16 +27,16 @@ var InputSubmitCombo = function InputSubmitCombo(_ref) {
         '&:focus-within': {
           boxShadow: "0 0 0 1px ".concat(_Identity.COLOR_V2.BLUE)
         }
-      }, (0, _defineProperty2["default"])(_objectSpread2, ".".concat(_Input.INPUT_GROUP), {
+      }, _defineProperty(_objectSpread2, ".".concat(_Input.INPUT_GROUP), {
         flexGrow: 1
-      }), (0, _defineProperty2["default"])(_objectSpread2, ".".concat(_Input.INPUT_CLASSNAME), {
+      }), _defineProperty(_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));
+      }), _defineProperty(_objectSpread2, "alignItems", 'center'), _defineProperty(_objectSpread2, "display", 'flex'), _defineProperty(_objectSpread2, "height", '49px'), _defineProperty(_objectSpread2, "justifyContent", 'space-between'), _defineProperty(_objectSpread2, "marginBottom", '4px'), _defineProperty(_objectSpread2, "paddingLeft", 0), _objectSpread2));
     }
   }, props), children);
 };

package/src/Form/InputSubmitCombo.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputSubmitCombo.js","names":["INPUT_SUBMIT_COMBO_CLASSNAME","InputSubmitCombo","children","props","theme","inputStyle","boxShadow","COLOR_V2","BLUE","INPUT_GROUP","flexGrow","INPUT_CLASSNAME","margin","padding"],"sources":["InputSubmitCombo.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {jsx} from '@emotion/react';\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"],"mappings":";;;;;;;;;;AAoBA;AAEA;AACA;AAAqC;AAAA;AAAA;AAK9B,IAAMA,4BAA4B,GAAG,kBAAkB;AAAC;AAExD,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB;EAAA,IAAKC,QAAQ,QAARA,QAAQ;IAAKC,KAAK;EAAA,OAClD;IACE,SAAS,EAAEH,4BAA6B;IACxC,GAAG,EAAE,aAACI,KAAY;MAAA;MAAA,uCACb,IAAAC,iBAAU,EAACD,KAAK,EAAED,KAAK,CAAC;QAC3B,gBAAgB,EAAE;UAChBG,SAAS,sBAAeC,kBAAQ,CAACC,IAAI;QACvC;MAAC,+DACIC,kBAAW,GAAK;QACnBC,QAAQ,EAAE;MACZ,CAAC,+DACIC,sBAAe,GAAK;QACvB,gCAAgC,EAAE;UAChCL,SAAS,EAAE;QACb,CAAC;QACDA,SAAS,EAAE,MAAM;QACjBM,MAAM,EAAE,WAAW;QACnBC,OAAO,EAAE;MACX,CAAC,kEACW,QAAQ,+DACX,MAAM,8DACP,MAAM,sEACE,eAAe,oEACjB,KAAK,mEACN,CAAC;IAAA;EACb,GACCV,KAAK,GAERD,QAAQ,CACL;AAAA,CACP;AAAC"}
+{"version":3,"file":"InputSubmitCombo.js","names":["INPUT_SUBMIT_COMBO_CLASSNAME","InputSubmitCombo","children","props","theme","inputStyle","boxShadow","COLOR_V2","BLUE","INPUT_GROUP","flexGrow","INPUT_CLASSNAME","margin","padding"],"sources":["InputSubmitCombo.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {jsx} from '@emotion/react';\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"],"mappings":";;;;;;AAoBA;AAEA;AACA;AAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAK9B,IAAMA,4BAA4B,GAAG,kBAAkB;AAAC;AAExD,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB;EAAA,IAAKC,QAAQ,QAARA,QAAQ;IAAKC,KAAK;EAAA,OAClD;IACE,SAAS,EAAEH,4BAA6B;IACxC,GAAG,EAAE,aAACI,KAAY;MAAA;MAAA,uCACb,IAAAC,iBAAU,EAACD,KAAK,EAAED,KAAK,CAAC;QAC3B,gBAAgB,EAAE;UAChBG,SAAS,sBAAeC,kBAAQ,CAACC,IAAI;QACvC;MAAC,8CACIC,kBAAW,GAAK;QACnBC,QAAQ,EAAE;MACZ,CAAC,8CACIC,sBAAe,GAAK;QACvB,gCAAgC,EAAE;UAChCL,SAAS,EAAE;QACb,CAAC;QACDA,SAAS,EAAE,MAAM;QACjBM,MAAM,EAAE,WAAW;QACnBC,OAAO,EAAE;MACX,CAAC,iDACW,QAAQ,8CACX,MAAM,6CACP,MAAM,qDACE,eAAe,mDACjB,KAAK,kDACN,CAAC;IAAA;EACb,GACCV,KAAK,GAERD,QAAQ,CACL;AAAA,CACP;AAAC"}

package/src/Form/RangeInput.js

@@ -1,20 +1,21 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var RangeInput = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
   var _ref$id = _ref.id,
     id = _ref$id === void 0 ? Math.random().toString() : _ref$id,
@@ -29,7 +30,7 @@ var RangeInput = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
     value = _ref$value === void 0 ? '0' : _ref$value,
     onChange = _ref.onChange,
     wrapperCSS = _ref.wrapperCSS,
-    inputProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+    inputProps = _objectWithoutProperties(_ref, _excluded);
   var minNum = Number(min);
   var maxNum = Number(max);
   var valueNum = Number(value);
@@ -44,7 +45,7 @@ var RangeInput = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
     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"])({
+  }, maxValueLabel), (0, _react.jsx)("input", _extends({
     ref: ref,
     css: function css(theme) {
       return (0, _RangeInput.getImageCropZoomInputStyles)(theme, backgroundSize);

package/src/Form/RangeInput.js.map

@@ -1 +1 @@
-{"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"}
+{"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;AAAA;AAAA;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"}