@wireapp/react-ui-kit 9.52.1 → 9.54.0

package/lib/Form/Select/SelectValueContainer/SelectValueContainer.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectValueContainer = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_select_1 = require("react-select");
+const SelectValueContainer = ({ children, ...restProps }) => ((0, jsx_runtime_1.jsxs)(react_select_1.components.ValueContainer, { ...restProps, children: [renderValue(children[0]), " ", children[1]] }));
+exports.SelectValueContainer = SelectValueContainer;
+const renderValue = (value) => {
+    if (Array.isArray(value)) {
+        const currentValue = (i) => value[i].props.children;
+        return ((0, jsx_runtime_1.jsx)("div", { css: {
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                minWidth: 0,
+                paddingRight: 14,
+                gridArea: '1/1/2/3',
+            }, children: currentValue(0) }));
+    }
+    return value;
+};

package/lib/Form/index.d.ts

@@ -11,7 +11,8 @@ export * from './InputBlock';
 export * from './InputSubmitCombo';
 export * from './RangeInput';
 export * from './RoundIconButton';
-export * from './Select';
+export * from './Select/Select';
+export * from './Select/ComboboxSelect/ComboboxSelect';
 export * from './ShakeBox';
 export * from './Switch';
 export * from './TextArea';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Form/index.ts"],"names":[],"mappings":"AAmBA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Form/index.ts"],"names":[],"mappings":"AAmBA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wCAAwC,CAAC;AACvD,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,6BAA6B,CAAC"}

package/lib/Form/index.js

@@ -45,7 +45,8 @@ __exportStar(require("./InputBlock"), exports);
 __exportStar(require("./InputSubmitCombo"), exports);
 __exportStar(require("./RangeInput"), exports);
 __exportStar(require("./RoundIconButton"), exports);
-__exportStar(require("./Select"), exports);
+__exportStar(require("./Select/Select"), exports);
+__exportStar(require("./Select/ComboboxSelect/ComboboxSelect"), exports);
 __exportStar(require("./ShakeBox"), exports);
 __exportStar(require("./Switch"), exports);
 __exportStar(require("./TextArea"), exports);

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/package.json

@@ -12,7 +12,7 @@
     "@types/color": "3.0.6",
     "color": "4.2.3",
     "emotion-normalize": "11.0.1",
-    "react-select": "5.7.7",
+    "react-select": "5.10.1",
     "react-transition-group": "4.4.5"
   },
   "devDependencies": {
@@ -78,6 +78,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.52.1",
-  "gitHead": "567107c5f43d16864e6548c3b61d6a112f238f3d"
+  "version": "9.54.0",
+  "gitHead": "9e335e7c2e065af2c8879f523c1cdb5cfdd62c0c"
 }

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

@@ -1 +0,0 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Form/Select.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAC,SAAS,EAAW,MAAM,gBAAgB,CAAC;AACnD,OAAoB,EAAC,SAAS,EAAe,MAAM,cAAc,CAAC;AAClE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,iDAAiD,CAAC;AAkBvF,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,WAAW,CAAC,OAAO,SAAS,OAAO,EAAE,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,CACnF,SAAQ,iBAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC;IACjD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,OAAO,UAAU,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,yOAmBpF,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,qDAuE7B,CAAC"}

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

@@ -1,16 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: <IsMulti extends boolean = false, Group extends import("react-select").GroupBase<import("./Select").Option> = import("react-select").GroupBase<import("./Select").Option>>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, menuCSS, selectControlCSS, selectContainerCSS, markInvalid, required, isSearchable, overlayMenu, menuListHeading, ...props }: import("./Select").SelectProps<IsMulti, Group>) => import("@emotion/react/jsx-runtime").JSX.Element;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const WithLabel: Story;
-export declare const Invalid: Story;
-export declare const Disabled: Story;
-//# sourceMappingURL=Select.stories.d.ts.map

package/lib/Form/Select.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../src/Form/Select.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAWrD,QAAA,MAAM,IAAI;;;;;;;CAOqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC"}

package/lib/Form/SelectComponents.d.ts

@@ -1,16 +0,0 @@
-import { CSSObject } from '@emotion/react';
-import { ContainerProps, DropdownIndicatorProps, OptionProps, ValueContainerProps, IndicatorsContainerProps, MenuProps, GroupBase, OptionsOrGroups, MenuListProps } from 'react-select';
-import { Option } from './Select';
-export declare const SelectContainer: (props: ContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const isGroup: (options: OptionsOrGroups<Option, GroupBase<Option>>) => options is GroupBase<Option>[];
-export declare const DropdownIndicator: (props: DropdownIndicatorProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const CustomOption: (dataUieName: string) => (props: OptionProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const Menu: (dataUieName: string, css?: CSSObject) => (props: MenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const MenuList: {
-    (menuListHeading: string, dataUieName: string): (props: MenuListProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export declare const renderValue: (value: any) => any;
-export declare const ValueContainer: ({ children, ...restProps }: ValueContainerProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const IndicatorsContainer: ({ children, ...restProps }: IndicatorsContainerProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=SelectComponents.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SelectComponents.d.ts","sourceRoot":"","sources":["../../src/Form/SelectComponents.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAEL,cAAc,EACd,sBAAsB,EACtB,WAAW,EACX,mBAAmB,EACnB,wBAAwB,EACxB,SAAS,EACT,SAAS,EACT,eAAe,EACf,aAAa,EACd,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAShC,eAAO,MAAM,eAAe,UAAW,cAAc,qDAMpD,CAAC;AAEF,eAAO,MAAM,OAAO,YAAa,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,KAAG,OAAO,IAAI,SAAS,CAAC,MAAM,CAAC,EAEzG,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,qDAS9D,CAAC;AAGF,eAAO,MAAM,YAAY,gBAAiB,MAAM,aAAa,WAAW,CAAC,MAAM,CAAC,qDAsD/E,CAAC;AAGF,eAAO,MAAM,IAAI,gBAAiB,MAAM,QAAQ,SAAS,aAAa,SAAS,qDAc9E,CAAC;AAGF,eAAO,MAAM,QAAQ;sBAAqB,MAAM,eAAe,MAAM,WAAa,aAAa;;CA0B9F,CAAC;AAGF,eAAO,MAAM,WAAW,qBAqBvB,CAAC;AAEF,eAAO,MAAM,cAAc,+BAA8B,mBAAmB,CAAC,MAAM,CAAC,qDAInF,CAAC;AAEF,eAAO,MAAM,mBAAmB,+BAA8B,wBAAwB,CAAC,MAAM,CAAC,qDAW7F,CAAC"}

package/lib/Form/SelectComponents.js

@@ -1,93 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IndicatorsContainer = exports.ValueContainer = exports.renderValue = exports.MenuList = exports.Menu = exports.CustomOption = exports.DropdownIndicator = exports.isGroup = exports.SelectContainer = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_select_1 = require("react-select");
-const SelectComponents_styles_1 = require("./SelectComponents.styles");
-const Icon_1 = require("../Icon");
-const ArrowDown_1 = require("../Icon/ArrowDown");
-const enums_1 = require("../types/enums");
-// SelectContainer
-const SelectContainer = (props) => {
-    return ((0, jsx_runtime_1.jsx)(react_select_1.components.SelectContainer, { ...props, children: (0, jsx_runtime_1.jsx)("div", { tabIndex: enums_1.TabIndex.FOCUSABLE, children: props.children }) }));
-};
-exports.SelectContainer = SelectContainer;
-const isGroup = (options) => {
-    return options?.length > 0 && 'options' in options[0];
-};
-exports.isGroup = isGroup;
-const DropdownIndicator = (props) => {
-    const { menuIsOpen } = props.selectProps;
-    return ((0, jsx_runtime_1.jsx)(react_select_1.components.DropdownIndicator, { ...props, children: (0, jsx_runtime_1.jsx)(ArrowDown_1.ArrowDown, { css: { ...(menuIsOpen ? { transform: 'rotateX(180deg)', marginTop: 2 } : { marginTop: 4 }) } }) }));
-};
-exports.DropdownIndicator = DropdownIndicator;
-// eslint-disable-next-line react/display-name
-const CustomOption = (dataUieName) => (props) => {
-    const { children, data, isMulti, isSelected, options } = props;
-    return ((0, jsx_runtime_1.jsx)(react_select_1.components.Option, { ...props, children: (0, jsx_runtime_1.jsxs)("div", { css: {
-                ...((isMulti || (0, exports.isGroup)(options)) && {
-                    display: 'grid',
-                    gridTemplateAreas: `"checkbox label"
-                                ". description"`,
-                    gridTemplateColumns: '22px 1fr',
-                    columnGap: (0, exports.isGroup)(options) ? '5px' : '10px',
-                }),
-            }, ...(dataUieName && {
-                'data-uie-name': `option-${dataUieName}`,
-                'data-uie-value': options.find(option => option.label === children)?.value,
-                'data-uie-selected': isSelected,
-            }), children: [isMulti && ((0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: isSelected, onChange: () => null, css: { gridArea: 'checkbox', width: 22, height: 22, cursor: 'pointer', placeSelf: 'center' } })), (0, exports.isGroup)(options) && (
-                //includes a checkmark character if it is selected and a group
-                (0, jsx_runtime_1.jsx)("div", { css: { width: 22, height: 22, cursor: 'pointer', placeSelf: 'center' }, children: isSelected ? (0, jsx_runtime_1.jsx)(Icon_1.CheckIcon, {}) : null })), (0, jsx_runtime_1.jsx)("div", { css: { gridArea: 'label', overflowWrap: 'break-word', overflow: 'hidden' }, children: children }), data && data.description && ((0, jsx_runtime_1.jsx)("p", { css: (theme) => ({
-                        marginBottom: 0,
-                        fontSize: theme.fontSizes.medium,
-                        color: isSelected ? theme.Select.focusedDescriptionColor : theme.Input.labelColor,
-                        gridArea: 'description',
-                    }), children: data.description }))] }) }));
-};
-exports.CustomOption = CustomOption;
-// eslint-disable-next-line react/display-name
-const Menu = (dataUieName, css) => (props) => {
-    const { children } = props;
-    return ((0, jsx_runtime_1.jsx)(react_select_1.components.Menu, { ...props, css: css, children: (0, jsx_runtime_1.jsx)("div", { ...(dataUieName && {
-                'data-uie-name': `dropdown-${dataUieName}`,
-            }), children: children }) }));
-};
-exports.Menu = Menu;
-// eslint-disable-next-line react/display-name
-const MenuList = (menuListHeading, dataUieName) => (props) => {
-    const { selectProps, children } = props;
-    const handleClose = () => {
-        if (selectProps && selectProps.onMenuClose) {
-            selectProps.onMenuClose();
-        }
-    };
-    return ((0, jsx_runtime_1.jsx)(react_select_1.components.MenuList, { ...props, children: (0, jsx_runtime_1.jsxs)("div", { ...(dataUieName && {
-                'data-uie-name': `menu-list-${dataUieName}`,
-            }), children: [(0, jsx_runtime_1.jsxs)("div", { css: (theme) => (0, SelectComponents_styles_1.menuListHeadingContainerStyles)(theme), children: [menuListHeading, (0, jsx_runtime_1.jsx)("button", { onClick: handleClose, css: SelectComponents_styles_1.menuListCloseButtonStyles, "aria-label": `Close: ${menuListHeading}`, children: (0, jsx_runtime_1.jsx)(Icon_1.CloseIcon, { width: 16, height: 16 }) })] }), children] }) }));
-};
-exports.MenuList = MenuList;
-exports.MenuList.displayName = 'MenuList';
-const renderValue = value => {
-    if (Array.isArray(value)) {
-        const currentValue = (i) => value[i].props.children;
-        return ((0, jsx_runtime_1.jsx)("div", { css: {
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                minWidth: 0,
-                paddingRight: 14,
-                gridArea: '1/1/2/3',
-            }, children: currentValue(0) }));
-    }
-    return value;
-};
-exports.renderValue = renderValue;
-const ValueContainer = ({ children, ...restProps }) => ((0, jsx_runtime_1.jsxs)(react_select_1.components.ValueContainer, { ...restProps, children: [(0, exports.renderValue)(children[0]), " ", children[1]] }));
-exports.ValueContainer = ValueContainer;
-const IndicatorsContainer = ({ children, ...restProps }) => {
-    const value = restProps.getValue();
-    const displaySelectedOptionsCount = Array.isArray(value) && value.length > 1;
-    return ((0, jsx_runtime_1.jsxs)(react_select_1.components.IndicatorsContainer, { ...restProps, children: [displaySelectedOptionsCount && (0, jsx_runtime_1.jsxs)("div", { css: { fontWeight: 600 }, children: ["(+", value.length - 1, ")"] }), children] }));
-};
-exports.IndicatorsContainer = IndicatorsContainer;

package/lib/Form/SelectComponents.styles.d.ts

@@ -1,5 +0,0 @@
-import { CSSObject } from '@emotion/react';
-import { Theme } from '../Theme/Theme';
-export declare const menuListHeadingContainerStyles: (theme: Theme) => CSSObject;
-export declare const menuListCloseButtonStyles: CSSObject;
-//# sourceMappingURL=SelectComponents.styles.d.ts.map

package/lib/Form/SelectComponents.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectComponents.styles.d.ts","sourceRoot":"","sources":["../../src/Form/SelectComponents.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,KAAK,EAAC,MAAM,gBAAgB,CAAC;AAErC,eAAO,MAAM,8BAA8B,UAAW,KAAK,KAAG,SAO5D,CAAC;AAEH,eAAO,MAAM,yBAAyB,EAAE,SAOvC,CAAC"}