related-ui-components 1.1.6

package/lib/commonjs/components/Badges/README.md

@@ -0,0 +1,98 @@
+# Badge Component
+
+A customizable badge component for React Native applications that displays icons with optional labels, supporting both active and inactive states. Perfect for creating navigation tabs, feature highlights, or status indicators.
+
+## Basic Usage
+
+```jsx
+import React from 'react';
+import { View } from 'react-native';
+import { Badge } from '@your-org/component-library';
+import { StarIcon } from 'your-icon-library';
+
+const MyBadgeExample = () => {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Badge 
+        icon={<StarIcon size={24} color="#FFFFFF" />}
+        label="Favorite"
+        isActive={true}
+      />
+    </View>
+  );
+};
+
+export default MyBadgeExample;
+```
+
+## Props
+
+### Core Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `icon` | `React.ReactNode` | ✅ | - | Icon to display in the badge |
+| `activeIcon` | `React.ReactNode` | ❌ | - | Alternative icon to display when badge is active |
+| `isActive` | `boolean` | ❌ | `false` | Whether the badge is in active state |
+| `label` | `string` | ❌ | - | Text label for the badge |
+
+### Dimension Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `size` | `number` | ❌ | `60` | Size of the badge in pixels |
+
+### Styling Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `style` | `StyleProp<ViewStyle>` | ❌ | - | Custom style for the badge |
+| `activeStyle` | `StyleProp<ViewStyle>` | ❌ | - | Additional style applied when badge is active |
+| `inactiveStyle` | `StyleProp<ViewStyle>` | ❌ | - | Additional style applied when badge is inactive |
+| `labelStyle` | `StyleProp<TextStyle>` | ❌ | - | Custom style for the label text |
+
+## Advanced Examples
+
+### With Active and Inactive Icons
+
+```jsx
+<Badge 
+  icon={<StarOutlineIcon size={24} color="#FFFFFF" />}
+  activeIcon={<StarFilledIcon size={24} color="#FFFFFF" />}
+  isActive={isFavorite}
+  label="Favorite"
+  size={80}
+/>
+```
+
+### Custom Styling
+
+```jsx
+<Badge 
+  icon={<ProfileIcon size={30} color="#333333" />}
+  style={{ backgroundColor: '#F5F5F5', borderWidth: 1, borderColor: '#E0E0E0' }}
+  activeStyle={{ backgroundColor: '#4CAF50', borderColor: '#388E3C' }}
+  labelStyle={{ color: '#333333', fontSize: 14, fontWeight: 'bold' }}
+  label="Profile"
+  size={70}
+/>
+```
+
+### Without Label
+
+```jsx
+<Badge 
+  icon={<NotificationIcon size={24} color="#FFFFFF" />}
+  activeIcon={<NotificationActiveIcon size={24} color="#FFFFFF" />}
+  isActive={hasNotifications}
+  size={50}
+/>
+```
+
+
+### Theme Integration
+
+The Badge component automatically uses your application's theme through the `useTheme()` hook. Default styling includes:
+- Badge background color: Uses `theme.secondary` for inactive state
+- Active badge background color: Uses `theme.primary` for active state
+- Label text color: Uses `theme.text`

package/lib/commonjs/components/Badges/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Badge: true
+};
+Object.defineProperty(exports, "Badge", {
+  enumerable: true,
+  get: function () {
+    return _Badge.default;
+  }
+});
+var _Badge = _interopRequireWildcard(require("./Badge.js"));
+Object.keys(_Badge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Badge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Badge[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/Badges/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_Badge","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","n","__proto__","a","getOwnPropertyDescriptor","u","i","set"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Badges/index.ts"],"mappings":";;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACAC,MAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAK,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAN,MAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAd,MAAA,CAAAM,GAAA;IAAA;EAAA;AAAA;AAAwB,SAAAS,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAf,wBAAAe,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAL,GAAA,CAAAE,CAAA,OAAAO,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAtB,MAAA,CAAAS,cAAA,IAAAT,MAAA,CAAAuB,wBAAA,WAAAC,CAAA,IAAAX,CAAA,oBAAAW,CAAA,OAAAnB,cAAA,CAAAC,IAAA,CAAAO,CAAA,EAAAW,CAAA,SAAAC,CAAA,GAAAH,CAAA,GAAAtB,MAAA,CAAAuB,wBAAA,CAAAV,CAAA,EAAAW,CAAA,UAAAC,CAAA,KAAAA,CAAA,CAAAd,GAAA,IAAAc,CAAA,CAAAC,GAAA,IAAA1B,MAAA,CAAAS,cAAA,CAAAW,CAAA,EAAAI,CAAA,EAAAC,CAAA,IAAAL,CAAA,CAAAI,CAAA,IAAAX,CAAA,CAAAW,CAAA,YAAAJ,CAAA,CAAAF,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAU,GAAA,CAAAb,CAAA,EAAAO,CAAA,GAAAA,CAAA","ignoreList":[]}

package/lib/commonjs/components/Banner/Banner.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../Card/index.js");
+var _index2 = require("../../theme/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * A customizable banner component with background image and action button
+ */
+const Banner = ({
+  backgroundImage,
+  buttonText = "Redeem",
+  onButtonPress,
+  onBannerPress,
+  containerStyle,
+  backgroundImageStyle,
+  contentContainerStyle,
+  buttonStyle,
+  buttonTextStyle,
+  height = 300,
+  customButton,
+  contentAlignment = "center",
+  // Icon props with defaults
+  icon,
+  iconPosition = "left",
+  iconStyle,
+  iconSpacing = 8
+}) => {
+  const theme = (0, _index2.useTheme)();
+  // Handle banner press if provided
+  const handlePress = onBannerPress ? onBannerPress : undefined;
+
+  // Render the button with optional icon
+  const renderButton = () => {
+    if (customButton) {
+      return customButton;
+    }
+    if (!buttonText) {
+      return null;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      style: [styles.button, buttonStyle, {
+        borderColor: theme.primary
+      }],
+      onPress: onButtonPress,
+      accessibilityRole: "button",
+      accessibilityLabel: buttonText,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [styles.buttonContent, {
+          flexDirection: iconPosition === "left" ? "row" : "row-reverse"
+        }],
+        children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.iconContainer, {
+            marginRight: iconPosition === "left" ? iconSpacing : 0,
+            marginLeft: iconPosition === "right" ? iconSpacing : 0
+          }, iconStyle],
+          accessible: false,
+          importantForAccessibility: "no-hide-descendants",
+          children: icon
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.buttonText, buttonTextStyle, {
+            color: theme.primary
+          }],
+          children: buttonText
+        })]
+      })
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Card, {
+    style: [{
+      height
+    }, containerStyle],
+    backgroundImage: {
+      source: backgroundImage,
+      resizeMode: "cover",
+      style: backgroundImageStyle
+    },
+    onPress: handlePress,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.CardFooter, {
+      justifyContent: "center",
+      style: [styles.footer, contentAlignment === "top" ? styles.footerTop : contentAlignment === "center" ? styles.footerCenter : styles.footerBottom, contentContainerStyle],
+      children: renderButton()
+    })
+  });
+};
+const styles = _reactNative.StyleSheet.create({
+  footer: {
+    position: "absolute",
+    left: 0,
+    right: 0
+  },
+  footerTop: {
+    top: 0
+  },
+  footerCenter: {
+    top: "50%",
+    transform: [{
+      translateY: -20
+    }] // Approximate button height offset
+  },
+  footerBottom: {
+    bottom: 0
+  },
+  button: {
+    backgroundColor: "transparent",
+    paddingHorizontal: 24,
+    paddingVertical: 8,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "#FFFFFF"
+  },
+  buttonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  iconContainer: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  buttonText: {
+    color: "#FFFFFF",
+    fontSize: 14,
+    fontWeight: "600",
+    letterSpacing: 1
+  }
+});
+var _default = exports.default = Banner;
+//# sourceMappingURL=Banner.js.map

package/lib/commonjs/components/Banner/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_index","_index2","_jsxRuntime","e","__esModule","default","Banner","backgroundImage","buttonText","onButtonPress","onBannerPress","containerStyle","backgroundImageStyle","contentContainerStyle","buttonStyle","buttonTextStyle","height","customButton","contentAlignment","icon","iconPosition","iconStyle","iconSpacing","theme","useTheme","handlePress","undefined","renderButton","jsx","TouchableOpacity","style","styles","button","borderColor","primary","onPress","accessibilityRole","accessibilityLabel","children","jsxs","View","buttonContent","flexDirection","iconContainer","marginRight","marginLeft","accessible","importantForAccessibility","Text","color","Card","source","resizeMode","CardFooter","justifyContent","footer","footerTop","footerCenter","footerBottom","StyleSheet","create","position","left","right","top","transform","translateY","bottom","backgroundColor","paddingHorizontal","paddingVertical","borderRadius","borderWidth","alignItems","fontSize","fontWeight","letterSpacing","_default","exports"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Banner/Banner.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Banner/BannerWithDetails.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../Card/index.js");
+var _index2 = require("../../theme/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Import ThemeType
+
+const BannerWithDetails = ({
+  backgroundImage,
+  logoImage,
+  detailText,
+  onPress,
+  containerStyle,
+  imageStyle,
+  logoContainerStyle,
+  logoStyle,
+  textContainerStyle,
+  textStyle,
+  customDetailContent
+}) => {
+  const theme = (0, _index2.useTheme)();
+  const styles = createStyles(theme); // Create styles using theme
+
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      width: "100%",
+      paddingBottom: 50
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Card, {
+      style: [styles.container, containerStyle],
+      backgroundImage: {
+        source: backgroundImage,
+        style: [styles.backgroundImage, imageStyle]
+      },
+      borderRadius: 15,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.CardContent, {
+        style: styles.cardContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Card, {
+          style: [styles.logoContainer, logoContainerStyle],
+          backgroundImage: {
+            source: logoImage,
+            style: [styles.backgroundImage],
+            imageStyle: logoStyle
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Card, {
+          variant: "elevated",
+          style: [styles.textContainer, textContainerStyle],
+          children: customDetailContent || /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.detailText, textStyle],
+            children: detailText
+          })
+        })]
+      })
+    })
+  });
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      onPress: onPress,
+      children: content
+    });
+  }
+  return content;
+};
+
+// Function to create themed styles
+const createStyles = theme => _reactNative.StyleSheet.create({
+  container: {
+    position: "relative",
+    borderRadius: 12,
+    padding: 0,
+    height: 300
+  },
+  backgroundImage: {
+    width: "100%",
+    height: "100%",
+    resizeMode: "cover"
+  },
+  cardContent: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    padding: 0,
+    alignItems: "center",
+    transform: [{
+      translateY: "30%"
+    }]
+  },
+  logoContainer: {
+    marginVertical: 0,
+    bottom: -15,
+    width: 90,
+    height: 80,
+    zIndex: 50
+    // Background is image
+  },
+  textContainer: {
+    marginVertical: 0,
+    padding: 20,
+    height: 80,
+    width: "90%",
+    justifyContent: "center"
+  },
+  detailText: {
+    textAlign: "center",
+    fontSize: 14,
+    color: theme.onSurface // Use standard text color
+  }
+});
+var _default = exports.default = BannerWithDetails;
+//# sourceMappingURL=BannerWithDetails.js.map

package/lib/commonjs/components/Banner/BannerWithDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_index","_index2","_jsxRuntime","e","__esModule","default","BannerWithDetails","backgroundImage","logoImage","detailText","onPress","containerStyle","imageStyle","logoContainerStyle","logoStyle","textContainerStyle","textStyle","customDetailContent","theme","useTheme","styles","createStyles","content","jsx","View","style","width","paddingBottom","children","Card","container","source","borderRadius","jsxs","CardContent","cardContent","logoContainer","variant","textContainer","Text","TouchableOpacity","StyleSheet","create","position","padding","height","resizeMode","bottom","left","right","alignItems","transform","translateY","marginVertical","zIndex","justifyContent","textAlign","fontSize","color","onSurface","_default","exports"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Banner/BannerWithDetails.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Banner/README.md

@@ -0,0 +1,101 @@
+# Banner
+
+![Banner Component](../../assets/components/SimpleBanner.png)
+
+## Banner Documentation
+
+The `Banner` is a customizable banner component with a background image and an optional action button. It supports different vertical alignments, custom styling, and an optional icon that can be positioned on either side of the button text.
+
+### Usage
+
+```tsx
+import Banner from "@/components/Card/templates/Banner";
+import { Ionicons } from "@expo/vector-icons";
+
+const MyComponent = () => {
+  return (
+    <Banner
+      backgroundImage={require("@/assets/images/banner-bg.jpg")}
+      buttonText="Redeem Now"
+      onButtonPress={() => Alert.alert("Button pressed")}
+      onBannerPress={() => Alert.alert("Banner pressed")}
+      height={200}
+      contentAlignment="bottom"
+      icon={<Ionicons name="gift-outline" size={20} color="#FFFFFF" />}
+      iconPosition="left"
+    />
+  );
+};
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `backgroundImage` | `ImageRequireSource` | Required | The background image to display in the banner |
+| `buttonText` | `string` | `"Redeem"` | Text to display on the action button |
+| `onButtonPress` | `() => void` | `undefined` | Function to execute when the button is pressed |
+| `onBannerPress` | `() => void` | `undefined` | Function to execute when the banner (outside the button) is pressed |
+| `containerStyle` | `ViewStyle` | `undefined` | Additional styles to apply to the banner container |
+| `backgroundImageStyle` | `ViewStyle` | `undefined` | Additional styles to apply to the background image |
+| `contentContainerStyle` | `ViewStyle` | `undefined` | Additional styles to apply to the content container |
+| `buttonStyle` | `ViewStyle` | `undefined` | Additional styles to apply to the button |
+| `buttonTextStyle` | `TextStyle` | `undefined` | Additional styles to apply to the button text |
+| `height` | `DimensionValue` | `300` | Height of the banner |
+| `customButton` | `React.ReactNode` | `undefined` | Custom button component to replace the default button |
+| `contentAlignment` | `"top" \| "center" \| "bottom"` | `"center"` | Vertical alignment of the content within the banner |
+| `icon` | `React.ReactNode` | `undefined` | Optional icon to display alongside the button text |
+| `iconPosition` | `"left" \| "right"` | `"left"` | Position of the icon relative to the button text |
+| `iconStyle` | `ViewStyle` | `undefined` | Additional styles to apply to the icon container |
+| `iconSpacing` | `number` | `8` | Spacing between the icon and button text |
+
+### Related Components
+
+- `Card`: The base component used for the overall container
+- `CardFooter`: Contains the button and manages content positioning
+
+# BannerWithDetails
+
+![BannerWithDetails Component](../../assets/components/BannerWithDetails.png)
+
+## BannerWithDetails Documentation
+
+The `BannerWithDetails` is a visually appealing banner component that combines a background image with a prominently featured logo and a card containing detail text. It's designed for showcasing brand information or promotional content with a clean, elevated appearance.
+
+### Usage
+
+```tsx
+import BannerWithDetails from "@/components/Card/templates/BannerWithDetails";
+
+const MyComponent = () => {
+  return (
+    <BannerWithDetails
+      backgroundImage={require("@/assets/images/banner-bg.jpg")}
+      logoImage={require("@/assets/images/company-logo.png")}
+      detailText="Limited time offer: 25% off on all premium items!"
+      onPress={() => Alert.alert("Banner pressed")}
+    />
+  );
+};
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `backgroundImage` | `ImageRequireSource` | Required | The background image for the banner |
+| `logoImage` | `ImageRequireSource` | Required | The logo image to display in the centered card |
+| `detailText` | `string` | Required | Text description to display in the details card |
+| `onPress` | `() => void` | `undefined` | Function to execute when the banner is pressed |
+| `containerStyle` | `ViewStyle` | `undefined` | Additional styles for the main container |
+| `imageStyle` | `ViewStyle` | `undefined` | Additional styles for the background image |
+| `logoContainerStyle` | `ViewStyle` | `undefined` | Additional styles for the logo container |
+| `logoStyle` | `ImageStyle` | `undefined` | Additional styles for the logo image |
+| `textContainerStyle` | `ViewStyle` | `undefined` | Additional styles for the text container |
+| `textStyle` | `TextStyle` | `undefined` | Additional styles for the detail text |
+| `customDetailContent` | `React.ReactNode` | `undefined` | Custom content to replace the default detail text |
+
+### Related Components
+
+- `Card`: Used for the main container, logo container, and text container
+- `CardContent`: Manages the positioning of the logo and text containers

package/lib/commonjs/components/Banner/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Banner: true,
+  BannerWithDetails: true
+};
+Object.defineProperty(exports, "Banner", {
+  enumerable: true,
+  get: function () {
+    return _Banner.default;
+  }
+});
+Object.defineProperty(exports, "BannerWithDetails", {
+  enumerable: true,
+  get: function () {
+    return _BannerWithDetails.default;
+  }
+});
+var _Banner = _interopRequireWildcard(require("./Banner.js"));
+Object.keys(_Banner).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Banner[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Banner[key];
+    }
+  });
+});
+var _BannerWithDetails = _interopRequireWildcard(require("./BannerWithDetails.js"));
+Object.keys(_BannerWithDetails).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _BannerWithDetails[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _BannerWithDetails[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/Banner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_Banner","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_BannerWithDetails","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","n","__proto__","a","getOwnPropertyDescriptor","u","i","set"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Banner/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,OAAA,GAAAC,uBAAA,CAAAC,OAAA;AAGAC,MAAA,CAAAC,IAAA,CAAAJ,OAAA,EAAAK,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAN,OAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAd,OAAA,CAAAM,GAAA;IAAA;EAAA;AAAA;AAFA,IAAAS,kBAAA,GAAAd,uBAAA,CAAAC,OAAA;AAGAC,MAAA,CAAAC,IAAA,CAAAW,kBAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAS,kBAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,kBAAA,CAAAT,GAAA;IAAA;EAAA;AAAA;AAAmC,SAAAU,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAhB,wBAAAgB,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAN,GAAA,CAAAG,CAAA,OAAAO,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAvB,MAAA,CAAAS,cAAA,IAAAT,MAAA,CAAAwB,wBAAA,WAAAC,CAAA,IAAAX,CAAA,oBAAAW,CAAA,OAAApB,cAAA,CAAAC,IAAA,CAAAQ,CAAA,EAAAW,CAAA,SAAAC,CAAA,GAAAH,CAAA,GAAAvB,MAAA,CAAAwB,wBAAA,CAAAV,CAAA,EAAAW,CAAA,UAAAC,CAAA,KAAAA,CAAA,CAAAf,GAAA,IAAAe,CAAA,CAAAC,GAAA,IAAA3B,MAAA,CAAAS,cAAA,CAAAY,CAAA,EAAAI,CAAA,EAAAC,CAAA,IAAAL,CAAA,CAAAI,CAAA,IAAAX,CAAA,CAAAW,CAAA,YAAAJ,CAAA,CAAAF,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAU,GAAA,CAAAb,CAAA,EAAAO,CAAA,GAAAA,CAAA","ignoreList":[]}

package/lib/commonjs/components/BrandIcon/BrandIcon.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _index = require("../../theme/index.js");
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BrandIcon = ({
+  brand,
+  size = 66,
+  selected = false,
+  onPress,
+  disabled = false,
+  containerStyle,
+  imageStyle,
+  selectionIndicatorStyle,
+  selectionIndicatorIcon
+}) => {
+  const theme = (0, _index.useTheme)();
+  const styles = createStyles(theme); // Create styles using theme
+
+  const iconSize = {
+    width: size,
+    height: size,
+    borderRadius: size / 2
+  };
+  const imageSize = {
+    width: size,
+    height: size,
+    borderRadius: size / 2
+  };
+  const indicatorSize = {
+    width: size * 0.3,
+    height: size * 0.3,
+    borderRadius: size * 0.3 / 2
+  };
+  const indicatorPosition = {
+    top: -5,
+    right: 0
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    style: [styles.container, iconSize, selected && styles.selectedContainer, containerStyle],
+    onPress: onPress,
+    disabled: disabled || !onPress,
+    activeOpacity: 0.8,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+      source: brand.logo,
+      style: [styles.logo, imageSize, imageStyle],
+      resizeMode: "contain"
+    }), selected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.selectionIndicator, indicatorSize, indicatorPosition, selectionIndicatorStyle],
+      children: selectionIndicatorIcon
+    })]
+  });
+};
+
+// Function to create themed styles
+const createStyles = theme => _reactNative.StyleSheet.create({
+  container: {
+    backgroundColor: theme.surface,
+    // Use surface for background
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: theme.border,
+    // Use border color
+    shadowColor: '#000000',
+    // Keep shadow black for now
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    elevation: 2
+  },
+  selectedContainer: {
+    borderColor: theme.primary,
+    // Use primary for selected border
+    borderWidth: 2 // Keep border width for selected state
+  },
+  logo: {},
+  selectionIndicator: {
+    position: 'absolute',
+    backgroundColor: theme.primary,
+    // Use primary for indicator background
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 2
+  },
+  checkmark: {
+    // Style is unused in current code, but if used:
+    width: '60%',
+    height: '60%'
+    // tintColor: theme.onPrimary, // Use onPrimary if checkmark is an icon/image
+  }
+});
+var _default = exports.default = BrandIcon;
+//# sourceMappingURL=BrandIcon.js.map