@telus-uds/components-base 3.11.0 → 3.12.0

package/CHANGELOG.md

@@ -1,12 +1,29 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 26 Jun 2025 23:47:29 GMT and should not be manually modified.
+This log was last generated on Fri, 11 Jul 2025 22:15:36 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.12.0
+
+Fri, 11 Jul 2025 22:15:36 GMT
+
+### Minor changes
+
+- `Checkbox`: add description feature (sergio.ramirez@telus.com)
+- `Components`: adding named exports for sub-components (oscar.palencia@telus.com)
+- `ToggleSwitch`: add width prop (sergio.ramirez@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.10.0
+
+### Patches
+
+- `ButtonGroup`: responsive width issue fixed for the XS breakpoint (35577399+JoshHC@users.noreply.github.com)
+- `StepTracker`: fix dot rendering (guillermo.peitzner@telus.com)
+- `Card`: fix interactive-card size (guillermo.peitzner@telus.com)
+
 ## 3.11.0
 
-Thu, 26 Jun 2025 23:47:29 GMT
+Thu, 26 Jun 2025 23:54:42 GMT
 
 ### Minor changes
 

package/lib/cjs/Button/ButtonGroup.js

@@ -126,7 +126,7 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       padding,
       ...(_Platform.default.OS === 'web' ? {
         gap,
-        width: variant?.width === 'equal' ? '100%' : 'fit-content'
+        width: variant?.width === 'equal' ? '100%' : 'auto'
       } : {
         alignSelf: 'flex-start'
       })

package/lib/cjs/Card/Card.js

@@ -136,7 +136,8 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const isControl = interactiveCard?.variant?.isControl === true;
   const getThemeTokens = (0, _ThemeProvider.useThemeTokensCallback)('Card', interactiveCard?.tokens, {
     interactive: true,
-    ...(interactiveCard?.variant || {})
+    ...(interactiveCard?.variant || {}),
+    ...viewport
   });
   // When interactive area is present, spacing tokens should only be applied
   // to individual Card sections, not Card as a whole

package/lib/cjs/Carousel/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   Carousel: true,
+  CarouselItem: true,
   CarouselTabs: true
 };
 Object.defineProperty(exports, "Carousel", {
@@ -13,6 +14,12 @@ Object.defineProperty(exports, "Carousel", {
     return _Carousel.default;
   }
 });
+Object.defineProperty(exports, "CarouselItem", {
+  enumerable: true,
+  get: function () {
+    return _CarouselItem.default;
+  }
+});
 Object.defineProperty(exports, "CarouselTabs", {
   enumerable: true,
   get: function () {
@@ -32,5 +39,6 @@ Object.keys(_CarouselContext).forEach(function (key) {
   });
 });
 var _Carousel = _interopRequireDefault(require("./Carousel"));
+var _CarouselItem = _interopRequireDefault(require("./CarouselItem"));
 var _CarouselTabs = _interopRequireDefault(require("./CarouselTabs"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/cjs/Checkbox/Checkbox.js

@@ -53,7 +53,30 @@ const selectInputStyles = (_ref, isChecked) => {
     })
   };
 };
-const selectLabelStyles = (_ref2, themeOptions) => {
+const selectDescriptionStyles = _ref2 => {
+  let {
+    containerPaddingLeft = 0,
+    descriptionFontSize,
+    descriptionLineHeight,
+    descriptionMarginLeft,
+    descriptionFontName,
+    descriptionFontWeight,
+    descriptionFontColor,
+    inputWidth,
+    labelMarginLeft = 0
+  } = _ref2;
+  return {
+    marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputWidth + labelMarginLeft,
+    ...(0, _ThemeProvider.applyTextStyles)({
+      color: descriptionFontColor,
+      fontSize: descriptionFontSize,
+      lineHeight: descriptionLineHeight,
+      fontName: descriptionFontName,
+      fontWeight: descriptionFontWeight
+    })
+  };
+};
+const selectLabelStyles = (_ref3, themeOptions) => {
   let {
     labelColor,
     labelFontName,
@@ -61,7 +84,7 @@ const selectLabelStyles = (_ref2, themeOptions) => {
     labelFontWeight,
     labelMarginLeft,
     labelLineHeight
-  } = _ref2;
+  } = _ref3;
   return {
     marginLeft: labelMarginLeft,
     ...(0, _ThemeProvider.applyTextStyles)({
@@ -74,24 +97,24 @@ const selectLabelStyles = (_ref2, themeOptions) => {
     })
   };
 };
-const selectIconTokens = _ref3 => {
+const selectIconTokens = _ref4 => {
   let {
     icon,
     iconColor,
     iconSize
-  } = _ref3;
+  } = _ref4;
   return {
     icon,
     color: iconColor,
     size: iconSize
   };
 };
-const selectFeedbackTokens = _ref4 => {
+const selectFeedbackTokens = _ref5 => {
   let {
     feedbackMarginBottom,
     feedbackMarginTop,
     feedbackPosition
-  } = _ref4;
+  } = _ref5;
   return {
     feedbackPosition,
     feedbackMarginBottom,
@@ -134,10 +157,11 @@ const selectFeedbackTokens = _ref4 => {
  * or the internal state in case of uncontrolled checkbox.
  *
  */
-const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   let {
     checked,
     defaultChecked,
+    description,
     error = false,
     feedback,
     id,
@@ -149,7 +173,7 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     value,
     variant,
     ...rest
-  } = _ref5;
+  } = _ref6;
   const {
     currentValue: isChecked,
     setValue: setIsChecked,
@@ -211,12 +235,12 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
         onPress: handleChange,
         ...selectedProps,
         style: staticStyles.removeOutline,
-        children: _ref6 => {
+        children: _ref7 => {
           let {
             focused: focus,
             hovered: hover,
             pressed
-          } = _ref6;
+          } = _ref7;
           const {
             icon: IconComponent,
             ...stateTokens
@@ -230,34 +254,40 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
           const alignWithLabel = label ? [staticStyles.alignWithLabel, {
             height: labelStyles.lineHeight
           }] : null;
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-            style: staticStyles.container,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-              style: alignWithLabel,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-                style: [staticStyles.defaultInputStyles, selectInputStyles(stateTokens, isChecked)],
-                testID: "Checkbox-Input",
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxInput.default, {
-                  checked: isChecked,
-                  defaultChecked: defaultChecked,
-                  disabled: inactive,
-                  id: inputId,
-                  isControlled: isControlled,
-                  name: name,
-                  value: value
-                }), isChecked && IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-                  testID: "Checkbox-Icon",
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
-                    ...iconTokens
-                  })
-                })]
-              })
-            }), Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-              style: labelStyles,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.default, {
-                forId: inputId,
-                children: label
-              })
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+            space: 0,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+              style: staticStyles.container,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+                style: alignWithLabel,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+                  style: [staticStyles.defaultInputStyles, selectInputStyles(stateTokens, isChecked)],
+                  testID: "Checkbox-Input",
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxInput.default, {
+                    checked: isChecked,
+                    defaultChecked: defaultChecked,
+                    disabled: inactive,
+                    id: inputId,
+                    isControlled: isControlled,
+                    name: name,
+                    value: value
+                  }), isChecked && IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+                    testID: "Checkbox-Icon",
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+                      ...iconTokens
+                    })
+                  })]
+                })
+              }), Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+                style: labelStyles,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.default, {
+                  forId: inputId,
+                  children: label
+                })
+              })]
+            }), Boolean(description) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+              style: selectDescriptionStyles(defaultTokens),
+              children: description
             })]
           });
         }
@@ -324,7 +354,11 @@ Checkbox.propTypes = {
   /**
    * Checkbox variant.
    */
-  variant: _utils.variantProp.propType
+  variant: _utils.variantProp.propType,
+  /**
+   * An optional Checkbox description.
+   */
+  description: _propTypes.default.string
 };
 var _default = exports.default = Checkbox;
 const staticStyles = _StyleSheet.default.create({

package/lib/cjs/Checkbox/CheckboxGroup.js

@@ -124,6 +124,7 @@ const CheckboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     let {
       label,
       id,
+      description,
       onChange: itemOnChange,
       ref: itemRef,
       inactive: itemInactive,
@@ -144,6 +145,7 @@ const CheckboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       name: inputGroupName,
       tokens: radioTokens,
       variant: variant,
+      description: description,
       ...selectItemProps(itemRest)
     }, checkboxId);
   });
@@ -192,7 +194,8 @@ CheckboxGroup.propTypes = {
     id: _propTypes.default.string,
     onChange: _propTypes.default.func,
     ref: _airbnbPropTypes.default.ref(),
-    inactive: _propTypes.default.bool
+    inactive: _propTypes.default.bool,
+    description: _propTypes.default.string
   })),
   /**
    * Main text used to describe this group, used in Fieldset's Legend element.

package/lib/cjs/FlexGrid/index.js

@@ -3,7 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "FlexGridCol", {
+  enumerable: true,
+  get: function () {
+    return _Col.default;
+  }
+});
+Object.defineProperty(exports, "FlexGridRow", {
+  enumerable: true,
+  get: function () {
+    return _Row.default;
+  }
+});
 exports.default = void 0;
 var _FlexGrid = _interopRequireDefault(require("./FlexGrid"));
+var _Row = _interopRequireDefault(require("./Row"));
+var _Col = _interopRequireDefault(require("./Col"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var _default = exports.default = _FlexGrid.default;

package/lib/cjs/MultiSelectFilter/MultiSelectFilter.js

@@ -491,7 +491,11 @@ MultiSelectFilter.propTypes = {
      * An optional unique string may be provided to identify this option.
      * If not provided, the label is used.
      */
-    id: _propTypes.default.string
+    id: _propTypes.default.string,
+    /**
+     * An optional Checkbox description.
+     */
+    description: _propTypes.default.string
   })),
   /**
    * If the selected item(s) in the checkbox group(s) are to be controlled externally by

package/lib/cjs/OrderedList/index.js

@@ -3,7 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "OrderedListItem", {
+  enumerable: true,
+  get: function () {
+    return _Item.default;
+  }
+});
 exports.default = void 0;
 var _OrderedList = _interopRequireDefault(require("./OrderedList"));
+var _Item = _interopRequireDefault(require("./Item"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var _default = exports.default = _OrderedList.default;

package/lib/cjs/StepTracker/Step.js

@@ -259,7 +259,10 @@ const staticStyles = _StyleSheet.default.create({
     textAlign: 'center'
   },
   knob: {
-    borderWidth: 1
+    borderWidth: 1,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
   },
   stepLabelContainer: {
     justifyContent: 'center'

package/lib/cjs/ToggleSwitch/ToggleSwitch.js

@@ -172,7 +172,8 @@ const ToggleSwitch = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
     direction: togglePosition === 'start' ? 'row-reverse' : 'row',
     tokens: {
       alignItems: 'center',
-      justifyContent: 'start'
+      justifyContent: themeTokens.containerWidth ? 'space-between' : 'start',
+      width: themeTokens.containerWidth
     },
     children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [selectLabelStyles(themeTokens), staticStyles.containText],

package/lib/cjs/index.js

@@ -44,6 +44,7 @@ var _exportNames = {
   MultiSelectFilter: true,
   Notification: true,
   OrderedList: true,
+  OrderedListItem: true,
   Pagination: true,
   PriceLockup: true,
   ProductCard: true,
@@ -328,6 +329,12 @@ Object.defineProperty(exports, "OrderedList", {
     return _OrderedList.default;
   }
 });
+Object.defineProperty(exports, "OrderedListItem", {
+  enumerable: true,
+  get: function () {
+    return _OrderedList.OrderedListItem;
+  }
+});
 Object.defineProperty(exports, "Pagination", {
   enumerable: true,
   get: function () {
@@ -683,7 +690,18 @@ var _ExpandCollapse = _interopRequireWildcard(require("./ExpandCollapse"));
 var _ExpandCollapseMini = _interopRequireDefault(require("./ExpandCollapseMini"));
 var _Feedback = _interopRequireDefault(require("./Feedback"));
 var _Fieldset = _interopRequireDefault(require("./Fieldset"));
-var _FlexGrid = _interopRequireDefault(require("./FlexGrid"));
+var _FlexGrid = _interopRequireWildcard(require("./FlexGrid"));
+Object.keys(_FlexGrid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _FlexGrid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FlexGrid[key];
+    }
+  });
+});
 var _Footnote = _interopRequireDefault(require("./Footnote"));
 var _HorizontalScroll = _interopRequireWildcard(require("./HorizontalScroll"));
 var _Icon = _interopRequireWildcard(require("./Icon"));
@@ -706,7 +724,7 @@ var _List = _interopRequireWildcard(require("./List"));
 var _Modal = _interopRequireDefault(require("./Modal"));
 var _MultiSelectFilter = _interopRequireDefault(require("./MultiSelectFilter"));
 var _Notification = _interopRequireDefault(require("./Notification"));
-var _OrderedList = _interopRequireDefault(require("./OrderedList"));
+var _OrderedList = _interopRequireWildcard(require("./OrderedList"));
 var _Pagination = _interopRequireDefault(require("./Pagination"));
 var _PriceLockup = _interopRequireDefault(require("./PriceLockup"));
 var _ProductCard = _interopRequireDefault(require("./ProductCard"));

package/lib/esm/Button/ButtonGroup.js

@@ -119,7 +119,7 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       padding,
       ...(Platform.OS === 'web' ? {
         gap,
-        width: variant?.width === 'equal' ? '100%' : 'fit-content'
+        width: variant?.width === 'equal' ? '100%' : 'auto'
       } : {
         alignSelf: 'flex-start'
       })

package/lib/esm/Card/Card.js

@@ -129,7 +129,8 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const isControl = interactiveCard?.variant?.isControl === true;
   const getThemeTokens = useThemeTokensCallback('Card', interactiveCard?.tokens, {
     interactive: true,
-    ...(interactiveCard?.variant || {})
+    ...(interactiveCard?.variant || {}),
+    ...viewport
   });
   // When interactive area is present, spacing tokens should only be applied
   // to individual Card sections, not Card as a whole

package/lib/esm/Carousel/index.js

@@ -1,3 +1,4 @@
 export * from './CarouselContext';
 export { default as Carousel } from './Carousel';
+export { default as CarouselItem } from './CarouselItem';
 export { default as CarouselTabs } from './CarouselTabs';

package/lib/esm/Checkbox/Checkbox.js

@@ -46,7 +46,30 @@ const selectInputStyles = (_ref, isChecked) => {
     })
   };
 };
-const selectLabelStyles = (_ref2, themeOptions) => {
+const selectDescriptionStyles = _ref2 => {
+  let {
+    containerPaddingLeft = 0,
+    descriptionFontSize,
+    descriptionLineHeight,
+    descriptionMarginLeft,
+    descriptionFontName,
+    descriptionFontWeight,
+    descriptionFontColor,
+    inputWidth,
+    labelMarginLeft = 0
+  } = _ref2;
+  return {
+    marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputWidth + labelMarginLeft,
+    ...applyTextStyles({
+      color: descriptionFontColor,
+      fontSize: descriptionFontSize,
+      lineHeight: descriptionLineHeight,
+      fontName: descriptionFontName,
+      fontWeight: descriptionFontWeight
+    })
+  };
+};
+const selectLabelStyles = (_ref3, themeOptions) => {
   let {
     labelColor,
     labelFontName,
@@ -54,7 +77,7 @@ const selectLabelStyles = (_ref2, themeOptions) => {
     labelFontWeight,
     labelMarginLeft,
     labelLineHeight
-  } = _ref2;
+  } = _ref3;
   return {
     marginLeft: labelMarginLeft,
     ...applyTextStyles({
@@ -67,24 +90,24 @@ const selectLabelStyles = (_ref2, themeOptions) => {
     })
   };
 };
-const selectIconTokens = _ref3 => {
+const selectIconTokens = _ref4 => {
   let {
     icon,
     iconColor,
     iconSize
-  } = _ref3;
+  } = _ref4;
   return {
     icon,
     color: iconColor,
     size: iconSize
   };
 };
-const selectFeedbackTokens = _ref4 => {
+const selectFeedbackTokens = _ref5 => {
   let {
     feedbackMarginBottom,
     feedbackMarginTop,
     feedbackPosition
-  } = _ref4;
+  } = _ref5;
   return {
     feedbackPosition,
     feedbackMarginBottom,
@@ -127,10 +150,11 @@ const selectFeedbackTokens = _ref4 => {
  * or the internal state in case of uncontrolled checkbox.
  *
  */
-const Checkbox = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+const Checkbox = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     checked,
     defaultChecked,
+    description,
     error = false,
     feedback,
     id,
@@ -142,7 +166,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     value,
     variant,
     ...rest
-  } = _ref5;
+  } = _ref6;
   const {
     currentValue: isChecked,
     setValue: setIsChecked,
@@ -204,12 +228,12 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
         onPress: handleChange,
         ...selectedProps,
         style: staticStyles.removeOutline,
-        children: _ref6 => {
+        children: _ref7 => {
           let {
             focused: focus,
             hovered: hover,
             pressed
-          } = _ref6;
+          } = _ref7;
           const {
             icon: IconComponent,
             ...stateTokens
@@ -223,34 +247,40 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
           const alignWithLabel = label ? [staticStyles.alignWithLabel, {
             height: labelStyles.lineHeight
           }] : null;
-          return /*#__PURE__*/_jsxs(View, {
-            style: staticStyles.container,
-            children: [/*#__PURE__*/_jsx(View, {
-              style: alignWithLabel,
-              children: /*#__PURE__*/_jsxs(View, {
-                style: [staticStyles.defaultInputStyles, selectInputStyles(stateTokens, isChecked)],
-                testID: "Checkbox-Input",
-                children: [/*#__PURE__*/_jsx(CheckboxInput, {
-                  checked: isChecked,
-                  defaultChecked: defaultChecked,
-                  disabled: inactive,
-                  id: inputId,
-                  isControlled: isControlled,
-                  name: name,
-                  value: value
-                }), isChecked && IconComponent && /*#__PURE__*/_jsx(View, {
-                  testID: "Checkbox-Icon",
-                  children: /*#__PURE__*/_jsx(IconComponent, {
-                    ...iconTokens
-                  })
-                })]
-              })
-            }), Boolean(label) && /*#__PURE__*/_jsx(Text, {
-              style: labelStyles,
-              children: /*#__PURE__*/_jsx(CheckboxLabel, {
-                forId: inputId,
-                children: label
-              })
+          return /*#__PURE__*/_jsxs(StackView, {
+            space: 0,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: staticStyles.container,
+              children: [/*#__PURE__*/_jsx(View, {
+                style: alignWithLabel,
+                children: /*#__PURE__*/_jsxs(View, {
+                  style: [staticStyles.defaultInputStyles, selectInputStyles(stateTokens, isChecked)],
+                  testID: "Checkbox-Input",
+                  children: [/*#__PURE__*/_jsx(CheckboxInput, {
+                    checked: isChecked,
+                    defaultChecked: defaultChecked,
+                    disabled: inactive,
+                    id: inputId,
+                    isControlled: isControlled,
+                    name: name,
+                    value: value
+                  }), isChecked && IconComponent && /*#__PURE__*/_jsx(View, {
+                    testID: "Checkbox-Icon",
+                    children: /*#__PURE__*/_jsx(IconComponent, {
+                      ...iconTokens
+                    })
+                  })]
+                })
+              }), Boolean(label) && /*#__PURE__*/_jsx(Text, {
+                style: labelStyles,
+                children: /*#__PURE__*/_jsx(CheckboxLabel, {
+                  forId: inputId,
+                  children: label
+                })
+              })]
+            }), Boolean(description) && /*#__PURE__*/_jsx(Text, {
+              style: selectDescriptionStyles(defaultTokens),
+              children: description
             })]
           });
         }
@@ -317,7 +347,11 @@ Checkbox.propTypes = {
   /**
    * Checkbox variant.
    */
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  /**
+   * An optional Checkbox description.
+   */
+  description: PropTypes.string
 };
 export default Checkbox;
 const staticStyles = StyleSheet.create({

package/lib/esm/Checkbox/CheckboxGroup.js

@@ -117,6 +117,7 @@ const CheckboxGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     let {
       label,
       id,
+      description,
       onChange: itemOnChange,
       ref: itemRef,
       inactive: itemInactive,
@@ -137,6 +138,7 @@ const CheckboxGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       name: inputGroupName,
       tokens: radioTokens,
       variant: variant,
+      description: description,
       ...selectItemProps(itemRest)
     }, checkboxId);
   });
@@ -185,7 +187,8 @@ CheckboxGroup.propTypes = {
     id: PropTypes.string,
     onChange: PropTypes.func,
     ref: ABBPropTypes.ref(),
-    inactive: PropTypes.bool
+    inactive: PropTypes.bool,
+    description: PropTypes.string
   })),
   /**
    * Main text used to describe this group, used in Fieldset's Legend element.

package/lib/esm/FlexGrid/index.js

@@ -1,2 +1,4 @@
 import FlexGrid from './FlexGrid';
+export { default as FlexGridRow } from './Row';
+export { default as FlexGridCol } from './Col';
 export default FlexGrid;

package/lib/esm/MultiSelectFilter/MultiSelectFilter.js

@@ -484,7 +484,11 @@ MultiSelectFilter.propTypes = {
      * An optional unique string may be provided to identify this option.
      * If not provided, the label is used.
      */
-    id: PropTypes.string
+    id: PropTypes.string,
+    /**
+     * An optional Checkbox description.
+     */
+    description: PropTypes.string
   })),
   /**
    * If the selected item(s) in the checkbox group(s) are to be controlled externally by

package/lib/esm/OrderedList/index.js

@@ -1,2 +1,3 @@
 import OrderedList from './OrderedList';
+export { default as OrderedListItem } from './Item';
 export default OrderedList;

package/lib/esm/StepTracker/Step.js

@@ -252,7 +252,10 @@ const staticStyles = StyleSheet.create({
     textAlign: 'center'
   },
   knob: {
-    borderWidth: 1
+    borderWidth: 1,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
   },
   stepLabelContainer: {
     justifyContent: 'center'

package/lib/esm/ToggleSwitch/ToggleSwitch.js

@@ -165,7 +165,8 @@ const ToggleSwitch = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
     direction: togglePosition === 'start' ? 'row-reverse' : 'row',
     tokens: {
       alignItems: 'center',
-      justifyContent: 'start'
+      justifyContent: themeTokens.containerWidth ? 'space-between' : 'start',
+      width: themeTokens.containerWidth
     },
     children: [Boolean(label) && /*#__PURE__*/_jsx(View, {
       style: [selectLabelStyles(themeTokens), staticStyles.containText],

package/lib/esm/index.js

@@ -21,6 +21,7 @@ export { default as ExpandCollapse, Accordion } from './ExpandCollapse';
 export { default as ExpandCollapseMini } from './ExpandCollapseMini';
 export { default as Feedback } from './Feedback';
 export { default as Fieldset } from './Fieldset';
+export * from './FlexGrid';
 export { default as FlexGrid } from './FlexGrid';
 export { default as Footnote } from './Footnote';
 export { default as HorizontalScroll, horizontalScrollUtils, HorizontalScrollButton } from './HorizontalScroll';
@@ -33,7 +34,7 @@ export { default as List, ListItem, ListBase } from './List';
 export { default as Modal } from './Modal';
 export { default as MultiSelectFilter } from './MultiSelectFilter';
 export { default as Notification } from './Notification';
-export { default as OrderedList } from './OrderedList';
+export { default as OrderedList, OrderedListItem } from './OrderedList';
 export { default as Pagination } from './Pagination';
 export { default as PriceLockup } from './PriceLockup';
 export { default as ProductCard } from './ProductCard';

package/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.9.0",
+    "@telus-uds/system-theme-tokens": "^4.10.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.11.0",
+  "version": "3.12.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.9.0",
+    "@telus-uds/system-theme-tokens": "^4.10.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.11.0",
+  "version": "3.12.0",
   "types": "types/index.d.ts"
 }

package/src/Button/ButtonGroup.jsx

@@ -135,7 +135,7 @@ const ButtonGroup = React.forwardRef(
           backgroundColor,
           padding,
           ...(Platform.OS === 'web'
-            ? { gap, width: variant?.width === 'equal' ? '100%' : 'fit-content' }
+            ? { gap, width: variant?.width === 'equal' ? '100%' : 'auto' }
             : { alignSelf: 'flex-start' })
         }}
         {...selectProps(rest)}

package/src/Card/Card.jsx

@@ -132,7 +132,8 @@ const Card = React.forwardRef(
 
     const getThemeTokens = useThemeTokensCallback('Card', interactiveCard?.tokens, {
       interactive: true,
-      ...(interactiveCard?.variant || {})
+      ...(interactiveCard?.variant || {}),
+      ...viewport
     })
     // When interactive area is present, spacing tokens should only be applied
     // to individual Card sections, not Card as a whole

package/src/Carousel/index.js

@@ -1,3 +1,4 @@
 export * from './CarouselContext'
 export { default as Carousel } from './Carousel'
+export { default as CarouselItem } from './CarouselItem'
 export { default as CarouselTabs } from './CarouselTabs'

package/src/Checkbox/Checkbox.jsx

@@ -61,6 +61,28 @@ const selectInputStyles = (
     }
   })
 })
+
+const selectDescriptionStyles = ({
+  containerPaddingLeft = 0,
+  descriptionFontSize,
+  descriptionLineHeight,
+  descriptionMarginLeft,
+  descriptionFontName,
+  descriptionFontWeight,
+  descriptionFontColor,
+  inputWidth,
+  labelMarginLeft = 0
+}) => ({
+  marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputWidth + labelMarginLeft,
+  ...applyTextStyles({
+    color: descriptionFontColor,
+    fontSize: descriptionFontSize,
+    lineHeight: descriptionLineHeight,
+    fontName: descriptionFontName,
+    fontWeight: descriptionFontWeight
+  })
+})
+
 const selectLabelStyles = (
   { labelColor, labelFontName, labelFontSize, labelFontWeight, labelMarginLeft, labelLineHeight },
   themeOptions
@@ -127,6 +149,7 @@ const Checkbox = React.forwardRef(
     {
       checked,
       defaultChecked,
+      description,
       error = false,
       feedback,
       id,
@@ -203,38 +226,43 @@ const Checkbox = React.forwardRef(
                 : null
 
               return (
-                <View style={staticStyles.container}>
-                  <View style={alignWithLabel}>
-                    <View
-                      style={[
-                        staticStyles.defaultInputStyles,
-                        selectInputStyles(stateTokens, isChecked)
-                      ]}
-                      testID="Checkbox-Input"
-                    >
-                      {/* Add a real input on Web, skip on native platforms */}
-                      <CheckboxInput
-                        checked={isChecked}
-                        defaultChecked={defaultChecked}
-                        disabled={inactive}
-                        id={inputId}
-                        isControlled={isControlled}
-                        name={name}
-                        value={value}
-                      />
-                      {isChecked && IconComponent && (
-                        <View testID="Checkbox-Icon">
-                          <IconComponent {...iconTokens} />
-                        </View>
-                      )}
+                <StackView space={0}>
+                  <View style={staticStyles.container}>
+                    <View style={alignWithLabel}>
+                      <View
+                        style={[
+                          staticStyles.defaultInputStyles,
+                          selectInputStyles(stateTokens, isChecked)
+                        ]}
+                        testID="Checkbox-Input"
+                      >
+                        {/* Add a real input on Web, skip on native platforms */}
+                        <CheckboxInput
+                          checked={isChecked}
+                          defaultChecked={defaultChecked}
+                          disabled={inactive}
+                          id={inputId}
+                          isControlled={isControlled}
+                          name={name}
+                          value={value}
+                        />
+                        {isChecked && IconComponent && (
+                          <View testID="Checkbox-Icon">
+                            <IconComponent {...iconTokens} />
+                          </View>
+                        )}
+                      </View>
                     </View>
+                    {Boolean(label) && (
+                      <Text style={labelStyles}>
+                        <CheckboxLabel forId={inputId}>{label}</CheckboxLabel>
+                      </Text>
+                    )}
                   </View>
-                  {Boolean(label) && (
-                    <Text style={labelStyles}>
-                      <CheckboxLabel forId={inputId}>{label}</CheckboxLabel>
-                    </Text>
+                  {Boolean(description) && (
+                    <Text style={selectDescriptionStyles(defaultTokens)}>{description}</Text>
                   )}
-                </View>
+                </StackView>
               )
             }}
           </Pressable>
@@ -303,7 +331,11 @@ Checkbox.propTypes = {
   /**
    * Checkbox variant.
    */
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  /**
+   * An optional Checkbox description.
+   */
+  description: PropTypes.string
 }
 
 export default Checkbox

package/src/Checkbox/CheckboxGroup.jsx

@@ -135,7 +135,15 @@ const CheckboxGroup = React.forwardRef(
 
     const checkboxes = items.map(
       (
-        { label, id, onChange: itemOnChange, ref: itemRef, inactive: itemInactive, ...itemRest },
+        {
+          label,
+          id,
+          description,
+          onChange: itemOnChange,
+          ref: itemRef,
+          inactive: itemInactive,
+          ...itemRest
+        },
         index
       ) => {
         const checkboxId = id || `Checkbox[${index}]`
@@ -156,6 +164,7 @@ const CheckboxGroup = React.forwardRef(
             name={inputGroupName}
             tokens={radioTokens}
             variant={variant}
+            description={description}
             {...selectItemProps(itemRest)}
           />
         )
@@ -210,7 +219,8 @@ CheckboxGroup.propTypes = {
       id: PropTypes.string,
       onChange: PropTypes.func,
       ref: ABBPropTypes.ref(),
-      inactive: PropTypes.bool
+      inactive: PropTypes.bool,
+      description: PropTypes.string
     })
   ),
   /**

package/src/FlexGrid/index.js

@@ -1,3 +1,6 @@
 import FlexGrid from './FlexGrid'
 
+export { default as FlexGridRow } from './Row'
+export { default as FlexGridCol } from './Col'
+
 export default FlexGrid

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -479,7 +479,11 @@ MultiSelectFilter.propTypes = {
        * An optional unique string may be provided to identify this option.
        * If not provided, the label is used.
        */
-      id: PropTypes.string
+      id: PropTypes.string,
+      /**
+       * An optional Checkbox description.
+       */
+      description: PropTypes.string
     })
   ),
   /**

package/src/OrderedList/index.js

@@ -1,3 +1,4 @@
 import OrderedList from './OrderedList'
 
+export { default as OrderedListItem } from './Item'
 export default OrderedList

package/src/StepTracker/Step.jsx

@@ -243,7 +243,7 @@ const staticStyles = StyleSheet.create({
     backgroundColor: 'transparent',
     textAlign: 'center'
   },
-  knob: { borderWidth: 1 },
+  knob: { borderWidth: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' },
   stepLabelContainer: { justifyContent: 'center' },
   wrappingLabel: { width: 0, flex: 1 }
 })

package/src/ToggleSwitch/ToggleSwitch.jsx

@@ -146,7 +146,11 @@ const ToggleSwitch = React.forwardRef(
       <StackView
         space={themeTokens.space}
         direction={togglePosition === 'start' ? 'row-reverse' : 'row'}
-        tokens={{ alignItems: 'center', justifyContent: 'start' }}
+        tokens={{
+          alignItems: 'center',
+          justifyContent: themeTokens.containerWidth ? 'space-between' : 'start',
+          width: themeTokens.containerWidth
+        }}
       >
         {Boolean(label) && (
           <View style={[selectLabelStyles(themeTokens), staticStyles.containText]}>

package/src/index.js

@@ -21,6 +21,7 @@ export { default as ExpandCollapse, Accordion } from './ExpandCollapse'
 export { default as ExpandCollapseMini } from './ExpandCollapseMini'
 export { default as Feedback } from './Feedback'
 export { default as Fieldset } from './Fieldset'
+export * from './FlexGrid'
 export { default as FlexGrid } from './FlexGrid'
 export { default as Footnote } from './Footnote'
 export {
@@ -37,7 +38,7 @@ export { default as List, ListItem, ListBase } from './List'
 export { default as Modal } from './Modal'
 export { default as MultiSelectFilter } from './MultiSelectFilter'
 export { default as Notification } from './Notification'
-export { default as OrderedList } from './OrderedList'
+export { default as OrderedList, OrderedListItem } from './OrderedList'
 export { default as Pagination } from './Pagination'
 export { default as PriceLockup } from './PriceLockup'
 export { default as ProductCard } from './ProductCard'

package/types/Checkbox.d.ts

@@ -9,6 +9,7 @@ type CheckboxProps = {
   id?: string
   inactive?: boolean
   label?: string
+  description?: string
   name?: string
   onChange?: (value: boolean, event: any) => void
   tokens?: Tokens
@@ -44,4 +45,10 @@ type CheckboxTokens = {
   labelFontWeight?: number
   labelLineHeight?: number
   labelMarginLeft?: number
+  descriptionFontName?: string
+  descriptionFontSize?: number
+  descriptionFontWeight?: number
+  descriptionLineHeight?: number
+  descriptionMarginLeft?: number
+  descriptionFontColor?: string
 }