@telus-uds/components-base 1.66.0 → 1.67.1

package/lib-module/SideNav/ItemsGroup.js

@@ -4,6 +4,7 @@ import ItemContent from './ItemContent';
 import ExpandCollapse from '../ExpandCollapse';
 import { getTokensPropType, variantProp, componentPropType, selectTokens } from '../utils';
 import { useThemeTokensCallback } from '../ThemeProvider';
+
 /**
  Expandable content areas for use within `SideNav`.
 
@@ -14,7 +15,6 @@ import { useThemeTokensCallback } from '../ThemeProvider';
  ## Usage Criteria
  - Use `SideNav.ItemsGroup` with large pages that have multiple sections
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 const ItemsGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -28,38 +28,35 @@ const ItemsGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     itemTokens,
     onToggle
   } = _ref;
-
   // A SideNav control uses the same style and theme as SideNavItem, with a 'parent' variant,
   // plus control-specific tokens from the SideNavItemsGroup theme (e.g. open/close icon, etc).
-  const getAppearance = appearance => ({ ...variant,
+  const getAppearance = appearance => ({
+    ...variant,
     ...appearance,
     active: isActive
   });
-
-  const getItemAppearance = appearance => ({ ...getAppearance(appearance),
+  const getItemAppearance = appearance => ({
+    ...getAppearance(appearance),
     type: 'parent'
   });
-
   const getGroupTokens = useThemeTokensCallback('SideNavItemsGroup', tokens, variant);
-
   const getPanelTokens = appearance => {
     const {
       panelBorderColor,
       ...itemsGroupTokens
     } = getGroupTokens(getAppearance(appearance));
-    const groupTokens = { ...itemsGroupTokens,
+    const groupTokens = {
+      ...itemsGroupTokens,
       borderWidth: 0,
       marginBottom: 0
     };
     return selectTokens('ExpandCollapsePanel', groupTokens);
   };
-
   const getItemTokens = useThemeTokensCallback('SideNavItem', itemTokens, variant);
-
-  const getControlTokens = appearance => selectTokens('ExpandCollapseControl', { ...getItemTokens(getItemAppearance(appearance)),
+  const getControlTokens = appearance => selectTokens('ExpandCollapseControl', {
+    ...getItemTokens(getItemAppearance(appearance)),
     // main style from SideNavItem
     ...getGroupTokens(getAppearance(appearance)) // control-specific tokens like icon etc
-
   });
 
   const controlContent = controlState => {
@@ -69,7 +66,6 @@ const ItemsGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
       children: label
     });
   };
-
   return /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
     ref: ref,
     openIds: openGroups,
@@ -91,30 +87,25 @@ ItemsGroup.propTypes = {
    * Specifies the links contained within. It may only contain `SideNav.Item`.
    */
   children: componentPropType('Item'),
-
   /**
    * Text content of the group's parent `SideNav.Item`.
    */
   label: PropTypes.string.isRequired,
-
   /**
    * @ignore
    * Set internally in `SideNav` render function - used to keep track of expanded items groups.
    */
   groupId: PropTypes.string,
-
   /**
    * @ignore
    * Set internally in `SideNav` render function. Called when the group is expanded/collapsed.
    */
   onToggle: PropTypes.func,
-
   /**
    * @ignore
    * Set internally in `SideNav` render function. Contains `groupId`s of currently open groups.
    */
   openGroups: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
-
   /**
    * @ignore
    * Set internally in `SideNav` render function. Used to mark group containing the currently active `SideNav.Item`.
@@ -122,7 +113,6 @@ ItemsGroup.propTypes = {
   isActive: PropTypes.bool,
   variant: variantProp.propType,
   tokens: getTokensPropType('SideNavItemsGroup'),
-
   /**
    * Custom tokens for `SideNav.Item`
    */

package/lib-module/SideNav/SideNav.js

@@ -7,7 +7,6 @@ import { useThemeTokens } from '../ThemeProvider';
 import { a11yProps, componentPropType, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-
 function selectBorderStyles(tokens) {
   return {
     borderBottomWidth: tokens.borderWidth,
@@ -15,14 +14,13 @@ function selectBorderStyles(tokens) {
     borderBottomColor: tokens.borderColor
   };
 }
-
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
 /**
  ## Usage Criteria
  - Use in conjunction with a large amount of educational / informational content
  - Allow the user to navigate between options frequently and efficiently
  */
-
 const SideNav = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
@@ -38,18 +36,15 @@ const SideNav = /*#__PURE__*/forwardRef((_ref, ref) => {
     groupId: undefined,
     itemId: undefined
   });
-
   const onItemPress = (itemId, groupId) => {
     setActive({
       itemId,
       groupId
     });
   };
-
   const isItemActive = (itemId, groupId) => {
     return active.groupId === groupId && active.itemId === itemId;
   };
-
   return /*#__PURE__*/_jsx(ExpandCollapse, {
     ref: ref,
     maxOpen: accordion ? 1 : null,
@@ -60,23 +55,22 @@ const SideNav = /*#__PURE__*/forwardRef((_ref, ref) => {
         openIds,
         onToggle
       } = _ref2;
-
       const renderItem = (item, index, groupId) => {
         const {
           itemId = `item-${index}`,
           onPress
         } = item.props;
-
         const handlePress = function () {
           onItemPress(...arguments);
           if (onPress) onPress(...arguments);
         };
-
-        return /*#__PURE__*/_createElement(Item, { ...item.props,
+        return /*#__PURE__*/_createElement(Item, {
+          ...item.props,
           key: itemId,
           itemId: itemId,
           groupId: groupId,
-          variant: groupId ? { ...variant,
+          variant: groupId ? {
+            ...variant,
             type: 'child'
           } : variant,
           tokens: itemTokens,
@@ -84,20 +78,17 @@ const SideNav = /*#__PURE__*/forwardRef((_ref, ref) => {
           onPress: handlePress
         });
       };
-
       return React.Children.map(children, (child, index) => {
         // iterate over children and identify them internally to later reference expanded groups and active items
         if (child.type === Item) return renderItem(child, index);
-
         if (child.type === ItemsGroup) {
           const {
             groupId = `group-${index}`
           } = child.props;
           const isGroupActive = active.itemId !== undefined && active.groupId === groupId;
-
           const handleToggle = event => onToggle(groupId, event);
-
-          return /*#__PURE__*/_createElement(ItemsGroup, { ...child.props,
+          return /*#__PURE__*/_createElement(ItemsGroup, {
+            ...child.props,
             key: groupId,
             groupId: groupId,
             variant: variant,
@@ -108,32 +99,28 @@ const SideNav = /*#__PURE__*/forwardRef((_ref, ref) => {
             onToggle: handleToggle
           }, React.Children.map(child.props.children, (item, itemIndex) => renderItem(item, itemIndex, groupId)));
         }
-
         return null;
       });
     }
   });
 });
 SideNav.displayName = 'SideNav';
-SideNav.propTypes = { ...selectedSystemPropTypes,
-
+SideNav.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Specifies the structure and links of the `SideNav`. It may only consist of `SideNav.Item` and `SideNav.ItemsGroup`.
    */
   children: componentPropType(['Item', 'ItemsGroup']),
-
   /**
    * Identifies if only one `SideNav.ItemsGroup` should be open at a time.
    */
   accordion: PropTypes.bool,
   variant: variantProp.propType,
   tokens: getTokensPropType('SideNav'),
-
   /**
    * Custom tokens for `SideNav.Item`
    */
   itemTokens: getTokensPropType('SideNavItem'),
-
   /**
    * Custom tokens for `SideNavItemsGroup`
    */

package/lib-module/Skeleton/Skeleton.js

@@ -11,7 +11,6 @@ import useSkeletonNativeAnimation from './useSkeletonNativeAnimation';
 import skeletonWebAnimation from './skeletonWebAnimation';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
 const selectSkeletonStyles = _ref => {
   let {
     color,
@@ -23,7 +22,6 @@ const selectSkeletonStyles = _ref => {
     maxWidth: '100%'
   };
 };
-
 const selectLineStyles = _ref2 => {
   let {
     skeletonHeight,
@@ -34,7 +32,6 @@ const selectLineStyles = _ref2 => {
     height: skeletonHeight
   };
 };
-
 const selectShapeStyles = _ref3 => {
   let {
     skeletonHeight
@@ -44,7 +41,6 @@ const selectShapeStyles = _ref3 => {
     width: skeletonHeight
   };
 };
-
 const selectSquareStyles = _ref4 => {
   let {
     radius
@@ -53,7 +49,6 @@ const selectSquareStyles = _ref4 => {
     borderRadius: radius
   };
 };
-
 const Skeleton = /*#__PURE__*/forwardRef((_ref5, ref) => {
   let {
     tokens,
@@ -68,15 +63,18 @@ const Skeleton = /*#__PURE__*/forwardRef((_ref5, ref) => {
   } = _ref5;
   const themeTokens = useThemeTokens('Skeleton', tokens, variant);
   const pixels = useResponsiveProp(sizePixels);
-  const spacingScaleValue = typeof pixels === 'number' ? // Size by an exact number of pixels
+  const spacingScaleValue = typeof pixels === 'number' ?
+  // Size by an exact number of pixels
   {
     options: {
       size: pixels
     }
-  } : // Size by an index on the spacing scale (getting default index from theme if none provided)
+  } :
+  // Size by an index on the spacing scale (getting default index from theme if none provided)
   sizeIndex || themeTokens.size;
-  const skeletonHeight = useSpacingScale(spacingScaleValue); // Animation color and animation duration
+  const skeletonHeight = useSpacingScale(spacingScaleValue);
 
+  // Animation color and animation duration
   const {
     secondColor,
     animationDuration
@@ -84,32 +82,27 @@ const Skeleton = /*#__PURE__*/forwardRef((_ref5, ref) => {
   const nativeAnimation = useSkeletonNativeAnimation({
     animationDuration
   });
-
   const getAnimationBasedOnPlatform = () => {
-    const animation = Platform.OS === 'web' ? skeletonWebAnimation(secondColor, animationDuration) : nativeAnimation; // We must pass the animation styles through `StyleSheet.create`
+    const animation = Platform.OS === 'web' ? skeletonWebAnimation(secondColor, animationDuration) : nativeAnimation;
+    // We must pass the animation styles through `StyleSheet.create`
     // @see https://github.com/necolas/react-native-web/issues/2387
-
     const styles = StyleSheet.create({
       animation
     });
     return styles.animation;
   };
-
   const getLineWidth = () => {
     if (characters) {
       return characters * themeTokens.baseWidth;
     }
-
     return themeTokens.characters * themeTokens.baseWidth;
   };
-
   const getStyledBasedOnShape = () => {
     if (shape === 'circle') {
       return selectShapeStyles({
         skeletonHeight
       });
     }
-
     if (shape === 'box') {
       return [selectShapeStyles({
         skeletonHeight
@@ -117,13 +110,11 @@ const Skeleton = /*#__PURE__*/forwardRef((_ref5, ref) => {
         radius: themeTokens.squareRadius
       })];
     }
-
     return selectLineStyles({
       skeletonHeight,
       lineWidth: getLineWidth()
     });
   };
-
   const renderSkeleton = function () {
     let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     // @see https://github.com/necolas/react-native-web/issues/2387
@@ -133,7 +124,6 @@ const Skeleton = /*#__PURE__*/forwardRef((_ref5, ref) => {
       style: [selectSkeletonStyles(themeTokens), getAnimationBasedOnPlatform(), getStyledBasedOnShape()]
     }, `skeleton-${index + 1}`);
   };
-
   return /*#__PURE__*/_jsx(StackView, {
     space: themeTokens.spaceBetweenLines,
     ref: ref,
@@ -142,36 +132,32 @@ const Skeleton = /*#__PURE__*/forwardRef((_ref5, ref) => {
   });
 });
 Skeleton.displayName = 'Skeleton';
-Skeleton.propTypes = { ...selectedSystemPropTypes,
+Skeleton.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('Skeleton'),
   variant: variantProp.propType,
-
   /**
    * Sets the size of Skeleton lines or shape according to the theme's spacing scale. For example, size={1} gives the smallest non-zero theme-defined spacing size.
    *
    * May also accept an object with responsive viewport keys or spacing scale options - see `useSpacingScale` for details.
    */
   sizeIndex: spacingProps.types.spacingValue,
-
   /**
    * @deprecated alias for `sizeIndex`
    */
   size: spacingProps.types.spacingValue,
-
   /**
    * Sets the size of Skeleton lines or shape to an exact number of pixels. Use when it's necessary to exactly match sizes of images or other boxes.
    *
    * Accepts a number or an object with responsive viewport keys, e.g. { xs: 32, lg: 64 } would be 32px at xs, sm and md and 64 at lg and xl viewports.
    */
   sizePixels: responsiveProps.getTypeOptionallyByViewport(propTypes.number),
-
   /**
    * Determines the width of simulated lines of text if the Skeleton's shape is 'line' (the default shape).
    *
    * Only has any affect if shape is line (the default). If unset, takes a default value from the theme.
    */
   characters: propTypes.number,
-
   /**
    * Determines how many Skeleton items are rendered (default 1).
    *
@@ -180,7 +166,6 @@ Skeleton.propTypes = { ...selectedSystemPropTypes,
    * The amount of spacing between multiple lines is controlled by theme tokens.
    */
   lines: propTypes.number,
-
   /**
    * Determines if the skeleton should resemble lines of text (default), a circle, or a square box with themed rounded corners.
    */

package/lib-module/Skeleton/skeletonWebAnimation.js

@@ -11,5 +11,4 @@ const skeletonWebAnimation = (secondColor, animationTime) => {
     }
   };
 };
-
 export default skeletonWebAnimation;

package/lib-module/Skeleton/useSkeletonNativeAnimation.js

@@ -2,14 +2,13 @@ import { useEffect, useRef } from 'react';
 import Animated from "react-native-web/dist/exports/Animated";
 import Platform from "react-native-web/dist/exports/Platform";
 import { DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant';
-
 const useSkeletonNativeAnimation = _ref => {
   let {
     animationDuration
   } = _ref;
   const fadeAnimation = useRef(new Animated.Value(DEFAULT_OPACITY)).current;
-  /* eslint-disable react-hooks/exhaustive-deps */
 
+  /* eslint-disable react-hooks/exhaustive-deps */
   useEffect(() => {
     const fade = Animated.sequence([Animated.timing(fadeAnimation, {
       toValue: OPACITY_STOP,
@@ -26,5 +25,4 @@ const useSkeletonNativeAnimation = _ref => {
     opacity: fadeAnimation
   };
 };
-
 export default useSkeletonNativeAnimation;

package/lib-module/SkipLink/SkipLink.js

@@ -7,8 +7,9 @@ import PropTypes from 'prop-types';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps, clickProps, getTokensPropType, linkProps, resolvePressableTokens, selectSystemProps, variantProp, withLinkRouter } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps]); // ensure explicit selection of tokens
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps]);
 
+// ensure explicit selection of tokens
 const selectStyles = _ref => {
   let {
     backgroundColor,
@@ -31,7 +32,6 @@ const selectStyles = _ref => {
     borderRadius
   };
 };
-
 const selectTextStyles = _ref2 => {
   let {
     color,
@@ -49,6 +49,7 @@ const selectTextStyles = _ref2 => {
     fontSize
   };
 };
+
 /**
  * A generic Skip link component, unstyled by default.
  * A Skip link component help keyboard-only users, screen reader users to skip
@@ -104,8 +105,6 @@ const selectTextStyles = _ref2 => {
  *
  * Skip link supports all the common a11y and link props.
  */
-
-
 const SkipLink = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     tokens,
@@ -119,9 +118,9 @@ const SkipLink = /*#__PURE__*/forwardRef((_ref3, ref) => {
     ...rest
   } = clickProps.toPressProps(rawRest);
   const getTokens = useThemeTokensCallback('SkipLink', tokens, variant);
-
   const handlePress = event => {
-    if (typeof onPress === 'function') onPress(event); // TODO - support native apps with something based on refs and/or setAccessibilityFocus
+    if (typeof onPress === 'function') onPress(event);
+    // TODO - support native apps with something based on refs and/or setAccessibilityFocus
   };
 
   return /*#__PURE__*/_jsx(Pressable, {
@@ -149,13 +148,12 @@ const SkipLink = /*#__PURE__*/forwardRef((_ref3, ref) => {
   });
 });
 SkipLink.displayName = 'SkipLink';
-SkipLink.propTypes = { ...selectedSystemPropTypes,
-
+SkipLink.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * The text content shown or read out when the SkipLink is focused, usually a string.
    */
   children: PropTypes.node,
-
   /**
    * The target to skip to. Usually an anchor link to a section id (e.g. href="#main-section").
    */

package/lib-module/Spacer/Spacer.js

@@ -3,19 +3,19 @@ import PropTypes from 'prop-types';
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
 import { a11yProps, selectSystemProps, spacingProps, useSpacingScale, viewProps } from '../utils';
+
 /**
  * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
  * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
 const selectSizeStyle = (size, direction) => ({
   // Only apply space in one direction at a time, else large spacers will increase the
   // 'across' size of the parent and mess up siblings with styles like `alignItems: stretch`.
   [direction === 'row' ? 'width' : 'height']: size
 });
+
 /**
  * An empty element used to create a gap between components that is sized according to the theme spacing scale,
  * passing its `space` prop ({@link SpacingValue}) to `useSpacingScale`.
@@ -56,8 +56,6 @@ const selectSizeStyle = (size, direction) => ({
  * Spacer has no content and is ignored by tools such as screen readers. Use `Divider` for
  * separations between elements that may be treated as semantically meaningful on web.
  */
-
-
 const Spacer = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     space = 1,
@@ -73,15 +71,14 @@ const Spacer = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 Spacer.displayName = 'Spacer';
-Spacer.propTypes = { ...selectedSystemPropTypes,
-
+Spacer.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * The size of the spacer according to the theme's spacing scale.
    * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
    * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
    */
   space: spacingProps.types.spacingValue,
-
   /**
    * The spacer applies space in only one direction, which is controlled by the `direction` prop:
    *

package/lib-module/StackView/StackView.js

@@ -9,6 +9,7 @@ import getStackedContent from './getStackedContent';
 import { staticStyles, selectFlexStyles } from './common';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
 /**
  * StackView evenly spaces its children, by default placing `Spacer` components between them.
  *
@@ -51,7 +52,6 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * It applies no accessibility props of its own, unless `divider` prop is passed (`Divider` has a
  * semantic role but only on web, not within native apps).
  */
-
 const StackView = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     space = 0,
@@ -91,28 +91,25 @@ const StackView = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 StackView.displayName = 'StackView';
-StackView.propTypes = { ...selectedSystemPropTypes,
+StackView.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('StackView'),
   variant: variantProp.propType,
-
   /**
    * Sets the `flexDirection` of the container and, if `divider` is used, gives the Divider the appropriate direction.
    */
   direction: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['column', 'row', 'column-reverse', 'row-reverse'])),
-
   /**
    * If true, renders a UDS `Divider` component between each item. If an object is passed,
    * this object is passes as props to each Divider.
    */
   divider: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape(Divider.propTypes)]),
-
   /**
    * The size of the spacer according to the theme's spacing scale.
    * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
    * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
    */
   space: spacingProps.types.spacingValue,
-
   /**
    * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
    *
@@ -120,7 +117,6 @@ StackView.propTypes = { ...selectedSystemPropTypes,
    * is not defined, the accessibilityRole will default to "heading".
    */
   tag: PropTypes.oneOf(layoutTags),
-
   /**
    * A StackView may take any children, but will have no effect if it is only passed one child or is passed children
    * wrapped in a component. If necessary, children may be wrapped in one React Fragment.

package/lib-module/StackView/StackWrap.js

@@ -2,19 +2,19 @@ import React, { forwardRef, useState } from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
 import useSafeLayoutEffect from '../utils/useSafeLayoutEffect';
 import StackWrapBox from './StackWrapBox';
-import StackWrapGap from './StackWrapGap'; // In Jest/CI/SSR, global CSS isn't always available and doesn't always have .supports method
+import StackWrapGap from './StackWrapGap';
 
+// In Jest/CI/SSR, global CSS isn't always available and doesn't always have .supports method
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const cssSupports = (property, value) => {
   var _window$CSS;
-
   return Platform.OS === 'web' && typeof window !== 'undefined' && typeof ((_window$CSS = window.CSS) === null || _window$CSS === void 0 ? void 0 : _window$CSS.supports) === 'function' && window.CSS.supports(property, value);
-}; // CSS.supports needs an example of the type of value you intend to use.
-// Will be an integer appended `px` after hooks and JSX styles are resolved.
-
+};
 
+// CSS.supports needs an example of the type of value you intend to use.
+// Will be an integer appended `px` after hooks and JSX styles are resolved.
 const exampleGapValue = '1px';
+
 /**
  * StackWrap is an alternative to StackView where the spaced items are allowed to wrap.
  *
@@ -22,22 +22,22 @@ const exampleGapValue = '1px';
  * wrapped lines of items. By default, this `gap` is the same as the gap between spaced items.
  * If a different spacing is desired between wrapped lines, pass a spacing value to the `gap` prop.
  */
-
 const StackWrap = /*#__PURE__*/forwardRef((props, ref) => {
   const [canUseCSSGap, setCanUseCSSGap] = useState(false);
   const {
     space
-  } = props; // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
-
+  } = props;
+  // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
   const gap = props.gap ?? space;
-  const gapEqualsSpace = gap === space; // If possible, use the cleaner implementation that applies CSS `gap` styles to the container,
+  const gapEqualsSpace = gap === space;
+
+  // If possible, use the cleaner implementation that applies CSS `gap` styles to the container,
   // preserving direct parent-child relationships between the container and each item, which
   // can result in clearer descriptions on some screen readers (e.g. radio "X of Y" on MacOS).
   // Else, use the fallback implementation which renders a `Box` component around each child.
-
-  const Component = canUseCSSGap ? StackWrapGap : StackWrapBox; // In SSR, the type of implementation must match the server during hydration, but
+  const Component = canUseCSSGap ? StackWrapGap : StackWrapBox;
+  // In SSR, the type of implementation must match the server during hydration, but
   // the server can't know if gap is supported, so never use it until after hydration.
-
   useSafeLayoutEffect(() => {
     setCanUseCSSGap(gapEqualsSpace && cssSupports('gap', exampleGapValue));
   }, [gapEqualsSpace]);

package/lib-module/StackView/StackWrap.native.js

@@ -1,3 +1,4 @@
-import StackWrapBox from './StackWrapBox'; // No support for CSS `gap` on React Native, so always use the fallback "box" implementation.
+import StackWrapBox from './StackWrapBox';
 
+// No support for CSS `gap` on React Native, so always use the fallback "box" implementation.
 export default StackWrapBox;