@telus-uds/components-base 2.5.0 → 3.0.0

package/lib/{Carousel → esm/Carousel}/Carousel.js

@@ -20,7 +20,7 @@ import CarouselThumbnailNavigation from './CarouselThumbnailNavigation';
 import CarouselTabsPanel from './CarouselTabs/CarouselTabsPanel';
 import CarouselTabsPanelItem from './CarouselTabs/CarouselTabsPanelItem';
 import dictionary from './dictionary';
-import { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL } from './Constants';
+import { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, DEFAULT_POSITION_OFFSET, HERO_POSITION_OFFSET, LARGE_VIEWPORT_MARGIN, DEFAULT_VIEWPORT_MARGIN } from './Constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TRANSITION_MODES = {
   MANUAL: 'manual',
@@ -34,7 +34,12 @@ const staticStyles = StyleSheet.create({
     alignItems: 'center',
     position: 'relative',
     top: 0,
-    left: 0
+    left: 0,
+    ...Platform.select({
+      web: {
+        outline: 'none'
+      }
+    })
   },
   animationControlButton: {
     position: 'absolute',
@@ -61,13 +66,19 @@ const selectControlButtonPositionStyles = _ref => {
     positionProperty = getDynamicPositionProperty(),
     spaceBetweenSlideAndButton,
     enablePeeking,
-    enableDisplayMultipleItemsPerSlide
+    enableDisplayMultipleItemsPerSlide,
+    enableHero,
+    viewport
   } = _ref;
   const styles = {};
   if (positionVariant === 'edge') {
     styles[positionProperty] = -1 * (buttonWidth / 2);
   } else if (positionVariant === 'inside') {
-    styles[positionProperty] = 0;
+    if (enableHero && viewport === 'xl') {
+      styles[positionProperty] = HERO_POSITION_OFFSET;
+    } else {
+      styles[positionProperty] = DEFAULT_POSITION_OFFSET;
+    }
   } else if (positionVariant === 'outside') {
     if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
       styles[positionProperty] = 0;
@@ -77,7 +88,7 @@ const selectControlButtonPositionStyles = _ref => {
   }
   return styles;
 };
-const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking, enableDisplayMultipleItemsPerSlide) => {
+const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking, enableDisplayMultipleItemsPerSlide, enableHero, viewport) => {
   const styles = {
     zIndex: 1,
     position: 'absolute'
@@ -97,7 +108,9 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
       positionProperty: getDynamicPositionProperty(areStylesAppliedOnPreviousButton),
       spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
       enablePeeking,
-      enableDisplayMultipleItemsPerSlide
+      enableDisplayMultipleItemsPerSlide,
+      enableHero,
+      viewport
     })
   };
 };
@@ -138,6 +151,35 @@ const getTotalItems = (enableDisplayMultipleItemsPerSlide, childrenArray, viewpo
   }
   return childrenArray.length;
 };
+const selectRootContainerStyles = (enableHero, viewport) => {
+  if (enableHero && viewport === 'xl' && Platform.OS === 'web') {
+    return {
+      alignItems: 'center'
+    };
+  }
+  return {};
+};
+const selectMainContainerStyles = (enableHero, viewport) => {
+  if (enableHero && viewport === 'xl' && Platform.OS === 'web') {
+    return {
+      width: '100%',
+      maxWidth: 1200
+    };
+  }
+  return {};
+};
+const selectNavigationStyles = (tabs, tabsPanelHeight, enableHero, viewport) => {
+  let marginTop = 0;
+  let marginHorizontal = 0;
+  if (enableHero && tabs) {
+    marginTop = -tabsPanelHeight;
+    marginHorizontal = viewport === 'xl' ? LARGE_VIEWPORT_MARGIN : DEFAULT_VIEWPORT_MARGIN;
+  }
+  return {
+    marginTop,
+    marginHorizontal
+  };
+};
 
 /**
  * Calculates the final width of the carousel container for displacement purposes based on various conditions.
@@ -279,6 +321,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     springConfig = undefined,
     thumbnails = undefined,
     enableDisplayMultipleItemsPerSlide = false,
+    enableHero = false,
     panelNavigation = thumbnails ? /*#__PURE__*/_jsx(CarouselThumbnailNavigation, {
       thumbnails: thumbnails
     }) : /*#__PURE__*/_jsx(CarouselStepTracker, {
@@ -330,7 +373,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const [containerLayout, setContainerLayout] = React.useState({
     x: 0,
     y: 0,
-    width: 0
+    width: 0,
+    height: 0
   });
   const containerLayoutRef = React.useRef(containerLayout);
   const [previousNextNavigationButtonWidth, setPreviousNextNavigationButtonWidth] = React.useState(0);
@@ -483,6 +527,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     let transitionMode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TRANSITION_MODES.MANUAL;
     fixOffsetAndGo(toPrev ? -1 : 1, transitionMode);
   }, [fixOffsetAndGo]);
+  const [tabsPanelHeight, setTabsPanelHeight] = React.useState(0);
   React.useEffect(() => {
     activeIndexRef.current = activeIndex;
   }, [activeIndex]);
@@ -534,13 +579,17 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       stopAutoplay();
     };
   }, [stopAutoplay]);
+  const onTabsPanelLayout = event => {
+    setTabsPanelHeight(event.nativeEvent.layout.height);
+  };
   const onContainerLayout = _ref6 => {
     let {
       nativeEvent: {
         layout: {
           x,
           y,
-          width
+          width,
+          height
         }
       }
     } = _ref6;
@@ -548,7 +597,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       ...prevState,
       x,
       y,
-      width
+      width,
+      height
     }));
   };
   const onPreviousNextNavigationButtonLayout = _ref7 => {
@@ -680,107 +730,116 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }
     setisCarouselPlaying(prevState => !prevState);
   }, [isCarouselPlaying, stopAutoplay, startAutoplay]);
-  return /*#__PURE__*/_jsxs(CarouselProvider, {
-    activeIndex: activeIndex,
-    goTo: goTo,
-    getCopyWithPlaceholders: getCopyWithPlaceholders,
-    itemLabel: itemLabel,
-    totalItems: totalItems,
-    themeTokens: themeTokens,
-    firstFocusRef: firstFocusRef,
-    refocus: refocus,
-    width: containerLayout.width,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: [staticStyles.root, {
-        ...Platform.select({
-          web: {
-            outline: 'none'
-          }
-        })
-      }],
-      onLayout: onContainerLayout,
-      ref: ref,
-      ...systemProps,
-      ...containerProps,
-      children: [isAutoPlayEnabled ? /*#__PURE__*/_jsx(View, {
-        style: [staticStyles.animationControlButton, selectControlButtonPositionStyles({
-          positionVariant: previousNextNavigationPosition,
-          buttonWidth: previousNextNavigationButtonWidth,
-          positionProperty: getDynamicPositionProperty(),
-          spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
-          enablePeeking,
-          enableDisplayMultipleItemsPerSlide
-        })],
-        children: /*#__PURE__*/_jsx(IconButton, {
-          icon: isCarouselPlaying ? pauseIcon : playIcon,
-          accessibilityLabel: isCarouselPlaying ? getCopy('pauseButtonLabel') : getCopy('playButtonLabel'),
-          variant: previousNextIconButtonVariants,
-          onPress: onAnimationControlButtonPress
-        })
-      }) : null, showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
-        style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking, enableDisplayMultipleItemsPerSlide),
-        testID: "previous-button-container",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onLayout: onPreviousNextNavigationButtonLayout,
-          icon: previousIcon,
-          onPress: goToPrev,
-          variant: previousNextIconButtonVariants,
-          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex),
-          tokens: selectIconStyles(themeTokens)
-        })
-      }) : null, Boolean(skipLinkHref) && /*#__PURE__*/_jsx(SkipLink, {
-        ref: firstFocusRef,
-        href: skipLinkHref,
-        children: getCopyWithPlaceholders('skipLink')
-      }), !isFirstFocusContainer && /*#__PURE__*/_jsx(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.
-      , {
-        accessibilityLiveRegion: !skipLinkHref && refocus ? undefined : 'polite',
-        text: getCopyWithPlaceholders('stepTrackerLabel')
-      }), /*#__PURE__*/_jsx(View, {
-        style: selectContainerStyles(containerLayout.width),
-        children: /*#__PURE__*/_jsx(Animated.View, {
-          style: StyleSheet.flatten([selectSwipeAreaStyles(totalItems, containerLayout.width, enablePeeking, enableDisplayMultipleItemsPerSlide), {
-            transform: [{
-              translateX: pan.x
-            }, {
-              translateY: pan.y
-            }]
-          }]),
-          ...panResponder.panHandlers,
-          ...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,
-          children: childrenArray.map((element, index) => {
-            const hidden = !isAnimating && index !== activeIndex;
-            const clonedElement = /*#__PURE__*/React.cloneElement(element, {
-              elementIndex: index,
-              hidden: enablePeeking || enableDisplayMultipleItemsPerSlide ? false : hidden,
+  return /*#__PURE__*/_jsx(View, {
+    style: selectRootContainerStyles(enableHero, viewport),
+    children: /*#__PURE__*/_jsx(View, {
+      style: selectMainContainerStyles(enableHero, viewport),
+      children: /*#__PURE__*/_jsxs(CarouselProvider, {
+        activeIndex: activeIndex,
+        goTo: goTo,
+        getCopyWithPlaceholders: getCopyWithPlaceholders,
+        itemLabel: itemLabel,
+        totalItems: totalItems,
+        themeTokens: themeTokens,
+        firstFocusRef: firstFocusRef,
+        refocus: refocus,
+        width: containerLayout.width,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: [staticStyles.root],
+          onLayout: onContainerLayout,
+          ref: ref,
+          ...systemProps,
+          ...containerProps,
+          children: [isAutoPlayEnabled ? /*#__PURE__*/_jsx(View, {
+            style: [staticStyles.animationControlButton, selectControlButtonPositionStyles({
+              positionVariant: previousNextNavigationPosition,
+              buttonWidth: previousNextNavigationButtonWidth,
+              positionProperty: getDynamicPositionProperty(),
+              spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
               enablePeeking,
-              peekingProps: getPeekingProps(viewport),
               enableDisplayMultipleItemsPerSlide,
+              enableHero,
               viewport
-            });
-            return /*#__PURE__*/_jsx(React.Fragment, {
-              children: clonedElement
-            }, index.toFixed(2));
-          })
-        })
-      }), showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
-        style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking, enableDisplayMultipleItemsPerSlide),
-        testID: "next-button-container",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onLayout: onPreviousNextNavigationButtonLayout,
-          icon: nextIcon,
-          onPress: goToNext,
-          variant: previousNextIconButtonVariants,
-          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2),
-          tokens: selectIconStyles(themeTokens)
-        })
-      }) : null]
-    }), showPanelNavigation ? activePanelNavigation : null]
+            })],
+            children: /*#__PURE__*/_jsx(IconButton, {
+              icon: isCarouselPlaying ? pauseIcon : playIcon,
+              accessibilityLabel: isCarouselPlaying ? getCopy('pauseButtonLabel') : getCopy('playButtonLabel'),
+              variant: previousNextIconButtonVariants,
+              onPress: onAnimationControlButtonPress
+            })
+          }) : null, showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
+            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking, enableDisplayMultipleItemsPerSlide, enableHero, viewport),
+            testID: "previous-button-container",
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onLayout: onPreviousNextNavigationButtonLayout,
+              icon: previousIcon,
+              onPress: goToPrev,
+              variant: previousNextIconButtonVariants,
+              accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex),
+              tokens: selectIconStyles(themeTokens)
+            })
+          }) : null, Boolean(skipLinkHref) && /*#__PURE__*/_jsx(SkipLink, {
+            ref: firstFocusRef,
+            href: skipLinkHref,
+            children: getCopyWithPlaceholders('skipLink')
+          }), !isFirstFocusContainer && /*#__PURE__*/_jsx(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.
+          , {
+            accessibilityLiveRegion: !skipLinkHref && refocus ? undefined : 'polite',
+            text: getCopyWithPlaceholders('stepTrackerLabel')
+          }), /*#__PURE__*/_jsx(View, {
+            style: selectContainerStyles(containerLayout.width),
+            children: /*#__PURE__*/_jsx(Animated.View, {
+              style: StyleSheet.flatten([selectSwipeAreaStyles(totalItems, containerLayout.width, enablePeeking, enableDisplayMultipleItemsPerSlide), {
+                transform: [{
+                  translateX: pan.x
+                }, {
+                  translateY: pan.y
+                }]
+              }]),
+              ...panResponder.panHandlers,
+              ...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,
+              children: childrenArray.map((element, index) => {
+                const hidden = !isAnimating && index !== activeIndex;
+                const clonedElement = /*#__PURE__*/React.cloneElement(element, {
+                  elementIndex: index,
+                  hidden: enablePeeking || enableDisplayMultipleItemsPerSlide ? false : hidden,
+                  enablePeeking,
+                  peekingProps: getPeekingProps(viewport),
+                  enableDisplayMultipleItemsPerSlide,
+                  viewport,
+                  backgroundColor: element.props.backgroundColor,
+                  enableHero,
+                  tabsPanelHeight
+                });
+                return /*#__PURE__*/_jsx(React.Fragment, {
+                  children: clonedElement
+                }, index.toFixed(2));
+              })
+            })
+          }), showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
+            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking, enableDisplayMultipleItemsPerSlide, enableHero, viewport),
+            testID: "next-button-container",
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onLayout: onPreviousNextNavigationButtonLayout,
+              icon: nextIcon,
+              onPress: goToNext,
+              variant: previousNextIconButtonVariants,
+              accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2),
+              tokens: selectIconStyles(themeTokens)
+            })
+          }) : null]
+        }), /*#__PURE__*/_jsx(View, {
+          style: selectNavigationStyles(tabs, tabsPanelHeight, enableHero, viewport),
+          onLayout: tabs && onTabsPanelLayout,
+          children: showPanelNavigation ? activePanelNavigation : null
+        })]
+      })
+    })
   });
 });
 Carousel.propTypes = {

package/lib/{Carousel → esm/Carousel}/CarouselItem/CarouselItem.js

@@ -5,7 +5,8 @@ import Platform from "react-native-web/dist/exports/Platform";
 import { layoutTags, getA11yPropsFromHtmlTag, selectSystemProps, a11yProps, viewProps, variantProp } from '../../utils';
 import { useCarousel } from '../CarouselContext';
 import { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, GAP_BETWEEN_ITEMS } from '../Constants';
-import { jsx as _jsx } from "react/jsx-runtime";
+import Box from '../../Box';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectContainerStyle = _ref => {
   let {
@@ -84,12 +85,14 @@ const CarouselItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     peekingProps,
     enableDisplayMultipleItemsPerSlide,
     viewport,
+    backgroundColor,
+    enableHero,
+    tabsPanelHeight,
     ...rest
   } = _ref2;
   const {
     width,
-    activeIndex,
-    height
+    activeIndex
   } = useCarousel();
   const selectedProps = selectProps({
     ...rest,
@@ -101,7 +104,6 @@ const CarouselItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       width,
       elementIndex,
       hidden,
-      height,
       enablePeeking,
       enableDisplayMultipleItemsPerSlide,
       viewport,
@@ -110,7 +112,18 @@ const CarouselItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ...selectedProps,
     ...focusabilityProps,
     ref: ref,
-    children: children
+    children: /*#__PURE__*/_jsxs(Box, {
+      variant: {
+        background: backgroundColor
+      },
+      space: 0,
+      flex: 1,
+      children: [children, enableHero && /*#__PURE__*/_jsx(View, {
+        style: {
+          height: tabsPanelHeight
+        }
+      })]
+    })
   });
 });
 CarouselItem.propTypes = {
@@ -155,7 +168,11 @@ CarouselItem.propTypes = {
     peekingLastSpace: PropTypes.number,
     peekingMiddleSpace: PropTypes.number,
     peekingGap: PropTypes.number
-  })
+  }),
+  /**
+   * Background color of the slide. It supports Box background variant colors.
+   */
+  backgroundColor: PropTypes.string
 };
 CarouselItem.displayName = 'Carousel.Item';
 export default CarouselItem;

package/lib/esm/Carousel/Constants.js

@@ -0,0 +1,7 @@
+export const ITEMS_PER_VIEWPORT_MD = 2;
+export const ITEMS_PER_VIEWPORT_LG_XL = 3;
+export const GAP_BETWEEN_ITEMS = 16;
+export const HERO_POSITION_OFFSET = 20;
+export const DEFAULT_POSITION_OFFSET = 0;
+export const LARGE_VIEWPORT_MARGIN = 40;
+export const DEFAULT_VIEWPORT_MARGIN = 10;

package/lib/{TextInput → esm/TextInput}/TextInputBase.js

@@ -363,6 +363,32 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     ...themeTokens,
     height
   }, themeOptions, inactive, type, buttons?.length, themeTokens.buttonSize, buttonsGapSize, isPassword, iconLeftWidth, iconLeftGap, direction);
+  const {
+    minHeight = 0,
+    maxHeight = Infinity
+  } = nativeInputStyle;
+  const [inputHeight, setInputHeight] = React.useState(minHeight || 0);
+
+  /* get the new height between the limits and update 
+  the state with the new height */
+  const measureHeightWeb = React.useCallback(() => {
+    const el = inputRef.current;
+    const scrollHeight = el.scrollHeight || 0;
+    let newHeight = Math.max(scrollHeight, minHeight);
+    newHeight = Math.min(newHeight, maxHeight);
+    setInputHeight(newHeight);
+  }, [inputRef, minHeight, maxHeight]);
+
+  /* restores the height and the value first to then 
+  calculate the height correctly */
+  React.useEffect(() => {
+    if (Platform.OS === 'web' && inputRef.current) {
+      const el = inputRef.current;
+      el.style.height = 'auto';
+      el.value = currentValue;
+      measureHeightWeb();
+    }
+  }, [currentValue, measureHeightWeb, inputRef]);
   const shouldShowSubmitIcon = submitIcon && direction === 'left' && !inactive;
   return /*#__PURE__*/_jsxs(View, {
     style: selectOuterBorderStyles(themeTokens),
@@ -382,7 +408,10 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
       ref: inputRef,
       keyboardType: isNumeric ? 'numeric' : 'default',
       inputMode: isNumeric ? 'numeric' : undefined,
-      style: nativeInputStyle,
+      style: {
+        ...nativeInputStyle,
+        height: Math.max(inputHeight, minHeight)
+      },
       secureTextEntry: isPassword && !showPassword,
       ...inputProps
     }), IconComponent && /*#__PURE__*/_jsx(View, {

package/lib/package.json

@@ -0,0 +1,88 @@
+{
+  "author": "TELUS Digital",
+  "browserslist": [
+    "extends @telus-uds/browserslist-config"
+  ],
+  "bugs": {
+    "url": "https://github.com/telus/universal-design-system/issues"
+  },
+  "dependencies": {
+    "@floating-ui/react-dom": "^1.0.1",
+    "@floating-ui/react-native": "^0.8.1",
+    "@gorhom/portal": "^1.0.14",
+    "@react-native-picker/picker": "^2.9.0",
+    "@telus-uds/system-constants": "^3.0.0",
+    "@telus-uds/system-theme-tokens": "^4.0.0",
+    "airbnb-prop-types": "^2.16.0",
+    "css-mediaquery": "^0.1.2",
+    "expo-document-picker": "^13.0.1",
+    "expo-linear-gradient": "^12.5.0",
+    "expo-modules-core": "^1.12.24",
+    "lodash.debounce": "^4.0.8",
+    "lodash.merge": "^4.6.2",
+    "lodash.throttle": "^4.1.1",
+    "prop-types": "^15.7.2",
+    "react-native-picker-select": "^9.3.1",
+    "semver": "7.5.2",
+    "string.prototype.matchall": "^4.0.9"
+  },
+  "description": "Base components",
+  "devDependencies": {
+    "@babel/plugin-transform-private-methods": "^7.25.4",
+    "@telus-uds/browserslist-config": "^1.0.5",
+    "@testing-library/jest-native": "^4.0.1",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/react-hooks": "~7.0.1",
+    "@testing-library/react-native": "11.0.0",
+    "react-test-renderer": "~18.0.0",
+    "webpack": "5.x"
+  },
+  "exports": {
+    ".": {
+      "import": "./lib/esm/index.js",
+      "require": "./lib/cjs/index.js"
+    },
+    "./server": {
+      "import": "./lib/esm/server.js",
+      "require": "./lib/cjs/server.js"
+    }
+  },
+  "homepage": "https://github.com/telus/universal-design-system#readme",
+  "keywords": [
+    "base"
+  ],
+  "license": "MIT",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
+  "name": "@telus-uds/components-base",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-native": "^0.74.5",
+    "react-native-web": "^0.19.10"
+  },
+  "react-native": "src/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/telus/universal-design-system.git"
+  },
+  "scripts": {
+    "test": "jest",
+    "test:web": "jest --config jest.config-web.js",
+    "test:ios": "jest --config jest.config-ios.js",
+    "test:android": "jest --config jest.config-android.js",
+    "lint": "npm run --prefix ../.. lint:path -- --color packages/components-base",
+    "lint:fix": "npm run --prefix ../.. lint:path -- --fix packages/components-base",
+    "format": "prettier --write .",
+    "build:cjs": "babel src -d lib/cjs",
+    "copy:pkg": "cp package.json lib/package.json",
+    "build:esm": "babel src -d lib/esm --env-name module",
+    "build": "npm run build:cjs && npm run build:esm && npm run copy:pkg"
+  },
+  "sideEffects": false,
+  "standard-engine": {
+    "skip": true
+  },
+  "version": "3.0.0",
+  "types": "types/index.d.ts"
+}

package/package.json

@@ -3,7 +3,6 @@
   "browserslist": [
     "extends @telus-uds/browserslist-config"
   ],
-  "type": "module",
   "bugs": {
     "url": "https://github.com/telus/universal-design-system/issues"
   },
@@ -12,8 +11,8 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
-    "@telus-uds/system-constants": "^2.0.0",
-    "@telus-uds/system-theme-tokens": "^3.3.0",
+    "@telus-uds/system-constants": "^3.0.0",
+    "@telus-uds/system-theme-tokens": "^4.0.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -40,12 +39,12 @@
   },
   "exports": {
     ".": {
-      "import": "./lib/index.js",
-      "default": "./lib/index.js"
+      "import": "./lib/esm/index.js",
+      "require": "./lib/cjs/index.js"
     },
     "./server": {
-      "import": "./lib/server.js",
-      "default": "./lib/server.js"
+      "import": "./lib/esm/server.js",
+      "require": "./lib/cjs/server.js"
     }
   },
   "homepage": "https://github.com/telus/universal-design-system#readme",
@@ -53,8 +52,8 @@
     "base"
   ],
   "license": "MIT",
-  "main": "lib/index.js",
-  "module": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "name": "@telus-uds/components-base",
   "peerDependencies": {
     "react": "^18.2.0",
@@ -75,12 +74,15 @@
     "lint": "npm run --prefix ../.. lint:path -- --color packages/components-base",
     "lint:fix": "npm run --prefix ../.. lint:path -- --fix packages/components-base",
     "format": "prettier --write .",
-    "build": "babel src -d lib --env-name module"
+    "build:cjs": "babel src -d lib/cjs",
+    "copy:pkg": "cp package.json lib/package.json",
+    "build:esm": "babel src -d lib/esm --env-name module",
+    "build": "npm run build:cjs && npm run build:esm && npm run copy:pkg"
   },
   "sideEffects": false,
   "standard-engine": {
     "skip": true
   },
-  "version": "2.5.0",
+  "version": "3.0.0",
   "types": "types/index.d.ts"
 }