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

package/lib/esm/PriceLockup/PriceLockup.js

@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 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 { 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';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const PRICE_BASELINE_VARIANT = 'baseline';
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, a11yProps]);
@@ -14,9 +14,9 @@ const PriceLockupContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1x6duay-0"
 })(["align-items:", ";display:flex;flex-direction:column;width:fit-content;"], _ref => {
   let {
-    alignItemsText
+    $alignItemsText
   } = _ref;
-  return alignItemsText;
+  return $alignItemsText;
 });
 const PriceContainer = /*#__PURE__*/styled.div.attrs({
   'aria-hidden': 'true'
@@ -25,41 +25,41 @@ const PriceContainer = /*#__PURE__*/styled.div.attrs({
   componentId: "components-web__sc-1x6duay-1"
 })(["display:flex;margin-bottom:", ";"], _ref2 => {
   let {
-    priceMarginBottom
+    $priceMarginBottom
   } = _ref2;
-  return priceMarginBottom;
+  return $priceMarginBottom;
 });
 const FootnoteContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__FootnoteContainer",
   componentId: "components-web__sc-1x6duay-2"
 })(["display:flex;margin-top:", ";gap:", ";"], _ref3 => {
   let {
-    footnoteMarginTop
+    $footnoteMarginTop
   } = _ref3;
-  return footnoteMarginTop;
+  return $footnoteMarginTop;
 }, _ref4 => {
   let {
-    footnoteGap
+    $footnoteGap
   } = _ref4;
-  return footnoteGap;
+  return $footnoteGap;
 });
 const BottomTextContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__BottomTextContainer",
   componentId: "components-web__sc-1x6duay-3"
 })(["margin-top:", ";"], _ref5 => {
   let {
-    bottomTextMarginTop
+    $bottomTextMarginTop
   } = _ref5;
-  return bottomTextMarginTop;
+  return $bottomTextMarginTop;
 });
 const BottomLinksContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__BottomLinksContainer",
   componentId: "components-web__sc-1x6duay-4"
 })(["align-self:center;margin-left:", ";"], _ref6 => {
   let {
-    bottomLinksMarginLeft
+    $bottomLinksMarginLeft
   } = _ref6;
-  return bottomLinksMarginLeft;
+  return $bottomLinksMarginLeft;
 });
 const TopTextContainer = /*#__PURE__*/styled.div.attrs({
   'aria-hidden': 'true'
@@ -68,18 +68,18 @@ const TopTextContainer = /*#__PURE__*/styled.div.attrs({
   componentId: "components-web__sc-1x6duay-5"
 })(["margin-bottom:", ";"], _ref7 => {
   let {
-    topTextMarginBottom
+    $topTextMarginBottom
   } = _ref7;
-  return topTextMarginBottom;
+  return $topTextMarginBottom;
 });
 const PriceTextContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__PriceTextContainer",
   componentId: "components-web__sc-1x6duay-6"
 })(["display:flex;flex-direction:", ";"], _ref8 => {
   let {
-    ratePosition
+    $ratePosition
   } = _ref8;
-  return ratePosition === 'bottom' ? 'column' : 'row';
+  return $ratePosition === 'bottom' ? 'column' : 'row';
 });
 const RateContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__RateContainer",
@@ -90,49 +90,49 @@ const RateTextContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1x6duay-8"
 })(["align-self:", ";"], _ref9 => {
   let {
-    ratePosition
+    $ratePosition
   } = _ref9;
-  return ratePosition === 'bottom' ? 'flex-start' : 'flex-end';
+  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 => {
+})(["display:flex;position:relative;align-items:center;&::before{content:'';width:100%;top:", ";height:", ";background:", ";position:absolute;}"], _ref0 => {
   let {
-    strikeThroughPosition
-  } = _ref10;
-  return `${strikeThroughPosition}px`;
-}, _ref11 => {
+    $strikeThroughPosition
+  } = _ref0;
+  return `${$strikeThroughPosition}px`;
+}, _ref1 => {
   let {
-    strikeThroughHeight
-  } = _ref11;
-  return `${strikeThroughHeight}px`;
-}, _ref12 => {
+    $strikeThroughHeight
+  } = _ref1;
+  return `${$strikeThroughHeight}px`;
+}, _ref10 => {
   let {
-    strikeThroughColor
-  } = _ref12;
-  return strikeThroughColor;
+    $strikeThroughColor
+  } = _ref10;
+  return $strikeThroughColor;
 });
 const TypographyContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__TypographyContainer",
   componentId: "components-web__sc-1x6duay-10"
-})(["display:flex;padding-top:", ";"], _ref13 => {
+})(["display:flex;padding-top:", ";"], _ref11 => {
   let {
-    paddingTop
-  } = _ref13;
-  return `${paddingTop || 0}px`;
+    $paddingTop
+  } = _ref11;
+  return `${$paddingTop || 0}px`;
 });
 const InlineTextWithFootnote = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__InlineTextWithFootnote",
   componentId: "components-web__sc-1x6duay-11"
 })(["display:inline;position:relative;> *:first-child{display:inline;}> *:last-child{display:inline-block;position:relative;top:-0.5em;font-size:0.75em;margin-left:2px;line-height:0;vertical-align:bottom;}"]);
-const selectFootnoteLinkStyles = _ref14 => {
+const selectFootnoteLinkStyles = _ref12 => {
   let {
     footnoteLinkColor,
     footnoteLinkFontName,
     footnoteLinkFontWeight,
     footnoteLinkLineHeight
-  } = _ref14;
+  } = _ref12;
   return {
     color: footnoteLinkColor,
     fontName: footnoteLinkFontName,
@@ -140,19 +140,19 @@ const selectFootnoteLinkStyles = _ref14 => {
     lineHeight: footnoteLinkLineHeight
   };
 };
-const selectStrikeThroughTokens = _ref15 => {
+const selectStrikeThroughTokens = _ref13 => {
   let {
     strikeThroughPosition,
     strikeThroughHeight,
     strikeThroughColor
-  } = _ref15;
+  } = _ref13;
   return {
     strikeThroughHeight,
     strikeThroughPosition,
     strikeThroughColor
   };
 };
-const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
+export const PriceLockup = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -172,7 +172,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
     copy = 'en',
     dictionary = defaultDictionary,
     ...rest
-  } = _ref16;
+  } = _ref14;
   const viewport = useViewport();
   const {
     footnoteMarginTop,
@@ -224,7 +224,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
       }
     };
     return /*#__PURE__*/_jsx(TypographyContainer, {
-      paddingTop: paddingTop,
+      $paddingTop: paddingTop,
       children: /*#__PURE__*/_jsx(Typography, {
         ...customProps,
         children: value
@@ -245,7 +245,9 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
         children: [/*#__PURE__*/_jsx(A11yText, {
           text: a11yText
         }), /*#__PURE__*/_jsx(StrikeThroughContainer, {
-          ...selectStrikeThroughTokens(themeTokens),
+          $strikeThroughPosition: selectStrikeThroughTokens(themeTokens).strikeThroughPosition,
+          $strikeThroughHeight: selectStrikeThroughTokens(themeTokens).strikeThroughHeight,
+          $strikeThroughColor: selectStrikeThroughTokens(themeTokens).strikeThroughColor,
           children: amountComponent
         })]
       });
@@ -254,27 +256,27 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   };
   const renderPrice = () => /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(PriceContainer, {
-      priceMarginBottom: `${priceMarginBottom}px`,
+      $priceMarginBottom: `${priceMarginBottom}px`,
       children: [/*#__PURE__*/_jsxs(PriceTextContainer, {
-        ratePosition: ratePosition,
+        $ratePosition: ratePosition,
         children: [/*#__PURE__*/_jsxs(RateContainer, {
           children: [signDirection === 'left' && renderCurrencySymbol(), renderAmount(), cents && renderTypography(`${separator}${cents}`, typographyTokens.cents), signDirection === 'right' && /*#__PURE__*/_jsxs(_Fragment, {
             children: ["\xA0", renderCurrencySymbol()]
           })]
         }), rateText && /*#__PURE__*/_jsx(RateTextContainer, {
-          ratePosition: ratePosition,
+          $ratePosition: ratePosition,
           children: renderTypography(rateText, typographyTokens.rate, ratePosition)
         })]
       }), !bottomText && footnoteLinks.length <= 3 && /*#__PURE__*/_jsx(BottomLinksContainer, {
-        bottomLinksMarginLeft: `${bottomLinksMarginLeft}px`,
+        $bottomLinksMarginLeft: `${bottomLinksMarginLeft}px`,
         children: renderFootnoteLinks()
       })]
     }), !bottomText && footnoteLinks.length > 3 && renderFootnoteLinks()]
   });
   const renderFootnoteContent = () => {
     const containerProps = {
-      footnoteMarginTop: `${footnoteMarginTop}px`,
-      footnoteGap: `${footnoteGap}px`
+      $footnoteMarginTop: `${footnoteMarginTop}px`,
+      $footnoteGap: `${footnoteGap}px`
     };
     const shouldUseInline = linkPosition === 'inline';
     const bottomTextContent = shouldUseInline ? /*#__PURE__*/_jsxs(InlineTextWithFootnote, {
@@ -290,7 +292,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
       children: [/*#__PURE__*/_jsxs(FootnoteContainer, {
         ...containerProps,
         children: [/*#__PURE__*/_jsx(BottomTextContainer, {
-          bottomTextMarginTop: `${bottomTextMarginTop}px`,
+          $bottomTextMarginTop: `${bottomTextMarginTop}px`,
           children: bottomTextContent
         }), showFootnotesInContainer && renderFootnoteLinks()]
       }), showFootnotesOutside && renderFootnoteLinks()]
@@ -346,12 +348,12 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   const ariaLabel = selectProps(rest)['aria-label'] ?? getAriaContent();
   return /*#__PURE__*/_jsxs(PriceLockupContainer, {
     ...selectProps(rest),
-    alignItemsText: alignItemsText,
+    $alignItemsText: alignItemsText,
     ref: ref,
     role: "group",
     "aria-label": ariaLabel,
     children: [topText && /*#__PURE__*/_jsx(TopTextContainer, {
-      topTextMarginBottom: `${topTextMarginBottom}px`,
+      $topTextMarginBottom: `${topTextMarginBottom}px`,
       children: renderTypography(topText, typographyTokens.topText)
     }), renderPrice(), bottomText && /*#__PURE__*/_jsx(Divider, {
       testID: "price-lockup-divider",
@@ -448,5 +450,4 @@ PriceLockup.propTypes = {
    * `PriceLockup` tokens
    */
   tokens: getTokensPropType('PriceLockup')
-};
-export default PriceLockup;
+};

package/lib/esm/PriceLockup/dictionary.js

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

package/lib/esm/PriceLockup/tokens.js

@@ -1,5 +1,5 @@
 // map typography tokens accordenly
-export default _ref => {
+export const tokens = _ref => {
   let {
     topTextFontSize,
     fontColor,

package/lib/esm/Progress/ProgressBar.js

@@ -1,35 +1,30 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getTokensPropType, Progress, selectSystemProps, useThemeTokens, a11yProps, viewProps, variantProp, applyShadowToken } from '@telus-uds/components-base';
+import { getTokensPropType, ProgressBar as ProgressBarBase, selectSystemProps, useThemeTokens, a11yProps, viewProps, variantProp, applyShadowToken } from '@telus-uds/components-base';
 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 = /*#__PURE__*/styled.div.attrs({
-  'data-testid': 'ProgressBar-Gradient'
-}).withConfig({
+const Gradient = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__Gradient",
   componentId: "components-web__sc-1vmzyq5-0"
 })(_ref => {
   let {
-    gradient: {
+    $gradient: {
       angle,
       stops,
       type
     },
-    borderRadius,
-    shadow
+    $borderRadius,
+    $shadow
   } = _ref;
   return {
     height: '100%',
     width: '100%',
     background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`,
-    borderRadius,
-    ...applyShadowToken(shadow)
+    borderRadius: $borderRadius,
+    ...applyShadowToken($shadow)
   };
 });
 
@@ -45,7 +40,7 @@ const Gradient = /*#__PURE__*/styled.div.attrs({
  *
  */
 
-const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     percentage,
     tokens,
@@ -63,7 +58,10 @@ const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     offset: offset,
     ...selectedProps,
     children: themeTokens.gradient && /*#__PURE__*/_jsx(Gradient, {
-      ...themeTokens
+      "data-testid": "ProgressBar-Gradient",
+      $gradient: themeTokens.gradient,
+      $borderRadius: themeTokens.borderRadius,
+      $shadow: themeTokens.shadow
     })
   });
 });
@@ -89,5 +87,4 @@ ProgressBar.propTypes = {
     items: PropTypes.number,
     current: PropTypes.number
   })
-};
-export default ProgressBar;
+};

package/lib/esm/QuantitySelector/QuantitySelector.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import { Box, TextInput, Spacer, Feedback, InputLabel, useInputValue, useCopy, useThemeTokensCallback, getTokensPropType, selectSystemProps, a11yProps } from '@telus-uds/components-base';
 import { htmlAttrs } from '../utils';
 import { InputField, InputWrapper } from './styles';
-import defaultDictionary from './dictionary';
-import SideButton from './SideButton';
+import { dictionary as defaultDictionary } from './dictionary';
+import { QuantitySelectorSideButton } from './QuantitySelectorSideButton';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   isNaN
@@ -13,7 +13,7 @@ const isNumber = value => {
   return typeof value === 'number' && !isNaN(value);
 };
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, htmlAttrs]);
-const QuantitySelector = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const QuantitySelector = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     id = 'quantity-selector',
     minNumber,
@@ -152,7 +152,7 @@ const QuantitySelector = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         children: renderTextInput()
       }), /*#__PURE__*/_jsx("div", {
         style: flexOrder(0),
-        children: /*#__PURE__*/_jsx(SideButton, {
+        children: /*#__PURE__*/_jsx(QuantitySelectorSideButton, {
           isEnabled: isDecreaseEnabled,
           onPress: () => updateNumber(number - 1),
           onDoubleClick: () => updateNumber(number - 1),
@@ -167,7 +167,7 @@ const QuantitySelector = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         })
       }), /*#__PURE__*/_jsx("div", {
         style: flexOrder(2),
-        children: /*#__PURE__*/_jsx(SideButton, {
+        children: /*#__PURE__*/_jsx(QuantitySelectorSideButton, {
           isEnabled: isIncreaseEnabled,
           onPress: () => updateNumber(number + 1),
           onDoubleClick: () => updateNumber(number + 1),
@@ -276,5 +276,4 @@ QuantitySelector.propTypes = {
    * If true, the quantity selector will be disabled
    */
   inactive: PropTypes.bool
-};
-export default QuantitySelector;
+};

package/lib/esm/QuantitySelector/{SideButton.js → QuantitySelectorSideButton.js}

@@ -2,7 +2,7 @@ import { IconButton, getTokensPropType, useThemeTokensCallback } from '@telus-ud
 import React from 'react';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
-const SideButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const QuantitySelectorSideButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     isEnabled = true,
     onPress = () => {},
@@ -57,8 +57,8 @@ const SideButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ref: ref
   });
 });
-SideButton.displayName = 'QuantitySelectorSideButton';
-SideButton.propTypes = {
+QuantitySelectorSideButton.displayName = 'QuantitySelectorSideButton';
+QuantitySelectorSideButton.propTypes = {
   isEnabled: PropTypes.bool,
   onPress: PropTypes.func,
   onDoubleClick: PropTypes.func,
@@ -66,5 +66,4 @@ SideButton.propTypes = {
   accessibilityDisabled: PropTypes.bool,
   tokens: getTokensPropType('QuantitySelectorSideButton'),
   variant: PropTypes.object
-};
-export default SideButton;
+};

package/lib/esm/QuantitySelector/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     accessibility: {
       a11yLabel: 'Quantity selector',

package/lib/esm/ResponsiveImage/ResponsiveImage.js

@@ -15,7 +15,7 @@ const staticStyles = {
 /**
  * Provide different image sources for different screen sizes.
  */
-const ResponsiveImage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const ResponsiveImage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     xsSrc,
     smSrc,
@@ -96,5 +96,4 @@ ResponsiveImage.propTypes = {
    * The dataSet prop allows to pass data-* attributes element to the component.
    */
   dataSet: PropTypes.object
-};
-export default ResponsiveImage;
+};

package/lib/esm/Ribbon/Ribbon.js

@@ -30,90 +30,88 @@ const RibbonContainer = /*#__PURE__*/styled.div.withConfig({
   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
+    $backgroundColor
   } = _ref4;
-  return backgroundColor;
+  return $backgroundColor;
 }, _ref5 => {
   let {
-    padding
+    $padding
   } = _ref5;
-  return `${padding}`;
+  return `${$padding}`;
 }, _ref6 => {
   let {
-    borderRadius
+    $borderRadius
   } = _ref6;
-  return borderRadius;
+  return $borderRadius;
 }, _ref7 => {
   let {
-    boxShadow,
-    shouldWrap
+    $boxShadow
   } = _ref7;
-  return shouldWrap && boxShadow;
+  return $boxShadow;
 }, _ref8 => {
   let {
-    borderRadiusBottomLeft
+    $borderRadiusBottomLeft
   } = _ref8;
-  return borderRadiusBottomLeft;
+  return $borderRadiusBottomLeft;
 }, _ref9 => {
   let {
-    borderRadiusBottomRight
+    $borderRadiusBottomRight
   } = _ref9;
-  return borderRadiusBottomRight;
+  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 => {
+})(["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:", ";}"], _ref0 => {
   let {
-    curveBackgroundColor
+    $curveBackgroundColor
+  } = _ref0;
+  return $curveBackgroundColor;
+}, _ref1 => {
+  let {
+    $curveWidth
+  } = _ref1;
+  return $curveWidth;
+}, _ref10 => {
+  let {
+    $curveHeight
   } = _ref10;
-  return curveBackgroundColor;
+  return $curveHeight;
 }, _ref11 => {
   let {
-    curveWidth
+    $curveMarginTop
   } = _ref11;
-  return curveWidth;
+  return $curveMarginTop;
 }, _ref12 => {
   let {
-    curveHeight
+    $curveAfterRadius
   } = _ref12;
-  return curveHeight;
+  return $curveAfterRadius;
 }, _ref13 => {
   let {
-    curveMarginTop
+    $curveAfterHeight
   } = _ref13;
-  return curveMarginTop;
+  return $curveAfterHeight;
 }, _ref14 => {
   let {
-    curveAfterRadius
+    $curveAfterBackgroundColor
   } = _ref14;
-  return curveAfterRadius;
+  return $curveAfterBackgroundColor;
 }, _ref15 => {
   let {
-    curveAfterHeight
+    $curveAfterWidth
   } = _ref15;
-  return curveAfterHeight;
-}, _ref16 => {
-  let {
-    curveAfterBackgroundColor
-  } = _ref16;
-  return curveAfterBackgroundColor;
-}, _ref17 => {
-  let {
-    curveAfterWidth
-  } = _ref17;
-  return curveAfterWidth;
+  return $curveAfterWidth;
 });
-const Ribbon = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
+export const Ribbon = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   let {
     children,
     tokens,
-    wrap: shouldWrap = false,
     left,
     top,
     variant = {},
     ...rest
-  } = _ref18;
+  } = _ref16;
   const {
     backgroundColor,
     borderRadius,
@@ -143,8 +141,7 @@ const Ribbon = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
     fontSize,
     lineHeight
   } = useThemeTokens('Ribbon', tokens, {
-    ...variant,
-    wrap: shouldWrap
+    ...variant
   });
   let background = backgroundColor;
   if (gradient) {
@@ -163,13 +160,12 @@ const Ribbon = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
     ref: ref,
     ...selectProps(rest),
     children: [/*#__PURE__*/_jsx(RibbonContainer, {
-      shouldWrap: shouldWrap,
-      backgroundColor: background,
-      padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
-      borderRadius: `${borderRadius}px`,
-      boxShadow: `${boxShadowPaddingTop}px ${boxShadowPaddingRight}px ${boxShadowPaddingBottom}px ${boxShadowPaddingLeft}px ${boxShadowColor}`,
-      borderRadiusBottomLeft: `${borderRadiusBottomLeft}px`,
-      borderRadiusBottomRight: `${borderRadiusBottomRight}px`,
+      $backgroundColor: background,
+      $padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+      $borderRadius: `${borderRadius}px`,
+      $boxShadow: `${boxShadowPaddingTop}px ${boxShadowPaddingRight}px ${boxShadowPaddingBottom}px ${boxShadowPaddingLeft}px ${boxShadowColor}`,
+      $borderRadiusBottomLeft: `${borderRadiusBottomLeft}px`,
+      $borderRadiusBottomRight: `${borderRadiusBottomRight}px`,
       children: /*#__PURE__*/_jsx(Typography, {
         variant: {
           bold: true,
@@ -184,17 +180,17 @@ const Ribbon = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
         },
         children: children
       })
-    }), shouldWrap && /*#__PURE__*/_jsx(RibbonCurve, {
+    }), /*#__PURE__*/_jsx(RibbonCurve, {
       "data-testid": "ribbon-curve",
-      backgroundColor: backgroundColor,
-      curveMarginTop: `${curveMarginTop}px`,
-      curveWidth: `${curveWidth}px`,
-      curveHeight: `${curveHeight}px`,
-      curveBackgroundColor: curveBackgroundColor,
-      curveAfterRadius: `${curveAfterRadius}px`,
-      curveAfterWidth: `${curveAfterWidth}px`,
-      curveAfterHeight: `${curveAfterHeight}px`,
-      curveAfterBackgroundColor: curveAfterBackgroundColor
+      $backgroundColor: backgroundColor,
+      $curveMarginTop: `${curveMarginTop}px`,
+      $curveWidth: `${curveWidth}px`,
+      $curveHeight: `${curveHeight}px`,
+      $curveBackgroundColor: curveBackgroundColor,
+      $curveAfterRadius: `${curveAfterRadius}px`,
+      $curveAfterWidth: `${curveAfterWidth}px`,
+      $curveAfterHeight: `${curveAfterHeight}px`,
+      $curveAfterBackgroundColor: curveAfterBackgroundColor
     })]
   });
 });
@@ -203,13 +199,8 @@ Ribbon.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('Ribbon'),
   children: PropTypes.node,
-  /** show/hide the ribbon fold
-   * @deprecated please don't rely on `wrap` to turn off the wrapping (use `Badge` instead) as it will be removed in the future
-   */
-  wrap: PropTypes.bool,
   /** sets the left offset (triggers absolute positioning) */
   left: PropTypes.number,
   /** sets the top offset (triggers absolute positioning) */
   top: PropTypes.number
-};
-export default Ribbon;
+};