@depict-ai/ui 2.1.17 → 2.1.18

package/ES10/index.cjs

@@ -76,7 +76,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $33eed84f447aa0c0$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447aa0c0$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.1.17";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.1.18";
 const $a68b73fd7ba0853f$var$fallback_operator = "in";
 const $a68b73fd7ba0853f$var$fallback_token = "";
 const $a68b73fd7ba0853f$var$legacy_filter_prefix = "filter_";
@@ -1041,20 +1041,32 @@ function $6c2c739b113a8ddf$export$445d8d3f5f706a40(props, container_element) {
   return [container_element, $52FdA$solidjsweb.memo(view_more_button_container), $52FdA$solidjsweb.memo(view_less_button_container), style_element];
 }
 $52FdA$solidjsweb.delegateEvents(["click"]);
+const $236a257ee52e5414$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<h2 class=recs-title>`);
 function $236a257ee52e5414$export$d41d19e89346fa2(_ref) {
   let {
     recommendations_resource_: recommendations_resource_,
     product_card_template_: product_card_template_,
     layout_options_: layout_options_,
     merchant_: merchant_,
-    market_: market_
+    market_: market_,
+    title_: title_
   } = _ref;
   const is_showing_something = $52FdA$solidjs.createMemo(() => {
     var _recommendations_reso;
     return recommendations_resource_.loading || ((_recommendations_reso = recommendations_resource_()) === null || _recommendations_reso === void 0 ? void 0 : _recommendations_reso.length);
   });
+  const title = $52FdA$solidjs.createMemo(() => title_ === null || title_ === void 0 ? void 0 : title_()); // In case getter/accessor creates elements, don't create them twice
   const num_placeholders_ = () => 20;
-  const slider = $52FdA$solidjsweb.createComponent((0, $ad8ec7729fffeb9c$export$6649caad96ef8870), {
+  const slider = [$52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      const _el$ = $52FdA$solidjsweb.getNextElement($236a257ee52e5414$var$_tmpl$);
+      $52FdA$solidjsweb.insert(_el$, title);
+      return _el$;
+    }
+  }), $52FdA$solidjsweb.createComponent((0, $ad8ec7729fffeb9c$export$6649caad96ef8870), {
     arrow_height_: 25,
     arrow_width_: 12.5,
     disable_fading_: true,
@@ -1093,7 +1105,7 @@ function $236a257ee52e5414$export$d41d19e89346fa2(_ref) {
         }
       });
     }
-  });
+  })];
   return $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
     get when() {
       return is_showing_something();
@@ -1164,6 +1176,7 @@ function $2badc30d7c6610e1$export$9574e176201e5e8d(props) {
             recommendations_resource_: recommendations_resource_,
             market_: () => props.market,
             merchant_: () => props.merchant,
+            title_: () => props.title,
             layout_options_: $52FdA$solidjs.createMemo(() => ({
               cols_at_size: $5401a6698b0c0658$export$6daf8749b65a1b77(props.cols_at_size),
               ...grid_spacing_override()
@@ -1175,7 +1188,8 @@ function $2badc30d7c6610e1$export$9574e176201e5e8d(props) {
     })();
   }, "RecommendationSlider failed");
 }
-const $2c920813c92d6987$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=recommendation-grid><!$><!/><!$><!/>`);
+const $2c920813c92d6987$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<h2 class=recs-title>`),
+  $2c920813c92d6987$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=recommendation-grid><!$><!/><!$><!/>`);
 function $2c920813c92d6987$export$7da560f849543dff(_ref) {
   let {
     recommendations_resource_: recommendations_resource_,
@@ -1183,21 +1197,32 @@ function $2c920813c92d6987$export$7da560f849543dff(_ref) {
     layout_options_: layout_options_,
     merchant_: merchant_,
     market_: market_,
-    rows_object_: rows_object_
+    rows_object_: rows_object_,
+    title_: title_
   } = _ref;
   const is_showing_something = $52FdA$solidjs.createMemo(() => {
     var _recommendations_reso;
     return recommendations_resource_.loading || ((_recommendations_reso = recommendations_resource_()) === null || _recommendations_reso === void 0 ? void 0 : _recommendations_reso.length);
   });
+  const title = $52FdA$solidjs.createMemo(() => title_ === null || title_ === void 0 ? void 0 : title_()); // In case getter/accessor creates elements, don't create them twice
   const num_placeholders_ = () => 20;
-  const elements = (() => {
-    const _el$ = $52FdA$solidjsweb.getNextElement($2c920813c92d6987$var$_tmpl$),
-      _el$2 = _el$.firstChild,
-      [_el$3, _co$] = $52FdA$solidjsweb.getNextMarker(_el$2.nextSibling),
-      _el$4 = _el$3.nextSibling,
-      [_el$5, _co$2] = $52FdA$solidjsweb.getNextMarker(_el$4.nextSibling);
-    $52FdA$solidjsweb.insert(_el$, (0, $8edd3cf30d1fd8b4$export$a2cc176055f8f08), _el$3, _co$);
-    $52FdA$solidjsweb.insert(_el$, $52FdA$solidjsweb.createComponent((0, $6c2c739b113a8ddf$export$d21e32dfedac04be), $52FdA$solidjsweb.mergeProps({
+  const elements = [$52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      const _el$ = $52FdA$solidjsweb.getNextElement($2c920813c92d6987$var$_tmpl$);
+      $52FdA$solidjsweb.insert(_el$, title);
+      return _el$;
+    }
+  }), (() => {
+    const _el$2 = $52FdA$solidjsweb.getNextElement($2c920813c92d6987$var$_tmpl$2),
+      _el$3 = _el$2.firstChild,
+      [_el$4, _co$] = $52FdA$solidjsweb.getNextMarker(_el$3.nextSibling),
+      _el$5 = _el$4.nextSibling,
+      [_el$6, _co$2] = $52FdA$solidjsweb.getNextMarker(_el$5.nextSibling);
+    $52FdA$solidjsweb.insert(_el$2, (0, $8edd3cf30d1fd8b4$export$a2cc176055f8f08), _el$4, _co$);
+    $52FdA$solidjsweb.insert(_el$2, $52FdA$solidjsweb.createComponent((0, $6c2c739b113a8ddf$export$d21e32dfedac04be), $52FdA$solidjsweb.mergeProps({
       get rows() {
         return rows_object_();
       },
@@ -1228,9 +1253,9 @@ function $2c920813c92d6987$export$7da560f849543dff(_ref) {
           }
         });
       }
-    })), _el$5, _co$2);
-    return _el$;
-  })();
+    })), _el$6, _co$2);
+    return _el$2;
+  })()];
   return $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
     get when() {
       return is_showing_something();
@@ -1289,6 +1314,7 @@ function $41227f10ad680afd$export$9756467d34d91cdb(props) {
             recommendations_resource_: recommendations_resource_,
             market_: () => props.market,
             merchant_: () => props.merchant,
+            title_: () => props.title,
             layout_options_: $52FdA$solidjs.createMemo(() => ({
               cols_at_size: $5401a6698b0c0658$export$6daf8749b65a1b77(props.cols_at_size),
               ...grid_spacing_override()

package/ES10/index.d.ts

@@ -7,7 +7,7 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequestV2 } from "@depict-ai/types/api/ProductListingRequestV2";
-export const version = "2.1.17";
+export const version = "2.1.18";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -242,6 +242,7 @@ type RecommendationSliderBaseProps<T extends Display> = {
   grid_spacing: SDKGridSpacing;
   cols_at_size: SDKColsAtSize;
   recommendations: Promise<T[]>;
+  title?: JSX.Element;
 };
 /**
  * Render a grid with provided recommendations. displayTransformers will not be applied for this since you yourself provide the displays. Options are reactive.
@@ -260,6 +261,7 @@ export function RecommendationSlider<T extends Display>(props: {
 type RecommendationGridBaseProps<T extends Display> = {
   grid_spacing: SDKGridSpacing;
   cols_at_size: SDKColsAtSize;
+  title?: JSX.Element;
   recommendations: Promise<T[]>;
   view_more_button?: {
     text: string;

package/ES10/index.js

@@ -9,7 +9,7 @@ import { createStore as $8tj43$createStore, reconcile as $8tj43$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "2.1.17";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "2.1.18";
 const $2855bffe06ef7a03$var$fallback_operator = "in";
 const $2855bffe06ef7a03$var$fallback_token = "";
 const $2855bffe06ef7a03$var$legacy_filter_prefix = "filter_";
@@ -974,20 +974,32 @@ function $63f1f8dbcd07d3b0$export$445d8d3f5f706a40(props, container_element) {
   return [container_element, $8tj43$memo(view_more_button_container), $8tj43$memo(view_less_button_container), style_element];
 }
 $8tj43$delegateEvents(["click"]);
+const $39ddb986053fb759$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<h2 class=recs-title>`);
 function $39ddb986053fb759$export$d41d19e89346fa2(_ref) {
   let {
     recommendations_resource_: recommendations_resource_,
     product_card_template_: product_card_template_,
     layout_options_: layout_options_,
     merchant_: merchant_,
-    market_: market_
+    market_: market_,
+    title_: title_
   } = _ref;
   const is_showing_something = $8tj43$createMemo(() => {
     var _recommendations_reso;
     return recommendations_resource_.loading || ((_recommendations_reso = recommendations_resource_()) === null || _recommendations_reso === void 0 ? void 0 : _recommendations_reso.length);
   });
+  const title = $8tj43$createMemo(() => title_ === null || title_ === void 0 ? void 0 : title_()); // In case getter/accessor creates elements, don't create them twice
   const num_placeholders_ = () => 20;
-  const slider = $8tj43$createComponent((0, $002f09d00aac50b2$export$6649caad96ef8870), {
+  const slider = [$8tj43$createComponent((0, $8tj43$Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      const _el$ = $8tj43$getNextElement($39ddb986053fb759$var$_tmpl$);
+      $8tj43$insert(_el$, title);
+      return _el$;
+    }
+  }), $8tj43$createComponent((0, $002f09d00aac50b2$export$6649caad96ef8870), {
     arrow_height_: 25,
     arrow_width_: 12.5,
     disable_fading_: true,
@@ -1026,7 +1038,7 @@ function $39ddb986053fb759$export$d41d19e89346fa2(_ref) {
         }
       });
     }
-  });
+  })];
   return $8tj43$createComponent((0, $8tj43$Show), {
     get when() {
       return is_showing_something();
@@ -1097,6 +1109,7 @@ function $d5d7e58c5c9d8db0$export$9574e176201e5e8d(props) {
             recommendations_resource_: recommendations_resource_,
             market_: () => props.market,
             merchant_: () => props.merchant,
+            title_: () => props.title,
             layout_options_: $8tj43$createMemo(() => ({
               cols_at_size: $a9c7ba6087881ac2$export$6daf8749b65a1b77(props.cols_at_size),
               ...grid_spacing_override()
@@ -1108,7 +1121,8 @@ function $d5d7e58c5c9d8db0$export$9574e176201e5e8d(props) {
     })();
   }, "RecommendationSlider failed");
 }
-const $e3efeb558d952696$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class=recommendation-grid><!$><!/><!$><!/>`);
+const $e3efeb558d952696$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<h2 class=recs-title>`),
+  $e3efeb558d952696$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<div class=recommendation-grid><!$><!/><!$><!/>`);
 function $e3efeb558d952696$export$7da560f849543dff(_ref) {
   let {
     recommendations_resource_: recommendations_resource_,
@@ -1116,21 +1130,32 @@ function $e3efeb558d952696$export$7da560f849543dff(_ref) {
     layout_options_: layout_options_,
     merchant_: merchant_,
     market_: market_,
-    rows_object_: rows_object_
+    rows_object_: rows_object_,
+    title_: title_
   } = _ref;
   const is_showing_something = $8tj43$createMemo(() => {
     var _recommendations_reso;
     return recommendations_resource_.loading || ((_recommendations_reso = recommendations_resource_()) === null || _recommendations_reso === void 0 ? void 0 : _recommendations_reso.length);
   });
+  const title = $8tj43$createMemo(() => title_ === null || title_ === void 0 ? void 0 : title_()); // In case getter/accessor creates elements, don't create them twice
   const num_placeholders_ = () => 20;
-  const elements = (() => {
-    const _el$ = $8tj43$getNextElement($e3efeb558d952696$var$_tmpl$),
-      _el$2 = _el$.firstChild,
-      [_el$3, _co$] = $8tj43$getNextMarker(_el$2.nextSibling),
-      _el$4 = _el$3.nextSibling,
-      [_el$5, _co$2] = $8tj43$getNextMarker(_el$4.nextSibling);
-    $8tj43$insert(_el$, (0, $ca55612a53dbbdd2$export$a2cc176055f8f08), _el$3, _co$);
-    $8tj43$insert(_el$, $8tj43$createComponent((0, $63f1f8dbcd07d3b0$export$d21e32dfedac04be), $8tj43$mergeProps1({
+  const elements = [$8tj43$createComponent((0, $8tj43$Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      const _el$ = $8tj43$getNextElement($e3efeb558d952696$var$_tmpl$);
+      $8tj43$insert(_el$, title);
+      return _el$;
+    }
+  }), (() => {
+    const _el$2 = $8tj43$getNextElement($e3efeb558d952696$var$_tmpl$2),
+      _el$3 = _el$2.firstChild,
+      [_el$4, _co$] = $8tj43$getNextMarker(_el$3.nextSibling),
+      _el$5 = _el$4.nextSibling,
+      [_el$6, _co$2] = $8tj43$getNextMarker(_el$5.nextSibling);
+    $8tj43$insert(_el$2, (0, $ca55612a53dbbdd2$export$a2cc176055f8f08), _el$4, _co$);
+    $8tj43$insert(_el$2, $8tj43$createComponent((0, $63f1f8dbcd07d3b0$export$d21e32dfedac04be), $8tj43$mergeProps1({
       get rows() {
         return rows_object_();
       },
@@ -1161,9 +1186,9 @@ function $e3efeb558d952696$export$7da560f849543dff(_ref) {
           }
         });
       }
-    })), _el$5, _co$2);
-    return _el$;
-  })();
+    })), _el$6, _co$2);
+    return _el$2;
+  })()];
   return $8tj43$createComponent((0, $8tj43$Show), {
     get when() {
       return is_showing_something();
@@ -1222,6 +1247,7 @@ function $b432b11321ad4c97$export$9756467d34d91cdb(props) {
             recommendations_resource_: recommendations_resource_,
             market_: () => props.market,
             merchant_: () => props.merchant,
+            title_: () => props.title,
             layout_options_: $8tj43$createMemo(() => ({
               cols_at_size: $a9c7ba6087881ac2$export$6daf8749b65a1b77(props.cols_at_size),
               ...grid_spacing_override()

package/latest/index.cjs

@@ -70,7 +70,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.17";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.18";
 const $1ab22f2cd39b3061$var$fallback_operator = "in";
 const $1ab22f2cd39b3061$var$fallback_token = "";
 const $1ab22f2cd39b3061$var$legacy_filter_prefix = "filter_";
@@ -982,16 +982,28 @@ function $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element, ins
   return [container_element, $gVhhF$solidjsweb.memo(view_more_button_container), $gVhhF$solidjsweb.memo(view_less_button_container), style_element];
 }
 $gVhhF$solidjsweb.delegateEvents(["click"]);
+const $363ce4d1d71041aa$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<h2 class=recs-title>`);
 function $363ce4d1d71041aa$export$d41d19e89346fa2({
   recommendations_resource_: recommendations_resource_,
   product_card_template_: product_card_template_,
   layout_options_: layout_options_,
   merchant_: merchant_,
-  market_: market_
+  market_: market_,
+  title_: title_
 }) {
   const is_showing_something = $gVhhF$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
+  const title = $gVhhF$solidjs.createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
   const num_placeholders_ = () => 20;
-  const slider = $gVhhF$solidjsweb.createComponent((0, $a0e53f99354809d9$export$6649caad96ef8870), {
+  const slider = [$gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      const _el$ = $gVhhF$solidjsweb.getNextElement($363ce4d1d71041aa$var$_tmpl$);
+      $gVhhF$solidjsweb.insert(_el$, title);
+      return _el$;
+    }
+  }), $gVhhF$solidjsweb.createComponent((0, $a0e53f99354809d9$export$6649caad96ef8870), {
     arrow_height_: 25,
     arrow_width_: 12.5,
     disable_fading_: true,
@@ -1030,7 +1042,7 @@ function $363ce4d1d71041aa$export$d41d19e89346fa2({
         }
       });
     }
-  });
+  })];
   return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
     get when() {
       return is_showing_something();
@@ -1098,6 +1110,7 @@ function $72f96c4782db0b1b$export$9574e176201e5e8d(props) {
             recommendations_resource_: recommendations_resource_,
             market_: () => props.market,
             merchant_: () => props.merchant,
+            title_: () => props.title,
             layout_options_: $gVhhF$solidjs.createMemo(() => ({
               cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.cols_at_size),
               ...grid_spacing_override()
@@ -1109,25 +1122,37 @@ function $72f96c4782db0b1b$export$9574e176201e5e8d(props) {
     })();
   }, "RecommendationSlider failed");
 }
-const $b8e79813f4f7ebe4$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=recommendation-grid><!$><!/><!$><!/>`);
+const $b8e79813f4f7ebe4$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<h2 class=recs-title>`),
+  $b8e79813f4f7ebe4$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=recommendation-grid><!$><!/><!$><!/>`);
 function $b8e79813f4f7ebe4$export$7da560f849543dff({
   recommendations_resource_: recommendations_resource_,
   product_card_template_: product_card_template_,
   layout_options_: layout_options_,
   merchant_: merchant_,
   market_: market_,
-  rows_object_: rows_object_
+  rows_object_: rows_object_,
+  title_: title_
 }) {
   const is_showing_something = $gVhhF$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
+  const title = $gVhhF$solidjs.createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
   const num_placeholders_ = () => 20;
-  const elements = (() => {
-    const _el$ = $gVhhF$solidjsweb.getNextElement($b8e79813f4f7ebe4$var$_tmpl$),
-      _el$2 = _el$.firstChild,
-      [_el$3, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$2.nextSibling),
-      _el$4 = _el$3.nextSibling,
-      [_el$5, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$4.nextSibling);
-    $gVhhF$solidjsweb.insert(_el$, (0, $fc23d7668ae0011d$export$a2cc176055f8f08), _el$3, _co$);
-    $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $gVhhF$solidjsweb.mergeProps({
+  const elements = [$gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      const _el$ = $gVhhF$solidjsweb.getNextElement($b8e79813f4f7ebe4$var$_tmpl$);
+      $gVhhF$solidjsweb.insert(_el$, title);
+      return _el$;
+    }
+  }), (() => {
+    const _el$2 = $gVhhF$solidjsweb.getNextElement($b8e79813f4f7ebe4$var$_tmpl$2),
+      _el$3 = _el$2.firstChild,
+      [_el$4, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$3.nextSibling),
+      _el$5 = _el$4.nextSibling,
+      [_el$6, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$5.nextSibling);
+    $gVhhF$solidjsweb.insert(_el$2, (0, $fc23d7668ae0011d$export$a2cc176055f8f08), _el$4, _co$);
+    $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $gVhhF$solidjsweb.mergeProps({
       get rows() {
         return rows_object_();
       },
@@ -1158,9 +1183,9 @@ function $b8e79813f4f7ebe4$export$7da560f849543dff({
           }
         });
       }
-    })), _el$5, _co$2);
-    return _el$;
-  })();
+    })), _el$6, _co$2);
+    return _el$2;
+  })()];
   return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
     get when() {
       return is_showing_something();
@@ -1216,6 +1241,7 @@ function $1f8dbf7e28b3eff2$export$9756467d34d91cdb(props) {
             recommendations_resource_: recommendations_resource_,
             market_: () => props.market,
             merchant_: () => props.merchant,
+            title_: () => props.title,
             layout_options_: $gVhhF$solidjs.createMemo(() => ({
               cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.cols_at_size),
               ...grid_spacing_override()

package/latest/index.d.ts

@@ -7,7 +7,7 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequestV2 } from "@depict-ai/types/api/ProductListingRequestV2";
-export const version = "2.1.17";
+export const version = "2.1.18";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -242,6 +242,7 @@ type RecommendationSliderBaseProps<T extends Display> = {
   grid_spacing: SDKGridSpacing;
   cols_at_size: SDKColsAtSize;
   recommendations: Promise<T[]>;
+  title?: JSX.Element;
 };
 /**
  * Render a grid with provided recommendations. displayTransformers will not be applied for this since you yourself provide the displays. Options are reactive.
@@ -260,6 +261,7 @@ export function RecommendationSlider<T extends Display>(props: {
 type RecommendationGridBaseProps<T extends Display> = {
   grid_spacing: SDKGridSpacing;
   cols_at_size: SDKColsAtSize;
+  title?: JSX.Element;
   recommendations: Promise<T[]>;
   view_more_button?: {
     text: string;

package/latest/index.js

@@ -6,7 +6,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "2.1.17";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.1.18";
 const $4147651646da990a$var$fallback_operator = "in";
 const $4147651646da990a$var$fallback_token = "";
 const $4147651646da990a$var$legacy_filter_prefix = "filter_";
@@ -918,16 +918,28 @@ function $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, container_element, ins
   return [container_element, $9HbP8$memo(view_more_button_container), $9HbP8$memo(view_less_button_container), style_element];
 }
 $9HbP8$delegateEvents(["click"]);
+const $c4492d24952ed731$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<h2 class=recs-title>`);
 function $c4492d24952ed731$export$d41d19e89346fa2({
   recommendations_resource_: recommendations_resource_,
   product_card_template_: product_card_template_,
   layout_options_: layout_options_,
   merchant_: merchant_,
-  market_: market_
+  market_: market_,
+  title_: title_
 }) {
   const is_showing_something = $9HbP8$createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
+  const title = $9HbP8$createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
   const num_placeholders_ = () => 20;
-  const slider = $9HbP8$createComponent((0, $f32e14878e75af51$export$6649caad96ef8870), {
+  const slider = [$9HbP8$createComponent((0, $9HbP8$Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      const _el$ = $9HbP8$getNextElement($c4492d24952ed731$var$_tmpl$);
+      $9HbP8$insert(_el$, title);
+      return _el$;
+    }
+  }), $9HbP8$createComponent((0, $f32e14878e75af51$export$6649caad96ef8870), {
     arrow_height_: 25,
     arrow_width_: 12.5,
     disable_fading_: true,
@@ -966,7 +978,7 @@ function $c4492d24952ed731$export$d41d19e89346fa2({
         }
       });
     }
-  });
+  })];
   return $9HbP8$createComponent((0, $9HbP8$Show), {
     get when() {
       return is_showing_something();
@@ -1034,6 +1046,7 @@ function $ee116da074deb002$export$9574e176201e5e8d(props) {
             recommendations_resource_: recommendations_resource_,
             market_: () => props.market,
             merchant_: () => props.merchant,
+            title_: () => props.title,
             layout_options_: $9HbP8$createMemo(() => ({
               cols_at_size: $b5cccc8ee7d24677$export$6daf8749b65a1b77(props.cols_at_size),
               ...grid_spacing_override()
@@ -1045,25 +1058,37 @@ function $ee116da074deb002$export$9574e176201e5e8d(props) {
     })();
   }, "RecommendationSlider failed");
 }
-const $3da8afe3ed57cf34$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=recommendation-grid><!$><!/><!$><!/>`);
+const $3da8afe3ed57cf34$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<h2 class=recs-title>`),
+  $3da8afe3ed57cf34$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<div class=recommendation-grid><!$><!/><!$><!/>`);
 function $3da8afe3ed57cf34$export$7da560f849543dff({
   recommendations_resource_: recommendations_resource_,
   product_card_template_: product_card_template_,
   layout_options_: layout_options_,
   merchant_: merchant_,
   market_: market_,
-  rows_object_: rows_object_
+  rows_object_: rows_object_,
+  title_: title_
 }) {
   const is_showing_something = $9HbP8$createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
+  const title = $9HbP8$createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
   const num_placeholders_ = () => 20;
-  const elements = (() => {
-    const _el$ = $9HbP8$getNextElement($3da8afe3ed57cf34$var$_tmpl$),
-      _el$2 = _el$.firstChild,
-      [_el$3, _co$] = $9HbP8$getNextMarker(_el$2.nextSibling),
-      _el$4 = _el$3.nextSibling,
-      [_el$5, _co$2] = $9HbP8$getNextMarker(_el$4.nextSibling);
-    $9HbP8$insert(_el$, (0, $a458486f22b22f63$export$a2cc176055f8f08), _el$3, _co$);
-    $9HbP8$insert(_el$, $9HbP8$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $9HbP8$mergeProps1({
+  const elements = [$9HbP8$createComponent((0, $9HbP8$Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      const _el$ = $9HbP8$getNextElement($3da8afe3ed57cf34$var$_tmpl$);
+      $9HbP8$insert(_el$, title);
+      return _el$;
+    }
+  }), (() => {
+    const _el$2 = $9HbP8$getNextElement($3da8afe3ed57cf34$var$_tmpl$2),
+      _el$3 = _el$2.firstChild,
+      [_el$4, _co$] = $9HbP8$getNextMarker(_el$3.nextSibling),
+      _el$5 = _el$4.nextSibling,
+      [_el$6, _co$2] = $9HbP8$getNextMarker(_el$5.nextSibling);
+    $9HbP8$insert(_el$2, (0, $a458486f22b22f63$export$a2cc176055f8f08), _el$4, _co$);
+    $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $9HbP8$mergeProps1({
       get rows() {
         return rows_object_();
       },
@@ -1094,9 +1119,9 @@ function $3da8afe3ed57cf34$export$7da560f849543dff({
           }
         });
       }
-    })), _el$5, _co$2);
-    return _el$;
-  })();
+    })), _el$6, _co$2);
+    return _el$2;
+  })()];
   return $9HbP8$createComponent((0, $9HbP8$Show), {
     get when() {
       return is_showing_something();
@@ -1152,6 +1177,7 @@ function $9ea5383493360761$export$9756467d34d91cdb(props) {
             recommendations_resource_: recommendations_resource_,
             market_: () => props.market,
             merchant_: () => props.merchant,
+            title_: () => props.title,
             layout_options_: $9HbP8$createMemo(() => ({
               cols_at_size: $b5cccc8ee7d24677$export$6daf8749b65a1b77(props.cols_at_size),
               ...grid_spacing_override()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "2.1.17",
+  "version": "2.1.18",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",
@@ -236,7 +236,7 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^1.2.12",
+    "@depict-ai/plp-styling": "^1.2.14",
     "@depict-ai/types": "^1.0.39",
     "@depict-ai/utilishared": "^1.0.48",
     "solid-js": "^1.8.1"

package/server/ES10/index.cjs

@@ -76,7 +76,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $33eed84f447aa0c0$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447aa0c0$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.1.17";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.1.18";
 const $a68b73fd7ba0853f$var$fallback_operator = "in";
 const $a68b73fd7ba0853f$var$fallback_token = "";
 const $a68b73fd7ba0853f$var$legacy_filter_prefix = "filter_";
@@ -970,20 +970,30 @@ function $6c2c739b113a8ddf$export$445d8d3f5f706a40(props, container_element) {
   if (insert_after_container) container_element.after(style_element);
   return [container_element, view_more_button_container(), view_less_button_container(), style_element];
 }
+const $236a257ee52e5414$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"];
 function $236a257ee52e5414$export$d41d19e89346fa2(_ref) {
   let {
     recommendations_resource_: recommendations_resource_,
     product_card_template_: product_card_template_,
     layout_options_: layout_options_,
     merchant_: merchant_,
-    market_: market_
+    market_: market_,
+    title_: title_
   } = _ref;
   const is_showing_something = $3hooq$solidjs.createMemo(() => {
     var _recommendations_reso;
     return recommendations_resource_.loading || ((_recommendations_reso = recommendations_resource_()) === null || _recommendations_reso === void 0 ? void 0 : _recommendations_reso.length);
   });
+  const title = $3hooq$solidjs.createMemo(() => title_ === null || title_ === void 0 ? void 0 : title_()); // In case getter/accessor creates elements, don't create them twice
   const num_placeholders_ = () => 20;
-  const slider = $3hooq$solidjsweb.createComponent((0, $ad8ec7729fffeb9c$export$6649caad96ef8870), {
+  const slider = [$3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      return $3hooq$solidjsweb.ssr($236a257ee52e5414$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape(title()));
+    }
+  }), $3hooq$solidjsweb.createComponent((0, $ad8ec7729fffeb9c$export$6649caad96ef8870), {
     arrow_height_: 25,
     arrow_width_: 12.5,
     disable_fading_: true,
@@ -1022,7 +1032,7 @@ function $236a257ee52e5414$export$d41d19e89346fa2(_ref) {
         }
       });
     }
-  });
+  })];
   return $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
     get when() {
       return is_showing_something();
@@ -1091,6 +1101,7 @@ function $2badc30d7c6610e1$export$9574e176201e5e8d(props) {
           recommendations_resource_: recommendations_resource_,
           market_: () => props.market,
           merchant_: () => props.merchant,
+          title_: () => props.title,
           layout_options_: $3hooq$solidjs.createMemo(() => ({
             cols_at_size: $5401a6698b0c0658$export$6daf8749b65a1b77(props.cols_at_size),
             ...grid_spacing_override()
@@ -1100,7 +1111,8 @@ function $2badc30d7c6610e1$export$9574e176201e5e8d(props) {
     })));
   }, "RecommendationSlider failed");
 }
-const $2c920813c92d6987$var$_tmpl$ = ["<div", ' class="recommendation-grid"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
+const $2c920813c92d6987$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"],
+  $2c920813c92d6987$var$_tmpl$2 = ["<div", ' class="recommendation-grid"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
 function $2c920813c92d6987$export$7da560f849543dff(_ref) {
   let {
     recommendations_resource_: recommendations_resource_,
@@ -1108,14 +1120,23 @@ function $2c920813c92d6987$export$7da560f849543dff(_ref) {
     layout_options_: layout_options_,
     merchant_: merchant_,
     market_: market_,
-    rows_object_: rows_object_
+    rows_object_: rows_object_,
+    title_: title_
   } = _ref;
   const is_showing_something = $3hooq$solidjs.createMemo(() => {
     var _recommendations_reso;
     return recommendations_resource_.loading || ((_recommendations_reso = recommendations_resource_()) === null || _recommendations_reso === void 0 ? void 0 : _recommendations_reso.length);
   });
+  const title = $3hooq$solidjs.createMemo(() => title_ === null || title_ === void 0 ? void 0 : title_()); // In case getter/accessor creates elements, don't create them twice
   const num_placeholders_ = () => 20;
-  const elements = $3hooq$solidjsweb.ssr($2c920813c92d6987$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($8edd3cf30d1fd8b4$export$a2cc176055f8f08()), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $6c2c739b113a8ddf$export$d21e32dfedac04be), $3hooq$solidjsweb.mergeProps({
+  const elements = [$3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      return $3hooq$solidjsweb.ssr($2c920813c92d6987$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape(title()));
+    }
+  }), $3hooq$solidjsweb.ssr($2c920813c92d6987$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($8edd3cf30d1fd8b4$export$a2cc176055f8f08()), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $6c2c739b113a8ddf$export$d21e32dfedac04be), $3hooq$solidjsweb.mergeProps({
     get rows() {
       return rows_object_();
     },
@@ -1146,7 +1167,7 @@ function $2c920813c92d6987$export$7da560f849543dff(_ref) {
         }
       });
     }
-  }))));
+  }))))];
   return $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
     get when() {
       return is_showing_something();
@@ -1199,6 +1220,7 @@ function $41227f10ad680afd$export$9756467d34d91cdb(props) {
           recommendations_resource_: recommendations_resource_,
           market_: () => props.market,
           merchant_: () => props.merchant,
+          title_: () => props.title,
           layout_options_: $3hooq$solidjs.createMemo(() => ({
             cols_at_size: $5401a6698b0c0658$export$6daf8749b65a1b77(props.cols_at_size),
             ...grid_spacing_override()

package/server/ES10/index.d.ts

@@ -7,7 +7,7 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequestV2 } from "@depict-ai/types/api/ProductListingRequestV2";
-export const version = "2.1.17";
+export const version = "2.1.18";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -242,6 +242,7 @@ type RecommendationSliderBaseProps<T extends Display> = {
   grid_spacing: SDKGridSpacing;
   cols_at_size: SDKColsAtSize;
   recommendations: Promise<T[]>;
+  title?: JSX.Element;
 };
 /**
  * Render a grid with provided recommendations. displayTransformers will not be applied for this since you yourself provide the displays. Options are reactive.
@@ -260,6 +261,7 @@ export function RecommendationSlider<T extends Display>(props: {
 type RecommendationGridBaseProps<T extends Display> = {
   grid_spacing: SDKGridSpacing;
   cols_at_size: SDKColsAtSize;
+  title?: JSX.Element;
   recommendations: Promise<T[]>;
   view_more_button?: {
     text: string;

package/server/ES10/index.js

@@ -9,7 +9,7 @@ import { createStore as $b8hua$createStore, reconcile as $b8hua$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "2.1.17";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "2.1.18";
 const $2855bffe06ef7a03$var$fallback_operator = "in";
 const $2855bffe06ef7a03$var$fallback_token = "";
 const $2855bffe06ef7a03$var$legacy_filter_prefix = "filter_";
@@ -903,20 +903,30 @@ function $63f1f8dbcd07d3b0$export$445d8d3f5f706a40(props, container_element) {
   if (insert_after_container) container_element.after(style_element);
   return [container_element, view_more_button_container(), view_less_button_container(), style_element];
 }
+const $39ddb986053fb759$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"];
 function $39ddb986053fb759$export$d41d19e89346fa2(_ref) {
   let {
     recommendations_resource_: recommendations_resource_,
     product_card_template_: product_card_template_,
     layout_options_: layout_options_,
     merchant_: merchant_,
-    market_: market_
+    market_: market_,
+    title_: title_
   } = _ref;
   const is_showing_something = $b8hua$createMemo(() => {
     var _recommendations_reso;
     return recommendations_resource_.loading || ((_recommendations_reso = recommendations_resource_()) === null || _recommendations_reso === void 0 ? void 0 : _recommendations_reso.length);
   });
+  const title = $b8hua$createMemo(() => title_ === null || title_ === void 0 ? void 0 : title_()); // In case getter/accessor creates elements, don't create them twice
   const num_placeholders_ = () => 20;
-  const slider = $b8hua$createComponent((0, $002f09d00aac50b2$export$6649caad96ef8870), {
+  const slider = [$b8hua$createComponent((0, $b8hua$Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      return $b8hua$ssr($39ddb986053fb759$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$escape(title()));
+    }
+  }), $b8hua$createComponent((0, $002f09d00aac50b2$export$6649caad96ef8870), {
     arrow_height_: 25,
     arrow_width_: 12.5,
     disable_fading_: true,
@@ -955,7 +965,7 @@ function $39ddb986053fb759$export$d41d19e89346fa2(_ref) {
         }
       });
     }
-  });
+  })];
   return $b8hua$createComponent((0, $b8hua$Show), {
     get when() {
       return is_showing_something();
@@ -1024,6 +1034,7 @@ function $d5d7e58c5c9d8db0$export$9574e176201e5e8d(props) {
           recommendations_resource_: recommendations_resource_,
           market_: () => props.market,
           merchant_: () => props.merchant,
+          title_: () => props.title,
           layout_options_: $b8hua$createMemo(() => ({
             cols_at_size: $a9c7ba6087881ac2$export$6daf8749b65a1b77(props.cols_at_size),
             ...grid_spacing_override()
@@ -1033,7 +1044,8 @@ function $d5d7e58c5c9d8db0$export$9574e176201e5e8d(props) {
     })));
   }, "RecommendationSlider failed");
 }
-const $e3efeb558d952696$var$_tmpl$ = ["<div", ' class="recommendation-grid"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
+const $e3efeb558d952696$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"],
+  $e3efeb558d952696$var$_tmpl$2 = ["<div", ' class="recommendation-grid"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
 function $e3efeb558d952696$export$7da560f849543dff(_ref) {
   let {
     recommendations_resource_: recommendations_resource_,
@@ -1041,14 +1053,23 @@ function $e3efeb558d952696$export$7da560f849543dff(_ref) {
     layout_options_: layout_options_,
     merchant_: merchant_,
     market_: market_,
-    rows_object_: rows_object_
+    rows_object_: rows_object_,
+    title_: title_
   } = _ref;
   const is_showing_something = $b8hua$createMemo(() => {
     var _recommendations_reso;
     return recommendations_resource_.loading || ((_recommendations_reso = recommendations_resource_()) === null || _recommendations_reso === void 0 ? void 0 : _recommendations_reso.length);
   });
+  const title = $b8hua$createMemo(() => title_ === null || title_ === void 0 ? void 0 : title_()); // In case getter/accessor creates elements, don't create them twice
   const num_placeholders_ = () => 20;
-  const elements = $b8hua$ssr($e3efeb558d952696$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$escape($ca55612a53dbbdd2$export$a2cc176055f8f08()), $b8hua$escape($b8hua$createComponent((0, $63f1f8dbcd07d3b0$export$d21e32dfedac04be), $b8hua$mergeProps1({
+  const elements = [$b8hua$createComponent((0, $b8hua$Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      return $b8hua$ssr($e3efeb558d952696$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$escape(title()));
+    }
+  }), $b8hua$ssr($e3efeb558d952696$var$_tmpl$2, $b8hua$ssrHydrationKey(), $b8hua$escape($ca55612a53dbbdd2$export$a2cc176055f8f08()), $b8hua$escape($b8hua$createComponent((0, $63f1f8dbcd07d3b0$export$d21e32dfedac04be), $b8hua$mergeProps1({
     get rows() {
       return rows_object_();
     },
@@ -1079,7 +1100,7 @@ function $e3efeb558d952696$export$7da560f849543dff(_ref) {
         }
       });
     }
-  }))));
+  }))))];
   return $b8hua$createComponent((0, $b8hua$Show), {
     get when() {
       return is_showing_something();
@@ -1132,6 +1153,7 @@ function $b432b11321ad4c97$export$9756467d34d91cdb(props) {
           recommendations_resource_: recommendations_resource_,
           market_: () => props.market,
           merchant_: () => props.merchant,
+          title_: () => props.title,
           layout_options_: $b8hua$createMemo(() => ({
             cols_at_size: $a9c7ba6087881ac2$export$6daf8749b65a1b77(props.cols_at_size),
             ...grid_spacing_override()

package/server/latest/index.cjs

@@ -70,7 +70,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.17";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.18";
 const $1ab22f2cd39b3061$var$fallback_operator = "in";
 const $1ab22f2cd39b3061$var$fallback_token = "";
 const $1ab22f2cd39b3061$var$legacy_filter_prefix = "filter_";
@@ -922,16 +922,26 @@ function $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element, ins
   if (insert_after_container) container_element.after(style_element);
   return [container_element, view_more_button_container(), view_less_button_container(), style_element];
 }
+const $363ce4d1d71041aa$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"];
 function $363ce4d1d71041aa$export$d41d19e89346fa2({
   recommendations_resource_: recommendations_resource_,
   product_card_template_: product_card_template_,
   layout_options_: layout_options_,
   merchant_: merchant_,
-  market_: market_
+  market_: market_,
+  title_: title_
 }) {
   const is_showing_something = $5vyXB$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
+  const title = $5vyXB$solidjs.createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
   const num_placeholders_ = () => 20;
-  const slider = $5vyXB$solidjsweb.createComponent((0, $a0e53f99354809d9$export$6649caad96ef8870), {
+  const slider = [$5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      return $5vyXB$solidjsweb.ssr($363ce4d1d71041aa$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(title()));
+    }
+  }), $5vyXB$solidjsweb.createComponent((0, $a0e53f99354809d9$export$6649caad96ef8870), {
     arrow_height_: 25,
     arrow_width_: 12.5,
     disable_fading_: true,
@@ -970,7 +980,7 @@ function $363ce4d1d71041aa$export$d41d19e89346fa2({
         }
       });
     }
-  });
+  })];
   return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     get when() {
       return is_showing_something();
@@ -1036,6 +1046,7 @@ function $72f96c4782db0b1b$export$9574e176201e5e8d(props) {
           recommendations_resource_: recommendations_resource_,
           market_: () => props.market,
           merchant_: () => props.merchant,
+          title_: () => props.title,
           layout_options_: $5vyXB$solidjs.createMemo(() => ({
             cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.cols_at_size),
             ...grid_spacing_override()
@@ -1045,18 +1056,28 @@ function $72f96c4782db0b1b$export$9574e176201e5e8d(props) {
     })));
   }, "RecommendationSlider failed");
 }
-const $b8e79813f4f7ebe4$var$_tmpl$ = ["<div", ' class="recommendation-grid"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
+const $b8e79813f4f7ebe4$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"],
+  $b8e79813f4f7ebe4$var$_tmpl$2 = ["<div", ' class="recommendation-grid"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
 function $b8e79813f4f7ebe4$export$7da560f849543dff({
   recommendations_resource_: recommendations_resource_,
   product_card_template_: product_card_template_,
   layout_options_: layout_options_,
   merchant_: merchant_,
   market_: market_,
-  rows_object_: rows_object_
+  rows_object_: rows_object_,
+  title_: title_
 }) {
   const is_showing_something = $5vyXB$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
+  const title = $5vyXB$solidjs.createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
   const num_placeholders_ = () => 20;
-  const elements = $5vyXB$solidjsweb.ssr($b8e79813f4f7ebe4$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($fc23d7668ae0011d$export$a2cc176055f8f08()), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $5vyXB$solidjsweb.mergeProps({
+  const elements = [$5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      return $5vyXB$solidjsweb.ssr($b8e79813f4f7ebe4$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(title()));
+    }
+  }), $5vyXB$solidjsweb.ssr($b8e79813f4f7ebe4$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($fc23d7668ae0011d$export$a2cc176055f8f08()), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $5vyXB$solidjsweb.mergeProps({
     get rows() {
       return rows_object_();
     },
@@ -1087,7 +1108,7 @@ function $b8e79813f4f7ebe4$export$7da560f849543dff({
         }
       });
     }
-  }))));
+  }))))];
   return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     get when() {
       return is_showing_something();
@@ -1137,6 +1158,7 @@ function $1f8dbf7e28b3eff2$export$9756467d34d91cdb(props) {
           recommendations_resource_: recommendations_resource_,
           market_: () => props.market,
           merchant_: () => props.merchant,
+          title_: () => props.title,
           layout_options_: $5vyXB$solidjs.createMemo(() => ({
             cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.cols_at_size),
             ...grid_spacing_override()

package/server/latest/index.d.ts

@@ -7,7 +7,7 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequestV2 } from "@depict-ai/types/api/ProductListingRequestV2";
-export const version = "2.1.17";
+export const version = "2.1.18";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -242,6 +242,7 @@ type RecommendationSliderBaseProps<T extends Display> = {
   grid_spacing: SDKGridSpacing;
   cols_at_size: SDKColsAtSize;
   recommendations: Promise<T[]>;
+  title?: JSX.Element;
 };
 /**
  * Render a grid with provided recommendations. displayTransformers will not be applied for this since you yourself provide the displays. Options are reactive.
@@ -260,6 +261,7 @@ export function RecommendationSlider<T extends Display>(props: {
 type RecommendationGridBaseProps<T extends Display> = {
   grid_spacing: SDKGridSpacing;
   cols_at_size: SDKColsAtSize;
+  title?: JSX.Element;
   recommendations: Promise<T[]>;
   view_more_button?: {
     text: string;

package/server/latest/index.js

@@ -6,7 +6,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "2.1.17";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.1.18";
 const $4147651646da990a$var$fallback_operator = "in";
 const $4147651646da990a$var$fallback_token = "";
 const $4147651646da990a$var$legacy_filter_prefix = "filter_";
@@ -858,16 +858,26 @@ function $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, container_element, ins
   if (insert_after_container) container_element.after(style_element);
   return [container_element, view_more_button_container(), view_less_button_container(), style_element];
 }
+const $c4492d24952ed731$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"];
 function $c4492d24952ed731$export$d41d19e89346fa2({
   recommendations_resource_: recommendations_resource_,
   product_card_template_: product_card_template_,
   layout_options_: layout_options_,
   merchant_: merchant_,
-  market_: market_
+  market_: market_,
+  title_: title_
 }) {
   const is_showing_something = $i7OB2$createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
+  const title = $i7OB2$createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
   const num_placeholders_ = () => 20;
-  const slider = $i7OB2$createComponent((0, $f32e14878e75af51$export$6649caad96ef8870), {
+  const slider = [$i7OB2$createComponent((0, $i7OB2$Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      return $i7OB2$ssr($c4492d24952ed731$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape(title()));
+    }
+  }), $i7OB2$createComponent((0, $f32e14878e75af51$export$6649caad96ef8870), {
     arrow_height_: 25,
     arrow_width_: 12.5,
     disable_fading_: true,
@@ -906,7 +916,7 @@ function $c4492d24952ed731$export$d41d19e89346fa2({
         }
       });
     }
-  });
+  })];
   return $i7OB2$createComponent((0, $i7OB2$Show), {
     get when() {
       return is_showing_something();
@@ -972,6 +982,7 @@ function $ee116da074deb002$export$9574e176201e5e8d(props) {
           recommendations_resource_: recommendations_resource_,
           market_: () => props.market,
           merchant_: () => props.merchant,
+          title_: () => props.title,
           layout_options_: $i7OB2$createMemo(() => ({
             cols_at_size: $b5cccc8ee7d24677$export$6daf8749b65a1b77(props.cols_at_size),
             ...grid_spacing_override()
@@ -981,18 +992,28 @@ function $ee116da074deb002$export$9574e176201e5e8d(props) {
     })));
   }, "RecommendationSlider failed");
 }
-const $3da8afe3ed57cf34$var$_tmpl$ = ["<div", ' class="recommendation-grid"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
+const $3da8afe3ed57cf34$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"],
+  $3da8afe3ed57cf34$var$_tmpl$2 = ["<div", ' class="recommendation-grid"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
 function $3da8afe3ed57cf34$export$7da560f849543dff({
   recommendations_resource_: recommendations_resource_,
   product_card_template_: product_card_template_,
   layout_options_: layout_options_,
   merchant_: merchant_,
   market_: market_,
-  rows_object_: rows_object_
+  rows_object_: rows_object_,
+  title_: title_
 }) {
   const is_showing_something = $i7OB2$createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
+  const title = $i7OB2$createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
   const num_placeholders_ = () => 20;
-  const elements = $i7OB2$ssr($3da8afe3ed57cf34$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape($a458486f22b22f63$export$a2cc176055f8f08()), $i7OB2$escape($i7OB2$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $i7OB2$mergeProps1({
+  const elements = [$i7OB2$createComponent((0, $i7OB2$Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      return $i7OB2$ssr($3da8afe3ed57cf34$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape(title()));
+    }
+  }), $i7OB2$ssr($3da8afe3ed57cf34$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$escape($a458486f22b22f63$export$a2cc176055f8f08()), $i7OB2$escape($i7OB2$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $i7OB2$mergeProps1({
     get rows() {
       return rows_object_();
     },
@@ -1023,7 +1044,7 @@ function $3da8afe3ed57cf34$export$7da560f849543dff({
         }
       });
     }
-  }))));
+  }))))];
   return $i7OB2$createComponent((0, $i7OB2$Show), {
     get when() {
       return is_showing_something();
@@ -1073,6 +1094,7 @@ function $9ea5383493360761$export$9756467d34d91cdb(props) {
           recommendations_resource_: recommendations_resource_,
           market_: () => props.market,
           merchant_: () => props.merchant,
+          title_: () => props.title,
           layout_options_: $i7OB2$createMemo(() => ({
             cols_at_size: $b5cccc8ee7d24677$export$6daf8749b65a1b77(props.cols_at_size),
             ...grid_spacing_override()