@kaizen/components 3.3.2 → 3.3.3

package/dist/esm/src/Select/Select.mjs

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React, { useId, useState } from 'react';
+import React__default, { useId, useState } from 'react';
 import classnames from 'classnames';
 import { useButton } from 'react-aria';
 import ReactSelect, { components } from 'react-select';
@@ -23,141 +23,135 @@ var NullPlaceholder = function () {
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-select--docs Storybook}
  */
-const Select = /*#__PURE__*/function () {
-  const Select = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-    var _b = _a.variant,
-      variant = _b === void 0 ? 'default' : _b,
-      _c = _a.status,
-      status = _c === void 0 ? 'default' : _c,
-      _d = _a.reversed,
-      reversed = _d === void 0 ? false : _d,
-      label = _a.label,
-      validationMessage = _a.validationMessage,
-      description = _a.description,
-      propsFullWidth = _a.fullWidth,
-      propsClassName = _a.className,
-      props = __rest(_a, ["variant", "status", "reversed", "label", "validationMessage", "description", "fullWidth", "className"]);
-    var reactId = useId();
-    // the default for fullWidth depends on the variant
-    var fullWidth = propsFullWidth !== null && propsFullWidth !== void 0 ? propsFullWidth : !['secondary', 'secondary-small'].includes(variant);
-    var classes = classnames(propsClassName, modules_7db85bb8.specificityIncreaser, (!reversed || variant === 'default') && modules_7db85bb8.default, reversed && modules_7db85bb8.reversed, variant === 'secondary' && modules_7db85bb8.secondary, variant === 'secondary-small' && modules_7db85bb8.secondarySmall, !fullWidth && modules_7db85bb8.notFullWidth, props.isDisabled && modules_7db85bb8.disabled, status === 'error' && modules_7db85bb8.error);
-    var labelId = useState(label ? reactId : undefined)[0];
-    return /*#__PURE__*/React.createElement(React.Fragment, null, label ? (/*#__PURE__*/React.createElement(Label, {
-      reversed: reversed,
-      id: labelId
-    }, label)) : null, /*#__PURE__*/React.createElement(ReactSelect, __assign({}, props, {
-      ref: ref,
-      "aria-labelledby": labelId,
-      placeholder: noPlaceholderText,
-      components: {
-        Control: Control,
-        Placeholder: NullPlaceholder,
-        DropdownIndicator: DropdownIndicator,
-        Menu: Menu,
-        GroupHeading: GroupHeading,
-        Option: Option,
-        NoOptionsMessage: NoOptionsMessage,
-        Input: Input,
-        SingleValue: SingleValue,
-        MultiValue: MultiValue,
-        IndicatorsContainer: IndicatorsContainer,
-        ValueContainer: ValueContainer,
-        ClearIndicator: ClearIndicator,
-        IndicatorSeparator: null
-      },
-      className: classes
-    })), validationMessage ? /*#__PURE__*/React.createElement(FieldMessage, {
-      message: validationMessage,
-      status: status
-    }) : null, description ? /*#__PURE__*/React.createElement(FieldMessage, {
-      message: description
-    }) : null);
-  });
-  Select.displayName = 'Select';
-  return Select;
-}();
-const AsyncSelect = /*#__PURE__*/function () {
-  const AsyncSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-    var propsClassName = _a.className,
-      props = __rest(_a, ["className"]);
-    return /*#__PURE__*/React.createElement(Async, __assign({}, props, {
-      ref: ref,
-      placeholder: noPlaceholderText,
-      components: {
-        Control: Control,
-        Placeholder: NullPlaceholder,
-        DropdownIndicator: DropdownIndicator,
-        Menu: Menu,
-        Option: Option,
-        NoOptionsMessage: NoOptionsMessage,
-        Input: Input,
-        SingleValue: SingleValue,
-        MultiValue: MultiValue,
-        IndicatorsContainer: IndicatorsContainer,
-        ValueContainer: ValueContainer,
-        ClearIndicator: ClearIndicator,
-        IndicatorSeparator: null,
-        LoadingMessage: LoadingMessage
-      },
-      className: classnames(modules_7db85bb8.specificityIncreaser, propsClassName)
-    }));
-  });
-  AsyncSelect.displayName = 'AsyncSelect';
-  return AsyncSelect;
-}();
+var Select = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
+  var _b = _a.variant,
+    variant = _b === void 0 ? 'default' : _b,
+    _c = _a.status,
+    status = _c === void 0 ? 'default' : _c,
+    _d = _a.reversed,
+    reversed = _d === void 0 ? false : _d,
+    label = _a.label,
+    validationMessage = _a.validationMessage,
+    description = _a.description,
+    propsFullWidth = _a.fullWidth,
+    propsClassName = _a.className,
+    props = __rest(_a, ["variant", "status", "reversed", "label", "validationMessage", "description", "fullWidth", "className"]);
+  var reactId = useId();
+  // the default for fullWidth depends on the variant
+  var fullWidth = propsFullWidth !== null && propsFullWidth !== void 0 ? propsFullWidth : !['secondary', 'secondary-small'].includes(variant);
+  var classes = classnames(propsClassName, modules_7db85bb8.specificityIncreaser, (!reversed || variant === 'default') && modules_7db85bb8.default, reversed && modules_7db85bb8.reversed, variant === 'secondary' && modules_7db85bb8.secondary, variant === 'secondary-small' && modules_7db85bb8.secondarySmall, !fullWidth && modules_7db85bb8.notFullWidth, props.isDisabled && modules_7db85bb8.disabled, status === 'error' && modules_7db85bb8.error);
+  var labelId = useState(label ? reactId : undefined)[0];
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label ? (/*#__PURE__*/React__default.createElement(Label, {
+    reversed: reversed,
+    id: labelId
+  }, label)) : null, /*#__PURE__*/React__default.createElement(ReactSelect, __assign({}, props, {
+    ref: ref,
+    "aria-labelledby": labelId,
+    placeholder: noPlaceholderText,
+    components: {
+      Control: Control,
+      Placeholder: NullPlaceholder,
+      DropdownIndicator: DropdownIndicator,
+      Menu: Menu,
+      GroupHeading: GroupHeading,
+      Option: Option,
+      NoOptionsMessage: NoOptionsMessage,
+      Input: Input,
+      SingleValue: SingleValue,
+      MultiValue: MultiValue,
+      IndicatorsContainer: IndicatorsContainer,
+      ValueContainer: ValueContainer,
+      ClearIndicator: ClearIndicator,
+      IndicatorSeparator: null
+    },
+    className: classes
+  })), validationMessage ? /*#__PURE__*/React__default.createElement(FieldMessage, {
+    message: validationMessage,
+    status: status
+  }) : null, description ? /*#__PURE__*/React__default.createElement(FieldMessage, {
+    message: description
+  }) : null);
+});
+Select.displayName = 'Select';
+var AsyncSelect = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
+  var propsClassName = _a.className,
+    props = __rest(_a, ["className"]);
+  return /*#__PURE__*/React__default.createElement(Async, __assign({}, props, {
+    ref: ref,
+    placeholder: noPlaceholderText,
+    components: {
+      Control: Control,
+      Placeholder: NullPlaceholder,
+      DropdownIndicator: DropdownIndicator,
+      Menu: Menu,
+      Option: Option,
+      NoOptionsMessage: NoOptionsMessage,
+      Input: Input,
+      SingleValue: SingleValue,
+      MultiValue: MultiValue,
+      IndicatorsContainer: IndicatorsContainer,
+      ValueContainer: ValueContainer,
+      ClearIndicator: ClearIndicator,
+      IndicatorSeparator: null,
+      LoadingMessage: LoadingMessage
+    },
+    className: classnames(modules_7db85bb8.specificityIncreaser, propsClassName)
+  }));
+});
+AsyncSelect.displayName = 'AsyncSelect';
 var Control = function (props) {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     "data-automation-id": "Select__Control"
-  }, /*#__PURE__*/React.createElement(components.Control, __assign({}, props, {
+  }, /*#__PURE__*/React__default.createElement(components.Control, __assign({}, props, {
     className: classnames(modules_7db85bb8.control, props.isFocused && modules_7db85bb8.focusedControl, props.isDisabled && modules_7db85bb8.disabled)
   })));
 };
 var DropdownIndicator = function (props) {
-  return /*#__PURE__*/React.createElement(components.DropdownIndicator, __assign({}, props, {
+  return /*#__PURE__*/React__default.createElement(components.DropdownIndicator, __assign({}, props, {
     className: modules_7db85bb8.dropdownIndicator
-  }), /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/React__default.createElement(Icon, {
     name: props.selectProps.menuIsOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down',
     isPresentational: true
   }));
 };
 var LoadingMessage = function (props) {
-  return /*#__PURE__*/React.createElement(components.LoadingMessage, __assign({}, props, {
+  return /*#__PURE__*/React__default.createElement(components.LoadingMessage, __assign({}, props, {
     className: modules_7db85bb8.loadingMessage
   }));
 };
 var Menu = function (props) {
-  return /*#__PURE__*/React.createElement(components.Menu, __assign({}, props, {
+  return /*#__PURE__*/React__default.createElement(components.Menu, __assign({}, props, {
     className: modules_7db85bb8.menu
   }));
 };
 var GroupHeading = function (props) {
-  return /*#__PURE__*/React.createElement(components.GroupHeading, __assign({}, props, {
+  return /*#__PURE__*/React__default.createElement(components.GroupHeading, __assign({}, props, {
     className: modules_7db85bb8.groupHeading
   }));
 };
 var Option = function (props) {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     "data-automation-id": "Select__Option"
-  }, /*#__PURE__*/React.createElement(components.Option, __assign({}, props, {
+  }, /*#__PURE__*/React__default.createElement(components.Option, __assign({}, props, {
     className: classnames(modules_7db85bb8.option, props.isFocused && modules_7db85bb8.focusedOption, props.isSelected && modules_7db85bb8.selectedOption, props.isDisabled && modules_7db85bb8.disabledOption)
   })));
 };
 var NoOptionsMessage = function (props) {
-  return /*#__PURE__*/React.createElement(components.NoOptionsMessage, __assign({}, props), /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React__default.createElement(components.NoOptionsMessage, __assign({}, props), /*#__PURE__*/React__default.createElement("span", {
     className: modules_7db85bb8.noOptionsMessage
   }, props.children));
 };
 var SingleValue = function (props) {
-  return /*#__PURE__*/React.createElement(components.SingleValue, __assign({}, props, {
+  return /*#__PURE__*/React__default.createElement(components.SingleValue, __assign({}, props, {
     className: modules_7db85bb8.singleValueOverrides
-  }), /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React__default.createElement("span", {
     className: modules_7db85bb8.singleValue
   }, props.children));
 };
 var MultiValue = function (props) {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: modules_7db85bb8.multiValue
-  }, /*#__PURE__*/React.createElement(Tag, {
+  }, /*#__PURE__*/React__default.createElement(Tag, {
     variant: "default",
     dismissible: true,
     inline: true,
@@ -165,26 +159,26 @@ var MultiValue = function (props) {
   }, props.children));
 };
 var IndicatorsContainer = function (props) {
-  return /*#__PURE__*/React.createElement(components.IndicatorsContainer, __assign({}, props, {
+  return /*#__PURE__*/React__default.createElement(components.IndicatorsContainer, __assign({}, props, {
     className: modules_7db85bb8.indicatorsContainer
   }));
 };
 var Input = function (props) {
-  return /*#__PURE__*/React.createElement(components.Input, __assign({
+  return /*#__PURE__*/React__default.createElement(components.Input, __assign({
     className: modules_7db85bb8.input
   }, props));
 };
 var ValueContainer = function (props) {
-  return /*#__PURE__*/React.createElement(components.ValueContainer, __assign({}, props, {
+  return /*#__PURE__*/React__default.createElement(components.ValueContainer, __assign({}, props, {
     className: modules_7db85bb8.valueContainer
   }));
 };
 var ClearIndicator = function (props) {
-  var buttonRef = React.useRef(null);
+  var buttonRef = React__default.useRef(null);
   var buttonProps = useButton(__assign(__assign({}, props), {
     onClick: props.clearValue
   }), buttonRef).buttonProps;
-  return /*#__PURE__*/React.createElement(ClearButton, __assign({}, buttonProps, {
+  return /*#__PURE__*/React__default.createElement(ClearButton, __assign({}, buttonProps, {
     classNameOverride: modules_7db85bb8.clearIndicator
   }));
 };

package/dist/esm/src/SingleSelect/SingleSelect.mjs

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React, { useId, useState, useEffect } from 'react';
+import React__default, { useId, useState, useEffect } from 'react';
 import { useButton } from '@react-aria/button';
 import { useSelect, HiddenSelect } from '@react-aria/select';
 import { mergeRefs } from '@react-aria/utils';
@@ -26,123 +26,120 @@ import modules_b3d449c4 from './SingleSelect.module.scss.mjs';
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-select--docs Storybook}
  */
-const SingleSelect = /*#__PURE__*/function () {
-  const SingleSelect = function (_a) {
-    var _b;
-    var label = _a.label,
-      items = _a.items,
-      propsId = _a.id,
-      trigger = _a.trigger,
-      children = _a.children,
-      status = _a.status,
-      validationMessage = _a.validationMessage,
-      isReversed = _a.isReversed,
-      _c = _a.isRequired,
-      isRequired = _c === void 0 ? false : _c,
-      isFullWidth = _a.isFullWidth,
-      classNameOverride = _a.classNameOverride,
-      selectedKey = _a.selectedKey,
-      description = _a.description,
-      isDisabled = _a.isDisabled,
-      onSelectionChange = _a.onSelectionChange,
-      portalContainerId = _a.portalContainerId,
-      inputRef = _a.inputRef,
-      restProps = __rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "classNameOverride", "selectedKey", "description", "isDisabled", "onSelectionChange", "portalContainerId", "inputRef"]);
-    var refs = useFloating().refs;
-    var triggerRef = refs.reference;
-    var fallbackId = useId();
-    var id = propsId !== null && propsId !== void 0 ? propsId : fallbackId;
-    var descriptionId = "".concat(id, "--description");
-    var validationId = "".concat(id, "--validation");
-    var popoverId = "".concat(id, "--popover");
-    var disabledKeys = getDisabledKeysFromItems(items);
-    var ariaSelectProps = __assign({
-      label: label,
-      items: items,
-      children: transformSelectItemToCollectionElement,
-      disabledKeys: disabledKeys,
-      selectedKey: typeof selectedKey === 'number' ? selectedKey.toString() : selectedKey,
-      description: description,
-      isDisabled: isDisabled,
-      isRequired: isRequired,
-      onSelectionChange: onSelectionChange ? function (key) {
-        return onSelectionChange(key);
-      } : undefined
-    }, restProps);
-    var state = useSelectState(ariaSelectProps);
-    var _d = useSelect(ariaSelectProps, state, triggerRef),
-      labelProps = _d.labelProps,
-      reactAriaTriggerProps = _d.triggerProps,
-      valueProps = _d.valueProps,
-      menuProps = _d.menuProps,
-      errorMessageProps = _d.errorMessageProps,
-      descriptionProps = _d.descriptionProps;
-    // Hack incoming:
-    // react-aria/useSelect wants to prefix the combobox's accessible name with the value of the select.
-    // We use role=combobox, meaning screen readers will read the value.
-    // So we're modifying the `aria-labelledby` property to remove the value element id.
-    // Issue: https://github.com/adobe/react-spectrum/issues/4091
-    var reactAriaLabelledBy = reactAriaTriggerProps['aria-labelledby'];
-    var triggerProps = __assign(__assign({}, reactAriaTriggerProps), {
-      'aria-labelledby': reactAriaLabelledBy === null || reactAriaLabelledBy === void 0 ? void 0 : reactAriaLabelledBy.substring(reactAriaLabelledBy.indexOf(' ') + 1)
-    });
-    var buttonProps = useButton(triggerProps, triggerRef).buttonProps;
-    var selectToggleProps = __assign(__assign({}, buttonProps), {
-      label: label,
-      labelProps: labelProps,
-      'value': (_b = state === null || state === void 0 ? void 0 : state.selectedItem) === null || _b === void 0 ? void 0 : _b.rendered,
-      valueProps: valueProps,
-      'isOpen': state.isOpen,
-      status: status,
-      'isDisabled': triggerProps.isDisabled,
-      isReversed: isReversed,
-      'ref': mergeRefs(inputRef, refs.setReference),
-      'aria-describedby': classnames(validationMessage && validationId, description && descriptionId),
-      'aria-required': isRequired
-    });
-    var _e = useState(),
-      portalContainer = _e[0],
-      setPortalContainer = _e[1];
-    useEffect(function () {
-      if (portalContainerId) {
-        var portalElement = document.getElementById(portalContainerId);
-        if (portalElement) setPortalContainer(portalElement);
-      }
-    }, [portalContainerId]);
-    return /*#__PURE__*/React.createElement("div", {
-      className: classnames(!isFullWidth && modules_b3d449c4.notFullWidth, classNameOverride)
-    }, /*#__PURE__*/React.createElement(HiddenSelect, {
-      label: label,
-      name: id,
-      state: state,
-      triggerRef: triggerRef
-    }), /*#__PURE__*/React.createElement("div", {
-      className: modules_b3d449c4.container
-    }, trigger === undefined ? (/*#__PURE__*/React.createElement(SelectToggle, __assign({}, selectToggleProps))) : trigger(selectToggleProps), state.isOpen && (/*#__PURE__*/React.createElement(Popover, {
-      id: popoverId,
-      portalContainer: portalContainer,
-      refs: refs
-    }, /*#__PURE__*/React.createElement(SelectProvider, {
-      state: state
-    }, /*#__PURE__*/React.createElement(SelectPopoverContents, {
-      menuProps: menuProps,
-      popoverRef: refs.floating
-    }, children))))), validationMessage && (/*#__PURE__*/React.createElement(FieldMessage, __assign({}, errorMessageProps, {
-      id: validationId,
-      message: validationMessage,
-      status: status,
-      reversed: isReversed
-    }))), description && (/*#__PURE__*/React.createElement(FieldMessage, __assign({}, descriptionProps, {
-      id: descriptionId,
-      message: description,
-      reversed: isReversed
-    }))));
-  };
-  SingleSelect.displayName = 'SingleSelect';
-  SingleSelect.Section = ListBoxSection;
-  SingleSelect.SectionDivider = SectionDivider;
-  SingleSelect.Option = Option;
-  SingleSelect.ItemDefaultRender = ListItem;
-  return SingleSelect;
-}();
+var SingleSelect = function (_a) {
+  var _b;
+  var label = _a.label,
+    items = _a.items,
+    propsId = _a.id,
+    trigger = _a.trigger,
+    children = _a.children,
+    status = _a.status,
+    validationMessage = _a.validationMessage,
+    isReversed = _a.isReversed,
+    _c = _a.isRequired,
+    isRequired = _c === void 0 ? false : _c,
+    isFullWidth = _a.isFullWidth,
+    classNameOverride = _a.classNameOverride,
+    selectedKey = _a.selectedKey,
+    description = _a.description,
+    isDisabled = _a.isDisabled,
+    onSelectionChange = _a.onSelectionChange,
+    portalContainerId = _a.portalContainerId,
+    inputRef = _a.inputRef,
+    restProps = __rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "classNameOverride", "selectedKey", "description", "isDisabled", "onSelectionChange", "portalContainerId", "inputRef"]);
+  var refs = useFloating().refs;
+  var triggerRef = refs.reference;
+  var fallbackId = useId();
+  var id = propsId !== null && propsId !== void 0 ? propsId : fallbackId;
+  var descriptionId = "".concat(id, "--description");
+  var validationId = "".concat(id, "--validation");
+  var popoverId = "".concat(id, "--popover");
+  var disabledKeys = getDisabledKeysFromItems(items);
+  var ariaSelectProps = __assign({
+    label: label,
+    items: items,
+    children: transformSelectItemToCollectionElement,
+    disabledKeys: disabledKeys,
+    selectedKey: typeof selectedKey === 'number' ? selectedKey.toString() : selectedKey,
+    description: description,
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    onSelectionChange: onSelectionChange ? function (key) {
+      return onSelectionChange(key);
+    } : undefined
+  }, restProps);
+  var state = useSelectState(ariaSelectProps);
+  var _d = useSelect(ariaSelectProps, state, triggerRef),
+    labelProps = _d.labelProps,
+    reactAriaTriggerProps = _d.triggerProps,
+    valueProps = _d.valueProps,
+    menuProps = _d.menuProps,
+    errorMessageProps = _d.errorMessageProps,
+    descriptionProps = _d.descriptionProps;
+  // Hack incoming:
+  // react-aria/useSelect wants to prefix the combobox's accessible name with the value of the select.
+  // We use role=combobox, meaning screen readers will read the value.
+  // So we're modifying the `aria-labelledby` property to remove the value element id.
+  // Issue: https://github.com/adobe/react-spectrum/issues/4091
+  var reactAriaLabelledBy = reactAriaTriggerProps['aria-labelledby'];
+  var triggerProps = __assign(__assign({}, reactAriaTriggerProps), {
+    'aria-labelledby': reactAriaLabelledBy === null || reactAriaLabelledBy === void 0 ? void 0 : reactAriaLabelledBy.substring(reactAriaLabelledBy.indexOf(' ') + 1)
+  });
+  var buttonProps = useButton(triggerProps, triggerRef).buttonProps;
+  var selectToggleProps = __assign(__assign({}, buttonProps), {
+    label: label,
+    labelProps: labelProps,
+    'value': (_b = state === null || state === void 0 ? void 0 : state.selectedItem) === null || _b === void 0 ? void 0 : _b.rendered,
+    valueProps: valueProps,
+    'isOpen': state.isOpen,
+    status: status,
+    'isDisabled': triggerProps.isDisabled,
+    isReversed: isReversed,
+    'ref': mergeRefs(inputRef, refs.setReference),
+    'aria-describedby': classnames(validationMessage && validationId, description && descriptionId),
+    'aria-required': isRequired
+  });
+  var _e = useState(),
+    portalContainer = _e[0],
+    setPortalContainer = _e[1];
+  useEffect(function () {
+    if (portalContainerId) {
+      var portalElement = document.getElementById(portalContainerId);
+      if (portalElement) setPortalContainer(portalElement);
+    }
+  }, [portalContainerId]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classnames(!isFullWidth && modules_b3d449c4.notFullWidth, classNameOverride)
+  }, /*#__PURE__*/React__default.createElement(HiddenSelect, {
+    label: label,
+    name: id,
+    state: state,
+    triggerRef: triggerRef
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: modules_b3d449c4.container
+  }, trigger === undefined ? (/*#__PURE__*/React__default.createElement(SelectToggle, __assign({}, selectToggleProps))) : trigger(selectToggleProps), state.isOpen && (/*#__PURE__*/React__default.createElement(Popover, {
+    id: popoverId,
+    portalContainer: portalContainer,
+    refs: refs
+  }, /*#__PURE__*/React__default.createElement(SelectProvider, {
+    state: state
+  }, /*#__PURE__*/React__default.createElement(SelectPopoverContents, {
+    menuProps: menuProps,
+    popoverRef: refs.floating
+  }, children))))), validationMessage && (/*#__PURE__*/React__default.createElement(FieldMessage, __assign({}, errorMessageProps, {
+    id: validationId,
+    message: validationMessage,
+    status: status,
+    reversed: isReversed
+  }))), description && (/*#__PURE__*/React__default.createElement(FieldMessage, __assign({}, descriptionProps, {
+    id: descriptionId,
+    message: description,
+    reversed: isReversed
+  }))));
+};
+SingleSelect.displayName = 'SingleSelect';
+SingleSelect.Section = ListBoxSection;
+SingleSelect.SectionDivider = SectionDivider;
+SingleSelect.Option = Option;
+SingleSelect.ItemDefaultRender = ListItem;
 export { SingleSelect };

package/dist/esm/src/SingleSelect/context/SelectContext.mjs

@@ -1,5 +1,5 @@
-import React, { useContext } from 'react';
-var SelectContext = /*#__PURE__*/React.createContext(null);
+import React__default, { useContext } from 'react';
+var SelectContext = /*#__PURE__*/React__default.createContext(null);
 var useSelectContext = function () {
   var context = useContext(SelectContext);
   if (!context) {
@@ -10,7 +10,7 @@ var useSelectContext = function () {
 var SelectProvider = function (_a) {
   var children = _a.children,
     state = _a.state;
-  return /*#__PURE__*/React.createElement(SelectContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(SelectContext.Provider, {
     value: {
       state: state
     }