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

package/lib/Inputs/ErrorMessage/ErrorMessage.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ children, ...props }: import("../..").FlexBoxProps<HTMLDivElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithLink: Story;
+//# sourceMappingURL=ErrorMessage.stories.d.ts.map

package/lib/Inputs/ErrorMessage/ErrorMessage.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.stories.d.ts","sourceRoot":"","sources":["../../../src/Inputs/ErrorMessage/ErrorMessage.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAMrD,QAAA,MAAM,IAAI;;;;;;;CAO2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC"}

package/lib/Inputs/ErrorMessage/ErrorMessage.stories.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithLink = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const ErrorMessage_1 = require("./ErrorMessage");
+const Typography_1 = require("../../Typography");
+const meta = {
+    title: 'Inputs/ErrorMessage',
+    component: ErrorMessage_1.ErrorMessage,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        children: 'This is an error message',
+    },
+};
+exports.WithLink = {
+    render: () => ((0, jsx_runtime_1.jsxs)(ErrorMessage_1.ErrorMessage, { children: ["This is an error message with a ", (0, jsx_runtime_1.jsx)(Typography_1.Link, { href: "#", children: "link" })] })),
+};

package/lib/Inputs/ErrorMessage/index.d.ts

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

package/lib/Inputs/ErrorMessage/index.d.ts.map

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

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

package/lib/Inputs/Form/Form.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const Form: (props: React.HTMLProps<HTMLFormElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/Inputs/Form/Form.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,IAAI,UAAW,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,qDAW3D,CAAC"}

package/lib/Inputs/Form/Form.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Form = (props) => ((0, jsx_runtime_1.jsx)("form", { css: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        marginBottom: 0,
+        width: '100%',
+    }, ...props }));
+exports.Form = Form;

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

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (props: React.HTMLProps<HTMLFormElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=Form.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../src/Inputs/Form/Form.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAMrD,QAAA,MAAM,IAAI;;uBAJL,MAAO,SAAS;;;;;CAWQ,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC"}

package/lib/Inputs/Form/Form.stories.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Button_1 = require("../Button");
+const Form_1 = require("../Form");
+const Input_1 = require("../Input");
+const meta = {
+    title: 'Inputs/Form',
+    component: Form_1.Form,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    render: () => ((0, jsx_runtime_1.jsxs)(Form_1.Form, { onSubmit: event => {
+            event.preventDefault();
+            // eslint-disable-next-line no-console
+            console.log('Form submitted');
+        }, children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Email", type: "email", required: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "submit", children: "Submit" })] })),
+};

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

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

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

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

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

package/lib/Inputs/IconButton/IconButton.d.ts

@@ -0,0 +1,15 @@
+import { CSSObject } from '@emotion/react';
+import { Theme } from '../../Identity/Theme';
+import { TextProps } from '../../Typography';
+export declare enum IconButtonVariant {
+    PRIMARY = "primary",
+    SECONDARY = "secondary"
+}
+export interface IconButtonProps<T = HTMLButtonElement> extends TextProps<T> {
+    variant?: IconButtonVariant;
+    group?: boolean;
+    backgroundColor?: string;
+}
+export declare const iconButtonStyle: <T>(theme: Theme, props: IconButtonProps<T>) => CSSObject;
+export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<IconButtonProps<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=IconButton.d.ts.map

package/lib/Inputs/IconButton/IconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/Inputs/IconButton/IconButton.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAGzC,OAAO,EAAC,KAAK,EAAC,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAC,SAAS,EAAkB,MAAM,kBAAkB,CAAC;AAG5D,oBAAY,iBAAiB;IAC3B,OAAO,YAAY;IACnB,SAAS,cAAc;CACxB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,iBAAiB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IAC1E,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,eAAe,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,SAoF5E,CAAC;AAEH,eAAO,MAAM,UAAU,+IAIrB,CAAC"}

package/lib/Inputs/IconButton/IconButton.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconButton = exports.iconButtonStyle = exports.IconButtonVariant = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+const react_1 = require("react");
+const motions_1 = require("../../Identity/motions/motions");
+const Typography_1 = require("../../Typography");
+const util_1 = require("../../utils/util");
+var IconButtonVariant;
+(function (IconButtonVariant) {
+    IconButtonVariant["PRIMARY"] = "primary";
+    IconButtonVariant["SECONDARY"] = "secondary";
+})(IconButtonVariant || (exports.IconButtonVariant = IconButtonVariant = {}));
+const iconButtonStyle = (theme, { variant = IconButtonVariant.PRIMARY, group = false, backgroundColor, disabled = false }) => ({
+    border: 0,
+    borderRadius: '12px',
+    cursor: disabled ? 'default' : 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: '16px',
+    padding: 0,
+    outline: 'none',
+    textDecoration: 'none',
+    touchAction: 'manipulation',
+    transition: motions_1.defaultTransition,
+    width: '40px',
+    height: '32px',
+    '&:hover, &:focus': {
+        textDecoration: 'none',
+    },
+    ...(variant === IconButtonVariant.PRIMARY && {
+        backgroundColor: disabled
+            ? theme.IconButton.primaryDisabledBgColor
+            : backgroundColor || theme.IconButton.primaryBgColor,
+        border: disabled
+            ? `1px solid ${theme.IconButton.primaryDisabledBorderColor}`
+            : `1px solid ${theme.IconButton.primaryBorderColor}`,
+        svg: {
+            fill: disabled ? theme.Input.placeholderColor : theme.general.color,
+        },
+        ...(!disabled && {
+            '&:hover, &:focus': {
+                backgroundColor: theme.IconButton.hoverPrimaryBgColor,
+            },
+            '&:hover': {
+                borderColor: theme.IconButton.primaryHoverBorderColor,
+            },
+            '&:focus': {
+                borderColor: theme.IconButton.focusBorderColor,
+                svg: {
+                    fill: theme.IconButton.focusBorderColor,
+                },
+            },
+            '&:active': {
+                backgroundColor: theme.IconButton.activePrimaryBgColor,
+                borderColor: theme.IconButton.focusBorderColor,
+                svg: {
+                    fill: theme.general.primaryColor,
+                },
+            },
+        }),
+    }),
+    ...(variant === IconButtonVariant.SECONDARY && {
+        backgroundColor: 'inherit',
+        svg: {
+            fill: disabled ? theme.Input.placeholderColor : theme.general.color,
+        },
+        ...(!disabled && {
+            '&:hover, &:focus, &:active': {
+                svg: {
+                    fill: theme.general.primaryColor,
+                },
+            },
+            '&:focus': {
+                border: `1px solid ${theme.IconButton.focusBorderColor}`,
+            },
+            '&:active': {
+                border: `1px solid ${theme.IconButton.secondaryActiveBorderColor}`,
+                backgroundColor: theme.Input.backgroundColor,
+            },
+        }),
+    }),
+    ...(group && {
+        borderRadius: '0',
+        '&:first-of-type': {
+            borderRadius: '12px 0 0 12px',
+        },
+        '&:last-of-type': {
+            borderRadius: '0 12px 12px 0',
+        },
+    }),
+});
+exports.iconButtonStyle = iconButtonStyle;
+exports.IconButton = (0, react_1.forwardRef)(({ children, ...props }, ref) => ((0, jsx_runtime_1.jsx)("button", { ref: ref, css: (theme) => (0, exports.iconButtonStyle)(theme, props), ...filterButtonProps(props), children: children })));
+exports.IconButton.displayName = 'IconButton';
+const filterButtonProps = (props) => {
+    return (0, util_1.filterProps)((0, Typography_1.filterTextProps)(props), ['backgroundColor']);
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../../src/Inputs/IconButton/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/Inputs/IconButton/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("../../DataDisplay/Icon");
+const colors_1 = require("../../Identity/colors/colors");
+const meta = {
+    component: IconButton_1.IconButton,
+    title: 'Inputs/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/Inputs/IconButton/index.d.ts

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

package/lib/Inputs/IconButton/index.d.ts.map

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

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

package/lib/Inputs/IndicatorRangeInput/IndicatorRangeInput.d.ts

@@ -0,0 +1,16 @@
+import { HTMLProps, PropsWithRef } from 'react';
+import { CSSObject } from '@emotion/react';
+type DataListOptions = {
+    value: number;
+    label: string;
+    heading?: string;
+};
+export interface IndicatorRangeInputProps<T = HTMLInputElement> extends PropsWithRef<HTMLProps<T>> {
+    label?: string;
+    wrapperCSS?: CSSObject;
+    onOptionClick?: (value: number) => void;
+    dataListOptions: DataListOptions[];
+}
+export declare const IndicatorRangeInput: import("react").ForwardRefExoticComponent<Omit<IndicatorRangeInputProps<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=IndicatorRangeInput.d.ts.map

package/lib/Inputs/IndicatorRangeInput/IndicatorRangeInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IndicatorRangeInput.d.ts","sourceRoot":"","sources":["../../../src/Inputs/IndicatorRangeInput/IndicatorRangeInput.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAE,YAAY,EAAsB,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAOzC,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,wBAAwB,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAChG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,EAAE,eAAe,EAAE,CAAC;CACpC;AAED,eAAO,MAAM,mBAAmB,sJAmG/B,CAAC"}

package/lib/Inputs/IndicatorRangeInput/IndicatorRangeInput.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IndicatorRangeInput = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+const react_1 = require("react");
+const IndicatorRangeInput_styles_1 = require("./IndicatorRangeInput.styles");
+const InputLabel_1 = require("../InputLabel");
+exports.IndicatorRangeInput = (0, react_1.forwardRef)(({ id = Math.random().toString(), label, min = '0', max = '100', value = '0', onChange, onOptionClick, wrapperCSS, dataListOptions = [], ...inputProps }, ref) => {
+    const minNum = Number(min);
+    const isCustomSlider = !!dataListOptions.length;
+    const listLength = dataListOptions.length - 1;
+    const valueNum = Number(value);
+    const maxNum = isCustomSlider ? Number(listLength) : Number(max);
+    const backgroundSize = (0, react_1.useMemo)(() => {
+        if (isCustomSlider && valueNum === 0) {
+            const firstOptionThumbPosition = `calc(((100% - 10px) / (${listLength} * 2) - 4px) / 2)`;
+            return `${firstOptionThumbPosition} 100%`;
+        }
+        return `${((valueNum - minNum) * 100) / (maxNum - minNum)}% 100%`;
+    }, [isCustomSlider, valueNum, minNum, maxNum, listLength]);
+    const valueText = dataListOptions[valueNum]?.heading
+        ? `${dataListOptions[valueNum].label} (${dataListOptions[valueNum].heading})`
+        : dataListOptions[valueNum].label;
+    return ((0, jsx_runtime_1.jsxs)("div", { css: { wrapperCSS, width: '100%' }, children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, { css: (theme) => ({ fontSize: theme.fontSizes.base }), htmlFor: id, children: label })), (0, jsx_runtime_1.jsxs)("div", { css: IndicatorRangeInput_styles_1.containerStyles, children: [isCustomSlider && ((0, jsx_runtime_1.jsx)("div", { css: { position: 'relative', display: 'flex', marginBottom: '20px' }, children: dataListOptions.map((dataListOption, index) => ((0, jsx_runtime_1.jsx)("div", { css: (theme) => (0, IndicatorRangeInput_styles_1.headingStyle)(listLength, theme), onClick: () => {
+                                if (dataListOption?.heading) {
+                                    onOptionClick(index);
+                                }
+                            }, children: dataListOption?.heading }, dataListOption.value))) })), (0, jsx_runtime_1.jsx)("input", { ref: ref, css: (theme) => (0, IndicatorRangeInput_styles_1.rangeStyles)(backgroundSize, valueNum, listLength, isCustomSlider, theme), id: id, name: id, min: minNum, max: maxNum, value: value, onChange: onChange, type: "range", list: "tickMarks", ...(isCustomSlider && {
+                            'aria-valuetext': valueText,
+                        }), ...inputProps }), isCustomSlider && ((0, jsx_runtime_1.jsx)("datalist", { id: "tickMarks", css: (theme) => (0, IndicatorRangeInput_styles_1.dataListOption)(listLength, theme), children: dataListOptions.map((dataListOption, index) => ((0, jsx_runtime_1.jsx)("option", { value: dataListOption.value, label: dataListOption.label, onClick: () => onOptionClick(index) }, index))) }))] })] }));
+});
+exports.IndicatorRangeInput.displayName = 'IndicatorRangeInput';

package/lib/Inputs/IndicatorRangeInput/IndicatorRangeInput.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./IndicatorRangeInput").IndicatorRangeInputProps<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=IndicatorRangeInput.stories.d.ts.map

package/lib/Inputs/IndicatorRangeInput/IndicatorRangeInput.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IndicatorRangeInput.stories.d.ts","sourceRoot":"","sources":["../../../src/Inputs/IndicatorRangeInput/IndicatorRangeInput.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAcrD,QAAA,MAAM,IAAI;;;;;;;CAOkC,CAAC;AAE7C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC"}

package/lib/Inputs/IndicatorRangeInput/IndicatorRangeInput.stories.js

@@ -0,0 +1,51 @@
+"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.Default = void 0;
+const IndicatorRangeInput_1 = require("./IndicatorRangeInput");
+const dataListOptions = [
+    { value: 10, label: '10px', heading: 'Small' },
+    { value: 12, label: '12px' },
+    { value: 14, label: '14px' },
+    { value: 16, label: '16px', heading: 'Default' },
+    { value: 18, label: '18px' },
+    { value: 20, label: '20px' },
+    { value: 24, label: '24px', heading: 'Large' },
+];
+const meta = {
+    title: 'Inputs/IndicatorRangeInput',
+    component: IndicatorRangeInput_1.IndicatorRangeInput,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        label: 'Font size',
+        value: 3,
+        dataListOptions,
+        // eslint-disable-next-line no-console
+        onChange: event => console.log('Value changed:', event.currentTarget.value),
+        // eslint-disable-next-line no-console
+        onOptionClick: value => console.log('Option clicked:', value),
+    },
+};

package/lib/Inputs/IndicatorRangeInput/IndicatorRangeInput.styles.d.ts

@@ -0,0 +1,7 @@
+import { CSSObject } from '@emotion/react/dist/emotion-react.cjs';
+import { Theme } from '../../Identity/Theme';
+export declare const rangeStyles: (backgroundSize: string, value: number, listLength: number, isCustomSlider: boolean, theme: Theme) => CSSObject;
+export declare const headingStyle: (listLength: number, theme: Theme) => CSSObject;
+export declare const dataListOption: (listLength: number, theme: Theme) => CSSObject;
+export declare const containerStyles: CSSObject;
+//# sourceMappingURL=IndicatorRangeInput.styles.d.ts.map

package/lib/Inputs/IndicatorRangeInput/IndicatorRangeInput.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IndicatorRangeInput.styles.d.ts","sourceRoot":"","sources":["../../../src/Inputs/IndicatorRangeInput/IndicatorRangeInput.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,uCAAuC,CAAC;AAEhE,OAAO,EAAC,KAAK,EAAC,MAAM,sBAAsB,CAAC;AAM3C,eAAO,MAAM,WAAW,mBACN,MAAM,SACf,MAAM,cACD,MAAM,kBACF,OAAO,SAChB,KAAK,KACX,SA8CF,CAAC;AAEF,eAAO,MAAM,YAAY,eAAgB,MAAM,SAAS,KAAK,KAAG,SAmB/D,CAAC;AAEF,eAAO,MAAM,cAAc,eAAgB,MAAM,SAAS,KAAK,KAAG,SA2CjE,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,SAI7B,CAAC"}