@wireapp/react-ui-kit 9.0.0 → 9.0.2

package/lib/Form/Button.js

@@ -0,0 +1,136 @@
+"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.filterButtonProps = exports.Button = exports.buttonStyle = exports.ButtonVariant = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const Identity_1 = require("../Identity");
+const motions_1 = require("../Identity/motions");
+const Misc_1 = require("../Misc");
+const Text_1 = require("../Text");
+const util_1 = require("../util");
+var ButtonVariant;
+(function (ButtonVariant) {
+    ButtonVariant["PRIMARY"] = "primary";
+    ButtonVariant["SECONDARY"] = "secondary";
+    ButtonVariant["TERTIARY"] = "tertiary";
+    ButtonVariant["QUATERNARY"] = "quaternary";
+    ButtonVariant["SEND"] = "send";
+})(ButtonVariant = exports.ButtonVariant || (exports.ButtonVariant = {}));
+const buttonStyle = (theme, _a) => {
+    var { variant = ButtonVariant.PRIMARY, backgroundColor, block = false, disabled = false, noCapital = false, bold = true, center = true, color = Identity_1.COLOR.WHITE, fontSize = '16px', noWrap = true, textTransform = 'none', truncate = true } = _a, props = __rest(_a, ["variant", "backgroundColor", "block", "disabled", "noCapital", "bold", "center", "color", "fontSize", "noWrap", "textTransform", "truncate"]);
+    return (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, Text_1.textStyle)(theme, Object.assign({ block,
+        bold,
+        center,
+        disabled,
+        fontSize,
+        noWrap,
+        textTransform,
+        truncate }, props))), { border: 0, cursor: disabled ? 'default' : 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '16px', padding: 0, outline: 'none', textDecoration: 'none', touchAction: 'manipulation', transition: motions_1.defaultTransition, width: block ? '100%' : 'auto', '&:hover, &:focus': {
+            textDecoration: 'none',
+        } }), (variant !== ButtonVariant.TERTIARY && Object.assign({ borderRadius: variant === ButtonVariant.SEND ? '100%' : '16px', height: variant === ButtonVariant.SEND ? '40px' : '48px', lineHeight: variant === ButtonVariant.SEND ? '40px' : '48px' }, (variant !== ButtonVariant.SEND && {
+        maxWidth: '100%',
+        minWidth: '125px',
+        padding: '0 16px',
+    })))), (variant === ButtonVariant.PRIMARY && Object.assign({ backgroundColor: backgroundColor || (disabled ? theme.Button.primaryDisabledBg : theme.Button.primaryBg), color: disabled ? theme.Button.primaryDisabledText : theme.general.contrastColor }, (!disabled && {
+        '&:hover, &:focus': {
+            backgroundColor: theme.Button.primaryHoverBg,
+        },
+        '&:focus': {
+            border: `1px solid ${theme.Button.primaryFocusBorder}`,
+        },
+        '&:active': {
+            backgroundColor: theme.Button.primaryActiveBg,
+            border: `1px solid ${theme.Button.primaryActiveBorder}`,
+            color: Identity_1.COLOR.WHITE,
+        },
+    })))), (variant === ButtonVariant.SECONDARY && Object.assign({ backgroundColor: backgroundColor || (disabled ? theme.IconButton.primaryDisabledBgColor : theme.IconButton.primaryBgColor), border: `1px solid ${theme.IconButton.primaryBorderColor}`, color: disabled ? theme.Input.placeholderColor : theme.general.color }, (!disabled && {
+        '&:hover, &:focus': {
+            border: `1px solid ${theme.Button.secondaryHoverBorder}`,
+        },
+        '&:focus': {
+            color: theme.IconButton.primaryActiveFillColor,
+        },
+        '&:active': {
+            backgroundColor: theme.Button.secondaryActiveBg,
+            border: `1px solid ${theme.Button.secondaryActiveBorder}`,
+            color: theme.general.primaryColor,
+        },
+    })))), (variant === ButtonVariant.TERTIARY && Object.assign({ backgroundColor: backgroundColor || (disabled ? theme.Button.tertiarydisabledBg : theme.Button.tertiaryBg), border: disabled ? `1px solid ${theme.Button.tertiaryDisabledBorder}` : `1px solid ${theme.Button.tertiaryBorder}`, borderRadius: '12px', color: disabled ? theme.Input.placeholderColor : theme.general.color, fontSize: '14px', fontWeight: 700, lineHeight: '24px', padding: '4px 8px', '& > svg > path': {
+            fill: disabled ? theme.Input.placeholderColor : theme.general.color,
+        } }, (!disabled && {
+        '&:hover, &:focus': {
+            backgroundColor: theme.Button.tertiaryHoverBg,
+            border: `1px solid ${theme.Button.tertiaryHoverBorder}`,
+        },
+        '&:focus': {
+            border: `1px solid ${theme.general.focusColor}`,
+        },
+        '&:active': {
+            backgroundColor: theme.Button.tertiaryActiveBg,
+            color: theme.IconButton.primaryActiveFillColor,
+            '& > svg > path': {
+                fill: theme.IconButton.primaryActiveFillColor,
+            },
+        },
+    })))), (variant === ButtonVariant.QUATERNARY && Object.assign({ backgroundColor: backgroundColor || (disabled ? Identity_1.COLOR_V2.GRAY_50 : Identity_1.COLOR_V2.GREEN), color: disabled ? Identity_1.COLOR_V2.GRAY_80 : Identity_1.COLOR_V2.WHITE, lineHeight: '24px' }, (!disabled && {
+        '&:hover, &:focus': {
+            backgroundColor: Identity_1.COLOR_V2.GREEN_LIGHT_600,
+        },
+        '&:focus': {
+            border: `1px solid ${Identity_1.COLOR_V2.GREEN_LIGHT_700}`,
+        },
+        '&:active': {
+            backgroundColor: Identity_1.COLOR_V2.GREEN_LIGHT_700,
+        },
+    })))), (variant === ButtonVariant.SEND && Object.assign({ backgroundColor: backgroundColor || (disabled ? Identity_1.COLOR_V2.GRAY_70 : Identity_1.COLOR_V2.BLUE), width: '40px' }, (!disabled && {
+        '&:hover, &:focus': {
+            backgroundColor: Identity_1.COLOR_V2.BLUE_LIGHT_600,
+        },
+        '&:focus': {
+            border: `1px solid ${Identity_1.COLOR_V2.BLUE_LIGHT_800}`,
+        },
+        '&:active': {
+            backgroundColor: Identity_1.COLOR_V2.BLUE_LIGHT_700,
+        },
+    })))));
+};
+exports.buttonStyle = buttonStyle;
+const Button = (_a) => {
+    var { showLoading, children, loadingColor = Identity_1.COLOR.WHITE } = _a, props = __rest(_a, ["showLoading", "children", "loadingColor"]);
+    return ((0, react_1.jsx)("button", Object.assign({ css: (theme) => (0, exports.buttonStyle)(theme, props) }, (0, exports.filterButtonProps)(props)), showLoading ? (0, react_1.jsx)(Misc_1.Loading, { size: 30, color: loadingColor, style: { display: 'flex', margin: 'auto' } }) : children));
+};
+exports.Button = Button;
+const filterButtonProps = (props) => {
+    return (0, util_1.filterProps)((0, Text_1.filterTextProps)(props), ['backgroundColor', 'noCapital']);
+};
+exports.filterButtonProps = filterButtonProps;
+//# sourceMappingURL=Button.js.map

package/lib/Form/Button.js.map

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

package/lib/Form/ButtonLink.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.ButtonLink = exports.buttonLinkStyle = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const Misc_1 = require("../Misc");
+const Identity_1 = require("../Identity");
+const util_1 = require("../util");
+const Text_1 = require("../Text");
+const Button_1 = require("./Button");
+const buttonLinkStyle = (theme, props) => (Object.assign(Object.assign({}, (0, Button_1.buttonStyle)(theme, props)), { display: 'inline-flex !important' }));
+exports.buttonLinkStyle = buttonLinkStyle;
+const filterButtonLinkProps = (props) => {
+    return (0, util_1.filterProps)((0, Text_1.filterTextProps)(props), [
+        'backgroundColor',
+        'disabled',
+        'noCapital',
+    ]);
+};
+const ButtonLink = (_a) => {
+    var { children, showLoading, loadingColor = Identity_1.COLOR.WHITE } = _a, props = __rest(_a, ["children", "showLoading", "loadingColor"]);
+    return ((0, react_1.jsx)("a", Object.assign({ css: (theme) => (0, exports.buttonLinkStyle)(theme, props) }, filterButtonLinkProps(props)), showLoading ? (0, react_1.jsx)(Misc_1.Loading, { size: 30, color: loadingColor, style: { display: 'flex', margin: 'auto' } }) : children));
+};
+exports.ButtonLink = ButtonLink;
+//# sourceMappingURL=ButtonLink.js.map

package/lib/Form/ButtonLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonLink.js","sourceRoot":"","sources":["../../src/Form/ButtonLink.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAA8C;AAE9C,kCAAgC;AAChC,0CAAkC;AAClC,kCAAoC;AACpC,kCAAwC;AACxC,qCAAkD;AAG3C,MAAM,eAAe,GAAuE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,iCAChH,IAAA,oBAAW,EAAC,KAAK,EAAE,KAAK,CAAC,KAC5B,OAAO,EAAE,wBAAwB,IACjC,CAAC;AAHU,QAAA,eAAe,mBAGzB;AAEH,MAAM,qBAAqB,GAAG,CAAC,KAAqC,EAAE,EAAE;IACtE,OAAO,IAAA,kBAAW,EAAC,IAAA,sBAAe,EAAC,KAAK,CAAmC,EAAE;QAC3E,iBAAiB;QACjB,UAAU;QACV,WAAW;KACZ,CAAC,CAAC;AACL,CAAC,CAAC;AAEK,MAAM,UAAU,GAAG,CAAC,EAKM,EAAE,EAAE;QALV,EACzB,QAAQ,EACR,WAAW,EACX,YAAY,GAAG,gBAAK,CAAC,KAAK,OAEK,EAD5B,KAAK,cAJiB,2CAK1B,CADS;IAC4B,OAAA,CACpC,sCAAG,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,IAAA,uBAAe,EAAC,KAAK,EAAE,KAAK,CAAC,IAAM,qBAAqB,CAAC,KAAK,CAAC,GACtF,WAAW,CAAC,CAAC,CAAC,iBAAC,cAAO,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAC,GAAI,CAAC,CAAC,CAAC,QAAQ,CAC5G,CACL,CAAA;CAAA,CAAC;AATW,QAAA,UAAU,cASrB"}

package/lib/Form/Checkbox.js

@@ -0,0 +1,114 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxLabel = exports.Checkbox = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const react_2 = __importStar(require("react"));
+const Text_1 = require("../Text");
+const Input_1 = require("./Input");
+const StyledLabel = (_a) => {
+    var { disabled, markInvalid, aligncenter = false, labelBeforeCheckbox = false, children } = _a, props = __rest(_a, ["disabled", "markInvalid", "aligncenter", "labelBeforeCheckbox", "children"]);
+    return ((0, react_1.jsx)("label", Object.assign({ css: (theme) => (Object.assign(Object.assign(Object.assign(Object.assign({ [`.${Input_1.INPUT_CLASSNAME}:checked + &::before`]: {
+                background: `${disabled ? theme.Checkbox.disablecheckedBgColor : theme.general.primaryColor}`,
+                borderColor: theme.general.primaryColor,
+            }, [`.${Input_1.INPUT_CLASSNAME}:checked + & > svg`]: {
+                fill: theme.general.backgroundColor,
+            }, [`.${Input_1.INPUT_CLASSNAME} + & > svg`]: Object.assign({ fill: 'none', position: 'absolute', top: '50%', transform: 'translateY(-50%)' }, (labelBeforeCheckbox
+                ? {
+                    right: '0.75rem',
+                }
+                : {
+                    left: '0.25rem',
+                })) }, (!disabled && {
+            [`.${Input_1.INPUT_CLASSNAME}:hover + &::before`]: {
+                borderColor: theme.general.primaryColor,
+            },
+        })), { [`.${Input_1.INPUT_CLASSNAME} + &::before`]: Object.assign(Object.assign({ background: disabled ? theme.Checkbox.disableBgColor : theme.Checkbox.background }, (!disabled
+                ? {
+                    border: markInvalid
+                        ? `2px solid ${theme.Checkbox.invalidBorderColor}`
+                        : `2px solid ${theme.Checkbox.border}`,
+                }
+                : {
+                    border: `2px solid ${theme.Checkbox.disableBorderColor}`,
+                })), { borderRadius: '3px', boxSizing: 'border-box', content: '""', display: 'inline-block', width: '22px', height: '22px', lineHeight: 1.4, margin: '0 8px 0 0px', color: theme.general.color }) }), (labelBeforeCheckbox && {
+            flexDirection: 'row-reverse',
+            justifyContent: 'space-between',
+        })), { alignItems: 'center', position: 'relative', margin: '0 0 0 -16px', width: aligncenter ? 'auto' : '100%', lineHeight: 1.4, display: 'flex', opacity: disabled ? 0.56 : 1, cursor: disabled ? 'not-allowed' : 'pointer', borderRadius: '4px' })) }, props),
+        children,
+        (0, react_1.jsx)("svg", { width: "15", height: "13", viewBox: "0 0 16 13", xmlns: "http://www.w3.org/2000/svg" },
+            (0, react_1.jsx)("path", { d: "M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z" }))));
+};
+exports.Checkbox = react_2.default.forwardRef((_a, ref) => {
+    var { id = (0, react_2.useId)(), children, style, disabled, wrapperCSS = {}, markInvalid, aligncenter, labelBeforeCheckbox, outlineOffset = '0.4rem' } = _a, props = __rest(_a, ["id", "children", "style", "disabled", "wrapperCSS", "markInvalid", "aligncenter", "labelBeforeCheckbox", "outlineOffset"]);
+    return ((0, react_1.jsx)("div", { css: (theme) => (Object.assign({ alignItems: 'center', display: 'flex', justifyContent: 'flex-start', position: 'relative', left: '-0.3rem', [`.${Input_1.INPUT_CLASSNAME}:focus-visible + label`]: {
+                outline: `1px solid ${theme.general.primaryColor}`,
+                outlineOffset: outlineOffset,
+            } }, wrapperCSS)), style: style },
+        (0, react_1.jsx)("input", Object.assign({ type: "checkbox", id: id, style: {
+                height: '22px',
+                marginBottom: '0',
+                opacity: 0,
+                width: '22px',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+            }, disabled: disabled, ref: ref, className: Input_1.INPUT_CLASSNAME }, props)),
+        (0, react_1.jsx)(StyledLabel, { htmlFor: id, disabled: disabled, markInvalid: markInvalid, aligncenter: aligncenter, labelBeforeCheckbox: labelBeforeCheckbox }, children)));
+});
+const CheckboxLabel = (_a) => {
+    var props = __rest(_a, []);
+    return ((0, react_1.jsx)(Text_1.Text, Object.assign({ css: (theme) => (Object.assign({}, (0, Text_1.textStyle)(theme, Object.assign({}, props)))) }, props)));
+};
+exports.CheckboxLabel = CheckboxLabel;
+//# sourceMappingURL=Checkbox.js.map

package/lib/Form/Checkbox.js.map

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

package/lib/Form/CodeInput.js

@@ -0,0 +1,126 @@
+"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.CodeInput = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const react_2 = __importStar(require("react"));
+const util_1 = require("../util");
+const Input_1 = require("./Input");
+const Identity_1 = require("../Identity");
+const CodeInputWrapper = (props) => ((0, react_1.jsx)("div", Object.assign({ css: {
+        display: 'flex',
+        justifyContent: 'center',
+    } }, props)));
+const digitInputStyle = (theme, props) => (Object.assign(Object.assign({}, (0, Input_1.inputStyle)(theme, props)), { '& + &': {
+        marginLeft: 'min(19px, 2vw)',
+    }, '&:hover': {
+        boxShadow: `0 0 0 1px ${Identity_1.COLOR_V2.GRAY_60}`,
+    }, fontSize: '24px', lineHeight: '28px', borderRadius: '12px', padding: 0, textAlign: 'center', width: 'min(48px, 13vw)', height: '56px' }));
+const DigitInput = react_2.default.forwardRef((props, ref) => (0, react_1.jsx)("input", Object.assign({ ref: ref, css: (theme) => digitInputStyle(theme, props) }, props, { type: "tel" })));
+const CodeInput = ({ style, digits = 6, autoFocus = false, markInvalid, onCodeComplete = util_1.noop, disabled, }) => {
+    const [values, setValues] = (0, react_2.useState)(Array(digits).fill(''));
+    const inputs = Array(digits);
+    const forceSelection = (event) => {
+        const target = event.target;
+        target.select();
+    };
+    const forceSelectionPreventDefault = (event) => {
+        forceSelection(event);
+        event.preventDefault();
+    };
+    const nextField = (currentFieldIndex) => {
+        const nextFieldIndex = currentFieldIndex + 1;
+        if (nextFieldIndex < digits) {
+            inputs[nextFieldIndex].focus();
+        }
+    };
+    const previousField = (currentFieldIndex) => {
+        if (currentFieldIndex > 0) {
+            inputs[currentFieldIndex - 1].focus();
+        }
+    };
+    const setValue = (fieldIndex, value) => {
+        if (/^[0-9]?$/.test(value)) {
+            const valuesCopy = values.slice();
+            valuesCopy[fieldIndex] = value;
+            setValues(valuesCopy);
+            if (value.length) {
+                nextField(fieldIndex);
+            }
+        }
+    };
+    const handleKeyDown = (fieldIndex, { key }) => {
+        switch (key) {
+            case 'Backspace':
+                setValue(fieldIndex, '');
+                previousField(fieldIndex);
+                break;
+            case 'ArrowLeft':
+                previousField(fieldIndex);
+                break;
+            case 'ArrowRight':
+                nextField(fieldIndex);
+                break;
+        }
+        if (/^[0-9]$/.test(key)) {
+            setValue(fieldIndex, key);
+        }
+    };
+    const handlePaste = (fieldIndex, event) => {
+        const pastedValue = event.clipboardData.getData('Text');
+        const cleanedPaste = pastedValue.replace(/[^0-9]/g, '');
+        if (/^[0-9]+$/.test(cleanedPaste)) {
+            setValues(values.slice(0, fieldIndex).concat(cleanedPaste.split('')).slice(0, digits));
+        }
+    };
+    (0, react_2.useEffect)(() => {
+        const completeCode = values.join('');
+        if (completeCode.length === digits) {
+            onCodeComplete(completeCode);
+        }
+    }, [values]);
+    return ((0, react_1.jsx)(CodeInputWrapper, { style: style }, Array.from({ length: digits }, (_, index) => ((0, react_1.jsx)(DigitInput, { autoFocus: index === 0 && autoFocus, key: index, onPaste: event => handlePaste(index, event), onFocus: forceSelection, onMouseDown: forceSelectionPreventDefault, onTouchStart: forceSelectionPreventDefault, onKeyDown: event => handleKeyDown(index, event), onKeyUp: forceSelection, markInvalid: markInvalid, ref: node => (inputs[index] = node), value: values[index], onChange: () => { }, disabled: disabled })))));
+};
+exports.CodeInput = CodeInput;
+//# sourceMappingURL=CodeInput.js.map

package/lib/Form/CodeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeInput.js","sourceRoot":"","sources":["../../src/Form/CodeInput.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAA8C;AAC9C,+CAAiD;AAGjD,kCAA6B;AAC7B,mCAA+C;AAC/C,0CAAqC;AAErC,MAAM,gBAAgB,GAAG,CAAC,KAAsC,EAAE,EAAE,CAAC,CACnE,wCACE,GAAG,EAAE;QACH,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,QAAQ;KACzB,IACG,KAAK,EACT,CACH,CAAC;AAIF,MAAM,eAAe,GAA8D,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,iCAChG,IAAA,kBAAU,EAAC,KAAK,EAAE,KAAK,CAAC,KAC3B,OAAO,EAAE;QACP,UAAU,EAAE,gBAAgB;KAC7B,EACD,SAAS,EAAE;QACT,SAAS,EAAE,aAAa,mBAAQ,CAAC,OAAO,EAAE;KAC3C,EACD,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,EACpB,OAAO,EAAE,CAAC,EACV,SAAS,EAAE,QAAQ,EACnB,KAAK,EAAE,iBAAiB,EACxB,MAAM,EAAE,MAAM,IACd,CAAC;AAEH,MAAM,UAAU,GAAgD,eAAK,CAAC,UAAU,CAG9E,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,0CAAO,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,IAAM,KAAK,IAAE,IAAI,EAAC,KAAK,IAAG,CAAC,CAAC;AAS5G,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,MAAM,GAAG,CAAC,EACV,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,cAAc,GAAG,WAAI,EACrB,QAAQ,GACO,EAAE,EAAE;IACnB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;IAC7D,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAE7B,MAAM,cAAc,GAAG,CACrB,KAIsC,EACtC,EAAE;QACF,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,MAAM,CAAC,MAAM,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,4BAA4B,GAAG,CACnC,KAA8E,EAC9E,EAAE;QACF,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,iBAAyB,EAAE,EAAE;QAC9C,MAAM,cAAc,GAAG,iBAAiB,GAAG,CAAC,CAAC;QAC7C,IAAI,cAAc,GAAG,MAAM,EAAE;YAC3B,MAAM,CAAC,cAAc,CAAC,CAAC,KAAK,EAAE,CAAC;SAChC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,iBAAyB,EAAE,EAAE;QAClD,IAAI,iBAAiB,GAAG,CAAC,EAAE;YACzB,MAAM,CAAC,iBAAiB,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;SACvC;IACH,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,UAAkB,EAAE,KAAa,EAAE,EAAE;QACrD,IAAI,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC1B,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC;YAClC,UAAU,CAAC,UAAU,CAAC,GAAG,KAAK,CAAC;YAC/B,SAAS,CAAC,UAAU,CAAC,CAAC;YACtB,IAAI,KAAK,CAAC,MAAM,EAAE;gBAChB,SAAS,CAAC,UAAU,CAAC,CAAC;aACvB;SACF;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,UAAkB,EAAE,EAAC,GAAG,EAAwC,EAAE,EAAE;QACzF,QAAQ,GAAG,EAAE;YACX,KAAK,WAAW;gBACd,QAAQ,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;gBACzB,aAAa,CAAC,UAAU,CAAC,CAAC;gBAC1B,MAAM;YACR,KAAK,WAAW;gBACd,aAAa,CAAC,UAAU,CAAC,CAAC;gBAC1B,MAAM;YACR,KAAK,YAAY;gBACf,SAAS,CAAC,UAAU,CAAC,CAAC;gBACtB,MAAM;SACT;QACD,IAAI,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;YACvB,QAAQ,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,UAAkB,EAAE,KAA6C,EAAE,EAAE;QACxF,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACxD,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QACxD,IAAI,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;YACjC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;SACxF;IACH,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACrC,IAAI,YAAY,CAAC,MAAM,KAAK,MAAM,EAAE;YAClC,cAAc,CAAC,YAAY,CAAC,CAAC;SAC9B;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACL,iBAAC,gBAAgB,IAAC,KAAK,EAAE,KAAK,IAC3B,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,MAAM,EAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1C,iBAAC,UAAU,IACT,SAAS,EAAE,KAAK,KAAK,CAAC,IAAI,SAAS,EACnC,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,EAC3C,OAAO,EAAE,cAAc,EACvB,WAAW,EAAE,4BAA4B,EACzC,YAAY,EAAE,4BAA4B,EAC1C,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,EAC/C,OAAO,EAAE,cAAc,EACvB,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,EACnC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,EACpB,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,EAClB,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC,CACe,CACpB,CAAC;AACJ,CAAC,CAAC;AA3GW,QAAA,SAAS,aA2GpB"}

package/lib/Form/DropFileInput.js

@@ -0,0 +1,139 @@
+"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.DropFileInput = exports.dropFileZonDescriptionStyle = exports.dropFileZoneHeadingStyle = exports.dropFileZoneLabelStyle = exports.dropFileZoneWrapperStyle = exports.dropFileWrapperStyle = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const Identity_1 = require("../Identity");
+const Icon_1 = require("../Icon");
+const Layout_1 = require("../Layout");
+const visuallyHiddenStyles = {
+    clip: 'rect(0 0 0 0)',
+    clipPath: 'inset(50%)',
+    height: '1px',
+    overflow: 'hidden',
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1px',
+};
+exports.dropFileWrapperStyle = {
+    maxWidth: '330px',
+};
+const dropFileZoneWrapperStyle = (theme, isDraggedOver) => ({
+    width: '100%',
+    padding: '28px 12px',
+    border: `1px dashed ${theme.general.primaryColor}`,
+    borderBottomWidth: '2px',
+    borderRadius: '6px',
+    textAlign: 'center',
+    backgroundColor: isDraggedOver ? theme.general.backgroundColor : Identity_1.COLOR.WHITE,
+    fontWeight: 400,
+    fontSize: '12px',
+    lineHeight: '13px',
+    color: Identity_1.COLOR.GRAY,
+});
+exports.dropFileZoneWrapperStyle = dropFileZoneWrapperStyle;
+const dropFileZoneLabelStyle = theme => ({
+    color: theme.general.primaryColor,
+    cursor: 'pointer',
+    ':focus-within': {
+        outline: `1px solid ${theme.general.primaryColor}`,
+    },
+    ':hover': {
+        textDecoration: 'underline',
+    },
+});
+exports.dropFileZoneLabelStyle = dropFileZoneLabelStyle;
+exports.dropFileZoneHeadingStyle = {
+    display: 'block',
+    whiteSpace: 'pre-line',
+};
+exports.dropFileZonDescriptionStyle = {
+    marginTop: '12px',
+    fontWeight: 400,
+    fontSize: '10px',
+    lineHeight: '13px',
+    color: Identity_1.COLOR.GRAY,
+    whiteSpace: 'pre-line',
+};
+exports.DropFileInput = (0, react_2.forwardRef)((_a, ref) => {
+    var { onFilesUploaded, onInvalidFilesDropError, dropFileZoneWrapperCSS, labelText, headingText, description, accept, multiple } = _a, inputProps = __rest(_a, ["onFilesUploaded", "onInvalidFilesDropError", "dropFileZoneWrapperCSS", "labelText", "headingText", "description", "accept", "multiple"]);
+    const [isDraggedOver, setIsDraggedOver] = (0, react_2.useState)(false);
+    const resetDraggedOver = () => setIsDraggedOver(false);
+    const handleDragOver = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        event.dataTransfer.dropEffect = 'copy';
+        if (event.dataTransfer.items.length > 0) {
+            setIsDraggedOver(true);
+        }
+    };
+    const handleDrop = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        resetDraggedOver();
+        const { files } = event.dataTransfer;
+        if (files.length < 1) {
+            return;
+        }
+        const filesArr = multiple ? Array.from(files) : [files[0]];
+        const areFilesValid = !!accept
+            ? filesArr.every(file => accept
+                .split(',')
+                .map(v => v.trim())
+                .includes(file.type))
+            : true;
+        if (!areFilesValid) {
+            onInvalidFilesDropError();
+            return;
+        }
+        onFilesUploaded(filesArr);
+    };
+    const handleChange = (event) => {
+        const { files } = event.target;
+        if (files.length < 1) {
+            return;
+        }
+        onFilesUploaded(Array.from(files));
+    };
+    return ((0, react_1.jsx)("div", { css: exports.dropFileWrapperStyle },
+        (0, react_1.jsx)("div", { css: (theme) => (Object.assign(Object.assign({}, (0, exports.dropFileZoneWrapperStyle)(theme, isDraggedOver)), dropFileZoneWrapperCSS)), "data-testid": "dropzone", onDragOver: handleDragOver, onDragLeave: resetDraggedOver, onDrop: handleDrop },
+            (0, react_1.jsx)(Layout_1.FlexBox, { align: "center", justify: "center", flexWrap: "wrap", css: { maxWidth: '280px', margin: '0 auto' } },
+                (0, react_1.jsx)(Icon_1.UploadIcon, { css: { margin: '12px 0' } }),
+                (0, react_1.jsx)("div", { css: { maxWidth: '160px', margin: '0 25px' } },
+                    (0, react_1.jsx)("span", { css: exports.dropFileZoneHeadingStyle }, headingText),
+                    (0, react_1.jsx)("label", { "aria-label": `${headingText} ${labelText} (${description})`, css: (theme) => (0, exports.dropFileZoneLabelStyle)(theme) },
+                        (0, react_1.jsx)("span", null, labelText),
+                        (0, react_1.jsx)("input", Object.assign({ "data-testid": "file-input", ref: ref, accept: accept, multiple: multiple, css: visuallyHiddenStyles, onChange: handleChange, type: "file" }, inputProps)))))),
+        description && (0, react_1.jsx)("p", { css: exports.dropFileZonDescriptionStyle }, description)));
+});
+//# sourceMappingURL=DropFileInput.js.map

package/lib/Form/DropFileInput.js.map

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