@nulogy/components 15.2.1 → 15.2.3

package/dist/src/Select/Select.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { forwardRef } from "react";
 import ReactSelect from "react-select";
 import { useTranslation } from "react-i18next";
@@ -25,8 +14,7 @@ import { SelectControl, SelectMultiValue, SelectClearIndicator, SelectContainer,
 import { SelectOption } from "./SelectOption";
 import MenuList from "./MenuList";
 import { calcOptionsLength, checkOptionsAreValid, extractValue, getReactSelectValue } from "./lib";
-const NDSSelect = forwardRef((_a, ref) => {
-    var { value, onChange, defaultValue, disabled, errorMessage, errorList, id, initialIsOpen, multiselect, placeholder, components, options, styles, windowThreshold = 300, autocomplete = true, maxHeight = "248px", required = false, menuPosition = "absolute", menuPlacement = "bottom", classNamePrefix = "ndsSelect", closeMenuOnSelect = true, noOptionsMessage } = _a, props = __rest(_a, ["value", "onChange", "defaultValue", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "multiselect", "placeholder", "components", "options", "styles", "windowThreshold", "autocomplete", "maxHeight", "required", "menuPosition", "menuPlacement", "classNamePrefix", "closeMenuOnSelect", "noOptionsMessage"]);
+const NDSSelect = forwardRef(({ value, onChange, defaultValue, disabled, errorMessage, errorList, id, initialIsOpen, multiselect, placeholder, components, options, styles, windowThreshold = 300, autocomplete = true, maxHeight = "248px", required = false, menuPosition = "absolute", menuPlacement = "bottom", classNamePrefix = "ndsSelect", closeMenuOnSelect = true, noOptionsMessage, ...props }, ref) => {
     const { t } = useTranslation();
     const variant = useComponentVariant();
     const theme = useTheme();
@@ -49,14 +37,25 @@ const NDSSelect = forwardRef((_a, ref) => {
         maxHeight,
         windowed: options.length > windowThreshold,
     });
-    return (React.createElement(Field, Object.assign({}, styledProps),
-        React.createElement(MaybeFieldLabel, Object.assign({}, fieldLabelProps),
-            React.createElement(ReactSelect, Object.assign({ ref: ref, isSearchable: autocomplete, isDisabled: disabled, defaultMenuIsOpen: initialIsOpen, isMulti: multiselect, defaultValue: getReactSelectValue(options, defaultValue), value: getReactSelectValue(options, value), options: options, onChange: (newValue) => {
+    return (React.createElement(Field, { ...styledProps },
+        React.createElement(MaybeFieldLabel, { ...fieldLabelProps },
+            React.createElement(ReactSelect, { ref: ref, isSearchable: autocomplete, isDisabled: disabled, defaultMenuIsOpen: initialIsOpen, isMulti: multiselect, defaultValue: getReactSelectValue(options, defaultValue), value: getReactSelectValue(options, value), options: options, onChange: (newValue) => {
                     if (!onChange)
                         return;
                     const value = extractValue(newValue, multiselect);
                     onChange(value);
-                }, placeholder: placeholder || t("select"), "aria-required": required, required: required, "aria-invalid": error, inputId: id, styles: styles ? styles(stylesConfig) : stylesConfig, components: Object.assign(Object.assign({ Option: (props) => React.createElement(SelectOption, Object.assign({}, props), props.children), Control: SelectControl, MultiValue: SelectMultiValue, ClearIndicator: SelectClearIndicator, DropdownIndicator: SelectDropdownIndicator, SelectContainer: SelectContainer, Menu: SelectMenu, Input: SelectInput }, (isWindowed ? { MenuList } : {})), components), closeMenuOnSelect: closeMenuOnSelect, classNamePrefix: classNamePrefix, menuPosition: menuPosition, menuPlacement: menuPlacement, maxMenuHeight: numberFromDimension(maxHeight), noOptionsMessage: noOptionsMessage }, props)),
+                }, placeholder: placeholder || t("select"), "aria-required": required, required: required, "aria-invalid": error, inputId: id, styles: styles ? styles(stylesConfig) : stylesConfig, components: {
+                    Option: (props) => React.createElement(SelectOption, { ...props }, props.children),
+                    Control: SelectControl,
+                    MultiValue: SelectMultiValue,
+                    ClearIndicator: SelectClearIndicator,
+                    DropdownIndicator: SelectDropdownIndicator,
+                    SelectContainer: SelectContainer,
+                    Menu: SelectMenu,
+                    Input: SelectInput,
+                    ...(isWindowed ? { MenuList } : {}),
+                    ...components,
+                }, closeMenuOnSelect: closeMenuOnSelect, classNamePrefix: classNamePrefix, menuPosition: menuPosition, menuPlacement: menuPlacement, maxMenuHeight: numberFromDimension(maxHeight), noOptionsMessage: noOptionsMessage, ...props }),
             React.createElement(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList }))));
 });
 export default NDSSelect;

package/dist/src/Select/Select.spec-utils.js

@@ -1,4 +1,5 @@
 import { fireEvent } from "@testing-library/react";
+import { expect } from "vitest";
 export const openDropdown = (element, i) => {
     fireEvent.focus(element.querySelectorAll("input")[i]);
     fireEvent.keyDown(element.querySelectorAll("input")[i], {

package/dist/src/Select/Select.story.d.ts

@@ -1,9 +1,13 @@
 import React from "react";
+import type { StoryObj } from "@storybook/react";
+import Select, { NDSSelectProps } from "./Select";
 declare const _default: {
     title: string;
+    component: <Option extends import("./Select").NDSOption = import("./Select").NDSOption, IsMulti extends boolean = false, Group extends import("react-select").GroupBase<Option> = import("react-select").GroupBase<Option>>(props: NDSSelectProps<Option, IsMulti, Group> & React.RefAttributes<import("react-select/base").default<Option, IsMulti, Group>>) => React.ReactElement;
 };
 export default _default;
-export declare const _Select: () => React.JSX.Element;
+type Story = StoryObj<typeof Select>;
+export declare const _Select: Story;
 export declare const WithStyledProps: () => React.JSX.Element;
 export declare const WithABlankValue: {
     (): React.JSX.Element;

package/dist/src/Select/Select.story.fixture.js

@@ -1,23 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import styled from "styled-components";
 import { SelectOption } from "./SelectOption";
@@ -56,15 +36,15 @@ export const PCNList = [
     { value: "1", label: "PCN1" },
     { value: "9", label: "PCN9" },
 ];
-export const getPhotos = () => __awaiter(void 0, void 0, void 0, function* () {
+export const getPhotos = async () => {
     // returns 5000 items
-    const data = yield fetch("https://jsonplaceholder.typicode.com/photos");
-    const json = yield data.json();
+    const data = await fetch("https://jsonplaceholder.typicode.com/photos");
+    const json = await data.json();
     return json.map(({ title, id }) => ({
         label: title,
         value: id,
     }));
-});
+};
 const Indicator = styled.span(() => ({
     borderRadius: "25%",
     background: "green",
@@ -74,16 +54,14 @@ const Indicator = styled.span(() => ({
     height: "10px",
     marginRight: "5px",
 }));
-export const CustomOption = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
+export const CustomOption = ({ children, ...props }) => {
     const newChildren = (React.createElement(React.Fragment, null,
         React.createElement(Indicator, null),
         children));
-    return React.createElement(SelectOption, Object.assign({}, props), newChildren);
+    return React.createElement(SelectOption, { ...props }, newChildren);
 };
-export const CustomFieldsOption = (_a) => {
-    var props = __rest(_a, []);
-    return (React.createElement(SelectOption, Object.assign({}, props),
+export const CustomFieldsOption = ({ ...props }) => {
+    return (React.createElement(SelectOption, { ...props },
         React.createElement("span", null, props.data.label),
         React.createElement("span", null, props.data.description)));
 };

package/dist/src/Select/Select.story.js

@@ -1,42 +1,20 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { useEffect, useRef, useState } from "react";
 import { action } from "@storybook/addon-actions";
-import { boolean, select, text } from "@storybook/addon-knobs";
 import { Box } from "../Box";
 import { Flex } from "../Flex";
 import { Button } from "../index";
 import Select from "./Select";
 import { CustomOption, getPhotos, options, partnerCompanyName, wrappingOptions, PCNList, errorList, CustomFieldsOption, } from "./Select.story.fixture";
-const SelectWithManyOptions = (_a) => {
-    var { multiselect, labelText } = _a, props = __rest(_a, ["multiselect", "labelText"]);
+const SelectWithManyOptions = ({ multiselect, labelText, ...props }) => {
     const [photoList, setPhotoList] = useState([]);
-    const setOptions = () => __awaiter(void 0, void 0, void 0, function* () {
-        const result = yield getPhotos();
+    const setOptions = async () => {
+        const result = await getPhotos();
         setPhotoList(result);
-    });
+    };
     useEffect(() => {
         setOptions();
     }, []);
-    return React.createElement(Select, Object.assign({ multiselect: multiselect, options: photoList, labelText: labelText }, props));
+    return React.createElement(Select, { multiselect: multiselect, options: photoList, labelText: labelText, ...props });
 };
 class SelectWithState extends React.Component {
     constructor(props) {
@@ -54,14 +32,106 @@ class SelectWithState extends React.Component {
     render() {
         const { selectedValue } = this.state;
         return (React.createElement(Flex, { flexDirection: "column", gap: "x2", alignItems: "flex-start" },
-            React.createElement(Select, Object.assign({ className: "Select", classNamePrefix: "SelectTest", onChange: this.handleChange, value: selectedValue, options: options }, this.props)),
+            React.createElement(Select, { className: "Select", classNamePrefix: "SelectTest", onChange: this.handleChange, value: selectedValue, options: options, ...this.props }),
             React.createElement(Button, { onClick: this.clearSelection }, "Clear selection")));
     }
 }
 export default {
     title: "Components/Select",
+    component: Select,
+};
+export const _Select = {
+    args: {
+        options,
+        autocomplete: true,
+        className: undefined,
+        classNamePrefix: undefined,
+        closeMenuOnSelect: true,
+        disabled: false,
+        defaultValue: undefined,
+        errorMessage: "",
+        labelText: "Inventory Status",
+        helpText: undefined,
+        noOptionsMessage: () => "No options",
+        required: false,
+        requirementText: undefined,
+        id: undefined,
+        maxHeight: "248px",
+        menuPosition: "absolute",
+        multiselect: false,
+        name: undefined,
+        placeholder: " ",
+        value: undefined,
+        menuIsOpen: undefined,
+        onMenuOpen: action("on menu open"),
+        onMenuClose: action("on menu close"),
+        onChange: action("selection changed"),
+        onInputChange: action("typed input value changed"),
+        onBlur: action("blurred"),
+    },
+    argTypes: {
+        autocomplete: {
+            control: { type: "boolean" },
+        },
+        className: {
+            control: { type: "text" },
+        },
+        classNamePrefix: {
+            control: { type: "text" },
+        },
+        closeMenuOnSelect: {
+            control: { type: "boolean" },
+        },
+        disabled: {
+            control: { type: "boolean" },
+        },
+        defaultValue: {
+            control: { type: "select" },
+            options: [undefined, ...options.map(({ value }) => value)],
+        },
+        errorMessage: {
+            control: { type: "text" },
+        },
+        labelText: {
+            control: { type: "text" },
+        },
+        helpText: {
+            control: { type: "text" },
+        },
+        required: {
+            control: { type: "boolean" },
+        },
+        requirementText: {
+            control: { type: "text" },
+        },
+        id: {
+            control: { type: "text" },
+        },
+        maxHeight: {
+            control: { type: "text" },
+        },
+        menuPosition: {
+            control: { type: "select" },
+            options: ["absolute", "fixed"],
+        },
+        multiselect: {
+            control: { type: "boolean" },
+        },
+        name: {
+            control: { type: "text" },
+        },
+        placeholder: {
+            control: { type: "text" },
+        },
+        value: {
+            control: { type: "select" },
+            options: [undefined, ...options.map(({ value }) => value)],
+        },
+        menuIsOpen: {
+            control: { type: "boolean" },
+        },
+    },
 };
-export const _Select = () => (React.createElement(Select, { options: options, autocomplete: boolean("autocomplete", true), className: text("className", undefined), classNamePrefix: text("classNamePrefix", undefined), closeMenuOnSelect: boolean("closeMenuOnSelect", true), disabled: boolean("disabled", false), defaultValue: select("defaultValue", [undefined, ...options.map(({ value }) => value)], undefined), errorMessage: text("errorMessage", ""), labelText: text("labelText", "Inventory Status"), helpText: text("helpText", undefined), noOptionsMessage: () => "No options", required: boolean("required", false), requirementText: text("requirementText", undefined), id: text("id", undefined), maxHeight: text("maxHeight", "248px"), menuPosition: select("menuPosition", ["absolute", "fixed"], "absolute"), multiselect: boolean("multiselect", false), name: text("name", undefined), placeholder: text("placeholder", " "), value: select("value", [undefined, ...options.map(({ value }) => value)], undefined), menuIsOpen: boolean("menuIsOpen", undefined), onMenuOpen: action("on menu open"), onMenuClose: action("on menu close"), onChange: action("selection changed"), onInputChange: action("typed input value changed"), onBlur: action("blurred") }));
 export const WithStyledProps = () => {
     return (React.createElement(Select, { initialIsOpen: true, placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), maxWidth: "300px", options: options, labelText: "Default size", onInputChange: action("typed input value changed") }));
 };
@@ -123,7 +193,7 @@ WithWrappingText.story = {
     name: "With wrapping text",
 };
 export const WithMultiselect = (props) => {
-    return (React.createElement(Select, Object.assign({ defaultValue: [partnerCompanyName[0].value, partnerCompanyName[2].value], noOptionsMessage: () => "Nothing to see here", placeholder: "Please select inventory status", options: PCNList, labelText: "Select PCN", className: "Select", multiselect: true }, props)));
+    return (React.createElement(Select, { defaultValue: [partnerCompanyName[0].value, partnerCompanyName[2].value], noOptionsMessage: () => "Nothing to see here", placeholder: "Please select inventory status", options: PCNList, labelText: "Select PCN", className: "Select", multiselect: true, ...props }));
 };
 WithMultiselect.story = {
     name: "with multiselect",
@@ -181,7 +251,13 @@ export const WithTopMenuPlacement = () => {
 };
 export const WithCustomStyles = () => {
     return (React.createElement(Select, { options: options, menuPlacement: "top", styles: (styles) => {
-            return Object.assign(Object.assign({}, styles), { control: (provided, props) => (Object.assign(Object.assign({}, styles.control(provided, props)), { border: "2px solid lightblue" })) });
+            return {
+                ...styles,
+                control: (provided, props) => ({
+                    ...styles.control(provided, props),
+                    border: "2px solid lightblue",
+                }),
+            };
         } }));
 };
 export const WithCustomOptionFields = () => {

package/dist/src/Select/SelectComponents.js

@@ -3,29 +3,29 @@ import { components, } from "react-select";
 export function SelectControl(props) {
     const { isFocused } = props;
     return (React.createElement("div", { "data-testid": "select-control" },
-        React.createElement(components.Control, Object.assign({ className: isFocused ? "nds-select--is-focused" : null, isFocused: isFocused }, props), props.children)));
+        React.createElement(components.Control, { className: isFocused ? "nds-select--is-focused" : null, isFocused: isFocused, ...props }, props.children)));
 }
 export function SelectMultiValue(props) {
     return (React.createElement("div", { "data-testid": "select-multivalue" },
-        React.createElement(components.MultiValue, Object.assign({}, props), props.children)));
+        React.createElement(components.MultiValue, { ...props }, props.children)));
 }
 export function SelectClearIndicator(props) {
     return (React.createElement("div", { "data-testid": "select-clear" },
-        React.createElement(components.ClearIndicator, Object.assign({}, props))));
+        React.createElement(components.ClearIndicator, { ...props })));
 }
 export function SelectDropdownIndicator(props) {
     return (React.createElement("div", { "data-testid": "select-arrow" },
-        React.createElement(components.DropdownIndicator, Object.assign({}, props))));
+        React.createElement(components.DropdownIndicator, { ...props })));
 }
 export function SelectMenu(props) {
     return (React.createElement("div", { "data-testid": "select-dropdown" },
-        React.createElement(components.Menu, Object.assign({}, props), props.children)));
+        React.createElement(components.Menu, { ...props }, props.children)));
 }
 export function SelectContainer(props) {
     return (React.createElement("div", { "data-testid": "select-container" },
-        React.createElement(components.SelectContainer, Object.assign({}, props), props.children)));
+        React.createElement(components.SelectContainer, { ...props }, props.children)));
 }
 export function SelectInput(props) {
     return (React.createElement("div", { "data-testid": "select-input" },
-        React.createElement(components.Input, Object.assign({}, props), props.children)));
+        React.createElement(components.Input, { ...props }, props.children)));
 }

package/dist/src/Select/SelectOption.js

@@ -38,5 +38,5 @@ export const StyledOption = styled.div(typography, ({ isSelected, isFocused, the
 }));
 export function SelectOption(props) {
     return (React.createElement(StyledOption, { isSelected: props.isSelected, isFocused: props.isFocused, "data-testid": "select-option" },
-        React.createElement(components.Option, Object.assign({}, props), props.children)));
+        React.createElement(components.Option, { ...props }, props.children)));
 }

package/dist/src/Select/customReactSelectStyles.js

@@ -41,42 +41,64 @@ const customStyles = ({ theme, error, maxHeight, windowed, hasIcon, variant, has
         option: () => ({
             height: 38,
         }),
-        clearIndicator: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.midGrey })),
-        control: (provided, state) => (Object.assign(Object.assign(Object.assign({}, provided), { display: "flex", minHeight: theme.space.x5, paddingLeft: theme.space.x1, position: "relative", width: "100%", fontSize: theme.fontSizes.base, lineHeight: theme.lineHeights.base, color: state.isDisabled ? transparentize(0.6667, theme.colors.black) : theme.colors.black, background: state.isDisabled ? theme.colors.whiteGrey : theme.colors.white, borderColor: getBorderColor({
+        clearIndicator: (provided) => ({
+            ...provided,
+            color: theme.colors.midGrey,
+        }),
+        control: (provided, state) => ({
+            ...provided,
+            display: "flex",
+            minHeight: theme.space.x5,
+            paddingLeft: theme.space.x1,
+            position: "relative",
+            width: "100%",
+            fontSize: theme.fontSizes.base,
+            lineHeight: theme.lineHeights.base,
+            color: state.isDisabled ? transparentize(0.6667, theme.colors.black) : theme.colors.black,
+            background: state.isDisabled ? theme.colors.whiteGrey : theme.colors.white,
+            borderColor: getBorderColor({
                 errored: error,
                 disabled: state.isDisabled,
                 isOpen: state.selectProps.menuIsOpen,
                 isFocused: state.isFocused,
                 theme,
-            }), boxSizing: "border-box", boxShadow: getShadow({
+            }),
+            boxSizing: "border-box",
+            boxShadow: getShadow({
                 errored: error,
                 isOpen: state.selectProps.menuIsOpen,
                 theme,
-            }), borderRadius: theme.radii.medium, borderBottomLeftRadius: getControlBorderRadius({
+            }),
+            borderRadius: theme.radii.medium,
+            borderBottomLeftRadius: getControlBorderRadius({
                 border: "bottom",
                 isMenuOpen: state.selectProps.menuIsOpen,
                 menuLength: state.selectProps.options.length,
                 menuPlacement: state.selectProps.menuPlacement,
                 theme: theme,
-            }), borderBottomRightRadius: getControlBorderRadius({
+            }),
+            borderBottomRightRadius: getControlBorderRadius({
                 border: "bottom",
                 isMenuOpen: state.selectProps.menuIsOpen,
                 menuLength: state.selectProps.options.length,
                 menuPlacement: state.selectProps.menuPlacement,
                 theme: theme,
-            }), borderTopRightRadius: getControlBorderRadius({
+            }),
+            borderTopRightRadius: getControlBorderRadius({
                 border: "top",
                 isMenuOpen: state.selectProps.menuIsOpen,
                 menuLength: state.selectProps.options.length,
                 menuPlacement: state.selectProps.menuPlacement,
                 theme: theme,
-            }), borderTopLeftRadius: getControlBorderRadius({
+            }),
+            borderTopLeftRadius: getControlBorderRadius({
                 border: "top",
                 isMenuOpen: state.selectProps.menuIsOpen,
                 menuLength: state.selectProps.options.length,
                 menuPlacement: state.selectProps.menuPlacement,
                 theme: theme,
-            }), "&:hover, &:focus": {
+            }),
+            "&:hover, &:focus": {
                 borderColor: getBorderColor({
                     errored: error,
                     disabled: state.isDisabled,
@@ -84,68 +106,154 @@ const customStyles = ({ theme, error, maxHeight, windowed, hasIcon, variant, has
                     isFocused: true,
                     theme,
                 }),
-            } }), (hasIcon && {
-            paddingLeft: `calc(${theme.space.x3} + ${theme.space.x1_5})`,
-        }))),
-        dropdownIndicator: (provided) => (Object.assign(Object.assign(Object.assign({}, provided), (!hasDefaultOptions && { display: "none" })), { color: theme.colors.midGrey })),
-        indicatorsContainer: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.midGrey })),
-        singleValue: (provided) => (Object.assign(Object.assign({}, provided), { marginLeft: 2, marginRight: 2, position: "absolute", top: "50%", transform: "translateY(-50%)" })),
-        valueContainer: (provided) => (Object.assign(Object.assign(Object.assign({}, provided), { padding: 0, display: "flex", overflow: "auto", maxHeight: "150px", gap: theme.space.half, paddingTop: theme.space.none, paddingBottom: theme.space.none }), stylesForVariant({
-            touch: {
-                fontSize: "md",
-                lineHeight: "base",
             },
-        }, variant))),
-        menu: (provided, state) => (Object.assign(Object.assign({}, provided), { marginTop: 0, marginBottom: 0, position: "absolute", overflowX: "auto", zIndex: 100, width: "100%", background: theme.colors.white, borderWidth: "1px", borderColor: getBorderColor({
+            ...(hasIcon && {
+                paddingLeft: `calc(${theme.space.x3} + ${theme.space.x1_5})`,
+            }),
+        }),
+        dropdownIndicator: (provided) => ({
+            ...provided,
+            ...(!hasDefaultOptions && { display: "none" }),
+            color: theme.colors.midGrey,
+        }),
+        indicatorsContainer: (provided) => ({
+            ...provided,
+            color: theme.colors.midGrey,
+        }),
+        singleValue: (provided) => ({
+            ...provided,
+            marginLeft: 2,
+            marginRight: 2,
+            position: "absolute",
+            top: "50%",
+            transform: "translateY(-50%)",
+        }),
+        valueContainer: (provided) => ({
+            ...provided,
+            padding: 0,
+            display: "flex",
+            overflow: "auto",
+            maxHeight: "150px",
+            gap: theme.space.half,
+            paddingTop: theme.space.none,
+            paddingBottom: theme.space.none,
+            ...stylesForVariant({
+                touch: {
+                    fontSize: "md",
+                    lineHeight: "base",
+                },
+            }, variant),
+        }),
+        menu: (provided, state) => ({
+            ...provided,
+            marginTop: 0,
+            marginBottom: 0,
+            position: "absolute",
+            overflowX: "auto",
+            zIndex: 100,
+            width: "100%",
+            background: theme.colors.white,
+            borderWidth: "1px",
+            borderColor: getBorderColor({
                 errored: error,
                 isOpen: true,
                 isFocused: false,
                 theme,
-            }), borderLeftStyle: "solid", borderRightStyle: "solid", borderBottomStyle: getMenuBorderRadius({
+            }),
+            borderLeftStyle: "solid",
+            borderRightStyle: "solid",
+            borderBottomStyle: getMenuBorderRadius({
                 border: "bottom",
                 menuPlacement: state.selectProps.menuPlacement,
                 theme,
-            }).style, borderTopStyle: getMenuBorderRadius({ border: "top", menuPlacement: state.selectProps.menuPlacement, theme })
-                .style, borderBottomLeftRadius: getMenuBorderRadius({
+            }).style,
+            borderTopStyle: getMenuBorderRadius({ border: "top", menuPlacement: state.selectProps.menuPlacement, theme })
+                .style,
+            borderBottomLeftRadius: getMenuBorderRadius({
                 border: "bottom",
                 menuPlacement: state.selectProps.menuPlacement,
                 theme,
-            }).radius, borderBottomRightRadius: getMenuBorderRadius({
+            }).radius,
+            borderBottomRightRadius: getMenuBorderRadius({
                 border: "bottom",
                 menuPlacement: state.selectProps.menuPlacement,
                 theme,
-            }).radius, borderTopLeftRadius: getMenuBorderRadius({ border: "top", menuPlacement: state.selectProps.menuPlacement, theme })
-                .radius, borderTopRightRadius: getMenuBorderRadius({
+            }).radius,
+            borderTopLeftRadius: getMenuBorderRadius({ border: "top", menuPlacement: state.selectProps.menuPlacement, theme })
+                .radius,
+            borderTopRightRadius: getMenuBorderRadius({
                 border: "top",
                 menuPlacement: state.selectProps.menuPlacement,
                 theme,
-            }).radius, boxShadow: getShadow({ errored: error, isOpen: true, theme }) })),
-        menuList: (provided) => (Object.assign(Object.assign({}, provided), { minWidth: "fit-content", padding: 0, maxHeight: numberFromDimension(maxHeight), borderRadius: theme.radii.medium, marginTop: windowed ? "-4px" : 0, marginBottom: windowed ? "-4px" : 0 })),
-        multiValue: (provided) => (Object.assign(Object.assign({}, provided), { background: theme.colors.lightGrey, color: theme.colors.black, margin: 0 })),
-        multiValueLabel: () => (Object.assign({ textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden", color: theme.colors.black, borderRadius: theme.radii.small, fontSize: theme.fontSizes.small, padding: theme.space.half, paddingLeft: theme.space.x1 }, stylesForVariant({
-            touch: {
-                fontSize: "md",
-                lineHeight: "base",
-            },
-        }, variant))),
-        multiValueRemove: (provided) => (Object.assign(Object.assign(Object.assign({}, provided), { svg: { fill: theme.colors.black, height: theme.sizes.x2, width: theme.sizes.x2 }, borderBottomLeftRadius: 0, borderTopLeftRadius: 0, padding: theme.space.half, paddingLeft: theme.space.x1, "&:hover": {
+            }).radius,
+            boxShadow: getShadow({ errored: error, isOpen: true, theme }),
+        }),
+        menuList: (provided) => ({
+            ...provided,
+            minWidth: "fit-content",
+            padding: 0,
+            maxHeight: numberFromDimension(maxHeight),
+            borderRadius: theme.radii.medium,
+            marginTop: windowed ? "-4px" : 0,
+            marginBottom: windowed ? "-4px" : 0,
+        }),
+        multiValue: (provided) => ({
+            ...provided,
+            background: theme.colors.lightGrey,
+            color: theme.colors.black,
+            margin: 0,
+        }),
+        multiValueLabel: () => ({
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            color: theme.colors.black,
+            borderRadius: theme.radii.small,
+            fontSize: theme.fontSizes.small,
+            padding: theme.space.half,
+            paddingLeft: theme.space.x1,
+            ...stylesForVariant({
+                touch: {
+                    fontSize: "md",
+                    lineHeight: "base",
+                },
+            }, variant),
+        }),
+        multiValueRemove: (provided) => ({
+            ...provided,
+            svg: { fill: theme.colors.black, height: theme.sizes.x2, width: theme.sizes.x2 },
+            borderBottomLeftRadius: 0,
+            borderTopLeftRadius: 0,
+            padding: theme.space.half,
+            paddingLeft: theme.space.x1,
+            "&:hover": {
                 background: theme.colors.darkGrey,
                 cursor: "pointer",
                 svg: { fill: theme.colors.white },
-            } }), stylesForVariant({
-            touch: {
-                fontSize: "md",
-                lineHeight: "base",
             },
-        }, variant))),
-        noOptionsMessage: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.black, fontSize: theme.fontSizes.small })),
-        indicatorSeparator: (provided, state) => (Object.assign(Object.assign({}, provided), { display: showIndicatorSeparator({
+            ...stylesForVariant({
+                touch: {
+                    fontSize: "md",
+                    lineHeight: "base",
+                },
+            }, variant),
+        }),
+        noOptionsMessage: (provided) => ({
+            ...provided,
+            color: theme.colors.black,
+            fontSize: theme.fontSizes.small,
+        }),
+        indicatorSeparator: (provided, state) => ({
+            ...provided,
+            display: showIndicatorSeparator({
                 hasValue: state.hasValue,
                 isClearable: state.selectProps.isClearable,
                 isMulti: state.isMulti,
             })
                 ? "block"
-                : "none", borderLeft: `1px solid ${theme.colors.grey}` })),
+                : "none",
+            borderLeft: `1px solid ${theme.colors.grey}`,
+        }),
         placeholder: (state) => {
             return {
                 label: "placeholder",

package/dist/src/Select/lib.js

@@ -56,12 +56,11 @@ export function checkOptionsAreValid(options) {
     }
 }
 export function getOption(options, value) {
-    var _a;
     if (Array.isArray(value)) {
         return value.map((o) => getOption(options, o));
     }
     if (options.length > 0 && value !== undefined) {
-        return (_a = options.find((o) => o.value === value)) !== null && _a !== void 0 ? _a : null;
+        return options.find((o) => o.value === value) ?? null;
     }
     return value;
 }