@wireapp/react-ui-kit 9.51.0 → 9.52.1

package/lib/Form/Button.d.ts

@@ -16,6 +16,6 @@ export interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {
     showLoading?: boolean;
     isActive?: boolean;
 }
-export declare const Button: ({ showLoading, children, loadingColor, ...props }: ButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const filterButtonProps: (props: ButtonProps) => Object;
 //# sourceMappingURL=Button.d.ts.map

package/lib/Form/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Form/Button.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAC,SAAS,EAAkB,MAAM,SAAS,CAAC;AAGnD,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,UAAU,eAAe;IACzB,IAAI,SAAS;IACb,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,iBAAiB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACtE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,sDAAmE,WAAW,qDAIhG,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,WAAW,WAEnD,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Form/Button.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAAC,SAAS,EAAkB,MAAM,SAAS,CAAC;AAGnD,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,UAAU,eAAe;IACzB,IAAI,SAAS;IACb,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,iBAAiB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACtE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,2IAMlB,CAAC;AAIF,eAAO,MAAM,iBAAiB,UAAW,WAAW,WAEnD,CAAC"}

package/lib/Form/Button.js

@@ -20,6 +20,7 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
  * along with this program. If not, see http://www.gnu.org/licenses/.
  *
  */
+const react_1 = require("react");
 const Button_styles_1 = require("./Button.styles");
 const Identity_1 = require("../Identity");
 const Misc_1 = require("../Misc");
@@ -34,8 +35,8 @@ var ButtonVariant;
     ButtonVariant["SEND"] = "send";
     ButtonVariant["CANCEL"] = "cancel";
 })(ButtonVariant || (exports.ButtonVariant = ButtonVariant = {}));
-const Button = ({ showLoading, children, loadingColor = Identity_1.COLOR.WHITE, ...props }) => ((0, jsx_runtime_1.jsx)("button", { css: (theme) => (0, Button_styles_1.buttonStyle)(theme, props), ...(0, exports.filterButtonProps)(props), children: showLoading ? (0, jsx_runtime_1.jsx)(Misc_1.Loading, { size: 30, color: loadingColor, style: { display: 'flex', margin: 'auto' } }) : children }));
-exports.Button = Button;
+exports.Button = (0, react_1.forwardRef)(({ showLoading, children, loadingColor = Identity_1.COLOR.WHITE, ...props }, ref) => ((0, jsx_runtime_1.jsx)("button", { ref: ref, css: (theme) => (0, Button_styles_1.buttonStyle)(theme, props), ...(0, exports.filterButtonProps)(props), children: showLoading ? (0, jsx_runtime_1.jsx)(Misc_1.Loading, { size: 30, color: loadingColor, style: { display: 'flex', margin: 'auto' } }) : children })));
+exports.Button.displayName = 'Button';
 const filterButtonProps = (props) => {
     return (0, util_1.filterProps)((0, Text_1.filterTextProps)(props), ['backgroundColor', 'noCapital']);
 };

package/lib/Form/Button.stories.d.ts

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react';
 import { ButtonVariant } from './Button';
 declare const meta: {
     title: string;
-    component: ({ showLoading, children, loadingColor, ...props }: import("./Button").ButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./Button").ButtonProps<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     parameters: {
         layout: string;
     };

package/lib/Misc/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.d.ts

@@ -0,0 +1,9 @@
+import { MouseEvent as ReactMouseEvent } from 'react';
+interface BreadcrumbItemProps {
+    name: string;
+    isActive: boolean;
+    onClick: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+export declare const BreadcrumbItem: ({ name, isActive, onClick }: BreadcrumbItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=BreadcrumbItem.d.ts.map

package/lib/Misc/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../../../src/Misc/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,UAAU,IAAI,eAAe,EAAC,MAAM,OAAO,CAAC;AAIpD,UAAU,mBAAmB;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CAC1E;AAED,eAAO,MAAM,cAAc,gCAA+B,mBAAmB,qDAY5E,CAAC"}

package/lib/Misc/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BreadcrumbItem = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const BreadcrumbItem_styles_1 = require("./BreadcrumbItem.styles");
+const BreadcrumbItem = ({ name, isActive, onClick }) => {
+    return ((0, jsx_runtime_1.jsx)("li", { css: BreadcrumbItem_styles_1.listItemStyles, children: isActive ? ((0, jsx_runtime_1.jsx)("span", { css: BreadcrumbItem_styles_1.activeItemStyles, children: name })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", css: BreadcrumbItem_styles_1.buttonStyles, onClick: onClick, children: name })) }));
+};
+exports.BreadcrumbItem = BreadcrumbItem;

package/lib/Misc/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.styles.d.ts

@@ -0,0 +1,5 @@
+import { CSSObject } from '@emotion/react';
+export declare const listItemStyles: CSSObject;
+export declare const buttonStyles: CSSObject;
+export declare const activeItemStyles: CSSObject;
+//# sourceMappingURL=BreadcrumbItem.styles.d.ts.map

package/lib/Misc/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbItem.styles.d.ts","sourceRoot":"","sources":["../../../../src/Misc/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,eAAO,MAAM,cAAc,EAAE,SAI5B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,SAW1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,SAK9B,CAAC"}

package/lib/Misc/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.styles.js

@@ -0,0 +1,44 @@
+"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.activeItemStyles = exports.buttonStyles = exports.listItemStyles = void 0;
+const colors_v2_1 = require("../../../Identity/colors-v2");
+exports.listItemStyles = {
+    display: 'flex',
+    alignItems: 'center',
+    flexShrink: 0,
+};
+exports.buttonStyles = {
+    background: 'none',
+    border: 'none',
+    padding: '0 8px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    color: colors_v2_1.COLOR_V2.GRAY_70,
+    '&:hover': {
+        color: 'var(--main-color)',
+    },
+};
+exports.activeItemStyles = {
+    display: 'inline-block',
+    padding: '0 8px',
+    fontSize: '14px',
+    color: 'var(--main-color)',
+};

package/lib/Misc/Breadcrumbs/BreadcrumbLeaf/BreadcrumbLeaf.d.ts

@@ -0,0 +1,2 @@
+export declare const BreadcrumbLeaf: () => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BreadcrumbLeaf.d.ts.map

package/lib/Misc/Breadcrumbs/BreadcrumbLeaf/BreadcrumbLeaf.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbLeaf.d.ts","sourceRoot":"","sources":["../../../../src/Misc/Breadcrumbs/BreadcrumbLeaf/BreadcrumbLeaf.tsx"],"names":[],"mappings":"AAuBA,eAAO,MAAM,cAAc,wDAM1B,CAAC"}

package/lib/Misc/Breadcrumbs/BreadcrumbLeaf/BreadcrumbLeaf.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BreadcrumbLeaf = 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 BreadcrumbLeaf_styles_1 = require("./BreadcrumbLeaf.styles");
+const Icon_1 = require("../../../Icon");
+const BreadcrumbLeaf = () => {
+    return ((0, jsx_runtime_1.jsx)("li", { "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(Icon_1.ChevronUpIcon, { css: BreadcrumbLeaf_styles_1.iconStyles, width: 12, height: 12 }) }));
+};
+exports.BreadcrumbLeaf = BreadcrumbLeaf;

package/lib/Misc/Breadcrumbs/BreadcrumbLeaf/BreadcrumbLeaf.styles.d.ts

@@ -0,0 +1,3 @@
+import { CSSObject } from '@emotion/react';
+export declare const iconStyles: CSSObject;
+//# sourceMappingURL=BreadcrumbLeaf.styles.d.ts.map

package/lib/Misc/Breadcrumbs/BreadcrumbLeaf/BreadcrumbLeaf.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbLeaf.styles.d.ts","sourceRoot":"","sources":["../../../../src/Misc/Breadcrumbs/BreadcrumbLeaf/BreadcrumbLeaf.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,eAAO,MAAM,UAAU,EAAE,SAExB,CAAC"}

package/lib/Misc/Breadcrumbs/BreadcrumbLeaf/BreadcrumbLeaf.styles.js

@@ -0,0 +1,24 @@
+"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.iconStyles = void 0;
+exports.iconStyles = {
+    transform: 'rotate(90deg)',
+};

package/lib/Misc/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,26 @@
+interface BreadcrumbsProps {
+    /**
+     * Maximum number of items to display before combining middle items into a dropdown.
+     * @default 4
+     */
+    maxNotCombinedItems?: number;
+    items: Array<{
+        name: string;
+    }>;
+    onItemClick: (item: {
+        name: string;
+    }) => void;
+}
+/**
+ * A navigation component that displays a hierarchical path of items, allowing users to navigate through different levels.
+ * When the number of items exceeds the maximum visible limit, it combines middle items into a dropdown menu
+ * while keeping the first and last two items visible.
+ *
+ * Example:
+ * ```tsx
+ * <Breadcrumbs items={[{name: 'Home'}, {name: 'Folder'}, {name: 'Subfolder'}]} onItemClick={() => {}} />
+ * ```
+ */
+export declare const Breadcrumbs: ({ maxNotCombinedItems, items, onItemClick, }: BreadcrumbsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Breadcrumbs.d.ts.map

package/lib/Misc/Breadcrumbs/Breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/Misc/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AA0BA,UAAU,gBAAgB;IACxB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,KAAK,EAAE,KAAK,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAC,CAAC,CAAC;IAE7B,WAAW,EAAE,CAAC,IAAI,EAAE;QAAC,IAAI,EAAE,MAAM,CAAA;KAAC,KAAK,IAAI,CAAC;CAC7C;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,iDAIrB,gBAAgB,qDA6ClB,CAAC"}

package/lib/Misc/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Breadcrumbs = 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 BreadcrumbItem_1 = require("./BreadcrumbItem/BreadcrumbItem");
+const BreadcrumbLeaf_1 = require("./BreadcrumbLeaf/BreadcrumbLeaf");
+const Breadcrumbs_styles_1 = require("./Breadcrumbs.styles");
+const CombainedBreadcrumbs_1 = require("./CombainedBreadcrumbs/CombainedBreadcrumbs");
+const DEFAULT_MAX_VISIBLE_BREADCRUMBS = 4;
+/**
+ * A navigation component that displays a hierarchical path of items, allowing users to navigate through different levels.
+ * When the number of items exceeds the maximum visible limit, it combines middle items into a dropdown menu
+ * while keeping the first and last two items visible.
+ *
+ * Example:
+ * ```tsx
+ * <Breadcrumbs items={[{name: 'Home'}, {name: 'Folder'}, {name: 'Subfolder'}]} onItemClick={() => {}} />
+ * ```
+ */
+const Breadcrumbs = ({ maxNotCombinedItems = DEFAULT_MAX_VISIBLE_BREADCRUMBS, items, onItemClick, }) => {
+    if (items.length <= maxNotCombinedItems) {
+        return ((0, jsx_runtime_1.jsx)("ol", { css: Breadcrumbs_styles_1.listStyles, children: items.map((crumb, index) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [index > 0 && (0, jsx_runtime_1.jsx)(BreadcrumbLeaf_1.BreadcrumbLeaf, {}), (0, jsx_runtime_1.jsx)(BreadcrumbItem_1.BreadcrumbItem, { name: crumb.name, isActive: index === items.length - 1, onClick: () => onItemClick(crumb) }, crumb.name)] }))) }));
+    }
+    const firstCrumb = items[0];
+    // eslint-disable-next-line no-magic-numbers
+    const lastTwoCrumbs = items.slice(-2);
+    // eslint-disable-next-line no-magic-numbers
+    const middleCrumbs = items.slice(1, -2);
+    return ((0, jsx_runtime_1.jsxs)("ol", { css: Breadcrumbs_styles_1.listStyles, children: [(0, jsx_runtime_1.jsx)(BreadcrumbItem_1.BreadcrumbItem, { name: firstCrumb.name, isActive: false, onClick: () => onItemClick(firstCrumb) }), (0, jsx_runtime_1.jsx)(BreadcrumbLeaf_1.BreadcrumbLeaf, {}), (0, jsx_runtime_1.jsx)(CombainedBreadcrumbs_1.CombainedBreadcrumbs, { items: middleCrumbs, onItemClick: onItemClick }), (0, jsx_runtime_1.jsx)(BreadcrumbLeaf_1.BreadcrumbLeaf, {}), lastTwoCrumbs.map((crumb, index) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [index > 0 && (0, jsx_runtime_1.jsx)(BreadcrumbLeaf_1.BreadcrumbLeaf, {}), (0, jsx_runtime_1.jsx)(BreadcrumbItem_1.BreadcrumbItem, { name: crumb.name, isActive: index === lastTwoCrumbs.length - 1, onClick: () => onItemClick(crumb) }, crumb.name)] })))] }));
+};
+exports.Breadcrumbs = Breadcrumbs;

package/lib/Misc/Breadcrumbs/Breadcrumbs.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { Breadcrumbs } from './Breadcrumbs';
+declare const meta: Meta<typeof Breadcrumbs>;
+export default meta;
+type Story = StoryObj<typeof Breadcrumbs>;
+export declare const Default: Story;
+export declare const WithCombinedItems: Story;
+//# sourceMappingURL=Breadcrumbs.stories.d.ts.map

package/lib/Misc/Breadcrumbs/Breadcrumbs.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.stories.d.ts","sourceRoot":"","sources":["../../../src/Misc/Breadcrumbs/Breadcrumbs.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,oBAAoB,CAAC;AAElD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAMlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAC"}

package/lib/Misc/Breadcrumbs/Breadcrumbs.stories.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithCombinedItems = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Breadcrumbs_1 = require("./Breadcrumbs");
+const meta = {
+    component: Breadcrumbs_1.Breadcrumbs,
+    title: 'Misc/Breadcrumbs',
+    parameters: {
+        layout: 'centered',
+    },
+};
+exports.default = meta;
+exports.Default = {
+    render: () => (0, jsx_runtime_1.jsx)(Breadcrumbs_1.Breadcrumbs, { items: [{ name: 'Home' }, { name: 'Folder' }, { name: 'Subfolder' }], onItemClick: () => { } }),
+};
+exports.WithCombinedItems = {
+    render: () => ((0, jsx_runtime_1.jsx)(Breadcrumbs_1.Breadcrumbs, { items: [{ name: 'Home' }, { name: 'Folder' }, { name: 'Subfolder 1' }, { name: 'Subfolder 2' }, { name: 'Subfolder 3' }], onItemClick: () => { } })),
+};

package/lib/Misc/Breadcrumbs/Breadcrumbs.styles.d.ts

@@ -0,0 +1,3 @@
+import { CSSObject } from '@emotion/react';
+export declare const listStyles: CSSObject;
+//# sourceMappingURL=Breadcrumbs.styles.d.ts.map

package/lib/Misc/Breadcrumbs/Breadcrumbs.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.styles.d.ts","sourceRoot":"","sources":["../../../src/Misc/Breadcrumbs/Breadcrumbs.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,eAAO,MAAM,UAAU,EAAE,SAQxB,CAAC"}

package/lib/Misc/Breadcrumbs/Breadcrumbs.styles.js

@@ -0,0 +1,30 @@
+"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.listStyles = void 0;
+exports.listStyles = {
+    display: 'flex',
+    padding: '0',
+    margin: '0',
+    alignItems: 'center',
+    listStyle: 'none',
+    flexGrow: 1,
+    overflowX: 'auto',
+};

package/lib/Misc/Breadcrumbs/CombainedBreadcrumbs/CombainedBreadcrumbs.d.ts

@@ -0,0 +1,11 @@
+interface CombainedBreadcrumbsProps {
+    items: Array<{
+        name: string;
+    }>;
+    onItemClick: (item: {
+        name: string;
+    }) => void;
+}
+export declare const CombainedBreadcrumbs: ({ items, onItemClick }: CombainedBreadcrumbsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CombainedBreadcrumbs.d.ts.map

package/lib/Misc/Breadcrumbs/CombainedBreadcrumbs/CombainedBreadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CombainedBreadcrumbs.d.ts","sourceRoot":"","sources":["../../../../src/Misc/Breadcrumbs/CombainedBreadcrumbs/CombainedBreadcrumbs.tsx"],"names":[],"mappings":"AAuBA,UAAU,yBAAyB;IACjC,KAAK,EAAE,KAAK,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAC,CAAC,CAAC;IAC7B,WAAW,EAAE,CAAC,IAAI,EAAE;QAAC,IAAI,EAAE,MAAM,CAAA;KAAC,KAAK,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,oBAAoB,2BAA0B,yBAAyB,qDAmBnF,CAAC"}

package/lib/Misc/Breadcrumbs/CombainedBreadcrumbs/CombainedBreadcrumbs.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CombainedBreadcrumbs = 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 CombainedBreadcrumbs_styles_1 = require("./CombainedBreadcrumbs.styles");
+const DropdownMenu_1 = require("../../../Modal/DropdownMenu");
+const CombainedBreadcrumbs = ({ items, onItemClick }) => {
+    return ((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)("li", { children: (0, jsx_runtime_1.jsx)("button", { type: "button", css: CombainedBreadcrumbs_styles_1.buttonStyles, children: "..." }) }) }), (0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Content, { children: items.map(crumb => ((0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => onItemClick(crumb), children: crumb.name }, crumb.name))) })] }));
+};
+exports.CombainedBreadcrumbs = CombainedBreadcrumbs;

package/lib/Misc/Breadcrumbs/CombainedBreadcrumbs/CombainedBreadcrumbs.styles.d.ts

@@ -0,0 +1,3 @@
+import { CSSObject } from '@emotion/react';
+export declare const buttonStyles: CSSObject;
+//# sourceMappingURL=CombainedBreadcrumbs.styles.d.ts.map

package/lib/Misc/Breadcrumbs/CombainedBreadcrumbs/CombainedBreadcrumbs.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CombainedBreadcrumbs.styles.d.ts","sourceRoot":"","sources":["../../../../src/Misc/Breadcrumbs/CombainedBreadcrumbs/CombainedBreadcrumbs.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,eAAO,MAAM,YAAY,EAAE,SAW1B,CAAC"}

package/lib/Misc/Breadcrumbs/CombainedBreadcrumbs/CombainedBreadcrumbs.styles.js

@@ -0,0 +1,33 @@
+"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.buttonStyles = void 0;
+const colors_v2_1 = require("../../../Identity/colors-v2");
+exports.buttonStyles = {
+    background: 'none',
+    border: 'none',
+    padding: '0 8px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    color: colors_v2_1.COLOR_V2.GRAY_70,
+    '&:hover': {
+        color: 'var(--main-color)',
+    },
+};

package/lib/Misc/Breadcrumbs/index.d.ts

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

package/lib/Misc/Breadcrumbs/index.d.ts.map

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

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

package/lib/Misc/ButtonGroup.d.ts

@@ -8,7 +8,7 @@ interface ButtonGroupProps {
 }
 declare const ButtonGroup: {
     ({ children }: ButtonGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
-    Button: ({ children, icon, ...props }: GroupButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Button: import("react").ForwardRefExoticComponent<GroupButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 };
 export { ButtonGroup };
 //# sourceMappingURL=ButtonGroup.d.ts.map

package/lib/Misc/ButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/Misc/ButtonGroup.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AA0DhC,UAAU,gBAAgB;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB;AACD,QAAA,MAAM,WAAW;mBAAgB,gBAAgB;2CAML,gBAAgB;CAF3D,CAAC;AAyBF,OAAO,EAAC,WAAW,EAAC,CAAC"}
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/Misc/ButtonGroup.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAa,SAAS,EAAC,MAAM,OAAO,CAAC;AA0D5C,UAAU,gBAAgB;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB;AACD,QAAA,MAAM,WAAW;mBAAgB,gBAAgB;;CAIhD,CAAC;AA2BF,OAAO,EAAC,WAAW,EAAC,CAAC"}

package/lib/Misc/ButtonGroup.js

@@ -2,6 +2,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonGroup = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+const react_1 = require("react");
 const Identity_1 = require("../Identity");
 const buttonGroupStyle = () => ({
     display: 'flex',
@@ -52,13 +71,14 @@ const buttonStyle = (_, { disabled = false }) => ({
 });
 const ButtonGroup = ({ children }) => ((0, jsx_runtime_1.jsx)("div", { css: (theme) => buttonGroupStyle(theme), role: "group", "aria-label": "Button Group", children: children }));
 exports.ButtonGroup = ButtonGroup;
-const Button = ({ children, icon, ...props }) => {
-    return ((0, jsx_runtime_1.jsxs)("button", { css: (theme) => buttonStyle(theme, props), ...props, children: [icon, children && ((0, jsx_runtime_1.jsx)("span", { css: (theme) => ({
+const Button = (0, react_1.forwardRef)(({ children, icon, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)("button", { ref: ref, css: (theme) => buttonStyle(theme, props), ...props, children: [icon, children && ((0, jsx_runtime_1.jsx)("span", { css: (theme) => ({
                     marginLeft: !!icon && '6px',
                     fontSize: theme.fontSizes.small,
                     fontWeight: 'bold',
                     lineHeight: '0.875rem',
                     letterSpacing: '0.25px',
                 }), children: children }))] }));
-};
+});
+Button.displayName = 'Button';
 ButtonGroup.Button = Button;

package/lib/Misc/IconButton.d.ts

@@ -11,5 +11,5 @@ export interface IconButtonProps<T = HTMLButtonElement> extends TextProps<T> {
     backgroundColor?: string;
 }
 export declare const iconButtonStyle: <T>(theme: Theme, props: IconButtonProps<T>) => CSSObject;
-export declare const IconButton: ({ children, ...props }: IconButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<IconButtonProps<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=IconButton.d.ts.map

package/lib/Misc/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/Misc/IconButton.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAGzC,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAC;AAChC,OAAO,EAAC,SAAS,EAAkB,MAAM,SAAS,CAAC;AAGnD,oBAAY,iBAAiB;IAC3B,OAAO,YAAY;IACnB,SAAS,cAAc;CACxB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,iBAAiB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IAC1E,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,eAAe,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,SAoF5E,CAAC;AAEH,eAAO,MAAM,UAAU,2BAA0B,eAAe,qDAI/D,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/Misc/IconButton.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAGzC,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAC;AAChC,OAAO,EAAC,SAAS,EAAkB,MAAM,SAAS,CAAC;AAGnD,oBAAY,iBAAiB;IAC3B,OAAO,YAAY;IACnB,SAAS,cAAc;CACxB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,iBAAiB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IAC1E,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,eAAe,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,SAoF5E,CAAC;AAEH,eAAO,MAAM,UAAU,+IAIrB,CAAC"}

package/lib/Misc/IconButton.js

@@ -2,6 +2,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconButton = exports.iconButtonStyle = exports.IconButtonVariant = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+const react_1 = require("react");
 const motions_1 = require("../Identity/motions");
 const Text_1 = require("../Text");
 const util_1 = require("../util");
@@ -91,8 +110,8 @@ const iconButtonStyle = (theme, { variant = IconButtonVariant.PRIMARY, group = f
     }),
 });
 exports.iconButtonStyle = iconButtonStyle;
-const IconButton = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)("button", { css: (theme) => (0, exports.iconButtonStyle)(theme, props), ...filterButtonProps(props), children: children }));
-exports.IconButton = IconButton;
+exports.IconButton = (0, react_1.forwardRef)(({ children, ...props }, ref) => ((0, jsx_runtime_1.jsx)("button", { ref: ref, css: (theme) => (0, exports.iconButtonStyle)(theme, props), ...filterButtonProps(props), children: children })));
+exports.IconButton.displayName = 'IconButton';
 const filterButtonProps = (props) => {
     return (0, util_1.filterProps)((0, Text_1.filterTextProps)(props), ['backgroundColor']);
 };

package/lib/Misc/index.d.ts

@@ -7,4 +7,5 @@ export * from './Pagination';
 export * from './Pill';
 export * from './useLongTouch';
 export * from './useTimeout';
+export * from './Breadcrumbs';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Misc/index.ts"],"names":[],"mappings":"AAmBA,cAAc,eAAe,CAAC;AAC9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Misc/index.ts"],"names":[],"mappings":"AAmBA,cAAc,eAAe,CAAC;AAC9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}

package/lib/Misc/index.js

@@ -41,3 +41,4 @@ __exportStar(require("./Pagination"), exports);
 __exportStar(require("./Pill"), exports);
 __exportStar(require("./useLongTouch"), exports);
 __exportStar(require("./useTimeout"), exports);
+__exportStar(require("./Breadcrumbs"), exports);

package/lib/Modal/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import { CSSObject } from '@emotion/react';
+/**
+ * A dropdown menu component that provides a customizable and accessible dropdown interface.
+ * Built on top of accessible primitives, it offers a flexible way to display
+ * contextual actions and navigation options.
+ *
+ * Disclaimer: Custom trigger components (with asChild) must accept id, aria-haspopup, aria-expanded, and data-state props.
+ *
+ * Example:
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenu.Trigger>Open Menu</DropdownMenu.Trigger>
+ *   <DropdownMenu.Content>
+ *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>
+ *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu>
+ * ```
+ *
+ * With custom trigger:
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenu.Trigger asChild>
+ *     <Button>Open Menu</Button>
+ *   </DropdownMenu.Trigger>
+ *   <DropdownMenu.Content>
+ *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>
+ *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu>
+ * ```
+ *
+ */
+export declare const DropdownMenu: {
+    ({ children }: {
+        children: ReactNode;
+    }): import("@emotion/react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, asChild, cssObj, }: {
+        children: ReactNode;
+        asChild?: boolean;
+        cssObj?: CSSObject;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Content: ({ children }: {
+        children: ReactNode;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Item: ({ children, onClick }: {
+        children: ReactNode;
+        onClick: () => void;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+//# sourceMappingURL=DropdownMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/Modal/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/Modal/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,77 @@
+"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.DropdownMenu = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const DropdownMenuPrimitive = __importStar(require("@radix-ui/react-dropdown-menu"));
+const DropdownMenu_styles_1 = require("./DropdownMenu.styles");
+/**
+ * A dropdown menu component that provides a customizable and accessible dropdown interface.
+ * Built on top of accessible primitives, it offers a flexible way to display
+ * contextual actions and navigation options.
+ *
+ * Disclaimer: Custom trigger components (with asChild) must accept id, aria-haspopup, aria-expanded, and data-state props.
+ *
+ * Example:
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenu.Trigger>Open Menu</DropdownMenu.Trigger>
+ *   <DropdownMenu.Content>
+ *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>
+ *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu>
+ * ```
+ *
+ * With custom trigger:
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenu.Trigger asChild>
+ *     <Button>Open Menu</Button>
+ *   </DropdownMenu.Trigger>
+ *   <DropdownMenu.Content>
+ *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>
+ *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu>
+ * ```
+ *
+ */
+const DropdownMenu = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Root, { children: children });
+};
+exports.DropdownMenu = DropdownMenu;
+const DropdownMenuTrigger = ({ children, asChild = false, cssObj, }) => {
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Trigger, { asChild: asChild, css: !asChild && { ...DropdownMenu_styles_1.triggerStyles, ...cssObj }, children: children }));
+};
+exports.DropdownMenu.Trigger = DropdownMenuTrigger;
+const DropdownMenuContent = ({ children }) => {
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Content, { css: DropdownMenu_styles_1.contentStyle, sideOffset: 6, children: children }) }));
+};
+exports.DropdownMenu.Content = DropdownMenuContent;
+const DropdownMenuItem = ({ children, onClick }) => {
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Item, { css: DropdownMenu_styles_1.itemStyle, onClick: onClick, children: (0, jsx_runtime_1.jsx)("span", { css: DropdownMenu_styles_1.textStyles, children: children }) }));
+};
+exports.DropdownMenu.Item = DropdownMenuItem;

package/lib/Modal/DropdownMenu/DropdownMenu.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { DropdownMenu } from './DropdownMenu';
+declare const meta: Meta<typeof DropdownMenu>;
+export default meta;
+type Story = StoryObj<typeof DropdownMenu>;
+export declare const Default: Story;
+export declare const WithLongItems: Story;
+export declare const WithCustomButton: Story;
+export declare const WithCustomIconButton: Story;
+//# sourceMappingURL=DropdownMenu.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.stories.d.ts","sourceRoot":"","sources":["../../../src/Modal/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/Modal/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 Form_1 = require("../../Form");
+const Icon_1 = require("../../Icon");
+const Misc_1 = require("../../Misc");
+const meta = {
+    component: DropdownMenu_1.DropdownMenu,
+    title: 'Modal/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)(Form_1.Button, { variant: Form_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)(Misc_1.IconButton, { variant: Misc_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/Modal/DropdownMenu/DropdownMenu.styles.d.ts

@@ -0,0 +1,6 @@
+import { CSSObject } from '@emotion/react';
+export declare const contentStyle: CSSObject;
+export declare const itemStyle: CSSObject;
+export declare const textStyles: CSSObject;
+export declare const triggerStyles: CSSObject;
+//# sourceMappingURL=DropdownMenu.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.styles.d.ts","sourceRoot":"","sources":["../../../src/Modal/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/Modal/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("../../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/Modal/DropdownMenu/index.d.ts

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

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

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

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

package/lib/Modal/index.d.ts

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

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

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

package/lib/Modal/index.js

@@ -36,3 +36,4 @@ 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; } });
+__exportStar(require("./DropdownMenu"), exports);

package/lib/Text/Label.stories.d.ts

@@ -42,6 +42,7 @@ declare const meta: {
         title?: string | undefined;
         pattern?: string | undefined;
         value?: string | readonly string[] | number | undefined;
+        hidden?: boolean | undefined;
         accept?: string | undefined;
         acceptCharset?: string | undefined;
         action?: string | undefined | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS];
@@ -144,7 +145,6 @@ declare const meta: {
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
-        hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;

package/lib/Theme/GlobalCssVariables.d.ts

@@ -3,5 +3,6 @@ export declare const GlobalCssVariables: {
     light: () => CSSObject;
     dark: () => CSSObject;
     accentColors: () => CSSObject;
+    zIndexes: () => CSSObject;
 };
 //# sourceMappingURL=GlobalCssVariables.d.ts.map

package/lib/Theme/GlobalCssVariables.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalCssVariables.d.ts","sourceRoot":"","sources":["../../src/Theme/GlobalCssVariables.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AA0OzC,eAAO,MAAM,kBAAkB;iBAtOZ,SAAS;gBA0GV,SAAS;wBA0GD,SAAS;CAsBlC,CAAC"}
+{"version":3,"file":"GlobalCssVariables.d.ts","sourceRoot":"","sources":["../../src/Theme/GlobalCssVariables.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAqQzC,eAAO,MAAM,kBAAkB;iBAjQZ,SAAS;gBA8GV,SAAS;wBA8GD,SAAS;oBAkBb,SAAS;CAwB9B,CAAC"}

package/lib/Theme/GlobalCssVariables.js

@@ -61,6 +61,9 @@ const light = () => ({
     '--success-color': Identity_1.COLOR_V2.GREEN_LIGHT_500,
     '--app-bg': Identity_1.COLOR_V2.GRAY_10,
     '--main-color': Identity_1.COLOR.BLACK,
+    '--modal-bg': '#f8f8f8',
+    // Foreground
+    '--foreground-fade-16': '#676b7129',
     // Archive File Icon
     '--archive-file-icon-bg': Identity_1.COLOR_V2.AMBER_LIGHT_50,
     '--archive-file-icon-stroke': Identity_1.COLOR_V2.AMBER_LIGHT_700,
@@ -145,6 +148,9 @@ const dark = () => ({
     '--success-color': Identity_1.COLOR_V2.GREEN_DARK_500,
     '--app-bg': Identity_1.COLOR_V2.GRAY_95,
     '--main-color': Identity_1.COLOR.WHITE,
+    '--modal-bg': '#26272c',
+    // Foreground
+    '--foreground-fade-16': '#9fa1a729',
     // Archive File Icon
     '--archive-file-icon-bg': Identity_1.COLOR_V2.AMBER_DARK_50,
     '--archive-file-icon-stroke': Identity_1.COLOR_V2.AMBER_DARK_700,
@@ -205,8 +211,27 @@ const accentColors = () => ({
     '--icon-secondary-active-border': 'transparent',
     '--indicator-range-input-thumb': Identity_1.COLOR_V2.BLUE_LIGHT_700,
 });
+const zIndexes = () => ({
+    '--z-index-level-0': 0,
+    '--z-index-level-1': 10,
+    '--z-index-level-2': 100,
+    '--z-index-level-3': 1000,
+    '--z-index-level-4': 10000,
+    '--z-index-level-5': 100000,
+    '--z-index-level-6': 1000000,
+    '--z-index-level-7': 10000000,
+    '--z-index-badge': 'var(--z-index-level-2)',
+    '--z-index-panel': 'var(--z-index-level-3)',
+    '--z-index-bubble': 'var(--z-index-level-3)',
+    '--z-index-video': 'var(--z-index-level-4)',
+    '--z-index-choosescreen': 'var(--z-index-level-5)',
+    '--z-index-context': 'var(--z-index-level-5)',
+    '--z-index-warnings': 'var(--z-index-level-6)',
+    '--z-index-modal': 'var(--z-index-level-7)',
+});
 exports.GlobalCssVariables = {
     light,
     dark,
     accentColors,
+    zIndexes,
 };

package/lib/util.d.ts

@@ -3,4 +3,5 @@ export declare const noop: () => void;
 export declare const inlineSVG: (svg: string) => string;
 export declare const filterProps: <T extends Record<string, any>>(props: T, propsToFilter: (keyof T)[]) => Object;
 export declare const manySelectors: (selectors: string[], css: CSSObject) => {};
+export declare const ellipsis: () => CSSObject;
 //# sourceMappingURL=util.d.ts.map

package/lib/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,eAAO,MAAM,IAAI,YAAW,CAAC;AAE7B,eAAO,MAAM,SAAS,QAAS,MAAM,WAAyD,CAAC;AAE/F,eAAO,MAAM,WAAW,EAAE,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,aAAa,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,MAQlG,CAAC;AAEF,eAAO,MAAM,aAAa,cAAe,MAAM,EAAE,OAAO,SAAS,OAIzD,CAAC"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,eAAO,MAAM,IAAI,YAAW,CAAC;AAE7B,eAAO,MAAM,SAAS,QAAS,MAAM,WAAyD,CAAC;AAE/F,eAAO,MAAM,WAAW,EAAE,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,aAAa,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,MAQlG,CAAC;AAEF,eAAO,MAAM,aAAa,cAAe,MAAM,EAAE,OAAO,SAAS,OAIzD,CAAC;AAET,eAAO,MAAM,QAAQ,QAAO,SAI1B,CAAC"}

package/lib/util.js

@@ -18,7 +18,7 @@
  *
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.manySelectors = exports.filterProps = exports.inlineSVG = exports.noop = void 0;
+exports.ellipsis = exports.manySelectors = exports.filterProps = exports.inlineSVG = exports.noop = void 0;
 const noop = () => { };
 exports.noop = noop;
 const inlineSVG = (svg) => `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
@@ -32,3 +32,9 @@ const manySelectors = (selectors, css) => selectors.reduce((acc, selector) => {
     return acc;
 }, {});
 exports.manySelectors = manySelectors;
+const ellipsis = () => ({
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+});
+exports.ellipsis = ellipsis;

package/package.json

@@ -8,6 +8,7 @@
   "main": "lib/index",
   "homepage": "https://wire-react-ui-kit.netlify.app/",
   "dependencies": {
+    "@radix-ui/react-dropdown-menu": "2.1.14",
     "@types/color": "3.0.6",
     "color": "4.2.3",
     "emotion-normalize": "11.0.1",
@@ -77,6 +78,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.51.0",
-  "gitHead": "9111d035d2a9eb5c27305a3cf6c172c98fdbff90"
+  "version": "9.52.1",
+  "gitHead": "567107c5f43d16864e6548c3b61d6a112f238f3d"
 }