@mantine/core 9.6.3 → 9.7.0

package/cjs/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"assign-aside-variables.cjs","names":["isPrimitiveSize","rem","getBaseSize","isResponsiveSize","getBreakpointValue"],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-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 AssignAsideVariablesInput {\n  baseStyles: CSSVariables;\n  minMediaStyles: MediaQueryVariables;\n  maxMediaStyles: MediaQueryVariables;\n  aside: AppShellProps['aside'] | undefined;\n  theme: MantineTheme;\n  mode: 'fixed' | 'static';\n}\n\nexport function assignAsideVariables({\n  baseStyles,\n  minMediaStyles,\n  maxMediaStyles,\n  aside,\n  theme,\n  mode,\n}: AssignAsideVariablesInput) {\n  const asideWidth = aside?.width;\n  const collapsedAsideTransform = 'translateX(var(--app-shell-aside-width))';\n  const collapsedAsideTransformRtl = 'translateX(calc(var(--app-shell-aside-width) * -1))';\n\n  if (aside?.breakpoint !== undefined && !aside?.collapsed?.mobile) {\n    maxMediaStyles[aside?.breakpoint] = maxMediaStyles[aside?.breakpoint] || {};\n    if (mode === 'fixed') {\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-width'] = '100%';\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-offset'] = '0px';\n    } else {\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-width'] = '0px';\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-offset'] = '0px';\n    }\n  }\n\n  if (isPrimitiveSize(asideWidth)) {\n    const baseSize = rem(getBaseSize(asideWidth));\n    baseStyles['--app-shell-aside-width'] = baseSize;\n    baseStyles['--app-shell-aside-offset'] = baseSize;\n  }\n\n  if (isResponsiveSize(asideWidth)) {\n    if (typeof asideWidth.base !== 'undefined') {\n      baseStyles['--app-shell-aside-width'] = rem(asideWidth.base);\n      baseStyles['--app-shell-aside-offset'] = rem(asideWidth.base);\n    }\n\n    keys(asideWidth).forEach((key) => {\n      if (key !== 'base') {\n        minMediaStyles[key] = minMediaStyles[key] || {};\n        minMediaStyles[key]['--app-shell-aside-width'] = rem(asideWidth![key]);\n        minMediaStyles[key]['--app-shell-aside-offset'] = rem(asideWidth![key]);\n      }\n    });\n  }\n\n  if (aside?.breakpoint !== undefined && mode === 'static') {\n    minMediaStyles[aside.breakpoint] = minMediaStyles[aside.breakpoint] || {};\n    minMediaStyles[aside.breakpoint]['--app-shell-aside-position'] = 'sticky';\n    minMediaStyles[aside.breakpoint]['--app-shell-aside-grid-row'] = '2';\n    minMediaStyles[aside.breakpoint]['--app-shell-aside-grid-column'] = '3';\n    // Adjust main column end when aside is visible\n    minMediaStyles[aside.breakpoint]['--app-shell-main-column-end'] = '3';\n  }\n\n  if (aside?.collapsed?.desktop) {\n    const breakpointValue = aside!.breakpoint;\n    minMediaStyles[breakpointValue] = minMediaStyles[breakpointValue] || {};\n    minMediaStyles[breakpointValue]['--app-shell-aside-transform'] = collapsedAsideTransform;\n    minMediaStyles[breakpointValue]['--app-shell-aside-transform-rtl'] = collapsedAsideTransformRtl;\n    if (mode === 'fixed') {\n      minMediaStyles[breakpointValue]['--app-shell-aside-offset'] = '0px !important';\n    } else {\n      minMediaStyles[breakpointValue]['--app-shell-aside-width'] = '0px';\n      minMediaStyles[breakpointValue]['--app-shell-aside-display'] = 'none';\n      minMediaStyles[breakpointValue]['--app-shell-main-column-end'] = '-1';\n    }\n    minMediaStyles[breakpointValue]['--app-shell-aside-scroll-locked-visibility'] = 'hidden';\n  }\n\n  if (aside?.collapsed?.mobile) {\n    const breakpointValue = getBreakpointValue(aside!.breakpoint, theme.breakpoints) - 0.1;\n    maxMediaStyles[breakpointValue] = maxMediaStyles[breakpointValue] || {};\n    if (mode === 'fixed') {\n      maxMediaStyles[breakpointValue]['--app-shell-aside-width'] = '100%';\n      maxMediaStyles[breakpointValue]['--app-shell-aside-offset'] = '0px';\n    } else {\n      maxMediaStyles[breakpointValue]['--app-shell-aside-width'] = '0px';\n    }\n    maxMediaStyles[breakpointValue]['--app-shell-aside-transform'] = collapsedAsideTransform;\n    maxMediaStyles[breakpointValue]['--app-shell-aside-transform-rtl'] = collapsedAsideTransformRtl;\n    maxMediaStyles[breakpointValue]['--app-shell-aside-scroll-locked-visibility'] = 'hidden';\n  }\n}\n"],"mappings":";;;;;;;;AAgBA,SAAgB,qBAAqB,EACnC,YACA,gBACA,gBACA,OACA,OACA,QAC4B;CAC5B,MAAM,aAAa,OAAO;CAC1B,MAAM,0BAA0B;CAChC,MAAM,6BAA6B;CAEnC,IAAI,OAAO,eAAe,KAAA,KAAa,CAAC,OAAO,WAAW,QAAQ;EAChE,eAAe,OAAO,cAAc,eAAe,OAAO,eAAe,CAAC;EAC1E,IAAI,SAAS,SAAS;GACpB,eAAe,OAAO,WAAW,CAAC,6BAA6B;GAC/D,eAAe,OAAO,WAAW,CAAC,8BAA8B;EAClE,OAAO;GACL,eAAe,OAAO,WAAW,CAAC,6BAA6B;GAC/D,eAAe,OAAO,WAAW,CAAC,8BAA8B;EAClE;CACF;CAEA,IAAIA,0BAAAA,gBAAgB,UAAU,GAAG;EAC/B,MAAM,WAAWC,YAAAA,IAAIC,sBAAAA,YAAY,UAAU,CAAC;EAC5C,WAAW,6BAA6B;EACxC,WAAW,8BAA8B;CAC3C;CAEA,IAAIC,2BAAAA,iBAAiB,UAAU,GAAG;EAChC,IAAI,OAAO,WAAW,SAAS,aAAa;GAC1C,WAAW,6BAA6BF,YAAAA,IAAI,WAAW,IAAI;GAC3D,WAAW,8BAA8BA,YAAAA,IAAI,WAAW,IAAI;EAC9D;EAEA,aAAA,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;GAChC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,IAAI,CAAC,6BAA6BA,YAAAA,IAAI,WAAY,IAAI;IACrE,eAAe,IAAI,CAAC,8BAA8BA,YAAAA,IAAI,WAAY,IAAI;GACxE;EACF,CAAC;CACH;CAEA,IAAI,OAAO,eAAe,KAAA,KAAa,SAAS,UAAU;EACxD,eAAe,MAAM,cAAc,eAAe,MAAM,eAAe,CAAC;EACxE,eAAe,MAAM,WAAW,CAAC,gCAAgC;EACjE,eAAe,MAAM,WAAW,CAAC,gCAAgC;EACjE,eAAe,MAAM,WAAW,CAAC,mCAAmC;EAEpE,eAAe,MAAM,WAAW,CAAC,iCAAiC;CACpE;CAEA,IAAI,OAAO,WAAW,SAAS;EAC7B,MAAM,kBAAkB,MAAO;EAC/B,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,gBAAgB,CAAC,iCAAiC;EACjE,eAAe,gBAAgB,CAAC,qCAAqC;EACrE,IAAI,SAAS,SACX,eAAe,gBAAgB,CAAC,8BAA8B;OACzD;GACL,eAAe,gBAAgB,CAAC,6BAA6B;GAC7D,eAAe,gBAAgB,CAAC,+BAA+B;GAC/D,eAAe,gBAAgB,CAAC,iCAAiC;EACnE;EACA,eAAe,gBAAgB,CAAC,gDAAgD;CAClF;CAEA,IAAI,OAAO,WAAW,QAAQ;EAC5B,MAAM,kBAAkBG,6BAAAA,mBAAmB,MAAO,YAAY,MAAM,WAAW,IAAI;EACnF,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,IAAI,SAAS,SAAS;GACpB,eAAe,gBAAgB,CAAC,6BAA6B;GAC7D,eAAe,gBAAgB,CAAC,8BAA8B;EAChE,OACE,eAAe,gBAAgB,CAAC,6BAA6B;EAE/D,eAAe,gBAAgB,CAAC,iCAAiC;EACjE,eAAe,gBAAgB,CAAC,qCAAqC;EACrE,eAAe,gBAAgB,CAAC,gDAAgD;CAClF;AACF"}
+{"version":3,"file":"assign-aside-variables.cjs","names":["getResizedValue","isPrimitiveSize","rem","getBaseSize","isResponsiveSize","getBreakpointValue"],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-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 AssignAsideVariablesInput {\n  baseStyles: CSSVariables;\n  minMediaStyles: MediaQueryVariables;\n  maxMediaStyles: MediaQueryVariables;\n  aside: AppShellProps['aside'] | undefined;\n  theme: MantineTheme;\n  mode: 'fixed' | 'static';\n  resizedSize?: number;\n  resizable?: boolean;\n}\n\nexport function assignAsideVariables({\n  baseStyles,\n  minMediaStyles,\n  maxMediaStyles,\n  aside,\n  theme,\n  mode,\n  resizedSize,\n  resizable,\n}: AssignAsideVariablesInput) {\n  const asideWidth = aside?.width;\n  const collapsedAsideTransform = 'translateX(var(--app-shell-aside-width))';\n  const collapsedAsideTransformRtl = 'translateX(calc(var(--app-shell-aside-width) * -1))';\n\n  if (aside?.breakpoint !== undefined && !aside?.collapsed?.mobile) {\n    maxMediaStyles[aside?.breakpoint] = maxMediaStyles[aside?.breakpoint] || {};\n    if (mode === 'fixed') {\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-width'] = '100%';\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-offset'] = '0px';\n    } else {\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-width'] = '0px';\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-offset'] = '0px';\n    }\n    if (resizable) {\n      maxMediaStyles[aside.breakpoint]['--app-shell-aside-resize-handle-display'] = 'none';\n    }\n  }\n\n  if (resizedSize !== undefined) {\n    const resizedValue = getResizedValue(resizedSize, 'horizontal');\n    baseStyles['--app-shell-aside-width'] = resizedValue;\n    baseStyles['--app-shell-aside-offset'] = resizedValue;\n    if (mode === 'static') {\n      baseStyles['--app-shell-aside-grid-width'] = resizedValue;\n    }\n  } else {\n    if (isPrimitiveSize(asideWidth)) {\n      const baseSize = rem(getBaseSize(asideWidth));\n      baseStyles['--app-shell-aside-width'] = baseSize;\n      baseStyles['--app-shell-aside-offset'] = baseSize;\n    }\n\n    if (isResponsiveSize(asideWidth)) {\n      if (typeof asideWidth.base !== 'undefined') {\n        baseStyles['--app-shell-aside-width'] = rem(asideWidth.base);\n        baseStyles['--app-shell-aside-offset'] = rem(asideWidth.base);\n      }\n\n      keys(asideWidth).forEach((key) => {\n        if (key !== 'base') {\n          minMediaStyles[key] = minMediaStyles[key] || {};\n          minMediaStyles[key]['--app-shell-aside-width'] = rem(asideWidth![key]);\n          minMediaStyles[key]['--app-shell-aside-offset'] = rem(asideWidth![key]);\n        }\n      });\n    }\n  }\n\n  if (aside?.breakpoint !== undefined && mode === 'static') {\n    minMediaStyles[aside.breakpoint] = minMediaStyles[aside.breakpoint] || {};\n    minMediaStyles[aside.breakpoint]['--app-shell-aside-position'] = 'sticky';\n    minMediaStyles[aside.breakpoint]['--app-shell-aside-grid-row'] = '2';\n    minMediaStyles[aside.breakpoint]['--app-shell-aside-grid-column'] = '3';\n    // Adjust main column end when aside is visible\n    minMediaStyles[aside.breakpoint]['--app-shell-main-column-end'] = '3';\n  }\n\n  if (aside?.collapsed?.desktop) {\n    const breakpointValue = aside!.breakpoint;\n    minMediaStyles[breakpointValue] = minMediaStyles[breakpointValue] || {};\n    minMediaStyles[breakpointValue]['--app-shell-aside-transform'] = collapsedAsideTransform;\n    minMediaStyles[breakpointValue]['--app-shell-aside-transform-rtl'] = collapsedAsideTransformRtl;\n    if (mode === 'fixed') {\n      minMediaStyles[breakpointValue]['--app-shell-aside-offset'] = '0px !important';\n    } else {\n      minMediaStyles[breakpointValue]['--app-shell-aside-width'] = '0px';\n      minMediaStyles[breakpointValue]['--app-shell-aside-display'] = 'none';\n      minMediaStyles[breakpointValue]['--app-shell-main-column-end'] = '-1';\n    }\n    minMediaStyles[breakpointValue]['--app-shell-aside-scroll-locked-visibility'] = 'hidden';\n    if (resizable) {\n      minMediaStyles[breakpointValue]['--app-shell-aside-resize-handle-display'] = 'none';\n    }\n  }\n\n  if (aside?.collapsed?.mobile) {\n    const breakpointValue = getBreakpointValue(aside!.breakpoint, theme.breakpoints) - 0.1;\n    maxMediaStyles[breakpointValue] = maxMediaStyles[breakpointValue] || {};\n    if (mode === 'fixed') {\n      maxMediaStyles[breakpointValue]['--app-shell-aside-width'] = '100%';\n      maxMediaStyles[breakpointValue]['--app-shell-aside-offset'] = '0px';\n    } else {\n      maxMediaStyles[breakpointValue]['--app-shell-aside-width'] = '0px';\n    }\n    maxMediaStyles[breakpointValue]['--app-shell-aside-transform'] = collapsedAsideTransform;\n    maxMediaStyles[breakpointValue]['--app-shell-aside-transform-rtl'] = collapsedAsideTransformRtl;\n    maxMediaStyles[breakpointValue]['--app-shell-aside-scroll-locked-visibility'] = 'hidden';\n    if (resizable) {\n      maxMediaStyles[breakpointValue]['--app-shell-aside-resize-handle-display'] = 'none';\n    }\n  }\n}\n"],"mappings":"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"}

package/cjs/components/AppShell/AppShellMediaStyles/assign-footer-variables/assign-footer-variables.cjs

@@ -2,10 +2,11 @@
 const require_keys = require("../../../../core/utils/keys/keys.cjs");
 const require_rem = require("../../../../core/utils/units-converters/rem.cjs");
 const require_get_base_size = require("../get-base-size/get-base-size.cjs");
+const require_get_resized_value = require("../get-resized-value/get-resized-value.cjs");
 const require_is_primitive_size = require("../is-primitive-size/is-primitive-size.cjs");
 const require_is_responsive_size = require("../is-responsive-size/is-responsive-size.cjs");
 //#region packages/@mantine/core/src/components/AppShell/AppShellMediaStyles/assign-footer-variables/assign-footer-variables.ts
-function assignFooterVariables({ baseStyles, minMediaStyles, footer, mode }) {
+function assignFooterVariables({ baseStyles, minMediaStyles, footer, mode, resizedSize, resizable }) {
 	const footerHeight = footer?.height;
 	const collapsedFooterTransform = "translateY(var(--app-shell-footer-height))";
 	const shouldOffset = mode === "static" ? true : footer?.offset ?? true;
@@ -14,27 +15,34 @@ function assignFooterVariables({ baseStyles, minMediaStyles, footer, mode }) {
 		baseStyles["--app-shell-footer-grid-column"] = "1 / -1";
 		baseStyles["--app-shell-footer-grid-row"] = "3";
 	}
-	if (require_is_primitive_size.isPrimitiveSize(footerHeight)) {
-		const baseSize = require_rem.rem(require_get_base_size.getBaseSize(footerHeight));
-		baseStyles["--app-shell-footer-height"] = baseSize;
-		if (shouldOffset) baseStyles["--app-shell-footer-offset"] = baseSize;
-	}
-	if (require_is_responsive_size.isResponsiveSize(footerHeight)) {
-		if (typeof footerHeight.base !== "undefined") {
-			baseStyles["--app-shell-footer-height"] = require_rem.rem(footerHeight.base);
-			if (shouldOffset) baseStyles["--app-shell-footer-offset"] = require_rem.rem(footerHeight.base);
+	if (resizedSize !== void 0) {
+		const resizedValue = require_get_resized_value.getResizedValue(resizedSize, "vertical");
+		baseStyles["--app-shell-footer-height"] = resizedValue;
+		if (shouldOffset) baseStyles["--app-shell-footer-offset"] = resizedValue;
+	} else {
+		if (require_is_primitive_size.isPrimitiveSize(footerHeight)) {
+			const baseSize = require_rem.rem(require_get_base_size.getBaseSize(footerHeight));
+			baseStyles["--app-shell-footer-height"] = baseSize;
+			if (shouldOffset) baseStyles["--app-shell-footer-offset"] = baseSize;
 		}
-		require_keys.keys(footerHeight).forEach((key) => {
-			if (key !== "base") {
-				minMediaStyles[key] = minMediaStyles[key] || {};
-				minMediaStyles[key]["--app-shell-footer-height"] = require_rem.rem(footerHeight[key]);
-				if (shouldOffset) minMediaStyles[key]["--app-shell-footer-offset"] = require_rem.rem(footerHeight[key]);
+		if (require_is_responsive_size.isResponsiveSize(footerHeight)) {
+			if (typeof footerHeight.base !== "undefined") {
+				baseStyles["--app-shell-footer-height"] = require_rem.rem(footerHeight.base);
+				if (shouldOffset) baseStyles["--app-shell-footer-offset"] = require_rem.rem(footerHeight.base);
 			}
-		});
+			require_keys.keys(footerHeight).forEach((key) => {
+				if (key !== "base") {
+					minMediaStyles[key] = minMediaStyles[key] || {};
+					minMediaStyles[key]["--app-shell-footer-height"] = require_rem.rem(footerHeight[key]);
+					if (shouldOffset) minMediaStyles[key]["--app-shell-footer-offset"] = require_rem.rem(footerHeight[key]);
+				}
+			});
+		}
 	}
 	if (footer?.collapsed) {
 		baseStyles["--app-shell-footer-transform"] = collapsedFooterTransform;
 		if (mode === "fixed") baseStyles["--app-shell-footer-offset"] = "0px !important";
+		if (resizable) baseStyles["--app-shell-footer-resize-handle-display"] = "none";
 	}
 }
 //#endregion

package/cjs/components/AppShell/AppShellMediaStyles/assign-footer-variables/assign-footer-variables.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"assign-footer-variables.cjs","names":["isPrimitiveSize","rem","getBaseSize","isResponsiveSize"],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-footer-variables/assign-footer-variables.ts"],"sourcesContent":["import { keys, 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 AssignFooterVariablesInput {\n  baseStyles: CSSVariables;\n  minMediaStyles: MediaQueryVariables;\n  footer: AppShellProps['footer'] | undefined;\n  mode: 'fixed' | 'static';\n}\n\nexport function assignFooterVariables({\n  baseStyles,\n  minMediaStyles,\n  footer,\n  mode,\n}: AssignFooterVariablesInput) {\n  const footerHeight = footer?.height;\n  const collapsedFooterTransform = 'translateY(var(--app-shell-footer-height))';\n  const shouldOffset = mode === 'static' ? true : (footer?.offset ?? true);\n\n  if (mode === 'static' && footer) {\n    baseStyles['--app-shell-footer-position'] = 'sticky';\n    baseStyles['--app-shell-footer-grid-column'] = '1 / -1';\n    baseStyles['--app-shell-footer-grid-row'] = '3';\n  }\n\n  if (isPrimitiveSize(footerHeight)) {\n    const baseSize = rem(getBaseSize(footerHeight));\n    baseStyles['--app-shell-footer-height'] = baseSize;\n    if (shouldOffset) {\n      baseStyles['--app-shell-footer-offset'] = baseSize;\n    }\n  }\n\n  if (isResponsiveSize(footerHeight)) {\n    if (typeof footerHeight.base !== 'undefined') {\n      baseStyles['--app-shell-footer-height'] = rem(footerHeight.base);\n\n      if (shouldOffset) {\n        baseStyles['--app-shell-footer-offset'] = rem(footerHeight.base);\n      }\n    }\n\n    keys(footerHeight).forEach((key) => {\n      if (key !== 'base') {\n        minMediaStyles[key] = minMediaStyles[key] || {};\n        minMediaStyles[key]['--app-shell-footer-height'] = rem(footerHeight[key]);\n\n        if (shouldOffset) {\n          minMediaStyles[key]['--app-shell-footer-offset'] = rem(footerHeight[key]);\n        }\n      }\n    });\n  }\n\n  if (footer?.collapsed) {\n    baseStyles['--app-shell-footer-transform'] = collapsedFooterTransform;\n    if (mode === 'fixed') {\n      baseStyles['--app-shell-footer-offset'] = '0px !important';\n    }\n  }\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,sBAAsB,EACpC,YACA,gBACA,QACA,QAC6B;CAC7B,MAAM,eAAe,QAAQ;CAC7B,MAAM,2BAA2B;CACjC,MAAM,eAAe,SAAS,WAAW,OAAQ,QAAQ,UAAU;CAEnE,IAAI,SAAS,YAAY,QAAQ;EAC/B,WAAW,iCAAiC;EAC5C,WAAW,oCAAoC;EAC/C,WAAW,iCAAiC;CAC9C;CAEA,IAAIA,0BAAAA,gBAAgB,YAAY,GAAG;EACjC,MAAM,WAAWC,YAAAA,IAAIC,sBAAAA,YAAY,YAAY,CAAC;EAC9C,WAAW,+BAA+B;EAC1C,IAAI,cACF,WAAW,+BAA+B;CAE9C;CAEA,IAAIC,2BAAAA,iBAAiB,YAAY,GAAG;EAClC,IAAI,OAAO,aAAa,SAAS,aAAa;GAC5C,WAAW,+BAA+BF,YAAAA,IAAI,aAAa,IAAI;GAE/D,IAAI,cACF,WAAW,+BAA+BA,YAAAA,IAAI,aAAa,IAAI;EAEnE;EAEA,aAAA,KAAK,YAAY,CAAC,CAAC,SAAS,QAAQ;GAClC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,IAAI,CAAC,+BAA+BA,YAAAA,IAAI,aAAa,IAAI;IAExE,IAAI,cACF,eAAe,IAAI,CAAC,+BAA+BA,YAAAA,IAAI,aAAa,IAAI;GAE5E;EACF,CAAC;CACH;CAEA,IAAI,QAAQ,WAAW;EACrB,WAAW,kCAAkC;EAC7C,IAAI,SAAS,SACX,WAAW,+BAA+B;CAE9C;AACF"}
+{"version":3,"file":"assign-footer-variables.cjs","names":["getResizedValue","isPrimitiveSize","rem","getBaseSize","isResponsiveSize"],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-footer-variables/assign-footer-variables.ts"],"sourcesContent":["import { keys, 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 AssignFooterVariablesInput {\n  baseStyles: CSSVariables;\n  minMediaStyles: MediaQueryVariables;\n  footer: AppShellProps['footer'] | undefined;\n  mode: 'fixed' | 'static';\n  resizedSize?: number;\n  resizable?: boolean;\n}\n\nexport function assignFooterVariables({\n  baseStyles,\n  minMediaStyles,\n  footer,\n  mode,\n  resizedSize,\n  resizable,\n}: AssignFooterVariablesInput) {\n  const footerHeight = footer?.height;\n  const collapsedFooterTransform = 'translateY(var(--app-shell-footer-height))';\n  const shouldOffset = mode === 'static' ? true : (footer?.offset ?? true);\n\n  if (mode === 'static' && footer) {\n    baseStyles['--app-shell-footer-position'] = 'sticky';\n    baseStyles['--app-shell-footer-grid-column'] = '1 / -1';\n    baseStyles['--app-shell-footer-grid-row'] = '3';\n  }\n\n  if (resizedSize !== undefined) {\n    const resizedValue = getResizedValue(resizedSize, 'vertical');\n    baseStyles['--app-shell-footer-height'] = resizedValue;\n    if (shouldOffset) {\n      baseStyles['--app-shell-footer-offset'] = resizedValue;\n    }\n  } else {\n    if (isPrimitiveSize(footerHeight)) {\n      const baseSize = rem(getBaseSize(footerHeight));\n      baseStyles['--app-shell-footer-height'] = baseSize;\n      if (shouldOffset) {\n        baseStyles['--app-shell-footer-offset'] = baseSize;\n      }\n    }\n\n    if (isResponsiveSize(footerHeight)) {\n      if (typeof footerHeight.base !== 'undefined') {\n        baseStyles['--app-shell-footer-height'] = rem(footerHeight.base);\n\n        if (shouldOffset) {\n          baseStyles['--app-shell-footer-offset'] = rem(footerHeight.base);\n        }\n      }\n\n      keys(footerHeight).forEach((key) => {\n        if (key !== 'base') {\n          minMediaStyles[key] = minMediaStyles[key] || {};\n          minMediaStyles[key]['--app-shell-footer-height'] = rem(footerHeight[key]);\n\n          if (shouldOffset) {\n            minMediaStyles[key]['--app-shell-footer-offset'] = rem(footerHeight[key]);\n          }\n        }\n      });\n    }\n  }\n\n  if (footer?.collapsed) {\n    baseStyles['--app-shell-footer-transform'] = collapsedFooterTransform;\n    if (mode === 'fixed') {\n      baseStyles['--app-shell-footer-offset'] = '0px !important';\n    }\n    if (resizable) {\n      baseStyles['--app-shell-footer-resize-handle-display'] = 'none';\n    }\n  }\n}\n"],"mappings":";;;;;;;;AAiBA,SAAgB,sBAAsB,EACpC,YACA,gBACA,QACA,MACA,aACA,aAC6B;CAC7B,MAAM,eAAe,QAAQ;CAC7B,MAAM,2BAA2B;CACjC,MAAM,eAAe,SAAS,WAAW,OAAQ,QAAQ,UAAU;CAEnE,IAAI,SAAS,YAAY,QAAQ;EAC/B,WAAW,iCAAiC;EAC5C,WAAW,oCAAoC;EAC/C,WAAW,iCAAiC;CAC9C;CAEA,IAAI,gBAAgB,KAAA,GAAW;EAC7B,MAAM,eAAeA,0BAAAA,gBAAgB,aAAa,UAAU;EAC5D,WAAW,+BAA+B;EAC1C,IAAI,cACF,WAAW,+BAA+B;CAE9C,OAAO;EACL,IAAIC,0BAAAA,gBAAgB,YAAY,GAAG;GACjC,MAAM,WAAWC,YAAAA,IAAIC,sBAAAA,YAAY,YAAY,CAAC;GAC9C,WAAW,+BAA+B;GAC1C,IAAI,cACF,WAAW,+BAA+B;EAE9C;EAEA,IAAIC,2BAAAA,iBAAiB,YAAY,GAAG;GAClC,IAAI,OAAO,aAAa,SAAS,aAAa;IAC5C,WAAW,+BAA+BF,YAAAA,IAAI,aAAa,IAAI;IAE/D,IAAI,cACF,WAAW,+BAA+BA,YAAAA,IAAI,aAAa,IAAI;GAEnE;GAEA,aAAA,KAAK,YAAY,CAAC,CAAC,SAAS,QAAQ;IAClC,IAAI,QAAQ,QAAQ;KAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;KAC9C,eAAe,IAAI,CAAC,+BAA+BA,YAAAA,IAAI,aAAa,IAAI;KAExE,IAAI,cACF,eAAe,IAAI,CAAC,+BAA+BA,YAAAA,IAAI,aAAa,IAAI;IAE5E;GACF,CAAC;EACH;CACF;CAEA,IAAI,QAAQ,WAAW;EACrB,WAAW,kCAAkC;EAC7C,IAAI,SAAS,SACX,WAAW,+BAA+B;EAE5C,IAAI,WACF,WAAW,8CAA8C;CAE7D;AACF"}

package/cjs/components/AppShell/AppShellMediaStyles/assign-header-variables/assign-header-variables.cjs

@@ -2,10 +2,11 @@
 const require_keys = require("../../../../core/utils/keys/keys.cjs");
 const require_rem = require("../../../../core/utils/units-converters/rem.cjs");
 const require_get_base_size = require("../get-base-size/get-base-size.cjs");
+const require_get_resized_value = require("../get-resized-value/get-resized-value.cjs");
 const require_is_primitive_size = require("../is-primitive-size/is-primitive-size.cjs");
 const require_is_responsive_size = require("../is-responsive-size/is-responsive-size.cjs");
 //#region packages/@mantine/core/src/components/AppShell/AppShellMediaStyles/assign-header-variables/assign-header-variables.ts
-function assignHeaderVariables({ baseStyles, minMediaStyles, header, mode }) {
+function assignHeaderVariables({ baseStyles, minMediaStyles, header, mode, resizedSize, resizable }) {
 	const headerHeight = header?.height;
 	const collapsedHeaderTransform = "translateY(calc(var(--app-shell-header-height) * -1))";
 	const shouldOffset = mode === "static" ? true : header?.offset ?? true;
@@ -14,27 +15,34 @@ function assignHeaderVariables({ baseStyles, minMediaStyles, header, mode }) {
 		baseStyles["--app-shell-header-grid-column"] = "1 / -1";
 		baseStyles["--app-shell-header-grid-row"] = "1";
 	}
-	if (require_is_primitive_size.isPrimitiveSize(headerHeight)) {
-		const baseSize = require_rem.rem(require_get_base_size.getBaseSize(headerHeight));
-		baseStyles["--app-shell-header-height"] = baseSize;
-		if (shouldOffset) baseStyles["--app-shell-header-offset"] = baseSize;
-	}
-	if (require_is_responsive_size.isResponsiveSize(headerHeight)) {
-		if (typeof headerHeight.base !== "undefined") {
-			baseStyles["--app-shell-header-height"] = require_rem.rem(headerHeight.base);
-			if (shouldOffset) baseStyles["--app-shell-header-offset"] = require_rem.rem(headerHeight.base);
+	if (resizedSize !== void 0) {
+		const resizedValue = require_get_resized_value.getResizedValue(resizedSize, "vertical");
+		baseStyles["--app-shell-header-height"] = resizedValue;
+		if (shouldOffset) baseStyles["--app-shell-header-offset"] = resizedValue;
+	} else {
+		if (require_is_primitive_size.isPrimitiveSize(headerHeight)) {
+			const baseSize = require_rem.rem(require_get_base_size.getBaseSize(headerHeight));
+			baseStyles["--app-shell-header-height"] = baseSize;
+			if (shouldOffset) baseStyles["--app-shell-header-offset"] = baseSize;
 		}
-		require_keys.keys(headerHeight).forEach((key) => {
-			if (key !== "base") {
-				minMediaStyles[key] = minMediaStyles[key] || {};
-				minMediaStyles[key]["--app-shell-header-height"] = require_rem.rem(headerHeight[key]);
-				if (shouldOffset) minMediaStyles[key]["--app-shell-header-offset"] = require_rem.rem(headerHeight[key]);
+		if (require_is_responsive_size.isResponsiveSize(headerHeight)) {
+			if (typeof headerHeight.base !== "undefined") {
+				baseStyles["--app-shell-header-height"] = require_rem.rem(headerHeight.base);
+				if (shouldOffset) baseStyles["--app-shell-header-offset"] = require_rem.rem(headerHeight.base);
 			}
-		});
+			require_keys.keys(headerHeight).forEach((key) => {
+				if (key !== "base") {
+					minMediaStyles[key] = minMediaStyles[key] || {};
+					minMediaStyles[key]["--app-shell-header-height"] = require_rem.rem(headerHeight[key]);
+					if (shouldOffset) minMediaStyles[key]["--app-shell-header-offset"] = require_rem.rem(headerHeight[key]);
+				}
+			});
+		}
 	}
 	if (header?.collapsed) {
 		baseStyles["--app-shell-header-transform"] = collapsedHeaderTransform;
 		if (mode === "fixed") baseStyles["--app-shell-header-offset"] = "0px !important";
+		if (resizable) baseStyles["--app-shell-header-resize-handle-display"] = "none";
 	}
 }
 //#endregion

package/cjs/components/AppShell/AppShellMediaStyles/assign-header-variables/assign-header-variables.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"assign-header-variables.cjs","names":["isPrimitiveSize","rem","getBaseSize","isResponsiveSize"],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-header-variables/assign-header-variables.ts"],"sourcesContent":["import { keys, 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 AssignHeaderVariablesInput {\n  baseStyles: CSSVariables;\n  minMediaStyles: MediaQueryVariables;\n  header: AppShellProps['header'] | undefined;\n  mode: 'fixed' | 'static';\n}\n\nexport function assignHeaderVariables({\n  baseStyles,\n  minMediaStyles,\n  header,\n  mode,\n}: AssignHeaderVariablesInput) {\n  const headerHeight = header?.height;\n  const collapsedHeaderTransform = 'translateY(calc(var(--app-shell-header-height) * -1))';\n  const shouldOffset = mode === 'static' ? true : (header?.offset ?? true);\n\n  if (mode === 'static' && header) {\n    baseStyles['--app-shell-header-position'] = 'sticky';\n    baseStyles['--app-shell-header-grid-column'] = '1 / -1';\n    baseStyles['--app-shell-header-grid-row'] = '1';\n  }\n\n  if (isPrimitiveSize(headerHeight)) {\n    const baseSize = rem(getBaseSize(headerHeight));\n    baseStyles['--app-shell-header-height'] = baseSize;\n    if (shouldOffset) {\n      baseStyles['--app-shell-header-offset'] = baseSize;\n    }\n  }\n\n  if (isResponsiveSize(headerHeight)) {\n    if (typeof headerHeight.base !== 'undefined') {\n      baseStyles['--app-shell-header-height'] = rem(headerHeight.base);\n\n      if (shouldOffset) {\n        baseStyles['--app-shell-header-offset'] = rem(headerHeight.base);\n      }\n    }\n\n    keys(headerHeight).forEach((key) => {\n      if (key !== 'base') {\n        minMediaStyles[key] = minMediaStyles[key] || {};\n        minMediaStyles[key]['--app-shell-header-height'] = rem(headerHeight[key]);\n\n        if (shouldOffset) {\n          minMediaStyles[key]['--app-shell-header-offset'] = rem(headerHeight[key]);\n        }\n      }\n    });\n  }\n\n  if (header?.collapsed) {\n    baseStyles['--app-shell-header-transform'] = collapsedHeaderTransform;\n    if (mode === 'fixed') {\n      baseStyles['--app-shell-header-offset'] = '0px !important';\n    }\n  }\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,sBAAsB,EACpC,YACA,gBACA,QACA,QAC6B;CAC7B,MAAM,eAAe,QAAQ;CAC7B,MAAM,2BAA2B;CACjC,MAAM,eAAe,SAAS,WAAW,OAAQ,QAAQ,UAAU;CAEnE,IAAI,SAAS,YAAY,QAAQ;EAC/B,WAAW,iCAAiC;EAC5C,WAAW,oCAAoC;EAC/C,WAAW,iCAAiC;CAC9C;CAEA,IAAIA,0BAAAA,gBAAgB,YAAY,GAAG;EACjC,MAAM,WAAWC,YAAAA,IAAIC,sBAAAA,YAAY,YAAY,CAAC;EAC9C,WAAW,+BAA+B;EAC1C,IAAI,cACF,WAAW,+BAA+B;CAE9C;CAEA,IAAIC,2BAAAA,iBAAiB,YAAY,GAAG;EAClC,IAAI,OAAO,aAAa,SAAS,aAAa;GAC5C,WAAW,+BAA+BF,YAAAA,IAAI,aAAa,IAAI;GAE/D,IAAI,cACF,WAAW,+BAA+BA,YAAAA,IAAI,aAAa,IAAI;EAEnE;EAEA,aAAA,KAAK,YAAY,CAAC,CAAC,SAAS,QAAQ;GAClC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,IAAI,CAAC,+BAA+BA,YAAAA,IAAI,aAAa,IAAI;IAExE,IAAI,cACF,eAAe,IAAI,CAAC,+BAA+BA,YAAAA,IAAI,aAAa,IAAI;GAE5E;EACF,CAAC;CACH;CAEA,IAAI,QAAQ,WAAW;EACrB,WAAW,kCAAkC;EAC7C,IAAI,SAAS,SACX,WAAW,+BAA+B;CAE9C;AACF"}
+{"version":3,"file":"assign-header-variables.cjs","names":["getResizedValue","isPrimitiveSize","rem","getBaseSize","isResponsiveSize"],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-header-variables/assign-header-variables.ts"],"sourcesContent":["import { keys, 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 AssignHeaderVariablesInput {\n  baseStyles: CSSVariables;\n  minMediaStyles: MediaQueryVariables;\n  header: AppShellProps['header'] | undefined;\n  mode: 'fixed' | 'static';\n  resizedSize?: number;\n  resizable?: boolean;\n}\n\nexport function assignHeaderVariables({\n  baseStyles,\n  minMediaStyles,\n  header,\n  mode,\n  resizedSize,\n  resizable,\n}: AssignHeaderVariablesInput) {\n  const headerHeight = header?.height;\n  const collapsedHeaderTransform = 'translateY(calc(var(--app-shell-header-height) * -1))';\n  const shouldOffset = mode === 'static' ? true : (header?.offset ?? true);\n\n  if (mode === 'static' && header) {\n    baseStyles['--app-shell-header-position'] = 'sticky';\n    baseStyles['--app-shell-header-grid-column'] = '1 / -1';\n    baseStyles['--app-shell-header-grid-row'] = '1';\n  }\n\n  if (resizedSize !== undefined) {\n    const resizedValue = getResizedValue(resizedSize, 'vertical');\n    baseStyles['--app-shell-header-height'] = resizedValue;\n    if (shouldOffset) {\n      baseStyles['--app-shell-header-offset'] = resizedValue;\n    }\n  } else {\n    if (isPrimitiveSize(headerHeight)) {\n      const baseSize = rem(getBaseSize(headerHeight));\n      baseStyles['--app-shell-header-height'] = baseSize;\n      if (shouldOffset) {\n        baseStyles['--app-shell-header-offset'] = baseSize;\n      }\n    }\n\n    if (isResponsiveSize(headerHeight)) {\n      if (typeof headerHeight.base !== 'undefined') {\n        baseStyles['--app-shell-header-height'] = rem(headerHeight.base);\n\n        if (shouldOffset) {\n          baseStyles['--app-shell-header-offset'] = rem(headerHeight.base);\n        }\n      }\n\n      keys(headerHeight).forEach((key) => {\n        if (key !== 'base') {\n          minMediaStyles[key] = minMediaStyles[key] || {};\n          minMediaStyles[key]['--app-shell-header-height'] = rem(headerHeight[key]);\n\n          if (shouldOffset) {\n            minMediaStyles[key]['--app-shell-header-offset'] = rem(headerHeight[key]);\n          }\n        }\n      });\n    }\n  }\n\n  if (header?.collapsed) {\n    baseStyles['--app-shell-header-transform'] = collapsedHeaderTransform;\n    if (mode === 'fixed') {\n      baseStyles['--app-shell-header-offset'] = '0px !important';\n    }\n    if (resizable) {\n      baseStyles['--app-shell-header-resize-handle-display'] = 'none';\n    }\n  }\n}\n"],"mappings":";;;;;;;;AAiBA,SAAgB,sBAAsB,EACpC,YACA,gBACA,QACA,MACA,aACA,aAC6B;CAC7B,MAAM,eAAe,QAAQ;CAC7B,MAAM,2BAA2B;CACjC,MAAM,eAAe,SAAS,WAAW,OAAQ,QAAQ,UAAU;CAEnE,IAAI,SAAS,YAAY,QAAQ;EAC/B,WAAW,iCAAiC;EAC5C,WAAW,oCAAoC;EAC/C,WAAW,iCAAiC;CAC9C;CAEA,IAAI,gBAAgB,KAAA,GAAW;EAC7B,MAAM,eAAeA,0BAAAA,gBAAgB,aAAa,UAAU;EAC5D,WAAW,+BAA+B;EAC1C,IAAI,cACF,WAAW,+BAA+B;CAE9C,OAAO;EACL,IAAIC,0BAAAA,gBAAgB,YAAY,GAAG;GACjC,MAAM,WAAWC,YAAAA,IAAIC,sBAAAA,YAAY,YAAY,CAAC;GAC9C,WAAW,+BAA+B;GAC1C,IAAI,cACF,WAAW,+BAA+B;EAE9C;EAEA,IAAIC,2BAAAA,iBAAiB,YAAY,GAAG;GAClC,IAAI,OAAO,aAAa,SAAS,aAAa;IAC5C,WAAW,+BAA+BF,YAAAA,IAAI,aAAa,IAAI;IAE/D,IAAI,cACF,WAAW,+BAA+BA,YAAAA,IAAI,aAAa,IAAI;GAEnE;GAEA,aAAA,KAAK,YAAY,CAAC,CAAC,SAAS,QAAQ;IAClC,IAAI,QAAQ,QAAQ;KAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;KAC9C,eAAe,IAAI,CAAC,+BAA+BA,YAAAA,IAAI,aAAa,IAAI;KAExE,IAAI,cACF,eAAe,IAAI,CAAC,+BAA+BA,YAAAA,IAAI,aAAa,IAAI;IAE5E;GACF,CAAC;EACH;CACF;CAEA,IAAI,QAAQ,WAAW;EACrB,WAAW,kCAAkC;EAC7C,IAAI,SAAS,SACX,WAAW,+BAA+B;EAE5C,IAAI,WACF,WAAW,8CAA8C;CAE7D;AACF"}

package/cjs/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.cjs

@@ -3,10 +3,11 @@ const require_keys = require("../../../../core/utils/keys/keys.cjs");
 const require_rem = require("../../../../core/utils/units-converters/rem.cjs");
 const require_get_breakpoint_value = require("../../../../core/utils/get-breakpoint-value/get-breakpoint-value.cjs");
 const require_get_base_size = require("../get-base-size/get-base-size.cjs");
+const require_get_resized_value = require("../get-resized-value/get-resized-value.cjs");
 const require_is_primitive_size = require("../is-primitive-size/is-primitive-size.cjs");
 const require_is_responsive_size = require("../is-responsive-size/is-responsive-size.cjs");
 //#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 (require_is_primitive_size.isPrimitiveSize(navbarWidth)) {
-		const baseSize = require_rem.rem(require_get_base_size.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 (require_is_responsive_size.isResponsiveSize(navbarWidth)) {
-		if (typeof navbarWidth.base !== "undefined") {
-			baseStyles["--app-shell-navbar-width"] = require_rem.rem(navbarWidth.base);
-			baseStyles["--app-shell-navbar-offset"] = require_rem.rem(navbarWidth.base);
-			if (mode === "static") baseStyles["--app-shell-navbar-grid-width"] = require_rem.rem(navbarWidth.base);
+	if (resizedSize !== void 0) {
+		const resizedValue = require_get_resized_value.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 (require_is_primitive_size.isPrimitiveSize(navbarWidth)) {
+			const baseSize = require_rem.rem(require_get_base_size.getBaseSize(navbarWidth));
+			baseStyles["--app-shell-navbar-width"] = baseSize;
+			baseStyles["--app-shell-navbar-offset"] = baseSize;
+			if (mode === "static") baseStyles["--app-shell-navbar-grid-width"] = baseSize;
 		}
-		require_keys.keys(navbarWidth).forEach((key) => {
-			if (key !== "base") {
-				minMediaStyles[key] = minMediaStyles[key] || {};
-				minMediaStyles[key]["--app-shell-navbar-width"] = require_rem.rem(navbarWidth[key]);
-				minMediaStyles[key]["--app-shell-navbar-offset"] = require_rem.rem(navbarWidth[key]);
-				if (mode === "static") minMediaStyles[key]["--app-shell-navbar-grid-width"] = require_rem.rem(navbarWidth[key]);
+		if (require_is_responsive_size.isResponsiveSize(navbarWidth)) {
+			if (typeof navbarWidth.base !== "undefined") {
+				baseStyles["--app-shell-navbar-width"] = require_rem.rem(navbarWidth.base);
+				baseStyles["--app-shell-navbar-offset"] = require_rem.rem(navbarWidth.base);
+				if (mode === "static") baseStyles["--app-shell-navbar-grid-width"] = require_rem.rem(navbarWidth.base);
 			}
-		});
+			require_keys.keys(navbarWidth).forEach((key) => {
+				if (key !== "base") {
+					minMediaStyles[key] = minMediaStyles[key] || {};
+					minMediaStyles[key]["--app-shell-navbar-width"] = require_rem.rem(navbarWidth[key]);
+					minMediaStyles[key]["--app-shell-navbar-offset"] = require_rem.rem(navbarWidth[key]);
+					if (mode === "static") minMediaStyles[key]["--app-shell-navbar-grid-width"] = require_rem.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 = require_get_breakpoint_value.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/cjs/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"assign-navbar-variables.cjs","names":["isPrimitiveSize","rem","getBaseSize","isResponsiveSize","getBreakpointValue"],"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,IAAIA,0BAAAA,gBAAgB,WAAW,GAAG;EAChC,MAAM,WAAWC,YAAAA,IAAIC,sBAAAA,YAAY,WAAW,CAAC;EAC7C,WAAW,8BAA8B;EACzC,WAAW,+BAA+B;EAC1C,IAAI,SAAS,UACX,WAAW,mCAAmC;CAElD;CAEA,IAAIC,2BAAAA,iBAAiB,WAAW,GAAG;EACjC,IAAI,OAAO,YAAY,SAAS,aAAa;GAC3C,WAAW,8BAA8BF,YAAAA,IAAI,YAAY,IAAI;GAC7D,WAAW,+BAA+BA,YAAAA,IAAI,YAAY,IAAI;GAC9D,IAAI,SAAS,UACX,WAAW,mCAAmCA,YAAAA,IAAI,YAAY,IAAI;EAEtE;EAEA,aAAA,KAAK,WAAW,CAAC,CAAC,SAAS,QAAQ;GACjC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,IAAI,CAAC,8BAA8BA,YAAAA,IAAI,YAAa,IAAI;IACvE,eAAe,IAAI,CAAC,+BAA+BA,YAAAA,IAAI,YAAa,IAAI;IACxE,IAAI,SAAS,UACX,eAAe,IAAI,CAAC,mCAAmCA,YAAAA,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,kBAAkBG,6BAAAA,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.cjs","names":["getResizedValue","isPrimitiveSize","rem","getBaseSize","isResponsiveSize","getBreakpointValue"],"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":"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"}

package/cjs/components/AppShell/AppShellMediaStyles/escape-css-id/escape-css-id.cjs

@@ -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
+exports.escapeCssId = escapeCssId;
+
+//# sourceMappingURL=escape-css-id.cjs.map

package/cjs/components/AppShell/AppShellMediaStyles/escape-css-id/escape-css-id.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"escape-css-id.cjs","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/cjs/components/AppShell/AppShellMediaStyles/get-resized-value/get-resized-value.cjs

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

package/cjs/components/AppShell/AppShellMediaStyles/get-resized-value/get-resized-value.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-resized-value.cjs","names":["rem"],"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,OAAOA,YAAAA,IAAI,IAAI,EAAE,IAAI,SAAS,eAAe,UAAU,SAAS;AACzE"}

package/cjs/components/AppShell/AppShellMediaStyles/get-variables/get-variables.cjs

@@ -8,7 +8,7 @@ const require_assign_header_variables = require("../assign-header-variables/assi
 const require_assign_navbar_variables = require("../assign-navbar-variables/assign-navbar-variables.cjs");
 const require_assign_padding_variables = require("../assign-padding-variables/assign-padding-variables.cjs");
 //#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
 	});
 	require_assign_aside_variables.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
 	});
 	require_assign_header_variables.assignHeaderVariables({
 		baseStyles,
 		minMediaStyles,
 		header,
-		mode
+		mode,
+		resizedSize: resize?.sizes.header,
+		resizable: resize?.enabled.header
 	});
 	require_assign_footer_variables.assignFooterVariables({
 		baseStyles,
 		minMediaStyles,
 		footer,
-		mode
+		mode,
+		resizedSize: resize?.sizes.footer,
+		resizable: resize?.enabled.footer
 	});
 	require_assign_padding_variables.assignPaddingVariables({
 		baseStyles,

package/cjs/components/AppShell/AppShellMediaStyles/get-variables/get-variables.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"get-variables.cjs","names":["getSortedBreakpoints","keys","em"],"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,gCAAA,sBAAsB;EACpB;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,+BAAA,qBAAqB;EACnB;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,gCAAA,sBAAsB;EAAE;EAAY;EAAgB;EAAQ;CAAK,CAAC;CAClE,gCAAA,sBAAsB;EAAE;EAAY;EAAgB;EAAQ;CAAK,CAAC;CAClE,iCAAA,uBAAuB;EAAE;EAAY;EAAgB;CAAQ,CAAC;CAE9D,MAAM,WAAWA,+BAAAA,qBAAqBC,aAAAA,KAAK,cAAc,GAAG,MAAM,WAAW,CAAC,CAAC,KAC5E,gBAAgB;EACf,OAAO,eAAeC,YAAAA,GAAG,WAAW,EAAE,EAAE;EACxC,QAAQ,eAAe,WAAW;CACpC,EACF;CAEA,MAAM,WAAWF,+BAAAA,qBAAqBC,aAAAA,KAAK,cAAc,GAAG,MAAM,WAAW,CAAC,CAAC,KAC5E,gBAAgB;EACf,OAAO,eAAeC,YAAAA,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.cjs","names":["getSortedBreakpoints","keys","em"],"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,gCAAA,sBAAsB;EACpB;EACA;EACA;EACA;EACA;EACA;EACA,aAAa,QAAQ,MAAM;EAC3B,WAAW,QAAQ,QAAQ;CAC7B,CAAC;CAED,+BAAA,qBAAqB;EACnB;EACA;EACA;EACA;EACA;EACA;EACA,aAAa,QAAQ,MAAM;EAC3B,WAAW,QAAQ,QAAQ;CAC7B,CAAC;CAED,gCAAA,sBAAsB;EACpB;EACA;EACA;EACA;EACA,aAAa,QAAQ,MAAM;EAC3B,WAAW,QAAQ,QAAQ;CAC7B,CAAC;CACD,gCAAA,sBAAsB;EACpB;EACA;EACA;EACA;EACA,aAAa,QAAQ,MAAM;EAC3B,WAAW,QAAQ,QAAQ;CAC7B,CAAC;CACD,iCAAA,uBAAuB;EAAE;EAAY;EAAgB;CAAQ,CAAC;CAE9D,MAAM,WAAWA,+BAAAA,qBAAqBC,aAAAA,KAAK,cAAc,GAAG,MAAM,WAAW,CAAC,CAAC,KAC5E,gBAAgB;EACf,OAAO,eAAeC,YAAAA,GAAG,WAAW,EAAE,EAAE;EACxC,QAAQ,eAAe,WAAW;CACpC,EACF;CAEA,MAAM,WAAWF,+BAAAA,qBAAqBC,aAAAA,KAAK,cAAc,GAAG,MAAM,WAAW,CAAC,CAAC,KAC5E,gBAAgB;EACf,OAAO,eAAeC,YAAAA,GAAG,WAAW,EAAE,EAAE;EACxC,QAAQ,eAAe,WAAW;CACpC,EACF;CAIA,OAAO;EAAE;EAAY,OAAA,CAFN,GAAG,UAAU,GAAG,QAEN;CAAE;AAC7B"}

package/cjs/components/AppShell/AppShellNavbar/AppShellNavbar.cjs

@@ -4,27 +4,48 @@ const require_use_props = require("../../../core/MantineProvider/use-props/use-p
 const require_factory = require("../../../core/factory/factory.cjs");
 const require_Box = require("../../../core/Box/Box.cjs");
 const require_AppShell_context = require("../AppShell.context.cjs");
+const require_AppShellResizeHandle = require("../AppShellResizeHandle/AppShellResizeHandle.cjs");
 const require_AppShell_module = require("../AppShell.module.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react);
+let _mantine_hooks = require("@mantine/hooks");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/AppShell/AppShellNavbar/AppShellNavbar.tsx
 const AppShellNavbar = require_factory.factory((_props) => {
 	const { classNames, className, style, styles, unstyled, vars, withBorder, zIndex, mod, ...others } = require_use_props.useProps("AppShellNavbar", null, _props);
 	const ctx = require_AppShell_context.useAppShellContext();
+	const sectionId = (0, _mantine_hooks.useId)(others.id);
 	if (ctx.disabled) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+	const isResizable = ctx.resize?.navbar.enabled ?? false;
+	const boxProps = ctx.getStyles("navbar", {
+		className,
+		classNames,
+		styles,
+		style
+	});
+	if (!isResizable) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.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__ */ (0, react_jsx_runtime.jsxs)(require_Box.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__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: { display: "contents" },
+			dangerouslySetInnerHTML
+		}) : children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AppShellResizeHandle.AppShellResizeHandle, {
+			section: "navbar",
+			sectionId
+		})]
+	});
 });
 AppShellNavbar.classes = require_AppShell_module.default;
 AppShellNavbar.displayName = "@mantine/core/AppShellNavbar";

package/cjs/components/AppShell/AppShellNavbar/AppShellNavbar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppShellNavbar.cjs","names":["factory","useProps","useAppShellContext","Box","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,iBAAiBA,gBAAAA,SAAgC,WAAW;CACvE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,QACA,KACA,GAAG,WACDC,kBAAAA,SAAS,kBAAkB,MAAM,MAAM;CAE3C,MAAM,MAAMC,yBAAAA,mBAAmB;CAE/B,IAAI,IAAI,UACN,OAAO;CAGT,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,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,UAAUC,wBAAAA;AACzB,eAAe,cAAc"}
+{"version":3,"file":"AppShellNavbar.cjs","names":["factory","useProps","useAppShellContext","useId","Box","AppShellResizeHandle","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,iBAAiBA,gBAAAA,SAAgC,WAAW;CACvE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,QACA,KACA,GAAG,WACDC,kBAAAA,SAAS,kBAAkB,MAAM,MAAM;CAE3C,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,aAAA,GAAYC,eAAAA,MAAAA,CAAM,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,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,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,iBAAA,GAAA,kBAAA,KAAA,CAACA,YAAAA,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,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,OAAO,EAAE,SAAS,WAAW;GAA4B;EAA0B,CAAA,IAExF,UAEF,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,sBAAD;GAAsB,SAAQ;GAAoB;EAAY,CAAA,CAC3D;;AAET,CAAC;AAED,eAAe,UAAUC,wBAAAA;AACzB,eAAe,cAAc"}