@depict-ai/ui 2.0.0 → 2.0.2

package/latest/index.js

@@ -5,7 +5,7 @@ import { createMemo as $9HbP8$createMemo, createResource as $9HbP8$createResourc
 /*! 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.0";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.0.2";
 const $b5cccc8ee7d24677$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -650,9 +650,18 @@ const $9ea5383493360761$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<button class
 function $9ea5383493360761$export$9756467d34d91cdb(props) {
   return $16b52438165aafe2$export$23fca46f3143581f(() => {
     const rows_object_ = $9HbP8$createMemo(() => {
-      const view_more_button = props.view_more_button;
-      if (!view_more_button) return "all";
+      const {
+        view_more_button: view_more_button,
+        max_rows: max_rows
+      } = props;
+      if (!view_more_button) {
+        if (max_rows) return {
+          max_rows: max_rows
+        };
+        return "all";
+      }
       return {
+        max_rows: max_rows,
         start_rows: view_more_button.start_rows,
         rows_per_click: view_more_button.rows_per_click ?? 2,
         button: (() => {
@@ -1353,9 +1362,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_);
@@ -1364,7 +1373,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,
@@ -1391,7 +1400,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;
         }
@@ -1479,7 +1488,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_;
       },
@@ -2181,7 +2190,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_);
               },
@@ -2435,9 +2444,26 @@ function $1c8cac76cb67e9af$var$expand_until_choice(data_structure) {
     }
   });
 }
-const $93716a9ad0dea854$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class="checkbox-grid"></div>`, 2),
+
+/** @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 $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]
@@ -2460,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, ({
@@ -2572,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_;
       },

package/package.json

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

package/server/ES10/index.cjs

@@ -66,7 +66,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.0.0";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.0.2";
 const $5401a6698b0c0658$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -692,9 +692,18 @@ function $41227f10ad680afd$export$9756467d34d91cdb(props) {
   return $d05611ff6b8c8357$export$23fca46f3143581f(() => {
     const rows_object_ = $3hooq$solidjs.createMemo(() => {
       var _view_more_button$row;
-      const view_more_button = props.view_more_button;
-      if (!view_more_button) return "all";
+      const {
+        view_more_button: view_more_button,
+        max_rows: max_rows
+      } = props;
+      if (!view_more_button) {
+        if (max_rows) return {
+          max_rows: max_rows
+        };
+        return "all";
+      }
       return {
+        max_rows: max_rows,
         start_rows: view_more_button.start_rows,
         rows_per_click: (_view_more_button$row = view_more_button.rows_per_click) !== null && _view_more_button$row !== void 0 ? _view_more_button$row : 2,
         button: $3hooq$solidjsweb.ssr($41227f10ad680afd$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape(view_more_button.text))
@@ -1119,9 +1128,9 @@ function $c5842bdb10e57229$export$fecbb157621501bd(_ref) {
   }));
   return outmost_element;
 }
-const $6b92e147c6e24046$var$_tmpl$ = ["<span", ' class="count">', "</span>"],
-  $6b92e147c6e24046$var$_tmpl$2 = ["<label", ' class="', '"', '><div class="left"><input type="checkbox"', "", "", '><span class="custom-indicator"></span><span class="text line-clamp">', "</span></div><!--#-->", "<!--/--></label>"];
-const $6b92e147c6e24046$export$48513f6b9f8ce62d = props => {
+const $902a0ca2b52f3898$var$_tmpl$ = ["<span", ' class="count">', "</span>"],
+  $902a0ca2b52f3898$var$_tmpl$2 = ["<label", ' class="', '"', '><div class="left"><input type="checkbox"', "", "", '><span class="custom-indicator"></span><span class="text line-clamp">', "</span></div><!--#-->", "<!--/--></label>"];
+const $902a0ca2b52f3898$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 = $3hooq$solidjs.createMemo(() => props.count_);
   const label = $3hooq$solidjs.createMemo(() => props.label_);
@@ -1129,12 +1138,12 @@ const $6b92e147c6e24046$export$48513f6b9f8ce62d = props => {
   const value = $3hooq$solidjs.createMemo(() => props.value_);
   const is_count_zero = $3hooq$solidjs.createMemo(() => props.is_count_zero_ || count() === 0);
   const id = $3hooq$depictaiutilishared.make_random_classname();
-  return (/* We can't use actual margin because ExpandingContainer gets messed up */$3hooq$solidjsweb.ssr($6b92e147c6e24046$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), "input-row ".concat(is_count_zero() ? "count-0" : ""), $3hooq$solidjsweb.ssrAttribute("for", $3hooq$solidjsweb.escape(id, true), false), $3hooq$solidjsweb.ssrAttribute("name", $3hooq$solidjsweb.escape(value(), true), false) + $3hooq$solidjsweb.ssrAttribute("id", $3hooq$solidjsweb.escape(id, true), false), $3hooq$solidjsweb.ssrAttribute("checked", checked(), true), $3hooq$solidjsweb.ssrAttribute("disabled", !checked() && is_count_zero(), true), $3hooq$solidjsweb.escape(label()) || $3hooq$solidjsweb.escape(value()), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+  return (/* We can't use actual margin because ExpandingContainer gets messed up */$3hooq$solidjsweb.ssr($902a0ca2b52f3898$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), "input-row ".concat(is_count_zero() ? "count-0" : ""), $3hooq$solidjsweb.ssrAttribute("for", $3hooq$solidjsweb.escape(id, true), false), $3hooq$solidjsweb.ssrAttribute("name", $3hooq$solidjsweb.escape(value(), true), false) + $3hooq$solidjsweb.ssrAttribute("id", $3hooq$solidjsweb.escape(id, true), false), $3hooq$solidjsweb.ssrAttribute("checked", checked(), true), $3hooq$solidjsweb.ssrAttribute("disabled", !checked() && is_count_zero(), true), $3hooq$solidjsweb.escape(label()) || $3hooq$solidjsweb.escape(value()), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
       get when() {
         return count() != undefined;
       },
       get children() {
-        return $3hooq$solidjsweb.ssr($6b92e147c6e24046$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape(count()));
+        return $3hooq$solidjsweb.ssr($902a0ca2b52f3898$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape(count()));
       }
     })))
   );
@@ -1193,7 +1202,7 @@ function $9b54b9c5381716eb$export$dd948f91abc3a1c4(_ref) {
   });
   const render_checkbox = checkbox => {
     // Checkbox always calls the getters in props, so we don't wrap these values into memos
-    return $3hooq$solidjsweb.createComponent((0, $6b92e147c6e24046$export$48513f6b9f8ce62d), {
+    return $3hooq$solidjsweb.createComponent((0, $902a0ca2b52f3898$export$48513f6b9f8ce62d), {
       get value_() {
         return checkbox().value_;
       },
@@ -1701,7 +1710,7 @@ function $9c1d49181fb3002a$var$render_stuff(data, existing_filter, i18n_) {
             var _value;
             return !!Object.keys(((_value = value()) === null || _value === void 0 ? void 0 : _value.children_) || {}).length;
           });
-          return $3hooq$solidjsweb.ssr($9c1d49181fb3002a$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), "checkbox-details ".concat(has_expandable() ? "expandable" : ""), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $6b92e147c6e24046$export$48513f6b9f8ce62d), {
+          return $3hooq$solidjsweb.ssr($9c1d49181fb3002a$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), "checkbox-details ".concat(has_expandable() ? "expandable" : ""), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $902a0ca2b52f3898$export$48513f6b9f8ce62d), {
             get value_() {
               var _value2;
               return JSON.stringify((_value2 = value()) === null || _value2 === void 0 ? void 0 : _value2.value_);
@@ -1972,9 +1981,26 @@ function $9c1d49181fb3002a$var$expand_until_choice(data_structure) {
     }
   });
 }
-const $cd0e5524f9476f9b$var$_tmpl$ = ["<div", ' class="checkbox-grid">', "</div>"],
-  $cd0e5524f9476f9b$var$_tmpl$2 = ["<span", ' class="count-wrapper"><span class="count">', "</span></span>"],
-  $cd0e5524f9476f9b$var$_tmpl$3 = ["<button", "", ' class="', '"><!--#-->', "<!--/--><!--#-->", "<!--/--></button>"];
+
+/** @jsxImportSource solid-js */
+
+function $13671aa5e984acd9$export$9f191182275e9ef(what_to_watch) {
+  const [size, setSize] = $3hooq$solidjs.createSignal();
+  const resizeObserver = new ResizeObserver($3hooq$depictaiutilishared.catchify(records => {
+    for (let j = 0; j < records.length; j++) {
+      var _records$j$borderBoxS, _records$j$borderBoxS2, _records$j$borderBoxS3;
+      const width = (_records$j$borderBoxS = (_records$j$borderBoxS2 = records[j].borderBoxSize) === null || _records$j$borderBoxS2 === void 0 ? void 0 : (_records$j$borderBoxS3 = _records$j$borderBoxS2[0]) === null || _records$j$borderBoxS3 === void 0 ? void 0 : _records$j$borderBoxS3.inlineSize) !== null && _records$j$borderBoxS !== void 0 ? _records$j$borderBoxS : what_to_watch.getBoundingClientRect().width;
+      setSize(width);
+    }
+  }));
+  resizeObserver.observe(what_to_watch);
+  $3hooq$solidjs.onCleanup(() => resizeObserver.disconnect());
+  return size;
+}
+const $cd0e5524f9476f9b$var$_tmpl$ = ["<div", ' class="checkbox-grid" style="position:absolute;z-index:-1;pointer-events:none;opacity:0">', "</div>"],
+  $cd0e5524f9476f9b$var$_tmpl$2 = ["<span", ' class="count-wrapper"><span class="count">', "</span></span>"];
+const $cd0e5524f9476f9b$var$gap_px = 5;
+const $cd0e5524f9476f9b$var$max_columns = 3;
 const $cd0e5524f9476f9b$export$414f6a19d38e655c = _ref => {
   let {
     filter_: filter_,
@@ -2004,26 +2030,144 @@ const $cd0e5524f9476f9b$export$414f6a19d38e655c = _ref => {
       };
     });
   });
-  return $3hooq$solidjsweb.ssr($cd0e5524f9476f9b$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Index), {
-    get each() {
-      return buttons();
+  const [sizes_set, set_sizes_set] = $3hooq$solidjs.createSignal(new Set(), {
+    equals: false
+  });
+  const [cols_at_size, set_cols_at_size] = $3hooq$solidjs.createSignal([[1, "0px", ""]]);
+  const [container, set_container] = $3hooq$solidjs.createSignal();
+  const container_width_accessor = $3hooq$solidjs.createMemo(() => {
+    const element = container();
+    if (!element) return;
+    return $13671aa5e984acd9$export$9f191182275e9ef(element);
+  });
+  const [shadow_children, set_shadow_children] = $3hooq$solidjs.createSignal(new Set(), {
+    equals: false
+  });
+  const shadow_grid = $3hooq$solidjsweb.ssr($cd0e5524f9476f9b$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape([...shadow_children()])); // for getting the smallest possible sizes of all the items
+  $3hooq$solidjs.createEffect(() => {
+    var _container_width_acce;
+    const container_width = (_container_width_acce = container_width_accessor()) === null || _container_width_acce === void 0 ? void 0 : _container_width_acce();
+    if (container_width == undefined) return;
+    $cd0e5524f9476f9b$var$adjust_sizes(container_width, sizes_set(), set_cols_at_size);
+  });
+  return [shadow_grid, $3hooq$solidjsweb.createComponent((0, $6c2c739b113a8ddf$export$d21e32dfedac04be), {
+    get cols_at_size() {
+      return cols_at_size();
     },
-    children: value => {
-      const is_selected = $3hooq$solidjs.createMemo(() => {
-        var _existing_filter, _existing_filter$data;
-        return (_existing_filter = existing_filter()) === null || _existing_filter === void 0 ? void 0 : (_existing_filter$data = _existing_filter.data) === null || _existing_filter$data === void 0 ? void 0 : _existing_filter$data.includes(value().value_);
-      });
-      return $3hooq$solidjsweb.ssr($cd0e5524f9476f9b$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("disabled", value().count_ === 0 && !is_selected(), true), "".concat(!is_selected() ? "minor" : "", " ").concat(is_selected() ? "major" : "", "  major-minor-transition"), $3hooq$solidjsweb.escape(value().value_), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
-        get when() {
-          return value().count_ != undefined;
+    grid_spacing: $cd0e5524f9476f9b$var$gap_px + "px",
+    rows: "all",
+    layout: "grid",
+    element_attributes: {
+      class: "checkbox-grid",
+      ref: el => set_container(el)
+    },
+    get children() {
+      return $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Index), {
+        get each() {
+          return buttons();
         },
-        get children() {
-          return $3hooq$solidjsweb.ssr($cd0e5524f9476f9b$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape(value().count_));
+        children: value => {
+          const is_selected = $3hooq$solidjs.createMemo(() => {
+            var _existing_filter, _existing_filter$data;
+            return (_existing_filter = existing_filter()) === null || _existing_filter === void 0 ? void 0 : (_existing_filter$data = _existing_filter.data) === null || _existing_filter$data === void 0 ? void 0 : _existing_filter$data.includes(value().value_);
+          });
+          const MakeButton = attributes => $3hooq$solidjsweb.ssrElement("button", () => ({
+            ...attributes,
+            "disabled": value().count_ === 0 && !is_selected(),
+            "classList": {
+              minor: !is_selected(),
+              major: is_selected(),
+              "major-minor-transition": true
+            }
+          }), () => ["<!--#-->", $3hooq$solidjsweb.escape(value().value_), "<!--/-->", "<!--#-->", $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+            get when() {
+              return value().count_ != undefined;
+            },
+            get children() {
+              return $3hooq$solidjsweb.ssr($cd0e5524f9476f9b$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape(value().count_));
+            }
+          })), "<!--/-->"], true);
+          const invisible_size_button = $3hooq$solidjsweb.createComponent(MakeButton, {});
+          const smallest_possible_size = $13671aa5e984acd9$export$9f191182275e9ef(invisible_size_button); // create ResizeObserver for the invisible size button where the div hugs its content
+          const sizes_value = $3hooq$solidjs.untrack(sizes_set);
+          const shadow_children_value = $3hooq$solidjs.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);
+          $3hooq$solidjs.onCleanup(() => {
+            const sizes_value = $3hooq$solidjs.untrack(sizes_set);
+            const shadow_children_value = $3hooq$solidjs.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 $3hooq$solidjsweb.createComponent(MakeButton, {});
         }
-      })));
+      });
     }
-  })));
+  })];
 };
+/**
+ * Calculate and apply cols_at_size overrides to fit as many items as possible in a row, evenly spaced
+ */
+function $cd0e5524f9476f9b$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) * ($cd0e5524f9476f9b$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 < $cd0e5524f9476f9b$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++) {
+        var _ref3;
+        // -1 is for the new item we're adding and every item is guaranteed to exist
+        const size_to_check = (_ref3 = current_row_items[i]) !== null && _ref3 !== void 0 ? _ref3 : 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 < $cd0e5524f9476f9b$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 $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $3hooq$solidjs.createSignal(false);
   $3hooq$solidjs.onCleanup($3hooq$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -2082,7 +2226,7 @@ function $476a3dc36afc1938$export$82ed4b28ecb67608(_ref) {
     });
     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 input_row = $3hooq$solidjsweb.createComponent((0, $6b92e147c6e24046$export$48513f6b9f8ce62d), {
+    const input_row = $3hooq$solidjsweb.createComponent((0, $902a0ca2b52f3898$export$48513f6b9f8ce62d), {
       get value_() {
         return checkbox().value_;
       },