@mantine/core 9.3.1 → 9.4.0

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,EAAE,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;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"}

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

@@ -1 +1 @@
-{"version":3,"file":"assign-aside-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.ts"],"sourcesContent":["import { getBreakpointValue, keys, MantineTheme, rem } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignAsideVariablesInput {\n  baseStyles: CSSVariables;\n  minMediaStyles: MediaQueryVariables;\n  maxMediaStyles: MediaQueryVariables;\n  aside: AppShellProps['aside'] | undefined;\n  theme: MantineTheme;\n  mode: 'fixed' | 'static';\n}\n\nexport function assignAsideVariables({\n  baseStyles,\n  minMediaStyles,\n  maxMediaStyles,\n  aside,\n  theme,\n  mode,\n}: AssignAsideVariablesInput) {\n  const asideWidth = aside?.width;\n  const collapsedAsideTransform = 'translateX(var(--app-shell-aside-width))';\n  const collapsedAsideTransformRtl = 'translateX(calc(var(--app-shell-aside-width) * -1))';\n\n  if (aside?.breakpoint && !aside?.collapsed?.mobile) {\n    maxMediaStyles[aside?.breakpoint] = maxMediaStyles[aside?.breakpoint] || {};\n    if (mode === 'fixed') {\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-width'] = '100%';\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-offset'] = '0px';\n    } else {\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-width'] = '0px';\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-offset'] = '0px';\n    }\n  }\n\n  if (isPrimitiveSize(asideWidth)) {\n    const baseSize = rem(getBaseSize(asideWidth));\n    baseStyles['--app-shell-aside-width'] = baseSize;\n    baseStyles['--app-shell-aside-offset'] = baseSize;\n  }\n\n  if (isResponsiveSize(asideWidth)) {\n    if (typeof asideWidth.base !== 'undefined') {\n      baseStyles['--app-shell-aside-width'] = rem(asideWidth.base);\n      baseStyles['--app-shell-aside-offset'] = rem(asideWidth.base);\n    }\n\n    keys(asideWidth).forEach((key) => {\n      if (key !== 'base') {\n        minMediaStyles[key] = minMediaStyles[key] || {};\n        minMediaStyles[key]['--app-shell-aside-width'] = rem(asideWidth![key]);\n        minMediaStyles[key]['--app-shell-aside-offset'] = rem(asideWidth![key]);\n      }\n    });\n  }\n\n  if (aside?.breakpoint && mode === 'static') {\n    minMediaStyles[aside.breakpoint] = minMediaStyles[aside.breakpoint] || {};\n    minMediaStyles[aside.breakpoint]['--app-shell-aside-position'] = 'sticky';\n    minMediaStyles[aside.breakpoint]['--app-shell-aside-grid-row'] = '2';\n    minMediaStyles[aside.breakpoint]['--app-shell-aside-grid-column'] = '3';\n    // Adjust main column end when aside is visible\n    minMediaStyles[aside.breakpoint]['--app-shell-main-column-end'] = '3';\n  }\n\n  if (aside?.collapsed?.desktop) {\n    const breakpointValue = aside!.breakpoint;\n    minMediaStyles[breakpointValue] = minMediaStyles[breakpointValue] || {};\n    minMediaStyles[breakpointValue]['--app-shell-aside-transform'] = collapsedAsideTransform;\n    minMediaStyles[breakpointValue]['--app-shell-aside-transform-rtl'] = collapsedAsideTransformRtl;\n    if (mode === 'fixed') {\n      minMediaStyles[breakpointValue]['--app-shell-aside-offset'] = '0px !important';\n    } else {\n      minMediaStyles[breakpointValue]['--app-shell-aside-width'] = '0px';\n      minMediaStyles[breakpointValue]['--app-shell-aside-display'] = 'none';\n      minMediaStyles[breakpointValue]['--app-shell-main-column-end'] = '-1';\n    }\n    minMediaStyles[breakpointValue]['--app-shell-aside-scroll-locked-visibility'] = 'hidden';\n  }\n\n  if (aside?.collapsed?.mobile) {\n    const breakpointValue = getBreakpointValue(aside!.breakpoint, theme.breakpoints) - 0.1;\n    maxMediaStyles[breakpointValue] = maxMediaStyles[breakpointValue] || {};\n    if (mode === 'fixed') {\n      maxMediaStyles[breakpointValue]['--app-shell-aside-width'] = '100%';\n      maxMediaStyles[breakpointValue]['--app-shell-aside-offset'] = '0px';\n    } else {\n      maxMediaStyles[breakpointValue]['--app-shell-aside-width'] = '0px';\n    }\n    maxMediaStyles[breakpointValue]['--app-shell-aside-transform'] = collapsedAsideTransform;\n    maxMediaStyles[breakpointValue]['--app-shell-aside-transform-rtl'] = collapsedAsideTransformRtl;\n    maxMediaStyles[breakpointValue]['--app-shell-aside-scroll-locked-visibility'] = 'hidden';\n  }\n}\n"],"mappings":";;;;;;;;AAgBA,SAAgB,qBAAqB,EACnC,YACA,gBACA,gBACA,OACA,OACA,QAC4B;CAC5B,MAAM,aAAa,OAAO;CAC1B,MAAM,0BAA0B;CAChC,MAAM,6BAA6B;CAEnC,IAAI,OAAO,cAAc,CAAC,OAAO,WAAW,QAAQ;EAClD,eAAe,OAAO,cAAc,eAAe,OAAO,eAAe,CAAC;EAC1E,IAAI,SAAS,SAAS;GACpB,eAAe,OAAO,YAAY,6BAA6B;GAC/D,eAAe,OAAO,YAAY,8BAA8B;EAClE,OAAO;GACL,eAAe,OAAO,YAAY,6BAA6B;GAC/D,eAAe,OAAO,YAAY,8BAA8B;EAClE;CACF;CAEA,IAAI,gBAAgB,UAAU,GAAG;EAC/B,MAAM,WAAW,IAAI,YAAY,UAAU,CAAC;EAC5C,WAAW,6BAA6B;EACxC,WAAW,8BAA8B;CAC3C;CAEA,IAAI,iBAAiB,UAAU,GAAG;EAChC,IAAI,OAAO,WAAW,SAAS,aAAa;GAC1C,WAAW,6BAA6B,IAAI,WAAW,IAAI;GAC3D,WAAW,8BAA8B,IAAI,WAAW,IAAI;EAC9D;EAEA,KAAK,UAAU,EAAE,SAAS,QAAQ;GAChC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,KAAK,6BAA6B,IAAI,WAAY,IAAI;IACrE,eAAe,KAAK,8BAA8B,IAAI,WAAY,IAAI;GACxE;EACF,CAAC;CACH;CAEA,IAAI,OAAO,cAAc,SAAS,UAAU;EAC1C,eAAe,MAAM,cAAc,eAAe,MAAM,eAAe,CAAC;EACxE,eAAe,MAAM,YAAY,gCAAgC;EACjE,eAAe,MAAM,YAAY,gCAAgC;EACjE,eAAe,MAAM,YAAY,mCAAmC;EAEpE,eAAe,MAAM,YAAY,iCAAiC;CACpE;CAEA,IAAI,OAAO,WAAW,SAAS;EAC7B,MAAM,kBAAkB,MAAO;EAC/B,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,iBAAiB,iCAAiC;EACjE,eAAe,iBAAiB,qCAAqC;EACrE,IAAI,SAAS,SACX,eAAe,iBAAiB,8BAA8B;OACzD;GACL,eAAe,iBAAiB,6BAA6B;GAC7D,eAAe,iBAAiB,+BAA+B;GAC/D,eAAe,iBAAiB,iCAAiC;EACnE;EACA,eAAe,iBAAiB,gDAAgD;CAClF;CAEA,IAAI,OAAO,WAAW,QAAQ;EAC5B,MAAM,kBAAkB,mBAAmB,MAAO,YAAY,MAAM,WAAW,IAAI;EACnF,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,IAAI,SAAS,SAAS;GACpB,eAAe,iBAAiB,6BAA6B;GAC7D,eAAe,iBAAiB,8BAA8B;EAChE,OACE,eAAe,iBAAiB,6BAA6B;EAE/D,eAAe,iBAAiB,iCAAiC;EACjE,eAAe,iBAAiB,qCAAqC;EACrE,eAAe,iBAAiB,gDAAgD;CAClF;AACF"}
+{"version":3,"file":"assign-aside-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.ts"],"sourcesContent":["import { getBreakpointValue, keys, MantineTheme, rem } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignAsideVariablesInput {\n  baseStyles: CSSVariables;\n  minMediaStyles: MediaQueryVariables;\n  maxMediaStyles: MediaQueryVariables;\n  aside: AppShellProps['aside'] | undefined;\n  theme: MantineTheme;\n  mode: 'fixed' | 'static';\n}\n\nexport function assignAsideVariables({\n  baseStyles,\n  minMediaStyles,\n  maxMediaStyles,\n  aside,\n  theme,\n  mode,\n}: AssignAsideVariablesInput) {\n  const asideWidth = aside?.width;\n  const collapsedAsideTransform = 'translateX(var(--app-shell-aside-width))';\n  const collapsedAsideTransformRtl = 'translateX(calc(var(--app-shell-aside-width) * -1))';\n\n  if (aside?.breakpoint && !aside?.collapsed?.mobile) {\n    maxMediaStyles[aside?.breakpoint] = maxMediaStyles[aside?.breakpoint] || {};\n    if (mode === 'fixed') {\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-width'] = '100%';\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-offset'] = '0px';\n    } else {\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-width'] = '0px';\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-offset'] = '0px';\n    }\n  }\n\n  if (isPrimitiveSize(asideWidth)) {\n    const baseSize = rem(getBaseSize(asideWidth));\n    baseStyles['--app-shell-aside-width'] = baseSize;\n    baseStyles['--app-shell-aside-offset'] = baseSize;\n  }\n\n  if (isResponsiveSize(asideWidth)) {\n    if (typeof asideWidth.base !== 'undefined') {\n      baseStyles['--app-shell-aside-width'] = rem(asideWidth.base);\n      baseStyles['--app-shell-aside-offset'] = rem(asideWidth.base);\n    }\n\n    keys(asideWidth).forEach((key) => {\n      if (key !== 'base') {\n        minMediaStyles[key] = minMediaStyles[key] || {};\n        minMediaStyles[key]['--app-shell-aside-width'] = rem(asideWidth![key]);\n        minMediaStyles[key]['--app-shell-aside-offset'] = rem(asideWidth![key]);\n      }\n    });\n  }\n\n  if (aside?.breakpoint && mode === 'static') {\n    minMediaStyles[aside.breakpoint] = minMediaStyles[aside.breakpoint] || {};\n    minMediaStyles[aside.breakpoint]['--app-shell-aside-position'] = 'sticky';\n    minMediaStyles[aside.breakpoint]['--app-shell-aside-grid-row'] = '2';\n    minMediaStyles[aside.breakpoint]['--app-shell-aside-grid-column'] = '3';\n    // Adjust main column end when aside is visible\n    minMediaStyles[aside.breakpoint]['--app-shell-main-column-end'] = '3';\n  }\n\n  if (aside?.collapsed?.desktop) {\n    const breakpointValue = aside!.breakpoint;\n    minMediaStyles[breakpointValue] = minMediaStyles[breakpointValue] || {};\n    minMediaStyles[breakpointValue]['--app-shell-aside-transform'] = collapsedAsideTransform;\n    minMediaStyles[breakpointValue]['--app-shell-aside-transform-rtl'] = collapsedAsideTransformRtl;\n    if (mode === 'fixed') {\n      minMediaStyles[breakpointValue]['--app-shell-aside-offset'] = '0px !important';\n    } else {\n      minMediaStyles[breakpointValue]['--app-shell-aside-width'] = '0px';\n      minMediaStyles[breakpointValue]['--app-shell-aside-display'] = 'none';\n      minMediaStyles[breakpointValue]['--app-shell-main-column-end'] = '-1';\n    }\n    minMediaStyles[breakpointValue]['--app-shell-aside-scroll-locked-visibility'] = 'hidden';\n  }\n\n  if (aside?.collapsed?.mobile) {\n    const breakpointValue = getBreakpointValue(aside!.breakpoint, theme.breakpoints) - 0.1;\n    maxMediaStyles[breakpointValue] = maxMediaStyles[breakpointValue] || {};\n    if (mode === 'fixed') {\n      maxMediaStyles[breakpointValue]['--app-shell-aside-width'] = '100%';\n      maxMediaStyles[breakpointValue]['--app-shell-aside-offset'] = '0px';\n    } else {\n      maxMediaStyles[breakpointValue]['--app-shell-aside-width'] = '0px';\n    }\n    maxMediaStyles[breakpointValue]['--app-shell-aside-transform'] = collapsedAsideTransform;\n    maxMediaStyles[breakpointValue]['--app-shell-aside-transform-rtl'] = collapsedAsideTransformRtl;\n    maxMediaStyles[breakpointValue]['--app-shell-aside-scroll-locked-visibility'] = 'hidden';\n  }\n}\n"],"mappings":";;;;;;;;AAgBA,SAAgB,qBAAqB,EACnC,YACA,gBACA,gBACA,OACA,OACA,QAC4B;CAC5B,MAAM,aAAa,OAAO;CAC1B,MAAM,0BAA0B;CAChC,MAAM,6BAA6B;CAEnC,IAAI,OAAO,cAAc,CAAC,OAAO,WAAW,QAAQ;EAClD,eAAe,OAAO,cAAc,eAAe,OAAO,eAAe,CAAC;EAC1E,IAAI,SAAS,SAAS;GACpB,eAAe,OAAO,WAAW,CAAC,6BAA6B;GAC/D,eAAe,OAAO,WAAW,CAAC,8BAA8B;EAClE,OAAO;GACL,eAAe,OAAO,WAAW,CAAC,6BAA6B;GAC/D,eAAe,OAAO,WAAW,CAAC,8BAA8B;EAClE;CACF;CAEA,IAAI,gBAAgB,UAAU,GAAG;EAC/B,MAAM,WAAW,IAAI,YAAY,UAAU,CAAC;EAC5C,WAAW,6BAA6B;EACxC,WAAW,8BAA8B;CAC3C;CAEA,IAAI,iBAAiB,UAAU,GAAG;EAChC,IAAI,OAAO,WAAW,SAAS,aAAa;GAC1C,WAAW,6BAA6B,IAAI,WAAW,IAAI;GAC3D,WAAW,8BAA8B,IAAI,WAAW,IAAI;EAC9D;EAEA,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;GAChC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,IAAI,CAAC,6BAA6B,IAAI,WAAY,IAAI;IACrE,eAAe,IAAI,CAAC,8BAA8B,IAAI,WAAY,IAAI;GACxE;EACF,CAAC;CACH;CAEA,IAAI,OAAO,cAAc,SAAS,UAAU;EAC1C,eAAe,MAAM,cAAc,eAAe,MAAM,eAAe,CAAC;EACxE,eAAe,MAAM,WAAW,CAAC,gCAAgC;EACjE,eAAe,MAAM,WAAW,CAAC,gCAAgC;EACjE,eAAe,MAAM,WAAW,CAAC,mCAAmC;EAEpE,eAAe,MAAM,WAAW,CAAC,iCAAiC;CACpE;CAEA,IAAI,OAAO,WAAW,SAAS;EAC7B,MAAM,kBAAkB,MAAO;EAC/B,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,gBAAgB,CAAC,iCAAiC;EACjE,eAAe,gBAAgB,CAAC,qCAAqC;EACrE,IAAI,SAAS,SACX,eAAe,gBAAgB,CAAC,8BAA8B;OACzD;GACL,eAAe,gBAAgB,CAAC,6BAA6B;GAC7D,eAAe,gBAAgB,CAAC,+BAA+B;GAC/D,eAAe,gBAAgB,CAAC,iCAAiC;EACnE;EACA,eAAe,gBAAgB,CAAC,gDAAgD;CAClF;CAEA,IAAI,OAAO,WAAW,QAAQ;EAC5B,MAAM,kBAAkB,mBAAmB,MAAO,YAAY,MAAM,WAAW,IAAI;EACnF,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,IAAI,SAAS,SAAS;GACpB,eAAe,gBAAgB,CAAC,6BAA6B;GAC7D,eAAe,gBAAgB,CAAC,8BAA8B;EAChE,OACE,eAAe,gBAAgB,CAAC,6BAA6B;EAE/D,eAAe,gBAAgB,CAAC,iCAAiC;EACjE,eAAe,gBAAgB,CAAC,qCAAqC;EACrE,eAAe,gBAAgB,CAAC,gDAAgD;CAClF;AACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"assign-footer-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-footer-variables/assign-footer-variables.ts"],"sourcesContent":["import { keys, rem } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignFooterVariablesInput {\n  baseStyles: CSSVariables;\n  minMediaStyles: MediaQueryVariables;\n  footer: AppShellProps['footer'] | undefined;\n  mode: 'fixed' | 'static';\n}\n\nexport function assignFooterVariables({\n  baseStyles,\n  minMediaStyles,\n  footer,\n  mode,\n}: AssignFooterVariablesInput) {\n  const footerHeight = footer?.height;\n  const collapsedFooterTransform = 'translateY(var(--app-shell-footer-height))';\n  const shouldOffset = mode === 'static' ? true : (footer?.offset ?? true);\n\n  if (mode === 'static' && footer) {\n    baseStyles['--app-shell-footer-position'] = 'sticky';\n    baseStyles['--app-shell-footer-grid-column'] = '1 / -1';\n    baseStyles['--app-shell-footer-grid-row'] = '3';\n  }\n\n  if (isPrimitiveSize(footerHeight)) {\n    const baseSize = rem(getBaseSize(footerHeight));\n    baseStyles['--app-shell-footer-height'] = baseSize;\n    if (shouldOffset) {\n      baseStyles['--app-shell-footer-offset'] = baseSize;\n    }\n  }\n\n  if (isResponsiveSize(footerHeight)) {\n    if (typeof footerHeight.base !== 'undefined') {\n      baseStyles['--app-shell-footer-height'] = rem(footerHeight.base);\n\n      if (shouldOffset) {\n        baseStyles['--app-shell-footer-offset'] = rem(footerHeight.base);\n      }\n    }\n\n    keys(footerHeight).forEach((key) => {\n      if (key !== 'base') {\n        minMediaStyles[key] = minMediaStyles[key] || {};\n        minMediaStyles[key]['--app-shell-footer-height'] = rem(footerHeight[key]);\n\n        if (shouldOffset) {\n          minMediaStyles[key]['--app-shell-footer-offset'] = rem(footerHeight[key]);\n        }\n      }\n    });\n  }\n\n  if (footer?.collapsed) {\n    baseStyles['--app-shell-footer-transform'] = collapsedFooterTransform;\n    if (mode === 'fixed') {\n      baseStyles['--app-shell-footer-offset'] = '0px !important';\n    }\n  }\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,sBAAsB,EACpC,YACA,gBACA,QACA,QAC6B;CAC7B,MAAM,eAAe,QAAQ;CAC7B,MAAM,2BAA2B;CACjC,MAAM,eAAe,SAAS,WAAW,OAAQ,QAAQ,UAAU;CAEnE,IAAI,SAAS,YAAY,QAAQ;EAC/B,WAAW,iCAAiC;EAC5C,WAAW,oCAAoC;EAC/C,WAAW,iCAAiC;CAC9C;CAEA,IAAI,gBAAgB,YAAY,GAAG;EACjC,MAAM,WAAW,IAAI,YAAY,YAAY,CAAC;EAC9C,WAAW,+BAA+B;EAC1C,IAAI,cACF,WAAW,+BAA+B;CAE9C;CAEA,IAAI,iBAAiB,YAAY,GAAG;EAClC,IAAI,OAAO,aAAa,SAAS,aAAa;GAC5C,WAAW,+BAA+B,IAAI,aAAa,IAAI;GAE/D,IAAI,cACF,WAAW,+BAA+B,IAAI,aAAa,IAAI;EAEnE;EAEA,KAAK,YAAY,EAAE,SAAS,QAAQ;GAClC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,KAAK,+BAA+B,IAAI,aAAa,IAAI;IAExE,IAAI,cACF,eAAe,KAAK,+BAA+B,IAAI,aAAa,IAAI;GAE5E;EACF,CAAC;CACH;CAEA,IAAI,QAAQ,WAAW;EACrB,WAAW,kCAAkC;EAC7C,IAAI,SAAS,SACX,WAAW,+BAA+B;CAE9C;AACF"}
+{"version":3,"file":"assign-footer-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-footer-variables/assign-footer-variables.ts"],"sourcesContent":["import { keys, rem } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignFooterVariablesInput {\n  baseStyles: CSSVariables;\n  minMediaStyles: MediaQueryVariables;\n  footer: AppShellProps['footer'] | undefined;\n  mode: 'fixed' | 'static';\n}\n\nexport function assignFooterVariables({\n  baseStyles,\n  minMediaStyles,\n  footer,\n  mode,\n}: AssignFooterVariablesInput) {\n  const footerHeight = footer?.height;\n  const collapsedFooterTransform = 'translateY(var(--app-shell-footer-height))';\n  const shouldOffset = mode === 'static' ? true : (footer?.offset ?? true);\n\n  if (mode === 'static' && footer) {\n    baseStyles['--app-shell-footer-position'] = 'sticky';\n    baseStyles['--app-shell-footer-grid-column'] = '1 / -1';\n    baseStyles['--app-shell-footer-grid-row'] = '3';\n  }\n\n  if (isPrimitiveSize(footerHeight)) {\n    const baseSize = rem(getBaseSize(footerHeight));\n    baseStyles['--app-shell-footer-height'] = baseSize;\n    if (shouldOffset) {\n      baseStyles['--app-shell-footer-offset'] = baseSize;\n    }\n  }\n\n  if (isResponsiveSize(footerHeight)) {\n    if (typeof footerHeight.base !== 'undefined') {\n      baseStyles['--app-shell-footer-height'] = rem(footerHeight.base);\n\n      if (shouldOffset) {\n        baseStyles['--app-shell-footer-offset'] = rem(footerHeight.base);\n      }\n    }\n\n    keys(footerHeight).forEach((key) => {\n      if (key !== 'base') {\n        minMediaStyles[key] = minMediaStyles[key] || {};\n        minMediaStyles[key]['--app-shell-footer-height'] = rem(footerHeight[key]);\n\n        if (shouldOffset) {\n          minMediaStyles[key]['--app-shell-footer-offset'] = rem(footerHeight[key]);\n        }\n      }\n    });\n  }\n\n  if (footer?.collapsed) {\n    baseStyles['--app-shell-footer-transform'] = collapsedFooterTransform;\n    if (mode === 'fixed') {\n      baseStyles['--app-shell-footer-offset'] = '0px !important';\n    }\n  }\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,sBAAsB,EACpC,YACA,gBACA,QACA,QAC6B;CAC7B,MAAM,eAAe,QAAQ;CAC7B,MAAM,2BAA2B;CACjC,MAAM,eAAe,SAAS,WAAW,OAAQ,QAAQ,UAAU;CAEnE,IAAI,SAAS,YAAY,QAAQ;EAC/B,WAAW,iCAAiC;EAC5C,WAAW,oCAAoC;EAC/C,WAAW,iCAAiC;CAC9C;CAEA,IAAI,gBAAgB,YAAY,GAAG;EACjC,MAAM,WAAW,IAAI,YAAY,YAAY,CAAC;EAC9C,WAAW,+BAA+B;EAC1C,IAAI,cACF,WAAW,+BAA+B;CAE9C;CAEA,IAAI,iBAAiB,YAAY,GAAG;EAClC,IAAI,OAAO,aAAa,SAAS,aAAa;GAC5C,WAAW,+BAA+B,IAAI,aAAa,IAAI;GAE/D,IAAI,cACF,WAAW,+BAA+B,IAAI,aAAa,IAAI;EAEnE;EAEA,KAAK,YAAY,CAAC,CAAC,SAAS,QAAQ;GAClC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,IAAI,CAAC,+BAA+B,IAAI,aAAa,IAAI;IAExE,IAAI,cACF,eAAe,IAAI,CAAC,+BAA+B,IAAI,aAAa,IAAI;GAE5E;EACF,CAAC;CACH;CAEA,IAAI,QAAQ,WAAW;EACrB,WAAW,kCAAkC;EAC7C,IAAI,SAAS,SACX,WAAW,+BAA+B;CAE9C;AACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"assign-header-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-header-variables/assign-header-variables.ts"],"sourcesContent":["import { keys, rem } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignHeaderVariablesInput {\n  baseStyles: CSSVariables;\n  minMediaStyles: MediaQueryVariables;\n  header: AppShellProps['header'] | undefined;\n  mode: 'fixed' | 'static';\n}\n\nexport function assignHeaderVariables({\n  baseStyles,\n  minMediaStyles,\n  header,\n  mode,\n}: AssignHeaderVariablesInput) {\n  const headerHeight = header?.height;\n  const collapsedHeaderTransform = 'translateY(calc(var(--app-shell-header-height) * -1))';\n  const shouldOffset = mode === 'static' ? true : (header?.offset ?? true);\n\n  if (mode === 'static' && header) {\n    baseStyles['--app-shell-header-position'] = 'sticky';\n    baseStyles['--app-shell-header-grid-column'] = '1 / -1';\n    baseStyles['--app-shell-header-grid-row'] = '1';\n  }\n\n  if (isPrimitiveSize(headerHeight)) {\n    const baseSize = rem(getBaseSize(headerHeight));\n    baseStyles['--app-shell-header-height'] = baseSize;\n    if (shouldOffset) {\n      baseStyles['--app-shell-header-offset'] = baseSize;\n    }\n  }\n\n  if (isResponsiveSize(headerHeight)) {\n    if (typeof headerHeight.base !== 'undefined') {\n      baseStyles['--app-shell-header-height'] = rem(headerHeight.base);\n\n      if (shouldOffset) {\n        baseStyles['--app-shell-header-offset'] = rem(headerHeight.base);\n      }\n    }\n\n    keys(headerHeight).forEach((key) => {\n      if (key !== 'base') {\n        minMediaStyles[key] = minMediaStyles[key] || {};\n        minMediaStyles[key]['--app-shell-header-height'] = rem(headerHeight[key]);\n\n        if (shouldOffset) {\n          minMediaStyles[key]['--app-shell-header-offset'] = rem(headerHeight[key]);\n        }\n      }\n    });\n  }\n\n  if (header?.collapsed) {\n    baseStyles['--app-shell-header-transform'] = collapsedHeaderTransform;\n    if (mode === 'fixed') {\n      baseStyles['--app-shell-header-offset'] = '0px !important';\n    }\n  }\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,sBAAsB,EACpC,YACA,gBACA,QACA,QAC6B;CAC7B,MAAM,eAAe,QAAQ;CAC7B,MAAM,2BAA2B;CACjC,MAAM,eAAe,SAAS,WAAW,OAAQ,QAAQ,UAAU;CAEnE,IAAI,SAAS,YAAY,QAAQ;EAC/B,WAAW,iCAAiC;EAC5C,WAAW,oCAAoC;EAC/C,WAAW,iCAAiC;CAC9C;CAEA,IAAI,gBAAgB,YAAY,GAAG;EACjC,MAAM,WAAW,IAAI,YAAY,YAAY,CAAC;EAC9C,WAAW,+BAA+B;EAC1C,IAAI,cACF,WAAW,+BAA+B;CAE9C;CAEA,IAAI,iBAAiB,YAAY,GAAG;EAClC,IAAI,OAAO,aAAa,SAAS,aAAa;GAC5C,WAAW,+BAA+B,IAAI,aAAa,IAAI;GAE/D,IAAI,cACF,WAAW,+BAA+B,IAAI,aAAa,IAAI;EAEnE;EAEA,KAAK,YAAY,EAAE,SAAS,QAAQ;GAClC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,KAAK,+BAA+B,IAAI,aAAa,IAAI;IAExE,IAAI,cACF,eAAe,KAAK,+BAA+B,IAAI,aAAa,IAAI;GAE5E;EACF,CAAC;CACH;CAEA,IAAI,QAAQ,WAAW;EACrB,WAAW,kCAAkC;EAC7C,IAAI,SAAS,SACX,WAAW,+BAA+B;CAE9C;AACF"}
+{"version":3,"file":"assign-header-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-header-variables/assign-header-variables.ts"],"sourcesContent":["import { keys, rem } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignHeaderVariablesInput {\n  baseStyles: CSSVariables;\n  minMediaStyles: MediaQueryVariables;\n  header: AppShellProps['header'] | undefined;\n  mode: 'fixed' | 'static';\n}\n\nexport function assignHeaderVariables({\n  baseStyles,\n  minMediaStyles,\n  header,\n  mode,\n}: AssignHeaderVariablesInput) {\n  const headerHeight = header?.height;\n  const collapsedHeaderTransform = 'translateY(calc(var(--app-shell-header-height) * -1))';\n  const shouldOffset = mode === 'static' ? true : (header?.offset ?? true);\n\n  if (mode === 'static' && header) {\n    baseStyles['--app-shell-header-position'] = 'sticky';\n    baseStyles['--app-shell-header-grid-column'] = '1 / -1';\n    baseStyles['--app-shell-header-grid-row'] = '1';\n  }\n\n  if (isPrimitiveSize(headerHeight)) {\n    const baseSize = rem(getBaseSize(headerHeight));\n    baseStyles['--app-shell-header-height'] = baseSize;\n    if (shouldOffset) {\n      baseStyles['--app-shell-header-offset'] = baseSize;\n    }\n  }\n\n  if (isResponsiveSize(headerHeight)) {\n    if (typeof headerHeight.base !== 'undefined') {\n      baseStyles['--app-shell-header-height'] = rem(headerHeight.base);\n\n      if (shouldOffset) {\n        baseStyles['--app-shell-header-offset'] = rem(headerHeight.base);\n      }\n    }\n\n    keys(headerHeight).forEach((key) => {\n      if (key !== 'base') {\n        minMediaStyles[key] = minMediaStyles[key] || {};\n        minMediaStyles[key]['--app-shell-header-height'] = rem(headerHeight[key]);\n\n        if (shouldOffset) {\n          minMediaStyles[key]['--app-shell-header-offset'] = rem(headerHeight[key]);\n        }\n      }\n    });\n  }\n\n  if (header?.collapsed) {\n    baseStyles['--app-shell-header-transform'] = collapsedHeaderTransform;\n    if (mode === 'fixed') {\n      baseStyles['--app-shell-header-offset'] = '0px !important';\n    }\n  }\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,sBAAsB,EACpC,YACA,gBACA,QACA,QAC6B;CAC7B,MAAM,eAAe,QAAQ;CAC7B,MAAM,2BAA2B;CACjC,MAAM,eAAe,SAAS,WAAW,OAAQ,QAAQ,UAAU;CAEnE,IAAI,SAAS,YAAY,QAAQ;EAC/B,WAAW,iCAAiC;EAC5C,WAAW,oCAAoC;EAC/C,WAAW,iCAAiC;CAC9C;CAEA,IAAI,gBAAgB,YAAY,GAAG;EACjC,MAAM,WAAW,IAAI,YAAY,YAAY,CAAC;EAC9C,WAAW,+BAA+B;EAC1C,IAAI,cACF,WAAW,+BAA+B;CAE9C;CAEA,IAAI,iBAAiB,YAAY,GAAG;EAClC,IAAI,OAAO,aAAa,SAAS,aAAa;GAC5C,WAAW,+BAA+B,IAAI,aAAa,IAAI;GAE/D,IAAI,cACF,WAAW,+BAA+B,IAAI,aAAa,IAAI;EAEnE;EAEA,KAAK,YAAY,CAAC,CAAC,SAAS,QAAQ;GAClC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,IAAI,CAAC,+BAA+B,IAAI,aAAa,IAAI;IAExE,IAAI,cACF,eAAe,IAAI,CAAC,+BAA+B,IAAI,aAAa,IAAI;GAE5E;EACF,CAAC;CACH;CAEA,IAAI,QAAQ,WAAW;EACrB,WAAW,kCAAkC;EAC7C,IAAI,SAAS,SACX,WAAW,+BAA+B;CAE9C;AACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"assign-navbar-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.ts"],"sourcesContent":["import { getBreakpointValue, keys, MantineTheme, rem } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignNavbarVariablesInput {\n  baseStyles: CSSVariables;\n  minMediaStyles: MediaQueryVariables;\n  maxMediaStyles: MediaQueryVariables;\n  navbar: AppShellProps['navbar'] | undefined;\n  theme: MantineTheme;\n  mode: 'fixed' | 'static';\n}\n\nexport function assignNavbarVariables({\n  baseStyles,\n  minMediaStyles,\n  maxMediaStyles,\n  navbar,\n  theme,\n  mode,\n}: AssignNavbarVariablesInput) {\n  const navbarWidth = navbar?.width;\n  const collapsedNavbarTransform = 'translateX(calc(var(--app-shell-navbar-width) * -1))';\n  const collapsedNavbarTransformRtl = 'translateX(var(--app-shell-navbar-width))';\n\n  if (navbar?.breakpoint && !navbar?.collapsed?.mobile) {\n    maxMediaStyles[navbar?.breakpoint] = maxMediaStyles[navbar?.breakpoint] || {};\n    maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-offset'] = '0px';\n    maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-width'] = '100%';\n    if (mode === 'static') {\n      maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-grid-width'] = '0px';\n    }\n  }\n\n  if (isPrimitiveSize(navbarWidth)) {\n    const baseSize = rem(getBaseSize(navbarWidth));\n    baseStyles['--app-shell-navbar-width'] = baseSize;\n    baseStyles['--app-shell-navbar-offset'] = baseSize;\n    if (mode === 'static') {\n      baseStyles['--app-shell-navbar-grid-width'] = baseSize;\n    }\n  }\n\n  if (isResponsiveSize(navbarWidth)) {\n    if (typeof navbarWidth.base !== 'undefined') {\n      baseStyles['--app-shell-navbar-width'] = rem(navbarWidth.base);\n      baseStyles['--app-shell-navbar-offset'] = rem(navbarWidth.base);\n      if (mode === 'static') {\n        baseStyles['--app-shell-navbar-grid-width'] = rem(navbarWidth.base);\n      }\n    }\n\n    keys(navbarWidth).forEach((key) => {\n      if (key !== 'base') {\n        minMediaStyles[key] = minMediaStyles[key] || {};\n        minMediaStyles[key]['--app-shell-navbar-width'] = rem(navbarWidth![key]);\n        minMediaStyles[key]['--app-shell-navbar-offset'] = rem(navbarWidth![key]);\n        if (mode === 'static') {\n          minMediaStyles[key]['--app-shell-navbar-grid-width'] = rem(navbarWidth![key]);\n        }\n      }\n    });\n  }\n\n  if (navbar?.breakpoint && mode === 'static') {\n    minMediaStyles[navbar.breakpoint] = minMediaStyles[navbar.breakpoint] || {};\n    minMediaStyles[navbar.breakpoint]['--app-shell-navbar-position'] = 'sticky';\n    minMediaStyles[navbar.breakpoint]['--app-shell-navbar-grid-row'] = '2';\n    minMediaStyles[navbar.breakpoint]['--app-shell-navbar-grid-column'] = '1';\n    minMediaStyles[navbar.breakpoint]['--app-shell-main-column-start'] = '2';\n  }\n\n  if (navbar?.collapsed?.desktop) {\n    const breakpointValue = navbar!.breakpoint;\n    minMediaStyles[breakpointValue] = minMediaStyles[breakpointValue] || {};\n    minMediaStyles[breakpointValue]['--app-shell-navbar-transform'] = collapsedNavbarTransform;\n    minMediaStyles[breakpointValue]['--app-shell-navbar-transform-rtl'] =\n      collapsedNavbarTransformRtl;\n    if (mode === 'fixed') {\n      minMediaStyles[breakpointValue]['--app-shell-navbar-offset'] = '0px !important';\n    } else {\n      // In static mode, hide the element completely so grid column collapses\n      minMediaStyles[breakpointValue]['--app-shell-navbar-width'] = '0px';\n      minMediaStyles[breakpointValue]['--app-shell-navbar-display'] = 'none';\n      minMediaStyles[breakpointValue]['--app-shell-main-column-start'] = '1';\n    }\n  }\n\n  if (navbar?.collapsed?.mobile) {\n    const breakpointValue = getBreakpointValue(navbar!.breakpoint, theme.breakpoints) - 0.1;\n    maxMediaStyles[breakpointValue] = maxMediaStyles[breakpointValue] || {};\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-width'] = '100%';\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-offset'] = '0px';\n    if (mode === 'static') {\n      maxMediaStyles[breakpointValue]['--app-shell-navbar-grid-width'] = '0px';\n    }\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-transform'] = collapsedNavbarTransform;\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-transform-rtl'] =\n      collapsedNavbarTransformRtl;\n  }\n}\n"],"mappings":";;;;;;;;AAgBA,SAAgB,sBAAsB,EACpC,YACA,gBACA,gBACA,QACA,OACA,QAC6B;CAC7B,MAAM,cAAc,QAAQ;CAC5B,MAAM,2BAA2B;CACjC,MAAM,8BAA8B;CAEpC,IAAI,QAAQ,cAAc,CAAC,QAAQ,WAAW,QAAQ;EACpD,eAAe,QAAQ,cAAc,eAAe,QAAQ,eAAe,CAAC;EAC5E,eAAe,QAAQ,YAAY,+BAA+B;EAClE,eAAe,QAAQ,YAAY,8BAA8B;EACjE,IAAI,SAAS,UACX,eAAe,QAAQ,YAAY,mCAAmC;CAE1E;CAEA,IAAI,gBAAgB,WAAW,GAAG;EAChC,MAAM,WAAW,IAAI,YAAY,WAAW,CAAC;EAC7C,WAAW,8BAA8B;EACzC,WAAW,+BAA+B;EAC1C,IAAI,SAAS,UACX,WAAW,mCAAmC;CAElD;CAEA,IAAI,iBAAiB,WAAW,GAAG;EACjC,IAAI,OAAO,YAAY,SAAS,aAAa;GAC3C,WAAW,8BAA8B,IAAI,YAAY,IAAI;GAC7D,WAAW,+BAA+B,IAAI,YAAY,IAAI;GAC9D,IAAI,SAAS,UACX,WAAW,mCAAmC,IAAI,YAAY,IAAI;EAEtE;EAEA,KAAK,WAAW,EAAE,SAAS,QAAQ;GACjC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,KAAK,8BAA8B,IAAI,YAAa,IAAI;IACvE,eAAe,KAAK,+BAA+B,IAAI,YAAa,IAAI;IACxE,IAAI,SAAS,UACX,eAAe,KAAK,mCAAmC,IAAI,YAAa,IAAI;GAEhF;EACF,CAAC;CACH;CAEA,IAAI,QAAQ,cAAc,SAAS,UAAU;EAC3C,eAAe,OAAO,cAAc,eAAe,OAAO,eAAe,CAAC;EAC1E,eAAe,OAAO,YAAY,iCAAiC;EACnE,eAAe,OAAO,YAAY,iCAAiC;EACnE,eAAe,OAAO,YAAY,oCAAoC;EACtE,eAAe,OAAO,YAAY,mCAAmC;CACvE;CAEA,IAAI,QAAQ,WAAW,SAAS;EAC9B,MAAM,kBAAkB,OAAQ;EAChC,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,iBAAiB,kCAAkC;EAClE,eAAe,iBAAiB,sCAC9B;EACF,IAAI,SAAS,SACX,eAAe,iBAAiB,+BAA+B;OAC1D;GAEL,eAAe,iBAAiB,8BAA8B;GAC9D,eAAe,iBAAiB,gCAAgC;GAChE,eAAe,iBAAiB,mCAAmC;EACrE;CACF;CAEA,IAAI,QAAQ,WAAW,QAAQ;EAC7B,MAAM,kBAAkB,mBAAmB,OAAQ,YAAY,MAAM,WAAW,IAAI;EACpF,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,iBAAiB,8BAA8B;EAC9D,eAAe,iBAAiB,+BAA+B;EAC/D,IAAI,SAAS,UACX,eAAe,iBAAiB,mCAAmC;EAErE,eAAe,iBAAiB,kCAAkC;EAClE,eAAe,iBAAiB,sCAC9B;CACJ;AACF"}
+{"version":3,"file":"assign-navbar-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.ts"],"sourcesContent":["import { getBreakpointValue, keys, MantineTheme, rem } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignNavbarVariablesInput {\n  baseStyles: CSSVariables;\n  minMediaStyles: MediaQueryVariables;\n  maxMediaStyles: MediaQueryVariables;\n  navbar: AppShellProps['navbar'] | undefined;\n  theme: MantineTheme;\n  mode: 'fixed' | 'static';\n}\n\nexport function assignNavbarVariables({\n  baseStyles,\n  minMediaStyles,\n  maxMediaStyles,\n  navbar,\n  theme,\n  mode,\n}: AssignNavbarVariablesInput) {\n  const navbarWidth = navbar?.width;\n  const collapsedNavbarTransform = 'translateX(calc(var(--app-shell-navbar-width) * -1))';\n  const collapsedNavbarTransformRtl = 'translateX(var(--app-shell-navbar-width))';\n\n  if (navbar?.breakpoint && !navbar?.collapsed?.mobile) {\n    maxMediaStyles[navbar?.breakpoint] = maxMediaStyles[navbar?.breakpoint] || {};\n    maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-offset'] = '0px';\n    maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-width'] = '100%';\n    if (mode === 'static') {\n      maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-grid-width'] = '0px';\n    }\n  }\n\n  if (isPrimitiveSize(navbarWidth)) {\n    const baseSize = rem(getBaseSize(navbarWidth));\n    baseStyles['--app-shell-navbar-width'] = baseSize;\n    baseStyles['--app-shell-navbar-offset'] = baseSize;\n    if (mode === 'static') {\n      baseStyles['--app-shell-navbar-grid-width'] = baseSize;\n    }\n  }\n\n  if (isResponsiveSize(navbarWidth)) {\n    if (typeof navbarWidth.base !== 'undefined') {\n      baseStyles['--app-shell-navbar-width'] = rem(navbarWidth.base);\n      baseStyles['--app-shell-navbar-offset'] = rem(navbarWidth.base);\n      if (mode === 'static') {\n        baseStyles['--app-shell-navbar-grid-width'] = rem(navbarWidth.base);\n      }\n    }\n\n    keys(navbarWidth).forEach((key) => {\n      if (key !== 'base') {\n        minMediaStyles[key] = minMediaStyles[key] || {};\n        minMediaStyles[key]['--app-shell-navbar-width'] = rem(navbarWidth![key]);\n        minMediaStyles[key]['--app-shell-navbar-offset'] = rem(navbarWidth![key]);\n        if (mode === 'static') {\n          minMediaStyles[key]['--app-shell-navbar-grid-width'] = rem(navbarWidth![key]);\n        }\n      }\n    });\n  }\n\n  if (navbar?.breakpoint && mode === 'static') {\n    minMediaStyles[navbar.breakpoint] = minMediaStyles[navbar.breakpoint] || {};\n    minMediaStyles[navbar.breakpoint]['--app-shell-navbar-position'] = 'sticky';\n    minMediaStyles[navbar.breakpoint]['--app-shell-navbar-grid-row'] = '2';\n    minMediaStyles[navbar.breakpoint]['--app-shell-navbar-grid-column'] = '1';\n    minMediaStyles[navbar.breakpoint]['--app-shell-main-column-start'] = '2';\n  }\n\n  if (navbar?.collapsed?.desktop) {\n    const breakpointValue = navbar!.breakpoint;\n    minMediaStyles[breakpointValue] = minMediaStyles[breakpointValue] || {};\n    minMediaStyles[breakpointValue]['--app-shell-navbar-transform'] = collapsedNavbarTransform;\n    minMediaStyles[breakpointValue]['--app-shell-navbar-transform-rtl'] =\n      collapsedNavbarTransformRtl;\n    if (mode === 'fixed') {\n      minMediaStyles[breakpointValue]['--app-shell-navbar-offset'] = '0px !important';\n    } else {\n      // In static mode, hide the element completely so grid column collapses\n      minMediaStyles[breakpointValue]['--app-shell-navbar-width'] = '0px';\n      minMediaStyles[breakpointValue]['--app-shell-navbar-display'] = 'none';\n      minMediaStyles[breakpointValue]['--app-shell-main-column-start'] = '1';\n    }\n  }\n\n  if (navbar?.collapsed?.mobile) {\n    const breakpointValue = getBreakpointValue(navbar!.breakpoint, theme.breakpoints) - 0.1;\n    maxMediaStyles[breakpointValue] = maxMediaStyles[breakpointValue] || {};\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-width'] = '100%';\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-offset'] = '0px';\n    if (mode === 'static') {\n      maxMediaStyles[breakpointValue]['--app-shell-navbar-grid-width'] = '0px';\n    }\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-transform'] = collapsedNavbarTransform;\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-transform-rtl'] =\n      collapsedNavbarTransformRtl;\n  }\n}\n"],"mappings":";;;;;;;;AAgBA,SAAgB,sBAAsB,EACpC,YACA,gBACA,gBACA,QACA,OACA,QAC6B;CAC7B,MAAM,cAAc,QAAQ;CAC5B,MAAM,2BAA2B;CACjC,MAAM,8BAA8B;CAEpC,IAAI,QAAQ,cAAc,CAAC,QAAQ,WAAW,QAAQ;EACpD,eAAe,QAAQ,cAAc,eAAe,QAAQ,eAAe,CAAC;EAC5E,eAAe,QAAQ,WAAW,CAAC,+BAA+B;EAClE,eAAe,QAAQ,WAAW,CAAC,8BAA8B;EACjE,IAAI,SAAS,UACX,eAAe,QAAQ,WAAW,CAAC,mCAAmC;CAE1E;CAEA,IAAI,gBAAgB,WAAW,GAAG;EAChC,MAAM,WAAW,IAAI,YAAY,WAAW,CAAC;EAC7C,WAAW,8BAA8B;EACzC,WAAW,+BAA+B;EAC1C,IAAI,SAAS,UACX,WAAW,mCAAmC;CAElD;CAEA,IAAI,iBAAiB,WAAW,GAAG;EACjC,IAAI,OAAO,YAAY,SAAS,aAAa;GAC3C,WAAW,8BAA8B,IAAI,YAAY,IAAI;GAC7D,WAAW,+BAA+B,IAAI,YAAY,IAAI;GAC9D,IAAI,SAAS,UACX,WAAW,mCAAmC,IAAI,YAAY,IAAI;EAEtE;EAEA,KAAK,WAAW,CAAC,CAAC,SAAS,QAAQ;GACjC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,IAAI,CAAC,8BAA8B,IAAI,YAAa,IAAI;IACvE,eAAe,IAAI,CAAC,+BAA+B,IAAI,YAAa,IAAI;IACxE,IAAI,SAAS,UACX,eAAe,IAAI,CAAC,mCAAmC,IAAI,YAAa,IAAI;GAEhF;EACF,CAAC;CACH;CAEA,IAAI,QAAQ,cAAc,SAAS,UAAU;EAC3C,eAAe,OAAO,cAAc,eAAe,OAAO,eAAe,CAAC;EAC1E,eAAe,OAAO,WAAW,CAAC,iCAAiC;EACnE,eAAe,OAAO,WAAW,CAAC,iCAAiC;EACnE,eAAe,OAAO,WAAW,CAAC,oCAAoC;EACtE,eAAe,OAAO,WAAW,CAAC,mCAAmC;CACvE;CAEA,IAAI,QAAQ,WAAW,SAAS;EAC9B,MAAM,kBAAkB,OAAQ;EAChC,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,gBAAgB,CAAC,kCAAkC;EAClE,eAAe,gBAAgB,CAAC,sCAC9B;EACF,IAAI,SAAS,SACX,eAAe,gBAAgB,CAAC,+BAA+B;OAC1D;GAEL,eAAe,gBAAgB,CAAC,8BAA8B;GAC9D,eAAe,gBAAgB,CAAC,gCAAgC;GAChE,eAAe,gBAAgB,CAAC,mCAAmC;EACrE;CACF;CAEA,IAAI,QAAQ,WAAW,QAAQ;EAC7B,MAAM,kBAAkB,mBAAmB,OAAQ,YAAY,MAAM,WAAW,IAAI;EACpF,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,gBAAgB,CAAC,8BAA8B;EAC9D,eAAe,gBAAgB,CAAC,+BAA+B;EAC/D,IAAI,SAAS,UACX,eAAe,gBAAgB,CAAC,mCAAmC;EAErE,eAAe,gBAAgB,CAAC,kCAAkC;EAClE,eAAe,gBAAgB,CAAC,sCAC9B;CACJ;AACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"assign-padding-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-padding-variables/assign-padding-variables.ts"],"sourcesContent":["import { keys } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport { getPaddingValue } from '../get-padding-value/get-padding-value';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignPaddingVariablesInput {\n  baseStyles: CSSVariables;\n  minMediaStyles: MediaQueryVariables;\n  padding: AppShellProps['padding'] | undefined;\n}\n\nexport function assignPaddingVariables({\n  padding,\n  baseStyles,\n  minMediaStyles,\n}: AssignPaddingVariablesInput) {\n  if (isPrimitiveSize(padding)) {\n    baseStyles['--app-shell-padding'] = getPaddingValue(getBaseSize(padding));\n  }\n\n  if (isResponsiveSize(padding)) {\n    if (padding.base) {\n      baseStyles['--app-shell-padding'] = getPaddingValue(padding.base);\n    }\n\n    keys(padding).forEach((key) => {\n      if (key !== 'base') {\n        minMediaStyles[key] = minMediaStyles[key] || {};\n        minMediaStyles[key]['--app-shell-padding'] = getPaddingValue(padding![key]);\n      }\n    });\n  }\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,uBAAuB,EACrC,SACA,YACA,kBAC8B;CAC9B,IAAI,gBAAgB,OAAO,GACzB,WAAW,yBAAyB,gBAAgB,YAAY,OAAO,CAAC;CAG1E,IAAI,iBAAiB,OAAO,GAAG;EAC7B,IAAI,QAAQ,MACV,WAAW,yBAAyB,gBAAgB,QAAQ,IAAI;EAGlE,KAAK,OAAO,EAAE,SAAS,QAAQ;GAC7B,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,KAAK,yBAAyB,gBAAgB,QAAS,IAAI;GAC5E;EACF,CAAC;CACH;AACF"}
+{"version":3,"file":"assign-padding-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-padding-variables/assign-padding-variables.ts"],"sourcesContent":["import { keys } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport { getPaddingValue } from '../get-padding-value/get-padding-value';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignPaddingVariablesInput {\n  baseStyles: CSSVariables;\n  minMediaStyles: MediaQueryVariables;\n  padding: AppShellProps['padding'] | undefined;\n}\n\nexport function assignPaddingVariables({\n  padding,\n  baseStyles,\n  minMediaStyles,\n}: AssignPaddingVariablesInput) {\n  if (isPrimitiveSize(padding)) {\n    baseStyles['--app-shell-padding'] = getPaddingValue(getBaseSize(padding));\n  }\n\n  if (isResponsiveSize(padding)) {\n    if (padding.base) {\n      baseStyles['--app-shell-padding'] = getPaddingValue(padding.base);\n    }\n\n    keys(padding).forEach((key) => {\n      if (key !== 'base') {\n        minMediaStyles[key] = minMediaStyles[key] || {};\n        minMediaStyles[key]['--app-shell-padding'] = getPaddingValue(padding![key]);\n      }\n    });\n  }\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,uBAAuB,EACrC,SACA,YACA,kBAC8B;CAC9B,IAAI,gBAAgB,OAAO,GACzB,WAAW,yBAAyB,gBAAgB,YAAY,OAAO,CAAC;CAG1E,IAAI,iBAAiB,OAAO,GAAG;EAC7B,IAAI,QAAQ,MACV,WAAW,yBAAyB,gBAAgB,QAAQ,IAAI;EAGlE,KAAK,OAAO,CAAC,CAAC,SAAS,QAAQ;GAC7B,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,IAAI,CAAC,yBAAyB,gBAAgB,QAAS,IAAI;GAC5E;EACF,CAAC;CACH;AACF"}

package/esm/components/AppShell/AppShellMediaStyles/get-variables/get-variables.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"get-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/get-variables/get-variables.ts"],"sourcesContent":["import { em, getSortedBreakpoints, keys, MantineTheme } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { assignAsideVariables } from '../assign-aside-variables/assign-aside-variables';\nimport { assignFooterVariables } from '../assign-footer-variables/assign-footer-variables';\nimport { assignHeaderVariables } from '../assign-header-variables/assign-header-variables';\nimport { assignNavbarVariables } from '../assign-navbar-variables/assign-navbar-variables';\nimport { assignPaddingVariables } from '../assign-padding-variables/assign-padding-variables';\n\nexport type CSSVariables = Record<`--${string}`, string | undefined>;\nexport type MediaQueryVariables = Record<string, Record<`--${string}`, string | undefined>>;\n\ninterface GetVariablesInput {\n  navbar: AppShellProps['navbar'] | undefined;\n  header: AppShellProps['header'] | undefined;\n  footer: AppShellProps['footer'] | undefined;\n  aside: AppShellProps['aside'] | undefined;\n  padding: AppShellProps['padding'] | undefined;\n  theme: MantineTheme;\n  mode: 'fixed' | 'static';\n}\n\nexport function getVariables({\n  navbar,\n  header,\n  footer,\n  aside,\n  padding,\n  theme,\n  mode,\n}: GetVariablesInput) {\n  const minMediaStyles: MediaQueryVariables = {};\n  const maxMediaStyles: MediaQueryVariables = {};\n  const baseStyles: CSSVariables = {};\n\n  // Set default main grid position in static mode\n  if (mode === 'static') {\n    baseStyles['--app-shell-main-grid-column'] = '1 / -1';\n    baseStyles['--app-shell-main-grid-row'] = '2';\n  }\n\n  assignNavbarVariables({\n    baseStyles,\n    minMediaStyles,\n    maxMediaStyles,\n    navbar,\n    theme,\n    mode,\n  });\n\n  assignAsideVariables({\n    baseStyles,\n    minMediaStyles,\n    maxMediaStyles,\n    aside,\n    theme,\n    mode,\n  });\n\n  assignHeaderVariables({ baseStyles, minMediaStyles, header, mode });\n  assignFooterVariables({ baseStyles, minMediaStyles, footer, mode });\n  assignPaddingVariables({ baseStyles, minMediaStyles, padding });\n\n  const minMedia = getSortedBreakpoints(keys(minMediaStyles), theme.breakpoints).map(\n    (breakpoint) => ({\n      query: `(min-width: ${em(breakpoint.px)})`,\n      styles: minMediaStyles[breakpoint.value],\n    })\n  );\n\n  const maxMedia = getSortedBreakpoints(keys(maxMediaStyles), theme.breakpoints).map(\n    (breakpoint) => ({\n      query: `(max-width: ${em(breakpoint.px)})`,\n      styles: maxMediaStyles[breakpoint.value],\n    })\n  );\n\n  const media = [...minMedia, ...maxMedia];\n\n  return { baseStyles, media };\n}\n"],"mappings":";;;;;;;;;;AAqBA,SAAgB,aAAa,EAC3B,QACA,QACA,QACA,OACA,SACA,OACA,QACoB;CACpB,MAAM,iBAAsC,CAAC;CAC7C,MAAM,iBAAsC,CAAC;CAC7C,MAAM,aAA2B,CAAC;CAGlC,IAAI,SAAS,UAAU;EACrB,WAAW,kCAAkC;EAC7C,WAAW,+BAA+B;CAC5C;CAEA,sBAAsB;EACpB;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,qBAAqB;EACnB;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,sBAAsB;EAAE;EAAY;EAAgB;EAAQ;CAAK,CAAC;CAClE,sBAAsB;EAAE;EAAY;EAAgB;EAAQ;CAAK,CAAC;CAClE,uBAAuB;EAAE;EAAY;EAAgB;CAAQ,CAAC;CAE9D,MAAM,WAAW,qBAAqB,KAAK,cAAc,GAAG,MAAM,WAAW,EAAE,KAC5E,gBAAgB;EACf,OAAO,eAAe,GAAG,WAAW,EAAE,EAAE;EACxC,QAAQ,eAAe,WAAW;CACpC,EACF;CAEA,MAAM,WAAW,qBAAqB,KAAK,cAAc,GAAG,MAAM,WAAW,EAAE,KAC5E,gBAAgB;EACf,OAAO,eAAe,GAAG,WAAW,EAAE,EAAE;EACxC,QAAQ,eAAe,WAAW;CACpC,EACF;CAIA,OAAO;EAAE;EAAY,OAAA,CAFN,GAAG,UAAU,GAAG,QAEN;CAAE;AAC7B"}
+{"version":3,"file":"get-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/get-variables/get-variables.ts"],"sourcesContent":["import { em, getSortedBreakpoints, keys, MantineTheme } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { assignAsideVariables } from '../assign-aside-variables/assign-aside-variables';\nimport { assignFooterVariables } from '../assign-footer-variables/assign-footer-variables';\nimport { assignHeaderVariables } from '../assign-header-variables/assign-header-variables';\nimport { assignNavbarVariables } from '../assign-navbar-variables/assign-navbar-variables';\nimport { assignPaddingVariables } from '../assign-padding-variables/assign-padding-variables';\n\nexport type CSSVariables = Record<`--${string}`, string | undefined>;\nexport type MediaQueryVariables = Record<string, Record<`--${string}`, string | undefined>>;\n\ninterface GetVariablesInput {\n  navbar: AppShellProps['navbar'] | undefined;\n  header: AppShellProps['header'] | undefined;\n  footer: AppShellProps['footer'] | undefined;\n  aside: AppShellProps['aside'] | undefined;\n  padding: AppShellProps['padding'] | undefined;\n  theme: MantineTheme;\n  mode: 'fixed' | 'static';\n}\n\nexport function getVariables({\n  navbar,\n  header,\n  footer,\n  aside,\n  padding,\n  theme,\n  mode,\n}: GetVariablesInput) {\n  const minMediaStyles: MediaQueryVariables = {};\n  const maxMediaStyles: MediaQueryVariables = {};\n  const baseStyles: CSSVariables = {};\n\n  // Set default main grid position in static mode\n  if (mode === 'static') {\n    baseStyles['--app-shell-main-grid-column'] = '1 / -1';\n    baseStyles['--app-shell-main-grid-row'] = '2';\n  }\n\n  assignNavbarVariables({\n    baseStyles,\n    minMediaStyles,\n    maxMediaStyles,\n    navbar,\n    theme,\n    mode,\n  });\n\n  assignAsideVariables({\n    baseStyles,\n    minMediaStyles,\n    maxMediaStyles,\n    aside,\n    theme,\n    mode,\n  });\n\n  assignHeaderVariables({ baseStyles, minMediaStyles, header, mode });\n  assignFooterVariables({ baseStyles, minMediaStyles, footer, mode });\n  assignPaddingVariables({ baseStyles, minMediaStyles, padding });\n\n  const minMedia = getSortedBreakpoints(keys(minMediaStyles), theme.breakpoints).map(\n    (breakpoint) => ({\n      query: `(min-width: ${em(breakpoint.px)})`,\n      styles: minMediaStyles[breakpoint.value],\n    })\n  );\n\n  const maxMedia = getSortedBreakpoints(keys(maxMediaStyles), theme.breakpoints).map(\n    (breakpoint) => ({\n      query: `(max-width: ${em(breakpoint.px)})`,\n      styles: maxMediaStyles[breakpoint.value],\n    })\n  );\n\n  const media = [...minMedia, ...maxMedia];\n\n  return { baseStyles, media };\n}\n"],"mappings":";;;;;;;;;;AAqBA,SAAgB,aAAa,EAC3B,QACA,QACA,QACA,OACA,SACA,OACA,QACoB;CACpB,MAAM,iBAAsC,CAAC;CAC7C,MAAM,iBAAsC,CAAC;CAC7C,MAAM,aAA2B,CAAC;CAGlC,IAAI,SAAS,UAAU;EACrB,WAAW,kCAAkC;EAC7C,WAAW,+BAA+B;CAC5C;CAEA,sBAAsB;EACpB;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,qBAAqB;EACnB;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,sBAAsB;EAAE;EAAY;EAAgB;EAAQ;CAAK,CAAC;CAClE,sBAAsB;EAAE;EAAY;EAAgB;EAAQ;CAAK,CAAC;CAClE,uBAAuB;EAAE;EAAY;EAAgB;CAAQ,CAAC;CAE9D,MAAM,WAAW,qBAAqB,KAAK,cAAc,GAAG,MAAM,WAAW,CAAC,CAAC,KAC5E,gBAAgB;EACf,OAAO,eAAe,GAAG,WAAW,EAAE,EAAE;EACxC,QAAQ,eAAe,WAAW;CACpC,EACF;CAEA,MAAM,WAAW,qBAAqB,KAAK,cAAc,GAAG,MAAM,WAAW,CAAC,CAAC,KAC5E,gBAAgB;EACf,OAAO,eAAe,GAAG,WAAW,EAAE,EAAE;EACxC,QAAQ,eAAe,WAAW;CACpC,EACF;CAIA,OAAO;EAAE;EAAY,OAAA,CAFN,GAAG,UAAU,GAAG,QAEN;CAAE;AAC7B"}

package/esm/components/AppShell/AppShellMediaStyles/is-primitive-size/is-primitive-size.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"is-primitive-size.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/is-primitive-size/is-primitive-size.ts"],"sourcesContent":["import type { AppShellResponsiveSize, AppShellSize } from '../../AppShell.types';\n\nexport function isPrimitiveSize(\n  size: AppShellSize | AppShellResponsiveSize | undefined\n): size is AppShellSize | AppShellResponsiveSize {\n  const isBaseSize =\n    typeof size === 'object' &&\n    size !== null &&\n    typeof size.base !== 'undefined' &&\n    Object.keys(size).length === 1;\n  return typeof size === 'number' || typeof size === 'string' || isBaseSize;\n}\n"],"mappings":";;AAEA,SAAgB,gBACd,MAC+C;CAC/C,MAAM,aACJ,OAAO,SAAS,YAChB,SAAS,QACT,OAAO,KAAK,SAAS,eACrB,OAAO,KAAK,IAAI,EAAE,WAAW;CAC/B,OAAO,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;AACjE"}
+{"version":3,"file":"is-primitive-size.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/is-primitive-size/is-primitive-size.ts"],"sourcesContent":["import type { AppShellResponsiveSize, AppShellSize } from '../../AppShell.types';\n\nexport function isPrimitiveSize(\n  size: AppShellSize | AppShellResponsiveSize | undefined\n): size is AppShellSize | AppShellResponsiveSize {\n  const isBaseSize =\n    typeof size === 'object' &&\n    size !== null &&\n    typeof size.base !== 'undefined' &&\n    Object.keys(size).length === 1;\n  return typeof size === 'number' || typeof size === 'string' || isBaseSize;\n}\n"],"mappings":";;AAEA,SAAgB,gBACd,MAC+C;CAC/C,MAAM,aACJ,OAAO,SAAS,YAChB,SAAS,QACT,OAAO,KAAK,SAAS,eACrB,OAAO,KAAK,IAAI,CAAC,CAAC,WAAW;CAC/B,OAAO,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;AACjE"}

package/esm/components/AppShell/AppShellMediaStyles/is-responsive-size/is-responsive-size.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"is-responsive-size.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/is-responsive-size/is-responsive-size.ts"],"sourcesContent":["import type { AppShellResponsiveSize, AppShellSize } from '../../AppShell.types';\n\nexport function isResponsiveSize(\n  size: AppShellSize | AppShellResponsiveSize | undefined\n): size is AppShellResponsiveSize {\n  if (typeof size !== 'object' || size === null) {\n    return false;\n  }\n\n  if (Object.keys(size as object).length === 1 && 'base' in (size as object)) {\n    return false;\n  }\n\n  return true;\n}\n"],"mappings":";;AAEA,SAAgB,iBACd,MACgC;CAChC,IAAI,OAAO,SAAS,YAAY,SAAS,MACvC,OAAO;CAGT,IAAI,OAAO,KAAK,IAAc,EAAE,WAAW,KAAK,UAAW,MACzD,OAAO;CAGT,OAAO;AACT"}
+{"version":3,"file":"is-responsive-size.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/is-responsive-size/is-responsive-size.ts"],"sourcesContent":["import type { AppShellResponsiveSize, AppShellSize } from '../../AppShell.types';\n\nexport function isResponsiveSize(\n  size: AppShellSize | AppShellResponsiveSize | undefined\n): size is AppShellResponsiveSize {\n  if (typeof size !== 'object' || size === null) {\n    return false;\n  }\n\n  if (Object.keys(size as object).length === 1 && 'base' in (size as object)) {\n    return false;\n  }\n\n  return true;\n}\n"],"mappings":";;AAEA,SAAgB,iBACd,MACgC;CAChC,IAAI,OAAO,SAAS,YAAY,SAAS,MACvC,OAAO;CAGT,IAAI,OAAO,KAAK,IAAc,CAAC,CAAC,WAAW,KAAK,UAAW,MACzD,OAAO;CAGT,OAAO;AACT"}

package/esm/components/AspectRatio/AspectRatio.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AspectRatio.mjs","names":["classes"],"sources":["../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './AspectRatio.module.css';\n\nexport type AspectRatioStylesNames = 'root';\nexport type AspectRatioCssVariables = {\n  root: '--ar-ratio';\n};\n\nexport interface AspectRatioProps\n  extends BoxProps, StylesApiProps<AspectRatioFactory>, ElementProps<'div'> {\n  /** Aspect ratio, for example, `16 / 9`, `4 / 3`, `1920 / 1080` @default 1 */\n  ratio?: number;\n}\n\nexport type AspectRatioFactory = Factory<{\n  props: AspectRatioProps;\n  ref: HTMLDivElement;\n  stylesNames: AspectRatioStylesNames;\n  vars: AspectRatioCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<AspectRatioFactory>((_, { ratio }) => ({\n  root: {\n    '--ar-ratio': ratio?.toString(),\n  },\n}));\n\nexport const AspectRatio = factory<AspectRatioFactory>((_props) => {\n  const props = useProps('AspectRatio', null, _props);\n  const { classNames, className, style, styles, unstyled, vars, ratio, attributes, ...others } =\n    props;\n\n  const getStyles = useStyles<AspectRatioFactory>({\n    name: 'AspectRatio',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return <Box {...getStyles('root')} {...others} />;\n});\n\nAspectRatio.classes = classes;\nAspectRatio.varsResolver = varsResolver;\nAspectRatio.displayName = '@mantine/core/AspectRatio';\n\nexport namespace AspectRatio {\n  export type Props = AspectRatioProps;\n  export type StylesNames = AspectRatioStylesNames;\n  export type CssVariables = AspectRatioCssVariables;\n  export type Factory = AspectRatioFactory;\n}\n"],"mappings":";;;;;;;;;AA+BA,MAAM,eAAe,oBAAwC,GAAG,EAAE,aAAa,EAC7E,MAAM,EACJ,cAAc,OAAO,SAAS,EAChC,EACF,EAAE;AAEF,MAAa,cAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,MAAM,MAAM;CAClD,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,UAAU,MAAM,OAAO,YAAY,GAAG,WAClF;CAgBF,OAAO,oBAAC,KAAD;EAAK,GAdM,UAA8B;GAC9C,MAAM;GACN,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAEwB,EAAE,MAAM;EAAG,GAAI;CAAS,CAAA;AAClD,CAAC;AAED,YAAY,UAAUA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}
+{"version":3,"file":"AspectRatio.mjs","names":["classes"],"sources":["../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './AspectRatio.module.css';\n\nexport type AspectRatioStylesNames = 'root';\nexport type AspectRatioCssVariables = {\n  root: '--ar-ratio';\n};\n\nexport interface AspectRatioProps\n  extends BoxProps, StylesApiProps<AspectRatioFactory>, ElementProps<'div'> {\n  /** Aspect ratio, for example, `16 / 9`, `4 / 3`, `1920 / 1080` @default 1 */\n  ratio?: number;\n}\n\nexport type AspectRatioFactory = Factory<{\n  props: AspectRatioProps;\n  ref: HTMLDivElement;\n  stylesNames: AspectRatioStylesNames;\n  vars: AspectRatioCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<AspectRatioFactory>((_, { ratio }) => ({\n  root: {\n    '--ar-ratio': ratio?.toString(),\n  },\n}));\n\nexport const AspectRatio = factory<AspectRatioFactory>((_props) => {\n  const props = useProps('AspectRatio', null, _props);\n  const { classNames, className, style, styles, unstyled, vars, ratio, attributes, ...others } =\n    props;\n\n  const getStyles = useStyles<AspectRatioFactory>({\n    name: 'AspectRatio',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return <Box {...getStyles('root')} {...others} />;\n});\n\nAspectRatio.classes = classes;\nAspectRatio.varsResolver = varsResolver;\nAspectRatio.displayName = '@mantine/core/AspectRatio';\n\nexport namespace AspectRatio {\n  export type Props = AspectRatioProps;\n  export type StylesNames = AspectRatioStylesNames;\n  export type CssVariables = AspectRatioCssVariables;\n  export type Factory = AspectRatioFactory;\n}\n"],"mappings":";;;;;;;;;AA+BA,MAAM,eAAe,oBAAwC,GAAG,EAAE,aAAa,EAC7E,MAAM,EACJ,cAAc,OAAO,SAAS,EAChC,EACF,EAAE;AAEF,MAAa,cAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,MAAM,MAAM;CAClD,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,UAAU,MAAM,OAAO,YAAY,GAAG,WAClF;CAgBF,OAAO,oBAAC,KAAD;EAAK,GAdM,UAA8B;GAC9C,MAAM;GACN,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAEwB,CAAC,CAAC,MAAM;EAAG,GAAI;CAAS,CAAA;AAClD,CAAC;AAED,YAAY,UAAUA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}

package/esm/components/Autocomplete/Autocomplete.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.mjs","names":["useId"],"sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxGenericData,\n  ComboboxGenericItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n  InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type RenderAutocompleteOption = (\n  input: ComboboxLikeRenderOptionInput<ComboboxGenericItem>\n) => React.ReactNode;\n\nexport type AutocompleteStylesNames = __InputStylesNames | ComboboxLikeStylesNames;\n\nexport interface AutocompleteProps\n  extends\n    BoxProps,\n    Omit<__BaseInputProps, 'pointer'>,\n    Omit<ComboboxLikeProps, 'data'>,\n    StylesApiProps<AutocompleteFactory>,\n    ElementProps<'input', 'onChange' | 'size'> {\n  /** Data used to display options. Values must be unique. */\n  data?: ComboboxGenericData;\n\n  /** Controlled component value */\n  value?: string;\n\n  /** Default value for uncontrolled component */\n  defaultValue?: string;\n\n  /** Called when value changes */\n  onChange?: (value: string) => void;\n\n  /** Function to render custom option content */\n  renderOption?: RenderAutocompleteOption;\n\n  /** Props passed to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** If set, the clear button is displayed when the component has a value @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** If set, the highlighted option is selected when the input loses focus @default false */\n  autoSelectOnBlur?: boolean;\n\n  /** If set, the dropdown opens when the input receives focus @default true */\n  openOnFocus?: boolean;\n}\n\nexport type AutocompleteFactory = Factory<{\n  props: AutocompleteProps;\n  ref: HTMLInputElement;\n  stylesNames: AutocompleteStylesNames;\n  variant: InputVariant;\n}>;\n\nexport const Autocomplete = factory<AutocompleteFactory>((_props) => {\n  const props = useProps(\n    ['Input', 'InputWrapper', 'Autocomplete'],\n    { size: 'sm' } satisfies Partial<AutocompleteProps>,\n    _props\n  );\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownClose,\n    onDropdownOpen,\n    onFocus,\n    onBlur,\n    onClick,\n    onChange,\n    data,\n    value,\n    defaultValue,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    readOnly,\n    disabled,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    floatingHeight,\n    size,\n    id,\n    renderOption,\n    autoComplete,\n    scrollAreaProps,\n    onClear,\n    clearButtonProps,\n    error,\n    clearable,\n    clearSectionMode,\n    rightSection,\n    autoSelectOnBlur,\n    openOnFocus = true,\n    attributes,\n    ...others\n  } = props;\n\n  const _id = useId(id);\n  const parsedData = getParsedComboboxData(data);\n  const optionsLockup = getOptionsLockup(parsedData);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      // Required for autoSelectOnBlur to work correctly\n      setTimeout(combobox.resetSelectedOption, 0);\n    },\n  });\n\n  const handleValueChange = (value: string) => {\n    setValue(value);\n    combobox.resetSelectedOption();\n  };\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<AutocompleteFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, _value]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        handleValueChange('');\n        onClear?.();\n      }}\n    />\n  );\n\n  return (\n    <Combobox\n      store={combobox}\n      __staticSelector=\"Autocomplete\"\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      unstyled={unstyled}\n      readOnly={readOnly}\n      size={size}\n      attributes={attributes}\n      floatingHeight={floatingHeight}\n      keepMounted={autoSelectOnBlur}\n      onOptionSubmit={(val) => {\n        onOptionSubmit?.(val);\n        handleValueChange(optionsLockup[val].label);\n        combobox.closeDropdown();\n      }}\n      {...comboboxProps}\n    >\n      <Combobox.Target autoComplete={autoComplete} withExpandedAttribute>\n        <InputBase\n          {...others}\n          size={size}\n          __staticSelector=\"Autocomplete\"\n          __clearSection={clearButton}\n          __clearable={clearable && !!_value && !disabled && !readOnly}\n          __clearSectionMode={clearSectionMode}\n          rightSection={rightSection}\n          disabled={disabled}\n          readOnly={readOnly}\n          value={_value}\n          error={error}\n          onChange={(event) => {\n            handleValueChange(event.currentTarget.value);\n            combobox.openDropdown();\n            selectFirstOptionOnChange && combobox.selectFirstOption();\n          }}\n          onFocus={(event) => {\n            openOnFocus && combobox.openDropdown();\n            onFocus?.(event);\n          }}\n          onBlur={(event) => {\n            if (autoSelectOnBlur) {\n              combobox.clickSelectedOption();\n            }\n\n            combobox.closeDropdown();\n            onBlur?.(event);\n          }}\n          onClick={(event) => {\n            combobox.openDropdown();\n            onClick?.(event);\n          }}\n          classNames={resolvedClassNames}\n          styles={resolvedStyles}\n          unstyled={unstyled}\n          attributes={attributes}\n          id={_id}\n        />\n      </Combobox.Target>\n      <OptionsDropdown\n        data={parsedData}\n        hidden={readOnly || disabled}\n        filter={filter as OptionsFilter<Primitive> | undefined}\n        search={_value}\n        limit={limit}\n        hiddenWhenEmpty\n        withScrollArea={withScrollArea}\n        maxDropdownHeight={maxDropdownHeight}\n        unstyled={unstyled}\n        labelId={others.label ? `${_id}-label` : undefined}\n        aria-label={others.label ? undefined : others['aria-label']}\n        renderOption={renderOption}\n        scrollAreaProps={scrollAreaProps}\n      />\n    </Combobox>\n  );\n});\n\nAutocomplete.classes = { ...InputBase.classes, ...Combobox.classes };\nAutocomplete.displayName = '@mantine/core/Autocomplete';\n\nexport namespace Autocomplete {\n  export type Props = AutocompleteProps;\n  export type StylesNames = AutocompleteStylesNames;\n  export type RenderOption = RenderAutocompleteOption;\n  export type Factory = AutocompleteFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;AA4FA,MAAa,eAAe,SAA8B,WAAW;CACnE,MAAM,QAAQ,SACZ;EAAC;EAAS;EAAgB;CAAc,GACxC,EAAE,MAAM,KAAK,GACb,MACF;CACA,MAAM,EACJ,YACA,QACA,UACA,MACA,gBACA,uBACA,iBACA,gBACA,SACA,QACA,SACA,UACA,MACA,OACA,cACA,2BACA,iCACA,gBACA,eACA,UACA,UACA,QACA,OACA,gBACA,mBACA,gBACA,MACA,IACA,cACA,cACA,iBACA,SACA,kBACA,OACA,WACA,kBACA,cACA,kBACA,cAAc,MACd,YACA,GAAG,WACD;CAEJ,MAAM,MAAMA,QAAM,EAAE;CACpB,MAAM,aAAa,sBAAsB,IAAI;CAC7C,MAAM,gBAAgB,iBAAiB,UAAU;CAEjD,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY;EACZ;CACF,CAAC;CAED,MAAM,WAAW,YAAY;EAC3B,QAAQ;EACR,eAAe;EACf,sBAAsB;GACpB,iBAAiB;GACjB,IAAI,iCACF,SAAS,kBAAkB;EAE/B;EACA,uBAAuB;GACrB,kBAAkB;GAElB,WAAW,SAAS,qBAAqB,CAAC;EAC5C;CACF,CAAC;CAED,MAAM,qBAAqB,UAAkB;EAC3C,SAAS,KAAK;EACd,SAAS,oBAAoB;CAC/B;CAEA,MAAM,EAAE,oBAAoB,mBAAmB,qBAA0C;EACvF;EACA;EACA;CACF,CAAC;CAED,gBAAgB;EACd,IAAI,2BACF,SAAS,kBAAkB;CAE/B,GAAG,CAAC,2BAA2B,MAAM,CAAC;CAEtC,MAAM,cACJ,oBAAC,SAAS,aAAV;EACE,GAAI;EACJ,eAAe;GACb,kBAAkB,EAAE;GACpB,UAAU;EACZ;CACD,CAAA;CAGH,OACE,qBAAC,UAAD;EACE,OAAO;EACP,kBAAiB;EACjB,YAAY;EACZ,QAAQ;EACE;EACA;EACJ;EACM;EACI;EAChB,aAAa;EACb,iBAAiB,QAAQ;GACvB,iBAAiB,GAAG;GACpB,kBAAkB,cAAc,KAAK,KAAK;GAC1C,SAAS,cAAc;EACzB;EACA,GAAI;YAhBN,CAkBE,oBAAC,SAAS,QAAV;GAA+B;GAAc,uBAAA;aAC3C,oBAAC,WAAD;IACE,GAAI;IACE;IACN,kBAAiB;IACjB,gBAAgB;IAChB,aAAa,aAAa,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC;IACpD,oBAAoB;IACN;IACJ;IACA;IACV,OAAO;IACA;IACP,WAAW,UAAU;KACnB,kBAAkB,MAAM,cAAc,KAAK;KAC3C,SAAS,aAAa;KACtB,6BAA6B,SAAS,kBAAkB;IAC1D;IACA,UAAU,UAAU;KAClB,eAAe,SAAS,aAAa;KACrC,UAAU,KAAK;IACjB;IACA,SAAS,UAAU;KACjB,IAAI,kBACF,SAAS,oBAAoB;KAG/B,SAAS,cAAc;KACvB,SAAS,KAAK;IAChB;IACA,UAAU,UAAU;KAClB,SAAS,aAAa;KACtB,UAAU,KAAK;IACjB;IACA,YAAY;IACZ,QAAQ;IACE;IACE;IACZ,IAAI;GACL,CAAA;EACc,CAAA,GACjB,oBAAC,iBAAD;GACE,MAAM;GACN,QAAQ,YAAY;GACZ;GACR,QAAQ;GACD;GACP,iBAAA;GACgB;GACG;GACT;GACV,SAAS,OAAO,QAAQ,GAAG,IAAI,UAAU,KAAA;GACzC,cAAY,OAAO,QAAQ,KAAA,IAAY,OAAO;GAChC;GACG;EAClB,CAAA,CACO;;AAEd,CAAC;AAED,aAAa,UAAU;CAAE,GAAG,UAAU;CAAS,GAAG,SAAS;AAAQ;AACnE,aAAa,cAAc"}
+{"version":3,"file":"Autocomplete.mjs","names":["useId"],"sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxGenericData,\n  ComboboxGenericItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n  InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type RenderAutocompleteOption = (\n  input: ComboboxLikeRenderOptionInput<ComboboxGenericItem>\n) => React.ReactNode;\n\nexport type AutocompleteStylesNames = __InputStylesNames | ComboboxLikeStylesNames;\n\nexport interface AutocompleteProps\n  extends\n    BoxProps,\n    Omit<__BaseInputProps, 'pointer'>,\n    Omit<ComboboxLikeProps, 'data'>,\n    StylesApiProps<AutocompleteFactory>,\n    ElementProps<'input', 'onChange' | 'size'> {\n  /** Data used to display options. Values must be unique. */\n  data?: ComboboxGenericData;\n\n  /** Controlled component value */\n  value?: string;\n\n  /** Default value for uncontrolled component */\n  defaultValue?: string;\n\n  /** Called when value changes */\n  onChange?: (value: string) => void;\n\n  /** Function to render custom option content */\n  renderOption?: RenderAutocompleteOption;\n\n  /** Props passed to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** If set, the clear button is displayed when the component has a value @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** If set, the highlighted option is selected when the input loses focus @default false */\n  autoSelectOnBlur?: boolean;\n\n  /** If set, the dropdown opens when the input receives focus @default true */\n  openOnFocus?: boolean;\n}\n\nexport type AutocompleteFactory = Factory<{\n  props: AutocompleteProps;\n  ref: HTMLInputElement;\n  stylesNames: AutocompleteStylesNames;\n  variant: InputVariant;\n}>;\n\nexport const Autocomplete = factory<AutocompleteFactory>((_props) => {\n  const props = useProps(\n    ['Input', 'InputWrapper', 'Autocomplete'],\n    { size: 'sm' } satisfies Partial<AutocompleteProps>,\n    _props\n  );\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownClose,\n    onDropdownOpen,\n    onFocus,\n    onBlur,\n    onClick,\n    onChange,\n    data,\n    value,\n    defaultValue,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    readOnly,\n    disabled,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    floatingHeight,\n    size,\n    id,\n    renderOption,\n    autoComplete,\n    scrollAreaProps,\n    onClear,\n    clearButtonProps,\n    error,\n    clearable,\n    clearSectionMode,\n    rightSection,\n    autoSelectOnBlur,\n    openOnFocus = true,\n    attributes,\n    ...others\n  } = props;\n\n  const _id = useId(id);\n  const parsedData = getParsedComboboxData(data);\n  const optionsLockup = getOptionsLockup(parsedData);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      // Required for autoSelectOnBlur to work correctly\n      setTimeout(combobox.resetSelectedOption, 0);\n    },\n  });\n\n  const handleValueChange = (value: string) => {\n    setValue(value);\n    combobox.resetSelectedOption();\n  };\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<AutocompleteFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, _value]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        handleValueChange('');\n        onClear?.();\n      }}\n    />\n  );\n\n  return (\n    <Combobox\n      store={combobox}\n      __staticSelector=\"Autocomplete\"\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      unstyled={unstyled}\n      readOnly={readOnly}\n      size={size}\n      attributes={attributes}\n      floatingHeight={floatingHeight}\n      keepMounted={autoSelectOnBlur}\n      onOptionSubmit={(val) => {\n        onOptionSubmit?.(val);\n        handleValueChange(optionsLockup[val].label);\n        combobox.closeDropdown();\n      }}\n      {...comboboxProps}\n    >\n      <Combobox.Target autoComplete={autoComplete} withExpandedAttribute>\n        <InputBase\n          {...others}\n          size={size}\n          __staticSelector=\"Autocomplete\"\n          __clearSection={clearButton}\n          __clearable={clearable && !!_value && !disabled && !readOnly}\n          __clearSectionMode={clearSectionMode}\n          rightSection={rightSection}\n          disabled={disabled}\n          readOnly={readOnly}\n          value={_value}\n          error={error}\n          onChange={(event) => {\n            handleValueChange(event.currentTarget.value);\n            combobox.openDropdown();\n            selectFirstOptionOnChange && combobox.selectFirstOption();\n          }}\n          onFocus={(event) => {\n            openOnFocus && combobox.openDropdown();\n            onFocus?.(event);\n          }}\n          onBlur={(event) => {\n            if (autoSelectOnBlur) {\n              combobox.clickSelectedOption();\n            }\n\n            combobox.closeDropdown();\n            onBlur?.(event);\n          }}\n          onClick={(event) => {\n            combobox.openDropdown();\n            onClick?.(event);\n          }}\n          classNames={resolvedClassNames}\n          styles={resolvedStyles}\n          unstyled={unstyled}\n          attributes={attributes}\n          id={_id}\n        />\n      </Combobox.Target>\n      <OptionsDropdown\n        data={parsedData}\n        hidden={readOnly || disabled}\n        filter={filter as OptionsFilter<Primitive> | undefined}\n        search={_value}\n        limit={limit}\n        hiddenWhenEmpty\n        withScrollArea={withScrollArea}\n        maxDropdownHeight={maxDropdownHeight}\n        unstyled={unstyled}\n        labelId={others.label ? `${_id}-label` : undefined}\n        aria-label={others.label ? undefined : others['aria-label']}\n        renderOption={renderOption}\n        scrollAreaProps={scrollAreaProps}\n      />\n    </Combobox>\n  );\n});\n\nAutocomplete.classes = { ...InputBase.classes, ...Combobox.classes };\nAutocomplete.displayName = '@mantine/core/Autocomplete';\n\nexport namespace Autocomplete {\n  export type Props = AutocompleteProps;\n  export type StylesNames = AutocompleteStylesNames;\n  export type RenderOption = RenderAutocompleteOption;\n  export type Factory = AutocompleteFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;AA4FA,MAAa,eAAe,SAA8B,WAAW;CACnE,MAAM,QAAQ,SACZ;EAAC;EAAS;EAAgB;CAAc,GACxC,EAAE,MAAM,KAAK,GACb,MACF;CACA,MAAM,EACJ,YACA,QACA,UACA,MACA,gBACA,uBACA,iBACA,gBACA,SACA,QACA,SACA,UACA,MACA,OACA,cACA,2BACA,iCACA,gBACA,eACA,UACA,UACA,QACA,OACA,gBACA,mBACA,gBACA,MACA,IACA,cACA,cACA,iBACA,SACA,kBACA,OACA,WACA,kBACA,cACA,kBACA,cAAc,MACd,YACA,GAAG,WACD;CAEJ,MAAM,MAAMA,QAAM,EAAE;CACpB,MAAM,aAAa,sBAAsB,IAAI;CAC7C,MAAM,gBAAgB,iBAAiB,UAAU;CAEjD,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY;EACZ;CACF,CAAC;CAED,MAAM,WAAW,YAAY;EAC3B,QAAQ;EACR,eAAe;EACf,sBAAsB;GACpB,iBAAiB;GACjB,IAAI,iCACF,SAAS,kBAAkB;EAE/B;EACA,uBAAuB;GACrB,kBAAkB;GAElB,WAAW,SAAS,qBAAqB,CAAC;EAC5C;CACF,CAAC;CAED,MAAM,qBAAqB,UAAkB;EAC3C,SAAS,KAAK;EACd,SAAS,oBAAoB;CAC/B;CAEA,MAAM,EAAE,oBAAoB,mBAAmB,qBAA0C;EACvF;EACA;EACA;CACF,CAAC;CAED,gBAAgB;EACd,IAAI,2BACF,SAAS,kBAAkB;CAE/B,GAAG,CAAC,2BAA2B,MAAM,CAAC;CAEtC,MAAM,cACJ,oBAAC,SAAS,aAAV;EACE,GAAI;EACJ,eAAe;GACb,kBAAkB,EAAE;GACpB,UAAU;EACZ;CACD,CAAA;CAGH,OACE,qBAAC,UAAD;EACE,OAAO;EACP,kBAAiB;EACjB,YAAY;EACZ,QAAQ;EACE;EACA;EACJ;EACM;EACI;EAChB,aAAa;EACb,iBAAiB,QAAQ;GACvB,iBAAiB,GAAG;GACpB,kBAAkB,cAAc,IAAI,CAAC,KAAK;GAC1C,SAAS,cAAc;EACzB;EACA,GAAI;YAhBN,CAkBE,oBAAC,SAAS,QAAV;GAA+B;GAAc,uBAAA;aAC3C,oBAAC,WAAD;IACE,GAAI;IACE;IACN,kBAAiB;IACjB,gBAAgB;IAChB,aAAa,aAAa,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC;IACpD,oBAAoB;IACN;IACJ;IACA;IACV,OAAO;IACA;IACP,WAAW,UAAU;KACnB,kBAAkB,MAAM,cAAc,KAAK;KAC3C,SAAS,aAAa;KACtB,6BAA6B,SAAS,kBAAkB;IAC1D;IACA,UAAU,UAAU;KAClB,eAAe,SAAS,aAAa;KACrC,UAAU,KAAK;IACjB;IACA,SAAS,UAAU;KACjB,IAAI,kBACF,SAAS,oBAAoB;KAG/B,SAAS,cAAc;KACvB,SAAS,KAAK;IAChB;IACA,UAAU,UAAU;KAClB,SAAS,aAAa;KACtB,UAAU,KAAK;IACjB;IACA,YAAY;IACZ,QAAQ;IACE;IACE;IACZ,IAAI;GACL,CAAA;EACc,CAAA,GACjB,oBAAC,iBAAD;GACE,MAAM;GACN,QAAQ,YAAY;GACZ;GACR,QAAQ;GACD;GACP,iBAAA;GACgB;GACG;GACT;GACV,SAAS,OAAO,QAAQ,GAAG,IAAI,UAAU,KAAA;GACzC,cAAY,OAAO,QAAQ,KAAA,IAAY,OAAO;GAChC;GACG;EAClB,CAAA,CACO;;AAEd,CAAC;AAED,aAAa,UAAU;CAAE,GAAG,UAAU;CAAS,GAAG,SAAS;AAAQ;AACnE,aAAa,cAAc"}

package/esm/components/Avatar/AvatarGroup/AvatarGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.mjs","names":["classes"],"sources":["../../../../src/components/Avatar/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSpacing,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport classes from '../Avatar.module.css';\n\nexport interface AvatarGroupContextValue {\n  withinGroup: boolean;\n}\n\nexport const AvatarGroupContext = createContext<AvatarGroupContextValue>({ withinGroup: false });\n\nexport type AvatarGroupStylesNames = 'group';\nexport type AvatarGroupCssVariables = {\n  group: '--ag-spacing';\n};\n\nexport interface AvatarGroupProps\n  extends BoxProps, StylesApiProps<AvatarGroupFactory>, ElementProps<'div'> {\n  /** Negative space between Avatar components @default 'sm' */\n  spacing?: MantineSpacing;\n}\n\nexport type AvatarGroupFactory = Factory<{\n  props: AvatarGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: AvatarGroupStylesNames;\n  vars: AvatarGroupCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<AvatarGroupFactory>((_, { spacing }) => ({\n  group: {\n    '--ag-spacing': getSpacing(spacing),\n  },\n}));\n\nexport const AvatarGroup = factory<AvatarGroupFactory>((_props) => {\n  const props = useProps('AvatarGroup', null, _props);\n  const { classNames, className, style, styles, unstyled, vars, spacing, attributes, ...others } =\n    props;\n\n  const getStyles = useStyles<AvatarGroupFactory>({\n    name: 'AvatarGroup',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'group',\n  });\n\n  return (\n    <AvatarGroupContext value={{ withinGroup: true }}>\n      <Box {...getStyles('group')} {...others} />\n    </AvatarGroupContext>\n  );\n});\n\nAvatarGroup.classes = classes;\nAvatarGroup.varsResolver = varsResolver;\nAvatarGroup.displayName = '@mantine/core/AvatarGroup';\n"],"mappings":";;;;;;;;;;;AAoBA,MAAa,qBAAqB,cAAuC,EAAE,aAAa,MAAM,CAAC;AAoB/F,MAAM,eAAe,oBAAwC,GAAG,EAAE,eAAe,EAC/E,OAAO,EACL,gBAAgB,WAAW,OAAO,EACpC,EACF,EAAE;AAEF,MAAa,cAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,MAAM,MAAM;CAClD,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,UAAU,MAAM,SAAS,YAAY,GAAG,WACpF;CAiBF,OACE,oBAAC,oBAAD;EAAoB,OAAO,EAAE,aAAa,KAAK;YAC7C,oBAAC,KAAD;GAAK,GAjBS,UAA8B;IAC9C,MAAM;IACN,SAAA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,cAAc;GAChB,CAIqB,EAAE,OAAO;GAAG,GAAI;EAAS,CAAA;CACxB,CAAA;AAExB,CAAC;AAED,YAAY,UAAUA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}
+{"version":3,"file":"AvatarGroup.mjs","names":["classes"],"sources":["../../../../src/components/Avatar/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSpacing,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport classes from '../Avatar.module.css';\n\nexport interface AvatarGroupContextValue {\n  withinGroup: boolean;\n}\n\nexport const AvatarGroupContext = createContext<AvatarGroupContextValue>({ withinGroup: false });\n\nexport type AvatarGroupStylesNames = 'group';\nexport type AvatarGroupCssVariables = {\n  group: '--ag-spacing';\n};\n\nexport interface AvatarGroupProps\n  extends BoxProps, StylesApiProps<AvatarGroupFactory>, ElementProps<'div'> {\n  /** Negative space between Avatar components @default 'sm' */\n  spacing?: MantineSpacing;\n}\n\nexport type AvatarGroupFactory = Factory<{\n  props: AvatarGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: AvatarGroupStylesNames;\n  vars: AvatarGroupCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<AvatarGroupFactory>((_, { spacing }) => ({\n  group: {\n    '--ag-spacing': getSpacing(spacing),\n  },\n}));\n\nexport const AvatarGroup = factory<AvatarGroupFactory>((_props) => {\n  const props = useProps('AvatarGroup', null, _props);\n  const { classNames, className, style, styles, unstyled, vars, spacing, attributes, ...others } =\n    props;\n\n  const getStyles = useStyles<AvatarGroupFactory>({\n    name: 'AvatarGroup',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'group',\n  });\n\n  return (\n    <AvatarGroupContext value={{ withinGroup: true }}>\n      <Box {...getStyles('group')} {...others} />\n    </AvatarGroupContext>\n  );\n});\n\nAvatarGroup.classes = classes;\nAvatarGroup.varsResolver = varsResolver;\nAvatarGroup.displayName = '@mantine/core/AvatarGroup';\n"],"mappings":";;;;;;;;;;;AAoBA,MAAa,qBAAqB,cAAuC,EAAE,aAAa,MAAM,CAAC;AAoB/F,MAAM,eAAe,oBAAwC,GAAG,EAAE,eAAe,EAC/E,OAAO,EACL,gBAAgB,WAAW,OAAO,EACpC,EACF,EAAE;AAEF,MAAa,cAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,MAAM,MAAM;CAClD,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,UAAU,MAAM,SAAS,YAAY,GAAG,WACpF;CAiBF,OACE,oBAAC,oBAAD;EAAoB,OAAO,EAAE,aAAa,KAAK;YAC7C,oBAAC,KAAD;GAAK,GAjBS,UAA8B;IAC9C,MAAM;IACN,SAAA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,cAAc;GAChB,CAIqB,CAAC,CAAC,OAAO;GAAG,GAAI;EAAS,CAAA;CACxB,CAAA;AAExB,CAAC;AAED,YAAY,UAAUA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}

package/esm/components/Avatar/get-initials/get-initials.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"get-initials.mjs","names":[],"sources":["../../../../src/components/Avatar/get-initials/get-initials.ts"],"sourcesContent":["export function getInitials(name: string, limit = 2) {\n  const splitted = name.split(' ');\n\n  if (splitted.length === 1) {\n    return name.slice(0, limit).toUpperCase();\n  }\n\n  return splitted\n    .map((word) => word[0])\n    .slice(0, limit)\n    .join('')\n    .toUpperCase();\n}\n"],"mappings":";;AAAA,SAAgB,YAAY,MAAc,QAAQ,GAAG;CACnD,MAAM,WAAW,KAAK,MAAM,GAAG;CAE/B,IAAI,SAAS,WAAW,GACtB,OAAO,KAAK,MAAM,GAAG,KAAK,EAAE,YAAY;CAG1C,OAAO,SACJ,KAAK,SAAS,KAAK,EAAE,EACrB,MAAM,GAAG,KAAK,EACd,KAAK,EAAE,EACP,YAAY;AACjB"}
+{"version":3,"file":"get-initials.mjs","names":[],"sources":["../../../../src/components/Avatar/get-initials/get-initials.ts"],"sourcesContent":["export function getInitials(name: string, limit = 2) {\n  const splitted = name.split(' ');\n\n  if (splitted.length === 1) {\n    return name.slice(0, limit).toUpperCase();\n  }\n\n  return splitted\n    .map((word) => word[0])\n    .slice(0, limit)\n    .join('')\n    .toUpperCase();\n}\n"],"mappings":";;AAAA,SAAgB,YAAY,MAAc,QAAQ,GAAG;CACnD,MAAM,WAAW,KAAK,MAAM,GAAG;CAE/B,IAAI,SAAS,WAAW,GACtB,OAAO,KAAK,MAAM,GAAG,KAAK,CAAC,CAAC,YAAY;CAG1C,OAAO,SACJ,KAAK,SAAS,KAAK,EAAE,CAAC,CACtB,MAAM,GAAG,KAAK,CAAC,CACf,KAAK,EAAE,CAAC,CACR,YAAY;AACjB"}

package/esm/components/BackgroundImage/BackgroundImage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BackgroundImage.mjs","names":["classes"],"sources":["../../../src/components/BackgroundImage/BackgroundImage.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  getRadius,\n  MantineRadius,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './BackgroundImage.module.css';\n\nexport type BackgroundImageStylesNames = 'root';\nexport type BackgroundImageCssVariables = {\n  root: '--bi-radius';\n};\n\nexport interface BackgroundImageProps extends BoxProps, StylesApiProps<BackgroundImageFactory> {\n  /** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem @default 0 */\n  radius?: MantineRadius;\n\n  /** Image url */\n  src: string;\n}\n\nexport type BackgroundImageFactory = PolymorphicFactory<{\n  props: BackgroundImageProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: BackgroundImageStylesNames;\n  vars: BackgroundImageCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<BackgroundImageFactory>((_, { radius }) => ({\n  root: { '--bi-radius': radius === undefined ? undefined : getRadius(radius) },\n}));\n\nexport const BackgroundImage = polymorphicFactory<BackgroundImageFactory>((_props) => {\n  const props = useProps('BackgroundImage', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    radius,\n    src,\n    variant,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<BackgroundImageFactory>({\n    name: 'BackgroundImage',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box\n      variant={variant}\n      {...getStyles('root', { style: { backgroundImage: `url(${src})` } })}\n      {...others}\n    />\n  );\n});\n\nBackgroundImage.classes = classes;\nBackgroundImage.varsResolver = varsResolver;\nBackgroundImage.displayName = '@mantine/core/BackgroundImage';\n\nexport namespace BackgroundImage {\n  export type Props = BackgroundImageProps;\n  export type CssVariables = BackgroundImageCssVariables;\n  export type Factory = BackgroundImageFactory;\n  export type StylesNames = BackgroundImageStylesNames;\n}\n"],"mappings":";;;;;;;;;;AAmCA,MAAM,eAAe,oBAA4C,GAAG,EAAE,cAAc,EAClF,MAAM,EAAE,eAAe,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM,EAAE,EAC9E,EAAE;AAEF,MAAa,kBAAkB,oBAA4C,WAAW;CACpF,MAAM,QAAQ,SAAS,mBAAmB,MAAM,MAAM;CACtD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,KACA,SACA,YACA,GAAG,WACD;CAgBJ,OACE,oBAAC,KAAD;EACW;EACT,GAjBc,UAAkC;GAClD,MAAM;GACN;GACA,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAKgB,EAAE,QAAQ,EAAE,OAAO,EAAE,iBAAiB,OAAO,IAAI,GAAG,EAAE,CAAC;EACnE,GAAI;CACL,CAAA;AAEL,CAAC;AAED,gBAAgB,UAAUA;AAC1B,gBAAgB,eAAe;AAC/B,gBAAgB,cAAc"}
+{"version":3,"file":"BackgroundImage.mjs","names":["classes"],"sources":["../../../src/components/BackgroundImage/BackgroundImage.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  getRadius,\n  MantineRadius,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './BackgroundImage.module.css';\n\nexport type BackgroundImageStylesNames = 'root';\nexport type BackgroundImageCssVariables = {\n  root: '--bi-radius';\n};\n\nexport interface BackgroundImageProps extends BoxProps, StylesApiProps<BackgroundImageFactory> {\n  /** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem @default 0 */\n  radius?: MantineRadius;\n\n  /** Image url */\n  src: string;\n}\n\nexport type BackgroundImageFactory = PolymorphicFactory<{\n  props: BackgroundImageProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: BackgroundImageStylesNames;\n  vars: BackgroundImageCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<BackgroundImageFactory>((_, { radius }) => ({\n  root: { '--bi-radius': radius === undefined ? undefined : getRadius(radius) },\n}));\n\nexport const BackgroundImage = polymorphicFactory<BackgroundImageFactory>((_props) => {\n  const props = useProps('BackgroundImage', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    radius,\n    src,\n    variant,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<BackgroundImageFactory>({\n    name: 'BackgroundImage',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box\n      variant={variant}\n      {...getStyles('root', { style: { backgroundImage: `url(${src})` } })}\n      {...others}\n    />\n  );\n});\n\nBackgroundImage.classes = classes;\nBackgroundImage.varsResolver = varsResolver;\nBackgroundImage.displayName = '@mantine/core/BackgroundImage';\n\nexport namespace BackgroundImage {\n  export type Props = BackgroundImageProps;\n  export type CssVariables = BackgroundImageCssVariables;\n  export type Factory = BackgroundImageFactory;\n  export type StylesNames = BackgroundImageStylesNames;\n}\n"],"mappings":";;;;;;;;;;AAmCA,MAAM,eAAe,oBAA4C,GAAG,EAAE,cAAc,EAClF,MAAM,EAAE,eAAe,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM,EAAE,EAC9E,EAAE;AAEF,MAAa,kBAAkB,oBAA4C,WAAW;CACpF,MAAM,QAAQ,SAAS,mBAAmB,MAAM,MAAM;CACtD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,KACA,SACA,YACA,GAAG,WACD;CAgBJ,OACE,oBAAC,KAAD;EACW;EACT,GAjBc,UAAkC;GAClD,MAAM;GACN;GACA,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAKgB,CAAC,CAAC,QAAQ,EAAE,OAAO,EAAE,iBAAiB,OAAO,IAAI,GAAG,EAAE,CAAC;EACnE,GAAI;CACL,CAAA;AAEL,CAAC;AAED,gBAAgB,UAAUA;AAC1B,gBAAgB,eAAe;AAC/B,gBAAgB,cAAc"}

package/esm/components/Blockquote/Blockquote.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Blockquote.mjs","names":["classes"],"sources":["../../../src/components/Blockquote/Blockquote.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  parseThemeColor,\n  rem,\n  rgba,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Blockquote.module.css';\n\nexport type BlockquoteStylesNames = 'root' | 'icon' | 'cite';\nexport type BlockquoteCssVariables = {\n  root:\n    | '--bq-bg-light'\n    | '--bq-bg-dark'\n    | '--bq-bd'\n    | '--bq-icon-size'\n    | '--bq-radius'\n    | '--bq-text-wrap';\n};\n\nexport interface BlockquoteProps\n  extends BoxProps, StylesApiProps<BlockquoteFactory>, ElementProps<'blockquote', 'cite'> {\n  /** Blockquote icon, displayed at the top left side */\n  icon?: React.ReactNode;\n\n  /** Controls icon `width` and `height`, numbers are converted to rem @default 40 */\n  iconSize?: number | string;\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` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Reference to a cited quote */\n  cite?: React.ReactNode;\n\n  /** Controls `text-wrap` CSS property */\n  textWrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable';\n}\n\nexport type BlockquoteFactory = Factory<{\n  props: BlockquoteProps;\n  ref: HTMLQuoteElement;\n  stylesNames: BlockquoteStylesNames;\n  vars: BlockquoteCssVariables;\n}>;\n\nconst defaultProps = {\n  iconSize: 48,\n} satisfies Partial<BlockquoteProps>;\n\nconst varsResolver = createVarsResolver<BlockquoteFactory>(\n  (theme, { color, iconSize, radius, textWrap }) => {\n    const darkParsed = parseThemeColor({\n      color: color || theme.primaryColor,\n      theme,\n      colorScheme: 'dark',\n    });\n\n    const lightParsed = parseThemeColor({\n      color: color || theme.primaryColor,\n      theme,\n      colorScheme: 'light',\n    });\n\n    return {\n      root: {\n        '--bq-bg-light': rgba(lightParsed.value, 0.07),\n        '--bq-bg-dark': rgba(darkParsed.value, 0.06),\n        '--bq-bd': getThemeColor(color, theme),\n        '--bq-icon-size': rem(iconSize),\n        '--bq-radius': getRadius(radius),\n        '--bq-text-wrap': textWrap,\n      },\n    };\n  }\n);\n\nexport const Blockquote = factory<BlockquoteFactory>((_props) => {\n  const props = useProps('Blockquote', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    icon,\n    iconSize,\n    cite,\n    textWrap,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<BlockquoteFactory>({\n    name: 'Blockquote',\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    <Box component=\"blockquote\" {...getStyles('root')} {...others}>\n      {icon && <span {...getStyles('icon')}>{icon}</span>}\n      {children}\n      {cite && <cite {...getStyles('cite')}>{cite}</cite>}\n    </Box>\n  );\n});\n\nBlockquote.classes = classes;\nBlockquote.varsResolver = varsResolver;\nBlockquote.displayName = '@mantine/core/Blockquote';\n\nexport namespace Blockquote {\n  export type Props = BlockquoteProps;\n  export type StylesNames = BlockquoteStylesNames;\n  export type CssVariables = BlockquoteCssVariables;\n  export type Factory = BlockquoteFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;AA2DA,MAAM,eAAe,EACnB,UAAU,GACZ;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,OAAO,UAAU,QAAQ,eAAe;CAChD,MAAM,aAAa,gBAAgB;EACjC,OAAO,SAAS,MAAM;EACtB;EACA,aAAa;CACf,CAAC;CAQD,OAAO,EACL,MAAM;EACJ,iBAAiB,KARD,gBAAgB;GAClC,OAAO,SAAS,MAAM;GACtB;GACA,aAAa;EACf,CAIoC,EAAE,OAAO,GAAI;EAC7C,gBAAgB,KAAK,WAAW,OAAO,GAAI;EAC3C,WAAW,cAAc,OAAO,KAAK;EACrC,kBAAkB,IAAI,QAAQ;EAC9B,eAAe,UAAU,MAAM;EAC/B,kBAAkB;CACpB,EACF;AACF,CACF;AAEA,MAAa,aAAa,SAA4B,WAAW;CAC/D,MAAM,QAAQ,SAAS,cAAc,cAAc,MAAM;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,MACA,UACA,MACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA6B;EAC7C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,qBAAC,KAAD;EAAK,WAAU;EAAa,GAAI,UAAU,MAAM;EAAG,GAAI;YAAvD;GACG,QAAQ,oBAAC,QAAD;IAAM,GAAI,UAAU,MAAM;cAAI;GAAW,CAAA;GACjD;GACA,QAAQ,oBAAC,QAAD;IAAM,GAAI,UAAU,MAAM;cAAI;GAAW,CAAA;EAC/C;;AAET,CAAC;AAED,WAAW,UAAUA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}
+{"version":3,"file":"Blockquote.mjs","names":["classes"],"sources":["../../../src/components/Blockquote/Blockquote.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  parseThemeColor,\n  rem,\n  rgba,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Blockquote.module.css';\n\nexport type BlockquoteStylesNames = 'root' | 'icon' | 'cite';\nexport type BlockquoteCssVariables = {\n  root:\n    | '--bq-bg-light'\n    | '--bq-bg-dark'\n    | '--bq-bd'\n    | '--bq-icon-size'\n    | '--bq-radius'\n    | '--bq-text-wrap';\n};\n\nexport interface BlockquoteProps\n  extends BoxProps, StylesApiProps<BlockquoteFactory>, ElementProps<'blockquote', 'cite'> {\n  /** Blockquote icon, displayed at the top left side */\n  icon?: React.ReactNode;\n\n  /** Controls icon `width` and `height`, numbers are converted to rem @default 40 */\n  iconSize?: number | string;\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` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Reference to a cited quote */\n  cite?: React.ReactNode;\n\n  /** Controls `text-wrap` CSS property */\n  textWrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable';\n}\n\nexport type BlockquoteFactory = Factory<{\n  props: BlockquoteProps;\n  ref: HTMLQuoteElement;\n  stylesNames: BlockquoteStylesNames;\n  vars: BlockquoteCssVariables;\n}>;\n\nconst defaultProps = {\n  iconSize: 48,\n} satisfies Partial<BlockquoteProps>;\n\nconst varsResolver = createVarsResolver<BlockquoteFactory>(\n  (theme, { color, iconSize, radius, textWrap }) => {\n    const darkParsed = parseThemeColor({\n      color: color || theme.primaryColor,\n      theme,\n      colorScheme: 'dark',\n    });\n\n    const lightParsed = parseThemeColor({\n      color: color || theme.primaryColor,\n      theme,\n      colorScheme: 'light',\n    });\n\n    return {\n      root: {\n        '--bq-bg-light': rgba(lightParsed.value, 0.07),\n        '--bq-bg-dark': rgba(darkParsed.value, 0.06),\n        '--bq-bd': getThemeColor(color, theme),\n        '--bq-icon-size': rem(iconSize),\n        '--bq-radius': getRadius(radius),\n        '--bq-text-wrap': textWrap,\n      },\n    };\n  }\n);\n\nexport const Blockquote = factory<BlockquoteFactory>((_props) => {\n  const props = useProps('Blockquote', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    icon,\n    iconSize,\n    cite,\n    textWrap,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<BlockquoteFactory>({\n    name: 'Blockquote',\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    <Box component=\"blockquote\" {...getStyles('root')} {...others}>\n      {icon && <span {...getStyles('icon')}>{icon}</span>}\n      {children}\n      {cite && <cite {...getStyles('cite')}>{cite}</cite>}\n    </Box>\n  );\n});\n\nBlockquote.classes = classes;\nBlockquote.varsResolver = varsResolver;\nBlockquote.displayName = '@mantine/core/Blockquote';\n\nexport namespace Blockquote {\n  export type Props = BlockquoteProps;\n  export type StylesNames = BlockquoteStylesNames;\n  export type CssVariables = BlockquoteCssVariables;\n  export type Factory = BlockquoteFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;AA2DA,MAAM,eAAe,EACnB,UAAU,GACZ;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,OAAO,UAAU,QAAQ,eAAe;CAChD,MAAM,aAAa,gBAAgB;EACjC,OAAO,SAAS,MAAM;EACtB;EACA,aAAa;CACf,CAAC;CAQD,OAAO,EACL,MAAM;EACJ,iBAAiB,KARD,gBAAgB;GAClC,OAAO,SAAS,MAAM;GACtB;GACA,aAAa;EACf,CAIoC,CAAC,CAAC,OAAO,GAAI;EAC7C,gBAAgB,KAAK,WAAW,OAAO,GAAI;EAC3C,WAAW,cAAc,OAAO,KAAK;EACrC,kBAAkB,IAAI,QAAQ;EAC9B,eAAe,UAAU,MAAM;EAC/B,kBAAkB;CACpB,EACF;AACF,CACF;AAEA,MAAa,aAAa,SAA4B,WAAW;CAC/D,MAAM,QAAQ,SAAS,cAAc,cAAc,MAAM;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,MACA,UACA,MACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA6B;EAC7C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,qBAAC,KAAD;EAAK,WAAU;EAAa,GAAI,UAAU,MAAM;EAAG,GAAI;YAAvD;GACG,QAAQ,oBAAC,QAAD;IAAM,GAAI,UAAU,MAAM;cAAI;GAAW,CAAA;GACjD;GACA,QAAQ,oBAAC,QAAD;IAAM,GAAI,UAAU,MAAM;cAAI;GAAW,CAAA;EAC/C;;AAET,CAAC;AAED,WAAW,UAAUA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"Blockquote.module.mjs","names":[],"sources":["../../../src/components/Blockquote/Blockquote.module.css"],"sourcesContent":[".root {\n  --blockquote-border: 3px solid var(--bq-bd);\n\n  position: relative;\n  margin: 0;\n  text-wrap: var(--bq-text-wrap, var(--mantine-text-wrap, wrap));\n  border-inline-start: var(--blockquote-border);\n  border-start-end-radius: var(--bq-radius);\n  border-end-end-radius: var(--bq-radius);\n  padding: var(--mantine-spacing-xl) rem(38px);\n\n  @mixin where-light {\n    background-color: var(--bq-bg-light);\n  }\n\n  @mixin where-dark {\n    background-color: var(--bq-bg-dark);\n  }\n}\n\n.icon {\n  --blockquote-icon-offset: calc(var(--bq-icon-size) / -2);\n\n  position: absolute;\n  color: var(--bq-bd);\n  background-color: var(--mantine-color-body);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: var(--blockquote-icon-offset);\n  inset-inline-start: var(--blockquote-icon-offset);\n  width: var(--bq-icon-size);\n  height: var(--bq-icon-size);\n  border-radius: var(--bq-icon-size);\n}\n\n.cite {\n  display: block;\n  margin-top: var(--mantine-spacing-md);\n  opacity: 0.6;\n  font-size: 85%;\n}\n"],"mappings":""}
+{"version":3,"file":"Blockquote.module.mjs","names":[],"sources":["../../../src/components/Blockquote/Blockquote.module.css"],"sourcesContent":[".root {\n  --blockquote-border: 3px solid var(--bq-bd);\n\n  position: relative;\n  margin: 0;\n  text-wrap: var(--bq-text-wrap, var(--mantine-text-wrap));\n  border-inline-start: var(--blockquote-border);\n  border-start-end-radius: var(--bq-radius);\n  border-end-end-radius: var(--bq-radius);\n  padding: var(--mantine-spacing-xl) rem(38px);\n\n  @mixin where-light {\n    background-color: var(--bq-bg-light);\n  }\n\n  @mixin where-dark {\n    background-color: var(--bq-bg-dark);\n  }\n}\n\n.icon {\n  --blockquote-icon-offset: calc(var(--bq-icon-size) / -2);\n\n  position: absolute;\n  color: var(--bq-bd);\n  background-color: var(--mantine-color-body);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: var(--blockquote-icon-offset);\n  inset-inline-start: var(--blockquote-icon-offset);\n  width: var(--bq-icon-size);\n  height: var(--bq-icon-size);\n  border-radius: var(--bq-icon-size);\n}\n\n.cite {\n  display: block;\n  margin-top: var(--mantine-spacing-md);\n  opacity: 0.6;\n  font-size: 85%;\n}\n"],"mappings":""}

package/esm/components/Breadcrumbs/Breadcrumbs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.mjs","names":["classes"],"sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSpacing,\n  isElement,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Breadcrumbs.module.css';\n\nexport type BreadcrumbsStylesNames = 'root' | 'separator' | 'breadcrumb';\nexport type BreadcrumbsCssVariables = {\n  root: '--bc-separator-margin';\n};\n\nexport interface BreadcrumbsProps\n  extends BoxProps, StylesApiProps<BreadcrumbsFactory>, ElementProps<'div'> {\n  /** Separator between children @default '/' */\n  separator?: React.ReactNode;\n\n  /** Controls spacing between separator and breadcrumb @default 'xs' */\n  separatorMargin?: MantineSpacing;\n\n  /** React nodes that should be separated with `separator` */\n  children: React.ReactNode;\n}\n\nexport type BreadcrumbsFactory = Factory<{\n  props: BreadcrumbsProps;\n  ref: HTMLDivElement;\n  stylesNames: BreadcrumbsStylesNames;\n  vars: BreadcrumbsCssVariables;\n}>;\n\nconst defaultProps = {\n  separator: '/',\n} satisfies Partial<BreadcrumbsProps>;\n\nconst varsResolver = createVarsResolver<BreadcrumbsFactory>((_, { separatorMargin }) => ({\n  root: {\n    '--bc-separator-margin': getSpacing(separatorMargin),\n  },\n}));\n\nexport const Breadcrumbs = factory<BreadcrumbsFactory>((_props) => {\n  const props = useProps('Breadcrumbs', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    separator,\n    separatorMargin,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<BreadcrumbsFactory>({\n    name: 'Breadcrumbs',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const items = Children.toArray(children).reduce<React.ReactNode[]>((acc, child, index, array) => {\n    const item = isElement(child) ? (\n      cloneElement(child, {\n        ...getStyles('breadcrumb', { className: (child.props as any)?.className }),\n        key: index,\n      })\n    ) : (\n      <div {...getStyles('breadcrumb')} key={index}>\n        {child}\n      </div>\n    );\n\n    acc.push(item);\n\n    if (index !== array.length - 1) {\n      acc.push(\n        <Box {...getStyles('separator')} key={`separator-${index}`}>\n          {separator}\n        </Box>\n      );\n    }\n\n    return acc;\n  }, []);\n\n  return (\n    <Box {...getStyles('root')} {...others}>\n      {items}\n    </Box>\n  );\n});\n\nBreadcrumbs.classes = classes;\nBreadcrumbs.varsResolver = varsResolver;\nBreadcrumbs.displayName = '@mantine/core/Breadcrumbs';\n\nexport namespace Breadcrumbs {\n  export type Props = BreadcrumbsProps;\n  export type StylesNames = BreadcrumbsStylesNames;\n  export type CssVariables = BreadcrumbsCssVariables;\n  export type Factory = BreadcrumbsFactory;\n}\n"],"mappings":";;;;;;;;;;;;AAyCA,MAAM,eAAe,EACnB,WAAW,IACb;AAEA,MAAM,eAAe,oBAAwC,GAAG,EAAE,uBAAuB,EACvF,MAAM,EACJ,yBAAyB,WAAW,eAAe,EACrD,EACF,EAAE;AAEF,MAAa,cAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,WACA,iBACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA8B;EAC9C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,QAAQ,SAAS,QAAQ,QAAQ,EAAE,QAA2B,KAAK,OAAO,OAAO,UAAU;EAC/F,MAAM,OAAO,UAAU,KAAK,IAC1B,aAAa,OAAO;GAClB,GAAG,UAAU,cAAc,EAAE,WAAY,MAAM,OAAe,UAAU,CAAC;GACzE,KAAK;EACP,CAAC,IAED,8BAAC,OAAD;GAAK,GAAI,UAAU,YAAY;GAAG,KAAK;EAElC,GADF,KACE;EAGP,IAAI,KAAK,IAAI;EAEb,IAAI,UAAU,MAAM,SAAS,GAC3B,IAAI,KACF,8BAAC,KAAD;GAAK,GAAI,UAAU,WAAW;GAAG,KAAK,aAAa;EAE9C,GADF,SACE,CACP;EAGF,OAAO;CACT,GAAG,CAAC,CAAC;CAEL,OACE,oBAAC,KAAD;EAAK,GAAI,UAAU,MAAM;EAAG,GAAI;YAC7B;CACE,CAAA;AAET,CAAC;AAED,YAAY,UAAUA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}
+{"version":3,"file":"Breadcrumbs.mjs","names":["classes"],"sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSpacing,\n  isElement,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Breadcrumbs.module.css';\n\nexport type BreadcrumbsStylesNames = 'root' | 'separator' | 'breadcrumb';\nexport type BreadcrumbsCssVariables = {\n  root: '--bc-separator-margin';\n};\n\nexport interface BreadcrumbsProps\n  extends BoxProps, StylesApiProps<BreadcrumbsFactory>, ElementProps<'div'> {\n  /** Separator between children @default '/' */\n  separator?: React.ReactNode;\n\n  /** Controls spacing between separator and breadcrumb @default 'xs' */\n  separatorMargin?: MantineSpacing;\n\n  /** React nodes that should be separated with `separator` */\n  children: React.ReactNode;\n}\n\nexport type BreadcrumbsFactory = Factory<{\n  props: BreadcrumbsProps;\n  ref: HTMLDivElement;\n  stylesNames: BreadcrumbsStylesNames;\n  vars: BreadcrumbsCssVariables;\n}>;\n\nconst defaultProps = {\n  separator: '/',\n} satisfies Partial<BreadcrumbsProps>;\n\nconst varsResolver = createVarsResolver<BreadcrumbsFactory>((_, { separatorMargin }) => ({\n  root: {\n    '--bc-separator-margin': getSpacing(separatorMargin),\n  },\n}));\n\nexport const Breadcrumbs = factory<BreadcrumbsFactory>((_props) => {\n  const props = useProps('Breadcrumbs', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    separator,\n    separatorMargin,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<BreadcrumbsFactory>({\n    name: 'Breadcrumbs',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const items = Children.toArray(children).reduce<React.ReactNode[]>((acc, child, index, array) => {\n    const item = isElement(child) ? (\n      cloneElement(child, {\n        ...getStyles('breadcrumb', { className: (child.props as any)?.className }),\n        key: index,\n      })\n    ) : (\n      <div {...getStyles('breadcrumb')} key={index}>\n        {child}\n      </div>\n    );\n\n    acc.push(item);\n\n    if (index !== array.length - 1) {\n      acc.push(\n        <Box {...getStyles('separator')} key={`separator-${index}`}>\n          {separator}\n        </Box>\n      );\n    }\n\n    return acc;\n  }, []);\n\n  return (\n    <Box {...getStyles('root')} {...others}>\n      {items}\n    </Box>\n  );\n});\n\nBreadcrumbs.classes = classes;\nBreadcrumbs.varsResolver = varsResolver;\nBreadcrumbs.displayName = '@mantine/core/Breadcrumbs';\n\nexport namespace Breadcrumbs {\n  export type Props = BreadcrumbsProps;\n  export type StylesNames = BreadcrumbsStylesNames;\n  export type CssVariables = BreadcrumbsCssVariables;\n  export type Factory = BreadcrumbsFactory;\n}\n"],"mappings":";;;;;;;;;;;;AAyCA,MAAM,eAAe,EACnB,WAAW,IACb;AAEA,MAAM,eAAe,oBAAwC,GAAG,EAAE,uBAAuB,EACvF,MAAM,EACJ,yBAAyB,WAAW,eAAe,EACrD,EACF,EAAE;AAEF,MAAa,cAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,WACA,iBACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA8B;EAC9C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,QAAQ,SAAS,QAAQ,QAAQ,CAAC,CAAC,QAA2B,KAAK,OAAO,OAAO,UAAU;EAC/F,MAAM,OAAO,UAAU,KAAK,IAC1B,aAAa,OAAO;GAClB,GAAG,UAAU,cAAc,EAAE,WAAY,MAAM,OAAe,UAAU,CAAC;GACzE,KAAK;EACP,CAAC,IAED,8BAAC,OAAD;GAAK,GAAI,UAAU,YAAY;GAAG,KAAK;EAElC,GADF,KACE;EAGP,IAAI,KAAK,IAAI;EAEb,IAAI,UAAU,MAAM,SAAS,GAC3B,IAAI,KACF,8BAAC,KAAD;GAAK,GAAI,UAAU,WAAW;GAAG,KAAK,aAAa;EAE9C,GADF,SACE,CACP;EAGF,OAAO;CACT,GAAG,CAAC,CAAC;CAEL,OACE,oBAAC,KAAD;EAAK,GAAI,UAAU,MAAM;EAAG,GAAI;YAC7B;CACE,CAAA;AAET,CAAC;AAED,YAAY,UAAUA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}

package/esm/components/Button/ButtonGroup/ButtonGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.mjs","names":["classes"],"sources":["../../../../src/components/Button/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  factory,\n  Factory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport classes from '../Button.module.css';\n\nexport type ButtonGroupStylesNames = 'group';\nexport type ButtonGroupCssVariables = {\n  group: '--button-border-width';\n};\n\nexport interface ButtonGroupProps extends BoxProps, StylesApiProps<ButtonGroupFactory> {\n  /** `Button` components */\n  children?: React.ReactNode;\n\n  /** Orientation of the group @default horizontal */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** `border-width` of the child `Button` components. Numbers are converted to rem. @default 1 */\n  borderWidth?: number | string;\n}\n\nexport type ButtonGroupFactory = Factory<{\n  props: ButtonGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: ButtonGroupStylesNames;\n  vars: ButtonGroupCssVariables;\n}>;\n\nconst defaultProps = {\n  orientation: 'horizontal',\n} satisfies Partial<ButtonGroupProps>;\n\nconst varsResolver = createVarsResolver<ButtonGroupFactory>((_, { borderWidth }) => ({\n  group: { '--button-border-width': rem(borderWidth) },\n}));\n\nexport const ButtonGroup = factory<ButtonGroupFactory>((_props) => {\n  const props = useProps('ButtonGroup', defaultProps, _props);\n  const {\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    orientation,\n    vars,\n    borderWidth,\n    mod,\n    attributes,\n    ...others\n  } = useProps('ButtonGroup', defaultProps, _props);\n\n  const getStyles = useStyles<ButtonGroupFactory>({\n    name: 'ButtonGroup',\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      mod={[{ 'data-orientation': orientation }, mod]}\n      role=\"group\"\n      {...others}\n    />\n  );\n});\n\nButtonGroup.classes = classes;\nButtonGroup.varsResolver = varsResolver;\nButtonGroup.displayName = '@mantine/core/ButtonGroup';\n"],"mappings":";;;;;;;;;;AAoCA,MAAM,eAAe,EACnB,aAAa,aACf;AAEA,MAAM,eAAe,oBAAwC,GAAG,EAAE,mBAAmB,EACnF,OAAO,EAAE,yBAAyB,IAAI,WAAW,EAAE,EACrD,EAAE;AAEF,MAAa,cAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,WACA,OACA,YACA,QACA,UACA,aACA,MACA,aACA,KACA,YACA,GAAG,WACD,SAAS,eAAe,cAAc,MAAM;CAiBhD,OACE,oBAAC,KAAD;EACE,GAjBc,UAA8B;GAC9C,MAAM;GACN;GACA,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,cAAc;EAChB,CAIgB,EAAE,OAAO;EACrB,KAAK,CAAC,EAAE,oBAAoB,YAAY,GAAG,GAAG;EAC9C,MAAK;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,YAAY,UAAUA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}
+{"version":3,"file":"ButtonGroup.mjs","names":["classes"],"sources":["../../../../src/components/Button/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  factory,\n  Factory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport classes from '../Button.module.css';\n\nexport type ButtonGroupStylesNames = 'group';\nexport type ButtonGroupCssVariables = {\n  group: '--button-border-width';\n};\n\nexport interface ButtonGroupProps extends BoxProps, StylesApiProps<ButtonGroupFactory> {\n  /** `Button` components */\n  children?: React.ReactNode;\n\n  /** Orientation of the group @default horizontal */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** `border-width` of the child `Button` components. Numbers are converted to rem. @default 1 */\n  borderWidth?: number | string;\n}\n\nexport type ButtonGroupFactory = Factory<{\n  props: ButtonGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: ButtonGroupStylesNames;\n  vars: ButtonGroupCssVariables;\n}>;\n\nconst defaultProps = {\n  orientation: 'horizontal',\n} satisfies Partial<ButtonGroupProps>;\n\nconst varsResolver = createVarsResolver<ButtonGroupFactory>((_, { borderWidth }) => ({\n  group: { '--button-border-width': rem(borderWidth) },\n}));\n\nexport const ButtonGroup = factory<ButtonGroupFactory>((_props) => {\n  const props = useProps('ButtonGroup', defaultProps, _props);\n  const {\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    orientation,\n    vars,\n    borderWidth,\n    mod,\n    attributes,\n    ...others\n  } = useProps('ButtonGroup', defaultProps, _props);\n\n  const getStyles = useStyles<ButtonGroupFactory>({\n    name: 'ButtonGroup',\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      mod={[{ 'data-orientation': orientation }, mod]}\n      role=\"group\"\n      {...others}\n    />\n  );\n});\n\nButtonGroup.classes = classes;\nButtonGroup.varsResolver = varsResolver;\nButtonGroup.displayName = '@mantine/core/ButtonGroup';\n"],"mappings":";;;;;;;;;;AAoCA,MAAM,eAAe,EACnB,aAAa,aACf;AAEA,MAAM,eAAe,oBAAwC,GAAG,EAAE,mBAAmB,EACnF,OAAO,EAAE,yBAAyB,IAAI,WAAW,EAAE,EACrD,EAAE;AAEF,MAAa,cAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,WACA,OACA,YACA,QACA,UACA,aACA,MACA,aACA,KACA,YACA,GAAG,WACD,SAAS,eAAe,cAAc,MAAM;CAiBhD,OACE,oBAAC,KAAD;EACE,GAjBc,UAA8B;GAC9C,MAAM;GACN;GACA,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,cAAc;EAChB,CAIgB,CAAC,CAAC,OAAO;EACrB,KAAK,CAAC,EAAE,oBAAoB,YAAY,GAAG,GAAG;EAC9C,MAAK;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,YAAY,UAAUA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}

package/esm/components/Button/ButtonGroupSection/ButtonGroupSection.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroupSection.mjs","names":["classes"],"sources":["../../../../src/components/Button/ButtonGroupSection/ButtonGroupSection.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  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport type { ButtonSize, ButtonVariant } from '../Button';\nimport classes from '../Button.module.css';\n\nexport type ButtonGroupSectionStylesNames = 'groupSection';\nexport type ButtonGroupSectionCssVariables = {\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 ButtonGroupSectionProps\n  extends BoxProps, StylesApiProps<ButtonGroupSectionFactory>, 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 configuration used when `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?: ButtonSize;\n}\n\nexport type ButtonGroupSectionFactory = Factory<{\n  props: ButtonGroupSectionProps;\n  ref: HTMLDivElement;\n  stylesNames: ButtonGroupSectionStylesNames;\n  vars: ButtonGroupSectionCssVariables;\n  variant: ButtonVariant;\n}>;\n\nconst varsResolver = createVarsResolver<ButtonGroupSectionFactory>(\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': size?.includes('compact')\n          ? getFontSize(size.replace('compact-', ''))\n          : 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 ButtonGroupSection = factory<ButtonGroupSectionFactory>((_props) => {\n  const props = useProps('ButtonGroupSection', null, _props);\n  const {\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    gradient,\n    radius,\n    autoContrast,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ButtonGroupSectionFactory>({\n    name: 'ButtonGroupSection',\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')} {...others} />;\n});\n\nButtonGroupSection.classes = classes;\nButtonGroupSection.varsResolver = varsResolver;\nButtonGroupSection.displayName = '@mantine/core/ButtonGroupSection';\n"],"mappings":";;;;;;;;;;AAsDA,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,MAAM,SAAS,SAAS,IACpC,YAAY,KAAK,QAAQ,YAAY,EAAE,CAAC,IACxC,YAAY,IAAI;EACpB,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,qBAAqB,SAAoC,WAAW;CAC/E,MAAM,QAAQ,SAAS,sBAAsB,MAAM,MAAM;CACzD,MAAM,EACJ,WACA,OACA,YACA,QACA,UACA,MACA,UACA,QACA,cACA,YACA,GAAG,WACD;CAiBJ,OAAO,oBAAC,KAAD;EAAK,GAfM,UAAqC;GACrD,MAAM;GACN;GACA,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,cAAc;EAChB,CAEwB,EAAE,cAAc;EAAG,GAAI;CAAS,CAAA;AAC1D,CAAC;AAED,mBAAmB,UAAUA;AAC7B,mBAAmB,eAAe;AAClC,mBAAmB,cAAc"}
+{"version":3,"file":"ButtonGroupSection.mjs","names":["classes"],"sources":["../../../../src/components/Button/ButtonGroupSection/ButtonGroupSection.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  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport type { ButtonSize, ButtonVariant } from '../Button';\nimport classes from '../Button.module.css';\n\nexport type ButtonGroupSectionStylesNames = 'groupSection';\nexport type ButtonGroupSectionCssVariables = {\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 ButtonGroupSectionProps\n  extends BoxProps, StylesApiProps<ButtonGroupSectionFactory>, 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 configuration used when `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?: ButtonSize;\n}\n\nexport type ButtonGroupSectionFactory = Factory<{\n  props: ButtonGroupSectionProps;\n  ref: HTMLDivElement;\n  stylesNames: ButtonGroupSectionStylesNames;\n  vars: ButtonGroupSectionCssVariables;\n  variant: ButtonVariant;\n}>;\n\nconst varsResolver = createVarsResolver<ButtonGroupSectionFactory>(\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': size?.includes('compact')\n          ? getFontSize(size.replace('compact-', ''))\n          : 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 ButtonGroupSection = factory<ButtonGroupSectionFactory>((_props) => {\n  const props = useProps('ButtonGroupSection', null, _props);\n  const {\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    gradient,\n    radius,\n    autoContrast,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ButtonGroupSectionFactory>({\n    name: 'ButtonGroupSection',\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')} {...others} />;\n});\n\nButtonGroupSection.classes = classes;\nButtonGroupSection.varsResolver = varsResolver;\nButtonGroupSection.displayName = '@mantine/core/ButtonGroupSection';\n"],"mappings":";;;;;;;;;;AAsDA,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,MAAM,SAAS,SAAS,IACpC,YAAY,KAAK,QAAQ,YAAY,EAAE,CAAC,IACxC,YAAY,IAAI;EACpB,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,qBAAqB,SAAoC,WAAW;CAC/E,MAAM,QAAQ,SAAS,sBAAsB,MAAM,MAAM;CACzD,MAAM,EACJ,WACA,OACA,YACA,QACA,UACA,MACA,UACA,QACA,cACA,YACA,GAAG,WACD;CAiBJ,OAAO,oBAAC,KAAD;EAAK,GAfM,UAAqC;GACrD,MAAM;GACN;GACA,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,cAAc;EAChB,CAEwB,CAAC,CAAC,cAAc;EAAG,GAAI;CAAS,CAAA;AAC1D,CAAC;AAED,mBAAmB,UAAUA;AAC7B,mBAAmB,eAAe;AAClC,mBAAmB,cAAc"}

package/esm/components/Checkbox/Checkbox.mjs

@@ -73,6 +73,7 @@ const Checkbox = factory((_props) => {
 	const withContextProps = {
 		checked: ctx?.value.includes(rest.value) ?? checked,
 		onChange: (event) => {
+			if (readOnly) return;
 			ctx?.onChange(event);
 			onChange?.(event);
 		}
@@ -130,7 +131,7 @@ const Checkbox = factory((_props) => {
 				inert: rest.inert,
 				type: "checkbox",
 				onClick: (event) => {
-					if (readOnly) event.preventDefault();
+					if (readOnly && withContextProps.checked === void 0) event.preventDefault();
 					onClick?.(event);
 				}
 			}), /* @__PURE__ */ jsx(Icon, {

package/esm/components/Checkbox/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":["useId","classes"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { use, useEffect, useRef } from 'react';\nimport { useId, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n  CheckboxCard,\n  type CheckboxCardProps,\n  type CheckboxCardStylesNames,\n  type CheckboxCardCssVariables,\n  type CheckboxCardFactory,\n} from './CheckboxCard/CheckboxCard';\nimport {\n  CheckboxGroup,\n  CheckboxGroupContext,\n  type CheckboxGroupProps,\n  type CheckboxGroupStylesNames,\n  type CheckboxGroupFactory,\n} from './CheckboxGroup/CheckboxGroup';\nimport {\n  CheckboxIndicator,\n  type CheckboxIndicatorProps,\n  type CheckboxIndicatorStylesNames,\n  type CheckboxIndicatorCssVariables,\n  type CheckboxIndicatorFactory,\n  type CheckboxIndicatorVariant,\n} from './CheckboxIndicator/CheckboxIndicator';\nimport { CheckboxIcon } from './CheckIcon';\nimport classes from './Checkbox.module.css';\nexport type CheckboxVariant = 'filled' | 'outline';\nexport type CheckboxStylesNames = 'icon' | 'inner' | 'input' | InlineInputStylesNames;\nexport type CheckboxCssVariables = {\n  root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport type CheckboxIconComponent = React.FC<{\n  indeterminate: boolean | undefined;\n  className: string;\n}>;\n\nexport interface CheckboxProps\n  extends BoxProps, StylesApiProps<CheckboxFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Unique input id */\n  id?: string;\n\n  /** `label` associated with the checkbox */\n  label?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description below the label */\n  description?: React.ReactNode;\n\n  /** Error message below the label */\n  error?: React.ReactNode;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is dismissed. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Root element ref */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`. */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** If set, applies error styles to the checkbox when `error` prop is set @default true */\n  withErrorStyles?: boolean;\n}\n\nexport type CheckboxFactory = Factory<{\n  props: CheckboxProps;\n  ref: HTMLInputElement;\n  stylesNames: CheckboxStylesNames;\n  vars: CheckboxCssVariables;\n  variant: CheckboxVariant;\n  staticComponents: {\n    Group: typeof CheckboxGroup;\n    Indicator: typeof CheckboxIndicator;\n    Card: typeof CheckboxCard;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  icon: CheckboxIcon,\n  withErrorStyles: true,\n  variant: 'filled',\n  radius: 'sm',\n} satisfies Partial<CheckboxProps>;\n\nconst varsResolver = createVarsResolver<CheckboxFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      root: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const Checkbox = factory<CheckboxFactory>((_props) => {\n  const props = useProps('Checkbox', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    label,\n    id,\n    size,\n    radius,\n    wrapperProps,\n    checked,\n    labelPosition,\n    description,\n    error,\n    disabled,\n    variant,\n    indeterminate,\n    icon: Icon,\n    rootRef,\n    iconColor,\n    onChange,\n    autoContrast,\n    mod,\n    attributes,\n    readOnly,\n    onClick,\n    withErrorStyles,\n    ref,\n    ...others\n  } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const ctx = use(CheckboxGroupContext);\n  const _size = size || ctx?.size;\n\n  const getStyles = useStyles<CheckboxFactory>({\n    name: 'Checkbox',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n  const descriptionId = description ? `${uuid}-description` : undefined;\n  const errorId = error && typeof error !== 'boolean' ? `${uuid}-error` : undefined;\n  const describedBy =\n    [descriptionId, errorId, rest['aria-describedby']].filter(Boolean).join(' ') || undefined;\n\n  const withContextProps = {\n    checked: ctx?.value.includes(rest.value as string) ?? checked,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n  };\n\n  const isDisabledByGroup = ctx?.isDisabled?.(rest.value as string) ?? false;\n  const finalDisabled = disabled || isDisabledByGroup;\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate || false;\n\n      if (indeterminate) {\n        inputRef.current.setAttribute('data-indeterminate', 'true');\n      } else {\n        inputRef.current.removeAttribute('data-indeterminate');\n      }\n    }\n  }, [indeterminate]);\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Checkbox\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={_size}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={finalDisabled}\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={withContextProps.checked || checked || undefined}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      inert={rest.inert}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Box {...getStyles('inner')} mod={{ 'data-label-position': labelPosition }}>\n        <Box\n          component=\"input\"\n          id={uuid}\n          ref={useMergedRef(inputRef, ref)}\n          mod={{ error: !!error, 'with-error-styles': withErrorStyles }}\n          {...getStyles('input', { focusable: true, variant })}\n          {...rest}\n          {...withContextProps}\n          aria-describedby={describedBy}\n          disabled={finalDisabled}\n          inert={rest.inert}\n          type=\"checkbox\"\n          onClick={(event) => {\n            if (readOnly) {\n              event.preventDefault();\n            }\n\n            onClick?.(event);\n          }}\n        />\n\n        <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n      </Box>\n    </InlineInput>\n  );\n});\n\nCheckbox.classes = { ...classes, ...InlineInputClasses };\nCheckbox.varsResolver = varsResolver;\nCheckbox.displayName = '@mantine/core/Checkbox';\nCheckbox.Group = CheckboxGroup;\nCheckbox.Indicator = CheckboxIndicator;\nCheckbox.Card = CheckboxCard;\n\nexport namespace Checkbox {\n  export type Props = CheckboxProps;\n  export type StylesNames = CheckboxStylesNames;\n  export type CssVariables = CheckboxCssVariables;\n  export type Factory = CheckboxFactory;\n  export type Variant = CheckboxVariant;\n  export type IconComponent = CheckboxIconComponent;\n\n  export namespace Group {\n    export type Props = CheckboxGroupProps;\n    export type StylesNames = CheckboxGroupStylesNames;\n    export type Factory = CheckboxGroupFactory;\n  }\n\n  export namespace Indicator {\n    export type Props = CheckboxIndicatorProps;\n    export type StylesNames = CheckboxIndicatorStylesNames;\n    export type CssVariables = CheckboxIndicatorCssVariables;\n    export type Factory = CheckboxIndicatorFactory;\n    export type Variant = CheckboxIndicatorVariant;\n  }\n\n  export namespace Card {\n    export type Props = CheckboxCardProps;\n    export type StylesNames = CheckboxCardStylesNames;\n    export type CssVariables = CheckboxCardCssVariables;\n    export type Factory = CheckboxCardFactory;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.mjs","names":["useId","classes"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { use, useEffect, useRef } from 'react';\nimport { useId, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n  CheckboxCard,\n  type CheckboxCardProps,\n  type CheckboxCardStylesNames,\n  type CheckboxCardCssVariables,\n  type CheckboxCardFactory,\n} from './CheckboxCard/CheckboxCard';\nimport {\n  CheckboxGroup,\n  CheckboxGroupContext,\n  type CheckboxGroupProps,\n  type CheckboxGroupStylesNames,\n  type CheckboxGroupFactory,\n} from './CheckboxGroup/CheckboxGroup';\nimport {\n  CheckboxIndicator,\n  type CheckboxIndicatorProps,\n  type CheckboxIndicatorStylesNames,\n  type CheckboxIndicatorCssVariables,\n  type CheckboxIndicatorFactory,\n  type CheckboxIndicatorVariant,\n} from './CheckboxIndicator/CheckboxIndicator';\nimport { CheckboxIcon } from './CheckIcon';\nimport classes from './Checkbox.module.css';\nexport type CheckboxVariant = 'filled' | 'outline';\nexport type CheckboxStylesNames = 'icon' | 'inner' | 'input' | InlineInputStylesNames;\nexport type CheckboxCssVariables = {\n  root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport type CheckboxIconComponent = React.FC<{\n  indeterminate: boolean | undefined;\n  className: string;\n}>;\n\nexport interface CheckboxProps\n  extends BoxProps, StylesApiProps<CheckboxFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Unique input id */\n  id?: string;\n\n  /** `label` associated with the checkbox */\n  label?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description below the label */\n  description?: React.ReactNode;\n\n  /** Error message below the label */\n  error?: React.ReactNode;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is dismissed. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Root element ref */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`. */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** If set, applies error styles to the checkbox when `error` prop is set @default true */\n  withErrorStyles?: boolean;\n}\n\nexport type CheckboxFactory = Factory<{\n  props: CheckboxProps;\n  ref: HTMLInputElement;\n  stylesNames: CheckboxStylesNames;\n  vars: CheckboxCssVariables;\n  variant: CheckboxVariant;\n  staticComponents: {\n    Group: typeof CheckboxGroup;\n    Indicator: typeof CheckboxIndicator;\n    Card: typeof CheckboxCard;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  icon: CheckboxIcon,\n  withErrorStyles: true,\n  variant: 'filled',\n  radius: 'sm',\n} satisfies Partial<CheckboxProps>;\n\nconst varsResolver = createVarsResolver<CheckboxFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      root: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const Checkbox = factory<CheckboxFactory>((_props) => {\n  const props = useProps('Checkbox', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    label,\n    id,\n    size,\n    radius,\n    wrapperProps,\n    checked,\n    labelPosition,\n    description,\n    error,\n    disabled,\n    variant,\n    indeterminate,\n    icon: Icon,\n    rootRef,\n    iconColor,\n    onChange,\n    autoContrast,\n    mod,\n    attributes,\n    readOnly,\n    onClick,\n    withErrorStyles,\n    ref,\n    ...others\n  } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const ctx = use(CheckboxGroupContext);\n  const _size = size || ctx?.size;\n\n  const getStyles = useStyles<CheckboxFactory>({\n    name: 'Checkbox',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n  const descriptionId = description ? `${uuid}-description` : undefined;\n  const errorId = error && typeof error !== 'boolean' ? `${uuid}-error` : undefined;\n  const describedBy =\n    [descriptionId, errorId, rest['aria-describedby']].filter(Boolean).join(' ') || undefined;\n\n  const withContextProps = {\n    checked: ctx?.value.includes(rest.value as string) ?? checked,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n  };\n\n  const isDisabledByGroup = ctx?.isDisabled?.(rest.value as string) ?? false;\n  const finalDisabled = disabled || isDisabledByGroup;\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate || false;\n\n      if (indeterminate) {\n        inputRef.current.setAttribute('data-indeterminate', 'true');\n      } else {\n        inputRef.current.removeAttribute('data-indeterminate');\n      }\n    }\n  }, [indeterminate]);\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Checkbox\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={_size}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={finalDisabled}\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={withContextProps.checked || checked || undefined}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      inert={rest.inert}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Box {...getStyles('inner')} mod={{ 'data-label-position': labelPosition }}>\n        <Box\n          component=\"input\"\n          id={uuid}\n          ref={useMergedRef(inputRef, ref)}\n          mod={{ error: !!error, 'with-error-styles': withErrorStyles }}\n          {...getStyles('input', { focusable: true, variant })}\n          {...rest}\n          {...withContextProps}\n          aria-describedby={describedBy}\n          disabled={finalDisabled}\n          inert={rest.inert}\n          type=\"checkbox\"\n          onClick={(event) => {\n            if (readOnly && withContextProps.checked === undefined) {\n              event.preventDefault();\n            }\n\n            onClick?.(event);\n          }}\n        />\n\n        <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n      </Box>\n    </InlineInput>\n  );\n});\n\nCheckbox.classes = { ...classes, ...InlineInputClasses };\nCheckbox.varsResolver = varsResolver;\nCheckbox.displayName = '@mantine/core/Checkbox';\nCheckbox.Group = CheckboxGroup;\nCheckbox.Indicator = CheckboxIndicator;\nCheckbox.Card = CheckboxCard;\n\nexport namespace Checkbox {\n  export type Props = CheckboxProps;\n  export type StylesNames = CheckboxStylesNames;\n  export type CssVariables = CheckboxCssVariables;\n  export type Factory = CheckboxFactory;\n  export type Variant = CheckboxVariant;\n  export type IconComponent = CheckboxIconComponent;\n\n  export namespace Group {\n    export type Props = CheckboxGroupProps;\n    export type StylesNames = CheckboxGroupStylesNames;\n    export type Factory = CheckboxGroupFactory;\n  }\n\n  export namespace Indicator {\n    export type Props = CheckboxIndicatorProps;\n    export type StylesNames = CheckboxIndicatorStylesNames;\n    export type CssVariables = CheckboxIndicatorCssVariables;\n    export type Factory = CheckboxIndicatorFactory;\n    export type Variant = CheckboxIndicatorVariant;\n  }\n\n  export namespace Card {\n    export type Props = CheckboxCardProps;\n    export type StylesNames = CheckboxCardStylesNames;\n    export type CssVariables = CheckboxCardCssVariables;\n    export type Factory = CheckboxCardFactory;\n  }\n}\n"],"mappings":"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"}

package/esm/components/Collapse/Collapse.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.mjs","names":[],"sources":["../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport { useCollapse, useHorizontalCollapse, useReducedMotion } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  Factory,\n  factory,\n  getStyleObject,\n  useMantineEnv,\n  useMantineTheme,\n  useProps,\n} from '../../core';\n\nexport interface CollapseProps extends BoxProps, Omit<React.ComponentProps<'div'>, keyof BoxProps> {\n  /** Collapse orientation @default 'vertical' */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** Expanded state */\n  expanded: boolean;\n\n  /** Called when the transition ends */\n  onTransitionEnd?: () => void;\n\n  /** Called when transition starts */\n  onTransitionStart?: () => void;\n\n  /** Transition duration in ms @default 200 */\n  transitionDuration?: number;\n\n  /** Transition timing function @default ease */\n  transitionTimingFunction?: string;\n\n  /** Determines whether the opacity is animated @default true */\n  animateOpacity?: boolean;\n\n  /** If set, the element is kept in the DOM when collapsed. When `true`, React 19 `Activity` is used to preserve state while collapsed. When `false`, the element is unmounted after the exit animation. @default true */\n  keepMounted?: boolean;\n}\n\nexport type CollapseFactory = Factory<{\n  props: CollapseProps;\n  ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n  animateOpacity: true,\n  orientation: 'vertical',\n  keepMounted: true,\n} satisfies Partial<CollapseProps>;\n\nexport const Collapse = factory<CollapseFactory>((props) => {\n  const {\n    children,\n    expanded,\n    transitionDuration,\n    transitionTimingFunction,\n    style,\n    onTransitionEnd,\n    onTransitionStart,\n    animateOpacity,\n    keepMounted,\n    ref,\n    orientation,\n    ...others\n  } = useProps('Collapse', defaultProps, props);\n\n  const env = useMantineEnv();\n  const theme = useMantineTheme();\n  const shouldReduceMotion = useReducedMotion();\n  const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n  const duration = reduceMotion ? 0 : transitionDuration;\n  const hook = orientation === 'horizontal' ? useHorizontalCollapse : useCollapse;\n\n  const collapse = hook({\n    expanded,\n    transitionDuration: duration,\n    transitionTimingFunction,\n    onTransitionEnd,\n    onTransitionStart,\n    keepMounted: false,\n  });\n\n  if (duration === 0) {\n    if (keepMounted === true && env !== 'test') {\n      return (\n        <Activity mode={expanded ? 'visible' : 'hidden'}>\n          <Box {...others}>{children}</Box>\n        </Activity>\n      );\n    }\n    return expanded ? <Box {...others}>{children}</Box> : null;\n  }\n\n  const isExited = collapse.state === 'exited';\n\n  let content: React.ReactNode;\n  if (keepMounted === false) {\n    content = isExited ? null : children;\n  } else if (keepMounted === true) {\n    content = <Activity mode={isExited ? 'hidden' : 'visible'}>{children}</Activity>;\n  } else {\n    content = children;\n  }\n\n  return (\n    <Box\n      {...others}\n      {...collapse.getCollapseProps({\n        style: {\n          opacity: expanded || !animateOpacity ? 1 : 0,\n          transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : 'none',\n          ...getStyleObject(style, theme),\n        },\n        ref,\n      })}\n    >\n      {content}\n    </Box>\n  );\n});\n\nCollapse.displayName = '@mantine/core/Collapse';\n\nexport namespace Collapse {\n  export type Props = CollapseProps;\n  export type Factory = CollapseFactory;\n}\n"],"mappings":";;;;;;;;;;;AA4CA,MAAM,eAAe;CACnB,oBAAoB;CACpB,0BAA0B;CAC1B,gBAAgB;CAChB,aAAa;CACb,aAAa;AACf;AAEA,MAAa,WAAW,SAA0B,UAAU;CAC1D,MAAM,EACJ,UACA,UACA,oBACA,0BACA,OACA,iBACA,mBACA,gBACA,aACA,KACA,aACA,GAAG,WACD,SAAS,YAAY,cAAc,KAAK;CAE5C,MAAM,MAAM,cAAc;CAC1B,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,qBAAqB,iBAAiB;CAE5C,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SACvC,IAAI;CAGpC,MAAM,YAFO,gBAAgB,eAAe,wBAAwB,aAE9C;EACpB;EACA,oBAAoB;EACpB;EACA;EACA;EACA,aAAa;CACf,CAAC;CAED,IAAI,aAAa,GAAG;EAClB,IAAI,gBAAgB,QAAQ,QAAQ,QAClC,OACE,oBAAC,UAAD;GAAU,MAAM,WAAW,YAAY;aACrC,oBAAC,KAAD;IAAK,GAAI;IAAS;GAAc,CAAA;EACxB,CAAA;EAGd,OAAO,WAAW,oBAAC,KAAD;GAAK,GAAI;GAAS;EAAc,CAAA,IAAI;CACxD;CAEA,MAAM,WAAW,SAAS,UAAU;CAEpC,IAAI;CACJ,IAAI,gBAAgB,OAClB,UAAU,WAAW,OAAO;MACvB,IAAI,gBAAgB,MACzB,UAAU,oBAAC,UAAD;EAAU,MAAM,WAAW,WAAW;EAAY;CAAmB,CAAA;MAE/E,UAAU;CAGZ,OACE,oBAAC,KAAD;EACE,GAAI;EACJ,GAAI,SAAS,iBAAiB;GAC5B,OAAO;IACL,SAAS,YAAY,CAAC,iBAAiB,IAAI;IAC3C,YAAY,iBAAiB,WAAW,SAAS,KAAK,6BAA6B;IACnF,GAAG,eAAe,OAAO,KAAK;GAChC;GACA;EACF,CAAC;YAEA;CACE,CAAA;AAET,CAAC;AAED,SAAS,cAAc"}
+{"version":3,"file":"Collapse.mjs","names":[],"sources":["../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport { useCollapse, useHorizontalCollapse, useReducedMotion } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  Factory,\n  factory,\n  getStyleObject,\n  useMantineEnv,\n  useMantineTheme,\n  useProps,\n} from '../../core';\n\nexport interface CollapseProps extends BoxProps, Omit<React.ComponentProps<'div'>, keyof BoxProps> {\n  /** Collapse orientation @default 'vertical' */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** Expanded state */\n  expanded: boolean;\n\n  /** Called when the transition ends */\n  onTransitionEnd?: () => void;\n\n  /** Called when transition starts */\n  onTransitionStart?: () => void;\n\n  /** Transition duration in ms @default 200 */\n  transitionDuration?: number;\n\n  /** Transition timing function @default ease */\n  transitionTimingFunction?: string;\n\n  /** Determines whether the opacity is animated @default true */\n  animateOpacity?: boolean;\n\n  /** If set, the element is kept in the DOM when collapsed. When `true`, React 19 `Activity` is used to preserve state while collapsed. When `false`, the element is unmounted after the exit animation. @default true */\n  keepMounted?: boolean;\n}\n\nexport type CollapseFactory = Factory<{\n  props: CollapseProps;\n  ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n  animateOpacity: true,\n  orientation: 'vertical',\n  keepMounted: true,\n} satisfies Partial<CollapseProps>;\n\nexport const Collapse = factory<CollapseFactory>((props) => {\n  const {\n    children,\n    expanded,\n    transitionDuration,\n    transitionTimingFunction,\n    style,\n    onTransitionEnd,\n    onTransitionStart,\n    animateOpacity,\n    keepMounted,\n    ref,\n    orientation,\n    ...others\n  } = useProps('Collapse', defaultProps, props);\n\n  const env = useMantineEnv();\n  const theme = useMantineTheme();\n  const shouldReduceMotion = useReducedMotion();\n  const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n  const duration = reduceMotion ? 0 : transitionDuration;\n  const hook = orientation === 'horizontal' ? useHorizontalCollapse : useCollapse;\n\n  const collapse = hook({\n    expanded,\n    transitionDuration: duration,\n    transitionTimingFunction,\n    onTransitionEnd,\n    onTransitionStart,\n    keepMounted: false,\n  });\n\n  if (duration === 0) {\n    if (keepMounted === true && env !== 'test') {\n      return (\n        <Activity mode={expanded ? 'visible' : 'hidden'}>\n          <Box {...others}>{children}</Box>\n        </Activity>\n      );\n    }\n    return expanded ? <Box {...others}>{children}</Box> : null;\n  }\n\n  const isExited = collapse.state === 'exited';\n\n  let content: React.ReactNode;\n  if (keepMounted === false) {\n    content = isExited ? null : children;\n  } else if (keepMounted === true) {\n    content = <Activity mode={isExited ? 'hidden' : 'visible'}>{children}</Activity>;\n  } else {\n    content = children;\n  }\n\n  return (\n    <Box\n      {...others}\n      {...collapse.getCollapseProps({\n        style: {\n          opacity: expanded || !animateOpacity ? 1 : 0,\n          transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : 'none',\n          ...getStyleObject(style, theme),\n        },\n        ref,\n      })}\n    >\n      {content}\n    </Box>\n  );\n});\n\nCollapse.displayName = '@mantine/core/Collapse';\n\nexport namespace Collapse {\n  export type Props = CollapseProps;\n  export type Factory = CollapseFactory;\n}\n"],"mappings":";;;;;;;;;;;AA4CA,MAAM,eAAe;CACnB,oBAAoB;CACpB,0BAA0B;CAC1B,gBAAgB;CAChB,aAAa;CACb,aAAa;AACf;AAEA,MAAa,WAAW,SAA0B,UAAU;CAC1D,MAAM,EACJ,UACA,UACA,oBACA,0BACA,OACA,iBACA,mBACA,gBACA,aACA,KACA,aACA,GAAG,WACD,SAAS,YAAY,cAAc,KAAK;CAE5C,MAAM,MAAM,cAAc;CAC1B,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,qBAAqB,iBAAiB;CAE5C,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SACvC,IAAI;CAGpC,MAAM,YAFO,gBAAgB,eAAe,wBAAwB,YAAA,CAE9C;EACpB;EACA,oBAAoB;EACpB;EACA;EACA;EACA,aAAa;CACf,CAAC;CAED,IAAI,aAAa,GAAG;EAClB,IAAI,gBAAgB,QAAQ,QAAQ,QAClC,OACE,oBAAC,UAAD;GAAU,MAAM,WAAW,YAAY;aACrC,oBAAC,KAAD;IAAK,GAAI;IAAS;GAAc,CAAA;EACxB,CAAA;EAGd,OAAO,WAAW,oBAAC,KAAD;GAAK,GAAI;GAAS;EAAc,CAAA,IAAI;CACxD;CAEA,MAAM,WAAW,SAAS,UAAU;CAEpC,IAAI;CACJ,IAAI,gBAAgB,OAClB,UAAU,WAAW,OAAO;MACvB,IAAI,gBAAgB,MACzB,UAAU,oBAAC,UAAD;EAAU,MAAM,WAAW,WAAW;EAAY;CAAmB,CAAA;MAE/E,UAAU;CAGZ,OACE,oBAAC,KAAD;EACE,GAAI;EACJ,GAAI,SAAS,iBAAiB;GAC5B,OAAO;IACL,SAAS,YAAY,CAAC,iBAAiB,IAAI;IAC3C,YAAY,iBAAiB,WAAW,SAAS,KAAK,6BAA6B;IACnF,GAAG,eAAe,OAAO,KAAK;GAChC;GACA;EACF,CAAC;YAEA;CACE,CAAA;AAET,CAAC;AAED,SAAS,cAAc"}

package/esm/components/ColorInput/ColorInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.mjs","names":["classes"],"sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useDidUpdate, useEyeDropper, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport {\n  __ColorPickerProps,\n  ColorPicker,\n  ColorPickerStylesNames,\n  convertHsvaTo,\n  isColorValid,\n  parseColor,\n} from '../ColorPicker';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant, useInputProps } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Popover, PopoverProps } from '../Popover';\nimport { EyeDropperIcon } from './EyeDropperIcon';\nimport classes from './ColorInput.module.css';\n\nexport type ColorInputStylesNames =\n  | 'dropdown'\n  | 'eyeDropperButton'\n  | 'eyeDropperIcon'\n  | 'colorPreview'\n  | ColorPickerStylesNames\n  | __InputStylesNames;\n\nexport type ColorInputCssVariables = {\n  eyeDropperIcon: '--ci-eye-dropper-icon-size';\n  eyeDropperButton: '--ci-button-size';\n  colorPreview: '--ci-preview-size';\n};\n\nexport interface ColorInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    __ColorPickerProps,\n    StylesApiProps<ColorInputFactory>,\n    ElementProps<'input', 'size' | 'onChange' | 'value' | 'defaultValue'> {\n  /** If input is not allowed, the user can only pick value with color picker and swatches */\n  disallowInput?: boolean;\n\n  /** If set, the input value resets to the last known valid value when the input loses focus @default true */\n  fixOnBlur?: boolean;\n\n  /** Props passed down to the `Popover` component */\n  popoverProps?: PopoverProps;\n\n  /** If set, the preview color swatch is displayed in the left section of the input @default true */\n  withPreview?: boolean;\n\n  /** If set, the eye dropper button is displayed in the right section @default true */\n  withEyeDropper?: boolean;\n\n  /** An icon to replace the default eye dropper icon */\n  eyeDropperIcon?: React.ReactNode;\n\n  /** If set, the dropdown is closed when one of the color swatches is clicked @default false */\n  closeOnColorSwatchClick?: boolean;\n\n  /** Props passed down to the eye dropper button */\n  eyeDropperButtonProps?: Record<string, any>;\n}\n\nexport type ColorInputFactory = Factory<{\n  props: ColorInputProps;\n  ref: HTMLInputElement;\n  stylesNames: ColorInputStylesNames;\n  vars: ColorInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  format: 'hex',\n  fixOnBlur: true,\n  withPreview: true,\n  swatchesPerRow: 7,\n  withPicker: true,\n  popoverProps: { transitionProps: { transition: 'fade', duration: 0 } },\n  withEyeDropper: true,\n  size: 'sm',\n  leftSectionPointerEvents: 'none',\n} satisfies Partial<ColorInputProps>;\n\nconst varsResolver = createVarsResolver<ColorInputFactory>((_, { size }) => ({\n  eyeDropperIcon: {\n    '--ci-eye-dropper-icon-size': getSize(size, 'ci-eye-dropper-icon-size'),\n  },\n\n  eyeDropperButton: {\n    '--ci-button-size': getSize(size, 'ci-button-size'),\n  },\n\n  colorPreview: {\n    '--ci-preview-size': getSize(size, 'ci-preview-size'),\n  },\n}));\n\nexport const ColorInput = factory<ColorInputFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'ColorInput'], defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    disallowInput,\n    fixOnBlur,\n    popoverProps,\n    withPreview,\n    withEyeDropper,\n    eyeDropperIcon,\n    closeOnColorSwatchClick,\n    eyeDropperButtonProps,\n    value,\n    defaultValue,\n    onChange,\n    onChangeEnd,\n    onClick,\n    onFocus,\n    onBlur,\n    inputProps,\n    format = 'hex',\n    wrapperProps,\n    readOnly,\n    withPicker,\n    swatches,\n    disabled,\n    leftSection,\n    rightSection,\n    swatchesPerRow,\n    ...others\n  } = useInputProps('ColorInput', defaultProps, _props);\n\n  const getStyles = useStyles<ColorInputFactory>({\n    name: 'ColorInput',\n    props,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    rootSelector: 'wrapper',\n    vars: props.vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ColorInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [dropdownOpened, setDropdownOpened] = useState(false);\n  const [lastValidValue, setLastValidValue] = useState('');\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();\n\n  const eyeDropper = (\n    <ActionIcon\n      {...eyeDropperButtonProps}\n      {...getStyles('eyeDropperButton', {\n        className: eyeDropperButtonProps?.className,\n        style: eyeDropperButtonProps?.style,\n      })}\n      variant=\"subtle\"\n      color=\"gray\"\n      unstyled={unstyled}\n      onClick={() =>\n        openEyeDropper()\n          .then((payload) => {\n            if (payload?.sRGBHex) {\n              const color = convertHsvaTo(format, parseColor(payload.sRGBHex));\n              setValue(color);\n              onChangeEnd?.(color);\n            }\n          })\n          .catch(() => {})\n      }\n    >\n      {eyeDropperIcon || <EyeDropperIcon {...getStyles('eyeDropperIcon')} />}\n    </ActionIcon>\n  );\n\n  const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setDropdownOpened(true);\n  };\n\n  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    fixOnBlur && setValue(lastValidValue);\n    onBlur?.(event);\n    setDropdownOpened(false);\n  };\n\n  const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n    onClick?.(event);\n    setDropdownOpened(true);\n  };\n\n  useEffect(() => {\n    if (isColorValid(_value) || _value.trim() === '') {\n      setLastValidValue(_value);\n    }\n  }, [_value]);\n\n  useDidUpdate(() => {\n    if (isColorValid(_value)) {\n      setValue(convertHsvaTo(format, parseColor(_value)));\n    }\n  }, [format]);\n\n  return (\n    <Input.Wrapper\n      {...wrapperProps}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"ColorInput\"\n    >\n      <Popover\n        __staticSelector=\"ColorInput\"\n        position=\"bottom-start\"\n        offset={5}\n        opened={dropdownOpened}\n        {...popoverProps}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        withRoles={false}\n        disabled={\n          readOnly || (withPicker === false && (!Array.isArray(swatches) || swatches.length === 0))\n        }\n      >\n        <Popover.Target>\n          <Input<'input'>\n            autoComplete=\"off\"\n            {...others}\n            {...inputProps}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            disabled={disabled}\n            __staticSelector=\"ColorInput\"\n            onFocus={handleInputFocus}\n            onBlur={handleInputBlur}\n            onClick={handleInputClick}\n            spellCheck={false}\n            value={_value}\n            onChange={(event) => {\n              const inputValue = event.currentTarget.value;\n              setValue(inputValue);\n              if (isColorValid(inputValue)) {\n                onChangeEnd?.(convertHsvaTo(format, parseColor(inputValue)));\n              }\n            }}\n            leftSection={\n              leftSection ||\n              (withPreview ? (\n                <ColorSwatch\n                  color={isColorValid(_value) ? _value : '#fff'}\n                  size=\"var(--ci-preview-size)\"\n                  {...getStyles('colorPreview')}\n                />\n              ) : null)\n            }\n            readOnly={disallowInput || readOnly}\n            pointer={disallowInput}\n            unstyled={unstyled}\n            rightSection={\n              rightSection ||\n              (withEyeDropper && !disabled && !readOnly && eyeDropperSupported ? eyeDropper : null)\n            }\n          />\n        </Popover.Target>\n\n        <Popover.Dropdown\n          onMouseDown={(event) => event.preventDefault()}\n          className={classes.dropdown}\n        >\n          <ColorPicker\n            __staticSelector=\"ColorInput\"\n            value={_value}\n            onChange={setValue}\n            onChangeEnd={onChangeEnd}\n            format={format}\n            swatches={swatches}\n            swatchesPerRow={swatchesPerRow}\n            withPicker={withPicker}\n            size={inputProps.size}\n            focusable={false}\n            unstyled={unstyled}\n            styles={resolvedStyles}\n            classNames={resolvedClassNames}\n            onColorSwatchClick={() => closeOnColorSwatchClick && setDropdownOpened(false)}\n            attributes={wrapperProps.attributes}\n          />\n        </Popover.Dropdown>\n      </Popover>\n    </Input.Wrapper>\n  );\n});\n\nColorInput.classes = InputBase.classes;\nColorInput.varsResolver = varsResolver;\nColorInput.displayName = '@mantine/core/ColorInput';\n\nexport namespace ColorInput {\n  export type Props = ColorInputProps;\n  export type StylesNames = ColorInputStylesNames;\n  export type CssVariables = ColorInputCssVariables;\n  export type Factory = ColorInputFactory;\n}\n"],"mappings":"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"}
+{"version":3,"file":"ColorInput.mjs","names":["classes"],"sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useDidUpdate, useEyeDropper, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport {\n  __ColorPickerProps,\n  ColorPicker,\n  ColorPickerStylesNames,\n  convertHsvaTo,\n  isColorValid,\n  parseColor,\n} from '../ColorPicker';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant, useInputProps } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Popover, PopoverProps } from '../Popover';\nimport { EyeDropperIcon } from './EyeDropperIcon';\nimport classes from './ColorInput.module.css';\n\nexport type ColorInputStylesNames =\n  | 'dropdown'\n  | 'eyeDropperButton'\n  | 'eyeDropperIcon'\n  | 'colorPreview'\n  | ColorPickerStylesNames\n  | __InputStylesNames;\n\nexport type ColorInputCssVariables = {\n  eyeDropperIcon: '--ci-eye-dropper-icon-size';\n  eyeDropperButton: '--ci-button-size';\n  colorPreview: '--ci-preview-size';\n};\n\nexport interface ColorInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    __ColorPickerProps,\n    StylesApiProps<ColorInputFactory>,\n    ElementProps<'input', 'size' | 'onChange' | 'value' | 'defaultValue'> {\n  /** If input is not allowed, the user can only pick value with color picker and swatches */\n  disallowInput?: boolean;\n\n  /** If set, the input value resets to the last known valid value when the input loses focus @default true */\n  fixOnBlur?: boolean;\n\n  /** Props passed down to the `Popover` component */\n  popoverProps?: PopoverProps;\n\n  /** If set, the preview color swatch is displayed in the left section of the input @default true */\n  withPreview?: boolean;\n\n  /** If set, the eye dropper button is displayed in the right section @default true */\n  withEyeDropper?: boolean;\n\n  /** An icon to replace the default eye dropper icon */\n  eyeDropperIcon?: React.ReactNode;\n\n  /** If set, the dropdown is closed when one of the color swatches is clicked @default false */\n  closeOnColorSwatchClick?: boolean;\n\n  /** Props passed down to the eye dropper button */\n  eyeDropperButtonProps?: Record<string, any>;\n}\n\nexport type ColorInputFactory = Factory<{\n  props: ColorInputProps;\n  ref: HTMLInputElement;\n  stylesNames: ColorInputStylesNames;\n  vars: ColorInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  format: 'hex',\n  fixOnBlur: true,\n  withPreview: true,\n  swatchesPerRow: 7,\n  withPicker: true,\n  popoverProps: { transitionProps: { transition: 'fade', duration: 0 } },\n  withEyeDropper: true,\n  size: 'sm',\n  leftSectionPointerEvents: 'none',\n} satisfies Partial<ColorInputProps>;\n\nconst varsResolver = createVarsResolver<ColorInputFactory>((_, { size }) => ({\n  eyeDropperIcon: {\n    '--ci-eye-dropper-icon-size': getSize(size, 'ci-eye-dropper-icon-size'),\n  },\n\n  eyeDropperButton: {\n    '--ci-button-size': getSize(size, 'ci-button-size'),\n  },\n\n  colorPreview: {\n    '--ci-preview-size': getSize(size, 'ci-preview-size'),\n  },\n}));\n\nexport const ColorInput = factory<ColorInputFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'ColorInput'], defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    disallowInput,\n    fixOnBlur,\n    popoverProps,\n    withPreview,\n    withEyeDropper,\n    eyeDropperIcon,\n    closeOnColorSwatchClick,\n    eyeDropperButtonProps,\n    value,\n    defaultValue,\n    onChange,\n    onChangeEnd,\n    onClick,\n    onFocus,\n    onBlur,\n    inputProps,\n    format = 'hex',\n    wrapperProps,\n    readOnly,\n    withPicker,\n    swatches,\n    disabled,\n    leftSection,\n    rightSection,\n    swatchesPerRow,\n    ...others\n  } = useInputProps('ColorInput', defaultProps, _props);\n\n  const getStyles = useStyles<ColorInputFactory>({\n    name: 'ColorInput',\n    props,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    rootSelector: 'wrapper',\n    vars: props.vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ColorInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [dropdownOpened, setDropdownOpened] = useState(false);\n  const [lastValidValue, setLastValidValue] = useState('');\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();\n\n  const eyeDropper = (\n    <ActionIcon\n      {...eyeDropperButtonProps}\n      {...getStyles('eyeDropperButton', {\n        className: eyeDropperButtonProps?.className,\n        style: eyeDropperButtonProps?.style,\n      })}\n      variant=\"subtle\"\n      color=\"gray\"\n      unstyled={unstyled}\n      onClick={() =>\n        openEyeDropper()\n          .then((payload) => {\n            if (payload?.sRGBHex) {\n              const color = convertHsvaTo(format, parseColor(payload.sRGBHex));\n              setValue(color);\n              onChangeEnd?.(color);\n            }\n          })\n          .catch(() => {})\n      }\n    >\n      {eyeDropperIcon || <EyeDropperIcon {...getStyles('eyeDropperIcon')} />}\n    </ActionIcon>\n  );\n\n  const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setDropdownOpened(true);\n  };\n\n  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    fixOnBlur && setValue(lastValidValue);\n    onBlur?.(event);\n    setDropdownOpened(false);\n  };\n\n  const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n    onClick?.(event);\n    setDropdownOpened(true);\n  };\n\n  useEffect(() => {\n    if (isColorValid(_value) || _value.trim() === '') {\n      setLastValidValue(_value);\n    }\n  }, [_value]);\n\n  useDidUpdate(() => {\n    if (isColorValid(_value)) {\n      setValue(convertHsvaTo(format, parseColor(_value)));\n    }\n  }, [format]);\n\n  return (\n    <Input.Wrapper\n      {...wrapperProps}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"ColorInput\"\n    >\n      <Popover\n        __staticSelector=\"ColorInput\"\n        position=\"bottom-start\"\n        offset={5}\n        opened={dropdownOpened}\n        {...popoverProps}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        withRoles={false}\n        disabled={\n          readOnly || (withPicker === false && (!Array.isArray(swatches) || swatches.length === 0))\n        }\n      >\n        <Popover.Target>\n          <Input<'input'>\n            autoComplete=\"off\"\n            {...others}\n            {...inputProps}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            disabled={disabled}\n            __staticSelector=\"ColorInput\"\n            onFocus={handleInputFocus}\n            onBlur={handleInputBlur}\n            onClick={handleInputClick}\n            spellCheck={false}\n            value={_value}\n            onChange={(event) => {\n              const inputValue = event.currentTarget.value;\n              setValue(inputValue);\n              if (isColorValid(inputValue)) {\n                onChangeEnd?.(convertHsvaTo(format, parseColor(inputValue)));\n              }\n            }}\n            leftSection={\n              leftSection ||\n              (withPreview ? (\n                <ColorSwatch\n                  color={isColorValid(_value) ? _value : '#fff'}\n                  size=\"var(--ci-preview-size)\"\n                  {...getStyles('colorPreview')}\n                />\n              ) : null)\n            }\n            readOnly={disallowInput || readOnly}\n            pointer={disallowInput}\n            unstyled={unstyled}\n            rightSection={\n              rightSection ||\n              (withEyeDropper && !disabled && !readOnly && eyeDropperSupported ? eyeDropper : null)\n            }\n          />\n        </Popover.Target>\n\n        <Popover.Dropdown\n          onMouseDown={(event) => event.preventDefault()}\n          className={classes.dropdown}\n        >\n          <ColorPicker\n            __staticSelector=\"ColorInput\"\n            value={_value}\n            onChange={setValue}\n            onChangeEnd={onChangeEnd}\n            format={format}\n            swatches={swatches}\n            swatchesPerRow={swatchesPerRow}\n            withPicker={withPicker}\n            size={inputProps.size}\n            focusable={false}\n            unstyled={unstyled}\n            styles={resolvedStyles}\n            classNames={resolvedClassNames}\n            onColorSwatchClick={() => closeOnColorSwatchClick && setDropdownOpened(false)}\n            attributes={wrapperProps.attributes}\n          />\n        </Popover.Dropdown>\n      </Popover>\n    </Input.Wrapper>\n  );\n});\n\nColorInput.classes = InputBase.classes;\nColorInput.varsResolver = varsResolver;\nColorInput.displayName = '@mantine/core/ColorInput';\n\nexport namespace ColorInput {\n  export type Props = ColorInputProps;\n  export type StylesNames = ColorInputStylesNames;\n  export type CssVariables = ColorInputCssVariables;\n  export type Factory = ColorInputFactory;\n}\n"],"mappings":"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"}