@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/Footnote/Footnote.js

@@ -1,316 +0,0 @@
-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 === null || themeTokens === void 0 ? void 0 : themeTokens.headerFontSize,
-                  lineHeight: themeTokens === null || themeTokens === void 0 ? void 0 : 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 === null || themeTokens === void 0 ? void 0 : themeTokens.closeIcon,
-                    tokens: {
-                      size: themeTokens === null || themeTokens === void 0 ? void 0 : 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/HorizontalScroll/HorizontalScroll.js

@@ -1,168 +0,0 @@
-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 => {
-    var _scrollRef$current;
-    if (typeof ((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _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/Icon/Icon.js

@@ -1,94 +0,0 @@
-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 !== 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__*/_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/Icon/IconText.js

@@ -1,111 +0,0 @@
-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) => {
-  var _iconProps$tokens, _iconProps$tokens2;
-  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 === null || iconProps === void 0 || (_iconProps$tokens = iconProps.tokens) === null || _iconProps$tokens === void 0 ? void 0 : _iconProps$tokens.size) ?? 0;
-  const valueTranslateY = iconProps === null || iconProps === void 0 || (_iconProps$tokens2 = iconProps.tokens) === null || _iconProps$tokens2 === void 0 ? void 0 : _iconProps$tokens2.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;