@wireapp/react-ui-kit 9.69.4 → 9.69.5

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

@@ -0,0 +1,41 @@
+import type { StoryObj } from '@storybook/react';
+import { type ComboboxSelectProps } from './ComboboxSelect';
+declare const meta: {
+    title: string;
+    component: ({ id, options, value, onChange, isDisabled, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, labelVisuallyHidden, required, menuPortalTarget, menuPosition, menuListCSS, isLoading, loadingMessage, closeMenuOnSelect, }: ComboboxSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        id: string;
+        options: import("./ComboboxSelect").ComboboxSelectOption[];
+        value?: import("./ComboboxSelect").ComboboxSelectOption | import("./ComboboxSelect").ComboboxSelectOption[];
+        onChange?: (value: import("./ComboboxSelect").ComboboxSelectOption | import("./ComboboxSelect").ComboboxSelectOption[]) => void;
+        isDisabled?: boolean;
+        placeholder?: string;
+        dataUieName?: string;
+        onCreateOption?: (inputValue: string) => void;
+        createOptionLabel?: (inputValue: string) => string;
+        noOptionsMessage: string;
+        label?: string;
+        labelVisuallyHidden?: boolean;
+        required?: boolean;
+        menuPortalTarget?: HTMLElement;
+        menuPosition?: import("react-select").MenuPosition;
+        menuListCSS?: import("@emotion/serialize").CSSObject;
+        isLoading?: boolean;
+        loadingMessage?: string;
+        closeMenuOnSelect?: boolean;
+    }>) => import("@emotion/react/jsx-runtime").JSX.Element)[];
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const Disabled: Story;
+export declare const Creatable: Story;
+export declare const WithLabel: Story;
+export declare const Loading: Story;
+export declare const WithLabelVisuallyHidden: Story;
+//# sourceMappingURL=ComboboxSelect.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxSelect.stories.d.ts","sourceRoot":"","sources":["../../../src/Inputs/ComboboxSelect/ComboboxSelect.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAErD,OAAO,EAAiB,KAAK,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAU1E,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAc6B,CAAC;AAExC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AA8BF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAQrC,CAAC"}

package/lib/Inputs/ComboboxSelect/ComboboxSelect.stories.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithLabelVisuallyHidden = exports.Loading = exports.WithLabel = exports.Creatable = exports.Disabled = exports.WithValue = 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 ComboboxSelect_1 = require("./ComboboxSelect");
+const initialOptions = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+];
+const meta = {
+    title: 'Inputs/ComboboxSelect',
+    component: ComboboxSelect_1.ComboboxSelect,
+    parameters: {
+        layout: 'centered',
+    },
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)("div", { style: { width: '476px' }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        id: 'default-select',
+        options: initialOptions,
+        placeholder: 'Select options...',
+        dataUieName: 'default-select',
+        noOptionsMessage: 'No options available',
+    },
+};
+exports.WithValue = {
+    args: {
+        id: 'with-value-select',
+        options: initialOptions,
+        value: [initialOptions[0], initialOptions[1]],
+        placeholder: 'Select options...',
+        dataUieName: 'with-value-select',
+        noOptionsMessage: 'No options available',
+    },
+};
+exports.Disabled = {
+    args: {
+        id: 'disabled-select',
+        options: initialOptions,
+        isDisabled: true,
+        placeholder: 'Select options...',
+        dataUieName: 'disabled-select',
+        noOptionsMessage: 'No options available',
+    },
+};
+const CreatableSelectWrapper = (args) => {
+    const [options, setOptions] = (0, react_1.useState)(initialOptions);
+    const [selectedValue, setSelectedValue] = (0, react_1.useState)([]);
+    const handleCreateOption = (inputValue) => {
+        const newOption = {
+            value: inputValue.toLowerCase().replace(/\W/g, ''),
+            label: inputValue,
+        };
+        setOptions(prev => [...prev, newOption]);
+        setSelectedValue(prev => [...prev, newOption]);
+    };
+    const handleChange = (value) => {
+        setSelectedValue(Array.isArray(value) ? value : [value]);
+    };
+    return ((0, jsx_runtime_1.jsx)(ComboboxSelect_1.ComboboxSelect, { ...args, options: options, value: selectedValue, onChange: handleChange, onCreateOption: handleCreateOption }));
+};
+exports.Creatable = {
+    args: {
+        id: 'creatable-select',
+        options: initialOptions,
+        placeholder: 'Select or create options...',
+        dataUieName: 'creatable-select',
+        noOptionsMessage: 'No options available',
+        required: true,
+    },
+    render: args => (0, jsx_runtime_1.jsx)(CreatableSelectWrapper, { ...args }),
+};
+exports.WithLabel = {
+    args: {
+        id: 'with-label-select',
+        label: 'Select options',
+        options: initialOptions,
+        noOptionsMessage: 'No options available',
+    },
+};
+exports.Loading = {
+    args: {
+        id: 'loading-select',
+        isLoading: true,
+        options: [],
+        noOptionsMessage: 'No options available',
+        loadingMessage: 'Loading options...',
+    },
+};
+exports.WithLabelVisuallyHidden = {
+    args: {
+        id: 'with-label-visually-hidden-select',
+        label: 'Select options',
+        labelVisuallyHidden: true,
+        options: initialOptions,
+        noOptionsMessage: 'No options available',
+    },
+};

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

@@ -0,0 +1,24 @@
+import { CSSObject } from '@emotion/react';
+import { StylesConfig } from 'react-select';
+import { Theme } from '../../Identity/Theme';
+interface SelectStylesParams {
+    theme: Theme;
+    markInvalid?: boolean;
+    menuPosition?: 'absolute' | 'relative';
+    controlCSS?: CSSObject;
+    containerCSS?: CSSObject;
+    menuListCSS?: CSSObject;
+}
+export declare const wrapperStyles: CSSObject;
+export declare const selectStyles: ({ theme, markInvalid, controlCSS, containerCSS, menuListCSS, }: SelectStylesParams) => StylesConfig;
+export declare const noOptionsMessageStyles: {
+    padding: string;
+};
+export declare const loadingMessageStyles: {
+    padding: string;
+};
+export declare const labelCSS: ({ isVisuallyHidden }: {
+    isVisuallyHidden: boolean;
+}) => CSSObject;
+export {};
+//# sourceMappingURL=ComboboxSelect.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxSelect.styles.d.ts","sourceRoot":"","sources":["../../../src/Inputs/ComboboxSelect/ComboboxSelect.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAC,YAAY,EAAC,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAC,KAAK,EAAC,MAAM,sBAAsB,CAAC;AAa3C,UAAU,kBAAkB;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACvC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,eAAO,MAAM,aAAa,EAAE,SAO3B,CAAC;AAEF,eAAO,MAAM,YAAY,mEAMtB,kBAAkB,KAAG,YAqFtB,CAAC;AAEH,eAAO,MAAM,sBAAsB;;CAElC,CAAC;AAEF,eAAO,MAAM,oBAAoB;;CAEhC,CAAC;AAEF,eAAO,MAAM,QAAQ,yBAAwB;IAAC,gBAAgB,EAAE,OAAO,CAAA;CAAC,cAA+C,CAAC"}

package/lib/Inputs/ComboboxSelect/ComboboxSelect.styles.js

@@ -0,0 +1,124 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2024 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.labelCSS = exports.loadingMessageStyles = exports.noOptionsMessageStyles = exports.selectStyles = exports.wrapperStyles = void 0;
+const utils_1 = require("../../utils");
+const BaseSelect_styles_1 = require("../Select/BaseSelect/BaseSelect.styles");
+exports.wrapperStyles = {
+    marginBottom: '20px',
+    width: '100%',
+    position: 'relative',
+    '& .select__menu': {
+        position: 'absolute',
+    },
+};
+const selectStyles = ({ theme, markInvalid = false, controlCSS = {}, containerCSS = {}, menuListCSS = {}, }) => ({
+    indicatorSeparator: () => (0, BaseSelect_styles_1.baseIndicatorSeparatorStyles)(),
+    indicatorsContainer: provided => provided,
+    container: provided => ({
+        ...provided,
+        ...(0, BaseSelect_styles_1.baseContainerStyles)(containerCSS),
+    }),
+    control: (_, { isDisabled, selectProps }) => (0, BaseSelect_styles_1.baseControlStyles)({ theme, isDisabled, markInvalid, selectProps, controlCSS }),
+    dropdownIndicator: (provided, selectProps) => ({
+        ...provided,
+        ...(0, BaseSelect_styles_1.baseDropdownIndicatorStyles)({ theme, selectProps }),
+    }),
+    menuList: provided => ({
+        ...provided,
+        ...(0, BaseSelect_styles_1.baseMenuListStyles)(),
+        ...menuListCSS,
+    }),
+    option: (provided, { isDisabled, isFocused, isSelected, isMulti }) => ({
+        ...provided,
+        ...(0, BaseSelect_styles_1.baseOptionStyles)({ theme, isDisabled, isFocused, isSelected, isMulti }),
+        padding: '10px 16px',
+        fontWeight: 400,
+        '&:not(:last-of-type)': {
+            borderBottom: `1px solid ${theme.Select.borderColor}`,
+        },
+        '&:first-of-type': {
+            borderRadius: '0',
+        },
+        '&:last-of-type': {
+            borderRadius: '0',
+        },
+    }),
+    singleValue: (provided, selectProps) => ({
+        ...provided,
+        ...(0, BaseSelect_styles_1.baseSingleValueStyles)({ theme, selectProps }),
+    }),
+    menu: provided => ({
+        ...provided,
+        ...(0, BaseSelect_styles_1.baseMenuStyles)({ theme, menuPosition: 'absolute' }),
+        width: '100%',
+        zIndex: 'var(--z-index-modal)',
+        position: 'absolute',
+    }),
+    menuPortal: provided => ({
+        ...provided,
+        zIndex: 'var(--z-index-modal)',
+    }),
+    multiValue: provided => ({
+        ...provided,
+        backgroundColor: theme.Select.optionHoverBg,
+        borderRadius: 8,
+        margin: 4,
+        fontSize: '14px',
+        height: '24px',
+    }),
+    multiValueLabel: provided => ({
+        ...provided,
+        color: theme.general.primaryColor,
+        fontWeight: 500,
+        padding: '0 8px 0 0',
+    }),
+    multiValueRemove: provided => ({
+        ...provided,
+        color: theme.general.primaryColor,
+        paddingLeft: 2,
+        paddingRight: 6,
+        ':hover': {
+            backgroundColor: 'transparent',
+            color: theme.general.primaryColor,
+        },
+        '& svg': {
+            fill: 'currentColor',
+        },
+    }),
+    valueContainer: provided => ({
+        ...provided,
+        padding: 0,
+        width: '100%',
+        display: 'flex',
+        flexWrap: 'wrap',
+        maxHeight: '72px',
+        overflowY: 'auto',
+    }),
+});
+exports.selectStyles = selectStyles;
+exports.noOptionsMessageStyles = {
+    padding: '8px 12px',
+};
+exports.loadingMessageStyles = {
+    padding: '8px 12px',
+};
+const labelCSS = ({ isVisuallyHidden }) => (isVisuallyHidden ? (0, utils_1.visuallyHidden)() : {});
+exports.labelCSS = labelCSS;

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

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

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

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

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

package/lib/Inputs/DropFileInput/DropFileInput.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { CSSObject } from '@emotion/react';
+import { Theme } from '../../Identity/Theme';
+import { TextProps } from '../../Typography';
+export interface DropFileInputProps<T = HTMLInputElement> extends TextProps<T> {
+    onFilesUploaded: (files: File[]) => void;
+    onInvalidFilesDropError: () => void;
+    labelText: string;
+    headingText: string;
+    description?: string;
+    dropFileZoneWrapperCSS?: CSSObject;
+}
+export declare const dropFileWrapperStyle: CSSObject;
+export declare const dropFileZoneWrapperStyle: (theme: Theme, isDraggedOver: boolean) => CSSObject;
+export declare const dropFileZoneLabelStyle: (theme: Theme) => CSSObject;
+export declare const dropFileZoneHeadingStyle: CSSObject;
+export declare const dropFileZonDescriptionStyle: CSSObject;
+export declare const DropFileInput: React.ForwardRefExoticComponent<Omit<DropFileInputProps<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=DropFileInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropFileInput.d.ts","sourceRoot":"","sources":["../../../src/Inputs/DropFileInput/DropFileInput.tsx"],"names":[],"mappings":"AAoBA,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,SAAS,EAAC,MAAM,kBAAkB,CAAC;AAE3C,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IAC5E,eAAe,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACzC,uBAAuB,EAAE,MAAM,IAAI,CAAC;IACpC,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,SAAS,CAAC;CACpC;AAYD,eAAO,MAAM,oBAAoB,EAAE,SAElC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,KAAK,SAe/E,CAAC;AAEH,eAAO,MAAM,sBAAsB,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,SASrD,CAAC;AAEH,eAAO,MAAM,wBAAwB,EAAE,SAGtC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,SAOzC,CAAC;AAEF,eAAO,MAAM,aAAa,4HA4GzB,CAAC"}

package/lib/Inputs/DropFileInput/DropFileInput.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropFileInput = exports.dropFileZonDescriptionStyle = exports.dropFileZoneHeadingStyle = exports.dropFileZoneLabelStyle = exports.dropFileZoneWrapperStyle = exports.dropFileWrapperStyle = 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 Icon_1 = require("../../DataDisplay/Icon");
+const Identity_1 = require("../../Identity");
+const Layout_1 = require("../../Layout");
+const visuallyHiddenStyles = {
+    clip: 'rect(0 0 0 0)',
+    clipPath: 'inset(50%)',
+    height: '1px',
+    overflow: 'hidden',
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1px',
+};
+exports.dropFileWrapperStyle = {
+    maxWidth: '330px',
+};
+const dropFileZoneWrapperStyle = (theme, isDraggedOver) => ({
+    width: '100%',
+    padding: '28px 12px',
+    border: `1px dashed ${theme.general.primaryColor}`,
+    borderBottomWidth: '2px',
+    borderRadius: '6px',
+    textAlign: 'center',
+    backgroundColor: isDraggedOver ? theme.general.backgroundColor : Identity_1.COLOR.WHITE,
+    fontWeight: 400,
+    fontSize: '0.75rem',
+    lineHeight: '13px',
+    color: Identity_1.COLOR.GRAY,
+});
+exports.dropFileZoneWrapperStyle = dropFileZoneWrapperStyle;
+const dropFileZoneLabelStyle = theme => ({
+    color: theme.general.primaryColor,
+    cursor: 'pointer',
+    ':focus-within': {
+        outline: `1px solid ${theme.general.primaryColor}`,
+    },
+    ':hover': {
+        textDecoration: 'underline',
+    },
+});
+exports.dropFileZoneLabelStyle = dropFileZoneLabelStyle;
+exports.dropFileZoneHeadingStyle = {
+    display: 'block',
+    whiteSpace: 'pre-line',
+};
+exports.dropFileZonDescriptionStyle = {
+    marginTop: '12px',
+    fontWeight: 400,
+    fontSize: '0.625rem',
+    lineHeight: '0.8125rem',
+    color: Identity_1.COLOR.GRAY,
+    whiteSpace: 'pre-line',
+};
+exports.DropFileInput = (0, react_1.forwardRef)(({ onFilesUploaded, onInvalidFilesDropError, dropFileZoneWrapperCSS, labelText, headingText, description, accept, multiple, ...inputProps }, ref) => {
+    const [isDraggedOver, setIsDraggedOver] = (0, react_1.useState)(false);
+    const resetDraggedOver = () => setIsDraggedOver(false);
+    const handleDragOver = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        event.dataTransfer.dropEffect = 'copy';
+        if (event.dataTransfer.items.length > 0) {
+            setIsDraggedOver(true);
+        }
+    };
+    const handleDrop = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        resetDraggedOver();
+        const { files } = event.dataTransfer;
+        if (files.length < 1) {
+            return;
+        }
+        const filesArr = multiple ? Array.from(files) : [files[0]];
+        const areFilesValid = !!accept
+            ? filesArr.every(file => accept
+                .split(',')
+                .map(v => v.trim())
+                .includes(file.type))
+            : true;
+        if (!areFilesValid) {
+            onInvalidFilesDropError();
+            return;
+        }
+        onFilesUploaded(filesArr);
+    };
+    const handleChange = (event) => {
+        const { files } = event.target;
+        if (files.length < 1) {
+            return;
+        }
+        onFilesUploaded(Array.from(files));
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { css: exports.dropFileWrapperStyle, children: [(0, jsx_runtime_1.jsx)("div", { css: (theme) => ({
+                    ...(0, exports.dropFileZoneWrapperStyle)(theme, isDraggedOver),
+                    ...dropFileZoneWrapperCSS,
+                }), "data-testid": "dropzone", onDragOver: handleDragOver, onDragLeave: resetDraggedOver, onDrop: handleDrop, children: (0, jsx_runtime_1.jsxs)(Layout_1.FlexBox, { align: "center", justify: "center", flexWrap: "wrap", css: { maxWidth: '280px', margin: '0 auto' }, children: [(0, jsx_runtime_1.jsx)(Icon_1.UploadIcon, { css: { margin: '12px 0' } }), (0, jsx_runtime_1.jsxs)("div", { css: { maxWidth: '160px', margin: '0 25px' }, children: [(0, jsx_runtime_1.jsx)("span", { css: exports.dropFileZoneHeadingStyle, children: headingText }), (0, jsx_runtime_1.jsxs)("label", { "aria-label": `${headingText} ${labelText} (${description})`, css: (theme) => (0, exports.dropFileZoneLabelStyle)(theme), children: [(0, jsx_runtime_1.jsx)("span", { children: labelText }), (0, jsx_runtime_1.jsx)("input", { "data-testid": "file-input", ref: ref, accept: accept, multiple: multiple, css: visuallyHiddenStyles, onChange: handleChange, type: "file", ...inputProps })] })] })] }) }), description && (0, jsx_runtime_1.jsx)("p", { css: exports.dropFileZonDescriptionStyle, children: description })] }));
+});
+exports.DropFileInput.displayName = 'DropFileInput';

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

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./DropFileInput").DropFileInputProps<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=DropFileInput.stories.d.ts.map

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

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

package/lib/Inputs/DropFileInput/DropFileInput.stories.js

@@ -0,0 +1,43 @@
+"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 DropFileInput_1 = require("./DropFileInput");
+const meta = {
+    title: 'Inputs/DropFileInput',
+    component: DropFileInput_1.DropFileInput,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        headingText: 'Drag & Drop an image \nor',
+        labelText: 'select one from your device',
+        accept: 'image/png, image/jpeg',
+        description: 'Image (JPG/PNG) size up to 1 MB, minimum 200 x 600 px',
+        // eslint-disable-next-line no-console
+        onFilesUploaded: files => console.log('Files uploaded:', files),
+        // eslint-disable-next-line no-console
+        onInvalidFilesDropError: () => console.log('Invalid file type'),
+    },
+};

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { CSSObject } from '@emotion/react';
+import { Theme } from '../../Identity/Theme';
+import { FlexBoxProps } from '../../Layout';
+type ErrorMessageProps<T = HTMLDivElement> = FlexBoxProps<T>;
+export declare const errorMessageStyle: <T>(theme: Theme, props: ErrorMessageProps<T>) => CSSObject;
+export declare const filterErrorMessageProps: (props: ErrorMessageProps) => Object;
+export declare const ErrorMessage: ({ children, ...props }: ErrorMessageProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ErrorMessage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.d.ts","sourceRoot":"","sources":["../../../src/Inputs/ErrorMessage/ErrorMessage.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAGzC,OAAO,EAAC,KAAK,EAAC,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAU,YAAY,EAAmC,MAAM,cAAc,CAAC;AAIrF,KAAK,iBAAiB,CAAC,CAAC,GAAG,cAAc,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC;AAE7D,eAAO,MAAM,iBAAiB,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,SAShF,CAAC;AAEH,eAAO,MAAM,uBAAuB,UAAW,iBAAiB,WAE/D,CAAC;AAEF,eAAO,MAAM,YAAY,2BAA0B,iBAAiB,qDAMnE,CAAC"}

package/lib/Inputs/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorMessage = exports.filterErrorMessageProps = exports.errorMessageStyle = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Identity_1 = require("../../Identity");
+const Layout_1 = require("../../Layout");
+const Typography_1 = require("../../Typography");
+const util_1 = require("../../utils/util");
+const errorMessageStyle = (theme, { justify = 'flex-start', align = 'center', ...props }) => ({
+    ...(0, Layout_1.flexBoxStyle)({ align, justify, ...props }),
+    a: {
+        ...(0, Typography_1.linkStyle)(theme, { bold: false, fontSize: theme.fontSizes.small, textTransform: 'none', ...props }),
+    },
+    marginBottom: '12px',
+});
+exports.errorMessageStyle = errorMessageStyle;
+const filterErrorMessageProps = (props) => {
+    return (0, util_1.filterProps)((0, Layout_1.filterFlexBoxProps)(props), []);
+};
+exports.filterErrorMessageProps = filterErrorMessageProps;
+const ErrorMessage = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(Layout_1.FlexBox, { css: (theme) => (0, exports.errorMessageStyle)(theme, props), ...props, children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { color: Identity_1.COLOR_V2.RED_LIGHT_500, fontSize: '12px', css: { fontWeight: 400 }, children: children }) }));
+exports.ErrorMessage = ErrorMessage;