@wireapp/react-ui-kit 9.59.1 → 9.59.2

package/lib/Identity/Animation/Animation.stories.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomizableAnimation = exports.AllAnimations = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2025 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/.
+ *
+ */
+const react_1 = require("react");
+const Animation_1 = require("./Animation");
+const colors_1 = require("../colors/colors");
+const meta = {
+    title: 'Identity/Animation',
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)("div", { style: { padding: '24px', maxWidth: '600px', margin: '0 auto' }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+};
+exports.default = meta;
+const AnimationDemo = ({ title, children, }) => {
+    const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
+    const toggle = () => setIsAnimating(!isAnimating);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '32px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '16px' }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { marginBottom: '8px' }, children: title }), (0, jsx_runtime_1.jsx)("button", { onClick: toggle, style: {
+                            backgroundColor: colors_1.COLOR.BLUE,
+                            border: 'none',
+                            borderRadius: '4px',
+                            color: colors_1.COLOR.WHITE,
+                            cursor: 'pointer',
+                            padding: '8px 16px',
+                        }, children: "Toggle Animation" })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    backgroundColor: colors_1.COLOR.GRAY_LIGHTEN_72,
+                    borderRadius: '4px',
+                    minHeight: '100px',
+                    padding: '24px',
+                }, children: children(isAnimating, toggle) })] }));
+};
+const AllAnimations = () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(AnimationDemo, { title: "Opacity", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.Opacity, { in: isAnimating, children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Fade in/out content" }) })) }), (0, jsx_runtime_1.jsx)(AnimationDemo, { title: "Top Down Movement", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.TopDownMovement, { in: isAnimating, children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Moving from top" }) })) }), (0, jsx_runtime_1.jsx)(AnimationDemo, { title: "Bottom Up Movement", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.BottomUpMovement, { in: isAnimating, children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Moving from bottom" }) })) }), (0, jsx_runtime_1.jsx)(AnimationDemo, { title: "Y-Axis Movement", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.YAxisMovement, { in: isAnimating, startValue: "50%", endValue: "-50%", children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Custom vertical movement" }) })) }), (0, jsx_runtime_1.jsx)(AnimationDemo, { title: "Left Right Movement", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.LeftRightMovement, { in: isAnimating, children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Moving from left" }) })) }), (0, jsx_runtime_1.jsx)(AnimationDemo, { title: "Right Left Movement", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.RightLeftMovement, { in: isAnimating, children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Moving from right" }) })) }), (0, jsx_runtime_1.jsx)(AnimationDemo, { title: "X-Axis Movement", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.XAxisMovement, { in: isAnimating, startValue: "10vh", endValue: "-10vh", children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Custom horizontal movement" }) })) }), (0, jsx_runtime_1.jsx)(AnimationDemo, { title: "Combined Animations", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.TopDownMovement, { in: isAnimating, children: (0, jsx_runtime_1.jsx)(Animation_1.Opacity, { in: isAnimating, children: (0, jsx_runtime_1.jsx)(Animation_1.XAxisMovement, { in: isAnimating, startValue: "40vh", endValue: "10vh", children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Combined fade, vertical and horizontal movement" }) }) }) })) })] }));
+exports.AllAnimations = AllAnimations;
+exports.CustomizableAnimation = {
+    render: function Render() {
+        const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
+        const toggle = () => setIsAnimating(!isAnimating);
+        return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { onClick: toggle, style: {
+                        backgroundColor: colors_1.COLOR.BLUE,
+                        border: 'none',
+                        borderRadius: '4px',
+                        color: colors_1.COLOR.WHITE,
+                        cursor: 'pointer',
+                        marginBottom: '24px',
+                        padding: '8px 16px',
+                    }, children: "Toggle Animation" }), (0, jsx_runtime_1.jsx)(Animation_1.Opacity, { in: isAnimating, timeout: 2000, children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Customizable animation duration (2 seconds)" }) })] }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Animations can be customized with different durations and timing functions.',
+            },
+        },
+    },
+};

package/lib/Identity/Animation/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Animation';
+//# sourceMappingURL=index.d.ts.map

package/lib/Identity/Animation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Identity/Animation/index.ts"],"names":[],"mappings":"AAmBA,cAAc,aAAa,CAAC"}

package/lib/Identity/Animation/index.js

@@ -0,0 +1,35 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2025 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("./Animation"), exports);

package/lib/Identity/GlobalCssVariables/GlobalCssVariables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalCssVariables.d.ts","sourceRoot":"","sources":["../../../src/Identity/GlobalCssVariables/GlobalCssVariables.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAuQzC,eAAO,MAAM,kBAAkB;iBAlQZ,SAAS;gBA8GV,SAAS;wBA8GD,SAAS;oBAkBb,SAAS;CAyB9B,CAAC"}

package/lib/Identity/GlobalCssVariables/GlobalCssVariables.js

@@ -0,0 +1,239 @@
+"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.GlobalCssVariables = void 0;
+const colors_1 = require("../colors");
+const colors_v2_1 = require("../colors-v2");
+const light = () => ({
+    // Checkbox
+    '--checkbox-background': colors_v2_1.COLOR_V2.GRAY_20,
+    '--checkbox-background-disabled': colors_v2_1.COLOR_V2.GRAY_10,
+    '--checkbox-background-disabled-selected': colors_v2_1.COLOR_V2.GRAY_60,
+    '--checkbox-border': colors_v2_1.COLOR_V2.GRAY_80,
+    '--checkbox-border-disabled': colors_v2_1.COLOR_V2.GRAY_70,
+    // Icon Button
+    '--icon-button-primary-enabled-bg': colors_1.COLOR.WHITE,
+    '--icon-button-primary-hover-bg': colors_v2_1.COLOR_V2.GRAY_20,
+    '--icon-button-primary-border': colors_v2_1.COLOR_V2.GRAY_40,
+    '--icon-button-primary-disabled-bg': colors_v2_1.COLOR_V2.GRAY_20,
+    '--icon-button-primary-disabled-border': colors_v2_1.COLOR_V2.GRAY_40,
+    '--icon-button-primary-hover-border': colors_v2_1.COLOR_V2.GRAY_50,
+    // Button
+    '--button-primary-disabled-bg': colors_v2_1.COLOR_V2.GRAY_50,
+    '--button-primary-disabled-text': colors_v2_1.COLOR_V2.GRAY_80,
+    '--button-tertiary-bg': colors_1.COLOR.WHITE,
+    '--button-tertiary-border': colors_v2_1.COLOR_V2.GRAY_40,
+    '--button-tertiary-hover-bg': colors_v2_1.COLOR_V2.GRAY_20,
+    '--button-tertiary-hover-border': colors_v2_1.COLOR_V2.GRAY_50,
+    '--button-tertiary-disabled-bg': colors_v2_1.COLOR_V2.GRAY_20,
+    '--button-tertiary-disabled-border': 'transparent',
+    // Inputs
+    '--text-input-background': colors_1.COLOR.WHITE,
+    '--text-input-border': colors_v2_1.COLOR_V2.GRAY_40,
+    '--text-input-border-hover': colors_v2_1.COLOR_V2.GRAY_60,
+    '--text-input-placeholder': colors_v2_1.COLOR_V2.GRAY_70,
+    '--text-input-disabled': colors_v2_1.COLOR_V2.GRAY_20,
+    '--text-input-label': colors_v2_1.COLOR_V2.GRAY_80,
+    '--text-input-autocomplete-background': colors_v2_1.COLOR_V2.BLUE_LIGHT_50,
+    // Select
+    '--select-focused-description': colors_v2_1.COLOR_V2.WHITE,
+    // Range Input
+    '--indicator-range-input-thumb': colors_v2_1.COLOR_V2.BLUE_LIGHT_700,
+    '--indicator-range-input-track-bg': colors_v2_1.COLOR_V2.GRAY_60,
+    // General
+    '--danger-color': colors_v2_1.COLOR_V2.RED_LIGHT_500,
+    '--success-color': colors_v2_1.COLOR_V2.GREEN_LIGHT_500,
+    '--app-bg': colors_v2_1.COLOR_V2.GRAY_10,
+    '--main-color': colors_1.COLOR.BLACK,
+    '--modal-bg': '#f8f8f8',
+    // Foreground
+    '--foreground-fade-16': '#676b7129',
+    // Archive File Icon
+    '--archive-file-icon-bg': colors_v2_1.COLOR_V2.AMBER_LIGHT_50,
+    '--archive-file-icon-stroke': colors_v2_1.COLOR_V2.AMBER_LIGHT_700,
+    // Audio File Icon
+    '--audio-file-icon-bg': colors_v2_1.COLOR_V2.PURPLE_DARK_50,
+    '--audio-file-icon-stroke': colors_v2_1.COLOR_V2.PURPLE_DARK_700,
+    // Code File Icon
+    '--code-file-icon-bg': colors_v2_1.COLOR_V2.PURPLE_LIGHT_50,
+    '--code-file-icon-stroke': colors_v2_1.COLOR_V2.PURPLE_LIGHT_700,
+    // Document File Icon
+    '--document-file-icon-bg': colors_v2_1.COLOR_V2.BLUE_LIGHT_50,
+    '--document-file-icon-stroke': colors_v2_1.COLOR_V2.BLUE_LIGHT_700,
+    // Image File Icon
+    '--image-file-icon-bg': colors_v2_1.COLOR_V2.TURQUOISE_LIGHT_50,
+    '--image-file-icon-stroke': colors_v2_1.COLOR_V2.TURQUOISE_LIGHT_700,
+    // PDF File Icon
+    '--pdf-file-icon-bg': colors_v2_1.COLOR_V2.RED_LIGHT_50,
+    '--pdf-file-icon-stroke': colors_v2_1.COLOR_V2.RED_LIGHT_700,
+    // Spreadsheet File Icon
+    '--spreadsheet-file-icon-bg': colors_v2_1.COLOR_V2.GREEN_LIGHT_50,
+    '--spreadsheet-file-icon-stroke': colors_v2_1.COLOR_V2.GREEN_LIGHT_700,
+    // Presentation File Icon
+    '--presentation-file-icon-bg': colors_v2_1.COLOR_V2.AMBER_LIGHT_50,
+    '--presentation-file-icon-stroke': colors_v2_1.COLOR_V2.AMBER_LIGHT_700,
+    // Video File Icon
+    '--video-file-icon-bg': colors_v2_1.COLOR_V2.RED_LIGHT_50,
+    '--video-file-icon-stroke': colors_v2_1.COLOR_V2.RED_LIGHT_700,
+    // Text File Icon
+    '--text-file-icon-bg': colors_v2_1.COLOR_V2.AMBER_LIGHT_50,
+    '--text-file-icon-stroke': colors_v2_1.COLOR_V2.AMBER_LIGHT_700,
+    // Other File Icon
+    '--other-file-icon-bg': colors_v2_1.COLOR_V2.WHITE,
+    '--other-file-icon-stroke': colors_v2_1.COLOR_V2.GRAY_70,
+    // Folder Icon
+    '--folder-icon-bg': colors_v2_1.COLOR_V2.BLUE_LIGHT_50,
+    '--folder-icon-stroke': colors_v2_1.COLOR_V2.BLUE_LIGHT_700,
+    // Multiple File Icon
+    '--multiple-file-icon-bg': colors_v2_1.COLOR_V2.WHITE,
+    '--multiple-file-icon-stroke': colors_v2_1.COLOR_V2.GRAY_70,
+    // File Unavailable Icon
+    '--unavailable-file-icon-bg': colors_v2_1.COLOR_V2.WHITE,
+    '--unavailable-file-icon-stroke': colors_v2_1.COLOR_V2.GRAY_70,
+});
+const dark = () => ({
+    // Checkbox
+    '--checkbox-background': colors_v2_1.COLOR_V2.GRAY_90,
+    '--checkbox-background-disabled': colors_v2_1.COLOR_V2.GRAY_90,
+    '--checkbox-background-disabled-selected': colors_v2_1.COLOR_V2.GRAY_80,
+    '--checkbox-border': colors_v2_1.COLOR_V2.GRAY_60,
+    '--checkbox-border-disabled': colors_v2_1.COLOR_V2.GRAY_60,
+    // Icon Button
+    '--icon-button-primary-enabled-bg': colors_v2_1.COLOR_V2.GRAY_90,
+    '--icon-button-primary-hover-bg': colors_v2_1.COLOR_V2.GRAY_80,
+    '--icon-button-primary-border': colors_v2_1.COLOR_V2.GRAY_100,
+    '--icon-button-primary-disabled-bg': colors_v2_1.COLOR_V2.GRAY_95,
+    '--icon-button-primary-disabled-border': colors_v2_1.COLOR_V2.GRAY_90,
+    '--icon-button-primary-hover-border': colors_v2_1.COLOR_V2.GRAY_70,
+    // Button
+    '--button-primary-disabled-bg': colors_v2_1.COLOR_V2.GRAY_70,
+    '--button-primary-disabled-text': colors_1.COLOR.BLACK,
+    '--button-tertiary-bg': colors_v2_1.COLOR_V2.GRAY_90,
+    '--button-tertiary-border': colors_v2_1.COLOR_V2.GRAY_100,
+    '--button-tertiary-hover-bg': colors_v2_1.COLOR_V2.GRAY_80,
+    '--button-tertiary-hover-border': colors_v2_1.COLOR_V2.GRAY_80,
+    '--button-tertiary-disabled-bg': colors_v2_1.COLOR_V2.GRAY_95,
+    '--button-tertiary-disabled-border': 'transparent',
+    // Inputs
+    '--text-input-background': colors_1.COLOR.BLACK,
+    '--text-input-border': colors_v2_1.COLOR_V2.GRAY_80,
+    '--text-input-border-hover': colors_v2_1.COLOR_V2.GRAY_40,
+    '--text-input-placeholder': colors_v2_1.COLOR_V2.GRAY_60,
+    '--text-input-disabled': colors_v2_1.COLOR_V2.GRAY_100,
+    '--text-input-label': colors_v2_1.COLOR_V2.GRAY_40,
+    '--text-input-autocomplete-background': colors_v2_1.COLOR_V2.BLUE_LIGHT_900,
+    // Select
+    '--select-focused-description': colors_v2_1.COLOR_V2.GRAY_40,
+    // Range Input
+    '--indicator-range-input-thumb': colors_v2_1.COLOR_V2.BLUE_DARK_300,
+    '--indicator-range-input-track-bg': colors_v2_1.COLOR_V2.GRAY_70,
+    // General
+    '--danger-color': colors_v2_1.COLOR_V2.RED_DARK_500,
+    '--success-color': colors_v2_1.COLOR_V2.GREEN_DARK_500,
+    '--app-bg': colors_v2_1.COLOR_V2.GRAY_95,
+    '--main-color': colors_1.COLOR.WHITE,
+    '--modal-bg': '#26272c',
+    // Foreground
+    '--foreground-fade-16': '#9fa1a729',
+    // Archive File Icon
+    '--archive-file-icon-bg': colors_v2_1.COLOR_V2.AMBER_DARK_50,
+    '--archive-file-icon-stroke': colors_v2_1.COLOR_V2.AMBER_DARK_700,
+    // Audio File Icon
+    '--audio-file-icon-bg': colors_v2_1.COLOR_V2.PURPLE_DARK_50,
+    '--audio-file-icon-stroke': colors_v2_1.COLOR_V2.PURPLE_DARK_700,
+    // Code File Icon
+    '--code-file-icon-bg': colors_v2_1.COLOR_V2.PURPLE_DARK_50,
+    '--code-file-icon-stroke': colors_v2_1.COLOR_V2.PURPLE_DARK_700,
+    // Document File Icon
+    '--document-file-icon-bg': colors_v2_1.COLOR_V2.BLUE_DARK_50,
+    '--document-file-icon-stroke': colors_v2_1.COLOR_V2.BLUE_DARK_700,
+    // Image File Icon
+    '--image-file-icon-bg': colors_v2_1.COLOR_V2.TURQUOISE_DARK_50,
+    '--image-file-icon-stroke': colors_v2_1.COLOR_V2.TURQUOISE_DARK_700,
+    // PDF File Icon
+    '--pdf-file-icon-bg': colors_v2_1.COLOR_V2.RED_DARK_50,
+    '--pdf-file-icon-stroke': colors_v2_1.COLOR_V2.RED_DARK_700,
+    // Spreadsheet File Icon
+    '--spreadsheet-file-icon-bg': colors_v2_1.COLOR_V2.GREEN_DARK_50,
+    '--spreadsheet-file-icon-stroke': colors_v2_1.COLOR_V2.GREEN_DARK_700,
+    // Presentation File Icon
+    '--presentation-file-icon-bg': colors_v2_1.COLOR_V2.AMBER_DARK_50,
+    '--presentation-file-icon-stroke': colors_v2_1.COLOR_V2.AMBER_DARK_700,
+    // Video File Icon
+    '--video-file-icon-bg': colors_v2_1.COLOR_V2.RED_DARK_50,
+    '--video-file-icon-stroke': colors_v2_1.COLOR_V2.RED_DARK_700,
+    // Text File Icon
+    '--text-file-icon-bg': colors_v2_1.COLOR_V2.AMBER_DARK_50,
+    '--text-file-icon-stroke': colors_v2_1.COLOR_V2.AMBER_DARK_700,
+    // Other File Icon
+    '--other-file-icon-bg': colors_v2_1.COLOR_V2.GRAY_95,
+    '--other-file-icon-stroke': colors_v2_1.COLOR_V2.GRAY_60,
+    // Folder Icon
+    '--folder-icon-bg': colors_v2_1.COLOR_V2.BLUE_DARK_50,
+    '--folder-icon-stroke': colors_v2_1.COLOR_V2.BLUE_DARK_700,
+    // Multiple File Icon
+    '--multiple-file-icon-bg': colors_v2_1.COLOR_V2.GRAY_95,
+    '--multiple-file-icon-stroke': colors_v2_1.COLOR_V2.GRAY_60,
+    // File Unavailable Icon
+    '--unavailable-file-icon-bg': colors_v2_1.COLOR_V2.GRAY_95,
+    '--unavailable-file-icon-stroke': colors_v2_1.COLOR_V2.GRAY_60,
+});
+const accentColors = () => ({
+    '--accent-color': colors_v2_1.COLOR_V2.BLUE_LIGHT_500,
+    '--accent-color-highlight': colors_v2_1.COLOR_V2.BLUE_LIGHT_50,
+    '--accent-color-highlight-inversed': colors_v2_1.COLOR_V2.BLUE_LIGHT_800,
+    '--accent-color-border': colors_v2_1.COLOR_V2.BLUE_LIGHT_500,
+    '--accent-color-focus': colors_v2_1.COLOR_V2.BLUE_LIGHT_400,
+    '--button-primary-hover': colors_v2_1.COLOR_V2.BLUE_LIGHT_600,
+    '--button-primary-active': colors_v2_1.COLOR_V2.BLUE_LIGHT_700,
+    '--button-primary-active-border': colors_v2_1.COLOR_V2.BLUE_LIGHT_700,
+    '--button-primary-focus-border': colors_v2_1.COLOR_V2.BLUE_LIGHT_700,
+    '--button-secondary-active-bg': colors_v2_1.COLOR_V2.BLUE_LIGHT_50,
+    '--button-secondary-active-border': colors_v2_1.COLOR_V2.BLUE_LIGHT_500,
+    '--button-secondary-hover-border': colors_v2_1.COLOR_V2.BLUE_LIGHT_500,
+    '--icon-primary-active-fill': colors_v2_1.COLOR_V2.BLUE_LIGHT_500,
+    '--icon-secondary-active-border': 'transparent',
+    '--indicator-range-input-thumb': colors_v2_1.COLOR_V2.BLUE_LIGHT_700,
+});
+const zIndexes = () => ({
+    '--z-index-level-0': 0,
+    '--z-index-level-1': 10,
+    '--z-index-level-2': 100,
+    '--z-index-level-3': 1000,
+    '--z-index-level-4': 10000,
+    '--z-index-level-5': 100000,
+    '--z-index-level-6': 1000000,
+    '--z-index-level-7': 10000000,
+    '--z-index-level-8': 100000000,
+    '--z-index-badge': 'var(--z-index-level-2)',
+    '--z-index-panel': 'var(--z-index-level-3)',
+    '--z-index-bubble': 'var(--z-index-level-3)',
+    '--z-index-video': 'var(--z-index-level-4)',
+    '--z-index-choosescreen': 'var(--z-index-level-5)',
+    '--z-index-context': 'var(--z-index-level-5)',
+    '--z-index-warnings': 'var(--z-index-level-6)',
+    '--z-index-modal': 'var(--z-index-level-7)',
+});
+exports.GlobalCssVariables = {
+    light,
+    dark,
+    accentColors,
+    zIndexes,
+};

package/lib/Identity/GlobalCssVariables/index.d.ts

@@ -0,0 +1,2 @@
+export * from './GlobalCssVariables';
+//# sourceMappingURL=index.d.ts.map

package/lib/Identity/GlobalCssVariables/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Identity/GlobalCssVariables/index.ts"],"names":[],"mappings":"AAmBA,cAAc,sBAAsB,CAAC"}

package/lib/Identity/GlobalCssVariables/index.js

@@ -0,0 +1,35 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2025 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("./GlobalCssVariables"), exports);

package/lib/Identity/GlobalStyle/GlobalStyle.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from '../Theme';
+export declare const GlobalStyle: import("react").ForwardRefExoticComponent<Pick<{
+    theme: Theme;
+}, never> & {
+    theme?: import("@emotion/react").Theme;
+}>;
+//# sourceMappingURL=GlobalStyle.d.ts.map

package/lib/Identity/GlobalStyle/GlobalStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalStyle.d.ts","sourceRoot":"","sources":["../../../src/Identity/GlobalStyle/GlobalStyle.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAC,KAAK,EAAC,MAAM,UAAU,CAAC;AA6C/B,eAAO,MAAM,WAAW;WAA+B,KAAK;;;EAU1D,CAAC"}

package/lib/Identity/GlobalStyle/GlobalStyle.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobalStyle = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * 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/.
+ *
+ */
+const react_1 = require("@emotion/react");
+const emotion_normalize_1 = __importDefault(require("emotion-normalize"));
+const GlobalCssVariables_1 = require("../GlobalCssVariables");
+const getGlobalStyles = (theme) => ({
+    '*': {
+        boxSizing: 'border-box',
+    },
+    'b, strong': {
+        fontWeight: 600,
+    },
+    body: {
+        ...GlobalCssVariables_1.GlobalCssVariables.accentColors(),
+        MozOsxFontSmoothing: 'grayscale',
+        WebkitFontSmoothing: 'antialiased',
+        background: theme.general.backgroundColor,
+        color: theme.general.color,
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: '100vh',
+        transition: 'background 0.15s',
+    },
+    'body, body.theme-default': {
+        ...GlobalCssVariables_1.GlobalCssVariables.light(),
+    },
+    'body.theme-dark': {
+        ...GlobalCssVariables_1.GlobalCssVariables.dark(),
+    },
+    html: {
+        background: theme.general.backgroundColor,
+        transition: 'background 0.15s',
+        fontSize: '16px',
+    },
+    p: {
+        marginTop: 0,
+    },
+});
+const getGlobalFontStyle = () => ({
+    body: {
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";',
+        fontWeight: 400,
+        lineHeight: 1.5,
+    },
+});
+exports.GlobalStyle = (0, react_1.withTheme)(({ theme }) => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Global, { styles: (0, react_1.css) `
+        ${emotion_normalize_1.default}
+        ${getGlobalStyles(theme)}
+        ${getGlobalFontStyle()}
+      ` }));
+});

package/lib/Identity/GlobalStyle/index.d.ts

@@ -0,0 +1,2 @@
+export * from './GlobalStyle';
+//# sourceMappingURL=index.d.ts.map

package/lib/Identity/GlobalStyle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Identity/GlobalStyle/index.ts"],"names":[],"mappings":"AAmBA,cAAc,eAAe,CAAC"}

package/lib/Identity/GlobalStyle/index.js

@@ -0,0 +1,35 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2025 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("./GlobalStyle"), exports);

package/lib/Identity/Logo/Logo.d.ts

@@ -0,0 +1,6 @@
+import { SVGIconProps } from '../../DataDisplay/Icon/SVGIcon';
+export interface LogoProps<T = SVGSVGElement> extends SVGIconProps<T> {
+    hover?: boolean;
+}
+export declare const Logo: ({ hover, ...props }: LogoProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Logo.d.ts.map

package/lib/Identity/Logo/Logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/Identity/Logo/Logo.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAU,YAAY,EAAC,MAAM,gCAAgC,CAAC;AAKrE,MAAM,WAAW,SAAS,CAAC,CAAC,GAAG,aAAa,CAAE,SAAQ,YAAY,CAAC,CAAC,CAAC;IACnE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAeD,eAAO,MAAM,IAAI,wBAAuB,SAAS,qDAIhD,CAAC"}

package/lib/Identity/Logo/Logo.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Logo = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const SVGIcon_1 = require("../../DataDisplay/Icon/SVGIcon");
+const colors_1 = require("../colors");
+const motions_1 = require("../motions/motions");
+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 = ({ hover, ...props }) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, { realWidth: 57, realHeight: 18, css: (theme) => logoStyle(theme, { hover, ...props }), ...props, children: (0, jsx_runtime_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;

package/lib/Identity/Logo/Logo.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Logo } from '../Logo';
+declare const meta: Meta<typeof Logo>;
+export default meta;
+type Story = StoryObj<typeof Logo>;
+export declare const Default: Story;
+export declare const CustomColor: Story;
+export declare const Sizes: Story;
+export declare const Colors: Story;
+export declare const OnDifferentBackgrounds: Story;
+export declare const InContext: Story;
+//# sourceMappingURL=Logo.stories.d.ts.map

package/lib/Identity/Logo/Logo.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.stories.d.ts","sourceRoot":"","sources":["../../../src/Identity/Logo/Logo.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAGhD,OAAO,EAAC,IAAI,EAAC,MAAM,SAAS,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAc3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAUnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAiBpB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA4BpC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAoBvB,CAAC"}