@wireapp/react-ui-kit 9.69.7-beta.14.5ce5ca523 → 9.70.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/DataDisplay/Icon/index.ts"],"names":[],"mappings":"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"}

package/lib/DataDisplay/Icon/index.js

@@ -0,0 +1,174 @@
+"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("./SVGIcon"), exports);
+__exportStar(require("./AddPeopleIcon"), exports);
+__exportStar(require("./ArchiveIcon"), exports);
+__exportStar(require("./ArrowIcon"), exports);
+__exportStar(require("./AttachmentIcon"), exports);
+__exportStar(require("./AudioVideoIcon"), exports);
+__exportStar(require("./BlockIcon"), exports);
+__exportStar(require("./CopyIcon"), exports);
+__exportStar(require("./CalendarIcon"), exports);
+__exportStar(require("./CallIcon"), exports);
+__exportStar(require("./CameraIcon"), exports);
+__exportStar(require("./CamIcon"), exports);
+__exportStar(require("./CheckIcon"), exports);
+__exportStar(require("./CheckRoundIcon"), exports);
+__exportStar(require("./ChevronIcon"), exports);
+__exportStar(require("./CircleCloseIcon"), exports);
+__exportStar(require("./CirclePlusIcon"), exports);
+__exportStar(require("./CloseIcon"), exports);
+__exportStar(require("./DeviceIcon"), exports);
+__exportStar(require("./DownloadIcon"), exports);
+__exportStar(require("./DropdownFilledIcon"), exports);
+__exportStar(require("./EditDocumentIcon"), exports);
+__exportStar(require("./EditIcon"), exports);
+__exportStar(require("./EnterIcon"), exports);
+__exportStar(require("./HelpIcon"), exports);
+__exportStar(require("./EmojiIcon"), exports);
+__exportStar(require("./ErrorIcon"), exports);
+__exportStar(require("./ExternalLinkIcon"), exports);
+__exportStar(require("./FileIcon"), exports);
+__exportStar(require("./FunnelFilterIcon"), exports);
+__exportStar(require("./GifIcon"), exports);
+__exportStar(require("./GroupIcon"), exports);
+__exportStar(require("./HangupIcon"), exports);
+__exportStar(require("./HideIcon"), exports);
+__exportStar(require("./ImageIcon"), exports);
+__exportStar(require("./SupportIcon"), exports);
+__exportStar(require("./InfoIcon"), exports);
+__exportStar(require("./InviteIcon"), exports);
+__exportStar(require("./LeaveIcon"), exports);
+__exportStar(require("./LinkIcon"), exports);
+__exportStar(require("./ListIcon"), exports);
+__exportStar(require("./LockIcon"), exports);
+__exportStar(require("./MessageIcon"), exports);
+__exportStar(require("./MinusIcon"), exports);
+__exportStar(require("./MoreIcon"), exports);
+__exportStar(require("./MuteIcon"), exports);
+__exportStar(require("./NotificationIcon"), exports);
+__exportStar(require("./NotificationOffIcon"), exports);
+__exportStar(require("./OptionsIcon"), exports);
+__exportStar(require("./OpenDetachedWindowIcon"), exports);
+__exportStar(require("./CloseDetachedWindowIcon"), exports);
+__exportStar(require("./OutlineCheck"), exports);
+__exportStar(require("./GridIcon"), exports);
+__exportStar(require("./PeopleIcon"), exports);
+__exportStar(require("./PingIcon"), exports);
+__exportStar(require("./PlaneIcon"), exports);
+__exportStar(require("./PlusIcon"), exports);
+__exportStar(require("./ProfileIcon"), exports);
+__exportStar(require("./RaiseHandIcon"), exports);
+__exportStar(require("./RaiseHandOffIcon"), exports);
+__exportStar(require("./RecordIcon"), exports);
+__exportStar(require("./RecordBoldIcon"), exports);
+__exportStar(require("./RecordPendingIcon"), exports);
+__exportStar(require("./ReloadIcon"), exports);
+__exportStar(require("./ScreenshareIcon"), exports);
+__exportStar(require("./SearchIcon"), exports);
+__exportStar(require("./ServicesIcon"), exports);
+__exportStar(require("./SettingsIcon"), exports);
+__exportStar(require("./ShareLinkIcon"), exports);
+__exportStar(require("./ShowIcon"), exports);
+__exportStar(require("./SignIcon"), exports);
+__exportStar(require("./SortIcon"), exports);
+__exportStar(require("./SpeakerIcon"), exports);
+__exportStar(require("./StarIcon"), exports);
+__exportStar(require("./TeamIcon"), exports);
+__exportStar(require("./TimedIcon"), exports);
+__exportStar(require("./TrashIcon"), exports);
+__exportStar(require("./TrashCrossIcon"), exports);
+__exportStar(require("./TriangleIcon"), exports);
+__exportStar(require("./UploadIcon"), exports);
+__exportStar(require("./VerificationShieldIcon"), exports);
+__exportStar(require("./WireIcon"), exports);
+__exportStar(require("./ShieldIcon"), exports);
+__exportStar(require("./LockClosedIcon"), exports);
+__exportStar(require("./ChannelIcon"), exports);
+__exportStar(require("./UnlockedIcon"), exports);
+__exportStar(require("./HistoryIcon"), exports);
+__exportStar(require("./HamburgerIcon"), exports);
+__exportStar(require("./MailIcon"), exports);
+// Brand Icons
+__exportStar(require("./Brand/AndroidIcon"), exports);
+__exportStar(require("./Brand/AppleIcon"), exports);
+__exportStar(require("./Brand/ChromeIcon"), exports);
+__exportStar(require("./Brand/FacebookIcon"), exports);
+__exportStar(require("./Brand/GitHubIcon"), exports);
+__exportStar(require("./Brand/LinkedInIcon"), exports);
+__exportStar(require("./Brand/LinuxIcon"), exports);
+__exportStar(require("./Brand/MicrosoftIcon"), exports);
+__exportStar(require("./Brand/TwitterIcon"), exports);
+__exportStar(require("./CertificateExpired"), exports);
+__exportStar(require("./CertificateRevoked"), exports);
+__exportStar(require("./ExpiresSoon"), exports);
+__exportStar(require("./MLSVerified"), exports);
+__exportStar(require("./ProteusVerified"), exports);
+__exportStar(require("./BoldIcon"), exports);
+__exportStar(require("./ItalicIcon"), exports);
+__exportStar(require("./StrikethroughIcon"), exports);
+__exportStar(require("./UnderlineIcon"), exports);
+__exportStar(require("./BulletListIcon"), exports);
+__exportStar(require("./NumberedListIcon"), exports);
+__exportStar(require("./MarkdownIcon"), exports);
+__exportStar(require("./HeadingIcon"), exports);
+__exportStar(require("./CodeInlineIcon"), exports);
+__exportStar(require("./CodeBlockIcon"), exports);
+__exportStar(require("./BlockquoteIcon"), exports);
+__exportStar(require("./Files/ArchiveFileIcon"), exports);
+__exportStar(require("./Files/AudioFileIcon"), exports);
+__exportStar(require("./Files/CodeFileIcon"), exports);
+__exportStar(require("./Files/DocumentFileIcon"), exports);
+__exportStar(require("./Files/ImageFileIcon"), exports);
+__exportStar(require("./Files/OtherFileIcon"), exports);
+__exportStar(require("./Files/PdfFileIcon"), exports);
+__exportStar(require("./Files/PresentationFileIcon"), exports);
+__exportStar(require("./Files/SpreadsheetFileIcon"), exports);
+__exportStar(require("./Files/VideoFileIcon"), exports);
+__exportStar(require("./Files/TextFileIcon"), exports);
+__exportStar(require("./Files/FolderIcon"), exports);
+__exportStar(require("./Files/MultipleFilesIcon"), exports);
+__exportStar(require("./PlayIcon"), exports);
+__exportStar(require("./PauseIcon"), exports);
+__exportStar(require("./AlertIcon"), exports);
+__exportStar(require("./SaveIcon"), exports);
+__exportStar(require("./CollectionIcon"), exports);
+__exportStar(require("./UnavailableFileIcon"), exports);
+__exportStar(require("./SidebarActiveIcon"), exports);
+__exportStar(require("./SidebarInactiveIcon"), exports);
+__exportStar(require("./ChevronDownIcon"), exports);
+__exportStar(require("./ChevronUpIcon"), exports);
+__exportStar(require("./ZoomInIcon"), exports);
+__exportStar(require("./ZoomOutIcon"), exports);

package/lib/DataDisplay/Loading/Loading.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface LoadingProps<T = SVGSVGElement> extends React.SVGProps<T> {
+    color?: string;
+    progress?: number;
+    size?: number;
+}
+export declare const Loading: {
+    ({ progress, size, color, ...props }: LoadingProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        progress: any;
+        size: number;
+    };
+};
+//# sourceMappingURL=Loading.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../../../src/DataDisplay/Loading/Loading.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,aAAa,CAAE,SAAQ,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,OAAO;0CAAoE,YAAY;;;;;CAmCnG,CAAC"}

package/lib/DataDisplay/Loading/Loading.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loading = 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 Loading = ({ progress = undefined, size = 43, color = '#218fd1', ...props }) => {
+    const pathLength = 125.68;
+    const rotationOffset = -0.75;
+    const rotationDelay = motions_1.DURATION.EXTRA_LONG * rotationOffset;
+    const fillAnimation = (0, react_1.keyframes) `
+    0% {
+      stroke-dashoffset: ${pathLength + pathLength};
+    }
+    100% {
+      stroke-dashoffset: 0;
+    }
+  `;
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 43 43", strokeWidth: "3", fill: "none", ...props, children: [(0, jsx_runtime_1.jsx)("circle", { cx: "21.5", cy: "21.5", r: "20", stroke: Identity_1.COLOR.opaque(color, 0.08) }), (0, jsx_runtime_1.jsx)("circle", { css: !progress && {
+                    animation: `${fillAnimation} ${motions_1.DURATION.EXTRA_LONG}ms ease-in-out infinite,
+              ${motions_1.ANIMATION.rotate} ${motions_1.DURATION.EXTRA_LONG}ms linear ${rotationDelay}ms infinite`,
+                    strokeDasharray: pathLength,
+                    transformOrigin: '50% 50%',
+                }, cx: "21.5", cy: "21.5", r: "20", stroke: color, strokeLinecap: "round", strokeDasharray: pathLength, strokeDashoffset: progress && `${pathLength - pathLength * progress}` })] }));
+};
+exports.Loading = Loading;
+exports.Loading.defaultProps = {
+    progress: undefined,
+    size: 43,
+};

package/lib/DataDisplay/Loading/Loading.stories.d.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Loading } from './Loading';
+declare const meta: Meta<typeof Loading>;
+export default meta;
+type Story = StoryObj<typeof Loading>;
+export declare const Default: Story;
+export declare const WithProgress: Story;
+export declare const CustomSize: Story;
+export declare const CustomColor: Story;
+export declare const Variants: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ColorVariants: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SizeVariants: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ProgressStages: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const OnDifferentBackgrounds: () => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Loading.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.stories.d.ts","sourceRoot":"","sources":["../../../src/DataDisplay/Loading/Loading.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAIlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAe9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAEF,eAAO,MAAM,QAAQ,wDAMpB,CAAC;AAEF,eAAO,MAAM,aAAa,wDAOzB,CAAC;AAEF,eAAO,MAAM,YAAY,wDAOxB,CAAC;AAEF,eAAO,MAAM,cAAc,wDAiB1B,CAAC;AAEF,eAAO,MAAM,sBAAsB,wDAYlC,CAAC"}

package/lib/DataDisplay/Loading/Loading.stories.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OnDifferentBackgrounds = exports.ProgressStages = exports.SizeVariants = exports.ColorVariants = exports.Variants = exports.CustomColor = exports.CustomSize = exports.WithProgress = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Loading_1 = require("./Loading");
+const colors_1 = require("../../Identity/colors");
+const meta = {
+    component: Loading_1.Loading,
+    title: 'DataDisplay/Loading',
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)("div", { style: { padding: '24px', maxWidth: '600px', margin: '0 auto' }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+    argTypes: {
+        color: { control: 'color' },
+        progress: { control: { type: 'range', min: 0, max: 1, step: 0.01 } },
+        size: { control: { type: 'range', min: 16, max: 200, step: 1 } },
+    },
+};
+exports.default = meta;
+exports.Default = {
+    args: {},
+};
+exports.WithProgress = {
+    args: {
+        progress: 0.33,
+    },
+};
+exports.CustomSize = {
+    args: {
+        size: 100,
+    },
+};
+exports.CustomColor = {
+    args: {
+        color: colors_1.COLOR.GREEN,
+    },
+};
+const Variants = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '32px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(Loading_1.Loading, {}), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { progress: 0.33 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { progress: 0.66, size: 100 })] }));
+exports.Variants = Variants;
+const ColorVariants = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '32px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(Loading_1.Loading, { color: colors_1.COLOR.BLUE }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { color: colors_1.COLOR.GREEN }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { color: colors_1.COLOR.RED }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { color: colors_1.COLOR.ORANGE })] }));
+exports.ColorVariants = ColorVariants;
+const SizeVariants = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '32px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(Loading_1.Loading, { size: 24 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { size: 48 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { size: 72 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { size: 96 })] }));
+exports.SizeVariants = SizeVariants;
+const ProgressStages = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '32px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '32px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(Loading_1.Loading, { progress: 0 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { progress: 0.25 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { progress: 0.5 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { progress: 0.75 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { progress: 1 })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '32px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(Loading_1.Loading, { size: 72, progress: 0 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { size: 72, progress: 0.25 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { size: 72, progress: 0.5 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { size: 72, progress: 0.75 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { size: 72, progress: 1 })] })] }));
+exports.ProgressStages = ProgressStages;
+const OnDifferentBackgrounds = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '32px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { padding: '24px', backgroundColor: colors_1.COLOR.WHITE }, children: (0, jsx_runtime_1.jsx)(Loading_1.Loading, {}) }), (0, jsx_runtime_1.jsx)("div", { style: { padding: '24px', backgroundColor: colors_1.COLOR.GRAY }, children: (0, jsx_runtime_1.jsx)(Loading_1.Loading, { color: colors_1.COLOR.WHITE }) }), (0, jsx_runtime_1.jsx)("div", { style: { padding: '24px', backgroundColor: colors_1.COLOR.BLACK }, children: (0, jsx_runtime_1.jsx)(Loading_1.Loading, { color: colors_1.COLOR.WHITE }) })] }));
+exports.OnDifferentBackgrounds = OnDifferentBackgrounds;

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Pill } from './Pill';
+declare const meta: Meta<typeof Pill>;
+export default meta;
+type Story = StoryObj<typeof Pill>;
+export declare const Default: Story;
+export declare const Active: Story;
+export declare const Error: Story;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const AllVariants: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const WithLongText: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Interactive: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Combinations: () => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Pill.stories.d.ts.map

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

@@ -0,0 +1,7 @@
+import { HTMLProps, ReactNode } from 'react';
+export interface TooltipProps<T = HTMLDivElement> extends HTMLProps<T> {
+    body: ReactNode;
+    selector?: string;
+}
+export declare const Tooltip: ({ children, ...props }: TooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Tooltip.d.ts.map

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