@telus-uds/components-web 3.1.0 → 3.2.1

package/lib/VideoPicker/VideoPicker.js

@@ -2,13 +2,16 @@ 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 } from '../utils';
+import { htmlAttrs, styledComponents } 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 {
@@ -18,45 +21,66 @@ const framedContainerStyles = _ref => {
     framedContainerBorderRadius,
     framedMaxHeight
   } = _ref;
-  return css(["background-color:", ";border:", "px solid ", ";border-radius:", "px;& > div{max-height:", "px;}"], framedContainerBackgroundColor, framedContainerBorderWidth, framedContainerBorderColor, framedContainerBorderRadius, framedMaxHeight);
+  return css`
+  background-color: ${framedContainerBackgroundColor};
+  border: ${framedContainerBorderWidth}px solid ${framedContainerBorderColor};
+  border-radius: ${framedContainerBorderRadius}px;
+
+  & > div {
+    max-height: ${framedMaxHeight}px;
+  }
+`;
 };
-const VideoPickerContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "VideoPicker__VideoPickerContainer",
-  componentId: "components-web__sc-x6lxp0-0"
-})(["", ""], _ref2 => {
+const VideoPickerContainer = styled.div`
+  ${_ref2 => {
   let {
     isFramed,
     ...tokens
   } = _ref2;
   return isFramed && framedContainerStyles(tokens);
-});
+}}
+`;
 const framedPlayerContainerStyles = _ref3 => {
   let {
     framedMaxHeight,
     framedContainerPadding
   } = _ref3;
-  return css(["width:66.67%;padding:", "px;max-height:", "px;flex-shrink:0;box-sizing:border-box;"], framedContainerPadding, framedMaxHeight);
+  return css`
+  width: 66.67%;
+  padding: ${framedContainerPadding}px;
+  max-height: ${framedMaxHeight}px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+`;
 };
-const VideoPlayerContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "VideoPicker__VideoPlayerContainer",
-  componentId: "components-web__sc-x6lxp0-1"
-})(["", " overflow:auto;"], _ref4 => {
+const VideoPlayerContainer = styled.div`
+  ${_ref4 => {
   let {
     isFramed,
     ...tokens
   } = _ref4;
   return isFramed && framedPlayerContainerStyles(tokens);
-});
-const framedVideoListContainerStyle = /*#__PURE__*/css(["max-height:", "px;overflow:auto;flex-direction:column;"], _ref5 => {
+}}
+  overflow: auto;
+`;
+const framedVideoListContainerStyle = css`
+  max-height: ${_ref5 => {
   let {
     framedMaxHeight
   } = _ref5;
   return framedMaxHeight;
-});
-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);
+}}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 VideoPicker = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   var _videoList$;
   let {

package/lib/VideoPicker/VideoPickerThumbnail.js

@@ -3,12 +3,15 @@ import Pressable from "react-native-web/dist/exports/Pressable";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
 import { viewports } from '@telus-uds/system-constants';
-import styled from 'styled-components';
 import { StackView, Typography, useViewport, horizontalScrollUtils, useThemeTokensCallback } from '@telus-uds/components-base';
+import { styledComponents } from '../utils';
 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
@@ -41,43 +44,74 @@ const createReactNativeStyles = _ref => {
     }
   });
 };
-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 => {
+const ImageContainer = styled.div`
+  padding: ${props => `${props.outerBorderGap}px`};
+  border: ${props => `${props.outerBorderWidth}px solid ${props.outerBorderColor}`};
+  border-radius: ${_ref2 => {
   let {
     outerBorderRadius
   } = _ref2;
   return outerBorderRadius;
-});
-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 => {
+}}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 => {
   let {
     borderWidth
   } = _ref3;
   return borderWidth;
-}, _ref4 => {
+}}px solid;
+    border-color: ${_ref4 => {
   let {
     borderColor
   } = _ref4;
   return borderColor;
-}, _ref5 => {
+}};
+    border-radius: ${_ref5 => {
   let {
     borderRadius
   } = _ref5;
   return borderRadius;
-}, _ref6 => {
+}}px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  & > div {
+    border-radius: ${_ref6 => {
   let {
     borderRadius
   } = _ref6;
   return borderRadius;
-});
-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;"]);
+}}px;
+  }
+`;
+const ThumbnailTitleContainer = styled.div`
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;
 const VideoPickerThumbnail = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     videoPlayerRef,

package/lib/WaffleGrid/WaffleGrid.js

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

package/lib/WebVideo/WebVideo.js

@@ -2,24 +2,22 @@ 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 } from '../utils';
+import { htmlAttrs, styledComponents } 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 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "WebVideo__StyledPlayerContainer",
-  componentId: "components-web__sc-327a6k-0"
-})({
+const StyledPlayerContainer = styled.div({
   width: '100%',
   minWidth: 288,
   outline: 'none'
 });
-const StyledYoutubePlayer = /*#__PURE__*/styled(YouTube).withConfig({
-  displayName: "WebVideo__StyledYoutubePlayer",
-  componentId: "components-web__sc-327a6k-1"
-})({
+const StyledYoutubePlayer = styled(props => /*#__PURE__*/_jsx(YouTube, {
+  ...props
+}))({
   position: 'absolute',
   top: 0,
   left: 0,
@@ -37,10 +35,7 @@ const aspectRatios = {
     paddingTop: '100%'
   }
 };
-const AspectLimiter = /*#__PURE__*/styled.div.withConfig({
-  displayName: "WebVideo__AspectLimiter",
-  componentId: "components-web__sc-327a6k-2"
-})(props => ({
+const AspectLimiter = styled.div(props => ({
   ...aspectRatios[props.aspectRatio],
   position: 'relative'
 }));

package/lib/index.js

@@ -36,5 +36,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 } from './utils';
+export { ssrStyles, styledComponents } from './utils';
 export * from './baseExports';

package/lib/shared/FullBleedContent/FullBleedContent.js

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

package/lib/shared/VideoSplash/SplashButton/SplashButton.js

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

package/lib/shared/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.js

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

package/lib/shared/VideoSplash/VideoSplash.js

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

package/lib/utils/index.js

@@ -7,4 +7,6 @@ import ssrStyles from './ssr';
 import isElementFocusable from './isElementFocusable';
 import renderStructuredContent from './renderStructuredContent';
 import useOverlaidPosition from './useOverlaidPosition';
-export { deprecate, htmlAttrs, contentfulProps, transformGradient, useTypographyTheme, warn, media, renderStructuredContent, ssrStyles, isElementFocusable, 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 };

package/lib/utils/scrollToAnchor.js

@@ -0,0 +1,19 @@
+/**
+ * Scrolls smoothly to the anchor element specified by the href.
+ *
+ * @param {string} href - The href attribute value, expected to be an anchor link starting with '#'.
+ * @param {Event} event - The event object associated with the click or navigation action.
+ * @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('#')) {
+    event.preventDefault();
+    const target = document.getElementById(href.slice(1));
+    target === null || target === void 0 || target.scrollIntoView({
+      behavior: 'smooth'
+    });
+    window.location.hash = href;
+    onAfterScroll(event);
+  }
+};
+export default scrollToAnchor;

package/lib/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,6 +23,9 @@ const ssrStyles = function () {
     styleGetters = [],
     collectStyles = renderedApp => renderedApp
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    ServerStyleSheet
+  } = styledComponents;
   const sheet = new ServerStyleSheet();
   const getStyledComponentsStyles = () => {
     const styles = sheet.getStyleElement();

package/lib/utils/theming/styled-components.js

@@ -0,0 +1,26 @@
+/**
+ * Currently, `styled` is only available as the default export in `styled-components`.
+ * In transpiled/CommonJS environments, that works as expected, but it breaks server-side ESM usage of `styled-components`.
+ *
+ * To make `styled-components` work server-side, instead of:
+ *
+ *  import styled from 'styled-components';
+ *
+ * We must write:
+ *
+ *  import styledWrapper from 'styled-components';
+ *  const styled = styledWrapper.default;
+ *
+ * This approach is confusing and not a viable option for code that should run in both browser and server.
+ */
+
+import _styled, { css, keyframes, createGlobalStyle, ServerStyleSheet } from 'styled-components';
+const styled = typeof _styled === 'function' ? _styled : _styled.default;
+const styledComponents = {
+  styled,
+  css,
+  keyframes,
+  createGlobalStyle,
+  ServerStyleSheet
+};
+export default styledComponents;

package/package.json

@@ -6,7 +6,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "^2.1.0",
+    "@telus-uds/components-base": "^2.3.0",
     "@telus-uds/system-constants": "^2.0.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -14,7 +14,7 @@
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^3.1.0",
+    "@telus-uds/system-theme-tokens": "^3.2.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -81,5 +81,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "3.1.0"
+  "version": "3.2.1"
 }

package/src/Badge/Badge.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import styled from 'styled-components'
 import PropTypes from 'prop-types'
 import {
   selectSystemProps,
@@ -7,10 +6,12 @@ import {
   getTokensPropType,
   useThemeTokens
 } from '@telus-uds/components-base'
-import { htmlAttrs, transformGradient } from '../utils'
+import { htmlAttrs, transformGradient, styledComponents } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
+const { styled } = styledComponents
+
 const BadgeContainer = styled.div`
   background: ${({ background }) => background};
   border: ${({ border }) => border};

package/src/BlockQuote/BlockQuote.jsx

@@ -14,11 +14,12 @@ import {
   getTokensPropType,
   StyleSheet
 } from '@telus-uds/components-base'
-import styled from 'styled-components'
-import { htmlAttrs, transformGradient } from '../utils'
+import { htmlAttrs, transformGradient, styledComponents } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
+const { styled } = styledComponents
+
 const BlockQuoteContainer = styled.blockquote`
   margin: 0;
   position: relative;

package/src/Breadcrumbs/Breadcrumbs.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 
 import { Helmet, HelmetProvider } from 'react-helmet-async'
 import { isEqual } from 'lodash'
@@ -14,11 +13,13 @@ import {
   useThemeTokens,
   useViewport
 } from '@telus-uds/components-base'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, styledComponents } from '../utils'
 import Item from './Item/Item'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
+const { styled } = styledComponents
+
 const StyledList = styled.ol({
   display: 'flex',
   flexDirection: 'row',
@@ -149,15 +150,9 @@ const Breadcrumbs = React.forwardRef(
 
     const viewport = useViewport()
 
-    React.useEffect(() => {
-      if (optionsHidden) {
-        if (viewport !== 'xs' && !isEqual(itemsToBeRendered, activeRoutes)) {
-          setItemsToBeRendered(activeRoutes)
-        }
-        return
-      }
+    const newItems = React.useMemo(() => {
       if (viewport === 'xs' && activeRoutes.length >= MAX_ITEMS_ON_XS_VIEWPORT) {
-        const newItems = [
+        return [
           ...activeRoutes.slice(0, 2),
           {
             path: '#',
@@ -170,12 +165,27 @@ const Breadcrumbs = React.forwardRef(
           },
           activeRoutes[activeRoutes.length - 1]
         ]
-        setItemsToBeRendered(newItems)
-        setOptionsHidden(true)
+      }
+      return activeRoutes
+    }, [viewport, activeRoutes])
+
+    React.useEffect(() => {
+      if (optionsHidden) {
+        if (viewport !== 'xs' && !isEqual(itemsToBeRendered, activeRoutes)) {
+          setItemsToBeRendered(activeRoutes)
+        }
+        return
+      }
+
+      if (viewport === 'xs' && activeRoutes.length >= MAX_ITEMS_ON_XS_VIEWPORT) {
+        if (!isEqual(itemsToBeRendered, newItems)) {
+          setItemsToBeRendered(newItems)
+          setOptionsHidden(true)
+        }
       } else if (!isEqual(itemsToBeRendered, activeRoutes)) {
         setItemsToBeRendered(activeRoutes)
       }
-    }, [viewport, activeRoutes, optionsHidden, itemsToBeRendered])
+    }, [viewport, activeRoutes, optionsHidden, itemsToBeRendered, newItems])
 
     const items = getItems(itemsToBeRendered, params, !children)
     const themeTokens = useThemeTokens('Breadcrumbs', tokens, variant)