@wireapp/react-ui-kit 9.59.1 → 9.59.2

package/lib/Surface/Modal/Overlay.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Overlay = exports.OverlayBackground = exports.overlayBackgroundStyle = exports.OverlayContent = exports.OverlayWrapper = exports.overlayWrapperStyle = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Identity_1 = require("../../Identity");
+const motions_1 = require("../../Identity/motions");
+const utils_1 = require("../../utils");
+const util_1 = require("../../utils/util");
+const overlayWrapperStyle = () => ({
+    bottom: 0,
+    display: 'flex',
+    left: 0,
+    overflowY: 'auto',
+    padding: '24px',
+    position: 'fixed',
+    right: 0,
+    top: 0,
+    zIndex: 9997,
+});
+exports.overlayWrapperStyle = overlayWrapperStyle;
+const OverlayWrapper = (props) => (0, jsx_runtime_1.jsx)("div", { css: exports.overlayWrapperStyle, ...props });
+exports.OverlayWrapper = OverlayWrapper;
+const OverlayContent = (props) => ((0, jsx_runtime_1.jsx)("div", { css: {
+        '*': {
+            color: Identity_1.COLOR.WHITE,
+        },
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        margin: 'auto',
+        maxWidth: '100%',
+        overflowY: 'auto',
+        position: 'relative',
+        transform: 'translate3d(0, 0, 0)',
+        zIndex: 9999,
+        [utils_1.media[utils_1.QueryKeys.TABLET_DOWN]]: {
+            width: '100%',
+        },
+    }, ...props }));
+exports.OverlayContent = OverlayContent;
+const overlayBackgroundStyle = () => ({
+    animation: `${motions_1.ANIMATION.fadeIn} ${motions_1.DURATION.PROACTIVE_SLOW}ms ${motions_1.EASE.QUART}`,
+    background: 'rgba(0, 0, 0, 0.88)',
+    height: '100vh',
+    left: 0,
+    position: 'fixed',
+    top: 0,
+    width: '100vw',
+    zIndex: 9998,
+});
+exports.overlayBackgroundStyle = overlayBackgroundStyle;
+const OverlayBackground = (props) => (0, jsx_runtime_1.jsx)("div", { css: exports.overlayBackgroundStyle, ...props });
+exports.OverlayBackground = OverlayBackground;
+const Overlay = ({ onBackgroundClick = util_1.noop, children = null, ...props }) => ((0, jsx_runtime_1.jsxs)(exports.OverlayWrapper, { ...props, "data-uie-name": "modal", children: [(0, jsx_runtime_1.jsx)(exports.OverlayContent, { children: children }), (0, jsx_runtime_1.jsx)(exports.OverlayBackground, { onClick: onBackgroundClick, "data-uie-name": "overlay-background" })] }));
+exports.Overlay = Overlay;

package/lib/Surface/Modal/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Modal';
+export { Overlay } from './Overlay';
+//# sourceMappingURL=index.d.ts.map

package/lib/Surface/Modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Surface/Modal/index.ts"],"names":[],"mappings":"AAmBA,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC"}

package/lib/Surface/Modal/index.js

@@ -0,0 +1,38 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2018 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+var __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 });
+exports.Overlay = void 0;
+__exportStar(require("./Modal"), exports);
+var Overlay_1 = require("./Overlay");
+Object.defineProperty(exports, "Overlay", { enumerable: true, get: function () { return Overlay_1.Overlay; } });

package/lib/Surface/TabBar/TabBar.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { TextProps } from '../../Typography';
+export type TabBarProps<T = HTMLDivElement> = React.HTMLProps<T>;
+export declare const TabBar: ({ children, ...props }: TabBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export interface TabBarItemProps<T = HTMLSpanElement> extends TextProps<T> {
+    active: boolean;
+}
+export declare const TabBarItem: ({ children, ...props }: TabBarItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TabBar.d.ts.map

package/lib/Surface/TabBar/TabBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../../src/Surface/TabBar/TabBar.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAC,SAAS,EAAY,MAAM,kBAAkB,CAAC;AAGtD,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAWjE,eAAO,MAAM,MAAM,2BAAiC,WAAW,qDAI9D,CAAC;AAEF,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,eAAe,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACxE,MAAM,EAAE,OAAO,CAAC;CACjB;AA2BD,eAAO,MAAM,UAAU,2BAAiC,eAAe,qDAItE,CAAC"}

package/lib/Surface/TabBar/TabBar.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabBarItem = exports.TabBar = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Identity_1 = require("../../Identity");
+const Typography_1 = require("../../Typography");
+const util_1 = require("../../utils/util");
+const tabBarStyle = ({}) => {
+    return {
+        display: 'flex',
+        width: '100%',
+    };
+};
+const filteredTabBarProps = (props) => (0, util_1.filterProps)(props, []);
+const TabBar = ({ children = null, ...props }) => ((0, jsx_runtime_1.jsx)("div", { css: tabBarStyle(props), ...filteredTabBarProps(props), children: children }));
+exports.TabBar = TabBar;
+const tabBarItemStyle = (theme, { block = true, center = true, color = theme.general.color, bold = true, active = false, fontSize = theme.fontSizes.extraSmall, textTransform = 'uppercase', ...props }) => {
+    return {
+        ...(0, Typography_1.textStyle)(theme, { block, bold, center, color, fontSize, textTransform, ...props }),
+        borderBottom: active ? `1px solid ${Identity_1.COLOR.GRAY_DARKEN_48}` : `1px solid ${Identity_1.COLOR.GRAY_LIGHTEN_40}`,
+        cursor: 'pointer',
+        display: 'flex',
+        flexGrow: 1,
+        justifyContent: 'center',
+        opacity: active ? 1 : 0.56,
+        padding: '8px 0',
+    };
+};
+const TabBarItem = ({ children = null, ...props }) => ((0, jsx_runtime_1.jsx)("span", { css: (theme) => tabBarItemStyle(theme, props), ...props, children: children }));
+exports.TabBarItem = TabBarItem;

package/lib/Surface/TabBar/TabBar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.stories.d.ts","sourceRoot":"","sources":["../../../src/Surface/TabBar/TabBar.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAa,MAAM,UAAU,CAAC;AAE5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAU7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,WAAW,wDAavB,CAAC;AAEF,eAAO,MAAM,WAAW,wDAoBvB,CAAC;AAEF,eAAO,MAAM,SAAS,wDA0BrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAiB3B,CAAC"}

package/lib/Surface/TabBar/TabBar.stories.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomStyling = exports.WithBadge = exports.WithContent = exports.Interactive = exports.Default = 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 TabBar_1 = require("./TabBar");
+const meta = {
+    component: TabBar_1.TabBar,
+    title: 'Surface/TabBar',
+    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;
+exports.Default = {
+    args: {
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: true, children: "First Tab" }), (0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: false, children: "Second Tab" }), (0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: false, children: "Third Tab" })] })),
+    },
+};
+const Interactive = () => {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(0);
+    const tabs = ['First Tab', 'Second Tab', 'Third Tab'];
+    return ((0, jsx_runtime_1.jsx)(TabBar_1.TabBar, { children: tabs.map((tab, index) => ((0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: activeTab === index, onClick: () => setActiveTab(index), children: tab }, tab))) }));
+};
+exports.Interactive = Interactive;
+const WithContent = () => {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(0);
+    const tabs = ['Details', 'History', 'Settings'];
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(TabBar_1.TabBar, { children: tabs.map((tab, index) => ((0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: activeTab === index, onClick: () => setActiveTab(index), children: tab }, tab))) }), (0, jsx_runtime_1.jsxs)("div", { style: { padding: '16px' }, children: [activeTab === 0 && (0, jsx_runtime_1.jsx)("div", { children: "Details content" }), activeTab === 1 && (0, jsx_runtime_1.jsx)("div", { children: "History content" }), activeTab === 2 && (0, jsx_runtime_1.jsx)("div", { children: "Settings content" })] })] }));
+};
+exports.WithContent = WithContent;
+const WithBadge = () => {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(0);
+    return ((0, jsx_runtime_1.jsxs)(TabBar_1.TabBar, { children: [(0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: activeTab === 0, onClick: () => setActiveTab(0), children: "Messages" }), (0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: activeTab === 1, onClick: () => setActiveTab(1), children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: ["Notifications", (0, jsx_runtime_1.jsx)("span", { style: {
+                                backgroundColor: 'red',
+                                borderRadius: '8px',
+                                color: 'white',
+                                fontSize: '12px',
+                                padding: '2px 6px',
+                            }, children: "3" })] }) })] }));
+};
+exports.WithBadge = WithBadge;
+exports.CustomStyling = {
+    args: {
+        style: { backgroundColor: '#f5f5f5', padding: '8px' },
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: true, style: { fontWeight: 'bold' }, children: "Bold Tab" }), (0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: false, style: { color: 'blue' }, children: "Blue Tab" }), (0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: false, style: { textTransform: 'none' }, children: "Normal Case Tab" })] })),
+    },
+};

package/lib/Surface/TabBar/index.d.ts

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

package/lib/Surface/TabBar/index.d.ts.map

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

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

package/lib/Surface/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Accordion';
+export * from './DropdownMenu';
+export * from './MenuModal';
+export * from './Modal';
+export * from './TabBar';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Surface/index.ts"],"names":[],"mappings":"AAmBA,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}

package/lib/Surface/index.js

@@ -0,0 +1,39 @@
+"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("./Accordion"), exports);
+__exportStar(require("./DropdownMenu"), exports);
+__exportStar(require("./MenuModal"), exports);
+__exportStar(require("./Modal"), exports);
+__exportStar(require("./TabBar"), exports);

package/lib/Typography/Heading/Heading.d.ts

@@ -0,0 +1,16 @@
+import { CSSObject } from '@emotion/react';
+import { Theme } from '../../Identity/Theme';
+import { TextProps } from '../Text';
+export interface HeadingProps<T = HTMLHeadingElement> extends TextProps<T> {
+    level?: string;
+}
+export declare const Heading: ({ level, ...props }: HeadingProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const h1Style: <T>(theme: Theme, props: HeadingProps<T>) => CSSObject;
+export declare const H1: (props: HeadingProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const h2Style: <T>(theme: Theme, props: HeadingProps<T>) => CSSObject;
+export declare const H2: (props: HeadingProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const h3Style: <T>(theme: Theme, props: HeadingProps<T>) => CSSObject;
+export declare const H3: (props: HeadingProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const h4Style: <T>(theme: Theme, props: HeadingProps<T>) => CSSObject;
+export declare const H4: (props: HeadingProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Heading.d.ts.map

package/lib/Typography/Heading/Heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../src/Typography/Heading/Heading.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,KAAK,EAAC,MAAM,sBAAsB,CAAC;AAE3C,OAAO,EAAC,SAAS,EAA6B,MAAM,SAAS,CAAC;AAE9D,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,kBAAkB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,OAAO,wBAAuB,YAAY,qDAYtD,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,SAejE,CAAC;AAEH,eAAO,MAAM,EAAE,UAAW,YAAY,qDAErC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,SAgBjE,CAAC;AAEH,eAAO,MAAM,EAAE,UAAW,YAAY,qDAErC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,SAQjE,CAAC;AAEH,eAAO,MAAM,EAAE,UAAW,YAAY,qDAErC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,SASjE,CAAC;AAEH,eAAO,MAAM,EAAE,UAAW,YAAY,qDAErC,CAAC"}

package/lib/Typography/Heading/Heading.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.H4 = exports.h4Style = exports.H3 = exports.h3Style = exports.H2 = exports.h2Style = exports.H1 = exports.h1Style = exports.Heading = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const utils_1 = require("../../utils");
+const Text_1 = require("../Text");
+const Heading = ({ level, ...props }) => {
+    switch (level) {
+        case '2':
+            return (0, jsx_runtime_1.jsx)(exports.H2, { ...props });
+        case '3':
+            return (0, jsx_runtime_1.jsx)(exports.H3, { ...props });
+        case '4':
+            return (0, jsx_runtime_1.jsx)(exports.H4, { ...props });
+        case '1':
+        default:
+            return (0, jsx_runtime_1.jsx)(exports.H1, { ...props });
+    }
+};
+exports.Heading = Heading;
+const h1Style = (theme, { block = true, color = theme.general.color, level = '1', noWrap = false, textTransform = 'none', ...props }) => ({
+    ...(0, Text_1.textStyle)(theme, { block, color, noWrap, textTransform, ...props }),
+    fontSize: '3rem',
+    fontWeight: 400,
+    lineHeight: '3.5rem',
+    marginBottom: '64px',
+    marginTop: 0,
+    minHeight: '3rem',
+    [utils_1.media[utils_1.QueryKeys.MOBILE]]: {
+        fontSize: '2.5rem',
+        lineHeight: '3rem',
+    },
+});
+exports.h1Style = h1Style;
+const H1 = (props) => ((0, jsx_runtime_1.jsx)("h1", { css: (theme) => (0, exports.h1Style)(theme, props), ...(0, Text_1.filterTextProps)(props) }));
+exports.H1 = H1;
+const h2Style = (theme, { block = true, color = theme.general.color, noWrap = false, textTransform = 'none', ...props }) => ({
+    ...(0, Text_1.textStyle)(theme, { block, color, noWrap, textTransform, ...props }),
+    fontSize: '1.25rem',
+    fontWeight: 700,
+    lineHeight: '1.75rem',
+    marginBottom: '24px',
+    marginTop: '32px',
+    [utils_1.media[utils_1.QueryKeys.MOBILE]]: {
+        fontSize: '1.125rem',
+        lineHeight: '1.625rem',
+        marginBottom: '20px',
+        marginTop: '26px',
+    },
+});
+exports.h2Style = h2Style;
+const H2 = (props) => ((0, jsx_runtime_1.jsx)("h2", { css: (theme) => (0, exports.h2Style)(theme, props), ...(0, Text_1.filterTextProps)(props) }));
+exports.H2 = H2;
+const h3Style = (theme, { block = true, color = theme.general.color, noWrap = false, textTransform = 'none', ...props }) => ({
+    ...(0, Text_1.textStyle)(theme, { block, color, noWrap, textTransform, ...props }),
+    fontSize: theme.fontSizes.base,
+    fontWeight: 600,
+    marginBottom: '16px',
+});
+exports.h3Style = h3Style;
+const H3 = (props) => ((0, jsx_runtime_1.jsx)("h3", { css: (theme) => (0, exports.h3Style)(theme, props), ...(0, Text_1.filterTextProps)(props) }));
+exports.H3 = H3;
+const h4Style = (theme, { block = true, color = theme.general.color, noWrap = false, textTransform = 'none', ...props }) => ({
+    ...(0, Text_1.textStyle)(theme, { block, color, noWrap, textTransform, ...props }),
+    fontSize: theme.fontSizes.extraSmall,
+    fontWeight: 400,
+    marginBottom: '5px',
+    marginTop: '20px',
+});
+exports.h4Style = h4Style;
+const H4 = (props) => ((0, jsx_runtime_1.jsx)("h3", { css: (theme) => (0, exports.h4Style)(theme, props), ...(0, Text_1.filterTextProps)(props) }));
+exports.H4 = H4;

package/lib/Typography/Heading/Heading.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.stories.d.ts","sourceRoot":"","sources":["../../../src/Typography/Heading/Heading.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAIrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAS9B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC"}

package/lib/Typography/Heading/index.d.ts

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

package/lib/Typography/Heading/index.d.ts.map

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

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

package/lib/Typography/Label/Label.d.ts

@@ -0,0 +1,9 @@
+import { LinkProps } from '../Link';
+import { TextProps } from '../Text';
+export interface LabelProps<T = HTMLSpanElement> extends TextProps<T> {
+    markInvalid?: boolean;
+}
+export declare const Label: (props: LabelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export type LabelLinkProps<T = HTMLAnchorElement> = LinkProps<T>;
+export declare const LabelLink: (props: LabelProps<HTMLAnchorElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Label.d.ts.map

package/lib/Typography/Label/Label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/Typography/Label/Label.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAC,SAAS,EAAY,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAC,SAAS,EAA6B,MAAM,SAAS,CAAC;AAE9D,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,eAAe,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACnE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAcD,eAAO,MAAM,KAAK,UAAW,UAAU,qDAGtC,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,iBAAiB,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;AASjE,eAAO,MAAM,SAAS,UAAW,UAAU,CAAC,iBAAiB,CAAC,qDAG7D,CAAC"}

package/lib/Typography/Label/Label.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabelLink = exports.Label = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Identity_1 = require("../../Identity");
+const Link_1 = require("../Link");
+const Text_1 = require("../Text");
+const labelStyle = (theme, { markInvalid, bold = false, color = theme.general.color, fontSize = theme.fontSizes.small, ...props }) => ({
+    ...(0, Text_1.textStyle)(theme, { bold, color, fontSize, ...props }),
+    '&:focus-within': {
+        color: Identity_1.COLOR.BLUE,
+    },
+    color: markInvalid ? Identity_1.COLOR.RED : 'initial',
+    width: '100%',
+});
+const Label = (props) => (
+// eslint-disable-next-line jsx-a11y/label-has-associated-control
+(0, jsx_runtime_1.jsx)("label", { css: (theme) => labelStyle(theme, props), ...(0, Text_1.filterTextProps)(props) }));
+exports.Label = Label;
+const labelLinkStyle = (theme, { fontSize = theme.fontSizes.small, ...props }) => ({
+    ...(0, Link_1.linkStyle)(theme, { fontSize, ...props }),
+});
+const LabelLink = (props) => (
+// eslint-disable-next-line jsx-a11y/anchor-has-content
+(0, jsx_runtime_1.jsx)("a", { css: (theme) => labelLinkStyle(theme, props), ...(0, Text_1.filterTextProps)(props) }));
+exports.LabelLink = LabelLink;