@wireapp/react-ui-kit 9.69.4 → 9.69.6

package/lib/DataDisplay/index.js

@@ -0,0 +1,42 @@
+"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("./Avatar"), exports);
+__exportStar(require("./AvatarGrid"), exports);
+__exportStar(require("./Badge"), exports);
+__exportStar(require("./BadgesWithTooltip"), exports);
+__exportStar(require("./Icon"), exports);
+__exportStar(require("./Loading"), exports);
+__exportStar(require("./Pill"), exports);
+__exportStar(require("./Tooltip"), exports);

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

@@ -0,0 +1,31 @@
+import { ReactNode, ComponentType, HTMLProps } from 'react';
+type TransitionProps = Partial<any> & {
+    children: ReactNode;
+    component?: string | ComponentType<any>;
+};
+type OpacityProps = TransitionProps & {
+    endValue?: number;
+    startValue?: number;
+};
+type MovementProps = TransitionProps & {
+    endValue?: string;
+    startValue?: string;
+};
+type TransitionContainerProps = HTMLProps<any> & {
+    appear?: boolean;
+    component?: string;
+    enter?: boolean;
+    exit?: boolean;
+};
+export declare const TransitionContainer: (props: TransitionContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Transition: ({ animationStyle, timeout, component, children, ...props }: TransitionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Opacity: ({ startValue, endValue, timeout, ...props }: OpacityProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const YAxisMovement: ({ startValue, endValue, timeout, ...props }: MovementProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const XAxisMovement: ({ startValue, endValue, timeout, ...props }: MovementProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Slide: ({ startValue, endValue, timeout, ...props }: MovementProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const LeftRightMovement: (props: MovementProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const RightLeftMovement: (props: MovementProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TopDownMovement: (props: MovementProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BottomUpMovement: (props: MovementProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Animation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Animation.d.ts","sourceRoot":"","sources":["../../../src/Identity/Animation/Animation.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAE,aAAa,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAC;AAQzE,KAAK,eAAe,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;CACzC,CAAC;AAEF,KAAK,YAAY,GAAG,eAAe,GAAG;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,aAAa,GAAG,eAAe,GAAG;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,wBAAwB,GAAG,SAAS,CAAC,GAAG,CAAC,GAAG;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,qDAAmC,CAAC;AAEvG,eAAO,MAAM,UAAU,+DAAsE,eAAe,qDAQ3G,CAAC;AAEF,eAAO,MAAM,OAAO,gDAA0E,YAAY,qDAmBzG,CAAC;AAEF,eAAO,MAAM,aAAa,gDAKvB,aAAa,qDAmBf,CAAC;AAEF,eAAO,MAAM,aAAa,gDAKvB,aAAa,qDAmBf,CAAC;AAEF,eAAO,MAAM,KAAK,gDAAmF,aAAa,qDAmBjH,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,aAAa,qDAErD,CAAC;AACF,eAAO,MAAM,iBAAiB,UAAW,aAAa,qDAErD,CAAC;AAEF,eAAO,MAAM,eAAe,UAAW,aAAa,qDAAkE,CAAC;AACvH,eAAO,MAAM,gBAAgB,UAAW,aAAa,qDAAiE,CAAC"}

package/lib/Identity/Animation/Animation.js

@@ -0,0 +1,98 @@
+"use strict";
+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 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("react");
+const react_2 = require("@emotion/react");
+const motions_1 = require("../motions/motions");
+const { CSSTransition, TransitionGroup } = require('react-transition-group');
+const TransitionContainer = (props) => (0, jsx_runtime_1.jsx)(TransitionGroup, { ...props });
+exports.TransitionContainer = TransitionContainer;
+const Transition = ({ animationStyle, timeout, component = 'div', children, ...props }) => ((0, jsx_runtime_1.jsx)(react_2.ClassNames, { children: ({ css }) => ((0, jsx_runtime_1.jsx)(CSSTransition, { timeout: timeout, classNames: css(animationStyle), ...props, children: component ? (0, react_1.createElement)(component, {}, children) : children })) }));
+exports.Transition = Transition;
+const Opacity = ({ startValue = 0, endValue = 1, timeout = motions_1.DURATION.DEFAULT, ...props }) => ((0, jsx_runtime_1.jsx)(exports.Transition, { 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 = ({ startValue = '-100%', endValue = '0%', timeout = motions_1.DURATION.DEFAULT, ...props }) => ((0, jsx_runtime_1.jsx)(exports.Transition, { 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 = ({ startValue = '-100%', endValue = '0%', timeout = motions_1.DURATION.DEFAULT, ...props }) => ((0, jsx_runtime_1.jsx)(exports.Transition, { 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 = ({ startValue = '-100%', endValue = '0%', timeout = motions_1.DURATION.DEFAULT, ...props }) => ((0, jsx_runtime_1.jsx)(exports.Transition, { 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) => ((0, jsx_runtime_1.jsx)(exports.XAxisMovement, { startValue: "-100vh", endValue: "0vh", ...props }));
+exports.LeftRightMovement = LeftRightMovement;
+const RightLeftMovement = (props) => ((0, jsx_runtime_1.jsx)(exports.XAxisMovement, { startValue: "100vh", endValue: "0vh", ...props }));
+exports.RightLeftMovement = RightLeftMovement;
+const TopDownMovement = (props) => (0, jsx_runtime_1.jsx)(exports.YAxisMovement, { startValue: "-100%", endValue: "0%", ...props });
+exports.TopDownMovement = TopDownMovement;
+const BottomUpMovement = (props) => (0, jsx_runtime_1.jsx)(exports.YAxisMovement, { startValue: "100%", endValue: "0%", ...props });
+exports.BottomUpMovement = BottomUpMovement;

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const AllAnimations: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CustomizableAnimation: StoryObj;
+//# sourceMappingURL=Animation.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Animation.stories.d.ts","sourceRoot":"","sources":["../../../src/Identity/Animation/Animation.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAchD,QAAA,MAAM,IAAI,EAAE,IASX,CAAC;AAEF,eAAe,IAAI,CAAC;AA4CpB,eAAO,MAAM,aAAa,wDA4EzB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,QAqCnC,CAAC"}

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

@@ -0,0 +1,8 @@
+import { CSSObject } from '@emotion/react';
+export declare const GlobalCssVariables: {
+    light: () => CSSObject;
+    dark: () => CSSObject;
+    accentColors: () => CSSObject;
+    zIndexes: () => CSSObject;
+};
+//# sourceMappingURL=GlobalCssVariables.d.ts.map

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;AAyQzC,eAAO,MAAM,kBAAkB;iBApQZ,SAAS;gBA+GV,SAAS;wBA+GD,SAAS;oBAkBb,SAAS;CAyB9B,CAAC"}

package/lib/Identity/GlobalCssVariables/GlobalCssVariables.js

@@ -0,0 +1,241 @@
+"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',
+    '--dropdown-menu-bg': colors_1.COLOR.WHITE,
+    // 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',
+    '--dropdown-menu-bg': colors_v2_1.COLOR_V2.GRAY_100,
+    // 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;AA8C/B,eAAO,MAAM,WAAW;WAA+B,KAAK;;;EAU1D,CAAC"}