@wireapp/react-ui-kit 9.0.0 → 9.0.1

package/lib/Form/ErrorMessage.js

@@ -0,0 +1,54 @@
+"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)
+        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.ErrorMessage = exports.filterErrorMessageProps = exports.errorMessageStyle = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const Identity_1 = require("../Identity");
+const Layout_1 = require("../Layout");
+const Text_1 = require("../Text");
+const util_1 = require("../util");
+const errorMessageStyle = (theme, _a) => {
+    var { justify = 'flex-start', align = 'center' } = _a, props = __rest(_a, ["justify", "align"]);
+    return (Object.assign(Object.assign({}, (0, Layout_1.flexBoxStyle)(Object.assign({ align, justify }, props))), { a: Object.assign({}, (0, Text_1.linkStyle)(theme, Object.assign({ bold: false, fontSize: '12px', textTransform: 'none' }, props))), marginBottom: '12px' }));
+};
+exports.errorMessageStyle = errorMessageStyle;
+const filterErrorMessageProps = (props) => {
+    return (0, util_1.filterProps)((0, Layout_1.filterFlexBoxProps)(props), []);
+};
+exports.filterErrorMessageProps = filterErrorMessageProps;
+const ErrorMessage = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return ((0, react_1.jsx)(Layout_1.FlexBox, Object.assign({ css: (theme) => (0, exports.errorMessageStyle)(theme, props) }, props),
+        (0, react_1.jsx)(Text_1.Text, { color: Identity_1.COLOR_V2.RED_LIGHT_500, fontSize: '12px', css: { fontWeight: 400 } }, children)));
+};
+exports.ErrorMessage = ErrorMessage;
+//# sourceMappingURL=ErrorMessage.js.map

package/lib/Form/ErrorMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.js","sourceRoot":"","sources":["../../src/Form/ErrorMessage.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAA8C;AAE9C,0CAAqC;AACrC,sCAAyF;AACzF,kCAAwC;AACxC,kCAAoC;AAI7B,MAAM,iBAAiB,GAAgE,CAC5F,KAAK,EACL,EAAoD,EACpD,EAAE;QADF,EAAC,OAAO,GAAG,YAAY,EAAE,KAAK,GAAG,QAAQ,OAAW,EAAN,KAAK,cAAnD,oBAAoD,CAAD;IAChD,OAAA,iCACA,IAAA,qBAAY,kBAAE,KAAK,EAAE,OAAO,IAAK,KAAK,EAAE,KAC3C,CAAC,oBACI,IAAA,gBAAS,EAAC,KAAK,kBAAG,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,IAAK,KAAK,EAAE,GAEvF,YAAY,EAAE,MAAM,IACpB,CAAA;CAAA,CAAC;AATU,QAAA,iBAAiB,qBAS3B;AAEI,MAAM,uBAAuB,GAAG,CAAC,KAAwB,EAAE,EAAE;IAClE,OAAO,IAAA,kBAAW,EAAC,IAAA,2BAAkB,EAAC,KAAK,CAAsB,EAAE,EAAE,CAAC,CAAC;AACzE,CAAC,CAAC;AAFW,QAAA,uBAAuB,2BAElC;AAEK,MAAM,YAAY,GAAG,CAAC,EAAuC,EAAE,EAAE;QAA3C,EAAC,QAAQ,OAA8B,EAAzB,KAAK,cAAnB,YAAoB,CAAD;IAAyB,OAAA,CACvE,iBAAC,gBAAO,kBAAC,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,IAAA,yBAAiB,EAAC,KAAK,EAAE,KAAK,CAAC,IAAM,KAAK;QACxE,iBAAC,WAAI,IAAC,KAAK,EAAE,mBAAQ,CAAC,aAAa,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,EAAC,UAAU,EAAE,GAAG,EAAC,IAC1E,QAAQ,CACJ,CACC,CACX,CAAA;CAAA,CAAC;AANW,QAAA,YAAY,gBAMvB"}

package/lib/Form/Form.js

@@ -0,0 +1,32 @@
+"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.Form = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const Form = (props) => ((0, react_1.jsx)("form", Object.assign({ css: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        marginBottom: 0,
+        width: '100%',
+    } }, props)));
+exports.Form = Form;
+//# sourceMappingURL=Form.js.map

package/lib/Form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../src/Form/Form.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAEH,eAAe;AACf,0CAAmC;AAG5B,MAAM,IAAI,GAAG,CAAC,KAAuC,EAAE,EAAE,CAAC,CAC/D,yCACE,GAAG,EAAE;QACH,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,cAAc,EAAE,eAAe;QAC/B,YAAY,EAAE,CAAC;QACf,KAAK,EAAE,MAAM;KACd,IACG,KAAK,EACT,CACH,CAAC;AAXW,QAAA,IAAI,QAWf"}

package/lib/Form/Input.js

@@ -0,0 +1,134 @@
+"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);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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.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 Icon_1 = require("../Icon");
+const InputLabel_1 = __importDefault(require("./InputLabel"));
+const inputStyle = (theme, { markInvalid = false, placeholderTextTransform = 'none', disabled = false }) => {
+    const placeholderStyle = {
+        color: theme.Input.placeholderColor,
+        fontSize: '16px',
+        textTransform: placeholderTextTransform,
+    };
+    return {
+        '&::-moz-placeholder': Object.assign(Object.assign({}, placeholderStyle), { opacity: 1 }),
+        '&::-ms-input-placeholder': Object.assign({}, placeholderStyle),
+        '&::-webkit-input-placeholder': Object.assign({}, placeholderStyle),
+        '&:hover': {
+            boxShadow: !disabled && `0 0 0 1px ${theme.Input.borderHover}`,
+        },
+        '&:focus-visible, &:focus, &:active': {
+            boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,
+        },
+        '&:invalid:not(:focus, :hover)': !markInvalid
+            ? {
+                boxShadow: `0 0 0 1px ${theme.Select.borderColor}`,
+            }
+            : {},
+        background: disabled ? theme.Input.backgroundColorDisabled : theme.Input.backgroundColor,
+        border: 'none',
+        borderRadius: '12px',
+        boxShadow: markInvalid ? `0 0 0 1px ${theme.general.dangerColor}` : `0 0 0 1px ${theme.Select.borderColor}`,
+        caretColor: theme.general.primaryColor,
+        color: theme.general.color,
+        fontWeight: 300,
+        height: '48px',
+        lineHeight: '24px',
+        outline: 'none',
+        padding: '0 16px',
+        width: '100%',
+    };
+};
+exports.inputStyle = inputStyle;
+exports.INPUT_CLASSNAME = 'wireinput';
+exports.INPUT_GROUP = 'input-group';
+const filterInputProps = (props) => (0, util_1.filterProps)(props, ['markInvalid', 'placeholderTextTransform']);
+const centerInputAction = {
+    position: 'absolute',
+    right: '16px',
+    top: '50%',
+    transform: 'translateY(-50%)',
+};
+exports.Input = react_2.default.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 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': {
+                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));
+});
+//# sourceMappingURL=Input.js.map

package/lib/Form/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/Form/Input.tsx"],"names":[],"mappings":"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"}

package/lib/Form/InputBlock.js

@@ -0,0 +1,41 @@
+"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 Input_1 = require("./Input");
+const InputSubmitCombo_1 = require("./InputSubmitCombo");
+const inputBlockStyle = props => ({
+    backgroundColor: Identity_1.COLOR.GRAY_LIGHTEN_88,
+    borderRadius: '4px',
+    boxShadow: `inset 16px 16px 0 ${Identity_1.COLOR.WHITE}, inset -16px -16px 0 ${Identity_1.COLOR.WHITE}`,
+    marginBottom: '16px',
+    [`.${Input_1.INPUT_CLASSNAME}, .${InputSubmitCombo_1.INPUT_SUBMIT_COMBO_CLASSNAME}`]: {
+        marginBottom: '1px !important',
+        marginTop: '0 !important',
+    },
+    [`.${Input_1.INPUT_GROUP}`]: {
+        marginBottom: 0,
+    },
+});
+const InputBlock = (props) => (0, react_1.jsx)("div", Object.assign({ css: inputBlockStyle(props) }, props));
+exports.InputBlock = InputBlock;
+//# sourceMappingURL=InputBlock.js.map

package/lib/Form/InputBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputBlock.js","sourceRoot":"","sources":["../../src/Form/InputBlock.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAIH,0CAA8C;AAE9C,0CAAkC;AAClC,mCAAqD;AACrD,yDAAgE;AAIhE,MAAM,eAAe,GAA0C,KAAK,CAAC,EAAE,CAAC,CAAC;IACvE,eAAe,EAAE,gBAAK,CAAC,eAAe;IACtC,YAAY,EAAE,KAAK;IACnB,SAAS,EAAE,qBAAqB,gBAAK,CAAC,KAAK,yBAAyB,gBAAK,CAAC,KAAK,EAAE;IACjF,YAAY,EAAE,MAAM;IACpB,CAAC,IAAI,uBAAe,MAAM,+CAA4B,EAAE,CAAC,EAAE;QACzD,YAAY,EAAE,gBAAgB;QAC9B,SAAS,EAAE,cAAc;KAC1B;IACD,CAAC,IAAI,mBAAW,EAAE,CAAC,EAAE;QACnB,YAAY,EAAE,CAAC;KAChB;CACF,CAAC,CAAC;AAEI,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE,CAAC,wCAAK,GAAG,EAAE,eAAe,CAAC,KAAK,CAAC,IAAM,KAAK,EAAI,CAAC;AAAzF,QAAA,UAAU,cAA+E"}

package/lib/Form/InputLabel.js

@@ -0,0 +1,47 @@
+"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)
+        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 });
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const Identity_1 = require("../Identity");
+const InputLabel = (_a) => {
+    var { htmlFor, markInvalid, isRequired, children } = _a, props = __rest(_a, ["htmlFor", "markInvalid", "isRequired", "children"]);
+    return ((0, react_1.jsx)("label", Object.assign({ htmlFor: htmlFor, css: (theme) => ({
+            fontSize: '14px',
+            fontWeight: 400,
+            lineHeight: '16px',
+            color: markInvalid ? Identity_1.COLOR_V2.RED_LIGHT_500 : theme.Input.labelColor,
+        }) }, props),
+        children,
+        isRequired && (0, react_1.jsx)("span", { css: { fontSize: '16px', marginLeft: '4px', color: Identity_1.COLOR_V2.RED_LIGHT_500 } }, "*")));
+};
+exports.default = InputLabel;
+//# sourceMappingURL=InputLabel.js.map

package/lib/Form/InputLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputLabel.js","sourceRoot":"","sources":["../../src/Form/InputLabel.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAAmC;AACnC,0CAAqC;AAWrC,MAAM,UAAU,GAAwB,CAAC,EAAsD,EAAE,EAAE;QAA1D,EAAC,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,OAAW,EAAN,KAAK,cAArD,oDAAsD,CAAD;IAAM,OAAA,CAClG,0CACE,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,CAAC;YACtB,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,GAAG;YACf,UAAU,EAAE,MAAM;YAClB,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,mBAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU;SACrE,CAAC,IACE,KAAK;QAER,QAAQ;QAER,UAAU,IAAI,2BAAM,GAAG,EAAE,EAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,mBAAQ,CAAC,aAAa,EAAC,QAAU,CAClG,CACT,CAAA;CAAA,CAAC;AAEF,kBAAe,UAAU,CAAC"}

package/lib/Form/InputSubmitCombo.js

@@ -0,0 +1,54 @@
+"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)
+        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': {
+                boxShadow: `0 0 0 1px ${Identity_1.COLOR_V2.BLUE}`,
+            }, [`.${Input_1.INPUT_GROUP}`]: {
+                flexGrow: 1,
+            }, [`.${Input_1.INPUT_CLASSNAME}`]: {
+                '&:focus, &:invalid:not(:focus)': {
+                    boxShadow: 'none',
+                },
+                boxShadow: 'none',
+                margin: '0 8px 0 0',
+                padding: '0 0 0 16px',
+            }, alignItems: 'center', display: 'flex', height: '49px', justifyContent: 'space-between', marginBottom: '4px', paddingLeft: 0 })) }, props), children));
+};
+exports.InputSubmitCombo = InputSubmitCombo;
+//# sourceMappingURL=InputSubmitCombo.js.map

package/lib/Form/InputSubmitCombo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputSubmitCombo.js","sourceRoot":"","sources":["../../src/Form/InputSubmitCombo.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAAmC;AAEnC,mCAA6E;AAC7E,0CAAqC;AAKxB,QAAA,4BAA4B,GAAG,kBAAkB,CAAC;AAExD,MAAM,gBAAgB,GAAG,CAAC,EAA2C,EAAE,EAAE;QAA/C,EAAC,QAAQ,OAAkC,EAA7B,KAAK,cAAnB,YAAoB,CAAD;IAA6B,OAAA,CAC/E,wCACE,SAAS,EAAE,oCAA4B,EACvC,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,iCAClB,IAAA,kBAAU,EAAC,KAAK,EAAE,KAAK,CAAC,KAC3B,gBAAgB,EAAE;gBAChB,SAAS,EAAE,aAAa,mBAAQ,CAAC,IAAI,EAAE;aACxC,EACD,CAAC,IAAI,mBAAW,EAAE,CAAC,EAAE;gBACnB,QAAQ,EAAE,CAAC;aACZ,EACD,CAAC,IAAI,uBAAe,EAAE,CAAC,EAAE;gBACvB,gCAAgC,EAAE;oBAChC,SAAS,EAAE,MAAM;iBAClB;gBACD,SAAS,EAAE,MAAM;gBACjB,MAAM,EAAE,WAAW;gBACnB,OAAO,EAAE,YAAY;aACtB,EACD,UAAU,EAAE,QAAQ,EACpB,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,KAAK,EACnB,WAAW,EAAE,CAAC,IACd,IACE,KAAK,GAER,QAAQ,CACL,CACP,CAAA;CAAA,CAAC;AA9BW,QAAA,gBAAgB,oBA8B3B"}

package/lib/Form/RangeInput.js

@@ -0,0 +1,54 @@
+"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)
+        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 RangeInput_styles_1 = require("./RangeInput.styles");
+exports.RangeInput = (0, react_2.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)))));
+});
+//# sourceMappingURL=RangeInput.js.map

package/lib/Form/RangeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeInput.js","sourceRoot":"","sources":["../../src/Form/RangeInput.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAA8C;AAC9C,iCAA4C;AAG5C,8DAAsC;AACtC,2DAK6B;AAShB,QAAA,UAAU,GAAwB,IAAA,kBAAU,EACvD,CACE,EAWC,EACD,GAAG,EACH,EAAE;QAbF,EACE,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,EAC7B,KAAK,EACL,aAAa,EACb,aAAa,EACb,GAAG,GAAG,GAAG,EACT,GAAG,GAAG,KAAK,EACX,KAAK,GAAG,GAAG,EACX,QAAQ,EACR,UAAU,OAEX,EADI,UAAU,cAVf,kGAWC,CADc;IAIf,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC3B,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC3B,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE/B,MAAM,cAAc,GAAG,GAAG,CAAC,CAAC,QAAQ,GAAG,MAAM,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,QAAiB,CAAC;IAE3F,OAAO,CACL,0BAAK,GAAG,EAAE,UAAU;QACjB,KAAK,IAAI,iBAAC,oBAAU,IAAC,OAAO,EAAE,EAAE,IAAG,KAAK,CAAc;QACvD,0BAAK,GAAG,EAAE,2CAAuB;YAC9B,aAAa,IAAI,2BAAM,GAAG,EAAE,IAAA,uCAAmB,EAAC,sCAAkB,CAAC,IAAI,CAAC,IAAG,aAAa,CAAQ;YAChG,aAAa,IAAI,2BAAM,GAAG,EAAE,IAAA,uCAAmB,EAAC,sCAAkB,CAAC,KAAK,CAAC,IAAG,aAAa,CAAQ;YAClG,0CACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,IAAA,+CAA2B,EAAC,KAAK,EAAE,cAAc,CAAC,EACzE,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,EAAE,EACR,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,OAAO,IACR,UAAU,EACd,CACE,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/lib/Form/RangeInput.styles.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RangeInput.styles.js","sourceRoot":"","sources":["../../src/Form/RangeInput.styles.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAIH,0CAAqC;AACrC,kCAAsC;AAEzB,QAAA,uBAAuB,GAAc;IAChD,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,MAAM;CAClB,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,yBAAyB,EAAE,qBAAqB,EAAE,cAAc,CAAC,CAAC;AAC1F,MAAM,eAAe,GAAG,CAAC,kCAAkC,EAAE,qBAAqB,EAAE,cAAc,CAAC,CAAC;AAE7F,MAAM,2BAA2B,GAAG,CAAC,KAAY,EAAE,cAAuC,EAAa,EAAE,CAAC,+BAC/G,OAAO,EAAE,OAAO,EAChB,oBAAoB,EAAE,MAAM,EAC5B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,KAAK,EACb,UAAU,EAAE,mBAAQ,CAAC,OAAO,EAC5B,YAAY,EAAE,KAAK,EACnB,eAAe,EAAE,mBAAmB,KAAK,CAAC,OAAO,CAAC,YAAY,KAAK,KAAK,CAAC,OAAO,CAAC,YAAY,GAAG,EAChG,cAAc,EAAE,cAAc,IAAI,SAAS,EAC3C,gBAAgB,EAAE,WAAW,IAE1B,IAAA,oBAAa,EAAC,cAAc,EAAE;IAC/B,oBAAoB,EAAE,MAAM;IAC5B,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,YAAY,EAAE,KAAK;IACnB,UAAU,EAAE,mBAAQ,CAAC,OAAO;IAC5B,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,MAAM;CAClB,CAAC,GAEC,IAAA,oBAAa,EAAC,eAAe,EAAE;IAChC,oBAAoB,EAAE,MAAM;IAC5B,SAAS,EAAE,MAAM;IACjB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,aAAa;CAC1B,CAAC,EACF,CAAC;AA5BU,QAAA,2BAA2B,+BA4BrC;AAEH,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,mCAAa,CAAA;IACb,qCAAe,CAAA;AACjB,CAAC,EAHW,kBAAkB,GAAlB,0BAAkB,KAAlB,0BAAkB,QAG7B;AAEM,MAAM,mBAAmB,GAAG,CAAC,QAA4B,EAAa,EAAE,CAAC,CAAC;IAC/E,aAAa,EAAE,MAAM;IACrB,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,MAAM;IAChB,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,UAAU;IACpB,CAAC,QAAQ,CAAC,EAAE,KAAK;CAClB,CAAC,CAAC;AAPU,QAAA,mBAAmB,uBAO7B"}

package/lib/Form/RoundIconButton.js

@@ -0,0 +1,49 @@
+"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)
+        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.RoundIconButton = exports.roundIconButtonStyle = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+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 } })));
+};
+exports.RoundIconButton = RoundIconButton;
+exports.RoundIconButton.defaultProps = {
+    backgroundColor: Identity_1.COLOR.BLUE,
+    size: 32,
+};
+//# sourceMappingURL=RoundIconButton.js.map

package/lib/Form/RoundIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoundIconButton.js","sourceRoot":"","sources":["../../src/Form/RoundIconButton.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAA8C;AAI9C,0CAAkC;AAElC,mCAAkD;AAClD,qCAAqE;AAI9D,MAAM,oBAAoB,GAAmE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,iCACjH,IAAA,oBAAW,EAAC,KAAK,EAAE,KAAK,CAAC,KAC5B,UAAU,EAAE,QAAQ,EACpB,YAAY,EAAE,KAAK,EACnB,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI,EACzB,cAAc,EAAE,QAAQ,EACxB,UAAU,EAAE,SAAS,EACrB,MAAM,EAAE,QAAQ,EAChB,QAAQ,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI,EAC3B,OAAO,EAAE,CAAC,EACV,KAAK,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI,IACxB,CAAC;AAZU,QAAA,oBAAoB,wBAY9B;AAEI,MAAM,eAAe,GAAmC,CAAC,EAAoB,EAAE,EAAE;QAAxB,EAAC,QAAQ,OAAW,EAAN,KAAK,cAAnB,YAAoB,CAAD;IAAM,OAAA,CACvF,2CAAQ,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,IAAA,4BAAoB,EAAC,KAAK,EAAE,KAAK,CAAC,IAAM,IAAA,0BAAiB,EAAC,KAAK,CAAC,GAC5F,IAAA,+BAAwB,EAA8B,EAAC,QAAQ,EAAE,YAAY,EAAE,EAAC,KAAK,EAAE,gBAAK,CAAC,KAAK,EAAC,EAAC,CAAC,CAC/F,CACV,CAAA;CAAA,CAAC;AAJW,QAAA,eAAe,mBAI1B;AAEF,uBAAe,CAAC,YAAY,GAAG;IAC7B,eAAe,EAAE,gBAAK,CAAC,IAAI;IAC3B,IAAI,EAAE,EAAE;CACT,CAAC"}

package/lib/Form/Select.js

@@ -0,0 +1,63 @@
+"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)
+        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.Select = void 0;
+/** @jsx jsx */
+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 SelectComponents_1 = require("./SelectComponents");
+const InputLabel_1 = __importDefault(require("./InputLabel"));
+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 hasError = !!error;
+    return ((0, react_1.jsx)("div", { 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));
+};
+exports.Select = Select;
+//# sourceMappingURL=Select.js.map