@wireapp/react-ui-kit 9.69.4 → 9.69.6

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

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

package/lib/Inputs/InputLabel/InputLabel.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Invalid = exports.WithInput = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const InputLabel_1 = require("./InputLabel");
+const Input_1 = require("../Input");
+const meta = {
+    title: 'Inputs/InputLabel',
+    component: InputLabel_1.InputLabel,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        children: 'Label Text',
+    },
+};
+exports.WithInput = {
+    args: {
+        children: 'Email address',
+        htmlFor: 'example-input',
+    },
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Story, {}), (0, jsx_runtime_1.jsx)(Input_1.Input, { id: "example-input", type: "email", placeholder: "Enter email" })] })),
+    ],
+};
+exports.Invalid = {
+    args: {
+        children: 'Invalid Label',
+        markInvalid: true,
+    },
+};

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

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

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

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

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

package/lib/Inputs/InputSubmitCombo/InputSubmitCombo.d.ts

@@ -0,0 +1,5 @@
+import { InputProps } from '../Input';
+export type InputSubmitComboProps<T = HTMLDivElement> = InputProps<T>;
+export declare const INPUT_SUBMIT_COMBO_CLASSNAME = "inputSubmitCombo";
+export declare const InputSubmitCombo: ({ children, ...props }: InputSubmitComboProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InputSubmitCombo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputSubmitCombo.d.ts","sourceRoot":"","sources":["../../../src/Inputs/InputSubmitCombo/InputSubmitCombo.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAA+B,UAAU,EAAa,MAAM,UAAU,CAAC;AAE9E,MAAM,MAAM,qBAAqB,CAAC,CAAC,GAAG,cAAc,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC;AAEtE,eAAO,MAAM,4BAA4B,qBAAqB,CAAC;AAE/D,eAAO,MAAM,gBAAgB,2BAA0B,qBAAqB,qDA8B3E,CAAC"}

package/lib/Inputs/InputSubmitCombo/InputSubmitCombo.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputSubmitCombo = exports.INPUT_SUBMIT_COMBO_CLASSNAME = 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 Identity_1 = require("../../Identity");
+const Input_1 = require("../Input");
+exports.INPUT_SUBMIT_COMBO_CLASSNAME = 'inputSubmitCombo';
+const InputSubmitCombo = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: exports.INPUT_SUBMIT_COMBO_CLASSNAME, css: (theme) => ({
+        ...(0, Input_1.inputStyle)(theme, props),
+        '&:focus-within': {
+            boxShadow: `0 0 0 1px ${Identity_1.COLOR_V2.BLUE}`,
+        },
+        [`.${Input_1.INPUT_GROUP}`]: {
+            flexGrow: 1,
+        },
+        [`.${Input_1.INPUT_CLASSNAME}`]: {
+            '&:focus, &:invalid:not(:focus)': {
+                boxShadow: 'none',
+            },
+            boxShadow: 'none',
+            margin: '0 8px 0 0',
+            padding: '0 0 0 16px',
+        },
+        alignItems: 'center',
+        display: 'flex',
+        height: '49px', // needs a bit more space to not overlap with the `boxShadow` from `:focus`
+        justifyContent: 'space-between',
+        marginBottom: '4px',
+        paddingLeft: 0,
+    }), ...props, children: children }));
+exports.InputSubmitCombo = InputSubmitCombo;

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

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ children, ...props }: import("./InputSubmitCombo").InputSubmitComboProps) => 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 WithMultipleButtons: Story;
+export declare const Invalid: Story;
+//# sourceMappingURL=InputSubmitCombo.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputSubmitCombo.stories.d.ts","sourceRoot":"","sources":["../../../src/Inputs/InputSubmitCombo/InputSubmitCombo.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAQrD,QAAA,MAAM,IAAI;;;;;;;CAO+B,CAAC;AAE1C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAYjC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC"}

package/lib/Inputs/InputSubmitCombo/InputSubmitCombo.stories.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Invalid = exports.WithMultipleButtons = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const InputSubmitCombo_1 = require("./InputSubmitCombo");
+const Icon_1 = require("../../DataDisplay/Icon");
+const Input_1 = require("../Input");
+const RoundIconButton_1 = require("../RoundIconButton");
+const meta = {
+    title: 'Inputs/InputSubmitCombo',
+    component: InputSubmitCombo_1.InputSubmitCombo,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    render: () => ((0, jsx_runtime_1.jsxs)(InputSubmitCombo_1.InputSubmitCombo, { children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Type a message...", name: "message" }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { type: "submit", children: (0, jsx_runtime_1.jsx)(Icon_1.ArrowIcon, {}) })] })),
+};
+exports.WithMultipleButtons = {
+    render: () => ((0, jsx_runtime_1.jsxs)(InputSubmitCombo_1.InputSubmitCombo, { children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Type a message...", name: "message" }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.AttachmentIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { type: "submit", children: (0, jsx_runtime_1.jsx)(Icon_1.ArrowIcon, {}) })] })),
+};
+exports.Invalid = {
+    render: () => ((0, jsx_runtime_1.jsxs)(InputSubmitCombo_1.InputSubmitCombo, { markInvalid: true, children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Invalid input", name: "message", markInvalid: true }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { type: "submit", children: (0, jsx_runtime_1.jsx)(Icon_1.ArrowIcon, {}) })] })),
+};

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

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

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

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

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

package/lib/Inputs/RangeInput/RangeInput.d.ts

@@ -0,0 +1,10 @@
+import { CSSObject } from '@emotion/react';
+import { TextProps } from '../../Typography';
+export interface RangeInputProps<T = HTMLInputElement> extends TextProps<T> {
+    label?: string;
+    minValueLabel?: string;
+    maxValueLabel?: string;
+    wrapperCSS?: CSSObject;
+}
+export declare const RangeInput: import("react").ForwardRefExoticComponent<Omit<RangeInputProps<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=RangeInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RangeInput.d.ts","sourceRoot":"","sources":["../../../src/Inputs/RangeInput/RangeInput.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAUzC,OAAO,EAAC,SAAS,EAAC,MAAM,kBAAkB,CAAC;AAG3C,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,6IAgDtB,CAAC"}

package/lib/Inputs/RangeInput/RangeInput.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RangeInput = 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 RangeInput_styles_1 = require("./RangeInput.styles");
+const InputLabel_1 = require("../InputLabel");
+exports.RangeInput = (0, react_1.forwardRef)(({ id = Math.random().toString(), label, minValueLabel, maxValueLabel, min = '0', max = '100', value = '0', onChange, wrapperCSS, ...inputProps }, ref) => {
+    const minNum = Number(min);
+    const maxNum = Number(max);
+    const valueNum = Number(value);
+    const backgroundSize = `${((valueNum - minNum) * 100) / (maxNum - minNum)}% 100%`;
+    return ((0, jsx_runtime_1.jsxs)("div", { css: wrapperCSS, children: [label && (0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, { htmlFor: id, children: label }), (0, jsx_runtime_1.jsxs)("div", { css: RangeInput_styles_1.rangeInputWrapperStyles, children: [minValueLabel && ((0, jsx_runtime_1.jsx)("span", { css: (theme) => (0, RangeInput_styles_1.getValueLabelStyles)(theme, RangeInput_styles_1.ValueLabelPosition.LEFT), children: minValueLabel })), maxValueLabel && ((0, jsx_runtime_1.jsx)("span", { css: (theme) => (0, RangeInput_styles_1.getValueLabelStyles)(theme, RangeInput_styles_1.ValueLabelPosition.RIGHT), children: maxValueLabel })), (0, jsx_runtime_1.jsx)("input", { ref: ref, css: (theme) => (0, RangeInput_styles_1.getImageCropZoomInputStyles)(theme, backgroundSize), id: id, name: id, min: min, max: max, value: value, onChange: onChange, type: "range", ...inputProps })] })] }));
+});
+exports.RangeInput.displayName = 'RangeInput';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RangeInput.stories.d.ts","sourceRoot":"","sources":["../../../src/Inputs/RangeInput/RangeInput.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAIrD,QAAA,MAAM,IAAI;;;;;;;CAOyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC"}

package/lib/Inputs/RangeInput/RangeInput.stories.js

@@ -0,0 +1,62 @@
+"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.CustomRange = exports.Disabled = exports.WithSteps = exports.Default = void 0;
+const RangeInput_1 = require("./RangeInput");
+const meta = {
+    title: 'Inputs/RangeInput',
+    component: RangeInput_1.RangeInput,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        defaultValue: 50,
+        min: 0,
+        max: 100,
+    },
+};
+exports.WithSteps = {
+    args: {
+        defaultValue: 5,
+        min: 0,
+        max: 10,
+        step: 1,
+    },
+};
+exports.Disabled = {
+    args: {
+        defaultValue: 50,
+        min: 0,
+        max: 100,
+        disabled: true,
+    },
+};
+exports.CustomRange = {
+    args: {
+        defaultValue: 0,
+        min: -50,
+        max: 50,
+        step: 10,
+    },
+};

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

@@ -0,0 +1,10 @@
+import { CSSObject } from '@emotion/react';
+import { Theme } from '../../Identity/Theme';
+export declare const rangeInputWrapperStyles: CSSObject;
+export declare const getImageCropZoomInputStyles: (theme: Theme, backgroundSize: `${number}% ${number}%`) => CSSObject;
+export declare enum ValueLabelPosition {
+    LEFT = "left",
+    RIGHT = "right"
+}
+export declare const getValueLabelStyles: (theme: Theme, position: ValueLabelPosition) => CSSObject;
+//# sourceMappingURL=RangeInput.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RangeInput.styles.d.ts","sourceRoot":"","sources":["../../../src/Inputs/RangeInput/RangeInput.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAGzC,OAAO,EAAC,KAAK,EAAC,MAAM,sBAAsB,CAAC;AAG3C,eAAO,MAAM,uBAAuB,EAAE,SAGrC,CAAC;AAKF,eAAO,MAAM,2BAA2B,UAAW,KAAK,kBAAkB,GAAG,MAAM,KAAK,MAAM,GAAG,KAAG,SA4BlG,CAAC;AAEH,oBAAY,kBAAkB;IAC5B,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,eAAO,MAAM,mBAAmB,UAAW,KAAK,YAAY,kBAAkB,KAAG,SAO/E,CAAC"}

package/lib/Inputs/RangeInput/RangeInput.styles.js

@@ -0,0 +1,71 @@
+"use strict";
+/*
+ * 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/.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getValueLabelStyles = exports.ValueLabelPosition = exports.getImageCropZoomInputStyles = exports.rangeInputWrapperStyles = void 0;
+const Identity_1 = require("../../Identity");
+const util_1 = require("../../utils/util");
+exports.rangeInputWrapperStyles = {
+    position: 'relative',
+    marginTop: '19px',
+};
+const thumbSelectors = ['&::-webkit-slider-thumb', '&::-moz-range-thumb', '&::-ms-thumb'];
+const sliderSelectors = ['&::-webkit-slider-runnable-track', '&::-moz-range-track', '&::-ms-track'];
+const getImageCropZoomInputStyles = (theme, backgroundSize) => ({
+    display: 'block',
+    '-webkit-appearance': 'none',
+    width: '100%',
+    height: '8px',
+    background: Identity_1.COLOR_V2.GRAY_60,
+    borderRadius: '4px',
+    backgroundImage: `linear-gradient(${theme.general.primaryColor}, ${theme.general.primaryColor})`,
+    backgroundSize: backgroundSize || '0% 100%',
+    backgroundRepeat: 'no-repeat',
+    ...(0, util_1.manySelectors)(thumbSelectors, {
+        '-webkit-appearance': 'none',
+        height: '18px',
+        width: '18px',
+        borderRadius: '50%',
+        background: Identity_1.COLOR_V2.GRAY_80,
+        cursor: 'pointer',
+        border: 'none',
+        boxShadow: 'none',
+    }),
+    ...(0, util_1.manySelectors)(sliderSelectors, {
+        '-webkit-appearance': 'none',
+        boxShadow: 'none',
+        border: 'none',
+        background: 'transparent',
+    }),
+});
+exports.getImageCropZoomInputStyles = getImageCropZoomInputStyles;
+var ValueLabelPosition;
+(function (ValueLabelPosition) {
+    ValueLabelPosition["LEFT"] = "left";
+    ValueLabelPosition["RIGHT"] = "right";
+})(ValueLabelPosition || (exports.ValueLabelPosition = ValueLabelPosition = {}));
+const getValueLabelStyles = (theme, position) => ({
+    pointerEvents: 'none',
+    bottom: '100%',
+    fontSize: theme.fontSizes.base,
+    fontWeight: 400,
+    position: 'absolute',
+    [position]: '4px',
+});
+exports.getValueLabelStyles = getValueLabelStyles;

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

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

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

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

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

package/lib/Inputs/RoundIconButton/RoundIconButton.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { CSSObject } from '@emotion/react';
+import { Theme } from '../../Identity/Theme';
+import { ButtonProps } from '../Button';
+export interface RoundIconButtonProps<T = HTMLButtonElement> extends ButtonProps<T> {
+}
+export declare const roundIconButtonStyle: <T>(theme: Theme, props: RoundIconButtonProps<T>) => CSSObject;
+export declare const RoundIconButton: React.FC<RoundIconButtonProps>;
+//# sourceMappingURL=RoundIconButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RoundIconButton.d.ts","sourceRoot":"","sources":["../../../src/Inputs/RoundIconButton/RoundIconButton.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,OAAO,EAAC,KAAK,EAAC,MAAM,sBAAsB,CAAC;AAE3C,OAAO,EAAC,WAAW,EAAoB,MAAM,WAAW,CAAC;AAGzD,MAAM,WAAW,oBAAoB,CAAC,CAAC,GAAG,iBAAiB,CAAE,SAAQ,WAAW,CAAC,CAAC,CAAC;CAAG;AAEtF,eAAO,MAAM,oBAAoB,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,KAAK,SAYtF,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAI1D,CAAC"}

package/lib/Inputs/RoundIconButton/RoundIconButton.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RoundIconButton = exports.roundIconButtonStyle = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Identity_1 = require("../../Identity");
+const utils_1 = require("../../utils");
+const Button_1 = require("../Button");
+const Button_styles_1 = require("../Button/Button.styles");
+const roundIconButtonStyle = (theme, props) => ({
+    ...(0, Button_styles_1.buttonStyle)(theme, props),
+    alignItems: 'center',
+    borderRadius: '50%',
+    display: 'flex',
+    height: `${props.size}px`,
+    justifyContent: 'center',
+    lineHeight: 'initial',
+    margin: '0 auto',
+    minWidth: `${props.size}px`,
+    padding: 0,
+    width: `${props.size}px`,
+});
+exports.roundIconButtonStyle = roundIconButtonStyle;
+const RoundIconButton = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)("button", { css: (theme) => (0, exports.roundIconButtonStyle)(theme, props), ...(0, Button_1.filterButtonProps)(props), children: (0, utils_1.childrenWithDefaultProps)({ children, defaultProps: { color: Identity_1.COLOR.WHITE } }) }));
+exports.RoundIconButton = RoundIconButton;
+exports.RoundIconButton.defaultProps = {
+    backgroundColor: Identity_1.COLOR.BLUE,
+    size: 32,
+};

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

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./RoundIconButton").RoundIconButtonProps<HTMLButtonElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const IconGallery: Story;
+export declare const Disabled: Story;
+//# sourceMappingURL=RoundIconButton.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RoundIconButton.stories.d.ts","sourceRoot":"","sources":["../../../src/Inputs/RoundIconButton/RoundIconButton.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAoBrD,QAAA,MAAM,IAAI;;;;;;;CAO8B,CAAC;AAEzC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAyCzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC"}

package/lib/Inputs/RoundIconButton/RoundIconButton.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Disabled = exports.IconGallery = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const RoundIconButton_1 = require("./RoundIconButton");
+const Icon_1 = require("../../DataDisplay/Icon");
+const Identity_1 = require("../../Identity");
+const meta = {
+    title: 'Inputs/RoundIconButton',
+    component: RoundIconButton_1.RoundIconButton,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        children: (0, jsx_runtime_1.jsx)(Icon_1.ArrowIcon, {}),
+    },
+};
+exports.IconGallery = {
+    render: () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '8px', flexWrap: 'wrap' }, children: [(0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.ArrowIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.AttachmentIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.CheckIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.CloseIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.GifIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.ImageIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.PingIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.PlaneIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.ProfileIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.TeamIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.TimedIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.TrashIcon, { color: Identity_1.COLOR.RED }) })] })),
+};
+exports.Disabled = {
+    args: {
+        children: (0, jsx_runtime_1.jsx)(Icon_1.ArrowIcon, {}),
+        disabled: true,
+    },
+};

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

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

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

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

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