@telus-uds/components-web 3.4.0 → 4.1.0

package/lib/{Paragraph → esm/Paragraph}/Paragraph.js

@@ -1,20 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getTokensPropType, selectSystemProps } from '@telus-uds/components-base';
-import { htmlAttrs, useTypographyTheme, styledComponents } from '../utils';
+import styled from 'styled-components';
+import { htmlAttrs, useTypographyTheme } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledParagraph = styled.p`
-  ${_ref => {
+const StyledParagraph = /*#__PURE__*/styled.p.withConfig({
+  displayName: "Paragraph__StyledParagraph",
+  componentId: "components-web__sc-1bg9r8p-0"
+})(["", " ", " &:first-child{margin-block-start:0em;}&:last-child{margin-block-end:0em;}"], _ref => {
   let {
     align
   } = _ref;
   return align ? `text-align: ${align};` : '';
-}}
-  ${_ref2 => {
+}, _ref2 => {
   let {
     linesBetween
   } = _ref2;
@@ -22,14 +21,7 @@ const StyledParagraph = styled.p`
     margin-block-start: ${linesBetween}em;
     margin-block-end: ${linesBetween}em;
   `;
-}}
-  &:first-child {
-    margin-block-start: 0em;
-  }
-  &:last-child {
-    margin-block-end: 0em;
-  }
-`;
+});
 
 /**
 * Block text as an HTML ```<p>``` element.

package/lib/{PreviewCard → esm/PreviewCard}/PreviewCard.js

@@ -2,20 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import omit from 'lodash.omit';
 import { Box, getThemeTokens, hrefAttrsProp, PressableCardBase, selectSystemProps, Spacer, StackView, Typography, a11yProps, focusHandlerProps, viewProps, withLinkRouter, useTheme, getTokensPropType } from '@telus-uds/components-base';
-import { styledComponents } from '../utils';
+import styled from 'styled-components';
 import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
 import AuthorDate from './AuthorDate';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 
 // Passes React Native-oriented system props through UDS PressableCardBase
+import { jsx as _jsx, Fragment as _Fragment, 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 = styled.div(_ref => {
+const FullBleedOffsetOuter = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PreviewCard__FullBleedOffsetOuter",
+  componentId: "components-web__sc-1yfz4de-0"
+})(_ref => {
   let {
     borderOffset
   } = _ref;
@@ -24,7 +24,10 @@ const FullBleedOffsetOuter = styled.div(_ref => {
     marginTop: borderOffset * 2
   };
 });
-const FullBleedOffsetInner = styled.div(_ref2 => {
+const FullBleedOffsetInner = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PreviewCard__FullBleedOffsetInner",
+  componentId: "components-web__sc-1yfz4de-1"
+})(_ref2 => {
   let {
     borderOffset
   } = _ref2;

package/lib/{PriceLockup → esm/PriceLockup}/PriceLockup.js

@@ -1,131 +1,126 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { A11yText, Divider, selectSystemProps, Typography, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
+import { A11yText, Divider, selectSystemProps, Typography, useThemeTokens, useViewport, getTokensPropType, a11yProps } from '@telus-uds/components-base';
+import styled from 'styled-components';
 import FootnoteLink from '../Footnote/FootnoteLink';
 import getTypographyTokens from './tokens';
-import { htmlAttrs, warn, styledComponents } from '../utils';
+import { htmlAttrs, warn } from '../utils';
+import defaultDictionary from './dictionary';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const PriceLockupContainer = styled.div`
-  align-items: ${_ref => {
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, a11yProps]);
+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 => {
   let {
     alignItemsText
   } = _ref;
   return alignItemsText;
-}};
-  display: flex;
-  flex-direction: column;
-  width: fit-content;
-`;
-const PriceContainer = styled.div`
-  display: flex;
-  margin-bottom: ${_ref2 => {
+});
+const PriceContainer = /*#__PURE__*/styled.div.attrs({
+  'aria-hidden': 'true'
+}).withConfig({
+  displayName: "PriceLockup__PriceContainer",
+  componentId: "components-web__sc-1x6duay-1"
+})(["display:flex;margin-bottom:", ";"], _ref2 => {
   let {
     priceMarginBottom
   } = _ref2;
   return priceMarginBottom;
-}};
-`;
-const FootnoteContainer = styled.div`
-  display: flex;
-  margin-top: ${_ref3 => {
+});
+const FootnoteContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__FootnoteContainer",
+  componentId: "components-web__sc-1x6duay-2"
+})(["display:flex;margin-top:", ";gap:", ";"], _ref3 => {
   let {
     footnoteMarginTop
   } = _ref3;
   return footnoteMarginTop;
-}};
-  gap: ${_ref4 => {
+}, _ref4 => {
   let {
     footnoteGap
   } = _ref4;
   return footnoteGap;
-}};
-`;
-const BottomTextContainer = styled.div`
-  margin-top: ${_ref5 => {
+});
+const BottomTextContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__BottomTextContainer",
+  componentId: "components-web__sc-1x6duay-3"
+})(["margin-top:", ";"], _ref5 => {
   let {
     bottomTextMarginTop
   } = _ref5;
   return bottomTextMarginTop;
-}};
-`;
-const BottomLinksContainer = styled.div`
-  align-self: center;
-  margin-left: ${_ref6 => {
+});
+const BottomLinksContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__BottomLinksContainer",
+  componentId: "components-web__sc-1x6duay-4"
+})(["align-self:center;margin-left:", ";"], _ref6 => {
   let {
     bottomLinksMarginLeft
   } = _ref6;
   return bottomLinksMarginLeft;
-}};
-`;
-const TopTextContainer = styled.div`
-  margin-bottom: ${_ref7 => {
+});
+const TopTextContainer = /*#__PURE__*/styled.div.attrs({
+  'aria-hidden': 'true'
+}).withConfig({
+  displayName: "PriceLockup__TopTextContainer",
+  componentId: "components-web__sc-1x6duay-5"
+})(["margin-bottom:", ";"], _ref7 => {
   let {
     topTextMarginBottom
   } = _ref7;
   return topTextMarginBottom;
-}};
-`;
-const PriceTextContainer = styled.div`
-  display: flex;
-  flex-direction: ${_ref8 => {
+});
+const PriceTextContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__PriceTextContainer",
+  componentId: "components-web__sc-1x6duay-6"
+})(["display:flex;flex-direction:", ";"], _ref8 => {
   let {
     ratePosition
   } = _ref8;
   return ratePosition === 'bottom' ? 'column' : 'row';
-}};
-`;
-const RateContainer = styled.div`
-  display: flex;
-`;
-const RateTextContainer = styled.div`
-  align-self: ${_ref9 => {
+});
+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 => {
   let {
     ratePosition
   } = _ref9;
   return ratePosition === 'bottom' ? 'flex-start' : 'flex-end';
-}};
-`;
-const StrikeThroughContainer = styled.div`
-  display: flex;
-  position: relative;
-  align-items: center;
-  ::before {
-    content: '';
-    width: 100%;
-    top: ${_ref10 => {
+});
+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 => {
   let {
     strikeThroughPosition
   } = _ref10;
   return `${strikeThroughPosition}px`;
-}};
-    height: ${_ref11 => {
+}, _ref11 => {
   let {
     strikeThroughHeight
   } = _ref11;
   return `${strikeThroughHeight}px`;
-}};
-    background: ${_ref12 => {
+}, _ref12 => {
   let {
     strikeThroughColor
   } = _ref12;
   return strikeThroughColor;
-}};
-    position: absolute;
-  }
-`;
-const TypographyContainer = styled.div`
-  display: flex;
-  padding-top: ${_ref13 => {
+});
+const TypographyContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__TypographyContainer",
+  componentId: "components-web__sc-1x6duay-10"
+})(["display:flex;padding-top:", ";"], _ref13 => {
   let {
     paddingTop
   } = _ref13;
   return `${paddingTop || 0}px`;
-}};
-`;
+});
 const selectFootnoteLinkStyles = _ref14 => {
   let {
     footnoteLinkColor,
@@ -168,6 +163,8 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
     a11yText,
     tokens: priceLockupTokens,
     variant = {},
+    copy = 'en',
+    dictionary = defaultDictionary,
     ...rest
   } = _ref16;
   const viewport = useViewport();
@@ -280,10 +277,28 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   if (strikeThrough && !a11yText) {
     warn('PriceLockup', 'a11yText must be provided with strikethrough pricing');
   }
+  const getAriaContent = () => {
+    const {
+      dictionaryPrice = price,
+      priceWithCents,
+      rate
+    } = dictionary[copy];
+    let ariaLabel = hasCents ? priceWithCents.replace('%{amount}', amount).replace('%{cents}', cents).replace('%{currency}', currencySymbol) : dictionaryPrice.replace('%{amount}', amount).replace('%{currency}', currencySymbol);
+    if (!ariaLabel.includes(currencySymbol)) {
+      ariaLabel = `${ariaLabel} ${currencySymbol}`;
+    }
+    if (rateText) {
+      ariaLabel += ` ${rate.replace('%{rateText}', rateText.replace('/', ''))}`;
+    }
+    return ariaLabel;
+  };
+  const ariaLabel = selectProps(rest)['aria-label'] ?? getAriaContent();
   return /*#__PURE__*/_jsxs(PriceLockupContainer, {
     ...selectProps(rest),
     alignItemsText: alignItemsText,
     ref: ref,
+    role: "group",
+    "aria-label": ariaLabel,
     children: [topText && /*#__PURE__*/_jsx(TopTextContainer, {
       topTextMarginBottom: `${topTextMarginBottom}px`,
       children: renderTypography(topText, typographyTokens.topText)
@@ -297,6 +312,13 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   });
 });
 PriceLockup.displayName = 'PriceLockup';
+
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = PropTypes.shape({
+  price: PropTypes.string.isRequired,
+  priceWithCents: PropTypes.string.isRequired,
+  rate: PropTypes.string.isRequired
+});
 PriceLockup.propTypes = {
   ...selectedSystemPropTypes,
   /**
@@ -351,6 +373,16 @@ PriceLockup.propTypes = {
    * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
    */
   a11yText: PropTypes.string,
+  /**
+   * Select English or French copy for the accessible label.
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+  /* Custom dictionary containing the labels
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
   /**
    * `PriceLockup` tokens
    */

package/lib/esm/PriceLockup/dictionary.js

@@ -0,0 +1,12 @@
+export default {
+  en: {
+    price: '%{amount} %{currency}',
+    priceWithCents: '%{amount} %{currency} and %{cents} cents',
+    rate: 'per %{rateText}'
+  },
+  fr: {
+    price: '%{amount} %{currency}',
+    priceWithCents: '%{amount} %{currency} et %{cents} centimes',
+    rate: 'par %{rateText}'
+  }
+};

package/lib/{Progress → esm/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 { styledComponents } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
+import styled from 'styled-components';
 
 // 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 = styled.div.attrs({
+const Gradient = /*#__PURE__*/styled.div.attrs({
   'data-testid': 'ProgressBar-Gradient'
+}).withConfig({
+  displayName: "ProgressBar__Gradient",
+  componentId: "components-web__sc-1vmzyq5-0"
 })(_ref => {
   let {
     gradient: {

package/lib/esm/QuantitySelector/styles.js

@@ -0,0 +1,9 @@
+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;"]);

package/lib/{Ribbon → esm/Ribbon}/Ribbon.js

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

package/lib/{Span → esm/Span}/Span.js

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

package/lib/{Spinner → esm/Spinner}/Spinner.js

@@ -2,15 +2,16 @@ import React from 'react';
 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 { htmlAttrs, media, styledComponents } from '../utils';
+import { htmlAttrs, media } 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 = styled.div(_ref => {
+const SpinnerContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Spinner__SpinnerContainer",
+  componentId: "components-web__sc-116rqck-0"
+})(_ref => {
   let {
     inline,
     fullScreen
@@ -29,13 +30,19 @@ const SpinnerContainer = styled.div(_ref => {
     })
   };
 });
-const ContentOverlay = styled.div({
+const ContentOverlay = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Spinner__ContentOverlay",
+  componentId: "components-web__sc-116rqck-1"
+})({
   position: 'absolute',
   width: '100%',
   height: '100%',
   zIndex: BACKDROP_Z_INDEX
 });
-const FullscreenOverlay = styled.div(_ref2 => {
+const FullscreenOverlay = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Spinner__FullscreenOverlay",
+  componentId: "components-web__sc-116rqck-2"
+})(_ref2 => {
   let {
     fullScreenOverLayBackground
   } = _ref2;
@@ -49,7 +56,10 @@ const FullscreenOverlay = styled.div(_ref2 => {
     backgroundColor: fullScreenOverLayBackground
   };
 });
-const OpaqueContainer = styled.div({
+const OpaqueContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Spinner__OpaqueContainer",
+  componentId: "components-web__sc-116rqck-3"
+})({
   opacity: BACKDROP_OPACITY
 });
 const recursiveMap = (children, fn) => React.Children.map(children, child => {

package/lib/{Spinner → esm/Spinner}/SpinnerContent.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ActivityIndicator, StackView, Typography, selectSystemProps } from '@telus-uds/components-base';
-import { htmlAttrs, styledComponents } from '../utils';
+import styled from 'styled-components';
+import { htmlAttrs } 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 = styled.div(_ref => {
+const Container = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SpinnerContent__Container",
+  componentId: "components-web__sc-1c8bd8e-0"
+})(_ref => {
   let {
     overlay
   } = _ref;