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

package/lib/cjs/Spinner/SpinnerContent.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.SpinnerContent = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -18,13 +18,13 @@ const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
   componentId: "components-web__sc-1c8bd8e-0"
 })(_ref => {
   let {
-    overlay
+    $overlay
   } = _ref;
   return {
     display: 'inline-flex',
     flexDirection: 'column',
     alignItems: 'center',
-    ...(overlay && {
+    ...($overlay && {
       position: 'absolute',
       top: '50%',
       left: '50%',
@@ -33,7 +33,7 @@ const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
     })
   };
 });
-const SpinnerContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const SpinnerContent = exports.SpinnerContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     label,
     labelPosition,
@@ -46,7 +46,7 @@ const SpinnerContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ...rest
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
-    overlay: overlay,
+    $overlay: overlay,
     ref: ref,
     "aria-label": label,
     role: "status",
@@ -89,5 +89,4 @@ SpinnerContent.propTypes = {
    * If true, it should render a static spinner
    */
   isStatic: _propTypes.default.bool
-};
-var _default = exports.default = SpinnerContent;
+};

package/lib/cjs/StoryCard/StoryCard.js

@@ -3,15 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.StoryCardBase = exports.StoryCard = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _FullBleedContent = _interopRequireWildcard(require("../shared/FullBleedContent"));
+var _FullBleedContent = require("../shared/FullBleedContent");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // Passes React Native-oriented system props through UDS PressableCardBase
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.focusHandlerProps, _componentsBase.viewProps]);
@@ -23,11 +21,11 @@ const FullBleedOffsetOuter = /*#__PURE__*/_styledComponents.default.div.withConf
   componentId: "components-web__sc-yhvivu-0"
 })(_ref => {
   let {
-    borderOffset
+    $borderOffset
   } = _ref;
   return {
     overflow: 'hidden',
-    marginTop: borderOffset * 2
+    marginTop: $borderOffset * 2
   };
 });
 const FullBleedOffsetInner = /*#__PURE__*/_styledComponents.default.div.withConfig({
@@ -35,11 +33,11 @@ const FullBleedOffsetInner = /*#__PURE__*/_styledComponents.default.div.withConf
   componentId: "components-web__sc-yhvivu-1"
 })(_ref2 => {
   let {
-    borderOffset
+    $borderOffset
   } = _ref2;
   return {
     position: 'relative',
-    margin: 0 - borderOffset
+    margin: 0 - $borderOffset
   };
 });
 
@@ -54,14 +52,13 @@ const FullBleedOffsetInner = /*#__PURE__*/_styledComponents.default.div.withConf
  * - Use `href` to set the target URL
  * - Use `fullBleedContent` to set the thumbnail image
  */
-const StoryCard = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const StoryCard = exports.StoryCardBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     tag,
     date,
     title,
     description,
-    fullBleedImage,
-    fullBleedContent = fullBleedImage,
+    fullBleedContent,
     onPress,
     href,
     tokens,
@@ -160,10 +157,10 @@ const StoryCard = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
             children: description
           })]
         }), Boolean(fullBleedContentProps.src || fullBleedContentProps.content) && /*#__PURE__*/(0, _jsxRuntime.jsx)(FullBleedOffsetOuter, {
-          borderOffset: borderOffset,
+          $borderOffset: borderOffset,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FullBleedOffsetInner, {
-            borderOffset: borderOffset,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
+            $borderOffset: borderOffset,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.FullBleedContent, {
               borderRadius: fullBleedBorderRadius,
               ...fullBleedContentProps
             })
@@ -205,15 +202,13 @@ StoryCard.propTypes = {
    * Text giving a short description of the story. One paragraph of plain text.
    */
   description: _propTypes.default.string.isRequired,
-  /**
-   * Full bleed image to be placed on the card, deprecated in favor of `fullBleedContent`.
-   *
-   * @deprecated
-   */
-  fullBleedImage: _propTypes.default.exact(_FullBleedContent.default.propTypes || {}),
   /**
    * Full bleed image to be placed on the card.
    */
-  fullBleedContent: _propTypes.default.exact(_FullBleedContent.default.propTypes || {})
+  fullBleedContent: _propTypes.default.exact(_FullBleedContent.FullBleedContent.propTypes || {})
 };
-var _default = exports.default = (0, _componentsBase.withLinkRouter)(StoryCard);
+
+// Export unwrapped component for react-docgen to extract info for docsite
+
+// Export wrapped component as main StoryCard export
+const StoryCardWithRouter = exports.StoryCard = (0, _componentsBase.withLinkRouter)(StoryCard);

package/lib/cjs/Table/Table.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTableContext = exports.default = void 0;
+exports.useTableContext = exports.Table = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -16,17 +16,17 @@ const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemP
 const StyledContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Table__StyledContainer",
   componentId: "components-web__sc-10d9q3m-0"
-})(["overflow:auto;padding-bottom:", ";"], props => props.isScrollable ? `${props.tablePaddingBottom}px` : 0);
+})(["overflow:auto;padding-bottom:", ";"], props => props.$isScrollable ? `${props.$tablePaddingBottom}px` : 0);
 const StyledTable = /*#__PURE__*/_styledComponents.default.table.withConfig({
   displayName: "Table__StyledTable",
   componentId: "components-web__sc-10d9q3m-1"
 })(["margin:0;padding:0;width:", ";border:", ";border-collapse:collapse;"], _ref => {
   let {
-    fullWidth,
-    tableWidth
+    $fullWidth,
+    $tableWidth
   } = _ref;
-  return fullWidth ? '100%' : `${tableWidth}px`;
-}, props => `${props.borderWidth}px solid ${props.borderColor}`);
+  return $fullWidth ? '100%' : `${$tableWidth}px`;
+}, props => `${props.$borderWidth}px solid ${props.$borderColor}`);
 const TableContext = /*#__PURE__*/_react.default.createContext({});
 const useTableContext = () => _react.default.useContext(TableContext);
 
@@ -39,13 +39,13 @@ const useTableContext = () => _react.default.useContext(TableContext);
  * - 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"`)
+ * - Use `TableHeader` and `TableBody` as direct children of `Table`
+ * - Use `TableSubHeading` to render an intermediate data heading row
+ * - Use `TableRow` and `TableCell` to build up the tabular data
+ * - Use `TableCell`'s `type` prop to visually mark it as a row heading (`type="rowHeading"`)
  */
 exports.useTableContext = useTableContext;
-const Table = _ref2 => {
+const Table = exports.Table = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     spacing = 'default',
@@ -61,7 +61,8 @@ const Table = _ref2 => {
     borderColor,
     borderWidth
   } = themeTokens;
-  const containerRef = _react.default.useRef();
+  const internalRef = _react.default.useRef();
+  const containerRef = ref ?? internalRef;
   const tableRef = _react.default.useRef();
   const [containerWidth, setContainerWidth] = _react.default.useState(0);
   const [tableWidth, setTableWidth] = _react.default.useState(0);
@@ -88,8 +89,8 @@ const Table = _ref2 => {
   const isScrollable = tableWidth > containerWidth;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledContainer, {
     ref: containerRef,
-    isScrollable: isScrollable,
-    tablePaddingBottom: tablePaddingBottom,
+    $isScrollable: isScrollable,
+    $tablePaddingBottom: tablePaddingBottom,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TableContext.Provider, {
       value: {
         text,
@@ -100,25 +101,31 @@ const Table = _ref2 => {
         themeTokens
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTable, {
-        borderColor: borderColor,
-        borderWidth: borderWidth,
-        tableWidth: tableWidth,
+        $borderColor: borderColor,
+        $borderWidth: borderWidth,
+        $tableWidth: tableWidth,
         cellSpacing: 0,
         ref: tableRef,
-        fullWidth: fullWidth,
+        $fullWidth: fullWidth,
         ...selectProps(rest),
         children: children
       })
     })
   });
-};
+});
+Table.displayName = 'Table';
 Table.propTypes = {
   ...selectedSystemPropTypes,
+  /** Theme tokens for Table */
   tokens: (0, _componentsBase.getTokensPropType)('Table'),
+  /** Table content (rows, headers, etc) */
   children: _propTypes.default.node,
-  /**
-   * Sets text style
-   */
-  text: _propTypes.default.oneOf(['medium', 'small'])
-};
-var _default = exports.default = Table;
+  /** Sets text style */
+  text: _propTypes.default.oneOf(['medium', 'small']),
+  /** Table spacing variant */
+  spacing: _propTypes.default.oneOf(['default', 'compact']),
+  /** If true, table takes 100% width of container */
+  fullWidth: _propTypes.default.bool,
+  /** Variant for Table styling */
+  variant: _propTypes.default.object
+};

package/lib/cjs/Table/{Body.js → TableBody.js}

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.TableBody = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Body = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const TableBody = exports.TableBody = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
@@ -17,8 +17,7 @@ const Body = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children: children
   });
 });
-Body.displayName = 'Body';
-Body.propTypes = {
+TableBody.displayName = 'TableBody';
+TableBody.propTypes = {
   children: _propTypes.default.node
-};
-var _default = exports.default = Body;
+};

package/lib/cjs/Table/{Cell.js → TableCell.js}

@@ -3,15 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.TableCell = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Table = require("./Table");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const HEADER_TYPE = {
   HEADING: 'heading',
@@ -28,51 +27,51 @@ const stickyStyles = _ref => {
 };
 const sharedStyles = /*#__PURE__*/(0, _styledComponents.css)(["", ""], _ref2 => {
   let {
-    isSticky,
-    align,
-    cellPaddingTop,
-    cellPaddingRight,
-    cellPaddingBottom,
-    cellPaddingLeft,
-    cellBorderWidth,
-    cellBorderColor,
-    cellBorderTopWidth,
-    cellMinWidth,
-    cellBackground,
-    cellStickyShadow,
-    stickyBackgroundColor,
-    cellBottomLeftBorderRadius,
-    cellBottomRightBorderRadius,
-    cellTopLeftBorderRadius,
-    cellTopRightBorderRadius,
-    type
+    $isSticky,
+    $align,
+    $cellPaddingTop,
+    $cellPaddingRight,
+    $cellPaddingBottom,
+    $cellPaddingLeft,
+    $cellBorderWidth,
+    $cellBorderColor,
+    $cellBorderTopWidth,
+    $cellMinWidth,
+    $cellBackground,
+    $cellStickyShadow,
+    $stickyBackgroundColor,
+    $cellBottomLeftBorderRadius,
+    $cellBottomRightBorderRadius,
+    $cellTopLeftBorderRadius,
+    $cellTopRightBorderRadius,
+    $type
   } = _ref2;
-  return (0, _styledComponents.css)(["text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;background-color:", ";", ";border-style:", ";border-color:", ";border-width:", "px;border-top-width:", "px;border-bottom-left-radius:", "px;border-bottom-right-radius:", "px;border-top-left-radius:", "px;border-top-right-radius:", "px;"], align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft, cellBackground, isSticky && stickyStyles({
-    type,
-    cellStickyShadow,
-    stickyBackgroundColor
-  }), cellBorderWidth || cellBorderTopWidth ? 'solid' : 'none', cellBorderColor, cellBorderWidth, cellBorderTopWidth || cellBorderWidth, cellBottomLeftBorderRadius, cellBottomRightBorderRadius, cellTopLeftBorderRadius, cellTopRightBorderRadius);
+  return (0, _styledComponents.css)(["text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;background-color:", ";", ";border-style:", ";border-color:", ";border-width:", "px;border-top-width:", "px;border-bottom-left-radius:", "px;border-bottom-right-radius:", "px;border-top-left-radius:", "px;border-top-right-radius:", "px;"], $align, $cellMinWidth, $cellPaddingTop, $cellPaddingRight, $cellPaddingBottom, $cellPaddingLeft, $cellBackground, $isSticky && stickyStyles({
+    type: $type,
+    cellStickyShadow: $cellStickyShadow,
+    stickyBackgroundColor: $stickyBackgroundColor
+  }), $cellBorderWidth || $cellBorderTopWidth ? 'solid' : 'none', $cellBorderColor, $cellBorderWidth, $cellBorderTopWidth || $cellBorderWidth, $cellBottomLeftBorderRadius, $cellBottomRightBorderRadius, $cellTopLeftBorderRadius, $cellTopRightBorderRadius);
 });
 const createStyledCell = htmlElement => _styledComponents.default[htmlElement].withConfig({
-  displayName: "Cell__createStyledCell",
-  componentId: "components-web__sc-ltgfic-0"
+  displayName: "TableCell__createStyledCell",
+  componentId: "components-web__sc-c4xf99-0"
 })(["", ";box-shadow:", ";", ""], sharedStyles, _ref3 => {
   let {
-    cellBoxShadowColor,
-    type
+    $cellBoxShadowColor,
+    $type
   } = _ref3;
-  return type === HEADER_TYPE.HEADING ? `inset 0 1px 0 ${cellBoxShadowColor}, inset 0 -1px 0 ${cellBoxShadowColor}` : `inset 0 1px 0 ${cellBoxShadowColor}`;
+  return $type === HEADER_TYPE.HEADING ? `inset 0 1px 0 ${$cellBoxShadowColor}, inset 0 -1px 0 ${$cellBoxShadowColor}` : `inset 0 1px 0 ${$cellBoxShadowColor}`;
 }, _ref4 => {
   let {
-    display
+    $display
   } = _ref4;
-  return display && `*:not(:empty) {
-    display: ${display};
+  return $display && `*:not(:empty) {
+    display: ${$display};
   }`;
 });
 const StyledHeaderCell = createStyledCell('th');
 const StyledDataCell = createStyledCell('td');
-const Cell = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+const TableCell = exports.TableCell = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     children,
     isFirstInRow,
@@ -121,25 +120,25 @@ const Cell = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     ...variant
   });
   const sharedProps = {
-    align,
-    isSticky: isTableScrollable && isFirstInRow,
-    cellBackground,
-    cellMinWidth,
-    cellStickyShadow: (0, _componentsBase.applyShadowToken)(cellStickyShadow).boxShadow,
-    cellPaddingTop,
-    cellPaddingRight,
-    cellPaddingLeft,
-    cellPaddingBottom,
-    cellBorderWidth,
-    cellBorderColor,
-    cellBorderTopWidth,
-    cellTopLeftBorderRadius,
-    cellTopRightBorderRadius,
-    cellBottomLeftBorderRadius,
-    cellBottomRightBorderRadius,
-    stickyBackgroundColor,
-    cellBoxShadowColor,
-    display,
+    $align: align,
+    $isSticky: isTableScrollable && isFirstInRow,
+    $cellBackground: cellBackground,
+    $cellMinWidth: cellMinWidth,
+    $cellStickyShadow: (0, _componentsBase.applyShadowToken)(cellStickyShadow).boxShadow,
+    $cellPaddingTop: cellPaddingTop,
+    $cellPaddingRight: cellPaddingRight,
+    $cellPaddingLeft: cellPaddingLeft,
+    $cellPaddingBottom: cellPaddingBottom,
+    $cellBorderWidth: cellBorderWidth,
+    $cellBorderColor: cellBorderColor,
+    $cellBorderTopWidth: cellBorderTopWidth,
+    $cellTopLeftBorderRadius: cellTopLeftBorderRadius,
+    $cellTopRightBorderRadius: cellTopRightBorderRadius,
+    $cellBottomLeftBorderRadius: cellBottomLeftBorderRadius,
+    $cellBottomRightBorderRadius: cellBottomRightBorderRadius,
+    $stickyBackgroundColor: stickyBackgroundColor,
+    $cellBoxShadowColor: cellBoxShadowColor,
+    $display: display,
     ref
   };
   const typographyTokens = {
@@ -154,7 +153,7 @@ const Cell = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCell, {
         scope: "col",
         ...sharedProps,
-        type: type,
+        $type: type,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
           tokens: typographyTokens,
           children: children
@@ -164,7 +163,7 @@ const Cell = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCell, {
         scope: "col",
         ...sharedProps,
-        type: type,
+        $type: type,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
           tokens: typographyTokens,
           children: children
@@ -174,7 +173,7 @@ const Cell = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCell, {
         scope: "row",
         ...sharedProps,
-        type: type,
+        $type: type,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
           tokens: typographyTokens,
           children: children
@@ -190,8 +189,8 @@ const Cell = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
       });
   }
 });
-Cell.displayName = 'Cell';
-Cell.propTypes = {
+TableCell.displayName = 'TableCell';
+TableCell.propTypes = {
   type: _propTypes.default.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
   tokens: _propTypes.default.object,
   children: _propTypes.default.node,
@@ -204,5 +203,4 @@ Cell.propTypes = {
    * Defines the text alignment within the cell
    */
   align: _propTypes.default.oneOf(['left', 'center', 'right'])
-};
-var _default = exports.default = Cell;
+};

package/lib/cjs/Table/{Header.js → TableHeader.js}

@@ -3,21 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.TableHeader = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
-var _Row = _interopRequireDefault(require("./Row"));
+var _TableRow = require("./TableRow");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Header = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const TableHeader = exports.TableHeader = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     tokens
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Row.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableRow.TableRow, {
       tokens: tokens,
       children: _react.default.Children.map(children, child =>
       /*#__PURE__*/
@@ -28,9 +28,8 @@ const Header = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     })
   });
 });
-Header.displayName = 'Header';
-Header.propTypes = {
+TableHeader.displayName = 'TableHeader';
+TableHeader.propTypes = {
   children: _propTypes.default.node,
   tokens: (0, _componentsBase.getTokensPropType)('Table')
-};
-var _default = exports.default = Header;
+};

package/lib/cjs/Table/{Row.js → TableRow.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.TableRow = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -11,35 +11,35 @@ var _Table = require("./Table");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledTR = /*#__PURE__*/_styledComponents.default.tr.withConfig({
-  displayName: "Row__StyledTR",
-  componentId: "components-web__sc-6pbb9a-0"
+  displayName: "TableRow__StyledTR",
+  componentId: "components-web__sc-1rnznqr-0"
 })(["&:hover{background-color:", " !important;}border-style:", ";border-color:", ";border-width:", "px;border-top-width:", "px;"], _ref => {
   let {
-    tokens
+    $tokens
   } = _ref;
-  return tokens?.rowHoverBackgroundColor;
+  return $tokens?.rowHoverBackgroundColor;
 }, _ref2 => {
   let {
-    tokens
+    $tokens
   } = _ref2;
-  return tokens?.rowBorderWidth || tokens?.rowBorderTopWidth ? 'solid' : 'none';
+  return $tokens?.rowBorderWidth || $tokens?.rowBorderTopWidth ? 'solid' : 'none';
 }, _ref3 => {
   let {
-    tokens
+    $tokens
   } = _ref3;
-  return tokens?.rowBorderColor;
+  return $tokens?.rowBorderColor;
 }, _ref4 => {
   let {
-    tokens
+    $tokens
   } = _ref4;
-  return `${tokens?.rowBorderWidth}` || 0;
+  return `${$tokens?.rowBorderWidth}` || 0;
 }, _ref5 => {
   let {
-    tokens
+    $tokens
   } = _ref5;
-  return `${tokens?.rowBorderTopWidth}` || tokens?.rowBorderWidth;
+  return `${$tokens?.rowBorderTopWidth}` || $tokens?.rowBorderWidth;
 });
-const Row = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
+const TableRow = exports.TableRow = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   let {
     children,
     tokens: rowTokens
@@ -53,14 +53,14 @@ const Row = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTR, {
     ref: ref,
-    tokens: mergedTokens,
+    $tokens: mergedTokens,
     children: _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.cloneElement(child, {
       isFirstInRow: index === 0
     }))
   });
 });
-Row.displayName = 'Row';
-Row.propTypes = {
+TableRow.displayName = 'TableRow';
+TableRow.propTypes = {
   tokens: _propTypes.default.shape({
     borderColor: _propTypes.default.string,
     topBorderWidth: _propTypes.default.string,
@@ -70,5 +70,4 @@ Row.propTypes = {
     rowHoverBackgroundColor: _propTypes.default.string
   }),
   children: _propTypes.default.node
-};
-var _default = exports.default = Row;
+};

package/lib/cjs/Table/{SubHeading.js → TableSubHeading.js}

@@ -3,19 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.TableSubHeading = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
-var _Row = _interopRequireDefault(require("./Row"));
+var _TableRow = require("./TableRow");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Header = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const TableSubHeading = exports.TableSubHeading = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     tokens
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Row.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableRow.TableRow, {
     ref: ref,
     tokens: tokens,
     children: _react.default.Children.map(children, child =>
@@ -26,9 +26,8 @@ const Header = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }))
   });
 });
-Header.displayName = 'Header';
-Header.propTypes = {
+TableSubHeading.displayName = 'TableSubHeading';
+TableSubHeading.propTypes = {
   children: _propTypes.default.node,
   tokens: (0, _componentsBase.getTokensPropType)('Table')
-};
-var _default = exports.default = Header;
+};