@telus-uds/components-base 1.65.0 → 1.67.0

package/lib/StepTracker/StepTracker.js

@@ -4,41 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
 var _StackView = _interopRequireDefault(require("../StackView"));
-
 var _ThemeProvider = require("../ThemeProvider");
-
 var _utils = require("../utils");
-
 var _ViewportProvider = require("../ViewportProvider");
-
 var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
-
 var _Step = _interopRequireDefault(require("./Step"));
-
 var _dictionary = _interopRequireDefault(require("./dictionary"));
-
 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]);
-
 const selectContainerStyles = _ref => {
   let {
     containerPaddingBottom,
@@ -53,7 +35,6 @@ const selectContainerStyles = _ref => {
     paddingTop: containerPaddingTop
   };
 };
-
 const selectStepTrackerLabelContainerStyles = _ref2 => {
   let {
     labelMarginTop
@@ -62,7 +43,6 @@ const selectStepTrackerLabelContainerStyles = _ref2 => {
     marginTop: labelMarginTop
   };
 };
-
 const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
   let {
     labelColor,
@@ -80,6 +60,7 @@ const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
     themeOptions
   });
 };
+
 /**
  * StepTracker component shows the current position in a sequence of steps.
  *
@@ -112,8 +93,6 @@ const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
  * - `accessibilityValue.text` (`aria-valuetext`): `<Current Step Label>`,
  *
  */
-
-
 const StepTracker = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
   let {
     current = 0,
@@ -139,9 +118,7 @@ const StepTracker = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     copy
   });
   const stepTrackerLabel = showStepTrackerLabel ? (typeof copy === 'string' ? getCopy(textStepTrackerLabel ?? 1).stepTrackerLabel : getCopy('stepTrackerLabel')).replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length).replace('%{stepCount}', steps.length).replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1]) : '';
-
   const getStepLabel = index => themeTokens.showStepLabel ? (typeof copy === 'string' ? getCopy(textStepTrackerLabel ?? 1).stepLabel : getCopy('stepLabel')).replace('%{stepNumber}', index + 1) : '';
-
   const {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();
@@ -186,25 +163,23 @@ const StepTracker = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     })
   });
 });
-StepTracker.displayName = 'StepTracker'; // If a language dictionary entry is provided, it must contain every key
+StepTracker.displayName = 'StepTracker';
 
+// If a language dictionary entry is provided, it must contain every key
 const dictionaryContentShape = _propTypes.default.shape({
   stepLabel: _propTypes.default.string.isRequired,
   stepTrackerLabel: _propTypes.default.string.isRequired
 });
-
-StepTracker.propTypes = { ...selectedSystemPropTypes,
-
+StepTracker.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * The current step, 0-based number
    */
   current: _propTypes.default.number,
-
   /**
    * The language to use for the labels
    */
   copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), dictionaryContentShape]),
-
   /**
    * Custom dictionary containing the labels to use for the steps
    */
@@ -212,7 +187,6 @@ StepTracker.propTypes = { ...selectedSystemPropTypes,
     en: dictionaryContentShape,
     fr: dictionaryContentShape
   }),
-
   /**
    * An array of strings defining the step titles
    */
@@ -222,7 +196,6 @@ StepTracker.propTypes = { ...selectedSystemPropTypes,
 };
 var _default = StepTracker;
 exports.default = _default;
-
 const staticStyles = _StyleSheet.default.create({
   stepsContainer: {
     alignItems: 'flex-start',

package/lib/StepTracker/index.js

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

package/lib/Tabs/Tabs.js

@@ -4,53 +4,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
-
 var _ThemeProvider = require("../ThemeProvider");
-
 var _StackView = _interopRequireDefault(require("../StackView"));
-
 var _utils = require("../utils");
-
 var _HorizontalScroll = _interopRequireWildcard(require("../HorizontalScroll"));
-
 var _TabsItem = _interopRequireDefault(require("./TabsItem"));
-
 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]);
 const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
 const {
   selectHorizontalScrollTokens,
   useItemPositions
 } = _HorizontalScroll.horizontalScrollUtils;
-
 const getDefaultTabItemAccessibilityRole = parentRole => {
   switch (parentRole) {
     case 'tablist':
       return 'tab';
-
     case 'navigation':
       return 'link';
-
     default:
       return undefined;
   }
 };
-
 const getStackViewTokens = variant => {
   const equalWidth = variant === null || variant === void 0 ? void 0 : variant.equalWidth;
   return _Platform.default.select({
@@ -61,6 +43,7 @@ const getStackViewTokens = variant => {
     default: {}
   });
 };
+
 /**
  * Tabs renders a horizontally-scrolling menu of selectable buttons which may link
  * to a page or control what content is displayed on this page.
@@ -69,8 +52,6 @@ const getStackViewTokens = variant => {
  * `navigation`as the `accessibilityRole` to te Tabs component, this will cause
  * TabItems to default to a role of link and obtain aria-current behaviour.
  */
-
-
 const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     tokens,
@@ -138,12 +119,10 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         } = _ref3;
         const itemId = id ?? label;
         const isSelected = Boolean(currentValue && currentValue === itemId);
-
         const handlePress = event => {
           if (typeof onPress === 'function') onPress(event);
           setValue(itemId, event);
         };
-
         const itemProps = selectItemProps(itemRest);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabsItem.default, {
           ref: itemRef,
@@ -157,7 +136,8 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           index: index,
           accessibilityRole: accessibilityRole,
           LinkRouter: ItemLinkRouter,
-          linkRouterProps: { ...linkRouterProps,
+          linkRouterProps: {
+            ...linkRouterProps,
             ...itemLinkRouterProps
           },
           ...itemProps,
@@ -168,37 +148,34 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   });
 });
 Tabs.displayName = 'Tabs';
-Tabs.propTypes = { ...selectedSystemPropTypes,
+Tabs.propTypes = {
+  ...selectedSystemPropTypes,
   ..._utils.withLinkRouter.PropTypes,
-
   /**
    * Array of `TabsItem`s
    */
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({ ...selectedItemPropTypes,
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    ...selectedItemPropTypes,
     ..._utils.withLinkRouter.PropTypes,
     href: _propTypes.default.string,
     label: _propTypes.default.string,
     id: _propTypes.default.string,
     ref: _airbnbPropTypes.default.ref()
   })),
-
   /**
    * `id` property of the current tab in the items array
    */
   value: _propTypes.default.string,
   initialValue: _propTypes.default.string,
-
   /**
    * Callback for when the selected tab changes
    */
   onChange: _propTypes.default.func,
   tokens: (0, _utils.getTokensPropType)('Tabs'),
-
   /**
    * Custom tokens for `TabsItem`
    */
   itemTokens: (0, _utils.getTokensPropType)('TabsItem'),
-
   /**
    * Custom tokens for `HorizontalScrollButton`
    */

package/lib/Tabs/TabsItem.js

@@ -4,43 +4,26 @@ 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 _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
-
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
 var _ThemeProvider = require("../ThemeProvider");
-
 var _utils = require("../utils");
-
 var _Spacer = _interopRequireDefault(require("../Spacer"));
-
 var _HorizontalScroll = require("../HorizontalScroll");
-
 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]);
 const {
   itemPositionsPropType,
   getItemPositionLayoutHandler
 } = _HorizontalScroll.horizontalScrollUtils;
-
 const selectHighlightBarStyles = _ref => {
   let {
     highlightColor,
@@ -60,7 +43,6 @@ const selectHighlightBarStyles = _ref => {
     zIndex: 1 + highlightBarBorderWidth
   };
 };
-
 const selectHighlightTriangleStyles = _ref2 => {
   let {
     highlightColor,
@@ -81,7 +63,6 @@ const selectHighlightTriangleStyles = _ref2 => {
     }
   };
 };
-
 const selectContainerStyles = _ref3 => {
   let {
     backgroundColor,
@@ -100,14 +81,13 @@ const selectContainerStyles = _ref3 => {
     paddingVertical: paddingVertical - borderWidth
   };
 };
+
 /**
  * Item within a Tabs component representing one tab of content. May be rendered as a link
  * or as a "menuitem" button depending on whether 'href' is passed.
  *
  * This is rendered automatically by `Tabs` and isn't intended be used directly.
  */
-
-
 const TabsItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
   let {
     href,
@@ -125,22 +105,18 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     id,
     ...rawRest
   } = _ref4;
-
   // Convert onClick etc to onPress etc if used in an integration
   const {
     onPress,
     ...rest
   } = _utils.clickProps.toPressProps(rawRest);
-
   const {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('TabsItem', tokens, variant);
-
   const resolveTokens = pressableState => (0, _utils.resolvePressableTokens)(getTokens, pressableState, {
     selected
   });
-
   const getPressableStyle = pressableState => {
     const {
       maxWidth
@@ -151,13 +127,12 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
       outline: 'none'
     }];
   };
+  const handleLayout = getItemPositionLayoutHandler(itemPositions.positions, index);
 
-  const handleLayout = getItemPositionLayoutHandler(itemPositions.positions, index); // On press, update the selection, call any press handler, and open any href in platform-appropriate way
-
+  // On press, update the selection, call any press handler, and open any href in platform-appropriate way
   const openHref = href && _utils.linkProps.handleHref({
     href
   });
-
   const handlePress = onPress || openHref ? function () {
     if (onPress) onPress(...arguments);
     if (openHref) openHref(...arguments);
@@ -173,14 +148,15 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     if (selected) {
       const position = itemPositions.positions[index];
       const scrollEnd = itemPositions.scrollOffset + itemPositions.containerWidth;
-
-      if ( // is off the right edge, or
-      scrollEnd && (position === null || position === void 0 ? void 0 : position.end) > scrollEnd || // is off the left edge
+      if (
+      // is off the right edge, or
+      scrollEnd && (position === null || position === void 0 ? void 0 : position.end) > scrollEnd ||
+      // is off the left edge
       typeof (position === null || position === void 0 ? void 0 : position.start) === 'number' && position.start < itemPositions.scrollOffset) {
         itemPositions.scrollTo(position.start);
       }
-    } // itemPositions is a ref object so this should only re-run when `selected` (or `index`) change
-
+    }
+    // itemPositions is a ref object so this should only re-run when `selected` (or `index`) change
   }, [selected, index, itemPositions]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
@@ -201,7 +177,8 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
       const hasHighlightTriangle = Boolean(themeTokens.highlightTriangleSize);
       const highlightTriangleStyle = hasHighlightTriangle && selectHighlightTriangleStyles(themeTokens);
       const containerStyles = selectContainerStyles(themeTokens);
-      const textStyles = (0, _ThemeProvider.applyTextStyles)({ ...(0, _utils.selectTokens)('Typography', themeTokens),
+      const textStyles = (0, _ThemeProvider.applyTextStyles)({
+        ...(0, _utils.selectTokens)('Typography', themeTokens),
         themeOptions,
         textAlign
       });
@@ -228,7 +205,8 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
   });
 });
 TabsItem.displayName = 'TabsItem';
-TabsItem.propTypes = { ...selectedSystemPropTypes,
+TabsItem.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('TabsItem'),
   variant: _utils.variantProp.propType,
   onPress: _propTypes.default.func,
@@ -239,7 +217,6 @@ TabsItem.propTypes = { ...selectedSystemPropTypes,
   children: _propTypes.default.string,
   id: _propTypes.default.string
 };
-
 const staticStyles = _StyleSheet.default.create({
   center: {
     alignItems: 'center'
@@ -261,7 +238,5 @@ const staticStyles = _StyleSheet.default.create({
     })
   }
 });
-
 var _default = (0, _utils.withLinkRouter)(TabsItem);
-
 exports.default = _default;

package/lib/Tabs/index.js

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

package/lib/Tags/Tags.js

@@ -4,44 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 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 _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
 var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
-
 var _Icon = _interopRequireDefault(require("../Icon"));
-
 var _StackView = require("../StackView");
-
 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 }; }
-
 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]);
 const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
-
 const separateIconTextTokens = (_ref, returnRest) => {
   let {
     icon,
@@ -81,11 +62,8 @@ const separateIconTextTokens = (_ref, returnRest) => {
     }
   };
 };
-
 const selectIconTextTokens = tokens => separateIconTextTokens(tokens, false);
-
 const selectNonIconTextTokens = tokens => separateIconTextTokens(tokens, true);
-
 const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
     variant,
@@ -113,10 +91,9 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     space
   } = themeTokens;
   const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('TagsItem', tokens, variant);
-
-  const getButtonTokens = buttonState => // Remove icon-text-related tokens, since we want to handle them ourselves, not use ButtonBase's handling
+  const getButtonTokens = buttonState =>
+  // Remove icon-text-related tokens, since we want to handle them ourselves, not use ButtonBase's handling
   (0, _utils.selectTokens)('Button', selectNonIconTextTokens(getItemTokens(buttonState)));
-
   const {
     currentValues,
     toggleOneValue
@@ -133,11 +110,9 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   });
   const itemA11yRole = 'checkbox';
   const uniqueFields = ['id', 'label'];
-
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
     throw new Error(`Tags items must have unique ${uniqueFields.join(', ')}`);
   }
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
     ref: ref,
     ...selectedProps,
@@ -151,19 +126,18 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
         ref: itemRef,
         ...itemRest
       } = _ref3;
-      const isSelected = currentValues.includes(id); // Pass an object of relevant component state as first argument for any passed-in press handlers
+      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, [{
         id,
         label,
         currentValues
       }]);
-
       const handlePress = event => {
         if (pressHandlers.onPress) pressHandlers.onPress(event);
         toggleOneValue(id, event);
       };
-
       const itemProps = selectItemProps({
         accessibilityState: {
           checked: isSelected
@@ -190,6 +164,7 @@ const Tags = /*#__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 = getItemTokens(buttonState);
           const {
             iconTokens,
@@ -219,51 +194,45 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   });
 });
 Tags.displayName = 'Tags';
-Tags.propTypes = { ...selectedSystemPropTypes,
+Tags.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('Tags'),
   variant: _utils.variantProp.propType,
-
   /**
    * If provided, sets a maximum number of items a user may select at once.
    */
   maxValues: _propTypes.default.number,
-
   /**
    * The options a user may select
    */
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({ ...selectedItemPropTypes,
-
+  items: _propTypes.default.arrayOf(_propTypes.default.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,
-
     /**
      * 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,
-
     /**
      * 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,
-
     /**
      * An optional ref for one individual Tag button in the tags
      */
     ref: _airbnbPropTypes.default.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,
-
   /**
    * 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.
@@ -271,14 +240,12 @@ Tags.propTypes = { ...selectedSystemPropTypes,
    * expects its state to be handled via `onChange` and so doesn't handle it itself.
    */
   values: _propTypes.default.arrayOf(_propTypes.default.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),
-
   /**
    * AccesibilityRole for the Tags
    */

package/lib/Tags/index.js

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