@telus-uds/components-web 4.19.0 → 5.0.0-alpha.0

package/lib/esm/Video/MiddleControlButton/MiddleControlButton.js

@@ -10,18 +10,18 @@ const StyledMiddleControlButton = /*#__PURE__*/styled.button.withConfig({
   componentId: "components-web__sc-1um2s37-0"
 })(_ref => {
   let {
-    isHidden,
-    width,
-    height,
-    background
+    $isHidden,
+    $width,
+    $height,
+    $background
   } = _ref;
   return {
-    width,
-    height,
+    width: $width,
+    height: $height,
     borderRadius: '50%',
     transition: 'opacity 0.4s',
-    opacity: isHidden ? 0 : 1,
-    background,
+    opacity: $isHidden ? 0 : 1,
+    background: $background,
     display: 'flex',
     justifyContent: 'center',
     border: 'none',
@@ -31,7 +31,7 @@ const StyledMiddleControlButton = /*#__PURE__*/styled.button.withConfig({
     alignItems: 'center'
   };
 });
-const MiddleControlButton = _ref2 => {
+export const MiddleControlButton = _ref2 => {
   let {
     icon: Icon,
     isHidden = false,
@@ -48,12 +48,12 @@ const MiddleControlButton = _ref2 => {
     iconColor
   } = useThemeTokens('VideoMiddleControlButton', tokens, variant);
   return /*#__PURE__*/_jsx(StyledMiddleControlButton, {
-    isHidden: isHidden,
+    $isHidden: isHidden,
     onClick: onClick,
     onFocus: onFocus,
-    width: width,
-    height: height,
-    background: background,
+    $width: width,
+    $height: height,
+    $background: background,
     ...selectProps(rest),
     children: /*#__PURE__*/_jsx(Icon, {
       color: iconColor,
@@ -67,5 +67,4 @@ MiddleControlButton.propTypes = {
   isHidden: PropTypes.bool,
   onClick: PropTypes.func,
   onFocus: PropTypes.func
-};
-export default MiddleControlButton;
+};

package/lib/esm/Video/Video.js

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import fscreen from 'fscreen';
 import styled from 'styled-components';
 import { useThemeTokens, selectSystemProps, getTokensPropType, variantProp } from '@telus-uds/components-base';
-import Spinner from '../Spinner';
+import { Spinner } from '../Spinner/Spinner';
 import { warn, htmlAttrs } from '../utils';
-import VideoSplash from '../shared/VideoSplash/VideoSplash';
-import MiddleControlButton from './MiddleControlButton/MiddleControlButton';
-import ControlBar from './ControlBar/ControlBar';
-import videoText from './videoText';
+import { VideoSplash } from '../shared/VideoSplash/VideoSplash';
+import { MiddleControlButton } from './MiddleControlButton/MiddleControlButton';
+import { ControlBar } from './ControlBar/ControlBar';
+import { videoText } from './videoText';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 
@@ -18,14 +18,14 @@ const VideoPlayerContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-12ltnuw-0"
 })(_ref => {
   let {
-    videoBorder,
-    borderColor
+    $videoBorder,
+    $borderColor
   } = _ref;
   return {
     width: '100%',
     outline: 'none',
     position: 'relative',
-    border: videoBorder ? `20px solid ${borderColor}` : undefined
+    border: $videoBorder ? `20px solid ${$borderColor}` : undefined
   };
 });
 const VideoElementContainer = /*#__PURE__*/styled.div.withConfig({
@@ -49,13 +49,13 @@ const VideoOverlayContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-12ltnuw-3"
 })(_ref2 => {
   let {
-    mouseInactive
+    $mouseInactive
   } = _ref2;
   return {
     width: '100%',
     height: '100%',
     position: 'absolute',
-    cursor: mouseInactive ? 'none' : 'pointer'
+    cursor: $mouseInactive ? 'none' : 'pointer'
   };
 });
 const VideoSplashContainer = /*#__PURE__*/styled.div.withConfig({
@@ -79,7 +79,7 @@ const VideoOverlayElementContainer = /*#__PURE__*/styled.div.withConfig({
   width: '100%',
   height: '100%'
 });
-const Video = _ref3 => {
+export const Video = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     analyticsTracking,
     videoTitle,
@@ -769,8 +769,8 @@ const Video = _ref3 => {
   return /*#__PURE__*/_jsxs(VideoPlayerContainer, {
     ...safeRest,
     ref: refVideoPlayerContainer,
-    videoBorder: videoBorder,
-    borderColor: borderColor,
+    $videoBorder: videoBorder,
+    $borderColor: borderColor,
     onMouseMove: resetInactivityTimer,
     onClick: handleClick,
     onKeyDown: handleKeyboard,
@@ -779,7 +779,7 @@ const Video = _ref3 => {
     "data-testid": "videoPlayer",
     ...selectProps(rest),
     children: [/*#__PURE__*/_jsxs(VideoOverlayContainer, {
-      mouseInactive: mouseInactive,
+      $mouseInactive: mouseInactive,
       onClick: () => {
         closeSubMenus();
         togglePlayPause();
@@ -807,14 +807,12 @@ const Video = _ref3 => {
         })]
       })]
     }), /*#__PURE__*/_jsx(VideoElementContainer, {
-      videoIsFullscreen: videoIsFullscreen,
-      mouseInactive: mouseInactive,
+      ref: ref,
       children: /*#__PURE__*/_jsxs(VideoPlayer, {
         ref: refVideoPlayer,
         controls: isMobile,
-        videoIsFullscreen: videoIsFullscreen,
         crossOrigin: crossOrigin,
-        playsinline: true,
+        playsInline: true,
         children: [loadedSources, loadedTracks, "Your browser does not support the video tag."]
       })
     }), !simpleMode && /*#__PURE__*/_jsx(ControlBar, {
@@ -862,7 +860,8 @@ const Video = _ref3 => {
       role: "note"
     })]
   });
-};
+});
+Video.displayName = 'Video';
 Video.propTypes = {
   ...selectedSystemPropTypes,
   /**
@@ -953,5 +952,4 @@ Video.propTypes = {
   videoTitle: PropTypes.string,
   tokens: getTokensPropType('Video'),
   variant: variantProp.propType
-};
-export default Video;
+};

package/lib/esm/Video/videoText.js

@@ -1,4 +1,4 @@
-const videoText = {
+export const videoText = {
   en: {
     videoPlayer: 'Press the space bar or K to toggle play and pause. Use the left and right arrow keys or the comma and period keys to scrub through the video. Use the up and down arrow keys, the dash and equal keys, or the add and subtract number pad keys to increase and decrease volume. Press M to toggle mute. Press F to toggle fullscreen. Press escape to exit instructions and return to video.',
     videoSelected: 'Video selected. Press Q to listen to controls.',
@@ -51,5 +51,4 @@ const videoText = {
     en: 'Anglais',
     fr: 'Français'
   }
-};
-export default videoText;
+};

package/lib/esm/VideoPicker/VideoPicker.js

@@ -4,60 +4,60 @@ 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 { VideoPickerThumbnail } from './VideoPickerThumbnail';
+import { VideoPickerPlayer } from './VideoPickerPlayer';
+import { VideoSlider } from './VideoSlider';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const framedContainerStyles = _ref => {
   let {
-    framedContainerBackgroundColor,
-    framedContainerBorderWidth,
-    framedContainerBorderColor,
-    framedContainerBorderRadius,
-    framedMaxHeight
+    $framedContainerBackgroundColor,
+    $framedContainerBorderWidth,
+    $framedContainerBorderColor,
+    $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:", ";border:", "px solid ", ";border-radius:", "px;& > div{max-height:", "px;}"], $framedContainerBackgroundColor, $framedContainerBorderWidth, $framedContainerBorderColor, $framedContainerBorderRadius, $framedMaxHeight);
 };
 const VideoPickerContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "VideoPicker__VideoPickerContainer",
   componentId: "components-web__sc-x6lxp0-0"
 })(["", ""], _ref2 => {
   let {
-    isFramed,
+    $isFramed,
     ...tokens
   } = _ref2;
-  return isFramed && framedContainerStyles(tokens);
+  return $isFramed && framedContainerStyles(tokens);
 });
 const framedPlayerContainerStyles = _ref3 => {
   let {
-    framedMaxHeight,
-    framedContainerPadding
+    $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:", "px;max-height:", "px;flex-shrink:0;box-sizing:border-box;"], $framedContainerPadding, $framedMaxHeight);
 };
 const VideoPlayerContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "VideoPicker__VideoPlayerContainer",
   componentId: "components-web__sc-x6lxp0-1"
 })(["", " overflow:auto;"], _ref4 => {
   let {
-    isFramed,
+    $isFramed,
     ...tokens
   } = _ref4;
-  return isFramed && framedPlayerContainerStyles(tokens);
+  return $isFramed && framedPlayerContainerStyles(tokens);
 });
 const framedVideoListContainerStyle = /*#__PURE__*/css(["max-height:", "px;overflow:auto;flex-direction:column;"], _ref5 => {
   let {
-    framedMaxHeight
+    $framedMaxHeight
   } = _ref5;
-  return framedMaxHeight;
+  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);
-const VideoPicker = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+})(["display:flex;justify-content:flex-start;position:relative;flex-grow:1;flex-direction:column;", ""], props => props.$isFramed && framedVideoListContainerStyle);
+export const VideoPicker = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     videoList = [],
     selectedVideo = videoList[0]?.videoId,
@@ -108,9 +108,13 @@ const VideoPicker = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   }, video.videoId));
   return /*#__PURE__*/_jsx(VideoPickerContainer, {
     ref: ref,
-    isFramed: isFramed,
+    $isFramed: isFramed,
+    $framedContainerBackgroundColor: themeTokens.framedContainerBackgroundColor,
+    $framedContainerBorderWidth: themeTokens.framedContainerBorderWidth,
+    $framedContainerBorderColor: themeTokens.framedContainerBorderColor,
+    $framedContainerBorderRadius: themeTokens.framedContainerBorderRadius,
+    $framedMaxHeight: themeTokens.framedMaxHeight,
     ...selectProps(rest),
-    ...themeTokens,
     children: /*#__PURE__*/_jsxs(StackView, {
       divider: isFramed ? {
         tokens: {
@@ -125,8 +129,9 @@ const VideoPicker = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
       ,
       direction: isFramed ? 'row' : 'column',
       children: [/*#__PURE__*/_jsx(VideoPlayerContainer, {
-        ...themeTokens,
-        isFramed: isFramed,
+        $isFramed: isFramed,
+        $framedMaxHeight: themeTokens.framedMaxHeight,
+        $framedContainerPadding: themeTokens.framedContainerPadding,
         children: /*#__PURE__*/_jsx(VideoPickerPlayer, {
           video: addVideoEventHandlers(currentVideo),
           videoPlayerRef: videoPlayerRef,
@@ -137,7 +142,8 @@ const VideoPicker = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
       }) : /*#__PURE__*/_jsx(VideoListContainer, {
         viewport: viewport,
         "data-testid": "video-list-container",
-        isFramed: isFramed,
+        $isFramed: isFramed,
+        $framedMaxHeight: themeTokens.framedMaxHeight,
         children: listElements
       })]
     })
@@ -184,5 +190,4 @@ VideoPicker.propTypes = {
    * @param {object} event - The event object.
    */
   onPause: PropTypes.func
-};
-export default VideoPicker;
+};

package/lib/esm/VideoPicker/VideoPickerPlayer.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { StackView, Typography } from '@telus-uds/components-base';
 import PropTypes from 'prop-types';
-import WebVideo from '../WebVideo/WebVideo';
+import { WebVideo } from '../WebVideo/WebVideo';
 import { VideoPropType, RefPropType } from './videoPropType';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const VideoPickerPlayer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const VideoPickerPlayer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     video = {},
     videoPlayerRef,
@@ -43,5 +43,4 @@ VideoPickerPlayer.propTypes = {
   video: VideoPropType,
   videoPlayerRef: RefPropType,
   onStartVideo: PropTypes.func
-};
-export default VideoPickerPlayer;
+};

package/lib/esm/VideoPicker/VideoPickerThumbnail.js

@@ -7,7 +7,7 @@ import { StackView, Typography, useViewport, horizontalScrollUtils, useThemeToke
 import styled from 'styled-components';
 import { getTimestamp } from '../shared/VideoSplash/helpers';
 import { VideoPropType, RefPropType } from './videoPropType';
-import VideoSplash from '../shared/VideoSplash/VideoSplash';
+import { VideoSplash } from '../shared/VideoSplash/VideoSplash';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   getItemPositionLayoutHandler,
@@ -44,41 +44,41 @@ 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 => {
+})(["padding:", ";border:", ";border-radius:", "px;"], props => `${props.$outerBorderGap}px`, props => `${props.$outerBorderWidth}px solid ${props.$outerBorderColor}`, _ref2 => {
   let {
-    outerBorderRadius
+    $outerBorderRadius
   } = _ref2;
-  return outerBorderRadius;
+  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 => {
+})(["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
+    $borderWidth
   } = _ref3;
-  return borderWidth;
+  return $borderWidth;
 }, _ref4 => {
   let {
-    borderColor
+    $borderColor
   } = _ref4;
-  return borderColor;
+  return $borderColor;
 }, _ref5 => {
   let {
-    borderRadius
+    $borderRadius
   } = _ref5;
-  return borderRadius;
+  return $borderRadius;
 }, _ref6 => {
   let {
-    borderRadius
+    $borderRadius
   } = _ref6;
-  return borderRadius;
+  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;"]);
-const VideoPickerThumbnail = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+export const VideoPickerThumbnail = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     videoPlayerRef,
     selectedVideoId,
@@ -98,9 +98,11 @@ const VideoPickerThumbnail = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   const isPlaying = selectedVideoId === video.videoId;
   const renderThumbnailImage = themeTokens => {
     return /*#__PURE__*/_jsx(VideoThumbnail, {
-      ...themeTokens,
-      isPlaying: isPlaying,
-      layout: layout,
+      $borderWidth: themeTokens.borderWidth,
+      $borderColor: themeTokens.borderColor,
+      $borderRadius: themeTokens.borderRadius,
+      $isPlaying: isPlaying,
+      $layout: layout,
       children: /*#__PURE__*/_jsx(VideoSplash, {
         simpleMode: true,
         poster: video.posterSrc || `https://img.youtube.com/vi/${video.videoId}/maxresdefault.jpg`,
@@ -120,7 +122,6 @@ const VideoPickerThumbnail = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
         flexShrink: 1
       },
       children: [/*#__PURE__*/_jsx(ThumbnailTitleContainer, {
-        viewport: viewport,
         children: /*#__PURE__*/_jsx(Typography, {
           variant: {
             bold: true
@@ -178,12 +179,12 @@ const VideoPickerThumbnail = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
       }];
     },
     ref: ref,
-    children: _ref10 => {
+    children: _ref0 => {
       let {
         hovered: hover,
         focused: focus,
         pressed
-      } = _ref10;
+      } = _ref0;
       const themeTokens = getTokens({
         hover,
         focus,
@@ -194,7 +195,10 @@ const VideoPickerThumbnail = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
         space: layout === 'vertical' ? 2 : 3,
         direction: layout === 'vertical' ? 'column' : 'row',
         children: [/*#__PURE__*/_jsx(ImageContainer, {
-          ...themeTokens,
+          $outerBorderGap: themeTokens.outerBorderGap,
+          $outerBorderWidth: themeTokens.outerBorderWidth,
+          $outerBorderColor: themeTokens.outerBorderColor,
+          $outerBorderRadius: themeTokens.outerBorderRadius,
           children: renderThumbnailImage(themeTokens)
         }), renderThumbnailInfo(themeTokens)]
       });
@@ -212,5 +216,4 @@ VideoPickerThumbnail.propTypes = {
   itemPositions: itemPositionsPropType,
   index: PropTypes.number,
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-};
-export default VideoPickerThumbnail;
+};

package/lib/esm/VideoPicker/VideoSlider.js

@@ -6,7 +6,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const {
   useItemPositions
 } = horizontalScrollUtils;
-const VideoSlider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const VideoSlider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
@@ -77,5 +77,4 @@ const VideoSlider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 VideoSlider.displayName = 'VideoSlider';
 VideoSlider.propTypes = {
   children: PropTypes.node
-};
-export default VideoSlider;
+};

package/lib/esm/WaffleGrid/WaffleGrid.js

@@ -1,19 +1,19 @@
-import React, { createElement as _createElement } from 'react';
+import React 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 { OrderedListBase } from '../OrderedList/OrderedListBase';
+import { OrderedListItemBase } from '../OrderedList/OrderedListItemBase';
+import { Image } from '../Image/Image';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const row = (rowSize, rowBorderWidth) => ({
   flexBasis: `calc(100% / ${rowSize})`,
-  [`:not(:nth-of-type(${rowSize}n + 1))`]: {
+  [`&:not(:nth-of-type(${rowSize}n + 1))`]: {
     borderLeftWidth: `${rowBorderWidth}px`
   },
-  [`:nth-of-type(n+${rowSize + 1})`]: {
+  [`&:nth-of-type(n+${rowSize + 1})`]: {
     borderTopWidth: `${rowBorderWidth}px`
   }
 });
@@ -24,17 +24,18 @@ const Container = /*#__PURE__*/styled(OrderedListBase).withConfig({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap',
+  alignContent: 'stretch',
   justifyContent: 'flex-start'
 });
-const Item = /*#__PURE__*/styled(ItemBase).withConfig({
+const Item = /*#__PURE__*/styled(OrderedListItemBase).withConfig({
   displayName: "WaffleGrid__Item",
   componentId: "components-web__sc-ec8g0a-1"
 })(_ref => {
   let {
-    rowSize,
-    itemPadding,
-    itemBorderColor,
-    rowBorderWidth
+    $rowSize,
+    $itemPadding,
+    $itemBorderColor,
+    $rowBorderWidth
   } = _ref;
   return {
     display: 'flex',
@@ -43,15 +44,16 @@ const Item = /*#__PURE__*/styled(ItemBase).withConfig({
     justifyContent: 'center',
     flexGrow: 1,
     flexShrink: 1,
-    padding: `${itemPadding}px`,
+    padding: `${$itemPadding}px`,
     boxSizing: 'border-box',
     borderStyle: 'solid',
-    borderColor: itemBorderColor,
+    borderColor: $itemBorderColor,
     borderWidth: 0,
     '& > a': {
-      alignSelf: 'center'
+      alignSelf: 'center',
+      width: '100%'
     },
-    ...row(rowSize, rowBorderWidth)
+    ...row($rowSize, $rowBorderWidth)
   };
 });
 const Center = /*#__PURE__*/styled('div').withConfig({
@@ -67,7 +69,7 @@ const Center = /*#__PURE__*/styled('div').withConfig({
 /**
  * The WaffleGrid is used to show items in a waffle like manner with borders surrounding the element
  */
-const WaffleGrid = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const WaffleGrid = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     items,
     rowSize = null,
@@ -85,35 +87,37 @@ const WaffleGrid = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   return /*#__PURE__*/_jsx(Container, {
     ref: ref,
     ...selectProps(rest),
-    children: items.map(child => /*#__PURE__*/_createElement(Item, {
-      ...themeTokens,
-      key: child.href,
-      rowSize: rowSize ? currentRowSize : themeTokens.rowSize
-    }, /*#__PURE__*/_jsx(Link, {
-      href: child.href,
-      LinkRouter: child.LinkRouter || LinkRouter,
-      linkRouterProps: {
-        ...linkRouterProps,
-        ...child.linkRouterProps
-      },
-      children: /*#__PURE__*/_jsxs(Center, {
-        children: [typeof child.image === 'string' ?
-        /*#__PURE__*/
-        // Assuming that string passed is the image URL
-        _jsx(Image, {
-          src: child.image,
-          alt: child.imageAltText,
-          width: 96
-        }) :
-        // Otherwise it must be an arbitrary content, which we just display by itself
-        child.image, /*#__PURE__*/_jsx(Typography, {
-          variant: {
-            weight: 'semibold'
-          },
-          children: child.text
-        })]
+    children: items.map(child => /*#__PURE__*/_jsx(Item, {
+      $rowSize: rowSize ? currentRowSize : themeTokens.rowSize,
+      $itemPadding: themeTokens.itemPadding,
+      $itemBorderColor: themeTokens.itemBorderColor,
+      $rowBorderWidth: themeTokens.rowBorderWidth,
+      children: /*#__PURE__*/_jsx(Link, {
+        href: child.href,
+        LinkRouter: child.LinkRouter || LinkRouter,
+        linkRouterProps: {
+          ...linkRouterProps,
+          ...child.linkRouterProps
+        },
+        children: /*#__PURE__*/_jsxs(Center, {
+          children: [typeof child.image === 'string' ?
+          /*#__PURE__*/
+          // Assuming that string passed is the image URL
+          _jsx(Image, {
+            src: child.image,
+            alt: child.imageAltText,
+            width: 96
+          }) :
+          // Otherwise it must be an arbitrary content, which we just display by itself
+          child.image, /*#__PURE__*/_jsx(Typography, {
+            variant: {
+              weight: 'semibold'
+            },
+            children: child.text
+          })]
+        })
       })
-    })))
+    }, child.href))
   });
 });
 WaffleGrid.displayName = 'WaffleGrid';
@@ -151,5 +155,4 @@ WaffleGrid.propTypes = {
    */
   rowSize: responsiveProps.getTypeOptionallyByViewport(PropTypes.number),
   ...withLinkRouter.propTypes
-};
-export default WaffleGrid;
+};

package/lib/esm/WebVideo/WebVideo.js

@@ -3,7 +3,7 @@ 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 { VideoSplash } from '../shared/VideoSplash/VideoSplash';
 import { htmlAttrs } from '../utils';
 import { triggerInProgressVideoIntervals, YoutubePlayerState } from './utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -41,10 +41,10 @@ const AspectLimiter = /*#__PURE__*/styled.div.withConfig({
   displayName: "WebVideo__AspectLimiter",
   componentId: "components-web__sc-327a6k-2"
 })(props => ({
-  ...aspectRatios[props.aspectRatio],
+  ...aspectRatios[props.$aspectRatio],
   position: 'relative'
 }));
-const WebVideo = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const WebVideo = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     videoId,
     aspectRatio = '16:9',
@@ -102,7 +102,7 @@ const WebVideo = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     "data-testid": "web-video-container",
     ...selectProps(rest),
     children: /*#__PURE__*/_jsx(AspectLimiter, {
-      aspectRatio: aspectRatio,
+      $aspectRatio: aspectRatio,
       children: started ? /*#__PURE__*/_jsx(StyledYoutubePlayer, {
         videoId: videoId,
         opts: {
@@ -186,5 +186,4 @@ export const VideoProps = {
    */
   onProgress: PropTypes.func
 };
-WebVideo.propTypes = VideoProps;
-export default WebVideo;
+WebVideo.propTypes = VideoProps;