@telus-uds/components-web 3.1.0 → 3.2.1

package/lib/PriceLockup/PriceLockup.js

@@ -1,112 +1,122 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { A11yText, Divider, selectSystemProps, Typography, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
-import styled from 'styled-components';
 import FootnoteLink from '../Footnote/FootnoteLink';
 import getTypographyTokens from './tokens';
-import { htmlAttrs, warn } from '../utils';
+import { htmlAttrs, warn, styledComponents } from '../utils';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const PriceLockupContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "PriceLockup__PriceLockupContainer",
-  componentId: "components-web__sc-1x6duay-0"
-})(["align-items:", ";display:flex;flex-direction:column;width:fit-content;"], _ref => {
+const PriceLockupContainer = styled.div`
+  align-items: ${_ref => {
   let {
     alignItemsText
   } = _ref;
   return alignItemsText;
-});
-const PriceContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "PriceLockup__PriceContainer",
-  componentId: "components-web__sc-1x6duay-1"
-})(["display:flex;margin-bottom:", ";"], _ref2 => {
+}};
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+`;
+const PriceContainer = styled.div`
+  display: flex;
+  margin-bottom: ${_ref2 => {
   let {
     priceMarginBottom
   } = _ref2;
   return priceMarginBottom;
-});
-const FootnoteContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "PriceLockup__FootnoteContainer",
-  componentId: "components-web__sc-1x6duay-2"
-})(["display:flex;margin-top:", ";gap:", ";"], _ref3 => {
+}};
+`;
+const FootnoteContainer = styled.div`
+  display: flex;
+  margin-top: ${_ref3 => {
   let {
     footnoteMarginTop
   } = _ref3;
   return footnoteMarginTop;
-}, _ref4 => {
+}};
+  gap: ${_ref4 => {
   let {
     footnoteGap
   } = _ref4;
   return footnoteGap;
-});
-const BottomTextContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "PriceLockup__BottomTextContainer",
-  componentId: "components-web__sc-1x6duay-3"
-})(["margin-top:", ";"], _ref5 => {
+}};
+`;
+const BottomTextContainer = styled.div`
+  margin-top: ${_ref5 => {
   let {
     bottomTextMarginTop
   } = _ref5;
   return bottomTextMarginTop;
-});
-const BottomLinksContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "PriceLockup__BottomLinksContainer",
-  componentId: "components-web__sc-1x6duay-4"
-})(["align-self:center;margin-left:", ";"], _ref6 => {
+}};
+`;
+const BottomLinksContainer = styled.div`
+  align-self: center;
+  margin-left: ${_ref6 => {
   let {
     bottomLinksMarginLeft
   } = _ref6;
   return bottomLinksMarginLeft;
-});
-const TopTextContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "PriceLockup__TopTextContainer",
-  componentId: "components-web__sc-1x6duay-5"
-})(["margin-bottom:", ";"], _ref7 => {
+}};
+`;
+const TopTextContainer = styled.div`
+  margin-bottom: ${_ref7 => {
   let {
     topTextMarginBottom
   } = _ref7;
   return topTextMarginBottom;
-});
-const PriceTextContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "PriceLockup__PriceTextContainer",
-  componentId: "components-web__sc-1x6duay-6"
-})(["display:flex;flex-direction:", ";"], _ref8 => {
+}};
+`;
+const PriceTextContainer = styled.div`
+  display: flex;
+  flex-direction: ${_ref8 => {
   let {
     ratePosition
   } = _ref8;
   return ratePosition === 'bottom' ? 'column' : 'row';
-});
-const RateContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "PriceLockup__RateContainer",
-  componentId: "components-web__sc-1x6duay-7"
-})(["display:flex;"]);
-const RateTextContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "PriceLockup__RateTextContainer",
-  componentId: "components-web__sc-1x6duay-8"
-})(["align-self:", ";"], _ref9 => {
+}};
+`;
+const RateContainer = styled.div`
+  display: flex;
+`;
+const RateTextContainer = styled.div`
+  align-self: ${_ref9 => {
   let {
     ratePosition
   } = _ref9;
   return ratePosition === 'bottom' ? 'flex-start' : 'flex-end';
-});
-const StrikeThroughContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "PriceLockup__StrikeThroughContainer",
-  componentId: "components-web__sc-1x6duay-9"
-})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;top:", ";height:", ";background:", ";position:absolute;}"], _ref10 => {
+}};
+`;
+const StrikeThroughContainer = styled.div`
+  display: flex;
+  position: relative;
+  align-items: center;
+  ::before {
+    content: '';
+    width: 100%;
+    top: ${_ref10 => {
   let {
     strikeThroughPosition
   } = _ref10;
   return `${strikeThroughPosition}px`;
-}, _ref11 => {
+}};
+    height: ${_ref11 => {
   let {
     strikeThroughHeight
   } = _ref11;
   return `${strikeThroughHeight}px`;
-}, _ref12 => {
+}};
+    background: ${_ref12 => {
   let {
     strikeThroughColor
   } = _ref12;
   return strikeThroughColor;
-});
+}};
+    position: absolute;
+  }
+`;
 const selectFootnoteLinkStyles = _ref13 => {
   let {
     footnoteLinkColor,

package/lib/Progress/ProgressBar.js

@@ -1,19 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getTokensPropType, Progress, selectSystemProps, useThemeTokens, a11yProps, viewProps, variantProp, applyShadowToken } from '@telus-uds/components-base';
-import styled from 'styled-components';
+import { styledComponents } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 
 // Passes React Native-oriented system props through UDS Progress
-import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const {
   Bar: ProgressBarBase
 } = Progress;
-const Gradient = /*#__PURE__*/styled.div.attrs({
+const Gradient = styled.div.attrs({
   'data-testid': 'ProgressBar-Gradient'
-}).withConfig({
-  displayName: "ProgressBar__Gradient",
-  componentId: "components-web__sc-1vmzyq5-0"
 })(_ref => {
   let {
     gradient: {

package/lib/QuantitySelector/QuantitySelector.js

@@ -78,7 +78,7 @@ const QuantitySelector = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       setError(getCopy('errors').invalidCharacters);
     }
   };
-  const renderLabel = () => label ? /*#__PURE__*/_jsx(InputLabel, {
+  const renderLabel = () => label || hint ? /*#__PURE__*/_jsx(InputLabel, {
     forId: id,
     label: label,
     hint: hint,

package/lib/QuantitySelector/styles.js

@@ -1,9 +1,18 @@
-import styled from 'styled-components';
-export const InputField = /*#__PURE__*/styled.div.withConfig({
-  displayName: "styles__InputField",
-  componentId: "components-web__sc-1lrz1xk-0"
-})(["order:1;text-align:center;z-index:10;input{text-align:center;}"]);
-export const InputWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "styles__InputWrapper",
-  componentId: "components-web__sc-1lrz1xk-1"
-})(["text-align:start;display:flex;flex-direction:row;flex-wrap:nowrap;"]);
+import { styledComponents } from '../utils';
+const {
+  styled
+} = styledComponents;
+export const InputField = styled.div`
+  order: 1;
+  text-align: center;
+  z-index: 10;
+  input {
+    text-align: center;
+  }
+`;
+export const InputWrapper = styled.div`
+  text-align: start;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+`;

package/lib/ResponsiveImage/ResponsiveImage.js

@@ -25,11 +25,13 @@ const ResponsiveImage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     fallbackSrc,
     alt,
     loading = 'eager',
+    dataSet,
     ...rest
   } = _ref;
   return /*#__PURE__*/_jsxs("picture", {
     ...selectProps(rest),
     ref: ref,
+    ...dataSet,
     children: [/*#__PURE__*/_jsx("source", {
       srcSet: xlSrc,
       media: `(min-width: ${viewports.map.get(viewports.xl)}px)`
@@ -89,6 +91,10 @@ ResponsiveImage.propTypes = {
    * @default 'eager'
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
    */
-  loading: PropTypes.oneOf(['eager', 'lazy'])
+  loading: PropTypes.oneOf(['eager', 'lazy']),
+  /**
+   * The dataSet prop allows to pass data-* attributes element to the component.
+   */
+  dataSet: PropTypes.object
 };
 export default ResponsiveImage;

package/lib/Ribbon/Ribbon.js

@@ -1,109 +1,135 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { selectSystemProps, Typography, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
-import styled from 'styled-components';
-import { htmlAttrs } from '../utils';
+import { htmlAttrs, styledComponents } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const RibbonWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Ribbon__RibbonWrapper",
-  componentId: "components-web__sc-186270k-0"
-})(["width:fit-content;position:", ";z-index:1;left:", ";top:", ";"], _ref => {
+const RibbonWrapper = styled.div`
+  width: fit-content;
+  position: ${_ref => {
   let {
     left,
     top
   } = _ref;
   return left ?? top ? 'absolute' : 'relative';
-}, _ref2 => {
+}};
+  z-index: 1;
+  left: ${_ref2 => {
   let {
     left
   } = _ref2;
   return left && `${left}px`;
-}, _ref3 => {
+}};
+  top: ${_ref3 => {
   let {
     top
   } = _ref3;
   return top && `${top}px`;
-});
-const RibbonContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Ribbon__RibbonContainer",
-  componentId: "components-web__sc-186270k-1"
-})(["display:flex;justify-content:center;background:", ";padding:", ";border-radius:", ";width:fit-content;box-shadow:", ";border-bottom-right-radius:", ";border-bottom-left-radius:", ";"], _ref4 => {
+}};
+`;
+const RibbonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  background: ${_ref4 => {
   let {
     backgroundColor
   } = _ref4;
   return backgroundColor;
-}, _ref5 => {
+}};
+  padding: ${_ref5 => {
   let {
     padding
   } = _ref5;
   return `${padding}`;
-}, _ref6 => {
+}};
+  border-radius: ${_ref6 => {
   let {
     borderRadius
   } = _ref6;
   return borderRadius;
-}, _ref7 => {
+}};
+  width: fit-content;
+  box-shadow: ${_ref7 => {
   let {
     boxShadow,
     shouldWrap
   } = _ref7;
   return shouldWrap && boxShadow;
-}, _ref8 => {
+}};
+  border-bottom-right-radius: ${_ref8 => {
   let {
     borderRadiusBottomLeft
   } = _ref8;
   return borderRadiusBottomLeft;
-}, _ref9 => {
+}};
+  border-bottom-left-radius: ${_ref9 => {
   let {
     borderRadiusBottomRight
   } = _ref9;
   return borderRadiusBottomRight;
-});
-const RibbonCurve = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Ribbon__RibbonCurve",
-  componentId: "components-web__sc-186270k-2"
-})(["background:", ";width:", ";height:", ";margin-top:-", ";border-radius:0 0 0 100%;position:relative;z-index:-1;overflow:hidden;&::after{content:'';border-bottom-left-radius:", ";position:absolute;height:", ";background:", ";width:", ";}"], _ref10 => {
+}};
+`;
+const RibbonCurve = styled.div`
+  background: ${_ref10 => {
   let {
     curveBackgroundColor
   } = _ref10;
   return curveBackgroundColor;
-}, _ref11 => {
+}};
+  width: ${_ref11 => {
   let {
     curveWidth
   } = _ref11;
   return curveWidth;
-}, _ref12 => {
+}};
+  height: ${_ref12 => {
   let {
     curveHeight
   } = _ref12;
   return curveHeight;
-}, _ref13 => {
+}};
+  margin-top: -${_ref13 => {
   let {
     curveMarginTop
   } = _ref13;
   return curveMarginTop;
-}, _ref14 => {
+}};
+  border-radius: 0 0 0 100%;
+  position: relative;
+  z-index: -1;
+  overflow: hidden;
+  &::after {
+    content: '';
+    border-bottom-left-radius: ${_ref14 => {
   let {
     curveAfterRadius
   } = _ref14;
   return curveAfterRadius;
-}, _ref15 => {
+}};
+    position: absolute;
+    height: ${_ref15 => {
   let {
     curveAfterHeight
   } = _ref15;
   return curveAfterHeight;
-}, _ref16 => {
+}};
+    background: ${_ref16 => {
   let {
     curveAfterBackgroundColor
   } = _ref16;
   return curveAfterBackgroundColor;
-}, _ref17 => {
+}};
+    width: ${_ref17 => {
   let {
     curveAfterWidth
   } = _ref17;
   return curveAfterWidth;
-});
+}};
+  }
+`;
 const Ribbon = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
   let {
     children,

package/lib/Span/Span.js

@@ -1,19 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { getTokensPropType, selectSystemProps } from '@telus-uds/components-base';
-import { htmlAttrs, useTypographyTheme } from '../utils';
+import { htmlAttrs, useTypographyTheme, styledComponents } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledSpan = /*#__PURE__*/styled.span.withConfig({
-  displayName: "Span__StyledSpan",
-  componentId: "components-web__sc-o7sihn-0"
-})(["", "};"], _ref => {
+const StyledSpan = styled.span`${_ref => {
   let {
     flex
   } = _ref;
   return flex ? 'display: inline-flex' : '';
-});
+}}};`;
 
 /**
  * Text as an HTML ```<span>``` element.

package/lib/Spinner/Spinner.js

@@ -1,17 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { selectSystemProps, useScrollBlocking, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
 import { Portal } from '@gorhom/portal';
 import SpinnerContent from './SpinnerContent';
-import { htmlAttrs, media } from '../utils';
+import { htmlAttrs, media, styledComponents } from '../utils';
 import { BACKDROP_OPACITY, BACKDROP_Z_INDEX } from './constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const SpinnerContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Spinner__SpinnerContainer",
-  componentId: "components-web__sc-116rqck-0"
-})(_ref => {
+const SpinnerContainer = styled.div(_ref => {
   let {
     inline,
     fullScreen
@@ -30,19 +29,13 @@ const SpinnerContainer = /*#__PURE__*/styled.div.withConfig({
     })
   };
 });
-const ContentOverlay = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Spinner__ContentOverlay",
-  componentId: "components-web__sc-116rqck-1"
-})({
+const ContentOverlay = styled.div({
   position: 'absolute',
   width: '100%',
   height: '100%',
   zIndex: BACKDROP_Z_INDEX
 });
-const FullscreenOverlay = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Spinner__FullscreenOverlay",
-  componentId: "components-web__sc-116rqck-2"
-})(_ref2 => {
+const FullscreenOverlay = styled.div(_ref2 => {
   let {
     fullScreenOverLayBackground
   } = _ref2;
@@ -56,10 +49,7 @@ const FullscreenOverlay = /*#__PURE__*/styled.div.withConfig({
     backgroundColor: fullScreenOverLayBackground
   };
 });
-const OpaqueContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Spinner__OpaqueContainer",
-  componentId: "components-web__sc-116rqck-3"
-})({
+const OpaqueContainer = styled.div({
   opacity: BACKDROP_OPACITY
 });
 const recursiveMap = (children, fn) => React.Children.map(children, child => {

package/lib/Spinner/SpinnerContent.js

@@ -1,15 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { ActivityIndicator, StackView, Typography, selectSystemProps } from '@telus-uds/components-base';
-import { htmlAttrs } from '../utils';
+import { htmlAttrs, styledComponents } from '../utils';
 import { BACKDROP_Z_INDEX, LARGE } from './constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const Container = /*#__PURE__*/styled.div.withConfig({
-  displayName: "SpinnerContent__Container",
-  componentId: "components-web__sc-1c8bd8e-0"
-})(_ref => {
+const Container = styled.div(_ref => {
   let {
     overlay
   } = _ref;

package/lib/StoryCard/StoryCard.js

@@ -1,19 +1,19 @@
 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 { styledComponents } from '../utils';
 import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 
 // Passes React Native-oriented system props through UDS PressableCardBase
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
 
 // Stop changes to the card's inner border width causing the size and
 // apparent position of the full bleed image to change.
-const FullBleedOffsetOuter = /*#__PURE__*/styled.div.withConfig({
-  displayName: "StoryCard__FullBleedOffsetOuter",
-  componentId: "components-web__sc-yhvivu-0"
-})(_ref => {
+const FullBleedOffsetOuter = styled.div(_ref => {
   let {
     borderOffset
   } = _ref;
@@ -22,10 +22,7 @@ const FullBleedOffsetOuter = /*#__PURE__*/styled.div.withConfig({
     marginTop: borderOffset * 2
   };
 });
-const FullBleedOffsetInner = /*#__PURE__*/styled.div.withConfig({
-  displayName: "StoryCard__FullBleedOffsetInner",
-  componentId: "components-web__sc-yhvivu-1"
-})(_ref2 => {
+const FullBleedOffsetInner = styled.div(_ref2 => {
   let {
     borderOffset
   } = _ref2;

package/lib/Table/Cell.js

@@ -1,9 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
 import { Typography, useThemeTokens, applyShadowToken } from '@telus-uds/components-base';
+import { styledComponents } from '../utils';
 import { useTableContext } from './Table';
 import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  styled,
+  css
+} = styledComponents;
 const HEADER_TYPE = {
   HEADING: 'heading',
   SUBHEADING: 'subHeading',
@@ -15,9 +19,28 @@ const stickyStyles = _ref => {
     stickyBackgroundColor,
     type
   } = _ref;
-  return 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;}"], type !== HEADER_TYPE.SUBHEADING && type !== HEADER_TYPE.HEADING ? `background-color: ${stickyBackgroundColor};` : undefined, cellStickyShadow);
+  return css`
+  position: sticky;
+  left: 0; // needed for sticky to work
+  z-index: 2;
+  clip-path: inset(0 -8px 0 0); // use clip path to cut off the shadow rendered below
+  // Override default cell background with stickyBackgroundColor with an exception to subheading and heading
+  ${type !== HEADER_TYPE.SUBHEADING && type !== HEADER_TYPE.HEADING ? `background-color: ${stickyBackgroundColor};` : undefined}
+  &::before {
+    // use a pseudo element for the sticky shadow, since we already use shadows for inner cells border
+    content: '';
+    box-shadow: ${cellStickyShadow};
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+  }
+`;
 };
-const sharedStyles = /*#__PURE__*/css(["", ""], _ref2 => {
+const sharedStyles = css`
+  ${_ref2 => {
   let {
     isSticky,
     align,
@@ -31,29 +54,37 @@ const sharedStyles = /*#__PURE__*/css(["", ""], _ref2 => {
     stickyBackgroundColor,
     type
   } = _ref2;
-  return css(["text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;background-color:", ";", ";"], align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft, cellBackground, isSticky && stickyStyles({
+  return css`
+    text-align: ${align};
+    min-width: ${cellMinWidth}px;
+    padding: ${cellPaddingTop}px ${cellPaddingRight}px ${cellPaddingBottom}px ${cellPaddingLeft}px;
+    background-color: ${cellBackground};
+    ${isSticky && stickyStyles({
     type,
     cellStickyShadow,
     stickyBackgroundColor
-  }));
-});
-const createStyledCell = htmlElement => styled[htmlElement].withConfig({
-  displayName: "Cell__createStyledCell",
-  componentId: "components-web__sc-ltgfic-0"
-})(["", ";box-shadow:", ";", ""], sharedStyles, _ref3 => {
+  })};
+  `;
+}}
+`;
+const createStyledCell = htmlElement => styled[htmlElement]`
+  ${sharedStyles};
+  box-shadow: ${_ref3 => {
   let {
     cellBoxShadowColor,
     type
   } = _ref3;
   return type === HEADER_TYPE.HEADING ? `inset 0 1px 0 ${cellBoxShadowColor}, inset 0 -1px 0 ${cellBoxShadowColor}` : `inset 0 1px 0 ${cellBoxShadowColor}`;
-}, _ref4 => {
+}};
+  ${_ref4 => {
   let {
     display
   } = _ref4;
   return display && `*:not(:empty) {
     display: ${display};
   }`;
-});
+}}
+`;
 const StyledHeaderCell = createStyledCell('th');
 const StyledDataCell = createStyledCell('td');
 const Cell = /*#__PURE__*/React.forwardRef((_ref5, ref) => {