@telus-uds/components-web 3.2.0 → 3.2.1

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) => {

package/lib/Table/Table.js

@@ -1,25 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { selectSystemProps, useSafeLayoutEffect, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
 import throttle from 'lodash.throttle';
-import { htmlAttrs } from '../utils';
+import { htmlAttrs, styledComponents } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 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);
-const StyledTable = /*#__PURE__*/styled.table.withConfig({
-  displayName: "Table__StyledTable",
-  componentId: "components-web__sc-10d9q3m-1"
-})(["margin:0;padding:0;width:", ";border:", ";"], _ref => {
+const StyledContainer = styled.div`
+  overflow: auto;
+  padding-bottom: ${props => props.isScrollable ? `${props.tablePaddingBottom}px` : 0};
+`;
+const StyledTable = styled.table`
+  margin: 0;
+  padding: 0;
+  width: ${_ref => {
   let {
     fullWidth,
     tableWidth
   } = _ref;
   return fullWidth ? '100%' : `${tableWidth}px`;
-}, props => `${props.borderWidth}px solid ${props.borderColor}`);
+}};
+  border: ${props => `${props.borderWidth}px solid ${props.borderColor}`};
+`;
 const TableContext = /*#__PURE__*/React.createContext({});
 export const useTableContext = () => React.useContext(TableContext);
 

package/lib/TermsAndConditions/ExpandCollapse.js

@@ -1,22 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ExpandCollapse as ExpandCollapseBase, IconButton, useThemeTokensCallback } from '@telus-uds/components-base';
-import styled from 'styled-components';
+import { styledComponents } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ExpandCollapseControl = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ExpandCollapse__ExpandCollapseControl",
-  componentId: "components-web__sc-1l2mmq7-0"
-})({
+const {
+  styled
+} = styledComponents;
+const ExpandCollapseControl = styled.div({
   alignItems: 'center',
   cursor: 'pointer',
   display: 'flex',
   flex: 1,
   justifyContent: 'flex-start'
 });
-const ExpandCollapseIconContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ExpandCollapse__ExpandCollapseIconContainer",
-  componentId: "components-web__sc-1l2mmq7-1"
-})(_ref => {
+const ExpandCollapseIconContainer = styled.div(_ref => {
   let {
     tokens
   } = _ref;
@@ -28,10 +25,7 @@ const ExpandCollapseIconContainer = /*#__PURE__*/styled.div.withConfig({
     width: tokens.expandIconContainerWidth
   };
 });
-const ExpandCollapseTitle = /*#__PURE__*/styled.h4.withConfig({
-  displayName: "ExpandCollapse__ExpandCollapseTitle",
-  componentId: "components-web__sc-1l2mmq7-2"
-})(_ref2 => {
+const ExpandCollapseTitle = styled.h4(_ref2 => {
   let {
     tokens
   } = _ref2;

package/lib/TermsAndConditions/TermsAndConditions.js

@@ -1,17 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { Box, Divider, selectSystemProps, Typography, useCopy, useThemeTokens, useViewport, getTokensPropType, useTheme, useResponsiveThemeTokens, createMediaQueryStyles, StyleSheet } from '@telus-uds/components-base';
 import ExpandCollapse from './ExpandCollapse';
 import OrderedListBase from '../OrderedList/OrderedListBase';
-import { htmlAttrs, media, renderStructuredContent } from '../utils';
+import { htmlAttrs, media, renderStructuredContent, styledComponents } from '../utils';
 import defaultDictionary from './dictionary';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const ContentContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "TermsAndConditions__ContentContainer",
-  componentId: "components-web__sc-1199epn-0"
-})(_ref => {
+const ContentContainer = styled.div(_ref => {
   let {
     tokens
   } = _ref;
@@ -24,10 +23,7 @@ const ContentContainer = /*#__PURE__*/styled.div.withConfig({
     })
   };
 });
-const Ordered = /*#__PURE__*/styled(OrderedListBase).withConfig({
-  displayName: "TermsAndConditions__Ordered",
-  componentId: "components-web__sc-1199epn-1"
-})(_ref2 => {
+const Ordered = styled(OrderedListBase)(_ref2 => {
   let {
     tokens
   } = _ref2;
@@ -36,10 +32,7 @@ const Ordered = /*#__PURE__*/styled(OrderedListBase).withConfig({
     padding: tokens.orderedPadding
   };
 });
-const Unordered = /*#__PURE__*/styled.ul.withConfig({
-  displayName: "TermsAndConditions__Unordered",
-  componentId: "components-web__sc-1199epn-2"
-})(_ref3 => {
+const Unordered = styled.ul(_ref3 => {
   let {
     tokens
   } = _ref3;
@@ -50,10 +43,7 @@ const Unordered = /*#__PURE__*/styled.ul.withConfig({
     paddingTop: tokens.unorderedPadding
   };
 });
-const ListItem = /*#__PURE__*/styled(OrderedListBase.Item).withConfig({
-  displayName: "TermsAndConditions__ListItem",
-  componentId: "components-web__sc-1199epn-3"
-})(_ref4 => {
+const ListItem = styled(OrderedListBase.Item)(_ref4 => {
   let {
     tokens
   } = _ref4;
@@ -74,10 +64,7 @@ const ListItem = /*#__PURE__*/styled(OrderedListBase.Item).withConfig({
     wordBreak: 'break-word'
   };
 });
-const NonIndexedContentTitle = /*#__PURE__*/styled.div.withConfig({
-  displayName: "TermsAndConditions__NonIndexedContentTitle",
-  componentId: "components-web__sc-1199epn-4"
-})(_ref5 => {
+const NonIndexedContentTitle = styled.div(_ref5 => {
   let {
     tokens
   } = _ref5;

package/lib/Testimonial/Testimonial.js

@@ -1,15 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { Icon, selectSystemProps, Typography, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
 import Image from '../Image';
-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 TestimonialContainer = /*#__PURE__*/styled.figure.withConfig({
-  displayName: "Testimonial__TestimonialContainer",
-  componentId: "components-web__sc-1az53gr-0"
-})(_ref => {
+const TestimonialContainer = styled.figure(_ref => {
   let {
     testimonialContainerGap
   } = _ref;
@@ -20,10 +19,7 @@ const TestimonialContainer = /*#__PURE__*/styled.figure.withConfig({
     margin: 0
   };
 });
-const QuoteContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Testimonial__QuoteContainer",
-  componentId: "components-web__sc-1az53gr-1"
-})(_ref2 => {
+const QuoteContainer = styled.div(_ref2 => {
   let {
     quoteContainerGap
   } = _ref2;
@@ -33,10 +29,7 @@ const QuoteContainer = /*#__PURE__*/styled.div.withConfig({
     gap: quoteContainerGap
   };
 });
-const Divider = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Testimonial__Divider",
-  componentId: "components-web__sc-1az53gr-2"
-})(_ref3 => {
+const Divider = styled.div(_ref3 => {
   let {
     dividerBorder,
     dividerBackgroundColor
@@ -47,23 +40,14 @@ const Divider = /*#__PURE__*/styled.div.withConfig({
     width: '100%'
   };
 });
-const BlockQuote = /*#__PURE__*/styled.blockquote.withConfig({
-  displayName: "Testimonial__BlockQuote",
-  componentId: "components-web__sc-1az53gr-3"
-})({
+const BlockQuote = styled.blockquote({
   margin: 0
 });
-const AuthorInfoContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Testimonial__AuthorInfoContainer",
-  componentId: "components-web__sc-1az53gr-4"
-})({
+const AuthorInfoContainer = styled.div({
   display: 'flex',
   flexDirection: 'column'
 });
-const Figcaption = /*#__PURE__*/styled.figcaption.withConfig({
-  displayName: "Testimonial__Figcaption",
-  componentId: "components-web__sc-1az53gr-5"
-})(_ref4 => {
+const Figcaption = styled.figcaption(_ref4 => {
   let {
     figcaptionGap
   } = _ref4;