@wlloyalty/wll-react-sdk 1.10.0 → 1.11.0

package/dist/web.js

@@ -19206,17 +19206,131 @@ var Animated$1 = _objectSpread2({
   View
 }, Animated);
 
+var Text = function (_a) {
+  var _b = _a.variant,
+    variant = _b === void 0 ? 'body' : _b,
+    style = _a.style;
+    _a.isSurface;
+    var props = __rest(_a, ["variant", "style", "isSurface"]);
+  var theme = useWllSdk().theme;
+  var _d = useResponsive(),
+    isDesktop = _d.isDesktop,
+    isTablet = _d.isTablet;
+  var getVariantStyle = function (variant) {
+    var baseStyle = {
+      color: theme.surfaceText
+    };
+    switch (variant) {
+      case 'eyebrow':
+        return __assign(__assign({}, baseStyle), {
+          fontSize: useResponsiveValue(theme.sizes.md, theme.sizes.sm, isDesktop, isTablet),
+          marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
+        });
+      case 'title':
+        return __assign(__assign({}, baseStyle), {
+          fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet),
+          fontWeight: 'bold'
+        });
+      case 'body':
+        return {
+          color: theme.derivedSurfaceText[20],
+          fontSize: useResponsiveValue(theme.sizes.md, theme.sizes.sm, isDesktop, isTablet)
+        };
+      case 'caption':
+        return __assign(__assign({}, baseStyle), {
+          fontWeight: 'bold',
+          fontSize: useResponsiveValue(theme.sizes.xxl, theme.sizes.xl, isDesktop, isTablet),
+          color: theme.primary
+        });
+      case 'description':
+      case 'label':
+      default:
+        return __assign(__assign({}, baseStyle), {
+          fontSize: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
+        });
+    }
+  };
+  var variantStyle = getVariantStyle(variant);
+  // NOTE: React Native Web has different style resolution rules compared to CSS.
+  // 1. We create styles using StyleSheet.create for better performance
+  // 2. Base styles set the initial fontFamily
+  // 3. variantStyle contains responsive fontSize and other variant-specific styles
+  // 4. webOverrides ensures fontFamily is correctly applied on web platform
+  //    (prevents system font stack from being incorrectly applied)
+  // 5. custom style prop has highest precedence
+  // The order matters because RN Web resolves styles by specific properties
+  // rather than last-declaration-wins like in CSS
+  // https://necolas.github.io/react-native-web/docs/styling/#how-it-works
+  var styles = StyleSheet$1.create({
+    base: {
+      fontFamily: theme.fontFamily
+    },
+    webOverrides: IS_WEB ? {
+      fontFamily: theme.fontFamily
+    } : {}
+  });
+  // Determine appropriate accessibility role based on variant
+  // This helps screen readers understand the semantic meaning
+  var accessibilityRole;
+  switch (variant) {
+    case 'title':
+      accessibilityRole = IS_MOBILE ? 'heading' : 'header';
+      break;
+    case 'caption':
+      accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
+      break;
+    case 'eyebrow':
+      accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
+      break;
+    case 'description':
+      accessibilityRole = IS_MOBILE ? 'article' : 'paragraph';
+      break;
+    case 'label':
+      accessibilityRole = IS_MOBILE ? 'option' : 'text';
+      break;
+    default:
+      accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
+  }
+  var combinedStyles = [styles.base, variantStyle, styles.webOverrides, style];
+  return /*#__PURE__*/React__namespace.createElement(RNText, __assign({
+    style: combinedStyles
+  }, props, {
+    accessible: true,
+    role: accessibilityRole
+  }));
+};
+
 /* istanbul ignore file */
 var useStyles = function (theme) {
   return StyleSheet$1.create({
+    wrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      width: '100%'
+    },
     container: {
-      width: '100%',
+      flex: 1,
       borderRadius: theme.sizes.borderRadiusRounded,
       overflow: 'hidden'
     },
     progress: {
       borderRadius: theme.sizes.borderRadiusRounded,
       height: '100%'
+    },
+    labelContainer: {
+      flexDirection: 'row',
+      alignItems: 'baseline',
+      marginLeft: 8,
+      flexShrink: 0
+    },
+    labelCurrent: {
+      fontSize: 15,
+      fontWeight: 'bold',
+      color: theme.primary
+    },
+    labelTarget: {
+      fontSize: 12,
+      color: theme.derivedSurfaceText[20]
     }
   });
 };
@@ -19262,7 +19376,11 @@ var ProgressBar = function (_a) {
     _c = _a.height,
     height = _c === void 0 ? 'sm' : _c,
     _d = _a.animationDuration,
-    animationDuration = _d === void 0 ? 300 : _d;
+    animationDuration = _d === void 0 ? 300 : _d,
+    currentValue = _a.currentValue,
+    targetValue = _a.targetValue,
+    _e = _a.showProgressLabel,
+    showProgressLabel = _e === void 0 ? false : _e;
   var theme = useWllSdk().theme;
   var styles = useStyles(theme);
   var containerStyles = useContainerStyles(theme);
@@ -19284,11 +19402,30 @@ var ProgressBar = function (_a) {
       outputRange: ['0%', '100%']
     })
   };
+  var shouldShowLabel = showProgressLabel && currentValue !== undefined && targetValue !== undefined;
+  if (!shouldShowLabel) {
+    return /*#__PURE__*/React__namespace.createElement(View$2, {
+      style: [containerStyle, {
+        width: '100%'
+      }]
+    }, /*#__PURE__*/React__namespace.createElement(Animated$1.View, {
+      style: [styles.progress, progressStyles, progressWidth]
+    }));
+  }
   return /*#__PURE__*/React__namespace.createElement(View$2, {
-    style: containerStyle
+    style: styles.wrapper
+  }, /*#__PURE__*/React__namespace.createElement(View$2, {
+    style: [containerStyle]
   }, /*#__PURE__*/React__namespace.createElement(Animated$1.View, {
     style: [styles.progress, progressStyles, progressWidth]
-  }));
+  })), /*#__PURE__*/React__namespace.createElement(View$2, {
+    style: styles.labelContainer,
+    accessibilityLabel: "".concat(currentValue, " of ").concat(targetValue, " completed")
+  }, /*#__PURE__*/React__namespace.createElement(Text, {
+    style: styles.labelCurrent
+  }, currentValue), /*#__PURE__*/React__namespace.createElement(Text, {
+    style: styles.labelTarget
+  }, " / ".concat(targetValue))));
 };
 
 exports.CTALinkTarget = void 0;
@@ -19317,6 +19454,7 @@ exports.TileType = void 0;
   TileType["Tier"] = "TIER";
   TileType["Roundup"] = "ROUND_UP_BALANCE";
   TileType["Venue"] = "VENUE";
+  TileType["Campaign"] = "EARNING_CAMPAIGN";
 })(exports.TileType || (exports.TileType = {}));
 exports.TileHeight = void 0;
 (function (TileHeight) {
@@ -19445,6 +19583,32 @@ var TierTileConfig = /** @class */function () {
   }
   return TierTileConfig;
 }();
+var CampaignTileConfig = /** @class */function () {
+  function CampaignTileConfig() {
+    this.campaignId = '';
+    this.type = '';
+    this.status = '';
+    this.name = '';
+    this.description = '';
+    this.artworkUrl = '';
+    this.effectivity = {
+      start: null,
+      end: null
+    };
+    this.progress = {
+      currentValue: 0,
+      targetValue: 0,
+      windowStart: null,
+      windowEnd: null,
+      optedInAt: null,
+      completedAt: null,
+      availableAgainAt: null,
+      cooldownCycle: null
+    };
+    this.missions = [];
+  }
+  return CampaignTileConfig;
+}();
 
 var useHandleTilePress = function (tile, ctaLink, ctaLinkTarget) {
   var handleNavigation = useWllSdk().handleNavigation;
@@ -19465,8 +19629,15 @@ var useHandleTilePress = function (tile, ctaLink, ctaLinkTarget) {
     }
     if ((tile === null || tile === void 0 ? void 0 : tile.type) === exports.TileType.RewardCategory) {
       var config = tile.configuration;
-      var url = "/category?id=".concat(config.rewardCategoryId);
       if (config === null || config === void 0 ? void 0 : config.rewardCategoryId) {
+        var url = "/category?id=".concat(config.rewardCategoryId);
+        return handleNavigation(url, exports.CTALinkTarget.sameWindow);
+      }
+    }
+    if ((tile === null || tile === void 0 ? void 0 : tile.type) === exports.TileType.Campaign) {
+      var config = tile.configuration;
+      if (config === null || config === void 0 ? void 0 : config.campaignId) {
+        var url = "/campaigns/".concat(config.campaignId);
         return handleNavigation(url, exports.CTALinkTarget.sameWindow);
       }
     }
@@ -19486,100 +19657,6 @@ var useTileSize = function (tile) {
   }, [tile.tileHeight]);
 };
 
-var Text = function (_a) {
-  var _b = _a.variant,
-    variant = _b === void 0 ? 'body' : _b,
-    style = _a.style;
-    _a.isSurface;
-    var props = __rest(_a, ["variant", "style", "isSurface"]);
-  var theme = useWllSdk().theme;
-  var _d = useResponsive(),
-    isDesktop = _d.isDesktop,
-    isTablet = _d.isTablet;
-  var getVariantStyle = function (variant) {
-    var baseStyle = {
-      color: theme.surfaceText
-    };
-    switch (variant) {
-      case 'eyebrow':
-        return __assign(__assign({}, baseStyle), {
-          fontSize: useResponsiveValue(theme.sizes.md, theme.sizes.sm, isDesktop, isTablet),
-          marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
-        });
-      case 'title':
-        return __assign(__assign({}, baseStyle), {
-          fontSize: useResponsiveValue(theme.sizes.xl, theme.sizes.md, isDesktop, isTablet),
-          fontWeight: 'bold'
-        });
-      case 'body':
-        return {
-          color: theme.derivedSurfaceText[20],
-          fontSize: useResponsiveValue(theme.sizes.md, theme.sizes.sm, isDesktop, isTablet)
-        };
-      case 'caption':
-        return __assign(__assign({}, baseStyle), {
-          fontWeight: 'bold',
-          fontSize: useResponsiveValue(theme.sizes.xxl, theme.sizes.xl, isDesktop, isTablet),
-          color: theme.primary
-        });
-      case 'description':
-      case 'label':
-      default:
-        return __assign(__assign({}, baseStyle), {
-          fontSize: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet)
-        });
-    }
-  };
-  var variantStyle = getVariantStyle(variant);
-  // NOTE: React Native Web has different style resolution rules compared to CSS.
-  // 1. We create styles using StyleSheet.create for better performance
-  // 2. Base styles set the initial fontFamily
-  // 3. variantStyle contains responsive fontSize and other variant-specific styles
-  // 4. webOverrides ensures fontFamily is correctly applied on web platform
-  //    (prevents system font stack from being incorrectly applied)
-  // 5. custom style prop has highest precedence
-  // The order matters because RN Web resolves styles by specific properties
-  // rather than last-declaration-wins like in CSS
-  // https://necolas.github.io/react-native-web/docs/styling/#how-it-works
-  var styles = StyleSheet$1.create({
-    base: {
-      fontFamily: theme.fontFamily
-    },
-    webOverrides: IS_WEB ? {
-      fontFamily: theme.fontFamily
-    } : {}
-  });
-  // Determine appropriate accessibility role based on variant
-  // This helps screen readers understand the semantic meaning
-  var accessibilityRole;
-  switch (variant) {
-    case 'title':
-      accessibilityRole = IS_MOBILE ? 'heading' : 'header';
-      break;
-    case 'caption':
-      accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
-      break;
-    case 'eyebrow':
-      accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
-      break;
-    case 'description':
-      accessibilityRole = IS_MOBILE ? 'article' : 'paragraph';
-      break;
-    case 'label':
-      accessibilityRole = IS_MOBILE ? 'option' : 'text';
-      break;
-    default:
-      accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
-  }
-  var combinedStyles = [styles.base, variantStyle, styles.webOverrides, style];
-  return /*#__PURE__*/React__namespace.createElement(RNText, __assign({
-    style: combinedStyles
-  }, props, {
-    accessible: true,
-    role: accessibilityRole
-  }));
-};
-
 /**
  * Renders the body text of a BaseTile component.
  *
@@ -19907,7 +19984,8 @@ var BaseTileContainer = function (_a) {
     surface: '#ffffff'
   };
   var handlePress = useHandleTilePress(tile, ctaLink, ctaLinkTarget);
-  var isInteractive = Boolean(ctaLink || tile.type === 'REWARD' || tile.type === 'REWARD_CATEGORY' || tile.type === 'VENUE');
+  var interactiveTiles = [exports.TileType.Reward, exports.TileType.RewardCategory, exports.TileType.Venue, exports.TileType.Campaign];
+  var isInteractive = Boolean(ctaLink || tile.type && interactiveTiles.includes(tile.type));
   var layout = {
     flexDirection: 'column',
     justifyContent: isHalfSize ? 'center' : 'flex-start',
@@ -20842,7 +20920,7 @@ var BannerTileTitle = function () {
  * @param configuration - The configuration object of the tile.
  * @returns `true` if the tile has no title, description, or CTA text.
  */
-var isArtworkOnly$2 = function (configuration) {
+var isArtworkOnly$3 = function (configuration) {
   if (!configuration) return true;
   return !configuration.title && !configuration.description && !configuration.ctaText;
 };
@@ -20861,7 +20939,7 @@ var BannerTileRoot = function (_a) {
   return /*#__PURE__*/React.createElement(BaseBanner, {
     tile: tile
   }, /*#__PURE__*/React.createElement(BannerTile.Media, {
-    isArtworkOnly: isArtworkOnly$2(configuration)
+    isArtworkOnly: isArtworkOnly$3(configuration)
   }), /*#__PURE__*/React.createElement(FullFlex, null, /*#__PURE__*/React.createElement(BannerTile.Title, null), /*#__PURE__*/React.createElement(BannerTile.Description, null), /*#__PURE__*/React.createElement(BannerTile.CTA, null)));
 };
 /**
@@ -20875,6 +20953,236 @@ var BannerTile = Object.assign(BannerTileRoot, {
 });
 var BannerTile$1 = withTileFetching(BannerTile);
 
+/**
+ * Renders the description of a Campaign Tile.
+ *
+ * @returns React.ReactElement or null if no description is present
+ */
+var CampaignTileDescription = function () {
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var description = tileContext.configuration.description;
+  if (!description) return null;
+  return /*#__PURE__*/React.createElement(Text, {
+    variant: "body",
+    role: "article",
+    accessibilityLabel: description,
+    testID: "campaign-tile-description",
+    numberOfLines: 2,
+    ellipsizeMode: "tail"
+  }, description);
+};
+
+/**
+ * Custom hook that returns the styles for the CampaignTile component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the CampaignTile component
+ */
+var useCampaignTileStyles = function () {
+  var _a = useResponsive$1(),
+    isDesktop = _a.isDesktop,
+    isTablet = _a.isTablet;
+  var theme = useWllSdk().theme;
+  return StyleSheet$1.create({
+    imageContainer: {
+      width: '100%',
+      minHeight: 130
+    },
+    image: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover'
+    },
+    titleRow: {
+      width: '100%',
+      marginTop: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
+      marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
+    },
+    titleText: {
+      maxWidth: '90%',
+      flex: 1
+    },
+    progressContainer: {
+      width: '100%',
+      marginTop: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
+    }
+  });
+};
+
+/**
+ * Renders the media header for a Campaign Tile.
+ *
+ * @param props {CampaignTileMediaProps} - Component props
+ * @param props.isArtworkOnly {boolean} - Whether the media should occupy the full tile height
+ * @returns React.ReactElement or null if no artworkUrl is present
+ */
+var CampaignTileMedia = function (_a) {
+  var _b = _a.isArtworkOnly,
+    isArtworkOnly = _b === void 0 ? false : _b;
+  var styles = useCampaignTileStyles();
+  var tileContext = useTileContext();
+  if (!isContextValid(tileContext)) return null;
+  var _c = tileContext.configuration,
+    artworkUrl = _c.artworkUrl,
+    _d = _c.name,
+    name = _d === void 0 ? 'Campaign' : _d;
+  var containerStyle = isArtworkOnly ? {
+    flexBasis: '100%',
+    flex: 1,
+    height: '100%',
+    marginBottom: 0,
+    minHeight: 0,
+    aspectRatio: tileContext.tileHeight === exports.TileHeight.Half ? 2 : 1
+  } : __assign({
+    flexBasis: '50%'
+  }, tileContext.tileHeight === exports.TileHeight.Half && {
+    minHeight: 0
+  });
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: [styles.imageContainer, containerStyle],
+    testID: "campaign-tile-media",
+    role: "img",
+    accessibilityLabel: "Campaign image for ".concat(name)
+  }, /*#__PURE__*/React.createElement(ProgressiveImage, {
+    source: {
+      uri: artworkUrl
+    },
+    style: styles.image,
+    alt: "Campaign image for ".concat(name)
+  }));
+};
+
+/**
+ * Renders the progress bar and progress label for a Campaign Tile.
+ * If progress is null, nothing is rendered.
+ *
+ * @param props - Component props
+ * @param props.progress - The campaign progress data
+ * @returns React.ReactElement or null if progress is null
+ */
+var CampaignTileProgress = function (_a) {
+  var progress = _a.progress;
+  var styles = useCampaignTileStyles();
+  if (!progress) return null;
+  var currentValue = progress.currentValue,
+    targetValue = progress.targetValue;
+  var percentage = targetValue > 0 ? currentValue / targetValue * 100 : 0;
+  return /*#__PURE__*/React.createElement(View$2, {
+    style: styles.progressContainer,
+    testID: "campaign-tile-progress"
+  }, /*#__PURE__*/React.createElement(ProgressBar, {
+    percentage: percentage,
+    variant: "primary",
+    height: "sm",
+    currentValue: currentValue,
+    targetValue: targetValue,
+    showProgressLabel: true
+  }));
+};
+
+/**
+ * Renders the title of a Campaign Tile.
+ *
+ * @returns React.ReactElement or null if no name is present
+ */
+var CampaignTileTitle = function () {
+  var tileContext = useTileContext();
+  var styles = useCampaignTileStyles();
+  if (!isContextValid(tileContext)) return null;
+  var name = tileContext.configuration.name;
+  if (!name) return null;
+  return /*#__PURE__*/React.createElement(Text, {
+    variant: "title",
+    ellipsizeMode: "tail",
+    numberOfLines: 1,
+    role: "heading",
+    accessibilityLabel: "Campaign title: ".concat(name),
+    testID: "campaign-tile-title",
+    style: styles.titleText
+  }, name);
+};
+
+/**
+ * Renders a chevron icon for a Campaign Tile.
+ *
+ * @returns React.ReactElement
+ */
+var CampaignTileChevron = function () {
+  var _a;
+  var theme = useWllSdk().theme;
+  return /*#__PURE__*/React.createElement(Icon, {
+    name: "ChevronRight",
+    size: IS_MOBILE ? 16 : undefined,
+    color: ((_a = theme === null || theme === void 0 ? void 0 : theme.derivedSurfaceText) === null || _a === void 0 ? void 0 : _a[20]) || '#000000',
+    role: "img",
+    accessibilityLabel: "View Campaign details"
+  });
+};
+
+/**
+ * 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$2 = function (configuration) {
+  if (!configuration) return false;
+  return !configuration.showDetails;
+};
+/**
+ * The CampaignTile component renders a tile displaying campaign progress.
+ * It shows a campaign image, title, description, and a progress bar
+ * indicating the user's current progress towards the campaign goal.
+ *
+ * If progress is null, the progress bar is hidden completely.
+ * If showDetails is false, only the artwork is displayed.
+ *
+ * @param {CampaignTileProps} props - Component props
+ * @param {Tile} props.tile - The tile data to render
+ * @returns React.ReactElement or null if tile is inactive or missing configuration
+ */
+var CampaignTileRoot = function (_a) {
+  var tile = _a.tile;
+  var styles = useCampaignTileStyles();
+  if (!tile || !tile.active || !tile.configuration) return null;
+  var configuration = tile.configuration;
+  var progress = configuration.progress;
+  var artworkOnly = isArtworkOnly$2(configuration);
+  return /*#__PURE__*/React.createElement(BaseTile, {
+    tile: tile
+  }, /*#__PURE__*/React.createElement(CampaignTile.Media, {
+    isArtworkOnly: artworkOnly
+  }), !artworkOnly && (/*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Row, {
+    justify: "between",
+    align: "center",
+    style: styles.titleRow
+  }, /*#__PURE__*/React.createElement(CampaignTile.Title, null), /*#__PURE__*/React.createElement(CampaignTile.Chevron, null)), /*#__PURE__*/React.createElement(View$2, {
+    style: {
+      width: '100%',
+      maxWidth: '100%',
+      minWidth: 0
+    }
+  }, /*#__PURE__*/React.createElement(CampaignTile.Description, null)), /*#__PURE__*/React.createElement(Row, {
+    justify: "between",
+    align: "center",
+    style: styles.titleRow
+  }, /*#__PURE__*/React.createElement(CampaignTile.Progress, {
+    progress: progress
+  })))));
+};
+/**
+ * The CampaignTile component with subcomponents attached.
+ */
+var CampaignTile = Object.assign(CampaignTileRoot, {
+  Media: CampaignTileMedia,
+  Title: CampaignTileTitle,
+  Description: CampaignTileDescription,
+  Progress: CampaignTileProgress,
+  Chevron: CampaignTileChevron
+});
+var CampaignTile$1 = withTileFetching(CampaignTile);
+
 var ContentTileChevron = function () {
   var _a, _b;
   var tileContext = useTileContext();
@@ -23634,7 +23942,7 @@ var VenueTile = Object.assign(VenueTileRoot, {
 var VenueTile$1 = withTileFetching(VenueTile);
 
 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[exports.TileType.Roundup] = RoundupTile$1, _a[exports.TileType.Venue] = VenueTile$1, _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[exports.TileType.Roundup] = RoundupTile$1, _a[exports.TileType.Venue] = VenueTile$1, _a[exports.TileType.Campaign] = CampaignTile$1, _a);
 /**
  * TileContainer component to render a list of tiles with proper layout and spacing.
  */
@@ -23813,6 +24121,8 @@ exports.BaseBanner = BaseBanner;
 exports.BaseTile = BaseTile;
 exports.Button = Button;
 exports.COLOR_CONSTANTS = COLOR_CONSTANTS;
+exports.CampaignTile = CampaignTile$1;
+exports.CampaignTileConfig = CampaignTileConfig;
 exports.Carousel = Carousel;
 exports.CarouselNavButton = CarouselNavButton;
 exports.Chip = Chip;