@telus-uds/components-base 1.66.0 → 1.67.1

package/lib/Box/Box.js

@@ -4,28 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
 var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
-
 var _ThemeProvider = require("../ThemeProvider");
-
 var _utils = require("../utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 /**
  * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
  * @typedef {import('../utils/props/spacingProps.js').SpacingIndex} SpacingIndex
@@ -54,7 +44,6 @@ const selectBoxStyles = _ref => {
     borderBottomLeftRadius,
     borderBottomRightRadius
   };
-
   if (gradient) {
     const {
       angle,
@@ -62,9 +51,8 @@ const selectBoxStyles = _ref => {
     } = gradient;
     styles.backgroundImage = `linear-gradient(${angle}deg, ${stopOne.color}, 75% , ${stopTwo.color})`;
   }
-
-  const paddings = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']; // Only set on styles if token provided because we spread this object after the spacing scale values
-
+  const paddings = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom'];
+  // Only set on styles if token provided because we spread this object after the spacing scale values
   paddings.forEach(side => {
     if (rest[side]) {
       styles[side] = rest[side];
@@ -72,6 +60,7 @@ const selectBoxStyles = _ref => {
   });
   return styles;
 };
+
 /**
  * A layout utility component. Use Box to create space (padding) around content.
  *
@@ -137,8 +126,6 @@ const selectBoxStyles = _ref => {
  * text content is inside a scrollable box, as screens are not scrollable by default and even very
  * short text will require scrolling on small devices at the highest accessibility text scaling settings.
  */
-
-
 const Box = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
     space,
@@ -173,11 +160,11 @@ const Box = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     paddingBottom: (0, _utils.useSpacingScale)(bottom),
     ...selectBoxStyles(themeTokens)
   };
-
   if (scroll) {
     const scrollProps = typeof scroll === 'object' ? scroll : {};
     scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle];
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, { ...scrollProps,
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+      ...scrollProps,
       ...props,
       testID: testID,
       dataSet: dataSet,
@@ -185,8 +172,8 @@ const Box = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
       children: children
     });
   }
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...props,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ...props,
     style: styles,
     testID: testID,
     dataSet: dataSet,
@@ -195,59 +182,52 @@ const Box = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   });
 });
 Box.displayName = 'Box';
-Box.propTypes = { ...selectedSystemPropTypes,
+Box.propTypes = {
+  ...selectedSystemPropTypes,
   variant: _utils.variantProp.propType,
   tokens: (0, _utils.getTokensPropType)('Box'),
-
   /**
    * Sets default padding on all sides of the box using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
   space: _utils.spacingProps.types.spacingValue,
-
   /**
    * Sets top and bottom padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
   vertical: _utils.spacingProps.types.spacingValue,
-
   /**
    * Sets left and right padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
   horizontal: _utils.spacingProps.types.spacingValue,
-
   /**
    * Sets bottom padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
   bottom: _utils.spacingProps.types.spacingValue,
-
   /**
    * Sets left padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
   left: _utils.spacingProps.types.spacingValue,
-
   /**
    * Sets right padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
   right: _utils.spacingProps.types.spacingValue,
-
   /**
    * Sets top padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
   top: _utils.spacingProps.types.spacingValue,
-
   /**
    * Sets the `flex` style, which controls `flexGrow`, `flexShrink` and `flexBasis` styles.
    *
@@ -257,14 +237,12 @@ Box.propTypes = { ...selectedSystemPropTypes,
    * With the default `0`, the box takes its minimum width from its content.
    */
   flex: _propTypes.default.number,
-
   /**
    * Renders a scrollable ScrollView instead of an unscrollable View.
    *
    * May take an object of ScrollView props which are passed to the rendered ScrollView.
    */
   scroll: _propTypes.default.oneOfType([_propTypes.default.bool, _ScrollView.default.propTypes ? _propTypes.default.shape(_ScrollView.default.propTypes) : _propTypes.default.object]),
-
   /**
    * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
    *
@@ -272,18 +250,15 @@ Box.propTypes = { ...selectedSystemPropTypes,
    * is not defined, the accessibilityRole will default to "heading".
    */
   tag: _propTypes.default.oneOf(_utils.layoutTags),
-
   /**
    * Use in tests if the box itself needs to be targetted and no other way of selecting the
    * box is available (e.g. it cannot be targetted using an appropriate `accessibilityRole`).
    */
   testID: _propTypes.default.string,
-
   /**
    * @ignore
    */
   dataSet: _propTypes.default.object,
-
   /**
    * Box accepts any content as children.
    */

package/lib/Box/index.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _Box = _interopRequireDefault(require("./Box"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _Box.default;
 exports.default = _default;

package/lib/Button/Button.js

@@ -4,27 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
-
 var _propTypes = _interopRequireWildcard(require("./propTypes"));
-
 var _ThemeProvider = require("../ThemeProvider");
-
 var _props = require("../utils/props");
-
 var _ViewportProvider = require("../ViewportProvider");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     accessibilityRole = 'button',
@@ -38,14 +27,16 @@ const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     ...variant
   };
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Button', tokens, buttonVariant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, { ...props,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+    ...props,
     tokens: getTokens,
     accessibilityRole: accessibilityRole,
     ref: ref
   });
 });
 Button.displayName = 'Button';
-Button.propTypes = { ..._props.a11yProps.types,
+Button.propTypes = {
+  ..._props.a11yProps.types,
   ..._propTypes.default,
   children: _propTypes.textAndA11yText
 };

package/lib/Button/ButtonBase.js

@@ -4,37 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(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 }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.linkProps, _utils.viewProps]);
-
 const getOuterBorderOffset = _ref => {
   let {
     outerBorderGap = 0,
@@ -42,7 +26,6 @@ const getOuterBorderOffset = _ref => {
   } = _ref;
   return outerBorderGap + outerBorderWidth;
 };
-
 const selectOuterContainerStyles = _ref2 => {
   let {
     opacity,
@@ -52,7 +35,8 @@ const selectOuterContainerStyles = _ref2 => {
     borderRadius,
     outerBackgroundColor
   } = _ref2;
-  return { ..._Platform.default.select({
+  return {
+    ..._Platform.default.select({
       native: {
         alignSelf: 'flex-start'
       }
@@ -67,7 +51,6 @@ const selectOuterContainerStyles = _ref2 => {
     })
   };
 };
-
 const selectOuterSizeStyles = _ref3 => {
   let {
     outerBorderGap,
@@ -81,16 +64,16 @@ const selectOuterSizeStyles = _ref3 => {
     outerBorderGap,
     outerBorderWidth
   });
-  const sizeStyles = {}; // Apply width/height tokens: number === pixels, string === explicit units e.g. %
-
+  const sizeStyles = {};
+  // Apply width/height tokens: number === pixels, string === explicit units e.g. %
   if (typeof width === 'number' && width > 0 || typeof height === 'number' && height > 0) {
     sizeStyles.width = width ? width + outerBorderOffset * 2 : width;
     sizeStyles.height = height ? height + outerBorderOffset * 2 : height;
     return sizeStyles;
   }
-
   if (!width) {
-    return { ...sizeStyles,
+    return {
+      ...sizeStyles,
       // Wrap content, stopping a flex parent's default align-items: stretch stretching focus ring beyond content
       ..._Platform.default.select({
         // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
@@ -99,28 +82,26 @@ const selectOuterSizeStyles = _ref3 => {
         }
       })
     };
-  } // Ensure the negative margin doesn't make element off-centre
-
+  }
 
+  // Ensure the negative margin doesn't make element off-centre
   if (_Platform.default.OS === 'web') {
     sizeStyles.width = `calc(${width} + ${outerBorderOffset * 2}px)`;
     sizeStyles.height = `calc(${height} + ${outerBorderOffset * 2}px)`;
     return sizeStyles;
-  } // Can't use calc() on native but (unlike on web) flexGrow fills the container width here
-
-
+  }
+  // Can't use calc() on native but (unlike on web) flexGrow fills the container width here
   if (width === '100%') {
     sizeStyles.flexGrow = 1;
     return sizeStyles;
-  } // Slight offset not such a concern if % width < 100%, as the button isn't centered anyway.
-  // If centering support is added (e.g. alignSelf: center), set marginHorizontal 0 when centered.
-
+  }
 
+  // Slight offset not such a concern if % width < 100%, as the button isn't centered anyway.
+  // If centering support is added (e.g. alignSelf: center), set marginHorizontal 0 when centered.
   sizeStyles.width = width;
   sizeStyles.height = height;
   return sizeStyles;
 };
-
 const selectInnerContainerStyles = _ref4 => {
   let {
     backgroundColor,
@@ -136,7 +117,6 @@ const selectInnerContainerStyles = _ref4 => {
     borderBottomWidth,
     minWidth
   } = _ref4;
-
   // Subtract border width from padding so overall button width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = _ref5 => {
@@ -146,7 +126,6 @@ const selectInnerContainerStyles = _ref4 => {
     } = _ref5;
     return typeof value === 'number' && typeof borderSize === 'number' ? Math.max(0, value - borderSize) : value;
   };
-
   return {
     paddingLeft: offsetBorder({
       value: paddingLeft,
@@ -169,7 +148,6 @@ const selectInnerContainerStyles = _ref4 => {
     ...(0, _ThemeProvider.applyShadowToken)(shadow)
   };
 };
-
 const selectBorderStyles = _ref6 => {
   let {
     borderColor,
@@ -190,7 +168,6 @@ const selectBorderStyles = _ref6 => {
     borderBottomWidth
   };
 };
-
 const selectTextStyles = (_ref7, themeOptions) => {
   let {
     fontSize,
@@ -214,7 +191,6 @@ const selectTextStyles = (_ref7, themeOptions) => {
     textDecorationStyle: textLineStyle
   });
 };
-
 const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
   let {
     accessibilityRole
@@ -231,7 +207,6 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
     default: {}
   });
 };
-
 const selectButtonStyles = _ref9 => {
   let {
     textAlign
@@ -241,7 +216,6 @@ const selectButtonStyles = _ref9 => {
     justifyContent: textAlign
   };
 };
-
 const selectItemIconTokens = _ref10 => {
   let {
     color,
@@ -253,7 +227,6 @@ const selectItemIconTokens = _ref10 => {
     color: iconColor || color
   };
 };
-
 const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref11, ref) => {
   let {
     id,
@@ -270,27 +243,21 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref11, ref) => {
     iconProps,
     ...rawRest
   } = _ref11;
-
   const {
     onPress,
     ...rest
   } = _utils.clickProps.toPressProps(rawRest);
-
   const extraButtonState = {
     inactive,
     selected,
     iconPosition
   };
-
   const resolveButtonTokens = pressableState => (0, _utils.resolvePressableTokens)(tokens, pressableState, extraButtonState);
-
   const systemProps = selectProps(rest);
-
   const getPressableStyle = pressableState => {
     const themeTokens = resolveButtonTokens(pressableState);
     return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), selectOuterSizeStyles(themeTokens)];
   };
-
   const {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();
@@ -312,15 +279,16 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref11, ref) => {
       const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text, _Platform.default.select({
         web: {
           pointerEvents: 'none' // bubbles press event to parent `Pressable`
-
         }
       })];
+
       const iconTokens = selectItemIconTokens(themeTokens);
       const {
         iconSpace
-      } = themeTokens; // If the container has a width set, fill it instead of sizing from content.
-      // If in future we support text alignments other than center, add here.
+      } = themeTokens;
 
+      // If the container has a width set, fill it instead of sizing from content.
+      // If in future we support text alignments other than center, add here.
       const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align;
       const IconComponent = icon || themeTokens.icon;
       const rowStyles = selectButtonStyles(themeTokens);
@@ -341,10 +309,12 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref11, ref) => {
           icon: IconComponent,
           iconPosition: iconPosition,
           space: iconSpace,
-          iconProps: { ...iconProps,
+          iconProps: {
+            ...iconProps,
             tokens: iconTokens
           },
-          children: (0, _utils.wrapStringsInText)(typeof children === 'function' ? children({ ...(0, _utils.resolvePressableState)(pressableState, extraButtonState),
+          children: (0, _utils.wrapStringsInText)(typeof children === 'function' ? children({
+            ...(0, _utils.resolvePressableState)(pressableState, extraButtonState),
             textStyles
           }) : children, {
             style: textStyles
@@ -363,14 +333,14 @@ ButtonBase.propTypes = {
 ButtonBase.defaultProps = {
   id: undefined
 };
-
 const staticStyles = _StyleSheet.default.create({
   row: {
     // Apply all button alignment horizontally; no vertical stacking within a button
     flexDirection: 'row',
     justifyContent: 'center'
   },
-  text: { ..._Platform.default.select({
+  text: {
+    ..._Platform.default.select({
       // TODO: https://github.com/telus/universal-design-system/issues/487
       web: {
         transition: 'color 200ms'
@@ -386,7 +356,5 @@ const staticStyles = _StyleSheet.default.create({
     justifyContent: 'center'
   }
 });
-
 var _default = (0, _utils.withLinkRouter)(ButtonBase);
-
 exports.default = _default;

package/lib/Button/ButtonDropdown.js

@@ -4,39 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 const selectIconTokens = _ref => {
   let {
     icon,
@@ -75,7 +58,6 @@ const selectIconTokens = _ref => {
     }
   };
 };
-
 const ButtonDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
     value,
@@ -105,22 +87,19 @@ const ButtonDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ...variant
   };
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', tokens, extraState);
+  const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getTokens(buttonState));
 
-  const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getTokens(buttonState)); // Pass an object of relevant component state as first argument for any passed-in press handlers
-
-
+  // Pass an object of relevant component state as first argument for any passed-in press handlers
   const pressHandlers = (0, _pressability.getPressHandlersWithArgs)(props, [{
     label,
     open: isOpen
   }]);
-
   const handlePress = event => {
     if (!inactive) {
       if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
       setIsOpen(!isOpen, event);
     }
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
     ref: ref,
     ...pressHandlers,
@@ -140,6 +119,7 @@ const ButtonDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
       // - Icon: https://github.com/telus/universal-design-system/issues/327
       // - IconButton: https://github.com/telus/universal-design-system/issues/281
       // - Token sets: https://github.com/telus/universal-design-system/issues/782
+
       const itemTokens = getTokens(buttonState);
       const {
         iconTokens,
@@ -155,11 +135,10 @@ const ButtonDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
           tokens: iconTokens
         })
       }) : null;
-
-      const childrenContent = () => typeof children === 'function' ? children({ ...(0, _utils.resolvePressableState)(buttonState, extraState),
+      const childrenContent = () => typeof children === 'function' ? children({
+        ...(0, _utils.resolvePressableState)(buttonState, extraState),
         textStyles
       }) : children;
-
       const content = children ? childrenContent() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
         style: textStyles,
         children: label
@@ -172,33 +151,29 @@ const ButtonDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   });
 });
 ButtonDropdown.displayName = 'ButtonDropdown';
-ButtonDropdown.propTypes = { ..._utils.a11yProps.types,
+ButtonDropdown.propTypes = {
+  ..._utils.a11yProps.types,
   ..._utils.focusHandlerProps.types,
   ..._propTypes2.default,
   children: _propTypes2.textAndA11yText,
   tokens: (0, _utils.getTokensPropType)('ButtonDropdown'),
-
   /**
    * Callback called when a controlled ButtonDropdown gets interacted with.
    */
   onChange: _propTypes.default.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,
-
   /**
    * Use `initialValue` to provide the initial value for an uncontrolled version.
    */
   initialValue: _propTypes.default.bool,
-
   /**
    * The label of ButtonDropdown.
    */
   label: _propTypes.default.string,
-
   /**
    * By default, `ButtonDropdown` is treated by accessibility tools as a radio button.
    */