@depict-ai/ui 4.1.6 → 4.1.7

package/ES10/index.cjs

@@ -99,7 +99,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447a
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $98aef9965764903d$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.1.6";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.1.7";
 
 /**
  * This is a function that will safely clone an object that may contain promises.
@@ -7930,25 +7930,33 @@ function $476a3dc36afc1938$export$82ed4b28ecb67608(_ref) {
   const checkboxes = $52FdA$solidjs.createMemo(() => {
     const meta = filter_().meta;
     return meta.values.map((value_, index) => {
-      var _meta$names, _meta$counts;
+      var _meta$names, _meta$counts, _meta$swatches;
       return {
         value_: value_,
         name_: (_meta$names = meta.names) === null || _meta$names === void 0 ? void 0 : _meta$names[index],
-        count_: (_meta$counts = meta.counts) === null || _meta$counts === void 0 ? void 0 : _meta$counts[index]
+        count_: (_meta$counts = meta.counts) === null || _meta$counts === void 0 ? void 0 : _meta$counts[index],
+        swatch_: (_meta$swatches = meta.swatches) === null || _meta$swatches === void 0 ? void 0 : _meta$swatches[index]
       };
     });
   });
+  const backendFilterV2 = $52FdA$solidjs.createMemo(() => "swatches" in (filter_().meta || {}));
   const render_checkbox = checkbox => {
-    const color_name = $52FdA$solidjs.createMemo(() => {
+    const hex_color = $52FdA$solidjs.createMemo(() => {
       var _split;
-      return ((_split = checkbox().value_.split(";")) === null || _split === void 0 ? void 0 : _split[0]) || "";
+      if (backendFilterV2()) return checkbox().swatch_ || "#000";
+      return ((_split = checkbox().value_.split(";")) === null || _split === void 0 ? void 0 : _split[1]) || "";
     });
-    const hex_color = $52FdA$solidjs.createMemo(() => {
-      var _split2;
-      return ((_split2 = checkbox().value_.split(";")) === null || _split2 === void 0 ? void 0 : _split2[1]) || "";
+    const hasGradientOrOtherValidNonHexColor = $52FdA$solidjs.createMemo(() => {
+      const color = hex_color();
+      return !!color && !color.startsWith("#");
+    });
+    const setBlackCheckClass = $52FdA$solidjs.createMemo(() => {
+      // Set this to true if we should show a black tick in the checkbox for better contrast on light backgrounds
+      if (hasGradientOrOtherValidNonHexColor()) return false;
+      const rgb_color = $52FdA$depictaiutilishared.hex_to_rgb(hex_color());
+      if (!rgb_color) return false;
+      return $476a3dc36afc1938$var$does_black_contrast_better(rgb_color);
     });
-    const rgb_color = $52FdA$solidjs.createMemo(() => $52FdA$depictaiutilishared.hex_to_rgb(hex_color()));
-    const black_contrast_better = $52FdA$solidjs.createMemo(() => rgb_color() ? $476a3dc36afc1938$var$does_black_contrast_better(rgb_color()) : false);
     const is_checked = $52FdA$solidjs.createMemo(() => {
       var _existing_filter;
       const data = (_existing_filter = existing_filter()) === null || _existing_filter === void 0 ? void 0 : _existing_filter.data;
@@ -7958,6 +7966,11 @@ function $476a3dc36afc1938$export$82ed4b28ecb67608(_ref) {
     const value = $52FdA$solidjs.createMemo(() => checkbox().value_);
     const label_text = $52FdA$solidjs.createMemo(() => checkbox().name_ || value() + "");
     const count = $52FdA$solidjs.createMemo(() => checkbox().count_);
+    const colorNameDatasetValue = $52FdA$solidjs.createMemo(() => {
+      var _split2;
+      if (backendFilterV2()) return label_text();
+      return ((_split2 = checkbox().value_.split(";")) === null || _split2 === void 0 ? void 0 : _split2[0]) || "";
+    });
     const input_row = $52FdA$solidjsweb.createComponent((0, $902a0ca2b52f3898$export$48513f6b9f8ce62d), {
       get value_() {
         return value();
@@ -7990,11 +8003,12 @@ function $476a3dc36afc1938$export$82ed4b28ecb67608(_ref) {
           style: style
         } = span;
         classList.add("color");
-        $52FdA$solidjs.createComputed(() => {
-          style.background = hex_color() || "black"; // default to black background so that the default-checkmark also is visible on dark page backgrounds
-          span.dataset.colorName = color_name();
-          classList.toggle("black-check", black_contrast_better());
-        });
+        $52FdA$solidjs.createRenderEffect(() => style.background = hex_color() || "black" // default to black background so that the default-checkmark also is visible on dark page backgrounds (the or here can be removed when we fully go v2)
+        );
+
+        $52FdA$solidjs.createRenderEffect(() => span.dataset.colorName = colorNameDatasetValue());
+        $52FdA$solidjs.createRenderEffect(() => classList.toggle("black-check", setBlackCheckClass()));
+        $52FdA$solidjs.createRenderEffect(() => classList.toggle("outlined-check", hasGradientOrOtherValidNonHexColor()));
       }
     });
     return input_row;

package/ES10/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.1.6";
+export const version = "4.1.7";
 /**
  * This is a function that will safely clone an object that may contain promises.
  * It will use structuredClone to clone the object and then re-apply (copy) any promises that were in the original object to the cloned object.

package/ES10/index.js

@@ -10,7 +10,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 = "4.1.6";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.1.7";
 
 /**
  * This is a function that will safely clone an object that may contain promises.
@@ -7841,25 +7841,33 @@ function $2cb856c297c53e6c$export$82ed4b28ecb67608(_ref) {
   const checkboxes = $8tj43$createMemo(() => {
     const meta = filter_().meta;
     return meta.values.map((value_, index) => {
-      var _meta$names, _meta$counts;
+      var _meta$names, _meta$counts, _meta$swatches;
       return {
         value_: value_,
         name_: (_meta$names = meta.names) === null || _meta$names === void 0 ? void 0 : _meta$names[index],
-        count_: (_meta$counts = meta.counts) === null || _meta$counts === void 0 ? void 0 : _meta$counts[index]
+        count_: (_meta$counts = meta.counts) === null || _meta$counts === void 0 ? void 0 : _meta$counts[index],
+        swatch_: (_meta$swatches = meta.swatches) === null || _meta$swatches === void 0 ? void 0 : _meta$swatches[index]
       };
     });
   });
+  const backendFilterV2 = $8tj43$createMemo(() => "swatches" in (filter_().meta || {}));
   const render_checkbox = checkbox => {
-    const color_name = $8tj43$createMemo(() => {
+    const hex_color = $8tj43$createMemo(() => {
       var _split;
-      return ((_split = checkbox().value_.split(";")) === null || _split === void 0 ? void 0 : _split[0]) || "";
+      if (backendFilterV2()) return checkbox().swatch_ || "#000";
+      return ((_split = checkbox().value_.split(";")) === null || _split === void 0 ? void 0 : _split[1]) || "";
     });
-    const hex_color = $8tj43$createMemo(() => {
-      var _split2;
-      return ((_split2 = checkbox().value_.split(";")) === null || _split2 === void 0 ? void 0 : _split2[1]) || "";
+    const hasGradientOrOtherValidNonHexColor = $8tj43$createMemo(() => {
+      const color = hex_color();
+      return !!color && !color.startsWith("#");
+    });
+    const setBlackCheckClass = $8tj43$createMemo(() => {
+      // Set this to true if we should show a black tick in the checkbox for better contrast on light backgrounds
+      if (hasGradientOrOtherValidNonHexColor()) return false;
+      const rgb_color = $8tj43$hex_to_rgb(hex_color());
+      if (!rgb_color) return false;
+      return $2cb856c297c53e6c$var$does_black_contrast_better(rgb_color);
     });
-    const rgb_color = $8tj43$createMemo(() => $8tj43$hex_to_rgb(hex_color()));
-    const black_contrast_better = $8tj43$createMemo(() => rgb_color() ? $2cb856c297c53e6c$var$does_black_contrast_better(rgb_color()) : false);
     const is_checked = $8tj43$createMemo(() => {
       var _existing_filter;
       const data = (_existing_filter = existing_filter()) === null || _existing_filter === void 0 ? void 0 : _existing_filter.data;
@@ -7869,6 +7877,11 @@ function $2cb856c297c53e6c$export$82ed4b28ecb67608(_ref) {
     const value = $8tj43$createMemo(() => checkbox().value_);
     const label_text = $8tj43$createMemo(() => checkbox().name_ || value() + "");
     const count = $8tj43$createMemo(() => checkbox().count_);
+    const colorNameDatasetValue = $8tj43$createMemo(() => {
+      var _split2;
+      if (backendFilterV2()) return label_text();
+      return ((_split2 = checkbox().value_.split(";")) === null || _split2 === void 0 ? void 0 : _split2[0]) || "";
+    });
     const input_row = $8tj43$createComponent((0, $19e828709c7723a0$export$48513f6b9f8ce62d), {
       get value_() {
         return value();
@@ -7901,11 +7914,12 @@ function $2cb856c297c53e6c$export$82ed4b28ecb67608(_ref) {
           style: style
         } = span;
         classList.add("color");
-        $8tj43$createComputed(() => {
-          style.background = hex_color() || "black"; // default to black background so that the default-checkmark also is visible on dark page backgrounds
-          span.dataset.colorName = color_name();
-          classList.toggle("black-check", black_contrast_better());
-        });
+        $8tj43$createRenderEffect(() => style.background = hex_color() || "black" // default to black background so that the default-checkmark also is visible on dark page backgrounds (the or here can be removed when we fully go v2)
+        );
+
+        $8tj43$createRenderEffect(() => span.dataset.colorName = colorNameDatasetValue());
+        $8tj43$createRenderEffect(() => classList.toggle("black-check", setBlackCheckClass()));
+        $8tj43$createRenderEffect(() => classList.toggle("outlined-check", hasGradientOrOtherValidNonHexColor()));
       }
     });
     return input_row;

package/latest/index.cjs

@@ -93,7 +93,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad99
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $c0a0659cf97e8eb2$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.1.6";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.1.7";
 
 /**
  * This is a function that will safely clone an object that may contain promises.
@@ -7554,15 +7554,28 @@ function $b51a2b8b9355e66c$export$82ed4b28ecb67608({
       return {
         value_: value_,
         name_: meta.names?.[index],
-        count_: meta.counts?.[index]
+        count_: meta.counts?.[index],
+        swatch_: meta.swatches?.[index]
       };
     });
   });
+  const backendFilterV2 = $gVhhF$solidjs.createMemo(() => "swatches" in (filter_().meta || {}));
   const render_checkbox = checkbox => {
-    const color_name = $gVhhF$solidjs.createMemo(() => checkbox().value_.split(";")?.[0] || "");
-    const hex_color = $gVhhF$solidjs.createMemo(() => checkbox().value_.split(";")?.[1] || "");
-    const rgb_color = $gVhhF$solidjs.createMemo(() => $gVhhF$depictaiutilishared.hex_to_rgb(hex_color()));
-    const black_contrast_better = $gVhhF$solidjs.createMemo(() => rgb_color() ? $b51a2b8b9355e66c$var$does_black_contrast_better(rgb_color()) : false);
+    const hex_color = $gVhhF$solidjs.createMemo(() => {
+      if (backendFilterV2()) return checkbox().swatch_ || "#000";
+      return checkbox().value_.split(";")?.[1] || "";
+    });
+    const hasGradientOrOtherValidNonHexColor = $gVhhF$solidjs.createMemo(() => {
+      const color = hex_color();
+      return !!color && !color.startsWith("#");
+    });
+    const setBlackCheckClass = $gVhhF$solidjs.createMemo(() => {
+      // Set this to true if we should show a black tick in the checkbox for better contrast on light backgrounds
+      if (hasGradientOrOtherValidNonHexColor()) return false;
+      const rgb_color = $gVhhF$depictaiutilishared.hex_to_rgb(hex_color());
+      if (!rgb_color) return false;
+      return $b51a2b8b9355e66c$var$does_black_contrast_better(rgb_color);
+    });
     const is_checked = $gVhhF$solidjs.createMemo(() => {
       const data = existing_filter()?.data;
       const value = $daa394359b026187$export$325f75597868c4f0(checkbox().value_);
@@ -7571,6 +7584,10 @@ function $b51a2b8b9355e66c$export$82ed4b28ecb67608({
     const value = $gVhhF$solidjs.createMemo(() => checkbox().value_);
     const label_text = $gVhhF$solidjs.createMemo(() => checkbox().name_ || value() + "");
     const count = $gVhhF$solidjs.createMemo(() => checkbox().count_);
+    const colorNameDatasetValue = $gVhhF$solidjs.createMemo(() => {
+      if (backendFilterV2()) return label_text();
+      return checkbox().value_.split(";")?.[0] || "";
+    });
     const input_row = $gVhhF$solidjsweb.createComponent((0, $1c63082b2da848ad$export$48513f6b9f8ce62d), {
       get value_() {
         return value();
@@ -7603,11 +7620,12 @@ function $b51a2b8b9355e66c$export$82ed4b28ecb67608({
           style: style
         } = span;
         classList.add("color");
-        $gVhhF$solidjs.createComputed(() => {
-          style.background = hex_color() || "black"; // default to black background so that the default-checkmark also is visible on dark page backgrounds
-          span.dataset.colorName = color_name();
-          classList.toggle("black-check", black_contrast_better());
-        });
+        $gVhhF$solidjs.createRenderEffect(() => style.background = hex_color() || "black" // default to black background so that the default-checkmark also is visible on dark page backgrounds (the or here can be removed when we fully go v2)
+        );
+
+        $gVhhF$solidjs.createRenderEffect(() => span.dataset.colorName = colorNameDatasetValue());
+        $gVhhF$solidjs.createRenderEffect(() => classList.toggle("black-check", setBlackCheckClass()));
+        $gVhhF$solidjs.createRenderEffect(() => classList.toggle("outlined-check", hasGradientOrOtherValidNonHexColor()));
       }
     });
     return input_row;

package/latest/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.1.6";
+export const version = "4.1.7";
 /**
  * This is a function that will safely clone an object that may contain promises.
  * It will use structuredClone to clone the object and then re-apply (copy) any promises that were in the original object to the cloned object.

package/latest/index.js

@@ -7,7 +7,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 = "4.1.6";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.1.7";
 
 /**
  * This is a function that will safely clone an object that may contain promises.
@@ -7468,15 +7468,28 @@ function $e731d52d97444b7c$export$82ed4b28ecb67608({
       return {
         value_: value_,
         name_: meta.names?.[index],
-        count_: meta.counts?.[index]
+        count_: meta.counts?.[index],
+        swatch_: meta.swatches?.[index]
       };
     });
   });
+  const backendFilterV2 = $9HbP8$createMemo(() => "swatches" in (filter_().meta || {}));
   const render_checkbox = checkbox => {
-    const color_name = $9HbP8$createMemo(() => checkbox().value_.split(";")?.[0] || "");
-    const hex_color = $9HbP8$createMemo(() => checkbox().value_.split(";")?.[1] || "");
-    const rgb_color = $9HbP8$createMemo(() => $9HbP8$hex_to_rgb(hex_color()));
-    const black_contrast_better = $9HbP8$createMemo(() => rgb_color() ? $e731d52d97444b7c$var$does_black_contrast_better(rgb_color()) : false);
+    const hex_color = $9HbP8$createMemo(() => {
+      if (backendFilterV2()) return checkbox().swatch_ || "#000";
+      return checkbox().value_.split(";")?.[1] || "";
+    });
+    const hasGradientOrOtherValidNonHexColor = $9HbP8$createMemo(() => {
+      const color = hex_color();
+      return !!color && !color.startsWith("#");
+    });
+    const setBlackCheckClass = $9HbP8$createMemo(() => {
+      // Set this to true if we should show a black tick in the checkbox for better contrast on light backgrounds
+      if (hasGradientOrOtherValidNonHexColor()) return false;
+      const rgb_color = $9HbP8$hex_to_rgb(hex_color());
+      if (!rgb_color) return false;
+      return $e731d52d97444b7c$var$does_black_contrast_better(rgb_color);
+    });
     const is_checked = $9HbP8$createMemo(() => {
       const data = existing_filter()?.data;
       const value = $91aa8ee9f431800d$export$325f75597868c4f0(checkbox().value_);
@@ -7485,6 +7498,10 @@ function $e731d52d97444b7c$export$82ed4b28ecb67608({
     const value = $9HbP8$createMemo(() => checkbox().value_);
     const label_text = $9HbP8$createMemo(() => checkbox().name_ || value() + "");
     const count = $9HbP8$createMemo(() => checkbox().count_);
+    const colorNameDatasetValue = $9HbP8$createMemo(() => {
+      if (backendFilterV2()) return label_text();
+      return checkbox().value_.split(";")?.[0] || "";
+    });
     const input_row = $9HbP8$createComponent((0, $49b79728e7d9e2a1$export$48513f6b9f8ce62d), {
       get value_() {
         return value();
@@ -7517,11 +7534,12 @@ function $e731d52d97444b7c$export$82ed4b28ecb67608({
           style: style
         } = span;
         classList.add("color");
-        $9HbP8$createComputed(() => {
-          style.background = hex_color() || "black"; // default to black background so that the default-checkmark also is visible on dark page backgrounds
-          span.dataset.colorName = color_name();
-          classList.toggle("black-check", black_contrast_better());
-        });
+        $9HbP8$createRenderEffect(() => style.background = hex_color() || "black" // default to black background so that the default-checkmark also is visible on dark page backgrounds (the or here can be removed when we fully go v2)
+        );
+
+        $9HbP8$createRenderEffect(() => span.dataset.colorName = colorNameDatasetValue());
+        $9HbP8$createRenderEffect(() => classList.toggle("black-check", setBlackCheckClass()));
+        $9HbP8$createRenderEffect(() => classList.toggle("outlined-check", hasGradientOrOtherValidNonHexColor()));
       }
     });
     return input_row;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.1.6",
+  "version": "4.1.7",
   "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": "^3.0.14",
+    "@depict-ai/plp-styling": "^3.0.15",
     "@depict-ai/types": "^5.0.6",
     "@depict-ai/utilishared": "^2.0.16",
     "solid-js": "^1.8.12"

package/server/ES10/index.cjs

@@ -99,7 +99,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447a
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $98aef9965764903d$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.1.6";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.1.7";
 
 /**
  * This is a function that will safely clone an object that may contain promises.
@@ -6231,25 +6231,33 @@ function $476a3dc36afc1938$export$82ed4b28ecb67608(_ref) {
   const checkboxes = $3hooq$solidjs.createMemo(() => {
     const meta = filter_().meta;
     return meta.values.map((value_, index) => {
-      var _meta$names, _meta$counts;
+      var _meta$names, _meta$counts, _meta$swatches;
       return {
         value_: value_,
         name_: (_meta$names = meta.names) === null || _meta$names === void 0 ? void 0 : _meta$names[index],
-        count_: (_meta$counts = meta.counts) === null || _meta$counts === void 0 ? void 0 : _meta$counts[index]
+        count_: (_meta$counts = meta.counts) === null || _meta$counts === void 0 ? void 0 : _meta$counts[index],
+        swatch_: (_meta$swatches = meta.swatches) === null || _meta$swatches === void 0 ? void 0 : _meta$swatches[index]
       };
     });
   });
+  const backendFilterV2 = $3hooq$solidjs.createMemo(() => "swatches" in (filter_().meta || {}));
   const render_checkbox = checkbox => {
-    const color_name = $3hooq$solidjs.createMemo(() => {
+    const hex_color = $3hooq$solidjs.createMemo(() => {
       var _split;
-      return ((_split = checkbox().value_.split(";")) === null || _split === void 0 ? void 0 : _split[0]) || "";
+      if (backendFilterV2()) return checkbox().swatch_ || "#000";
+      return ((_split = checkbox().value_.split(";")) === null || _split === void 0 ? void 0 : _split[1]) || "";
     });
-    const hex_color = $3hooq$solidjs.createMemo(() => {
-      var _split2;
-      return ((_split2 = checkbox().value_.split(";")) === null || _split2 === void 0 ? void 0 : _split2[1]) || "";
+    const hasGradientOrOtherValidNonHexColor = $3hooq$solidjs.createMemo(() => {
+      const color = hex_color();
+      return !!color && !color.startsWith("#");
+    });
+    const setBlackCheckClass = $3hooq$solidjs.createMemo(() => {
+      // Set this to true if we should show a black tick in the checkbox for better contrast on light backgrounds
+      if (hasGradientOrOtherValidNonHexColor()) return false;
+      const rgb_color = $3hooq$depictaiutilishared.hex_to_rgb(hex_color());
+      if (!rgb_color) return false;
+      return $476a3dc36afc1938$var$does_black_contrast_better(rgb_color);
     });
-    const rgb_color = $3hooq$solidjs.createMemo(() => $3hooq$depictaiutilishared.hex_to_rgb(hex_color()));
-    const black_contrast_better = $3hooq$solidjs.createMemo(() => rgb_color() ? $476a3dc36afc1938$var$does_black_contrast_better(rgb_color()) : false);
     const is_checked = $3hooq$solidjs.createMemo(() => {
       var _existing_filter;
       const data = (_existing_filter = existing_filter()) === null || _existing_filter === void 0 ? void 0 : _existing_filter.data;
@@ -6259,6 +6267,11 @@ function $476a3dc36afc1938$export$82ed4b28ecb67608(_ref) {
     const value = $3hooq$solidjs.createMemo(() => checkbox().value_);
     const label_text = $3hooq$solidjs.createMemo(() => checkbox().name_ || value() + "");
     const count = $3hooq$solidjs.createMemo(() => checkbox().count_);
+    const colorNameDatasetValue = $3hooq$solidjs.createMemo(() => {
+      var _split2;
+      if (backendFilterV2()) return label_text();
+      return ((_split2 = checkbox().value_.split(";")) === null || _split2 === void 0 ? void 0 : _split2[0]) || "";
+    });
     const input_row = $3hooq$solidjsweb.createComponent((0, $902a0ca2b52f3898$export$48513f6b9f8ce62d), {
       get value_() {
         return value();
@@ -6291,11 +6304,12 @@ function $476a3dc36afc1938$export$82ed4b28ecb67608(_ref) {
           style: style
         } = span;
         classList.add("color");
-        $3hooq$solidjs.createComputed(() => {
-          style.background = hex_color() || "black"; // default to black background so that the default-checkmark also is visible on dark page backgrounds
-          span.dataset.colorName = color_name();
-          classList.toggle("black-check", black_contrast_better());
-        });
+        $3hooq$solidjs.createRenderEffect(() => style.background = hex_color() || "black" // default to black background so that the default-checkmark also is visible on dark page backgrounds (the or here can be removed when we fully go v2)
+        );
+
+        $3hooq$solidjs.createRenderEffect(() => span.dataset.colorName = colorNameDatasetValue());
+        $3hooq$solidjs.createRenderEffect(() => classList.toggle("black-check", setBlackCheckClass()));
+        $3hooq$solidjs.createRenderEffect(() => classList.toggle("outlined-check", hasGradientOrOtherValidNonHexColor()));
       }
     });
     return input_row;

package/server/ES10/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.1.6";
+export const version = "4.1.7";
 /**
  * This is a function that will safely clone an object that may contain promises.
  * It will use structuredClone to clone the object and then re-apply (copy) any promises that were in the original object to the cloned object.

package/server/ES10/index.js

@@ -10,7 +10,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 = "4.1.6";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.1.7";
 
 /**
  * This is a function that will safely clone an object that may contain promises.
@@ -6142,25 +6142,33 @@ function $2cb856c297c53e6c$export$82ed4b28ecb67608(_ref) {
   const checkboxes = $b8hua$createMemo(() => {
     const meta = filter_().meta;
     return meta.values.map((value_, index) => {
-      var _meta$names, _meta$counts;
+      var _meta$names, _meta$counts, _meta$swatches;
       return {
         value_: value_,
         name_: (_meta$names = meta.names) === null || _meta$names === void 0 ? void 0 : _meta$names[index],
-        count_: (_meta$counts = meta.counts) === null || _meta$counts === void 0 ? void 0 : _meta$counts[index]
+        count_: (_meta$counts = meta.counts) === null || _meta$counts === void 0 ? void 0 : _meta$counts[index],
+        swatch_: (_meta$swatches = meta.swatches) === null || _meta$swatches === void 0 ? void 0 : _meta$swatches[index]
       };
     });
   });
+  const backendFilterV2 = $b8hua$createMemo(() => "swatches" in (filter_().meta || {}));
   const render_checkbox = checkbox => {
-    const color_name = $b8hua$createMemo(() => {
+    const hex_color = $b8hua$createMemo(() => {
       var _split;
-      return ((_split = checkbox().value_.split(";")) === null || _split === void 0 ? void 0 : _split[0]) || "";
+      if (backendFilterV2()) return checkbox().swatch_ || "#000";
+      return ((_split = checkbox().value_.split(";")) === null || _split === void 0 ? void 0 : _split[1]) || "";
     });
-    const hex_color = $b8hua$createMemo(() => {
-      var _split2;
-      return ((_split2 = checkbox().value_.split(";")) === null || _split2 === void 0 ? void 0 : _split2[1]) || "";
+    const hasGradientOrOtherValidNonHexColor = $b8hua$createMemo(() => {
+      const color = hex_color();
+      return !!color && !color.startsWith("#");
+    });
+    const setBlackCheckClass = $b8hua$createMemo(() => {
+      // Set this to true if we should show a black tick in the checkbox for better contrast on light backgrounds
+      if (hasGradientOrOtherValidNonHexColor()) return false;
+      const rgb_color = $b8hua$hex_to_rgb(hex_color());
+      if (!rgb_color) return false;
+      return $2cb856c297c53e6c$var$does_black_contrast_better(rgb_color);
     });
-    const rgb_color = $b8hua$createMemo(() => $b8hua$hex_to_rgb(hex_color()));
-    const black_contrast_better = $b8hua$createMemo(() => rgb_color() ? $2cb856c297c53e6c$var$does_black_contrast_better(rgb_color()) : false);
     const is_checked = $b8hua$createMemo(() => {
       var _existing_filter;
       const data = (_existing_filter = existing_filter()) === null || _existing_filter === void 0 ? void 0 : _existing_filter.data;
@@ -6170,6 +6178,11 @@ function $2cb856c297c53e6c$export$82ed4b28ecb67608(_ref) {
     const value = $b8hua$createMemo(() => checkbox().value_);
     const label_text = $b8hua$createMemo(() => checkbox().name_ || value() + "");
     const count = $b8hua$createMemo(() => checkbox().count_);
+    const colorNameDatasetValue = $b8hua$createMemo(() => {
+      var _split2;
+      if (backendFilterV2()) return label_text();
+      return ((_split2 = checkbox().value_.split(";")) === null || _split2 === void 0 ? void 0 : _split2[0]) || "";
+    });
     const input_row = $b8hua$createComponent((0, $19e828709c7723a0$export$48513f6b9f8ce62d), {
       get value_() {
         return value();
@@ -6202,11 +6215,12 @@ function $2cb856c297c53e6c$export$82ed4b28ecb67608(_ref) {
           style: style
         } = span;
         classList.add("color");
-        $b8hua$createComputed(() => {
-          style.background = hex_color() || "black"; // default to black background so that the default-checkmark also is visible on dark page backgrounds
-          span.dataset.colorName = color_name();
-          classList.toggle("black-check", black_contrast_better());
-        });
+        $b8hua$createRenderEffect(() => style.background = hex_color() || "black" // default to black background so that the default-checkmark also is visible on dark page backgrounds (the or here can be removed when we fully go v2)
+        );
+
+        $b8hua$createRenderEffect(() => span.dataset.colorName = colorNameDatasetValue());
+        $b8hua$createRenderEffect(() => classList.toggle("black-check", setBlackCheckClass()));
+        $b8hua$createRenderEffect(() => classList.toggle("outlined-check", hasGradientOrOtherValidNonHexColor()));
       }
     });
     return input_row;

package/server/latest/index.cjs

@@ -93,7 +93,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad99
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $c0a0659cf97e8eb2$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.1.6";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.1.7";
 
 /**
  * This is a function that will safely clone an object that may contain promises.
@@ -5901,15 +5901,28 @@ function $b51a2b8b9355e66c$export$82ed4b28ecb67608({
       return {
         value_: value_,
         name_: meta.names?.[index],
-        count_: meta.counts?.[index]
+        count_: meta.counts?.[index],
+        swatch_: meta.swatches?.[index]
       };
     });
   });
+  const backendFilterV2 = $5vyXB$solidjs.createMemo(() => "swatches" in (filter_().meta || {}));
   const render_checkbox = checkbox => {
-    const color_name = $5vyXB$solidjs.createMemo(() => checkbox().value_.split(";")?.[0] || "");
-    const hex_color = $5vyXB$solidjs.createMemo(() => checkbox().value_.split(";")?.[1] || "");
-    const rgb_color = $5vyXB$solidjs.createMemo(() => $5vyXB$depictaiutilishared.hex_to_rgb(hex_color()));
-    const black_contrast_better = $5vyXB$solidjs.createMemo(() => rgb_color() ? $b51a2b8b9355e66c$var$does_black_contrast_better(rgb_color()) : false);
+    const hex_color = $5vyXB$solidjs.createMemo(() => {
+      if (backendFilterV2()) return checkbox().swatch_ || "#000";
+      return checkbox().value_.split(";")?.[1] || "";
+    });
+    const hasGradientOrOtherValidNonHexColor = $5vyXB$solidjs.createMemo(() => {
+      const color = hex_color();
+      return !!color && !color.startsWith("#");
+    });
+    const setBlackCheckClass = $5vyXB$solidjs.createMemo(() => {
+      // Set this to true if we should show a black tick in the checkbox for better contrast on light backgrounds
+      if (hasGradientOrOtherValidNonHexColor()) return false;
+      const rgb_color = $5vyXB$depictaiutilishared.hex_to_rgb(hex_color());
+      if (!rgb_color) return false;
+      return $b51a2b8b9355e66c$var$does_black_contrast_better(rgb_color);
+    });
     const is_checked = $5vyXB$solidjs.createMemo(() => {
       const data = existing_filter()?.data;
       const value = $daa394359b026187$export$325f75597868c4f0(checkbox().value_);
@@ -5918,6 +5931,10 @@ function $b51a2b8b9355e66c$export$82ed4b28ecb67608({
     const value = $5vyXB$solidjs.createMemo(() => checkbox().value_);
     const label_text = $5vyXB$solidjs.createMemo(() => checkbox().name_ || value() + "");
     const count = $5vyXB$solidjs.createMemo(() => checkbox().count_);
+    const colorNameDatasetValue = $5vyXB$solidjs.createMemo(() => {
+      if (backendFilterV2()) return label_text();
+      return checkbox().value_.split(";")?.[0] || "";
+    });
     const input_row = $5vyXB$solidjsweb.createComponent((0, $1c63082b2da848ad$export$48513f6b9f8ce62d), {
       get value_() {
         return value();
@@ -5950,11 +5967,12 @@ function $b51a2b8b9355e66c$export$82ed4b28ecb67608({
           style: style
         } = span;
         classList.add("color");
-        $5vyXB$solidjs.createComputed(() => {
-          style.background = hex_color() || "black"; // default to black background so that the default-checkmark also is visible on dark page backgrounds
-          span.dataset.colorName = color_name();
-          classList.toggle("black-check", black_contrast_better());
-        });
+        $5vyXB$solidjs.createRenderEffect(() => style.background = hex_color() || "black" // default to black background so that the default-checkmark also is visible on dark page backgrounds (the or here can be removed when we fully go v2)
+        );
+
+        $5vyXB$solidjs.createRenderEffect(() => span.dataset.colorName = colorNameDatasetValue());
+        $5vyXB$solidjs.createRenderEffect(() => classList.toggle("black-check", setBlackCheckClass()));
+        $5vyXB$solidjs.createRenderEffect(() => classList.toggle("outlined-check", hasGradientOrOtherValidNonHexColor()));
       }
     });
     return input_row;

package/server/latest/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.1.6";
+export const version = "4.1.7";
 /**
  * This is a function that will safely clone an object that may contain promises.
  * It will use structuredClone to clone the object and then re-apply (copy) any promises that were in the original object to the cloned object.

package/server/latest/index.js

@@ -7,7 +7,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 = "4.1.6";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.1.7";
 
 /**
  * This is a function that will safely clone an object that may contain promises.
@@ -5815,15 +5815,28 @@ function $e731d52d97444b7c$export$82ed4b28ecb67608({
       return {
         value_: value_,
         name_: meta.names?.[index],
-        count_: meta.counts?.[index]
+        count_: meta.counts?.[index],
+        swatch_: meta.swatches?.[index]
       };
     });
   });
+  const backendFilterV2 = $i7OB2$createMemo(() => "swatches" in (filter_().meta || {}));
   const render_checkbox = checkbox => {
-    const color_name = $i7OB2$createMemo(() => checkbox().value_.split(";")?.[0] || "");
-    const hex_color = $i7OB2$createMemo(() => checkbox().value_.split(";")?.[1] || "");
-    const rgb_color = $i7OB2$createMemo(() => $i7OB2$hex_to_rgb(hex_color()));
-    const black_contrast_better = $i7OB2$createMemo(() => rgb_color() ? $e731d52d97444b7c$var$does_black_contrast_better(rgb_color()) : false);
+    const hex_color = $i7OB2$createMemo(() => {
+      if (backendFilterV2()) return checkbox().swatch_ || "#000";
+      return checkbox().value_.split(";")?.[1] || "";
+    });
+    const hasGradientOrOtherValidNonHexColor = $i7OB2$createMemo(() => {
+      const color = hex_color();
+      return !!color && !color.startsWith("#");
+    });
+    const setBlackCheckClass = $i7OB2$createMemo(() => {
+      // Set this to true if we should show a black tick in the checkbox for better contrast on light backgrounds
+      if (hasGradientOrOtherValidNonHexColor()) return false;
+      const rgb_color = $i7OB2$hex_to_rgb(hex_color());
+      if (!rgb_color) return false;
+      return $e731d52d97444b7c$var$does_black_contrast_better(rgb_color);
+    });
     const is_checked = $i7OB2$createMemo(() => {
       const data = existing_filter()?.data;
       const value = $91aa8ee9f431800d$export$325f75597868c4f0(checkbox().value_);
@@ -5832,6 +5845,10 @@ function $e731d52d97444b7c$export$82ed4b28ecb67608({
     const value = $i7OB2$createMemo(() => checkbox().value_);
     const label_text = $i7OB2$createMemo(() => checkbox().name_ || value() + "");
     const count = $i7OB2$createMemo(() => checkbox().count_);
+    const colorNameDatasetValue = $i7OB2$createMemo(() => {
+      if (backendFilterV2()) return label_text();
+      return checkbox().value_.split(";")?.[0] || "";
+    });
     const input_row = $i7OB2$createComponent((0, $49b79728e7d9e2a1$export$48513f6b9f8ce62d), {
       get value_() {
         return value();
@@ -5864,11 +5881,12 @@ function $e731d52d97444b7c$export$82ed4b28ecb67608({
           style: style
         } = span;
         classList.add("color");
-        $i7OB2$createComputed(() => {
-          style.background = hex_color() || "black"; // default to black background so that the default-checkmark also is visible on dark page backgrounds
-          span.dataset.colorName = color_name();
-          classList.toggle("black-check", black_contrast_better());
-        });
+        $i7OB2$createRenderEffect(() => style.background = hex_color() || "black" // default to black background so that the default-checkmark also is visible on dark page backgrounds (the or here can be removed when we fully go v2)
+        );
+
+        $i7OB2$createRenderEffect(() => span.dataset.colorName = colorNameDatasetValue());
+        $i7OB2$createRenderEffect(() => classList.toggle("black-check", setBlackCheckClass()));
+        $i7OB2$createRenderEffect(() => classList.toggle("outlined-check", hasGradientOrOtherValidNonHexColor()));
       }
     });
     return input_row;