@wireapp/react-ui-kit 9.69.7-beta.14.5ce5ca523 → 9.70.0

package/lib/Layout/Box/index.d.ts

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

package/lib/Layout/Box/index.d.ts.map

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

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

package/lib/Layout/Column/Column.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { QueryKeys } from '../../utils';
+export interface ColumnsProps<T = HTMLDivElement> extends React.HTMLProps<T> {
+    query?: QueryKeys;
+}
+export declare const filterColumnsProps: (props: ColumnsProps) => Object;
+export declare const Columns: (props: ColumnsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export type ColumnProps<T = HTMLDivElement> = React.HTMLProps<T>;
+export declare const Column: (props: ColumnProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Column.d.ts.map

package/lib/Layout/Column/Column.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../../src/Layout/Column/Column.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,SAAS,EAAQ,MAAM,aAAa,CAAC;AAI7C,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC1E,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,UAAW,YAAY,WAErD,CAAC;AAQF,eAAO,MAAM,OAAO,UAAW,YAAY,qDAAqE,CAAC;AAEjH,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAUjE,eAAO,MAAM,MAAM,UAAW,WAAW,qDAAgD,CAAC"}

package/lib/Layout/Column/Column.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Column = exports.Columns = exports.filterColumnsProps = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const utils_1 = require("../../utils");
+const util_1 = require("../../utils/util");
+const sizes_1 = require("../sizes/sizes");
+const filterColumnsProps = (props) => {
+    return (0, util_1.filterProps)(props, ['query']);
+};
+exports.filterColumnsProps = filterColumnsProps;
+const columnsStyle = ({ query = utils_1.QueryKeys.MOBILE }) => ({
+    display: 'flex',
+    marginLeft: `-${sizes_1.GUTTER}px`,
+    [utils_1.media[query]]: { flexDirection: 'column' },
+});
+const Columns = (props) => (0, jsx_runtime_1.jsx)("div", { css: columnsStyle(props), ...(0, exports.filterColumnsProps)(props) });
+exports.Columns = Columns;
+const columnStyle = _ => ({
+    display: 'block',
+    flexBasis: '0',
+    flexGrow: 1,
+    flexShrink: 1,
+    marginLeft: `${sizes_1.GUTTER}px`,
+});
+const Column = (props) => (0, jsx_runtime_1.jsx)("div", { css: columnStyle(props), ...props });
+exports.Column = Column;

package/lib/Layout/Column/Column.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Columns } from './Column';
+declare const meta: Meta<typeof Columns>;
+export default meta;
+type Story = StoryObj<typeof Columns>;
+export declare const Default: Story;
+export declare const TwoColumns: Story;
+export declare const ResponsiveColumns: Story;
+export declare const NestedColumns: Story;
+//# sourceMappingURL=Column.stories.d.ts.map

package/lib/Layout/Column/Column.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Column.stories.d.ts","sourceRoot":"","sources":["../../../src/Layout/Column/Column.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAS,OAAO,EAAC,MAAM,UAAU,CAAC;AAKzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAG9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAgBtC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAiB/B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAoB3B,CAAC"}

package/lib/Layout/Column/Column.stories.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NestedColumns = exports.ResponsiveColumns = exports.TwoColumns = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Column_1 = require("./Column");
+const Identity_1 = require("../../Identity");
+const utils_1 = require("../../utils");
+const meta = {
+    component: Column_1.Columns,
+    title: 'Layout/Column',
+};
+exports.default = meta;
+const Box = ({ children }) => ((0, jsx_runtime_1.jsx)("div", { style: {
+        backgroundColor: Identity_1.COLOR.GRAY_LIGHTEN_72,
+        border: `1px solid ${Identity_1.COLOR.GRAY_LIGHTEN_48}`,
+        borderRadius: '4px',
+        padding: '16px',
+        textAlign: 'center',
+    }, children: children }));
+exports.Default = {
+    args: {
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsx)(Box, { children: "Column 1" }) }), (0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsx)(Box, { children: "Column 2" }) }), (0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsx)(Box, { children: "Column 3" }) })] })),
+    },
+};
+exports.TwoColumns = {
+    args: {
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsx)(Box, { children: "Column 1" }) }), (0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsx)(Box, { children: "Column 2" }) })] })),
+    },
+};
+exports.ResponsiveColumns = {
+    args: {
+        query: utils_1.QueryKeys.TABLET,
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsx)(Box, { children: "Stacks on tablet" }) }), (0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsx)(Box, { children: "Stacks on tablet" }) }), (0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsx)(Box, { children: "Stacks on tablet" }) })] })),
+    },
+};
+exports.NestedColumns = {
+    args: {
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsx)(Box, { children: "Main Column" }) }), (0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsxs)(Column_1.Columns, { children: [(0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsx)(Box, { children: "Nested 1" }) }), (0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsx)(Box, { children: "Nested 2" }) })] }) })] })),
+    },
+};

package/lib/Layout/Column/index.d.ts

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

package/lib/Layout/Column/index.d.ts.map

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

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

package/lib/Layout/Container/Container.d.ts

@@ -0,0 +1,21 @@
+import { FC, HTMLProps } from 'react';
+export interface ContainerProps extends HTMLProps<HTMLDivElement> {
+    centerText?: boolean;
+    level?: keyof Level;
+    verticalCenter?: boolean;
+}
+export interface Level {
+    lg: number;
+    md: number;
+    sm: number;
+    xs: number;
+    xxs: number;
+}
+export declare const Container: FC<ContainerProps>;
+export type LevelContainerProps = Omit<ContainerProps, 'level'>;
+export declare const ContainerLG: FC<ContainerProps>;
+export declare const ContainerMD: FC<ContainerProps>;
+export declare const ContainerSM: FC<ContainerProps>;
+export declare const ContainerXS: FC<ContainerProps>;
+export declare const ContainerXXS: FC<ContainerProps>;
+//# sourceMappingURL=Container.d.ts.map

package/lib/Layout/Container/Container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/Layout/Container/Container.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,EAAE,EAAc,SAAS,EAAC,MAAM,OAAO,CAAC;AAOhD,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,KAAK,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;CACb;AA4BD,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAIxC,CAAC;AAGF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;AAEhE,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,cAAc,CAEzC,CAAC;AAGH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,cAAc,CAEzC,CAAC;AAGH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,cAAc,CAEzC,CAAC;AAGH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,cAAc,CAEzC,CAAC;AAGH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,cAAc,CAE1C,CAAC"}

package/lib/Layout/Container/Container.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContainerXXS = exports.ContainerXS = exports.ContainerSM = exports.ContainerMD = exports.ContainerLG = exports.Container = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2018 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 utils_1 = require("../../utils");
+const sizes_1 = require("../sizes/sizes");
+const LEVEL = {
+    lg: sizes_1.WIDTH.DESKTOP_MAX,
+    md: sizes_1.WIDTH.TABLET_MAX,
+    sm: sizes_1.WIDTH.TABLET_MIN,
+    xs: sizes_1.WIDTH.MOBILE,
+    xxs: sizes_1.WIDTH.TINY,
+};
+const containerStyle = ({ centerText = false, level = undefined, verticalCenter = false, }) => ({
+    margin: verticalCenter ? 'auto' : '0 auto',
+    maxWidth: level ? `${LEVEL[level]}px` : undefined,
+    position: 'relative',
+    textAlign: centerText ? 'center' : 'left',
+    width: '100%',
+    [utils_1.media[utils_1.QueryKeys.DESKTOP]]: level
+        ? undefined
+        : {
+            padding: 0,
+            width: `${sizes_1.WIDTH.DESKTOP_MIN - sizes_1.GUTTER * 2}px`,
+        },
+});
+exports.Container = (0, react_1.forwardRef)(({ centerText, level, verticalCenter, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, css: containerStyle({ centerText, level, verticalCenter }), ...props })));
+exports.Container.displayName = 'Container';
+exports.ContainerLG = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Container, { ref: ref, level: 'lg', ...props })));
+exports.ContainerLG.displayName = 'ContainerLG';
+exports.ContainerMD = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Container, { ref: ref, level: 'md', ...props })));
+exports.ContainerMD.displayName = 'ContainerMD';
+exports.ContainerSM = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Container, { ref: ref, level: 'sm', ...props })));
+exports.ContainerSM.displayName = 'ContainerSM';
+exports.ContainerXS = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Container, { ref: ref, level: 'xs', ...props })));
+exports.ContainerXS.displayName = 'ContainerXS';
+exports.ContainerXXS = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Container, { ref: ref, level: 'xxs', ...props })));
+exports.ContainerXXS.displayName = 'ContainerXXS';

package/lib/Layout/Container/Container.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Container } from './Container';
+declare const meta: Meta<typeof Container>;
+export default meta;
+type Story = StoryObj<typeof Container>;
+export declare const Default: Story;
+export declare const CenteredText: Story;
+export declare const VerticalCentered: Story;
+export declare const Sizes: () => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Container.stories.d.ts.map

package/lib/Layout/Container/Container.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.stories.d.ts","sourceRoot":"","sources":["../../../src/Layout/Container/Container.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAmE,MAAM,aAAa,CAAC;AAIxG,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAGhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAgBxC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAC;AAEF,eAAO,MAAM,KAAK,wDAkBjB,CAAC"}

package/lib/Layout/Container/Container.stories.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sizes = exports.VerticalCentered = exports.CenteredText = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Container_1 = require("./Container");
+const Identity_1 = require("../../Identity");
+const meta = {
+    component: Container_1.Container,
+    title: 'Layout/Container',
+};
+exports.default = meta;
+const DemoContent = ({ children }) => ((0, jsx_runtime_1.jsx)("div", { style: {
+        backgroundColor: Identity_1.COLOR.GRAY_LIGHTEN_72,
+        border: `1px solid ${Identity_1.COLOR.GRAY_LIGHTEN_48}`,
+        borderRadius: '4px',
+        padding: '16px',
+        textAlign: 'center',
+    }, children: children }));
+exports.Default = {
+    args: {
+        children: (0, jsx_runtime_1.jsx)(DemoContent, { children: "Default Container" }),
+    },
+};
+exports.CenteredText = {
+    args: {
+        centerText: true,
+        children: (0, jsx_runtime_1.jsx)(DemoContent, { children: "Centered Text Container" }),
+    },
+};
+exports.VerticalCentered = {
+    args: {
+        verticalCenter: true,
+        style: { height: '400px' },
+        children: (0, jsx_runtime_1.jsx)(DemoContent, { children: "Vertically Centered Container" }),
+    },
+};
+const Sizes = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [(0, jsx_runtime_1.jsx)(Container_1.ContainerXXS, { children: (0, jsx_runtime_1.jsx)(DemoContent, { children: "XXS Container" }) }), (0, jsx_runtime_1.jsx)(Container_1.ContainerXS, { children: (0, jsx_runtime_1.jsx)(DemoContent, { children: "XS Container" }) }), (0, jsx_runtime_1.jsx)(Container_1.ContainerSM, { children: (0, jsx_runtime_1.jsx)(DemoContent, { children: "SM Container" }) }), (0, jsx_runtime_1.jsx)(Container_1.ContainerMD, { children: (0, jsx_runtime_1.jsx)(DemoContent, { children: "MD Container" }) }), (0, jsx_runtime_1.jsx)(Container_1.ContainerLG, { children: (0, jsx_runtime_1.jsx)(DemoContent, { children: "LG Container" }) })] }));
+exports.Sizes = Sizes;

package/lib/Layout/Container/index.d.ts

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

package/lib/Layout/Container/index.d.ts.map

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

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

package/lib/Layout/Content/Content.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { CSSObject } from '@emotion/react';
+export type ContentProps<T = HTMLDivElement> = React.HTMLProps<T>;
+export declare const contentStyle: <T>(props: ContentProps<T>) => CSSObject;
+export declare const Content: (props: ContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Content.d.ts.map

package/lib/Layout/Content/Content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../src/Layout/Content/Content.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,MAAM,YAAY,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAElE,eAAO,MAAM,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,SAKxD,CAAC;AAEH,eAAO,MAAM,OAAO,UAAW,YAAY,qDAAiD,CAAC"}

package/lib/Layout/Content/Content.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Content = exports.contentStyle = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const sizes_1 = require("../sizes/sizes");
+const contentStyle = _ => ({
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+    padding: `0 ${sizes_1.GUTTER}px`,
+});
+exports.contentStyle = contentStyle;
+const Content = (props) => (0, jsx_runtime_1.jsx)("div", { css: (0, exports.contentStyle)(props), ...props });
+exports.Content = Content;

package/lib/Layout/Content/index.d.ts

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

package/lib/Layout/Content/index.d.ts.map

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

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

package/lib/Layout/FlexBox/FlexBox.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CSSObject } from '@emotion/react';
+import type { Property } from 'csstype';
+export interface FlexBoxProps<T = HTMLDivElement> extends React.PropsWithRef<React.HTMLProps<T>> {
+    align?: string;
+    column?: boolean;
+    flexWrap?: Property.FlexWrap;
+    justify?: string;
+}
+export declare const flexBoxStyle: <T>(props: FlexBoxProps<T>) => CSSObject;
+export declare const filterFlexBoxProps: (props: FlexBoxProps) => Object;
+export declare const FlexBox: React.ForwardRefExoticComponent<Omit<FlexBoxProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=FlexBox.d.ts.map

package/lib/Layout/FlexBox/FlexBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexBox.d.ts","sourceRoot":"","sources":["../../../src/Layout/FlexBox/FlexBox.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAItC,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC9F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,SAWxD,CAAC;AAEH,eAAO,MAAM,kBAAkB,UAAW,YAAY,WACU,CAAC;AAEjE,eAAO,MAAM,OAAO,kHAElB,CAAC"}

package/lib/Layout/FlexBox/FlexBox.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexBox = exports.filterFlexBoxProps = exports.flexBoxStyle = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2017 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 = __importStar(require("react"));
+const utils_1 = require("../../utils");
+const flexBoxStyle = ({ align = 'flex-start', column = false, justify = 'flex-start', flexWrap = 'nowrap', }) => ({
+    alignItems: align,
+    display: 'flex',
+    flexDirection: column ? 'column' : 'row',
+    flexWrap: flexWrap,
+    justifyContent: justify,
+});
+exports.flexBoxStyle = flexBoxStyle;
+const filterFlexBoxProps = (props) => (0, utils_1.filterProps)(props, ['align', 'column', 'justify', 'flexWrap']);
+exports.filterFlexBoxProps = filterFlexBoxProps;
+exports.FlexBox = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, css: (0, exports.flexBoxStyle)(props), ...(0, exports.filterFlexBoxProps)(props) })));
+exports.FlexBox.displayName = 'FlexBox';

package/lib/Layout/FlexBox/index.d.ts

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

package/lib/Layout/FlexBox/index.d.ts.map

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

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

package/lib/Layout/Footer/Footer.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+type FooterProps = React.HTMLProps<HTMLElement>;
+export declare const Footer: (props: FooterProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Footer.d.ts.map

package/lib/Layout/Footer/Footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../src/Layout/Footer/Footer.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;AAEhD,eAAO,MAAM,MAAM,UAAW,WAAW,qDAA0B,CAAC"}

package/lib/Layout/Footer/Footer.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footer = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Footer = (props) => (0, jsx_runtime_1.jsx)("footer", { ...props });
+exports.Footer = Footer;

package/lib/Layout/Footer/index.d.ts

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

package/lib/Layout/Footer/index.d.ts.map

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

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