react-table-edit 1.5.43 → 1.5.44

package/dist/index.mjs

@@ -9056,6 +9056,20 @@ var SvgProcess = function (_a) {
         React$5.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$5.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$5.createElement("title", { id: titleId }, title) : null,
+        React$5.createElement("g", { clipPath: "url(#project-setting_svg__a)", fill: props.color || "currentColor" },
+            React$5.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$5.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$5.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$5.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$5.createElement("defs", null,
+            React$5.createElement("clipPath", { id: "project-setting_svg__a" },
+                React$5.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$5.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),
@@ -9224,6 +9238,13 @@ var SvgSettings = function (_a) {
         React$5.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$5.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$5.createElement("title", { id: titleId }, title) : null,
+        React$5.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$5.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),
@@ -10451,6 +10472,7 @@ var Icon = /*#__PURE__*/Object.freeze({
   Power: SvgPower,
   Printer: SvgPrinter,
   Process: SvgProcess,
+  ProjectSetting: SvgProjectSetting,
   QuoteRight: SvgQuoteRight,
   Radio: SvgRadio,
   RefreshCcw: SvgRefreshCcw,
@@ -10470,6 +10492,7 @@ var Icon = /*#__PURE__*/Object.freeze({
   SendHorFill: SvgSendHorFill,
   Server: SvgServer,
   Settings: SvgSettings,
+  ShapeGroup: SvgShapeGroup,
   Share: SvgShare,
   Share2: SvgShare2,
   Share3: SvgShare3,
@@ -19784,17 +19807,20 @@ const isNullOrUndefined$1 = (d) => {
 const generateUUID = () => {
     // Public Domain/MIT
     let d = new Date().getTime(); //Timestamp
-    let d2 = (typeof performance !== 'undefined' && performance.now && performance.now() * 1000) || 0; //Time in microseconds since page-load or 0 if unsupported
+    let d2 = (typeof performance !== 'undefined' &&
+        performance.now &&
+        performance.now() * 1000) ||
+        0; //Time in microseconds since page-load or 0 if unsupported
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
         let r = Math.random() * 16; //random number between 0 and 16
         if (d > 0) {
             //Use timestamp until depleted
-            r = (d + r) % 16 | 0;
+            r = ((d + r) % 16) | 0;
             d = Math.floor(d / 16);
         }
         else {
             //Use microseconds since page-load if supported
-            r = (d2 + r) % 16 | 0;
+            r = ((d2 + r) % 16) | 0;
             d2 = Math.floor(d2 / 16);
         }
         return (c === 'x' ? r : 0x3).toString(16);
@@ -19816,12 +19842,16 @@ const formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 2,
     // eslint-disable-next-line
     if (str || str == '0') {
         str = str.toString();
-        const value = decimalSeparator !== '.' ? str.toString().replaceAll('.', decimalSeparator ?? '') : str;
+        const value = decimalSeparator !== '.'
+            ? str.toString().replaceAll('.', decimalSeparator ?? '')
+            : str;
         const arr = value.toString().split(decimalSeparator ?? '', 2);
         let flag = value.toString().includes(decimalSeparator ?? '');
         if (arr[0].length < 3) {
             const intergerArr = haveNegative ? arr[0] : arr[0].replace('-', '');
-            return flag ? `${intergerArr}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ''}` : intergerArr;
+            return flag
+                ? `${intergerArr}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ''}`
+                : intergerArr;
         }
         else {
             let flagNegative = false;
@@ -19845,7 +19875,9 @@ const formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 2,
             if (flagNegative && haveNegative) {
                 arr[0] = '-'.concat(arr[0]);
             }
-            return flag ? `${arr[0]}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ''}` : arr[0];
+            return flag
+                ? `${arr[0]}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ''}`
+                : arr[0];
         }
     }
     else {
@@ -19868,7 +19900,7 @@ const formatDateTime = (data, format = 'dd/MM/yyyy') => {
         MM: String(date.getMonth() + 1).padStart(2, '0'),
         yyyy: date.getFullYear(),
         HH: String(date.getHours()).padStart(2, '0'),
-        mm: String(date.getMinutes()).padStart(2, '0')
+        mm: String(date.getMinutes()).padStart(2, '0'),
     };
     return format.replace(/dd|DD|MM|yyyy|HH|mm/g, (match) => map[match]);
 };
@@ -19889,7 +19921,7 @@ const FindNodeByPath = (tree, path) => {
         parent: current,
         lastIndex: levels.at(-1),
         firstIndex: levels.length === 1 ? levels[0] : -1,
-        node
+        node,
     };
 };
 /**
@@ -19917,7 +19949,7 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
     const objHeaderWidthFixLeft = {};
     let maxDepth = 0;
     // Tính depth tối đa
-    const calculateDepth = (cols, depth = 1) => Math.max(...cols.map((col) => (col.columns?.length ? calculateDepth(col.columns, depth + 1) : depth)));
+    const calculateDepth = (cols, depth = 1) => Math.max(...cols.map((col) => col.columns?.length ? calculateDepth(col.columns, depth + 1) : depth));
     maxDepth = calculateDepth(columns);
     let leftTotal = 0;
     let rightTotal = 0;
@@ -19936,45 +19968,47 @@ 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) => {
@@ -19990,11 +20024,13 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
                 ...col,
                 columns: col.columns ?? [],
                 colspan,
-                rowspan: hasChildren ? 1 : maxDepth - level
+                rowspan: hasChildren ? 1 : maxDepth - level,
             };
             levels[level].push(cell);
             const headerKey = `${level}-${indexCol}`;
-            if (cell.fixedType === 'left' && cell.visible !== false && cell.isGroup !== true) {
+            if (cell.fixedType === 'left' &&
+                cell.visible !== false &&
+                cell.isGroup !== true) {
                 objHeaderWidthFixLeft[headerKey] = leftTotal;
             }
             if (!hasChildren) {
@@ -20002,16 +20038,22 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
                 const width = cell.width ?? 40;
                 cell.index = index;
                 flat.push(cell);
-                if (cell.fixedType === 'left' && cell.visible !== false && cell.isGroup !== true) {
+                if (cell.fixedType === 'left' &&
+                    cell.visible !== false &&
+                    cell.isGroup !== true) {
                     objWidthFixLeft[index] = leftTotal;
                     leftTotal += width;
                 }
-                if (cell.fixedType === 'right' && cell.visible !== false && cell.isGroup !== true) {
+                if (cell.fixedType === 'right' &&
+                    cell.visible !== false &&
+                    cell.isGroup !== true) {
                     rightTotal -= width;
                     objWidthFixRight[index] = rightTotal;
                 }
             }
-            if (cell.fixedType === 'right' && cell.visible !== false && cell.isGroup !== true) {
+            if (cell.fixedType === 'right' &&
+                cell.visible !== false &&
+                cell.isGroup !== true) {
                 objHeaderWidthFixRight[headerKey] = rightTotal;
             }
             return colspanSum + colspan;
@@ -20024,13 +20066,20 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
     traverse(columns);
     // 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');
+    const flatVisbleContent = flat.filter((x) => x.visible !== false &&
+        x.field !== 'command' &&
+        x.field !== '#' &&
+        x.field !== 'checkbox');
     // Tính toán vị trí đầu tiên và cuối cùng của các cột cố định
     const lastObjWidthFixLeft = Math.max(...Object.keys(objWidthFixLeft).map(Number), 0);
     const fisrtObjWidthFixRight = Math.min(...Object.keys(objWidthFixRight).map(Number), flat.length);
     // Tính toán vị trí đầu tiên và cuối cùng của các cột có thể sửa
     const indexFirstEdit = flat.findIndex((item) => item.editEnable && item.visible !== false && !item.disabledCondition);
-    const indexLastEdit = flat.map((item, idx) => (item.editEnable && item.visible !== false && !item.disabledCondition ? idx : -1)).reduce((acc, val) => (val > acc ? val : acc), -1);
+    const indexLastEdit = flat
+        .map((item, idx) => item.editEnable && item.visible !== false && !item.disabledCondition
+        ? idx
+        : -1)
+        .reduce((acc, val) => (val > acc ? val : acc), -1);
     return {
         levels,
         flat,
@@ -20043,7 +20092,7 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
         objHeaderWidthFixRight,
         objHeaderWidthFixLeft,
         indexFirstEdit,
-        indexLastEdit
+        indexLastEdit,
     };
 };
 /**
@@ -20053,7 +20102,10 @@ const CheckRowMatch = (row, filters, keyword, searchKeys) => {
     const isFilterMatch = filters.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();
@@ -20086,7 +20138,10 @@ const CheckRowMatch = (row, filters, keyword, searchKeys) => {
     const isSearchMatch = !keyword ||
         searchKeys.some((key) => {
             const val = row[key];
-            return val?.toString().toLowerCase().includes(keyword.trim().toLowerCase());
+            return val
+                ?.toString()
+                .toLowerCase()
+                .includes(keyword.trim().toLowerCase());
         });
     return isFilterMatch && isSearchMatch;
 };
@@ -25640,6 +25695,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.
  */
@@ -26348,7 +26469,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,
@@ -27865,7 +27986,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 ??
@@ -30558,7 +30679,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 ??
@@ -31364,6 +31485,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.
@@ -31502,6 +31686,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.
          *
@@ -31840,7 +32049,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.
  *
@@ -31861,6 +32126,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
@@ -32036,7 +32304,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. */
@@ -32051,8 +32319,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) {
@@ -32502,7 +32770,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);
@@ -32553,7 +32821,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);
@@ -32577,7 +32845,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)
@@ -32736,7 +33004,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
@@ -32746,7 +33014,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
@@ -32886,127 +33155,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.
  *
@@ -33040,7 +33188,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.
@@ -33049,7 +33197,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
@@ -33101,6 +33250,7 @@ function labelNav() {
     return "";
 }
 
+const defaultLabel = "Go to the Next Month";
 /**
  * Generates the ARIA label for the "next month" button.
  *
@@ -33111,8 +33261,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;
 }
 
 /**
@@ -33201,6 +33351,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;
@@ -33393,19 +33853,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
@@ -33736,17 +34204,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 } = 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) => {
@@ -33965,6 +34461,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);
     };
@@ -34247,15 +34749,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
@@ -34343,6 +34863,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.
  *
@@ -34353,58 +34945,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 } = 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 },
         };
@@ -34418,11 +35035,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);
@@ -34431,7 +35052,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 = useMemo(() => getWeekdays(dateLib, props.ISOWeek), [dateLib, props.ISOWeek]);
+    const weekdays = useMemo(() => getWeekdays(dateLib, props.ISOWeek, props.broadcastCalendar, props.today), [dateLib, props.ISOWeek, props.broadcastCalendar, props.today]);
     const isInteractive = mode !== undefined || onDayClick !== undefined;
     const handlePreviousClick = useCallback(() => {
         if (!previousMonth)
@@ -34449,6 +35070,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]);
@@ -34532,7 +35156,7 @@ function DayPicker(initialProps) {
         formatters,
     };
     return (React__default.createElement(dayPickerContext.Provider, { value: contextValue },
-        React__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.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.createElement(components.Months, { className: classNames[UI.Months], style: styles?.[UI.Months] },
                 !props.hideNavigation && !navLayout && (React__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) => {
@@ -34544,10 +35168,16 @@ function DayPicker(initialProps) {
                             displayIndex === 0 && (React__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.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" }))),
                         React__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.createElement(components.DropdownNav, { className: classNames[UI.Dropdowns], style: styles?.[UI.Dropdowns] },
-                            captionLayout === "dropdown" ||
-                                captionLayout === "dropdown-months" ? (React__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.createElement("span", null, formatMonthDropdown(calendarMonth.date, dateLib))),
-                            captionLayout === "dropdown" ||
-                                captionLayout === "dropdown-years" ? (React__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.createElement("span", null, formatYearDropdown(calendarMonth.date, dateLib))),
+                            (() => {
+                                const monthControl = captionLayout === "dropdown" ||
+                                    captionLayout === "dropdown-months" ? (React__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.createElement("span", { key: "month" }, formatMonthDropdown(calendarMonth.date, dateLib)));
+                                const yearControl = captionLayout === "dropdown" ||
+                                    captionLayout === "dropdown-years" ? (React__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.createElement("span", { key: "year" }, formatYearDropdown(calendarMonth.date, dateLib)));
+                                const controls = dateLib.getMonthYearOrder() === "year-first"
+                                    ? [yearControl, monthControl]
+                                    : [monthControl, yearControl];
+                                return controls;
+                            })(),
                             React__default.createElement("span", { role: "status", "aria-live": "polite", style: {
                                     border: 0,
                                     clip: "rect(0 0 0 0)",
@@ -34559,9 +35189,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.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.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.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 },
@@ -34576,9 +35204,7 @@ function DayPicker(initialProps) {
                                 weekdays.map((weekday) => (React__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.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.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.createElement(components.WeekNumber, { week: week, style: styles?.[UI.WeekNumber], "aria-label": labelWeekNumber(week.weekNumber, {
+                                    showWeekNumber && (React__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) => {
@@ -34602,18 +35228,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.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.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.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.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.createElement(components.Footer, { className: classNames[UI.Footer], style: styles?.[UI.Footer], role: "status", "aria-live": "polite" }, props.footer)))));
+            props.footer && (React__default.createElement(components.Footer, { className: classNames[UI.Footer], style: styles?.[UI.Footer], role: "status", "aria-live": "polite" }, props.footer)))));
 }
 
 function styleInject(css, ref) {
@@ -34643,7 +35267,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: {}};
@@ -39325,11 +39949,11 @@ const TableComponent = ({ idTable, dataSource, contentColumns, headerColumns, se
     }, []);
     return (jsx("div", { ref: containerRef, className: "r-gridtable", style: { maxHeight: `${height ? `${height}px` : 'auto'}` }, children: jsxs("table", { style: { width: '100%' }, role: "presentation", children: [jsx(RenderColGroup, { contentColumns: contentColumns }), jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((element, indexParent) => {
                         return (jsx("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
-                                return (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 (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}`));
                     }) }), jsxs("tbody", { className: "r-gridcontent", role: "rowgroup", children: [jsx("tr", { style: { height: offsetY } }), filteredData.slice(startIndex, endIndex).map((row) => {
                             const indexRow = row.indexRow;
@@ -40042,17 +40666,35 @@ const SettingColumn = React__default.memo((props) => {
                             }) }) })] }), 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: [jsx("div", { children: settingColumns?.updatedDate && (jsxs("p", { children: [jsxs("strong", { children: [t('Update date'), ": "] }), " ", jsx("span", { children: settingColumns.updatedDate ? formatDateTime(settingColumns.updatedDate, 'DD/MM/yyyy HH:mm') : '' }), jsxs("strong", { className: "ms-2", children: [t('Editor'), ": "] }), " ", jsx("span", { children: settingColumns.updatedByName })] })) }), jsxs("div", { children: [resetDefaultColumns && (jsx(Button$1$1, { color: "primary", onClick: () => messageBoxConfirm(t, handleResetColumns, {}, 'Do you want to reset the default settings?'), className: "me-1", children: t('Reset') })), jsx(Button$1$1, { color: "primary", onClick: handleSubmit, className: "me-1", children: t('Confirm') }), 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 } = useTranslation();
-    return (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: jsxs("div", { className: "r-toolbar-items", children: [jsxs("div", { className: "r-toolbar-left", children: [jsxs("div", { className: classNames$1('r-toolbar-item d-flex', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: [jsx(Button$1$1, { color: "success", outline: true, onClick: () => handleAdd(1), className: "d-flex", children: t('Add item') }), !!buttonSetting?.disableAddMulti && (jsxs(UncontrolledDropdown, { className: "nav-item", children: [jsx(DropdownToggle$1, { tag: "div", className: "me-0 d-flex", children: jsx(Button$1$1, { type: "button", color: "success", outline: true, style: { marginLeft: -1 }, className: "px-25", children: jsx("svg", { fill: "#28c76f", height: "15", width: "20", viewBox: "0 0 20 20", children: 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" }) }) }) }), jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-0", children: [jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(10), children: "10 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(20), children: "20 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(30), children: "30 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(40), children: "40 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(50), children: "50 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(100), children: "100 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(1000), children: "1000 h\u00E0ng" })] })] }))] }), (focusRow ?? -1) > -1 ? (jsxs(Fragment$1, { children: [jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: jsx(Button$1$1, { color: "success", outline: true, onClick: () => {
+    return (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: jsxs("div", { className: "r-toolbar-items", children: [jsxs("div", { className: "r-toolbar-left", children: [jsxs("div", { className: classNames$1('r-toolbar-item d-flex', {
+                                'd-none': editDisable || addDisable,
+                            }), "aria-disabled": "false", children: [jsx(Button$1$1, { color: "success", outline: true, onClick: () => handleAdd(1), className: "d-flex", children: t('Add item') }), buttonSetting?.disableAddMulti === true && (jsxs(UncontrolledDropdown, { className: "nav-item", children: [jsx(DropdownToggle$1, { tag: "div", className: "me-0 d-flex", children: jsx(Button$1$1, { type: "button", color: "success", outline: true, style: { marginLeft: -1 }, className: "px-25", children: jsx("svg", { fill: "#28c76f", height: "15", width: "20", viewBox: "0 0 20 20", children: 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" }) }) }) }), jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-0", children: [jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(10), children: "10 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(20), children: "20 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(30), children: "30 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(40), children: "40 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(50), children: "50 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(100), children: "100 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(1000), children: "1000 h\u00E0ng" })] })] }))] }), (focusRow ?? -1) > -1 ? (jsxs(Fragment$1, { children: [jsx("div", { className: classNames$1('r-toolbar-item', {
+                                        'd-none': editDisable ||
+                                            addDisable ||
+                                            buttonSetting?.duplicateDisable,
+                                    }), "aria-disabled": "false", children: jsx(Button$1$1, { color: "success", outline: true, onClick: () => {
                                             handleDuplicate();
-                                        }, className: "d-flex", children: t('Duplicate') }) }), jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: jsx(Button$1$1, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t('Insert item before') }) }), jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: jsx(Button$1$1, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t('Insert item after') }) })] })) : (jsx(Fragment$1, { children: " " })), jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: 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') }) }), jsx("div", { className: classNames$1('r-toolbar-item', {
+                                        'd-none': editDisable ||
+                                            addDisable ||
+                                            buttonSetting?.insertBeforeDisable,
+                                    }), "aria-disabled": "false", children: jsx(Button$1$1, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t('Insert item before') }) }), jsx("div", { className: classNames$1('r-toolbar-item', {
+                                        'd-none': editDisable ||
+                                            addDisable ||
+                                            buttonSetting?.insertAfterDisable,
+                                    }), "aria-disabled": "false", children: jsx(Button$1$1, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t('Insert item after') }) })] })) : (jsx(Fragment$1, { children: " " })), jsx("div", { className: classNames$1('r-toolbar-item', {
+                                'd-none': editDisable || buttonSetting?.deleteAllDisable,
+                            }), "aria-disabled": "false", children: 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' && (jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`)));
                         })] }), jsx("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
                         return (item.align === 'center' && (jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`)));
                     }) }), jsxs("div", { className: "r-toolbar-right", children: [toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
                             return (item.align === 'right' && (jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`)));
-                        }), !toolbarSetting?.hiddenSetting && (jsxs(Fragment$1, { children: [jsx("div", { className: classNames$1('r-toolbar-item me-25'), "aria-disabled": "false", children: jsx(SvgSettings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }), jsx("div", { className: classNames$1('r-toolbar-item me-25', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: jsxs(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [jsx(DropdownToggle$1, { tag: "div", color: "primary", onClick: (e) => e.preventDefault(), children: jsx(SvgInfo, { className: "cursor-pointer text-primary" }) }), jsx(DropdownMenu$1, { className: "formula-dropdown icon-dropdown", children: jsxs("ul", { className: "mb-0 pe-50", children: [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" }), jsx("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \u00F4 v\u00E0 Ctrl + V \u0111\u1EC3 d\u00E1n th\u00F4ng tin t\u1EEB excel" }), 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" }), 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" }), 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" }), 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 && (jsxs(Fragment$1, { children: [jsx("div", { className: classNames$1('r-toolbar-item me-25'), "aria-disabled": "false", children: jsx(SvgSettings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }), jsx("div", { className: classNames$1('r-toolbar-item me-25', {
+                                        'd-none': editDisable || addDisable,
+                                    }), "aria-disabled": "false", children: jsxs(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [jsx(DropdownToggle$1, { tag: "div", color: "primary", onClick: (e) => e.preventDefault(), children: jsx(SvgInfo, { className: "cursor-pointer text-primary" }) }), jsx(DropdownMenu$1, { className: "formula-dropdown icon-dropdown", children: jsxs("ul", { className: "mb-0 pe-50", children: [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" }), jsx("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \u00F4 v\u00E0 Ctrl + V \u0111\u1EC3 d\u00E1n th\u00F4ng tin t\u1EEB excel" }), 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" }), 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" }), 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" }), 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 }) => {