@telus-uds/components-base 1.80.1 → 1.82.0

package/CHANGELOG.md

@@ -1,12 +1,40 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 19 Mar 2024 18:37:02 GMT and should not be manually modified.
+This log was last generated on Fri, 05 Apr 2024 17:10:34 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.82.0
+
+Fri, 05 Apr 2024 17:10:34 GMT
+
+### Minor changes
+
+- Add `ProductCardGroup` component (chris.tafts@telus.com)
+- Add `ProductCard` component (chris.tafts@telus.com)
+- add support for circle container to icon (mauricio.batresmontejo@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.54.0
+
+### Patches
+
+- `Modal`: fix focus life cycle (guillermo.peitzner@telus.com)
+
+## 1.81.0
+
+Wed, 27 Mar 2024 21:13:10 GMT
+
+### Minor changes
+
+- add test-id prop to radio-group component (guillermo.peitzner@telus.com)
+
+### Patches
+
+- SSR: sanitize function values in CSS styles (guillermo.peitzner@telus.com)
+- validation added to the datepicker input and input cleaned after the content is deleted (35577399+JoshHC@users.noreply.github.com)
+
 ## 1.80.1
 
-Tue, 19 Mar 2024 18:37:02 GMT
+Tue, 19 Mar 2024 18:39:50 GMT
 
 ### Patches
 

package/lib/Autocomplete/Autocomplete.js

@@ -247,6 +247,7 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     setCurrentValue(newValue);
     if (!isControlled && inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue;
     if (nested) setNestedSelectedValue(newValue);
+    inputRef.current.focus();
   };
 
   /**
@@ -276,7 +277,8 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     if (event.type === 'keydown' && (event.key === 'Escape' || event.key === '27') || event.type === 'click' && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre = openOverlayRef.current) !== null && _openOverlayRef$curre !== void 0 && _openOverlayRef$curre.contains(event.target)) || event.type === 'touchstart' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.touches[0].target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre2 = openOverlayRef.current) !== null && _openOverlayRef$curre2 !== void 0 && _openOverlayRef$curre2.contains(event.touches[0].target))) {
       setIsExpanded(false);
       setNestedSelectedValue(null);
-    } else if (event.type === 'keydown' && event.key === 'ArrowDown' && isExpanded && !isLoading && targetRef !== null && targetRef !== void 0 && targetRef.current) {
+    } else if (event.type === 'keydown' && (event.key === 'ArrowDown' || event.key === 'Tab') && isExpanded && !isLoading && targetRef !== null && targetRef !== void 0 && targetRef.current) {
+      event.preventDefault();
       targetRef.current.focus();
     }
   };

package/lib/Badge/Badge.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ThemeProvider = require("../ThemeProvider");
 var _Typography = _interopRequireDefault(require("../Typography"));
@@ -86,15 +85,7 @@ const Badge = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Badge', tokens, variant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
-    style: _Platform.default.select({
-      native: {
-        ...staticStyles.container,
-        ...selectContainerBackground(themeTokens),
-        ...selectContainerBorder(themeTokens),
-        ...selectContainerPadding(themeTokens)
-      },
-      web: {}
-    }),
+    style: [staticStyles.container, selectContainerBackground(themeTokens), selectContainerBorder(themeTokens), selectContainerPadding(themeTokens)],
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
       tokens: getTypographyTokens(themeTokens),

package/lib/Fieldset/Fieldset.js

@@ -40,7 +40,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     name: fieldsetName,
     children,
     variant = {},
-    tokens = {}
+    tokens = {},
+    ...rest
   } = _ref;
   /* Fieldset tokenization:
   - error variant can only be activated by passing showErrorBorder and also having validaton as 'error'
@@ -126,6 +127,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     name: fieldsetName,
     borderStyle: borderStyles(themeTokens),
     showBorderStyle: showErrorBorder,
+    ...rest,
     children: stackedContent
   });
 });

package/lib/Fieldset/FieldsetContainer.js

@@ -7,20 +7,25 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _cssReset = _interopRequireDefault(require("./cssReset"));
+var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.htmlAttrs]);
+
 /**
  * On Web, wraps children with a HTML `<fieldset>` and sets its attributes as necessary.
- */const FieldsetContainer = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+ */
+const FieldsetContainer = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
     inactive,
     accessibilityRole,
     name: fieldsetName,
     showBorderStyle = false,
-    borderStyle
+    borderStyle,
+    ...rest
   } = _ref;
   // If needs border for error design or reset the component style
   const styleContainer = showBorderStyle && borderStyle ? borderStyle : _cssReset.default;
@@ -30,11 +35,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     style: styleContainer,
     role: accessibilityRole,
     name: fieldsetName,
+    ...selectProps(rest),
     children: children
   });
 });
 FieldsetContainer.displayName = 'FieldsetContainer';
 FieldsetContainer.propTypes = {
+  ...selectedSystemPropTypes,
   accessibilityRole: _propTypes.default.string,
   children: _propTypes.default.node,
   inactive: _propTypes.default.bool,

package/lib/Fieldset/FieldsetContainer.native.js

@@ -7,25 +7,31 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 // No equivalent of `<fieldset>` on native, so just apply accessibility role to container.
 // If a11y testing finds any additional handling is needed at the container level, add it here.
 const FieldsetContainer = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
-    accessibilityRole
+    accessibilityRole,
+    ...rest
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     accessibilityRole: accessibilityRole,
+    ...selectProps(rest),
     children: children
   });
 });
 FieldsetContainer.displayName = 'FieldsetContainer';
 FieldsetContainer.propTypes = {
+  ...selectedSystemPropTypes,
   children: _propTypes.default.node,
   accessibilityRole: _propTypes.default.string
 };

package/lib/Icon/Icon.js

@@ -31,6 +31,25 @@ const Icon = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     size: size,
     color: themeTokens.color
   });
+  const paddingStyles = variant !== null && variant !== void 0 && variant.padding ? {
+    padding: themeTokens.width,
+    width: themeTokens.size + themeTokens.width * 2,
+    // sets the diameter of the circle which is the size of the icon plus twice the general padding established to obtain a perfect circle
+    height: themeTokens.size + themeTokens.width * 2
+  } : {};
+  const getIconContentForMobile = () => {
+    if (Object.keys(paddingStyles).length) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: {
+          backgroundColor: themeTokens.backgroundColor,
+          borderRadius: themeTokens.borderRadius,
+          ...paddingStyles
+        },
+        children: iconContent
+      });
+    }
+    return iconContent;
+  };
   return _Platform.default.OS === 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref
     // eslint-disable-next-line react-native/no-inline-styles
@@ -40,11 +59,14 @@ const Icon = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       // https://github.com/telus/universal-design-system/issues/487
       transition: 'transform 200ms, color 200ms',
       transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : '', themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''].filter(exists => exists).join(' '),
-      ...style
+      ...style,
+      backgroundColor: themeTokens.backgroundColor,
+      borderRadius: themeTokens.borderRadius,
+      ...paddingStyles
     },
     dataSet: dataSet,
     children: iconContent
-  }) : iconContent;
+  }) : getIconContentForMobile();
 });
 Icon.displayName = 'Icon';
 const iconComponentPropTypes = {

package/lib/Listbox/Listbox.js

@@ -75,8 +75,14 @@ const Listbox = _ref => {
       // Return focus to the dropdown control after leaving the last item
       parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current3 = parentRef.current) === null || _parentRef$current3 === void 0 ? void 0 : _parentRef$current3.focus();
       if (onClose) onClose(event);
+    } else if (!nextItemRef && firstItemRef) {
+      var _firstItemRef$current;
+      // If the last item is focused, move the focus to the first one
+      event.preventDefault();
+      setFocusedIndex(0);
+      (_firstItemRef$current = firstItemRef.current) === null || _firstItemRef$current === void 0 ? void 0 : _firstItemRef$current.focus();
     }
-  }, [focusedIndex, onClose, parentRef]);
+  }, [focusedIndex, onClose, parentRef, firstItemRef]);
 
   // Add listeners for mouse clicks outside and for key presses
   (0, _react.useEffect)(() => {

package/lib/Modal/Modal.js

@@ -19,6 +19,7 @@ var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _useScrollBlocking = _interopRequireDefault(require("../utils/useScrollBlocking"));
 var _ModalContent = _interopRequireDefault(require("./ModalContent"));
+var _WebModal = _interopRequireDefault(require("./WebModal"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -151,12 +152,32 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   // Show the custom react node passed to `closedButton` or the default close button if `closeButton` is `undefined`.
   // Hide the close button if `closeButton` is `null`.
   const showCloseButton = closeButton !== null;
+
+  // These refs are used to manage focus in the web modal container
+  const focusTrapRef = (0, _react.useRef)(null);
+  const closeButtonRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (_Platform.default.OS === 'web') {
+      const handleFocus = () => {
+        // If the focus is on the last item of the web modal container, move it to the close button
+        if (document.activeElement === focusTrapRef.current) {
+          closeButtonRef.current.focus();
+        }
+        return undefined;
+      };
+
+      // Add an event listener to manage focus in the web modal container
+      document.addEventListener('focusin', handleFocus);
+
+      // Clean up the event listener
+      return () => document.removeEventListener('focusin', handleFocus);
+    }
+    return undefined;
+  }, []);
   if (!isOpen) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
-    transparent: true,
-    ...selectProps(rest),
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ScrollView.default, {
       contentContainerStyle: [staticStyles.positioningContainer],
       ref: modalRef,
@@ -174,7 +195,8 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
               onPress: handleClose,
               icon: CloseIconComponent,
               accessibilityRole: "button",
-              accessibilityLabel: closeLabel
+              accessibilityLabel: closeLabel,
+              ref: closeButtonRef
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalContent.default, {
             tokens: tokens,
@@ -206,6 +228,20 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
       })]
     })
   });
+  if (_Platform.default.OS === 'web') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_WebModal.default, {
+      ...selectProps(rest),
+      children: [content, /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        accessibilityRole: "button",
+        ref: focusTrapRef
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
+    transparent: true,
+    ...selectProps(rest),
+    children: content
+  });
 });
 Modal.displayName = 'Modal';
 Modal.propTypes = {

package/lib/Modal/WebModal.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
+/**
+ * WebModal component.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {ReactNode} props.children - The content of the modal.
+ * @returns {JSX.Element} The rendered WebModal component.
+ */
+const WebModal = _ref => {
+  let {
+    children,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: staticStyles.container,
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: staticStyles.content,
+      children: children
+    })
+  });
+};
+WebModal.propTypes = {
+  ...selectedSystemPropTypes,
+  // children to be rendered within the modal
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)])
+};
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    position: 'fixed',
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    top: 0,
+    right: 0,
+    left: 0,
+    bottom: 0,
+    alignItems: 'stretch',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexBasis: 'auto',
+    flexDirection: 'column',
+    flexShrink: 0,
+    listStyle: 'none',
+    margin: 0,
+    minHeight: 0,
+    minWidth: 0,
+    padding: 0,
+    textDecoration: 'none',
+    zIndex: 1
+  },
+  content: {
+    flex: 1,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0
+  }
+});
+var _default = WebModal;
+exports.default = _default;

package/lib/PriceLockup/PriceLockup.js

@@ -117,7 +117,6 @@ const PriceLockup = _ref7 => {
     bottomTextMarginTop,
     priceMarginBottom,
     bottomLinksMarginLeft,
-    topTextMarginBottom,
     fontColor,
     dividerColor,
     ...themeTokens
@@ -139,6 +138,7 @@ const PriceLockup = _ref7 => {
       ...selectProps(rest)
     }],
     children: [topText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: staticStyles.topText,
       children: (0, _renderTypography.default)(topText, topTextTypographyTokens)
     }) : null, (0, _renderPrice.default)(price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens), bottomText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
@@ -216,5 +216,8 @@ exports.default = _default;
 const staticStyles = _StyleSheet.default.create({
   priceLockupContainer: {
     alignSelf: 'flex-start'
+  },
+  topText: {
+    marginBottom: 4
   }
 });

package/lib/PriceLockup/utils/renderFootnoteContent.js

@@ -49,13 +49,13 @@ const renderFootnoteContent = (footnoteMarginTop, bottomTextMarginTop, bottomTex
           bottomTextMarginTop
         }),
         children: [(0, _renderTypography.default)(bottomText, bottomTextTypographyTokens, undefined, fontColor), ' ']
-      }), footnoteLinks.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      }), (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: [staticStyles.footnoteLinkContainer, selectFootnoteLinksStyles({
           bottomLinksMarginLeft
         })],
         children: (0, _renderFootnoteLinks.default)(footnoteLinks, themeTokens, onClickFootnote)
       }) : null]
-    }), footnoteLinks.length > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    }), (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: staticStyles.verticalFootnoteLinkContainer,
       children: (0, _renderFootnoteLinks.default)(footnoteLinks, themeTokens, onClickFootnote)
     }) : null]

package/lib/PriceLockup/utils/renderFootnoteLinks.js

@@ -18,7 +18,7 @@ const selectFootnoteLinkStyles = (_ref, footnoteLinks) => {
   } = _ref;
   // This is used to apply the proper line height when there is 4 or more footnote links
   const MAX_FOOTNOTE_LINKS_ALLOWED = 3;
-  const lineHeight = footnoteLinks.length > MAX_FOOTNOTE_LINKS_ALLOWED ? footnoteLinkFontSize * footnoteLinkLineHeight : undefined;
+  const lineHeight = (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) > MAX_FOOTNOTE_LINKS_ALLOWED ? footnoteLinkFontSize * footnoteLinkLineHeight : undefined;
   return {
     color: footnoteLinkColor,
     fontName: footnoteLinkFontName,
@@ -27,7 +27,7 @@ const selectFootnoteLinkStyles = (_ref, footnoteLinks) => {
     fontSize: footnoteLinkFontSize
   };
 };
-const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) => footnoteLinks && footnoteLinks.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FootnoteLink.default, {
+const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) => (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FootnoteLink.default, {
   tokens: selectFootnoteLinkStyles(themeTokens, footnoteLinks),
   content: footnoteLinks,
   onClick: onClickFootnote

package/lib/PriceLockup/utils/renderPrice.js

@@ -73,13 +73,13 @@ const renderPrice = (price, rateText, ratePosition, signDirection, currencySymbo
       }), rateText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
         style: ratePosition === 'bottom' ? staticStyles.rateTextVerticalPosition : [staticStyles.rateTextPosition, staticStyles.rateTextVerticalPosition],
         children: (0, _renderTypography.default)(rateText, rateTypographyTokens, ratePosition, fontColor)
-      }) : null, !bottomText && footnoteLinks.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      }) : null, !bottomText && (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
         style: [footnoteLinkPositionStyles, selectFootnoteLinksStyles({
           bottomLinksMarginLeft
         })],
         children: (0, _renderFootnoteLinks.default)(footnoteLinks, themeTokens, onClickFootnote)
       }) : null]
-    }), !bottomText && footnoteLinks.length > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    }), !bottomText && (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: staticStyles.verticalFootnoteLinkContainer,
       children: (0, _renderFootnoteLinks.default)(footnoteLinks, themeTokens, onClickFootnote)
     }) : null]

package/lib/PriceLockup/utils/renderTypography.js

@@ -9,7 +9,7 @@ var _Typography = _interopRequireDefault(require("../../Typography"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const renderTypography = (value, themeTokens, ratePosition, fontColor) => {
-  const customProps = ratePosition === 'bottom' ? {
+  const customProps = ratePosition === 'bottom' && value !== '$' ? {
     variant: {
       size: 'micro'
     },