@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/cjs/HorizontalScroll/HorizontalScrollButton.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _utils = require("../utils");
+var _ThemeProvider = require("../ThemeProvider");
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const selectContainerStyles = _ref => {
+  let {
+    offset
+  } = _ref;
+  return {
+    marginTop: offset ? -offset : 0
+  };
+};
+
+/**
+ * Button within a Tabs component showing users that content is available to the left or
+ * right, scrolling a screen's worth of content left or right when pressed.
+ *
+ * This is rendered automatically by `Tabs` and isn't intended be used directly.
+ *
+ * @TODO when IconButton is complete and stable revisit this and update interaction state styles.
+ */
+const HorizontalScrollButton = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    direction = 'next',
+    icon,
+    offset,
+    onPress,
+    variant,
+    tokens,
+    copy
+  } = _ref2;
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('HorizontalScrollButton', tokens, variant);
+  const getCopy = (0, _utils.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: [staticStyles.absolute, staticStyles[direction], selectContainerStyles({
+      offset
+    })],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      accessibilityLabel: label,
+      icon: icon,
+      onPress: onPress,
+      ref: ref,
+      tokens: themeTokens,
+      variant: variant,
+      ..._utils.a11yProps.nonFocusableProps
+    })
+  });
+});
+HorizontalScrollButton.displayName = 'HorizontalScrollButton';
+const staticStyles = _StyleSheet.default.create({
+  absolute: {
+    position: 'absolute'
+  },
+  previous: {
+    left: 0
+  },
+  next: {
+    right: 0
+  }
+});
+HorizontalScrollButton.propTypes = {
+  tokens: (0, _utils.getTokensPropType)('HorizontalScrollButton'),
+  variant: _utils.variantProp.propType,
+  copy: _utils.copyPropTypes,
+  direction: _propTypes.default.oneOf(['previous', 'next']),
+  offset: _propTypes.default.number,
+  icon: _propTypes.default.elementType,
+  onPress: _propTypes.default.func.isRequired
+};
+var _default = exports.default = HorizontalScrollButton;

package/lib/cjs/HorizontalScroll/ScrollViewEnd.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DEBOUNCE_MS = 100;
+
+/**
+ * A wrapper for ScrollView that supports an `onScrollEnd` function.
+ *
+ * React Native Web hasn't got around to implementing any scroll end handlers yet,
+ * so we need to work around it with debouncing on `onScroll`. See:
+ * https://github.com/necolas/react-native-web/issues/1021
+ */
+const ScrollViewEnd = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    onScrollEnd,
+    onScroll = null,
+    ...props
+  } = _ref;
+  // Return debounced function directly from useCallback so it has .cancel method etc.
+  // Linter complains this stops it automatically scanning the deps, but we can check them manually.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debounceScrollEnd = _react.default.useCallback((0, _lodash.default)(event => onScrollEnd(event), DEBOUNCE_MS), [onScrollEnd]);
+
+  // Call any onScroll handler immediately, and any onScrollEnd handler after 100ms of no scrolling
+  const handleScroll = event => {
+    if (typeof onScroll === 'function') onScroll(event);
+    if (typeof onScrollEnd === 'function') debounceScrollEnd(event);
+  };
+
+  // Cancel any lingering debounce timeouts on dismount
+  _react.default.useEffect(() => debounceScrollEnd.cancel);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+    ref: ref,
+    ...props,
+    onScroll: handleScroll,
+    scrollEventThrottle: DEBOUNCE_MS / 2
+  });
+});
+ScrollViewEnd.displayName = 'ScrollViewEnd';
+ScrollViewEnd.propTypes = {
+  onScrollEnd: _propTypes.default.func.isRequired,
+  onScroll: _propTypes.default.func
+};
+var _default = exports.default = ScrollViewEnd;

package/lib/cjs/HorizontalScroll/ScrollViewEnd.native.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * A wrapper for ScrollView that supports an `onScrollEnd` function.
+ *
+ * React Native has two scroll end handlers, we want to treat them both the same.
+ */const ScrollViewEnd = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    onScrollEnd,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+    ref: ref,
+    ...props,
+    onScrollEndDrag: onScrollEnd,
+    onMomentumScrollEnd: onScrollEnd
+  });
+});
+ScrollViewEnd.displayName = 'ScrollViewEnd';
+ScrollViewEnd.propTypes = {
+  onScrollEnd: _propTypes.default.func.isRequired
+};
+var _default = exports.default = ScrollViewEnd;

package/lib/cjs/HorizontalScroll/dictionary.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  en: {
+    // English text from TDS Community `Tabs`
+    previousLabel: 'Move menu to the left',
+    nextLabel: 'Move menu to the right'
+  },
+  fr: {
+    previousLabel: 'Déplacer le menu vers la gauche',
+    nextLabel: 'Déplacer le menu vers la droite'
+  }
+};

package/lib/cjs/HorizontalScroll/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "HorizontalScrollButton", {
+  enumerable: true,
+  get: function () {
+    return _HorizontalScrollButton.default;
+  }
+});
+exports.horizontalScrollUtils = exports.default = void 0;
+var _HorizontalScroll = _interopRequireWildcard(require("./HorizontalScroll"));
+var _itemPositions = require("./itemPositions");
+var _HorizontalScrollButton = _interopRequireDefault(require("./HorizontalScrollButton"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _default = exports.default = _HorizontalScroll.default;
+const horizontalScrollUtils = exports.horizontalScrollUtils = {
+  selectHorizontalScrollTokens: _HorizontalScroll.selectHorizontalScrollTokens,
+  useItemPositions: _itemPositions.useItemPositions,
+  getItemPositionScrollTarget: _itemPositions.getItemPositionScrollTarget,
+  getItemPositionLayoutHandler: _itemPositions.getItemPositionLayoutHandler,
+  itemPositionsPropType: _itemPositions.itemPositionsPropType
+};

package/lib/cjs/HorizontalScroll/itemPositions.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useItemPositions = exports.itemPositionsPropType = exports.getItemPositionScrollTarget = exports.getItemPositionLayoutHandler = void 0;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Utilities to assist scrolling a parent so that it snaps neatly to an appropriate child.
+
+/**
+ * @typedef ItemPositionPosition
+ * @property {number} [ItemPositionItem.start] - optional theme scale variants e.g. compact, wide
+ * @property {number} [ItemPositionItem.end] - optional override to force a particular pixel size
+ *
+ * @typedef {Object.<number, ItemPositionItem>} ItemPositionPositions - ref object of start/end coordinates
+ *
+ * @typedef ItemPositions
+ * @property {number} ItemPositions.contentWidth - current width of potentially-overflowing content inside scrollable
+ * @property {number} ItemPositions.containerWidth - current width of non-overflowing outer scroll container
+ * @property {number} ItemPositions.scrollOffset - current x position of the left edge of the visible section of the scrollable content
+ * @property {ItemPositionPositions} ItemPositions.positions - `{ start, end }` coordinates of each scrollable content item, by index
+ * @property {(targetX: number) => void)} ItemPositions.scrollTo - function to scroll to a co-ordinate, applying scrolling logic
+ * @property {() => void)} ItemPositions.setIsReady - function to call when layout has been calculated and itemPositions data is ready
+ */
+
+/**
+ * Takes a desired scroll target coordinate and returns a valid coordinate
+ * that, when not scrolling to one end or another, snaps to the start of an item,
+ * making sure any "scroll back" button doesn't overlap the first item.
+ *
+ * @param {number} x - the intended coordinate to scroll to
+ * @param {number} scrollMax - the highest posible coordinate to scroll to
+ * @param {ItemPositionPositions} positions - positions list from `useItemPositions` ref
+ * @param {number} [buttonClearance] - offset to allow space for a button
+ * @returns {number}
+ */
+const getItemPositionScrollTarget = function (x, scrollMax, positions) {
+  let buttonClearance = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  if (x <= 0) return 0;
+  if (x >= scrollMax) return scrollMax;
+
+  // If not scrolling all the way to the start or end, stop
+  // where the first item is not coverred by the scroll previous button
+  const targetItem = Object.values(positions).find(_ref => {
+    let {
+      start,
+      end
+    } = _ref;
+    return start <= x && end > x;
+  });
+
+  // If there's no target item we're landing at a gap between items
+  const targetX = targetItem ? targetItem.start : x;
+  return Math.max(0, targetX - buttonClearance);
+};
+
+/**
+ * Returns a handler for React Native's `onLayout` which updates the values of
+ * the ref object returned from `useItemPositions`.
+ *
+ * @param {ItemPositionPositions} positions
+ * @param {number} index
+ * @returns {function}
+ */
+exports.getItemPositionScrollTarget = getItemPositionScrollTarget;
+const getItemPositionLayoutHandler = (positions, index) => {
+  const handleLayout = _ref2 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width,
+          x
+        }
+      }
+    } = _ref2;
+    /* eslint-disable-next-line no-param-reassign */
+    positions[index] = {
+      start: x,
+      end: x + width
+    };
+  };
+  return handleLayout;
+};
+
+/**
+ * Wrapper for `useRef` which gives a mutable object in which item start/end coordinates,
+ * scrollTo method and content/container widths may be set and updated without causing a re-render.
+ *
+ * @returns {[ItemPositions, isReady: bool]} tuple array of:
+ *  - current ref object `{ positions, contentWidth, containerWidth, scrollOffset, scrollTo, setIsReady }`
+ *  - boolean that updates to `true` (causing a re-render) after the first time `setIsReady` is called
+ */
+exports.getItemPositionLayoutHandler = getItemPositionLayoutHandler;
+const useItemPositions = () => {
+  const [isReady, setIsReady] = (0, _react.useState)(false);
+  return [(0, _react.useRef)({
+    positions: {},
+    scrollTo: () => {},
+    contentWidth: 0,
+    containerWidth: 0,
+    scrollOffset: 0,
+    setIsReady
+  }).current, isReady];
+};
+
+/**
+ * PropType for the ref object returned by `useItemPositions`
+ */
+exports.useItemPositions = useItemPositions;
+const itemPositionsPropType = exports.itemPositionsPropType = _propTypes.default.exact({
+  positions: _propTypes.default.objectOf(_propTypes.default.shape({
+    start: _propTypes.default.number,
+    end: _propTypes.default.number
+  })),
+  scrollTo: _propTypes.default.func,
+  contentWidth: _propTypes.default.number,
+  containerWidth: _propTypes.default.number,
+  scrollOffset: _propTypes.default.number,
+  setIsReady: _propTypes.default.func
+});

package/lib/cjs/Icon/Icon.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.iconComponentPropTypes = exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    icon: IconComponent,
+    accessibilityLabel,
+    variant,
+    tokens,
+    scalesWithText = false,
+    style = {},
+    dataSet
+  } = _ref;
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Icon', tokens, variant);
+  const size = scalesWithText ? (0, _utils.scaleWithText)(themeTokens.size) : themeTokens.size;
+  const iconContent = /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: {
+          backgroundColor: themeTokens.backgroundColor,
+          borderRadius: themeTokens.borderRadius,
+          ...paddingStyles
+        },
+        children: iconContent
+      });
+    }
+    return iconContent;
+  };
+  return _Platform.default.OS === 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref
+    // eslint-disable-next-line react-native/no-inline-styles
+    ,
+    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';
+const iconComponentPropTypes = exports.iconComponentPropTypes = {
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('Icon'),
+  /**
+   * Descriptive label used in web SVG title tag for accessibility
+   */
+  accessibilityLabel: _propTypes.default.string,
+  /**
+   * controls whether the icon size should be proportionate to any accessibility-related font scaling.
+   */
+  scalesWithText: _propTypes.default.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.default.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.default.elementType.isRequired
+};
+var _default = exports.default = Icon;

package/lib/cjs/Icon/IconText.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Icon = _interopRequireWildcard(require("./Icon"));
+var _StackView = require("../StackView");
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 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'`
+ */const IconText = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    space,
+    iconPosition = 'left',
+    icon: IconComponent,
+    iconProps,
+    children
+  } = _ref;
+  const iconContent = IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    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__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: {
+      transform: [{
+        translateY: valueTranslateY ? size * 0.2 : size * 0.01
+      }]
+    },
+    children: iconContent
+  });
+  const iconAdjustedIOS = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: {
+      transform: [{
+        translateY: valueTranslateY ? resultY : size * 0.01
+      }]
+    },
+    children: iconContent
+  });
+  const mobile = _Platform.default.OS === 'android' ? iconAdjustedAndroid : iconAdjustedIOS;
+  const adjustedContainer = _Platform.default.OS === 'web' ? iconContent : mobile;
+  const adjustedContainerWithPosition = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: staticStyles.adjustedContainer,
+    children: adjustedContainer
+  });
+  if (iconPosition === 'inline') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
+      children: [children, " ", adjustedContainerWithPosition]
+    });
+  }
+  return (0, _StackView.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: _utils.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.default.oneOf(['left', 'right', 'inline']),
+  /**
+   * A valid UDS icon component imported from a UDS palette.
+   */
+  icon: _propTypes.default.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.default.exact(_Icon.iconComponentPropTypes),
+  /**
+   * Content to be rendered alongside the Icon component. Usually this should be a
+   * `<Typography>` component, or a component that renders `<Text>`.
+   */
+  children: _propTypes.default.node
+  /* eslint-enable react/no-unused-prop-types */
+};
+const staticStyles = _StyleSheet.default.create({
+  adjustedContainer: {
+    position: 'absolute'
+  }
+});
+var _default = exports.default = IconText;

package/lib/cjs/Icon/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "IconText", {
+  enumerable: true,
+  get: function () {
+    return _IconText.default;
+  }
+});
+exports.default = void 0;
+Object.defineProperty(exports, "iconComponentPropTypes", {
+  enumerable: true,
+  get: function () {
+    return _Icon.iconComponentPropTypes;
+  }
+});
+var _Icon = _interopRequireWildcard(require("./Icon"));
+var _IconText = _interopRequireDefault(require("./IconText"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _default = exports.default = _Icon.default;