@telus-uds/components-base 1.15.0 → 1.17.0

package/lib-module/List/List.js

@@ -2,15 +2,23 @@ import React, { cloneElement, forwardRef, Children } 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 { a11yProps, componentPropType, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
-import ListItem from './ListItem';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
+const isListItem = element => {
+  var _element$type, _element$type2;
+
+  const elementName = (element === null || element === void 0 ? void 0 : (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type.displayName) || (element === null || element === void 0 ? void 0 : (_element$type2 = element.type) === null || _element$type2 === void 0 ? void 0 : _element$type2.name); // Match our own ListItem, and also, custom list items
+
+  return Boolean(elementName.match(/Item/));
+};
 /**
  * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
 
+
 const List = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
@@ -24,12 +32,8 @@ const List = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...rest
   } = _ref;
   const items = Children.map(children, (child, index) => {
-    var _child$type, _child$type2;
-
     // Pass ListItem-specific props to children (by name so teams can add their own ListItems)
-    const isListItem = componentName => Boolean(componentName === ListItem.displayName);
-
-    if (isListItem(child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) || isListItem(child === null || child === void 0 ? void 0 : (_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name)) {
+    if (isListItem(child)) {
       return /*#__PURE__*/cloneElement(child, {
         showDivider,
         isLastItem: index + 1 === Children.count(children),
@@ -52,7 +56,7 @@ List.displayName = 'List';
 List.propTypes = { ...selectedSystemPropTypes,
   tokens: getTokensPropType('List'),
   variant: variantProp.propType,
-  children: componentPropType('ListItem'),
+  children: PropTypes.node,
 
   /**
    * In case it is not the last item allow display divider

package/lib-module/List/PressableListItemBase.js

@@ -4,10 +4,10 @@ import ABBPropTypes from 'airbnb-prop-types';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
-import { resolvePressableTokens, clickProps, linkProps, hrefAttrsProp, withLinkRouter } from '../utils';
+import { resolvePressableTokens, clickProps, linkProps, hrefAttrsProp, selectTokens, withLinkRouter } from '../utils';
 import ListItemBase from './ListItemBase';
-import ListItemContent, { tokenTypes as contentTokenTypes } from './ListItemContent';
-import ListItemMark, { tokenTypes as markTokenTypes } from './ListItemMark';
+import ListItemContent from './ListItemContent';
+import ListItemMark from './ListItemMark';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -57,9 +57,10 @@ const PressableListItemBase = /*#__PURE__*/forwardRef((_ref2, ref) => {
     href,
     onPress
   });
+  const listItemTokens = selectTokens('List', typeof tokens === 'function' ? tokens() : tokens);
   return /*#__PURE__*/_jsx(ListItemBase, {
     ref: listItemRef,
-    tokens: tokens(),
+    tokens: listItemTokens,
     ...listItemProps,
     children: _ref3 => {
       let {
@@ -99,16 +100,11 @@ const staticStyles = StyleSheet.create({
   itemContainer: {
     flexDirection: 'row',
     flex: 1
-  },
-  tokens: { ...contentTokenTypes,
-    ...markTokenTypes
   }
 });
-PressableListItemBase.propTypes = {
+PressableListItemBase.propTypes = { ...withLinkRouter.propTypes,
   href: PropTypes.string,
   onPress: PropTypes.func,
-  // TODO - type this better, maybe import the subcomponent token types and run it through util
-  // eslint-disable-next-line react/forbid-prop-types
   tokens: PropTypes.any,
   icon: PropTypes.elementType,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),

package/lib-module/QuickLinks/QuickLinks.js

@@ -0,0 +1,71 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { useThemeTokens } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
+import { getTokensPropType, variantProp } from '../utils';
+import List from '../List';
+import StackWrap from '../StackView/StackWrap';
+import QuickLinksCard from './QuickLinksCard';
+/**
+ * QuickLinks renders a list of interactive items. How it renders these items depends on theme options:
+ *  - If the theme returns `list` token as true, it renders an ordered list based on List
+ *  - If the theme returns `button` token as true and `list` as false, it renders a wrapping horizontal bar of buttons
+ *  - If the theme returns `card` token as true, it wraps the above with a `Card`.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+const QuickLinks = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    tokens,
+    variant,
+    listTokens,
+    cardTokens,
+    children,
+    tag = 'ul',
+    ...rest
+  } = _ref;
+  const viewport = useViewport();
+  const {
+    dividers,
+    list,
+    card,
+    stackSpace,
+    stackGap,
+    stackJustify
+  } = useThemeTokens('QuickLinks', tokens, variant, {
+    viewport
+  });
+
+  const content = list && /*#__PURE__*/_jsx(List, {
+    ref: ref,
+    tokens: listTokens,
+    showDivider: dividers,
+    tag: tag,
+    ...rest,
+    children: children
+  }) || /*#__PURE__*/_jsx(StackWrap, {
+    space: stackSpace,
+    gap: stackGap,
+    tokens: {
+      justifyContent: stackJustify
+    },
+    tag: tag,
+    ...rest,
+    children: children
+  });
+
+  return card ? /*#__PURE__*/_jsx(QuickLinksCard, {
+    tokens: cardTokens,
+    children: content
+  }) : content;
+});
+QuickLinks.displayName = 'QuickLinks';
+QuickLinks.propTypes = {
+  tokens: getTokensPropType('QuickLinks'),
+  cardTokens: getTokensPropType('Card'),
+  listTokens: getTokensPropType('QuickLinksList'),
+  tag: PropTypes.string,
+  variant: variantProp.propType,
+  children: PropTypes.node
+};
+export default QuickLinks;

package/lib-module/QuickLinks/QuickLinksCard.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useThemeTokens } from '../ThemeProvider';
+import { getTokensPropType, variantProp } from '../utils';
+import CardBase from '../Card/CardBase';
+/**
+ * Private subcomponent for use within QuickLinks.
+ *
+ * Restyled Card with identical behaviour to Card, but themed according to the
+ * QuickLinksCard theme rather than the Card theme.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const QuickLinksList = _ref => {
+  let {
+    tokens,
+    variant,
+    children
+  } = _ref;
+  const themeTokens = useThemeTokens('QuickLinksCard', tokens, variant);
+  return /*#__PURE__*/_jsx(CardBase, {
+    tokens: themeTokens,
+    children: children
+  });
+};
+
+QuickLinksList.propTypes = {
+  tokens: getTokensPropType('QuickLinksCard'),
+  variant: variantProp.propType,
+  children: PropTypes.node
+};
+export default QuickLinksList;

package/lib-module/QuickLinks/QuickLinksItem.js

@@ -0,0 +1,50 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { getTokensPropType, variantProp, withLinkRouter } from '../utils';
+import { useViewport } from '../ViewportProvider';
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
+import PressableListItemBase from '../List/PressableListItemBase';
+import ButtonBase from '../Button/ButtonBase';
+/**
+ * Public component exported as QuickLinks.Item, for use as children of QuickLinks.
+ *
+ * Receives props injected by QuickLinks and renders the appropriate child component.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+const QuickLinksItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    tokens,
+    variant,
+    children,
+    ...rest
+  } = _ref;
+  const viewport = useViewport();
+  const {
+    list
+  } = useThemeTokens('QuickLinks', tokens, variant, {
+    viewport
+  });
+  const themeName = list ? 'QuickLinksList' : 'QuickLinksButton';
+  const getTokens = useThemeTokensCallback(themeName, tokens, variant);
+  return list ? /*#__PURE__*/_jsx(PressableListItemBase, {
+    ref: ref,
+    tokens: getTokens,
+    ...rest,
+    children: children
+  }) : /*#__PURE__*/_jsx(ButtonBase, {
+    ref: ref,
+    tokens: getTokens,
+    ...rest,
+    children: children
+  });
+});
+QuickLinksItem.displayName = 'QuickLinksItem';
+QuickLinksItem.propTypes = { ...withLinkRouter.propTypes,
+  ...PressableListItemBase.propTypes,
+  ...ButtonBase.propTypes,
+  tokens: getTokensPropType('QuickLinksList', 'QuickLinksButton'),
+  variant: variantProp.propType,
+  children: PropTypes.node
+};
+export default withLinkRouter(QuickLinksItem);

package/lib-module/QuickLinks/index.js

@@ -0,0 +1,4 @@
+import QuickLinks from './QuickLinks';
+import QuickLinksItem from './QuickLinksItem';
+QuickLinks.Item = QuickLinksItem;
+export default QuickLinks;

package/lib-module/Skeleton/Skeleton.js

@@ -1,6 +1,8 @@
 import React, { forwardRef } from 'react';
 import Animated from "react-native-web/dist/exports/Animated";
 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 propTypes from 'prop-types';
 import StackView from '../StackView';
 import { useThemeTokens } from '../ThemeProvider';
@@ -13,14 +15,12 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 const selectSkeletonStyles = _ref => {
   let {
     color,
-    radius,
-    fadeAnimation
+    radius
   } = _ref;
   return {
     backgroundColor: color,
     borderRadius: radius,
-    maxWidth: '100%',
-    ...fadeAnimation
+    maxWidth: '100%'
   };
 };
 
@@ -78,12 +78,14 @@ const Skeleton = /*#__PURE__*/forwardRef((_ref5, ref) => {
   const skeletonHeight = useSpacingScale(spacingScaleValue);
   const nativeAnimation = useSkeletonNativeAnimation();
 
-  const getAnimationBaseOnPlatform = () => {
-    if (Platform.OS !== 'web') {
-      return nativeAnimation;
-    }
+  const getAnimationBasedOnPlatform = () => {
+    const animation = Platform.OS === 'web' ? skeletonWebAnimation : nativeAnimation; // We must pass the animation styles through `StyleSheet.create`
+    // @see https://github.com/necolas/react-native-web/issues/2387
 
-    return skeletonWebAnimation;
+    const styles = StyleSheet.create({
+      animation
+    });
+    return styles.animation;
   };
 
   const getLineWidth = () => {
@@ -117,11 +119,11 @@ const Skeleton = /*#__PURE__*/forwardRef((_ref5, ref) => {
 
   const renderSkeleton = function () {
     let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    return /*#__PURE__*/_jsx(Animated.View, {
+    // @see https://github.com/necolas/react-native-web/issues/2387
+    const Component = Platform.OS === 'web' ? View : Animated.View;
+    return /*#__PURE__*/_jsx(Component, {
       testID: "skeleton",
-      style: [selectSkeletonStyles({ ...themeTokens,
-        fadeAnimation: getAnimationBaseOnPlatform()
-      }), getStyledBasedOnShape()]
+      style: [selectSkeletonStyles(themeTokens), getAnimationBasedOnPlatform(), getStyledBasedOnShape()]
     }, "skeleton-".concat(index + 1));
   };
 

package/lib-module/Skeleton/useSkeletonNativeAnimation.js

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
 import Animated from "react-native-web/dist/exports/Animated";
+import Platform from "react-native-web/dist/exports/Platform";
 import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant';
 
 const useSkeletonNativeAnimation = () => {
@@ -8,11 +9,11 @@ const useSkeletonNativeAnimation = () => {
     const fade = Animated.sequence([Animated.timing(fadeAnimation, {
       toValue: OPACITY_STOP,
       duration: ANIMATION_DURATION,
-      useNativeDriver: true
+      useNativeDriver: Platform.OS !== 'web'
     }), Animated.timing(fadeAnimation, {
       toValue: DEFAULT_OPACITY,
       duration: ANIMATION_DURATION,
-      useNativeDriver: true
+      useNativeDriver: Platform.OS !== 'web'
     })]);
     Animated.loop(fade).start();
   }, [fadeAnimation]);

package/lib-module/Timeline/Timeline.js

@@ -0,0 +1,174 @@
+import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
+import View from "react-native-web/dist/exports/View";
+import { useThemeTokens } from '../ThemeProvider';
+import { getTokensPropType, variantProp, a11yProps, viewProps, selectSystemProps, getA11yPropsFromHtmlTag, layoutTags } from '../utils';
+import { useViewport } from '../ViewportProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const selectDotStyles = _ref => {
+  let {
+    dotWidth,
+    timelineColor,
+    dotBorderWidth,
+    dotColor
+  } = _ref;
+  return {
+    width: dotWidth,
+    height: dotWidth,
+    borderRadius: dotWidth / 2,
+    backgroundColor: dotColor,
+    borderWidth: dotBorderWidth,
+    borderColor: timelineColor
+  };
+};
+
+const selectConnectorStyles = _ref2 => {
+  let {
+    timelineColor,
+    connectorHeight,
+    connectorWidth
+  } = _ref2;
+  return {
+    width: connectorWidth,
+    height: connectorHeight,
+    backgroundColor: timelineColor
+  };
+};
+
+const selectTimelineContainerStyle = _ref3 => {
+  let {
+    timelineContainerDirection
+  } = _ref3;
+  return {
+    flexDirection: timelineContainerDirection
+  };
+};
+
+const selectLineItemStyles = _ref4 => {
+  let {
+    lineItemAlign,
+    lineItemDirection,
+    lineItemMarginBottom,
+    lineItemMarginRight
+  } = _ref4;
+  return {
+    alignItems: lineItemAlign,
+    flexDirection: lineItemDirection,
+    marginBottom: lineItemMarginBottom,
+    marginRight: lineItemMarginRight,
+    overflow: 'hidden'
+  };
+};
+
+const selectLineItemContainer = _ref5 => {
+  let {
+    lineItemContainerDirection,
+    lineContainerFlexSize
+  } = _ref5;
+  return {
+    flexDirection: lineItemContainerDirection,
+    flex: lineContainerFlexSize
+  };
+};
+
+const selectItemContentStyles = (_ref6, isLastChild) => {
+  let {
+    itemContentFlexSize,
+    itemContentMarginBottom,
+    itemContentMarginRight
+  } = _ref6;
+  return {
+    flex: itemContentFlexSize,
+    marginBottom: !isLastChild && itemContentMarginBottom,
+    marginRight: !isLastChild && itemContentMarginRight
+  };
+};
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+/**
+ * Timeline is a component that displays either a horizontal or vertical list of the
+ * children components passed by props
+ *
+ * ## Component API
+ *
+ * - `horizontal` In order to display the Component list horizontally
+ *
+ *
+ * ## A11y guidelines
+ * Timeline link supports all the common a11y props.
+ */
+
+const Timeline = /*#__PURE__*/forwardRef((_ref7, ref) => {
+  let {
+    tokens,
+    variant = {},
+    children,
+    accessibilityLabel,
+    tag = 'ul',
+    childrenTag = 'li',
+    ...rest
+  } = _ref7;
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Timeline', tokens, variant, {
+    viewport
+  });
+  const containerProps = { ...selectProps(rest),
+    ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole || 'list'),
+    accessibilityLabel
+  };
+  return /*#__PURE__*/_jsx(View, { ...containerProps,
+    ref: ref,
+    style: selectTimelineContainerStyle(themeTokens),
+    children: children.map((child, index) => {
+      var _child$props;
+
+      const childrenProps = { ...getA11yPropsFromHtmlTag(childrenTag, (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.accessibilityRole) || 'listitem')
+      };
+      return /*#__PURE__*/_jsxs(View, {
+        style: selectLineItemContainer(themeTokens) // eslint-disable-next-line react/no-array-index-key
+        ,
+        ...childrenProps,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: selectLineItemStyles(themeTokens),
+          children: [/*#__PURE__*/_jsx(View, {
+            style: selectDotStyles(themeTokens)
+          }), /*#__PURE__*/_jsx(View, {
+            style: selectConnectorStyles(themeTokens)
+          })]
+        }), /*#__PURE__*/_jsx(View, {
+          style: selectItemContentStyles(themeTokens, index + 1 === children.length),
+          children: child
+        })]
+      }, "timeline-".concat(index, "-").concat(child.displayName));
+    })
+  });
+});
+Timeline.displayName = 'Timeline';
+Timeline.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Timeline'),
+  variant: variantProp.propType,
+
+  /**
+   * A list of components that will be rendered either horizontally or vertically
+   */
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+
+  /**
+   * A required accessibility label that needs to be passed to be used on List
+   * which is applied as normal for a React Native accessibilityLabel prop.
+   */
+  accessibilityLabel: PropTypes.string.isRequired,
+
+  /**
+   * Sets the HTML tag of the outer container and the children. By default `'li'` for the children
+   * and `'ul'` for the container
+   *
+   * If either `tag` or `childrenTag` is overridden, the other should be too, to avoid producing invalid HTML.
+   *
+   */
+  tag: PropTypes.oneOf(layoutTags),
+  childrenTag: PropTypes.oneOf(layoutTags)
+};
+export default Timeline;

package/lib-module/Timeline/index.js

@@ -0,0 +1,2 @@
+import Timeline from './Timeline';
+export default Timeline;

package/lib-module/ToggleSwitch/ToggleSwitch.js

@@ -11,32 +11,39 @@ import { a11yProps, focusHandlerProps, getTokensPropType, selectTokens, pressPro
 import { useInputValue } from '../utils/input';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]); // We need to drop the icon before passing it to the `ButtonBase`, because it's
+// being handled separately in this case
 
-const selectButtonTokens = tokens => selectTokens('Button', { ...tokens,
-  // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
-  width: null
-}); // Map and rename icon-specific tokens to name used within Icon
+const selectButtonTokens = _ref => {
+  let {
+    icon: _,
+    ...tokens
+  } = _ref;
+  return selectTokens('Button', { ...tokens,
+    // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
+    width: null
+  });
+}; // Map and rename icon-specific tokens to name used within Icon
 
 
-const selectIconTokens = _ref => {
+const selectIconTokens = _ref2 => {
   let {
     iconSize,
     iconColor
-  } = _ref;
+  } = _ref2;
   return {
     size: iconSize,
     color: iconColor
   };
 };
 
-const selectTrackStyles = _ref2 => {
+const selectTrackStyles = _ref3 => {
   let {
     trackBorderWidth,
     trackBorderColor,
     trackBorderRadius,
     width
-  } = _ref2;
+  } = _ref3;
   return {
     borderWidth: trackBorderWidth,
     borderColor: trackBorderColor,
@@ -45,7 +52,7 @@ const selectTrackStyles = _ref2 => {
   };
 };
 
-const selectSwitchStyles = _ref3 => {
+const selectSwitchStyles = _ref4 => {
   let {
     switchSize,
     switchColor,
@@ -53,7 +60,7 @@ const selectSwitchStyles = _ref3 => {
     switchBorderColor,
     switchBorderRadius,
     switchShadow
-  } = _ref3;
+  } = _ref4;
   return {
     width: switchSize,
     height: switchSize,
@@ -71,23 +78,23 @@ const selectSwitchStyles = _ref3 => {
   };
 };
 
-const selectLabelStyles = _ref4 => {
+const selectLabelStyles = _ref5 => {
   let {
     labelMarginLeft
-  } = _ref4;
+  } = _ref5;
   return {
     marginLeft: labelMarginLeft
   };
 };
 
-const selectLabelTokens = _ref5 => {
+const selectLabelTokens = _ref6 => {
   let {
     labelColor,
     labelFontName,
     labelFontSize,
     labelFontWeight,
     labelLineHeight
-  } = _ref5;
+  } = _ref6;
   return {
     color: labelColor,
     fontName: labelFontName,
@@ -97,7 +104,7 @@ const selectLabelTokens = _ref5 => {
   };
 };
 
-const ToggleSwitch = /*#__PURE__*/forwardRef((_ref6, ref) => {
+const ToggleSwitch = /*#__PURE__*/forwardRef((_ref7, ref) => {
   let {
     copy = 'en',
     value,
@@ -112,7 +119,7 @@ const ToggleSwitch = /*#__PURE__*/forwardRef((_ref6, ref) => {
     accessibilityRole = 'switch',
     accessibilityLabel = label,
     ...rest
-  } = _ref6;
+  } = _ref7;
   const getTokens = useThemeTokensCallback('ToggleSwitch', tokens, variant);
   const themeTokens = getTokens();
   const {
@@ -235,8 +242,6 @@ ToggleSwitch.propTypes = { ...selectedSystemPropTypes,
 };
 const staticStyles = StyleSheet.create({
   track: {
-    flexGrow: 1,
-    alignSelf: 'stretch',
     flexDirection: 'row'
   },
   switch: {

package/lib-module/index.js

@@ -24,6 +24,7 @@ export { default as Modal } from './Modal';
 export { default as Notification } from './Notification';
 export { default as Pagination } from './Pagination';
 export { default as Progress } from './Progress';
+export { default as QuickLinks } from './QuickLinks';
 export { default as Radio } from './Radio';
 export * from './Radio';
 export { default as RadioCard } from './RadioCard';
@@ -40,6 +41,7 @@ export { default as StepTracker } from './StepTracker';
 export { default as Tabs } from './Tabs';
 export { default as Tags } from './Tags';
 export * from './TextInput';
+export { default as Timeline } from './Timeline';
 export * from './ToggleSwitch';
 export { default as Tooltip } from './Tooltip';
 export { default as TooltipButton } from './TooltipButton';
@@ -48,4 +50,5 @@ export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider';
 export { default as BaseProvider } from './BaseProvider';
 export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider';
 export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken } from './ThemeProvider';
-export * from './utils';
+export * from './utils';
+export { Portal } from '@gorhom/portal';