@depict-ai/ui 2.0.1 → 2.0.3

package/latest/index.js

@@ -1,11 +1,26 @@
-import { add_to_version_info as $9HbP8$add_to_version_info, slider_fractional_factory as $9HbP8$slider_fractional_factory, make_random_classname as $9HbP8$make_random_classname, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, catchify as $9HbP8$catchify, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, layout_media_query_header as $9HbP8$layout_media_query_header, report as $9HbP8$report, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, slider_fading_factory as $9HbP8$slider_fading_factory, observer as $9HbP8$observer, is_safari as $9HbP8$is_safari, useExpandingContainer as $9HbP8$useExpandingContainer, standard_price_format as $9HbP8$standard_price_format, dlog as $9HbP8$dlog, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, javascript_media_query as $9HbP8$javascript_media_query, fetch_recs as $9HbP8$fetch_recs, snakeCasifyObject as $9HbP8$snakeCasifyObject, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, base_url as $9HbP8$base_url, get_depict_id as $9HbP8$get_depict_id, get_user_id as $9HbP8$get_user_id, get_session_id as $9HbP8$get_session_id, sort_obj as $9HbP8$sort_obj, fetch_retry as $9HbP8$fetch_retry, add_version_query_params as $9HbP8$add_version_query_params, dwarn as $9HbP8$dwarn, make_url_with_query_params as $9HbP8$make_url_with_query_params, edit_current_page_meta_tags as $9HbP8$edit_current_page_meta_tags, use_href_accessor as $9HbP8$use_href_accessor, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, queueMacroTask as $9HbP8$queueMacroTask, is_debug as $9HbP8$is_debug, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, ContainedImage as $9HbP8$ContainedImage, buildThresholdList as $9HbP8$buildThresholdList, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, ListenableSet as $9HbP8$ListenableSet, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
+import { add_to_version_info as $9HbP8$add_to_version_info, catchify as $9HbP8$catchify, slider_fractional_factory as $9HbP8$slider_fractional_factory, make_random_classname as $9HbP8$make_random_classname, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, layout_media_query_header as $9HbP8$layout_media_query_header, report as $9HbP8$report, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, slider_fading_factory as $9HbP8$slider_fading_factory, observer as $9HbP8$observer, is_safari as $9HbP8$is_safari, useExpandingContainer as $9HbP8$useExpandingContainer, standard_price_format as $9HbP8$standard_price_format, dlog as $9HbP8$dlog, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, javascript_media_query as $9HbP8$javascript_media_query, fetch_recs as $9HbP8$fetch_recs, snakeCasifyObject as $9HbP8$snakeCasifyObject, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, base_url as $9HbP8$base_url, get_depict_id as $9HbP8$get_depict_id, get_user_id as $9HbP8$get_user_id, get_session_id as $9HbP8$get_session_id, sort_obj as $9HbP8$sort_obj, fetch_retry as $9HbP8$fetch_retry, add_version_query_params as $9HbP8$add_version_query_params, dwarn as $9HbP8$dwarn, make_url_with_query_params as $9HbP8$make_url_with_query_params, edit_current_page_meta_tags as $9HbP8$edit_current_page_meta_tags, use_href_accessor as $9HbP8$use_href_accessor, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, queueMacroTask as $9HbP8$queueMacroTask, is_debug as $9HbP8$is_debug, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, ContainedImage as $9HbP8$ContainedImage, buildThresholdList as $9HbP8$buildThresholdList, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, ListenableSet as $9HbP8$ListenableSet, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
+import { createSignal as $9HbP8$createSignal, onCleanup as $9HbP8$onCleanup, createMemo as $9HbP8$createMemo, createResource as $9HbP8$createResource, Suspense as $9HbP8$Suspense, Show as $9HbP8$Show, createRenderEffect as $9HbP8$createRenderEffect, createRoot as $9HbP8$createRoot, For as $9HbP8$For, getOwner as $9HbP8$getOwner, runWithOwner as $9HbP8$runWithOwner, createEffect as $9HbP8$createEffect, untrack as $9HbP8$untrack, createUniqueId as $9HbP8$createUniqueId, createComputed as $9HbP8$createComputed, ErrorBoundary as $9HbP8$ErrorBoundary, Index as $9HbP8$Index, on as $9HbP8$on, batch as $9HbP8$batch, createReaction as $9HbP8$createReaction } from "solid-js";
 import { template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, insert as $9HbP8$insert, createComponent as $9HbP8$createComponent, mergeProps as $9HbP8$mergeProps, isServer as $9HbP8$isServer, spread as $9HbP8$spread, runHydrationEvents as $9HbP8$runHydrationEvents, addEventListener as $9HbP8$addEventListener, className as $9HbP8$className, memo as $9HbP8$memo, delegateEvents as $9HbP8$delegateEvents, effect as $9HbP8$effect, classList as $9HbP8$classList, setAttribute as $9HbP8$setAttribute, getNextMarker as $9HbP8$getNextMarker, style as $9HbP8$style, Dynamic as $9HbP8$Dynamic, use as $9HbP8$use } from "solid-js/web";
-import { createMemo as $9HbP8$createMemo, createResource as $9HbP8$createResource, Suspense as $9HbP8$Suspense, Show as $9HbP8$Show, createSignal as $9HbP8$createSignal, createRenderEffect as $9HbP8$createRenderEffect, createRoot as $9HbP8$createRoot, onCleanup as $9HbP8$onCleanup, For as $9HbP8$For, getOwner as $9HbP8$getOwner, runWithOwner as $9HbP8$runWithOwner, createEffect as $9HbP8$createEffect, untrack as $9HbP8$untrack, createUniqueId as $9HbP8$createUniqueId, createComputed as $9HbP8$createComputed, ErrorBoundary as $9HbP8$ErrorBoundary, Index as $9HbP8$Index, on as $9HbP8$on, batch as $9HbP8$batch, createReaction as $9HbP8$createReaction } from "solid-js";
 
 /*! 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.0.1";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.0.3";
+
+/** @jsxImportSource solid-js */
+
+function $0fdb37d8ddabef25$export$9f191182275e9ef(what_to_watch) {
+  const [size, setSize] = $9HbP8$createSignal();
+  const resizeObserver = new ResizeObserver($9HbP8$catchify(records => {
+    for (let j = 0; j < records.length; j++) {
+      const width = records[j].borderBoxSize?.[0]?.inlineSize ?? what_to_watch.getBoundingClientRect().width;
+      setSize(width);
+    }
+  }));
+  resizeObserver.observe(what_to_watch);
+  $9HbP8$onCleanup(() => resizeObserver.disconnect());
+  return size;
+}
 const $b5cccc8ee7d24677$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -1362,9 +1377,9 @@ function $1adfe60f3a14a1d7$export$fecbb157621501bd({
   return outmost_element;
 }
 $9HbP8$delegateEvents(["click"]);
-const $87c712b5b33f24f7$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<span class="count"></span>`, 2),
-  $87c712b5b33f24f7$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<label class="input-row"><div class="left"><input type="checkbox"><span class="custom-indicator"></span><span class="text line-clamp"></span></div><!#><!/></label>`, 11);
-const $87c712b5b33f24f7$export$48513f6b9f8ce62d = props => {
+const $49b79728e7d9e2a1$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<span class="count"></span>`, 2),
+  $49b79728e7d9e2a1$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<label class="input-row"><div class="left"><input type="checkbox"><span class="custom-indicator"></span><span class="text line-clamp"></span></div><!#><!/></label>`, 11);
+const $49b79728e7d9e2a1$export$48513f6b9f8ce62d = props => {
   // It seems like there's no diffing without memos here (since we often just have computations in the getters above that update to the same result often because their dependencies change with unrelated changes often), so put memos here to avoid unneeded DOM changes
   const count = $9HbP8$createMemo(() => props.count_);
   const label = $9HbP8$createMemo(() => props.label_);
@@ -1373,7 +1388,7 @@ const $87c712b5b33f24f7$export$48513f6b9f8ce62d = props => {
   const is_count_zero = $9HbP8$createMemo(() => props.is_count_zero_ || count() === 0);
   const id = $9HbP8$make_random_classname();
   return (/* We can't use actual margin because ExpandingContainer gets messed up */(() => {
-      const _el$ = $9HbP8$getNextElement($87c712b5b33f24f7$var$_tmpl$2),
+      const _el$ = $9HbP8$getNextElement($49b79728e7d9e2a1$var$_tmpl$2),
         _el$2 = _el$.firstChild,
         _el$3 = _el$2.firstChild,
         _el$4 = _el$3.nextSibling,
@@ -1400,7 +1415,7 @@ const $87c712b5b33f24f7$export$48513f6b9f8ce62d = props => {
           return count() != undefined;
         },
         get children() {
-          const _el$6 = $9HbP8$getNextElement($87c712b5b33f24f7$var$_tmpl$);
+          const _el$6 = $9HbP8$getNextElement($49b79728e7d9e2a1$var$_tmpl$);
           $9HbP8$insert(_el$6, count);
           return _el$6;
         }
@@ -1488,7 +1503,7 @@ function $a4601e6bea3ed1e6$export$dd948f91abc3a1c4({
   });
   const render_checkbox = checkbox => {
     // Checkbox always calls the getters in props, so we don't wrap these values into memos
-    return $9HbP8$createComponent((0, $87c712b5b33f24f7$export$48513f6b9f8ce62d), {
+    return $9HbP8$createComponent((0, $49b79728e7d9e2a1$export$48513f6b9f8ce62d), {
       get value_() {
         return checkbox().value_;
       },
@@ -2190,7 +2205,7 @@ function $1c8cac76cb67e9af$var$render_stuff(data, existing_filter, i18n_) {
               [_el$8, _co$3] = $9HbP8$getNextMarker(_el$7.nextSibling),
               _el$9 = _el$8.nextSibling,
               [_el$10, _co$4] = $9HbP8$getNextMarker(_el$9.nextSibling);
-            $9HbP8$insert(_el$6, $9HbP8$createComponent((0, $87c712b5b33f24f7$export$48513f6b9f8ce62d), {
+            $9HbP8$insert(_el$6, $9HbP8$createComponent((0, $49b79728e7d9e2a1$export$48513f6b9f8ce62d), {
               get value_() {
                 return JSON.stringify(value()?.value_);
               },
@@ -2444,9 +2459,11 @@ function $1c8cac76cb67e9af$var$expand_until_choice(data_structure) {
     }
   });
 }
-const $93716a9ad0dea854$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class="checkbox-grid"></div>`, 2),
+const $93716a9ad0dea854$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class="checkbox-grid" style="position:absolute;z-index:-1;pointer-events:none;opacity:0"></div>`, 2),
   $93716a9ad0dea854$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<span class="count-wrapper"><span class="count"></span></span>`, 4),
-  $93716a9ad0dea854$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<button class="major-minor-transition"><!#><!/><!#><!/></button>`, 6);
+  $93716a9ad0dea854$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<button><!#><!/><!#><!/></button>`, 6);
+const $93716a9ad0dea854$var$gap_px = 5;
+const $93716a9ad0dea854$var$max_columns = 3;
 const $93716a9ad0dea854$export$414f6a19d38e655c = ({
   filter_: filter_,
   selected_filters_: [get_selected_filters, set_selected_filters]
@@ -2469,74 +2486,182 @@ const $93716a9ad0dea854$export$414f6a19d38e655c = ({
       count_: meta.counts?.[index]
     }));
   });
-  return (() => {
+  const [sizes_set, set_sizes_set] = $9HbP8$createSignal(new Set(), {
+    equals: false
+  });
+  const [cols_at_size, set_cols_at_size] = $9HbP8$createSignal([[1, "0px", ""]]);
+  const [container, set_container] = $9HbP8$createSignal();
+  const container_width_accessor = $9HbP8$createMemo(() => {
+    const element = container();
+    if (!element) return;
+    return $0fdb37d8ddabef25$export$9f191182275e9ef(element);
+  });
+  const [shadow_children, set_shadow_children] = $9HbP8$createSignal(new Set(), {
+    equals: false
+  });
+  const shadow_grid = (() => {
     const _el$ = $9HbP8$getNextElement($93716a9ad0dea854$var$_tmpl$);
-    $9HbP8$insert(_el$, $9HbP8$createComponent((0, $9HbP8$Index), {
-      get each() {
-        return buttons();
-      },
-      children: value => {
-        const is_selected = $9HbP8$createMemo(() => existing_filter()?.data?.includes(value().value_));
-        return (() => {
-          const _el$2 = $9HbP8$getNextElement($93716a9ad0dea854$var$_tmpl$3),
-            _el$5 = _el$2.firstChild,
-            [_el$6, _co$] = $9HbP8$getNextMarker(_el$5.nextSibling),
-            _el$7 = _el$6.nextSibling,
-            [_el$8, _co$2] = $9HbP8$getNextMarker(_el$7.nextSibling);
-          $9HbP8$addEventListener(_el$2, "click", $9HbP8$catchify(() => {
-            const set_filter = existing_filter();
-            const {
-              field: field,
-              op: op
-            } = filter_();
-            const base_object = set_filter ? set_filter : {
-              op: op,
-              field: field
-            };
-            const old_data = base_object.data;
-            const new_data = [...(Array.isArray(old_data) ? [...old_data] : old_data ? [old_data] : [])];
-            const new_filter_object = {
-              ...base_object,
-              data: new_data
-            };
-            if (!is_selected()) new_filter_object.data.push(value().value_);else new_filter_object.data = new_filter_object.data.filter(v => v !== value().value_);
-            const selected_filters = [...get_selected_filters().filter(f => f !== set_filter), ...(new_filter_object.data.length ? [new_filter_object] : [])];
-            set_selected_filters(selected_filters);
-          }), true);
-          $9HbP8$insert(_el$2, () => value().value_, _el$6, _co$);
-          $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $9HbP8$Show), {
-            get when() {
-              return value().count_ != undefined;
-            },
-            get children() {
-              const _el$3 = $9HbP8$getNextElement($93716a9ad0dea854$var$_tmpl$2),
-                _el$4 = _el$3.firstChild;
-              $9HbP8$insert(_el$4, () => value().count_);
-              return _el$3;
-            }
-          }), _el$8, _co$2);
-          $9HbP8$effect(_p$ => {
-            const _v$ = value().count_ === 0 && !is_selected(),
-              _v$2 = !is_selected(),
-              _v$3 = !!is_selected();
-            _v$ !== _p$._v$ && (_el$2.disabled = _p$._v$ = _v$);
-            _v$2 !== _p$._v$2 && _el$2.classList.toggle("minor", _p$._v$2 = _v$2);
-            _v$3 !== _p$._v$3 && _el$2.classList.toggle("major", _p$._v$3 = _v$3);
-            return _p$;
-          }, {
-            _v$: undefined,
-            _v$2: undefined,
-            _v$3: undefined
-          });
-          $9HbP8$runHydrationEvents();
-          return _el$2;
-        })();
-      }
-    }));
+    $9HbP8$insert(_el$, () => [...shadow_children()]);
     return _el$;
-  })();
+  })(); // for getting the smallest possible sizes of all the items
+  $9HbP8$createEffect(() => {
+    const container_width = container_width_accessor()?.();
+    if (container_width == undefined) return;
+    $93716a9ad0dea854$var$adjust_sizes(container_width, sizes_set(), set_cols_at_size);
+  });
+  return [shadow_grid, $9HbP8$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), {
+    get cols_at_size() {
+      return cols_at_size();
+    },
+    grid_spacing: $93716a9ad0dea854$var$gap_px + "px",
+    rows: "all",
+    layout: "grid",
+    element_attributes: {
+      class: "checkbox-grid",
+      ref: el => set_container(el)
+    },
+    get children() {
+      return $9HbP8$createComponent((0, $9HbP8$Index), {
+        get each() {
+          return buttons();
+        },
+        children: value => {
+          const is_selected = $9HbP8$createMemo(() => existing_filter()?.data?.includes(value().value_));
+          const MakeButton = attributes => (() => {
+            const _el$2 = $9HbP8$getNextElement($93716a9ad0dea854$var$_tmpl$3),
+              _el$5 = _el$2.firstChild,
+              [_el$6, _co$] = $9HbP8$getNextMarker(_el$5.nextSibling),
+              _el$7 = _el$6.nextSibling,
+              [_el$8, _co$2] = $9HbP8$getNextMarker(_el$7.nextSibling);
+            $9HbP8$spread(_el$2, $9HbP8$mergeProps(attributes, {
+              get disabled() {
+                return $9HbP8$memo(() => value().count_ === 0)() && !is_selected();
+              },
+              get classList() {
+                return {
+                  minor: !is_selected(),
+                  major: is_selected(),
+                  "major-minor-transition": true
+                };
+              },
+              get onClick() {
+                return $9HbP8$catchify(() => {
+                  const set_filter = existing_filter();
+                  const {
+                    field: field,
+                    op: op
+                  } = filter_();
+                  const base_object = set_filter ? set_filter : {
+                    op: op,
+                    field: field
+                  };
+                  const old_data = base_object.data;
+                  const new_data = [...(Array.isArray(old_data) ? [...old_data] : old_data ? [old_data] : [])];
+                  const new_filter_object = {
+                    ...base_object,
+                    data: new_data
+                  };
+                  if (!is_selected()) new_filter_object.data.push(value().value_);else new_filter_object.data = new_filter_object.data.filter(v => v !== value().value_);
+                  const selected_filters = [...get_selected_filters().filter(f => f !== set_filter), ...(new_filter_object.data.length ? [new_filter_object] : [])];
+                  set_selected_filters(selected_filters);
+                });
+              }
+            }), false, true);
+            $9HbP8$insert(_el$2, () => value().value_, _el$6, _co$);
+            $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $9HbP8$Show), {
+              get when() {
+                return value().count_ != undefined;
+              },
+              get children() {
+                const _el$3 = $9HbP8$getNextElement($93716a9ad0dea854$var$_tmpl$2),
+                  _el$4 = _el$3.firstChild;
+                $9HbP8$insert(_el$4, () => value().count_);
+                return _el$3;
+              }
+            }), _el$8, _co$2);
+            $9HbP8$runHydrationEvents();
+            return _el$2;
+          })();
+          const invisible_size_button = $9HbP8$createComponent(MakeButton, {});
+          const smallest_possible_size = $0fdb37d8ddabef25$export$9f191182275e9ef(invisible_size_button); // create ResizeObserver for the invisible size button where the div hugs its content
+          const sizes_value = $9HbP8$untrack(sizes_set);
+          const shadow_children_value = $9HbP8$untrack(shadow_children);
+          sizes_value.add(smallest_possible_size);
+          set_sizes_set(sizes_value);
+          shadow_children_value.add(invisible_size_button);
+          set_shadow_children(shadow_children_value);
+          $9HbP8$onCleanup(() => {
+            const sizes_value = $9HbP8$untrack(sizes_set);
+            const shadow_children_value = $9HbP8$untrack(shadow_children);
+            sizes_value.delete(smallest_possible_size);
+            set_sizes_set(sizes_value);
+            shadow_children_value.delete(invisible_size_button);
+            set_shadow_children(shadow_children_value);
+          });
+          // The actual button that will be visible
+          return $9HbP8$createComponent(MakeButton, {});
+        }
+      });
+    }
+  })];
 };
-$9HbP8$delegateEvents(["click"]);
+/**
+ * Calculate and apply cols_at_size overrides to fit as many items as possible in a row, evenly spaced
+ */
+function $93716a9ad0dea854$var$adjust_sizes(container_width, sizes, set_cols_at_size) {
+  let current_row_index = 0;
+  let current_row_items = [];
+  const column_to_row_result = {};
+  const check_would_fit_evenly = (min_size_of_item, at_number_of_columnns) => {
+    const would_have_even_size = container_width / at_number_of_columnns - (at_number_of_columnns * 2 - 2) * ($93716a9ad0dea854$var$gap_px / 2) / at_number_of_columnns; // What size would our element have (without gaps), given that now every column had the same width (equation from Layout.tsx)
+    return would_have_even_size >= min_size_of_item; // would this item still fit if we added another column? (probably what the caller has done with at_number_of_columns), given that every item has the same size
+  };
+
+  for (const size_item of sizes) {
+    const size = size_item();
+    if (size == undefined) return; // Only do stuff if we know all the sizes
+    const current_row_length = current_row_items.length;
+    const can_add_another_column_initial_val = current_row_length < $93716a9ad0dea854$var$max_columns; // allow max 4 items per row
+    let can_add_another_column = can_add_another_column_initial_val;
+    if (can_add_another_column)
+      // can we actually? Since adding another column changes the size of all elements in the row we need to check all of them
+      for (let i = -1; i < current_row_length; i++) {
+        // -1 is for the new item we're adding and every item is guaranteed to exist
+        const size_to_check = current_row_items[i] ?? size;
+        const would_have_columns = current_row_length + 1; // if we added another column
+        const would_fit_evenly = check_would_fit_evenly(size_to_check, would_have_columns); // see comments in check_would_fit_evenly
+        if (!would_fit_evenly) {
+          can_add_another_column = false;
+          break;
+        }
+      }
+    if (can_add_another_column) current_row_items.push(size);else {
+      column_to_row_result[++current_row_index] = current_row_length || 1; // overrides is indexed by 1 it seems, therefore ++curent_row_index
+      current_row_items = [size]; // save current item for next row
+    }
+  }
+
+  const items_left_to_add = current_row_items.length;
+  if (items_left_to_add) {
+    let num_columns = 1; // We want to have as close to max_columns as possible in the last row
+    let fits = true;
+    do
+    // Check if more columns would fit
+    for (let i = 0; i < items_left_to_add; i++) {
+      const item = current_row_items[i];
+      const would_fit_evenly = check_would_fit_evenly(item, num_columns + 1);
+      if (!would_fit_evenly) {
+        fits = false;
+        break;
+      }
+    } while (fits && ++num_columns < $93716a9ad0dea854$var$max_columns);
+    column_to_row_result[++current_row_index] = num_columns; // Add last row that's left after loop finished
+  }
+
+  set_cols_at_size([[1, "0px", "", null, {
+    overrides: column_to_row_result
+  }]]);
+}
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $9HbP8$createSignal(false);
   $9HbP8$onCleanup($9HbP8$javascript_media_query(media_query, ({
@@ -2581,7 +2706,7 @@ function $e731d52d97444b7c$export$82ed4b28ecb67608({
     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 input_row = $9HbP8$createComponent((0, $87c712b5b33f24f7$export$48513f6b9f8ce62d), {
+    const input_row = $9HbP8$createComponent((0, $49b79728e7d9e2a1$export$48513f6b9f8ce62d), {
       get value_() {
         return checkbox().value_;
       },
@@ -10573,4 +10698,4 @@ const $4690a06c8489dcd0$export$c3834fa86c616831 = [[4], [3, 1024], [2, 901]];
 const $4690a06c8489dcd0$export$864d304a0bc46829 = "2%";
 const $4690a06c8489dcd0$export$7bf543b9d9be2c22 = (0, $e4615ecd1849548f$export$b91cec6bdc6b32a1);
 $9HbP8$add_to_version_info("ui", (0, $ec291e0010116877$export$83d89fbfd8236492));
-export { $ee116da074deb002$export$9574e176201e5e8d as RecommendationSlider, $9ea5383493360761$export$9756467d34d91cdb as RecommendationGrid, $e8ffe11ed01df0fe$export$6e5611bc7e57e477 as ShopifyResponsiveImg, $e8ffe11ed01df0fe$export$e6fffe67d4cdd848 as makeSizeAccessor, $f18d425032111270$export$94026ee33dbabc26 as ImageContainer, $b7436a6d1fd64e3b$export$b69d0d92862de18b as SentryErrorBoundary, $6bb0a0c563dff4bb$export$6c6d7a51fa9aa15d as ExpandingDetails, $c16e74cfe125bb05$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $1adfe60f3a14a1d7$export$fecbb157621501bd as SelectedFilters, $fab07f52c9861732$export$3f1a388cc0d8fed7 as FilterBody, $5efb5894079b220e$export$b288c38ae3fddb56 as create_modified_filters, $c8d5ff4524619fcd$export$d21e32dfedac04be as SolidLayout, $194bd6b8e4c59830$export$79b1565500412d9b as general_modal_abstraction, $19976a74d273070d$export$3b621d86b1566b2 as CrossIcon, $fbbadcb080ad1d4a$export$8be2714ec7f169ee as GenericSliderArrowButton, $c58717f39bf51647$export$58e808b1db15d3bc as fetchDepictRecommendations, $961b5c64bef4662f$export$de035477d6fef996 as QuickLinks, $961b5c64bef4662f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $e4615ecd1849548f$export$b91cec6bdc6b32a1 as CategoryTitle, $a6e23a834336fc19$export$824dde41348efed1 as embedded_num_products, $c9312089e8983364$export$643598a327b5833e as get_categories, $961b5c64bef4662f$export$f34314aa9505732e as DepictCategory, $961b5c64bef4662f$export$e2bf8ce7779e827e as CategoryPage, $806c97b931758897$export$ac6237957a15b3f0 as DepictSearch, $806c97b931758897$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $806c97b931758897$export$f2dc7e4e4aa11abb as SearchPage, $806c97b931758897$export$316f6f283ae64765 as SearchField, $4fd48cb976bf1789$export$aa14a9f43128f61f as ProductCardError, $6891c018a834cfdd$export$d86a33413558014e as open_modal_with_alignment, $bb15dfb548a7666e$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $b6d5529b253681aa$export$b3ad617e9036868 as align_field, $b5cccc8ee7d24677$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $926b1b5ba2239356$export$1233ca167bf71f9a as styles_to_valid_css_string, $aea1edf92433e81e$export$fe334901e8bebd57 as disable_scrolling, $6e8944558258054f$export$d0596b5cae35ad4 as open_search_with_shift_slash, $7fa23e2a0079eca4$export$e015ed2f2950f2e3 as DepictAPI, $dc9262ef6f786812$export$d9f36cf74e24d595 as media_query_to_accessor, $6936724b9e0b98d5$export$689e204eadb33baf as setup_fast_leave, $bf52d9f9eebd1938$export$5196e4c01fa56fcb as show_toast, $8c0f86cb3e266eeb$export$a71e92cfbb498adc as SolidFormatPrice, $4ca91518c9a35379$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $d20eff0aadc28983$export$acb3eaade4b23afd as BasePlaceholder, $d134eae24341b4a1$export$89c6019e4baa40b1 as TextPlaceholder, $7f60f09116a3fe61$export$3f37af283f8fb843 as ImagePlaceholder, $753e9b2889a47c89$export$3ccaa27d81dd8556 as PageReplacer, $4690a06c8489dcd0$export$864d304a0bc46829 as defaultGridSpacing, $4690a06c8489dcd0$export$c3834fa86c616831 as defaultColsAtSize, $4690a06c8489dcd0$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $ec291e0010116877$export$83d89fbfd8236492 as version };
+export { $0fdb37d8ddabef25$export$9f191182275e9ef as make_accurate_size_accessor, $ee116da074deb002$export$9574e176201e5e8d as RecommendationSlider, $9ea5383493360761$export$9756467d34d91cdb as RecommendationGrid, $e8ffe11ed01df0fe$export$6e5611bc7e57e477 as ShopifyResponsiveImg, $e8ffe11ed01df0fe$export$e6fffe67d4cdd848 as makeSizeAccessor, $f18d425032111270$export$94026ee33dbabc26 as ImageContainer, $b7436a6d1fd64e3b$export$b69d0d92862de18b as SentryErrorBoundary, $6bb0a0c563dff4bb$export$6c6d7a51fa9aa15d as ExpandingDetails, $c16e74cfe125bb05$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $1adfe60f3a14a1d7$export$fecbb157621501bd as SelectedFilters, $fab07f52c9861732$export$3f1a388cc0d8fed7 as FilterBody, $5efb5894079b220e$export$b288c38ae3fddb56 as create_modified_filters, $c8d5ff4524619fcd$export$d21e32dfedac04be as SolidLayout, $194bd6b8e4c59830$export$79b1565500412d9b as general_modal_abstraction, $19976a74d273070d$export$3b621d86b1566b2 as CrossIcon, $fbbadcb080ad1d4a$export$8be2714ec7f169ee as GenericSliderArrowButton, $c58717f39bf51647$export$58e808b1db15d3bc as fetchDepictRecommendations, $961b5c64bef4662f$export$de035477d6fef996 as QuickLinks, $961b5c64bef4662f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $e4615ecd1849548f$export$b91cec6bdc6b32a1 as CategoryTitle, $a6e23a834336fc19$export$824dde41348efed1 as embedded_num_products, $c9312089e8983364$export$643598a327b5833e as get_categories, $961b5c64bef4662f$export$f34314aa9505732e as DepictCategory, $961b5c64bef4662f$export$e2bf8ce7779e827e as CategoryPage, $806c97b931758897$export$ac6237957a15b3f0 as DepictSearch, $806c97b931758897$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $806c97b931758897$export$f2dc7e4e4aa11abb as SearchPage, $806c97b931758897$export$316f6f283ae64765 as SearchField, $4fd48cb976bf1789$export$aa14a9f43128f61f as ProductCardError, $6891c018a834cfdd$export$d86a33413558014e as open_modal_with_alignment, $bb15dfb548a7666e$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $b6d5529b253681aa$export$b3ad617e9036868 as align_field, $b5cccc8ee7d24677$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $926b1b5ba2239356$export$1233ca167bf71f9a as styles_to_valid_css_string, $aea1edf92433e81e$export$fe334901e8bebd57 as disable_scrolling, $6e8944558258054f$export$d0596b5cae35ad4 as open_search_with_shift_slash, $7fa23e2a0079eca4$export$e015ed2f2950f2e3 as DepictAPI, $dc9262ef6f786812$export$d9f36cf74e24d595 as media_query_to_accessor, $6936724b9e0b98d5$export$689e204eadb33baf as setup_fast_leave, $bf52d9f9eebd1938$export$5196e4c01fa56fcb as show_toast, $8c0f86cb3e266eeb$export$a71e92cfbb498adc as SolidFormatPrice, $4ca91518c9a35379$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $d20eff0aadc28983$export$acb3eaade4b23afd as BasePlaceholder, $d134eae24341b4a1$export$89c6019e4baa40b1 as TextPlaceholder, $7f60f09116a3fe61$export$3f37af283f8fb843 as ImagePlaceholder, $753e9b2889a47c89$export$3ccaa27d81dd8556 as PageReplacer, $4690a06c8489dcd0$export$864d304a0bc46829 as defaultGridSpacing, $4690a06c8489dcd0$export$c3834fa86c616831 as defaultColsAtSize, $4690a06c8489dcd0$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $ec291e0010116877$export$83d89fbfd8236492 as version };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "2.0.1",
+  "version": "2.0.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",
@@ -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.1",
+    "@depict-ai/plp-styling": "^1.2.4",
     "@depict-ai/types": "^1.0.39",
     "@depict-ai/utilishared": "^1.0.41",
     "solid-js": "^1.7.3"