@telus-uds/components-base 1.12.0 → 1.12.1

package/CHANGELOG.md

@@ -1,12 +1,20 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 28 Jul 2022 19:37:23 GMT and should not be manually modified.
+This log was last generated on Tue, 02 Aug 2022 22:59:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.12.1
+
+Tue, 02 Aug 2022 22:59:06 GMT
+
+### Patches
+
+- relative font sizes and carousel enhancements (srikanthkhari@gmail.com)
+
 ## 1.12.0
 
-Thu, 28 Jul 2022 19:37:23 GMT
+Thu, 28 Jul 2022 19:38:24 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -1888,6 +1888,13 @@
       "docs": {
         "description": "",
         "props": {
+          "children": {
+            "type": {
+              "name": "node"
+            },
+            "required": true,
+            "description": ""
+          },
           "defaultTheme": {
             "type": {
               "name": "custom",
@@ -1896,11 +1903,17 @@
             "required": false,
             "description": ""
           },
-          "children": {
+          "themeOptions": {
             "type": {
-              "name": "node"
+              "name": "shape",
+              "value": {
+                "forceAbsoluteFontSizing": {
+                  "name": "bool",
+                  "required": false
+                }
+              }
             },
-            "required": true,
+            "required": false,
             "description": ""
           }
         },
@@ -7472,6 +7485,23 @@
       "docs": {
         "description": "",
         "props": {
+          "themeOptions": {
+            "defaultValue": {
+              "value": "{ forceAbsoluteFontSizing: true }",
+              "computed": false
+            },
+            "type": {
+              "name": "shape",
+              "value": {
+                "forceAbsoluteFontSizing": {
+                  "name": "bool",
+                  "required": false
+                }
+              }
+            },
+            "required": false,
+            "description": "An object containing options allowing to customize the theming experience:\n\n- `forceAbsoluteFontSizing`: available on web only; when set to true, allows\n  using absolute font sizing (in pixels, doesn't scale) instead of the\n  relative sizing (in `rem`, scales depending on the browser settings)"
+          },
           "children": {
             "type": {
               "name": "node"
@@ -8504,6 +8534,17 @@
             "required": false,
             "description": "Carousel uses `Animated.spring` to animate slide changes, use this option to pass custom animation configuration"
           },
+          "panelNavigation": {
+            "defaultValue": {
+              "value": "<CarouselStepTracker />",
+              "computed": false
+            },
+            "type": {
+              "name": "element"
+            },
+            "required": false,
+            "description": "Use this to render a custom panel navigation element instead of the default StepTracker's based navigation\nYou can make use of `useCarousel` within your custom panel navigation component to hook into various Carousel states such as:\n- activeIndex: index of current slide\n- totalItems: total number of slides\nUse it as follows:\n```js\n   <Carousel\n     panelNavigation={<CustomPanelNavigation />}\n   >\n     <Carousel.Item>First Slide</Carousel.Item>\n   </Carousel>\n```"
+          },
           "tag": {
             "defaultValue": {
               "value": "'ul'",
@@ -8676,13 +8717,6 @@
             "required": false,
             "description": "Called when active index changed\nThis function is also provided with a parameter indicating changed index (either 1, or -1)\nUse it as follows:\n```js\n   const onIndexChangedCallback = React.useCallback((changedIndex) => {\n     console.log(changedIndex)\n   }, [])  // pass local dependencies as per your component\n   <Carousel\n     onIndexChanged={onIndexChangedCallback}\n   >\n     <Carousel.Item>First Slide</Carousel.Item>\n   </Carousel>\n```\nCaution: Always consider wrapping your callback for `onIndexChanged` in `useCallback` in order to avoid bugs and performance issues"
           },
-          "onRenderPanelNavigation": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": "Use this to render a custom panel navigation element instead of dots navigation\nThis function is also provided with an object with the following properties\nactiveIndex: index of current slide\ntotalItems: total number of slides\nUse it as follows:\n```js\n   <Carousel\n     onRenderPanelNavigation={({ totalItems, activeIndex }) => <Text>Showing {activeIndex + 1}</Text>}\n   >\n     <Carousel.Item>First Slide</Carousel.Item>\n   </Carousel>\n```"
-          },
           "onAnimationStart": {
             "type": {
               "name": "func"
@@ -8904,6 +8938,28 @@
             },
             "required": true,
             "description": ""
+          },
+          "getCopyWithPlaceholders": {
+            "type": {
+              "name": "func"
+            },
+            "required": true,
+            "description": ""
+          },
+          "themeTokens": {
+            "type": {
+              "name": "custom",
+              "raw": {
+                "nextIcon": "icon",
+                "previousIcon": "icon",
+                "showPreviousNextNavigation": "show",
+                "showPanelNavigation": "show",
+                "spaceBetweenSlideAndPreviousNextNavigation": "size",
+                "spaceBetweenSlideAndPanelNavigation": "size"
+              }
+            },
+            "required": false,
+            "description": ""
           }
         },
         "attributes": {
@@ -8913,7 +8969,7 @@
     },
     "CheckboxGroup": {
       "docs": {
-        "description": "A group of Checkboxs that behave as a fieldset. Use when users select any number of choices from options.\n\n## Component API\n\nUse the `items` prop to pass an array of objects describing each Checkbox in the group:\n\n - `label`: main text passed to CheckboxGroup's `label` prop\n - `id`: identifier used to store which CheckboxGroup is selected (uses `label` if undefinded)\n - `onChange`: optional function called on selection, in addition to updating the group's selection state\n\n### Controlled version\n\nIf the selection state is controlled from outside, it needs to receive `checkedId` and `onChange` props.\n\n### Uncontrolled version\n\nIf the CheckboxGroup manages its own state, you can use `initialCheckedId` prop to provide the initial value.\nWhenever the radio card gets toggled, it calls the `onChange` callback with the new value (string).\n\n### Use in forms\n\nFor web forms, the `name` prop may be used to define the name of the group's `fieldset` and input elements.\n\n### Validation\n\nValidation state may be set by passing 'error' or 'success' to the `validation` prop.\n\n## A11y guidelines\n\nCheckboxGroup accepts all the common accessibility props, and controls the accessibility state\nof children like Checkbox and Feedback based on current state.\n\n@example\n```jsx\n<CheckboxGroup\n  initialCheckedId=\"check1\"\n  items={[\n    { label: 'Checkbox 1', id: 'check1' },\n    { label: 'Checkbox 2', id: 'check2' },\n    { label: 'Checkbox 3', id: 'check3' }\n  ]}\n  legend=\"Checkboxes\"\n  hint=\"Choose from these options\"\n/>\n```",
+        "description": "A group of Checkboxs that behave as a fieldset. Use when users select any number of choices from options.\n\n## Component API\n\nUse the `items` prop to pass an array of objects describing each Checkbox in the group:\n\n - `label`: main text passed to CheckboxGroup's `label` prop\n - `id`: identifier used to store which CheckboxGroup is selected (uses `label` if undefinded)\n - `onChange`: optional function called on selection, in addition to updating the group's selection state\n\n### Controlled version\n\nIf the selection state is controlled from outside, it needs to receive `checkedId` and `onChange` props.\n\n### Uncontrolled version\n\nIf the CheckboxGroup manages its own state, you can use `initialCheckedId` prop to provide the initial value.\nWhenever the radio card gets toggled, it calls the `onChange` callback with the new value (string).\n\n### Use in forms\n\nFor web forms, the `name` prop may be used to define the name of the group's `fieldset` and input elements.\n\n### Validation\n\nValidation state may be set by passing 'error' or 'success' to the `validation` prop.\n\n## A11y guidelines\n\nCheckboxGroup accepts all the common accessibility props, and controls the accessibility state\nof children like Checkbox and Feedback based on current state.\n\n@example\n```jsx\n<CheckboxGroup\n  initialCheckedIds=\"check1\"\n  items={[\n    { label: 'Checkbox 1', id: 'check1' },\n    { label: 'Checkbox 2', id: 'check2' },\n    { label: 'Checkbox 3', id: 'check3' }\n  ]}\n  legend=\"Checkboxes\"\n  hint=\"Choose from these options\"\n/>\n```",
         "props": {
           "items": {
             "defaultValue": {

package/lib/BaseProvider/index.js

@@ -24,12 +24,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const BaseProvider = _ref => {
   let {
     defaultTheme,
-    children
+    children,
+    themeOptions
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yInfoProvider.default, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ViewportProvider.default, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
         defaultTheme: defaultTheme,
+        themeOptions: themeOptions,
         children: children
       })
     })
@@ -37,8 +39,11 @@ const BaseProvider = _ref => {
 };
 
 BaseProvider.propTypes = {
+  children: _propTypes.default.node.isRequired,
   defaultTheme: (_ThemeProvider$propTy = _ThemeProvider.default.propTypes) === null || _ThemeProvider$propTy === void 0 ? void 0 : _ThemeProvider$propTy.defaultTheme,
-  children: _propTypes.default.node.isRequired
+  themeOptions: _propTypes.default.shape({
+    forceAbsoluteFontSizing: _propTypes.default.bool
+  })
 };
 var _default = BaseProvider;
 exports.default = _default;

package/lib/Button/ButtonBase.js

@@ -17,11 +17,11 @@ var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/expo
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
-var _utils = require("../ThemeProvider/utils");
+var _ThemeProvider = require("../ThemeProvider");
 
 var _propTypes2 = _interopRequireDefault(require("./propTypes"));
 
-var _utils2 = require("../utils");
+var _utils = require("../utils");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -31,7 +31,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.focusHandlerProps, _utils2.linkProps, _utils2.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.linkProps, _utils.viewProps]);
 
 const getOuterBorderOffset = _ref => {
   let {
@@ -55,7 +55,7 @@ const selectOuterContainerStyles = _ref2 => {
     alignSelf,
     backgroundColor: outerBackgroundColor,
     opacity,
-    ...(0, _utils.applyOuterBorder)({
+    ...(0, _ThemeProvider.applyOuterBorder)({
       outerBorderGap,
       outerBorderWidth,
       outerBorderColor,
@@ -137,7 +137,7 @@ const selectInnerContainerStyles = _ref4 => {
     paddingBottom: offsetBorder(paddingBottom),
     backgroundColor,
     minWidth,
-    ...(0, _utils.applyShadowToken)(shadow)
+    ...(0, _ThemeProvider.applyShadowToken)(shadow)
   };
 };
 
@@ -154,7 +154,7 @@ const selectBorderStyles = _ref5 => {
   };
 };
 
-const selectTextStyles = _ref6 => {
+const selectTextStyles = (_ref6, themeOptions) => {
   let {
     fontSize,
     color,
@@ -163,12 +163,13 @@ const selectTextStyles = _ref6 => {
     fontWeight,
     textAlign
   } = _ref6;
-  return (0, _utils.applyTextStyles)({
+  return (0, _ThemeProvider.applyTextStyles)({
     fontSize,
     color,
     lineHeight,
     fontName,
     fontWeight,
+    themeOptions,
     textAlign
   });
 };
@@ -183,7 +184,7 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref7) => {
       maxWidth: "calc(100% + ".concat(getOuterBorderOffset(themeTokens) * 2, "px)"),
       outline: 'none',
       // removes the default browser :focus outline
-      ...(0, _utils2.getCursorStyle)(inactive, accessibilityRole)
+      ...(0, _utils.getCursorStyle)(inactive, accessibilityRole)
     },
     default: {}
   });
@@ -206,14 +207,14 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
   const {
     onPress,
     ...rest
-  } = _utils2.clickProps.toPressProps(rawRest);
+  } = _utils.clickProps.toPressProps(rawRest);
 
   const extraButtonState = {
     inactive,
     selected
   };
 
-  const resolveButtonTokens = pressableState => (0, _utils2.resolvePressableTokens)(tokens, pressableState, extraButtonState);
+  const resolveButtonTokens = pressableState => (0, _utils.resolvePressableTokens)(tokens, pressableState, extraButtonState);
 
   const systemProps = selectProps(rest);
 
@@ -222,10 +223,13 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
     return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), selectOuterWidthStyles(themeTokens)];
   };
 
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
     href: href,
-    onPress: _utils2.linkProps.handleHref({
+    onPress: _utils.linkProps.handleHref({
       href,
       onPress
     }),
@@ -237,7 +241,7 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
       const themeTokens = resolveButtonTokens(pressableState);
       const containerStyles = selectInnerContainerStyles(themeTokens);
       const borderStyles = selectBorderStyles(themeTokens);
-      const textStyles = [selectTextStyles(themeTokens), staticStyles.text]; // If the container has a width set, fill it instead of sizing from content.
+      const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text]; // 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;
@@ -251,7 +255,7 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
             transition: 'background-color 200ms, border-color 200ms'
           }
         })],
-        children: (0, _utils2.wrapStringsInText)(typeof children === 'function' ? children({ ...(0, _utils2.resolvePressableState)(pressableState, extraButtonState),
+        children: (0, _utils.wrapStringsInText)(typeof children === 'function' ? children({ ...(0, _utils.resolvePressableState)(pressableState, extraButtonState),
           textStyles
         }) : children, {
           style: textStyles
@@ -295,6 +299,6 @@ const staticStyles = _StyleSheet.default.create({
   }
 });
 
-var _default = (0, _utils2.withLinkRouter)(ButtonBase);
+var _default = (0, _utils.withLinkRouter)(ButtonBase);
 
 exports.default = _default;

package/lib/Carousel/Carousel.js

@@ -31,12 +31,10 @@ var _CarouselContext = require("./CarouselContext");
 
 var _CarouselItem = _interopRequireDefault(require("./CarouselItem"));
 
-var _StepTracker = _interopRequireDefault(require("../StepTracker"));
-
-var _StackView = _interopRequireDefault(require("../StackView"));
-
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 
+var _CarouselStepTracker = _interopRequireDefault(require("./CarouselStepTracker/CarouselStepTracker"));
+
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -54,19 +52,6 @@ const staticStyles = _StyleSheet.default.create({
   }
 });
 
-const staticTokens = {
-  stackView: {
-    justifyContent: 'center'
-  },
-  stepTracker: {
-    showStepLabel: false,
-    showStepTrackerLabel: true,
-    knobCompletedBackgroundColor: 'none',
-    connectorCompletedColor: 'none',
-    connectorColor: 'none'
-  }
-};
-
 const selectContainerStyles = width => ({
   backgroundColor: 'transparent',
   overflow: 'hidden',
@@ -175,7 +160,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     onAnimationEnd,
     onIndexChanged,
     springConfig = undefined,
-    onRenderPanelNavigation,
+    panelNavigation = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselStepTracker.default, {}),
     tag = 'ul',
     accessibilityRole = 'adjustable',
     accessibilityLabel = 'carousel',
@@ -183,16 +168,16 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ...rest
   } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Carousel', tokens, variant, {
+    viewport
+  });
   const {
     previousIcon,
     nextIcon,
     showPreviousNextNavigation,
     showPanelNavigation,
-    spaceBetweenSlideAndPreviousNextNavigation,
-    spaceBetweenSlideAndPanelNavigation
-  } = (0, _ThemeProvider.useThemeTokens)('Carousel', tokens, variant, {
-    viewport
-  });
+    spaceBetweenSlideAndPreviousNextNavigation
+  } = themeTokens;
 
   const [activeIndex, setActiveIndex] = _react.default.useState(0);
 
@@ -244,9 +229,6 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 
   const isFirstSlide = !activeIndex;
   const isLastSlide = activeIndex + 1 >= children.length;
-  const panelNavigationTokens = { ...staticTokens.stepTracker,
-    containerPaddingTop: spaceBetweenSlideAndPanelNavigation
-  };
 
   const onContainerLayout = _ref2 => {
     let {
@@ -438,17 +420,19 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     raised: true
   };
 
-  const getCopyWithPlaceholders = copyKey => {
+  const getCopyWithPlaceholders = _react.default.useCallback(copyKey => {
     const copyText = getCopy(copyKey).replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, activeIndex + 1).replace(/%\{stepCount\}/g, childrenArray.length); // First word might be a lowercase placeholder: capitalize the first letter
 
     return "".concat(copyText[0].toUpperCase()).concat(copyText.slice(1));
-  };
+  }, [activeIndex, childrenArray.length, itemLabel, getCopy]);
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CarouselContext.CarouselProvider, {
     activeIndex: activeIndex,
     totalItems: childrenArray.length,
     width: containerLayout.width,
     goTo: goTo,
+    getCopyWithPlaceholders: getCopyWithPlaceholders,
+    themeTokens: themeTokens,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: staticStyles.root,
       onLayout: onContainerLayout,
@@ -500,23 +484,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2)
         })
       })]
-    }), showPanelNavigation ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
-      direction: "row",
-      tokens: staticTokens.stackView,
-      children: onRenderPanelNavigation ? onRenderPanelNavigation({
-        activeIndex,
-        totalItems: childrenArray.length
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepTracker.default, {
-        current: activeIndex,
-        steps: childrenArray.map((_, index) => String(index)),
-        copy: {
-          // Give StepTracker copy from Carousel's language and dictionary
-          stepLabel: getCopyWithPlaceholders('stepLabel'),
-          stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
-        },
-        tokens: panelNavigationTokens
-      })
-    }) : null]
+    }), showPanelNavigation ? panelNavigation : null]
   });
 });
 
@@ -584,20 +552,20 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
   onIndexChanged: _propTypes.default.func,
 
   /**
-   * Use this to render a custom panel navigation element instead of dots navigation
-   * This function is also provided with an object with the following properties
-   * activeIndex: index of current slide
-   * totalItems: total number of slides
+   * Use this to render a custom panel navigation element instead of the default StepTracker's based navigation
+   * You can make use of `useCarousel` within your custom panel navigation component to hook into various Carousel states such as:
+   * - activeIndex: index of current slide
+   * - totalItems: total number of slides
    * Use it as follows:
    * ```js
    *    <Carousel
-   *      onRenderPanelNavigation={({ totalItems, activeIndex }) => <Text>Showing {activeIndex + 1}</Text>}
+   *      panelNavigation={<CustomPanelNavigation />}
    *    >
    *      <Carousel.Item>First Slide</Carousel.Item>
    *    </Carousel>
    * ```
    */
-  onRenderPanelNavigation: _propTypes.default.func,
+  panelNavigation: _propTypes.default.element,
 
   /**
    * When slide animation start

package/lib/Carousel/CarouselContext.js

@@ -10,6 +10,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _utils = require("../utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -22,15 +24,19 @@ const CarouselProvider = _ref => {
     activeIndex,
     totalItems,
     width,
-    goTo
+    goTo,
+    getCopyWithPlaceholders,
+    themeTokens
   } = _ref;
 
   const value = _react.default.useMemo(() => ({
     activeIndex,
     totalItems,
     width,
-    goTo
-  }), [activeIndex, totalItems, width, goTo]);
+    goTo,
+    getCopyWithPlaceholders,
+    themeTokens
+  }), [activeIndex, totalItems, width, goTo, getCopyWithPlaceholders, themeTokens]);
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CarouselContext.Provider, {
     value: value,
@@ -55,5 +61,7 @@ CarouselProvider.propTypes = {
   activeIndex: _propTypes.default.number.isRequired,
   totalItems: _propTypes.default.number.isRequired,
   width: _propTypes.default.number.isRequired,
-  goTo: _propTypes.default.func.isRequired
+  goTo: _propTypes.default.func.isRequired,
+  getCopyWithPlaceholders: _propTypes.default.func.isRequired,
+  themeTokens: (0, _utils.getTokensPropType)('Carousel')
 };

package/lib/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _CarouselContext = require("../CarouselContext");
+
+var _StepTracker = _interopRequireDefault(require("../../StepTracker"));
+
+var _StackView = _interopRequireDefault(require("../../StackView"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const CarouselStepTracker = () => {
+  const {
+    activeIndex,
+    totalItems,
+    getCopyWithPlaceholders,
+    themeTokens
+  } = (0, _CarouselContext.useCarousel)();
+  const stackViewTokens = {
+    justifyContent: 'center'
+  };
+  const stepTrackerTokens = {
+    showStepLabel: false,
+    showStepTrackerLabel: true,
+    knobCompletedBackgroundColor: 'none',
+    connectorCompletedColor: 'none',
+    connectorColor: 'none',
+    containerPaddingTop: themeTokens.spaceBetweenSlideAndPanelNavigation
+  };
+  const steps = Array.from(Array(totalItems)).map((_, index) => String(index));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+    direction: "row",
+    tokens: stackViewTokens,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepTracker.default, {
+      current: activeIndex,
+      steps: steps,
+      copy: {
+        // Give StepTracker copy from Carousel's language and dictionary
+        stepLabel: getCopyWithPlaceholders('stepLabel'),
+        stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
+      },
+      tokens: stepTrackerTokens
+    })
+  });
+};
+
+var _default = CarouselStepTracker;
+exports.default = _default;

package/lib/Carousel/CarouselStepTracker/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _CarouselStepTracker = _interopRequireDefault(require("./CarouselStepTracker"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _CarouselStepTracker.default;
+exports.default = _default;

package/lib/Checkbox/Checkbox.js

@@ -74,7 +74,7 @@ const selectInputStyles = (_ref, isChecked) => {
   };
 };
 
-const selectLabelStyles = _ref2 => {
+const selectLabelStyles = (_ref2, themeOptions) => {
   let {
     labelColor,
     labelFontName,
@@ -90,7 +90,8 @@ const selectLabelStyles = _ref2 => {
       fontName: labelFontName,
       fontWeight: labelFontWeight,
       fontSize: labelFontSize,
-      lineHeight: labelLineHeight
+      lineHeight: labelLineHeight,
+      themeOptions
     })
   };
 };
@@ -215,6 +216,9 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
 
   const uniqueId = (0, _useUniqueId.default)('checkbox');
   const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: staticStyles.wrapper,
     ref: ref,
@@ -246,7 +250,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
             pressed
           });
           const iconTokens = selectIconTokens(stateTokens);
-          const labelStyles = selectLabelStyles(stateTokens);
+          const labelStyles = selectLabelStyles(stateTokens, themeOptions);
           const alignWithLabel = label ? [staticStyles.alignWithLabel, {
             height: labelStyles.lineHeight
           }] : null;

package/lib/Checkbox/CheckboxGroup.js

@@ -69,7 +69,7 @@ const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([
  * @example
  * ```jsx
  * <CheckboxGroup
- *   initialCheckedId="check1"
+ *   initialCheckedIds="check1"
  *   items={[
  *     { label: 'Checkbox 1', id: 'check1' },
  *     { label: 'Checkbox 2', id: 'check2' },