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

package/lib/esm/SkeletonProvider/SkeletonImage.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Skeleton } from '@telus-uds/components-base';
 import { jsx as _jsx } from "react/jsx-runtime";
-const SkeletonImage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const SkeletonImage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     rounded,
     imgHeight,
@@ -34,5 +34,4 @@ SkeletonImage.propTypes = {
   sizePixels: Skeleton.propTypes?.sizePixels,
   show: PropTypes.bool.isRequired,
   children: PropTypes.node
-};
-export default SkeletonImage;
+};

package/lib/esm/SkeletonProvider/SkeletonProvider.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Typography } from '@telus-uds/components-base';
-import Image from '../Image';
-import SkeletonTypography from './SkeletonTypography';
-import SkeletonImage from './SkeletonImage';
+import { Image } from '../Image/Image';
+import { SkeletonTypography } from './SkeletonTypography';
+import { SkeletonImage } from './SkeletonImage';
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-const SkeletonProvider = _ref => {
+export const SkeletonProvider = _ref => {
   let {
     children,
     show
@@ -22,7 +22,7 @@ const SkeletonProvider = _ref => {
       const {
         children: elementChildren
       } = childElement.props;
-      const mappedChildren = Array.isArray(elementChildren) ? elementChildren.map(mapChild) : mapChild(elementChildren);
+      const mappedChildren = React.Children.map(elementChildren, mapChild);
       childElement = /*#__PURE__*/React.cloneElement(childElement, {
         children: mappedChildren
       });
@@ -52,5 +52,4 @@ const SkeletonProvider = _ref => {
 SkeletonProvider.propTypes = {
   show: PropTypes.bool.isRequired,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired
-};
-export default SkeletonProvider;
+};

package/lib/esm/SkeletonProvider/SkeletonTypography.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Skeleton } from '@telus-uds/components-base';
 import { jsx as _jsx } from "react/jsx-runtime";
-const SkeletonTypography = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const SkeletonTypography = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     show,
     size,
@@ -33,5 +33,4 @@ SkeletonTypography.propTypes = {
   sizePixels: Skeleton.propTypes?.sizePixels,
   characters: Skeleton.propTypes?.characters,
   lines: Skeleton.propTypes?.lines
-};
-export default SkeletonTypography;
+};

package/lib/esm/Span/Span.js

@@ -10,9 +10,9 @@ const StyledSpan = /*#__PURE__*/styled.span.withConfig({
   componentId: "components-web__sc-o7sihn-0"
 })(["", "};"], _ref => {
   let {
-    flex
+    $flex
   } = _ref;
-  return flex ? 'display: inline-flex' : '';
+  return $flex ? 'display: inline-flex' : '';
 });
 
 /**
@@ -21,7 +21,7 @@ const StyledSpan = /*#__PURE__*/styled.span.withConfig({
  * Span may be used in cases where an inline span or direct access to HTML attributes is required.
  * In most cases, `Typography` should be used for text, or Paragraph for body text.
  */
-const Span = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const Span = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     variant,
@@ -33,7 +33,7 @@ const Span = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   const style = useTypographyTheme(variant, tokens);
   return /*#__PURE__*/_jsx(StyledSpan, {
     "data-testid": testID,
-    flex: flex,
+    $flex: flex,
     style: style,
     ref: ref,
     ...selectProps(rest),
@@ -68,5 +68,4 @@ Span.propTypes = {
     size: PropTypes.oneOf(['micro', 'small', 'large', 'eyebrow', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'display1', 'display2']),
     weight: PropTypes.oneOf(['semibold', 'bold'])
   })
-};
-export default Span;
+};

package/lib/esm/Spinner/Spinner.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { selectSystemProps, useScrollBlocking, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
 import { Portal } from '@gorhom/portal';
 import styled from 'styled-components';
-import SpinnerContent from './SpinnerContent';
+import { SpinnerContent } from './SpinnerContent';
 import { htmlAttrs, media } from '../utils';
 import { BACKDROP_OPACITY, BACKDROP_Z_INDEX } from './constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -13,19 +13,19 @@ const SpinnerContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-116rqck-0"
 })(_ref => {
   let {
-    inline,
-    fullScreen,
-    overlay
+    $inline,
+    $fullScreen,
+    $overlay
   } = _ref;
   return {
     position: 'relative',
-    ...(inline && {
-      display: overlay ? 'inline-block' : 'block',
+    ...($inline && {
+      display: $overlay ? 'inline-block' : 'block',
       ...media().from('md').css({
         display: 'inline-block'
       })
     }),
-    ...(fullScreen && {
+    ...($fullScreen && {
       top: '50%',
       transform: 'translateY(-50%)'
     })
@@ -48,7 +48,7 @@ const FullscreenOverlay = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-116rqck-2"
 })(_ref2 => {
   let {
-    fullScreenOverLayBackground
+    $fullScreenOverLayBackground
   } = _ref2;
   return {
     position: 'fixed',
@@ -57,7 +57,7 @@ const FullscreenOverlay = /*#__PURE__*/styled.div.withConfig({
     top: 0,
     left: 0,
     zIndex: BACKDROP_Z_INDEX,
-    backgroundColor: fullScreenOverLayBackground
+    backgroundColor: $fullScreenOverLayBackground
   };
 });
 const OpaqueContainer = /*#__PURE__*/styled.div.withConfig({
@@ -65,10 +65,10 @@ const OpaqueContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-116rqck-3"
 })(_ref3 => {
   let {
-    show = true
+    $show = true
   } = _ref3;
   return {
-    ...(show && {
+    ...($show && {
       opacity: BACKDROP_OPACITY
     })
   };
@@ -88,7 +88,7 @@ const recursiveMap = (children, fn) => React.Children.map(children, child => {
 /**
  * Loading indicator.
  */
-const Spinner = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+export const Spinner = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     children,
     fullScreen = false,
@@ -115,14 +115,14 @@ const Spinner = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   // Overlay spinner with persistChildrenState enabled
   if (children && persistChildrenState) {
     return /*#__PURE__*/_jsxs(SpinnerContainer, {
-      inline: inline,
+      $inline: inline,
       "aria-live": "assertive",
-      overlay: true,
+      $overlay: true,
       ...selectProps(rest),
       children: [/*#__PURE__*/_jsx(OpaqueContainer, {
-        show: show,
+        $show: show,
         ...(show ? {
-          inert: 'true',
+          inert: true,
           'aria-hidden': 'true'
         } : {}),
         children: children
@@ -145,10 +145,10 @@ const Spinner = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   if (fullScreen) {
     return /*#__PURE__*/_jsx(Portal, {
       children: /*#__PURE__*/_jsx(FullscreenOverlay, {
-        fullScreenOverLayBackground: fullScreenOverLayBackground,
+        $fullScreenOverLayBackground: fullScreenOverLayBackground,
         children: /*#__PURE__*/_jsx(SpinnerContainer, {
-          inline: inline,
-          fullScreen: fullScreen,
+          $inline: inline,
+          $fullScreen: fullScreen,
           "aria-live": "assertive",
           ...selectProps(rest),
           children: /*#__PURE__*/_jsx(SpinnerContent, {
@@ -168,9 +168,9 @@ const Spinner = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   // Overlay spinner
   if (children && !persistChildrenState) {
     return /*#__PURE__*/_jsxs(SpinnerContainer, {
-      inline: inline,
+      $inline: inline,
       "aria-live": "assertive",
-      overlay: true,
+      $overlay: true,
       ...selectProps(rest),
       children: [/*#__PURE__*/_jsx(SpinnerContent, {
         label: label,
@@ -181,7 +181,8 @@ const Spinner = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
         sizeVariant: sizeVariant,
         isStatic: isStatic
       }), /*#__PURE__*/_jsx(ContentOverlay, {}), /*#__PURE__*/_jsx(OpaqueContainer, {
-        inert: "true",
+        $show: show,
+        inert: true,
         children: recursiveMap(children, c => {
           if (c) {
             return /*#__PURE__*/React.cloneElement(c, {
@@ -255,5 +256,4 @@ Spinner.propTypes = {
    * Use this when overlaying stateful components such as Micro Frontends (MFEs).
    */
   persistChildrenState: PropTypes.bool
-};
-export default Spinner;
+};

package/lib/esm/Spinner/SpinnerContent.js

@@ -11,13 +11,13 @@ const Container = /*#__PURE__*/styled.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%',
@@ -26,7 +26,7 @@ const Container = /*#__PURE__*/styled.div.withConfig({
     })
   };
 });
-const SpinnerContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const SpinnerContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     label,
     labelPosition,
@@ -39,7 +39,7 @@ const SpinnerContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ...rest
   } = _ref2;
   return /*#__PURE__*/_jsx(Container, {
-    overlay: overlay,
+    $overlay: overlay,
     ref: ref,
     "aria-label": label,
     role: "status",
@@ -82,5 +82,4 @@ SpinnerContent.propTypes = {
    * If true, it should render a static spinner
    */
   isStatic: PropTypes.bool
-};
-export default SpinnerContent;
+};

package/lib/esm/StoryCard/StoryCard.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Box, Divider, PressableCardBase, selectSystemProps, Spacer, StackView, StackWrap, Typography, hrefAttrsProp, a11yProps, focusHandlerProps, viewProps, withLinkRouter, useThemeTokens, useThemeTokensCallback, getTokensPropType } from '@telus-uds/components-base';
 import styled from 'styled-components';
-import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
+import { FullBleedContent, getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
 
 // Passes React Native-oriented system props through UDS PressableCardBase
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -15,11 +15,11 @@ const FullBleedOffsetOuter = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-yhvivu-0"
 })(_ref => {
   let {
-    borderOffset
+    $borderOffset
   } = _ref;
   return {
     overflow: 'hidden',
-    marginTop: borderOffset * 2
+    marginTop: $borderOffset * 2
   };
 });
 const FullBleedOffsetInner = /*#__PURE__*/styled.div.withConfig({
@@ -27,11 +27,11 @@ const FullBleedOffsetInner = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-yhvivu-1"
 })(_ref2 => {
   let {
-    borderOffset
+    $borderOffset
   } = _ref2;
   return {
     position: 'relative',
-    margin: 0 - borderOffset
+    margin: 0 - $borderOffset
   };
 });
 
@@ -52,8 +52,7 @@ const StoryCard = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     date,
     title,
     description,
-    fullBleedImage,
-    fullBleedContent = fullBleedImage,
+    fullBleedContent,
     onPress,
     href,
     tokens,
@@ -152,9 +151,9 @@ const StoryCard = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
             children: description
           })]
         }), Boolean(fullBleedContentProps.src || fullBleedContentProps.content) && /*#__PURE__*/_jsx(FullBleedOffsetOuter, {
-          borderOffset: borderOffset,
+          $borderOffset: borderOffset,
           children: /*#__PURE__*/_jsx(FullBleedOffsetInner, {
-            borderOffset: borderOffset,
+            $borderOffset: borderOffset,
             children: /*#__PURE__*/_jsx(FullBleedContent, {
               borderRadius: fullBleedBorderRadius,
               ...fullBleedContentProps
@@ -197,15 +196,15 @@ StoryCard.propTypes = {
    * Text giving a short description of the story. One paragraph of plain text.
    */
   description: PropTypes.string.isRequired,
-  /**
-   * Full bleed image to be placed on the card, deprecated in favor of `fullBleedContent`.
-   *
-   * @deprecated
-   */
-  fullBleedImage: PropTypes.exact(FullBleedContent.propTypes || {}),
   /**
    * Full bleed image to be placed on the card.
    */
   fullBleedContent: PropTypes.exact(FullBleedContent.propTypes || {})
 };
-export default withLinkRouter(StoryCard);
+
+// Export unwrapped component for react-docgen to extract info for docsite
+export { StoryCard as StoryCardBase };
+
+// Export wrapped component as main StoryCard export
+const StoryCardWithRouter = withLinkRouter(StoryCard);
+export { StoryCardWithRouter as StoryCard };

package/lib/esm/Table/Table.js

@@ -9,17 +9,17 @@ 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}px` : 0);
+})(["overflow:auto;padding-bottom:", ";"], props => props.$isScrollable ? `${props.$tablePaddingBottom}px` : 0);
 const StyledTable = /*#__PURE__*/styled.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.createContext({});
 export const useTableContext = () => React.useContext(TableContext);
 
@@ -32,12 +32,12 @@ export const useTableContext = () => React.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"`)
  */
-const Table = _ref2 => {
+export const Table = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     spacing = 'default',
@@ -53,7 +53,8 @@ const Table = _ref2 => {
     borderColor,
     borderWidth
   } = themeTokens;
-  const containerRef = React.useRef();
+  const internalRef = React.useRef();
+  const containerRef = ref ?? internalRef;
   const tableRef = React.useRef();
   const [containerWidth, setContainerWidth] = React.useState(0);
   const [tableWidth, setTableWidth] = React.useState(0);
@@ -80,8 +81,8 @@ const Table = _ref2 => {
   const isScrollable = tableWidth > containerWidth;
   return /*#__PURE__*/_jsx(StyledContainer, {
     ref: containerRef,
-    isScrollable: isScrollable,
-    tablePaddingBottom: tablePaddingBottom,
+    $isScrollable: isScrollable,
+    $tablePaddingBottom: tablePaddingBottom,
     children: /*#__PURE__*/_jsx(TableContext.Provider, {
       value: {
         text,
@@ -92,25 +93,31 @@ const Table = _ref2 => {
         themeTokens
       },
       children: /*#__PURE__*/_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: getTokensPropType('Table'),
+  /** Table content (rows, headers, etc) */
   children: PropTypes.node,
-  /**
-   * Sets text style
-   */
-  text: PropTypes.oneOf(['medium', 'small'])
-};
-export default Table;
+  /** Sets text style */
+  text: PropTypes.oneOf(['medium', 'small']),
+  /** Table spacing variant */
+  spacing: PropTypes.oneOf(['default', 'compact']),
+  /** If true, table takes 100% width of container */
+  fullWidth: PropTypes.bool,
+  /** Variant for Table styling */
+  variant: PropTypes.object
+};

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Body = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const TableBody = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
@@ -10,8 +10,7 @@ const Body = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children: children
   });
 });
-Body.displayName = 'Body';
-Body.propTypes = {
+TableBody.displayName = 'TableBody';
+TableBody.propTypes = {
   children: PropTypes.node
-};
-export default Body;
+};

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

@@ -19,51 +19,51 @@ const stickyStyles = _ref => {
 };
 const sharedStyles = /*#__PURE__*/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 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 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 => styled[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.forwardRef((_ref5, ref) => {
+export const TableCell = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     children,
     isFirstInRow,
@@ -112,25 +112,25 @@ const Cell = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     ...variant
   });
   const sharedProps = {
-    align,
-    isSticky: isTableScrollable && isFirstInRow,
-    cellBackground,
-    cellMinWidth,
-    cellStickyShadow: 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: 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 = {
@@ -145,7 +145,7 @@ const Cell = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
       return /*#__PURE__*/_jsx(StyledHeaderCell, {
         scope: "col",
         ...sharedProps,
-        type: type,
+        $type: type,
         children: /*#__PURE__*/_jsx(Typography, {
           tokens: typographyTokens,
           children: children
@@ -155,7 +155,7 @@ const Cell = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
       return /*#__PURE__*/_jsx(StyledHeaderCell, {
         scope: "col",
         ...sharedProps,
-        type: type,
+        $type: type,
         children: /*#__PURE__*/_jsx(Typography, {
           tokens: typographyTokens,
           children: children
@@ -165,7 +165,7 @@ const Cell = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
       return /*#__PURE__*/_jsx(StyledHeaderCell, {
         scope: "row",
         ...sharedProps,
-        type: type,
+        $type: type,
         children: /*#__PURE__*/_jsx(Typography, {
           tokens: typographyTokens,
           children: children
@@ -181,8 +181,8 @@ const Cell = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
       });
   }
 });
-Cell.displayName = 'Cell';
-Cell.propTypes = {
+TableCell.displayName = 'TableCell';
+TableCell.propTypes = {
   type: PropTypes.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
   tokens: PropTypes.object,
   children: PropTypes.node,
@@ -195,5 +195,4 @@ Cell.propTypes = {
    * Defines the text alignment within the cell
    */
   align: PropTypes.oneOf(['left', 'center', 'right'])
-};
-export default Cell;
+};