@wireapp/react-ui-kit 9.69.4 → 9.69.5

package/lib/Navigation/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+interface BreadcrumbsProps {
+    /**
+     * Maximum number of items to display before combining middle items into a dropdown.
+     * @default 4
+     */
+    maxNotCombinedItems?: number;
+    items: Array<{
+        name: string;
+        icon?: ReactNode;
+    }>;
+    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/Navigation/Breadcrumbs/Breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/Navigation/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,qDAuDlB,CAAC"}

package/lib/Navigation/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Breadcrumbs = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+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, icon: crumb.icon, isActive: index === items.length - 1, onClick: () => onItemClick(crumb), isFirst: index === 0 }, 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, icon: firstCrumb.icon, isActive: false, onClick: () => onItemClick(firstCrumb), isFirst: true }), (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), isFirst: false }, crumb.name)] })))] }));
+};
+exports.Breadcrumbs = Breadcrumbs;

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

@@ -0,0 +1,11 @@
+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;
+export declare const WithIcons: Story;
+export declare const WithIconsAndCombinedItems: Story;
+export declare const OneItem: Story;
+//# sourceMappingURL=Breadcrumbs.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.stories.d.ts","sourceRoot":"","sources":["../../../src/Navigation/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;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}

package/lib/Navigation/Breadcrumbs/Breadcrumbs.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OneItem = 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("../../DataDisplay/Icon");
+const meta = {
+    component: Breadcrumbs_1.Breadcrumbs,
+    title: 'Navigation/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: () => { } })),
+};
+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: () => { } })),
+};
+exports.OneItem = {
+    render: () => (0, jsx_runtime_1.jsx)(Breadcrumbs_1.Breadcrumbs, { items: [{ name: 'Home' }], onItemClick: () => { } }),
+};

package/lib/Navigation/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/Navigation/Breadcrumbs/Breadcrumbs.styles.d.ts.map

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

package/lib/Navigation/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/Navigation/Breadcrumbs/CombainedBreadcrumbs/CombainedBreadcrumbs.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+interface CombainedBreadcrumbsProps {
+    items: Array<{
+        name: string;
+        icon?: ReactNode;
+    }>;
+    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/Navigation/Breadcrumbs/CombainedBreadcrumbs/CombainedBreadcrumbs.d.ts.map

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CombainedBreadcrumbs = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const CombainedBreadcrumbs_styles_1 = require("./CombainedBreadcrumbs.styles");
+const DropdownMenu_1 = require("../../../Surface/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: (0, jsx_runtime_1.jsxs)("div", { css: CombainedBreadcrumbs_styles_1.itemStyles, children: [crumb.icon, crumb.name] }) }, crumb.name))) })] }));
+};
+exports.CombainedBreadcrumbs = CombainedBreadcrumbs;

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

@@ -0,0 +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/Navigation/Breadcrumbs/CombainedBreadcrumbs/CombainedBreadcrumbs.styles.d.ts.map

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

@@ -0,0 +1,38 @@
+"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.itemStyles = exports.buttonStyles = void 0;
+const colors_v2_1 = require("../../../Identity/colors-v2/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)',
+    },
+};
+exports.itemStyles = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+};

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

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

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

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

package/lib/Navigation/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/Navigation/Pagination/Pagination.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface PaginationProps<T = HTMLDivElement> extends React.PropsWithRef<React.HTMLProps<T>> {
+    currentPage?: number;
+    goPage?: (page: number) => void;
+    nextPageComponent?: any;
+    numberOfPages?: number;
+    previousPageComponent?: any;
+}
+export declare const Pagination: React.FC<PaginationProps>;
+export {};
+//# sourceMappingURL=Pagination.d.ts.map

package/lib/Navigation/Pagination/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/Navigation/Pagination/Pagination.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,UAAU,eAAe,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC1F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,iBAAiB,CAAC,EAAE,GAAG,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB,CAAC,EAAE,GAAG,CAAC;CAC7B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA6EhD,CAAC"}

package/lib/Navigation/Pagination/Pagination.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pagination = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Identity_1 = require("../../Identity");
+const Layout_1 = require("../../Layout");
+const Typography_1 = require("../../Typography");
+const Pagination = ({ currentPage = 0, numberOfPages = 1, goPage, previousPageComponent: PreviousPageComponent = () => '<', nextPageComponent: NextPageComponent = () => '>', ...props }) => {
+    const isLastPage = currentPage === numberOfPages - 1;
+    const isFirstPage = currentPage === 0;
+    const renderPageList = () => {
+        const lastPageIndex = numberOfPages - 1;
+        const spanLength = 1;
+        const endLength = 1;
+        const skipLength = 1;
+        const normalizeCount = endLength + skipLength + spanLength;
+        const dots = (key) => ((0, jsx_runtime_1.jsx)(Typography_1.Bold, { fontSize: '11px', children: '…' }, key));
+        const renderPageNumber = pageIndex => currentPage === pageIndex ? ((0, jsx_runtime_1.jsx)(Typography_1.Bold, { fontSize: '11px', style: { color: Identity_1.COLOR.BLUE, margin: '0 8px' }, "data-uie-name": "status-active-page", children: pageIndex + 1 }, pageIndex)) : ((0, jsx_runtime_1.jsx)(Typography_1.Link, { style: { margin: '0 8px' }, onClick: () => goPage(pageIndex), "data-uie-name": "go-page", children: pageIndex + 1 }, pageIndex));
+        const normalizedCurrent = Math.min(Math.max(currentPage, normalizeCount), lastPageIndex - normalizeCount);
+        const beforeCount = normalizedCurrent - spanLength - endLength;
+        const afterCount = lastPageIndex - endLength - normalizedCurrent - spanLength;
+        const pages = Array.from(Array(numberOfPages), (_, index) => renderPageNumber(index));
+        if (afterCount > skipLength) {
+            pages.splice(normalizedCurrent + spanLength + 1, afterCount, dots('dots-end'));
+        }
+        if (beforeCount > skipLength) {
+            pages.splice(endLength, beforeCount, dots('dots-start'));
+        }
+        return pages;
+    };
+    return ((0, jsx_runtime_1.jsxs)(Layout_1.FlexBox, { align: "flex-end", "data-uie-name": "element-pagination", ...props, children: [(0, jsx_runtime_1.jsx)("div", { css: { flexBasis: 100 }, children: !isFirstPage && ((0, jsx_runtime_1.jsx)(Typography_1.Link, { block: true, onClick: () => goPage(currentPage - 1), "data-uie-name": "go-previous-page", children: (0, jsx_runtime_1.jsx)(PreviousPageComponent, {}) })) }), (0, jsx_runtime_1.jsx)("div", { css: { alignItems: 'flex-end', display: 'flex', flexDirection: 'row', margin: '0 auto' }, "data-uie-name": "list-pages", children: renderPageList() }), (0, jsx_runtime_1.jsx)("div", { css: { display: 'flex', flexBasis: 100, justifyContent: 'flex-end' }, children: !isLastPage && ((0, jsx_runtime_1.jsx)(Typography_1.Link, { block: true, onClick: () => goPage(currentPage + 1), "data-uie-name": "go-next-page", children: (0, jsx_runtime_1.jsx)(NextPageComponent, {}) })) })] }));
+};
+exports.Pagination = Pagination;

package/lib/Navigation/Pagination/Pagination.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Pagination } from './Pagination';
+declare const meta: Meta<typeof Pagination>;
+export default meta;
+type Story = StoryObj<typeof Pagination>;
+export declare const Default: Story;
+export declare const CustomNavigation: Story;
+export declare const WithManyPages: Story;
+export declare const Interactive: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CustomStyling: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const FirstPage: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const LastPage: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const MiddlePage: () => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Pagination.stories.d.ts.map

package/lib/Navigation/Pagination/Pagination.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.stories.d.ts","sourceRoot":"","sources":["../../../src/Navigation/Pagination/Pagination.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAKxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAUjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF,eAAO,MAAM,WAAW,wDAgCvB,CAAC;AAEF,eAAO,MAAM,aAAa,wDAiBzB,CAAC;AAEF,eAAO,MAAM,SAAS,wDAWrB,CAAC;AAEF,eAAO,MAAM,QAAQ,wDAWpB,CAAC;AAEF,eAAO,MAAM,UAAU,wDAWtB,CAAC"}

package/lib/Navigation/Pagination/Pagination.stories.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MiddlePage = exports.LastPage = exports.FirstPage = exports.CustomStyling = exports.Interactive = exports.WithManyPages = exports.CustomNavigation = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+const react_1 = require("react");
+const Pagination_1 = require("./Pagination");
+const colors_1 = require("../../Identity/colors");
+const Typography_1 = require("../../Typography");
+const meta = {
+    component: Pagination_1.Pagination,
+    title: 'Navigation/Pagination',
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)("div", { style: { padding: '24px', maxWidth: '600px', margin: '0 auto' }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        currentPage: 0,
+        numberOfPages: 5,
+        goPage: () => { },
+    },
+};
+exports.CustomNavigation = {
+    args: {
+        currentPage: 0,
+        numberOfPages: 5,
+        goPage: () => { },
+        previousPageComponent: () => 'Previous',
+        nextPageComponent: () => 'Next',
+    },
+};
+exports.WithManyPages = {
+    args: {
+        currentPage: 4,
+        numberOfPages: 20,
+        goPage: () => { },
+    },
+};
+const Interactive = () => {
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(0);
+    const paginatedList = [
+        [1, 2],
+        [3, 4],
+        [5, 6],
+        [7, 8],
+        [9, 10],
+        [11, 12],
+        [13, 14],
+        [15, 16],
+        [17, 18],
+    ];
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '24px' }, children: paginatedList[currentPage].map(item => ((0, jsx_runtime_1.jsx)(Typography_1.Small, { center: true, bold: true, block: true, style: { border: `1px solid ${colors_1.COLOR.GRAY}`, margin: 10, padding: '8px' }, children: `Item ${item}` }, item))) }), (0, jsx_runtime_1.jsx)(Pagination_1.Pagination, { currentPage: currentPage, goPage: setCurrentPage, nextPageComponent: () => 'Next', numberOfPages: paginatedList.length, previousPageComponent: () => 'Previous' })] }));
+};
+exports.Interactive = Interactive;
+const CustomStyling = () => {
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(0);
+    return ((0, jsx_runtime_1.jsx)(Pagination_1.Pagination, { currentPage: currentPage, goPage: setCurrentPage, numberOfPages: 5, previousPageComponent: () => (0, jsx_runtime_1.jsx)("div", { style: { color: colors_1.COLOR.BLUE, fontWeight: 'bold' }, children: '←' }), nextPageComponent: () => (0, jsx_runtime_1.jsx)("div", { style: { color: colors_1.COLOR.BLUE, fontWeight: 'bold' }, children: '→' }), style: {
+            backgroundColor: colors_1.COLOR.GRAY_LIGHTEN_92,
+            borderRadius: '8px',
+            padding: '16px',
+        } }));
+};
+exports.CustomStyling = CustomStyling;
+const FirstPage = () => {
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(0);
+    return ((0, jsx_runtime_1.jsx)(Pagination_1.Pagination, { currentPage: currentPage, goPage: setCurrentPage, numberOfPages: 5, previousPageComponent: () => 'Previous', nextPageComponent: () => 'Next' }));
+};
+exports.FirstPage = FirstPage;
+const LastPage = () => {
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(4);
+    return ((0, jsx_runtime_1.jsx)(Pagination_1.Pagination, { currentPage: currentPage, goPage: setCurrentPage, numberOfPages: 5, previousPageComponent: () => 'Previous', nextPageComponent: () => 'Next' }));
+};
+exports.LastPage = LastPage;
+const MiddlePage = () => {
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(5);
+    return ((0, jsx_runtime_1.jsx)(Pagination_1.Pagination, { currentPage: currentPage, goPage: setCurrentPage, numberOfPages: 10, previousPageComponent: () => 'Previous', nextPageComponent: () => 'Next' }));
+};
+exports.MiddlePage = MiddlePage;

package/lib/Navigation/Pagination/index.d.ts

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

package/lib/Navigation/Pagination/index.d.ts.map

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

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

package/lib/Navigation/index.d.ts

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

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

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

package/lib/Navigation/index.js

@@ -0,0 +1,36 @@
+"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);
+__exportStar(require("./Pagination"), exports);

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

@@ -0,0 +1,54 @@
+import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+import { AccordionItem } from './AccordionItem/AccordionItem';
+interface AccordionSingleProps {
+    type?: 'single';
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    collapsible?: boolean;
+}
+interface AccordionMultipleProps {
+    type: 'multiple';
+    defaultValue?: string[];
+    value?: string[];
+    onValueChange?: (value: string[]) => void;
+}
+type AccordionProps = {
+    children: ReactNode;
+} & (AccordionSingleProps | AccordionMultipleProps);
+interface AccordionComponent extends ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>> {
+    Item: typeof AccordionItem;
+}
+/**
+ * A vertically stacked set of interactive headings that each reveal an associated section of content.
+ * The Accordion component can be used to create expandable/collapsible sections of content.
+ *
+ * @example
+ * Single open accordion (default)
+ * ```tsx
+ * <Accordion>
+ *   <Accordion.Item title="What is Wire?" value="item-1">
+ *     <Text>Wire is a secure messaging platform...</Text>
+ *   </Accordion.Item>
+ *   <Accordion.Item title="Is Wire secure?" value="item-2">
+ *     <Text>Yes, Wire uses end-to-end encryption...</Text>
+ *   </Accordion.Item>
+ * </Accordion>
+ * ```
+ *
+ * @example
+ * Multiple open accordion:
+ * ```tsx
+ * <Accordion type="multiple">
+ *   <Accordion.Item title="What is Wire?" value="item-1">
+ *     <Text>Wire is a secure messaging platform...</Text>
+ *   </Accordion.Item>
+ *   <Accordion.Item title="Is Wire secure?" value="item-2">
+ *     <Text>Yes, Wire uses end-to-end encryption...</Text>
+ *   </Accordion.Item>
+ * </Accordion>
+ * ```
+ */
+export declare const Accordion: AccordionComponent;
+export {};
+//# sourceMappingURL=Accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/Surface/Accordion/Accordion.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAyB,yBAAyB,EAAE,SAAS,EAAE,aAAa,EAAC,MAAM,OAAO,CAAC;AAIlG,OAAO,EAAC,aAAa,EAAC,MAAM,+BAA+B,CAAC;AAG5D,UAAU,oBAAoB;IAC5B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,sBAAsB;IAC9B,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC3C;AAED,KAAK,cAAc,GAAG;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,GAAG,CAAC,oBAAoB,GAAG,sBAAsB,CAAC,CAAC;AAE9F,UAAU,kBAAmB,SAAQ,yBAAyB,CAAC,cAAc,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC;IAC5G,IAAI,EAAE,OAAO,aAAa,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,SAAS,EA8BhB,kBAAkB,CAAC"}