@wireapp/react-ui-kit 9.59.1 → 9.59.2

package/lib/Inputs/Select/BaseSelect/BaseSelectDropdownIndicator.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseSelectDropdownIndicator = 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_select_1 = require("react-select");
+const ArrowDown_1 = require("../../../DataDisplay/Icon/ArrowDown");
+const BaseSelectDropdownIndicator = (props) => {
+    const { menuIsOpen } = props.selectProps;
+    return ((0, jsx_runtime_1.jsx)(react_select_1.components.DropdownIndicator, { ...props, children: (0, jsx_runtime_1.jsx)(ArrowDown_1.ArrowDown, { css: { ...(menuIsOpen ? { transform: 'rotateX(180deg)', marginTop: 2 } : { marginTop: 4 }) } }) }));
+};
+exports.BaseSelectDropdownIndicator = BaseSelectDropdownIndicator;

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/Inputs/Select/Select.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAC,SAAS,EAAW,MAAM,gBAAgB,CAAC;AACnD,OAAoB,EAAC,SAAS,EAAe,MAAM,cAAc,CAAC;AAClE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,iDAAiD,CAAC;AAevF,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,WAAW,CAAC,OAAO,SAAS,OAAO,EAAE,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,CACnF,SAAQ,iBAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC;IACjD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,OAAO,UAAU,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,yOAmBpF,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,qDAuE7B,CAAC"}

package/lib/Inputs/Select/Select.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const react_select_1 = __importDefault(require("react-select"));
+const BaseSelectDropdownIndicator_1 = require("./BaseSelect/BaseSelectDropdownIndicator");
+const Select_styles_1 = require("./Select.styles");
+const SelectContainer_1 = require("./SelectContainer/SelectContainer");
+const SelectIndicatorsContainer_1 = require("./SelectIndicatorsContainer/SelectIndicatorsContainer");
+const SelectMenu_1 = require("./SelectMenu/SelectMenu");
+const SelectMenuList_1 = require("./SelectMenuList/SelectMenuList");
+const SelectOption_1 = require("./SelectOption/SelectOption");
+const SelectValueContainer_1 = require("./SelectValueContainer/SelectValueContainer");
+const enums_1 = require("../../utils/enums");
+const InputLabel_1 = require("../InputLabel");
+const Select = ({ id, label, error, helperText, disabled = false, dataUieName, options, isMulti, wrapperCSS = {}, menuCSS = {}, selectControlCSS = {}, selectContainerCSS = {}, markInvalid = false, required = false, isSearchable = false, overlayMenu = true, menuListHeading, ...props }) => {
+    const theme = (0, react_1.useTheme)();
+    const hasError = !!error;
+    return ((0, jsx_runtime_1.jsxs)("div", { 
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        autoFocus: (0, SelectOption_1.isGroup)(options), css: (theme) => ({
+            marginBottom: markInvalid ? '2px' : '20px',
+            width: '100%',
+            '&:focus-within label': {
+                color: theme.general.primaryColor,
+            },
+            ...wrapperCSS,
+        }), "data-uie-name": dataUieName, children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, { htmlFor: id, markInvalid: markInvalid, isRequired: required, children: label })), (0, jsx_runtime_1.jsx)(react_select_1.default, { id: id, styles: (0, Select_styles_1.customStyles)({
+                    theme: theme,
+                    markInvalid,
+                    menuPosition: overlayMenu ? 'absolute' : 'relative',
+                    controlCSS: selectControlCSS,
+                    containerCSS: selectContainerCSS,
+                }), components: {
+                    SelectContainer: SelectContainer_1.SelectContainer,
+                    DropdownIndicator: BaseSelectDropdownIndicator_1.BaseSelectDropdownIndicator,
+                    Option: (0, SelectOption_1.SelectOption)(dataUieName),
+                    Menu: (0, SelectMenu_1.SelectMenu)(dataUieName, menuCSS),
+                    ValueContainer: SelectValueContainer_1.SelectValueContainer,
+                    IndicatorsContainer: SelectIndicatorsContainer_1.SelectIndicatorsContainer,
+                    ...(menuListHeading && { MenuList: (0, SelectMenuList_1.SelectMenuList)(menuListHeading, dataUieName) }),
+                }, tabIndex: enums_1.TabIndex.UNFOCUSABLE, isDisabled: disabled, hideSelectedOptions: false, isSearchable: isSearchable, isClearable: false, closeMenuOnSelect: !isMulti, isMulti: isMulti, options: options, ...props }), !hasError && helperText && ((0, jsx_runtime_1.jsx)("p", { css: (theme) => ({
+                    fontSize: theme.fontSizes.small,
+                    fontWeight: 400,
+                    color: theme.Input.labelColor,
+                    marginTop: 8,
+                }), children: helperText })), error] }));
+};
+exports.Select = Select;

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

@@ -0,0 +1,110 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: <IsMulti extends boolean = false, Group extends import("react-select").GroupBase<import("./Select").Option> = import("react-select").GroupBase<import("./Select").Option>>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, menuCSS, selectControlCSS, selectContainerCSS, markInvalid, required, isSearchable, overlayMenu, menuListHeading, ...props }: import("./Select").SelectProps<IsMulti, Group>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        id: string;
+        disabled?: boolean;
+        dataUieName: string;
+        options: import("react-select").GroupBase<import("./Select").Option>[] | import("./Select").Option[];
+        menuCSS?: import("@emotion/serialize").CSSObject;
+        wrapperCSS?: import("@emotion/serialize").CSSObject;
+        selectControlCSS?: import("@emotion/serialize").CSSObject;
+        selectContainerCSS?: import("@emotion/serialize").CSSObject;
+        label?: string;
+        helperText?: string;
+        error?: import("react").ReactElement;
+        markInvalid?: boolean;
+        required?: boolean;
+        isMulti?: boolean;
+        isSearchable?: boolean;
+        overlayMenu?: boolean;
+        menuListHeading?: string;
+        form?: string;
+        name?: string;
+        placeholder?: import("react").ReactNode;
+        autoFocus?: boolean;
+        className?: string;
+        tabIndex?: number;
+        'aria-errormessage'?: import("react").AriaAttributes["aria-errormessage"];
+        'aria-invalid'?: import("react").AriaAttributes["aria-invalid"];
+        'aria-label'?: import("react").AriaAttributes["aria-label"];
+        'aria-labelledby'?: import("react").AriaAttributes["aria-labelledby"];
+        'aria-live'?: import("react").AriaAttributes["aria-live"];
+        onFocus?: import("react").FocusEventHandler<HTMLInputElement>;
+        onBlur?: import("react").FocusEventHandler<HTMLInputElement>;
+        onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement>;
+        classNames?: import("react-select").ClassNamesConfig<import("./Select").Option, boolean, import("react-select").GroupBase<import("./Select").Option>>;
+        theme?: import("react-select").ThemeConfig;
+        styles?: import("react-select").StylesConfig<import("./Select").Option, boolean, import("react-select").GroupBase<import("./Select").Option>>;
+        isDisabled?: boolean;
+        menuPosition?: import("react-select").MenuPosition;
+        loadingMessage?: (obj: {
+            inputValue: string;
+        }) => import("react").ReactNode;
+        noOptionsMessage?: (obj: {
+            inputValue: string;
+        }) => import("react").ReactNode;
+        isRtl?: boolean;
+        menuPortalTarget?: HTMLElement | null;
+        isLoading?: boolean;
+        ariaLiveMessages?: import("react-select").AriaLiveMessages<import("./Select").Option, boolean, import("react-select").GroupBase<import("./Select").Option>>;
+        backspaceRemovesValue?: boolean;
+        blurInputOnSelect?: boolean;
+        captureMenuScroll?: boolean;
+        classNamePrefix?: string | null;
+        closeMenuOnSelect?: boolean;
+        closeMenuOnScroll?: boolean | ((event: Event) => boolean);
+        components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<import("./Select").Option, boolean, import("react-select").GroupBase<import("./Select").Option>>>;
+        controlShouldRenderValue?: boolean;
+        delimiter?: string;
+        escapeClearsValue?: boolean;
+        filterOption?: (option: import("react-select").FilterOptionOption<import("./Select").Option>, inputValue: string) => boolean;
+        formatGroupLabel?: (group: import("react-select").GroupBase<import("./Select").Option>) => import("react").ReactNode;
+        formatOptionLabel?: (data: import("./Select").Option, formatOptionLabelMeta: import("react-select").FormatOptionLabelMeta<import("./Select").Option>) => import("react").ReactNode;
+        getOptionLabel?: import("react-select").GetOptionLabel<import("./Select").Option>;
+        getOptionValue?: import("react-select").GetOptionValue<import("./Select").Option>;
+        hideSelectedOptions?: boolean;
+        inputId?: string;
+        instanceId?: number | string;
+        isClearable?: boolean;
+        isOptionDisabled?: (option: import("./Select").Option, selectValue: import("react-select").Options<import("./Select").Option>) => boolean;
+        isOptionSelected?: (option: import("./Select").Option, selectValue: import("react-select").Options<import("./Select").Option>) => boolean;
+        minMenuHeight?: number;
+        maxMenuHeight?: number;
+        menuPlacement?: import("react-select").MenuPlacement;
+        menuShouldBlockScroll?: boolean;
+        menuShouldScrollIntoView?: boolean;
+        onMenuScrollToTop?: (event: WheelEvent | TouchEvent) => void;
+        onMenuScrollToBottom?: (event: WheelEvent | TouchEvent) => void;
+        openMenuOnFocus?: boolean;
+        openMenuOnClick?: boolean;
+        pageSize?: number;
+        screenReaderStatus?: (obj: {
+            count: number;
+        }) => string;
+        tabSelectsValue?: boolean;
+        unstyled?: boolean;
+        value?: import("react-select").PropsValue<import("./Select").Option>;
+        onChange?: (newValue: import("./Select").Option | import("react-select").MultiValue<import("./Select").Option>, actionMeta: import("react-select").ActionMeta<import("./Select").Option>) => void;
+        inputValue?: string;
+        onInputChange?: (newValue: string, actionMeta: import("react-select").InputActionMeta) => void;
+        onMenuOpen?: () => void;
+        onMenuClose?: () => void;
+        menuIsOpen?: boolean;
+        defaultInputValue?: string;
+        defaultMenuIsOpen?: boolean;
+        defaultValue?: import("react-select").PropsValue<import("./Select").Option>;
+    }>) => 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 WithLabel: Story;
+export declare const Invalid: Story;
+export declare const Disabled: Story;
+//# sourceMappingURL=Select.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/Inputs/Select/Select.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAUrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAcqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC"}

package/lib/Inputs/Select/Select.stories.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Disabled = exports.Invalid = exports.WithLabel = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Select_1 = require("./Select");
+const options = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+];
+const meta = {
+    title: 'Inputs/Select',
+    component: Select_1.Select,
+    parameters: {
+        layout: 'centered',
+    },
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)("div", { style: { width: '350px' }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        placeholder: 'Select an option',
+        id: 'default-select',
+        dataUieName: 'default-select',
+        options,
+    },
+};
+exports.WithLabel = {
+    args: {
+        placeholder: 'Select an option',
+        id: 'select-example',
+        dataUieName: 'select-with-label',
+        options,
+        label: 'Choose an option',
+    },
+};
+exports.Invalid = {
+    args: {
+        placeholder: 'Select an option',
+        id: 'invalid-select',
+        dataUieName: 'invalid-select',
+        options,
+        markInvalid: true,
+    },
+};
+exports.Disabled = {
+    args: {
+        placeholder: 'Select an option',
+        id: 'disabled-select',
+        dataUieName: 'disabled-select',
+        options,
+        disabled: true,
+    },
+};

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

@@ -0,0 +1,14 @@
+import { CSSObject } from '@emotion/react';
+import { GroupBase, StylesConfig } from 'react-select';
+import { Option } from './Select';
+import { Theme } from '../../Identity/Theme';
+interface CustomStylesParams {
+    theme: Theme;
+    markInvalid?: boolean;
+    menuPosition?: 'absolute' | 'relative';
+    controlCSS: CSSObject;
+    containerCSS: CSSObject;
+}
+export declare const customStyles: ({ theme, markInvalid, menuPosition, controlCSS, containerCSS, }: CustomStylesParams) => StylesConfig<Option, false, GroupBase<Option>>;
+export {};
+//# sourceMappingURL=Select.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../src/Inputs/Select/Select.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAC,SAAS,EAAE,YAAY,EAAC,MAAM,cAAc,CAAC;AAWrD,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAGhC,OAAO,EAAC,KAAK,EAAC,MAAM,sBAAsB,CAAC;AAE3C,UAAU,kBAAkB;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACvC,UAAU,EAAE,SAAS,CAAC;IACtB,YAAY,EAAE,SAAS,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,oEAMtB,kBAAkB,KAAG,YAAY,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,CAoEnE,CAAC"}

package/lib/Inputs/Select/SelectContainer/SelectContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectContainer.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/SelectContainer/SelectContainer.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAa,cAAc,EAAC,MAAM,cAAc,CAAC;AAIxD,eAAO,MAAM,eAAe,UAAW,cAAc,qDAMpD,CAAC"}

package/lib/Inputs/Select/SelectContainer/SelectContainer.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectContainer = 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_select_1 = require("react-select");
+const enums_1 = require("../../../utils/enums");
+const SelectContainer = (props) => {
+    return ((0, jsx_runtime_1.jsx)(react_select_1.components.SelectContainer, { ...props, children: (0, jsx_runtime_1.jsx)("div", { tabIndex: enums_1.TabIndex.FOCUSABLE, children: props.children }) }));
+};
+exports.SelectContainer = SelectContainer;

package/lib/Inputs/Select/SelectIndicatorsContainer/SelectIndicatorsContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectIndicatorsContainer.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/SelectIndicatorsContainer/SelectIndicatorsContainer.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAa,wBAAwB,EAAC,MAAM,cAAc,CAAC;AAElE,OAAO,EAAC,MAAM,EAAC,MAAM,WAAW,CAAC;AAEjC,eAAO,MAAM,yBAAyB,+BAA8B,wBAAwB,CAAC,MAAM,CAAC,qDAWnG,CAAC"}

package/lib/Inputs/Select/SelectMenu/SelectMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/SelectMenu/SelectMenu.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAa,SAAS,EAAC,MAAM,cAAc,CAAC;AAGnD,eAAO,MAAM,UAAU,gBAAiB,MAAM,QAAQ,SAAS,aAAa,SAAS,qDAcpF,CAAC"}

package/lib/Inputs/Select/SelectMenuList/SelectMenuList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenuList.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/SelectMenuList/SelectMenuList.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAa,aAAa,EAAC,MAAM,cAAc,CAAC;AAQvD,eAAO,MAAM,cAAc;sBAAqB,MAAM,eAAe,MAAM,WAAa,aAAa;;CA0BpG,CAAC"}

package/lib/Inputs/Select/SelectMenuList/SelectMenuList.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectMenuList = 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_select_1 = require("react-select");
+const SelectMenuList_styles_1 = require("./SelectMenuList.styles");
+const Icon_1 = require("../../../DataDisplay/Icon");
+// eslint-disable-next-line react/display-name
+const SelectMenuList = (menuListHeading, dataUieName) => (props) => {
+    const { selectProps, children } = props;
+    const handleClose = () => {
+        if (selectProps && selectProps.onMenuClose) {
+            selectProps.onMenuClose();
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(react_select_1.components.MenuList, { ...props, children: (0, jsx_runtime_1.jsxs)("div", { ...(dataUieName && {
+                'data-uie-name': `menu-list-${dataUieName}`,
+            }), children: [(0, jsx_runtime_1.jsxs)("div", { css: (theme) => (0, SelectMenuList_styles_1.headingContainerStyles)(theme), children: [menuListHeading, (0, jsx_runtime_1.jsx)("button", { onClick: handleClose, css: SelectMenuList_styles_1.closeButtonStyles, "aria-label": `Close: ${menuListHeading}`, children: (0, jsx_runtime_1.jsx)(Icon_1.CloseIcon, { width: 16, height: 16 }) })] }), children] }) }));
+};
+exports.SelectMenuList = SelectMenuList;
+exports.SelectMenuList.displayName = 'SelectMenuList';

package/lib/Inputs/Select/SelectMenuList/SelectMenuList.styles.d.ts

@@ -0,0 +1,5 @@
+import { CSSObject } from '@emotion/react';
+import { Theme } from '../../../Identity';
+export declare const headingContainerStyles: (theme: Theme) => CSSObject;
+export declare const closeButtonStyles: CSSObject;
+//# sourceMappingURL=SelectMenuList.styles.d.ts.map

package/lib/Inputs/Select/SelectMenuList/SelectMenuList.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenuList.styles.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/SelectMenuList/SelectMenuList.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAExC,eAAO,MAAM,sBAAsB,UAAW,KAAK,KAAG,SAOpD,CAAC;AAEH,eAAO,MAAM,iBAAiB,EAAE,SAO/B,CAAC"}

package/lib/Inputs/Select/SelectOption/SelectOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/SelectOption/SelectOption.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAa,SAAS,EAAE,WAAW,EAAE,eAAe,EAAC,MAAM,cAAc,CAAC;AAIjF,OAAO,EAAC,MAAM,EAAC,MAAM,WAAW,CAAC;AAGjC,eAAO,MAAM,YAAY,gBAAiB,MAAM,aAAa,WAAW,CAAC,MAAM,CAAC,qDAsD/E,CAAC;AAEF,eAAO,MAAM,OAAO,YAAa,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,KAAG,OAAO,IAAI,SAAS,CAAC,MAAM,CAAC,EAEzG,CAAC"}

package/lib/Inputs/Select/SelectOption/SelectOption.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isGroup = exports.SelectOption = 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_select_1 = require("react-select");
+const Icon_1 = require("../../../DataDisplay/Icon");
+// eslint-disable-next-line react/display-name
+const SelectOption = (dataUieName) => (props) => {
+    const { children, data, isMulti, isSelected, options } = props;
+    return ((0, jsx_runtime_1.jsx)(react_select_1.components.Option, { ...props, children: (0, jsx_runtime_1.jsxs)("div", { css: {
+                ...((isMulti || (0, exports.isGroup)(options)) && {
+                    display: 'grid',
+                    gridTemplateAreas: `"checkbox label"
+                                ". description"`,
+                    gridTemplateColumns: '22px 1fr',
+                    columnGap: (0, exports.isGroup)(options) ? '5px' : '10px',
+                }),
+            }, ...(dataUieName && {
+                'data-uie-name': `option-${dataUieName}`,
+                'data-uie-value': options.find(option => option.label === children)?.value,
+                'data-uie-selected': isSelected,
+            }), children: [isMulti && ((0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: isSelected, onChange: () => null, css: { gridArea: 'checkbox', width: 22, height: 22, cursor: 'pointer', placeSelf: 'center' } })), (0, exports.isGroup)(options) && (
+                //includes a checkmark character if it is selected and a group
+                (0, jsx_runtime_1.jsx)("div", { css: { width: 22, height: 22, cursor: 'pointer', placeSelf: 'center' }, children: isSelected ? (0, jsx_runtime_1.jsx)(Icon_1.CheckIcon, {}) : null })), (0, jsx_runtime_1.jsx)("div", { css: { gridArea: 'label', overflowWrap: 'break-word', overflow: 'hidden' }, children: children }), data && data.description && ((0, jsx_runtime_1.jsx)("p", { css: (theme) => ({
+                        marginBottom: 0,
+                        fontSize: theme.fontSizes.medium,
+                        color: isSelected ? theme.Select.focusedDescriptionColor : theme.Input.labelColor,
+                        gridArea: 'description',
+                    }), children: data.description }))] }) }));
+};
+exports.SelectOption = SelectOption;
+const isGroup = (options) => {
+    return options?.length > 0 && 'options' in options[0];
+};
+exports.isGroup = isGroup;

package/lib/Inputs/Select/SelectValueContainer/SelectValueContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectValueContainer.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/SelectValueContainer/SelectValueContainer.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAa,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAE7D,OAAO,EAAC,MAAM,EAAC,MAAM,WAAW,CAAC;AAEjC,eAAO,MAAM,oBAAoB,+BAA8B,mBAAmB,CAAC,MAAM,CAAC,qDAIzF,CAAC"}

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShakeBox.d.ts","sourceRoot":"","sources":["../../../src/Inputs/ShakeBox/ShakeBox.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,QAAQ,mFAiCpB,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShakeBox.stories.d.ts","sourceRoot":"","sources":["../../../src/Inputs/ShakeBox/ShakeBox.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAIrD,OAAO,EAAW,WAAW,EAAC,MAAM,aAAa,CAAC;AAElD,QAAA,MAAM,IAAI;;;;;;;CAOuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAsBnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAsBF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC"}

package/lib/Inputs/ShakeBox/ShakeBox.stories.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithForm = 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 Button_1 = require("../Button");
+const Input_1 = require("../Input");
+const ShakeBox_1 = require("../ShakeBox");
+const meta = {
+    title: 'Inputs/ShakeBox',
+    component: ShakeBox_1.ShakeBox,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+const DefaultStory = () => {
+    const ref = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ShakeBox_1.ShakeBox, { ref: ref, children: (0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Type something..." }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => {
+                    ref.current?.shake();
+                }, style: { marginTop: '16px' }, children: "Shake Input" })] }));
+};
+exports.Default = {
+    render: () => (0, jsx_runtime_1.jsx)(DefaultStory, {}),
+};
+const FormStory = () => {
+    const ref = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsx)(ShakeBox_1.ShakeBox, { ref: ref, children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: event => {
+                event.preventDefault();
+                ref.current?.shake();
+            }, children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Required field", required: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "submit", style: { marginTop: '16px' }, children: "Submit to shake" })] }) }));
+};
+exports.WithForm = {
+    render: () => (0, jsx_runtime_1.jsx)(FormStory, {}),
+};

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

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

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

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

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

package/lib/Inputs/Switch/Switch.d.ts

@@ -0,0 +1,16 @@
+import { InputProps } from '../Input';
+export interface SwitchProps<T = HTMLInputElement> extends InputProps<T> {
+    activatedColor?: string;
+    checked: boolean;
+    deactivatedColor?: string;
+    disabled?: boolean;
+    disabledColor?: string;
+    id?: string;
+    loadingColor?: string;
+    name?: string;
+    onToggle: (isChecked: boolean) => void;
+    showLoading?: boolean;
+    dataUieName?: string;
+}
+export declare const Switch: import("react").ForwardRefExoticComponent<Omit<SwitchProps<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/Inputs/Switch/Switch.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAEpC,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,UAAU,CAAC,CAAC,CAAC;IACtE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,MAAM,yIAmDlB,CAAC"}