vdb-ai-chat 1.0.6 → 1.0.8

package/lib/commonjs/components/MessageMetaRow.js

@@ -7,6 +7,8 @@ exports.default = exports.MessageMetaRow = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _utils = require("./utils");
+var _native = _interopRequireWildcard(require("styled-components/native"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 let ImageComponent = _reactNative.Image;
 if (_reactNative.Platform.OS !== "web") {
@@ -18,11 +20,9 @@ if (_reactNative.Platform.OS !== "web") {
 const MessageMetaRow = ({
   message,
   priceMode,
-  handleFeedbackAction,
-  onReloadResults,
-  reloading,
-  hasResults
+  handleFeedbackAction
 }) => {
+  const theme = (0, _native.useTheme)();
   const isUser = message.role === "user";
   const [conversationId, setConversationId] = _react.default.useState(null);
   _react.default.useEffect(() => {
@@ -38,12 +38,14 @@ const MessageMetaRow = ({
     style: [styles.rowContainer, isUser ? styles.alignRight : styles.alignLeft]
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.timeContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.timeText
+  }, /*#__PURE__*/_react.default.createElement(TimeText, {
+    theme: theme
   }, (0, _utils.formatToTime)(message.createdAt))), canFeedback ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.likeDislikeContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
-    style: state => [styles.borderButton, state?.hovered && styles.borderButtonHover, message.reaction === _utils.FeedbackAction.LIKE && styles.borderButtonLike],
+  }, /*#__PURE__*/_react.default.createElement(LikeButton, {
+    type: "like",
+    style: state => [state?.hovered && styles.borderButtonHover],
+    reaction: message.reaction,
     onPress: () => handleFeedbackAction(_utils.FeedbackAction.LIKE, String(conversationId), message.id),
     disabled: !canFeedback
   }, /*#__PURE__*/_react.default.createElement(ImageComponent, {
@@ -54,10 +56,12 @@ const MessageMetaRow = ({
     style: {
       width: 20,
       height: 20,
-      tintColor: message.reaction === _utils.FeedbackAction.LIKE ? "#00B140" : "#020001"
+      tintColor: message.reaction === _utils.FeedbackAction.LIKE ? theme["success-01"] || "#00B140" : theme["core-05"] || "#020001"
     }
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
-    style: state => [styles.borderButton, state?.hovered && styles.borderButtonHover, message.reaction === _utils.FeedbackAction.DISLIKE && styles.borderButtonDislike],
+  })), /*#__PURE__*/_react.default.createElement(LikeButton, {
+    type: "dislike",
+    style: state => [state?.hovered && styles.borderButtonHover],
+    reaction: message.reaction,
     onPress: () => handleFeedbackAction(_utils.FeedbackAction.DISLIKE, String(conversationId), message.id),
     disabled: !canFeedback
   }, /*#__PURE__*/_react.default.createElement(ImageComponent, {
@@ -68,11 +72,45 @@ const MessageMetaRow = ({
     style: {
       width: 20,
       height: 20,
-      tintColor: message.reaction === _utils.FeedbackAction.DISLIKE ? "#D0021B" : "#020001"
+      tintColor: message.reaction === _utils.FeedbackAction.DISLIKE ? theme["error-01"] || "#D0021B" : theme["core-05"] || "#020001"
     }
   }))) : null);
 };
 exports.MessageMetaRow = MessageMetaRow;
+const LikeButton = _native.default.Pressable`
+  border-width: 1;
+  border-radius: 8px;
+  padding-horizontal: 4px;
+  padding-vertical: 4px;
+  ${({
+  reaction,
+  type
+}) => reaction === _utils.FeedbackAction.LIKE && type === "like" ? (0, _native.css)`
+          background-color: ${({
+  theme
+}) => theme["success-02"] || "#DBFFE4"};
+          border-color: ${({
+  theme
+}) => theme["success-01"] || "#00B140"};
+        ` : reaction === _utils.FeedbackAction.DISLIKE && type === "dislike" ? (0, _native.css)`
+          background-color: ${({
+  theme
+}) => theme["error-02"] || "#FFE2E0"};
+          border-color: ${({
+  theme
+}) => theme["error-01"] || "#D0021B"};
+        ` : (0, _native.css)`
+          border-color: ${({
+  theme
+}) => theme["core-03"] || "#D5D5DC"};
+        `}
+`;
+const TimeText = _native.default.Text`
+  font-size: 12px;
+  color: ${({
+  theme
+}) => theme["core-06"] || "#666"};
+`;
 const styles = _reactNative.StyleSheet.create({
   rowContainer: {
     flexDirection: "row",
@@ -96,27 +134,8 @@ const styles = _reactNative.StyleSheet.create({
   timeContainer: {
     margin: 0
   },
-  borderButton: {
-    borderWidth: 1,
-    borderColor: "#D5D5DC",
-    borderRadius: 8,
-    paddingHorizontal: 4,
-    paddingVertical: 4
-  },
   borderButtonHover: {
     backgroundColor: "#EDEDF2"
-  },
-  borderButtonLike: {
-    backgroundColor: "#DBFFE4",
-    borderColor: "#00B140"
-  },
-  borderButtonDislike: {
-    backgroundColor: "#FFE2E0",
-    borderColor: "#D0021B"
-  },
-  timeText: {
-    fontSize: 12,
-    color: "#666"
   }
 });
 var _default = exports.default = MessageMetaRow;

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_utils","e","__esModule","default","ImageComponent","Image","Platform","OS","ExpoImage","MessageMetaRow","message","priceMode","handleFeedbackAction","onReloadResults","reloading","hasResults","isUser","role","conversationId","setConversationId","React","useState","useEffect","fetchId","id","fetchConversationId","isValidMessageId","length","startsWith","canFeedback","isLoading","createElement","View","style","styles","rowContainer","alignRight","alignLeft","timeContainer","Text","timeText","formatToTime","createdAt","likeDislikeContainer","Pressable","state","borderButton","hovered","borderButtonHover","reaction","FeedbackAction","LIKE","borderButtonLike","onPress","String","disabled","source","uri","resizeMode","width","height","tintColor","DISLIKE","borderButtonDislike","exports","StyleSheet","create","flexDirection","justifyContent","alignItems","gap","marginHorizontal","marginTop","marginBottom","alignSelf","margin","borderWidth","borderColor","borderRadius","paddingHorizontal","paddingVertical","backgroundColor","fontSize","color","_default"],"sourceRoot":"../../../src","sources":["components/MessageMetaRow.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_utils","_native","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ImageComponent","Image","Platform","OS","ExpoImage","MessageMetaRow","message","priceMode","handleFeedbackAction","theme","useTheme","isUser","role","conversationId","setConversationId","React","useState","useEffect","fetchId","id","fetchConversationId","isValidMessageId","length","startsWith","canFeedback","isLoading","createElement","View","style","styles","rowContainer","alignRight","alignLeft","timeContainer","TimeText","formatToTime","createdAt","likeDislikeContainer","LikeButton","type","state","hovered","borderButtonHover","reaction","onPress","FeedbackAction","LIKE","String","disabled","source","uri","resizeMode","width","height","tintColor","DISLIKE","exports","styled","Pressable","css","Text","StyleSheet","create","flexDirection","justifyContent","alignItems","gap","marginHorizontal","marginTop","marginBottom","alignSelf","margin","backgroundColor","_default"],"sourceRoot":"../../../src","sources":["components/MessageMetaRow.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/ProductsListView.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _utils = require("./utils");
+var _native = _interopRequireWildcard(require("styled-components/native"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 let ImageComponent = _reactNative.Image;
 if (_reactNative.Platform.OS !== "web") {
@@ -17,6 +18,171 @@ if (_reactNative.Platform.OS !== "web") {
     // expo-image not installed, use React Native Image
   }
 }
+
+// Token configuration for diamond details display
+
+const DIAMOND_TOKENS = [
+// Row 1: Basic specs
+{
+  type: "field",
+  field: "shape_long",
+  style: "primary"
+}, {
+  type: "fieldWithSuffix",
+  field: "size",
+  style: "secondary",
+  suffix: "ct",
+  showCurrencyIf: "price_per_carat"
+}, {
+  type: "field",
+  field: "color",
+  style: "primary"
+}, {
+  type: "field",
+  field: "clarity_short",
+  style: "primary"
+}, {
+  type: "separator"
+}, {
+  type: "group",
+  items: [{
+    type: "field",
+    field: "cut_short",
+    style: "primary"
+  }, {
+    type: "field",
+    field: "polish_short",
+    style: "primary",
+    prefix: "/"
+  }, {
+    type: "field",
+    field: "symmetry_short",
+    style: "primary",
+    prefix: "/"
+  }]
+}, {
+  type: "separator"
+}, {
+  type: "field",
+  field: "fluorescence_intensity_short",
+  style: "primary"
+}, {
+  type: "separator"
+}, {
+  type: "field",
+  field: "lab_short",
+  style: "primary"
+}, {
+  type: "separator"
+}, {
+  type: "field",
+  field: "discount_percent",
+  style: "secondary",
+  format: "percent"
+},
+// Row 2: Measurements & Pricing
+{
+  type: "lineBreak"
+}, {
+  type: "field",
+  field: "depth_percent",
+  style: "secondary",
+  prefix: "D",
+  format: "percent"
+}, {
+  type: "separator"
+}, {
+  type: "field",
+  field: "table_percent",
+  style: "secondary",
+  prefix: "T",
+  format: "percent"
+}, {
+  type: "separator"
+}, {
+  type: "field",
+  field: "measurement",
+  style: "secondary"
+}, {
+  type: "separator"
+}, {
+  type: "priceField",
+  field: "price_per_carat",
+  style: "secondary",
+  suffix: "PC"
+}, {
+  type: "priceField",
+  field: "total_sales_price",
+  style: "secondary",
+  prefix: " ="
+}];
+const renderToken = (token, item, userCurrency, index) => {
+  const TextView = token.style === "secondary" ? TextStyleTwo : TextStyleOne;
+  const currency = userCurrency || "$";
+  const theme = (0, _native.useTheme)();
+  switch (token.type) {
+    case "separator":
+      return /*#__PURE__*/_react.default.createElement(TextView, {
+        key: index,
+        theme: theme
+      }, "·");
+    case "lineBreak":
+      return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+        key: index,
+        style: styles.lineBreak
+      });
+    case "field":
+      {
+        let value = item[token.field] ?? "-";
+        if (token.format === "percent" && value !== "-") {
+          value = `${value}%`;
+        }
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+          key: index
+        }, token.prefix && /*#__PURE__*/_react.default.createElement(TextView, {
+          theme: theme
+        }, token.prefix), /*#__PURE__*/_react.default.createElement(TextView, {
+          theme: theme
+        }, value));
+      }
+    case "fieldWithSuffix":
+      {
+        const value = item[token.field] ?? "-";
+        const showSuffix = token.showCurrencyIf ? item[token.showCurrencyIf] : true;
+        return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+          key: index,
+          style: styles.rowCenter
+        }, /*#__PURE__*/_react.default.createElement(TextView, {
+          theme: theme
+        }, value), showSuffix && token.suffix && /*#__PURE__*/_react.default.createElement(TextView, {
+          theme: theme
+        }, token.suffix));
+      }
+    case "priceField":
+      {
+        const value = item[token.field];
+        return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+          key: index,
+          style: styles.rowCenter
+        }, token.prefix && /*#__PURE__*/_react.default.createElement(TextView, {
+          theme: theme
+        }, token.prefix), value && /*#__PURE__*/_react.default.createElement(TextView, {
+          theme: theme
+        }, currency), /*#__PURE__*/_react.default.createElement(TextView, {
+          theme: theme
+        }, value ?? "-"), token.suffix && /*#__PURE__*/_react.default.createElement(TextView, {
+          theme: theme
+        }, token.suffix));
+      }
+    case "group":
+      return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+        key: index,
+        style: styles.rowCenter
+      }, token.items?.map((subToken, subIndex) => renderToken(subToken, item, userCurrency, subIndex)));
+    default:
+      return null;
+  }
+};
 const ProductsListViewComponent = ({
   data,
   totalResults,
@@ -25,6 +191,7 @@ const ProductsListViewComponent = ({
   item
 }) => {
   if (!data || !data.length) return null;
+  const theme = (0, _native.useTheme)();
   const [userCurrency, setUserCurrency] = (0, _react.useState)(null);
   (0, _react.useEffect)(() => {
     const fetchCurrency = async () => {
@@ -33,118 +200,29 @@ const ProductsListViewComponent = ({
     };
     fetchCurrency();
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.wrapper
+  return /*#__PURE__*/_react.default.createElement(Wrapper, {
+    theme: theme
   }, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
     showsVerticalScrollIndicator: false,
     contentContainerStyle: styles.listContent
-  }, data.map((item, index) => /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
-    key: item.id,
-    onPress: () => onItemPress?.(item)
+  }, data.map((dataItem, index) => /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    key: dataItem.id,
+    onPress: () => onItemPress?.(dataItem)
     // @ts-ignore - hovered is available on web
     ,
     style: ({
       hovered
     }) => [styles.itemContainer, hovered && styles.itemHover]
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.left
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.serialContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.serial
-  }, index + 1, ".")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(Serial, null, index + 1, ".")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.tokens
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleOne
-  }, item.shape_long ?? "-"), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flexDirection: "row",
-      alignItems: "center"
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleTwo
-  }, item.size ?? "-"), item.price_per_carat ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleOne
-  }, "ct") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleOne
-  }, item.color ?? "-"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleOne
-  }, item.clarity_short ?? "-"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleOne
-  }, "·"), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flexDirection: "row",
-      alignItems: "center"
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleOne
-  }, item.cut_short ?? "-"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleOne
-  }, "/"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleOne
-  }, item.polish_short ?? "-"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleOne
-  }, "/"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleOne
-  }, item.symmetry_short ?? "-")), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleOne
-  }, "·"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleOne
-  }, item.fluorescence_intensity_short ?? "-"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleOne
-  }, "·"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleOne
-  }, item.lab_short ?? "-"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleOne
-  }, "·"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleTwo
-  }, item.discount_percent ? item.discount_percent + "%" : "-"), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.lineBreak
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleOne
-  }, "D"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleTwo
-  }, item.depth_percent ? item.depth_percent + "%" : "-"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleOne
-  }, "·"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleOne
-  }, "T"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleTwo
-  }, item.table_percent ? item.table_percent + "%" : "-"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleOne
-  }, "·"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleTwo
-  }, item.measurement ?? "-"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleOne
-  }, "·"), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flexDirection: "row",
-      alignItems: "center"
-    }
-  }, item.price_per_carat ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleTwo
-  }, userCurrency ? userCurrency : "$") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleTwo
-  }, item.price_per_carat ?? "-"), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleOne
-  }, "PC")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flexDirection: "row",
-      alignItems: "center"
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleOne
-  }, " ="), item.total_sales_price ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleTwo
-  }, userCurrency ? userCurrency : "$") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.textStyleTwo
-  }, item.total_sales_price ?? "-")))))))), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: styles.button,
+  }, DIAMOND_TOKENS.map((token, tokenIndex) => renderToken(token, dataItem, userCurrency, tokenIndex))))))), /*#__PURE__*/_react.default.createElement(ButtonView, {
     activeOpacity: 0.8,
     onPress: () => onViewAll(item)
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.buttonText
-  }, `View All ${totalResults} Results`), /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
+  }, /*#__PURE__*/_react.default.createElement(ButtonText, null, `View All ${totalResults} Results`), /*#__PURE__*/_react.default.createElement(ImageComponent, {
     source: {
       uri: "https://cdn.vdbapp.com/ai/chat-widget/assets/img/right.svg"
     },
@@ -152,24 +230,66 @@ const ProductsListViewComponent = ({
     style: {
       width: 20,
       height: 20,
-      tintColor: "#fff"
+      tintColor: theme["primary-cont"] || "#ffffff"
     }
   })));
 };
+const Wrapper = _native.default.View`
+  padding-horizontal: 8px;
+`;
+const Serial = _native.default.Text`
+  font-size: 13px;
+  color: ${({
+  theme
+}) => theme["core-05"] || "#020001"};
+  font-weight: 500;
+`;
+const TextStyleOne = _native.default.Text`
+  font-size: 13px;
+  color: ${({
+  theme
+}) => theme["core-06"] || "#4F4E57"};
+  font-weight: 400;
+  font-family: "Roboto";
+  font-style: normal;
+`;
+const TextStyleTwo = _native.default.Text`
+  font-size: 13px;
+  color: ${({
+  theme
+}) => theme["core-05"] || "#020001"};
+  font-weight: 500;
+  font-family: "Roboto";
+  font-style: normal;
+`;
+const ButtonView = _native.default.TouchableOpacity`
+  margin-top: 12px;
+  margin-horizontal: 12px;
+  align-self: center;
+  padding-horizontal: 16px;
+  padding-vertical: 6px;
+  background-color: ${({
+  theme
+}) => theme["primary-bg-static"] || "#292735"};
+  border-radius: 8px;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
+`;
+const ButtonText = _native.default.Text`
+  color: ${({
+  theme
+}) => theme["primary-cont"] || "#ffffff"};
+  font-size: 14px;
+  font-weight: 600;
+`;
 const styles = _reactNative.StyleSheet.create({
-  wrapper: {
-    paddingHorizontal: 8
-  },
   listContent: {
     gap: 8
   },
-  row: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingVertical: 6,
-    backgroundColor: "#fff"
-  },
   left: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -191,30 +311,9 @@ const styles = _reactNative.StyleSheet.create({
     width: "100%",
     height: 0
   },
-  serial: {
-    fontSize: 13,
-    color: "#020001",
-    fontWeight: "500"
-  },
-  textStyleOne: {
-    fontFamily: "Roboto",
-    fontSize: 13,
-    fontStyle: "normal",
-    fontWeight: "400",
-    color: "#4F4E57"
-  },
-  textStyleTwo: {
-    fontFamily: "Roboto",
-    fontSize: 13,
-    fontStyle: "normal",
-    fontWeight: "500",
-    color: "#020001"
-  },
-  price: {
-    fontSize: 13,
-    fontWeight: "500",
-    color: "#020001",
-    textAlign: "left"
+  rowCenter: {
+    flexDirection: "row",
+    alignItems: "center"
   },
   priceContainer: {
     alignItems: "flex-start",
@@ -225,26 +324,6 @@ const styles = _reactNative.StyleSheet.create({
   },
   itemHover: {
     backgroundColor: "#EDEDF2"
-  },
-  button: {
-    marginTop: 12,
-    marginHorizontal: 12,
-    alignSelf: "center",
-    paddingHorizontal: 16,
-    paddingVertical: 6,
-    backgroundColor: "#292735",
-    borderRadius: 8,
-    alignItems: "center",
-    gap: 16,
-    width: "100%",
-    flexDirection: "row",
-    justifyContent: "center",
-    alignContent: "center"
-  },
-  buttonText: {
-    color: "#fff",
-    fontSize: 14,
-    fontWeight: "600"
   }
 });
 const ProductsListView = /*#__PURE__*/(0, _react.memo)(ProductsListViewComponent);