@telus-uds/components-web 1.5.0 → 1.6.1

package/lib-module/Modal/index.js

@@ -0,0 +1,2 @@
+import Modal from './Modal';
+export default Modal;

package/lib-module/PreviewCard/PreviewCard.js

@@ -39,7 +39,11 @@ const FullBleedOffsetInner = /*#__PURE__*/styled.div.withConfig({
 });
 const defaultTokens = {
   minWidth: 0,
-  shadow: null
+  shadow: null,
+  contentAlignItems: 'stretch',
+  contentJustifyContent: 'flex-start',
+  contentFlexGrow: 0,
+  contentFlexShrink: 0
 };
 /**
  * Showcase and guide users to another page, with a preview containing title and a footer.

package/lib-module/Table/Body.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Body = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx("tbody", {
+    children: children
+  });
+};
+
+Body.propTypes = {
+  children: PropTypes.node
+};
+export default Body;

package/lib-module/Table/Cell.js

@@ -0,0 +1,176 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+import { Typography, useThemeTokens } from '@telus-uds/components-base';
+import { useTableContext } from './Table';
+import { jsx as _jsx } from "react/jsx-runtime";
+const stickyStyles = /*#__PURE__*/css(["position:sticky;left:0;z-index:2;clip-path:inset(0 -8px 0 0);&::before{content:'';box-shadow:", ";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}"], _ref => {
+  let {
+    cellStickyShadow
+  } = _ref;
+  return cellStickyShadow;
+});
+const sharedStyles = /*#__PURE__*/css(["", ""], _ref2 => {
+  let {
+    isSticky,
+    cellBoxShadowColor,
+    align,
+    cellPaddingTop,
+    cellPaddingRight,
+    cellPaddingBottom,
+    cellPaddingLeft
+  } = _ref2;
+  return css(["", ";box-shadow:inset 0 -1px 0 ", ";text-align:", ";padding:", "px ", "px ", "px ", "px;"], isSticky ? stickyStyles : undefined, cellBoxShadowColor, align, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft);
+});
+const StyledHeading = /*#__PURE__*/styled.th.withConfig({
+  displayName: "Cell__StyledHeading",
+  componentId: "components-web__sc-ltgfic-0"
+})(["", ";", ""], sharedStyles, _ref3 => {
+  let {
+    cellHeadingBackground,
+    cellHeadingBoxShadowColor
+  } = _ref3;
+  return `
+  background-color: ${cellHeadingBackground};
+  box-shadow: inset 0 1px 0 ${cellHeadingBoxShadowColor}, inset 0 -1px 0 ${cellHeadingBoxShadowColor};`;
+});
+const StyledSubHeading = /*#__PURE__*/styled.th.withConfig({
+  displayName: "Cell__StyledSubHeading",
+  componentId: "components-web__sc-ltgfic-1"
+})(["", ";background-color:", ";"], sharedStyles, _ref4 => {
+  let {
+    cellSubheadingBackground
+  } = _ref4;
+  return cellSubheadingBackground;
+});
+const StyledCell = /*#__PURE__*/styled.td.withConfig({
+  displayName: "Cell__StyledCell",
+  componentId: "components-web__sc-ltgfic-2"
+})(["", ";background-color:", ";"], sharedStyles, _ref5 => {
+  let {
+    cellBackground
+  } = _ref5;
+  return cellBackground;
+});
+const StyledRowHeading = /*#__PURE__*/styled.th.withConfig({
+  displayName: "Cell__StyledRowHeading",
+  componentId: "components-web__sc-ltgfic-3"
+})(["", ";background-color:", ";"], sharedStyles, _ref6 => {
+  let {
+    cellRowHeadingBackground
+  } = _ref6;
+  return cellRowHeadingBackground;
+});
+
+const Cell = _ref7 => {
+  let {
+    children,
+    type = 'default',
+    isFirstInRow,
+    align = 'left'
+  } = _ref7;
+  const {
+    text,
+    isScrollable: isTableScrollable,
+    variant,
+    tokens
+  } = useTableContext();
+  const {
+    cellHeadingBackground,
+    cellHeadingBoxShadowColor,
+    cellBoxShadowColor,
+    cellSubheadingBackground,
+    cellBackground,
+    cellRowHeadingBackground,
+    cellStickyShadow,
+    cellPaddingTop,
+    cellPaddingRight,
+    cellPaddingLeft,
+    cellPaddingBottom
+  } = useThemeTokens('Table', tokens, variant);
+  const sharedProps = {
+    align,
+    isSticky: isTableScrollable && isFirstInRow,
+    cellStickyShadow,
+    cellPaddingTop,
+    cellPaddingRight,
+    cellPaddingLeft,
+    cellPaddingBottom,
+    cellBoxShadowColor
+  };
+
+  switch (type) {
+    case 'heading':
+      return /*#__PURE__*/_jsx(StyledHeading, {
+        scope: "col",
+        cellHeadingBackground: cellHeadingBackground,
+        cellHeadingBoxShadowColor: cellHeadingBoxShadowColor,
+        ...sharedProps,
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            size: 'h4'
+          },
+          children: children
+        })
+      });
+
+    case 'subHeading':
+      return /*#__PURE__*/_jsx(StyledSubHeading, {
+        scope: "col",
+        cellSubheadingBackground: cellSubheadingBackground,
+        ...sharedProps,
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            size: 'h5'
+          },
+          children: children
+        })
+      });
+
+    case 'rowHeading':
+      return /*#__PURE__*/_jsx(StyledRowHeading, {
+        scope: "row",
+        cellRowHeadingBackground: cellRowHeadingBackground,
+        ...sharedProps,
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            size: text === 'small' ? 'h5' : 'h4'
+          },
+          children: children
+        })
+      });
+
+    default:
+      return /*#__PURE__*/_jsx(StyledCell, {
+        cellBackground: cellBackground,
+        ...sharedProps,
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            size: text
+          },
+          children: children
+        })
+      });
+  }
+};
+
+Cell.propTypes = {
+  children: PropTypes.node,
+
+  /**
+   * Defines the visual styles of a cell, and whether it should be a `td` or `th` element
+   */
+  type: PropTypes.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
+
+  /**
+   * @ignore
+   * Used internally for making the first column sticky
+   */
+  isFirstInRow: PropTypes.bool,
+
+  /**
+   * Defines the text alignment within the cell
+   */
+  align: PropTypes.oneOf(['left', 'center', 'right'])
+};
+export default Cell;

package/lib-module/Table/Header.js

@@ -0,0 +1,22 @@
+import React, { cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import Row from './Row';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Header = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx("thead", {
+    children: /*#__PURE__*/_jsx(Row, {
+      children: React.Children.map(children, child => /*#__PURE__*/cloneElement(child, {
+        type: 'heading'
+      }))
+    })
+  });
+};
+
+Header.propTypes = {
+  children: PropTypes.node
+};
+export default Header;

package/lib-module/Table/Row.js

@@ -0,0 +1,19 @@
+import React, { cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Row = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx("tr", {
+    children: React.Children.map(children, (child, index) => /*#__PURE__*/cloneElement(child, {
+      isFirstInRow: index === 0
+    }))
+  });
+};
+
+Row.propTypes = {
+  children: PropTypes.node
+};
+export default Row;

package/lib-module/Table/SubHeading.js

@@ -0,0 +1,20 @@
+import React, { cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import Row from './Row';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Header = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(Row, {
+    children: React.Children.map(children, child => /*#__PURE__*/cloneElement(child, {
+      type: 'subHeading'
+    }))
+  });
+};
+
+Header.propTypes = {
+  children: PropTypes.node
+};
+export default Header;

package/lib-module/Table/Table.js

@@ -0,0 +1,93 @@
+import React, { useContext, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { selectSystemProps, useSafeLayoutEffect, useThemeTokens } from '@telus-uds/components-base';
+import throttle from 'lodash.throttle';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const StyledContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Table__StyledContainer",
+  componentId: "components-web__sc-10d9q3m-0"
+})(["overflow:auto;padding-bottom:", ";"], props => props.isScrollable ? props.tablePaddingBottom : 0);
+const StyledTable = /*#__PURE__*/styled.table.withConfig({
+  displayName: "Table__StyledTable",
+  componentId: "components-web__sc-10d9q3m-1"
+})(["margin:0;padding:0;"]);
+const TableContext = /*#__PURE__*/React.createContext({});
+export const useTableContext = () => useContext(TableContext);
+/**
+ * Use `Table` to display tabular data.
+ *
+ * - Takes an optional `spacing` variant (compact)
+ * - Available in 2 text styles (medium, small)
+ * - When `Table` exceeds viewport, the first column becomes sticky, enabling horizontal scrolling
+ * - Right-align prices and numbers that display decimal points
+ *
+ * ### Building up a `Table`
+ * - Use `Table.Header` and `Table.Body` as direct children of `Table`
+ * - Use `Table.SubHeading` to render an intermediate data heading row
+ * - Use `Table.Row` and `Table.Cell` to build up the tabular data
+ * - Use `Cell`'s `type` prop to visually mark it as a row heading (`type="rowHeading"`)
+ */
+
+const Table = _ref => {
+  let {
+    children,
+    text = 'medium',
+    tokens,
+    variant,
+    ...rest
+  } = _ref;
+  const {
+    tablePaddingBottom
+  } = useThemeTokens('Table', tokens, variant);
+  const containerRef = useRef();
+  const tableRef = useRef();
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [tableWidth, setTableWidth] = useState(0);
+  useSafeLayoutEffect(() => {
+    const updateDimensions = () => {
+      setContainerWidth(containerRef.current.clientWidth);
+      setTableWidth(tableRef.current.clientWidth);
+    };
+
+    const throttledUpdateDimensions = throttle(updateDimensions, 100, {
+      leading: false
+    });
+    updateDimensions(); // a pretty naive way of repeating the measurement after the fonts are loaded
+
+    window.addEventListener('load', updateDimensions);
+    window.addEventListener('resize', throttledUpdateDimensions);
+    return () => {
+      window.removeEventListener('load', updateDimensions);
+      window.removeEventListener('resize', throttledUpdateDimensions);
+    };
+  }, []);
+  const isScrollable = tableWidth > containerWidth;
+  return /*#__PURE__*/_jsx(StyledContainer, {
+    ref: containerRef,
+    isScrollable: isScrollable,
+    tablePaddingBottom: `${tablePaddingBottom}px`,
+    ...selectProps(rest),
+    children: /*#__PURE__*/_jsx(TableContext.Provider, {
+      value: {
+        text,
+        isScrollable,
+        tokens,
+        variant
+      },
+      children: /*#__PURE__*/_jsx(StyledTable, {
+        cellSpacing: 0,
+        ref: tableRef,
+        children: children
+      })
+    })
+  });
+};
+
+Table.propTypes = { ...selectedSystemPropTypes,
+  children: PropTypes.node,
+  text: PropTypes.oneOf(['medium', 'small'])
+};
+export default Table;

package/lib-module/Table/index.js

@@ -0,0 +1,12 @@
+import Table from './Table';
+import Header from './Header';
+import Body from './Body';
+import Row from './Row';
+import SubHeading from './SubHeading';
+import Cell from './Cell';
+Table.Header = Header;
+Table.Body = Body;
+Table.Row = Row;
+Table.SubHeading = SubHeading;
+Table.Cell = Cell;
+export default Table;

package/lib-module/Toast/Toast.js

@@ -0,0 +1,117 @@
+var _withLinkRouter$propT, _withLinkRouter$propT2;
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ChevronLink, selectSystemProps, useThemeTokens, Typography, withLinkRouter } from '@telus-uds/components-base';
+import styled, { keyframes, css } from 'styled-components';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+
+const transform = property => (from, to) => keyframes(["from{", ":", ";}to{", ":", ";}"], property, from, property, to);
+
+const slideDown = property => function (from, to) {
+  let end = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : to;
+  return keyframes(["0%{", ":", ";}99%{", ":", ";}100%{", ":", ";}"], property, from, property, to, property, end);
+};
+
+const animation = props => css(["", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 3.2s forwards;& *{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}& > a svg{animation:", " 1s ease-in-out 3s forwards;}"], slideDown('height')(`${props.animationHeightBefore}px`, `${props.animationHeightAfter}px`, 'auto'), transform('padding-bottom')(`${props.animationPaddingBottomBefore}px`, `${props.animationPaddingBottomAfter}px`), transform('padding-top')(`${props.animationPaddingTopBefore}px`, `${props.animationPaddingTopAfter}px`), transform('background')(props.animationBackgroundColorBefore, props.animationBackgroundColorAfter), transform('color')(props.animationColorBefore, props.animationColorAfter), transform('color')(props.animationDivColorBefore, props.animationDivColorAfter), transform('fill')(props.animationFillColorBefore, props.animationFillColorAfter));
+
+const ToastContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Toast__ToastContainer",
+  componentId: "components-web__sc-p78jdh-0"
+})(["display:flex;justify-content:center;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
+  let {
+    containerBackgroundColor
+  } = _ref;
+  return containerBackgroundColor;
+}, _ref2 => {
+  let {
+    containerGap
+  } = _ref2;
+  return containerGap;
+}, animation);
+
+const Toast = _ref3 => {
+  let {
+    toast,
+    copy,
+    headline,
+    link,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref3;
+  const {
+    containerBackgroundColor,
+    containerGap,
+    animationHeightBefore,
+    animationHeightAfter,
+    animationPaddingBottomBefore,
+    animationPaddingBottomAfter,
+    animationPaddingTopBefore,
+    animationPaddingTopAfter,
+    animationBackgroundColorBefore,
+    animationBackgroundColorAfter,
+    animationColorBefore,
+    animationColorAfter,
+    animationFillColorBefore,
+    animationFillColorAfter
+  } = useThemeTokens('Toast', tokens, variant);
+
+  if (!toast) {
+    return null;
+  }
+
+  return /*#__PURE__*/_jsxs(ToastContainer, {
+    containerBackgroundColor: containerBackgroundColor,
+    containerGap: containerGap,
+    animationHeightBefore: animationHeightBefore,
+    animationHeightAfter: animationHeightAfter,
+    animationPaddingBottomBefore: animationPaddingBottomBefore,
+    animationPaddingBottomAfter: animationPaddingBottomAfter,
+    animationPaddingTopBefore: animationPaddingTopBefore,
+    animationPaddingTopAfter: animationPaddingTopAfter,
+    animationBackgroundColorBefore: animationBackgroundColorBefore,
+    animationBackgroundColorAfter: animationBackgroundColorAfter,
+    animationColorBefore: animationColorBefore,
+    animationColorAfter: animationColorAfter,
+    animationFillColorBefore: animationFillColorBefore,
+    animationFillColorAfter: animationFillColorAfter,
+    ...selectProps(rest),
+    children: [headline && /*#__PURE__*/_jsx(Typography, {
+      variant: {
+        bold: true,
+        inverse: true
+      },
+      children: headline
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: {
+        inverse: true
+      },
+      children: copy
+    }), link && /*#__PURE__*/_jsx(ChevronLink, {
+      variant: {
+        inverse: true
+      },
+      href: link.href,
+      LinkRouter: link.LinkRouter,
+      linkRouterProps: link.linkRouterProps,
+      children: link.text
+    })]
+  });
+};
+
+Toast.propTypes = { ...selectedSystemPropTypes,
+  toast: PropTypes.bool,
+  copy: PropTypes.string.isRequired,
+  headline: PropTypes.string,
+  link: PropTypes.shape({
+    href: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired,
+    LinkRouter: (_withLinkRouter$propT = withLinkRouter.propTypes) === null || _withLinkRouter$propT === void 0 ? void 0 : _withLinkRouter$propT.LinkRouter,
+    linkRouterProps: (_withLinkRouter$propT2 = withLinkRouter.propTypes) === null || _withLinkRouter$propT2 === void 0 ? void 0 : _withLinkRouter$propT2.linkRouterProps
+  })
+};
+export default Toast;

package/lib-module/Toast/index.js

@@ -0,0 +1,2 @@
+import Toast from './Toast';
+export default Toast;

package/lib-module/WaffleGrid/WaffleGrid.js

@@ -0,0 +1,155 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Link, responsiveProps, selectSystemProps, useResponsiveProp, useThemeTokens, withLinkRouter } from '@telus-uds/components-base';
+import OrderedListBase from '../OrderedList/OrderedListBase';
+import ItemBase from '../OrderedList/ItemBase';
+import Image from '../Image';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const DEFAULT_ROW_SIZE = {
+  sm: 2,
+  lg: 3,
+  xl: 6
+};
+
+const row = (rowSize, rowBorderSize) => ({
+  flexBasis: `calc(100% / ${rowSize})`,
+  [`:not(:nth-of-type(${rowSize}n + 1))`]: {
+    borderLeftWidth: `${rowBorderSize}px`
+  },
+  [`:nth-of-type(n+${rowSize + 1})`]: {
+    borderTopWidth: `${rowBorderSize}px`
+  }
+});
+
+const Container = /*#__PURE__*/styled(OrderedListBase).withConfig({
+  displayName: "WaffleGrid__Container",
+  componentId: "components-web__sc-ec8g0a-0"
+})({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  justifyContent: 'flex-start'
+});
+const Item = /*#__PURE__*/styled(ItemBase).withConfig({
+  displayName: "WaffleGrid__Item",
+  componentId: "components-web__sc-ec8g0a-1"
+})(_ref => {
+  let {
+    rowSize,
+    itemPadding,
+    itemBorderColor,
+    rowBorderWidth
+  } = _ref;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 0,
+    flexShrink: 0,
+    padding: `${itemPadding}px`,
+    boxSizing: 'border-box',
+    borderStyle: 'solid',
+    borderColor: itemBorderColor,
+    borderWidth: 0,
+    '& > a': {
+      alignSelf: 'center'
+    },
+    ...row(rowSize, rowBorderWidth)
+  };
+});
+const Center = /*#__PURE__*/styled('div').withConfig({
+  displayName: "WaffleGrid__Center",
+  componentId: "components-web__sc-ec8g0a-2"
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  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,
+    rowSize = DEFAULT_ROW_SIZE,
+    LinkRouter,
+    tokens,
+    variant,
+    linkRouterProps,
+    ...rest
+  } = _ref2;
+  const themeTokens = useThemeTokens('WaffleGrid', tokens, variant);
+  const currentRowSize = useResponsiveProp(rowSize);
+  return /*#__PURE__*/_jsx(Container, { ...selectProps(rest),
+    children: items.map(child => /*#__PURE__*/_createElement(Item, { ...themeTokens,
+      key: child.href,
+      rowSize: currentRowSize
+    }, /*#__PURE__*/_jsx(Link, {
+      href: child.href,
+      variant: {
+        alternative: true
+      },
+      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: 64,
+          height: 64
+        }) : // Otherwise it must be an arbitrary content, which we just display by itself
+        child.image, /*#__PURE__*/_jsx("span", {
+          children: child.text
+        })]
+      })
+    })))
+  });
+};
+
+WaffleGrid.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The image and the link to display. `items` should be an array of objects with the following keys:
+   */
+  items: PropTypes.arrayOf(PropTypes.shape({
+    /**
+     * The src attribute for the HTML img element or custom JSX content to render instead
+     */
+    image: PropTypes.oneOfType([PropTypes.string, PropTypes.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.string,
+
+    /**
+     * The text displayed under the image
+     */
+    text: PropTypes.string,
+
+    /**
+     * Target URL
+     */
+    href: PropTypes.string,
+    ...withLinkRouter.propTypes
+  })).isRequired,
+
+  /**
+   * Row size, optionally depending on the viewport
+   */
+  rowSize: responsiveProps.getTypeOptionallyByViewport(PropTypes.number),
+  ...withLinkRouter.propTypes
+};
+export default WaffleGrid;

package/lib-module/WaffleGrid/index.js

@@ -0,0 +1,2 @@
+import WaffleGrid from './WaffleGrid';
+export default WaffleGrid;

package/lib-module/baseExports.js

@@ -5,7 +5,7 @@ export {
 /**
  * Most base components should be re-exported as-is.
  */
-A11yText, ActivityIndicator, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, Carousel, Card, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, IconButton, InputLabel, InputSupports, Link, Modal, MultiSelectFilter, Notification, Pagination, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography,
+A11yText, ActivityIndicator, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, Carousel, Card, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, IconButton, InputLabel, InputSupports, Link, MultiSelectFilter, Notification, Pagination, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography,
 /*
  * 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-module/index.js

@@ -1,4 +1,5 @@
 export { default as Badge } from './Badge';
+export { default as Modal } from './Modal';
 export { default as OrderedList } from './OrderedList';
 export { default as PreviewCard } from './PreviewCard';
 export { default as ResponsiveImage } from './ResponsiveImage';
@@ -12,4 +13,8 @@ export { default as PriceLockup } from './PriceLockup';
 export { default as Footnote } from './Footnote';
 export { transformGradient } from './utils';
 export { default as Breadcrumbs } from './Breadcrumbs';
+export { default as Toast } from './Toast';
+export { default as Table } from './Table';
+export { default as Image } from './Image';
+export { default as WaffleGrid } from './WaffleGrid';
 export * from './baseExports';