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

package/lib/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, CarouselItem, CarouselProvider, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, ColourToggle, Divider, DownloadApp, ExpandCollapse, ExpandCollapseMini, Feedback, FlexGrid, FlexGridCol, FlexGridRow, 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,
+A11yInfoProvider, A11yText, ActionCard, ActivityIndicator, Autocomplete, BaseProvider, Box, Button, ButtonLink, ButtonGroup, ButtonDropdown, CardGroup, Carousel, CarouselItem, CarouselTabs, CarouselProvider, ViewportProvider, ThemeProvider, Checkbox, CheckboxGroup, ColourToggle, Divider, DownloadApp, ExpandCollapse, ExpandCollapseAccordion, ExpandCollapsePanel, ExpandCollapseMini, Feedback, FileUpload, FlexGrid, FlexGridCol, FlexGridRow, Icon, InputLabel, InputSupports, ChevronLink, Link, TextButton, Listbox, ListboxOverlay, Modal, MultiSelectFilter, Notification, Pagination, PaginationPageButton, PaginationPageButtonBase, Portal, QuickLinks, QuickLinksItem, QuickLinksFeature, QuickLinksFeatureItem, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SelectItem, SelectGroup, Shortcuts, ShortcutsItem, SideNav, SideNavItem, SideNavItemsGroup, Skeleton, SkipLink, Spacer, StackView, StackWrap, Status, StepTracker, TabBar, TabBarItem, Tabs, Tags, 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/esm/index.js

@@ -1,42 +1,51 @@
 'use client';
 
-export { default as Badge } from './Badge';
-export * from './OrderedList';
-export { default as OrderedList } from './OrderedList';
-export { default as PreviewCard } from './PreviewCard';
-export { default as ResponsiveImage } from './ResponsiveImage';
-export { default as Ribbon } from './Ribbon';
-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 Callout } from './Callout';
-export { default as PriceLockup } from './PriceLockup';
-export { default as Footnote } from './Footnote';
-export { default as QuantitySelector } from './QuantitySelector';
-export { default as IconButton } from './IconButton';
-export { default as Image, DefaultImage } from './Image';
+export { Badge } from './Badge/Badge';
+export { OrderedListItem } from './OrderedList/OrderedListItem';
+export { OrderedList } from './OrderedList/OrderedList';
+export { PreviewCard, PreviewCardBase } from './PreviewCard/PreviewCard';
+export { PreviewCardAuthorDate } from './PreviewCard/PreviewCardAuthorDate';
+export { ResponsiveImage } from './ResponsiveImage/ResponsiveImage';
+export { Ribbon } from './Ribbon/Ribbon';
+export { Countdown } from './Countdown/Countdown';
+export { DatePicker } from './DatePicker/DatePicker';
+export { Paragraph } from './Paragraph/Paragraph';
+export { Span } from './Span/Span';
+export { Callout } from './Callout/Callout';
+export { PriceLockup } from './PriceLockup/PriceLockup';
+export { Footnote } from './Footnote/Footnote';
+export { FootnoteLink } from './Footnote/FootnoteLink';
+export { QuantitySelector } from './QuantitySelector/QuantitySelector';
+export { IconButton } from './IconButton/IconButton';
+export { Image, DefaultImage } from './Image/Image';
 export { transformGradient } from './utils';
-export { default as Breadcrumbs } from './Breadcrumbs';
-export { default as BlockQuote } from './BlockQuote';
-export { default as OptimizeImage } from './OptimizeImage';
-export { default as Testimonial } from './Testimonial';
-export { default as Toast } from './Toast';
-export * from './Table';
-export { default as Table } from './Table';
-export { default as WebVideo } from './WebVideo';
-export { default as WaffleGrid } from './WaffleGrid';
-export { default as Spinner } from './Spinner';
-export { default as VideoPicker } from './VideoPicker';
-export { default as Video } from './Video';
-export { default as StoryCard } from './StoryCard';
-export { default as Disclaimer } from './Disclaimer';
-export { default as Card } from './Card';
-export * from './List';
-export { default as List } from './List';
-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 { Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
+export { BreadcrumbItem } from './Breadcrumbs/BreadcrumbItem';
+export { BlockQuote } from './BlockQuote/BlockQuote';
+export { OptimizeImage } from './OptimizeImage/OptimizeImage';
+export { Testimonial } from './Testimonial/Testimonial';
+export { Toast } from './Toast/Toast';
+export { Table } from './Table/Table';
+export { TableRow } from './Table/TableRow';
+export { TableCell } from './Table/TableCell';
+export { TableSubHeading } from './Table/TableSubHeading';
+export { TableHeader } from './Table/TableHeader';
+export { TableBody } from './Table/TableBody';
+export { WebVideo } from './WebVideo/WebVideo';
+export { WaffleGrid } from './WaffleGrid/WaffleGrid';
+export { Spinner } from './Spinner/Spinner';
+export { VideoPicker } from './VideoPicker/VideoPicker';
+export { Video } from './Video/Video';
+export { StoryCard, StoryCardBase } from './StoryCard/StoryCard';
+export { Disclaimer } from './Disclaimer/Disclaimer';
+export { Card } from './Card/Card';
+export { List } from './List/List';
+export { ListItem } from './List/ListItem';
+export { TermsAndConditions } from './TermsAndConditions/TermsAndConditions';
+export { NavigationBar } from './NavigationBar/NavigationBar';
+export { NavigationItem } from './NavigationBar/NavigationItem';
+export { Progress } from '@telus-uds/components-base';
+export { ProgressBar } from './Progress/ProgressBar';
+export { SkeletonProvider } from './SkeletonProvider/SkeletonProvider';
 export { ssrStyles } from './utils';
 export * from './baseExports';

package/lib/esm/server.js

@@ -1,5 +1,4 @@
-import ServerThemedImage from './Image/server';
+import { ServerThemedImage } from './Image/server';
 
 // Export themed components
-/* eslint-disable import/prefer-default-export */
 export { ServerThemedImage as Image };

package/lib/esm/shared/ConditionalWrapper/ConditionalWrapper.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
-const ConditionalWrapper = _ref => {
+export const ConditionalWrapper = _ref => {
   let {
     children,
     condition,
@@ -18,5 +18,4 @@ ConditionalWrapper.propTypes = {
   condition: PropTypes.bool,
   WrapperComponent: PropTypes.elementType,
   wrapperProps: PropTypes.object
-};
-export default ConditionalWrapper;
+};

package/lib/esm/shared/FullBleedContent/FullBleedContent.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import ResponsiveImage from '../../ResponsiveImage';
+import { ResponsiveImage } from '../../ResponsiveImage/ResponsiveImage';
 
 // Interactive overlay opacity constants
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -41,23 +41,23 @@ const FullBleedContentContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1130ea5-0"
 })(_ref2 => {
   let {
-    borderBottomLeftRadius,
-    borderBottomRightRadius,
-    borderTopLeftRadius,
-    borderTopRightRadius,
-    opacity,
-    transform,
-    hasCardState
+    $borderBottomLeftRadius,
+    $borderBottomRightRadius,
+    $borderTopLeftRadius,
+    $borderTopRightRadius,
+    $opacity,
+    $transform,
+    $hasCardState
   } = _ref2;
   return {
-    position: hasCardState ? 'relative' : 'static',
+    position: $hasCardState ? 'relative' : 'static',
     overflow: 'hidden',
-    borderBottomLeftRadius,
-    borderBottomRightRadius,
-    borderTopLeftRadius,
-    borderTopRightRadius,
-    opacity,
-    transform,
+    borderBottomLeftRadius: $borderBottomLeftRadius,
+    borderBottomRightRadius: $borderBottomRightRadius,
+    borderTopLeftRadius: $borderTopLeftRadius,
+    borderTopRightRadius: $borderTopRightRadius,
+    opacity: $opacity,
+    transform: $transform,
     transition: 'opacity 0.2s ease, transform 0.2s ease'
   };
 });
@@ -88,7 +88,7 @@ const InteractiveOverlay = /*#__PURE__*/styled.div.withConfig({
  * a number of sources corresponding to the `ResponsiveImage` component API,
  * or a custom component.
  */
-const FullBleedContent = _ref4 => {
+export const FullBleedContent = _ref4 => {
   let {
     borderRadius,
     content,
@@ -103,9 +103,15 @@ const FullBleedContent = _ref4 => {
       overlayOpacity = OVERLAY_OPACITY_HOVER;
     }
   }
+  const borderRadiusStyles = borderRadius ? {
+    $borderBottomLeftRadius: borderRadius.borderBottomLeftRadius,
+    $borderBottomRightRadius: borderRadius.borderBottomRightRadius,
+    $borderTopLeftRadius: borderRadius.borderTopLeftRadius,
+    $borderTopRightRadius: borderRadius.borderTopRightRadius
+  } : {};
   return /*#__PURE__*/_jsxs(FullBleedContentContainer, {
-    ...borderRadius,
-    hasCardState: !!cardState,
+    ...borderRadiusStyles,
+    $hasCardState: !!cardState,
     children: [content ?? /*#__PURE__*/_jsx(ResponsiveImage, {
       ...selectFullBleedContentProps(rest)
     }), cardState && /*#__PURE__*/_jsx(InteractiveOverlay, {
@@ -150,5 +156,4 @@ FullBleedContent.propTypes = {
   xsSrc: PropTypes.string,
   smSrc: PropTypes.string,
   fallbackSrc: PropTypes.string
-};
-export default FullBleedContent;
+};

package/lib/esm/shared/FullBleedContent/getFullBleedBorderRadius.js

@@ -10,7 +10,7 @@
  * @param {boolean} hasFooter
  * @returns
  */
-const getFullBleedBorderRadius = function (borderRadius, position) {
+export const getFullBleedBorderRadius = function (borderRadius, position) {
   let hasFooter = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   const innerBorderRadius = {
     borderBottomLeftRadius: 0,
@@ -51,5 +51,4 @@ const getFullBleedBorderRadius = function (borderRadius, position) {
     }
   }
   return innerBorderRadius;
-};
-export default getFullBleedBorderRadius;
+};

package/lib/esm/shared/FullBleedContent/index.js

@@ -1,4 +1,3 @@
-import FullBleedContent from './FullBleedContent';
-export default FullBleedContent;
-export { default as getFullBleedBorderRadius } from './getFullBleedBorderRadius';
-export { default as useFullBleedContentProps, getFullBleedPaddingSides } from './useFullBleedContentProps';
+export { FullBleedContent } from './FullBleedContent';
+export { getFullBleedBorderRadius } from './getFullBleedBorderRadius';
+export { useFullBleedContentProps, getFullBleedPaddingSides } from './useFullBleedContentProps';

package/lib/esm/shared/FullBleedContent/useFullBleedContentProps.js

@@ -34,7 +34,7 @@ const getContentStackAlign = fullBleedContentAlign => {
  * @param {string} position - 'top' | 'bottom' | 'left' | 'right' | 'none'
  * @returns {object} Boolean flags for which sides to apply padding
  */
-const getFullBleedPaddingSides = position => ({
+export const getFullBleedPaddingSides = position => ({
   applyPaddingTop: position !== 'bottom',
   applyPaddingBottom: position !== 'top',
   applyPaddingLeft: position !== 'right',
@@ -48,7 +48,7 @@ const getFullBleedPaddingSides = position => ({
  * @param {object} [fullBleedContent] - a set of valid proptypes for FullBleedContent
  * @returns
  */
-const useFullBleedContentProps = fullBleedContent => {
+export const useFullBleedContentProps = fullBleedContent => {
   const {
     align: fullBleedContentAlignProp,
     position: fullBleedContentPositionProp,
@@ -73,6 +73,4 @@ const useFullBleedContentProps = fullBleedContent => {
     fullBleedContentChildrenAlign,
     fullBleedPaddingSides
   };
-};
-export { getFullBleedPaddingSides };
-export default useFullBleedContentProps;
+};

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

@@ -30,22 +30,22 @@ const ButtonContent = /*#__PURE__*/styled.div.withConfig({
   height: 64,
   background: _ref => {
     let {
-      buttonContentBackground
+      $buttonContentBackground
     } = _ref;
-    return buttonContentBackground ?? 'none';
+    return $buttonContentBackground ?? 'none';
   },
   borderRadius: '100%',
   transition: 'background 0.2s ease-in-out',
   [`${ButtonContainer}:hover &`]: {
     background: _ref2 => {
       let {
-        buttonContentChildrenBackground
+        $buttonContentChildrenBackground
       } = _ref2;
-      return buttonContentChildrenBackground;
+      return $buttonContentChildrenBackground;
     }
   }
 });
-const SplashButton = _ref3 => {
+export const SplashButton = _ref3 => {
   let {
     copy,
     tokens,
@@ -66,8 +66,8 @@ const SplashButton = _ref3 => {
   return /*#__PURE__*/_jsx(ButtonContainer, {
     "aria-label": ariaLabel,
     children: /*#__PURE__*/_jsx(ButtonContent, {
-      ...themeTokens,
-      buttonContentChildrenBackground: buttonContentChildrenBackground,
+      $buttonContentBackground: themeTokens.buttonContentBackground,
+      $buttonContentChildrenBackground: buttonContentChildrenBackground,
       children: /*#__PURE__*/_jsx(PlayIcon, {
         size: 27,
         color: playIconColor
@@ -80,5 +80,4 @@ SplashButton.propTypes = {
   tokens: PropTypes.object,
   variant: PropTypes.object,
   copy: PropTypes.oneOf(['en', 'fr'])
-};
-export default SplashButton;
+};

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

@@ -22,63 +22,63 @@ const ButtonContent = /*#__PURE__*/styled.div.withConfig({
 })({
   background: _ref => {
     let {
-      buttonBackground
+      $buttonBackground
     } = _ref;
-    return buttonBackground;
+    return $buttonBackground;
   },
   border: _ref2 => {
     let {
-      buttonBorderColor
+      $buttonBorderColor
     } = _ref2;
-    return `1px solid ${buttonBorderColor}`;
+    return `1px solid ${$buttonBorderColor}`;
   },
   borderRadius: _ref3 => {
     let {
-      buttonRadius
+      $buttonRadius
     } = _ref3;
-    return `${buttonRadius}px`;
+    return `${$buttonRadius}px`;
   },
   position: 'absolute',
   left: _ref4 => {
     let {
-      buttonLeftPosition
+      $buttonLeftPosition
     } = _ref4;
-    return `${buttonLeftPosition}px`;
+    return `${$buttonLeftPosition}px`;
   },
   bottom: _ref5 => {
     let {
-      buttonBottomPosition
+      $buttonBottomPosition
     } = _ref5;
-    return `${buttonBottomPosition}px`;
+    return `${$buttonBottomPosition}px`;
   },
   boxSizing: 'border-box',
   display: 'flex',
   alignItems: 'center',
   minHeight: _ref6 => {
     let {
-      buttonMinHeight
+      $buttonMinHeight
     } = _ref6;
-    return `${buttonMinHeight}px`;
+    return `${$buttonMinHeight}px`;
   },
   paddingRight: _ref7 => {
     let {
-      buttonPaddingLeft
+      $buttonPaddingLeft
     } = _ref7;
-    return `${buttonPaddingLeft}px`;
+    return `${$buttonPaddingLeft}px`;
   },
   paddingLeft: _ref8 => {
     let {
-      buttonPaddingRight
+      $buttonPaddingRight
     } = _ref8;
-    return `${buttonPaddingRight}px`;
+    return `${$buttonPaddingRight}px`;
   },
   transition: 'background 0.2s ease-in-out',
   [`${ButtonContainer}:hover &`]: {
     background: _ref9 => {
       let {
-        buttonContentChildrenBackground
+        $buttonContentChildrenBackground
       } = _ref9;
-      return buttonContentChildrenBackground;
+      return $buttonContentChildrenBackground;
     }
   }
 });
@@ -91,11 +91,11 @@ const PlayIconContainer = /*#__PURE__*/styled.div.withConfig({
   alignItems: 'center',
   width: 32,
   height: 32,
-  background: _ref10 => {
+  background: _ref0 => {
     let {
-      playIconContainerBackground
-    } = _ref10;
-    return playIconContainerBackground ?? 'none';
+      $playIconContainerBackground
+    } = _ref0;
+    return $playIconContainerBackground ?? 'none';
   },
   borderRadius: '100%',
   transition: 'background 0.2s ease-in-out'
@@ -107,30 +107,30 @@ const DetailsContainer = /*#__PURE__*/styled.div.withConfig({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-start',
-  paddingLeft: _ref11 => {
+  paddingLeft: _ref1 => {
     let {
-      detailsContainerPadding
-    } = _ref11;
-    return `${detailsContainerPadding}px`;
+      $detailsContainerPadding
+    } = _ref1;
+    return `${$detailsContainerPadding}px`;
   }
 });
-const selectPlayIconContainerTokens = _ref12 => {
+const selectPlayIconContainerTokens = _ref10 => {
   let {
     playIconContainerBackground
-  } = _ref12;
+  } = _ref10;
   return {
-    playIconContainerBackground
+    $playIconContainerBackground: playIconContainerBackground
   };
 };
-const selectDetailsContainerTokens = _ref13 => {
+const selectDetailsContainerTokens = _ref11 => {
   let {
     detailsContainerPadding
-  } = _ref13;
+  } = _ref11;
   return {
-    detailsContainerPadding
+    $detailsContainerPadding: detailsContainerPadding
   };
 };
-const selectButtonContentTokens = _ref14 => {
+const selectButtonContentTokens = _ref12 => {
   let {
     buttonBackground,
     buttonBorderColor,
@@ -140,36 +140,36 @@ const selectButtonContentTokens = _ref14 => {
     buttonMinHeight,
     buttonPaddingLeft,
     buttonPaddingRight
-  } = _ref14;
+  } = _ref12;
   return {
-    buttonBackground,
-    buttonBorderColor,
-    buttonRadius,
-    buttonLeftPosition,
-    buttonBottomPosition,
-    buttonMinHeight,
-    buttonPaddingLeft,
-    buttonPaddingRight
+    $buttonBackground: buttonBackground,
+    $buttonBorderColor: buttonBorderColor,
+    $buttonRadius: buttonRadius,
+    $buttonLeftPosition: buttonLeftPosition,
+    $buttonBottomPosition: buttonBottomPosition,
+    $buttonMinHeight: buttonMinHeight,
+    $buttonPaddingLeft: buttonPaddingLeft,
+    $buttonPaddingRight: buttonPaddingRight
   };
 };
-const getLabelTokens = _ref15 => {
+const getLabelTokens = _ref13 => {
   let {
     labelFontName: fontName,
     labelFontWeight: fontWeight
-  } = _ref15;
+  } = _ref13;
   return {
     fontName,
     fontWeight
   };
 };
-const SplashButtonWithDetails = _ref16 => {
+export const SplashButtonWithDetails = _ref14 => {
   let {
     label,
     tokens,
     variant,
     copy,
     videoLength
-  } = _ref16;
+  } = _ref14;
   const {
     buttonContentChildrenBackground
   } = useThemeTokens('SplashButtonWithDetails', tokens, variant, {
@@ -186,7 +186,7 @@ const SplashButtonWithDetails = _ref16 => {
     "aria-label": ariaLabel,
     children: /*#__PURE__*/_jsxs(ButtonContent, {
       ...selectButtonContentTokens(themeTokens),
-      buttonContentChildrenBackground: buttonContentChildrenBackground,
+      $buttonContentChildrenBackground: buttonContentChildrenBackground,
       children: [/*#__PURE__*/_jsx(PlayIconContainer, {
         ...selectPlayIconContainerTokens(themeTokens),
         children: /*#__PURE__*/_jsx(PlayIcon, {
@@ -218,5 +218,4 @@ SplashButtonWithDetails.propTypes = {
   variant: PropTypes.object,
   videoLength: PropTypes.number,
   copy: PropTypes.oneOf(['en', 'fr'])
-};
-export default SplashButtonWithDetails;
+};

package/lib/esm/shared/VideoSplash/VideoSplash.js

@@ -3,9 +3,9 @@ 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 { SplashButton } from './SplashButton/SplashButton';
+import { SplashButtonWithDetails } from './SplashButtonWithDetails/SplashButtonWithDetails';
+import { videoText } from '../../Video/videoText';
 import { htmlAttrs } from '../../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
@@ -14,10 +14,10 @@ const SplashBackground = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1ejxt6-0"
 })(_ref => {
   let {
-    videoPoster
+    $videoPoster
   } = _ref;
   return {
-    backgroundImage: `url(${videoPoster})`,
+    backgroundImage: `url(${$videoPoster})`,
     backgroundSize: 'cover',
     backgroundPosition: 'center',
     position: 'absolute',
@@ -28,7 +28,7 @@ const SplashBackground = /*#__PURE__*/styled.div.withConfig({
     cursor: 'pointer'
   };
 });
-const VideoSplash = _ref2 => {
+export const VideoSplash = _ref2 => {
   let {
     poster,
     videoLength,
@@ -43,7 +43,7 @@ const VideoSplash = _ref2 => {
   return /*#__PURE__*/_jsx(SplashBackground, {
     ...selectProps(rest),
     onClick: onClick,
-    videoPoster: poster,
+    $videoPoster: poster,
     children: showDetails ? /*#__PURE__*/_jsx(SplashButtonWithDetails, {
       videoLength: videoLength,
       copy: copy,
@@ -61,5 +61,4 @@ VideoSplash.propTypes = {
   videoLength: PropTypes.number.isRequired,
   simpleMode: PropTypes.bool,
   copy: PropTypes.oneOf(['en', 'fr'])
-};
-export default VideoSplash;
+};

package/lib/esm/shared/VideoSplash/helpers.js

@@ -1,4 +1,4 @@
-import videoText from '../../Video/videoText';
+import { videoText } from '../../Video/videoText';
 export const getTimestamp = (videoLength, copy) => {
   const minutes = Math.floor(videoLength / 60);
   const seconds = Math.ceil(videoLength % 60);

package/lib/esm/utils/index.js

@@ -1,11 +1,11 @@
 import { htmlAttrs, contentfulProps } from '@telus-uds/components-base';
 import { warn, deprecate } from './logger';
 import { transformGradient } from './transforms';
-import useTypographyTheme from './useTypographyTheme';
-import media from './media';
-import ssrStyles from './ssr';
-import isElementFocusable from './isElementFocusable';
-import renderStructuredContent from './renderStructuredContent';
-import useOverlaidPosition from './useOverlaidPosition';
-import scrollToAnchor from './scrollToAnchor';
+import { useTypographyTheme } from './useTypographyTheme';
+import { media } from './media';
+import { ssrStyles } from './ssr';
+import { isElementFocusable } from './isElementFocusable';
+import { renderStructuredContent } from './renderStructuredContent';
+import { useOverlaidPosition } from './useOverlaidPosition';
+import { scrollToAnchor } from './scrollToAnchor';
 export { deprecate, htmlAttrs, contentfulProps, transformGradient, useTypographyTheme, warn, media, renderStructuredContent, ssrStyles, isElementFocusable, useOverlaidPosition, scrollToAnchor };

package/lib/esm/utils/isElementFocusable.js

@@ -1,8 +1,7 @@
 /**
  * Returns focusable elements inside of the Footnote
  */
-const isElementFocusable = element => {
+export const isElementFocusable = element => {
   const focusableElements = `a[href], button, textarea, input, select, form, label, audio, video, source, track, canvas, rect, polygon, iframe[data-src], [tabindex]:not([tabindex="-1"]), [contenteditable]`;
   return element.matches(focusableElements) && !element.hasAttribute('disabled') && !element.matches('[tabindex="-1"]');
-};
-export default isElementFocusable;
+};

package/lib/esm/utils/logger.js

@@ -9,8 +9,4 @@ export const warn = (componentName, message) => {
     return;
   }
   console.warn(`[Allium] ${componentName}: ${message}`);
-};
-export default {
-  deprecate,
-  warn
 };

package/lib/esm/utils/media.js

@@ -1,5 +1,5 @@
 import { viewports } from '@telus-uds/system-constants';
-export default function media() {
+export function media() {
   return {
     query: {},
     from(breakpoint) {

package/lib/esm/utils/renderStructuredContent.js

@@ -56,10 +56,9 @@ const generateBreaks = parts => {
   }
   return partsWithBreaks;
 };
-const renderStructuredContent = content => {
+export const renderStructuredContent = content => {
   if (typeof content !== 'string') {
     return content;
   }
   return generateBreaks(generateLinks(content));
-};
-export default renderStructuredContent;
+};

package/lib/esm/utils/scrollToAnchor.js

@@ -5,7 +5,7 @@
  * @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) => {
+export const scrollToAnchor = (href, event, onAfterScroll) => {
   if (href?.startsWith('#')) {
     event.preventDefault();
     const target = document.getElementById(href.slice(1));
@@ -15,5 +15,4 @@ const scrollToAnchor = (href, event, onAfterScroll) => {
     window.location.hash = href;
     onAfterScroll(event);
   }
-};
-export default scrollToAnchor;
+};