@telus-uds/components-base 1.96.0 → 1.97.1

package/lib/Button/ButtonBase.js

@@ -1,22 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = 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 _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 _propTypes2 = _interopRequireDefault(require("./propTypes"));
-var _utils = require("../utils");
-var _Icon = require("../Icon");
-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.focusHandlerProps, _utils.linkProps, _utils.viewProps]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+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 { applyTextStyles, applyShadowToken, applyOuterBorder, useTheme } from '../ThemeProvider';
+import buttonPropTypes from './propTypes';
+import { a11yProps, clickProps, focusHandlerProps, getCursorStyle, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, viewProps, wrapStringsInText, withLinkRouter } from '../utils';
+import { IconText } from '../Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, linkProps, viewProps]);
 const getOuterBorderOffset = _ref => {
   let {
     outerBorderGap = 0,
@@ -34,14 +27,14 @@ const selectOuterContainerStyles = _ref2 => {
     outerBackgroundColor
   } = _ref2;
   return {
-    ..._Platform.default.select({
+    ...Platform.select({
       native: {
         alignSelf: 'flex-start'
       }
     }),
     backgroundColor: outerBackgroundColor,
     opacity,
-    ...(0, _ThemeProvider.applyOuterBorder)({
+    ...applyOuterBorder({
       outerBorderGap,
       outerBorderWidth,
       outerBorderColor,
@@ -73,7 +66,7 @@ const selectOuterSizeStyles = _ref3 => {
     return {
       ...sizeStyles,
       // Wrap content, stopping a flex parent's default align-items: stretch stretching focus ring beyond content
-      ..._Platform.default.select({
+      ...Platform.select({
         // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
         web: {
           display: 'inline-flex'
@@ -83,7 +76,7 @@ const selectOuterSizeStyles = _ref3 => {
   }
 
   // Ensure the negative margin doesn't make element off-centre
-  if (_Platform.default.OS === 'web') {
+  if (Platform.OS === 'web') {
     sizeStyles.width = `calc(${width} + ${outerBorderOffset * 2}px)`;
     sizeStyles.height = `calc(${height} + ${outerBorderOffset * 2}px)`;
     return sizeStyles;
@@ -143,7 +136,7 @@ const selectInnerContainerStyles = _ref4 => {
     }),
     backgroundColor,
     minWidth,
-    ...(0, _ThemeProvider.applyShadowToken)(shadow)
+    ...applyShadowToken(shadow)
   };
 };
 const selectBorderStyles = _ref6 => {
@@ -177,7 +170,7 @@ const selectTextStyles = (_ref7, themeOptions) => {
     textLine,
     textLineStyle
   } = _ref7;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return applyTextStyles({
     fontSize,
     color,
     lineHeight,
@@ -193,14 +186,14 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
   let {
     accessibilityRole
   } = _ref8;
-  return _Platform.default.select({
+  return Platform.select({
     web: {
       // if it would overflow the container, wraps instead
       maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
       width: 'fit-content',
       outline: 'none',
       // removes the default browser :focus outline
-      ...(0, _utils.getCursorStyle)(inactive, accessibilityRole)
+      ...getCursorStyle(inactive, accessibilityRole)
     },
     default: {}
   });
@@ -225,7 +218,7 @@ const selectItemIconTokens = _ref10 => {
     color: iconColor || color
   };
 };
-const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
+const ButtonBase = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
   let {
     id,
     href,
@@ -244,13 +237,13 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
   const {
     onPress,
     ...rest
-  } = _utils.clickProps.toPressProps(rawRest);
+  } = clickProps.toPressProps(rawRest);
   const extraButtonState = {
     inactive,
     selected,
     iconPosition
   };
-  const resolveButtonTokens = pressableState => (0, _utils.resolvePressableTokens)(tokens, pressableState, extraButtonState);
+  const resolveButtonTokens = pressableState => resolvePressableTokens(tokens, pressableState, extraButtonState);
   const systemProps = selectProps(rest);
   const getPressableStyle = pressableState => {
     const themeTokens = resolveButtonTokens(pressableState);
@@ -258,11 +251,11 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
   };
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+  } = useTheme();
+  return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     href: href,
-    onPress: _utils.linkProps.handleHref({
+    onPress: linkProps.handleHref({
       href,
       onPress
     }),
@@ -274,12 +267,11 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
       const themeTokens = resolveButtonTokens(pressableState);
       const containerStyles = selectInnerContainerStyles(themeTokens);
       const borderStyles = selectBorderStyles(themeTokens);
-      const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text, _Platform.default.select({
+      const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text, Platform.select({
         web: {
           pointerEvents: 'none' // bubbles press event to parent `Pressable`
         }
       })];
-
       const iconTokens = selectItemIconTokens(themeTokens);
       const {
         iconSpace
@@ -290,9 +282,9 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
       const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align;
       const IconComponent = icon || themeTokens.icon;
       const rowStyles = selectButtonStyles(themeTokens);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      return /*#__PURE__*/_jsx(View, {
         id: id,
-        style: [containerStyles, borderStyles, stretchStyles, staticStyles.row, _Platform.default.select({
+        style: [containerStyles, borderStyles, stretchStyles, staticStyles.row, Platform.select({
           web: {
             maxWidth: '100%',
             // ensure overflowing content wraps
@@ -303,7 +295,7 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
             ...rowStyles
           }
         })],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {
+        children: /*#__PURE__*/_jsx(IconText, {
           icon: IconComponent,
           iconPosition: iconPosition,
           space: icon ? iconSpace : 0,
@@ -311,8 +303,8 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
             ...iconProps,
             tokens: iconTokens
           },
-          children: (0, _utils.wrapStringsInText)(typeof children === 'function' ? children({
-            ...(0, _utils.resolvePressableState)(pressableState, extraButtonState),
+          children: wrapStringsInText(typeof children === 'function' ? children({
+            ...resolvePressableState(pressableState, extraButtonState),
             textStyles
           }) : children, {
             style: textStyles
@@ -324,18 +316,18 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
 });
 ButtonBase.displayName = 'ButtonBase';
 ButtonBase.propTypes = {
-  id: _propTypes.default.string,
+  id: PropTypes.string,
   ...selectedSystemPropTypes,
-  ..._propTypes2.default
+  ...buttonPropTypes
 };
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   row: {
     // Apply all button alignment horizontally; no vertical stacking within a button
     flexDirection: 'row',
     justifyContent: 'center'
   },
   text: {
-    ..._Platform.default.select({
+    ...Platform.select({
       // TODO: https://github.com/telus/universal-design-system/issues/487
       web: {
         transition: 'color 200ms'
@@ -351,5 +343,4 @@ const staticStyles = _StyleSheet.default.create({
     justifyContent: 'center'
   }
 });
-var _default = (0, _utils.withLinkRouter)(ButtonBase);
-exports.default = _default;
+export default withLinkRouter(ButtonBase);

package/lib/Button/ButtonDropdown.js

@@ -1,25 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _propTypes2 = _interopRequireWildcard(require("./propTypes"));
-var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _StackView = require("../StackView");
-var _pressability = require("../utils/pressability");
-var _jsxRuntime = require("react/jsx-runtime");
-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; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import buttonPropTypes, { textAndA11yText } from './propTypes';
+import ButtonBase from './ButtonBase';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, focusHandlerProps, resolvePressableState, selectTokens, useInputValue } from '../utils';
+import Icon from '../Icon';
+import { getStackedContent } from '../StackView';
+import { getPressHandlersWithArgs } from '../utils/pressability';
+import { jsx as _jsx } from "react/jsx-runtime";
 const selectIconTokens = _ref => {
   let {
     icon,
@@ -43,7 +34,7 @@ const selectIconTokens = _ref => {
       borderRadius: iconBorderRadius,
       alignSelf: iconAlignSelf,
       padding: iconPadding,
-      ..._Platform.default.select({
+      ...Platform.select({
         // TODO: https://github.com/telus/universal-design-system/issues/487
         web: {
           transition: 'color 200ms, background 200ms'
@@ -58,7 +49,7 @@ const selectIconTokens = _ref => {
     }
   };
 };
-const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     value,
     initialValue,
@@ -75,7 +66,7 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   const {
     currentValue: isOpen,
     setValue: setIsOpen
-  } = (0, _utils.useInputValue)({
+  } = useInputValue({
     value,
     initialValue,
     onChange,
@@ -86,21 +77,21 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     inactive,
     ...variant
   };
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', tokens, extraState);
-  const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getTokens(buttonState));
+  const getTokens = useThemeTokensCallback('ButtonDropdown', tokens, extraState);
+  const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
 
   // Pass an object of relevant component state as first argument for any passed-in press handlers
-  const pressHandlers = (0, _pressability.getPressHandlersWithArgs)(props, [{
+  const pressHandlers = getPressHandlersWithArgs(props, [{
     label,
     open: isOpen
   }]);
   const handlePress = event => {
     if (!inactive) {
-      if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
+      if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 || pressHandlers.onPress(event);
       setIsOpen(!isOpen, event);
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+  return /*#__PURE__*/_jsx(ButtonBase, {
     ref: ref,
     ...pressHandlers,
     onPress: handlePress,
@@ -128,22 +119,22 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
         iconWrapperStyle,
         icon: IconComponent
       } = selectIconTokens(itemTokens);
-      const iconContent = IconComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      const iconContent = IconComponent ? /*#__PURE__*/_jsx(View, {
         style: iconWrapperStyle,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        children: /*#__PURE__*/_jsx(Icon, {
           icon: IconComponent,
           tokens: iconTokens
         })
       }) : null;
       const childrenContent = () => typeof children === 'function' ? children({
-        ...(0, _utils.resolvePressableState)(buttonState, extraState),
+        ...resolvePressableState(buttonState, extraState),
         textStyles
       }) : children;
-      const content = children ? childrenContent() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      const content = children ? childrenContent() : /*#__PURE__*/_jsx(Text, {
         style: textStyles,
         children: label
       });
-      return (0, _StackView.getStackedContent)(iconPosition === 'left' ? [iconContent, content] : [content, iconContent], {
+      return getStackedContent(iconPosition === 'left' ? [iconContent, content] : [content, iconContent], {
         space: iconSpace,
         direction: 'row'
       });
@@ -152,32 +143,31 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 });
 ButtonDropdown.displayName = 'ButtonDropdown';
 ButtonDropdown.propTypes = {
-  ..._utils.a11yProps.types,
-  ..._utils.focusHandlerProps.types,
-  ..._propTypes2.default,
-  children: _propTypes2.textAndA11yText,
-  tokens: (0, _utils.getTokensPropType)('ButtonDropdown'),
+  ...a11yProps.types,
+  ...focusHandlerProps.types,
+  ...buttonPropTypes,
+  children: textAndA11yText,
+  tokens: getTokensPropType('ButtonDropdown'),
   /**
    * Callback called when a controlled ButtonDropdown gets interacted with.
    */
-  onChange: _propTypes.default.func,
+  onChange: PropTypes.func,
   /**
    * `value` prop is being used to set the 'open' state of ButtonDropdown. Use it for
    *  controlled ButtonDropdown. For uncontrolled ButtonDropdown, use `initialValue`.
    */
-  value: _propTypes.default.bool,
+  value: PropTypes.bool,
   /**
    * Use `initialValue` to provide the initial value for an uncontrolled version.
    */
-  initialValue: _propTypes.default.bool,
+  initialValue: PropTypes.bool,
   /**
    * The label of ButtonDropdown.
    */
-  label: _propTypes.default.string,
+  label: PropTypes.string,
   /**
    * By default, `ButtonDropdown` is treated by accessibility tools as a radio button.
    */
-  accessibilityRole: _propTypes.default.string
+  accessibilityRole: PropTypes.string
 };
-var _default = ButtonDropdown;
-exports.default = _default;
+export default ButtonDropdown;

package/lib/Button/ButtonGroup.js

@@ -1,25 +1,18 @@
-"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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
-var _StackView = require("../StackView");
-var _Fieldset = _interopRequireDefault(require("../Fieldset"));
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _pressability = require("../utils/pressability");
-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]);
-const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
-const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import React from 'react';
+import PropTypes from 'prop-types';
+import ABBPropTypes from 'airbnb-prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import ButtonBase from './ButtonBase';
+import { StackWrap } from '../StackView';
+import Fieldset from '../Fieldset';
+import { useViewport } from '../ViewportProvider';
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, containUniqueFields, focusHandlerProps, pressProps, getTokensPropType, selectSystemProps, selectTokens, useMultipleInputValues, variantProp, viewProps } from '../utils';
+import { getPressHandlersWithArgs } from '../utils/pressability';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
+const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variant,
     buttonVariant,
@@ -41,17 +34,17 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     copy,
     iconPosition,
     accessibilityRole = maxValues === 1 ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
-    : _Platform.default.select({
+    : Platform.select({
       web: 'group',
       default: 'none'
     }),
     ...rest
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ButtonGroup', tokens, variant, {
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('ButtonGroup', tokens, variant, {
     viewport
   });
-  const stackTokens = (0, _utils.selectTokens)('StackView', themeTokens);
+  const stackTokens = selectTokens('StackView', themeTokens);
   const {
     direction,
     space,
@@ -61,11 +54,11 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     padding,
     gap
   } = themeTokens;
-  const getButtonTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonGroupItem', tokens, variant);
+  const getButtonTokens = useThemeTokensCallback('ButtonGroupItem', tokens, variant);
   const {
     currentValues,
     toggleOneValue
-  } = (0, _utils.useMultipleInputValues)({
+  } = useMultipleInputValues({
     initialValues,
     values,
     maxValues,
@@ -78,13 +71,13 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   });
   const itemA11yRole = systemProps.accessibilityRole === 'radiogroup' ? 'radio' : 'checkbox';
   const uniqueFields = ['id', 'label'];
-  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+  if (!containUniqueFields(items, uniqueFields)) {
     throw new Error(`ButtonGroup items must have unique ${uniqueFields.join(', ')}`);
   }
 
   // Some web screenreaders e.g. MacOS Voiceover don't handle radiogroups properly unless radio is direct child of radiogroup
-  const innerRole = _Platform.default.OS === 'web' && accessibilityRole === 'radiogroup' ? accessibilityRole : undefined;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+  const innerRole = Platform.OS === 'web' && accessibilityRole === 'radiogroup' ? accessibilityRole : undefined;
+  return /*#__PURE__*/_jsx(Fieldset, {
     ...systemProps,
     ref: ref,
     name: inputGroupName,
@@ -102,7 +95,7 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       borderRadius,
       backgroundColor,
       padding,
-      ...(_Platform.default.OS === 'web' ? {
+      ...(Platform.OS === 'web' ? {
         gap,
         width: 'fit-content'
       } : {
@@ -110,7 +103,7 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       })
     },
     ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+    children: /*#__PURE__*/_jsx(StackWrap, {
       accessibilityRole: innerRole,
       space: space,
       direction: direction,
@@ -128,7 +121,7 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         const isSelected = currentValues.includes(id);
 
         // Pass an object of relevant component state as first argument for any passed-in press handlers
-        const pressHandlers = (0, _pressability.getPressHandlersWithArgs)(rest, [{
+        const pressHandlers = getPressHandlersWithArgs(rest, [{
           id,
           label,
           currentValues
@@ -144,12 +137,12 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           },
           accessibilityRole: itemA11yRole,
           accessibilityLabel,
-          ..._utils.a11yProps.getPositionInSet(items.length, index)
+          ...a11yProps.getPositionInSet(items.length, index)
         };
 
         // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
         // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+        return /*#__PURE__*/_jsx(ButtonBase, {
           ref: itemRef,
           variant: buttonVariant,
           ...pressHandlers,
@@ -172,109 +165,108 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 ButtonGroup.displayName = 'ButtonGroup';
 ButtonGroup.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('ButtonGroup'),
+  tokens: getTokensPropType('ButtonGroup'),
   /**
    * To allow Button specific variant
    */
-  buttonVariant: _utils.variantProp.propType,
+  buttonVariant: variantProp.propType,
   /**
    * Default variant prop
    */
-  variant: _utils.variantProp.propType,
+  variant: variantProp.propType,
   /**
    * The maximum number of items a user may select at once. Defaults to 1 and behaves
    * like radio buttons. To have no limit and allow any number of selections, pass `null`.
    */
-  maxValues: _propTypes.default.number,
+  maxValues: PropTypes.number,
   /**
    * The options a user may select
    */
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+  items: PropTypes.arrayOf(PropTypes.shape({
     ...selectedItemPropTypes,
     /**
      * The text displayed to the user in the button, describing this option,
      * passed to the button as its child.
      */
-    label: _propTypes.default.string.isRequired,
+    label: PropTypes.string.isRequired,
     /**
      * An optional accessibility label may be passed to ButtonGroup Buttons
      * which is applied as normal for a React Native accessibilityLabel prop.
      */
-    accessibilityLabel: _propTypes.default.string,
+    accessibilityLabel: PropTypes.string,
     /**
      * An optional unique string may be provided to identify this option,
      * which will be used in code and passed to any onChange function.
      * If not provided, the label is used.
      */
-    id: _propTypes.default.string,
+    id: PropTypes.string,
     /**
      * An optional ref for one individual button in the ButtonGroup
      */
-    ref: _airbnbPropTypes.default.ref()
+    ref: ABBPropTypes.ref()
   })),
   /**
    * If provided, this function is called when the current selection is changed
    * and is passed an array of the `id`s of all currently selected `items`.
    */
-  onChange: _propTypes.default.func,
+  onChange: PropTypes.func,
   /**
    * If the selected item(s) in the button group are to be controlled externally by
    * a parent component, pass an array of strings as well as an `onChange` handler.
    * Passing an array for "values" makes the ButtonGroup a "controlled" component that
    * expects its state to be handled via `onChange` and so doesn't handle it itself.
    */
-  values: _propTypes.default.arrayOf(_propTypes.default.string),
+  values: PropTypes.arrayOf(PropTypes.string),
   /**
    * If `values` is not passed, making the ButtonGroup an "uncontrolled" component
    * managing its own selected state, a default set of selections may be provided.
    * Changing the `initialValues` does not change the user's selections.
    */
-  initialValues: _propTypes.default.arrayOf(_propTypes.default.string),
+  initialValues: PropTypes.arrayOf(PropTypes.string),
   /**
    * Defines if the icon will be displayed on the right or left side of the label.
    */
-  iconPosition: _propTypes.default.oneOf(['left', 'right']),
+  iconPosition: PropTypes.oneOf(['left', 'right']),
   /**
    * Main text used to describe this group, used in Fieldset's Legend element.
    */
-  legend: _propTypes.default.string,
+  legend: PropTypes.string,
   /**
    * Optional additional text giving more detail to help a user make a choice.
    */
-  hint: _propTypes.default.string,
+  hint: PropTypes.string,
   /**
    * Position of the hint relative to label. Use `below` to display a larger hint below the label.
    */
-  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */
-  tooltip: _propTypes.default.string,
+  tooltip: PropTypes.string,
   /**
    * Current validation status of the group, passed to the feedback element if there is one.
    */
-  validation: _propTypes.default.oneOf(['error', 'success']),
+  validation: PropTypes.oneOf(['error', 'success']),
   /**
    * If provided, a Feedback element is rendered containing this text.
    */
-  feedback: _propTypes.default.string,
+  feedback: PropTypes.string,
   /**
    * If true, the buttons cannot be selected by the user and simply show their current state.
    */
-  readOnly: _propTypes.default.bool,
+  readOnly: PropTypes.bool,
   /**
    * If true, the buttons cannot be interacted with, elements are set as `disabled` and if the
    * theme supports `inactive` appearances rules, these are applied.
    */
-  inactive: _propTypes.default.bool,
+  inactive: PropTypes.bool,
   /**
    * On Web, this is passed to the `name` attribute of the fieldset.
    */
-  name: _propTypes.default.string,
+  name: PropTypes.string,
   /**
    * Sets the language of microcopy in subcomponents (e.g. Tooltip's default accessibility label).
    */
-  copy: _propTypes.default.oneOf(['en', 'fr'])
+  copy: PropTypes.oneOf(['en', 'fr'])
 };
-var _default = ButtonGroup;
-exports.default = _default;
+export default ButtonGroup;