@wix/ricos 11.20.3 → 11.20.5

package/dist/es/plugin-gallery/viewer/layout-collage.js

@@ -0,0 +1,235 @@
+import classNames from "classnames";
+import React from "react";
+import { getCollageRegimes, getPairs } from "./collage-groups.js";
+import { getRowsRegimes } from "./collage-rows.js";
+import { COLLAGE_SCOPE_ATTRIBUTE, getCollageStyles } from "./collage-styles.js";
+import { cappedViewportSizes, roundCssNumber } from "./gallery-image-sizes.js";
+import classes from "./layout-collage-scss.js";
+import { MediaCell } from "./media-cell.js";
+const REGIMES = 4;
+const MAX_COLUMNS = 6;
+const UNIFORM_RATIO_TOLERANCE = 0.01;
+const MIN_CELL_RATIO = 3 / 4;
+const MAX_CELL_RATIO = 16 / 9;
+const COLUMN_TRACKS = 12;
+const COLUMN_ROWS = 100;
+const BREAKPOINT_MARGIN = 1e-3;
+const ratioOf = (item) => item.width / item.height;
+const median = (values) => {
+  const sorted = [...values].sort((a, b) => a - b);
+  const middle = Math.floor(sorted.length / 2);
+  return sorted.length % 2 ? sorted[middle] : (sorted[middle - 1] + sorted[middle]) / 2;
+};
+const padRegimes = (regimes) => [
+  ...regimes,
+  ...Array.from(
+    { length: Math.max(0, REGIMES - regimes.length) },
+    () => regimes[regimes.length - 1]
+  )
+];
+const collageVariable = (name) => `--ricos-internal-gallery-collage-${name}`;
+const nextColumnAt = (columns) => 2 * columns * (columns + 1) / (2 * columns + 1);
+const getColumnCount = (width, column, spacing) => {
+  let columns = 1;
+  while (columns < MAX_COLUMNS && width + spacing >= nextColumnAt(columns) * (column + spacing)) {
+    columns++;
+  }
+  return columns;
+};
+const toRows = (height, column, spacing) => Math.max(1, Math.round(COLUMN_ROWS * (height + spacing) / (column + spacing)));
+const getFineSpans = (items, shapes, column, spacing) => {
+  const spans = items.map((item) => ({
+    columns: COLUMN_TRACKS,
+    rows: toRows(column / ratioOf(item), column, spacing)
+  }));
+  getPairs(shapes).forEach(([first, second]) => {
+    const ratios = [ratioOf(items[first]), ratioOf(items[second])];
+    const rows = toRows((column - spacing) / (ratios[0] + ratios[1]), column, spacing);
+    const firstColumns = Math.min(
+      COLUMN_TRACKS - 1,
+      Math.max(1, Math.round(COLUMN_TRACKS * ratios[0] / (ratios[0] + ratios[1])))
+    );
+    spans[first] = { columns: firstColumns, rows };
+    spans[second] = { columns: COLUMN_TRACKS - firstColumns, rows };
+  });
+  return spans;
+};
+const getCellSpans = (shapes) => shapes.map((shape) => shape === "big" ? { columns: 2, rows: 2 } : { columns: 1, rows: 1 });
+const toLength = ([a, b], spacing) => `calc(${roundCssNumber(a * 100)}% + ${roundCssNumber(a * spacing + b)}px)`;
+const getColumnsView = (items, { targetSize: column, spacing }) => {
+  const cellRatio = Math.min(MAX_CELL_RATIO, Math.max(MIN_CELL_RATIO, median(items.map(ratioOf))));
+  const isUniform = items.every(
+    (item) => Math.abs(ratioOf(item) / cellRatio - 1) <= UNIFORM_RATIO_TOLERANCE
+  );
+  const regimes = padRegimes(getCollageRegimes(items, spacing, REGIMES));
+  const upperColumn = (index) => regimes.slice(index + 1).find((later) => later.minColumn > regimes[index].minColumn)?.minColumn ?? Infinity;
+  const spans = regimes.map(
+    ({ shapes, minColumn }, index) => isUniform ? getCellSpans(shapes) : getFineSpans(
+      items,
+      shapes,
+      Math.min(upperColumn(index), Math.max(minColumn, column + spacing)) - spacing,
+      spacing
+    )
+  );
+  const tracks = isUniform ? 2 : COLUMN_TRACKS;
+  const columnBreakpoints = Array.from(
+    { length: MAX_COLUMNS },
+    (_, index) => nextColumnAt(index) * (column + spacing) - spacing
+  ).filter((width) => width >= 0);
+  const regimeBreakpoints = Array.from(
+    { length: MAX_COLUMNS },
+    (_, index) => regimes.map((regime) => (index + 1) * regime.minColumn - spacing)
+  ).flat();
+  const toRanges = (breakpoints, toDeclarations) => [.../* @__PURE__ */ new Set([0, ...breakpoints.filter((width) => width > 0)])].map((minWidth) => ({
+    minWidth,
+    declarations: toDeclarations(minWidth + BREAKPOINT_MARGIN)
+  }));
+  const list = toRanges(columnBreakpoints, (width) => {
+    const columns = getColumnCount(width, column, spacing);
+    return {
+      "grid-template-columns": `repeat(${tracks * columns}, minmax(0, 1fr))`,
+      // Each row is 1 / COLUMN_ROWS of a column plus spacing.
+      ...!isUniform && {
+        "grid-auto-rows": `calc((100 * var(${collageVariable("unit")}) + ${spacing}px) / ${COLUMN_ROWS * columns})`
+      }
+    };
+  });
+  const cell = toRanges([...columnBreakpoints, ...regimeBreakpoints], (width) => {
+    const columns = getColumnCount(width, column, spacing);
+    const regime = regimes.reduce(
+      (found, { minColumn }, index) => (width + spacing) / columns >= minColumn ? index : found,
+      0
+    );
+    return { "grid-area": `var(${collageVariable(`r${regime}`)})` };
+  });
+  const widestColumn = 4 / 3 * (column + spacing);
+  return {
+    className: classNames(!isUniform && classes.fine),
+    rootStyle: {
+      [collageVariable("spacing")]: `${spacing}px`,
+      [collageVariable("cell-ratio")]: cellRatio
+    },
+    list,
+    cell,
+    getCellStyle: (index) => Object.fromEntries(
+      spans.map((regimeSpans, regime) => {
+        const { rows, columns } = regimeSpans[index];
+        return [collageVariable(`r${regime}`), `auto / auto / span ${rows} / span ${columns}`];
+      })
+    ),
+    getSizes: (index) => {
+      const shareOf = (regime) => spans[regime][index].columns / tracks;
+      const widest = Math.max(
+        ...regimes.map(
+          (_, regime) => shareOf(regime) * Math.min(widestColumn, upperColumn(regime)) - spacing
+        )
+      );
+      const widening = Math.max(
+        ...regimes.map((_, regime) => upperColumn(regime) > widestColumn ? shareOf(regime) : 0)
+      );
+      return `min(100vw, max(${roundCssNumber(widest)}px, calc(${roundCssNumber(widening * 100 / MAX_COLUMNS)}vw + ${roundCssNumber(widening * spacing / MAX_COLUMNS - spacing)}px)))`;
+    }
+  };
+};
+const getRowsView = (items, { targetSize, spacing }) => {
+  const regimes = padRegimes(getRowsRegimes(items, spacing, targetSize, REGIMES));
+  const coordinates = ["x", "y", "width", "height"];
+  const stackedBelow = Math.max(0, regimes[0].minGallery - spacing);
+  return {
+    className: classes.rows,
+    rootStyle: { [collageVariable("spacing")]: `${spacing}px` },
+    list: [],
+    cell: [
+      // Below the first regime, each item takes a grid row of its own, at its
+      // own ratio.
+      ...stackedBelow > 0 ? [
+        {
+          minWidth: 0,
+          declarations: {
+            "grid-area": "auto",
+            "margin-inline-start": "0px",
+            "margin-block-start": "0px",
+            "inline-size": "100%",
+            "padding-block-end": `calc(100% / var(${collageVariable("item-ratio")}))`
+          }
+        }
+      ] : [],
+      ...regimes.map((regime, index) => ({
+        minWidth: Math.max(0, regime.minGallery - spacing),
+        declarations: {
+          "grid-area": "1 / 1",
+          "margin-inline-start": `var(${collageVariable(`r${index}-x`)})`,
+          "margin-block-start": `var(${collageVariable(`r${index}-y`)})`,
+          "inline-size": `var(${collageVariable(`r${index}-width`)})`,
+          "padding-block-end": `var(${collageVariable(`r${index}-height`)})`
+        }
+      }))
+    ],
+    getCellStyle: (index) => Object.fromEntries(
+      regimes.flatMap(
+        (regime, position) => coordinates.map((coordinate) => [
+          collageVariable(`r${position}-${coordinate}`),
+          toLength(regime.rects[index][coordinate], spacing)
+        ])
+      )
+    ),
+    // Within each regime an item's width is linear in the gallery's, so it is
+    // widest at one end of the regime's widths; the last regime is open-ended
+    // and grows with the viewport at most. A stacked item is the gallery's
+    // width.
+    getSizes: (index) => {
+      let widest = stackedBelow;
+      let rate = 0;
+      let offset = 0;
+      regimes.forEach((regime, position) => {
+        const [a, b] = regime.rects[index].width;
+        const widthAt = (gallery) => a * Math.max(0, gallery - spacing) + a * spacing + b;
+        const next = regimes.slice(position + 1).find((later) => later.minGallery > regime.minGallery);
+        if (next) {
+          widest = Math.max(widest, widthAt(regime.minGallery), widthAt(next.minGallery));
+        } else {
+          rate = a;
+          offset = a * spacing + b;
+        }
+      });
+      return rate > 0 ? `min(100vw, max(${roundCssNumber(widest)}px, calc(${roundCssNumber(rate * 100)}vw + ${roundCssNumber(offset)}px)))` : cappedViewportSizes({ maxWidth: Math.max(widest, offset) });
+    }
+  };
+};
+const LayoutCollage = ({ items, layout, nodeId, runtime }) => {
+  const view = layout.orientation === "ROWS" ? getRowsView(items, layout) : getColumnsView(items, layout);
+  const { scope, css } = getCollageStyles([
+    { className: classes.collage, ranges: view.list },
+    { className: classes.collageCell, ranges: view.cell }
+  ]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classes.collageRoot,
+      style: view.rootStyle,
+      ...{ [COLLAGE_SCOPE_ATTRIBUTE]: scope }
+    },
+    /* @__PURE__ */ React.createElement("style", null, css),
+    /* @__PURE__ */ React.createElement("ul", { className: classNames(classes.collage, view.className), "data-hook": "gallery-collage" }, items.map((item, index) => /* @__PURE__ */ React.createElement(
+      MediaCell,
+      {
+        key: item.id,
+        item,
+        nodeId,
+        presentation: "fill",
+        sizes: view.getSizes(index),
+        eager: runtime.lazyLoading === false || index === 0,
+        runtime,
+        className: classes.collageCell,
+        style: {
+          [collageVariable("item-ratio")]: ratioOf(item),
+          ...view.getCellStyle(index)
+        }
+      }
+    )))
+  );
+};
+export {
+  LayoutCollage
+};
+//# sourceMappingURL=layout-collage.js.map

package/dist/es/plugin-gallery/viewer/layout-collage.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugin-gallery/viewer/layout-collage.tsx"],
+  "sourcesContent": ["import classNames from 'classnames';\nimport React from 'react';\n\nimport type { NormalizedGalleryItem } from '../media/normalize-gallery-items.js';\nimport { type CellShape, getCollageRegimes, getPairs } from './collage-groups.js';\nimport { getRowsRegimes, type LinearSize } from './collage-rows.js';\nimport { COLLAGE_SCOPE_ATTRIBUTE, type CollageRange, getCollageStyles } from './collage-styles.js';\nimport { cappedViewportSizes, roundCssNumber } from './gallery-image-sizes.js';\nimport classes from './layout-collage-scss.js';\nimport { MediaCell } from './media-cell.js';\nimport type { GalleryRendererRuntime } from './native-gallery-types.js';\nimport type { ResolvedGalleryLayout } from './resolve-gallery-layout.js';\n\ntype LayoutCollageResolved = Extract<ResolvedGalleryLayout, { type: 'COLLAGE' }>;\n\ntype LayoutCollageProps = {\n  items: NormalizedGalleryItem[];\n  layout: LayoutCollageResolved;\n  nodeId: string;\n  runtime: GalleryRendererRuntime;\n};\n\n// ProGallery's Collage layout changes at gallery widths of its own, so each\n// item carries its placement for every regime of widths, and a scoped style\n// switches between them at this gallery's breakpoints (see `collage-styles.ts`).\n//\n// Columns stack groups into the shortest column: a single item as wide as the\n// column, or a pair side by side at one height (see `collage-groups.ts`), laid\n// out on a grid whose dense flow places each at the top of the shortest\n// column, as ProGallery did. Rows fill strips (see `collage-rows.ts`), whose\n// items are positioned from coefficients of the gallery width.\nconst REGIMES = 4;\n\n// Column counts stop here, unlike ProGallery's, so a gallery needs few rules;\n// past it, the columns widen with the gallery.\nconst MAX_COLUMNS = 6;\n\n// Ratios within this of their median lay out on cells of that one ratio,\n// which keeps spacing exact. Other galleries lay out on finer tracks and rows,\n// which keep every item's own ratio instead.\nconst UNIFORM_RATIO_TOLERANCE = 0.01;\n\n// Bounds for the shared cell ratio, so one outlier cannot turn every cell into\n// a sliver: 3:4 to 16:9.\nconst MIN_CELL_RATIO = 3 / 4;\nconst MAX_CELL_RATIO = 16 / 9;\n\n// Grid units per column on the finer grid: tracks across, for pairs to split\n// a column by their ratios, and rows down per column width plus spacing, for\n// each item's height.\nconst COLUMN_TRACKS = 12;\nconst COLUMN_ROWS = 100;\n\n// Rounding headroom for a width exactly at a breakpoint.\nconst BREAKPOINT_MARGIN = 0.001;\n\nconst ratioOf = (item: NormalizedGalleryItem) => item.width / item.height;\n\nconst median = (values: number[]) => {\n  const sorted = [...values].sort((a, b) => a - b);\n  const middle = Math.floor(sorted.length / 2);\n  return sorted.length % 2 ? sorted[middle] : (sorted[middle - 1] + sorted[middle]) / 2;\n};\n\n// Pads to REGIMES with the widest one, so every item has spans for each.\nconst padRegimes = <Regime,>(regimes: Regime[]) => [\n  ...regimes,\n  ...Array.from(\n    { length: Math.max(0, REGIMES - regimes.length) },\n    () => regimes[regimes.length - 1]\n  ),\n];\n\nconst collageVariable = (name: string) => `--ricos-internal-gallery-collage-${name}`;\n\n// ProGallery chose between rounding `(width + spacing) / (column + spacing)`\n// down and up by which resulting column width came closer to `column` plus\n// spacing, so it moved from n to n + 1 columns once that quotient reached this.\nconst nextColumnAt = (columns: number) => (2 * columns * (columns + 1)) / (2 * columns + 1);\n\nconst getColumnCount = (width: number, column: number, spacing: number) => {\n  let columns = 1;\n  while (columns < MAX_COLUMNS && width + spacing >= nextColumnAt(columns) * (column + spacing)) {\n    columns++;\n  }\n  return columns;\n};\n\ntype Span = { columns: number; rows: number };\n\nconst toRows = (height: number, column: number, spacing: number) =>\n  Math.max(1, Math.round((COLUMN_ROWS * (height + spacing)) / (column + spacing)));\n\n// Spans on the finer grid, derived at the column's own width: a single takes\n// a whole column at its own ratio, and a pair shares one height and splits the\n// column by the two ratios.\nconst getFineSpans = (\n  items: NormalizedGalleryItem[],\n  shapes: CellShape[],\n  column: number,\n  spacing: number\n) => {\n  const spans: Span[] = items.map(item => ({\n    columns: COLUMN_TRACKS,\n    rows: toRows(column / ratioOf(item), column, spacing),\n  }));\n  getPairs(shapes).forEach(([first, second]) => {\n    const ratios = [ratioOf(items[first]), ratioOf(items[second])];\n    const rows = toRows((column - spacing) / (ratios[0] + ratios[1]), column, spacing);\n    const firstColumns = Math.min(\n      COLUMN_TRACKS - 1,\n      Math.max(1, Math.round((COLUMN_TRACKS * ratios[0]) / (ratios[0] + ratios[1])))\n    );\n    spans[first] = { columns: firstColumns, rows };\n    spans[second] = { columns: COLUMN_TRACKS - firstColumns, rows };\n  });\n  return spans;\n};\n\n// Spans on cells of one ratio: a pair item takes one, a single two by two.\nconst getCellSpans = (shapes: CellShape[]) =>\n  shapes.map(shape => (shape === 'big' ? { columns: 2, rows: 2 } : { columns: 1, rows: 1 }));\n\n// A Rows coefficient pair as a length of the gallery's own width, which is the\n// gallery width plus spacing less one spacing.\nconst toLength = ([a, b]: LinearSize, spacing: number) =>\n  `calc(${roundCssNumber(a * 100)}% + ${roundCssNumber(a * spacing + b)}px)`;\n\ntype Declarations = Record<string, string>;\n\ntype CollageView = {\n  className?: string;\n  rootStyle: React.CSSProperties;\n  list: CollageRange[];\n  cell: CollageRange[];\n  getCellStyle: (index: number) => Record<string, string | number>;\n  getSizes: (index: number) => string;\n};\n\nconst getColumnsView = (\n  items: NormalizedGalleryItem[],\n  { targetSize: column, spacing }: LayoutCollageResolved\n): CollageView => {\n  const cellRatio = Math.min(MAX_CELL_RATIO, Math.max(MIN_CELL_RATIO, median(items.map(ratioOf))));\n  const isUniform = items.every(\n    item => Math.abs(ratioOf(item) / cellRatio - 1) <= UNIFORM_RATIO_TOLERANCE\n  );\n  const regimes = padRegimes(getCollageRegimes(items, spacing, REGIMES));\n  // The column width, one spacing included, where the next regime begins.\n  const upperColumn = (index: number) =>\n    regimes.slice(index + 1).find(later => later.minColumn > regimes[index].minColumn)?.minColumn ??\n    Infinity;\n  // Fine spans hold exactly at one column width: for each regime, the one of\n  // its own closest to `column`, so no pair is sized in a column too narrow\n  // for it.\n  const spans = regimes.map(({ shapes, minColumn }, index) =>\n    isUniform\n      ? getCellSpans(shapes)\n      : getFineSpans(\n          items,\n          shapes,\n          Math.min(upperColumn(index), Math.max(minColumn, column + spacing)) - spacing,\n          spacing\n        )\n  );\n  const tracks = isUniform ? 2 : COLUMN_TRACKS;\n\n  // Widths where the column count changes, and where a column, one spacing\n  // included, reaches each regime's threshold at each column count.\n  const columnBreakpoints = Array.from(\n    { length: MAX_COLUMNS },\n    (_, index) => nextColumnAt(index) * (column + spacing) - spacing\n  ).filter(width => width >= 0);\n  const regimeBreakpoints = Array.from({ length: MAX_COLUMNS }, (_, index) =>\n    regimes.map(regime => (index + 1) * regime.minColumn - spacing)\n  ).flat();\n  const toRanges = (breakpoints: number[], toDeclarations: (width: number) => Declarations) =>\n    [...new Set([0, ...breakpoints.filter(width => width > 0)])].map(minWidth => ({\n      minWidth,\n      declarations: toDeclarations(minWidth + BREAKPOINT_MARGIN),\n    }));\n  const list = toRanges(columnBreakpoints, width => {\n    const columns = getColumnCount(width, column, spacing);\n    return {\n      'grid-template-columns': `repeat(${tracks * columns}, minmax(0, 1fr))`,\n      // Each row is 1 / COLUMN_ROWS of a column plus spacing.\n      ...(!isUniform && {\n        'grid-auto-rows': `calc((100 * var(${collageVariable('unit')}) + ${spacing}px) / ${COLUMN_ROWS * columns})`,\n      }),\n    };\n  });\n  const cell = toRanges([...columnBreakpoints, ...regimeBreakpoints], width => {\n    const columns = getColumnCount(width, column, spacing);\n    const regime = regimes.reduce(\n      (found, { minColumn }, index) => ((width + spacing) / columns >= minColumn ? index : found),\n      0\n    );\n    return { 'grid-area': `var(${collageVariable(`r${regime}`)})` };\n  });\n\n  // Bounds for `sizes`. ProGallery added a column once that brought the column\n  // width closer to `column`, which keeps a column, one spacing included,\n  // below 4/3 of `column` plus spacing, the widest with a single column, until\n  // MAX_COLUMNS, past which columns widen with the gallery and so with the\n  // viewport at most. Within a regime, an item takes its share of a column no\n  // wider than where the next regime begins.\n  const widestColumn = (4 / 3) * (column + spacing);\n\n  return {\n    className: classNames(!isUniform && classes.fine),\n    rootStyle: {\n      [collageVariable('spacing')]: `${spacing}px`,\n      [collageVariable('cell-ratio')]: cellRatio,\n    } as React.CSSProperties,\n    list,\n    cell,\n    getCellStyle: index =>\n      Object.fromEntries(\n        spans.map((regimeSpans, regime) => {\n          const { rows, columns } = regimeSpans[index];\n          return [collageVariable(`r${regime}`), `auto / auto / span ${rows} / span ${columns}`];\n        })\n      ),\n    getSizes: index => {\n      const shareOf = (regime: number) => spans[regime][index].columns / tracks;\n      const widest = Math.max(\n        ...regimes.map(\n          (_, regime) => shareOf(regime) * Math.min(widestColumn, upperColumn(regime)) - spacing\n        )\n      );\n      // The widest share of a regime that holds past `widestColumn`, as the\n      // last always does.\n      const widening = Math.max(\n        ...regimes.map((_, regime) => (upperColumn(regime) > widestColumn ? shareOf(regime) : 0))\n      );\n      return `min(100vw, max(${roundCssNumber(widest)}px, calc(${roundCssNumber((widening * 100) / MAX_COLUMNS)}vw + ${roundCssNumber((widening * spacing) / MAX_COLUMNS - spacing)}px)))`;\n    },\n  };\n};\n\nconst getRowsView = (\n  items: NormalizedGalleryItem[],\n  { targetSize, spacing }: LayoutCollageResolved\n): CollageView => {\n  const regimes = padRegimes(getRowsRegimes(items, spacing, targetSize, REGIMES));\n  const coordinates = ['x', 'y', 'width', 'height'] as const;\n  // Regimes start at a gallery width plus spacing.\n  const stackedBelow = Math.max(0, regimes[0].minGallery - spacing);\n\n  return {\n    className: classes.rows,\n    rootStyle: { [collageVariable('spacing')]: `${spacing}px` } as React.CSSProperties,\n    list: [],\n    cell: [\n      // Below the first regime, each item takes a grid row of its own, at its\n      // own ratio.\n      ...(stackedBelow > 0\n        ? [\n            {\n              minWidth: 0,\n              declarations: {\n                'grid-area': 'auto',\n                'margin-inline-start': '0px',\n                'margin-block-start': '0px',\n                'inline-size': '100%',\n                'padding-block-end': `calc(100% / var(${collageVariable('item-ratio')}))`,\n              },\n            },\n          ]\n        : []),\n      ...regimes.map((regime, index) => ({\n        minWidth: Math.max(0, regime.minGallery - spacing),\n        declarations: {\n          'grid-area': '1 / 1',\n          'margin-inline-start': `var(${collageVariable(`r${index}-x`)})`,\n          'margin-block-start': `var(${collageVariable(`r${index}-y`)})`,\n          'inline-size': `var(${collageVariable(`r${index}-width`)})`,\n          'padding-block-end': `var(${collageVariable(`r${index}-height`)})`,\n        },\n      })),\n    ],\n    getCellStyle: index =>\n      Object.fromEntries(\n        regimes.flatMap((regime, position) =>\n          coordinates.map(coordinate => [\n            collageVariable(`r${position}-${coordinate}`),\n            toLength(regime.rects[index][coordinate], spacing),\n          ])\n        )\n      ),\n    // Within each regime an item's width is linear in the gallery's, so it is\n    // widest at one end of the regime's widths; the last regime is open-ended\n    // and grows with the viewport at most. A stacked item is the gallery's\n    // width.\n    getSizes: index => {\n      let widest = stackedBelow;\n      let rate = 0;\n      let offset = 0;\n      regimes.forEach((regime, position) => {\n        const [a, b] = regime.rects[index].width;\n        const widthAt = (gallery: number) => a * Math.max(0, gallery - spacing) + a * spacing + b;\n        const next = regimes\n          .slice(position + 1)\n          .find(later => later.minGallery > regime.minGallery);\n        if (next) {\n          widest = Math.max(widest, widthAt(regime.minGallery), widthAt(next.minGallery));\n        } else {\n          rate = a;\n          offset = a * spacing + b;\n        }\n      });\n      return rate > 0\n        ? `min(100vw, max(${roundCssNumber(widest)}px, calc(${roundCssNumber(rate * 100)}vw + ${roundCssNumber(offset)}px)))`\n        : cappedViewportSizes({ maxWidth: Math.max(widest, offset) });\n    },\n  };\n};\n\nexport const LayoutCollage = ({ items, layout, nodeId, runtime }: LayoutCollageProps) => {\n  const view =\n    layout.orientation === 'ROWS' ? getRowsView(items, layout) : getColumnsView(items, layout);\n  const { scope, css } = getCollageStyles([\n    { className: classes.collage, ranges: view.list },\n    { className: classes.collageCell, ranges: view.cell },\n  ]);\n\n  return (\n    <div\n      className={classes.collageRoot}\n      style={view.rootStyle}\n      {...{ [COLLAGE_SCOPE_ATTRIBUTE]: scope }}\n    >\n      <style>{css}</style>\n      <ul className={classNames(classes.collage, view.className)} data-hook=\"gallery-collage\">\n        {items.map((item, index) => (\n          <MediaCell\n            key={item.id}\n            item={item}\n            nodeId={nodeId}\n            presentation=\"fill\"\n            sizes={view.getSizes(index)}\n            eager={runtime.lazyLoading === false || index === 0}\n            runtime={runtime}\n            className={classes.collageCell}\n            style={\n              {\n                [collageVariable('item-ratio')]: ratioOf(item),\n                ...view.getCellStyle(index),\n              } as React.CSSProperties\n            }\n          />\n        ))}\n      </ul>\n    </div>\n  );\n};\n"],
+  "mappings": "AAAA,OAAO,gBAAgB;AACvB,OAAO,WAAW;AAGlB,SAAyB,mBAAmB,gBAAgB;AAC5D,SAAS,sBAAuC;AAChD,SAAS,yBAA4C,wBAAwB;AAC7E,SAAS,qBAAqB,sBAAsB;AACpD,OAAO,aAAa;AACpB,SAAS,iBAAiB;AAsB1B,MAAM,UAAU;AAIhB,MAAM,cAAc;AAKpB,MAAM,0BAA0B;AAIhC,MAAM,iBAAiB,IAAI;AAC3B,MAAM,iBAAiB,KAAK;AAK5B,MAAM,gBAAgB;AACtB,MAAM,cAAc;AAGpB,MAAM,oBAAoB;AAE1B,MAAM,UAAU,CAAC,SAAgC,KAAK,QAAQ,KAAK;AAEnE,MAAM,SAAS,CAAC,WAAqB;AACnC,QAAM,SAAS,CAAC,GAAG,MAAM,EAAE,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AAC/C,QAAM,SAAS,KAAK,MAAM,OAAO,SAAS,CAAC;AAC3C,SAAO,OAAO,SAAS,IAAI,OAAO,MAAM,KAAK,OAAO,SAAS,CAAC,IAAI,OAAO,MAAM,KAAK;AACtF;AAGA,MAAM,aAAa,CAAU,YAAsB;AAAA,EACjD,GAAG;AAAA,EACH,GAAG,MAAM;AAAA,IACP,EAAE,QAAQ,KAAK,IAAI,GAAG,UAAU,QAAQ,MAAM,EAAE;AAAA,IAChD,MAAM,QAAQ,QAAQ,SAAS,CAAC;AAAA,EAClC;AACF;AAEA,MAAM,kBAAkB,CAAC,SAAiB,oCAAoC,IAAI;AAKlF,MAAM,eAAe,CAAC,YAAqB,IAAI,WAAW,UAAU,MAAO,IAAI,UAAU;AAEzF,MAAM,iBAAiB,CAAC,OAAe,QAAgB,YAAoB;AACzE,MAAI,UAAU;AACd,SAAO,UAAU,eAAe,QAAQ,WAAW,aAAa,OAAO,KAAK,SAAS,UAAU;AAC7F;AAAA,EACF;AACA,SAAO;AACT;AAIA,MAAM,SAAS,CAAC,QAAgB,QAAgB,YAC9C,KAAK,IAAI,GAAG,KAAK,MAAO,eAAe,SAAS,YAAa,SAAS,QAAQ,CAAC;AAKjF,MAAM,eAAe,CACnB,OACA,QACA,QACA,YACG;AACH,QAAM,QAAgB,MAAM,IAAI,WAAS;AAAA,IACvC,SAAS;AAAA,IACT,MAAM,OAAO,SAAS,QAAQ,IAAI,GAAG,QAAQ,OAAO;AAAA,EACtD,EAAE;AACF,WAAS,MAAM,EAAE,QAAQ,CAAC,CAAC,OAAO,MAAM,MAAM;AAC5C,UAAM,SAAS,CAAC,QAAQ,MAAM,KAAK,CAAC,GAAG,QAAQ,MAAM,MAAM,CAAC,CAAC;AAC7D,UAAM,OAAO,QAAQ,SAAS,YAAY,OAAO,CAAC,IAAI,OAAO,CAAC,IAAI,QAAQ,OAAO;AACjF,UAAM,eAAe,KAAK;AAAA,MACxB,gBAAgB;AAAA,MAChB,KAAK,IAAI,GAAG,KAAK,MAAO,gBAAgB,OAAO,CAAC,KAAM,OAAO,CAAC,IAAI,OAAO,CAAC,EAAE,CAAC;AAAA,IAC/E;AACA,UAAM,KAAK,IAAI,EAAE,SAAS,cAAc,KAAK;AAC7C,UAAM,MAAM,IAAI,EAAE,SAAS,gBAAgB,cAAc,KAAK;AAAA,EAChE,CAAC;AACD,SAAO;AACT;AAGA,MAAM,eAAe,CAAC,WACpB,OAAO,IAAI,WAAU,UAAU,QAAQ,EAAE,SAAS,GAAG,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,MAAM,EAAE,CAAE;AAI3F,MAAM,WAAW,CAAC,CAAC,GAAG,CAAC,GAAe,YACpC,QAAQ,eAAe,IAAI,GAAG,CAAC,OAAO,eAAe,IAAI,UAAU,CAAC,CAAC;AAavE,MAAM,iBAAiB,CACrB,OACA,EAAE,YAAY,QAAQ,QAAQ,MACd;AAChB,QAAM,YAAY,KAAK,IAAI,gBAAgB,KAAK,IAAI,gBAAgB,OAAO,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC;AAC/F,QAAM,YAAY,MAAM;AAAA,IACtB,UAAQ,KAAK,IAAI,QAAQ,IAAI,IAAI,YAAY,CAAC,KAAK;AAAA,EACrD;AACA,QAAM,UAAU,WAAW,kBAAkB,OAAO,SAAS,OAAO,CAAC;AAErE,QAAM,cAAc,CAAC,UACnB,QAAQ,MAAM,QAAQ,CAAC,EAAE,KAAK,WAAS,MAAM,YAAY,QAAQ,KAAK,EAAE,SAAS,GAAG,aACpF;AAIF,QAAM,QAAQ,QAAQ;AAAA,IAAI,CAAC,EAAE,QAAQ,UAAU,GAAG,UAChD,YACI,aAAa,MAAM,IACnB;AAAA,MACE;AAAA,MACA;AAAA,MACA,KAAK,IAAI,YAAY,KAAK,GAAG,KAAK,IAAI,WAAW,SAAS,OAAO,CAAC,IAAI;AAAA,MACtE;AAAA,IACF;AAAA,EACN;AACA,QAAM,SAAS,YAAY,IAAI;AAI/B,QAAM,oBAAoB,MAAM;AAAA,IAC9B,EAAE,QAAQ,YAAY;AAAA,IACtB,CAAC,GAAG,UAAU,aAAa,KAAK,KAAK,SAAS,WAAW;AAAA,EAC3D,EAAE,OAAO,WAAS,SAAS,CAAC;AAC5B,QAAM,oBAAoB,MAAM;AAAA,IAAK,EAAE,QAAQ,YAAY;AAAA,IAAG,CAAC,GAAG,UAChE,QAAQ,IAAI,aAAW,QAAQ,KAAK,OAAO,YAAY,OAAO;AAAA,EAChE,EAAE,KAAK;AACP,QAAM,WAAW,CAAC,aAAuB,mBACvC,CAAC,GAAG,oBAAI,IAAI,CAAC,GAAG,GAAG,YAAY,OAAO,WAAS,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,eAAa;AAAA,IAC5E;AAAA,IACA,cAAc,eAAe,WAAW,iBAAiB;AAAA,EAC3D,EAAE;AACJ,QAAM,OAAO,SAAS,mBAAmB,WAAS;AAChD,UAAM,UAAU,eAAe,OAAO,QAAQ,OAAO;AACrD,WAAO;AAAA,MACL,yBAAyB,UAAU,SAAS,OAAO;AAAA;AAAA,MAEnD,GAAI,CAAC,aAAa;AAAA,QAChB,kBAAkB,mBAAmB,gBAAgB,MAAM,CAAC,OAAO,OAAO,SAAS,cAAc,OAAO;AAAA,MAC1G;AAAA,IACF;AAAA,EACF,CAAC;AACD,QAAM,OAAO,SAAS,CAAC,GAAG,mBAAmB,GAAG,iBAAiB,GAAG,WAAS;AAC3E,UAAM,UAAU,eAAe,OAAO,QAAQ,OAAO;AACrD,UAAM,SAAS,QAAQ;AAAA,MACrB,CAAC,OAAO,EAAE,UAAU,GAAG,WAAY,QAAQ,WAAW,WAAW,YAAY,QAAQ;AAAA,MACrF;AAAA,IACF;AACA,WAAO,EAAE,aAAa,OAAO,gBAAgB,IAAI,MAAM,EAAE,CAAC,IAAI;AAAA,EAChE,CAAC;AAQD,QAAM,eAAgB,IAAI,KAAM,SAAS;AAEzC,SAAO;AAAA,IACL,WAAW,WAAW,CAAC,aAAa,QAAQ,IAAI;AAAA,IAChD,WAAW;AAAA,MACT,CAAC,gBAAgB,SAAS,CAAC,GAAG,GAAG,OAAO;AAAA,MACxC,CAAC,gBAAgB,YAAY,CAAC,GAAG;AAAA,IACnC;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc,WACZ,OAAO;AAAA,MACL,MAAM,IAAI,CAAC,aAAa,WAAW;AACjC,cAAM,EAAE,MAAM,QAAQ,IAAI,YAAY,KAAK;AAC3C,eAAO,CAAC,gBAAgB,IAAI,MAAM,EAAE,GAAG,sBAAsB,IAAI,WAAW,OAAO,EAAE;AAAA,MACvF,CAAC;AAAA,IACH;AAAA,IACF,UAAU,WAAS;AACjB,YAAM,UAAU,CAAC,WAAmB,MAAM,MAAM,EAAE,KAAK,EAAE,UAAU;AACnE,YAAM,SAAS,KAAK;AAAA,QAClB,GAAG,QAAQ;AAAA,UACT,CAAC,GAAG,WAAW,QAAQ,MAAM,IAAI,KAAK,IAAI,cAAc,YAAY,MAAM,CAAC,IAAI;AAAA,QACjF;AAAA,MACF;AAGA,YAAM,WAAW,KAAK;AAAA,QACpB,GAAG,QAAQ,IAAI,CAAC,GAAG,WAAY,YAAY,MAAM,IAAI,eAAe,QAAQ,MAAM,IAAI,CAAE;AAAA,MAC1F;AACA,aAAO,kBAAkB,eAAe,MAAM,CAAC,YAAY,eAAgB,WAAW,MAAO,WAAW,CAAC,QAAQ,eAAgB,WAAW,UAAW,cAAc,OAAO,CAAC;AAAA,IAC/K;AAAA,EACF;AACF;AAEA,MAAM,cAAc,CAClB,OACA,EAAE,YAAY,QAAQ,MACN;AAChB,QAAM,UAAU,WAAW,eAAe,OAAO,SAAS,YAAY,OAAO,CAAC;AAC9E,QAAM,cAAc,CAAC,KAAK,KAAK,SAAS,QAAQ;AAEhD,QAAM,eAAe,KAAK,IAAI,GAAG,QAAQ,CAAC,EAAE,aAAa,OAAO;AAEhE,SAAO;AAAA,IACL,WAAW,QAAQ;AAAA,IACnB,WAAW,EAAE,CAAC,gBAAgB,SAAS,CAAC,GAAG,GAAG,OAAO,KAAK;AAAA,IAC1D,MAAM,CAAC;AAAA,IACP,MAAM;AAAA;AAAA;AAAA,MAGJ,GAAI,eAAe,IACf;AAAA,QACE;AAAA,UACE,UAAU;AAAA,UACV,cAAc;AAAA,YACZ,aAAa;AAAA,YACb,uBAAuB;AAAA,YACvB,sBAAsB;AAAA,YACtB,eAAe;AAAA,YACf,qBAAqB,mBAAmB,gBAAgB,YAAY,CAAC;AAAA,UACvE;AAAA,QACF;AAAA,MACF,IACA,CAAC;AAAA,MACL,GAAG,QAAQ,IAAI,CAAC,QAAQ,WAAW;AAAA,QACjC,UAAU,KAAK,IAAI,GAAG,OAAO,aAAa,OAAO;AAAA,QACjD,cAAc;AAAA,UACZ,aAAa;AAAA,UACb,uBAAuB,OAAO,gBAAgB,IAAI,KAAK,IAAI,CAAC;AAAA,UAC5D,sBAAsB,OAAO,gBAAgB,IAAI,KAAK,IAAI,CAAC;AAAA,UAC3D,eAAe,OAAO,gBAAgB,IAAI,KAAK,QAAQ,CAAC;AAAA,UACxD,qBAAqB,OAAO,gBAAgB,IAAI,KAAK,SAAS,CAAC;AAAA,QACjE;AAAA,MACF,EAAE;AAAA,IACJ;AAAA,IACA,cAAc,WACZ,OAAO;AAAA,MACL,QAAQ;AAAA,QAAQ,CAAC,QAAQ,aACvB,YAAY,IAAI,gBAAc;AAAA,UAC5B,gBAAgB,IAAI,QAAQ,IAAI,UAAU,EAAE;AAAA,UAC5C,SAAS,OAAO,MAAM,KAAK,EAAE,UAAU,GAAG,OAAO;AAAA,QACnD,CAAC;AAAA,MACH;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAKF,UAAU,WAAS;AACjB,UAAI,SAAS;AACb,UAAI,OAAO;AACX,UAAI,SAAS;AACb,cAAQ,QAAQ,CAAC,QAAQ,aAAa;AACpC,cAAM,CAAC,GAAG,CAAC,IAAI,OAAO,MAAM,KAAK,EAAE;AACnC,cAAM,UAAU,CAAC,YAAoB,IAAI,KAAK,IAAI,GAAG,UAAU,OAAO,IAAI,IAAI,UAAU;AACxF,cAAM,OAAO,QACV,MAAM,WAAW,CAAC,EAClB,KAAK,WAAS,MAAM,aAAa,OAAO,UAAU;AACrD,YAAI,MAAM;AACR,mBAAS,KAAK,IAAI,QAAQ,QAAQ,OAAO,UAAU,GAAG,QAAQ,KAAK,UAAU,CAAC;AAAA,QAChF,OAAO;AACL,iBAAO;AACP,mBAAS,IAAI,UAAU;AAAA,QACzB;AAAA,MACF,CAAC;AACD,aAAO,OAAO,IACV,kBAAkB,eAAe,MAAM,CAAC,YAAY,eAAe,OAAO,GAAG,CAAC,QAAQ,eAAe,MAAM,CAAC,UAC5G,oBAAoB,EAAE,UAAU,KAAK,IAAI,QAAQ,MAAM,EAAE,CAAC;AAAA,IAChE;AAAA,EACF;AACF;AAEO,MAAM,gBAAgB,CAAC,EAAE,OAAO,QAAQ,QAAQ,QAAQ,MAA0B;AACvF,QAAM,OACJ,OAAO,gBAAgB,SAAS,YAAY,OAAO,MAAM,IAAI,eAAe,OAAO,MAAM;AAC3F,QAAM,EAAE,OAAO,IAAI,IAAI,iBAAiB;AAAA,IACtC,EAAE,WAAW,QAAQ,SAAS,QAAQ,KAAK,KAAK;AAAA,IAChD,EAAE,WAAW,QAAQ,aAAa,QAAQ,KAAK,KAAK;AAAA,EACtD,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,QAAQ;AAAA,MACnB,OAAO,KAAK;AAAA,MACX,GAAG,EAAE,CAAC,uBAAuB,GAAG,MAAM;AAAA;AAAA,IAEvC,oCAAC,eAAO,GAAI;AAAA,IACZ,oCAAC,QAAG,WAAW,WAAW,QAAQ,SAAS,KAAK,SAAS,GAAG,aAAU,qBACnE,MAAM,IAAI,CAAC,MAAM,UAChB;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,KAAK;AAAA,QACV;AAAA,QACA;AAAA,QACA,cAAa;AAAA,QACb,OAAO,KAAK,SAAS,KAAK;AAAA,QAC1B,OAAO,QAAQ,gBAAgB,SAAS,UAAU;AAAA,QAClD;AAAA,QACA,WAAW,QAAQ;AAAA,QACnB,OACE;AAAA,UACE,CAAC,gBAAgB,YAAY,CAAC,GAAG,QAAQ,IAAI;AAAA,UAC7C,GAAG,KAAK,aAAa,KAAK;AAAA,QAC5B;AAAA;AAAA,IAEJ,CACD,CACH;AAAA,EACF;AAEJ;",
+  "names": []
+}

package/dist/es/plugin-gallery/viewer/layout-column-scss.js

@@ -1,8 +1,8 @@
 var layout_column_default = {
-  "column": "zGFYt",
-  "columnViewport": "_4VoY5",
-  "columnTrack": "t42Rt",
-  "columnCell": "o6HA0"
+  "column": "fWqEi",
+  "columnViewport": "wVUTU",
+  "columnTrack": "axhb6",
+  "columnCell": "sihAY"
 };
 export {
   layout_column_default as default

package/dist/es/plugin-gallery/viewer/layout-column-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-gallery/viewer/layout-column.scss"],
-  "sourcesContent": ["export default {\n  \"column\": \"zGFYt\",\n  \"columnViewport\": \"_4VoY5\",\n  \"columnTrack\": \"t42Rt\",\n  \"columnCell\": \"o6HA0\"\n};"],
+  "sourcesContent": ["export default {\n  \"column\": \"fWqEi\",\n  \"columnViewport\": \"wVUTU\",\n  \"columnTrack\": \"axhb6\",\n  \"columnCell\": \"sihAY\"\n};"],
   "mappings": "AAAA,IAAO,wBAAQ;AAAA,EACb,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,cAAc;AAChB;",
   "names": []
 }

package/dist/es/plugin-gallery/viewer/layout-fullsize-scss.js

@@ -1,8 +1,8 @@
 var layout_fullsize_default = {
-  "fullsize": "SYFPQ",
-  "fullsizeViewport": "_5kE8q",
-  "fullsizeTrack": "CZ9FD",
-  "fullsizeCell": "MbCNP"
+  "fullsize": "LYdA1",
+  "fullsizeViewport": "tyCvm",
+  "fullsizeTrack": "aPpRz",
+  "fullsizeCell": "PcwKC"
 };
 export {
   layout_fullsize_default as default

package/dist/es/plugin-gallery/viewer/layout-fullsize-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-gallery/viewer/layout-fullsize.scss"],
-  "sourcesContent": ["export default {\n  \"fullsize\": \"SYFPQ\",\n  \"fullsizeViewport\": \"_5kE8q\",\n  \"fullsizeTrack\": \"CZ9FD\",\n  \"fullsizeCell\": \"MbCNP\"\n};"],
+  "sourcesContent": ["export default {\n  \"fullsize\": \"LYdA1\",\n  \"fullsizeViewport\": \"tyCvm\",\n  \"fullsizeTrack\": \"aPpRz\",\n  \"fullsizeCell\": \"PcwKC\"\n};"],
   "mappings": "AAAA,IAAO,0BAAQ;AAAA,EACb,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,gBAAgB;AAClB;",
   "names": []
 }

package/dist/es/plugin-gallery/viewer/layout-grid-scss.js

@@ -1,6 +1,6 @@
 var layout_grid_default = {
-  "grid": "KEDdt",
-  "gridCell": "UhQ2k"
+  "grid": "uY6P8",
+  "gridCell": "EHJVD"
 };
 export {
   layout_grid_default as default

package/dist/es/plugin-gallery/viewer/layout-grid-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-gallery/viewer/layout-grid.scss"],
-  "sourcesContent": ["export default {\n  \"grid\": \"KEDdt\",\n  \"gridCell\": \"UhQ2k\"\n};"],
+  "sourcesContent": ["export default {\n  \"grid\": \"uY6P8\",\n  \"gridCell\": \"EHJVD\"\n};"],
   "mappings": "AAAA,IAAO,sBAAQ;AAAA,EACb,QAAQ;AAAA,EACR,YAAY;AACd;",
   "names": []
 }

package/dist/es/plugin-gallery/viewer/layout-masonry-scss.js

@@ -1,11 +1,11 @@
 var layout_masonry_default = {
-  "masonry": "aMULM",
-  "rows": "YiRmu",
-  "masonryCell": "tlIdy",
-  "columns": "N9QYc",
-  "horizontalRoot": "TWmRl",
-  "horizontalViewport": "npjU2",
-  "horizontal": "QOVyW"
+  "masonry": "Rkxau",
+  "rows": "lWpTK",
+  "masonryCell": "gOuWO",
+  "columns": "et-mU",
+  "horizontalRoot": "az-BZ",
+  "horizontalViewport": "_76wPp",
+  "horizontal": "LbX7C"
 };
 export {
   layout_masonry_default as default

package/dist/es/plugin-gallery/viewer/layout-masonry-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-gallery/viewer/layout-masonry.scss"],
-  "sourcesContent": ["export default {\n  \"masonry\": \"aMULM\",\n  \"rows\": \"YiRmu\",\n  \"masonryCell\": \"tlIdy\",\n  \"columns\": \"N9QYc\",\n  \"horizontalRoot\": \"TWmRl\",\n  \"horizontalViewport\": \"npjU2\",\n  \"horizontal\": \"QOVyW\"\n};"],
+  "sourcesContent": ["export default {\n  \"masonry\": \"Rkxau\",\n  \"rows\": \"lWpTK\",\n  \"masonryCell\": \"gOuWO\",\n  \"columns\": \"et-mU\",\n  \"horizontalRoot\": \"az-BZ\",\n  \"horizontalViewport\": \"_76wPp\",\n  \"horizontal\": \"LbX7C\"\n};"],
   "mappings": "AAAA,IAAO,yBAAQ;AAAA,EACb,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,sBAAsB;AAAA,EACtB,cAAc;AAChB;",
   "names": []
 }

package/dist/es/plugin-gallery/viewer/layout-panorama-scss.js

@@ -1,5 +1,5 @@
 var layout_panorama_default = {
-  "panorama": "_6uP0N"
+  "panorama": "dBXbQ"
 };
 export {
   layout_panorama_default as default

package/dist/es/plugin-gallery/viewer/layout-panorama-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-gallery/viewer/layout-panorama.scss"],
-  "sourcesContent": ["export default {\n  \"panorama\": \"_6uP0N\"\n};"],
+  "sourcesContent": ["export default {\n  \"panorama\": \"dBXbQ\"\n};"],
   "mappings": "AAAA,IAAO,0BAAQ;AAAA,EACb,YAAY;AACd;",
   "names": []
 }

package/dist/es/plugin-gallery/viewer/layout-slider-scss.js

@@ -1,10 +1,10 @@
 var layout_slider_default = {
-  "slider": "zkykQ",
-  "sliderViewport": "TgpxV",
-  "sliderTrack": "KD8pT",
-  "sliderCell": "IerMR",
-  "sliderFill": "XQPh-",
-  "sliderFit": "ewNwS"
+  "slider": "slb5J",
+  "sliderViewport": "_24Ncs",
+  "sliderTrack": "gZWF2",
+  "sliderCell": "aGwXn",
+  "sliderFill": "_35ChZ",
+  "sliderFit": "x42DW"
 };
 export {
   layout_slider_default as default

package/dist/es/plugin-gallery/viewer/layout-slider-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-gallery/viewer/layout-slider.scss"],
-  "sourcesContent": ["export default {\n  \"slider\": \"zkykQ\",\n  \"sliderViewport\": \"TgpxV\",\n  \"sliderTrack\": \"KD8pT\",\n  \"sliderCell\": \"IerMR\",\n  \"sliderFill\": \"XQPh-\",\n  \"sliderFit\": \"ewNwS\"\n};"],
+  "sourcesContent": ["export default {\n  \"slider\": \"slb5J\",\n  \"sliderViewport\": \"_24Ncs\",\n  \"sliderTrack\": \"gZWF2\",\n  \"sliderCell\": \"aGwXn\",\n  \"sliderFill\": \"_35ChZ\",\n  \"sliderFit\": \"x42DW\"\n};"],
   "mappings": "AAAA,IAAO,wBAAQ;AAAA,EACb,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,cAAc;AAAA,EACd,cAAc;AAAA,EACd,aAAa;AACf;",
   "names": []
 }

package/dist/es/plugin-gallery/viewer/layout-thumbnail-scss.js

@@ -1,15 +1,15 @@
 var layout_thumbnail_default = {
-  "thumbnailContainer": "HKgnS",
-  "thumbnail": "_9wcLu",
-  "placementTOP": "LFo5G",
-  "placementBOTTOM": "Q5gw6",
-  "placementLEFT": "PGFVB",
-  "placementRIGHT": "ejTtP",
-  "placementNONE": "_6dtC9",
-  "thumbnailNavigation": "d40xP",
-  "thumbnailList": "_26Xut",
-  "thumbnailItem": "sirw1",
-  "thumbnailButton": "THqoN"
+  "thumbnailContainer": "_3xvIJ",
+  "thumbnail": "H9Koi",
+  "placementTOP": "VkiXj",
+  "placementBOTTOM": "_4t84Q",
+  "placementLEFT": "XlgRJ",
+  "placementRIGHT": "iQ4l5",
+  "placementNONE": "UqaHE",
+  "thumbnailNavigation": "tvYz9",
+  "thumbnailList": "eTrXM",
+  "thumbnailItem": "nhPY5",
+  "thumbnailButton": "h-lHn"
 };
 export {
   layout_thumbnail_default as default

package/dist/es/plugin-gallery/viewer/layout-thumbnail-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-gallery/viewer/layout-thumbnail.scss"],
-  "sourcesContent": ["export default {\n  \"thumbnailContainer\": \"HKgnS\",\n  \"thumbnail\": \"_9wcLu\",\n  \"placementTOP\": \"LFo5G\",\n  \"placementBOTTOM\": \"Q5gw6\",\n  \"placementLEFT\": \"PGFVB\",\n  \"placementRIGHT\": \"ejTtP\",\n  \"placementNONE\": \"_6dtC9\",\n  \"thumbnailNavigation\": \"d40xP\",\n  \"thumbnailList\": \"_26Xut\",\n  \"thumbnailItem\": \"sirw1\",\n  \"thumbnailButton\": \"THqoN\"\n};"],
+  "sourcesContent": ["export default {\n  \"thumbnailContainer\": \"_3xvIJ\",\n  \"thumbnail\": \"H9Koi\",\n  \"placementTOP\": \"VkiXj\",\n  \"placementBOTTOM\": \"_4t84Q\",\n  \"placementLEFT\": \"XlgRJ\",\n  \"placementRIGHT\": \"iQ4l5\",\n  \"placementNONE\": \"UqaHE\",\n  \"thumbnailNavigation\": \"tvYz9\",\n  \"thumbnailList\": \"eTrXM\",\n  \"thumbnailItem\": \"nhPY5\",\n  \"thumbnailButton\": \"h-lHn\"\n};"],
   "mappings": "AAAA,IAAO,2BAAQ;AAAA,EACb,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,uBAAuB;AAAA,EACvB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,mBAAmB;AACrB;",
   "names": []
 }

package/dist/es/plugin-gallery/viewer/resolve-gallery-layout.js

@@ -55,11 +55,20 @@ const resolveGalleryLayout = ({
         horizontalScroll: options.layout.horizontalScroll === true
       };
     case "COLLAGE":
+      if (options.layout.horizontalScroll === true) {
+        return {
+          type: "MASONRY",
+          horizontalScroll: true,
+          orientation: "ROWS",
+          targetSize: DEFAULT_TARGET_SIZE,
+          spacing: resolveSpacing(options.item?.spacing)
+        };
+      }
       return {
-        type: "MASONRY",
-        horizontalScroll: options.layout.horizontalScroll === true,
-        orientation: "ROWS",
-        targetSize: DEFAULT_TARGET_SIZE,
+        type: "COLLAGE",
+        // ProGallery's Collage was Columns unless explicitly stored as Rows.
+        orientation: resolveOrientation(options.layout.orientation, "COLUMNS"),
+        targetSize: resolveTargetSize(options.item?.targetSize),
         spacing: resolveSpacing(options.item?.spacing)
       };
     case "GRID":
@@ -89,6 +98,7 @@ const resolveTargetSize = (value) => resolveClampedNumber(value, DEFAULT_TARGET_
 const resolveClampedInteger = (value, fallback, minimum, maximum) => typeof value === "number" && Number.isFinite(value) ? Math.min(maximum, Math.max(minimum, Math.trunc(value))) : fallback;
 const resolveClampedNumber = (value, fallback, minimum, maximum) => typeof value === "number" && Number.isFinite(value) ? Math.min(maximum, Math.max(minimum, value)) : fallback;
 export {
+  DEFAULT_TARGET_SIZE,
   resolveGalleryLayout
 };
 //# sourceMappingURL=resolve-gallery-layout.js.map

package/dist/es/plugin-gallery/viewer/resolve-gallery-layout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-gallery/viewer/resolve-gallery-layout.ts"],
-  "sourcesContent": ["import type { GalleryOptions } from './../../ricos-schema/legacy/wix/rich_content/v1/index.js';\n\nconst DEFAULT_SPACING = 5;\nconst MIN_SPACING = 0;\nconst MAX_SPACING = 100;\nconst DEFAULT_TARGET_SIZE = 300;\nconst MIN_TARGET_SIZE = 10;\nconst MAX_TARGET_SIZE = 1000;\nconst DEFAULT_GRID_COLUMNS = 3;\nconst MIN_GRID_COLUMNS = 1;\nconst MAX_GRID_COLUMNS = 5;\nconst DEFAULT_GRID_RATIO = 1;\nconst DEFAULT_SLIDER_RATIO = 16 / 9;\nconst SUPPORTED_RATIOS = new Set([16 / 9, 4 / 3, 1, 3 / 4, 9 / 16]);\n\ntype Crop = 'FILL' | 'FIT';\ntype Orientation = 'ROWS' | 'COLUMNS';\ntype ThumbnailPlacement = 'TOP' | 'RIGHT' | 'BOTTOM' | 'LEFT' | 'NONE';\n\nexport type ResolvedGalleryLayout =\n  | { type: 'PANORAMA'; spacing: number }\n  | { type: 'GRID'; columns: number; ratio: number; crop: Crop; spacing: number }\n  | { type: 'FULLSIZE' }\n  | { type: 'SLIDER'; ratio: number; crop: Crop; spacing: number }\n  | { type: 'COLUMN'; spacing: number }\n  | { type: 'THUMBNAIL'; placement: ThumbnailPlacement; spacing: number }\n  | {\n      type: 'MASONRY';\n      orientation: Orientation;\n      targetSize: number;\n      spacing: number;\n      horizontalScroll: boolean;\n    };\n\nexport const resolveGalleryLayout = ({\n  options,\n  isMobile,\n}: {\n  options?: GalleryOptions;\n  isMobile: boolean;\n}): ResolvedGalleryLayout => {\n  switch (options?.layout?.type) {\n    case 'PANORAMA':\n      return {\n        type: 'PANORAMA',\n        spacing: resolveClampedNumber(options.item?.spacing, DEFAULT_SPACING, 0, 100),\n      };\n    case 'FULLSIZE':\n    case 'SLIDESHOW':\n      return { type: 'FULLSIZE' };\n    case 'SLIDER':\n      return {\n        type: 'SLIDER',\n        ratio: resolveRatio(options.item?.ratio, DEFAULT_SLIDER_RATIO),\n        crop: resolveCrop(options.item?.crop, 'FIT'),\n        spacing: resolveSpacing(options.item?.spacing),\n      };\n    case 'COLUMN':\n      return {\n        type: 'COLUMN',\n        spacing: resolveSpacing(options.item?.spacing),\n      };\n    case 'THUMBNAIL':\n      return {\n        type: 'THUMBNAIL',\n        placement: resolveThumbnailPlacement(options.thumbnails?.placement),\n        spacing: resolveClampedInteger(\n          options.thumbnails?.spacing,\n          DEFAULT_SPACING,\n          MIN_SPACING,\n          MAX_SPACING\n        ),\n      };\n    case 'MASONRY':\n      return {\n        type: 'MASONRY',\n        orientation: resolveOrientation(options.layout.orientation, 'ROWS'),\n        targetSize: resolveTargetSize(options.item?.targetSize),\n        spacing: resolveSpacing(options.item?.spacing),\n        horizontalScroll: options.layout.horizontalScroll === true,\n      };\n    case 'COLLAGE':\n      // ProGallery's Collage grouped several items per `targetSize` cell, which\n      // Masonry cannot reproduce, so its stored orientation and size render\n      // poorly as Masonry. Use the Masonry defaults for those instead.\n      return {\n        type: 'MASONRY',\n        horizontalScroll: options.layout.horizontalScroll === true,\n        orientation: 'ROWS',\n        targetSize: DEFAULT_TARGET_SIZE,\n        spacing: resolveSpacing(options.item?.spacing),\n      };\n    case 'GRID':\n    case 'MAGIC':\n    default:\n      return resolveGrid(options, isMobile);\n  }\n};\n\nconst resolveGrid = (options: GalleryOptions | undefined, isMobile: boolean) => {\n  const desktopColumns = resolveGridColumns(options?.layout?.numberOfColumns);\n  const mobileColumns = resolveGridColumns(options?.layout?.mobileNumberOfColumns, desktopColumns);\n\n  return {\n    type: 'GRID' as const,\n    columns: isMobile ? mobileColumns : desktopColumns,\n    ratio: resolveRatio(options?.item?.ratio, DEFAULT_GRID_RATIO),\n    crop: resolveCrop(options?.item?.crop, 'FILL'),\n    spacing: resolveSpacing(options?.item?.spacing),\n  };\n};\n\nconst resolveGridColumns = (value: number | undefined, fallback = DEFAULT_GRID_COLUMNS) =>\n  typeof value === 'number' &&\n  Number.isInteger(value) &&\n  value >= MIN_GRID_COLUMNS &&\n  value <= MAX_GRID_COLUMNS\n    ? value\n    : fallback;\n\nconst resolveRatio = (value: number | undefined, fallback: number) =>\n  typeof value === 'number' && SUPPORTED_RATIOS.has(value) ? value : fallback;\n\nconst resolveCrop = (value: unknown, fallback: Crop): Crop =>\n  value === 'FILL' || value === 'FIT' ? value : fallback;\n\nconst resolveOrientation = (value: unknown, fallback: Orientation): Orientation =>\n  value === 'ROWS' || value === 'COLUMNS' ? value : fallback;\n\nconst resolveThumbnailPlacement = (value: unknown): ThumbnailPlacement =>\n  value === 'TOP' || value === 'RIGHT' || value === 'BOTTOM' || value === 'LEFT' || value === 'NONE'\n    ? value\n    : 'BOTTOM';\n\nconst resolveSpacing = (value: number | undefined) =>\n  resolveClampedNumber(value, DEFAULT_SPACING, MIN_SPACING, MAX_SPACING);\n\nconst resolveTargetSize = (value: number | undefined) =>\n  resolveClampedNumber(value, DEFAULT_TARGET_SIZE, MIN_TARGET_SIZE, MAX_TARGET_SIZE);\n\nconst resolveClampedInteger = (\n  value: number | undefined,\n  fallback: number,\n  minimum: number,\n  maximum: number\n) =>\n  typeof value === 'number' && Number.isFinite(value)\n    ? Math.min(maximum, Math.max(minimum, Math.trunc(value)))\n    : fallback;\n\nconst resolveClampedNumber = (\n  value: number | undefined,\n  fallback: number,\n  minimum: number,\n  maximum: number\n) =>\n  typeof value === 'number' && Number.isFinite(value)\n    ? Math.min(maximum, Math.max(minimum, value))\n    : fallback;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { GalleryOptions } from './../../ricos-schema/legacy/wix/rich_content/v1/index.js';\n\nconst DEFAULT_SPACING = 5;\nconst MIN_SPACING = 0;\nconst MAX_SPACING = 100;\nexport const DEFAULT_TARGET_SIZE = 300;\nconst MIN_TARGET_SIZE = 10;\nconst MAX_TARGET_SIZE = 1000;\nconst DEFAULT_GRID_COLUMNS = 3;\nconst MIN_GRID_COLUMNS = 1;\nconst MAX_GRID_COLUMNS = 5;\nconst DEFAULT_GRID_RATIO = 1;\nconst DEFAULT_SLIDER_RATIO = 16 / 9;\nconst SUPPORTED_RATIOS = new Set([16 / 9, 4 / 3, 1, 3 / 4, 9 / 16]);\n\ntype Crop = 'FILL' | 'FIT';\ntype Orientation = 'ROWS' | 'COLUMNS';\ntype ThumbnailPlacement = 'TOP' | 'RIGHT' | 'BOTTOM' | 'LEFT' | 'NONE';\n\nexport type ResolvedGalleryLayout =\n  | { type: 'PANORAMA'; spacing: number }\n  | { type: 'GRID'; columns: number; ratio: number; crop: Crop; spacing: number }\n  | { type: 'FULLSIZE' }\n  | { type: 'SLIDER'; ratio: number; crop: Crop; spacing: number }\n  | { type: 'COLUMN'; spacing: number }\n  | { type: 'THUMBNAIL'; placement: ThumbnailPlacement; spacing: number }\n  | { type: 'COLLAGE'; orientation: Orientation; targetSize: number; spacing: number }\n  | {\n      type: 'MASONRY';\n      orientation: Orientation;\n      targetSize: number;\n      spacing: number;\n      horizontalScroll: boolean;\n    };\n\nexport const resolveGalleryLayout = ({\n  options,\n  isMobile,\n}: {\n  options?: GalleryOptions;\n  isMobile: boolean;\n}): ResolvedGalleryLayout => {\n  switch (options?.layout?.type) {\n    case 'PANORAMA':\n      return {\n        type: 'PANORAMA',\n        spacing: resolveClampedNumber(options.item?.spacing, DEFAULT_SPACING, 0, 100),\n      };\n    case 'FULLSIZE':\n    case 'SLIDESHOW':\n      return { type: 'FULLSIZE' };\n    case 'SLIDER':\n      return {\n        type: 'SLIDER',\n        ratio: resolveRatio(options.item?.ratio, DEFAULT_SLIDER_RATIO),\n        crop: resolveCrop(options.item?.crop, 'FIT'),\n        spacing: resolveSpacing(options.item?.spacing),\n      };\n    case 'COLUMN':\n      return {\n        type: 'COLUMN',\n        spacing: resolveSpacing(options.item?.spacing),\n      };\n    case 'THUMBNAIL':\n      return {\n        type: 'THUMBNAIL',\n        placement: resolveThumbnailPlacement(options.thumbnails?.placement),\n        spacing: resolveClampedInteger(\n          options.thumbnails?.spacing,\n          DEFAULT_SPACING,\n          MIN_SPACING,\n          MAX_SPACING\n        ),\n      };\n    case 'MASONRY':\n      return {\n        type: 'MASONRY',\n        orientation: resolveOrientation(options.layout.orientation, 'ROWS'),\n        targetSize: resolveTargetSize(options.item?.targetSize),\n        spacing: resolveSpacing(options.item?.spacing),\n        horizontalScroll: options.layout.horizontalScroll === true,\n      };\n    case 'COLLAGE':\n      // The horizontal flow has no grouped equivalent and stays a Masonry strip\n      // with Masonry's default size, since the stored one sized groups.\n      if (options.layout.horizontalScroll === true) {\n        return {\n          type: 'MASONRY',\n          horizontalScroll: true,\n          orientation: 'ROWS',\n          targetSize: DEFAULT_TARGET_SIZE,\n          spacing: resolveSpacing(options.item?.spacing),\n        };\n      }\n      return {\n        type: 'COLLAGE',\n        // ProGallery's Collage was Columns unless explicitly stored as Rows.\n        orientation: resolveOrientation(options.layout.orientation, 'COLUMNS'),\n        targetSize: resolveTargetSize(options.item?.targetSize),\n        spacing: resolveSpacing(options.item?.spacing),\n      };\n    case 'GRID':\n    case 'MAGIC':\n    default:\n      return resolveGrid(options, isMobile);\n  }\n};\n\nconst resolveGrid = (options: GalleryOptions | undefined, isMobile: boolean) => {\n  const desktopColumns = resolveGridColumns(options?.layout?.numberOfColumns);\n  const mobileColumns = resolveGridColumns(options?.layout?.mobileNumberOfColumns, desktopColumns);\n\n  return {\n    type: 'GRID' as const,\n    columns: isMobile ? mobileColumns : desktopColumns,\n    ratio: resolveRatio(options?.item?.ratio, DEFAULT_GRID_RATIO),\n    crop: resolveCrop(options?.item?.crop, 'FILL'),\n    spacing: resolveSpacing(options?.item?.spacing),\n  };\n};\n\nconst resolveGridColumns = (value: number | undefined, fallback = DEFAULT_GRID_COLUMNS) =>\n  typeof value === 'number' &&\n  Number.isInteger(value) &&\n  value >= MIN_GRID_COLUMNS &&\n  value <= MAX_GRID_COLUMNS\n    ? value\n    : fallback;\n\nconst resolveRatio = (value: number | undefined, fallback: number) =>\n  typeof value === 'number' && SUPPORTED_RATIOS.has(value) ? value : fallback;\n\nconst resolveCrop = (value: unknown, fallback: Crop): Crop =>\n  value === 'FILL' || value === 'FIT' ? value : fallback;\n\nconst resolveOrientation = (value: unknown, fallback: Orientation): Orientation =>\n  value === 'ROWS' || value === 'COLUMNS' ? value : fallback;\n\nconst resolveThumbnailPlacement = (value: unknown): ThumbnailPlacement =>\n  value === 'TOP' || value === 'RIGHT' || value === 'BOTTOM' || value === 'LEFT' || value === 'NONE'\n    ? value\n    : 'BOTTOM';\n\nconst resolveSpacing = (value: number | undefined) =>\n  resolveClampedNumber(value, DEFAULT_SPACING, MIN_SPACING, MAX_SPACING);\n\nconst resolveTargetSize = (value: number | undefined) =>\n  resolveClampedNumber(value, DEFAULT_TARGET_SIZE, MIN_TARGET_SIZE, MAX_TARGET_SIZE);\n\nconst resolveClampedInteger = (\n  value: number | undefined,\n  fallback: number,\n  minimum: number,\n  maximum: number\n) =>\n  typeof value === 'number' && Number.isFinite(value)\n    ? Math.min(maximum, Math.max(minimum, Math.trunc(value)))\n    : fallback;\n\nconst resolveClampedNumber = (\n  value: number | undefined,\n  fallback: number,\n  minimum: number,\n  maximum: number\n) =>\n  typeof value === 'number' && Number.isFinite(value)\n    ? Math.min(maximum, Math.max(minimum, value))\n    : fallback;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/es/plugin-gallery/viewer-styles-inject.js

@@ -1,6 +1,6 @@
-var styleDataHash = '073cfdfc';  
+var styleDataHash = '4770da89';  
 export const injectCss = (() => {
-  var css = `.HKgnS{container-type:inline-size;inline-size:100%;min-inline-size:0}.HKgnS:where([data-ricos-responsive=viewport]),:where([data-ricos-responsive=viewport]) .HKgnS{container-type:normal}._9wcLu{--ricos-internal-gallery-thumbnail-size:120px;--ricos-internal-gallery-thumbnail-stage-block-size:500px;display:grid;inline-size:100%;min-inline-size:0}._9wcLu [data-hook=gallery-fullsize]{grid-area:stage;min-block-size:0;min-inline-size:0}.LFo5G{grid-template:"strip" var(--ricos-internal-gallery-thumbnail-size) "stage" var(--ricos-internal-gallery-thumbnail-stage-block-size)/minmax(0,1fr)}.Q5gw6{grid-template:"stage" var(--ricos-internal-gallery-thumbnail-stage-block-size) "strip" var(--ricos-internal-gallery-thumbnail-size)/minmax(0,1fr)}.PGFVB{--ricos-internal-gallery-fullsize-block-size:calc(var(--ricos-internal-gallery-thumbnail-stage-block-size) + var(--ricos-internal-gallery-thumbnail-size));grid-template:"strip stage" var(--ricos-internal-gallery-fullsize-block-size)/var(--ricos-internal-gallery-thumbnail-size) minmax(0,1fr)}.ejTtP{--ricos-internal-gallery-fullsize-block-size:calc(var(--ricos-internal-gallery-thumbnail-stage-block-size) + var(--ricos-internal-gallery-thumbnail-size));grid-template:"stage strip" var(--ricos-internal-gallery-fullsize-block-size)/minmax(0,1fr) var(--ricos-internal-gallery-thumbnail-size)}._6dtC9{block-size:var(--ricos-internal-gallery-thumbnail-stage-block-size);display:block}.d40xP{grid-area:strip;min-block-size:0;min-inline-size:0;overflow:hidden}._26Xut{block-size:100%;display:flex;gap:var(--ricos-internal-gallery-thumbnail-spacing);inline-size:100%;list-style:none;margin:0;overflow:auto;padding:0;scrollbar-width:none}._26Xut::-webkit-scrollbar{display:none}.PGFVB ._26Xut,.ejTtP ._26Xut{flex-direction:column}.sirw1{block-size:var(--ricos-internal-gallery-thumbnail-size);flex:0 0 var(--ricos-internal-gallery-thumbnail-size);inline-size:var(--ricos-internal-gallery-thumbnail-size)}.THqoN{appearance:none;background:transparent;block-size:100%;border:0;cursor:pointer;display:block;inline-size:100%;padding:0;position:relative}.THqoN [data-hook^=gallery-thumbnail-media]{aspect-ratio:1;block-size:100%;inline-size:100%}.THqoN:focus-visible{outline:2px solid #3899ec;outline-offset:-2px}.THqoN[aria-current=true]:after{background:hsla(0,0%,100%,.4);content:"";inset:0;pointer-events:none;position:absolute}@container (max-width: 500px){._9wcLu:where(:not([data-ricos-responsive=viewport],[data-ricos-responsive=viewport] *)){--ricos-internal-gallery-thumbnail-size:90px}}@media (max-width:500px){._9wcLu:where([data-ricos-responsive=viewport]),:where([data-ricos-responsive=viewport]) ._9wcLu{--ricos-internal-gallery-thumbnail-size:90px}}@media (prefers-reduced-motion:reduce){._26Xut{scroll-behavior:auto}}.zkykQ{aspect-ratio:var(--ricos-internal-gallery-slider-ratio);inline-size:100%}.TgpxV{block-size:100%;scroll-snap-type:inline mandatory}.KD8pT{block-size:100%;gap:var(--ricos-internal-gallery-slider-spacing)}.IerMR{block-size:100%;flex:0 0 auto;scroll-snap-align:center;scroll-snap-stop:always}.XQPh- .IerMR{aspect-ratio:var(--ricos-internal-gallery-slider-ratio);inline-size:100%}.ewNwS .IerMR{aspect-ratio:var(--ricos-internal-gallery-slider-item-ratio);inline-size:auto;max-inline-size:var(--ricos-internal-gallery-slider-item-width)}._6uP0N{display:flex;flex-direction:column;gap:var(--ricos-internal-gallery-panorama-spacing,5px);inline-size:100%;list-style:none;margin:0;padding:0}.zGFYt{block-size:500px;inline-size:100%}._4VoY5{block-size:500px;scroll-snap-type:inline proximity}.t42Rt{block-size:500px;gap:var(--ricos-internal-gallery-column-spacing)}.o6HA0{block-size:500px;flex:0 0 175px;inline-size:175px;scroll-snap-align:start}.aMULM{inline-size:100%;list-style:none;margin:0;padding:0}.YiRmu{container-type:inline-size;display:flex;flex-wrap:wrap;gap:var(--ricos-internal-gallery-masonry-spacing,5px)}.YiRmu:where([data-ricos-responsive=viewport]),:where([data-ricos-responsive=viewport]) .YiRmu{container-type:normal}.YiRmu .tlIdy{flex:calc(var(--ricos-internal-gallery-masonry-item-ratio)*1000) 1 calc(var(--ricos-internal-gallery-masonry-row-basis, 240px)*var(--ricos-internal-gallery-masonry-item-ratio));max-inline-size:calc(var(--ricos-internal-gallery-masonry-row-max-basis, 450px)*var(--ricos-internal-gallery-masonry-item-ratio))}@supports not (contain:inline-size){@media only screen and (max-width:480px){.YiRmu .tlIdy{max-inline-size:none}}}@container (width < 480px){.YiRmu:where(:not([data-ricos-responsive=viewport],[data-ricos-responsive=viewport] *)) .tlIdy{max-inline-size:none}}@media (width < 480px){.YiRmu:where([data-ricos-responsive=viewport]) .tlIdy,:where([data-ricos-responsive=viewport]) .YiRmu .tlIdy{max-inline-size:none}}.N9QYc{column-gap:var(--ricos-internal-gallery-masonry-spacing,5px);column-width:var(--ricos-internal-gallery-masonry-target-size,300px)}.N9QYc .tlIdy{break-inside:avoid;display:inline-block;inline-size:100%;margin-block-end:var(--ricos-internal-gallery-masonry-spacing,5px);vertical-align:top}.tlIdy{aspect-ratio:var(--ricos-internal-gallery-masonry-item-ratio);overflow:hidden}.TWmRl{block-size:var(--ricos-internal-gallery-masonry-horizontal-block-size,500px);inline-size:100%}.npjU2{block-size:var(--ricos-internal-gallery-masonry-horizontal-block-size,500px);scroll-snap-type:inline proximity}.QOVyW{block-size:var(--ricos-internal-gallery-masonry-horizontal-block-size,500px);flex-wrap:nowrap;inline-size:100%}.QOVyW.YiRmu{align-items:center}.QOVyW.YiRmu .tlIdy{block-size:min(var(--ricos-internal-gallery-masonry-target-size,300px),var(--ricos-internal-gallery-masonry-horizontal-block-size,500px));flex:0 0 auto;inline-size:auto;max-inline-size:none;scroll-snap-align:start}.QOVyW.N9QYc{column-fill:auto;column-width:var(--ricos-internal-gallery-masonry-target-size,300px);display:block}.SYFPQ{block-size:var(--ricos-internal-gallery-fullsize-block-size,500px);inline-size:100%}._5kE8q{block-size:var(--ricos-internal-gallery-fullsize-block-size,500px);scroll-snap-type:inline mandatory}.CZ9FD{block-size:var(--ricos-internal-gallery-fullsize-block-size,500px);gap:0}.MbCNP{block-size:var(--ricos-internal-gallery-fullsize-block-size,500px);flex:0 0 100%;inline-size:100%;scroll-snap-align:start;scroll-snap-stop:always}.KEDdt{display:grid;gap:var(--ricos-internal-gallery-grid-spacing,5px);grid-template-columns:repeat(var(--ricos-internal-gallery-grid-columns,3),minmax(0,1fr));inline-size:100%;list-style:none;margin:0;padding:0}.UhQ2k{aspect-ratio:var(--ricos-internal-gallery-grid-ratio,1)}._6J9Gq{display:block;inline-size:100%;overflow:hidden;position:relative}._6J9Gq>img,._6J9Gq>video{block-size:100%;display:block;inline-size:100%;object-position:center}._8jRNg{align-items:center;display:flex;justify-content:center}._8jRNg>img,._8jRNg>video{block-size:auto;inline-size:auto;margin:auto;max-block-size:100%;max-inline-size:100%;object-fit:contain}.zW7oN{background:#e5e5e5;min-block-size:1px;min-inline-size:1px}.D5Y79{appearance:none;background:transparent;border:0;cursor:pointer;inline-size:100%;inset:0;padding:0;position:absolute}.D5Y79:focus-visible{outline:2px solid #3899ec;outline-offset:-2px}.IezIb{block-size:0;border-block:12px solid transparent;border-inline-start:18px solid #fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));inline-size:0;inset-block-start:50%;inset-inline-start:50%;position:absolute;transform:translate(-40%,-50%)}.mXyIJ{align-items:center;appearance:none;background:transparent;block-size:39px;border:0;border-radius:0;color:#000;cursor:pointer;display:inline-flex;inline-size:23px;justify-content:center;overflow:hidden;padding:0;position:relative;transition:opacity .12s ease}.mXyIJ:disabled,[aria-disabled=true].mXyIJ:not(:focus-visible){pointer-events:none;visibility:hidden}.mXyIJ:focus-visible{outline:2px solid #3899ec;outline-offset:2px}@media (prefers-reduced-motion:reduce){.mXyIJ{transition:none}}._9BJRu,.oedEd{inset-block-start:50%;position:absolute;transform:translateY(-50%)}.jXvzn{block-size:39px;display:block;inline-size:46px;inset-block-start:0;inset-inline-end:0;position:absolute;fill:currentColor;filter:drop-shadow(0 1px .15px #b2b2b2)}.iNS5R>img,.iNS5R>video{object-fit:cover}.I9s2T{block-size:auto}.I9s2T>img,.I9s2T>video{block-size:auto;object-fit:contain}.oiGga{list-style:none;min-inline-size:0}.oiGga figure{margin:0;position:relative}.oiGga .qQ8vW,.oiGga a{color:inherit;display:block;inline-size:100%}.oiGga .qQ8vW,.oiGga [data-hook^=gallery-media-],.oiGga a,.oiGga figure{block-size:100%}.oiGga figcaption{background:rgba(0,0,0,.6);color:#fff;inset-block-end:0;inset-inline:0;opacity:0;overflow:hidden;padding-block:16px;padding-inline:20px;pointer-events:none;position:absolute;text-align:center;text-overflow:ellipsis;transition:opacity .12s ease;white-space:nowrap}.oiGga figure:focus-within figcaption,.oiGga figure:hover figcaption{opacity:1}.qQ8vW{appearance:none;background:transparent;border:0;cursor:pointer;padding:0;position:relative;text-align:inherit}.qQ8vW:focus-visible .jeOL0{outline:2px solid #3899ec;outline-offset:2px}.jeOL0{background:#fff;block-size:28px;border-radius:50%;box-sizing:border-box;inline-size:28px;inset-block-start:12px;inset-inline-end:12px;opacity:0;padding:6px;pointer-events:none;position:absolute;transition:opacity .2s ease 0s}.p4-Fv{appearance:none;border:0;cursor:pointer;display:grid;place-items:center;pointer-events:auto}._8DiSE{block-size:100%;display:block;inline-size:100%;pointer-events:none}.oiGga figure:hover .jeOL0{opacity:1;transition-delay:.6s}.oiGga figure:focus-within .jeOL0,.p4-Fv:focus-visible{opacity:1;transition-delay:0s}.p4-Fv:focus-visible{outline:2px solid #3899ec;outline-offset:2px}._31MjQ{inset:0;pointer-events:none;position:absolute}._3m4Rz,._6URoZ{min-inline-size:0}._3m4Rz{block-size:100%;position:relative}._3m4Rz .yqSZS{display:flex;list-style:none;margin:0;padding:0}._6URoZ{overflow-block:hidden;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}._6URoZ::-webkit-scrollbar{display:none}._9BJRu{inset-inline-start:var(--ricos-internal-gallery-arrow-inset,12px)}.oedEd{inset-inline-end:var(--ricos-internal-gallery-arrow-inset,12px)}.wEHVx{inset-inline-end:auto;inset-inline-start:0}@media (prefers-reduced-motion:reduce){._6URoZ{scroll-behavior:auto}.jeOL0,.oiGga figcaption{transition:none}.oiGga figure:hover .jeOL0{transition-delay:0s}}._1zfUR{inline-size:100%;outline:none}`;
+  var css = `._3xvIJ{container-type:inline-size;inline-size:100%;min-inline-size:0}._3xvIJ:where([data-ricos-responsive=viewport]),:where([data-ricos-responsive=viewport]) ._3xvIJ{container-type:normal}.H9Koi{--ricos-internal-gallery-thumbnail-size:120px;--ricos-internal-gallery-thumbnail-stage-block-size:500px;display:grid;inline-size:100%;min-inline-size:0}.H9Koi [data-hook=gallery-fullsize]{grid-area:stage;min-block-size:0;min-inline-size:0}.VkiXj{grid-template:"strip" var(--ricos-internal-gallery-thumbnail-size) "stage" var(--ricos-internal-gallery-thumbnail-stage-block-size)/minmax(0,1fr)}._4t84Q{grid-template:"stage" var(--ricos-internal-gallery-thumbnail-stage-block-size) "strip" var(--ricos-internal-gallery-thumbnail-size)/minmax(0,1fr)}.XlgRJ{--ricos-internal-gallery-fullsize-block-size:calc(var(--ricos-internal-gallery-thumbnail-stage-block-size) + var(--ricos-internal-gallery-thumbnail-size));grid-template:"strip stage" var(--ricos-internal-gallery-fullsize-block-size)/var(--ricos-internal-gallery-thumbnail-size) minmax(0,1fr)}.iQ4l5{--ricos-internal-gallery-fullsize-block-size:calc(var(--ricos-internal-gallery-thumbnail-stage-block-size) + var(--ricos-internal-gallery-thumbnail-size));grid-template:"stage strip" var(--ricos-internal-gallery-fullsize-block-size)/minmax(0,1fr) var(--ricos-internal-gallery-thumbnail-size)}.UqaHE{block-size:var(--ricos-internal-gallery-thumbnail-stage-block-size);display:block}.tvYz9{grid-area:strip;min-block-size:0;min-inline-size:0;overflow:hidden}.eTrXM{block-size:100%;display:flex;gap:var(--ricos-internal-gallery-thumbnail-spacing);inline-size:100%;list-style:none;margin:0;overflow:auto;padding:0;scrollbar-width:none}.eTrXM::-webkit-scrollbar{display:none}.XlgRJ .eTrXM,.iQ4l5 .eTrXM{flex-direction:column}.nhPY5{block-size:var(--ricos-internal-gallery-thumbnail-size);flex:0 0 var(--ricos-internal-gallery-thumbnail-size);inline-size:var(--ricos-internal-gallery-thumbnail-size)}.h-lHn{appearance:none;background:transparent;block-size:100%;border:0;cursor:pointer;display:block;inline-size:100%;padding:0;position:relative}.h-lHn [data-hook^=gallery-thumbnail-media]{aspect-ratio:1;block-size:100%;inline-size:100%}.h-lHn:focus-visible{outline:2px solid #3899ec;outline-offset:-2px}.h-lHn[aria-current=true]:after{background:hsla(0,0%,100%,.4);content:"";inset:0;pointer-events:none;position:absolute}@container (max-width: 500px){.H9Koi:where(:not([data-ricos-responsive=viewport],[data-ricos-responsive=viewport] *)){--ricos-internal-gallery-thumbnail-size:90px}}@media (max-width:500px){.H9Koi:where([data-ricos-responsive=viewport]),:where([data-ricos-responsive=viewport]) .H9Koi{--ricos-internal-gallery-thumbnail-size:90px}}@media (prefers-reduced-motion:reduce){.eTrXM{scroll-behavior:auto}}.slb5J{aspect-ratio:var(--ricos-internal-gallery-slider-ratio);inline-size:100%}._24Ncs{block-size:100%;scroll-snap-type:inline mandatory}.gZWF2{block-size:100%;gap:var(--ricos-internal-gallery-slider-spacing)}.aGwXn{block-size:100%;flex:0 0 auto;scroll-snap-align:center;scroll-snap-stop:always}._35ChZ .aGwXn{aspect-ratio:var(--ricos-internal-gallery-slider-ratio);inline-size:100%}.x42DW .aGwXn{aspect-ratio:var(--ricos-internal-gallery-slider-item-ratio);inline-size:auto;max-inline-size:var(--ricos-internal-gallery-slider-item-width)}.LYdA1{block-size:var(--ricos-internal-gallery-fullsize-block-size,500px);inline-size:100%}.tyCvm{block-size:var(--ricos-internal-gallery-fullsize-block-size,500px);scroll-snap-type:inline mandatory}.aPpRz{block-size:var(--ricos-internal-gallery-fullsize-block-size,500px);gap:0}.PcwKC{block-size:var(--ricos-internal-gallery-fullsize-block-size,500px);flex:0 0 100%;inline-size:100%;scroll-snap-align:start;scroll-snap-stop:always}.dBXbQ{display:flex;flex-direction:column;gap:var(--ricos-internal-gallery-panorama-spacing,5px);inline-size:100%;list-style:none;margin:0;padding:0}.THaGx{container-type:inline-size;inline-size:100%;overflow-x:clip}.THaGx:where([data-ricos-responsive=viewport]),:where([data-ricos-responsive=viewport]) .THaGx{container-type:normal}.vVKd0{display:grid;gap:var(--ricos-internal-gallery-collage-spacing,5px);grid-auto-flow:row dense;inline-size:100%;list-style:none;margin:0;padding:0}.uCaXh{align-self:stretch;aspect-ratio:var(--ricos-internal-gallery-collage-cell-ratio,4/3);justify-self:stretch;overflow:hidden}.MA8Hq{gap:0;inline-size:calc(100% + var(--ricos-internal-gallery-collage-spacing, 5px));margin-block-end:calc(var(--ricos-internal-gallery-collage-spacing, 5px)*-1);--ricos-internal-gallery-collage-unit:1cqw}:where([data-ricos-responsive=viewport]) .MA8Hq{--ricos-internal-gallery-collage-unit:1vw}.MA8Hq .uCaXh{aspect-ratio:auto;margin-block-end:var(--ricos-internal-gallery-collage-spacing,5px);margin-inline-end:var(--ricos-internal-gallery-collage-spacing,5px)}.CL2Px{grid-template-columns:minmax(0,1fr)}.CL2Px .uCaXh{align-self:start;aspect-ratio:auto;block-size:0;justify-self:start;position:relative}.CL2Px .uCaXh>figure{inset:0;position:absolute}.fWqEi{block-size:500px;inline-size:100%}.wVUTU{block-size:500px;scroll-snap-type:inline proximity}.axhb6{block-size:500px;gap:var(--ricos-internal-gallery-column-spacing)}.sihAY{block-size:500px;flex:0 0 175px;inline-size:175px;scroll-snap-align:start}.uY6P8{display:grid;gap:var(--ricos-internal-gallery-grid-spacing,5px);grid-template-columns:repeat(var(--ricos-internal-gallery-grid-columns,3),minmax(0,1fr));inline-size:100%;list-style:none;margin:0;padding:0}.EHJVD{aspect-ratio:var(--ricos-internal-gallery-grid-ratio,1)}.Rkxau{inline-size:100%;list-style:none;margin:0;padding:0}.lWpTK{container-type:inline-size;display:flex;flex-wrap:wrap;gap:var(--ricos-internal-gallery-masonry-spacing,5px)}.lWpTK:where([data-ricos-responsive=viewport]),:where([data-ricos-responsive=viewport]) .lWpTK{container-type:normal}.lWpTK .gOuWO{flex:calc(var(--ricos-internal-gallery-masonry-item-ratio)*1000) 1 calc(var(--ricos-internal-gallery-masonry-row-basis, 240px)*var(--ricos-internal-gallery-masonry-item-ratio));max-inline-size:calc(var(--ricos-internal-gallery-masonry-row-max-basis, 450px)*var(--ricos-internal-gallery-masonry-item-ratio))}@supports not (contain:inline-size){@media only screen and (max-width:480px){.lWpTK .gOuWO{max-inline-size:none}}}@container (width < 480px){.lWpTK:where(:not([data-ricos-responsive=viewport],[data-ricos-responsive=viewport] *)) .gOuWO{max-inline-size:none}}@media (width < 480px){.lWpTK:where([data-ricos-responsive=viewport]) .gOuWO,:where([data-ricos-responsive=viewport]) .lWpTK .gOuWO{max-inline-size:none}}.et-mU{column-gap:var(--ricos-internal-gallery-masonry-spacing,5px);column-width:var(--ricos-internal-gallery-masonry-target-size,300px)}.et-mU .gOuWO{break-inside:avoid;display:inline-block;inline-size:100%;margin-block-end:var(--ricos-internal-gallery-masonry-spacing,5px);vertical-align:top}.gOuWO{aspect-ratio:var(--ricos-internal-gallery-masonry-item-ratio);overflow:hidden}.az-BZ{block-size:var(--ricos-internal-gallery-masonry-horizontal-block-size,500px);inline-size:100%}._76wPp{block-size:var(--ricos-internal-gallery-masonry-horizontal-block-size,500px);scroll-snap-type:inline proximity}.LbX7C{block-size:var(--ricos-internal-gallery-masonry-horizontal-block-size,500px);flex-wrap:nowrap;inline-size:100%}.LbX7C.lWpTK{align-items:center}.LbX7C.lWpTK .gOuWO{block-size:min(var(--ricos-internal-gallery-masonry-target-size,300px),var(--ricos-internal-gallery-masonry-horizontal-block-size,500px));flex:0 0 auto;inline-size:auto;max-inline-size:none;scroll-snap-align:start}.LbX7C.et-mU{column-fill:auto;column-width:var(--ricos-internal-gallery-masonry-target-size,300px);display:block}.c7xbR{inline-size:100%;outline:none}.iizEA{display:block;inline-size:100%;overflow:hidden;position:relative}.iizEA>img,.iizEA>video{block-size:100%;display:block;inline-size:100%;object-position:center}._3zeqy{align-items:center;display:flex;justify-content:center}._3zeqy>img,._3zeqy>video{block-size:auto;inline-size:auto;margin:auto;max-block-size:100%;max-inline-size:100%;object-fit:contain}.YjyUY{background:#e5e5e5;min-block-size:1px;min-inline-size:1px}.eite2{appearance:none;background:transparent;border:0;cursor:pointer;inline-size:100%;inset:0;padding:0;position:absolute}.eite2:focus-visible{outline:2px solid #3899ec;outline-offset:-2px}.okpUz{block-size:0;border-block:12px solid transparent;border-inline-start:18px solid #fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));inline-size:0;inset-block-start:50%;inset-inline-start:50%;position:absolute;transform:translate(-40%,-50%)}.Vvdkm{align-items:center;appearance:none;background:transparent;block-size:39px;border:0;border-radius:0;color:#000;cursor:pointer;display:inline-flex;inline-size:23px;justify-content:center;overflow:hidden;padding:0;position:relative;transition:opacity .12s ease}.Vvdkm:disabled,[aria-disabled=true].Vvdkm:not(:focus-visible){pointer-events:none;visibility:hidden}.Vvdkm:focus-visible{outline:2px solid #3899ec;outline-offset:2px}@media (prefers-reduced-motion:reduce){.Vvdkm{transition:none}}.C0w3T,.OyB8O{inset-block-start:50%;position:absolute;transform:translateY(-50%)}.J0i1x{block-size:39px;display:block;inline-size:46px;inset-block-start:0;inset-inline-end:0;position:absolute;fill:currentColor;filter:drop-shadow(0 1px .15px #b2b2b2)}.b2o-E>img,.b2o-E>video{object-fit:cover}.Wvbdk{block-size:auto}.Wvbdk>img,.Wvbdk>video{block-size:auto;object-fit:contain}.PXWWe{list-style:none;min-inline-size:0}.PXWWe figure{margin:0;position:relative}.PXWWe .AuHrT,.PXWWe a{color:inherit;display:block;inline-size:100%}.PXWWe .AuHrT,.PXWWe [data-hook^=gallery-media-],.PXWWe a,.PXWWe figure{block-size:100%}.PXWWe figcaption{background:rgba(0,0,0,.6);color:#fff;inset-block-end:0;inset-inline:0;opacity:0;overflow:hidden;padding-block:16px;padding-inline:20px;pointer-events:none;position:absolute;text-align:center;text-overflow:ellipsis;transition:opacity .12s ease;white-space:nowrap}.PXWWe figure:focus-within figcaption,.PXWWe figure:hover figcaption{opacity:1}.AuHrT{appearance:none;background:transparent;border:0;cursor:pointer;padding:0;position:relative;text-align:inherit}.AuHrT:focus-visible .MGV-x{outline:2px solid #3899ec;outline-offset:2px}.MGV-x{background:#fff;block-size:28px;border-radius:50%;box-sizing:border-box;inline-size:28px;inset-block-start:12px;inset-inline-end:12px;opacity:0;padding:6px;pointer-events:none;position:absolute;transition:opacity .2s ease 0s}.VMu-h{appearance:none;border:0;cursor:pointer;display:grid;place-items:center;pointer-events:auto}._7dFXn{block-size:100%;display:block;inline-size:100%;pointer-events:none}.PXWWe figure:hover .MGV-x{opacity:1;transition-delay:.6s}.PXWWe figure:focus-within .MGV-x,.VMu-h:focus-visible{opacity:1;transition-delay:0s}.VMu-h:focus-visible{outline:2px solid #3899ec;outline-offset:2px}.ynMWI{inset:0;pointer-events:none;position:absolute}._4JEMd,.nDKdf{min-inline-size:0}.nDKdf{block-size:100%;position:relative}.nDKdf .ySUzr{display:flex;list-style:none;margin:0;padding:0}._4JEMd{overflow-block:hidden;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}._4JEMd::-webkit-scrollbar{display:none}.C0w3T{inset-inline-start:var(--ricos-internal-gallery-arrow-inset,12px)}.OyB8O{inset-inline-end:var(--ricos-internal-gallery-arrow-inset,12px)}.sCtZw{inset-inline-end:auto;inset-inline-start:0}@media (prefers-reduced-motion:reduce){._4JEMd{scroll-behavior:auto}.MGV-x,.PXWWe figcaption{transition:none}.PXWWe figure:hover .MGV-x{transition-delay:0s}}`;
   var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';
 
   if (isTest || !css || typeof document === 'undefined') { return; }