@mantine/core 9.6.2 → 9.7.0

package/esm/core/Box/Box.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Box.mjs","names":[],"sources":["../../../src/core/Box/Box.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { polymorphic } from '../factory';\nimport { hashStyleProps, InlineStyles } from '../InlineStyles';\nimport {\n  MantineBreakpoint,\n  useMantineDeduplicateInlineStyles,\n  useMantineSxTransform,\n  useMantineTheme,\n} from '../MantineProvider';\nimport { isNumberLike } from '../utils';\nimport type { CssVarsProp, MantineStyleProp } from './Box.types';\nimport { getBoxMod } from './get-box-mod/get-box-mod';\nimport { getBoxStyle } from './get-box-style/get-box-style';\nimport {\n  extractStyleProps,\n  MantineStyleProps,\n  parseStyleProps,\n  STYlE_PROPS_DATA,\n} from './style-props';\nimport { useRandomClassName } from './use-random-classname/use-random-classname';\n\nexport type Mod = Record<string, any> | string;\nexport type BoxMod = Mod | Mod[] | BoxMod[];\n\nexport interface BoxProps extends MantineStyleProps {\n  /** Class added to the root element, if applicable */\n  className?: string | undefined;\n\n  /** Inline style added to root component element, can subscribe to theme defined on MantineProvider */\n  style?: MantineStyleProp;\n\n  /** CSS variables defined on root component element */\n  __vars?: CssVarsProp;\n\n  /** `size` property passed down the HTML element */\n  __size?: string;\n\n  /** Breakpoint above which the component is hidden with `display: none` */\n  hiddenFrom?: MantineBreakpoint;\n\n  /** Breakpoint below which the component is hidden with `display: none` */\n  visibleFrom?: MantineBreakpoint;\n\n  /** Determines whether component should be hidden in light color scheme with `display: none` */\n  lightHidden?: boolean;\n\n  /** Determines whether component should be hidden in dark color scheme with `display: none` */\n  darkHidden?: boolean;\n\n  /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */\n  mod?: BoxMod;\n}\n\nexport type ElementProps<\n  ElementType extends React.ElementType,\n  PropsToOmit extends string = never,\n> = Omit<React.ComponentProps<ElementType>, 'style' | PropsToOmit>;\n\nexport interface BoxComponentProps extends BoxProps {\n  /** Variant passed from parent component, sets `data-variant` */\n  variant?: string;\n\n  /** Size passed from parent component, sets `data-size` if value is not number like */\n  size?: string | number;\n}\n\nfunction _Box({\n  component,\n  style,\n  __vars,\n  className,\n  variant,\n  mod,\n  size,\n  hiddenFrom,\n  visibleFrom,\n  lightHidden,\n  darkHidden,\n  renderRoot,\n  __size,\n  ref,\n  ...others\n}: BoxComponentProps & { component: any; className: string; renderRoot: any; ref: any }) {\n  const theme = useMantineTheme();\n  const Element = component || 'div';\n  const { styleProps, rest } = extractStyleProps(others);\n  const useSxTransform = useMantineSxTransform();\n  const transformedSx = useSxTransform?.()?.(styleProps.sx);\n  const randomClassName = useRandomClassName();\n  const parsedStyleProps = parseStyleProps({\n    styleProps,\n    theme,\n    data: STYlE_PROPS_DATA,\n  });\n\n  const deduplicateInlineStyles = useMantineDeduplicateInlineStyles();\n  const responsiveClassName =\n    deduplicateInlineStyles && parsedStyleProps.hasResponsiveStyles\n      ? hashStyleProps(parsedStyleProps.styles, parsedStyleProps.media)\n      : randomClassName;\n\n  const props = {\n    ref,\n    style: getBoxStyle({\n      theme,\n      style,\n      vars: __vars,\n      styleProps: parsedStyleProps.inlineStyles,\n    }),\n    className: cx(className, transformedSx, {\n      [responsiveClassName]: parsedStyleProps.hasResponsiveStyles,\n      'mantine-light-hidden': lightHidden,\n      'mantine-dark-hidden': darkHidden,\n      [`mantine-hidden-from-${hiddenFrom}`]: hiddenFrom,\n      [`mantine-visible-from-${visibleFrom}`]: visibleFrom,\n    }),\n    'data-variant': variant,\n    'data-size': isNumberLike(size) ? undefined : size || undefined,\n    size: __size,\n    ...getBoxMod(mod),\n    ...rest,\n  };\n\n  return (\n    <>\n      {parsedStyleProps.hasResponsiveStyles && (\n        <InlineStyles\n          selector={`.${responsiveClassName}`}\n          styles={parsedStyleProps.styles}\n          media={parsedStyleProps.media}\n          deduplicate={deduplicateInlineStyles}\n        />\n      )}\n\n      {typeof renderRoot === 'function' ? renderRoot(props) : <Element {...props} />}\n    </>\n  );\n}\n\n_Box.displayName = '@mantine/core/Box';\n\nexport const Box = polymorphic<'div', BoxComponentProps>(_Box);\n"],"mappings":";;;;;;;;;;;;;;;;AAkEA,SAAS,KAAK,EACZ,WACA,OACA,QACA,WACA,SACA,KACA,MACA,YACA,aACA,aACA,YACA,YACA,QACA,KACA,GAAG,UACoF;CACvF,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,UAAU,aAAa;CAC7B,MAAM,EAAE,YAAY,SAAS,kBAAkB,MAAM;CAErD,MAAM,gBADiB,sBACY,CAAC,GAAG,CAAC,GAAG,WAAW,EAAE;CACxD,MAAM,kBAAkB,mBAAmB;CAC3C,MAAM,mBAAmB,gBAAgB;EACvC;EACA;EACA,MAAM;CACR,CAAC;CAED,MAAM,0BAA0B,kCAAkC;CAClE,MAAM,sBACJ,2BAA2B,iBAAiB,sBACxC,eAAe,iBAAiB,QAAQ,iBAAiB,KAAK,IAC9D;CAEN,MAAM,QAAQ;EACZ;EACA,OAAO,YAAY;GACjB;GACA;GACA,MAAM;GACN,YAAY,iBAAiB;EAC/B,CAAC;EACD,WAAW,GAAG,WAAW,eAAe;IACrC,sBAAsB,iBAAiB;GACxC,wBAAwB;GACxB,uBAAuB;IACtB,uBAAuB,eAAe;IACtC,wBAAwB,gBAAgB;EAC3C,CAAC;EACD,gBAAgB;EAChB,aAAa,aAAa,IAAI,IAAI,KAAA,IAAY,QAAQ,KAAA;EACtD,MAAM;EACN,GAAG,UAAU,GAAG;EAChB,GAAG;CACL;CAEA,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,iBAAiB,uBAChB,oBAAC,cAAD;EACE,UAAU,IAAI;EACd,QAAQ,iBAAiB;EACzB,OAAO,iBAAiB;EACxB,aAAa;CACd,CAAA,GAGF,OAAO,eAAe,aAAa,WAAW,KAAK,IAAI,oBAAC,SAAD,EAAS,GAAI,MAAQ,CAAA,CAC7E,EAAA,CAAA;AAEN;AAEA,KAAK,cAAc;AAEnB,MAAa,MAAM,YAAsC,IAAI"}
+{"version":3,"file":"Box.mjs","names":[],"sources":["../../../src/core/Box/Box.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { polymorphic } from '../factory';\nimport { hashStyleProps, InlineStyles } from '../InlineStyles';\nimport {\n  MantineBreakpoint,\n  useMantineDeduplicateInlineStyles,\n  useMantineSxTransform,\n  useMantineTheme,\n} from '../MantineProvider';\nimport { isNumberLike } from '../utils';\nimport type { CssVarsProp, MantineStyleProp } from './Box.types';\nimport { getBoxMod } from './get-box-mod/get-box-mod';\nimport { getBoxStyle } from './get-box-style/get-box-style';\nimport {\n  extractStyleProps,\n  MantineStyleProps,\n  parseStyleProps,\n  STYLE_PROPS_DATA,\n} from './style-props';\nimport { useRandomClassName } from './use-random-classname/use-random-classname';\n\nexport type Mod = Record<string, any> | string;\nexport type BoxMod = Mod | Mod[] | BoxMod[];\n\nexport interface BoxProps extends MantineStyleProps {\n  /** Class added to the root element, if applicable */\n  className?: string | undefined;\n\n  /** Inline style added to root component element, can subscribe to theme defined on MantineProvider */\n  style?: MantineStyleProp;\n\n  /** CSS variables defined on root component element */\n  __vars?: CssVarsProp;\n\n  /** `size` property passed down the HTML element */\n  __size?: string;\n\n  /** Breakpoint above which the component is hidden with `display: none` */\n  hiddenFrom?: MantineBreakpoint;\n\n  /** Breakpoint below which the component is hidden with `display: none` */\n  visibleFrom?: MantineBreakpoint;\n\n  /** Determines whether component should be hidden in light color scheme with `display: none` */\n  lightHidden?: boolean;\n\n  /** Determines whether component should be hidden in dark color scheme with `display: none` */\n  darkHidden?: boolean;\n\n  /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */\n  mod?: BoxMod;\n}\n\nexport type ElementProps<\n  ElementType extends React.ElementType,\n  PropsToOmit extends string = never,\n> = Omit<React.ComponentProps<ElementType>, 'style' | PropsToOmit>;\n\nexport interface BoxComponentProps extends BoxProps {\n  /** Variant passed from parent component, sets `data-variant` */\n  variant?: string;\n\n  /** Size passed from parent component, sets `data-size` if value is not number like */\n  size?: string | number;\n}\n\nfunction _Box({\n  component,\n  style,\n  __vars,\n  className,\n  variant,\n  mod,\n  size,\n  hiddenFrom,\n  visibleFrom,\n  lightHidden,\n  darkHidden,\n  renderRoot,\n  __size,\n  ref,\n  ...others\n}: BoxComponentProps & { component: any; className: string; renderRoot: any; ref: any }) {\n  const theme = useMantineTheme();\n  const Element = component || 'div';\n  const { styleProps, rest } = extractStyleProps(others);\n  const useSxTransform = useMantineSxTransform();\n  const transformedSx = useSxTransform?.()?.(styleProps.sx);\n  const randomClassName = useRandomClassName();\n  const parsedStyleProps = parseStyleProps({\n    styleProps,\n    theme,\n    data: STYLE_PROPS_DATA,\n  });\n\n  const deduplicateInlineStyles = useMantineDeduplicateInlineStyles();\n  const responsiveClassName =\n    deduplicateInlineStyles && parsedStyleProps.hasResponsiveStyles\n      ? hashStyleProps(parsedStyleProps.styles, parsedStyleProps.media)\n      : randomClassName;\n\n  const props = {\n    ref,\n    style: getBoxStyle({\n      theme,\n      style,\n      vars: __vars,\n      styleProps: parsedStyleProps.inlineStyles,\n    }),\n    className: cx(className, transformedSx, {\n      [responsiveClassName]: parsedStyleProps.hasResponsiveStyles,\n      'mantine-light-hidden': lightHidden,\n      'mantine-dark-hidden': darkHidden,\n      [`mantine-hidden-from-${hiddenFrom}`]: hiddenFrom,\n      [`mantine-visible-from-${visibleFrom}`]: visibleFrom,\n    }),\n    'data-variant': variant,\n    'data-size': isNumberLike(size) ? undefined : size || undefined,\n    size: __size,\n    ...getBoxMod(mod),\n    ...rest,\n  };\n\n  return (\n    <>\n      {parsedStyleProps.hasResponsiveStyles && (\n        <InlineStyles\n          selector={`.${responsiveClassName}`}\n          styles={parsedStyleProps.styles}\n          media={parsedStyleProps.media}\n          deduplicate={deduplicateInlineStyles}\n        />\n      )}\n\n      {typeof renderRoot === 'function' ? renderRoot(props) : <Element {...props} />}\n    </>\n  );\n}\n\n_Box.displayName = '@mantine/core/Box';\n\nexport const Box = polymorphic<'div', BoxComponentProps>(_Box);\n"],"mappings":";;;;;;;;;;;;;;;;AAkEA,SAAS,KAAK,EACZ,WACA,OACA,QACA,WACA,SACA,KACA,MACA,YACA,aACA,aACA,YACA,YACA,QACA,KACA,GAAG,UACoF;CACvF,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,UAAU,aAAa;CAC7B,MAAM,EAAE,YAAY,SAAS,kBAAkB,MAAM;CAErD,MAAM,gBADiB,sBACY,CAAC,GAAG,CAAC,GAAG,WAAW,EAAE;CACxD,MAAM,kBAAkB,mBAAmB;CAC3C,MAAM,mBAAmB,gBAAgB;EACvC;EACA;EACA,MAAM;CACR,CAAC;CAED,MAAM,0BAA0B,kCAAkC;CAClE,MAAM,sBACJ,2BAA2B,iBAAiB,sBACxC,eAAe,iBAAiB,QAAQ,iBAAiB,KAAK,IAC9D;CAEN,MAAM,QAAQ;EACZ;EACA,OAAO,YAAY;GACjB;GACA;GACA,MAAM;GACN,YAAY,iBAAiB;EAC/B,CAAC;EACD,WAAW,GAAG,WAAW,eAAe;IACrC,sBAAsB,iBAAiB;GACxC,wBAAwB;GACxB,uBAAuB;IACtB,uBAAuB,eAAe;IACtC,wBAAwB,gBAAgB;EAC3C,CAAC;EACD,gBAAgB;EAChB,aAAa,aAAa,IAAI,IAAI,KAAA,IAAY,QAAQ,KAAA;EACtD,MAAM;EACN,GAAG,UAAU,GAAG;EAChB,GAAG;CACL;CAEA,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,iBAAiB,uBAChB,oBAAC,cAAD;EACE,UAAU,IAAI;EACd,QAAQ,iBAAiB;EACzB,OAAO,iBAAiB;EACxB,aAAa;CACd,CAAA,GAGF,OAAO,eAAe,aAAa,WAAW,KAAK,IAAI,oBAAC,SAAD,EAAS,GAAI,MAAQ,CAAA,CAC7E,EAAA,CAAA;AAEN;AAEA,KAAK,cAAc;AAEnB,MAAa,MAAM,YAAsC,IAAI"}

package/esm/core/Box/style-props/style-props-data.mjs

@@ -1,6 +1,6 @@
 "use client";
 //#region packages/@mantine/core/src/core/Box/style-props/style-props-data.ts
-const STYlE_PROPS_DATA = {
+const STYLE_PROPS_DATA = {
 	m: {
 		type: "spacing",
 		property: "margin"
@@ -219,6 +219,6 @@ const STYlE_PROPS_DATA = {
 	}
 };
 //#endregion
-export { STYlE_PROPS_DATA };
+export { STYLE_PROPS_DATA };
 
 //# sourceMappingURL=style-props-data.mjs.map

package/esm/core/Box/style-props/style-props-data.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style-props-data.mjs","names":[],"sources":["../../../../src/core/Box/style-props/style-props-data.ts"],"sourcesContent":["import type { StylePropType } from './resolvers';\nimport type { MantineStyleProps } from './style-props.types';\n\nexport interface SystemPropData {\n  type: StylePropType;\n  property: string | string[];\n}\n\nexport const STYlE_PROPS_DATA: Record<keyof MantineStyleProps, SystemPropData> = {\n  m: { type: 'spacing', property: 'margin' },\n  mt: { type: 'spacing', property: 'marginTop' },\n  mb: { type: 'spacing', property: 'marginBottom' },\n  ml: { type: 'spacing', property: 'marginLeft' },\n  mr: { type: 'spacing', property: 'marginRight' },\n  ms: { type: 'spacing', property: 'marginInlineStart' },\n  me: { type: 'spacing', property: 'marginInlineEnd' },\n  mis: { type: 'spacing', property: 'marginInlineStart' },\n  mie: { type: 'spacing', property: 'marginInlineEnd' },\n  mx: { type: 'spacing', property: 'marginInline' },\n  my: { type: 'spacing', property: 'marginBlock' },\n\n  p: { type: 'spacing', property: 'padding' },\n  pt: { type: 'spacing', property: 'paddingTop' },\n  pb: { type: 'spacing', property: 'paddingBottom' },\n  pl: { type: 'spacing', property: 'paddingLeft' },\n  pr: { type: 'spacing', property: 'paddingRight' },\n  ps: { type: 'spacing', property: 'paddingInlineStart' },\n  pe: { type: 'spacing', property: 'paddingInlineEnd' },\n  pis: { type: 'spacing', property: 'paddingInlineStart' },\n  pie: { type: 'spacing', property: 'paddingInlineEnd' },\n  px: { type: 'spacing', property: 'paddingInline' },\n  py: { type: 'spacing', property: 'paddingBlock' },\n\n  bd: { type: 'border', property: 'border' },\n  bdrs: { type: 'radius', property: 'borderRadius' },\n  bg: { type: 'color', property: 'background' },\n  c: { type: 'textColor', property: 'color' },\n  opacity: { type: 'identity', property: 'opacity' },\n\n  ff: { type: 'fontFamily', property: 'fontFamily' },\n  fz: { type: 'fontSize', property: 'fontSize' },\n  fw: { type: 'identity', property: 'fontWeight' },\n  lts: { type: 'size', property: 'letterSpacing' },\n  ta: { type: 'identity', property: 'textAlign' },\n  lh: { type: 'lineHeight', property: 'lineHeight' },\n  fs: { type: 'identity', property: 'fontStyle' },\n  tt: { type: 'identity', property: 'textTransform' },\n  td: { type: 'identity', property: 'textDecoration' },\n\n  w: { type: 'spacing', property: 'width' },\n  miw: { type: 'spacing', property: 'minWidth' },\n  maw: { type: 'spacing', property: 'maxWidth' },\n  h: { type: 'spacing', property: 'height' },\n  mih: { type: 'spacing', property: 'minHeight' },\n  mah: { type: 'spacing', property: 'maxHeight' },\n\n  bgsz: { type: 'size', property: 'backgroundSize' },\n  bgp: { type: 'identity', property: 'backgroundPosition' },\n  bgr: { type: 'identity', property: 'backgroundRepeat' },\n  bga: { type: 'identity', property: 'backgroundAttachment' },\n\n  pos: { type: 'identity', property: 'position' },\n  top: { type: 'size', property: 'top' },\n  left: { type: 'size', property: 'left' },\n  bottom: { type: 'size', property: 'bottom' },\n  right: { type: 'size', property: 'right' },\n  inset: { type: 'size', property: 'inset' },\n\n  display: { type: 'identity', property: 'display' },\n  flex: { type: 'identity', property: 'flex' },\n};\n"],"mappings":";;AAQA,MAAa,mBAAoE;CAC/E,GAAG;EAAE,MAAM;EAAW,UAAU;CAAS;CACzC,IAAI;EAAE,MAAM;EAAW,UAAU;CAAY;CAC7C,IAAI;EAAE,MAAM;EAAW,UAAU;CAAe;CAChD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAa;CAC9C,IAAI;EAAE,MAAM;EAAW,UAAU;CAAc;CAC/C,IAAI;EAAE,MAAM;EAAW,UAAU;CAAoB;CACrD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAkB;CACnD,KAAK;EAAE,MAAM;EAAW,UAAU;CAAoB;CACtD,KAAK;EAAE,MAAM;EAAW,UAAU;CAAkB;CACpD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAe;CAChD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAc;CAE/C,GAAG;EAAE,MAAM;EAAW,UAAU;CAAU;CAC1C,IAAI;EAAE,MAAM;EAAW,UAAU;CAAa;CAC9C,IAAI;EAAE,MAAM;EAAW,UAAU;CAAgB;CACjD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAc;CAC/C,IAAI;EAAE,MAAM;EAAW,UAAU;CAAe;CAChD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAqB;CACtD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAmB;CACpD,KAAK;EAAE,MAAM;EAAW,UAAU;CAAqB;CACvD,KAAK;EAAE,MAAM;EAAW,UAAU;CAAmB;CACrD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAgB;CACjD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAe;CAEhD,IAAI;EAAE,MAAM;EAAU,UAAU;CAAS;CACzC,MAAM;EAAE,MAAM;EAAU,UAAU;CAAe;CACjD,IAAI;EAAE,MAAM;EAAS,UAAU;CAAa;CAC5C,GAAG;EAAE,MAAM;EAAa,UAAU;CAAQ;CAC1C,SAAS;EAAE,MAAM;EAAY,UAAU;CAAU;CAEjD,IAAI;EAAE,MAAM;EAAc,UAAU;CAAa;CACjD,IAAI;EAAE,MAAM;EAAY,UAAU;CAAW;CAC7C,IAAI;EAAE,MAAM;EAAY,UAAU;CAAa;CAC/C,KAAK;EAAE,MAAM;EAAQ,UAAU;CAAgB;CAC/C,IAAI;EAAE,MAAM;EAAY,UAAU;CAAY;CAC9C,IAAI;EAAE,MAAM;EAAc,UAAU;CAAa;CACjD,IAAI;EAAE,MAAM;EAAY,UAAU;CAAY;CAC9C,IAAI;EAAE,MAAM;EAAY,UAAU;CAAgB;CAClD,IAAI;EAAE,MAAM;EAAY,UAAU;CAAiB;CAEnD,GAAG;EAAE,MAAM;EAAW,UAAU;CAAQ;CACxC,KAAK;EAAE,MAAM;EAAW,UAAU;CAAW;CAC7C,KAAK;EAAE,MAAM;EAAW,UAAU;CAAW;CAC7C,GAAG;EAAE,MAAM;EAAW,UAAU;CAAS;CACzC,KAAK;EAAE,MAAM;EAAW,UAAU;CAAY;CAC9C,KAAK;EAAE,MAAM;EAAW,UAAU;CAAY;CAE9C,MAAM;EAAE,MAAM;EAAQ,UAAU;CAAiB;CACjD,KAAK;EAAE,MAAM;EAAY,UAAU;CAAqB;CACxD,KAAK;EAAE,MAAM;EAAY,UAAU;CAAmB;CACtD,KAAK;EAAE,MAAM;EAAY,UAAU;CAAuB;CAE1D,KAAK;EAAE,MAAM;EAAY,UAAU;CAAW;CAC9C,KAAK;EAAE,MAAM;EAAQ,UAAU;CAAM;CACrC,MAAM;EAAE,MAAM;EAAQ,UAAU;CAAO;CACvC,QAAQ;EAAE,MAAM;EAAQ,UAAU;CAAS;CAC3C,OAAO;EAAE,MAAM;EAAQ,UAAU;CAAQ;CACzC,OAAO;EAAE,MAAM;EAAQ,UAAU;CAAQ;CAEzC,SAAS;EAAE,MAAM;EAAY,UAAU;CAAU;CACjD,MAAM;EAAE,MAAM;EAAY,UAAU;CAAO;AAC7C"}
+{"version":3,"file":"style-props-data.mjs","names":[],"sources":["../../../../src/core/Box/style-props/style-props-data.ts"],"sourcesContent":["import type { StylePropType } from './resolvers';\nimport type { MantineStyleProps } from './style-props.types';\n\nexport interface SystemPropData {\n  type: StylePropType;\n  property: string | string[];\n}\n\nexport const STYLE_PROPS_DATA: Record<keyof MantineStyleProps, SystemPropData> = {\n  m: { type: 'spacing', property: 'margin' },\n  mt: { type: 'spacing', property: 'marginTop' },\n  mb: { type: 'spacing', property: 'marginBottom' },\n  ml: { type: 'spacing', property: 'marginLeft' },\n  mr: { type: 'spacing', property: 'marginRight' },\n  ms: { type: 'spacing', property: 'marginInlineStart' },\n  me: { type: 'spacing', property: 'marginInlineEnd' },\n  mis: { type: 'spacing', property: 'marginInlineStart' },\n  mie: { type: 'spacing', property: 'marginInlineEnd' },\n  mx: { type: 'spacing', property: 'marginInline' },\n  my: { type: 'spacing', property: 'marginBlock' },\n\n  p: { type: 'spacing', property: 'padding' },\n  pt: { type: 'spacing', property: 'paddingTop' },\n  pb: { type: 'spacing', property: 'paddingBottom' },\n  pl: { type: 'spacing', property: 'paddingLeft' },\n  pr: { type: 'spacing', property: 'paddingRight' },\n  ps: { type: 'spacing', property: 'paddingInlineStart' },\n  pe: { type: 'spacing', property: 'paddingInlineEnd' },\n  pis: { type: 'spacing', property: 'paddingInlineStart' },\n  pie: { type: 'spacing', property: 'paddingInlineEnd' },\n  px: { type: 'spacing', property: 'paddingInline' },\n  py: { type: 'spacing', property: 'paddingBlock' },\n\n  bd: { type: 'border', property: 'border' },\n  bdrs: { type: 'radius', property: 'borderRadius' },\n  bg: { type: 'color', property: 'background' },\n  c: { type: 'textColor', property: 'color' },\n  opacity: { type: 'identity', property: 'opacity' },\n\n  ff: { type: 'fontFamily', property: 'fontFamily' },\n  fz: { type: 'fontSize', property: 'fontSize' },\n  fw: { type: 'identity', property: 'fontWeight' },\n  lts: { type: 'size', property: 'letterSpacing' },\n  ta: { type: 'identity', property: 'textAlign' },\n  lh: { type: 'lineHeight', property: 'lineHeight' },\n  fs: { type: 'identity', property: 'fontStyle' },\n  tt: { type: 'identity', property: 'textTransform' },\n  td: { type: 'identity', property: 'textDecoration' },\n\n  w: { type: 'spacing', property: 'width' },\n  miw: { type: 'spacing', property: 'minWidth' },\n  maw: { type: 'spacing', property: 'maxWidth' },\n  h: { type: 'spacing', property: 'height' },\n  mih: { type: 'spacing', property: 'minHeight' },\n  mah: { type: 'spacing', property: 'maxHeight' },\n\n  bgsz: { type: 'size', property: 'backgroundSize' },\n  bgp: { type: 'identity', property: 'backgroundPosition' },\n  bgr: { type: 'identity', property: 'backgroundRepeat' },\n  bga: { type: 'identity', property: 'backgroundAttachment' },\n\n  pos: { type: 'identity', property: 'position' },\n  top: { type: 'size', property: 'top' },\n  left: { type: 'size', property: 'left' },\n  bottom: { type: 'size', property: 'bottom' },\n  right: { type: 'size', property: 'right' },\n  inset: { type: 'size', property: 'inset' },\n\n  display: { type: 'identity', property: 'display' },\n  flex: { type: 'identity', property: 'flex' },\n};\n"],"mappings":";;AAQA,MAAa,mBAAoE;CAC/E,GAAG;EAAE,MAAM;EAAW,UAAU;CAAS;CACzC,IAAI;EAAE,MAAM;EAAW,UAAU;CAAY;CAC7C,IAAI;EAAE,MAAM;EAAW,UAAU;CAAe;CAChD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAa;CAC9C,IAAI;EAAE,MAAM;EAAW,UAAU;CAAc;CAC/C,IAAI;EAAE,MAAM;EAAW,UAAU;CAAoB;CACrD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAkB;CACnD,KAAK;EAAE,MAAM;EAAW,UAAU;CAAoB;CACtD,KAAK;EAAE,MAAM;EAAW,UAAU;CAAkB;CACpD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAe;CAChD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAc;CAE/C,GAAG;EAAE,MAAM;EAAW,UAAU;CAAU;CAC1C,IAAI;EAAE,MAAM;EAAW,UAAU;CAAa;CAC9C,IAAI;EAAE,MAAM;EAAW,UAAU;CAAgB;CACjD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAc;CAC/C,IAAI;EAAE,MAAM;EAAW,UAAU;CAAe;CAChD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAqB;CACtD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAmB;CACpD,KAAK;EAAE,MAAM;EAAW,UAAU;CAAqB;CACvD,KAAK;EAAE,MAAM;EAAW,UAAU;CAAmB;CACrD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAgB;CACjD,IAAI;EAAE,MAAM;EAAW,UAAU;CAAe;CAEhD,IAAI;EAAE,MAAM;EAAU,UAAU;CAAS;CACzC,MAAM;EAAE,MAAM;EAAU,UAAU;CAAe;CACjD,IAAI;EAAE,MAAM;EAAS,UAAU;CAAa;CAC5C,GAAG;EAAE,MAAM;EAAa,UAAU;CAAQ;CAC1C,SAAS;EAAE,MAAM;EAAY,UAAU;CAAU;CAEjD,IAAI;EAAE,MAAM;EAAc,UAAU;CAAa;CACjD,IAAI;EAAE,MAAM;EAAY,UAAU;CAAW;CAC7C,IAAI;EAAE,MAAM;EAAY,UAAU;CAAa;CAC/C,KAAK;EAAE,MAAM;EAAQ,UAAU;CAAgB;CAC/C,IAAI;EAAE,MAAM;EAAY,UAAU;CAAY;CAC9C,IAAI;EAAE,MAAM;EAAc,UAAU;CAAa;CACjD,IAAI;EAAE,MAAM;EAAY,UAAU;CAAY;CAC9C,IAAI;EAAE,MAAM;EAAY,UAAU;CAAgB;CAClD,IAAI;EAAE,MAAM;EAAY,UAAU;CAAiB;CAEnD,GAAG;EAAE,MAAM;EAAW,UAAU;CAAQ;CACxC,KAAK;EAAE,MAAM;EAAW,UAAU;CAAW;CAC7C,KAAK;EAAE,MAAM;EAAW,UAAU;CAAW;CAC7C,GAAG;EAAE,MAAM;EAAW,UAAU;CAAS;CACzC,KAAK;EAAE,MAAM;EAAW,UAAU;CAAY;CAC9C,KAAK;EAAE,MAAM;EAAW,UAAU;CAAY;CAE9C,MAAM;EAAE,MAAM;EAAQ,UAAU;CAAiB;CACjD,KAAK;EAAE,MAAM;EAAY,UAAU;CAAqB;CACxD,KAAK;EAAE,MAAM;EAAY,UAAU;CAAmB;CACtD,KAAK;EAAE,MAAM;EAAY,UAAU;CAAuB;CAE1D,KAAK;EAAE,MAAM;EAAY,UAAU;CAAW;CAC9C,KAAK;EAAE,MAAM;EAAQ,UAAU;CAAM;CACrC,MAAM;EAAE,MAAM;EAAQ,UAAU;CAAO;CACvC,QAAQ;EAAE,MAAM;EAAQ,UAAU;CAAS;CAC3C,OAAO;EAAE,MAAM;EAAQ,UAAU;CAAQ;CACzC,OAAO;EAAE,MAAM;EAAQ,UAAU;CAAQ;CAEzC,SAAS;EAAE,MAAM;EAAY,UAAU;CAAU;CACjD,MAAM;EAAE,MAAM;EAAY,UAAU;CAAO;AAC7C"}

package/esm/core/styles-api/use-styles/use-styles.mjs

@@ -3,13 +3,15 @@ import { resolveClassNames } from "./get-class-name/resolve-class-names/resolve-
 import { resolveStyles } from "./get-style/resolve-styles/resolve-styles.mjs";
 import { useMantineClassNamesPrefix, useMantineIsHeadless, useMantineWithStaticClasses } from "../../MantineProvider/Mantine.context.mjs";
 import { useMantineTheme } from "../../MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs";
+import { shallowEqual } from "../../utils/shallow-equal/shallow-equal.mjs";
 import { getClassName } from "./get-class-name/get-class-name.mjs";
 import { resolveStyle } from "./get-style/resolve-style/resolve-style.mjs";
 import { getStyle } from "./get-style/get-style.mjs";
 import { mergeVars } from "./get-style/resolve-vars/merge-vars.mjs";
 import { useStylesTransform } from "./use-transformed-styles.mjs";
+import { useRef } from "react";
 //#region packages/@mantine/core/src/core/styles-api/use-styles/use-styles.ts
-function useStyles({ name, classes, props, stylesCtx, className, style, rootSelector = "root", unstyled, classNames, styles, vars, varsResolver, attributes }) {
+function useStyles({ name, classes, props, stylesCtx, className, style, rootSelector = "root", unstyled, classNames, styles, vars, varsResolver, attributes, stable }) {
 	const theme = useMantineTheme();
 	const classNamesPrefix = useMantineClassNamesPrefix();
 	const withStaticClasses = useMantineWithStaticClasses();
@@ -61,7 +63,7 @@ function useStyles({ name, classes, props, stylesCtx, className, style, rootSele
 		style,
 		theme
 	});
-	return (selector, options) => ({
+	const getStyles = (selector, options) => ({
 		...attributes?.[selector],
 		className: getClassName({
 			theme,
@@ -95,6 +97,34 @@ function useStyles({ name, classes, props, stylesCtx, className, style, rootSele
 			resolvedRootStyle
 		})
 	});
+	return useStableGetStyles(getStyles, !!stable, [
+		theme,
+		classNamesPrefix,
+		withStaticClasses,
+		headless,
+		withStylesTransform ? props : null,
+		classes,
+		unstyled,
+		className,
+		rootSelector,
+		attributes,
+		stylesCtx,
+		resolvedClassNames,
+		resolvedThemeClassNames,
+		resolvedComponentStyles,
+		resolvedThemeStyles,
+		resolvedVars,
+		resolvedRootStyle
+	]);
+}
+function useStableGetStyles(getStyles, stable, deps) {
+	const cache = useRef(null);
+	if (!stable) return getStyles;
+	if (!cache.current || !shallowEqual(cache.current.deps, deps, 3)) cache.current = {
+		deps,
+		getStyles
+	};
+	return cache.current.getStyles;
 }
 //#endregion
 export { useStyles };

package/esm/core/styles-api/use-styles/use-styles.mjs.map

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

package/esm/core/utils/shallow-equal/shallow-equal.mjs

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

package/esm/core/utils/shallow-equal/shallow-equal.mjs.map

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

package/esm/index.mjs

@@ -72,7 +72,7 @@ import { stylesToString } from "./core/InlineStyles/styles-to-string/styles-to-s
 import { InlineStyles } from "./core/InlineStyles/InlineStyles.mjs";
 import { hashStyleProps } from "./core/InlineStyles/hash-styles.mjs";
 import { extractStyleProps } from "./core/Box/style-props/extract-style-props/extract-style-props.mjs";
-import { STYlE_PROPS_DATA } from "./core/Box/style-props/style-props-data.mjs";
+import { STYLE_PROPS_DATA } from "./core/Box/style-props/style-props-data.mjs";
 import { parseStyleProps } from "./core/Box/style-props/parse-style-props/parse-style-props.mjs";
 import { useRandomClassName } from "./core/Box/use-random-classname/use-random-classname.mjs";
 import { getStyleObject } from "./core/Box/get-style-object/get-style-object.mjs";
@@ -156,6 +156,7 @@ import { AppShellMain } from "./components/AppShell/AppShellMain/AppShellMain.mj
 import { AppShellNavbar } from "./components/AppShell/AppShellNavbar/AppShellNavbar.mjs";
 import { AppShellSection } from "./components/AppShell/AppShellSection/AppShellSection.mjs";
 import { AppShell } from "./components/AppShell/AppShell.mjs";
+import { useAppShellResize } from "./components/AppShell/use-app-shell-resize/use-app-shell-resize.mjs";
 import { AspectRatio } from "./components/AspectRatio/AspectRatio.mjs";
 import { getParsedComboboxData } from "./components/Combobox/get-parsed-combobox-data/get-parsed-combobox-data.mjs";
 import { getOptionsLockup } from "./components/Combobox/get-options-lockup/get-options-lockup.mjs";
@@ -251,8 +252,8 @@ import { Grid } from "./components/Grid/Grid.mjs";
 import { Mark } from "./components/Mark/Mark.mjs";
 import { Highlight } from "./components/Highlight/Highlight.mjs";
 import { useHoverCardContext } from "./components/HoverCard/HoverCard.context.mjs";
-import { HoverCardGroup, HoverCardGroupContext } from "./components/HoverCard/HoverCardGroup/HoverCardGroup.mjs";
 import { HoverCardDropdown } from "./components/HoverCard/HoverCardDropdown/HoverCardDropdown.mjs";
+import { HoverCardGroup, HoverCardGroupContext } from "./components/HoverCard/HoverCardGroup/HoverCardGroup.mjs";
 import { HoverCardTarget } from "./components/HoverCard/HoverCardTarget/HoverCardTarget.mjs";
 import { HoverCard } from "./components/HoverCard/HoverCard.mjs";
 import { Image } from "./components/Image/Image.mjs";
@@ -373,6 +374,24 @@ import { ThemeIcon } from "./components/ThemeIcon/ThemeIcon.mjs";
 import { TimelineItem } from "./components/Timeline/TimelineItem/TimelineItem.mjs";
 import { Timeline } from "./components/Timeline/Timeline.mjs";
 import { Title } from "./components/Title/Title.mjs";
+import { Toggle } from "./components/Toggle/Toggle.mjs";
+import { ToolbarDivider } from "./components/Toolbar/ToolbarDivider/ToolbarDivider.mjs";
+import { ToolbarGroup } from "./components/Toolbar/ToolbarGroup/ToolbarGroup.mjs";
+import { ToolbarToggle } from "./components/Toolbar/ToolbarToggle/ToolbarToggle.mjs";
+import { ToolbarToggleGroup } from "./components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.mjs";
+import { ToolbarToggleItem } from "./components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.mjs";
+import { Toolbar } from "./components/Toolbar/Toolbar.mjs";
+import { TourProvider, defaultLabels, useTourContext } from "./components/Tour/Tour.context.mjs";
+import { TourBeacon } from "./components/Tour/TourBeacon/TourBeacon.mjs";
+import { TourBody } from "./components/Tour/TourBody/TourBody.mjs";
+import { TourCloseButton } from "./components/Tour/TourCloseButton/TourCloseButton.mjs";
+import { TourNavigation } from "./components/Tour/TourNavigation/TourNavigation.mjs";
+import { TourOverlay } from "./components/Tour/TourOverlay/TourOverlay.mjs";
+import { TourRoot } from "./components/Tour/TourRoot/TourRoot.mjs";
+import { TourStep } from "./components/Tour/TourStep/TourStep.mjs";
+import { TourTitle } from "./components/Tour/TourTitle/TourTitle.mjs";
+import { TourTooltip } from "./components/Tour/TourTooltip/TourTooltip.mjs";
+import { Tour } from "./components/Tour/Tour.mjs";
 import { getTreeExpandedState, useTree } from "./components/Tree/use-tree.mjs";
 import { Tree } from "./components/Tree/Tree.mjs";
 import { mergeAsyncChildren } from "./components/Tree/merge-async-children/merge-async-children.mjs";
@@ -384,4 +403,4 @@ import { TreeSelectOption } from "./components/TreeSelect/TreeSelectOption.mjs";
 import { TreeSelect } from "./components/TreeSelect/TreeSelect.mjs";
 import { Typography } from "./components/Typography/Typography.mjs";
 import { RemoveScroll } from "react-remove-scroll";
-export { Accordion, AccordionChevron, AccordionControl, AccordionItem, AccordionPanel, ActionBar, ActionBarCloseButton, ActionBarDivider, ActionIcon, ActionIconGroup, ActionIconGroupSection, Affix, Alert, AlphaSlider, Anchor, AngleSlider, AppShell, AppShellAside, AppShellFooter, AppShellHeader, AppShellMain, AppShellNavbar, AppShellSection, AspectRatio, Autocomplete, Avatar, AvatarGroup, AvatarGroupContext, BackgroundImage, Badge, Blockquote, Box, Breadcrumbs, Burger, Button, ButtonGroup, ButtonGroupSection, Card, CardSection, Cascader, Center, CheckIcon, Checkbox, CheckboxCard, CheckboxCardContext, CheckboxGroup, CheckboxGroupContext, CheckboxIndicator, Chip, ChipGroup, ChipGroupContext, CloseButton, CloseIcon, Code, Collapse, ColorInput, ColorPicker, ColorSchemeScript, ColorSwatch, Combobox, ComboboxChevron, ComboboxClearButton, ComboboxDropdown, ComboboxDropdownTarget, ComboboxEmpty, ComboboxEventsTarget, ComboboxFooter, ComboboxGroup, ComboboxHeader, ComboboxHiddenInput, ComboboxOption, ComboboxOptions, ComboboxPopover, ComboboxPopoverTarget, ComboboxSearch, ComboboxTarget, Container, CopyButton, DEFAULT_THEME, DataList, DataListItem, DataListItemLabel, DataListItemValue, Dialog, DirectionContext, DirectionProvider, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerHeader, DrawerOverlay, DrawerRoot, DrawerStack, DrawerStackContext, DrawerTitle, EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIndicator, EmptyStateTitle, FLEX_STYLE_PROPS_DATA, FOCUS_CLASS_NAMES, Fieldset, FileButton, FileInput, FlatTreeNode, Flex, FloatingArrow, FloatingIndicator, FloatingWindow, FocusTrap, FocusTrapInitialFocus, Grid, GridCol, Group, HeadlessMantineProvider, Highlight, HoverCard, HoverCardDropdown, HoverCardGroup, HoverCardGroupContext, HoverCardTarget, HueSlider, Image, Indicator, InlineStyles, Input, InputBase, InputClearButton, InputClearSection, InputDescription, InputError, InputLabel, InputPlaceholder, InputSuccess, InputWrapper, InputWrapperContext, JsonInput, Kbd, List, ListItem, Loader, LoadingOverlay, transitions as MANTINE_TRANSITIONS, MantineContext, MantineProvider, MantineThemeContext, MantineThemeProvider, Mark, Marquee, MaskInput, Menu, MenuCheckboxGroup, MenuCheckboxItem, MenuContextMenu, MenuDivider, MenuDropdown, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSearch, MenuSub, MenuSubDropdown, MenuSubItem, MenuSubTarget, MenuTarget, Menubar, MenubarDropdown, MenubarMenu, MenubarTarget, Modal, ModalBase, ModalBaseBody, ModalBaseCloseButton, ModalBaseContent, ModalBaseHeader, ModalBaseOverlay, ModalBaseTitle, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, ModalRoot, ModalStack, ModalStackContext, ModalTitle, MultiSelect, NativeScrollArea, NativeSelect, NavLink, Notification, NumberFormatter, NumberInput, OptionalPortal, OptionsDropdown, OverflowList, Overlay, Pagination, PaginationControl, PaginationDots, PaginationFirst, PaginationItems, PaginationLabel, PaginationLast, PaginationNext, PaginationPrevious, PaginationRoot, Paper, PasswordInput, Pill, PillGroup, PillsInput, PillsInputContext, PillsInputField, PinInput, Popover, PopoverContextMenu, PopoverDropdown, PopoverTarget, Portal, Progress, ProgressLabel, ProgressRoot, ProgressSection, Radio, RadioCard, RadioCardContext, RadioGroup, RadioGroupContext, RadioIcon, RadioIndicator, RangeSlider, Rating, RemoveScroll, RingProgress, RollingNumber, STYlE_PROPS_DATA, ScrollArea, ScrollAreaAutosize, Scroller, SegmentedControl, Select, SemiCircleProgress, SimpleGrid, Skeleton, Slider, Space, Splitter, SplitterPane, Spoiler, Stack, Stepper, StepperCompleted, StepperStep, Switch, SwitchGroup, SwitchGroupContext, Table, TableCaption, TableOfContents, TableScrollContainer, TableTbody, TableTd, TableTfoot, TableTh, TableThead, TableTr, Tabs, TabsList, TabsPanel, TabsTab, TagsInput, Text, TextInput, Textarea, ThemeIcon, Timeline, TimelineItem, Title, Tooltip, TooltipFloating, TooltipGroup, TooltipGroupContext, Transition, Tree, TreeSelect, TreeSelectOption, Typography, UnstyledButton, VisuallyHidden, alpha, camelToKebabCase, closeOnEscape, colorsTuple, convertCssVariables, convertHsvaTo, createEventHandler, createPolymorphicComponent, createSafeContext, createScopedKeydownHandler, createTheme, createUseExternalEvents, createVarsResolver, darken, deepMerge, defaultCssVariablesResolver, defaultLoaders, defaultOptionsFilter, defaultTreeNodeFilter, defaultVariantColorsResolver, em, extractStyleProps, factory, filterProps, filterTreeData, findClosestNumber, findElementAncestor, findElementBySelector, findElementsBySelector, flattenCascaderPaths, flattenTreeData, genericFactory, getArrowMergeDropdownStyles, getAutoContrastValue, getBaseValue, getBreakpointValue, getCSSColorVariables, getCascaderPathOptions, getContextItemIndex, getContrastColor, getDefaultZIndex, getEnv, getFloatingPosition, getFontSize, getGradient, getLineHeight, getOptionsLockup, getParsedComboboxData, getPrimaryContrastColor, getPrimaryShade, getRadius, getRefProp, getRootElement, getSafeId, getShadow, getSingleElementChild, getSize, getSortedBreakpoints, getSpacing, getStyleObject, getThemeColor, getTransitionProps, getTreeExpandedState, getVirtualColorContrast, hashStyleProps, isColorValid, isElement, isLightColor, isMantineColorScheme, isNumberLike, isOptionsGroup, isPrimitive, isVirtualColor, keys, lighten, localStorageColorSchemeManager, luminance, mantineHtmlProps, memoize, mergeAsyncChildren, mergeMantineTheme, mergeThemeOverrides, moveTreeNode, noop, parseColor, parseStyleProps, parseThemeColor, polymorphic, polymorphicFactory, px, rem, resolveClassNames, resolveStyles, rgba, stylesToString, toRgba, useAccordionContext, useAccordionItemContext, useAppShellContext, useCombobox, useComboboxContext, useComboboxTargetProps, useComputedColorScheme, useDataListContext, useDelayedHover, useDirection, useDrawerContext, useDrawersStack, useEmptyStateContext, useGridContext, useHoverCardContext, useHovered, useInputProps, useListContext, useMantineClassNamesPrefix, useMantineColorScheme, useMantineContext, useMantineCssVariablesResolver, useMantineDeduplicateInlineStyles, useMantineEnv, useMantineIsHeadless, useMantineStyleNonce, useMantineStylesTransform, useMantineSxTransform, useMantineTheme, useMantineWithStaticClasses, useMatches, useMenuContext, useMenubarContext, useMenubarMenuContext, useModalContext, useModalsStack, usePaginationContext, usePillsReorder, usePopoverContext, useProgressContext, useProps, useProviderColorScheme, useRandomClassName, useResolvedStylesApi, useSafeMantineTheme, useScrollAreaContext, useSplitterContext, useStepperContext, useStyles, useTableContext, useTabsContext, useTree, useVirtualizedCombobox, v8CssVariablesResolver, validateMantineTheme, virtualColor };
+export { Accordion, AccordionChevron, AccordionControl, AccordionItem, AccordionPanel, ActionBar, ActionBarCloseButton, ActionBarDivider, ActionIcon, ActionIconGroup, ActionIconGroupSection, Affix, Alert, AlphaSlider, Anchor, AngleSlider, AppShell, AppShellAside, AppShellFooter, AppShellHeader, AppShellMain, AppShellNavbar, AppShellSection, AspectRatio, Autocomplete, Avatar, AvatarGroup, AvatarGroupContext, BackgroundImage, Badge, Blockquote, Box, Breadcrumbs, Burger, Button, ButtonGroup, ButtonGroupSection, Card, CardSection, Cascader, Center, CheckIcon, Checkbox, CheckboxCard, CheckboxCardContext, CheckboxGroup, CheckboxGroupContext, CheckboxIndicator, Chip, ChipGroup, ChipGroupContext, CloseButton, CloseIcon, Code, Collapse, ColorInput, ColorPicker, ColorSchemeScript, ColorSwatch, Combobox, ComboboxChevron, ComboboxClearButton, ComboboxDropdown, ComboboxDropdownTarget, ComboboxEmpty, ComboboxEventsTarget, ComboboxFooter, ComboboxGroup, ComboboxHeader, ComboboxHiddenInput, ComboboxOption, ComboboxOptions, ComboboxPopover, ComboboxPopoverTarget, ComboboxSearch, ComboboxTarget, Container, CopyButton, DEFAULT_THEME, DataList, DataListItem, DataListItemLabel, DataListItemValue, Dialog, DirectionContext, DirectionProvider, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerHeader, DrawerOverlay, DrawerRoot, DrawerStack, DrawerStackContext, DrawerTitle, EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIndicator, EmptyStateTitle, FLEX_STYLE_PROPS_DATA, FOCUS_CLASS_NAMES, Fieldset, FileButton, FileInput, FlatTreeNode, Flex, FloatingArrow, FloatingIndicator, FloatingWindow, FocusTrap, FocusTrapInitialFocus, Grid, GridCol, Group, HeadlessMantineProvider, Highlight, HoverCard, HoverCardDropdown, HoverCardGroup, HoverCardGroupContext, HoverCardTarget, HueSlider, Image, Indicator, InlineStyles, Input, InputBase, InputClearButton, InputClearSection, InputDescription, InputError, InputLabel, InputPlaceholder, InputSuccess, InputWrapper, InputWrapperContext, JsonInput, Kbd, List, ListItem, Loader, LoadingOverlay, transitions as MANTINE_TRANSITIONS, MantineContext, MantineProvider, MantineThemeContext, MantineThemeProvider, Mark, Marquee, MaskInput, Menu, MenuCheckboxGroup, MenuCheckboxItem, MenuContextMenu, MenuDivider, MenuDropdown, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSearch, MenuSub, MenuSubDropdown, MenuSubItem, MenuSubTarget, MenuTarget, Menubar, MenubarDropdown, MenubarMenu, MenubarTarget, Modal, ModalBase, ModalBaseBody, ModalBaseCloseButton, ModalBaseContent, ModalBaseHeader, ModalBaseOverlay, ModalBaseTitle, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, ModalRoot, ModalStack, ModalStackContext, ModalTitle, MultiSelect, NativeScrollArea, NativeSelect, NavLink, Notification, NumberFormatter, NumberInput, OptionalPortal, OptionsDropdown, OverflowList, Overlay, Pagination, PaginationControl, PaginationDots, PaginationFirst, PaginationItems, PaginationLabel, PaginationLast, PaginationNext, PaginationPrevious, PaginationRoot, Paper, PasswordInput, Pill, PillGroup, PillsInput, PillsInputContext, PillsInputField, PinInput, Popover, PopoverContextMenu, PopoverDropdown, PopoverTarget, Portal, Progress, ProgressLabel, ProgressRoot, ProgressSection, Radio, RadioCard, RadioCardContext, RadioGroup, RadioGroupContext, RadioIcon, RadioIndicator, RangeSlider, Rating, RemoveScroll, RingProgress, RollingNumber, STYLE_PROPS_DATA, ScrollArea, ScrollAreaAutosize, Scroller, SegmentedControl, Select, SemiCircleProgress, SimpleGrid, Skeleton, Slider, Space, Splitter, SplitterPane, Spoiler, Stack, Stepper, StepperCompleted, StepperStep, Switch, SwitchGroup, SwitchGroupContext, Table, TableCaption, TableOfContents, TableScrollContainer, TableTbody, TableTd, TableTfoot, TableTh, TableThead, TableTr, Tabs, TabsList, TabsPanel, TabsTab, TagsInput, Text, TextInput, Textarea, ThemeIcon, Timeline, TimelineItem, Title, Toggle, Toolbar, ToolbarDivider, ToolbarGroup, ToolbarToggle, ToolbarToggleGroup, ToolbarToggleItem, Tooltip, TooltipFloating, TooltipGroup, TooltipGroupContext, Tour, TourBeacon, TourBody, TourCloseButton, TourNavigation, TourOverlay, TourProvider, TourRoot, TourStep, TourTitle, TourTooltip, Transition, Tree, TreeSelect, TreeSelectOption, Typography, UnstyledButton, VisuallyHidden, alpha, camelToKebabCase, closeOnEscape, colorsTuple, convertCssVariables, convertHsvaTo, createEventHandler, createPolymorphicComponent, createSafeContext, createScopedKeydownHandler, createTheme, createUseExternalEvents, createVarsResolver, darken, deepMerge, defaultCssVariablesResolver, defaultLabels, defaultLoaders, defaultOptionsFilter, defaultTreeNodeFilter, defaultVariantColorsResolver, em, extractStyleProps, factory, filterProps, filterTreeData, findClosestNumber, findElementAncestor, findElementBySelector, findElementsBySelector, flattenCascaderPaths, flattenTreeData, genericFactory, getArrowMergeDropdownStyles, getAutoContrastValue, getBaseValue, getBreakpointValue, getCSSColorVariables, getCascaderPathOptions, getContextItemIndex, getContrastColor, getDefaultZIndex, getEnv, getFloatingPosition, getFontSize, getGradient, getLineHeight, getOptionsLockup, getParsedComboboxData, getPrimaryContrastColor, getPrimaryShade, getRadius, getRefProp, getRootElement, getSafeId, getShadow, getSingleElementChild, getSize, getSortedBreakpoints, getSpacing, getStyleObject, getThemeColor, getTransitionProps, getTreeExpandedState, getVirtualColorContrast, hashStyleProps, isColorValid, isElement, isLightColor, isMantineColorScheme, isNumberLike, isOptionsGroup, isPrimitive, isVirtualColor, keys, lighten, localStorageColorSchemeManager, luminance, mantineHtmlProps, memoize, mergeAsyncChildren, mergeMantineTheme, mergeThemeOverrides, moveTreeNode, noop, parseColor, parseStyleProps, parseThemeColor, polymorphic, polymorphicFactory, px, rem, resolveClassNames, resolveStyles, rgba, stylesToString, toRgba, useAccordionContext, useAccordionItemContext, useAppShellContext, useAppShellResize, useCombobox, useComboboxContext, useComboboxTargetProps, useComputedColorScheme, useDataListContext, useDelayedHover, useDirection, useDrawerContext, useDrawersStack, useEmptyStateContext, useGridContext, useHoverCardContext, useHovered, useInputProps, useListContext, useMantineClassNamesPrefix, useMantineColorScheme, useMantineContext, useMantineCssVariablesResolver, useMantineDeduplicateInlineStyles, useMantineEnv, useMantineIsHeadless, useMantineStyleNonce, useMantineStylesTransform, useMantineSxTransform, useMantineTheme, useMantineWithStaticClasses, useMatches, useMenuContext, useMenubarContext, useMenubarMenuContext, useModalContext, useModalsStack, usePaginationContext, usePillsReorder, usePopoverContext, useProgressContext, useProps, useProviderColorScheme, useRandomClassName, useResolvedStylesApi, useSafeMantineTheme, useScrollAreaContext, useSplitterContext, useStepperContext, useStyles, useTableContext, useTabsContext, useTourContext, useTree, useVirtualizedCombobox, v8CssVariablesResolver, validateMantineTheme, virtualColor };

package/lib/components/ActionBar/ActionBar.d.ts

@@ -20,7 +20,7 @@ export interface ActionBarProps extends BoxProps, AffixBaseProps, PaperBaseProps
     closeOnEscape?: boolean;
     /** `aria-label` of the actions group, `'Actions'` by default */
     'aria-label'?: string;
-    /** If set, the component uses `display: none` to hide the root element instead of removing the DOM node, `false` by default */
+    /** If set, the action bar is kept in the DOM when closed. React `Activity` is used to preserve its state while it is hidden, `false` by default */
     keepMounted?: boolean;
     children: React.ReactNode;
 }

package/lib/components/AppShell/AppShell.context.d.ts

@@ -1,5 +1,6 @@
 import { GetStylesApi } from '../../core';
 import type { AppShellFactory } from './AppShell';
+import type { AppShellResizeController, AppShellResizeSection } from './AppShell.types';
 export interface AppShellContextValue {
     getStyles: GetStylesApi<AppShellFactory>;
     withBorder: boolean | undefined;
@@ -7,5 +8,8 @@ export interface AppShellContextValue {
     disabled: boolean | undefined;
     offsetScrollbars: boolean | undefined;
     mode: 'fixed' | 'static';
+    resize: AppShellResizeController | undefined;
+    rootRef: React.RefObject<HTMLDivElement | null>;
+    resizeOffsets: Partial<Record<AppShellResizeSection, boolean>>;
 }
 export declare const AppShellProvider: import("react").Context<AppShellContextValue | null>, useAppShellContext: () => AppShellContextValue;

package/lib/components/AppShell/AppShell.d.ts

@@ -1,14 +1,14 @@
 import { BoxProps, ElementProps, Factory, MantineSpacing, StylesApiProps } from '../../core';
-import { AppShellAsideConfiguration, AppShellFooterConfiguration, AppShellHeaderConfiguration, AppShellNavbarConfiguration, AppShellResponsiveSize } from './AppShell.types';
+import { AppShellAsideConfiguration, AppShellFooterConfiguration, AppShellHeaderConfiguration, AppShellNavbarConfiguration, AppShellResizeController, AppShellResponsiveSize } from './AppShell.types';
 import { AppShellAside, type AppShellAsideProps } from './AppShellAside/AppShellAside';
 import { AppShellFooter, type AppShellFooterProps } from './AppShellFooter/AppShellFooter';
 import { AppShellHeader, type AppShellHeaderProps } from './AppShellHeader/AppShellHeader';
 import { AppShellMain, type AppShellMainProps } from './AppShellMain/AppShellMain';
 import { AppShellNavbar, type AppShellNavbarProps } from './AppShellNavbar/AppShellNavbar';
 import { AppShellSection, type AppShellSectionProps } from './AppShellSection/AppShellSection';
-export type AppShellStylesNames = 'root' | 'navbar' | 'main' | 'header' | 'footer' | 'aside' | 'section';
+export type AppShellStylesNames = 'root' | 'navbar' | 'main' | 'header' | 'footer' | 'aside' | 'section' | 'resizeHandle';
 export type AppShellCssVariables = {
-    root: '--app-shell-transition-duration' | '--app-shell-transition-timing-function';
+    root: '--app-shell-transition-duration' | '--app-shell-transition-timing-function' | '--app-shell-resize-handle-size';
 };
 export interface AppShellProps extends BoxProps, StylesApiProps<AppShellFactory>, ElementProps<'div'> {
     /** If set, the associated components have a border @default true */
@@ -37,6 +37,8 @@ export interface AppShellProps extends BoxProps, StylesApiProps<AppShellFactory>
     offsetScrollbars?: boolean;
     /** Determines positioning mode of all sections @default 'fixed' */
     mode?: 'fixed' | 'static';
+    /** `useAppShellResize` hook instance, enables resizing of the sections configured in the hook */
+    resize?: AppShellResizeController;
 }
 export type AppShellFactory = Factory<{
     props: AppShellProps;

package/lib/components/AppShell/AppShell.types.d.ts

@@ -42,3 +42,73 @@ export interface AppShellFooterConfiguration {
     collapsed?: boolean;
     offset?: boolean;
 }
+export type AppShellResizeSection = 'navbar' | 'aside' | 'header' | 'footer';
+export type AppShellResizeSizes = Partial<Record<AppShellResizeSection, number>>;
+export interface AppShellResizeSectionOptions {
+    /** Minimum size, in the same units as the section `width`/`height` configuration @default 0 */
+    min?: number;
+    /** Maximum size, in the same units as the section `width`/`height` configuration @default viewport size */
+    max?: number;
+    /** Size below which `onCollapseChange` reports the section as collapsed */
+    collapseThreshold?: number;
+    /** `aria-label` of the resize handle @default 'Resize navbar' | 'Resize aside' | 'Resize header' | 'Resize footer' */
+    label?: string;
+}
+export interface AppShellResizeSectionController {
+    /** `true` when the section was configured as resizable */
+    enabled: boolean;
+    /** Current size override, `undefined` when the section has not been resized */
+    size: number | undefined;
+    /** `true` while the section is being resized */
+    active: boolean;
+    /** Sets the section size, does not call `onResize`/`onResizeEnd` */
+    setSize: (size: number) => void;
+    /** Clears the size override, the section returns to the size defined in its configuration */
+    reset: () => void;
+}
+export interface AppShellResizeController {
+    /** `AppShell.Navbar` resize controller */
+    navbar: AppShellResizeSectionController;
+    /** `AppShell.Aside` resize controller */
+    aside: AppShellResizeSectionController;
+    /** `AppShell.Header` resize controller */
+    header: AppShellResizeSectionController;
+    /** `AppShell.Footer` resize controller */
+    footer: AppShellResizeSectionController;
+    /** Current size overrides of all sections */
+    sizes: AppShellResizeSizes;
+    /** Clears size overrides of all sections */
+    resetAll: () => void;
+    /** Resolved options of all sections, used by the `AppShell` component */
+    options: Partial<Record<AppShellResizeSection, AppShellResizeSectionOptions>>;
+    /** Section that is being resized, used by the `AppShell` component */
+    activeSection: AppShellResizeSection | null;
+    /** Marks the section as active, used by the `AppShell` component */
+    startResize: (section: AppShellResizeSection) => void;
+    /** Reports an in-progress size, used by the `AppShell` component */
+    previewResize: (section: AppShellResizeSection, size: number) => void;
+    /** Commits a size, `null` cancels the resize, used by the `AppShell` component */
+    endResize: (section: AppShellResizeSection, size: number | null) => void;
+    /** Seeds the collapse state at drag start without calling `onCollapseChange`, used by the `AppShell` component */
+    initCollapse: (section: AppShellResizeSection, collapsed: boolean) => void;
+    /** Reports a collapse threshold crossing, used by the `AppShell` component */
+    reportCollapse: (section: AppShellResizeSection, collapsed: boolean) => void;
+}
+export interface UseAppShellResizeInput {
+    /** `AppShell.Navbar` resize options, the section is resizable when set */
+    navbar?: AppShellResizeSectionOptions;
+    /** `AppShell.Aside` resize options, the section is resizable when set */
+    aside?: AppShellResizeSectionOptions;
+    /** `AppShell.Header` resize options, the section is resizable when set */
+    header?: AppShellResizeSectionOptions;
+    /** `AppShell.Footer` resize options, the section is resizable when set */
+    footer?: AppShellResizeSectionOptions;
+    /** Sizes applied to sections that have not been resized yet, usually restored from storage */
+    initialSizes?: AppShellResizeSizes;
+    /** Called on every pointer move during a resize */
+    onResize?: (sizes: AppShellResizeSizes) => void;
+    /** Called when a resize is committed */
+    onResizeEnd?: (sizes: AppShellResizeSizes) => void;
+    /** Called when a section is dragged across its `collapseThreshold` */
+    onCollapseChange?: (section: AppShellResizeSection, collapsed: boolean) => void;
+}

package/lib/components/AppShell/AppShellMediaStyles/AppShellMediaStyles.d.ts

@@ -1,4 +1,5 @@
 import type { AppShellProps } from '../AppShell';
+import type { AppShellResizeSection, AppShellResizeSizes } from '../AppShell.types';
 interface AppShellMediaStylesProps {
     navbar: AppShellProps['navbar'] | undefined;
     header: AppShellProps['header'] | undefined;
@@ -7,6 +8,10 @@ interface AppShellMediaStylesProps {
     padding: AppShellProps['padding'] | undefined;
     mode: 'fixed' | 'static';
     selector?: string;
+    resize?: {
+        sizes: AppShellResizeSizes;
+        enabled: Partial<Record<AppShellResizeSection, boolean>>;
+    };
 }
-export declare function AppShellMediaStyles({ navbar, header, aside, footer, padding, mode, selector, }: AppShellMediaStylesProps): import("react").JSX.Element;
+export declare function AppShellMediaStyles({ navbar, header, aside, footer, padding, mode, selector, resize, }: AppShellMediaStylesProps): import("react").JSX.Element;
 export {};

package/lib/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.d.ts

@@ -8,6 +8,8 @@ interface AssignAsideVariablesInput {
     aside: AppShellProps['aside'] | undefined;
     theme: MantineTheme;
     mode: 'fixed' | 'static';
+    resizedSize?: number;
+    resizable?: boolean;
 }
-export declare function assignAsideVariables({ baseStyles, minMediaStyles, maxMediaStyles, aside, theme, mode, }: AssignAsideVariablesInput): void;
+export declare function assignAsideVariables({ baseStyles, minMediaStyles, maxMediaStyles, aside, theme, mode, resizedSize, resizable, }: AssignAsideVariablesInput): void;
 export {};

package/lib/components/AppShell/AppShellMediaStyles/assign-footer-variables/assign-footer-variables.d.ts

@@ -5,6 +5,8 @@ interface AssignFooterVariablesInput {
     minMediaStyles: MediaQueryVariables;
     footer: AppShellProps['footer'] | undefined;
     mode: 'fixed' | 'static';
+    resizedSize?: number;
+    resizable?: boolean;
 }
-export declare function assignFooterVariables({ baseStyles, minMediaStyles, footer, mode, }: AssignFooterVariablesInput): void;
+export declare function assignFooterVariables({ baseStyles, minMediaStyles, footer, mode, resizedSize, resizable, }: AssignFooterVariablesInput): void;
 export {};

package/lib/components/AppShell/AppShellMediaStyles/assign-header-variables/assign-header-variables.d.ts

@@ -5,6 +5,8 @@ interface AssignHeaderVariablesInput {
     minMediaStyles: MediaQueryVariables;
     header: AppShellProps['header'] | undefined;
     mode: 'fixed' | 'static';
+    resizedSize?: number;
+    resizable?: boolean;
 }
-export declare function assignHeaderVariables({ baseStyles, minMediaStyles, header, mode, }: AssignHeaderVariablesInput): void;
+export declare function assignHeaderVariables({ baseStyles, minMediaStyles, header, mode, resizedSize, resizable, }: AssignHeaderVariablesInput): void;
 export {};

package/lib/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.d.ts

@@ -8,6 +8,8 @@ interface AssignNavbarVariablesInput {
     navbar: AppShellProps['navbar'] | undefined;
     theme: MantineTheme;
     mode: 'fixed' | 'static';
+    resizedSize?: number;
+    resizable?: boolean;
 }
-export declare function assignNavbarVariables({ baseStyles, minMediaStyles, maxMediaStyles, navbar, theme, mode, }: AssignNavbarVariablesInput): void;
+export declare function assignNavbarVariables({ baseStyles, minMediaStyles, maxMediaStyles, navbar, theme, mode, resizedSize, resizable, }: AssignNavbarVariablesInput): void;
 export {};

package/lib/components/AppShell/AppShellMediaStyles/escape-css-id/escape-css-id.d.ts

@@ -0,0 +1,2 @@
+/** Serializes a string as a CSS identifier, same output as `CSS.escape`, works on the server */
+export declare function escapeCssId(value: string): string;

package/lib/components/AppShell/AppShellMediaStyles/get-resized-value/get-resized-value.d.ts

@@ -0,0 +1 @@
+export declare function getResizedValue(size: number, axis: 'horizontal' | 'vertical'): string;

package/lib/components/AppShell/AppShellMediaStyles/get-variables/get-variables.d.ts

@@ -1,5 +1,6 @@
 import { MantineTheme } from '../../../../core';
 import type { AppShellProps } from '../../AppShell';
+import type { AppShellResizeSection, AppShellResizeSizes } from '../../AppShell.types';
 export type CSSVariables = Record<`--${string}`, string | undefined>;
 export type MediaQueryVariables = Record<string, Record<`--${string}`, string | undefined>>;
 interface GetVariablesInput {
@@ -10,8 +11,12 @@ interface GetVariablesInput {
     padding: AppShellProps['padding'] | undefined;
     theme: MantineTheme;
     mode: 'fixed' | 'static';
+    resize: {
+        sizes: AppShellResizeSizes;
+        enabled: Partial<Record<AppShellResizeSection, boolean>>;
+    } | undefined;
 }
-export declare function getVariables({ navbar, header, footer, aside, padding, theme, mode, }: GetVariablesInput): {
+export declare function getVariables({ navbar, header, footer, aside, padding, theme, mode, resize, }: GetVariablesInput): {
     baseStyles: CSSVariables;
     media: {
         query: string;

package/lib/components/AppShell/AppShellResizeHandle/AppShellResizeHandle.d.ts

@@ -0,0 +1,10 @@
+import type { AppShellResizeSection } from '../AppShell.types';
+interface AppShellResizeHandleProps {
+    section: AppShellResizeSection;
+    sectionId: string;
+}
+export declare function AppShellResizeHandle({ section, sectionId }: AppShellResizeHandleProps): import("react").JSX.Element | null;
+export declare namespace AppShellResizeHandle {
+    var displayName: string;
+}
+export {};

package/lib/components/AppShell/index.d.ts

@@ -1,6 +1,6 @@
 import type { AppShellCssVariables, AppShellFactory, AppShellProps, AppShellStylesNames } from './AppShell';
 import type { AppShellContextValue } from './AppShell.context';
-import type { AppShellAsideConfiguration, AppShellCompoundProps, AppShellFooterConfiguration, AppShellHeaderConfiguration, AppShellNavbarConfiguration, AppShellResponsiveSize } from './AppShell.types';
+import type { AppShellAsideConfiguration, AppShellCompoundProps, AppShellFooterConfiguration, AppShellHeaderConfiguration, AppShellNavbarConfiguration, AppShellResponsiveSize, AppShellResizeController, AppShellResizeSection, AppShellResizeSectionController, AppShellResizeSectionOptions, AppShellResizeSizes, UseAppShellResizeInput } from './AppShell.types';
 import type { AppShellAsideProps } from './AppShellAside/AppShellAside';
 import type { AppShellFooterProps } from './AppShellFooter/AppShellFooter';
 import type { AppShellHeaderProps } from './AppShellHeader/AppShellHeader';
@@ -15,4 +15,5 @@ export { AppShellNavbar } from './AppShellNavbar/AppShellNavbar';
 export { AppShellSection } from './AppShellSection/AppShellSection';
 export { AppShellMain } from './AppShellMain/AppShellMain';
 export { useAppShellContext } from './AppShell.context';
-export type { AppShellProps, AppShellStylesNames, AppShellCssVariables, AppShellFactory, AppShellContextValue, AppShellCompoundProps, AppShellAsideConfiguration, AppShellFooterConfiguration, AppShellHeaderConfiguration, AppShellNavbarConfiguration, AppShellResponsiveSize, AppShellAsideProps, AppShellFooterProps, AppShellHeaderProps, AppShellMainProps, AppShellNavbarProps, AppShellSectionProps, };
+export { useAppShellResize } from './use-app-shell-resize/use-app-shell-resize';
+export type { AppShellProps, AppShellStylesNames, AppShellCssVariables, AppShellFactory, AppShellContextValue, AppShellCompoundProps, AppShellAsideConfiguration, AppShellFooterConfiguration, AppShellHeaderConfiguration, AppShellNavbarConfiguration, AppShellResponsiveSize, AppShellAsideProps, AppShellFooterProps, AppShellHeaderProps, AppShellMainProps, AppShellNavbarProps, AppShellSectionProps, AppShellResizeController, AppShellResizeSection, AppShellResizeSectionController, AppShellResizeSectionOptions, AppShellResizeSizes, UseAppShellResizeInput, };

package/lib/components/AppShell/use-app-shell-resize/clamp-resize-size.d.ts

@@ -0,0 +1,9 @@
+interface ClampResizeSizeInput {
+    size: number;
+    min: number | undefined;
+    max: number | undefined;
+    viewportMax: number;
+}
+export declare function clampResizeSize({ size, min, max, viewportMax }: ClampResizeSizeInput): number;
+export declare function getCollapseState(size: number, collapseThreshold: number | undefined): boolean;
+export {};

package/lib/components/AppShell/use-app-shell-resize/resize-section-config.d.ts

@@ -0,0 +1,29 @@
+import type { AppShellResizeSection } from '../AppShell.types';
+export interface ResizeSectionConfig {
+    /** Axis the pointer moves along to resize the section */
+    axis: 'horizontal' | 'vertical';
+    /** `aria-orientation` of the separator element */
+    orientation: 'vertical' | 'horizontal';
+    /** CSS variable that controls the section size */
+    sizeVariable: string;
+    /** CSS variable that controls the space reserved for the section */
+    offsetVariable: string;
+    /** CSS variable that controls the grid track size in `mode="static"` */
+    gridWidthVariable?: string;
+    /** CSS variable that controls whether the resize handle is displayed */
+    handleDisplayVariable: string;
+    /** CSS variable that exposes a safe-area inset baked into the section's measured size, if any */
+    safeAreaVariable?: string;
+    /** `1` when moving towards the end of the axis grows the section, `-1` otherwise */
+    sign: 1 | -1;
+}
+export declare const RESIZE_SECTIONS: Record<AppShellResizeSection, ResizeSectionConfig>;
+export declare const RESIZE_SECTION_NAMES: AppShellResizeSection[];
+interface GetResizeDeltaInput {
+    section: AppShellResizeSection;
+    deltaX: number;
+    deltaY: number;
+    dir: 'ltr' | 'rtl';
+}
+export declare function getResizeDelta({ section, deltaX, deltaY, dir }: GetResizeDeltaInput): number;
+export {};

package/lib/components/AppShell/use-app-shell-resize/safe-area-inset.d.ts

@@ -0,0 +1 @@
+export declare function getSafeAreaInset(element: Element, variable: string | undefined): number;

package/lib/components/AppShell/use-app-shell-resize/use-app-shell-resize.d.ts

@@ -0,0 +1,2 @@
+import type { AppShellResizeController, UseAppShellResizeInput } from '../AppShell.types';
+export declare function useAppShellResize(input?: UseAppShellResizeInput): AppShellResizeController;

package/lib/components/AppShell/use-resizing/use-resizing.d.ts

@@ -1,6 +1,7 @@
 interface UseResizingInput {
     transitionDuration: number | undefined;
     disabled: boolean | undefined;
+    resizeKey?: string;
 }
-export declare function useResizing({ transitionDuration, disabled }: UseResizingInput): boolean;
+export declare function useResizing({ transitionDuration, disabled, resizeKey }: UseResizingInput): boolean;
 export {};