@odoo/o-spreadsheet 19.1.0-alpha.1 → 19.1.0-alpha.3

package/dist/o-spreadsheet.iife.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 19.1.0-alpha.1
- * @date 2025-09-12T13:33:41.605Z
- * @hash d3e4e7b
+ * @version 19.1.0-alpha.3
+ * @date 2025-09-23T12:37:52.238Z
+ * @hash ce2b07a
  */
 
 (function (exports, owl) {
@@ -588,7 +588,6 @@
   const CANVAS_SHIFT = 0.5;
   // Colors
   const HIGHLIGHT_COLOR = "#017E84";
-  const BACKGROUND_GRAY_COLOR = "#f5f5f5";
   const BACKGROUND_HEADER_COLOR = "#F8F9FA";
   const BACKGROUND_HEADER_SELECTED_COLOR = "#E8EAED";
   const BACKGROUND_HEADER_ACTIVE_COLOR = "#595959";
@@ -598,15 +597,10 @@
   const HEADER_BORDER_COLOR = "#C0C0C0";
   const CELL_BORDER_COLOR = "#E2E3E3";
   const BACKGROUND_CHART_COLOR = "#FFFFFF";
-  const DISABLED_TEXT_COLOR = "#CACACA";
   const DEFAULT_COLOR_SCALE_MIDPOINT_COLOR = 0xb6d7a8;
   const LINK_COLOR = HIGHLIGHT_COLOR;
   const FILTERS_COLOR = "#188038";
-  const SEPARATOR_COLOR = "#E0E2E4";
-  const ICONS_COLOR = "#4A4F59";
-  const HEADER_GROUPING_BACKGROUND_COLOR = "#F5F5F5";
   const HEADER_GROUPING_BORDER_COLOR = "#999";
-  const GRID_BORDER_COLOR = "#E2E3E3";
   const FROZEN_PANE_HEADER_BORDER_COLOR = "#BCBCBC";
   const FROZEN_PANE_BORDER_COLOR = "#DADFE8";
   const COMPOSER_ASSISTANT_COLOR = "#9B359B";
@@ -618,30 +612,9 @@
   const GRAY_900 = "#111827";
   const GRAY_300 = "#D8DADD";
   const GRAY_200 = "#E7E9ED";
-  const GRAY_100 = "#F9FAFB";
   const TEXT_BODY = "#374151";
   const TEXT_BODY_MUTED = TEXT_BODY + "C2";
-  const TEXT_HEADING = "#111827";
-  const PRIMARY_BUTTON_BG = "#714B67";
-  const PRIMARY_BUTTON_HOVER_BG = "#624159";
-  const PRIMARY_BUTTON_ACTIVE_BG = "#f1edf0";
-  const BUTTON_BG = GRAY_200;
-  const BUTTON_HOVER_BG = GRAY_300;
-  const BUTTON_HOVER_TEXT_COLOR = "#111827";
-  const BUTTON_ACTIVE_BG = "#e6f2f3";
-  const BUTTON_ACTIVE_TEXT_COLOR = "#111827";
   const ACTION_COLOR = HIGHLIGHT_COLOR;
-  const ACTION_COLOR_HOVER = "#01585c";
-  const ALERT_WARNING_BG = "#FBEBCC";
-  const ALERT_WARNING_BORDER = "#F8E2B3";
-  const ALERT_WARNING_TEXT_COLOR = "#946D23";
-  const ALERT_DANGER_BG = "#D44C591A";
-  const ALERT_DANGER_BORDER = "#C34A41";
-  const ALERT_DANGER_TEXT_COLOR = "#C34A41";
-  const ALERT_INFO_BG = "#CDEDF1";
-  const ALERT_INFO_BORDER = "#98DBE2";
-  const ALERT_INFO_TEXT_COLOR = "#09414A";
-  const BADGE_SELECTED_COLOR = "#E6F2F3";
   const CHART_PADDING = 20;
   const CHART_PADDING_BOTTOM = 10;
   const CHART_PADDING_TOP = 15;
@@ -739,9 +712,7 @@
   const HEADER_HEIGHT = 26;
   const HEADER_WIDTH = 48;
   const DESKTOP_TOPBAR_TOOLBAR_HEIGHT = 34;
-  const MOBILE_TOPBAR_TOOLBAR_HEIGHT = 44;
   const DESKTOP_BOTTOMBAR_HEIGHT = 36;
-  const MOBILE_BOTTOMBAR_HEIGHT = 44;
   const DEFAULT_CELL_WIDTH = 96;
   const DEFAULT_CELL_HEIGHT = 23;
   const SCROLLBAR_WIDTH = 15;
@@ -749,7 +720,6 @@
   const ICON_EDGE_LENGTH = 18;
   const MIN_CF_ICON_MARGIN = 4;
   const MIN_CELL_TEXT_MARGIN = 4;
-  const CF_ICON_EDGE_LENGTH = 15;
   const PADDING_AUTORESIZE_VERTICAL = 3;
   const PADDING_AUTORESIZE_HORIZONTAL = MIN_CELL_TEXT_MARGIN;
   const GROUP_LAYER_WIDTH = 21;
@@ -764,11 +734,6 @@
   const MENU_WIDTH = 250;
   const MENU_VERTICAL_PADDING = 6;
   const DESKTOP_MENU_ITEM_HEIGHT = 26;
-  const MOBILE_MENU_ITEM_HEIGHT = 35;
-  const MENU_ITEM_PADDING_HORIZONTAL = 11;
-  const MENU_ITEM_PADDING_VERTICAL = 4;
-  const MENU_SEPARATOR_BORDER_WIDTH = 1;
-  const MENU_SEPARATOR_PADDING = 5;
   // Style
   const DEFAULT_STYLE = {
       align: "left",
@@ -822,23 +787,6 @@
   const FORBIDDEN_SHEETNAME_CHARS_IN_EXCEL_REGEX = /'|\*|\?|\/|\\|\[|\]/;
   // Cells
   const FORMULA_REF_IDENTIFIER = "|";
-  // Components
-  var ComponentsImportance;
-  (function (ComponentsImportance) {
-      ComponentsImportance[ComponentsImportance["Grid"] = 0] = "Grid";
-      ComponentsImportance[ComponentsImportance["Highlight"] = 5] = "Highlight";
-      ComponentsImportance[ComponentsImportance["HeaderGroupingButton"] = 6] = "HeaderGroupingButton";
-      ComponentsImportance[ComponentsImportance["Figure"] = 10] = "Figure";
-      ComponentsImportance[ComponentsImportance["ScrollBar"] = 15] = "ScrollBar";
-      ComponentsImportance[ComponentsImportance["GridPopover"] = 19] = "GridPopover";
-      ComponentsImportance[ComponentsImportance["GridComposer"] = 20] = "GridComposer";
-      ComponentsImportance[ComponentsImportance["IconPicker"] = 25] = "IconPicker";
-      ComponentsImportance[ComponentsImportance["TopBarComposer"] = 30] = "TopBarComposer";
-      ComponentsImportance[ComponentsImportance["Popover"] = 35] = "Popover";
-      ComponentsImportance[ComponentsImportance["FigureAnchor"] = 1000] = "FigureAnchor";
-      ComponentsImportance[ComponentsImportance["FigureSnapLine"] = 1001] = "FigureSnapLine";
-      ComponentsImportance[ComponentsImportance["FigureTooltip"] = 1002] = "FigureTooltip";
-  })(ComponentsImportance || (ComponentsImportance = {}));
   let DEFAULT_SHEETVIEW_SIZE = 0;
   function getDefaultSheetViewSize() {
       return DEFAULT_SHEETVIEW_SIZE;
@@ -1368,8 +1316,19 @@
           },
       }[funcName];
   }
+  /**
+   * Removes the specified indexes from the array.
+   * Sparse (empty) elements are transformed to undefined (unless their index is explicitly removed).
+   */
   function removeIndexesFromArray(array, indexes) {
-      return array.filter((_, index) => !indexes.includes(index));
+      const toRemove = new Set(indexes);
+      const newArray = [];
+      for (let i = 0; i < array.length; i++) {
+          if (!toRemove.has(i)) {
+              newArray.push(array[i]);
+          }
+      }
+      return newArray;
   }
   function insertItemsAtIndex(array, items, index) {
       const newArray = [...array];
@@ -10665,153 +10624,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  /**
-   * This file is largely inspired by owl 1.
-   * `css` tag has been removed from owl 2 without workaround to manage css.
-   * So, the solution was to import the behavior of owl 1 directly in our
-   * codebase, with one difference: the css is added to the sheet as soon as the
-   * css tag is executed. In owl 1, the css was added as soon as a Component was
-   * created for the first time.
-   */
-  const STYLESHEETS = {};
-  let nextId = 0;
-  /**
-   * CSS tag helper for defining inline stylesheets.  With this, one can simply define
-   * an inline stylesheet with just the following code:
-   * ```js
-   *     css`.component-a { color: red; }`;
-   * ```
-   */
-  function css(strings, ...args) {
-      const name = `__sheet__${nextId++}`;
-      const value = String.raw(strings, ...args);
-      registerSheet(name, value);
-      activateSheet(name);
-      return name;
-  }
-  function processSheet(str) {
-      const tokens = str.split(/(\{|\}|;)/).map((s) => s.trim());
-      const selectorStack = [];
-      const parts = [];
-      let rules = [];
-      function generateSelector(stackIndex, parentSelector) {
-          const parts = [];
-          for (const selector of selectorStack[stackIndex]) {
-              let part = (parentSelector && parentSelector + " " + selector) || selector;
-              if (part.includes("&")) {
-                  part = selector.replace(/&/g, parentSelector || "");
-              }
-              if (stackIndex < selectorStack.length - 1) {
-                  part = generateSelector(stackIndex + 1, part);
-              }
-              parts.push(part);
-          }
-          return parts.join(", ");
-      }
-      function generateRules() {
-          if (rules.length) {
-              parts.push(generateSelector(0) + " {");
-              parts.push(...rules);
-              parts.push("}");
-              rules = [];
-          }
-      }
-      while (tokens.length) {
-          const token = tokens.shift();
-          if (token === "}") {
-              generateRules();
-              selectorStack.pop();
-          }
-          else {
-              if (tokens[0] === "{") {
-                  generateRules();
-                  selectorStack.push(token.split(/\s*,\s*/));
-                  tokens.shift();
-              }
-              if (tokens[0] === ";") {
-                  rules.push("  " + token + ";");
-              }
-          }
-      }
-      return parts.join("\n");
-  }
-  function registerSheet(id, css) {
-      const sheet = document.createElement("style");
-      sheet.textContent = processSheet(css);
-      STYLESHEETS[id] = sheet;
-  }
-  function activateSheet(id) {
-      const sheet = STYLESHEETS[id];
-      sheet.setAttribute("component", id);
-      document.head.appendChild(sheet);
-  }
-  function getTextDecoration({ strikethrough, underline, }) {
-      if (!strikethrough && !underline) {
-          return "none";
-      }
-      return `${strikethrough ? "line-through" : ""} ${underline ? "underline" : ""}`;
-  }
-  /**
-   * Convert the cell style to CSS properties.
-   */
-  function cellStyleToCss(style) {
-      const attributes = cellTextStyleToCss(style);
-      if (!style)
-          return attributes;
-      if (style.fillColor) {
-          attributes["background"] = style.fillColor;
-      }
-      return attributes;
-  }
-  /**
-   * Convert the cell text style to CSS properties.
-   */
-  function cellTextStyleToCss(style) {
-      const attributes = {};
-      if (!style)
-          return attributes;
-      if (style.bold) {
-          attributes["font-weight"] = "bold";
-      }
-      if (style.italic) {
-          attributes["font-style"] = "italic";
-      }
-      if (style.fontSize) {
-          attributes["font-size"] = `${style.fontSize}px`;
-      }
-      if (style.strikethrough || style.underline) {
-          let decoration = style.strikethrough ? "line-through" : "";
-          decoration = style.underline ? decoration + " underline" : decoration;
-          attributes["text-decoration"] = decoration;
-      }
-      if (style.textColor) {
-          attributes["color"] = style.textColor;
-      }
-      return attributes;
-  }
-  /**
-   * Transform CSS properties into a CSS string.
-   */
-  function cssPropertiesToCss(attributes) {
-      let styleStr = "";
-      for (const attName in attributes) {
-          if (!attributes[attName]) {
-              continue;
-          }
-          styleStr += `${attName}:${attributes[attName]}; `;
-      }
-      return styleStr;
-  }
-  function getElementMargins(el) {
-      const style = window.getComputedStyle(el);
-      return {
-          top: parseInt(style.marginTop, 10) || 0,
-          bottom: parseInt(style.marginBottom, 10) || 0,
-          left: parseInt(style.marginLeft, 10) || 0,
-          right: parseInt(style.marginRight, 10) || 0,
-      };
-  }
-
   const chartJsExtensionRegistry = new Registry();
   function areChartJSExtensionsLoaded() {
       return !!window.Chart.registry.plugins.get("chartShowValuesPlugin");
@@ -16084,8 +15896,9 @@ stores.inject(MyMetaStore, storeInstance);
   }
 
   function sortMatrix(matrix, locale, ...criteria) {
-      for (const [i, value] of criteria.entries()) {
-          assert(value !== undefined, _t("Value for parameter %d is missing, while the function [[FUNCTION_NAME]] expect a number or a range.", i + 1));
+      for (let i = 0; i < criteria.length; i++) {
+          const param = i % 2 === 0 ? "sort_column" : "is_ascending";
+          assert(criteria[i] !== undefined, _t("Value for parameter %s is missing in [[FUNCTION_NAME]].", param));
       }
       const sortingOrders = [];
       const sortColumns = [];
@@ -24033,15 +23846,6 @@ stores.inject(MyMetaStore, storeInstance);
       return bars.find((bar, i) => i > startIndex && bar.height !== 0);
   }
 
-  css /* scss */ `
-  .o-spreadsheet {
-    .o-chart-custom-tooltip {
-      font-size: 12px;
-      background-color: #fff;
-      z-index: ${ComponentsImportance.FigureTooltip};
-    }
-  }
-`;
   chartJsExtensionRegistry.add("chartShowValuesPlugin", {
       register: (Chart) => Chart.register(chartShowValuesPlugin),
       unregister: (Chart) => Chart.unregister(chartShowValuesPlugin),
@@ -26760,7 +26564,7 @@ stores.inject(MyMetaStore, storeInstance);
               },
               pointLabels: {
                   color: chartFontColor(definition.background),
-                  callback: truncateLabel,
+                  callback: (label) => truncateLabel(label),
               },
               suggestedMin: minValue < 0 ? minValue - 1 : 0,
           },
@@ -27781,13 +27585,6 @@ stores.inject(MyMetaStore, storeInstance);
       },
   };
 
-  css /* scss */ `
-  .o-spreadsheet {
-    .o-master-chart-container {
-      height: ${MASTER_CHART_HEIGHT}px;
-    }
-  }
-`;
   chartJsExtensionRegistry.add("zoomWindowPlugin", {
       register: (Chart) => Chart.register(zoomWindowPlugin),
       unregister: (Chart) => Chart.unregister(zoomWindowPlugin),
@@ -31598,6 +31395,81 @@ stores.inject(MyMetaStore, storeInstance);
       return matchedChart.displayName;
   }
 
+  /**
+   * This file is largely inspired by owl 1.
+   * `css` tag has been removed from owl 2 without workaround to manage css.
+   * So, the solution was to import the behavior of owl 1 directly in our
+   * codebase, with one difference: the css is added to the sheet as soon as the
+   * css tag is executed. In owl 1, the css was added as soon as a Component was
+   * created for the first time.
+   */
+  function getTextDecoration({ strikethrough, underline, }) {
+      if (!strikethrough && !underline) {
+          return "none";
+      }
+      return `${strikethrough ? "line-through" : ""} ${underline ? "underline" : ""}`;
+  }
+  /**
+   * Convert the cell style to CSS properties.
+   */
+  function cellStyleToCss(style) {
+      const attributes = cellTextStyleToCss(style);
+      if (!style)
+          return attributes;
+      if (style.fillColor) {
+          attributes["background"] = style.fillColor;
+      }
+      return attributes;
+  }
+  /**
+   * Convert the cell text style to CSS properties.
+   */
+  function cellTextStyleToCss(style) {
+      const attributes = {};
+      if (!style)
+          return attributes;
+      if (style.bold) {
+          attributes["font-weight"] = "bold";
+      }
+      if (style.italic) {
+          attributes["font-style"] = "italic";
+      }
+      if (style.fontSize) {
+          attributes["font-size"] = `${style.fontSize}px`;
+      }
+      if (style.strikethrough || style.underline) {
+          let decoration = style.strikethrough ? "line-through" : "";
+          decoration = style.underline ? decoration + " underline" : decoration;
+          attributes["text-decoration"] = decoration;
+      }
+      if (style.textColor) {
+          attributes["color"] = style.textColor;
+      }
+      return attributes;
+  }
+  /**
+   * Transform CSS properties into a CSS string.
+   */
+  function cssPropertiesToCss(attributes) {
+      let styleStr = "";
+      for (const attName in attributes) {
+          if (!attributes[attName]) {
+              continue;
+          }
+          styleStr += `${attName}:${attributes[attName]}; `;
+      }
+      return styleStr;
+  }
+  function getElementMargins(el) {
+      const style = window.getComputedStyle(el);
+      return {
+          top: parseInt(style.marginTop, 10) || 0,
+          bottom: parseInt(style.marginBottom, 10) || 0,
+          left: parseInt(style.marginLeft, 10) || 0,
+          right: parseInt(style.marginRight, 10) || 0,
+      };
+  }
+
   /**
    * Repeatedly calls a callback function with a time delay between calls.
    */
@@ -31652,59 +31524,6 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
-  //------------------------------------------------------------------------------
-  // Context Menu Component
-  //------------------------------------------------------------------------------
-  css /* scss */ `
-  .o-menu {
-    background-color: white;
-    user-select: none;
-
-    .o-menu-item {
-      height: ${DESKTOP_MENU_ITEM_HEIGHT}px;
-      padding: ${MENU_ITEM_PADDING_VERTICAL}px ${MENU_ITEM_PADDING_HORIZONTAL}px;
-      cursor: pointer;
-      user-select: none;
-
-      .o-menu-item-name {
-        min-width: 40%;
-      }
-
-      .o-menu-item-icon {
-        display: inline-block;
-        margin: 0px 8px 0px 0px;
-        width: ${DESKTOP_MENU_ITEM_HEIGHT - 2 * MENU_ITEM_PADDING_VERTICAL}px;
-        line-height: ${DESKTOP_MENU_ITEM_HEIGHT - 2 * MENU_ITEM_PADDING_VERTICAL}px;
-      }
-
-      &:not(.disabled) {
-        &:hover,
-        &.o-menu-item-active {
-          background-color: ${BUTTON_ACTIVE_BG};
-          color: ${BUTTON_ACTIVE_TEXT_COLOR};
-        }
-        .o-menu-item-description {
-          color: grey;
-        }
-        .o-menu-item-icon {
-          .o-icon {
-            color: ${ICONS_COLOR};
-          }
-        }
-      }
-      &.disabled {
-        color: ${DISABLED_TEXT_COLOR};
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  .o-spreadsheet-mobile {
-    .o-menu-item {
-      height: ${MOBILE_MENU_ITEM_HEIGHT}px;
-    }
-  }
-`;
   class Menu extends owl.Component {
       static template = "o-spreadsheet-Menu";
       static props = {
@@ -31881,16 +31700,6 @@ stores.inject(MyMetaStore, storeInstance);
       return container;
   }
 
-  css /* scss */ `
-  .o-popover {
-    position: absolute;
-    z-index: ${ComponentsImportance.Popover};
-    overflow: auto;
-    box-shadow: 1px 2px 5px 2px rgb(51 51 51 / 15%);
-    width: fit-content;
-    height: fit-content;
-  }
-`;
   class Popover extends owl.Component {
       static template = "o-spreadsheet-Popover";
       static props = {
@@ -31913,7 +31722,6 @@ stores.inject(MyMetaStore, storeInstance);
           onMouseWheel: () => { },
           onPopoverMoved: () => { },
           onPopoverHidden: () => { },
-          zIndex: ComponentsImportance.Popover,
       };
       popoverRef = owl.useRef("popover");
       popoverContentRef = owl.useRef("popoverContent");
@@ -31934,11 +31742,6 @@ stores.inject(MyMetaStore, storeInstance);
           // the element in rendered, so we can still set its position
           owl.useEffect(this.computePopoverPosition.bind(this));
       }
-      get popoverStyle() {
-          return cssPropertiesToCss({
-              "z-index": `${this.props.zIndex}`,
-          });
-      }
       computePopoverPosition() {
           if (!this.containerRect)
               throw new Error("Popover container is not defined");
@@ -32129,12 +31932,6 @@ stores.inject(MyMetaStore, storeInstance);
   //------------------------------------------------------------------------------
   // Context MenuPopover Component
   //------------------------------------------------------------------------------
-  css /* scss */ `
-  .o-menu-wrapper {
-    padding: ${MENU_VERTICAL_PADDING}px 0px;
-    background-color: white;
-  }
-`;
   const TIMEOUT_DELAY = 250;
   class MenuPopover extends owl.Component {
       static template = "o-spreadsheet-Menu-Popover";
@@ -32439,13 +32236,13 @@ stores.inject(MyMetaStore, storeInstance);
       }
       get headerStyle() {
           const cssProperties = {};
-          if (this.selectedCarouselItem?.type === "carouselDataView") {
-              cssProperties["background-color"] = "#ffffff";
-          }
-          else if (this.selectedCarouselItem?.type === "chart") {
+          if (this.selectedCarouselItem?.type === "chart") {
               const chart = this.env.model.getters.getChartRuntime(this.selectedCarouselItem.chartId);
               cssProperties["background-color"] = chart.background;
           }
+          else {
+              cssProperties["background-color"] = "#ffffff";
+          }
           return cssPropertiesToCss(cssProperties);
       }
       get title() {
@@ -32575,79 +32372,6 @@ stores.inject(MyMetaStore, storeInstance);
   const ANCHOR_SIZE = 8;
   const BORDER_WIDTH = 1;
   const ACTIVE_BORDER_WIDTH = 2;
-  css /*SCSS*/ `
-  div.o-figure {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    user-select: none;
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  div.o-figure-border {
-    z-index: 1;
-  }
-
-  .o-figure-wrapper {
-    position: absolute;
-    box-sizing: content-box;
-    pointer-events: auto;
-
-    .o-fig-anchor {
-      z-index: ${ComponentsImportance.FigureAnchor};
-      position: absolute;
-      width: ${ANCHOR_SIZE}px;
-      height: ${ANCHOR_SIZE}px;
-      background-color: #1a73e8;
-      outline: ${BORDER_WIDTH}px solid white;
-
-      &.o-top {
-        cursor: n-resize;
-      }
-      &.o-topRight {
-        cursor: ne-resize;
-      }
-      &.o-right {
-        cursor: e-resize;
-      }
-      &.o-bottomRight {
-        cursor: se-resize;
-      }
-      &.o-bottom {
-        cursor: s-resize;
-      }
-      &.o-bottomLeft {
-        cursor: sw-resize;
-      }
-      &.o-left {
-        cursor: w-resize;
-      }
-      &.o-topLeft {
-        cursor: nw-resize;
-      }
-    }
-
-    .o-figure-menu {
-      right: 0px;
-      top: 0px;
-      display: none;
-    }
-
-    .o-figure-menu-item {
-      cursor: pointer;
-    }
-
-    .o-figure.active:focus,
-    .o-figure:hover {
-      .o-figure-menu {
-        display: flex;
-      }
-    }
-  }
-`;
   class FigureComponent extends owl.Component {
       static template = "o-spreadsheet-FigureComponent";
       static props = {
@@ -32692,7 +32416,6 @@ stores.inject(MyMetaStore, storeInstance);
               top: `${y}px`,
               width: `${width}px`,
               height: `${height}px`,
-              "z-index": String(ComponentsImportance.Figure + (this.isSelected ? 1 : 0)),
           });
       }
       getResizerPosition(resizer) {
@@ -32971,21 +32694,6 @@ stores.inject(MyMetaStore, storeInstance);
   }
 
   const ERROR_TOOLTIP_MAX_HEIGHT = 80;
-  const ERROR_TOOLTIP_WIDTH = 180;
-  css /* scss */ `
-  .o-error-tooltip {
-    font-size: 13px;
-    background-color: white;
-    border-left: 3px solid red;
-    padding: 10px;
-    width: ${ERROR_TOOLTIP_WIDTH}px;
-    overflow-wrap: break-word;
-
-    .o-error-tooltip-message {
-      overflow: hidden;
-    }
-  }
-`;
   class ErrorToolTip extends owl.Component {
       static maxSize = { maxHeight: ERROR_TOOLTIP_MAX_HEIGHT };
       static template = "o-spreadsheet-ErrorToolTip";
@@ -33086,34 +32794,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o_side_panel_collapsible_title {
-    font-size: 16px;
-    cursor: pointer;
-    padding: 6px 0px 6px 6px !important;
-
-    .collapsor-arrow {
-      transform: rotate(-90deg);
-      display: inline-block;
-      transform-origin: 8px 11px;
-      transition: transform 0.2s ease-in-out;
-
-      .o-icon {
-        width: 16px;
-        height: 22px;
-      }
-    }
-    .collapsor:not(.collapsed) .collapsor-arrow {
-      transform: rotate(0);
-    }
-
-    .collapsor {
-      width: 100%;
-      transition-delay: 0.35s;
-      transition-property: all;
-    }
-  }
-`;
   class SidePanelCollapsible extends owl.Component {
       static template = "o-spreadsheet-SidePanelCollapsible";
       static props = {
@@ -33750,27 +33430,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-autocomplete-dropdown {
-    pointer-events: auto;
-    cursor: pointer;
-    background-color: #fff;
-    max-width: 400px;
-    z-index: 1;
-
-    .o-autocomplete-value-focus {
-      background-color: #f2f2f2;
-    }
-
-    & > div {
-      padding: 1px 5px 5px 5px;
-      .o-autocomplete-description {
-        padding-left: 5px;
-        font-size: 11px;
-      }
-    }
-  }
-`;
   class TextValueProvider extends owl.Component {
       static template = "o-spreadsheet-TextValueProvider";
       static props = {
@@ -34072,36 +33731,6 @@ stores.inject(MyMetaStore, storeInstance);
   }
 
   const BUBBLE_ARROW_SIZE = 7;
-  css /* scss */ `
-  .o-spreadsheet {
-    .o-speech-bubble {
-      background-color: white;
-      box-sizing: border-box;
-      box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
-      border: 1px solid #ccc;
-      z-index: ${ComponentsImportance.Popover};
-
-      &::after {
-        content: "";
-        position: absolute;
-        top: 100%;
-        left: 50%;
-        background-color: white;
-        height: ${BUBBLE_ARROW_SIZE}px;
-        width: ${BUBBLE_ARROW_SIZE}px;
-        transform-origin: top left;
-        transform: translate(0, -67%) rotate(45deg);
-        border-right: 1px solid #ccc;
-        border-bottom: 1px solid #ccc;
-        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
-      }
-    }
-
-    .o-speech-content {
-      max-width: 300px;
-    }
-  }
-`;
   class SpeechBubble extends owl.Component {
       static template = "o-spreadsheet-SpeechBubble";
       static props = { content: String, anchorRect: Object };
@@ -34130,85 +33759,6 @@ stores.inject(MyMetaStore, storeInstance);
   const selectionIndicatorClass = "selector-flag";
   const highlightParenthesisClass = "highlight-parenthesis-flag";
   const highlightClass = "highlight-flag";
-  const selectionIndicatorColor = "#a9a9a9";
-  const selectionIndicator = "␣";
-  css /* scss */ `
-  .o-composer-container {
-    .o-composer {
-      overflow-y: auto;
-      overflow-x: hidden;
-      word-break: break-all;
-      padding-right: 2px;
-
-      caret-color: black;
-      padding-left: 3px;
-      padding-right: 3px;
-      outline: none;
-
-      tab-size: 4;
-
-      p {
-        margin-bottom: 0px;
-
-        span {
-          white-space: pre-wrap;
-          /* On some browsers (chromium ?) it is somehow possible to hover two of the composer's spans at the same time, leading to
-           * flickering with a succession of onmouseenter/onmouseleave events. A small invisible padding seems to prevent the issue.*/
-          padding-left: 0.01px;
-
-          &.${selectionIndicatorClass}:after {
-            content: "${selectionIndicator}";
-            color: ${selectionIndicatorColor};
-          }
-
-          &.${highlightParenthesisClass}:not(.${highlightClass}) {
-            border-radius: 5px;
-            background-color: lightgray;
-            padding: 1.5px 0px 1.5px 0px;
-          }
-
-          &.${highlightClass} {
-            background-color: #e6edf3;
-          }
-        }
-      }
-    }
-    .o-composer[placeholder]:empty:not(:focus):not(.active)::before {
-      content: attr(placeholder);
-      color: #bdbdbd;
-      position: relative;
-      top: 0%;
-      pointer-events: none;
-    }
-
-    .fa-stack {
-      /* reset stack size which is doubled by default */
-      width: ${CLOSE_ICON_RADIUS * 2}px;
-      height: ${CLOSE_ICON_RADIUS * 2}px;
-      line-height: ${CLOSE_ICON_RADIUS * 2}px;
-    }
-
-    .force-open-assistant {
-      left: -1px;
-      top: -1px;
-
-      .fa-question-circle {
-        color: ${PRIMARY_BUTTON_BG};
-      }
-    }
-
-    .o-composer-assistant {
-      margin-top: 1px;
-
-      .o-semi-bold {
-        /* FIXME: to remove in favor of Bootstrap
-        * 'fw-semibold' when we upgrade to Bootstrap 5.2
-        */
-        font-weight: 600 !important;
-      }
-    }
-  }
-`;
   class Composer extends owl.Component {
       static template = "o-spreadsheet-Composer";
       static props = {
@@ -35881,30 +35431,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-spreadsheet {
-    .o-standalone-composer {
-      min-height: 24px;
-
-      border-bottom: 1px solid;
-      border-color: ${GRAY_300};
-
-      &.active {
-        border-color: ${ACTION_COLOR};
-      }
-
-      &.o-invalid {
-        border-bottom: 2px solid red;
-      }
-
-      /* As the standalone composer is potentially very small (eg. in a side panel), we remove the scrollbar display */
-      scrollbar-width: none; /* Firefox */
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-  }
-`;
   class StandaloneComposer extends owl.Component {
       static template = "o-spreadsheet-StandaloneComposer";
       static props = {
@@ -35972,17 +35498,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-dv-input {
-    &.o-invalid {
-      background-color: #ffdddd;
-    }
-    .error-icon {
-      right: 7px;
-      top: 7px;
-    }
-  }
-`;
   class CriterionInput extends owl.Component {
       static template = "o-spreadsheet-CriterionInput";
       static props = {
@@ -36150,8 +35665,6 @@ stores.inject(MyMetaStore, storeInstance);
       return removeListeners;
   }
 
-  const LINE_VERTICAL_PADDING = 1;
-  const PICKER_PADDING = 8;
   const ITEM_BORDER_WIDTH = 1;
   const ITEM_EDGE_LENGTH = 18;
   const ITEMS_PER_LINE = 10;
@@ -36160,170 +35673,6 @@ stores.inject(MyMetaStore, storeInstance);
   const CONTENT_WIDTH = ITEMS_PER_LINE * (ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH) + (ITEMS_PER_LINE - 1) * ITEM_GAP;
   const INNER_GRADIENT_WIDTH = CONTENT_WIDTH - 2 * ITEM_BORDER_WIDTH;
   const INNER_GRADIENT_HEIGHT = CONTENT_WIDTH - 30 - 2 * ITEM_BORDER_WIDTH;
-  const CONTAINER_WIDTH = CONTENT_WIDTH + 2 * PICKER_PADDING;
-  css /* scss */ `
-  .o-color-picker {
-    padding: ${PICKER_PADDING}px 0;
-    /* FIXME: this is useless, overiden by the popover container */
-    box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
-    background-color: white;
-    line-height: 1.2;
-    overflow-y: auto;
-    overflow-x: hidden;
-    width: ${CONTAINER_WIDTH}px;
-
-    .o-color-picker-section-name {
-      margin: 0px ${ITEM_BORDER_WIDTH}px;
-      padding: 4px ${PICKER_PADDING}px;
-    }
-    .colors-grid {
-      display: grid;
-      padding: ${LINE_VERTICAL_PADDING}px ${PICKER_PADDING}px;
-      grid-template-columns: repeat(${ITEMS_PER_LINE}, 1fr);
-      grid-gap: ${ITEM_GAP}px;
-    }
-    .o-color-picker-toggler-button {
-      display: flex;
-      .o-color-picker-toggler-sign {
-        display: flex;
-        margin: auto auto;
-        width: 55%;
-        height: 55%;
-        .o-icon {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-    .o-color-picker-line-item {
-      width: ${ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH}px;
-      height: ${ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH}px;
-      margin: 0px;
-      border-radius: 50px;
-      border: ${ITEM_BORDER_WIDTH}px solid #666666;
-      padding: 0px;
-      font-size: 16px;
-      background: white;
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.08);
-        outline: 1px solid gray;
-        cursor: pointer;
-      }
-    }
-    .o-buttons {
-      padding: ${PICKER_PADDING}px;
-      display: flex;
-      .o-cancel {
-        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
-        width: 100%;
-        padding: 5px;
-        font-size: 14px;
-        background: white;
-        border-radius: 4px;
-        &:hover:enabled {
-          background-color: rgba(0, 0, 0, 0.08);
-        }
-      }
-    }
-    .o-add-button {
-      border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
-      padding: 4px;
-      background: white;
-      border-radius: 4px;
-      &:hover:enabled {
-        background-color: rgba(0, 0, 0, 0.08);
-      }
-    }
-    .o-separator {
-      border-bottom: ${MENU_SEPARATOR_BORDER_WIDTH}px solid ${SEPARATOR_COLOR};
-      margin-top: ${MENU_SEPARATOR_PADDING}px;
-      margin-bottom: ${MENU_SEPARATOR_PADDING}px;
-    }
-
-    .o-custom-selector {
-      padding: ${PICKER_PADDING + 2}px ${PICKER_PADDING}px;
-      position: relative;
-      .o-gradient {
-        margin-bottom: ${MAGNIFIER_EDGE / 2}px;
-        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
-        width: ${INNER_GRADIENT_WIDTH + 2 * ITEM_BORDER_WIDTH}px;
-        height: ${INNER_GRADIENT_HEIGHT + 2 * ITEM_BORDER_WIDTH}px;
-        position: relative;
-      }
-
-      .magnifier {
-        height: ${MAGNIFIER_EDGE}px;
-        width: ${MAGNIFIER_EDGE}px;
-        border-radius: 50%;
-        border: 2px solid #fff;
-        box-shadow: 0px 0px 3px #c0c0c0;
-        position: absolute;
-        z-index: 2;
-      }
-      .saturation {
-        background: linear-gradient(to right, #fff 0%, transparent 100%);
-      }
-      .lightness {
-        background: linear-gradient(to top, #000 0%, transparent 100%);
-      }
-      .o-hue-picker {
-        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
-        width: 100%;
-        height: 12px;
-        border-radius: 4px;
-        background: linear-gradient(
-          to right,
-          hsl(0 100% 50%) 0%,
-          hsl(0.2turn 100% 50%) 20%,
-          hsl(0.3turn 100% 50%) 30%,
-          hsl(0.4turn 100% 50%) 40%,
-          hsl(0.5turn 100% 50%) 50%,
-          hsl(0.6turn 100% 50%) 60%,
-          hsl(0.7turn 100% 50%) 70%,
-          hsl(0.8turn 100% 50%) 80%,
-          hsl(0.9turn 100% 50%) 90%,
-          hsl(1turn 100% 50%) 100%
-        );
-        position: relative;
-        cursor: crosshair;
-      }
-      .o-hue-slider {
-        margin-top: -3px;
-      }
-      .o-custom-input-preview {
-        padding: 2px 0px;
-        display: flex;
-        input {
-          width: 50%;
-          border-radius: 4px;
-          padding: 4px 23px 4px 10px;
-          height: 24px;
-          border: 1px solid #c0c0c0;
-          margin-right: 2px;
-        }
-        .o-wrong-color {
-          /* FIXME bootstrap class instead? */
-          outline-color: red;
-          border-color: red;
-          &:focus {
-            outline-style: solid;
-            outline-width: 1px;
-          }
-        }
-      }
-      .o-custom-input-buttons {
-        padding: 2px 0px;
-        display: flex;
-        justify-content: end;
-      }
-      .o-color-preview {
-        border: 1px solid #c0c0c0;
-        border-radius: 4px;
-        width: 50%;
-      }
-    }
-  }
-`;
   class ColorPicker extends owl.Component {
       static template = "o-spreadsheet-ColorPicker";
       static props = {
@@ -36478,21 +35827,12 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
-  const TRANSPARENT_BACKGROUND_SVG = /*xml*/ `
-<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
-  <path fill="#d9d9d9" d="M5 5h5v5H5zH0V0h5"/>
-</svg>
-`;
-  css /* scss */ `
-  .o-round-color-picker-button {
-    width: 20px;
-    height: 20px;
-    cursor: pointer;
-    border: 1px solid ${GRAY_300};
-    background-position: 1px 1px;
-    background-image: url("data:image/svg+xml,${encodeURIComponent(TRANSPARENT_BACKGROUND_SVG)}");
-  }
-`;
+  // FIXME Encoding version used in css
+  // const TRANSPARENT_BACKGROUND_SVG = /*xml*/ `
+  // <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
+  //   <path fill="#d9d9d9" d="M5 5h5v5H5zH0V0h5"/>
+  // </svg>
+  // `;
   class RoundColorPicker extends owl.Component {
       static template = "o-spreadsheet.RoundColorPicker";
       static components = { Section, ColorPicker };
@@ -36529,12 +35869,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-dv-list-item-delete {
-    color: #666666;
-    cursor: pointer;
-  }
-`;
   class ListCriterionForm extends CriterionForm {
       static template = "o-spreadsheet-ListCriterionForm";
       static components = { CriterionInput, RoundColorPicker };
@@ -37248,36 +36582,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-selection {
-    .o-selection-input {
-      padding: 2px 0px;
-
-      input.o-invalid {
-        background-color: ${ALERT_DANGER_BG};
-      }
-      .input-icon {
-        right: 7px;
-        top: 4px;
-      }
-      .o-drag-handle {
-        cursor: move;
-      }
-    }
-    .o-disabled-ranges {
-      color: #888 !important;
-    }
-    .o-button {
-      flex-grow: 0;
-    }
-
-    /* Make the character a bit bigger
-    compared to its neighbor INPUT box  */
-    .o-remove-selection {
-      font-size: calc(100% + 4px);
-    }
-  }
-`;
   /**
    * This component can be used when the user needs to input some
    * ranges. He can either input the ranges with the regular DOM `<input/>`
@@ -37776,44 +37080,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  const CHECK_SVG = /*xml*/ `
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
-  <path fill='none' stroke='#FFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
-</svg>
-`;
-  const CHECKBOX_WIDTH = 14;
-  css /* scss */ `
-  label.o-checkbox {
-    input {
-      appearance: none;
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      border-radius: 0;
-      width: ${CHECKBOX_WIDTH}px;
-      height: ${CHECKBOX_WIDTH}px;
-      vertical-align: top;
-      outline: none;
-      border: 1px solid ${GRAY_300};
-      cursor: pointer;
-
-      &:hover {
-        border-color: ${ACTION_COLOR};
-      }
-
-      &:checked {
-        background: url("data:image/svg+xml,${encodeURIComponent(CHECK_SVG)}");
-        background-color: ${ACTION_COLOR};
-        border-color: ${ACTION_COLOR};
-      }
-
-      &:focus {
-        outline: none;
-        box-shadow: 0 0 0 0.25rem rgba(113, 75, 103, 0.25);
-        border-color: ${ACTION_COLOR};
-      }
-    }
-  }
-`;
   class Checkbox extends owl.Component {
       static template = "o-spreadsheet.Checkbox";
       static props = {
@@ -38021,60 +37287,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-filter-menu {
-    width: 245px;
-    padding: 8px 0;
-    user-select: none;
-
-    .o-filter-menu-content {
-      padding: 0 16px;
-    }
-
-    .o-sort-item {
-      padding-left: 34px;
-    }
-
-    .o_side_panel_collapsible_title {
-      font-size: inherit;
-      padding: 0 0 4px 0 !important;
-      font-weight: 400 !important;
-
-      .collapsor .o-icon {
-        opacity: 0.8;
-      }
-
-      .collapsor-arrow {
-        transform-origin: 6px 8px;
-
-        .o-icon {
-          width: 12px;
-          height: 16px;
-        }
-      }
-    }
-
-    .o-filter-menu-item {
-      display: flex;
-      cursor: pointer;
-      user-select: none;
-      line-height: 1;
-
-      &.selected,
-      &:hover {
-        background-color: ${BUTTON_ACTIVE_BG};
-      }
-    }
-
-    .o-filter-menu-buttons {
-      margin-top: 9px;
-
-      .o-button {
-        height: 26px;
-      }
-    }
-  }
-`;
   class FilterMenu extends owl.Component {
       static template = "o-spreadsheet-FilterMenu";
       static props = {
@@ -38198,55 +37410,6 @@ stores.inject(MyMetaStore, storeInstance);
       },
   };
 
-  const LINK_TOOLTIP_HEIGHT = 32;
-  const LINK_TOOLTIP_WIDTH = 220;
-  css /* scss */ `
-  .o-link-tool {
-    font-size: 13px;
-    background-color: white;
-    box-shadow: 0 1px 4px 3px rgba(60, 64, 67, 0.15);
-    padding: 6px 12px;
-    border-radius: 4px;
-    display: flex;
-    justify-content: space-between;
-    height: ${LINK_TOOLTIP_HEIGHT}px;
-    width: ${LINK_TOOLTIP_WIDTH}px;
-
-    img {
-      margin-right: 3px;
-      width: 16px;
-      height: 16px;
-    }
-
-    a.o-link {
-      color: ${LINK_COLOR};
-      text-decoration: none;
-      flex-grow: 2;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    a.o-link:hover {
-      text-decoration: none;
-      color: #001d1f;
-      cursor: pointer;
-    }
-  }
-  .o-link-icon {
-    float: right;
-    padding-left: 5px;
-    .o-icon {
-      height: 16px;
-    }
-  }
-  .o-link-icon .o-icon {
-    height: 13px;
-  }
-  .o-link-icon:hover {
-    cursor: pointer;
-    color: #000;
-  }
-`;
   class LinkDisplay extends owl.Component {
       static template = "o-spreadsheet-LinkDisplay";
       static props = {
@@ -38477,54 +37640,6 @@ stores.inject(MyMetaStore, storeInstance);
       sequence: 10,
   });
 
-  const PADDING = 12;
-  const LINK_EDITOR_WIDTH = 340 + 2 * PADDING;
-  css /* scss */ `
-  .o-link-editor {
-    font-size: 13px;
-    background-color: white;
-    box-shadow: 0 1px 4px 3px rgba(60, 64, 67, 0.15);
-    padding: ${PADDING}px;
-    display: flex;
-    flex-direction: column;
-    border-radius: 4px;
-    width: ${LINK_EDITOR_WIDTH}px;
-
-    .o-section {
-      .o-section-title {
-        font-weight: bold;
-        margin-bottom: 5px;
-      }
-    }
-    .o-buttons {
-      padding-left: 16px;
-      padding-top: 16px;
-      text-align: right;
-    }
-    input.o-input {
-      width: 100%;
-      padding: 0 23px 4px 0;
-    }
-    .o-link-url {
-      position: relative;
-      flex-grow: 1;
-      button {
-        position: absolute;
-        right: 0px;
-        top: 0px;
-        border: none;
-        height: 20px;
-        width: 20px;
-        background-color: #fff;
-        margin: 2px 3px 1px 0px;
-        padding: 0px 1px 0px 0px;
-      }
-      button:hover {
-        cursor: pointer;
-      }
-    }
-  }
-`;
   class LinkEditor extends owl.Component {
       static template = "o-spreadsheet-LinkEditor";
       static props = {
@@ -39252,29 +38367,6 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
-  css /* scss */ `
-  .o-spreadsheet {
-    .o-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: ${ICON_EDGE_LENGTH}px;
-      height: ${ICON_EDGE_LENGTH}px;
-      font-size: ${ICON_EDGE_LENGTH}px;
-      vertical-align: middle;
-
-      .small-text {
-        font: bold 9px sans-serif;
-      }
-      .heavy-text {
-        font: bold 16px sans-serif;
-      }
-    }
-    .fa-small {
-      font-size: 14px;
-    }
-  }
-`;
   // -----------------------------------------------------------------------------
   // We need here the svg of the icons that we need to convert to images for the renderer
   // -----------------------------------------------------------------------------
@@ -49148,37 +48240,6 @@ stores.inject(MyMetaStore, storeInstance);
       return index;
   }
 
-  // -----------------------------------------------------------------------------
-  // Autofill
-  // -----------------------------------------------------------------------------
-  css /* scss */ `
-  .o-autofill {
-    position: absolute;
-    height: ${AUTOFILL_EDGE_LENGTH}px;
-    width: ${AUTOFILL_EDGE_LENGTH}px;
-    border: 1px solid white;
-    background-color: #1a73e8;
-  }
-
-  .o-autofill-handler {
-    position: absolute;
-    height: ${AUTOFILL_EDGE_LENGTH}px;
-    width: ${AUTOFILL_EDGE_LENGTH}px;
-    &:hover {
-      cursor: crosshair;
-    }
-  }
-
-  .o-autofill-nextvalue {
-    position: absolute;
-    background-color: #ffffff;
-    border: 1px solid black;
-    padding: 5px;
-    font-size: 12px;
-    pointer-events: none;
-    white-space: nowrap;
-  }
-`;
   class Autofill extends owl.Component {
       static template = "o-spreadsheet-Autofill";
       static props = {
@@ -49263,16 +48324,6 @@ stores.inject(MyMetaStore, storeInstance);
   `;
   }
 
-  css /* scss */ `
-  .o-client-tag {
-    position: absolute;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    font-size: ${DEFAULT_FONT_SIZE};
-    color: white;
-    pointer-events: none;
-  }
-`;
   class ClientTag extends owl.Component {
       static template = "o-spreadsheet-ClientTag";
       static props = {
@@ -49822,28 +48873,6 @@ stores.inject(MyMetaStore, storeInstance);
 
   const COMPOSER_BORDER_WIDTH = 3 * 0.4 * window.devicePixelRatio || 1;
   const GRID_CELL_REFERENCE_TOP_OFFSET = 28;
-  css /* scss */ `
-  div.o-grid-composer {
-    z-index: ${ComponentsImportance.GridComposer};
-    position: absolute;
-    border: ${COMPOSER_BORDER_WIDTH}px solid ${SELECTION_BORDER_COLOR};
-    font-family: ${DEFAULT_FONT};
-
-    display: flex;
-    align-items: center;
-  }
-
-  div.o-cell-reference {
-    position: absolute;
-    z-index: ${ComponentsImportance.GridComposer};
-    background: ${SELECTION_BORDER_COLOR};
-    color: white;
-    font-size: 12px;
-    line-height: 14px;
-    padding: 6px 7px;
-    border-radius: 4px;
-  }
-`;
   /**
    * This component is a composer which positions itself on the grid at the anchor cell.
    * It also applies the style of the cell to the composer input.
@@ -49969,6 +48998,7 @@ stores.inject(MyMetaStore, storeInstance);
           return cssPropertiesToCss({
               left: `${left - 1}px`,
               top: `${top}px`,
+              border: `${COMPOSER_BORDER_WIDTH}px solid ${SELECTION_BORDER_COLOR}`,
               "min-width": `${minWidth}px`,
               "min-height": `${minHeight}px`,
               "max-width": `${maxWidth}px`,
@@ -50239,24 +49269,6 @@ stores.inject(MyMetaStore, storeInstance);
       return { position, axisType: axisType };
   }
 
-  css /*SCSS*/ `
-  .o-figure-snap-line {
-    position: relative;
-    z-index: ${ComponentsImportance.FigureSnapLine};
-    &.vertical {
-      width: 0px;
-      border-left: 1px dashed black;
-    }
-    &.horizontal {
-      border-top: 1px dashed black;
-      height: 0px;
-    }
-  }
-  .o-figure-container {
-    -webkit-user-select: none; /* safari */
-    user-select: none;
-  }
-`;
   /**
    * Each figure ⭐ is positioned inside a container `div` placed and sized
    * according to the split pane the figure is part of, or a separate container for the figure
@@ -50688,38 +49700,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-validation {
-    border-radius: 4px;
-    border-width: 0 0 0 3px;
-    border-style: solid;
-    gap: 3px;
-
-    .o-icon {
-      margin-right: 5px;
-      height: 1.2em;
-      width: 1.2em;
-    }
-  }
-
-  .o-validation-warning {
-    border-color: ${ALERT_WARNING_BORDER};
-    color: ${ALERT_WARNING_TEXT_COLOR};
-    background-color: ${ALERT_WARNING_BG};
-  }
-
-  .o-validation-error {
-    border-color: ${ALERT_DANGER_BORDER};
-    color: ${ALERT_DANGER_TEXT_COLOR};
-    background-color: ${ALERT_DANGER_BG};
-  }
-
-  .o-validation-info {
-    border-color: ${ALERT_INFO_BORDER};
-    color: ${ALERT_INFO_TEXT_COLOR};
-    background-color: ${ALERT_INFO_BG};
-  }
-`;
   class ValidationMessages extends owl.Component {
       static template = "o-spreadsheet-ValidationMessages";
       static props = {
@@ -50741,20 +49721,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-grid-add-rows {
-    input.o-input {
-      width: 60px;
-      height: 30px;
-    }
-
-    .o-validation-error {
-      display: inline-block !important;
-      margin-top: 0;
-      margin-left: 8px;
-    }
-  }
-`;
   class GridAddRowsFooter extends owl.Component {
       static template = "o-spreadsheet-GridAddRowsFooter";
       static props = {
@@ -50999,14 +49965,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  const CURSOR_SVG = /*xml*/ `
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="16"><path d="M6.5.4c1.3-.8 2.9-.1 3.8 1.4l2.9 5.1c.2.4.9 1.6-.4 2.3l-1.6.9 1.8 3.1c.2.4.1 1-.2 1.2l-1.6 1c-.3.1-.9 0-1.1-.4l-1.8-3.1-1.6 1c-.6.4-1.7 0-2.2-.8L0 4.3"/><path fill="#fff" d="M9.1 2a1.4 1.1 60 0 0-1.7-.6L5.5 2.5l.9 1.6-1 .6-.9-1.6-.6.4 1.8 3.1-1.3.7-1.8-3.1-1 .6 3.8 6.6 6.8-3.98M3.9 8.8 10.82 5l.795 1.4-6.81 3.96"/></svg>
-`;
-  css /* scss */ `
-  .o-paint-format-cursor {
-    cursor: url("data:image/svg+xml,${encodeURIComponent(CURSOR_SVG)}"), auto;
-  }
-`;
   function useCellHovered(env, gridRef) {
       const delayedHoveredCell = useStore(DelayedHoveredCellStore);
       const hoveredTable = useStore(HoveredTableStore);
@@ -51252,7 +50210,6 @@ stores.inject(MyMetaStore, storeInstance);
       };
       static components = { Popover };
       cellPopovers;
-      zIndex = ComponentsImportance.GridPopover;
       setup() {
           this.cellPopovers = useStore(CellPopoverStore);
       }
@@ -51571,58 +50528,6 @@ stores.inject(MyMetaStore, storeInstance);
           this.props.onOpenContextMenu(type, ev.clientX, ev.clientY);
       }
   }
-  css /* scss */ `
-  .o-col-resizer {
-    position: absolute;
-    top: 0;
-    left: ${HEADER_WIDTH}px;
-    right: ${SCROLLBAR_WIDTH}px;
-    height: ${HEADER_HEIGHT}px;
-    width: calc(100% - ${HEADER_WIDTH + SCROLLBAR_WIDTH}px);
-    &.o-dragging {
-      cursor: grabbing;
-    }
-    &.o-grab {
-      cursor: grab;
-    }
-    .dragging-col-line {
-      top: ${HEADER_HEIGHT}px;
-      position: absolute;
-      width: 2px;
-      height: 10000px;
-      background-color: black;
-    }
-    .dragging-col-shadow {
-      top: ${HEADER_HEIGHT}px;
-      position: absolute;
-      height: 10000px;
-      background-color: black;
-      opacity: 0.1;
-    }
-    .o-handle {
-      position: absolute;
-      height: ${HEADER_HEIGHT}px;
-      width: 4px;
-      cursor: e-resize;
-      background-color: ${SELECTION_BORDER_COLOR};
-    }
-    .dragging-resizer {
-      top: ${HEADER_HEIGHT}px;
-      position: absolute;
-      margin-left: 2px;
-      width: 1px;
-      height: 10000px;
-      background-color: ${SELECTION_BORDER_COLOR};
-    }
-    .o-unhide {
-      color: ${ICONS_COLOR};
-    }
-    .o-unhide:hover {
-      z-index: ${ComponentsImportance.Grid + 1};
-      background-color: lightgrey;
-    }
-  }
-`;
   class ColResizer extends AbstractResizer {
       static props = {
           onOpenContextMenu: Function,
@@ -51765,57 +50670,6 @@ stores.inject(MyMetaStore, storeInstance);
           return this.env.model.getters.getPaneDivisions(this.sheetId).xSplit > 0;
       }
   }
-  css /* scss */ `
-  .o-row-resizer {
-    position: absolute;
-    top: ${HEADER_HEIGHT}px;
-    left: 0;
-    bottom: ${SCROLLBAR_WIDTH}px;
-    width: ${HEADER_WIDTH}px;
-    &.o-dragging {
-      cursor: grabbing;
-    }
-    &.o-grab {
-      cursor: grab;
-    }
-    .dragging-row-line {
-      left: ${HEADER_WIDTH}px;
-      position: absolute;
-      width: 10000px;
-      height: 2px;
-      background-color: black;
-    }
-    .dragging-row-shadow {
-      left: ${HEADER_WIDTH}px;
-      position: absolute;
-      width: 10000px;
-      background-color: black;
-      opacity: 0.1;
-    }
-    .o-handle {
-      position: absolute;
-      height: 4px;
-      width: ${HEADER_WIDTH}px;
-      cursor: n-resize;
-      background-color: ${SELECTION_BORDER_COLOR};
-    }
-    .dragging-resizer {
-      left: ${HEADER_WIDTH}px;
-      position: absolute;
-      margin-top: 2px;
-      width: 10000px;
-      height: 1px;
-      background-color: ${SELECTION_BORDER_COLOR};
-    }
-    .o-unhide {
-      color: ${ICONS_COLOR};
-    }
-    .o-unhide:hover {
-      z-index: ${ComponentsImportance.Grid + 1};
-      background-color: lightgrey;
-    }
-  }
-`;
   class RowResizer extends AbstractResizer {
       static props = {
           onOpenContextMenu: Function,
@@ -51956,18 +50810,6 @@ stores.inject(MyMetaStore, storeInstance);
           return this.env.model.getters.getPaneDivisions(this.sheetId).ySplit > 0;
       }
   }
-  css /* scss */ `
-  .o-overlay {
-    .all {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      width: ${HEADER_WIDTH}px;
-      height: ${HEADER_HEIGHT}px;
-    }
-  }
-`;
   class HeadersOverlay extends owl.Component {
       static props = {
           onOpenContextMenu: Function,
@@ -52922,17 +51764,6 @@ stores.inject(MyMetaStore, storeInstance);
       return onMouseWheel;
   }
 
-  css /* scss */ `
-  .o-border {
-    position: absolute;
-    &:hover {
-      cursor: grab;
-    }
-  }
-  .o-moving {
-    cursor: grabbing;
-  }
-`;
   class Border extends owl.Component {
       static template = "o-spreadsheet-Border";
       static props = {
@@ -52971,32 +51802,6 @@ stores.inject(MyMetaStore, storeInstance);
   }
 
   const MOBILE_HANDLER_WIDTH = 40;
-  css /* scss */ `
-  .o-corner {
-    position: absolute;
-  }
-
-  .o-corner-button {
-    border: 1px solid white;
-    height: ${AUTOFILL_EDGE_LENGTH}px;
-    width: ${AUTOFILL_EDGE_LENGTH}px;
-  }
-  .o-corner-nw,
-  .o-corner-se {
-    &:hover {
-      cursor: nwse-resize;
-    }
-  }
-  .o-corner-ne,
-  .o-corner-sw {
-    &:hover {
-      cursor: nesw-resize;
-    }
-  }
-  .o-resizing {
-    cursor: grabbing;
-  }
-`;
   class Corner extends owl.Component {
       static template = "o-spreadsheet-Corner";
       static props = {
@@ -53062,11 +51867,6 @@ stores.inject(MyMetaStore, storeInstance);
       return { dirX, dirY };
   }
 
-  css /*SCSS*/ `
-  .o-highlight {
-    z-index: ${ComponentsImportance.Highlight};
-  }
-`;
   class Highlight extends owl.Component {
       static template = "o-spreadsheet-Highlight";
       static props = {
@@ -53201,24 +52001,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   };
 
-  css /* scss */ `
-  .o-scrollbar {
-    position: absolute;
-    overflow: auto;
-    z-index: ${ComponentsImportance.ScrollBar};
-    background-color: ${BACKGROUND_GRAY_COLOR};
-
-    &.corner {
-      box-sizing: content-box;
-      right: 0px;
-      bottom: 0px;
-      height: ${SCROLLBAR_WIDTH}px;
-      width: ${SCROLLBAR_WIDTH}px;
-      border-top: 1px solid #e2e3e3;
-      border-left: 1px solid #e2e3e3;
-    }
-  }
-`;
   class ScrollBar extends owl.Component {
       static props = {
           width: { type: Number, optional: true },
@@ -53381,24 +52163,6 @@ stores.inject(MyMetaStore, storeInstance);
       }, () => [ref.el]);
   }
 
-  css /* scss */ `
-  .o-spreadsheet {
-    .os-input {
-      border-width: 0 0 1px 0;
-      border-color: transparent;
-      outline: none;
-      text-overflow: ellipsis;
-      color: ${TEXT_BODY};
-    }
-    .os-input:hover,
-    .os-input.o-input-border {
-      border-color: ${GRAY_300};
-    }
-    .os-input:focus {
-      border-color: ${ACTION_COLOR};
-    }
-  }
-`;
   class TextInput extends owl.Component {
       static template = "o-spreadsheet-TextInput";
       static props = {
@@ -53480,21 +52244,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-menu-item-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 2px 1px;
-    padding: 0px 1px;
-    border-radius: 2px;
-    min-width: 22px;
-  }
-  .o-disabled {
-    opacity: 0.6;
-    cursor: default;
-  }
-`;
   class ActionButton extends owl.Component {
       static template = "o-spreadsheet-ActionButton";
       static props = {
@@ -53547,41 +52296,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-color-picker-widget {
-    display: flex;
-    position: relative;
-    align-items: center;
-    height: 30px;
-
-    .o-color-picker-button-style {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin: 2px;
-      padding: 3px;
-      border-radius: 2px;
-      cursor: pointer;
-      &:not([disabled]):hover {
-        background-color: rgba(0, 0, 0, 0.08);
-      }
-    }
-
-    .o-color-picker-button {
-      > span {
-        border-bottom: 4px solid;
-        height: 20px;
-        margin-top: 2px;
-        display: block;
-      }
-
-      &[disabled] {
-        pointer-events: none;
-        opacity: 0.3;
-      }
-    }
-  }
-`;
   class ColorPickerWidget extends owl.Component {
       static template = "o-spreadsheet-ColorPickerWidget";
       static props = {
@@ -53614,26 +52328,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-font-size-editor {
-    width: max-content !important;
-    height: calc(100% - 4px);
-    input.o-font-size {
-      outline: none;
-      height: 20px;
-      width: 31px;
-      text-align: center;
-    }
-  }
-  .o-text-options > div {
-    cursor: pointer;
-    line-height: 26px;
-    padding: 3px 12px;
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.08);
-    }
-  }
-`;
   class FontSizeEditor extends owl.Component {
       static template = "o-spreadsheet-FontSizeEditor";
       static props = {
@@ -53709,41 +52403,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-chart-title-designer {
-    .o-hoverable-button {
-      height: 30px;
-    }
-    .o-dropdown-content .o-hoverable-button {
-      height: fit-content;
-    }
-
-    .o-divider {
-      border-right: 1px solid ${GRAY_300};
-      margin: 0px 4px;
-      height: 14px;
-    }
-
-    .o-menu-item-button.active {
-      background-color: #e6f4ea;
-      color: #188038;
-    }
-
-    .o-dropdown-content {
-      overflow-y: auto;
-      overflow-x: hidden;
-      padding: 2px;
-      z-index: 100;
-      box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
-
-      .o-dropdown-line {
-        > span {
-          padding: 4px;
-        }
-      }
-    }
-  }
-`;
   class TextStyler extends owl.Component {
       static template = "o-spreadsheet.TextStyler";
       static components = { ColorPickerWidget, ActionButton, FontSizeEditor };
@@ -54571,27 +53230,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-badge-selection {
-    gap: 1px;
-    button.o-button {
-      border-radius: 0;
-      &.selected {
-        color: ${GRAY_900};
-        border-color: ${ACTION_COLOR};
-        background: ${BADGE_SELECTED_COLOR};
-        font-weight: 600;
-      }
-
-      &:first-child {
-        border-radius: 4px 0 0 4px;
-      }
-      &:last-child {
-        border-radius: 0 4px 4px 0;
-      }
-    }
-  }
-`;
   class BadgeSelection extends owl.Component {
       static template = "o-spreadsheet.BadgeSelection";
       static props = {
@@ -54601,13 +53239,6 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
-  css /* scss */ `
-  .o-chart-title-designer {
-    > span {
-      height: 30px;
-    }
-  }
-`;
   class ChartTitle extends owl.Component {
       static template = "o-spreadsheet.ChartTitle";
       static components = { Section, TextStyler };
@@ -54669,31 +53300,12 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  const CIRCLE_SVG = /*xml*/ `
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'>
-  <circle r="2" fill="#FFF"/>
-</svg>
-`;
-  css /* scss */ `
-  .o-radio {
-    input {
-      appearance: none;
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      width: 14px;
-      height: 14px;
-      border: 1px solid ${GRAY_300};
-      outline: none;
-      border-radius: 8px;
-
-      &:checked {
-        background: url("data:image/svg+xml,${encodeURIComponent(CIRCLE_SVG)}");
-        background-color: ${ACTION_COLOR};
-        border-color: ${ACTION_COLOR};
-      }
-    }
-  }
-`;
+  // FIXME Encoding version used in css
+  // const CIRCLE_SVG = /*xml*/ `
+  // <svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'>
+  //   <circle r="2" fill="#FFF"/>
+  // </svg>
+  // `;
   class RadioSelection extends owl.Component {
       static template = "o-spreadsheet.RadioSelection";
       static props = {
@@ -55190,45 +53802,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-gauge-color-set {
-    table {
-      table-layout: fixed;
-      margin-top: 2%;
-      display: table;
-      text-align: left;
-      font-size: 12px;
-      line-height: 18px;
-      width: 100%;
-      font-size: 12px;
-    }
-
-    td {
-      height: 30px;
-      padding: 6px 0;
-    }
-    th.o-gauge-color-set-colorPicker {
-      width: 8%;
-    }
-    th.o-gauge-color-set-text {
-      width: 25%;
-    }
-    th.o-gauge-color-set-operator {
-      width: 10%;
-    }
-    th.o-gauge-color-set-value {
-      width: 22%;
-    }
-    th.o-gauge-color-set-type {
-      width: 30%;
-    }
-    input,
-    select {
-      width: 100%;
-      height: 100%;
-    }
-  }
-`;
   class GaugeChartDesignPanel extends owl.Component {
       static template = "o-spreadsheet-GaugeChartDesignPanel";
       static components = {
@@ -56034,40 +54607,6 @@ stores.inject(MyMetaStore, storeInstance);
       design: TreeMapChartDesignPanel,
   });
 
-  css /* scss */ `
-  .o-section .o-input.o-type-selector {
-    height: 30px;
-    padding-left: 35px;
-    padding-top: 5px;
-  }
-  .o-type-selector-preview {
-    left: 5px;
-    top: 3px;
-    .o-chart-preview {
-      width: 24px;
-      height: 24px;
-    }
-  }
-
-  .o-popover .o-chart-select-popover {
-    background: #fff;
-    .o-chart-type-item {
-      cursor: pointer;
-      padding: 3px 6px;
-      margin: 1px 2px;
-      &.selected,
-      &:hover {
-        border: 1px solid ${ACTION_COLOR};
-        background: ${BADGE_SELECTED_COLOR};
-        padding: 2px 5px;
-      }
-      .o-chart-preview {
-        width: 48px;
-        height: 48px;
-      }
-    }
-  }
-`;
   class ChartTypePicker extends owl.Component {
       static template = "o-spreadsheet-ChartTypePicker";
       static components = { Section, Popover };
@@ -56170,38 +54709,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-chart {
-    .o-panel {
-      display: flex;
-      .o-panel-element {
-        flex: 1 0 auto;
-        padding: 8px 0px;
-        text-align: center;
-        cursor: pointer;
-        border-right: 1px solid ${GRAY_300};
-
-        &.inactive {
-          color: ${TEXT_BODY};
-          background-color: ${GRAY_100};
-          border-bottom: 1px solid ${GRAY_300};
-        }
-
-        &:not(.inactive) {
-          color: ${TEXT_HEADING};
-          border-bottom: 1px solid #fff;
-        }
-
-        .fa {
-          margin-right: 4px;
-        }
-      }
-      .o-panel-element:last-child {
-        border-right: none;
-      }
-    }
-  }
-`;
   class ChartPanel extends owl.Component {
       static template = "o-spreadsheet-ChartPanel";
       static components = { Section, ChartTypePicker };
@@ -56290,26 +54797,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-icon-picker {
-    position: absolute;
-    z-index: ${ComponentsImportance.IconPicker};
-    box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
-    background-color: white;
-    padding: 2px 1px;
-  }
-  .o-cf-icon-line {
-    display: flex;
-    padding: 0 6px;
-  }
-  .o-icon-picker-item {
-    cursor: pointer;
-    &:hover {
-      background-color: ${BADGE_SELECTED_COLOR};
-      outline: ${ACTION_COLOR} solid 1px;
-    }
-  }
-`;
   class IconPicker extends owl.Component {
       static template = "o-spreadsheet-IconPicker";
       static props = {
@@ -56347,77 +54834,6 @@ stores.inject(MyMetaStore, storeInstance);
       }, () => [highlightProvider.highlights]);
   }
 
-  css /* scss */ `
-  .o-cf-preview {
-    &.o-cf-cursor-ptr {
-      cursor: pointer;
-    }
-
-    border-bottom: 1px solid ${GRAY_300};
-    height: 80px;
-    padding: 10px;
-    position: relative;
-    cursor: pointer;
-    &:hover,
-    &.o-cf-dragging {
-      background-color: ${GRAY_200};
-    }
-
-    &:not(:hover) .o-cf-delete-button {
-      display: none;
-    }
-    .o-cf-preview-icon {
-      border: 1px solid ${GRAY_300};
-      background-color: #fff;
-      position: absolute;
-      height: 50px;
-      width: 50px;
-      .o-icon {
-        width: ${CF_ICON_EDGE_LENGTH}px;
-        height: ${CF_ICON_EDGE_LENGTH}px;
-      }
-    }
-    .o-cf-preview-description {
-      left: 65px;
-      margin-bottom: auto;
-      margin-right: 8px;
-      margin-top: auto;
-      position: relative;
-      width: 142px;
-      .o-cf-preview-description-rule {
-        margin-bottom: 4px;
-        max-height: 2.8em;
-        line-height: 1.4em;
-      }
-      .o-cf-preview-range {
-        font-size: 12px;
-      }
-    }
-    .o-cf-delete {
-      left: 90%;
-      top: 39%;
-      position: absolute;
-    }
-    &:not(:hover):not(.o-cf-dragging) .o-cf-drag-handle {
-      display: none !important;
-    }
-    .o-cf-drag-handle {
-      left: -8px;
-      cursor: move;
-      .o-icon {
-        width: 6px;
-        height: 30px;
-      }
-    }
-
-    .o-icon.arrow-down {
-      color: #e06666;
-    }
-    .o-icon.arrow-up {
-      color: #6aa84f;
-    }
-  }
-`;
   class ConditionalFormatPreview extends owl.Component {
       static template = "o-spreadsheet-ConditionalFormatPreview";
       icons = ICONS;
@@ -56536,95 +54952,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-cf-ruleEditor {
-    .o-cf-preview-display {
-      border: 1px solid ${GRAY_300};
-      padding: 10px;
-    }
-
-    .o-cf-cell-is-rule {
-      .o-divider {
-        border-right: 1px solid ${GRAY_300};
-        margin: 4px 6px;
-      }
-    }
-    .o-cf-color-scale-editor {
-      .o-threshold {
-        .o-select-with-input {
-          max-width: 150px;
-        }
-        .o-threshold-value {
-          flex-grow: 1;
-          flex-basis: 60%;
-          min-width: 0px; /* input overflows in Firefox otherwise */
-        }
-        .o-threshold-value input:disabled {
-          background-color: #edebed;
-        }
-      }
-    }
-    .o-cf-iconset-rule {
-      .o-cf-clickable-icon {
-        border: 1px solid ${GRAY_200};
-        border-radius: 4px;
-        cursor: pointer;
-        &:hover {
-          border-color: ${ACTION_COLOR};
-          background-color: ${BADGE_SELECTED_COLOR};
-        }
-        .o-icon {
-          width: ${CF_ICON_EDGE_LENGTH}px;
-          height: ${CF_ICON_EDGE_LENGTH}px;
-        }
-      }
-      .o-cf-iconsets {
-        gap: 11px;
-        .o-cf-iconset {
-          padding: 7px 8px;
-          width: 95px;
-          .o-icon {
-            margin: 0 3px;
-          }
-          svg {
-            vertical-align: baseline;
-          }
-        }
-      }
-      .o-inflection {
-        .o-cf-icon-button {
-          padding: 4px 10px;
-        }
-        table {
-          font-size: 13px;
-          td {
-            padding: 6px 0;
-          }
-
-          th.o-cf-iconset-icons {
-            width: 25px;
-          }
-          th.o-cf-iconset-text {
-            width: 82px;
-          }
-          th.o-cf-iconset-operator {
-            width: 20px;
-          }
-          .o-cf-iconset-type {
-            min-width: 80px;
-          }
-        }
-      }
-    }
-
-    .o-icon.arrow-down {
-      color: #e06666;
-    }
-    .o-icon.arrow-up {
-      color: #6aa84f;
-    }
-  }
-`;
   class ConditionalFormattingEditor extends owl.Component {
       static template = "o-spreadsheet-ConditionalFormattingEditor";
       static props = {
@@ -57154,25 +55481,6 @@ stores.inject(MyMetaStore, storeInstance);
    */
   const currenciesRegistry = new Registry();
 
-  css /* scss */ `
-  .o-custom-currency {
-    .o-format-proposals {
-      color: black;
-    }
-
-    .o-format-examples {
-      background: #f9fafb;
-      padding: 8px;
-      border-radius: 4px;
-      border: 1px solid #d8dadd;
-      color: #374151;
-    }
-
-    table {
-      table-layout: fixed;
-    }
-  }
-`;
   class CustomCurrencyPanel extends owl.Component {
       static template = "o-spreadsheet-CustomCurrencyPanel";
       static components = { Section, Checkbox };
@@ -57405,31 +55713,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-sidePanel {
-    .o-dv-preview {
-      height: 70px;
-      cursor: pointer;
-      border-bottom: 1px solid ${FIGURE_BORDER_COLOR};
-
-      .o-dv-container {
-        min-width: 0; /* otherwise flex won't shrink correctly */
-      }
-
-      .o-dv-preview-description {
-        font-size: 13px;
-      }
-
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.08);
-      }
-
-      &:not(:hover) .o-dv-preview-delete {
-        display: none !important;
-      }
-    }
-  }
-`;
   class DataValidationPreview extends owl.Component {
       static template = "o-spreadsheet-DataValidationPreview";
       static props = {
@@ -57878,38 +56161,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-find-and-replace {
-    outline: none;
-    height: 100%;
-    .o-input-search-container {
-      display: flex;
-      .o-input-with-count {
-        flex-grow: 1;
-        width: auto;
-      }
-      .o-input-without-count {
-        width: 100%;
-      }
-      .o-input-count {
-        width: fit-content;
-        padding: 4px 0 4px 4px;
-        white-space: nowrap;
-      }
-    }
-
-    .o-result-buttons {
-      .o-button {
-        height: 19px;
-        width: 19px;
-        .o-icon {
-          height: 14px;
-          width: 14px;
-        }
-      }
-    }
-  }
-`;
   class FindAndReplacePanel extends owl.Component {
       static template = "o-spreadsheet-FindAndReplacePanel";
       static components = { SelectionInput, Section, Checkbox, ValidationMessages };
@@ -58020,22 +56271,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-more-formats-panel {
-    .format-preview {
-      height: 49px;
-      background-color: white;
-      cursor: pointer;
-
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.08);
-      }
-    }
-    .check-icon {
-      width: 24px;
-    }
-  }
-`;
   const DATE_FORMAT_ACTIONS = createActions([
       formatNumberFullDateTime,
       formatNumberISODate,
@@ -58193,21 +56428,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-sidePanel {
-    .o-pivot-measure-display-field,
-    .o-pivot-measure-display-value {
-      border: solid 1px ${GRAY_300};
-      border-radius: 3px;
-    }
-
-    .o-pivot-measure-display-description {
-      white-space: pre-wrap;
-      color: dimgray;
-      border-left: 2px solid ${GRAY_300};
-    }
-  }
-`;
   class PivotMeasureDisplayPanel extends owl.Component {
       static template = "o-spreadsheet-PivotMeasureDisplayPanel";
       static props = {
@@ -58266,11 +56486,6 @@ stores.inject(MyMetaStore, storeInstance);
       return positions;
   }
 
-  css /* scss */ `
-  .pivot-defer-update {
-    min-height: 40px;
-  }
-`;
   class PivotDeferUpdate extends owl.Component {
       static template = "o-spreadsheet-PivotDeferUpdate";
       static props = {
@@ -58359,25 +56574,6 @@ stores.inject(MyMetaStore, storeInstance);
       return pendingHtmlContent.filter((content) => content.value);
   }
 
-  css /* scss */ `
-  input.pivot-dimension-search-field:focus {
-    outline: none;
-  }
-  .pivot-dimension-search-field-icon svg {
-    width: 13px;
-    height: 13px;
-  }
-  .pivot-dimension-search {
-    background-color: white;
-  }
-  .add-dimension.o-button {
-    padding: 2px 7px;
-    font-weight: 400;
-    font-size: 12px;
-    flex-grow: 0;
-    height: inherit;
-  }
-`;
   class AddDimensionButton extends owl.Component {
       static template = "o-spreadsheet-AddDimensionButton";
       static components = { Popover, TextValueProvider };
@@ -58471,35 +56667,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  // don't use bg-white since it's flipped to dark in dark mode and we don't support dark mode
-  css /* scss */ `
-  .pivot-dimension {
-    background-color: white;
-    border: 1px solid ${GRAY_300};
-    border-radius: 4px;
-
-    select.o-input {
-      height: inherit;
-    }
-
-    select > option {
-      background-color: white;
-    }
-
-    .pivot-dim-operator-label {
-      min-width: 120px;
-    }
-
-    &.pivot-dimension-invalid {
-      background-color: #ffdddd;
-      border-color: red !important;
-      select,
-      input {
-        background-color: #ffdddd;
-      }
-    }
-  }
-`;
   class PivotDimension extends owl.Component {
       static template = "o-spreadsheet-PivotDimension";
       static props = {
@@ -58651,19 +56818,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-pivot-sort {
-    .o-sort-card {
-      width: fit-content;
-      background-color: ${GRAY_100};
-      border: 1px solid ${GRAY_300};
-
-      .o-sort-value {
-        color: ${PRIMARY_BUTTON_BG};
-      }
-    }
-  }
-`;
   class PivotSortSection extends owl.Component {
       static template = "o-spreadsheet-PivotSortSection";
       static components = {
@@ -58709,11 +56863,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .add-calculated-measure {
-    cursor: pointer;
-  }
-`;
   class PivotLayoutConfigurator extends owl.Component {
       static template = "o-spreadsheet-PivotLayoutConfigurator";
       static components = {
@@ -59528,11 +57677,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-checkbox-selection {
-    max-height: 300px;
-  }
-`;
   class RemoveDuplicatesPanel extends owl.Component {
       static template = "o-spreadsheet-RemoveDuplicatesPanel";
       static components = { ValidationMessages, Section, Checkbox };
@@ -59619,12 +57763,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-locale-preview {
-    border: 1px solid ${GRAY_300};
-    background-color: ${GRAY_100};
-  }
-`;
   class SettingsPanel extends owl.Component {
       static template = "o-spreadsheet-SettingsPanel";
       static components = { Section, ValidationMessages, BadgeSelection };
@@ -59898,34 +58036,6 @@ stores.inject(MyMetaStore, storeInstance);
       ctx.restore();
   }
 
-  css /* scss */ `
-  .o-table-style-list-item {
-    border: 1px solid transparent;
-    border-radius: 4px;
-    &.selected {
-      border: 1px solid ${ACTION_COLOR};
-      background: ${BADGE_SELECTED_COLOR};
-    }
-
-    &:hover {
-      background: #ddd;
-      .o-table-style-edit-button {
-        display: block !important;
-        right: 0;
-        top: 0;
-        background: #fff;
-        cursor: pointer;
-        border: 1px solid #ddd;
-        padding: 1px 1px 1px 2px;
-        .o-icon {
-          font-size: 12px;
-          width: 12px;
-          height: 12px;
-        }
-      }
-    }
-  }
-`;
   class TableStylePreview extends owl.Component {
       static template = "o-spreadsheet-TableStylePreview";
       static components = { MenuPopover };
@@ -59986,52 +58096,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-table-style-popover {
-    /* 7 tables preview + padding by line */
-    width: calc((66px + 4px * 2) * 7 + 1.5rem * 2);
-    background: #fff;
-    font-size: 14px;
-    user-select: none;
-
-    .o-notebook {
-      border-bottom: 1px solid ${GRAY_300};
-
-      .o-notebook-tab {
-        padding: 5px 15px;
-        border: 1px solid ${GRAY_300};
-        margin-bottom: -1px;
-        margin-left: -1px;
-        color: ${TEXT_BODY};
-        cursor: pointer;
-        transition: color 0.2s, border-color 0.2s;
-
-        &.selected {
-          border-bottom-color: #fff;
-          border-top-color: ${PRIMARY_BUTTON_BG};
-          color: ${TEXT_HEADING};
-        }
-      }
-    }
-
-    .o-table-style-list-item {
-      padding: 3px;
-    }
-
-    .o-table-style-popover-preview {
-      width: 66px;
-      height: 51px;
-    }
-
-    .o-new-table-style {
-      font-size: 36px;
-      color: #666;
-      &:hover {
-        background: #f5f5f5;
-      }
-    }
-  }
-`;
   class TableStylesPopover extends owl.Component {
       static template = "o-spreadsheet-TableStylesPopover";
       static components = { Popover, TableStylePreview };
@@ -60071,31 +58135,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-table-style-picker {
-    border: 1px solid ${GRAY_300};
-    border-radius: 3px;
-
-    .o-table-style-picker-arrow {
-      border-left: 1px solid ${GRAY_300};
-
-      &:hover {
-        background: #f5f5f5;
-        cursor: pointer;
-      }
-    }
-
-    .o-table-style-list-item {
-      padding: 5px 6px;
-      margin: 5px 2px;
-
-      .o-table-style-picker-preview {
-        width: 51px;
-        height: 36px;
-      }
-    }
-  }
-`;
   class TableStylePicker extends owl.Component {
       static template = "o-spreadsheet-TableStylePicker";
       static components = { TableStylesPopover, TableStylePreview };
@@ -60139,19 +58178,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-table-panel {
-    input.o-table-n-of-headers {
-      width: 14px;
-      text-align: center;
-    }
-
-    .o-info-icon {
-      width: 14px;
-      height: 14px;
-    }
-  }
-`;
   class TablePanel extends owl.Component {
       static template = "o-spreadsheet-TablePanel";
       static components = { TableStylePicker, SelectionInput, ValidationMessages, Checkbox, Section };
@@ -60303,19 +58329,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-table-style-editor-panel {
-    .o-table-style-list-item {
-      margin: 2px 7px;
-      padding: 6px 9px;
-
-      .o-table-style-edit-template-preview {
-        width: 71px;
-        height: 51px;
-      }
-    }
-  }
-`;
   const DEFAULT_TABLE_STYLE_COLOR = "#3C78D8";
   class TableStyleEditorPanel extends owl.Component {
       static template = "o-spreadsheet-TableStyleEditorPanel";
@@ -60750,15 +58763,6 @@ stores.inject(MyMetaStore, storeInstance);
 
   const SIZE = 3;
   const COLOR = "#777";
-  css /* scss */ `
-  .o-table-resizer {
-    width: ${SIZE * 2}px;
-    height: ${SIZE * 2}px;
-    border-bottom: ${SIZE}px solid ${COLOR};
-    border-right: ${SIZE}px solid ${COLOR};
-    cursor: nwse-resize;
-  }
-`;
   class TableResizer extends owl.Component {
       static template = "o-spreadsheet-TableResizer";
       static props = { table: Object };
@@ -61575,43 +59579,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o_pivot_html_renderer {
-    width: 100%;
-    border-collapse: collapse;
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    td,
-    th {
-      border: 1px solid #dee2e6;
-      background-color: #fff;
-      padding: 0.3rem;
-      white-space: nowrap;
-
-      &:hover {
-        filter: brightness(0.9);
-      }
-    }
-
-    td {
-      text-align: right;
-    }
-
-    th {
-      background-color: #f5f5f5;
-      font-weight: bold;
-      color: black;
-    }
-
-    .o_missing_value {
-      color: #46646d;
-      background: #e7f2f6;
-    }
-  }
-`;
   class PivotHTMLRenderer extends owl.Component {
       static template = "o_spreadsheet.PivotHTMLRenderer";
       static components = { Checkbox };
@@ -74912,7 +72879,10 @@ stores.inject(MyMetaStore, storeInstance);
           return "Success" /* CommandResult.Success */;
       }
       checkArrayFormulaInSortZone({ sheetId, zone }) {
-          const arrayFormulaInZone = positions(zone).some(({ col, row }) => this.getters.getArrayFormulaSpreadingOn({ sheetId, col, row }));
+          const arrayFormulaInZone = positions(zone).some(({ col, row }) => {
+              const originPosition = this.getters.getArrayFormulaSpreadingOn({ sheetId, col, row });
+              return originPosition && !deepEquals(originPosition, { sheetId, col, row });
+          });
           return arrayFormulaInZone ? "SortZoneWithArrayFormulas" /* CommandResult.SortZoneWithArrayFormulas */ : "Success" /* CommandResult.Success */;
       }
       /**
@@ -77625,13 +75595,10 @@ stores.inject(MyMetaStore, storeInstance);
           const deltaCol = isBasedBefore && isCol ? thickness : 0;
           const deltaRow = isBasedBefore && !isCol ? thickness : 0;
           const toRemove = isBasedBefore ? cmd.elements.map((el) => el + thickness) : cmd.elements;
-          const originalSize = Object.fromEntries(toRemove.map((element) => {
-              const size = isCol
-                  ? this.getters.getColSize(cmd.sheetId, element)
-                  : this.getters.getUserRowSize(cmd.sheetId, element);
-              const isDefaultCol = isCol && size === DEFAULT_CELL_WIDTH;
-              return [element, isDefaultCol ? undefined : size];
-          }));
+          const originalSize = {};
+          for (const element of toRemove) {
+              originalSize[element] = this.getters.getHeaderSize(cmd.sheetId, cmd.dimension, element);
+          }
           const target = [
               {
                   left: isCol ? start + deltaCol : 0,
@@ -77675,11 +75642,11 @@ stores.inject(MyMetaStore, storeInstance);
           for (const element of toRemove) {
               const size = originalSize[element];
               const currentSize = this.getters.getHeaderSize(cmd.sheetId, cmd.dimension, currentIndex);
-              if (size && size !== currentSize) {
+              if (size !== currentSize) {
                   resizingGroups[size] ??= [];
                   resizingGroups[size].push(currentIndex);
-                  currentIndex += 1;
               }
+              currentIndex += 1;
           }
           for (const size in resizingGroups) {
               this.dispatch("RESIZE_COLUMNS_ROWS", {
@@ -80598,11 +78565,6 @@ stores.inject(MyMetaStore, storeInstance);
       { transform: "scale(0.8)", offset: 0.33 },
       { opacity: "0", transform: "scale(1)", offset: 1 },
   ];
-  css /* scss */ `
-  .o-ripple {
-    z-index: 1;
-  }
-`;
   class RippleEffect extends owl.Component {
       static template = "o-spreadsheet-RippleEffect";
       static props = {
@@ -80774,59 +78736,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-sheet {
-    padding: 0 15px;
-    padding-right: 10px;
-    height: ${DESKTOP_BOTTOMBAR_HEIGHT}px;
-    border-left: 1px solid #c1c1c1;
-    border-right: 1px solid #c1c1c1;
-    margin-left: -1px;
-    cursor: pointer;
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.08);
-    }
-
-    &.active {
-      color: ${ACTION_COLOR};
-      background-color: #ffffff;
-      box-shadow: 0 1px 3px 1px rgba(60, 64, 67, 0.15);
-    }
-
-    .o-sheet-icon {
-      z-index: 1;
-
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.08);
-      }
-    }
-
-    .o-sheet-name {
-      outline: none;
-      padding: 2px 4px;
-
-      &.o-sheet-name-editable {
-        border-radius: 2px;
-        border: 2px solid mediumblue;
-        /* negative margins so nothing moves when the border is added */
-        margin-left: -2px;
-        margin-right: -2px;
-      }
-    }
-
-    .o-sheet-color {
-      bottom: 0;
-      left: 0;
-      height: 6px;
-      z-index: 1;
-      width: calc(100% - 1px);
-    }
-  }
-
-  .o-spreadshet-mobile .o-sheet {
-    height: ${MOBILE_BOTTOMBAR_HEIGHT}px;
-  }
-`;
   class BottomBarSheet extends owl.Component {
       static template = "o-spreadsheet-BottomBarSheet";
       static props = {
@@ -81106,20 +79015,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  // -----------------------------------------------------------------------------
-  // SpreadSheet
-  // -----------------------------------------------------------------------------
-  css /* scss */ `
-  .o-selection-statistic {
-    margin-right: 20px;
-    padding: 4px 4px 4px 8px;
-    color: #333;
-    cursor: pointer;
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.08) !important;
-    }
-  }
-`;
   class BottomBarStatistic extends owl.Component {
       static template = "o-spreadsheet-BottomBarStatistic";
       static props = {
@@ -81176,77 +79071,6 @@ stores.inject(MyMetaStore, storeInstance);
   // SpreadSheet
   // -----------------------------------------------------------------------------
   const MENU_MAX_HEIGHT = 250;
-  css /* scss */ `
-  .o-spreadsheet-bottom-bar {
-    background-color: ${BACKGROUND_GRAY_COLOR};
-    padding-left: ${HEADER_WIDTH}px;
-    font-size: 15px;
-    border-top: 1px solid lightgrey;
-
-    .o-sheet-item {
-      cursor: pointer;
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.08);
-      }
-    }
-
-    .o-all-sheets {
-      max-width: 70%;
-      .o-bottom-bar-fade-out {
-        background-image: linear-gradient(-90deg, #cfcfcf, transparent 1%);
-      }
-
-      .o-bottom-bar-fade-in {
-        z-index: 1;
-        background-image: linear-gradient(90deg, #cfcfcf, transparent 1%);
-      }
-
-      .o-sheet-list {
-        overflow-y: hidden;
-        overflow-x: auto;
-
-        &::-webkit-scrollbar {
-          display: none; /* Chrome */
-        }
-        -ms-overflow-style: none; /* IE and Edge */
-        scrollbar-width: none; /* Firefox */
-      }
-    }
-
-    .o-bottom-bar-arrows {
-      .o-bottom-bar-arrow {
-        cursor: pointer;
-        &:hover:not([class*="o-disabled"]) {
-          .o-icon {
-            opacity: 0.9;
-          }
-        }
-
-        .o-icon {
-          height: 18px;
-          width: 18px;
-          font-size: 18px;
-        }
-      }
-    }
-  }
-
-  .o-spreadsheet-mobile .o-spreadsheet-bottom-bar {
-    padding-left: 0;
-
-    .add-sheet-container {
-      order: 2;
-    }
-
-    .o-add-sheet {
-      margin-left: 0.5rem;
-    }
-
-    .o-all-sheets {
-      max-width: none;
-    }
-  }
-`;
   class BottomBar extends owl.Component {
       static template = "o-spreadsheet-BottomBar";
       static props = { onClick: Function };
@@ -81502,12 +79326,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-dashboard-clickable-cell {
-    position: absolute;
-    cursor: pointer;
-  }
-`;
   class SpreadsheetDashboard extends owl.Component {
       static template = "o-spreadsheet-SpreadsheetDashboard";
       static props = { getGridSize: Function };
@@ -81599,27 +79417,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-header-group {
-    .o-header-group-header {
-      z-index: ${ComponentsImportance.HeaderGroupingButton};
-      .o-group-fold-button {
-        cursor: pointer;
-        width: 15px;
-        height: 15px;
-        border: 1px solid ${HEADER_GROUPING_BORDER_COLOR};
-        .o-icon {
-          width: 7px;
-          height: 7px;
-        }
-
-        &:hover {
-          border-color: #777;
-        }
-      }
-    }
-  }
-`;
   class AbstractHeaderGroup extends owl.Component {
       static template = "o-spreadsheet-HeaderGroup";
       static props = {
@@ -81770,27 +79567,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-header-group-frozen-pane-border {
-    &.o-group-rows {
-      margin-top: -1px;
-      border-bottom: 3px solid ${FROZEN_PANE_HEADER_BORDER_COLOR};
-    }
-    &.o-group-columns {
-      margin-left: -1px;
-      border-right: 3px solid ${FROZEN_PANE_HEADER_BORDER_COLOR};
-    }
-  }
-
-  .o-header-group-main-pane {
-    &.o-group-rows {
-      margin-top: -2px; /* Counteract o-header-group-frozen-pane-border offset */
-    }
-    &.o-group-columns {
-      margin-left: -2px;
-    }
-  }
-`;
   class HeaderGroupContainer extends owl.Component {
       static template = "o-spreadsheet-HeaderGroupContainer";
       static props = {
@@ -81869,121 +79645,6 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
-  css /* scss */ `
-  .o-sidePanel {
-    display: flex;
-    flex-direction: column;
-    overflow-x: hidden;
-    background-color: white;
-    border: solid ${GRAY_300};
-    border-width: 1px 0 0 1px;
-    user-select: none;
-    color: ${TEXT_BODY};
-
-    &.collapsed {
-      padding: 8px;
-      cursor: pointer;
-
-      .o-sidePanelTitle {
-        writing-mode: vertical-rl;
-        text-orientation: mixed;
-      }
-    }
-
-    .o-sidePanelTitle {
-      line-height: 20px;
-      font-size: 16px;
-    }
-
-    .o-sidePanelHeader {
-      padding: 8px;
-      border-bottom: 1px solid ${GRAY_300};
-    }
-
-    .o-sidePanelAction {
-      padding: 5px 10px;
-      cursor: pointer;
-
-      &.active {
-        background-color: ${BUTTON_ACTIVE_BG};
-      }
-
-      &:hover {
-        background-color: ${BUTTON_HOVER_BG};
-      }
-    }
-    .o-sidePanelBody-container {
-      /* This overwrites the min-height: auto; of flex. Without this, a flex div cannot be smaller than its children */
-      min-height: 0;
-    }
-    .o-sidePanelBody {
-      overflow: auto;
-      width: 100%;
-      height: 100%;
-
-      .o-section {
-        padding: 16px;
-
-        .o-section-title {
-          font-weight: 500;
-          margin-bottom: 5px;
-        }
-
-        .o-section-subtitle {
-          font-weight: 500;
-          font-size: 13px;
-          line-height: 14px;
-          margin: 8px 0 4px 0;
-        }
-
-        .o-subsection-left {
-          display: inline-block;
-          width: 47%;
-          margin-right: 3%;
-        }
-
-        .o-subsection-right {
-          display: inline-block;
-          width: 47%;
-          margin-left: 3%;
-        }
-      }
-
-      .o-sidePanel-composer {
-        color: ${TEXT_BODY};
-      }
-    }
-
-    .o-sidePanelButtons {
-      display: flex;
-      gap: 8px;
-    }
-
-    .o-invalid {
-      border-width: 2px;
-      border-color: red;
-    }
-
-    .o-sidePanel-handle-container {
-      width: 8px;
-      position: fixed;
-      top: 50%;
-      z-index: 1;
-    }
-    .o-sidePanel-handle {
-      cursor: col-resize;
-      color: #a9a9a9;
-      .o-icon {
-        height: 25px;
-        margin-left: -5px;
-      }
-    }
-  }
-
-  .o-fw-bold {
-    font-weight: 500;
-  }
-`;
   class SidePanel extends owl.Component {
       static template = "o-spreadsheet-SidePanel";
       static props = {
@@ -82158,11 +79819,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css `
-  .o-small-composer {
-    z-index: ${ComponentsImportance.TopBarComposer};
-  }
-`;
   class SmallBottomBar extends owl.Component {
       static components = { Composer, BottomBar, Ripple, RibbonMenu };
       static template = "o-spreadsheet-SmallBottomBar";
@@ -82250,36 +79906,12 @@ stores.inject(MyMetaStore, storeInstance);
 
   const COMPOSER_MAX_HEIGHT = 300;
   /* svg free of use from https://uxwing.com/formula-fx-icon/ */
-  const FX_SVG = /*xml*/ `
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 121.8 122.9' width='16' height='16' focusable='false'>
-  <path d='m28 34-4 5v2h10l-6 40c-4 22-6 28-7 30-2 2-3 3-5 3-3 0-7-2-9-4H4c-2 2-4 4-4 7s4 6 8 6 9-2 15-8c8-7 13-17 18-39l7-35 13-1 3-6H49c4-23 7-27 11-27 2 0 5 2 8 6h4c1-1 4-4 4-7 0-2-3-6-9-6-5 0-13 4-20 10-6 7-9 14-11 24h-8zm41 16c4-5 7-7 8-7s2 1 5 9l3 12c-7 11-12 17-16 17l-3-1-2-1c-3 0-6 3-6 7s3 7 7 7c6 0 12-6 22-23l3 10c3 9 6 13 10 13 5 0 11-4 18-15l-3-4c-4 6-7 8-8 8-2 0-4-3-6-10l-5-15 8-10 6-4 3 1 3 2c2 0 6-3 6-7s-2-7-6-7c-6 0-11 5-21 20l-2-6c-3-9-5-14-9-14-5 0-12 6-18 15l3 3z' fill='#BDBDBD'/>
-</svg>
-`;
-  css /* scss */ `
-  .o-topbar-composer-container {
-    height: ${DESKTOP_TOPBAR_TOOLBAR_HEIGHT}px;
-  }
-
-  .o-topbar-composer {
-    height: fit-content;
-    margin-top: -1px;
-    margin-bottom: -1px;
-    border: 1px solid;
-    font-family: ${DEFAULT_FONT};
-
-    /* In readonly we always show the fx icon if the composer is empty, not matter the focus */
-    .o-composer:empty:not(:focus):not(.active)::before,
-    &.o-topbar-composer-readonly .o-composer:empty::before {
-      content: url("data:image/svg+xml,${encodeURIComponent(FX_SVG)}");
-      position: relative;
-      top: 20%;
-    }
-  }
-
-  .user-select-text {
-    user-select: text;
-  }
-`;
+  // FIXME This svg is hardcoded in the css file. We should find a better way to handle it.
+  // const FX_SVG = /*xml*/ `
+  // <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 121.8 122.9' width='16' height='16' focusable='false'>
+  //   <path d='m28 34-4 5v2h10l-6 40c-4 22-6 28-7 30-2 2-3 3-5 3-3 0-7-2-9-4H4c-2 2-4 4-4 7s4 6 8 6 9-2 15-8c8-7 13-17 18-39l7-35 13-1 3-6H49c4-23 7-27 11-27 2 0 5 2 8 6h4c1-1 4-4 4-7 0-2-3-6-9-6-5 0-13 4-20 10-6 7-9 14-11 24h-8zm41 16c4-5 7-7 8-7s2 1 5 9l3 12c-7 11-12 17-16 17l-3-1-2-1c-3 0-6 3-6 7s3 7 7 7c6 0 12-6 22-23l3 10c3 9 6 13 10 13 5 0 11-4 18-15l-3-4c-4 6-7 8-8 8-2 0-4-3-6-10l-5-15 8-10 6-4 3 1 3 2c2 0 6-3 6-7s-2-7-6-7c-6 0-11 5-21 20l-2-6c-3-9-5-14-9-14-5 0-12 6-18 15l3 3z' fill='#BDBDBD'/>
+  // </svg>
+  // `;
   class TopBarComposer extends owl.Component {
       static template = "o-spreadsheet-TopBarComposer";
       static props = {};
@@ -82315,18 +79947,6 @@ stores.inject(MyMetaStore, storeInstance);
           style.height = this.focus === "inactive" ? `${DESKTOP_TOPBAR_TOOLBAR_HEIGHT}px` : "fit-content";
           return cssPropertiesToCss(style);
       }
-      get containerStyle() {
-          if (this.focus === "inactive") {
-              return cssPropertiesToCss({
-                  "border-color": SEPARATOR_COLOR,
-                  "border-right": "none",
-              });
-          }
-          return cssPropertiesToCss({
-              "border-color": SELECTION_BORDER_COLOR,
-              "z-index": String(ComponentsImportance.TopBarComposer),
-          });
-      }
       onFocus(selection) {
           this.composerFocusStore.focusComposer(this.composerInterface, { selection });
       }
@@ -82416,79 +80036,6 @@ stores.inject(MyMetaStore, storeInstance);
   // -----------------------------------------------------------------------------
   // Border Editor
   // -----------------------------------------------------------------------------
-  css /* scss */ `
-  .o-border-selector {
-    padding: 4px;
-    background-color: white;
-
-    .o-divider {
-      border-right: 1px solid ${GRAY_300};
-      margin: 0 6px;
-    }
-
-    .o-border-selector-section {
-      .o-dropdown-line {
-        height: 30px;
-        margin: 1px;
-        .o-line-item {
-          padding: 4px;
-          width: 26px;
-          height: 26px;
-          &.active {
-            background-color: ${BUTTON_ACTIVE_BG};
-          }
-        }
-      }
-      .o-border-style-tool {
-        padding: 0px 3px;
-        margin: 2px;
-        height: 25px;
-      }
-    }
-  }
-
-  .o-border-style-dropdown {
-    background: #ffffff;
-    padding: 4px;
-    .o-dropdown-line {
-    }
-    .o-style-preview {
-      margin: 7px 5px 7px 5px;
-      width: 60px;
-      height: 5px;
-    }
-    .o-style-thin {
-      border-bottom: 1px solid #000000;
-    }
-    .o-style-medium {
-      border-bottom: 2px solid #000000;
-    }
-    .o-style-thick {
-      border-bottom: 3px solid #000000;
-    }
-    .o-style-dashed {
-      border-bottom: 1px dashed #000000;
-    }
-    .o-style-dotted {
-      border-bottom: 1px dotted #000000;
-    }
-    .o-dropdown-border-type {
-      cursor: pointer;
-      &:not(.o-disabled):not(.active):hover {
-        background-color: ${BUTTON_HOVER_BG};
-      }
-    }
-    .o-dropdown-border-check {
-      width: 20px;
-      font-size: 12px;
-    }
-    .o-border-picker-button {
-      padding: 0px !important;
-      margin: 5px 0px 0px 0px !important;
-      height: 25px !important;
-    }
-  }
-`;
   class BorderEditor extends owl.Component {
       static template = "o-spreadsheet-BorderEditor";
       static props = {
@@ -83039,90 +80586,6 @@ stores.inject(MyMetaStore, storeInstance);
   // -----------------------------------------------------------------------------
   // TopBar
   // -----------------------------------------------------------------------------
-  css /* scss */ `
-  .o-topbar-divider {
-    border-right: 1px solid ${SEPARATOR_COLOR};
-    width: 0;
-    margin: 0 6px;
-    height: 30px;
-  }
-
-  .o-toolbar-button {
-    height: 30px;
-  }
-
-  .o-spreadsheet-topbar {
-    line-height: 1.2;
-    font-size: 14px;
-    font-weight: 500;
-    background-color: #fff;
-
-    .o-topbar-top {
-      border-bottom: 1px solid ${SEPARATOR_COLOR};
-      padding: 2px 10px;
-
-      /* Menus */
-      .o-topbar-topleft {
-        .o-topbar-menu {
-          padding: 4px 6px;
-          margin: 0 2px;
-
-          &.active {
-            background-color: ${BUTTON_ACTIVE_BG};
-            color: ${BUTTON_ACTIVE_TEXT_COLOR};
-          }
-        }
-      }
-    }
-
-    .irregularity-map {
-      border-top: 1px solid ${SEPARATOR_COLOR};
-      height: ${DESKTOP_TOPBAR_TOOLBAR_HEIGHT}px;
-
-      .alert-info {
-        border-left: 3px solid ${ALERT_INFO_BORDER};
-      }
-    }
-
-    .o-topbar-composer {
-      flex-grow: 1;
-    }
-
-    /* Toolbar */
-    .o-topbar-toolbar {
-      height: ${DESKTOP_TOPBAR_TOOLBAR_HEIGHT}px;
-
-      .o-readonly-toolbar {
-        background-color: ${BACKGROUND_HEADER_COLOR};
-        padding-left: 18px;
-        padding-right: 18px;
-      }
-
-      /* Toolbar */
-      .o-toolbar-tools {
-        cursor: default;
-      }
-    }
-  }
-
-  .o-spreadsheet-mobile {
-    .o-topbar-toolbar {
-      height: ${MOBILE_TOPBAR_TOOLBAR_HEIGHT}px;
-    }
-    .o-topbar-divider {
-      border-width: 2px;
-      border-radius: 4px;
-    }
-
-    .o-toolbar-button {
-      height: 35px;
-      width: 31px;
-      .o-toolbar-button.o-mobile-disabled * {
-      color: ${DISABLED_TEXT_COLOR};
-      cursor: not-allowed;
-    }
-  }
-`;
   class TopBar extends owl.Component {
       static template = "o-spreadsheet-TopBar";
       static props = {
@@ -83396,251 +80859,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  // -----------------------------------------------------------------------------
-  // SpreadSheet
-  // -----------------------------------------------------------------------------
-  const CARET_DOWN_SVG = /*xml*/ `
-<svg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'>
-  <polygon fill='%23374151' points='3.5 4 7 0 0 0'/>
-</svg>
-`;
-  css /* scss */ `
-  .o-spreadsheet {
-    position: relative;
-    display: grid;
-    font-size: 14px;
-
-    .text-muted {
-      color: ${TEXT_BODY_MUTED} !important;
-    }
-    .o-disabled {
-      opacity: 0.4;
-      cursor: default;
-      pointer-events: none;
-    }
-
-    &,
-    *,
-    *:before,
-    *:after {
-      /* rtl not supported ATM */
-      direction: ltr;
-    }
-    .o-separator {
-      border-bottom: ${MENU_SEPARATOR_BORDER_WIDTH}px solid ${SEPARATOR_COLOR};
-      margin-top: ${MENU_SEPARATOR_PADDING}px;
-      margin-bottom: ${MENU_SEPARATOR_PADDING}px;
-    }
-    .o-hoverable-button {
-      border-radius: 2px;
-      cursor: pointer;
-      .o-icon {
-        color: ${TEXT_BODY};
-      }
-      &:not(.o-disabled):not(.active):hover {
-        background-color: ${BUTTON_HOVER_BG};
-        color: ${BUTTON_HOVER_TEXT_COLOR};
-        .o-icon {
-          color: ${BUTTON_HOVER_TEXT_COLOR};
-        }
-      }
-      &.active {
-        background-color: ${BUTTON_ACTIVE_BG};
-        color: ${BUTTON_ACTIVE_TEXT_COLOR};
-        .o-icon {
-          color: ${BUTTON_ACTIVE_TEXT_COLOR};
-        }
-      }
-    }
-
-    .o-grid-container {
-      display: grid;
-      background-color: ${HEADER_GROUPING_BACKGROUND_COLOR};
-
-      .o-top-left {
-        border: 1px solid ${GRID_BORDER_COLOR};
-        margin-bottom: -1px;
-        margin-right: -1px;
-      }
-
-      .o-column-groups {
-        grid-column-start: 2;
-        border-top: 1px solid ${GRID_BORDER_COLOR};
-      }
-
-      .o-row-groups {
-        grid-row-start: 2;
-      }
-
-      .o-group-grid {
-        border-top: 1px solid ${GRID_BORDER_COLOR};
-        border-left: 1px solid ${GRID_BORDER_COLOR};
-      }
-    }
-
-    .o-input {
-      min-width: 0px;
-      padding: 1px 0;
-      width: 100%;
-      outline: none;
-      border-color: ${GRAY_300};
-      color: ${GRAY_900};
-
-      &::placeholder {
-        opacity: 0.5;
-      }
-      &:focus {
-        border-color: ${ACTION_COLOR};
-      }
-    }
-
-    select.o-input {
-      cursor: pointer;
-      border-width: 0 0 1px 0;
-      padding: 1px 6px 1px 0px;
-
-      appearance: none;
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      background: transparent url("data:image/svg+xml,${encodeURIComponent(CARET_DOWN_SVG)}")
-        no-repeat right center;
-      text-overflow: ellipsis;
-
-      &:disabled {
-        color: ${DISABLED_TEXT_COLOR};
-        opacity: 0.4;
-        cursor: default;
-      }
-    }
-
-    .o-input[type="text"] {
-      border-width: 0 0 1px 0;
-    }
-
-    .o-input[type="number"],
-    .o-number-input {
-      border-width: 0 0 1px 0;
-      /* Remove number input arrows */
-      appearance: textfield;
-      &::-webkit-outer-spin-button,
-      &::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-      }
-    }
-  }
-
-  .o-two-columns {
-    grid-column: 1 / 3;
-  }
-
-  .o-text-icon {
-    vertical-align: middle;
-  }
-`;
-  // -----------------------------------------------------------------------------
-  // GRID STYLE
-  // -----------------------------------------------------------------------------
-  css /* scss */ `
-  .o-grid {
-    position: relative;
-    overflow: hidden;
-    background-color: ${BACKGROUND_GRAY_COLOR};
-    &:focus {
-      outline: none;
-    }
-
-    > canvas {
-      box-sizing: content-box;
-      border-bottom: 1px solid #e2e3e3;
-      border-right: 1px solid #e2e3e3;
-    }
-
-    .o-grid-overlay {
-      position: absolute;
-      outline: none;
-    }
-  }
-
-  .o-button {
-    border: 1px solid;
-    border-radius: 4px;
-    font-weight: 500;
-    font-size: 14px;
-    height: 32px;
-    line-height: 16px;
-    flex-grow: 1;
-    background-color: ${BUTTON_BG};
-    border: 1px solid ${GRAY_200};
-    color: ${TEXT_BODY};
-
-    &:disabled {
-      color: ${DISABLED_TEXT_COLOR};
-    }
-
-    &.primary {
-      background-color: ${PRIMARY_BUTTON_BG};
-      border-color: ${PRIMARY_BUTTON_BG};
-      color: #fff;
-      &:hover:enabled {
-        color: #fff;
-        background-color: ${PRIMARY_BUTTON_HOVER_BG};
-      }
-      &:active:enabled {
-        background-color: ${PRIMARY_BUTTON_ACTIVE_BG};
-        color: ${PRIMARY_BUTTON_BG};
-      }
-      &.o-disabled,
-      &:disabled {
-        opacity: 0.5;
-      }
-    }
-
-    &:hover:enabled {
-      color: ${BUTTON_HOVER_TEXT_COLOR};
-      background-color: ${BUTTON_HOVER_BG};
-    }
-    &:active:enabled {
-      color: ${BUTTON_ACTIVE_TEXT_COLOR};
-      background-color: ${BUTTON_ACTIVE_BG};
-    }
-
-    &.o-disabled,
-    &:disabled {
-      opacity: 0.8;
-    }
-
-    &.o-button-danger:hover {
-      color: #ffffff;
-      background: ${ALERT_DANGER_BORDER};
-    }
-  }
-
-  .o-button-link {
-    cursor: pointer;
-    text-decoration: none;
-    color: ${ACTION_COLOR};
-    font-weight: 500;
-    &:hover,
-    &:active {
-      color: ${ACTION_COLOR_HOVER};
-    }
-  }
-
-  .o-button-icon {
-    cursor: pointer;
-    color: ${TEXT_BODY_MUTED};
-    font-weight: 500;
-    &:hover,
-    &:active {
-      color: ${TEXT_BODY};
-    }
-  }
-
-  .o-spreadsheet-bottombar-wrapper {
-    z-index: ${ComponentsImportance.ScrollBar + 1};
-  }
-`;
   class Spreadsheet extends owl.Component {
       static template = "o-spreadsheet-Spreadsheet";
       static props = {
@@ -88519,9 +85737,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = tokenize;
 
 
-  __info__.version = "19.1.0-alpha.1";
-  __info__.date = "2025-09-12T13:33:41.605Z";
-  __info__.hash = "d3e4e7b";
+  __info__.version = "19.1.0-alpha.3";
+  __info__.date = "2025-09-23T12:37:52.238Z";
+  __info__.hash = "ce2b07a";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);