@wlloyalty/wll-react-sdk 1.0.10 → 1.0.12

package/dist/index.js

@@ -785,7 +785,7 @@ var canUseDOM$1 = canUseDOM;
  * longfrom equivalents.
  */
 
-var emptyObject$8 = {};
+var emptyObject$9 = {};
 var supportsCSS3TextDecoration = !canUseDOM$1 || window.CSS != null && window.CSS.supports != null && (window.CSS.supports('text-decoration-line', 'none') || window.CSS.supports('-webkit-text-decoration-line', 'none'));
 var MONOSPACE_FONT_STACK = 'monospace,monospace';
 var SYSTEM_FONT_STACK = '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif';
@@ -844,7 +844,7 @@ var STYLE_SHORT_FORM_EXPANSIONS = {
 
 var createReactDOMStyle = (style, isInline) => {
   if (!style) {
-    return emptyObject$8;
+    return emptyObject$9;
   }
   var resolvedStyle = {};
   var _loop = function _loop() {
@@ -1784,9 +1784,9 @@ var staticData = {
 var prefixAll = _default$9(staticData);
 var prefixStyles = prefixAll;
 
-var _excluded$e = ["animationKeyframes"];
+var _excluded$f = ["animationKeyframes"];
 var cache$3 = new Map();
-var emptyObject$7 = {};
+var emptyObject$8 = {};
 var classicGroup = 1;
 var atomicGroup = 3;
 var customGroup = {
@@ -1986,7 +1986,7 @@ function classic(style, name) {
   };
   var compiledRules = [];
   var animationKeyframes = style.animationKeyframes,
-    rest = _objectWithoutPropertiesLoose(style, _excluded$e);
+    rest = _objectWithoutPropertiesLoose(style, _excluded$f);
   var identifier = createIdentifier('css', name, JSON.stringify(style));
   var selector = "." + identifier;
   var animationName;
@@ -2010,7 +2010,7 @@ function classic(style, name) {
  * No support for 'animationKeyframes', 'placeholderTextColor', 'scrollbarWidth', or 'pointerEvents'.
  */
 function inline(originalStyle, isRTL) {
-  var style = originalStyle || emptyObject$7;
+  var style = originalStyle || emptyObject$8;
   var frozenProps = {};
   var nextStyle = {};
   var _loop = function _loop() {
@@ -2631,7 +2631,7 @@ function warnOnce(key, message) {
  * 
  */
 
-var emptyObject$6 = {};
+var emptyObject$7 = {};
 
 /**
  * Shadows
@@ -2726,7 +2726,7 @@ var preprocess = function preprocess(originalStyle, options) {
   if (options === void 0) {
     options = {};
   }
-  var style = originalStyle || emptyObject$6;
+  var style = originalStyle || emptyObject$7;
   var nextStyle = {};
 
   // Convert shadow styles
@@ -3600,7 +3600,7 @@ function validate(obj) {
   }
 }
 
-var _excluded$d = ["writingDirection"];
+var _excluded$e = ["writingDirection"];
 var staticStyleMap = new WeakMap();
 var sheet = createSheet();
 var defaultPreprocessOptions = {
@@ -3613,7 +3613,7 @@ function customStyleq(styles, options) {
   }
   var _options = options,
     writingDirection = _options.writingDirection,
-    preprocessOptions = _objectWithoutPropertiesLoose(_options, _excluded$d);
+    preprocessOptions = _objectWithoutPropertiesLoose(_options, _excluded$e);
   var isRTL = writingDirection === 'rtl';
   return styleq_2.factory({
     transform(style) {
@@ -3843,10 +3843,10 @@ var roleComponents = {
   region: 'section',
   strong: 'strong'
 };
-var emptyObject$5 = {};
+var emptyObject$6 = {};
 var propsToAccessibilityComponent = function propsToAccessibilityComponent(props) {
   if (props === void 0) {
-    props = emptyObject$5;
+    props = emptyObject$6;
   }
   var roleProp = props.role || props.accessibilityRole;
   // special-case for "label" role which doesn't map to an ARIA role
@@ -3883,8 +3883,8 @@ var AccessibilityUtil = {
 };
 var AccessibilityUtil$1 = AccessibilityUtil;
 
-var _excluded$c = ["aria-activedescendant", "accessibilityActiveDescendant", "aria-atomic", "accessibilityAtomic", "aria-autocomplete", "accessibilityAutoComplete", "aria-busy", "accessibilityBusy", "aria-checked", "accessibilityChecked", "aria-colcount", "accessibilityColumnCount", "aria-colindex", "accessibilityColumnIndex", "aria-colspan", "accessibilityColumnSpan", "aria-controls", "accessibilityControls", "aria-current", "accessibilityCurrent", "aria-describedby", "accessibilityDescribedBy", "aria-details", "accessibilityDetails", "aria-disabled", "accessibilityDisabled", "aria-errormessage", "accessibilityErrorMessage", "aria-expanded", "accessibilityExpanded", "aria-flowto", "accessibilityFlowTo", "aria-haspopup", "accessibilityHasPopup", "aria-hidden", "accessibilityHidden", "aria-invalid", "accessibilityInvalid", "aria-keyshortcuts", "accessibilityKeyShortcuts", "aria-label", "accessibilityLabel", "aria-labelledby", "accessibilityLabelledBy", "aria-level", "accessibilityLevel", "aria-live", "accessibilityLiveRegion", "aria-modal", "accessibilityModal", "aria-multiline", "accessibilityMultiline", "aria-multiselectable", "accessibilityMultiSelectable", "aria-orientation", "accessibilityOrientation", "aria-owns", "accessibilityOwns", "aria-placeholder", "accessibilityPlaceholder", "aria-posinset", "accessibilityPosInSet", "aria-pressed", "accessibilityPressed", "aria-readonly", "accessibilityReadOnly", "aria-required", "accessibilityRequired", "role", "accessibilityRole", "aria-roledescription", "accessibilityRoleDescription", "aria-rowcount", "accessibilityRowCount", "aria-rowindex", "accessibilityRowIndex", "aria-rowspan", "accessibilityRowSpan", "aria-selected", "accessibilitySelected", "aria-setsize", "accessibilitySetSize", "aria-sort", "accessibilitySort", "aria-valuemax", "accessibilityValueMax", "aria-valuemin", "accessibilityValueMin", "aria-valuenow", "accessibilityValueNow", "aria-valuetext", "accessibilityValueText", "dataSet", "focusable", "id", "nativeID", "pointerEvents", "style", "tabIndex", "testID"];
-var emptyObject$4 = {};
+var _excluded$d = ["aria-activedescendant", "accessibilityActiveDescendant", "aria-atomic", "accessibilityAtomic", "aria-autocomplete", "accessibilityAutoComplete", "aria-busy", "accessibilityBusy", "aria-checked", "accessibilityChecked", "aria-colcount", "accessibilityColumnCount", "aria-colindex", "accessibilityColumnIndex", "aria-colspan", "accessibilityColumnSpan", "aria-controls", "accessibilityControls", "aria-current", "accessibilityCurrent", "aria-describedby", "accessibilityDescribedBy", "aria-details", "accessibilityDetails", "aria-disabled", "accessibilityDisabled", "aria-errormessage", "accessibilityErrorMessage", "aria-expanded", "accessibilityExpanded", "aria-flowto", "accessibilityFlowTo", "aria-haspopup", "accessibilityHasPopup", "aria-hidden", "accessibilityHidden", "aria-invalid", "accessibilityInvalid", "aria-keyshortcuts", "accessibilityKeyShortcuts", "aria-label", "accessibilityLabel", "aria-labelledby", "accessibilityLabelledBy", "aria-level", "accessibilityLevel", "aria-live", "accessibilityLiveRegion", "aria-modal", "accessibilityModal", "aria-multiline", "accessibilityMultiline", "aria-multiselectable", "accessibilityMultiSelectable", "aria-orientation", "accessibilityOrientation", "aria-owns", "accessibilityOwns", "aria-placeholder", "accessibilityPlaceholder", "aria-posinset", "accessibilityPosInSet", "aria-pressed", "accessibilityPressed", "aria-readonly", "accessibilityReadOnly", "aria-required", "accessibilityRequired", "role", "accessibilityRole", "aria-roledescription", "accessibilityRoleDescription", "aria-rowcount", "accessibilityRowCount", "aria-rowindex", "accessibilityRowIndex", "aria-rowspan", "accessibilityRowSpan", "aria-selected", "accessibilitySelected", "aria-setsize", "accessibilitySetSize", "aria-sort", "accessibilitySort", "aria-valuemax", "accessibilityValueMax", "aria-valuemin", "accessibilityValueMin", "aria-valuenow", "accessibilityValueNow", "aria-valuetext", "accessibilityValueText", "dataSet", "focusable", "id", "nativeID", "pointerEvents", "style", "tabIndex", "testID"];
+var emptyObject$5 = {};
 var hasOwnProperty = Object.prototype.hasOwnProperty;
 var isArray = Array.isArray;
 var uppercasePattern = /[A-Z]/g;
@@ -3913,7 +3913,7 @@ var pointerEventsStyles = StyleSheet$1.create({
 });
 var createDOMProps = (elementType, props, options) => {
   if (!props) {
-    props = emptyObject$4;
+    props = emptyObject$5;
   }
   var _props = props,
     ariaActiveDescendant = _props['aria-activedescendant'],
@@ -4016,7 +4016,7 @@ var createDOMProps = (elementType, props, options) => {
     style = _props.style,
     tabIndex = _props.tabIndex,
     testID = _props.testID,
-    domProps = _objectWithoutPropertiesLoose(_props, _excluded$c);
+    domProps = _objectWithoutPropertiesLoose(_props, _excluded$d);
   if (accessibilityDisabled != null) {
     warnOnce('accessibilityDisabled', "accessibilityDisabled is deprecated.");
   }
@@ -5250,8 +5250,8 @@ function usePlatformMethods(_ref) {
  * 
  */
 
-var emptyFunction$2 = () => {};
-var emptyObject$3 = {};
+var emptyFunction$3 = () => {};
+var emptyObject$4 = {};
 var emptyArray = [];
 
 /**
@@ -5282,7 +5282,7 @@ function createResponderEvent(domEvent, responderTouchHistoryStore) {
   var clientY = domEventChangedTouches && domEventChangedTouches[0].clientY || domEvent.clientY;
   var pageX = domEventChangedTouches && domEventChangedTouches[0].pageX || domEvent.pageX;
   var pageY = domEventChangedTouches && domEventChangedTouches[0].pageY || domEvent.pageY;
-  var preventDefault = typeof domEvent.preventDefault === 'function' ? domEvent.preventDefault.bind(domEvent) : emptyFunction$2;
+  var preventDefault = typeof domEvent.preventDefault === 'function' ? domEvent.preventDefault.bind(domEvent) : emptyFunction$3;
   var timestamp = domEvent.timeStamp;
   function normalizeTouches(touches) {
     return Array.prototype.slice.call(touches).map(touch => {
@@ -5329,7 +5329,7 @@ function createResponderEvent(domEvent, responderTouchHistoryStore) {
     // `currentTarget` is set before dispatch
     currentTarget: null,
     defaultPrevented: domEvent.defaultPrevented,
-    dispatchConfig: emptyObject$3,
+    dispatchConfig: emptyObject$4,
     eventPhase: domEvent.eventPhase,
     isDefaultPrevented() {
       return domEvent.defaultPrevented;
@@ -5359,7 +5359,7 @@ function createResponderEvent(domEvent, responderTouchHistoryStore) {
       touches,
       type: domEventType
     },
-    persist: emptyFunction$2,
+    persist: emptyFunction$3,
     preventDefault,
     stopPropagation() {
       propagationWasStopped = true;
@@ -5404,7 +5404,7 @@ var TOUCH_START = 'touchstart';
 var TOUCH_MOVE = 'touchmove';
 var TOUCH_END = 'touchend';
 var TOUCH_CANCEL = 'touchcancel';
-var SCROLL = 'scroll';
+var SCROLL$1 = 'scroll';
 var SELECT = 'select';
 var SELECTION_CHANGE = 'selectionchange';
 function isStartish(eventType) {
@@ -5420,7 +5420,7 @@ function isCancelish(eventType) {
   return eventType === TOUCH_CANCEL || eventType === MOUSE_CANCEL;
 }
 function isScroll(eventType) {
-  return eventType === SCROLL;
+  return eventType === SCROLL$1;
 }
 function isSelectionChange(eventType) {
   return eventType === SELECT || eventType === SELECTION_CHANGE;
@@ -5791,7 +5791,7 @@ class ResponderTouchHistoryStore {
 
 /* ------------ TYPES ------------ */
 
-var emptyObject$2 = {};
+var emptyObject$3 = {};
 
 /* ------------ IMPLEMENTATION ------------ */
 
@@ -5817,7 +5817,7 @@ var emptyResponder = {
   node: null
 };
 var responderListenersMap = new Map();
-var isEmulatingMouseEvents = false;
+var isEmulatingMouseEvents$1 = false;
 var trackedTouchCount = 0;
 var currentResponder = {
   id: null,
@@ -5830,7 +5830,7 @@ function changeCurrentResponder(responder) {
 }
 function getResponderConfig(id) {
   var config = responderListenersMap.get(id);
-  return config != null ? config : emptyObject$2;
+  return config != null ? config : emptyObject$3;
 }
 
 /**
@@ -5856,24 +5856,24 @@ function eventListener(domEvent) {
 
   // Flag when browser may produce emulated events
   if (eventType === 'touchstart') {
-    isEmulatingMouseEvents = true;
+    isEmulatingMouseEvents$1 = true;
   }
   // Remove flag when browser will not produce emulated events
   if (eventType === 'touchmove' || trackedTouchCount > 1) {
-    isEmulatingMouseEvents = false;
+    isEmulatingMouseEvents$1 = false;
   }
   // Ignore various events in particular circumstances
   if (
   // Ignore browser emulated mouse events
-  eventType === 'mousedown' && isEmulatingMouseEvents || eventType === 'mousemove' && isEmulatingMouseEvents ||
+  eventType === 'mousedown' && isEmulatingMouseEvents$1 || eventType === 'mousemove' && isEmulatingMouseEvents$1 ||
   // Ignore mousemove if a mousedown didn't occur first
   eventType === 'mousemove' && trackedTouchCount < 1) {
     return;
   }
   // Remove flag after emulated events are finished
-  if (isEmulatingMouseEvents && eventType === 'mouseup') {
+  if (isEmulatingMouseEvents$1 && eventType === 'mouseup') {
     if (trackedTouchCount === 0) {
-      isEmulatingMouseEvents = false;
+      isEmulatingMouseEvents$1 = false;
     }
     return;
   }
@@ -6022,7 +6022,7 @@ function eventListener(domEvent) {
             onResponderTerminate(responderEvent);
           }
           changeCurrentResponder(emptyResponder);
-          isEmulatingMouseEvents = false;
+          isEmulatingMouseEvents$1 = false;
           trackedTouchCount = 0;
         }
       }
@@ -6229,7 +6229,7 @@ function terminateResponder() {
     }
     changeCurrentResponder(emptyResponder);
   }
-  isEmulatingMouseEvents = false;
+  isEmulatingMouseEvents$1 = false;
   trackedTouchCount = 0;
 }
 
@@ -6250,7 +6250,7 @@ function getResponderNode() {
  * 
  */
 
-var emptyObject$1 = {};
+var emptyObject$2 = {};
 var idCounter = 0;
 function useStable(getInitialValue) {
   var ref = React__namespace.useRef(null);
@@ -6261,7 +6261,7 @@ function useStable(getInitialValue) {
 }
 function useResponderEvents(hostRef, config) {
   if (config === void 0) {
-    config = emptyObject$1;
+    config = emptyObject$2;
   }
   var id = useStable(() => idCounter++);
   var isAttachedRef = React__namespace.useRef(false);
@@ -6315,7 +6315,7 @@ function useResponderEvents(hostRef, config) {
 var TextAncestorContext = /*#__PURE__*/React.createContext(false);
 var TextAncestorContext$1 = TextAncestorContext;
 
-var _excluded$b = ["hrefAttrs", "numberOfLines", "onClick", "onLayout", "onPress", "onMoveShouldSetResponder", "onMoveShouldSetResponderCapture", "onResponderEnd", "onResponderGrant", "onResponderMove", "onResponderReject", "onResponderRelease", "onResponderStart", "onResponderTerminate", "onResponderTerminationRequest", "onScrollShouldSetResponder", "onScrollShouldSetResponderCapture", "onSelectionChangeShouldSetResponder", "onSelectionChangeShouldSetResponderCapture", "onStartShouldSetResponder", "onStartShouldSetResponderCapture", "selectable"];
+var _excluded$c = ["hrefAttrs", "numberOfLines", "onClick", "onLayout", "onPress", "onMoveShouldSetResponder", "onMoveShouldSetResponderCapture", "onResponderEnd", "onResponderGrant", "onResponderMove", "onResponderReject", "onResponderRelease", "onResponderStart", "onResponderTerminate", "onResponderTerminationRequest", "onScrollShouldSetResponder", "onScrollShouldSetResponderCapture", "onSelectionChangeShouldSetResponder", "onSelectionChangeShouldSetResponderCapture", "onStartShouldSetResponder", "onStartShouldSetResponderCapture", "selectable"];
 var forwardPropsList$1 = Object.assign({}, defaultProps, accessibilityProps, clickProps, focusProps, keyboardProps, mouseProps, touchProps, styleProps, {
   href: true,
   lang: true,
@@ -6345,7 +6345,7 @@ var Text$2 = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
     onStartShouldSetResponder = props.onStartShouldSetResponder,
     onStartShouldSetResponderCapture = props.onStartShouldSetResponderCapture,
     selectable = props.selectable,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$b);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$c);
   if (selectable != null) {
     warnOnce('selectable', 'selectable prop is deprecated. Use styles.userSelect.');
   }
@@ -6395,7 +6395,7 @@ var Text$2 = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
   }
   supportedProps.style = [numberOfLines != null && numberOfLines > 1 && {
     WebkitLineClamp: numberOfLines
-  }, hasTextAncestor === true ? styles$u.textHasAncestor$raw : styles$u.text$raw, numberOfLines === 1 && styles$u.textOneLine, numberOfLines != null && numberOfLines > 1 && styles$u.textMultiLine, props.style, selectable === true && styles$u.selectable, selectable === false && styles$u.notSelectable, onPress && styles$u.pressable];
+  }, hasTextAncestor === true ? styles$v.textHasAncestor$raw : styles$v.text$raw, numberOfLines === 1 && styles$v.textOneLine, numberOfLines != null && numberOfLines > 1 && styles$v.textMultiLine, props.style, selectable === true && styles$v.selectable, selectable === false && styles$v.notSelectable, onPress && styles$v.pressable];
   if (props.href != null) {
     component = 'a';
     if (hrefAttrs != null) {
@@ -6440,7 +6440,7 @@ var textStyle = {
   whiteSpace: 'pre-wrap',
   wordWrap: 'break-word'
 };
-var styles$u = StyleSheet$1.create({
+var styles$v = StyleSheet$1.create({
   text$raw: textStyle,
   textHasAncestor$raw: _objectSpread2(_objectSpread2({}, textStyle), {}, {
     color: 'inherit',
@@ -7010,7 +7010,7 @@ function usePressEvents(hostRef, config) {
   return pressResponder.getEventHandlers();
 }
 
-var _excluded$a = ["hrefAttrs", "onLayout", "onMoveShouldSetResponder", "onMoveShouldSetResponderCapture", "onResponderEnd", "onResponderGrant", "onResponderMove", "onResponderReject", "onResponderRelease", "onResponderStart", "onResponderTerminate", "onResponderTerminationRequest", "onScrollShouldSetResponder", "onScrollShouldSetResponderCapture", "onSelectionChangeShouldSetResponder", "onSelectionChangeShouldSetResponderCapture", "onStartShouldSetResponder", "onStartShouldSetResponderCapture"];
+var _excluded$b = ["hrefAttrs", "onLayout", "onMoveShouldSetResponder", "onMoveShouldSetResponderCapture", "onResponderEnd", "onResponderGrant", "onResponderMove", "onResponderReject", "onResponderRelease", "onResponderStart", "onResponderTerminate", "onResponderTerminationRequest", "onScrollShouldSetResponder", "onScrollShouldSetResponderCapture", "onSelectionChangeShouldSetResponder", "onSelectionChangeShouldSetResponderCapture", "onStartShouldSetResponder", "onStartShouldSetResponderCapture"];
 var forwardPropsList = Object.assign({}, defaultProps, accessibilityProps, clickProps, focusProps, keyboardProps, mouseProps, touchProps, styleProps, {
   href: true,
   lang: true,
@@ -7038,7 +7038,7 @@ var View$1 = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
     onSelectionChangeShouldSetResponderCapture = props.onSelectionChangeShouldSetResponderCapture,
     onStartShouldSetResponder = props.onStartShouldSetResponder,
     onStartShouldSetResponderCapture = props.onStartShouldSetResponderCapture,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$a);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$b);
   if (process.env.NODE_ENV !== 'production') {
     React__namespace.Children.toArray(props.children).forEach(item => {
       if (typeof item === 'string') {
@@ -7075,7 +7075,7 @@ var View$1 = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
   var writingDirection = componentDirection || contextDirection;
   var supportedProps = pickProps(rest);
   supportedProps.dir = componentDirection;
-  supportedProps.style = [styles$t.view$raw, hasTextAncestor && styles$t.inline, props.style];
+  supportedProps.style = [styles$u.view$raw, hasTextAncestor && styles$u.inline, props.style];
   if (props.href != null) {
     component = 'a';
     if (hrefAttrs != null) {
@@ -7101,7 +7101,7 @@ var View$1 = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
   });
 });
 View$1.displayName = 'View';
-var styles$t = StyleSheet$1.create({
+var styles$u = StyleSheet$1.create({
   view$raw: {
     alignItems: 'stretch',
     backgroundColor: 'transparent',
@@ -7136,7 +7136,7 @@ var View$2 = View$1;
  * @format
  */
 
-var _excluded$9 = ["activeOpacity", "delayPressIn", "delayPressOut", "delayLongPress", "disabled", "focusable", "onLongPress", "onPress", "onPressIn", "onPressOut", "rejectResponderTermination", "style"];
+var _excluded$a = ["activeOpacity", "delayPressIn", "delayPressOut", "delayLongPress", "disabled", "focusable", "onLongPress", "onPress", "onPressIn", "onPressOut", "rejectResponderTermination", "style"];
 /**
  * A wrapper for making views respond properly to touches.
  * On press down, the opacity of the wrapped view is decreased, dimming it.
@@ -7155,7 +7155,7 @@ function TouchableOpacity(props, forwardedRef) {
     onPressOut = props.onPressOut,
     rejectResponderTermination = props.rejectResponderTermination,
     style = props.style,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$9);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$a);
   var hostRef = React.useRef(null);
   var setRef = useMergeRefs$1(forwardedRef, hostRef);
   var _useState = React.useState('0s'),
@@ -7202,14 +7202,14 @@ function TouchableOpacity(props, forwardedRef) {
     focusable: !disabled && focusable !== false,
     pointerEvents: disabled ? 'box-none' : undefined,
     ref: setRef,
-    style: [styles$s.root, !disabled && styles$s.actionable, style, opacityOverride != null && {
+    style: [styles$t.root, !disabled && styles$t.actionable, style, opacityOverride != null && {
       opacity: opacityOverride
     }, {
       transitionDuration: duration
     }]
   }));
 }
-var styles$s = StyleSheet$1.create({
+var styles$t = StyleSheet$1.create({
   root: {
     transitionProperty: 'opacity',
     transitionDuration: '0.15s',
@@ -7307,6 +7307,44 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+var parseNavigationLink = function (link) {
+  var result;
+  if (link.startsWith('http://') || link.startsWith('https://') || link.startsWith('mailto:')) {
+    result = {
+      type: 'external',
+      target: link
+    };
+  } else if (link.startsWith('#')) {
+    result = {
+      type: 'modal',
+      target: link.slice(1)
+    };
+  } else {
+    result = {
+      type: 'internal',
+      target: link
+    };
+  }
+  return result;
+};
+
+var useNavigation = function (config) {
+  var handleNavigation = React.useCallback(function (link, ctaTarget) {
+    var _a;
+    var _b = parseNavigationLink(link),
+      type = _b.type,
+      target = _b.target;
+    var windowTarget = ctaTarget === 'SAME_FRAME' ? '_self' : '_blank';
+    if ((_a = config.navigationHandlers) === null || _a === void 0 ? void 0 : _a[type]) {
+      return config.navigationHandlers[type]({
+        target: target,
+        windowTarget: windowTarget
+      });
+    }
+  }, [config]);
+  return handleNavigation;
+};
+
 var baseUrl = 'https://api.staging.core.wlloyalty.net/v1';
 var useCreateRequestOptions = function (config) {
   return React.useCallback(function (options) {
@@ -7489,12 +7527,14 @@ var WllSdkContext = /*#__PURE__*/React.createContext(undefined);
 var WllSdkProvider = function (_a) {
   var children = _a.children,
     providedTheme = _a.theme,
-    config = _a.config;
-  var _b = React.useState(function () {
+    config = _a.config,
+    _b = _a.navigationConfig,
+    navigationConfig = _b === void 0 ? {} : _b;
+  var _c = React.useState(function () {
       return createTheme(providedTheme || {});
     }),
-    theme = _b[0],
-    setThemeState = _b[1];
+    theme = _c[0],
+    setThemeState = _c[1];
   var setTheme = React.useCallback(function (newTheme) {
     setThemeState(function (prevTheme) {
       return createTheme(__assign(__assign({}, prevTheme), newTheme));
@@ -7503,15 +7543,17 @@ var WllSdkProvider = function (_a) {
   var getGroupByID = useGetGroupByID(config);
   var getSectionByID = useGetSectionByID(config);
   var getTileByID = useGetTileByID(config);
+  var handleNavigation = useNavigation(navigationConfig);
   var contextValue = React.useMemo(function () {
     return {
       theme: theme,
       setTheme: setTheme,
       getGroupByID: getGroupByID,
       getSectionByID: getSectionByID,
-      getTileByID: getTileByID
+      getTileByID: getTileByID,
+      handleNavigation: handleNavigation
     };
-  }, [theme, setTheme, getGroupByID, getSectionByID, getTileByID]);
+  }, [theme, setTheme, getGroupByID, getSectionByID, getTileByID, handleNavigation]);
   return /*#__PURE__*/React.createElement(WllSdkContext.Provider, {
     value: contextValue
   }, children);
@@ -7602,7 +7644,7 @@ var dimensions = {
     width: 0
   }
 };
-var listeners = {};
+var listeners$1 = {};
 var shouldInit = canUseDOM$1;
 function update() {
   if (!canUseDOM$1) {
@@ -7647,8 +7689,8 @@ function update() {
 }
 function handleResize() {
   update();
-  if (Array.isArray(listeners['change'])) {
-    listeners['change'].forEach(handler => handler(dimensions));
+  if (Array.isArray(listeners$1['change'])) {
+    listeners$1['change'].forEach(handler => handler(dimensions));
   }
 }
 class Dimensions {
@@ -7675,8 +7717,8 @@ class Dimensions {
     }
   }
   static addEventListener(type, handler) {
-    listeners[type] = listeners[type] || [];
-    listeners[type].push(handler);
+    listeners$1[type] = listeners$1[type] || [];
+    listeners$1[type].push(handler);
     return {
       remove: () => {
         this.removeEventListener(type, handler);
@@ -7684,8 +7726,8 @@ class Dimensions {
     };
   }
   static removeEventListener(type, handler) {
-    if (Array.isArray(listeners[type])) {
-      listeners[type] = listeners[type].filter(_handler => _handler !== handler);
+    if (Array.isArray(listeners$1[type])) {
+      listeners$1[type] = listeners$1[type].filter(_handler => _handler !== handler);
     }
   }
 }
@@ -7730,7 +7772,7 @@ function createVariantSystem(baseStyle, variantStyles) {
   };
 }
 
-var styles$r = StyleSheet$1.create({
+var styles$s = StyleSheet$1.create({
   button: createResponsiveStyle({
     justifyContent: 'center',
     alignItems: 'center',
@@ -7745,7 +7787,7 @@ var styles$r = StyleSheet$1.create({
     fontSize: [12, 12, 18]
   })
 });
-var useButtonStyles = createVariantSystem(styles$r.button, function (theme) {
+var useButtonStyles = createVariantSystem(styles$s.button, function (theme) {
   return {
     primary: {
       backgroundColor: theme.primary
@@ -7761,7 +7803,7 @@ var useButtonStyles = createVariantSystem(styles$r.button, function (theme) {
     }
   };
 });
-var useTextStyles = createVariantSystem(styles$r.text, function (theme) {
+var useTextStyles = createVariantSystem(styles$s.text, function (theme) {
   return {
     primary: {
       color: theme.primaryText
@@ -7821,14 +7863,14 @@ var Column = function (_a) {
     _e = _a.style,
     style = _e === void 0 ? {} : _e;
   return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$q.column, {
+    style: [styles$r.column, {
       justifyContent: justifyMap[justify],
       alignItems: alignMap[align],
       flexDirection: direction
     }, style]
   }, children);
 };
-var styles$q = StyleSheet$1.create({
+var styles$r = StyleSheet$1.create({
   column: __assign({
     flex: 1
   }, createResponsiveStyle({
@@ -7858,7 +7900,7 @@ var Icon = function (_a) {
   }));
 };
 
-var _excluded$8 = ["animating", "color", "hidesWhenStopped", "size", "style"];
+var _excluded$9 = ["animating", "color", "hidesWhenStopped", "size", "style"];
 var createSvgCircle = style => /*#__PURE__*/React__namespace.createElement("circle", {
   cx: "16",
   cy: "16",
@@ -7877,7 +7919,7 @@ var ActivityIndicator = /*#__PURE__*/React__namespace.forwardRef((props, forward
     _props$size = props.size,
     size = _props$size === void 0 ? 'small' : _props$size,
     style = props.style,
-    other = _objectWithoutPropertiesLoose(props, _excluded$8);
+    other = _objectWithoutPropertiesLoose(props, _excluded$9);
   var svg = /*#__PURE__*/React__namespace.createElement("svg", {
     height: "100%",
     viewBox: "0 0 32 32",
@@ -7895,17 +7937,17 @@ var ActivityIndicator = /*#__PURE__*/React__namespace.forwardRef((props, forward
     "aria-valuemin": 0,
     ref: forwardedRef,
     role: "progressbar",
-    style: [styles$p.container, style]
+    style: [styles$q.container, style]
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
     children: svg,
     style: [typeof size === 'number' ? {
       height: size,
       width: size
-    } : indicatorSizes[size], styles$p.animation, !animating && styles$p.animationPause, !animating && hidesWhenStopped && styles$p.hidesWhenStopped]
+    } : indicatorSizes[size], styles$q.animation, !animating && styles$q.animationPause, !animating && hidesWhenStopped && styles$q.hidesWhenStopped]
   }));
 });
 ActivityIndicator.displayName = 'ActivityIndicator';
-var styles$p = StyleSheet$1.create({
+var styles$q = StyleSheet$1.create({
   container: {
     alignItems: 'center',
     justifyContent: 'center'
@@ -7945,7 +7987,7 @@ var ActivityIndicator$1 = ActivityIndicator;
 var LoadingIndicator = function () {
   var theme = useWllSdk().theme;
   return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$o.container, {
+    style: [styles$p.container, {
       borderRadius: theme.sizes.borderRadiusSm,
       padding: theme.sizes.md
     }]
@@ -7954,7 +7996,7 @@ var LoadingIndicator = function () {
     color: theme.primary
   }));
 };
-var styles$o = StyleSheet$1.create({
+var styles$p = StyleSheet$1.create({
   container: {
     width: '100%',
     height: '100%',
@@ -8089,7 +8131,7 @@ function _createForOfIteratorHelperLoose(r, e) {
   throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-var _excluded$7 = ["colors", "enabled", "onRefresh", "progressBackgroundColor", "progressViewOffset", "refreshing", "size", "tintColor", "title", "titleColor"];
+var _excluded$8 = ["colors", "enabled", "onRefresh", "progressBackgroundColor", "progressViewOffset", "refreshing", "size", "tintColor", "title", "titleColor"];
 function RefreshControl(props) {
   props.colors;
     props.enabled;
@@ -8101,7 +8143,7 @@ function RefreshControl(props) {
     props.tintColor;
     props.title;
     props.titleColor;
-    var rest = _objectWithoutPropertiesLoose(props, _excluded$7);
+    var rest = _objectWithoutPropertiesLoose(props, _excluded$8);
   return /*#__PURE__*/React.createElement(View$2, rest);
 }
 
@@ -8179,7 +8221,7 @@ var dismissKeyboard = () => {
 };
 var dismissKeyboard$1 = dismissKeyboard;
 
-var _excluded$6 = ["onScroll", "onTouchMove", "onWheel", "scrollEnabled", "scrollEventThrottle", "showsHorizontalScrollIndicator", "showsVerticalScrollIndicator", "style"];
+var _excluded$7 = ["onScroll", "onTouchMove", "onWheel", "scrollEnabled", "scrollEventThrottle", "showsHorizontalScrollIndicator", "showsVerticalScrollIndicator", "style"];
 function normalizeScrollEvent(e) {
   return {
     nativeEvent: {
@@ -8230,7 +8272,7 @@ var ScrollViewBase = /*#__PURE__*/React__namespace.forwardRef((props, forwardedR
     showsHorizontalScrollIndicator = props.showsHorizontalScrollIndicator,
     showsVerticalScrollIndicator = props.showsVerticalScrollIndicator,
     style = props.style,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$6);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$7);
   var scrollState = React__namespace.useRef({
     isScrolling: false,
     scrollLastTick: 0
@@ -8290,14 +8332,14 @@ var ScrollViewBase = /*#__PURE__*/React__namespace.forwardRef((props, forwardedR
     onTouchMove: createPreventableScrollHandler(onTouchMove),
     onWheel: createPreventableScrollHandler(onWheel),
     ref: useMergeRefs$1(scrollRef, forwardedRef),
-    style: [style, !scrollEnabled && styles$n.scrollDisabled, hideScrollbar && styles$n.hideScrollbar]
+    style: [style, !scrollEnabled && styles$o.scrollDisabled, hideScrollbar && styles$o.hideScrollbar]
   }));
 });
 
 // Chrome doesn't support e.preventDefault in this case; touch-action must be
 // used to disable scrolling.
 // https://developers.google.com/web/updates/2017/01/scrolling-intervention
-var styles$n = StyleSheet$1.create({
+var styles$o = StyleSheet$1.create({
   scrollDisabled: {
     overflowX: 'hidden',
     overflowY: 'hidden',
@@ -8329,22 +8371,22 @@ function makeEmptyFunction(arg) {
  */
 
 
-var emptyFunction$1 = function emptyFunction() {};
+var emptyFunction$2 = function emptyFunction() {};
 
-emptyFunction$1.thatReturns = makeEmptyFunction;
-emptyFunction$1.thatReturnsFalse = makeEmptyFunction(false);
-emptyFunction$1.thatReturnsTrue = makeEmptyFunction(true);
-emptyFunction$1.thatReturnsNull = makeEmptyFunction(null);
+emptyFunction$2.thatReturns = makeEmptyFunction;
+emptyFunction$2.thatReturnsFalse = makeEmptyFunction(false);
+emptyFunction$2.thatReturnsTrue = makeEmptyFunction(true);
+emptyFunction$2.thatReturnsNull = makeEmptyFunction(null);
 
-emptyFunction$1.thatReturnsThis = function () {
+emptyFunction$2.thatReturnsThis = function () {
   return this;
 };
 
-emptyFunction$1.thatReturnsArgument = function (arg) {
+emptyFunction$2.thatReturnsArgument = function (arg) {
   return arg;
 };
 
-var emptyFunction_1 = emptyFunction$1;
+var emptyFunction_1 = emptyFunction$2;
 
 /**
  * Copyright (c) 2014-present, Facebook, Inc.
@@ -8354,7 +8396,7 @@ var emptyFunction_1 = emptyFunction$1;
  *
  */
 
-var emptyFunction = emptyFunction_1;
+var emptyFunction$1 = emptyFunction_1;
 /**
  * Similar to invariant but only logs a warning if the condition is not met.
  * This can be used to log issues in development environments in critical
@@ -8397,13 +8439,13 @@ var warning = process.env.NODE_ENV !== "production" ? function (condition, forma
 
     printWarning.apply(void 0, [format].concat(args));
   }
-} : emptyFunction;
+} : emptyFunction$1;
 var warning_1 = warning;
 
 var warning$1 = /*@__PURE__*/getDefaultExportFromCjs(warning_1);
 
-var _excluded$5 = ["contentContainerStyle", "horizontal", "onContentSizeChange", "refreshControl", "stickyHeaderIndices", "pagingEnabled", "forwardedRef", "keyboardDismissMode", "onScroll", "centerContent"];
-var emptyObject = {};
+var _excluded$6 = ["contentContainerStyle", "horizontal", "onContentSizeChange", "refreshControl", "stickyHeaderIndices", "pagingEnabled", "forwardedRef", "keyboardDismissMode", "onScroll", "centerContent"];
+var emptyObject$1 = {};
 var IS_ANIMATING_TOUCH_START_THRESHOLD_MS = 16;
 let ScrollView$1 = class ScrollView extends React.Component {
   constructor() {
@@ -8487,7 +8529,7 @@ let ScrollView$1 = class ScrollView extends React.Component {
       if (typeof x === 'number') {
         console.warn('`scrollResponderScrollTo(x, y, animated)` is deprecated. Use `scrollResponderScrollTo({x: 5, y: 5, animated: true})` instead.');
       } else {
-        var _ref = x || emptyObject;
+        var _ref = x || emptyObject$1;
         x = _ref.x;
         y = _ref.y;
         animated = _ref.animated;
@@ -8582,7 +8624,7 @@ let ScrollView$1 = class ScrollView extends React.Component {
       if (typeof y === 'number') {
         console.warn('`scrollTo(y, x, animated)` is deprecated. Use `scrollTo({x: 5, y: 5, animated: true})` instead.');
       } else {
-        var _ref2 = y || emptyObject;
+        var _ref2 = y || emptyObject$1;
         x = _ref2.x;
         y = _ref2.y;
         animated = _ref2.animated;
@@ -8919,7 +8961,7 @@ let ScrollView$1 = class ScrollView extends React.Component {
       _this$props.keyboardDismissMode;
       _this$props.onScroll;
       var centerContent = _this$props.centerContent,
-      other = _objectWithoutPropertiesLoose(_this$props, _excluded$5);
+      other = _objectWithoutPropertiesLoose(_this$props, _excluded$6);
     if (process.env.NODE_ENV !== 'production' && this.props.style) {
       var style = StyleSheet$1.flatten(this.props.style);
       var childLayoutProps = ['alignItems', 'justifyContent'].filter(prop => style && style[prop] !== undefined);
@@ -8936,7 +8978,7 @@ let ScrollView$1 = class ScrollView extends React.Component {
       var isSticky = hasStickyHeaderIndices && stickyHeaderIndices.indexOf(i) > -1;
       if (child != null && (isSticky || pagingEnabled)) {
         return /*#__PURE__*/React.createElement(View$2, {
-          style: [isSticky && styles$m.stickyHeader, pagingEnabled && styles$m.pagingEnabledChild]
+          style: [isSticky && styles$n.stickyHeader, pagingEnabled && styles$n.pagingEnabledChild]
         }, child);
       } else {
         return child;
@@ -8946,10 +8988,10 @@ let ScrollView$1 = class ScrollView extends React.Component {
       children: children,
       collapsable: false,
       ref: this._setInnerViewRef,
-      style: [horizontal && styles$m.contentContainerHorizontal, centerContent && styles$m.contentContainerCenterContent, contentContainerStyle]
+      style: [horizontal && styles$n.contentContainerHorizontal, centerContent && styles$n.contentContainerCenterContent, contentContainerStyle]
     }));
-    var baseStyle = horizontal ? styles$m.baseHorizontal : styles$m.baseVertical;
-    var pagingEnabledStyle = horizontal ? styles$m.pagingEnabledHorizontal : styles$m.pagingEnabledVertical;
+    var baseStyle = horizontal ? styles$n.baseHorizontal : styles$n.baseVertical;
+    var pagingEnabledStyle = horizontal ? styles$n.pagingEnabledHorizontal : styles$n.pagingEnabledVertical;
     var props = _objectSpread2(_objectSpread2({}, other), {}, {
       style: [baseStyle, pagingEnabled && pagingEnabledStyle, this.props.style],
       onTouchStart: this.scrollResponderHandleTouchStart,
@@ -8992,7 +9034,7 @@ var commonStyle = {
   // iOS native scrolling
   WebkitOverflowScrolling: 'touch'
 };
-var styles$m = StyleSheet$1.create({
+var styles$n = StyleSheet$1.create({
   baseVertical: _objectSpread2(_objectSpread2({}, commonStyle), {}, {
     flexDirection: 'column',
     overflowX: 'hidden',
@@ -10205,7 +10247,7 @@ class CellRenderer extends React__namespace.Component {
     ItemSeparatorComponent :
     // $FlowFixMe[incompatible-type]
     ItemSeparatorComponent && /*#__PURE__*/React__namespace.createElement(ItemSeparatorComponent, this.state.separatorProps);
-    var cellStyle = inversionStyle ? horizontal ? [styles$l.rowReverse, inversionStyle] : [styles$l.columnReverse, inversionStyle] : horizontal ? [styles$l.row, inversionStyle] : inversionStyle;
+    var cellStyle = inversionStyle ? horizontal ? [styles$m.rowReverse, inversionStyle] : [styles$m.columnReverse, inversionStyle] : horizontal ? [styles$m.row, inversionStyle] : inversionStyle;
     var result = !CellRendererComponent ? /*#__PURE__*/React__namespace.createElement(View$2, _extends$1({
       style: cellStyle,
       onFocusCapture: onCellFocusCapture
@@ -10225,7 +10267,7 @@ class CellRenderer extends React__namespace.Component {
     }, result);
   }
 }
-var styles$l = StyleSheet$1.create({
+var styles$m = StyleSheet$1.create({
   row: {
     flexDirection: 'row'
   },
@@ -11405,7 +11447,7 @@ class VirtualizedList extends StateSafePureComponent {
     var _this$props6 = this.props,
       data = _this$props6.data,
       horizontal = _this$props6.horizontal;
-    var inversionStyle = this.props.inverted ? horizontalOrDefault(this.props.horizontal) ? styles$k.horizontallyInverted : styles$k.verticallyInverted : null;
+    var inversionStyle = this.props.inverted ? horizontalOrDefault(this.props.horizontal) ? styles$l.horizontallyInverted : styles$l.verticallyInverted : null;
     var cells = [];
     var stickyIndicesFromProps = new Set(this.props.stickyHeaderIndices);
     var stickyHeaderIndices = [];
@@ -11569,7 +11611,7 @@ class VirtualizedList extends StateSafePureComponent {
     }*/
     if (this.props.debug) {
       return /*#__PURE__*/React__namespace.createElement(View$2, {
-        style: styles$k.debug
+        style: styles$l.debug
       }, ret, this._renderDebugOverlay());
     } else {
       return ret;
@@ -11686,20 +11728,20 @@ class VirtualizedList extends StateSafePureComponent {
     var visTop = this._scrollMetrics.offset;
     var visLen = this._scrollMetrics.visibleLength;
     return /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$k.debugOverlayBase, styles$k.debugOverlay]
+      style: [styles$l.debugOverlayBase, styles$l.debugOverlay]
     }, framesInLayout.map((f, ii) => /*#__PURE__*/React__namespace.createElement(View$2, {
       key: 'f' + ii,
-      style: [styles$k.debugOverlayBase, styles$k.debugOverlayFrame, {
+      style: [styles$l.debugOverlayBase, styles$l.debugOverlayFrame, {
         top: f.offset * normalize,
         height: f.length * normalize
       }]
     })), /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$k.debugOverlayBase, styles$k.debugOverlayFrameLast, {
+      style: [styles$l.debugOverlayBase, styles$l.debugOverlayFrameLast, {
         top: windowTop * normalize,
         height: windowLen * normalize
       }]
     }), /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$k.debugOverlayBase, styles$k.debugOverlayFrameVis, {
+      style: [styles$l.debugOverlayBase, styles$l.debugOverlayFrameVis, {
         top: visTop * normalize,
         height: visLen * normalize
       }]
@@ -11840,7 +11882,7 @@ class VirtualizedList extends StateSafePureComponent {
   }
 }
 VirtualizedList.contextType = VirtualizedListContext;
-var styles$k = StyleSheet$1.create({
+var styles$l = StyleSheet$1.create({
   verticallyInverted: {
     transform: 'scaleY(-1)'
   },
@@ -11928,7 +11970,7 @@ function memoizeOne(resultFn, isEqual) {
     return memoized;
 }
 
-var _excluded$4 = ["numColumns", "columnWrapperStyle", "removeClippedSubviews", "strictMode"];
+var _excluded$5 = ["numColumns", "columnWrapperStyle", "removeClippedSubviews", "strictMode"];
 /**
  * Default Props Helper Functions
  * Use the following helper functions for default values
@@ -12217,7 +12259,7 @@ let FlatList$1 = class FlatList extends React__namespace.PureComponent {
             _index = info.index;
           invariant$1(Array.isArray(_item2), 'Expected array of items with numColumns > 1');
           return /*#__PURE__*/React__namespace.createElement(View$2, {
-            style: [styles$j.row, columnWrapperStyle]
+            style: [styles$k.row, columnWrapperStyle]
           }, _item2.map((it, kk) => {
             var element = render({
               // $FlowFixMe[incompatible-call]
@@ -12327,7 +12369,7 @@ let FlatList$1 = class FlatList extends React__namespace.PureComponent {
       _removeClippedSubviews = _this$props.removeClippedSubviews,
       _this$props$strictMod = _this$props.strictMode,
       strictMode = _this$props$strictMod === void 0 ? false : _this$props$strictMod,
-      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
+      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$5);
     var renderer = strictMode ? this._memoizedRenderer : this._renderer;
     return (
       /*#__PURE__*/
@@ -12343,7 +12385,7 @@ let FlatList$1 = class FlatList extends React__namespace.PureComponent {
     );
   }
 };
-var styles$j = StyleSheet$1.create({
+var styles$k = StyleSheet$1.create({
   row: {
     flexDirection: 'row'
   }
@@ -14312,7 +14354,7 @@ function useMergeRefs() {
   );
 }
 
-var _excluded$3 = ["style"];
+var _excluded$4 = ["style"];
 /**
  * Experimental implementation of `createAnimatedComponent` that is intended to
  * be compatible with concurrent rendering.
@@ -14333,7 +14375,7 @@ function createAnimatedComponent(Component) {
       style = reducedProps.style;
     var _ref = passthroughAnimatedPropExplicitValues !== null && passthroughAnimatedPropExplicitValues !== void 0 ? passthroughAnimatedPropExplicitValues : {},
       passthroughStyle = _ref.style,
-      passthroughProps = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+      passthroughProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
     var mergedStyle = [style, passthroughStyle];
     return /*#__PURE__*/React__namespace.createElement(Component, _extends$1({}, reducedProps, passthroughProps, {
       style: mergedStyle,
@@ -14560,7 +14602,7 @@ class PixelRatio {
   }
 }
 
-var _excluded$2 = ["aria-label", "accessibilityLabel", "blurRadius", "defaultSource", "draggable", "onError", "onLayout", "onLoad", "onLoadEnd", "onLoadStart", "pointerEvents", "source", "style"];
+var _excluded$3 = ["aria-label", "accessibilityLabel", "blurRadius", "defaultSource", "draggable", "onError", "onLayout", "onLoad", "onLoadEnd", "onLoadStart", "pointerEvents", "source", "style"];
 var ERRORED = 'ERRORED';
 var LOADED = 'LOADED';
 var LOADING = 'LOADING';
@@ -14688,7 +14730,7 @@ var Image$1 = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
     pointerEvents = props.pointerEvents,
     source = props.source,
     style = props.style,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$2);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$3);
   var ariaLabel = _ariaLabel || accessibilityLabel;
   if (process.env.NODE_ENV !== 'production') {
     if (props.children) {
@@ -14730,7 +14772,7 @@ var Image$1 = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
   // Accessibility image allows users to trigger the browser's image context menu
   var hiddenImage = displayImageUri ? createElement$1('img', {
     alt: ariaLabel || '',
-    style: styles$i.accessibilityImage$raw,
+    style: styles$j.accessibilityImage$raw,
     draggable: draggable || false,
     ref: hiddenImageRef,
     src: displayImageUri
@@ -14802,14 +14844,14 @@ var Image$1 = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
     onLayout: handleLayout,
     pointerEvents: pointerEvents,
     ref: ref,
-    style: [styles$i.root, hasTextAncestor && styles$i.inline, imageSizeStyle, style, styles$i.undo,
+    style: [styles$j.root, hasTextAncestor && styles$j.inline, imageSizeStyle, style, styles$j.undo,
     // TEMP: avoid deprecated shadow props regression
     // until Image refactored to use createElement.
     {
       boxShadow: null
     }]
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$i.image, resizeModeStyles[resizeMode], {
+    style: [styles$j.image, resizeModeStyles[resizeMode], {
       backgroundImage,
       filter
     }, backgroundSize != null && {
@@ -14831,7 +14873,7 @@ ImageWithStatics.prefetch = function (uri) {
 ImageWithStatics.queryCache = function (uris) {
   return ImageLoader$1.queryCache(uris);
 };
-var styles$i = StyleSheet$1.create({
+var styles$j = StyleSheet$1.create({
   root: {
     flexBasis: 'auto',
     overflow: 'hidden',
@@ -14916,7 +14958,7 @@ var ScrollViewWithEventThrottle = /*#__PURE__*/React__namespace.forwardRef((prop
 })));
 var ScrollView = createAnimatedComponent(ScrollViewWithEventThrottle);
 
-var _excluded$1 = ["ItemSeparatorComponent", "SectionSeparatorComponent", "renderItem", "renderSectionFooter", "renderSectionHeader", "sections", "stickySectionHeadersEnabled"];
+var _excluded$2 = ["ItemSeparatorComponent", "SectionSeparatorComponent", "renderItem", "renderSectionFooter", "renderSectionHeader", "sections", "stickySectionHeadersEnabled"];
 /**
  * Right now this just flattens everything into one list and uses VirtualizedList under the
  * hood. The only operation that might not scale well is concatting the data arrays of all the
@@ -15073,7 +15115,7 @@ class VirtualizedSectionList extends React__namespace.PureComponent {
       _this$props.renderSectionHeader;
       _this$props.sections;
       _this$props.stickySectionHeadersEnabled;
-      var passThroughProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
+      var passThroughProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
     var listHeaderOffset = this.props.ListHeaderComponent ? 1 : 0;
     var stickyHeaderIndices = this.props.stickySectionHeadersEnabled ? [] : undefined;
     var itemCount = 0;
@@ -15293,7 +15335,7 @@ var VirtualizedSectionList$1 = VirtualizedSectionList;
  * @format
  */
 
-var _excluded = ["stickySectionHeadersEnabled"];
+var _excluded$1 = ["stickySectionHeadersEnabled"];
 /**
  * A performant interface for rendering sectioned lists, supporting the most handy features:
  *
@@ -15410,7 +15452,7 @@ let SectionList$1 = class SectionList extends React__namespace.PureComponent {
   render() {
     var _this$props = this.props,
       _stickySectionHeadersEnabled = _this$props.stickySectionHeadersEnabled,
-      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
     var stickySectionHeadersEnabled = _stickySectionHeadersEnabled !== null && _stickySectionHeadersEnabled !== void 0 ? _stickySectionHeadersEnabled : Platform$1.OS === 'ios';
     return /*#__PURE__*/React__namespace.createElement(VirtualizedSectionList$1, _extends$1({}, restProps, {
       stickySectionHeadersEnabled: stickySectionHeadersEnabled,
@@ -17935,7 +17977,7 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-var styles$h = StyleSheet$1.create({
+var styles$i = StyleSheet$1.create({
   imageOverlay: {
     position: 'absolute',
     left: 0,
@@ -17970,25 +18012,25 @@ var ProgressiveImage = function (_a) {
   var baseColor = theme.alphaDerivedPrimary[20];
   var desaturatedColor = desaturateColor(baseColor);
   return /*#__PURE__*/React.createElement(View$2, {
-    style: [styles$h.container, style, {
+    style: [styles$i.container, style, {
       backgroundColor: isDesaturated ? desaturatedColor : baseColor
     }]
   }, isDesaturated ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Animated$1.Image, _extends({}, props, {
     source: source,
-    style: [styles$h.imageOverlay, {
+    style: [styles$i.imageOverlay, {
       opacity: imageAnimated,
       tintColor: desaturatedColor
     }],
     onLoad: onImageLoad
   })), /*#__PURE__*/React.createElement(Animated$1.Image, _extends({}, props, {
     source: source,
-    style: [styles$h.imageOverlay, {
+    style: [styles$i.imageOverlay, {
       opacity: 0.1
     }],
     onLoad: onImageLoad
   }))) : /*#__PURE__*/React.createElement(Animated$1.Image, _extends({}, props, {
     source: source,
-    style: [styles$h.imageOverlay, {
+    style: [styles$i.imageOverlay, {
       opacity: imageAnimated
     }],
     onLoad: onImageLoad
@@ -18000,10 +18042,10 @@ var RowHeader = function (_a) {
     style = _a.style,
     props = __rest(_a, ["children", "style"]);
   return /*#__PURE__*/React__namespace.createElement(View$2, _extends({
-    style: [styles$g.header, style]
+    style: [styles$h.header, style]
   }, props), children);
 };
-var styles$g = StyleSheet$1.create({
+var styles$h = StyleSheet$1.create({
   header: createResponsiveStyle({
     flexDirection: 'row',
     alignItems: 'center',
@@ -18065,13 +18107,605 @@ var Text = function (_a) {
   };
   var variantStyle = getVariantStyle(variant);
   return /*#__PURE__*/React__namespace.createElement(Text$3, _extends({
-    style: [styles$f.base, variantStyle, style]
+    style: [styles$g.base, variantStyle, style]
   }, props));
 };
-var styles$f = StyleSheet$1.create({
+var styles$g = StyleSheet$1.create({
   base: {}
 });
 
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+
+var emptyFunction = () => {};
+function supportsPassiveEvents() {
+  var supported = false;
+  // Check if browser supports event with passive listeners
+  // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support
+  if (canUseDOM$1) {
+    try {
+      var options = {};
+      Object.defineProperty(options, 'passive', {
+        get() {
+          supported = true;
+          return false;
+        }
+      });
+      window.addEventListener('test', null, options);
+      window.removeEventListener('test', null, options);
+    } catch (e) {}
+  }
+  return supported;
+}
+var canUsePassiveEvents = supportsPassiveEvents();
+function getOptions(options) {
+  if (options == null) {
+    return false;
+  }
+  return canUsePassiveEvents ? options : Boolean(options.capture);
+}
+
+/**
+ * Shim generic API compatibility with ReactDOM's synthetic events, without needing the
+ * large amount of code ReactDOM uses to do this. Ideally we wouldn't use a synthetic
+ * event wrapper at all.
+ */
+function isPropagationStopped() {
+  return this.cancelBubble;
+}
+function isDefaultPrevented() {
+  return this.defaultPrevented;
+}
+function normalizeEvent(event) {
+  event.nativeEvent = event;
+  event.persist = emptyFunction;
+  event.isDefaultPrevented = isDefaultPrevented;
+  event.isPropagationStopped = isPropagationStopped;
+  return event;
+}
+
+/**
+ *
+ */
+function addEventListener(target, type, listener, options) {
+  var opts = getOptions(options);
+  var compatListener = e => listener(normalizeEvent(e));
+  target.addEventListener(type, compatListener, opts);
+  return function removeEventListener() {
+    if (target != null) {
+      target.removeEventListener(type, compatListener, opts);
+    }
+  };
+}
+
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+
+var supportsPointerEvent$1 = () => !!(typeof window !== 'undefined' && window.PointerEvent != null);
+var activeModality = 'keyboard';
+var modality = 'keyboard';
+var previousModality;
+var previousActiveModality;
+var isEmulatingMouseEvents = false;
+var listeners = new Set();
+var KEYBOARD = 'keyboard';
+var MOUSE = 'mouse';
+var TOUCH = 'touch';
+var BLUR = 'blur';
+var CONTEXTMENU = 'contextmenu';
+var FOCUS = 'focus';
+var KEYDOWN = 'keydown';
+var MOUSEDOWN = 'mousedown';
+var MOUSEMOVE = 'mousemove';
+var MOUSEUP = 'mouseup';
+var POINTERDOWN = 'pointerdown';
+var POINTERMOVE = 'pointermove';
+var SCROLL = 'scroll';
+var SELECTIONCHANGE = 'selectionchange';
+var TOUCHCANCEL = 'touchcancel';
+var TOUCHMOVE = 'touchmove';
+var TOUCHSTART = 'touchstart';
+var VISIBILITYCHANGE = 'visibilitychange';
+var bubbleOptions = {
+  passive: true
+};
+var captureOptions = {
+  capture: true,
+  passive: true
+};
+function restoreModality() {
+  if (previousModality != null || previousActiveModality != null) {
+    if (previousModality != null) {
+      modality = previousModality;
+      previousModality = null;
+    }
+    if (previousActiveModality != null) {
+      activeModality = previousActiveModality;
+      previousActiveModality = null;
+    }
+    callListeners();
+  }
+}
+function onBlurWindow() {
+  previousModality = modality;
+  previousActiveModality = activeModality;
+  activeModality = KEYBOARD;
+  modality = KEYBOARD;
+  callListeners();
+  // for fallback events
+  isEmulatingMouseEvents = false;
+}
+function onFocusWindow() {
+  restoreModality();
+}
+function onKeyDown(event) {
+  if (event.metaKey || event.altKey || event.ctrlKey) {
+    return;
+  }
+  if (modality !== KEYBOARD) {
+    modality = KEYBOARD;
+    activeModality = KEYBOARD;
+    callListeners();
+  }
+}
+function onVisibilityChange() {
+  if (document.visibilityState !== 'hidden') {
+    restoreModality();
+  }
+}
+function onPointerish(event) {
+  var eventType = event.type;
+  if (supportsPointerEvent$1()) {
+    if (eventType === POINTERDOWN) {
+      if (activeModality !== event.pointerType) {
+        modality = event.pointerType;
+        activeModality = event.pointerType;
+        callListeners();
+      }
+      return;
+    }
+    if (eventType === POINTERMOVE) {
+      if (modality !== event.pointerType) {
+        modality = event.pointerType;
+        callListeners();
+      }
+      return;
+    }
+  }
+  // Fallback for non-PointerEvent environment
+  else {
+    if (!isEmulatingMouseEvents) {
+      if (eventType === MOUSEDOWN) {
+        if (activeModality !== MOUSE) {
+          modality = MOUSE;
+          activeModality = MOUSE;
+          callListeners();
+        }
+      }
+      if (eventType === MOUSEMOVE) {
+        if (modality !== MOUSE) {
+          modality = MOUSE;
+          callListeners();
+        }
+      }
+    }
+
+    // Flag when browser may produce emulated events
+    if (eventType === TOUCHSTART) {
+      isEmulatingMouseEvents = true;
+      if (event.touches && event.touches.length > 1) {
+        isEmulatingMouseEvents = false;
+      }
+      if (activeModality !== TOUCH) {
+        modality = TOUCH;
+        activeModality = TOUCH;
+        callListeners();
+      }
+      return;
+    }
+
+    // Remove flag after emulated events are finished or cancelled, and if an
+    // event occurs that cuts short a touch event sequence.
+    if (eventType === CONTEXTMENU || eventType === MOUSEUP || eventType === SELECTIONCHANGE || eventType === SCROLL || eventType === TOUCHCANCEL || eventType === TOUCHMOVE) {
+      isEmulatingMouseEvents = false;
+    }
+  }
+}
+if (canUseDOM$1) {
+  // Window events
+  addEventListener(window, BLUR, onBlurWindow, bubbleOptions);
+  addEventListener(window, FOCUS, onFocusWindow, bubbleOptions);
+  // Must be capture phase because 'stopPropagation' might prevent these
+  // events bubbling to the document.
+  addEventListener(document, KEYDOWN, onKeyDown, captureOptions);
+  addEventListener(document, VISIBILITYCHANGE, onVisibilityChange, captureOptions);
+  addEventListener(document, POINTERDOWN, onPointerish, captureOptions);
+  addEventListener(document, POINTERMOVE, onPointerish, captureOptions);
+  // Fallback events
+  addEventListener(document, CONTEXTMENU, onPointerish, captureOptions);
+  addEventListener(document, MOUSEDOWN, onPointerish, captureOptions);
+  addEventListener(document, MOUSEMOVE, onPointerish, captureOptions);
+  addEventListener(document, MOUSEUP, onPointerish, captureOptions);
+  addEventListener(document, TOUCHCANCEL, onPointerish, captureOptions);
+  addEventListener(document, TOUCHMOVE, onPointerish, captureOptions);
+  addEventListener(document, TOUCHSTART, onPointerish, captureOptions);
+  addEventListener(document, SELECTIONCHANGE, onPointerish, captureOptions);
+  addEventListener(document, SCROLL, onPointerish, captureOptions);
+}
+function callListeners() {
+  var value = {
+    activeModality,
+    modality
+  };
+  listeners.forEach(listener => {
+    listener(value);
+  });
+}
+function getModality() {
+  return modality;
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+
+/**
+ * This can be used with any event type include custom events.
+ *
+ * const click = useEvent('click', options);
+ * useEffect(() => {
+ *   click.setListener(target, onClick);
+ *   return () => click.clear();
+ * }).
+ */
+function useEvent(eventType, options) {
+  var targetListeners = useStable$1(() => new Map());
+  var addListener = useStable$1(() => {
+    return (target, callback) => {
+      var removeTargetListener = targetListeners.get(target);
+      if (removeTargetListener != null) {
+        removeTargetListener();
+      }
+      if (callback == null) {
+        targetListeners.delete(target);
+        callback = () => {};
+      }
+      var removeEventListener = addEventListener(target, eventType, callback, options);
+      targetListeners.set(target, removeEventListener);
+      return removeEventListener;
+    };
+  });
+  useLayoutEffect(() => {
+    return () => {
+      targetListeners.forEach(removeListener => {
+        removeListener();
+      });
+      targetListeners.clear();
+    };
+  }, [targetListeners]);
+  return addListener;
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+
+
+/**
+ * Types
+ */
+
+/**
+ * Implementation
+ */
+
+var emptyObject = {};
+var opts = {
+  passive: true
+};
+var lockEventType = 'react-gui:hover:lock';
+var unlockEventType = 'react-gui:hover:unlock';
+var supportsPointerEvent = () => !!(typeof window !== 'undefined' && window.PointerEvent != null);
+function dispatchCustomEvent(target, type, payload) {
+  var event = document.createEvent('CustomEvent');
+  var _ref = payload || emptyObject,
+    _ref$bubbles = _ref.bubbles,
+    bubbles = _ref$bubbles === void 0 ? true : _ref$bubbles,
+    _ref$cancelable = _ref.cancelable,
+    cancelable = _ref$cancelable === void 0 ? true : _ref$cancelable,
+    detail = _ref.detail;
+  event.initCustomEvent(type, bubbles, cancelable, detail);
+  target.dispatchEvent(event);
+}
+
+// This accounts for the non-PointerEvent fallback events.
+function getPointerType(event) {
+  var pointerType = event.pointerType;
+  return pointerType != null ? pointerType : getModality();
+}
+function useHover(targetRef, config) {
+  var contain = config.contain,
+    disabled = config.disabled,
+    onHoverStart = config.onHoverStart,
+    onHoverChange = config.onHoverChange,
+    onHoverUpdate = config.onHoverUpdate,
+    onHoverEnd = config.onHoverEnd;
+  var canUsePE = supportsPointerEvent();
+  var addMoveListener = useEvent(canUsePE ? 'pointermove' : 'mousemove', opts);
+  var addEnterListener = useEvent(canUsePE ? 'pointerenter' : 'mouseenter', opts);
+  var addLeaveListener = useEvent(canUsePE ? 'pointerleave' : 'mouseleave', opts);
+  // These custom events are used to implement the "contain" prop.
+  var addLockListener = useEvent(lockEventType, opts);
+  var addUnlockListener = useEvent(unlockEventType, opts);
+  useLayoutEffect(() => {
+    var target = targetRef.current;
+    if (target !== null) {
+      /**
+       * End the hover gesture
+       */
+      var hoverEnd = function hoverEnd(e) {
+        if (onHoverEnd != null) {
+          onHoverEnd(e);
+        }
+        if (onHoverChange != null) {
+          onHoverChange(false);
+        }
+        // Remove the listeners once finished.
+        addMoveListener(target, null);
+        addLeaveListener(target, null);
+      };
+
+      /**
+       * Leave element
+       */
+      var leaveListener = function leaveListener(e) {
+        var target = targetRef.current;
+        if (target != null && getPointerType(e) !== 'touch') {
+          if (contain) {
+            dispatchCustomEvent(target, unlockEventType);
+          }
+          hoverEnd(e);
+        }
+      };
+
+      /**
+       * Move within element
+       */
+      var moveListener = function moveListener(e) {
+        if (getPointerType(e) !== 'touch') {
+          if (onHoverUpdate != null) {
+            // Not all browsers have these properties
+            if (e.x == null) {
+              e.x = e.clientX;
+            }
+            if (e.y == null) {
+              e.y = e.clientY;
+            }
+            onHoverUpdate(e);
+          }
+        }
+      };
+
+      /**
+       * Start the hover gesture
+       */
+      var hoverStart = function hoverStart(e) {
+        if (onHoverStart != null) {
+          onHoverStart(e);
+        }
+        if (onHoverChange != null) {
+          onHoverChange(true);
+        }
+        // Set the listeners needed for the rest of the hover gesture.
+        if (onHoverUpdate != null) {
+          addMoveListener(target, !disabled ? moveListener : null);
+        }
+        addLeaveListener(target, !disabled ? leaveListener : null);
+      };
+
+      /**
+       * Enter element
+       */
+      var enterListener = function enterListener(e) {
+        var target = targetRef.current;
+        if (target != null && getPointerType(e) !== 'touch') {
+          if (contain) {
+            dispatchCustomEvent(target, lockEventType);
+          }
+          hoverStart(e);
+          var lockListener = function lockListener(lockEvent) {
+            if (lockEvent.target !== target) {
+              hoverEnd(e);
+            }
+          };
+          var unlockListener = function unlockListener(lockEvent) {
+            if (lockEvent.target !== target) {
+              hoverStart(e);
+            }
+          };
+          addLockListener(target, !disabled ? lockListener : null);
+          addUnlockListener(target, !disabled ? unlockListener : null);
+        }
+      };
+      addEnterListener(target, !disabled ? enterListener : null);
+    }
+  }, [addEnterListener, addMoveListener, addLeaveListener, addLockListener, addUnlockListener, contain, disabled, onHoverStart, onHoverChange, onHoverUpdate, onHoverEnd, targetRef]);
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+
+var _excluded = ["children", "delayLongPress", "delayPressIn", "delayPressOut", "disabled", "onBlur", "onContextMenu", "onFocus", "onHoverIn", "onHoverOut", "onKeyDown", "onLongPress", "onPress", "onPressMove", "onPressIn", "onPressOut", "style", "tabIndex", "testOnly_hovered", "testOnly_pressed"];
+/**
+ * Component used to build display components that should respond to whether the
+ * component is currently pressed or not.
+ */
+function Pressable(props, forwardedRef) {
+  var children = props.children,
+    delayLongPress = props.delayLongPress,
+    delayPressIn = props.delayPressIn,
+    delayPressOut = props.delayPressOut,
+    disabled = props.disabled,
+    onBlur = props.onBlur,
+    onContextMenu = props.onContextMenu,
+    onFocus = props.onFocus,
+    onHoverIn = props.onHoverIn,
+    onHoverOut = props.onHoverOut,
+    onKeyDown = props.onKeyDown,
+    onLongPress = props.onLongPress,
+    onPress = props.onPress,
+    onPressMove = props.onPressMove,
+    onPressIn = props.onPressIn,
+    onPressOut = props.onPressOut,
+    style = props.style,
+    tabIndex = props.tabIndex,
+    testOnly_hovered = props.testOnly_hovered,
+    testOnly_pressed = props.testOnly_pressed,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  var _useForceableState = useForceableState(testOnly_hovered === true),
+    hovered = _useForceableState[0],
+    setHovered = _useForceableState[1];
+  var _useForceableState2 = useForceableState(false),
+    focused = _useForceableState2[0],
+    setFocused = _useForceableState2[1];
+  var _useForceableState3 = useForceableState(testOnly_pressed === true),
+    pressed = _useForceableState3[0],
+    setPressed = _useForceableState3[1];
+  var hostRef = React.useRef(null);
+  var setRef = useMergeRefs$1(forwardedRef, hostRef);
+  var pressConfig = React.useMemo(() => ({
+    delayLongPress,
+    delayPressStart: delayPressIn,
+    delayPressEnd: delayPressOut,
+    disabled,
+    onLongPress,
+    onPress,
+    onPressChange: setPressed,
+    onPressStart: onPressIn,
+    onPressMove,
+    onPressEnd: onPressOut
+  }), [delayLongPress, delayPressIn, delayPressOut, disabled, onLongPress, onPress, onPressIn, onPressMove, onPressOut, setPressed]);
+  var pressEventHandlers = usePressEvents(hostRef, pressConfig);
+  var onContextMenuPress = pressEventHandlers.onContextMenu,
+    onKeyDownPress = pressEventHandlers.onKeyDown;
+  useHover(hostRef, {
+    contain: true,
+    disabled,
+    onHoverChange: setHovered,
+    onHoverStart: onHoverIn,
+    onHoverEnd: onHoverOut
+  });
+  var interactionState = {
+    hovered,
+    focused,
+    pressed
+  };
+  var blurHandler = React__namespace.useCallback(e => {
+    if (e.nativeEvent.target === hostRef.current) {
+      setFocused(false);
+      if (onBlur != null) {
+        onBlur(e);
+      }
+    }
+  }, [hostRef, setFocused, onBlur]);
+  var focusHandler = React__namespace.useCallback(e => {
+    if (e.nativeEvent.target === hostRef.current) {
+      setFocused(true);
+      if (onFocus != null) {
+        onFocus(e);
+      }
+    }
+  }, [hostRef, setFocused, onFocus]);
+  var contextMenuHandler = React__namespace.useCallback(e => {
+    if (onContextMenuPress != null) {
+      onContextMenuPress(e);
+    }
+    if (onContextMenu != null) {
+      onContextMenu(e);
+    }
+  }, [onContextMenu, onContextMenuPress]);
+  var keyDownHandler = React__namespace.useCallback(e => {
+    if (onKeyDownPress != null) {
+      onKeyDownPress(e);
+    }
+    if (onKeyDown != null) {
+      onKeyDown(e);
+    }
+  }, [onKeyDown, onKeyDownPress]);
+  var _tabIndex;
+  if (tabIndex !== undefined) {
+    _tabIndex = tabIndex;
+  } else {
+    _tabIndex = disabled ? -1 : 0;
+  }
+  return /*#__PURE__*/React__namespace.createElement(View$2, _extends$1({}, rest, pressEventHandlers, {
+    "aria-disabled": disabled,
+    onBlur: blurHandler,
+    onContextMenu: contextMenuHandler,
+    onFocus: focusHandler,
+    onKeyDown: keyDownHandler,
+    ref: setRef,
+    style: [disabled ? styles$f.disabled : styles$f.active, typeof style === 'function' ? style(interactionState) : style],
+    tabIndex: _tabIndex
+  }), typeof children === 'function' ? children(interactionState) : children);
+}
+function useForceableState(forced) {
+  var _useState = React.useState(false),
+    bool = _useState[0],
+    setBool = _useState[1];
+  return [bool || forced, setBool];
+}
+var styles$f = StyleSheet$1.create({
+  active: {
+    cursor: 'pointer',
+    touchAction: 'manipulation'
+  },
+  disabled: {
+    pointerEvents: 'box-none'
+  }
+});
+var MemoedPressable = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Pressable));
+MemoedPressable.displayName = 'Pressable';
+var Pressable$1 = MemoedPressable;
+
+var useHandleTilePress = function (ctaLink, ctaLinkTarget) {
+  var handleNavigation = useWllSdk().handleNavigation;
+  return React.useCallback(function () {
+    if (ctaLink) {
+      var target = ctaLinkTarget || 'SAME_FRAME';
+      handleNavigation(ctaLink, target);
+    }
+  }, [ctaLink, ctaLinkTarget, handleNavigation]);
+};
+
 var BannerContext = /*#__PURE__*/React__namespace.createContext(null);
 var useBannerContext = function () {
   var context = React__namespace.useContext(BannerContext);
@@ -18084,13 +18718,27 @@ var BaseBanner = function (_a) {
   var tile = _a.tile,
     children = _a.children;
   var theme = useWllSdk().theme;
+  var _b = tile.configuration,
+    ctaLink = _b.ctaLink,
+    ctaLinkTarget = _b.ctaLinkTarget,
+    title = _b.title;
+  var handlePress = useHandleTilePress(ctaLink, ctaLinkTarget);
   return /*#__PURE__*/React__namespace.createElement(BannerContext.Provider, {
     value: tile
-  }, /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$e.container, {
-      backgroundColor: theme.surface,
-      borderRadius: theme.sizes.borderRadiusLg
-    }]
+  }, /*#__PURE__*/React__namespace.createElement(Pressable$1, {
+    style: function (_a) {
+      var pressed = _a.pressed;
+      return [styles$e.container, {
+        backgroundColor: theme.surface,
+        borderRadius: theme.sizes.borderRadiusLg,
+        opacity: pressed ? 0.7 : 1
+      }];
+    },
+    onPress: handlePress,
+    disabled: !ctaLink,
+    accessible: true,
+    accessibilityRole: "button",
+    accessibilityLabel: "".concat(title).concat(ctaLink ? ' - Click to open' : '')
   }, children));
 };
 var styles$e = StyleSheet$1.create({
@@ -18104,11 +18752,11 @@ var styles$e = StyleSheet$1.create({
   }
 });
 
-exports.UrlTarget = void 0;
-(function (UrlTarget) {
-  UrlTarget["sameWindow"] = "SAME_WINDOW";
-  UrlTarget["newWindow"] = "NEW_WINDOW";
-})(exports.UrlTarget || (exports.UrlTarget = {}));
+exports.CTALinkTarget = void 0;
+(function (CTALinkTarget) {
+  CTALinkTarget["sameWindow"] = "SAME_FRAME";
+  CTALinkTarget["newWindow"] = "NEW_WINDOW";
+})(exports.CTALinkTarget || (exports.CTALinkTarget = {}));
 exports.TierTileType = void 0;
 (function (TierTileType) {
   TierTileType["currentTier"] = "CURRENT";
@@ -18266,22 +18914,34 @@ var BaseTileRoot = function (_a) {
   var tile = useTileContext();
   var theme = useWllSdk().theme;
   var isHalfSize = useTileSize(tile).isHalfSize;
-  tile.configuration.artworkUrl;
+  var _b = tile.configuration,
+    ctaLink = _b.ctaLink,
+    ctaLinkTarget = _b.ctaLinkTarget,
+    title = _b.title;
+  var handlePress = useHandleTilePress(ctaLink, ctaLinkTarget);
   var layout = {
     flexDirection: 'column',
-    // Center content vertically for half tiles, start at top for full tiles
     justifyContent: isHalfSize ? 'center' : 'flex-start',
     alignItems: 'stretch'
   };
   var responsiveStyles = createResponsiveStyle({
     borderRadius: [theme.sizes.borderRadiusSm, theme.sizes.borderRadiusSm, theme.sizes.borderRadiusLg]
   });
-  return /*#__PURE__*/React.createElement(View$2, {
-    style: [styles$d.container, {
-      backgroundColor: theme.surface,
-      borderRadius: responsiveStyles.borderRadius,
-      aspectRatio: isHalfSize ? 2 : 1
-    }, layout, style]
+  return /*#__PURE__*/React.createElement(Pressable$1, {
+    style: function (_a) {
+      var pressed = _a.pressed;
+      return [styles$d.container, {
+        backgroundColor: theme.surface,
+        borderRadius: responsiveStyles.borderRadius,
+        aspectRatio: isHalfSize ? 2 : 1,
+        opacity: pressed ? 0.7 : 1
+      }, layout, style];
+    },
+    onPress: handlePress,
+    disabled: !ctaLink,
+    accessible: true,
+    accessibilityRole: "button",
+    accessibilityLabel: "".concat(title).concat(ctaLink ? ' - Click to open' : '')
   }, children);
 };
 var BaseTileContent = function (_a) {
@@ -18342,7 +19002,7 @@ var BaseTileTitle = function () {
   var theme = useWllSdk().theme;
   var _a = tile.configuration,
     title = _a.title,
-    linkURL = _a.linkURL,
+    ctaLink = _a.ctaLink,
     artworkUrl = _a.artworkUrl;
   var isHalfSize = useTileSize(tile).isHalfSize;
   // Don't show title for half tiles with image
@@ -18350,7 +19010,7 @@ var BaseTileTitle = function () {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
     variant: "title",
     accessibilityLabel: title
-  }, title), linkURL && /*#__PURE__*/React.createElement(Icon, {
+  }, title), ctaLink && /*#__PURE__*/React.createElement(Icon, {
     name: "ChevronRight",
     color: theme.derivedSurfaceText[20]
   }));
@@ -18675,108 +19335,6 @@ var styles$b = StyleSheet$1.create({
   }
 });
 
-/**
- * Copyright (c) Nicolas Gallagher.
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * 
- */
-
-var initialURL = canUseDOM$1 ? window.location.href : '';
-class Linking {
-  constructor() {
-    this._eventCallbacks = {};
-  }
-  /**
-   * An object mapping of event name
-   * and all the callbacks subscribing to it
-   */
-  _dispatchEvent(event) {
-    for (var _len = arguments.length, data = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      data[_key - 1] = arguments[_key];
-    }
-    var listeners = this._eventCallbacks[event];
-    if (listeners != null && Array.isArray(listeners)) {
-      listeners.map(listener => {
-        listener(...data);
-      });
-    }
-  }
-
-  /**
-   * Adds a event listener for the specified event. The callback will be called when the
-   * said event is dispatched.
-   */
-  addEventListener(eventType, callback) {
-    var _this = this;
-    if (!_this._eventCallbacks[eventType]) {
-      _this._eventCallbacks[eventType] = [callback];
-    }
-    _this._eventCallbacks[eventType].push(callback);
-    return {
-      remove() {
-        var callbacks = _this._eventCallbacks[eventType];
-        var filteredCallbacks = callbacks.filter(c => c.toString() !== callback.toString());
-        _this._eventCallbacks[eventType] = filteredCallbacks;
-      }
-    };
-  }
-
-  /**
-   * Removes a previously added event listener for the specified event. The callback must
-   * be the same object as the one passed to `addEventListener`.
-   */
-  removeEventListener(eventType, callback) {
-    console.error("Linking.removeEventListener('" + eventType + "', ...): Method has been " + 'deprecated. Please instead use `remove()` on the subscription ' + 'returned by `Linking.addEventListener`.');
-    var callbacks = this._eventCallbacks[eventType];
-    var filteredCallbacks = callbacks.filter(c => c.toString() !== callback.toString());
-    this._eventCallbacks[eventType] = filteredCallbacks;
-  }
-  canOpenURL() {
-    return Promise.resolve(true);
-  }
-  getInitialURL() {
-    return Promise.resolve(initialURL);
-  }
-
-  /**
-   * Try to open the given url in a secure fashion. The method returns a Promise object.
-   * If a target is passed (including undefined) that target will be used, otherwise '_blank'.
-   * If the url opens, the promise is resolved. If not, the promise is rejected.
-   * Dispatches the `onOpen` event if `url` is opened successfully.
-   */
-  openURL(url, target) {
-    if (arguments.length === 1) {
-      target = '_blank';
-    }
-    try {
-      open(url, target);
-      this._dispatchEvent('onOpen', url);
-      return Promise.resolve();
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  }
-  _validateURL(url) {
-    invariant$1(typeof url === 'string', 'Invalid URL: should be a string. Was: ' + url);
-    invariant$1(url, 'Invalid URL: cannot be empty');
-  }
-}
-var open = (url, target) => {
-  if (canUseDOM$1) {
-    var urlToOpen = new URL(url, window.location).toString();
-    if (urlToOpen.indexOf('tel:') === 0) {
-      window.location = urlToOpen;
-    } else {
-      window.open(urlToOpen, target, 'noopener');
-    }
-  }
-};
-var Linking$1 = new Linking();
-
 var BannerTile = function (_a) {
   var tile = _a.tile;
   return /*#__PURE__*/React__namespace.createElement(BaseBanner, {
@@ -18826,30 +19384,14 @@ var BannerTileCTA = function () {
   var configuration = useBannerContext().configuration;
   var _a = configuration,
     ctaText = _a.ctaText,
-    ctaLink = _a.ctaLink;
-  var handleLinkPress = function (url) {
-    return __awaiter(void 0, void 0, void 0, function () {
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            if (!url) return [2 /*return*/];
-            return [4 /*yield*/, Linking$1.canOpenURL(url)];
-          case 1:
-            if (_a.sent()) {
-              Linking$1.openURL(url);
-            }
-            return [2 /*return*/];
-        }
-      });
-    });
-  };
+    ctaLink = _a.ctaLink,
+    ctaLinkTarget = _a.ctaLinkTarget;
+  var handlePress = useHandleTilePress(ctaLink, ctaLinkTarget);
   if (!ctaText) return null;
   return /*#__PURE__*/React__namespace.createElement(Button, {
     title: ctaText,
     variant: "accent",
-    onPress: function () {
-      return handleLinkPress(ctaLink);
-    }
+    onPress: handlePress
   });
 };
 var styles$a = StyleSheet$1.create({