@wireapp/react-ui-kit 9.0.2 → 9.0.6

package/lib/Form/Input.js

@@ -1,22 +1,4 @@
 "use strict";
-/*
- * Wire
- * Copyright (C) 2018 Wire Swiss GmbH
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see http://www.gnu.org/licenses/.
- *
- */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -51,17 +33,32 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = exports.INPUT_GROUP = exports.INPUT_CLASSNAME = exports.inputStyle = void 0;
-/** @jsx jsx */
-const react_1 = require("@emotion/react");
-const react_2 = __importStar(require("react"));
-const util_1 = require("../util");
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * 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/.
+ *
+ */
+const react_1 = require("react");
+const React = __importStar(require("react"));
+const InputLabel_1 = require("./InputLabel");
 const Icon_1 = require("../Icon");
-const InputLabel_1 = __importDefault(require("./InputLabel"));
+const util_1 = require("../util");
 const inputStyle = (theme, { markInvalid = false, placeholderTextTransform = 'none', disabled = false }) => {
     const placeholderStyle = {
         color: theme.Input.placeholderColor,
@@ -107,28 +104,20 @@ const centerInputAction = {
     top: '50%',
     transform: 'translateY(-50%)',
 };
-exports.Input = react_2.default.forwardRef((_a, ref) => {
+exports.Input = React.forwardRef((_a, ref) => {
     var { type, label, error, helperText, wrapperCSS = {}, className = '' } = _a, props = __rest(_a, ["type", "label", "error", "helperText", "wrapperCSS", "className"]);
-    const [togglePassword, setTogglePassword] = (0, react_2.useState)(false);
+    const [togglePassword, setTogglePassword] = (0, react_1.useState)(false);
     const hasError = !!error;
     const isPasswordInput = type === 'password';
     const toggledPasswordType = togglePassword ? 'text' : 'password';
     const toggleSetPassword = () => setTogglePassword(prevState => !prevState);
-    const theme = (0, react_1.useTheme)();
-    return ((0, react_1.jsx)("div", { className: exports.INPUT_GROUP, css: (theme) => (Object.assign({ marginBottom: hasError ? '2px' : '20px', width: '100%', '&:focus-within label': {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: exports.INPUT_GROUP, css: (theme) => (Object.assign({ marginBottom: hasError ? '2px' : '20px', width: '100%', '&:focus-within label': {
                 color: theme.general.primaryColor,
-            } }, wrapperCSS)) },
-        label && ((0, react_1.jsx)(InputLabel_1.default, { htmlFor: props.id, isRequired: props.required, markInvalid: props.markInvalid }, label)),
-        (0, react_1.jsx)("div", { css: { marginBottom: hasError && '8px', position: 'relative' } },
-            (0, react_1.jsx)("input", Object.assign({ className: exports.INPUT_CLASSNAME, css: (theme) => (0, exports.inputStyle)(theme, props, hasError), ref: ref, type: isPasswordInput ? toggledPasswordType : type, "aria-required": props.required }, filterInputProps(props))),
-            hasError && !isPasswordInput && ((0, react_1.jsx)(Icon_1.ErrorIcon, { css: centerInputAction, width: 16, height: 16, "aria-hidden": "true" })),
-            isPasswordInput && ((0, react_1.jsx)("button", { type: "button", "data-uie-name": !togglePassword ? 'do-show-password' : 'do-hide-password', css: Object.assign(Object.assign({}, centerInputAction), { background: 'transparent', border: 'none', cursor: 'pointer', padding: 0 }), onClick: toggleSetPassword, title: "Toggle password visibility", "aria-controls": props.id, "aria-expanded": togglePassword }, togglePassword ? (0, react_1.jsx)(Icon_1.HideIcon, null) : (0, react_1.jsx)(Icon_1.ShowIcon, null)))),
-        !hasError && helperText && ((0, react_1.jsx)("p", { css: (theme) => ({
-                fontSize: '12px',
-                fontWeight: 400,
-                color: theme.Input.placeholderColor,
-                marginTop: 8,
-            }) }, helperText)),
-        error));
+            } }, wrapperCSS)) }, { children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, Object.assign({ htmlFor: props.id, isRequired: props.required, markInvalid: props.markInvalid }, { children: label }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: { marginBottom: hasError && '8px', position: 'relative' } }, { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ className: exports.INPUT_CLASSNAME, css: (theme) => (0, exports.inputStyle)(theme, props, hasError), ref: ref, type: isPasswordInput ? toggledPasswordType : type, "aria-required": props.required }, filterInputProps(props))), hasError && !isPasswordInput && ((0, jsx_runtime_1.jsx)(Icon_1.ErrorIcon, { css: centerInputAction, width: 16, height: 16, "aria-hidden": "true" })), isPasswordInput && ((0, jsx_runtime_1.jsx)("button", Object.assign({ type: "button", "data-uie-name": !togglePassword ? 'do-show-password' : 'do-hide-password', css: Object.assign(Object.assign({}, centerInputAction), { background: 'transparent', border: 'none', cursor: 'pointer', padding: 0 }), onClick: toggleSetPassword, title: "Toggle password visibility", "aria-controls": props.id, "aria-expanded": togglePassword }, { children: togglePassword ? (0, jsx_runtime_1.jsx)(Icon_1.HideIcon, {}) : (0, jsx_runtime_1.jsx)(Icon_1.ShowIcon, {}) })))] })), !hasError && helperText && ((0, jsx_runtime_1.jsx)("p", Object.assign({ css: (theme) => ({
+                    fontSize: '12px',
+                    fontWeight: 400,
+                    color: theme.Input.placeholderColor,
+                    marginTop: 8,
+                }) }, { children: helperText }))), error] })));
 });
-//# sourceMappingURL=Input.js.map
+exports.Input.displayName = 'Input';

package/lib/Form/InputBlock.d.ts

@@ -1,5 +1,4 @@
-/** @jsx jsx */
-import React from 'react';
-import { jsx } from '@emotion/react';
+import * as React from 'react';
 export declare type InputBlockProps<T = HTMLDivElement> = React.HTMLProps<T>;
-export declare const InputBlock: (props: InputBlockProps<HTMLDivElement>) => jsx.JSX.Element;
+export declare const InputBlock: (props: InputBlockProps<HTMLDivElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InputBlock.d.ts.map

package/lib/Form/InputBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputBlock.d.ts","sourceRoot":"","sources":["../../src/Form/InputBlock.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,oBAAY,eAAe,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAgBrE,eAAO,MAAM,UAAU,8FAA8E,CAAC"}

package/lib/Form/InputBlock.js

@@ -1,29 +1,11 @@
 "use strict";
-/*
- * 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/.
- *
- */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputBlock = void 0;
-const react_1 = require("@emotion/react");
-const Identity_1 = require("../Identity");
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Input_1 = require("./Input");
 const InputSubmitCombo_1 = require("./InputSubmitCombo");
-const inputBlockStyle = props => ({
+const Identity_1 = require("../Identity");
+const inputBlockStyle = _ => ({
     backgroundColor: Identity_1.COLOR.GRAY_LIGHTEN_88,
     borderRadius: '4px',
     boxShadow: `inset 16px 16px 0 ${Identity_1.COLOR.WHITE}, inset -16px -16px 0 ${Identity_1.COLOR.WHITE}`,
@@ -36,6 +18,5 @@ const inputBlockStyle = props => ({
         marginBottom: 0,
     },
 });
-const InputBlock = (props) => (0, react_1.jsx)("div", Object.assign({ css: inputBlockStyle(props) }, props));
+const InputBlock = (props) => (0, jsx_runtime_1.jsx)("div", Object.assign({ css: inputBlockStyle(props) }, props));
 exports.InputBlock = InputBlock;
-//# sourceMappingURL=InputBlock.js.map

package/lib/Form/InputLabel.d.ts

@@ -6,4 +6,5 @@ export interface InputLabelProps {
     isRequired?: boolean;
 }
 declare const InputLabel: FC<InputLabelProps>;
-export default InputLabel;
+export { InputLabel };
+//# sourceMappingURL=InputLabel.d.ts.map

package/lib/Form/InputLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputLabel.d.ts","sourceRoot":"","sources":["../../src/Form/InputLabel.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,EAAE,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAKpC,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAenC,CAAC;AAEF,OAAO,EAAC,UAAU,EAAC,CAAC"}

package/lib/Form/InputLabel.js

@@ -1,22 +1,4 @@
 "use strict";
-/*
- * Wire
- * Copyright (C) 2022 Wire Swiss GmbH
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see http://www.gnu.org/licenses/.
- *
- */
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -29,19 +11,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-/** @jsx jsx */
-const react_1 = require("@emotion/react");
+exports.InputLabel = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Identity_1 = require("../Identity");
 const InputLabel = (_a) => {
     var { htmlFor, markInvalid, isRequired, children } = _a, props = __rest(_a, ["htmlFor", "markInvalid", "isRequired", "children"]);
-    return ((0, react_1.jsx)("label", Object.assign({ htmlFor: htmlFor, css: (theme) => ({
+    return ((0, jsx_runtime_1.jsxs)("label", Object.assign({ htmlFor: htmlFor, css: (theme) => ({
             fontSize: '14px',
             fontWeight: 400,
             lineHeight: '16px',
             color: markInvalid ? Identity_1.COLOR_V2.RED_LIGHT_500 : theme.Input.labelColor,
-        }) }, props),
-        children,
-        isRequired && (0, react_1.jsx)("span", { css: { fontSize: '16px', marginLeft: '4px', color: Identity_1.COLOR_V2.RED_LIGHT_500 } }, "*")));
+        }) }, props, { children: [children, isRequired && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: { fontSize: '16px', marginLeft: '4px', color: Identity_1.COLOR_V2.RED_LIGHT_500 } }, { children: "*" }))] })));
 };
-exports.default = InputLabel;
-//# sourceMappingURL=InputLabel.js.map
+exports.InputLabel = InputLabel;

package/lib/Form/InputSubmitCombo.d.ts

@@ -1,6 +1,5 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
 import { InputProps } from './Input';
 export declare type InputSubmitComboProps<T = HTMLDivElement> = InputProps<T>;
 export declare const INPUT_SUBMIT_COMBO_CLASSNAME = "inputSubmitCombo";
-export declare const InputSubmitCombo: ({ children, ...props }: InputSubmitComboProps) => jsx.JSX.Element;
+export declare const InputSubmitCombo: ({ children, ...props }: InputSubmitComboProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InputSubmitCombo.d.ts.map

package/lib/Form/InputSubmitCombo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputSubmitCombo.d.ts","sourceRoot":"","sources":["../../src/Form/InputSubmitCombo.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAA+B,UAAU,EAAa,MAAM,SAAS,CAAC;AAK7E,oBAAY,qBAAqB,CAAC,CAAC,GAAG,cAAc,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC;AAEtE,eAAO,MAAM,4BAA4B,qBAAqB,CAAC;AAE/D,eAAO,MAAM,gBAAgB,2BAA0B,qBAAqB,qDA8B3E,CAAC"}

package/lib/Form/InputSubmitCombo.js

@@ -1,4 +1,18 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputSubmitCombo = exports.INPUT_SUBMIT_COMBO_CLASSNAME = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 /*
  * Wire
  * Copyright (C) 2018 Wire Swiss GmbH
@@ -17,27 +31,12 @@
  * along with this program. If not, see http://www.gnu.org/licenses/.
  *
  */
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputSubmitCombo = exports.INPUT_SUBMIT_COMBO_CLASSNAME = void 0;
-/** @jsx jsx */
-const react_1 = require("@emotion/react");
 const Input_1 = require("./Input");
 const Identity_1 = require("../Identity");
 exports.INPUT_SUBMIT_COMBO_CLASSNAME = 'inputSubmitCombo';
 const InputSubmitCombo = (_a) => {
     var { children } = _a, props = __rest(_a, ["children"]);
-    return ((0, react_1.jsx)("div", Object.assign({ className: exports.INPUT_SUBMIT_COMBO_CLASSNAME, css: (theme) => (Object.assign(Object.assign({}, (0, Input_1.inputStyle)(theme, props)), { '&:focus-within': {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: exports.INPUT_SUBMIT_COMBO_CLASSNAME, css: (theme) => (Object.assign(Object.assign({}, (0, Input_1.inputStyle)(theme, props)), { '&:focus-within': {
                 boxShadow: `0 0 0 1px ${Identity_1.COLOR_V2.BLUE}`,
             }, [`.${Input_1.INPUT_GROUP}`]: {
                 flexGrow: 1,
@@ -48,7 +47,6 @@ const InputSubmitCombo = (_a) => {
                 boxShadow: 'none',
                 margin: '0 8px 0 0',
                 padding: '0 0 0 16px',
-            }, alignItems: 'center', display: 'flex', height: '49px', justifyContent: 'space-between', marginBottom: '4px', paddingLeft: 0 })) }, props), children));
+            }, alignItems: 'center', display: 'flex', height: '49px', justifyContent: 'space-between', marginBottom: '4px', paddingLeft: 0 })) }, props, { children: children })));
 };
 exports.InputSubmitCombo = InputSubmitCombo;
-//# sourceMappingURL=InputSubmitCombo.js.map

package/lib/Form/RangeInput.d.ts

@@ -1,6 +1,5 @@
-/** @jsx jsx */
-import { CSSObject } from '@emotion/react';
 import { FC } from 'react';
+import { CSSObject } from '@emotion/react';
 import { TextProps } from '../Text';
 export interface RangeInputProps<T = HTMLInputElement> extends TextProps<T> {
     label?: string;
@@ -9,3 +8,4 @@ export interface RangeInputProps<T = HTMLInputElement> extends TextProps<T> {
     wrapperCSS?: CSSObject;
 }
 export declare const RangeInput: FC<RangeInputProps>;
+//# sourceMappingURL=RangeInput.d.ts.map

package/lib/Form/RangeInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeInput.d.ts","sourceRoot":"","sources":["../../src/Form/RangeInput.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,EAAE,EAAa,MAAM,OAAO,CAAC;AAErC,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAWzC,OAAO,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAElC,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA+C1C,CAAC"}

package/lib/Form/RangeInput.js

@@ -1,4 +1,18 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RangeInput = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 /*
  * Wire
  * Copyright (C) 2022 Wire Swiss GmbH
@@ -17,38 +31,18 @@
  * along with this program. If not, see http://www.gnu.org/licenses/.
  *
  */
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RangeInput = void 0;
-/** @jsx jsx */
-const react_1 = require("@emotion/react");
-const react_2 = require("react");
-const InputLabel_1 = __importDefault(require("./InputLabel"));
+const react_1 = require("react");
+const InputLabel_1 = require("./InputLabel");
 const RangeInput_styles_1 = require("./RangeInput.styles");
-exports.RangeInput = (0, react_2.forwardRef)((_a, ref) => {
+exports.RangeInput = (0, react_1.forwardRef)((_a, ref) => {
     var { id = Math.random().toString(), label, minValueLabel, maxValueLabel, min = '0', max = '100', value = '0', onChange, wrapperCSS } = _a, inputProps = __rest(_a, ["id", "label", "minValueLabel", "maxValueLabel", "min", "max", "value", "onChange", "wrapperCSS"]);
     const minNum = Number(min);
     const maxNum = Number(max);
     const valueNum = Number(value);
     const backgroundSize = `${((valueNum - minNum) * 100) / (maxNum - minNum)}% 100%`;
-    return ((0, react_1.jsx)("div", { css: wrapperCSS },
-        label && (0, react_1.jsx)(InputLabel_1.default, { htmlFor: id }, label),
-        (0, react_1.jsx)("div", { css: RangeInput_styles_1.rangeInputWrapperStyles },
-            minValueLabel && (0, react_1.jsx)("span", { css: (0, RangeInput_styles_1.getValueLabelStyles)(RangeInput_styles_1.ValueLabelPosition.LEFT) }, minValueLabel),
-            maxValueLabel && (0, react_1.jsx)("span", { css: (0, RangeInput_styles_1.getValueLabelStyles)(RangeInput_styles_1.ValueLabelPosition.RIGHT) }, maxValueLabel),
-            (0, react_1.jsx)("input", Object.assign({ ref: ref, css: (theme) => (0, RangeInput_styles_1.getImageCropZoomInputStyles)(theme, backgroundSize), id: id, name: id, min: min, max: max, value: value, onChange: onChange, type: "range" }, inputProps)))));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: wrapperCSS }, { children: [label && (0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, Object.assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: RangeInput_styles_1.rangeInputWrapperStyles }, { children: [minValueLabel && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: (0, RangeInput_styles_1.getValueLabelStyles)(RangeInput_styles_1.ValueLabelPosition.LEFT) }, { children: minValueLabel })), maxValueLabel && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: (0, RangeInput_styles_1.getValueLabelStyles)(RangeInput_styles_1.ValueLabelPosition.RIGHT) }, { children: maxValueLabel })), (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref, css: (theme) => {
+                            console.info('hallo', theme, backgroundSize);
+                            return (0, RangeInput_styles_1.getImageCropZoomInputStyles)(theme, backgroundSize);
+                        }, id: id, name: id, min: min, max: max, value: value, onChange: onChange, type: "range" }, inputProps))] }))] })));
 });
-//# sourceMappingURL=RangeInput.js.map
+exports.RangeInput.displayName = 'RangeInput';

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

@@ -7,3 +7,4 @@ export declare enum ValueLabelPosition {
     RIGHT = "right"
 }
 export declare const getValueLabelStyles: (position: ValueLabelPosition) => CSSObject;
+//# sourceMappingURL=RangeInput.styles.d.ts.map

package/lib/Form/RangeInput.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeInput.styles.d.ts","sourceRoot":"","sources":["../../src/Form/RangeInput.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAGzC,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAC;AAGhC,eAAO,MAAM,uBAAuB,EAAE,SAGrC,CAAC;AAKF,eAAO,MAAM,2BAA2B,UAAW,KAAK,kBAAkB,GAAG,MAAM,KAAK,MAAM,GAAG,KAAG,SA4BlG,CAAC;AAEH,oBAAY,kBAAkB;IAC5B,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,eAAO,MAAM,mBAAmB,aAAc,kBAAkB,KAAG,SAOjE,CAAC"}

package/lib/Form/RangeInput.styles.js

@@ -57,4 +57,3 @@ const getValueLabelStyles = (position) => ({
     [position]: '4px',
 });
 exports.getValueLabelStyles = getValueLabelStyles;
-//# sourceMappingURL=RangeInput.styles.js.map

package/lib/Form/RoundIconButton.d.ts

@@ -1,9 +1,9 @@
-/** @jsx jsx */
+import * as React from 'react';
 import { CSSObject } from '@emotion/react';
-import React from 'react';
-import { Theme } from '../Layout';
 import { ButtonProps } from './Button';
+import { Theme } from '../Layout';
 export interface RoundIconButtonProps<T = HTMLButtonElement> extends ButtonProps<T> {
 }
 export declare const roundIconButtonStyle: <T>(theme: Theme, props: RoundIconButtonProps<T>) => CSSObject;
 export declare const RoundIconButton: React.FC<RoundIconButtonProps>;
+//# sourceMappingURL=RoundIconButton.d.ts.map

package/lib/Form/RoundIconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoundIconButton.d.ts","sourceRoot":"","sources":["../../src/Form/RoundIconButton.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,WAAW,EAAiC,MAAM,UAAU,CAAC;AAIrE,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAC;AAGhC,MAAM,WAAW,oBAAoB,CAAC,CAAC,GAAG,iBAAiB,CAAE,SAAQ,WAAW,CAAC,CAAC,CAAC;CAAG;AAEtF,eAAO,MAAM,oBAAoB,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,KAAK,SAYtF,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAI1D,CAAC"}

package/lib/Form/RoundIconButton.js

@@ -1,22 +1,4 @@
 "use strict";
-/*
- * Wire
- * Copyright (C) 2018 Wire Swiss GmbH
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see http://www.gnu.org/licenses/.
- *
- */
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -30,20 +12,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RoundIconButton = exports.roundIconButtonStyle = void 0;
-/** @jsx jsx */
-const react_1 = require("@emotion/react");
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Button_1 = require("./Button");
 const Identity_1 = require("../Identity");
 const Misc_1 = require("../Misc/");
-const Button_1 = require("./Button");
 const roundIconButtonStyle = (theme, props) => (Object.assign(Object.assign({}, (0, Button_1.buttonStyle)(theme, props)), { alignItems: 'center', borderRadius: '50%', display: 'flex', height: `${props.size}px`, justifyContent: 'center', lineHeight: 'initial', margin: '0 auto', minWidth: `${props.size}px`, padding: 0, width: `${props.size}px` }));
 exports.roundIconButtonStyle = roundIconButtonStyle;
 const RoundIconButton = (_a) => {
     var { children } = _a, props = __rest(_a, ["children"]);
-    return ((0, react_1.jsx)("button", Object.assign({ css: (theme) => (0, exports.roundIconButtonStyle)(theme, props) }, (0, Button_1.filterButtonProps)(props)), (0, Misc_1.childrenWithDefaultProps)({ children, defaultProps: { color: Identity_1.COLOR.WHITE } })));
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ css: (theme) => (0, exports.roundIconButtonStyle)(theme, props) }, (0, Button_1.filterButtonProps)(props), { children: (0, Misc_1.childrenWithDefaultProps)({ children, defaultProps: { color: Identity_1.COLOR.WHITE } }) })));
 };
 exports.RoundIconButton = RoundIconButton;
 exports.RoundIconButton.defaultProps = {
     backgroundColor: Identity_1.COLOR.BLUE,
     size: 32,
 };
-//# sourceMappingURL=RoundIconButton.js.map

package/lib/Form/Select.d.ts

@@ -1,7 +1,6 @@
-/** @jsx jsx */
-import { CSSObject, jsx } from '@emotion/react';
 import { ReactElement } from 'react';
-import { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager';
+import { CSSObject } from '@emotion/react';
+import type { StateManagerProps } from 'react-select/dist/declarations/src/stateManager';
 export declare type Option = {
     value: string | number;
     label: string;
@@ -21,5 +20,6 @@ interface SelectProps<IsMulti extends boolean> extends StateManagerProps<Option,
     required?: boolean;
     isMulti?: IsMulti;
 }
-export declare const Select: <IsMulti extends boolean = false>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, markInvalid, required, ...props }: SelectProps<IsMulti>) => jsx.JSX.Element;
+export declare const Select: <IsMulti extends boolean = false>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, markInvalid, required, ...props }: SelectProps<IsMulti>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=Select.d.ts.map

package/lib/Form/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Form/Select.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAC,SAAS,EAAW,MAAM,gBAAgB,CAAC;AAEnD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,iDAAiD,CAAC;AAevF,oBAAY,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,UAAU,WAAW,CAAC,OAAO,SAAS,OAAO,CAAE,SAAQ,iBAAiB,CAAC,MAAM,EAAE,OAAO,CAAC;IACvF,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,MAAM,qOAkElB,CAAC"}

package/lib/Form/Select.js

@@ -1,22 +1,4 @@
 "use strict";
-/*
- * Wire
- * Copyright (C) 2018 Wire Swiss GmbH
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see http://www.gnu.org/licenses/.
- *
- */
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -33,31 +15,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
-/** @jsx jsx */
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("@emotion/react");
-const react_2 = require("@emotion/react");
 const react_select_1 = __importDefault(require("react-select"));
-const SelectStyles_1 = require("./SelectStyles");
+const InputLabel_1 = require("./InputLabel");
 const SelectComponents_1 = require("./SelectComponents");
-const InputLabel_1 = __importDefault(require("./InputLabel"));
+const SelectStyles_1 = require("./SelectStyles");
 const Select = (_a) => {
     var { id, label, error, helperText, disabled = false, dataUieName, options, isMulti, wrapperCSS = {}, markInvalid = false, required = false } = _a, props = __rest(_a, ["id", "label", "error", "helperText", "disabled", "dataUieName", "options", "isMulti", "wrapperCSS", "markInvalid", "required"]);
-    const theme = (0, react_2.useTheme)();
+    const theme = (0, react_1.useTheme)();
     const hasError = !!error;
-    return ((0, react_1.jsx)("div", { css: (theme) => (Object.assign({ marginBottom: markInvalid ? '2px' : '20px', width: '100%', '&:focus-within label': {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: (theme) => (Object.assign({ marginBottom: markInvalid ? '2px' : '20px', width: '100%', '&:focus-within label': {
                 color: theme.general.primaryColor,
-            } }, wrapperCSS)), "data-uie-name": dataUieName },
-        label && ((0, react_1.jsx)(InputLabel_1.default, { htmlFor: id, markInvalid: markInvalid, isRequired: required }, label)),
-        (0, react_1.jsx)(react_select_1.default, Object.assign({ id: id, styles: (0, SelectStyles_1.customStyles)(theme, markInvalid), components: {
-                SelectContainer: SelectComponents_1.SelectContainer,
-                DropdownIndicator: SelectComponents_1.DropdownIndicator,
-                Option: (0, SelectComponents_1.CustomOption)(dataUieName),
-                Menu: (0, SelectComponents_1.Menu)(dataUieName),
-                ValueContainer: SelectComponents_1.ValueContainer,
-                IndicatorsContainer: SelectComponents_1.IndicatorsContainer,
-            }, tabIndex: -1, isDisabled: disabled, hideSelectedOptions: false, isSearchable: false, isClearable: false, closeMenuOnSelect: !isMulti, isMulti: isMulti, options: options }, props)),
-        !hasError && helperText && ((0, react_1.jsx)("p", { css: (theme) => ({ fontSize: '12px', fontWeight: 400, color: theme.Input.labelColor, marginTop: 8 }) }, helperText)),
-        error));
+            } }, wrapperCSS)), "data-uie-name": dataUieName }, { children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, Object.assign({ htmlFor: id, markInvalid: markInvalid, isRequired: required }, { children: label }))), (0, jsx_runtime_1.jsx)(react_select_1.default, Object.assign({ id: id, styles: (0, SelectStyles_1.customStyles)(theme, markInvalid), components: {
+                    SelectContainer: SelectComponents_1.SelectContainer,
+                    DropdownIndicator: SelectComponents_1.DropdownIndicator,
+                    Option: (0, SelectComponents_1.CustomOption)(dataUieName),
+                    Menu: (0, SelectComponents_1.Menu)(dataUieName),
+                    ValueContainer: SelectComponents_1.ValueContainer,
+                    IndicatorsContainer: SelectComponents_1.IndicatorsContainer,
+                }, tabIndex: -1, isDisabled: disabled, hideSelectedOptions: false, isSearchable: false, isClearable: false, closeMenuOnSelect: !isMulti, isMulti: isMulti, options: options }, props)), !hasError && helperText && ((0, jsx_runtime_1.jsx)("p", Object.assign({ css: (theme) => ({ fontSize: '12px', fontWeight: 400, color: theme.Input.labelColor, marginTop: 8 }) }, { children: helperText }))), error] })));
 };
 exports.Select = Select;
-//# sourceMappingURL=Select.js.map

package/lib/Form/SelectComponents.d.ts

@@ -1,13 +1,10 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { OptionProps, ValueContainerProps } from 'react-select';
-import { MenuProps } from 'react-select/dist/declarations/src/components/Menu';
-import { IndicatorsContainerProps } from 'react-select/dist/declarations/src/components/containers';
+import { ContainerProps, DropdownIndicatorProps, OptionProps, ValueContainerProps, IndicatorsContainerProps, MenuProps } from 'react-select';
 import { Option } from './Select';
-export declare const SelectContainer: (props: any) => jsx.JSX.Element;
-export declare const DropdownIndicator: (props: any) => jsx.JSX.Element;
-export declare const CustomOption: (dataUieName: string) => (props: OptionProps<Option>) => jsx.JSX.Element;
-export declare const Menu: (dataUieName: string) => (props: MenuProps) => jsx.JSX.Element;
+export declare const SelectContainer: (props: ContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DropdownIndicator: (props: DropdownIndicatorProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CustomOption: (dataUieName: string) => (props: OptionProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Menu: (dataUieName: string) => (props: MenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const renderValue: (value: any) => any;
-export declare const ValueContainer: ({ children, ...restProps }: ValueContainerProps<Option>) => jsx.JSX.Element;
-export declare const IndicatorsContainer: ({ children, ...restProps }: IndicatorsContainerProps<Option>) => jsx.JSX.Element;
+export declare const ValueContainer: ({ children, ...restProps }: ValueContainerProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const IndicatorsContainer: ({ children, ...restProps }: IndicatorsContainerProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SelectComponents.d.ts.map

package/lib/Form/SelectComponents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectComponents.d.ts","sourceRoot":"","sources":["../../src/Form/SelectComponents.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAEL,cAAc,EACd,sBAAsB,EACtB,WAAW,EACX,mBAAmB,EACnB,wBAAwB,EACxB,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAKhC,eAAO,MAAM,eAAe,UAAW,cAAc,qDAMpD,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,qDAS9D,CAAC;AAGF,eAAO,MAAM,YAAY,gBAAiB,MAAM,aAAa,YAAY,MAAM,CAAC,qDA+C/E,CAAC;AAGF,eAAO,MAAM,IAAI,gBAAiB,MAAM,aAAa,SAAS,qDAc7D,CAAC;AAEF,eAAO,MAAM,WAAW,qBAqBvB,CAAC;AAEF,eAAO,MAAM,cAAc,+BAA8B,oBAAoB,MAAM,CAAC,qDAInF,CAAC;AAEF,eAAO,MAAM,mBAAmB,+BAA8B,yBAAyB,MAAM,CAAC,qDAW7F,CAAC"}