@wireapp/react-ui-kit 9.69.4 → 9.69.6

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

@@ -0,0 +1,46 @@
+import { CSSObject } from '@emotion/react';
+import { Theme } from '../../../Identity';
+export interface BaseSelectStylesParams {
+    theme: Theme;
+    markInvalid?: boolean;
+    menuPosition?: 'absolute' | 'relative';
+    controlCSS?: CSSObject;
+    containerCSS?: CSSObject;
+}
+export declare const baseIndicatorSeparatorStyles: () => CSSObject;
+export declare const baseContainerStyles: (containerCSS: CSSObject) => CSSObject;
+export declare const baseControlStyles: ({ theme, isDisabled, markInvalid, selectProps, controlCSS, }: {
+    theme: Theme;
+    isDisabled: boolean;
+    markInvalid: boolean;
+    selectProps: {
+        isDisabled: boolean;
+        menuIsOpen: boolean;
+    };
+    controlCSS: CSSObject;
+}) => CSSObject;
+export declare const baseDropdownIndicatorStyles: ({ theme, selectProps, }: {
+    theme: Theme;
+    selectProps: {
+        isDisabled: boolean;
+    };
+}) => CSSObject;
+export declare const baseMenuStyles: ({ theme, menuPosition, }: {
+    theme: Theme;
+    menuPosition: "absolute" | "relative";
+}) => CSSObject;
+export declare const baseMenuListStyles: () => CSSObject;
+export declare const baseOptionStyles: ({ theme, isDisabled, isFocused, isSelected, isMulti, }: {
+    theme: Theme;
+    isDisabled: boolean;
+    isFocused: boolean;
+    isSelected: boolean;
+    isMulti: boolean;
+}) => CSSObject;
+export declare const baseSingleValueStyles: ({ theme, selectProps, }: {
+    theme: Theme;
+    selectProps: {
+        isDisabled: boolean;
+    };
+}) => CSSObject;
+//# sourceMappingURL=BaseSelect.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSelect.styles.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/BaseSelect/BaseSelect.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAGxC,MAAM,WAAW,sBAAsB;IACrC,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;CAC1B;AAED,eAAO,MAAM,4BAA4B,QAAO,SAE9C,CAAC;AAEH,eAAO,MAAM,mBAAmB,iBAAkB,SAAS,KAAG,SAW5D,CAAC;AAEH,eAAO,MAAM,iBAAiB,iEAM3B;IACD,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE;QACX,UAAU,EAAE,OAAO,CAAC;QACpB,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;IACF,UAAU,EAAE,SAAS,CAAC;CACvB,KAAG,SA4BF,CAAC;AAEH,eAAO,MAAM,2BAA2B,4BAGrC;IACD,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE;QACX,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;CACH,KAAG,SAOH,CAAC;AAEF,eAAO,MAAM,cAAc,6BAGxB;IACD,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,EAAE,UAAU,GAAG,UAAU,CAAC;CACvC,KAAG,SAOF,CAAC;AAEH,eAAO,MAAM,kBAAkB,QAAO,SAKpC,CAAC;AAEH,eAAO,MAAM,gBAAgB,2DAM1B;IACD,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;CAClB,KAAG,SAyDF,CAAC;AAEH,eAAO,MAAM,qBAAqB,4BAG/B;IACD,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE;QACX,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;CACH,KAAG,SAKH,CAAC"}

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

@@ -0,0 +1,160 @@
+"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.baseSingleValueStyles = exports.baseOptionStyles = exports.baseMenuListStyles = exports.baseMenuStyles = exports.baseDropdownIndicatorStyles = exports.baseControlStyles = exports.baseContainerStyles = exports.baseIndicatorSeparatorStyles = void 0;
+const Input_1 = require("../../Input");
+const baseIndicatorSeparatorStyles = () => ({
+    display: 'none',
+});
+exports.baseIndicatorSeparatorStyles = baseIndicatorSeparatorStyles;
+const baseContainerStyles = (containerCSS) => ({
+    '& > div': {
+        height: 'auto',
+        minHeight: '48px',
+        '&:-moz-focusring': {
+            color: 'transparent',
+            textShadow: '0 0 0 #000',
+        },
+        position: 'relative',
+        ...containerCSS,
+    },
+});
+exports.baseContainerStyles = baseContainerStyles;
+const baseControlStyles = ({ theme, isDisabled, markInvalid, selectProps, controlCSS, }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    appearance: 'none',
+    padding: '0 8px 0 16px',
+    height: 'auto',
+    minHeight: '48px',
+    ...(0, Input_1.inputStyle)(theme, { disabled: selectProps.isDisabled, markInvalid }),
+    borderRadius: 12,
+    ...(isDisabled && {
+        backgroundColor: theme.Input.backgroundColorDisabled,
+        color: theme.Select.disabledColor,
+        cursor: 'default',
+    }),
+    ...(markInvalid && {
+        boxShadow: `0 0 0 1px ${theme.general.dangerColor}`,
+    }),
+    ...(selectProps.menuIsOpen && {
+        boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,
+        '&:hover': {
+            boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,
+        },
+    }),
+    cursor: !selectProps.isDisabled && 'pointer',
+    '&:focus:visible, active': {
+        boxShadow: !selectProps.isDisabled && `0 0 0 1px ${theme.general.primaryColor}`,
+    },
+    ...controlCSS,
+});
+exports.baseControlStyles = baseControlStyles;
+const baseDropdownIndicatorStyles = ({ theme, selectProps, }) => {
+    const isSelectDisabled = selectProps.isDisabled;
+    return {
+        '& > svg': {
+            fill: isSelectDisabled && theme.Input.placeholderColor,
+        },
+    };
+};
+exports.baseDropdownIndicatorStyles = baseDropdownIndicatorStyles;
+const baseMenuStyles = ({ theme, menuPosition, }) => ({
+    boxShadow: `0 0 0 1px ${theme.general.primaryColor}, 0 4px 11px hsl(0deg 0% 0% / 10%)`,
+    borderRadius: 12,
+    marginBottom: 0,
+    marginTop: 4,
+    overflowY: 'auto',
+    position: menuPosition,
+});
+exports.baseMenuStyles = baseMenuStyles;
+const baseMenuListStyles = () => ({
+    borderRadius: 0,
+    paddingBottom: 0,
+    paddingTop: 0,
+    maxHeight: 400,
+});
+exports.baseMenuListStyles = baseMenuListStyles;
+const baseOptionStyles = ({ theme, isDisabled, isFocused, isSelected, isMulti, }) => ({
+    backgroundColor: theme.Input.backgroundColor,
+    color: theme.general.color,
+    cursor: isDisabled ? 'not-allowed' : 'pointer',
+    fontSize: theme.fontSizes.base,
+    lineHeight: '1.5rem',
+    ...(isSelected &&
+        !isDisabled &&
+        !isMulti && {
+        background: theme.general.primaryColor,
+        borderColor: theme.general.primaryColor,
+        color: theme.Select.contrastTextColor,
+        '&:hover': {
+            backgroundColor: theme.Select.selectedActiveBg,
+        },
+        '&:active': {
+            backgroundColor: theme.general.primaryColor,
+            boxShadow: `inset 0 0 0 1px ${theme.Select.selectedActiveBg}`,
+            color: theme.general.contrastColor,
+        },
+    }),
+    ...(isFocused &&
+        !isDisabled &&
+        !isSelected && {
+        backgroundColor: theme.Select.optionHoverBg,
+        borderColor: theme.Select.optionHoverBg,
+        color: theme.general.color,
+        '&:active': {
+            background: theme.Select.optionHoverBg,
+            boxShadow: `inset 0 0 0 1px ${theme.Select.selectedActiveBg}`,
+            color: theme.general.color,
+        },
+    }),
+    ...(isMulti &&
+        isSelected && {
+        backgroundColor: theme.Input.backgroundColor,
+        '&:hover': {
+            backgroundColor: theme.Select.optionHoverBg,
+        },
+        '&:active': {
+            background: theme.Select.optionHoverBg,
+            boxShadow: `inset 0 0 0 1px ${theme.Select.selectedActiveBg}`,
+            color: theme.general.color,
+        },
+    }),
+    ...(isDisabled && {
+        backgroundColor: theme.Input.backgroundColorDisabled,
+        color: theme.Select.disabledColor,
+        '&:hover, &:active, &:focus': {
+            backgroundColor: theme.Select.borderColor,
+            color: theme.Select.disabledColor,
+        },
+        ...(isFocused && {
+            backgroundColor: theme.Select.borderColor,
+            color: theme.Select.disabledColor,
+        }),
+    }),
+});
+exports.baseOptionStyles = baseOptionStyles;
+const baseSingleValueStyles = ({ theme, selectProps, }) => {
+    const isSelectDisabled = selectProps.isDisabled;
+    return {
+        color: isSelectDisabled ? theme.Input.placeholderColor : theme.general.color,
+    };
+};
+exports.baseSingleValueStyles = baseSingleValueStyles;

package/lib/Inputs/Select/BaseSelect/BaseSelectDropdownIndicator.d.ts

@@ -0,0 +1,3 @@
+import { DropdownIndicatorProps } from 'react-select';
+export declare const BaseSelectDropdownIndicator: (props: DropdownIndicatorProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BaseSelectDropdownIndicator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSelectDropdownIndicator.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/BaseSelect/BaseSelectDropdownIndicator.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAa,sBAAsB,EAAC,MAAM,cAAc,CAAC;AAIhE,eAAO,MAAM,2BAA2B,UAAW,sBAAsB,qDASxE,CAAC"}

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

@@ -0,0 +1,36 @@
+import { ReactElement } from 'react';
+import { CSSObject } from '@emotion/react';
+import { GroupBase } from 'react-select';
+import type { StateManagerProps } from 'react-select/dist/declarations/src/stateManager';
+export type Option = {
+    value: string | number;
+    label: string;
+    description?: string;
+    isDisabled?: boolean;
+};
+export interface SelectProps<IsMulti extends boolean, Group extends GroupBase<Option>> extends StateManagerProps<Option, IsMulti, Group> {
+    id: string;
+    disabled?: boolean;
+    dataUieName: string;
+    options: Option[] | Group[];
+    menuCSS?: CSSObject;
+    wrapperCSS?: CSSObject;
+    selectControlCSS?: CSSObject;
+    selectContainerCSS?: CSSObject;
+    selectMenuCSS?: CSSObject;
+    selectGroupCSS?: CSSObject;
+    selectGroupHeadingCSS?: CSSObject;
+    selectMenuPortalCSS?: CSSObject;
+    label?: string;
+    helperText?: string;
+    error?: ReactElement;
+    markInvalid?: boolean;
+    required?: boolean;
+    isMulti?: IsMulti;
+    isSearchable?: boolean;
+    overlayMenu?: boolean;
+    menuListHeading?: string;
+    hideControl?: boolean;
+}
+export declare const Select: <IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, menuCSS, selectControlCSS, selectContainerCSS, selectMenuCSS, selectGroupCSS, selectGroupHeadingCSS, selectMenuPortalCSS, markInvalid, required, isSearchable, overlayMenu, menuListHeading, hideControl, ...props }: SelectProps<IsMulti, Group>) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Select.d.ts.map

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,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,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;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,OAAO,UAAU,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,iUAwBpF,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,qDA4E7B,CAAC"}

package/lib/Inputs/Select/Select.js

@@ -0,0 +1,58 @@
+"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 = {}, selectMenuCSS = {}, selectGroupCSS = {}, selectGroupHeadingCSS = {}, selectMenuPortalCSS = {}, markInvalid = false, required = false, isSearchable = false, overlayMenu = true, menuListHeading, hideControl = false, ...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,
+                    menuCSS: selectMenuCSS,
+                    groupCSS: selectGroupCSS,
+                    groupHeadingCSS: selectGroupHeadingCSS,
+                    menuPortalCSS: selectMenuPortalCSS,
+                }), 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,
+                    ...(hideControl && { Control: () => null }),
+                    ...(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,115 @@
+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, selectMenuCSS, selectGroupCSS, selectGroupHeadingCSS, selectMenuPortalCSS, markInvalid, required, isSearchable, overlayMenu, menuListHeading, hideControl, ...props }: import("./Select").SelectProps<IsMulti, Group>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("@storybook/core/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;
+        selectMenuCSS?: import("@emotion/serialize").CSSObject;
+        selectGroupCSS?: import("@emotion/serialize").CSSObject;
+        selectGroupHeadingCSS?: import("@emotion/serialize").CSSObject;
+        selectMenuPortalCSS?: import("@emotion/serialize").CSSObject;
+        label?: string;
+        helperText?: string;
+        error?: import("react").ReactElement;
+        markInvalid?: boolean;
+        required?: boolean;
+        isMulti?: boolean;
+        isSearchable?: boolean;
+        overlayMenu?: boolean;
+        menuListHeading?: string;
+        hideControl?: boolean;
+        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;
+        closeMenuOnSelect?: 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;
+        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,18 @@
+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;
+    menuCSS: CSSObject;
+    groupCSS: CSSObject;
+    groupHeadingCSS: CSSObject;
+    menuPortalCSS: CSSObject;
+}
+export declare const customStyles: ({ theme, markInvalid, menuPosition, controlCSS, containerCSS, menuCSS, groupCSS, groupHeadingCSS, menuPortalCSS, }: 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;IACxB,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,eAAe,EAAE,SAAS,CAAC;IAC3B,aAAa,EAAE,SAAS,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,uHAUtB,kBAAkB,KAAG,YAAY,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,CAoFnE,CAAC"}

package/lib/Inputs/Select/Select.styles.js

@@ -0,0 +1,107 @@
+"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.customStyles = void 0;
+const BaseSelect_styles_1 = require("./BaseSelect/BaseSelect.styles");
+const SelectOption_1 = require("./SelectOption/SelectOption");
+const customStyles = ({ theme, markInvalid = false, menuPosition = 'absolute', controlCSS, containerCSS, menuCSS, groupCSS, groupHeadingCSS, menuPortalCSS, }) => ({
+    indicatorSeparator: BaseSelect_styles_1.baseIndicatorSeparatorStyles,
+    indicatorsContainer: provided => provided,
+    control: (_provided, { isDisabled, selectProps }) => (0, BaseSelect_styles_1.baseControlStyles)({ theme, isDisabled, markInvalid, selectProps, controlCSS }),
+    dropdownIndicator: (provided, selectProps) => ({
+        ...provided,
+        ...(0, BaseSelect_styles_1.baseDropdownIndicatorStyles)({ theme, selectProps }),
+    }),
+    container: (_, { options }) => (0, SelectOption_1.isGroup)(options)
+        ? {
+            '& > div': {
+                display: 'inline',
+                position: 'relative',
+                top: '-10px',
+                ...containerCSS,
+            },
+        }
+        : (0, BaseSelect_styles_1.baseContainerStyles)(containerCSS),
+    menu: (provided, { options }) => ({
+        ...provided,
+        ...(0, BaseSelect_styles_1.baseMenuStyles)({ theme, menuPosition }),
+        ...((0, SelectOption_1.isGroup)(options) && {
+            minWidth: '400px',
+        }),
+        ...menuCSS,
+    }),
+    menuList: provided => ({
+        ...provided,
+        ...(0, BaseSelect_styles_1.baseMenuListStyles)(),
+    }),
+    option: (provided, { isMulti, isDisabled, isFocused, isSelected, options, data }) => ({
+        ...provided,
+        ...(0, BaseSelect_styles_1.baseOptionStyles)({ theme, isMulti, isDisabled, isFocused, isSelected }),
+        padding: (0, SelectOption_1.isGroup)(options) ? '6px 16px' : '10px 18px',
+        fontWeight: isSelected && (0, SelectOption_1.isGroup)(options) ? 600 : 400,
+        ...((0, SelectOption_1.isGroup)(options) && {
+            'div > svg': {
+                fill: theme.general.contrastColor,
+            },
+        }),
+        ...(!(0, SelectOption_1.isGroup)(options) && {
+            '&:not(:last-of-type)': {
+                borderBottom: `1px solid ${theme.Select.borderColor}`,
+            },
+        }),
+        ...(!(0, SelectOption_1.isGroup)(options) && {
+            '&:first-of-type': {
+                borderRadius: '0',
+            },
+        }),
+        ...((0, SelectOption_1.isGroup)(options) && {
+            textAlign: 'left',
+        }),
+        '&:last-of-type': {
+            ...(!(0, SelectOption_1.isGroup)(options) && { borderRadius: '0' }),
+            ...((0, SelectOption_1.isGroup)(options) &&
+                !options[options.length - 1].options.includes(data) && {
+                borderBottom: `1px solid ${theme.Select.borderColor}`,
+            }),
+        },
+    }),
+    valueContainer: provided => ({
+        ...provided,
+        padding: 0,
+        width: '100%',
+        display: 'grid',
+    }),
+    groupHeading: base => ({
+        ...base,
+        color: theme.general.color,
+        fontSize: theme.fontSizes.small,
+        lineHeight: 1,
+        padding: '8px 16px 6px',
+        textAlign: 'left',
+        ...groupHeadingCSS,
+    }),
+    group: provided => ({
+        ...provided,
+        backgroundColor: theme.Input.backgroundColor,
+        ...groupCSS,
+    }),
+    menuPortal: provided => ({ ...provided, ...menuPortalCSS }),
+});
+exports.customStyles = customStyles;