@wireapp/react-ui-kit 9.59.1 → 9.59.2

package/lib/DataDisplay/Pill/Pill.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { CSSObject } from '@emotion/react';
+import { Theme } from '../../Identity/Theme';
+export interface PillProps<T = HTMLSpanElement> extends React.HTMLProps<T> {
+    active?: boolean;
+    type?: PILL_TYPE;
+}
+export declare enum PILL_TYPE {
+    error = "ERROR",
+    success = "SUCCESS",
+    warning = "WARNING"
+}
+export declare const pillStyle: <T>(theme: Theme, props: PillProps<T>) => CSSObject;
+export declare const filterPillProps: (props: PillProps) => Object;
+export declare const Pill: (props: PillProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Pill.d.ts.map

package/lib/DataDisplay/Pill/Pill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../src/DataDisplay/Pill/Pill.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAY,MAAM,gBAAgB,CAAC;AAIpD,OAAO,EAAC,KAAK,EAAC,MAAM,sBAAsB,CAAC;AAG3C,MAAM,WAAW,SAAS,CAAC,CAAC,GAAG,eAAe,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,OAAO,YAAY;CACpB;AAED,eAAO,MAAM,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,SAuCjE,CAAC;AAEF,eAAO,MAAM,eAAe,UAAW,SAAS,WAAmC,CAAC;AAEpF,eAAO,MAAM,IAAI,UAAW,SAAS,qDAOpC,CAAC"}

package/lib/DataDisplay/Pill/Pill.js

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

package/lib/DataDisplay/Pill/Pill.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.stories.d.ts","sourceRoot":"","sources":["../../../src/DataDisplay/Pill/Pill.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAY,MAAM,QAAQ,CAAC;AAEvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAmB3B,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,MAAM,EAAE,KAKpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,WAAW,wDAYvB,CAAC;AAEF,eAAO,MAAM,YAAY,wDAKxB,CAAC;AAEF,eAAO,MAAM,WAAW,wDASvB,CAAC;AAEF,eAAO,MAAM,YAAY,wDAyBxB,CAAC"}

package/lib/DataDisplay/Pill/Pill.stories.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Combinations = exports.Interactive = exports.WithLongText = exports.AllVariants = exports.Warning = exports.Success = exports.Error = exports.Active = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Pill_1 = require("./Pill");
+const meta = {
+    component: Pill_1.Pill,
+    title: 'DataDisplay/Pill',
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)("div", { style: { padding: '24px', maxWidth: '600px', margin: '0 auto' }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+    argTypes: {
+        type: {
+            control: 'select',
+            options: [null, ...Object.values(Pill_1.PILL_TYPE)],
+        },
+        active: {
+            control: 'boolean',
+        },
+    },
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        children: 'Default Pill',
+    },
+};
+exports.Active = {
+    args: {
+        children: 'Active Pill',
+        active: true,
+    },
+};
+exports.Error = {
+    args: {
+        children: 'Error Pill',
+        type: Pill_1.PILL_TYPE.error,
+    },
+};
+exports.Success = {
+    args: {
+        children: 'Success Pill',
+        type: Pill_1.PILL_TYPE.success,
+    },
+};
+exports.Warning = {
+    args: {
+        children: 'Warning Pill',
+        type: Pill_1.PILL_TYPE.warning,
+    },
+};
+const AllVariants = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { children: "Default Pill" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { active: true, children: "Active Pill" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { type: Pill_1.PILL_TYPE.error, children: "Error Pill" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { type: Pill_1.PILL_TYPE.success, children: "Success Pill" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { type: Pill_1.PILL_TYPE.warning, children: "Warning Pill" })] })] }));
+exports.AllVariants = AllVariants;
+const WithLongText = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { children: "This is a very long text that should wrap nicely inside the pill component" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { type: Pill_1.PILL_TYPE.success, children: "This is a very long successful message that should wrap nicely" })] }));
+exports.WithLongText = WithLongText;
+const Interactive = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '8px' }, children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { onClick: () => alert('Clicked!'), style: { cursor: 'pointer' }, children: "Clickable Pill" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { active: true, onClick: () => alert('Active pills can be clicked too!'), style: { cursor: 'pointer' }, children: "Active Clickable" })] }));
+exports.Interactive = Interactive;
+const Combinations = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { type: Pill_1.PILL_TYPE.error, active: true, children: "Active Error" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { type: Pill_1.PILL_TYPE.success, active: true, children: "Active Success" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { type: Pill_1.PILL_TYPE.warning, active: true, children: "Active Warning" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { type: Pill_1.PILL_TYPE.error, style: { opacity: 0.7 }, children: "Faded Error" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { type: Pill_1.PILL_TYPE.success, style: { opacity: 0.7 }, children: "Faded Success" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { type: Pill_1.PILL_TYPE.warning, style: { opacity: 0.7 }, children: "Faded Warning" })] })] }));
+exports.Combinations = Combinations;

package/lib/DataDisplay/Pill/index.d.ts

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

package/lib/DataDisplay/Pill/index.d.ts.map

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

package/lib/DataDisplay/Pill/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("./Pill"), exports);

package/lib/DataDisplay/Tooltip/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/DataDisplay/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAA0B,SAAS,EAAmB,MAAM,OAAO,CAAC;AAqJrF,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACpE,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID,eAAO,MAAM,OAAO,2BAA0B,YAAY,qDAmCzD,CAAC"}

package/lib/DataDisplay/Tooltip/Tooltip.js

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * 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/.
+ *
+ */
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const utils_1 = require("../../utils");
+const paddingDistance = 8;
+const tooltipStyle = theme => ({
+    position: 'fixed',
+    zIndex: 'var(--z-index-level-8)',
+    maxWidth: '300px',
+    filter: 'drop-shadow(1px 2px 6px rgba(0, 0, 0, 0.3))',
+    borderRadius: '4px',
+    "&[data-position='top']": {
+        paddingBottom: `${paddingDistance}px`,
+        '.tooltip-arrow': {
+            borderTop: `10px solid ${theme.Tooltip.backgroundColor}`,
+            bottom: 0,
+        },
+    },
+    "&[data-position='bottom']": {
+        paddingTop: `${paddingDistance}px`,
+        '.tooltip-arrow': {
+            borderBottom: `10px solid ${theme.Tooltip.backgroundColor}`,
+            top: 0,
+        },
+    },
+    '.tooltip-content': {
+        color: theme.Tooltip.color,
+        backgroundColor: theme.Tooltip.backgroundColor,
+        borderRadius: '4px',
+        fontSize: '12px',
+        lineHeight: '14px',
+        fontWeight: 400,
+        padding: `${paddingDistance}px 8px`,
+        textAlign: 'center',
+        overflowWrap: 'break-word',
+    },
+    '.tooltip-arrow': {
+        width: 0,
+        height: 0,
+        borderLeft: '8px solid transparent',
+        borderRight: '8px solid transparent',
+        position: 'absolute',
+    },
+});
+const TooltipArrow = ({ wrapperRect }) => {
+    const tooltipArrowRef = (element) => {
+        if (!element) {
+            return;
+        }
+        const { parentElement } = element;
+        if (!parentElement) {
+            return;
+        }
+        const tooltipRect = parentElement.getBoundingClientRect();
+        const isTouchingLeftEdge = wrapperRect.x <= tooltipRect.width / 2 + paddingDistance * 2;
+        const isTouchingRightEdge = wrapperRect.left + tooltipRect.width / 2 + paddingDistance * 2 >= window.innerWidth;
+        if (isTouchingLeftEdge) {
+            element.style.left = `${wrapperRect.left - paddingDistance}px`;
+        }
+        else if (isTouchingRightEdge) {
+            const calculateX = window.innerWidth - wrapperRect.right - paddingDistance;
+            element.style.right = `${calculateX}px`;
+        }
+        else {
+            element.style.left = `50%`;
+            element.style.transform = `translateX(-50%)`;
+        }
+    };
+    return (0, jsx_runtime_1.jsx)("div", { ref: tooltipArrowRef, className: "tooltip-arrow" });
+};
+const PortalComponent = ({ children, wrapperRect, selector = '#wire-app' }) => {
+    const [isTouchingTop, setIsTouchingTop] = (0, react_1.useState)(false);
+    const targetElement = document.querySelector(selector);
+    if (!targetElement || !wrapperRect) {
+        return null;
+    }
+    const tooltipRef = (element) => {
+        if (!element) {
+            return;
+        }
+        const tooltipRect = element.getBoundingClientRect();
+        const isTouchingTopEdge = wrapperRect.y <= tooltipRect.height + paddingDistance * 2;
+        setIsTouchingTop(isTouchingTopEdge);
+        const isTouchingLeftEdge = wrapperRect.x <= tooltipRect.width / 2 + paddingDistance * 2;
+        const isTouchingRightEdge = wrapperRect.left + tooltipRect.width / 2 + paddingDistance * 2 >= window.innerWidth;
+        if (isTouchingLeftEdge) {
+            element.style.left = `${paddingDistance}px`;
+        }
+        else if (isTouchingRightEdge) {
+            element.style.right = `${paddingDistance}px`;
+        }
+        else {
+            const elementWidth = (element.scrollWidth - wrapperRect.width) / 2;
+            element.style.left = `${wrapperRect.x - elementWidth}px`;
+        }
+        if (isTouchingTopEdge) {
+            element.style.top = `${wrapperRect.y + wrapperRect.height}px`;
+        }
+        else {
+            element.style.top = `${wrapperRect.y - element.clientHeight}px`;
+        }
+    };
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: tooltipRef, className: "tooltip", css: (theme) => tooltipStyle(theme), "data-position": isTouchingTop ? 'bottom' : 'top', children: [(0, jsx_runtime_1.jsx)(TooltipArrow, { wrapperRect: wrapperRect }), (0, jsx_runtime_1.jsx)("div", { className: "tooltip-content", "data-testid": "tooltip-content", children: children })] }), targetElement);
+};
+const filterTooltipProps = (props) => (0, utils_1.filterProps)(props, ['body', 'selector']);
+const Tooltip = ({ children, ...props }) => {
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const wrapperRectRef = (0, react_1.useRef)();
+    const filteredProps = filterTooltipProps(props);
+    const { body, selector = '#wire-app' } = props;
+    const onElementEnter = ({ currentTarget }) => {
+        const wrapperRect = currentTarget.getBoundingClientRect();
+        setIsHovered(true);
+        wrapperRectRef.current = wrapperRect;
+    };
+    const onElementLeave = () => setIsHovered(false);
+    return ((0, jsx_runtime_1.jsxs)("div", { role: "presentation", "data-testid": "tooltip-wrapper", onMouseEnter: onElementEnter, onMouseLeave: onElementLeave, onFocus: onElementEnter, onBlur: onElementLeave, style: { width: 'max-content' }, ...filteredProps, children: [children, isHovered && ((0, jsx_runtime_1.jsx)(PortalComponent, { wrapperRect: wrapperRectRef.current, selector: selector, children: body }))] }));
+};
+exports.Tooltip = Tooltip;

package/lib/DataDisplay/Tooltip/Tooltip.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../src/DataDisplay/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAOrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAcsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAC"}

package/lib/DataDisplay/Tooltip/Tooltip.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithMarkup = exports.LongContent = exports.CustomPosition = exports.WithInput = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Tooltip_1 = require("./Tooltip");
+const Button_1 = require("../../Inputs/Button/Button");
+const Input_1 = require("../../Inputs/Input/Input");
+const meta = {
+    title: 'DataDisplay/Tooltip',
+    component: Tooltip_1.Tooltip,
+    parameters: {
+        layout: 'centered',
+    },
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)("div", { id: "wire-app", style: { position: 'relative', minHeight: '200px', padding: '24px' }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        body: 'This is a tooltip',
+        children: (0, jsx_runtime_1.jsx)(Button_1.Button, { children: "Hover me" }),
+    },
+};
+exports.WithInput = {
+    args: {
+        body: 'Enter your username',
+        children: (0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Username" }),
+    },
+};
+exports.CustomPosition = {
+    args: {
+        body: 'Tooltip on the right',
+        children: (0, jsx_runtime_1.jsx)(Button_1.Button, { children: "Hover me" }),
+    },
+};
+exports.LongContent = {
+    args: {
+        body: 'This is a longer tooltip that might wrap to multiple lines. It contains more detailed information about the element.',
+        children: (0, jsx_runtime_1.jsx)(Button_1.Button, { children: "Hover for more info" }),
+    },
+};
+exports.WithMarkup = {
+    args: {
+        body: ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Bold text" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("em", { children: "Italic text" }), (0, jsx_runtime_1.jsx)("br", {}), "Regular text"] })),
+        children: (0, jsx_runtime_1.jsx)(Button_1.Button, { children: "Hover for formatted tooltip" }),
+    },
+};

package/lib/DataDisplay/Tooltip/index.d.ts

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

package/lib/DataDisplay/Tooltip/index.d.ts.map

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

package/lib/DataDisplay/Tooltip/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("./Tooltip"), exports);

package/lib/DataDisplay/index.d.ts

@@ -0,0 +1,9 @@
+export * from './Avatar';
+export * from './AvatarGrid';
+export * from './Badge';
+export * from './BadgesWithTooltip';
+export * from './Icon';
+export * from './Loading';
+export * from './Pill';
+export * from './Tooltip';
+//# sourceMappingURL=index.d.ts.map

package/lib/DataDisplay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DataDisplay/index.ts"],"names":[],"mappings":"AAmBA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC"}

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.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.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"}