@mantine/core 9.6.3 → 9.7.0

package/esm/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.mjs

@@ -3,10 +3,11 @@ import { keys } from "../../../../core/utils/keys/keys.mjs";
 import { rem } from "../../../../core/utils/units-converters/rem.mjs";
 import { getBreakpointValue } from "../../../../core/utils/get-breakpoint-value/get-breakpoint-value.mjs";
 import { getBaseSize } from "../get-base-size/get-base-size.mjs";
+import { getResizedValue } from "../get-resized-value/get-resized-value.mjs";
 import { isPrimitiveSize } from "../is-primitive-size/is-primitive-size.mjs";
 import { isResponsiveSize } from "../is-responsive-size/is-responsive-size.mjs";
 //#region packages/@mantine/core/src/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.ts
-function assignNavbarVariables({ baseStyles, minMediaStyles, maxMediaStyles, navbar, theme, mode }) {
+function assignNavbarVariables({ baseStyles, minMediaStyles, maxMediaStyles, navbar, theme, mode, resizedSize, resizable }) {
 	const navbarWidth = navbar?.width;
 	const collapsedNavbarTransform = "translateX(calc(var(--app-shell-navbar-width) * -1))";
 	const collapsedNavbarTransformRtl = "translateX(var(--app-shell-navbar-width))";
@@ -15,27 +16,35 @@ function assignNavbarVariables({ baseStyles, minMediaStyles, maxMediaStyles, nav
 		maxMediaStyles[navbar?.breakpoint]["--app-shell-navbar-offset"] = "0px";
 		maxMediaStyles[navbar?.breakpoint]["--app-shell-navbar-width"] = "100%";
 		if (mode === "static") maxMediaStyles[navbar?.breakpoint]["--app-shell-navbar-grid-width"] = "0px";
+		if (resizable) maxMediaStyles[navbar.breakpoint]["--app-shell-navbar-resize-handle-display"] = "none";
 	}
-	if (isPrimitiveSize(navbarWidth)) {
-		const baseSize = rem(getBaseSize(navbarWidth));
-		baseStyles["--app-shell-navbar-width"] = baseSize;
-		baseStyles["--app-shell-navbar-offset"] = baseSize;
-		if (mode === "static") baseStyles["--app-shell-navbar-grid-width"] = baseSize;
-	}
-	if (isResponsiveSize(navbarWidth)) {
-		if (typeof navbarWidth.base !== "undefined") {
-			baseStyles["--app-shell-navbar-width"] = rem(navbarWidth.base);
-			baseStyles["--app-shell-navbar-offset"] = rem(navbarWidth.base);
-			if (mode === "static") baseStyles["--app-shell-navbar-grid-width"] = rem(navbarWidth.base);
+	if (resizedSize !== void 0) {
+		const resizedValue = getResizedValue(resizedSize, "horizontal");
+		baseStyles["--app-shell-navbar-width"] = resizedValue;
+		baseStyles["--app-shell-navbar-offset"] = resizedValue;
+		if (mode === "static") baseStyles["--app-shell-navbar-grid-width"] = resizedValue;
+	} else {
+		if (isPrimitiveSize(navbarWidth)) {
+			const baseSize = rem(getBaseSize(navbarWidth));
+			baseStyles["--app-shell-navbar-width"] = baseSize;
+			baseStyles["--app-shell-navbar-offset"] = baseSize;
+			if (mode === "static") baseStyles["--app-shell-navbar-grid-width"] = baseSize;
 		}
-		keys(navbarWidth).forEach((key) => {
-			if (key !== "base") {
-				minMediaStyles[key] = minMediaStyles[key] || {};
-				minMediaStyles[key]["--app-shell-navbar-width"] = rem(navbarWidth[key]);
-				minMediaStyles[key]["--app-shell-navbar-offset"] = rem(navbarWidth[key]);
-				if (mode === "static") minMediaStyles[key]["--app-shell-navbar-grid-width"] = rem(navbarWidth[key]);
+		if (isResponsiveSize(navbarWidth)) {
+			if (typeof navbarWidth.base !== "undefined") {
+				baseStyles["--app-shell-navbar-width"] = rem(navbarWidth.base);
+				baseStyles["--app-shell-navbar-offset"] = rem(navbarWidth.base);
+				if (mode === "static") baseStyles["--app-shell-navbar-grid-width"] = rem(navbarWidth.base);
 			}
-		});
+			keys(navbarWidth).forEach((key) => {
+				if (key !== "base") {
+					minMediaStyles[key] = minMediaStyles[key] || {};
+					minMediaStyles[key]["--app-shell-navbar-width"] = rem(navbarWidth[key]);
+					minMediaStyles[key]["--app-shell-navbar-offset"] = rem(navbarWidth[key]);
+					if (mode === "static") minMediaStyles[key]["--app-shell-navbar-grid-width"] = rem(navbarWidth[key]);
+				}
+			});
+		}
 	}
 	if (navbar?.breakpoint !== void 0 && mode === "static") {
 		minMediaStyles[navbar.breakpoint] = minMediaStyles[navbar.breakpoint] || {};
@@ -55,6 +64,7 @@ function assignNavbarVariables({ baseStyles, minMediaStyles, maxMediaStyles, nav
 			minMediaStyles[breakpointValue]["--app-shell-navbar-display"] = "none";
 			minMediaStyles[breakpointValue]["--app-shell-main-column-start"] = "1";
 		}
+		if (resizable) minMediaStyles[breakpointValue]["--app-shell-navbar-resize-handle-display"] = "none";
 	}
 	if (navbar?.collapsed?.mobile) {
 		const breakpointValue = getBreakpointValue(navbar.breakpoint, theme.breakpoints) - .1;
@@ -64,6 +74,7 @@ function assignNavbarVariables({ baseStyles, minMediaStyles, maxMediaStyles, nav
 		if (mode === "static") maxMediaStyles[breakpointValue]["--app-shell-navbar-grid-width"] = "0px";
 		maxMediaStyles[breakpointValue]["--app-shell-navbar-transform"] = collapsedNavbarTransform;
 		maxMediaStyles[breakpointValue]["--app-shell-navbar-transform-rtl"] = collapsedNavbarTransformRtl;
+		if (resizable) maxMediaStyles[breakpointValue]["--app-shell-navbar-resize-handle-display"] = "none";
 	}
 }
 //#endregion

package/esm/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"assign-navbar-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.ts"],"sourcesContent":["import { getBreakpointValue, keys, MantineTheme, rem } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignNavbarVariablesInput {\n  baseStyles: CSSVariables;\n  minMediaStyles: MediaQueryVariables;\n  maxMediaStyles: MediaQueryVariables;\n  navbar: AppShellProps['navbar'] | undefined;\n  theme: MantineTheme;\n  mode: 'fixed' | 'static';\n}\n\nexport function assignNavbarVariables({\n  baseStyles,\n  minMediaStyles,\n  maxMediaStyles,\n  navbar,\n  theme,\n  mode,\n}: AssignNavbarVariablesInput) {\n  const navbarWidth = navbar?.width;\n  const collapsedNavbarTransform = 'translateX(calc(var(--app-shell-navbar-width) * -1))';\n  const collapsedNavbarTransformRtl = 'translateX(var(--app-shell-navbar-width))';\n\n  if (navbar?.breakpoint !== undefined && !navbar?.collapsed?.mobile) {\n    maxMediaStyles[navbar?.breakpoint] = maxMediaStyles[navbar?.breakpoint] || {};\n    maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-offset'] = '0px';\n    maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-width'] = '100%';\n    if (mode === 'static') {\n      maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-grid-width'] = '0px';\n    }\n  }\n\n  if (isPrimitiveSize(navbarWidth)) {\n    const baseSize = rem(getBaseSize(navbarWidth));\n    baseStyles['--app-shell-navbar-width'] = baseSize;\n    baseStyles['--app-shell-navbar-offset'] = baseSize;\n    if (mode === 'static') {\n      baseStyles['--app-shell-navbar-grid-width'] = baseSize;\n    }\n  }\n\n  if (isResponsiveSize(navbarWidth)) {\n    if (typeof navbarWidth.base !== 'undefined') {\n      baseStyles['--app-shell-navbar-width'] = rem(navbarWidth.base);\n      baseStyles['--app-shell-navbar-offset'] = rem(navbarWidth.base);\n      if (mode === 'static') {\n        baseStyles['--app-shell-navbar-grid-width'] = rem(navbarWidth.base);\n      }\n    }\n\n    keys(navbarWidth).forEach((key) => {\n      if (key !== 'base') {\n        minMediaStyles[key] = minMediaStyles[key] || {};\n        minMediaStyles[key]['--app-shell-navbar-width'] = rem(navbarWidth![key]);\n        minMediaStyles[key]['--app-shell-navbar-offset'] = rem(navbarWidth![key]);\n        if (mode === 'static') {\n          minMediaStyles[key]['--app-shell-navbar-grid-width'] = rem(navbarWidth![key]);\n        }\n      }\n    });\n  }\n\n  if (navbar?.breakpoint !== undefined && mode === 'static') {\n    minMediaStyles[navbar.breakpoint] = minMediaStyles[navbar.breakpoint] || {};\n    minMediaStyles[navbar.breakpoint]['--app-shell-navbar-position'] = 'sticky';\n    minMediaStyles[navbar.breakpoint]['--app-shell-navbar-grid-row'] = '2';\n    minMediaStyles[navbar.breakpoint]['--app-shell-navbar-grid-column'] = '1';\n    minMediaStyles[navbar.breakpoint]['--app-shell-main-column-start'] = '2';\n  }\n\n  if (navbar?.collapsed?.desktop) {\n    const breakpointValue = navbar!.breakpoint;\n    minMediaStyles[breakpointValue] = minMediaStyles[breakpointValue] || {};\n    minMediaStyles[breakpointValue]['--app-shell-navbar-transform'] = collapsedNavbarTransform;\n    minMediaStyles[breakpointValue]['--app-shell-navbar-transform-rtl'] =\n      collapsedNavbarTransformRtl;\n    if (mode === 'fixed') {\n      minMediaStyles[breakpointValue]['--app-shell-navbar-offset'] = '0px !important';\n    } else {\n      // In static mode, hide the element completely so grid column collapses\n      minMediaStyles[breakpointValue]['--app-shell-navbar-width'] = '0px';\n      minMediaStyles[breakpointValue]['--app-shell-navbar-display'] = 'none';\n      minMediaStyles[breakpointValue]['--app-shell-main-column-start'] = '1';\n    }\n  }\n\n  if (navbar?.collapsed?.mobile) {\n    const breakpointValue = getBreakpointValue(navbar!.breakpoint, theme.breakpoints) - 0.1;\n    maxMediaStyles[breakpointValue] = maxMediaStyles[breakpointValue] || {};\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-width'] = '100%';\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-offset'] = '0px';\n    if (mode === 'static') {\n      maxMediaStyles[breakpointValue]['--app-shell-navbar-grid-width'] = '0px';\n    }\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-transform'] = collapsedNavbarTransform;\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-transform-rtl'] =\n      collapsedNavbarTransformRtl;\n  }\n}\n"],"mappings":";;;;;;;;AAgBA,SAAgB,sBAAsB,EACpC,YACA,gBACA,gBACA,QACA,OACA,QAC6B;CAC7B,MAAM,cAAc,QAAQ;CAC5B,MAAM,2BAA2B;CACjC,MAAM,8BAA8B;CAEpC,IAAI,QAAQ,eAAe,KAAA,KAAa,CAAC,QAAQ,WAAW,QAAQ;EAClE,eAAe,QAAQ,cAAc,eAAe,QAAQ,eAAe,CAAC;EAC5E,eAAe,QAAQ,WAAW,CAAC,+BAA+B;EAClE,eAAe,QAAQ,WAAW,CAAC,8BAA8B;EACjE,IAAI,SAAS,UACX,eAAe,QAAQ,WAAW,CAAC,mCAAmC;CAE1E;CAEA,IAAI,gBAAgB,WAAW,GAAG;EAChC,MAAM,WAAW,IAAI,YAAY,WAAW,CAAC;EAC7C,WAAW,8BAA8B;EACzC,WAAW,+BAA+B;EAC1C,IAAI,SAAS,UACX,WAAW,mCAAmC;CAElD;CAEA,IAAI,iBAAiB,WAAW,GAAG;EACjC,IAAI,OAAO,YAAY,SAAS,aAAa;GAC3C,WAAW,8BAA8B,IAAI,YAAY,IAAI;GAC7D,WAAW,+BAA+B,IAAI,YAAY,IAAI;GAC9D,IAAI,SAAS,UACX,WAAW,mCAAmC,IAAI,YAAY,IAAI;EAEtE;EAEA,KAAK,WAAW,CAAC,CAAC,SAAS,QAAQ;GACjC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,IAAI,CAAC,8BAA8B,IAAI,YAAa,IAAI;IACvE,eAAe,IAAI,CAAC,+BAA+B,IAAI,YAAa,IAAI;IACxE,IAAI,SAAS,UACX,eAAe,IAAI,CAAC,mCAAmC,IAAI,YAAa,IAAI;GAEhF;EACF,CAAC;CACH;CAEA,IAAI,QAAQ,eAAe,KAAA,KAAa,SAAS,UAAU;EACzD,eAAe,OAAO,cAAc,eAAe,OAAO,eAAe,CAAC;EAC1E,eAAe,OAAO,WAAW,CAAC,iCAAiC;EACnE,eAAe,OAAO,WAAW,CAAC,iCAAiC;EACnE,eAAe,OAAO,WAAW,CAAC,oCAAoC;EACtE,eAAe,OAAO,WAAW,CAAC,mCAAmC;CACvE;CAEA,IAAI,QAAQ,WAAW,SAAS;EAC9B,MAAM,kBAAkB,OAAQ;EAChC,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,gBAAgB,CAAC,kCAAkC;EAClE,eAAe,gBAAgB,CAAC,sCAC9B;EACF,IAAI,SAAS,SACX,eAAe,gBAAgB,CAAC,+BAA+B;OAC1D;GAEL,eAAe,gBAAgB,CAAC,8BAA8B;GAC9D,eAAe,gBAAgB,CAAC,gCAAgC;GAChE,eAAe,gBAAgB,CAAC,mCAAmC;EACrE;CACF;CAEA,IAAI,QAAQ,WAAW,QAAQ;EAC7B,MAAM,kBAAkB,mBAAmB,OAAQ,YAAY,MAAM,WAAW,IAAI;EACpF,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,gBAAgB,CAAC,8BAA8B;EAC9D,eAAe,gBAAgB,CAAC,+BAA+B;EAC/D,IAAI,SAAS,UACX,eAAe,gBAAgB,CAAC,mCAAmC;EAErE,eAAe,gBAAgB,CAAC,kCAAkC;EAClE,eAAe,gBAAgB,CAAC,sCAC9B;CACJ;AACF"}
+{"version":3,"file":"assign-navbar-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.ts"],"sourcesContent":["import { getBreakpointValue, keys, MantineTheme, rem } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport { getResizedValue } from '../get-resized-value/get-resized-value';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignNavbarVariablesInput {\n  baseStyles: CSSVariables;\n  minMediaStyles: MediaQueryVariables;\n  maxMediaStyles: MediaQueryVariables;\n  navbar: AppShellProps['navbar'] | undefined;\n  theme: MantineTheme;\n  mode: 'fixed' | 'static';\n  resizedSize?: number;\n  resizable?: boolean;\n}\n\nexport function assignNavbarVariables({\n  baseStyles,\n  minMediaStyles,\n  maxMediaStyles,\n  navbar,\n  theme,\n  mode,\n  resizedSize,\n  resizable,\n}: AssignNavbarVariablesInput) {\n  const navbarWidth = navbar?.width;\n  const collapsedNavbarTransform = 'translateX(calc(var(--app-shell-navbar-width) * -1))';\n  const collapsedNavbarTransformRtl = 'translateX(var(--app-shell-navbar-width))';\n\n  if (navbar?.breakpoint !== undefined && !navbar?.collapsed?.mobile) {\n    maxMediaStyles[navbar?.breakpoint] = maxMediaStyles[navbar?.breakpoint] || {};\n    maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-offset'] = '0px';\n    maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-width'] = '100%';\n    if (mode === 'static') {\n      maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-grid-width'] = '0px';\n    }\n    if (resizable) {\n      maxMediaStyles[navbar.breakpoint]['--app-shell-navbar-resize-handle-display'] = 'none';\n    }\n  }\n\n  if (resizedSize !== undefined) {\n    const resizedValue = getResizedValue(resizedSize, 'horizontal');\n    baseStyles['--app-shell-navbar-width'] = resizedValue;\n    baseStyles['--app-shell-navbar-offset'] = resizedValue;\n    if (mode === 'static') {\n      baseStyles['--app-shell-navbar-grid-width'] = resizedValue;\n    }\n  } else {\n    if (isPrimitiveSize(navbarWidth)) {\n      const baseSize = rem(getBaseSize(navbarWidth));\n      baseStyles['--app-shell-navbar-width'] = baseSize;\n      baseStyles['--app-shell-navbar-offset'] = baseSize;\n      if (mode === 'static') {\n        baseStyles['--app-shell-navbar-grid-width'] = baseSize;\n      }\n    }\n\n    if (isResponsiveSize(navbarWidth)) {\n      if (typeof navbarWidth.base !== 'undefined') {\n        baseStyles['--app-shell-navbar-width'] = rem(navbarWidth.base);\n        baseStyles['--app-shell-navbar-offset'] = rem(navbarWidth.base);\n        if (mode === 'static') {\n          baseStyles['--app-shell-navbar-grid-width'] = rem(navbarWidth.base);\n        }\n      }\n\n      keys(navbarWidth).forEach((key) => {\n        if (key !== 'base') {\n          minMediaStyles[key] = minMediaStyles[key] || {};\n          minMediaStyles[key]['--app-shell-navbar-width'] = rem(navbarWidth![key]);\n          minMediaStyles[key]['--app-shell-navbar-offset'] = rem(navbarWidth![key]);\n          if (mode === 'static') {\n            minMediaStyles[key]['--app-shell-navbar-grid-width'] = rem(navbarWidth![key]);\n          }\n        }\n      });\n    }\n  }\n\n  if (navbar?.breakpoint !== undefined && mode === 'static') {\n    minMediaStyles[navbar.breakpoint] = minMediaStyles[navbar.breakpoint] || {};\n    minMediaStyles[navbar.breakpoint]['--app-shell-navbar-position'] = 'sticky';\n    minMediaStyles[navbar.breakpoint]['--app-shell-navbar-grid-row'] = '2';\n    minMediaStyles[navbar.breakpoint]['--app-shell-navbar-grid-column'] = '1';\n    minMediaStyles[navbar.breakpoint]['--app-shell-main-column-start'] = '2';\n  }\n\n  if (navbar?.collapsed?.desktop) {\n    const breakpointValue = navbar!.breakpoint;\n    minMediaStyles[breakpointValue] = minMediaStyles[breakpointValue] || {};\n    minMediaStyles[breakpointValue]['--app-shell-navbar-transform'] = collapsedNavbarTransform;\n    minMediaStyles[breakpointValue]['--app-shell-navbar-transform-rtl'] =\n      collapsedNavbarTransformRtl;\n    if (mode === 'fixed') {\n      minMediaStyles[breakpointValue]['--app-shell-navbar-offset'] = '0px !important';\n    } else {\n      // In static mode, hide the element completely so grid column collapses\n      minMediaStyles[breakpointValue]['--app-shell-navbar-width'] = '0px';\n      minMediaStyles[breakpointValue]['--app-shell-navbar-display'] = 'none';\n      minMediaStyles[breakpointValue]['--app-shell-main-column-start'] = '1';\n    }\n    if (resizable) {\n      minMediaStyles[breakpointValue]['--app-shell-navbar-resize-handle-display'] = 'none';\n    }\n  }\n\n  if (navbar?.collapsed?.mobile) {\n    const breakpointValue = getBreakpointValue(navbar!.breakpoint, theme.breakpoints) - 0.1;\n    maxMediaStyles[breakpointValue] = maxMediaStyles[breakpointValue] || {};\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-width'] = '100%';\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-offset'] = '0px';\n    if (mode === 'static') {\n      maxMediaStyles[breakpointValue]['--app-shell-navbar-grid-width'] = '0px';\n    }\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-transform'] = collapsedNavbarTransform;\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-transform-rtl'] =\n      collapsedNavbarTransformRtl;\n    if (resizable) {\n      maxMediaStyles[breakpointValue]['--app-shell-navbar-resize-handle-display'] = 'none';\n    }\n  }\n}\n"],"mappings":";;;;;;;;;AAmBA,SAAgB,sBAAsB,EACpC,YACA,gBACA,gBACA,QACA,OACA,MACA,aACA,aAC6B;CAC7B,MAAM,cAAc,QAAQ;CAC5B,MAAM,2BAA2B;CACjC,MAAM,8BAA8B;CAEpC,IAAI,QAAQ,eAAe,KAAA,KAAa,CAAC,QAAQ,WAAW,QAAQ;EAClE,eAAe,QAAQ,cAAc,eAAe,QAAQ,eAAe,CAAC;EAC5E,eAAe,QAAQ,WAAW,CAAC,+BAA+B;EAClE,eAAe,QAAQ,WAAW,CAAC,8BAA8B;EACjE,IAAI,SAAS,UACX,eAAe,QAAQ,WAAW,CAAC,mCAAmC;EAExE,IAAI,WACF,eAAe,OAAO,WAAW,CAAC,8CAA8C;CAEpF;CAEA,IAAI,gBAAgB,KAAA,GAAW;EAC7B,MAAM,eAAe,gBAAgB,aAAa,YAAY;EAC9D,WAAW,8BAA8B;EACzC,WAAW,+BAA+B;EAC1C,IAAI,SAAS,UACX,WAAW,mCAAmC;CAElD,OAAO;EACL,IAAI,gBAAgB,WAAW,GAAG;GAChC,MAAM,WAAW,IAAI,YAAY,WAAW,CAAC;GAC7C,WAAW,8BAA8B;GACzC,WAAW,+BAA+B;GAC1C,IAAI,SAAS,UACX,WAAW,mCAAmC;EAElD;EAEA,IAAI,iBAAiB,WAAW,GAAG;GACjC,IAAI,OAAO,YAAY,SAAS,aAAa;IAC3C,WAAW,8BAA8B,IAAI,YAAY,IAAI;IAC7D,WAAW,+BAA+B,IAAI,YAAY,IAAI;IAC9D,IAAI,SAAS,UACX,WAAW,mCAAmC,IAAI,YAAY,IAAI;GAEtE;GAEA,KAAK,WAAW,CAAC,CAAC,SAAS,QAAQ;IACjC,IAAI,QAAQ,QAAQ;KAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;KAC9C,eAAe,IAAI,CAAC,8BAA8B,IAAI,YAAa,IAAI;KACvE,eAAe,IAAI,CAAC,+BAA+B,IAAI,YAAa,IAAI;KACxE,IAAI,SAAS,UACX,eAAe,IAAI,CAAC,mCAAmC,IAAI,YAAa,IAAI;IAEhF;GACF,CAAC;EACH;CACF;CAEA,IAAI,QAAQ,eAAe,KAAA,KAAa,SAAS,UAAU;EACzD,eAAe,OAAO,cAAc,eAAe,OAAO,eAAe,CAAC;EAC1E,eAAe,OAAO,WAAW,CAAC,iCAAiC;EACnE,eAAe,OAAO,WAAW,CAAC,iCAAiC;EACnE,eAAe,OAAO,WAAW,CAAC,oCAAoC;EACtE,eAAe,OAAO,WAAW,CAAC,mCAAmC;CACvE;CAEA,IAAI,QAAQ,WAAW,SAAS;EAC9B,MAAM,kBAAkB,OAAQ;EAChC,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,gBAAgB,CAAC,kCAAkC;EAClE,eAAe,gBAAgB,CAAC,sCAC9B;EACF,IAAI,SAAS,SACX,eAAe,gBAAgB,CAAC,+BAA+B;OAC1D;GAEL,eAAe,gBAAgB,CAAC,8BAA8B;GAC9D,eAAe,gBAAgB,CAAC,gCAAgC;GAChE,eAAe,gBAAgB,CAAC,mCAAmC;EACrE;EACA,IAAI,WACF,eAAe,gBAAgB,CAAC,8CAA8C;CAElF;CAEA,IAAI,QAAQ,WAAW,QAAQ;EAC7B,MAAM,kBAAkB,mBAAmB,OAAQ,YAAY,MAAM,WAAW,IAAI;EACpF,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,gBAAgB,CAAC,8BAA8B;EAC9D,eAAe,gBAAgB,CAAC,+BAA+B;EAC/D,IAAI,SAAS,UACX,eAAe,gBAAgB,CAAC,mCAAmC;EAErE,eAAe,gBAAgB,CAAC,kCAAkC;EAClE,eAAe,gBAAgB,CAAC,sCAC9B;EACF,IAAI,WACF,eAAe,gBAAgB,CAAC,8CAA8C;CAElF;AACF"}

package/esm/components/AppShell/AppShellMediaStyles/escape-css-id/escape-css-id.mjs

@@ -0,0 +1,26 @@
+"use client";
+//#region packages/@mantine/core/src/components/AppShell/AppShellMediaStyles/escape-css-id/escape-css-id.ts
+function isNameCodeUnit(codeUnit) {
+	return codeUnit >= 128 || codeUnit === 45 || codeUnit === 95 || codeUnit >= 48 && codeUnit <= 57 || codeUnit >= 65 && codeUnit <= 90 || codeUnit >= 97 && codeUnit <= 122;
+}
+function isDigit(codeUnit) {
+	return codeUnit >= 48 && codeUnit <= 57;
+}
+/** Serializes a string as a CSS identifier, same output as `CSS.escape`, works on the server */
+function escapeCssId(value) {
+	let result = "";
+	for (let index = 0; index < value.length; index += 1) {
+		const codeUnit = value.charCodeAt(index);
+		const char = value.charAt(index);
+		if (codeUnit === 0) result += String.fromCharCode(65533);
+		else if (codeUnit >= 1 && codeUnit <= 31 || codeUnit === 127 || index === 0 && isDigit(codeUnit) || index === 1 && isDigit(codeUnit) && value.charCodeAt(0) === 45) result += `\\${codeUnit.toString(16)} `;
+		else if (index === 0 && value.length === 1 && codeUnit === 45) result += `\\${char}`;
+		else if (isNameCodeUnit(codeUnit)) result += char;
+		else result += `\\${char}`;
+	}
+	return result;
+}
+//#endregion
+export { escapeCssId };
+
+//# sourceMappingURL=escape-css-id.mjs.map

package/esm/components/AppShell/AppShellMediaStyles/escape-css-id/escape-css-id.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"escape-css-id.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/escape-css-id/escape-css-id.ts"],"sourcesContent":["function isNameCodeUnit(codeUnit: number) {\n  return (\n    codeUnit >= 0x80 ||\n    codeUnit === 0x2d ||\n    codeUnit === 0x5f ||\n    (codeUnit >= 0x30 && codeUnit <= 0x39) ||\n    (codeUnit >= 0x41 && codeUnit <= 0x5a) ||\n    (codeUnit >= 0x61 && codeUnit <= 0x7a)\n  );\n}\n\nfunction isDigit(codeUnit: number) {\n  return codeUnit >= 0x30 && codeUnit <= 0x39;\n}\n\n/** Serializes a string as a CSS identifier, same output as `CSS.escape`, works on the server */\nexport function escapeCssId(value: string) {\n  let result = '';\n\n  for (let index = 0; index < value.length; index += 1) {\n    const codeUnit = value.charCodeAt(index);\n    const char = value.charAt(index);\n\n    if (codeUnit === 0) {\n      result += String.fromCharCode(0xfffd);\n    } else if (\n      (codeUnit >= 0x1 && codeUnit <= 0x1f) ||\n      codeUnit === 0x7f ||\n      (index === 0 && isDigit(codeUnit)) ||\n      (index === 1 && isDigit(codeUnit) && value.charCodeAt(0) === 0x2d)\n    ) {\n      result += `\\\\${codeUnit.toString(16)} `;\n    } else if (index === 0 && value.length === 1 && codeUnit === 0x2d) {\n      result += `\\\\${char}`;\n    } else if (isNameCodeUnit(codeUnit)) {\n      result += char;\n    } else {\n      result += `\\\\${char}`;\n    }\n  }\n\n  return result;\n}\n"],"mappings":";;AAAA,SAAS,eAAe,UAAkB;CACxC,OACE,YAAY,OACZ,aAAa,MACb,aAAa,MACZ,YAAY,MAAQ,YAAY,MAChC,YAAY,MAAQ,YAAY,MAChC,YAAY,MAAQ,YAAY;AAErC;AAEA,SAAS,QAAQ,UAAkB;CACjC,OAAO,YAAY,MAAQ,YAAY;AACzC;;AAGA,SAAgB,YAAY,OAAe;CACzC,IAAI,SAAS;CAEb,KAAK,IAAI,QAAQ,GAAG,QAAQ,MAAM,QAAQ,SAAS,GAAG;EACpD,MAAM,WAAW,MAAM,WAAW,KAAK;EACvC,MAAM,OAAO,MAAM,OAAO,KAAK;EAE/B,IAAI,aAAa,GACf,UAAU,OAAO,aAAa,KAAM;OAC/B,IACJ,YAAY,KAAO,YAAY,MAChC,aAAa,OACZ,UAAU,KAAK,QAAQ,QAAQ,KAC/B,UAAU,KAAK,QAAQ,QAAQ,KAAK,MAAM,WAAW,CAAC,MAAM,IAE7D,UAAU,KAAK,SAAS,SAAS,EAAE,EAAE;OAChC,IAAI,UAAU,KAAK,MAAM,WAAW,KAAK,aAAa,IAC3D,UAAU,KAAK;OACV,IAAI,eAAe,QAAQ,GAChC,UAAU;OAEV,UAAU,KAAK;CAEnB;CAEA,OAAO;AACT"}

package/esm/components/AppShell/AppShellMediaStyles/get-resized-value/get-resized-value.mjs

@@ -0,0 +1,10 @@
+"use client";
+import { rem } from "../../../../core/utils/units-converters/rem.mjs";
+//#region packages/@mantine/core/src/components/AppShell/AppShellMediaStyles/get-resized-value/get-resized-value.ts
+function getResizedValue(size, axis) {
+	return `min(${rem(size)}, ${axis === "horizontal" ? "100vw" : "100dvh"})`;
+}
+//#endregion
+export { getResizedValue };
+
+//# sourceMappingURL=get-resized-value.mjs.map

package/esm/components/AppShell/AppShellMediaStyles/get-resized-value/get-resized-value.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-resized-value.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/get-resized-value/get-resized-value.ts"],"sourcesContent":["import { rem } from '../../../../core';\n\nexport function getResizedValue(size: number, axis: 'horizontal' | 'vertical') {\n  return `min(${rem(size)}, ${axis === 'horizontal' ? '100vw' : '100dvh'})`;\n}\n"],"mappings":";;;AAEA,SAAgB,gBAAgB,MAAc,MAAiC;CAC7E,OAAO,OAAO,IAAI,IAAI,EAAE,IAAI,SAAS,eAAe,UAAU,SAAS;AACzE"}

package/esm/components/AppShell/AppShellMediaStyles/get-variables/get-variables.mjs

@@ -8,7 +8,7 @@ import { assignHeaderVariables } from "../assign-header-variables/assign-header-
 import { assignNavbarVariables } from "../assign-navbar-variables/assign-navbar-variables.mjs";
 import { assignPaddingVariables } from "../assign-padding-variables/assign-padding-variables.mjs";
 //#region packages/@mantine/core/src/components/AppShell/AppShellMediaStyles/get-variables/get-variables.ts
-function getVariables({ navbar, header, footer, aside, padding, theme, mode }) {
+function getVariables({ navbar, header, footer, aside, padding, theme, mode, resize }) {
 	const minMediaStyles = {};
 	const maxMediaStyles = {};
 	const baseStyles = {};
@@ -22,7 +22,9 @@ function getVariables({ navbar, header, footer, aside, padding, theme, mode }) {
 		maxMediaStyles,
 		navbar,
 		theme,
-		mode
+		mode,
+		resizedSize: resize?.sizes.navbar,
+		resizable: resize?.enabled.navbar
 	});
 	assignAsideVariables({
 		baseStyles,
@@ -30,19 +32,25 @@ function getVariables({ navbar, header, footer, aside, padding, theme, mode }) {
 		maxMediaStyles,
 		aside,
 		theme,
-		mode
+		mode,
+		resizedSize: resize?.sizes.aside,
+		resizable: resize?.enabled.aside
 	});
 	assignHeaderVariables({
 		baseStyles,
 		minMediaStyles,
 		header,
-		mode
+		mode,
+		resizedSize: resize?.sizes.header,
+		resizable: resize?.enabled.header
 	});
 	assignFooterVariables({
 		baseStyles,
 		minMediaStyles,
 		footer,
-		mode
+		mode,
+		resizedSize: resize?.sizes.footer,
+		resizable: resize?.enabled.footer
 	});
 	assignPaddingVariables({
 		baseStyles,

package/esm/components/AppShell/AppShellMediaStyles/get-variables/get-variables.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"get-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/get-variables/get-variables.ts"],"sourcesContent":["import { em, getSortedBreakpoints, keys, MantineTheme } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { assignAsideVariables } from '../assign-aside-variables/assign-aside-variables';\nimport { assignFooterVariables } from '../assign-footer-variables/assign-footer-variables';\nimport { assignHeaderVariables } from '../assign-header-variables/assign-header-variables';\nimport { assignNavbarVariables } from '../assign-navbar-variables/assign-navbar-variables';\nimport { assignPaddingVariables } from '../assign-padding-variables/assign-padding-variables';\n\nexport type CSSVariables = Record<`--${string}`, string | undefined>;\nexport type MediaQueryVariables = Record<string, Record<`--${string}`, string | undefined>>;\n\ninterface GetVariablesInput {\n  navbar: AppShellProps['navbar'] | undefined;\n  header: AppShellProps['header'] | undefined;\n  footer: AppShellProps['footer'] | undefined;\n  aside: AppShellProps['aside'] | undefined;\n  padding: AppShellProps['padding'] | undefined;\n  theme: MantineTheme;\n  mode: 'fixed' | 'static';\n}\n\nexport function getVariables({\n  navbar,\n  header,\n  footer,\n  aside,\n  padding,\n  theme,\n  mode,\n}: GetVariablesInput) {\n  const minMediaStyles: MediaQueryVariables = {};\n  const maxMediaStyles: MediaQueryVariables = {};\n  const baseStyles: CSSVariables = {};\n\n  // Set default main grid position in static mode\n  if (mode === 'static') {\n    baseStyles['--app-shell-main-grid-column'] = '1 / -1';\n    baseStyles['--app-shell-main-grid-row'] = '2';\n  }\n\n  assignNavbarVariables({\n    baseStyles,\n    minMediaStyles,\n    maxMediaStyles,\n    navbar,\n    theme,\n    mode,\n  });\n\n  assignAsideVariables({\n    baseStyles,\n    minMediaStyles,\n    maxMediaStyles,\n    aside,\n    theme,\n    mode,\n  });\n\n  assignHeaderVariables({ baseStyles, minMediaStyles, header, mode });\n  assignFooterVariables({ baseStyles, minMediaStyles, footer, mode });\n  assignPaddingVariables({ baseStyles, minMediaStyles, padding });\n\n  const minMedia = getSortedBreakpoints(keys(minMediaStyles), theme.breakpoints).map(\n    (breakpoint) => ({\n      query: `(min-width: ${em(breakpoint.px)})`,\n      styles: minMediaStyles[breakpoint.value],\n    })\n  );\n\n  const maxMedia = getSortedBreakpoints(keys(maxMediaStyles), theme.breakpoints).map(\n    (breakpoint) => ({\n      query: `(max-width: ${em(breakpoint.px)})`,\n      styles: maxMediaStyles[breakpoint.value],\n    })\n  );\n\n  const media = [...minMedia, ...maxMedia];\n\n  return { baseStyles, media };\n}\n"],"mappings":";;;;;;;;;;AAqBA,SAAgB,aAAa,EAC3B,QACA,QACA,QACA,OACA,SACA,OACA,QACoB;CACpB,MAAM,iBAAsC,CAAC;CAC7C,MAAM,iBAAsC,CAAC;CAC7C,MAAM,aAA2B,CAAC;CAGlC,IAAI,SAAS,UAAU;EACrB,WAAW,kCAAkC;EAC7C,WAAW,+BAA+B;CAC5C;CAEA,sBAAsB;EACpB;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,qBAAqB;EACnB;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,sBAAsB;EAAE;EAAY;EAAgB;EAAQ;CAAK,CAAC;CAClE,sBAAsB;EAAE;EAAY;EAAgB;EAAQ;CAAK,CAAC;CAClE,uBAAuB;EAAE;EAAY;EAAgB;CAAQ,CAAC;CAE9D,MAAM,WAAW,qBAAqB,KAAK,cAAc,GAAG,MAAM,WAAW,CAAC,CAAC,KAC5E,gBAAgB;EACf,OAAO,eAAe,GAAG,WAAW,EAAE,EAAE;EACxC,QAAQ,eAAe,WAAW;CACpC,EACF;CAEA,MAAM,WAAW,qBAAqB,KAAK,cAAc,GAAG,MAAM,WAAW,CAAC,CAAC,KAC5E,gBAAgB;EACf,OAAO,eAAe,GAAG,WAAW,EAAE,EAAE;EACxC,QAAQ,eAAe,WAAW;CACpC,EACF;CAIA,OAAO;EAAE;EAAY,OAAA,CAFN,GAAG,UAAU,GAAG,QAEN;CAAE;AAC7B"}
+{"version":3,"file":"get-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/get-variables/get-variables.ts"],"sourcesContent":["import { em, getSortedBreakpoints, keys, MantineTheme } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport type { AppShellResizeSection, AppShellResizeSizes } from '../../AppShell.types';\nimport { assignAsideVariables } from '../assign-aside-variables/assign-aside-variables';\nimport { assignFooterVariables } from '../assign-footer-variables/assign-footer-variables';\nimport { assignHeaderVariables } from '../assign-header-variables/assign-header-variables';\nimport { assignNavbarVariables } from '../assign-navbar-variables/assign-navbar-variables';\nimport { assignPaddingVariables } from '../assign-padding-variables/assign-padding-variables';\n\nexport type CSSVariables = Record<`--${string}`, string | undefined>;\nexport type MediaQueryVariables = Record<string, Record<`--${string}`, string | undefined>>;\n\ninterface GetVariablesInput {\n  navbar: AppShellProps['navbar'] | undefined;\n  header: AppShellProps['header'] | undefined;\n  footer: AppShellProps['footer'] | undefined;\n  aside: AppShellProps['aside'] | undefined;\n  padding: AppShellProps['padding'] | undefined;\n  theme: MantineTheme;\n  mode: 'fixed' | 'static';\n  resize:\n    | { sizes: AppShellResizeSizes; enabled: Partial<Record<AppShellResizeSection, boolean>> }\n    | undefined;\n}\n\nexport function getVariables({\n  navbar,\n  header,\n  footer,\n  aside,\n  padding,\n  theme,\n  mode,\n  resize,\n}: GetVariablesInput) {\n  const minMediaStyles: MediaQueryVariables = {};\n  const maxMediaStyles: MediaQueryVariables = {};\n  const baseStyles: CSSVariables = {};\n\n  // Set default main grid position in static mode\n  if (mode === 'static') {\n    baseStyles['--app-shell-main-grid-column'] = '1 / -1';\n    baseStyles['--app-shell-main-grid-row'] = '2';\n  }\n\n  assignNavbarVariables({\n    baseStyles,\n    minMediaStyles,\n    maxMediaStyles,\n    navbar,\n    theme,\n    mode,\n    resizedSize: resize?.sizes.navbar,\n    resizable: resize?.enabled.navbar,\n  });\n\n  assignAsideVariables({\n    baseStyles,\n    minMediaStyles,\n    maxMediaStyles,\n    aside,\n    theme,\n    mode,\n    resizedSize: resize?.sizes.aside,\n    resizable: resize?.enabled.aside,\n  });\n\n  assignHeaderVariables({\n    baseStyles,\n    minMediaStyles,\n    header,\n    mode,\n    resizedSize: resize?.sizes.header,\n    resizable: resize?.enabled.header,\n  });\n  assignFooterVariables({\n    baseStyles,\n    minMediaStyles,\n    footer,\n    mode,\n    resizedSize: resize?.sizes.footer,\n    resizable: resize?.enabled.footer,\n  });\n  assignPaddingVariables({ baseStyles, minMediaStyles, padding });\n\n  const minMedia = getSortedBreakpoints(keys(minMediaStyles), theme.breakpoints).map(\n    (breakpoint) => ({\n      query: `(min-width: ${em(breakpoint.px)})`,\n      styles: minMediaStyles[breakpoint.value],\n    })\n  );\n\n  const maxMedia = getSortedBreakpoints(keys(maxMediaStyles), theme.breakpoints).map(\n    (breakpoint) => ({\n      query: `(max-width: ${em(breakpoint.px)})`,\n      styles: maxMediaStyles[breakpoint.value],\n    })\n  );\n\n  const media = [...minMedia, ...maxMedia];\n\n  return { baseStyles, media };\n}\n"],"mappings":";;;;;;;;;;AAyBA,SAAgB,aAAa,EAC3B,QACA,QACA,QACA,OACA,SACA,OACA,MACA,UACoB;CACpB,MAAM,iBAAsC,CAAC;CAC7C,MAAM,iBAAsC,CAAC;CAC7C,MAAM,aAA2B,CAAC;CAGlC,IAAI,SAAS,UAAU;EACrB,WAAW,kCAAkC;EAC7C,WAAW,+BAA+B;CAC5C;CAEA,sBAAsB;EACpB;EACA;EACA;EACA;EACA;EACA;EACA,aAAa,QAAQ,MAAM;EAC3B,WAAW,QAAQ,QAAQ;CAC7B,CAAC;CAED,qBAAqB;EACnB;EACA;EACA;EACA;EACA;EACA;EACA,aAAa,QAAQ,MAAM;EAC3B,WAAW,QAAQ,QAAQ;CAC7B,CAAC;CAED,sBAAsB;EACpB;EACA;EACA;EACA;EACA,aAAa,QAAQ,MAAM;EAC3B,WAAW,QAAQ,QAAQ;CAC7B,CAAC;CACD,sBAAsB;EACpB;EACA;EACA;EACA;EACA,aAAa,QAAQ,MAAM;EAC3B,WAAW,QAAQ,QAAQ;CAC7B,CAAC;CACD,uBAAuB;EAAE;EAAY;EAAgB;CAAQ,CAAC;CAE9D,MAAM,WAAW,qBAAqB,KAAK,cAAc,GAAG,MAAM,WAAW,CAAC,CAAC,KAC5E,gBAAgB;EACf,OAAO,eAAe,GAAG,WAAW,EAAE,EAAE;EACxC,QAAQ,eAAe,WAAW;CACpC,EACF;CAEA,MAAM,WAAW,qBAAqB,KAAK,cAAc,GAAG,MAAM,WAAW,CAAC,CAAC,KAC5E,gBAAgB;EACf,OAAO,eAAe,GAAG,WAAW,EAAE,EAAE;EACxC,QAAQ,eAAe,WAAW;CACpC,EACF;CAIA,OAAO;EAAE;EAAY,OAAA,CAFN,GAAG,UAAU,GAAG,QAEN;CAAE;AAC7B"}

package/esm/components/AppShell/AppShellNavbar/AppShellNavbar.mjs

@@ -3,26 +3,47 @@ import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs"
 import { factory } from "../../../core/factory/factory.mjs";
 import { Box } from "../../../core/Box/Box.mjs";
 import { useAppShellContext } from "../AppShell.context.mjs";
+import { AppShellResizeHandle } from "../AppShellResizeHandle/AppShellResizeHandle.mjs";
 import AppShell_module_default from "../AppShell.module.mjs";
 import "react";
-import { jsx } from "react/jsx-runtime";
+import { useId as useId$1 } from "@mantine/hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/AppShell/AppShellNavbar/AppShellNavbar.tsx
 const AppShellNavbar = factory((_props) => {
 	const { classNames, className, style, styles, unstyled, vars, withBorder, zIndex, mod, ...others } = useProps("AppShellNavbar", null, _props);
 	const ctx = useAppShellContext();
+	const sectionId = useId$1(others.id);
 	if (ctx.disabled) return null;
-	return /* @__PURE__ */ jsx(Box, {
+	const isResizable = ctx.resize?.navbar.enabled ?? false;
+	const boxProps = ctx.getStyles("navbar", {
+		className,
+		classNames,
+		styles,
+		style
+	});
+	if (!isResizable) return /* @__PURE__ */ jsx(Box, {
 		component: "nav",
 		mod: [{ "with-border": withBorder ?? ctx.withBorder }, mod],
-		...ctx.getStyles("navbar", {
-			className,
-			classNames,
-			styles,
-			style
-		}),
+		...boxProps,
 		...others,
 		__vars: { "--app-shell-navbar-z-index": `calc(${zIndex ?? ctx.zIndex} + 1)` }
 	});
+	const { children, dangerouslySetInnerHTML, ...rest } = others;
+	return /* @__PURE__ */ jsxs(Box, {
+		component: "nav",
+		mod: [{ "with-border": withBorder ?? ctx.withBorder }, mod],
+		...boxProps,
+		...rest,
+		__vars: { "--app-shell-navbar-z-index": `calc(${zIndex ?? ctx.zIndex} + 1)` },
+		id: sectionId,
+		children: [dangerouslySetInnerHTML ? /* @__PURE__ */ jsx("div", {
+			style: { display: "contents" },
+			dangerouslySetInnerHTML
+		}) : children, /* @__PURE__ */ jsx(AppShellResizeHandle, {
+			section: "navbar",
+			sectionId
+		})]
+	});
 });
 AppShellNavbar.classes = AppShell_module_default;
 AppShellNavbar.displayName = "@mantine/core/AppShellNavbar";

package/esm/components/AppShell/AppShellNavbar/AppShellNavbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppShellNavbar.mjs","names":["classes"],"sources":["../../../../src/components/AppShell/AppShellNavbar/AppShellNavbar.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  StylesApiProps,\n  useProps,\n} from '../../../core';\nimport { useAppShellContext } from '../AppShell.context';\nimport type { AppShellCompoundProps } from '../AppShell.types';\nimport classes from '../AppShell.module.css';\n\nexport type AppShellNavbarStylesNames = 'navbar';\n\nexport interface AppShellNavbarProps\n  extends\n    BoxProps,\n    AppShellCompoundProps,\n    StylesApiProps<AppShellNavbarFactory>,\n    ElementProps<'div'> {}\n\nexport type AppShellNavbarFactory = Factory<{\n  props: AppShellNavbarProps;\n  ref: HTMLElement;\n  stylesNames: AppShellNavbarStylesNames;\n}>;\n\nexport const AppShellNavbar = factory<AppShellNavbarFactory>((_props) => {\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    withBorder,\n    zIndex,\n    mod,\n    ...others\n  } = useProps('AppShellNavbar', null, _props);\n\n  const ctx = useAppShellContext();\n\n  if (ctx.disabled) {\n    return null;\n  }\n\n  return (\n    <Box\n      component=\"nav\"\n      mod={[{ 'with-border': withBorder ?? ctx.withBorder }, mod]}\n      {...ctx.getStyles('navbar', { className, classNames, styles, style })}\n      {...others}\n      __vars={{ '--app-shell-navbar-z-index': `calc(${zIndex ?? ctx.zIndex} + 1)` }}\n    />\n  );\n});\n\nAppShellNavbar.classes = classes;\nAppShellNavbar.displayName = '@mantine/core/AppShellNavbar';\n"],"mappings":";;;;;;;;;AA6BA,MAAa,iBAAiB,SAAgC,WAAW;CACvE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,QACA,KACA,GAAG,WACD,SAAS,kBAAkB,MAAM,MAAM;CAE3C,MAAM,MAAM,mBAAmB;CAE/B,IAAI,IAAI,UACN,OAAO;CAGT,OACE,oBAAC,KAAD;EACE,WAAU;EACV,KAAK,CAAC,EAAE,eAAe,cAAc,IAAI,WAAW,GAAG,GAAG;EAC1D,GAAI,IAAI,UAAU,UAAU;GAAE;GAAW;GAAY;GAAQ;EAAM,CAAC;EACpE,GAAI;EACJ,QAAQ,EAAE,8BAA8B,QAAQ,UAAU,IAAI,OAAO,OAAO;CAC7E,CAAA;AAEL,CAAC;AAED,eAAe,UAAUA;AACzB,eAAe,cAAc"}
+{"version":3,"file":"AppShellNavbar.mjs","names":["useId","classes"],"sources":["../../../../src/components/AppShell/AppShellNavbar/AppShellNavbar.tsx"],"sourcesContent":["import React from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  StylesApiProps,\n  useProps,\n} from '../../../core';\nimport { useAppShellContext } from '../AppShell.context';\nimport type { AppShellCompoundProps } from '../AppShell.types';\nimport { AppShellResizeHandle } from '../AppShellResizeHandle/AppShellResizeHandle';\nimport classes from '../AppShell.module.css';\n\nexport type AppShellNavbarStylesNames = 'navbar';\n\nexport interface AppShellNavbarProps\n  extends\n    BoxProps,\n    AppShellCompoundProps,\n    StylesApiProps<AppShellNavbarFactory>,\n    ElementProps<'div'> {}\n\nexport type AppShellNavbarFactory = Factory<{\n  props: AppShellNavbarProps;\n  ref: HTMLElement;\n  stylesNames: AppShellNavbarStylesNames;\n}>;\n\nexport const AppShellNavbar = factory<AppShellNavbarFactory>((_props) => {\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    withBorder,\n    zIndex,\n    mod,\n    ...others\n  } = useProps('AppShellNavbar', null, _props);\n\n  const ctx = useAppShellContext();\n  const sectionId = useId(others.id);\n\n  if (ctx.disabled) {\n    return null;\n  }\n\n  const isResizable = ctx.resize?.navbar.enabled ?? false;\n  const boxProps = ctx.getStyles('navbar', { className, classNames, styles, style });\n\n  if (!isResizable) {\n    return (\n      <Box\n        component=\"nav\"\n        mod={[{ 'with-border': withBorder ?? ctx.withBorder }, mod]}\n        {...boxProps}\n        {...others}\n        __vars={{ '--app-shell-navbar-z-index': `calc(${zIndex ?? ctx.zIndex} + 1)` }}\n      />\n    );\n  }\n\n  const { children, dangerouslySetInnerHTML, ...rest } = others;\n\n  return (\n    <Box\n      component=\"nav\"\n      mod={[{ 'with-border': withBorder ?? ctx.withBorder }, mod]}\n      {...boxProps}\n      {...rest}\n      __vars={{ '--app-shell-navbar-z-index': `calc(${zIndex ?? ctx.zIndex} + 1)` }}\n      id={sectionId}\n    >\n      {dangerouslySetInnerHTML ? (\n        <div style={{ display: 'contents' }} dangerouslySetInnerHTML={dangerouslySetInnerHTML} />\n      ) : (\n        children\n      )}\n      <AppShellResizeHandle section=\"navbar\" sectionId={sectionId} />\n    </Box>\n  );\n});\n\nAppShellNavbar.classes = classes;\nAppShellNavbar.displayName = '@mantine/core/AppShellNavbar';\n"],"mappings":";;;;;;;;;;;AA+BA,MAAa,iBAAiB,SAAgC,WAAW;CACvE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,QACA,KACA,GAAG,WACD,SAAS,kBAAkB,MAAM,MAAM;CAE3C,MAAM,MAAM,mBAAmB;CAC/B,MAAM,YAAYA,QAAM,OAAO,EAAE;CAEjC,IAAI,IAAI,UACN,OAAO;CAGT,MAAM,cAAc,IAAI,QAAQ,OAAO,WAAW;CAClD,MAAM,WAAW,IAAI,UAAU,UAAU;EAAE;EAAW;EAAY;EAAQ;CAAM,CAAC;CAEjF,IAAI,CAAC,aACH,OACE,oBAAC,KAAD;EACE,WAAU;EACV,KAAK,CAAC,EAAE,eAAe,cAAc,IAAI,WAAW,GAAG,GAAG;EAC1D,GAAI;EACJ,GAAI;EACJ,QAAQ,EAAE,8BAA8B,QAAQ,UAAU,IAAI,OAAO,OAAO;CAC7E,CAAA;CAIL,MAAM,EAAE,UAAU,yBAAyB,GAAG,SAAS;CAEvD,OACE,qBAAC,KAAD;EACE,WAAU;EACV,KAAK,CAAC,EAAE,eAAe,cAAc,IAAI,WAAW,GAAG,GAAG;EAC1D,GAAI;EACJ,GAAI;EACJ,QAAQ,EAAE,8BAA8B,QAAQ,UAAU,IAAI,OAAO,OAAO;EAC5E,IAAI;EANN,UAAA,CAQG,0BACC,oBAAC,OAAD;GAAK,OAAO,EAAE,SAAS,WAAW;GAA4B;EAA0B,CAAA,IAExF,UAEF,oBAAC,sBAAD;GAAsB,SAAQ;GAAoB;EAAY,CAAA,CAC3D;;AAET,CAAC;AAED,eAAe,UAAUC;AACzB,eAAe,cAAc"}

package/esm/components/AppShell/AppShellResizeHandle/AppShellResizeHandle.mjs

@@ -0,0 +1,270 @@
+"use client";
+import { rem } from "../../../core/utils/units-converters/rem.mjs";
+import { useMantineTheme } from "../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs";
+import { Box } from "../../../core/Box/Box.mjs";
+import { useDirection } from "../../../core/DirectionProvider/DirectionProvider.mjs";
+import { useAppShellContext } from "../AppShell.context.mjs";
+import { clampResizeSize, getCollapseState } from "../use-app-shell-resize/clamp-resize-size.mjs";
+import { RESIZE_SECTIONS, getResizeDelta } from "../use-app-shell-resize/resize-section-config.mjs";
+import { getSafeAreaInset } from "../use-app-shell-resize/safe-area-inset.mjs";
+import { useRef, useState } from "react";
+import { useIsomorphicEffect } from "@mantine/hooks";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/AppShell/AppShellResizeHandle/AppShellResizeHandle.tsx
+const LABELS = {
+	navbar: "Resize navbar",
+	aside: "Resize aside",
+	header: "Resize header",
+	footer: "Resize footer"
+};
+const KEYBOARD_STEP = 10;
+const KEYBOARD_SHIFT_STEP = 50;
+const KEY_DELTAS = {
+	ArrowRight: {
+		deltaX: 1,
+		deltaY: 0
+	},
+	ArrowLeft: {
+		deltaX: -1,
+		deltaY: 0
+	},
+	ArrowDown: {
+		deltaX: 0,
+		deltaY: 1
+	},
+	ArrowUp: {
+		deltaX: 0,
+		deltaY: -1
+	}
+};
+function restoreBodyStyleProperty(property, value) {
+	if (value) document.body.style.setProperty(property, value);
+	else document.body.style.removeProperty(property);
+}
+function AppShellResizeHandle({ section, sectionId }) {
+	const ctx = useAppShellContext();
+	const controller = ctx.resize;
+	const handleRef = useRef(null);
+	const dragRef = useRef({
+		startSize: 0,
+		startX: 0,
+		startY: 0,
+		size: 0,
+		moved: false
+	});
+	const activePointerIdRef = useRef(null);
+	const abortRef = useRef(null);
+	const previousBodyStylesRef = useRef(null);
+	const { dir } = useDirection();
+	const theme = useMantineTheme();
+	const config = RESIZE_SECTIONS[section];
+	const options = controller?.options[section] ?? {};
+	const getViewportPx = () => config.axis === "horizontal" ? window.innerWidth : window.innerHeight;
+	const [viewportPx, setViewportPx] = useState(0);
+	const [measuredSize, setMeasuredSize] = useState(void 0);
+	const getViewportMax = () => getViewportPx() / theme.scale;
+	const measureSectionSize = (sectionElement) => {
+		const rect = sectionElement.getBoundingClientRect();
+		return ((config.axis === "horizontal" ? rect.width : rect.height) - getSafeAreaInset(sectionElement, config.safeAreaVariable)) / theme.scale;
+	};
+	const applyPreview = (size) => {
+		const root = ctx.rootRef.current;
+		if (!root) return;
+		const value = rem(size);
+		root.style.setProperty(config.sizeVariable, value);
+		if (ctx.resizeOffsets[section]) root.style.setProperty(config.offsetVariable, value);
+		if (ctx.mode === "static" && config.gridWidthVariable) root.style.setProperty(config.gridWidthVariable, value);
+	};
+	const clearPreview = () => {
+		const root = ctx.rootRef.current;
+		if (!root) return;
+		root.style.removeProperty(config.sizeVariable);
+		root.style.removeProperty(config.offsetVariable);
+		if (config.gridWidthVariable) root.style.removeProperty(config.gridWidthVariable);
+	};
+	const stopListeners = () => {
+		abortRef.current?.abort();
+		abortRef.current = null;
+		activePointerIdRef.current = null;
+		const previousBodyStyles = previousBodyStylesRef.current;
+		previousBodyStylesRef.current = null;
+		if (previousBodyStyles) {
+			restoreBodyStyleProperty("user-select", previousBodyStyles.userSelect);
+			restoreBodyStyleProperty("-webkit-user-select", previousBodyStyles.webkitUserSelect);
+			restoreBodyStyleProperty("cursor", previousBodyStyles.cursor);
+		}
+	};
+	const cancelResize = () => {
+		controller?.reportCollapse(section, getCollapseState(dragRef.current.startSize, options.collapseThreshold));
+		controller?.endResize(section, null);
+	};
+	const onPointerMove = (event) => {
+		if (event.pointerId !== activePointerIdRef.current) return;
+		dragRef.current.moved = true;
+		const delta = getResizeDelta({
+			section,
+			deltaX: event.clientX - dragRef.current.startX,
+			deltaY: event.clientY - dragRef.current.startY,
+			dir
+		}) / theme.scale;
+		const rawSize = dragRef.current.startSize + delta;
+		const size = clampResizeSize({
+			size: rawSize,
+			min: options.min,
+			max: options.max,
+			viewportMax: getViewportMax()
+		});
+		dragRef.current.size = size;
+		applyPreview(size);
+		handleRef.current?.setAttribute("aria-valuenow", String(Math.round(size)));
+		controller?.previewResize(section, size);
+		controller?.reportCollapse(section, getCollapseState(rawSize, options.collapseThreshold));
+	};
+	const onPointerUp = (event) => {
+		if (event.pointerId !== activePointerIdRef.current) return;
+		stopListeners();
+		if (!dragRef.current.moved) {
+			controller?.endResize(section, null);
+			return;
+		}
+		controller?.endResize(section, dragRef.current.size);
+	};
+	const onPointerCancel = (event) => {
+		if (event.pointerId !== activePointerIdRef.current) return;
+		stopListeners();
+		clearPreview();
+		cancelResize();
+	};
+	const onDragKeyDown = (event) => {
+		if (event.key !== "Escape") return;
+		event.preventDefault();
+		stopListeners();
+		clearPreview();
+		handleRef.current?.setAttribute("aria-valuenow", String(Math.round(dragRef.current.startSize)));
+		cancelResize();
+	};
+	const getCurrentSize = () => {
+		const size = controller?.[section].size;
+		if (size !== void 0) return size;
+		const sectionElement = handleRef.current?.parentElement;
+		if (!sectionElement) return 0;
+		return measureSectionSize(sectionElement);
+	};
+	const commitKeyboardSize = (size) => {
+		controller?.initCollapse(section, getCollapseState(getCurrentSize(), options.collapseThreshold));
+		controller?.reportCollapse(section, getCollapseState(size, options.collapseThreshold));
+		controller?.endResize(section, clampResizeSize({
+			size,
+			min: options.min,
+			max: options.max,
+			viewportMax: getViewportMax()
+		}));
+	};
+	const onKeyDown = (event) => {
+		const step = event.shiftKey ? KEYBOARD_SHIFT_STEP : KEYBOARD_STEP;
+		if (event.key === "Home") {
+			event.preventDefault();
+			commitKeyboardSize(options.min ?? 0);
+			return;
+		}
+		if (event.key === "End") {
+			event.preventDefault();
+			commitKeyboardSize(options.max ?? getViewportMax());
+			return;
+		}
+		const keyDelta = KEY_DELTAS[event.key];
+		if (!keyDelta) return;
+		const direction = getResizeDelta({
+			section,
+			...keyDelta,
+			dir
+		});
+		if (direction === 0) return;
+		event.preventDefault();
+		commitKeyboardSize(getCurrentSize() + direction * step);
+	};
+	const onDoubleClick = () => {
+		clearPreview();
+		controller?.[section].reset();
+	};
+	const onPointerDown = (event) => {
+		if (event.button !== 0) return;
+		if (abortRef.current !== null) return;
+		const sectionElement = handleRef.current?.parentElement;
+		if (!sectionElement) return;
+		const startSize = measureSectionSize(sectionElement);
+		dragRef.current = {
+			startSize,
+			startX: event.clientX,
+			startY: event.clientY,
+			size: startSize,
+			moved: false
+		};
+		activePointerIdRef.current = event.pointerId;
+		controller?.initCollapse(section, getCollapseState(startSize, options.collapseThreshold));
+		const abortController = new AbortController();
+		abortRef.current = abortController;
+		const { signal } = abortController;
+		previousBodyStylesRef.current = {
+			userSelect: document.body.style.getPropertyValue("user-select"),
+			webkitUserSelect: document.body.style.getPropertyValue("-webkit-user-select"),
+			cursor: document.body.style.getPropertyValue("cursor")
+		};
+		document.body.style.setProperty("user-select", "none");
+		document.body.style.setProperty("-webkit-user-select", "none");
+		document.body.style.setProperty("cursor", config.axis === "horizontal" ? "col-resize" : "row-resize");
+		controller?.startResize(section);
+		document.addEventListener("pointermove", onPointerMove, { signal });
+		document.addEventListener("pointerup", onPointerUp, { signal });
+		document.addEventListener("pointercancel", onPointerCancel, { signal });
+		document.addEventListener("keydown", onDragKeyDown, { signal });
+	};
+	useIsomorphicEffect(() => {
+		if (controller && controller.activeSection !== section) clearPreview();
+	}, [controller?.activeSection, controller?.[section].size]);
+	useIsomorphicEffect(() => {
+		setViewportPx(getViewportPx());
+		const handleWindowResize = () => setViewportPx(getViewportPx());
+		window.addEventListener("resize", handleWindowResize);
+		return () => window.removeEventListener("resize", handleWindowResize);
+	}, [config.axis]);
+	useIsomorphicEffect(() => {
+		if (controller?.[section].size === void 0) setMeasuredSize(getCurrentSize());
+	}, [controller?.[section].size, viewportPx]);
+	useIsomorphicEffect(() => () => {
+		const wasDragging = abortRef.current !== null;
+		stopListeners();
+		clearPreview();
+		if (wasDragging) cancelResize();
+	}, []);
+	if (!controller?.[section].enabled) return null;
+	const viewportMax = viewportPx / theme.scale;
+	const effectiveMax = Math.min(options.max ?? viewportMax, viewportMax);
+	const committedSize = controller[section].size;
+	const currentValue = committedSize !== void 0 && viewportPx > 0 ? Math.min(committedSize, viewportMax) : committedSize ?? measuredSize;
+	return /* @__PURE__ */ jsx(Box, {
+		ref: handleRef,
+		role: "separator",
+		tabIndex: 0,
+		"aria-label": options.label ?? LABELS[section],
+		"aria-controls": sectionId,
+		"aria-orientation": config.orientation,
+		"aria-valuemin": options.min ?? 0,
+		"aria-valuemax": Math.round(effectiveMax),
+		"aria-valuenow": currentValue !== void 0 ? Math.round(currentValue) : void 0,
+		onPointerDown,
+		onKeyDown,
+		onDoubleClick,
+		mod: {
+			section,
+			orientation: config.orientation,
+			active: controller[section].active
+		},
+		...ctx.getStyles("resizeHandle")
+	});
+}
+AppShellResizeHandle.displayName = "@mantine/core/AppShellResizeHandle";
+//#endregion
+export { AppShellResizeHandle };
+
+//# sourceMappingURL=AppShellResizeHandle.mjs.map

package/esm/components/AppShell/AppShellResizeHandle/AppShellResizeHandle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShellResizeHandle.mjs","names":[],"sources":["../../../../src/components/AppShell/AppShellResizeHandle/AppShellResizeHandle.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { useIsomorphicEffect } from '@mantine/hooks';\nimport { Box, rem, useDirection, useMantineTheme } from '../../../core';\nimport { useAppShellContext } from '../AppShell.context';\nimport type { AppShellResizeSection } from '../AppShell.types';\nimport { clampResizeSize, getCollapseState } from '../use-app-shell-resize/clamp-resize-size';\nimport { getResizeDelta, RESIZE_SECTIONS } from '../use-app-shell-resize/resize-section-config';\nimport { getSafeAreaInset } from '../use-app-shell-resize/safe-area-inset';\n\ninterface AppShellResizeHandleProps {\n  section: AppShellResizeSection;\n  sectionId: string;\n}\n\nconst LABELS: Record<AppShellResizeSection, string> = {\n  navbar: 'Resize navbar',\n  aside: 'Resize aside',\n  header: 'Resize header',\n  footer: 'Resize footer',\n};\n\nconst KEYBOARD_STEP = 10;\nconst KEYBOARD_SHIFT_STEP = 50;\n\nconst KEY_DELTAS: Record<string, { deltaX: number; deltaY: number }> = {\n  ArrowRight: { deltaX: 1, deltaY: 0 },\n  ArrowLeft: { deltaX: -1, deltaY: 0 },\n  ArrowDown: { deltaX: 0, deltaY: 1 },\n  ArrowUp: { deltaX: 0, deltaY: -1 },\n};\n\ninterface PreviousBodyStyles {\n  userSelect: string;\n  webkitUserSelect: string;\n  cursor: string;\n}\n\nfunction restoreBodyStyleProperty(property: string, value: string) {\n  if (value) {\n    document.body.style.setProperty(property, value);\n  } else {\n    document.body.style.removeProperty(property);\n  }\n}\n\nexport function AppShellResizeHandle({ section, sectionId }: AppShellResizeHandleProps) {\n  const ctx = useAppShellContext();\n  const controller = ctx.resize;\n\n  const handleRef = useRef<HTMLDivElement>(null);\n  const dragRef = useRef({ startSize: 0, startX: 0, startY: 0, size: 0, moved: false });\n  const activePointerIdRef = useRef<number | null>(null);\n  const abortRef = useRef<AbortController | null>(null);\n  const previousBodyStylesRef = useRef<PreviousBodyStyles | null>(null);\n  const { dir } = useDirection();\n  const theme = useMantineTheme();\n\n  const config = RESIZE_SECTIONS[section];\n  const options = controller?.options[section] ?? {};\n\n  const getViewportPx = () =>\n    config.axis === 'horizontal' ? window.innerWidth : window.innerHeight;\n\n  const [viewportPx, setViewportPx] = useState(0);\n  const [measuredSize, setMeasuredSize] = useState<number | undefined>(undefined);\n\n  const getViewportMax = () => getViewportPx() / theme.scale;\n\n  const measureSectionSize = (sectionElement: HTMLElement) => {\n    const rect = sectionElement.getBoundingClientRect();\n    const rawSize = config.axis === 'horizontal' ? rect.width : rect.height;\n    const safeAreaInset = getSafeAreaInset(sectionElement, config.safeAreaVariable);\n    return (rawSize - safeAreaInset) / theme.scale;\n  };\n\n  const applyPreview = (size: number) => {\n    const root = ctx.rootRef.current;\n    if (!root) {\n      return;\n    }\n\n    const value = rem(size);\n    root.style.setProperty(config.sizeVariable, value);\n\n    if (ctx.resizeOffsets[section]) {\n      root.style.setProperty(config.offsetVariable, value);\n    }\n\n    if (ctx.mode === 'static' && config.gridWidthVariable) {\n      root.style.setProperty(config.gridWidthVariable, value);\n    }\n  };\n\n  const clearPreview = () => {\n    const root = ctx.rootRef.current;\n    if (!root) {\n      return;\n    }\n\n    root.style.removeProperty(config.sizeVariable);\n    root.style.removeProperty(config.offsetVariable);\n    if (config.gridWidthVariable) {\n      root.style.removeProperty(config.gridWidthVariable);\n    }\n  };\n\n  const stopListeners = () => {\n    abortRef.current?.abort();\n    abortRef.current = null;\n    activePointerIdRef.current = null;\n\n    const previousBodyStyles = previousBodyStylesRef.current;\n    previousBodyStylesRef.current = null;\n    if (previousBodyStyles) {\n      restoreBodyStyleProperty('user-select', previousBodyStyles.userSelect);\n      restoreBodyStyleProperty('-webkit-user-select', previousBodyStyles.webkitUserSelect);\n      restoreBodyStyleProperty('cursor', previousBodyStyles.cursor);\n    }\n  };\n\n  const cancelResize = () => {\n    controller?.reportCollapse(\n      section,\n      getCollapseState(dragRef.current.startSize, options.collapseThreshold)\n    );\n    controller?.endResize(section, null);\n  };\n\n  const onPointerMove = (event: PointerEvent) => {\n    if (event.pointerId !== activePointerIdRef.current) {\n      return;\n    }\n\n    dragRef.current.moved = true;\n\n    const delta =\n      getResizeDelta({\n        section,\n        deltaX: event.clientX - dragRef.current.startX,\n        deltaY: event.clientY - dragRef.current.startY,\n        dir,\n      }) / theme.scale;\n\n    const rawSize = dragRef.current.startSize + delta;\n    const size = clampResizeSize({\n      size: rawSize,\n      min: options.min,\n      max: options.max,\n      viewportMax: getViewportMax(),\n    });\n\n    dragRef.current.size = size;\n    applyPreview(size);\n    handleRef.current?.setAttribute('aria-valuenow', String(Math.round(size)));\n    controller?.previewResize(section, size);\n    controller?.reportCollapse(section, getCollapseState(rawSize, options.collapseThreshold));\n  };\n\n  const onPointerUp = (event: PointerEvent) => {\n    if (event.pointerId !== activePointerIdRef.current) {\n      return;\n    }\n\n    stopListeners();\n\n    if (!dragRef.current.moved) {\n      controller?.endResize(section, null);\n      return;\n    }\n\n    controller?.endResize(section, dragRef.current.size);\n  };\n\n  const onPointerCancel = (event: PointerEvent) => {\n    if (event.pointerId !== activePointerIdRef.current) {\n      return;\n    }\n\n    stopListeners();\n    clearPreview();\n    cancelResize();\n  };\n\n  const onDragKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== 'Escape') {\n      return;\n    }\n\n    event.preventDefault();\n    stopListeners();\n    clearPreview();\n    handleRef.current?.setAttribute('aria-valuenow', String(Math.round(dragRef.current.startSize)));\n    cancelResize();\n  };\n\n  const getCurrentSize = () => {\n    const size = controller?.[section].size;\n    if (size !== undefined) {\n      return size;\n    }\n\n    const sectionElement = handleRef.current?.parentElement;\n    if (!sectionElement) {\n      return 0;\n    }\n\n    return measureSectionSize(sectionElement);\n  };\n\n  const commitKeyboardSize = (size: number) => {\n    controller?.initCollapse(\n      section,\n      getCollapseState(getCurrentSize(), options.collapseThreshold)\n    );\n    controller?.reportCollapse(section, getCollapseState(size, options.collapseThreshold));\n    controller?.endResize(\n      section,\n      clampResizeSize({\n        size,\n        min: options.min,\n        max: options.max,\n        viewportMax: getViewportMax(),\n      })\n    );\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const step = event.shiftKey ? KEYBOARD_SHIFT_STEP : KEYBOARD_STEP;\n\n    if (event.key === 'Home') {\n      event.preventDefault();\n      commitKeyboardSize(options.min ?? 0);\n      return;\n    }\n\n    if (event.key === 'End') {\n      event.preventDefault();\n      commitKeyboardSize(options.max ?? getViewportMax());\n      return;\n    }\n\n    const keyDelta = KEY_DELTAS[event.key];\n    if (!keyDelta) {\n      return;\n    }\n\n    const direction = getResizeDelta({ section, ...keyDelta, dir });\n    if (direction === 0) {\n      return;\n    }\n\n    event.preventDefault();\n    commitKeyboardSize(getCurrentSize() + direction * step);\n  };\n\n  const onDoubleClick = () => {\n    clearPreview();\n    controller?.[section].reset();\n  };\n\n  const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n    if (event.button !== 0) {\n      return;\n    }\n\n    if (abortRef.current !== null) {\n      return;\n    }\n\n    const sectionElement = handleRef.current?.parentElement;\n    if (!sectionElement) {\n      return;\n    }\n\n    const startSize = measureSectionSize(sectionElement);\n    dragRef.current = {\n      startSize,\n      startX: event.clientX,\n      startY: event.clientY,\n      size: startSize,\n      moved: false,\n    };\n    activePointerIdRef.current = event.pointerId;\n    controller?.initCollapse(section, getCollapseState(startSize, options.collapseThreshold));\n\n    const abortController = new AbortController();\n    abortRef.current = abortController;\n    const { signal } = abortController;\n\n    previousBodyStylesRef.current = {\n      userSelect: document.body.style.getPropertyValue('user-select'),\n      webkitUserSelect: document.body.style.getPropertyValue('-webkit-user-select'),\n      cursor: document.body.style.getPropertyValue('cursor'),\n    };\n    document.body.style.setProperty('user-select', 'none');\n    document.body.style.setProperty('-webkit-user-select', 'none');\n    document.body.style.setProperty(\n      'cursor',\n      config.axis === 'horizontal' ? 'col-resize' : 'row-resize'\n    );\n    controller?.startResize(section);\n\n    document.addEventListener('pointermove', onPointerMove, { signal });\n    document.addEventListener('pointerup', onPointerUp, { signal });\n    document.addEventListener('pointercancel', onPointerCancel, { signal });\n    document.addEventListener('keydown', onDragKeyDown, { signal });\n  };\n\n  useIsomorphicEffect(() => {\n    if (controller && controller.activeSection !== section) {\n      clearPreview();\n    }\n  }, [controller?.activeSection, controller?.[section].size]);\n\n  useIsomorphicEffect(() => {\n    setViewportPx(getViewportPx());\n\n    const handleWindowResize = () => setViewportPx(getViewportPx());\n    window.addEventListener('resize', handleWindowResize);\n    return () => window.removeEventListener('resize', handleWindowResize);\n  }, [config.axis]);\n\n  useIsomorphicEffect(() => {\n    if (controller?.[section].size === undefined) {\n      setMeasuredSize(getCurrentSize());\n    }\n  }, [controller?.[section].size, viewportPx]);\n\n  useIsomorphicEffect(\n    () => () => {\n      const wasDragging = abortRef.current !== null;\n      stopListeners();\n      clearPreview();\n\n      if (wasDragging) {\n        cancelResize();\n      }\n    },\n    []\n  );\n\n  if (!controller?.[section].enabled) {\n    return null;\n  }\n\n  const viewportMax = viewportPx / theme.scale;\n  const effectiveMax = Math.min(options.max ?? viewportMax, viewportMax);\n  const committedSize = controller[section].size;\n  const currentValue =\n    committedSize !== undefined && viewportPx > 0\n      ? Math.min(committedSize, viewportMax)\n      : (committedSize ?? measuredSize);\n\n  return (\n    <Box\n      ref={handleRef}\n      role=\"separator\"\n      tabIndex={0}\n      aria-label={options.label ?? LABELS[section]}\n      aria-controls={sectionId}\n      aria-orientation={config.orientation}\n      aria-valuemin={options.min ?? 0}\n      aria-valuemax={Math.round(effectiveMax)}\n      aria-valuenow={currentValue !== undefined ? Math.round(currentValue) : undefined}\n      onPointerDown={onPointerDown}\n      onKeyDown={onKeyDown}\n      onDoubleClick={onDoubleClick}\n      mod={{ section, orientation: config.orientation, active: controller[section].active }}\n      {...ctx.getStyles('resizeHandle')}\n    />\n  );\n}\n\nAppShellResizeHandle.displayName = '@mantine/core/AppShellResizeHandle';\n"],"mappings":"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"}