@zendeskgarden/react-dropdowns 9.12.3 → 9.12.4

package/dist/esm/elements/combobox/Combobox.js

@@ -51,39 +51,38 @@ import { TagGroup } from './TagGroup.js';
 import { toOptions } from './utils.js';
 
 const MAX_TAGS = 4;
-const Combobox = forwardRef((_ref, ref) => {
-  let {
-    children,
-    activeIndex,
-    defaultActiveIndex,
-    defaultExpanded,
-    endIcon,
-    focusInset,
-    inputProps: _inputProps,
-    inputValue: _inputValue,
-    isAutocomplete,
-    isBare,
-    isCompact,
-    isDisabled,
-    isEditable = true,
-    isExpanded: _isExpanded,
-    isMultiselectable,
-    listboxAppendToNode,
-    listboxAriaLabel,
-    listboxMaxHeight = '400px',
-    listboxMinHeight,
-    listboxZIndex = 1000,
-    maxHeight,
-    maxTags = MAX_TAGS,
-    onChange,
-    placeholder,
-    renderExpandTags,
-    renderValue,
-    selectionValue,
-    startIcon,
-    validation,
-    ...props
-  } = _ref;
+const Combobox = forwardRef(({
+  children,
+  activeIndex,
+  defaultActiveIndex,
+  defaultExpanded,
+  endIcon,
+  focusInset,
+  inputProps: _inputProps,
+  inputValue: _inputValue,
+  isAutocomplete,
+  isBare,
+  isCompact,
+  isDisabled,
+  isEditable = true,
+  isExpanded: _isExpanded,
+  isMultiselectable,
+  listboxAppendToNode,
+  listboxAriaLabel,
+  listboxMaxHeight = '400px',
+  listboxMinHeight,
+  listboxZIndex = 1000,
+  maxHeight,
+  maxTags = MAX_TAGS,
+  onChange,
+  placeholder,
+  renderExpandTags,
+  renderValue,
+  selectionValue,
+  startIcon,
+  validation,
+  ...props
+}, ref) => {
   const {
     hasHint,
     hasMessage,

package/dist/esm/elements/combobox/Label.js

@@ -42,13 +42,12 @@ import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
 import '../../views/menu/StyledSeparator.js';
 
-const Label = forwardRef((_ref, ref) => {
-  let {
-    onClick,
-    onMouseEnter,
-    onMouseLeave,
-    ...props
-  } = _ref;
+const Label = forwardRef(({
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  ...props
+}, ref) => {
   const {
     labelProps
   } = useFieldContext();

package/dist/esm/elements/combobox/Listbox.js

@@ -45,19 +45,18 @@ import { ThemeContext } from 'styled-components';
 import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { composeEventHandlers } from '@zendeskgarden/container-utilities';
 
-const Listbox = forwardRef((_ref, ref) => {
-  let {
-    appendToNode,
-    children,
-    isCompact,
-    isExpanded,
-    maxHeight,
-    minHeight,
-    onMouseDown,
-    triggerRef,
-    zIndex,
-    ...props
-  } = _ref;
+const Listbox = forwardRef(({
+  appendToNode,
+  children,
+  isCompact,
+  isExpanded,
+  maxHeight,
+  minHeight,
+  onMouseDown,
+  triggerRef,
+  zIndex,
+  ...props
+}, ref) => {
   const floatingRef = useRef(null);
   const [isVisible, setIsVisible] = useState(false);
   const [height, setHeight] = useState();
@@ -77,11 +76,10 @@ const Listbox = forwardRef((_ref, ref) => {
     },
     placement: 'bottom-start',
     middleware: [offset(theme.space.base), flip(), size({
-      apply: _ref2 => {
-        let {
-          rects,
-          availableHeight
-        } = _ref2;
+      apply: ({
+        rects,
+        availableHeight
+      }) => {
         if (rects.reference.width > 0) {
           setWidth(rects.reference.width);
           if (!(minHeight === null || minHeight === 'fit-content') && rects.floating.height > availableHeight) {

package/dist/esm/elements/combobox/OptGroup.js

@@ -43,16 +43,15 @@ import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
 import '../../views/menu/StyledSeparator.js';
 
-const OptGroup = forwardRef((_ref, ref) => {
-  let {
-    children,
-    content,
-    icon,
-    legend,
-    'aria-label': ariaLabel,
-    onMouseDown,
-    ...props
-  } = _ref;
+const OptGroup = forwardRef(({
+  children,
+  content,
+  icon,
+  legend,
+  'aria-label': ariaLabel,
+  onMouseDown,
+  ...props
+}, ref) => {
   const {
     getOptGroupProps,
     isCompact

package/dist/esm/elements/combobox/Option.js

@@ -51,20 +51,19 @@ import '../../views/menu/StyledSeparator.js';
 import { OptionMeta } from './OptionMeta.js';
 import { toOption } from './utils.js';
 
-const OptionComponent = forwardRef((_ref, ref) => {
-  let {
-    children,
-    hasSelection,
-    icon,
-    isDisabled,
-    isHidden,
-    isSelected,
-    label,
-    type,
-    value,
-    tagProps,
-    ...props
-  } = _ref;
+const OptionComponent = forwardRef(({
+  children,
+  hasSelection,
+  icon,
+  isDisabled,
+  isHidden,
+  isSelected,
+  label,
+  type,
+  value,
+  tagProps,
+  ...props
+}, ref) => {
   const contextValue = useMemo(() => ({
     isDisabled,
     type

package/dist/esm/elements/combobox/Tag.js

@@ -45,14 +45,13 @@ import '../../views/menu/StyledItemTypeIcon.js';
 import '../../views/menu/StyledSeparator.js';
 import { TagAvatar } from './TagAvatar.js';
 
-const TagComponent = forwardRef((_ref, ref) => {
-  let {
-    children,
-    option,
-    removeLabel,
-    tooltipZIndex,
-    ...props
-  } = _ref;
+const TagComponent = forwardRef(({
+  children,
+  option,
+  removeLabel,
+  tooltipZIndex,
+  ...props
+}, ref) => {
   const {
     getTagProps,
     isCompact,

package/dist/esm/elements/combobox/TagGroup.js

@@ -7,29 +7,26 @@
 import React__default from 'react';
 import { Tag } from './Tag.js';
 
-const TagGroup = _ref => {
-  let {
-    children,
-    isDisabled,
-    isExpanded,
-    listboxZIndex,
-    maxTags,
-    optionTagProps,
-    selection
-  } = _ref;
-  return React__default.createElement(React__default.Fragment, null, selection.map((option, index) => {
-    const disabled = isDisabled || option.disabled;
-    return React__default.createElement(Tag, Object.assign({
-      key: option.value,
-      hidden: !isExpanded && index >= maxTags,
-      option: {
-        ...option,
-        disabled
-      },
-      tooltipZIndex: listboxZIndex ? listboxZIndex + 1 : undefined
-    }, optionTagProps[option.value]));
-  }), children);
-};
+const TagGroup = ({
+  children,
+  isDisabled,
+  isExpanded,
+  listboxZIndex,
+  maxTags,
+  optionTagProps,
+  selection
+}) => React__default.createElement(React__default.Fragment, null, selection.map((option, index) => {
+  const disabled = isDisabled || option.disabled;
+  return React__default.createElement(Tag, Object.assign({
+    key: option.value,
+    hidden: !isExpanded && index >= maxTags,
+    option: {
+      ...option,
+      disabled
+    },
+    tooltipZIndex: listboxZIndex ? listboxZIndex + 1 : undefined
+  }, optionTagProps[option.value]));
+}), children);
 TagGroup.displayName = 'TagGroup';
 
 export { TagGroup };

package/dist/esm/elements/menu/Item.js

@@ -63,23 +63,22 @@ const renderActionIcon = itemType => {
       return React__default.createElement(SvgCheckLgStroke, null);
   }
 };
-const ItemComponent = forwardRef((_ref, ref) => {
-  let {
-    children,
-    value,
-    label = value,
-    href,
-    isSelected,
-    icon,
-    isDisabled,
-    isExternal,
-    type,
-    name,
-    onClick,
-    onKeyDown,
-    onMouseEnter,
-    ...other
-  } = _ref;
+const ItemComponent = forwardRef(({
+  children,
+  value,
+  label = value,
+  href,
+  isSelected,
+  icon,
+  isDisabled,
+  isExternal,
+  type,
+  name,
+  onClick,
+  onKeyDown,
+  onMouseEnter,
+  ...other
+}, ref) => {
   const {
     type: selectionType
   } = useItemGroupContext();

package/dist/esm/elements/menu/ItemGroup.js

@@ -43,16 +43,15 @@ import { StyledItemTypeIcon } from '../../views/menu/StyledItemTypeIcon.js';
 import { StyledSeparator } from '../../views/menu/StyledSeparator.js';
 import { ItemGroupContext } from '../../context/useItemGroupContext.js';
 
-const ItemGroup = forwardRef((_ref, ref) => {
-  let {
-    children,
-    content,
-    legend,
-    icon,
-    'aria-label': ariaLabel,
-    type,
-    ...props
-  } = _ref;
+const ItemGroup = forwardRef(({
+  children,
+  content,
+  legend,
+  icon,
+  'aria-label': ariaLabel,
+  type,
+  ...props
+}, ref) => {
   const {
     isCompact,
     getItemGroupProps

package/dist/esm/elements/menu/Menu.js

@@ -17,25 +17,24 @@ import { toItems } from './utils.js';
 import { MenuList } from './MenuList.js';
 import SvgChevronDownStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js';
 
-const Menu = forwardRef((_ref2, ref) => {
-  let {
-    button,
-    buttonProps: _buttonProps = {},
-    children,
-    isCompact,
-    focusedValue: _focusedValue,
-    defaultFocusedValue,
-    defaultExpanded,
-    isExpanded: _isExpanded,
-    restoreFocus,
-    selectedItems,
-    onChange,
-    onMouseLeave,
-    maxHeight = '400px',
-    placement = 'bottom-start',
-    zIndex = 1000,
-    ...props
-  } = _ref2;
+const Menu = forwardRef(({
+  button,
+  buttonProps: _buttonProps = {},
+  children,
+  isCompact,
+  focusedValue: _focusedValue,
+  defaultFocusedValue,
+  defaultExpanded,
+  isExpanded: _isExpanded,
+  restoreFocus,
+  selectedItems,
+  onChange,
+  onMouseLeave,
+  maxHeight = '400px',
+  placement = 'bottom-start',
+  zIndex = 1000,
+  ...props
+}, ref) => {
   const triggerRef = useRef(null);
   const menuRef = useRef(null);
   const items = toItems(children);

package/dist/esm/elements/menu/MenuList.js

@@ -8,7 +8,7 @@ import React__default, { forwardRef, useRef, useState, useContext, useEffect } f
 import PropTypes from 'prop-types';
 import { ThemeContext } from 'styled-components';
 import { DEFAULT_THEME, getFloatingPlacements, getMenuPosition, getArrowPosition } from '@zendeskgarden/react-theming';
-import { useFloating, platform, offset, autoPlacement, flip, size, autoUpdate } from '@floating-ui/react-dom';
+import { useFloating, offset, autoPlacement, flip, size, platform, autoUpdate } from '@floating-ui/react-dom';
 import { PLACEMENT } from '../../types/index.js';
 import '../../views/combobox/StyledCombobox.js';
 import '../../views/combobox/StyledContainer.js';
@@ -46,21 +46,20 @@ import '../../views/menu/StyledSeparator.js';
 import { createPortal } from 'react-dom';
 
 const PLACEMENT_DEFAULT = 'bottom-start';
-const MenuList = forwardRef((_ref, ref) => {
-  let {
-    appendToNode,
-    hasArrow,
-    isCompact,
-    isExpanded,
-    fallbackPlacements: _fallbackPlacements,
-    maxHeight = '400px',
-    minHeight,
-    placement: _placement = PLACEMENT_DEFAULT,
-    triggerRef,
-    zIndex = 1000,
-    children,
-    ...props
-  } = _ref;
+const MenuList = forwardRef(({
+  appendToNode,
+  hasArrow,
+  isCompact,
+  isExpanded,
+  fallbackPlacements: _fallbackPlacements,
+  maxHeight = '400px',
+  minHeight,
+  placement: _placement = PLACEMENT_DEFAULT,
+  triggerRef,
+  zIndex = 1000,
+  children,
+  ...props
+}, ref) => {
   const floatingRef = useRef(null);
   const [isVisible, setIsVisible] = useState(isExpanded);
   const [height, setHeight] = useState();
@@ -86,11 +85,10 @@ const MenuList = forwardRef((_ref, ref) => {
     middleware: [offset(theme.space.base * (hasArrow ? 2 : 1)), _placement === 'auto' ? autoPlacement() : flip({
       fallbackPlacements
     }), size({
-      apply: _ref2 => {
-        let {
-          rects,
-          availableHeight
-        } = _ref2;
+      apply: ({
+        rects,
+        availableHeight
+      }) => {
         if (!(minHeight === null || minHeight === 'fit-content')) {
           if (rects.floating.height > availableHeight) {
             setHeight(availableHeight);

package/dist/esm/elements/menu/Separator.js

@@ -41,11 +41,10 @@ import { StyledSeparator } from '../../views/menu/StyledSeparator.js';
 import useMenuContext from '../../context/useMenuContext.js';
 
 const Separator = forwardRef(
-(_ref, ref) => {
-  let {
-    children,
-    ...props
-  } = _ref;
+({
+  children,
+  ...props
+}, ref) => {
   const {
     getSeparatorProps
   } = useMenuContext();

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/check-lg-stroke.svg.js

@@ -7,9 +7,9 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
 var SvgCheckLgStroke = function SvgCheckLgStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js

@@ -6,17 +6,17 @@
 */
 import * as React from 'react';
 
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _path$4;
+function _extends$5() { return _extends$5 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$5.apply(null, arguments); }
 var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
     "aria-hidden": "true"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
   })));

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js

@@ -6,17 +6,17 @@
 */
 import * as React from 'react';
 
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _path$1;
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
 var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
     "aria-hidden": "true"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
   })));

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js

@@ -6,17 +6,17 @@
 */
 import * as React from 'react';
 
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _path$2;
+function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
 var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
     "aria-hidden": "true"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
   })));

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/plus-stroke.svg.js

@@ -6,17 +6,17 @@
 */
 import * as React from 'react';
 
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _path$3;
+function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
 var SvgPlusStroke = function SvgPlusStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
     "aria-hidden": "true"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
     d: "M7.5 2.5v12m6-6h-12"

package/dist/esm/views/combobox/StyledCombobox.js

@@ -10,18 +10,18 @@ import { StyledLabel } from './StyledLabel.js';
 import { StyledHint } from './StyledHint.js';
 import { StyledMessage } from './StyledMessage.js';
 
-const COMPONENT_ID = 'dropdowns.combobox';
-const sizeStyles = props => {
+const COMPONENT_ID$t = 'dropdowns.combobox';
+const sizeStyles$b = props => {
   const minWidth = `${props.$isCompact ? 100 : 144}px`;
   const marginTop = `${props.theme.space.base * (props.$isCompact ? 1 : 2)}px`;
   return css(["min-width:", ";", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}"], minWidth, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, marginTop);
 };
 const StyledCombobox = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$t,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledCombobox",
   componentId: "sc-13eybg8-0"
-})(["", ";", ";"], sizeStyles, componentStyles);
+})(["", ";", ";"], sizeStyles$b, componentStyles);
 
 export { StyledCombobox };

package/dist/esm/views/combobox/StyledContainer.js

@@ -7,10 +7,10 @@
 import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'dropdowns.combobox.container';
+const COMPONENT_ID$s = 'dropdowns.combobox.container';
 const StyledContainer = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$s,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledContainer",
   componentId: "sc-14i9jid-0"

package/dist/esm/views/combobox/StyledField.js

@@ -7,10 +7,10 @@
 import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'dropdowns.combobox.field';
+const COMPONENT_ID$r = 'dropdowns.combobox.field';
 const StyledField = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$r,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-zc57xl-0"

package/dist/esm/views/combobox/StyledFloatingListbox.js

@@ -7,10 +7,10 @@
 import styled from 'styled-components';
 import { menuStyles, componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'dropdowns.combobox.floating';
+const COMPONENT_ID$q = 'dropdowns.combobox.floating';
 const StyledFloatingListbox = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$q,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledFloatingListbox",
   componentId: "sc-1cp6spf-0"