@telus-uds/components-base 1.97.0 → 1.97.1

package/lib/List/ListItemContent.js

@@ -1,25 +1,17 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.tokenTypes = exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _utils = require("../utils");
-var _ThemeProvider = require("../ThemeProvider");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const tokenTypes = {
-  itemFontWeight: _propTypes.default.string.isRequired,
-  itemFontSize: _propTypes.default.number.isRequired,
-  itemLineHeight: _propTypes.default.number.isRequired,
-  itemFontName: _propTypes.default.string.isRequired,
-  itemFontColor: _propTypes.default.string
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { wrapStringsInText } from '../utils';
+import { useTheme, applyTextStyles } from '../ThemeProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const tokenTypes = {
+  itemFontWeight: PropTypes.string.isRequired,
+  itemFontSize: PropTypes.number.isRequired,
+  itemLineHeight: PropTypes.number.isRequired,
+  itemFontName: PropTypes.string.isRequired,
+  itemFontColor: PropTypes.string
 };
-exports.tokenTypes = tokenTypes;
 const selectItemTextStyles = (_ref, themeOptions) => {
   let {
     itemFontWeight,
@@ -29,7 +21,7 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     itemFontColor,
     itemTextColor
   } = _ref;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return applyTextStyles({
     fontColor: itemFontColor || itemTextColor,
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
@@ -47,36 +39,35 @@ const selectItemTextStyles = (_ref, themeOptions) => {
  * It's the responsibility of themes to make sure that these text tokens align the first line of
  * text nicely against the bullet or icon rendered by ListIconMark.
  */
-const ListItemContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const ListItemContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     tokens,
     children
   } = _ref2;
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
+  } = useTheme();
   const textStyles = selectItemTextStyles(tokens, themeOptions);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(View, {
     style: [staticStyles.wrap, (tokens === null || tokens === void 0 ? void 0 : tokens.itemUnderline) && {
       textDecorationLine: tokens.itemUnderline,
       textDecorationColor: tokens.itemFontColor
     }],
     ref: ref,
-    children: (0, _utils.wrapStringsInText)(children, {
+    children: wrapStringsInText(children, {
       style: textStyles
     })
   });
 });
 ListItemContent.displayName = 'ListItemContent';
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   wrap: {
     flex: 1,
     justifyContent: 'center'
   }
 });
 ListItemContent.propTypes = {
-  tokens: _propTypes.default.shape(tokenTypes).isRequired,
-  children: _propTypes.default.node.isRequired
+  tokens: PropTypes.shape(tokenTypes).isRequired,
+  children: PropTypes.node.isRequired
 };
-var _default = ListItemContent;
-exports.default = _default;
+export default ListItemContent;

package/lib/List/ListItemMark.js

@@ -1,23 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.tokenTypes = exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const tokenTypes = {
-  itemIconSize: _propTypes.default.number.isRequired,
-  itemIconColor: _propTypes.default.string.isRequired,
-  listGutter: _propTypes.default.number.isRequired,
-  iconMarginTop: _propTypes.default.number.isRequired
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Icon from '../Icon';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const tokenTypes = {
+  itemIconSize: PropTypes.number.isRequired,
+  itemIconColor: PropTypes.string.isRequired,
+  listGutter: PropTypes.number.isRequired,
+  iconMarginTop: PropTypes.number.isRequired
 };
-exports.tokenTypes = tokenTypes;
 const selectItemIconTokens = _ref => {
   let {
     itemIconSize,
@@ -67,21 +59,21 @@ const selectBulletContainerStyles = _ref4 => {
  * It's the responsibility of themes to make sure that the supplied tokens align the
  * icon or bullet nicely against the first line of text in a ListIconContent.
  */
-const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+const ListItemMark = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     icon,
     iconColor,
     iconSize,
     tokens = {}
   } = _ref5;
-  const IconComponent = icon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+  const IconComponent = icon || /*#__PURE__*/_jsx(_Fragment, {});
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
   if (icon) {
     const iconTokens = selectItemIconTokens(themeTokens);
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    return /*#__PURE__*/_jsx(View, {
       style: sideItemContainerStyles,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+      children: /*#__PURE__*/_jsx(IconComponent, {
         size: iconSize || iconTokens.size,
         color: iconColor || iconTokens.color
       })
@@ -93,13 +85,13 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   } = themeTokens;
   const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
   const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(View, {
     style: [sideItemContainerStyles, itemBulletContainerStyles],
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    children: /*#__PURE__*/_jsx(View, {
       style: [staticStyles.bulletPositioning, itemBulletPositioningStyles],
       testID: "unordered-item-bullet",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      children: /*#__PURE__*/_jsx(Icon, {
         icon: bulletIcon,
         tokens: {
           color: bulletColor
@@ -110,25 +102,24 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
 });
 ListItemMark.displayName = 'ListItemMark';
 ListItemMark.propTypes = {
-  tokens: _propTypes.default.shape(tokenTypes).isRequired,
+  tokens: PropTypes.shape(tokenTypes).isRequired,
   /**
    * Renders side item icon
    */
-  icon: _propTypes.default.elementType,
+  icon: PropTypes.elementType,
   /**
    * Will set display icon color
    */
-  iconColor: _propTypes.default.string,
+  iconColor: PropTypes.string,
   /**
    * Allow the user define the icon size
    */
-  iconSize: _propTypes.default.number
+  iconSize: PropTypes.number
 };
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   bulletPositioning: {
     alignItems: 'center',
     justifyContent: 'center'
   }
 });
-var _default = ListItemMark;
-exports.default = _default;
+export default ListItemMark;

package/lib/List/PressableListItemBase.js

@@ -1,21 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
-var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _utils = require("../utils");
-var _ListItemBase = _interopRequireDefault(require("./ListItemBase"));
-var _ListItemContent = _interopRequireDefault(require("./ListItemContent"));
-var _ListItemMark = _interopRequireDefault(require("./ListItemMark"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import ABBPropTypes from 'airbnb-prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import { resolvePressableTokens, clickProps, linkProps, hrefAttrsProp, selectTokens, withLinkRouter } from '../utils';
+import ListItemBase from './ListItemBase';
+import ListItemContent from './ListItemContent';
+import ListItemMark from './ListItemMark';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const selectPressableStyles = _ref => {
   let {
     backgroundColor,
@@ -34,14 +27,14 @@ const selectPressableStyles = _ref => {
     paddingTop,
     paddingBottom,
     marginBottom: interItemMargin,
-    ..._Platform.default.select({
+    ...Platform.select({
       web: {
         outline: 'none'
       }
     })
   };
 };
-const PressableListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const PressableListItemBase = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     href,
     tokens,
@@ -53,17 +46,17 @@ const PressableListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref
   const {
     onPress,
     ...props
-  } = _utils.clickProps.toPressProps(rest);
+  } = clickProps.toPressProps(rest);
   const {
     hrefAttrs,
     rest: listItemProps
-  } = _utils.hrefAttrsProp.bundle(props);
-  const handlePress = _utils.linkProps.handleHref({
+  } = hrefAttrsProp.bundle(props);
+  const handlePress = linkProps.handleHref({
     href,
     onPress
   });
-  const listItemTokens = (0, _utils.selectTokens)('List', typeof tokens === 'function' ? tokens() : tokens);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemBase.default, {
+  const listItemTokens = selectTokens('List', typeof tokens === 'function' ? tokens() : tokens);
+  return /*#__PURE__*/_jsx(ListItemBase, {
     ref: listItemRef,
     tokens: listItemTokens,
     ...listItemProps,
@@ -71,11 +64,11 @@ const PressableListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref
       let {
         isLastItem
       } = _ref3;
-      const getTokens = pressableState => (0, _utils.resolvePressableTokens)(tokens, pressableState, {
+      const getTokens = pressableState => resolvePressableTokens(tokens, pressableState, {
         last: isLastItem
       });
       const getPressableStyle = pressableState => [staticStyles.itemContainer, selectPressableStyles(getTokens(pressableState))];
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+      return /*#__PURE__*/_jsx(Pressable, {
         onPress: handlePress,
         href: href,
         hrefAttrs: hrefAttrs,
@@ -83,11 +76,11 @@ const PressableListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref
         ref: ref,
         children: pressableState => {
           const themeTokens = getTokens(pressableState);
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemMark.default, {
+          return /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(ListItemMark, {
               icon: icon,
               tokens: themeTokens
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemContent.default, {
+            }), /*#__PURE__*/_jsx(ListItemContent, {
               tokens: themeTokens,
               children: typeof children === 'function' ? children(pressableState) : children
             })]
@@ -98,21 +91,20 @@ const PressableListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref
   });
 });
 PressableListItemBase.displayName = 'PressableListItemBase';
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   itemContainer: {
     flexDirection: 'row',
     flex: 1
   }
 });
 PressableListItemBase.propTypes = {
-  ..._utils.withLinkRouter.propTypes,
-  href: _propTypes.default.string,
-  onPress: _propTypes.default.func,
+  ...withLinkRouter.propTypes,
+  href: PropTypes.string,
+  onPress: PropTypes.func,
   // eslint-disable-next-line react/forbid-prop-types
-  tokens: _propTypes.default.any,
-  icon: _propTypes.default.elementType,
-  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-  listItemRef: _airbnbPropTypes.default.ref()
+  tokens: PropTypes.any,
+  icon: PropTypes.elementType,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  listItemRef: ABBPropTypes.ref()
 };
-var _default = (0, _utils.withLinkRouter)(PressableListItemBase);
-exports.default = _default;
+export default withLinkRouter(PressableListItemBase);

package/lib/List/index.js

@@ -1,24 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ListBase", {
-  enumerable: true,
-  get: function () {
-    return _List.default;
-  }
-});
-Object.defineProperty(exports, "ListItem", {
-  enumerable: true,
-  get: function () {
-    return _ListItem.default;
-  }
-});
-exports.default = void 0;
-var _List = _interopRequireDefault(require("./List"));
-var _ListItem = _interopRequireDefault(require("./ListItem"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-_List.default.Item = _ListItem.default;
-var _default = _List.default;
-exports.default = _default;
+import List from './List';
+import ListItem from './ListItem';
+List.Item = ListItem;
+export { List as ListBase, ListItem };
+export default List;

package/lib/Listbox/GroupControl.js

@@ -1,21 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-var _ThemeProvider = require("../ThemeProvider");
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _Spacer = _interopRequireDefault(require("../Spacer"));
-var _ListboxContext = require("./ListboxContext");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const styles = _StyleSheet.default.create({
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Text from "react-native-web/dist/exports/Text";
+import { useThemeTokens } from '../ThemeProvider';
+import Icon from '../Icon';
+import Spacer from '../Spacer';
+import { useListboxContext } from './ListboxContext';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = StyleSheet.create({
   controlWrapper: {
     width: '100%',
     flex: 1,
@@ -25,7 +18,7 @@ const styles = _StyleSheet.default.create({
     boxSizing: 'border-box'
   }
 });
-const GroupControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const GroupControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     expanded,
     pressed,
@@ -37,8 +30,8 @@ const GroupControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const {
     selectedId,
     setSelectedId
-  } = (0, _ListboxContext.useListboxContext)();
-  const tokens = (0, _ThemeProvider.useThemeTokens)('Listbox', {}, {}, {
+  } = useListboxContext();
+  const tokens = useThemeTokens('Listbox', {}, {}, {
     expanded,
     pressed,
     hover,
@@ -65,7 +58,7 @@ const GroupControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const getTextStyles = () => ({
     color: groupColor
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+  return /*#__PURE__*/_jsxs(View, {
     onPress: () => setSelectedId(id),
     style: [styles.controlWrapper, {
       fontFamily: `${groupFontName}${groupFontWeight}normal`,
@@ -83,13 +76,13 @@ const GroupControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       paddingBottom: groupPaddingBottom - groupBorderWidth
     }],
     ref: ref,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+    children: [/*#__PURE__*/_jsx(Text, {
       style: getTextStyles(),
       children: label
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+    }), /*#__PURE__*/_jsx(Spacer, {
       space: 1,
       direction: "row"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    }), /*#__PURE__*/_jsx(Icon, {
       icon: tokens.groupIcon,
       tokens: {
         color: tokens.groupColor
@@ -102,12 +95,11 @@ const GroupControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 });
 GroupControl.displayName = 'GroupControl';
 GroupControl.propTypes = {
-  id: _propTypes.default.string,
-  expanded: _propTypes.default.bool,
-  pressed: _propTypes.default.bool,
-  hover: _propTypes.default.bool,
-  focus: _propTypes.default.bool,
-  label: _propTypes.default.string
+  id: PropTypes.string,
+  expanded: PropTypes.bool,
+  pressed: PropTypes.bool,
+  hover: PropTypes.bool,
+  focus: PropTypes.bool,
+  label: PropTypes.string
 };
-var _default = GroupControl;
-exports.default = _default;
+export default GroupControl;

package/lib/Listbox/Listbox.js

@@ -1,33 +1,24 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _ExpandCollapse = _interopRequireDefault(require("../ExpandCollapse"));
-var _ListboxGroup = _interopRequireDefault(require("./ListboxGroup"));
-var _ListboxItem = _interopRequireDefault(require("./ListboxItem"));
-var _ListboxContext = require("./ListboxContext");
-var _ListboxOverlay = _interopRequireDefault(require("./ListboxOverlay"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const styles = _StyleSheet.default.create({
+import React, { createElement as _createElement } from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import { useThemeTokens } from '../ThemeProvider';
+import { withLinkRouter, getTokensPropType } from '../utils';
+import ExpandCollapse from '../ExpandCollapse';
+import ListboxGroup from './ListboxGroup';
+import ListboxItem from './ListboxItem';
+import { ListboxContext } from './ListboxContext';
+import DropdownOverlay from './ListboxOverlay';
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = StyleSheet.create({
   list: {
     padding: 0,
     margin: 0
   }
 });
 const getInitialOpen = (items, selectedId) => items.filter(item => item.items && item.items.some(nestedItem => (nestedItem.id ?? nestedItem.label) === selectedId)).map(item => item.id ?? item.label);
-const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const Listbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     items = [],
     firstItemRef = null,
@@ -42,18 +33,18 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     tokens
   } = _ref;
   const initialOpen = getInitialOpen(items, defaultSelectedId);
-  const [selectedId, setSelectedId] = _react.default.useState(defaultSelectedId);
+  const [selectedId, setSelectedId] = React.useState(defaultSelectedId);
   const {
     minHeight,
     minWidth
-  } = (0, _ThemeProvider.useThemeTokens)('Listbox', variant, tokens);
+  } = useThemeTokens('Listbox', variant, tokens);
 
   // We need to keep track of each item's ref in order to be able to
   // focus on a specific item via keyboard navigation
-  const itemRefs = _react.default.useRef([]);
+  const itemRefs = React.useRef([]);
   if (firstItemRef !== null && firstItemRef !== void 0 && firstItemRef.current) itemRefs.current[0] = firstItemRef.current;
-  const [focusedIndex, setFocusedIndex] = _react.default.useState(0);
-  const handleKeydown = _react.default.useCallback(event => {
+  const [focusedIndex, setFocusedIndex] = React.useState(0);
+  const handleKeydown = React.useCallback(event => {
     const nextItemRef = itemRefs.current[focusedIndex + 1];
     const prevItemRef = itemRefs.current[focusedIndex - 1];
     if (event.key === 'ArrowUp' || event.shiftKey && event.key === 'Tab') {
@@ -62,7 +53,7 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       if (prevItemRef) {
         event.preventDefault();
         prevItemRef.focus();
-      } else if (parentRef) (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : _parentRef$current.focus();
+      } else if (parentRef) (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 || _parentRef$current.focus();
       setFocusedIndex(focusedIndex - 1);
     } else if ((event.key === 'ArrowDown' || event.key === 'Tab') && nextItemRef) {
       event.preventDefault();
@@ -71,22 +62,22 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     } else if (event.key === 'Escape') {
       var _parentRef$current2, _parentRef$current3;
       // Close the dropdown
-      parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current2 = parentRef.current) === null || _parentRef$current2 === void 0 ? void 0 : _parentRef$current2.click();
+      parentRef === null || parentRef === void 0 || (_parentRef$current2 = parentRef.current) === null || _parentRef$current2 === void 0 || _parentRef$current2.click();
       // Return focus to the dropdown control after leaving the last item
-      parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current3 = parentRef.current) === null || _parentRef$current3 === void 0 ? void 0 : _parentRef$current3.focus();
+      parentRef === null || parentRef === void 0 || (_parentRef$current3 = parentRef.current) === null || _parentRef$current3 === void 0 || _parentRef$current3.focus();
       if (onClose) onClose(event);
     } else if (!nextItemRef && firstItemRef) {
       var _firstItemRef$current;
       // If the last item is focused, move the focus to the first one
       event.preventDefault();
       setFocusedIndex(0);
-      (_firstItemRef$current = firstItemRef.current) === null || _firstItemRef$current === void 0 ? void 0 : _firstItemRef$current.focus();
+      (_firstItemRef$current = firstItemRef.current) === null || _firstItemRef$current === void 0 || _firstItemRef$current.focus();
     }
   }, [focusedIndex, onClose, parentRef, firstItemRef]);
 
   // Add listeners for mouse clicks outside and for key presses
-  _react.default.useEffect(() => {
-    if (_Platform.default.OS === 'web') {
+  React.useEffect(() => {
+    if (Platform.OS === 'web') {
       window.addEventListener('click', onClose);
       window.addEventListener('keydown', handleKeydown);
       window.addEventListener('touchstart', onClose);
@@ -98,16 +89,16 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }
     return () => {};
   }, [onClose, handleKeydown]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListboxContext.ListboxContext.Provider, {
+  return /*#__PURE__*/_jsx(ListboxContext.Provider, {
     value: {
       selectedId,
       setSelectedId
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
+    children: /*#__PURE__*/_jsx(ExpandCollapse, {
       initialOpen: initialOpen,
       maxOpen: 1,
       ref: ref,
-      children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      children: expandProps => /*#__PURE__*/_jsx(View, {
         style: [styles.list, {
           minHeight,
           minWidth
@@ -126,7 +117,7 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             itemRefs.current[index] = currentItemRef;
             return currentItemRef;
           };
-          return nestedItems ? /*#__PURE__*/(0, _react.createElement)(_ListboxGroup.default, {
+          return nestedItems ? /*#__PURE__*/_createElement(ListboxGroup, {
             ...item,
             expandProps: expandProps,
             LinkRouter: LinkRouter,
@@ -135,7 +126,7 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             nextItemRef: itemRefs.current[index + 1] ?? null,
             ref: index === 0 ? firstItemRef : itemRef,
             key: itemId
-          }) : /*#__PURE__*/(0, _react.createElement)(_ListboxItem.default, {
+          }) : /*#__PURE__*/_createElement(ListboxItem, {
             ...item,
             key: itemId,
             id: itemId,
@@ -152,30 +143,29 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 });
 Listbox.displayName = 'Listbox';
 Listbox.propTypes = {
-  ..._utils.withLinkRouter.propTypes,
-  tokens: (0, _utils.getTokensPropType)('Listbox'),
+  ...withLinkRouter.propTypes,
+  tokens: getTokensPropType('Listbox'),
   /**
    * Focus will be moved to the item with this ref once within the menu.
    */
-  firstItemRef: _propTypes.default.object,
+  firstItemRef: PropTypes.object,
   /**
    * Focus will be returned to the dropdown control with this ref after leaving
    * the last menu item.
    */
-  parentRef: _propTypes.default.object,
+  parentRef: PropTypes.object,
   /**
    * `Listbox` items
    */
-  items: _propTypes.default.array,
+  items: PropTypes.array,
   /**
    * To select an item by default
    */
-  selectedId: _propTypes.default.string,
+  selectedId: PropTypes.string,
   /**
    * onClose event
    */
-  onClose: _propTypes.default.func
+  onClose: PropTypes.func
 };
-Listbox.Overlay = _ListboxOverlay.default;
-var _default = Listbox;
-exports.default = _default;
+Listbox.Overlay = DropdownOverlay;
+export default Listbox;