@wireapp/react-ui-kit 8.17.10 → 9.0.1

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

package/lib/Form/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/Form/Select.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAA8C;AAC9C,0CAAwC;AAExC,gEAAuC;AAIvC,iDAA4C;AAC5C,yDAO4B;AAE5B,8DAAsC;AAuB/B,MAAM,MAAM,GAAG,CAAkC,EAajC,EAAE,EAAE;QAb6B,EACtD,EAAE,EACF,KAAK,EACL,KAAK,EACL,UAAU,EACV,QAAQ,GAAG,KAAK,EAChB,WAAW,EACX,OAAO,EACP,OAAO,EACP,UAAU,GAAG,EAAE,EACf,WAAW,GAAG,KAAK,EACnB,QAAQ,GAAG,KAAK,OAEK,EADlB,KAAK,cAZ8C,gIAavD,CADS;IAER,MAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IACzB,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAK,CAAC;IAEzB,OAAO,CACL,0BACE,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,iBACrB,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAC1C,KAAK,EAAE,MAAM,EACb,sBAAsB,EAAE;gBACtB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;aAClC,IACE,UAAU,EACb,mBACa,WAAW;QAEzB,KAAK,IAAI,CACR,iBAAC,oBAAU,IAAC,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,IACpE,KAAK,CACK,CACd;QAED,iBAAC,sBAAW,kBACV,EAAE,EAAE,EAAE,EACN,MAAM,EAAE,IAAA,2BAAY,EAAC,KAAc,EAAE,WAAW,CAAiB,EACjE,UAAU,EAAE;gBACV,eAAe,EAAf,kCAAe;gBACf,iBAAiB,EAAjB,oCAAiB;gBACjB,MAAM,EAAE,IAAA,+BAAY,EAAC,WAAW,CAAC;gBACjC,IAAI,EAAE,IAAA,uBAAI,EAAC,WAAW,CAAC;gBACvB,cAAc,EAAd,iCAAc;gBACd,mBAAmB,EAAnB,sCAAmB;aACpB,EACD,QAAQ,EAAE,CAAC,CAAC,EACZ,UAAU,EAAE,QAAQ,EACpB,mBAAmB,EAAE,KAAK,EAC1B,YAAY,EAAE,KAAK,EACnB,WAAW,EAAE,KAAK,EAClB,iBAAiB,EAAE,CAAC,OAAO,EAC3B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,IACZ,KAAK,EACT;QAED,CAAC,QAAQ,IAAI,UAAU,IAAI,CAC1B,wBAAG,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,CAAC,EAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,SAAS,EAAE,CAAC,EAAC,CAAC,IACzG,UAAU,CACT,CACL;QAEA,KAAK,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAlEW,QAAA,MAAM,UAkEjB"}

package/lib/Form/SelectComponents.js

@@ -0,0 +1,119 @@
+"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 });
+exports.IndicatorsContainer = exports.ValueContainer = exports.renderValue = exports.Menu = exports.CustomOption = exports.DropdownIndicator = exports.SelectContainer = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const react_select_1 = require("react-select");
+const ArrowDown_1 = require("../Icon/ArrowDown");
+// SelectContainer
+const SelectContainer = props => {
+    return ((0, react_1.jsx)(react_select_1.components.SelectContainer, Object.assign({}, props),
+        (0, react_1.jsx)("div", { tabIndex: 0 }, props.children)));
+};
+exports.SelectContainer = SelectContainer;
+const DropdownIndicator = props => {
+    const { menuIsOpen } = props.selectProps;
+    return ((0, react_1.jsx)(react_select_1.components.DropdownIndicator, Object.assign({}, props),
+        (0, react_1.jsx)(ArrowDown_1.ArrowDown, { css: Object.assign({}, (menuIsOpen ? { transform: 'rotateX(180deg)', marginTop: 2 } : { marginTop: 4 })) })));
+};
+exports.DropdownIndicator = DropdownIndicator;
+// eslint-disable-next-line react/display-name
+const CustomOption = (dataUieName) => (props) => {
+    var _a;
+    const { children, data, isFocused, isMulti, isSelected, options } = props;
+    return ((0, react_1.jsx)(react_select_1.components.Option, Object.assign({}, props),
+        (0, react_1.jsx)("div", Object.assign({ css: Object.assign({}, (isMulti && {
+                display: 'grid',
+                gridTemplateAreas: `"checkbox label"
+                                ". description"`,
+                gridTemplateColumns: '22px 1fr',
+                columnGap: '10px',
+            })) }, (dataUieName && {
+            'data-uie-name': `option-${dataUieName}`,
+            'data-uie-value': (_a = options.find(option => option.label === children)) === null || _a === void 0 ? void 0 : _a.value,
+            'data-uie-selected': isSelected,
+        })),
+            isMulti && ((0, react_1.jsx)("input", { type: "checkbox", checked: isSelected, onChange: () => null, css: { gridArea: 'checkbox', width: 22, height: 22, cursor: 'pointer', placeSelf: 'center' } })),
+            (0, react_1.jsx)("div", { css: { gridArea: 'label', overflowWrap: 'break-word', overflow: 'hidden' } }, children),
+            data && data.description && ((0, react_1.jsx)("p", { css: (theme) => ({
+                    marginBottom: 0,
+                    fontSize: '14px',
+                    color: isSelected ? theme.Select.focusedDescriptionColor : theme.Input.labelColor,
+                    gridArea: 'description',
+                }) }, data.description)))));
+};
+exports.CustomOption = CustomOption;
+// eslint-disable-next-line react/display-name
+const Menu = (dataUieName) => (props) => {
+    const { children } = props;
+    return ((0, react_1.jsx)(react_select_1.components.Menu, Object.assign({}, props),
+        (0, react_1.jsx)("div", Object.assign({}, (dataUieName && {
+            'data-uie-name': `dropdown-${dataUieName}`,
+        })), children)));
+};
+exports.Menu = Menu;
+const renderValue = value => {
+    if (Array.isArray(value)) {
+        const currentValue = (i) => value[i].props.children;
+        return ((0, react_1.jsx)("div", { css: {
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                minWidth: 0,
+                paddingRight: 14,
+                gridArea: '1/1/2/3',
+            } }, currentValue(0)));
+    }
+    return value;
+};
+exports.renderValue = renderValue;
+const ValueContainer = (_a) => {
+    var { children } = _a, restProps = __rest(_a, ["children"]);
+    return ((0, react_1.jsx)(react_select_1.components.ValueContainer, Object.assign({}, restProps),
+        (0, exports.renderValue)(children[0]),
+        " ",
+        children[1]));
+};
+exports.ValueContainer = ValueContainer;
+const IndicatorsContainer = (_a) => {
+    var { children } = _a, restProps = __rest(_a, ["children"]);
+    const value = restProps.getValue();
+    const displaySelectedOptionsCount = Array.isArray(value) && value.length > 1;
+    return ((0, react_1.jsx)(react_select_1.components.IndicatorsContainer, Object.assign({}, restProps),
+        displaySelectedOptionsCount && (0, react_1.jsx)("div", { css: { fontWeight: 600 } },
+            "(+",
+            value.length - 1,
+            ")"),
+        children));
+};
+exports.IndicatorsContainer = IndicatorsContainer;
+//# sourceMappingURL=SelectComponents.js.map

package/lib/Form/SelectComponents.js.map

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

package/lib/Form/SelectStyles.js

@@ -0,0 +1,123 @@
+"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.customStyles = void 0;
+const Input_1 = require("./Input");
+const customStyles = (theme, markInvalid = false) => ({
+    indicatorSeparator: () => ({
+        display: 'none',
+    }),
+    indicatorsContainer: provided => (Object.assign({}, provided)),
+    container: (provided, { isDisabled, selectProps }) => {
+        const { menuIsOpen } = selectProps;
+        const isSelectDisabled = selectProps.isDisabled;
+        return {
+            '& > div': Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, Input_1.inputStyle)(theme, { disabled: isSelectDisabled, markInvalid })), { padding: 0, height: 'auto', minHeight: '48px', '&:-moz-focusring': {
+                    color: 'transparent',
+                    textShadow: '0 0 0 #000',
+                }, position: 'relative' }), (isDisabled && {
+                backgroundColor: theme.Input.backgroundColorDisabled,
+                color: theme.Select.disabledColor,
+                cursor: 'default',
+            })), (markInvalid && {
+                boxShadow: `0 0 0 1px ${theme.general.dangerColor}`,
+            })), (menuIsOpen && {
+                boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,
+                '&:hover': {
+                    boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,
+                },
+            })), { cursor: !isSelectDisabled && 'pointer', '&:focus:visible, active': {
+                    boxShadow: !isSelectDisabled && `0 0 0 1px ${theme.general.primaryColor}`,
+                } }),
+        };
+    },
+    control: () => ({
+        display: 'flex',
+        alignItems: 'center',
+        appearance: 'none',
+        padding: '0 8px 0 16px',
+        height: 'auto',
+        minHeight: '48px',
+    }),
+    dropdownIndicator: (provided, selectProps) => {
+        const isSelectDisabled = selectProps.isDisabled;
+        return Object.assign(Object.assign({}, provided), { '& > svg': {
+                fill: isSelectDisabled && theme.Input.placeholderColor,
+            } });
+    },
+    menu: provided => (Object.assign(Object.assign({}, provided), { boxShadow: `0 0 0 1px ${theme.general.primaryColor}, 0 4px 11px hsl(0deg 0% 0% / 10%)`, borderRadius: 12, marginBottom: 0, marginTop: 4, overflowY: 'overlay' })),
+    menuList: provided => (Object.assign(Object.assign({}, provided), { borderRadius: 12, paddingBottom: 0, paddingTop: 0 })),
+    option: (provided, { isMulti, isDisabled, isFocused, isSelected }) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, provided), { backgroundColor: theme.Input.backgroundColor, color: theme.general.color, padding: '10px 18px', cursor: isDisabled ? 'not-allowed' : 'pointer', fontSize: '16px', fontWeight: 300, lineHeight: '24px' }), (isSelected &&
+        !isDisabled &&
+        !isMulti && {
+        background: theme.general.primaryColor,
+        borderColor: theme.general.primaryColor,
+        color: theme.Select.contrastTextColor,
+        '&:hover': {
+            backgroundColor: theme.Select.selectedActiveBg,
+        },
+        '&:active': {
+            backgroundColor: theme.general.primaryColor,
+            boxShadow: `inset 0 0 0 1px ${theme.Select.selectedActiveBg}`,
+            color: theme.general.contrastColor,
+        },
+    })), (isFocused &&
+        !isDisabled &&
+        !isSelected && {
+        backgroundColor: theme.Select.optionHoverBg,
+        borderColor: theme.Select.optionHoverBg,
+        color: theme.general.color,
+        '&:active': {
+            background: theme.Select.optionHoverBg,
+            boxShadow: `inset 0 0 0 1px ${theme.Select.selectedActiveBg}`,
+            color: theme.general.color,
+        },
+    })), (isMulti &&
+        isSelected && {
+        backgroundColor: theme.Input.backgroundColor,
+        '&:hover': {
+            backgroundColor: theme.Select.optionHoverBg,
+        },
+        '&:active': {
+            background: theme.Select.optionHoverBg,
+            boxShadow: `inset 0 0 0 1px ${theme.Select.selectedActiveBg}`,
+            color: theme.general.color,
+        },
+    })), (isDisabled && Object.assign({ backgroundColor: theme.Input.backgroundColorDisabled, color: theme.Select.disabledColor, '&:hover, &:active, &:focus': {
+            backgroundColor: theme.Select.borderColor,
+            color: theme.Select.disabledColor,
+        } }, (isFocused && {
+        backgroundColor: theme.Select.borderColor,
+        color: theme.Select.disabledColor,
+    })))), { '&:not(:last-of-type)': {
+            borderBottom: `1px solid ${theme.Select.borderColor}`,
+        }, '&:first-of-type': {
+            borderRadius: '12px 12px 0 0',
+        }, '&:last-of-type': {
+            borderRadius: '0 0 12px 12px',
+        } })),
+    valueContainer: provided => (Object.assign(Object.assign({}, provided), { padding: 0, width: '100%', display: 'grid' })),
+    singleValue: (provided, selectProps) => {
+        const isSelectDisabled = selectProps.isDisabled;
+        return Object.assign(Object.assign({}, provided), { color: isSelectDisabled ? theme.Input.placeholderColor : theme.general.color });
+    },
+});
+exports.customStyles = customStyles;
+//# sourceMappingURL=SelectStyles.js.map

package/lib/Form/SelectStyles.js.map

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

package/lib/Form/ShakeBox.js

@@ -0,0 +1,79 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShakeBox = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const react_2 = __importStar(require("react"));
+exports.ShakeBox = react_2.default.forwardRef(({ children, amplitude = 8, damping = 0.75, speed = 4, threshold = 1 }, ref) => {
+    const [offset, setOffset] = (0, react_2.useState)(0);
+    let requestAnimationId = 0;
+    const shakeLoop = (targetOffset, currentOffset = 0) => {
+        if (targetOffset > 0 && currentOffset < targetOffset) {
+            currentOffset += speed;
+        }
+        else if (targetOffset < 0 && currentOffset > targetOffset) {
+            currentOffset -= speed;
+        }
+        else {
+            currentOffset = targetOffset - (currentOffset - targetOffset);
+            targetOffset *= -damping;
+        }
+        if (Math.abs(targetOffset) >= threshold) {
+            requestAnimationId = requestAnimationFrame(() => shakeLoop(targetOffset, currentOffset));
+        }
+        else {
+            currentOffset = 0;
+        }
+        setOffset(currentOffset);
+    };
+    (0, react_2.useImperativeHandle)(ref, () => ({
+        shake: () => {
+            cancelAnimationFrame(requestAnimationId);
+            shakeLoop(amplitude);
+        },
+    }));
+    (0, react_2.useEffect)(() => () => cancelAnimationFrame(requestAnimationId), []);
+    return (0, react_1.jsx)("div", { css: { transform: `translateX(${offset}px)` } }, children);
+});
+//# sourceMappingURL=ShakeBox.js.map

package/lib/Form/ShakeBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShakeBox.js","sourceRoot":"","sources":["../../src/Form/ShakeBox.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAAmC;AACnC,+CAAsE;AAazD,QAAA,QAAQ,GAAG,eAAK,CAAC,UAAU,CACtC,CAAC,EAAC,QAAQ,EAAE,SAAS,GAAG,CAAC,EAAE,OAAO,GAAG,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,SAAS,GAAG,CAAC,EAAgB,EAAE,GAAG,EAAE,EAAE;IAC1F,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IACxC,IAAI,kBAAkB,GAAG,CAAC,CAAC;IAE3B,MAAM,SAAS,GAAG,CAAC,YAAY,EAAE,aAAa,GAAG,CAAC,EAAE,EAAE;QACpD,IAAI,YAAY,GAAG,CAAC,IAAI,aAAa,GAAG,YAAY,EAAE;YACpD,aAAa,IAAI,KAAK,CAAC;SACxB;aAAM,IAAI,YAAY,GAAG,CAAC,IAAI,aAAa,GAAG,YAAY,EAAE;YAC3D,aAAa,IAAI,KAAK,CAAC;SACxB;aAAM;YACL,aAAa,GAAG,YAAY,GAAG,CAAC,aAAa,GAAG,YAAY,CAAC,CAAC;YAC9D,YAAY,IAAI,CAAC,OAAO,CAAC;SAC1B;QACD,IAAI,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,SAAS,EAAE;YACvC,kBAAkB,GAAG,qBAAqB,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;SAC1F;aAAM;YACL,aAAa,GAAG,CAAC,CAAC;SACnB;QACD,SAAS,CAAC,aAAa,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,IAAA,2BAAmB,EAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,KAAK,EAAE,GAAG,EAAE;YACV,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;YACzC,SAAS,CAAC,SAAS,CAAC,CAAC;QACvB,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,IAAA,iBAAS,EAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAC,kBAAkB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEpE,OAAO,0BAAK,GAAG,EAAE,EAAC,SAAS,EAAE,cAAc,MAAM,KAAK,EAAC,IAAG,QAAQ,CAAO,CAAC;AAC5E,CAAC,CACF,CAAC"}

package/lib/Form/Switch.js

@@ -0,0 +1,96 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2020 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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const react_2 = __importDefault(require("react"));
+const Identity_1 = require("../Identity");
+const Misc_1 = require("../Misc");
+const Switch = ({ id = Math.random().toString(), checked, onToggle = () => { }, showLoading, disabled, loadingColor = Identity_1.COLOR.BLUE, activatedColor = Identity_1.COLOR.BLUE, deactivatedColor = '#d2d2d2', name, dataUieName, }) => ((0, react_1.jsx)("div", { css: {
+        display: 'inline-block',
+        position: 'relative',
+        textAlign: 'left',
+        userSelect: 'none',
+        verticalAlign: 'middle',
+        width: '42px',
+    } },
+    (0, react_1.jsx)(react_2.default.Fragment, null,
+        (0, react_1.jsx)("input", { id: id, checked: checked, disabled: disabled, name: name, onChange: event => onToggle(event.target.checked), type: "checkbox", css: { display: 'none' }, "data-uie-name": dataUieName }),
+        (0, react_1.jsx)("label", { htmlFor: id, css: {
+                borderRadius: '20px',
+                cursor: disabled || showLoading ? '' : 'pointer',
+                display: 'block',
+                margin: 0,
+                overflow: 'hidden',
+            } },
+            (0, react_1.jsx)("span", { css: {
+                    ['&:after']: {
+                        content: '" "',
+                        paddingRight: '10px',
+                        textAlign: 'right',
+                    },
+                    ['&:before']: {
+                        content: '" "',
+                        paddingLeft: '10px',
+                    },
+                    ['&:before, &:after']: {
+                        backgroundColor: disabled || showLoading
+                            ? Identity_1.COLOR.tint(checked ? activatedColor : deactivatedColor, 0.4)
+                            : checked
+                                ? activatedColor
+                                : deactivatedColor,
+                        boxSizing: 'border-box',
+                        display: 'block',
+                        float: 'left',
+                        height: '25px',
+                        lineHeight: '25px',
+                        padding: 0,
+                        width: '50%',
+                    },
+                    display: 'block',
+                    marginLeft: checked ? 0 : '-100%',
+                    transition: 'margin 0.1s ease-in 0s',
+                    width: '200%',
+                } }),
+            showLoading ? ((0, react_1.jsx)(Misc_1.Loading, { size: 21, color: loadingColor, style: {
+                    display: 'block',
+                    margin: '2px',
+                    position: 'absolute',
+                } })) : ((0, react_1.jsx)("span", { css: {
+                    background: Identity_1.COLOR.WHITE,
+                    borderRadius: '100%',
+                    bottom: 0,
+                    boxShadow: '0px 0px 2px -1px gray',
+                    display: 'block',
+                    height: '23px',
+                    margin: '1px',
+                    opacity: disabled ? 0.7 : undefined,
+                    position: 'absolute',
+                    right: checked ? '0px' : '17px',
+                    top: 0,
+                    transition: 'all 0.15s ease-in 0s',
+                    width: '23px',
+                } }))))));
+exports.Switch = Switch;
+//# sourceMappingURL=Switch.js.map

package/lib/Form/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/Form/Switch.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;AAEH,eAAe;AACf,0CAAmC;AACnC,kDAA0B;AAE1B,0CAAkC;AAClC,kCAAgC;AAiBzB,MAAM,MAAM,GAAG,CAAC,EACrB,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,EAC7B,OAAO,EACP,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EACnB,WAAW,EACX,QAAQ,EACR,YAAY,GAAG,gBAAK,CAAC,IAAI,EACzB,cAAc,GAAG,gBAAK,CAAC,IAAI,EAC3B,gBAAgB,GAAG,SAAS,EAC5B,IAAI,EACJ,WAAW,GACC,EAAE,EAAE,CAAC,CACjB,0BACE,GAAG,EAAE;QACH,OAAO,EAAE,cAAc;QACvB,QAAQ,EAAE,UAAU;QACpB,SAAS,EAAE,MAAM;QACjB,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,QAAQ;QACvB,KAAK,EAAE,MAAM;KACd;IAED,iBAAC,eAAK,CAAC,QAAQ;QACb,4BACE,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,EACjD,IAAI,EAAC,UAAU,EACf,GAAG,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,mBACP,WAAW,GAC1B;QACF,4BACE,OAAO,EAAE,EAAE,EACX,GAAG,EAAE;gBACH,YAAY,EAAE,MAAM;gBACpB,MAAM,EAAE,QAAQ,IAAI,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;gBAChD,OAAO,EAAE,OAAO;gBAChB,MAAM,EAAE,CAAC;gBACT,QAAQ,EAAE,QAAQ;aACnB;YAED,2BACE,GAAG,EAAE;oBACH,CAAC,SAAS,CAAC,EAAE;wBACX,OAAO,EAAE,KAAK;wBACd,YAAY,EAAE,MAAM;wBACpB,SAAS,EAAE,OAAO;qBACnB;oBACD,CAAC,UAAU,CAAC,EAAE;wBACZ,OAAO,EAAE,KAAK;wBACd,WAAW,EAAE,MAAM;qBACpB;oBACD,CAAC,mBAAmB,CAAC,EAAE;wBACrB,eAAe,EACb,QAAQ,IAAI,WAAW;4BACrB,CAAC,CAAC,gBAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,EAAE,GAAG,CAAC;4BAC9D,CAAC,CAAC,OAAO;gCACT,CAAC,CAAC,cAAc;gCAChB,CAAC,CAAC,gBAAgB;wBACtB,SAAS,EAAE,YAAY;wBACvB,OAAO,EAAE,OAAO;wBAChB,KAAK,EAAE,MAAM;wBACb,MAAM,EAAE,MAAM;wBACd,UAAU,EAAE,MAAM;wBAClB,OAAO,EAAE,CAAC;wBACV,KAAK,EAAE,KAAK;qBACb;oBACD,OAAO,EAAE,OAAO;oBAChB,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO;oBACjC,UAAU,EAAE,wBAAwB;oBACpC,KAAK,EAAE,MAAM;iBACd,GACD;YACD,WAAW,CAAC,CAAC,CAAC,CACb,iBAAC,cAAO,IACN,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,YAAY,EACnB,KAAK,EAAE;oBACL,OAAO,EAAE,OAAO;oBAChB,MAAM,EAAE,KAAK;oBACb,QAAQ,EAAE,UAAU;iBACrB,GACD,CACH,CAAC,CAAC,CAAC,CACF,2BACE,GAAG,EAAE;oBACH,UAAU,EAAE,gBAAK,CAAC,KAAK;oBACvB,YAAY,EAAE,MAAM;oBACpB,MAAM,EAAE,CAAC;oBACT,SAAS,EAAE,uBAAuB;oBAClC,OAAO,EAAE,OAAO;oBAChB,MAAM,EAAE,MAAM;oBACd,MAAM,EAAE,KAAK;oBACb,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS;oBACnC,QAAQ,EAAE,UAAU;oBACpB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;oBAC/B,GAAG,EAAE,CAAC;oBACN,UAAU,EAAE,sBAAsB;oBAClC,KAAK,EAAE,MAAM;iBACd,GACD,CACH,CACK,CACO,CACb,CACP,CAAC;AA3GW,QAAA,MAAM,UA2GjB"}

package/lib/Form/TextArea.js

@@ -0,0 +1,67 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextArea = exports.TEXTAREA_CLASSNAME = exports.textAreaStyle = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const react_2 = __importDefault(require("react"));
+const Identity_1 = require("../Identity");
+const util_1 = require("../util");
+const textAreaStyle = (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),
+        '&:focus': {
+            boxShadow: `0 0 0 1px ${Identity_1.COLOR.BLUE}`,
+        },
+        '&:invalid': !markInvalid
+            ? {
+                boxShadow: `0 0 0 1px ${Identity_1.COLOR.GRAY}`,
+            }
+            : {},
+        background: disabled ? theme.Input.backgroundColorDisabled : theme.Input.backgroundColor,
+        border: 'none',
+        borderRadius: '4px',
+        boxShadow: markInvalid ? `0 0 0 1px ${Identity_1.COLOR.RED}` : `0 0 0 1px ${Identity_1.COLOR.GRAY}`,
+        caretColor: Identity_1.COLOR.BLUE,
+        color: theme.general.color,
+        fontWeight: 300,
+        lineHeight: '24px',
+        margin: '0 0 16px',
+        outline: 'none',
+        padding: '16px 16px',
+        resize: 'none',
+        width: '100%',
+    };
+};
+exports.textAreaStyle = textAreaStyle;
+exports.TEXTAREA_CLASSNAME = 'textarea';
+const filterTextAreaProps = (props) => (0, util_1.filterProps)(props, ['markInvalid', 'placeholderTextTransform']);
+exports.TextArea = react_2.default.forwardRef((props, ref) => ((0, react_1.jsx)("textarea", Object.assign({ className: exports.TEXTAREA_CLASSNAME, css: (theme) => (0, exports.textAreaStyle)(theme, props), ref: ref }, filterTextAreaProps(props)))));
+//# sourceMappingURL=TextArea.js.map

package/lib/Form/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../src/Form/TextArea.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;AAEH,eAAe;AACf,0CAA8C;AAE9C,kDAA0B;AAE1B,0CAAkC;AAGlC,kCAAoC;AAO7B,MAAM,aAAa,GAA4D,CACpF,KAAK,EACL,EAAC,WAAW,GAAG,KAAK,EAAE,wBAAwB,GAAG,MAAM,EAAE,QAAQ,GAAG,KAAK,EAAC,EAC1E,EAAE;IACF,MAAM,gBAAgB,GAAG;QACvB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,gBAAgB;QACnC,QAAQ,EAAE,MAAM;QAChB,aAAa,EAAE,wBAAwB;KACxC,CAAC;IAEF,OAAO;QACL,qBAAqB,kCAChB,gBAAgB,KACnB,OAAO,EAAE,CAAC,GACX;QACD,0BAA0B,oBACrB,gBAAgB,CACpB;QACD,8BAA8B,oBACzB,gBAAgB,CACpB;QACD,SAAS,EAAE;YACT,SAAS,EAAE,aAAa,gBAAK,CAAC,IAAI,EAAE;SACrC;QACD,WAAW,EAAE,CAAC,WAAW;YACvB,CAAC,CAAC;gBACE,SAAS,EAAE,aAAa,gBAAK,CAAC,IAAI,EAAE;aACrC;YACH,CAAC,CAAC,EAAE;QACN,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,eAAe;QACxF,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK;QACnB,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,aAAa,gBAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,aAAa,gBAAK,CAAC,IAAI,EAAE;QAC7E,UAAU,EAAE,gBAAK,CAAC,IAAI;QACtB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC1B,UAAU,EAAE,GAAG;QACf,UAAU,EAAE,MAAM;QAClB,MAAM,EAAE,UAAU;QAClB,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,WAAW;QACpB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;KACd,CAAC;AACJ,CAAC,CAAC;AA3CW,QAAA,aAAa,iBA2CxB;AAEW,QAAA,kBAAkB,GAAG,UAAU,CAAC;AAC7C,MAAM,mBAAmB,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,IAAA,kBAAW,EAAC,KAAK,EAAE,CAAC,aAAa,EAAE,0BAA0B,CAAC,CAAC,CAAC;AAEzG,QAAA,QAAQ,GAAiD,eAAK,CAAC,UAAU,CAGpF,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAChB,6CACE,SAAS,EAAE,0BAAkB,EAC7B,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,IAAA,qBAAa,EAAC,KAAK,EAAE,KAAK,CAAC,EAClD,GAAG,EAAE,GAAG,IACJ,mBAAmB,CAAC,KAAK,CAAC,EAC9B,CACH,CAAC,CAAC"}