@depict-ai/ui 2.1.2 → 2.1.3

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.2";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.1.3";
 const $a68b73fd7ba0853f$var$fallback_operator = "in";
 const $a68b73fd7ba0853f$var$fallback_token = "";
 const $a68b73fd7ba0853f$var$legacy_filter_prefix = "filter_";
@@ -5106,25 +5106,26 @@ function $830518481649feb1$var$generate_media_queried_declarations(_ref) {
   } = _ref;
   return cols_at_size_.map(options => {
     const [n_cols, min, max, grid_spacing_for_size] = options;
-    const spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
+    const main_spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
     // See comment in else block below
-    const can_use_gap = $830518481649feb1$var$can_use_gap_for_unit(spacing_to_use) && (!override_vertical_spacing_ || $830518481649feb1$var$can_use_gap_for_unit(override_vertical_spacing_));
+    const can_use_gap = override_vertical_spacing_ ? $830518481649feb1$var$can_use_gap_for_unit(override_vertical_spacing_) : $830518481649feb1$var$can_use_gap_for_unit(main_spacing_to_use);
     let spacing_styling;
     let additional_styling = ""; // outside the media query
-    if (can_use_gap) spacing_styling = "gap:".concat(spacing_to_use, ";").concat(override_vertical_spacing_ ? "row-gap:".concat(override_vertical_spacing_, ";") : "");else {
+    if (can_use_gap) spacing_styling = "gap:".concat(main_spacing_to_use, ";").concat(override_vertical_spacing_ ? "row-gap:".concat(override_vertical_spacing_, ";") : "");else {
       // When using percent units, which our default styling does (because convenient) and our interface relies on (hard to specify different gaps for different screen sizes)
       // row gaps in grids are relative to the whole height of the grid, maybe see also https://stackoverflow.com/a/53563865. The issue with that is that as we load more products, the gap grows. Also, it breaks existing integrations.
       // Logical thought: use margins for the vertical spacing. But margins in grids are apparently relative to the size of the individual items in grids.
       // Given that, and that content blocks can be of different width, we have to do some complicated calculations to convert the provided gap, which is in gap of the total container width, to a margin of the individual items.
+      const vertical_spacing_to_use = override_vertical_spacing_ !== null && override_vertical_spacing_ !== void 0 ? override_vertical_spacing_ : main_spacing_to_use;
       const width_multiplier = "var(".concat($830518481649feb1$export$c500183c31c2b22e, ", 1)"); // How many cards wide the current item is (needed because content blocks)
-      const one_item_width_exclusing_gaps = "calc(calc(100 / ".concat(n_cols, ") - calc(calc(").concat(n_cols * 2 - 2, " * calc(").concat($830518481649feb1$var$strip_percent_unit(spacing_to_use), " / 2)) / ").concat(n_cols, "))"); // Width of one item in percent of the whole
+      const one_item_width_exclusing_gaps = "calc(calc(100 / ".concat(n_cols, ") - calc(calc(").concat(n_cols * 2 - 2, " * calc(").concat($830518481649feb1$var$strip_percent_unit(vertical_spacing_to_use), " / 2)) / ").concat(n_cols, "))"); // Width of one item in percent of the whole
       // Equation from layout.tsx, also used in CheckboxGrid. Needs half spacing for some reason
       const this_item_width_meat = "calc(".concat(one_item_width_exclusing_gaps, " * ").concat(width_multiplier, ")"); // Width of just the card
-      const this_item_width_gaps = "calc(calc(".concat(width_multiplier, " - 1) * ").concat($830518481649feb1$var$strip_percent_unit(spacing_to_use), ")"); // Width of the gaps
+      const this_item_width_gaps = "calc(calc(".concat(width_multiplier, " - 1) * ").concat($830518481649feb1$var$strip_percent_unit(vertical_spacing_to_use), ")"); // Width of the gaps
       const this_item_width = "calc(".concat(this_item_width_meat, " + ").concat(this_item_width_gaps, ")"); // Width of this item including gaps
       // this_item_width needs to be unitless, and since plain css can't do calc(40% / 5%) which would become unitless we need to strip all units in the calculations before
       const convert_top_spacing_to_item_width_percentage = spacing => "calc(calc(100 / ".concat(this_item_width, ") * ").concat(spacing, ")"); // Now finally we can convert the desired spacing to a percentage of this individual item's width (including gaps that would be there but aren't because content blocks span them)
-      spacing_styling = "column-gap:".concat(spacing_to_use, ";"); // Still use gaps in the horizontal direction because that works flawlessly
+      spacing_styling = "column-gap:".concat(main_spacing_to_use, ";"); // Still use gaps in the horizontal direction because that works flawlessly
       // Re-use old layout code to get the correct :nth-child declarations for the top margins
       additional_styling = $52FdA$depictaiutilishared.n_col_styling_with_dist(container_selector_ + ">", convert_top_spacing_to_item_width_percentage(default_grid_spacing_text), [[n_cols, min, max, grid_spacing_for_size ? convert_top_spacing_to_item_width_percentage(grid_spacing_for_size) : null]], "grid", override_vertical_spacing_ ? convert_top_spacing_to_item_width_percentage(override_vertical_spacing_) : override_vertical_spacing_, top_row_shortened_by_);
     }

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.2";
+export const version = "2.1.3";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

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.2";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "2.1.3";
 const $2855bffe06ef7a03$var$fallback_operator = "in";
 const $2855bffe06ef7a03$var$fallback_token = "";
 const $2855bffe06ef7a03$var$legacy_filter_prefix = "filter_";
@@ -5039,25 +5039,26 @@ function $64d94dcaa058dc7b$var$generate_media_queried_declarations(_ref) {
   } = _ref;
   return cols_at_size_.map(options => {
     const [n_cols, min, max, grid_spacing_for_size] = options;
-    const spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
+    const main_spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
     // See comment in else block below
-    const can_use_gap = $64d94dcaa058dc7b$var$can_use_gap_for_unit(spacing_to_use) && (!override_vertical_spacing_ || $64d94dcaa058dc7b$var$can_use_gap_for_unit(override_vertical_spacing_));
+    const can_use_gap = override_vertical_spacing_ ? $64d94dcaa058dc7b$var$can_use_gap_for_unit(override_vertical_spacing_) : $64d94dcaa058dc7b$var$can_use_gap_for_unit(main_spacing_to_use);
     let spacing_styling;
     let additional_styling = ""; // outside the media query
-    if (can_use_gap) spacing_styling = "gap:".concat(spacing_to_use, ";").concat(override_vertical_spacing_ ? "row-gap:".concat(override_vertical_spacing_, ";") : "");else {
+    if (can_use_gap) spacing_styling = "gap:".concat(main_spacing_to_use, ";").concat(override_vertical_spacing_ ? "row-gap:".concat(override_vertical_spacing_, ";") : "");else {
       // When using percent units, which our default styling does (because convenient) and our interface relies on (hard to specify different gaps for different screen sizes)
       // row gaps in grids are relative to the whole height of the grid, maybe see also https://stackoverflow.com/a/53563865. The issue with that is that as we load more products, the gap grows. Also, it breaks existing integrations.
       // Logical thought: use margins for the vertical spacing. But margins in grids are apparently relative to the size of the individual items in grids.
       // Given that, and that content blocks can be of different width, we have to do some complicated calculations to convert the provided gap, which is in gap of the total container width, to a margin of the individual items.
+      const vertical_spacing_to_use = override_vertical_spacing_ !== null && override_vertical_spacing_ !== void 0 ? override_vertical_spacing_ : main_spacing_to_use;
       const width_multiplier = "var(".concat($64d94dcaa058dc7b$export$c500183c31c2b22e, ", 1)"); // How many cards wide the current item is (needed because content blocks)
-      const one_item_width_exclusing_gaps = "calc(calc(100 / ".concat(n_cols, ") - calc(calc(").concat(n_cols * 2 - 2, " * calc(").concat($64d94dcaa058dc7b$var$strip_percent_unit(spacing_to_use), " / 2)) / ").concat(n_cols, "))"); // Width of one item in percent of the whole
+      const one_item_width_exclusing_gaps = "calc(calc(100 / ".concat(n_cols, ") - calc(calc(").concat(n_cols * 2 - 2, " * calc(").concat($64d94dcaa058dc7b$var$strip_percent_unit(vertical_spacing_to_use), " / 2)) / ").concat(n_cols, "))"); // Width of one item in percent of the whole
       // Equation from layout.tsx, also used in CheckboxGrid. Needs half spacing for some reason
       const this_item_width_meat = "calc(".concat(one_item_width_exclusing_gaps, " * ").concat(width_multiplier, ")"); // Width of just the card
-      const this_item_width_gaps = "calc(calc(".concat(width_multiplier, " - 1) * ").concat($64d94dcaa058dc7b$var$strip_percent_unit(spacing_to_use), ")"); // Width of the gaps
+      const this_item_width_gaps = "calc(calc(".concat(width_multiplier, " - 1) * ").concat($64d94dcaa058dc7b$var$strip_percent_unit(vertical_spacing_to_use), ")"); // Width of the gaps
       const this_item_width = "calc(".concat(this_item_width_meat, " + ").concat(this_item_width_gaps, ")"); // Width of this item including gaps
       // this_item_width needs to be unitless, and since plain css can't do calc(40% / 5%) which would become unitless we need to strip all units in the calculations before
       const convert_top_spacing_to_item_width_percentage = spacing => "calc(calc(100 / ".concat(this_item_width, ") * ").concat(spacing, ")"); // Now finally we can convert the desired spacing to a percentage of this individual item's width (including gaps that would be there but aren't because content blocks span them)
-      spacing_styling = "column-gap:".concat(spacing_to_use, ";"); // Still use gaps in the horizontal direction because that works flawlessly
+      spacing_styling = "column-gap:".concat(main_spacing_to_use, ";"); // Still use gaps in the horizontal direction because that works flawlessly
       // Re-use old layout code to get the correct :nth-child declarations for the top margins
       additional_styling = $8tj43$n_col_styling_with_dist(container_selector_ + ">", convert_top_spacing_to_item_width_percentage(default_grid_spacing_text), [[n_cols, min, max, grid_spacing_for_size ? convert_top_spacing_to_item_width_percentage(grid_spacing_for_size) : null]], "grid", override_vertical_spacing_ ? convert_top_spacing_to_item_width_percentage(override_vertical_spacing_) : override_vertical_spacing_, top_row_shortened_by_);
     }

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.2";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.3";
 const $1ab22f2cd39b3061$var$fallback_operator = "in";
 const $1ab22f2cd39b3061$var$fallback_token = "";
 const $1ab22f2cd39b3061$var$legacy_filter_prefix = "filter_";
@@ -4762,25 +4762,26 @@ function $75777da1687ba3f6$var$generate_media_queried_declarations({
 }) {
   return cols_at_size_.map(options => {
     const [n_cols, min, max, grid_spacing_for_size] = options;
-    const spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
+    const main_spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
     // See comment in else block below
-    const can_use_gap = $75777da1687ba3f6$var$can_use_gap_for_unit(spacing_to_use) && (!override_vertical_spacing_ || $75777da1687ba3f6$var$can_use_gap_for_unit(override_vertical_spacing_));
+    const can_use_gap = override_vertical_spacing_ ? $75777da1687ba3f6$var$can_use_gap_for_unit(override_vertical_spacing_) : $75777da1687ba3f6$var$can_use_gap_for_unit(main_spacing_to_use);
     let spacing_styling;
     let additional_styling = ""; // outside the media query
-    if (can_use_gap) spacing_styling = `gap:${spacing_to_use};${override_vertical_spacing_ ? `row-gap:${override_vertical_spacing_};` : ``}`;else {
+    if (can_use_gap) spacing_styling = `gap:${main_spacing_to_use};${override_vertical_spacing_ ? `row-gap:${override_vertical_spacing_};` : ``}`;else {
       // When using percent units, which our default styling does (because convenient) and our interface relies on (hard to specify different gaps for different screen sizes)
       // row gaps in grids are relative to the whole height of the grid, maybe see also https://stackoverflow.com/a/53563865. The issue with that is that as we load more products, the gap grows. Also, it breaks existing integrations.
       // Logical thought: use margins for the vertical spacing. But margins in grids are apparently relative to the size of the individual items in grids.
       // Given that, and that content blocks can be of different width, we have to do some complicated calculations to convert the provided gap, which is in gap of the total container width, to a margin of the individual items.
+      const vertical_spacing_to_use = override_vertical_spacing_ ?? main_spacing_to_use;
       const width_multiplier = `var(${$75777da1687ba3f6$export$c500183c31c2b22e}, 1)`; // How many cards wide the current item is (needed because content blocks)
-      const one_item_width_exclusing_gaps = `calc(calc(100 / ${n_cols}) - calc(calc(${n_cols * 2 - 2} * calc(${$75777da1687ba3f6$var$strip_percent_unit(spacing_to_use)} / 2)) / ${n_cols}))`; // Width of one item in percent of the whole
+      const one_item_width_exclusing_gaps = `calc(calc(100 / ${n_cols}) - calc(calc(${n_cols * 2 - 2} * calc(${$75777da1687ba3f6$var$strip_percent_unit(vertical_spacing_to_use)} / 2)) / ${n_cols}))`; // Width of one item in percent of the whole
       // Equation from layout.tsx, also used in CheckboxGrid. Needs half spacing for some reason
       const this_item_width_meat = `calc(${one_item_width_exclusing_gaps} * ${width_multiplier})`; // Width of just the card
-      const this_item_width_gaps = `calc(calc(${width_multiplier} - 1) * ${$75777da1687ba3f6$var$strip_percent_unit(spacing_to_use)})`; // Width of the gaps
+      const this_item_width_gaps = `calc(calc(${width_multiplier} - 1) * ${$75777da1687ba3f6$var$strip_percent_unit(vertical_spacing_to_use)})`; // Width of the gaps
       const this_item_width = `calc(${this_item_width_meat} + ${this_item_width_gaps})`; // Width of this item including gaps
       // this_item_width needs to be unitless, and since plain css can't do calc(40% / 5%) which would become unitless we need to strip all units in the calculations before
       const convert_top_spacing_to_item_width_percentage = spacing => `calc(calc(100 / ${this_item_width}) * ${spacing})`; // Now finally we can convert the desired spacing to a percentage of this individual item's width (including gaps that would be there but aren't because content blocks span them)
-      spacing_styling = `column-gap:${spacing_to_use};`; // Still use gaps in the horizontal direction because that works flawlessly
+      spacing_styling = `column-gap:${main_spacing_to_use};`; // Still use gaps in the horizontal direction because that works flawlessly
       // Re-use old layout code to get the correct :nth-child declarations for the top margins
       additional_styling = $gVhhF$depictaiutilishared.n_col_styling_with_dist(container_selector_ + ">", convert_top_spacing_to_item_width_percentage(default_grid_spacing_text), [[n_cols, min, max, grid_spacing_for_size ? convert_top_spacing_to_item_width_percentage(grid_spacing_for_size) : null]], "grid", override_vertical_spacing_ ? convert_top_spacing_to_item_width_percentage(override_vertical_spacing_) : override_vertical_spacing_, top_row_shortened_by_);
     }

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.2";
+export const version = "2.1.3";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

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.2";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.1.3";
 const $4147651646da990a$var$fallback_operator = "in";
 const $4147651646da990a$var$fallback_token = "";
 const $4147651646da990a$var$legacy_filter_prefix = "filter_";
@@ -4698,25 +4698,26 @@ function $6dee9211e57ac31a$var$generate_media_queried_declarations({
 }) {
   return cols_at_size_.map(options => {
     const [n_cols, min, max, grid_spacing_for_size] = options;
-    const spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
+    const main_spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
     // See comment in else block below
-    const can_use_gap = $6dee9211e57ac31a$var$can_use_gap_for_unit(spacing_to_use) && (!override_vertical_spacing_ || $6dee9211e57ac31a$var$can_use_gap_for_unit(override_vertical_spacing_));
+    const can_use_gap = override_vertical_spacing_ ? $6dee9211e57ac31a$var$can_use_gap_for_unit(override_vertical_spacing_) : $6dee9211e57ac31a$var$can_use_gap_for_unit(main_spacing_to_use);
     let spacing_styling;
     let additional_styling = ""; // outside the media query
-    if (can_use_gap) spacing_styling = `gap:${spacing_to_use};${override_vertical_spacing_ ? `row-gap:${override_vertical_spacing_};` : ``}`;else {
+    if (can_use_gap) spacing_styling = `gap:${main_spacing_to_use};${override_vertical_spacing_ ? `row-gap:${override_vertical_spacing_};` : ``}`;else {
       // When using percent units, which our default styling does (because convenient) and our interface relies on (hard to specify different gaps for different screen sizes)
       // row gaps in grids are relative to the whole height of the grid, maybe see also https://stackoverflow.com/a/53563865. The issue with that is that as we load more products, the gap grows. Also, it breaks existing integrations.
       // Logical thought: use margins for the vertical spacing. But margins in grids are apparently relative to the size of the individual items in grids.
       // Given that, and that content blocks can be of different width, we have to do some complicated calculations to convert the provided gap, which is in gap of the total container width, to a margin of the individual items.
+      const vertical_spacing_to_use = override_vertical_spacing_ ?? main_spacing_to_use;
       const width_multiplier = `var(${$6dee9211e57ac31a$export$c500183c31c2b22e}, 1)`; // How many cards wide the current item is (needed because content blocks)
-      const one_item_width_exclusing_gaps = `calc(calc(100 / ${n_cols}) - calc(calc(${n_cols * 2 - 2} * calc(${$6dee9211e57ac31a$var$strip_percent_unit(spacing_to_use)} / 2)) / ${n_cols}))`; // Width of one item in percent of the whole
+      const one_item_width_exclusing_gaps = `calc(calc(100 / ${n_cols}) - calc(calc(${n_cols * 2 - 2} * calc(${$6dee9211e57ac31a$var$strip_percent_unit(vertical_spacing_to_use)} / 2)) / ${n_cols}))`; // Width of one item in percent of the whole
       // Equation from layout.tsx, also used in CheckboxGrid. Needs half spacing for some reason
       const this_item_width_meat = `calc(${one_item_width_exclusing_gaps} * ${width_multiplier})`; // Width of just the card
-      const this_item_width_gaps = `calc(calc(${width_multiplier} - 1) * ${$6dee9211e57ac31a$var$strip_percent_unit(spacing_to_use)})`; // Width of the gaps
+      const this_item_width_gaps = `calc(calc(${width_multiplier} - 1) * ${$6dee9211e57ac31a$var$strip_percent_unit(vertical_spacing_to_use)})`; // Width of the gaps
       const this_item_width = `calc(${this_item_width_meat} + ${this_item_width_gaps})`; // Width of this item including gaps
       // this_item_width needs to be unitless, and since plain css can't do calc(40% / 5%) which would become unitless we need to strip all units in the calculations before
       const convert_top_spacing_to_item_width_percentage = spacing => `calc(calc(100 / ${this_item_width}) * ${spacing})`; // Now finally we can convert the desired spacing to a percentage of this individual item's width (including gaps that would be there but aren't because content blocks span them)
-      spacing_styling = `column-gap:${spacing_to_use};`; // Still use gaps in the horizontal direction because that works flawlessly
+      spacing_styling = `column-gap:${main_spacing_to_use};`; // Still use gaps in the horizontal direction because that works flawlessly
       // Re-use old layout code to get the correct :nth-child declarations for the top margins
       additional_styling = $9HbP8$n_col_styling_with_dist(container_selector_ + ">", convert_top_spacing_to_item_width_percentage(default_grid_spacing_text), [[n_cols, min, max, grid_spacing_for_size ? convert_top_spacing_to_item_width_percentage(grid_spacing_for_size) : null]], "grid", override_vertical_spacing_ ? convert_top_spacing_to_item_width_percentage(override_vertical_spacing_) : override_vertical_spacing_, top_row_shortened_by_);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "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",

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.2";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.1.3";
 const $a68b73fd7ba0853f$var$fallback_operator = "in";
 const $a68b73fd7ba0853f$var$fallback_token = "";
 const $a68b73fd7ba0853f$var$legacy_filter_prefix = "filter_";
@@ -4181,25 +4181,26 @@ function $830518481649feb1$var$generate_media_queried_declarations(_ref) {
   } = _ref;
   return cols_at_size_.map(options => {
     const [n_cols, min, max, grid_spacing_for_size] = options;
-    const spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
+    const main_spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
     // See comment in else block below
-    const can_use_gap = $830518481649feb1$var$can_use_gap_for_unit(spacing_to_use) && (!override_vertical_spacing_ || $830518481649feb1$var$can_use_gap_for_unit(override_vertical_spacing_));
+    const can_use_gap = override_vertical_spacing_ ? $830518481649feb1$var$can_use_gap_for_unit(override_vertical_spacing_) : $830518481649feb1$var$can_use_gap_for_unit(main_spacing_to_use);
     let spacing_styling;
     let additional_styling = ""; // outside the media query
-    if (can_use_gap) spacing_styling = "gap:".concat(spacing_to_use, ";").concat(override_vertical_spacing_ ? "row-gap:".concat(override_vertical_spacing_, ";") : "");else {
+    if (can_use_gap) spacing_styling = "gap:".concat(main_spacing_to_use, ";").concat(override_vertical_spacing_ ? "row-gap:".concat(override_vertical_spacing_, ";") : "");else {
       // When using percent units, which our default styling does (because convenient) and our interface relies on (hard to specify different gaps for different screen sizes)
       // row gaps in grids are relative to the whole height of the grid, maybe see also https://stackoverflow.com/a/53563865. The issue with that is that as we load more products, the gap grows. Also, it breaks existing integrations.
       // Logical thought: use margins for the vertical spacing. But margins in grids are apparently relative to the size of the individual items in grids.
       // Given that, and that content blocks can be of different width, we have to do some complicated calculations to convert the provided gap, which is in gap of the total container width, to a margin of the individual items.
+      const vertical_spacing_to_use = override_vertical_spacing_ !== null && override_vertical_spacing_ !== void 0 ? override_vertical_spacing_ : main_spacing_to_use;
       const width_multiplier = "var(".concat($830518481649feb1$export$c500183c31c2b22e, ", 1)"); // How many cards wide the current item is (needed because content blocks)
-      const one_item_width_exclusing_gaps = "calc(calc(100 / ".concat(n_cols, ") - calc(calc(").concat(n_cols * 2 - 2, " * calc(").concat($830518481649feb1$var$strip_percent_unit(spacing_to_use), " / 2)) / ").concat(n_cols, "))"); // Width of one item in percent of the whole
+      const one_item_width_exclusing_gaps = "calc(calc(100 / ".concat(n_cols, ") - calc(calc(").concat(n_cols * 2 - 2, " * calc(").concat($830518481649feb1$var$strip_percent_unit(vertical_spacing_to_use), " / 2)) / ").concat(n_cols, "))"); // Width of one item in percent of the whole
       // Equation from layout.tsx, also used in CheckboxGrid. Needs half spacing for some reason
       const this_item_width_meat = "calc(".concat(one_item_width_exclusing_gaps, " * ").concat(width_multiplier, ")"); // Width of just the card
-      const this_item_width_gaps = "calc(calc(".concat(width_multiplier, " - 1) * ").concat($830518481649feb1$var$strip_percent_unit(spacing_to_use), ")"); // Width of the gaps
+      const this_item_width_gaps = "calc(calc(".concat(width_multiplier, " - 1) * ").concat($830518481649feb1$var$strip_percent_unit(vertical_spacing_to_use), ")"); // Width of the gaps
       const this_item_width = "calc(".concat(this_item_width_meat, " + ").concat(this_item_width_gaps, ")"); // Width of this item including gaps
       // this_item_width needs to be unitless, and since plain css can't do calc(40% / 5%) which would become unitless we need to strip all units in the calculations before
       const convert_top_spacing_to_item_width_percentage = spacing => "calc(calc(100 / ".concat(this_item_width, ") * ").concat(spacing, ")"); // Now finally we can convert the desired spacing to a percentage of this individual item's width (including gaps that would be there but aren't because content blocks span them)
-      spacing_styling = "column-gap:".concat(spacing_to_use, ";"); // Still use gaps in the horizontal direction because that works flawlessly
+      spacing_styling = "column-gap:".concat(main_spacing_to_use, ";"); // Still use gaps in the horizontal direction because that works flawlessly
       // Re-use old layout code to get the correct :nth-child declarations for the top margins
       additional_styling = $3hooq$depictaiutilishared.n_col_styling_with_dist(container_selector_ + ">", convert_top_spacing_to_item_width_percentage(default_grid_spacing_text), [[n_cols, min, max, grid_spacing_for_size ? convert_top_spacing_to_item_width_percentage(grid_spacing_for_size) : null]], "grid", override_vertical_spacing_ ? convert_top_spacing_to_item_width_percentage(override_vertical_spacing_) : override_vertical_spacing_, top_row_shortened_by_);
     }

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.2";
+export const version = "2.1.3";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

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.2";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "2.1.3";
 const $2855bffe06ef7a03$var$fallback_operator = "in";
 const $2855bffe06ef7a03$var$fallback_token = "";
 const $2855bffe06ef7a03$var$legacy_filter_prefix = "filter_";
@@ -4114,25 +4114,26 @@ function $64d94dcaa058dc7b$var$generate_media_queried_declarations(_ref) {
   } = _ref;
   return cols_at_size_.map(options => {
     const [n_cols, min, max, grid_spacing_for_size] = options;
-    const spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
+    const main_spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
     // See comment in else block below
-    const can_use_gap = $64d94dcaa058dc7b$var$can_use_gap_for_unit(spacing_to_use) && (!override_vertical_spacing_ || $64d94dcaa058dc7b$var$can_use_gap_for_unit(override_vertical_spacing_));
+    const can_use_gap = override_vertical_spacing_ ? $64d94dcaa058dc7b$var$can_use_gap_for_unit(override_vertical_spacing_) : $64d94dcaa058dc7b$var$can_use_gap_for_unit(main_spacing_to_use);
     let spacing_styling;
     let additional_styling = ""; // outside the media query
-    if (can_use_gap) spacing_styling = "gap:".concat(spacing_to_use, ";").concat(override_vertical_spacing_ ? "row-gap:".concat(override_vertical_spacing_, ";") : "");else {
+    if (can_use_gap) spacing_styling = "gap:".concat(main_spacing_to_use, ";").concat(override_vertical_spacing_ ? "row-gap:".concat(override_vertical_spacing_, ";") : "");else {
       // When using percent units, which our default styling does (because convenient) and our interface relies on (hard to specify different gaps for different screen sizes)
       // row gaps in grids are relative to the whole height of the grid, maybe see also https://stackoverflow.com/a/53563865. The issue with that is that as we load more products, the gap grows. Also, it breaks existing integrations.
       // Logical thought: use margins for the vertical spacing. But margins in grids are apparently relative to the size of the individual items in grids.
       // Given that, and that content blocks can be of different width, we have to do some complicated calculations to convert the provided gap, which is in gap of the total container width, to a margin of the individual items.
+      const vertical_spacing_to_use = override_vertical_spacing_ !== null && override_vertical_spacing_ !== void 0 ? override_vertical_spacing_ : main_spacing_to_use;
       const width_multiplier = "var(".concat($64d94dcaa058dc7b$export$c500183c31c2b22e, ", 1)"); // How many cards wide the current item is (needed because content blocks)
-      const one_item_width_exclusing_gaps = "calc(calc(100 / ".concat(n_cols, ") - calc(calc(").concat(n_cols * 2 - 2, " * calc(").concat($64d94dcaa058dc7b$var$strip_percent_unit(spacing_to_use), " / 2)) / ").concat(n_cols, "))"); // Width of one item in percent of the whole
+      const one_item_width_exclusing_gaps = "calc(calc(100 / ".concat(n_cols, ") - calc(calc(").concat(n_cols * 2 - 2, " * calc(").concat($64d94dcaa058dc7b$var$strip_percent_unit(vertical_spacing_to_use), " / 2)) / ").concat(n_cols, "))"); // Width of one item in percent of the whole
       // Equation from layout.tsx, also used in CheckboxGrid. Needs half spacing for some reason
       const this_item_width_meat = "calc(".concat(one_item_width_exclusing_gaps, " * ").concat(width_multiplier, ")"); // Width of just the card
-      const this_item_width_gaps = "calc(calc(".concat(width_multiplier, " - 1) * ").concat($64d94dcaa058dc7b$var$strip_percent_unit(spacing_to_use), ")"); // Width of the gaps
+      const this_item_width_gaps = "calc(calc(".concat(width_multiplier, " - 1) * ").concat($64d94dcaa058dc7b$var$strip_percent_unit(vertical_spacing_to_use), ")"); // Width of the gaps
       const this_item_width = "calc(".concat(this_item_width_meat, " + ").concat(this_item_width_gaps, ")"); // Width of this item including gaps
       // this_item_width needs to be unitless, and since plain css can't do calc(40% / 5%) which would become unitless we need to strip all units in the calculations before
       const convert_top_spacing_to_item_width_percentage = spacing => "calc(calc(100 / ".concat(this_item_width, ") * ").concat(spacing, ")"); // Now finally we can convert the desired spacing to a percentage of this individual item's width (including gaps that would be there but aren't because content blocks span them)
-      spacing_styling = "column-gap:".concat(spacing_to_use, ";"); // Still use gaps in the horizontal direction because that works flawlessly
+      spacing_styling = "column-gap:".concat(main_spacing_to_use, ";"); // Still use gaps in the horizontal direction because that works flawlessly
       // Re-use old layout code to get the correct :nth-child declarations for the top margins
       additional_styling = $b8hua$n_col_styling_with_dist(container_selector_ + ">", convert_top_spacing_to_item_width_percentage(default_grid_spacing_text), [[n_cols, min, max, grid_spacing_for_size ? convert_top_spacing_to_item_width_percentage(grid_spacing_for_size) : null]], "grid", override_vertical_spacing_ ? convert_top_spacing_to_item_width_percentage(override_vertical_spacing_) : override_vertical_spacing_, top_row_shortened_by_);
     }

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.2";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.3";
 const $1ab22f2cd39b3061$var$fallback_operator = "in";
 const $1ab22f2cd39b3061$var$fallback_token = "";
 const $1ab22f2cd39b3061$var$legacy_filter_prefix = "filter_";
@@ -3874,25 +3874,26 @@ function $75777da1687ba3f6$var$generate_media_queried_declarations({
 }) {
   return cols_at_size_.map(options => {
     const [n_cols, min, max, grid_spacing_for_size] = options;
-    const spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
+    const main_spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
     // See comment in else block below
-    const can_use_gap = $75777da1687ba3f6$var$can_use_gap_for_unit(spacing_to_use) && (!override_vertical_spacing_ || $75777da1687ba3f6$var$can_use_gap_for_unit(override_vertical_spacing_));
+    const can_use_gap = override_vertical_spacing_ ? $75777da1687ba3f6$var$can_use_gap_for_unit(override_vertical_spacing_) : $75777da1687ba3f6$var$can_use_gap_for_unit(main_spacing_to_use);
     let spacing_styling;
     let additional_styling = ""; // outside the media query
-    if (can_use_gap) spacing_styling = `gap:${spacing_to_use};${override_vertical_spacing_ ? `row-gap:${override_vertical_spacing_};` : ``}`;else {
+    if (can_use_gap) spacing_styling = `gap:${main_spacing_to_use};${override_vertical_spacing_ ? `row-gap:${override_vertical_spacing_};` : ``}`;else {
       // When using percent units, which our default styling does (because convenient) and our interface relies on (hard to specify different gaps for different screen sizes)
       // row gaps in grids are relative to the whole height of the grid, maybe see also https://stackoverflow.com/a/53563865. The issue with that is that as we load more products, the gap grows. Also, it breaks existing integrations.
       // Logical thought: use margins for the vertical spacing. But margins in grids are apparently relative to the size of the individual items in grids.
       // Given that, and that content blocks can be of different width, we have to do some complicated calculations to convert the provided gap, which is in gap of the total container width, to a margin of the individual items.
+      const vertical_spacing_to_use = override_vertical_spacing_ ?? main_spacing_to_use;
       const width_multiplier = `var(${$75777da1687ba3f6$export$c500183c31c2b22e}, 1)`; // How many cards wide the current item is (needed because content blocks)
-      const one_item_width_exclusing_gaps = `calc(calc(100 / ${n_cols}) - calc(calc(${n_cols * 2 - 2} * calc(${$75777da1687ba3f6$var$strip_percent_unit(spacing_to_use)} / 2)) / ${n_cols}))`; // Width of one item in percent of the whole
+      const one_item_width_exclusing_gaps = `calc(calc(100 / ${n_cols}) - calc(calc(${n_cols * 2 - 2} * calc(${$75777da1687ba3f6$var$strip_percent_unit(vertical_spacing_to_use)} / 2)) / ${n_cols}))`; // Width of one item in percent of the whole
       // Equation from layout.tsx, also used in CheckboxGrid. Needs half spacing for some reason
       const this_item_width_meat = `calc(${one_item_width_exclusing_gaps} * ${width_multiplier})`; // Width of just the card
-      const this_item_width_gaps = `calc(calc(${width_multiplier} - 1) * ${$75777da1687ba3f6$var$strip_percent_unit(spacing_to_use)})`; // Width of the gaps
+      const this_item_width_gaps = `calc(calc(${width_multiplier} - 1) * ${$75777da1687ba3f6$var$strip_percent_unit(vertical_spacing_to_use)})`; // Width of the gaps
       const this_item_width = `calc(${this_item_width_meat} + ${this_item_width_gaps})`; // Width of this item including gaps
       // this_item_width needs to be unitless, and since plain css can't do calc(40% / 5%) which would become unitless we need to strip all units in the calculations before
       const convert_top_spacing_to_item_width_percentage = spacing => `calc(calc(100 / ${this_item_width}) * ${spacing})`; // Now finally we can convert the desired spacing to a percentage of this individual item's width (including gaps that would be there but aren't because content blocks span them)
-      spacing_styling = `column-gap:${spacing_to_use};`; // Still use gaps in the horizontal direction because that works flawlessly
+      spacing_styling = `column-gap:${main_spacing_to_use};`; // Still use gaps in the horizontal direction because that works flawlessly
       // Re-use old layout code to get the correct :nth-child declarations for the top margins
       additional_styling = $5vyXB$depictaiutilishared.n_col_styling_with_dist(container_selector_ + ">", convert_top_spacing_to_item_width_percentage(default_grid_spacing_text), [[n_cols, min, max, grid_spacing_for_size ? convert_top_spacing_to_item_width_percentage(grid_spacing_for_size) : null]], "grid", override_vertical_spacing_ ? convert_top_spacing_to_item_width_percentage(override_vertical_spacing_) : override_vertical_spacing_, top_row_shortened_by_);
     }

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.2";
+export const version = "2.1.3";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

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.2";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.1.3";
 const $4147651646da990a$var$fallback_operator = "in";
 const $4147651646da990a$var$fallback_token = "";
 const $4147651646da990a$var$legacy_filter_prefix = "filter_";
@@ -3810,25 +3810,26 @@ function $6dee9211e57ac31a$var$generate_media_queried_declarations({
 }) {
   return cols_at_size_.map(options => {
     const [n_cols, min, max, grid_spacing_for_size] = options;
-    const spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
+    const main_spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
     // See comment in else block below
-    const can_use_gap = $6dee9211e57ac31a$var$can_use_gap_for_unit(spacing_to_use) && (!override_vertical_spacing_ || $6dee9211e57ac31a$var$can_use_gap_for_unit(override_vertical_spacing_));
+    const can_use_gap = override_vertical_spacing_ ? $6dee9211e57ac31a$var$can_use_gap_for_unit(override_vertical_spacing_) : $6dee9211e57ac31a$var$can_use_gap_for_unit(main_spacing_to_use);
     let spacing_styling;
     let additional_styling = ""; // outside the media query
-    if (can_use_gap) spacing_styling = `gap:${spacing_to_use};${override_vertical_spacing_ ? `row-gap:${override_vertical_spacing_};` : ``}`;else {
+    if (can_use_gap) spacing_styling = `gap:${main_spacing_to_use};${override_vertical_spacing_ ? `row-gap:${override_vertical_spacing_};` : ``}`;else {
       // When using percent units, which our default styling does (because convenient) and our interface relies on (hard to specify different gaps for different screen sizes)
       // row gaps in grids are relative to the whole height of the grid, maybe see also https://stackoverflow.com/a/53563865. The issue with that is that as we load more products, the gap grows. Also, it breaks existing integrations.
       // Logical thought: use margins for the vertical spacing. But margins in grids are apparently relative to the size of the individual items in grids.
       // Given that, and that content blocks can be of different width, we have to do some complicated calculations to convert the provided gap, which is in gap of the total container width, to a margin of the individual items.
+      const vertical_spacing_to_use = override_vertical_spacing_ ?? main_spacing_to_use;
       const width_multiplier = `var(${$6dee9211e57ac31a$export$c500183c31c2b22e}, 1)`; // How many cards wide the current item is (needed because content blocks)
-      const one_item_width_exclusing_gaps = `calc(calc(100 / ${n_cols}) - calc(calc(${n_cols * 2 - 2} * calc(${$6dee9211e57ac31a$var$strip_percent_unit(spacing_to_use)} / 2)) / ${n_cols}))`; // Width of one item in percent of the whole
+      const one_item_width_exclusing_gaps = `calc(calc(100 / ${n_cols}) - calc(calc(${n_cols * 2 - 2} * calc(${$6dee9211e57ac31a$var$strip_percent_unit(vertical_spacing_to_use)} / 2)) / ${n_cols}))`; // Width of one item in percent of the whole
       // Equation from layout.tsx, also used in CheckboxGrid. Needs half spacing for some reason
       const this_item_width_meat = `calc(${one_item_width_exclusing_gaps} * ${width_multiplier})`; // Width of just the card
-      const this_item_width_gaps = `calc(calc(${width_multiplier} - 1) * ${$6dee9211e57ac31a$var$strip_percent_unit(spacing_to_use)})`; // Width of the gaps
+      const this_item_width_gaps = `calc(calc(${width_multiplier} - 1) * ${$6dee9211e57ac31a$var$strip_percent_unit(vertical_spacing_to_use)})`; // Width of the gaps
       const this_item_width = `calc(${this_item_width_meat} + ${this_item_width_gaps})`; // Width of this item including gaps
       // this_item_width needs to be unitless, and since plain css can't do calc(40% / 5%) which would become unitless we need to strip all units in the calculations before
       const convert_top_spacing_to_item_width_percentage = spacing => `calc(calc(100 / ${this_item_width}) * ${spacing})`; // Now finally we can convert the desired spacing to a percentage of this individual item's width (including gaps that would be there but aren't because content blocks span them)
-      spacing_styling = `column-gap:${spacing_to_use};`; // Still use gaps in the horizontal direction because that works flawlessly
+      spacing_styling = `column-gap:${main_spacing_to_use};`; // Still use gaps in the horizontal direction because that works flawlessly
       // Re-use old layout code to get the correct :nth-child declarations for the top margins
       additional_styling = $i7OB2$n_col_styling_with_dist(container_selector_ + ">", convert_top_spacing_to_item_width_percentage(default_grid_spacing_text), [[n_cols, min, max, grid_spacing_for_size ? convert_top_spacing_to_item_width_percentage(grid_spacing_for_size) : null]], "grid", override_vertical_spacing_ ? convert_top_spacing_to_item_width_percentage(override_vertical_spacing_) : override_vertical_spacing_, top_row_shortened_by_);
     }