@wireapp/react-ui-kit 9.52.0 → 9.53.0

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

@@ -1,9 +1,10 @@
-import { MouseEvent as ReactMouseEvent } from 'react';
+import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 interface BreadcrumbItemProps {
     name: string;
+    icon?: ReactNode;
     isActive: boolean;
     onClick: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
-export declare const BreadcrumbItem: ({ name, isActive, onClick }: BreadcrumbItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BreadcrumbItem: ({ name, icon, 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

@@ -1 +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"}
+{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../../../src/Misc/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,UAAU,IAAI,eAAe,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAI/D,UAAU,mBAAmB;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CAC1E;AAED,eAAO,MAAM,cAAc,sCAAqC,mBAAmB,qDAgBlF,CAAC"}

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

@@ -3,7 +3,7 @@ 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 })) }));
+const BreadcrumbItem = ({ name, icon, isActive, onClick }) => {
+    return ((0, jsx_runtime_1.jsx)("li", { css: BreadcrumbItem_styles_1.listItemStyles, children: isActive ? ((0, jsx_runtime_1.jsxs)("span", { css: BreadcrumbItem_styles_1.activeItemStyles, children: [icon, name] })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", css: BreadcrumbItem_styles_1.buttonStyles, onClick: onClick, children: [icon, name] })) }));
 };
 exports.BreadcrumbItem = BreadcrumbItem;

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

@@ -1 +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"}
+{"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,SAc1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,SAO9B,CAAC"}

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

@@ -32,12 +32,17 @@ exports.buttonStyles = {
     cursor: 'pointer',
     fontSize: '14px',
     color: colors_v2_1.COLOR_V2.GRAY_70,
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
     '&:hover': {
         color: 'var(--main-color)',
     },
 };
 exports.activeItemStyles = {
-    display: 'inline-block',
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '8px',
     padding: '0 8px',
     fontSize: '14px',
     color: 'var(--main-color)',

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 interface BreadcrumbsProps {
     /**
      * Maximum number of items to display before combining middle items into a dropdown.
@@ -6,6 +7,7 @@ interface BreadcrumbsProps {
     maxNotCombinedItems?: number;
     items: Array<{
         name: string;
+        icon?: ReactNode;
     }>;
     onItemClick: (item: {
         name: string;

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

@@ -1 +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"}
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/Misc/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAShC,UAAU,gBAAgB;IACxB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,KAAK,EAAE,KAAK,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,SAAS,CAAA;KAAC,CAAC,CAAC;IAE/C,WAAW,EAAE,CAAC,IAAI,EAAE;QAAC,IAAI,EAAE,MAAM,CAAA;KAAC,KAAK,IAAI,CAAC;CAC7C;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,iDAIrB,gBAAgB,qDAoDlB,CAAC"}

package/lib/Misc/Breadcrumbs/Breadcrumbs.js

@@ -2,24 +2,6 @@
 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");
@@ -37,13 +19,13 @@ const DEFAULT_MAX_VISIBLE_BREADCRUMBS = 4;
  */
 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)] }))) }));
+        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, icon: crumb.icon, 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)] })))] }));
+    return ((0, jsx_runtime_1.jsxs)("ol", { css: Breadcrumbs_styles_1.listStyles, children: [(0, jsx_runtime_1.jsx)(BreadcrumbItem_1.BreadcrumbItem, { name: firstCrumb.name, icon: firstCrumb.icon, 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, icon: crumb.icon, isActive: index === lastTwoCrumbs.length - 1, onClick: () => onItemClick(crumb) }, crumb.name)] })))] }));
 };
 exports.Breadcrumbs = Breadcrumbs;

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

@@ -5,4 +5,6 @@ export default meta;
 type Story = StoryObj<typeof Breadcrumbs>;
 export declare const Default: Story;
 export declare const WithCombinedItems: Story;
+export declare const WithIcons: Story;
+export declare const WithIconsAndCombinedItems: Story;
 //# sourceMappingURL=Breadcrumbs.stories.d.ts.map

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

@@ -1 +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"}
+{"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;AAI1C,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;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAavC,CAAC"}

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

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithCombinedItems = exports.Default = void 0;
+exports.WithIconsAndCombinedItems = exports.WithIcons = exports.WithCombinedItems = exports.Default = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Breadcrumbs_1 = require("./Breadcrumbs");
+const Icon_1 = require("../../Icon");
 const meta = {
     component: Breadcrumbs_1.Breadcrumbs,
     title: 'Misc/Breadcrumbs',
@@ -17,3 +18,15 @@ exports.Default = {
 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: () => { } })),
 };
+exports.WithIcons = {
+    render: () => ((0, jsx_runtime_1.jsx)(Breadcrumbs_1.Breadcrumbs, { items: [{ name: 'Home' }, { name: 'Folder', icon: (0, jsx_runtime_1.jsx)(Icon_1.TrashIcon, {}) }, { name: 'Subfolder' }], onItemClick: () => { } })),
+};
+exports.WithIconsAndCombinedItems = {
+    render: () => ((0, jsx_runtime_1.jsx)(Breadcrumbs_1.Breadcrumbs, { items: [
+            { name: 'Home' },
+            { name: 'Folder', icon: (0, jsx_runtime_1.jsx)(Icon_1.TrashIcon, {}) },
+            { name: 'Subfolder 1' },
+            { name: 'Subfolder 2' },
+            { name: 'Subfolder 3' },
+        ], onItemClick: () => { } })),
+};

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

@@ -1,6 +1,8 @@
+import { ReactNode } from 'react';
 interface CombainedBreadcrumbsProps {
     items: Array<{
         name: string;
+        icon?: ReactNode;
     }>;
     onItemClick: (item: {
         name: string;

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

@@ -1 +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"}
+{"version":3,"file":"CombainedBreadcrumbs.d.ts","sourceRoot":"","sources":["../../../../src/Misc/Breadcrumbs/CombainedBreadcrumbs/CombainedBreadcrumbs.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAMhC,UAAU,yBAAyB;IACjC,KAAK,EAAE,KAAK,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,SAAS,CAAA;KAAC,CAAC,CAAC;IAC/C,WAAW,EAAE,CAAC,IAAI,EAAE;QAAC,IAAI,EAAE,MAAM,CAAA;KAAC,KAAK,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,oBAAoB,2BAA0B,yBAAyB,qDAsBnF,CAAC"}

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

@@ -2,27 +2,9 @@
 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))) })] }));
+    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: (0, jsx_runtime_1.jsxs)("div", { css: CombainedBreadcrumbs_styles_1.itemStyles, children: [crumb.icon, crumb.name] }) }, crumb.name))) })] }));
 };
 exports.CombainedBreadcrumbs = CombainedBreadcrumbs;

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

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

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

@@ -1 +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"}
+{"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;AAEF,eAAO,MAAM,UAAU,EAAE,SAIxB,CAAC"}

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

@@ -18,7 +18,7 @@
  *
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonStyles = void 0;
+exports.itemStyles = exports.buttonStyles = void 0;
 const colors_v2_1 = require("../../../Identity/colors-v2");
 exports.buttonStyles = {
     background: 'none',
@@ -31,3 +31,8 @@ exports.buttonStyles = {
         color: 'var(--main-color)',
     },
 };
+exports.itemStyles = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+};

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/Modal/DropdownMenu/DropdownMenu.js

@@ -64,7 +64,7 @@ const DropdownMenu = ({ children }) => {
 };
 exports.DropdownMenu = DropdownMenu;
 const DropdownMenuTrigger = ({ children, asChild = false, cssObj, }) => {
-    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Trigger, { asChild: asChild, css: { ...DropdownMenu_styles_1.triggerStyles, ...cssObj }, children: children }));
+    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 }) => {

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

@@ -5,5 +5,6 @@ export default meta;
 type Story = StoryObj<typeof DropdownMenu>;
 export declare const Default: Story;
 export declare const WithLongItems: Story;
-export declare const WithCustomTrigger: 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

@@ -1 +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;AAI5C,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,iBAAiB,EAAE,KAoB/B,CAAC"}
+{"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

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithCustomTrigger = exports.WithLongItems = exports.Default = void 0;
+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',
@@ -18,9 +20,9 @@ exports.Default = {
 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.WithCustomTrigger = {
-    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)("button", { css: {
-                        width: '200px',
-                        height: '40px',
-                    }, children: "show 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.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/package.json

@@ -78,6 +78,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.52.0",
-  "gitHead": "adb538b99b48a57708863e4344d19875ae0069d1"
+  "version": "9.53.0",
+  "gitHead": "2c0176605d098e616d7b0be09bf417ca4683c615"
 }