@mantine/core 9.6.2 → 9.7.0

package/cjs/core/styles-api/use-styles/use-styles.cjs

@@ -3,13 +3,15 @@ const require_resolve_class_names = require("./get-class-name/resolve-class-name
 const require_resolve_styles = require("./get-style/resolve-styles/resolve-styles.cjs");
 const require_Mantine_context = require("../../MantineProvider/Mantine.context.cjs");
 const require_MantineThemeProvider = require("../../MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs");
+const require_shallow_equal = require("../../utils/shallow-equal/shallow-equal.cjs");
 const require_get_class_name = require("./get-class-name/get-class-name.cjs");
 const require_resolve_style = require("./get-style/resolve-style/resolve-style.cjs");
 const require_get_style = require("./get-style/get-style.cjs");
 const require_merge_vars = require("./get-style/resolve-vars/merge-vars.cjs");
 const require_use_transformed_styles = require("./use-transformed-styles.cjs");
+let react = require("react");
 //#region packages/@mantine/core/src/core/styles-api/use-styles/use-styles.ts
-function useStyles({ name, classes, props, stylesCtx, className, style, rootSelector = "root", unstyled, classNames, styles, vars, varsResolver, attributes }) {
+function useStyles({ name, classes, props, stylesCtx, className, style, rootSelector = "root", unstyled, classNames, styles, vars, varsResolver, attributes, stable }) {
 	const theme = require_MantineThemeProvider.useMantineTheme();
 	const classNamesPrefix = require_Mantine_context.useMantineClassNamesPrefix();
 	const withStaticClasses = require_Mantine_context.useMantineWithStaticClasses();
@@ -61,7 +63,7 @@ function useStyles({ name, classes, props, stylesCtx, className, style, rootSele
 		style,
 		theme
 	});
-	return (selector, options) => ({
+	const getStyles = (selector, options) => ({
 		...attributes?.[selector],
 		className: require_get_class_name.getClassName({
 			theme,
@@ -95,6 +97,34 @@ function useStyles({ name, classes, props, stylesCtx, className, style, rootSele
 			resolvedRootStyle
 		})
 	});
+	return useStableGetStyles(getStyles, !!stable, [
+		theme,
+		classNamesPrefix,
+		withStaticClasses,
+		headless,
+		withStylesTransform ? props : null,
+		classes,
+		unstyled,
+		className,
+		rootSelector,
+		attributes,
+		stylesCtx,
+		resolvedClassNames,
+		resolvedThemeClassNames,
+		resolvedComponentStyles,
+		resolvedThemeStyles,
+		resolvedVars,
+		resolvedRootStyle
+	]);
+}
+function useStableGetStyles(getStyles, stable, deps) {
+	const cache = (0, react.useRef)(null);
+	if (!stable) return getStyles;
+	if (!cache.current || !require_shallow_equal.shallowEqual(cache.current.deps, deps, 3)) cache.current = {
+		deps,
+		getStyles
+	};
+	return cache.current.getStyles;
 }
 //#endregion
 exports.useStyles = useStyles;

package/cjs/core/styles-api/use-styles/use-styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-styles.cjs","names":["useMantineTheme","useMantineClassNamesPrefix","useMantineWithStaticClasses","useMantineIsHeadless","useStylesTransform","resolveClassNames","resolveStyles","mergeVars","resolveStyle","getClassName","getStyle"],"sources":["../../../../src/core/styles-api/use-styles/use-styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport type { MantineStyleProp } from '../../Box';\nimport { FactoryPayload } from '../../factory';\nimport {\n  useMantineClassNamesPrefix,\n  useMantineIsHeadless,\n  useMantineTheme,\n  useMantineWithStaticClasses,\n} from '../../MantineProvider';\nimport { PartialVarsResolver, VarsResolver } from '../create-vars-resolver/create-vars-resolver';\nimport {\n  Attributes,\n  ClassNames,\n  ClassNamesArray,\n  GetStylesApiOptions,\n  Styles,\n} from '../styles-api.types';\nimport { getClassName } from './get-class-name/get-class-name';\nimport { resolveClassNames } from './get-class-name/resolve-class-names/resolve-class-names';\nimport { getStyle } from './get-style/get-style';\nimport { resolveStyle } from './get-style/resolve-style/resolve-style';\nimport { resolveStyles } from './get-style/resolve-styles/resolve-styles';\nimport { mergeVars } from './get-style/resolve-vars/merge-vars';\nimport { useStylesTransform } from './use-transformed-styles';\n\nexport interface UseStylesInput<Payload extends FactoryPayload> {\n  name: string | (string | undefined)[];\n  classes: Payload['stylesNames'] extends string ? Record<string, string> : never;\n  props: Payload['props'];\n  stylesCtx?: Payload['ctx'];\n  className?: string | undefined;\n  style?: MantineStyleProp;\n  rootSelector?: Payload['stylesNames'];\n  unstyled?: boolean;\n  classNames?: ClassNames<Payload> | ClassNamesArray<Payload>;\n  styles?: Styles<Payload>;\n  vars?: PartialVarsResolver<Payload>;\n  varsResolver?: VarsResolver<Payload>;\n  attributes?: Attributes<Payload>;\n}\n\nexport type GetStylesApi<Payload extends FactoryPayload> = (\n  selector: NonNullable<Payload['stylesNames']>,\n  options?: GetStylesApiOptions\n) => {\n  className: string;\n  style: CSSProperties;\n};\n\nexport function useStyles<Payload extends FactoryPayload>({\n  name,\n  classes,\n  props,\n  stylesCtx,\n  className,\n  style,\n  rootSelector = 'root' as NonNullable<Payload['stylesNames']>,\n  unstyled,\n  classNames,\n  styles,\n  vars,\n  varsResolver,\n  attributes,\n}: UseStylesInput<Payload>): GetStylesApi<Payload> {\n  const theme = useMantineTheme();\n  const classNamesPrefix = useMantineClassNamesPrefix();\n  const withStaticClasses = useMantineWithStaticClasses();\n  const headless = useMantineIsHeadless();\n  const themeName = (Array.isArray(name) ? name : [name]).filter((n) => n) as string[];\n  const { withStylesTransform, getTransformedStyles } = useStylesTransform({\n    props,\n    stylesCtx,\n    themeName,\n    theme,\n  });\n\n  const resolvedClassNames = resolveClassNames({ theme, classNames, props, stylesCtx });\n  const resolvedThemeClassNames = themeName.map((n) =>\n    resolveClassNames({ theme, classNames: theme.components[n]?.classNames, props, stylesCtx })\n  );\n\n  const resolvedComponentStyles = withStylesTransform\n    ? {}\n    : resolveStyles({ theme, styles, props, stylesCtx });\n\n  const resolvedThemeStyles: Record<string, any> = {};\n\n  if (!withStylesTransform) {\n    for (const n of themeName) {\n      const resolved = resolveStyles({\n        theme,\n        styles: theme.components[n]?.styles,\n        props,\n        stylesCtx,\n      });\n\n      for (const key of Object.keys(resolved)) {\n        resolvedThemeStyles[key] = { ...resolvedThemeStyles[key], ...resolved[key] };\n      }\n    }\n  }\n\n  const resolvedVars = mergeVars([\n    headless ? {} : varsResolver?.(theme, props, stylesCtx),\n    ...themeName.map((n) => theme.components?.[n]?.vars?.(theme, props, stylesCtx)),\n    vars?.(theme, props, stylesCtx),\n  ]);\n\n  const resolvedRootStyle = resolveStyle({ style, theme });\n\n  return (selector, options) => ({\n    ...attributes?.[selector],\n\n    className: getClassName({\n      theme,\n      options,\n      themeName,\n      selector,\n      classNamesPrefix,\n      resolvedClassNames,\n      resolvedThemeClassNames,\n      classes,\n      unstyled,\n      className,\n      rootSelector,\n      props,\n      stylesCtx,\n      withStaticClasses,\n      headless,\n      transformedStyles: getTransformedStyles([options?.styles, styles]),\n    }),\n\n    style: getStyle({\n      theme,\n      selector,\n      options,\n      props,\n      stylesCtx,\n      rootSelector,\n      withStylesTransform,\n      resolvedStyles: resolvedComponentStyles,\n      resolvedThemeStyles,\n      resolvedVars,\n      resolvedRootStyle,\n    }),\n  });\n}\n"],"mappings":";;;;;;;;;;;AAiDA,SAAgB,UAA0C,EACxD,MACA,SACA,OACA,WACA,WACA,OACA,eAAe,QACf,UACA,YACA,QACA,MACA,cACA,cACiD;CACjD,MAAM,QAAQA,6BAAAA,gBAAgB;CAC9B,MAAM,mBAAmBC,wBAAAA,2BAA2B;CACpD,MAAM,oBAAoBC,wBAAAA,4BAA4B;CACtD,MAAM,WAAWC,wBAAAA,qBAAqB;CACtC,MAAM,aAAa,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI,EAAA,CAAG,QAAQ,MAAM,CAAC;CACvE,MAAM,EAAE,qBAAqB,yBAAyBC,+BAAAA,mBAAmB;EACvE;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,qBAAqBC,4BAAAA,kBAAkB;EAAE;EAAO;EAAY;EAAO;CAAU,CAAC;CACpF,MAAM,0BAA0B,UAAU,KAAK,MAC7CA,4BAAAA,kBAAkB;EAAE;EAAO,YAAY,MAAM,WAAW,EAAE,EAAE;EAAY;EAAO;CAAU,CAAC,CAC5F;CAEA,MAAM,0BAA0B,sBAC5B,CAAC,IACDC,uBAAAA,cAAc;EAAE;EAAO;EAAQ;EAAO;CAAU,CAAC;CAErD,MAAM,sBAA2C,CAAC;CAElD,IAAI,CAAC,qBACH,KAAK,MAAM,KAAK,WAAW;EACzB,MAAM,WAAWA,uBAAAA,cAAc;GAC7B;GACA,QAAQ,MAAM,WAAW,EAAE,EAAE;GAC7B;GACA;EACF,CAAC;EAED,KAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,GACpC,oBAAoB,OAAO;GAAE,GAAG,oBAAoB;GAAM,GAAG,SAAS;EAAK;CAE/E;CAGF,MAAM,eAAeC,mBAAAA,UAAU;EAC7B,WAAW,CAAC,IAAI,eAAe,OAAO,OAAO,SAAS;EACtD,GAAG,UAAU,KAAK,MAAM,MAAM,aAAa,EAAE,EAAE,OAAO,OAAO,OAAO,SAAS,CAAC;EAC9E,OAAO,OAAO,OAAO,SAAS;CAChC,CAAC;CAED,MAAM,oBAAoBC,sBAAAA,aAAa;EAAE;EAAO;CAAM,CAAC;CAEvD,QAAQ,UAAU,aAAa;EAC7B,GAAG,aAAa;EAEhB,WAAWC,uBAAAA,aAAa;GACtB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,mBAAmB,qBAAqB,CAAC,SAAS,QAAQ,MAAM,CAAC;EACnE,CAAC;EAED,OAAOC,kBAAAA,SAAS;GACd;GACA;GACA;GACA;GACA;GACA;GACA;GACA,gBAAgB;GAChB;GACA;GACA;EACF,CAAC;CACH;AACF"}
+{"version":3,"file":"use-styles.cjs","names":["useMantineTheme","useMantineClassNamesPrefix","useMantineWithStaticClasses","useMantineIsHeadless","useStylesTransform","resolveClassNames","resolveStyles","mergeVars","resolveStyle","getClassName","getStyle","useRef","shallowEqual"],"sources":["../../../../src/core/styles-api/use-styles/use-styles.ts"],"sourcesContent":["import { CSSProperties, useRef } from 'react';\nimport type { MantineStyleProp } from '../../Box';\nimport { FactoryPayload } from '../../factory';\nimport {\n  useMantineClassNamesPrefix,\n  useMantineIsHeadless,\n  useMantineTheme,\n  useMantineWithStaticClasses,\n} from '../../MantineProvider';\nimport { shallowEqual } from '../../utils/shallow-equal/shallow-equal';\nimport { PartialVarsResolver, VarsResolver } from '../create-vars-resolver/create-vars-resolver';\nimport {\n  Attributes,\n  ClassNames,\n  ClassNamesArray,\n  GetStylesApiOptions,\n  Styles,\n} from '../styles-api.types';\nimport { getClassName } from './get-class-name/get-class-name';\nimport { resolveClassNames } from './get-class-name/resolve-class-names/resolve-class-names';\nimport { getStyle } from './get-style/get-style';\nimport { resolveStyle } from './get-style/resolve-style/resolve-style';\nimport { resolveStyles } from './get-style/resolve-styles/resolve-styles';\nimport { mergeVars } from './get-style/resolve-vars/merge-vars';\nimport { useStylesTransform } from './use-transformed-styles';\n\nexport interface UseStylesInput<Payload extends FactoryPayload> {\n  name: string | (string | undefined)[];\n  classes: Payload['stylesNames'] extends string ? Record<string, string> : never;\n  props: Payload['props'];\n  stylesCtx?: Payload['ctx'];\n  className?: string | undefined;\n  style?: MantineStyleProp;\n  rootSelector?: Payload['stylesNames'];\n  unstyled?: boolean;\n  classNames?: ClassNames<Payload> | ClassNamesArray<Payload>;\n  styles?: Styles<Payload>;\n  vars?: PartialVarsResolver<Payload>;\n  varsResolver?: VarsResolver<Payload>;\n  attributes?: Attributes<Payload>;\n  stable?: boolean;\n}\n\nexport type GetStylesApi<Payload extends FactoryPayload> = (\n  selector: NonNullable<Payload['stylesNames']>,\n  options?: GetStylesApiOptions\n) => {\n  className: string;\n  style: CSSProperties;\n};\n\nexport function useStyles<Payload extends FactoryPayload>({\n  name,\n  classes,\n  props,\n  stylesCtx,\n  className,\n  style,\n  rootSelector = 'root' as NonNullable<Payload['stylesNames']>,\n  unstyled,\n  classNames,\n  styles,\n  vars,\n  varsResolver,\n  attributes,\n  stable,\n}: UseStylesInput<Payload>): GetStylesApi<Payload> {\n  const theme = useMantineTheme();\n  const classNamesPrefix = useMantineClassNamesPrefix();\n  const withStaticClasses = useMantineWithStaticClasses();\n  const headless = useMantineIsHeadless();\n  const themeName = (Array.isArray(name) ? name : [name]).filter((n) => n) as string[];\n  const { withStylesTransform, getTransformedStyles } = useStylesTransform({\n    props,\n    stylesCtx,\n    themeName,\n    theme,\n  });\n\n  const resolvedClassNames = resolveClassNames({ theme, classNames, props, stylesCtx });\n  const resolvedThemeClassNames = themeName.map((n) =>\n    resolveClassNames({ theme, classNames: theme.components[n]?.classNames, props, stylesCtx })\n  );\n\n  const resolvedComponentStyles = withStylesTransform\n    ? {}\n    : resolveStyles({ theme, styles, props, stylesCtx });\n\n  const resolvedThemeStyles: Record<string, any> = {};\n\n  if (!withStylesTransform) {\n    for (const n of themeName) {\n      const resolved = resolveStyles({\n        theme,\n        styles: theme.components[n]?.styles,\n        props,\n        stylesCtx,\n      });\n\n      for (const key of Object.keys(resolved)) {\n        resolvedThemeStyles[key] = { ...resolvedThemeStyles[key], ...resolved[key] };\n      }\n    }\n  }\n\n  const resolvedVars = mergeVars([\n    headless ? {} : varsResolver?.(theme, props, stylesCtx),\n    ...themeName.map((n) => theme.components?.[n]?.vars?.(theme, props, stylesCtx)),\n    vars?.(theme, props, stylesCtx),\n  ]);\n\n  const resolvedRootStyle = resolveStyle({ style, theme });\n\n  const getStyles: GetStylesApi<Payload> = (selector, options) => ({\n    ...attributes?.[selector],\n\n    className: getClassName({\n      theme,\n      options,\n      themeName,\n      selector,\n      classNamesPrefix,\n      resolvedClassNames,\n      resolvedThemeClassNames,\n      classes,\n      unstyled,\n      className,\n      rootSelector,\n      props,\n      stylesCtx,\n      withStaticClasses,\n      headless,\n      transformedStyles: getTransformedStyles([options?.styles, styles]),\n    }),\n\n    style: getStyle({\n      theme,\n      selector,\n      options,\n      props,\n      stylesCtx,\n      rootSelector,\n      withStylesTransform,\n      resolvedStyles: resolvedComponentStyles,\n      resolvedThemeStyles,\n      resolvedVars,\n      resolvedRootStyle,\n    }),\n  });\n\n  return useStableGetStyles(getStyles, !!stable, [\n    theme,\n    classNamesPrefix,\n    withStaticClasses,\n    headless,\n    withStylesTransform ? props : null,\n    classes,\n    unstyled,\n    className,\n    rootSelector,\n    attributes,\n    stylesCtx,\n    resolvedClassNames,\n    resolvedThemeClassNames,\n    resolvedComponentStyles,\n    resolvedThemeStyles,\n    resolvedVars,\n    resolvedRootStyle,\n  ]);\n}\n\nfunction useStableGetStyles<Payload extends FactoryPayload>(\n  getStyles: GetStylesApi<Payload>,\n  stable: boolean,\n  deps: unknown[]\n): GetStylesApi<Payload> {\n  const cache = useRef<{ deps: unknown[]; getStyles: GetStylesApi<Payload> }>(null);\n\n  if (!stable) {\n    return getStyles;\n  }\n\n  if (!cache.current || !shallowEqual(cache.current.deps, deps, 3)) {\n    cache.current = { deps, getStyles };\n  }\n\n  return cache.current.getStyles;\n}\n"],"mappings":";;;;;;;;;;;;;AAmDA,SAAgB,UAA0C,EACxD,MACA,SACA,OACA,WACA,WACA,OACA,eAAe,QACf,UACA,YACA,QACA,MACA,cACA,YACA,UACiD;CACjD,MAAM,QAAQA,6BAAAA,gBAAgB;CAC9B,MAAM,mBAAmBC,wBAAAA,2BAA2B;CACpD,MAAM,oBAAoBC,wBAAAA,4BAA4B;CACtD,MAAM,WAAWC,wBAAAA,qBAAqB;CACtC,MAAM,aAAa,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI,EAAA,CAAG,QAAQ,MAAM,CAAC;CACvE,MAAM,EAAE,qBAAqB,yBAAyBC,+BAAAA,mBAAmB;EACvE;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,qBAAqBC,4BAAAA,kBAAkB;EAAE;EAAO;EAAY;EAAO;CAAU,CAAC;CACpF,MAAM,0BAA0B,UAAU,KAAK,MAC7CA,4BAAAA,kBAAkB;EAAE;EAAO,YAAY,MAAM,WAAW,EAAE,EAAE;EAAY;EAAO;CAAU,CAAC,CAC5F;CAEA,MAAM,0BAA0B,sBAC5B,CAAC,IACDC,uBAAAA,cAAc;EAAE;EAAO;EAAQ;EAAO;CAAU,CAAC;CAErD,MAAM,sBAA2C,CAAC;CAElD,IAAI,CAAC,qBACH,KAAK,MAAM,KAAK,WAAW;EACzB,MAAM,WAAWA,uBAAAA,cAAc;GAC7B;GACA,QAAQ,MAAM,WAAW,EAAE,EAAE;GAC7B;GACA;EACF,CAAC;EAED,KAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,GACpC,oBAAoB,OAAO;GAAE,GAAG,oBAAoB;GAAM,GAAG,SAAS;EAAK;CAE/E;CAGF,MAAM,eAAeC,mBAAAA,UAAU;EAC7B,WAAW,CAAC,IAAI,eAAe,OAAO,OAAO,SAAS;EACtD,GAAG,UAAU,KAAK,MAAM,MAAM,aAAa,EAAE,EAAE,OAAO,OAAO,OAAO,SAAS,CAAC;EAC9E,OAAO,OAAO,OAAO,SAAS;CAChC,CAAC;CAED,MAAM,oBAAoBC,sBAAAA,aAAa;EAAE;EAAO;CAAM,CAAC;CAEvD,MAAM,aAAoC,UAAU,aAAa;EAC/D,GAAG,aAAa;EAEhB,WAAWC,uBAAAA,aAAa;GACtB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,mBAAmB,qBAAqB,CAAC,SAAS,QAAQ,MAAM,CAAC;EACnE,CAAC;EAED,OAAOC,kBAAAA,SAAS;GACd;GACA;GACA;GACA;GACA;GACA;GACA;GACA,gBAAgB;GAChB;GACA;GACA;EACF,CAAC;CACH;CAEA,OAAO,mBAAmB,WAAW,CAAC,CAAC,QAAQ;EAC7C;EACA;EACA;EACA;EACA,sBAAsB,QAAQ;EAC9B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;AACH;AAEA,SAAS,mBACP,WACA,QACA,MACuB;CACvB,MAAM,SAAA,GAAQC,MAAAA,OAAAA,CAA8D,IAAI;CAEhF,IAAI,CAAC,QACH,OAAO;CAGT,IAAI,CAAC,MAAM,WAAW,CAACC,sBAAAA,aAAa,MAAM,QAAQ,MAAM,MAAM,CAAC,GAC7D,MAAM,UAAU;EAAE;EAAM;CAAU;CAGpC,OAAO,MAAM,QAAQ;AACvB"}

package/cjs/core/utils/shallow-equal/shallow-equal.cjs

@@ -0,0 +1,19 @@
+"use client";
+//#region packages/@mantine/core/src/core/utils/shallow-equal/shallow-equal.ts
+function shallowEqual(a, b, depth = 1) {
+	if (Object.is(a, b)) return true;
+	if (depth === 0 || typeof a !== "object" || typeof b !== "object" || a === null || b === null) return false;
+	if (Array.isArray(a) || Array.isArray(b)) {
+		if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) return false;
+		for (let i = 0; i < a.length; i += 1) if (!shallowEqual(a[i], b[i], depth - 1)) return false;
+		return true;
+	}
+	const aKeys = Object.keys(a);
+	if (aKeys.length !== Object.keys(b).length) return false;
+	for (const key of aKeys) if (!Object.hasOwn(b, key) || !shallowEqual(a[key], b[key], depth - 1)) return false;
+	return true;
+}
+//#endregion
+exports.shallowEqual = shallowEqual;
+
+//# sourceMappingURL=shallow-equal.cjs.map

package/cjs/core/utils/shallow-equal/shallow-equal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shallow-equal.cjs","names":[],"sources":["../../../../src/core/utils/shallow-equal/shallow-equal.ts"],"sourcesContent":["export function shallowEqual(a: unknown, b: unknown, depth = 1): boolean {\n  if (Object.is(a, b)) {\n    return true;\n  }\n\n  if (depth === 0 || typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) {\n    return false;\n  }\n\n  if (Array.isArray(a) || Array.isArray(b)) {\n    if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) {\n      return false;\n    }\n\n    for (let i = 0; i < a.length; i += 1) {\n      if (!shallowEqual(a[i], b[i], depth - 1)) {\n        return false;\n      }\n    }\n\n    return true;\n  }\n\n  const aKeys = Object.keys(a);\n\n  if (aKeys.length !== Object.keys(b).length) {\n    return false;\n  }\n\n  for (const key of aKeys) {\n    if (!Object.hasOwn(b, key) || !shallowEqual((a as any)[key], (b as any)[key], depth - 1)) {\n      return false;\n    }\n  }\n\n  return true;\n}\n"],"mappings":";;AAAA,SAAgB,aAAa,GAAY,GAAY,QAAQ,GAAY;CACvE,IAAI,OAAO,GAAG,GAAG,CAAC,GAChB,OAAO;CAGT,IAAI,UAAU,KAAK,OAAO,MAAM,YAAY,OAAO,MAAM,YAAY,MAAM,QAAQ,MAAM,MACvF,OAAO;CAGT,IAAI,MAAM,QAAQ,CAAC,KAAK,MAAM,QAAQ,CAAC,GAAG;EACxC,IAAI,CAAC,MAAM,QAAQ,CAAC,KAAK,CAAC,MAAM,QAAQ,CAAC,KAAK,EAAE,WAAW,EAAE,QAC3D,OAAO;EAGT,KAAK,IAAI,IAAI,GAAG,IAAI,EAAE,QAAQ,KAAK,GACjC,IAAI,CAAC,aAAa,EAAE,IAAI,EAAE,IAAI,QAAQ,CAAC,GACrC,OAAO;EAIX,OAAO;CACT;CAEA,MAAM,QAAQ,OAAO,KAAK,CAAC;CAE3B,IAAI,MAAM,WAAW,OAAO,KAAK,CAAC,CAAC,CAAC,QAClC,OAAO;CAGT,KAAK,MAAM,OAAO,OAChB,IAAI,CAAC,OAAO,OAAO,GAAG,GAAG,KAAK,CAAC,aAAc,EAAU,MAAO,EAAU,MAAM,QAAQ,CAAC,GACrF,OAAO;CAIX,OAAO;AACT"}

package/cjs/index.cjs

@@ -157,6 +157,7 @@ const require_AppShellMain = require("./components/AppShell/AppShellMain/AppShel
 const require_AppShellNavbar = require("./components/AppShell/AppShellNavbar/AppShellNavbar.cjs");
 const require_AppShellSection = require("./components/AppShell/AppShellSection/AppShellSection.cjs");
 const require_AppShell = require("./components/AppShell/AppShell.cjs");
+const require_use_app_shell_resize = require("./components/AppShell/use-app-shell-resize/use-app-shell-resize.cjs");
 const require_AspectRatio = require("./components/AspectRatio/AspectRatio.cjs");
 const require_get_parsed_combobox_data = require("./components/Combobox/get-parsed-combobox-data/get-parsed-combobox-data.cjs");
 const require_get_options_lockup = require("./components/Combobox/get-options-lockup/get-options-lockup.cjs");
@@ -252,8 +253,8 @@ const require_Grid = require("./components/Grid/Grid.cjs");
 const require_Mark = require("./components/Mark/Mark.cjs");
 const require_Highlight = require("./components/Highlight/Highlight.cjs");
 const require_HoverCard_context = require("./components/HoverCard/HoverCard.context.cjs");
-const require_HoverCardGroup = require("./components/HoverCard/HoverCardGroup/HoverCardGroup.cjs");
 const require_HoverCardDropdown = require("./components/HoverCard/HoverCardDropdown/HoverCardDropdown.cjs");
+const require_HoverCardGroup = require("./components/HoverCard/HoverCardGroup/HoverCardGroup.cjs");
 const require_HoverCardTarget = require("./components/HoverCard/HoverCardTarget/HoverCardTarget.cjs");
 const require_HoverCard = require("./components/HoverCard/HoverCard.cjs");
 const require_Image = require("./components/Image/Image.cjs");
@@ -374,6 +375,24 @@ const require_ThemeIcon = require("./components/ThemeIcon/ThemeIcon.cjs");
 const require_TimelineItem = require("./components/Timeline/TimelineItem/TimelineItem.cjs");
 const require_Timeline = require("./components/Timeline/Timeline.cjs");
 const require_Title = require("./components/Title/Title.cjs");
+const require_Toggle = require("./components/Toggle/Toggle.cjs");
+const require_ToolbarDivider = require("./components/Toolbar/ToolbarDivider/ToolbarDivider.cjs");
+const require_ToolbarGroup = require("./components/Toolbar/ToolbarGroup/ToolbarGroup.cjs");
+const require_ToolbarToggle = require("./components/Toolbar/ToolbarToggle/ToolbarToggle.cjs");
+const require_ToolbarToggleGroup = require("./components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.cjs");
+const require_ToolbarToggleItem = require("./components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.cjs");
+const require_Toolbar = require("./components/Toolbar/Toolbar.cjs");
+const require_Tour_context = require("./components/Tour/Tour.context.cjs");
+const require_TourBeacon = require("./components/Tour/TourBeacon/TourBeacon.cjs");
+const require_TourBody = require("./components/Tour/TourBody/TourBody.cjs");
+const require_TourCloseButton = require("./components/Tour/TourCloseButton/TourCloseButton.cjs");
+const require_TourNavigation = require("./components/Tour/TourNavigation/TourNavigation.cjs");
+const require_TourOverlay = require("./components/Tour/TourOverlay/TourOverlay.cjs");
+const require_TourRoot = require("./components/Tour/TourRoot/TourRoot.cjs");
+const require_TourStep = require("./components/Tour/TourStep/TourStep.cjs");
+const require_TourTitle = require("./components/Tour/TourTitle/TourTitle.cjs");
+const require_TourTooltip = require("./components/Tour/TourTooltip/TourTooltip.cjs");
+const require_Tour = require("./components/Tour/Tour.cjs");
 const require_use_tree = require("./components/Tree/use-tree.cjs");
 const require_Tree = require("./components/Tree/Tree.cjs");
 const require_merge_async_children = require("./components/Tree/merge-async-children/merge-async-children.cjs");
@@ -630,7 +649,7 @@ Object.defineProperty(exports, "RemoveScroll", {
 });
 exports.RingProgress = require_RingProgress.RingProgress;
 exports.RollingNumber = require_RollingNumber.RollingNumber;
-exports.STYlE_PROPS_DATA = require_style_props_data.STYlE_PROPS_DATA;
+exports.STYLE_PROPS_DATA = require_style_props_data.STYLE_PROPS_DATA;
 exports.ScrollArea = require_ScrollArea.ScrollArea;
 exports.ScrollAreaAutosize = require_ScrollArea.ScrollAreaAutosize;
 exports.Scroller = require_Scroller.Scroller;
@@ -673,10 +692,28 @@ exports.ThemeIcon = require_ThemeIcon.ThemeIcon;
 exports.Timeline = require_Timeline.Timeline;
 exports.TimelineItem = require_TimelineItem.TimelineItem;
 exports.Title = require_Title.Title;
+exports.Toggle = require_Toggle.Toggle;
+exports.Toolbar = require_Toolbar.Toolbar;
+exports.ToolbarDivider = require_ToolbarDivider.ToolbarDivider;
+exports.ToolbarGroup = require_ToolbarGroup.ToolbarGroup;
+exports.ToolbarToggle = require_ToolbarToggle.ToolbarToggle;
+exports.ToolbarToggleGroup = require_ToolbarToggleGroup.ToolbarToggleGroup;
+exports.ToolbarToggleItem = require_ToolbarToggleItem.ToolbarToggleItem;
 exports.Tooltip = require_Tooltip.Tooltip;
 exports.TooltipFloating = require_TooltipFloating.TooltipFloating;
 exports.TooltipGroup = require_TooltipGroup.TooltipGroup;
 exports.TooltipGroupContext = require_TooltipGroup.TooltipGroupContext;
+exports.Tour = require_Tour.Tour;
+exports.TourBeacon = require_TourBeacon.TourBeacon;
+exports.TourBody = require_TourBody.TourBody;
+exports.TourCloseButton = require_TourCloseButton.TourCloseButton;
+exports.TourNavigation = require_TourNavigation.TourNavigation;
+exports.TourOverlay = require_TourOverlay.TourOverlay;
+exports.TourProvider = require_Tour_context.TourProvider;
+exports.TourRoot = require_TourRoot.TourRoot;
+exports.TourStep = require_TourStep.TourStep;
+exports.TourTitle = require_TourTitle.TourTitle;
+exports.TourTooltip = require_TourTooltip.TourTooltip;
 exports.Transition = require_Transition.Transition;
 exports.Tree = require_Tree.Tree;
 exports.TreeSelect = require_TreeSelect.TreeSelect;
@@ -700,6 +737,7 @@ exports.createVarsResolver = require_create_vars_resolver.createVarsResolver;
 exports.darken = require_darken.darken;
 exports.deepMerge = require_deep_merge.deepMerge;
 exports.defaultCssVariablesResolver = require_default_css_variables_resolver.defaultCssVariablesResolver;
+exports.defaultLabels = require_Tour_context.defaultLabels;
 exports.defaultLoaders = require_Loader.defaultLoaders;
 exports.defaultOptionsFilter = require_default_options_filter.defaultOptionsFilter;
 exports.defaultTreeNodeFilter = require_filter_tree_data.defaultTreeNodeFilter;
@@ -783,6 +821,7 @@ exports.toRgba = require_to_rgba.toRgba;
 exports.useAccordionContext = require_Accordion_context.useAccordionContext;
 exports.useAccordionItemContext = require_AccordionItem_context.useAccordionItemContext;
 exports.useAppShellContext = require_AppShell_context.useAppShellContext;
+exports.useAppShellResize = require_use_app_shell_resize.useAppShellResize;
 exports.useCombobox = require_use_combobox.useCombobox;
 exports.useComboboxContext = require_Combobox_context.useComboboxContext;
 exports.useComboboxTargetProps = require_use_combobox_target_props.useComboboxTargetProps;
@@ -831,6 +870,7 @@ exports.useStepperContext = require_Stepper_context.useStepperContext;
 exports.useStyles = require_use_styles.useStyles;
 exports.useTableContext = require_Table_context.useTableContext;
 exports.useTabsContext = require_Tabs_context.useTabsContext;
+exports.useTourContext = require_Tour_context.useTourContext;
 exports.useTree = require_use_tree.useTree;
 exports.useVirtualizedCombobox = require_use_virtualized_combobox.useVirtualizedCombobox;
 exports.v8CssVariablesResolver = require_v8_css_variables_resolver.v8CssVariablesResolver;

package/esm/components/ActionBar/ActionBar.mjs

@@ -16,8 +16,6 @@ import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/ActionBar/ActionBar.tsx
 const defaultProps = {
 	withBorder: true,
-	py: "xs",
-	px: "sm",
 	position: {
 		bottom: 30,
 		left: 0,
@@ -64,7 +62,6 @@ const ActionBar = factory((_props) => {
 		className: RemoveScroll.classNames.fullWidth,
 		children: /* @__PURE__ */ jsx(Transition, {
 			keepMounted,
-			keepMountedMode: "display-none",
 			mounted: opened,
 			...transitionProps,
 			children: (transitionStyles) => /* @__PURE__ */ jsx(ActionBarProvider, {

package/esm/components/ActionBar/ActionBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.mjs","names":["classes"],"sources":["../../../src/components/ActionBar/ActionBar.tsx"],"sourcesContent":["import { useEffect, useEffectEvent } from 'react';\nimport { RemoveScroll } from 'react-remove-scroll';\nimport {\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  MantineRadius,\n  MantineShadow,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Affix, AffixBaseProps } from '../Affix';\nimport { Paper, PaperBaseProps } from '../Paper';\nimport { Transition, TransitionOverride } from '../Transition';\nimport { ActionBarProvider } from './ActionBar.context';\nimport {\n  ActionBarCloseButton,\n  ActionBarCloseButtonStylesNames,\n} from './ActionBarCloseButton/ActionBarCloseButton';\nimport { ActionBarDivider, ActionBarDividerStylesNames } from './ActionBarDivider/ActionBarDivider';\nimport classes from './ActionBar.module.css';\n\nexport type ActionBarStylesNames =\n  | 'root'\n  | ActionBarDividerStylesNames\n  | ActionBarCloseButtonStylesNames;\n\nexport interface ActionBarProps\n  extends\n    BoxProps,\n    AffixBaseProps,\n    PaperBaseProps,\n    StylesApiProps<ActionBarFactory>,\n    ElementProps<'div'> {\n  /** Controls visibility */\n  opened: boolean;\n\n  /** Called when close button is clicked or Escape is pressed */\n  onClose?: () => void;\n\n  /** Props passed down to the `Transition` component, `{ transition: 'pop', duration: 200 }` by default */\n  transitionProps?: TransitionOverride;\n\n  /** Key of `theme.shadows` or any valid CSS `box-shadow` value */\n  shadow?: MantineShadow;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` */\n  radius?: MantineRadius;\n\n  /** Determines whether the action bar should be closed when `Escape` key is pressed, `false` by default */\n  closeOnEscape?: boolean;\n\n  /** `aria-label` of the actions group, `'Actions'` by default */\n  'aria-label'?: string;\n\n  /** If set, the component uses `display: none` to hide the root element instead of removing the DOM node, `false` by default */\n  keepMounted?: boolean;\n\n  children: React.ReactNode;\n}\n\nexport type ActionBarFactory = Factory<{\n  props: ActionBarProps;\n  ref: HTMLDivElement;\n  stylesNames: ActionBarStylesNames;\n  staticComponents: {\n    Divider: typeof ActionBarDivider;\n    CloseButton: typeof ActionBarCloseButton;\n  };\n}>;\n\nconst defaultProps = {\n  withBorder: true,\n  py: 'xs',\n  px: 'sm',\n  position: { bottom: 30, left: 0, right: 0 },\n  transitionProps: { transition: 'pop', duration: 200 },\n  closeOnEscape: false,\n  withinPortal: true,\n  'aria-label': 'Actions',\n  zIndex: getDefaultZIndex('modal'),\n} satisfies Partial<ActionBarProps>;\n\nexport const ActionBar = factory<ActionBarFactory>((_props) => {\n  const props = useProps('ActionBar', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    zIndex,\n    position,\n    keepMounted,\n    opened,\n    transitionProps,\n    withinPortal,\n    children,\n    onClose,\n    portalProps,\n    closeOnEscape,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ActionBarFactory>({\n    name: 'ActionBar',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n  });\n\n  const handleEscape = useEffectEvent((event: KeyboardEvent) => {\n    if (event.key === 'Escape' && !event.isComposing) {\n      onClose?.();\n    }\n  });\n\n  useEffect(() => {\n    if (!closeOnEscape || !opened) {\n      return undefined;\n    }\n\n    window.addEventListener('keydown', handleEscape, { passive: true });\n    return () => window.removeEventListener('keydown', handleEscape);\n  }, [closeOnEscape, opened]);\n\n  return (\n    <Affix\n      zIndex={zIndex}\n      position={position}\n      withinPortal={withinPortal}\n      portalProps={portalProps}\n      unstyled={unstyled}\n      // The default position is anchored to both edges, so the bar is a full width fixed\n      // element. Without this it shifts by the scrollbar width whenever a Modal or Drawer\n      // locks scrolling – which is exactly the flow ActionBar exists for (select rows, run a\n      // bulk action, confirm it in a modal).\n      className={RemoveScroll.classNames.fullWidth}\n    >\n      {/* `keepMountedMode` is pinned to `display-none`: the documented contract is that the\n          bar stays in the DOM and is merely hidden, and `Transition`'s default `activity`\n          mode tears down the effects of everything inside it instead. */}\n      <Transition\n        keepMounted={keepMounted}\n        keepMountedMode=\"display-none\"\n        mounted={opened}\n        {...transitionProps}\n      >\n        {(transitionStyles) => (\n          <ActionBarProvider value={{ onClose, getStyles, unstyled }}>\n            <Paper\n              unstyled={unstyled}\n              {...getStyles('root', { style: transitionStyles })}\n              role=\"group\"\n              {...others}\n            >\n              {children}\n            </Paper>\n          </ActionBarProvider>\n        )}\n      </Transition>\n    </Affix>\n  );\n});\n\nActionBar.classes = classes;\nActionBar.displayName = '@mantine/core/ActionBar';\nActionBar.Divider = ActionBarDivider;\nActionBar.CloseButton = ActionBarCloseButton;\n"],"mappings":";;;;;;;;;;;;;;;;AA0EA,MAAM,eAAe;CACnB,YAAY;CACZ,IAAI;CACJ,IAAI;CACJ,UAAU;EAAE,QAAQ;EAAI,MAAM;EAAG,OAAO;CAAE;CAC1C,iBAAiB;EAAE,YAAY;EAAO,UAAU;CAAI;CACpD,eAAe;CACf,cAAc;CACd,cAAc;CACd,QAAQ,iBAAiB,OAAO;AAClC;AAEA,MAAa,YAAY,SAA2B,WAAW;CAC7D,MAAM,QAAQ,SAAS,aAAa,cAAc,MAAM;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,UACA,aACA,QACA,iBACA,cACA,UACA,SACA,aACA,eACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA4B;EAC5C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,eAAe,gBAAgB,UAAyB;EAC5D,IAAI,MAAM,QAAQ,YAAY,CAAC,MAAM,aACnC,UAAU;CAEd,CAAC;CAED,gBAAgB;EACd,IAAI,CAAC,iBAAiB,CAAC,QACrB;EAGF,OAAO,iBAAiB,WAAW,cAAc,EAAE,SAAS,KAAK,CAAC;EAClE,aAAa,OAAO,oBAAoB,WAAW,YAAY;CACjE,GAAG,CAAC,eAAe,MAAM,CAAC;CAE1B,OACE,oBAAC,OAAD;EACU;EACE;EACI;EACD;EACH;EAKV,WAAW,aAAa,WAAW;EAKnC,UAAA,oBAAC,YAAD;GACe;GACb,iBAAgB;GAChB,SAAS;GACT,GAAI;GAEF,WAAA,qBACA,oBAAC,mBAAD;IAAmB,OAAO;KAAE;KAAS;KAAW;IAAS;IACvD,UAAA,oBAAC,OAAD;KACY;KACV,GAAI,UAAU,QAAQ,EAAE,OAAO,iBAAiB,CAAC;KACjD,MAAK;KACL,GAAI;KAEH;IACI,CAAA;GACU,CAAA;EAEX,CAAA;CACP,CAAA;AAEX,CAAC;AAED,UAAU,UAAUA;AACpB,UAAU,cAAc;AACxB,UAAU,UAAU;AACpB,UAAU,cAAc"}
+{"version":3,"file":"ActionBar.mjs","names":["classes"],"sources":["../../../src/components/ActionBar/ActionBar.tsx"],"sourcesContent":["import { useEffect, useEffectEvent } from 'react';\nimport { RemoveScroll } from 'react-remove-scroll';\nimport {\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  MantineRadius,\n  MantineShadow,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Affix, AffixBaseProps } from '../Affix';\nimport { Paper, PaperBaseProps } from '../Paper';\nimport { Transition, TransitionOverride } from '../Transition';\nimport { ActionBarProvider } from './ActionBar.context';\nimport {\n  ActionBarCloseButton,\n  ActionBarCloseButtonStylesNames,\n} from './ActionBarCloseButton/ActionBarCloseButton';\nimport { ActionBarDivider, ActionBarDividerStylesNames } from './ActionBarDivider/ActionBarDivider';\nimport classes from './ActionBar.module.css';\n\nexport type ActionBarStylesNames =\n  | 'root'\n  | ActionBarDividerStylesNames\n  | ActionBarCloseButtonStylesNames;\n\nexport interface ActionBarProps\n  extends\n    BoxProps,\n    AffixBaseProps,\n    PaperBaseProps,\n    StylesApiProps<ActionBarFactory>,\n    ElementProps<'div'> {\n  /** Controls visibility */\n  opened: boolean;\n\n  /** Called when close button is clicked or Escape is pressed */\n  onClose?: () => void;\n\n  /** Props passed down to the `Transition` component, `{ transition: 'pop', duration: 200 }` by default */\n  transitionProps?: TransitionOverride;\n\n  /** Key of `theme.shadows` or any valid CSS `box-shadow` value */\n  shadow?: MantineShadow;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` */\n  radius?: MantineRadius;\n\n  /** Determines whether the action bar should be closed when `Escape` key is pressed, `false` by default */\n  closeOnEscape?: boolean;\n\n  /** `aria-label` of the actions group, `'Actions'` by default */\n  'aria-label'?: string;\n\n  /** If set, the action bar is kept in the DOM when closed. React `Activity` is used to preserve its state while it is hidden, `false` by default */\n  keepMounted?: boolean;\n\n  children: React.ReactNode;\n}\n\nexport type ActionBarFactory = Factory<{\n  props: ActionBarProps;\n  ref: HTMLDivElement;\n  stylesNames: ActionBarStylesNames;\n  staticComponents: {\n    Divider: typeof ActionBarDivider;\n    CloseButton: typeof ActionBarCloseButton;\n  };\n}>;\n\nconst defaultProps = {\n  withBorder: true,\n  position: { bottom: 30, left: 0, right: 0 },\n  transitionProps: { transition: 'pop', duration: 200 },\n  closeOnEscape: false,\n  withinPortal: true,\n  'aria-label': 'Actions',\n  zIndex: getDefaultZIndex('modal'),\n} satisfies Partial<ActionBarProps>;\n\nexport const ActionBar = factory<ActionBarFactory>((_props) => {\n  const props = useProps('ActionBar', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    zIndex,\n    position,\n    keepMounted,\n    opened,\n    transitionProps,\n    withinPortal,\n    children,\n    onClose,\n    portalProps,\n    closeOnEscape,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ActionBarFactory>({\n    name: 'ActionBar',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n  });\n\n  const handleEscape = useEffectEvent((event: KeyboardEvent) => {\n    if (event.key === 'Escape' && !event.isComposing) {\n      onClose?.();\n    }\n  });\n\n  useEffect(() => {\n    if (!closeOnEscape || !opened) {\n      return undefined;\n    }\n\n    window.addEventListener('keydown', handleEscape, { passive: true });\n    return () => window.removeEventListener('keydown', handleEscape);\n  }, [closeOnEscape, opened]);\n\n  return (\n    <Affix\n      zIndex={zIndex}\n      position={position}\n      withinPortal={withinPortal}\n      portalProps={portalProps}\n      unstyled={unstyled}\n      className={RemoveScroll.classNames.fullWidth}\n    >\n      <Transition keepMounted={keepMounted} mounted={opened} {...transitionProps}>\n        {(transitionStyles) => (\n          <ActionBarProvider value={{ onClose, getStyles, unstyled }}>\n            <Paper\n              unstyled={unstyled}\n              {...getStyles('root', { style: transitionStyles })}\n              role=\"group\"\n              {...others}\n            >\n              {children}\n            </Paper>\n          </ActionBarProvider>\n        )}\n      </Transition>\n    </Affix>\n  );\n});\n\nActionBar.classes = classes;\nActionBar.displayName = '@mantine/core/ActionBar';\nActionBar.Divider = ActionBarDivider;\nActionBar.CloseButton = ActionBarCloseButton;\n"],"mappings":";;;;;;;;;;;;;;;;AA0EA,MAAM,eAAe;CACnB,YAAY;CACZ,UAAU;EAAE,QAAQ;EAAI,MAAM;EAAG,OAAO;CAAE;CAC1C,iBAAiB;EAAE,YAAY;EAAO,UAAU;CAAI;CACpD,eAAe;CACf,cAAc;CACd,cAAc;CACd,QAAQ,iBAAiB,OAAO;AAClC;AAEA,MAAa,YAAY,SAA2B,WAAW;CAC7D,MAAM,QAAQ,SAAS,aAAa,cAAc,MAAM;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,UACA,aACA,QACA,iBACA,cACA,UACA,SACA,aACA,eACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA4B;EAC5C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,eAAe,gBAAgB,UAAyB;EAC5D,IAAI,MAAM,QAAQ,YAAY,CAAC,MAAM,aACnC,UAAU;CAEd,CAAC;CAED,gBAAgB;EACd,IAAI,CAAC,iBAAiB,CAAC,QACrB;EAGF,OAAO,iBAAiB,WAAW,cAAc,EAAE,SAAS,KAAK,CAAC;EAClE,aAAa,OAAO,oBAAoB,WAAW,YAAY;CACjE,GAAG,CAAC,eAAe,MAAM,CAAC;CAE1B,OACE,oBAAC,OAAD;EACU;EACE;EACI;EACD;EACH;EACV,WAAW,aAAa,WAAW;EAEnC,UAAA,oBAAC,YAAD;GAAyB;GAAa,SAAS;GAAQ,GAAI;GACvD,WAAA,qBACA,oBAAC,mBAAD;IAAmB,OAAO;KAAE;KAAS;KAAW;IAAS;IACvD,UAAA,oBAAC,OAAD;KACY;KACV,GAAI,UAAU,QAAQ,EAAE,OAAO,iBAAiB,CAAC;KACjD,MAAK;KACL,GAAI;KAEH;IACI,CAAA;GACU,CAAA;EAEX,CAAA;CACP,CAAA;AAEX,CAAC;AAED,UAAU,UAAUA;AACpB,UAAU,cAAc;AACxB,UAAU,UAAU;AACpB,UAAU,cAAc"}

package/esm/components/ActionBar/ActionBar.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.module.mjs","names":[],"sources":["../../../src/components/ActionBar/ActionBar.module.css"],"sourcesContent":[".root {\n  display: flex;\n  align-items: center;\n  gap: var(--mantine-spacing-sm);\n  width: fit-content;\n  margin-inline: auto;\n}\n\n.divider {\n  width: 1px;\n  align-self: stretch;\n  background-color: var(--mantine-color-default-border);\n}\n"],"mappings":""}
+{"version":3,"file":"ActionBar.module.mjs","names":[],"sources":["../../../src/components/ActionBar/ActionBar.module.css"],"sourcesContent":[".root {\n  display: flex;\n  align-items: center;\n  gap: var(--mantine-spacing-sm);\n  width: fit-content;\n  margin-inline: auto;\n  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);\n}\n\n.divider {\n  width: 1px;\n  align-self: stretch;\n  background-color: var(--mantine-color-default-border);\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.context.mjs","names":[],"sources":["../../../src/components/AppShell/AppShell.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { AppShellFactory } from './AppShell';\n\nexport interface AppShellContextValue {\n  getStyles: GetStylesApi<AppShellFactory>;\n  withBorder: boolean | undefined;\n  zIndex: string | number | undefined;\n  disabled: boolean | undefined;\n  offsetScrollbars: boolean | undefined;\n  mode: 'fixed' | 'static';\n}\n\nexport const [AppShellProvider, useAppShellContext] = createSafeContext<AppShellContextValue>(\n  'AppShell was not found in tree'\n);\n"],"mappings":";;;AAYA,MAAa,CAAC,kBAAkB,sBAAsB,kBACpD,gCACF"}
+{"version":3,"file":"AppShell.context.mjs","names":[],"sources":["../../../src/components/AppShell/AppShell.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { AppShellFactory } from './AppShell';\nimport type { AppShellResizeController, AppShellResizeSection } from './AppShell.types';\n\nexport interface AppShellContextValue {\n  getStyles: GetStylesApi<AppShellFactory>;\n  withBorder: boolean | undefined;\n  zIndex: string | number | undefined;\n  disabled: boolean | undefined;\n  offsetScrollbars: boolean | undefined;\n  mode: 'fixed' | 'static';\n  resize: AppShellResizeController | undefined;\n  rootRef: React.RefObject<HTMLDivElement | null>;\n  resizeOffsets: Partial<Record<AppShellResizeSection, boolean>>;\n}\n\nexport const [AppShellProvider, useAppShellContext] = createSafeContext<AppShellContextValue>(\n  'AppShell was not found in tree'\n);\n"],"mappings":";;;AAgBA,MAAa,CAAC,kBAAkB,sBAAsB,kBACpD,gCACF"}

package/esm/components/AppShell/AppShell.mjs

@@ -6,16 +6,19 @@ import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
 import { factory } from "../../core/factory/factory.mjs";
 import { Box } from "../../core/Box/Box.mjs";
 import { AppShellProvider } from "./AppShell.context.mjs";
+import { RESIZE_SECTION_NAMES } from "./use-app-shell-resize/resize-section-config.mjs";
 import AppShell_module_default from "./AppShell.module.mjs";
 import { AppShellAside } from "./AppShellAside/AppShellAside.mjs";
 import { AppShellFooter } from "./AppShellFooter/AppShellFooter.mjs";
 import { AppShellHeader } from "./AppShellHeader/AppShellHeader.mjs";
 import { AppShellMain } from "./AppShellMain/AppShellMain.mjs";
 import { AppShellMediaStyles } from "./AppShellMediaStyles/AppShellMediaStyles.mjs";
+import { escapeCssId } from "./AppShellMediaStyles/escape-css-id/escape-css-id.mjs";
 import { AppShellNavbar } from "./AppShellNavbar/AppShellNavbar.mjs";
 import { AppShellSection } from "./AppShellSection/AppShellSection.mjs";
 import { useResizing } from "./use-resizing/use-resizing.mjs";
-import { useId } from "@mantine/hooks";
+import { useRef } from "react";
+import { useId as useId$1, useMergedRef } from "@mantine/hooks";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/AppShell/AppShell.tsx
 const defaultProps = {
@@ -28,11 +31,12 @@ const defaultProps = {
 };
 const varsResolver = createVarsResolver((_, { transitionDuration, transitionTimingFunction }) => ({ root: {
 	"--app-shell-transition-duration": `${transitionDuration}ms`,
-	"--app-shell-transition-timing-function": transitionTimingFunction
+	"--app-shell-transition-timing-function": transitionTimingFunction,
+	"--app-shell-resize-handle-size": void 0
 } }));
 const AppShell = factory((_props) => {
 	const props = useProps("AppShell", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, navbar, withBorder, padding, transitionDuration, transitionTimingFunction, header, zIndex, layout, disabled, aside, footer, offsetScrollbars = true, mode, mod, attributes, id, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, navbar, withBorder, padding, transitionDuration, transitionTimingFunction, header, zIndex, layout, disabled, aside, footer, offsetScrollbars = true, mode, mod, attributes, id, resize, ref, ...others } = props;
 	const getStyles = useStyles({
 		name: "AppShell",
 		classes: AppShell_module_default,
@@ -46,11 +50,29 @@ const AppShell = factory((_props) => {
 		vars,
 		varsResolver
 	});
+	const resizeKey = resize ? RESIZE_SECTION_NAMES.map((section) => resize.sizes[section]).join("|") : void 0;
 	const resizing = useResizing({
 		disabled,
-		transitionDuration
+		transitionDuration,
+		resizeKey
 	});
-	const _id = useId(id);
+	const _id = useId$1(id);
+	const rootRef = useRef(null);
+	const resizeVariables = resize ? {
+		sizes: resize.sizes,
+		enabled: {
+			navbar: resize.navbar.enabled,
+			aside: resize.aside.enabled,
+			header: resize.header.enabled,
+			footer: resize.footer.enabled
+		}
+	} : void 0;
+	const resizeOffsets = {
+		navbar: true,
+		aside: true,
+		header: mode === "static" ? true : header?.offset ?? true,
+		footer: mode === "static" ? true : footer?.offset ?? true
+	};
 	return /* @__PURE__ */ jsxs(AppShellProvider, {
 		value: {
 			getStyles,
@@ -58,7 +80,10 @@ const AppShell = factory((_props) => {
 			zIndex,
 			disabled,
 			offsetScrollbars,
-			mode
+			mode,
+			resize,
+			rootRef,
+			resizeOffsets
 		},
 		children: [/* @__PURE__ */ jsx(AppShellMediaStyles, {
 			navbar,
@@ -67,12 +92,14 @@ const AppShell = factory((_props) => {
 			footer,
 			padding,
 			mode,
-			selector: mode === "static" ? `#${_id}` : void 0
+			resize: resizeVariables,
+			selector: resize || mode === "static" ? `#${escapeCssId(_id)}` : void 0
 		}), /* @__PURE__ */ jsx(Box, {
 			...getStyles("root"),
 			id: _id,
+			ref: useMergedRef(ref, rootRef),
 			mod: [{
-				resizing,
+				resizing: resizing || resize?.activeSection != null,
 				layout,
 				disabled,
 				mode

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.mjs","names":["classes"],"sources":["../../../src/components/AppShell/AppShell.tsx"],"sourcesContent":["import { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { AppShellProvider } from './AppShell.context';\nimport {\n  AppShellAsideConfiguration,\n  AppShellFooterConfiguration,\n  AppShellHeaderConfiguration,\n  AppShellNavbarConfiguration,\n  AppShellResponsiveSize,\n} from './AppShell.types';\nimport { AppShellAside, type AppShellAsideProps } from './AppShellAside/AppShellAside';\nimport { AppShellFooter, type AppShellFooterProps } from './AppShellFooter/AppShellFooter';\nimport { AppShellHeader, type AppShellHeaderProps } from './AppShellHeader/AppShellHeader';\nimport { AppShellMain, type AppShellMainProps } from './AppShellMain/AppShellMain';\nimport { AppShellMediaStyles } from './AppShellMediaStyles/AppShellMediaStyles';\nimport { AppShellNavbar, type AppShellNavbarProps } from './AppShellNavbar/AppShellNavbar';\nimport { AppShellSection, type AppShellSectionProps } from './AppShellSection/AppShellSection';\nimport { useResizing } from './use-resizing/use-resizing';\nimport classes from './AppShell.module.css';\nexport type AppShellStylesNames =\n  | 'root'\n  | 'navbar'\n  | 'main'\n  | 'header'\n  | 'footer'\n  | 'aside'\n  | 'section';\n\nexport type AppShellCssVariables = {\n  root: '--app-shell-transition-duration' | '--app-shell-transition-timing-function';\n};\n\nexport interface AppShellProps\n  extends BoxProps, StylesApiProps<AppShellFactory>, ElementProps<'div'> {\n  /** If set, the associated components have a border @default true */\n  withBorder?: boolean;\n\n  /** Padding of the main section. Important: use `padding` prop instead of `p`. @default 0 */\n  padding?: MantineSpacing | AppShellResponsiveSize;\n\n  /** `Navbar` configuration, controls width, breakpoints and collapsed state. Required if you use `Navbar` component. */\n  navbar?: AppShellNavbarConfiguration;\n\n  /** `Aside` configuration, controls width, breakpoints and collapsed state. Required if you use `Aside` component. */\n  aside?: AppShellAsideConfiguration;\n\n  /** `Header` configuration, controls height, offset and collapsed state. Required if you use `Header` component. */\n  header?: AppShellHeaderConfiguration;\n\n  /** `Footer` configuration, controls height, offset and collapsed state. Required if you use `Footer` component. */\n  footer?: AppShellFooterConfiguration;\n\n  /** Duration of all transitions in ms @default 200 */\n  transitionDuration?: number;\n\n  /** Timing function of all transitions @default ease */\n  transitionTimingFunction?: React.CSSProperties['transitionTimingFunction'];\n\n  /** `z-index` of all associated elements @default 100 */\n  zIndex?: string | number;\n\n  /** Determines how `Navbar`/`Aside` are arranged relative to `Header`/`Footer` */\n  layout?: 'default' | 'alt';\n\n  /** If set, `Navbar`, `Aside`, `Header` and `Footer` components are hidden */\n  disabled?: boolean;\n\n  /** If set, `Header` and `Footer` components include styles to offset scrollbars. Based on `react-remove-scroll`. @default true */\n  offsetScrollbars?: boolean;\n\n  /** Determines positioning mode of all sections @default 'fixed' */\n  mode?: 'fixed' | 'static';\n}\n\nexport type AppShellFactory = Factory<{\n  props: AppShellProps;\n  ref: HTMLDivElement;\n  stylesNames: AppShellStylesNames;\n  vars: AppShellCssVariables;\n  staticComponents: {\n    Navbar: typeof AppShellNavbar;\n    Header: typeof AppShellHeader;\n    Main: typeof AppShellMain;\n    Aside: typeof AppShellAside;\n    Footer: typeof AppShellFooter;\n    Section: typeof AppShellSection;\n  };\n}>;\n\nconst defaultProps = {\n  withBorder: true,\n  padding: 0,\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n  zIndex: getDefaultZIndex('app'),\n  mode: 'fixed',\n} satisfies Partial<AppShellProps>;\n\nconst varsResolver = createVarsResolver<AppShellFactory>(\n  (_, { transitionDuration, transitionTimingFunction }) => ({\n    root: {\n      '--app-shell-transition-duration': `${transitionDuration}ms`,\n      '--app-shell-transition-timing-function': transitionTimingFunction,\n    },\n  })\n);\n\nexport const AppShell = factory<AppShellFactory>((_props) => {\n  const props = useProps('AppShell', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    navbar,\n    withBorder,\n    padding,\n    transitionDuration,\n    transitionTimingFunction,\n    header,\n    zIndex,\n    layout,\n    disabled,\n    aside,\n    footer,\n    offsetScrollbars = true,\n    mode,\n    mod,\n    attributes,\n    id,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<AppShellFactory>({\n    name: 'AppShell',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const resizing = useResizing({ disabled, transitionDuration });\n  const _id = useId(id);\n\n  return (\n    <AppShellProvider value={{ getStyles, withBorder, zIndex, disabled, offsetScrollbars, mode }}>\n      <AppShellMediaStyles\n        navbar={navbar}\n        header={header}\n        aside={aside}\n        footer={footer}\n        padding={padding}\n        mode={mode}\n        selector={mode === 'static' ? `#${_id}` : undefined}\n      />\n      <Box\n        {...getStyles('root')}\n        id={_id}\n        mod={[{ resizing, layout, disabled, mode }, mod]}\n        {...others}\n      />\n    </AppShellProvider>\n  );\n});\n\nAppShell.classes = classes;\nAppShell.varsResolver = varsResolver;\nAppShell.displayName = '@mantine/core/AppShell';\nAppShell.Navbar = AppShellNavbar;\nAppShell.Header = AppShellHeader;\nAppShell.Main = AppShellMain;\nAppShell.Aside = AppShellAside;\nAppShell.Footer = AppShellFooter;\nAppShell.Section = AppShellSection;\n\nexport namespace AppShell {\n  export type Props = AppShellProps;\n  export type StylesNames = AppShellStylesNames;\n  export type CssVariables = AppShellCssVariables;\n  export type Factory = AppShellFactory;\n\n  export namespace Section {\n    export type Props = AppShellSectionProps;\n  }\n\n  export namespace Header {\n    export type Props = AppShellHeaderProps;\n  }\n\n  export namespace Footer {\n    export type Props = AppShellFooterProps;\n  }\n\n  export namespace Navbar {\n    export type Props = AppShellNavbarProps;\n  }\n\n  export namespace Aside {\n    export type Props = AppShellAsideProps;\n  }\n\n  export namespace Main {\n    export type Props = AppShellMainProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqGA,MAAM,eAAe;CACnB,YAAY;CACZ,SAAS;CACT,oBAAoB;CACpB,0BAA0B;CAC1B,QAAQ,iBAAiB,KAAK;CAC9B,MAAM;AACR;AAEA,MAAM,eAAe,oBAClB,GAAG,EAAE,oBAAoB,gCAAgC,EACxD,MAAM;CACJ,mCAAmC,GAAG,mBAAmB;CACzD,0CAA0C;AAC5C,EACF,EACF;AAEA,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,YACA,SACA,oBACA,0BACA,QACA,QACA,QACA,UACA,OACA,QACA,mBAAmB,MACnB,MACA,KACA,YACA,IACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA2B;EAC3C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,WAAW,YAAY;EAAE;EAAU;CAAmB,CAAC;CAC7D,MAAM,MAAM,MAAM,EAAE;CAEpB,OACE,qBAAC,kBAAD;EAAkB,OAAO;GAAE;GAAW;GAAY;GAAQ;GAAU;GAAkB;EAAK;EAA3F,UAAA,CACE,oBAAC,qBAAD;GACU;GACA;GACD;GACC;GACC;GACH;GACN,UAAU,SAAS,WAAW,IAAI,QAAQ,KAAA;EAC3C,CAAA,GACD,oBAAC,KAAD;GACE,GAAI,UAAU,MAAM;GACpB,IAAI;GACJ,KAAK,CAAC;IAAE;IAAU;IAAQ;IAAU;GAAK,GAAG,GAAG;GAC/C,GAAI;EACL,CAAA,CACe;;AAEtB,CAAC;AAED,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,OAAO;AAChB,SAAS,QAAQ;AACjB,SAAS,SAAS;AAClB,SAAS,UAAU"}
+{"version":3,"file":"AppShell.mjs","names":["useId","classes"],"sources":["../../../src/components/AppShell/AppShell.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useId, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { AppShellProvider } from './AppShell.context';\nimport {\n  AppShellAsideConfiguration,\n  AppShellFooterConfiguration,\n  AppShellHeaderConfiguration,\n  AppShellNavbarConfiguration,\n  AppShellResizeController,\n  AppShellResponsiveSize,\n} from './AppShell.types';\nimport { AppShellAside, type AppShellAsideProps } from './AppShellAside/AppShellAside';\nimport { AppShellFooter, type AppShellFooterProps } from './AppShellFooter/AppShellFooter';\nimport { AppShellHeader, type AppShellHeaderProps } from './AppShellHeader/AppShellHeader';\nimport { AppShellMain, type AppShellMainProps } from './AppShellMain/AppShellMain';\nimport { AppShellMediaStyles } from './AppShellMediaStyles/AppShellMediaStyles';\nimport { escapeCssId } from './AppShellMediaStyles/escape-css-id/escape-css-id';\nimport { AppShellNavbar, type AppShellNavbarProps } from './AppShellNavbar/AppShellNavbar';\nimport { AppShellSection, type AppShellSectionProps } from './AppShellSection/AppShellSection';\nimport { RESIZE_SECTION_NAMES } from './use-app-shell-resize/resize-section-config';\nimport { useResizing } from './use-resizing/use-resizing';\nimport classes from './AppShell.module.css';\nexport type AppShellStylesNames =\n  | 'root'\n  | 'navbar'\n  | 'main'\n  | 'header'\n  | 'footer'\n  | 'aside'\n  | 'section'\n  | 'resizeHandle';\n\nexport type AppShellCssVariables = {\n  root:\n    | '--app-shell-transition-duration'\n    | '--app-shell-transition-timing-function'\n    | '--app-shell-resize-handle-size';\n};\n\nexport interface AppShellProps\n  extends BoxProps, StylesApiProps<AppShellFactory>, ElementProps<'div'> {\n  /** If set, the associated components have a border @default true */\n  withBorder?: boolean;\n\n  /** Padding of the main section. Important: use `padding` prop instead of `p`. @default 0 */\n  padding?: MantineSpacing | AppShellResponsiveSize;\n\n  /** `Navbar` configuration, controls width, breakpoints and collapsed state. Required if you use `Navbar` component. */\n  navbar?: AppShellNavbarConfiguration;\n\n  /** `Aside` configuration, controls width, breakpoints and collapsed state. Required if you use `Aside` component. */\n  aside?: AppShellAsideConfiguration;\n\n  /** `Header` configuration, controls height, offset and collapsed state. Required if you use `Header` component. */\n  header?: AppShellHeaderConfiguration;\n\n  /** `Footer` configuration, controls height, offset and collapsed state. Required if you use `Footer` component. */\n  footer?: AppShellFooterConfiguration;\n\n  /** Duration of all transitions in ms @default 200 */\n  transitionDuration?: number;\n\n  /** Timing function of all transitions @default ease */\n  transitionTimingFunction?: React.CSSProperties['transitionTimingFunction'];\n\n  /** `z-index` of all associated elements @default 100 */\n  zIndex?: string | number;\n\n  /** Determines how `Navbar`/`Aside` are arranged relative to `Header`/`Footer` */\n  layout?: 'default' | 'alt';\n\n  /** If set, `Navbar`, `Aside`, `Header` and `Footer` components are hidden */\n  disabled?: boolean;\n\n  /** If set, `Header` and `Footer` components include styles to offset scrollbars. Based on `react-remove-scroll`. @default true */\n  offsetScrollbars?: boolean;\n\n  /** Determines positioning mode of all sections @default 'fixed' */\n  mode?: 'fixed' | 'static';\n\n  /** `useAppShellResize` hook instance, enables resizing of the sections configured in the hook */\n  resize?: AppShellResizeController;\n}\n\nexport type AppShellFactory = Factory<{\n  props: AppShellProps;\n  ref: HTMLDivElement;\n  stylesNames: AppShellStylesNames;\n  vars: AppShellCssVariables;\n  staticComponents: {\n    Navbar: typeof AppShellNavbar;\n    Header: typeof AppShellHeader;\n    Main: typeof AppShellMain;\n    Aside: typeof AppShellAside;\n    Footer: typeof AppShellFooter;\n    Section: typeof AppShellSection;\n  };\n}>;\n\nconst defaultProps = {\n  withBorder: true,\n  padding: 0,\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n  zIndex: getDefaultZIndex('app'),\n  mode: 'fixed',\n} satisfies Partial<AppShellProps>;\n\nconst varsResolver = createVarsResolver<AppShellFactory>(\n  (_, { transitionDuration, transitionTimingFunction }) => ({\n    root: {\n      '--app-shell-transition-duration': `${transitionDuration}ms`,\n      '--app-shell-transition-timing-function': transitionTimingFunction,\n      '--app-shell-resize-handle-size': undefined,\n    },\n  })\n);\n\nexport const AppShell = factory<AppShellFactory>((_props) => {\n  const props = useProps('AppShell', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    navbar,\n    withBorder,\n    padding,\n    transitionDuration,\n    transitionTimingFunction,\n    header,\n    zIndex,\n    layout,\n    disabled,\n    aside,\n    footer,\n    offsetScrollbars = true,\n    mode,\n    mod,\n    attributes,\n    id,\n    resize,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<AppShellFactory>({\n    name: 'AppShell',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const resizeKey = resize\n    ? RESIZE_SECTION_NAMES.map((section) => resize.sizes[section]).join('|')\n    : undefined;\n  const resizing = useResizing({ disabled, transitionDuration, resizeKey });\n  const _id = useId(id);\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const resizeVariables = resize\n    ? {\n        sizes: resize.sizes,\n        enabled: {\n          navbar: resize.navbar.enabled,\n          aside: resize.aside.enabled,\n          header: resize.header.enabled,\n          footer: resize.footer.enabled,\n        },\n      }\n    : undefined;\n\n  const resizeOffsets = {\n    navbar: true,\n    aside: true,\n    header: mode === 'static' ? true : (header?.offset ?? true),\n    footer: mode === 'static' ? true : (footer?.offset ?? true),\n  };\n\n  return (\n    <AppShellProvider\n      value={{\n        getStyles,\n        withBorder,\n        zIndex,\n        disabled,\n        offsetScrollbars,\n        mode,\n        resize,\n        rootRef,\n        resizeOffsets,\n      }}\n    >\n      <AppShellMediaStyles\n        navbar={navbar}\n        header={header}\n        aside={aside}\n        footer={footer}\n        padding={padding}\n        mode={mode}\n        resize={resizeVariables}\n        selector={resize || mode === 'static' ? `#${escapeCssId(_id)}` : undefined}\n      />\n      <Box\n        {...getStyles('root')}\n        id={_id}\n        ref={useMergedRef(ref, rootRef)}\n        mod={[{ resizing: resizing || resize?.activeSection != null, layout, disabled, mode }, mod]}\n        {...others}\n      />\n    </AppShellProvider>\n  );\n});\n\nAppShell.classes = classes;\nAppShell.varsResolver = varsResolver;\nAppShell.displayName = '@mantine/core/AppShell';\nAppShell.Navbar = AppShellNavbar;\nAppShell.Header = AppShellHeader;\nAppShell.Main = AppShellMain;\nAppShell.Aside = AppShellAside;\nAppShell.Footer = AppShellFooter;\nAppShell.Section = AppShellSection;\n\nexport namespace AppShell {\n  export type Props = AppShellProps;\n  export type StylesNames = AppShellStylesNames;\n  export type CssVariables = AppShellCssVariables;\n  export type Factory = AppShellFactory;\n\n  export namespace Section {\n    export type Props = AppShellSectionProps;\n  }\n\n  export namespace Header {\n    export type Props = AppShellHeaderProps;\n  }\n\n  export namespace Footer {\n    export type Props = AppShellFooterProps;\n  }\n\n  export namespace Navbar {\n    export type Props = AppShellNavbarProps;\n  }\n\n  export namespace Aside {\n    export type Props = AppShellAsideProps;\n  }\n\n  export namespace Main {\n    export type Props = AppShellMainProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgHA,MAAM,eAAe;CACnB,YAAY;CACZ,SAAS;CACT,oBAAoB;CACpB,0BAA0B;CAC1B,QAAQ,iBAAiB,KAAK;CAC9B,MAAM;AACR;AAEA,MAAM,eAAe,oBAClB,GAAG,EAAE,oBAAoB,gCAAgC,EACxD,MAAM;CACJ,mCAAmC,GAAG,mBAAmB;CACzD,0CAA0C;CAC1C,kCAAkC,KAAA;AACpC,EACF,EACF;AAEA,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,YACA,SACA,oBACA,0BACA,QACA,QACA,QACA,UACA,OACA,QACA,mBAAmB,MACnB,MACA,KACA,YACA,IACA,QACA,KACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA2B;EAC3C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,YAAY,SACd,qBAAqB,KAAK,YAAY,OAAO,MAAM,QAAQ,CAAC,CAAC,KAAK,GAAG,IACrE,KAAA;CACJ,MAAM,WAAW,YAAY;EAAE;EAAU;EAAoB;CAAU,CAAC;CACxE,MAAM,MAAMA,QAAM,EAAE;CACpB,MAAM,UAAU,OAAuB,IAAI;CAE3C,MAAM,kBAAkB,SACpB;EACE,OAAO,OAAO;EACd,SAAS;GACP,QAAQ,OAAO,OAAO;GACtB,OAAO,OAAO,MAAM;GACpB,QAAQ,OAAO,OAAO;GACtB,QAAQ,OAAO,OAAO;EACxB;CACF,IACA,KAAA;CAEJ,MAAM,gBAAgB;EACpB,QAAQ;EACR,OAAO;EACP,QAAQ,SAAS,WAAW,OAAQ,QAAQ,UAAU;EACtD,QAAQ,SAAS,WAAW,OAAQ,QAAQ,UAAU;CACxD;CAEA,OACE,qBAAC,kBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAXF,UAAA,CAaE,oBAAC,qBAAD;GACU;GACA;GACD;GACC;GACC;GACH;GACN,QAAQ;GACR,UAAU,UAAU,SAAS,WAAW,IAAI,YAAY,GAAG,MAAM,KAAA;EAClE,CAAA,GACD,oBAAC,KAAD;GACE,GAAI,UAAU,MAAM;GACpB,IAAI;GACJ,KAAK,aAAa,KAAK,OAAO;GAC9B,KAAK,CAAC;IAAE,UAAU,YAAY,QAAQ,iBAAiB;IAAM;IAAQ;IAAU;GAAK,GAAG,GAAG;GAC1F,GAAI;EACL,CAAA,CACe;;AAEtB,CAAC;AAED,SAAS,UAAUC;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,OAAO;AAChB,SAAS,QAAQ;AACjB,SAAS,SAAS;AAClB,SAAS,UAAU"}

package/esm/components/AppShell/AppShell.module.mjs

@@ -7,7 +7,8 @@ var AppShell_module_default = {
 	"header": "m_3b16f56b",
 	"main": "m_8983817",
 	"footer": "m_3840c879",
-	"section": "m_6dcfc7c7"
+	"section": "m_6dcfc7c7",
+	"resizeHandle": "m_3b25945a"
 };
 //#endregion
 export { AppShell_module_default as default };

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.module.mjs","names":[],"sources":["../../../src/components/AppShell/AppShell.module.css"],"sourcesContent":[".root {\n  &[data-resizing] {\n    --app-shell-transition-duration: 0ms !important;\n  }\n\n  &[data-disabled] {\n    --app-shell-header-offset: 0rem !important;\n    --app-shell-navbar-offset: 0rem !important;\n    --app-shell-aside-offset: 0rem !important;\n    --app-shell-footer-offset: 0rem !important;\n  }\n\n  &[data-mode='static'] {\n    display: grid;\n    grid-template-columns: var(--app-shell-navbar-width, 0) 1fr var(--app-shell-aside-width, 0);\n    grid-template-rows: auto 1fr auto;\n    position: relative;\n    height: 100%;\n    overflow: auto;\n  }\n\n  @mixin light {\n    --app-shell-border-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin dark {\n    --app-shell-border-color: var(--mantine-color-dark-4);\n  }\n}\n\n.navbar,\n.aside,\n.header,\n.main,\n.footer {\n  transition-duration: var(--app-shell-transition-duration);\n  transition-timing-function: var(--app-shell-transition-timing-function);\n}\n\n.navbar,\n.aside {\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  top: var(--app-shell-header-offset, 0rem);\n  height: calc(\n    100dvh - var(--app-shell-header-offset, 0rem) - var(--app-shell-footer-offset, 0rem)\n  );\n  background-color: var(--mantine-color-body);\n  transition-property: transform, top, height;\n\n  :where([data-mode='static']) & {\n    position: var(--app-shell-navbar-position, fixed);\n    grid-row: var(--app-shell-navbar-grid-row, auto);\n    height: 100%;\n  }\n\n  :where([data-layout='alt']) & {\n    top: 0rem;\n    height: 100dvh;\n  }\n\n  :where([data-mode='static'][data-layout='alt']) & {\n    grid-row: 1 / -1;\n    height: 100%;\n  }\n}\n\n.navbar {\n  inset-inline-start: 0;\n  width: var(--app-shell-navbar-width);\n  transition-property: transform, top, height;\n  transform: var(--app-shell-navbar-transform);\n  z-index: var(--app-shell-navbar-z-index);\n\n  :where([data-mode='static']) & {\n    grid-column: var(--app-shell-navbar-grid-column, auto);\n    display: var(--app-shell-navbar-display, flex);\n  }\n\n  @mixin where-rtl {\n    transform: var(--app-shell-navbar-transform-rtl);\n  }\n\n  &:where([data-with-border]) {\n    border-inline-end: 1px solid var(--app-shell-border-color);\n  }\n}\n\n.aside {\n  inset-inline-end: 0;\n  width: var(--app-shell-aside-width);\n  transform: var(--app-shell-aside-transform);\n  z-index: var(--app-shell-aside-z-index);\n\n  :where([data-mode='static']) & {\n    position: var(--app-shell-aside-position, fixed);\n    grid-column: var(--app-shell-aside-grid-column, auto);\n    grid-row: var(--app-shell-aside-grid-row, auto);\n    display: var(--app-shell-aside-display, flex);\n  }\n\n  @mixin where-rtl {\n    transform: var(--app-shell-aside-transform-rtl);\n  }\n\n  &:where([data-with-border]) {\n    border-inline-start: 1px solid var(--app-shell-border-color);\n  }\n\n  :where([data-mode='static'][data-layout='alt']) & {\n    grid-row: 1 / -1;\n  }\n\n  :where([data-scroll-locked]) & {\n    visibility: var(--app-shell-aside-scroll-locked-visibility);\n  }\n}\n\n.main {\n  padding-inline-start: calc(var(--app-shell-navbar-offset, 0rem) + var(--app-shell-padding));\n  padding-inline-end: calc(var(--app-shell-aside-offset, 0rem) + var(--app-shell-padding));\n  padding-top: calc(var(--app-shell-header-offset, 0rem) + var(--app-shell-padding));\n  padding-bottom: calc(var(--app-shell-footer-offset, 0rem) + var(--app-shell-padding));\n  min-height: 100dvh;\n  transition-property: padding;\n\n  :where([data-mode='static']) & {\n    padding-inline-start: var(--app-shell-padding);\n    padding-inline-end: var(--app-shell-padding);\n    padding-top: var(--app-shell-padding);\n    padding-bottom: var(--app-shell-padding);\n    min-height: auto;\n    grid-column: var(--app-shell-main-column-start, 1) / var(--app-shell-main-column-end, -1);\n    grid-row: var(--app-shell-main-grid-row, 2);\n  }\n}\n\n.header,\n.footer {\n  position: fixed;\n  inset-inline: 0;\n  transition-property: transform, margin-inline-start, margin-inline-end;\n  background-color: var(--mantine-color-body);\n\n  :where([data-mode='static']) & {\n    position: var(--app-shell-header-position, fixed);\n    grid-column: var(--app-shell-header-grid-column, auto);\n  }\n\n  :where([data-layout='alt']) & {\n    margin-inline-start: var(--app-shell-navbar-offset, 0rem);\n    margin-inline-end: var(--app-shell-aside-offset, 0rem);\n  }\n\n  :where([data-mode='static'][data-layout='alt']) & {\n    grid-column: var(--app-shell-main-column-start, 1) / var(--app-shell-main-column-end, -1);\n    margin-inline-start: 0rem;\n    margin-inline-end: 0rem;\n  }\n}\n\n.header {\n  top: 0;\n  height: var(--app-shell-header-height);\n  background-color: var(--mantine-color-body);\n  transform: var(--app-shell-header-transform);\n  z-index: var(--app-shell-header-z-index);\n\n  :where([data-mode='static']) & {\n    grid-row: var(--app-shell-header-grid-row, auto);\n  }\n\n  &:where([data-with-border]) {\n    border-bottom: 1px solid var(--app-shell-border-color);\n  }\n}\n\n.footer {\n  bottom: 0;\n  height: calc(var(--app-shell-footer-height) + env(safe-area-inset-bottom));\n  padding-bottom: env(safe-area-inset-bottom);\n  transform: var(--app-shell-footer-transform);\n  z-index: var(--app-shell-footer-z-index);\n\n  :where([data-mode='static']) & {\n    position: var(--app-shell-footer-position, fixed);\n    grid-column: var(--app-shell-footer-grid-column, auto);\n    grid-row: var(--app-shell-footer-grid-row, auto);\n  }\n\n  :where([data-mode='static'][data-layout='alt']) & {\n    grid-column: var(--app-shell-main-column-start, 1) / var(--app-shell-main-column-end, -1);\n  }\n\n  &:where([data-with-border]) {\n    border-top: 1px solid var(--app-shell-border-color);\n  }\n}\n\n.section {\n  flex-grow: 0;\n\n  &:where([data-grow]) {\n    flex-grow: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"AppShell.module.mjs","names":[],"sources":["../../../src/components/AppShell/AppShell.module.css"],"sourcesContent":[".root {\n  &[data-resizing] {\n    --app-shell-transition-duration: 0ms !important;\n  }\n\n  &[data-disabled] {\n    --app-shell-header-offset: 0rem !important;\n    --app-shell-navbar-offset: 0rem !important;\n    --app-shell-aside-offset: 0rem !important;\n    --app-shell-footer-offset: 0rem !important;\n  }\n\n  &[data-mode='static'] {\n    display: grid;\n    grid-template-columns: var(--app-shell-navbar-width, 0) 1fr var(--app-shell-aside-width, 0);\n    grid-template-rows: auto 1fr auto;\n    position: relative;\n    height: 100%;\n    overflow: auto;\n  }\n\n  @mixin light {\n    --app-shell-border-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin dark {\n    --app-shell-border-color: var(--mantine-color-dark-4);\n  }\n}\n\n.navbar,\n.aside,\n.header,\n.main,\n.footer {\n  transition-duration: var(--app-shell-transition-duration);\n  transition-timing-function: var(--app-shell-transition-timing-function);\n}\n\n.navbar,\n.aside {\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  top: var(--app-shell-header-offset, 0rem);\n  height: calc(\n    100dvh - var(--app-shell-header-offset, 0rem) - var(--app-shell-footer-offset, 0rem)\n  );\n  background-color: var(--mantine-color-body);\n  transition-property: transform, top, height;\n\n  :where([data-mode='static']) & {\n    position: var(--app-shell-navbar-position, fixed);\n    grid-row: var(--app-shell-navbar-grid-row, auto);\n    height: 100%;\n  }\n\n  :where([data-layout='alt']) & {\n    top: 0rem;\n    height: 100dvh;\n  }\n\n  :where([data-mode='static'][data-layout='alt']) & {\n    grid-row: 1 / -1;\n    height: 100%;\n  }\n}\n\n.navbar {\n  inset-inline-start: 0;\n  width: var(--app-shell-navbar-width);\n  transition-property: transform, top, height;\n  transform: var(--app-shell-navbar-transform);\n  z-index: var(--app-shell-navbar-z-index);\n\n  :where([data-mode='static']) & {\n    grid-column: var(--app-shell-navbar-grid-column, auto);\n    display: var(--app-shell-navbar-display, flex);\n  }\n\n  @mixin where-rtl {\n    transform: var(--app-shell-navbar-transform-rtl);\n  }\n\n  &:where([data-with-border]) {\n    border-inline-end: 1px solid var(--app-shell-border-color);\n  }\n}\n\n.aside {\n  inset-inline-end: 0;\n  width: var(--app-shell-aside-width);\n  transform: var(--app-shell-aside-transform);\n  z-index: var(--app-shell-aside-z-index);\n\n  :where([data-mode='static']) & {\n    position: var(--app-shell-aside-position, fixed);\n    grid-column: var(--app-shell-aside-grid-column, auto);\n    grid-row: var(--app-shell-aside-grid-row, auto);\n    display: var(--app-shell-aside-display, flex);\n  }\n\n  @mixin where-rtl {\n    transform: var(--app-shell-aside-transform-rtl);\n  }\n\n  &:where([data-with-border]) {\n    border-inline-start: 1px solid var(--app-shell-border-color);\n  }\n\n  :where([data-mode='static'][data-layout='alt']) & {\n    grid-row: 1 / -1;\n  }\n\n  :where([data-scroll-locked]) & {\n    visibility: var(--app-shell-aside-scroll-locked-visibility);\n  }\n}\n\n.main {\n  padding-inline-start: calc(var(--app-shell-navbar-offset, 0rem) + var(--app-shell-padding));\n  padding-inline-end: calc(var(--app-shell-aside-offset, 0rem) + var(--app-shell-padding));\n  padding-top: calc(var(--app-shell-header-offset, 0rem) + var(--app-shell-padding));\n  padding-bottom: calc(var(--app-shell-footer-offset, 0rem) + var(--app-shell-padding));\n  min-height: 100dvh;\n  transition-property: padding;\n\n  :where([data-mode='static']) & {\n    padding-inline-start: var(--app-shell-padding);\n    padding-inline-end: var(--app-shell-padding);\n    padding-top: var(--app-shell-padding);\n    padding-bottom: var(--app-shell-padding);\n    min-height: auto;\n    grid-column: var(--app-shell-main-column-start, 1) / var(--app-shell-main-column-end, -1);\n    grid-row: var(--app-shell-main-grid-row, 2);\n  }\n}\n\n.header,\n.footer {\n  position: fixed;\n  inset-inline: 0;\n  transition-property: transform, margin-inline-start, margin-inline-end;\n  background-color: var(--mantine-color-body);\n\n  :where([data-mode='static']) & {\n    position: var(--app-shell-header-position, fixed);\n    grid-column: var(--app-shell-header-grid-column, auto);\n  }\n\n  :where([data-layout='alt']) & {\n    margin-inline-start: var(--app-shell-navbar-offset, 0rem);\n    margin-inline-end: var(--app-shell-aside-offset, 0rem);\n  }\n\n  :where([data-mode='static'][data-layout='alt']) & {\n    grid-column: var(--app-shell-main-column-start, 1) / var(--app-shell-main-column-end, -1);\n    margin-inline-start: 0rem;\n    margin-inline-end: 0rem;\n  }\n}\n\n.header {\n  top: 0;\n  height: var(--app-shell-header-height);\n  background-color: var(--mantine-color-body);\n  transform: var(--app-shell-header-transform);\n  z-index: var(--app-shell-header-z-index);\n\n  :where([data-mode='static']) & {\n    grid-row: var(--app-shell-header-grid-row, auto);\n  }\n\n  &:where([data-with-border]) {\n    border-bottom: 1px solid var(--app-shell-border-color);\n  }\n}\n\n.footer {\n  bottom: 0;\n  height: calc(var(--app-shell-footer-height) + env(safe-area-inset-bottom));\n  padding-bottom: env(safe-area-inset-bottom);\n  transform: var(--app-shell-footer-transform);\n  z-index: var(--app-shell-footer-z-index);\n  --app-shell-footer-safe-area: env(safe-area-inset-bottom);\n\n  :where([data-mode='static']) & {\n    position: var(--app-shell-footer-position, fixed);\n    grid-column: var(--app-shell-footer-grid-column, auto);\n    grid-row: var(--app-shell-footer-grid-row, auto);\n  }\n\n  :where([data-mode='static'][data-layout='alt']) & {\n    grid-column: var(--app-shell-main-column-start, 1) / var(--app-shell-main-column-end, -1);\n  }\n\n  &:where([data-with-border]) {\n    border-top: 1px solid var(--app-shell-border-color);\n  }\n}\n\n.section {\n  flex-grow: 0;\n\n  &:where([data-grow]) {\n    flex-grow: 1;\n  }\n}\n\n.resizeHandle {\n  position: absolute;\n  z-index: 1;\n  outline: none;\n  touch-action: none;\n  background-color: transparent;\n\n  &::after {\n    content: '';\n    position: absolute;\n    background-color: transparent;\n    transition: background-color 100ms ease;\n  }\n\n  &:where(:hover, [data-active])::after,\n  &:where(:focus-visible)::after {\n    background-color: var(--mantine-primary-color-filled);\n  }\n\n  &:where([data-orientation='vertical']) {\n    top: 0;\n    bottom: 0;\n    width: var(--app-shell-resize-handle-size, rem(6px));\n    cursor: col-resize;\n\n    &::after {\n      top: 0;\n      bottom: 0;\n      left: 50%;\n      width: rem(2px);\n      transform: translateX(-50%);\n    }\n  }\n\n  &:where([data-orientation='horizontal']) {\n    inset-inline: 0;\n    height: var(--app-shell-resize-handle-size, rem(6px));\n    cursor: row-resize;\n\n    &::after {\n      inset-inline: 0;\n      top: 50%;\n      height: rem(2px);\n      transform: translateY(-50%);\n    }\n  }\n\n  &:where([data-section='navbar']) {\n    inset-inline-end: calc(var(--app-shell-resize-handle-size, rem(6px)) / -2);\n    display: var(--app-shell-navbar-resize-handle-display, block);\n  }\n\n  &:where([data-section='aside']) {\n    inset-inline-start: calc(var(--app-shell-resize-handle-size, rem(6px)) / -2);\n    display: var(--app-shell-aside-resize-handle-display, block);\n  }\n\n  &:where([data-section='header']) {\n    bottom: calc(var(--app-shell-resize-handle-size, rem(6px)) / -2);\n    display: var(--app-shell-header-resize-handle-display, block);\n  }\n\n  &:where([data-section='footer']) {\n    top: calc(var(--app-shell-resize-handle-size, rem(6px)) / -2);\n    display: var(--app-shell-footer-resize-handle-display, block);\n  }\n}\n"],"mappings":""}

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"}