related-ui-components 2.0.8 → 2.0.9

package/lib/module/app.js

@@ -13,12 +13,16 @@ const MyScreen = () => {
           padding: 50
         },
         children: /*#__PURE__*/_jsx(SelaDealCard, {
-          variant: "horizontal",
-          isRTL: true,
-          backgroundImage: require("./assets/images/namshi-banner.png") // Your image for the horizontal card
+          variant: "vertical"
+          // isRTL
+          ,
+          backgroundImage: {
+            uri: "https://picsum.photos/seed/lounge/600/700"
+          } // Your image for the horizontal card
+          ,
+          label: "Offer"
+          // lockOverlay
           ,
-          label: "Offer",
-          lockOverlay: true,
           providerName: "Altanfeethi",
           providerNameStyle: {
             color: 'yellow'
@@ -30,9 +34,8 @@ const MyScreen = () => {
           },
           price: "20,000 pts",
           onPress: () => console.log("Horizontal Sela Card Pressed"),
-          width: 320 // Example width
-          ,
-          height: 180 // Example height
+          width: 177 // Example width
+          // height={180} // Example height
         })
       })
     })

package/lib/module/app.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","SafeAreaView","SelaDealCard","RelatedProvider","jsx","_jsx","Fragment","_Fragment","MyScreen","children","style","padding","variant","isRTL","backgroundImage","require","label","lockOverlay","providerName","providerNameStyle","color","description","descriptionStyle","price","onPress","console","log","width","height"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAoB,OAAO;AACvC,SAASC,YAAY,QAAc,cAAc;AACjD,SAASC,YAAY,QAAQ,uBAAc;AAC3C,SAASC,eAAe,QAAQ,kBAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA;AAE1C,MAAMC,QAAQ,GAAGA,CAAA,KAAM;EACrB,oBACEH,IAAA,CAAAE,SAAA;IAAAE,QAAA,eACEJ,IAAA,CAACF,eAAe;MAAAM,QAAA,eACdJ,IAAA,CAACJ,YAAY;QAACS,KAAK,EAAE;UAAEC,OAAO,EAAE;QAAG,CAAE;QAAAF,QAAA,eACnCJ,IAAA,CAACH,YAAY;UACXU,OAAO,EAAC,YAAY;UACpBC,KAAK;UACLC,eAAe,EAAEC,OAAO,CAAC,mCAAmC,CAAE,CAAC;UAAA;UAC/DC,KAAK,EAAC,OAAO;UACbC,WAAW;UACXC,YAAY,EAAC,aAAa;UAC1BC,iBAAiB,EAAE;YAAEC,KAAK,EAAE;UAAS,CAAE,CAAC;UAAA;UACxCC,WAAW,EAAC,mBAAmB;UAC/BC,gBAAgB,EAAE;YAAEF,KAAK,EAAE;UAAQ,CAAE;UACrCG,KAAK,EAAC,YAAY;UAClBC,OAAO,EAAEA,CAAA,KAAMC,OAAO,CAACC,GAAG,CAAC,8BAA8B,CAAE;UAC3DC,KAAK,EAAE,GAAI,CAAC;UAAA;UACZC,MAAM,EAAE,GAAI,CAAC;QAAA,CACd;MAAC,CACU;IAAC,CACA;EAAC,CAClB,CAAC;AAEP,CAAC;AAED,eAAepB,QAAQ","ignoreList":[]}
+{"version":3,"names":["React","SafeAreaView","SelaDealCard","RelatedProvider","jsx","_jsx","Fragment","_Fragment","MyScreen","children","style","padding","variant","backgroundImage","uri","label","providerName","providerNameStyle","color","description","descriptionStyle","price","onPress","console","log","width"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAoB,OAAO;AACvC,SAASC,YAAY,QAAc,cAAc;AACjD,SAASC,YAAY,QAAQ,uBAAc;AAC3C,SAASC,eAAe,QAAQ,kBAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA;AAE1C,MAAMC,QAAQ,GAAGA,CAAA,KAAM;EACrB,oBACEH,IAAA,CAAAE,SAAA;IAAAE,QAAA,eACEJ,IAAA,CAACF,eAAe;MAAAM,QAAA,eACdJ,IAAA,CAACJ,YAAY;QAACS,KAAK,EAAE;UAAEC,OAAO,EAAE;QAAG,CAAE;QAAAF,QAAA,eACnCJ,IAAA,CAACH,YAAY;UACXU,OAAO,EAAC;UACR;UAAA;UACAC,eAAe,EAAE;YAACC,GAAG,EAAE;UAA2C,CAAE,CAAC;UAAA;UACrEC,KAAK,EAAC;UACN;UAAA;UACAC,YAAY,EAAC,aAAa;UAC1BC,iBAAiB,EAAE;YAAEC,KAAK,EAAE;UAAS,CAAE,CAAC;UAAA;UACxCC,WAAW,EAAC,mBAAmB;UAC/BC,gBAAgB,EAAE;YAAEF,KAAK,EAAE;UAAQ,CAAE;UACrCG,KAAK,EAAC,YAAY;UAClBC,OAAO,EAAEA,CAAA,KAAMC,OAAO,CAACC,GAAG,CAAC,8BAA8B,CAAE;UAC3DC,KAAK,EAAE,GAAI,CAAC;UACZ;QAAA,CACD;MAAC,CACU;IAAC,CACA;EAAC,CAClB,CAAC;AAEP,CAAC;AAED,eAAejB,QAAQ","ignoreList":[]}

package/lib/module/components/Card/Card.js

@@ -1,126 +1,111 @@
 "use strict";
 
-// src/components/Card/Card.tsx
 import React from "react";
-import { View, TouchableOpacity, StyleSheet, ImageBackground
-// Import LayoutChangeEvent
-} from "react-native";
-// Assuming types.ts defines CardProps
+import { View, TouchableOpacity, StyleSheet, ImageBackground } from "react-native";
 import { useTheme } from "../../theme/ThemeContext.js";
 import { LinearGradient } from "expo-linear-gradient";
-
-// Extend CardProps to include onLayout
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const Card = ({
   children,
   style,
   onPress,
-  onLayout,
-  // Destructure onLayout
   disabled = false,
-  // elevation, // Not used in your current styles
+  elevation = 1,
   testID,
-  // variant, // Not used
+  variant,
   backgroundColor,
-  // borderColor, // Not used
+  borderColor,
   borderRadius = 8,
   backgroundImage,
   gradient
+  // margin,
+  // padding,
 }) => {
   const {
     theme
   } = useTheme();
-  const cardRootStyle = [styles.card, {
-    borderRadius
-  },
-  // If there's a background image, card background should be transparent
-  // so the image is visible. Otherwise, use provided backgroundColor or theme.
-  {
-    backgroundColor: backgroundImage ? "transparent" : backgroundColor || theme.background
-  }, disabled && styles.disabled, style // This will include the width and calculated height from SelaDealCard
-  ];
-  const renderCardContent = () => {
-    // The children (SelaDealCard's overlayContainer) are rendered on top of
-    // the ImageBackground or Gradient.
-    return children;
+  const getCardStyle = () => {
+    const baseStyle = {
+      backgroundColor: backgroundColor || theme.background,
+      borderRadius
+    };
+    return baseStyle;
   };
-  if (onPress) {
-    return /*#__PURE__*/_jsxs(TouchableOpacity, {
-      style: cardRootStyle,
-      onPress: onPress,
-      onLayout: onLayout // Apply onLayout here
-      ,
-      disabled: disabled,
-      testID: testID,
-      activeOpacity: 0.9,
-      accessibilityRole: "button",
-      children: [backgroundImage && /*#__PURE__*/_jsx(ImageBackground, {
+  const cardStyle = [styles.card, getCardStyle(), disabled && {
+    opacity: 0.6
+  }, style, backgroundImage && {
+    backgroundColor: "transparent"
+  }];
+  const renderCardContent = () => {
+    if (backgroundImage) {
+      return /*#__PURE__*/_jsx(ImageBackground, {
         source: backgroundImage.source,
-        style: [StyleSheet.absoluteFillObject, backgroundImage.style] // Fills parent
-        ,
+        style: [styles.backgroundImage, backgroundImage.style],
         imageStyle: [{
           borderRadius
         }, backgroundImage.imageStyle],
         resizeMode: backgroundImage.resizeMode || "cover",
-        blurRadius: backgroundImage.blurRadius
-      }), gradient && !backgroundImage &&
-      /*#__PURE__*/
-      // Render gradient if no image and gradient exists
-      _jsx(LinearGradient, {
+        blurRadius: backgroundImage.blurRadius,
+        children: /*#__PURE__*/_jsx(View, {
+          style: [styles.imageContentContainer, {
+            opacity: backgroundImage.opacity !== undefined ? backgroundImage.opacity : 1
+          }],
+          children: children
+        })
+      });
+    } else if (gradient) {
+      return /*#__PURE__*/_jsx(LinearGradient, {
         colors: gradient.colors,
         start: gradient.start,
         end: gradient.end,
-        style: [StyleSheet.absoluteFillObject,
-        // Gradient also fills
-        {
+        style: [styles.gradient, {
           borderRadius
-        }, gradient.style]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.contentWrapper,
-        children: renderCardContent()
-      })]
+        }, gradient.style],
+        children: children
+      });
+    } else {
+      return children;
+    }
+  };
+  if (onPress) {
+    return /*#__PURE__*/_jsx(TouchableOpacity, {
+      style: cardStyle,
+      onPress: onPress,
+      disabled: disabled,
+      testID: testID,
+      activeOpacity: 0.9,
+      accessibilityRole: "button",
+      accessibilityLabel: "Card",
+      children: renderCardContent()
     });
   }
-  return /*#__PURE__*/_jsxs(View, {
-    style: cardRootStyle,
+  return /*#__PURE__*/_jsx(View, {
+    style: cardStyle,
     testID: testID,
-    onLayout: onLayout,
-    children: [backgroundImage && /*#__PURE__*/_jsx(ImageBackground, {
-      source: backgroundImage.source,
-      style: [StyleSheet.absoluteFillObject, backgroundImage.style],
-      imageStyle: [{
-        borderRadius
-      }, backgroundImage.imageStyle],
-      resizeMode: backgroundImage.resizeMode || "cover",
-      blurRadius: backgroundImage.blurRadius
-    }), gradient && !backgroundImage && /*#__PURE__*/_jsx(LinearGradient, {
-      colors: gradient.colors,
-      start: gradient.start,
-      end: gradient.end,
-      style: [StyleSheet.absoluteFillObject, {
-        borderRadius
-      }, gradient.style]
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.contentWrapper,
-      children: renderCardContent()
-    })]
+    children: renderCardContent()
   });
 };
 const styles = StyleSheet.create({
   card: {
-    overflow: "hidden",
-    // Important for absoluteFillObject with borderRadius
-    position: "relative" // For absolute positioning context
+    borderRadius: 8,
+    flexDirection: "column",
+    display: "flex"
   },
-  disabled: {
-    opacity: 0.6
+  backgroundImage: {
+    width: "100%",
+    height: "100%"
+  },
+  imageContentContainer: {
+    flex: 1,
+    backgroundColor: "transparent"
   },
-  contentWrapper: {
-    // Ensures content is layered above background/gradient
+  gradient: {
     flex: 1,
-    backgroundColor: "transparent" // Content wrapper itself is transparent
+    width: "100%",
+    height: "100%",
+    justifyContent: "flex-start",
+    alignItems: "flex-start"
   }
-  // No specific styles for backgroundImage or gradient here as they use absoluteFillObject
 });
 export default Card;
 //# sourceMappingURL=Card.js.map

package/lib/module/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","TouchableOpacity","StyleSheet","ImageBackground","useTheme","LinearGradient","jsx","_jsx","jsxs","_jsxs","Card","children","style","onPress","onLayout","disabled","testID","backgroundColor","borderRadius","backgroundImage","gradient","theme","cardRootStyle","styles","card","background","renderCardContent","activeOpacity","accessibilityRole","source","absoluteFillObject","imageStyle","resizeMode","blurRadius","colors","start","end","contentWrapper","create","overflow","position","opacity","flex"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Card/Card.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","View","TouchableOpacity","StyleSheet","ImageBackground","useTheme","LinearGradient","jsx","_jsx","Card","children","style","onPress","disabled","elevation","testID","variant","backgroundColor","borderColor","borderRadius","backgroundImage","gradient","theme","getCardStyle","baseStyle","background","cardStyle","styles","card","opacity","renderCardContent","source","imageStyle","resizeMode","blurRadius","imageContentContainer","undefined","colors","start","end","activeOpacity","accessibilityRole","accessibilityLabel","create","flexDirection","display","width","height","flex","justifyContent","alignItems"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Card/Card.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Card/templates/SelaDealCard.js

@@ -1,79 +1,58 @@
 "use strict";
 
 // src/components/SelaDealCard/SelaDealCard.tsx
-import React, { useState, useEffect } from "react"; // Import useState and useEffect
-import { View, Text, StyleSheet, Image // Import Image
-// Import LayoutChangeEvent
-} from "react-native";
-import Card from "../Card.js";
-import { useTheme } from "../../../theme/ThemeContext.js";
+import React, { useEffect, useState } from "react";
+import { View, Text, StyleSheet, Image } from "react-native";
+import Card from "../Card.js"; // Adjust path to your Card component
+import { useTheme } from "../../../theme/ThemeContext.js"; // Adjust path
+
 import { LockOverlay } from "../../LockOverlay/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SelaDealCard = props => {
-  const {
-    variant,
-    backgroundImage,
-    label,
-    labelStyle,
-    labelContainerStyle,
-    providerName,
-    providerNameStyle,
-    description,
-    descriptionStyle,
-    price,
-    priceStyle,
-    priceContainerStyle,
-    onPress,
-    style,
-    width = "100%",
-    // Default width, actual pixel width comes from layout
-    // props.height is the explicit height override
-    isRTL: propIsRTL,
-    borderRadius = 12,
-    darkOverlayEnabled = true,
-    darkOverlayColor = "rgba(0, 0, 0, 0.3)",
-    lockOverlay = false
-  } = props;
+const SelaDealCard = ({
+  variant,
+  backgroundImage,
+  label,
+  labelStyle,
+  labelContainerStyle,
+  providerName,
+  providerNameStyle,
+  description,
+  descriptionStyle,
+  price,
+  priceStyle,
+  priceContainerStyle,
+  onPress,
+  style,
+  width = "100%",
+  height,
+  isRTL: propIsRTL,
+  borderRadius = 12,
+  // Default based on images
+  darkOverlayEnabled = true,
+  darkOverlayColor = "rgba(0, 0, 0, 0.3)",
+  lockOverlay = false
+}) => {
   const {
     theme,
     isRTL: themeIsRTL
   } = useTheme();
   const isRTL = propIsRTL !== undefined ? propIsRTL : themeIsRTL;
-  const [actualCardWidth, setActualCardWidth] = useState(undefined);
-  const [dynamicHeight, setDynamicHeight] = useState(undefined);
+  const styles = getStyles(theme, isRTL);
+  const [dynamicHeight, setDynamicHeight] = useState();
   useEffect(() => {
-    // Calculate dynamic height if no explicit height is provided via props,
-    // and we have the actual card width and a valid background image.
-    if (props.height === undefined && actualCardWidth && actualCardWidth > 0 && backgroundImage) {
-      const asset = Image.resolveAssetSource(backgroundImage);
-      if (asset && asset.width > 0 && asset.height > 0) {
-        const aspectRatio = asset.height / asset.width;
-        setDynamicHeight(actualCardWidth * aspectRatio);
-      } else {
-        // Fallback if image source is invalid or dimensions are zero
-        // (e.g., if it was a network URL and resolveAssetSource didn't work)
-        // You might want a default height or aspect ratio here.
-        setDynamicHeight(200); // Example fallback height
-      }
-    } else if (props.height !== undefined) {
-      // If an explicit height is provided, ensure dynamicHeight is not used.
+    if (height === undefined && typeof width == "number" && width && backgroundImage && backgroundImage.uri) {
+      Image.getSize(backgroundImage.uri, (imgWidth, imgHeight) => {
+        if (imgWidth > 0 && imgHeight > 0) {
+          const aspectRatio = imgHeight / imgWidth;
+          setDynamicHeight(width * aspectRatio);
+        } else {
+          setDynamicHeight(200);
+        }
+      });
+    } else if (height !== undefined) {
       setDynamicHeight(undefined);
     }
-  }, [actualCardWidth, backgroundImage, props.height]);
-  const handleLayout = event => {
-    const newWidth = event.nativeEvent.layout.width;
-    if (newWidth > 0 && newWidth !== actualCardWidth) {
-      setActualCardWidth(newWidth);
-    }
-  };
-
-  // Use explicit props.height if provided, otherwise use the calculated dynamicHeight.
-  // Provide a minimum height for initial render or if dynamicHeight is still undefined.
-  const finalHeight = props.height !== undefined ? props.height : dynamicHeight !== undefined ? dynamicHeight : 150; // Minimum height before calculation or as fallback
-
-  const styles = getStyles(theme, isRTL);
-
-  // ... (rest of your style definitions: finalLabelContainerStyle, etc. remain the same)
+  }, [backgroundImage, height, width]);
   const finalLabelContainerStyle = [styles.labelContainerBase, labelContainerStyle];
   const finalLabelStyle = [styles.labelTextBase, labelStyle];
   const finalPriceContainerStyle = [styles.priceContainerBase, variant === "horizontal" ? styles.priceContainerHorizontal : styles.priceContainerVertical, priceContainerStyle];
@@ -87,27 +66,22 @@ const SelaDealCard = props => {
     textAlign: isRTL ? "right" : "left"
   }, descriptionStyle];
   return /*#__PURE__*/_jsxs(Card, {
-    onPress: onPress
-    //   onLayout={handleLayout} // Pass onLayout to Card to get its width
-    ,
+    onPress: onPress,
     style: [styles.cardBase, {
       borderRadius,
       width,
-      height: finalHeight
-    },
-    // Use the calculated finalHeight
-    style],
+      height: dynamicHeight || height
+    }, style],
     backgroundImage: {
       source: backgroundImage,
-      resizeMode: "cover" // 'cover' will fill dimensions, 'contain' would show whole image
+      resizeMode: "cover"
     },
     children: [darkOverlayEnabled && /*#__PURE__*/_jsx(View, {
       style: [StyleSheet.absoluteFill, {
         backgroundColor: darkOverlayColor
       }, {
         borderRadius: borderRadius
-      } // Ensure overlay respects border radius
-      ]
+      }]
     }), /*#__PURE__*/_jsx(LockOverlay, {
       visible: lockOverlay,
       contentPosition: variant == "horizontal" ? isRTL ? "top-left" : "top-right" : isRTL ? "top-right" : "top-left",
@@ -167,15 +141,12 @@ const SelaDealCard = props => {
     })]
   });
 };
-
-// getStyles function remains the same
 const getStyles = (theme, isRTL) => StyleSheet.create({
   cardBase: {
     overflow: "hidden",
     position: "relative"
   },
   overlayContainer: {
-    // This will now fill the calculated height of the card
     flex: 1,
     padding: 16,
     justifyContent: "space-between"
@@ -218,8 +189,7 @@ const getStyles = (theme, isRTL) => StyleSheet.create({
   },
   textBlockHorizontal: {
     flex: 1,
-    marginRight: isRTL ? 0 : 10,
-    marginLeft: isRTL ? 10 : 0
+    marginRight: 10
   },
   priceContainerHorizontal: {},
   bottomContentVertical: {

package/lib/module/components/Card/templates/SelaDealCard.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","View","Text","StyleSheet","Image","Card","useTheme","LockOverlay","jsx","_jsx","jsxs","_jsxs","SelaDealCard","props","variant","backgroundImage","label","labelStyle","labelContainerStyle","providerName","providerNameStyle","description","descriptionStyle","price","priceStyle","priceContainerStyle","onPress","style","width","isRTL","propIsRTL","borderRadius","darkOverlayEnabled","darkOverlayColor","lockOverlay","theme","themeIsRTL","undefined","actualCardWidth","setActualCardWidth","dynamicHeight","setDynamicHeight","height","asset","resolveAssetSource","aspectRatio","handleLayout","event","newWidth","nativeEvent","layout","finalHeight","styles","getStyles","finalLabelContainerStyle","labelContainerBase","finalLabelStyle","labelTextBase","finalPriceContainerStyle","priceContainerBase","priceContainerHorizontal","priceContainerVertical","finalPriceStyle","priceTextBase","providerTextStyle","providerNameBase","color","onSurface","textAlign","descriptionTextStyle","descriptionBase","cardBase","source","resizeMode","children","absoluteFill","backgroundColor","visible","contentPosition","iconSize","text","overlayOpacity","overlayContainer","topSection","alignItems","bottomContentHorizontal","textBlockHorizontal","bottomContentVertical","textBlockVertical","create","overflow","position","flex","padding","justifyContent","paddingVertical","paddingHorizontal","background","fontWeight","fontSize","onBackground","marginBottom","secondary","helper","primary","onPrimary","flexDirection","marginRight","marginLeft","alignSelf"],"sourceRoot":"..\\..\\..\\..\\..\\src","sources":["components/Card/templates/SelaDealCard.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useState","View","Text","StyleSheet","Image","Card","useTheme","LockOverlay","jsx","_jsx","jsxs","_jsxs","SelaDealCard","variant","backgroundImage","label","labelStyle","labelContainerStyle","providerName","providerNameStyle","description","descriptionStyle","price","priceStyle","priceContainerStyle","onPress","style","width","height","isRTL","propIsRTL","borderRadius","darkOverlayEnabled","darkOverlayColor","lockOverlay","theme","themeIsRTL","undefined","styles","getStyles","dynamicHeight","setDynamicHeight","uri","getSize","imgWidth","imgHeight","aspectRatio","finalLabelContainerStyle","labelContainerBase","finalLabelStyle","labelTextBase","finalPriceContainerStyle","priceContainerBase","priceContainerHorizontal","priceContainerVertical","finalPriceStyle","priceTextBase","providerTextStyle","providerNameBase","color","onSurface","textAlign","descriptionTextStyle","descriptionBase","cardBase","source","resizeMode","children","absoluteFill","backgroundColor","visible","contentPosition","iconSize","text","overlayOpacity","overlayContainer","topSection","alignItems","bottomContentHorizontal","textBlockHorizontal","bottomContentVertical","textBlockVertical","create","overflow","position","flex","padding","justifyContent","paddingVertical","paddingHorizontal","background","fontWeight","fontSize","onBackground","marginBottom","secondary","helper","primary","onPrimary","flexDirection","marginRight","alignSelf"],"sourceRoot":"..\\..\\..\\..\\..\\src","sources":["components/Card/templates/SelaDealCard.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/components/Card/Card.d.ts

@@ -1,9 +1,5 @@
 import React from "react";
-import { LayoutChangeEvent } from "react-native";
-import { CardProps as OriginalCardProps } from "./types";
-interface CardProps extends OriginalCardProps {
-    onLayout?: (event: LayoutChangeEvent) => void;
-}
+import { CardProps } from "./types";
 declare const Card: React.FC<CardProps>;
 export default Card;
 //# sourceMappingURL=Card.d.ts.map

package/lib/typescript/src/components/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAKL,iBAAiB,EAClB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,SAAS,IAAI,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAKzD,UAAU,SAAU,SAAQ,iBAAiB;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC/C;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAoG7B,CAAC;AAiBF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAqG7B,CAAC;AAyBF,eAAe,IAAI,CAAC"}

package/lib/typescript/src/components/Card/templates/SelaDealCard.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-import { ImageSourcePropType, StyleProp, ViewStyle, TextStyle, DimensionValue } from "react-native";
+import { StyleProp, ViewStyle, TextStyle, DimensionValue, ImageURISource } from "react-native";
 interface SelaDealCardProps {
     variant: "horizontal" | "vertical";
-    backgroundImage: ImageSourcePropType;
+    backgroundImage: ImageURISource;
     label?: string;
     labelStyle?: StyleProp<TextStyle>;
     labelContainerStyle?: StyleProp<ViewStyle>;

package/lib/typescript/src/components/Card/templates/SelaDealCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelaDealCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Card/templates/SelaDealCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EACL,mBAAmB,EACnB,SAAS,EACT,SAAS,EAGT,SAAS,EACT,cAAc,EAIf,MAAM,cAAc,CAAC;AAMtB,UAAU,iBAAiB;IACzB,OAAO,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,eAAe,EAAE,mBAAmB,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkN7C,CAAC;AAqEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SelaDealCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Card/templates/SelaDealCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAEL,SAAS,EACT,SAAS,EAGT,SAAS,EACT,cAAc,EAGd,cAAc,EACf,MAAM,cAAc,CAAC;AAMtB,UAAU,iBAAiB;IACzB,OAAO,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,eAAe,EAAE,cAAc,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkL7C,CAAC;AAkEF,eAAe,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "related-ui-components",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "main": "./src/index.ts",
   "scripts": {
     "start": "expo start",

package/src/app.tsx

@@ -9,19 +9,19 @@ const MyScreen = () => {
       <RelatedProvider>
         <SafeAreaView style={{ padding: 50 }}>
           <SelaDealCard
-            variant="horizontal"
-            isRTL
-            backgroundImage={require("./assets/images/namshi-banner.png")} // Your image for the horizontal card
+            variant="vertical"
+            // isRTL
+            backgroundImage={{uri: "https://picsum.photos/seed/lounge/600/700"}} // Your image for the horizontal card
             label="Offer"
-            lockOverlay
+            // lockOverlay
             providerName="Altanfeethi"
             providerNameStyle={{ color: 'yellow' }} // Specific style for provider name
             description="1 Year Membership"
             descriptionStyle={{ color: 'white' }}
             price="20,000 pts"
             onPress={() => console.log("Horizontal Sela Card Pressed")}
-            width={320} // Example width
-            height={180} // Example height
+            width={177} // Example width
+            // height={180} // Example height
           />
         </SafeAreaView>
       </RelatedProvider>

package/src/components/Card/Card.tsx

@@ -1,136 +1,139 @@
-// src/components/Card/Card.tsx
 import React from "react";
 import {
   View,
   TouchableOpacity,
   StyleSheet,
+  Platform,
   ImageBackground,
-  LayoutChangeEvent, // Import LayoutChangeEvent
 } from "react-native";
-import { CardProps as OriginalCardProps } from "./types"; // Assuming types.ts defines CardProps
+import { CardProps } from "./types";
 import { useTheme } from "../../theme/ThemeContext";
 import { LinearGradient } from "expo-linear-gradient";
 
-// Extend CardProps to include onLayout
-interface CardProps extends OriginalCardProps {
-  onLayout?: (event: LayoutChangeEvent) => void;
-}
-
 const Card: React.FC<CardProps> = ({
   children,
   style,
   onPress,
-  onLayout, // Destructure onLayout
   disabled = false,
-  // elevation, // Not used in your current styles
+  elevation = 1,
   testID,
-  // variant, // Not used
+  variant,
   backgroundColor,
-  // borderColor, // Not used
+  borderColor,
   borderRadius = 8,
   backgroundImage,
-  gradient,
+  gradient
+  // margin,
+  // padding,
 }) => {
-  const { theme } = useTheme();
+  const {theme} = useTheme();
+
+  const getCardStyle = () => {
+    const baseStyle: any = {
+      backgroundColor: backgroundColor || theme.background,
+      borderRadius,
+    };
 
-  const cardRootStyle = [
+    return baseStyle;
+  };
+
+  const cardStyle = [
     styles.card,
-    { borderRadius },
-    // If there's a background image, card background should be transparent
-    // so the image is visible. Otherwise, use provided backgroundColor or theme.
-    {
-      backgroundColor: backgroundImage
-        ? "transparent"
-        : backgroundColor || theme.background,
-    },
-    disabled && styles.disabled,
-    style, // This will include the width and calculated height from SelaDealCard
+    getCardStyle(),
+    disabled && { opacity: 0.6 },
+    style,
+    backgroundImage && { backgroundColor: "transparent" },
   ];
 
   const renderCardContent = () => {
-    // The children (SelaDealCard's overlayContainer) are rendered on top of
-    // the ImageBackground or Gradient.
-    return children;
+    if (backgroundImage) {
+      return (
+        <ImageBackground
+          source={backgroundImage.source}
+          style={[styles.backgroundImage, backgroundImage.style]}
+          imageStyle={[{ borderRadius }, backgroundImage.imageStyle]}
+          resizeMode={backgroundImage.resizeMode || "cover"}
+          blurRadius={backgroundImage.blurRadius}
+        >
+          <View
+            style={[
+              styles.imageContentContainer,
+              {
+                opacity:
+                  backgroundImage.opacity !== undefined
+                    ? backgroundImage.opacity
+                    : 1,
+              },
+            ]}
+          >
+            {children}
+          </View>
+        </ImageBackground>
+      );
+    } else if (gradient) {
+      return (
+        <LinearGradient
+          colors={gradient.colors as any}
+          start={gradient.start}
+          end={gradient.end}
+          style={[
+            styles.gradient,
+            { borderRadius },
+            gradient.style,
+          ]}
+        >
+          {children}
+        </LinearGradient>
+      );
+    } else {
+      return children;
+    }
   };
 
   if (onPress) {
     return (
       <TouchableOpacity
-        style={cardRootStyle}
+        style={cardStyle}
         onPress={onPress}
-        onLayout={onLayout} // Apply onLayout here
         disabled={disabled}
         testID={testID}
         activeOpacity={0.9}
         accessibilityRole="button"
+        accessibilityLabel={"Card"}
       >
-        {backgroundImage && (
-          <ImageBackground
-            source={backgroundImage.source}
-            style={[StyleSheet.absoluteFillObject, backgroundImage.style]} // Fills parent
-            imageStyle={[{ borderRadius }, backgroundImage.imageStyle]}
-            resizeMode={backgroundImage.resizeMode || "cover"}
-            blurRadius={backgroundImage.blurRadius}
-          />
-        )}
-        {gradient && !backgroundImage && ( // Render gradient if no image and gradient exists
-          <LinearGradient
-            colors={gradient.colors as any}
-            start={gradient.start}
-            end={gradient.end}
-            style={[
-              StyleSheet.absoluteFillObject, // Gradient also fills
-              { borderRadius },
-              gradient.style,
-            ]}
-          />
-        )}
-        <View style={styles.contentWrapper}>{renderCardContent()}</View>
+        {renderCardContent()}
       </TouchableOpacity>
     );
   }
 
   return (
-    <View style={cardRootStyle} testID={testID} onLayout={onLayout}>
-      {backgroundImage && (
-        <ImageBackground
-          source={backgroundImage.source}
-          style={[StyleSheet.absoluteFillObject, backgroundImage.style]}
-          imageStyle={[{ borderRadius }, backgroundImage.imageStyle]}
-          resizeMode={backgroundImage.resizeMode || "cover"}
-          blurRadius={backgroundImage.blurRadius}
-        />
-      )}
-      {gradient && !backgroundImage && (
-        <LinearGradient
-          colors={gradient.colors as any}
-          start={gradient.start}
-          end={gradient.end}
-          style={[
-            StyleSheet.absoluteFillObject,
-            { borderRadius },
-            gradient.style,
-          ]}
-        />
-      )}
-      <View style={styles.contentWrapper}>{renderCardContent()}</View>
+    <View style={cardStyle} testID={testID}>
+      {renderCardContent()}
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   card: {
-    overflow: "hidden", // Important for absoluteFillObject with borderRadius
-    position: "relative", // For absolute positioning context
+    borderRadius: 8,
+    flexDirection: "column",
+    display: "flex",
   },
-  disabled: {
-    opacity: 0.6,
+  backgroundImage: {
+    width: "100%",
+    height: "100%",
+  },
+  imageContentContainer: {
+    flex: 1,
+    backgroundColor: "transparent",
   },
-  contentWrapper: { // Ensures content is layered above background/gradient
+  gradient: {
     flex: 1,
-    backgroundColor: "transparent", // Content wrapper itself is transparent
+    width: "100%",
+    height: "100%",
+    justifyContent: "flex-start",
+    alignItems: "flex-start",
   },
-  // No specific styles for backgroundImage or gradient here as they use absoluteFillObject
 });
 
-export default Card;
+export default Card;

package/src/components/Card/templates/SelaDealCard.tsx

@@ -1,5 +1,5 @@
 // src/components/SelaDealCard/SelaDealCard.tsx
-import React, { useState, useEffect } from "react"; // Import useState and useEffect
+import React, { useEffect, useState } from "react";
 import {
   ImageSourcePropType,
   StyleProp,
@@ -9,17 +9,17 @@ import {
   TextStyle,
   DimensionValue,
   StyleSheet,
-  Image, // Import Image
-  LayoutChangeEvent, // Import LayoutChangeEvent
+  Image,
+  ImageURISource,
 } from "react-native";
-import Card from "../Card";
-import { useTheme } from "../../../theme/ThemeContext";
+import Card from "../Card"; // Adjust path to your Card component
+import { useTheme } from "../../../theme/ThemeContext"; // Adjust path
 import { ThemeType } from "../../../theme";
 import { LockOverlay } from "../../LockOverlay";
 
 interface SelaDealCardProps {
   variant: "horizontal" | "vertical";
-  backgroundImage: ImageSourcePropType; // Each card instance can have a different image
+  backgroundImage: ImageURISource;
   label?: string;
   labelStyle?: StyleProp<TextStyle>;
   labelContainerStyle?: StyleProp<ViewStyle>;
@@ -31,100 +31,72 @@ interface SelaDealCardProps {
   priceStyle?: StyleProp<TextStyle>;
   priceContainerStyle?: StyleProp<ViewStyle>;
   onPress?: () => void;
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>; // Overall card style
   width?: DimensionValue;
-  height?: DimensionValue; // Explicit height can override dynamic calculation
+  height?: DimensionValue;
   isRTL?: boolean;
   borderRadius?: number;
-  contentColor?: string;
+  contentColor?: string; // For text like providerName, description on the image
   labelBackgroundColor?: string;
   labelTextColor?: string;
   priceBackgroundColor?: string;
   priceTextColor?: string;
-  darkOverlayEnabled?: boolean;
-  darkOverlayColor?: string;
+  darkOverlayEnabled?: boolean; // New prop
+  darkOverlayColor?: string; // New prop for custom overlay color
   lockOverlay?: boolean;
 }
 
-const SelaDealCard: React.FC<SelaDealCardProps> = (props) => {
-  const {
-    variant,
-    backgroundImage,
-    label,
-    labelStyle,
-    labelContainerStyle,
-    providerName,
-    providerNameStyle,
-    description,
-    descriptionStyle,
-    price,
-    priceStyle,
-    priceContainerStyle,
-    onPress,
-    style,
-    width = "100%", // Default width, actual pixel width comes from layout
-    // props.height is the explicit height override
-    isRTL: propIsRTL,
-    borderRadius = 12,
-    darkOverlayEnabled = true,
-    darkOverlayColor = "rgba(0, 0, 0, 0.3)",
-    lockOverlay = false,
-  } = props;
-
+const SelaDealCard: React.FC<SelaDealCardProps> = ({
+  variant,
+  backgroundImage,
+  label,
+  labelStyle,
+  labelContainerStyle,
+  providerName,
+  providerNameStyle,
+  description,
+  descriptionStyle,
+  price,
+  priceStyle,
+  priceContainerStyle,
+  onPress,
+  style,
+  width = "100%",
+  height,
+  isRTL: propIsRTL,
+  borderRadius = 12, // Default based on images
+  darkOverlayEnabled = true,
+  darkOverlayColor = "rgba(0, 0, 0, 0.3)",
+  lockOverlay = false,
+}) => {
   const { theme, isRTL: themeIsRTL } = useTheme();
   const isRTL = propIsRTL !== undefined ? propIsRTL : themeIsRTL;
 
-  const [actualCardWidth, setActualCardWidth] = useState<number | undefined>(
-    undefined,
-  );
-  const [dynamicHeight, setDynamicHeight] = useState<
-    DimensionValue | undefined
-  >(undefined);
+  const styles = getStyles(theme, isRTL);
+
+  const [dynamicHeight, setDynamicHeight] = useState<number>();
 
   useEffect(() => {
-    // Calculate dynamic height if no explicit height is provided via props,
-    // and we have the actual card width and a valid background image.
     if (
-      props.height === undefined &&
-      actualCardWidth &&
-      actualCardWidth > 0 &&
-      backgroundImage
+      height === undefined &&
+      typeof width == "number" &&
+      width &&
+      backgroundImage &&
+      backgroundImage.uri
     ) {
-      const asset = Image.resolveAssetSource(backgroundImage);
-      if (asset && asset.width > 0 && asset.height > 0) {
-        const aspectRatio = asset.height / asset.width;
-        setDynamicHeight(actualCardWidth * aspectRatio);
-      } else {
-        // Fallback if image source is invalid or dimensions are zero
-        // (e.g., if it was a network URL and resolveAssetSource didn't work)
-        // You might want a default height or aspect ratio here.
-        setDynamicHeight(200); // Example fallback height
-      }
-    } else if (props.height !== undefined) {
-      // If an explicit height is provided, ensure dynamicHeight is not used.
+      Image.getSize(backgroundImage.uri, (imgWidth, imgHeight) => {
+        if (imgWidth > 0 && imgHeight > 0) {
+          const aspectRatio = imgHeight / imgWidth;
+          setDynamicHeight(width * aspectRatio);
+        } else {
+          setDynamicHeight(200);
+        }
+      });
+    } else if (height !== undefined) {
       setDynamicHeight(undefined);
     }
-  }, [actualCardWidth, backgroundImage, props.height]);
-
-  const handleLayout = (event: LayoutChangeEvent) => {
-    const newWidth = event.nativeEvent.layout.width;
-    if (newWidth > 0 && newWidth !== actualCardWidth) {
-      setActualCardWidth(newWidth);
-    }
-  };
-
-  // Use explicit props.height if provided, otherwise use the calculated dynamicHeight.
-  // Provide a minimum height for initial render or if dynamicHeight is still undefined.
-  const finalHeight =
-    props.height !== undefined
-      ? props.height
-      : dynamicHeight !== undefined
-      ? dynamicHeight
-      : 150; // Minimum height before calculation or as fallback
-
-  const styles = getStyles(theme, isRTL);
+  }, [backgroundImage, height, width]);
 
-  // ... (rest of your style definitions: finalLabelContainerStyle, etc. remain the same)
   const finalLabelContainerStyle: StyleProp<ViewStyle> = [
     styles.labelContainerBase,
     labelContainerStyle,
@@ -161,15 +133,10 @@ const SelaDealCard: React.FC<SelaDealCardProps> = (props) => {
   return (
     <Card
       onPress={onPress}
-    //   onLayout={handleLayout} // Pass onLayout to Card to get its width
-      style={[
-        styles.cardBase,
-        { borderRadius, width, height: finalHeight }, // Use the calculated finalHeight
-        style,
-      ]}
+      style={[styles.cardBase, { borderRadius, width, height: dynamicHeight || height }, style]}
       backgroundImage={{
         source: backgroundImage,
-        resizeMode: "cover", // 'cover' will fill dimensions, 'contain' would show whole image
+        resizeMode: "cover",
       }}
     >
       {darkOverlayEnabled && (
@@ -177,10 +144,11 @@ const SelaDealCard: React.FC<SelaDealCardProps> = (props) => {
           style={[
             StyleSheet.absoluteFill,
             { backgroundColor: darkOverlayColor },
-            { borderRadius: borderRadius }, // Ensure overlay respects border radius
+            { borderRadius: borderRadius },
           ]}
         />
       )}
+
       <LockOverlay
         visible={lockOverlay}
         contentPosition={
@@ -196,7 +164,7 @@ const SelaDealCard: React.FC<SelaDealCardProps> = (props) => {
         text={""}
         overlayOpacity={0.4}
       />
-      {/* The overlayContainer with flex: 1 will now correctly fill the 'finalHeight' */}
+
       <View style={styles.overlayContainer}>
         <View
           style={[
@@ -258,71 +226,68 @@ const SelaDealCard: React.FC<SelaDealCardProps> = (props) => {
   );
 };
 
-// getStyles function remains the same
-const getStyles = (theme: ThemeType, isRTL: boolean) => StyleSheet.create({
+const getStyles = (theme: ThemeType, isRTL: boolean) =>
+  StyleSheet.create({
     cardBase: {
-        overflow: "hidden",
-        position: "relative",
+      overflow: "hidden",
+      position: "relative",
     },
-    overlayContainer: { // This will now fill the calculated height of the card
-        flex: 1,
-        padding: 16,
-        justifyContent: "space-between",
-    },
-    topSection: {
+    overlayContainer: {
+      flex: 1,
+      padding: 16,
+      justifyContent: "space-between",
     },
+    topSection: {},
     labelContainerBase: {
-        paddingVertical: 6,
-        paddingHorizontal: 12,
-        borderRadius: 8,
-        backgroundColor: theme.background
+      paddingVertical: 6,
+      paddingHorizontal: 12,
+      borderRadius: 8,
+      backgroundColor: theme.background,
     },
     labelTextBase: {
-        fontWeight: "600",
-        fontSize: 13,
-        color: theme.onBackground
+      fontWeight: "600",
+      fontSize: 13,
+      color: theme.onBackground,
     },
     providerNameBase: {
-        fontSize: 20,
-        marginBottom: 2,
-        color: theme.secondary
+      fontSize: 20,
+      marginBottom: 2,
+      color: theme.secondary,
     },
     descriptionBase: {
-        fontSize: 14,
-        color: theme.helper
+      fontSize: 14,
+      color: theme.helper,
     },
     priceContainerBase: {
-        paddingVertical: 8,
-        paddingHorizontal: 16,
-        borderRadius: 10,
-        backgroundColor: theme.primary
+      paddingVertical: 8,
+      paddingHorizontal: 16,
+      borderRadius: 10,
+      backgroundColor: theme.primary,
     },
     priceTextBase: {
-        fontSize: 16,
-        color: theme.onPrimary
+      fontSize: 16,
+      color: theme.onPrimary,
     },
     bottomContentHorizontal: {
-        flexDirection: isRTL ? "row-reverse" : "row",
-        justifyContent: "space-between",
-        alignItems: "flex-end",
+      flexDirection: isRTL ? "row-reverse" : "row",
+      justifyContent: "space-between",
+      alignItems: "flex-end",
     },
     textBlockHorizontal: {
-        flex: 1,
-        marginRight: isRTL ? 0 : 10,
-        marginLeft: isRTL ? 10 : 0,
-    },
-    priceContainerHorizontal: {
+      flex: 1,
+      marginRight: 10,
     },
+    priceContainerHorizontal: {},
     bottomContentVertical: {
-        flexDirection: "column",
+      flexDirection: "column",
     },
     textBlockVertical: {
-        marginBottom: 12,
+      marginBottom: 12,
     },
     priceContainerVertical: {
-        alignSelf: "stretch",
-        alignItems: "center",
+      alignSelf: "stretch",
+      alignItems: "center",
     },
-});
+  });
 
-export default SelaDealCard;
+export default SelaDealCard;