@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/Notification/Notification.js

@@ -1,432 +0,0 @@
-import React from 'react';
-import View from "react-native-web/dist/exports/View";
-import Platform from "react-native-web/dist/exports/Platform";
-import PropTypes from 'prop-types';
-import { applyTextStyles, useTheme, useThemeTokens, useResponsiveThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, useResponsiveProp, createMediaQueryStyles, StyleSheet } from '../utils';
-import IconButton from '../IconButton';
-import useCopy from '../utils/useCopy';
-import dictionary from './dictionary';
-import { useViewport } from '../ViewportProvider';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const selectContainerStyles = tokens => ({
-  ...tokens
-});
-const selectTextStyles = (tokens, themeOptions, isDismissible) => {
-  const textTokens = selectTokens('Typography', tokens);
-  const styles = {
-    ...textTokens,
-    themeOptions,
-    overflow: 'hidden'
-  };
-  if (!isDismissible) {
-    styles.flexShrink = 1;
-  }
-  return applyTextStyles(styles);
-};
-const selectIconProps = _ref => {
-  let {
-    iconSize,
-    iconColor
-  } = _ref;
-  return {
-    size: iconSize,
-    color: iconColor
-  };
-};
-const selectIconContainerStyles = _ref2 => {
-  let {
-    iconGap
-  } = _ref2;
-  return {
-    paddingRight: iconGap,
-    placeContent: 'start'
-  };
-};
-const selectDismissIconProps = _ref3 => {
-  let {
-    dismissIconSize,
-    dismissIconColor
-  } = _ref3;
-  return {
-    size: dismissIconSize,
-    color: dismissIconColor
-  };
-};
-const selectDismissButtonContainerStyles = _ref4 => {
-  let {
-    dismissButtonGap
-  } = _ref4;
-  return {
-    paddingLeft: dismissButtonGap,
-    placeContent: 'start'
-  };
-};
-const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) => ({
-  maxWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
-  minWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
-  paddingRight: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.containerPaddingRight,
-  paddingLeft: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.containerPaddingLeft
-});
-const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, system) => {
-  var _themeOptions$content, _themeOptions$content2, _themeOptions$content3, _themeOptions$content4, _themeOptions$content5;
-  const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
-    let [vp, viewportTokens] = _ref5;
-    acc[vp] = selectContainerStyles({
-      ...viewportTokens
-    });
-    return acc;
-  }, {});
-  const selectContainerMediaQueryStyles = createMediaQueryStyles(transformedSelectContainerStyles);
-  const {
-    ids: containerIds,
-    styles: containerStyles
-  } = StyleSheet.create({
-    container: {
-      flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
-      ...selectContainerMediaQueryStyles
-    }
-  });
-  const {
-    ids: contentContainerIds,
-    styles: contentContainerStyles
-  } = StyleSheet.create({
-    contentContainer: {
-      flexDirection: 'row',
-      flexShrink: 1,
-      justifyContent: 'space-between',
-      ...createMediaQueryStyles({
-        xs: {
-          maxWidth: (themeOptions === null || themeOptions === void 0 || (_themeOptions$content = themeOptions.contentMaxWidth) === null || _themeOptions$content === void 0 ? void 0 : _themeOptions$content.xs) || '100%'
-        },
-        md: {
-          maxWidth: (themeOptions === null || themeOptions === void 0 || (_themeOptions$content2 = themeOptions.contentMaxWidth) === null || _themeOptions$content2 === void 0 ? void 0 : _themeOptions$content2.md) || '100%'
-        },
-        lg: {
-          maxWidth: (themeOptions === null || themeOptions === void 0 || (_themeOptions$content3 = themeOptions.contentMaxWidth) === null || _themeOptions$content3 === void 0 ? void 0 : _themeOptions$content3.lg) || '100%'
-        },
-        sm: {
-          maxWidth: (themeOptions === null || themeOptions === void 0 || (_themeOptions$content4 = themeOptions.contentMaxWidth) === null || _themeOptions$content4 === void 0 ? void 0 : _themeOptions$content4.sm) || '100%'
-        },
-        xl: {
-          maxWidth: (themeOptions === null || themeOptions === void 0 || (_themeOptions$content5 = themeOptions.contentMaxWidth) === null || _themeOptions$content5 === void 0 ? void 0 : _themeOptions$content5.xl) || '100%'
-        }
-      })
-    }
-  });
-  const {
-    ids: staticContentContainerIds,
-    styles: staticContentContainerStyles
-  } = StyleSheet.create({
-    staticContentContainer: {
-      flexDirection: 'row',
-      flexShrink: 1
-    }
-  });
-  const {
-    ids: iconContainerIds,
-    styles: iconContainerStyles
-  } = StyleSheet.create({
-    iconContainer: selectIconContainerStyles(themeTokens[viewport])
-  });
-  const {
-    ids: dismissButtonContainerIds,
-    styles: dismissButtonContainerStyles
-  } = StyleSheet.create({
-    dismissButtonContainer: selectDismissButtonContainerStyles(themeTokens[viewport])
-  });
-  const {
-    ids: textIds,
-    styles: textStyles
-  } = StyleSheet.create({
-    text: selectTextStyles(themeTokens[viewport], themeOptions, dismissible)
-  });
-  const {
-    styles: selectIconPropsStyles
-  } = StyleSheet.create({
-    selectIconProps: selectIconProps(themeTokens[viewport])
-  });
-  const {
-    styles: selectDismissIconPropsStyles
-  } = StyleSheet.create({
-    selectDismissIconProps: selectDismissIconProps(themeTokens[viewport])
-  });
-
-  // eslint-disable-next-line no-param-reassign
-  mediaIdsRef.current = {
-    containerIds,
-    contentContainerIds,
-    staticContentContainerIds,
-    iconContainerIds,
-    dismissButtonContainerIds,
-    textIds
-  };
-  return {
-    containerStyles,
-    contentContainerStyles,
-    staticContentContainerStyles,
-    iconContainerStyles,
-    dismissButtonContainerStyles,
-    textStyles,
-    selectIconPropsStyles,
-    selectDismissIconPropsStyles
-  };
-};
-const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
-  containerStyles: {
-    container: {
-      flexDirection: system === true && viewport === 'xl' || Platform.OS === 'android' ? 'row' : 'inherit',
-      ...selectContainerStyles(themeTokens)
-    }
-  },
-  contentContainerStyles: {
-    contentContainer: {
-      flex: 1,
-      flexDirection: 'row',
-      flexShrink: 1,
-      justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system)
-    }
-  },
-  staticContentContainerStyles: {
-    staticContentContainer: {
-      flexDirection: 'row',
-      flexShrink: 1
-    }
-  },
-  iconContainerStyles: {
-    iconContainer: {
-      ...selectIconContainerStyles(themeTokens)
-    }
-  },
-  dismissButtonContainerStyles: {
-    dismissButtonContainer: {
-      ...selectDismissButtonContainerStyles(themeTokens)
-    }
-  },
-  textStyles: {
-    text: {
-      ...selectTextStyles(themeTokens, themeOptions, dismissible)
-    }
-  },
-  selectIconPropsStyles: {
-    selectIconProps: {
-      ...selectIconProps(themeTokens)
-    }
-  },
-  selectDismissIconPropsStyles: {
-    selectDismissIconProps: {
-      ...selectDismissIconProps(themeTokens)
-    }
-  }
-});
-
-/**
- * A banner that highlights important messages:
- * - Status message to show there is an error or outage of services
- * - Confirmation message in response to user action
- * - Account information letting the user know they have almost used all their data
- *
- * ## Usage criteria
- * - Use simple text content only, such as bold test or links. Don’t use other complex components or paragraphs
- * - Show notifications before the content that the message is related to, otherwise show at the top of the main content
- * - Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
- * - When showing multiple notifications, show them in order of importance from top to bottom
- * - Use variants to visually show the type of message contained within the Notification.
- * - The icon and colour will indicate meaning and importance
- *
- * ### Variants
- * - Use `variant.style` to set the visual style of the notification
- * - Use `dismissible` prop to enable dismissible functionality
- * - Use `system` prop to set the visual style of the notification and denote an announcement from the system or application
- *
- * ### When to use the system prop?
- * - Use `system` to show system-based messages coming from the application
- * - Don’t use `system` when the message is in response to user action
- *
- * ## Variants
- *
- * #### Success
- * Use the success variant to provide feedback of a successful operation. The message will include an icon to indicate meaning and importance.
- *
- * #### Warning
- * Use the warning variant to provide feedback of a warning; users would still be able to proceed forward.
- * The message will include an icon to indicate meaning and importance.
- *
- * #### Error
- * Use the error variant to provide feedback of a failed operation. The message will include an icon to indicate meaning and importance.
- *
- * #### Dismissible
- * Dismissible notifications should only be used for default or success notifications where there is no action needed from the user.
- * If the information is passive then it should be dismissible as indicated by an interactive close button on the far right.
- * If the notification requires an action then make the option(s) clear with a `ChevronLink` or `Link`.
- *
- * Use the `dismissible` prop to allow users to dismiss the Notification at any time. Once dismissed, the Notification is removed from the DOM.
- *
- * Please note:
- *
- * - Default and Success variants are dismissible
- * - Error and Warning variants are not dismissible
- *
- * #### System message
- * Use full-width `Notifications` to show system-based messages coming from the application, not in response to user action.
- * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
- */
-const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
-  var _variant$style;
-  let {
-    children,
-    system,
-    dismissible,
-    copy = 'en',
-    tokens,
-    variant,
-    onDismiss,
-    ...rest
-  } = _ref6;
-  const [isDismissed, setIsDismissed] = React.useState(false);
-  const viewport = useViewport();
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-
-  // TODO: Remove this once the system style variant is deprecated
-  const isSystemEnabled = system || (variant === null || variant === void 0 || (_variant$style = variant.style) === null || _variant$style === void 0 ? void 0 : _variant$style.includes('system'));
-  const {
-    themeOptions
-  } = useTheme();
-  const {
-    enableMediaQueryStyleSheet
-  } = themeOptions;
-  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
-  const themeTokens = useTokens('Notification', tokens, variant, {
-    system: isSystemEnabled,
-    viewport
-  });
-  const maxWidth = useResponsiveProp(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
-  const notificationComponentRef = React.useRef({
-    containerStyles: {},
-    contentContainerStyles: {},
-    staticContentContainerStyles: {},
-    iconContainerStyles: {},
-    dismissButtonContainerStyles: {},
-    textStyles: {},
-    selectIconPropsStyles: {},
-    selectDismissIconPropsStyles: {}
-  });
-  const mediaIdsRef = React.useRef({
-    containerIds: {},
-    contentContainerIds: {},
-    staticContentContainerIds: {},
-    iconContainerIds: {},
-    dismissButtonContainerIds: {},
-    textIds: {},
-    selectIconPropsIds: {},
-    selectDismissIconPropsIds: {}
-  });
-  if (enableMediaQueryStyleSheet) {
-    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, isSystemEnabled);
-  } else {
-    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, isSystemEnabled);
-  }
-  if (isDismissed) {
-    return null;
-  }
-  const content = wrapStringsInText(typeof children === 'function' ? children({
-    textStyles: notificationComponentRef.current.textStyles.text,
-    variant
-  }) : children, {
-    style: notificationComponentRef.current.textStyles.text
-  });
-  const {
-    icon: IconComponent,
-    dismissIcon: DismissIconComponent,
-    dismissIconColor
-  } = enableMediaQueryStyleSheet === false ? themeTokens : themeTokens[viewport];
-  const onDismissPress = () => {
-    setIsDismissed(true);
-    onDismiss === null || onDismiss === void 0 || onDismiss();
-  };
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: notificationComponentRef.current.containerStyles.container,
-    dataSet: mediaIdsRef && {
-      media: mediaIdsRef.current.containerIds.container
-    },
-    ...selectProps(rest),
-    children: /*#__PURE__*/_jsxs(View, {
-      style: notificationComponentRef.current.contentContainerStyles.contentContainer,
-      dataSet: mediaIdsRef && {
-        media: mediaIdsRef.current.contentContainerIds.contentContainer
-      },
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: notificationComponentRef.current.staticContentContainerStyles.staticContentContainer,
-        dataSet: mediaIdsRef && {
-          media: mediaIdsRef.current.staticContentContainerIds.staticContentContainer
-        },
-        children: [IconComponent && /*#__PURE__*/_jsx(View, {
-          style: notificationComponentRef.current.iconContainerStyles.iconContainer,
-          dataSet: mediaIdsRef && {
-            media: mediaIdsRef.current.iconContainerIds.iconContainer
-          },
-          children: /*#__PURE__*/_jsx(IconComponent, {
-            ...notificationComponentRef.current.selectIconPropsStyles.selectIconProps
-          })
-        }), content && typeof content === 'function' ? content({
-          textStyles: notificationComponentRef.current.textStyles.text,
-          variant
-        }) : content]
-      }), dismissible && DismissIconComponent && /*#__PURE__*/_jsx(View, {
-        style: notificationComponentRef.current.dismissButtonContainerStyles.dismissButtonContainer,
-        dataSet: mediaIdsRef && {
-          media: mediaIdsRef.current.dismissButtonContainerIds.dismissButtonContainer
-        },
-        children: /*#__PURE__*/_jsx(IconButton, {
-          action: "close",
-          onPress: onDismissPress,
-          icon: DismissIconComponent,
-          accessibilityRole: "button",
-          accessibilityLabel: getCopy('dismiss'),
-          variant: {
-            inverse: dismissIconColor === '#ffffff',
-            size: 'small'
-          },
-          children: () => /*#__PURE__*/_jsx(DismissIconComponent, {
-            ...notificationComponentRef.current.selectDismissIconPropsStyles.selectDismissIconProps
-          })
-        })
-      })]
-    })
-  });
-});
-Notification.displayName = 'Notification';
-Notification.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Content of the `Notification`.
-   */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
-  /**
-   * Use `system` prop to set the visual style of the notification and denote an announcement from the system or application
-   */
-  system: PropTypes.bool,
-  /**
-   * Use the `dismissible` prop to allow users to dismiss the Notification at any time.
-   */
-  dismissible: PropTypes.bool,
-  /**
-   * Select English or French copy for the accessible label of the dismiss button.
-   */
-  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), PropTypes.shape({
-    dismiss: PropTypes.string
-  })]),
-  /**
-   * Callback function called when the dismiss button is clicked
-   */
-  onDismiss: PropTypes.func,
-  tokens: getTokensPropType('Notification'),
-  variant: variantProp.propType
-};
-export default Notification;

package/lib/OrderedList/OrderedList.js

@@ -1,64 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { htmlAttrs, selectSystemProps, variantProp, viewProps, getTokensPropType } from '../utils';
-import OrderedListBase from './OrderedListBase';
-import Item from './Item';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropsTypes] = selectSystemProps([htmlAttrs, viewProps]);
-const OrderedList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    start = 1,
-    variant = {},
-    tokens = {},
-    ...rest
-  } = _ref;
-  // Pass any variants and tokens "OrderedList" receives down to the individual list items.
-  const childrenWithParentVariants = React.useMemo(() => {
-    const addVariantAndTokensToProps = (child, i, isLastChild) => {
-      var _child$props, _child$props2;
-      const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
-      const existingChildTokens = ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.tokens) ?? {};
-      return /*#__PURE__*/React.cloneElement(child, {
-        index: start + i,
-        isLastChild,
-        variant: {
-          ...existingChildVariants,
-          ...variant
-        },
-        tokens: {
-          ...existingChildTokens,
-          ...tokens
-        }
-      });
-    };
-    if (variant || tokens) {
-      if (Array.isArray(children)) {
-        return children.map((child, i) => addVariantAndTokensToProps(child, i, i === children.length - 1));
-      }
-      return [addVariantAndTokensToProps(children, 0, true)];
-    }
-    return children;
-  }, [children, variant, start, tokens]);
-  return /*#__PURE__*/_jsx(OrderedListBase, {
-    ref: ref,
-    ...selectProps(rest),
-    children: childrenWithParentVariants
-  });
-});
-OrderedList.propTypes = {
-  ...selectedSystemPropsTypes,
-  /**
-   * A list of ordered items wrapped in `OrderedList.Item`.
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * The position to start the list with.
-   */
-  start: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  variant: variantProp.propType,
-  tokens: getTokensPropType('OrderedList')
-};
-OrderedList.displayName = 'OrderedList';
-OrderedList.Item = Item;
-export default OrderedList;

package/lib/Pagination/usePagination.js

@@ -1,78 +0,0 @@
-import { DEFAULT_PAGE_TO_SHOW_VALUE, MIN_PAGES_TO_SHOW, TRUNCATE_ABOVE_VALUE } from './constants';
-/**
- * Handles configurable truncating of pagination items.
- *
- * @param {object} props
- * @param {React.Element[]} items
- * @param {number} truncateAbove
- * @param {number} numberOfPagesBeforeEllipsis
- */
-function usePagination(_ref) {
-  let {
-    items,
-    truncateAbove,
-    numberOfPagesBeforeEllipsis
-  } = _ref;
-  const activeItemIndex = Math.max(items.findIndex(item => item.props.isActive), 0 // default to the first item if none is marked as active
-  );
-  const getItemProps = index => {
-    var _items$index;
-    const {
-      onPress,
-      href,
-      hrefAttrs,
-      variant,
-      tokens
-    } = ((_items$index = items[index]) === null || _items$index === void 0 ? void 0 : _items$index.props) ?? {};
-    return {
-      onPress,
-      href,
-      hrefAttrs,
-      variant,
-      tokens
-    };
-  };
-  let windowSize;
-  if (numberOfPagesBeforeEllipsis >= 1 && numberOfPagesBeforeEllipsis < items.length) {
-    windowSize = numberOfPagesBeforeEllipsis;
-  } else if (truncateAbove > TRUNCATE_ABOVE_VALUE) {
-    windowSize = MIN_PAGES_TO_SHOW;
-  } else {
-    windowSize = DEFAULT_PAGE_TO_SHOW_VALUE;
-  }
-  const truncateEnabled = items.length > windowSize;
-  const truncateWindowStart = windowSize;
-  const truncateWindowEnd = items.length - 1 - windowSize;
-
-  // basically how many items next to the currently active one do we want to render
-  const activeWindowStart = activeItemIndex - (windowSize - 1) / 2;
-  const activeWindowEnd = activeItemIndex + (windowSize - 1) / 2;
-  const isFirstActive = activeItemIndex === 0;
-  const isLastActive = activeItemIndex === items.length - 1;
-
-  // start truncating when the active item is within the truncate window
-  const isLeftTruncated = truncateEnabled && activeItemIndex >= truncateWindowStart;
-  const isRightTruncated = truncateEnabled && activeItemIndex <= truncateWindowEnd;
-  function shouldRenderEllipsis(itemIndex) {
-    const isNextToFirst = itemIndex === 1;
-    const isNextToLast = itemIndex === items.length - 2;
-    return isLeftTruncated && isNextToFirst || isRightTruncated && isNextToLast;
-  }
-  function shouldRenderButton(itemIndex) {
-    const isFirst = itemIndex === 0;
-    const isLast = itemIndex === items.length - 1;
-    const isInActiveWindow = itemIndex >= activeWindowStart && itemIndex <= activeWindowEnd;
-    return isFirst || isLast || isInActiveWindow || !isLeftTruncated && itemIndex <= truncateWindowStart || !isRightTruncated && itemIndex >= truncateWindowEnd;
-  }
-  return {
-    showPrevious: !isFirstActive,
-    showNext: !isLastActive,
-    shouldRenderButton,
-    shouldRenderEllipsis,
-    isItemActive: itemIndex => itemIndex === activeItemIndex,
-    getItemProps,
-    nextItemProps: getItemProps(activeItemIndex + 1),
-    previousItemProps: getItemProps(activeItemIndex - 1)
-  };
-}
-export default usePagination;

package/lib/PriceLockup/utils/renderFootnoteContent.js

@@ -1,85 +0,0 @@
-import React from 'react';
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import View from "react-native-web/dist/exports/View";
-import Text from "react-native-web/dist/exports/Text";
-import Platform from "react-native-web/dist/exports/Platform";
-import renderTypography from './renderTypography';
-import renderFootnoteLinks from './renderFootnoteLinks';
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-const selectFootnoteContainer = _ref => {
-  let {
-    footnoteMarginTop
-  } = _ref;
-  return {
-    marginTop: footnoteMarginTop
-  };
-};
-const selectFootnoteBottomTextContainer = _ref2 => {
-  let {
-    bottomTextMarginTop
-  } = _ref2;
-  return {
-    marginTop: bottomTextMarginTop
-  };
-};
-const selectFootnoteLinksStyles = _ref3 => {
-  let {
-    bottomLinksMarginLeft
-  } = _ref3;
-  return {
-    marginLeft: bottomLinksMarginLeft
-  };
-};
-const renderFootnoteContent = (footnoteMarginTop, bottomTextMarginTop, bottomText, bottomTextTypographyTokens, fontColor, footnoteLinks, bottomLinksMarginLeft, onClickFootnote, themeTokens) => {
-  const MAX_FOOTNOTE_LINKS_ALLOWED = 3;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: [staticStyles.footnoteContainer, selectFootnoteContainer({
-        footnoteMarginTop
-      })],
-      children: [/*#__PURE__*/_jsxs(Text, {
-        style: selectFootnoteBottomTextContainer({
-          bottomTextMarginTop
-        }),
-        children: [renderTypography(bottomText, bottomTextTypographyTokens, undefined, fontColor), ' ']
-      }), (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
-        style: [staticStyles.footnoteLinkContainer, selectFootnoteLinksStyles({
-          bottomLinksMarginLeft
-        })],
-        children: renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)
-      }) : null]
-    }), (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
-      style: staticStyles.verticalFootnoteLinkContainer,
-      children: renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)
-    }) : null]
-  });
-};
-export default renderFootnoteContent;
-const staticStyles = StyleSheet.create({
-  footnoteContainer: {
-    flexDirection: 'row'
-  },
-  footnoteLinkContainer: {
-    flexDirection: 'row',
-    ...Platform.select({
-      ios: {
-        alignSelf: 'flex-end',
-        top: 2
-      },
-      android: {
-        alignSelf: 'center',
-        top: -8
-      }
-    })
-  },
-  verticalFootnoteLinkContainer: {
-    ...Platform.select({
-      ios: {
-        top: 10
-      },
-      android: {
-        top: -2
-      }
-    })
-  }
-});

package/lib/PriceLockup/utils/renderFootnoteLinks.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import FootnoteLink from '../../Footnote/FootnoteLink';
-import { jsx as _jsx } from "react/jsx-runtime";
-const selectFootnoteLinkStyles = (_ref, footnoteLinks) => {
-  let {
-    footnoteLinkColor,
-    footnoteLinkFontName,
-    footnoteLinkFontWeight,
-    footnoteLinkLineHeight,
-    footnoteLinkFontSize
-  } = _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 === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) > MAX_FOOTNOTE_LINKS_ALLOWED ? footnoteLinkFontSize * footnoteLinkLineHeight : undefined;
-  return {
-    color: footnoteLinkColor,
-    fontName: footnoteLinkFontName,
-    fontWeight: footnoteLinkFontWeight,
-    lineHeight,
-    fontSize: footnoteLinkFontSize
-  };
-};
-const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) => (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) > 0 ? /*#__PURE__*/_jsx(FootnoteLink, {
-  tokens: selectFootnoteLinkStyles(themeTokens, footnoteLinks),
-  content: footnoteLinks,
-  onClick: onClickFootnote
-}) : null;
-export default renderFootnoteLinks;