@kaizen/components 0.0.0-canary-v2-20250901045936 → 0.0.0-canary-debug-tab-20251015223744

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/Modal/GenericModal/GenericModal.mjs

@@ -1,8 +1,8 @@
-import React, { useId, useState, useCallback, useEffect } from 'react';
+import React, { useId, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { Transition } from '@headlessui/react';
 import classnames from 'classnames';
-import FocusLock from 'react-focus-lock';
+import { FocusOn } from 'react-focus-on';
 import { useIsClientReady } from '../../utils/useIsClientReady/useIsClientReady.mjs';
 import { warn } from '../util/console.mjs';
 import { ModalContext } from './context/ModalContext.mjs';
@@ -24,87 +24,60 @@ const GenericModal = /*#__PURE__*/function () {
     var labelledByID = useId();
     var describedByID = useId();
     var isClientReady = useIsClientReady();
-    var _c = useState(null),
-      scrollLayer = _c[0],
-      setScrollLayer = _c[1];
-    var _d = useState(null),
-      modalLayer = _d[0],
-      setModalLayer = _d[1];
+    var scrollLayerRef = useRef(null);
+    var modalLayerRef = useRef(null);
     var scrollModalToTop = function () {
       // If we have a really long modal, the autofocus could land on an element down below
       // causing the modal to scroll down and skipping over the content near the modal's top.
       // Ensure that when the modal opens, we are at the top of its content.
       requestAnimationFrame(function () {
-        if (!scrollLayer) return;
-        scrollLayer.scrollTop = 0;
+        var scrollElement = scrollLayerRef.current;
+        // This little verbose of a check but this ensures that the element is attached to the DOM as it animates in. This additional check aims to avoid race conditions
+        if (!(scrollElement === null || scrollElement === void 0 ? void 0 : scrollElement.isConnected)) return;
+        scrollElement.scrollTop = 0;
       });
     };
-    var outsideModalClickHandler = function (event) {
-      if (event.target === scrollLayer || event.target === modalLayer) {
-        onOutsideModalClick === null || onOutsideModalClick === void 0 ? void 0 : onOutsideModalClick(event);
+    var a11yWarn = function () {
+      if (!isClientReady) return;
+      // Ensure that consumers have provided an element that labels the modal
+      // to meet ARIA accessibility guidelines.
+      if (!document.getElementById(labelledByID)) {
+        warn("When using the Modal component, you must provide a label for the modal.\n        Make sure you have a <ModalAccessibleLabel /> component with content that labels the modal.");
       }
     };
     var focusOnAccessibleLabel = function () {
       if (!isClientReady) return;
+      var modalElement = modalLayerRef.current;
+      if (!(modalElement === null || modalElement === void 0 ? void 0 : modalElement.isConnected)) return;
       // Check if focus already exists within the modal
-      if (modalLayer === null || modalLayer === void 0 ? void 0 : modalLayer.contains(document.activeElement)) {
+      if (modalElement.contains(document.activeElement)) {
         return;
       }
       var labelElement = document.getElementById(labelledByID);
-      labelElement === null || labelElement === void 0 ? void 0 : labelElement.focus();
-    };
-    var a11yWarn = function () {
-      if (!isClientReady) return;
-      // Ensure that consumers have provided an element that labels the modal
-      // to meet ARIA accessibility guidelines.
-      if (!document.getElementById(labelledByID)) {
-        warn("When using the Modal component, you must provide a label for the modal.\n        Make sure you have a <ModalAccessibleLabel /> component with content that labels the modal.");
+      if (labelElement === null || labelElement === void 0 ? void 0 : labelElement.isConnected) {
+        labelElement.focus();
       }
     };
-    var preventBodyScroll = function () {
-      var _a;
-      if (!isClientReady) return;
-      var hasScrollbar = window.innerWidth > document.documentElement.clientWidth;
-      var scrollStyles = [styles.unscrollable];
-      if (hasScrollbar) {
-        scrollStyles.push(styles.pseudoScrollbar);
+    var onEscapeKeyHandler = function (e) {
+      if (e instanceof KeyboardEvent) {
+        onEscapeKeyup === null || onEscapeKeyup === void 0 ? void 0 : onEscapeKeyup(e);
       }
-      (_a = document.documentElement.classList).add.apply(_a, scrollStyles);
     };
     var onAfterEnterHandler = function () {
       scrollModalToTop();
-      if (modalLayer) {
+      var modalElement = modalLayerRef.current;
+      if (modalElement) {
         onAfterEnter === null || onAfterEnter === void 0 ? void 0 : onAfterEnter();
         focusOnAccessibleLabel();
         a11yWarn();
       }
     };
-    var escapeKeyHandler = useCallback(function (event) {
-      if (event.key === 'Escape') {
-        onEscapeKeyup === null || onEscapeKeyup === void 0 ? void 0 : onEscapeKeyup(event);
-      }
-    }, [onEscapeKeyup]);
-    var onBeforeEnterHandler = function () {
-      preventBodyScroll();
-      if (onEscapeKeyup && isClientReady) {
-        document.addEventListener('keyup', escapeKeyHandler);
+    var outsideModalClickHandler = function (e) {
+      if (e.target === scrollLayerRef.current || e.target === modalLayerRef.current) {
+        onOutsideModalClick === null || onOutsideModalClick === void 0 ? void 0 : onOutsideModalClick(e);
       }
     };
-    var cleanUpAfterClose = useCallback(function () {
-      if (!isClientReady) return;
-      document.documentElement.classList.remove(styles.unscrollable, styles.pseudoScrollbar);
-      if (onEscapeKeyup) {
-        document.removeEventListener('keyup', escapeKeyHandler);
-      }
-    }, [escapeKeyHandler, onEscapeKeyup, isClientReady]);
-    /* Ensure sure add-on styles (e.g. unscrollable) and key event is cleaned up when the modal is unmounted*/
-    useEffect(function () {
-      return function () {
-        return cleanUpAfterClose();
-      };
-    }, [cleanUpAfterClose]);
     var onAfterLeaveHandler = function () {
-      cleanUpAfterClose();
       propsOnAfterLeave === null || propsOnAfterLeave === void 0 ? void 0 : propsOnAfterLeave();
     };
     // Don't render portal during SSR
@@ -114,7 +87,6 @@ const GenericModal = /*#__PURE__*/function () {
     return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(Transition, {
       appear: true,
       show: isOpen,
-      beforeEnter: onBeforeEnterHandler,
       afterEnter: onAfterEnterHandler,
       afterLeave: onAfterLeaveHandler,
       "data-generic-modal-transition-wrapper": true,
@@ -122,9 +94,10 @@ const GenericModal = /*#__PURE__*/function () {
       leave: styles.animatingLeave,
       as: "div",
       className: classnames(styles.transitionLayer, className)
-    }, /*#__PURE__*/React.createElement(FocusLock, {
-      disabled: focusLockDisabled,
+    }, /*#__PURE__*/React.createElement(FocusOn, {
+      focusLock: focusLockDisabled,
       returnFocus: true,
+      onEscapeKey: onEscapeKeyHandler,
       // Disabling false positive
       // eslint-disable-next-line jsx-a11y/no-autofocus
       autoFocus: false
@@ -132,11 +105,9 @@ const GenericModal = /*#__PURE__*/function () {
       className: styles.backdropLayer
     }), /*#__PURE__*/React.createElement("div", {
       className: styles.scrollLayer,
-      ref: function (scrollLayerRef) {
-        setScrollLayer(scrollLayerRef);
-      },
-      onClick: outsideModalClickHandler,
-      "data-testid": "".concat(id, "-scrollLayer")
+      ref: scrollLayerRef,
+      "data-testid": "".concat(id, "-scrollLayer"),
+      onClick: outsideModalClickHandler
     }, /*#__PURE__*/React.createElement(ModalContext.Provider, {
       value: {
         labelledByID: labelledByID,
@@ -147,9 +118,7 @@ const GenericModal = /*#__PURE__*/function () {
       className: styles.modalLayer,
       "aria-labelledby": labelledByID,
       "aria-describedby": describedByID,
-      ref: function (modalLayerRef) {
-        return setModalLayer(modalLayerRef);
-      },
+      ref: modalLayerRef,
       "data-testid": id
     }, children))))), document.body);
   };

package/dist/esm/src/Modal/GenericModal/GenericModal.module.scss.mjs

@@ -4,8 +4,6 @@ var styles = {
   "modalLayer": "GenericModal-module_modalLayer__WfD1U",
   "transitionLayer": "GenericModal-module_transitionLayer__zTH-C",
   "animatingEnter": "GenericModal-module_animatingEnter__P3wuk",
-  "animatingLeave": "GenericModal-module_animatingLeave__rNkKX",
-  "unscrollable": "GenericModal-module_unscrollable__HjRaW",
-  "pseudoScrollbar": "GenericModal-module_pseudoScrollbar__BhRqh"
+  "animatingLeave": "GenericModal-module_animatingLeave__rNkKX"
 };
 export { styles as default };

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/SingleSelect/subcomponents/ListBox/ListBox.mjs

@@ -52,10 +52,14 @@ const ListBox = /*#__PURE__*/function () {
         var optionKey = getOptionKeyFromCollection(state);
         var focusToElement = safeQuerySelector("[data-key='".concat(optionKey, "']"));
         if (focusToElement) {
-          focusToElement.focus();
+          focusToElement.focus({
+            preventScroll: true
+          });
         } else {
           // If an element is not found, focus on the listbox. This ensures the list can still be navigated to via keyboard if the keys do not align to the data attributes of the list items.
-          (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+          (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus({
+            preventScroll: true
+          });
         }
       }
       // Only run this effect for checking the first successful render

package/dist/esm/src/Tabs/subcomponents/TabList/TabList.mjs

@@ -54,31 +54,39 @@ var TabList = function (props) {
     if (!tabs || tabs.length === 0) {
       return;
     }
-    var firstTabObserver = new IntersectionObserver(function (entries) {
-      if (!entries[0].isIntersecting) {
-        setLeftArrowEnabled(true);
+    var firstTabObserver = null;
+    var lastTabObserver = null;
+    requestAnimationFrame(function () {
+      var tabList = tabListRef.current;
+      if (!tabList) {
         return;
       }
-      setLeftArrowEnabled(false);
-    }, {
-      threshold: 0.8,
-      root: containerElement
+      firstTabObserver = new IntersectionObserver(function (entries) {
+        if (!entries[0].isIntersecting) {
+          setLeftArrowEnabled(true);
+          return;
+        }
+        setLeftArrowEnabled(false);
+      }, {
+        threshold: 0.8,
+        root: containerElement
+      });
+      firstTabObserver.observe(isRTL$1 ? tabs[tabs.length - 1] : tabs[0]);
+      lastTabObserver = new IntersectionObserver(function (entries) {
+        if (!entries[0].isIntersecting) {
+          setRightArrowEnabled(true);
+          return;
+        }
+        setRightArrowEnabled(false);
+      }, {
+        threshold: 0.8,
+        root: containerElement
+      });
+      lastTabObserver.observe(isRTL$1 ? tabs[0] : tabs[tabs.length - 1]);
     });
-    firstTabObserver.observe(isRTL$1 ? tabs[tabs.length - 1] : tabs[0]);
-    var lastTabObserver = new IntersectionObserver(function (entries) {
-      if (!entries[0].isIntersecting) {
-        setRightArrowEnabled(true);
-        return;
-      }
-      setRightArrowEnabled(false);
-    }, {
-      threshold: 0.8,
-      root: containerElement
-    });
-    lastTabObserver.observe(isRTL$1 ? tabs[0] : tabs[tabs.length - 1]);
     return function () {
-      firstTabObserver.disconnect();
-      lastTabObserver.disconnect();
+      firstTabObserver === null || firstTabObserver === void 0 ? void 0 : firstTabObserver.disconnect();
+      lastTabObserver === null || lastTabObserver === void 0 ? void 0 : lastTabObserver.disconnect();
     };
   }, [isDocumentReady, containerElement, isRTL$1, tabListContext === null || tabListContext === void 0 ? void 0 : tabListContext.collection.size]);
   useEffect(function () {

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