@wlloyalty/wll-react-sdk 1.8.1 → 1.10.0

package/dist/types/components/atoms/Chip/styles.d.ts

@@ -6,7 +6,7 @@ export declare const useChipStyles: () => {
         flexDirection: "row";
         paddingHorizontal: number;
         paddingVertical: number;
-        borderRadius: 9999;
+        borderRadius: number;
         overflow: "hidden";
         flexShrink: number;
     };

package/dist/types/components/organisms/ContentTile/content-tile-media.d.ts

@@ -1,6 +1,11 @@
 import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+type ResponsiveViewStyle = StyleProp<ViewStyle> & {
+    flexBasis?: string | number;
+};
 type ContentTileMediaProps = {
     isArtworkOnly: boolean;
 };
+export declare const getContentTileMediaContainerStyle: (isArtworkOnly: boolean) => ResponsiveViewStyle;
 export declare const ContentTileMedia: ({ isArtworkOnly, }: ContentTileMediaProps) => React.ReactElement | null;
 export {};

package/dist/types/types/theme.d.ts

@@ -1,4 +1,3 @@
-import { sizes } from '../utils/styling';
 import { WithChildren } from './helpers';
 import { BadgeTileType } from './tile';
 export type PercentageKey = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 95;
@@ -6,6 +5,23 @@ export type DerivedColors = {
     [K in PercentageKey]: string;
 };
 export type DesaturationType = BadgeTileType.Specific | BadgeTileType.Latest;
+export type Sizes = {
+    borderRadiusSm: number;
+    borderRadiusLg: number;
+    borderRadiusButton: number;
+    borderRadiusRounded: number;
+    xxxs: number;
+    xxs: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+    xxxl: number;
+    xxxxl: number;
+    xxxxxl: number;
+};
 export type BaseThemeObject = {
     fontFamily: string;
     accent: string;
@@ -19,6 +35,7 @@ export type BaseThemeObject = {
     surface: string;
     surfaceText: string;
     text: string;
+    sizes?: Partial<Sizes>;
 };
 export type DerivedProperties = {
     accentText: string;
@@ -32,7 +49,7 @@ export type DerivedProperties = {
     alphaDerivedText: DerivedColors;
 };
 export type ThemeObject = BaseThemeObject & DerivedProperties & {
-    readonly sizes: typeof sizes;
+    sizes: Sizes;
 };
 export type ThemeContextType = {
     theme: ThemeObject;

package/dist/types/utils/storybookThemes.d.ts

@@ -13,6 +13,7 @@ export declare const storyBookThemes: {
         pageButtonText: string;
         positive: string;
         text: string;
+        sizes?: Partial<import("../types/theme").Sizes>;
     };
     warm: {
         primary: string;
@@ -27,6 +28,7 @@ export declare const storyBookThemes: {
         pageButtonText: string;
         positive: string;
         text: string;
+        sizes?: Partial<import("../types/theme").Sizes>;
     };
     dark: {
         background: string;
@@ -41,6 +43,7 @@ export declare const storyBookThemes: {
         pageButtonBackground: string;
         pageButtonText: string;
         positive: string;
+        sizes?: Partial<import("../types/theme").Sizes>;
     };
     forest: {
         primary: string;
@@ -55,6 +58,7 @@ export declare const storyBookThemes: {
         pageButtonText: string;
         positive: string;
         text: string;
+        sizes?: Partial<import("../types/theme").Sizes>;
     };
     sunset: {
         primary: string;
@@ -69,6 +73,7 @@ export declare const storyBookThemes: {
         pageButtonText: string;
         positive: string;
         text: string;
+        sizes?: Partial<import("../types/theme").Sizes>;
     };
 };
 export type ThemeName = 'default' | 'dark' | 'modern' | 'warm' | 'forest' | 'sunset';

package/dist/web.js

@@ -8914,9 +8914,11 @@ var createTheme = function (baseTheme) {
   if (baseTheme === void 0) {
     baseTheme = {};
   }
-  var mergedTheme = __assign(__assign({}, defaultTheme), baseTheme);
+  var userSizes = baseTheme.sizes,
+    restBaseTheme = __rest(baseTheme, ["sizes"]);
+  var mergedTheme = __assign(__assign({}, defaultTheme), restBaseTheme);
   return __assign(__assign({}, mergedTheme), {
-    sizes: sizes,
+    sizes: __assign(__assign({}, sizes), userSizes),
     derivedBackground: getDerivedColor(mergedTheme.background),
     primaryText: getReadableTextColor(mergedTheme.primary),
     accentText: getReadableTextColor(mergedTheme.accent),
@@ -20933,6 +20935,14 @@ var useContentTileStyles = function (hasArtwork) {
   });
 };
 
+var getContentTileMediaContainerStyle = function (isArtworkOnly) {
+  return isArtworkOnly ? {
+    flexBasis: '100%',
+    aspectRatio: 1
+  } : {
+    flexBasis: '50%'
+  };
+};
 var ContentTileMedia = function (_a) {
   var isArtworkOnly = _a.isArtworkOnly;
   var tileContext = useTileContext();
@@ -20944,11 +20954,7 @@ var ContentTileMedia = function (_a) {
   if (!artworkUrl) return null;
   var hasArtwork = Boolean(artworkUrl);
   var styles = useContentTileStyles(hasArtwork);
-  var containerStyle = __assign({
-    flexBasis: isArtworkOnly ? '100%' : '50%'
-  }, isArtworkOnly && IS_WEB && {
-    aspectRatio: 1
-  });
+  var containerStyle = getContentTileMediaContainerStyle(isArtworkOnly);
   return /*#__PURE__*/React.createElement(View$2, {
     style: [styles.imageContainer, containerStyle],
     testID: "content-tile-media",