@mantine/core 9.5.1 → 9.6.0

package/esm/components/ActionBar/ActionBar.context.mjs

@@ -0,0 +1,8 @@
+"use client";
+import { createSafeContext } from "../../core/utils/create-safe-context/create-safe-context.mjs";
+//#region packages/@mantine/core/src/components/ActionBar/ActionBar.context.ts
+const [ActionBarProvider, useActionBarContext] = createSafeContext("ActionBar component was not found in tree");
+//#endregion
+export { ActionBarProvider, useActionBarContext };
+
+//# sourceMappingURL=ActionBar.context.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBar.context.mjs","names":[],"sources":["../../../src/components/ActionBar/ActionBar.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { ActionBarFactory } from './ActionBar';\n\nexport interface ActionBarContextValue {\n  onClose?: () => void;\n  getStyles: GetStylesApi<ActionBarFactory>;\n  unstyled: boolean | undefined;\n}\n\nexport const [ActionBarProvider, useActionBarContext] = createSafeContext<ActionBarContextValue>(\n  'ActionBar component was not found in tree'\n);\n"],"mappings":";;;AASA,MAAa,CAAC,mBAAmB,uBAAuB,kBACtD,2CACF"}

package/esm/components/ActionBar/ActionBar.mjs

@@ -0,0 +1,94 @@
+"use client";
+import { getDefaultZIndex } from "../../core/utils/get-default-z-index/get-default-z-index.mjs";
+import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
+import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
+import { factory } from "../../core/factory/factory.mjs";
+import { Paper } from "../Paper/Paper.mjs";
+import { Transition } from "../Transition/Transition.mjs";
+import { Affix } from "../Affix/Affix.mjs";
+import { ActionBarProvider } from "./ActionBar.context.mjs";
+import ActionBar_module_default from "./ActionBar.module.mjs";
+import { ActionBarCloseButton } from "./ActionBarCloseButton/ActionBarCloseButton.mjs";
+import { ActionBarDivider } from "./ActionBarDivider/ActionBarDivider.mjs";
+import { RemoveScroll } from "react-remove-scroll";
+import { useEffect, useEffectEvent } from "react";
+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,
+		right: 0
+	},
+	transitionProps: {
+		transition: "pop",
+		duration: 200
+	},
+	closeOnEscape: false,
+	withinPortal: true,
+	"aria-label": "Actions",
+	zIndex: getDefaultZIndex("modal")
+};
+const ActionBar = factory((_props) => {
+	const props = useProps("ActionBar", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, zIndex, position, keepMounted, opened, transitionProps, withinPortal, children, onClose, portalProps, closeOnEscape, attributes, ...others } = props;
+	const getStyles = useStyles({
+		name: "ActionBar",
+		classes: ActionBar_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars
+	});
+	const handleEscape = useEffectEvent((event) => {
+		if (event.key === "Escape" && !event.isComposing) onClose?.();
+	});
+	useEffect(() => {
+		if (!closeOnEscape || !opened) return;
+		window.addEventListener("keydown", handleEscape, { passive: true });
+		return () => window.removeEventListener("keydown", handleEscape);
+	}, [closeOnEscape, opened]);
+	return /* @__PURE__ */ jsx(Affix, {
+		zIndex,
+		position,
+		withinPortal,
+		portalProps,
+		unstyled,
+		className: RemoveScroll.classNames.fullWidth,
+		children: /* @__PURE__ */ jsx(Transition, {
+			keepMounted,
+			keepMountedMode: "display-none",
+			mounted: opened,
+			...transitionProps,
+			children: (transitionStyles) => /* @__PURE__ */ jsx(ActionBarProvider, {
+				value: {
+					onClose,
+					getStyles,
+					unstyled
+				},
+				children: /* @__PURE__ */ jsx(Paper, {
+					unstyled,
+					...getStyles("root", { style: transitionStyles }),
+					role: "group",
+					...others,
+					children
+				})
+			})
+		})
+	});
+});
+ActionBar.classes = ActionBar_module_default;
+ActionBar.displayName = "@mantine/core/ActionBar";
+ActionBar.Divider = ActionBarDivider;
+ActionBar.CloseButton = ActionBarCloseButton;
+//#endregion
+export { ActionBar };
+
+//# sourceMappingURL=ActionBar.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,10 @@
+"use client";
+//#region packages/@mantine/core/src/components/ActionBar/ActionBar.module.css
+var ActionBar_module_default = {
+	"root": "m_de09d2d2",
+	"divider": "m_eab73b29"
+};
+//#endregion
+export { ActionBar_module_default as default };
+
+//# sourceMappingURL=ActionBar.module.mjs.map

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

@@ -0,0 +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":""}

package/esm/components/ActionBar/ActionBarCloseButton/ActionBarCloseButton.mjs

@@ -0,0 +1,33 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { factory } from "../../../core/factory/factory.mjs";
+import { CloseButton } from "../../CloseButton/CloseButton.mjs";
+import { useActionBarContext } from "../ActionBar.context.mjs";
+import ActionBar_module_default from "../ActionBar.module.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/ActionBar/ActionBarCloseButton/ActionBarCloseButton.tsx
+const defaultProps = {};
+const ActionBarCloseButton = factory((_props) => {
+	const { classNames, className, style, styles, unstyled, onClick, ...others } = useProps("ActionBarCloseButton", defaultProps, _props);
+	const ctx = useActionBarContext();
+	return /* @__PURE__ */ jsx(CloseButton, {
+		...ctx.getStyles("closeButton", {
+			className,
+			style,
+			classNames,
+			styles
+		}),
+		unstyled: unstyled ?? ctx.unstyled,
+		...others,
+		onClick: (event) => {
+			onClick?.(event);
+			ctx.onClose?.();
+		}
+	});
+});
+ActionBarCloseButton.classes = ActionBar_module_default;
+ActionBarCloseButton.displayName = "@mantine/core/ActionBarCloseButton";
+//#endregion
+export { ActionBarCloseButton };
+
+//# sourceMappingURL=ActionBarCloseButton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBarCloseButton.mjs","names":["classes"],"sources":["../../../../src/components/ActionBar/ActionBarCloseButton/ActionBarCloseButton.tsx"],"sourcesContent":["import { type ClassNames, factory, Factory, type Styles, useProps } from '../../../core';\nimport { CloseButton, type CloseButtonProps } from '../../CloseButton';\nimport { useActionBarContext } from '../ActionBar.context';\nimport classes from '../ActionBar.module.css';\n\nexport type ActionBarCloseButtonStylesNames = 'closeButton';\n\nexport interface ActionBarCloseButtonProps extends Omit<\n  CloseButtonProps,\n  'classNames' | 'styles' | 'vars'\n> {\n  /** Classes for the `closeButton` selector of the parent `ActionBar` */\n  classNames?: ClassNames<ActionBarCloseButtonFactory>;\n\n  /** Styles for the `closeButton` selector of the parent `ActionBar` */\n  styles?: Styles<ActionBarCloseButtonFactory>;\n\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport type ActionBarCloseButtonFactory = Factory<{\n  props: ActionBarCloseButtonProps;\n  ref: HTMLButtonElement;\n  stylesNames: ActionBarCloseButtonStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps: Partial<ActionBarCloseButtonProps> = {};\n\nexport const ActionBarCloseButton = factory<ActionBarCloseButtonFactory>((_props) => {\n  const props = useProps('ActionBarCloseButton', defaultProps, _props);\n  const { classNames, className, style, styles, unstyled, onClick, ...others } = props;\n  const ctx = useActionBarContext();\n\n  return (\n    <CloseButton\n      {...ctx.getStyles('closeButton', { className, style, classNames, styles })}\n      unstyled={unstyled ?? ctx.unstyled}\n      {...others}\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(event);\n        ctx.onClose?.();\n      }}\n    />\n  );\n});\n\nActionBarCloseButton.classes = classes;\nActionBarCloseButton.displayName = '@mantine/core/ActionBarCloseButton';\n"],"mappings":";;;;;;;;AA2BA,MAAM,eAAmD,CAAC;AAE1D,MAAa,uBAAuB,SAAsC,WAAW;CAEnF,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,UAAU,SAAS,GAAG,WADtD,SAAS,wBAAwB,cAAc,MACsB;CACnF,MAAM,MAAM,oBAAoB;CAEhC,OACE,oBAAC,aAAD;EACE,GAAI,IAAI,UAAU,eAAe;GAAE;GAAW;GAAO;GAAY;EAAO,CAAC;EACzE,UAAU,YAAY,IAAI;EAC1B,GAAI;EACJ,UAAU,UAA+C;GACvD,UAAU,KAAK;GACf,IAAI,UAAU;EAChB;CACD,CAAA;AAEL,CAAC;AAED,qBAAqB,UAAUA;AAC/B,qBAAqB,cAAc"}

package/esm/components/ActionBar/ActionBarDivider/ActionBarDivider.mjs

@@ -0,0 +1,30 @@
+"use client";
+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 { useActionBarContext } from "../ActionBar.context.mjs";
+import ActionBar_module_default from "../ActionBar.module.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/ActionBar/ActionBarDivider/ActionBarDivider.tsx
+const defaultProps = {};
+const ActionBarDivider = factory((_props) => {
+	const { classNames, className, style, styles, vars, role, "aria-orientation": ariaOrientation, ...others } = useProps("ActionBarDivider", defaultProps, _props);
+	const ctx = useActionBarContext();
+	return /* @__PURE__ */ jsx(Box, {
+		...ctx.getStyles("divider", {
+			className,
+			classNames,
+			style,
+			styles
+		}),
+		role: role ?? "separator",
+		"aria-orientation": ariaOrientation ?? "vertical",
+		...others
+	});
+});
+ActionBarDivider.classes = ActionBar_module_default;
+ActionBarDivider.displayName = "@mantine/core/ActionBarDivider";
+//#endregion
+export { ActionBarDivider };
+
+//# sourceMappingURL=ActionBarDivider.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBarDivider.mjs","names":["classes"],"sources":["../../../../src/components/ActionBar/ActionBarDivider/ActionBarDivider.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useActionBarContext } from '../ActionBar.context';\nimport classes from '../ActionBar.module.css';\n\nexport type ActionBarDividerStylesNames = 'divider';\n\nexport interface ActionBarDividerProps\n  extends BoxProps, CompoundStylesApiProps<ActionBarDividerFactory>, ElementProps<'div'> {}\n\nexport type ActionBarDividerFactory = Factory<{\n  props: ActionBarDividerProps;\n  ref: HTMLDivElement;\n  stylesNames: ActionBarDividerStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps: Partial<ActionBarDividerProps> = {};\n\nexport const ActionBarDivider = factory<ActionBarDividerFactory>((_props) => {\n  const props = useProps('ActionBarDivider', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    role,\n    'aria-orientation': ariaOrientation,\n    ...others\n  } = props;\n  const ctx = useActionBarContext();\n\n  return (\n    <Box\n      {...ctx.getStyles('divider', { className, classNames, style, styles })}\n      role={role ?? 'separator'}\n      aria-orientation={ariaOrientation ?? 'vertical'}\n      {...others}\n    />\n  );\n});\n\nActionBarDivider.classes = classes;\nActionBarDivider.displayName = '@mantine/core/ActionBarDivider';\n"],"mappings":";;;;;;;;AAwBA,MAAM,eAA+C,CAAC;AAEtD,MAAa,mBAAmB,SAAkC,WAAW;CAE3E,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,MACA,oBAAoB,iBACpB,GAAG,WATS,SAAS,oBAAoB,cAAc,MAUjD;CACR,MAAM,MAAM,oBAAoB;CAEhC,OACE,oBAAC,KAAD;EACE,GAAI,IAAI,UAAU,WAAW;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACrE,MAAM,QAAQ;EACd,oBAAkB,mBAAmB;EACrC,GAAI;CACL,CAAA;AAEL,CAAC;AAED,iBAAiB,UAAUA;AAC3B,iBAAiB,cAAc"}

package/esm/components/ActionIcon/ActionIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionIcon.mjs","names":["classes"],"sources":["../../../src/components/ActionIcon/ActionIcon.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  getRadius,\n  getSize,\n  MantineColor,\n  MantineGradient,\n  MantineRadius,\n  MantineSize,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Loader, LoaderProps } from '../Loader';\nimport { Transition } from '../Transition';\nimport { UnstyledButton } from '../UnstyledButton';\nimport {\n  ActionIconGroup,\n  type ActionIconGroupProps,\n  type ActionIconGroupStylesNames,\n  type ActionIconGroupCssVariables,\n  type ActionIconGroupFactory,\n} from './ActionIconGroup/ActionIconGroup';\nimport {\n  ActionIconGroupSection,\n  type ActionIconGroupSectionProps,\n  type ActionIconGroupSectionStylesNames,\n  type ActionIconGroupSectionCssVariables,\n  type ActionIconGroupSectionFactory,\n} from './ActionIconGroupSection/ActionIconGroupSection';\nimport classes from './ActionIcon.module.css';\nexport type ActionIconVariant =\n  | 'filled'\n  | 'light'\n  | 'outline'\n  | 'transparent'\n  | 'white'\n  | 'subtle'\n  | 'default'\n  | 'gradient';\n\nexport type ActionIconStylesNames = 'root' | 'loader' | 'icon';\nexport type ActionIconCssVariables = {\n  root:\n    | '--ai-radius'\n    | '--ai-size'\n    | '--ai-bg'\n    | '--ai-hover'\n    | '--ai-hover-color'\n    | '--ai-color'\n    | '--ai-bd';\n};\n\nexport interface ActionIconProps extends BoxProps, StylesApiProps<ActionIconFactory> {\n  'data-disabled'?: boolean;\n  __staticSelector?: string;\n\n  /** If set, `Loader` component is displayed instead of the `children` */\n  loading?: boolean;\n\n  /** Props passed down to the `Loader` component. Ignored when `loading` prop is not set. */\n  loaderProps?: LoaderProps;\n\n  /** Controls width and height of the button. Numbers are converted to rem. @default 'md' */\n  size?: MantineSize | `input-${MantineSize}` | (string & {}) | number;\n\n  /** Key of `theme.colors` or any valid CSS color. @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Gradient values used with `variant=\"gradient\"`. @default theme.defaultGradient */\n  gradient?: MantineGradient;\n\n  /** Sets `disabled` attribute, prevents interactions */\n  disabled?: boolean;\n\n  /** Icon element */\n  children?: React.ReactNode;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n}\n\nexport type ActionIconFactory = PolymorphicFactory<{\n  props: ActionIconProps;\n  defaultComponent: 'button';\n  defaultRef: HTMLButtonElement;\n  stylesNames: ActionIconStylesNames;\n  variant: ActionIconVariant;\n  vars: ActionIconCssVariables;\n  staticComponents: {\n    Group: typeof ActionIconGroup;\n    GroupSection: typeof ActionIconGroupSection;\n  };\n}>;\n\nconst varsResolver = createVarsResolver<ActionIconFactory>(\n  (theme, { size, radius, variant, gradient, color, autoContrast }) => {\n    const colors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      gradient,\n      variant: variant || 'filled',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--ai-size': getSize(size, 'ai-size'),\n        '--ai-radius': radius === undefined ? undefined : getRadius(radius),\n        '--ai-bg': color || variant ? colors.background : undefined,\n        '--ai-hover': color || variant ? colors.hover : undefined,\n        '--ai-hover-color': color || variant ? colors.hoverColor : undefined,\n        '--ai-color': colors.color,\n        '--ai-bd': color || variant ? colors.border : undefined,\n      },\n    };\n  }\n);\n\nexport const ActionIcon = polymorphicFactory<ActionIconFactory>((_props) => {\n  const props = useProps('ActionIcon', null, _props);\n  const {\n    className,\n    unstyled,\n    variant,\n    classNames,\n    styles,\n    style,\n    loading,\n    loaderProps,\n    size,\n    color,\n    radius,\n    __staticSelector,\n    gradient,\n    vars,\n    children,\n    disabled,\n    'data-disabled': dataDisabled,\n    autoContrast,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ActionIconFactory>({\n    name: ['ActionIcon', __staticSelector],\n    props,\n    className,\n    style,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <UnstyledButton\n      {...getStyles('root', { active: !disabled && !loading && !dataDisabled })}\n      aria-busy={loading || undefined}\n      {...others}\n      unstyled={unstyled}\n      variant={variant}\n      size={size}\n      disabled={disabled || loading}\n      mod={[{ loading, disabled: disabled || dataDisabled }, mod]}\n    >\n      {typeof loading === 'boolean' && (\n        <Transition mounted={loading} transition=\"slide-down\" duration={150}>\n          {(transitionStyles) => (\n            <Box component=\"span\" {...getStyles('loader', { style: transitionStyles })} aria-hidden>\n              <Loader color=\"var(--ai-color)\" size=\"calc(var(--ai-size) * 0.55)\" {...loaderProps} />\n            </Box>\n          )}\n        </Transition>\n      )}\n\n      <Box component=\"span\" mod={{ loading }} {...getStyles('icon')}>\n        {children}\n      </Box>\n    </UnstyledButton>\n  );\n});\n\nActionIcon.classes = classes;\nActionIcon.varsResolver = varsResolver;\nActionIcon.displayName = '@mantine/core/ActionIcon';\nActionIcon.Group = ActionIconGroup;\nActionIcon.GroupSection = ActionIconGroupSection;\n\nexport namespace ActionIcon {\n  export type Props = ActionIconProps;\n  export type StylesNames = ActionIconStylesNames;\n  export type CssVariables = ActionIconCssVariables;\n  export type Factory = ActionIconFactory;\n\n  export namespace Group {\n    export type Props = ActionIconGroupProps;\n    export type StylesNames = ActionIconGroupStylesNames;\n    export type CssVariables = ActionIconGroupCssVariables;\n    export type Factory = ActionIconGroupFactory;\n  }\n\n  export namespace GroupSection {\n    export type Props = ActionIconGroupSectionProps;\n    export type StylesNames = ActionIconGroupSectionStylesNames;\n    export type CssVariables = ActionIconGroupSectionCssVariables;\n    export type Factory = ActionIconGroupSectionFactory;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAqGA,MAAM,eAAe,oBAClB,OAAO,EAAE,MAAM,QAAQ,SAAS,UAAU,OAAO,mBAAmB;CACnE,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA;EACA,SAAS,WAAW;EACpB;CACF,CAAC;CAED,OAAO,EACL,MAAM;EACJ,aAAa,QAAQ,MAAM,SAAS;EACpC,eAAe,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;EAClE,WAAW,SAAS,UAAU,OAAO,aAAa,KAAA;EAClD,cAAc,SAAS,UAAU,OAAO,QAAQ,KAAA;EAChD,oBAAoB,SAAS,UAAU,OAAO,aAAa,KAAA;EAC3D,cAAc,OAAO;EACrB,WAAW,SAAS,UAAU,OAAO,SAAS,KAAA;CAChD,EACF;AACF,CACF;AAEA,MAAa,aAAa,oBAAuC,WAAW;CAC1E,MAAM,QAAQ,SAAS,cAAc,MAAM,MAAM;CACjD,MAAM,EACJ,WACA,UACA,SACA,YACA,QACA,OACA,SACA,aACA,MACA,OACA,QACA,kBACA,UACA,MACA,UACA,UACA,iBAAiB,cACjB,cACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA6B;EAC7C,MAAM,CAAC,cAAc,gBAAgB;EACrC;EACA;EACA;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,qBAAC,gBAAD;EACE,GAAI,UAAU,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,WAAW,CAAC,aAAa,CAAC;EACxE,aAAW,WAAW,KAAA;EACtB,GAAI;EACM;EACD;EACH;EACN,UAAU,YAAY;EACtB,KAAK,CAAC;GAAE;GAAS,UAAU,YAAY;EAAa,GAAG,GAAG;YAR5D,CAUG,OAAO,YAAY,aAClB,oBAAC,YAAD;GAAY,SAAS;GAAS,YAAW;GAAa,UAAU;cAC5D,qBACA,oBAAC,KAAD;IAAK,WAAU;IAAO,GAAI,UAAU,UAAU,EAAE,OAAO,iBAAiB,CAAC;IAAG,eAAA;cAC1E,oBAAC,QAAD;KAAQ,OAAM;KAAkB,MAAK;KAA8B,GAAI;IAAc,CAAA;GAClF,CAAA;EAEG,CAAA,GAGd,oBAAC,KAAD;GAAK,WAAU;GAAO,KAAK,EAAE,QAAQ;GAAG,GAAI,UAAU,MAAM;GACzD;EACE,CAAA,CACS;;AAEpB,CAAC;AAED,WAAW,UAAUA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc;AACzB,WAAW,QAAQ;AACnB,WAAW,eAAe"}
+{"version":3,"file":"ActionIcon.mjs","names":["classes"],"sources":["../../../src/components/ActionIcon/ActionIcon.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  getRadius,\n  getSize,\n  MantineColor,\n  MantineGradient,\n  MantineRadius,\n  MantineSize,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Loader, LoaderProps } from '../Loader';\nimport { Transition } from '../Transition';\nimport { UnstyledButton } from '../UnstyledButton';\nimport {\n  ActionIconGroup,\n  type ActionIconGroupProps,\n  type ActionIconGroupStylesNames,\n  type ActionIconGroupCssVariables,\n  type ActionIconGroupFactory,\n} from './ActionIconGroup/ActionIconGroup';\nimport {\n  ActionIconGroupSection,\n  type ActionIconGroupSectionProps,\n  type ActionIconGroupSectionStylesNames,\n  type ActionIconGroupSectionCssVariables,\n  type ActionIconGroupSectionFactory,\n} from './ActionIconGroupSection/ActionIconGroupSection';\nimport classes from './ActionIcon.module.css';\nexport type ActionIconVariant =\n  | 'filled'\n  | 'light'\n  | 'outline'\n  | 'transparent'\n  | 'white'\n  | 'subtle'\n  | 'default'\n  | 'gradient';\n\nexport type ActionIconStylesNames = 'root' | 'loader' | 'icon';\nexport type ActionIconCssVariables = {\n  root:\n    | '--ai-radius'\n    | '--ai-size'\n    | '--ai-bg'\n    | '--ai-hover'\n    | '--ai-hover-color'\n    | '--ai-color'\n    | '--ai-bd';\n};\n\nexport interface ActionIconProps extends BoxProps, StylesApiProps<ActionIconFactory> {\n  'data-disabled'?: boolean;\n  __staticSelector?: string;\n\n  /** If set, `Loader` component is displayed instead of the `children` */\n  loading?: boolean;\n\n  /** Props passed down to the `Loader` component. Ignored when `loading` prop is not set. */\n  loaderProps?: LoaderProps;\n\n  /** Controls width and height of the button. Numbers are converted to rem. @default 'md' */\n  size?: MantineSize | `input-${MantineSize}` | (string & {}) | number;\n\n  /** Key of `theme.colors` or any valid CSS color. @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Gradient values used with `variant=\"gradient\"`. @default theme.defaultGradient */\n  gradient?: MantineGradient;\n\n  /** Sets `disabled` attribute, prevents interactions */\n  disabled?: boolean;\n\n  /** Icon element */\n  children?: React.ReactNode;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n}\n\nexport type ActionIconFactory = PolymorphicFactory<{\n  props: ActionIconProps;\n  defaultComponent: 'button';\n  defaultRef: HTMLButtonElement;\n  stylesNames: ActionIconStylesNames;\n  variant: ActionIconVariant;\n  vars: ActionIconCssVariables;\n  staticComponents: {\n    Group: typeof ActionIconGroup;\n    GroupSection: typeof ActionIconGroupSection;\n  };\n}>;\n\nconst varsResolver = createVarsResolver<ActionIconFactory>(\n  (theme, { size, radius, variant, gradient, color, autoContrast }) => {\n    const colors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      gradient,\n      variant: variant || 'filled',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--ai-size': getSize(size, 'ai-size'),\n        '--ai-radius': radius === undefined ? undefined : getRadius(radius),\n        '--ai-bg': color || variant ? colors.background : undefined,\n        '--ai-hover': color || variant ? colors.hover : undefined,\n        '--ai-hover-color': color || variant ? colors.hoverColor : undefined,\n        '--ai-color': colors.color,\n        '--ai-bd': color || variant ? colors.border : undefined,\n      },\n    };\n  }\n);\n\nexport const ActionIcon = polymorphicFactory<ActionIconFactory>((_props) => {\n  const props = useProps('ActionIcon', null, _props);\n  const {\n    className,\n    unstyled,\n    variant,\n    classNames,\n    styles,\n    style,\n    loading,\n    loaderProps,\n    size,\n    color,\n    radius,\n    __staticSelector,\n    gradient,\n    vars,\n    children,\n    disabled,\n    'data-disabled': dataDisabled,\n    autoContrast,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ActionIconFactory>({\n    name: ['ActionIcon', __staticSelector],\n    props,\n    className,\n    style,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <UnstyledButton\n      {...getStyles('root', { active: !disabled && !loading && !dataDisabled })}\n      aria-busy={loading || undefined}\n      {...others}\n      unstyled={unstyled}\n      variant={variant}\n      size={size}\n      disabled={disabled || loading}\n      mod={[{ loading, disabled: disabled || dataDisabled }, mod]}\n    >\n      {typeof loading === 'boolean' && (\n        <Transition mounted={loading} transition=\"slide-down\" duration={150}>\n          {(transitionStyles) => (\n            <Box component=\"span\" {...getStyles('loader', { style: transitionStyles })} aria-hidden>\n              <Loader color=\"var(--ai-color)\" size=\"calc(var(--ai-size) * 0.55)\" {...loaderProps} />\n            </Box>\n          )}\n        </Transition>\n      )}\n\n      <Box component=\"span\" mod={{ loading }} {...getStyles('icon')}>\n        {children}\n      </Box>\n    </UnstyledButton>\n  );\n});\n\nActionIcon.classes = classes;\nActionIcon.varsResolver = varsResolver;\nActionIcon.displayName = '@mantine/core/ActionIcon';\nActionIcon.Group = ActionIconGroup;\nActionIcon.GroupSection = ActionIconGroupSection;\n\nexport namespace ActionIcon {\n  export type Props = ActionIconProps;\n  export type StylesNames = ActionIconStylesNames;\n  export type CssVariables = ActionIconCssVariables;\n  export type Factory = ActionIconFactory;\n\n  export namespace Group {\n    export type Props = ActionIconGroupProps;\n    export type StylesNames = ActionIconGroupStylesNames;\n    export type CssVariables = ActionIconGroupCssVariables;\n    export type Factory = ActionIconGroupFactory;\n  }\n\n  export namespace GroupSection {\n    export type Props = ActionIconGroupSectionProps;\n    export type StylesNames = ActionIconGroupSectionStylesNames;\n    export type CssVariables = ActionIconGroupSectionCssVariables;\n    export type Factory = ActionIconGroupSectionFactory;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAqGA,MAAM,eAAe,oBAClB,OAAO,EAAE,MAAM,QAAQ,SAAS,UAAU,OAAO,mBAAmB;CACnE,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA;EACA,SAAS,WAAW;EACpB;CACF,CAAC;CAED,OAAO,EACL,MAAM;EACJ,aAAa,QAAQ,MAAM,SAAS;EACpC,eAAe,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;EAClE,WAAW,SAAS,UAAU,OAAO,aAAa,KAAA;EAClD,cAAc,SAAS,UAAU,OAAO,QAAQ,KAAA;EAChD,oBAAoB,SAAS,UAAU,OAAO,aAAa,KAAA;EAC3D,cAAc,OAAO;EACrB,WAAW,SAAS,UAAU,OAAO,SAAS,KAAA;CAChD,EACF;AACF,CACF;AAEA,MAAa,aAAa,oBAAuC,WAAW;CAC1E,MAAM,QAAQ,SAAS,cAAc,MAAM,MAAM;CACjD,MAAM,EACJ,WACA,UACA,SACA,YACA,QACA,OACA,SACA,aACA,MACA,OACA,QACA,kBACA,UACA,MACA,UACA,UACA,iBAAiB,cACjB,cACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA6B;EAC7C,MAAM,CAAC,cAAc,gBAAgB;EACrC;EACA;EACA;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,qBAAC,gBAAD;EACE,GAAI,UAAU,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,WAAW,CAAC,aAAa,CAAC;EACxE,aAAW,WAAW,KAAA;EACtB,GAAI;EACM;EACD;EACH;EACN,UAAU,YAAY;EACtB,KAAK,CAAC;GAAE;GAAS,UAAU,YAAY;EAAa,GAAG,GAAG;EAR5D,UAAA,CAUG,OAAO,YAAY,aAClB,oBAAC,YAAD;GAAY,SAAS;GAAS,YAAW;GAAa,UAAU;GAC5D,WAAA,qBACA,oBAAC,KAAD;IAAK,WAAU;IAAO,GAAI,UAAU,UAAU,EAAE,OAAO,iBAAiB,CAAC;IAAG,eAAA;IAC1E,UAAA,oBAAC,QAAD;KAAQ,OAAM;KAAkB,MAAK;KAA8B,GAAI;IAAc,CAAA;GAClF,CAAA;EAEG,CAAA,GAGd,oBAAC,KAAD;GAAK,WAAU;GAAO,KAAK,EAAE,QAAQ;GAAG,GAAI,UAAU,MAAM;GACzD;EACE,CAAA,CACS;;AAEpB,CAAC;AAED,WAAW,UAAUA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc;AACzB,WAAW,QAAQ;AACnB,WAAW,eAAe"}

package/esm/components/ActionIcon/ActionIconGroup/ActionIconGroup.mjs

@@ -13,23 +13,24 @@ const varsResolver = createVarsResolver((_, { borderWidth }) => ({ group: { "--a
 const ActionIconGroup = factory((_props) => {
 	const props = useProps("ActionIconGroup", defaultProps, _props);
 	const { className, style, classNames, styles, unstyled, orientation, vars, borderWidth, variant, mod, attributes, ...others } = props;
+	const getStyles = useStyles({
+		name: "ActionIconGroup",
+		props,
+		classes: ActionIcon_module_default,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver,
+		rootSelector: "group"
+	});
 	return /* @__PURE__ */ jsx(Box, {
-		...useStyles({
-			name: "ActionIconGroup",
-			props,
-			classes: ActionIcon_module_default,
-			className,
-			style,
-			classNames,
-			styles,
-			unstyled,
-			attributes,
-			vars,
-			varsResolver,
-			rootSelector: "group"
-		})("group"),
+		...getStyles("group"),
 		variant,
-		mod: [{ "data-orientation": orientation }, mod],
+		mod: [{ orientation }, mod],
 		role: "group",
 		...others
 	});

package/esm/components/ActionIcon/ActionIconGroup/ActionIconGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionIconGroup.mjs","names":["classes"],"sources":["../../../../src/components/ActionIcon/ActionIconGroup/ActionIconGroup.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport classes from '../ActionIcon.module.css';\n\nexport type ActionIconGroupStylesNames = 'group';\nexport type ActionIconGroupCssVariables = {\n  group: '--ai-border-width';\n};\n\nexport interface ActionIconGroupProps\n  extends BoxProps, StylesApiProps<ActionIconGroupFactory>, ElementProps<'div'> {\n  /** `ActionIcon` and `ActionIcon.GroupSection` components only */\n  children?: React.ReactNode;\n\n  /** Group orientation @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** `border-width` of the child components. @default 1 */\n  borderWidth?: number | string;\n}\n\nexport type ActionIconGroupFactory = Factory<{\n  props: ActionIconGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: ActionIconGroupStylesNames;\n  vars: ActionIconGroupCssVariables;\n}>;\n\nconst defaultProps = {\n  orientation: 'horizontal',\n} satisfies Partial<ActionIconGroupProps>;\n\nconst varsResolver = createVarsResolver<ActionIconGroupFactory>((_, { borderWidth }) => ({\n  group: { '--ai-border-width': rem(borderWidth) },\n}));\n\nexport const ActionIconGroup = factory<ActionIconGroupFactory>((_props) => {\n  const props = useProps('ActionIconGroup', defaultProps, _props);\n  const {\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    orientation,\n    vars,\n    borderWidth,\n    variant,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ActionIconGroupFactory>({\n    name: 'ActionIconGroup',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'group',\n  });\n\n  return (\n    <Box\n      {...getStyles('group')}\n      variant={variant}\n      mod={[{ 'data-orientation': orientation }, mod]}\n      role=\"group\"\n      {...others}\n    />\n  );\n});\n\nActionIconGroup.classes = classes;\nActionIconGroup.varsResolver = varsResolver;\nActionIconGroup.displayName = '@mantine/core/ActionIconGroup';\n"],"mappings":";;;;;;;;;;AAsCA,MAAM,eAAe,EACnB,aAAa,aACf;AAEA,MAAM,eAAe,oBAA4C,GAAG,EAAE,mBAAmB,EACvF,OAAO,EAAE,qBAAqB,IAAI,WAAW,EAAE,EACjD,EAAE;AAEF,MAAa,kBAAkB,SAAiC,WAAW;CACzE,MAAM,QAAQ,SAAS,mBAAmB,cAAc,MAAM;CAC9D,MAAM,EACJ,WACA,OACA,YACA,QACA,UACA,aACA,MACA,aACA,SACA,KACA,YACA,GAAG,WACD;CAiBJ,OACE,oBAAC,KAAD;EACE,GAjBc,UAAkC;GAClD,MAAM;GACN;GACA,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,cAAc;EAChB,CAIgB,CAAC,CAAC,OAAO;EACZ;EACT,KAAK,CAAC,EAAE,oBAAoB,YAAY,GAAG,GAAG;EAC9C,MAAK;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,gBAAgB,UAAUA;AAC1B,gBAAgB,eAAe;AAC/B,gBAAgB,cAAc"}
+{"version":3,"file":"ActionIconGroup.mjs","names":["classes"],"sources":["../../../../src/components/ActionIcon/ActionIconGroup/ActionIconGroup.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport classes from '../ActionIcon.module.css';\n\nexport type ActionIconGroupStylesNames = 'group';\nexport type ActionIconGroupCssVariables = {\n  group: '--ai-border-width';\n};\n\nexport interface ActionIconGroupProps\n  extends BoxProps, StylesApiProps<ActionIconGroupFactory>, ElementProps<'div'> {\n  /** `ActionIcon` and `ActionIcon.GroupSection` components only */\n  children?: React.ReactNode;\n\n  /** Group orientation @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** `border-width` of the child components. @default 1 */\n  borderWidth?: number | string;\n}\n\nexport type ActionIconGroupFactory = Factory<{\n  props: ActionIconGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: ActionIconGroupStylesNames;\n  vars: ActionIconGroupCssVariables;\n}>;\n\nconst defaultProps = {\n  orientation: 'horizontal',\n} satisfies Partial<ActionIconGroupProps>;\n\nconst varsResolver = createVarsResolver<ActionIconGroupFactory>((_, { borderWidth }) => ({\n  group: { '--ai-border-width': rem(borderWidth) },\n}));\n\nexport const ActionIconGroup = factory<ActionIconGroupFactory>((_props) => {\n  const props = useProps('ActionIconGroup', defaultProps, _props);\n  const {\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    orientation,\n    vars,\n    borderWidth,\n    variant,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ActionIconGroupFactory>({\n    name: 'ActionIconGroup',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'group',\n  });\n\n  return (\n    <Box\n      {...getStyles('group')}\n      variant={variant}\n      mod={[{ orientation }, mod]}\n      role=\"group\"\n      {...others}\n    />\n  );\n});\n\nActionIconGroup.classes = classes;\nActionIconGroup.varsResolver = varsResolver;\nActionIconGroup.displayName = '@mantine/core/ActionIconGroup';\n"],"mappings":";;;;;;;;;;AAsCA,MAAM,eAAe,EACnB,aAAa,aACf;AAEA,MAAM,eAAe,oBAA4C,GAAG,EAAE,mBAAmB,EACvF,OAAO,EAAE,qBAAqB,IAAI,WAAW,EAAE,EACjD,EAAE;AAEF,MAAa,kBAAkB,SAAiC,WAAW;CACzE,MAAM,QAAQ,SAAS,mBAAmB,cAAc,MAAM;CAC9D,MAAM,EACJ,WACA,OACA,YACA,QACA,UACA,aACA,MACA,aACA,SACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAkC;EAClD,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,OACE,oBAAC,KAAD;EACE,GAAI,UAAU,OAAO;EACZ;EACT,KAAK,CAAC,EAAE,YAAY,GAAG,GAAG;EAC1B,MAAK;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,gBAAgB,UAAUA;AAC1B,gBAAgB,eAAe;AAC/B,gBAAgB,cAAc"}

package/esm/components/ActionIcon/ActionIconGroupSection/ActionIconGroupSection.mjs

@@ -29,21 +29,22 @@ const varsResolver = createVarsResolver((theme, { radius, color, gradient, varia
 const ActionIconGroupSection = factory((_props) => {
 	const props = useProps("ActionIconGroupSection", null, _props);
 	const { className, style, classNames, styles, unstyled, vars, variant, gradient, radius, autoContrast, attributes, ...others } = props;
+	const getStyles = useStyles({
+		name: "ActionIconGroupSection",
+		props,
+		classes: ActionIcon_module_default,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver,
+		rootSelector: "groupSection"
+	});
 	return /* @__PURE__ */ jsx(Box, {
-		...useStyles({
-			name: "ActionIconGroupSection",
-			props,
-			classes: ActionIcon_module_default,
-			className,
-			style,
-			classNames,
-			styles,
-			unstyled,
-			attributes,
-			vars,
-			varsResolver,
-			rootSelector: "groupSection"
-		})("groupSection"),
+		...getStyles("groupSection"),
 		variant,
 		...others
 	});

package/esm/components/ActionIcon/ActionIconGroupSection/ActionIconGroupSection.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionIconGroupSection.mjs","names":["classes"],"sources":["../../../../src/components/ActionIcon/ActionIconGroupSection/ActionIconGroupSection.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  getRadius,\n  getSize,\n  MantineGradient,\n  MantineRadius,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport type { ActionIconVariant } from '../ActionIcon';\nimport classes from '../ActionIcon.module.css';\n\nexport type ActionIconGroupSectionStylesNames = 'groupSection';\nexport type ActionIconGroupSectionCssVariables = {\n  groupSection:\n    | '--section-radius'\n    | '--section-bg'\n    | '--section-color'\n    | '--section-bd'\n    | '--section-height'\n    | '--section-padding-x'\n    | '--section-fz';\n};\n\nexport interface ActionIconGroupSectionProps\n  extends BoxProps, StylesApiProps<ActionIconGroupSectionFactory>, ElementProps<'div'> {\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Gradient values used with `variant=\"gradient\"`. @default theme.defaultGradient */\n  gradient?: MantineGradient;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** Controls section `height`, `font-size` and horizontal `padding` @default 'sm' */\n  size?: MantineSize | (string & {}) | number;\n}\n\nexport type ActionIconGroupSectionFactory = Factory<{\n  props: ActionIconGroupSectionProps;\n  ref: HTMLDivElement;\n  stylesNames: ActionIconGroupSectionStylesNames;\n  vars: ActionIconGroupSectionCssVariables;\n  variant: ActionIconVariant;\n}>;\n\nconst varsResolver = createVarsResolver<ActionIconGroupSectionFactory>(\n  (theme, { radius, color, gradient, variant, autoContrast, size }) => {\n    const colors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      gradient,\n      variant: variant || 'filled',\n      autoContrast,\n    });\n\n    return {\n      groupSection: {\n        '--section-height': getSize(size, 'section-height'),\n        '--section-padding-x': getSize(size, 'section-padding-x'),\n        '--section-fz': getFontSize(size),\n        '--section-radius': radius === undefined ? undefined : getRadius(radius),\n        '--section-bg': color || variant ? colors.background : undefined,\n        '--section-color': colors.color,\n        '--section-bd': color || variant ? colors.border : undefined,\n      },\n    };\n  }\n);\n\nexport const ActionIconGroupSection = factory<ActionIconGroupSectionFactory>((_props) => {\n  const props = useProps('ActionIconGroupSection', null, _props);\n  const {\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    variant,\n    gradient,\n    radius,\n    autoContrast,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ActionIconGroupSectionFactory>({\n    name: 'ActionIconGroupSection',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'groupSection',\n  });\n\n  return <Box {...getStyles('groupSection')} variant={variant} {...others} />;\n});\n\nActionIconGroupSection.classes = classes;\nActionIconGroupSection.varsResolver = varsResolver;\nActionIconGroupSection.displayName = '@mantine/core/ActionIconGroupSection';\n"],"mappings":";;;;;;;;;;AAuDA,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,UAAU,SAAS,cAAc,WAAW;CACnE,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA;EACA,SAAS,WAAW;EACpB;CACF,CAAC;CAED,OAAO,EACL,cAAc;EACZ,oBAAoB,QAAQ,MAAM,gBAAgB;EAClD,uBAAuB,QAAQ,MAAM,mBAAmB;EACxD,gBAAgB,YAAY,IAAI;EAChC,oBAAoB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;EACvE,gBAAgB,SAAS,UAAU,OAAO,aAAa,KAAA;EACvD,mBAAmB,OAAO;EAC1B,gBAAgB,SAAS,UAAU,OAAO,SAAS,KAAA;CACrD,EACF;AACF,CACF;AAEA,MAAa,yBAAyB,SAAwC,WAAW;CACvF,MAAM,QAAQ,SAAS,0BAA0B,MAAM,MAAM;CAC7D,MAAM,EACJ,WACA,OACA,YACA,QACA,UACA,MACA,SACA,UACA,QACA,cACA,YACA,GAAG,WACD;CAiBJ,OAAO,oBAAC,KAAD;EAAK,GAfM,UAAyC;GACzD,MAAM;GACN;GACA,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,cAAc;EAChB,CAEwB,CAAC,CAAC,cAAc;EAAY;EAAS,GAAI;CAAS,CAAA;AAC5E,CAAC;AAED,uBAAuB,UAAUA;AACjC,uBAAuB,eAAe;AACtC,uBAAuB,cAAc"}
+{"version":3,"file":"ActionIconGroupSection.mjs","names":["classes"],"sources":["../../../../src/components/ActionIcon/ActionIconGroupSection/ActionIconGroupSection.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  getRadius,\n  getSize,\n  MantineGradient,\n  MantineRadius,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport type { ActionIconVariant } from '../ActionIcon';\nimport classes from '../ActionIcon.module.css';\n\nexport type ActionIconGroupSectionStylesNames = 'groupSection';\nexport type ActionIconGroupSectionCssVariables = {\n  groupSection:\n    | '--section-radius'\n    | '--section-bg'\n    | '--section-color'\n    | '--section-bd'\n    | '--section-height'\n    | '--section-padding-x'\n    | '--section-fz';\n};\n\nexport interface ActionIconGroupSectionProps\n  extends BoxProps, StylesApiProps<ActionIconGroupSectionFactory>, ElementProps<'div'> {\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Gradient values used with `variant=\"gradient\"`. @default theme.defaultGradient */\n  gradient?: MantineGradient;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** Controls section `height`, `font-size` and horizontal `padding` @default 'sm' */\n  size?: MantineSize | (string & {}) | number;\n}\n\nexport type ActionIconGroupSectionFactory = Factory<{\n  props: ActionIconGroupSectionProps;\n  ref: HTMLDivElement;\n  stylesNames: ActionIconGroupSectionStylesNames;\n  vars: ActionIconGroupSectionCssVariables;\n  variant: ActionIconVariant;\n}>;\n\nconst varsResolver = createVarsResolver<ActionIconGroupSectionFactory>(\n  (theme, { radius, color, gradient, variant, autoContrast, size }) => {\n    const colors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      gradient,\n      variant: variant || 'filled',\n      autoContrast,\n    });\n\n    return {\n      groupSection: {\n        '--section-height': getSize(size, 'section-height'),\n        '--section-padding-x': getSize(size, 'section-padding-x'),\n        '--section-fz': getFontSize(size),\n        '--section-radius': radius === undefined ? undefined : getRadius(radius),\n        '--section-bg': color || variant ? colors.background : undefined,\n        '--section-color': colors.color,\n        '--section-bd': color || variant ? colors.border : undefined,\n      },\n    };\n  }\n);\n\nexport const ActionIconGroupSection = factory<ActionIconGroupSectionFactory>((_props) => {\n  const props = useProps('ActionIconGroupSection', null, _props);\n  const {\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    variant,\n    gradient,\n    radius,\n    autoContrast,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ActionIconGroupSectionFactory>({\n    name: 'ActionIconGroupSection',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'groupSection',\n  });\n\n  return <Box {...getStyles('groupSection')} variant={variant} {...others} />;\n});\n\nActionIconGroupSection.classes = classes;\nActionIconGroupSection.varsResolver = varsResolver;\nActionIconGroupSection.displayName = '@mantine/core/ActionIconGroupSection';\n"],"mappings":";;;;;;;;;;AAuDA,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,UAAU,SAAS,cAAc,WAAW;CACnE,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA;EACA,SAAS,WAAW;EACpB;CACF,CAAC;CAED,OAAO,EACL,cAAc;EACZ,oBAAoB,QAAQ,MAAM,gBAAgB;EAClD,uBAAuB,QAAQ,MAAM,mBAAmB;EACxD,gBAAgB,YAAY,IAAI;EAChC,oBAAoB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;EACvE,gBAAgB,SAAS,UAAU,OAAO,aAAa,KAAA;EACvD,mBAAmB,OAAO;EAC1B,gBAAgB,SAAS,UAAU,OAAO,SAAS,KAAA;CACrD,EACF;AACF,CACF;AAEA,MAAa,yBAAyB,SAAwC,WAAW;CACvF,MAAM,QAAQ,SAAS,0BAA0B,MAAM,MAAM;CAC7D,MAAM,EACJ,WACA,OACA,YACA,QACA,UACA,MACA,SACA,UACA,QACA,cACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAyC;EACzD,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,OAAO,oBAAC,KAAD;EAAK,GAAI,UAAU,cAAc;EAAY;EAAS,GAAI;CAAS,CAAA;AAC5E,CAAC;AAED,uBAAuB,UAAUA;AACjC,uBAAuB,eAAe;AACtC,uBAAuB,cAAc"}

package/esm/components/Affix/Affix.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Affix.mjs","names":["classes"],"sources":["../../../src/components/Affix/Affix.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  getSpacing,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { BasePortalProps, OptionalPortal } from '../Portal';\nimport classes from './Affix.module.css';\n\nexport type AffixStylesNames = 'root';\nexport type AffixCssVariables = {\n  root: '--affix-z-index' | '--affix-top' | '--affix-left' | '--affix-bottom' | '--affix-right';\n};\n\nexport interface AffixPosition {\n  top?: MantineSize | (string & {}) | number;\n  left?: MantineSize | (string & {}) | number;\n  bottom?: MantineSize | (string & {}) | number;\n  right?: MantineSize | (string & {}) | number;\n}\n\nexport interface AffixBaseProps {\n  /** Root element `z-index` property @default 200  */\n  zIndex?: React.CSSProperties['zIndex'];\n\n  /** Determines whether the component is rendered within `Portal` @default true */\n  withinPortal?: boolean;\n\n  /** Props passed down to the `Portal` component. Ignored when `withinPortal` is `false`. */\n  portalProps?: BasePortalProps;\n\n  /** Affix position on screen @default { bottom: 0, right: 0 } */\n  position?: AffixPosition;\n}\n\nexport interface AffixProps\n  extends BoxProps, AffixBaseProps, StylesApiProps<AffixFactory>, ElementProps<'div'> {}\n\nexport type AffixFactory = Factory<{\n  props: AffixProps;\n  ref: HTMLDivElement;\n  stylesNames: AffixStylesNames;\n  vars: AffixCssVariables;\n}>;\n\nconst defaultProps = {\n  position: { bottom: 0, right: 0 },\n  zIndex: getDefaultZIndex('modal'),\n  withinPortal: true,\n} satisfies Partial<AffixProps>;\n\nconst varsResolver = createVarsResolver<AffixFactory>((_, { zIndex, position }) => ({\n  root: {\n    '--affix-z-index': zIndex?.toString(),\n    '--affix-top': getSpacing(position?.top),\n    '--affix-left': getSpacing(position?.left),\n    '--affix-bottom': getSpacing(position?.bottom),\n    '--affix-right': getSpacing(position?.right),\n  },\n}));\n\nexport const Affix = factory<AffixFactory>((_props) => {\n  const props = useProps('Affix', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    portalProps,\n    zIndex,\n    withinPortal,\n    position,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<AffixFactory>({\n    name: 'Affix',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n      <Box {...getStyles('root')} {...others} />\n    </OptionalPortal>\n  );\n});\n\nAffix.classes = classes;\nAffix.varsResolver = varsResolver;\nAffix.displayName = '@mantine/core/Affix';\n\nexport namespace Affix {\n  export type Props = AffixProps;\n  export type StylesNames = AffixStylesNames;\n  export type CssVariables = AffixCssVariables;\n  export type Factory = AffixFactory;\n}\n"],"mappings":";;;;;;;;;;;;AAqDA,MAAM,eAAe;CACnB,UAAU;EAAE,QAAQ;EAAG,OAAO;CAAE;CAChC,QAAQ,iBAAiB,OAAO;CAChC,cAAc;AAChB;AAEA,MAAM,eAAe,oBAAkC,GAAG,EAAE,QAAQ,gBAAgB,EAClF,MAAM;CACJ,mBAAmB,QAAQ,SAAS;CACpC,eAAe,WAAW,UAAU,GAAG;CACvC,gBAAgB,WAAW,UAAU,IAAI;CACzC,kBAAkB,WAAW,UAAU,MAAM;CAC7C,iBAAiB,WAAW,UAAU,KAAK;AAC7C,EACF,EAAE;AAEF,MAAa,QAAQ,SAAuB,WAAW;CACrD,MAAM,QAAQ,SAAS,SAAS,cAAc,MAAM;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,aACA,QACA,cACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAwB;EACxC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,gBAAD;EAAgB,GAAI;EAA2B;YAC7C,oBAAC,KAAD;GAAK,GAAI,UAAU,MAAM;GAAG,GAAI;EAAS,CAAA;CAC3B,CAAA;AAEpB,CAAC;AAED,MAAM,UAAUA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc"}
+{"version":3,"file":"Affix.mjs","names":["classes"],"sources":["../../../src/components/Affix/Affix.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  getSpacing,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { BasePortalProps, OptionalPortal } from '../Portal';\nimport classes from './Affix.module.css';\n\nexport type AffixStylesNames = 'root';\nexport type AffixCssVariables = {\n  root: '--affix-z-index' | '--affix-top' | '--affix-left' | '--affix-bottom' | '--affix-right';\n};\n\nexport interface AffixPosition {\n  top?: MantineSize | (string & {}) | number;\n  left?: MantineSize | (string & {}) | number;\n  bottom?: MantineSize | (string & {}) | number;\n  right?: MantineSize | (string & {}) | number;\n}\n\nexport interface AffixBaseProps {\n  /** Root element `z-index` property @default 200  */\n  zIndex?: React.CSSProperties['zIndex'];\n\n  /** Determines whether the component is rendered within `Portal` @default true */\n  withinPortal?: boolean;\n\n  /** Props passed down to the `Portal` component. Ignored when `withinPortal` is `false`. */\n  portalProps?: BasePortalProps;\n\n  /** Affix position on screen @default { bottom: 0, right: 0 } */\n  position?: AffixPosition;\n}\n\nexport interface AffixProps\n  extends BoxProps, AffixBaseProps, StylesApiProps<AffixFactory>, ElementProps<'div'> {}\n\nexport type AffixFactory = Factory<{\n  props: AffixProps;\n  ref: HTMLDivElement;\n  stylesNames: AffixStylesNames;\n  vars: AffixCssVariables;\n}>;\n\nconst defaultProps = {\n  position: { bottom: 0, right: 0 },\n  zIndex: getDefaultZIndex('modal'),\n  withinPortal: true,\n} satisfies Partial<AffixProps>;\n\nconst varsResolver = createVarsResolver<AffixFactory>((_, { zIndex, position }) => ({\n  root: {\n    '--affix-z-index': zIndex?.toString(),\n    '--affix-top': getSpacing(position?.top),\n    '--affix-left': getSpacing(position?.left),\n    '--affix-bottom': getSpacing(position?.bottom),\n    '--affix-right': getSpacing(position?.right),\n  },\n}));\n\nexport const Affix = factory<AffixFactory>((_props) => {\n  const props = useProps('Affix', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    portalProps,\n    zIndex,\n    withinPortal,\n    position,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<AffixFactory>({\n    name: 'Affix',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n      <Box {...getStyles('root')} {...others} />\n    </OptionalPortal>\n  );\n});\n\nAffix.classes = classes;\nAffix.varsResolver = varsResolver;\nAffix.displayName = '@mantine/core/Affix';\n\nexport namespace Affix {\n  export type Props = AffixProps;\n  export type StylesNames = AffixStylesNames;\n  export type CssVariables = AffixCssVariables;\n  export type Factory = AffixFactory;\n}\n"],"mappings":";;;;;;;;;;;;AAqDA,MAAM,eAAe;CACnB,UAAU;EAAE,QAAQ;EAAG,OAAO;CAAE;CAChC,QAAQ,iBAAiB,OAAO;CAChC,cAAc;AAChB;AAEA,MAAM,eAAe,oBAAkC,GAAG,EAAE,QAAQ,gBAAgB,EAClF,MAAM;CACJ,mBAAmB,QAAQ,SAAS;CACpC,eAAe,WAAW,UAAU,GAAG;CACvC,gBAAgB,WAAW,UAAU,IAAI;CACzC,kBAAkB,WAAW,UAAU,MAAM;CAC7C,iBAAiB,WAAW,UAAU,KAAK;AAC7C,EACF,EAAE;AAEF,MAAa,QAAQ,SAAuB,WAAW;CACrD,MAAM,QAAQ,SAAS,SAAS,cAAc,MAAM;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,aACA,QACA,cACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAwB;EACxC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,gBAAD;EAAgB,GAAI;EAA2B;EAC7C,UAAA,oBAAC,KAAD;GAAK,GAAI,UAAU,MAAM;GAAG,GAAI;EAAS,CAAA;CAC3B,CAAA;AAEpB,CAAC;AAED,MAAM,UAAUA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc"}

package/esm/components/Alert/Alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.mjs","names":["classes"],"sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  MantineColor,\n  MantineRadius,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { CloseButton } from '../CloseButton';\nimport classes from './Alert.module.css';\n\nexport type AlertStylesNames =\n  | 'root'\n  | 'body'\n  | 'label'\n  | 'title'\n  | 'icon'\n  | 'wrapper'\n  | 'message'\n  | 'closeButton';\nexport type AlertVariant = 'filled' | 'light' | 'outline' | 'default' | 'transparent' | 'white';\nexport type AlertCssVariables = {\n  root: '--alert-radius' | '--alert-bg' | '--alert-color' | '--alert-bd';\n};\n\nexport interface AlertProps\n  extends BoxProps, StylesApiProps<AlertFactory>, ElementProps<'div', 'title'> {\n  /** Key of `theme.radius` or any valid CSS value to set border-radius @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor  */\n  color?: MantineColor;\n\n  /** Alert title */\n  title?: React.ReactNode;\n\n  /** Icon displayed next to the title */\n  icon?: React.ReactNode;\n\n  /** Determines whether close button should be displayed @default false */\n  withCloseButton?: boolean;\n\n  /** Called when the close button is clicked */\n  onClose?: () => void;\n\n  /** Close button `aria-label` */\n  closeButtonLabel?: string;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n}\n\nexport type AlertFactory = Factory<{\n  props: AlertProps;\n  ref: HTMLDivElement;\n  stylesNames: AlertStylesNames;\n  vars: AlertCssVariables;\n  variant: AlertVariant;\n}>;\n\nconst varsResolver = createVarsResolver<AlertFactory>(\n  (theme, { radius, color, variant, autoContrast }) => {\n    const colors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      variant: variant || 'light',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--alert-radius': radius === undefined ? undefined : getRadius(radius),\n        '--alert-bg': color || variant ? colors.background : undefined,\n        '--alert-color': colors.color,\n        '--alert-bd': color || variant ? colors.border : undefined,\n      },\n    };\n  }\n);\n\nexport const Alert = factory<AlertFactory>((_props) => {\n  const props = useProps('Alert', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    radius,\n    color,\n    title,\n    children,\n    id,\n    icon,\n    withCloseButton,\n    onClose,\n    closeButtonLabel,\n    variant,\n    autoContrast,\n    role,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<AlertFactory>({\n    name: 'Alert',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const rootId = useId(id);\n  const titleId = (title && `${rootId}-title`) || undefined;\n  const bodyId = `${rootId}-body`;\n\n  return (\n    <Box\n      id={rootId}\n      {...getStyles('root', { variant })}\n      variant={variant}\n      {...others}\n      role={role || 'alert'}\n      aria-describedby={children ? bodyId : undefined}\n      aria-labelledby={title ? titleId : undefined}\n    >\n      <div {...getStyles('wrapper')}>\n        {icon && <div {...getStyles('icon')}>{icon}</div>}\n\n        <div {...getStyles('body')}>\n          {title && (\n            <div {...getStyles('title')} data-with-close-button={withCloseButton || undefined}>\n              <span id={titleId} {...getStyles('label')}>\n                {title}\n              </span>\n            </div>\n          )}\n\n          {children && (\n            <div id={bodyId} {...getStyles('message')} data-variant={variant}>\n              {children}\n            </div>\n          )}\n        </div>\n\n        {withCloseButton && (\n          <CloseButton\n            {...getStyles('closeButton')}\n            onClick={onClose}\n            variant=\"transparent\"\n            size={16}\n            iconSize={16}\n            aria-label={closeButtonLabel}\n            unstyled={unstyled}\n          />\n        )}\n      </div>\n    </Box>\n  );\n});\n\nAlert.classes = classes;\nAlert.varsResolver = varsResolver;\nAlert.displayName = '@mantine/core/Alert';\n\nexport namespace Alert {\n  export type Props = AlertProps;\n  export type StylesNames = AlertStylesNames;\n  export type CssVariables = AlertCssVariables;\n  export type Factory = AlertFactory;\n}\n"],"mappings":";;;;;;;;;;;;AAmEA,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,SAAS,mBAAmB;CACnD,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA,SAAS,WAAW;EACpB;CACF,CAAC;CAED,OAAO,EACL,MAAM;EACJ,kBAAkB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;EACrE,cAAc,SAAS,UAAU,OAAO,aAAa,KAAA;EACrD,iBAAiB,OAAO;EACxB,cAAc,SAAS,UAAU,OAAO,SAAS,KAAA;CACnD,EACF;AACF,CACF;AAEA,MAAa,QAAQ,SAAuB,WAAW;CACrD,MAAM,QAAQ,SAAS,SAAS,MAAM,MAAM;CAC5C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,OACA,OACA,UACA,IACA,MACA,iBACA,SACA,kBACA,SACA,cACA,MACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAwB;EACxC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,SAAS,MAAM,EAAE;CACvB,MAAM,UAAW,SAAS,GAAG,OAAO,WAAY,KAAA;CAChD,MAAM,SAAS,GAAG,OAAO;CAEzB,OACE,oBAAC,KAAD;EACE,IAAI;EACJ,GAAI,UAAU,QAAQ,EAAE,QAAQ,CAAC;EACxB;EACT,GAAI;EACJ,MAAM,QAAQ;EACd,oBAAkB,WAAW,SAAS,KAAA;EACtC,mBAAiB,QAAQ,UAAU,KAAA;YAEnC,qBAAC,OAAD;GAAK,GAAI,UAAU,SAAS;aAA5B;IACG,QAAQ,oBAAC,OAAD;KAAK,GAAI,UAAU,MAAM;eAAI;IAAU,CAAA;IAEhD,qBAAC,OAAD;KAAK,GAAI,UAAU,MAAM;eAAzB,CACG,SACC,oBAAC,OAAD;MAAK,GAAI,UAAU,OAAO;MAAG,0BAAwB,mBAAmB,KAAA;gBACtE,oBAAC,QAAD;OAAM,IAAI;OAAS,GAAI,UAAU,OAAO;iBACrC;MACG,CAAA;KACH,CAAA,GAGN,YACC,oBAAC,OAAD;MAAK,IAAI;MAAQ,GAAI,UAAU,SAAS;MAAG,gBAAc;MACtD;KACE,CAAA,CAEJ;;IAEJ,mBACC,oBAAC,aAAD;KACE,GAAI,UAAU,aAAa;KAC3B,SAAS;KACT,SAAQ;KACR,MAAM;KACN,UAAU;KACV,cAAY;KACF;IACX,CAAA;GAEA;;CACF,CAAA;AAET,CAAC;AAED,MAAM,UAAUA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc"}
+{"version":3,"file":"Alert.mjs","names":["classes"],"sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  MantineColor,\n  MantineRadius,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { CloseButton } from '../CloseButton';\nimport classes from './Alert.module.css';\n\nexport type AlertStylesNames =\n  | 'root'\n  | 'body'\n  | 'label'\n  | 'title'\n  | 'icon'\n  | 'wrapper'\n  | 'message'\n  | 'closeButton';\nexport type AlertVariant = 'filled' | 'light' | 'outline' | 'default' | 'transparent' | 'white';\nexport type AlertCssVariables = {\n  root: '--alert-radius' | '--alert-bg' | '--alert-color' | '--alert-bd';\n};\n\nexport interface AlertProps\n  extends BoxProps, StylesApiProps<AlertFactory>, ElementProps<'div', 'title'> {\n  /** Key of `theme.radius` or any valid CSS value to set border-radius @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor  */\n  color?: MantineColor;\n\n  /** Alert title */\n  title?: React.ReactNode;\n\n  /** Icon displayed next to the title */\n  icon?: React.ReactNode;\n\n  /** Determines whether close button should be displayed @default false */\n  withCloseButton?: boolean;\n\n  /** Called when the close button is clicked */\n  onClose?: () => void;\n\n  /** Close button `aria-label` */\n  closeButtonLabel?: string;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n}\n\nexport type AlertFactory = Factory<{\n  props: AlertProps;\n  ref: HTMLDivElement;\n  stylesNames: AlertStylesNames;\n  vars: AlertCssVariables;\n  variant: AlertVariant;\n}>;\n\nconst varsResolver = createVarsResolver<AlertFactory>(\n  (theme, { radius, color, variant, autoContrast }) => {\n    const colors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      variant: variant || 'light',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--alert-radius': radius === undefined ? undefined : getRadius(radius),\n        '--alert-bg': color || variant ? colors.background : undefined,\n        '--alert-color': colors.color,\n        '--alert-bd': color || variant ? colors.border : undefined,\n      },\n    };\n  }\n);\n\nexport const Alert = factory<AlertFactory>((_props) => {\n  const props = useProps('Alert', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    radius,\n    color,\n    title,\n    children,\n    id,\n    icon,\n    withCloseButton,\n    onClose,\n    closeButtonLabel,\n    variant,\n    autoContrast,\n    role,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<AlertFactory>({\n    name: 'Alert',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const rootId = useId(id);\n  const titleId = (title && `${rootId}-title`) || undefined;\n  const bodyId = `${rootId}-body`;\n\n  return (\n    <Box\n      id={rootId}\n      {...getStyles('root', { variant })}\n      variant={variant}\n      {...others}\n      role={role || 'alert'}\n      aria-describedby={children ? bodyId : undefined}\n      aria-labelledby={title ? titleId : undefined}\n    >\n      <div {...getStyles('wrapper')}>\n        {icon && <div {...getStyles('icon')}>{icon}</div>}\n\n        <div {...getStyles('body')}>\n          {title && (\n            <div {...getStyles('title')} data-with-close-button={withCloseButton || undefined}>\n              <span id={titleId} {...getStyles('label')}>\n                {title}\n              </span>\n            </div>\n          )}\n\n          {children && (\n            <div id={bodyId} {...getStyles('message')} data-variant={variant}>\n              {children}\n            </div>\n          )}\n        </div>\n\n        {withCloseButton && (\n          <CloseButton\n            {...getStyles('closeButton')}\n            onClick={onClose}\n            variant=\"transparent\"\n            size={16}\n            iconSize={16}\n            aria-label={closeButtonLabel}\n            unstyled={unstyled}\n          />\n        )}\n      </div>\n    </Box>\n  );\n});\n\nAlert.classes = classes;\nAlert.varsResolver = varsResolver;\nAlert.displayName = '@mantine/core/Alert';\n\nexport namespace Alert {\n  export type Props = AlertProps;\n  export type StylesNames = AlertStylesNames;\n  export type CssVariables = AlertCssVariables;\n  export type Factory = AlertFactory;\n}\n"],"mappings":";;;;;;;;;;;;AAmEA,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,SAAS,mBAAmB;CACnD,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA,SAAS,WAAW;EACpB;CACF,CAAC;CAED,OAAO,EACL,MAAM;EACJ,kBAAkB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;EACrE,cAAc,SAAS,UAAU,OAAO,aAAa,KAAA;EACrD,iBAAiB,OAAO;EACxB,cAAc,SAAS,UAAU,OAAO,SAAS,KAAA;CACnD,EACF;AACF,CACF;AAEA,MAAa,QAAQ,SAAuB,WAAW;CACrD,MAAM,QAAQ,SAAS,SAAS,MAAM,MAAM;CAC5C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,OACA,OACA,UACA,IACA,MACA,iBACA,SACA,kBACA,SACA,cACA,MACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAwB;EACxC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,SAAS,MAAM,EAAE;CACvB,MAAM,UAAW,SAAS,GAAG,OAAO,WAAY,KAAA;CAChD,MAAM,SAAS,GAAG,OAAO;CAEzB,OACE,oBAAC,KAAD;EACE,IAAI;EACJ,GAAI,UAAU,QAAQ,EAAE,QAAQ,CAAC;EACxB;EACT,GAAI;EACJ,MAAM,QAAQ;EACd,oBAAkB,WAAW,SAAS,KAAA;EACtC,mBAAiB,QAAQ,UAAU,KAAA;EAEnC,UAAA,qBAAC,OAAD;GAAK,GAAI,UAAU,SAAS;GAA5B,UAAA;IACG,QAAQ,oBAAC,OAAD;KAAK,GAAI,UAAU,MAAM;KAAI,UAAA;IAAU,CAAA;IAEhD,qBAAC,OAAD;KAAK,GAAI,UAAU,MAAM;KAAzB,UAAA,CACG,SACC,oBAAC,OAAD;MAAK,GAAI,UAAU,OAAO;MAAG,0BAAwB,mBAAmB,KAAA;MACtE,UAAA,oBAAC,QAAD;OAAM,IAAI;OAAS,GAAI,UAAU,OAAO;OACrC,UAAA;MACG,CAAA;KACH,CAAA,GAGN,YACC,oBAAC,OAAD;MAAK,IAAI;MAAQ,GAAI,UAAU,SAAS;MAAG,gBAAc;MACtD;KACE,CAAA,CAEJ;;IAEJ,mBACC,oBAAC,aAAD;KACE,GAAI,UAAU,aAAa;KAC3B,SAAS;KACT,SAAQ;KACR,MAAM;KACN,UAAU;KACV,cAAY;KACF;IACX,CAAA;GAEA;;CACF,CAAA;AAET,CAAC;AAED,MAAM,UAAUA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc"}

package/esm/components/AngleSlider/AngleSlider.mjs

@@ -72,10 +72,11 @@ const AngleSlider = factory((_props) => {
 		if (restrictToMarks && Array.isArray(marks)) {
 			const markValues = marks.map((mark) => mark.value);
 			const currentIndex = markValues.indexOf(_value);
-			if (currentIndex !== -1) if (event.key === "ArrowLeft" || event.key === "ArrowDown") newValue = markValues[currentIndex === 0 ? markValues.length - 1 : currentIndex - 1];
-			else if (event.key === "ArrowRight" || event.key === "ArrowUp") newValue = markValues[currentIndex === markValues.length - 1 ? 0 : currentIndex + 1];
-			else newValue = findClosestNumber(newValue, markValues);
-			else newValue = findClosestNumber(newValue, markValues);
+			if (currentIndex !== -1) {
+				if (event.key === "ArrowLeft" || event.key === "ArrowDown") newValue = markValues[currentIndex === 0 ? markValues.length - 1 : currentIndex - 1];
+				else if (event.key === "ArrowRight" || event.key === "ArrowUp") newValue = markValues[currentIndex === markValues.length - 1 ? 0 : currentIndex + 1];
+				else newValue = findClosestNumber(newValue, markValues);
+			} else newValue = findClosestNumber(newValue, markValues);
 		}
 		setValue(newValue);
 		onChangeEnd?.(newValue);

package/esm/components/AngleSlider/AngleSlider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AngleSlider.mjs","names":["classes"],"sources":["../../../src/components/AngleSlider/AngleSlider.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { normalizeRadialValue, useMergedRef, useRadialMove, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  findClosestNumber,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './AngleSlider.module.css';\n\nexport type AngleSliderStylesNames = 'root' | 'thumb' | 'label' | 'marks' | 'mark';\nexport type AngleSliderCssVariables = {\n  root: '--slider-size' | '--thumb-size';\n};\n\nexport interface AngleSliderProps\n  extends BoxProps, StylesApiProps<AngleSliderFactory>, ElementProps<'div', 'onChange'> {\n  /** Step between values @default 1 */\n  step?: number;\n\n  /** Controlled component value */\n  value?: number;\n\n  /** Uncontrolled component default value */\n  defaultValue?: number;\n\n  /** Called on value change */\n  onChange?: (value: number) => void;\n\n  /** Called after the selection is finished */\n  onChangeEnd?: (value: number) => void;\n\n  /** Called in `onMouseDown` and `onTouchStart` */\n  onScrubStart?: () => void;\n\n  /** Called in `onMouseUp` and `onTouchEnd` */\n  onScrubEnd?: () => void;\n\n  /** If set, the label is displayed inside the slider @default true */\n  withLabel?: boolean;\n\n  /** Array of marks displayed on the slider */\n  marks?: { value: number; label?: string }[];\n\n  /** Slider size in px @default 60 */\n  size?: number;\n\n  /** Size of the thumb in px. Calculated based on the `size` value by default. */\n  thumbSize?: number;\n\n  /** A function to format label based on the current value */\n  formatLabel?: (value: number) => React.ReactNode;\n\n  /** Sets `data-disabled` attribute, disables interactions */\n  disabled?: boolean;\n\n  /** If set, the selection is allowed only from the given marks array @default false */\n  restrictToMarks?: boolean;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'>;\n\n  /** Hidden input name, use with uncontrolled component */\n  name?: string;\n}\n\nexport type AngleSliderFactory = Factory<{\n  props: AngleSliderProps;\n  ref: HTMLDivElement;\n  stylesNames: AngleSliderStylesNames;\n  vars: AngleSliderCssVariables;\n}>;\n\nconst defaultProps = {\n  step: 1,\n  withLabel: true,\n} satisfies Partial<AngleSliderProps>;\n\nconst varsResolver = createVarsResolver<AngleSliderFactory>((_, { size, thumbSize }) => ({\n  root: {\n    '--slider-size': rem(size),\n    '--thumb-size': rem(thumbSize),\n  },\n}));\n\nexport const AngleSlider = factory<AngleSliderFactory>((_props) => {\n  const props = useProps('AngleSlider', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    step,\n    value,\n    defaultValue,\n    onChange,\n    onMouseDown,\n    withLabel,\n    marks,\n    thumbSize,\n    restrictToMarks,\n    formatLabel,\n    onChangeEnd,\n    disabled,\n    onTouchStart,\n    name,\n    hiddenInputProps,\n    'aria-label': ariaLabel,\n    tabIndex,\n    onScrubStart,\n    onScrubEnd,\n    mod,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const rootRef = useRef<HTMLDivElement | null>(null);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: 0,\n    onChange,\n  });\n\n  const update = (val: number) => {\n    if (rootRef.current && !disabled) {\n      const newValue =\n        restrictToMarks && Array.isArray(marks)\n          ? findClosestNumber(\n              val,\n              marks.map((mark) => mark.value)\n            )\n          : val;\n\n      setValue(newValue);\n    }\n  };\n\n  const { ref: radialMoveRef } = useRadialMove(update, {\n    step,\n    onChangeEnd,\n    onScrubStart,\n    onScrubEnd,\n  });\n\n  const getStyles = useStyles<AngleSliderFactory>({\n    name: 'AngleSlider',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      return;\n    }\n\n    let newValue = _value;\n\n    if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      if (_value === 0) {\n        newValue = 359;\n      } else {\n        newValue = normalizeRadialValue(_value - step, step);\n      }\n    }\n\n    if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      if (_value === 359) {\n        newValue = 0;\n      } else {\n        newValue = normalizeRadialValue(_value + step, step);\n      }\n    }\n\n    if (event.key === 'Home') {\n      newValue = 0;\n    }\n\n    if (event.key === 'End') {\n      newValue = 359;\n    }\n\n    if (restrictToMarks && Array.isArray(marks)) {\n      const markValues = marks.map((mark) => mark.value);\n      const currentIndex = markValues.indexOf(_value);\n\n      if (currentIndex !== -1) {\n        if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {\n          newValue = markValues[currentIndex === 0 ? markValues.length - 1 : currentIndex - 1];\n        } else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {\n          newValue = markValues[currentIndex === markValues.length - 1 ? 0 : currentIndex + 1];\n        } else {\n          newValue = findClosestNumber(newValue, markValues);\n        }\n      } else {\n        newValue = findClosestNumber(newValue, markValues);\n      }\n    }\n\n    setValue(newValue);\n    onChangeEnd?.(newValue);\n  };\n\n  const marksItems = marks?.map((mark, index) => (\n    <div\n      {...getStyles('mark', { style: { '--angle': `${mark.value}deg` } })}\n      data-label={mark.label || undefined}\n      key={index}\n    />\n  ));\n\n  return (\n    <Box\n      ref={useMergedRef(ref, rootRef, radialMoveRef)}\n      {...getStyles('root', { focusable: true })}\n      mod={[{ disabled }, mod]}\n      {...others}\n    >\n      {marksItems && marksItems.length > 0 && <div {...getStyles('marks')}>{marksItems}</div>}\n\n      {withLabel && (\n        <div {...getStyles('label')}>\n          {typeof formatLabel === 'function' ? formatLabel(_value) : _value}\n        </div>\n      )}\n      <div\n        tabIndex={tabIndex ?? (disabled ? -1 : 0)}\n        role=\"slider\"\n        aria-valuemax={360}\n        aria-valuemin={0}\n        aria-valuenow={_value}\n        onKeyDown={handleKeyDown}\n        aria-label={ariaLabel}\n        {...getStyles('thumb', { style: { transform: `rotate(${_value}deg)` } })}\n      />\n      <input type=\"hidden\" name={name} value={_value} {...hiddenInputProps} />\n    </Box>\n  );\n});\n\nAngleSlider.displayName = '@mantine/core/AngleSlider';\nAngleSlider.classes = classes;\nAngleSlider.varsResolver = varsResolver;\n\nexport namespace AngleSlider {\n  export type Props = AngleSliderProps;\n  export type StylesNames = AngleSliderStylesNames;\n  export type CssVariables = AngleSliderCssVariables;\n  export type Factory = AngleSliderFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AAgFA,MAAM,eAAe;CACnB,MAAM;CACN,WAAW;AACb;AAEA,MAAM,eAAe,oBAAwC,GAAG,EAAE,MAAM,iBAAiB,EACvF,MAAM;CACJ,iBAAiB,IAAI,IAAI;CACzB,gBAAgB,IAAI,SAAS;AAC/B,EACF,EAAE;AAEF,MAAa,cAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,OACA,cACA,UACA,aACA,WACA,OACA,WACA,iBACA,aACA,aACA,UACA,cACA,MACA,kBACA,cAAc,WACd,UACA,cACA,YACA,KACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,UAAU,OAA8B,IAAI;CAElD,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY;EACZ;CACF,CAAC;CAED,MAAM,UAAU,QAAgB;EAC9B,IAAI,QAAQ,WAAW,CAAC,UAAU;GAChC,MAAM,WACJ,mBAAmB,MAAM,QAAQ,KAAK,IAClC,kBACE,KACA,MAAM,KAAK,SAAS,KAAK,KAAK,CAChC,IACA;GAEN,SAAS,QAAQ;EACnB;CACF;CAEA,MAAM,EAAE,KAAK,kBAAkB,cAAc,QAAQ;EACnD;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,YAAY,UAA8B;EAC9C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,iBAAiB,UAA+C;EACpE,IAAI,UACF;EAGF,IAAI,WAAW;EAEf,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,aAAa;GAC1D,MAAM,eAAe;GACrB,IAAI,WAAW,GACb,WAAW;QAEX,WAAW,qBAAqB,SAAS,MAAM,IAAI;EAEvD;EAEA,IAAI,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,WAAW;GACzD,MAAM,eAAe;GACrB,IAAI,WAAW,KACb,WAAW;QAEX,WAAW,qBAAqB,SAAS,MAAM,IAAI;EAEvD;EAEA,IAAI,MAAM,QAAQ,QAChB,WAAW;EAGb,IAAI,MAAM,QAAQ,OAChB,WAAW;EAGb,IAAI,mBAAmB,MAAM,QAAQ,KAAK,GAAG;GAC3C,MAAM,aAAa,MAAM,KAAK,SAAS,KAAK,KAAK;GACjD,MAAM,eAAe,WAAW,QAAQ,MAAM;GAE9C,IAAI,iBAAiB,IACnB,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,aAC7C,WAAW,WAAW,iBAAiB,IAAI,WAAW,SAAS,IAAI,eAAe;QAC7E,IAAI,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,WACrD,WAAW,WAAW,iBAAiB,WAAW,SAAS,IAAI,IAAI,eAAe;QAElF,WAAW,kBAAkB,UAAU,UAAU;QAGnD,WAAW,kBAAkB,UAAU,UAAU;EAErD;EAEA,SAAS,QAAQ;EACjB,cAAc,QAAQ;CACxB;CAEA,MAAM,aAAa,OAAO,KAAK,MAAM,UACnC,8BAAC,OAAD;EACE,GAAI,UAAU,QAAQ,EAAE,OAAO,EAAE,WAAW,GAAG,KAAK,MAAM,KAAK,EAAE,CAAC;EAClE,cAAY,KAAK,SAAS,KAAA;EAC1B,KAAK;CACN,CAAA,CACF;CAED,OACE,qBAAC,KAAD;EACE,KAAK,aAAa,KAAK,SAAS,aAAa;EAC7C,GAAI,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC;EACzC,KAAK,CAAC,EAAE,SAAS,GAAG,GAAG;EACvB,GAAI;YAJN;GAMG,cAAc,WAAW,SAAS,KAAK,oBAAC,OAAD;IAAK,GAAI,UAAU,OAAO;cAAI;GAAgB,CAAA;GAErF,aACC,oBAAC,OAAD;IAAK,GAAI,UAAU,OAAO;cACvB,OAAO,gBAAgB,aAAa,YAAY,MAAM,IAAI;GACxD,CAAA;GAEP,oBAAC,OAAD;IACE,UAAU,aAAa,WAAW,KAAK;IACvC,MAAK;IACL,iBAAe;IACf,iBAAe;IACf,iBAAe;IACf,WAAW;IACX,cAAY;IACZ,GAAI,UAAU,SAAS,EAAE,OAAO,EAAE,WAAW,UAAU,OAAO,MAAM,EAAE,CAAC;GACxE,CAAA;GACD,oBAAC,SAAD;IAAO,MAAK;IAAe;IAAM,OAAO;IAAQ,GAAI;GAAmB,CAAA;EACpE;;AAET,CAAC;AAED,YAAY,cAAc;AAC1B,YAAY,UAAUA;AACtB,YAAY,eAAe"}
+{"version":3,"file":"AngleSlider.mjs","names":["classes"],"sources":["../../../src/components/AngleSlider/AngleSlider.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { normalizeRadialValue, useMergedRef, useRadialMove, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  findClosestNumber,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './AngleSlider.module.css';\n\nexport type AngleSliderStylesNames = 'root' | 'thumb' | 'label' | 'marks' | 'mark';\nexport type AngleSliderCssVariables = {\n  root: '--slider-size' | '--thumb-size';\n};\n\nexport interface AngleSliderProps\n  extends BoxProps, StylesApiProps<AngleSliderFactory>, ElementProps<'div', 'onChange'> {\n  /** Step between values @default 1 */\n  step?: number;\n\n  /** Controlled component value */\n  value?: number;\n\n  /** Uncontrolled component default value */\n  defaultValue?: number;\n\n  /** Called on value change */\n  onChange?: (value: number) => void;\n\n  /** Called after the selection is finished */\n  onChangeEnd?: (value: number) => void;\n\n  /** Called in `onMouseDown` and `onTouchStart` */\n  onScrubStart?: () => void;\n\n  /** Called in `onMouseUp` and `onTouchEnd` */\n  onScrubEnd?: () => void;\n\n  /** If set, the label is displayed inside the slider @default true */\n  withLabel?: boolean;\n\n  /** Array of marks displayed on the slider */\n  marks?: { value: number; label?: string }[];\n\n  /** Slider size in px @default 60 */\n  size?: number;\n\n  /** Size of the thumb in px. Calculated based on the `size` value by default. */\n  thumbSize?: number;\n\n  /** A function to format label based on the current value */\n  formatLabel?: (value: number) => React.ReactNode;\n\n  /** Sets `data-disabled` attribute, disables interactions */\n  disabled?: boolean;\n\n  /** If set, the selection is allowed only from the given marks array @default false */\n  restrictToMarks?: boolean;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'>;\n\n  /** Hidden input name, use with uncontrolled component */\n  name?: string;\n}\n\nexport type AngleSliderFactory = Factory<{\n  props: AngleSliderProps;\n  ref: HTMLDivElement;\n  stylesNames: AngleSliderStylesNames;\n  vars: AngleSliderCssVariables;\n}>;\n\nconst defaultProps = {\n  step: 1,\n  withLabel: true,\n} satisfies Partial<AngleSliderProps>;\n\nconst varsResolver = createVarsResolver<AngleSliderFactory>((_, { size, thumbSize }) => ({\n  root: {\n    '--slider-size': rem(size),\n    '--thumb-size': rem(thumbSize),\n  },\n}));\n\nexport const AngleSlider = factory<AngleSliderFactory>((_props) => {\n  const props = useProps('AngleSlider', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    step,\n    value,\n    defaultValue,\n    onChange,\n    onMouseDown,\n    withLabel,\n    marks,\n    thumbSize,\n    restrictToMarks,\n    formatLabel,\n    onChangeEnd,\n    disabled,\n    onTouchStart,\n    name,\n    hiddenInputProps,\n    'aria-label': ariaLabel,\n    tabIndex,\n    onScrubStart,\n    onScrubEnd,\n    mod,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const rootRef = useRef<HTMLDivElement | null>(null);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: 0,\n    onChange,\n  });\n\n  const update = (val: number) => {\n    if (rootRef.current && !disabled) {\n      const newValue =\n        restrictToMarks && Array.isArray(marks)\n          ? findClosestNumber(\n              val,\n              marks.map((mark) => mark.value)\n            )\n          : val;\n\n      setValue(newValue);\n    }\n  };\n\n  const { ref: radialMoveRef } = useRadialMove(update, {\n    step,\n    onChangeEnd,\n    onScrubStart,\n    onScrubEnd,\n  });\n\n  const getStyles = useStyles<AngleSliderFactory>({\n    name: 'AngleSlider',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      return;\n    }\n\n    let newValue = _value;\n\n    if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      if (_value === 0) {\n        newValue = 359;\n      } else {\n        newValue = normalizeRadialValue(_value - step, step);\n      }\n    }\n\n    if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      if (_value === 359) {\n        newValue = 0;\n      } else {\n        newValue = normalizeRadialValue(_value + step, step);\n      }\n    }\n\n    if (event.key === 'Home') {\n      newValue = 0;\n    }\n\n    if (event.key === 'End') {\n      newValue = 359;\n    }\n\n    if (restrictToMarks && Array.isArray(marks)) {\n      const markValues = marks.map((mark) => mark.value);\n      const currentIndex = markValues.indexOf(_value);\n\n      if (currentIndex !== -1) {\n        if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {\n          newValue = markValues[currentIndex === 0 ? markValues.length - 1 : currentIndex - 1];\n        } else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {\n          newValue = markValues[currentIndex === markValues.length - 1 ? 0 : currentIndex + 1];\n        } else {\n          newValue = findClosestNumber(newValue, markValues);\n        }\n      } else {\n        newValue = findClosestNumber(newValue, markValues);\n      }\n    }\n\n    setValue(newValue);\n    onChangeEnd?.(newValue);\n  };\n\n  const marksItems = marks?.map((mark, index) => (\n    <div\n      {...getStyles('mark', { style: { '--angle': `${mark.value}deg` } })}\n      data-label={mark.label || undefined}\n      key={index}\n    />\n  ));\n\n  return (\n    <Box\n      ref={useMergedRef(ref, rootRef, radialMoveRef)}\n      {...getStyles('root', { focusable: true })}\n      mod={[{ disabled }, mod]}\n      {...others}\n    >\n      {marksItems && marksItems.length > 0 && <div {...getStyles('marks')}>{marksItems}</div>}\n\n      {withLabel && (\n        <div {...getStyles('label')}>\n          {typeof formatLabel === 'function' ? formatLabel(_value) : _value}\n        </div>\n      )}\n      <div\n        tabIndex={tabIndex ?? (disabled ? -1 : 0)}\n        role=\"slider\"\n        aria-valuemax={360}\n        aria-valuemin={0}\n        aria-valuenow={_value}\n        onKeyDown={handleKeyDown}\n        aria-label={ariaLabel}\n        {...getStyles('thumb', { style: { transform: `rotate(${_value}deg)` } })}\n      />\n      <input type=\"hidden\" name={name} value={_value} {...hiddenInputProps} />\n    </Box>\n  );\n});\n\nAngleSlider.displayName = '@mantine/core/AngleSlider';\nAngleSlider.classes = classes;\nAngleSlider.varsResolver = varsResolver;\n\nexport namespace AngleSlider {\n  export type Props = AngleSliderProps;\n  export type StylesNames = AngleSliderStylesNames;\n  export type CssVariables = AngleSliderCssVariables;\n  export type Factory = AngleSliderFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AAgFA,MAAM,eAAe;CACnB,MAAM;CACN,WAAW;AACb;AAEA,MAAM,eAAe,oBAAwC,GAAG,EAAE,MAAM,iBAAiB,EACvF,MAAM;CACJ,iBAAiB,IAAI,IAAI;CACzB,gBAAgB,IAAI,SAAS;AAC/B,EACF,EAAE;AAEF,MAAa,cAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,OACA,cACA,UACA,aACA,WACA,OACA,WACA,iBACA,aACA,aACA,UACA,cACA,MACA,kBACA,cAAc,WACd,UACA,cACA,YACA,KACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,UAAU,OAA8B,IAAI;CAElD,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY;EACZ;CACF,CAAC;CAED,MAAM,UAAU,QAAgB;EAC9B,IAAI,QAAQ,WAAW,CAAC,UAAU;GAChC,MAAM,WACJ,mBAAmB,MAAM,QAAQ,KAAK,IAClC,kBACE,KACA,MAAM,KAAK,SAAS,KAAK,KAAK,CAChC,IACA;GAEN,SAAS,QAAQ;EACnB;CACF;CAEA,MAAM,EAAE,KAAK,kBAAkB,cAAc,QAAQ;EACnD;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,YAAY,UAA8B;EAC9C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,iBAAiB,UAA+C;EACpE,IAAI,UACF;EAGF,IAAI,WAAW;EAEf,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,aAAa;GAC1D,MAAM,eAAe;GACrB,IAAI,WAAW,GACb,WAAW;QAEX,WAAW,qBAAqB,SAAS,MAAM,IAAI;EAEvD;EAEA,IAAI,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,WAAW;GACzD,MAAM,eAAe;GACrB,IAAI,WAAW,KACb,WAAW;QAEX,WAAW,qBAAqB,SAAS,MAAM,IAAI;EAEvD;EAEA,IAAI,MAAM,QAAQ,QAChB,WAAW;EAGb,IAAI,MAAM,QAAQ,OAChB,WAAW;EAGb,IAAI,mBAAmB,MAAM,QAAQ,KAAK,GAAG;GAC3C,MAAM,aAAa,MAAM,KAAK,SAAS,KAAK,KAAK;GACjD,MAAM,eAAe,WAAW,QAAQ,MAAM;GAE9C,IAAI,iBAAiB,IAAI;IACvB,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,aAC7C,WAAW,WAAW,iBAAiB,IAAI,WAAW,SAAS,IAAI,eAAe;SAC7E,IAAI,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,WACrD,WAAW,WAAW,iBAAiB,WAAW,SAAS,IAAI,IAAI,eAAe;SAElF,WAAW,kBAAkB,UAAU,UAAU;GAErD,OACE,WAAW,kBAAkB,UAAU,UAAU;EAErD;EAEA,SAAS,QAAQ;EACjB,cAAc,QAAQ;CACxB;CAEA,MAAM,aAAa,OAAO,KAAK,MAAM,UACnC,8BAAC,OAAD;EACE,GAAI,UAAU,QAAQ,EAAE,OAAO,EAAE,WAAW,GAAG,KAAK,MAAM,KAAK,EAAE,CAAC;EAClE,cAAY,KAAK,SAAS,KAAA;EAC1B,KAAK;CACN,CAAA,CACF;CAED,OACE,qBAAC,KAAD;EACE,KAAK,aAAa,KAAK,SAAS,aAAa;EAC7C,GAAI,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC;EACzC,KAAK,CAAC,EAAE,SAAS,GAAG,GAAG;EACvB,GAAI;EAJN,UAAA;GAMG,cAAc,WAAW,SAAS,KAAK,oBAAC,OAAD;IAAK,GAAI,UAAU,OAAO;IAAI,UAAA;GAAgB,CAAA;GAErF,aACC,oBAAC,OAAD;IAAK,GAAI,UAAU,OAAO;IACvB,UAAA,OAAO,gBAAgB,aAAa,YAAY,MAAM,IAAI;GACxD,CAAA;GAEP,oBAAC,OAAD;IACE,UAAU,aAAa,WAAW,KAAK;IACvC,MAAK;IACL,iBAAe;IACf,iBAAe;IACf,iBAAe;IACf,WAAW;IACX,cAAY;IACZ,GAAI,UAAU,SAAS,EAAE,OAAO,EAAE,WAAW,UAAU,OAAO,MAAM,EAAE,CAAC;GACxE,CAAA;GACD,oBAAC,SAAD;IAAO,MAAK;IAAe;IAAM,OAAO;IAAQ,GAAI;GAAmB,CAAA;EACpE;;AAET,CAAC;AAED,YAAY,cAAc;AAC1B,YAAY,UAAUA;AACtB,YAAY,eAAe"}

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;YAA3F,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":["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"}

package/esm/components/AppShell/AppShellMain/AppShellMain.mjs

@@ -8,9 +8,10 @@ import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/AppShell/AppShellMain/AppShellMain.tsx
 const AppShellMain = factory((_props) => {
 	const { classNames, className, style, styles, vars, ...others } = useProps("AppShellMain", null, _props);
+	const ctx = useAppShellContext();
 	return /* @__PURE__ */ jsx(Box, {
 		component: "main",
-		...useAppShellContext().getStyles("main", {
+		...ctx.getStyles("main", {
 			className,
 			style,
 			classNames,

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

@@ -1 +1 @@
-{"version":3,"file":"AppShellMain.mjs","names":["classes"],"sources":["../../../../src/components/AppShell/AppShellMain/AppShellMain.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useAppShellContext } from '../AppShell.context';\nimport classes from '../AppShell.module.css';\n\nexport type AppShellMainStylesNames = 'main';\n\nexport interface AppShellMainProps\n  extends BoxProps, CompoundStylesApiProps<AppShellMainFactory>, ElementProps<'main'> {}\n\nexport type AppShellMainFactory = Factory<{\n  props: AppShellMainProps;\n  ref: HTMLElement;\n  stylesNames: AppShellMainStylesNames;\n  compound: true;\n}>;\n\nexport const AppShellMain = factory<AppShellMainFactory>((_props) => {\n  const { classNames, className, style, styles, vars, ...others } = useProps(\n    'AppShellMain',\n    null,\n    _props\n  );\n\n  const ctx = useAppShellContext();\n\n  return (\n    <Box\n      component=\"main\"\n      {...ctx.getStyles('main', { className, style, classNames, styles })}\n      {...others}\n    />\n  );\n});\n\nAppShellMain.classes = classes;\nAppShellMain.displayName = '@mantine/core/AppShellMain';\n"],"mappings":";;;;;;;;AAwBA,MAAa,eAAe,SAA8B,WAAW;CACnE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WAAW,SAChE,gBACA,MACA,MACF;CAIA,OACE,oBAAC,KAAD;EACE,WAAU;EACV,GALQ,mBAKF,CAAC,CAAC,UAAU,QAAQ;GAAE;GAAW;GAAO;GAAY;EAAO,CAAC;EAClE,GAAI;CACL,CAAA;AAEL,CAAC;AAED,aAAa,UAAUA;AACvB,aAAa,cAAc"}
+{"version":3,"file":"AppShellMain.mjs","names":["classes"],"sources":["../../../../src/components/AppShell/AppShellMain/AppShellMain.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useAppShellContext } from '../AppShell.context';\nimport classes from '../AppShell.module.css';\n\nexport type AppShellMainStylesNames = 'main';\n\nexport interface AppShellMainProps\n  extends BoxProps, CompoundStylesApiProps<AppShellMainFactory>, ElementProps<'main'> {}\n\nexport type AppShellMainFactory = Factory<{\n  props: AppShellMainProps;\n  ref: HTMLElement;\n  stylesNames: AppShellMainStylesNames;\n  compound: true;\n}>;\n\nexport const AppShellMain = factory<AppShellMainFactory>((_props) => {\n  const { classNames, className, style, styles, vars, ...others } = useProps(\n    'AppShellMain',\n    null,\n    _props\n  );\n\n  const ctx = useAppShellContext();\n\n  return (\n    <Box\n      component=\"main\"\n      {...ctx.getStyles('main', { className, style, classNames, styles })}\n      {...others}\n    />\n  );\n});\n\nAppShellMain.classes = classes;\nAppShellMain.displayName = '@mantine/core/AppShellMain';\n"],"mappings":";;;;;;;;AAwBA,MAAa,eAAe,SAA8B,WAAW;CACnE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WAAW,SAChE,gBACA,MACA,MACF;CAEA,MAAM,MAAM,mBAAmB;CAE/B,OACE,oBAAC,KAAD;EACE,WAAU;EACV,GAAI,IAAI,UAAU,QAAQ;GAAE;GAAW;GAAO;GAAY;EAAO,CAAC;EAClE,GAAI;CACL,CAAA;AAEL,CAAC;AAED,aAAa,UAAUA;AACvB,aAAa,cAAc"}