@wlloyalty/wll-react-sdk 1.0.42 → 1.0.44

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React$1 = require('react');
+var React = require('react');
 var Color = require('color');
 var LucideIcons = require('lucide-react');
 
@@ -21,7 +21,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React$1);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var LucideIcons__namespace = /*#__PURE__*/_interopNamespaceDefault(LucideIcons);
 
 function _typeof$1(o) {
@@ -91,6 +91,125 @@ function _objectWithoutPropertiesLoose(r, e) {
   return t;
 }
 
+/**
+ * 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 isDisabled = props => props.disabled || Array.isArray(props.accessibilityStates) && props.accessibilityStates.indexOf('disabled') > -1;
+var isDisabled$1 = isDisabled;
+
+/**
+ * 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 accessibilityRoleToWebRole = {
+  adjustable: 'slider',
+  button: 'button',
+  header: 'heading',
+  image: 'img',
+  imagebutton: null,
+  keyboardkey: null,
+  label: null,
+  link: 'link',
+  none: 'presentation',
+  search: 'search',
+  summary: 'region',
+  text: null
+};
+var propsToAriaRole = _ref => {
+  var accessibilityRole = _ref.accessibilityRole,
+    role = _ref.role;
+  var _role = role || accessibilityRole;
+  if (_role) {
+    var inferredRole = accessibilityRoleToWebRole[_role];
+    if (inferredRole !== null) {
+      // ignore roles that don't map to web
+      return inferredRole || _role;
+    }
+  }
+};
+var propsToAriaRole$1 = propsToAriaRole;
+
+/**
+ * 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 roleComponents = {
+  article: 'article',
+  banner: 'header',
+  blockquote: 'blockquote',
+  button: 'button',
+  code: 'code',
+  complementary: 'aside',
+  contentinfo: 'footer',
+  deletion: 'del',
+  emphasis: 'em',
+  figure: 'figure',
+  insertion: 'ins',
+  form: 'form',
+  list: 'ul',
+  listitem: 'li',
+  main: 'main',
+  navigation: 'nav',
+  paragraph: 'p',
+  region: 'section',
+  strong: 'strong'
+};
+var emptyObject$9 = {};
+var propsToAccessibilityComponent = function propsToAccessibilityComponent(props) {
+  if (props === void 0) {
+    props = emptyObject$9;
+  }
+  var roleProp = props.role || props.accessibilityRole;
+  // special-case for "label" role which doesn't map to an ARIA role
+  if (roleProp === 'label') {
+    return 'label';
+  }
+  var role = propsToAriaRole$1(props);
+  if (role) {
+    if (role === 'heading') {
+      var level = props.accessibilityLevel || props['aria-level'];
+      if (level != null) {
+        return "h" + level;
+      }
+      return 'h1';
+    }
+    return roleComponents[role];
+  }
+};
+var propsToAccessibilityComponent$1 = propsToAccessibilityComponent;
+
+/**
+ * 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 AccessibilityUtil = {
+  isDisabled: isDisabled$1,
+  propsToAccessibilityComponent: propsToAccessibilityComponent$1,
+  propsToAriaRole: propsToAriaRole$1
+};
+var AccessibilityUtil$1 = AccessibilityUtil;
+
 /**
  * Copyright (c) Nicolas Gallagher.
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -785,7 +904,7 @@ var canUseDOM$1 = canUseDOM;
  * longfrom equivalents.
  */
 
-var emptyObject$9 = {};
+var emptyObject$8 = {};
 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 +963,7 @@ var STYLE_SHORT_FORM_EXPANSIONS = {
 
 var createReactDOMStyle = (style, isInline) => {
   if (!style) {
-    return emptyObject$9;
+    return emptyObject$8;
   }
   var resolvedStyle = {};
   var _loop = function _loop() {
@@ -1786,7 +1905,7 @@ var prefixStyles = prefixAll;
 
 var _excluded$f = ["animationKeyframes"];
 var cache$3 = new Map();
-var emptyObject$8 = {};
+var emptyObject$7 = {};
 var classicGroup = 1;
 var atomicGroup = 3;
 var customGroup = {
@@ -2010,7 +2129,7 @@ function classic(style, name) {
  * No support for 'animationKeyframes', 'placeholderTextColor', 'scrollbarWidth', or 'pointerEvents'.
  */
 function inline(originalStyle, isRTL) {
-  var style = originalStyle || emptyObject$8;
+  var style = originalStyle || emptyObject$7;
   var frozenProps = {};
   var nextStyle = {};
   var _loop = function _loop() {
@@ -2631,7 +2750,7 @@ function warnOnce(key, message) {
  * 
  */
 
-var emptyObject$7 = {};
+var emptyObject$6 = {};
 
 /**
  * Shadows
@@ -2726,7 +2845,7 @@ var preprocess = function preprocess(originalStyle, options) {
   if (options === void 0) {
     options = {};
   }
-  var style = originalStyle || emptyObject$7;
+  var style = originalStyle || emptyObject$6;
   var nextStyle = {};
 
   // Convert shadow styles
@@ -3764,125 +3883,6 @@ if (canUseDOM$1 && window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
 var stylesheet = StyleSheet;
 var StyleSheet$1 = stylesheet;
 
-/**
- * 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 isDisabled = props => props.disabled || Array.isArray(props.accessibilityStates) && props.accessibilityStates.indexOf('disabled') > -1;
-var isDisabled$1 = isDisabled;
-
-/**
- * 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 accessibilityRoleToWebRole = {
-  adjustable: 'slider',
-  button: 'button',
-  header: 'heading',
-  image: 'img',
-  imagebutton: null,
-  keyboardkey: null,
-  label: null,
-  link: 'link',
-  none: 'presentation',
-  search: 'search',
-  summary: 'region',
-  text: null
-};
-var propsToAriaRole = _ref => {
-  var accessibilityRole = _ref.accessibilityRole,
-    role = _ref.role;
-  var _role = role || accessibilityRole;
-  if (_role) {
-    var inferredRole = accessibilityRoleToWebRole[_role];
-    if (inferredRole !== null) {
-      // ignore roles that don't map to web
-      return inferredRole || _role;
-    }
-  }
-};
-var propsToAriaRole$1 = propsToAriaRole;
-
-/**
- * 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 roleComponents = {
-  article: 'article',
-  banner: 'header',
-  blockquote: 'blockquote',
-  button: 'button',
-  code: 'code',
-  complementary: 'aside',
-  contentinfo: 'footer',
-  deletion: 'del',
-  emphasis: 'em',
-  figure: 'figure',
-  insertion: 'ins',
-  form: 'form',
-  list: 'ul',
-  listitem: 'li',
-  main: 'main',
-  navigation: 'nav',
-  paragraph: 'p',
-  region: 'section',
-  strong: 'strong'
-};
-var emptyObject$6 = {};
-var propsToAccessibilityComponent = function propsToAccessibilityComponent(props) {
-  if (props === void 0) {
-    props = emptyObject$6;
-  }
-  var roleProp = props.role || props.accessibilityRole;
-  // special-case for "label" role which doesn't map to an ARIA role
-  if (roleProp === 'label') {
-    return 'label';
-  }
-  var role = propsToAriaRole$1(props);
-  if (role) {
-    if (role === 'heading') {
-      var level = props.accessibilityLevel || props['aria-level'];
-      if (level != null) {
-        return "h" + level;
-      }
-      return 'h1';
-    }
-    return roleComponents[role];
-  }
-};
-var propsToAccessibilityComponent$1 = propsToAccessibilityComponent;
-
-/**
- * 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 AccessibilityUtil = {
-  isDisabled: isDisabled$1,
-  propsToAccessibilityComponent: propsToAccessibilityComponent$1,
-  propsToAriaRole: propsToAriaRole$1
-};
-var AccessibilityUtil$1 = AccessibilityUtil;
-
 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;
@@ -4527,7 +4527,7 @@ var defaultLocale = {
   direction: 'ltr',
   locale: 'en-US'
 };
-var LocaleContext = /*#__PURE__*/React$1.createContext(defaultLocale);
+var LocaleContext = /*#__PURE__*/React.createContext(defaultLocale);
 function getLocaleDirection(locale) {
   return isLocaleRTL(locale) ? 'rtl' : 'ltr';
 }
@@ -4536,7 +4536,7 @@ function LocaleProvider(props) {
     locale = props.locale,
     children = props.children;
   var needsContext = direction || locale;
-  return needsContext ? /*#__PURE__*/React$1.createElement(LocaleContext.Provider, {
+  return needsContext ? /*#__PURE__*/React.createElement(LocaleContext.Provider, {
     children: children,
     value: {
       direction: locale ? getLocaleDirection(locale) : direction,
@@ -4545,7 +4545,7 @@ function LocaleProvider(props) {
   }) : children;
 }
 function useLocaleContext() {
-  return React$1.useContext(LocaleContext);
+  return React.useContext(LocaleContext);
 }
 
 /**
@@ -4565,10 +4565,10 @@ var createElement = (component, props, options) => {
   }
   var Component = accessibilityComponent || component;
   var domProps = createDOMProps$1(Component, props, options);
-  var element = /*#__PURE__*/React$1.createElement(Component, domProps);
+  var element = /*#__PURE__*/React.createElement(Component, domProps);
 
   // Update locale context if element's writing direction prop changes
-  var elementWithLocaleProvider = domProps.dir ? /*#__PURE__*/React$1.createElement(LocaleProvider, {
+  var elementWithLocaleProvider = domProps.dir ? /*#__PURE__*/React.createElement(LocaleProvider, {
     children: element,
     direction: domProps.dir,
     locale: domProps.lang
@@ -4775,7 +4775,7 @@ function pick(obj, list) {
  * 
  */
 
-var useLayoutEffectImpl = canUseDOM$1 ? React$1.useLayoutEffect : React$1.useEffect;
+var useLayoutEffectImpl = canUseDOM$1 ? React.useLayoutEffect : React.useEffect;
 var useLayoutEffect = useLayoutEffectImpl;
 
 /**
@@ -6312,7 +6312,7 @@ function useResponderEvents(hostRef, config) {
  * 
  */
 
-var TextAncestorContext = /*#__PURE__*/React$1.createContext(false);
+var TextAncestorContext = /*#__PURE__*/React.createContext(false);
 var TextAncestorContext$1 = TextAncestorContext;
 
 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"];
@@ -6395,7 +6395,7 @@ var Text$2 = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
   }
   supportedProps.style = [numberOfLines != null && numberOfLines > 1 && {
     WebkitLineClamp: numberOfLines
-  }, hasTextAncestor === true ? styles$k.textHasAncestor$raw : styles$k.text$raw, numberOfLines === 1 && styles$k.textOneLine, numberOfLines != null && numberOfLines > 1 && styles$k.textMultiLine, props.style, selectable === true && styles$k.selectable, selectable === false && styles$k.notSelectable, onPress && styles$k.pressable];
+  }, hasTextAncestor === true ? styles$j.textHasAncestor$raw : styles$j.text$raw, numberOfLines === 1 && styles$j.textOneLine, numberOfLines != null && numberOfLines > 1 && styles$j.textMultiLine, props.style, selectable === true && styles$j.selectable, selectable === false && styles$j.notSelectable, onPress && styles$j.pressable];
   if (props.href != null) {
     component = 'a';
     if (hrefAttrs != null) {
@@ -6440,7 +6440,7 @@ var textStyle = {
   whiteSpace: 'pre-wrap',
   wordWrap: 'break-word'
 };
-var styles$k = StyleSheet$1.create({
+var styles$j = StyleSheet$1.create({
   text$raw: textStyle,
   textHasAncestor$raw: _objectSpread2(_objectSpread2({}, textStyle), {}, {
     color: 'inherit',
@@ -6988,25 +6988,25 @@ function getTouchFromResponderEvent(event) {
  */
 
 function usePressEvents(hostRef, config) {
-  var pressResponderRef = React$1.useRef(null);
+  var pressResponderRef = React.useRef(null);
   if (pressResponderRef.current == null) {
     pressResponderRef.current = new PressResponder(config);
   }
   var pressResponder = pressResponderRef.current;
 
   // Re-configure to use the current node and configuration.
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     pressResponder.configure(config);
   }, [config, pressResponder]);
 
   // Reset the `pressResponder` when cleanup needs to occur. This is
   // a separate effect because we do not want to rest the responder when `config` changes.
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     return () => {
       pressResponder.reset();
     };
   }, [pressResponder]);
-  React$1.useDebugValue(config);
+  React.useDebugValue(config);
   return pressResponder.getEventHandlers();
 }
 
@@ -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$j.view$raw, hasTextAncestor && styles$j.inline, props.style];
+  supportedProps.style = [styles$i.view$raw, hasTextAncestor && styles$i.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$j = StyleSheet$1.create({
+var styles$i = StyleSheet$1.create({
   view$raw: {
     alignItems: 'stretch',
     backgroundColor: 'transparent',
@@ -7156,25 +7156,25 @@ function TouchableOpacity(props, forwardedRef) {
     rejectResponderTermination = props.rejectResponderTermination,
     style = props.style,
     rest = _objectWithoutPropertiesLoose(props, _excluded$a);
-  var hostRef = React$1.useRef(null);
+  var hostRef = React.useRef(null);
   var setRef = useMergeRefs$1(forwardedRef, hostRef);
-  var _useState = React$1.useState('0s'),
+  var _useState = React.useState('0s'),
     duration = _useState[0],
     setDuration = _useState[1];
-  var _useState2 = React$1.useState(null),
+  var _useState2 = React.useState(null),
     opacityOverride = _useState2[0],
     setOpacityOverride = _useState2[1];
-  var setOpacityTo = React$1.useCallback((value, duration) => {
+  var setOpacityTo = React.useCallback((value, duration) => {
     setOpacityOverride(value);
     setDuration(duration ? duration / 1000 + "s" : '0s');
   }, [setOpacityOverride, setDuration]);
-  var setOpacityActive = React$1.useCallback(duration => {
+  var setOpacityActive = React.useCallback(duration => {
     setOpacityTo(activeOpacity !== null && activeOpacity !== void 0 ? activeOpacity : 0.2, duration);
   }, [activeOpacity, setOpacityTo]);
-  var setOpacityInactive = React$1.useCallback(duration => {
+  var setOpacityInactive = React.useCallback(duration => {
     setOpacityTo(null, duration);
   }, [setOpacityTo]);
-  var pressConfig = React$1.useMemo(() => ({
+  var pressConfig = React.useMemo(() => ({
     cancelable: !rejectResponderTermination,
     disabled,
     delayLongPress,
@@ -7202,14 +7202,14 @@ function TouchableOpacity(props, forwardedRef) {
     focusable: !disabled && focusable !== false,
     pointerEvents: disabled ? 'box-none' : undefined,
     ref: setRef,
-    style: [styles$i.root, !disabled && styles$i.actionable, style, opacityOverride != null && {
+    style: [styles$h.root, !disabled && styles$h.actionable, style, opacityOverride != null && {
       opacity: opacityOverride
     }, {
       transitionDuration: duration
     }]
   }));
 }
-var styles$i = StyleSheet$1.create({
+var styles$h = StyleSheet$1.create({
   root: {
     transitionProperty: 'opacity',
     transitionDuration: '0.15s',
@@ -7339,7 +7339,7 @@ var parseNavigationLink = function (link) {
 };
 
 var useNavigation = function (config) {
-  var handleNavigation = React$1.useCallback(function (link, ctaTarget) {
+  var handleNavigation = React.useCallback(function (link, ctaTarget) {
     var _a;
     var _b = parseNavigationLink(link),
       type = _b.type,
@@ -7357,7 +7357,7 @@ var useNavigation = function (config) {
 
 var baseUrl = 'https://api.staging.core.wlloyalty.net/v1';
 var useCreateRequestOptions = function (config) {
-  return React$1.useCallback(function (options) {
+  return React.useCallback(function (options) {
     if (options === void 0) {
       options = {};
     }
@@ -7374,7 +7374,7 @@ var useCreateRequestOptions = function (config) {
 };
 var useMakeRequest = function (config) {
   var createRequestOptions = useCreateRequestOptions(config);
-  return React$1.useCallback(function (url) {
+  return React.useCallback(function (url) {
     return __awaiter(void 0, void 0, void 0, function () {
       var response, json, error_1;
       return __generator(this, function (_a) {
@@ -7422,7 +7422,7 @@ var createResourceGetter = function (resource, includeHydrate) {
   }
   return function (config) {
     var makeRequest = useMakeRequest(config);
-    return React$1.useCallback(function (id) {
+    return React.useCallback(function (id) {
       var params = new URLSearchParams();
       if (includeHydrate) {
         params.append('hydrate', 'true');
@@ -7476,51 +7476,6 @@ var defaultTheme = {
   negative: '#ff0000'
 };
 
-var getDerivedColor = function (color) {
-  var backgroundColor = Color(color);
-  return backgroundColor.isDark() ? backgroundColor.lighten(0.2).string() : backgroundColor.darken(0.2).string();
-};
-// Same implimentation as Microsite
-var getReadableTextColor = function (backgroundColor) {
-  var bgColor = Color(backgroundColor);
-  var white = Color('#fff');
-  var black = Color('#000');
-  // Calculate contrast ratio with white
-  var contrastWithWhite = bgColor.contrast(white);
-  // If contrast with white is at least 2:1, use white; otherwise, use black
-  return contrastWithWhite >= 2 ? white.hex() : black.hex();
-};
-var percentages = [5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95];
-var generateDerivedColors = function (color, derivationFunction) {
-  var baseColor = Color(color);
-  var result = {};
-  percentages.forEach(function (percentage) {
-    var derivedColor = derivationFunction(baseColor, percentage);
-    result[percentage] = derivedColor.toString();
-  });
-  return result;
-};
-var getDerivedColorPercentages = function (color) {
-  var isDark = Color(color).isDark();
-  return generateDerivedColors(color, function (baseColor, percentage) {
-    return isDark ? baseColor.lightness(percentage) : baseColor.lightness(100 - percentage);
-  });
-};
-var getAlphaDerivedColors = function (color) {
-  return generateDerivedColors(color, function (baseColor, percentage) {
-    return baseColor.alpha(percentage / 100);
-  });
-};
-var shouldDesaturate = function (type, count) {
-  //TODO: Add conditions if neccecerry
-  return type === 'SPECIFIC' && count === 0;
-};
-var desaturateColor = function (color) {
-  return Color(color).desaturate(1).toString();
-};
-var getStateColor = function (baseColor, type, count) {
-  return shouldDesaturate(type, count) ? desaturateColor(baseColor) : baseColor;
-};
 // Storybook Themes
 ({
   modern: __assign(__assign({}, defaultTheme), {
@@ -7561,6 +7516,52 @@ var getStateColor = function (baseColor, type, count) {
   })
 });
 
+var getDerivedColor = function (color) {
+  var backgroundColor = Color(color);
+  return backgroundColor.isDark() ? backgroundColor.lighten(0.2).string() : backgroundColor.darken(0.2).string();
+};
+// Same implementation as Microsite
+var getReadableTextColor = function (backgroundColor) {
+  var bgColor = Color(backgroundColor);
+  var white = Color('#fff');
+  var black = Color('#000');
+  // Calculate contrast ratio with white
+  var contrastWithWhite = bgColor.contrast(white);
+  // If contrast with white is at least 2:1, use white; otherwise, use black
+  return contrastWithWhite >= 2 ? white.hex() : black.hex();
+};
+var percentages = [5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95];
+var generateDerivedColors = function (color, derivationFunction) {
+  var baseColor = Color(color);
+  var result = {};
+  percentages.forEach(function (percentage) {
+    var derivedColor = derivationFunction(baseColor, percentage);
+    result[percentage] = derivedColor.toString();
+  });
+  return result;
+};
+var getDerivedColorPercentages = function (color) {
+  var isDark = Color(color).isDark();
+  return generateDerivedColors(color, function (baseColor, percentage) {
+    return isDark ? baseColor.lightness(percentage) : baseColor.lightness(100 - percentage);
+  });
+};
+var getAlphaDerivedColors = function (color) {
+  return generateDerivedColors(color, function (baseColor, percentage) {
+    return baseColor.alpha(percentage / 100);
+  });
+};
+var shouldDesaturate = function (type, count) {
+  //TODO: Add conditions if neccecerry
+  return type === 'SPECIFIC' && count === 0;
+};
+var desaturateColor = function (color) {
+  return Color(color).grayscale().lighten(2).toString();
+};
+var getStateColor = function (baseColor, type, count) {
+  return shouldDesaturate(type, count) ? desaturateColor(baseColor) : baseColor;
+};
+
 /**
  * Copyright (c) 2013-present, Facebook, Inc.
  *
@@ -7780,10 +7781,10 @@ function getDimensionMode(window) {
 }
 function useResponsive$1() {
   var deviceWindow = Dimensions.get('window');
-  var _a = React$1.useState(getDimensionMode(deviceWindow)),
+  var _a = React.useState(getDimensionMode(deviceWindow)),
     dimensionMode = _a[0],
     setDimensionMode = _a[1];
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     if (!isWeb) return;
     var subscription = Dimensions.addEventListener('change', function (_a) {
       var window = _a.window;
@@ -7806,10 +7807,10 @@ function useResponsive$1() {
   };
 }
 
-var ResponsiveContext = /*#__PURE__*/React$1.createContext(undefined);
+var ResponsiveContext = /*#__PURE__*/React.createContext(undefined);
 function ResponsiveProvider(_a) {
   var children = _a.children;
-  var _b = React$1.useState(function () {
+  var _b = React.useState(function () {
       var window = Dimensions.get('window');
       var dimensionMode = getDimensionMode(window);
       return {
@@ -7821,7 +7822,7 @@ function ResponsiveProvider(_a) {
     }),
     state = _b[0],
     setState = _b[1];
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     var subscription = Dimensions.addEventListener('change', function (_a) {
       var window = _a.window;
       if (window) {
@@ -7840,12 +7841,12 @@ function ResponsiveProvider(_a) {
       }
     };
   }, []);
-  return /*#__PURE__*/React$1.createElement(ResponsiveContext.Provider, {
+  return /*#__PURE__*/React.createElement(ResponsiveContext.Provider, {
     value: state
   }, children);
 }
 function useResponsive() {
-  var context = React$1.useContext(ResponsiveContext);
+  var context = React.useContext(ResponsiveContext);
   if (context === undefined) {
     throw new Error('useResponsive must be used within a ResponsiveProvider');
   }
@@ -7878,22 +7879,22 @@ var createTheme = function (baseTheme) {
     alphaDerivedText: getAlphaDerivedColors(text)
   });
 };
-var WllSdkContext = /*#__PURE__*/React$1.createContext(undefined);
+var WllSdkContext = /*#__PURE__*/React.createContext(undefined);
 var WllSdkProvider = function (_a) {
   var children = _a.children,
     providedTheme = _a.theme,
     config = _a.config,
     _b = _a.navigationConfig,
     navigationConfig = _b === void 0 ? {} : _b;
-  var _c = React$1.useState(function () {
+  var _c = React.useState(function () {
       return createTheme(providedTheme || {});
     }),
     theme = _c[0],
     setThemeState = _c[1];
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     setThemeState(createTheme(providedTheme || {}));
   }, [providedTheme]);
-  var setTheme = React$1.useCallback(function (newTheme) {
+  var setTheme = React.useCallback(function (newTheme) {
     setThemeState(function (prevTheme) {
       return createTheme(__assign(__assign({}, prevTheme), newTheme));
     });
@@ -7902,7 +7903,7 @@ var WllSdkProvider = function (_a) {
   var getSectionByID = useGetSectionByID(config);
   var getTileByID = useGetTileByID(config);
   var handleNavigation = useNavigation(navigationConfig);
-  var contextValue = React$1.useMemo(function () {
+  var contextValue = React.useMemo(function () {
     return {
       theme: theme,
       setTheme: setTheme,
@@ -7912,18 +7913,25 @@ var WllSdkProvider = function (_a) {
       handleNavigation: handleNavigation
     };
   }, [theme, setTheme, getGroupByID, getSectionByID, getTileByID, handleNavigation]);
-  return /*#__PURE__*/React$1.createElement(WllSdkContext.Provider, {
+  return /*#__PURE__*/React.createElement(WllSdkContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React$1.createElement(ResponsiveProvider, null, children));
+  }, /*#__PURE__*/React.createElement(ResponsiveProvider, null, children));
 };
 var useWllSdk = function () {
-  var context = React$1.useContext(WllSdkContext);
+  var context = React.useContext(WllSdkContext);
   if (context === undefined) {
     throw new Error('useWllSdk must be used within a WllSdkProvider');
   }
   return context;
 };
 
+function createVariantSystem(baseStyle, variantStyles) {
+  return function (theme, variant) {
+    var styles = variantStyles(theme);
+    return [baseStyle, styles[variant]];
+  };
+}
+
 var clamp$1 = function (value, min, max) {
   return Math.min(Math.max(value, min), max);
 };
@@ -7952,12 +7960,12 @@ var getResponsiveValue = function (desktopValue, mobileValue, isDesktop, isTable
   return mobileValue;
 };
 var useResponsiveValue = function (desktopValue, mobileValue, isDesktop, isTablet) {
-  var _a = React$1.useState(function () {
+  var _a = React.useState(function () {
       return getResponsiveValue(desktopValue, mobileValue);
     }),
     value = _a[0],
     setValue = _a[1];
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     if (Platform$1.OS !== 'web') return;
     var handleResize = function () {
       setValue(getResponsiveValue(desktopValue, mobileValue));
@@ -7970,12 +7978,27 @@ var useResponsiveValue = function (desktopValue, mobileValue, isDesktop, isTable
   return value;
 };
 
-function createVariantSystem(baseStyle, variantStyles) {
-  return function (theme, variant) {
-    var styles = variantStyles(theme);
-    return [baseStyle, styles[variant]];
-  };
-}
+var useButtonDynamicStyles = function () {
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
+  var theme = useWllSdk().theme;
+  return StyleSheet$1.create({
+    button: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingHorizontal: useResponsiveValue(theme.sizes.xxl, theme.sizes.sm, isDesktop, isTablet),
+      paddingVertical: theme.sizes.sm,
+      alignSelf: 'flex-start'
+    },
+    text: {
+      textAlign: 'center',
+      textTransform: 'uppercase',
+      fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.sm, isDesktop, isTablet),
+      fontWeight: '700'
+    }
+  });
+};
 
 var useButtonStyles = createVariantSystem({}, function (theme) {
   return {
@@ -8014,79 +8037,19 @@ var Button = function (_a) {
     onPress = _a.onPress,
     variant = _a.variant;
   var theme = useWllSdk().theme;
-  var _b = useResponsive$1(),
-    isDesktop = _b.isDesktop,
-    isTablet = _b.isTablet;
   var buttonStyle = useButtonStyles(theme, variant);
   var textStyle = useTextStyles(theme, variant);
-  var dynamicStyles = StyleSheet$1.create({
-    button: {
-      justifyContent: 'center',
-      alignItems: 'center',
-      paddingHorizontal: useResponsiveValue(theme.sizes.xxl, theme.sizes.sm, isDesktop, isTablet),
-      paddingVertical: theme.sizes.sm,
-      alignSelf: 'flex-start'
-    },
-    text: {
-      textAlign: 'center',
-      textTransform: 'uppercase',
-      fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.sm, isDesktop, isTablet),
-      fontWeight: '700'
-    }
-  });
+  var styles = useButtonDynamicStyles();
   return /*#__PURE__*/React__namespace.createElement(TouchableOpacity$1, {
-    style: [dynamicStyles.button, buttonStyle, {
+    style: [styles.button, buttonStyle, {
       borderRadius: theme.sizes.borderRadiusButton
     }],
     onPress: onPress
   }, /*#__PURE__*/React__namespace.createElement(Text$3, {
-    style: [dynamicStyles.text, textStyle]
+    style: [styles.text, textStyle]
   }, title));
 };
 
-var justifyMap$1 = {
-  start: 'flex-start',
-  end: 'flex-end',
-  center: 'center',
-  between: 'space-between',
-  around: 'space-around',
-  evenly: 'space-evenly'
-};
-var alignMap$1 = {
-  start: 'flex-start',
-  end: 'flex-end',
-  center: 'center',
-  stretch: 'stretch'
-};
-var Column$1 = function (_a) {
-  var children = _a.children,
-    _b = _a.justify,
-    justify = _b === void 0 ? 'start' : _b,
-    _c = _a.align,
-    align = _c === void 0 ? 'stretch' : _c,
-    _d = _a.direction,
-    direction = _d === void 0 ? 'column' : _d,
-    _e = _a.style,
-    style = _e === void 0 ? {} : _e;
-  var theme = useWllSdk().theme;
-  var _f = useResponsive$1(),
-    isDesktop = _f.isDesktop,
-    isTablet = _f.isTablet;
-  var dynamicStyles = StyleSheet$1.create({
-    column: {
-      flex: 1,
-      paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
-      paddingBottom: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
-      justifyContent: justifyMap$1[justify],
-      alignItems: alignMap$1[align],
-      flexDirection: direction
-    }
-  });
-  return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [dynamicStyles.column, style]
-  }, children);
-};
-
 var Icon = function (_a) {
   var name = _a.name,
     _b = _a.color,
@@ -8145,17 +8108,17 @@ var ActivityIndicator = /*#__PURE__*/React__namespace.forwardRef((props, forward
     "aria-valuemin": 0,
     ref: forwardedRef,
     role: "progressbar",
-    style: [styles$h.container, style]
+    style: [styles$g.container, style]
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
     children: svg,
     style: [typeof size === 'number' ? {
       height: size,
       width: size
-    } : indicatorSizes[size], styles$h.animation, !animating && styles$h.animationPause, !animating && hidesWhenStopped && styles$h.hidesWhenStopped]
+    } : indicatorSizes[size], styles$g.animation, !animating && styles$g.animationPause, !animating && hidesWhenStopped && styles$g.hidesWhenStopped]
   }));
 });
 ActivityIndicator.displayName = 'ActivityIndicator';
-var styles$h = StyleSheet$1.create({
+var styles$g = StyleSheet$1.create({
   container: {
     alignItems: 'center',
     justifyContent: 'center'
@@ -8195,7 +8158,7 @@ var ActivityIndicator$1 = ActivityIndicator;
 var LoadingIndicator = function () {
   var theme = useWllSdk().theme;
   return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$g.container, {
+    style: [styles$f.container, {
       borderRadius: theme.sizes.borderRadiusSm,
       padding: theme.sizes.md
     }]
@@ -8204,7 +8167,7 @@ var LoadingIndicator = function () {
     color: theme.primary
   }));
 };
-var styles$g = StyleSheet$1.create({
+var styles$f = StyleSheet$1.create({
   container: {
     width: '100%',
     height: '100%',
@@ -8330,7 +8293,7 @@ function RefreshControl(props) {
     props.title;
     props.titleColor;
     var rest = _objectWithoutPropertiesLoose(props, _excluded$8);
-  return /*#__PURE__*/React$1.createElement(View$2, rest);
+  return /*#__PURE__*/React.createElement(View$2, rest);
 }
 
 /**
@@ -8518,14 +8481,14 @@ var ScrollViewBase = /*#__PURE__*/React__namespace.forwardRef((props, forwardedR
     onTouchMove: createPreventableScrollHandler(onTouchMove),
     onWheel: createPreventableScrollHandler(onWheel),
     ref: useMergeRefs$1(scrollRef, forwardedRef),
-    style: [style, !scrollEnabled && styles$f.scrollDisabled, hideScrollbar && styles$f.hideScrollbar]
+    style: [style, !scrollEnabled && styles$e.scrollDisabled, hideScrollbar && styles$e.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$f = StyleSheet$1.create({
+var styles$e = StyleSheet$1.create({
   scrollDisabled: {
     overflowX: 'hidden',
     overflowY: 'hidden',
@@ -8633,7 +8596,7 @@ var warning$1 = /*@__PURE__*/getDefaultExportFromCjs(warning_1);
 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$1.Component {
+let ScrollView$1 = class ScrollView extends React.Component {
   constructor() {
     super(...arguments);
     this._scrollNodeRef = null;
@@ -9160,24 +9123,24 @@ let ScrollView$1 = class ScrollView extends React$1.Component {
       };
     }
     var hasStickyHeaderIndices = !horizontal && Array.isArray(stickyHeaderIndices);
-    var children = hasStickyHeaderIndices || pagingEnabled ? React$1.Children.map(this.props.children, (child, i) => {
+    var children = hasStickyHeaderIndices || pagingEnabled ? React.Children.map(this.props.children, (child, i) => {
       var isSticky = hasStickyHeaderIndices && stickyHeaderIndices.indexOf(i) > -1;
       if (child != null && (isSticky || pagingEnabled)) {
-        return /*#__PURE__*/React$1.createElement(View$2, {
-          style: [isSticky && styles$e.stickyHeader, pagingEnabled && styles$e.pagingEnabledChild]
+        return /*#__PURE__*/React.createElement(View$2, {
+          style: [isSticky && styles$d.stickyHeader, pagingEnabled && styles$d.pagingEnabledChild]
         }, child);
       } else {
         return child;
       }
     }) : this.props.children;
-    var contentContainer = /*#__PURE__*/React$1.createElement(View$2, _extends$1({}, contentSizeChangeProps, {
+    var contentContainer = /*#__PURE__*/React.createElement(View$2, _extends$1({}, contentSizeChangeProps, {
       children: children,
       collapsable: false,
       ref: this._setInnerViewRef,
-      style: [horizontal && styles$e.contentContainerHorizontal, centerContent && styles$e.contentContainerCenterContent, contentContainerStyle]
+      style: [horizontal && styles$d.contentContainerHorizontal, centerContent && styles$d.contentContainerCenterContent, contentContainerStyle]
     }));
-    var baseStyle = horizontal ? styles$e.baseHorizontal : styles$e.baseVertical;
-    var pagingEnabledStyle = horizontal ? styles$e.pagingEnabledHorizontal : styles$e.pagingEnabledVertical;
+    var baseStyle = horizontal ? styles$d.baseHorizontal : styles$d.baseVertical;
+    var pagingEnabledStyle = horizontal ? styles$d.pagingEnabledHorizontal : styles$d.pagingEnabledVertical;
     var props = _objectSpread2(_objectSpread2({}, other), {}, {
       style: [baseStyle, pagingEnabled && pagingEnabledStyle, this.props.style],
       onTouchStart: this.scrollResponderHandleTouchStart,
@@ -9199,11 +9162,11 @@ let ScrollView$1 = class ScrollView extends React$1.Component {
     });
     var ScrollViewClass = ScrollViewBase$1;
     invariant$1(ScrollViewClass !== undefined, 'ScrollViewClass must not be undefined');
-    var scrollView = /*#__PURE__*/React$1.createElement(ScrollViewClass, _extends$1({}, props, {
+    var scrollView = /*#__PURE__*/React.createElement(ScrollViewClass, _extends$1({}, props, {
       ref: this._setScrollNodeRef
     }), contentContainer);
     if (refreshControl) {
-      return /*#__PURE__*/React$1.cloneElement(refreshControl, {
+      return /*#__PURE__*/React.cloneElement(refreshControl, {
         style: props.style
       }, scrollView);
     }
@@ -9220,7 +9183,7 @@ var commonStyle = {
   // iOS native scrolling
   WebkitOverflowScrolling: 'touch'
 };
-var styles$e = StyleSheet$1.create({
+var styles$d = StyleSheet$1.create({
   baseVertical: _objectSpread2(_objectSpread2({}, commonStyle), {}, {
     flexDirection: 'column',
     overflowX: 'hidden',
@@ -9253,8 +9216,8 @@ var styles$e = StyleSheet$1.create({
     scrollSnapAlign: 'start'
   }
 });
-var ForwardedScrollView = /*#__PURE__*/React$1.forwardRef((props, forwardedRef) => {
-  return /*#__PURE__*/React$1.createElement(ScrollView$1, _extends$1({}, props, {
+var ForwardedScrollView = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
+  return /*#__PURE__*/React.createElement(ScrollView$1, _extends$1({}, props, {
     forwardedRef: forwardedRef
   }));
 });
@@ -10300,7 +10263,7 @@ function VirtualizedListContextProvider(_ref2) {
   var children = _ref2.children,
     value = _ref2.value;
   // Avoid setting a newly created context object if the values are identical.
-  var context = React$1.useMemo(() => ({
+  var context = React.useMemo(() => ({
     cellKey: null,
     getScrollMetrics: value.getScrollMetrics,
     horizontal: value.horizontal,
@@ -10320,8 +10283,8 @@ function VirtualizedListCellContextProvider(_ref3) {
   var cellKey = _ref3.cellKey,
     children = _ref3.children;
   // Avoid setting a newly created context object if the values are identical.
-  var currContext = React$1.useContext(VirtualizedListContext);
-  var context = React$1.useMemo(() => currContext == null ? null : _objectSpread2(_objectSpread2({}, currContext), {}, {
+  var currContext = React.useContext(VirtualizedListContext);
+  var context = React.useMemo(() => currContext == null ? null : _objectSpread2(_objectSpread2({}, currContext), {}, {
     cellKey
   }), [currContext, cellKey]);
   return /*#__PURE__*/React__namespace.createElement(VirtualizedListContext.Provider, {
@@ -10433,7 +10396,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$d.rowReverse, inversionStyle] : [styles$d.columnReverse, inversionStyle] : horizontal ? [styles$d.row, inversionStyle] : inversionStyle;
+    var cellStyle = inversionStyle ? horizontal ? [styles$c.rowReverse, inversionStyle] : [styles$c.columnReverse, inversionStyle] : horizontal ? [styles$c.row, inversionStyle] : inversionStyle;
     var result = !CellRendererComponent ? /*#__PURE__*/React__namespace.createElement(View$2, _extends$1({
       style: cellStyle,
       onFocusCapture: onCellFocusCapture
@@ -10453,7 +10416,7 @@ class CellRenderer extends React__namespace.Component {
     }, result);
   }
 }
-var styles$d = StyleSheet$1.create({
+var styles$c = StyleSheet$1.create({
   row: {
     flexDirection: 'row'
   },
@@ -11633,7 +11596,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$c.horizontallyInverted : styles$c.verticallyInverted : null;
+    var inversionStyle = this.props.inverted ? horizontalOrDefault(this.props.horizontal) ? styles$b.horizontallyInverted : styles$b.verticallyInverted : null;
     var cells = [];
     var stickyIndicesFromProps = new Set(this.props.stickyHeaderIndices);
     var stickyHeaderIndices = [];
@@ -11797,7 +11760,7 @@ class VirtualizedList extends StateSafePureComponent {
     }*/
     if (this.props.debug) {
       return /*#__PURE__*/React__namespace.createElement(View$2, {
-        style: styles$c.debug
+        style: styles$b.debug
       }, ret, this._renderDebugOverlay());
     } else {
       return ret;
@@ -11914,20 +11877,20 @@ class VirtualizedList extends StateSafePureComponent {
     var visTop = this._scrollMetrics.offset;
     var visLen = this._scrollMetrics.visibleLength;
     return /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$c.debugOverlayBase, styles$c.debugOverlay]
+      style: [styles$b.debugOverlayBase, styles$b.debugOverlay]
     }, framesInLayout.map((f, ii) => /*#__PURE__*/React__namespace.createElement(View$2, {
       key: 'f' + ii,
-      style: [styles$c.debugOverlayBase, styles$c.debugOverlayFrame, {
+      style: [styles$b.debugOverlayBase, styles$b.debugOverlayFrame, {
         top: f.offset * normalize,
         height: f.length * normalize
       }]
     })), /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$c.debugOverlayBase, styles$c.debugOverlayFrameLast, {
+      style: [styles$b.debugOverlayBase, styles$b.debugOverlayFrameLast, {
         top: windowTop * normalize,
         height: windowLen * normalize
       }]
     }), /*#__PURE__*/React__namespace.createElement(View$2, {
-      style: [styles$c.debugOverlayBase, styles$c.debugOverlayFrameVis, {
+      style: [styles$b.debugOverlayBase, styles$b.debugOverlayFrameVis, {
         top: visTop * normalize,
         height: visLen * normalize
       }]
@@ -12068,7 +12031,7 @@ class VirtualizedList extends StateSafePureComponent {
   }
 }
 VirtualizedList.contextType = VirtualizedListContext;
-var styles$c = StyleSheet$1.create({
+var styles$b = StyleSheet$1.create({
   verticallyInverted: {
     transform: 'scaleY(-1)'
   },
@@ -12445,7 +12408,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$b.row, columnWrapperStyle]
+            style: [styles$a.row, columnWrapperStyle]
           }, _item2.map((it, kk) => {
             var element = render({
               // $FlowFixMe[incompatible-call]
@@ -12571,7 +12534,7 @@ let FlatList$1 = class FlatList extends React__namespace.PureComponent {
     );
   }
 };
-var styles$b = StyleSheet$1.create({
+var styles$a = StyleSheet$1.create({
   row: {
     flexDirection: 'row'
   }
@@ -14366,8 +14329,8 @@ var AnimatedProps$1 = AnimatedProps;
  * WARNING: The `effect` callback should be stable (e.g. using `useCallback`).
  */
 function useRefEffect(effect) {
-  var cleanupRef = React$1.useRef(undefined);
-  return React$1.useCallback(instance => {
+  var cleanupRef = React.useRef(undefined);
+  return React.useCallback(instance => {
     if (cleanupRef.current) {
       cleanupRef.current();
       cleanupRef.current = undefined;
@@ -14389,15 +14352,15 @@ function useRefEffect(effect) {
  */
 
 function useAnimatedProps(props) {
-  var _useReducer = React$1.useReducer(count => count + 1, 0),
+  var _useReducer = React.useReducer(count => count + 1, 0),
     scheduleUpdate = _useReducer[1];
-  var onUpdateRef = React$1.useRef(null);
+  var onUpdateRef = React.useRef(null);
 
   // TODO: Only invalidate `node` if animated props or `style` change. In the
   // previous implementation, we permitted `style` to override props with the
   // same name property name as styles, so we can probably continue doing that.
   // The ordering of other props *should* not matter.
-  var node = React$1.useMemo(() => new AnimatedProps$1(props, () => onUpdateRef.current == null ? void 0 : onUpdateRef.current()), [props]);
+  var node = React.useMemo(() => new AnimatedProps$1(props, () => onUpdateRef.current == null ? void 0 : onUpdateRef.current()), [props]);
   useAnimatedPropsLifecycle(node);
 
   // TODO: This "effect" does three things:
@@ -14413,7 +14376,7 @@ function useAnimatedProps(props) {
   //
   // But there is no way to transparently compose three separate callback refs,
   // so we just combine them all into one for now.
-  var refEffect = React$1.useCallback(instance => {
+  var refEffect = React.useCallback(instance => {
     // NOTE: This may be called more often than necessary (e.g. when `props`
     // changes), but `setNativeView` already optimizes for that.
     node.setNativeView(instance);
@@ -14463,9 +14426,9 @@ function reduceAnimatedProps(node) {
  * unless we are unmounting.
  */
 function useAnimatedPropsLifecycle(node) {
-  var prevNodeRef = React$1.useRef(null);
-  var isUnmountingRef = React$1.useRef(false);
-  React$1.useEffect(() => {
+  var prevNodeRef = React.useRef(null);
+  var isUnmountingRef = React.useRef(false);
+  React.useEffect(() => {
     // It is ok for multiple components to call `flushQueue` because it noops
     // if the queue is empty. When multiple animated components are mounted at
     // the same time. Only first component flushes the queue and the others will noop.
@@ -14525,7 +14488,7 @@ function useMergeRefs() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
     refs[_key] = arguments[_key];
   }
-  return React$1.useCallback(current => {
+  return React.useCallback(current => {
     for (var _i = 0, _refs = refs; _i < _refs.length; _i++) {
       var ref = _refs[_i];
       if (ref != null) {
@@ -14958,7 +14921,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$a.accessibilityImage$raw,
+    style: styles$9.accessibilityImage$raw,
     draggable: draggable || false,
     ref: hiddenImageRef,
     src: displayImageUri
@@ -15030,14 +14993,14 @@ var Image$1 = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
     onLayout: handleLayout,
     pointerEvents: pointerEvents,
     ref: ref,
-    style: [styles$a.root, hasTextAncestor && styles$a.inline, imageSizeStyle, style, styles$a.undo,
+    style: [styles$9.root, hasTextAncestor && styles$9.inline, imageSizeStyle, style, styles$9.undo,
     // TEMP: avoid deprecated shadow props regression
     // until Image refactored to use createElement.
     {
       boxShadow: null
     }]
   }), /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: [styles$a.image, resizeModeStyles[resizeMode], {
+    style: [styles$9.image, resizeModeStyles[resizeMode], {
       backgroundImage,
       filter
     }, backgroundSize != null && {
@@ -15059,7 +15022,7 @@ ImageWithStatics.prefetch = function (uri) {
 ImageWithStatics.queryCache = function (uris) {
   return ImageLoader$1.queryCache(uris);
 };
-var styles$a = StyleSheet$1.create({
+var styles$9 = StyleSheet$1.create({
   root: {
     flexBasis: 'auto',
     overflow: 'hidden',
@@ -18163,30 +18126,21 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-var styles$9 = StyleSheet$1.create({
-  imageOverlay: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-    top: 0
-  },
-  container: {
-    position: 'relative',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'red',
-    width: '100%',
-    height: '100%'
-  }
-});
+var IS_WEB = Platform$1.OS === "web";
+Platform$1.OS === "ios";
+Platform$1.OS === "android";
+var _a$1 = Dimensions.get("window"),
+  width = _a$1.width;
+  _a$1.height;
+var SCREEN_WIDTH = width;
+
 var ProgressiveImage = function (_a) {
   var source = _a.source,
     style = _a.style,
     _b = _a.isDesaturated,
     isDesaturated = _b === void 0 ? false : _b,
     props = __rest(_a, ["source", "style", "isDesaturated"]);
-  var imageAnimated = React$1.useRef(new Animated$1.Value(0)).current;
+  var imageAnimated = React.useRef(new Animated$1.Value(0)).current;
   var theme = useWllSdk().theme;
   var onImageLoad = function () {
     requestAnimationFrame(function () {
@@ -18200,28 +18154,49 @@ var ProgressiveImage = function (_a) {
   var baseColor = theme.alphaDerivedPrimary[20];
   var desaturatedColor = desaturateColor(baseColor);
   var backgroundColor = isDesaturated ? desaturatedColor : baseColor;
-  return /*#__PURE__*/React$1.createElement(View$2, {
-    style: [styles$9.container, style, {
+  // Platform-specific logic for desaturation
+  var desaturationStyle = IS_WEB ? {
+    filter: isDesaturated ? 'grayscale(100%)' : undefined
+  } : {
+    tintColor: isDesaturated ? desaturatedColor : undefined
+  };
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: [styles$8.container, style, {
       backgroundColor: backgroundColor
     }]
-  }, /*#__PURE__*/React$1.createElement(Animated$1.View, {
-    style: [styles$9.imageOverlay, {
+  }, /*#__PURE__*/React.createElement(Animated$1.View, {
+    style: [styles$8.imageOverlay, {
       backgroundColor: backgroundColor,
       opacity: imageAnimated.interpolate({
         inputRange: [0, 1],
         outputRange: [1, 0]
       })
     }]
-  }), /*#__PURE__*/React$1.createElement(Animated$1.Image, _extends({}, props, {
+  }), /*#__PURE__*/React.createElement(Animated$1.Image, _extends({}, props, {
     source: source,
-    style: [styles$9.imageOverlay, __assign({
+    style: [styles$8.imageOverlay, __assign({
       opacity: imageAnimated
-    }, isDesaturated && {
-      filter: "saturate(".concat(0 * 100, "%)")
-    })],
+    }, desaturationStyle)],
     onLoad: onImageLoad
   })));
 };
+var styles$8 = StyleSheet$1.create({
+  imageOverlay: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0
+  },
+  container: {
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'red',
+    width: '100%',
+    height: '100%'
+  }
+});
 
 var RowHeader = function (_a) {
   var children = _a.children,
@@ -18779,9 +18754,9 @@ function Pressable(props, forwardedRef) {
   var _useForceableState3 = useForceableState(testOnly_pressed === true),
     pressed = _useForceableState3[0],
     setPressed = _useForceableState3[1];
-  var hostRef = React$1.useRef(null);
+  var hostRef = React.useRef(null);
   var setRef = useMergeRefs$1(forwardedRef, hostRef);
-  var pressConfig = React$1.useMemo(() => ({
+  var pressConfig = React.useMemo(() => ({
     delayLongPress,
     delayPressStart: delayPressIn,
     delayPressEnd: delayPressOut,
@@ -18853,17 +18828,17 @@ function Pressable(props, forwardedRef) {
     onFocus: focusHandler,
     onKeyDown: keyDownHandler,
     ref: setRef,
-    style: [disabled ? styles$8.disabled : styles$8.active, typeof style === 'function' ? style(interactionState) : style],
+    style: [disabled ? styles$7.disabled : styles$7.active, typeof style === 'function' ? style(interactionState) : style],
     tabIndex: _tabIndex
   }), typeof children === 'function' ? children(interactionState) : children);
 }
 function useForceableState(forced) {
-  var _useState = React$1.useState(false),
+  var _useState = React.useState(false),
     bool = _useState[0],
     setBool = _useState[1];
   return [bool || forced, setBool];
 }
-var styles$8 = StyleSheet$1.create({
+var styles$7 = StyleSheet$1.create({
   active: {
     cursor: 'pointer',
     touchAction: 'manipulation'
@@ -18872,7 +18847,7 @@ var styles$8 = StyleSheet$1.create({
     pointerEvents: 'box-none'
   }
 });
-var MemoedPressable = /*#__PURE__*/React$1.memo( /*#__PURE__*/React$1.forwardRef(Pressable));
+var MemoedPressable = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Pressable));
 MemoedPressable.displayName = 'Pressable';
 var Pressable$1 = MemoedPressable;
 
@@ -19014,7 +18989,7 @@ var TierTileConfig = /** @class */function () {
 
 var useHandleTilePress = function (tile, ctaLink, ctaLinkTarget) {
   var handleNavigation = useWllSdk().handleNavigation;
-  return React$1.useCallback(function () {
+  return React.useCallback(function () {
     if ((tile === null || tile === void 0 ? void 0 : tile.type) === exports.TileType.Reward) {
       var config = tile.configuration;
       if (config === null || config === void 0 ? void 0 : config.rewardId) {
@@ -19036,9 +19011,9 @@ var useHandleTilePress = function (tile, ctaLink, ctaLinkTarget) {
   }, [tile, ctaLink, ctaLinkTarget, handleNavigation]);
 };
 
-var BannerContext = /*#__PURE__*/React__namespace.createContext(null);
+var BannerContext = /*#__PURE__*/React.createContext(null);
 var useBannerContext = function () {
-  var context = React__namespace.useContext(BannerContext);
+  var context = React.useContext(BannerContext);
   if (!context) {
     throw new Error('Tile components must be used within a BaseTile');
   }
@@ -19053,12 +19028,12 @@ var BaseBanner = function (_a) {
     ctaLinkTarget = _b.ctaLinkTarget,
     title = _b.title;
   var handlePress = useHandleTilePress(tile, ctaLink, ctaLinkTarget);
-  return /*#__PURE__*/React__namespace.createElement(BannerContext.Provider, {
+  return /*#__PURE__*/React.createElement(BannerContext.Provider, {
     value: tile
-  }, /*#__PURE__*/React__namespace.createElement(Pressable$1, {
+  }, /*#__PURE__*/React.createElement(Pressable$1, {
     style: function (_a) {
       var pressed = _a.pressed;
-      return [styles$7.container, {
+      return [styles$6.container, {
         backgroundColor: theme.surface,
         borderRadius: theme.sizes.borderRadiusLg,
         opacity: pressed ? 0.7 : 1
@@ -19071,7 +19046,7 @@ var BaseBanner = function (_a) {
     accessibilityLabel: "".concat(title).concat(ctaLink ? ' - Click to open' : '')
   }, children));
 };
-var styles$7 = StyleSheet$1.create({
+var styles$6 = StyleSheet$1.create({
   container: {
     width: '100%',
     maxWidth: MAX_WIDTH,
@@ -19083,7 +19058,7 @@ var styles$7 = StyleSheet$1.create({
 });
 
 var useTileSize = function (tile) {
-  return React$1.useMemo(function () {
+  return React.useMemo(function () {
     return {
       isFullSize: tile.tileHeight === exports.TileHeight.Full,
       isHalfSize: tile.tileHeight === exports.TileHeight.Half
@@ -19091,63 +19066,83 @@ var useTileSize = function (tile) {
   }, [tile.tileHeight]);
 };
 
-var TileContext = /*#__PURE__*/React$1.createContext(null);
-var useTileContext = function () {
-  var context = React$1.useContext(TileContext);
-  if (!context) {
-    throw new Error('Tile components must be used within a BaseTile');
-  }
-  return context;
-};
-var BaseTileInner = function (_a) {
-  var tile = _a.tile,
-    children = _a.children;
-  return /*#__PURE__*/React$1.createElement(TileContext.Provider, {
-    value: tile
-  }, /*#__PURE__*/React$1.createElement(BaseTile.Root, null, children));
-};
-var BaseTileRoot = function (_a) {
-  var children = _a.children,
-    style = _a.style;
+var BaseTileBody = function (props) {
   var tile = useTileContext();
-  var theme = useWllSdk().theme;
-  var isHalfSize = useTileSize(tile).isHalfSize;
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
   var _b = tile.configuration,
-    ctaLink = _b.ctaLink,
-    ctaLinkTarget = _b.ctaLinkTarget,
-    title = _b.title;
-  var handlePress = useHandleTilePress(tile, ctaLink, ctaLinkTarget);
-  var _c = useResponsive$1(),
-    isDesktop = _c.isDesktop,
-    isTablet = _c.isTablet;
-  var layout = {
-    flexDirection: 'column',
-    justifyContent: isHalfSize ? 'center' : 'flex-start',
-    alignItems: 'stretch'
+    body = _b.body,
+    artworkUrl = _b.artworkUrl;
+  var isHalfSize = useTileSize(tile).isHalfSize;
+  if (isHalfSize && artworkUrl || !body) return null;
+  // Helper function to determine the number of lines
+  var getNumberOfLines = function () {
+    if (!isHalfSize && !artworkUrl) return undefined;
+    return isDesktop ? 3 : isTablet ? 4 : 3;
   };
-  var dynamicStyles = StyleSheet$1.create({
-    container: {
+  return /*#__PURE__*/React.createElement(Text, _extends({
+    variant: "body"
+  }, props, {
+    accessibilityLabel: body,
+    numberOfLines: getNumberOfLines()
+  }), body);
+};
+
+var baseStyles = StyleSheet$1.create({
+  container: {
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    position: 'relative'
+  },
+  content: {
+    display: 'flex'
+  },
+  media: {
+    width: '100%',
+    objectFit: 'cover'
+  }
+});
+// Dynamic styles hook
+var useBaseTileStyles = function () {
+  var tile = useTileContext();
+  var theme = useWllSdk().theme;
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
+  var isHalfSize = useTileSize(tile).isHalfSize;
+  var _b = tile.configuration,
+    artworkUrl = _b.artworkUrl,
+    title = _b.title,
+    body = _b.body;
+  return StyleSheet$1.create({
+    container: __assign(__assign({}, baseStyles.container), {
+      backgroundColor: theme.surface,
+      aspectRatio: isHalfSize ? 2 : 1,
+      borderRadius: useResponsiveValue(theme.sizes.borderRadiusLg, theme.sizes.borderRadiusSm, isDesktop, isTablet),
+      justifyContent: 'center',
+      alignItems: 'center'
+    }),
+    content: __assign(__assign({}, baseStyles.content), {
       justifyContent: 'center',
+      height: !artworkUrl ? '100%' : undefined
+    }),
+    header: {
+      marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
+      marginTop: !isHalfSize && artworkUrl ? useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet) : undefined,
+      flexDirection: 'row',
       alignItems: 'center',
-      aspectRatio: isHalfSize ? 2 : 1,
-      borderRadius: useResponsiveValue(theme.sizes.borderRadiusLg, theme.sizes.borderRadiusSm, isDesktop, isTablet)
-    }
-  });
-  return /*#__PURE__*/React$1.createElement(Pressable$1, {
-    style: function (_a) {
-      var pressed = _a.pressed;
-      return [styles$6.container, {
-        backgroundColor: theme.surface,
-        opacity: pressed ? 0.7 : 1
-      }, dynamicStyles.container, layout, style];
+      justifyContent: 'space-between',
+      textAlign: isHalfSize ? 'center' : undefined
     },
-    onPress: handlePress,
-    disabled: tile.type !== 'REWARD' && tile.type !== 'REWARD_CATEGORY' && !ctaLink,
-    accessible: true,
-    accessibilityRole: "button",
-    accessibilityLabel: "".concat(title).concat(ctaLink ? ' - Click to open' : '')
-  }, children);
+    media: __assign(__assign({}, baseStyles.media), {
+      flexBasis: !isHalfSize && title && body ? '50%' : '100%',
+      height: isHalfSize ? '100%' : undefined
+    })
+  });
 };
+
 var BaseTileContent = function (_a) {
   var children = _a.children;
   var tile = useTileContext();
@@ -19155,34 +19150,23 @@ var BaseTileContent = function (_a) {
   var isHalfSize = useTileSize(tile).isHalfSize;
   // For half tiles with an image, don't show other content
   if (isHalfSize && artworkUrl) return null;
-  return /*#__PURE__*/React$1.createElement(View$2, {
-    style: [styles$6.content, {
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: [baseStyles.content, {
       justifyContent: 'center',
       height: !artworkUrl ? '100%' : undefined
     }]
   }, children);
 };
+
 var BaseTileHeader = function (_a) {
   var children = _a.children;
   var tile = useTileContext();
-  var theme = useWllSdk().theme;
   var artworkUrl = tile.configuration.artworkUrl;
   var isHalfSize = useTileSize(tile).isHalfSize;
-  var _b = useResponsive$1(),
-    isDesktop = _b.isDesktop,
-    isTablet = _b.isTablet;
   // For half tiles with an image, don't show header
   if (isHalfSize && artworkUrl) return null;
-  var dynamicStyles = StyleSheet$1.create({
-    header: {
-      marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
-      marginTop: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    }
-  });
-  return /*#__PURE__*/React$1.createElement(View$2, {
+  var dynamicStyles = useBaseTileStyles();
+  return /*#__PURE__*/React.createElement(View$2, {
     style: [dynamicStyles.header, {
       marginTop: isHalfSize ? 0 : dynamicStyles.header.marginTop,
       // @ts-ignore
@@ -19192,26 +19176,24 @@ var BaseTileHeader = function (_a) {
     numberOfLines: 1
   }, children);
 };
+
 var BaseTileMedia = function (props) {
   var tile = useTileContext();
   var _a = tile.configuration,
-    artworkUrl = _a.artworkUrl,
-    title = _a.title,
-    body = _a.body;
-  var isHalfSize = useTileSize(tile).isHalfSize;
+    artworkUrl = _a.artworkUrl;
+    _a.title;
+    _a.body;
+  useTileSize(tile).isHalfSize;
+  var styles = useBaseTileStyles();
   if (!artworkUrl) return null;
-  var hasTitle = !!title;
-  var hasDescription = !!body;
-  return /*#__PURE__*/React$1.createElement(ProgressiveImage, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(ProgressiveImage, _extends({}, props, {
     source: {
       uri: artworkUrl
     },
-    style: [props.style, styles$6.media, {
-      flexBasis: !isHalfSize && hasTitle && hasDescription ? '50%' : '100%',
-      height: isHalfSize ? '100%' : undefined
-    }]
+    style: [props.style, baseStyles.media, styles.media]
   }));
 };
+
 var BaseTileTitle = function () {
   var tile = useTileContext();
   var theme = useWllSdk().theme;
@@ -19222,49 +19204,86 @@ var BaseTileTitle = function () {
   var isHalfSize = useTileSize(tile).isHalfSize;
   // Don't show title for half tiles with image
   if (isHalfSize && artworkUrl || !title) return null;
-  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Text, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
     variant: "title",
     accessibilityLabel: title,
     numberOfLines: 1
-  }, title), ctaLink && /*#__PURE__*/React$1.createElement(Icon, {
+  }, title), ctaLink && /*#__PURE__*/React.createElement(Icon, {
     name: "ChevronRight",
     color: theme.derivedSurfaceText[20]
   }));
 };
-var BaseTileBody = function (props) {
+
+/**
+ * Context to provide the current tile to child components.
+ */
+var TileContext = /*#__PURE__*/React.createContext(null);
+/**
+ * Custom hook to access the TileContext.
+ */
+var useTileContext = function () {
+  var context = React.useContext(TileContext);
+  if (!context) {
+    throw new Error('Tile components must be used within a BaseTile');
+  }
+  return context;
+};
+/**
+ * BaseTileRoot component to handle layout and pressable behavior.
+ */
+var BaseTileRoot = function (_a) {
+  var children = _a.children,
+    style = _a.style;
   var tile = useTileContext();
-  var _a = tile.configuration,
-    body = _a.body,
-    artworkUrl = _a.artworkUrl;
+  var theme = useWllSdk().theme;
   var isHalfSize = useTileSize(tile).isHalfSize;
-  if (isHalfSize && artworkUrl || !body) return null;
-  return /*#__PURE__*/React$1.createElement(Text, _extends({
-    variant: "body"
-  }, props, {
-    accessibilityLabel: body
-  }), body);
+  var _b = tile.configuration,
+    ctaLink = _b.ctaLink,
+    ctaLinkTarget = _b.ctaLinkTarget,
+    title = _b.title;
+  var handlePress = useHandleTilePress(tile, ctaLink, ctaLinkTarget);
+  // Dynamic layout and styles
+  var layout = {
+    flexDirection: 'column',
+    justifyContent: isHalfSize ? 'center' : 'flex-start',
+    alignItems: 'stretch'
+  };
+  var dynamicStyles = useBaseTileStyles();
+  return /*#__PURE__*/React.createElement(Pressable$1, {
+    style: function (_a) {
+      var pressed = _a.pressed;
+      return [baseStyles.container, dynamicStyles.container, {
+        backgroundColor: theme.surface,
+        opacity: pressed ? 0.7 : 1
+      }, layout, style];
+    },
+    onPress: handlePress,
+    disabled: tile.type !== 'REWARD' && tile.type !== 'REWARD_CATEGORY' && !ctaLink,
+    accessible: true,
+    accessibilityRole: "button",
+    accessibilityLabel: "".concat(title).concat(ctaLink ? ' - Click to open' : '')
+  }, children);
 };
-var BaseTile = BaseTileInner;
-BaseTile.Root = BaseTileRoot;
-BaseTile.Media = BaseTileMedia;
-BaseTile.Content = BaseTileContent;
-BaseTile.Header = BaseTileHeader;
-BaseTile.Title = BaseTileTitle;
-BaseTile.Body = BaseTileBody;
-var styles$6 = StyleSheet$1.create({
-  container: {
-    width: '100%',
-    height: '100%',
-    overflow: 'hidden',
-    position: 'relative'
-  },
-  content: {
-    display: 'flex'
-  },
-  media: {
-    width: '100%',
-    objectFit: 'cover'
-  }
+/**
+ * BaseTileInner component to provide context and render children.
+ */
+var BaseTileInner = function (_a) {
+  var tile = _a.tile,
+    children = _a.children;
+  return /*#__PURE__*/React.createElement(TileContext.Provider, {
+    value: tile
+  }, /*#__PURE__*/React.createElement(BaseTile.Root, null, children));
+};
+/**
+ * BaseTile component with subcomponents attached.
+ */
+var BaseTile = Object.assign(BaseTileInner, {
+  Root: BaseTileRoot,
+  Media: BaseTileMedia,
+  Content: BaseTileContent,
+  Header: BaseTileHeader,
+  Title: BaseTileTitle,
+  Body: BaseTileBody
 });
 
 var Indicator = function () {
@@ -19276,9 +19295,9 @@ var Indicator = function () {
     if (isTablet) return 'Tablet Layout';
     return 'Mobile Layout';
   };
-  return /*#__PURE__*/React$1.createElement(View$2, {
+  return /*#__PURE__*/React.createElement(View$2, {
     style: styles$5.indicator
-  }, /*#__PURE__*/React$1.createElement(Text$3, {
+  }, /*#__PURE__*/React.createElement(Text$3, {
     style: styles$5.indicatorText
   }, getCurrentLayout()));
 };
@@ -19426,16 +19445,16 @@ function withTileFetching(WrappedComponent) {
     var tile = props.tile,
       tileId = props.tileId;
     var getTileByID = useWllSdk().getTileByID;
-    var _a = React$1.useState(tile || null),
+    var _a = React.useState(tile || null),
       tileData = _a[0],
       setTileData = _a[1];
-    var _b = React$1.useState(false),
+    var _b = React.useState(false),
       isLoading = _b[0],
       setIsLoading = _b[1];
-    var _c = React$1.useState(null),
+    var _c = React.useState(null),
       error = _c[0],
       setError = _c[1];
-    React$1.useEffect(function () {
+    React.useEffect(function () {
       if (tile) {
         setTileData(tile);
       } else if (tileId) {
@@ -19475,18 +19494,18 @@ function withTileFetching(WrappedComponent) {
       }
     }, [tile, tileId, getTileByID]);
     if (isLoading) {
-      return /*#__PURE__*/React$1.createElement(SkeletonTile, {
+      return /*#__PURE__*/React.createElement(SkeletonTile, {
         style: {
           width: '100%'
         }
       });
     }
     if (error || !tileData) {
-      return /*#__PURE__*/React$1.createElement(View$2, {
+      return /*#__PURE__*/React.createElement(View$2, {
         style: commonStyles.emptyContainer
-      }, /*#__PURE__*/React$1.createElement(Text$3, null, "No tile data available"));
+      }, /*#__PURE__*/React.createElement(Text$3, null, "No tile data available"));
     }
-    return /*#__PURE__*/React$1.createElement(WrappedComponent, _extends({}, props, {
+    return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
       tile: tileData
     }));
   };
@@ -19554,21 +19573,28 @@ var BadgeTileDateEarned = function () {
   var containerStyle = [styles.dateEarnedContainer, {
     backgroundColor: backgroundColor
   }];
+  var textColor = getReadableTextColor(backgroundColor);
   if (type === exports.BadgeTileType.Latest && count === 0) {
     return null;
   }
   if (count === 0) {
-    return /*#__PURE__*/React$1.createElement(View$2, {
+    return /*#__PURE__*/React.createElement(View$2, {
       style: containerStyle
-    }, /*#__PURE__*/React$1.createElement(Text, {
-      variant: "label"
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "label",
+      style: {
+        color: textColor
+      }
     }, badgeNotEarnedMessage));
   }
   var formattedDate = new Date(createdAt).toLocaleDateString();
-  return /*#__PURE__*/React$1.createElement(View$2, {
+  return /*#__PURE__*/React.createElement(View$2, {
     style: containerStyle
-  }, /*#__PURE__*/React$1.createElement(Text, {
-    variant: "label"
+  }, /*#__PURE__*/React.createElement(Text, {
+    variant: "label",
+    style: {
+      color: textColor
+    }
   }, "".concat(awardedDatePrefix, " ").concat(formattedDate)));
 };
 
@@ -19578,7 +19604,7 @@ var BadgeTileDescription = function () {
   var count = configuration.count,
     description = configuration.description;
   if (count === 0 || !description) return null;
-  return /*#__PURE__*/React$1.createElement(Text, {
+  return /*#__PURE__*/React.createElement(Text, {
     variant: "body",
     numberOfLines: 2,
     ellipsizeMode: "tail"
@@ -19597,9 +19623,9 @@ var BadgeTileMedia = function (_a) {
     emptyBadgeArtworkUrl = configuration.emptyBadgeArtworkUrl;
   var displayUrl = count === 0 ? emptyBadgeArtworkUrl : artworkUrl;
   if (!displayUrl) return null;
-  return /*#__PURE__*/React$1.createElement(View$2, {
+  return /*#__PURE__*/React.createElement(View$2, {
     style: styles.header
-  }, /*#__PURE__*/React$1.createElement(ProgressiveImage, _extends({}, props, {
+  }, /*#__PURE__*/React.createElement(ProgressiveImage, _extends({}, props, {
     source: {
       uri: displayUrl
     },
@@ -19618,12 +19644,12 @@ var BadgeTileStatus = function () {
   if (type !== exports.BadgeTileType.Specific || count === 1) {
     return null;
   }
-  return /*#__PURE__*/React$1.createElement(View$2, {
+  return /*#__PURE__*/React.createElement(View$2, {
     style: styles.indicatorContainer
-  }, count === 0 ? /*#__PURE__*/React$1.createElement(LucideIcons.LockKeyholeIcon, {
+  }, count === 0 ? /*#__PURE__*/React.createElement(LucideIcons.LockKeyholeIcon, {
     color: "#FFF",
     size: 20
-  }) : /*#__PURE__*/React$1.createElement(Text, {
+  }) : /*#__PURE__*/React.createElement(Text, {
     style: styles.countText
   }, count, "x"));
 };
@@ -19637,7 +19663,7 @@ var BadgeTileTitle = function () {
     emptyBadgeMessage = configuration.emptyBadgeMessage;
   var displayText = count === 0 ? emptyBadgeMessage : name;
   if (!displayText) return null;
-  return /*#__PURE__*/React$1.createElement(View$2, null, /*#__PURE__*/React$1.createElement(Text, {
+  return /*#__PURE__*/React.createElement(View$2, null, /*#__PURE__*/React.createElement(Text, {
     variant: "title",
     style: styles.titleText,
     numberOfLines: count === 0 ? 2 : 1,
@@ -19645,22 +19671,31 @@ var BadgeTileTitle = function () {
   }, displayText));
 };
 
-var BadgeTileMain = function (_a) {
+/**
+ * The main BadgeTile component.
+ *
+ * This component renders a badge tile with optional media, status, title, description, and date earned.
+ */
+var BadgeTileRoot = function (_a) {
   var tile = _a.tile;
   if (!tile) return null;
-  return /*#__PURE__*/React$1.createElement(BaseTile, {
+  return /*#__PURE__*/React.createElement(BaseTile, {
     tile: tile
-  }, /*#__PURE__*/React$1.createElement(BadgeTile.Media, null, /*#__PURE__*/React$1.createElement(BadgeTile.Status, null)), /*#__PURE__*/React$1.createElement(Column, {
+  }, /*#__PURE__*/React.createElement(BadgeTile.Media, null, /*#__PURE__*/React.createElement(BadgeTile.Status, null)), /*#__PURE__*/React.createElement(Column, {
     justify: "between",
     align: "start"
-  }, /*#__PURE__*/React$1.createElement(View$2, null, /*#__PURE__*/React$1.createElement(BadgeTile.Title, null), /*#__PURE__*/React$1.createElement(BadgeTile.Description, null)), /*#__PURE__*/React$1.createElement(BadgeTile.DateEarned, null)));
+  }, /*#__PURE__*/React.createElement(BadgeTile.Title, null), /*#__PURE__*/React.createElement(BadgeTile.Description, null), /*#__PURE__*/React.createElement(Spacer, null), /*#__PURE__*/React.createElement(BadgeTile.DateEarned, null)));
 };
-var BadgeTile = BadgeTileMain;
-BadgeTile.Media = BadgeTileMedia;
-BadgeTile.Title = BadgeTileTitle;
-BadgeTile.Description = BadgeTileDescription;
-BadgeTile.DateEarned = BadgeTileDateEarned;
-BadgeTile.Status = BadgeTileStatus;
+/**
+ * The BadgeTile component with subcomponents attached.
+ */
+var BadgeTile = Object.assign(BadgeTileRoot, {
+  Media: BadgeTileMedia,
+  Title: BadgeTileTitle,
+  Description: BadgeTileDescription,
+  DateEarned: BadgeTileDateEarned,
+  Status: BadgeTileStatus
+});
 var BadgeTile$1 = withTileFetching(BadgeTile);
 
 var BannerTileCTA = function () {
@@ -19671,7 +19706,7 @@ var BannerTileCTA = function () {
     ctaLinkTarget = _a.ctaLinkTarget;
   var handlePress = useHandleTilePress(tile, ctaLink, ctaLinkTarget);
   if (!ctaText) return null;
-  return /*#__PURE__*/React$1.createElement(Button, {
+  return /*#__PURE__*/React.createElement(Button, {
     title: ctaText,
     variant: "accent",
     onPress: handlePress
@@ -19720,7 +19755,7 @@ var BannerTileDescription = function () {
   var description = configuration.description;
   var theme = useWllSdk().theme;
   if (!description) return null;
-  return /*#__PURE__*/React$1.createElement(Text, {
+  return /*#__PURE__*/React.createElement(Text, {
     style: [styles.description, {
       color: theme.derivedSurfaceText[20]
     }]
@@ -19739,9 +19774,9 @@ var BannerTileMedia = function (_a) {
   return (
     /*#__PURE__*/
     // @ts-ignore: We are using percentage values for width, which is valid in React Native but TypeScript expects a number.
-    React$1.createElement(View$2, {
+    React.createElement(View$2, {
       style: [styles.mediaContainer, containerStyle]
-    }, /*#__PURE__*/React$1.createElement(ProgressiveImage, {
+    }, /*#__PURE__*/React.createElement(ProgressiveImage, {
       source: {
         uri: artworkUrl
       },
@@ -19755,33 +19790,52 @@ var BannerTileTitle = function () {
   var configuration = useBannerContext().configuration;
   var title = configuration.title;
   if (!title) return null;
-  return /*#__PURE__*/React$1.createElement(Text, {
+  return /*#__PURE__*/React.createElement(Text, {
     variant: "title",
     style: styles.title
   }, title);
 };
 
-var BannerTile = function (_a) {
+/**
+ * Helper function to determine if the tile is artwork-only.
+ *
+ * @param configuration - The configuration object of the tile.
+ * @returns `true` if the tile has no title, description, or CTA text.
+ */
+var isArtworkOnly$1 = function (configuration) {
+  return !configuration.title && !configuration.description && !configuration.ctaText;
+};
+/**
+ * The main BannerTile component.
+ *
+ * This component renders a banner tile with optional media, title, description, and CTA.
+ */
+var BannerTileRoot = function (_a) {
   var tile = _a.tile;
+  if (!tile) return null;
   var styles = useBannerTileStyles();
   var configuration = tile.configuration;
-  var isArtworkOnly = !configuration.title && !configuration.description && !configuration.ctaText;
-  return /*#__PURE__*/React__namespace.createElement(BaseBanner, {
+  return /*#__PURE__*/React.createElement(BaseBanner, {
     tile: tile
-  }, /*#__PURE__*/React__namespace.createElement(BannerTile.Media, {
-    isArtworkOnly: isArtworkOnly
-  }), /*#__PURE__*/React__namespace.createElement(View$2, {
+  }, /*#__PURE__*/React.createElement(BannerTile.Media, {
+    isArtworkOnly: isArtworkOnly$1(configuration)
+  }), /*#__PURE__*/React.createElement(View$2, {
     style: styles.slideContent
-  }, /*#__PURE__*/React__namespace.createElement(BannerTile.Title, null), /*#__PURE__*/React__namespace.createElement(BannerTile.Description, null), /*#__PURE__*/React__namespace.createElement(BannerTile.CTA, null)));
+  }, /*#__PURE__*/React.createElement(BannerTile.Title, null), /*#__PURE__*/React.createElement(BannerTile.Description, null), /*#__PURE__*/React.createElement(BannerTile.CTA, null)));
 };
-BannerTile.Media = BannerTileMedia;
-BannerTile.Title = BannerTileTitle;
-BannerTile.Description = BannerTileDescription;
-BannerTile.CTA = BannerTileCTA;
+/**
+ * The BannerTile component with subcomponents attached.
+ */
+var BannerTile = Object.assign(BannerTileRoot, {
+  Media: BannerTileMedia,
+  Title: BannerTileTitle,
+  Description: BannerTileDescription,
+  CTA: BannerTileCTA
+});
 var BannerTile$1 = withTileFetching(BannerTile);
 
 var ContentTileBody = function () {
-  return /*#__PURE__*/React$1.createElement(BaseTile.Body, null);
+  return /*#__PURE__*/React.createElement(BaseTile.Body, null);
 };
 
 var useContentTileStyles = function () {
@@ -19804,7 +19858,7 @@ var useContentTileStyles = function () {
 var ContentTileContent = function (_a) {
   var children = _a.children;
   var styles = useContentTileStyles();
-  return /*#__PURE__*/React$1.createElement(BaseTile.Content, null, /*#__PURE__*/React$1.createElement(View$2, {
+  return /*#__PURE__*/React.createElement(BaseTile.Content, null, /*#__PURE__*/React.createElement(View$2, {
     style: styles.content
   }, children));
 };
@@ -19813,33 +19867,43 @@ var ContentTileHeader = function () {
   var tile = useTileContext();
   var title = tile.configuration.title;
   if (!title) return null;
-  return /*#__PURE__*/React$1.createElement(BaseTile.Header, null, /*#__PURE__*/React$1.createElement(BaseTile.Title, null));
+  return /*#__PURE__*/React.createElement(BaseTile.Header, null, /*#__PURE__*/React.createElement(BaseTile.Title, null));
 };
 
 var ContentTileMedia = function () {
   var styles = useContentTileStyles();
-  return /*#__PURE__*/React$1.createElement(BaseTile.Media, {
+  return /*#__PURE__*/React.createElement(BaseTile.Media, {
     style: styles.media
   });
 };
 
 var ContentTileRoot = function (_a) {
   var children = _a.children;
-  return /*#__PURE__*/React$1.createElement(BaseTile.Root, null, children);
+  return /*#__PURE__*/React.createElement(BaseTile.Root, null, children);
 };
 
+/**
+ * The ContentTile component renders a tile with a root, media, content, header, and body.
+ *
+ * @param tile - The tile data to render.
+ */
 var ContentTileMain = function (_a) {
   var tile = _a.tile;
-  return /*#__PURE__*/React$1.createElement(BaseTile, {
+  if (!tile) return null;
+  return /*#__PURE__*/React.createElement(BaseTile, {
     tile: tile
-  }, /*#__PURE__*/React$1.createElement(ContentTile.Root, null, /*#__PURE__*/React$1.createElement(ContentTile.Media, null), /*#__PURE__*/React$1.createElement(ContentTile.Content, null, /*#__PURE__*/React$1.createElement(ContentTile.Header, null), /*#__PURE__*/React$1.createElement(ContentTile.Body, null))));
+  }, /*#__PURE__*/React.createElement(ContentTile.Root, null, /*#__PURE__*/React.createElement(ContentTile.Media, null), /*#__PURE__*/React.createElement(ContentTile.Content, null, /*#__PURE__*/React.createElement(ContentTile.Header, null), /*#__PURE__*/React.createElement(ContentTile.Body, null))));
 };
-var ContentTile = ContentTileMain;
-ContentTile.Root = ContentTileRoot;
-ContentTile.Media = ContentTileMedia;
-ContentTile.Content = ContentTileContent;
-ContentTile.Header = ContentTileHeader;
-ContentTile.Body = ContentTileBody;
+/**
+ * The ContentTile component with subcomponents attached.
+ */
+var ContentTile = Object.assign(ContentTileMain, {
+  Root: ContentTileRoot,
+  Media: ContentTileMedia,
+  Content: ContentTileContent,
+  Header: ContentTileHeader,
+  Body: ContentTileBody
+});
 var ContentTile$1 = withTileFetching(ContentTile);
 
 /**
@@ -19875,10 +19939,10 @@ exports.SectionType = void 0;
  */
 
 function useWindowDimensions() {
-  var _useState = React$1.useState(() => Dimensions.get('window')),
+  var _useState = React.useState(() => Dimensions.get('window')),
     dims = _useState[0],
     setDims = _useState[1];
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     function handleChange(_ref) {
       var window = _ref.window;
       if (window != null) {
@@ -19927,14 +19991,14 @@ var SectionHeader = function (_a) {
   if (!title) {
     return null;
   }
-  return /*#__PURE__*/React$1.createElement(View$2, {
+  return /*#__PURE__*/React.createElement(View$2, {
     style: styles.sectionHeader
-  }, title && /*#__PURE__*/React$1.createElement(Text, {
+  }, title && /*#__PURE__*/React.createElement(Text, {
     style: [styles.sectionTitle, {
       fontWeight: '700',
       color: theme.text
     }]
-  }, title), description && /*#__PURE__*/React$1.createElement(Text, {
+  }, title), description && /*#__PURE__*/React.createElement(Text, {
     style: [styles.sectionDescription, {
       color: theme.alphaDerivedText[80]
     }]
@@ -20020,52 +20084,85 @@ var useCarouselStyles = function (buttonSize) {
   });
 };
 
+var initialState = {
+  currentIndex: 0,
+  containerWidth: 0
+};
+var carouselReducer = function (state, action) {
+  switch (action.type) {
+    case 'SET_CONTAINER_WIDTH':
+      return __assign(__assign({}, state), {
+        containerWidth: action.payload
+      });
+    case 'SET_CURRENT_INDEX':
+      return __assign(__assign({}, state), {
+        currentIndex: action.payload
+      });
+    case 'PREV_SLIDE':
+      return __assign(__assign({}, state), {
+        currentIndex: Math.max(0, state.currentIndex - 1)
+      });
+    case 'NEXT_SLIDE':
+      return __assign(__assign({}, state), {
+        currentIndex: Math.min(action.maxIndex, state.currentIndex + 1)
+      });
+    default:
+      return state;
+  }
+};
 var Carousel = function (_a) {
   var section = _a.section;
-  var windowWidth = useWindowDimensions().width;
-  var containerRef = React$1.useRef(null);
-  var _b = React$1.useState(windowWidth),
-    containerWidth = _b[0],
-    setContainerWidth = _b[1];
+  var WINDOW_WIDTH = useWindowDimensions().width;
+  var containerRef = React.useRef(null);
   var styles = useCarouselStyles(BUTTON_SIZE);
-  var animatedIndex = React$1.useRef(new Animated$1.Value(0)).current;
+  var animatedIndex = React.useRef(new Animated$1.Value(0)).current;
   var theme = useWllSdk().theme;
-  var _c = useResponsive(),
-    isDesktop = _c.isDesktop,
-    isTablet = _c.isTablet;
-  var scrollViewRef = React$1.useRef(null);
-  var _d = React$1.useState(0),
-    currentIndex = _d[0],
-    setCurrentIndex = _d[1];
+  var _b = useResponsive(),
+    isDesktop = _b.isDesktop,
+    isTablet = _b.isTablet;
+  var scrollViewRef = React.useRef(null);
+  var _c = React.useReducer(carouselReducer, __assign(__assign({}, initialState), {
+      containerWidth: WINDOW_WIDTH
+    })),
+    state = _c[0],
+    dispatch = _c[1];
+  var currentIndex = state.currentIndex,
+    containerWidth = state.containerWidth;
   var bannerTiles = section.tiles.filter(function (tile) {
     return tile.type === exports.TileType.Banner;
   });
   var sortedTiles = sortByPriority(bannerTiles);
-  var handleScroll = React$1.useCallback(function (event) {
+  var handleScroll = React.useCallback(function (event) {
     var contentOffsetX = event.nativeEvent.contentOffset.x;
     var newIndex = contentOffsetX / containerWidth;
     animatedIndex.setValue(newIndex);
   }, [containerWidth, animatedIndex]);
-  var handleScrollEnd = React$1.useCallback(function (event) {
+  var handleScrollEnd = React.useCallback(function (event) {
     var contentOffsetX = event.nativeEvent.contentOffset.x;
     var newIndex = Math.round(contentOffsetX / containerWidth);
-    setCurrentIndex(newIndex);
+    dispatch({
+      type: 'SET_CURRENT_INDEX',
+      payload: newIndex
+    });
   }, [containerWidth]);
   var handlePrev = function () {
     var _a;
-    var newIndex = Math.max(0, currentIndex - 1);
-    setCurrentIndex(newIndex);
+    dispatch({
+      type: 'PREV_SLIDE'
+    });
     (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-      x: newIndex * containerWidth,
+      x: (currentIndex - 1) * containerWidth,
       animated: true
     });
   };
   var handleNext = function () {
     var _a;
-    var newIndex = Math.min(sortedTiles.length - 1, currentIndex + 1);
-    setCurrentIndex(newIndex);
+    dispatch({
+      type: 'NEXT_SLIDE',
+      maxIndex: sortedTiles.length - 1
+    });
     (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-      x: newIndex * containerWidth,
+      x: (currentIndex + 1) * containerWidth,
       animated: true
     });
   };
@@ -20079,28 +20176,31 @@ var Carousel = function (_a) {
       marginTop: useResponsiveValue(theme.sizes.xxl, theme.sizes.sm, isDesktop, isTablet)
     }
   });
-  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(SectionHeader, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SectionHeader, {
     title: section.title,
     description: section.description
-  }), /*#__PURE__*/React$1.createElement(View$2, {
+  }), /*#__PURE__*/React.createElement(View$2, {
     ref: containerRef,
     style: styles.container,
     onLayout: function (event) {
       var width = event.nativeEvent.layout.width;
-      setContainerWidth(width);
+      dispatch({
+        type: 'SET_CONTAINER_WIDTH',
+        payload: width
+      });
     }
-  }, /*#__PURE__*/React$1.createElement(View$2, {
+  }, /*#__PURE__*/React.createElement(View$2, {
     style: styles.carouselContainer
-  }, showPrevButton && /*#__PURE__*/React$1.createElement(TouchableOpacity$1, {
+  }, showPrevButton && /*#__PURE__*/React.createElement(TouchableOpacity$1, {
     style: [styles.navButton, styles.navButtonLeft, {
       backgroundColor: theme.background
     }],
     onPress: handlePrev
-  }, /*#__PURE__*/React$1.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement(Icon, {
     name: "ArrowLeft",
     size: 20,
     color: theme.primary
-  })), /*#__PURE__*/React$1.createElement(ScrollView$2, {
+  })), /*#__PURE__*/React.createElement(ScrollView$2, {
     ref: scrollViewRef,
     horizontal: true,
     pagingEnabled: true,
@@ -20116,24 +20216,24 @@ var Carousel = function (_a) {
     snapToInterval: containerWidth,
     snapToAlignment: "start"
   }, sortedTiles.map(function (tile, index) {
-    return /*#__PURE__*/React$1.createElement(View$2, {
+    return /*#__PURE__*/React.createElement(View$2, {
       key: index,
       style: [styles.slideContainer, {
         width: containerWidth
       }]
-    }, /*#__PURE__*/React$1.createElement(BannerTile$1, {
+    }, /*#__PURE__*/React.createElement(BannerTile$1, {
       tile: tile
     }));
-  })), showNextButton && /*#__PURE__*/React$1.createElement(TouchableOpacity$1, {
+  })), showNextButton && /*#__PURE__*/React.createElement(TouchableOpacity$1, {
     style: [styles.navButton, styles.navButtonRight, {
       backgroundColor: theme.surface
     }],
     onPress: handleNext
-  }, /*#__PURE__*/React$1.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement(Icon, {
     name: "ArrowRight",
     size: 20,
     color: theme.primary
-  }))), displayControls && /*#__PURE__*/React$1.createElement(View$2, {
+  }))), displayControls && /*#__PURE__*/React.createElement(View$2, {
     style: dynamicStyles.indicators
   }, sortedTiles.map(function (_, index) {
     var width = animatedIndex.interpolate({
@@ -20141,7 +20241,7 @@ var Carousel = function (_a) {
       outputRange: [8, 30, 8],
       extrapolate: 'clamp'
     });
-    return /*#__PURE__*/React$1.createElement(Animated$1.View, {
+    return /*#__PURE__*/React.createElement(Animated$1.View, {
       key: index,
       style: [styles.indicator, {
         backgroundColor: theme.derivedBackground,
@@ -20157,43 +20257,30 @@ var Grid = function (_a) {
   var section = _a.section;
   var isDesktop = useResponsive().isDesktop;
   var columnsPerRow = isDesktop ? 4 : 2;
-  var renderGrid = function () {
-    var tileContainers = [];
-    var currentTiles = [];
-    var gridTiles = section.tiles.filter(function (tile) {
+  var gridTiles = React.useMemo(function () {
+    return sortByPriority(section.tiles.filter(function (tile) {
       return tile.type !== exports.TileType.Banner;
-    }).sort(function (a, b) {
-      if (a.priority !== b.priority) {
-        return b.priority - a.priority;
-      }
-      return section.tiles.indexOf(a) - section.tiles.indexOf(b);
-    });
-    var allHalfTiles = gridTiles.every(function (tile) {
-      return tile.tileHeight === exports.TileHeight.Half;
-    });
-    var getTileWidth = function (columns) {
+    }));
+  }, [section.tiles]);
+  var getTileWidth = React.useCallback(function (columns) {
+    if (IS_WEB) {
       return {
         width: "calc(".concat(100 / columns, "% - ").concat((columns - 1) * GRID_GAP / columns, "px)"),
         marginBottom: GRID_GAP,
         height: 'auto'
       };
-    };
-    if (isDesktop && allHalfTiles) {
-      gridTiles.forEach(function (tile, index) {
-        var isLastInRow = (index + 1) % columnsPerRow === 0;
-        tileContainers.push( /*#__PURE__*/React__namespace.createElement(View$2, {
-          key: "container-".concat(index),
-          style: [
-          // @ts-ignore
-          getTileWidth(columnsPerRow), !isLastInRow && {
-            marginRight: GRID_GAP
-          }]
-        }, /*#__PURE__*/React__namespace.createElement(TileContainer, {
-          tiles: [tile]
-        })));
-      });
-      return tileContainers;
+    } else {
+      var tileWidth = (SCREEN_WIDTH - (columns - 1) * GRID_GAP) / columns;
+      return {
+        width: tileWidth,
+        marginBottom: GRID_GAP,
+        height: 'auto'
+      };
     }
+  }, []);
+  var renderTileContainers = React.useCallback(function () {
+    var tileContainers = [];
+    var currentTiles = [];
     var sortedTiles = sortByPriority(gridTiles);
     sortedTiles.forEach(function (tile, index) {
       currentTiles.push(tile);
@@ -20213,27 +20300,27 @@ var Grid = function (_a) {
       };
       if (shouldStartNewContainer(currentTiles, tile, nextTile)) {
         var isLastInRow = (tileContainers.length + 1) % columnsPerRow === 0;
-        tileContainers.push( /*#__PURE__*/React__namespace.createElement(View$2, {
+        tileContainers.push( /*#__PURE__*/React.createElement(View$2, {
           key: "container-".concat(index),
           style: [
-          // @ts-ignore
+          // @ts-ignore Web uses CSS calc strings for responsive layouts, while ViewStyle expects numbers
           getTileWidth(columnsPerRow), !isLastInRow && {
             marginRight: GRID_GAP
           }]
-        }, /*#__PURE__*/React__namespace.createElement(TileContainer, {
+        }, /*#__PURE__*/React.createElement(TileContainer, {
           tiles: currentTiles
         })));
         currentTiles = [];
       }
     });
     return tileContainers;
-  };
-  return /*#__PURE__*/React__namespace.createElement(View$2, null, /*#__PURE__*/React__namespace.createElement(SectionHeader, {
+  }, [gridTiles, columnsPerRow, getTileWidth]);
+  return /*#__PURE__*/React.createElement(View$2, null, /*#__PURE__*/React.createElement(SectionHeader, {
     title: section.title,
     description: section.description
-  }), /*#__PURE__*/React__namespace.createElement(View$2, {
+  }), /*#__PURE__*/React.createElement(View$2, {
     style: styles$2.grid
-  }, renderGrid()));
+  }, renderTileContainers()));
 };
 var styles$2 = StyleSheet$1.create({
   grid: {
@@ -20317,22 +20404,25 @@ var useSectionStyles = function () {
   });
 };
 
-var SectionContext = /*#__PURE__*/React$1.createContext(undefined);
-var Section = function (_a) {
-  var section = _a.section,
-    sectionId = _a.sectionId;
-  var styles = useSectionStyles();
+/**
+ * SectionContext provides the current section data to child components.
+ */
+var SectionContext = /*#__PURE__*/React.createContext(undefined);
+/**
+ * Custom hook to fetch section data.
+ */
+var useSectionData = function (section, sectionId) {
   var getSectionByID = useWllSdk().getSectionByID;
-  var _b = React$1.useState(section || null),
-    sectionData = _b[0],
-    setSectionData = _b[1];
-  var _c = React$1.useState(false),
-    isLoading = _c[0],
-    setIsLoading = _c[1];
-  var _d = React$1.useState(null),
-    error = _d[0],
-    setError = _d[1];
-  React$1.useEffect(function () {
+  var _a = React.useState(section || null),
+    sectionData = _a[0],
+    setSectionData = _a[1];
+  var _b = React.useState(false),
+    isLoading = _b[0],
+    setIsLoading = _b[1];
+  var _c = React.useState(null),
+    error = _c[0],
+    setError = _c[1];
+  React.useEffect(function () {
     if (section) {
       setSectionData(section);
     } else if (sectionId) {
@@ -20352,12 +20442,12 @@ var Section = function (_a) {
                 if (response.status === 'success' && response.data) {
                   setSectionData(response.data);
                 } else {
-                  setError(response.error || 'Failed to fetch section');
+                  setError(response.error || 'Failed to fetch section data.');
                 }
                 return [3 /*break*/, 5];
               case 3:
                 err_1 = _a.sent();
-                setError(err_1 instanceof Error ? err_1.message : 'Failed to fetch section');
+                setError(err_1 instanceof Error ? err_1.message : 'Failed to fetch section data.');
                 return [3 /*break*/, 5];
               case 4:
                 setIsLoading(false);
@@ -20371,95 +20461,151 @@ var Section = function (_a) {
       fetchSection();
     }
   }, [section, sectionId, getSectionByID]);
+  return {
+    sectionData: sectionData,
+    isLoading: isLoading,
+    error: error
+  };
+};
+/**
+ * Component to display an empty state with a message.
+ */
+var EmptyState = function (_a) {
+  var message = _a.message;
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: commonStyles.emptyContainer
+  }, /*#__PURE__*/React.createElement(Text$3, null, message));
+};
+/**
+ * The Section component renders a section based on its type (e.g., Banner, Grid).
+ */
+var Section = function (_a) {
+  var section = _a.section,
+    sectionId = _a.sectionId;
+  var styles = useSectionStyles();
+  var _b = useSectionData(section, sectionId),
+    sectionData = _b.sectionData,
+    isLoading = _b.isLoading,
+    error = _b.error;
+  if (!section && !sectionId) {
+    console.warn('Section component requires either section or sectionId prop.');
+    return null;
+  }
   var renderSectionContent = function () {
     if (isLoading) {
-      return /*#__PURE__*/React$1.createElement(View$2, {
+      return /*#__PURE__*/React.createElement(View$2, {
         style: commonStyles.emptyContainer
-      }, /*#__PURE__*/React$1.createElement(Skeleton, null));
+      }, /*#__PURE__*/React.createElement(Skeleton, null));
     }
     if (error || !sectionData) {
-      return /*#__PURE__*/React$1.createElement(View$2, {
-        style: commonStyles.emptyContainer
-      }, /*#__PURE__*/React$1.createElement(Text$3, null, "No section data available"));
+      return /*#__PURE__*/React.createElement(EmptyState, {
+        message: error || 'No section data available.'
+      });
     }
     switch (sectionData.type) {
       case exports.SectionType.Banner:
-        return /*#__PURE__*/React$1.createElement(Carousel, {
+        return /*#__PURE__*/React.createElement(Carousel, {
           section: sectionData
         });
       case exports.SectionType.Grid:
-        return /*#__PURE__*/React$1.createElement(Grid, {
+        return /*#__PURE__*/React.createElement(Grid, {
           section: sectionData
         });
       default:
         console.warn("Unknown section type: ".concat(sectionData.type));
-        return null;
+        return /*#__PURE__*/React.createElement(EmptyState, {
+          message: "Unknown section type."
+        });
     }
   };
-  if (!section && !sectionId) {
-    console.warn('Section component requires either section or sectionId prop');
-    return null;
-  }
-  return sectionData ? /*#__PURE__*/React$1.createElement(SectionContext.Provider, {
+  return sectionData ? /*#__PURE__*/React.createElement(SectionContext.Provider, {
     value: {
       sectionData: sectionData
     }
-  }, /*#__PURE__*/React$1.createElement(View$2, {
+  }, /*#__PURE__*/React.createElement(View$2, {
     style: styles.section
   }, renderSectionContent())) : null;
 };
 
+/**
+ * A page-level component that represents a Group view in the application.
+ *
+ * This component serves as a container page that manages the fetching and display
+ * of a group's data and its associated sections. It handles various states including
+ * loading, errors, and empty states, providing a complete page experience for
+ * viewing group content.
+ *
+ * @param id - The unique identifier of the group to fetch and display.
+ */
 var Group = function (_a) {
   var id = _a.id;
+  if (!id) return null;
   var getGroupByID = useWllSdk().getGroupByID;
-  var _b = React$1.useState(null),
+  var _b = React.useState(null),
     groupData = _b[0],
     setGroupData = _b[1];
-  var _c = React$1.useState(true),
-    loading = _c[0],
-    setLoading = _c[1];
-  React$1.useEffect(function () {
-    var fetchGroup = function () {
-      return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        return __generator(this, function (_a) {
-          switch (_a.label) {
-            case 0:
-              setLoading(true);
-              return [4 /*yield*/, getGroupByID(id)];
-            case 1:
-              response = _a.sent();
-              setGroupData(response.data);
-              setLoading(false);
-              return [2 /*return*/];
-          }
-        });
+  var _c = React.useState(null),
+    error = _c[0],
+    setError = _c[1];
+  var fetchGroup = React.useCallback(function () {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var response;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            _a.trys.push([0, 2,, 3]);
+            setError(null);
+            return [4 /*yield*/, getGroupByID(id)];
+          case 1:
+            response = _a.sent();
+            setGroupData(response.data);
+            return [3 /*break*/, 3];
+          case 2:
+            _a.sent();
+            setError('Failed to fetch group data. Please try again later.');
+            return [3 /*break*/, 3];
+          case 3:
+            return [2 /*return*/];
+        }
       });
-    };
-    fetchGroup();
+    });
   }, [id, getGroupByID]);
-  if (loading) {
-    return /*#__PURE__*/React$1.createElement(View$2, {
+  React.useEffect(function () {
+    fetchGroup();
+  }, [fetchGroup]);
+  // Handle loading state
+  if (!groupData && !error) {
+    return /*#__PURE__*/React.createElement(View$2, {
       style: commonStyles.emptyContainer
-    }, /*#__PURE__*/React$1.createElement(Skeleton, null));
+    }, /*#__PURE__*/React.createElement(Skeleton, null));
   }
+  // Handle error state
+  if (error) {
+    return /*#__PURE__*/React.createElement(View$2, {
+      style: commonStyles.emptyContainer
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "body"
+    }, error));
+  }
+  // Handle empty group data
   if (!groupData) {
-    return /*#__PURE__*/React$1.createElement(View$2, {
+    return /*#__PURE__*/React.createElement(View$2, {
       style: commonStyles.emptyContainer
-    }, /*#__PURE__*/React$1.createElement(Text, {
+    }, /*#__PURE__*/React.createElement(Text, {
       variant: "body"
     }, "No group data available"));
   }
+  // Handle empty sections
   if (!groupData.sections || groupData.sections.length === 0) {
-    return /*#__PURE__*/React$1.createElement(View$2, {
+    return /*#__PURE__*/React.createElement(View$2, {
       style: commonStyles.emptyContainer
-    }, /*#__PURE__*/React$1.createElement(Text, {
+    }, /*#__PURE__*/React.createElement(Text, {
       variant: "body"
     }, "No sections available"));
   }
   var sortedSections = sortByPriority(groupData.sections);
-  return /*#__PURE__*/React$1.createElement(View$2, null, sortedSections.map(function (section) {
-    return /*#__PURE__*/React$1.createElement(Section, {
+  return /*#__PURE__*/React.createElement(View$2, null, sortedSections.map(function (section) {
+    return /*#__PURE__*/React.createElement(Section, {
       key: section.id,
       section: section
     });
@@ -20514,17 +20660,20 @@ var PointsTileFormattedPoints = function () {
   var styles = usePointsTileStyles();
   var configuration = useTileContext().configuration;
   var _a = configuration,
-    multiplier = _a.multiplier,
-    pointsPrefix = _a.pointsPrefix,
-    pointsSuffix = _a.pointsSuffix,
+    _b = _a.multiplier,
+    multiplier = _b === void 0 ? 1 : _b,
+    _c = _a.pointsPrefix,
+    pointsPrefix = _c === void 0 ? '' : _c,
+    _d = _a.pointsSuffix,
+    pointsSuffix = _d === void 0 ? 'pts' : _d,
     points = _a.points;
-  var calculatedPoints = points !== undefined ? points * (multiplier !== null && multiplier !== void 0 ? multiplier : 1) : null;
-  if (calculatedPoints === null) return null;
-  return /*#__PURE__*/React__namespace.createElement(Text, {
+  if (points === undefined) return null;
+  var calculatedPoints = points * multiplier;
+  return /*#__PURE__*/React.createElement(Text, {
     variant: "caption"
-  }, pointsPrefix !== null && pointsPrefix !== void 0 ? pointsPrefix : '', /*#__PURE__*/React__namespace.createElement(Row, null, calculatedPoints, /*#__PURE__*/React__namespace.createElement(Text, {
+  }, pointsPrefix, /*#__PURE__*/React.createElement(Row, null, calculatedPoints, /*#__PURE__*/React.createElement(Text, {
     style: styles.suffix
-  }, pointsSuffix !== null && pointsSuffix !== void 0 ? pointsSuffix : 'pts')));
+  }, pointsSuffix)));
 };
 
 var PointsTileMedia = function (_a) {
@@ -20533,9 +20682,9 @@ var PointsTileMedia = function (_a) {
   var artworkUrl = configuration.artworkUrl;
   var styles = usePointsTileStyles(isFullSize);
   if (!artworkUrl) return null;
-  return /*#__PURE__*/React$1.createElement(View$2, {
+  return /*#__PURE__*/React.createElement(View$2, {
     style: styles.imageContainer
-  }, /*#__PURE__*/React$1.createElement(Image$2, {
+  }, /*#__PURE__*/React.createElement(Image$2, {
     source: {
       uri: artworkUrl
     },
@@ -20547,30 +20696,41 @@ var PointsTileMedia = function (_a) {
 var PointsTileTitle = function () {
   var configuration = useTileContext().configuration;
   var title = configuration.title;
-  return /*#__PURE__*/React$1.createElement(Text, {
+  return title ? /*#__PURE__*/React.createElement(Text, {
     variant: "eyebrow"
-  }, title);
+  }, title) : null;
 };
 
-var PointsTile = function (_a) {
+/**
+ * The PointsTile component renders a tile with media, title, and formatted points.
+ *
+ * @param tile - The tile data to render.
+ */
+var PointsTileRoot = function (_a) {
   var tile = _a.tile;
+  if (!tile) return null;
   var isFullSize = useTileSize(tile).isFullSize;
   var styles = usePointsTileStyles(isFullSize);
-  return /*#__PURE__*/React$1.createElement(BaseTile, {
+  return /*#__PURE__*/React.createElement(BaseTile, {
     tile: tile
-  }, isFullSize && /*#__PURE__*/React$1.createElement(PointsTile.Media, {
-    isFullSize: isFullSize
-  }), /*#__PURE__*/React$1.createElement(View$2, {
+  }, isFullSize && /*#__PURE__*/React.createElement(PointsTile.Media, {
+    isFullSize: true
+  }), /*#__PURE__*/React.createElement(View$2, {
     style: styles.container
-  }, !isFullSize && /*#__PURE__*/React$1.createElement(PointsTile.Media, {
-    isFullSize: isFullSize
-  }), /*#__PURE__*/React$1.createElement(View$2, {
+  }, !isFullSize && /*#__PURE__*/React.createElement(PointsTile.Media, {
+    isFullSize: false
+  }), /*#__PURE__*/React.createElement(View$2, {
     style: styles.contentContainer
-  }, /*#__PURE__*/React$1.createElement(PointsTile.Title, null), /*#__PURE__*/React$1.createElement(PointsTile.Points, null))));
+  }, /*#__PURE__*/React.createElement(PointsTile.Title, null), /*#__PURE__*/React.createElement(PointsTile.Points, null))));
 };
-PointsTile.Title = PointsTileTitle;
-PointsTile.Points = PointsTileFormattedPoints;
-PointsTile.Media = PointsTileMedia;
+/**
+ * The PointsTile component with subcomponents attached.
+ */
+var PointsTile = Object.assign(PointsTileRoot, {
+  Title: PointsTileTitle,
+  Points: PointsTileFormattedPoints,
+  Media: PointsTileMedia
+});
 var PointsTile$1 = withTileFetching(PointsTile);
 
 var useRewardCategoryTileStyles = function () {
@@ -20612,11 +20772,11 @@ var RewardCategoryHeader = function () {
     showName = _a.showName,
     name = _a.name;
   if (!showName || !name) return null;
-  return /*#__PURE__*/React$1.createElement(View$2, {
+  return /*#__PURE__*/React.createElement(View$2, {
     style: [styles.header, {
       backgroundColor: theme.primary
     }]
-  }, /*#__PURE__*/React$1.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(Text, {
     style: [styles.headerText, {
       color: theme.primaryText
     }],
@@ -20630,7 +20790,7 @@ var RewardCategoryMedia = function () {
   var configuration = useTileContext().configuration;
   var artworkUrl = configuration.artworkUrl;
   if (!artworkUrl) return null;
-  return /*#__PURE__*/React$1.createElement(ProgressiveImage, {
+  return /*#__PURE__*/React.createElement(ProgressiveImage, {
     source: {
       uri: artworkUrl
     },
@@ -20638,20 +20798,30 @@ var RewardCategoryMedia = function () {
   });
 };
 
-var RewardCategoryTile = function (_a) {
+/**
+ * The RewardCategoryTile component renders a tile with a header and media.
+ *
+ * @param tile - The tile data to render.
+ */
+var RewardCategoryTileRoot = function (_a) {
   var tile = _a.tile;
   if (!tile) return null;
-  return /*#__PURE__*/React__namespace.createElement(BaseTile, {
+  return /*#__PURE__*/React.createElement(BaseTile, {
     tile: tile
-  }, /*#__PURE__*/React__namespace.createElement(RewardCategoryTile.Header, null), /*#__PURE__*/React__namespace.createElement(RewardCategoryTile.Media, null));
+  }, /*#__PURE__*/React.createElement(RewardCategoryTile.Header, null), /*#__PURE__*/React.createElement(RewardCategoryTile.Media, null));
 };
-RewardCategoryTile.Header = RewardCategoryHeader;
-RewardCategoryTile.Media = RewardCategoryMedia;
+/**
+ * The RewardCategoryTile component with subcomponents attached.
+ */
+var RewardCategoryTile = Object.assign(RewardCategoryTileRoot, {
+  Header: RewardCategoryHeader,
+  Media: RewardCategoryMedia
+});
 var RewardCategoryTile$1 = withTileFetching(RewardCategoryTile);
 
 var RewardTileChevron = function () {
   var theme = useWllSdk().theme;
-  return /*#__PURE__*/React$1.createElement(Icon, {
+  return /*#__PURE__*/React.createElement(Icon, {
     name: "ChevronRight",
     color: theme.derivedSurfaceText[20]
   });
@@ -20692,6 +20862,9 @@ var useRewardTileStyles = function () {
     suffix: {
       color: theme.primary,
       fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet)
+    },
+    header: {
+      marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
     }
   });
 };
@@ -20711,9 +20884,9 @@ var RewardTileMedia = function (_a) {
   return (
     /*#__PURE__*/
     // @ts-ignore: We are using percentage values for flexBasis, which is valid in React Native but TypeScript expects a number.
-    React$1.createElement(View$2, {
+    React.createElement(View$2, {
       style: [styles.imageContainer, containerStyle]
-    }, /*#__PURE__*/React$1.createElement(ProgressiveImage, {
+    }, /*#__PURE__*/React.createElement(ProgressiveImage, {
       source: {
         uri: artworkUrl
       },
@@ -20728,17 +20901,22 @@ var RewardTilePoints = function () {
   var _a = configuration,
     showPrice = _a.showPrice,
     price = _a.price,
-    pointsMultiplier = _a.pointsMultiplier,
-    pointsPrefix = _a.pointsPrefix,
-    pointsSuffix = _a.pointsSuffix;
-  var calculatedPoints = price !== undefined ? price * (Number(pointsMultiplier) || 1) : null;
-  if (!showPrice || calculatedPoints === null) return null;
-  return /*#__PURE__*/React$1.createElement(Text, {
+    _b = _a.pointsMultiplier,
+    pointsMultiplier = _b === void 0 ? 1 : _b,
+    _c = _a.pointsPrefix,
+    pointsPrefix = _c === void 0 ? '' : _c,
+    _d = _a.pointsSuffix,
+    pointsSuffix = _d === void 0 ? 'pts' : _d;
+  // Exit early if price is not shown or undefined
+  if (!showPrice || price === undefined) return null;
+  // Calculate points
+  var calculatedPoints = price * Number(pointsMultiplier);
+  return /*#__PURE__*/React.createElement(Text, {
     variant: "caption",
     style: styles.footer
-  }, pointsPrefix, /*#__PURE__*/React$1.createElement(View$2, {
+  }, pointsPrefix, /*#__PURE__*/React.createElement(View$2, {
     style: styles.pointsContainer
-  }, calculatedPoints, /*#__PURE__*/React$1.createElement(Text, {
+  }, calculatedPoints, /*#__PURE__*/React.createElement(Text, {
     style: styles.suffix
   }, pointsSuffix)));
 };
@@ -20747,7 +20925,7 @@ var RewardTileSummary = function () {
   var configuration = useTileContext().configuration;
   var summary = configuration.summary;
   if (!summary) return null;
-  return /*#__PURE__*/React$1.createElement(Text, {
+  return /*#__PURE__*/React.createElement(Text, {
     variant: "body"
   }, summary);
 };
@@ -20756,33 +20934,217 @@ var RewardTileTitle = function () {
   var configuration = useTileContext().configuration;
   var name = configuration.name;
   if (!name) return null;
-  return /*#__PURE__*/React$1.createElement(Text, {
+  return /*#__PURE__*/React.createElement(Text, {
     variant: "title",
     ellipsizeMode: "tail",
     numberOfLines: 1
   }, name);
 };
 
-var RewardTile = function (_a) {
+/**
+ * Helper function to determine if the tile should display artwork only.
+ *
+ * @param configuration - The configuration object of the tile.
+ * @returns `true` if the tile should display artwork only.
+ */
+var isArtworkOnly = function (configuration) {
+  return !configuration.showDetails;
+};
+/**
+ * The RewardTile component renders a tile with media, title, summary, points, and a chevron.
+ *
+ * @param tile - The tile data to render.
+ */
+var RewardTileRoot = function (_a) {
   var tile = _a.tile;
+  var styles = useRewardTileStyles();
+  if (!tile) return null;
   var configuration = tile.configuration;
-  var showDetails = configuration.showDetails;
-  return /*#__PURE__*/React$1.createElement(BaseTile, {
+  return /*#__PURE__*/React.createElement(BaseTile, {
     tile: tile
-  }, /*#__PURE__*/React$1.createElement(RewardTile.Media, {
-    isArtworkOnly: !showDetails
-  }), /*#__PURE__*/React$1.createElement(Column, null, /*#__PURE__*/React$1.createElement(Row, {
+  }, /*#__PURE__*/React.createElement(RewardTile.Media, {
+    isArtworkOnly: isArtworkOnly(configuration)
+  }), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(Row, {
     justify: "between",
-    align: "center"
-  }, /*#__PURE__*/React$1.createElement(RewardTile.Title, null), /*#__PURE__*/React$1.createElement(RewardTile.Chevron, null)), /*#__PURE__*/React$1.createElement(RewardTile.Summary, null), /*#__PURE__*/React$1.createElement(RewardTile.Points, null)));
+    align: "center",
+    style: styles.header
+  }, /*#__PURE__*/React.createElement(RewardTile.Title, null), /*#__PURE__*/React.createElement(RewardTile.Chevron, null)), /*#__PURE__*/React.createElement(RewardTile.Summary, null), /*#__PURE__*/React.createElement(RewardTile.Points, null)));
 };
-RewardTile.Media = RewardTileMedia;
-RewardTile.Title = RewardTileTitle;
-RewardTile.Summary = RewardTileSummary;
-RewardTile.Points = RewardTilePoints;
-RewardTile.Chevron = RewardTileChevron;
+/**
+ * The RewardTile component with subcomponents attached.
+ */
+var RewardTile = Object.assign(RewardTileRoot, {
+  Media: RewardTileMedia,
+  Title: RewardTileTitle,
+  Summary: RewardTileSummary,
+  Points: RewardTilePoints,
+  Chevron: RewardTileChevron
+});
 var RewardTile$1 = withTileFetching(RewardTile);
 
+var justifyMap = {
+  start: 'flex-start',
+  end: 'flex-end',
+  center: 'center',
+  between: 'space-between',
+  around: 'space-around',
+  evenly: 'space-evenly'
+};
+var alignMap = {
+  start: 'flex-start',
+  end: 'flex-end',
+  center: 'center',
+  stretch: 'stretch',
+  baseline: 'baseline'
+};
+
+/**
+ * A Column layout component that arranges its children in a vertical stack.
+ *
+ * @param children - The child components to render inside the column.
+ * @param justify - Defines how children are aligned along the main axis.
+ * @param align - Defines how children are aligned along the cross axis.
+ * @param style - Additional styles to apply to the container.
+ */
+var Column = /*#__PURE__*/React.memo(function (_a) {
+  var _b, _c;
+  var children = _a.children,
+    _d = _a.justify,
+    justify = _d === void 0 ? 'start' : _d,
+    _e = _a.align,
+    align = _e === void 0 ? 'stretch' : _e,
+    style = _a.style;
+  var _f = useResponsive$1(),
+    isDesktop = _f.isDesktop,
+    isTablet = _f.isTablet;
+  var theme = useWllSdk().theme;
+  var spacing = useResponsiveValue((_b = theme === null || theme === void 0 ? void 0 : theme.sizes) === null || _b === void 0 ? void 0 : _b.sm, (_c = theme === null || theme === void 0 ? void 0 : theme.sizes) === null || _c === void 0 ? void 0 : _c.xxxs, isDesktop, isTablet);
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: [{
+      flex: 1,
+      flexDirection: 'column',
+      justifyContent: justifyMap[justify],
+      alignItems: alignMap[align],
+      paddingHorizontal: spacing,
+      paddingBottom: spacing
+    }, style]
+  }, children);
+});
+
+/**
+ * A FlexBox component that provides a flexible container with `flex: 1`.
+ *
+ * This component is commonly used to create a full-flex container that expands
+ * to fill available space in a layout.
+ */
+var FlexBox = function (_a) {
+  var children = _a.children,
+    style = _a.style;
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: [{
+      flex: 1
+    }, style]
+  }, children);
+};
+
+var Layout = function (_a) {
+  var children = _a.children,
+    _b = _a.justify,
+    justify = _b === void 0 ? 'start' : _b,
+    _c = _a.align,
+    align = _c === void 0 ? 'stretch' : _c,
+    _d = _a.direction,
+    direction = _d === void 0 ? 'column' : _d,
+    _e = _a.style,
+    style = _e === void 0 ? {} : _e;
+  var theme = useWllSdk().theme;
+  var _f = useResponsive$1(),
+    isDesktop = _f.isDesktop,
+    isTablet = _f.isTablet;
+  var dynamicStyles = StyleSheet$1.create({
+    column: {
+      flex: 1,
+      paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
+      paddingBottom: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
+      justifyContent: justifyMap[justify],
+      alignItems: alignMap[align],
+      flexDirection: direction
+    }
+  });
+  return /*#__PURE__*/React__namespace.createElement(View$2, {
+    style: [dynamicStyles.column, style]
+  }, children);
+};
+
+/**
+ * A Row layout component that arranges its children in a horizontal stack.
+ *
+ * @param children - The child components to render inside the row.
+ * @param justify - Defines how children are aligned along the main axis (horizontal).
+ * @param align - Defines how children are aligned along the cross axis (vertical).
+ * @param direction - The flex direction for the row (default is 'row').
+ * @param style - Additional styles to apply to the container.
+ */
+var Row = function (_a) {
+  var children = _a.children,
+    _b = _a.justify,
+    justify = _b === void 0 ? 'start' : _b,
+    _c = _a.align,
+    align = _c === void 0 ? 'center' : _c,
+    _d = _a.direction,
+    direction = _d === void 0 ? 'row' : _d,
+    style = _a.style;
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: [{
+      flexDirection: direction,
+      justifyContent: justifyMap[justify],
+      alignItems: alignMap[align]
+    }, style]
+  }, children);
+};
+
+/**
+ * A simple Spacer component that creates flexible space in layouts.
+ *
+ * The Spacer is commonly used in flexbox layouts to create adjustable empty space
+ * between child elements, avoiding the need for explicit margins or padding.
+ */
+var Spacer = function (_a) {
+  var style = _a.style;
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: [{
+      flex: 1
+    }, style]
+  });
+};
+
+/**
+ * A Stack layout component that arranges its children in a flexible stack.
+ *
+ * @param children - The child components to render inside the stack.
+ * @param justify - Defines how children are aligned along the main axis.
+ * @param align - Defines how children are aligned along the cross axis.
+ * @param direction - The flex direction for the stack (default is 'column').
+ * @param style - Additional styles to apply to the container.
+ */
+var Stack = function (_a) {
+  var children = _a.children,
+    _b = _a.justify,
+    justify = _b === void 0 ? 'start' : _b,
+    _c = _a.align,
+    align = _c === void 0 ? 'stretch' : _c,
+    _d = _a.direction,
+    direction = _d === void 0 ? 'column' : _d,
+    style = _a.style;
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: [{
+      flexDirection: direction,
+      justifyContent: justifyMap[justify],
+      alignItems: alignMap[align]
+    }, style]
+  }, children);
+};
+
 var useTierTileStyles = function () {
   var _a = useResponsive$1(),
     isDesktop = _a.isDesktop,
@@ -20817,6 +21179,11 @@ var useTierTileStyles = function () {
       width: '100%',
       height: '100%',
       resizeMode: 'cover'
+    },
+    name: {
+      marginBottom: 0,
+      numberOfLines: 1,
+      ellipsizeMode: 'tail'
     }
   });
 };
@@ -20858,7 +21225,7 @@ var TierTileFull = function (_a) {
     },
     style: styles.image,
     resizeMode: "center"
-  })), /*#__PURE__*/React__namespace.createElement(Column$1, {
+  })), /*#__PURE__*/React__namespace.createElement(Layout, {
     align: "stretch",
     justify: artworkUrl ? 'start' : 'center',
     direction: "column"
@@ -20884,19 +21251,25 @@ var TierTileHalf = function (_a) {
     name = _c.name;
   return /*#__PURE__*/React__namespace.createElement(BaseTile, {
     tile: tile
-  }, /*#__PURE__*/React__namespace.createElement(Column$1, {
+  }, /*#__PURE__*/React__namespace.createElement(Layout, {
     align: "center",
     justify: "between",
     direction: "row",
     style: {
       paddingTop: 16
     }
-  }, /*#__PURE__*/React__namespace.createElement(View$2, null, title && /*#__PURE__*/React__namespace.createElement(Text, {
+  }, /*#__PURE__*/React__namespace.createElement(View$2, {
+    style: {
+      flex: 1,
+      flexShrink: 1
+    }
+  }, title && /*#__PURE__*/React__namespace.createElement(Text, {
     variant: "eyebrow",
     style: styles.title
   }, title), name && /*#__PURE__*/React__namespace.createElement(Text, {
     variant: "title",
-    style: styles.title
+    style: styles.name,
+    numberOfLines: 2
   }, name)), artworkUrl && /*#__PURE__*/React__namespace.createElement(View$2, {
     style: styles.smallImageContainer
   }, /*#__PURE__*/React__namespace.createElement(Image$2, {
@@ -20919,14 +21292,14 @@ var TierTileEmpty = function (_a) {
   if (isHalfSize) {
     return /*#__PURE__*/React__namespace.createElement(BaseTile, {
       tile: tile
-    }, /*#__PURE__*/React__namespace.createElement(Column$1, {
+    }, /*#__PURE__*/React__namespace.createElement(Layout, {
       align: "center",
       justify: "between",
       direction: "row",
       style: {
         paddingTop: 16
       }
-    }, /*#__PURE__*/React__namespace.createElement(View$2, {
+    }, /*#__PURE__*/React__namespace.createElement(Column, {
       style: {
         flex: 1
       }
@@ -20935,7 +21308,7 @@ var TierTileEmpty = function (_a) {
       style: styles.title
     }, title), emptyDescription && /*#__PURE__*/React__namespace.createElement(Text, {
       variant: "body"
-    }, emptyDescription)), emptyArtworkUrl && /*#__PURE__*/React__namespace.createElement(View$2, {
+    }, emptyDescription)), emptyArtworkUrl && /*#__PURE__*/React__namespace.createElement(Column, {
       style: styles.smallImageContainer
     }, /*#__PURE__*/React__namespace.createElement(Image$2, {
       source: {
@@ -20955,11 +21328,11 @@ var TierTileEmpty = function (_a) {
     },
     style: styles.image,
     resizeMode: "center"
-  })), /*#__PURE__*/React__namespace.createElement(Column$1, {
+  })), /*#__PURE__*/React__namespace.createElement(Layout, {
     align: "stretch",
     justify: "center",
     direction: "column"
-  }, /*#__PURE__*/React__namespace.createElement(View$2, null, title && /*#__PURE__*/React__namespace.createElement(Text, {
+  }, /*#__PURE__*/React__namespace.createElement(Column, null, title && /*#__PURE__*/React__namespace.createElement(Text, {
     variant: "title",
     style: styles.title
   }, title), emptyDescription && /*#__PURE__*/React__namespace.createElement(Text, {
@@ -20971,46 +21344,26 @@ TierTile.Full = TierTileFull;
 TierTile.Half = TierTileHalf;
 TierTile.Empty = TierTileEmpty;
 
+var _a;
+var TILE_COMPONENTS = (_a = {}, _a[exports.TileType.Content] = ContentTile$1, _a[exports.TileType.Badge] = BadgeTile$1, _a[exports.TileType.Tier] = TierTile, _a[exports.TileType.Points] = PointsTile$1, _a[exports.TileType.Reward] = RewardTile$1, _a[exports.TileType.RewardCategory] = RewardCategoryTile$1, _a[exports.TileType.Banner] = BannerTile$1, _a);
+/**
+ * TileContainer component to render a list of tiles with proper layout and spacing.
+ */
 var TileContainer = function (_a) {
   var tiles = _a.tiles;
-  var renderTile = function (tile) {
-    switch (tile.type) {
-      case exports.TileType.Content:
-        return /*#__PURE__*/React__namespace.createElement(ContentTile$1, {
-          tile: tile
-        });
-      case exports.TileType.Badge:
-        return /*#__PURE__*/React__namespace.createElement(BadgeTile$1, {
-          tile: tile
-        });
-      case exports.TileType.Tier:
-        return /*#__PURE__*/React__namespace.createElement(TierTile, {
-          tile: tile
-        });
-      case exports.TileType.Points:
-        return /*#__PURE__*/React__namespace.createElement(PointsTile$1, {
-          tile: tile
-        });
-      case exports.TileType.Reward:
-        return /*#__PURE__*/React__namespace.createElement(RewardTile$1, {
-          tile: tile
-        });
-      case exports.TileType.RewardCategory:
-        return /*#__PURE__*/React__namespace.createElement(RewardCategoryTile$1, {
-          tile: tile
-        });
-    }
-  };
-  return /*#__PURE__*/React__namespace.createElement(View$2, {
+  return /*#__PURE__*/React.createElement(View$2, {
     style: styles.container
   }, tiles.map(function (tile, index) {
-    var isHalfTile = tile.tileHeight === exports.TileHeight.Half;
-    return /*#__PURE__*/React__namespace.createElement(View$2, {
+    var TileComponent = TILE_COMPONENTS[tile.type];
+    var isHalfSize = useTileSize(tile).isHalfSize;
+    return /*#__PURE__*/React.createElement(View$2, {
       key: tile.id,
-      style: [styles.tileContainer, isHalfTile && styles.halfTileContainer, index > 0 && {
+      style: [styles.tileContainer, isHalfSize && styles.halfTileContainer, index > 0 && {
         marginTop: GRID_GAP
       }]
-    }, renderTile(tile));
+    }, TileComponent ? /*#__PURE__*/React.createElement(TileComponent, {
+      tile: tile
+    }) : null);
   }));
 };
 var styles = StyleSheet$1.create({
@@ -21029,90 +21382,6 @@ var styles = StyleSheet$1.create({
   }
 });
 
-var Column = function (_a) {
-  var children = _a.children,
-    _b = _a.justify,
-    justify = _b === void 0 ? 'start' : _b,
-    _c = _a.align,
-    align = _c === void 0 ? 'stretch' : _c,
-    style = _a.style;
-  var _d = useResponsive$1(),
-    isDesktop = _d.isDesktop,
-    isTablet = _d.isTablet;
-  var theme = useWllSdk().theme;
-  return /*#__PURE__*/React$1.createElement(View$2, {
-    style: [{
-      flex: 1,
-      flexDirection: 'column',
-      justifyContent: justifyMap[justify],
-      alignItems: alignMap[align],
-      paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
-      paddingBottom: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
-    }, style]
-  }, children);
-};
-
-var Row = function (_a) {
-  var children = _a.children,
-    _b = _a.justify,
-    justify = _b === void 0 ? 'start' : _b,
-    _c = _a.align,
-    align = _c === void 0 ? 'center' : _c,
-    _d = _a.direction,
-    direction = _d === void 0 ? 'row' : _d,
-    style = _a.style;
-  return /*#__PURE__*/React$1.createElement(View$2, {
-    style: [{
-      flexDirection: direction,
-      justifyContent: justifyMap[justify],
-      alignItems: alignMap[align]
-    }, style]
-  }, children);
-};
-
-var FlexBox = function (_a) {
-  var children = _a.children;
-  return /*#__PURE__*/React$1.createElement(View$2, {
-    style: {
-      flex: 1
-    }
-  }, children);
-};
-
-var Stack = function (_a) {
-  var children = _a.children,
-    _b = _a.justify,
-    justify = _b === void 0 ? 'start' : _b,
-    _c = _a.align,
-    align = _c === void 0 ? 'stretch' : _c,
-    _d = _a.direction,
-    direction = _d === void 0 ? 'column' : _d,
-    style = _a.style;
-  return /*#__PURE__*/React.createElement(View$2, {
-    style: [{
-      flexDirection: direction,
-      justifyContent: justifyMap[justify],
-      alignItems: alignMap[align]
-    }, style]
-  }, children);
-};
-
-var justifyMap = {
-  start: 'flex-start',
-  end: 'flex-end',
-  center: 'center',
-  between: 'space-between',
-  around: 'space-around',
-  evenly: 'space-evenly'
-};
-var alignMap = {
-  start: 'flex-start',
-  end: 'flex-end',
-  center: 'center',
-  stretch: 'stretch',
-  baseline: 'baseline'
-};
-
 var Reward = /** @class */function () {
   function Reward() {}
   return Reward;
@@ -21127,7 +21396,6 @@ exports.BaseTile = BaseTile;
 exports.Button = Button;
 exports.Carousel = Carousel;
 exports.Column = Column;
-exports.Content = Column$1;
 exports.ContentTile = ContentTile$1;
 exports.ContentTileConfig = ContentTileConfig;
 exports.FlexBox = FlexBox;
@@ -21151,11 +21419,14 @@ exports.RowHeader = RowHeader;
 exports.Section = Section;
 exports.SectionHeader = SectionHeader;
 exports.Skeleton = Skeleton;
+exports.Spacer = Spacer;
 exports.Stack = Stack;
 exports.Text = Text;
 exports.TierTileConfig = TierTileConfig;
 exports.TierTileUpdated = TierTile;
 exports.TileContainer = TileContainer;
 exports.WllSdkProvider = WllSdkProvider;
+exports.alignMap = alignMap;
+exports.justifyMap = justifyMap;
 exports.useWllSdk = useWllSdk;
 //# sourceMappingURL=index.js.map