@mantine/core 9.6.3 → 9.7.0

package/esm/components/AppShell/AppShellAside/AppShellAside.mjs

@@ -3,27 +3,48 @@ 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 { RemoveScroll } from "react-remove-scroll";
+import { useId } from "@mantine/hooks";
 import cx from "clsx";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/AppShell/AppShellAside/AppShellAside.tsx
 const AppShellAside = factory((_props) => {
 	const { classNames, className, style, styles, unstyled, vars, withBorder, zIndex, mod, ...others } = useProps("AppShellAside", null, _props);
 	const ctx = useAppShellContext();
+	const sectionId = useId(others.id);
 	if (ctx.disabled) return null;
-	return /* @__PURE__ */ jsx(Box, {
+	const isResizable = ctx.resize?.aside.enabled ?? false;
+	const boxProps = ctx.getStyles("aside", {
+		className: cx({ [RemoveScroll.classNames.zeroRight]: ctx.offsetScrollbars }, className),
+		classNames,
+		styles,
+		style
+	});
+	if (!isResizable) return /* @__PURE__ */ jsx(Box, {
 		component: "aside",
 		mod: [{ "with-border": withBorder ?? ctx.withBorder }, mod],
-		...ctx.getStyles("aside", {
-			className: cx({ [RemoveScroll.classNames.zeroRight]: ctx.offsetScrollbars }, className),
-			classNames,
-			styles,
-			style
-		}),
+		...boxProps,
 		...others,
 		__vars: { "--app-shell-aside-z-index": `calc(${zIndex ?? ctx.zIndex} + 1)` }
 	});
+	const { children, dangerouslySetInnerHTML, ...rest } = others;
+	return /* @__PURE__ */ jsxs(Box, {
+		component: "aside",
+		mod: [{ "with-border": withBorder ?? ctx.withBorder }, mod],
+		...boxProps,
+		...rest,
+		__vars: { "--app-shell-aside-z-index": `calc(${zIndex ?? ctx.zIndex} + 1)` },
+		id: sectionId,
+		children: [dangerouslySetInnerHTML ? /* @__PURE__ */ jsx("div", {
+			style: { display: "contents" },
+			dangerouslySetInnerHTML
+		}) : children, /* @__PURE__ */ jsx(AppShellResizeHandle, {
+			section: "aside",
+			sectionId
+		})]
+	});
 });
 AppShellAside.classes = AppShell_module_default;
 AppShellAside.displayName = "@mantine/core/AppShellAside";

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

@@ -1 +1 @@
-{"version":3,"file":"AppShellAside.mjs","names":["classes"],"sources":["../../../../src/components/AppShell/AppShellAside/AppShellAside.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { RemoveScroll } from 'react-remove-scroll';\nimport {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  StylesApiProps,\n  useProps,\n} from '../../../core';\nimport { useAppShellContext } from '../AppShell.context';\nimport { AppShellCompoundProps } from '../AppShell.types';\nimport classes from '../AppShell.module.css';\n\nexport type AppShellAsideStylesNames = 'aside';\n\nexport interface AppShellAsideProps\n  extends\n    BoxProps,\n    AppShellCompoundProps,\n    StylesApiProps<AppShellAsideFactory>,\n    ElementProps<'aside'> {}\n\nexport type AppShellAsideFactory = Factory<{\n  props: AppShellAsideProps;\n  ref: HTMLElement;\n  stylesNames: AppShellAsideStylesNames;\n}>;\n\nexport const AppShellAside = factory<AppShellAsideFactory>((_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('AppShellAside', null, _props);\n\n  const ctx = useAppShellContext();\n\n  if (ctx.disabled) {\n    return null;\n  }\n\n  return (\n    <Box\n      component=\"aside\"\n      mod={[{ 'with-border': withBorder ?? ctx.withBorder }, mod]}\n      {...ctx.getStyles('aside', {\n        className: cx({ [RemoveScroll.classNames.zeroRight]: ctx.offsetScrollbars }, className),\n        classNames,\n        styles,\n        style,\n      })}\n      {...others}\n      __vars={{ '--app-shell-aside-z-index': `calc(${zIndex ?? ctx.zIndex} + 1)` }}\n    />\n  );\n});\n\nAppShellAside.classes = classes;\nAppShellAside.displayName = '@mantine/core/AppShellAside';\n"],"mappings":";;;;;;;;;;AA8BA,MAAa,gBAAgB,SAA+B,WAAW;CACrE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,QACA,KACA,GAAG,WACD,SAAS,iBAAiB,MAAM,MAAM;CAE1C,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,SAAS;GACzB,WAAW,GAAG,GAAG,aAAa,WAAW,YAAY,IAAI,iBAAiB,GAAG,SAAS;GACtF;GACA;GACA;EACF,CAAC;EACD,GAAI;EACJ,QAAQ,EAAE,6BAA6B,QAAQ,UAAU,IAAI,OAAO,OAAO;CAC5E,CAAA;AAEL,CAAC;AAED,cAAc,UAAUA;AACxB,cAAc,cAAc"}
+{"version":3,"file":"AppShellAside.mjs","names":["classes"],"sources":["../../../../src/components/AppShell/AppShellAside/AppShellAside.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { RemoveScroll } from 'react-remove-scroll';\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 { AppShellCompoundProps } from '../AppShell.types';\nimport { AppShellResizeHandle } from '../AppShellResizeHandle/AppShellResizeHandle';\nimport classes from '../AppShell.module.css';\n\nexport type AppShellAsideStylesNames = 'aside';\n\nexport interface AppShellAsideProps\n  extends\n    BoxProps,\n    AppShellCompoundProps,\n    StylesApiProps<AppShellAsideFactory>,\n    ElementProps<'aside'> {}\n\nexport type AppShellAsideFactory = Factory<{\n  props: AppShellAsideProps;\n  ref: HTMLElement;\n  stylesNames: AppShellAsideStylesNames;\n}>;\n\nexport const AppShellAside = factory<AppShellAsideFactory>((_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('AppShellAside', 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?.aside.enabled ?? false;\n  const boxProps = ctx.getStyles('aside', {\n    className: cx({ [RemoveScroll.classNames.zeroRight]: ctx.offsetScrollbars }, className),\n    classNames,\n    styles,\n    style,\n  });\n\n  if (!isResizable) {\n    return (\n      <Box\n        component=\"aside\"\n        mod={[{ 'with-border': withBorder ?? ctx.withBorder }, mod]}\n        {...boxProps}\n        {...others}\n        __vars={{ '--app-shell-aside-z-index': `calc(${zIndex ?? ctx.zIndex} + 1)` }}\n      />\n    );\n  }\n\n  const { children, dangerouslySetInnerHTML, ...rest } = others;\n\n  return (\n    <Box\n      component=\"aside\"\n      mod={[{ 'with-border': withBorder ?? ctx.withBorder }, mod]}\n      {...boxProps}\n      {...rest}\n      __vars={{ '--app-shell-aside-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=\"aside\" sectionId={sectionId} />\n    </Box>\n  );\n});\n\nAppShellAside.classes = classes;\nAppShellAside.displayName = '@mantine/core/AppShellAside';\n"],"mappings":";;;;;;;;;;;;AAgCA,MAAa,gBAAgB,SAA+B,WAAW;CACrE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,QACA,KACA,GAAG,WACD,SAAS,iBAAiB,MAAM,MAAM;CAE1C,MAAM,MAAM,mBAAmB;CAC/B,MAAM,YAAY,MAAM,OAAO,EAAE;CAEjC,IAAI,IAAI,UACN,OAAO;CAGT,MAAM,cAAc,IAAI,QAAQ,MAAM,WAAW;CACjD,MAAM,WAAW,IAAI,UAAU,SAAS;EACtC,WAAW,GAAG,GAAG,aAAa,WAAW,YAAY,IAAI,iBAAiB,GAAG,SAAS;EACtF;EACA;EACA;CACF,CAAC;CAED,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,6BAA6B,QAAQ,UAAU,IAAI,OAAO,OAAO;CAC5E,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,6BAA6B,QAAQ,UAAU,IAAI,OAAO,OAAO;EAC3E,IAAI;EANN,UAAA,CAQG,0BACC,oBAAC,OAAD;GAAK,OAAO,EAAE,SAAS,WAAW;GAA4B;EAA0B,CAAA,IAExF,UAEF,oBAAC,sBAAD;GAAsB,SAAQ;GAAmB;EAAY,CAAA,CAC1D;;AAET,CAAC;AAED,cAAc,UAAUA;AACxB,cAAc,cAAc"}

package/esm/components/AppShell/AppShellFooter/AppShellFooter.mjs

@@ -3,27 +3,48 @@ 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 { RemoveScroll } from "react-remove-scroll";
+import { useId } from "@mantine/hooks";
 import cx from "clsx";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/AppShell/AppShellFooter/AppShellFooter.tsx
 const AppShellFooter = factory((_props) => {
 	const { classNames, className, style, styles, unstyled, vars, withBorder, zIndex, mod, ...others } = useProps("AppShellFooter", null, _props);
 	const ctx = useAppShellContext();
+	const sectionId = useId(others.id);
 	if (ctx.disabled) return null;
-	return /* @__PURE__ */ jsx(Box, {
+	const isResizable = ctx.resize?.footer.enabled ?? false;
+	const boxProps = ctx.getStyles("footer", {
+		className: cx({ [RemoveScroll.classNames.zeroRight]: ctx.offsetScrollbars }, className),
+		classNames,
+		styles,
+		style
+	});
+	if (!isResizable) return /* @__PURE__ */ jsx(Box, {
 		component: "footer",
 		mod: [{ "with-border": withBorder ?? ctx.withBorder }, mod],
-		...ctx.getStyles("footer", {
-			className: cx({ [RemoveScroll.classNames.zeroRight]: ctx.offsetScrollbars }, className),
-			classNames,
-			styles,
-			style
-		}),
+		...boxProps,
 		...others,
 		__vars: { "--app-shell-footer-z-index": (zIndex ?? ctx.zIndex)?.toString() }
 	});
+	const { children, dangerouslySetInnerHTML, ...rest } = others;
+	return /* @__PURE__ */ jsxs(Box, {
+		component: "footer",
+		mod: [{ "with-border": withBorder ?? ctx.withBorder }, mod],
+		...boxProps,
+		...rest,
+		__vars: { "--app-shell-footer-z-index": (zIndex ?? ctx.zIndex)?.toString() },
+		id: sectionId,
+		children: [dangerouslySetInnerHTML ? /* @__PURE__ */ jsx("div", {
+			style: { display: "contents" },
+			dangerouslySetInnerHTML
+		}) : children, /* @__PURE__ */ jsx(AppShellResizeHandle, {
+			section: "footer",
+			sectionId
+		})]
+	});
 });
 AppShellFooter.classes = AppShell_module_default;
 AppShellFooter.displayName = "@mantine/core/AppShellFooter";

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

@@ -1 +1 @@
-{"version":3,"file":"AppShellFooter.mjs","names":["classes"],"sources":["../../../../src/components/AppShell/AppShellFooter/AppShellFooter.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { RemoveScroll } from 'react-remove-scroll';\nimport {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  StylesApiProps,\n  useProps,\n} from '../../../core';\nimport { useAppShellContext } from '../AppShell.context';\nimport { AppShellCompoundProps } from '../AppShell.types';\nimport classes from '../AppShell.module.css';\n\nexport type AppShellFooterStylesNames = 'footer';\n\nexport interface AppShellFooterProps\n  extends\n    BoxProps,\n    AppShellCompoundProps,\n    StylesApiProps<AppShellFooterFactory>,\n    ElementProps<'footer'> {}\n\nexport type AppShellFooterFactory = Factory<{\n  props: AppShellFooterProps;\n  ref: HTMLElement;\n  stylesNames: AppShellFooterStylesNames;\n}>;\n\nexport const AppShellFooter = factory<AppShellFooterFactory>((_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('AppShellFooter', null, _props);\n\n  const ctx = useAppShellContext();\n\n  if (ctx.disabled) {\n    return null;\n  }\n\n  return (\n    <Box\n      component=\"footer\"\n      mod={[{ 'with-border': withBorder ?? ctx.withBorder }, mod]}\n      {...ctx.getStyles('footer', {\n        className: cx({ [RemoveScroll.classNames.zeroRight]: ctx.offsetScrollbars }, className),\n        classNames,\n        styles,\n        style,\n      })}\n      {...others}\n      __vars={{ '--app-shell-footer-z-index': (zIndex ?? ctx.zIndex)?.toString() }}\n    />\n  );\n});\n\nAppShellFooter.classes = classes;\nAppShellFooter.displayName = '@mantine/core/AppShellFooter';\n"],"mappings":";;;;;;;;;;AA8BA,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;GAC1B,WAAW,GAAG,GAAG,aAAa,WAAW,YAAY,IAAI,iBAAiB,GAAG,SAAS;GACtF;GACA;GACA;EACF,CAAC;EACD,GAAI;EACJ,QAAQ,EAAE,+BAA+B,UAAU,IAAI,OAAA,EAAS,SAAS,EAAE;CAC5E,CAAA;AAEL,CAAC;AAED,eAAe,UAAUA;AACzB,eAAe,cAAc"}
+{"version":3,"file":"AppShellFooter.mjs","names":["classes"],"sources":["../../../../src/components/AppShell/AppShellFooter/AppShellFooter.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { RemoveScroll } from 'react-remove-scroll';\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 { AppShellCompoundProps } from '../AppShell.types';\nimport { AppShellResizeHandle } from '../AppShellResizeHandle/AppShellResizeHandle';\nimport classes from '../AppShell.module.css';\n\nexport type AppShellFooterStylesNames = 'footer';\n\nexport interface AppShellFooterProps\n  extends\n    BoxProps,\n    AppShellCompoundProps,\n    StylesApiProps<AppShellFooterFactory>,\n    ElementProps<'footer'> {}\n\nexport type AppShellFooterFactory = Factory<{\n  props: AppShellFooterProps;\n  ref: HTMLElement;\n  stylesNames: AppShellFooterStylesNames;\n}>;\n\nexport const AppShellFooter = factory<AppShellFooterFactory>((_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('AppShellFooter', 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?.footer.enabled ?? false;\n  const boxProps = ctx.getStyles('footer', {\n    className: cx({ [RemoveScroll.classNames.zeroRight]: ctx.offsetScrollbars }, className),\n    classNames,\n    styles,\n    style,\n  });\n\n  if (!isResizable) {\n    return (\n      <Box\n        component=\"footer\"\n        mod={[{ 'with-border': withBorder ?? ctx.withBorder }, mod]}\n        {...boxProps}\n        {...others}\n        __vars={{ '--app-shell-footer-z-index': (zIndex ?? ctx.zIndex)?.toString() }}\n      />\n    );\n  }\n\n  const { children, dangerouslySetInnerHTML, ...rest } = others;\n\n  return (\n    <Box\n      component=\"footer\"\n      mod={[{ 'with-border': withBorder ?? ctx.withBorder }, mod]}\n      {...boxProps}\n      {...rest}\n      __vars={{ '--app-shell-footer-z-index': (zIndex ?? ctx.zIndex)?.toString() }}\n      id={sectionId}\n    >\n      {dangerouslySetInnerHTML ? (\n        <div style={{ display: 'contents' }} dangerouslySetInnerHTML={dangerouslySetInnerHTML} />\n      ) : (\n        children\n      )}\n      <AppShellResizeHandle section=\"footer\" sectionId={sectionId} />\n    </Box>\n  );\n});\n\nAppShellFooter.classes = classes;\nAppShellFooter.displayName = '@mantine/core/AppShellFooter';\n"],"mappings":";;;;;;;;;;;;AAgCA,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,YAAY,MAAM,OAAO,EAAE;CAEjC,IAAI,IAAI,UACN,OAAO;CAGT,MAAM,cAAc,IAAI,QAAQ,OAAO,WAAW;CAClD,MAAM,WAAW,IAAI,UAAU,UAAU;EACvC,WAAW,GAAG,GAAG,aAAa,WAAW,YAAY,IAAI,iBAAiB,GAAG,SAAS;EACtF;EACA;EACA;CACF,CAAC;CAED,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,+BAA+B,UAAU,IAAI,OAAA,EAAS,SAAS,EAAE;CAC5E,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,+BAA+B,UAAU,IAAI,OAAA,EAAS,SAAS,EAAE;EAC3E,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,UAAUA;AACzB,eAAe,cAAc"}

package/esm/components/AppShell/AppShellHeader/AppShellHeader.mjs

@@ -3,27 +3,48 @@ 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 { RemoveScroll } from "react-remove-scroll";
+import { useId } from "@mantine/hooks";
 import cx from "clsx";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/AppShell/AppShellHeader/AppShellHeader.tsx
 const AppShellHeader = factory((_props) => {
 	const { classNames, className, style, styles, unstyled, vars, withBorder, zIndex, mod, ...others } = useProps("AppShellHeader", null, _props);
 	const ctx = useAppShellContext();
+	const sectionId = useId(others.id);
 	if (ctx.disabled) return null;
-	return /* @__PURE__ */ jsx(Box, {
+	const isResizable = ctx.resize?.header.enabled ?? false;
+	const boxProps = ctx.getStyles("header", {
+		className: cx({ [RemoveScroll.classNames.zeroRight]: ctx.offsetScrollbars }, className),
+		classNames,
+		styles,
+		style
+	});
+	if (!isResizable) return /* @__PURE__ */ jsx(Box, {
 		component: "header",
 		mod: [{ "with-border": withBorder ?? ctx.withBorder }, mod],
-		...ctx.getStyles("header", {
-			className: cx({ [RemoveScroll.classNames.zeroRight]: ctx.offsetScrollbars }, className),
-			classNames,
-			styles,
-			style
-		}),
+		...boxProps,
 		...others,
 		__vars: { "--app-shell-header-z-index": (zIndex ?? ctx.zIndex)?.toString() }
 	});
+	const { children, dangerouslySetInnerHTML, ...rest } = others;
+	return /* @__PURE__ */ jsxs(Box, {
+		component: "header",
+		mod: [{ "with-border": withBorder ?? ctx.withBorder }, mod],
+		...boxProps,
+		...rest,
+		__vars: { "--app-shell-header-z-index": (zIndex ?? ctx.zIndex)?.toString() },
+		id: sectionId,
+		children: [dangerouslySetInnerHTML ? /* @__PURE__ */ jsx("div", {
+			style: { display: "contents" },
+			dangerouslySetInnerHTML
+		}) : children, /* @__PURE__ */ jsx(AppShellResizeHandle, {
+			section: "header",
+			sectionId
+		})]
+	});
 });
 AppShellHeader.classes = AppShell_module_default;
 AppShellHeader.displayName = "@mantine/core/AppShellHeader";

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

@@ -1 +1 @@
-{"version":3,"file":"AppShellHeader.mjs","names":["classes"],"sources":["../../../../src/components/AppShell/AppShellHeader/AppShellHeader.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { RemoveScroll } from 'react-remove-scroll';\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 AppShellHeaderStylesNames = 'header';\n\nexport interface AppShellHeaderProps\n  extends\n    BoxProps,\n    AppShellCompoundProps,\n    StylesApiProps<AppShellHeaderFactory>,\n    ElementProps<'header'> {}\n\nexport type AppShellHeaderFactory = Factory<{\n  props: AppShellHeaderProps;\n  ref: HTMLElement;\n  stylesNames: AppShellHeaderStylesNames;\n}>;\n\nexport const AppShellHeader = factory<AppShellHeaderFactory>((_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('AppShellHeader', null, _props);\n\n  const ctx = useAppShellContext();\n\n  if (ctx.disabled) {\n    return null;\n  }\n\n  return (\n    <Box\n      component=\"header\"\n      mod={[{ 'with-border': withBorder ?? ctx.withBorder }, mod]}\n      {...ctx.getStyles('header', {\n        className: cx({ [RemoveScroll.classNames.zeroRight]: ctx.offsetScrollbars }, className),\n        classNames,\n        styles,\n        style,\n      })}\n      {...others}\n      __vars={{ '--app-shell-header-z-index': (zIndex ?? ctx.zIndex)?.toString() }}\n    />\n  );\n});\n\nAppShellHeader.classes = classes;\nAppShellHeader.displayName = '@mantine/core/AppShellHeader';\n"],"mappings":";;;;;;;;;;AA8BA,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;GAC1B,WAAW,GAAG,GAAG,aAAa,WAAW,YAAY,IAAI,iBAAiB,GAAG,SAAS;GACtF;GACA;GACA;EACF,CAAC;EACD,GAAI;EACJ,QAAQ,EAAE,+BAA+B,UAAU,IAAI,OAAA,EAAS,SAAS,EAAE;CAC5E,CAAA;AAEL,CAAC;AAED,eAAe,UAAUA;AACzB,eAAe,cAAc"}
+{"version":3,"file":"AppShellHeader.mjs","names":["classes"],"sources":["../../../../src/components/AppShell/AppShellHeader/AppShellHeader.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { RemoveScroll } from 'react-remove-scroll';\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 AppShellHeaderStylesNames = 'header';\n\nexport interface AppShellHeaderProps\n  extends\n    BoxProps,\n    AppShellCompoundProps,\n    StylesApiProps<AppShellHeaderFactory>,\n    ElementProps<'header'> {}\n\nexport type AppShellHeaderFactory = Factory<{\n  props: AppShellHeaderProps;\n  ref: HTMLElement;\n  stylesNames: AppShellHeaderStylesNames;\n}>;\n\nexport const AppShellHeader = factory<AppShellHeaderFactory>((_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('AppShellHeader', 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?.header.enabled ?? false;\n  const boxProps = ctx.getStyles('header', {\n    className: cx({ [RemoveScroll.classNames.zeroRight]: ctx.offsetScrollbars }, className),\n    classNames,\n    styles,\n    style,\n  });\n\n  if (!isResizable) {\n    return (\n      <Box\n        component=\"header\"\n        mod={[{ 'with-border': withBorder ?? ctx.withBorder }, mod]}\n        {...boxProps}\n        {...others}\n        __vars={{ '--app-shell-header-z-index': (zIndex ?? ctx.zIndex)?.toString() }}\n      />\n    );\n  }\n\n  const { children, dangerouslySetInnerHTML, ...rest } = others;\n\n  return (\n    <Box\n      component=\"header\"\n      mod={[{ 'with-border': withBorder ?? ctx.withBorder }, mod]}\n      {...boxProps}\n      {...rest}\n      __vars={{ '--app-shell-header-z-index': (zIndex ?? ctx.zIndex)?.toString() }}\n      id={sectionId}\n    >\n      {dangerouslySetInnerHTML ? (\n        <div style={{ display: 'contents' }} dangerouslySetInnerHTML={dangerouslySetInnerHTML} />\n      ) : (\n        children\n      )}\n      <AppShellResizeHandle section=\"header\" sectionId={sectionId} />\n    </Box>\n  );\n});\n\nAppShellHeader.classes = classes;\nAppShellHeader.displayName = '@mantine/core/AppShellHeader';\n"],"mappings":";;;;;;;;;;;;AAgCA,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,YAAY,MAAM,OAAO,EAAE;CAEjC,IAAI,IAAI,UACN,OAAO;CAGT,MAAM,cAAc,IAAI,QAAQ,OAAO,WAAW;CAClD,MAAM,WAAW,IAAI,UAAU,UAAU;EACvC,WAAW,GAAG,GAAG,aAAa,WAAW,YAAY,IAAI,iBAAiB,GAAG,SAAS;EACtF;EACA;EACA;CACF,CAAC;CAED,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,+BAA+B,UAAU,IAAI,OAAA,EAAS,SAAS,EAAE;CAC5E,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,+BAA+B,UAAU,IAAI,OAAA,EAAS,SAAS,EAAE;EAC3E,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,UAAUA;AACzB,eAAe,cAAc"}

package/esm/components/AppShell/AppShellMediaStyles/AppShellMediaStyles.mjs

@@ -5,7 +5,7 @@ import { InlineStyles } from "../../../core/InlineStyles/InlineStyles.mjs";
 import { getVariables } from "./get-variables/get-variables.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/AppShell/AppShellMediaStyles/AppShellMediaStyles.tsx
-function AppShellMediaStyles({ navbar, header, aside, footer, padding, mode, selector }) {
+function AppShellMediaStyles({ navbar, header, aside, footer, padding, mode, selector, resize }) {
 	const theme = useMantineTheme();
 	const ctx = useMantineContext();
 	const { media, baseStyles } = getVariables({
@@ -15,7 +15,8 @@ function AppShellMediaStyles({ navbar, header, aside, footer, padding, mode, sel
 		aside,
 		padding,
 		theme,
-		mode
+		mode,
+		resize
 	});
 	return /* @__PURE__ */ jsx(InlineStyles, {
 		media,

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

@@ -1 +1 @@
-{"version":3,"file":"AppShellMediaStyles.mjs","names":[],"sources":["../../../../src/components/AppShell/AppShellMediaStyles/AppShellMediaStyles.tsx"],"sourcesContent":["import { InlineStyles, useMantineContext, useMantineTheme } from '../../../core';\nimport type { AppShellProps } from '../AppShell';\nimport { getVariables } from './get-variables/get-variables';\n\ninterface AppShellMediaStylesProps {\n  navbar: AppShellProps['navbar'] | undefined;\n  header: AppShellProps['header'] | undefined;\n  aside: AppShellProps['aside'] | undefined;\n  footer: AppShellProps['footer'] | undefined;\n  padding: AppShellProps['padding'] | undefined;\n  mode: 'fixed' | 'static';\n  selector?: string;\n}\n\nexport function AppShellMediaStyles({\n  navbar,\n  header,\n  aside,\n  footer,\n  padding,\n  mode,\n  selector,\n}: AppShellMediaStylesProps) {\n  const theme = useMantineTheme();\n  const ctx = useMantineContext();\n  const { media, baseStyles } = getVariables({\n    navbar,\n    header,\n    footer,\n    aside,\n    padding,\n    theme,\n    mode,\n  });\n  return (\n    <InlineStyles\n      media={media}\n      styles={baseStyles}\n      selector={selector || ctx.cssVariablesSelector}\n    />\n  );\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,oBAAoB,EAClC,QACA,QACA,OACA,QACA,SACA,MACA,YAC2B;CAC3B,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,MAAM,kBAAkB;CAC9B,MAAM,EAAE,OAAO,eAAe,aAAa;EACzC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,OACE,oBAAC,cAAD;EACS;EACP,QAAQ;EACR,UAAU,YAAY,IAAI;CAC3B,CAAA;AAEL"}
+{"version":3,"file":"AppShellMediaStyles.mjs","names":[],"sources":["../../../../src/components/AppShell/AppShellMediaStyles/AppShellMediaStyles.tsx"],"sourcesContent":["import { InlineStyles, useMantineContext, useMantineTheme } from '../../../core';\nimport type { AppShellProps } from '../AppShell';\nimport type { AppShellResizeSection, AppShellResizeSizes } from '../AppShell.types';\nimport { getVariables } from './get-variables/get-variables';\n\ninterface AppShellMediaStylesProps {\n  navbar: AppShellProps['navbar'] | undefined;\n  header: AppShellProps['header'] | undefined;\n  aside: AppShellProps['aside'] | undefined;\n  footer: AppShellProps['footer'] | undefined;\n  padding: AppShellProps['padding'] | undefined;\n  mode: 'fixed' | 'static';\n  selector?: string;\n  resize?: { sizes: AppShellResizeSizes; enabled: Partial<Record<AppShellResizeSection, boolean>> };\n}\n\nexport function AppShellMediaStyles({\n  navbar,\n  header,\n  aside,\n  footer,\n  padding,\n  mode,\n  selector,\n  resize,\n}: AppShellMediaStylesProps) {\n  const theme = useMantineTheme();\n  const ctx = useMantineContext();\n  const { media, baseStyles } = getVariables({\n    navbar,\n    header,\n    footer,\n    aside,\n    padding,\n    theme,\n    mode,\n    resize,\n  });\n  return (\n    <InlineStyles\n      media={media}\n      styles={baseStyles}\n      selector={selector || ctx.cssVariablesSelector}\n    />\n  );\n}\n"],"mappings":";;;;;;;AAgBA,SAAgB,oBAAoB,EAClC,QACA,QACA,OACA,QACA,SACA,MACA,UACA,UAC2B;CAC3B,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,MAAM,kBAAkB;CAC9B,MAAM,EAAE,OAAO,eAAe,aAAa;EACzC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,OACE,oBAAC,cAAD;EACS;EACP,QAAQ;EACR,UAAU,YAAY,IAAI;CAC3B,CAAA;AAEL"}

package/esm/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-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-aside-variables/assign-aside-variables.ts
-function assignAsideVariables({ baseStyles, minMediaStyles, maxMediaStyles, aside, theme, mode }) {
+function assignAsideVariables({ baseStyles, minMediaStyles, maxMediaStyles, aside, theme, mode, resizedSize, resizable }) {
 	const asideWidth = aside?.width;
 	const collapsedAsideTransform = "translateX(var(--app-shell-aside-width))";
 	const collapsedAsideTransformRtl = "translateX(calc(var(--app-shell-aside-width) * -1))";
@@ -19,24 +20,32 @@ function assignAsideVariables({ baseStyles, minMediaStyles, maxMediaStyles, asid
 			maxMediaStyles[aside?.breakpoint]["--app-shell-aside-width"] = "0px";
 			maxMediaStyles[aside?.breakpoint]["--app-shell-aside-offset"] = "0px";
 		}
+		if (resizable) maxMediaStyles[aside.breakpoint]["--app-shell-aside-resize-handle-display"] = "none";
 	}
-	if (isPrimitiveSize(asideWidth)) {
-		const baseSize = rem(getBaseSize(asideWidth));
-		baseStyles["--app-shell-aside-width"] = baseSize;
-		baseStyles["--app-shell-aside-offset"] = baseSize;
-	}
-	if (isResponsiveSize(asideWidth)) {
-		if (typeof asideWidth.base !== "undefined") {
-			baseStyles["--app-shell-aside-width"] = rem(asideWidth.base);
-			baseStyles["--app-shell-aside-offset"] = rem(asideWidth.base);
+	if (resizedSize !== void 0) {
+		const resizedValue = getResizedValue(resizedSize, "horizontal");
+		baseStyles["--app-shell-aside-width"] = resizedValue;
+		baseStyles["--app-shell-aside-offset"] = resizedValue;
+		if (mode === "static") baseStyles["--app-shell-aside-grid-width"] = resizedValue;
+	} else {
+		if (isPrimitiveSize(asideWidth)) {
+			const baseSize = rem(getBaseSize(asideWidth));
+			baseStyles["--app-shell-aside-width"] = baseSize;
+			baseStyles["--app-shell-aside-offset"] = baseSize;
 		}
-		keys(asideWidth).forEach((key) => {
-			if (key !== "base") {
-				minMediaStyles[key] = minMediaStyles[key] || {};
-				minMediaStyles[key]["--app-shell-aside-width"] = rem(asideWidth[key]);
-				minMediaStyles[key]["--app-shell-aside-offset"] = rem(asideWidth[key]);
+		if (isResponsiveSize(asideWidth)) {
+			if (typeof asideWidth.base !== "undefined") {
+				baseStyles["--app-shell-aside-width"] = rem(asideWidth.base);
+				baseStyles["--app-shell-aside-offset"] = rem(asideWidth.base);
 			}
-		});
+			keys(asideWidth).forEach((key) => {
+				if (key !== "base") {
+					minMediaStyles[key] = minMediaStyles[key] || {};
+					minMediaStyles[key]["--app-shell-aside-width"] = rem(asideWidth[key]);
+					minMediaStyles[key]["--app-shell-aside-offset"] = rem(asideWidth[key]);
+				}
+			});
+		}
 	}
 	if (aside?.breakpoint !== void 0 && mode === "static") {
 		minMediaStyles[aside.breakpoint] = minMediaStyles[aside.breakpoint] || {};
@@ -57,6 +66,7 @@ function assignAsideVariables({ baseStyles, minMediaStyles, maxMediaStyles, asid
 			minMediaStyles[breakpointValue]["--app-shell-main-column-end"] = "-1";
 		}
 		minMediaStyles[breakpointValue]["--app-shell-aside-scroll-locked-visibility"] = "hidden";
+		if (resizable) minMediaStyles[breakpointValue]["--app-shell-aside-resize-handle-display"] = "none";
 	}
 	if (aside?.collapsed?.mobile) {
 		const breakpointValue = getBreakpointValue(aside.breakpoint, theme.breakpoints) - .1;
@@ -68,6 +78,7 @@ function assignAsideVariables({ baseStyles, minMediaStyles, maxMediaStyles, asid
 		maxMediaStyles[breakpointValue]["--app-shell-aside-transform"] = collapsedAsideTransform;
 		maxMediaStyles[breakpointValue]["--app-shell-aside-transform-rtl"] = collapsedAsideTransformRtl;
 		maxMediaStyles[breakpointValue]["--app-shell-aside-scroll-locked-visibility"] = "hidden";
+		if (resizable) maxMediaStyles[breakpointValue]["--app-shell-aside-resize-handle-display"] = "none";
 	}
 }
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"assign-aside-variables.mjs","names":[],"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,IAAI,gBAAgB,UAAU,GAAG;EAC/B,MAAM,WAAW,IAAI,YAAY,UAAU,CAAC;EAC5C,WAAW,6BAA6B;EACxC,WAAW,8BAA8B;CAC3C;CAEA,IAAI,iBAAiB,UAAU,GAAG;EAChC,IAAI,OAAO,WAAW,SAAS,aAAa;GAC1C,WAAW,6BAA6B,IAAI,WAAW,IAAI;GAC3D,WAAW,8BAA8B,IAAI,WAAW,IAAI;EAC9D;EAEA,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;GAChC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,IAAI,CAAC,6BAA6B,IAAI,WAAY,IAAI;IACrE,eAAe,IAAI,CAAC,8BAA8B,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,kBAAkB,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.mjs","names":[],"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":";;;;;;;;;AAmBA,SAAgB,qBAAqB,EACnC,YACA,gBACA,gBACA,OACA,OACA,MACA,aACA,aAC4B;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;EACA,IAAI,WACF,eAAe,MAAM,WAAW,CAAC,6CAA6C;CAElF;CAEA,IAAI,gBAAgB,KAAA,GAAW;EAC7B,MAAM,eAAe,gBAAgB,aAAa,YAAY;EAC9D,WAAW,6BAA6B;EACxC,WAAW,8BAA8B;EACzC,IAAI,SAAS,UACX,WAAW,kCAAkC;CAEjD,OAAO;EACL,IAAI,gBAAgB,UAAU,GAAG;GAC/B,MAAM,WAAW,IAAI,YAAY,UAAU,CAAC;GAC5C,WAAW,6BAA6B;GACxC,WAAW,8BAA8B;EAC3C;EAEA,IAAI,iBAAiB,UAAU,GAAG;GAChC,IAAI,OAAO,WAAW,SAAS,aAAa;IAC1C,WAAW,6BAA6B,IAAI,WAAW,IAAI;IAC3D,WAAW,8BAA8B,IAAI,WAAW,IAAI;GAC9D;GAEA,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;IAChC,IAAI,QAAQ,QAAQ;KAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;KAC9C,eAAe,IAAI,CAAC,6BAA6B,IAAI,WAAY,IAAI;KACrE,eAAe,IAAI,CAAC,8BAA8B,IAAI,WAAY,IAAI;IACxE;GACF,CAAC;EACH;CACF;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;EAChF,IAAI,WACF,eAAe,gBAAgB,CAAC,6CAA6C;CAEjF;CAEA,IAAI,OAAO,WAAW,QAAQ;EAC5B,MAAM,kBAAkB,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;EAChF,IAAI,WACF,eAAe,gBAAgB,CAAC,6CAA6C;CAEjF;AACF"}

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

@@ -2,10 +2,11 @@
 import { keys } from "../../../../core/utils/keys/keys.mjs";
 import { rem } from "../../../../core/utils/units-converters/rem.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-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 (isPrimitiveSize(footerHeight)) {
-		const baseSize = rem(getBaseSize(footerHeight));
-		baseStyles["--app-shell-footer-height"] = baseSize;
-		if (shouldOffset) baseStyles["--app-shell-footer-offset"] = baseSize;
-	}
-	if (isResponsiveSize(footerHeight)) {
-		if (typeof footerHeight.base !== "undefined") {
-			baseStyles["--app-shell-footer-height"] = rem(footerHeight.base);
-			if (shouldOffset) baseStyles["--app-shell-footer-offset"] = rem(footerHeight.base);
+	if (resizedSize !== void 0) {
+		const resizedValue = getResizedValue(resizedSize, "vertical");
+		baseStyles["--app-shell-footer-height"] = resizedValue;
+		if (shouldOffset) baseStyles["--app-shell-footer-offset"] = resizedValue;
+	} else {
+		if (isPrimitiveSize(footerHeight)) {
+			const baseSize = rem(getBaseSize(footerHeight));
+			baseStyles["--app-shell-footer-height"] = baseSize;
+			if (shouldOffset) baseStyles["--app-shell-footer-offset"] = baseSize;
 		}
-		keys(footerHeight).forEach((key) => {
-			if (key !== "base") {
-				minMediaStyles[key] = minMediaStyles[key] || {};
-				minMediaStyles[key]["--app-shell-footer-height"] = rem(footerHeight[key]);
-				if (shouldOffset) minMediaStyles[key]["--app-shell-footer-offset"] = rem(footerHeight[key]);
+		if (isResponsiveSize(footerHeight)) {
+			if (typeof footerHeight.base !== "undefined") {
+				baseStyles["--app-shell-footer-height"] = rem(footerHeight.base);
+				if (shouldOffset) baseStyles["--app-shell-footer-offset"] = rem(footerHeight.base);
 			}
-		});
+			keys(footerHeight).forEach((key) => {
+				if (key !== "base") {
+					minMediaStyles[key] = minMediaStyles[key] || {};
+					minMediaStyles[key]["--app-shell-footer-height"] = rem(footerHeight[key]);
+					if (shouldOffset) minMediaStyles[key]["--app-shell-footer-offset"] = 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/esm/components/AppShell/AppShellMediaStyles/assign-footer-variables/assign-footer-variables.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"assign-footer-variables.mjs","names":[],"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,IAAI,gBAAgB,YAAY,GAAG;EACjC,MAAM,WAAW,IAAI,YAAY,YAAY,CAAC;EAC9C,WAAW,+BAA+B;EAC1C,IAAI,cACF,WAAW,+BAA+B;CAE9C;CAEA,IAAI,iBAAiB,YAAY,GAAG;EAClC,IAAI,OAAO,aAAa,SAAS,aAAa;GAC5C,WAAW,+BAA+B,IAAI,aAAa,IAAI;GAE/D,IAAI,cACF,WAAW,+BAA+B,IAAI,aAAa,IAAI;EAEnE;EAEA,KAAK,YAAY,CAAC,CAAC,SAAS,QAAQ;GAClC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,IAAI,CAAC,+BAA+B,IAAI,aAAa,IAAI;IAExE,IAAI,cACF,eAAe,IAAI,CAAC,+BAA+B,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.mjs","names":[],"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,eAAe,gBAAgB,aAAa,UAAU;EAC5D,WAAW,+BAA+B;EAC1C,IAAI,cACF,WAAW,+BAA+B;CAE9C,OAAO;EACL,IAAI,gBAAgB,YAAY,GAAG;GACjC,MAAM,WAAW,IAAI,YAAY,YAAY,CAAC;GAC9C,WAAW,+BAA+B;GAC1C,IAAI,cACF,WAAW,+BAA+B;EAE9C;EAEA,IAAI,iBAAiB,YAAY,GAAG;GAClC,IAAI,OAAO,aAAa,SAAS,aAAa;IAC5C,WAAW,+BAA+B,IAAI,aAAa,IAAI;IAE/D,IAAI,cACF,WAAW,+BAA+B,IAAI,aAAa,IAAI;GAEnE;GAEA,KAAK,YAAY,CAAC,CAAC,SAAS,QAAQ;IAClC,IAAI,QAAQ,QAAQ;KAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;KAC9C,eAAe,IAAI,CAAC,+BAA+B,IAAI,aAAa,IAAI;KAExE,IAAI,cACF,eAAe,IAAI,CAAC,+BAA+B,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/esm/components/AppShell/AppShellMediaStyles/assign-header-variables/assign-header-variables.mjs

@@ -2,10 +2,11 @@
 import { keys } from "../../../../core/utils/keys/keys.mjs";
 import { rem } from "../../../../core/utils/units-converters/rem.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-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 (isPrimitiveSize(headerHeight)) {
-		const baseSize = rem(getBaseSize(headerHeight));
-		baseStyles["--app-shell-header-height"] = baseSize;
-		if (shouldOffset) baseStyles["--app-shell-header-offset"] = baseSize;
-	}
-	if (isResponsiveSize(headerHeight)) {
-		if (typeof headerHeight.base !== "undefined") {
-			baseStyles["--app-shell-header-height"] = rem(headerHeight.base);
-			if (shouldOffset) baseStyles["--app-shell-header-offset"] = rem(headerHeight.base);
+	if (resizedSize !== void 0) {
+		const resizedValue = getResizedValue(resizedSize, "vertical");
+		baseStyles["--app-shell-header-height"] = resizedValue;
+		if (shouldOffset) baseStyles["--app-shell-header-offset"] = resizedValue;
+	} else {
+		if (isPrimitiveSize(headerHeight)) {
+			const baseSize = rem(getBaseSize(headerHeight));
+			baseStyles["--app-shell-header-height"] = baseSize;
+			if (shouldOffset) baseStyles["--app-shell-header-offset"] = baseSize;
 		}
-		keys(headerHeight).forEach((key) => {
-			if (key !== "base") {
-				minMediaStyles[key] = minMediaStyles[key] || {};
-				minMediaStyles[key]["--app-shell-header-height"] = rem(headerHeight[key]);
-				if (shouldOffset) minMediaStyles[key]["--app-shell-header-offset"] = rem(headerHeight[key]);
+		if (isResponsiveSize(headerHeight)) {
+			if (typeof headerHeight.base !== "undefined") {
+				baseStyles["--app-shell-header-height"] = rem(headerHeight.base);
+				if (shouldOffset) baseStyles["--app-shell-header-offset"] = rem(headerHeight.base);
 			}
-		});
+			keys(headerHeight).forEach((key) => {
+				if (key !== "base") {
+					minMediaStyles[key] = minMediaStyles[key] || {};
+					minMediaStyles[key]["--app-shell-header-height"] = rem(headerHeight[key]);
+					if (shouldOffset) minMediaStyles[key]["--app-shell-header-offset"] = 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/esm/components/AppShell/AppShellMediaStyles/assign-header-variables/assign-header-variables.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"assign-header-variables.mjs","names":[],"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,IAAI,gBAAgB,YAAY,GAAG;EACjC,MAAM,WAAW,IAAI,YAAY,YAAY,CAAC;EAC9C,WAAW,+BAA+B;EAC1C,IAAI,cACF,WAAW,+BAA+B;CAE9C;CAEA,IAAI,iBAAiB,YAAY,GAAG;EAClC,IAAI,OAAO,aAAa,SAAS,aAAa;GAC5C,WAAW,+BAA+B,IAAI,aAAa,IAAI;GAE/D,IAAI,cACF,WAAW,+BAA+B,IAAI,aAAa,IAAI;EAEnE;EAEA,KAAK,YAAY,CAAC,CAAC,SAAS,QAAQ;GAClC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,IAAI,CAAC,+BAA+B,IAAI,aAAa,IAAI;IAExE,IAAI,cACF,eAAe,IAAI,CAAC,+BAA+B,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.mjs","names":[],"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,eAAe,gBAAgB,aAAa,UAAU;EAC5D,WAAW,+BAA+B;EAC1C,IAAI,cACF,WAAW,+BAA+B;CAE9C,OAAO;EACL,IAAI,gBAAgB,YAAY,GAAG;GACjC,MAAM,WAAW,IAAI,YAAY,YAAY,CAAC;GAC9C,WAAW,+BAA+B;GAC1C,IAAI,cACF,WAAW,+BAA+B;EAE9C;EAEA,IAAI,iBAAiB,YAAY,GAAG;GAClC,IAAI,OAAO,aAAa,SAAS,aAAa;IAC5C,WAAW,+BAA+B,IAAI,aAAa,IAAI;IAE/D,IAAI,cACF,WAAW,+BAA+B,IAAI,aAAa,IAAI;GAEnE;GAEA,KAAK,YAAY,CAAC,CAAC,SAAS,QAAQ;IAClC,IAAI,QAAQ,QAAQ;KAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;KAC9C,eAAe,IAAI,CAAC,+BAA+B,IAAI,aAAa,IAAI;KAExE,IAAI,cACF,eAAe,IAAI,CAAC,+BAA+B,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"}