@telus-uds/components-base 3.29.1 → 4.0.0-alpha.1

package/lib/cjs/List/ListItemMark.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tokenTypes = exports.default = void 0;
+exports.tokenTypes = exports.ListItemMark = 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 _Icon = _interopRequireDefault(require("../Icon"));
-var _utils = require("../utils");
+var _Icon = require("../Icon/Icon");
+var _useVariants = require("../utils/useVariants");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const tokenTypes = exports.tokenTypes = {
@@ -49,7 +49,7 @@ const getIconColorVariants = iconVariants => iconVariants?.filter(variant => var
  * 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((_ref3, ref) => {
+const ListItemMark = exports.ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     icon,
     iconColor,
@@ -58,7 +58,7 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   } = _ref3;
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
   const containerStyles = selectContainerStyles(themeTokens);
-  const iconVariants = (0, _utils.useVariants)('Icon');
+  const iconVariants = (0, _useVariants.useVariants)('Icon');
   const iconColorVariants = getIconColorVariants(iconVariants);
   if (icon) {
     const {
@@ -69,7 +69,7 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     const finalIconColor = iconColor && !iconColorVariants?.includes(iconColor) ? iconColor : itemIconColor;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: containerStyles,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         icon: icon,
         tokens: {
           size: finalIconSize,
@@ -93,7 +93,7 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: bulletStyles,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         icon: themeTokens.bulletIcon,
         tokens: {
           color: itemIconColor,
@@ -118,5 +118,4 @@ ListItemMark.propTypes = {
    * Allow the user define the icon size
    */
   iconSize: _propTypes.default.number
-};
-var _default = exports.default = ListItemMark;
+};

package/lib/cjs/List/PressableListItemBase.js

@@ -3,17 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.PressableListItemBase = 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 _pressability = require("../utils/pressability");
+var _clickProps = require("../utils/props/clickProps");
+var _linkProps = require("../utils/props/linkProps");
+var _hrefAttrsProp = require("../utils/props/hrefAttrsProp");
+var _tokens = require("../utils/props/tokens");
+var _withLinkRouter = require("../utils/withLinkRouter");
+var _ListItemBase = require("./ListItemBase");
+var _ListItemContent = require("./ListItemContent");
+var _ListItemMark = require("./ListItemMark");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const selectPressableStyles = _ref => {
@@ -41,7 +45,7 @@ const selectPressableStyles = _ref => {
     })
   };
 };
-const PressableListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const PressableListItemBaseInner = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     href,
     tokens,
@@ -53,17 +57,17 @@ const PressableListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref
   const {
     onPress,
     ...props
-  } = _utils.clickProps.toPressProps(rest);
+  } = _clickProps.clickProps.toPressProps(rest);
   const {
     hrefAttrs,
     rest: listItemProps
-  } = _utils.hrefAttrsProp.bundle(props);
-  const handlePress = _utils.linkProps.handleHref({
+  } = _hrefAttrsProp.hrefAttrsProp.bundle(props);
+  const handlePress = _linkProps.linkProps.handleHref({
     href,
     onPress
   });
-  const listItemTokens = (0, _utils.selectTokens)('List', typeof tokens === 'function' ? tokens() : tokens);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemBase.default, {
+  const listItemTokens = (0, _tokens.selectTokens)('List', typeof tokens === 'function' ? tokens() : tokens);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemBase.ListItemBase, {
     ref: listItemRef,
     tokens: listItemTokens,
     ...listItemProps,
@@ -71,7 +75,7 @@ const PressableListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref
       let {
         isLastItem
       } = _ref3;
-      const getTokens = pressableState => (0, _utils.resolvePressableTokens)(tokens, pressableState, {
+      const getTokens = pressableState => (0, _pressability.resolvePressableTokens)(tokens, pressableState, {
         last: isLastItem
       });
       const getPressableStyle = pressableState => [staticStyles.itemContainer, selectPressableStyles(getTokens(pressableState))];
@@ -84,10 +88,10 @@ const PressableListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref
         children: pressableState => {
           const themeTokens = getTokens(pressableState);
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemMark.default, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemMark.ListItemMark, {
               icon: icon,
               tokens: themeTokens
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemContent.default, {
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemContent.ListItemContent, {
               tokens: themeTokens,
               children: typeof children === 'function' ? children(pressableState) : children
             })]
@@ -97,22 +101,24 @@ const PressableListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref
     }
   });
 });
-PressableListItemBase.displayName = 'PressableListItemBase';
-PressableListItemBase.__UDS_COMPONENT_TYPE__ = 'ListItem';
+PressableListItemBaseInner.displayName = 'PressableListItemBase';
 const staticStyles = _StyleSheet.default.create({
   itemContainer: {
     flexDirection: 'row',
     flex: 1
   }
 });
-PressableListItemBase.propTypes = {
-  ..._utils.withLinkRouter.propTypes,
+PressableListItemBaseInner.propTypes = {
+  ..._withLinkRouter.withLinkRouter.propTypes,
   href: _propTypes.default.string,
   onPress: _propTypes.default.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()
+  listItemRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.any
+  })])
 };
-var _default = exports.default = (0, _utils.withLinkRouter)(PressableListItemBase);
+const PressableListItemBase = exports.PressableListItemBase = (0, _withLinkRouter.withLinkRouter)(PressableListItemBaseInner);
+PressableListItemBase.__UDS_COMPONENT_TYPE__ = 'ListItem';

package/lib/cjs/Listbox/GroupControl.js

@@ -3,17 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.GroupControl = 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 _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _ThemeProvider = require("../ThemeProvider");
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _Spacer = _interopRequireDefault(require("../Spacer"));
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _Icon = require("../Icon/Icon");
+var _Spacer = require("../Spacer/Spacer");
 var _ListboxContext = require("./ListboxContext");
-var _utils = require("../utils");
+var _variantProp = require("../utils/props/variantProp");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const styles = _StyleSheet.default.create({
@@ -54,7 +54,7 @@ const selectContainerStyles = tokens => ({
   borderBottomWidth: tokens.groupBorderBottomWidth,
   borderBottomColor: tokens.groupBorderBottomColor
 });
-const GroupControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const GroupControl = exports.GroupControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     expanded,
     pressed,
@@ -69,7 +69,7 @@ const GroupControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     setSelectedId
   } = (0, _ListboxContext.useListboxContext)();
   const isSecondLevel = variant?.secondLevel === true;
-  const tokens = (0, _ThemeProvider.useThemeTokens)('Listbox', variant, {}, {
+  const tokens = (0, _useThemeTokens.useThemeTokens)('Listbox', variant, {}, {
     expanded,
     pressed,
     hover,
@@ -85,10 +85,10 @@ const GroupControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
       style: selectTextStyles(tokens),
       children: label
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.Spacer, {
       space: 1,
       direction: "row"
-    }), displayIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    }), displayIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
       icon: displayIcon,
       tokens: {
         color: tokens.groupColor
@@ -107,6 +107,5 @@ GroupControl.propTypes = {
   hover: _propTypes.default.bool,
   focus: _propTypes.default.bool,
   label: _propTypes.default.string,
-  variant: _utils.variantProp.propType
-};
-var _default = exports.default = GroupControl;
+  variant: _variantProp.variantProp.propType
+};

package/lib/cjs/Listbox/Listbox.js

@@ -3,20 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Listbox = 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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _ExpandCollapse = _interopRequireDefault(require("../ExpandCollapse"));
-var _ListboxGroup = _interopRequireDefault(require("./ListboxGroup"));
-var _ListboxItem = _interopRequireDefault(require("./ListboxItem"));
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _withLinkRouter = require("../utils/withLinkRouter");
+var _tokens = require("../utils/props/tokens");
+var _variantProp = require("../utils/props/variantProp");
+var _ExpandCollapse = require("../ExpandCollapse/ExpandCollapse");
+var _ListboxGroup = require("./ListboxGroup");
+var _ListboxItem = require("./ListboxItem");
 var _ListboxContext = require("./ListboxContext");
-var _ListboxOverlay = _interopRequireDefault(require("./ListboxOverlay"));
-var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _dictionary = require("./dictionary");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -34,7 +35,7 @@ const selectContainerStyles = tokens => ({
   backgroundColor: tokens.containerBackgroundColor
 });
 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 = exports.Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     items = [],
     firstItemRef = null,
@@ -46,7 +47,7 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     itemRouterProps,
     onClose,
     copy = 'en',
-    dictionary = _dictionary.default,
+    dictionary = _dictionary.dictionary,
     variant,
     tokens,
     testID
@@ -54,7 +55,7 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const initialOpen = getInitialOpen(items, defaultSelectedId);
   const [selectedId, setSelectedId] = _react.default.useState(defaultSelectedId);
   const [activeSecondLevelGroup, setActiveSecondLevelGroup] = _react.default.useState(null);
-  const listboxTokens = (0, _ThemeProvider.useThemeTokens)('Listbox', tokens, variant);
+  const listboxTokens = (0, _useThemeTokens.useThemeTokens)('Listbox', tokens, variant);
 
   // We need to keep track of each item's ref in order to be able to
   // focus on a specific item via keyboard navigation
@@ -111,7 +112,7 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListboxContext.ListboxContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.ExpandCollapse, {
       initialOpen: initialOpen,
       maxOpen: 1,
       ref: ref,
@@ -135,7 +136,7 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           if (!nestedItems && activeSecondLevelGroup) {
             return null;
           }
-          return nestedItems ? /*#__PURE__*/(0, _react.createElement)(_ListboxGroup.default, {
+          return nestedItems ? /*#__PURE__*/(0, _react.createElement)(_ListboxGroup.ListboxGroup, {
             ...item,
             expandProps: expandProps,
             LinkRouter: LinkRouter,
@@ -149,7 +150,7 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             variant: variant,
             tokens: tokens,
             onClose: onClose
-          }) : /*#__PURE__*/(0, _react.createElement)(_ListboxItem.default, {
+          }) : /*#__PURE__*/(0, _react.createElement)(_ListboxItem.ListboxItem, {
             ...item,
             key: itemId,
             id: itemId,
@@ -168,8 +169,8 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 });
 Listbox.displayName = 'Listbox';
 Listbox.propTypes = {
-  ..._utils.withLinkRouter.propTypes,
-  tokens: (0, _utils.getTokensPropType)('Listbox'),
+  ..._withLinkRouter.withLinkRouter.propTypes,
+  tokens: (0, _tokens.getTokensPropType)('Listbox'),
   /**
    * Focus will be moved to the item with this ref once within the menu.
    */
@@ -213,7 +214,5 @@ Listbox.propTypes = {
   /**
    * Listbox variant
    */
-  variant: _utils.variantProp.propType
-};
-Listbox.Overlay = _ListboxOverlay.default;
-var _default = exports.default = Listbox;
+  variant: _variantProp.variantProp.propType
+};

package/lib/cjs/Listbox/ListboxGroup.js

@@ -3,20 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ListboxGroup = 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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _utils = require("../utils");
-var _ThemeProvider = require("../ThemeProvider");
-var _ExpandCollapse = _interopRequireDefault(require("../ExpandCollapse"));
-var _ListboxItem = _interopRequireDefault(require("./ListboxItem"));
+var _withLinkRouter = require("../utils/withLinkRouter");
+var _variantProp = require("../utils/props/variantProp");
+var _copyPropTypes = require("../utils/props/copyPropTypes");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _ExpandCollapsePanel = require("../ExpandCollapse/ExpandCollapsePanel");
+var _ListboxItem = require("./ListboxItem");
 var _ListboxContext = require("./ListboxContext");
-var _GroupControl = _interopRequireDefault(require("./GroupControl"));
-var _SecondLevelHeader = _interopRequireDefault(require("./SecondLevelHeader"));
-var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _GroupControl = require("./GroupControl");
+var _SecondLevelHeader = require("./SecondLevelHeader");
+var _dictionary = require("./dictionary");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* eslint-disable react-native-a11y/has-valid-accessibility-role */
@@ -57,7 +59,7 @@ const selectSecondLevelContainerStyles = _ref => {
     backgroundColor: secondLevelHeaderBackgroundColor
   };
 };
-const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const ListboxGroup = exports.ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     id,
     label,
@@ -69,7 +71,7 @@ const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     nextItemRef,
     prevItemRef,
     copy = 'en',
-    dictionary = _dictionary.default,
+    dictionary = _dictionary.dictionary,
     variant = {},
     tokens = {},
     onClose
@@ -81,7 +83,7 @@ const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   } = (0, _ListboxContext.useListboxContext)();
   const [secondLevelOpen, setSecondLevelOpen] = _react.default.useState(false);
   const isSecondLevel = variant?.secondLevel === true;
-  const listboxTokens = (0, _ThemeProvider.useThemeTokens)('Listbox', variant, tokens);
+  const listboxTokens = (0, _useThemeTokens.useThemeTokens)('Listbox', variant, tokens);
   const groupId = id ?? label;
   const handleGroupClick = _react.default.useCallback(() => {
     if (isSecondLevel) {
@@ -106,7 +108,7 @@ const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   if (isSecondLevel && secondLevelOpen) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: [styles.secondLevelContainer, selectSecondLevelContainerStyles(listboxTokens)],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SecondLevelHeader.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SecondLevelHeader.SecondLevelHeader, {
         label: label,
         onBack: handleBackClick,
         onClose: handleCloseClick,
@@ -117,7 +119,7 @@ const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: styles.secondLevelList,
         children: items && items.map((item, index) => {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListboxItem.default, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListboxItem.ListboxItem, {
             id: item.id ?? item.label,
             ...item,
             selected: item.id && item.id === selectedId || item.label && item.label === selectedId,
@@ -146,7 +148,7 @@ const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     id: "test",
     style: styles.groupWrapper,
     accessibilityRole: getAccessibilityRole(),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default.Panel, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapsePanel.ExpandCollapsePanel, {
       panelId: id ?? label,
       controlTokens: {
         icon: null,
@@ -162,7 +164,7 @@ const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       // TODO refactor
       // eslint-disable-next-line react/no-unstable-nested-components
       ,
-      control: controlProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupControl.default, {
+      control: controlProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupControl.GroupControl, {
         id: id ?? label,
         ...controlProps,
         label: label,
@@ -190,7 +192,7 @@ const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       children: !isSecondLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: styles.list,
         children: items.map((item, index) => {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListboxItem.default, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListboxItem.ListboxItem, {
             id: item.id ?? item.label,
             ...item,
             selected: item.id && item.id === selectedId || item.label && item.label === selectedId,
@@ -216,7 +218,7 @@ const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 });
 ListboxGroup.displayName = 'ListboxGroup';
 ListboxGroup.propTypes = {
-  ..._utils.withLinkRouter.propTypes,
+  ..._withLinkRouter.withLinkRouter.propTypes,
   /**
    * Unique identifier for the group
    */
@@ -237,7 +239,7 @@ ListboxGroup.propTypes = {
   /**
    * Select English or French copy
    */
-  copy: _utils.copyPropTypes,
+  copy: _copyPropTypes.copyPropTypes,
   /**
    * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
    */
@@ -252,7 +254,7 @@ ListboxGroup.propTypes = {
   /**
    * Variant configuration for secondLevel behavior
    */
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   /**
    * Custom tokens
    */
@@ -261,5 +263,4 @@ ListboxGroup.propTypes = {
    * Callback when the menu is closed
    */
   onClose: _propTypes.default.func
-};
-var _default = exports.default = ListboxGroup;
+};

package/lib/cjs/Listbox/ListboxItem.js

@@ -3,17 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ListboxItem = 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 _PressableItem = _interopRequireDefault(require("./PressableItem"));
-var _ThemeProvider = require("../ThemeProvider");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _withLinkRouter = require("../utils/withLinkRouter");
+var _htmlAttrs = require("../utils/htmlAttrs");
+var _PressableItem = require("./PressableItem");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_htmlAttrs.htmlAttrs]);
 const styles = _StyleSheet.default.create({
   itemContainer: {
     display: 'flex',
@@ -26,7 +28,7 @@ const styles = _StyleSheet.default.create({
     paddingLeft: 24
   }
 });
-const ListboxItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const ListboxItemInner = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     href,
     label,
@@ -47,13 +49,13 @@ const ListboxItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     href,
     ...rest
   });
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Listbox', tokens, variant, {
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)('Listbox', tokens, variant, {
     isChild
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: [styles.itemContainer, isChild && styles.childContainer, nestedChild && styles.nestedChildContainer],
     role: "option",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableItem.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableItem.PressableItem, {
       href: href,
       isChild: isChild,
       onPress: onPress,
@@ -68,10 +70,10 @@ const ListboxItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     })
   });
 });
-ListboxItem.displayName = 'ListboxItem';
-ListboxItem.propTypes = {
+ListboxItemInner.displayName = 'ListboxItem';
+ListboxItemInner.propTypes = {
   ...selectedSystemPropTypes,
-  ..._utils.withLinkRouter.propTypes,
+  ..._withLinkRouter.withLinkRouter.propTypes,
   href: _propTypes.default.string,
   isChild: _propTypes.default.bool,
   label: _propTypes.default.node.isRequired,
@@ -80,4 +82,4 @@ ListboxItem.propTypes = {
   onPress: _propTypes.default.func,
   nestedChild: _propTypes.default.bool
 };
-var _default = exports.default = (0, _utils.withLinkRouter)(ListboxItem);
+const ListboxItem = exports.ListboxItem = (0, _withLinkRouter.withLinkRouter)(ListboxItemInner);

package/lib/cjs/Listbox/ListboxOverlay.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ListboxOverlay = 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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _Portal = _interopRequireDefault(require("../Portal"));
-var _ThemeProvider = require("../ThemeProvider");
-var _Card = _interopRequireDefault(require("../Card"));
+var _Portal = require("../Portal/Portal");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _Card = require("../Card/Card");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const staticStyles = _StyleSheet.default.create({
@@ -42,7 +42,7 @@ const DropdownOverlay = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     testID,
     variant
   } = _ref;
-  const systemTokens = (0, _ThemeProvider.useThemeTokens)('Listbox', variant, tokens);
+  const systemTokens = (0, _useThemeTokens.useThemeTokens)('Listbox', variant, tokens);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     onLayout: onLayout,
@@ -54,7 +54,7 @@ const DropdownOverlay = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     onMouseDown: e => {
       e.preventDefault();
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.Card, {
       tokens: {
         shadow: systemTokens.shadow,
         borderRadius: systemTokens.borderRadius,
@@ -73,7 +73,7 @@ const DropdownOverlay = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 });
 const withPortal = Overlay => {
   // eslint-disable-next-line react/display-name, react/no-multi-comp
-  return /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Portal.default, {
+  return /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Portal.Portal, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, {
       ...props,
       ref: ref
@@ -97,4 +97,4 @@ DropdownOverlay.propTypes = {
   testID: _propTypes.default.string,
   variant: _propTypes.default.object
 };
-var _default = exports.default = _Platform.default.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay;
+const ListboxOverlay = exports.ListboxOverlay = _Platform.default.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay;

package/lib/cjs/Listbox/PressableItem.js

@@ -3,16 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.PressableItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-var _utils = require("../utils");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _pressability = require("../utils/pressability");
+var _htmlAttrs = require("../utils/htmlAttrs");
 var _ListboxContext = require("./ListboxContext");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_htmlAttrs.htmlAttrs]);
 const getItemStyles = _ref => {
   let {
     groupFontName,
@@ -60,7 +62,7 @@ const getItemStyles = _ref => {
     justifyContent: 'center'
   };
 };
-const PressableItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const PressableItem = exports.PressableItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     href,
@@ -94,7 +96,7 @@ const PressableItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     };
   };
   const resolveButtonTokens = pressableState => {
-    const themeTokens = (0, _utils.resolvePressableTokens)(tokens, pressableState, {
+    const themeTokens = (0, _pressability.resolvePressableTokens)(tokens, pressableState, {
       isChild,
       current: id === selectedId && id !== undefined
     });
@@ -146,5 +148,4 @@ PressableItem.propTypes = {
   onPress: _propTypes.default.func,
   nextItemRef: _propTypes.default.object,
   prevItemRef: _propTypes.default.object
-};
-var _default = exports.default = PressableItem;
+};