@mantine/core 9.6.2 → 9.7.0

package/cjs/components/ActionBar/ActionBar.cjs

@@ -16,8 +16,6 @@ let react_jsx_runtime = require("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 = require_factory.factory((_props) => {
 		className: react_remove_scroll.RemoveScroll.classNames.fullWidth,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Transition.Transition, {
 			keepMounted,
-			keepMountedMode: "display-none",
 			mounted: opened,
 			...transitionProps,
 			children: (transitionStyles) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ActionBar_context.ActionBarProvider, {

package/cjs/components/ActionBar/ActionBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.cjs","names":["getDefaultZIndex","factory","useProps","useStyles","useEffectEvent","Affix","RemoveScroll","Transition","ActionBarProvider","Paper","classes","ActionBarDivider","ActionBarCloseButton"],"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,QAAQA,4BAAAA,iBAAiB,OAAO;AAClC;AAEA,MAAa,YAAYC,gBAAAA,SAA2B,WAAW;CAC7D,MAAM,QAAQC,kBAAAA,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,YAAYC,mBAAAA,UAA4B;EAC5C,MAAM;EACN,SAAA,yBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,gBAAA,GAAeC,MAAAA,eAAAA,EAAgB,UAAyB;EAC5D,IAAI,MAAM,QAAQ,YAAY,CAAC,MAAM,aACnC,UAAU;CAEd,CAAC;CAED,CAAA,GAAA,MAAA,UAAA,OAAgB;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,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;EACU;EACE;EACI;EACD;EACH;EAKV,WAAWC,oBAAAA,aAAa,WAAW;EAKnC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;GACe;GACb,iBAAgB;GAChB,SAAS;GACT,GAAI;GAEF,WAAA,qBACA,iBAAA,GAAA,kBAAA,IAAA,CAACC,0BAAAA,mBAAD;IAAmB,OAAO;KAAE;KAAS;KAAW;IAAS;IACvD,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,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,UAAUC,yBAAAA;AACpB,UAAU,cAAc;AACxB,UAAU,UAAUC,yBAAAA;AACpB,UAAU,cAAcC,6BAAAA"}
+{"version":3,"file":"ActionBar.cjs","names":["getDefaultZIndex","factory","useProps","useStyles","useEffectEvent","Affix","RemoveScroll","Transition","ActionBarProvider","Paper","classes","ActionBarDivider","ActionBarCloseButton"],"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,QAAQA,4BAAAA,iBAAiB,OAAO;AAClC;AAEA,MAAa,YAAYC,gBAAAA,SAA2B,WAAW;CAC7D,MAAM,QAAQC,kBAAAA,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,YAAYC,mBAAAA,UAA4B;EAC5C,MAAM;EACN,SAAA,yBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,gBAAA,GAAeC,MAAAA,eAAAA,EAAgB,UAAyB;EAC5D,IAAI,MAAM,QAAQ,YAAY,CAAC,MAAM,aACnC,UAAU;CAEd,CAAC;CAED,CAAA,GAAA,MAAA,UAAA,OAAgB;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,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;EACU;EACE;EACI;EACD;EACH;EACV,WAAWC,oBAAAA,aAAa,WAAW;EAEnC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;GAAyB;GAAa,SAAS;GAAQ,GAAI;GACvD,WAAA,qBACA,iBAAA,GAAA,kBAAA,IAAA,CAACC,0BAAAA,mBAAD;IAAmB,OAAO;KAAE;KAAS;KAAW;IAAS;IACvD,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,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,UAAUC,yBAAAA;AACpB,UAAU,cAAc;AACxB,UAAU,UAAUC,yBAAAA;AACpB,UAAU,cAAcC,6BAAAA"}

package/cjs/components/ActionBar/ActionBar.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.module.cjs","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.cjs","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/cjs/components/AppShell/AppShell.cjs

@@ -6,15 +6,18 @@ const require_use_styles = require("../../core/styles-api/use-styles/use-styles.
 const require_factory = require("../../core/factory/factory.cjs");
 const require_Box = require("../../core/Box/Box.cjs");
 const require_AppShell_context = require("./AppShell.context.cjs");
+const require_resize_section_config = require("./use-app-shell-resize/resize-section-config.cjs");
 const require_AppShell_module = require("./AppShell.module.cjs");
 const require_AppShellAside = require("./AppShellAside/AppShellAside.cjs");
 const require_AppShellFooter = require("./AppShellFooter/AppShellFooter.cjs");
 const require_AppShellHeader = require("./AppShellHeader/AppShellHeader.cjs");
 const require_AppShellMain = require("./AppShellMain/AppShellMain.cjs");
 const require_AppShellMediaStyles = require("./AppShellMediaStyles/AppShellMediaStyles.cjs");
+const require_escape_css_id = require("./AppShellMediaStyles/escape-css-id/escape-css-id.cjs");
 const require_AppShellNavbar = require("./AppShellNavbar/AppShellNavbar.cjs");
 const require_AppShellSection = require("./AppShellSection/AppShellSection.cjs");
 const require_use_resizing = require("./use-resizing/use-resizing.cjs");
+let react = require("react");
 let _mantine_hooks = require("@mantine/hooks");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/AppShell/AppShell.tsx
@@ -28,11 +31,12 @@ const defaultProps = {
 };
 const varsResolver = require_create_vars_resolver.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 = require_factory.factory((_props) => {
 	const props = require_use_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 = require_use_styles.useStyles({
 		name: "AppShell",
 		classes: require_AppShell_module.default,
@@ -46,11 +50,29 @@ const AppShell = require_factory.factory((_props) => {
 		vars,
 		varsResolver
 	});
+	const resizeKey = resize ? require_resize_section_config.RESIZE_SECTION_NAMES.map((section) => resize.sizes[section]).join("|") : void 0;
 	const resizing = require_use_resizing.useResizing({
 		disabled,
-		transitionDuration
+		transitionDuration,
+		resizeKey
 	});
 	const _id = (0, _mantine_hooks.useId)(id);
+	const rootRef = (0, react.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__ */ (0, react_jsx_runtime.jsxs)(require_AppShell_context.AppShellProvider, {
 		value: {
 			getStyles,
@@ -58,7 +80,10 @@ const AppShell = require_factory.factory((_props) => {
 			zIndex,
 			disabled,
 			offsetScrollbars,
-			mode
+			mode,
+			resize,
+			rootRef,
+			resizeOffsets
 		},
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AppShellMediaStyles.AppShellMediaStyles, {
 			navbar,
@@ -67,12 +92,14 @@ const AppShell = require_factory.factory((_props) => {
 			footer,
 			padding,
 			mode,
-			selector: mode === "static" ? `#${_id}` : void 0
+			resize: resizeVariables,
+			selector: resize || mode === "static" ? `#${require_escape_css_id.escapeCssId(_id)}` : void 0
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 			...getStyles("root"),
 			id: _id,
+			ref: (0, _mantine_hooks.useMergedRef)(ref, rootRef),
 			mod: [{
-				resizing,
+				resizing: resizing || resize?.activeSection != null,
 				layout,
 				disabled,
 				mode

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.cjs","names":["getDefaultZIndex","createVarsResolver","factory","useProps","useStyles","useResizing","useId","AppShellProvider","AppShellMediaStyles","Box","classes","AppShellNavbar","AppShellHeader","AppShellMain","AppShellAside","AppShellFooter","AppShellSection"],"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,QAAQA,4BAAAA,iBAAiB,KAAK;CAC9B,MAAM;AACR;AAEA,MAAM,eAAeC,6BAAAA,oBAClB,GAAG,EAAE,oBAAoB,gCAAgC,EACxD,MAAM;CACJ,mCAAmC,GAAG,mBAAmB;CACzD,0CAA0C;AAC5C,EACF,EACF;AAEA,MAAa,WAAWC,gBAAAA,SAA0B,WAAW;CAC3D,MAAM,QAAQC,kBAAAA,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,YAAYC,mBAAAA,UAA2B;EAC3C,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,WAAWC,qBAAAA,YAAY;EAAE;EAAU;CAAmB,CAAC;CAC7D,MAAM,OAAA,GAAMC,eAAAA,MAAAA,CAAM,EAAE;CAEpB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,yBAAAA,kBAAD;EAAkB,OAAO;GAAE;GAAW;GAAY;GAAQ;GAAU;GAAkB;EAAK;EAA3F,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,4BAAAA,qBAAD;GACU;GACA;GACD;GACC;GACC;GACH;GACN,UAAU,SAAS,WAAW,IAAI,QAAQ,KAAA;EAC3C,CAAA,GACD,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,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,UAAUC,wBAAAA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,SAASC,uBAAAA;AAClB,SAAS,SAASC,uBAAAA;AAClB,SAAS,OAAOC,qBAAAA;AAChB,SAAS,QAAQC,sBAAAA;AACjB,SAAS,SAASC,uBAAAA;AAClB,SAAS,UAAUC,wBAAAA"}
+{"version":3,"file":"AppShell.cjs","names":["getDefaultZIndex","createVarsResolver","factory","useProps","useStyles","RESIZE_SECTION_NAMES","useResizing","useId","useRef","AppShellProvider","AppShellMediaStyles","escapeCssId","Box","useMergedRef","classes","AppShellNavbar","AppShellHeader","AppShellMain","AppShellAside","AppShellFooter","AppShellSection"],"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,QAAQA,4BAAAA,iBAAiB,KAAK;CAC9B,MAAM;AACR;AAEA,MAAM,eAAeC,6BAAAA,oBAClB,GAAG,EAAE,oBAAoB,gCAAgC,EACxD,MAAM;CACJ,mCAAmC,GAAG,mBAAmB;CACzD,0CAA0C;CAC1C,kCAAkC,KAAA;AACpC,EACF,EACF;AAEA,MAAa,WAAWC,gBAAAA,SAA0B,WAAW;CAC3D,MAAM,QAAQC,kBAAAA,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,YAAYC,mBAAAA,UAA2B;EAC3C,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,YAAY,SACdC,8BAAAA,qBAAqB,KAAK,YAAY,OAAO,MAAM,QAAQ,CAAC,CAAC,KAAK,GAAG,IACrE,KAAA;CACJ,MAAM,WAAWC,qBAAAA,YAAY;EAAE;EAAU;EAAoB;CAAU,CAAC;CACxE,MAAM,OAAA,GAAMC,eAAAA,MAAAA,CAAM,EAAE;CACpB,MAAM,WAAA,GAAUC,MAAAA,OAAAA,CAAuB,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,iBAAA,GAAA,kBAAA,KAAA,CAACC,yBAAAA,kBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAXF,UAAA,CAaE,iBAAA,GAAA,kBAAA,IAAA,CAACC,4BAAAA,qBAAD;GACU;GACA;GACD;GACC;GACC;GACH;GACN,QAAQ;GACR,UAAU,UAAU,SAAS,WAAW,IAAIC,sBAAAA,YAAY,GAAG,MAAM,KAAA;EAClE,CAAA,GACD,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;GACE,GAAI,UAAU,MAAM;GACpB,IAAI;GACJ,MAAA,GAAKC,eAAAA,aAAAA,CAAa,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,wBAAAA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,SAASC,uBAAAA;AAClB,SAAS,SAASC,uBAAAA;AAClB,SAAS,OAAOC,qBAAAA;AAChB,SAAS,QAAQC,sBAAAA;AACjB,SAAS,SAASC,uBAAAA;AAClB,SAAS,UAAUC,wBAAAA"}

package/cjs/components/AppShell/AppShell.context.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.context.cjs","names":["createSafeContext"],"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,4FAAsBA,CAAAA,CAAAA,kBACpD,gCACF"}
+{"version":3,"file":"AppShell.context.cjs","names":["createSafeContext"],"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,4FAAsBA,CAAAA,CAAAA,kBACpD,gCACF"}

package/cjs/components/AppShell/AppShell.module.cjs

@@ -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
 exports.default = AppShell_module_default;

package/cjs/components/AppShell/AppShell.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.module.cjs","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.cjs","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/cjs/components/AppShell/AppShellAside/AppShellAside.cjs

@@ -4,8 +4,10 @@ const require_use_props = require("../../../core/MantineProvider/use-props/use-p
 const require_factory = require("../../../core/factory/factory.cjs");
 const require_Box = require("../../../core/Box/Box.cjs");
 const require_AppShell_context = require("../AppShell.context.cjs");
+const require_AppShellResizeHandle = require("../AppShellResizeHandle/AppShellResizeHandle.cjs");
 const require_AppShell_module = require("../AppShell.module.cjs");
 let react_remove_scroll = require("react-remove-scroll");
+let _mantine_hooks = require("@mantine/hooks");
 let clsx = require("clsx");
 clsx = require_runtime.__toESM(clsx);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -13,19 +15,38 @@ let react_jsx_runtime = require("react/jsx-runtime");
 const AppShellAside = require_factory.factory((_props) => {
 	const { classNames, className, style, styles, unstyled, vars, withBorder, zIndex, mod, ...others } = require_use_props.useProps("AppShellAside", null, _props);
 	const ctx = require_AppShell_context.useAppShellContext();
+	const sectionId = (0, _mantine_hooks.useId)(others.id);
 	if (ctx.disabled) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+	const isResizable = ctx.resize?.aside.enabled ?? false;
+	const boxProps = ctx.getStyles("aside", {
+		className: (0, clsx.default)({ [react_remove_scroll.RemoveScroll.classNames.zeroRight]: ctx.offsetScrollbars }, className),
+		classNames,
+		styles,
+		style
+	});
+	if (!isResizable) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		component: "aside",
 		mod: [{ "with-border": withBorder ?? ctx.withBorder }, mod],
-		...ctx.getStyles("aside", {
-			className: (0, clsx.default)({ [react_remove_scroll.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__ */ (0, react_jsx_runtime.jsxs)(require_Box.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__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: { display: "contents" },
+			dangerouslySetInnerHTML
+		}) : children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AppShellResizeHandle.AppShellResizeHandle, {
+			section: "aside",
+			sectionId
+		})]
+	});
 });
 AppShellAside.classes = require_AppShell_module.default;
 AppShellAside.displayName = "@mantine/core/AppShellAside";

package/cjs/components/AppShell/AppShellAside/AppShellAside.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppShellAside.cjs","names":["factory","useProps","useAppShellContext","Box","cx","RemoveScroll","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,gBAAgBA,gBAAAA,SAA+B,WAAW;CACrE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,QACA,KACA,GAAG,WACDC,kBAAAA,SAAS,iBAAiB,MAAM,MAAM;CAE1C,MAAM,MAAMC,yBAAAA,mBAAmB;CAE/B,IAAI,IAAI,UACN,OAAO;CAGT,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,WAAU;EACV,KAAK,CAAC,EAAE,eAAe,cAAc,IAAI,WAAW,GAAG,GAAG;EAC1D,GAAI,IAAI,UAAU,SAAS;GACzB,YAAA,GAAWC,KAAAA,QAAAA,CAAG,GAAGC,oBAAAA,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,UAAUC,wBAAAA;AACxB,cAAc,cAAc"}
+{"version":3,"file":"AppShellAside.cjs","names":["factory","useProps","useAppShellContext","useId","cx","RemoveScroll","Box","AppShellResizeHandle","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,gBAAgBA,gBAAAA,SAA+B,WAAW;CACrE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,QACA,KACA,GAAG,WACDC,kBAAAA,SAAS,iBAAiB,MAAM,MAAM;CAE1C,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,aAAA,GAAYC,eAAAA,MAAAA,CAAM,OAAO,EAAE;CAEjC,IAAI,IAAI,UACN,OAAO;CAGT,MAAM,cAAc,IAAI,QAAQ,MAAM,WAAW;CACjD,MAAM,WAAW,IAAI,UAAU,SAAS;EACtC,YAAA,GAAWC,KAAAA,QAAAA,CAAG,GAAGC,oBAAAA,aAAa,WAAW,YAAY,IAAI,iBAAiB,GAAG,SAAS;EACtF;EACA;EACA;CACF,CAAC;CAED,IAAI,CAAC,aACH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,WAAU;EACV,KAAK,CAAC,EAAE,eAAe,cAAc,IAAI,WAAW,GAAG,GAAG;EAC1D,GAAI;EACJ,GAAI;EACJ,QAAQ,EAAE,6BAA6B,QAAQ,UAAU,IAAI,OAAO,OAAO;CAC5E,CAAA;CAIL,MAAM,EAAE,UAAU,yBAAyB,GAAG,SAAS;CAEvD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACA,YAAAA,KAAD;EACE,WAAU;EACV,KAAK,CAAC,EAAE,eAAe,cAAc,IAAI,WAAW,GAAG,GAAG;EAC1D,GAAI;EACJ,GAAI;EACJ,QAAQ,EAAE,6BAA6B,QAAQ,UAAU,IAAI,OAAO,OAAO;EAC3E,IAAI;EANN,UAAA,CAQG,0BACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,OAAO,EAAE,SAAS,WAAW;GAA4B;EAA0B,CAAA,IAExF,UAEF,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,sBAAD;GAAsB,SAAQ;GAAmB;EAAY,CAAA,CAC1D;;AAET,CAAC;AAED,cAAc,UAAUC,wBAAAA;AACxB,cAAc,cAAc"}

package/cjs/components/AppShell/AppShellFooter/AppShellFooter.cjs

@@ -4,8 +4,10 @@ const require_use_props = require("../../../core/MantineProvider/use-props/use-p
 const require_factory = require("../../../core/factory/factory.cjs");
 const require_Box = require("../../../core/Box/Box.cjs");
 const require_AppShell_context = require("../AppShell.context.cjs");
+const require_AppShellResizeHandle = require("../AppShellResizeHandle/AppShellResizeHandle.cjs");
 const require_AppShell_module = require("../AppShell.module.cjs");
 let react_remove_scroll = require("react-remove-scroll");
+let _mantine_hooks = require("@mantine/hooks");
 let clsx = require("clsx");
 clsx = require_runtime.__toESM(clsx);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -13,19 +15,38 @@ let react_jsx_runtime = require("react/jsx-runtime");
 const AppShellFooter = require_factory.factory((_props) => {
 	const { classNames, className, style, styles, unstyled, vars, withBorder, zIndex, mod, ...others } = require_use_props.useProps("AppShellFooter", null, _props);
 	const ctx = require_AppShell_context.useAppShellContext();
+	const sectionId = (0, _mantine_hooks.useId)(others.id);
 	if (ctx.disabled) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+	const isResizable = ctx.resize?.footer.enabled ?? false;
+	const boxProps = ctx.getStyles("footer", {
+		className: (0, clsx.default)({ [react_remove_scroll.RemoveScroll.classNames.zeroRight]: ctx.offsetScrollbars }, className),
+		classNames,
+		styles,
+		style
+	});
+	if (!isResizable) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		component: "footer",
 		mod: [{ "with-border": withBorder ?? ctx.withBorder }, mod],
-		...ctx.getStyles("footer", {
-			className: (0, clsx.default)({ [react_remove_scroll.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__ */ (0, react_jsx_runtime.jsxs)(require_Box.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__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: { display: "contents" },
+			dangerouslySetInnerHTML
+		}) : children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AppShellResizeHandle.AppShellResizeHandle, {
+			section: "footer",
+			sectionId
+		})]
+	});
 });
 AppShellFooter.classes = require_AppShell_module.default;
 AppShellFooter.displayName = "@mantine/core/AppShellFooter";

package/cjs/components/AppShell/AppShellFooter/AppShellFooter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppShellFooter.cjs","names":["factory","useProps","useAppShellContext","Box","cx","RemoveScroll","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,iBAAiBA,gBAAAA,SAAgC,WAAW;CACvE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,QACA,KACA,GAAG,WACDC,kBAAAA,SAAS,kBAAkB,MAAM,MAAM;CAE3C,MAAM,MAAMC,yBAAAA,mBAAmB;CAE/B,IAAI,IAAI,UACN,OAAO;CAGT,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,WAAU;EACV,KAAK,CAAC,EAAE,eAAe,cAAc,IAAI,WAAW,GAAG,GAAG;EAC1D,GAAI,IAAI,UAAU,UAAU;GAC1B,YAAA,GAAWC,KAAAA,QAAAA,CAAG,GAAGC,oBAAAA,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,UAAUC,wBAAAA;AACzB,eAAe,cAAc"}
+{"version":3,"file":"AppShellFooter.cjs","names":["factory","useProps","useAppShellContext","useId","cx","RemoveScroll","Box","AppShellResizeHandle","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,iBAAiBA,gBAAAA,SAAgC,WAAW;CACvE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,QACA,KACA,GAAG,WACDC,kBAAAA,SAAS,kBAAkB,MAAM,MAAM;CAE3C,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,aAAA,GAAYC,eAAAA,MAAAA,CAAM,OAAO,EAAE;CAEjC,IAAI,IAAI,UACN,OAAO;CAGT,MAAM,cAAc,IAAI,QAAQ,OAAO,WAAW;CAClD,MAAM,WAAW,IAAI,UAAU,UAAU;EACvC,YAAA,GAAWC,KAAAA,QAAAA,CAAG,GAAGC,oBAAAA,aAAa,WAAW,YAAY,IAAI,iBAAiB,GAAG,SAAS;EACtF;EACA;EACA;CACF,CAAC;CAED,IAAI,CAAC,aACH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,WAAU;EACV,KAAK,CAAC,EAAE,eAAe,cAAc,IAAI,WAAW,GAAG,GAAG;EAC1D,GAAI;EACJ,GAAI;EACJ,QAAQ,EAAE,+BAA+B,UAAU,IAAI,OAAA,EAAS,SAAS,EAAE;CAC5E,CAAA;CAIL,MAAM,EAAE,UAAU,yBAAyB,GAAG,SAAS;CAEvD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACA,YAAAA,KAAD;EACE,WAAU;EACV,KAAK,CAAC,EAAE,eAAe,cAAc,IAAI,WAAW,GAAG,GAAG;EAC1D,GAAI;EACJ,GAAI;EACJ,QAAQ,EAAE,+BAA+B,UAAU,IAAI,OAAA,EAAS,SAAS,EAAE;EAC3E,IAAI;EANN,UAAA,CAQG,0BACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,OAAO,EAAE,SAAS,WAAW;GAA4B;EAA0B,CAAA,IAExF,UAEF,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,sBAAD;GAAsB,SAAQ;GAAoB;EAAY,CAAA,CAC3D;;AAET,CAAC;AAED,eAAe,UAAUC,wBAAAA;AACzB,eAAe,cAAc"}

package/cjs/components/AppShell/AppShellHeader/AppShellHeader.cjs

@@ -4,8 +4,10 @@ const require_use_props = require("../../../core/MantineProvider/use-props/use-p
 const require_factory = require("../../../core/factory/factory.cjs");
 const require_Box = require("../../../core/Box/Box.cjs");
 const require_AppShell_context = require("../AppShell.context.cjs");
+const require_AppShellResizeHandle = require("../AppShellResizeHandle/AppShellResizeHandle.cjs");
 const require_AppShell_module = require("../AppShell.module.cjs");
 let react_remove_scroll = require("react-remove-scroll");
+let _mantine_hooks = require("@mantine/hooks");
 let clsx = require("clsx");
 clsx = require_runtime.__toESM(clsx);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -13,19 +15,38 @@ let react_jsx_runtime = require("react/jsx-runtime");
 const AppShellHeader = require_factory.factory((_props) => {
 	const { classNames, className, style, styles, unstyled, vars, withBorder, zIndex, mod, ...others } = require_use_props.useProps("AppShellHeader", null, _props);
 	const ctx = require_AppShell_context.useAppShellContext();
+	const sectionId = (0, _mantine_hooks.useId)(others.id);
 	if (ctx.disabled) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+	const isResizable = ctx.resize?.header.enabled ?? false;
+	const boxProps = ctx.getStyles("header", {
+		className: (0, clsx.default)({ [react_remove_scroll.RemoveScroll.classNames.zeroRight]: ctx.offsetScrollbars }, className),
+		classNames,
+		styles,
+		style
+	});
+	if (!isResizable) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		component: "header",
 		mod: [{ "with-border": withBorder ?? ctx.withBorder }, mod],
-		...ctx.getStyles("header", {
-			className: (0, clsx.default)({ [react_remove_scroll.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__ */ (0, react_jsx_runtime.jsxs)(require_Box.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__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: { display: "contents" },
+			dangerouslySetInnerHTML
+		}) : children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AppShellResizeHandle.AppShellResizeHandle, {
+			section: "header",
+			sectionId
+		})]
+	});
 });
 AppShellHeader.classes = require_AppShell_module.default;
 AppShellHeader.displayName = "@mantine/core/AppShellHeader";

package/cjs/components/AppShell/AppShellHeader/AppShellHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppShellHeader.cjs","names":["factory","useProps","useAppShellContext","Box","cx","RemoveScroll","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,iBAAiBA,gBAAAA,SAAgC,WAAW;CACvE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,QACA,KACA,GAAG,WACDC,kBAAAA,SAAS,kBAAkB,MAAM,MAAM;CAE3C,MAAM,MAAMC,yBAAAA,mBAAmB;CAE/B,IAAI,IAAI,UACN,OAAO;CAGT,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,WAAU;EACV,KAAK,CAAC,EAAE,eAAe,cAAc,IAAI,WAAW,GAAG,GAAG;EAC1D,GAAI,IAAI,UAAU,UAAU;GAC1B,YAAA,GAAWC,KAAAA,QAAAA,CAAG,GAAGC,oBAAAA,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,UAAUC,wBAAAA;AACzB,eAAe,cAAc"}
+{"version":3,"file":"AppShellHeader.cjs","names":["factory","useProps","useAppShellContext","useId","cx","RemoveScroll","Box","AppShellResizeHandle","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,iBAAiBA,gBAAAA,SAAgC,WAAW;CACvE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,QACA,KACA,GAAG,WACDC,kBAAAA,SAAS,kBAAkB,MAAM,MAAM;CAE3C,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,aAAA,GAAYC,eAAAA,MAAAA,CAAM,OAAO,EAAE;CAEjC,IAAI,IAAI,UACN,OAAO;CAGT,MAAM,cAAc,IAAI,QAAQ,OAAO,WAAW;CAClD,MAAM,WAAW,IAAI,UAAU,UAAU;EACvC,YAAA,GAAWC,KAAAA,QAAAA,CAAG,GAAGC,oBAAAA,aAAa,WAAW,YAAY,IAAI,iBAAiB,GAAG,SAAS;EACtF;EACA;EACA;CACF,CAAC;CAED,IAAI,CAAC,aACH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,WAAU;EACV,KAAK,CAAC,EAAE,eAAe,cAAc,IAAI,WAAW,GAAG,GAAG;EAC1D,GAAI;EACJ,GAAI;EACJ,QAAQ,EAAE,+BAA+B,UAAU,IAAI,OAAA,EAAS,SAAS,EAAE;CAC5E,CAAA;CAIL,MAAM,EAAE,UAAU,yBAAyB,GAAG,SAAS;CAEvD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACA,YAAAA,KAAD;EACE,WAAU;EACV,KAAK,CAAC,EAAE,eAAe,cAAc,IAAI,WAAW,GAAG,GAAG;EAC1D,GAAI;EACJ,GAAI;EACJ,QAAQ,EAAE,+BAA+B,UAAU,IAAI,OAAA,EAAS,SAAS,EAAE;EAC3E,IAAI;EANN,UAAA,CAQG,0BACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,OAAO,EAAE,SAAS,WAAW;GAA4B;EAA0B,CAAA,IAExF,UAEF,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,sBAAD;GAAsB,SAAQ;GAAoB;EAAY,CAAA,CAC3D;;AAET,CAAC;AAED,eAAe,UAAUC,wBAAAA;AACzB,eAAe,cAAc"}

package/cjs/components/AppShell/AppShellMediaStyles/AppShellMediaStyles.cjs

@@ -5,7 +5,7 @@ const require_InlineStyles = require("../../../core/InlineStyles/InlineStyles.cj
 const require_get_variables = require("./get-variables/get-variables.cjs");
 let react_jsx_runtime = require("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 = require_MantineThemeProvider.useMantineTheme();
 	const ctx = require_Mantine_context.useMantineContext();
 	const { media, baseStyles } = require_get_variables.getVariables({
@@ -15,7 +15,8 @@ function AppShellMediaStyles({ navbar, header, aside, footer, padding, mode, sel
 		aside,
 		padding,
 		theme,
-		mode
+		mode,
+		resize
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InlineStyles.InlineStyles, {
 		media,

package/cjs/components/AppShell/AppShellMediaStyles/AppShellMediaStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppShellMediaStyles.cjs","names":["useMantineTheme","useMantineContext","getVariables","InlineStyles"],"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,QAAQA,6BAAAA,gBAAgB;CAC9B,MAAM,MAAMC,wBAAAA,kBAAkB;CAC9B,MAAM,EAAE,OAAO,eAAeC,sBAAAA,aAAa;EACzC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,qBAAAA,cAAD;EACS;EACP,QAAQ;EACR,UAAU,YAAY,IAAI;CAC3B,CAAA;AAEL"}
+{"version":3,"file":"AppShellMediaStyles.cjs","names":["useMantineTheme","useMantineContext","getVariables","InlineStyles"],"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,QAAQA,6BAAAA,gBAAgB;CAC9B,MAAM,MAAMC,wBAAAA,kBAAkB;CAC9B,MAAM,EAAE,OAAO,eAAeC,sBAAAA,aAAa;EACzC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,qBAAAA,cAAD;EACS;EACP,QAAQ;EACR,UAAU,YAAY,IAAI;CAC3B,CAAA;AAEL"}

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

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