react-table-edit 1.5.43 → 1.5.45

package/dist/index.js

@@ -9085,6 +9085,20 @@ var SvgProcess = function (_a) {
         React__namespace.createElement("path", { d: "M22.43 3.87a1.302 1.302 0 0 0-2.545-.374H9.886V1.874a.375.375 0 0 0-.375-.375H2.858a.375.375 0 0 0-.375.375v3.992a.375.375 0 0 0 .375.375h6.653a.375.375 0 0 0 .375-.375V4.245h9.999a1.301 1.301 0 0 0 .867.868v6.344h-.902v-1.62a.376.376 0 0 0-.375-.376h-6.653a.375.375 0 0 0-.375.375v1.62H4.115a1.3 1.3 0 1 0-1.617 1.618v7.055a.375.375 0 0 0 .375.375H5.81v1.621a.375.375 0 0 0 .375.375h6.652a.376.376 0 0 0 .375-.375v-1.62h5.327l-.695.674a.375.375 0 1 0 .522.538l1.357-1.316a.377.377 0 0 0 .006-.544l-1.357-1.316a.375.375 0 1 0-.522.539l.695.674h-5.333v-1.62a.376.376 0 0 0-.375-.376H6.185a.376.376 0 0 0-.375.375v1.621H3.248v-6.68a1.301 1.301 0 0 0 .867-.867h8.332v1.62a.374.374 0 0 0 .375.376h6.653a.374.374 0 0 0 .375-.375v-1.621h1.277a.376.376 0 0 0 .375-.375v-6.72a1.3 1.3 0 0 0 .929-1.242ZM9.137 5.492H3.233V2.25h5.903v3.242ZM6.56 18.508h5.902v3.242H6.56v-3.242Zm-3.687-6.122a.554.554 0 0 1 0-1.108.554.554 0 0 1 0 1.108ZM19.1 13.453h-5.903V10.21H19.1v3.242Zm2.027-9.029a.554.554 0 0 1 0-1.107.554.554 0 0 1 0 1.107Z", fill: props.color || "currentColor" })));
 };
 
+var SvgProjectSetting = function (_a) {
+    var title = _a.title, titleId = _a.titleId, props = __rest$1(_a, ["title", "titleId"]);
+    return (React__namespace.createElement("svg", __assign({ width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", strokeWidth: props.strokeWidth || 1.5, "aria-labelledby": titleId }, props),
+        title ? React__namespace.createElement("title", { id: titleId }, title) : null,
+        React__namespace.createElement("g", { clipPath: "url(#project-setting_svg__a)", fill: props.color || "currentColor" },
+            React__namespace.createElement("path", { d: "M1.266.042C.9.155.53.506.43.834.394.961.375 1.528.375 2.616v1.598l.122.094c.201.16.403.122.51-.094.057-.108.071-.408.071-1.655V1.031l.136-.15.136-.155H19.275l.136.155.136.15v8.916l.14.14c.118.113.17.136.272.108a.533.533 0 0 0 .207-.103c.08-.07.084-.347.084-4.575 0-3.314-.014-4.547-.056-4.683-.07-.234-.366-.572-.619-.708l-.192-.103-9-.009C5.433.009 1.33.024 1.266.042Z" }),
+            React__namespace.createElement("path", { d: "M2.03 2.156a.351.351 0 0 0-.15.136c-.033.061-.052.586-.052 1.481v1.388l.117.112c.061.066.17.118.235.118a.386.386 0 0 0 .234-.118c.108-.103.117-.15.117-.562v-.445h.263c.398 0 .623-.085.862-.329.347-.346.422-.778.206-1.209-.224-.45-.585-.619-1.303-.614-.234 0-.473.019-.53.042Zm1.106.778c.183.155.192.347.028.511-.094.099-.16.118-.375.118h-.258v-.75h.23c.183 0 .262.028.375.121ZM4.477 2.227l-.118.112V5.2l.122.093c.155.122.305.127.446.01.093-.075.112-.141.136-.474l.023-.389.323.37c.446.511.53.582.68.582.169 0 .333-.178.333-.361 0-.108-.075-.225-.328-.511-.178-.202-.328-.385-.328-.403 0-.02.037-.043.084-.057.131-.042.38-.304.483-.506.108-.206.117-.581.023-.806-.098-.24-.389-.488-.651-.567-.136-.042-.422-.07-.675-.07-.403 0-.45.009-.553.117Zm1.12.684c.272.216.07.558-.328.558h-.207v-.657h.207c.136 0 .244.033.328.099ZM7.876 2.184A1.619 1.619 0 0 0 6.84 4.472c.67 1.364 2.657 1.139 3.032-.342.211-.844-.323-1.725-1.185-1.95-.329-.085-.479-.085-.811.004Zm.68.68c.257.07.562.385.632.647.164.614-.356 1.228-.989 1.167a.98.98 0 0 1-.736-.506c-.21-.394-.07-.947.3-1.172.295-.183.492-.216.792-.136ZM11.08 2.166c-.187.089-.206.225-.206 1.378 0 1.232.005 1.218-.323 1.045-.169-.084-.216-.094-.328-.042a.402.402 0 0 0-.197.197c-.075.178 0 .337.234.492.418.281.961.15 1.21-.29.103-.184.108-.23.108-1.398V2.34l-.118-.113c-.122-.126-.22-.14-.38-.06ZM15.3 2.175c-.484.122-.873.445-1.107.914-.15.305-.155 1.003-.005 1.327.14.309.478.651.797.81.235.118.328.136.67.141.343 0 .436-.019.666-.131.488-.24.656-.61.384-.825-.173-.136-.253-.127-.501.07-.638.497-1.505-.01-1.43-.83.066-.642.746-.998 1.36-.707.271.126.323.126.478.004.145-.112.169-.365.042-.492-.258-.258-.914-.393-1.355-.281ZM17.19 2.203a.29.29 0 0 0-.128.263c0 .243.132.346.446.346h.258v2.386l.122.094c.154.122.304.127.445.01.112-.09.112-.094.126-1.29l.014-1.2h.254c.215 0 .262-.018.346-.121.122-.155.127-.305.01-.446-.09-.108-.113-.112-.928-.126-.797-.014-.844-.01-.966.084ZM12.268 2.212a.55.55 0 0 0-.127.193c-.06.178-.065 2.56 0 2.733.09.23.16.248.872.253.628 0 .661-.005.76-.108.145-.155.135-.375-.02-.497-.107-.084-.191-.098-.538-.098h-.418v-.563h.352c.403 0 .558-.056.633-.23.056-.14.005-.342-.103-.412-.033-.019-.24-.047-.46-.061l-.398-.024-.014-.271-.014-.268h.417c.351 0 .436-.014.544-.098a.35.35 0 0 0 .028-.511c-.085-.084-.155-.094-.764-.094-.464 0-.694.019-.75.056ZM.478 5.452l-.103.112.01 8.456.013 8.457.15.318c.179.37.535.764.849.938.501.272.408.267 4.945.267h4.163l.112-.117c.15-.145.15-.324 0-.469l-.112-.117H3.938l.14-.22c.277-.432.338-.68.366-1.44.023-.68.023-.703.154-.843l.127-.146H22.65l.14.16.141.154-.018.713c-.015.675-.02.717-.141.928-.174.29-.455.52-.745.614-.216.07-.718.08-5.185.08h-4.94l-.113.117c-.15.145-.15.323 0 .469l.113.117h4.959c5.414 0 5.236.01 5.742-.267.314-.174.67-.567.849-.938.145-.31.15-.337.164-1.064.018-.876-.02-1.064-.286-1.369-.357-.407-.394-.417-1.824-.43l-1.256-.015v-.539l.295.019c.53.033.77-.174 1.252-1.083.16-.295.192-.408.192-.614 0-.417-.197-.712-.652-.966l-.178-.103v-1.153l.178-.103c.46-.258.647-.54.647-.966 0-.22-.032-.323-.192-.623-.478-.895-.717-1.106-1.247-1.073l-.295.018v-.694c0-.632-.01-.703-.094-.787-.126-.127-.38-.122-.497.005-.08.089-.089.187-.103.867-.01.422-.023.769-.028.769-.01 0-.14-.075-.29-.165a2.169 2.169 0 0 0-.38-.192c-.099-.028-.108-.056-.108-.318 0-.385-.07-.605-.248-.811-.249-.286-.436-.342-1.14-.342-.346 0-.684.023-.773.056-.436.15-.651.482-.651 1.012v.338l-.291.145c-.164.08-.385.211-.497.286l-.202.14-.323-.168c-.24-.127-.375-.169-.544-.169-.272 0-.558.122-.726.31-.178.192-.647 1.04-.68 1.228-.08.417.131.82.558 1.068l.29.174v1.144l-.29.173c-.427.248-.638.651-.558 1.069.033.187.502 1.036.68 1.228.168.187.454.31.726.31.169 0 .305-.043.544-.17l.323-.168.202.14c.112.075.333.207.497.286.258.131.29.164.29.286v.14l-5.657.01-5.663.014-.192.103c-.21.113-.51.422-.59.615-.029.07-.066.454-.085.857-.023.67-.038.75-.16.994-.482.994-1.8 1.04-2.362.09l-.126-.221-.024-8.428-.023-8.433-.113-.09c-.15-.121-.342-.112-.464.02Zm17.494 6.417c.056.08.075.225.075.553 0 .408.01.46.108.548a.67.67 0 0 0 .22.131c.22.066.727.352.956.54.122.103.267.187.319.187.052 0 .277-.098.502-.22.539-.286.567-.277.886.267.351.595.337.656-.17.96-.215.127-.412.273-.44.32-.028.056-.028.215.01.487.037.305.037.511 0 .82-.066.511-.061.526.445.826.492.295.501.356.155.946-.32.544-.347.553-.886.267-.225-.121-.45-.22-.502-.22-.052 0-.197.085-.319.192a4.262 4.262 0 0 1-.675.404c-.618.3-.61.29-.61.703v.342H16.642v-.296c0-.417-.057-.492-.493-.675a4.13 4.13 0 0 1-.721-.412c-.193-.14-.39-.258-.441-.258-.052 0-.258.099-.46.216-.52.305-.562.29-.895-.263-.15-.243-.272-.487-.272-.543 0-.122.132-.24.525-.464.361-.207.422-.32.361-.638a4.085 4.085 0 0 1-.037-.534c0-.183.019-.422.037-.535.061-.319 0-.431-.36-.637-.394-.225-.526-.342-.526-.464 0-.056.122-.3.272-.544.333-.553.366-.563.89-.262.202.117.413.215.465.215.051 0 .248-.117.44-.258.193-.14.516-.328.722-.412.254-.108.394-.197.432-.272.033-.066.06-.29.06-.53 0-.586.005-.59.708-.59.516 0 .558.004.624.103Zm1.575 7.701v.352h-.797v-.155c0-.131.023-.16.202-.234.112-.042.276-.132.365-.197a.953.953 0 0 1 .197-.117c.019 0 .033.16.033.351Z" }),
+            React__namespace.createElement("path", { d: "M16.683 14.358c-.478.201-.811.515-1.022.965-.103.23-.122.324-.122.732 0 .436.01.492.15.778.183.375.52.703.895.876.235.113.324.127.76.127.45 0 .515-.014.773-.136a1.867 1.867 0 0 0 1.013-1.378c.13-.745-.305-1.566-1.013-1.908-.234-.112-.351-.136-.726-.15-.385-.014-.483 0-.708.094Zm1.106.684c.413.188.647.558.647 1.013 0 .633-.469 1.097-1.106 1.101-.46 0-.807-.215-.999-.633a1.129 1.129 0 0 1 .567-1.504c.207-.09.67-.08.891.023ZM2.742 6.21a.386.386 0 0 0-.117.235c0 .066.052.174.117.235l.113.117H17.77l.113-.117c.15-.146.15-.324 0-.47l-.113-.116H2.855l-.113.117ZM2.892 7.753c-.422.155-.764.506-.876.919-.028.094-.047.928-.047 1.955 0 1.678.004 1.809.093 2.043.113.296.39.59.694.746l.22.107h6.516l.267-.13c.15-.076.343-.216.432-.324.304-.352.309-.403.309-2.494 0-1.875 0-1.88-.113-2.114-.14-.305-.487-.614-.792-.703-.333-.099-6.426-.103-6.703-.005Zm6.553.703c.09.038.207.14.258.225.09.15.094.235.094 1.932 0 1.706-.005 1.78-.094 1.93-.192.31-.14.305-3.539.291-3.394-.014-3.197.005-3.398-.332-.09-.141-.094-.249-.094-1.885 0-1.94.005-1.964.333-2.142.15-.08.342-.084 3.22-.084 2.555 0 3.084.009 3.22.065Z" }),
+            React__namespace.createElement("path", { d: "M6.623 9.047a.351.351 0 0 0-.15.136c-.032.06-.051.604-.051 1.542 0 1.36.005 1.458.089 1.56.089.113.094.113 1.275.127 1.266.014 1.397-.004 1.49-.206.07-.16.07-2.826 0-2.986a.368.368 0 0 0-.168-.169c-.136-.06-2.33-.065-2.485-.004Zm2.002 1.664v1.008h-1.5V9.703h1.5v1.008ZM3.281 10.406c-.089.09-.094.155-.094.957v.867l.122.093c.118.094.183.099 1.308.099s1.19-.005 1.308-.099l.122-.093v-.867c0-.802-.005-.868-.094-.957-.089-.089-.155-.094-1.336-.094s-1.247.005-1.336.094Zm2.063.961v.352H3.89v-.703H5.344v.351ZM11.587 9.08c-.032.014-.089.08-.126.154-.09.17-.019.39.145.464.085.038 1.064.052 3.469.052h3.351l.113-.117a.386.386 0 0 0 .117-.235.386.386 0 0 0-.117-.234l-.113-.117-3.389.005c-1.865 0-3.417.014-3.45.028ZM11.526 10.49c-.155.127-.14.366.024.512l.126.107H15.895l.112-.117c.15-.145.155-.347.01-.483-.108-.103-.117-.103-2.245-.103-2.007 0-2.143.005-2.246.085ZM2.063 14.54c-.183.198-.075.512.197.577.061.014 2.25.019 4.87.014 4.613-.014 4.772-.018 4.866-.103.127-.117.131-.37.005-.497-.094-.094-.155-.094-4.969-.094h-4.87l-.099.104ZM2.062 15.89c-.202.202-.066.53.244.587.084.014 2.419.023 5.184.014l5.034-.014.09-.113c.117-.14.112-.356-.005-.473-.094-.094-.155-.094-5.274-.094-5.118 0-5.18 0-5.273.094ZM2.175 17.175a.332.332 0 0 0-.112.544c.094.093.155.093 4.987.093h4.899l.07-.103c.108-.15.094-.38-.023-.487-.094-.085-.253-.09-4.89-.099-3.946-.009-4.809 0-4.93.052ZM2.17 18.563c-.215.089-.267.389-.093.553.108.103.108.103 2.503.103 2.212 0 2.4-.005 2.489-.085a.435.435 0 0 0 .131-.206c.024-.103 0-.155-.112-.272l-.141-.14-2.339.004c-1.284 0-2.381.02-2.438.043Z" })),
+        React__namespace.createElement("defs", null,
+            React__namespace.createElement("clipPath", { id: "project-setting_svg__a" },
+                React__namespace.createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" })))));
+};
+
 var SvgQuoteRight = function (_a) {
     var title = _a.title, titleId = _a.titleId, props = __rest$1(_a, ["title", "titleId"]);
     return (React__namespace.createElement("svg", __assign({ width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", strokeWidth: props.strokeWidth || 1.5, "aria-labelledby": titleId }, props),
@@ -9253,6 +9267,13 @@ var SvgSettings = function (_a) {
         React__namespace.createElement("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })));
 };
 
+var SvgShapeGroup = function (_a) {
+    var title = _a.title, titleId = _a.titleId, props = __rest$1(_a, ["title", "titleId"]);
+    return (React__namespace.createElement("svg", __assign({ width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", strokeWidth: props.strokeWidth || 1.5, "aria-labelledby": titleId }, props),
+        title ? React__namespace.createElement("title", { id: titleId }, title) : null,
+        React__namespace.createElement("path", { d: "M24 15h-4.91l4.336 7.5H6.973l3.129-5.426a6.965 6.965 0 0 1-1.618.68A6.784 6.784 0 0 1 6.75 18a6.677 6.677 0 0 1-4.77-1.98 6.952 6.952 0 0 1-1.44-2.145A6.681 6.681 0 0 1 0 11.25a6.677 6.677 0 0 1 1.98-4.77 6.952 6.952 0 0 1 2.145-1.44A6.681 6.681 0 0 1 6.75 4.5c.664 0 1.313.094 1.945.281a6.579 6.579 0 0 1 1.805.856V1.5H24V15ZM6.75 16.5c.727 0 1.406-.137 2.04-.41a5.208 5.208 0 0 0 1.663-1.137 5.488 5.488 0 0 0 1.125-1.664A5.17 5.17 0 0 0 12 11.25c0-.719-.137-1.395-.41-2.027a5.448 5.448 0 0 0-1.125-1.676A5.054 5.054 0 0 0 8.8 6.422 5.555 5.555 0 0 0 6.75 6c-.727 0-1.406.137-2.04.41A5.305 5.305 0 0 0 1.923 9.2a5.258 5.258 0 0 0-.422 2.05c0 .727.137 1.406.41 2.04a5.305 5.305 0 0 0 2.79 2.788 5.257 5.257 0 0 0 2.05.422ZM20.824 21a1846.92 1846.92 0 0 1-2.812-4.875 1846.92 1846.92 0 0 0-2.813-4.875 1846.92 1846.92 0 0 0-2.812 4.875c-.93 1.617-1.867 3.242-2.813 4.875h11.25ZM22.5 3H12v4.066A6.7 6.7 0 0 1 13.102 9c.257.703.39 1.438.398 2.203l1.7-2.953 3.023 5.25H22.5V3Z", fill: props.color || "currentColor" })));
+};
+
 var SvgShare2 = function (_a) {
     var title = _a.title, titleId = _a.titleId, props = __rest$1(_a, ["title", "titleId"]);
     return (React__namespace.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: props.strokeWidth || 1.5, strokeLinecap: "round", strokeLinejoin: "round", className: "share-2_svg__feather share-2_svg__feather-share-2", "aria-labelledby": titleId }, props),
@@ -10480,6 +10501,7 @@ var Icon = /*#__PURE__*/Object.freeze({
   Power: SvgPower,
   Printer: SvgPrinter,
   Process: SvgProcess,
+  ProjectSetting: SvgProjectSetting,
   QuoteRight: SvgQuoteRight,
   Radio: SvgRadio,
   RefreshCcw: SvgRefreshCcw,
@@ -10499,6 +10521,7 @@ var Icon = /*#__PURE__*/Object.freeze({
   SendHorFill: SvgSendHorFill,
   Server: SvgServer,
   Settings: SvgSettings,
+  ShapeGroup: SvgShapeGroup,
   Share: SvgShare,
   Share2: SvgShare2,
   Share3: SvgShare3,
@@ -19965,45 +19988,46 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
     };
     const applySetting = (cols) => {
         return cols.map((cell) => {
-            const setting = settingColumns?.find((s) => s.field === cell.field);
+            const newCell = { ...cell };
+            const setting = settingColumns?.find((s) => s.field === newCell.field);
             if (setting) {
-                cell.sortOrder = setting.sortOrder;
-                if (!cell.visibleLocked) {
-                    cell.visible = setting.visible ?? true;
+                newCell.sortOrder = setting.sortOrder;
+                if (!newCell.visibleLocked) {
+                    newCell.visible = setting.visible ?? true;
                 }
-                cell.fixedType = setting.fixedType;
+                newCell.fixedType = setting.fixedType;
                 if (setting.width !== undefined && setting.width !== null) {
-                    cell.width = setting.width;
+                    newCell.width = setting.width;
                 }
                 if (setting.fraction !== undefined && setting.fraction !== null) {
-                    if (cell.numericSettings) {
-                        cell.numericSettings.fraction = setting.fraction;
+                    if (newCell.numericSettings) {
+                        newCell.numericSettings.fraction = setting.fraction;
                     }
                     else {
-                        cell.numericSettings = { fraction: setting.fraction };
+                        newCell.numericSettings = { fraction: setting.fraction };
                     }
                 }
-                cell.headerDisplay = setting.headerText || (cell.headerDisplay ?? cell.headerText);
+                newCell.headerDisplay = setting.headerText || (newCell.headerDisplay ?? newCell.headerText);
             }
             else {
-                if (cell.columns?.length) {
-                    cell.columns = applySetting(cell.columns);
-                    cell.sortOrder = cell.columns[0].sortOrder;
-                    if (cell.columns.some((x) => x.visible !== false)) {
-                        cell.visible = true;
+                if (newCell.columns?.length) {
+                    newCell.columns = applySetting(newCell.columns);
+                    newCell.sortOrder = newCell.columns[0].sortOrder;
+                    if (newCell.columns.some((x) => x.visible !== false)) {
+                        newCell.visible = true;
                     }
                     else {
-                        cell.visible = false;
+                        newCell.visible = false;
                     }
                 }
                 else {
-                    if (!cell.visibleLocked) {
-                        cell.visible = false;
+                    if (!newCell.visibleLocked) {
+                        newCell.visible = false;
                     }
                 }
             }
-            cell.isGroup = groupColumns?.includes(cell.field);
-            return cell;
+            newCell.isGroup = groupColumns?.includes(newCell.field);
+            return newCell;
         });
     };
     const traverse = (cols, level = 0) => {
@@ -20047,10 +20071,8 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
         }, 0);
     };
     calcTotalRightWidth(columns);
-    if ((settingColumns?.length ?? 0) > 0) {
-        applySetting(columns);
-    }
-    traverse(columns);
+    const newColumns = (settingColumns?.length ?? 0) > 0 ? applySetting(columns) : columns;
+    traverse(newColumns);
     // Danh sách các cột được hiển thị
     // const flatVisble = flat.filter((e) => e.visible !== false)
     const flatVisbleContent = flat.filter((x) => x.visible !== false && x.field !== 'command' && x.field !== '#' && x.field !== 'checkbox');
@@ -20275,7 +20297,7 @@ const TableElement$1 = React__default["default"].memo((props) => {
 
 const defaultMaxHeight$1 = 250;
 const SelectTable = React$5.forwardRef((props, ref) => {
-    const { id, menuWidth, width, invalid, placeholder, textAlign, options, columns, value, fieldValue, fieldLabel, maxHeight, isClearable, component, isMulti, noHeader, isDisabled, showFooter, formatSetting, allowCreate, onPaste, onChange, handleAdd, onKeyDown, onOpenMenu, loadOptions, onCloseMenu, footerComponent, formatOptionLabel, compareFunction, } = props;
+    const { id, menuWidth, width, invalid, placeholder, textAlign, options, columns, value, fieldValue, fieldLabel, maxHeight, isClearable, component, isMulti, noHeader, isDisabled, showFooter, formatSetting, allowCreate, onPaste, onChange, handleAdd, onKeyDown, onOpenMenu, loadOptions, onCloseMenu, footerComponent, formatOptionLabel, compareFunction } = props;
     const selectTableRef = React$5.useRef(null);
     const selectMenuTableRef = React$5.useRef(null);
     const inputRef = React$5.useRef(null);
@@ -20292,8 +20314,8 @@ const SelectTable = React$5.forwardRef((props, ref) => {
         {
             headerText: 'Name',
             field: fieldLabel ?? 'label',
-            width: menuWidth,
-        },
+            width: menuWidth
+        }
     ];
     const closeMenu = () => {
         setDropdownOpen(false);
@@ -20307,7 +20329,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                 ...val,
                 [fieldLabel ?? 'label']: val.valueCreate,
                 isCreated: undefined,
-                isCreatedItem: true,
+                isCreatedItem: true
             };
             options.unshift(newVal);
             onChange(newVal);
@@ -20317,9 +20339,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
     };
     React$5.useEffect(() => {
         if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
-            const index = currentOptions?.findIndex((row) => compareFunction
-                ? compareFunction(row)
-                : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']);
+            const index = currentOptions?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']));
             if (index >= 0) {
                 selectMenuTableRef.current.scrollTo({ top: (index - 1) * 30 });
             }
@@ -20366,28 +20386,14 @@ const SelectTable = React$5.forwardRef((props, ref) => {
             }
         }
     };
-    const listKeyUse = [
-        'Escape',
-        'Space',
-        'Enter',
-        'Tab',
-        'NumpadEnter',
-        'ArrowDown',
-        'ArrowUp',
-        'F9',
-    ];
+    const listKeyUse = ['Escape', 'Space', 'Enter', 'Tab', 'NumpadEnter', 'ArrowDown', 'ArrowUp', 'F9'];
     const handleOnKeyDown = (e) => {
         let key = '';
         if (onKeyDown &&
             (!dropdownOpen ||
                 !listKeyUse.includes(e.code) ||
-                ((e.code === 'Enter' ||
-                    e.code === 'Tab' ||
-                    e.code === 'NumpadEnter' ||
-                    e.code === 'Space') &&
-                    !(currentOptions[indexFocus] || haveCreateNew)) ||
-                ((e.code === 'ArrowDown' || e.code === 'ArrowUp') &&
-                    currentOptions.length === 0) ||
+                ((e.code === 'Enter' || e.code === 'Tab' || e.code === 'NumpadEnter' || e.code === 'Space') && !(currentOptions[indexFocus] || haveCreateNew)) ||
+                ((e.code === 'ArrowDown' || e.code === 'ArrowUp') && currentOptions.length === 0) ||
                 (e.code === 'Escape' && !(isClearable && value && !isDisabled)))) {
             key = onKeyDown(e);
         }
@@ -20404,7 +20410,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                         valueCreate: searchTerm,
                         [fieldValue ?? 'value']: searchTerm,
                         [fieldLabel ?? 'label']: `${t('Create')} '${searchTerm}'`,
-                        isCreated: true,
+                        isCreated: true
                     };
                 }
                 else {
@@ -20426,16 +20432,14 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                     flag = true;
                 }
             }
-            else if (e.code === 'Enter' ||
-                e.code === 'Tab' ||
-                e.code === 'NumpadEnter') {
+            else if (e.code === 'Enter' || e.code === 'Tab' || e.code === 'NumpadEnter') {
                 let newItem;
                 if (haveCreateNew && indexFocus === 0) {
                     newItem = {
                         valueCreate: searchTerm,
                         [fieldValue ?? 'value']: searchTerm,
                         [fieldLabel ?? 'label']: `${t('Create')} '${searchTerm}'`,
-                        isCreated: true,
+                        isCreated: true
                     };
                 }
                 else {
@@ -20454,10 +20458,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                         newIndex = indexFocus + 1;
                     }
                     else if (value) {
-                        newIndex =
-                            currentOptions?.findIndex((row) => compareFunction
-                                ? compareFunction(row)
-                                : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']) + 1;
+                        newIndex = currentOptions?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value'])) + 1;
                     }
                     if (newIndex < currentOptions.length) {
                         setIndexFocus(newIndex);
@@ -20481,10 +20482,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                         newIndex = indexFocus - 1;
                     }
                     else if (value) {
-                        newIndex =
-                            currentOptions?.findIndex((row) => compareFunction
-                                ? compareFunction(row)
-                                : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']) - 1;
+                        newIndex = currentOptions?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value'])) - 1;
                     }
                     if (newIndex >= 0) {
                         setIndexFocus(newIndex);
@@ -20517,11 +20515,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                     scrollToElement(selectMenuTableRef.current, selectMenuTableRef.current.scrollHeight);
                 }
                 else if (flag === 0 && rect.bottom + 30 > parentRect.bottom) {
-                    scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop -
-                        selectMenuTableRef.current.offsetTop -
-                        parentRect.height +
-                        rect.height +
-                        50);
+                    scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop - selectMenuTableRef.current.offsetTop - parentRect.height + rect.height + 50);
                 }
                 else if (flag === 2 && rect.top < parentRect.top + 50) {
                     scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop - 65);
@@ -20535,7 +20529,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
         timeOutElement = setTimeout(() => {
             elemment.scrollTo({
                 top,
-                behavior: 'smooth',
+                behavior: 'smooth'
             });
         }, 100);
     };
@@ -20545,12 +20539,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
         }
         for (let index = 0; index < columnsSearch.length; index++) {
             const key = columnsSearch[index].field.trim();
-            if (data[key] &&
-                data[key]
-                    .toString()
-                    .trim()
-                    .toLowerCase()
-                    .includes(keyword.trim().toLowerCase())) {
+            if (data[key] && data[key].toString().trim().toLowerCase().includes(keyword.trim().toLowerCase())) {
                 return true;
             }
         }
@@ -20566,8 +20555,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
         if (!searchTerm) {
             setOptionsLoad(undefined);
         }
-        else if (allowCreate &&
-            !currentOptions?.find((x) => x[fieldLabel ?? 'label'] === searchTerm)) {
+        else if (allowCreate && !currentOptions?.find((x) => x[fieldLabel ?? 'label'] === searchTerm)) {
             setHaveCreateNew(true);
             return;
         }
@@ -20581,22 +20569,15 @@ const SelectTable = React$5.forwardRef((props, ref) => {
         const { indexRow, row, isSelected, level = 0 } = props;
         return (jsxRuntime.jsxs("tr", { id: `row-select-table-${indexRow}`, style: { paddingLeft: 10 * level }, className: classNames$1('r-select-row', { 'last-row': indexRow === currentOptions.length - 1 }, { 'fisrt-row': indexRow === 0 }), children: [isMulti && (jsxRuntime.jsx("td", { className: classNames$1(`r-select-rowcell`, {
                         'r-select-move': indexFocus === indexRow,
-                        'r-select-active': !isMulti &&
-                            value &&
-                            (compareFunction
-                                ? compareFunction(row)
-                                : value[fieldValue ?? 'value'] ===
-                                    row[fieldValue ?? 'value']),
+                        'r-select-active': !isMulti && value && (compareFunction ? compareFunction(row) : value[fieldValue ?? 'value'] === row[fieldValue ?? 'value'])
                     }), style: {
                         width: 40,
                         textAlign: 'center',
                         padding: 0,
-                        paddingBottom: 6,
+                        paddingBottom: 6
                     }, onClick: (e) => {
                         if (isMulti) {
-                            const index = value?.findIndex((x) => compareFunction
-                                ? compareFunction(row)
-                                : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']);
+                            const index = value?.findIndex((x) => (compareFunction ? compareFunction(row) : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']));
                             if (index > -1) {
                                 value?.splice(index, 1);
                                 handChange([...value]);
@@ -20614,42 +20595,28 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                         }
                     }, children: jsxRuntime.jsx(Input$1, { checked: isSelected, type: "checkbox", className: "cursor-pointer", onChange: () => { }, style: { textAlign: 'center', marginTop: 6 } }) })), (columns ? columns : defaultColumns).map((col, indexCol) => {
                     let valueDisplay = row[col.field];
-                    if (col.type === 'numeric' ||
-                        (col.typeCondition && col.typeCondition(row) === 'numeric')) {
-                        valueDisplay =
-                            formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? '.', formatSetting?.thousandSeparator ?? ',', col.fraction ?? 0, true, false) ?? 0;
+                    if (col.type === 'numeric' || (col.typeCondition && col.typeCondition(row) === 'numeric')) {
+                        valueDisplay = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? '.', formatSetting?.thousandSeparator ?? ',', col.fraction ?? 0, true, false) ?? 0;
                     }
                     else if (col.type === 'date') {
-                        valueDisplay = valueDisplay
-                            ? formatDateTime(valueDisplay, formatSetting?.dateFormat)
-                            : '';
+                        valueDisplay = valueDisplay ? formatDateTime(valueDisplay, formatSetting?.dateFormat) : '';
                     }
                     else if (col.type === 'datetime') {
-                        valueDisplay = valueDisplay
-                            ? formatDateTime(valueDisplay, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
-                            : '';
+                        valueDisplay = valueDisplay ? formatDateTime(valueDisplay, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
                     }
                     return (jsxRuntime.jsxs(React$5.Fragment, { children: [col.visible !== false && (jsxRuntime.jsx("td", { id: `select-${id}-${indexRow}-${indexCol}`, 
                                 // ref={refRow}
                                 className: classNames$1(`r-select-rowcell`, {
                                     'r-select-move': indexFocus === indexRow,
-                                    'r-select-active': !isMulti &&
-                                        value &&
-                                        (compareFunction
-                                            ? compareFunction(row)
-                                            : value[fieldValue ?? 'value'] ===
-                                                row[fieldValue ?? 'value']),
+                                    'r-select-active': !isMulti && value && (compareFunction ? compareFunction(row) : value[fieldValue ?? 'value'] === row[fieldValue ?? 'value'])
                                 }), style: {
                                     minWidth: col.minWidth,
                                     width: col.width,
                                     maxWidth: col.maxWidth,
-                                    textAlign: col.textAlign ? col.textAlign : 'left',
+                                    textAlign: col.textAlign ? col.textAlign : 'left'
                                 }, onClick: (e) => {
                                     if (isMulti) {
-                                        const index = value?.findIndex((x) => compareFunction
-                                            ? compareFunction(row)
-                                            : x[fieldValue ?? 'value'] ===
-                                                row[fieldValue ?? 'value']);
+                                        const index = value?.findIndex((x) => (compareFunction ? compareFunction(row) : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']));
                                         if (index > -1) {
                                             value?.splice(index, 1);
                                             handChange([...value]);
@@ -20676,7 +20643,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                                         setIndexFocus(indexRow);
                                     }
                                     e.stopPropagation();
-                                }, children: col.template ? (col.template(row, indexRow)) : col.type === 'numeric' && Number(row[col.field]) < 0 ? (jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] })) : (valueDisplay) }, `col-${indexRow}-${indexCol}`)), checkOverflow(indexRow, indexCol) && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay }))] }, indexCol));
+                                }, children: col.template ? col.template(row, indexRow) : col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : valueDisplay }, `col-${indexRow}-${indexCol}`)), checkOverflow(indexRow, indexCol) && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay }))] }, indexCol));
                 })] }, `row-${indexRow}`));
     });
     return (jsxRuntime.jsx("div", { className: classNames$1('react-select-table', { 'is-invalid': invalid }), ref: ref, id: id, children: jsxRuntime.jsx("div", { ref: selectTableRef, children: jsxRuntime.jsxs(Dropdown$1$1, { isOpen: dropdownOpen, toggle: () => { }, onMouseDown: (e) => e.preventDefault(), children: [jsxRuntime.jsxs(DropdownToggle$1, { onClick: (e) => {
@@ -20686,26 +20653,14 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                             }
                             e.preventDefault();
                         }, tag: "div", style: {
-                            width: width
-                                ? width
-                                : selectTableRef?.current?.clientWidth
-                                    ? selectTableRef?.current?.clientWidth
-                                    : 'auto',
+                            width: width ? width : selectTableRef?.current?.clientWidth ? selectTableRef?.current?.clientWidth : 'auto'
                         }, className: classNames$1('select-table-control', { 'r-select-is-disabled': isDisabled }, { 'r-select-is-open': dropdownOpen }, { 'r-select-is-focus': isFocus }, { 'r-select-is-invalid': invalid }), children: [jsxRuntime.jsxs("div", { className: "select-table-container", children: [isMulti ? (jsxRuntime.jsx("div", { className: classNames$1('select-value is-mutil', {
-                                            'd-none': searchTerm,
+                                            'd-none': searchTerm
                                         }), children: value?.map((ele, index) => {
-                                            return (jsxRuntime.jsxs("span", { children: [index === 0 ? '' : ', ', formatOptionLabel
-                                                        ? formatOptionLabel(ele)
-                                                        : ele[fieldLabel ?? 'label']] }, index));
+                                            return (jsxRuntime.jsxs("span", { children: [index === 0 ? '' : ', ', formatOptionLabel ? formatOptionLabel(ele) : ele[fieldLabel ?? 'label']] }, index));
                                         }) })) : (jsxRuntime.jsxs("div", { className: classNames$1('select-value', {
-                                            'd-none': searchTerm,
-                                        }), children: [value
-                                                ? formatOptionLabel
-                                                    ? formatOptionLabel(value)
-                                                    : value[fieldLabel ?? 'label']
-                                                : '', ' '] })), !((isMulti ? value?.length > 0 : value) ||
-                                        isDisabled ||
-                                        searchTerm) && (jsxRuntime.jsx("div", { className: classNames$1('select-placeholder'), children: placeholder })), jsxRuntime.jsx("div", { className: "input-container", children: jsxRuntime.jsx("input", { style: { textAlign: textAlign ?? 'left' }, ref: inputRef, className: classNames$1('select-input'), readOnly: isDisabled, value: searchTerm, onPaste: (e) => onPaste && !dropdownOpen && onPaste(e), onChange: (val) => {
+                                            'd-none': searchTerm
+                                        }), children: [value ? (formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? 'label']) : '', ' '] })), !((isMulti ? value?.length > 0 : value) || isDisabled || searchTerm) && jsxRuntime.jsx("div", { className: classNames$1('select-placeholder'), children: placeholder }), jsxRuntime.jsx("div", { className: "input-container", children: jsxRuntime.jsx("input", { style: { textAlign: textAlign ?? 'left' }, ref: inputRef, className: classNames$1('select-input'), readOnly: isDisabled, value: searchTerm, onPaste: (e) => onPaste && !dropdownOpen && onPaste(e), onChange: (val) => {
                                                 if (val.target.value) {
                                                     if (loadOptions && val.target.value) {
                                                         setIsLoading(true);
@@ -20727,23 +20682,21 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                             width: width ? width + 2 : 'min-content',
                             position: 'fixed',
                             borderRadius: 4,
-                            zIndex: 9999,
+                            zIndex: 9999
                         }, children: jsxRuntime.jsx(DropdownItem$1, { className: classNames$1('p-0 menu-select-table'), tag: "div", header: true, children: dropdownOpen && (jsxRuntime.jsx("div", { style: { backgroundColor: 'none' }, onMouseDown: (e) => {
                                     if (!isDisabled) {
                                         inputRef?.current.focus();
                                         e.preventDefault();
                                     }
                                 }, children: jsxRuntime.jsxs("div", { className: "r-select-grid", children: [jsxRuntime.jsx("div", { className: classNames$1('r-select-gridtable', {
-                                                'no-header': noHeader || (columns?.length ?? 0) === 0,
+                                                'no-header': noHeader || (columns?.length ?? 0) === 0
                                             }), ref: selectMenuTableRef, style: {
                                                 width: menuWidth,
                                                 minWidth: selectTableRef?.current?.clientWidth,
-                                                maxHeight: maxHeight ?? defaultMaxHeight$1,
+                                                maxHeight: maxHeight ?? defaultMaxHeight$1
                                             }, children: jsxRuntime.jsx(TableElement$1, { haveCreateNew: haveCreateNew, isLoading: isLoading, searchTerm: searchTerm, fieldLabel: fieldLabel, noHeader: noHeader, closeMenu: closeMenu, value: value, isMulti: isMulti, currentOptions: currentOptions, fieldValue: fieldValue, columns: columns, defaultColumns: defaultColumns, indexFocus: indexFocus, formatSetting: formatSetting, handChange: handChange, compareFunction: compareFunction, setIndexFocus: setIndexFocus, setSearchTerm: setSearchTerm }) }), jsxRuntime.jsxs("div", { className: classNames$1('r-select-footer', {
-                                                'd-none': !(showFooter === true ||
-                                                    handleAdd ||
-                                                    isMulti),
-                                            }), children: [jsxRuntime.jsxs(Button$1$1, { outline: true, color: "primary", onClick: () => handleAdd?.(), className: classNames$1('r-btn d-flex align-items-center', { 'd-none': !handleAdd }), children: [jsxRuntime.jsx(SvgPlus, { className: "me-50", fontSize: 16 }), t('AddNew'), " (F9)"] }), isMulti && (jsxRuntime.jsx("div", { className: "ms-50 text-primary h-100 d-flex align-items-center", children: t('countSelected', { item: value?.length ?? 0 }) })), footerComponent ? footerComponent() : null] })] }) })) }) })] }) }) }));
+                                                'd-none': !(showFooter === true || handleAdd || isMulti)
+                                            }), children: [jsxRuntime.jsxs(Button$1$1, { outline: true, color: "primary", onClick: () => handleAdd?.(), className: classNames$1('r-btn d-flex align-items-center', { 'd-none': !handleAdd }), children: [jsxRuntime.jsx(SvgPlus, { className: "me-50", fontSize: 16 }), t('AddNew'), " (F9)"] }), isMulti && jsxRuntime.jsx("div", { className: "ms-50 text-primary h-100 d-flex align-items-center", children: t('countSelected', { item: value?.length ?? 0 }) }), footerComponent ? footerComponent() : null] })] }) })) }) })] }) }) }));
 });
 
 const PagingComponent = ({ totalItem, gridRef, pageSize, currentPage, onChangePage, pageOptions, onChangePageSize }) => {
@@ -25669,6 +25622,72 @@ function startOfYear(date, options) {
   return date_;
 }
 
+/**
+ * The {@link eachYearOfInterval} function options.
+ */
+
+/**
+ * The {@link eachYearOfInterval} function result type. It resolves the proper data type.
+ * It uses the first argument date object type, starting from the date argument,
+ * then the start interval date, and finally the end interval date. If
+ * a context function is passed, it uses the context function return type.
+ */
+
+/**
+ * @name eachYearOfInterval
+ * @category Interval Helpers
+ * @summary Return the array of yearly timestamps within the specified time interval.
+ *
+ * @description
+ * Return the array of yearly timestamps within the specified time interval.
+ *
+ * @typeParam IntervalType - Interval type.
+ * @typeParam Options - Options type.
+ *
+ * @param interval - The interval.
+ * @param options - An object with options.
+ *
+ * @returns The array with starts of yearly timestamps from the month of the interval start to the month of the interval end
+ *
+ * @example
+ * // Each year between 6 February 2014 and 10 August 2017:
+ * const result = eachYearOfInterval({
+ *   start: new Date(2014, 1, 6),
+ *   end: new Date(2017, 7, 10)
+ * })
+ * //=> [
+ * //   Wed Jan 01 2014 00:00:00,
+ * //   Thu Jan 01 2015 00:00:00,
+ * //   Fri Jan 01 2016 00:00:00,
+ * //   Sun Jan 01 2017 00:00:00
+ * // ]
+ */
+function eachYearOfInterval(interval, options) {
+  const { start, end } = normalizeInterval(options?.in, interval);
+
+  let reversed = +start > +end;
+  const endTime = reversed ? +start : +end;
+  const date = reversed ? end : start;
+  date.setHours(0, 0, 0, 0);
+  date.setMonth(0, 1);
+
+  let step = options?.step ?? 1;
+  if (!step) return [];
+  if (step < 0) {
+    step = -step;
+    reversed = !reversed;
+  }
+
+  const dates = [];
+
+  while (+date <= endTime) {
+    dates.push(constructFrom(start, date));
+    date.setFullYear(date.getFullYear() + step);
+  }
+
+  return reversed ? dates.reverse() : dates;
+}
+
 /**
  * The {@link endOfWeek} function options.
  */
@@ -26377,7 +26396,7 @@ const match = {
  * @author Sasha Koss [@kossnocorp](https://github.com/kossnocorp)
  * @author Lesha Koss [@leshakoss](https://github.com/leshakoss)
  */
-const enUS = {
+const enUS$1 = {
   code: "en-US",
   formatDistance: formatDistance,
   formatLong: formatLong,
@@ -27894,7 +27913,7 @@ const unescapedLatinCharacterRegExp$1 = /[a-zA-Z]/;
  */
 function format(date, formatStr, options) {
   const defaultOptions = getDefaultOptions$1();
-  const locale = options?.locale ?? defaultOptions.locale ?? enUS;
+  const locale = options?.locale ?? defaultOptions.locale ?? enUS$1;
 
   const firstWeekContainsDate =
     options?.firstWeekContainsDate ??
@@ -30587,7 +30606,7 @@ const unescapedLatinCharacterRegExp = /[a-zA-Z]/;
 function parse(dateStr, formatStr, referenceDate, options) {
   const invalidDate = () => constructFrom(options?.in || referenceDate, NaN);
   const defaultOptions = getDefaultOptions();
-  const locale = options?.locale ?? defaultOptions.locale ?? enUS;
+  const locale = options?.locale ?? defaultOptions.locale ?? enUS$1;
 
   const firstWeekContainsDate =
     options?.firstWeekContainsDate ??
@@ -31393,6 +31412,69 @@ function endOfBroadcastWeek(date, dateLib) {
     return endDate;
 }
 
+/** English (United States) locale extended with DayPicker-specific translations. */
+const enUS = {
+    ...enUS$1,
+    labels: {
+        labelDayButton: (date, modifiers, options, dateLib) => {
+            let formatDate;
+            if (dateLib && typeof dateLib.format === "function") {
+                formatDate = dateLib.format.bind(dateLib);
+            }
+            else {
+                formatDate = (d, pattern) => format(d, pattern, { locale: enUS$1, ...options });
+            }
+            let label = formatDate(date, "PPPP");
+            if (modifiers.today)
+                label = `Today, ${label}`;
+            if (modifiers.selected)
+                label = `${label}, selected`;
+            return label;
+        },
+        labelMonthDropdown: "Choose the Month",
+        labelNext: "Go to the Next Month",
+        labelPrevious: "Go to the Previous Month",
+        labelWeekNumber: (weekNumber) => `Week ${weekNumber}`,
+        labelYearDropdown: "Choose the Year",
+        labelGrid: (date, options, dateLib) => {
+            let formatDate;
+            if (dateLib && typeof dateLib.format === "function") {
+                formatDate = dateLib.format.bind(dateLib);
+            }
+            else {
+                formatDate = (d, pattern) => format(d, pattern, { locale: enUS$1, ...options });
+            }
+            return formatDate(date, "LLLL yyyy");
+        },
+        labelGridcell: (date, modifiers, options, dateLib) => {
+            let formatDate;
+            if (dateLib && typeof dateLib.format === "function") {
+                formatDate = dateLib.format.bind(dateLib);
+            }
+            else {
+                formatDate = (d, pattern) => format(d, pattern, { locale: enUS$1, ...options });
+            }
+            let label = formatDate(date, "PPPP");
+            if (modifiers?.today) {
+                label = `Today, ${label}`;
+            }
+            return label;
+        },
+        labelNav: "Navigation bar",
+        labelWeekNumberHeader: "Week Number",
+        labelWeekday: (date, options, dateLib) => {
+            let formatDate;
+            if (dateLib && typeof dateLib.format === "function") {
+                formatDate = dateLib.format.bind(dateLib);
+            }
+            else {
+                formatDate = (d, pattern) => format(d, pattern, { locale: enUS$1, ...options });
+            }
+            return formatDate(date, "cccc");
+        },
+    },
+};
+
 /**
  * A wrapper class around [date-fns](http://date-fns.org) that provides utility
  * methods for date manipulation and formatting.
@@ -31531,6 +31613,31 @@ class DateLib {
                 ? this.overrides.eachMonthOfInterval(interval)
                 : eachMonthOfInterval(interval);
         };
+        /**
+         * Returns the years between the given dates.
+         *
+         * @since 9.11.1
+         * @param interval The interval to get the years for.
+         * @returns The array of years in the interval.
+         */
+        this.eachYearOfInterval = (interval) => {
+            const years = this.overrides?.eachYearOfInterval
+                ? this.overrides.eachYearOfInterval(interval)
+                : eachYearOfInterval(interval);
+            // Remove duplicates that may happen across DST transitions (e.g., "America/Sao_Paulo")
+            // See https://github.com/date-fns/tz/issues/72
+            const uniqueYears = new Set(years.map((d) => this.getYear(d)));
+            if (uniqueYears.size === years.length) {
+                // No duplicates, return as is
+                return years;
+            }
+            // Rebuild the array to ensure one date per year
+            const yearsArray = [];
+            uniqueYears.forEach((y) => {
+                yearsArray.push(new Date(y, 0, 1));
+            });
+            return yearsArray;
+        };
         /**
          * Returns the end of the broadcast week for the given date.
          *
@@ -31869,7 +31976,63 @@ class DateLib {
     formatNumber(value) {
         return this.replaceDigits(value.toString());
     }
-}
+    /**
+     * Returns the preferred ordering for month and year labels for the current
+     * locale.
+     */
+    getMonthYearOrder() {
+        const code = this.options.locale?.code;
+        if (!code) {
+            return "month-first";
+        }
+        return DateLib.yearFirstLocales.has(code) ? "year-first" : "month-first";
+    }
+    /**
+     * Formats the month/year pair respecting locale conventions.
+     *
+     * @since 9.11.0
+     */
+    formatMonthYear(date) {
+        const { locale, timeZone, numerals } = this.options;
+        const localeCode = locale?.code;
+        if (localeCode && DateLib.yearFirstLocales.has(localeCode)) {
+            try {
+                const intl = new Intl.DateTimeFormat(localeCode, {
+                    month: "long",
+                    year: "numeric",
+                    timeZone,
+                    numberingSystem: numerals,
+                });
+                const formatted = intl.format(date);
+                return formatted;
+            }
+            catch {
+                // Fallback to date-fns formatting below.
+            }
+        }
+        const pattern = this.getMonthYearOrder() === "year-first" ? "y LLLL" : "LLLL y";
+        return this.format(date, pattern);
+    }
+}
+DateLib.yearFirstLocales = new Set([
+    "eu",
+    "hu",
+    "ja",
+    "ja-Hira",
+    "ja-JP",
+    "ko",
+    "ko-KR",
+    "lt",
+    "lt-LT",
+    "lv",
+    "lv-LV",
+    "mn",
+    "mn-MN",
+    "zh",
+    "zh-CN",
+    "zh-HK",
+    "zh-TW",
+]);
 /**
  * The default date library with English locale.
  *
@@ -31890,6 +32053,9 @@ class CalendarDay {
         this.displayMonth = displayMonth;
         this.outside = Boolean(displayMonth && !dateLib.isSameMonth(date, displayMonth));
         this.dateLib = dateLib;
+        this.isoDate = dateLib.format(date, "yyyy-MM-dd");
+        this.displayMonthId = dateLib.format(displayMonth, "yyyy-MM");
+        this.dateMonthId = dateLib.format(date, "yyyy-MM");
     }
     /**
      * Checks if this day is equal to another `CalendarDay`, considering both the
@@ -32065,7 +32231,7 @@ var UI;
     /** The dropdown with the years. */
     UI["YearsDropdown"] = "years_dropdown";
 })(UI || (UI = {}));
-/** Enum representing flags for the {@link UI.Day} element. */
+/** Enum representing flags for the {@link UI | UI.Day} element. */
 var DayFlag;
 (function (DayFlag) {
     /** The day is disabled. */
@@ -32080,8 +32246,8 @@ var DayFlag;
     DayFlag["today"] = "today";
 })(DayFlag || (DayFlag = {}));
 /**
- * Enum representing selection states that can be applied to the {@link UI.Day}
- * element in selection mode.
+ * Enum representing selection states that can be applied to the
+ * {@link UI | UI.Day} element in selection mode.
  */
 var SelectionState;
 (function (SelectionState) {
@@ -32531,7 +32697,7 @@ function dateMatchModifiers(date, matchers, dateLib = defaultDateLib) {
             return isSameDay(date, matcher);
         }
         if (isDatesArray(matcher, dateLib)) {
-            return matcher.includes(date);
+            return matcher.some((matcherDate) => isSameDay(date, matcherDate));
         }
         if (isDateRange(matcher)) {
             return rangeIncludesDate(matcher, date, false, dateLib);
@@ -32582,7 +32748,7 @@ function dateMatchModifiers(date, matchers, dateLib = defaultDateLib) {
  * @returns A function that retrieves the modifiers for a given `CalendarDay`.
  */
 function createGetModifiers(days, props, navStart, navEnd, dateLib) {
-    const { disabled, hidden, modifiers, showOutsideDays, broadcastCalendar, today, } = props;
+    const { disabled, hidden, modifiers, showOutsideDays, broadcastCalendar, today = dateLib.today(), } = props;
     const { isSameDay, isSameMonth, startOfMonth, isBefore, endOfMonth, isAfter, } = dateLib;
     const computedNavStart = navStart && startOfMonth(navStart);
     const computedNavEnd = navEnd && endOfMonth(navEnd);
@@ -32606,7 +32772,7 @@ function createGetModifiers(days, props, navStart, navEnd, dateLib) {
             // Broadcast calendar will show outside days as default
             (!broadcastCalendar && !showOutsideDays && isOutside) ||
             (broadcastCalendar && showOutsideDays === false && isOutside);
-        const isToday = isSameDay(date, today ?? dateLib.today());
+        const isToday = isSameDay(date, today);
         if (isOutside)
             internalModifiersMap.outside.push(day);
         if (isDisabled)
@@ -32765,7 +32931,7 @@ function getDefaultClassNames() {
 /**
  * Formats the caption of the month.
  *
- * @defaultValue `LLLL y` (e.g., "November 2022").
+ * @defaultValue Locale-specific month/year order (e.g., "November 2022").
  * @param month The date representing the month.
  * @param options Configuration options for the date library.
  * @param dateLib The date library to use for formatting. If not provided, a new
@@ -32775,7 +32941,8 @@ function getDefaultClassNames() {
  * @see https://daypicker.dev/docs/translation#custom-formatters
  */
 function formatCaption(month, options, dateLib) {
-    return (dateLib ?? new DateLib(options)).format(month, "LLLL y");
+    const lib = dateLib ?? new DateLib(options);
+    return lib.formatMonthYear(month);
 }
 /**
  * @private
@@ -32915,127 +33082,6 @@ function getFormatters(customFormatters) {
     };
 }
 
-/**
- * Returns the months to show in the dropdown.
- *
- * This function generates a list of months for the current year, formatted
- * using the provided formatter, and determines whether each month should be
- * disabled based on the navigation range.
- *
- * @param displayMonth The currently displayed month.
- * @param navStart The start date for navigation.
- * @param navEnd The end date for navigation.
- * @param formatters The formatters to use for formatting the month labels.
- * @param dateLib The date library to use for date manipulation.
- * @returns An array of dropdown options representing the months, or `undefined`
- *   if no months are available.
- */
-function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
-    const { startOfMonth, startOfYear, endOfYear, eachMonthOfInterval, getMonth, } = dateLib;
-    const months = eachMonthOfInterval({
-        start: startOfYear(displayMonth),
-        end: endOfYear(displayMonth),
-    });
-    const options = months.map((month) => {
-        const label = formatters.formatMonthDropdown(month, dateLib);
-        const value = getMonth(month);
-        const disabled = (navStart && month < startOfMonth(navStart)) ||
-            (navEnd && month > startOfMonth(navEnd)) ||
-            false;
-        return { value, label, disabled };
-    });
-    return options;
-}
-
-/**
- * Returns the computed style for a day based on its modifiers.
- *
- * This function merges the base styles for the day with any styles associated
- * with active modifiers.
- *
- * @param dayModifiers The modifiers applied to the day.
- * @param styles The base styles for the calendar elements.
- * @param modifiersStyles The styles associated with specific modifiers.
- * @returns The computed style for the day.
- */
-function getStyleForModifiers(dayModifiers, styles = {}, modifiersStyles = {}) {
-    let style = { ...styles?.[UI.Day] };
-    Object.entries(dayModifiers)
-        .filter(([, active]) => active === true)
-        .forEach(([modifier]) => {
-        style = {
-            ...style,
-            ...modifiersStyles?.[modifier],
-        };
-    });
-    return style;
-}
-
-/**
- * Generates a series of 7 days, starting from the beginning of the week, to use
- * for formatting weekday names (e.g., Monday, Tuesday, etc.).
- *
- * @param dateLib The date library to use for date manipulation.
- * @param ISOWeek Whether to use ISO week numbering (weeks start on Monday).
- * @param broadcastCalendar Whether to use the broadcast calendar (weeks start
- *   on Monday, but may include adjustments for broadcast-specific rules).
- * @returns An array of 7 dates representing the weekdays.
- */
-function getWeekdays(dateLib, ISOWeek, broadcastCalendar) {
-    const today = dateLib.today();
-    const start = broadcastCalendar
-        ? dateLib.startOfBroadcastWeek(today, dateLib)
-        : ISOWeek
-            ? dateLib.startOfISOWeek(today)
-            : dateLib.startOfWeek(today);
-    const days = [];
-    for (let i = 0; i < 7; i++) {
-        const day = dateLib.addDays(start, i);
-        days.push(day);
-    }
-    return days;
-}
-
-/**
- * Returns the years to display in the dropdown.
- *
- * This function generates a list of years between the navigation start and end
- * dates, formatted using the provided formatter.
- *
- * @param navStart The start date for navigation.
- * @param navEnd The end date for navigation.
- * @param formatters The formatters to use for formatting the year labels.
- * @param dateLib The date library to use for date manipulation.
- * @param reverse If true, reverses the order of the years (descending).
- * @returns An array of dropdown options representing the years, or `undefined`
- *   if `navStart` or `navEnd` is not provided.
- */
-function getYearOptions(navStart, navEnd, formatters, dateLib, reverse = false) {
-    if (!navStart)
-        return undefined;
-    if (!navEnd)
-        return undefined;
-    const { startOfYear, endOfYear, addYears, getYear, isBefore, isSameYear } = dateLib;
-    const firstNavYear = startOfYear(navStart);
-    const lastNavYear = endOfYear(navEnd);
-    const years = [];
-    let year = firstNavYear;
-    while (isBefore(year, lastNavYear) || isSameYear(year, lastNavYear)) {
-        years.push(year);
-        year = addYears(year, 1);
-    }
-    if (reverse)
-        years.reverse();
-    return years.map((year) => {
-        const label = formatters.formatYearDropdown(year, dateLib);
-        return {
-            value: getYear(year),
-            label,
-            disabled: false,
-        };
-    });
-}
-
 /**
  * Generates the ARIA label for a day button.
  *
@@ -33069,7 +33115,7 @@ const labelDay = labelDayButton;
  * Generates the ARIA label for the month grid, which is announced when entering
  * the grid.
  *
- * @defaultValue `LLLL y` (e.g., "November 2022").
+ * @defaultValue Locale-specific month/year order (e.g., "November 2022").
  * @param date - The date representing the month.
  * @param options - Optional configuration for the date formatting library.
  * @param dateLib - An optional instance of the date formatting library.
@@ -33078,7 +33124,8 @@ const labelDay = labelDayButton;
  * @see https://daypicker.dev/docs/translation#aria-labels
  */
 function labelGrid(date, options, dateLib) {
-    return (dateLib ?? new DateLib(options)).format(date, "LLLL y");
+    const lib = dateLib ?? new DateLib(options);
+    return lib.formatMonthYear(date);
 }
 /**
  * @ignore
@@ -33130,6 +33177,7 @@ function labelNav() {
     return "";
 }
 
+const defaultLabel = "Go to the Next Month";
 /**
  * Generates the ARIA label for the "next month" button.
  *
@@ -33140,8 +33188,8 @@ function labelNav() {
  * @group Labels
  * @see https://daypicker.dev/docs/translation#aria-labels
  */
-function labelNext(_month) {
-    return "Go to the Next Month";
+function labelNext(_month, _options) {
+    return defaultLabel;
 }
 
 /**
@@ -33230,6 +33278,316 @@ var defaultLabels = /*#__PURE__*/Object.freeze({
   labelYearDropdown: labelYearDropdown
 });
 
+const resolveLabel = (defaultLabel, customLabel, localeLabel) => {
+    if (customLabel)
+        return customLabel;
+    if (localeLabel) {
+        return (typeof localeLabel === "function"
+            ? localeLabel
+            : (..._args) => localeLabel);
+    }
+    return defaultLabel;
+};
+/**
+ * Merges custom labels from the props with the default labels.
+ *
+ * When available, uses the locale-provided translation for `labelNext`.
+ *
+ * @param customLabels The custom labels provided in the DayPicker props.
+ * @param options Options from the date library, used to resolve locale
+ *   translations.
+ * @returns The merged labels object with locale-aware defaults.
+ */
+function getLabels(customLabels, options) {
+    const localeLabels = options.locale?.labels ?? {};
+    return {
+        ...defaultLabels,
+        ...(customLabels ?? {}),
+        labelDayButton: resolveLabel(labelDayButton, customLabels?.labelDayButton, localeLabels.labelDayButton),
+        labelMonthDropdown: resolveLabel(labelMonthDropdown, customLabels?.labelMonthDropdown, localeLabels.labelMonthDropdown),
+        labelNext: resolveLabel(labelNext, customLabels?.labelNext, localeLabels.labelNext),
+        labelPrevious: resolveLabel(labelPrevious, customLabels?.labelPrevious, localeLabels.labelPrevious),
+        labelWeekNumber: resolveLabel(labelWeekNumber, customLabels?.labelWeekNumber, localeLabels.labelWeekNumber),
+        labelYearDropdown: resolveLabel(labelYearDropdown, customLabels?.labelYearDropdown, localeLabels.labelYearDropdown),
+        labelGrid: resolveLabel(labelGrid, customLabels?.labelGrid, localeLabels.labelGrid),
+        labelGridcell: resolveLabel(labelGridcell, customLabels?.labelGridcell, localeLabels.labelGridcell),
+        labelNav: resolveLabel(labelNav, customLabels?.labelNav, localeLabels.labelNav),
+        labelWeekNumberHeader: resolveLabel(labelWeekNumberHeader, customLabels?.labelWeekNumberHeader, localeLabels.labelWeekNumberHeader),
+        labelWeekday: resolveLabel(labelWeekday, customLabels?.labelWeekday, localeLabels.labelWeekday),
+    };
+}
+
+/**
+ * Returns the months to show in the dropdown.
+ *
+ * This function generates a list of months for the current year, formatted
+ * using the provided formatter, and determines whether each month should be
+ * disabled based on the navigation range.
+ *
+ * @param displayMonth The currently displayed month.
+ * @param navStart The start date for navigation.
+ * @param navEnd The end date for navigation.
+ * @param formatters The formatters to use for formatting the month labels.
+ * @param dateLib The date library to use for date manipulation.
+ * @returns An array of dropdown options representing the months, or `undefined`
+ *   if no months are available.
+ */
+function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
+    const { startOfMonth, startOfYear, endOfYear, eachMonthOfInterval, getMonth, } = dateLib;
+    const months = eachMonthOfInterval({
+        start: startOfYear(displayMonth),
+        end: endOfYear(displayMonth),
+    });
+    const options = months.map((month) => {
+        const label = formatters.formatMonthDropdown(month, dateLib);
+        const value = getMonth(month);
+        const disabled = (navStart && month < startOfMonth(navStart)) ||
+            (navEnd && month > startOfMonth(navEnd)) ||
+            false;
+        return { value, label, disabled };
+    });
+    return options;
+}
+
+/**
+ * Returns the computed style for a day based on its modifiers.
+ *
+ * This function merges the base styles for the day with any styles associated
+ * with active modifiers.
+ *
+ * @param dayModifiers The modifiers applied to the day.
+ * @param styles The base styles for the calendar elements.
+ * @param modifiersStyles The styles associated with specific modifiers.
+ * @returns The computed style for the day.
+ */
+function getStyleForModifiers(dayModifiers, styles = {}, modifiersStyles = {}) {
+    let style = { ...styles?.[UI.Day] };
+    Object.entries(dayModifiers)
+        .filter(([, active]) => active === true)
+        .forEach(([modifier]) => {
+        style = {
+            ...style,
+            ...modifiersStyles?.[modifier],
+        };
+    });
+    return style;
+}
+
+/**
+ * Generates a series of 7 days, starting from the beginning of the week, to use
+ * for formatting weekday names (e.g., Monday, Tuesday, etc.).
+ *
+ * @param dateLib The date library to use for date manipulation.
+ * @param ISOWeek Whether to use ISO week numbering (weeks start on Monday).
+ * @param broadcastCalendar Whether to use the broadcast calendar (weeks start
+ *   on Monday, but may include adjustments for broadcast-specific rules).
+ * @returns An array of 7 dates representing the weekdays.
+ */
+function getWeekdays(dateLib, ISOWeek, broadcastCalendar, today) {
+    const referenceToday = today ?? dateLib.today();
+    const start = broadcastCalendar
+        ? dateLib.startOfBroadcastWeek(referenceToday, dateLib)
+        : ISOWeek
+            ? dateLib.startOfISOWeek(referenceToday)
+            : dateLib.startOfWeek(referenceToday);
+    const days = [];
+    for (let i = 0; i < 7; i++) {
+        const day = dateLib.addDays(start, i);
+        days.push(day);
+    }
+    return days;
+}
+
+/**
+ * Returns the years to display in the dropdown.
+ *
+ * This function generates a list of years between the navigation start and end
+ * dates, formatted using the provided formatter.
+ *
+ * @param navStart The start date for navigation.
+ * @param navEnd The end date for navigation.
+ * @param formatters The formatters to use for formatting the year labels.
+ * @param dateLib The date library to use for date manipulation.
+ * @param reverse If true, reverses the order of the years (descending).
+ * @returns An array of dropdown options representing the years, or `undefined`
+ *   if `navStart` or `navEnd` is not provided.
+ */
+function getYearOptions(navStart, navEnd, formatters, dateLib, reverse = false) {
+    if (!navStart)
+        return undefined;
+    if (!navEnd)
+        return undefined;
+    const { startOfYear, endOfYear, eachYearOfInterval, getYear } = dateLib;
+    const firstNavYear = startOfYear(navStart);
+    const lastNavYear = endOfYear(navEnd);
+    const years = eachYearOfInterval({ start: firstNavYear, end: lastNavYear });
+    if (reverse)
+        years.reverse();
+    return years.map((year) => {
+        const label = formatters.formatYearDropdown(year, dateLib);
+        return {
+            value: getYear(year),
+            label,
+            disabled: false,
+        };
+    });
+}
+
+/**
+ * Creates `dateLib` overrides that keep all calendar math at noon in the target
+ * time zone. This avoids second-level offset changes (e.g., historical zones
+ * with +03:41:12) from pushing dates backward across midnight.
+ */
+function createNoonOverrides(timeZone, options = {}) {
+    const { weekStartsOn, locale } = options;
+    const fallbackWeekStartsOn = (weekStartsOn ??
+        locale?.options?.weekStartsOn ??
+        0);
+    // Keep all internal math anchored at noon in the target zone to avoid
+    // historical second-level offsets from crossing midnight.
+    const toNoonTZDate = (date) => {
+        const normalizedDate = typeof date === "number" || typeof date === "string"
+            ? new Date(date)
+            : date;
+        return new TZDate(normalizedDate.getFullYear(), normalizedDate.getMonth(), normalizedDate.getDate(), 12, 0, 0, timeZone);
+    };
+    // Convert a value into a host `Date` that represents the same calendar day
+    // as the target-zone noon. This is useful for helpers (e.g., date-fns week
+    // utilities) that expect local `Date` instances rather than `TZDate`s.
+    const toCalendarDate = (date) => {
+        const zoned = toNoonTZDate(date);
+        return new Date(zoned.getFullYear(), zoned.getMonth(), zoned.getDate(), 0, 0, 0, 0);
+    };
+    return {
+        today: () => {
+            return toNoonTZDate(TZDate.tz(timeZone));
+        },
+        newDate: (year, monthIndex, date) => {
+            return new TZDate(year, monthIndex, date, 12, 0, 0, timeZone);
+        },
+        startOfDay: (date) => {
+            return toNoonTZDate(date);
+        },
+        startOfWeek: (date, options) => {
+            const base = toNoonTZDate(date);
+            const weekStartsOnValue = (options?.weekStartsOn ??
+                fallbackWeekStartsOn);
+            const diff = (base.getDay() - weekStartsOnValue + 7) % 7;
+            base.setDate(base.getDate() - diff);
+            return base;
+        },
+        startOfISOWeek: (date) => {
+            const base = toNoonTZDate(date);
+            const diff = (base.getDay() - 1 + 7) % 7;
+            base.setDate(base.getDate() - diff);
+            return base;
+        },
+        startOfMonth: (date) => {
+            const base = toNoonTZDate(date);
+            base.setDate(1);
+            return base;
+        },
+        startOfYear: (date) => {
+            const base = toNoonTZDate(date);
+            base.setMonth(0, 1);
+            return base;
+        },
+        endOfWeek: (date, options) => {
+            const base = toNoonTZDate(date);
+            const weekStartsOnValue = (options?.weekStartsOn ??
+                fallbackWeekStartsOn);
+            const endDow = (weekStartsOnValue + 6) % 7;
+            const diff = (endDow - base.getDay() + 7) % 7;
+            base.setDate(base.getDate() + diff);
+            return base;
+        },
+        endOfISOWeek: (date) => {
+            const base = toNoonTZDate(date);
+            const diff = (7 - base.getDay()) % 7;
+            base.setDate(base.getDate() + diff);
+            return base;
+        },
+        endOfMonth: (date) => {
+            const base = toNoonTZDate(date);
+            base.setMonth(base.getMonth() + 1, 0);
+            return base;
+        },
+        endOfYear: (date) => {
+            const base = toNoonTZDate(date);
+            base.setMonth(11, 31);
+            return base;
+        },
+        eachMonthOfInterval: (interval) => {
+            const start = toNoonTZDate(interval.start);
+            const end = toNoonTZDate(interval.end);
+            const result = [];
+            const cursor = new TZDate(start.getFullYear(), start.getMonth(), 1, 12, 0, 0, timeZone);
+            const endKey = end.getFullYear() * 12 + end.getMonth();
+            while (cursor.getFullYear() * 12 + cursor.getMonth() <= endKey) {
+                result.push(new TZDate(cursor, timeZone));
+                cursor.setMonth(cursor.getMonth() + 1, 1);
+            }
+            return result;
+        },
+        // Normalize to noon once before arithmetic (avoid DST/midnight edge cases),
+        // mutate the same TZDate, and return it.
+        addDays: (date, amount) => {
+            const base = toNoonTZDate(date);
+            base.setDate(base.getDate() + amount);
+            return base;
+        },
+        addWeeks: (date, amount) => {
+            const base = toNoonTZDate(date);
+            base.setDate(base.getDate() + amount * 7);
+            return base;
+        },
+        addMonths: (date, amount) => {
+            const base = toNoonTZDate(date);
+            base.setMonth(base.getMonth() + amount);
+            return base;
+        },
+        addYears: (date, amount) => {
+            const base = toNoonTZDate(date);
+            base.setFullYear(base.getFullYear() + amount);
+            return base;
+        },
+        eachYearOfInterval: (interval) => {
+            const start = toNoonTZDate(interval.start);
+            const end = toNoonTZDate(interval.end);
+            const years = [];
+            const cursor = new TZDate(start.getFullYear(), 0, 1, 12, 0, 0, timeZone);
+            while (cursor.getFullYear() <= end.getFullYear()) {
+                years.push(new TZDate(cursor, timeZone));
+                cursor.setFullYear(cursor.getFullYear() + 1, 0, 1);
+            }
+            return years;
+        },
+        getWeek: (date, options) => {
+            const base = toCalendarDate(date);
+            return getWeek(base, {
+                weekStartsOn: options?.weekStartsOn ?? fallbackWeekStartsOn,
+                firstWeekContainsDate: options?.firstWeekContainsDate ??
+                    locale?.options?.firstWeekContainsDate ??
+                    1,
+            });
+        },
+        getISOWeek: (date) => {
+            const base = toCalendarDate(date);
+            return getISOWeek(base);
+        },
+        differenceInCalendarDays: (dateLeft, dateRight) => {
+            const left = toCalendarDate(dateLeft);
+            const right = toCalendarDate(dateRight);
+            return differenceInCalendarDays(left, right);
+        },
+        differenceInCalendarMonths: (dateLeft, dateRight) => {
+            const left = toCalendarDate(dateLeft);
+            const right = toCalendarDate(dateRight);
+            return differenceInCalendarMonths(left, right);
+        },
+    };
+}
+
 const asHtmlElement = (element) => {
     if (element instanceof HTMLElement)
         return element;
@@ -33422,19 +33780,27 @@ function getDates(displayMonths, maxDate, props, dateLib) {
         : ISOWeek
             ? startOfISOWeek(firstMonth)
             : startOfWeek(firstMonth);
-    const endWeekLastDate = broadcastCalendar
+    const displayMonthsWeekEnd = broadcastCalendar
         ? endOfBroadcastWeek(lastMonth)
         : ISOWeek
             ? endOfISOWeek(endOfMonth(lastMonth))
             : endOfWeek(endOfMonth(lastMonth));
-    const nOfDays = differenceInCalendarDays(endWeekLastDate, startWeekFirstDate);
+    // If maxDate is set, clamp the grid to the end of that week.
+    const constraintWeekEnd = maxDate &&
+        (broadcastCalendar
+            ? endOfBroadcastWeek(maxDate)
+            : ISOWeek
+                ? endOfISOWeek(maxDate)
+                : endOfWeek(maxDate));
+    // Pick the earliest week end between the displayed months and the constraint.
+    const gridEndDate = constraintWeekEnd && isAfter(displayMonthsWeekEnd, constraintWeekEnd)
+        ? constraintWeekEnd
+        : displayMonthsWeekEnd;
+    const nOfDays = differenceInCalendarDays(gridEndDate, startWeekFirstDate);
     const nOfMonths = differenceInCalendarMonths(lastMonth, firstMonth) + 1;
     const dates = [];
     for (let i = 0; i <= nOfDays; i++) {
         const date = addDays(startWeekFirstDate, i);
-        if (maxDate && isAfter(date, maxDate)) {
-            break;
-        }
         dates.push(date);
     }
     // If fixed weeks is enabled, add the extra dates to the array
@@ -33765,17 +34131,45 @@ function useCalendar(props, dateLib) {
         setFirstMonth(newInitialMonth);
     }, [props.timeZone]);
     /** The months displayed in the calendar. */
-    const displayMonths = getDisplayMonths(firstMonth, navEnd, props, dateLib);
-    /** The dates displayed in the calendar. */
-    const dates = getDates(displayMonths, props.endMonth ? endOfMonth(props.endMonth) : undefined, props, dateLib);
-    /** The Months displayed in the calendar. */
-    const months = getMonths(displayMonths, dates, props, dateLib);
-    /** The Weeks displayed in the calendar. */
-    const weeks = getWeeks(months);
-    /** The Days displayed in the calendar. */
-    const days = getDays(months);
-    const previousMonth = getPreviousMonth(firstMonth, navStart, props, dateLib);
-    const nextMonth = getNextMonth(firstMonth, navEnd, props, dateLib);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We want to recompute only when specific props change.
+    const { months, weeks, days, previousMonth, nextMonth } = React$5.useMemo(() => {
+        const displayMonths = getDisplayMonths(firstMonth, navEnd, { numberOfMonths: props.numberOfMonths }, dateLib);
+        const dates = getDates(displayMonths, props.endMonth ? endOfMonth(props.endMonth) : undefined, {
+            ISOWeek: props.ISOWeek,
+            fixedWeeks: props.fixedWeeks,
+            broadcastCalendar: props.broadcastCalendar,
+        }, dateLib);
+        const months = getMonths(displayMonths, dates, {
+            broadcastCalendar: props.broadcastCalendar,
+            fixedWeeks: props.fixedWeeks,
+            ISOWeek: props.ISOWeek,
+            reverseMonths: props.reverseMonths,
+        }, dateLib);
+        const weeks = getWeeks(months);
+        const days = getDays(months);
+        const previousMonth = getPreviousMonth(firstMonth, navStart, props, dateLib);
+        const nextMonth = getNextMonth(firstMonth, navEnd, props, dateLib);
+        return {
+            months,
+            weeks,
+            days,
+            previousMonth,
+            nextMonth,
+        };
+    }, [
+        dateLib,
+        firstMonth.getTime(),
+        navEnd?.getTime(),
+        navStart?.getTime(),
+        props.disableNavigation,
+        props.broadcastCalendar,
+        props.endMonth?.getTime(),
+        props.fixedWeeks,
+        props.ISOWeek,
+        props.numberOfMonths,
+        props.pagedNavigation,
+        props.reverseMonths,
+    ]);
     const { disableNavigation, onMonthChange } = props;
     const isDayInCalendar = (day) => weeks.some((week) => week.days.some((d) => d.isEqualTo(day)));
     const goToMonth = (date) => {
@@ -33994,6 +34388,12 @@ function useFocus(props, calendar, getModifiers, isSelected, dateLib) {
         const nextFocus = getNextFocus(moveBy, moveDir, focusedDay, calendar.navStart, calendar.navEnd, props, dateLib);
         if (!nextFocus)
             return;
+        if (props.disableNavigation) {
+            const isNextInCalendar = calendar.days.some((day) => day.isEqualTo(nextFocus));
+            if (!isNextInCalendar) {
+                return;
+            }
+        }
         calendar.goToDay(nextFocus);
         setFocused(nextFocus);
     };
@@ -34276,15 +34676,33 @@ function rangeContainsModifiers(range, modifiers, dateLib = defaultDateLib) {
  *   range, and a function to check if a date is within the range.
  */
 function useRange(props, dateLib) {
-    const { disabled, excludeDisabled, selected: initiallySelected, required, onSelect, } = props;
+    const { disabled, excludeDisabled, resetOnSelect, selected: initiallySelected, required, onSelect, } = props;
     const [internallySelected, setSelected] = useControlledValue(initiallySelected, onSelect ? initiallySelected : undefined);
     const selected = !onSelect ? internallySelected : initiallySelected;
     const isSelected = (date) => selected && rangeIncludesDate(selected, date, false, dateLib);
     const select = (triggerDate, modifiers, e) => {
         const { min, max } = props;
-        const newRange = triggerDate
-            ? addToRange(triggerDate, selected, min, max, required, dateLib)
-            : undefined;
+        let newRange;
+        if (triggerDate) {
+            const selectedFrom = selected?.from;
+            const selectedTo = selected?.to;
+            const hasFullRange = !!selectedFrom && !!selectedTo;
+            const isClickingSingleDayRange = !!selectedFrom &&
+                !!selectedTo &&
+                dateLib.isSameDay(selectedFrom, selectedTo) &&
+                dateLib.isSameDay(triggerDate, selectedFrom);
+            if (resetOnSelect && (hasFullRange || !selected?.from)) {
+                if (!required && isClickingSingleDayRange) {
+                    newRange = undefined;
+                }
+                else {
+                    newRange = { from: triggerDate, to: undefined };
+                }
+            }
+            else {
+                newRange = addToRange(triggerDate, selected, min, max, required, dateLib);
+            }
+        }
         if (excludeDisabled && disabled && newRange?.from && newRange.to) {
             if (rangeContainsModifiers({ from: newRange.from, to: newRange.to }, disabled, dateLib)) {
                 // if a disabled days is found, the range is reset
@@ -34372,6 +34790,78 @@ function useSelection(props, dateLib) {
     }
 }
 
+/**
+ * Convert a {@link Date} or {@link TZDate} instance to the given time zone.
+ * Reuses the same instance when it is already a {@link TZDate} using the target
+ * time zone to avoid extra allocations.
+ */
+function toTimeZone(date, timeZone) {
+    if (date instanceof TZDate && date.timeZone === timeZone) {
+        return date;
+    }
+    return new TZDate(date, timeZone);
+}
+
+function toZoneNoon(date, timeZone, noonSafe) {
+    if (!noonSafe)
+        return toTimeZone(date, timeZone);
+    const zoned = toTimeZone(date, timeZone);
+    const noonZoned = new TZDate(zoned.getFullYear(), zoned.getMonth(), zoned.getDate(), 12, 0, 0, timeZone);
+    return new Date(noonZoned.getTime());
+}
+function convertMatcher(matcher, timeZone, noonSafe) {
+    if (typeof matcher === "boolean" || typeof matcher === "function") {
+        return matcher;
+    }
+    if (matcher instanceof Date) {
+        return toZoneNoon(matcher, timeZone, noonSafe);
+    }
+    if (Array.isArray(matcher)) {
+        return matcher.map((value) => value instanceof Date ? toZoneNoon(value, timeZone, noonSafe) : value);
+    }
+    if (isDateRange(matcher)) {
+        return {
+            ...matcher,
+            from: matcher.from ? toTimeZone(matcher.from, timeZone) : matcher.from,
+            to: matcher.to ? toTimeZone(matcher.to, timeZone) : matcher.to,
+        };
+    }
+    if (isDateInterval(matcher)) {
+        return {
+            before: toZoneNoon(matcher.before, timeZone, noonSafe),
+            after: toZoneNoon(matcher.after, timeZone, noonSafe),
+        };
+    }
+    if (isDateAfterType(matcher)) {
+        return {
+            after: toZoneNoon(matcher.after, timeZone, noonSafe),
+        };
+    }
+    if (isDateBeforeType(matcher)) {
+        return {
+            before: toZoneNoon(matcher.before, timeZone, noonSafe),
+        };
+    }
+    return matcher;
+}
+/**
+ * Convert any {@link Matcher} or array of matchers to the specified time zone.
+ *
+ * @param matchers - The matcher or matchers to convert.
+ * @param timeZone - The target IANA time zone.
+ * @returns The converted matcher(s).
+ * @group Utilities
+ */
+function convertMatchersToTimeZone(matchers, timeZone, noonSafe) {
+    if (!matchers) {
+        return matchers;
+    }
+    if (Array.isArray(matchers)) {
+        return matchers.map((matcher) => convertMatcher(matcher, timeZone, noonSafe));
+    }
+    return convertMatcher(matchers, timeZone, noonSafe);
+}
+
 /**
  * Renders the DayPicker calendar component.
  *
@@ -34382,58 +34872,83 @@ function useSelection(props, dateLib) {
  */
 function DayPicker(initialProps) {
     let props = initialProps;
-    if (props.timeZone) {
+    const timeZone = props.timeZone;
+    if (timeZone) {
         props = {
             ...initialProps,
+            timeZone,
         };
         if (props.today) {
-            props.today = new TZDate(props.today, props.timeZone);
+            props.today = toTimeZone(props.today, timeZone);
         }
         if (props.month) {
-            props.month = new TZDate(props.month, props.timeZone);
+            props.month = toTimeZone(props.month, timeZone);
         }
         if (props.defaultMonth) {
-            props.defaultMonth = new TZDate(props.defaultMonth, props.timeZone);
+            props.defaultMonth = toTimeZone(props.defaultMonth, timeZone);
         }
         if (props.startMonth) {
-            props.startMonth = new TZDate(props.startMonth, props.timeZone);
+            props.startMonth = toTimeZone(props.startMonth, timeZone);
         }
         if (props.endMonth) {
-            props.endMonth = new TZDate(props.endMonth, props.timeZone);
+            props.endMonth = toTimeZone(props.endMonth, timeZone);
         }
         if (props.mode === "single" && props.selected) {
-            props.selected = new TZDate(props.selected, props.timeZone);
+            props.selected = toTimeZone(props.selected, timeZone);
         }
         else if (props.mode === "multiple" && props.selected) {
-            props.selected = props.selected?.map((date) => new TZDate(date, props.timeZone));
+            props.selected = props.selected?.map((date) => toTimeZone(date, timeZone));
         }
         else if (props.mode === "range" && props.selected) {
             props.selected = {
                 from: props.selected.from
-                    ? new TZDate(props.selected.from, props.timeZone)
-                    : undefined,
+                    ? toTimeZone(props.selected.from, timeZone)
+                    : props.selected.from,
                 to: props.selected.to
-                    ? new TZDate(props.selected.to, props.timeZone)
-                    : undefined,
+                    ? toTimeZone(props.selected.to, timeZone)
+                    : props.selected.to,
             };
         }
+        if (props.disabled !== undefined) {
+            props.disabled = convertMatchersToTimeZone(props.disabled, timeZone);
+        }
+        if (props.hidden !== undefined) {
+            props.hidden = convertMatchersToTimeZone(props.hidden, timeZone);
+        }
+        if (props.modifiers) {
+            const nextModifiers = {};
+            Object.keys(props.modifiers).forEach((key) => {
+                nextModifiers[key] = convertMatchersToTimeZone(props.modifiers?.[key], timeZone);
+            });
+            props.modifiers = nextModifiers;
+        }
     }
     const { components, formatters, labels, dateLib, locale, classNames } = React$5.useMemo(() => {
         const locale = { ...enUS, ...props.locale };
+        const weekStartsOn = props.broadcastCalendar ? 1 : props.weekStartsOn;
+        const noonOverrides = props.noonSafe && props.timeZone
+            ? createNoonOverrides(props.timeZone, {
+                weekStartsOn,
+                locale,
+            })
+            : undefined;
+        const overrides = props.dateLib && noonOverrides
+            ? { ...noonOverrides, ...props.dateLib }
+            : (props.dateLib ?? noonOverrides);
         const dateLib = new DateLib({
             locale,
-            weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
+            weekStartsOn,
             firstWeekContainsDate: props.firstWeekContainsDate,
             useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
             useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens,
             timeZone: props.timeZone,
             numerals: props.numerals,
-        }, props.dateLib);
+        }, overrides);
         return {
             dateLib,
             components: getComponents(props.components),
             formatters: getFormatters(props.formatters),
-            labels: { ...defaultLabels, ...props.labels },
+            labels: getLabels(props.labels, dateLib.options),
             locale,
             classNames: { ...getDefaultClassNames(), ...props.classNames },
         };
@@ -34447,11 +34962,15 @@ function DayPicker(initialProps) {
         props.timeZone,
         props.numerals,
         props.dateLib,
+        props.noonSafe,
         props.components,
         props.formatters,
         props.labels,
         props.classNames,
     ]);
+    if (!props.today) {
+        props = { ...props, today: dateLib.today() };
+    }
     const { captionLayout, mode, navLayout, numberOfMonths = 1, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onDayMouseEnter, onDayMouseLeave, onNextClick, onPrevClick, showWeekNumber, styles, } = props;
     const { formatCaption, formatDay, formatMonthDropdown, formatWeekNumber, formatWeekNumberHeader, formatWeekdayName, formatYearDropdown, } = formatters;
     const calendar = useCalendar(props, dateLib);
@@ -34460,7 +34979,7 @@ function DayPicker(initialProps) {
     const { isSelected, select, selected: selectedValue, } = useSelection(props, dateLib) ?? {};
     const { blur, focused, isFocusTarget, moveFocus, setFocused } = useFocus(props, calendar, getModifiers, isSelected ?? (() => false), dateLib);
     const { labelDayButton, labelGridcell, labelGrid, labelMonthDropdown, labelNav, labelPrevious, labelNext, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown, } = labels;
-    const weekdays = React$5.useMemo(() => getWeekdays(dateLib, props.ISOWeek), [dateLib, props.ISOWeek]);
+    const weekdays = React$5.useMemo(() => getWeekdays(dateLib, props.ISOWeek, props.broadcastCalendar, props.today), [dateLib, props.ISOWeek, props.broadcastCalendar, props.today]);
     const isInteractive = mode !== undefined || onDayClick !== undefined;
     const handlePreviousClick = React$5.useCallback(() => {
         if (!previousMonth)
@@ -34478,6 +34997,9 @@ function DayPicker(initialProps) {
         e.preventDefault();
         e.stopPropagation();
         setFocused(day);
+        if (m.disabled) {
+            return;
+        }
         select?.(day.date, m, e);
         onDayClick?.(day.date, m, e);
     }, [select, onDayClick, setFocused]);
@@ -34561,7 +35083,7 @@ function DayPicker(initialProps) {
         formatters,
     };
     return (React__default["default"].createElement(dayPickerContext.Provider, { value: contextValue },
-        React__default["default"].createElement(components.Root, { rootRef: props.animate ? rootElRef : undefined, className: className, style: style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], ...dataAttributes },
+        React__default["default"].createElement(components.Root, { rootRef: props.animate ? rootElRef : undefined, className: className, style: style, dir: props.dir, id: props.id, lang: props.lang ?? locale.code, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], ...dataAttributes },
             React__default["default"].createElement(components.Months, { className: classNames[UI.Months], style: styles?.[UI.Months] },
                 !props.hideNavigation && !navLayout && (React__default["default"].createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI.Nav], style: styles?.[UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
                 months.map((calendarMonth, displayIndex) => {
@@ -34573,10 +35095,16 @@ function DayPicker(initialProps) {
                             displayIndex === 0 && (React__default["default"].createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : undefined },
                             React__default["default"].createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" }))),
                         React__default["default"].createElement(components.MonthCaption, { "data-animated-caption": props.animate ? "true" : undefined, className: classNames[UI.MonthCaption], style: styles?.[UI.MonthCaption], calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (React__default["default"].createElement(components.DropdownNav, { className: classNames[UI.Dropdowns], style: styles?.[UI.Dropdowns] },
-                            captionLayout === "dropdown" ||
-                                captionLayout === "dropdown-months" ? (React__default["default"].createElement(components.MonthsDropdown, { className: classNames[UI.MonthsDropdown], "aria-label": labelMonthDropdown(), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib), style: styles?.[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) })) : (React__default["default"].createElement("span", null, formatMonthDropdown(calendarMonth.date, dateLib))),
-                            captionLayout === "dropdown" ||
-                                captionLayout === "dropdown-years" ? (React__default["default"].createElement(components.YearsDropdown, { className: classNames[UI.YearsDropdown], "aria-label": labelYearDropdown(dateLib.options), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: getYearOptions(navStart, navEnd, formatters, dateLib, Boolean(props.reverseYears)), style: styles?.[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) })) : (React__default["default"].createElement("span", null, formatYearDropdown(calendarMonth.date, dateLib))),
+                            (() => {
+                                const monthControl = captionLayout === "dropdown" ||
+                                    captionLayout === "dropdown-months" ? (React__default["default"].createElement(components.MonthsDropdown, { key: "month", className: classNames[UI.MonthsDropdown], "aria-label": labelMonthDropdown(), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib), style: styles?.[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) })) : (React__default["default"].createElement("span", { key: "month" }, formatMonthDropdown(calendarMonth.date, dateLib)));
+                                const yearControl = captionLayout === "dropdown" ||
+                                    captionLayout === "dropdown-years" ? (React__default["default"].createElement(components.YearsDropdown, { key: "year", className: classNames[UI.YearsDropdown], "aria-label": labelYearDropdown(dateLib.options), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: getYearOptions(navStart, navEnd, formatters, dateLib, Boolean(props.reverseYears)), style: styles?.[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) })) : (React__default["default"].createElement("span", { key: "year" }, formatYearDropdown(calendarMonth.date, dateLib)));
+                                const controls = dateLib.getMonthYearOrder() === "year-first"
+                                    ? [yearControl, monthControl]
+                                    : [monthControl, yearControl];
+                                return controls;
+                            })(),
                             React__default["default"].createElement("span", { role: "status", "aria-live": "polite", style: {
                                     border: 0,
                                     clip: "rect(0 0 0 0)",
@@ -34588,9 +35116,7 @@ function DayPicker(initialProps) {
                                     width: "1px",
                                     whiteSpace: "nowrap",
                                     wordWrap: "normal",
-                                } }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))) : (
-                        // biome-ignore lint/a11y/useSemanticElements: breaking change
-                        React__default["default"].createElement(components.CaptionLabel, { className: classNames[UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))),
+                                } }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))) : (React__default["default"].createElement(components.CaptionLabel, { className: classNames[UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))),
                         navLayout === "around" &&
                             !props.hideNavigation &&
                             displayIndex === numberOfMonths - 1 && (React__default["default"].createElement(components.NextMonthButton, { type: "button", className: classNames[UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, "aria-disabled": nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: handleNextClick, "data-animated-button": props.animate ? "true" : undefined },
@@ -34605,9 +35131,7 @@ function DayPicker(initialProps) {
                                 weekdays.map((weekday) => (React__default["default"].createElement(components.Weekday, { "aria-label": labelWeekday(weekday, dateLib.options, dateLib), className: classNames[UI.Weekday], key: String(weekday), style: styles?.[UI.Weekday], scope: "col" }, formatWeekdayName(weekday, dateLib.options, dateLib)))))),
                             React__default["default"].createElement(components.Weeks, { "data-animated-weeks": props.animate ? "true" : undefined, className: classNames[UI.Weeks], style: styles?.[UI.Weeks] }, calendarMonth.weeks.map((week) => {
                                 return (React__default["default"].createElement(components.Week, { className: classNames[UI.Week], key: week.weekNumber, style: styles?.[UI.Week], week: week },
-                                    showWeekNumber && (
-                                    // biome-ignore lint/a11y/useSemanticElements: react component
-                                    React__default["default"].createElement(components.WeekNumber, { week: week, style: styles?.[UI.WeekNumber], "aria-label": labelWeekNumber(week.weekNumber, {
+                                    showWeekNumber && (React__default["default"].createElement(components.WeekNumber, { week: week, style: styles?.[UI.WeekNumber], "aria-label": labelWeekNumber(week.weekNumber, {
                                             locale,
                                         }), className: classNames[UI.WeekNumber], scope: "row", role: "rowheader" }, formatWeekNumber(week.weekNumber, dateLib))),
                                     week.days.map((day) => {
@@ -34631,18 +35155,16 @@ function DayPicker(initialProps) {
                                         const ariaLabel = !isInteractive && !modifiers.hidden
                                             ? labelGridcell(date, modifiers, dateLib.options, dateLib)
                                             : undefined;
-                                        return (
-                                        // biome-ignore lint/a11y/useSemanticElements: react component
-                                        React__default["default"].createElement(components.Day, { key: `${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`, day: day, modifiers: modifiers, className: className.join(" "), style: style, role: "gridcell", "aria-selected": modifiers.selected || undefined, "aria-label": ariaLabel, "data-day": dateLib.format(date, "yyyy-MM-dd"), "data-month": day.outside
-                                                ? dateLib.format(date, "yyyy-MM")
-                                                : undefined, "data-selected": modifiers.selected || undefined, "data-disabled": modifiers.disabled || undefined, "data-hidden": modifiers.hidden || undefined, "data-outside": day.outside || undefined, "data-focused": modifiers.focused || undefined, "data-today": modifiers.today || undefined }, !modifiers.hidden && isInteractive ? (React__default["default"].createElement(components.DayButton, { className: classNames[UI.DayButton], style: styles?.[UI.DayButton], type: "button", day: day, modifiers: modifiers, disabled: modifiers.disabled || undefined, tabIndex: isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton(date, modifiers, dateLib.options, dateLib), onClick: handleDayClick(day, modifiers), onBlur: handleDayBlur(day, modifiers), onFocus: handleDayFocus(day, modifiers), onKeyDown: handleDayKeyDown(day, modifiers), onMouseEnter: handleDayMouseEnter(day, modifiers), onMouseLeave: handleDayMouseLeave(day, modifiers) }, formatDay(date, dateLib.options, dateLib))) : (!modifiers.hidden &&
+                                        return (React__default["default"].createElement(components.Day, { key: `${day.isoDate}_${day.displayMonthId}`, day: day, modifiers: modifiers, className: className.join(" "), style: style, role: "gridcell", "aria-selected": modifiers.selected || undefined, "aria-label": ariaLabel, "data-day": day.isoDate, "data-month": day.outside ? day.dateMonthId : undefined, "data-selected": modifiers.selected || undefined, "data-disabled": modifiers.disabled || undefined, "data-hidden": modifiers.hidden || undefined, "data-outside": day.outside || undefined, "data-focused": modifiers.focused || undefined, "data-today": modifiers.today || undefined }, !modifiers.hidden && isInteractive ? (React__default["default"].createElement(components.DayButton, { className: classNames[UI.DayButton], style: styles?.[UI.DayButton], type: "button", day: day, modifiers: modifiers, disabled: (!modifiers.focused &&
+                                                modifiers.disabled) ||
+                                                undefined, "aria-disabled": (modifiers.focused &&
+                                                modifiers.disabled) ||
+                                                undefined, tabIndex: isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton(date, modifiers, dateLib.options, dateLib), onClick: handleDayClick(day, modifiers), onBlur: handleDayBlur(day, modifiers), onFocus: handleDayFocus(day, modifiers), onKeyDown: handleDayKeyDown(day, modifiers), onMouseEnter: handleDayMouseEnter(day, modifiers), onMouseLeave: handleDayMouseLeave(day, modifiers) }, formatDay(date, dateLib.options, dateLib))) : (!modifiers.hidden &&
                                             formatDay(day.date, dateLib.options, dateLib))));
                                     })));
                             })))));
                 })),
-            props.footer && (
-            // biome-ignore lint/a11y/useSemanticElements: react component
-            React__default["default"].createElement(components.Footer, { className: classNames[UI.Footer], style: styles?.[UI.Footer], role: "status", "aria-live": "polite" }, props.footer)))));
+            props.footer && (React__default["default"].createElement(components.Footer, { className: classNames[UI.Footer], style: styles?.[UI.Footer], role: "status", "aria-live": "polite" }, props.footer)))));
 }
 
 function styleInject(css, ref) {
@@ -34672,7 +35194,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$3 = "/* Variables declaration */\n.rdp-root {\n  --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */\n  --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */\n\n  --rdp-day-height: 44px; /* The height of the day cells. */\n  --rdp-day-width: 44px; /* The width of the day cells. */\n\n  --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */\n  --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */\n  --rdp-day_button-height: 42px; /* The height of the day cells. */\n  --rdp-day_button-width: 42px; /* The width of the day cells. */\n\n  --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */\n  --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */\n  --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */\n  --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */\n\n  --rdp-dropdown-gap: 0.5rem; /* The gap between the dropdowns used in the month captons. */\n\n  --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */\n\n  --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */\n  --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */\n  --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */\n  --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */\n\n  --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */\n  --rdp-range_middle-color: inherit; /* The color of the range text. */\n\n  --rdp-range_start-color: white; /* The color of the range text. */\n  --rdp-range_start-background: linear-gradient(\n    var(--rdp-gradient-direction),\n    transparent 50%,\n    var(--rdp-range_middle-background-color) 50%\n  ); /* Used for the background of the start of the selected range. */\n  --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */\n\n  --rdp-range_end-background: linear-gradient(\n    var(--rdp-gradient-direction),\n    var(--rdp-range_middle-background-color) 50%,\n    transparent 50%\n  ); /* Used for the background of the end of the selected range. */\n  --rdp-range_end-color: white; /* The color of the range text. */\n  --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */\n\n  --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */\n  --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */\n\n  --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */\n  --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */\n  --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */\n  --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */\n\n  --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */\n  --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */\n  --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */\n\n  --rdp-gradient-direction: 90deg;\n\n  --rdp-animation_duration: 0.3s;\n  --rdp-animation_timing: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.rdp-root[dir=\"rtl\"] {\n  --rdp-gradient-direction: -90deg;\n}\n\n.rdp-root[data-broadcast-calendar=\"true\"] {\n  --rdp-outside-opacity: unset;\n}\n\n/* Root of the component. */\n.rdp-root {\n  position: relative; /* Required to position the navigation toolbar. */\n  box-sizing: border-box;\n}\n\n.rdp-root * {\n  box-sizing: border-box;\n}\n\n.rdp-day {\n  width: var(--rdp-day-width);\n  height: var(--rdp-day-height);\n  text-align: center;\n}\n\n.rdp-day_button {\n  background: none;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  font: inherit;\n  color: inherit;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n\n  width: var(--rdp-day_button-width);\n  height: var(--rdp-day_button-height);\n  border: var(--rdp-day_button-border);\n  border-radius: var(--rdp-day_button-border-radius);\n}\n\n.rdp-day_button:disabled {\n  cursor: revert;\n}\n\n.rdp-caption_label {\n  z-index: 1;\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n\n  white-space: nowrap;\n  border: 0;\n}\n\n.rdp-dropdown:focus-visible ~ .rdp-caption_label {\n  outline: 5px auto Highlight;\n  /* biome-ignore lint/suspicious/noDuplicateProperties: backward compatibility */\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\n.rdp-button_next,\n.rdp-button_previous {\n  border: none;\n  background: none;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  font: inherit;\n  color: inherit;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  appearance: none;\n\n  width: var(--rdp-nav_button-width);\n  height: var(--rdp-nav_button-height);\n}\n\n.rdp-button_next:disabled,\n.rdp-button_next[aria-disabled=\"true\"],\n.rdp-button_previous:disabled,\n.rdp-button_previous[aria-disabled=\"true\"] {\n  cursor: revert;\n\n  opacity: var(--rdp-nav_button-disabled-opacity);\n}\n\n.rdp-chevron {\n  display: inline-block;\n  fill: var(--rdp-accent-color);\n}\n\n.rdp-root[dir=\"rtl\"] .rdp-nav .rdp-chevron {\n  transform: rotate(180deg);\n  transform-origin: 50%;\n}\n\n.rdp-dropdowns {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--rdp-dropdown-gap);\n}\n.rdp-dropdown {\n  z-index: 2;\n\n  /* Reset */\n  opacity: 0;\n  appearance: none;\n  position: absolute;\n  inset-block-start: 0;\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: inherit;\n  border: none;\n  line-height: inherit;\n}\n\n.rdp-dropdown_root {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rdp-dropdown_root[data-disabled=\"true\"] .rdp-chevron {\n  opacity: var(--rdp-disabled-opacity);\n}\n\n.rdp-month_caption {\n  display: flex;\n  align-content: center;\n  height: var(--rdp-nav-height);\n  font-weight: bold;\n  font-size: large;\n}\n\n.rdp-root[data-nav-layout=\"around\"] .rdp-month,\n.rdp-root[data-nav-layout=\"after\"] .rdp-month {\n  position: relative;\n}\n\n.rdp-root[data-nav-layout=\"around\"] .rdp-month_caption {\n  justify-content: center;\n  margin-inline-start: var(--rdp-nav_button-width);\n  margin-inline-end: var(--rdp-nav_button-width);\n  position: relative;\n}\n\n.rdp-root[data-nav-layout=\"around\"] .rdp-button_previous {\n  position: absolute;\n  inset-inline-start: 0;\n  top: 0;\n  height: var(--rdp-nav-height);\n  display: inline-flex;\n}\n\n.rdp-root[data-nav-layout=\"around\"] .rdp-button_next {\n  position: absolute;\n  inset-inline-end: 0;\n  top: 0;\n  height: var(--rdp-nav-height);\n  display: inline-flex;\n  justify-content: center;\n}\n\n.rdp-months {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--rdp-months-gap);\n  max-width: fit-content;\n}\n\n.rdp-month_grid {\n  border-collapse: collapse;\n}\n\n.rdp-nav {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-end: 0;\n\n  display: flex;\n  align-items: center;\n\n  height: var(--rdp-nav-height);\n}\n\n.rdp-weekday {\n  opacity: var(--rdp-weekday-opacity);\n  padding: var(--rdp-weekday-padding);\n  font-weight: 500;\n  font-size: smaller;\n  text-align: var(--rdp-weekday-text-align);\n  text-transform: var(--rdp-weekday-text-transform);\n}\n\n.rdp-week_number {\n  opacity: var(--rdp-week_number-opacity);\n  font-weight: 400;\n  font-size: small;\n  height: var(--rdp-week_number-height);\n  width: var(--rdp-week_number-width);\n  border: var(--rdp-week_number-border);\n  border-radius: var(--rdp-week_number-border-radius);\n  text-align: var(--rdp-weeknumber-text-align);\n}\n\n/* DAY MODIFIERS */\n.rdp-today:not(.rdp-outside) {\n  color: var(--rdp-today-color);\n}\n\n.rdp-selected {\n  font-weight: bold;\n  font-size: large;\n}\n\n.rdp-selected .rdp-day_button {\n  border: var(--rdp-selected-border);\n}\n\n.rdp-outside {\n  opacity: var(--rdp-outside-opacity);\n}\n\n.rdp-disabled {\n  opacity: var(--rdp-disabled-opacity);\n}\n\n.rdp-hidden {\n  visibility: hidden;\n  color: var(--rdp-range_start-color);\n}\n\n.rdp-range_start {\n  background: var(--rdp-range_start-background);\n}\n\n.rdp-range_start .rdp-day_button {\n  background-color: var(--rdp-range_start-date-background-color);\n  color: var(--rdp-range_start-color);\n}\n\n.rdp-range_middle {\n  background-color: var(--rdp-range_middle-background-color);\n}\n\n.rdp-range_middle .rdp-day_button {\n  border: unset;\n  border-radius: unset;\n  color: var(--rdp-range_middle-color);\n}\n\n.rdp-range_end {\n  background: var(--rdp-range_end-background);\n  color: var(--rdp-range_end-color);\n}\n\n.rdp-range_end .rdp-day_button {\n  color: var(--rdp-range_start-color);\n  background-color: var(--rdp-range_end-date-background-color);\n}\n\n.rdp-range_start.rdp-range_end {\n  background: revert;\n}\n\n.rdp-focusable {\n  cursor: pointer;\n}\n\n@keyframes rdp-slide_in_left {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes rdp-slide_in_right {\n  0% {\n    transform: translateX(100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes rdp-slide_out_left {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes rdp-slide_out_right {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n.rdp-weeks_before_enter {\n  animation: rdp-slide_in_left var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-weeks_before_exit {\n  animation: rdp-slide_out_left var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-weeks_after_enter {\n  animation: rdp-slide_in_right var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-weeks_after_exit {\n  animation: rdp-slide_out_right var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-root[dir=\"rtl\"] .rdp-weeks_after_enter {\n  animation: rdp-slide_in_left var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-root[dir=\"rtl\"] .rdp-weeks_before_exit {\n  animation: rdp-slide_out_right var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-root[dir=\"rtl\"] .rdp-weeks_before_enter {\n  animation: rdp-slide_in_right var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-root[dir=\"rtl\"] .rdp-weeks_after_exit {\n  animation: rdp-slide_out_left var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n@keyframes rdp-fade_in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes rdp-fade_out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n.rdp-caption_after_enter {\n  animation: rdp-fade_in var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-caption_after_exit {\n  animation: rdp-fade_out var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-caption_before_enter {\n  animation: rdp-fade_in var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-caption_before_exit {\n  animation: rdp-fade_out var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n";
+var css_248z$3 = "/* Variables declaration */\n.rdp-root {\n  --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */\n  --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */\n\n  --rdp-day-height: 44px; /* The height of the day cells. */\n  --rdp-day-width: 44px; /* The width of the day cells. */\n\n  --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */\n  --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */\n  --rdp-day_button-height: 42px; /* The height of the day cells. */\n  --rdp-day_button-width: 42px; /* The width of the day cells. */\n\n  --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */\n  --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */\n  --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */\n  --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */\n\n  --rdp-dropdown-gap: 0.5rem; /* The gap between the dropdowns used in the month captons. */\n\n  --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */\n\n  --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */\n  --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */\n  --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */\n  --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */\n\n  --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */\n  --rdp-range_middle-color: inherit; /* The color of the range text. */\n\n  --rdp-range_start-color: white; /* The color of the range text. */\n  --rdp-range_start-background: linear-gradient(\n    var(--rdp-gradient-direction),\n    transparent 50%,\n    var(--rdp-range_middle-background-color) 50%\n  ); /* Used for the background of the start of the selected range. */\n  --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */\n\n  --rdp-range_end-background: linear-gradient(\n    var(--rdp-gradient-direction),\n    var(--rdp-range_middle-background-color) 50%,\n    transparent 50%\n  ); /* Used for the background of the end of the selected range. */\n  --rdp-range_end-color: white; /* The color of the range text. */\n  --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */\n\n  --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */\n  --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */\n\n  --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */\n  --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */\n  --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */\n  --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */\n\n  --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */\n  --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */\n  --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */\n\n  --rdp-gradient-direction: 90deg;\n\n  --rdp-animation_duration: 0.3s;\n  --rdp-animation_timing: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.rdp-root[dir=\"rtl\"] {\n  --rdp-gradient-direction: -90deg;\n}\n\n.rdp-root[data-broadcast-calendar=\"true\"] {\n  --rdp-outside-opacity: unset;\n}\n\n/* Root of the component. */\n.rdp-root {\n  position: relative; /* Required to position the navigation toolbar. */\n  box-sizing: border-box;\n}\n\n.rdp-root * {\n  box-sizing: border-box;\n}\n\n.rdp-day {\n  width: var(--rdp-day-width);\n  height: var(--rdp-day-height);\n  text-align: center;\n}\n\n.rdp-day_button {\n  background: none;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  font: inherit;\n  color: inherit;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n\n  width: var(--rdp-day_button-width);\n  height: var(--rdp-day_button-height);\n  border: var(--rdp-day_button-border);\n  border-radius: var(--rdp-day_button-border-radius);\n}\n\n.rdp-day_button:disabled {\n  cursor: revert;\n}\n\n.rdp-caption_label {\n  z-index: 1;\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n\n  white-space: nowrap;\n  border: 0;\n}\n\n.rdp-dropdown:focus-visible ~ .rdp-caption_label {\n  outline: 5px auto Highlight;\n  /* biome-ignore lint/suspicious/noDuplicateProperties: backward compatibility */\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\n.rdp-button_next,\n.rdp-button_previous {\n  border: none;\n  background: none;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  font: inherit;\n  color: inherit;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  appearance: none;\n\n  width: var(--rdp-nav_button-width);\n  height: var(--rdp-nav_button-height);\n}\n\n.rdp-button_next:disabled,\n.rdp-button_next[aria-disabled=\"true\"],\n.rdp-button_previous:disabled,\n.rdp-button_previous[aria-disabled=\"true\"] {\n  cursor: revert;\n\n  opacity: var(--rdp-nav_button-disabled-opacity);\n}\n\n.rdp-chevron {\n  display: inline-block;\n  fill: var(--rdp-accent-color);\n}\n\n.rdp-root[dir=\"rtl\"] .rdp-nav .rdp-chevron {\n  transform: rotate(180deg);\n  transform-origin: 50%;\n}\n\n.rdp-dropdowns {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--rdp-dropdown-gap);\n}\n.rdp-dropdown {\n  z-index: 2;\n\n  /* Reset */\n  opacity: 0;\n  appearance: none;\n  position: absolute;\n  inset-block-start: 0;\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: inherit;\n  border: none;\n  line-height: inherit;\n}\n\n.rdp-dropdown_root {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rdp-dropdown_root[data-disabled=\"true\"] .rdp-chevron {\n  opacity: var(--rdp-disabled-opacity);\n}\n\n.rdp-month_caption {\n  display: flex;\n  align-content: center;\n  height: var(--rdp-nav-height);\n  font-weight: bold;\n  font-size: large;\n}\n\n.rdp-root[data-nav-layout=\"around\"] .rdp-month,\n.rdp-root[data-nav-layout=\"after\"] .rdp-month {\n  position: relative;\n}\n\n.rdp-root[data-nav-layout=\"around\"] .rdp-month_caption {\n  justify-content: center;\n  margin-inline-start: var(--rdp-nav_button-width);\n  margin-inline-end: var(--rdp-nav_button-width);\n  position: relative;\n}\n\n.rdp-root[data-nav-layout=\"around\"] .rdp-button_previous {\n  position: absolute;\n  inset-inline-start: 0;\n  top: 0;\n  height: var(--rdp-nav-height);\n  display: inline-flex;\n}\n\n.rdp-root[data-nav-layout=\"around\"] .rdp-button_next {\n  position: absolute;\n  inset-inline-end: 0;\n  top: 0;\n  height: var(--rdp-nav-height);\n  display: inline-flex;\n  justify-content: center;\n}\n\n.rdp-months {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--rdp-months-gap);\n  max-width: fit-content;\n}\n\n.rdp-month_grid {\n  border-collapse: collapse;\n}\n\n.rdp-nav {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-end: 0;\n\n  display: flex;\n  align-items: center;\n\n  height: var(--rdp-nav-height);\n}\n\n.rdp-weekday {\n  opacity: var(--rdp-weekday-opacity);\n  padding: var(--rdp-weekday-padding);\n  font-weight: 500;\n  font-size: smaller;\n  text-align: var(--rdp-weekday-text-align);\n  text-transform: var(--rdp-weekday-text-transform);\n}\n\n.rdp-week_number {\n  opacity: var(--rdp-week_number-opacity);\n  font-weight: 400;\n  font-size: small;\n  height: var(--rdp-week_number-height);\n  width: var(--rdp-week_number-width);\n  border: var(--rdp-week_number-border);\n  border-radius: var(--rdp-week_number-border-radius);\n  text-align: var(--rdp-weeknumber-text-align);\n}\n\n/* DAY MODIFIERS */\n.rdp-today:not(.rdp-outside) {\n  color: var(--rdp-today-color);\n}\n\n.rdp-selected {\n  font-weight: bold;\n  font-size: large;\n}\n\n.rdp-selected .rdp-day_button {\n  border: var(--rdp-selected-border);\n}\n\n.rdp-outside {\n  opacity: var(--rdp-outside-opacity);\n}\n\n.rdp-disabled:not(.rdp-selected) {\n  opacity: var(--rdp-disabled-opacity);\n}\n\n.rdp-hidden {\n  visibility: hidden;\n  color: var(--rdp-range_start-color);\n}\n\n.rdp-range_start {\n  background: var(--rdp-range_start-background);\n}\n\n.rdp-range_start .rdp-day_button {\n  background-color: var(--rdp-range_start-date-background-color);\n  color: var(--rdp-range_start-color);\n}\n\n.rdp-range_middle {\n  background-color: var(--rdp-range_middle-background-color);\n}\n\n.rdp-range_middle .rdp-day_button {\n  border: unset;\n  border-radius: unset;\n  color: var(--rdp-range_middle-color);\n}\n\n.rdp-range_end {\n  background: var(--rdp-range_end-background);\n  color: var(--rdp-range_end-color);\n}\n\n.rdp-range_end .rdp-day_button {\n  color: var(--rdp-range_start-color);\n  background-color: var(--rdp-range_end-date-background-color);\n}\n\n.rdp-range_start.rdp-range_end {\n  background: revert;\n}\n\n.rdp-focusable {\n  cursor: pointer;\n}\n\n@keyframes rdp-slide_in_left {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes rdp-slide_in_right {\n  0% {\n    transform: translateX(100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes rdp-slide_out_left {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes rdp-slide_out_right {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n.rdp-weeks_before_enter {\n  animation: rdp-slide_in_left var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-weeks_before_exit {\n  animation: rdp-slide_out_left var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-weeks_after_enter {\n  animation: rdp-slide_in_right var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-weeks_after_exit {\n  animation: rdp-slide_out_right var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-root[dir=\"rtl\"] .rdp-weeks_after_enter {\n  animation: rdp-slide_in_left var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-root[dir=\"rtl\"] .rdp-weeks_before_exit {\n  animation: rdp-slide_out_right var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-root[dir=\"rtl\"] .rdp-weeks_before_enter {\n  animation: rdp-slide_in_right var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-root[dir=\"rtl\"] .rdp-weeks_after_exit {\n  animation: rdp-slide_out_left var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n@keyframes rdp-fade_in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes rdp-fade_out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n.rdp-caption_after_enter {\n  animation: rdp-fade_in var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-caption_after_exit {\n  animation: rdp-fade_out var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-caption_before_enter {\n  animation: rdp-fade_in var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-caption_before_exit {\n  animation: rdp-fade_out var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n";
 styleInject(css_248z$3);
 
 var reactInputMask = {exports: {}};
@@ -39173,6 +39695,8 @@ const NumberFilterComponent = ({ column, filterBy, fieldFilter, handleSave, form
         allowNegative: column.numericSettings?.allowNegative ?? false,
         decimalScale: column.numericSettings?.fraction ?? 0
     };
+    console.log(column.numericSettings?.fraction);
+    console.log(column.field);
     let floatValue = parseFloat(valueFilter ?? '0');
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-filter-popup", onKeyDown: (e) => {
                 if (e.code === 'Enter' || e.code === 'NumpadEnter') {
@@ -39354,11 +39878,11 @@ const TableComponent = ({ idTable, dataSource, contentColumns, headerColumns, se
     }, []);
     return (jsxRuntime.jsx("div", { ref: containerRef, className: "r-gridtable", style: { maxHeight: `${height ? `${height}px` : 'auto'}` }, children: jsxRuntime.jsxs("table", { style: { width: '100%' }, role: "presentation", children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: contentColumns }), jsxRuntime.jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((element, indexParent) => {
                         return (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
-                                return (jsxRuntime.jsx(HeaderTableCol, { col: col, idTable: idTable ?? '', dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: containerRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: optionsFilter, allowFiltering: allowFiltering, allowSorting: allowSorting, formatSetting: formatSetting, changeFilter: (val) => {
+                                return (jsxRuntime.jsx(HeaderTableCol, { col: col, idTable: idTable ?? '', dataSource: dataSource, fieldKey: fieldKey, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: containerRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: optionsFilter, allowFiltering: allowFiltering, allowSorting: allowSorting, formatSetting: formatSetting, changeFilter: (val) => {
                                         setFilterBy([...val]);
                                     }, changeOrder: (val) => {
                                         setOrderBy([...val]);
-                                    }, columns: contentColumns, setContentColumns: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: totalCount }, `header-${indexParent}-${index}`));
+                                    }, columns: contentColumns, setContentColumns: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft }, `header-${indexParent}-${index}`));
                             }) }, `header-${-indexParent}`));
                     }) }), jsxRuntime.jsxs("tbody", { className: "r-gridcontent", role: "rowgroup", children: [jsxRuntime.jsx("tr", { style: { height: offsetY } }), filteredData.slice(startIndex, endIndex).map((row) => {
                             const indexRow = row.indexRow;
@@ -40071,17 +40595,35 @@ const SettingColumn = React__default["default"].memo((props) => {
                             }) }) })] }), jsxRuntime.jsxs("div", { style: { boxShadow: '0 4px 24px 0 rgb(34 41 47 / 10%)' }, className: "d-flex justify-content-between align-items-center w-100 py-75 px-1", children: [jsxRuntime.jsx("div", { children: settingColumns?.updatedDate && (jsxRuntime.jsxs("p", { children: [jsxRuntime.jsxs("strong", { children: [t('Update date'), ": "] }), " ", jsxRuntime.jsx("span", { children: settingColumns.updatedDate ? formatDateTime(settingColumns.updatedDate, 'DD/MM/yyyy HH:mm') : '' }), jsxRuntime.jsxs("strong", { className: "ms-2", children: [t('Editor'), ": "] }), " ", jsxRuntime.jsx("span", { children: settingColumns.updatedByName })] })) }), jsxRuntime.jsxs("div", { children: [resetDefaultColumns && (jsxRuntime.jsx(Button$1$1, { color: "primary", onClick: () => messageBoxConfirm(t, handleResetColumns, {}, 'Do you want to reset the default settings?'), className: "me-1", children: t('Reset') })), jsxRuntime.jsx(Button$1$1, { color: "primary", onClick: handleSubmit, className: "me-1", children: t('Confirm') }), jsxRuntime.jsx(Button$1$1, { color: "secondary", onClick: handleCancel, outline: true, children: t('Close') })] })] })] }));
 });
 
-const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleInsertAfter, handleDeleteAll, setOpenPopupSetupColumn, focusRow, editDisable, addDisable, buttonSetting, toolbarSetting }) => {
+const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleInsertAfter, handleDeleteAll, setOpenPopupSetupColumn, focusRow, editDisable, addDisable, buttonSetting, toolbarSetting, }) => {
     const { t } = reactI18next.useTranslation();
-    return (jsxRuntime.jsx("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: jsxRuntime.jsxs("div", { className: "r-toolbar-items", children: [jsxRuntime.jsxs("div", { className: "r-toolbar-left", children: [jsxRuntime.jsxs("div", { className: classNames$1('r-toolbar-item d-flex', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: [jsxRuntime.jsx(Button$1$1, { color: "success", outline: true, onClick: () => handleAdd(1), className: "d-flex", children: t('Add item') }), !!buttonSetting?.disableAddMulti && (jsxRuntime.jsxs(UncontrolledDropdown, { className: "nav-item", children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", className: "me-0 d-flex", children: jsxRuntime.jsx(Button$1$1, { type: "button", color: "success", outline: true, style: { marginLeft: -1 }, className: "px-25", children: jsxRuntime.jsx("svg", { fill: "#28c76f", height: "15", width: "20", viewBox: "0 0 20 20", children: jsxRuntime.jsx("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) }) }), jsxRuntime.jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-0", children: [jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(10), children: "10 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(20), children: "20 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(30), children: "30 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(40), children: "40 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(50), children: "50 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(100), children: "100 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(1000), children: "1000 h\u00E0ng" })] })] }))] }), (focusRow ?? -1) > -1 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1$1, { color: "success", outline: true, onClick: () => {
+    return (jsxRuntime.jsx("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: jsxRuntime.jsxs("div", { className: "r-toolbar-items", children: [jsxRuntime.jsxs("div", { className: "r-toolbar-left", children: [jsxRuntime.jsxs("div", { className: classNames$1('r-toolbar-item d-flex', {
+                                'd-none': editDisable || addDisable,
+                            }), "aria-disabled": "false", children: [jsxRuntime.jsx(Button$1$1, { color: "success", outline: true, onClick: () => handleAdd(1), className: "d-flex", children: t('Add item') }), buttonSetting?.disableAddMulti === true && (jsxRuntime.jsxs(UncontrolledDropdown, { className: "nav-item", children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", className: "me-0 d-flex", children: jsxRuntime.jsx(Button$1$1, { type: "button", color: "success", outline: true, style: { marginLeft: -1 }, className: "px-25", children: jsxRuntime.jsx("svg", { fill: "#28c76f", height: "15", width: "20", viewBox: "0 0 20 20", children: jsxRuntime.jsx("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) }) }), jsxRuntime.jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-0", children: [jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(10), children: "10 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(20), children: "20 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(30), children: "30 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(40), children: "40 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(50), children: "50 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(100), children: "100 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(1000), children: "1000 h\u00E0ng" })] })] }))] }), (focusRow ?? -1) > -1 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', {
+                                        'd-none': editDisable ||
+                                            addDisable ||
+                                            buttonSetting?.duplicateDisable,
+                                    }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1$1, { color: "success", outline: true, onClick: () => {
                                             handleDuplicate();
-                                        }, className: "d-flex", children: t('Duplicate') }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1$1, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t('Insert item before') }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1$1, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t('Insert item after') }) })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " })), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1$1, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t('Delete all item') }) }), toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
+                                        }, className: "d-flex", children: t('Duplicate') }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', {
+                                        'd-none': editDisable ||
+                                            addDisable ||
+                                            buttonSetting?.insertBeforeDisable,
+                                    }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1$1, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t('Insert item before') }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', {
+                                        'd-none': editDisable ||
+                                            addDisable ||
+                                            buttonSetting?.insertAfterDisable,
+                                    }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1$1, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t('Insert item after') }) })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " })), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', {
+                                'd-none': editDisable || buttonSetting?.deleteAllDisable,
+                            }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1$1, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t('Delete all item') }) }), toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
                             return (item.align === 'left' && (jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`)));
                         })] }), jsxRuntime.jsx("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
                         return (item.align === 'center' && (jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`)));
                     }) }), jsxRuntime.jsxs("div", { className: "r-toolbar-right", children: [toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
                             return (item.align === 'right' && (jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`)));
-                        }), !toolbarSetting?.hiddenSetting && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item me-25'), "aria-disabled": "false", children: jsxRuntime.jsx(SvgSettings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item me-25', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: jsxRuntime.jsxs(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", color: "primary", onClick: (e) => e.preventDefault(), children: jsxRuntime.jsx(SvgInfo, { className: "cursor-pointer text-primary" }) }), jsxRuntime.jsx(DropdownMenu$1, { className: "formula-dropdown icon-dropdown", children: jsxRuntime.jsxs("ul", { className: "mb-0 pe-50", children: [jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\u00E2n b\u1EA3n" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \u00F4 v\u00E0 Ctrl + V \u0111\u1EC3 d\u00E1n th\u00F4ng tin t\u1EEB excel" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\u00E9p h\u00E0ng" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + V \u0111\u1EC3 d\u00E1n h\u00E0ng" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2193 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng d\u01B0\u1EDBi" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2191 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng tr\u00EAn" })] }) })] }) })] }))] })] }) }));
+                        }), !toolbarSetting?.hiddenSetting && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item me-25'), "aria-disabled": "false", children: jsxRuntime.jsx(SvgSettings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item me-25', {
+                                        'd-none': editDisable || addDisable,
+                                    }), "aria-disabled": "false", children: jsxRuntime.jsxs(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", color: "primary", onClick: (e) => e.preventDefault(), children: jsxRuntime.jsx(SvgInfo, { className: "cursor-pointer text-primary" }) }), jsxRuntime.jsx(DropdownMenu$1, { className: "formula-dropdown icon-dropdown", children: jsxRuntime.jsxs("ul", { className: "mb-0 pe-50", children: [jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\u00E2n b\u1EA3n" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \u00F4 v\u00E0 Ctrl + V \u0111\u1EC3 d\u00E1n th\u00F4ng tin t\u1EEB excel" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\u00E9p h\u00E0ng" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + V \u0111\u1EC3 d\u00E1n h\u00E0ng" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2193 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng d\u01B0\u1EDBi" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2191 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng tr\u00EAn" })] }) })] }) })] }))] })] }) }));
 };
 
 const RenderToolbarTop = ({ toolbarTopOption, maximize, setMaximize }) => {
@@ -69002,7 +69544,7 @@ const UnExpandAllIcon = ({ className, color = '#7F7F7F', size = 24, onClick, sty
 };
 
 const RenderContentCol = React__default["default"].memo((props) => {
-    const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, setSelectedRows, handleCloseContext, handleDoubleClick, handleCellClick, fieldKey, isMulti, } = props;
+    const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, setSelectedRows, handleCloseContext, handleDoubleClick, handleCellClick, fieldKey, isMulti } = props;
     const cellId = `content-${idTable}-row${indexRow}col-${indexCol}`;
     const checkOverflow = () => {
         const element = document.getElementById(cellId);
@@ -69024,12 +69566,10 @@ const RenderContentCol = React__default["default"].memo((props) => {
     const RenderElement = () => {
         if (col.field === '#' || col.type === '#') {
             return (jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer text-center', {
-                    'r-active-cell': isSelected,
+                    'r-active-cell': isSelected
                 }), style: {
-                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType
-                        ? 600
-                        : 400,
-                    fontStyle: row.haveItalicType ? 'italic' : 'normal',
+                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType ? 600 : 400,
+                    fontStyle: row.haveItalicType ? 'italic' : 'normal'
                 }, onDoubleClick: (e) => {
                     e.preventDefault();
                     handleCloseContext();
@@ -69038,15 +69578,11 @@ const RenderContentCol = React__default["default"].memo((props) => {
         }
         else if (col.type === 'checkbox' || col.field === 'checkbox') {
             return (jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer', {
-                    'r-active-cell': isSelected,
+                    'r-active-cell': isSelected
                 }), style: {
                     display: 'flex',
-                    justifyContent: col.textAlign === 'center'
-                        ? 'center'
-                        : col.textAlign === 'right'
-                            ? 'flex-end'
-                            : 'flex-start',
-                    alignItems: 'center',
+                    justifyContent: col.textAlign === 'center' ? 'center' : col.textAlign === 'right' ? 'flex-end' : 'flex-start',
+                    alignItems: 'center'
                 }, onClick: (e) => {
                     setSelectedRows(toggleSelect());
                     e.stopPropagation();
@@ -69056,12 +69592,8 @@ const RenderContentCol = React__default["default"].memo((props) => {
             let value = row[col.field];
             // ✅ Format dữ liệu theo loại cột
             if (col.type === 'numeric') {
-                value =
-                    formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
-                if (!zeroVisiable &&
-                    !col.zeroVisiable &&
-                    !(row?.sortOrder < 0 || row?.sortOrder > 100000) &&
-                    (value === '0' || value === 0)) {
+                value = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
+                if (!zeroVisiable && !col.zeroVisiable && !(row?.sortOrder < 0 || row?.sortOrder > 100000) && (value === '0' || value === 0)) {
                     value = '';
                 }
             }
@@ -69069,43 +69601,31 @@ const RenderContentCol = React__default["default"].memo((props) => {
                 value = value ? formatDateTime(value, formatSetting?.dateFormat) : '';
             }
             else if (col.type === 'datetime') {
-                value = value
-                    ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
-                    : '';
+                value = value ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
             }
             if (col.template) {
                 value = col.template(row, indexRow) ?? '';
             }
             const isNegative = col.type === 'numeric' && Number(row[col.field]) < 0;
-            const textColor = isNegative
-                ? (formatSetting?.colorNegative ?? 'red')
-                : undefined;
-            const prefix = isNegative ? (formatSetting?.prefixNegative ?? '-') : '';
-            const suffix = isNegative ? (formatSetting?.suffixNegative ?? '') : '';
-            const displayText = isNegative
-                ? `${prefix}${value}${suffix}`
-                : (value ?? '');
+            const textColor = isNegative ? formatSetting?.colorNegative ?? 'red' : undefined;
+            const prefix = isNegative ? formatSetting?.prefixNegative ?? '-' : '';
+            const suffix = isNegative ? formatSetting?.suffixNegative ?? '' : '';
+            const displayText = isNegative ? `${prefix}${value}${suffix}` : value ?? '';
             return (jsxRuntime.jsxs("div", { className: classNames$1('r-rowcell-div cursor-pointer', {
-                    'r-active-cell': isSelected,
+                    'r-active-cell': isSelected
                 }), style: {
-                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType
-                        ? 600
-                        : 400,
-                    fontStyle: row.haveItalicType ? 'italic' : 'normal',
+                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType ? 600 : 400,
+                    fontStyle: row.haveItalicType ? 'italic' : 'normal'
                 }, children: [jsxRuntime.jsx("div", { className: "r-cell-text", style: {
                             display: 'flex',
-                            justifyContent: col.textAlign === 'center'
-                                ? 'center'
-                                : col.textAlign === 'right'
-                                    ? 'flex-end'
-                                    : 'flex-start',
-                            alignItems: 'center',
+                            justifyContent: col.textAlign === 'center' ? 'center' : col.textAlign === 'right' ? 'flex-end' : 'flex-start',
+                            alignItems: 'center'
                         }, children: jsxRuntime.jsx("div", { id: cellId, style: {
                                 color: textColor,
                                 overflow: 'hidden',
                                 textOverflow: 'ellipsis',
                                 whiteSpace: 'pre',
-                                maxWidth: '100%',
+                                maxWidth: '100%'
                             }, children: displayText }) }), checkOverflow() && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: cellId, placement: "top", children: jsxRuntime.jsx("div", { style: { color: textColor }, onClick: (e) => {
                                 e.stopPropagation();
                                 e.preventDefault();
@@ -69114,15 +69634,10 @@ const RenderContentCol = React__default["default"].memo((props) => {
     };
     const clickTimerRef = React$5.useRef(null);
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: col.visible !== false && col.isGroup !== true && (jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, {
-                'fixed-last': (col.fixedType === 'left' &&
-                    indexCol === lastObjWidthFixLeft) ||
-                    (col.fixedType === 'right' &&
-                        indexCol === fisrtObjWidthFixRight),
+                'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight)
             }, { 'r-active': isSelected }), style: {
                 left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
-                right: col.fixedType === 'right'
-                    ? objWidthFixRight[indexCol]
-                    : undefined,
+                right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined
             }, onClick: (e) => {
                 const tag = e.target?.nodeName;
                 if (tag !== 'DIV' && tag !== 'TD') {
@@ -69156,7 +69671,7 @@ const RenderContentCol = React__default["default"].memo((props) => {
 });
 
 const TableElement = React__default["default"].memo((props) => {
-    const { contentColumns, dataSource, fieldKey, filterBy, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, orderBy, selectedRows, setContentColumns, setSelectedRows, formatSetting, gridRef, idTable, headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, isMulti, querySetting, searchSetting, searchTerm, columnsAggregate, haveSum, expandsAll, zeroVisiable, setFilterBy, setOrderBy, setExpandsAll, handleDoubleClick, handleCellClick, contextMenuItems, handleContextMenuClick, isLoading, } = props;
+    const { contentColumns, dataSource, fieldKey, filterBy, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, orderBy, selectedRows, setContentColumns, setSelectedRows, formatSetting, gridRef, idTable, headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, isMulti, querySetting, searchSetting, searchTerm, columnsAggregate, haveSum, expandsAll, zeroVisiable, setFilterBy, setOrderBy, setExpandsAll, handleDoubleClick, handleCellClick, contextMenuItems, handleContextMenuClick, isLoading } = props;
     const { t } = reactI18next.useTranslation();
     const [context, setContext] = React$5.useState(null);
     const virtualDivRef = React$5.useRef(null);
@@ -69202,10 +69717,7 @@ const TableElement = React__default["default"].memo((props) => {
         if (searchTerm) {
             datas = datas.filter((row) => {
                 return searchSetting?.keyField?.some((key) => {
-                    return row[key]
-                        ?.toString()
-                        .toLowerCase()
-                        .includes(searchTerm.trim().toLowerCase());
+                    return row[key]?.toString().toLowerCase().includes(searchTerm.trim().toLowerCase());
                 });
             });
         }
@@ -69214,10 +69726,7 @@ const TableElement = React__default["default"].memo((props) => {
                 return filterBy.every((filter) => {
                     const { key, value, ope } = filter;
                     const rowValue = row[key];
-                    if (rowValue === undefined ||
-                        rowValue === null ||
-                        value === undefined ||
-                        value === null) {
+                    if (rowValue === undefined || rowValue === null || value === undefined || value === null) {
                         return false;
                     }
                     const valStr = String(rowValue).toLowerCase();
@@ -69283,68 +69792,52 @@ const TableElement = React__default["default"].memo((props) => {
                     }
                     let value = row[col.field];
                     if (col.type === 'numeric') {
-                        value =
-                            formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
+                        value = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
                     }
                     else if (col.type === 'date') {
-                        value = value
-                            ? formatDateTime(value, formatSetting?.dateFormat)
-                            : '';
+                        value = value ? formatDateTime(value, formatSetting?.dateFormat) : '';
                     }
                     else if (col.type === 'datetime') {
-                        value = value
-                            ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
-                            : '';
+                        value = value ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
                     }
                     if (col.template) {
                         value = col.template(row, indexRow) ?? '';
                     }
                     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: [jsxRuntime.jsx("td", { className: "r-rowcell r-cell-group", colSpan: 3, children: jsxRuntime.jsxs("div", { className: "r-rowcell-div", children: [jsxRuntime.jsx(SvgChevronRight, { style: {
                                                         marginLeft: level * 20,
-                                                        transform: expand ? 'rotate(90deg)' : 'rotate(0deg)',
+                                                        transform: expand ? 'rotate(90deg)' : 'rotate(0deg)'
                                                     }, fontSize: 15, onClick: () => {
                                                         setExpand(!expand);
                                                         setExpandsAll(undefined);
                                                         row.expand = !expand;
                                                     } }), t(col.headerDisplay ?? col.headerText ?? ''), ": ", value, " (", row.children.length, ")"] }) }), contentColumns.map((colSum, indexCol) => {
-                                        if (indexCol <= firstColSpan ||
-                                            colSum.visible === false ||
-                                            colSum.isGroup === true) {
+                                        if (indexCol <= firstColSpan || colSum.visible === false || colSum.isGroup === true) {
                                             return;
                                         }
                                         let sumValue = row[colSum.field];
-                                        const haveSum = row[colSum.field] !== undefined &&
-                                            row[colSum.field] !== null;
-                                        if (!haveSum &&
-                                            colSum.haveSum === true &&
-                                            colSum.type === 'numeric') {
+                                        const haveSum = row[colSum.field] !== undefined && row[colSum.field] !== null;
+                                        if (!haveSum && colSum.haveSum === true && colSum.type === 'numeric') {
                                             sumValue = row.children.reduce(function (accumulator, currentValue) {
-                                                return (Number(accumulator ?? 0) +
-                                                    Number(currentValue[colSum.field] ?? 0));
+                                                return Number(accumulator ?? 0) + Number(currentValue[colSum.field] ?? 0);
                                             }, 0);
                                         }
                                         if (colSum.type === 'numeric') {
                                             sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', colSum.numericSettings?.fraction, true, false);
-                                            if (!zeroVisiable &&
-                                                !col.zeroVisiable &&
-                                                (sumValue === '0' || sumValue === 0)) {
+                                            if (!zeroVisiable && !col.zeroVisiable && (sumValue === '0' || sumValue === 0)) {
                                                 sumValue = '';
                                             }
                                         }
                                         return (jsxRuntime.jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsxRuntime.jsx("div", { className: "r-rowcell-div", style: {
-                                                    justifyContent: colSum.textAlign
-                                                        ? colSum.textAlign
-                                                        : 'left',
-                                                }, children: (haveSum || colSum.haveSum === true) &&
-                                                    Number(row[colSum.field] ?? '0') < 0 ? (jsxRuntime.jsxs("div", { style: {
-                                                        color: formatSetting?.colorNegative ?? 'red',
+                                                    justifyContent: colSum.textAlign ? colSum.textAlign : 'left'
+                                                }, children: (haveSum || colSum.haveSum === true) && Number(row[colSum.field] ?? '0') < 0 ? (jsxRuntime.jsxs("div", { style: {
+                                                        color: formatSetting?.colorNegative ?? 'red'
                                                     }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `group-sum-cell-${level}-${indexRow}-${indexCol}`));
-                                    })] }), expand && (jsxRuntime.jsx(RenderContent, { datas: row.children, level: level + 1 }))] }, `row-${level}-${indexRow}`));
+                                    })] }), expand && jsxRuntime.jsx(RenderContent, { datas: row.children, level: level + 1 })] }, `row-${level}-${indexRow}`));
                 }
                 else {
                     const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
                     return (jsxRuntime.jsx("tr", { id: `row-content-${indexRow}`, "aria-rowindex": indexRow + 1, role: "row", className: classNames$1('r-row', {
-                            'r-last-row': level === 0 && indexRow === viewData.length - 1,
+                            'r-last-row': level === 0 && indexRow === viewData.length - 1
                         }), onContextMenu: (e) => {
                             e.preventDefault();
                             handleContextMenu(e, row);
@@ -69360,7 +69853,7 @@ const TableElement = React__default["default"].memo((props) => {
                 x: e.clientX,
                 y: e.clientY,
                 row,
-                show: true,
+                show: true
             });
         }, 100);
     };
@@ -69384,28 +69877,20 @@ const TableElement = React__default["default"].memo((props) => {
                                 let sumValue = item?.value;
                                 if (!item && col.haveSum === true && col.type === 'numeric') {
                                     sumValue = viewData.reduce(function (accumulator, currentValue) {
-                                        return (Number(accumulator ?? 0) +
-                                            Number(currentValue[col.field] ?? 0));
+                                        return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
                                     }, 0);
                                 }
                                 if (col.type === 'numeric') {
                                     sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false);
                                 }
                                 return (jsxRuntime.jsx("td", { className: classNames$1(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
-                                        left: col.fixedType === 'left'
-                                            ? objWidthFixLeft[indexCol]
-                                            : undefined,
-                                        right: col.fixedType === 'right'
-                                            ? objWidthFixRight[indexCol]
-                                            : undefined,
-                                        textAlign: col.textAlign ? col.textAlign : 'left',
-                                    }, children: jsxRuntime.jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) &&
-                                            Number(item?.value ?? '0') < 0 ? (jsxRuntime.jsxs("div", { style: {
-                                                color: formatSetting?.colorNegative ?? 'red',
+                                        left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
+                                        right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
+                                        textAlign: col.textAlign ? col.textAlign : 'left'
+                                    }, children: jsxRuntime.jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) && Number(item?.value ?? '0') < 0 ? (jsxRuntime.jsxs("div", { style: {
+                                                color: formatSetting?.colorNegative ?? 'red'
                                             }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `summarycell-${indexCol}`));
-                            }) })) })] }), jsxRuntime.jsx("div", { ref: virtualDivRef }), context &&
-                (contextMenuItems?.length ?? 0) > 0 &&
-                handleContextMenuClick && (jsxRuntime.jsx(Popover$1, { className: "r-context-popover", placement: "right-start", isOpen: context.show, target: virtualDivRef.current, toggle: handleCloseContext, fade: false, children: jsxRuntime.jsx(PopoverBody$1, { children: contextMenuItems?.map((item, index) => {
+                            }) })) })] }), jsxRuntime.jsx("div", { ref: virtualDivRef }), context && (contextMenuItems?.length ?? 0) > 0 && handleContextMenuClick && (jsxRuntime.jsx(Popover$1, { className: "r-context-popover", placement: "right-start", isOpen: context.show, target: virtualDivRef.current, toggle: handleCloseContext, fade: false, children: jsxRuntime.jsx(PopoverBody$1, { children: contextMenuItems?.map((item, index) => {
                         return (jsxRuntime.jsxs("div", { className: "r-context-item", onClick: () => {
                                 handleCloseContext();
                                 handleContextMenuClick?.(item, context.row);
@@ -69413,7 +69898,7 @@ const TableElement = React__default["default"].memo((props) => {
                     }) }) })), (viewData.length ?? 0) === 0 && !isLoading && (jsxRuntime.jsxs("div", { className: "r-no-data", children: [jsxRuntime.jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsxRuntime.jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxRuntime.jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsxRuntime.jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), jsxRuntime.jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }), t('No data available.')] }))] }));
 });
 
-const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoading, formatSetting, querySetting, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent, groupSetting, zeroVisiable, isMulti, handleDoubleClick, handleCellClick, contextMenuItems, headerHeight, handleContextMenuClick, }) => {
+const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoading, formatSetting, querySetting, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent, groupSetting, zeroVisiable, isMulti, handleDoubleClick, handleCellClick, contextMenuItems, headerHeight, handleContextMenuClick }) => {
     const { t } = reactI18next.useTranslation();
     const gridRef = React$5.useRef(null);
     const [openPopupSetupColumn, setOpenPopupSetupColumn] = React$5.useState(false);
@@ -69426,8 +69911,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
     const [expandsAll, setExpandsAll] = React$5.useState(true);
     const [maximize, setMaximize] = React$5.useState(false);
     const [windowHeight, setWindowHeight] = React$5.useState(window.innerHeight);
-    const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ??
-        'id';
+    const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? 'id';
     React$5.useEffect(() => {
         const handleResize = () => {
             setWindowHeight(window.innerHeight);
@@ -69437,19 +69921,14 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
     }, []);
     const heightTable = React$5.useMemo(() => {
         if (maximize) {
-            return (windowHeight -
-                (pagingSetting?.allowPaging ? 50 : 0) -
-                (haveSum ? 30 : 0) -
-                (headerHeight ?? 59) -
-                (toolbarSetting?.showBottomToolbar ? 42 : 0) -
-                (toolbarSetting?.showTopToolbar ? 42 : 0));
+            return windowHeight - (pagingSetting?.allowPaging ? 50 : 0) - (haveSum ? 30 : 0) - (headerHeight ?? 59) - (toolbarSetting?.showBottomToolbar ? 42 : 0) - (toolbarSetting?.showTopToolbar ? 42 : 0);
         }
         return height;
     }, [height, maximize, windowHeight]);
     const optionsGroupColumn = React$5.useMemo(() => {
         return contentColumns.map((col) => ({
             ...col,
-            headerText: t(col.headerText),
+            headerText: t(col.headerText)
         }));
     }, [contentColumns]);
     React$5.useEffect(() => {
@@ -69458,7 +69937,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
         }
         setExpandsAll(true);
     }, [groupSetting?.groupColumns]);
-    const { levels: headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, } = React$5.useMemo(() => {
+    const { levels: headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = React$5.useMemo(() => {
         const rs = calculateTableStructure(columns, settingColumns?.value, groupSetting?.groupColumns);
         setContentColumns(rs.flat);
         return rs;
@@ -69476,17 +69955,12 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
         }
     };
     const searchTemplate = () => {
-        return (jsxRuntime.jsx("div", { className: "me-50 r-search", children: jsxRuntime.jsx(ReactInput, { style: { width: '230px' }, value: searchSetting?.searchTerm !== undefined
-                    ? searchSetting?.searchTerm
-                    : searchTerm, setSearchTerm: searchSetting?.setSearchTerm
-                    ? searchSetting?.setSearchTerm
-                    : setSearchTerm, placeholder: t('Search'), onKeyPress: handleKeyPress }) }));
+        return (jsxRuntime.jsx("div", { className: "me-50 r-search", children: jsxRuntime.jsx(ReactInput, { style: { width: '230px' }, value: searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, setSearchTerm: searchSetting?.setSearchTerm ? searchSetting?.setSearchTerm : setSearchTerm, placeholder: t('Search'), onKeyPress: handleKeyPress }) }));
     };
     const groupbtnTemplate = () => {
         return (jsxRuntime.jsxs(UncontrolledDropdown, { children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", id: "group-dropdown-toggle", style: { position: 'relative' }, onClick: (e) => e.preventDefault(), children: jsxRuntime.jsx(GroupIcon, { color: "#7F7F7F", size: 24 }) }), jsxRuntime.jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-1", children: [jsxRuntime.jsx("div", { className: "mb-1", style: { fontSize: 16, fontWeight: 500 }, children: "Nh\u00F3m d\u1EEF li\u1EC7u theo c\u1ED9t" }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-1`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 1" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: optionsGroupColumn, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[0]
                                             ? {
-                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[0])?.headerText ??
-                                                    contentColumns.find((x) => x.field === groupColumns[0])?.headerText),
+                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[0])?.headerText ?? contentColumns.find((x) => x.field === groupColumns[0])?.headerText)
                                             }
                                             : undefined, onChange: (val) => {
                                             if (val) {
@@ -69498,8 +69972,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                             setGroupColumns([...groupColumns]);
                                         }, isClearable: groupColumns?.length === 1 }) })] }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-2`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 2" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: optionsGroupColumn, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[1]
                                             ? {
-                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[1])?.headerText ??
-                                                    contentColumns.find((x) => x.field === groupColumns[1])?.headerText),
+                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[1])?.headerText ?? contentColumns.find((x) => x.field === groupColumns[1])?.headerText)
                                             }
                                             : undefined, onChange: (val) => {
                                             if (val) {
@@ -69511,8 +69984,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                             setGroupColumns([...groupColumns]);
                                         }, isClearable: groupColumns?.length === 2 }) })] }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-3`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 3" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: optionsGroupColumn, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[2]
                                             ? {
-                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[2])?.headerText ??
-                                                    contentColumns.find((x) => x.field === groupColumns[2])?.headerText),
+                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[2])?.headerText ?? contentColumns.find((x) => x.field === groupColumns[2])?.headerText)
                                             }
                                             : undefined, onChange: (val) => {
                                             if (groupSetting) {
@@ -69526,7 +69998,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                             }
                                         }, isClearable: groupColumns?.length === 3 }) })] }), jsxRuntime.jsxs("div", { className: "border-top d-flex justify-content-end mt-1", children: [jsxRuntime.jsx(Button$1$1, { color: "primary", className: "mt-1 me-50 rounded", size: "sm", onClick: () => {
                                         groupSetting?.onGroup({
-                                            columnGrouped: groupColumns.filter((x) => x),
+                                            columnGrouped: groupColumns.filter((x) => x)
                                         });
                                         document.getElementById('group-dropdown-toggle')?.click();
                                     }, children: `${t('Apply')}` }), jsxRuntime.jsx(Button$1$1, { color: "secondary", outline: true, className: "mt-1 rounded", size: "sm", onClick: () => {
@@ -69535,16 +70007,14 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                     }, children: `${t('Delete')}` })] })] })] }));
     };
     const chooseColumnsTemplate = () => {
-        return (jsxRuntime.jsx(SvgSettings, { className: "r-toolbar-icon", fontSize: 20, color: "#7F7F7F", onClick: () => setOpenPopupSetupColumn(true) }));
+        return jsxRuntime.jsx(SvgSettings, { className: "r-toolbar-icon", fontSize: 20, color: "#7F7F7F", onClick: () => setOpenPopupSetupColumn(true) });
     };
     const expandTemplate = () => {
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!expandsAll && (jsxRuntime.jsx(ExpandAllIcon, { onClick: () => {
                         setExpandsAll(true);
-                    }, color: "#7F7F7F", size: 24 })), expandsAll && (jsxRuntime.jsx(UnExpandAllIcon, { onClick: () => setExpandsAll(false), color: "#7F7F7F", size: 24 }))] }));
+                    }, color: "#7F7F7F", size: 24 })), expandsAll && jsxRuntime.jsx(UnExpandAllIcon, { onClick: () => setExpandsAll(false), color: "#7F7F7F", size: 24 })] }));
     };
-    const defaultToolbarOption = searchSetting?.searchEnable
-        ? [{ template: searchTemplate, align: 'left' }]
-        : [];
+    const defaultToolbarOption = searchSetting?.searchEnable ? [{ template: searchTemplate, align: 'left' }] : [];
     if (groupSetting) {
         defaultToolbarOption.push({ template: groupbtnTemplate, align: 'left' });
     }
@@ -69553,10 +70023,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
     }
     let toolbarTopOption = [];
     if (toolbarSetting?.toolbarOptions) {
-        toolbarTopOption = [
-            ...defaultToolbarOption,
-            ...toolbarSetting?.toolbarOptions,
-        ];
+        toolbarTopOption = [...defaultToolbarOption, ...toolbarSetting?.toolbarOptions];
     }
     else {
         toolbarTopOption = [...defaultToolbarOption];
@@ -69587,9 +70054,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
     React$5.useEffect(() => {
         if (setSelectedItem) {
             if (isMulti) {
-                if (dataSource &&
-                    selectedRows &&
-                    selectedRows?.length !== selectedItem?.length) {
+                if (dataSource && selectedRows && selectedRows?.length !== selectedItem?.length) {
                     setSelectedItem([...selectedRows]);
                     if (handleSelect) {
                         handleSelect([...selectedRows]);
@@ -69598,8 +70063,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
             }
             else {
                 if (dataSource && selectedRows?.length > 0) {
-                    if (!selectedItem ||
-                        selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
+                    if (!selectedItem || selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
                         setSelectedItem({ ...selectedRows[0] });
                         if (handleSelect) {
                             handleSelect({ ...selectedRows[0] });
@@ -69618,8 +70082,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
     React$5.useEffect(() => {
         if (!isMulti) {
             if (dataSource && selectedItem && selectedItem[fieldKey]) {
-                if (selectedRows?.length === 0 ||
-                    selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
+                if (selectedRows?.length === 0 || selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
                     setSelectedRows([selectedItem]);
                 }
             }
@@ -69628,18 +70091,16 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
             }
         }
         else {
-            if (dataSource &&
-                selectedItem &&
-                selectedRows?.length !== selectedItem.length) {
+            if (dataSource && selectedItem && selectedRows?.length !== selectedItem.length) {
                 setSelectedRows(selectedItem ? [...selectedItem] : []);
             }
         }
     }, [selectedItem]);
     return (jsxRuntime.jsxs("div", { className: classNames$1('r-table-edit r-virtualized-table', {
-            'is-maximized': maximize,
-        }), children: [jsxRuntime.jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && (jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption, maximize: maximize, setMaximize: setMaximize })), headerComponent && headerComponent(), jsxRuntime.jsxs("div", { ref: gridRef, className: "r-gridtable", style: {
+            'is-maximized': maximize
+        }), children: [jsxRuntime.jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption, maximize: maximize, setMaximize: setMaximize }), headerComponent && headerComponent(), jsxRuntime.jsxs("div", { ref: gridRef, className: "r-gridtable", style: {
                             height: `${heightTable ? `${heightTable}px` : 'auto'}`,
-                            position: 'relative',
+                            position: 'relative'
                         }, children: [jsxRuntime.jsx(TableElement, { idTable: idTable, gridRef: gridRef, isLoading: isLoading, dataSource: dataSource, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, fieldKey: fieldKey, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, selectedRows: selectedRows, isMulti: isMulti, filterBy: filterBy, orderBy: orderBy, formatSetting: formatSetting, contentColumns: contentColumns, headerColumns: headerColumns, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, searchTerm: searchTerm, searchSetting: searchSetting, columnsAggregate: columnsAggregate, haveSum: haveSum, expandsAll: expandsAll, zeroVisiable: zeroVisiable, contextMenuItems: contextMenuItems, handleContextMenuClick: handleContextMenuClick, setFilterBy: setFilterBy, setSelectedRows: setSelectedRows, setOrderBy: setOrderBy, handleDoubleClick: handleDoubleClick, handleCellClick: handleCellClick, querySetting: querySetting, setContentColumns: setContentColumns, setExpandsAll: setExpandsAll }), isLoading && (jsxRuntime.jsx("div", { className: "r-loading-overlay", children: jsxRuntime.jsxs("div", { className: "r-loading", children: [jsxRuntime.jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) }))] })] }), pagingSetting?.allowPaging && (jsxRuntime.jsx(PagingComponent, { gridRef: gridRef, onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingSetting?.totalItem ?? 0, onChangePageSize: onChangePageSize })), jsxRuntime.jsx(SettingColumn, { gridRef: gridRef, handleSidebar: () => {
                     setOpenPopupSetupColumn(!openPopupSetupColumn);
                 }, settingColumns: settingColumns, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
@@ -69650,7 +70111,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                             visible: x.visible,
                             fixedType: x.fixedType,
                             width: x.width,
-                            sortOrder: index + 1,
+                            sortOrder: index + 1
                         })));
                     }
                 } })] }));