@telus-uds/components-base 3.22.0 → 3.23.0

package/CHANGELOG.md

@@ -1,9 +1,26 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 29 Oct 2025 07:40:46 GMT and should not be manually modified.
+This log was last generated on Wed, 19 Nov 2025 05:51:39 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.23.0
+
+Wed, 19 Nov 2025 05:51:39 GMT
+
+### Minor changes
+
+- `Listbox`: Added test and snapshot for Listbox (david.melara1@telus.com)
+- `Listbox`: Updated style for koodo, allium and public mobile; added new style variant (david.melara1@telus.com)
+- `ButtonGroup`: enhacements for iOS and android implemented and fix for the mobile version (35577399+JoshHC@users.noreply.github.com)
+- `Button`: Implement heightFull prop (oscar.palencia@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.16.0
+
+### Patches
+
+- `Validator`: code refactored to resolve several bugs (35577399+JoshHC@users.noreply.github.com)
+- `Carousel`: fix tab navigation (guillermo.peitzner@telus.com)
+
 ## 3.22.0
 
 Wed, 29 Oct 2025 07:40:46 GMT

package/lib/cjs/Button/Button.js

@@ -19,6 +19,7 @@ const Button = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     accessibilityRole = 'button',
     tokens,
     variant,
+    heightFull = true,
     ...props
   } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -36,6 +37,7 @@ const Button = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
     ...props,
     tokens: getTokens,
+    heightFull: heightFull,
     accessibilityRole: accessibilityRole,
     ref: ref,
     viewport: viewport

package/lib/cjs/Button/ButtonBase.js

@@ -40,23 +40,27 @@ const selectFlexAndWidthStyles = _ref2 => {
   }
   return styles;
 };
-const selectOuterContainerStyles = _ref3 => {
+const selectOuterContainerStyles = (_ref3, heightFull) => {
   let {
     opacity,
     outerBorderColor,
     outerBorderWidth,
     outerBorderGap,
     borderRadius,
-    outerBackgroundColor
+    outerBackgroundColor,
+    alignSelf
   } = _ref3;
   return {
+    backgroundColor: outerBackgroundColor,
+    opacity,
     ..._Platform.default.select({
       native: {
+        alignSelf: alignSelf !== undefined ? alignSelf : 'flex-start'
+      },
+      web: heightFull ? {} : {
         alignSelf: 'flex-start'
       }
     }),
-    backgroundColor: outerBackgroundColor,
-    opacity,
     ...(0, _ThemeProvider.applyOuterBorder)({
       outerBorderGap,
       outerBorderWidth,
@@ -255,6 +259,7 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
     icon,
     iconPosition = icon ? 'left' : undefined,
     iconProps,
+    heightFull = true,
     ...rawRest
   } = _ref12;
   const {
@@ -314,7 +319,7 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
     }
     const themeTokens = resolveButtonTokens(pressableState);
     const flexAndWidthStyles = themeTokens.width === '100%' && themeTokens.flex === 1 ? selectFlexAndWidthStyles(themeTokens) : {};
-    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), ...(Object.keys(flexAndWidthStyles).length > 0 ? [flexAndWidthStyles] : []), selectOuterSizeStyles(themeTokens)];
+    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens, heightFull), ...(Object.keys(flexAndWidthStyles).length > 0 ? [flexAndWidthStyles] : []), selectOuterSizeStyles(themeTokens)];
   };
   const dataSetProp = flexAndWidthStylesIds || rawRest.dataSet ? {
     dataSet: {

package/lib/cjs/Button/ButtonDropdown.js

@@ -112,6 +112,7 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     accessibilityRole = 'radio',
     description,
     singleOption,
+    heightFull = true,
     ...props
   } = _ref2;
   const isFullWidth = variant?.width === FULL_WIDTH_STYLE;
@@ -154,6 +155,7 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ...pressHandlers,
     onPress: handlePress,
     tokens: getButtonTokens,
+    heightFull: heightFull,
     inactive: singleOption || inactive,
     icon: () => null,
     accessibilityRole: accessibilityRole,

package/lib/cjs/Button/ButtonGroup.js

@@ -4,12 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
-var _StackView = require("../StackView");
 var _Fieldset = _interopRequireDefault(require("../Fieldset"));
 var _ViewportProvider = require("../ViewportProvider");
 var _ThemeProvider = require("../ThemeProvider");
@@ -17,17 +18,10 @@ var _utils = require("../utils");
 var _pressability = require("../utils/pressability");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
-const getStackWrapTokens = variant => {
-  return _Platform.default.select({
-    web: {
-      justifyContent: variant?.width === 'equal' ? 'space-evenly' : 'flex-start',
-      width: variant?.width === 'equal' ? '100%' : 'auto'
-    },
-    default: {}
-  });
-};
 const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     variant,
@@ -60,12 +54,6 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('ButtonGroup', tokens, variant, {
     viewport
   });
-  const themeStackTokens = (0, _utils.selectTokens)('StackView', themeTokens);
-  const variantStackTokens = getStackWrapTokens(variant);
-  const stackTokens = {
-    ...themeStackTokens,
-    ...variantStackTokens
-  };
   const {
     direction,
     space,
@@ -75,15 +63,34 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     padding,
     gap
   } = themeTokens;
+  const isMobileNonContained = _Platform.default.OS !== 'web' && (!variant || variant?.style !== 'contained');
   const themeButtonTokensCallback = (0, _ThemeProvider.useThemeTokensCallback)('ButtonGroupItem', tokens, variant);
-  const getButtonTokens = state => {
+  const gapValue = (0, _utils.useSpacingScale)(gap || space);
+  const getButtonTokens = (0, _react.useCallback)(state => {
     const themeButtonTokens = themeButtonTokensCallback(state);
+    const shouldUseTransparentBackground = isMobileNonContained && !state.selected && !state.pressed && !state.hover && !state.focus;
     return {
       ...themeButtonTokens,
-      width: variant?.width === 'equal' ? '100%' : 'auto',
-      flex: variant?.width === 'equal' ? 1 : undefined
+      ...(variant?.width === 'equal' && staticStyles.equalWidth),
+      ...(shouldUseTransparentBackground && {
+        backgroundColor: 'transparent'
+      }),
+      alignSelf: themeButtonTokens.width ? 'flex-start' : 'center'
     };
-  };
+  }, [themeButtonTokensCallback, isMobileNonContained, variant?.width]);
+  const fieldsetStyles = (0, _react.useMemo)(() => ({
+    ...staticStyles.fieldsetBase,
+    borderRadius,
+    backgroundColor: isMobileNonContained ? 'transparent' : backgroundColor || 'transparent',
+    padding,
+    width: variant?.width === 'equal' ? '100%' : 'auto'
+  }), [borderRadius, backgroundColor, padding, variant?.width, isMobileNonContained]);
+  const viewStyles = (0, _react.useMemo)(() => ({
+    ...staticStyles.viewBase,
+    flexDirection: direction === 'column' ? 'column' : 'row',
+    gap: gapValue || 0,
+    justifyContent: variant?.width === 'equal' ? 'space-evenly' : 'flex-start'
+  }), [direction, gapValue, variant?.width]);
   const {
     currentValues,
     toggleOneValue
@@ -120,25 +127,11 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     inactive: inactive,
     validation: validation,
     accessibilityRole: accessibilityRole,
-    style: {
-      borderRadius,
-      backgroundColor,
-      padding,
-      ...(_Platform.default.OS === 'web' ? {
-        gap,
-        width: variant?.width === 'equal' ? '100%' : 'auto'
-      } : {
-        alignSelf: 'flex-start'
-      })
-    },
+    style: fieldsetStyles,
     ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       accessibilityRole: innerRole,
-      space: space,
-      direction: direction,
-      tokens: stackTokens,
-      gap: gap,
-      ref: ref,
+      style: viewStyles,
       children: items.map((_ref2, index) => {
         let {
           label,
@@ -298,4 +291,18 @@ ButtonGroup.propTypes = {
    */
   copy: _propTypes.default.oneOf(['en', 'fr'])
 };
+const staticStyles = _StyleSheet.default.create({
+  fieldsetBase: {
+    alignSelf: 'flex-start',
+    display: 'inline'
+  },
+  viewBase: {
+    flexWrap: 'wrap',
+    alignItems: 'center'
+  },
+  equalWidth: {
+    width: '100%',
+    flex: 1
+  }
+});
 var _default = exports.default = ButtonGroup;

package/lib/cjs/Button/propTypes.js

@@ -13,6 +13,12 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const textAndA11yText = exports.textAndA11yText = _airbnbPropTypes.default.childrenOf(_propTypes.default.oneOfType([_airbnbPropTypes.default.elementType(_A11yText.default), _propTypes.default.string]));
 const buttonPropTypes = {
   tokens: (0, _props.getTokensPropType)('Button'),
+  /**
+   * If true, the button will honor the align-items value from its parent flex container.
+   * If false, the button will always align to 'flex-start' in a flex container.
+   * Currently, `heightFull`'s default behaviour will expand to the full height of its parent's flex container. In an upcoming major release, the default behaviour will be changed to expand based on the content. To maintain the expected behaviour, you must explicitly set `heightFull: true`
+   */
+  heightFull: _propTypes.default.bool,
   /**
    * If true, prevents the button from being pressed, changes the cursor (on web) and accessibility
    * attributes to communicate this to the user, and applies `inactive: true` appearances from the theme

package/lib/cjs/Carousel/Carousel.js

@@ -364,6 +364,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     ...rest
   } = _ref3;
   let childrenArray = (0, _utils.unpackFragment)(children);
+  const isTransitioningRef = _react.default.useRef(false);
   const viewport = (0, _ViewportProvider.useViewport)();
   const totalItems = getTotalItems(enableDisplayMultipleItemsPerSlide, childrenArray, viewport);
   const autoPlayFeatureEnabled = autoPlay && slideDuration > 0 && transitionDuration > 0 && totalItems > 1;
@@ -434,9 +435,14 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     setIsAnimating(true);
   }, [onAnimationStart]);
   const handleAnimationEnd = _react.default.useCallback(function () {
-    if (typeof onAnimationEnd === 'function') onAnimationEnd(...arguments);
-    setIsAnimating(false);
-  }, [onAnimationEnd]);
+    var _ref4;
+    const result = (_ref4 = arguments.length - 1, _ref4 < 0 || arguments.length <= _ref4 ? undefined : arguments[_ref4]);
+    if (result?.finished) {
+      if (typeof onAnimationEnd === 'function') onAnimationEnd(...arguments);
+      setIsAnimating(false);
+      isTransitioningRef.current = false;
+    }
+  }, [onAnimationEnd, isTransitioningRef]);
   const updateOffset = _react.default.useCallback(() => {
     if (enablePeeking) {
       const {
@@ -544,6 +550,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     }
     const index = activeIndexRef.current + calcDelta;
     if (skipChanges) {
+      isTransitioningRef.current = true;
       animate(pan, toValue, index);
       if (enableHero) {
         animate(heroPan, toValue, index);
@@ -559,6 +566,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       y: 0
     };
     heroToValue.x = heroContainerLayoutRef.current.width * -1 * calcDelta;
+    isTransitioningRef.current = true;
     animate(pan, toValue, index);
     if (enableHero) {
       animate(heroPan, heroToValue, index);
@@ -614,29 +622,29 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     heroContainerLayoutRef.current = heroContainerLayout;
   }, [heroContainerLayout]);
   _react.default.useEffect(() => {
-    pan.x.addListener(_ref4 => {
+    pan.x.addListener(_ref5 => {
       let {
         value
-      } = _ref4;
+      } = _ref5;
       animatedX.current = value;
     });
-    pan.y.addListener(_ref5 => {
+    pan.y.addListener(_ref6 => {
       let {
         value
-      } = _ref5;
+      } = _ref6;
       animatedY.current = value;
     });
     if (enableHero) {
-      heroPan.x.addListener(_ref6 => {
+      heroPan.x.addListener(_ref7 => {
         let {
           value
-        } = _ref6;
+        } = _ref7;
         heroAnimatedX.current = value;
       });
-      heroPan.y.addListener(_ref7 => {
+      heroPan.y.addListener(_ref8 => {
         let {
           value
-        } = _ref7;
+        } = _ref8;
         heroAnimatedY.current = value;
       });
     }
@@ -673,7 +681,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       stopAutoplay();
     };
   }, [stopAutoplay]);
-  const onContainerLayout = _ref8 => {
+  const onContainerLayout = _ref9 => {
     let {
       nativeEvent: {
         layout: {
@@ -683,7 +691,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           height
         }
       }
-    } = _ref8;
+    } = _ref9;
     return setContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -692,7 +700,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       height
     }));
   };
-  const onHeroContainerLayout = _ref9 => {
+  const onHeroContainerLayout = _ref10 => {
     let {
       nativeEvent: {
         layout: {
@@ -702,7 +710,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           height
         }
       }
-    } = _ref9;
+    } = _ref10;
     return setHeroContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -711,14 +719,14 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       height
     }));
   };
-  const onPreviousNextNavigationButtonLayout = _ref10 => {
+  const onPreviousNextNavigationButtonLayout = _ref11 => {
     let {
       nativeEvent: {
         layout: {
           width
         }
       }
-    } = _ref10;
+    } = _ref11;
     return setPreviousNextNavigationButtonWidth(width);
   };
   const isSwipeAllowed = _react.default.useCallback(() => {
@@ -880,6 +888,11 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     }
     setisCarouselPlaying(prevState => !prevState);
   }, [isCarouselPlaying, stopAutoplay, startAutoplay]);
+  const handleKeyDown = _react.default.useCallback(event => {
+    if (isTransitioningRef.current && event.key === 'Tab') {
+      event.preventDefault();
+    }
+  }, [isTransitioningRef]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: selectRootContainerStyles(enableHero, viewport),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -905,6 +918,9 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           ref: ref,
           ...systemProps,
           ...containerProps,
+          ...(_Platform.default.OS === 'web' ? {
+            onKeyDown: handleKeyDown
+          } : {}),
           children: [isAutoPlayEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
             style: [staticStyles.animationControlButton, selectControlButtonPositionStyles({
               positionVariant: previousNextNavigationPosition,
@@ -959,10 +975,27 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
               // This is a known Voiceover bug: https://github.com/phetsims/a11y-research/issues/132
               accessibilityLiveRegion: accessibilityLiveRegion,
               children: childrenArray.map((element, index) => {
-                const hidden = !isAnimating && index !== activeIndex;
+                let hidden = !isAnimating && index !== activeIndex;
+                if (enablePeeking && !isAnimating) {
+                  if (enableDisplayMultipleItemsPerSlide) {
+                    const maxItemsForSlide = getMaximumItemsForSlide(enableDisplayMultipleItemsPerSlide, viewport);
+                    if (index >= activeIndex * maxItemsForSlide - 1 && index < activeIndex * maxItemsForSlide + maxItemsForSlide + 1) {
+                      hidden = false;
+                    } else {
+                      hidden = true;
+                    }
+                  } else if (index >= activeIndex - 1 && index <= activeIndex + 1) {
+                    hidden = false;
+                  }
+                } else if (!enablePeeking && enableDisplayMultipleItemsPerSlide && !isAnimating) {
+                  const maxItemsForSlide = getMaximumItemsForSlide(enableDisplayMultipleItemsPerSlide, viewport);
+                  if (index >= activeIndex * maxItemsForSlide && index < activeIndex * maxItemsForSlide + maxItemsForSlide) {
+                    hidden = false;
+                  }
+                }
                 const clonedElement = /*#__PURE__*/_react.default.cloneElement(element, {
                   elementIndex: index,
-                  hidden: enablePeeking || enableDisplayMultipleItemsPerSlide ? false : hidden,
+                  hidden,
                   enablePeeking,
                   peekingProps: getPeekingProps(viewport),
                   enableDisplayMultipleItemsPerSlide,

package/lib/cjs/Carousel/CarouselItem/CarouselItem.js

@@ -104,13 +104,33 @@ const CarouselItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   });
   const focusabilityProps = activeIndex === elementIndex || enablePeeking ? {} : _utils.a11yProps.nonFocusableProps;
   const handleFocus = _react.default.useCallback(event => {
-    if (_Platform.default.OS === 'web' && elementIndex >= maximumItemsForSlide * (activeIndex + 1)) {
-      goTo(activeIndex + 1);
+    if (_Platform.default.OS === 'web') {
+      if (enablePeeking) {
+        if (enableDisplayMultipleItemsPerSlide) {
+          const startIndex = maximumItemsForSlide * activeIndex;
+          const endIndex = startIndex + maximumItemsForSlide - 1;
+          if (elementIndex < startIndex) {
+            if (activeIndex - 1 < 0) {
+              goTo(0);
+            } else {
+              goTo(activeIndex - 1);
+            }
+          } else if (elementIndex > endIndex) {
+            goTo(activeIndex + 1);
+          }
+        } else if (elementIndex !== activeIndex) {
+          if (elementIndex > activeIndex) {
+            goTo(activeIndex + 1);
+          } else if (elementIndex < activeIndex) {
+            goTo(activeIndex - 1);
+          }
+        }
+      }
     }
     if (rest.onFocus) {
       rest.onFocus(event);
     }
-  }, [elementIndex, activeIndex, goTo, maximumItemsForSlide, rest]);
+  }, [elementIndex, activeIndex, goTo, maximumItemsForSlide, rest, enablePeeking, enableDisplayMultipleItemsPerSlide]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: selectContainerStyle({
       width,

package/lib/cjs/Icon/Icon.js

@@ -43,17 +43,14 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     padding: themeTokens.padding
   };
   const getIconContentForMobile = () => {
-    if (Object.keys(paddingStyles).length) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: {
-          backgroundColor: themeTokens.backgroundColor,
-          borderRadius: themeTokens.borderRadius,
-          ...paddingStyles
-        },
-        children: iconContent
-      });
-    }
-    return iconContent;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: {
+        backgroundColor: themeTokens.backgroundColor,
+        borderRadius: themeTokens.borderRadius,
+        ...paddingStyles
+      },
+      children: iconContent
+    });
   };
   return _Platform.default.OS === 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref

package/lib/cjs/Icon/IconText.js

@@ -107,7 +107,6 @@ IconText.propTypes = {
    * `<Typography>` component, or a component that renders `<Text>`.
    */
   children: _propTypes.default.node
-  /* eslint-enable react/no-unused-prop-types */
 };
 const staticStyles = _StyleSheet.default.create({
   adjustedContainer: {

package/lib/cjs/Listbox/GroupControl.js

@@ -7,8 +7,8 @@ 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 _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _ThemeProvider = require("../ThemeProvider");
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _Spacer = _interopRequireDefault(require("../Spacer"));
@@ -16,7 +16,7 @@ var _ListboxContext = require("./ListboxContext");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const styles = _StyleSheet.default.create({
-  controlWrapper: {
+  container: {
     width: '100%',
     flex: 1,
     alignItems: 'center',
@@ -25,6 +25,34 @@ const styles = _StyleSheet.default.create({
     boxSizing: 'border-box'
   }
 });
+const selectTextStyles = tokens => ({
+  color: tokens.groupColor,
+  fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
+  fontSize: tokens.groupFontSize,
+  fontWeight: tokens.groupFontWeight
+});
+const selectContainerStyles = tokens => ({
+  fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
+  fontSize: tokens.groupFontSize,
+  color: tokens.groupColor,
+  textDecoration: tokens.itemTextDecoration,
+  backgroundColor: tokens.groupBackgroundColor,
+  outline: tokens.itemOutline,
+  minHeight: tokens.groupHeight,
+  borderRadius: tokens.groupBorderRadius,
+  paddingLeft: tokens.groupPaddingLeft - tokens.groupBorderLeftWidth,
+  paddingRight: tokens.groupPaddingRight - tokens.groupBorderRightWidth,
+  paddingTop: tokens.groupPaddingTop - tokens.groupBorderTopWidth,
+  paddingBottom: tokens.groupPaddingBottom - tokens.groupBorderBottomWidth,
+  borderLeftWidth: tokens.groupBorderLeftWidth,
+  borderLeftColor: tokens.groupBorderLeftColor,
+  borderRightWidth: tokens.groupBorderRightWidth,
+  borderRightColor: tokens.groupBorderRightColor,
+  borderTopWidth: tokens.groupBorderTopWidth,
+  borderTopColor: tokens.groupBorderTopColor,
+  borderBottomWidth: tokens.groupBorderBottomWidth,
+  borderBottomColor: tokens.groupBorderBottomColor
+});
 const GroupControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     expanded,
@@ -45,51 +73,17 @@ const GroupControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     current: selectedId === id && id !== undefined,
     focus
   });
-  const {
-    groupFontName,
-    groupFontWeight,
-    groupFontSize,
-    groupColor,
-    groupBackgroundColor,
-    groupBorderColor,
-    groupBorderWidth,
-    groupBorderRadius,
-    groupPaddingLeft,
-    groupPaddingRight,
-    groupPaddingTop,
-    groupPaddingBottom,
-    itemTextDecoration,
-    itemOutline,
-    groupHeight
-  } = tokens;
-  const getTextStyles = () => ({
-    color: groupColor
-  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     onPress: () => setSelectedId(id),
-    style: [styles.controlWrapper, {
-      fontFamily: `${groupFontName}${groupFontWeight}normal`,
-      fontSize: groupFontSize,
-      color: groupColor,
-      textDecoration: itemTextDecoration,
-      backgroundColor: groupBackgroundColor,
-      outline: itemOutline,
-      height: groupHeight,
-      border: `${groupBorderWidth}px solid ${groupBorderColor}`,
-      borderRadius: groupBorderRadius,
-      paddingLeft: groupPaddingLeft - groupBorderWidth,
-      paddingRight: groupPaddingRight - groupBorderWidth,
-      paddingTop: groupPaddingTop - groupBorderWidth,
-      paddingBottom: groupPaddingBottom - groupBorderWidth
-    }],
+    style: [styles.container, selectContainerStyles(tokens)],
     ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-      style: getTextStyles(),
+      style: selectTextStyles(tokens),
       children: label
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
       space: 1,
       direction: "row"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    }), tokens.groupIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
       icon: tokens.groupIcon,
       tokens: {
         color: tokens.groupColor