@telus-uds/components-base 3.29.1 → 4.0.0-alpha.1

package/lib/cjs/Card/PressableCardBase.js

@@ -3,21 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectPressableCardTokens = exports.default = void 0;
+exports.selectPressableCardTokens = exports.PressableCardBase = 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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _CardBase = _interopRequireWildcard(require("./CardBase"));
+var _useViewport = require("../ViewportProvider/useViewport");
+var _styles = require("../ThemeProvider/utils/styles");
+var _themeTokens = require("../ThemeProvider/utils/theme-tokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _clickProps = require("../utils/props/clickProps");
+var _handlerProps = require("../utils/props/handlerProps");
+var _tokens = require("../utils/props/tokens");
+var _linkProps = require("../utils/props/linkProps");
+var _pressability = require("../utils/pressability");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _withLinkRouter = require("../utils/withLinkRouter");
+var _CardBase = require("./CardBase");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _handlerProps.focusHandlerProps, _viewProps.viewProps]);
 const selectFocusOverlayContainerStyles = tokens => {
   const {
     flex,
@@ -96,7 +105,7 @@ const selectPressableCardTokens = tokens => Object.fromEntries(tokenKeys.map(key
  * apps or sites directly: build themed components on top of this.
  */
 exports.selectPressableCardTokens = selectPressableCardTokens;
-const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const PressableCardBaseInner = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,
@@ -114,22 +123,22 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) =>
   const {
     onPress,
     ...rest
-  } = _utils.clickProps.toPressProps(rawRest);
-  const viewport = (0, _ViewportProvider.useViewport)();
+  } = _clickProps.clickProps.toPressProps(rawRest);
+  const viewport = (0, _useViewport.useViewport)();
   const additionalState = {
     checked,
     validation,
     inactive,
     viewport
   };
-  const getCardState = pressableState => (0, _utils.resolvePressableState)(pressableState, additionalState);
-  const getTokens = pressableState => (0, _ThemeProvider.validateThemeTokens)((0, _utils.resolvePressableTokens)(tokens, pressableState, additionalState), (0, _utils.getTokensSetPropType)(tokenKeys, {
+  const getCardState = pressableState => (0, _pressability.resolvePressableState)(pressableState, additionalState);
+  const getTokens = pressableState => (0, _themeTokens.validateThemeTokens)((0, _pressability.resolvePressableTokens)(tokens, pressableState, additionalState), (0, _tokens.getTokensSetPropType)(tokenKeys, {
     partial: true,
     allowFunction: true
   }), 'PressableCard');
   const getCardTokens = pressableState => {
     const allTokens = getTokens(pressableState);
-    const cardTokens = (0, _utils.selectTokens)('Card', allTokens);
+    const cardTokens = (0, _tokens.selectTokens)('Card', allTokens);
 
     // Handle focus border transparency to avoid double borders
     if (pressableState.focused && allTokens.borderWidth > 0) {
@@ -195,7 +204,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) =>
       marginBottom,
       marginLeft,
       marginRight,
-      ...(0, _ThemeProvider.applyOuterBorder)({
+      ...(0, _styles.applyOuterBorder)({
         outerBorderColor,
         outerBorderGap,
         outerBorderWidth,
@@ -203,12 +212,15 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) =>
       }),
       ..._Platform.default.select({
         web: {
-          outline: 'none'
+          outlineStyle: 'none',
+          // Reset default <button> centering behavior when react-native-web renders Pressable as a button
+          alignItems: 'stretch',
+          textAlign: 'inherit'
         }
       })
     };
   };
-  const handleChange = _utils.linkProps.handleHref({
+  const handleChange = _linkProps.linkProps.handleHref({
     href,
     onPress
   });
@@ -259,7 +271,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) =>
         style: staticStyles.linkContainer,
         ...(hrefAttrs || {}),
         role: accessibilityRole,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.CardBase, {
           tokens: getCardTokens({
             pressed,
             focused,
@@ -291,7 +303,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) =>
     children: pressableState => /*#__PURE__*/(0, _jsxRuntime.jsx)(FocusBorderOverlay, {
       tokens: getTokens(pressableState),
       pressableState: pressableState,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.CardBase, {
         tokens: getCardTokens(pressableState),
         backgroundImage: backgroundImage,
         fullBleedContent: fullBleedContent,
@@ -316,7 +328,7 @@ const staticStyles = _StyleSheet.default.create({
     position: 'relative'
   },
   webOutlineNone: {
-    outline: 'none'
+    outlineStyle: 'none'
   },
   focusBorder: {
     position: 'absolute',
@@ -327,15 +339,15 @@ const staticStyles = _StyleSheet.default.create({
     pointerEvents: 'none'
   }
 });
-PressableCardBase.displayName = 'PressableCardBase';
-PressableCardBase.propTypes = {
+PressableCardBaseInner.displayName = 'PressableCardBase';
+PressableCardBaseInner.propTypes = {
   ...selectedSystemPropTypes,
   children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
-  tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {
+  tokens: (0, _tokens.getTokensSetPropType)(tokenKeys, {
     partial: true,
     allowFunction: true
   }),
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   backgroundImage: _propTypes.default.shape({
     // The image src is either a URI string or a number (when a local image src is bundled in IOS or Android app)
     // src is an object when used responsively to provide different image sources for different screen sizes
@@ -347,4 +359,4 @@ PressableCardBase.propTypes = {
   }),
   fullBleedContent: _CardBase.fullBleedContentPropTypes
 };
-var _default = exports.default = (0, _utils.withLinkRouter)(PressableCardBase);
+const PressableCardBase = exports.PressableCardBase = (0, _withLinkRouter.withLinkRouter)(PressableCardBaseInner);

package/lib/cjs/Card/backgroundImageStylesMap.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.backgroundImageStylesMap = void 0;
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const webStyles = {
@@ -194,4 +194,4 @@ const nativeStyles = {
     width: '100%'
   }
 };
-var _default = exports.default = _Platform.default.OS === 'web' ? webStyles : nativeStyles;
+const backgroundImageStylesMap = exports.backgroundImageStylesMap = _Platform.default.OS === 'web' ? webStyles : nativeStyles;

package/lib/cjs/CardGroup/CardGroup.js

@@ -3,23 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CardGroup = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../utils");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _StackView = _interopRequireWildcard(require("../StackView"));
-var _Card = _interopRequireDefault(require("../Card"));
-var _Fieldset = _interopRequireDefault(require("../Fieldset"));
+var _a11yProps = require("../utils/props/a11yProps");
+var _handlerProps = require("../utils/props/handlerProps");
+var _containUniqueFields = require("../utils/containUniqueFields");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _input = require("../utils/input");
+var _useCopy = require("../utils/useCopy");
+var _viewProps = require("../utils/props/viewProps");
+var _variantProp = require("../utils/props/variantProp");
+var _tokens = require("../utils/props/tokens");
+var _copyPropTypes = require("../utils/props/copyPropTypes");
+var _dictionary = require("./dictionary");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _StackView = require("../StackView/StackView");
+var _StackWrap = require("../StackView/StackWrap");
+var _Card = require("../Card/Card");
+var _Fieldset = require("../Fieldset/Fieldset");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
-const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
+const [selectItemProps, selectedItemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _handlerProps.focusHandlerProps, _viewProps.viewProps]);
 const uniqueFields = ['id'];
-const CardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const CardGroup = exports.CardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     copy = 'en',
     tokens = {},
@@ -33,15 +42,15 @@ const CardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     role = 'radiogroup',
     isInactive,
     name: inputGroupName,
-    dictionary = _dictionary.default,
+    dictionary = _dictionary.dictionary,
     ...rest
   } = _ref;
-  const getCopy = (0, _utils.useCopy)({
+  const getCopy = (0, _useCopy.useCopy)({
     dictionary,
     copy
   });
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const cardGroupTokens = (0, _ThemeProvider.useThemeTokens)('CardGroup', tokens, variant, {
+  const viewport = (0, _useViewport.useViewport)();
+  const cardGroupTokens = (0, _useThemeTokens.useThemeTokens)('CardGroup', tokens, variant, {
     viewport
   });
   const {
@@ -75,10 +84,10 @@ const CardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     onChange,
     readOnly: isInactive
   };
-  const singleInputValue = (0, _utils.useInputValue)(inputControl);
-  const multipleInputValues = (0, _utils.useMultipleInputValues)(inputControl);
-  const StackContainer = direction === 'row' ? _StackView.StackWrap : _StackView.default;
-  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+  const singleInputValue = (0, _input.useInputValue)(inputControl);
+  const multipleInputValues = (0, _input.useMultipleInputValues)(inputControl);
+  const StackContainer = direction === 'row' ? _StackWrap.StackWrap : _StackView.StackView;
+  if (!(0, _containUniqueFields.containUniqueFields)(items, uniqueFields)) {
     throw new Error(`CardGroup items must have unique ${uniqueFields.join(', ')}`);
   }
   const handleChange = _react.default.useCallback((checked, event, cardId, itemOnChange) => {
@@ -89,7 +98,7 @@ const CardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }
     return itemOnChange?.(checked, event);
   }, [singleInputValue, multipleInputValues, singleSelection]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.Fieldset, {
     copy: copy,
     ref: ref,
     name: inputGroupName,
@@ -114,7 +123,7 @@ const CardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         } = _ref2;
         const cardId = id || `${getCopy('prefixId')}[${index}]`;
         const itemHandleChange = (checked, event) => handleChange(checked, event, cardId, itemOnChange);
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.Card, {
           id: cardId,
           onPress: itemHandleChange,
           interactiveCard: {
@@ -147,7 +156,7 @@ const dictionaryContentShape = _propTypes.default.shape({
 });
 CardGroup.propTypes = {
   ...selectedSystemPropTypes,
-  copy: _utils.copyPropTypes,
+  copy: _copyPropTypes.copyPropTypes,
   /**
    * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
    */
@@ -158,11 +167,11 @@ CardGroup.propTypes = {
   /**
    * Optional theme token overrides for the outer RadioCardGroup component
    */
-  tokens: (0, _utils.getTokensPropType)('CardGroup'),
+  tokens: (0, _tokens.getTokensPropType)('CardGroup'),
   /**
    * Theme variants, shared between both RadioCardGroup and RadioCard
    */
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   /**
    * Array of objects containing specifics for each Card to be rendered in the group.
    */
@@ -214,5 +223,4 @@ CardGroup.propTypes = {
    * On Web, this is passed to the `name` attribute of the fieldset and each input.
    */
   name: _propTypes.default.string
-};
-var _default = exports.default = CardGroup;
+};

package/lib/cjs/CardGroup/dictionary.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _default = exports.default = {
+exports.dictionary = void 0;
+const dictionary = exports.dictionary = {
   en: {
     prefixId: 'Card'
   },

package/lib/cjs/Carousel/Carousel.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Carousel = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
@@ -13,21 +13,31 @@ var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/export
 var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
 var _Easing = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Easing"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _ViewportProvider = require("../ViewportProvider");
-var _utils = require("../utils");
-var _A11yInfoProvider = require("../A11yInfoProvider");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _tokens = require("../utils/props/tokens");
+var _semantics = require("../utils/a11y/semantics");
+var _variantProp = require("../utils/props/variantProp");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _a11yProps = require("../utils/props/a11yProps");
+var _viewProps = require("../utils/props/viewProps");
+var _useCopy = require("../utils/useCopy");
+var _children = require("../utils/children");
+var _isTouchDevice = require("../utils/isTouchDevice");
+var _useResponsiveProp = require("../utils/useResponsiveProp");
+var _resolveContentMaxWidth = require("../utils/resolveContentMaxWidth");
+var _A11yInfoProvider = require("../A11yInfoProvider/A11yInfoProvider");
 var _CarouselContext = require("./CarouselContext");
-var _CarouselItem = _interopRequireDefault(require("./CarouselItem"));
-var _IconButton = _interopRequireDefault(require("../IconButton"));
-var _SkipLink = _interopRequireDefault(require("../SkipLink"));
-var _A11yText = _interopRequireDefault(require("../A11yText"));
-var _CarouselStepTracker = _interopRequireDefault(require("./CarouselStepTracker"));
-var _CarouselThumbnailNavigation = _interopRequireDefault(require("./CarouselThumbnailNavigation"));
-var _CarouselTabsPanel = _interopRequireDefault(require("./CarouselTabs/CarouselTabsPanel"));
-var _CarouselTabsPanelItem = _interopRequireDefault(require("./CarouselTabs/CarouselTabsPanelItem"));
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _Box = _interopRequireDefault(require("../Box"));
+var _IconButton = require("../IconButton/IconButton");
+var _SkipLink = require("../SkipLink/SkipLink");
+var _A11yText = require("../A11yText/A11yText");
+var _CarouselStepTracker = require("./CarouselStepTracker/CarouselStepTracker");
+var _CarouselThumbnailNavigation = require("./CarouselThumbnailNavigation");
+var _CarouselTabsPanel = require("./CarouselTabs/CarouselTabsPanel");
+var _CarouselTabsPanelItem = require("./CarouselTabs/CarouselTabsPanelItem");
+var _dictionary = require("./dictionary");
+var _Box = require("../Box/Box");
 var _Constants = require("./Constants");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -293,14 +303,14 @@ const selectIconStyles = _ref2 => {
     backgroundColor: iconBackgroundColor
   };
 };
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 
 /**
  * Carousel is a general-purpose content slider that can be used to render content in terms of slides.
 
   ## Usage
   - `Carousel` is a top-level export from `@telus-uds/components-base` which is used to render a Carousel
-  - Immediately within `Carousel`, individual slides are wrapped in `Carousel.Item` for the top-level `Carousel` to know how to identify an individual slide
+  - Immediately within `Carousel`, individual slides are wrapped in `CarouselItem` for the top-level `Carousel` to know how to identify an individual slide
   - You can use any UDS component or other platform-specific component, (based on the platform you're rendering) to achieve any desired layout
   - By default, Carousel takea all the `width` available to it and the `height` is determined based on the content in the slide with more content
   - You may want to wrap Carousel in other layout components like `Box`, `FlexGrid` etc, to achieve a responsive layout of your need
@@ -329,7 +339,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
 
   ## Accessibility
 
-  - Top-level `Carousel` and `Carousel.Item` can take all possible React Native's `View` and `a11y` props
+  - Top-level `Carousel` and `CarouselItem` can take all possible React Native's `View` and `a11y` props
   - If your slide contains input elements like buttons, you may want to configure them to be only focusable when `activeIndex` is equal to the current slide index in order to avoid tabbing going between slides
 
   ## Platform considerations
@@ -349,7 +359,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
   - `spaceBetweenSlideAndPreviousNextNavigation` - Horizontal space between slide and previous/next navigational buttons
   - `spaceBetweenSlideAndPanelNavigation` - Vertical space between slide area and panel navigation area
  */
-const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const Carousel = exports.Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant,
@@ -374,9 +384,9 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     thumbnails = undefined,
     enableDisplayMultipleItemsPerSlide = false,
     enableHero = false,
-    panelNavigation = thumbnails ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselThumbnailNavigation.default, {
+    panelNavigation = thumbnails ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselThumbnailNavigation.CarouselThumbnailNavigation, {
       thumbnails: thumbnails
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselStepTracker.default, {
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselStepTracker.CarouselStepTracker, {
       stepTrackerVariant: stepTrackerVariant,
       progressBarVariant: progressBarVariant,
       enableDisplayMultipleItemsPerSlide: enableDisplayMultipleItemsPerSlide
@@ -396,29 +406,29 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     swipeReleaseDuration = _Constants.DEFAULT_SWIPE_RELEASE_DURATION,
     ...rest
   } = _ref3;
-  let childrenArray = (0, _utils.unpackFragment)(children);
+  let childrenArray = (0, _children.unpackFragment)(children);
   const isTransitioningRef = _react.default.useRef(false);
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
-  const contentMaxWidthValue = (0, _utils.useResponsiveProp)(contentMaxWidth);
-  const responsiveWidth = (0, _utils.useResponsiveProp)(themeOptions?.contentMaxWidth);
+  } = (0, _useTheme.useTheme)();
+  const contentMaxWidthValue = (0, _useResponsiveProp.useResponsiveProp)(contentMaxWidth);
+  const responsiveWidth = (0, _useResponsiveProp.useResponsiveProp)(themeOptions?.contentMaxWidth);
   let maxWidth = null;
   if (enablePeeking || contentMaxWidth !== undefined) {
-    maxWidth = contentMaxWidthValue === undefined ? responsiveWidth : (0, _utils.resolveContentMaxWidth)(contentMaxWidthValue, responsiveWidth);
+    maxWidth = contentMaxWidthValue === undefined ? responsiveWidth : (0, _resolveContentMaxWidth.resolveContentMaxWidth)(contentMaxWidthValue, responsiveWidth);
   }
   const totalItems = getTotalItems(enableDisplayMultipleItemsPerSlide, childrenArray, viewport);
   const autoPlayFeatureEnabled = autoPlay && slideDuration > 0 && transitionDuration > 0 && totalItems > 1;
-  // if `Carousel` only has one `Carousel.Item`, convert this to a single-item array
+  // if `Carousel` only has one `CarouselItem`, convert this to a single-item array
   if (!Array.isArray(childrenArray)) {
     childrenArray = [childrenArray];
   }
-  const getCopy = (0, _utils.useCopy)({
-    dictionary: _dictionary.default,
+  const getCopy = (0, _useCopy.useCopy)({
+    dictionary: _dictionary.dictionary,
     copy
   });
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Carousel', tokens, variant, {
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('Carousel', tokens, variant, {
     viewport
   });
   const {
@@ -821,7 +831,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       return false;
     }
     if (_Platform.default.OS === 'web') {
-      return !!(viewport === 'xs' || viewport === 'sm' || viewport === 'md' && (0, _utils.isTouchDevice)());
+      return !!(viewport === 'xs' || viewport === 'sm' || viewport === 'md' && (0, _isTouchDevice.isTouchDevice)());
     }
     return true;
   }, [viewport, totalItems]);
@@ -932,7 +942,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     // First word might be a lowercase placeholder: capitalize the first letter
     return `${copyText[0].toUpperCase()}${copyText.slice(1)}`;
   }, [activeIndex, itemLabel, getCopy, title, totalItems]);
-  const activePanelNavigation = tabs && showPanelTabs ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselTabsPanel.default, {
+  const activePanelNavigation = tabs && showPanelTabs ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselTabsPanel.CarouselTabsPanel, {
     items: tabs
   }) : panelNavigation;
   const isFirstFocusContainer = Boolean(refocus && !skipLinkHref);
@@ -1023,7 +1033,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
               maxWidth,
               containerWidth: containerLayout.width
             })],
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
               icon: isCarouselPlaying ? pauseIcon : playIcon,
               accessibilityLabel: isCarouselPlaying ? getCopy('pauseButtonLabel') : getCopy('playButtonLabel'),
               variant: previousNextIconButtonVariants,
@@ -1032,7 +1042,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           }) : null, showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
             style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, containerLayout.width),
             testID: "previous-button-container",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
               onLayout: onPreviousNextNavigationButtonLayout,
               icon: previousIcon,
               onPress: goToPrev,
@@ -1040,11 +1050,11 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
               accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex),
               tokens: selectIconStyles(themeTokens)
             })
-          }) : null, Boolean(skipLinkHref) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkipLink.default, {
+          }) : null, Boolean(skipLinkHref) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkipLink.SkipLink, {
             ref: firstFocusRef,
             href: skipLinkHref,
             children: getCopyWithPlaceholders('skipLink')
-          }), !isFirstFocusContainer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yText.default
+          }), !isFirstFocusContainer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yText.A11yText
           // Read the current slide position to screen readers on slide.
           // If it's set to refocus and doesn't have a SkipLink to focus to, focus this.
           , {
@@ -1061,7 +1071,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
                 }]
               }]),
               ...panResponder.panHandlers,
-              ...(0, _utils.getA11yPropsFromHtmlTag)(tag),
+              ...(0, _semantics.getA11yPropsFromHtmlTag)(tag),
               // In iframes on Mac (e.g. in Storybook), this content may be misread or read twice.
               // This is a known Voiceover bug: https://github.com/phetsims/a11y-research/issues/132
               accessibilityLiveRegion: accessibilityLiveRegion,
@@ -1092,7 +1102,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           }), showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
             style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, containerLayout.width),
             testID: "next-button-container",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
               onLayout: onPreviousNextNavigationButtonLayout,
               icon: nextIcon,
               onPress: goToNext,
@@ -1118,13 +1128,13 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         }]),
         onLayout: onHeroContainerLayout,
         ...heroPanResponder.panHandlers,
-        ...(0, _utils.getA11yPropsFromHtmlTag)(tag),
+        ...(0, _semantics.getA11yPropsFromHtmlTag)(tag),
         accessibilityLiveRegion: accessibilityLiveRegion,
         children: childrenArray.map((element, index) => {
           const hidden = !isAnimating && index !== activeIndex;
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
             style: selectHeroContainerStyles(heroContainerLayout.width, hidden),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.Box, {
               flex: 1,
               variant: {
                 background: element.props.backgroundColor
@@ -1138,18 +1148,18 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
 });
 Carousel.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('Carousel'),
-  variant: _utils.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('Carousel'),
+  variant: _variantProp.variantProp.propType,
   /**
    * Prop related to StepTracker Variants
    */
-  stepTrackerVariant: _utils.variantProp.propType,
+  stepTrackerVariant: _variantProp.variantProp.propType,
   /**
    * Prop related to ProgressBar Variants
    */
-  progressBarVariant: _utils.variantProp.propType,
+  progressBarVariant: _variantProp.variantProp.propType,
   /**
-   * Slides to render in Carousel. Wrap individual slides in `Carousel.Item`
+   * Slides to render in Carousel. Wrap individual slides in `CarouselItem`
    */
   children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired,
   /**
@@ -1177,9 +1187,14 @@ Carousel.propTypes = {
    * An array of objects containing information on the thumbnails to be rendered as navigation panel
    */
   thumbnails: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /** Accessibility label for the thumbnail image, used by assistive technologies. */
     accessibilityLabel: _propTypes.default.string,
+    /** Alternative text for the thumbnail image, displayed when the image cannot be rendered. */
     alt: _propTypes.default.string,
-    src: _propTypes.default.string
+    /** When true, renders a play icon overlay on the thumbnail to indicate that the slide contains a video. */
+    isVideo: _propTypes.default.bool,
+    /** URL or path of the thumbnail image. When used with `isVideo`, this should be the video's poster/preview image. */
+    src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
   })),
   /**
    * Minimal part of slide width must be swiped for changing index.
@@ -1201,7 +1216,7 @@ Carousel.propTypes = {
    *    <Carousel
    *      onIndexChanged={onIndexChangedCallback}
    *    >
-   *      <Carousel.Item>First Slide</Carousel.Item>
+   *      <CarouselItem>First Slide</CarouselItem>
    *    </Carousel>
    * ```
    * Caution: Always consider wrapping your callback for `onIndexChanged` in `React.useCallback` in order to avoid bugs and performance issues
@@ -1217,7 +1232,7 @@ Carousel.propTypes = {
    *
    * Be careful to ensure that the order of each element in the items array matches the order of each child in the Carousel.
    */
-  tabs: _propTypes.default.arrayOf(_propTypes.default.shape(_CarouselTabsPanelItem.default.propTypes || {})),
+  tabs: _propTypes.default.arrayOf(_propTypes.default.shape(_CarouselTabsPanelItem.CarouselTabsPanelItem.propTypes || {})),
   /**
    * If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.
    *
@@ -1236,7 +1251,7 @@ Carousel.propTypes = {
    *    <Carousel
    *      panelNavigation={<CustomPanelNavigation />}
    *    >
-   *      <Carousel.Item>First Slide</Carousel.Item>
+   *      <CarouselItem>First Slide</CarouselItem>
    *    </Carousel>
    * ```
    */
@@ -1252,7 +1267,7 @@ Carousel.propTypes = {
    *    <Carousel
    *      onAnimationStart={onAnimationStartCallback}
    *    >
-   *      <Carousel.Item>First Slide</Carousel.Item>
+   *      <CarouselItem>First Slide</CarouselItem>
    *    </Carousel>
    * ```
    * Caution: Always consider wrapping your callback for `onAnimationStart` in `React.useCallback` in order to avoid bugs and performance issues
@@ -1269,7 +1284,7 @@ Carousel.propTypes = {
    *    <Carousel
    *      onAnimationEnd={onAnimationEndCallback}
    *    >
-   *      <Carousel.Item>First Slide</Carousel.Item>
+   *      <CarouselItem>First Slide</CarouselItem>
    *    </Carousel>
    * ```
    * Caution: Always consider wrapping your callback for `onAnimationEnd` in `React.useCallback` in order to avoid bugs and performance issues
@@ -1301,7 +1316,7 @@ Carousel.propTypes = {
    * Note that if the immediate Carousel children do not all render as `'li'` elements,
    * this should be changed (e.g. pass tag="div") because only 'li' is a valid child of 'ul'.
    */
-  tag: _propTypes.default.oneOf(_utils.layoutTags),
+  tag: _propTypes.default.oneOf(_semantics.layoutTags),
   /**
    * If set to `true`, the Carousel will automatically transition between slides
    * and show the play/pause button
@@ -1371,6 +1386,4 @@ Carousel.propTypes = {
    */
   swipeReleaseDuration: _propTypes.default.number
 };
-Carousel.Item = _CarouselItem.default;
-Carousel.displayName = 'Carousel';
-var _default = exports.default = Carousel;
+Carousel.displayName = 'Carousel';