@wireapp/react-ui-kit 9.31.0 → 9.33.0

package/lib/Menu/TabBar.stories.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomStyling = exports.WithBadge = exports.WithContent = exports.Interactive = 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 TabBar_1 = require("./TabBar");
+const meta = {
+    component: TabBar_1.TabBar,
+    title: 'Menu/TabBar',
+    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: {
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: true, children: "First Tab" }), (0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: false, children: "Second Tab" }), (0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: false, children: "Third Tab" })] })),
+    },
+};
+const Interactive = () => {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(0);
+    const tabs = ['First Tab', 'Second Tab', 'Third Tab'];
+    return ((0, jsx_runtime_1.jsx)(TabBar_1.TabBar, { children: tabs.map((tab, index) => ((0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: activeTab === index, onClick: () => setActiveTab(index), children: tab }, tab))) }));
+};
+exports.Interactive = Interactive;
+const WithContent = () => {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(0);
+    const tabs = ['Details', 'History', 'Settings'];
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(TabBar_1.TabBar, { children: tabs.map((tab, index) => ((0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: activeTab === index, onClick: () => setActiveTab(index), children: tab }, tab))) }), (0, jsx_runtime_1.jsxs)("div", { style: { padding: '16px' }, children: [activeTab === 0 && (0, jsx_runtime_1.jsx)("div", { children: "Details content" }), activeTab === 1 && (0, jsx_runtime_1.jsx)("div", { children: "History content" }), activeTab === 2 && (0, jsx_runtime_1.jsx)("div", { children: "Settings content" })] })] }));
+};
+exports.WithContent = WithContent;
+const WithBadge = () => {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(0);
+    return ((0, jsx_runtime_1.jsxs)(TabBar_1.TabBar, { children: [(0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: activeTab === 0, onClick: () => setActiveTab(0), children: "Messages" }), (0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: activeTab === 1, onClick: () => setActiveTab(1), children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: ["Notifications", (0, jsx_runtime_1.jsx)("span", { style: {
+                                backgroundColor: 'red',
+                                borderRadius: '8px',
+                                color: 'white',
+                                fontSize: '12px',
+                                padding: '2px 6px',
+                            }, children: "3" })] }) })] }));
+};
+exports.WithBadge = WithBadge;
+exports.CustomStyling = {
+    args: {
+        style: { backgroundColor: '#f5f5f5', padding: '8px' },
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: true, style: { fontWeight: 'bold' }, children: "Bold Tab" }), (0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: false, style: { color: 'blue' }, children: "Blue Tab" }), (0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: false, style: { textTransform: 'none' }, children: "Normal Case Tab" })] })),
+    },
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.stories.d.ts","sourceRoot":"","sources":["../../src/Misc/ButtonGroup.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAUlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC;AAEF,eAAO,MAAM,SAAS,wDAarB,CAAC;AAEF,eAAO,MAAM,YAAY,wDAaxB,CAAC"}

package/lib/Misc/ButtonGroup.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MixedContent = exports.WithIcons = exports.SingleButton = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const ButtonGroup_1 = require("./ButtonGroup");
+const Icon_1 = require("../Icon");
+const meta = {
+    component: ButtonGroup_1.ButtonGroup,
+    title: 'Misc/ButtonGroup',
+    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: {
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }) }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }), children: "Button" }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { children: "Text only" })] })),
+    },
+};
+exports.SingleButton = {
+    args: {
+        children: (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { children: "Text only" }),
+    },
+};
+const WithIcons = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '20px' }, children: [(0, jsx_runtime_1.jsxs)(ButtonGroup_1.ButtonGroup, { children: [(0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }) }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }) }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }) })] }), (0, jsx_runtime_1.jsxs)(ButtonGroup_1.ButtonGroup, { children: [(0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }), children: "Add" }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }), children: "Create" }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }), children: "New" })] })] }));
+exports.WithIcons = WithIcons;
+const MixedContent = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '20px' }, children: [(0, jsx_runtime_1.jsxs)(ButtonGroup_1.ButtonGroup, { children: [(0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }) }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { children: "Middle" }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }), children: "End" })] }), (0, jsx_runtime_1.jsxs)(ButtonGroup_1.ButtonGroup, { children: [(0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { children: "Start" }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }) }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { children: "End" })] })] }));
+exports.MixedContent = MixedContent;

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

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { IconButton } from './IconButton';
+declare const meta: Meta<typeof IconButton>;
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Disabled: Story;
+export declare const CustomBackground: Story;
+export declare const AllVariants: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DifferentIcons: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const WithCustomStyles: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Interactive: () => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconButton.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../src/Misc/IconButton.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,UAAU,EAAoB,MAAM,cAAc,CAAC;AAK3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAmBjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAK9B,CAAC;AAEF,eAAO,MAAM,WAAW,wDA0BvB,CAAC;AAEF,eAAO,MAAM,cAAc,wDAY1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,wDAY5B,CAAC;AAEF,eAAO,MAAM,WAAW,wDAavB,CAAC"}

package/lib/Misc/IconButton.stories.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Interactive = exports.WithCustomStyles = exports.DifferentIcons = exports.AllVariants = exports.CustomBackground = exports.Disabled = exports.Secondary = exports.Primary = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const IconButton_1 = require("./IconButton");
+const Icon_1 = require("../Icon");
+const colors_1 = require("../Identity/colors");
+const meta = {
+    component: IconButton_1.IconButton,
+    title: 'Misc/IconButton',
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)("div", { style: { padding: '24px', maxWidth: '600px', margin: '0 auto' }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: Object.values(IconButton_1.IconButtonVariant),
+        },
+        backgroundColor: {
+            control: 'color',
+        },
+    },
+};
+exports.default = meta;
+exports.Primary = {
+    args: {
+        children: (0, jsx_runtime_1.jsx)(Icon_1.InfoIcon, {}),
+        variant: IconButton_1.IconButtonVariant.PRIMARY,
+    },
+};
+exports.Secondary = {
+    args: {
+        children: (0, jsx_runtime_1.jsx)(Icon_1.InfoIcon, {}),
+        variant: IconButton_1.IconButtonVariant.SECONDARY,
+    },
+};
+exports.Disabled = {
+    args: {
+        children: (0, jsx_runtime_1.jsx)(Icon_1.InfoIcon, {}),
+        disabled: true,
+    },
+};
+exports.CustomBackground = {
+    args: {
+        children: (0, jsx_runtime_1.jsx)(Icon_1.InfoIcon, {}),
+        backgroundColor: colors_1.COLOR.BLUE,
+    },
+};
+const AllVariants = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '32px' }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { children: "Primary Variant" }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '16px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: IconButton_1.IconButtonVariant.PRIMARY, children: (0, jsx_runtime_1.jsx)(Icon_1.InfoIcon, {}) }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: IconButton_1.IconButtonVariant.PRIMARY, disabled: true, children: (0, jsx_runtime_1.jsx)(Icon_1.InfoIcon, {}) })] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { children: "Secondary Variant" }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '16px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: IconButton_1.IconButtonVariant.SECONDARY, children: (0, jsx_runtime_1.jsx)(Icon_1.InfoIcon, {}) }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: IconButton_1.IconButtonVariant.SECONDARY, disabled: true, children: (0, jsx_runtime_1.jsx)(Icon_1.InfoIcon, {}) })] })] })] }));
+exports.AllVariants = AllVariants;
+const DifferentIcons = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '16px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.InfoIcon, {}) }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, {}) }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.TrashIcon, {}) })] }));
+exports.DifferentIcons = DifferentIcons;
+const WithCustomStyles = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '16px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { style: { backgroundColor: colors_1.COLOR.GREEN }, children: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, {}) }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { style: { backgroundColor: colors_1.COLOR.RED }, children: (0, jsx_runtime_1.jsx)(Icon_1.TrashIcon, {}) }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { style: { border: `2px solid ${colors_1.COLOR.BLUE}` }, children: (0, jsx_runtime_1.jsx)(Icon_1.InfoIcon, {}) })] }));
+exports.WithCustomStyles = WithCustomStyles;
+const Interactive = () => {
+    const handleClick = () => alert('Button clicked!');
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '16px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { onClick: handleClick, children: (0, jsx_runtime_1.jsx)(Icon_1.InfoIcon, {}) }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { disabled: true, onClick: handleClick, children: (0, jsx_runtime_1.jsx)(Icon_1.InfoIcon, {}) })] }));
+};
+exports.Interactive = Interactive;

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

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Loading } from './Loading';
+declare const meta: Meta<typeof Loading>;
+export default meta;
+type Story = StoryObj<typeof Loading>;
+export declare const Default: Story;
+export declare const WithProgress: Story;
+export declare const CustomSize: Story;
+export declare const CustomColor: Story;
+export declare const Variants: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ColorVariants: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SizeVariants: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ProgressStages: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const OnDifferentBackgrounds: () => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Loading.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.stories.d.ts","sourceRoot":"","sources":["../../src/Misc/Loading.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAIlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAe9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAEF,eAAO,MAAM,QAAQ,wDAMpB,CAAC;AAEF,eAAO,MAAM,aAAa,wDAOzB,CAAC;AAEF,eAAO,MAAM,YAAY,wDAOxB,CAAC;AAEF,eAAO,MAAM,cAAc,wDAiB1B,CAAC;AAEF,eAAO,MAAM,sBAAsB,wDAYlC,CAAC"}

package/lib/Misc/Loading.stories.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OnDifferentBackgrounds = exports.ProgressStages = exports.SizeVariants = exports.ColorVariants = exports.Variants = exports.CustomColor = exports.CustomSize = exports.WithProgress = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Loading_1 = require("./Loading");
+const colors_1 = require("../Identity/colors");
+const meta = {
+    component: Loading_1.Loading,
+    title: 'Misc/Loading',
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)("div", { style: { padding: '24px', maxWidth: '600px', margin: '0 auto' }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+    argTypes: {
+        color: { control: 'color' },
+        progress: { control: { type: 'range', min: 0, max: 1, step: 0.01 } },
+        size: { control: { type: 'range', min: 16, max: 200, step: 1 } },
+    },
+};
+exports.default = meta;
+exports.Default = {
+    args: {},
+};
+exports.WithProgress = {
+    args: {
+        progress: 0.33,
+    },
+};
+exports.CustomSize = {
+    args: {
+        size: 100,
+    },
+};
+exports.CustomColor = {
+    args: {
+        color: colors_1.COLOR.GREEN,
+    },
+};
+const Variants = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '32px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(Loading_1.Loading, {}), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { progress: 0.33 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { progress: 0.66, size: 100 })] }));
+exports.Variants = Variants;
+const ColorVariants = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '32px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(Loading_1.Loading, { color: colors_1.COLOR.BLUE }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { color: colors_1.COLOR.GREEN }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { color: colors_1.COLOR.RED }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { color: colors_1.COLOR.ORANGE })] }));
+exports.ColorVariants = ColorVariants;
+const SizeVariants = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '32px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(Loading_1.Loading, { size: 24 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { size: 48 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { size: 72 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { size: 96 })] }));
+exports.SizeVariants = SizeVariants;
+const ProgressStages = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '32px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '32px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(Loading_1.Loading, { progress: 0 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { progress: 0.25 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { progress: 0.5 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { progress: 0.75 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { progress: 1 })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '32px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(Loading_1.Loading, { size: 72, progress: 0 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { size: 72, progress: 0.25 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { size: 72, progress: 0.5 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { size: 72, progress: 0.75 }), (0, jsx_runtime_1.jsx)(Loading_1.Loading, { size: 72, progress: 1 })] })] }));
+exports.ProgressStages = ProgressStages;
+const OnDifferentBackgrounds = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '32px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { padding: '24px', backgroundColor: colors_1.COLOR.WHITE }, children: (0, jsx_runtime_1.jsx)(Loading_1.Loading, {}) }), (0, jsx_runtime_1.jsx)("div", { style: { padding: '24px', backgroundColor: colors_1.COLOR.GRAY }, children: (0, jsx_runtime_1.jsx)(Loading_1.Loading, { color: colors_1.COLOR.WHITE }) }), (0, jsx_runtime_1.jsx)("div", { style: { padding: '24px', backgroundColor: colors_1.COLOR.BLACK }, children: (0, jsx_runtime_1.jsx)(Loading_1.Loading, { color: colors_1.COLOR.WHITE }) })] }));
+exports.OnDifferentBackgrounds = OnDifferentBackgrounds;

package/lib/Misc/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/Misc/Pagination.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.stories.d.ts","sourceRoot":"","sources":["../../src/Misc/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/Misc/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 Text_1 = require("../Text");
+const meta = {
+    component: Pagination_1.Pagination,
+    title: 'Misc/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)(Text_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/Misc/Pill.stories.d.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Pill } from './Pill';
+declare const meta: Meta<typeof Pill>;
+export default meta;
+type Story = StoryObj<typeof Pill>;
+export declare const Default: Story;
+export declare const Active: Story;
+export declare const Error: Story;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const AllVariants: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const WithLongText: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Interactive: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Combinations: () => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Pill.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.stories.d.ts","sourceRoot":"","sources":["../../src/Misc/Pill.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAY,MAAM,QAAQ,CAAC;AAEvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAmB3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,WAAW,wDAYvB,CAAC;AAEF,eAAO,MAAM,YAAY,wDAKxB,CAAC;AAEF,eAAO,MAAM,WAAW,wDASvB,CAAC;AAEF,eAAO,MAAM,YAAY,wDAyBxB,CAAC"}

package/lib/Misc/Pill.stories.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Combinations = exports.Interactive = exports.WithLongText = exports.AllVariants = exports.Warning = exports.Success = exports.Error = exports.Active = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Pill_1 = require("./Pill");
+const meta = {
+    component: Pill_1.Pill,
+    title: 'Misc/Pill',
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)("div", { style: { padding: '24px', maxWidth: '600px', margin: '0 auto' }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+    argTypes: {
+        type: {
+            control: 'select',
+            options: [null, ...Object.values(Pill_1.PILL_TYPE)],
+        },
+        active: {
+            control: 'boolean',
+        },
+    },
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        children: 'Default Pill',
+    },
+};
+exports.Active = {
+    args: {
+        children: 'Active Pill',
+        active: true,
+    },
+};
+exports.Error = {
+    args: {
+        children: 'Error Pill',
+        type: Pill_1.PILL_TYPE.error,
+    },
+};
+exports.Success = {
+    args: {
+        children: 'Success Pill',
+        type: Pill_1.PILL_TYPE.success,
+    },
+};
+exports.Warning = {
+    args: {
+        children: 'Warning Pill',
+        type: Pill_1.PILL_TYPE.warning,
+    },
+};
+const AllVariants = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { children: "Default Pill" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { active: true, children: "Active Pill" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { type: Pill_1.PILL_TYPE.error, children: "Error Pill" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { type: Pill_1.PILL_TYPE.success, children: "Success Pill" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { type: Pill_1.PILL_TYPE.warning, children: "Warning Pill" })] })] }));
+exports.AllVariants = AllVariants;
+const WithLongText = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { children: "This is a very long text that should wrap nicely inside the pill component" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { type: Pill_1.PILL_TYPE.success, children: "This is a very long successful message that should wrap nicely" })] }));
+exports.WithLongText = WithLongText;
+const Interactive = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '8px' }, children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { onClick: () => alert('Clicked!'), style: { cursor: 'pointer' }, children: "Clickable Pill" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { active: true, onClick: () => alert('Active pills can be clicked too!'), style: { cursor: 'pointer' }, children: "Active Clickable" })] }));
+exports.Interactive = Interactive;
+const Combinations = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { type: Pill_1.PILL_TYPE.error, active: true, children: "Active Error" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { type: Pill_1.PILL_TYPE.success, active: true, children: "Active Success" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { type: Pill_1.PILL_TYPE.warning, active: true, children: "Active Warning" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { type: Pill_1.PILL_TYPE.error, style: { opacity: 0.7 }, children: "Faded Error" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { type: Pill_1.PILL_TYPE.success, style: { opacity: 0.7 }, children: "Faded Success" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { type: Pill_1.PILL_TYPE.warning, style: { opacity: 0.7 }, children: "Faded Warning" })] })] }));
+exports.Combinations = Combinations;

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

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Modal } from './Modal';
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type Story = StoryObj<typeof Modal>;
+export declare const Default: Story;
+export declare const WithActions: Story;
+export declare const Fullscreen: Story;
+export declare const CustomWidth: Story;
+export declare const WithLongContent: Story;
+export declare const MultipleActions: Story;
+//# sourceMappingURL=Modal.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../src/Modal/Modal.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAK9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAM5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAYpC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAsBzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAgBzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAqB7B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAuB7B,CAAC"}

package/lib/Modal/Modal.stories.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultipleActions = exports.WithLongContent = exports.CustomWidth = exports.Fullscreen = exports.WithActions = 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 Modal_1 = require("./Modal");
+const Form_1 = require("../Form");
+const Text_1 = require("../Text");
+const meta = {
+    component: Modal_1.Modal,
+    title: 'Modal/Modal',
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+exports.default = meta;
+const ModalDemo = ({ children }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { padding: '24px' }, children: [(0, jsx_runtime_1.jsx)(Form_1.Button, { onClick: () => setIsOpen(true), children: "Open Modal" }), children(isOpen, setIsOpen)] }));
+};
+exports.Default = {
+    render: () => ((0, jsx_runtime_1.jsx)(ModalDemo, { children: (isOpen, setIsOpen) => isOpen && ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { onClose: () => setIsOpen(false), children: [(0, jsx_runtime_1.jsx)(Text_1.H2, { style: { margin: 0 }, children: "Normal Modal" }), (0, jsx_runtime_1.jsx)(Text_1.Paragraph, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { block: true, children: "This is a normal modal with default styling." }) }), (0, jsx_runtime_1.jsx)(Form_1.Button, { onClick: () => setIsOpen(false), children: "Close" })] })) })),
+};
+exports.WithActions = {
+    render: () => ((0, jsx_runtime_1.jsx)(ModalDemo, { children: (isOpen, setIsOpen) => isOpen && ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { onClose: () => setIsOpen(false), bodyStyle: { width: 360 }, actions: [
+                { title: 'Cancel', onClick: () => setIsOpen(false), bold: false },
+                { title: 'Send', onClick: () => setIsOpen(false), bold: true },
+            ], children: [(0, jsx_runtime_1.jsx)(Text_1.H2, { style: { margin: 0 }, children: "Modal with actions" }), (0, jsx_runtime_1.jsx)(Text_1.Paragraph, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { block: true, children: "This modal has action buttons at the bottom." }) })] })) })),
+};
+exports.Fullscreen = {
+    render: () => ((0, jsx_runtime_1.jsx)(ModalDemo, { children: (isOpen, setIsOpen) => isOpen && ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { fullscreen: true, onClose: () => setIsOpen(false), children: [(0, jsx_runtime_1.jsx)(Text_1.H1, { children: "Fullscreen Modal" }), (0, jsx_runtime_1.jsx)(Text_1.Paragraph, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { block: true, children: "This modal takes up the entire screen." }) }), (0, jsx_runtime_1.jsx)(Form_1.Button, { onClick: () => setIsOpen(false), children: "Close" })] })) })),
+};
+exports.CustomWidth = {
+    render: () => ((0, jsx_runtime_1.jsx)(ModalDemo, { children: (isOpen, setIsOpen) => isOpen && ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { onClose: () => setIsOpen(false), bodyStyle: { width: 800 }, children: [(0, jsx_runtime_1.jsx)(Text_1.H2, { style: { margin: 0 }, children: "Wide Modal" }), (0, jsx_runtime_1.jsx)(Text_1.Paragraph, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { block: true, children: "This modal has a custom width of 800px." }) }), (0, jsx_runtime_1.jsx)(Form_1.Button, { onClick: () => setIsOpen(false), children: "Close" })] })) })),
+};
+exports.WithLongContent = {
+    render: () => ((0, jsx_runtime_1.jsx)(ModalDemo, { children: (isOpen, setIsOpen) => isOpen && ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { onClose: () => setIsOpen(false), children: [(0, jsx_runtime_1.jsx)(Text_1.H2, { style: { margin: 0 }, children: "Modal with Long Content" }), Array.from({ length: 10 }).map((_, index) => ((0, jsx_runtime_1.jsx)(Text_1.Paragraph, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { block: true, children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget ultricies ultricies, nunc nunc aliquam nunc, vitae aliquam nunc nunc vitae nunc." }) }, index))), (0, jsx_runtime_1.jsx)(Form_1.Button, { onClick: () => setIsOpen(false), children: "Close" })] })) })),
+};
+exports.MultipleActions = {
+    render: () => ((0, jsx_runtime_1.jsx)(ModalDemo, { children: (isOpen, setIsOpen) => isOpen && ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { onClose: () => setIsOpen(false), bodyStyle: { width: 400 }, actions: [
+                { title: 'Delete', onClick: () => setIsOpen(false), bold: false },
+                { title: 'Edit', onClick: () => setIsOpen(false), bold: false },
+                { title: 'Save', onClick: () => setIsOpen(false), bold: true },
+            ], children: [(0, jsx_runtime_1.jsx)(Text_1.H2, { style: { margin: 0 }, children: "Multiple Actions" }), (0, jsx_runtime_1.jsx)(Text_1.Paragraph, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { block: true, children: "This modal has multiple action buttons." }) })] })) })),
+};

package/lib/Text/Heading.d.ts

@@ -1,7 +1,7 @@
 import { CSSObject } from '@emotion/react';
 import { TextProps } from './Text';
 import { Theme } from '../Layout';
-interface HeadingProps<T = HTMLHeadingElement> extends TextProps<T> {
+export interface HeadingProps<T = HTMLHeadingElement> extends TextProps<T> {
     level?: string;
 }
 export declare const Heading: ({ level, ...props }: HeadingProps) => import("@emotion/react/jsx-runtime").JSX.Element;
@@ -13,5 +13,4 @@ export declare const h3Style: <T>(theme: Theme, props: HeadingProps<T>) => CSSOb
 export declare const H3: (props: HeadingProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const h4Style: <T>(theme: Theme, props: HeadingProps<T>) => CSSObject;
 export declare const H4: (props: HeadingProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
 //# sourceMappingURL=Heading.d.ts.map

package/lib/Text/Heading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/Text/Heading.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,SAAS,EAA6B,MAAM,QAAQ,CAAC;AAE7D,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAC;AAGhC,UAAU,YAAY,CAAC,CAAC,GAAG,kBAAkB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,OAAO,wBAAuB,YAAY,qDAYtD,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,SAejE,CAAC;AAEH,eAAO,MAAM,EAAE,UAAW,YAAY,qDAErC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,SAgBjE,CAAC;AAEH,eAAO,MAAM,EAAE,UAAW,YAAY,qDAErC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,SAQjE,CAAC;AAEH,eAAO,MAAM,EAAE,UAAW,YAAY,qDAErC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,SASjE,CAAC;AAEH,eAAO,MAAM,EAAE,UAAW,YAAY,qDAErC,CAAC"}
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/Text/Heading.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,SAAS,EAA6B,MAAM,QAAQ,CAAC;AAE7D,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAC;AAGhC,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,kBAAkB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,OAAO,wBAAuB,YAAY,qDAYtD,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,SAejE,CAAC;AAEH,eAAO,MAAM,EAAE,UAAW,YAAY,qDAErC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,SAgBjE,CAAC;AAEH,eAAO,MAAM,EAAE,UAAW,YAAY,qDAErC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,SAQjE,CAAC;AAEH,eAAO,MAAM,EAAE,UAAW,YAAY,qDAErC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,SASjE,CAAC;AAEH,eAAO,MAAM,EAAE,UAAW,YAAY,qDAErC,CAAC"}

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

@@ -0,0 +1,38 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ level, ...props }: import("./Heading").HeadingProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        level: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        color: {
+            control: "color";
+            description: string;
+        };
+        noWrap: {
+            control: "boolean";
+            description: string;
+        };
+        textTransform: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const AllHeadingLevels: Story;
+export declare const WithCustomColor: Story;
+export declare const NoWrapHeading: Story;
+export declare const TransformedText: Story;
+export declare const LongText: Story;
+//# sourceMappingURL=Heading.stories.d.ts.map

package/lib/Text/Heading.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.stories.d.ts","sourceRoot":"","sources":["../../src/Text/Heading.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAIrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAS9B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC"}