@nulogy/components 16.0.0 → 16.0.2

package/dist/src/Select/Select.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { forwardRef } from "react";
 import ReactSelect from "react-select";
 import { useTranslation } from "react-i18next";
@@ -37,25 +38,22 @@ const NDSSelect = forwardRef(({ value, onChange, defaultValue, disabled, errorMe
         maxHeight,
         windowed: options.length > windowThreshold,
     });
-    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: {
-                    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 }))));
+    return (_jsx(Field, { ...styledProps, children: _jsxs(MaybeFieldLabel, { ...fieldLabelProps, children: [_jsx(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: {
+                        Option: (props) => _jsx(SelectOption, { ...props, children: 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 }), _jsx(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })] }) }));
 });
 export default NDSSelect;

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

@@ -8,107 +8,107 @@ declare const _default: {
 export default _default;
 type Story = StoryObj<typeof Select>;
 export declare const _Select: Story;
-export declare const WithStyledProps: () => React.JSX.Element;
+export declare const WithStyledProps: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithABlankValue: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithAnOptionSelected: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithState: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const SetToDisabled: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithErrorMessage: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithErrorList: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const Required: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const WithAClearButton: () => React.JSX.Element;
+export declare const WithAClearButton: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithAllFieldLabelProps: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithCustomId: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithSmallerMaxHeight: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithWrappingText: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithMultiselect: {
-    (props: any): React.JSX.Element;
+    (props: any): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithCloseMenuOnSelectTurnedOff: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const TestMultiselectOverflow: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithFixedPositioning: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const WithFetchedOptions: () => React.JSX.Element;
+export declare const WithFetchedOptions: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithCustomOptionComponent: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const UsingRefToControlFocus: () => React.JSX.Element;
-export declare const WithTopMenuPlacement: () => React.JSX.Element;
-export declare const WithCustomStyles: () => React.JSX.Element;
-export declare const WithCustomOptionFields: () => React.JSX.Element;
-export declare const WithACustomNoOptionsMessage: () => React.JSX.Element;
+export declare const UsingRefToControlFocus: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithTopMenuPlacement: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCustomStyles: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCustomOptionFields: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithACustomNoOptionsMessage: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { GroupBase } from "react-select";
 import { SelectOptionProps } from "./SelectOption";
 import { NDSOption } from "./Select";
@@ -17,8 +16,8 @@ export declare const PCNList: {
     label: string;
 }[];
 export declare const getPhotos: () => Promise<any>;
-export declare const CustomOption: ({ children, ...props }: SelectOptionProps<NDSOption, true, GroupBase<NDSOption>>) => React.JSX.Element;
+export declare const CustomOption: ({ children, ...props }: SelectOptionProps<NDSOption, true, GroupBase<NDSOption>>) => import("react/jsx-runtime").JSX.Element;
 export interface DescriptiveOption extends NDSOption {
     description: string;
 }
-export declare const CustomFieldsOption: ({ ...props }: SelectOptionProps<DescriptiveOption, true, GroupBase<DescriptiveOption>>) => React.JSX.Element;
+export declare const CustomFieldsOption: ({ ...props }: SelectOptionProps<DescriptiveOption, true, GroupBase<DescriptiveOption>>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import { SelectOption } from "./SelectOption";
 export const errorList = ["Error message 1", "Error message 2"];
@@ -55,13 +55,9 @@ const Indicator = styled.span(() => ({
     marginRight: "5px",
 }));
 export const CustomOption = ({ children, ...props }) => {
-    const newChildren = (React.createElement(React.Fragment, null,
-        React.createElement(Indicator, null),
-        children));
-    return React.createElement(SelectOption, { ...props }, newChildren);
+    const newChildren = (_jsxs(_Fragment, { children: [_jsx(Indicator, {}), children] }));
+    return _jsx(SelectOption, { ...props, children: newChildren });
 };
 export const CustomFieldsOption = ({ ...props }) => {
-    return (React.createElement(SelectOption, { ...props },
-        React.createElement("span", null, props.data.label),
-        React.createElement("span", null, props.data.description)));
+    return (_jsxs(SelectOption, { ...props, children: [_jsx("span", { children: props.data.label }), _jsx("span", { children: props.data.description })] }));
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect, useRef, useState } from "react";
 import { action } from "@storybook/addon-actions";
 import { Box } from "../Box";
@@ -14,7 +15,7 @@ const SelectWithManyOptions = ({ multiselect, labelText, ...props }) => {
     useEffect(() => {
         setOptions();
     }, []);
-    return React.createElement(Select, { multiselect: multiselect, options: photoList, labelText: labelText, ...props });
+    return _jsx(Select, { multiselect: multiselect, options: photoList, labelText: labelText, ...props });
 };
 class SelectWithState extends React.Component {
     constructor(props) {
@@ -31,9 +32,7 @@ class SelectWithState extends React.Component {
     }
     render() {
         const { selectedValue } = this.state;
-        return (React.createElement(Flex, { flexDirection: "column", gap: "x2", alignItems: "flex-start" },
-            React.createElement(Select, { className: "Select", classNamePrefix: "SelectTest", onChange: this.handleChange, value: selectedValue, options: options, ...this.props }),
-            React.createElement(Button, { onClick: this.clearSelection }, "Clear selection")));
+        return (_jsxs(Flex, { flexDirection: "column", gap: "x2", alignItems: "flex-start", children: [_jsx(Select, { className: "Select", classNamePrefix: "SelectTest", onChange: this.handleChange, value: selectedValue, options: options, ...this.props }), _jsx(Button, { onClick: this.clearSelection, children: "Clear selection" })] }));
     }
 }
 export default {
@@ -133,105 +132,86 @@ export const _Select = {
     },
 };
 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") }));
+    return (_jsx(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") }));
 };
 export const WithABlankValue = () => {
     const optionsWithBlank = [{ value: null, label: "" }, ...options];
-    return (React.createElement(Select, { placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: optionsWithBlank, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
+    return (_jsx(Select, { placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: optionsWithBlank, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
 };
 WithABlankValue.story = {
     name: "with a blank value",
 };
-export const WithAnOptionSelected = () => (React.createElement(React.Fragment, null,
-    React.createElement(Select, { value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }),
-    React.createElement("br", null),
-    React.createElement(Select, { value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", initialIsOpen: true, onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })));
+export const WithAnOptionSelected = () => (_jsxs(_Fragment, { children: [_jsx(Select, { value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }), _jsx("br", {}), _jsx(Select, { value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", initialIsOpen: true, onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })] }));
 WithAnOptionSelected.story = {
     name: "with an option selected",
 };
-export const WithState = () => (React.createElement(SelectWithState, { selectedValue: "foo", placeholder: "Please select inventory status", options: options, labelText: "Inventory status" }));
+export const WithState = () => (_jsx(SelectWithState, { selectedValue: "foo", placeholder: "Please select inventory status", options: options, labelText: "Inventory status" }));
 WithState.story = {
     name: "with state",
 };
-export const SetToDisabled = () => (React.createElement(Select, { placeholder: "Please select inventory status", options: options, onChange: action("selection changed"), onBlur: action("blurred"), disabled: true, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
+export const SetToDisabled = () => (_jsx(Select, { placeholder: "Please select inventory status", options: options, onChange: action("selection changed"), onBlur: action("blurred"), disabled: true, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
 SetToDisabled.story = {
     name: "set to disabled",
 };
-export const WithErrorMessage = () => (React.createElement(React.Fragment, null,
-    React.createElement(Select, { placeholder: "Please select inventory status", options: options, errorMessage: "Please select an inventory status", labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }),
-    React.createElement("br", null),
-    React.createElement(Select, { placeholder: "Please select inventory status", options: options, errorMessage: "Please select an inventory status", initialIsOpen: true, onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })));
+export const WithErrorMessage = () => (_jsxs(_Fragment, { children: [_jsx(Select, { placeholder: "Please select inventory status", options: options, errorMessage: "Please select an inventory status", labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }), _jsx("br", {}), _jsx(Select, { placeholder: "Please select inventory status", options: options, errorMessage: "Please select an inventory status", initialIsOpen: true, onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })] }));
 WithErrorMessage.story = {
     name: "with error message",
 };
-export const WithErrorList = () => (React.createElement(React.Fragment, null,
-    React.createElement(Select, { placeholder: "Please select inventory status", options: options, errorMessage: "Please select an inventory status", errorList: errorList, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }),
-    React.createElement("br", null),
-    React.createElement(Select, { placeholder: "Please select inventory status", options: options, errorMessage: "Please select an inventory status", errorList: errorList, initialIsOpen: true, onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })));
+export const WithErrorList = () => (_jsxs(_Fragment, { children: [_jsx(Select, { placeholder: "Please select inventory status", options: options, errorMessage: "Please select an inventory status", errorList: errorList, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }), _jsx("br", {}), _jsx(Select, { placeholder: "Please select inventory status", options: options, errorMessage: "Please select an inventory status", errorList: errorList, initialIsOpen: true, onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })] }));
 WithErrorList.story = {
     name: "with error list",
 };
-export const Required = () => (React.createElement(Select, { placeholder: "Please select inventory status", options: options, required: true, requirementText: "(Required)", labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
+export const Required = () => (_jsx(Select, { placeholder: "Please select inventory status", options: options, required: true, requirementText: "(Required)", labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
 Required.story = {
     name: "set to required",
 };
-export const WithAClearButton = () => (React.createElement(Select, { isClearable: true, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
-export const WithAllFieldLabelProps = () => (React.createElement(Select, { placeholder: "Please select inventory status", options: options, labelText: "Inventory status", helpText: "Additional information about input", hint: "This is a hint for the input field", requirementText: "(Required)", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
+export const WithAClearButton = () => (_jsx(Select, { isClearable: true, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
+export const WithAllFieldLabelProps = () => (_jsx(Select, { placeholder: "Please select inventory status", options: options, labelText: "Inventory status", helpText: "Additional information about input", hint: "This is a hint for the input field", requirementText: "(Required)", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
 WithAllFieldLabelProps.story = {
     name: "with all field label props",
 };
-export const WithCustomId = () => (React.createElement(Select, { id: "my-custom-id", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", helpText: "Additional information about input", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
+export const WithCustomId = () => (_jsx(Select, { id: "my-custom-id", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", helpText: "Additional information about input", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
 WithCustomId.story = {
     name: "with custom id",
 };
-export const WithSmallerMaxHeight = () => (React.createElement(Select, { initialIsOpen: true, maxHeight: "132px", value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
+export const WithSmallerMaxHeight = () => (_jsx(Select, { initialIsOpen: true, maxHeight: "132px", value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
 WithSmallerMaxHeight.story = {
     name: "with smaller maxHeight",
 };
-export const WithWrappingText = () => (React.createElement(Select, { initialIsOpen: true, value: wrappingOptions[0].value, placeholder: "Please select inventory status", options: wrappingOptions, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
+export const WithWrappingText = () => (_jsx(Select, { initialIsOpen: true, value: wrappingOptions[0].value, placeholder: "Please select inventory status", options: wrappingOptions, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
 WithWrappingText.story = {
     name: "With wrapping text",
 };
 export const WithMultiselect = (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 }));
+    return (_jsx(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",
 };
 export const WithCloseMenuOnSelectTurnedOff = () => {
-    return (React.createElement(Select, { defaultValue: [partnerCompanyName[0].value, partnerCompanyName[2].value], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: PCNList, labelText: "Select PCN", className: "Select", multiselect: true, closeMenuOnSelect: false }));
+    return (_jsx(Select, { defaultValue: [partnerCompanyName[0].value, partnerCompanyName[2].value], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: PCNList, labelText: "Select PCN", className: "Select", multiselect: true, closeMenuOnSelect: false }));
 };
 WithCloseMenuOnSelectTurnedOff.story = {
     name: "with closeMenuOnSelect turned off",
 };
-export const TestMultiselectOverflow = () => (React.createElement(React.Fragment, null,
-    React.createElement(Select, { defaultValue: ["accepted", "assigned"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }),
-    React.createElement(Box, { width: "300px" },
-        React.createElement(Select, { defaultValue: partnerCompanyName.map((item) => item.value), noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: partnerCompanyName, labelText: "PCN", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") })),
-    React.createElement(Box, { width: "400px" },
-        React.createElement(Select, { defaultValue: options.map((item) => item.value), noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }))));
+export const TestMultiselectOverflow = () => (_jsxs(_Fragment, { children: [_jsx(Select, { defaultValue: ["accepted", "assigned"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }), _jsx(Box, { width: "300px", children: _jsx(Select, { defaultValue: partnerCompanyName.map((item) => item.value), noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: partnerCompanyName, labelText: "PCN", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }) }), _jsx(Box, { width: "400px", children: _jsx(Select, { defaultValue: options.map((item) => item.value), noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }) })] }));
 TestMultiselectOverflow.story = {
     name: "test multiselect overflow",
 };
-export const WithFixedPositioning = () => (React.createElement(React.Fragment, null,
-    React.createElement(Box, { style: {
+export const WithFixedPositioning = () => (_jsx(_Fragment, { children: _jsx(Box, { style: {
             position: "relative",
             overflow: "hidden",
             width: "300px",
             height: "100px",
-        } },
-        React.createElement(Select, { defaultValue: ["accepted", "assigned"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", menuPosition: "fixed" }))));
+        }, children: _jsx(Select, { defaultValue: ["accepted", "assigned"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", menuPosition: "fixed" }) }) }));
 WithFixedPositioning.story = {
     name: "with fixed positioning",
 };
-export const WithFetchedOptions = () => (React.createElement(Box, { style: { width: "300px" } },
-    React.createElement(SelectWithManyOptions, { labelText: "Select from many options:" }),
-    React.createElement(SelectWithManyOptions, { multiselect: true, labelText: "Multiselect many options:" })));
+export const WithFetchedOptions = () => (_jsxs(Box, { style: { width: "300px" }, children: [_jsx(SelectWithManyOptions, { labelText: "Select from many options:" }), _jsx(SelectWithManyOptions, { multiselect: true, labelText: "Multiselect many options:" })] }));
 export const WithCustomOptionComponent = () => {
-    return (React.createElement(Box, { position: "relative", overflow: "hidden", width: "300px", height: "600px" },
-        React.createElement(Select, { defaultValue: ["accepted"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, components: {
+    return (_jsx(Box, { position: "relative", overflow: "hidden", width: "300px", height: "600px", children: _jsx(Select, { defaultValue: ["accepted"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, components: {
                 Option: CustomOption,
-            }, multiselect: true, labelText: "Inventory status", menuPosition: "fixed" })));
+            }, multiselect: true, labelText: "Inventory status", menuPosition: "fixed" }) }));
 };
 WithCustomOptionComponent.story = {
     name: "with custom option component",
@@ -241,16 +221,13 @@ export const UsingRefToControlFocus = () => {
     const handleClick = () => {
         multiSelectRef.current.focus();
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Select, { defaultValue: ["accepted"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, ref: multiSelectRef, multiselect: true, labelText: "Inventory status", menuPosition: "fixed" }),
-        React.createElement(Button, { onClick: handleClick }, "Focus the Input")));
+    return (_jsxs(_Fragment, { children: [_jsx(Select, { defaultValue: ["accepted"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, ref: multiSelectRef, multiselect: true, labelText: "Inventory status", menuPosition: "fixed" }), _jsx(Button, { onClick: handleClick, children: "Focus the Input" })] }));
 };
 export const WithTopMenuPlacement = () => {
-    return (React.createElement(Flex, { height: "100vh", alignItems: "center", justifyContent: "center" },
-        React.createElement(Select, { options: options, menuPlacement: "top" })));
+    return (_jsx(Flex, { height: "100vh", alignItems: "center", justifyContent: "center", children: _jsx(Select, { options: options, menuPlacement: "top" }) }));
 };
 export const WithCustomStyles = () => {
-    return (React.createElement(Select, { options: options, menuPlacement: "top", styles: (styles) => {
+    return (_jsx(Select, { options: options, menuPlacement: "top", styles: (styles) => {
             return {
                 ...styles,
                 control: (provided, props) => ({
@@ -265,8 +242,8 @@ export const WithCustomOptionFields = () => {
         { value: "accepted", label: "Accepted", description: "This item has been accepted" },
         { value: "assigned", label: "Assigned to a line", description: "This item is assigned to a production line" },
     ];
-    return (React.createElement(Select, { defaultValue: descriptiveOptions[0].value, options: descriptiveOptions, components: {
+    return (_jsx(Select, { defaultValue: descriptiveOptions[0].value, options: descriptiveOptions, components: {
             Option: CustomFieldsOption,
         }, labelText: "Inventory status" }));
 };
-export const WithACustomNoOptionsMessage = () => (React.createElement(Select, { placeholder: "Please select inventory status", options: options, noOptionsMessage: () => "No statuses found", labelText: "Inventory status", onInputChange: action("typed input value changed") }));
+export const WithACustomNoOptionsMessage = () => (_jsx(Select, { placeholder: "Please select inventory status", options: options, noOptionsMessage: () => "No statuses found", labelText: "Inventory status", onInputChange: action("typed input value changed") }));

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

@@ -1,10 +1,9 @@
-import React from "react";
 import { ClearIndicatorProps, ContainerProps, ControlProps, DropdownIndicatorProps, InputProps, MenuProps, MultiValueProps, GroupBase } from "react-select";
 import { NDSOption } from "./Select";
-export declare function SelectControl<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: ControlProps<Option, IsMulti, Group>): React.JSX.Element;
-export declare function SelectMultiValue<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: MultiValueProps<Option, IsMulti, Group>): React.JSX.Element;
-export declare function SelectClearIndicator<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: ClearIndicatorProps<Option, IsMulti, Group>): React.JSX.Element;
-export declare function SelectDropdownIndicator<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: DropdownIndicatorProps<Option, IsMulti, Group>): React.JSX.Element;
-export declare function SelectMenu<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: MenuProps<Option, IsMulti, Group>): React.JSX.Element;
-export declare function SelectContainer<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: ContainerProps<Option, IsMulti, Group>): React.JSX.Element;
-export declare function SelectInput<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: InputProps<Option, IsMulti, Group>): React.JSX.Element;
+export declare function SelectControl<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: ControlProps<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
+export declare function SelectMultiValue<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: MultiValueProps<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
+export declare function SelectClearIndicator<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: ClearIndicatorProps<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
+export declare function SelectDropdownIndicator<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: DropdownIndicatorProps<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
+export declare function SelectMenu<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: MenuProps<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
+export declare function SelectContainer<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: ContainerProps<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
+export declare function SelectInput<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: InputProps<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;

package/dist/src/Select/SelectComponents.js

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

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

@@ -8,5 +8,5 @@ type StyledOptionProps = {
 export declare const StyledOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledOptionProps>> & string;
 export interface SelectOptionProps<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends OptionProps<Option, IsMulti, Group> {
 }
-export declare function SelectOption<Option extends NDSOption = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectOptionProps<Option, IsMulti, Group>): React.JSX.Element;
+export declare function SelectOption<Option extends NDSOption = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectOptionProps<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/Select/SelectOption.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import { components } from "react-select";
 import { typography } from "styled-system";
@@ -37,6 +37,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, { ...props }, props.children)));
+    return (_jsx(StyledOption, { isSelected: props.isSelected, isFocused: props.isFocused, "data-testid": "select-option", children: _jsx(components.Option, { ...props, children: props.children }) }));
 }

package/dist/src/SortingTable/SortingTable.d.ts

@@ -1,7 +1,6 @@
-import React from "react";
 import type { TableProps } from "../Table";
 type SortingTableProps<ColumnMetadata> = TableProps<ColumnMetadata> & {
     initialSortColumn: string;
 };
-declare function SortingTable<ColumnMetadata>({ columns: incomingColumns, rows: incomingRows, initialSortColumn, ...props }: SortingTableProps<ColumnMetadata>): React.JSX.Element;
+declare function SortingTable<ColumnMetadata>({ columns: incomingColumns, rows: incomingRows, initialSortColumn, ...props }: SortingTableProps<ColumnMetadata>): import("react/jsx-runtime").JSX.Element;
 export default SortingTable;

package/dist/src/SortingTable/SortingTable.js

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
 import { Table } from "../Table";
 const numericAlphabeticalSort = (a, b, numeric) => String(a).localeCompare(b, undefined, { numeric, sensitivity: "base" });
 function applySort(rows, sortColumn, columns) {
@@ -31,10 +32,10 @@ function SortingTable({ columns: incomingColumns, rows: incomingRows, initialSor
         const isAscending = sortState.ascending && column.dataKey === sortState.sortColumn;
         return {
             ...column,
-            headerFormatter: ({ label, dataKey }) => (React.createElement(Table.SortingHeader, { onChange: () => onSortChange(dataKey), label: label, ascending: isAscending, active: dataKey === sortState.sortColumn })),
+            headerFormatter: ({ label, dataKey }) => (_jsx(Table.SortingHeader, { onChange: () => onSortChange(dataKey), label: label, ascending: isAscending, active: dataKey === sortState.sortColumn })),
         };
     };
     const columns = incomingColumns.map((column) => transformColumn(column));
-    return React.createElement(Table, { columns: columns, rows: rows, ...props });
+    return _jsx(Table, { columns: columns, rows: rows, ...props });
 }
 export default SortingTable;

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

@@ -1,8 +1,7 @@
-import React from "react";
 import { SortingTable } from ".";
 declare const _default: {
     title: string;
     component: typeof SortingTable;
 };
 export default _default;
-export declare const _SortingTable: () => React.JSX.Element;
+export declare const _SortingTable: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/SortingTable/SortingTable.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { SortingTable } from ".";
 const COLUMNS = [
     { label: "Name", dataKey: "name" },
@@ -21,4 +21,4 @@ export default {
     title: "Components/SortingTable",
     component: SortingTable,
 };
-export const _SortingTable = () => (React.createElement(SortingTable, { columns: COLUMNS, rows: ROWS, keyField: KEY_FIELD, initialSortColumn: INITIAL_SORT_COLUMN }));
+export const _SortingTable = () => (_jsx(SortingTable, { columns: COLUMNS, rows: ROWS, keyField: KEY_FIELD, initialSortColumn: INITIAL_SORT_COLUMN }));

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

@@ -1,24 +1,23 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const All: () => React.JSX.Element;
-export declare const Neutral: () => React.JSX.Element;
-export declare const Dark: () => React.JSX.Element;
-export declare const Quiet: () => React.JSX.Element;
-export declare const Informative: () => React.JSX.Element;
-export declare const Success: () => React.JSX.Element;
-export declare const Warning: () => React.JSX.Element;
-export declare const Danger: () => React.JSX.Element;
+export declare const All: () => import("react/jsx-runtime").JSX.Element;
+export declare const Neutral: () => import("react/jsx-runtime").JSX.Element;
+export declare const Dark: () => import("react/jsx-runtime").JSX.Element;
+export declare const Quiet: () => import("react/jsx-runtime").JSX.Element;
+export declare const Informative: () => import("react/jsx-runtime").JSX.Element;
+export declare const Success: () => import("react/jsx-runtime").JSX.Element;
+export declare const Warning: () => import("react/jsx-runtime").JSX.Element;
+export declare const Danger: () => import("react/jsx-runtime").JSX.Element;
 export declare const FollowingText: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const InsideFlex: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };