@wireapp/react-ui-kit 8.17.10 → 9.0.1

package/lib/Misc/Pill.js

@@ -0,0 +1,75 @@
+"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.Pill = exports.filterPillProps = exports.pillStyle = exports.PILL_TYPE = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const Identity_1 = require("../Identity");
+const motions_1 = require("../Identity/motions");
+const util_1 = require("../util");
+var PILL_TYPE;
+(function (PILL_TYPE) {
+    PILL_TYPE["error"] = "ERROR";
+    PILL_TYPE["success"] = "SUCCESS";
+    PILL_TYPE["warning"] = "WARNING";
+})(PILL_TYPE = exports.PILL_TYPE || (exports.PILL_TYPE = {}));
+const pillStyle = (theme, { active = false, type = null }) => {
+    const backgroundColors = {
+        [PILL_TYPE.error]: Identity_1.COLOR.RED_OPAQUE_32,
+        [PILL_TYPE.success]: Identity_1.COLOR.GREEN_OPAQUE_32,
+        [PILL_TYPE.warning]: Identity_1.COLOR.YELLOW_OPAQUE_32,
+    };
+    const backgroundColor = active ? '#eee' : type ? backgroundColors[type] : 'transparent';
+    const pillAnimation = (0, react_1.keyframes) `
+    0% {
+      background-color: transparent;
+    }
+    100% {
+      background-color: ${backgroundColor};
+    }
+`;
+    return {
+        '&:first-of-type': {
+            marginLeft: 0,
+        },
+        '&:last-of-type': {
+            marginRight: 0,
+        },
+        animation: `${pillAnimation} ${motions_1.DURATION.DEFAULT}ms ${motions_1.EASE.QUART}`,
+        backgroundColor,
+        borderRadius: '160px',
+        color: active ? Identity_1.COLOR.TEXT : theme.general.color,
+        cursor: active ? 'default' : undefined,
+        display: 'inline-block',
+        fontSize: '12px',
+        lineHeight: '16px',
+        margin: type ? '12px 0 0 0' : '0 8px',
+        minHeight: '32px',
+        padding: '8px 24px',
+        textAlign: 'center',
+        textDecoration: 'none',
+    };
+};
+exports.pillStyle = pillStyle;
+const filterPillProps = (props) => (0, util_1.filterProps)(props, ['active']);
+exports.filterPillProps = filterPillProps;
+const Pill = (props) => ((0, react_1.jsx)("span", Object.assign({ css: (theme) => (0, exports.pillStyle)(theme, props), "data-uie-name": "element-pill", "data-uie-status": props.type }, (0, exports.filterPillProps)(props))));
+exports.Pill = Pill;
+//# sourceMappingURL=Pill.js.map

package/lib/Misc/Pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.js","sourceRoot":"","sources":["../../src/Misc/Pill.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAEH,eAAe;AACf,0CAAyD;AAGzD,0CAAkC;AAClC,iDAAmD;AAEnD,kCAAoC;AAOpC,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,4BAAe,CAAA;IACf,gCAAmB,CAAA;IACnB,gCAAmB,CAAA;AACrB,CAAC,EAJW,SAAS,GAAT,iBAAS,KAAT,iBAAS,QAIpB;AAEM,MAAM,SAAS,GAAwD,CAC5E,KAAK,EACL,EAAC,MAAM,GAAG,KAAK,EAAE,IAAI,GAAG,IAAI,EAAC,EAC7B,EAAE;IACF,MAAM,gBAAgB,GAAG;QACvB,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,gBAAK,CAAC,aAAa;QACtC,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,gBAAK,CAAC,eAAe;QAC1C,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,gBAAK,CAAC,gBAAgB;KAC5C,CAAC;IACF,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC;IACxF,MAAM,aAAa,GAAG,IAAA,iBAAS,EAAA;;;;;0BAKP,eAAe;;CAExC,CAAC;IACA,OAAO;QACL,iBAAiB,EAAE;YACjB,UAAU,EAAE,CAAC;SACd;QACD,gBAAgB,EAAE;YAChB,WAAW,EAAE,CAAC;SACf;QACD,SAAS,EAAE,GAAG,aAAa,IAAI,kBAAQ,CAAC,OAAO,MAAM,cAAI,CAAC,KAAK,EAAE;QACjE,eAAe;QACf,YAAY,EAAE,OAAO;QACrB,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;QAChD,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QACtC,OAAO,EAAE,cAAc;QACvB,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,MAAM;QAClB,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO;QACrC,SAAS,EAAE,MAAM;QACjB,OAAO,EAAE,UAAU;QACnB,SAAS,EAAE,QAAQ;QACnB,cAAc,EAAE,MAAM;KACvB,CAAC;AACJ,CAAC,CAAC;AAvCW,QAAA,SAAS,aAuCpB;AAEK,MAAM,eAAe,GAAG,CAAC,KAAgB,EAAE,EAAE,CAAC,IAAA,kBAAW,EAAC,KAAK,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AAAvE,QAAA,eAAe,mBAAwD;AAE7E,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE,CAAC,CACxC,yCACE,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,IAAA,iBAAS,EAAC,KAAK,EAAE,KAAK,CAAC,mBAChC,cAAc,qBACX,KAAK,CAAC,IAAI,IACvB,IAAA,uBAAe,EAAC,KAAK,CAAC,EAC1B,CACH,CAAC;AAPW,QAAA,IAAI,QAOf"}

package/lib/Misc/childrenWithDefaultProps.js

@@ -0,0 +1,38 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2019 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.childrenWithDefaultProps = void 0;
+const react_1 = __importDefault(require("react"));
+const childrenWithDefaultProps = (props) => react_1.default.Children.map(props.children, node => {
+    if (typeof node === 'string') {
+        return node;
+    }
+    if (!react_1.default.isValidElement(node)) {
+        console.error('Invalid children', node);
+        return node;
+    }
+    const elementChild = node;
+    return react_1.default.cloneElement(elementChild, Object.assign(Object.assign({}, props.defaultProps), elementChild.props));
+});
+exports.childrenWithDefaultProps = childrenWithDefaultProps;
+//# sourceMappingURL=childrenWithDefaultProps.js.map

package/lib/Misc/childrenWithDefaultProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"childrenWithDefaultProps.js","sourceRoot":"","sources":["../../src/Misc/childrenWithDefaultProps.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;AAEH,kDAA0B;AAOnB,MAAM,wBAAwB,GAAG,CAAmC,KAA0B,EAAE,EAAE,CACvG,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAmC,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE;IAC1E,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC5B,OAAO,IAAI,CAAC;KACb;IACD,IAAI,CAAC,eAAK,CAAC,cAAc,CAAI,IAAI,CAAC,EAAE;QAClC,OAAO,CAAC,KAAK,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;QACxC,OAAO,IAAI,CAAC;KACb;IAED,MAAM,YAAY,GAA0B,IAAI,CAAC;IACjD,OAAO,eAAK,CAAC,YAAY,CAAI,YAAY,kCAAO,KAAK,CAAC,YAAoB,GAAM,YAAY,CAAC,KAAa,EAAE,CAAC;AAC/G,CAAC,CAAC,CAAC;AAZQ,QAAA,wBAAwB,4BAYhC"}

package/lib/Misc/index.js

@@ -0,0 +1,44 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ButtonGroup"), exports);
+__exportStar(require("./childrenWithDefaultProps"), exports);
+__exportStar(require("./IconButton"), exports);
+__exportStar(require("./IsInViewport"), exports);
+__exportStar(require("./Loading"), exports);
+__exportStar(require("./Pagination"), exports);
+__exportStar(require("./Pill"), exports);
+__exportStar(require("./useLongTouch"), exports);
+__exportStar(require("./useTimeout"), exports);
+//# sourceMappingURL=index.js.map

package/lib/Misc/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Misc/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;;;AAEH,gDAA8B;AAC9B,6DAA2C;AAC3C,+CAA6B;AAC7B,iDAA+B;AAC/B,4CAA0B;AAC1B,+CAA6B;AAC7B,yCAAuB;AACvB,iDAA+B;AAC/B,+CAA6B"}

package/lib/Misc/useLongTouch.js

@@ -0,0 +1,45 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2019 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.useLongTouch = void 0;
+const react_1 = require("react");
+const useTimeout_1 = require("./useTimeout");
+const useLongTouch = (element, onLongTouch, touchDuration = 800) => {
+    const { startTimeout, removeTimeout } = (0, useTimeout_1.useTimeout)(onLongTouch, touchDuration);
+    (0, react_1.useEffect)(() => {
+        if (!element) {
+            return () => { };
+        }
+        const onTouchStart = (event) => {
+            startTimeout();
+        };
+        const onTouchEnd = (event) => {
+            removeTimeout();
+        };
+        element.addEventListener('touchstart', onTouchStart, false);
+        element.addEventListener('touchend', onTouchEnd, false);
+        return () => {
+            element.removeEventListener('touchstart', onTouchStart);
+            element.removeEventListener('touchend', onTouchEnd);
+        };
+    }, [onLongTouch, touchDuration]);
+};
+exports.useLongTouch = useLongTouch;
+//# sourceMappingURL=useLongTouch.js.map

package/lib/Misc/useLongTouch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLongTouch.js","sourceRoot":"","sources":["../../src/Misc/useLongTouch.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAEH,iCAAgC;AAEhC,6CAAwC;AAExC,MAAM,YAAY,GAAG,CAAC,OAA2B,EAAE,WAAuB,EAAE,aAAa,GAAG,GAAG,EAAE,EAAE;IACjG,MAAM,EAAC,YAAY,EAAE,aAAa,EAAC,GAAG,IAAA,uBAAU,EAAC,WAAW,EAAE,aAAa,CAAC,CAAC;IAE7E,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;SACjB;QAED,MAAM,YAAY,GAAG,CAAC,KAAiB,EAAE,EAAE;YACzC,YAAY,EAAE,CAAC;QACjB,CAAC,CAAC;QAEF,MAAM,UAAU,GAAG,CAAC,KAAiB,EAAE,EAAE;YACvC,aAAa,EAAE,CAAC;QAClB,CAAC,CAAC;QAEF,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC;QAC5D,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;QACxD,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,mBAAmB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;YACxD,OAAO,CAAC,mBAAmB,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;QACtD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC;AACnC,CAAC,CAAC;AAEM,oCAAY"}

package/lib/Misc/useTimeout.js

@@ -0,0 +1,47 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2019 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.useTimeout = void 0;
+const react_1 = require("react");
+const useTimeout = (onTimeoutStop, duration) => {
+    const [timerId, setTimerId] = (0, react_1.useState)(null);
+    const removeTimeout = () => {
+        if (timerId) {
+            window.clearTimeout(timerId);
+            setTimerId(null);
+        }
+    };
+    const start = () => {
+        removeTimeout();
+        setTimerId(window.setTimeout(onStop, duration));
+    };
+    const onStop = () => {
+        removeTimeout();
+        onTimeoutStop();
+    };
+    (0, react_1.useEffect)(() => {
+        return () => {
+            removeTimeout();
+        };
+    }, [duration, onTimeoutStop]);
+    return { removeTimeout, startTimeout: start };
+};
+exports.useTimeout = useTimeout;
+//# sourceMappingURL=useTimeout.js.map

package/lib/Misc/useTimeout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTimeout.js","sourceRoot":"","sources":["../../src/Misc/useTimeout.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAEH,iCAA0C;AAE1C,MAAM,UAAU,GAAG,CAAC,aAAyB,EAAE,QAAgB,EAAE,EAAE;IACjE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IAE7C,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,OAAO,EAAE;YACX,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YAC7B,UAAU,CAAC,IAAI,CAAC,CAAC;SAClB;IACH,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,GAAG,EAAE;QACjB,aAAa,EAAE,CAAC;QAChB,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAClD,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,GAAG,EAAE;QAClB,aAAa,EAAE,CAAC;QAChB,aAAa,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,aAAa,EAAE,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;IAE9B,OAAO,EAAC,aAAa,EAAE,YAAY,EAAE,KAAK,EAAC,CAAC;AAC9C,CAAC,CAAC;AAEM,gCAAU"}

package/lib/Modal/Modal.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 __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.Modal = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const color_1 = __importDefault(require("color"));
+const Icon_1 = require("../Icon");
+const Identity_1 = require("../Identity");
+const mediaQueries_1 = require("../mediaQueries");
+const util_1 = require("../util");
+const Overlay_1 = require("./Overlay");
+const modalBodyStyle = (theme, { fullscreen = false }) => ({
+    alignItems: 'center',
+    backgroundColor: theme.general.backgroundColor,
+    borderRadius: fullscreen ? 0 : '8px',
+    bottom: fullscreen ? 0 : undefined,
+    boxShadow: fullscreen ? 'none' : '0 16px 64px 0 rgba(0, 0, 0, 0.16)',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: fullscreen ? 'center' : 'space-between',
+    left: fullscreen ? 0 : undefined,
+    margin: 'auto',
+    position: fullscreen ? 'fixed' : 'relative',
+    right: fullscreen ? 0 : undefined,
+    top: fullscreen ? 0 : undefined,
+    transform: 'translate3d(0, 0, 0)',
+    zIndex: 9999,
+    [mediaQueries_1.media[mediaQueries_1.QueryKeys.TABLET_DOWN]]: {
+        width: fullscreen ? 'initial' : '100%',
+    },
+});
+const filterModalBodyProps = (props) => (0, util_1.filterProps)(props, ['fullscreen']);
+const ModalBody = (props) => ((0, react_1.jsx)("div", Object.assign({ css: (theme) => modalBodyStyle(theme, props) }, filterModalBodyProps(props))));
+const ModalClose = (props) => ((0, react_1.jsx)(Icon_1.CloseIcon, Object.assign({ width: 16, height: 16, css: {
+        alignItems: 'center',
+        cursor: 'pointer',
+        display: 'flex',
+        justifyContent: 'center',
+        position: 'absolute',
+        right: 16,
+        top: 16,
+    } }, props)));
+const ModalContent = props => ((0, react_1.jsx)("div", Object.assign({ css: {
+        maxWidth: '100%',
+        overflowY: 'auto',
+        padding: '40px',
+    } }, props)));
+const modalBackgroundStyle = props => (Object.assign(Object.assign({}, (0, Overlay_1.overlayBackgroundStyle)(props)), { backgroundColor: 'rgba(50, 54, 57, 0.4)' }));
+const ModalBackground = (props) => (0, react_1.jsx)("div", Object.assign({ css: modalBackgroundStyle(props) }, props));
+const modalActionsWrapperStyles = () => ({
+    borderTop: `1px solid ${Identity_1.COLOR.GRAY_LIGHTEN_72}`,
+    bottom: 0,
+    display: 'flex',
+    div: {
+        '&:hover': {
+            backgroundColor: Identity_1.COLOR.opaque(Identity_1.COLOR.GRAY_DARKEN_72, 0.04),
+        },
+        '&:active': {
+            backgroundColor: Identity_1.COLOR.opaque(Identity_1.COLOR.GRAY_DARKEN_72, 0.08),
+        },
+        borderRight: `1px solid ${Identity_1.COLOR.GRAY_LIGHTEN_72}`,
+    },
+    'div:first-child': {
+        borderBottomLeftRadius: 8,
+    },
+    'div:last-child': {
+        borderBottomRightRadius: 8,
+        borderRight: 0,
+    },
+    position: 'absolute',
+    width: '100%',
+});
+const modalActionStyles = ({ bold }) => ({
+    '&:hover': {
+        color: (0, color_1.default)(Identity_1.COLOR.BLUE).mix((0, color_1.default)(Identity_1.COLOR.BLACK), 0.16).toString(),
+    },
+    color: Identity_1.COLOR.BLUE,
+    cursor: 'pointer',
+    display: 'flex',
+    flex: 1,
+    fontWeight: bold ? 'bold' : 'normal',
+    justifyContent: 'center',
+    padding: '8px 0',
+});
+const ModalActions = ({ actions }) => ((0, react_1.jsx)("div", { css: modalActionsWrapperStyles() }, actions.map(action => ((0, react_1.jsx)("div", { key: action.title, onClick: action.onClick, css: modalActionStyles({ bold: action.bold }), "data-uie-name": action.dataUieName }, action.title)))));
+const Modal = (_a) => {
+    var { actions = [], children, bodyStyle, fullscreen, onClose, onBackgroundClick } = _a, props = __rest(_a, ["actions", "children", "bodyStyle", "fullscreen", "onClose", "onBackgroundClick"]);
+    return ((0, react_1.jsx)(Overlay_1.OverlayWrapper, Object.assign({}, props, { "data-uie-name": "modal" }),
+        (0, react_1.jsx)(ModalBody, { fullscreen: fullscreen, style: bodyStyle },
+            (0, react_1.jsx)(ModalContent, null, children),
+            onClose !== util_1.noop && (0, react_1.jsx)(ModalClose, { onClick: onClose, "data-uie-name": "do-close" }),
+            actions.length > 0 && (0, react_1.jsx)(ModalActions, { actions: actions, "data-uie-name": "modal-actions" })),
+        !fullscreen && ((0, react_1.jsx)(ModalBackground, { onClick: onBackgroundClick === util_1.noop ? onClose : onBackgroundClick, "data-uie-name": "modal-background" }))));
+};
+exports.Modal = Modal;
+exports.Modal.defaultProps = {
+    actions: [],
+    fullscreen: false,
+    onBackgroundClick: util_1.noop,
+    onClose: util_1.noop,
+};
+//# sourceMappingURL=Modal.js.map

package/lib/Modal/Modal.js.map

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

package/lib/Modal/Overlay.js

@@ -0,0 +1,92 @@
+"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.Overlay = exports.OverlayBackground = exports.overlayBackgroundStyle = exports.OverlayContent = exports.OverlayWrapper = exports.overlayWrapperStyle = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const Identity_1 = require("../Identity");
+const motions_1 = require("../Identity/motions");
+const mediaQueries_1 = require("../mediaQueries");
+const util_1 = require("../util");
+const overlayWrapperStyle = () => ({
+    bottom: 0,
+    display: 'flex',
+    left: 0,
+    overflowY: 'auto',
+    padding: '24px',
+    position: 'fixed',
+    right: 0,
+    top: 0,
+    zIndex: 9997,
+});
+exports.overlayWrapperStyle = overlayWrapperStyle;
+const OverlayWrapper = (props) => (0, react_1.jsx)("div", Object.assign({ css: exports.overlayWrapperStyle }, props));
+exports.OverlayWrapper = OverlayWrapper;
+const OverlayContent = (props) => ((0, react_1.jsx)("div", Object.assign({ css: {
+        '*': {
+            color: Identity_1.COLOR.WHITE,
+        },
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        margin: 'auto',
+        maxWidth: '100%',
+        overflowY: 'auto',
+        position: 'relative',
+        transform: 'translate3d(0, 0, 0)',
+        zIndex: 9999,
+        [mediaQueries_1.media[mediaQueries_1.QueryKeys.TABLET_DOWN]]: {
+            width: '100%',
+        },
+    } }, props)));
+exports.OverlayContent = OverlayContent;
+const overlayBackgroundStyle = () => ({
+    animation: `${motions_1.ANIMATION.fadeIn} ${motions_1.DURATION.PROACTIVE_SLOW}ms ${motions_1.EASE.QUART}`,
+    background: 'rgba(0, 0, 0, 0.88)',
+    height: '100vh',
+    left: 0,
+    position: 'fixed',
+    top: 0,
+    width: '100vw',
+    zIndex: 9998,
+});
+exports.overlayBackgroundStyle = overlayBackgroundStyle;
+const OverlayBackground = (props) => (0, react_1.jsx)("div", Object.assign({ css: exports.overlayBackgroundStyle }, props));
+exports.OverlayBackground = OverlayBackground;
+const Overlay = (_a) => {
+    var { onBackgroundClick = util_1.noop, children = null } = _a, props = __rest(_a, ["onBackgroundClick", "children"]);
+    return ((0, react_1.jsx)(exports.OverlayWrapper, Object.assign({}, props, { "data-uie-name": "modal" }),
+        (0, react_1.jsx)(exports.OverlayContent, null, children),
+        (0, react_1.jsx)(exports.OverlayBackground, { onClick: onBackgroundClick, "data-uie-name": "overlay-background" })));
+};
+exports.Overlay = Overlay;
+//# sourceMappingURL=Overlay.js.map

package/lib/Modal/Overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.js","sourceRoot":"","sources":["../../src/Modal/Overlay.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAA8C;AAG9C,0CAAkC;AAClC,iDAA8D;AAC9D,kDAAiD;AACjD,kCAA6B;AAItB,MAAM,mBAAmB,GAAoD,GAAG,EAAE,CAAC,CAAC;IACzF,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,MAAM;IACf,IAAI,EAAE,CAAC;IACP,SAAS,EAAE,MAAM;IACjB,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,OAAO;IACjB,KAAK,EAAE,CAAC;IACR,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,IAAI;CACb,CAAC,CAAC;AAVU,QAAA,mBAAmB,uBAU7B;AAEI,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAE,EAAE,CAAC,wCAAK,GAAG,EAAE,2BAAmB,IAAM,KAAK,EAAI,CAAC;AAA9F,QAAA,cAAc,kBAAgF;AAEpG,MAAM,cAAc,GAAG,CAAC,KAAsC,EAAE,EAAE,CAAC,CACxE,wCACE,GAAG,EAAE;QACH,GAAG,EAAE;YACH,KAAK,EAAE,gBAAK,CAAC,KAAK;SACnB;QACD,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,cAAc,EAAE,eAAe;QAC/B,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,MAAM;QACjB,QAAQ,EAAE,UAAU;QACpB,SAAS,EAAE,sBAAsB;QACjC,MAAM,EAAE,IAAI;QACZ,CAAC,oBAAK,CAAC,wBAAS,CAAC,WAAW,CAAC,CAAC,EAAE;YAC9B,KAAK,EAAE,MAAM;SACd;KACF,IACG,KAAK,EACT,CACH,CAAC;AAtBW,QAAA,cAAc,kBAsBzB;AAIK,MAAM,sBAAsB,GAAuD,GAAG,EAAE,CAAC,CAAC;IAC/F,SAAS,EAAE,GAAG,mBAAS,CAAC,MAAM,IAAI,kBAAQ,CAAC,cAAc,MAAM,cAAI,CAAC,KAAK,EAAE;IAC3E,UAAU,EAAE,qBAAqB;IACjC,MAAM,EAAE,OAAO;IACf,IAAI,EAAE,CAAC;IACP,QAAQ,EAAE,OAAO;IACjB,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,IAAI;CACb,CAAC,CAAC;AATU,QAAA,sBAAsB,0BAShC;AAEI,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAE,EAAE,CAAC,wCAAK,GAAG,EAAE,8BAAsB,IAAM,KAAK,EAAI,CAAC;AAAvG,QAAA,iBAAiB,qBAAsF;AAM7G,MAAM,OAAO,GAAG,CAAC,EAAmE,EAAE,EAAE;QAAvE,EAAC,iBAAiB,GAAG,WAAI,EAAE,QAAQ,GAAG,IAAI,OAAyB,EAApB,KAAK,cAApD,iCAAqD,CAAD;IAAoB,OAAA,CAC9F,iBAAC,sBAAc,oBAAK,KAAK,qBAAgB,OAAO;QAC9C,iBAAC,sBAAc,QAAE,QAAQ,CAAkB;QAC3C,iBAAC,yBAAiB,IAAC,OAAO,EAAE,iBAAiB,mBAAgB,oBAAoB,GAAG,CACrE,CAClB,CAAA;CAAA,CAAC;AALW,QAAA,OAAO,WAKlB"}

package/lib/Modal/index.js

@@ -0,0 +1,39 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Overlay = void 0;
+__exportStar(require("./Modal"), exports);
+var Overlay_1 = require("./Overlay");
+Object.defineProperty(exports, "Overlay", { enumerable: true, get: function () { return Overlay_1.Overlay; } });
+//# sourceMappingURL=index.js.map

package/lib/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Modal/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;;;;AAEH,0CAAwB;AACxB,qCAAkC;AAA1B,kGAAA,OAAO,OAAA"}