@odoo/o-spreadsheet 17.1.0-alpha.6 → 17.1.0

package/dist/o-spreadsheet.esm.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 17.1.0-alpha.6
- * @date 2024-01-04T12:22:45.921Z
- * @hash 56dbdc9
+ * @version 17.1.0
+ * @date 2024-01-16T07:47:15.054Z
+ * @hash 87253c7
  */
 
 import { Component, useRef, onMounted, useEffect, onWillPatch, useState, onWillUpdateProps, onPatched, useComponent, useExternalListener, onWillUnmount, onWillStart, xml, useChildSubEnv, useSubEnv, markRaw } from '@odoo/owl';
@@ -478,7 +478,7 @@ function isBoolean(str) {
     const upperCased = str.toUpperCase();
     return upperCased === "TRUE" || upperCased === "FALSE";
 }
-const MARKDOWN_LINK_REGEX = /^\[([^\[]+)\]\((.+)\)$/;
+const MARKDOWN_LINK_REGEX = /^\[(.+)\]\((.+)\)$/;
 //link must start with http or https
 //https://stackoverflow.com/a/3809435/4760614
 const WEB_LINK_REGEX = /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$/;
@@ -1200,16 +1200,84 @@ function toXC(col, row, rangePart = { colFixed: false, rowFixed: false }) {
 // -----------------------------------------------------------------------------
 // Date Type
 // -----------------------------------------------------------------------------
+/**
+ * A DateTime object that can be used to manipulate spreadsheet dates.
+ * Conceptually, a spreadsheet date is simply a number with a date format,
+ * and it is timezone-agnostic.
+ * This DateTime object consistently uses UTC time to represent a naive date and time.
+ */
+class DateTime {
+    jsDate;
+    constructor(year, month, day, hours = 0, minutes = 0, seconds = 0) {
+        this.jsDate = new Date(Date.UTC(year, month, day, hours, minutes, seconds, 0));
+    }
+    static fromTimestamp(timestamp) {
+        const date = new Date(timestamp);
+        return new DateTime(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
+    }
+    static now() {
+        const now = new Date();
+        return new DateTime(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), now.getMinutes(), now.getSeconds());
+    }
+    toString() {
+        return this.jsDate.toString();
+    }
+    toLocaleDateString() {
+        return this.jsDate.toLocaleDateString();
+    }
+    getTime() {
+        return this.jsDate.getTime();
+    }
+    getFullYear() {
+        return this.jsDate.getUTCFullYear();
+    }
+    getMonth() {
+        return this.jsDate.getUTCMonth();
+    }
+    getDate() {
+        return this.jsDate.getUTCDate();
+    }
+    getDay() {
+        return this.jsDate.getUTCDay();
+    }
+    getHours() {
+        return this.jsDate.getUTCHours();
+    }
+    getMinutes() {
+        return this.jsDate.getUTCMinutes();
+    }
+    getSeconds() {
+        return this.jsDate.getUTCSeconds();
+    }
+    setFullYear(year) {
+        return this.jsDate.setUTCFullYear(year);
+    }
+    setMonth(month) {
+        return this.jsDate.setUTCMonth(month);
+    }
+    setDate(date) {
+        return this.jsDate.setUTCDate(date);
+    }
+    setHours(hours) {
+        return this.jsDate.setUTCHours(hours);
+    }
+    setMinutes(minutes) {
+        return this.jsDate.setUTCMinutes(minutes);
+    }
+    setSeconds(seconds) {
+        return this.jsDate.setUTCSeconds(seconds);
+    }
+}
 // -----------------------------------------------------------------------------
 // Parsing
 // -----------------------------------------------------------------------------
-const INITIAL_1900_DAY = new Date(1899, 11, 30);
+const INITIAL_1900_DAY = new DateTime(1899, 11, 30);
 const MS_PER_DAY = 24 * 60 * 60 * 1000;
 const CURRENT_MILLENIAL = 2000; // note: don't forget to update this in 2999
-const CURRENT_YEAR = new Date().getFullYear();
-const CURRENT_MONTH = new Date().getMonth();
-const INITIAL_JS_DAY = new Date(0);
-const DATE_JS_1900_OFFSET = INITIAL_JS_DAY - INITIAL_1900_DAY;
+const CURRENT_YEAR = DateTime.now().getFullYear();
+const CURRENT_MONTH = DateTime.now().getMonth();
+const INITIAL_JS_DAY = DateTime.fromTimestamp(0);
+const DATE_JS_1900_OFFSET = INITIAL_JS_DAY.getTime() - INITIAL_1900_DAY.getTime();
 const mdyDateRegexp = /^\d{1,2}(\/|-|\s)\d{1,2}((\/|-|\s)\d{1,4})?$/;
 const ymdDateRegexp = /^\d{3,4}(\/|-|\s)\d{1,2}(\/|-|\s)\d{1,2}$/;
 const dateSeparatorsRegex = /\/|-|\s/;
@@ -1270,7 +1338,7 @@ function _parseDateTime(str, locale) {
         return {
             value: date.value + time.value,
             format: date.format + " " + (time.format === "hhhh:mm:ss" ? "hh:mm:ss" : time.format),
-            jsDate: new Date(date.jsDate.getFullYear() + time.jsDate.getFullYear() - 1899, date.jsDate.getMonth() + time.jsDate.getMonth() - 11, date.jsDate.getDate() + time.jsDate.getDate() - 30, date.jsDate.getHours() + time.jsDate.getHours(), date.jsDate.getMinutes() + time.jsDate.getMinutes(), date.jsDate.getSeconds() + time.jsDate.getSeconds()),
+            jsDate: new DateTime(date.jsDate.getFullYear() + time.jsDate.getFullYear() - 1899, date.jsDate.getMonth() + time.jsDate.getMonth() - 11, date.jsDate.getDate() + time.jsDate.getDate() - 30, date.jsDate.getHours() + time.jsDate.getHours(), date.jsDate.getMinutes() + time.jsDate.getMinutes(), date.jsDate.getSeconds() + time.jsDate.getSeconds()),
         };
     }
     return date || time;
@@ -1346,12 +1414,12 @@ function parseDate(parts, separator) {
     // month + 1: months are 0-indexed in JS
     const leadingZero = (monthStr?.length === 2 && month + 1 < 10) || (dayStr?.length === 2 && day < 10);
     const fullYear = yearStr?.length !== 2;
-    const jsDate = new Date(year, month, day);
+    const jsDate = new DateTime(year, month, day);
     if (jsDate.getMonth() !== month || jsDate.getDate() !== day) {
         // invalid date
         return null;
     }
-    const delta = jsDate - INITIAL_1900_DAY;
+    const delta = jsDate.getTime() - INITIAL_1900_DAY.getTime();
     const format = getFormatFromDateParts(parts, separator, leadingZero, fullYear);
     return {
         value: Math.round(delta / MS_PER_DAY),
@@ -1442,7 +1510,7 @@ function parseTime(str) {
         if (hours >= 24) {
             format = "hhhh:mm:ss";
         }
-        const jsDate = new Date(1899, 11, 30, hours, minutes, seconds);
+        const jsDate = new DateTime(1899, 11, 30, hours, minutes, seconds);
         return {
             value: hours / 24 + minutes / 1440 + seconds / 86400,
             format: format,
@@ -1456,7 +1524,7 @@ function parseTime(str) {
 // -----------------------------------------------------------------------------
 function numberToJsDate(value) {
     const truncValue = Math.trunc(value);
-    let date = new Date(truncValue * MS_PER_DAY - DATE_JS_1900_OFFSET);
+    let date = DateTime.fromTimestamp(truncValue * MS_PER_DAY - DATE_JS_1900_OFFSET);
     let time = value - truncValue;
     time = time < 0 ? 1 + time : time;
     const hours = Math.round(time * 24);
@@ -1476,7 +1544,7 @@ function jsDateToNumber(date) {
 }
 /** Return the number of days in the current month of the given date */
 function getDaysInMonth(date) {
-    return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+    return new DateTime(date.getFullYear(), date.getMonth() + 1, 0).getDate();
 }
 function isLastDayOfMonth(date) {
     return getDaysInMonth(date) === date.getDate();
@@ -1494,7 +1562,7 @@ function addMonthsToDate(date, months, keepEndOfMonth) {
     const yStart = date.getFullYear();
     const mStart = date.getMonth();
     const dStart = date.getDate();
-    const jsDate = new Date(yStart, mStart + months);
+    const jsDate = new DateTime(yStart, mStart + months, 1);
     if (keepEndOfMonth && dStart === getDaysInMonth(date)) {
         jsDate.setDate(getDaysInMonth(jsDate));
     }
@@ -1805,12 +1873,8 @@ const invalidateEvaluationCommands = new Set([
     "ADD_MERGE",
     "UPDATE_LOCALE",
 ]);
-const invalidateDependenciesCommands = new Set([
-    ...invalidateEvaluationCommands,
-    "MOVE_RANGES",
-]);
+const invalidateDependenciesCommands = new Set(["MOVE_RANGES"]);
 const invalidateCFEvaluationCommands = new Set([
-    ...invalidateEvaluationCommands,
     "DUPLICATE_SHEET",
     "EVALUATE_CELLS",
     "ADD_CONDITIONAL_FORMAT",
@@ -2719,20 +2783,20 @@ function flattenRowFirst(items, callback) {
 }
 
 function toCriterionDateNumber(dateValue) {
-    const today = new Date();
+    const today = DateTime.now();
     switch (dateValue) {
         case "today":
             return jsDateToNumber(today);
         case "yesterday":
-            return jsDateToNumber(new Date(today.setDate(today.getDate() - 1)));
+            return jsDateToNumber(DateTime.fromTimestamp(today.setDate(today.getDate() - 1)));
         case "tomorrow":
-            return jsDateToNumber(new Date(today.setDate(today.getDate() + 1)));
+            return jsDateToNumber(DateTime.fromTimestamp(today.setDate(today.getDate() + 1)));
         case "lastWeek":
-            return jsDateToNumber(new Date(today.setDate(today.getDate() - 7)));
+            return jsDateToNumber(DateTime.fromTimestamp(today.setDate(today.getDate() - 7)));
         case "lastMonth":
-            return jsDateToNumber(new Date(today.setMonth(today.getMonth() - 1)));
+            return jsDateToNumber(DateTime.fromTimestamp(today.setMonth(today.getMonth() - 1)));
         case "lastYear":
-            return jsDateToNumber(new Date(today.setFullYear(today.getFullYear() - 1)));
+            return jsDateToNumber(DateTime.fromTimestamp(today.setFullYear(today.getFullYear() - 1)));
     }
 }
 /** Get all the dates values of a criterion converted to numbers, converting date values such as "today" to actual dates  */
@@ -3093,7 +3157,7 @@ function formatJSTime(jsDate, format) {
         .map((p) => {
         switch (p) {
             case "hhhh":
-                const helapsedHours = Math.floor((jsDate.getTime() - INITIAL_1900_DAY) / (60 * 60 * 1000));
+                const helapsedHours = Math.floor((jsDate.getTime() - INITIAL_1900_DAY.getTime()) / (60 * 60 * 1000));
                 return helapsedHours.toString();
             case "hh":
                 return hours.toString().padStart(2, "0");
@@ -4661,6 +4725,9 @@ function transformRangeData(range, executed) {
 
 class ChartJsComponent extends Component {
     static template = "o-spreadsheet-ChartJsComponent";
+    static props = {
+        figure: Object,
+    };
     canvas = useRef("graphContainer");
     chart;
     get background() {
@@ -4713,9 +4780,6 @@ class ChartJsComponent extends Component {
         this.chart.update("active");
     }
 }
-ChartJsComponent.props = {
-    figure: Object,
-};
 
 /**
  * AbstractChart is the class from which every Chart should inherit.
@@ -5566,6 +5630,9 @@ class KeyValueElement extends ScorecardScalableElement {
 
 class ScorecardChart extends Component {
     static template = "o-spreadsheet-ScorecardChart";
+    static props = {
+        figure: Object,
+    };
     canvas = useRef("chartContainer");
     get runtime() {
         return this.env.model.getters.getChartRuntime(this.props.figure.id);
@@ -5583,9 +5650,6 @@ class ScorecardChart extends Component {
         drawScoreChart(config, canvas);
     }
 }
-ScorecardChart.props = {
-    figure: Object,
-};
 
 /**
  * Registry
@@ -6264,11 +6328,11 @@ css /* scss */ `
 class ErrorToolTip extends Component {
     static maxSize = { maxHeight: ERROR_TOOLTIP_MAX_HEIGHT };
     static template = "o-spreadsheet-ErrorToolTip";
+    static props = {
+        errors: Array,
+        onClosed: { type: Function, optional: true },
+    };
 }
-ErrorToolTip.props = {
-    errors: Array,
-    onClosed: { type: Function, optional: true },
-};
 const ErrorToolTipPopoverBuilder = {
     onHover: (position, getters) => {
         const cell = getters.getEvaluatedCell(position);
@@ -6310,6 +6374,14 @@ css /*SCSS*/ `
 `;
 class FilterMenuValueItem extends Component {
     static template = "o-spreadsheet-FilterMenuValueItem";
+    static props = {
+        value: String,
+        isChecked: Boolean,
+        isSelected: Boolean,
+        onMouseMove: Function,
+        onClick: Function,
+        scrolledTo: { type: String, optional: true },
+    };
     itemRef = useRef("menuValueItem");
     setup() {
         onWillPatch(() => {
@@ -6327,17 +6399,9 @@ class FilterMenuValueItem extends Component {
         });
     }
 }
-FilterMenuValueItem.props = {
-    value: String,
-    isChecked: Boolean,
-    isSelected: Boolean,
-    onMouseMove: Function,
-    onClick: Function,
-    scrolledTo: { type: String, optional: true },
-};
 
 const FILTER_MENU_HEIGHT = 295;
-const CSS$2 = css /* scss */ `
+const CSS = css /* scss */ `
   .o-filter-menu {
     box-sizing: border-box;
     padding: 8px 16px;
@@ -6433,9 +6497,12 @@ const CSS$2 = css /* scss */ `
   }
 `;
 class FilterMenu extends Component {
-    static size = { width: MENU_WIDTH, height: FILTER_MENU_HEIGHT };
     static template = "o-spreadsheet-FilterMenu";
-    static style = CSS$2;
+    static props = {
+        filterPosition: Object,
+        onClosed: { type: Function, optional: true },
+    };
+    static style = CSS;
     static components = { FilterMenuValueItem };
     state = useState({
         values: [],
@@ -6587,10 +6654,6 @@ class FilterMenu extends Component {
         this.props.onClosed?.();
     }
 }
-FilterMenu.props = {
-    filterPosition: Object,
-    onClosed: { type: Function, optional: true },
-};
 const FilterMenuPopoverBuilder = {
     onOpen: (position, getters) => {
         return {
@@ -6792,6 +6855,19 @@ css /* scss */ `
 `;
 class Popover extends Component {
     static template = "o-spreadsheet-Popover";
+    static props = {
+        anchorRect: Object,
+        containerRect: { type: Object, optional: true },
+        positioning: { type: String, optional: true },
+        maxWidth: { type: Number, optional: true },
+        maxHeight: { type: Number, optional: true },
+        verticalOffset: { type: Number, optional: true },
+        onMouseWheel: { type: Function, optional: true },
+        onPopoverHidden: { type: Function, optional: true },
+        onPopoverMoved: { type: Function, optional: true },
+        zIndex: { type: Number, optional: true },
+        slots: Object,
+    };
     static defaultProps = {
         positioning: "BottomLeft",
         verticalOffset: 0,
@@ -6848,19 +6924,6 @@ class Popover extends Component {
         });
     }
 }
-Popover.props = {
-    anchorRect: Object,
-    containerRect: { type: Object, optional: true },
-    positioning: { type: String, optional: true },
-    maxWidth: { type: Number, optional: true },
-    maxHeight: { type: Number, optional: true },
-    verticalOffset: { type: Number, optional: true },
-    onMouseWheel: { type: Function, optional: true },
-    onPopoverHidden: { type: Function, optional: true },
-    onPopoverMoved: { type: Function, optional: true },
-    zIndex: { type: Number, optional: true },
-    slots: Object,
-};
 class PopoverPositionContext {
     anchorRect;
     containerRect;
@@ -7042,6 +7105,15 @@ css /* scss */ `
 `;
 class Menu extends Component {
     static template = "o-spreadsheet-Menu";
+    static props = {
+        position: Object,
+        menuItems: Array,
+        depth: { type: Number, optional: true },
+        maxHeight: { type: Number, optional: true },
+        onClose: Function,
+        onMenuClicked: { type: Function, optional: true },
+        menuId: { type: String, optional: true },
+    };
     static components = { Menu, Popover };
     static defaultProps = {
         depth: 1,
@@ -7198,15 +7270,6 @@ class Menu extends Component {
         }
     }
 }
-Menu.props = {
-    position: Object,
-    menuItems: Array,
-    depth: { type: Number, optional: true },
-    maxHeight: { type: Number, optional: true },
-    onClose: Function,
-    onMenuClicked: { type: Function, optional: true },
-    menuId: { type: String, optional: true },
-};
 
 const LINK_TOOLTIP_HEIGHT = 32;
 const LINK_TOOLTIP_WIDTH = 220;
@@ -7259,8 +7322,12 @@ css /* scss */ `
   }
 `;
 class LinkDisplay extends Component {
-    static components = { Menu };
     static template = "o-spreadsheet-LinkDisplay";
+    static props = {
+        cellPosition: Object,
+        onClosed: { type: Function, optional: true },
+    };
+    static components = { Menu };
     get cell() {
         const { col, row } = this.props.cellPosition;
         const sheetId = this.env.model.getters.getActiveSheetId();
@@ -7315,10 +7382,6 @@ const LinkCellPopoverBuilder = {
         };
     },
 };
-LinkDisplay.props = {
-    cellPosition: Object,
-    onClosed: { type: Function, optional: true },
-};
 
 /**
  * Tokenizer
@@ -7952,6 +8015,10 @@ css /* scss */ `
 `;
 class LinkEditor extends Component {
     static template = "o-spreadsheet-LinkEditor";
+    static props = {
+        cellPosition: Object,
+        onClosed: { type: Function, optional: true },
+    };
     static components = { Menu };
     menuItems = linkMenuRegistry.getMenuItems();
     link = useState(this.defaultState);
@@ -8049,10 +8116,6 @@ const LinkEditorPopoverBuilder = {
         };
     },
 };
-LinkEditor.props = {
-    cellPosition: Object,
-    onClosed: { type: Function, optional: true },
-};
 
 const cellPopoverRegistry = new Registry();
 cellPopoverRegistry
@@ -8335,6 +8398,7 @@ function getDefaultChartJsRuntime(chart, labels, fontColor, { format, locale })
             labels: labels.map(truncateLabel),
             datasets: [],
         },
+        platform: undefined,
         plugins: [],
     };
 }
@@ -9639,6 +9703,10 @@ css /* scss */ `
 `;
 class ChartFigure extends Component {
     static template = "o-spreadsheet-ChartFigure";
+    static props = {
+        figure: Object,
+        onFigureDeleted: Function,
+    };
     static components = {};
     onDoubleClick() {
         this.env.model.dispatch("SELECT_FIGURE", { id: this.props.figure.id });
@@ -9656,13 +9724,13 @@ class ChartFigure extends Component {
         return component;
     }
 }
-ChartFigure.props = {
-    figure: Object,
-    onFigureDeleted: Function,
-};
 
 class ImageFigure extends Component {
     static template = "o-spreadsheet-ImageFigure";
+    static props = {
+        figure: Object,
+        onFigureDeleted: Function,
+    };
     static components = {};
     // ---------------------------------------------------------------------------
     // Getters
@@ -9674,10 +9742,6 @@ class ImageFigure extends Component {
         return this.env.model.getters.getImagePath(this.figureId);
     }
 }
-ImageFigure.props = {
-    figure: Object,
-    onFigureDeleted: Function,
-};
 
 function centerFigurePosition(getters, size) {
     const { x: offsetCorrectionX, y: offsetCorrectionY } = getters.getMainViewportCoordinates();
@@ -10965,6 +11029,9 @@ function arg(definition, description = "") {
 function makeArg(str, description) {
     let parts = str.match(ARG_REGEXP);
     let name = parts[1].trim();
+    if (!name) {
+        throw new Error(`Function argument definition is missing a name: '${str}'.`);
+    }
     let types = [];
     let isOptional = false;
     let isRepeating = false;
@@ -14687,7 +14754,7 @@ const DATE = {
         if (_year < 1900) {
             _year += 1900;
         }
-        const jsDate = new Date(_year, _month - 1, _day);
+        const jsDate = new DateTime(_year, _month - 1, _day);
         const result = jsDateToRoundNumber(jsDate);
         assert(() => result >= 0, _t("The function [[FUNCTION_NAME]] result must be greater than or equal 01/01/1900."));
         return result;
@@ -14730,7 +14797,7 @@ const DATEDIF = {
                 // See: https://support.microsoft.com/en-us/office/datedif-function-25dba1a4-2812-480b-84dd-8b32a451b35c
                 let days = jsEndDate.getDate() - jsStartDate.getDate();
                 if (days < 0) {
-                    const monthBeforeEndMonth = new Date(jsEndDate.getFullYear(), jsEndDate.getMonth() - 1, 1);
+                    const monthBeforeEndMonth = new DateTime(jsEndDate.getFullYear(), jsEndDate.getMonth() - 1, 1);
                     const daysInMonthBeforeEndMonth = getDaysInMonth(monthBeforeEndMonth);
                     days = daysInMonthBeforeEndMonth - Math.abs(days);
                 }
@@ -14739,7 +14806,7 @@ const DATEDIF = {
                 if (areTwoDatesWithinOneYear(_startDate, _endDate)) {
                     return getTimeDifferenceInWholeDays(jsStartDate, jsEndDate);
                 }
-                const endDateWithinOneYear = new Date(jsStartDate.getFullYear(), jsEndDate.getMonth(), jsEndDate.getDate());
+                const endDateWithinOneYear = new DateTime(jsStartDate.getFullYear(), jsEndDate.getMonth(), jsEndDate.getDate());
                 let days = getTimeDifferenceInWholeDays(jsStartDate, endDateWithinOneYear);
                 if (days < 0) {
                     endDateWithinOneYear.setFullYear(jsStartDate.getFullYear() + 1);
@@ -14856,7 +14923,7 @@ const EOMONTH = {
         const _months = Math.trunc(toNumber(months, this.locale));
         const yStart = _startDate.getFullYear();
         const mStart = _startDate.getMonth();
-        const jsDate = new Date(yStart, mStart + _months + 1, 0);
+        const jsDate = new DateTime(yStart, mStart + _months + 1, 0);
         return jsDateToRoundNumber(jsDate);
     },
     isExported: true,
@@ -14893,17 +14960,17 @@ const ISOWEEKNUM = {
         // The first week of the year is the week that contains the first
         // Thursday of the year.
         let firstThursday = 1;
-        while (new Date(y, 0, firstThursday).getDay() !== 4) {
+        while (new DateTime(y, 0, firstThursday).getDay() !== 4) {
             firstThursday += 1;
         }
-        const firstDayOfFirstWeek = new Date(y, 0, firstThursday - 3);
+        const firstDayOfFirstWeek = new DateTime(y, 0, firstThursday - 3);
         // The last week of the year is the week that contains the last Thursday of
         // the year.
         let lastThursday = 31;
-        while (new Date(y, 11, lastThursday).getDay() !== 4) {
+        while (new DateTime(y, 11, lastThursday).getDay() !== 4) {
             lastThursday -= 1;
         }
-        const lastDayOfLastWeek = new Date(y, 11, lastThursday + 3);
+        const lastDayOfLastWeek = new DateTime(y, 11, lastThursday + 3);
         // B - If our date > lastDayOfLastWeek then it's in the weeks of the year after
         // If our date < firstDayOfFirstWeek then it's in the weeks of the year before
         let offsetYear;
@@ -14929,17 +14996,17 @@ const ISOWEEKNUM = {
             case 1:
                 // firstDay is the 1st day of the 1st week of the year after
                 // firstDay = lastDayOfLastWeek + 1 Day
-                firstDay = new Date(y, 11, lastThursday + 3 + 1);
+                firstDay = new DateTime(y, 11, lastThursday + 3 + 1);
                 break;
             case -1:
                 // firstDay is the 1st day of the 1st week of the previous year.
                 // The first week of the previous year is the week that contains the
                 // first Thursday of the previous year.
                 let firstThursdayPreviousYear = 1;
-                while (new Date(y - 1, 0, firstThursdayPreviousYear).getDay() !== 4) {
+                while (new DateTime(y - 1, 0, firstThursdayPreviousYear).getDay() !== 4) {
                     firstThursdayPreviousYear += 1;
                 }
-                firstDay = new Date(y - 1, 0, firstThursdayPreviousYear - 3);
+                firstDay = new DateTime(y - 1, 0, firstThursdayPreviousYear - 3);
                 break;
         }
         const diff = (_date.getTime() - firstDay.getTime()) / MS_PER_DAY;
@@ -15074,8 +15141,8 @@ const NETWORKDAYS_INTL = {
             });
         }
         const invertDate = _startDate.getTime() > _endDate.getTime();
-        const stopDate = new Date((invertDate ? _startDate : _endDate).getTime());
-        let stepDate = new Date((invertDate ? _endDate : _startDate).getTime());
+        const stopDate = DateTime.fromTimestamp((invertDate ? _startDate : _endDate).getTime());
+        let stepDate = DateTime.fromTimestamp((invertDate ? _endDate : _startDate).getTime());
         const timeStopDate = stopDate.getTime();
         let timeStepDate = stepDate.getTime();
         let netWorkingDay = 0;
@@ -15101,8 +15168,7 @@ const NOW = {
         return getDateTimeFormat(this.locale);
     },
     compute: function () {
-        let today = new Date();
-        today.setMilliseconds(0);
+        let today = DateTime.now();
         const delta = today.getTime() - INITIAL_1900_DAY.getTime();
         const time = today.getHours() / 24 + today.getMinutes() / 1440 + today.getSeconds() / 86400;
         return Math.floor(delta / MS_PER_DAY) + time;
@@ -15176,8 +15242,8 @@ const TODAY = {
         return this.locale.dateFormat;
     },
     compute: function () {
-        const today = new Date();
-        const jsDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+        const today = DateTime.now();
+        const jsDate = new DateTime(today.getFullYear(), today.getMonth(), today.getDate());
         return jsDateToRoundNumber(jsDate);
     },
     isExported: true,
@@ -15232,10 +15298,10 @@ const WEEKNUM = {
         }
         const y = _date.getFullYear();
         let dayStart = 1;
-        let startDayOfFirstWeek = new Date(y, 0, dayStart);
+        let startDayOfFirstWeek = new DateTime(y, 0, dayStart);
         while (startDayOfFirstWeek.getDay() !== startDayOfWeek) {
             dayStart += 1;
-            startDayOfFirstWeek = new Date(y, 0, dayStart);
+            startDayOfFirstWeek = new DateTime(y, 0, dayStart);
         }
         const dif = (_date.getTime() - startDayOfFirstWeek.getTime()) / MS_PER_DAY;
         if (dif < 0) {
@@ -15293,7 +15359,7 @@ const WORKDAY_INTL = {
                 timesHoliday.add(holiday.getTime());
             });
         }
-        let stepDate = new Date(_startDate.getTime());
+        let stepDate = DateTime.fromTimestamp(_startDate.getTime());
         let timeStepDate = stepDate.getTime();
         const unitDay = Math.sign(_numDays);
         let stepDay = Math.abs(_numDays);
@@ -15357,7 +15423,7 @@ const MONTH_START = {
         const _startDate = toJsDate(date, this.locale);
         const yStart = _startDate.getFullYear();
         const mStart = _startDate.getMonth();
-        const jsDate = new Date(yStart, mStart, 1);
+        const jsDate = new DateTime(yStart, mStart, 1);
         return jsDateToRoundNumber(jsDate);
     },
 };
@@ -15399,7 +15465,7 @@ const QUARTER_START = {
     compute: function (date) {
         const quarter = QUARTER.compute.bind(this)(date);
         const year = YEAR.compute.bind(this)(date);
-        const jsDate = new Date(year, (quarter - 1) * 3, 1);
+        const jsDate = new DateTime(year, (quarter - 1) * 3, 1);
         return jsDateToRoundNumber(jsDate);
     },
 };
@@ -15416,7 +15482,7 @@ const QUARTER_END = {
     compute: function (date) {
         const quarter = QUARTER.compute.bind(this)(date);
         const year = YEAR.compute.bind(this)(date);
-        const jsDate = new Date(year, quarter * 3, 0);
+        const jsDate = new DateTime(year, quarter * 3, 0);
         return jsDateToRoundNumber(jsDate);
     },
 };
@@ -15432,7 +15498,7 @@ const YEAR_START = {
     },
     compute: function (date) {
         const year = YEAR.compute.bind(this)(date);
-        const jsDate = new Date(year, 0, 1);
+        const jsDate = new DateTime(year, 0, 1);
         return jsDateToRoundNumber(jsDate);
     },
 };
@@ -15448,7 +15514,7 @@ const YEAR_END = {
     },
     compute: function (date) {
         const year = YEAR.compute.bind(this)(date);
-        const jsDate = new Date(year + 1, 0, 0);
+        const jsDate = new DateTime(year + 1, 0, 0);
         return jsDateToRoundNumber(jsDate);
     },
 };
@@ -15496,8 +15562,8 @@ const DEFAULT_DELTA_ARG = 0;
 const DELTA = {
     description: _t("Compare two numeric values, returning 1 if they're equal."),
     args: [
-        arg(" (number)", _t("The first number to compare.")),
-        arg(` (number, default=${DEFAULT_DELTA_ARG})`, _t("The second number to compare.")),
+        arg("number1 (number)", _t("The first number to compare.")),
+        arg(`number2 (number, default=${DEFAULT_DELTA_ARG})`, _t("The second number to compare.")),
     ],
     returns: ["NUMBER"],
     compute: function (number1, number2 = DEFAULT_DELTA_ARG) {
@@ -15924,7 +15990,7 @@ function assertDeprecationFactorStrictlyPositive(factor) {
 function assertSettlementLessThanOneYearBeforeMaturity(settlement, maturity, locale) {
     const startDate = toJsDate(settlement, locale);
     const endDate = toJsDate(maturity, locale);
-    const startDatePlusOneYear = new Date(startDate);
+    const startDatePlusOneYear = toJsDate(settlement, locale);
     startDatePlusOneYear.setFullYear(startDate.getFullYear() + 1);
     assert(() => endDate.getTime() <= startDatePlusOneYear.getTime(), _t("The settlement date (%s) must at most one year after the maturity date (%s).", settlement.toString(), maturity.toString()));
 }
@@ -16059,7 +16125,7 @@ const AMORLINC = {
         arg("salvage (number)", _t("The value of the asset at the end of depreciation.")),
         arg("period (number)", _t("The single period within life for which to calculate depreciation.")),
         arg("rate (number)", _t("The deprecation rate.")),
-        arg(" (number, optional)", _t("An indicator of what day count method to use.")),
+        arg("day_count_convention (number, optional)", _t("An indicator of what day count method to use.")),
     ],
     returns: ["NUMBER"],
     compute: function (cost, purchaseDate, firstPeriodEnd, salvage, period, rate, dayCountConvention = DEFAULT_DAY_COUNT_CONVENTION) {
@@ -19231,8 +19297,8 @@ const MID = {
     description: _t("A segment of a string."),
     args: [
         arg("text (string)", _t("The string to extract a segment from.")),
-        arg(" (number)", _t("The index from the left of string from which to begin extracting. The first character in string has the index 1.")),
-        arg(" (number)", _t("The length of the segment to extract.")),
+        arg("starting_at (number)", _t("The index from the left of string from which to begin extracting. The first character in string has the index 1.")),
+        arg("extract_length (number)", _t("The length of the segment to extract.")),
     ],
     returns: ["STRING"],
     compute: function (text, starting_at, extract_length) {
@@ -21515,6 +21581,15 @@ css /* scss */ `
  */
 class SelectionInput extends Component {
     static template = "o-spreadsheet-SelectionInput";
+    static props = {
+        ranges: Function,
+        hasSingleRange: { type: Boolean, optional: true },
+        required: { type: Boolean, optional: true },
+        isInvalid: { type: Boolean, optional: true },
+        class: { type: String, optional: true },
+        onSelectionChanged: { type: Function, optional: true },
+        onSelectionConfirmed: { type: Function, optional: true },
+    };
     id = uuidGenerator$1.uuidv4();
     previousRanges = this.props.ranges() || [];
     originSheet = this.env.model.getters.getActiveSheetId();
@@ -21677,15 +21752,6 @@ class SelectionInput extends Component {
         this.env.model.dispatch("UNFOCUS_SELECTION_INPUT");
     }
 }
-SelectionInput.props = {
-    ranges: Function,
-    hasSingleRange: { type: Boolean, optional: true },
-    required: { type: Boolean, optional: true },
-    isInvalid: { type: Boolean, optional: true },
-    class: { type: String, optional: true },
-    onSelectionChanged: { type: Function, optional: true },
-    onSelectionConfirmed: { type: Function, optional: true },
-};
 
 css /* scss */ `
   .o-validation-error,
@@ -21701,6 +21767,10 @@ css /* scss */ `
 `;
 class ValidationMessages extends Component {
     static template = "o-spreadsheet-ValidationMessages";
+    static props = {
+        messages: Array,
+        msgType: String,
+    };
     get divClasses() {
         if (this.props.msgType === "warning") {
             return "o-validation-warning text-warning";
@@ -21708,14 +21778,96 @@ class ValidationMessages extends Component {
         return "o-validation-error text-danger";
     }
 }
-ValidationMessages.props = {
-    messages: Array,
-    msgType: String,
-};
+
+css /* scss */ `
+  .o-checkbox {
+    display: flex;
+    justify-items: center;
+    input {
+      margin-right: 5px;
+    }
+  }
+`;
+class Checkbox extends Component {
+    static template = "o-spreadsheet.Checkbox";
+    static props = {
+        label: { type: String, optional: true },
+        value: { type: Boolean, optional: true },
+        className: { type: String, optional: true },
+        name: { type: String, optional: true },
+        onChange: Function,
+    };
+    static defaultProps = { value: false };
+    onChange(ev) {
+        const value = ev.target.checked;
+        this.props.onChange(value);
+    }
+}
+
+class Section extends Component {
+    static template = "o_spreadsheet.Section";
+    static props = {
+        class: { type: String, optional: true },
+        slots: Object,
+    };
+}
+
+class ChartDataSeries extends Component {
+    static template = "o-spreadsheet.ChartDataSeries";
+    static components = { SelectionInput, Section };
+    static props = {
+        ranges: Function,
+        hasSingleRange: { type: Boolean, optional: true },
+        onSelectionChanged: Function,
+        onSelectionConfirmed: Function,
+    };
+    get title() {
+        return this.props.hasSingleRange ? _t("Data range") : _t("Data series");
+    }
+}
+
+class ChartErrorSection extends Component {
+    static template = "o-spreadsheet.ChartErrorSection";
+    static components = { Section, ValidationMessages };
+    static props = { messages: { type: Array, element: String } };
+}
+
+class ChartLabelRange extends Component {
+    static template = "o-spreadsheet.ChartLabelRange";
+    static components = { SelectionInput, Checkbox, Section };
+    static props = {
+        title: { type: String, optional: true },
+        range: Function,
+        isInvalid: Boolean,
+        required: { type: Boolean, optional: true },
+        onSelectionChanged: Function,
+        onSelectionConfirmed: Function,
+        options: { type: Array, optional: true },
+    };
+    static defaultProps = {
+        title: _t("Categories / Labels"),
+        options: [],
+        required: false,
+    };
+}
 
 class LineBarPieConfigPanel extends Component {
     static template = "o-spreadsheet-LineBarPieConfigPanel";
-    static components = { SelectionInput, ValidationMessages };
+    static components = {
+        SelectionInput,
+        ValidationMessages,
+        ChartDataSeries,
+        ChartLabelRange,
+        Section,
+        Checkbox,
+        ChartErrorSection,
+    };
+    static props = {
+        figureId: String,
+        definition: Object,
+        updateChart: Function,
+        canUpdateChart: Function,
+    };
     state = useState({
         datasetDispatchResult: undefined,
         labelsDispatchResult: undefined,
@@ -21739,9 +21891,22 @@ class LineBarPieConfigPanel extends Component {
     get isLabelInvalid() {
         return !!this.state.labelsDispatchResult?.isCancelledBecause("InvalidLabelRange" /* CommandResult.InvalidLabelRange */);
     }
-    onUpdateDataSetsHaveTitle(ev) {
+    get dataSetsHaveTitleLabel() {
+        return _t("Use row %s as headers", this.calculateHeaderPosition() || "");
+    }
+    getLabelRangeOptions() {
+        return [
+            {
+                name: "aggregated",
+                label: _t("Aggregate"),
+                value: this.props.definition.aggregated,
+                onChange: this.onUpdateAggregated.bind(this),
+            },
+        ];
+    }
+    onUpdateDataSetsHaveTitle(dataSetsHaveTitle) {
         this.props.updateChart(this.props.figureId, {
-            dataSetsHaveTitle: ev.target.checked,
+            dataSetsHaveTitle,
         });
     }
     /**
@@ -21781,9 +21946,9 @@ class LineBarPieConfigPanel extends Component {
     getLabelRange() {
         return this.labelRange || "";
     }
-    onUpdateAggregated(ev) {
+    onUpdateAggregated(aggregated) {
         this.props.updateChart(this.props.figureId, {
-            aggregated: ev.target.checked,
+            aggregated,
         });
     }
     calculateHeaderPosition() {
@@ -21803,23 +21968,20 @@ class LineBarPieConfigPanel extends Component {
         return undefined;
     }
 }
-LineBarPieConfigPanel.props = {
-    figureId: String,
-    definition: Object,
-    updateChart: Function,
-    canUpdateChart: Function,
-};
 
 class BarConfigPanel extends LineBarPieConfigPanel {
     static template = "o-spreadsheet-BarConfigPanel";
-    onUpdateStacked(ev) {
+    get stackedLabel() {
+        return _t("Stacked barchart");
+    }
+    onUpdateStacked(stacked) {
         this.props.updateChart(this.props.figureId, {
-            stacked: ev.target.checked,
+            stacked,
         });
     }
-    onUpdateAggregated(ev) {
+    onUpdateAggregated(aggregated) {
         this.props.updateChart(this.props.figureId, {
-            aggregated: ev.target.checked,
+            aggregated,
         });
     }
 }
@@ -22147,6 +22309,12 @@ css /* scss */ `
 `;
 class ColorPicker extends Component {
     static template = "o-spreadsheet-ColorPicker";
+    static props = {
+        onColorPicked: Function,
+        currentColor: { type: String, optional: true },
+        maxHeight: { type: Number, optional: true },
+        anchorRect: Object,
+    };
     static defaultProps = { currentColor: "" };
     static components = { Popover };
     COLORS = COLOR_PICKER_DEFAULTS;
@@ -22282,12 +22450,6 @@ class ColorPicker extends Component {
         return isSameColor(color1, color2);
     }
 }
-ColorPicker.props = {
-    onColorPicked: Function,
-    currentColor: { type: String, optional: true },
-    maxHeight: { type: Number, optional: true },
-    anchorRect: Object,
-};
 
 css /* scss */ `
   .o-color-picker-widget {
@@ -22325,6 +22487,17 @@ css /* scss */ `
 `;
 class ColorPickerWidget extends Component {
     static template = "o-spreadsheet-ColorPickerWidget";
+    static props = {
+        currentColor: { type: String, optional: true },
+        toggleColorPicker: Function,
+        showColorPicker: Boolean,
+        onColorPicked: Function,
+        icon: String,
+        title: { type: String, optional: true },
+        disabled: { type: Boolean, optional: true },
+        dropdownMaxHeight: { type: Number, optional: true },
+        class: { type: String, optional: true },
+    };
     static components = { ColorPicker };
     colorPickerButtonRef = useRef("colorPickerButton");
     get iconStyle() {
@@ -22343,44 +22516,55 @@ class ColorPickerWidget extends Component {
         };
     }
 }
-ColorPickerWidget.props = {
-    currentColor: { type: String, optional: true },
-    toggleColorPicker: Function,
-    showColorPicker: Boolean,
-    onColorPicked: Function,
-    icon: String,
-    title: { type: String, optional: true },
-    disabled: { type: Boolean, optional: true },
-    dropdownMaxHeight: { type: Number, optional: true },
-    class: { type: String, optional: true },
-};
 
-class LineBarPieDesignPanel extends Component {
-    static template = "o-spreadsheet-LineBarPieDesignPanel";
-    static components = { ColorPickerWidget };
-    state = useState({
-        title: "",
-        fillColorTool: false,
-    });
-    onClick(ev) {
-        this.state.fillColorTool = false;
-    }
+class ChartColor extends Component {
+    static template = "o-spreadsheet.ChartColor";
+    static components = { ColorPickerWidget, Section };
+    static props = {
+        currentColor: { type: String, optional: true },
+        onColorPicked: Function,
+    };
+    state;
     setup() {
-        this.state.title = _t(this.props.definition.title);
-        useExternalListener(window, "click", this.onClick);
+        this.state = useState({ pickerOpened: false });
+        useExternalListener(window, "click", this.closePicker);
     }
-    toggleColorPicker() {
-        this.state.fillColorTool = !this.state.fillColorTool;
+    closePicker() {
+        this.state.pickerOpened = false;
+    }
+    togglePicker() {
+        this.state.pickerOpened = !this.state.pickerOpened;
+    }
+}
+
+class ChartTitle extends Component {
+    static template = "o-spreadsheet.ChartTitle";
+    static components = { ColorPickerWidget, Section };
+    static props = { title: String, update: Function };
+    updateTitle(ev) {
+        this.props.update(ev.target.value);
+    }
+}
+
+class LineBarPieDesignPanel extends Component {
+    static template = "o-spreadsheet-LineBarPieDesignPanel";
+    static components = { ChartColor, ColorPickerWidget, ChartTitle, Section };
+    static props = {
+        figureId: String,
+        definition: Object,
+        updateChart: Function,
+        canUpdateChart: Function,
+    };
+    get title() {
+        return _t(this.props.definition.title);
     }
     updateBackgroundColor(color) {
         this.props.updateChart(this.props.figureId, {
             background: color,
         });
     }
-    updateTitle() {
-        this.props.updateChart(this.props.figureId, {
-            title: this.state.title,
-        });
+    updateTitle(title) {
+        this.props.updateChart(this.props.figureId, { title });
     }
     updateSelect(attr, ev) {
         this.props.updateChart(this.props.figureId, {
@@ -22388,12 +22572,6 @@ class LineBarPieDesignPanel extends Component {
         });
     }
 }
-LineBarPieDesignPanel.props = {
-    figureId: String,
-    definition: Object,
-    updateChart: Function,
-    canUpdateChart: Function,
-};
 
 class BarChartDesignPanel extends LineBarPieDesignPanel {
     static template = "o-spreadsheet-BarChartDesignPanel";
@@ -22401,7 +22579,13 @@ class BarChartDesignPanel extends LineBarPieDesignPanel {
 
 class GaugeChartConfigPanel extends Component {
     static template = "o-spreadsheet-GaugeChartConfigPanel";
-    static components = { SelectionInput, ValidationMessages };
+    static components = { SelectionInput, ChartErrorSection, ChartDataSeries };
+    static props = {
+        figureId: String,
+        definition: Object,
+        updateChart: Function,
+        canUpdateChart: Function,
+    };
     state = useState({
         dataRangeDispatchResult: undefined,
     });
@@ -22428,12 +22612,6 @@ class GaugeChartConfigPanel extends Component {
         return this.dataRange || "";
     }
 }
-GaugeChartConfigPanel.props = {
-    figureId: String,
-    definition: Object,
-    updateChart: Function,
-    canUpdateChart: Function,
-};
 
 css /* scss */ `
   .o-gauge-color-set {
@@ -22468,31 +22646,35 @@ css /* scss */ `
 `;
 class GaugeChartDesignPanel extends Component {
     static template = "o-spreadsheet-GaugeChartDesignPanel";
-    static components = { ColorPickerWidget, ValidationMessages };
+    static components = { ColorPickerWidget, ChartErrorSection, ChartColor, ChartTitle, Section };
+    static props = {
+        figureId: String,
+        definition: Object,
+        updateChart: Function,
+        canUpdateChart: Function,
+    };
     state = useState({
-        title: "",
         openedMenu: undefined,
         sectionRuleDispatchResult: undefined,
         sectionRule: deepCopy(this.props.definition.sectionRule),
     });
     setup() {
-        this.state.title = _t(this.props.definition.title);
         useExternalListener(window, "click", this.closeMenus);
     }
+    get title() {
+        return _t(this.props.definition.title);
+    }
     get designErrorMessages() {
         const cancelledReasons = [...(this.state.sectionRuleDispatchResult?.reasons || [])];
         return cancelledReasons.map((error) => ChartTerms.Errors[error] || ChartTerms.Errors.Unexpected);
     }
     updateBackgroundColor(color) {
-        this.state.openedMenu = undefined;
         this.props.updateChart(this.props.figureId, {
             background: color,
         });
     }
-    updateTitle() {
-        this.props.updateChart(this.props.figureId, {
-            title: this.state.title,
-        });
+    updateTitle(title) {
+        this.props.updateChart(this.props.figureId, { title });
     }
     isRangeMinInvalid() {
         return !!(this.state.sectionRuleDispatchResult?.isCancelledBecause("EmptyGaugeRangeMin" /* CommandResult.EmptyGaugeRangeMin */) ||
@@ -22542,12 +22724,6 @@ class GaugeChartDesignPanel extends Component {
         this.state.openedMenu = undefined;
     }
 }
-GaugeChartDesignPanel.props = {
-    figureId: String,
-    definition: Object,
-    updateChart: Function,
-    canUpdateChart: Function,
-};
 
 class LineConfigPanel extends LineBarPieConfigPanel {
     static template = "o-spreadsheet-LineConfigPanel";
@@ -22558,24 +22734,42 @@ class LineConfigPanel extends LineBarPieConfigPanel {
         }
         return false;
     }
-    onUpdateLabelsAsText(ev) {
+    get stackedLabel() {
+        return _t("Stacked linechart");
+    }
+    get cumulativeLabel() {
+        return _t("Cumulative data");
+    }
+    getLabelRangeOptions() {
+        const options = super.getLabelRangeOptions();
+        if (this.canTreatLabelsAsText) {
+            options.push({
+                name: "labelsAsText",
+                value: this.props.definition.labelsAsText,
+                label: _t("Treat labels as text"),
+                onChange: this.onUpdateLabelsAsText.bind(this),
+            });
+        }
+        return options;
+    }
+    onUpdateLabelsAsText(labelsAsText) {
         this.props.updateChart(this.props.figureId, {
-            labelsAsText: ev.target.checked,
+            labelsAsText,
         });
     }
-    onUpdateStacked(ev) {
+    onUpdateStacked(stacked) {
         this.props.updateChart(this.props.figureId, {
-            stacked: ev.target.checked,
+            stacked,
         });
     }
-    onUpdateAggregated(ev) {
+    onUpdateAggregated(aggregated) {
         this.props.updateChart(this.props.figureId, {
-            aggregated: ev.target.checked,
+            aggregated,
         });
     }
-    onUpdateCumulative(ev) {
+    onUpdateCumulative(cumulative) {
         this.props.updateChart(this.props.figureId, {
-            cumulative: ev.target.checked,
+            cumulative,
         });
     }
 }
@@ -22586,7 +22780,13 @@ class LineChartDesignPanel extends LineBarPieDesignPanel {
 
 class ScorecardChartConfigPanel extends Component {
     static template = "o-spreadsheet-ScorecardChartConfigPanel";
-    static components = { SelectionInput, ValidationMessages };
+    static components = { SelectionInput, ValidationMessages, ChartErrorSection, Section };
+    static props = {
+        figureId: String,
+        definition: Object,
+        updateChart: Function,
+        canUpdateChart: Function,
+    };
     state = useState({
         keyValueDispatchResult: undefined,
         baselineDispatchResult: undefined,
@@ -22638,28 +22838,27 @@ class ScorecardChartConfigPanel extends Component {
         this.props.updateChart(this.props.figureId, { baselineMode: ev.target.value });
     }
 }
-ScorecardChartConfigPanel.props = {
-    figureId: String,
-    definition: Object,
-    updateChart: Function,
-    canUpdateChart: Function,
-};
 
 class ScorecardChartDesignPanel extends Component {
     static template = "o-spreadsheet-ScorecardChartDesignPanel";
-    static components = { ColorPickerWidget };
+    static components = { ColorPickerWidget, ChartColor, ChartTitle, Section };
+    static props = {
+        figureId: String,
+        definition: Object,
+        updateChart: Function,
+        canUpdateChart: Function,
+    };
     state = useState({
-        title: "",
         openedColorPicker: undefined,
     });
     setup() {
-        this.state.title = _t(this.props.definition.title);
         useExternalListener(window, "click", this.closeMenus);
     }
-    updateTitle() {
-        this.props.updateChart(this.props.figureId, {
-            title: this.state.title,
-        });
+    get title() {
+        return _t(this.props.definition.title);
+    }
+    updateTitle(title) {
+        this.props.updateChart(this.props.figureId, { title });
     }
     translate(term) {
         return _t(term);
@@ -22693,12 +22892,6 @@ class ScorecardChartDesignPanel extends Component {
         this.state.openedColorPicker = undefined;
     }
 }
-ScorecardChartDesignPanel.props = {
-    figureId: String,
-    definition: Object,
-    updateChart: Function,
-    canUpdateChart: Function,
-};
 
 const chartSidePanelComponentRegistry = new Registry();
 chartSidePanelComponentRegistry
@@ -22749,6 +22942,8 @@ css /* scss */ `
 `;
 class ChartPanel extends Component {
     static template = "o-spreadsheet-ChartPanel";
+    static components = { Section };
+    static props = { onCloseSidePanel: Function };
     state;
     get figureId() {
         return this.state.figureId;
@@ -22835,9 +23030,6 @@ class ChartPanel extends Component {
         this.state.panel = panel;
     }
 }
-ChartPanel.props = {
-    onCloseSidePanel: Function,
-};
 
 css /* scss */ `
   .o-spreadsheet {
@@ -22948,6 +23140,9 @@ css /* scss */ `
 `;
 class IconPicker extends Component {
     static template = "o-spreadsheet-IconPicker";
+    static props = {
+        onIconPicked: Function,
+    };
     icons = ICONS;
     iconSets = ICON_SETS;
     onIconClick(icon) {
@@ -22956,9 +23151,6 @@ class IconPicker extends Component {
         }
     }
 }
-IconPicker.props = {
-    onIconPicked: Function,
-};
 
 function useDragAndDropListItems() {
     let dndHelper;
@@ -23313,6 +23505,11 @@ css /* scss */ `
 `;
 class ConditionalFormatPreviewList extends Component {
     static template = "o-spreadsheet-ConditionalFormatPreviewList";
+    static props = {
+        conditionalFormats: Array,
+        onPreviewClick: Function,
+        onAddConditionalFormat: Function,
+    };
     icons = ICONS;
     dragAndDrop = useDragAndDropListItems();
     cfListRef = useRef("cfList");
@@ -23393,11 +23590,6 @@ class ConditionalFormatPreviewList extends Component {
         }
     }
 }
-ConditionalFormatPreviewList.props = {
-    conditionalFormats: Array,
-    onPreviewClick: Function,
-    onAddConditionalFormat: Function,
-};
 
 css /* scss */ `
   label {
@@ -23570,11 +23762,16 @@ css /* scss */ `
 `;
 class ConditionalFormattingEditor extends Component {
     static template = "o-spreadsheet-ConditionalFormattingEditor";
+    static props = {
+        editedCf: { type: Object, optional: true },
+        onExitEdition: Function,
+    };
     static components = {
         SelectionInput,
         IconPicker,
         ColorPickerWidget,
         ConditionalFormatPreviewList,
+        Section,
     };
     icons = ICONS;
     cellIsOperators = CellIsOperators;
@@ -23834,13 +24031,13 @@ class ConditionalFormattingEditor extends Component {
         this.state.rules.iconSet.icons[target] = icon;
     }
 }
-ConditionalFormattingEditor.props = {
-    editedCf: { type: Object, optional: true },
-    onExitEdition: Function,
-};
 
 class ConditionalFormattingPanel extends Component {
     static template = "o-spreadsheet-ConditionalFormattingPanel";
+    static props = {
+        selection: { type: Object, optional: true },
+        onCloseSidePanel: Function,
+    };
     static components = {
         ConditionalFormatPreviewList,
         ConditionalFormattingEditor,
@@ -23899,10 +24096,6 @@ class ConditionalFormattingPanel extends Component {
         this.state.editedCf = cf;
     }
 }
-ConditionalFormattingPanel.props = {
-    selection: { type: Object, optional: true },
-    onCloseSidePanel: Function,
-};
 
 css /* scss */ `
   .o-custom-currency {
@@ -23913,6 +24106,8 @@ css /* scss */ `
 `;
 class CustomCurrencyPanel extends Component {
     static template = "o-spreadsheet-CustomCurrencyPanel";
+    static components = { Section };
+    static props = { onCloseSidePanel: Function };
     availableCurrencies;
     state;
     setup() {
@@ -24035,9 +24230,6 @@ class CustomCurrencyPanel extends Component {
         return currency.name + (currency.code ? ` (${currency.code})` : "");
     }
 }
-CustomCurrencyPanel.props = {
-    onCloseSidePanel: Function,
-};
 
 css /* scss */ `
   .o-find-and-replace {
@@ -24067,7 +24259,10 @@ css /* scss */ `
 `;
 class FindAndReplacePanel extends Component {
     static template = "o-spreadsheet-FindAndReplacePanel";
-    static components = { SelectionInput };
+    static components = { SelectionInput, Section, Checkbox };
+    static props = {
+        onCloseSidePanel: Function,
+    };
     debounceTimeoutId;
     initialShowFormulaState = false;
     dataRange = "";
@@ -24142,19 +24337,16 @@ class FindAndReplacePanel extends Component {
             this.replace();
         }
     }
-    searchFormulas(ev) {
-        const showFormula = ev.target.checked;
+    searchFormulas(showFormula) {
         this.env.model.dispatch("SET_FORMULA_VISIBILITY", {
             show: showFormula,
         });
         this.updateSearch({ searchFormulas: showFormula });
     }
-    searchExactMatch(ev) {
-        const exactMatch = ev.target.checked;
+    searchExactMatch(exactMatch) {
         this.updateSearch({ exactMatch });
     }
-    searchMatchCase(ev) {
-        const matchCase = ev.target.checked;
+    searchMatchCase(matchCase) {
         this.updateSearch({ matchCase });
     }
     changeSearchScope(ev) {
@@ -24207,9 +24399,6 @@ class FindAndReplacePanel extends Component {
         });
     }
 }
-FindAndReplacePanel.props = {
-    onCloseSidePanel: Function,
-};
 
 css /* scss */ `
   .o-more-formats-panel {
@@ -24241,13 +24430,13 @@ const DATE_FORMAT_ACTIONS = createActions([
 ]);
 class MoreFormatsPanel extends Component {
     static template = "o-spreadsheet-MoreFormatsPanel";
+    static props = {
+        onCloseSidePanel: Function,
+    };
     get dateFormatsActions() {
         return DATE_FORMAT_ACTIONS;
     }
 }
-MoreFormatsPanel.props = {
-    onCloseSidePanel: Function,
-};
 
 css /* scss */ `
   .o-checkbox-selection {
@@ -24256,7 +24445,7 @@ css /* scss */ `
 `;
 class RemoveDuplicatesPanel extends Component {
     static template = "o-spreadsheet-RemoveDuplicatesPanel";
-    static components = { ValidationMessages };
+    static components = { ValidationMessages, Section, Checkbox };
     state = useState({
         hasHeader: false,
         columns: {},
@@ -24345,6 +24534,8 @@ css /* scss */ `
 `;
 class SettingsPanel extends Component {
     static template = "o-spreadsheet-SettingsPanel";
+    static components = { Section };
+    static props = { onCloseSidePanel: Function };
     loadedLocales = [];
     setup() {
         onWillStart(() => this.loadLocales());
@@ -24393,9 +24584,6 @@ class SettingsPanel extends Component {
         return this.loadedLocales;
     }
 }
-SettingsPanel.props = {
-    onCloseSidePanel: Function,
-};
 
 const SplitToColumnsInteractiveContent = {
     SplitIsDestructive: _t("This will overwrite data in the subsequent columns. Split anyway?"),
@@ -24491,7 +24679,7 @@ dataValidationEvaluatorRegistry.add("dateIs", {
             return false;
         }
         if (["lastWeek", "lastMonth", "lastYear"].includes(criterion.dateValue)) {
-            const today = jsDateToRoundNumber(new Date());
+            const today = jsDateToRoundNumber(DateTime.now());
             return isDateBetween(dateValue, today, criterionValue);
         }
         return areDatesSameDay(dateValue, criterionValue);
@@ -24983,7 +25171,8 @@ const SEPARATORS = [
 ];
 class SplitIntoColumnsPanel extends Component {
     static template = "o-spreadsheet-SplitIntoColumnsPanel";
-    static components = { ValidationMessages };
+    static components = { ValidationMessages, Section, Checkbox };
+    static props = { onCloseSidePanel: Function };
     state = useState({ separatorValue: "auto", addNewColumns: false, customSeparator: "" });
     setup() {
         onWillUpdateProps(() => {
@@ -25005,10 +25194,8 @@ class SplitIntoColumnsPanel extends Component {
             return;
         this.state.customSeparator = ev.target.value;
     }
-    updateAddNewColumnsCheckbox(ev) {
-        if (!ev.target)
-            return;
-        this.state.addNewColumns = ev.target.checked;
+    updateAddNewColumnsCheckbox(addNewColumns) {
+        this.state.addNewColumns = addNewColumns;
     }
     confirm() {
         const result = interactiveSplitToColumns(this.env, this.separatorValue, this.state.addNewColumns);
@@ -25062,13 +25249,15 @@ class SplitIntoColumnsPanel extends Component {
         return !this.separatorValue || this.errorMessages.length > 0;
     }
 }
-SplitIntoColumnsPanel.props = {
-    onCloseSidePanel: Function,
-};
 
 /** This component looks like a select input, but on click it opens a Menu with the items given as props instead of a dropdown */
 class SelectMenu extends Component {
     static template = "o-spreadsheet-SelectMenu";
+    static props = {
+        menuItems: Array,
+        selectedValue: String,
+        class: { type: String, optional: true },
+    };
     static components = { Menu };
     selectRef = useRef("select");
     selectRect = useAbsoluteBoundingRect(this.selectRef);
@@ -25088,13 +25277,12 @@ class SelectMenu extends Component {
         };
     }
 }
-SelectMenu.props = {
-    menuItems: Array,
-    selectedValue: String,
-    class: { type: String, optional: true },
-};
 
 class DataValidationCriterionForm extends Component {
+    static props = {
+        criterion: Object,
+        onCriterionChanged: Function,
+    };
     setup() {
         onMounted(() => {
             interactiveStopEdition(this.env);
@@ -25108,10 +25296,6 @@ class DataValidationCriterionForm extends Component {
         this.props.onCriterionChanged(filteredCriterion);
     }
 }
-DataValidationCriterionForm.props = {
-    criterion: Object,
-    onCriterionChanged: Function,
-};
 
 css /* scss */ `
   .o-dv-input {
@@ -25126,6 +25310,15 @@ css /* scss */ `
 `;
 class DataValidationInput extends Component {
     static template = "o-spreadsheet-DataValidationInput";
+    static props = {
+        value: { type: String, optional: true },
+        criterionType: String,
+        onValueChanged: Function,
+        onKeyDown: { type: Function, optional: true },
+        focused: { type: Boolean, optional: true },
+        onBlur: { type: Function, optional: true },
+        onFocus: { type: Function, optional: true },
+    };
     static defaultProps = {
         value: "",
         onKeyDown: () => { },
@@ -25164,15 +25357,6 @@ class DataValidationInput extends Component {
         return this.env.model.getters.getDataValidationInvalidCriterionValueMessage(this.props.criterionType, canonicalizeContent(this.props.value, this.env.model.getters.getLocale()));
     }
 }
-DataValidationInput.props = {
-    value: { type: String, optional: true },
-    criterionType: String,
-    onValueChanged: Function,
-    onKeyDown: { type: Function, optional: true },
-    focused: { type: Boolean, optional: true },
-    onBlur: { type: Function, optional: true },
-    onFocus: { type: Function, optional: true },
-};
 
 const DATES_VALUES = {
     today: _t("today"),
@@ -25508,7 +25692,11 @@ css /* scss */ `
 `;
 class DataValidationEditor extends Component {
     static template = "o-spreadsheet-DataValidationEditor";
-    static components = { SelectionInput, SelectMenu };
+    static components = { SelectionInput, SelectMenu, Section };
+    static props = {
+        rule: { type: Object, optional: true },
+        onExit: Function,
+    };
     state = useState({ rule: this.defaultDataValidationRule });
     setup() {
         if (this.props.rule) {
@@ -25584,10 +25772,6 @@ class DataValidationEditor extends Component {
         return dataValidationPanelCriteriaRegistry.get(this.state.rule.criterion.type).component;
     }
 }
-DataValidationEditor.props = {
-    rule: { type: Object, optional: true },
-    onExit: Function,
-};
 
 css /* scss */ `
   .o-sidePanel {
@@ -25617,6 +25801,10 @@ css /* scss */ `
 `;
 class DataValidationPreview extends Component {
     static template = "o-spreadsheet-DataValidationPreview";
+    static props = {
+        onClick: Function,
+        rule: Object,
+    };
     deleteDataValidation() {
         const sheetId = this.env.model.getters.getActiveSheetId();
         this.env.model.dispatch("REMOVE_DATA_VALIDATION_RULE", { sheetId, id: this.props.rule.id });
@@ -25633,13 +25821,12 @@ class DataValidationPreview extends Component {
             .getPreview(this.props.rule.criterion, this.env.model.getters);
     }
 }
-DataValidationPreview.props = {
-    onClick: Function,
-    rule: Object,
-};
 
 class DataValidationPanel extends Component {
     static template = "o-spreadsheet-DataValidationPanel";
+    static props = {
+        onCloseSidePanel: Function,
+    };
     static components = { DataValidationPreview, DataValidationEditor };
     state = useState({ mode: "list", activeRule: undefined });
     onPreviewClick(id) {
@@ -25669,9 +25856,6 @@ class DataValidationPanel extends Component {
         return this.env.model.getters.getDataValidationRules(sheetId);
     }
 }
-DataValidationPanel.props = {
-    onCloseSidePanel: Function,
-};
 
 const sidePanelRegistry = new Registry();
 sidePanelRegistry.add("ConditionalFormatting", {
@@ -25803,6 +25987,13 @@ css /*SCSS*/ `
 `;
 class FigureComponent extends Component {
     static template = "o-spreadsheet-FigureComponent";
+    static props = {
+        figure: Object,
+        style: { type: String, optional: true },
+        onFigureDeleted: { type: Function, optional: true },
+        onMouseDown: { type: Function, optional: true },
+        onClickAnchor: { type: Function, optional: true },
+    };
     static components = { Menu };
     static defaultProps = {
         onFigureDeleted: () => { },
@@ -25945,13 +26136,6 @@ class FigureComponent extends Component {
             .menuBuilder(this.props.figure.id, this.props.onFigureDeleted, this.env);
     }
 }
-FigureComponent.props = {
-    figure: Object,
-    style: { type: String, optional: true },
-    onFigureDeleted: { type: Function, optional: true },
-    onMouseDown: { type: Function, optional: true },
-    onClickAnchor: { type: Function, optional: true },
-};
 
 const ToggleGroupInteractiveContent = {
     CannotHideAllRows: _t("Cannot hide all the rows of a sheet."),
@@ -26089,6 +26273,10 @@ css /* scss */ `
 `;
 class Autofill extends Component {
     static template = "o-spreadsheet-Autofill";
+    static props = {
+        position: Object,
+        isVisible: Boolean,
+    };
     state = useState({
         position: { left: 0, top: 0 },
         handler: false,
@@ -26157,18 +26345,14 @@ class Autofill extends Component {
         this.env.model.dispatch("AUTOFILL_AUTO");
     }
 }
-Autofill.props = {
-    position: Object,
-    isVisible: Boolean,
-};
 class TooltipComponent extends Component {
+    static props = {
+        content: String,
+    };
     static template = xml /* xml */ `
     <div t-esc="props.content"/>
   `;
 }
-TooltipComponent.props = {
-    content: String,
-};
 
 css /* scss */ `
   .o-client-tag {
@@ -26182,6 +26366,13 @@ css /* scss */ `
 `;
 class ClientTag extends Component {
     static template = "o-spreadsheet-ClientTag";
+    static props = {
+        active: Boolean,
+        name: String,
+        color: String,
+        col: Number,
+        row: Number,
+    };
     get tagStyle() {
         const { col, row, color } = this.props;
         const { height } = this.env.model.getters.getSheetViewDimensionWithHeaders();
@@ -26199,13 +26390,6 @@ class ClientTag extends Component {
         });
     }
 }
-ClientTag.props = {
-    active: Boolean,
-    name: String,
-    color: String,
-    col: Number,
-    row: Number,
-};
 
 function getHtmlContentFromPattern(pattern, value, highlightColor, className) {
     const pendingHtmlContent = [];
@@ -26245,14 +26429,14 @@ css /* scss */ `
 `;
 class TextValueProvider extends Component {
     static template = "o-spreadsheet-TextValueProvider";
+    static props = {
+        values: Array,
+        selectedIndex: { type: Number, optional: true },
+        getHtmlContent: Function,
+        onValueSelected: Function,
+        onValueHovered: Function,
+    };
 }
-TextValueProvider.props = {
-    values: Array,
-    selectedIndex: { type: Number, optional: true },
-    getHtmlContent: Function,
-    onValueSelected: Function,
-    onValueHovered: Function,
-};
 
 class ContentEditableHelper {
     // todo make el private and expose dedicated methods
@@ -26614,6 +26798,11 @@ css /* scss */ `
 `;
 class FunctionDescriptionProvider extends Component {
     static template = "o-spreadsheet-FunctionDescriptionProvider";
+    static props = {
+        functionName: String,
+        functionDescription: Object,
+        argToFocus: Number,
+    };
     assistantState = useState({
         allowCellSelectionBehind: false,
     });
@@ -26638,11 +26827,6 @@ class FunctionDescriptionProvider extends Component {
         }, 2000);
     }
 }
-FunctionDescriptionProvider.props = {
-    functionName: String,
-    functionDescription: Object,
-    argToFocus: Number,
-};
 
 const functions$2 = functionRegistry.content;
 const ASSISTANT_WIDTH = 300;
@@ -26708,6 +26892,16 @@ css /* scss */ `
 `;
 class Composer extends Component {
     static template = "o-spreadsheet-Composer";
+    static props = {
+        focus: {
+            validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value),
+        },
+        onComposerContentFocused: Function,
+        inputStyle: { type: String, optional: true },
+        rect: { type: Object, optional: true },
+        delimitation: { type: Object, optional: true },
+        onComposerUnmounted: { type: Function, optional: true },
+    };
     static components = { TextValueProvider, FunctionDescriptionProvider };
     static defaultProps = {
         inputStyle: "",
@@ -27264,14 +27458,6 @@ class Composer extends Component {
         this.autoCompleteState.getHtmlContent = (value) => [{ value }];
     }
 }
-Composer.props = {
-    focus: { validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value) },
-    onComposerContentFocused: Function,
-    inputStyle: { type: String, optional: true },
-    rect: { type: Object, optional: true },
-    delimitation: { type: Object, optional: true },
-    onComposerUnmounted: { type: Function, optional: true },
-};
 
 const COMPOSER_BORDER_WIDTH = 3 * 0.4 * window.devicePixelRatio || 1;
 const GRID_CELL_REFERENCE_TOP_OFFSET = 28;
@@ -27303,6 +27489,14 @@ css /* scss */ `
  */
 class GridComposer extends Component {
     static template = "o-spreadsheet-GridComposer";
+    static props = {
+        focus: {
+            validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value),
+        },
+        onComposerUnmounted: Function,
+        onComposerContentFocused: Function,
+        gridDims: Object,
+    };
     static components = { Composer };
     gridComposerRef;
     zone;
@@ -27409,22 +27603,22 @@ class GridComposer extends Component {
         });
     }
 }
-GridComposer.props = {
-    focus: { validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value) },
-    onComposerUnmounted: Function,
-    onComposerContentFocused: Function,
-    gridDims: Object,
-};
 
-const CSS$1 = css /* scss */ `
+css /* scss */ `
   .o-grid-cell-icon {
     width: ${GRID_ICON_EDGE_LENGTH}px;
     height: ${GRID_ICON_EDGE_LENGTH}px;
   }
 `;
 class GridCellIcon extends Component {
-    static style = CSS$1;
     static template = "o-spreadsheet-GridCellIcon";
+    static props = {
+        cellPosition: Object,
+        horizontalAlign: { type: String, optional: true },
+        verticalAlign: { type: String, optional: true },
+        offset: { type: Object, optional: true },
+        slots: Object,
+    };
     get iconStyle() {
         const x = this.getIconHorizontalPosition();
         const y = this.getIconVerticalPosition();
@@ -27473,15 +27667,8 @@ class GridCellIcon extends Component {
         return !(rect.width === 0 || rect.height === 0);
     }
 }
-GridCellIcon.props = {
-    cellPosition: Object,
-    horizontalAlign: { type: String, optional: true },
-    verticalAlign: { type: String, optional: true },
-    offset: { type: Object, optional: true },
-    slots: Object,
-};
 
-const CSS = css /* scss */ `
+css /* scss */ `
   .o-filter-icon {
     color: ${FILTERS_COLOR};
     display: flex;
@@ -27496,8 +27683,10 @@ const CSS = css /* scss */ `
   }
 `;
 class FilterIcon extends Component {
-    static style = CSS;
     static template = "o-spreadsheet-FilterIcon";
+    static props = {
+        cellPosition: Object,
+    };
     onClick() {
         const position = this.props.cellPosition;
         const activePopoverType = this.env.model.getters.getPersistentPopoverTypeAtPosition(position);
@@ -27516,12 +27705,12 @@ class FilterIcon extends Component {
         return this.env.model.getters.isFilterActive(this.props.cellPosition);
     }
 }
-FilterIcon.props = {
-    cellPosition: Object,
-};
 
 class FilterIconsOverlay extends Component {
     static template = "o-spreadsheet-FilterIconsOverlay";
+    static props = {
+        gridPosition: { type: Object, optional: true },
+    };
     static components = {
         GridCellIcon,
         FilterIcon,
@@ -27535,14 +27724,12 @@ class FilterIconsOverlay extends Component {
         return headerPositions.map((position) => ({ sheetId, ...position }));
     }
 }
-FilterIconsOverlay.props = {
-    gridPosition: { type: Object, optional: true },
-};
 
 const CHECKBOX_WIDTH = 15;
 const MARGIN = (GRID_ICON_EDGE_LENGTH - CHECKBOX_WIDTH) / 2;
 css /* scss */ `
   .o-dv-checkbox {
+    box-sizing: border-box !important;
     width: ${CHECKBOX_WIDTH}px;
     height: ${CHECKBOX_WIDTH}px;
     accent-color: #808080;
@@ -27551,6 +27738,9 @@ css /* scss */ `
 `;
 class DataValidationCheckbox extends Component {
     static template = "o-spreadsheet-DataValidationCheckbox";
+    static props = {
+        cellPosition: Object,
+    };
     onCheckboxChange(ev) {
         const newValue = ev.target.checked;
         const { sheetId, col, row } = this.props.cellPosition;
@@ -27565,9 +27755,6 @@ class DataValidationCheckbox extends Component {
         return !!cell?.isFormula;
     }
 }
-DataValidationCheckbox.props = {
-    cellPosition: Object,
-};
 
 const ICON_WIDTH = 13;
 css /* scss */ `
@@ -27590,18 +27777,19 @@ css /* scss */ `
 `;
 class DataValidationListIcon extends Component {
     static template = "o-spreadsheet-DataValidationListIcon";
+    static props = {
+        cellPosition: Object,
+    };
     onClick() {
         const { col, row } = this.props.cellPosition;
         this.env.model.selection.selectCell(col, row);
         this.env.startCellEdition();
     }
 }
-DataValidationListIcon.props = {
-    cellPosition: Object,
-};
 
 class DataValidationOverlay extends Component {
     static template = "o-spreadsheet-DataValidationOverlay";
+    static props = {};
     static components = { GridCellIcon, DataValidationCheckbox, DataValidationListIcon };
     get checkBoxCellPositions() {
         return this.env.model.getters.getDataValidationCheckBoxCellPositions();
@@ -27612,7 +27800,6 @@ class DataValidationOverlay extends Component {
             : this.env.model.getters.getDataValidationListCellsPositions();
     }
 }
-DataValidationOverlay.props = {};
 
 /**
  * Transform a figure with coordinates from the model, to coordinates as they are shown on the screen,
@@ -27948,6 +28135,9 @@ css /*SCSS*/ `
  */
 class FiguresContainer extends Component {
     static template = "o-spreadsheet-FiguresContainer";
+    static props = {
+        onFigureDeleted: Function,
+    };
     static components = { FigureComponent };
     dnd = useState({
         draggedFigure: undefined,
@@ -28197,9 +28387,6 @@ class FiguresContainer extends Component {
         }
     }
 }
-FiguresContainer.props = {
-    onFigureDeleted: Function,
-};
 
 css /* scss */ `
   .o-grid-add-rows {
@@ -28218,6 +28405,9 @@ css /* scss */ `
 `;
 class GridAddRowsFooter extends Component {
     static template = "o-spreadsheet-GridAddRowsFooter";
+    static props = {
+        focusGrid: Function,
+    };
     static components = { ValidationMessages };
     inputRef = useRef("inputRef");
     state = useState({
@@ -28284,9 +28474,6 @@ class GridAddRowsFooter extends Component {
         this.props.focusGrid();
     }
 }
-GridAddRowsFooter.props = {
-    focusGrid: Function,
-};
 
 /**
  * Manages an event listener on a ref. Useful for hooks that want to manage
@@ -28442,6 +28629,16 @@ function useTouchMove(gridRef, handler, canMoveUp) {
 }
 class GridOverlay extends Component {
     static template = "o-spreadsheet-GridOverlay";
+    static props = {
+        onCellHovered: { type: Function, optional: true },
+        onCellDoubleClicked: { type: Function, optional: true },
+        onCellClicked: { type: Function, optional: true },
+        onCellRightClicked: { type: Function, optional: true },
+        onGridResized: { type: Function, optional: true },
+        onFigureDeleted: { type: Function, optional: true },
+        onGridMoved: Function,
+        gridOverlayDimensions: String,
+    };
     static components = { FiguresContainer, DataValidationOverlay, GridAddRowsFooter };
     static defaultProps = {
         onCellHovered: () => { },
@@ -28515,19 +28712,15 @@ class GridOverlay extends Component {
         return [colIndex, rowIndex];
     }
 }
-GridOverlay.props = {
-    onCellHovered: { type: Function, optional: true },
-    onCellDoubleClicked: { type: Function, optional: true },
-    onCellClicked: { type: Function, optional: true },
-    onCellRightClicked: { type: Function, optional: true },
-    onGridResized: { type: Function, optional: true },
-    onFigureDeleted: { type: Function, optional: true },
-    onGridMoved: Function,
-    gridOverlayDimensions: String,
-};
 
 class GridPopover extends Component {
     static template = "o-spreadsheet-GridPopover";
+    static props = {
+        hoveredCell: Object,
+        onClosePopover: Function,
+        onMouseWheel: Function,
+        gridRect: Object,
+    };
     static components = { Popover };
     zIndex = ComponentsImportance.GridPopover;
     get cellPopover() {
@@ -28547,14 +28740,11 @@ class GridPopover extends Component {
         };
     }
 }
-GridPopover.props = {
-    hoveredCell: Object,
-    onClosePopover: Function,
-    onMouseWheel: Function,
-    gridRect: Object,
-};
 
 class AbstractResizer extends Component {
+    static props = {
+        onOpenContextMenu: Function,
+    };
     PADDING = 0;
     MAX_SIZE_MARGIN = 0;
     MIN_ELEMENT_SIZE = 0;
@@ -28811,10 +29001,10 @@ css /* scss */ `
     }
   }
 `;
-AbstractResizer.props = {
-    onOpenContextMenu: Function,
-};
 class ColResizer extends AbstractResizer {
+    static props = {
+        onOpenContextMenu: Function,
+    };
     static template = "o-spreadsheet-ColResizer";
     colResizerRef;
     setup() {
@@ -28976,10 +29166,10 @@ css /* scss */ `
     }
   }
 `;
-ColResizer.props = {
-    onOpenContextMenu: Function,
-};
 class RowResizer extends AbstractResizer {
+    static props = {
+        onOpenContextMenu: Function,
+    };
     static template = "o-spreadsheet-RowResizer";
     setup() {
         super.setup();
@@ -29100,19 +29290,16 @@ css /* scss */ `
     }
   }
 `;
-RowResizer.props = {
-    onOpenContextMenu: Function,
-};
 class HeadersOverlay extends Component {
+    static props = {
+        onOpenContextMenu: Function,
+    };
     static template = "o-spreadsheet-HeadersOverlay";
     static components = { ColResizer, RowResizer };
     selectAll() {
         this.env.model.selection.selectAll();
     }
 }
-HeadersOverlay.props = {
-    onOpenContextMenu: Function,
-};
 
 function useGridDrawing(refName, model, canvasSize) {
     const canvasRef = useRef(refName);
@@ -29170,6 +29357,12 @@ css /* scss */ `
 `;
 class Border extends Component {
     static template = "o-spreadsheet-Border";
+    static props = {
+        zone: Object,
+        orientation: String,
+        isMoving: Boolean,
+        onMoveHighlight: Function,
+    };
     get style() {
         const isTop = ["n", "w", "e"].includes(this.props.orientation);
         const isLeft = ["n", "w", "s"].includes(this.props.orientation);
@@ -29198,12 +29391,6 @@ class Border extends Component {
         this.props.onMoveHighlight(ev.clientX, ev.clientY);
     }
 }
-Border.props = {
-    zone: Object,
-    orientation: String,
-    isMoving: Boolean,
-    onMoveHighlight: Function,
-};
 
 css /* scss */ `
   .o-corner {
@@ -29230,6 +29417,13 @@ css /* scss */ `
 `;
 class Corner extends Component {
     static template = "o-spreadsheet-Corner";
+    static props = {
+        zone: Object,
+        color: String,
+        orientation: String,
+        isResizing: Boolean,
+        onResizeHighlight: Function,
+    };
     isTop = this.props.orientation[0] === "n";
     isLeft = this.props.orientation[1] === "w";
     get style() {
@@ -29258,13 +29452,6 @@ class Corner extends Component {
         this.props.onResizeHighlight(this.isLeft, this.isTop);
     }
 }
-Corner.props = {
-    zone: Object,
-    color: String,
-    orientation: String,
-    isResizing: Boolean,
-    onResizeHighlight: Function,
-};
 
 css /*SCSS*/ `
   .o-highlight {
@@ -29273,6 +29460,10 @@ css /*SCSS*/ `
 `;
 class Highlight extends Component {
     static template = "o-spreadsheet-Highlight";
+    static props = {
+        zone: Object,
+        color: String,
+    };
     static components = {
         Corner,
         Border,
@@ -29356,10 +29547,6 @@ class Highlight extends Component {
         dragAndDropBeyondTheViewport(this.env, mouseMove, mouseUp);
     }
 }
-Highlight.props = {
-    zone: Object,
-    color: String,
-};
 
 let ScrollBar$1 = class ScrollBar {
     direction;
@@ -29399,6 +29586,14 @@ css /* scss */ `
   }
 `;
 class ScrollBar extends Component {
+    static props = {
+        width: { type: Number, optional: true },
+        height: { type: Number, optional: true },
+        direction: String,
+        position: Object,
+        offset: Number,
+        onScroll: Function,
+    };
     static template = xml /*xml*/ `
     <div
         t-attf-class="o-scrollbar {{props.direction}}"
@@ -29442,16 +29637,11 @@ class ScrollBar extends Component {
         }
     }
 }
-ScrollBar.props = {
-    width: { type: Number, optional: true },
-    height: { type: Number, optional: true },
-    direction: String,
-    position: Object,
-    offset: Number,
-    onScroll: Function,
-};
 
 class HorizontalScrollBar extends Component {
+    static props = {
+        leftOffset: { type: Number, optional: true },
+    };
     static components = { ScrollBar };
     static template = xml /*xml*/ `
       <ScrollBar
@@ -29492,11 +29682,11 @@ class HorizontalScrollBar extends Component {
         });
     }
 }
-HorizontalScrollBar.props = {
-    leftOffset: { type: Number, optional: true },
-};
 
 class VerticalScrollBar extends Component {
+    static props = {
+        topOffset: { type: Number, optional: true },
+    };
     static components = { ScrollBar };
     static template = xml /*xml*/ `
     <ScrollBar
@@ -29537,9 +29727,6 @@ class VerticalScrollBar extends Component {
         });
     }
 }
-VerticalScrollBar.props = {
-    topOffset: { type: Number, optional: true },
-};
 
 const registries$1 = {
     ROW: rowMenuRegistry,
@@ -29553,6 +29740,13 @@ const registries$1 = {
 // -----------------------------------------------------------------------------
 class Grid extends Component {
     static template = "o-spreadsheet-Grid";
+    static props = {
+        sidePanelIsOpen: Boolean,
+        exposeFocus: Function,
+        focusComposer: String,
+        onComposerContentFocused: Function,
+        onGridComposerCellFocused: Function,
+    };
     static components = {
         GridComposer,
         GridOverlay,
@@ -30157,13 +30351,6 @@ class Grid extends Component {
         }
     }
 }
-Grid.props = {
-    sidePanelIsOpen: Boolean,
-    exposeFocus: Function,
-    focusComposer: String,
-    onComposerContentFocused: Function,
-    onGridComposerCellFocused: Function,
-};
 
 /**
  * Represent a raw XML string
@@ -31584,20 +31771,26 @@ function convertFigures(sheetData) {
         .filter(isDefined$1);
 }
 function convertFigure(figure, id, sheetData) {
-    const x1 = getColPosition(figure.anchors[0].col, sheetData) +
-        convertEMUToDotValue(figure.anchors[0].colOffset);
-    const x2 = getColPosition(figure.anchors[1].col, sheetData) +
-        convertEMUToDotValue(figure.anchors[1].colOffset);
-    const y1 = getRowPosition(figure.anchors[0].row, sheetData) +
-        convertEMUToDotValue(figure.anchors[0].rowOffset);
-    const y2 = getRowPosition(figure.anchors[1].row, sheetData) +
-        convertEMUToDotValue(figure.anchors[1].rowOffset);
+    let x1, y1;
+    let height, width;
+    if (figure.anchors.length === 1) {
+        // one cell anchor
+        ({ x: x1, y: y1 } = getPositionFromAnchor(figure.anchors[0], sheetData));
+        width = convertEMUToDotValue(figure.figureSize.cx);
+        height = convertEMUToDotValue(figure.figureSize.cy);
+    }
+    else {
+        ({ x: x1, y: y1 } = getPositionFromAnchor(figure.anchors[0], sheetData));
+        const { x: x2, y: y2 } = getPositionFromAnchor(figure.anchors[1], sheetData);
+        width = x2 - x1;
+        height = y2 - y1;
+    }
     const figureData = { id, x: x1, y: y1 };
     if (isChartData(figure.data)) {
         return {
             ...figureData,
-            width: x2 - x1,
-            height: y2 - y1,
+            width,
+            height,
             tag: "chart",
             data: convertChartData(figure.data),
         };
@@ -31663,6 +31856,12 @@ function convertExcelRangeToSheetXC(range, dataSetsHaveTitle) {
     const dataXC = zoneToXc(zone);
     return getFullReference(sheetName, dataXC);
 }
+function getPositionFromAnchor(anchor, sheetData) {
+    return {
+        x: getColPosition(anchor.col, sheetData) + convertEMUToDotValue(anchor.colOffset),
+        y: getRowPosition(anchor.row, sheetData) + convertEMUToDotValue(anchor.rowOffset),
+    };
+}
 
 /**
  * Match external reference (ex. '[1]Sheet 3'!$B$4)
@@ -32786,27 +32985,50 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
     }
 }
 
+const ONE_CELL_ANCHOR = "oneCellAnchor";
+const TWO_CELL_ANCHOR = "twoCellAnchor";
 class XlsxFigureExtractor extends XlsxBaseExtractor {
     extractFigures() {
         return this.mapOnElements({ parent: this.rootFile.file.xml, query: "xdr:wsDr", children: true }, (figureElement) => {
             const anchorType = removeTagEscapedNamespaces(figureElement.tagName);
-            if (anchorType !== "twoCellAnchor") {
-                throw new Error("Only twoCellAnchor are supported for xlsx drawings.");
-            }
+            const anchors = this.extractFigureAnchorsByType(figureElement, anchorType);
             const chartElement = this.querySelector(figureElement, "c:chart");
             const imageElement = this.querySelector(figureElement, "a:blip");
             if (!chartElement && !imageElement) {
                 throw new Error("Only chart and image figures are currently supported.");
             }
             return {
-                anchors: [
-                    this.extractFigureAnchor("xdr:from", figureElement),
-                    this.extractFigureAnchor("xdr:to", figureElement),
-                ],
+                anchors,
                 data: chartElement ? this.extractChart(chartElement) : this.extractImage(figureElement),
+                figureSize: anchorType === ONE_CELL_ANCHOR
+                    ? this.extractFigureSizeFromSizeTag(figureElement, "xdr:ext")
+                    : undefined,
             };
         });
     }
+    extractFigureAnchorsByType(figureElement, anchorType) {
+        switch (anchorType) {
+            case ONE_CELL_ANCHOR:
+                return [this.extractFigureAnchor("xdr:from", figureElement)];
+            case TWO_CELL_ANCHOR:
+                return [
+                    this.extractFigureAnchor("xdr:from", figureElement),
+                    this.extractFigureAnchor("xdr:to", figureElement),
+                ];
+            default:
+                throw new Error(`${anchorType} is not supported for xlsx drawings. `);
+        }
+    }
+    extractFigureSizeFromSizeTag(figureElement, sizeTag) {
+        const sizeElement = this.querySelector(figureElement, sizeTag);
+        if (!sizeElement) {
+            throw new Error(`Missing size element '${sizeTag}'`);
+        }
+        return {
+            cx: this.extractAttr(sizeElement, "cx", { required: true }).asNum(),
+            cy: this.extractAttr(sizeElement, "cy", { required: true }).asNum(),
+        };
+    }
     extractFigureAnchor(anchorTag, figureElement) {
         const anchor = this.querySelector(figureElement, anchorTag);
         if (!anchor) {
@@ -32835,15 +33057,15 @@ class XlsxFigureExtractor extends XlsxBaseExtractor {
         if (!image) {
             throw new Error("Unable to extract image");
         }
-        const shapePropertyElement = this.querySelector(figureElement, "a:xfrm");
         const extension = image.fileName.split(".").at(-1);
+        const anchorType = removeTagEscapedNamespaces(figureElement.tagName);
+        const sizeElement = anchorType === TWO_CELL_ANCHOR ? this.querySelector(figureElement, "a:xfrm") : figureElement;
+        const sizeTag = anchorType === TWO_CELL_ANCHOR ? "a:ext" : "xdr:ext";
+        const size = this.extractFigureSizeFromSizeTag(sizeElement, sizeTag);
         return {
             imageSrc: image.imageSrc,
             mimetype: extension ? IMAGE_EXTENSION_TO_MIMETYPE_MAPPING[extension] : undefined,
-            size: {
-                cx: this.extractChildAttr(shapePropertyElement, "a:ext", "cx", { required: true }).asNum(),
-                cy: this.extractChildAttr(shapePropertyElement, "a:ext", "cy", { required: true }).asNum(),
-            },
+            size,
         };
     }
 }
@@ -41495,7 +41717,8 @@ class EvaluationPlugin extends UIPlugin {
     // Command Handling
     // ---------------------------------------------------------------------------
     beforeHandle(cmd) {
-        if (invalidateDependenciesCommands.has(cmd.type)) {
+        if (invalidateEvaluationCommands.has(cmd.type) ||
+            invalidateDependenciesCommands.has(cmd.type)) {
             this.shouldRebuildDependenciesGraph = true;
         }
     }
@@ -41916,7 +42139,8 @@ class EvaluationConditionalFormatPlugin extends UIPlugin {
     // Command Handling
     // ---------------------------------------------------------------------------
     handle(cmd) {
-        if (invalidateCFEvaluationCommands.has(cmd.type) ||
+        if (invalidateEvaluationCommands.has(cmd.type) ||
+            invalidateCFEvaluationCommands.has(cmd.type) ||
             (cmd.type === "UPDATE_CELL" && ("content" in cmd || "format" in cmd))) {
             this.isStale = true;
         }
@@ -50818,6 +51042,20 @@ css /* scss */ `
 `;
 class RippleEffect extends Component {
     static template = "o-spreadsheet-RippleEffect";
+    static props = {
+        x: String,
+        y: String,
+        color: String,
+        opacity: Number,
+        duration: Number,
+        width: Number,
+        height: Number,
+        offsetY: Number,
+        offsetX: Number,
+        allowOverflow: Boolean,
+        onAnimationEnd: Function,
+        style: String,
+    };
     rippleRef = useRef("ripple");
     setup() {
         let animation = undefined;
@@ -50853,22 +51091,23 @@ class RippleEffect extends Component {
         });
     }
 }
-RippleEffect.props = {
-    x: String,
-    y: String,
-    color: String,
-    opacity: Number,
-    duration: Number,
-    width: Number,
-    height: Number,
-    offsetY: Number,
-    offsetX: Number,
-    allowOverflow: Boolean,
-    onAnimationEnd: Function,
-    style: String,
-};
 class Ripple extends Component {
     static template = "o-spreadsheet-Ripple";
+    static props = {
+        color: { type: String, optional: true },
+        opacity: { type: Number, optional: true },
+        duration: { type: Number, optional: true },
+        ignoreClickPosition: { type: Boolean, optional: true },
+        width: { type: Number, optional: true },
+        height: { type: Number, optional: true },
+        offsetY: { type: Number, optional: true },
+        offsetX: { type: Number, optional: true },
+        allowOverflow: { type: Boolean, optional: true },
+        enabled: { type: Boolean, optional: true },
+        onAnimationEnd: { type: Function, optional: true },
+        slots: Object,
+        class: { type: String, optional: true },
+    };
     static components = { RippleEffect };
     static defaultProps = {
         color: "#aaaaaa",
@@ -50954,21 +51193,6 @@ class Ripple extends Component {
         };
     }
 }
-Ripple.props = {
-    color: { type: String, optional: true },
-    opacity: { type: Number, optional: true },
-    duration: { type: Number, optional: true },
-    ignoreClickPosition: { type: Boolean, optional: true },
-    width: { type: Number, optional: true },
-    height: { type: Number, optional: true },
-    offsetY: { type: Number, optional: true },
-    offsetX: { type: Number, optional: true },
-    allowOverflow: { type: Boolean, optional: true },
-    enabled: { type: Boolean, optional: true },
-    onAnimationEnd: { type: Function, optional: true },
-    slots: Object,
-    class: { type: String, optional: true },
-};
 
 function interactiveRenameSheet(env, sheetId, name, errorCallback) {
     const result = env.model.dispatch("RENAME_SHEET", { sheetId, name });
@@ -51026,6 +51250,12 @@ css /* scss */ `
 `;
 class BottomBarSheet extends Component {
     static template = "o-spreadsheet-BottomBarSheet";
+    static props = {
+        sheetId: String,
+        openContextMenu: Function,
+        style: { type: String, optional: true },
+        onMouseDown: { type: Function, optional: true },
+    };
     static components = { Ripple };
     static defaultProps = {
         onMouseDown: () => { },
@@ -51147,12 +51377,6 @@ class BottomBarSheet extends Component {
         return this.env.model.getters.getSheetName(this.props.sheetId);
     }
 }
-BottomBarSheet.props = {
-    sheetId: String,
-    openContextMenu: Function,
-    style: { type: String, optional: true },
-    onMouseDown: { type: Function, optional: true },
-};
 
 // -----------------------------------------------------------------------------
 // SpreadSheet
@@ -51170,6 +51394,10 @@ css /* scss */ `
 `;
 class BottomBarStatistic extends Component {
     static template = "o-spreadsheet-BottomBarStatisic";
+    static props = {
+        openContextMenu: Function,
+        closeContextMenu: Function,
+    };
     static components = { Ripple };
     selectedStatisticFn = "";
     statisticFnResults = {};
@@ -51216,10 +51444,6 @@ class BottomBarStatistic extends Component {
         return fnName + ": " + (fnValue !== undefined ? formatValue(fnValue, { locale }) : "__");
     }
 }
-BottomBarStatistic.props = {
-    openContextMenu: Function,
-    closeContextMenu: Function,
-};
 
 // -----------------------------------------------------------------------------
 // SpreadSheet
@@ -51270,6 +51494,9 @@ css /* scss */ `
 `;
 class BottomBar extends Component {
     static template = "o-spreadsheet-BottomBar";
+    static props = {
+        onClick: Function,
+    };
     static components = { Menu, Ripple, BottomBarSheet, BottomBarStatistic };
     bottomBarRef = useRef("bottomBar");
     sheetListRef = useRef("sheetList");
@@ -51455,9 +51682,6 @@ class BottomBar extends Component {
         return this.sheetListRef.el.scrollWidth - this.sheetListRef.el.clientWidth;
     }
 }
-BottomBar.props = {
-    onClick: Function,
-};
 
 css /* scss */ `
   .o-dashboard-clickable-cell {
@@ -51468,6 +51692,7 @@ css /* scss */ `
 let tKey = 1;
 class SpreadsheetDashboard extends Component {
     static template = "o-spreadsheet-SpreadsheetDashboard";
+    static props = {};
     static components = {
         GridOverlay,
         GridPopover,
@@ -51586,7 +51811,6 @@ class SpreadsheetDashboard extends Component {
         return { ...this.canvasPosition, ...this.env.model.getters.getSheetViewDimensionWithHeaders() };
     }
 }
-SpreadsheetDashboard.props = {};
 
 css /* scss */ `
   .o-header-group {
@@ -51614,6 +51838,11 @@ css /* scss */ `
 `;
 class AbstractHeaderGroup extends Component {
     static template = "o-spreadsheet-HeaderGroup";
+    static props = {
+        group: Object,
+        layerOffset: Number,
+        openContextMenu: Function,
+    };
     toggleGroup() {
         const sheetId = this.env.model.getters.getActiveSheetId();
         const { start, end } = this.props.group;
@@ -51650,11 +51879,6 @@ class AbstractHeaderGroup extends Component {
         this.props.openContextMenu(position, menuItems);
     }
 }
-AbstractHeaderGroup.props = {
-    group: Object,
-    layerOffset: Number,
-    openContextMenu: Function,
-};
 class RowGroup extends AbstractHeaderGroup {
     dimension = "ROW";
     get groupBorderStyle() {
@@ -51785,6 +52009,10 @@ css /* scss */ `
 `;
 class HeaderGroupContainer extends Component {
     static template = "o-spreadsheet-HeaderGroupContainer";
+    static props = {
+        dimension: String,
+        layers: Array,
+    };
     static components = { RowGroup, ColGroup, Menu };
     menu = useState({ isOpen: false, position: null, menuItems: [] });
     getLayerOffset(layerIndex) {
@@ -51847,10 +52075,6 @@ class HeaderGroupContainer extends Component {
         }
     }
 }
-HeaderGroupContainer.props = {
-    dimension: String,
-    layers: Array,
-};
 
 css /* scss */ `
   .o-sidePanel {
@@ -51961,14 +52185,6 @@ css /* scss */ `
       text-align: left;
     }
 
-    .o-checkbox {
-      display: flex;
-      justify-items: center;
-      input {
-        margin-right: 5px;
-      }
-    }
-
     .o-inflection {
       table {
         table-layout: fixed;
@@ -52009,6 +52225,11 @@ css /* scss */ `
 `;
 class SidePanel extends Component {
     static template = "o-spreadsheet-SidePanel";
+    static props = {
+        component: String,
+        panelProps: { type: Object, optional: true },
+        onCloseSidePanel: Function,
+    };
     state;
     setup() {
         this.state = useState({
@@ -52022,11 +52243,6 @@ class SidePanel extends Component {
             : this.state.panel.title;
     }
 }
-SidePanel.props = {
-    component: String,
-    panelProps: { type: Object, optional: true },
-    onCloseSidePanel: Function,
-};
 
 css /* scss */ `
   .o-menu-item-button {
@@ -52044,6 +52260,13 @@ css /* scss */ `
 `;
 class ActionButton extends Component {
     static template = "o-spreadsheet-ActionButton";
+    static props = {
+        action: Object,
+        hasTriangleDownIcon: { type: Boolean, optional: true },
+        selectedColor: { type: String, optional: true },
+        class: { type: String, optional: true },
+        onClick: { type: Function, optional: true },
+    };
     actionButton = createAction(this.props.action);
     setup() {
         onWillUpdateProps((nextProps) => {
@@ -52086,13 +52309,6 @@ class ActionButton extends Component {
         return "";
     }
 }
-ActionButton.props = {
-    action: Object,
-    hasTriangleDownIcon: { type: Boolean, optional: true },
-    selectedColor: { type: String, optional: true },
-    class: { type: String, optional: true },
-    onClick: { type: Function, optional: true },
-};
 
 /**
  * List the available borders positions and the corresponding icons.
@@ -52189,6 +52405,17 @@ css /* scss */ `
 `;
 class BorderEditor extends Component {
     static template = "o-spreadsheet-BorderEditor";
+    static props = {
+        class: { type: String, optional: true },
+        currentBorderColor: { type: String, optional: false },
+        currentBorderStyle: { type: String, optional: false },
+        currentBorderPosition: { type: String, optional: true },
+        onBorderColorPicked: Function,
+        onBorderStylePicked: Function,
+        onBorderPositionPicked: Function,
+        maxHeight: { type: Number, optional: true },
+        anchorRect: Object,
+    };
     static components = { ColorPickerWidget, Popover };
     BORDER_POSITIONS = BORDER_POSITIONS;
     lineStyleButtonRef = useRef("lineStyleButton");
@@ -52244,20 +52471,16 @@ class BorderEditor extends Component {
         };
     }
 }
-BorderEditor.props = {
-    class: { type: String, optional: true },
-    currentBorderColor: { type: String, optional: false },
-    currentBorderStyle: { type: String, optional: false },
-    currentBorderPosition: { type: String, optional: true },
-    onBorderColorPicked: Function,
-    onBorderStylePicked: Function,
-    onBorderPositionPicked: Function,
-    maxHeight: { type: Number, optional: true },
-    anchorRect: Object,
-};
 
 class BorderEditorWidget extends Component {
     static template = "o-spreadsheet-BorderEditorWidget";
+    static props = {
+        toggleBorderEditor: Function,
+        showBorderEditor: Boolean,
+        disabled: { type: Boolean, optional: true },
+        dropdownMaxHeight: { type: Number, optional: true },
+        class: { type: String, optional: true },
+    };
     static components = { BorderEditor };
     borderEditorButtonRef = useRef("borderEditorButton");
     state = useState({
@@ -52302,13 +52525,6 @@ class BorderEditorWidget extends Component {
         });
     }
 }
-BorderEditorWidget.props = {
-    toggleBorderEditor: Function,
-    showBorderEditor: Boolean,
-    disabled: { type: Boolean, optional: true },
-    dropdownMaxHeight: { type: Number, optional: true },
-    class: { type: String, optional: true },
-};
 
 const COMPOSER_MAX_HEIGHT = 100;
 /* svg free of use from https://uxwing.com/formula-fx-icon/ */
@@ -52337,6 +52553,12 @@ css /* scss */ `
 `;
 class TopBarComposer extends Component {
     static template = "o-spreadsheet-TopBarComposer";
+    static props = {
+        focus: {
+            validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value),
+        },
+        onComposerContentFocused: Function,
+    };
     static components = { Composer };
     get composerStyle() {
         const style = {
@@ -52359,10 +52581,6 @@ class TopBarComposer extends Component {
         });
     }
 }
-TopBarComposer.props = {
-    focus: { validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value) },
-    onComposerContentFocused: Function,
-};
 
 css /* scss */ `
   .o-font-size-editor {
@@ -52391,6 +52609,11 @@ css /* scss */ `
 `;
 class FontSizeEditor extends Component {
     static template = "o-spreadsheet-FontSizeEditor";
+    static props = {
+        onToggle: Function,
+        dropdownStyle: String,
+        class: String,
+    };
     static components = {};
     fontSizes = FONT_SIZES;
     dropdown = useState({ isOpen: false });
@@ -52447,14 +52670,12 @@ class FontSizeEditor extends Component {
         }
     }
 }
-FontSizeEditor.props = {
-    onToggle: Function,
-    dropdownStyle: String,
-    class: String,
-};
 
 class PaintFormatButton extends Component {
     static template = "o-spreadsheet-PaintFormatButton";
+    static props = {
+        class: { type: String, optional: true },
+    };
     get isActive() {
         return this.env.model.getters.isPaintingFormat();
     }
@@ -52470,9 +52691,6 @@ class PaintFormatButton extends Component {
         }
     }
 }
-PaintFormatButton.props = {
-    class: { type: String, optional: true },
-};
 
 // -----------------------------------------------------------------------------
 // TopBar
@@ -52565,6 +52783,12 @@ css /* scss */ `
 `;
 class TopBar extends Component {
     static template = "o-spreadsheet-TopBar";
+    static props = {
+        onClick: Function,
+        focusComposer: String,
+        onComposerContentFocused: Function,
+        dropdownMaxHeight: Number,
+    };
     get dropdownStyle() {
         return `max-height:${this.props.dropdownMaxHeight}px`;
     }
@@ -52681,12 +52905,6 @@ class TopBar extends Component {
         this.onClick();
     }
 }
-TopBar.props = {
-    onClick: Function,
-    focusComposer: String,
-    onComposerContentFocused: Function,
-    dropdownMaxHeight: Number,
-};
 
 function instantiateClipboard() {
     return new WebClipboardWrapper(navigator.clipboard);
@@ -52919,6 +53137,9 @@ css /* scss */ `
 `;
 class Spreadsheet extends Component {
     static template = "o-spreadsheet-Spreadsheet";
+    static props = {
+        model: Object,
+    };
     static components = {
         TopBar,
         Grid,
@@ -53131,9 +53352,6 @@ class Spreadsheet extends Component {
         return this.env.model.getters.getVisibleGroupLayers(sheetId, "COL");
     }
 }
-Spreadsheet.props = {
-    model: Object,
-};
 
 class LocalTransportService {
     listeners = [];
@@ -56780,6 +56998,6 @@ const constants = {
 export { AbstractChart, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, UIPlugin, __info__, addFunction, astToFormula, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, tokenize };
 
 
-__info__.version = "17.1.0-alpha.6";
-__info__.date = "2024-01-04T12:22:45.921Z";
-__info__.hash = "56dbdc9";
+__info__.version = "17.1.0";
+__info__.date = "2024-01-16T07:47:15.054Z";
+__info__.hash = "87253c7";