@telus-uds/components-base 1.12.0 → 1.14.0

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/Carousel/CarouselTabs/CarouselTabs.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _utils = require("../../utils");
+
+var _Carousel = _interopRequireDefault(require("../Carousel"));
+
+var _CarouselTabsPanel = _interopRequireDefault(require("./CarouselTabsPanel"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _CarouselTabs$propTyp, _CarouselTabs$propTyp2;
+
+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 CarouselTabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    items,
+    refocus = true,
+    ...carouselProps
+  } = _ref;
+  const panelNavigation = (0, _utils.useResponsiveProp)({
+    md: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselTabsPanel.default, {
+      items: items
+    })
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Carousel.default, {
+    refocus: refocus,
+    ...carouselProps,
+    ref: ref,
+    panelNavigation: panelNavigation,
+    children: items.map(_ref2 => {
+      let {
+        title,
+        content
+      } = _ref2;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+        children: content
+      }, title);
+    })
+  });
+});
+CarouselTabs.displayName = 'CarouselTabs';
+CarouselTabs.propTypes = {
+  /**
+   * An array of objects where title is the string shown in the slide's tab and content is the JSX for the slide itself
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    title: _propTypes.default.string.isRequired,
+    content: _propTypes.default.node.isRequired
+  })),
+  ..._Carousel.default.propTypes
+}; // CarouselTabs doesn't require `children` prop, it uses `items` instead.
+// eslint-disable-next-line react/forbid-foreign-prop-types
+
+if ((_CarouselTabs$propTyp = CarouselTabs.propTypes) !== null && _CarouselTabs$propTyp !== void 0 && _CarouselTabs$propTyp.children) (_CarouselTabs$propTyp2 = CarouselTabs.propTypes) === null || _CarouselTabs$propTyp2 === void 0 ? true : delete _CarouselTabs$propTyp2.children;
+var _default = CarouselTabs;
+exports.default = _default;

package/lib/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _StackView = _interopRequireDefault(require("../../StackView"));
+
+var _CarouselContext = require("../CarouselContext");
+
+var _CarouselTabsPanelItem = _interopRequireDefault(require("./CarouselTabsPanelItem"));
+
+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 CarouselTabsPanel = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    items
+  } = _ref;
+  const {
+    activeIndex,
+    goTo
+  } = (0, _CarouselContext.useCarousel)();
+  const nextFocusRef = (0, _react.useRef)();
+  const firstTabRef = (0, _react.useRef)(); // TODO: figure out a better cross-brand way to specify subcomponent variants.
+  // For now, this picks an Allium variant, and does nothing in brands that lack it.
+  // See similar comment in Carousel and https://github.com/telus/universal-design-system/issues/1549
+
+  const dividerVariant = {
+    decorative: true
+  };
+  const lastTabSelected = activeIndex === items.length - 1;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      focusable: true,
+      accessible: true,
+      onFocus: event => {
+        // When user forward-tabs into this section, focus the next tab; if they backwards-tab
+        // (shift-tab) back into the carousel content, don't interfere.
+        const previousWebFocus = event.relatedTarget;
+        if (previousWebFocus !== firstTabRef.current) nextFocusRef.current.focus();
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+      direction: "row",
+      space: 3,
+      divider: {
+        variant: dividerVariant
+      },
+      ref: ref,
+      children: items.map((_ref2, index) => {
+        let {
+          title,
+          onPress,
+          ...panelItemProps
+        } = _ref2;
+        const selected = index === activeIndex;
+        const isNext = index === activeIndex + 1; // Selected item should be always unfocusable and unpressable
+
+        const handlePress = selected ? undefined : event => {
+          if (typeof onPress === 'function') onPress(event, index);
+          goTo(index);
+        };
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselTabsPanelItem.default, {
+          ref: isNext && nextFocusRef || index === 0 && firstTabRef || null,
+          title: title,
+          selected: selected,
+          onPress: handlePress,
+          ...panelItemProps
+        }, title);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      focusable: true,
+      accessible: true,
+      ref: lastTabSelected ? nextFocusRef : null
+    })]
+  });
+});
+CarouselTabsPanel.displayName = 'CarouselTabsPanel';
+CarouselTabsPanel.propTypes = {
+  items: _propTypes.default.arrayOf(_propTypes.default.shape(_CarouselTabsPanelItem.default.propTypes || {}))
+};
+var _default = CarouselTabsPanel;
+exports.default = _default;

package/lib/Carousel/CarouselTabs/CarouselTabsPanelItem.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _ThemeProvider = require("../../ThemeProvider");
+
+var _utils = require("../../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const [selectPressProps, pressPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.pressProps, _utils.viewProps]);
+const [selectTextProps, textPropTypes] = (0, _utils.selectSystemProps)([_utils.textProps]);
+
+const selectContainerStyles = _ref => {
+  let {
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom = 0,
+    borderBottomColor,
+    borderBottomWidth = 0,
+    borderBottomStyle,
+    flex,
+    alignItems,
+    justifyContent
+  } = _ref;
+  return {
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom: paddingBottom - borderBottomWidth,
+    borderBottomColor,
+    borderBottomWidth,
+    borderBottomStyle,
+    flex,
+    alignItems,
+    justifyContent,
+    ..._Platform.default.select({
+      // Removes the default browser :focus outline
+      web: {
+        outline: 'none'
+      }
+    })
+  };
+};
+
+const selectTextStyles = _ref2 => {
+  let {
+    fontSize,
+    fontScaleCap,
+    lineHeight,
+    letterSpacing,
+    fontWeight,
+    fontName,
+    color
+  } = _ref2;
+  return (0, _ThemeProvider.applyTextStyles)({
+    fontSize,
+    fontScaleCap,
+    lineHeight,
+    letterSpacing,
+    fontWeight,
+    fontName,
+    color
+  });
+};
+
+const CarouselTabsPanelItem = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    title,
+    selected,
+    inactive,
+    variant,
+    tokens,
+    accessibilityRole = 'tab',
+    ...rest
+  } = _ref3;
+  // Workaround for React Native Web https://github.com/necolas/react-native-web/issues/2357
+  // Don't allow disabled to be set while focus is true else focus state gets locked `true`
+  // (must refocus _after_ calling `goTo`, else focus target content is not up to date)
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const disabled = (inactive || selected) && !isFocused;
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('CarouselTabsPanelItem', tokens, variant);
+
+  const resolveTokens = pressState => getTokens((0, _utils.resolvePressableState)(pressState, {
+    selected
+  }));
+
+  const getContainerStyle = pressState => selectContainerStyles(resolveTokens(pressState));
+
+  const getTextStyle = pressState => selectTextStyles(resolveTokens(pressState));
+
+  const {
+    onPress,
+    ...selectedPressProps
+  } = selectPressProps(rest);
+
+  const handleKeyDown = event => {
+    // Allow using the spacebar for navigation
+    if ((event === null || event === void 0 ? void 0 : event.key) === ' ') onPress(event);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    onPress: onPress,
+    style: getContainerStyle,
+    accessibilityRole: accessibilityRole,
+    ref: ref,
+    onKeyDown: handleKeyDown,
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false),
+    disabled: disabled,
+    ...selectedPressProps,
+    children: pressState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      style: getTextStyle(pressState),
+      ...selectTextProps(rest),
+      children: title
+    })
+  });
+});
+CarouselTabsPanelItem.displayName = 'CarouselTabsPanelItem';
+CarouselTabsPanelItem.propTypes = { ...pressPropTypes,
+  ...textPropTypes,
+  title: _propTypes.default.string.isRequired,
+  selected: _propTypes.default.bool,
+  tokens: (0, _utils.getTokensPropType)('CarouselTabsPanelItem'),
+  variant: _utils.variantProp.propType
+};
+var _default = CarouselTabsPanelItem;
+exports.default = _default;

package/lib/Carousel/CarouselTabs/index.js

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

package/lib/Carousel/CarouselThumbnail.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+
+var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
+
+var _CarouselContext = require("./CarouselContext");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * `Carousel.Thumbnail` is used to wrap the content of an individual slide and is suppsoed to be the
+ * only top-level component passed to the `Carousel`
+ */
+const CarouselThumbnail = _ref => {
+  let {
+    accessibilityLabel,
+    alt,
+    index,
+    src
+  } = _ref;
+  const {
+    activeIndex,
+    itemLabel,
+    totalItems,
+    getCopyWithPlaceholders,
+    goTo,
+    themeTokens
+  } = (0, _CarouselContext.useCarousel)();
+  const thumbnailTitle = alt !== null && alt !== void 0 ? alt : getCopyWithPlaceholders('stepTrackerLabel').replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, index).replace(/%\{stepCount\}/g, totalItems);
+
+  const handlePress = () => goTo(index);
+
+  const handleKeyDown = event => {
+    // Allow using the spacebar for navigation
+    if ((event === null || event === void 0 ? void 0 : event.key) === ' ') goTo(index);
+  };
+
+  const {
+    thumbnailBorderColor,
+    thumbnailBorderRadius,
+    thumbnailBorderWidth,
+    thumbnailMargin,
+    thumbnailPadding,
+    thumbnailSelectedBorderColor,
+    thumbnailSelectedBorderWidth,
+    thumbnailSize
+  } = themeTokens;
+  const styles = {
+    pressable: {
+      borderColor: thumbnailBorderColor,
+      borderRadius: thumbnailBorderRadius,
+      borderWidth: thumbnailBorderWidth,
+      margin: thumbnailMargin,
+      padding: thumbnailPadding
+    },
+    image: {
+      height: thumbnailSize,
+      width: thumbnailSize
+    },
+    selected: {
+      borderColor: thumbnailSelectedBorderColor,
+      borderWidth: thumbnailSelectedBorderWidth,
+      padding: thumbnailPadding - thumbnailSelectedBorderWidth + thumbnailBorderWidth
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    onKeyDown: handleKeyDown,
+    onPress: handlePress,
+    style: [styles.pressable, index === activeIndex && styles.selected],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+      accessibilityIgnoresInvertColors: true,
+      accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : alt,
+      source: src,
+      style: styles.image,
+      title: thumbnailTitle
+    })
+  }, src);
+};
+
+CarouselThumbnail.propTypes = {
+  accessibilityLabel: _propTypes.default.string,
+  alt: _propTypes.default.string,
+  index: _propTypes.default.number,
+  src: _propTypes.default.string
+};
+var _default = CarouselThumbnail;
+exports.default = _default;

package/lib/Carousel/CarouselThumbnailNavigation.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _CarouselContext = require("./CarouselContext");
+
+var _CarouselThumbnail = _interopRequireDefault(require("./CarouselThumbnail"));
+
+var _StackView = require("../StackView");
+
+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 CarouselThumbnailNavigation = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    thumbnails = []
+  } = _ref;
+  const {
+    totalItems,
+    themeTokens
+  } = (0, _CarouselContext.useCarousel)();
+
+  if (thumbnails.length !== totalItems) {
+    throw new Error('Thumbnail set provided does not match the number of slides in the carousel');
+  }
+
+  const {
+    thumbnailContainerPaddingTop,
+    thumbnailMargin
+  } = themeTokens;
+  const stackWrapTokens = {
+    justifyContent: 'flex-start'
+  };
+  const containerStyles = {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingTop: thumbnailContainerPaddingTop - thumbnailMargin
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: containerStyles,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+      direction: "row",
+      tokens: stackWrapTokens,
+      ref: ref,
+      children: thumbnails.map((_ref2, index) => {
+        let {
+          accessibilityLabel,
+          alt,
+          src
+        } = _ref2;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselThumbnail.default, {
+          accessibilityLabel: accessibilityLabel,
+          alt: alt,
+          index: index,
+          src: src
+        }, src);
+      })
+    })
+  });
+});
+CarouselThumbnailNavigation.displayName = 'CarouselThumbnailNavigation';
+CarouselThumbnailNavigation.propTypes = {
+  /**
+   * An array of objects containing information on the thumbnail images.
+   */
+  thumbnails: _propTypes.default.arrayOf(_propTypes.default.shape({
+    accessibilityLabel: _propTypes.default.string,
+    alt: _propTypes.default.string,
+    src: _propTypes.default.string
+  })).isRequired
+};
+var _default = CarouselThumbnailNavigation;
+exports.default = _default;

package/lib/Carousel/dictionary.js

@@ -10,14 +10,16 @@ var _default = {
     carouselLabel: '%{stepCount} items',
     iconButtonLabel: 'Show %{itemLabel} %{targetStep} of %{stepCount}',
     stepLabel: '%{itemLabel} %{stepNumber}',
-    stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}'
+    stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}',
+    skipLink: 'Skip %{title}'
   },
   fr: {
     // TODO: French translations here
     carouselLabel: '(fr) %{stepCount} items',
     iconButtonLabel: '(fr) Show %{itemLabel} %{targetStep} of %{stepCount}',
     stepLabel: '(fr) %{itemLabel} %{stepNumber}',
-    stepTrackerLabel: '(fr) %{itemLabel} %{stepNumber} of %{stepCount}'
+    stepTrackerLabel: '(fr) %{itemLabel} %{stepNumber} of %{stepCount}',
+    skipLink: '(fr) Skip %{title}'
   }
 };
 exports.default = _default;

package/lib/Carousel/index.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  Carousel: true
+  Carousel: true,
+  CarouselTabs: true
 };
 Object.defineProperty(exports, "Carousel", {
   enumerable: true,
@@ -12,6 +13,12 @@ Object.defineProperty(exports, "Carousel", {
     return _Carousel.default;
   }
 });
+Object.defineProperty(exports, "CarouselTabs", {
+  enumerable: true,
+  get: function () {
+    return _CarouselTabs.default;
+  }
+});
 
 var _CarouselContext = require("./CarouselContext");
 
@@ -29,4 +36,6 @@ Object.keys(_CarouselContext).forEach(function (key) {
 
 var _Carousel = _interopRequireDefault(require("./Carousel"));
 
+var _CarouselTabs = _interopRequireDefault(require("./CarouselTabs"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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;