@telus-uds/components-base 1.96.0 → 1.97.1

package/lib/List/ListItemBase.js

@@ -1,22 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-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 _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../utils");
-var _ListItemContent = _interopRequireDefault(require("./ListItemContent"));
-var _ListItemMark = _interopRequireDefault(require("./ListItemMark"));
-var _Typography = _interopRequireDefault(require("../Typography"));
-var _ThemeProvider = require("../ThemeProvider");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+import React from 'react';
+import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import PropTypes from 'prop-types';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import ListItemContent from './ListItemContent';
+import ListItemMark from './ListItemMark';
+import Typography from '../Typography';
+import { useThemeTokens } from '../ThemeProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectItemBlockStyles = _ref => {
   let {
     interItemMargin
@@ -42,7 +35,7 @@ const selectDividerStyles = _ref2 => {
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
-const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const ListItemBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tokens,
     icon,
@@ -52,7 +45,7 @@ const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     children,
     title,
     isLastItem,
-    accessibilityRole = _Platform.default.select({
+    accessibilityRole = Platform.select({
       web: 'listitem',
       default: undefined
     }),
@@ -69,7 +62,7 @@ const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const {
     fontSize,
     lineHeight: lineHeightRatio
-  } = (0, _ThemeProvider.useThemeTokens)('Typography', {}, {
+  } = useThemeTokens('Typography', {}, {
     size: 'h4',
     bold: true
   });
@@ -90,7 +83,7 @@ const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     }
     return itemBlockStyles;
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: [staticStyles.container, getContainerStyle()],
     accessibilityRole: accessibilityRole,
@@ -101,9 +94,9 @@ const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       iconColor,
       iconSize,
       isLastItem
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    }) : /*#__PURE__*/_jsxs(View, {
       style: staticStyles.container,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemMark.default, {
+      children: [/*#__PURE__*/_jsx(ListItemMark, {
         tokens: {
           ...tokens,
           iconMarginTop: adjustedIconMarginTop
@@ -111,15 +104,15 @@ const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         icon: icon,
         iconColor: iconColor,
         iconSize: iconSize
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      }), /*#__PURE__*/_jsxs(View, {
         style: staticStyles.titleAndContentContainer,
-        children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        children: [Boolean(title) && /*#__PURE__*/_jsx(Typography, {
           variant: {
             size: 'h4',
             bold: true
           },
           children: title
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemContent.default, {
+        }), /*#__PURE__*/_jsx(ListItemContent, {
           tokens: tokens,
           children: children
         })]
@@ -128,7 +121,7 @@ const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   });
 });
 ListItemBase.displayName = 'ListItem';
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   container: {
     flex: 1,
     flexDirection: 'row'
@@ -136,36 +129,36 @@ const staticStyles = _StyleSheet.default.create({
   titleAndContentContainer: {
     flexDirection: 'column',
     flexShrink: 1,
-    flexGrow: 1
+    flexGrow: 1,
+    textAlign: 'justify'
   }
 });
 ListItemBase.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('List'),
-  variant: _utils.variantProp.propType,
-  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
+  tokens: getTokensPropType('List'),
+  variant: variantProp.propType,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).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 if not defined the theme's file
    */
-  iconSize: _propTypes.default.number,
+  iconSize: PropTypes.number,
   /**
    * @ignore
    * Defined by parent if it's last item on the list
    */
-  isLastItem: _propTypes.default.bool,
+  isLastItem: PropTypes.bool,
   /**
    * @ignore
    * In case it is not the last item allow display divider
    */
-  showDivider: _propTypes.default.bool
+  showDivider: PropTypes.bool
 };
-var _default = ListItemBase;
-exports.default = _default;
+export default ListItemBase;

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,
@@ -62,7 +55,10 @@ const GroupControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     itemOutline,
     groupHeight
   } = tokens;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+  const getTextStyles = () => ({
+    color: groupColor
+  });
+  return /*#__PURE__*/_jsxs(View, {
     onPress: () => setSelectedId(id),
     style: [styles.controlWrapper, {
       fontFamily: `${groupFontName}${groupFontWeight}normal`,
@@ -80,12 +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
@@ -98,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;