@telus-uds/components-web 2.21.1 → 2.22.0

package/lib/Video/index.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _Video = _interopRequireDefault(require("./Video"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _Video.default;
 exports.default = _default;

package/lib/VideoPicker/VideoPicker.js

@@ -4,37 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _systemConstants = require("@telus-uds/system-constants");
-
 var _componentsBase = require("@telus-uds/components-base");
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _videoPropType = require("./videoPropType");
-
 var _VideoPickerThumbnail = _interopRequireDefault(require("./VideoPickerThumbnail"));
-
 var _VideoPickerPlayer = _interopRequireDefault(require("./VideoPickerPlayer"));
-
 var _VideoSlider = _interopRequireDefault(require("./VideoSlider"));
-
 var _utils = require("../utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-
 const framedContainerStyles = _ref => {
   let {
     framedContainerBackgroundColor,
@@ -45,7 +29,6 @@ const framedContainerStyles = _ref => {
   } = _ref;
   return (0, _styledComponents.css)(["background-color:", ";border:", "px solid ", ";border-radius:", "px;& > div{max-height:", "px;}"], framedContainerBackgroundColor, framedContainerBorderWidth, framedContainerBorderColor, framedContainerBorderRadius, framedMaxHeight);
 };
-
 const VideoPickerContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "VideoPicker__VideoPickerContainer",
   componentId: "components-web__sc-x6lxp0-0"
@@ -56,7 +39,6 @@ const VideoPickerContainer = /*#__PURE__*/_styledComponents.default.div.withConf
   } = _ref2;
   return isFramed && framedContainerStyles(tokens);
 });
-
 const framedPlayerContainerStyles = _ref3 => {
   let {
     framedMaxHeight,
@@ -64,7 +46,6 @@ const framedPlayerContainerStyles = _ref3 => {
   } = _ref3;
   return (0, _styledComponents.css)(["width:66.67%;padding:", "px;max-height:", "px;flex-shrink:0;box-sizing:border-box;"], framedContainerPadding, framedMaxHeight);
 };
-
 const VideoPlayerContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "VideoPicker__VideoPlayerContainer",
   componentId: "components-web__sc-x6lxp0-1"
@@ -75,22 +56,18 @@ const VideoPlayerContainer = /*#__PURE__*/_styledComponents.default.div.withConf
   } = _ref4;
   return isFramed && framedPlayerContainerStyles(tokens);
 });
-
 const framedVideoListContainerStyle = /*#__PURE__*/(0, _styledComponents.css)(["max-height:", "px;overflow:auto;flex-direction:column;"], _ref5 => {
   let {
     framedMaxHeight
   } = _ref5;
   return framedMaxHeight;
 });
-
 const VideoListContainer = /*#__PURE__*/_styledComponents.default.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 = _ref6 => {
   var _videoList$;
-
   let {
     videoList = [],
     selectedVideo = (_videoList$ = videoList[0]) === null || _videoList$ === void 0 ? void 0 : _videoList$.videoId,
@@ -110,8 +87,9 @@ const VideoPicker = _ref6 => {
   (0, _react.useEffect)(() => {
     // Update current video if parent changes which video id it passes down
     setCurrentVideoId(selectedVideo);
-  }, [selectedVideo]); // `frame` variant should only work on larger screens
+  }, [selectedVideo]);
 
+  // `frame` variant should only work on larger screens
   const isFramed = frame && [_systemConstants.viewports.lg, _systemConstants.viewports.xl].includes(viewport);
   const hasSlider = !frame && [_systemConstants.viewports.md, _systemConstants.viewports.lg, _systemConstants.viewports.xl].includes(viewport);
   const listElements = videoList.map((video, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPickerThumbnail.default, {
@@ -143,7 +121,8 @@ const VideoPicker = _ref6 => {
       space: isFramed ? 0 : 4 // everything has internal padding in `frame` variant
       ,
       direction: isFramed ? 'row' : 'column',
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(VideoPlayerContainer, { ...themeTokens,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(VideoPlayerContainer, {
+        ...themeTokens,
         isFramed: isFramed,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPickerPlayer.default, {
           video: currentVideo,
@@ -161,31 +140,26 @@ const VideoPicker = _ref6 => {
     })
   });
 };
-
-VideoPicker.propTypes = { ...selectedSystemPropTypes,
+VideoPicker.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: (0, _componentsBase.getTokensPropType)('VideoPicker'),
-
   /**
    * Id of the currently selected video (defaults to the first video if not set).
    */
   selectedVideo: _propTypes.default.string,
-
   /**
    * An array of Video objects.
    */
   videoList: _propTypes.default.arrayOf(_videoPropType.VideoPropType),
-
   /**
    * Use to display the picker in a container and the playlist as a sidebar (only available for breakpoints LG and larger)
    */
   frame: _propTypes.default.bool,
-
   /**
    * Callback function trigerred when the video player starts playing video.
    * @param {object} video - The video object that is playing.
    */
   onStartVideo: _propTypes.default.func,
-
   /**
    * Callback function trigerred when a video is selected from the thumbnail list.
    * @param {object} video - The video object that is selected.

package/lib/VideoPicker/VideoPickerPlayer.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _componentsBase = require("@telus-uds/components-base");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _WebVideo = _interopRequireDefault(require("../WebVideo/WebVideo"));
-
 var _videoPropType = require("./videoPropType");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const VideoPickerPlayer = _ref => {
   let {
     video = {},
@@ -32,7 +24,8 @@ const VideoPickerPlayer = _ref => {
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: videoPlayerRef,
-      children: video.videoId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_WebVideo.default, { ...video,
+      children: video.videoId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_WebVideo.default, {
+        ...video,
         onStart: () => onStartVideo(video)
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
@@ -51,7 +44,6 @@ const VideoPickerPlayer = _ref => {
     })]
   });
 };
-
 VideoPickerPlayer.propTypes = {
   video: _videoPropType.VideoPropType,
   videoPlayerRef: _videoPropType.RefPropType,

package/lib/VideoPicker/VideoPickerThumbnail.js

@@ -4,37 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
-
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _systemConstants = require("@telus-uds/system-constants");
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _componentsBase = require("@telus-uds/components-base");
-
 var _helpers = require("../shared/VideoSplash/helpers");
-
 var _videoPropType = require("./videoPropType");
-
 var _VideoSplash = _interopRequireDefault(require("../shared/VideoSplash/VideoSplash"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const {
   getItemPositionLayoutHandler,
   itemPositionsPropType
-} = _componentsBase.horizontalScrollUtils; // Use a React Native (web) outer container so it can take an onLayout callback, to
-// access position in VideoSlider's UDS HorizontalScroll and update its itemPositions
+} = _componentsBase.horizontalScrollUtils;
 
+// Use a React Native (web) outer container so it can take an onLayout callback, to
+// access position in VideoSlider's UDS HorizontalScroll and update its itemPositions
 const createReactNativeStyles = _ref => {
   let {
     pressablePaddingBottom,
@@ -60,7 +48,6 @@ const createReactNativeStyles = _ref => {
     }
   });
 };
-
 const ImageContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "VideoPickerThumbnail__ImageContainer",
   componentId: "components-web__sc-1glxurq-0"
@@ -70,7 +57,6 @@ const ImageContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   } = _ref2;
   return outerBorderRadius;
 });
-
 const VideoThumbnail = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "VideoPickerThumbnail__VideoThumbnail",
   componentId: "components-web__sc-1glxurq-1"
@@ -95,12 +81,10 @@ const VideoThumbnail = /*#__PURE__*/_styledComponents.default.div.withConfig({
   } = _ref6;
   return borderRadius;
 });
-
 const ThumbnailTitleContainer = /*#__PURE__*/_styledComponents.default.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 = _ref7 => {
   let {
     videoPlayerRef,
@@ -119,9 +103,9 @@ const VideoPickerThumbnail = _ref7 => {
     timestamp
   } = (0, _helpers.getTimestamp)(video.videoLength, video.copy);
   const isPlaying = selectedVideoId === video.videoId;
-
   const renderThumbnailImage = themeTokens => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoThumbnail, { ...themeTokens,
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoThumbnail, {
+      ...themeTokens,
       isPlaying: isPlaying,
       layout: layout,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSplash.default, {
@@ -132,7 +116,6 @@ const VideoPickerThumbnail = _ref7 => {
       })
     });
   };
-
   const renderThumbnailInfo = _ref8 => {
     let {
       titleColor,
@@ -165,19 +148,15 @@ const VideoPickerThumbnail = _ref7 => {
       })]
     });
   };
-
   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');
       if (splashButton) splashButton.focus();
     }
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     onLayout: handleLayout,
     onPress: () => onSelectVideo(video),
@@ -221,14 +200,14 @@ const VideoPickerThumbnail = _ref7 => {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
         space: layout === 'vertical' ? 2 : 3,
         direction: layout === 'vertical' ? 'column' : 'row',
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ImageContainer, { ...themeTokens,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ImageContainer, {
+          ...themeTokens,
           children: renderThumbnailImage(themeTokens)
         }), renderThumbnailInfo(themeTokens)]
       });
     }
   }, video.videoId);
 };
-
 VideoPickerThumbnail.propTypes = {
   selectedVideoId: _propTypes.default.string,
   onSelectVideo: _propTypes.default.func,

package/lib/VideoPicker/VideoSlider.js

@@ -4,27 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _componentsBase = require("@telus-uds/components-base");
-
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 const {
   useItemPositions
 } = _componentsBase.horizontalScrollUtils;
-
 const VideoSlider = _ref => {
   let {
     children
@@ -36,7 +26,6 @@ const VideoSlider = _ref => {
     previousIcon: PreviousIcon,
     nextIcon: NextIcon
   } = (0, _componentsBase.useThemeTokens)('VideoPickerSlider');
-
   const onLayout = _ref2 => {
     let {
       nativeEvent: {
@@ -47,15 +36,16 @@ const VideoSlider = _ref => {
     } = _ref2;
     setContainerWidth(width);
   };
-
   const itemsGap = 32; // '5' on spacing scale
-
   const itemsCount = viewport === 'lg' || viewport === 'xl' ? 4 : 3;
   const itemGapPortioned = (itemsCount - 1) * itemsGap / itemsCount;
-  const itemWidth = containerWidth === null ? // For first render, we don't know container width, so avoid flicker with static % width
-  `calc(${Math.round(100 / itemsCount)}% - ${Math.round(itemGapPortioned)}px)` : // After first render, can't use % widths because parent is > 100% width horizontal scroll area
+  const itemWidth = containerWidth === null ?
+  // For first render, we don't know container width, so avoid flicker with static % width
+  `calc(${Math.round(100 / itemsCount)}% - ${Math.round(itemGapPortioned)}px)` :
+  // After first render, can't use % widths because parent is > 100% width horizontal scroll area
   Math.max(containerWidth / itemsCount - itemGapPortioned, 0 // Prevent negative width breaking layout on very narrow containers
   );
+
   const content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.StackView, {
     space: 5,
     direction: "row",
@@ -83,7 +73,8 @@ const VideoSlider = _ref => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     onLayout: onLayout,
     style: overflow,
-    children: containerWidth === null ? // Use a 100% width non-scrollable parent until containerWidth is known, to avoid flicker
+    children: containerWidth === null ?
+    // Use a 100% width non-scrollable parent until containerWidth is known, to avoid flicker
     content : /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.HorizontalScroll, {
       ScrollButton: _componentsBase.HorizontalScrollButton,
       itemPositions: itemPositions,
@@ -92,7 +83,6 @@ const VideoSlider = _ref => {
     })
   });
 };
-
 VideoSlider.propTypes = {
   children: _propTypes.default.node
 };

package/lib/VideoPicker/index.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _VideoPicker = _interopRequireDefault(require("./VideoPicker"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _VideoPicker.default;
 exports.default = _default;

package/lib/VideoPicker/videoPropType.js

@@ -4,22 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.VideoPropType = exports.RefPropType = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _WebVideo = require("../WebVideo/WebVideo");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const VideoPropType = _propTypes.default.shape({ ..._WebVideo.VideoProps,
+const VideoPropType = _propTypes.default.shape({
+  ..._WebVideo.VideoProps,
   title: _propTypes.default.string,
   description: _propTypes.default.string
 });
-
 exports.VideoPropType = VideoPropType;
-
 const RefPropType = _propTypes.default.shape({
   current: _propTypes.default.object
 });
-
 exports.RefPropType = RefPropType;

package/lib/WaffleGrid/WaffleGrid.js

@@ -4,33 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _componentsBase = require("@telus-uds/components-base");
-
 var _OrderedListBase = _interopRequireDefault(require("../OrderedList/OrderedListBase"));
-
 var _ItemBase = _interopRequireDefault(require("../OrderedList/ItemBase"));
-
 var _Image = _interopRequireDefault(require("../Image"));
-
 var _utils = require("../utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-
 const row = (rowSize, rowBorderWidth) => ({
   flexBasis: `calc(100% / ${rowSize})`,
   [`:not(:nth-of-type(${rowSize}n + 1))`]: {
@@ -40,7 +26,6 @@ const row = (rowSize, rowBorderWidth) => ({
     borderTopWidth: `${rowBorderWidth}px`
   }
 });
-
 const Container = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.default).withConfig({
   displayName: "WaffleGrid__Container",
   componentId: "components-web__sc-ec8g0a-0"
@@ -87,10 +72,10 @@ const Center = /*#__PURE__*/(0, _styledComponents.default)('div').withConfig({
   alignItems: 'center',
   textAlign: 'center'
 });
+
 /**
  * The WaffleGrid is used to show items in a waffle like manner with borders surrounding the element
  */
-
 const WaffleGrid = _ref2 => {
   let {
     items,
@@ -106,14 +91,17 @@ const WaffleGrid = _ref2 => {
     viewport
   });
   const currentRowSize = (0, _componentsBase.useResponsiveProp)(rowSize);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, { ...selectProps(rest),
-    children: items.map(child => /*#__PURE__*/(0, _react.createElement)(Item, { ...themeTokens,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+    ...selectProps(rest),
+    children: items.map(child => /*#__PURE__*/(0, _react.createElement)(Item, {
+      ...themeTokens,
       key: child.href,
       rowSize: rowSize ? currentRowSize : themeTokens.rowSize
     }, /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, {
       href: child.href,
       LinkRouter: child.LinkRouter || LinkRouter,
-      linkRouterProps: { ...linkRouterProps,
+      linkRouterProps: {
+        ...linkRouterProps,
         ...child.linkRouterProps
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Center, {
@@ -125,7 +113,8 @@ const WaffleGrid = _ref2 => {
           alt: child.imageAltText,
           width: 96,
           height: 128
-        }) : // Otherwise it must be an arbitrary content, which we just display by itself
+        }) :
+        // Otherwise it must be an arbitrary content, which we just display by itself
         child.image, /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
           variant: {
             weight: 'semibold'
@@ -136,9 +125,8 @@ const WaffleGrid = _ref2 => {
     })))
   });
 };
-
-WaffleGrid.propTypes = { ...selectedSystemPropTypes,
-
+WaffleGrid.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * The image and the link to display. `items` should be an array of objects with the following keys:
    */
@@ -147,30 +135,25 @@ WaffleGrid.propTypes = { ...selectedSystemPropTypes,
      * The src attribute for the HTML img element or custom JSX content to render instead
      */
     image: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
-
     /**
      * The alt attribute for the HTML img element (note that this is ignored if a custom
      * JSX content is used instead of an image URL)
      */
     imageAltText: _propTypes.default.string,
-
     /**
      * The text displayed under the image
      */
     text: _propTypes.default.string,
-
     /**
      * Target URL
      */
     href: _propTypes.default.string,
     ..._componentsBase.withLinkRouter.propTypes
   })).isRequired,
-
   /**
    * Sets the tokens for WaffleGrid element.
    */
   tokens: (0, _componentsBase.getTokensPropType)('WaffleGrid'),
-
   /**
    * Row size, optionally depending on the viewport
    */

package/lib/WaffleGrid/index.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _WaffleGrid = _interopRequireDefault(require("./WaffleGrid"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _WaffleGrid.default;
 exports.default = _default;

package/lib/WebPortal/WebPortal.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _reactDom = _interopRequireDefault(require("react-dom"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * WebPortal component renders its children in a separate portal container appended to the document body.
  *
@@ -28,6 +24,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {React.ReactNode} props.children - The content to render within the portal.
  * @returns {React.ReactPortal} The React portal component.
  */
+
 const WebPortal = _ref => {
   let {
     children
@@ -41,6 +38,5 @@ const WebPortal = _ref => {
   }, [portalContainer]);
   return /*#__PURE__*/_reactDom.default.createPortal(children, portalContainer);
 };
-
 var _default = WebPortal;
 exports.default = _default;

package/lib/WebPortal/index.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _WebPortal = _interopRequireDefault(require("./WebPortal"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _WebPortal.default;
 exports.default = _default;