@wlloyalty/wll-react-sdk 1.0.58 → 1.0.59

package/dist/index.d.ts

@@ -22,95 +22,6 @@ declare const sizes: {
     readonly xxxxxl: 60;
 };
 
-type PercentageKey = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 95;
-type DerivedColors = {
-    [K in PercentageKey]: string;
-};
-
-type BaseThemeObject = {
-    accent: string;
-    background: string;
-    errorPrimary: string;
-    negative: string;
-    pageButtonBackground: string;
-    pageButtonText: string;
-    positive: string;
-    primary: string;
-    surface: string;
-    surfaceText: string;
-    text: string;
-};
-type DerivedProperties = {
-    accentText: string;
-    derivedBackground: string;
-    primaryText: string;
-    positiveText: string;
-    negativeText: string;
-    derivedSurfaceText: DerivedColors;
-    derivedSurface: DerivedColors;
-    alphaDerivedPrimary: DerivedColors;
-    alphaDerivedText: DerivedColors;
-};
-type ThemeObject = BaseThemeObject & DerivedProperties & {
-    readonly sizes: typeof sizes;
-};
-type ThemeContextType = {
-    theme: ThemeObject;
-    setTheme: (theme: ThemeObject) => void;
-};
-type ThemeProviderProps = {
-    children: ReactNode;
-    theme?: Partial<BaseThemeObject>;
-};
-type Variant = 'primary' | 'accent' | 'positive' | 'negative';
-type Size = 'sm' | 'md' | 'lg';
-
-type ButtonProps = {
-    title: string;
-    onPress: () => void;
-    variant: Variant;
-    disabled?: boolean;
-    accessibilityLabel?: string;
-    accessibilityHint?: string;
-    testID?: string;
-};
-declare const Button: ({ title, onPress, variant, disabled, accessibilityLabel, accessibilityHint, testID, }: ButtonProps) => JSX.Element;
-
-type IconName = keyof typeof LucideIcons;
-type IconProps = {
-    name: IconName;
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-} & Omit<ViewProps, 'style'>;
-declare const Icon: ({ name, color, size, strokeWidth, ...props }: IconProps) => JSX.Element | null;
-
-declare const LoadingIndicator: () => JSX.Element;
-
-type ProgressBarProps = {
-    percentage: number;
-    variant?: Variant;
-    height?: Size;
-    animationDuration?: number;
-};
-declare const ProgressBar: ({ percentage, variant, height, animationDuration, }: ProgressBarProps) => JSX.Element;
-
-type ProgressiveImageProps = {
-    source: ImageSourcePropType;
-    style?: StyleProp<ViewStyle>;
-    isDesaturated?: boolean;
-    [key: string]: any;
-};
-declare const ProgressiveImage: ({ source, style, isDesaturated, ...props }: ProgressiveImageProps) => JSX.Element;
-
-type TextVariant = 'eyebrow' | 'title' | 'description' | 'body' | 'caption' | 'label' | 'tier-requirement' | 'tier-earned';
-type TextProps = TextProps$1 & {
-    variant?: TextVariant;
-    style?: TextStyle;
-    isSurface?: boolean;
-};
-declare const Text: ({ variant, style, isSurface, ...props }: TextProps) => JSX.Element;
-
 type Badge = {
     id: string;
     name: string;
@@ -328,6 +239,95 @@ type Tile = {
 declare const getConfigForTileType: (tileType: TileType) => typeof BannerTileConfig | typeof PointsTileConfig | typeof ContentTileConfig | typeof RewardTileConfig | typeof BadgeTileConfig | typeof RewardCategoryTileConfig | typeof TierTileConfig;
 type TileConfig = InstanceType<ReturnType<typeof getConfigForTileType>>;
 
+type PercentageKey = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 95;
+type DerivedColors = {
+    [K in PercentageKey]: string;
+};
+type DesaturationType = BadgeTileType.Specific | BadgeTileType.Latest;
+type BaseThemeObject = {
+    accent: string;
+    background: string;
+    errorPrimary: string;
+    negative: string;
+    pageButtonBackground: string;
+    pageButtonText: string;
+    positive: string;
+    primary: string;
+    surface: string;
+    surfaceText: string;
+    text: string;
+};
+type DerivedProperties = {
+    accentText: string;
+    derivedBackground: string;
+    primaryText: string;
+    positiveText: string;
+    negativeText: string;
+    derivedSurfaceText: DerivedColors;
+    derivedSurface: DerivedColors;
+    alphaDerivedPrimary: DerivedColors;
+    alphaDerivedText: DerivedColors;
+};
+type ThemeObject = BaseThemeObject & DerivedProperties & {
+    readonly sizes: typeof sizes;
+};
+type ThemeContextType = {
+    theme: ThemeObject;
+    setTheme: (theme: ThemeObject) => void;
+};
+type ThemeProviderProps = {
+    children: ReactNode;
+    theme?: Partial<BaseThemeObject>;
+};
+type Variant = 'primary' | 'accent' | 'positive' | 'negative';
+type Size = 'sm' | 'md' | 'lg';
+
+type ButtonProps = {
+    title: string;
+    onPress: () => void;
+    variant: Variant;
+    disabled?: boolean;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    testID?: string;
+};
+declare const Button: ({ title, onPress, variant, disabled, accessibilityLabel, accessibilityHint, testID, }: ButtonProps) => JSX.Element;
+
+type IconName = keyof typeof LucideIcons;
+type IconProps = {
+    name: IconName;
+    color?: string;
+    size?: number;
+    strokeWidth?: number;
+} & Omit<ViewProps, 'style'>;
+declare const Icon: ({ name, color, size, strokeWidth, ...props }: IconProps) => JSX.Element | null;
+
+declare const LoadingIndicator: () => JSX.Element;
+
+type ProgressBarProps = {
+    percentage: number;
+    variant?: Variant;
+    height?: Size;
+    animationDuration?: number;
+};
+declare const ProgressBar: ({ percentage, variant, height, animationDuration, }: ProgressBarProps) => JSX.Element;
+
+type ProgressiveImageProps = {
+    source: ImageSourcePropType;
+    style?: StyleProp<ViewStyle>;
+    isDesaturated?: boolean;
+    [key: string]: any;
+};
+declare const ProgressiveImage: ({ source, style, isDesaturated, ...props }: ProgressiveImageProps) => JSX.Element;
+
+type TextVariant = 'eyebrow' | 'title' | 'description' | 'body' | 'caption' | 'label' | 'tier-requirement' | 'tier-earned';
+type TextProps = TextProps$1 & {
+    variant?: TextVariant;
+    style?: TextStyle;
+    isSurface?: boolean;
+};
+declare const Text: ({ variant, style, isSurface, ...props }: TextProps) => JSX.Element;
+
 type BaseBannerProps = {
     tile: Tile;
     children: React__default.ReactNode;
@@ -627,10 +627,13 @@ type NavigationHandlerParams = {
 };
 type NavigationConfig = {
     navigationHandlers?: {
-        external?: (params: NavigationHandlerParams) => void;
-        internal?: (params: NavigationHandlerParams) => void;
-        modal?: (params: NavigationHandlerParams) => void;
+        external?: (params: NavigationHandlerParams) => Promise<void>;
+        internal?: (params: NavigationHandlerParams) => Promise<void>;
+        modal?: (params: NavigationHandlerParams) => Promise<void>;
     };
+    external?: (params: NavigationHandlerParams) => Promise<void>;
+    internal?: (params: NavigationHandlerParams) => Promise<void>;
+    modal?: (params: NavigationHandlerParams) => Promise<void>;
     baseUrl?: string;
 };
 
@@ -650,10 +653,12 @@ type WllSdkContextType = ThemeContextType & {
     getGroupByID: (id: string) => Promise<APIResponse<TGroup>>;
     getSectionByID: (id: string) => Promise<APIResponse<TSection>>;
     getTileByID: (id: string) => Promise<APIResponse<Tile>>;
-    handleNavigation: (link: string, target: CTALinkTarget) => void;
-};
+    handleNavigation: (link: string, target: CTALinkTarget) => Promise<void>;
+} & Readonly<{
+    readonly config: SDKConfig;
+}>;
 type WllSdkProviderProps = {
-    children: React__default.ReactNode;
+    children: ReactNode;
     theme?: Partial<BaseThemeObject>;
     config: SDKConfig;
     navigationConfig?: NavigationConfig;
@@ -661,4 +666,4 @@ type WllSdkProviderProps = {
 declare const WllSdkProvider: ({ children, theme: providedTheme, config, navigationConfig, }: WllSdkProviderProps) => JSX.Element;
 declare const useWllSdk: () => WllSdkContextType;
 
-export { type APIResponse, type Align, type Availability, type Badge, type BadgeDetail, _default$5 as BadgeTile, BadgeTileConfig, BadgeTileType, _default$4 as BannerTile, BannerTileConfig, BaseBanner, type BaseThemeObject, BaseTile, Button, CTALinkTarget, Carousel, Column, _default$3 as ContentTile, ContentTileConfig, type DerivedProperties, type FlexDirection, FullFlex, Grid, Group, Icon, type ImagePropsNoSource, Indicator, type Justify, Layout, type LayoutProps$1 as LayoutProps, LoadingIndicator, type NavigationConfig, type NavigationType, _default$2 as PointsTile, PointsTileConfig, type ProgessType, ProgressBar, ProgressIndicator, ProgressType, ProgressiveImage, Reward, type RewardCategory, _default$1 as RewardCategoryTile, RewardCategoryTileConfig, _default as RewardTile, RewardTileConfig, Row, type SDKConfig, Section, SectionHeader, SectionType, type Size, Skeleton, Spacer, type TGroup, type TSection, Text, type ThemeContextType, type ThemeObject, type ThemeProviderProps, TierTileConfig, TierTileType, TierTile as TierTileUpdated, type TierType, type Tile, type TileConfig, TileContainer, TileHeight, TileType, type Variant, WllSdkProvider, alignMap, justifyMap, useWllSdk };
+export { type APIResponse, type Align, type Availability, type Badge, type BadgeDetail, _default$5 as BadgeTile, BadgeTileConfig, BadgeTileType, _default$4 as BannerTile, BannerTileConfig, BaseBanner, type BaseThemeObject, BaseTile, Button, CTALinkTarget, Carousel, Column, _default$3 as ContentTile, ContentTileConfig, type DerivedColors, type DerivedProperties, type DesaturationType, type FlexDirection, FullFlex, Grid, Group, Icon, type ImagePropsNoSource, Indicator, type Justify, Layout, type LayoutProps$1 as LayoutProps, LoadingIndicator, type NavigationConfig, type NavigationType, type PercentageKey, _default$2 as PointsTile, PointsTileConfig, type ProgessType, ProgressBar, ProgressIndicator, ProgressType, ProgressiveImage, Reward, type RewardCategory, _default$1 as RewardCategoryTile, RewardCategoryTileConfig, _default as RewardTile, RewardTileConfig, Row, type SDKConfig, Section, SectionHeader, SectionType, type Size, Skeleton, Spacer, type TGroup, type TSection, Text, type ThemeContextType, type ThemeObject, type ThemeProviderProps, TierTileConfig, TierTileType, TierTile as TierTileUpdated, type TierType, type Tile, type TileConfig, TileContainer, TileHeight, TileType, type Variant, WllSdkProvider, alignMap, justifyMap, useWllSdk };

package/dist/native.js

@@ -7824,17 +7824,21 @@ var parseNavigationLink = function (link) {
 
 var useNavigation = function (config) {
   var handleNavigation = React.useCallback(function (link, ctaTarget) {
-    var _a;
-    var _b = parseNavigationLink(link),
-      type = _b.type,
-      target = _b.target;
-    var windowTarget = ctaTarget === 'SAME_FRAME' ? '_self' : '_blank';
-    if ((_a = config.navigationHandlers) === null || _a === void 0 ? void 0 : _a[type]) {
-      return config.navigationHandlers[type]({
-        target: target,
-        windowTarget: windowTarget
+    return __awaiter(void 0, void 0, void 0, function () {
+      var _a, type, target, windowTarget;
+      var _b;
+      return __generator(this, function (_c) {
+        _a = parseNavigationLink(link), type = _a.type, target = _a.target;
+        windowTarget = ctaTarget === 'SAME_FRAME' ? '_self' : '_blank';
+        if ((_b = config.navigationHandlers) === null || _b === void 0 ? void 0 : _b[type]) {
+          return [2 /*return*/, Promise.resolve(config.navigationHandlers[type]({
+            target: target,
+            windowTarget: windowTarget
+          }))];
+        }
+        return [2 /*return*/, Promise.resolve()];
       });
-    }
+    });
   }, [config]);
   return handleNavigation;
 };
@@ -7960,6 +7964,13 @@ var defaultTheme = {
   negative: '#ff0000'
 };
 
+var COLOR_CONSTANTS = {
+  MINIMUM_CONTRAST_RATIO: 2,
+  DEFAULT_LIGHTNESS_ADJUSTMENT: 0.2,
+  DESATURATION_LIGHTEN_AMOUNT: 2,
+  DEFAULT_COLOR: '#FFFFFF'
+};
+
 // Storybook Themes
 ({
   modern: __assign(__assign({}, defaultTheme), {
@@ -8000,48 +8011,144 @@ var defaultTheme = {
   })
 });
 
+var isValidColor = function (color) {
+  try {
+    Color(color);
+    return true;
+  } catch (_a) {
+    return false;
+  }
+};
+/**
+ * Validates a theme object to ensure all required colors are present and valid
+ * @param theme - Partial theme object to validate
+ * @returns Boolean indicating if theme is valid
+ */
+var validateTheme = function (theme) {
+  var requiredColors = ['accent', 'background', 'errorPrimary', 'negative', 'pageButtonBackground', 'pageButtonText', 'positive', 'primary', 'surface', 'surfaceText', 'text'];
+  return requiredColors.every(function (color) {
+    return theme[color] && isValidColor(theme[color]);
+  });
+};
+/**
+ * Safely creates a Color instance with error handling
+ * @param color - Color string to process
+ * @returns Color instance or null if invalid
+ */
+var createSafeColor = function (color) {
+  try {
+    return Color(color);
+  } catch (error) {
+    console.error("Invalid color value: ".concat(color), error);
+    return null;
+  }
+};
+/**
+ * Returns a derived color based on the background darkness
+ * @param color - Base color to derive from
+ * @returns Derived color string or default color if invalid
+ */
 var getDerivedColor = function (color) {
-  var backgroundColor = Color(color);
-  return backgroundColor.isDark() ? backgroundColor.lighten(0.2).string() : backgroundColor.darken(0.2).string();
+  var backgroundColor = createSafeColor(color);
+  if (!backgroundColor) return COLOR_CONSTANTS.DEFAULT_COLOR;
+  return backgroundColor.isDark() ? backgroundColor.lighten(COLOR_CONSTANTS.DEFAULT_LIGHTNESS_ADJUSTMENT).string() : backgroundColor.darken(COLOR_CONSTANTS.DEFAULT_LIGHTNESS_ADJUSTMENT).string();
 };
-// Same implementation as Microsite
+/**
+ * Determines the most readable text color (black or white) for a given background
+ * @param backgroundColor - Background color to check against
+ * @returns Hex color string for text
+ */
 var getReadableTextColor = function (backgroundColor) {
-  var bgColor = Color(backgroundColor);
+  var bgColor = createSafeColor(backgroundColor);
+  if (!bgColor) return COLOR_CONSTANTS.DEFAULT_COLOR;
   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();
+  return contrastWithWhite >= COLOR_CONSTANTS.MINIMUM_CONTRAST_RATIO ? white.hex() : black.hex();
 };
 var percentages = [5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95];
+/**
+ * Generates a set of derived colors based on a base color and derivation function
+ * @param color - Base color to derive from
+ * @param derivationFunction - Function to generate variations
+ * @returns Object containing derived colors at different percentages
+ */
 var generateDerivedColors = function (color, derivationFunction) {
-  var baseColor = Color(color);
+  var baseColor = createSafeColor(color);
+  if (!baseColor) {
+    return percentages.reduce(function (acc, percentage) {
+      acc[percentage] = COLOR_CONSTANTS.DEFAULT_COLOR;
+      return acc;
+    }, {});
+  }
   var result = {};
   percentages.forEach(function (percentage) {
-    var derivedColor = derivationFunction(baseColor, percentage);
-    result[percentage] = derivedColor.toString();
+    try {
+      var derivedColor = derivationFunction(baseColor, percentage);
+      result[percentage] = derivedColor.toString();
+    } catch (error) {
+      console.error("Error generating derived color for ".concat(percentage, "%"), error);
+      result[percentage] = COLOR_CONSTANTS.DEFAULT_COLOR;
+    }
   });
   return result;
 };
+/**
+ * Generates a set of colors with varying lightness based on the base color
+ * @param color - Base color to derive from
+ * @returns Object containing derived colors at different lightness levels
+ */
 var getDerivedColorPercentages = function (color) {
-  var isDark = Color(color).isDark();
+  var baseColor = createSafeColor(color);
+  if (!baseColor) return generateDerivedColors(COLOR_CONSTANTS.DEFAULT_COLOR, function (color) {
+    return color;
+  });
+  var isDark = baseColor.isDark();
   return generateDerivedColors(color, function (baseColor, percentage) {
     return isDark ? baseColor.lightness(percentage) : baseColor.lightness(100 - percentage);
   });
 };
+/**
+ * Generates a set of colors with varying alpha values
+ * @param color - Base color to derive from
+ * @returns Object containing derived colors at different alpha levels
+ */
 var getAlphaDerivedColors = function (color) {
   return generateDerivedColors(color, function (baseColor, percentage) {
     return baseColor.alpha(percentage / 100);
   });
 };
+/**
+ * Determines if a color should be desaturated based on type and count
+ * @param type - Type of desaturation to apply
+ * @param count - Count value affecting desaturation
+ * @returns Boolean indicating if color should be desaturated
+ */
 var shouldDesaturate = function (type, count) {
-  //TODO: Add conditions if neccecerry
-  return type === 'SPECIFIC' && count === 0;
+  switch (type) {
+    case 'SPECIFIC':
+      return count === 0;
+    default:
+      return false;
+  }
 };
+/**
+ * Desaturates a color and lightens it
+ * @param color - Color to desaturate
+ * @returns Desaturated color string or default color if invalid
+ */
 var desaturateColor = function (color) {
-  return Color(color).grayscale().lighten(2).toString();
+  var baseColor = createSafeColor(color);
+  if (!baseColor) return COLOR_CONSTANTS.DEFAULT_COLOR;
+  return baseColor.grayscale().lighten(COLOR_CONSTANTS.DESATURATION_LIGHTEN_AMOUNT).toString();
 };
+/**
+ * Gets the appropriate state color based on type and count
+ * @param baseColor - Base color to process
+ * @param type - Type of state
+ * @param count - Count affecting the state
+ * @returns Processed color string
+ */
 var getStateColor = function (baseColor, type, count) {
   return shouldDesaturate(type, count) ? desaturateColor(baseColor) : baseColor;
 };
@@ -8294,29 +8401,29 @@ function useResponsive$1() {
 var ResponsiveContext = /*#__PURE__*/React.createContext(undefined);
 function ResponsiveProvider(_a) {
   var children = _a.children;
+  var getDerivedState = React.useCallback(function (window) {
+    var dimensionMode = getDimensionMode(window);
+    return {
+      dimensionMode: dimensionMode,
+      isDesktop: dimensionMode === DIMENSION_MODES.DESKTOP,
+      isTablet: dimensionMode === DIMENSION_MODES.TABLET,
+      isMobile: dimensionMode === DIMENSION_MODES.MOBILE
+    };
+  }, []);
   var _b = React.useState(function () {
       var window = Dimensions.get('window');
-      var dimensionMode = getDimensionMode(window);
-      return {
-        dimensionMode: dimensionMode,
-        isDesktop: dimensionMode === DIMENSION_MODES.DESKTOP,
-        isTablet: dimensionMode === DIMENSION_MODES.TABLET,
-        isMobile: dimensionMode === DIMENSION_MODES.MOBILE
-      };
+      return getDerivedState(window);
     }),
     state = _b[0],
     setState = _b[1];
+  var value = React.useMemo(function () {
+    return state;
+  }, [state]);
   React.useEffect(function () {
     var subscription = Dimensions.addEventListener('change', function (_a) {
       var window = _a.window;
       if (window) {
-        var dimensionMode = getDimensionMode(window);
-        setState({
-          dimensionMode: dimensionMode,
-          isDesktop: dimensionMode === DIMENSION_MODES.DESKTOP,
-          isTablet: dimensionMode === DIMENSION_MODES.TABLET,
-          isMobile: dimensionMode === DIMENSION_MODES.MOBILE
-        });
+        setState(getDerivedState(window));
       }
     });
     return function () {
@@ -8324,9 +8431,9 @@ function ResponsiveProvider(_a) {
         subscription.remove();
       }
     };
-  }, []);
+  }, [getDerivedState]);
   return /*#__PURE__*/React.createElement(ResponsiveContext.Provider, {
-    value: state
+    value: value
   }, children);
 }
 function useResponsive() {
@@ -8342,25 +8449,17 @@ var createTheme = function (baseTheme) {
     baseTheme = {};
   }
   var mergedTheme = __assign(__assign({}, defaultTheme), baseTheme);
-  var background = mergedTheme.background,
-    primary = mergedTheme.primary,
-    accent = mergedTheme.accent,
-    positive = mergedTheme.positive,
-    negative = mergedTheme.negative,
-    surfaceText = mergedTheme.surfaceText,
-    surface = mergedTheme.surface,
-    text = mergedTheme.text;
   return __assign(__assign({}, mergedTheme), {
     sizes: sizes,
-    derivedBackground: getDerivedColor(background),
-    primaryText: getReadableTextColor(primary),
-    accentText: getReadableTextColor(accent),
-    positiveText: getReadableTextColor(positive),
-    negativeText: getReadableTextColor(negative),
-    derivedSurface: getDerivedColorPercentages(surface),
-    derivedSurfaceText: getDerivedColorPercentages(surfaceText),
-    alphaDerivedPrimary: getAlphaDerivedColors(primary),
-    alphaDerivedText: getAlphaDerivedColors(text)
+    derivedBackground: getDerivedColor(mergedTheme.background),
+    primaryText: getReadableTextColor(mergedTheme.primary),
+    accentText: getReadableTextColor(mergedTheme.accent),
+    positiveText: getReadableTextColor(mergedTheme.positive),
+    negativeText: getReadableTextColor(mergedTheme.negative),
+    derivedSurface: getDerivedColorPercentages(mergedTheme.surface),
+    derivedSurfaceText: getDerivedColorPercentages(mergedTheme.surfaceText),
+    alphaDerivedPrimary: getAlphaDerivedColors(mergedTheme.primary),
+    alphaDerivedText: getAlphaDerivedColors(mergedTheme.text)
   });
 };
 var WllSdkContext = /*#__PURE__*/React.createContext(undefined);
@@ -8370,15 +8469,27 @@ var WllSdkProvider = function (_a) {
     config = _a.config,
     _b = _a.navigationConfig,
     navigationConfig = _b === void 0 ? {} : _b;
+  validateConfig(config);
   var _c = React.useState(function () {
-      return createTheme(providedTheme || {});
+      var themeToUse = providedTheme || {};
+      if (!validateTheme(themeToUse)) {
+        console.warn('Invalid theme provided. Some required colors are missing or invalid.');
+      }
+      return createTheme(themeToUse);
     }),
     theme = _c[0],
     setThemeState = _c[1];
   React.useEffect(function () {
-    setThemeState(createTheme(providedTheme || {}));
+    var themeToUse = providedTheme || {};
+    if (!validateTheme(themeToUse)) {
+      console.warn('Invalid theme provided. Some required colors are missing or invalid.');
+    }
+    setThemeState(createTheme(themeToUse));
   }, [providedTheme]);
   var setTheme = React.useCallback(function (newTheme) {
+    if (!validateTheme(newTheme)) {
+      console.warn('Invalid theme provided. Some required colors are missing or invalid.');
+    }
     setThemeState(function (prevTheme) {
       return createTheme(__assign(__assign({}, prevTheme), newTheme));
     });
@@ -8394,9 +8505,10 @@ var WllSdkProvider = function (_a) {
       getGroupByID: getGroupByID,
       getSectionByID: getSectionByID,
       getTileByID: getTileByID,
-      handleNavigation: handleNavigation
+      handleNavigation: handleNavigation,
+      config: config
     };
-  }, [theme, setTheme, getGroupByID, getSectionByID, getTileByID, handleNavigation]);
+  }, [theme, setTheme, getGroupByID, getSectionByID, getTileByID, handleNavigation, config]);
   return /*#__PURE__*/React.createElement(WllSdkContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(ResponsiveProvider, null, children));
@@ -8408,6 +8520,20 @@ var useWllSdk = function () {
   }
   return context;
 };
+/**
+ * Validates the SDK configuration object
+ * @param config - The configuration object to validate
+ * @throws {Error} If apiKey is missing
+ * @throws {Error} If locale is provided but not in ISO 639-1 format (e.g. 'en')
+ */
+var validateConfig = function (config) {
+  if (!config.apiKey) {
+    throw new Error('API key is required');
+  }
+  if (config.locale && !/^[a-z]{2}$/.test(config.locale)) {
+    throw new Error('Invalid locale format. Expected ISO 639-1 language code (e.g. "en")');
+  }
+};
 
 function createVariantSystem(baseStyle, variantStyles) {
   return function (theme, variant) {