@kaizen/components 2.0.0 → 2.0.2

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/Popover/Popover.cjs

@@ -1,8 +1,11 @@
 'use strict';
 
+var tslib = require('tslib');
 var React = require('react');
-var reactAriaComponents = require('react-aria-components');
+var classnames = require('classnames');
+var reactAria = require('react-aria');
 var SingleSelectContext = require('../../context/SingleSelectContext.cjs');
+var useSupportsAnchorPositioning = require('./utils/useSupportsAnchorPositioning.cjs');
 var usePositioningStyles = require('./utils/usePositioningStyles.cjs');
 var Popover_module = require('./Popover.module.css.cjs');
 function _interopDefault(e) {
@@ -11,44 +14,71 @@ function _interopDefault(e) {
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var Popover = function (_a) {
-  var buttonRef = _a.buttonRef,
+  var _b;
+  var _c;
+  var state = _a.state,
     popoverRef = _a.popoverRef,
-    racPopoverRef = _a.racPopoverRef,
-    children = _a.children;
-  var _b = SingleSelectContext.useSingleSelectContext(),
-    isOpen = _b.isOpen,
-    setOpen = _b.setOpen,
-    anchorName = _b.anchorName;
-  var _c = usePositioningStyles.usePositioningStyles(buttonRef, popoverRef, anchorName),
-    popoverStyle = _c.popoverStyle,
-    isPositioned = _c.isPositioned;
-  var shouldShowPopover = React.useMemo(function () {
-    return isOpen && isPositioned;
-  }, [isOpen, isPositioned]);
+    children = _a.children,
+    clearButtonRef = _a.clearButtonRef,
+    restProps = tslib.__rest(_a, ["state", "popoverRef", "children", "clearButtonRef"]);
+  var anchorName = SingleSelectContext.useSingleSelectContext().anchorName;
+  var manualPopoverRef = React__default.default.useRef(null);
+  var popoverProps = reactAria.usePopover(tslib.__assign(tslib.__assign({}, restProps), {
+    popoverRef: popoverRef,
+    shouldCloseOnInteractOutside: function (element) {
+      var _a;
+      if ((_a = clearButtonRef === null || clearButtonRef === void 0 ? void 0 : clearButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(element)) {
+        return false;
+      }
+      return true;
+    }
+  }), state).popoverProps;
+  var supportsAnchorPositioning = useSupportsAnchorPositioning.useSupportsAnchorPositioning();
+  var _d = usePositioningStyles.usePositioningStyles(restProps.triggerRef, manualPopoverRef, anchorName),
+    popoverStyle = _d.popoverStyle,
+    isPositioned = _d.isPositioned,
+    updatePosition = _d.updatePosition;
   React.useLayoutEffect(function () {
-    var popover = popoverRef.current;
-    if (!(popover === null || popover === void 0 ? void 0 : popover.showPopover) || !(popover === null || popover === void 0 ? void 0 : popover.hidePopover)) return;
-    if (shouldShowPopover) {
+    if (!supportsAnchorPositioning || !state.isOpen) return;
+    updatePosition();
+    var popover = manualPopoverRef === null || manualPopoverRef === void 0 ? void 0 : manualPopoverRef.current;
+    if (popover === null || popover === void 0 ? void 0 : popover.showPopover) {
       popover.showPopover();
-    } else {
+    }
+    return function () {
+      if (popover === null || popover === void 0 ? void 0 : popover.hidePopover) {
+        popover.hidePopover();
+      }
+    };
+  }, [state.isOpen, supportsAnchorPositioning, updatePosition, isPositioned]);
+  React.useLayoutEffect(function () {
+    if (!supportsAnchorPositioning || state.isOpen) return;
+    var popover = manualPopoverRef === null || manualPopoverRef === void 0 ? void 0 : manualPopoverRef.current;
+    if (popover === null || popover === void 0 ? void 0 : popover.hidePopover) {
       popover.hidePopover();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [shouldShowPopover]);
-  return React__default.default.createElement(reactAriaComponents.Popover, {
-    shouldUpdatePosition: false,
-    trigger: "manual",
-    isOpen: isOpen,
-    onOpenChange: setOpen,
-    ref: racPopoverRef
-  }, React__default.default.createElement("div", {
+  }, [state.isOpen, supportsAnchorPositioning]);
+  var manualPopover = React__default.default.createElement("div", {
     // @ts-expect-error - popover attribute is not included in current ts version, ignore type error
     popover: "manual",
-    ref: popoverRef,
+    ref: manualPopoverRef,
     className: Popover_module.popover,
     style: popoverStyle
-  }, children));
+  }, children);
+  return React__default.default.createElement(React__default.default.Fragment, null, state.isOpen && React__default.default.createElement(reactAria.Overlay, null, React__default.default.createElement("div", tslib.__assign({
+    id: "popover-id"
+  }, popoverProps, {
+    ref: popoverRef,
+    style: tslib.__assign(tslib.__assign({}, popoverProps.style), !supportsAnchorPositioning && {
+      width: (_c = restProps.triggerRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width
+    }),
+    className: classnames__default.default(Popover_module.popover, (_b = {}, _b[Popover_module.offsetSpacing] = !supportsAnchorPositioning, _b))
+  }), React__default.default.createElement(reactAria.DismissButton, {
+    onDismiss: state.close
+  }), supportsAnchorPositioning ? manualPopover : children, React__default.default.createElement(reactAria.DismissButton, {
+    onDismiss: state.close
+  }))));
 };
-Popover.displayName = 'SingleSelect.Popover';
 exports.Popover = Popover;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/Popover/Popover.module.css.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var styles = {
-  "popover": "Popover-module_popover__BjY2S"
+  "popover": "Popover-module_popover__BjY2S",
+  "offsetSpacing": "Popover-module_offsetSpacing__NdPBV"
 };
 module.exports = styles;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/Popover/utils/usePopoverPositioning.cjs

@@ -88,7 +88,8 @@ function usePopoverPositioning(_a) {
     };
   }, [updatePosition, triggerRef]);
   return tslib.__assign(tslib.__assign({}, position), {
-    isPositioned: isPositioned
+    isPositioned: isPositioned,
+    updatePosition: updatePosition
   });
 }
 exports.usePopoverPositioning = usePopoverPositioning;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/Popover/utils/usePositioningStyles.cjs

@@ -46,7 +46,8 @@ var usePositioningStyles = function (buttonRef, popoverRef, anchorName) {
     bottom = _a.bottom,
     insetInlineStart = _a.insetInlineStart,
     maxHeight = _a.maxHeight,
-    isPositioned = _a.isPositioned;
+    isPositioned = _a.isPositioned,
+    updatePosition = _a.updatePosition;
   var positionData = React.useMemo(function () {
     return {
       top: top,
@@ -63,7 +64,8 @@ var usePositioningStyles = function (buttonRef, popoverRef, anchorName) {
   }, [hasAnchorSupport, anchorName, positionData]);
   return {
     popoverStyle: popoverStyle,
-    isPositioned: isPositioned
+    isPositioned: isPositioned,
+    updatePosition: updatePosition
   };
 };
 exports.usePositioningStyles = usePositioningStyles;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/Select/Select.cjs

@@ -0,0 +1,87 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var select = require('@react-stately/select');
+var classnames = require('classnames');
+var reactAria = require('react-aria');
+var SingleSelectContext = require('../../context/SingleSelectContext.cjs');
+var List = require('../List/List.cjs');
+var Popover = require('../Popover/Popover.cjs');
+var SelectTrigger = require('../SelectTrigger/SelectTrigger.cjs');
+var Select_module = require('./Select.module.css.cjs');
+var Label = require('../../../../Label/Label.cjs');
+var FieldMessage = require('../../../../FieldMessage/FieldMessage.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var Select = function (props) {
+  var _a;
+  var label = props.label,
+    description = props.description,
+    labelHidden = props.labelHidden,
+    _b = props.labelPosition,
+    labelPosition = _b === void 0 ? 'top' : _b,
+    isDisabled = props.isDisabled,
+    isReadOnly = props.isReadOnly,
+    _c = props.size,
+    size = _c === void 0 ? 'medium' : _c,
+    _d = props.variant,
+    variant = _d === void 0 ? 'primary' : _d;
+  var state = select.useSelectState(tslib.__assign(tslib.__assign({}, props), {
+    items: props.items,
+    children: props.children
+  }));
+  var popoverRef = React.useRef(null);
+  var listBoxRef = React.useRef(null);
+  var triggerRef = React.useRef(null);
+  var _e = reactAria.useSelect(tslib.__assign(tslib.__assign({}, props), {
+      'aria-label': labelHidden ? label : undefined
+    }), state, triggerRef),
+    labelProps = _e.labelProps,
+    descriptionProps = _e.descriptionProps,
+    menuProps = _e.menuProps,
+    triggerProps = _e.triggerProps,
+    valueProps = _e.valueProps;
+  var uniqueId = React.useId();
+  var anchorName = "--trigger-".concat(uniqueId);
+  return React__default.default.createElement(SingleSelectContext.SingleSelectContext.Provider, {
+    value: {
+      anchorName: anchorName,
+      state: state,
+      isComboBox: false,
+      isDisabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : false,
+      isReadOnly: isReadOnly !== null && isReadOnly !== void 0 ? isReadOnly : false,
+      secondary: variant === 'secondary',
+      size: size,
+      fieldLabel: label
+    }
+  }, React__default.default.createElement("div", {
+    className: labelPosition === 'top' ? Select_module.topLabel : Select_module.sideLabel
+  }, !labelHidden && React__default.default.createElement("div", {
+    className: classnames__default.default(Select_module.label, (_a = {}, _a[Select_module.labelTop] = labelPosition === 'top', _a))
+  }, React__default.default.createElement(Label.Label, tslib.__assign({}, labelProps), label)), React__default.default.createElement("div", {
+    className: Select_module.selectTrigger
+  }, React__default.default.createElement(SelectTrigger.SelectTrigger, {
+    triggerProps: triggerProps,
+    valueProps: valueProps,
+    buttonRef: triggerRef
+  })), description && React__default.default.createElement("div", {
+    className: Select_module.description
+  }, React__default.default.createElement(FieldMessage.FieldMessage, tslib.__assign({
+    message: description
+  }, descriptionProps)))), React__default.default.createElement(Popover.Popover, {
+    state: state,
+    triggerRef: triggerRef,
+    popoverRef: popoverRef
+  }, React__default.default.createElement(List.List, {
+    listBoxOptions: menuProps,
+    state: state,
+    listBoxRef: listBoxRef
+  })));
+};
+exports.Select = Select;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/Select/Select.module.css.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var styles = {
+  "topLabel": "Select-module_topLabel__tuilO",
+  "sideLabel": "Select-module_sideLabel__om-vC",
+  "label": "Select-module_label__X4jf-",
+  "labelTop": "Select-module_labelTop__vE3N2",
+  "selectTrigger": "Select-module_selectTrigger__ibr4f",
+  "description": "Select-module_description__hOocq"
+};
+module.exports = styles;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/SelectTrigger/SelectTrigger.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var reactAria = require('react-aria');
+var Icon = require('../../../../Icon/Icon.cjs');
+var Text = require('../../../../Text/Text.cjs');
+var SingleSelectContext = require('../../context/SingleSelectContext.cjs');
+var SelectTrigger_module = require('./SelectTrigger.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var ChevronButton = function () {
+  var state = SingleSelectContext.useSingleSelectContext().state;
+  return React__default.default.createElement("div", {
+    className: SelectTrigger_module.chevronButton
+  }, React__default.default.createElement(Icon.Icon, {
+    isPresentational: true,
+    name: state.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'
+  }));
+};
+var SelectTrigger = function (_a) {
+  var _b;
+  var triggerProps = _a.triggerProps,
+    valueProps = _a.valueProps,
+    buttonRef = _a.buttonRef;
+  var _c = SingleSelectContext.useSingleSelectContext(),
+    state = _c.state,
+    anchorName = _c.anchorName,
+    isDisabled = _c.isDisabled,
+    isReadOnly = _c.isReadOnly,
+    secondary = _c.secondary,
+    size = _c.size;
+  var buttonProps = reactAria.useButton(triggerProps, buttonRef).buttonProps;
+  return React__default.default.createElement("button", tslib.__assign({}, buttonProps, {
+    type: "button",
+    style: {
+      '--anchor-name': anchorName
+    },
+    className: classnames__default.default(SelectTrigger_module.trigger, (_b = {}, _b[SelectTrigger_module.disabled] = isDisabled, _b[SelectTrigger_module.readOnly] = isReadOnly, _b[SelectTrigger_module.secondary] = secondary, _b[SelectTrigger_module.small] = size === 'small', _b[SelectTrigger_module.large] = size === 'large', _b)),
+    ref: buttonRef
+  }), React__default.default.createElement(Text.Text, {
+    variant: size === 'small' ? 'small' : 'body',
+    classNameOverride: isDisabled ? SelectTrigger_module.disabledText : undefined
+  }, React__default.default.createElement("span", tslib.__assign({}, valueProps), state.selectedItem ? state.selectedItem.textValue : '')), !isReadOnly && React__default.default.createElement(ChevronButton, null));
+};
+exports.SelectTrigger = SelectTrigger;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/SelectTrigger/SelectTrigger.module.css.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var styles = {
+  "trigger": "SelectTrigger-module_trigger__fIe03",
+  "disabled": "SelectTrigger-module_disabled__zfAoe",
+  "secondary": "SelectTrigger-module_secondary__eOquY",
+  "readOnly": "SelectTrigger-module_readOnly__q-Epr",
+  "disabledText": "SelectTrigger-module_disabledText__acP59",
+  "small": "SelectTrigger-module_small__jE-NG",
+  "large": "SelectTrigger-module_large__r93d8",
+  "chevronButton": "SelectTrigger-module_chevronButton__611jw"
+};
+module.exports = styles;

package/dist/esm/alpha.mjs

@@ -1 +1 @@
-export { SingleSelect } from './src/__alpha__/SingleSelect/SingleSelect.mjs';
+export { Item, SingleSelect } from './src/__alpha__/SingleSelect/SingleSelect.mjs';

package/dist/esm/src/Notification/InlineNotification/InlineNotification.mjs

@@ -19,7 +19,7 @@ const InlineNotification = /*#__PURE__*/function () {
       otherProps = __rest(_a, ["isSubtle", "hideCloseIcon", "persistent", "classNameOverride"]);
     return /*#__PURE__*/React.createElement(GenericNotification, __assign({
       style: "inline",
-      persistent: persistent !== null && persistent !== void 0 ? persistent : hideCloseIcon,
+      persistent: persistent || hideCloseIcon,
       classNameOverride: classnames(classNameOverride, [isSubtle && styles.subtle]),
       ref: ref
     }, otherProps));

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

@@ -1,77 +1,43 @@
-import { __rest, __assign } from 'tslib';
-import React, { useId, useMemo, isValidElement, cloneElement } from 'react';
-import { useSelectState } from '@react-stately/select';
-import { Select } from 'react-aria-components';
-import { SingleSelectContext } from './context/SingleSelectContext.mjs';
-import { List } from './subcomponents/List/List.mjs';
-import { ListSection } from './subcomponents/ListSection/ListSection.mjs';
-import { ListItem } from './subcomponents/ListItem/ListItem.mjs';
-import { Trigger } from './subcomponents/Trigger/Trigger.mjs';
-import { Popover } from './subcomponents/Popover/Popover.mjs';
+import { __assign, __rest } from 'tslib';
+import React from 'react';
+import { Item as Item$1, Section } from '@react-stately/collections';
+import 'react-aria';
+import 'classnames';
+import '../../Radio/Radio/Radio.mjs';
+import '../../Radio/RadioField/RadioField.mjs';
+import '../../Radio/RadioGroup/RadioGroup.mjs';
+import '../../Divider/Divider.mjs';
+import '../../Text/Text.mjs';
+import './context/SingleSelectContext.mjs';
+import '@cultureamp/i18n-react-intl';
+import '../../VisuallyHidden/VisuallyHidden.mjs';
+import '@react-aria/i18n';
+import { Select } from './subcomponents/Select/Select.mjs';
+import { ComboBox } from './subcomponents/ComboBox/ComboBox.mjs';
 const SingleSelect = /*#__PURE__*/function () {
-  const SingleSelect = function (_a) {
-    var items = _a.items,
-      onSelectionChange = _a.onSelectionChange,
-      children = _a.children,
-      restProps = __rest(_a, ["items", "onSelectionChange", "children"]);
-    var buttonRef = React.useRef(null);
-    var popoverRef = React.useRef(null);
-    var racPopoverRef = React.useRef(null);
-    var uniqueId = useId();
-    var anchorName = "--trigger-".concat(uniqueId);
-    var state = useSelectState({
-      items: items
-    });
-    var handleOnSelectionChange = React.useCallback(function (keys) {
-      var key = null;
-      if (keys instanceof Set && keys.size > 0) {
-        key = Array.from(keys)[0];
-      }
-      state.setSelectedKey(key);
-      if (onSelectionChange) {
-        onSelectionChange(key);
-      }
-    }, [state, onSelectionChange]);
-    // Cloning children here to allow users to pass in a custom ListItem or ListSection
-    // and still have the SingleSelect handle selection state
-    var injectedChildren = useMemo(function () {
-      if (! /*#__PURE__*/isValidElement(children)) return null;
-      var selectedKeys = state.selectedKey ? new Set([state.selectedKey]) : new Set();
-      return /*#__PURE__*/cloneElement(children, {
-        selectionMode: 'single',
-        selectedKeys: selectedKeys,
-        onSelectionChange: handleOnSelectionChange,
-        autoFocus: 'first'
-      });
-    }, [children, handleOnSelectionChange, state.selectedKey]);
-    return /*#__PURE__*/React.createElement(SingleSelectContext.Provider, {
-      value: {
-        isOpen: state.isOpen,
-        setOpen: state.setOpen,
-        selectedKey: state.selectedKey,
-        items: items,
-        anchorName: anchorName
-      }
-    }, /*#__PURE__*/React.createElement(Select
-    // TODO: allow user to pass in label
-    , __assign({
-      "aria-label": 'single-select',
-      onSelectionChange: function (key) {
-        return handleOnSelectionChange(key != null ? new Set([key]) : new Set());
-      },
-      placeholder: ""
-    }, restProps), /*#__PURE__*/React.createElement(Trigger, {
-      buttonRef: buttonRef
-    }), state.isOpen && (/*#__PURE__*/React.createElement(Popover, {
-      buttonRef: buttonRef,
-      popoverRef: popoverRef,
-      racPopoverRef: racPopoverRef
-    }, injectedChildren))));
+  const SingleSelect = function (props) {
+    var isComboBox = props.isComboBox,
+      children = props.children,
+      rest = __rest(props, ["isComboBox", "children"]);
+    if (isComboBox) {
+      return /*#__PURE__*/React.createElement(ComboBox, __assign({}, rest), children);
+    }
+    return /*#__PURE__*/React.createElement(Select, __assign({}, rest), children);
   };
-  SingleSelect.displayName = 'SingleSelect';
-  SingleSelect.List = List;
-  SingleSelect.ListItem = ListItem;
-  SingleSelect.ListSection = ListSection;
+  SingleSelect.Item = Item;
+  SingleSelect.Section = Section;
   return SingleSelect;
 }();
-export { SingleSelect };
+const Item = /*#__PURE__*/function () {
+  const Item = /*#__PURE__*/React.forwardRef(function (props, ref) {
+    // @ts-expect-error: StatelyItem doesn't know about our internal item props
+    return /*#__PURE__*/React.createElement(Item$1, __assign({}, props, {
+      ref: ref
+    }));
+  });
+  // @ts-expect-error: doesn't know that the Item can have this static property
+  Item.getCollectionNode = Item$1.getCollectionNode;
+  Item.displayName = 'SingleSelectItem';
+  return Item;
+}();
+export { Item, SingleSelect };

package/dist/esm/src/__alpha__/SingleSelect/subcomponents/ComboBox/ComboBox.mjs

@@ -0,0 +1,96 @@
+import { __assign } from 'tslib';
+import React, { useRef, useId } from 'react';
+import { useComboBoxState } from '@react-stately/combobox';
+import classnames from 'classnames';
+import { useFilter, useComboBox } from 'react-aria';
+import { FieldMessage } from '../../../../FieldMessage/FieldMessage.mjs';
+import { Label } from '../../../../Label/Label.mjs';
+import { SingleSelectContext } from '../../context/SingleSelectContext.mjs';
+import { ComboBoxTrigger } from '../ComboBoxTrigger/ComboBoxTrigger.mjs';
+import { List } from '../List/List.mjs';
+import { Popover } from '../Popover/Popover.mjs';
+import styles from './ComboBox.module.css.mjs';
+var ComboBox = function (props) {
+  var _a;
+  var items = props.items,
+    children = props.children,
+    label = props.label,
+    description = props.description,
+    labelHidden = props.labelHidden,
+    _b = props.labelPosition,
+    labelPosition = _b === void 0 ? 'top' : _b,
+    isReadOnly = props.isReadOnly,
+    isDisabled = props.isDisabled,
+    _c = props.size,
+    size = _c === void 0 ? 'medium' : _c,
+    _d = props.variant,
+    variant = _d === void 0 ? 'primary' : _d;
+  var contains = useFilter({
+    sensitivity: 'base'
+  }).contains;
+  var state = useComboBoxState(__assign(__assign({}, props), {
+    items: items,
+    defaultFilter: contains,
+    children: children,
+    menuTrigger: 'focus'
+  }));
+  var inputRef = useRef(null);
+  var popoverRef = useRef(null);
+  var listBoxRef = useRef(null);
+  var buttonRef = useRef(null);
+  var clearButtonRef = useRef(null);
+  var triggerWrapperRef = useRef(null);
+  var _e = useComboBox(__assign(__assign({}, props), {
+      'aria-label': labelHidden ? label : undefined,
+      inputRef: inputRef,
+      buttonRef: buttonRef,
+      popoverRef: popoverRef,
+      listBoxRef: listBoxRef
+    }), state),
+    labelProps = _e.labelProps,
+    descriptionProps = _e.descriptionProps,
+    inputProps = _e.inputProps,
+    listBoxProps = _e.listBoxProps,
+    buttonProps = _e.buttonProps;
+  var uniqueId = useId();
+  var anchorName = "--trigger-".concat(uniqueId);
+  return /*#__PURE__*/React.createElement(SingleSelectContext.Provider, {
+    value: {
+      anchorName: anchorName,
+      state: state,
+      isComboBox: true,
+      isDisabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : false,
+      isReadOnly: isReadOnly !== null && isReadOnly !== void 0 ? isReadOnly : false,
+      secondary: variant === 'secondary',
+      size: size,
+      fieldLabel: label
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: labelPosition === 'top' ? styles.topLabel : styles.sideLabel
+  }, !labelHidden && (/*#__PURE__*/React.createElement("div", {
+    className: classnames(styles.label, (_a = {}, _a[styles.labelTop] = labelPosition === 'top', _a))
+  }, /*#__PURE__*/React.createElement(Label, __assign({}, labelProps), label))), /*#__PURE__*/React.createElement("div", {
+    className: styles.comboBoxTrigger
+  }, /*#__PURE__*/React.createElement(ComboBoxTrigger, {
+    inputProps: inputProps,
+    inputRef: inputRef,
+    buttonRef: buttonRef,
+    buttonProps: buttonProps,
+    clearButtonRef: clearButtonRef,
+    triggerWrapperRef: triggerWrapperRef
+  })), description && (/*#__PURE__*/React.createElement("div", {
+    className: styles.description
+  }, /*#__PURE__*/React.createElement(FieldMessage, __assign({
+    message: description
+  }, descriptionProps))))), /*#__PURE__*/React.createElement(Popover, {
+    state: state,
+    triggerRef: triggerWrapperRef,
+    popoverRef: popoverRef,
+    clearButtonRef: clearButtonRef
+  }, /*#__PURE__*/React.createElement(List, {
+    listBoxOptions: listBoxProps,
+    state: state,
+    listBoxRef: listBoxRef
+  })));
+};
+export { ComboBox };

package/dist/esm/src/__alpha__/SingleSelect/subcomponents/ComboBox/ComboBox.module.css.mjs

@@ -0,0 +1,9 @@
+var styles = {
+  "topLabel": "ComboBox-module_topLabel__a2t80",
+  "sideLabel": "ComboBox-module_sideLabel__B-jX4",
+  "label": "ComboBox-module_label__eTnD9",
+  "labelTop": "ComboBox-module_labelTop__h6r-z",
+  "comboBoxTrigger": "ComboBox-module_comboBoxTrigger__yvqGb",
+  "description": "ComboBox-module_description__MDKJ7"
+};
+export { styles as default };