@telus-uds/components-base 3.28.2 → 4.0.0-alpha.0

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 {
@@ -768,7 +778,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       height
     }));
   };
-  const onHeroContainerLayout = _ref10 => {
+  const onHeroContainerLayout = _ref0 => {
     let {
       nativeEvent: {
         layout: {
@@ -778,7 +788,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           height
         }
       }
-    } = _ref10;
+    } = _ref0;
     return setHeroContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -787,17 +797,17 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       height
     }));
   };
-  const onPreviousNextNavigationButtonLayout = _ref11 => {
+  const onPreviousNextNavigationButtonLayout = _ref1 => {
     let {
       nativeEvent: {
         layout: {
           width
         }
       }
-    } = _ref11;
+    } = _ref1;
     return setPreviousNextNavigationButtonWidth(width);
   };
-  const onRootContainerLayout = _ref12 => {
+  const onRootContainerLayout = _ref10 => {
     let {
       nativeEvent: {
         layout: {
@@ -807,7 +817,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           height
         }
       }
-    } = _ref12;
+    } = _ref10;
     return setRootContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -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,
   /**
@@ -1201,7 +1211,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 +1227,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 +1246,7 @@ Carousel.propTypes = {
    *    <Carousel
    *      panelNavigation={<CustomPanelNavigation />}
    *    >
-   *      <Carousel.Item>First Slide</Carousel.Item>
+   *      <CarouselItem>First Slide</CarouselItem>
    *    </Carousel>
    * ```
    */
@@ -1252,7 +1262,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 +1279,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 +1311,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 +1381,4 @@ Carousel.propTypes = {
    */
   swipeReleaseDuration: _propTypes.default.number
 };
-Carousel.Item = _CarouselItem.default;
-Carousel.displayName = 'Carousel';
-var _default = exports.default = Carousel;
+Carousel.displayName = 'Carousel';

package/lib/cjs/Carousel/CarouselContext.js

@@ -7,7 +7,7 @@ exports.CarouselProvider = void 0;
 exports.useCarousel = useCarousel;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../utils");
+var _tokens = require("../utils/props/tokens");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const CarouselContext = /*#__PURE__*/_react.default.createContext();
@@ -59,7 +59,7 @@ CarouselProvider.propTypes = {
   getCopyWithPlaceholders: _propTypes.default.func.isRequired,
   itemLabel: _propTypes.default.string.isRequired,
   refocus: _propTypes.default.bool,
-  themeTokens: (0, _utils.getTokensPropType)('Carousel'),
+  themeTokens: (0, _tokens.getTokensPropType)('Carousel'),
   totalItems: _propTypes.default.number.isRequired,
   width: _propTypes.default.number.isRequired,
   maximumItemsForSlide: _propTypes.default.number,

package/lib/cjs/Carousel/CarouselFirstFocus/CarouselFirstFocus.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CarouselFirstFocus = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
@@ -17,7 +17,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * its content using the keyboard.
  *
  * @TODO rework this after integrating with SkipLink when available.
- */const CarouselFirstFocus = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const CarouselFirstFocus = exports.CarouselFirstFocus = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     title
   } = _ref;
@@ -53,5 +54,4 @@ CarouselFirstFocus.propTypes = {
    * For example, "Summer offers" in "Summer offers, offer 1 of 3"
    */
   title: _propTypes.PropTypes.string
-};
-var _default = exports.default = CarouselFirstFocus;
+};

package/lib/cjs/Carousel/CarouselItem/CarouselItem.js

@@ -3,17 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CarouselItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _utils = require("../../utils");
+var _semantics = require("../../utils/a11y/semantics");
+var _selectSystemProps = require("../../utils/props/selectSystemProps");
+var _a11yProps = require("../../utils/props/a11yProps");
+var _viewProps = require("../../utils/props/viewProps");
+var _variantProp = require("../../utils/props/variantProp");
 var _CarouselContext = require("../CarouselContext");
 var _Constants = require("../Constants");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const selectContainerStyle = _ref => {
   let {
     width,
@@ -76,10 +80,10 @@ const selectContainerStyle = _ref => {
 };
 
 /**
- * `Carousel.Item` is used to wrap the content of an individual slide and is suppsoed to be the
+ * `CarouselItem` 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 CarouselItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const CarouselItem = exports.CarouselItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     elementIndex,
@@ -102,9 +106,9 @@ const CarouselItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   } = (0, _CarouselContext.useCarousel)();
   const selectedProps = selectProps({
     ...rest,
-    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, rest.accessibilityRole)
+    ...(0, _semantics.getA11yPropsFromHtmlTag)(tag, rest.accessibilityRole)
   });
-  const focusabilityProps = activeIndex === elementIndex || enablePeeking ? {} : _utils.a11yProps.nonFocusableProps;
+  const focusabilityProps = activeIndex === elementIndex || enablePeeking ? {} : _a11yProps.a11yProps.nonFocusableProps;
   const handleFocus = _react.default.useCallback(event => {
     if (_Platform.default.OS === 'web') {
       if (enablePeeking) {
@@ -154,10 +158,10 @@ const CarouselItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 });
 CarouselItem.propTypes = {
   ...selectedSystemPropTypes,
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   /**
    * Index of the current slide
-   * Don't pass this prop when using `Carousel.Item` as it is already being passed by `Carousel` top-level component
+   * Don't pass this prop when using `CarouselItem` as it is already being passed by `Carousel` top-level component
    */
   elementIndex: _propTypes.default.number,
   /**
@@ -173,9 +177,9 @@ CarouselItem.propTypes = {
    * the Carousel as a list of items.
    *
    * Carousel's innermost container defaults to `'ul'` which can be overridden. If the tag of either
-   * `Carousel` or `Carousel.Item` is overriden, the other should be too, to avoid producing invalid HTML.
+   * `Carousel` or `CarouselItem` is overriden, the other should be too, to avoid producing invalid HTML.
    */
-  tag: _propTypes.default.oneOf(_utils.layoutTags),
+  tag: _propTypes.default.oneOf(_semantics.layoutTags),
   /**
    * Function to set carousel content background color when slide is being display
    */
@@ -200,5 +204,4 @@ CarouselItem.propTypes = {
    */
   backgroundColor: _propTypes.default.string
 };
-CarouselItem.displayName = 'Carousel.Item';
-var _default = exports.default = CarouselItem;
+CarouselItem.displayName = 'CarouselItem';

package/lib/cjs/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -3,20 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CarouselStepTracker = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _CarouselContext = require("../CarouselContext");
-var _StepTracker = _interopRequireDefault(require("../../StepTracker"));
-var _StackView = _interopRequireDefault(require("../../StackView"));
-var _Spacer = _interopRequireDefault(require("../../Spacer"));
-var _Progress = _interopRequireDefault(require("../../Progress"));
-var _utils = require("../../utils");
+var _StepTracker = require("../../StepTracker/StepTracker");
+var _StackView = require("../../StackView/StackView");
+var _Spacer = require("../../Spacer/Spacer");
+var _Progress = require("../../Progress/Progress");
+var _ProgressBar = require("../../Progress/ProgressBar");
+var _variantProp = require("../../utils/props/variantProp");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const CarouselStepTracker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const CarouselStepTracker = exports.CarouselStepTracker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     stepTrackerVariant,
     progressBarVariant,
@@ -50,16 +51,16 @@ const CarouselStepTracker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =
       return null;
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.Spacer, {
         space: 4
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackView, {
         direction: "row",
         tokens: stackViewTokens,
         ref: ref,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: staticStyles.progress,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Progress.default, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Progress.default.Bar, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Progress.Progress, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar.ProgressBar, {
               offset: {
                 items: totalItems,
                 current: activeIndex + 1
@@ -75,11 +76,11 @@ const CarouselStepTracker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =
   if (enableDisplayMultipleItemsPerSlide && totalItems === 1) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackView, {
     direction: "row",
     tokens: stackViewTokens,
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepTracker.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepTracker.StepTracker, {
       current: activeIndex,
       steps: steps,
       copy: {
@@ -93,13 +94,12 @@ const CarouselStepTracker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =
 });
 CarouselStepTracker.displayName = 'CarouselStepTracker';
 CarouselStepTracker.propTypes = {
-  stepTrackerVariant: _utils.variantProp.propType,
-  progressBarVariant: _utils.variantProp.propType,
+  stepTrackerVariant: _variantProp.variantProp.propType,
+  progressBarVariant: _variantProp.variantProp.propType,
   enableDisplayMultipleItemsPerSlide: _propTypes.default.bool
 };
 const staticStyles = _StyleSheet.default.create({
   progress: {
     width: 288
   }
-});
-var _default = exports.default = CarouselStepTracker;
+});

package/lib/cjs/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -3,19 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CarouselTabsPanel = void 0;
 var _react = _interopRequireDefault(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 _StackView = require("../../StackView/StackView");
 var _CarouselContext = require("../CarouselContext");
-var _CarouselTabsPanelItem = _interopRequireDefault(require("./CarouselTabsPanelItem"));
+var _CarouselTabsPanelItem = require("./CarouselTabsPanelItem");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const selectTabPanelStyle = () => ({
   backgroundColor: 'transparent'
 });
-const CarouselTabsPanel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const CarouselTabsPanel = exports.CarouselTabsPanel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     items
   } = _ref;
@@ -43,7 +43,7 @@ const CarouselTabsPanel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: selectTabPanelStyle(),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackView, {
       direction: "row",
       space: 3,
       divider: {
@@ -68,7 +68,7 @@ const CarouselTabsPanel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
           if (typeof onPress === 'function') onPress(event, index);
           goTo(index);
         };
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselTabsPanelItem.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselTabsPanelItem.CarouselTabsPanelItem, {
           ref: isNext && nextFocusRef || index === 0 && firstTabRef || null,
           title: title,
           selected: selected,
@@ -88,8 +88,7 @@ const CarouselTabsPanel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
 });
 CarouselTabsPanel.displayName = 'CarouselTabsPanel';
 CarouselTabsPanel.propTypes = {
-  items: _propTypes.default.arrayOf(_propTypes.default.shape(_CarouselTabsPanelItem.default.propTypes || {})),
-  // Color defined by `Carousel.item` variant otherwise fallback to transparent
+  items: _propTypes.default.arrayOf(_propTypes.default.shape(_CarouselTabsPanelItem.CarouselTabsPanelItem.propTypes || {})),
+  // Color defined by `CarouselItem` variant otherwise fallback to transparent
   contentBackgroundColor: _propTypes.default.string
-};
-var _default = exports.default = CarouselTabsPanel;
+};