@wireapp/react-ui-kit 9.0.0 → 9.0.2

package/lib/Identity/Animation.js

@@ -0,0 +1,127 @@
+"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.BottomUpMovement = exports.TopDownMovement = exports.RightLeftMovement = exports.LeftRightMovement = exports.Slide = exports.XAxisMovement = exports.YAxisMovement = exports.Opacity = exports.Transition = exports.TransitionContainer = void 0;
+const { CSSTransition, TransitionGroup } = require('react-transition-group');
+const react_1 = require("@emotion/react");
+const react_2 = __importDefault(require("react"));
+const motions_1 = require("./motions");
+const TransitionContainer = (props) => react_2.default.createElement(TransitionGroup, Object.assign({}, props));
+exports.TransitionContainer = TransitionContainer;
+const Transition = (_a) => {
+    var { animationStyle, timeout, component = 'div', children } = _a, props = __rest(_a, ["animationStyle", "timeout", "component", "children"]);
+    return (react_2.default.createElement(react_1.ClassNames, null, ({ css }) => (react_2.default.createElement(CSSTransition, Object.assign({ timeout: timeout, classNames: css(animationStyle) }, props), component ? react_2.default.createElement(component, {}, children) : children))));
+};
+exports.Transition = Transition;
+const Opacity = (_a) => {
+    var { startValue = 0, endValue = 1, timeout = motions_1.DURATION.DEFAULT } = _a, props = __rest(_a, ["startValue", "endValue", "timeout"]);
+    return (react_2.default.createElement(exports.Transition, Object.assign({ animationStyle: {
+            '&-enter': { opacity: startValue },
+            '&-enter-active': {
+                opacity: endValue,
+                transition: `all ${timeout}ms ${motions_1.EASE.QUART}`,
+            },
+            '&-exit': { opacity: endValue },
+            '&-exit-active': {
+                opacity: startValue,
+                pointerEvents: 'none',
+                transition: `all ${timeout}ms ${motions_1.EASE.QUART}`,
+            },
+            '&-exit-done': { opacity: startValue },
+        }, timeout: timeout }, props)));
+};
+exports.Opacity = Opacity;
+const YAxisMovement = (_a) => {
+    var { startValue = '-100%', endValue = '0%', timeout = motions_1.DURATION.DEFAULT } = _a, props = __rest(_a, ["startValue", "endValue", "timeout"]);
+    return (react_2.default.createElement(exports.Transition, Object.assign({ animationStyle: {
+            '&-enter': { transform: `translateY(${startValue})` },
+            '&-enter-active': {
+                transform: `translateY(${endValue})`,
+                transition: `all ${timeout}ms ${motions_1.EASE.EXPONENTIAL}`,
+            },
+            '&-exit': { transform: `translateY(${endValue})` },
+            '&-exit-active': {
+                pointerEvents: 'none',
+                transform: `translateY(${startValue})`,
+                transition: `all ${timeout}ms ${motions_1.EASE.EXPONENTIAL}`,
+            },
+            '&-exit-done': { transform: `translateY(${startValue})` },
+        }, timeout: timeout }, props)));
+};
+exports.YAxisMovement = YAxisMovement;
+const XAxisMovement = (_a) => {
+    var { startValue = '-100%', endValue = '0%', timeout = motions_1.DURATION.DEFAULT } = _a, props = __rest(_a, ["startValue", "endValue", "timeout"]);
+    return (react_2.default.createElement(exports.Transition, Object.assign({ animationStyle: {
+            '&-enter': { transform: `translateX(${startValue})` },
+            '&-enter-active': {
+                transform: `translateX(${endValue})`,
+                transition: `all ${timeout}ms ${motions_1.EASE.EXPONENTIAL}`,
+            },
+            '&-exit': { transform: `translateX(${endValue})` },
+            '&-exit-active': {
+                pointerEvents: 'none',
+                transform: `translateX(${startValue})`,
+                transition: `all ${timeout}ms ${motions_1.EASE.EXPONENTIAL}`,
+            },
+            '&-exit-done': { transform: `translateX(${startValue})` },
+        }, timeout: timeout }, props)));
+};
+exports.XAxisMovement = XAxisMovement;
+const Slide = (_a) => {
+    var { startValue = '-100%', endValue = '0%', timeout = motions_1.DURATION.DEFAULT } = _a, props = __rest(_a, ["startValue", "endValue", "timeout"]);
+    return (react_2.default.createElement(exports.Transition, Object.assign({ animationStyle: {
+            '&-enter': { marginTop: startValue },
+            '&-enter-active': {
+                marginTop: endValue,
+                transition: `all ${timeout}ms ${motions_1.EASE.QUART}`,
+            },
+            '&-exit': { marginTop: endValue },
+            '&-exit-active': {
+                marginTop: startValue,
+                pointerEvents: 'none',
+                transition: `all ${timeout}ms ${motions_1.EASE.QUART}`,
+            },
+            '&-exit-done': { marginTop: startValue },
+        }, timeout: timeout }, props)));
+};
+exports.Slide = Slide;
+const LeftRightMovement = props => react_2.default.createElement(exports.XAxisMovement, Object.assign({ startValue: "-100vh", endValue: "0vh" }, props));
+exports.LeftRightMovement = LeftRightMovement;
+const RightLeftMovement = props => react_2.default.createElement(exports.XAxisMovement, Object.assign({ startValue: "100vh", endValue: "0vh" }, props));
+exports.RightLeftMovement = RightLeftMovement;
+const TopDownMovement = props => react_2.default.createElement(exports.YAxisMovement, Object.assign({ startValue: "-100%", endValue: "0%" }, props));
+exports.TopDownMovement = TopDownMovement;
+const BottomUpMovement = props => react_2.default.createElement(exports.YAxisMovement, Object.assign({ startValue: "100%", endValue: "0%" }, props));
+exports.BottomUpMovement = BottomUpMovement;
+//# sourceMappingURL=Animation.js.map

package/lib/Identity/Animation.js.map

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

package/lib/Identity/Avatar.js

@@ -0,0 +1,90 @@
+"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.Avatar = exports.DEFAULT_AVATAR_SIZE = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const Misc_1 = require("../Misc/");
+const util_1 = require("../util");
+const colors_1 = require("./colors");
+const motions_1 = require("./motions");
+exports.DEFAULT_AVATAR_SIZE = 28;
+const avatarStyle = ({ color = colors_1.COLOR.WHITE, url, borderColor, backgroundColor = colors_1.COLOR.GRAY, size = exports.DEFAULT_AVATAR_SIZE, isAvatarGridItem, }) => {
+    const BORDER_SIZE_LIMIT = 32;
+    const borderSize = size > BORDER_SIZE_LIMIT ? 2 : 1;
+    const borderWidth = url ? 0 : borderSize;
+    const fontSize = `${Math.ceil(size / 2.2)}px`;
+    return {
+        alignItems: 'center',
+        backgroundColor: backgroundColor,
+        borderRadius: isAvatarGridItem ? '0' : '50%',
+        boxShadow: isAvatarGridItem ? 'none' : `inset 0 0 0 ${borderWidth}px ${borderColor}`,
+        color,
+        display: 'flex',
+        fontSize,
+        fontWeight: isAvatarGridItem ? 700 : 300,
+        height: `${size}px`,
+        justifyContent: 'center',
+        minHeight: `${size}px`,
+        minWidth: `${size}px`,
+        overflow: 'hidden',
+        width: `${size}px`,
+    };
+};
+const filteredAvatarProps = (props) => (0, util_1.filterProps)(props, [
+    'size',
+    'forceInitials',
+    'name',
+    'url',
+    'borderColor',
+    'backgroundColor',
+    'fetchImage',
+    'isAvatarGridItem',
+]);
+const Avatar = (props) => {
+    const { url, forceInitials, name, fetchImage, isAvatarGridItem } = props;
+    const [scale, setScale] = (0, react_2.useState)(0);
+    (0, react_2.useEffect)(() => {
+        if (url) {
+            requestAnimationFrame(() => setScale(1));
+        }
+    }, [url]);
+    const getInitials = (name = '') => name
+        .split(' ')
+        .filter(Boolean)
+        .map(([initial]) => initial.toUpperCase())
+        .join('')
+        .substring(0, isAvatarGridItem ? 1 : 2);
+    return ((0, react_1.jsx)(Misc_1.IsInViewport, Object.assign({ checkViewportOnce: true, onEnterViewport: fetchImage, disabled: !!url, css: avatarStyle(props), "data-uie-name": !forceInitials && url ? 'element-avatar-image' : 'element-avatar-initials' }, filteredAvatarProps(props)), forceInitials || !url ? (getInitials(name)) : ((0, react_1.jsx)("div", { css: {
+            backgroundImage: url && `url(${url})`,
+            backgroundPosition: 'center',
+            backgroundSize: 'cover',
+            borderRadius: isAvatarGridItem ? '0' : '50%',
+            minHeight: '100%',
+            minWidth: '100%',
+            opacity: scale,
+            transform: `scale(${scale})`,
+            transition: `all ${motions_1.DURATION.DEFAULT}ms ${motions_1.EASE.QUART}`,
+            width: '100%',
+        } }))));
+};
+exports.Avatar = Avatar;
+//# sourceMappingURL=Avatar.js.map

package/lib/Identity/Avatar.js.map

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

package/lib/Identity/AvatarGrid.js

@@ -0,0 +1,72 @@
+"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 __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.AvatarGrid = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const Misc_1 = require("../Misc/");
+const util_1 = require("../util");
+const Avatar_1 = require("./Avatar");
+const colors_1 = require("./colors");
+const avatarGridStyle = ({ borderWidth, size, backgroundColor = colors_1.COLOR.GRAY_DARKEN_48, borderColor = colors_1.COLOR.GRAY_DARKEN_48, }) => {
+    return {
+        alignItems: 'start',
+        backgroundColor: backgroundColor,
+        border: `${borderWidth}px solid ${borderColor}`,
+        borderRadius: '16%',
+        display: 'grid',
+        gridGap: borderWidth,
+        gridTemplateColumns: 'repeat(2, 1fr)',
+        gridTemplateRows: 'repeat(2, 1fr)',
+        height: `${size}px`,
+        justifyItems: 'center',
+        minWidth: `${size}px`,
+        overflow: 'hidden',
+        width: `${size}px`,
+    };
+};
+const filteredAvatarGridProps = (props) => (0, util_1.filterProps)(props, ['backgroundColor', 'borderColor', 'items', 'size', 'borderWidth']);
+const AvatarGrid = (_a) => {
+    var { borderWidth = 1, size = Avatar_1.DEFAULT_AVATAR_SIZE, items, fetchImages } = _a, props = __rest(_a, ["borderWidth", "size", "items", "fetchImages"]);
+    const allProps = Object.assign({ borderWidth, items, size }, props);
+    const slicedItems = items.slice(0, 4);
+    const missing = 4 - slicedItems.length;
+    for (let index = 0; index < missing; index++) {
+        slicedItems.push(null);
+    }
+    return ((0, react_1.jsx)(Misc_1.IsInViewport, Object.assign({ checkViewportOnce: true, onEnterViewport: fetchImages, css: avatarGridStyle(allProps) }, filteredAvatarGridProps(allProps)), slicedItems.map(item => item ? ((0, react_1.jsx)(Avatar_1.Avatar, { key: Math.random().toString(), backgroundColor: item.backgroundColor || colors_1.COLOR.GRAY_DARKEN_80, url: item.url, color: item.color, forceInitials: item.forceInitials, isAvatarGridItem: true, name: item.name, size: size / 2 - borderWidth, style: { height: '100%', width: '100%' } })) : ((0, react_1.jsx)("div", { key: Math.random().toString(), css: {
+            backgroundColor: colors_1.COLOR.GRAY_DARKEN_80,
+            height: '100%',
+            width: '100%',
+        } })))));
+};
+exports.AvatarGrid = AvatarGrid;
+//# sourceMappingURL=AvatarGrid.js.map

package/lib/Identity/AvatarGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGrid.js","sourceRoot":"","sources":["../../src/Identity/AvatarGrid.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAA8C;AAI9C,mCAAsC;AACtC,kCAAoC;AACpC,qCAAqD;AACrD,qCAA+B;AAW/B,MAAM,eAAe,GAAsC,CAAC,EAC1D,WAAW,EACX,IAAI,EACJ,eAAe,GAAG,cAAK,CAAC,cAAc,EACtC,WAAW,GAAG,cAAK,CAAC,cAAc,GACnC,EAAE,EAAE;IACH,OAAO;QACL,UAAU,EAAE,OAAO;QACnB,eAAe,EAAE,eAAe;QAChC,MAAM,EAAE,GAAG,WAAW,YAAY,WAAW,EAAE;QAC/C,YAAY,EAAE,KAAK;QACnB,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,WAAW;QACpB,mBAAmB,EAAE,gBAAgB;QACrC,gBAAgB,EAAE,gBAAgB;QAClC,MAAM,EAAE,GAAG,IAAI,IAAI;QACnB,YAAY,EAAE,QAAQ;QACtB,QAAQ,EAAE,GAAG,IAAI,IAAI;QACrB,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,GAAG,IAAI,IAAI;KACnB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAE,EAAE,CAC/C,IAAA,kBAAW,EAAC,KAAK,EAAE,CAAC,iBAAiB,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC;AAElF,MAAM,UAAU,GAAG,CAAC,EAAkF,EAAE,EAAE;QAAtF,EAAC,WAAW,GAAG,CAAC,EAAE,IAAI,GAAG,4BAAmB,EAAE,KAAK,EAAE,WAAW,OAAkB,EAAb,KAAK,cAA1E,+CAA2E,CAAD;IACnG,MAAM,QAAQ,mBAAI,WAAW,EAAE,KAAK,EAAE,IAAI,IAAK,KAAK,CAAC,CAAC;IACtD,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACtC,MAAM,OAAO,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC;IACvC,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,OAAO,EAAE,KAAK,EAAE,EAAE;QAC5C,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACxB;IACD,OAAO,CACL,iBAAC,mBAAY,kBACX,iBAAiB,QACjB,eAAe,EAAE,WAAW,EAC5B,GAAG,EAAE,eAAe,CAAC,QAAQ,CAAC,IAC1B,uBAAuB,CAAC,QAAQ,CAAC,GAEpC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACtB,IAAI,CAAC,CAAC,CAAC,CACL,iBAAC,eAAM,IACL,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,EAC7B,eAAe,EAAE,IAAI,CAAC,eAAe,IAAI,cAAK,CAAC,cAAc,EAC7D,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,QAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,GAAG,CAAC,GAAG,WAAW,EAC5B,KAAK,EAAE,EAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAC,GACtC,CACH,CAAC,CAAC,CAAC,CACF,0BACE,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,EAC7B,GAAG,EAAE;YACH,eAAe,EAAE,cAAK,CAAC,cAAc;YACrC,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd,GACD,CACH,CACF,CACY,CAChB,CAAC;AACJ,CAAC,CAAC;AAxCW,QAAA,UAAU,cAwCrB"}

package/lib/Identity/Logo.js

@@ -0,0 +1,53 @@
+"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.Logo = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const SVGIcon_1 = require("../Icon/SVGIcon");
+const motions_1 = require("../Identity/motions");
+const colors_1 = require("./colors");
+const logoStyle = (theme, { hover, color = theme.general.color }) => ({
+    '&:hover path': {
+        fill: hover ? colors_1.COLOR.shade(color, 0.06) : undefined,
+    },
+    path: {
+        fill: color,
+        transition: motions_1.defaultTransition,
+    },
+});
+const Logo = (_a) => {
+    var { hover } = _a, props = __rest(_a, ["hover"]);
+    return ((0, react_1.jsx)(SVGIcon_1.SVGIcon, Object.assign({ realWidth: 57, realHeight: 18, css: (theme) => logoStyle(theme, Object.assign({ hover }, props)) }, props),
+        (0, react_1.jsx)("path", { d: "M10.857 14.767a5.45 5.45 0 0 1-1.277-3.51l.002-8.688c0-.708.573-1.284 1.277-1.284s1.277.576 1.277 1.284l-.002 8.687a5.45 5.45 0 0 1-1.277 3.51zm9.58-3.51c0 3.01-2.409 5.458-5.402 5.458a5.413 5.413 0 0 1-3.233-1.073 6.72 6.72 0 0 0 1.61-4.386l.002-8.687A2.565 2.565 0 0 0 10.859 0a2.565 2.565 0 0 0-2.555 2.569l-.002 8.687c0 1.675.64 3.206 1.65 4.386a5.413 5.413 0 0 1-3.233 1.073c-2.993 0-5.442-2.449-5.442-5.459V.66H0v10.597C0 14.975 3.035 18 6.733 18a6.681 6.681 0 0 0 4.164-1.458A6.587 6.587 0 0 0 15.028 18c3.698 0 6.686-3.025 6.686-6.744V.66h-1.278v10.597zm5.11 6.403h1.278V.624h-1.277V17.66zM38.008.327a7.337 7.337 0 0 0-6.073 3.233V.624h-1.278V17.66h1.278V7.72c0-3.367 2.725-6.106 6.073-6.106V.327zm2.394 13.705c-2.485-2.965-2.342-7.416.432-10.208a7.478 7.478 0 0 1 10.141-.436L40.401 14.032zM52.784 3.386a8.75 8.75 0 0 0-12.854-.471c-3.424 3.446-3.424 9.054 0 12.5a8.75 8.75 0 0 0 12.417.002l-.903-.91a7.478 7.478 0 0 1-10.14.434l5.285-5.32 6.195-6.235zM53.964.77h.447v1.16h.136V.77h.45V.643h-1.033V.77zM56.34.643l-.445 1.116L55.45.643h-.21v1.286h.131V.779l.457 1.15h.124l.455-1.145v1.145h.132V.643h-.201z" })));
+};
+exports.Logo = Logo;
+//# sourceMappingURL=Logo.js.map

package/lib/Identity/Logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.js","sourceRoot":"","sources":["../../src/Identity/Logo.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAA8C;AAE9C,6CAAsD;AACtD,iDAAsD;AAEtD,qCAA+B;AAM/B,MAAM,SAAS,GAAwD,CACrE,KAAK,EACL,EAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAC,EACpC,EAAE,CAAC,CAAC;IACJ,cAAc,EAAE;QACd,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,cAAK,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS;KACnD;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,KAAK;QACX,UAAU,EAAE,2BAAiB;KAC9B;CACF,CAAC,CAAC;AAEI,MAAM,IAAI,GAAG,CAAC,EAA4B,EAAE,EAAE;QAAhC,EAAC,KAAK,OAAsB,EAAjB,KAAK,cAAhB,SAAiB,CAAD;IAAiB,OAAA,CACpD,iBAAC,iBAAO,kBAAC,SAAS,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,kBAAG,KAAK,IAAK,KAAK,EAAE,IAAM,KAAK;QAC3G,2BAAM,CAAC,EAAC,2lCAA2lC,GAAG,CAC9lC,CACX,CAAA;CAAA,CAAC;AAJW,QAAA,IAAI,QAIf"}

package/lib/Identity/colors-v2.js

@@ -0,0 +1,198 @@
+"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.COLOR_V2 = exports.BASE_DARK_COLOR = exports.BASE_LIGHT_COLOR = void 0;
+exports.BASE_LIGHT_COLOR = {
+    BLUE: '#0667c8',
+    GREEN: '#1d7833',
+    TURQUOISE: '#01718e',
+    PURPLE: '#8944ab',
+    RED: '#c20013',
+    AMBER: '#a25915',
+};
+exports.BASE_DARK_COLOR = {
+    BLUE: '#54a6ff',
+    GREEN: '#30db5b',
+    TURQUOISE: '#5de6ff',
+    PURPLE: '#da8fff',
+    RED: '#ff7770',
+    AMBER: '#ffd426',
+};
+const LIGHT_BLUE = {
+    BLUE_LIGHT_50: '#e7f0fa',
+    BLUE_LIGHT_100: '#cde1f4',
+    BLUE_LIGHT_200: '#9bc2e9',
+    BLUE_LIGHT_300: '#6aa4de',
+    BLUE_LIGHT_400: '#3885d3',
+    BLUE_LIGHT_500: exports.BASE_LIGHT_COLOR.BLUE,
+    BLUE_LIGHT_600: '#0552a0',
+    BLUE_LIGHT_700: '#043e78',
+    BLUE_LIGHT_800: '#022950',
+    BLUE_LIGHT_900: '#19324d',
+};
+const DARK_BLUE = {
+    BLUE_DARK_50: '#eef7ff',
+    BLUE_DARK_100: '#ddedff',
+    BLUE_DARK_200: '#bbdbff',
+    BLUE_DARK_300: '#98caff',
+    BLUE_DARK_400: '#76b8ff',
+    BLUE_DARK_500: exports.BASE_DARK_COLOR.BLUE,
+    BLUE_DARK_600: '#4385cc',
+    BLUE_DARK_700: '#326499',
+    BLUE_DARK_800: '#224266',
+    BLUE_DARK_900: '#19324d',
+};
+const LIGHT_GREEN = {
+    GREEN_LIGHT_50: '#e8f1ea',
+    GREEN_LIGHT_100: '#d2e4d6',
+    GREEN_LIGHT_200: '#a5c9ad',
+    GREEN_LIGHT_300: '#77ae85',
+    GREEN_LIGHT_400: '#4a935c',
+    GREEN_LIGHT_500: exports.BASE_LIGHT_COLOR.GREEN,
+    GREEN_LIGHT_600: '#176029',
+    GREEN_LIGHT_700: '#11481f',
+    GREEN_LIGHT_800: '#0c3014',
+    GREEN_LIGHT_900: '#0e421b',
+};
+const DARK_GREEN = {
+    GREEN_DARK_50: '#ebfcef',
+    GREEN_DARK_100: '#d6f8de',
+    GREEN_DARK_200: '#acf1bd',
+    GREEN_DARK_300: '#83e99d',
+    GREEN_DARK_400: '#59e27c',
+    GREEN_DARK_500: exports.BASE_DARK_COLOR.GREEN,
+    GREEN_DARK_600: '#26af49',
+    GREEN_DARK_700: '#1d8337',
+    GREEN_DARK_800: '#135824',
+    GREEN_DARK_900: '#0e421b',
+};
+const LIGHT_TURQUOISE = {
+    TURQUOISE_LIGHT_50: '#e5f1f3',
+    TURQUOISE_LIGHT_100: '#cce2e7',
+    TURQUOISE_LIGHT_200: '#99c6d0',
+    TURQUOISE_LIGHT_300: '#67a9b8',
+    TURQUOISE_LIGHT_400: '#348da1',
+    TURQUOISE_LIGHT_500: exports.BASE_LIGHT_COLOR.TURQUOISE,
+    TURQUOISE_LIGHT_600: '#015a6e',
+    TURQUOISE_LIGHT_700: '#014352',
+    TURQUOISE_LIGHT_800: '#002d37',
+    TURQUOISE_LIGHT_900: '#1c454d',
+};
+const DARK_TURQUOISE = {
+    TURQUOISE_DARK_50: '#effdff',
+    TURQUOISE_DARK_100: '#dffaff',
+    TURQUOISE_DARK_200: '#bef5ff',
+    TURQUOISE_DARK_300: '#9ef0ff',
+    TURQUOISE_DARK_400: '#7debff',
+    TURQUOISE_DARK_500: exports.BASE_DARK_COLOR.TURQUOISE,
+    TURQUOISE_DARK_600: '#4Ab8cc',
+    TURQUOISE_DARK_700: '#388a99',
+    TURQUOISE_DARK_800: '#255c66',
+    TURQUOISE_DARK_900: '#1c454d',
+};
+const LIGHT_PURPLE = {
+    PURPLE_LIGHT_50: '#f4edf7',
+    PURPLE_LIGHT_100: '#e7daee',
+    PURPLE_LIGHT_200: '#d0b4dd',
+    PURPLE_LIGHT_300: '#b88fcd',
+    PURPLE_LIGHT_400: '#a169bc',
+    PURPLE_LIGHT_500: exports.BASE_LIGHT_COLOR.PURPLE,
+    PURPLE_LIGHT_600: '#6e3689',
+    PURPLE_LIGHT_700: '#522967',
+    PURPLE_LIGHT_800: '#371b44',
+    PURPLE_LIGHT_900: '#412b4d',
+};
+const DARK_PURPLE = {
+    PURPLE_DARK_50: '#fcf4ff',
+    PURPLE_DARK_100: '#f8e9ff',
+    PURPLE_DARK_200: '#f0d2ff',
+    PURPLE_DARK_300: '#e9bcff',
+    PURPLE_DARK_400: '#e1a5ff',
+    PURPLE_DARK_500: exports.BASE_DARK_COLOR.PURPLE,
+    PURPLE_DARK_600: '#ae72cc',
+    PURPLE_DARK_700: '#835699',
+    PURPLE_DARK_800: '#573966',
+    PURPLE_DARK_900: '#412b4d',
+};
+const LIGHT_RED = {
+    RED_LIGHT_50: '#f9e6e8',
+    RED_LIGHT_100: '#f3ccd0',
+    RED_LIGHT_200: '#e799a1',
+    RED_LIGHT_300: '#da6671',
+    RED_LIGHT_400: '#ce3342',
+    RED_LIGHT_500: exports.BASE_LIGHT_COLOR.RED,
+    RED_LIGHT_600: '#9b000f',
+    RED_LIGHT_700: '#74000b',
+    RED_LIGHT_800: '#4e0008',
+    RED_LIGHT_900: '#4d2422',
+};
+const DARK_RED = {
+    RED_DARK_50: '#fff2f1',
+    RED_DARK_100: '#ffe4e2',
+    RED_DARK_200: '#ffc9c6',
+    RED_DARK_300: '#ffada9',
+    RED_DARK_400: '#ff928d',
+    RED_DARK_500: exports.BASE_DARK_COLOR.RED,
+    RED_DARK_600: '#cc5f5a',
+    RED_DARK_700: '#994743',
+    RED_DARK_800: '#66302d',
+    RED_DARK_900: '#4d2422',
+};
+const LIGHT_AMBER = {
+    AMBER_LIGHT_50: '#f6eee8',
+    AMBER_LIGHT_100: '#ecded0',
+    AMBER_LIGHT_200: '#dabda1',
+    AMBER_LIGHT_300: '#c79b73',
+    AMBER_LIGHT_400: '#b57A44',
+    AMBER_LIGHT_500: exports.BASE_LIGHT_COLOR.AMBER,
+    AMBER_LIGHT_600: '#824711',
+    AMBER_LIGHT_700: '#61350d',
+    AMBER_LIGHT_800: '#412408',
+    AMBER_LIGHT_900: '#201204',
+};
+const DARK_AMBER = {
+    AMBER_DARK_50: '#fffbea',
+    AMBER_DARK_100: '#fff6d4',
+    AMBER_DARK_200: '#ffeea8',
+    AMBER_DARK_300: '#ffe57d',
+    AMBER_DARK_400: '#ffdd51',
+    AMBER_DARK_500: exports.BASE_DARK_COLOR.AMBER,
+    AMBER_DARK_600: '#ccaa1e',
+    AMBER_DARK_700: '#997f17',
+    AMBER_DARK_800: '#66550f',
+    AMBER_DARK_900: '#4d400b',
+};
+const DARK = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, DARK_BLUE), DARK_GREEN), DARK_TURQUOISE), DARK_PURPLE), DARK_RED), DARK_AMBER);
+const LIGHT = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, LIGHT_BLUE), LIGHT_GREEN), LIGHT_TURQUOISE), LIGHT_PURPLE), LIGHT_RED), LIGHT_AMBER);
+const GRAYS = {
+    GRAY_10: '#fafafa',
+    GRAY_20: '#edeff0',
+    GRAY_30: '#e5e8ea',
+    GRAY_40: '#dce0e3',
+    GRAY_50: '#cbced1',
+    GRAY_60: '#9fa1a7',
+    GRAY_70: '#676b71',
+    GRAY_80: '#54585f',
+    GRAY_90: '#34373d',
+    GRAY_95: '#26272c',
+    GRAY_100: '#17181a',
+};
+exports.COLOR_V2 = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, exports.BASE_DARK_COLOR), exports.BASE_LIGHT_COLOR), DARK), LIGHT), GRAYS), { BLACK: '#000', WHITE: '#fff' });
+//# sourceMappingURL=colors-v2.js.map

package/lib/Identity/colors-v2.js.map

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

package/lib/Identity/colors.js

@@ -0,0 +1,81 @@
+"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.COLOR = void 0;
+const color_1 = __importDefault(require("color"));
+const steps = [];
+const percent = 100;
+for (let index = 8; index < percent; index += 8) {
+    steps.push(index);
+}
+function shade(color, amount = 0.08) {
+    return (0, color_1.default)(color).mix((0, color_1.default)(BASE_COLOR.BLACK), amount).toString();
+}
+function tint(color, amount) {
+    return (0, color_1.default)(color).mix((0, color_1.default)(BASE_COLOR.WHITE), amount).toString();
+}
+function opaque(color, amount) {
+    return (0, color_1.default)(color)
+        .fade(1 - amount)
+        .toString();
+}
+const BASE_COLOR = {
+    BLACK: '#000',
+    BLUE: '#0772de',
+    GRAY: '#696c6e',
+    GREEN: '#00c800',
+    ORANGE: '#ff8900',
+    RED: '#e02020',
+    WHITE: '#fff',
+    YELLOW: '#febf02',
+};
+const DARK_COLOR = {};
+const LIGHT_COLOR = {};
+const OPAQUE_COLOR = {};
+Object.entries({
+    BLACK: BASE_COLOR.BLACK,
+    GRAY: BASE_COLOR.GRAY,
+    WHITE: BASE_COLOR.WHITE,
+}).forEach(([key, value]) => {
+    steps.forEach(step => {
+        const amount = step / percent;
+        DARK_COLOR[`${key}_DARKEN_${step}`] = shade(value, amount);
+        LIGHT_COLOR[`${key}_LIGHTEN_${step}`] = tint(value, amount);
+    });
+});
+Object.entries(BASE_COLOR).forEach(([key, value]) => {
+    steps.forEach(step => {
+        const amount = step / percent;
+        OPAQUE_COLOR[`${key}_OPAQUE_${step}`] = opaque(value, amount);
+    });
+});
+const COMPONENT_COLOR = {
+    DISABLED: opaque(DARK_COLOR.GRAY_DARKEN_32, 0.16),
+    ICON: DARK_COLOR.GRAY_DARKEN_72,
+    LINK: DARK_COLOR.GRAY_DARKEN_72,
+    TEXT: DARK_COLOR.GRAY_DARKEN_72,
+};
+exports.COLOR = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, BASE_COLOR), DARK_COLOR), LIGHT_COLOR), OPAQUE_COLOR), COMPONENT_COLOR), { BLACK: BASE_COLOR.BLACK, WHITE: BASE_COLOR.WHITE, opaque,
+    shade,
+    tint });
+//# sourceMappingURL=colors.js.map