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

package/src/OptimizeImage/utils/getFallbackUrl.js

@@ -1,6 +1,6 @@
-import isSvgUrl from './isSvgUrl'
+import { isSvgUrl } from './isSvgUrl'
 
-export default function getFallbackUrl(url, dimension, size, quality) {
+export function getFallbackUrl(url, dimension, size, quality) {
   if (!isSvgUrl(url)) {
     return `${url}?${dimension}=${size}&q=${quality}`
   }

package/src/OptimizeImage/utils/getImageUrls.js

@@ -1,7 +1,7 @@
-import getOptimizedUrl from './getOptimizedUrl'
-import getFallbackUrl from './getFallbackUrl'
+import { getOptimizedUrl } from './getOptimizedUrl'
+import { getFallbackUrl } from './getFallbackUrl'
 
-export default function getImageUrls(
+export function getImageUrls(
   contentfulAssetUrl,
   dimension,
   xs,

package/src/OptimizeImage/utils/getOptimizedUrl.js

@@ -1,13 +1,6 @@
-import isSvgUrl from './isSvgUrl'
+import { isSvgUrl } from './isSvgUrl'
 
-export default function getOptimizedUrl(
-  url,
-  dimension,
-  size,
-  quality,
-  disableRetina,
-  supportsWebp
-) {
+export function getOptimizedUrl(url, dimension, size, quality, disableRetina, supportsWebp) {
   if (!isSvgUrl(url)) {
     let format = ''
 

package/src/OptimizeImage/utils/hasWebpSupport.js

@@ -6,7 +6,7 @@ let promise
  * @see https://developers.google.com/speed/webp/faq#in_your_own_javascript
  * @return {Promise<boolean>}
  */
-export default function hasWebpSupport() {
+export function hasWebpSupport() {
   // cache the result, so that this function runs only once
   if (!promise) {
     promise = new Promise((resolve) => {

package/src/OptimizeImage/utils/index.js

@@ -1,6 +1,6 @@
-import getOptimizedUrl from './getOptimizedUrl'
-import getFallbackUrl from './getFallbackUrl'
-import hasWebpSupport from './hasWebpSupport'
-import getImageUrls from './getImageUrls'
+import { getOptimizedUrl } from './getOptimizedUrl'
+import { getFallbackUrl } from './getFallbackUrl'
+import { hasWebpSupport } from './hasWebpSupport'
+import { getImageUrls } from './getImageUrls'
 
 export { getOptimizedUrl, getFallbackUrl, hasWebpSupport, getImageUrls }

package/src/OptimizeImage/utils/isSvgUrl.js

@@ -1,3 +1,3 @@
-export default function isSvgUrl(url) {
+export function isSvgUrl(url) {
   return !!url.match(/\.svg$/i)
 }

package/src/OrderedList/OrderedList.jsx

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
 import { getTokensPropType, selectSystemProps, variantProp } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import { htmlAttrs } from '../utils'
-import OrderedListBase from './OrderedListBase'
-import Item from './Item'
+import { OrderedListBase } from './OrderedListBase'
 import { OL_COUNTER_NAME } from './constants'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
@@ -18,7 +17,7 @@ const StyledOrderedListBase = styled(OrderedListBase)(({ start }) => ({
 /**
  * Themed semantic ordered list.
  */
-const OrderedList = React.forwardRef(
+export const OrderedList = React.forwardRef(
   ({ children, start = 1, variant = {}, tokens = {}, ...rest }, ref) => {
     // Check if children is an array
     const isChildrenArray = Array.isArray(children)
@@ -57,7 +56,7 @@ OrderedList.displayName = 'OrderedList'
 OrderedList.propTypes = {
   ...selectedSystemPropTypes,
   /**
-   * A list of ordered items wrapped in `OrderedList.Item`.
+   * A list of ordered items wrapped in `OrderedListItem`.
    */
   children: PropTypes.node.isRequired,
   /**
@@ -67,7 +66,3 @@ OrderedList.propTypes = {
   variant: variantProp.propType,
   tokens: getTokensPropType('OrderedList')
 }
-
-OrderedList.Item = Item
-
-export default OrderedList

package/src/OrderedList/OrderedListBase.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import ItemBase from './ItemBase'
 
 const StyledList = styled.ol({
   display: 'flex',
@@ -14,12 +13,12 @@ const StyledList = styled.ol({
 /**
  * Semantic ordered list.
  */
-const OrderedListBase = React.forwardRef(({ children, start = 1, ...rest }, ref) => (
+export const OrderedListBase = React.forwardRef(({ children, start = 1, ...rest }, ref) => (
   <StyledList {...rest} ref={ref} start={start}>
     {children}
   </StyledList>
 ))
-OrderedListBase.displayName = 'OrderedList'
+OrderedListBase.displayName = 'OrderedListBase'
 
 OrderedListBase.propTypes = {
   /**
@@ -31,7 +30,3 @@ OrderedListBase.propTypes = {
    */
   start: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 }
-
-OrderedListBase.Item = ItemBase
-
-export default OrderedListBase

package/src/OrderedList/{Item.jsx → OrderedListItem.jsx}

@@ -11,7 +11,7 @@ import {
   wrapStringsInText
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
-import ItemBase from './ItemBase'
+import { OrderedListItemBase } from './OrderedListItemBase'
 import { htmlAttrs } from '../utils'
 import { OL_COUNTER_NAME } from './constants'
 
@@ -30,40 +30,40 @@ const selectItemTextStyles = (
     lineHeight: itemLineHeight
   })
 
-const StyledItemBase = styled(ItemBase)(
+const StyledItemBase = styled(OrderedListItemBase)(
   ({
-    interItemMargin,
-    itemBulletContainerWidth,
-    itemBulletTextAlign,
-    itemFontWeight,
-    itemFontSize,
-    itemFontName,
-    itemLineHeight,
-    themeOptions,
-    listGutter,
-    itemColor,
-    itemTextColor
+    $interItemMargin,
+    $itemBulletContainerWidth,
+    $itemBulletTextAlign,
+    $itemFontWeight,
+    $itemFontSize,
+    $itemFontName,
+    $itemLineHeight,
+    $themeOptions,
+    $listGutter,
+    $itemColor,
+    $itemTextColor
   }) => ({
     counterIncrement: OL_COUNTER_NAME,
-    '::before': {
+    '&::before': {
       content: `counter(${OL_COUNTER_NAME})'.'`,
       display: 'inline-block',
-      color: itemColor || itemTextColor,
-      width: itemBulletContainerWidth,
-      paddingRight: listGutter,
-      textAlign: itemBulletTextAlign,
+      color: $itemColor || $itemTextColor,
+      width: $itemBulletContainerWidth,
+      paddingRight: $listGutter,
+      textAlign: $itemBulletTextAlign,
       flexShrink: 0,
       whiteSpace: 'nowrap',
       overflow: 'hidden',
       ...applyTextStyles({
-        fontWeight: itemFontWeight,
-        fontSize: itemFontSize,
-        fontName: itemFontName,
-        themeOptions
+        fontWeight: $itemFontWeight,
+        fontSize: $itemFontSize,
+        fontName: $itemFontName,
+        themeOptions: $themeOptions
       }),
-      lineHeight: `${itemLineHeight * itemFontSize}px`
+      lineHeight: `${$itemLineHeight * $itemFontSize}px`
     },
-    ':not(:last-child)': { marginBottom: interItemMargin }
+    '&:not(:last-child)': { marginBottom: $interItemMargin }
   })
 )
 
@@ -73,7 +73,7 @@ const ItemContent = styled.div({
   gap: 0
 })
 
-const Item = React.forwardRef(
+export const OrderedListItem = React.forwardRef(
   ({ children, counterName, title, tokens = {}, variant, ...rest }, ref) => {
     // We are reusing some tokens from the list component here in order to provide a unified
     // experience
@@ -92,13 +92,27 @@ const Item = React.forwardRef(
     })
 
     return (
-      <StyledItemBase ref={ref} themeOptions={themeOptions} {...themeTokens} {...selectProps(rest)}>
+      <StyledItemBase
+        ref={ref}
+        $themeOptions={themeOptions}
+        $interItemMargin={themeTokens.interItemMargin}
+        $itemBulletContainerWidth={themeTokens.itemBulletContainerWidth}
+        $itemBulletTextAlign={themeTokens.itemBulletTextAlign}
+        $itemFontWeight={themeTokens.itemFontWeight}
+        $itemFontSize={themeTokens.itemFontSize}
+        $itemFontName={themeTokens.itemFontName}
+        $itemLineHeight={themeTokens.itemLineHeight}
+        $listGutter={themeTokens.listGutter}
+        $itemColor={themeTokens.itemColor}
+        $itemTextColor={themeTokens.itemTextColor}
+        {...selectProps(rest)}
+      >
         {title ? (
           <StackView tokens={{ flexShrink: 1 }} space={0}>
             <Typography variant={{ size: 'h4' }} tokens={headingTokens}>
               {title}
             </Typography>
-            <ItemContent {...themeTokens}>{itemContent}</ItemContent>
+            <ItemContent>{itemContent}</ItemContent>
           </StackView>
         ) : (
           <ItemContent>{itemContent}</ItemContent>
@@ -108,16 +122,16 @@ const Item = React.forwardRef(
   }
 )
 
-Item.displayName = 'OrderedListItem'
+OrderedListItem.displayName = 'OrderedListItem'
 
-Item.propTypes = {
+OrderedListItem.propTypes = {
   ...selectedSystemPropTypes,
   /**
    * Item content
    */
   children: PropTypes.node.isRequired,
   /**
-   * Defines the title of the `OrderedList.Item`
+   * Defines the title of the `OrderedListItem`
    */
   title: PropTypes.string,
   /**
@@ -125,5 +139,3 @@ Item.propTypes = {
    */
   tokens: getTokensPropType('OrderedList')
 }
-
-export default Item

package/src/OrderedList/{ItemBase.jsx → OrderedListItemBase.jsx}

@@ -6,13 +6,13 @@ const StyledItem = styled.li({
   display: 'flex'
 })
 
-const Item = ({ children, ...rest }) => <StyledItem {...rest}>{children}</StyledItem>
+export const OrderedListItemBase = ({ children, ...rest }) => (
+  <StyledItem {...rest}>{children}</StyledItem>
+)
 
-Item.propTypes = {
+OrderedListItemBase.propTypes = {
   /**
    * Item content
    */
   children: PropTypes.node.isRequired
 }
-
-export default Item

package/src/OrderedList/constants.js

@@ -1,2 +1 @@
-// eslint-disable-next-line import/prefer-default-export
 export const OL_COUNTER_NAME = 'allium-ordered-list-counter'

package/src/Paragraph/Paragraph.jsx

@@ -7,10 +7,10 @@ import { htmlAttrs, useTypographyTheme } from '../utils'
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const StyledParagraph = styled.p`
-  ${({ align }) => (align ? `text-align: ${align};` : '')}
-  ${({ linesBetween }) => `
-    margin-block-start: ${linesBetween}em;
-    margin-block-end: ${linesBetween}em;
+  ${({ $align }) => ($align ? `text-align: ${$align};` : '')}
+  ${({ $linesBetween }) => `
+    margin-block-start: ${$linesBetween}em;
+    margin-block-end: ${$linesBetween}em;
   `}
   &:first-child {
     margin-block-start: 0em;
@@ -30,15 +30,15 @@ const StyledParagraph = styled.p`
 	contrast.
 	* - All Allium Typography variants other than header size variants are supported.
 	*/
-const Paragraph = React.forwardRef(
+export const Paragraph = React.forwardRef(
   ({ children, variant, tokens, testID, align, linesBetween = 1, ...rest }, ref) => {
     const style = useTypographyTheme(variant, tokens)
     return (
       <StyledParagraph
         ref={ref}
-        linesBetween={linesBetween}
+        $linesBetween={linesBetween}
         data-testid={testID}
-        align={align}
+        $align={align}
         style={style}
         {...selectProps(rest)}
       >
@@ -82,5 +82,3 @@ Paragraph.propTypes = {
     size: PropTypes.oneOf(['micro', 'small', 'large'])
   })
 }
-
-export default Paragraph

package/src/PreviewCard/PreviewCard.jsx

@@ -18,11 +18,11 @@ import {
   getTokensPropType
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
-import FullBleedContent, {
+import {
+  FullBleedContent,
   getFullBleedBorderRadius,
   useFullBleedContentProps
 } from '../shared/FullBleedContent'
-import AuthorDate from './AuthorDate'
 
 // Passes React Native-oriented system props through UDS PressableCardBase
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
@@ -33,13 +33,13 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
 
 // 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(({ borderOffset }) => ({
+const FullBleedOffsetOuter = styled.div(({ $borderOffset }) => ({
   overflow: 'hidden',
-  marginTop: borderOffset * 2
+  marginTop: $borderOffset * 2
 }))
-const FullBleedOffsetInner = styled.div(({ borderOffset }) => ({
+const FullBleedOffsetInner = styled.div(({ $borderOffset }) => ({
   position: 'relative',
-  margin: 0 - borderOffset
+  margin: 0 - $borderOffset
 }))
 
 const defaultTokens = {
@@ -62,19 +62,7 @@ const defaultTokens = {
  * - Use `fullBleedContent` to set the thumbnail image
  */
 const PreviewCard = React.forwardRef(
-  (
-    {
-      tag,
-      title,
-      footer,
-      fullBleedImage,
-      fullBleedContent = fullBleedImage,
-      onPress,
-      href,
-      ...rest
-    },
-    ref
-  ) => {
+  ({ tag, title, footer, fullBleedContent, onPress, href, ...rest }, ref) => {
     const { fullBleedContentPosition, contentStackDirection, fullBleedContentProps } =
       useFullBleedContentProps({
         ...fullBleedContent,
@@ -137,8 +125,8 @@ const PreviewCard = React.forwardRef(
                 )}
               </Box>
               {Boolean(fullBleedContentProps.src || fullBleedContentProps.content) && (
-                <FullBleedOffsetOuter borderOffset={borderOffset}>
-                  <FullBleedOffsetInner borderOffset={borderOffset}>
+                <FullBleedOffsetOuter $borderOffset={borderOffset}>
+                  <FullBleedOffsetInner $borderOffset={borderOffset}>
                     <FullBleedContent
                       borderRadius={fullBleedBorderRadius}
                       {...fullBleedContentProps}
@@ -156,9 +144,6 @@ const PreviewCard = React.forwardRef(
 
 PreviewCard.displayName = 'PreviewCard'
 
-// Provide standard author/date footer as a preset with the export
-PreviewCard.AuthorDate = AuthorDate
-
 PreviewCard.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('PreviewCard'),
@@ -180,23 +165,22 @@ PreviewCard.propTypes = {
   tag: PropTypes.string,
   /**
    * Section containing additional information, such as author and date.
-   * Use `<PreviewCard.AuthorDate author={...} date={...} />` here for author and date.
+   * Use `<PreviewCardAuthorDate author={...} date={...} />` here for author and date.
    */
   footer: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   /**
    * Text stating the title or headline of the story.
    */
   title: 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 content to be placed on the card.
    */
   fullBleedContent: PropTypes.exact(FullBleedContent.propTypes || {})
 }
 
-export default withLinkRouter(PreviewCard)
+// Export unwrapped component for react-docgen to extract info for docsite
+export { PreviewCard as PreviewCardBase }
+
+// Export wrapped component as main PreviewCard export
+const PreviewCardWithRouter = withLinkRouter(PreviewCard)
+export { PreviewCardWithRouter as PreviewCard }

package/src/PreviewCard/{AuthorDate.jsx → PreviewCardAuthorDate.jsx}

@@ -10,7 +10,7 @@ import { StackWrap, Typography, useThemeTokens } from '@telus-uds/components-bas
  * Add same locale-based date formatting as StoryCard when ready.
  * Get locale based on decision of https://github.com/telus/universal-design-system/issues/715
  */
-const AuthorDate = React.forwardRef(({ author, date }, ref) => {
+export const PreviewCardAuthorDate = React.forwardRef(({ author, date }, ref) => {
   const { separatorColor: color } = useThemeTokens('PreviewCard', {}, {})
   return (
     <StackWrap space={2} ref={ref}>
@@ -23,9 +23,9 @@ const AuthorDate = React.forwardRef(({ author, date }, ref) => {
   )
 })
 
-AuthorDate.displayName = 'AuthorDate'
+PreviewCardAuthorDate.displayName = 'PreviewCardAuthorDate'
 
-AuthorDate.propTypes = {
+PreviewCardAuthorDate.propTypes = {
   /**
    * Name of the author
    */
@@ -35,5 +35,3 @@ AuthorDate.propTypes = {
    */
   date: PropTypes.string.isRequired
 }
-
-export default AuthorDate

package/src/PriceLockup/PriceLockup.jsx

@@ -11,17 +11,17 @@ import {
   a11yProps
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
-import FootnoteLink from '../Footnote/FootnoteLink'
-import getTypographyTokens from './tokens'
+import { FootnoteLink } from '../Footnote/FootnoteLink'
+import { tokens as getTypographyTokens } from './tokens'
 import { htmlAttrs, warn } from '../utils'
-import defaultDictionary from './dictionary'
+import { dictionary as defaultDictionary } from './dictionary'
 
 const PRICE_BASELINE_VARIANT = 'baseline'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, a11yProps])
 
 const PriceLockupContainer = styled.div`
-  align-items: ${({ alignItemsText }) => alignItemsText};
+  align-items: ${({ $alignItemsText }) => $alignItemsText};
   display: flex;
   flex-direction: column;
   width: fit-content;
@@ -30,32 +30,32 @@ const PriceContainer = styled.div.attrs({
   'aria-hidden': 'true'
 })`
   display: flex;
-  margin-bottom: ${({ priceMarginBottom }) => priceMarginBottom};
+  margin-bottom: ${({ $priceMarginBottom }) => $priceMarginBottom};
 `
 const FootnoteContainer = styled.div`
   display: flex;
-  margin-top: ${({ footnoteMarginTop }) => footnoteMarginTop};
-  gap: ${({ footnoteGap }) => footnoteGap};
+  margin-top: ${({ $footnoteMarginTop }) => $footnoteMarginTop};
+  gap: ${({ $footnoteGap }) => $footnoteGap};
 `
 
 const BottomTextContainer = styled.div`
-  margin-top: ${({ bottomTextMarginTop }) => bottomTextMarginTop};
+  margin-top: ${({ $bottomTextMarginTop }) => $bottomTextMarginTop};
 `
 
 const BottomLinksContainer = styled.div`
   align-self: center;
-  margin-left: ${({ bottomLinksMarginLeft }) => bottomLinksMarginLeft};
+  margin-left: ${({ $bottomLinksMarginLeft }) => $bottomLinksMarginLeft};
 `
 
 const TopTextContainer = styled.div.attrs({
   'aria-hidden': 'true'
 })`
-  margin-bottom: ${({ topTextMarginBottom }) => topTextMarginBottom};
+  margin-bottom: ${({ $topTextMarginBottom }) => $topTextMarginBottom};
 `
 
 const PriceTextContainer = styled.div`
   display: flex;
-  flex-direction: ${({ ratePosition }) => (ratePosition === 'bottom' ? 'column' : 'row')};
+  flex-direction: ${({ $ratePosition }) => ($ratePosition === 'bottom' ? 'column' : 'row')};
 `
 
 const RateContainer = styled.div`
@@ -63,25 +63,25 @@ const RateContainer = styled.div`
 `
 
 const RateTextContainer = styled.div`
-  align-self: ${({ ratePosition }) => (ratePosition === 'bottom' ? 'flex-start' : 'flex-end')};
+  align-self: ${({ $ratePosition }) => ($ratePosition === 'bottom' ? 'flex-start' : 'flex-end')};
 `
 
 const StrikeThroughContainer = styled.div`
   display: flex;
   position: relative;
   align-items: center;
-  ::before {
+  &::before {
     content: '';
     width: 100%;
-    top: ${({ strikeThroughPosition }) => `${strikeThroughPosition}px`};
-    height: ${({ strikeThroughHeight }) => `${strikeThroughHeight}px`};
-    background: ${({ strikeThroughColor }) => strikeThroughColor};
+    top: ${({ $strikeThroughPosition }) => `${$strikeThroughPosition}px`};
+    height: ${({ $strikeThroughHeight }) => `${$strikeThroughHeight}px`};
+    background: ${({ $strikeThroughColor }) => $strikeThroughColor};
     position: absolute;
   }
 `
 const TypographyContainer = styled.div`
   display: flex;
-  padding-top: ${({ paddingTop }) => `${paddingTop || 0}px`};
+  padding-top: ${({ $paddingTop }) => `${$paddingTop || 0}px`};
 `
 const InlineTextWithFootnote = styled.div`
   display: inline;
@@ -126,7 +126,7 @@ const selectStrikeThroughTokens = ({
   strikeThroughColor
 })
 
-const PriceLockup = React.forwardRef(
+export const PriceLockup = React.forwardRef(
   (
     {
       size = 'medium',
@@ -193,7 +193,7 @@ const PriceLockup = React.forwardRef(
           : { tokens: { ...restOfTokens, color: fontColor } }
 
       return (
-        <TypographyContainer paddingTop={paddingTop}>
+        <TypographyContainer $paddingTop={paddingTop}>
           <Typography {...customProps}>{value}</Typography>
         </TypographyContainer>
       )
@@ -218,7 +218,11 @@ const PriceLockup = React.forwardRef(
         return (
           <>
             <A11yText text={a11yText} />
-            <StrikeThroughContainer {...selectStrikeThroughTokens(themeTokens)}>
+            <StrikeThroughContainer
+              $strikeThroughPosition={selectStrikeThroughTokens(themeTokens).strikeThroughPosition}
+              $strikeThroughHeight={selectStrikeThroughTokens(themeTokens).strikeThroughHeight}
+              $strikeThroughColor={selectStrikeThroughTokens(themeTokens).strikeThroughColor}
+            >
               {amountComponent}
             </StrikeThroughContainer>
           </>
@@ -230,8 +234,8 @@ const PriceLockup = React.forwardRef(
 
     const renderPrice = () => (
       <>
-        <PriceContainer priceMarginBottom={`${priceMarginBottom}px`}>
-          <PriceTextContainer ratePosition={ratePosition}>
+        <PriceContainer $priceMarginBottom={`${priceMarginBottom}px`}>
+          <PriceTextContainer $ratePosition={ratePosition}>
             <RateContainer>
               {signDirection === 'left' && renderCurrencySymbol()}
               {renderAmount()}
@@ -239,14 +243,14 @@ const PriceLockup = React.forwardRef(
               {signDirection === 'right' && <>&nbsp;{renderCurrencySymbol()}</>}
             </RateContainer>
             {rateText && (
-              <RateTextContainer ratePosition={ratePosition}>
+              <RateTextContainer $ratePosition={ratePosition}>
                 {renderTypography(rateText, typographyTokens.rate, ratePosition)}
               </RateTextContainer>
             )}
           </PriceTextContainer>
 
           {!bottomText && footnoteLinks.length <= 3 && (
-            <BottomLinksContainer bottomLinksMarginLeft={`${bottomLinksMarginLeft}px`}>
+            <BottomLinksContainer $bottomLinksMarginLeft={`${bottomLinksMarginLeft}px`}>
               {renderFootnoteLinks()}
             </BottomLinksContainer>
           )}
@@ -257,8 +261,8 @@ const PriceLockup = React.forwardRef(
 
     const renderFootnoteContent = () => {
       const containerProps = {
-        footnoteMarginTop: `${footnoteMarginTop}px`,
-        footnoteGap: `${footnoteGap}px`
+        $footnoteMarginTop: `${footnoteMarginTop}px`,
+        $footnoteGap: `${footnoteGap}px`
       }
 
       const shouldUseInline = linkPosition === 'inline'
@@ -280,7 +284,7 @@ const PriceLockup = React.forwardRef(
       return (
         <>
           <FootnoteContainer {...containerProps}>
-            <BottomTextContainer bottomTextMarginTop={`${bottomTextMarginTop}px`}>
+            <BottomTextContainer $bottomTextMarginTop={`${bottomTextMarginTop}px`}>
               {bottomTextContent}
             </BottomTextContainer>
             {showFootnotesInContainer && renderFootnoteLinks()}
@@ -358,13 +362,13 @@ const PriceLockup = React.forwardRef(
     return (
       <PriceLockupContainer
         {...selectProps(rest)}
-        alignItemsText={alignItemsText}
+        $alignItemsText={alignItemsText}
         ref={ref}
         role="group"
         aria-label={ariaLabel}
       >
         {topText && (
-          <TopTextContainer topTextMarginBottom={`${topTextMarginBottom}px`}>
+          <TopTextContainer $topTextMarginBottom={`${topTextMarginBottom}px`}>
             {renderTypography(topText, typographyTokens.topText)}
           </TopTextContainer>
         )}
@@ -470,5 +474,3 @@ PriceLockup.propTypes = {
    */
   tokens: getTokensPropType('PriceLockup')
 }
-
-export default PriceLockup

package/src/PriceLockup/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     price: '%{amount} %{currency}',
     priceWithCents: '%{amount} %{currency} and %{cents} cents',

package/src/PriceLockup/tokens.js

@@ -1,5 +1,5 @@
 // map typography tokens accordenly
-export default ({
+export const tokens = ({
   topTextFontSize,
   fontColor,
   topTextLineHeight,