@telus-uds/components-web 3.2.0 → 3.3.0

package/lib/Disclaimer/Disclaimer.js

@@ -1,14 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { applyTextStyles, selectSystemProps, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
-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 StyledDisclaimer = /*#__PURE__*/styled.p.withConfig({
-  displayName: "Disclaimer__StyledDisclaimer",
-  componentId: "components-web__sc-1l4xf7u-0"
-})(_ref => {
+const StyledDisclaimer = styled.p(_ref => {
   let {
     fontName,
     fontWeight,

package/lib/Footnote/Footnote.js

@@ -1,22 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled, { createGlobalStyle } from 'styled-components';
 import { Icon, Portal, selectSystemProps, Typography, useCopy, useTheme, useResponsiveProp, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
 import OrderedListBase from '../OrderedList/OrderedListBase';
-import { htmlAttrs, media, renderStructuredContent, isElementFocusable } from '../utils';
+import { htmlAttrs, media, renderStructuredContent, isElementFocusable, styledComponents } from '../utils';
 import defaultDictionary from './dictionary';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const viewportBreakpoint = 1440;
-const GlobalBodyScrollLock = /*#__PURE__*/createGlobalStyle({
+const {
+  styled,
+  createGlobalStyle
+} = styledComponents;
+const GlobalBodyScrollLock = createGlobalStyle({
   'html, body': media().until('md').css({
     overflow: 'hidden'
   })
 });
-const StyledFootnote = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Footnote__StyledFootnote",
-  componentId: "components-web__sc-1563bo5-0"
-})(_ref => {
+const StyledFootnote = styled.div(_ref => {
   let {
     footnoteBackground,
     isVisible,
@@ -60,17 +60,11 @@ const StyledFootnote = /*#__PURE__*/styled.div.withConfig({
   }
   return {};
 });
-const StyledFootnoteHeader = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Footnote__StyledFootnoteHeader",
-  componentId: "components-web__sc-1563bo5-1"
-})(() => ({
+const StyledFootnoteHeader = styled.div(() => ({
   position: 'relative',
   width: '100%'
 }));
-const StyledHeader = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Footnote__StyledHeader",
-  componentId: "components-web__sc-1563bo5-2"
-})(_ref3 => {
+const StyledHeader = styled.div(_ref3 => {
   let {
     footnoteHeaderPaddingLeft,
     footnoteHeaderPaddingRight,
@@ -88,10 +82,7 @@ const StyledHeader = /*#__PURE__*/styled.div.withConfig({
     paddingLeft: footnoteHeaderPaddingLeft
   };
 });
-const StyledFootnoteBody = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Footnote__StyledFootnoteBody",
-  componentId: "components-web__sc-1563bo5-3"
-})(_ref4 => {
+const StyledFootnoteBody = styled.div(_ref4 => {
   let {
     footnoteBodyBackground,
     footnoteBodyPadding,
@@ -116,10 +107,7 @@ const StyledFootnoteBody = /*#__PURE__*/styled.div.withConfig({
     opacity: isTextVisible ? 1 : 0
   };
 });
-const List = /*#__PURE__*/styled(OrderedListBase).withConfig({
-  displayName: "Footnote__List",
-  componentId: "components-web__sc-1563bo5-4"
-})(_ref5 => {
+const List = styled(OrderedListBase)(_ref5 => {
   let {
     listPaddingLeft
   } = _ref5;
@@ -128,10 +116,7 @@ const List = /*#__PURE__*/styled(OrderedListBase).withConfig({
     paddingLeft: listPaddingLeft
   };
 });
-const ListItem = /*#__PURE__*/styled(OrderedListBase.Item).withConfig({
-  displayName: "Footnote__ListItem",
-  componentId: "components-web__sc-1563bo5-5"
-})(_ref6 => {
+const ListItem = styled(OrderedListBase.Item)(_ref6 => {
   let {
     listItemMarkerFontSize,
     listItemMarkerLineHeight,
@@ -155,10 +140,7 @@ const ListItem = /*#__PURE__*/styled(OrderedListBase.Item).withConfig({
     paddingLeft: listItemPaddingLeft
   };
 });
-const CloseButton = /*#__PURE__*/styled.button.withConfig({
-  displayName: "Footnote__CloseButton",
-  componentId: "components-web__sc-1563bo5-6"
-})(_ref7 => {
+const CloseButton = styled.button(_ref7 => {
   let {
     closeButtonBorder,
     closeButtonHeight,
@@ -179,10 +161,7 @@ const CloseButton = /*#__PURE__*/styled.button.withConfig({
     width: closeButtonWidth
   };
 });
-const ContentContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Footnote__ContentContainer",
-  componentId: "components-web__sc-1563bo5-7"
-})({
+const ContentContainer = styled.div({
   'margin-left': 'auto',
   'margin-right': 'auto',
   left: 0,
@@ -196,10 +175,7 @@ const ContentContainer = /*#__PURE__*/styled.div.withConfig({
     width: maxWidth
   };
 });
-const StyledCustomContentContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Footnote__StyledCustomContentContainer",
-  componentId: "components-web__sc-1563bo5-8"
-})(_ref9 => {
+const StyledCustomContentContainer = styled.div(_ref9 => {
   let {
     listItemColor,
     listItemFontSize,

package/lib/Footnote/FootnoteLink.js

@@ -1,15 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { applyTextStyles, selectSystemProps, useCopy, useThemeTokens, variantProp } from '@telus-uds/components-base';
 import dictionary from './dictionary';
-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 StyledSup = /*#__PURE__*/styled.sup.withConfig({
-  displayName: "FootnoteLink__StyledSup",
-  componentId: "components-web__sc-17nd7xo-0"
-})(_ref => {
+const StyledSup = styled.sup(_ref => {
   let {
     fontSize,
     lineHeight,

package/lib/NavigationBar/NavigationBar.js

@@ -2,17 +2,16 @@ var _withLinkRouter$propT, _withLinkRouter$propT2, _withLinkRouter$propT3, _with
 import React from 'react';
 import PropTypes from 'prop-types';
 import { selectSystemProps, StackView, Typography, useHash, useInputValue, useResponsiveProp, withLinkRouter } from '@telus-uds/components-base';
-import styled from 'styled-components';
-import { htmlAttrs, scrollToAnchor } from '../utils';
+import { htmlAttrs, scrollToAnchor, styledComponents } from '../utils';
 import NavigationItem from './NavigationItem';
 import NavigationSubMenu from './NavigationSubMenu';
 import collapseItems from './collapseItems';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const Heading = /*#__PURE__*/styled.div.withConfig({
-  displayName: "NavigationBar__Heading",
-  componentId: "components-web__sc-1vis1gt-0"
-})({
+const Heading = styled.div({
   alignItems: 'center',
   display: 'flex',
   flex: 1,

package/lib/NavigationBar/NavigationItem.js

@@ -1,15 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, selectSystemProps, useResponsiveProp, useViewport, useThemeTokensCallback, getTokensPropType } from '@telus-uds/components-base';
-import styled from 'styled-components';
-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 defaultMaxWidth = 192;
-const ItemContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "NavigationItem__ItemContainer",
-  componentId: "components-web__sc-ql9x7c-0"
-})(_ref => {
+const ItemContainer = styled.div(_ref => {
   let {
     targetWidth
   } = _ref;

package/lib/OrderedList/Item.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { applyTextStyles, getTokensPropType, selectSystemProps, StackView, Typography, useTheme, useThemeTokens, wrapStringsInText } from '@telus-uds/components-base';
 import ItemBase from './ItemBase';
-import { htmlAttrs } from '../utils';
+import { htmlAttrs, styledComponents } from '../utils';
 import { OL_COUNTER_NAME } from './constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const selectItemTextStyles = (_ref, themeOptions) => {
   let {
@@ -25,10 +27,7 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     lineHeight: itemLineHeight
   });
 };
-const StyledItemBase = /*#__PURE__*/styled(ItemBase).withConfig({
-  displayName: "Item__StyledItemBase",
-  componentId: "components-web__sc-7jzwcq-0"
-})(_ref2 => {
+const StyledItemBase = styled(ItemBase)(_ref2 => {
   let {
     interItemMargin,
     itemBulletContainerWidth,
@@ -67,13 +66,10 @@ const StyledItemBase = /*#__PURE__*/styled(ItemBase).withConfig({
     }
   };
 });
-const ItemContent = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Item__ItemContent",
-  componentId: "components-web__sc-7jzwcq-1"
-})({
+const ItemContent = styled.div({
   display: 'flex',
   flexDirection: 'column',
-  gap: 5
+  gap: 0
 });
 const Item = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {

package/lib/OrderedList/ItemBase.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import { styledComponents } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledItem = /*#__PURE__*/styled.li.withConfig({
-  displayName: "ItemBase__StyledItem",
-  componentId: "components-web__sc-o0oiv5-0"
-})({
+const {
+  styled
+} = styledComponents;
+const StyledItem = styled.li({
   display: 'flex'
 });
 const Item = _ref => {

package/lib/OrderedList/OrderedList.js

@@ -1,17 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { getTokensPropType, selectSystemProps, variantProp } from '@telus-uds/components-base';
-import { htmlAttrs } from '../utils';
+import { htmlAttrs, styledComponents } from '../utils';
 import OrderedListBase from './OrderedListBase';
 import Item from './Item';
 import { OL_COUNTER_NAME } from './constants';
 import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledOrderedListBase = /*#__PURE__*/styled(OrderedListBase).withConfig({
-  displayName: "OrderedList__StyledOrderedListBase",
-  componentId: "components-web__sc-t5az8z-0"
-})(_ref => {
+const StyledOrderedListBase = styled(OrderedListBase)(_ref => {
   let {
     start
   } = _ref;

package/lib/OrderedList/OrderedListBase.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import { styledComponents } from '../utils';
 import ItemBase from './ItemBase';
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledList = /*#__PURE__*/styled.ol.withConfig({
-  displayName: "OrderedListBase__StyledList",
-  componentId: "components-web__sc-4m9lgj-0"
-})({
+const {
+  styled
+} = styledComponents;
+const StyledList = styled.ol({
   display: 'flex',
   flexDirection: 'column',
   listStylePosition: 'inside',

package/lib/Paragraph/Paragraph.js

@@ -1,19 +1,20 @@
 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 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 => {
+const StyledParagraph = styled.p`
+  ${_ref => {
   let {
     align
   } = _ref;
   return align ? `text-align: ${align};` : '';
-}, _ref2 => {
+}}
+  ${_ref2 => {
   let {
     linesBetween
   } = _ref2;
@@ -21,7 +22,14 @@ const StyledParagraph = /*#__PURE__*/styled.p.withConfig({
     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/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 styled from 'styled-components';
+import { styledComponents } from '../utils';
 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 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "PreviewCard__FullBleedOffsetOuter",
-  componentId: "components-web__sc-1yfz4de-0"
-})(_ref => {
+const FullBleedOffsetOuter = styled.div(_ref => {
   let {
     borderOffset
   } = _ref;
@@ -24,10 +24,7 @@ const FullBleedOffsetOuter = /*#__PURE__*/styled.div.withConfig({
     marginTop: borderOffset * 2
   };
 });
-const FullBleedOffsetInner = /*#__PURE__*/styled.div.withConfig({
-  displayName: "PreviewCard__FullBleedOffsetInner",
-  componentId: "components-web__sc-1yfz4de-1"
-})(_ref2 => {
+const FullBleedOffsetInner = styled.div(_ref2 => {
   let {
     borderOffset
   } = _ref2;

package/lib/PriceLockup/PriceLockup.js

@@ -1,119 +1,138 @@
 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;
-});
-const selectFootnoteLinkStyles = _ref13 => {
+}};
+    position: absolute;
+  }
+`;
+const TypographyContainer = styled.div`
+  display: flex;
+  padding-top: ${_ref13 => {
+  let {
+    paddingTop
+  } = _ref13;
+  return `${paddingTop || 0}px`;
+}};
+`;
+const selectFootnoteLinkStyles = _ref14 => {
   let {
     footnoteLinkColor,
     footnoteLinkFontName,
     footnoteLinkFontWeight,
     footnoteLinkLineHeight
-  } = _ref13;
+  } = _ref14;
   return {
     color: footnoteLinkColor,
     fontName: footnoteLinkFontName,
@@ -121,19 +140,19 @@ const selectFootnoteLinkStyles = _ref13 => {
     lineHeight: footnoteLinkLineHeight
   };
 };
-const selectStrikeThroughTokens = _ref14 => {
+const selectStrikeThroughTokens = _ref15 => {
   let {
     strikeThroughPosition,
     strikeThroughHeight,
     strikeThroughColor
-  } = _ref14;
+  } = _ref15;
   return {
     strikeThroughHeight,
     strikeThroughPosition,
     strikeThroughColor
   };
 };
-const PriceLockup = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
+const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -150,7 +169,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
     tokens: priceLockupTokens,
     variant = {},
     ...rest
-  } = _ref15;
+  } = _ref16;
   const viewport = useViewport();
   const {
     footnoteMarginTop,
@@ -183,6 +202,10 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
   const amount = hasCents ? priceString.substring(0, separatorPosition) : priceString;
   const cents = hasCents ? priceString.substring(separatorPosition + 1) : null;
   const renderTypography = (value, tokens, position) => {
+    const {
+      paddingTop,
+      ...restOfTokens
+    } = tokens;
     const customProps = position === 'bottom' ? {
       variant: {
         size: 'micro'
@@ -192,13 +215,16 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
       }
     } : {
       tokens: {
-        ...tokens,
+        ...restOfTokens,
         color: fontColor
       }
     };
-    return /*#__PURE__*/_jsx(Typography, {
-      ...customProps,
-      children: value
+    return /*#__PURE__*/_jsx(TypographyContainer, {
+      paddingTop: paddingTop,
+      children: /*#__PURE__*/_jsx(Typography, {
+        ...customProps,
+        children: value
+      })
     });
   };
   const renderCurrencySymbol = () => renderTypography(`${currencySymbol}`, typographyTokens.dollarSign);