@wireapp/react-ui-kit 9.59.0 → 9.59.2

package/lib/Surface/Accordion/AccordionItem/AccordionItem.js

@@ -0,0 +1,51 @@
+"use strict";
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionItem = 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 AccordionPrimitive = __importStar(require("@radix-ui/react-accordion"));
+const AccordionItem_styles_1 = require("./AccordionItem.styles");
+const Icon_1 = require("../../../DataDisplay/Icon");
+exports.AccordionItem = (0, react_1.forwardRef)(({ title, children, value }, ref) => ((0, jsx_runtime_1.jsxs)(AccordionPrimitive.Item, { value: value, ref: ref, css: AccordionItem_styles_1.itemStyles, children: [(0, jsx_runtime_1.jsxs)(AccordionPrimitive.Trigger, { css: AccordionItem_styles_1.triggerStyles, children: [(0, jsx_runtime_1.jsx)("span", { css: AccordionItem_styles_1.triggerTextStyles, children: title }), (0, jsx_runtime_1.jsx)(Icon_1.ChevronDownIcon, { css: AccordionItem_styles_1.chevronStyles })] }), (0, jsx_runtime_1.jsx)(AccordionPrimitive.Content, { css: AccordionItem_styles_1.contentStyles, children: (0, jsx_runtime_1.jsx)("div", { css: AccordionItem_styles_1.contentTextStyles, children: children }) })] })));
+exports.AccordionItem.displayName = 'AccordionItem';

package/lib/Surface/Accordion/AccordionItem/AccordionItem.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.styles.d.ts","sourceRoot":"","sources":["../../../../src/Surface/Accordion/AccordionItem/AccordionItem.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAY,MAAM,gBAAgB,CAAC;AA0BpD,eAAO,MAAM,aAAa,EAAE,SAG3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,SAMxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAW3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,SAI/B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAQ3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,SAG/B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAQ3B,CAAC"}

package/lib/Surface/Accordion/AccordionItem/AccordionItem.styles.js

@@ -0,0 +1,92 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2024 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.chevronStyles = exports.contentTextStyles = exports.contentStyles = exports.triggerTextStyles = exports.triggerStyles = exports.itemStyles = exports.wrapperStyles = void 0;
+const react_1 = require("@emotion/react");
+const colors_v2_1 = require("../../../Identity/colors-v2/colors-v2");
+const util_1 = require("../../../utils/util");
+const ANIMATION_TIMING = '300ms';
+const ANIMATION_EASING = 'cubic-bezier(0.87, 0, 0.13, 1)';
+const slideDown = (0, react_1.keyframes) `
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+`;
+const slideUp = (0, react_1.keyframes) `
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+`;
+exports.wrapperStyles = {
+    width: '100%',
+    overflow: 'hidden',
+};
+exports.itemStyles = {
+    overflow: 'hidden',
+    borderBottom: `1px solid var(--text-input-border)`,
+    '&:not(:last-child)': {
+        marginBottom: '8px',
+    },
+};
+exports.triggerStyles = {
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    background: 'none',
+    padding: '0',
+    border: 'none',
+    cursor: 'pointer',
+    transition: 'background-color 0.2s ease',
+    height: '40px',
+};
+exports.triggerTextStyles = {
+    ...(0, util_1.ellipsis)(),
+    fontSize: '16px',
+    marginRight: '16px',
+};
+exports.contentStyles = {
+    overflow: 'hidden',
+    '&[data-state="open"]': {
+        animation: `${slideDown} ${ANIMATION_TIMING} ${ANIMATION_EASING}`,
+    },
+    '&[data-state="closed"]': {
+        animation: `${slideUp} ${ANIMATION_TIMING} ${ANIMATION_EASING}`,
+    },
+};
+exports.contentTextStyles = {
+    width: '100%',
+    padding: '16px 0',
+};
+exports.chevronStyles = {
+    width: '16px',
+    height: '16px',
+    color: colors_v2_1.COLOR_V2.GRAY_70,
+    transition: `transform ${ANIMATION_TIMING} ${ANIMATION_EASING}`,
+    '[data-state="open"] &': {
+        transform: 'rotate(180deg)',
+    },
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/Surface/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAKzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,YAAY;mBAAgB;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAC;8CAQ3D;QACD,QAAQ,EAAE,SAAS,CAAC;QACpB,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,MAAM,CAAC,EAAE,SAAS,CAAC;KACpB;4BAUwC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAC;kCAYf;QAAC,QAAQ,EAAE,SAAS,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAC;CAhCxF,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.stories.d.ts","sourceRoot":"","sources":["../../../src/Surface/DropdownMenu/DropdownMenu.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,oBAAoB,CAAC;AAElD,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAM5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAMnC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAE3C,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAa3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAa9B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAelC,CAAC"}

package/lib/Surface/DropdownMenu/DropdownMenu.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithCustomIconButton = exports.WithCustomButton = exports.WithLongItems = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const DropdownMenu_1 = require("./DropdownMenu");
+const Icon_1 = require("../../DataDisplay/Icon");
+const Inputs_1 = require("../../Inputs");
+const IconButton_1 = require("../../Inputs/IconButton");
+const meta = {
+    component: DropdownMenu_1.DropdownMenu,
+    title: 'Surface/DropdownMenu',
+    parameters: {
+        layout: 'centered',
+    },
+};
+exports.default = meta;
+exports.Default = {
+    render: () => ((0, jsx_runtime_1.jsxs)(DropdownMenu_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Trigger, { cssObj: { width: '40px', height: '40px' }, children: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, {}) }), (0, jsx_runtime_1.jsxs)(DropdownMenu_1.DropdownMenu.Content, { children: [(0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Copy" }), (0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Details" }), (0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Delete for me" })] })] })),
+};
+exports.WithLongItems = {
+    render: () => ((0, jsx_runtime_1.jsxs)(DropdownMenu_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Trigger, { cssObj: { width: '40px', height: '40px' }, children: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, {}) }), (0, jsx_runtime_1.jsxs)(DropdownMenu_1.DropdownMenu.Content, { children: [(0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Copy the detail of this message" }), (0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Contact the sender" }), (0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Delete this message (works only if you are the owner)" })] })] })),
+};
+exports.WithCustomButton = {
+    render: () => ((0, jsx_runtime_1.jsxs)(DropdownMenu_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(Inputs_1.Button, { variant: Inputs_1.ButtonVariant.PRIMARY, children: "Open menu" }) }), (0, jsx_runtime_1.jsxs)(DropdownMenu_1.DropdownMenu.Content, { children: [(0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Copy" }), (0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Details" }), (0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Delete for me" })] })] })),
+};
+exports.WithCustomIconButton = {
+    render: () => ((0, jsx_runtime_1.jsxs)(DropdownMenu_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: IconButton_1.IconButtonVariant.PRIMARY, children: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, {}) }) }), (0, jsx_runtime_1.jsxs)(DropdownMenu_1.DropdownMenu.Content, { children: [(0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Copy" }), (0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Details" }), (0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Delete for me" })] })] })),
+};

package/lib/Surface/DropdownMenu/DropdownMenu.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.styles.d.ts","sourceRoot":"","sources":["../../../src/Surface/DropdownMenu/DropdownMenu.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAY,MAAM,gBAAgB,CAAC;AAkDpD,eAAO,MAAM,YAAY,EAAE,SA0B1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,SAiBvB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,SAIxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAS3B,CAAC"}

package/lib/Surface/DropdownMenu/DropdownMenu.styles.js

@@ -0,0 +1,122 @@
+"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/.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.triggerStyles = exports.textStyles = exports.itemStyle = exports.contentStyle = void 0;
+const react_1 = require("@emotion/react");
+const util_1 = require("../../utils/util");
+const slideUpAndFade = (0, react_1.keyframes) `
+	from {
+		opacity: 0;
+		transform: translateY(2px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+`;
+const slideRightAndFade = (0, react_1.keyframes) `
+	from {
+		opacity: 0;
+		transform: translateX(-2px);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}`;
+const slideDownAndFade = (0, react_1.keyframes) `
+	from {
+		opacity: 0;
+		transform: translateY(-2px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+`;
+const slideLeftAndFade = (0, react_1.keyframes) `
+	from {
+		opacity: 0;
+		transform: translateX(2px);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+`;
+exports.contentStyle = {
+    minWidth: '160px',
+    zIndex: 'var(--z-index-modal)',
+    padding: '8px 0',
+    borderRadius: '12px',
+    backgroundColor: 'var(--modal-bg)',
+    boxShadow: '0 0 1px 0 rgba(0, 0, 0, 0.08), 0 8px 24px 0 rgba(0, 0, 0, 0.16)',
+    animationDuration: '400ms',
+    animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+    willChange: 'transform, opacity',
+    outline: 'auto',
+    '&[data-side="top"]': {
+        animationName: slideDownAndFade,
+    },
+    '&[data-side="right"]': {
+        animationName: slideLeftAndFade,
+    },
+    '&[data-side="bottom"]': {
+        animationName: slideUpAndFade,
+    },
+    '&[data-side="left"]': {
+        animationName: slideRightAndFade,
+    },
+};
+exports.itemStyle = {
+    fontSize: '12px',
+    fontWeight: 400,
+    lineHeight: '2rem',
+    padding: '0 8px',
+    position: 'relative',
+    userSelect: 'none',
+    outline: 'none',
+    cursor: 'pointer',
+    display: 'flex',
+    overflow: 'hidden',
+    maxWidth: '300px',
+    alignItems: 'center',
+    '&[data-highlighted]': {
+        backgroundColor: 'var(--foreground-fade-16)',
+    },
+};
+exports.textStyles = {
+    ...(0, util_1.ellipsis)(),
+    display: 'inline-block',
+    flexGrow: 1,
+};
+exports.triggerStyles = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '0',
+    margin: '0',
+    border: 'none',
+    background: 'none',
+    cursor: 'pointer',
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuModal.d.ts","sourceRoot":"","sources":["../../../src/Surface/MenuModal/MenuModal.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsE/B,UAAU,cAAc,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IACrE,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,SAAS,8CAInB,cAAc,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,qDAOlD,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,CAAC,GAAG,aAAa,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAElE,eAAO,MAAM,QAAQ,2BAAiC,aAAa,GAAG,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,qDAenG,CAAC"}

package/lib/Surface/MenuModal/MenuModal.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = exports.MenuModal = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Identity_1 = require("../../Identity");
+const motions_1 = require("../../Identity/motions/motions");
+const utils_1 = require("../../utils");
+const util_1 = require("../../utils/util");
+const Overlay_1 = require("../Modal/Overlay");
+const menuModalWrapperStyle = props => ({
+    ...(0, Overlay_1.overlayBackgroundStyle)(props),
+    alignItems: 'flex-end',
+    alignSelf: 'flex-end',
+    display: 'flex',
+    overflowY: 'hidden',
+    padding: 0,
+});
+const MenuModalWrapper = (props) => (0, jsx_runtime_1.jsx)("div", { css: menuModalWrapperStyle, ...props });
+const MenuModalBody = (props) => ((0, jsx_runtime_1.jsx)("div", { css: (theme) => ({
+        animation: `${motions_1.ANIMATION.bottomUpMovement} ${motions_1.DURATION.DEFAULT}ms ${motions_1.EASE.EXPONENTIAL}`,
+        backgroundColor: Identity_1.COLOR.tint(theme.general.backgroundColor, 0.16),
+        boxShadow: '0 16px 64px 0 rgba(0, 0, 0, 0.16)',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        padding: '8px 16px',
+        position: 'relative',
+        width: '767px',
+        zIndex: 9999,
+        [utils_1.media[utils_1.QueryKeys.TABLET_DOWN]]: {
+            width: '100%',
+        },
+    }), ...props }));
+const MenuModalContent = (props) => ((0, jsx_runtime_1.jsx)("ul", { css: {
+        li: {
+            borderBottom: `1px solid ${Identity_1.COLOR.GRAY_LIGHTEN_72}`,
+        },
+        'li:last-child': {
+            borderBottom: 0,
+        },
+        margin: 0,
+        maxWidth: '100%',
+        minWidth: '100%',
+        padding: 0,
+    }, ...props }));
+const modalBackgroundStyle = props => ({
+    ...(0, Overlay_1.overlayBackgroundStyle)(props),
+    background: 'rgba(50, 54, 57, 0.4)',
+});
+const MenuModalBackground = (props) => (0, jsx_runtime_1.jsx)("div", { css: modalBackgroundStyle, ...props });
+const MenuModal = ({ children = null, onBackgroundClick = util_1.noop, ...props }) => ((0, jsx_runtime_1.jsxs)(MenuModalWrapper, { ...props, children: [(0, jsx_runtime_1.jsx)(MenuModalBody, { children: (0, jsx_runtime_1.jsx)(MenuModalContent, { children: children }) }), (0, jsx_runtime_1.jsx)(MenuModalBackground, { onClick: onBackgroundClick, "data-uie-name": "menu-background" })] }));
+exports.MenuModal = MenuModal;
+const MenuItem = ({ children = null, ...props }) => ((0, jsx_runtime_1.jsx)("li", { css: (theme) => ({
+        alignItems: 'center',
+        color: theme.general.color,
+        cursor: 'pointer',
+        display: 'flex',
+        height: '56px',
+        listStyleType: 'none',
+        maxWidth: '100%',
+    }), ...props, children: children }));
+exports.MenuItem = MenuItem;

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/Surface/Modal/Modal.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAgED,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC;CACf;AA0DD,UAAU,UAAU;IAClB,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAsBxE,CAAC"}

package/lib/Surface/Modal/Modal.js

@@ -0,0 +1,98 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const color_1 = __importDefault(require("color"));
+const Overlay_1 = require("./Overlay");
+const Icon_1 = require("../../DataDisplay/Icon");
+const Identity_1 = require("../../Identity");
+const utils_1 = require("../../utils");
+const util_1 = require("../../utils/util");
+const modalBodyStyle = (theme, { fullscreen = false }) => ({
+    alignItems: 'center',
+    backgroundColor: theme.general.backgroundColor,
+    borderRadius: fullscreen ? 0 : '8px',
+    bottom: fullscreen ? 0 : undefined,
+    boxShadow: fullscreen ? 'none' : '0 16px 64px 0 rgba(0, 0, 0, 0.16)',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: fullscreen ? 'center' : 'space-between',
+    left: fullscreen ? 0 : undefined,
+    margin: 'auto',
+    position: fullscreen ? 'fixed' : 'relative',
+    right: fullscreen ? 0 : undefined,
+    top: fullscreen ? 0 : undefined,
+    transform: 'translate3d(0, 0, 0)',
+    zIndex: 9999,
+    [utils_1.media[utils_1.QueryKeys.TABLET_DOWN]]: {
+        width: fullscreen ? 'initial' : '100%',
+    },
+});
+const filterModalBodyProps = (props) => (0, util_1.filterProps)(props, ['fullscreen']);
+const ModalBody = (props) => ((0, jsx_runtime_1.jsx)("div", { css: (theme) => modalBodyStyle(theme, props), ...filterModalBodyProps(props) }));
+const ModalClose = (props) => ((0, jsx_runtime_1.jsx)(Icon_1.CloseIcon, { width: 16, height: 16, css: {
+        alignItems: 'center',
+        cursor: 'pointer',
+        display: 'flex',
+        justifyContent: 'center',
+        position: 'absolute',
+        right: 16,
+        top: 16,
+    }, ...props }));
+const ModalContent = props => ((0, jsx_runtime_1.jsx)("div", { css: {
+        maxWidth: '100%',
+        overflowY: 'auto',
+        padding: '40px',
+    }, ...props }));
+const modalBackgroundStyle = props => ({
+    ...(0, Overlay_1.overlayBackgroundStyle)(props),
+    backgroundColor: 'rgba(50, 54, 57, 0.4)',
+});
+const ModalBackground = (props) => (0, jsx_runtime_1.jsx)("div", { css: modalBackgroundStyle(props), ...props });
+const modalActionsWrapperStyles = () => ({
+    borderTop: `1px solid ${Identity_1.COLOR.GRAY_LIGHTEN_72}`,
+    bottom: 0,
+    display: 'flex',
+    div: {
+        '&:hover': {
+            backgroundColor: Identity_1.COLOR.opaque(Identity_1.COLOR.GRAY_DARKEN_72, 0.04),
+        },
+        '&:active': {
+            backgroundColor: Identity_1.COLOR.opaque(Identity_1.COLOR.GRAY_DARKEN_72, 0.08),
+        },
+        borderRight: `1px solid ${Identity_1.COLOR.GRAY_LIGHTEN_72}`,
+    },
+    'div:first-child': {
+        borderBottomLeftRadius: 8,
+    },
+    'div:last-child': {
+        borderBottomRightRadius: 8,
+        borderRight: 0,
+    },
+    position: 'absolute',
+    width: '100%',
+});
+const modalActionStyles = ({ bold }) => ({
+    '&:hover': {
+        color: (0, color_1.default)(Identity_1.COLOR.BLUE).mix((0, color_1.default)(Identity_1.COLOR.BLACK), 0.16).toString(),
+    },
+    color: Identity_1.COLOR.BLUE,
+    cursor: 'pointer',
+    display: 'flex',
+    flex: 1,
+    fontWeight: bold ? 'bold' : 'normal',
+    justifyContent: 'center',
+    padding: '8px 0',
+});
+const ModalActions = ({ actions }) => ((0, jsx_runtime_1.jsx)("div", { css: modalActionsWrapperStyles(), children: actions.map(action => ((0, jsx_runtime_1.jsx)("div", { onClick: action.onClick, css: modalActionStyles({ bold: action.bold }), "data-uie-name": action.dataUieName, children: action.title }, action.title))) }));
+const Modal = ({ actions = [], children, bodyStyle, fullscreen, onClose, onBackgroundClick, ...props }) => ((0, jsx_runtime_1.jsxs)(Overlay_1.OverlayWrapper, { ...props, "data-uie-name": "modal", children: [(0, jsx_runtime_1.jsxs)(ModalBody, { fullscreen: fullscreen, style: bodyStyle, children: [(0, jsx_runtime_1.jsx)(ModalContent, { children: children }), onClose !== util_1.noop && (0, jsx_runtime_1.jsx)(ModalClose, { onClick: onClose, "data-uie-name": "do-close" }), actions.length > 0 && (0, jsx_runtime_1.jsx)(ModalActions, { actions: actions, "data-uie-name": "modal-actions" })] }), !fullscreen && ((0, jsx_runtime_1.jsx)(ModalBackground, { onClick: onBackgroundClick === util_1.noop ? onClose : onBackgroundClick, "data-uie-name": "modal-background" }))] }));
+exports.Modal = Modal;
+exports.Modal.defaultProps = {
+    actions: [],
+    fullscreen: false,
+    onBackgroundClick: util_1.noop,
+    onClose: util_1.noop,
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/Surface/Modal/Modal.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAK9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAM5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAYpC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAsBzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAgBzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAqB7B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAuB7B,CAAC"}

package/lib/Surface/Modal/Modal.stories.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultipleActions = exports.WithLongContent = exports.CustomWidth = exports.Fullscreen = exports.WithActions = 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 Modal_1 = require("./Modal");
+const Inputs_1 = require("../../Inputs");
+const Typography_1 = require("../../Typography");
+const meta = {
+    component: Modal_1.Modal,
+    title: 'Surface/Modal',
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+exports.default = meta;
+const ModalDemo = ({ children }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { padding: '24px' }, children: [(0, jsx_runtime_1.jsx)(Inputs_1.Button, { onClick: () => setIsOpen(true), children: "Open Modal" }), children(isOpen, setIsOpen)] }));
+};
+exports.Default = {
+    render: () => ((0, jsx_runtime_1.jsx)(ModalDemo, { children: (isOpen, setIsOpen) => isOpen && ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { onClose: () => setIsOpen(false), children: [(0, jsx_runtime_1.jsx)(Typography_1.H2, { style: { margin: 0 }, children: "Normal Modal" }), (0, jsx_runtime_1.jsx)(Typography_1.Paragraph, { children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { block: true, children: "This is a normal modal with default styling." }) }), (0, jsx_runtime_1.jsx)(Inputs_1.Button, { onClick: () => setIsOpen(false), children: "Close" })] })) })),
+};
+exports.WithActions = {
+    render: () => ((0, jsx_runtime_1.jsx)(ModalDemo, { children: (isOpen, setIsOpen) => isOpen && ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { onClose: () => setIsOpen(false), bodyStyle: { width: 360 }, actions: [
+                { title: 'Cancel', onClick: () => setIsOpen(false), bold: false },
+                { title: 'Send', onClick: () => setIsOpen(false), bold: true },
+            ], children: [(0, jsx_runtime_1.jsx)(Typography_1.H2, { style: { margin: 0 }, children: "Modal with actions" }), (0, jsx_runtime_1.jsx)(Typography_1.Paragraph, { children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { block: true, children: "This modal has action buttons at the bottom." }) })] })) })),
+};
+exports.Fullscreen = {
+    render: () => ((0, jsx_runtime_1.jsx)(ModalDemo, { children: (isOpen, setIsOpen) => isOpen && ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { fullscreen: true, onClose: () => setIsOpen(false), children: [(0, jsx_runtime_1.jsx)(Typography_1.H1, { children: "Fullscreen Modal" }), (0, jsx_runtime_1.jsx)(Typography_1.Paragraph, { children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { block: true, children: "This modal takes up the entire screen." }) }), (0, jsx_runtime_1.jsx)(Inputs_1.Button, { onClick: () => setIsOpen(false), children: "Close" })] })) })),
+};
+exports.CustomWidth = {
+    render: () => ((0, jsx_runtime_1.jsx)(ModalDemo, { children: (isOpen, setIsOpen) => isOpen && ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { onClose: () => setIsOpen(false), bodyStyle: { width: 800 }, children: [(0, jsx_runtime_1.jsx)(Typography_1.H2, { style: { margin: 0 }, children: "Wide Modal" }), (0, jsx_runtime_1.jsx)(Typography_1.Paragraph, { children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { block: true, children: "This modal has a custom width of 800px." }) }), (0, jsx_runtime_1.jsx)(Inputs_1.Button, { onClick: () => setIsOpen(false), children: "Close" })] })) })),
+};
+exports.WithLongContent = {
+    render: () => ((0, jsx_runtime_1.jsx)(ModalDemo, { children: (isOpen, setIsOpen) => isOpen && ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { onClose: () => setIsOpen(false), children: [(0, jsx_runtime_1.jsx)(Typography_1.H2, { style: { margin: 0 }, children: "Modal with Long Content" }), Array.from({ length: 10 }).map((_, index) => ((0, jsx_runtime_1.jsx)(Typography_1.Paragraph, { children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { block: true, children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget ultricies ultricies, nunc nunc aliquam nunc, vitae aliquam nunc nunc vitae nunc." }) }, index))), (0, jsx_runtime_1.jsx)(Inputs_1.Button, { onClick: () => setIsOpen(false), children: "Close" })] })) })),
+};
+exports.MultipleActions = {
+    render: () => ((0, jsx_runtime_1.jsx)(ModalDemo, { children: (isOpen, setIsOpen) => isOpen && ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { onClose: () => setIsOpen(false), bodyStyle: { width: 400 }, actions: [
+                { title: 'Delete', onClick: () => setIsOpen(false), bold: false },
+                { title: 'Edit', onClick: () => setIsOpen(false), bold: false },
+                { title: 'Save', onClick: () => setIsOpen(false), bold: true },
+            ], children: [(0, jsx_runtime_1.jsx)(Typography_1.H2, { style: { margin: 0 }, children: "Multiple Actions" }), (0, jsx_runtime_1.jsx)(Typography_1.Paragraph, { children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { block: true, children: "This modal has multiple action buttons." }) })] })) })),
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../src/Surface/Modal/Overlay.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAOzC,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAEzE,eAAO,MAAM,mBAAmB,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,SAUtE,CAAC;AAEH,eAAO,MAAM,cAAc,UAAW,mBAAmB,qDAAiD,CAAC;AAE3G,eAAO,MAAM,cAAc,UAAW,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,qDAsBpE,CAAC;AAEF,MAAM,MAAM,sBAAsB,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAE5E,eAAO,MAAM,sBAAsB,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,sBAAsB,CAAC,CAAC,CAAC,KAAK,SAS5E,CAAC;AAEH,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,qDAAoD,CAAC;AAEpH,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC1E,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,OAAO,8CAA2D,YAAY,qDAK1F,CAAC"}