@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/esm/Notification/Notification.js

@@ -0,0 +1,430 @@
+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?.containerPaddingRight,
+  paddingLeft: themeTokens?.containerPaddingLeft
+});
+const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, system) => {
+  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?.contentMaxWidth?.xs || '100%'
+        },
+        md: {
+          maxWidth: themeOptions?.contentMaxWidth?.md || '100%'
+        },
+        lg: {
+          maxWidth: themeOptions?.contentMaxWidth?.lg || '100%'
+        },
+        sm: {
+          maxWidth: themeOptions?.contentMaxWidth?.sm || '100%'
+        },
+        xl: {
+          maxWidth: themeOptions?.contentMaxWidth?.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) => {
+  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?.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?.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?.();
+  };
+  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/esm/OrderedList/OrderedList.js

@@ -0,0 +1,63 @@
+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) => {
+      const existingChildVariants = child.props?.variant ?? {};
+      const existingChildTokens = child.props?.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/esm/Pagination/usePagination.js

@@ -0,0 +1,77 @@
+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 => {
+    const {
+      onPress,
+      href,
+      hrefAttrs,
+      variant,
+      tokens
+    } = 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/esm/PriceLockup/utils/renderFootnoteContent.js

@@ -0,0 +1,85 @@
+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?.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
+        style: [staticStyles.footnoteLinkContainer, selectFootnoteLinksStyles({
+          bottomLinksMarginLeft
+        })],
+        children: renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)
+      }) : null]
+    }), 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/esm/PriceLockup/utils/renderFootnoteLinks.js

@@ -0,0 +1,28 @@
+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?.length > MAX_FOOTNOTE_LINKS_ALLOWED ? footnoteLinkFontSize * footnoteLinkLineHeight : undefined;
+  return {
+    color: footnoteLinkColor,
+    fontName: footnoteLinkFontName,
+    fontWeight: footnoteLinkFontWeight,
+    lineHeight,
+    fontSize: footnoteLinkFontSize
+  };
+};
+const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) => footnoteLinks?.length > 0 ? /*#__PURE__*/_jsx(FootnoteLink, {
+  tokens: selectFootnoteLinkStyles(themeTokens, footnoteLinks),
+  content: footnoteLinks,
+  onClick: onClickFootnote
+}) : null;
+export default renderFootnoteLinks;