@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/esm/Footnote/Footnote.js

@@ -0,0 +1,316 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Text from "react-native-web/dist/exports/Text";
+import Dimensions from "react-native-web/dist/exports/Dimensions";
+import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWithoutFeedback";
+import Modal from "react-native-web/dist/exports/Modal";
+import View from "react-native-web/dist/exports/View";
+import SafeAreaView from "react-native-web/dist/exports/SafeAreaView";
+import ScrollView from "react-native-web/dist/exports/ScrollView";
+import defaultDictionary from './dictionary';
+import { getTokensPropType, htmlAttrs, selectSystemProps, useCopy, viewProps } from '../utils';
+import { useViewport } from '../ViewportProvider';
+import { useTheme, useThemeTokens } from '../ThemeProvider';
+import Typography from '../Typography';
+import Icon from '../Icon';
+import OrderedList from '../OrderedList';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
+const selectFootnoteStyle = _ref => {
+  let {
+    screenHeight,
+    footnoteBackground,
+    isVisible,
+    footnoteBorderTopSizeMd,
+    footnoteBorderColorMd
+  } = _ref;
+  return {
+    left: 0,
+    backgroundColor: footnoteBackground,
+    display: isVisible ? 'flex' : 'none',
+    height: screenHeight,
+    borderTopColor: footnoteBorderColorMd,
+    borderTopWidth: footnoteBorderTopSizeMd
+  };
+};
+const selectFootnoteHeaderContentStyle = _ref2 => {
+  let {
+    footnoteHeaderPaddingTop,
+    footnoteHeaderPaddingBottom,
+    footnoteHeaderPaddingRight,
+    footnoteHeaderPaddingLeft,
+    headerMargin
+  } = _ref2;
+  return {
+    paddingTop: footnoteHeaderPaddingTop,
+    paddingBottom: footnoteHeaderPaddingBottom,
+    paddingRight: footnoteHeaderPaddingRight,
+    paddingLeft: footnoteHeaderPaddingLeft,
+    marginRight: headerMargin
+  };
+};
+const selectFootnoteCloseButtonStyle = _ref3 => {
+  let {
+    closeButtonBorderSize,
+    closeButtonBorderColor,
+    closeButtonHeight,
+    closeButtonBackgroundColor,
+    closeButtonMarginTop,
+    closeButtonMarginRight,
+    closeButtonMarginBottom,
+    closeButtonMarginLeft,
+    closeButtonWidth
+  } = _ref3;
+  return {
+    backgroundColor: closeButtonBackgroundColor,
+    borderWidth: closeButtonBorderSize,
+    borderColor: closeButtonBorderColor,
+    height: closeButtonHeight,
+    marginTop: closeButtonMarginTop,
+    marginRight: closeButtonMarginRight,
+    marginBottom: closeButtonMarginBottom,
+    marginLeft: closeButtonMarginLeft,
+    width: closeButtonWidth
+  };
+};
+const selectFootnoteBodyStyle = _ref4 => {
+  let {
+    maxWidth,
+    footnoteBodyBackground,
+    footnoteBodyPaddingTop,
+    footnoteBodyPaddingRight,
+    footnoteBodyPaddingBottom,
+    footnoteBodyPaddingLeft,
+    screenWidth
+  } = _ref4;
+  return {
+    maxWidth,
+    backgroundColor: footnoteBodyBackground,
+    paddingTop: footnoteBodyPaddingTop,
+    paddingRight: footnoteBodyPaddingRight * 2,
+    paddingBottom: footnoteBodyPaddingBottom,
+    paddingLeft: footnoteBodyPaddingLeft,
+    width: screenWidth
+  };
+};
+const selectCustomContentFontStyle = _ref5 => {
+  let {
+    listItemColor,
+    listItemFontSize,
+    listItemLineHeight,
+    listItemPaddingLeft,
+    listItemFontName,
+    listItemFontWeight
+  } = _ref5;
+  return {
+    fontSize: listItemFontSize,
+    lineHeight: listItemLineHeight * listItemFontSize,
+    paddingLeft: listItemPaddingLeft,
+    color: listItemColor,
+    fontName: listItemFontName,
+    fontWeight: listItemFontWeight
+  };
+};
+
+/**
+ * Use `Footnote` to display a single legal content.
+ *
+ * ## Usage Criteria
+ *
+ * - Use `Footnote` to display a single legal statement
+ * - Display on top of all UI, including other sticky elements such as Cart Summary
+ * - Dismiss by clicking on the close button, clicking anywhere outside of the `Footnote`
+ * - Use copy to set language, ‘en’ for English or ‘fr’ for French
+ *
+ * ## Accessibility requirements
+ *
+ * - Only one instance of `Footnote` should display at a time
+ * - Place `Footnote` as the last element in the body or main
+ * - When `Footnote` is open, the inert prop must be set on all children of body excluding the Footnote
+ * - When `Footnote` is closed, focus must return to the initiating element
+ */
+const Footnote = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  let {
+    copy = 'en',
+    number = undefined,
+    content = undefined,
+    onClose,
+    isOpen = false,
+    tokens,
+    variant = {},
+    dictionary = defaultDictionary,
+    ...rest
+  } = _ref6;
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Footnote', tokens, variant, {
+    viewport
+  });
+  const themeOptions = useTheme();
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const [isVisible, setIsVisible] = React.useState(false);
+  const screenHeight = Dimensions.get('screen').height;
+  const screenWidth = Dimensions.get('screen').width;
+  const getFootnoteBodyContent = React.useCallback(() => {
+    if (!number || !content) {
+      return null;
+    }
+    if (/*#__PURE__*/React.isValidElement(content)) {
+      return /*#__PURE__*/_jsx(View, {
+        style: selectCustomContentFontStyle(themeTokens),
+        children: content
+      });
+    }
+    return /*#__PURE__*/_jsx(OrderedList, {
+      start: number,
+      children: /*#__PURE__*/_jsx(OrderedList.Item, {
+        children: /*#__PURE__*/_jsx(Text, {
+          style: selectCustomContentFontStyle(themeTokens),
+          children: content
+        })
+      }, number)
+    });
+  }, [content, number, themeTokens]);
+  React.useEffect(() => {
+    if (isOpen) {
+      setIsVisible(true);
+    }
+  }, [isOpen]);
+  const closeFootnote = React.useCallback((event, options) => {
+    onClose(event, options);
+    setIsVisible(false);
+  }, [onClose]);
+  const handleClose = event => closeFootnote(event, {
+    returnFocus: true
+  });
+  return /*#__PURE__*/_jsx(View, {
+    ...selectProps(rest),
+    ref: ref,
+    children: /*#__PURE__*/_jsx(Modal, {
+      visible: isVisible,
+      animationType: "slide",
+      children: /*#__PURE__*/_jsx(SafeAreaView, {
+        style: staticStyles.container,
+        children: /*#__PURE__*/_jsx(ScrollView, {
+          style: selectFootnoteStyle({
+            screenHeight,
+            isVisible,
+            ...themeTokens
+          }),
+          children: /*#__PURE__*/_jsxs(View, {
+            style: staticStyles.content,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: [selectFootnoteHeaderContentStyle(themeTokens), staticStyles.headerContent],
+              children: [/*#__PURE__*/_jsx(Typography, {
+                tokens: {
+                  fontSize: themeTokens?.headerFontSize,
+                  lineHeight: themeTokens?.headerLineHeight
+                },
+                variant: {
+                  size: 'h4'
+                },
+                children: getCopy('heading')
+              }), /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
+                onPress: handleClose,
+                accessibilityLabel: getCopy('close'),
+                children: /*#__PURE__*/_jsx(View, {
+                  style: [selectFootnoteCloseButtonStyle(themeTokens), staticStyles.closeButton],
+                  children: /*#__PURE__*/_jsx(Icon, {
+                    icon: themeTokens?.closeIcon,
+                    tokens: {
+                      size: themeTokens?.closeButtonIconSize
+                    }
+                  })
+                })
+              })]
+            }), /*#__PURE__*/_jsx(View, {
+              style: selectFootnoteBodyStyle({
+                maxWidth: themeOptions.contentMaxWidth,
+                screenWidth,
+                ...themeTokens
+              }),
+              children: getFootnoteBodyContent()
+            })]
+          })
+        })
+      })
+    })
+  });
+});
+Footnote.displayName = 'Footnote';
+const copyShape = PropTypes.shape({
+  close: PropTypes.string.isRequired,
+  heading: PropTypes.string.isRequired
+});
+
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = PropTypes.shape({
+  a11yLabel: PropTypes.string.isRequired,
+  close: PropTypes.string.isRequired,
+  heading: PropTypes.string.isRequired
+});
+Footnote.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Footnote'),
+  /**
+   * The content.
+   */
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  /**
+   * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
+   * To provide your own, pass a JSON object with the keys `heading` and `close`.
+   */
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), copyShape]),
+  /**
+   * A boolean flag used hide or show the `Footnote`. Set to `true` to open the `Footnote`.
+   */
+  isOpen: PropTypes.bool,
+  /**
+   * The number, must match the number of the `FootnoteLink` that initiated the `Footnote`.
+   */
+  number: PropTypes.number,
+  /**
+   * A callback function to handle the closing of the footnote.
+   *
+   * @param {SyntheticEvent} event The React `SyntheticEvent`
+   * @param {Object} options Custom options
+   * @param {boolean} options.returnFocus Should the `Footnote` return focus on close
+   */
+  onClose: PropTypes.func.isRequired,
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  })
+};
+export default Footnote;
+const staticStyles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  content: {
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    left: 0,
+    right: 0,
+    maxWidth: 1200,
+    paddingBottom: 100
+  },
+  headerContent: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  closeButton: {
+    alignItems: 'center',
+    borderRadius: 50,
+    display: 'flex',
+    justifyContent: 'center'
+  }
+});

package/lib/esm/HorizontalScroll/HorizontalScroll.js

@@ -0,0 +1,167 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import { validateThemeTokens, resolveThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensSetPropType, selectSystemProps, selectTokens, viewProps } from '../utils';
+import ScrollViewEnd from './ScrollViewEnd';
+import { getItemPositionScrollTarget, itemPositionsPropType } from './itemPositions';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const tokenKeys = ['nextIcon', 'previousIcon', 'gutter', 'borderBottomWidth', 'borderBottomColor', 'buttonClearance'];
+export const selectHorizontalScrollTokens = (themeTokens, prefix) => selectTokens(tokenKeys, themeTokens, prefix);
+const selectBorderStyles = (borderBottomWidth, borderBottomColor) => ({
+  borderBottomWidth,
+  borderBottomColor
+});
+
+/**
+ * Base component that scrolls horizontally and displays left and right buttons if
+ * there is content to the left and the right which can be scrolled to.
+ *
+ * @TODO revisit `ScrollButton` after IconButton is stable.
+ */
+const HorizontalScroll = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    ScrollButton,
+    tokens,
+    itemPositions,
+    children,
+    ...rest
+  } = _ref;
+  const {
+    nextIcon,
+    previousIcon,
+    gutter,
+    borderBottomWidth,
+    borderBottomColor,
+    buttonClearance = 0
+  } = validateThemeTokens(resolveThemeTokens(tokens),
+  // Allow missing icons
+  getTokensSetPropType(tokenKeys, {
+    partial: true
+  }), 'HorizontalScroll');
+  const [containerWidth, setContainerWidth] = React.useState(0);
+  const [contentWidth, setContentWidth] = React.useState(0);
+  const handleContentWidth = width => setContentWidth(width);
+  const handleContainerLayout = _ref2 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width
+        }
+      }
+    } = _ref2;
+    return setContainerWidth(width);
+  };
+
+  // Update the scroll position only when scrolling actions ends to minimally rerender
+  // and update which buttons are conditionally rendered.
+  const [scrollOffset, setScrollOffset] = React.useState(0);
+  const handleScrollEnd = _ref3 => {
+    let {
+      nativeEvent: {
+        contentOffset: {
+          x
+        }
+      }
+    } = _ref3;
+    setScrollOffset(x);
+  };
+  const scrollMax = Math.max(0, contentWidth - containerWidth);
+  const showNextButton = scrollOffset < scrollMax;
+  const showPreviousButton = scrollOffset > 0;
+  const scrollRef = React.useRef(null);
+  const scrollTo = targetX => {
+    if (typeof scrollRef.current?.scrollTo === 'function') {
+      const x = getItemPositionScrollTarget(targetX, scrollMax, itemPositions.positions, buttonClearance);
+      scrollRef.current.scrollTo({
+        x,
+        animated: true
+      });
+      if (Platform.OS === 'android') {
+        // React Native calls onScrollMomentumEnd after scrollTo for iOS, but not Android.
+        // See https://github.com/facebook/react-native/issues/26661
+        // There's also no callback for when scrollTo finishes.
+        setTimeout(() => setScrollOffset(x), 300);
+      }
+    }
+  };
+  // Make scrollTo and relevant co-ordinates available to any component with an interest in itemPositions.
+  // ItemPositions is a mutable ref object intended to have its properties mutated without any rerenders.
+  /* eslint-disable-next-line no-param-reassign */
+  itemPositions.scrollTo = scrollTo;
+  /* eslint-disable-next-line no-param-reassign */
+  itemPositions.containerWidth = containerWidth;
+  /* eslint-disable-next-line no-param-reassign */
+  itemPositions.contentWidth = contentWidth;
+  /* eslint-disable-next-line no-param-reassign */
+  itemPositions.scrollOffset = scrollOffset;
+  const hasWidths = itemPositions.contentWidth > 0;
+  React.useEffect(() => {
+    if (hasWidths) itemPositions.setIsReady(true);
+    // itemPositions is a ref object so this should occur only when elements' widths are set in state
+  }, [hasWidths, itemPositions]);
+
+  // When scrolling, allow clearance around scroll buttons, so e.g. this...
+  // (<-) Item 5   Item 6   Item 7   Item 8   It(->)
+  // ...doesn't scroll like this with Item 9 never being properly visible:
+  // (<-)em 9   Item 10  Item 11  Item 12  Item (->)
+  const scrollDistance = containerWidth - buttonClearance * 2;
+  const scrollNext = () => scrollTo(scrollOffset + scrollDistance);
+  const scrollPrevious = () => scrollTo(scrollOffset - scrollDistance);
+
+  // On Web, being scrollable in one direction prevents overflow: visible in the other direction.
+  // Apply a fixed margin gutter that tab highlight effects can overhang without getting trimmed.
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: staticStyles.container,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: selectBorderStyles(borderBottomWidth, borderBottomColor),
+      children: /*#__PURE__*/_jsx(ScrollViewEnd, {
+        onScrollEnd: handleScrollEnd,
+        ref: scrollRef,
+        horizontal: true,
+        onContentSizeChange: handleContentWidth,
+        onLayout: handleContainerLayout,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: staticStyles.scrollContainer,
+        ...selectProps(rest),
+        children: children
+      })
+    }), showPreviousButton && /*#__PURE__*/_jsx(ScrollButton, {
+      icon: previousIcon,
+      onPress: scrollPrevious,
+      offset: gutter,
+      direction: "previous"
+    }), showNextButton && /*#__PURE__*/_jsx(ScrollButton, {
+      icon: nextIcon,
+      onPress: scrollNext,
+      offset: gutter,
+      direction: "next"
+    })]
+  });
+});
+HorizontalScroll.displayName = 'HorizontalScroll';
+const staticStyles = StyleSheet.create({
+  scrollContainer: {
+    // Gives inner container width from content, allowing it to exceed its container's width
+    alignSelf: 'flex-start',
+    flexGrow: 1
+  },
+  container: {
+    // Vertically center the ScrollButtons buttons
+    justifyContent: 'center'
+  }
+});
+HorizontalScroll.propTypes = {
+  ...selectedSystemPropTypes,
+  itemPositions: itemPositionsPropType,
+  ScrollButton: PropTypes.elementType,
+  tokens: getTokensSetPropType(tokenKeys, {
+    allowFunction: true
+  }),
+  children: PropTypes.node
+};
+export default HorizontalScroll;

package/lib/esm/Icon/Icon.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import { useThemeTokens } from '../ThemeProvider';
+import { getTokensPropType, scaleWithText, variantProp } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    icon: IconComponent,
+    accessibilityLabel,
+    variant,
+    tokens,
+    scalesWithText = false,
+    style = {},
+    dataSet
+  } = _ref;
+  const themeTokens = useThemeTokens('Icon', tokens, variant);
+  const size = scalesWithText ? scaleWithText(themeTokens.size) : themeTokens.size;
+  const iconContent = /*#__PURE__*/_jsx(IconComponent, {
+    title: accessibilityLabel,
+    size: size,
+    color: themeTokens.color
+  });
+  const paddingStyles = 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__*/_jsx(View, {
+        style: {
+          backgroundColor: themeTokens.backgroundColor,
+          borderRadius: themeTokens.borderRadius,
+          ...paddingStyles
+        },
+        children: iconContent
+      });
+    }
+    return iconContent;
+  };
+  return Platform.OS === 'web' ? /*#__PURE__*/_jsx(View, {
+    ref: ref
+    // eslint-disable-next-line react-native/no-inline-styles
+    ,
+    style: {
+      // TODO: systematise animations.
+      // 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,
+      backgroundColor: themeTokens.backgroundColor,
+      borderRadius: themeTokens.borderRadius,
+      paddingTop: themeTokens.paddingTop,
+      ...paddingStyles
+    },
+    dataSet: dataSet,
+    children: iconContent
+  }) : getIconContentForMobile();
+});
+Icon.displayName = 'Icon';
+export const iconComponentPropTypes = {
+  variant: variantProp.propType,
+  tokens: getTokensPropType('Icon'),
+  /**
+   * Descriptive label used in web SVG title tag for accessibility
+   */
+  accessibilityLabel: PropTypes.string,
+  /**
+   * controls whether the icon size should be proportionate to any accessibility-related font scaling.
+   */
+  scalesWithText: PropTypes.bool,
+  /**
+   * Custom style object to be applied to the icon component.
+   * This is useful for overriding the default icon style but for cases where desires styles are not available as tokens.
+   *
+   * Note: This prop is only used in web.
+   *
+   * @example
+   * <Icon style={{ color: 'red' }}
+   */
+  style: PropTypes.object
+};
+Icon.propTypes = {
+  ...iconComponentPropTypes,
+  /**
+   * A valid UDS icon component imported from a UDS palette
+   * (e.g.) `import { MyIcon } from @telus-uds/palette-<brand>/build/web/icons`
+   */
+  icon: PropTypes.elementType.isRequired
+};
+export default Icon;

package/lib/esm/Icon/IconText.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import View from "react-native-web/dist/exports/View";
+import Text from "react-native-web/dist/exports/Text";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Icon, { iconComponentPropTypes } from './Icon';
+import { getStackedContent } from '../StackView';
+import { spacingProps } from '../utils';
+
+/**
+ * Returns an icon and some text with a sized gap between them. This is a utility component
+ * intended for use when creating components, not intended for use in applications on its own.
+ *
+ * IconText does not wrap its children, so should be used either:
+ *  - inline within a <Text> element
+ *  - within a container with `flexDirection: 'row'`
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const IconText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    space,
+    iconPosition = 'left',
+    icon: IconComponent,
+    iconProps,
+    children
+  } = _ref;
+  const iconContent = IconComponent && /*#__PURE__*/_jsx(Icon, {
+    ref: ref,
+    icon: IconComponent,
+    scalesWithText: true,
+    ...iconProps
+  });
+
+  // Inline images on Android are always baseline-aligned which makes them look misaligned - offset it.
+  // See abandoned issue https://github.com/facebook/react-native/issues/6529
+  const size = iconProps?.tokens?.size ?? 0;
+  const valueTranslateY = iconProps?.tokens?.translateY;
+  /**
+   * These calculations were carried out using a set of linear equations to calculate that the
+   * position of the icon "->"" is aligned to the first line of the tooltip text on IOS and Android.
+   * The issue was mainly on IOS, the translateY style didn't match with the old calculations.
+   */
+  const resultY = valueTranslateY ? Math.floor(-1 * (valueTranslateY - 4)) : 0;
+  const iconAdjustedAndroid = /*#__PURE__*/_jsx(View, {
+    style: {
+      transform: [{
+        translateY: valueTranslateY ? size * 0.2 : size * 0.01
+      }]
+    },
+    children: iconContent
+  });
+  const iconAdjustedIOS = /*#__PURE__*/_jsx(View, {
+    style: {
+      transform: [{
+        translateY: valueTranslateY ? resultY : size * 0.01
+      }]
+    },
+    children: iconContent
+  });
+  const mobile = Platform.OS === 'android' ? iconAdjustedAndroid : iconAdjustedIOS;
+  const adjustedContainer = Platform.OS === 'web' ? iconContent : mobile;
+  const adjustedContainerWithPosition = /*#__PURE__*/_jsx(View, {
+    style: staticStyles.adjustedContainer,
+    children: adjustedContainer
+  });
+  if (iconPosition === 'inline') {
+    return /*#__PURE__*/_jsxs(Text, {
+      children: [children, " ", adjustedContainerWithPosition]
+    });
+  }
+  return getStackedContent(iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer], {
+    space,
+    direction: 'row'
+  });
+});
+IconText.displayName = 'IconText';
+IconText.propTypes = {
+  /**
+   * Amount of space to separate the text content and icon. Uses the themes's spacing scale
+   * (see useSpacingScale for more info).
+   */
+  space: spacingProps.types.spacingValue,
+  /**
+   * Whether the icon should be to the left of the content, the right of the content or inline with the content.
+   */
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
+  /**
+   * A valid UDS icon component imported from a UDS palette.
+   */
+  icon: PropTypes.elementType,
+  /**
+   * Props that will be passed to the icon component. By default the icon's `scalesWithText`
+   * prop will be set as "true" so that the icon continues to match the size of the text
+   * if users use accessibility settings to increase text size.
+   */
+  iconProps: PropTypes.exact(iconComponentPropTypes),
+  /**
+   * Content to be rendered alongside the Icon component. Usually this should be a
+   * `<Typography>` component, or a component that renders `<Text>`.
+   */
+  children: PropTypes.node
+  /* eslint-enable react/no-unused-prop-types */
+};
+const staticStyles = StyleSheet.create({
+  adjustedContainer: {
+    position: 'absolute'
+  }
+});
+export default IconText;