@telus-uds/components-web 3.3.0 → 4.0.0

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

@@ -2,16 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { viewports } from '@telus-uds/system-constants';
 import { selectSystemProps, StackView, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
+import styled, { css } from 'styled-components';
 import { VideoPropType } from './videoPropType';
 import VideoPickerThumbnail from './VideoPickerThumbnail';
 import VideoPickerPlayer from './VideoPickerPlayer';
 import VideoSlider from './VideoSlider';
-import { htmlAttrs, styledComponents } from '../utils';
+import { htmlAttrs } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled,
-  css
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const framedContainerStyles = _ref => {
   let {
@@ -21,71 +18,49 @@ const framedContainerStyles = _ref => {
     framedContainerBorderRadius,
     framedMaxHeight
   } = _ref;
-  return css`
-  background-color: ${framedContainerBackgroundColor};
-  border: ${framedContainerBorderWidth}px solid ${framedContainerBorderColor};
-  border-radius: ${framedContainerBorderRadius}px;
-
-  & > div {
-    max-height: ${framedMaxHeight}px;
-  }
-`;
+  return css(["background-color:", ";border:", "px solid ", ";border-radius:", "px;& > div{max-height:", "px;}"], framedContainerBackgroundColor, framedContainerBorderWidth, framedContainerBorderColor, framedContainerBorderRadius, framedMaxHeight);
 };
-const VideoPickerContainer = styled.div`
-  ${_ref2 => {
+const VideoPickerContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoPicker__VideoPickerContainer",
+  componentId: "components-web__sc-x6lxp0-0"
+})(["", ""], _ref2 => {
   let {
     isFramed,
     ...tokens
   } = _ref2;
   return isFramed && framedContainerStyles(tokens);
-}}
-`;
+});
 const framedPlayerContainerStyles = _ref3 => {
   let {
     framedMaxHeight,
     framedContainerPadding
   } = _ref3;
-  return css`
-  width: 66.67%;
-  padding: ${framedContainerPadding}px;
-  max-height: ${framedMaxHeight}px;
-  flex-shrink: 0;
-  box-sizing: border-box;
-`;
+  return css(["width:66.67%;padding:", "px;max-height:", "px;flex-shrink:0;box-sizing:border-box;"], framedContainerPadding, framedMaxHeight);
 };
-const VideoPlayerContainer = styled.div`
-  ${_ref4 => {
+const VideoPlayerContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoPicker__VideoPlayerContainer",
+  componentId: "components-web__sc-x6lxp0-1"
+})(["", " overflow:auto;"], _ref4 => {
   let {
     isFramed,
     ...tokens
   } = _ref4;
   return isFramed && framedPlayerContainerStyles(tokens);
-}}
-  overflow: auto;
-`;
-const framedVideoListContainerStyle = css`
-  max-height: ${_ref5 => {
+});
+const framedVideoListContainerStyle = /*#__PURE__*/css(["max-height:", "px;overflow:auto;flex-direction:column;"], _ref5 => {
   let {
     framedMaxHeight
   } = _ref5;
   return framedMaxHeight;
-}}px;
-  overflow: auto;
-  flex-direction: column;
-`;
-const VideoListContainer = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  position: relative;
-  flex-grow: 1;
-  flex-direction: column;
-  ${props => props.isFramed && framedVideoListContainerStyle}
-`;
+});
+const VideoListContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoPicker__VideoListContainer",
+  componentId: "components-web__sc-x6lxp0-2"
+})(["display:flex;justify-content:flex-start;position:relative;flex-grow:1;flex-direction:column;", ""], props => props.isFramed && framedVideoListContainerStyle);
 const VideoPicker = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
-  var _videoList$;
   let {
     videoList = [],
-    selectedVideo = (_videoList$ = videoList[0]) === null || _videoList$ === void 0 ? void 0 : _videoList$.videoId,
+    selectedVideo = videoList[0]?.videoId,
     frame,
     onStartVideo = () => {},
     onSelectVideo = () => {},

package/lib/{VideoPicker → esm/VideoPicker}/VideoPickerThumbnail.js

@@ -4,14 +4,11 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
 import { viewports } from '@telus-uds/system-constants';
 import { StackView, Typography, useViewport, horizontalScrollUtils, useThemeTokensCallback } from '@telus-uds/components-base';
-import { styledComponents } from '../utils';
+import styled from 'styled-components';
 import { getTimestamp } from '../shared/VideoSplash/helpers';
 import { VideoPropType, RefPropType } from './videoPropType';
 import VideoSplash from '../shared/VideoSplash/VideoSplash';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const {
   getItemPositionLayoutHandler,
   itemPositionsPropType
@@ -44,74 +41,43 @@ const createReactNativeStyles = _ref => {
     }
   });
 };
-const ImageContainer = styled.div`
-  padding: ${props => `${props.outerBorderGap}px`};
-  border: ${props => `${props.outerBorderWidth}px solid ${props.outerBorderColor}`};
-  border-radius: ${_ref2 => {
+const ImageContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoPickerThumbnail__ImageContainer",
+  componentId: "components-web__sc-1glxurq-0"
+})(["padding:", ";border:", ";border-radius:", "px;"], props => `${props.outerBorderGap}px`, props => `${props.outerBorderWidth}px solid ${props.outerBorderColor}`, _ref2 => {
   let {
     outerBorderRadius
   } = _ref2;
   return outerBorderRadius;
-}}px;
-`;
-const VideoThumbnail = styled.div`
-  position: relative;
-  width: ${props => props.layout === 'vertical' ? '100%' : '144px'};
-  flex-shrink: 0;
-
-  * button {
-    display: none;
-  }
-
-  // use a pseudo-element to ensure aspect ratio
-  &::before {
-    content: '';
-    display: block;
-    padding-bottom: 56.25%;
-  }
-
-  &::after {
-    content: '';
-    border: ${_ref3 => {
+});
+const VideoThumbnail = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoPickerThumbnail__VideoThumbnail",
+  componentId: "components-web__sc-1glxurq-1"
+})(["position:relative;width:", ";flex-shrink:0;* button{display:none;}&::before{content:'';display:block;padding-bottom:56.25%;}&::after{content:'';border:", "px solid;border-color:", ";border-radius:", "px;position:absolute;top:0;left:0;right:0;bottom:0;}& > div{border-radius:", "px;}"], props => props.layout === 'vertical' ? '100%' : '144px', _ref3 => {
   let {
     borderWidth
   } = _ref3;
   return borderWidth;
-}}px solid;
-    border-color: ${_ref4 => {
+}, _ref4 => {
   let {
     borderColor
   } = _ref4;
   return borderColor;
-}};
-    border-radius: ${_ref5 => {
+}, _ref5 => {
   let {
     borderRadius
   } = _ref5;
   return borderRadius;
-}}px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  & > div {
-    border-radius: ${_ref6 => {
+}, _ref6 => {
   let {
     borderRadius
   } = _ref6;
   return borderRadius;
-}}px;
-  }
-`;
-const ThumbnailTitleContainer = styled.div`
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-`;
+});
+const ThumbnailTitleContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoPickerThumbnail__ThumbnailTitleContainer",
+  componentId: "components-web__sc-1glxurq-2"
+})(["display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;"]);
 const VideoPickerThumbnail = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     videoPlayerRef,
@@ -178,9 +144,8 @@ const VideoPickerThumbnail = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   const handleLayout = itemPositions !== undefined ? getItemPositionLayoutHandler(itemPositions.positions, index) : undefined;
   const onKeyPress = event => {
     if (['Space', 'Enter'].includes(event.key)) {
-      var _videoPlayerRef$curre;
       onSelectVideo(video);
-      const splashButton = (_videoPlayerRef$curre = videoPlayerRef.current) === null || _videoPlayerRef$curre === void 0 ? void 0 : _videoPlayerRef$curre.querySelector('button');
+      const splashButton = videoPlayerRef.current?.querySelector('button');
       if (splashButton) splashButton.focus();
     }
   };

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

@@ -1,14 +1,12 @@
 import React, { createElement as _createElement } from 'react';
 import PropTypes from 'prop-types';
 import { Link, responsiveProps, selectSystemProps, useResponsiveProp, useThemeTokens, withLinkRouter, useViewport, Typography, getTokensPropType } from '@telus-uds/components-base';
+import styled from 'styled-components';
 import OrderedListBase from '../OrderedList/OrderedListBase';
 import ItemBase from '../OrderedList/ItemBase';
 import Image from '../Image';
-import { htmlAttrs, styledComponents } from '../utils';
+import { htmlAttrs } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const row = (rowSize, rowBorderWidth) => ({
   flexBasis: `calc(100% / ${rowSize})`,
@@ -19,13 +17,19 @@ const row = (rowSize, rowBorderWidth) => ({
     borderTopWidth: `${rowBorderWidth}px`
   }
 });
-const Container = styled(OrderedListBase)({
+const Container = /*#__PURE__*/styled(OrderedListBase).withConfig({
+  displayName: "WaffleGrid__Container",
+  componentId: "components-web__sc-ec8g0a-0"
+})({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap',
   justifyContent: 'flex-start'
 });
-const Item = styled(ItemBase)(_ref => {
+const Item = /*#__PURE__*/styled(ItemBase).withConfig({
+  displayName: "WaffleGrid__Item",
+  componentId: "components-web__sc-ec8g0a-1"
+})(_ref => {
   let {
     rowSize,
     itemPadding,
@@ -50,7 +54,10 @@ const Item = styled(ItemBase)(_ref => {
     ...row(rowSize, rowBorderWidth)
   };
 });
-const Center = styled('div')({
+const Center = /*#__PURE__*/styled('div').withConfig({
+  displayName: "WaffleGrid__Center",
+  componentId: "components-web__sc-ec8g0a-2"
+})({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',

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

@@ -2,22 +2,24 @@ import { selectSystemProps } from '@telus-uds/components-base';
 import PropTypes from 'prop-types';
 import React from 'react';
 import YouTube from 'react-youtube';
+import styled from 'styled-components';
 import VideoSplash from '../shared/VideoSplash/VideoSplash';
-import { htmlAttrs, styledComponents } from '../utils';
+import { htmlAttrs } from '../utils';
 import { triggerInProgressVideoIntervals, YoutubePlayerState } from './utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledPlayerContainer = styled.div({
+const StyledPlayerContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "WebVideo__StyledPlayerContainer",
+  componentId: "components-web__sc-327a6k-0"
+})({
   width: '100%',
   minWidth: 288,
   outline: 'none'
 });
-const StyledYoutubePlayer = styled(props => /*#__PURE__*/_jsx(YouTube, {
-  ...props
-}))({
+const StyledYoutubePlayer = /*#__PURE__*/styled(YouTube).withConfig({
+  displayName: "WebVideo__StyledYoutubePlayer",
+  componentId: "components-web__sc-327a6k-1"
+})({
   position: 'absolute',
   top: 0,
   left: 0,
@@ -35,7 +37,10 @@ const aspectRatios = {
     paddingTop: '100%'
   }
 };
-const AspectLimiter = styled.div(props => ({
+const AspectLimiter = /*#__PURE__*/styled.div.withConfig({
+  displayName: "WebVideo__AspectLimiter",
+  componentId: "components-web__sc-327a6k-2"
+})(props => ({
   ...aspectRatios[props.aspectRatio],
   position: 'relative'
 }));

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

@@ -5,7 +5,7 @@ export {
 /**
  * Most base components should be re-exported as-is.
  */
-ActionCard, A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, CardGroup, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, ColourToggle, Divider, DownloadApp, ExpandCollapse, Feedback, FlexGrid, FileUpload, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, Portal, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Status, Tabs, TabBar, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
+ActionCard, A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, CardGroup, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, ColourToggle, Divider, DownloadApp, ExpandCollapse, ExpandCollapseMini, Feedback, FlexGrid, FileUpload, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, Portal, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Status, Tabs, TabBar, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
 /*
  * Most utilities exported from @telus-uds/components-base are for building systems, not apps.
  * Re-export only those utilities with a stable API and known use cases within apps / pages.

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

@@ -9,7 +9,6 @@ export { default as Countdown } from './Countdown';
 export { default as DatePicker } from './DatePicker';
 export { default as Paragraph } from './Paragraph';
 export { default as Span } from './Span';
-export { default as ExpandCollapseMini } from './ExpandCollapseMini';
 export { default as Callout } from './Callout';
 export { default as PriceLockup } from './PriceLockup';
 export { default as Footnote } from './Footnote';
@@ -36,5 +35,5 @@ export { default as TermsAndConditions } from './TermsAndConditions';
 export { default as NavigationBar } from './NavigationBar';
 export { default as Progress } from './Progress';
 export { default as SkeletonProvider } from './SkeletonProvider';
-export { ssrStyles, styledComponents } from './utils';
+export { ssrStyles } from './utils';
 export * from './baseExports';

package/lib/{shared → esm/shared}/FullBleedContent/FullBleedContent.js

@@ -1,11 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { styledComponents } from '../../utils';
+import styled from 'styled-components';
 import ResponsiveImage from '../../ResponsiveImage';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const selectFullBleedContentProps = _ref => {
   let {
     alt,
@@ -34,7 +31,10 @@ const selectFullBleedContentProps = _ref => {
     xsSrc
   };
 };
-const FullBleedContentContainer = styled.div(_ref2 => {
+const FullBleedContentContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FullBleedContent__FullBleedContentContainer",
+  componentId: "components-web__sc-1130ea5-0"
+})(_ref2 => {
   let {
     borderBottomLeftRadius,
     borderBottomRightRadius,

package/lib/{shared → esm/shared}/VideoSplash/SplashButton/SplashButton.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeTokens } from '@telus-uds/components-base';
-import { styledComponents } from '../../../utils';
+import styled from 'styled-components';
 import { getAriaLabel, getTimestamp } from '../helpers';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
-const ButtonContainer = styled.button({
+const ButtonContainer = /*#__PURE__*/styled.button.withConfig({
+  displayName: "SplashButton__ButtonContainer",
+  componentId: "components-web__sc-1oe22fk-0"
+})({
   background: 'none',
   border: 0,
   padding: 0,
@@ -19,7 +19,10 @@ const ButtonContainer = styled.button({
   alignItems: 'center',
   cursor: 'pointer'
 });
-const ButtonContent = styled.div({
+const ButtonContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SplashButton__ButtonContent",
+  componentId: "components-web__sc-1oe22fk-1"
+})({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',

package/lib/{shared → esm/shared}/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Typography, useThemeTokens } from '@telus-uds/components-base';
-import { styledComponents } from '../../../utils';
+import styled from 'styled-components';
 import { getAriaLabel, getTimestamp } from '../helpers';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
-const ButtonContainer = styled.button({
+const ButtonContainer = /*#__PURE__*/styled.button.withConfig({
+  displayName: "SplashButtonWithDetails__ButtonContainer",
+  componentId: "components-web__sc-1edwy9o-0"
+})({
   background: 'none',
   border: 0,
   position: 'absolute',
@@ -16,7 +16,10 @@ const ButtonContainer = styled.button({
   padding: 0,
   cursor: 'pointer'
 });
-const ButtonContent = styled.div({
+const ButtonContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SplashButtonWithDetails__ButtonContent",
+  componentId: "components-web__sc-1edwy9o-1"
+})({
   background: _ref => {
     let {
       buttonBackground
@@ -79,7 +82,10 @@ const ButtonContent = styled.div({
     }
   }
 });
-const PlayIconContainer = styled.div({
+const PlayIconContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SplashButtonWithDetails__PlayIconContainer",
+  componentId: "components-web__sc-1edwy9o-2"
+})({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -94,7 +100,10 @@ const PlayIconContainer = styled.div({
   borderRadius: '100%',
   transition: 'background 0.2s ease-in-out'
 });
-const DetailsContainer = styled.div({
+const DetailsContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SplashButtonWithDetails__DetailsContainer",
+  componentId: "components-web__sc-1edwy9o-3"
+})({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-start',

package/lib/{shared → esm/shared}/VideoSplash/VideoSplash.js

@@ -1,17 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { selectSystemProps, useViewport } from '@telus-uds/components-base';
+import styled from 'styled-components';
 import { viewports } from '@telus-uds/system-constants';
 import SplashButton from './SplashButton/SplashButton';
 import SplashButtonWithDetails from './SplashButtonWithDetails/SplashButtonWithDetails';
 import videoText from '../../Video/videoText';
-import { htmlAttrs, styledComponents } from '../../utils';
+import { htmlAttrs } from '../../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const SplashBackground = styled.div(_ref => {
+const SplashBackground = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoSplash__SplashBackground",
+  componentId: "components-web__sc-1ejxt6-0"
+})(_ref => {
   let {
     videoPoster
   } = _ref;

package/lib/{utils → esm/utils}/index.js

@@ -8,5 +8,4 @@ import isElementFocusable from './isElementFocusable';
 import renderStructuredContent from './renderStructuredContent';
 import useOverlaidPosition from './useOverlaidPosition';
 import scrollToAnchor from './scrollToAnchor';
-import styledComponents from './theming/styled-components';
-export { deprecate, htmlAttrs, contentfulProps, transformGradient, useTypographyTheme, warn, media, renderStructuredContent, ssrStyles, isElementFocusable, useOverlaidPosition, scrollToAnchor, styledComponents };
+export { deprecate, htmlAttrs, contentfulProps, transformGradient, useTypographyTheme, warn, media, renderStructuredContent, ssrStyles, isElementFocusable, useOverlaidPosition, scrollToAnchor };

package/lib/{utils → esm/utils}/scrollToAnchor.js

@@ -6,10 +6,10 @@
  * @param {Function} onAfterScroll - A callback function to be executed after the scroll action is completed.
  */
 const scrollToAnchor = (href, event, onAfterScroll) => {
-  if (href !== null && href !== void 0 && href.startsWith('#')) {
+  if (href?.startsWith('#')) {
     event.preventDefault();
     const target = document.getElementById(href.slice(1));
-    target === null || target === void 0 || target.scrollIntoView({
+    target?.scrollIntoView({
       behavior: 'smooth'
     });
     window.location.hash = href;

package/lib/{utils → esm/utils}/ssr.js

@@ -1,5 +1,5 @@
+import { ServerStyleSheet } from 'styled-components';
 import { ssrStyles as baseSsrStyles } from '@telus-uds/components-base';
-import styledComponents from './theming/styled-components';
 /**
  * Returns object with `renderApp` and `getStyles` functions.
  * Weave these into your app's server-side render process:
@@ -23,15 +23,19 @@ const ssrStyles = function () {
     styleGetters = [],
     collectStyles = renderedApp => renderedApp
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const {
-    ServerStyleSheet
-  } = styledComponents;
+  let router = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'pages';
   const sheet = new ServerStyleSheet();
   const getStyledComponentsStyles = () => {
     const styles = sheet.getStyleElement();
     sheet.seal();
     return styles;
   };
+  if (router === 'app') {
+    return baseSsrStyles(appName, {
+      styleGetters: [...styleGetters],
+      collectStyles
+    });
+  }
   return baseSsrStyles(appName, {
     styleGetters: [getStyledComponentsStyles, ...styleGetters],
     collectStyles: renderedApp => collectStyles(sheet.collectStyles(renderedApp))

package/lib/{utils → esm/utils}/useOverlaidPosition.js

@@ -159,11 +159,10 @@ const useOverlaidPosition = _ref3 => {
   const readyToShow = Boolean(isShown && sourceRef.current);
   useEffect(() => {
     const handleDimensionsChange = _ref5 => {
-      var _sourceRef$current;
       let {
         window
       } = _ref5;
-      (_sourceRef$current = sourceRef.current) === null || _sourceRef$current === void 0 || _sourceRef$current.measureInWindow((x, y, width, height) => {
+      sourceRef.current?.measureInWindow((x, y, width, height) => {
         // Could add a debouncer here if there's too many rerenders during gradual resizes
         setWindowDimensions(window);
         setSourceLayout({
@@ -176,8 +175,7 @@ const useOverlaidPosition = _ref3 => {
     };
     let subscription;
     const unsubscribe = () => {
-      var _subscription;
-      if (typeof ((_subscription = subscription) === null || _subscription === void 0 ? void 0 : _subscription.remove) === 'function') {
+      if (typeof subscription?.remove === 'function') {
         // React Native >=0.65.0
         subscription.remove();
       } else if (typeof Dimensions.remove === 'function') {

package/package.json

@@ -1,20 +1,19 @@
 {
   "author": "TELUS Digital",
-  "type": "module",
   "browserslist": [
     "extends @telus-uds/browserslist-config"
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "^2.4.0",
-    "@telus-uds/system-constants": "^2.0.0",
+    "@telus-uds/components-base": "^3.0.0",
+    "@telus-uds/system-constants": "^3.0.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "moment": "2.29.4",
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^3.3.0",
+    "@telus-uds/system-theme-tokens": "^4.0.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -22,20 +21,20 @@
   },
   "exports": {
     ".": {
-      "import": "./lib/index.js",
-      "default": "./lib/index.js"
+      "import": "./lib/esm/index.js",
+      "require": "./lib/cjs/index.js"
     },
     "./*": {
-      "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"
     },
     "./server/*": {
-      "import": "./lib/*/server.js",
-      "default": "./lib/*/server.js"
+      "import": "./lib/esm/*/server.js",
+      "require": "./lib/cjs/*/server.js"
     }
   },
   "description": "UDS mult-brand web components",
@@ -56,8 +55,8 @@
   },
   "homepage": "https://github.com/telus/universal-design-system#readme",
   "license": "MIT",
-  "main": "lib/index.js",
-  "module": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "name": "@telus-uds/components-web",
   "peerDependencies": {
     "react": "^18.2.0",
@@ -70,7 +69,9 @@
     "url": "git+https://github.com/telus/universal-design-system.git"
   },
   "scripts": {
-    "build": "babel src -d lib --env-name module",
+    "build:cjs": "babel src -d lib/cjs",
+    "build:esm": "babel src -d lib/esm --env-name module",
+    "build": "npm run build:cjs && npm run build:esm",
     "format": "prettier --write .",
     "lint": "telus-standard",
     "lint:fix": "telus-standard --fix",
@@ -81,5 +82,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "3.3.0"
+  "version": "4.0.0"
 }