@nulogy/components 16.0.0 → 16.0.1

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;
     };

package/dist/src/StatusIndicator/StatusIndicator.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text, Heading2, Heading3 } from "../Type";
 import { Box } from "../Box";
 import { Flex } from "../Flex";
@@ -6,59 +6,19 @@ import { StatusIndicator } from "./";
 export default {
     title: "Components/StatusIndicator",
 };
-export const All = () => (React.createElement(React.Fragment, null,
-    React.createElement(StatusIndicator, { type: "neutral", mr: "half" }, "Neutral"),
-    React.createElement(StatusIndicator, { type: "dark", mr: "half" }, "Dark"),
-    React.createElement(StatusIndicator, { type: "quiet", mr: "half" }, "Quiet"),
-    React.createElement(StatusIndicator, { type: "informative", mr: "half" }, "Informative"),
-    React.createElement(StatusIndicator, { type: "success", mr: "half" }, "Success"),
-    React.createElement(StatusIndicator, { type: "warning", mr: "half" }, "Warning"),
-    React.createElement(StatusIndicator, { type: "danger", mr: "half" }, "Danger")));
-export const Neutral = () => React.createElement(StatusIndicator, { type: "neutral" }, "Neutral");
-export const Dark = () => React.createElement(StatusIndicator, { type: "dark" }, "Dark");
-export const Quiet = () => React.createElement(StatusIndicator, { type: "quiet" }, "Quiet");
-export const Informative = () => React.createElement(StatusIndicator, { type: "informative" }, "Informative");
-export const Success = () => React.createElement(StatusIndicator, { type: "success" }, "Success");
-export const Warning = () => React.createElement(StatusIndicator, { type: "warning" }, "Warning");
-export const Danger = () => React.createElement(StatusIndicator, { type: "danger" }, "Danger");
-export const FollowingText = () => (React.createElement(React.Fragment, null,
-    React.createElement(Box, { mb: "x3" },
-        React.createElement(Heading2, { inline: true, mr: "x1" }, "Label"),
-        React.createElement(StatusIndicator, null, "Status")),
-    React.createElement(Box, { mb: "x3" },
-        React.createElement(Heading3, { inline: true, mr: "x1" }, "Label"),
-        React.createElement(StatusIndicator, null, "Status")),
-    React.createElement(Box, { mb: "x3" },
-        React.createElement(Text, { inline: true, mr: "x1" }, "Label"),
-        React.createElement(StatusIndicator, null, "Status")),
-    React.createElement(Box, { mb: "x3" },
-        React.createElement(Text, { fontSize: "small", lineHeight: "smallTextBase", inline: true, mr: "x1" }, "Label"),
-        React.createElement(StatusIndicator, null, "Status")),
-    React.createElement(Box, { mb: "x3" },
-        React.createElement(Text, { fontSize: "smaller", lineHeight: "smallerText", inline: true, mr: "x1" }, "Label"),
-        React.createElement(StatusIndicator, null, "Status")),
-    React.createElement(Box, { mb: "x3" },
-        React.createElement(Text, { inline: true, mr: "x1" }, "Long label Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in eleifend metus, in tempus sapien. Morbi eget felis est. Nunc facilisis vel nisi nec ornare. Ut blandit ullamcorper enim sed fringilla. Quisque malesuada pharetra tincidunt. Mauris mauris tortor, maximus vitae tempor ac, tincidunt pharetra augue. In eget suscipit est. Suspendisse feugiat risus urna"),
-        React.createElement(StatusIndicator, null, "Status"))));
+export const All = () => (_jsxs(_Fragment, { children: [_jsx(StatusIndicator, { type: "neutral", mr: "half", children: "Neutral" }), _jsx(StatusIndicator, { type: "dark", mr: "half", children: "Dark" }), _jsx(StatusIndicator, { type: "quiet", mr: "half", children: "Quiet" }), _jsx(StatusIndicator, { type: "informative", mr: "half", children: "Informative" }), _jsx(StatusIndicator, { type: "success", mr: "half", children: "Success" }), _jsx(StatusIndicator, { type: "warning", mr: "half", children: "Warning" }), _jsx(StatusIndicator, { type: "danger", mr: "half", children: "Danger" })] }));
+export const Neutral = () => _jsx(StatusIndicator, { type: "neutral", children: "Neutral" });
+export const Dark = () => _jsx(StatusIndicator, { type: "dark", children: "Dark" });
+export const Quiet = () => _jsx(StatusIndicator, { type: "quiet", children: "Quiet" });
+export const Informative = () => _jsx(StatusIndicator, { type: "informative", children: "Informative" });
+export const Success = () => _jsx(StatusIndicator, { type: "success", children: "Success" });
+export const Warning = () => _jsx(StatusIndicator, { type: "warning", children: "Warning" });
+export const Danger = () => _jsx(StatusIndicator, { type: "danger", children: "Danger" });
+export const FollowingText = () => (_jsxs(_Fragment, { children: [_jsxs(Box, { mb: "x3", children: [_jsx(Heading2, { inline: true, mr: "x1", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Box, { mb: "x3", children: [_jsx(Heading3, { inline: true, mr: "x1", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Box, { mb: "x3", children: [_jsx(Text, { inline: true, mr: "x1", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Box, { mb: "x3", children: [_jsx(Text, { fontSize: "small", lineHeight: "smallTextBase", inline: true, mr: "x1", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Box, { mb: "x3", children: [_jsx(Text, { fontSize: "smaller", lineHeight: "smallerText", inline: true, mr: "x1", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Box, { mb: "x3", children: [_jsx(Text, { inline: true, mr: "x1", children: "Long label Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in eleifend metus, in tempus sapien. Morbi eget felis est. Nunc facilisis vel nisi nec ornare. Ut blandit ullamcorper enim sed fringilla. Quisque malesuada pharetra tincidunt. Mauris mauris tortor, maximus vitae tempor ac, tincidunt pharetra augue. In eget suscipit est. Suspendisse feugiat risus urna" }), _jsx(StatusIndicator, { children: "Status" })] })] }));
 FollowingText.story = {
     name: "Following text",
 };
-export const InsideFlex = () => (React.createElement(React.Fragment, null,
-    React.createElement(Flex, { mb: "x3" },
-        React.createElement(Heading2, { inline: true, mr: "x1", mb: "0" }, "Label"),
-        React.createElement(StatusIndicator, { className: "my-test-classname" }, "Status")),
-    React.createElement(Flex, { mb: "x3" },
-        React.createElement(Heading3, { inline: true, mr: "x1", mb: "0" }, "Label"),
-        React.createElement(StatusIndicator, null, "Status")),
-    React.createElement(Flex, { mb: "x3" },
-        React.createElement(Text, { inline: true, mr: "x1", mb: "0" }, "Label"),
-        React.createElement(StatusIndicator, null, "Status")),
-    React.createElement(Flex, { mb: "x3" },
-        React.createElement(Text, { fontSize: "small", lineHeight: "smallTextBase", inline: true, mr: "x1", mb: "0" }, "Label"),
-        React.createElement(StatusIndicator, null, "Status")),
-    React.createElement(Flex, { mb: "x3" },
-        React.createElement(Text, { fontSize: "smaller", lineHeight: "smallerText", inline: true, mr: "x1", mb: "0" }, "Label"),
-        React.createElement(StatusIndicator, null, "Status"))));
+export const InsideFlex = () => (_jsxs(_Fragment, { children: [_jsxs(Flex, { mb: "x3", children: [_jsx(Heading2, { inline: true, mr: "x1", mb: "0", children: "Label" }), _jsx(StatusIndicator, { className: "my-test-classname", children: "Status" })] }), _jsxs(Flex, { mb: "x3", children: [_jsx(Heading3, { inline: true, mr: "x1", mb: "0", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Flex, { mb: "x3", children: [_jsx(Text, { inline: true, mr: "x1", mb: "0", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Flex, { mb: "x3", children: [_jsx(Text, { fontSize: "small", lineHeight: "smallTextBase", inline: true, mr: "x1", mb: "0", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Flex, { mb: "x3", children: [_jsx(Text, { fontSize: "smaller", lineHeight: "smallerText", inline: true, mr: "x1", mb: "0", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] })] }));
 InsideFlex.story = {
     name: "Inside flex",
 };

package/dist/src/Summary/Summary.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled, useTheme } from "styled-components";
 import numberFromDimension from "../utils/numberFromDimension";
 import { Box } from "../Box";
@@ -25,7 +25,6 @@ const Summary = ({ breakpoint, children, ...rest }) => {
     const theme = useTheme();
     breakpoint || (breakpoint = theme.breakpoints.medium);
     const breakpointPx = numberFromDimension(breakpoint);
-    return (React.createElement(SummaryContextProvider, { breakpoint: breakpointPx },
-        React.createElement(SummaryWrapper, { breakpoint: breakpointPx, ...rest }, children)));
+    return (_jsx(SummaryContextProvider, { breakpoint: breakpointPx, children: _jsx(SummaryWrapper, { breakpoint: breakpointPx, ...rest, children: children }) }));
 };
 export default Summary;

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

@@ -1,6 +1,5 @@
-import React from "react";
-export declare function Default(): React.JSX.Element;
-export declare function WithMainInfoOnly(): React.JSX.Element;
+export declare function Default(): import("react/jsx-runtime").JSX.Element;
+export declare function WithMainInfoOnly(): import("react/jsx-runtime").JSX.Element;
 declare const _default: {
     title: string;
 };

package/dist/src/Summary/Summary.story.js

@@ -1,19 +1,11 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StatusIndicator } from "../StatusIndicator";
 import { Summary, SummaryDivider, SummaryItem } from "..";
 export function Default() {
-    return (React.createElement(Summary, null,
-        React.createElement(SummaryItem, { value: 2, status: React.createElement(StatusIndicator, { type: "danger" }, "Missed") }),
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "warning" }, "Delayed") }),
-        React.createElement(SummaryItem, { value: 139, status: React.createElement(StatusIndicator, { type: "neutral" }, "On Time") }),
-        React.createElement(SummaryDivider, null),
-        React.createElement(SummaryItem, { value: 12, status: React.createElement(StatusIndicator, { type: "success" }, "Delivered") })));
+    return (_jsxs(Summary, { children: [_jsx(SummaryItem, { value: 2, status: _jsx(StatusIndicator, { type: "danger", children: "Missed" }) }), _jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "warning", children: "Delayed" }) }), _jsx(SummaryItem, { value: 139, status: _jsx(StatusIndicator, { type: "neutral", children: "On Time" }) }), _jsx(SummaryDivider, {}), _jsx(SummaryItem, { value: 12, status: _jsx(StatusIndicator, { type: "success", children: "Delivered" }) })] }));
 }
 export function WithMainInfoOnly() {
-    return (React.createElement(Summary, null,
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") })));
+    return (_jsxs(Summary, { children: [_jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) }), _jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) }), _jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) })] }));
 }
 export default {
     title: "Components/Summary",

package/dist/src/Summary/SummaryContext.js

@@ -1,4 +1,5 @@
-import React, { createContext, useContext } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
 const SummaryContext = createContext(undefined);
 export function useSummaryContext() {
     const context = useContext(SummaryContext);
@@ -8,7 +9,7 @@ export function useSummaryContext() {
     return context;
 }
 export const SummaryContextProvider = ({ breakpoint, children, }) => {
-    return (React.createElement(SummaryContext.Provider, { value: {
+    return (_jsx(SummaryContext.Provider, { value: {
             breakpoint,
-        } }, children));
+        }, children: children }));
 };

package/dist/src/Summary/SummaryDivider.d.ts

@@ -1,3 +1,2 @@
-import React from "react";
-declare const SummaryDivider: (props: any) => React.JSX.Element;
+declare const SummaryDivider: (props: any) => import("react/jsx-runtime").JSX.Element;
 export default SummaryDivider;

package/dist/src/Summary/SummaryDivider.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import { Box } from "../Box";
 import numberFromDimension from "../utils/numberFromDimension";
@@ -16,6 +16,6 @@ const Divider = styled(Box)(({ theme, breakpoint }) => ({
 }));
 const SummaryDivider = (props) => {
     const { breakpoint } = useSummaryContext();
-    return React.createElement(Divider, { breakpoint: numberFromDimension(breakpoint), ...props });
+    return _jsx(Divider, { breakpoint: numberFromDimension(breakpoint), ...props });
 };
 export default SummaryDivider;

package/dist/src/Summary/SummaryItem.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import { Flex } from "../Flex";
 import { Text } from "../Type";
@@ -15,8 +15,6 @@ const SummaryItem = ({ value, status, ...rest }) => {
     const { breakpoint } = useSummaryContext();
     const matches = useMediaQuery(`(max-width: ${breakpoint}px)`);
     delete rest["children"];
-    return (React.createElement(SummaryItemWrapper, { breakpoint: breakpoint, ...rest },
-        React.createElement(Text, { fontWeight: "medium", fontSize: !matches ? "heading4" : undefined }, value),
-        status));
+    return (_jsxs(SummaryItemWrapper, { breakpoint: breakpoint, ...rest, children: [_jsx(Text, { fontWeight: "medium", fontSize: !matches ? "heading4" : undefined, children: value }), status] }));
 };
 export default SummaryItem;

package/dist/src/Switcher/Switch.js

@@ -1,9 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { styled } from "styled-components";
 import { variant } from "styled-system";
 import numberFromDimension from "../utils/numberFromDimension";
 const Switch = React.forwardRef(({ children, ...rest }, ref) => {
-    return (React.createElement(SwitchButton, { ...rest, ref: ref }, children));
+    return (_jsx(SwitchButton, { ...rest, ref: ref, children: children }));
 });
 const SwitchButton = styled.button(({ selected, theme }) => ({
     margin: 1,

package/dist/src/Switcher/Switcher.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { Box } from "../Box";
 import FocusManager from "../utils/ts/FocusManager";
@@ -35,7 +36,6 @@ const Switcher = ({ variant, selected, onChange, ...rest }) => {
             });
         });
     };
-    return (React.createElement(Box, { display: "inline-flex", bg: "whiteGrey", borderRadius: "9999px", ...rest },
-        React.createElement(FocusManager, { refs: optionRefs, defaultFocusedIndex: getSelectedIndex() }, ({ focusedIndex, setFocusedIndex, handleArrowNavigation }) => options(focusedIndex, setFocusedIndex, handleArrowNavigation))));
+    return (_jsx(Box, { display: "inline-flex", bg: "whiteGrey", borderRadius: "9999px", ...rest, children: _jsx(FocusManager, { refs: optionRefs, defaultFocusedIndex: getSelectedIndex(), children: ({ focusedIndex, setFocusedIndex, handleArrowNavigation }) => options(focusedIndex, setFocusedIndex, handleArrowNavigation) }) }));
 };
 export default Switcher;