@mantine/core 9.4.3-alpha.0 → 9.5.1-alpha.0

package/cjs/components/Input/InputLabel/InputLabel.cjs

@@ -34,13 +34,15 @@ const InputLabel = require_factory.factory((_props) => {
 	});
 	const ctx = (0, react.use)(require_InputWrapper_context.InputWrapperContext);
 	const getStyles = ctx?.getStyles || _getStyles;
+	const rootElement = others.component || labelElement;
+	const supportsHtmlFor = typeof rootElement !== "string" || rootElement === "label";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
 		...getStyles("label", ctx?.getStyles ? {
 			className,
 			style
 		} : void 0),
 		component: labelElement,
-		htmlFor: labelElement === "label" ? htmlFor : void 0,
+		htmlFor: supportsHtmlFor ? htmlFor : void 0,
 		mod: [{ required }, mod],
 		onMouseDown: (event) => {
 			onMouseDown?.(event);

package/cjs/components/Input/InputLabel/InputLabel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputLabel.cjs","names":["createVarsResolver","getFontSize","factory","useProps","useStyles","InputWrapperContext","Box","classes"],"sources":["../../../../src/components/Input/InputLabel/InputLabel.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  MantineFontSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { InputWrapperContext } from '../InputWrapper.context';\nimport classes from '../Input.module.css';\n\nexport type InputLabelStylesNames = 'label' | 'required';\nexport type InputLabelCssVariables = {\n  label: '--input-asterisk-color' | '--input-label-size';\n};\n\nexport interface InputLabelProps\n  extends BoxProps, StylesApiProps<InputLabelFactory>, ElementProps<'label'> {\n  __staticSelector?: string;\n\n  /** If set, the required asterisk is displayed next to the label */\n  required?: boolean;\n\n  /** Controls label `font-size` @default 'sm' */\n  size?: MantineFontSize;\n\n  /** Root element of the label @default 'label' */\n  labelElement?: 'label' | 'div';\n}\n\nexport type InputLabelFactory = Factory<{\n  props: InputLabelProps;\n  ref: HTMLLabelElement;\n  stylesNames: InputLabelStylesNames;\n  vars: InputLabelCssVariables;\n}>;\n\nconst defaultProps = {\n  labelElement: 'label',\n} satisfies Partial<InputLabelProps>;\n\nconst varsResolver = createVarsResolver<InputLabelFactory>((_, { size }) => ({\n  label: {\n    '--input-label-size': getFontSize(size),\n    '--input-asterisk-color': undefined,\n  },\n}));\n\nexport const InputLabel = factory<InputLabelFactory>((_props) => {\n  const props = useProps('InputLabel', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    labelElement,\n    required,\n    htmlFor,\n    onMouseDown,\n    children,\n    __staticSelector,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const _getStyles = useStyles<InputLabelFactory>({\n    name: ['InputWrapper', __staticSelector],\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'label',\n    vars,\n    varsResolver,\n  });\n\n  const ctx = use(InputWrapperContext);\n  const getStyles = ctx?.getStyles || _getStyles;\n\n  return (\n    <Box\n      {...getStyles('label', ctx?.getStyles ? { className, style } : undefined)}\n      component={labelElement as 'label'}\n      htmlFor={labelElement === 'label' ? htmlFor : undefined}\n      mod={[{ required }, mod]}\n      onMouseDown={(event) => {\n        onMouseDown?.(event);\n        if (!event.defaultPrevented && event.detail > 1) {\n          event.preventDefault();\n        }\n      }}\n      {...others}\n    >\n      {children}\n      {required && (\n        <span {...getStyles('required')} aria-hidden>\n          {' *'}\n        </span>\n      )}\n    </Box>\n  );\n});\n\nInputLabel.classes = classes;\nInputLabel.varsResolver = varsResolver;\nInputLabel.displayName = '@mantine/core/InputLabel';\n"],"mappings":";;;;;;;;;;;;AA2CA,MAAM,eAAe,EACnB,cAAc,QAChB;AAEA,MAAM,eAAeA,6BAAAA,oBAAuC,GAAG,EAAE,YAAY,EAC3E,OAAO;CACL,sBAAsBC,iBAAAA,YAAY,IAAI;CACtC,0BAA0B,KAAA;AAC5B,EACF,EAAE;AAEF,MAAa,aAAaC,gBAAAA,SAA4B,WAAW;CAC/D,MAAM,QAAQC,kBAAAA,SAAS,cAAc,cAAc,MAAM;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,cACA,UACA,SACA,aACA,UACA,kBACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,aAAaC,mBAAAA,UAA6B;EAC9C,MAAM,CAAC,gBAAgB,gBAAgB;EACvC;EACA,SAAA,qBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAED,MAAM,OAAA,GAAA,MAAA,IAAA,CAAUC,6BAAAA,mBAAmB;CACnC,MAAM,YAAY,KAAK,aAAa;CAEpC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;EACE,GAAI,UAAU,SAAS,KAAK,YAAY;GAAE;GAAW;EAAM,IAAI,KAAA,CAAS;EACxE,WAAW;EACX,SAAS,iBAAiB,UAAU,UAAU,KAAA;EAC9C,KAAK,CAAC,EAAE,SAAS,GAAG,GAAG;EACvB,cAAc,UAAU;GACtB,cAAc,KAAK;GACnB,IAAI,CAAC,MAAM,oBAAoB,MAAM,SAAS,GAC5C,MAAM,eAAe;EAEzB;EACA,GAAI;YAXN,CAaG,UACA,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,GAAI,UAAU,UAAU;GAAG,eAAA;aAC9B;EACG,CAAA,CAEL;;AAET,CAAC;AAED,WAAW,UAAUC,qBAAAA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}
+{"version":3,"file":"InputLabel.cjs","names":["createVarsResolver","getFontSize","factory","useProps","useStyles","InputWrapperContext","Box","classes"],"sources":["../../../../src/components/Input/InputLabel/InputLabel.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  MantineFontSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { InputWrapperContext } from '../InputWrapper.context';\nimport classes from '../Input.module.css';\n\nexport type InputLabelStylesNames = 'label' | 'required';\nexport type InputLabelCssVariables = {\n  label: '--input-asterisk-color' | '--input-label-size';\n};\n\nexport interface InputLabelProps\n  extends BoxProps, StylesApiProps<InputLabelFactory>, ElementProps<'label'> {\n  __staticSelector?: string;\n\n  /** If set, the required asterisk is displayed next to the label */\n  required?: boolean;\n\n  /** Controls label `font-size` @default 'sm' */\n  size?: MantineFontSize;\n\n  /** Root element of the label @default 'label' */\n  labelElement?: 'label' | 'div';\n}\n\nexport type InputLabelFactory = Factory<{\n  props: InputLabelProps;\n  ref: HTMLLabelElement;\n  stylesNames: InputLabelStylesNames;\n  vars: InputLabelCssVariables;\n}>;\n\nconst defaultProps = {\n  labelElement: 'label',\n} satisfies Partial<InputLabelProps>;\n\nconst varsResolver = createVarsResolver<InputLabelFactory>((_, { size }) => ({\n  label: {\n    '--input-label-size': getFontSize(size),\n    '--input-asterisk-color': undefined,\n  },\n}));\n\nexport const InputLabel = factory<InputLabelFactory>((_props) => {\n  const props = useProps('InputLabel', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    labelElement,\n    required,\n    htmlFor,\n    onMouseDown,\n    children,\n    __staticSelector,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const _getStyles = useStyles<InputLabelFactory>({\n    name: ['InputWrapper', __staticSelector],\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'label',\n    vars,\n    varsResolver,\n  });\n\n  const ctx = use(InputWrapperContext);\n  const getStyles = ctx?.getStyles || _getStyles;\n  const rootElement = (others as { component?: React.ElementType }).component || labelElement;\n  const supportsHtmlFor = typeof rootElement !== 'string' || rootElement === 'label';\n\n  return (\n    <Box\n      {...getStyles('label', ctx?.getStyles ? { className, style } : undefined)}\n      component={labelElement as 'label'}\n      htmlFor={supportsHtmlFor ? htmlFor : undefined}\n      mod={[{ required }, mod]}\n      onMouseDown={(event) => {\n        onMouseDown?.(event);\n        if (!event.defaultPrevented && event.detail > 1) {\n          event.preventDefault();\n        }\n      }}\n      {...others}\n    >\n      {children}\n      {required && (\n        <span {...getStyles('required')} aria-hidden>\n          {' *'}\n        </span>\n      )}\n    </Box>\n  );\n});\n\nInputLabel.classes = classes;\nInputLabel.varsResolver = varsResolver;\nInputLabel.displayName = '@mantine/core/InputLabel';\n"],"mappings":";;;;;;;;;;;;AA2CA,MAAM,eAAe,EACnB,cAAc,QAChB;AAEA,MAAM,eAAeA,6BAAAA,oBAAuC,GAAG,EAAE,YAAY,EAC3E,OAAO;CACL,sBAAsBC,iBAAAA,YAAY,IAAI;CACtC,0BAA0B,KAAA;AAC5B,EACF,EAAE;AAEF,MAAa,aAAaC,gBAAAA,SAA4B,WAAW;CAC/D,MAAM,QAAQC,kBAAAA,SAAS,cAAc,cAAc,MAAM;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,cACA,UACA,SACA,aACA,UACA,kBACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,aAAaC,mBAAAA,UAA6B;EAC9C,MAAM,CAAC,gBAAgB,gBAAgB;EACvC;EACA,SAAA,qBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAED,MAAM,OAAA,GAAA,MAAA,IAAA,CAAUC,6BAAAA,mBAAmB;CACnC,MAAM,YAAY,KAAK,aAAa;CACpC,MAAM,cAAe,OAA6C,aAAa;CAC/E,MAAM,kBAAkB,OAAO,gBAAgB,YAAY,gBAAgB;CAE3E,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;EACE,GAAI,UAAU,SAAS,KAAK,YAAY;GAAE;GAAW;EAAM,IAAI,KAAA,CAAS;EACxE,WAAW;EACX,SAAS,kBAAkB,UAAU,KAAA;EACrC,KAAK,CAAC,EAAE,SAAS,GAAG,GAAG;EACvB,cAAc,UAAU;GACtB,cAAc,KAAK;GACnB,IAAI,CAAC,MAAM,oBAAoB,MAAM,SAAS,GAC5C,MAAM,eAAe;EAEzB;EACA,GAAI;YAXN,CAaG,UACA,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,GAAI,UAAU,UAAU;GAAG,eAAA;aAC9B;EACG,CAAA,CAEL;;AAET,CAAC;AAED,WAAW,UAAUC,qBAAAA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}

package/cjs/components/Input/InputWrapper/InputWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputWrapper.cjs","names":["createVarsResolver","getFontSize","rem","factory","useProps","useStyles","InputLabel","InputDescription","Fragment","InputError","InputSuccess","InputWrapperContext","getInputOffsets","Box","classes"],"sources":["../../../../src/components/Input/InputWrapper/InputWrapper.tsx"],"sourcesContent":["import { Fragment } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  MantineFontSize,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport {\n  InputDescription,\n  InputDescriptionCssVariables,\n  InputDescriptionProps,\n  InputDescriptionStylesNames,\n} from '../InputDescription/InputDescription';\nimport {\n  InputError,\n  InputErrorCssVariables,\n  InputErrorProps,\n  InputErrorStylesNames,\n} from '../InputError/InputError';\nimport {\n  InputLabel,\n  InputLabelCssVariables,\n  InputLabelProps,\n  InputLabelStylesNames,\n} from '../InputLabel/InputLabel';\nimport {\n  InputSuccess,\n  InputSuccessCssVariables,\n  InputSuccessProps,\n  InputSuccessStylesNames,\n} from '../InputSuccess/InputSuccess';\nimport { InputWrapperContext } from '../InputWrapper.context';\nimport { getInputOffsets } from './get-input-offsets/get-input-offsets';\nimport classes from '../Input.module.css';\n\nexport type InputWrapperCssVariables = InputLabelCssVariables &\n  InputErrorCssVariables &\n  InputSuccessCssVariables &\n  InputDescriptionCssVariables;\n\nexport type InputWrapperStylesNames =\n  | 'root'\n  | InputLabelStylesNames\n  | InputDescriptionStylesNames\n  | InputErrorStylesNames\n  | InputSuccessStylesNames;\n\nexport interface __InputWrapperProps {\n  /** Contents of `Input.Label` component. If not set, label is not displayed. */\n  label?: React.ReactNode;\n\n  /** Contents of `Input.Description` component. If not set, description is not displayed. */\n  description?: React.ReactNode;\n\n  /** Contents of `Input.Error` component. If not set, error is not displayed. */\n  error?: React.ReactNode;\n\n  /** Contents of `Input.Success` component. If not set, success is not displayed. */\n  success?: React.ReactNode;\n\n  /** Adds required attribute to the input and a red asterisk on the right side of label @default false */\n  required?: boolean;\n\n  /** If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. @default false */\n  withAsterisk?: boolean;\n\n  /** Props passed down to the `Input.Label` component */\n  labelProps?: InputLabelProps & DataAttributes;\n\n  /** Props passed down to the `Input.Description` component */\n  descriptionProps?: InputDescriptionProps & DataAttributes;\n\n  /** Props passed down to the `Input.Error` component */\n  errorProps?: InputErrorProps & DataAttributes;\n\n  /** Props passed down to the `Input.Success` component */\n  successProps?: InputSuccessProps & DataAttributes;\n\n  /** Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input. @default React.Fragment */\n  inputContainer?: (children: React.ReactNode) => React.ReactNode;\n\n  /** Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. @default ['label', 'description', 'input', 'error'] */\n  inputWrapperOrder?: ('label' | 'input' | 'description' | 'error')[];\n}\n\nexport interface InputWrapperProps\n  extends __InputWrapperProps, BoxProps, StylesApiProps<InputWrapperFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n\n  /** Props passed to Styles API context, replaces Input.Wrapper props */\n  __stylesApiProps?: Record<string, any>;\n\n  /** Static id used as base to generate `aria-` attributes, by default generates random id */\n  id?: string;\n\n  /** Controls size of `Input.Label`, `Input.Description` and `Input.Error` components */\n  size?: MantineFontSize;\n\n  /** Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually. @default 'label' */\n  labelElement?: 'label' | 'div';\n}\n\nexport type InputWrapperFactory = Factory<{\n  props: InputWrapperProps;\n  ref: HTMLDivElement;\n  stylesNames: InputWrapperStylesNames;\n  vars: InputWrapperCssVariables;\n}>;\n\nconst defaultProps = {\n  labelElement: 'label',\n  inputContainer: (children) => children,\n  inputWrapperOrder: ['label', 'description', 'input', 'error'],\n} satisfies Partial<InputWrapperProps>;\n\nconst varsResolver = createVarsResolver<InputWrapperFactory>((_, { size }) => ({\n  label: {\n    '--input-label-size': getFontSize(size),\n    '--input-asterisk-color': undefined,\n  },\n\n  error: {\n    '--input-error-size': size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n\n  success: {\n    '--input-success-size':\n      size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n\n  description: {\n    '--input-description-size':\n      size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n}));\n\nexport const InputWrapper = factory<InputWrapperFactory>((_props) => {\n  const props = useProps('InputWrapper', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    variant,\n    __staticSelector,\n    inputContainer,\n    inputWrapperOrder,\n    label,\n    error,\n    success,\n    description,\n    labelProps,\n    descriptionProps,\n    errorProps,\n    successProps,\n    labelElement,\n    children,\n    withAsterisk,\n    id,\n    required,\n    __stylesApiProps,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<InputWrapperFactory>({\n    name: ['InputWrapper', __staticSelector],\n    props: __stylesApiProps || props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const sharedProps = {\n    size,\n    variant,\n    __staticSelector,\n  };\n\n  const idBase = useId(id);\n  const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n  const errorId = errorProps?.id || `${idBase}-error`;\n  const successId = successProps?.id || `${idBase}-success`;\n  const descriptionId = descriptionProps?.id || `${idBase}-description`;\n  const inputId = idBase;\n  const hasError = !!error && typeof error !== 'boolean';\n  const hasSuccess = !!success && typeof success !== 'boolean' && !error;\n  const hasDescription = !!description;\n  const errorRendered = hasError && inputWrapperOrder.includes('error');\n  const successRendered = hasSuccess && inputWrapperOrder.includes('error');\n  const descriptionRendered = hasDescription && inputWrapperOrder.includes('description');\n  const _describedBy = `${errorRendered ? errorId : ''} ${successRendered ? successId : ''} ${descriptionRendered ? descriptionId : ''}`;\n  const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : undefined;\n  const labelId = labelProps?.id || `${idBase}-label`;\n\n  const _label = label && (\n    <InputLabel\n      key=\"label\"\n      labelElement={labelElement}\n      id={labelId}\n      htmlFor={inputId}\n      required={isRequired}\n      {...sharedProps}\n      {...labelProps}\n    >\n      {label}\n    </InputLabel>\n  );\n\n  const _description = hasDescription && (\n    <InputDescription\n      key=\"description\"\n      {...descriptionProps}\n      {...sharedProps}\n      size={descriptionProps?.size || sharedProps.size}\n      id={descriptionProps?.id || descriptionId}\n    >\n      {description}\n    </InputDescription>\n  );\n\n  const _input = <Fragment key=\"input\">{inputContainer(children)}</Fragment>;\n\n  const _error = hasError && (\n    <InputError\n      {...errorProps}\n      {...sharedProps}\n      size={errorProps?.size || sharedProps.size}\n      key=\"error\"\n      id={errorProps?.id || errorId}\n    >\n      {error}\n    </InputError>\n  );\n\n  const _success = hasSuccess && (\n    <InputSuccess\n      {...successProps}\n      {...sharedProps}\n      size={successProps?.size || sharedProps.size}\n      key=\"success\"\n      id={successProps?.id || successId}\n    >\n      {success}\n    </InputSuccess>\n  );\n\n  const content = inputWrapperOrder.map((part) => {\n    switch (part) {\n      case 'label':\n        return _label;\n      case 'input':\n        return _input;\n      case 'description':\n        return _description;\n      case 'error':\n        return _error || _success;\n      default:\n        return null;\n    }\n  });\n\n  return (\n    <InputWrapperContext\n      value={{\n        getStyles,\n        describedBy,\n        inputId,\n        labelId,\n        ...getInputOffsets(inputWrapperOrder, { hasDescription, hasError: hasError || hasSuccess }),\n      }}\n    >\n      <Box\n        variant={variant}\n        size={size}\n        mod={[{ error: !!error, success: !!success && !error }, mod]}\n        id={labelElement === 'label' ? undefined : id}\n        {...getStyles('root')}\n        {...others}\n      >\n        {content}\n      </Box>\n    </InputWrapperContext>\n  );\n});\n\nInputWrapper.classes = classes;\nInputWrapper.varsResolver = varsResolver;\nInputWrapper.displayName = '@mantine/core/InputWrapper';\n"],"mappings":"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"}
+{"version":3,"file":"InputWrapper.cjs","names":["createVarsResolver","getFontSize","rem","factory","useProps","useStyles","InputLabel","InputDescription","Fragment","InputError","InputSuccess","InputWrapperContext","getInputOffsets","Box","classes"],"sources":["../../../../src/components/Input/InputWrapper/InputWrapper.tsx"],"sourcesContent":["import { Fragment } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  MantineFontSize,\n  PlaceholderPolymorphicProps,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport {\n  InputDescription,\n  InputDescriptionCssVariables,\n  InputDescriptionProps,\n  InputDescriptionStylesNames,\n} from '../InputDescription/InputDescription';\nimport {\n  InputError,\n  InputErrorCssVariables,\n  InputErrorProps,\n  InputErrorStylesNames,\n} from '../InputError/InputError';\nimport {\n  InputLabel,\n  InputLabelCssVariables,\n  InputLabelProps,\n  InputLabelStylesNames,\n} from '../InputLabel/InputLabel';\nimport {\n  InputSuccess,\n  InputSuccessCssVariables,\n  InputSuccessProps,\n  InputSuccessStylesNames,\n} from '../InputSuccess/InputSuccess';\nimport { InputWrapperContext } from '../InputWrapper.context';\nimport { getInputOffsets } from './get-input-offsets/get-input-offsets';\nimport classes from '../Input.module.css';\n\nexport type InputWrapperCssVariables = InputLabelCssVariables &\n  InputErrorCssVariables &\n  InputSuccessCssVariables &\n  InputDescriptionCssVariables;\n\nexport type InputWrapperStylesNames =\n  | 'root'\n  | InputLabelStylesNames\n  | InputDescriptionStylesNames\n  | InputErrorStylesNames\n  | InputSuccessStylesNames;\n\nexport interface __InputWrapperProps {\n  /** Contents of `Input.Label` component. If not set, label is not displayed. */\n  label?: React.ReactNode;\n\n  /** Contents of `Input.Description` component. If not set, description is not displayed. */\n  description?: React.ReactNode;\n\n  /** Contents of `Input.Error` component. If not set, error is not displayed. */\n  error?: React.ReactNode;\n\n  /** Contents of `Input.Success` component. If not set, success is not displayed. */\n  success?: React.ReactNode;\n\n  /** Adds required attribute to the input and a red asterisk on the right side of label @default false */\n  required?: boolean;\n\n  /** If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. @default false */\n  withAsterisk?: boolean;\n\n  /** Props passed down to the `Input.Label` component */\n  labelProps?: InputLabelProps & DataAttributes & PlaceholderPolymorphicProps;\n\n  /** Props passed down to the `Input.Description` component */\n  descriptionProps?: InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps;\n\n  /** Props passed down to the `Input.Error` component */\n  errorProps?: InputErrorProps & DataAttributes & PlaceholderPolymorphicProps;\n\n  /** Props passed down to the `Input.Success` component */\n  successProps?: InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps;\n\n  /** Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input. @default React.Fragment */\n  inputContainer?: (children: React.ReactNode) => React.ReactNode;\n\n  /** Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. @default ['label', 'description', 'input', 'error'] */\n  inputWrapperOrder?: ('label' | 'input' | 'description' | 'error')[];\n}\n\nexport interface InputWrapperProps\n  extends __InputWrapperProps, BoxProps, StylesApiProps<InputWrapperFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n\n  /** Props passed to Styles API context, replaces Input.Wrapper props */\n  __stylesApiProps?: Record<string, any>;\n\n  /** Static id used as base to generate `aria-` attributes, by default generates random id */\n  id?: string;\n\n  /** Controls size of `Input.Label`, `Input.Description` and `Input.Error` components */\n  size?: MantineFontSize;\n\n  /** Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually. @default 'label' */\n  labelElement?: 'label' | 'div';\n}\n\nexport type InputWrapperFactory = Factory<{\n  props: InputWrapperProps;\n  ref: HTMLDivElement;\n  stylesNames: InputWrapperStylesNames;\n  vars: InputWrapperCssVariables;\n}>;\n\nconst defaultProps = {\n  labelElement: 'label',\n  inputContainer: (children) => children,\n  inputWrapperOrder: ['label', 'description', 'input', 'error'],\n} satisfies Partial<InputWrapperProps>;\n\nconst varsResolver = createVarsResolver<InputWrapperFactory>((_, { size }) => ({\n  label: {\n    '--input-label-size': getFontSize(size),\n    '--input-asterisk-color': undefined,\n  },\n\n  error: {\n    '--input-error-size': size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n\n  success: {\n    '--input-success-size':\n      size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n\n  description: {\n    '--input-description-size':\n      size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n}));\n\nexport const InputWrapper = factory<InputWrapperFactory>((_props) => {\n  const props = useProps('InputWrapper', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    variant,\n    __staticSelector,\n    inputContainer,\n    inputWrapperOrder,\n    label,\n    error,\n    success,\n    description,\n    labelProps,\n    descriptionProps,\n    errorProps,\n    successProps,\n    labelElement,\n    children,\n    withAsterisk,\n    id,\n    required,\n    __stylesApiProps,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<InputWrapperFactory>({\n    name: ['InputWrapper', __staticSelector],\n    props: __stylesApiProps || props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const sharedProps = {\n    size,\n    variant,\n    __staticSelector,\n  };\n\n  const idBase = useId(id);\n  const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n  const errorId = errorProps?.id || `${idBase}-error`;\n  const successId = successProps?.id || `${idBase}-success`;\n  const descriptionId = descriptionProps?.id || `${idBase}-description`;\n  const inputId = idBase;\n  const hasError = !!error && typeof error !== 'boolean';\n  const hasSuccess = !!success && typeof success !== 'boolean' && !error;\n  const hasDescription = !!description;\n  const errorRendered = hasError && inputWrapperOrder.includes('error');\n  const successRendered = hasSuccess && inputWrapperOrder.includes('error');\n  const descriptionRendered = hasDescription && inputWrapperOrder.includes('description');\n  const _describedBy = `${errorRendered ? errorId : ''} ${successRendered ? successId : ''} ${descriptionRendered ? descriptionId : ''}`;\n  const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : undefined;\n  const labelId = labelProps?.id || `${idBase}-label`;\n\n  const _label = label && (\n    <InputLabel\n      key=\"label\"\n      labelElement={labelElement}\n      id={labelId}\n      htmlFor={inputId}\n      required={isRequired}\n      {...sharedProps}\n      {...labelProps}\n    >\n      {label}\n    </InputLabel>\n  );\n\n  const _description = hasDescription && (\n    <InputDescription\n      key=\"description\"\n      {...descriptionProps}\n      {...sharedProps}\n      size={descriptionProps?.size || sharedProps.size}\n      id={descriptionProps?.id || descriptionId}\n    >\n      {description}\n    </InputDescription>\n  );\n\n  const _input = <Fragment key=\"input\">{inputContainer(children)}</Fragment>;\n\n  const _error = hasError && (\n    <InputError\n      {...errorProps}\n      {...sharedProps}\n      size={errorProps?.size || sharedProps.size}\n      key=\"error\"\n      id={errorProps?.id || errorId}\n    >\n      {error}\n    </InputError>\n  );\n\n  const _success = hasSuccess && (\n    <InputSuccess\n      {...successProps}\n      {...sharedProps}\n      size={successProps?.size || sharedProps.size}\n      key=\"success\"\n      id={successProps?.id || successId}\n    >\n      {success}\n    </InputSuccess>\n  );\n\n  const content = inputWrapperOrder.map((part) => {\n    switch (part) {\n      case 'label':\n        return _label;\n      case 'input':\n        return _input;\n      case 'description':\n        return _description;\n      case 'error':\n        return _error || _success;\n      default:\n        return null;\n    }\n  });\n\n  return (\n    <InputWrapperContext\n      value={{\n        getStyles,\n        describedBy,\n        inputId,\n        labelId,\n        ...getInputOffsets(inputWrapperOrder, { hasDescription, hasError: hasError || hasSuccess }),\n      }}\n    >\n      <Box\n        variant={variant}\n        size={size}\n        mod={[{ error: !!error, success: !!success && !error }, mod]}\n        id={labelElement === 'label' ? undefined : id}\n        {...getStyles('root')}\n        {...others}\n      >\n        {content}\n      </Box>\n    </InputWrapperContext>\n  );\n});\n\nInputWrapper.classes = classes;\nInputWrapper.varsResolver = varsResolver;\nInputWrapper.displayName = '@mantine/core/InputWrapper';\n"],"mappings":"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"}

package/cjs/components/Modal/ModalStack.cjs

@@ -11,7 +11,7 @@ function ModalStack({ children }) {
 		value: {
 			stack,
 			addModal: (id, zIndex) => {
-				setStack((current) => [...new Set([...current, id])]);
+				setStack((current) => [.../* @__PURE__ */ new Set([...current, id])]);
 				setMaxZIndex((current) => typeof zIndex === "number" && typeof current === "number" ? Math.max(current, zIndex) : current);
 			},
 			removeModal: (id) => setStack((current) => current.filter((currentId) => currentId !== id)),

package/cjs/components/Modal/ModalStack.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModalStack.cjs","names":["getDefaultZIndex"],"sources":["../../../src/components/Modal/ModalStack.tsx"],"sourcesContent":["import { createContext, useState } from 'react';\nimport { getDefaultZIndex } from '../../core';\n\ninterface ModalStackContext {\n  stack: string[];\n  addModal: (id: string, zIndex: number | string) => void;\n  removeModal: (id: string) => void;\n  getZIndex: (id: string) => string;\n  currentId: string;\n  maxZIndex: string | number;\n}\n\nexport const ModalStackContext = createContext<ModalStackContext | null>(null);\n\nexport interface ModalStackProps {\n  children: React.ReactNode;\n}\n\nexport function ModalStack({ children }: ModalStackProps) {\n  const [stack, setStack] = useState<string[]>([]);\n  const [maxZIndex, setMaxZIndex] = useState<number | string>(getDefaultZIndex('modal'));\n\n  return (\n    <ModalStackContext\n      value={{\n        stack,\n        addModal: (id, zIndex) => {\n          setStack((current) => [...new Set([...current, id])]);\n          setMaxZIndex((current) =>\n            typeof zIndex === 'number' && typeof current === 'number'\n              ? Math.max(current, zIndex)\n              : current\n          );\n        },\n        removeModal: (id) => setStack((current) => current.filter((currentId) => currentId !== id)),\n        getZIndex: (id) => `calc(${maxZIndex} + ${stack.indexOf(id)} + 1)`,\n        currentId: stack[stack.length - 1],\n        maxZIndex,\n      }}\n    >\n      {children}\n    </ModalStackContext>\n  );\n}\n\nModalStack.displayName = '@mantine/core/ModalStack';\n"],"mappings":";;;;;AAYA,MAAa,qBAAA,GAAA,MAAA,cAAA,CAA4D,IAAI;AAM7E,SAAgB,WAAW,EAAE,YAA6B;CACxD,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,SAAA,CAA+B,CAAC,CAAC;CAC/C,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,SAAA,CAA0CA,4BAAAA,iBAAiB,OAAO,CAAC;CAErF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;EACE,OAAO;GACL;GACA,WAAW,IAAI,WAAW;IACxB,UAAU,YAAY,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;IACpD,cAAc,YACZ,OAAO,WAAW,YAAY,OAAO,YAAY,WAC7C,KAAK,IAAI,SAAS,MAAM,IACxB,OACN;GACF;GACA,cAAc,OAAO,UAAU,YAAY,QAAQ,QAAQ,cAAc,cAAc,EAAE,CAAC;GAC1F,YAAY,OAAO,QAAQ,UAAU,KAAK,MAAM,QAAQ,EAAE,EAAE;GAC5D,WAAW,MAAM,MAAM,SAAS;GAChC;EACF;EAEC;CACgB,CAAA;AAEvB;AAEA,WAAW,cAAc"}
+{"version":3,"file":"ModalStack.cjs","names":["getDefaultZIndex"],"sources":["../../../src/components/Modal/ModalStack.tsx"],"sourcesContent":["import { createContext, useState } from 'react';\nimport { getDefaultZIndex } from '../../core';\n\ninterface ModalStackContext {\n  stack: string[];\n  addModal: (id: string, zIndex: number | string) => void;\n  removeModal: (id: string) => void;\n  getZIndex: (id: string) => string;\n  currentId: string;\n  maxZIndex: string | number;\n}\n\nexport const ModalStackContext = createContext<ModalStackContext | null>(null);\n\nexport interface ModalStackProps {\n  children: React.ReactNode;\n}\n\nexport function ModalStack({ children }: ModalStackProps) {\n  const [stack, setStack] = useState<string[]>([]);\n  const [maxZIndex, setMaxZIndex] = useState<number | string>(getDefaultZIndex('modal'));\n\n  return (\n    <ModalStackContext\n      value={{\n        stack,\n        addModal: (id, zIndex) => {\n          setStack((current) => [...new Set([...current, id])]);\n          setMaxZIndex((current) =>\n            typeof zIndex === 'number' && typeof current === 'number'\n              ? Math.max(current, zIndex)\n              : current\n          );\n        },\n        removeModal: (id) => setStack((current) => current.filter((currentId) => currentId !== id)),\n        getZIndex: (id) => `calc(${maxZIndex} + ${stack.indexOf(id)} + 1)`,\n        currentId: stack[stack.length - 1],\n        maxZIndex,\n      }}\n    >\n      {children}\n    </ModalStackContext>\n  );\n}\n\nModalStack.displayName = '@mantine/core/ModalStack';\n"],"mappings":";;;;;AAYA,MAAa,qBAAA,GAAA,MAAA,cAAA,CAA4D,IAAI;AAM7E,SAAgB,WAAW,EAAE,YAA6B;CACxD,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,SAAA,CAA+B,CAAC,CAAC;CAC/C,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,SAAA,CAA0CA,4BAAAA,iBAAiB,OAAO,CAAC;CAErF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;EACE,OAAO;GACL;GACA,WAAW,IAAI,WAAW;IACxB,UAAU,YAAY,CAAC,mBAAG,IAAI,IAAI,CAAC,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;IACpD,cAAc,YACZ,OAAO,WAAW,YAAY,OAAO,YAAY,WAC7C,KAAK,IAAI,SAAS,MAAM,IACxB,OACN;GACF;GACA,cAAc,OAAO,UAAU,YAAY,QAAQ,QAAQ,cAAc,cAAc,EAAE,CAAC;GAC1F,YAAY,OAAO,QAAQ,UAAU,KAAK,MAAM,QAAQ,EAAE,EAAE;GAC5D,WAAW,MAAM,MAAM,SAAS;GAChC;EACF;EAEC;CACgB,CAAA;AAEvB;AAEA,WAAW,cAAc"}

package/cjs/components/OverflowList/OverflowList.cjs

@@ -133,7 +133,8 @@ const OverflowList = require_factory.genericFactory((_props) => {
 			if (!container) return false;
 			const containerWidth = container.getBoundingClientRect().width;
 			const columnGap = parseFloat(getComputedStyle(container).columnGap) || 0;
-			if (!fitsInRows([_overflowRef.current.getBoundingClientRect().width, ...rowData.children.map((child) => child.getBoundingClientRect().width)], containerWidth, columnGap)) {
+			const itemWidths = [_overflowRef.current.getBoundingClientRect().width, ...rowData.children.map((child) => child.getBoundingClientRect().width)];
+			if (!fitsInRows(itemWidths, containerWidth, columnGap)) {
 				setSubtractCount((c) => c + 1);
 				return true;
 			}

package/cjs/components/OverflowList/OverflowList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowList.cjs","names":["createVarsResolver","getSpacing","genericFactory","useProps","useStyles","useDimensions","getRowPositionsData","Box","Fragment","classes"],"sources":["../../../src/components/OverflowList/OverflowList.tsx"],"sourcesContent":["// Originally based on https://github.com/Eliav2/react-responsive-overflow-list (MIT License)\n// Contains the modified version adapted for Mantine\nimport { cloneElement, useMemo, useRef, useState } from 'react';\nimport { Fragment } from 'react/jsx-runtime';\nimport { useIsomorphicEffect, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  Factory,\n  genericFactory,\n  getSpacing,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { getRowPositionsData } from './get-row-position-data';\nimport { useDimensions } from './use-dimensions';\nimport classes from './OverflowList.module.css';\n\nexport type OverflowListStylesNames = 'root';\nexport type OverflowListCssVariables = {\n  root: '--ol-gap';\n};\n\nexport interface OverflowListProps<T = any>\n  extends BoxProps, StylesApiProps<OverflowListFactory>, ElementProps<'div', 'children'> {\n  /** Array of items to display */\n  data: T[];\n\n  /** Function to render item */\n  renderItem: (item: T, index: number) => React.ReactNode;\n\n  /** Function to render hidden items */\n  renderOverflow: (items: T[]) => React.ReactNode;\n\n  /** Number of rows to display @default 1 */\n  maxRows?: number;\n\n  /** Maximum number of visible items @default Infinity */\n  maxVisibleItems?: number;\n\n  /** Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem @default 'xs' */\n  gap?: MantineSpacing;\n\n  /** Direction from which items are collapsed when they overflow, `'end'` collapses last items, `'start'` collapses first items @default 'end' */\n  collapseFrom?: 'start' | 'end';\n\n  /** A function to resolve a unique key for each item. Used to detect when the contents of `data`\n   * change (for example when items are reordered while the length stays the same) so the\n   * visible/overflow split can be recomputed. Required to detect reordering when `data` contains\n   * objects; for primitive items (strings, numbers) the item value is used by default. */\n  getItemKey?: (item: T, index: number) => React.Key;\n}\n\nexport type OverflowListFactory = Factory<{\n  props: OverflowListProps<any>;\n  ref: HTMLDivElement;\n  stylesNames: OverflowListStylesNames;\n  vars: OverflowListCssVariables;\n  signature: <T = any>(props: OverflowListProps<T>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  maxRows: 1,\n  maxVisibleItems: Infinity,\n} satisfies Partial<OverflowListProps<any>>;\n\nconst varsResolver = createVarsResolver<OverflowListFactory>((_, { gap }) => ({\n  root: {\n    '--ol-gap': getSpacing(gap),\n  },\n}));\n\nfunction getDataSignature<T>(\n  data: T[],\n  getItemKey: ((item: T, index: number) => React.Key) | undefined\n): string {\n  return data\n    .map((item, index) => {\n      if (getItemKey) {\n        return getItemKey(item, index);\n      }\n      return item !== null && (typeof item === 'object' || typeof item === 'function')\n        ? index\n        : String(item);\n    })\n    .join('\\u0000');\n}\n\nexport const OverflowList = genericFactory<OverflowListFactory>((_props) => {\n  const props = useProps('OverflowList', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    data,\n    renderOverflow,\n    renderItem,\n    maxRows,\n    maxVisibleItems,\n    collapseFrom,\n    getItemKey,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<OverflowListFactory>({\n    name: 'OverflowList',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const [visibleCount, setVisibleCount] = useState(data.length);\n  const [subtractCount, setSubtractCount] = useState(0);\n  const [phase, setPhase] = useState<'normal' | 'measuring' | 'measuring-overflow-indicator'>(\n    'normal'\n  );\n\n  const containerRef = useRef<HTMLElement>(null);\n  const rootRef = useMergedRef(containerRef, ref);\n  const finalVisibleCount = visibleCount - subtractCount;\n  const overflowCount = data.length - finalVisibleCount;\n  const showOverflow = overflowCount > 0 && phase !== 'measuring';\n  const isCollapseStart = collapseFrom === 'start';\n  const overflowItems = isCollapseStart\n    ? data.slice(0, data.length - finalVisibleCount)\n    : data.slice(finalVisibleCount);\n  const overflowElement = showOverflow ? renderOverflow?.(overflowItems) : null;\n\n  const _overflowRef = useRef<HTMLElement>(null);\n  const overflowRef = useMergedRef(_overflowRef, (overflowElement as any)?.ref);\n  const dimensions = useDimensions(containerRef);\n  const dataKey = useMemo(() => getDataSignature(data, getItemKey), [data, getItemKey]);\n\n  useIsomorphicEffect(() => {\n    setPhase('measuring');\n    setVisibleCount(data.length);\n    setSubtractCount(0);\n  }, [dataKey, maxRows, collapseFrom]);\n\n  useIsomorphicEffect(() => {\n    if (phase === 'measuring') {\n      countVisibleItems();\n      setPhase('measuring-overflow-indicator');\n    }\n  }, [phase]);\n\n  useIsomorphicEffect(() => {\n    if (phase === 'measuring-overflow-indicator') {\n      const updateWasNeeded = updateOverflowIndicator();\n      if (!updateWasNeeded) {\n        setPhase('normal');\n      }\n    }\n  }, [phase, subtractCount]);\n\n  useIsomorphicEffect(() => {\n    if (phase === 'normal') {\n      setPhase('measuring');\n      setSubtractCount(0);\n    }\n  }, [dimensions]);\n\n  const fitsInRows = (\n    itemWidths: number[],\n    containerWidth: number,\n    columnGap: number,\n    startIndex = 0\n  ) => {\n    let rows = 1;\n    let rowWidth = 0;\n\n    for (let i = startIndex; i < itemWidths.length; i += 1) {\n      const width = itemWidths[i];\n      const needed = rowWidth > 0 ? width + columnGap : width;\n\n      if (rowWidth + needed > containerWidth && rowWidth > 0) {\n        rows++;\n        if (rows > maxRows!) {\n          return false;\n        }\n        rowWidth = width;\n      } else {\n        rowWidth += needed;\n      }\n    }\n\n    return true;\n  };\n\n  const countVisibleItems = () => {\n    const rowData = getRowPositionsData(containerRef, _overflowRef);\n    if (!rowData) {\n      return;\n    }\n\n    const container = containerRef.current;\n    if (!container) {\n      return;\n    }\n\n    if (isCollapseStart) {\n      const containerWidth = container.getBoundingClientRect().width;\n      const columnGap = parseFloat(getComputedStyle(container).columnGap) || 0;\n      const children = rowData.children;\n      const widths = children.map((child) => child.getBoundingClientRect().width);\n\n      let count = 0;\n      for (let i = widths.length - 1; i >= 0; i--) {\n        if (!fitsInRows(widths, containerWidth, columnGap, i)) {\n          break;\n        }\n        count = widths.length - i;\n      }\n\n      count = Math.min(count, maxVisibleItems!);\n      setVisibleCount(count);\n      return;\n    }\n\n    if (data.length === 1) {\n      const itemRef = rowData.itemsSizesMap[rowData.rowPositions[0]].elements.values().next().value;\n      const containerWidth = container.getBoundingClientRect().width;\n      const itemWidth = itemRef?.getBoundingClientRect().width ?? 0;\n\n      if (itemWidth > containerWidth) {\n        setVisibleCount(0);\n      } else {\n        setVisibleCount(1);\n      }\n\n      return;\n    }\n\n    const visibleRowPositions = rowData.rowPositions.slice(0, maxRows);\n\n    let fittingCount = visibleRowPositions.reduce((acc, position) => {\n      return acc + rowData.itemsSizesMap[position].elements.size;\n    }, 0);\n\n    fittingCount = Math.min(fittingCount, maxVisibleItems);\n    setVisibleCount(fittingCount);\n  };\n\n  const updateOverflowIndicator = () => {\n    if (!_overflowRef.current) {\n      return false;\n    }\n    const rowData = getRowPositionsData(containerRef, _overflowRef);\n    if (!rowData) {\n      return false;\n    }\n\n    const { rowPositions, itemsSizesMap } = rowData;\n\n    if (isCollapseStart) {\n      const container = containerRef.current;\n      if (!container) {\n        return false;\n      }\n      const containerWidth = container.getBoundingClientRect().width;\n      const columnGap = parseFloat(getComputedStyle(container).columnGap) || 0;\n      const overflowWidth = _overflowRef.current.getBoundingClientRect().width;\n      const children = rowData.children;\n      const itemWidths = [\n        overflowWidth,\n        ...children.map((child) => child.getBoundingClientRect().width),\n      ];\n\n      if (!fitsInRows(itemWidths, containerWidth, columnGap)) {\n        setSubtractCount((c) => c + 1);\n        return true;\n      }\n\n      return false;\n    }\n\n    const overflowRect = _overflowRef.current.getBoundingClientRect();\n    const overflowMiddleY = overflowRect.top + overflowRect.height / 2;\n    const lastRowTop = rowPositions[rowPositions.length - 1];\n    const lastRow = itemsSizesMap[lastRowTop];\n\n    if (overflowMiddleY > lastRow.bottom) {\n      setSubtractCount((c) => c + 1);\n      return true;\n    }\n\n    return false;\n  };\n\n  const clonedOverflowElement = overflowElement\n    ? cloneElement(overflowElement as React.ReactElement<any>, { ref: overflowRef })\n    : null;\n\n  let finalItems = data;\n  if (maxVisibleItems) {\n    finalItems = isCollapseStart\n      ? finalItems.slice(-maxVisibleItems!)\n      : finalItems.slice(0, maxVisibleItems);\n  }\n\n  const indexOffset = isCollapseStart ? data.length - finalItems.length : 0;\n\n  return (\n    <Box ref={rootRef} {...getStyles('root')} {...others}>\n      {isCollapseStart && clonedOverflowElement}\n\n      {finalItems.map((item, index) => {\n        const isVisible =\n          phase === 'measuring' ||\n          (isCollapseStart\n            ? index >= finalItems.length - finalVisibleCount\n            : index < finalVisibleCount);\n        if (!isVisible) {\n          return null;\n        }\n        const dataIndex = indexOffset + index;\n        const itemComponent = renderItem(item, dataIndex);\n\n        return <Fragment key={dataIndex}>{itemComponent}</Fragment>;\n      })}\n\n      {!isCollapseStart && clonedOverflowElement}\n    </Box>\n  );\n});\n\nOverflowList.displayName = '@mantine/core/OverflowList';\nOverflowList.classes = classes;\nOverflowList.varsResolver = varsResolver;\n\nexport namespace OverflowList {\n  export type Props = OverflowListProps;\n  export type Factory = OverflowListFactory;\n  export type StylesNames = OverflowListStylesNames;\n  export type CssVariables = OverflowListCssVariables;\n}\n"],"mappings":"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"}
+{"version":3,"file":"OverflowList.cjs","names":["createVarsResolver","getSpacing","genericFactory","useProps","useStyles","useDimensions","getRowPositionsData","Box","Fragment","classes"],"sources":["../../../src/components/OverflowList/OverflowList.tsx"],"sourcesContent":["// Originally based on https://github.com/Eliav2/react-responsive-overflow-list (MIT License)\n// Contains the modified version adapted for Mantine\nimport { cloneElement, useMemo, useRef, useState } from 'react';\nimport { Fragment } from 'react/jsx-runtime';\nimport { useIsomorphicEffect, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  Factory,\n  genericFactory,\n  getSpacing,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { getRowPositionsData } from './get-row-position-data';\nimport { useDimensions } from './use-dimensions';\nimport classes from './OverflowList.module.css';\n\nexport type OverflowListStylesNames = 'root';\nexport type OverflowListCssVariables = {\n  root: '--ol-gap';\n};\n\nexport interface OverflowListProps<T = any>\n  extends BoxProps, StylesApiProps<OverflowListFactory>, ElementProps<'div', 'children'> {\n  /** Array of items to display */\n  data: T[];\n\n  /** Function to render item */\n  renderItem: (item: T, index: number) => React.ReactNode;\n\n  /** Function to render hidden items */\n  renderOverflow: (items: T[]) => React.ReactNode;\n\n  /** Number of rows to display @default 1 */\n  maxRows?: number;\n\n  /** Maximum number of visible items @default Infinity */\n  maxVisibleItems?: number;\n\n  /** Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem @default 'xs' */\n  gap?: MantineSpacing;\n\n  /** Direction from which items are collapsed when they overflow, `'end'` collapses last items, `'start'` collapses first items @default 'end' */\n  collapseFrom?: 'start' | 'end';\n\n  /** A function to resolve a unique key for each item. Used to detect when the contents of `data`\n   * change (for example when items are reordered while the length stays the same) so the\n   * visible/overflow split can be recomputed. Required to detect reordering when `data` contains\n   * objects; for primitive items (strings, numbers) the item value is used by default. */\n  getItemKey?: (item: T, index: number) => React.Key;\n}\n\nexport type OverflowListFactory = Factory<{\n  props: OverflowListProps<any>;\n  ref: HTMLDivElement;\n  stylesNames: OverflowListStylesNames;\n  vars: OverflowListCssVariables;\n  signature: <T = any>(props: OverflowListProps<T>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  maxRows: 1,\n  maxVisibleItems: Infinity,\n} satisfies Partial<OverflowListProps<any>>;\n\nconst varsResolver = createVarsResolver<OverflowListFactory>((_, { gap }) => ({\n  root: {\n    '--ol-gap': getSpacing(gap),\n  },\n}));\n\nfunction getDataSignature<T>(\n  data: T[],\n  getItemKey: ((item: T, index: number) => React.Key) | undefined\n): string {\n  return data\n    .map((item, index) => {\n      if (getItemKey) {\n        return getItemKey(item, index);\n      }\n      return item !== null && (typeof item === 'object' || typeof item === 'function')\n        ? index\n        : String(item);\n    })\n    .join('\\u0000');\n}\n\nexport const OverflowList = genericFactory<OverflowListFactory>((_props) => {\n  const props = useProps('OverflowList', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    data,\n    renderOverflow,\n    renderItem,\n    maxRows,\n    maxVisibleItems,\n    collapseFrom,\n    getItemKey,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<OverflowListFactory>({\n    name: 'OverflowList',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const [visibleCount, setVisibleCount] = useState(data.length);\n  const [subtractCount, setSubtractCount] = useState(0);\n  const [phase, setPhase] = useState<'normal' | 'measuring' | 'measuring-overflow-indicator'>(\n    'normal'\n  );\n\n  const containerRef = useRef<HTMLElement>(null);\n  const rootRef = useMergedRef(containerRef, ref);\n  const finalVisibleCount = visibleCount - subtractCount;\n  const overflowCount = data.length - finalVisibleCount;\n  const showOverflow = overflowCount > 0 && phase !== 'measuring';\n  const isCollapseStart = collapseFrom === 'start';\n  const overflowItems = isCollapseStart\n    ? data.slice(0, data.length - finalVisibleCount)\n    : data.slice(finalVisibleCount);\n  const overflowElement = showOverflow ? renderOverflow?.(overflowItems) : null;\n\n  const _overflowRef = useRef<HTMLElement>(null);\n  const overflowRef = useMergedRef(_overflowRef, (overflowElement as any)?.ref);\n  const dimensions = useDimensions(containerRef);\n  const dataKey = useMemo(() => getDataSignature(data, getItemKey), [data, getItemKey]);\n\n  useIsomorphicEffect(() => {\n    setPhase('measuring');\n    setVisibleCount(data.length);\n    setSubtractCount(0);\n  }, [dataKey, maxRows, collapseFrom]);\n\n  useIsomorphicEffect(() => {\n    if (phase === 'measuring') {\n      countVisibleItems();\n      setPhase('measuring-overflow-indicator');\n    }\n  }, [phase]);\n\n  useIsomorphicEffect(() => {\n    if (phase === 'measuring-overflow-indicator') {\n      const updateWasNeeded = updateOverflowIndicator();\n      if (!updateWasNeeded) {\n        setPhase('normal');\n      }\n    }\n  }, [phase, subtractCount]);\n\n  useIsomorphicEffect(() => {\n    if (phase === 'normal') {\n      setPhase('measuring');\n      setSubtractCount(0);\n    }\n  }, [dimensions]);\n\n  const fitsInRows = (\n    itemWidths: number[],\n    containerWidth: number,\n    columnGap: number,\n    startIndex = 0\n  ) => {\n    let rows = 1;\n    let rowWidth = 0;\n\n    for (let i = startIndex; i < itemWidths.length; i += 1) {\n      const width = itemWidths[i];\n      const needed = rowWidth > 0 ? width + columnGap : width;\n\n      if (rowWidth + needed > containerWidth && rowWidth > 0) {\n        rows++;\n        if (rows > maxRows!) {\n          return false;\n        }\n        rowWidth = width;\n      } else {\n        rowWidth += needed;\n      }\n    }\n\n    return true;\n  };\n\n  const countVisibleItems = () => {\n    const rowData = getRowPositionsData(containerRef, _overflowRef);\n    if (!rowData) {\n      return;\n    }\n\n    const container = containerRef.current;\n    if (!container) {\n      return;\n    }\n\n    if (isCollapseStart) {\n      const containerWidth = container.getBoundingClientRect().width;\n      const columnGap = parseFloat(getComputedStyle(container).columnGap) || 0;\n      const children = rowData.children;\n      const widths = children.map((child) => child.getBoundingClientRect().width);\n\n      let count = 0;\n      for (let i = widths.length - 1; i >= 0; i--) {\n        if (!fitsInRows(widths, containerWidth, columnGap, i)) {\n          break;\n        }\n        count = widths.length - i;\n      }\n\n      count = Math.min(count, maxVisibleItems!);\n      setVisibleCount(count);\n      return;\n    }\n\n    if (data.length === 1) {\n      const itemRef = rowData.itemsSizesMap[rowData.rowPositions[0]].elements.values().next().value;\n      const containerWidth = container.getBoundingClientRect().width;\n      const itemWidth = itemRef?.getBoundingClientRect().width ?? 0;\n\n      if (itemWidth > containerWidth) {\n        setVisibleCount(0);\n      } else {\n        setVisibleCount(1);\n      }\n\n      return;\n    }\n\n    const visibleRowPositions = rowData.rowPositions.slice(0, maxRows);\n\n    let fittingCount = visibleRowPositions.reduce((acc, position) => {\n      return acc + rowData.itemsSizesMap[position].elements.size;\n    }, 0);\n\n    fittingCount = Math.min(fittingCount, maxVisibleItems);\n    setVisibleCount(fittingCount);\n  };\n\n  const updateOverflowIndicator = () => {\n    if (!_overflowRef.current) {\n      return false;\n    }\n    const rowData = getRowPositionsData(containerRef, _overflowRef);\n    if (!rowData) {\n      return false;\n    }\n\n    const { rowPositions, itemsSizesMap } = rowData;\n\n    if (isCollapseStart) {\n      const container = containerRef.current;\n      if (!container) {\n        return false;\n      }\n      const containerWidth = container.getBoundingClientRect().width;\n      const columnGap = parseFloat(getComputedStyle(container).columnGap) || 0;\n      const overflowWidth = _overflowRef.current.getBoundingClientRect().width;\n      const children = rowData.children;\n      const itemWidths = [\n        overflowWidth,\n        ...children.map((child) => child.getBoundingClientRect().width),\n      ];\n\n      if (!fitsInRows(itemWidths, containerWidth, columnGap)) {\n        setSubtractCount((c) => c + 1);\n        return true;\n      }\n\n      return false;\n    }\n\n    const overflowRect = _overflowRef.current.getBoundingClientRect();\n    const overflowMiddleY = overflowRect.top + overflowRect.height / 2;\n    const lastRowTop = rowPositions[rowPositions.length - 1];\n    const lastRow = itemsSizesMap[lastRowTop];\n\n    if (overflowMiddleY > lastRow.bottom) {\n      setSubtractCount((c) => c + 1);\n      return true;\n    }\n\n    return false;\n  };\n\n  const clonedOverflowElement = overflowElement\n    ? cloneElement(overflowElement as React.ReactElement<any>, { ref: overflowRef })\n    : null;\n\n  let finalItems = data;\n  if (maxVisibleItems) {\n    finalItems = isCollapseStart\n      ? finalItems.slice(-maxVisibleItems!)\n      : finalItems.slice(0, maxVisibleItems);\n  }\n\n  const indexOffset = isCollapseStart ? data.length - finalItems.length : 0;\n\n  return (\n    <Box ref={rootRef} {...getStyles('root')} {...others}>\n      {isCollapseStart && clonedOverflowElement}\n\n      {finalItems.map((item, index) => {\n        const isVisible =\n          phase === 'measuring' ||\n          (isCollapseStart\n            ? index >= finalItems.length - finalVisibleCount\n            : index < finalVisibleCount);\n        if (!isVisible) {\n          return null;\n        }\n        const dataIndex = indexOffset + index;\n        const itemComponent = renderItem(item, dataIndex);\n\n        return <Fragment key={dataIndex}>{itemComponent}</Fragment>;\n      })}\n\n      {!isCollapseStart && clonedOverflowElement}\n    </Box>\n  );\n});\n\nOverflowList.displayName = '@mantine/core/OverflowList';\nOverflowList.classes = classes;\nOverflowList.varsResolver = varsResolver;\n\nexport namespace OverflowList {\n  export type Props = OverflowListProps;\n  export type Factory = OverflowListFactory;\n  export type StylesNames = OverflowListStylesNames;\n  export type CssVariables = OverflowListCssVariables;\n}\n"],"mappings":"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"}

package/cjs/components/Pagination/PaginationEdges/PaginationEdges.cjs

@@ -58,5 +58,6 @@ exports.PaginationFirst = PaginationFirst;
 exports.PaginationLast = PaginationLast;
 exports.PaginationNext = PaginationNext;
 exports.PaginationPrevious = PaginationPrevious;
+exports.createEdgeComponent = createEdgeComponent;
 
 //# sourceMappingURL=PaginationEdges.cjs.map

package/cjs/components/ScrollArea/ScrollArea.cjs

@@ -35,7 +35,7 @@ const varsResolver = require_create_vars_resolver.createVarsResolver((_, { scrol
 });
 const ScrollArea = require_factory.factory((_props) => {
 	const props = require_use_props.useProps("ScrollArea", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, scrollbarSize, vars, type, scrollHideDelay, viewportProps, viewportRef, onScrollPositionChange, children, offsetScrollbars, scrollbars, onBottomReached, onTopReached, onLeftReached, onRightReached, overscrollBehavior, startScrollPosition, attributes, ...others } = props;
+	const { classNames, className, style, styles, unstyled, scrollbarSize, vars, type, scrollHideDelay, viewportProps, viewportRef, onScrollPositionChange, children, offsetScrollbars, scrollbars, onBottomReached, onTopReached, onLeftReached, onRightReached, overscrollBehavior, startScrollPosition, verticalScrollbarPosition, attributes, ...others } = props;
 	const [scrollbarHovered, setScrollbarHovered] = (0, react.useState)(false);
 	const [verticalThumbVisible, setVerticalThumbVisible] = (0, react.useState)(false);
 	const [horizontalThumbVisible, setHorizontalThumbVisible] = (0, react.useState)(false);
@@ -92,6 +92,7 @@ const ScrollArea = require_factory.factory((_props) => {
 				ref: combinedViewportRef,
 				"data-offset-scrollbars": offsetScrollbars === true ? "xy" : offsetScrollbars || void 0,
 				"data-scrollbars": scrollbars || void 0,
+				"data-vertical-scrollbar-position": verticalScrollbarPosition || void 0,
 				"data-horizontal-hidden": offsetScrollbars === "present" && !horizontalThumbVisible ? "true" : void 0,
 				"data-vertical-hidden": offsetScrollbars === "present" && !verticalThumbVisible ? "true" : void 0,
 				onScroll: (e) => {
@@ -119,6 +120,7 @@ const ScrollArea = require_factory.factory((_props) => {
 			(scrollbars === "xy" || scrollbars === "x") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScrollAreaScrollbar.ScrollAreaScrollbar, {
 				...getStyles("scrollbar"),
 				orientation: "horizontal",
+				"data-vertical-scrollbar-position": verticalScrollbarPosition || void 0,
 				"data-hidden": type === "never" || offsetScrollbars === "present" && !horizontalThumbVisible ? true : void 0,
 				forceMount: true,
 				onMouseEnter: () => setScrollbarHovered(true),
@@ -128,6 +130,7 @@ const ScrollArea = require_factory.factory((_props) => {
 			(scrollbars === "xy" || scrollbars === "y") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScrollAreaScrollbar.ScrollAreaScrollbar, {
 				...getStyles("scrollbar"),
 				orientation: "vertical",
+				"data-vertical-scrollbar-position": verticalScrollbarPosition || void 0,
 				"data-hidden": type === "never" || offsetScrollbars === "present" && !verticalThumbVisible ? true : void 0,
 				forceMount: true,
 				onMouseEnter: () => setScrollbarHovered(true),
@@ -136,6 +139,7 @@ const ScrollArea = require_factory.factory((_props) => {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScrollAreaCorner.ScrollAreaCorner, {
 				...getStyles("corner"),
+				"data-vertical-scrollbar-position": verticalScrollbarPosition || void 0,
 				"data-hovered": scrollbarHovered || void 0,
 				"data-hidden": type === "never" || void 0
 			})
@@ -144,7 +148,7 @@ const ScrollArea = require_factory.factory((_props) => {
 });
 ScrollArea.displayName = "@mantine/core/ScrollArea";
 const ScrollAreaAutosize = require_factory.factory((props) => {
-	const { children, classNames, styles, scrollbarSize, scrollHideDelay, type, dir, offsetScrollbars, overscrollBehavior, viewportRef, onScrollPositionChange, unstyled, variant, viewportProps, scrollbars, style, vars, onBottomReached, onTopReached, startScrollPosition, onOverflowChange, ...others } = require_use_props.useProps("ScrollAreaAutosize", defaultProps, props);
+	const { children, classNames, styles, scrollbarSize, scrollHideDelay, type, dir, offsetScrollbars, overscrollBehavior, viewportRef, onScrollPositionChange, unstyled, variant, viewportProps, scrollbars, style, vars, onBottomReached, onTopReached, startScrollPosition, verticalScrollbarPosition, onOverflowChange, ...others } = require_use_props.useProps("ScrollAreaAutosize", defaultProps, props);
 	const viewportObserverRef = (0, react.useRef)(null);
 	const [viewportObserverElement, setViewportObserverElement] = (0, react.useState)(null);
 	const combinedViewportRef = (0, _floating_ui_react.useMergeRefs)([
@@ -213,6 +217,7 @@ const ScrollAreaAutosize = require_factory.factory((props) => {
 				onBottomReached,
 				onTopReached,
 				startScrollPosition,
+				verticalScrollbarPosition,
 				"data-autosize": "true",
 				children
 			})

package/cjs/components/ScrollArea/ScrollArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.cjs","names":["createVarsResolver","rem","factory","useProps","useStyles","ScrollAreaRoot","ScrollAreaViewport","ScrollAreaScrollbar","ScrollAreaThumb","ScrollAreaCorner","Box","classes"],"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import { useCallback, useEffectEvent, useRef, useState } from 'react';\nimport { useMergeRefs } from '@floating-ui/react';\nimport { useIsomorphicEffect } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ScrollAreaCorner } from './ScrollAreaCorner/ScrollAreaCorner';\nimport { ScrollAreaRoot } from './ScrollAreaRoot/ScrollAreaRoot';\nimport { ScrollAreaScrollbar } from './ScrollAreaScrollbar/ScrollAreaScrollbar';\nimport { ScrollAreaThumb } from './ScrollAreaThumb/ScrollAreaThumb';\nimport { ScrollAreaViewport } from './ScrollAreaViewport/ScrollAreaViewport';\nimport { useResizeObserver } from './use-resize-observer';\nimport classes from './ScrollArea.module.css';\n\nexport type ScrollAreaStylesNames =\n  | 'root'\n  | 'viewport'\n  | 'scrollbar'\n  | 'thumb'\n  | 'corner'\n  | 'content';\n\nexport type ScrollAreaCssVariables = {\n  root: '--scrollarea-scrollbar-size';\n};\n\nexport interface ScrollAreaProps\n  extends BoxProps, StylesApiProps<ScrollAreaFactory>, ElementProps<'div'> {\n  /** Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem) */\n  scrollbarSize?: number | string;\n\n  /**\n   * Defines scrollbars behavior\n   * - `'hover'` – scrollbars visible on hover (default)\n   * - `'scroll'` – scrollbars visible during scrolling\n   * - `'auto'` – scrollbars visible only when content overflows (like CSS overflow: auto)\n   * - `'always'` – scrollbars always visible, even when content doesn't overflow\n   * - `'never'` – scrollbars always hidden\n   * @default 'hover'\n   * */\n  type?: 'auto' | 'always' | 'scroll' | 'hover' | 'never';\n\n  /** Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll` @default 1000 */\n  scrollHideDelay?: number;\n\n  /**\n   * Axis at which scrollbars must be rendered\n   * - `'x'` - horizontal scrollbar only\n   * - `'y'` - vertical scrollbar only\n   * - `'xy'` - both scrollbars\n   * - `false` - no scrollbars rendered (content remains scrollable via mouse/touch)\n   * @default 'xy'\n   */\n  scrollbars?: 'x' | 'y' | 'xy' | false;\n\n  /**\n   * Determines whether scrollbars should be offset with padding on given axis\n   * - `true` - adds padding to offset both scrollbars (always)\n   * - `'x'` - adds padding to offset horizontal scrollbar (always)\n   * - `'y'` - adds padding to offset vertical scrollbar (always)\n   * - `'present'` - adds padding only when scrollbars are visible (dynamic)\n   * @default false\n   */\n  offsetScrollbars?: boolean | 'x' | 'y' | 'present';\n\n  /** Assigns viewport element (scrollable container) ref */\n  viewportRef?: React.Ref<HTMLDivElement>;\n\n  /** Props passed down to the viewport element */\n  viewportProps?: React.ComponentProps<'div'>;\n\n  /** Called with current position (`x` and `y` coordinates) when viewport is scrolled */\n  onScrollPositionChange?: (position: { x: number; y: number }) => void;\n\n  /**\n   * Called when scrollarea is scrolled to the bottom (within 0.8px tolerance for sub-pixel rendering)\n   */\n  onBottomReached?: () => void;\n\n  /** Called when scrollarea is scrolled all the way to the top */\n  onTopReached?: () => void;\n\n  /** Called when scrollarea is scrolled to the left (within 0.8px tolerance for sub-pixel rendering) */\n  onLeftReached?: () => void;\n\n  /** Called when scrollarea is scrolled to the right (within 0.8px tolerance for sub-pixel rendering) */\n  onRightReached?: () => void;\n\n  /** Defines `overscroll-behavior` of the viewport */\n  overscrollBehavior?: React.CSSProperties['overscrollBehavior'];\n\n  /** Initial scroll position set on mount */\n  startScrollPosition?: { x?: number; y?: number };\n}\n\nexport interface ScrollAreaAutosizeProps extends ScrollAreaProps {\n  /** Called when content overflows due to max-height, making the container scrollable */\n  onOverflowChange?: (overflowing: boolean) => void;\n}\n\nexport type ScrollAreaFactory = Factory<{\n  props: ScrollAreaProps;\n  ref: HTMLDivElement;\n  stylesNames: ScrollAreaStylesNames;\n  vars: ScrollAreaCssVariables;\n  staticComponents: {\n    Autosize: typeof ScrollAreaAutosize;\n  };\n}>;\n\nexport type ScrollAreaAutosizeFactory = Factory<{\n  props: ScrollAreaAutosizeProps;\n  ref: HTMLDivElement;\n  stylesNames: ScrollAreaStylesNames;\n  vars: ScrollAreaCssVariables;\n}>;\n\nconst defaultProps = {\n  scrollHideDelay: 1000,\n  type: 'hover',\n  scrollbars: 'xy',\n} satisfies Partial<ScrollAreaProps>;\n\nconst varsResolver = createVarsResolver<ScrollAreaFactory>(\n  (_, { scrollbarSize, overscrollBehavior, scrollbars }) => {\n    let overrideOverscrollBehavior = overscrollBehavior;\n\n    if (overscrollBehavior && scrollbars) {\n      if (scrollbars === 'x') {\n        overrideOverscrollBehavior = `${overscrollBehavior} auto`;\n      } else if (scrollbars === 'y') {\n        overrideOverscrollBehavior = `auto ${overscrollBehavior}`;\n      }\n    }\n\n    return {\n      root: {\n        '--scrollarea-scrollbar-size': rem(scrollbarSize),\n        '--scrollarea-over-scroll-behavior': overrideOverscrollBehavior,\n      },\n    };\n  }\n);\n\nexport const ScrollArea = factory<ScrollAreaFactory>((_props) => {\n  const props = useProps('ScrollArea', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    scrollbarSize,\n    vars,\n    type,\n    scrollHideDelay,\n    viewportProps,\n    viewportRef,\n    onScrollPositionChange,\n    children,\n    offsetScrollbars,\n    scrollbars,\n    onBottomReached,\n    onTopReached,\n    onLeftReached,\n    onRightReached,\n    overscrollBehavior,\n    startScrollPosition,\n    attributes,\n    ...others\n  } = props;\n\n  const [scrollbarHovered, setScrollbarHovered] = useState(false);\n  const [verticalThumbVisible, setVerticalThumbVisible] = useState(false);\n  const [horizontalThumbVisible, setHorizontalThumbVisible] = useState(false);\n\n  // Refs to track previous boundary states\n  const prevAtTopRef = useRef(true);\n  const prevAtBottomRef = useRef(false);\n  const prevAtLeftRef = useRef(true);\n  const prevAtRightRef = useRef(false);\n\n  const getStyles = useStyles<ScrollAreaFactory>({\n    name: 'ScrollArea',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const localViewportRef = useRef<HTMLDivElement>(null);\n  const [viewportElement, setViewportElement] = useState<HTMLDivElement | null>(null);\n  const viewportCallbackRef = useCallback((node: HTMLDivElement | null) => {\n    setViewportElement((current) => (current === node ? current : node));\n  }, []);\n  const combinedViewportRef = useMergeRefs([viewportRef, localViewportRef, viewportCallbackRef]);\n\n  useResizeObserver(offsetScrollbars === 'present' ? viewportElement : null, () => {\n    const element = localViewportRef.current;\n    if (element) {\n      setVerticalThumbVisible(element.scrollHeight > element.clientHeight);\n      setHorizontalThumbVisible(element.scrollWidth > element.clientWidth);\n    }\n  });\n\n  useIsomorphicEffect(() => {\n    if (startScrollPosition && localViewportRef.current) {\n      localViewportRef.current.scrollTo({\n        left: startScrollPosition.x ?? 0,\n        top: startScrollPosition.y ?? 0,\n      });\n    }\n  }, []);\n\n  return (\n    <ScrollAreaRoot\n      getStyles={getStyles}\n      type={type === 'never' ? 'always' : type}\n      scrollHideDelay={scrollHideDelay}\n      scrollbars={scrollbars}\n      {...getStyles('root')}\n      {...others}\n    >\n      <ScrollAreaViewport\n        {...viewportProps}\n        {...getStyles('viewport', { style: viewportProps?.style })}\n        ref={combinedViewportRef}\n        data-offset-scrollbars={offsetScrollbars === true ? 'xy' : offsetScrollbars || undefined}\n        data-scrollbars={scrollbars || undefined}\n        data-horizontal-hidden={\n          offsetScrollbars === 'present' && !horizontalThumbVisible ? 'true' : undefined\n        }\n        data-vertical-hidden={\n          offsetScrollbars === 'present' && !verticalThumbVisible ? 'true' : undefined\n        }\n        onScroll={(e) => {\n          viewportProps?.onScroll?.(e);\n          onScrollPositionChange?.({ x: e.currentTarget.scrollLeft, y: e.currentTarget.scrollTop });\n          const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } =\n            e.currentTarget;\n\n          // Vertical boundaries\n          // threshold of -0.8 is required for some browsers that use sub-pixel rendering, specifically when zoomed out.\n          const isAtBottom = scrollTop - (scrollHeight - clientHeight) >= -0.8;\n          const isAtTop = scrollTop === 0;\n\n          if (isAtBottom && !prevAtBottomRef.current) {\n            onBottomReached?.();\n          }\n          if (isAtTop && !prevAtTopRef.current) {\n            onTopReached?.();\n          }\n\n          prevAtBottomRef.current = isAtBottom;\n          prevAtTopRef.current = isAtTop;\n\n          // Horizontal boundaries\n          const isAtRight = scrollLeft - (scrollWidth - clientWidth) >= -0.8;\n          const isAtLeft = scrollLeft === 0;\n\n          if (isAtRight && !prevAtRightRef.current) {\n            onRightReached?.();\n          }\n          if (isAtLeft && !prevAtLeftRef.current) {\n            onLeftReached?.();\n          }\n\n          prevAtRightRef.current = isAtRight;\n          prevAtLeftRef.current = isAtLeft;\n        }}\n      >\n        {children}\n      </ScrollAreaViewport>\n\n      {(scrollbars === 'xy' || scrollbars === 'x') && (\n        <ScrollAreaScrollbar\n          {...getStyles('scrollbar')}\n          orientation=\"horizontal\"\n          data-hidden={\n            type === 'never' || (offsetScrollbars === 'present' && !horizontalThumbVisible)\n              ? true\n              : undefined\n          }\n          forceMount\n          onMouseEnter={() => setScrollbarHovered(true)}\n          onMouseLeave={() => setScrollbarHovered(false)}\n        >\n          <ScrollAreaThumb {...getStyles('thumb')} />\n        </ScrollAreaScrollbar>\n      )}\n\n      {(scrollbars === 'xy' || scrollbars === 'y') && (\n        <ScrollAreaScrollbar\n          {...getStyles('scrollbar')}\n          orientation=\"vertical\"\n          data-hidden={\n            type === 'never' || (offsetScrollbars === 'present' && !verticalThumbVisible)\n              ? true\n              : undefined\n          }\n          forceMount\n          onMouseEnter={() => setScrollbarHovered(true)}\n          onMouseLeave={() => setScrollbarHovered(false)}\n        >\n          <ScrollAreaThumb {...getStyles('thumb')} />\n        </ScrollAreaScrollbar>\n      )}\n\n      <ScrollAreaCorner\n        {...getStyles('corner')}\n        data-hovered={scrollbarHovered || undefined}\n        data-hidden={type === 'never' || undefined}\n      />\n    </ScrollAreaRoot>\n  );\n});\n\nScrollArea.displayName = '@mantine/core/ScrollArea';\n\nexport const ScrollAreaAutosize = factory<ScrollAreaAutosizeFactory>((props) => {\n  const {\n    children,\n    classNames,\n    styles,\n    scrollbarSize,\n    scrollHideDelay,\n    type,\n    dir,\n    offsetScrollbars,\n    overscrollBehavior,\n    viewportRef,\n    onScrollPositionChange,\n    unstyled,\n    variant,\n    viewportProps,\n    scrollbars,\n    style,\n    vars,\n    onBottomReached,\n    onTopReached,\n    startScrollPosition,\n    onOverflowChange,\n    ...others\n  } = useProps('ScrollAreaAutosize', defaultProps, props as ScrollAreaAutosizeProps);\n\n  // Overflow detection (Autosize-only)\n  const viewportObserverRef = useRef<HTMLDivElement>(null);\n  const [viewportObserverElement, setViewportObserverElement] = useState<HTMLDivElement | null>(\n    null\n  );\n  const viewportObserverCallbackRef = useCallback((node: HTMLDivElement | null) => {\n    setViewportObserverElement((current) => (current === node ? current : node));\n  }, []);\n  const combinedViewportRef = useMergeRefs([\n    viewportRef,\n    viewportObserverRef,\n    viewportObserverCallbackRef,\n  ]);\n\n  const overflowingRef = useRef(false);\n  const didMountRef = useRef(false);\n\n  const handleOverflowCheck = useEffectEvent(() => {\n    const el = viewportObserverRef.current;\n    if (!el || !onOverflowChange) {\n      return;\n    }\n\n    const isOverflowing = el.scrollHeight > el.clientHeight;\n\n    if (isOverflowing !== overflowingRef.current) {\n      if (didMountRef.current) {\n        onOverflowChange(isOverflowing);\n      } else {\n        didMountRef.current = true;\n        if (isOverflowing) {\n          onOverflowChange(true);\n        }\n      }\n\n      overflowingRef.current = isOverflowing;\n    }\n  });\n\n  useResizeObserver(onOverflowChange ? viewportObserverElement : null, handleOverflowCheck);\n\n  return (\n    <Box {...others} variant={variant} style={[{ display: 'flex', overflow: 'hidden' }, style]}>\n      <Box\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          flex: 1,\n          overflow: 'hidden',\n          ...(scrollbars === 'y' && { minWidth: 0 }),\n          ...(scrollbars === 'x' && { minHeight: 0 }),\n          ...(scrollbars === 'xy' && { minWidth: 0, minHeight: 0 }),\n          ...(scrollbars === false && { minWidth: 0, minHeight: 0 }),\n        }}\n      >\n        <ScrollArea\n          classNames={classNames}\n          styles={styles}\n          scrollHideDelay={scrollHideDelay}\n          scrollbarSize={scrollbarSize}\n          type={type}\n          dir={dir}\n          offsetScrollbars={offsetScrollbars}\n          overscrollBehavior={overscrollBehavior}\n          viewportRef={combinedViewportRef}\n          onScrollPositionChange={onScrollPositionChange}\n          unstyled={unstyled}\n          variant={variant}\n          viewportProps={viewportProps}\n          vars={vars}\n          scrollbars={scrollbars}\n          onBottomReached={onBottomReached}\n          onTopReached={onTopReached}\n          startScrollPosition={startScrollPosition}\n          data-autosize=\"true\"\n        >\n          {children}\n        </ScrollArea>\n      </Box>\n    </Box>\n  );\n});\n\nScrollArea.classes = classes;\nScrollArea.varsResolver = varsResolver;\nScrollAreaAutosize.displayName = '@mantine/core/ScrollAreaAutosize';\nScrollAreaAutosize.classes = classes;\nScrollArea.Autosize = ScrollAreaAutosize;\n\nexport namespace ScrollArea {\n  export type Props = ScrollAreaProps;\n  export type AutosizeProps = ScrollAreaAutosizeProps;\n  export type StylesNames = ScrollAreaStylesNames;\n  export type CssVariables = ScrollAreaCssVariables;\n  export type Factory = ScrollAreaFactory;\n\n  export namespace Autosize {\n    export type Props = ScrollAreaAutosizeProps;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"ScrollArea.cjs","names":["createVarsResolver","rem","factory","useProps","useStyles","ScrollAreaRoot","ScrollAreaViewport","ScrollAreaScrollbar","ScrollAreaThumb","ScrollAreaCorner","Box","classes"],"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import { useCallback, useEffectEvent, useRef, useState } from 'react';\nimport { useMergeRefs } from '@floating-ui/react';\nimport { useIsomorphicEffect } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ScrollAreaCorner } from './ScrollAreaCorner/ScrollAreaCorner';\nimport { ScrollAreaRoot } from './ScrollAreaRoot/ScrollAreaRoot';\nimport { ScrollAreaScrollbar } from './ScrollAreaScrollbar/ScrollAreaScrollbar';\nimport { ScrollAreaThumb } from './ScrollAreaThumb/ScrollAreaThumb';\nimport { ScrollAreaViewport } from './ScrollAreaViewport/ScrollAreaViewport';\nimport { useResizeObserver } from './use-resize-observer';\nimport classes from './ScrollArea.module.css';\n\nexport type ScrollAreaStylesNames =\n  | 'root'\n  | 'viewport'\n  | 'scrollbar'\n  | 'thumb'\n  | 'corner'\n  | 'content';\n\nexport type ScrollAreaCssVariables = {\n  root: '--scrollarea-scrollbar-size';\n};\n\nexport interface ScrollAreaProps\n  extends BoxProps, StylesApiProps<ScrollAreaFactory>, ElementProps<'div'> {\n  /** Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem) */\n  scrollbarSize?: number | string;\n\n  /**\n   * Defines scrollbars behavior\n   * - `'hover'` – scrollbars visible on hover (default)\n   * - `'scroll'` – scrollbars visible during scrolling\n   * - `'auto'` – scrollbars visible only when content overflows (like CSS overflow: auto)\n   * - `'always'` – scrollbars always visible, even when content doesn't overflow\n   * - `'never'` – scrollbars always hidden\n   * @default 'hover'\n   * */\n  type?: 'auto' | 'always' | 'scroll' | 'hover' | 'never';\n\n  /** Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll` @default 1000 */\n  scrollHideDelay?: number;\n\n  /**\n   * Axis at which scrollbars must be rendered\n   * - `'x'` - horizontal scrollbar only\n   * - `'y'` - vertical scrollbar only\n   * - `'xy'` - both scrollbars\n   * - `false` - no scrollbars rendered (content remains scrollable via mouse/touch)\n   * @default 'xy'\n   */\n  scrollbars?: 'x' | 'y' | 'xy' | false;\n\n  /**\n   * Determines whether scrollbars should be offset with padding on given axis\n   * - `true` - adds padding to offset both scrollbars (always)\n   * - `'x'` - adds padding to offset horizontal scrollbar (always)\n   * - `'y'` - adds padding to offset vertical scrollbar (always)\n   * - `'present'` - adds padding only when scrollbars are visible (dynamic)\n   * @default false\n   */\n  offsetScrollbars?: boolean | 'x' | 'y' | 'present';\n\n  /** Assigns viewport element (scrollable container) ref */\n  viewportRef?: React.Ref<HTMLDivElement>;\n\n  /** Props passed down to the viewport element */\n  viewportProps?: React.ComponentProps<'div'>;\n\n  /** Called with current position (`x` and `y` coordinates) when viewport is scrolled */\n  onScrollPositionChange?: (position: { x: number; y: number }) => void;\n\n  /**\n   * Called when scrollarea is scrolled to the bottom (within 0.8px tolerance for sub-pixel rendering)\n   */\n  onBottomReached?: () => void;\n\n  /** Called when scrollarea is scrolled all the way to the top */\n  onTopReached?: () => void;\n\n  /** Called when scrollarea is scrolled to the left (within 0.8px tolerance for sub-pixel rendering) */\n  onLeftReached?: () => void;\n\n  /** Called when scrollarea is scrolled to the right (within 0.8px tolerance for sub-pixel rendering) */\n  onRightReached?: () => void;\n\n  /** Defines `overscroll-behavior` of the viewport */\n  overscrollBehavior?: React.CSSProperties['overscrollBehavior'];\n\n  /** Initial scroll position set on mount */\n  startScrollPosition?: { x?: number; y?: number };\n\n  /**\n   * Pins the vertical scrollbar to a physical side (`left` or `right`) regardless of direction.\n   * By default, the scrollbar follows the inline-end edge (right in LTR, left in RTL).\n   */\n  verticalScrollbarPosition?: 'left' | 'right';\n}\n\nexport interface ScrollAreaAutosizeProps extends ScrollAreaProps {\n  /** Called when content overflows due to max-height, making the container scrollable */\n  onOverflowChange?: (overflowing: boolean) => void;\n}\n\nexport type ScrollAreaFactory = Factory<{\n  props: ScrollAreaProps;\n  ref: HTMLDivElement;\n  stylesNames: ScrollAreaStylesNames;\n  vars: ScrollAreaCssVariables;\n  staticComponents: {\n    Autosize: typeof ScrollAreaAutosize;\n  };\n}>;\n\nexport type ScrollAreaAutosizeFactory = Factory<{\n  props: ScrollAreaAutosizeProps;\n  ref: HTMLDivElement;\n  stylesNames: ScrollAreaStylesNames;\n  vars: ScrollAreaCssVariables;\n}>;\n\nconst defaultProps = {\n  scrollHideDelay: 1000,\n  type: 'hover',\n  scrollbars: 'xy',\n} satisfies Partial<ScrollAreaProps>;\n\nconst varsResolver = createVarsResolver<ScrollAreaFactory>(\n  (_, { scrollbarSize, overscrollBehavior, scrollbars }) => {\n    let overrideOverscrollBehavior = overscrollBehavior;\n\n    if (overscrollBehavior && scrollbars) {\n      if (scrollbars === 'x') {\n        overrideOverscrollBehavior = `${overscrollBehavior} auto`;\n      } else if (scrollbars === 'y') {\n        overrideOverscrollBehavior = `auto ${overscrollBehavior}`;\n      }\n    }\n\n    return {\n      root: {\n        '--scrollarea-scrollbar-size': rem(scrollbarSize),\n        '--scrollarea-over-scroll-behavior': overrideOverscrollBehavior,\n      },\n    };\n  }\n);\n\nexport const ScrollArea = factory<ScrollAreaFactory>((_props) => {\n  const props = useProps('ScrollArea', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    scrollbarSize,\n    vars,\n    type,\n    scrollHideDelay,\n    viewportProps,\n    viewportRef,\n    onScrollPositionChange,\n    children,\n    offsetScrollbars,\n    scrollbars,\n    onBottomReached,\n    onTopReached,\n    onLeftReached,\n    onRightReached,\n    overscrollBehavior,\n    startScrollPosition,\n    verticalScrollbarPosition,\n    attributes,\n    ...others\n  } = props;\n\n  const [scrollbarHovered, setScrollbarHovered] = useState(false);\n  const [verticalThumbVisible, setVerticalThumbVisible] = useState(false);\n  const [horizontalThumbVisible, setHorizontalThumbVisible] = useState(false);\n\n  // Refs to track previous boundary states\n  const prevAtTopRef = useRef(true);\n  const prevAtBottomRef = useRef(false);\n  const prevAtLeftRef = useRef(true);\n  const prevAtRightRef = useRef(false);\n\n  const getStyles = useStyles<ScrollAreaFactory>({\n    name: 'ScrollArea',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const localViewportRef = useRef<HTMLDivElement>(null);\n  const [viewportElement, setViewportElement] = useState<HTMLDivElement | null>(null);\n  const viewportCallbackRef = useCallback((node: HTMLDivElement | null) => {\n    setViewportElement((current) => (current === node ? current : node));\n  }, []);\n  const combinedViewportRef = useMergeRefs([viewportRef, localViewportRef, viewportCallbackRef]);\n\n  useResizeObserver(offsetScrollbars === 'present' ? viewportElement : null, () => {\n    const element = localViewportRef.current;\n    if (element) {\n      setVerticalThumbVisible(element.scrollHeight > element.clientHeight);\n      setHorizontalThumbVisible(element.scrollWidth > element.clientWidth);\n    }\n  });\n\n  useIsomorphicEffect(() => {\n    if (startScrollPosition && localViewportRef.current) {\n      localViewportRef.current.scrollTo({\n        left: startScrollPosition.x ?? 0,\n        top: startScrollPosition.y ?? 0,\n      });\n    }\n  }, []);\n\n  return (\n    <ScrollAreaRoot\n      getStyles={getStyles}\n      type={type === 'never' ? 'always' : type}\n      scrollHideDelay={scrollHideDelay}\n      scrollbars={scrollbars}\n      {...getStyles('root')}\n      {...others}\n    >\n      <ScrollAreaViewport\n        {...viewportProps}\n        {...getStyles('viewport', { style: viewportProps?.style })}\n        ref={combinedViewportRef}\n        data-offset-scrollbars={offsetScrollbars === true ? 'xy' : offsetScrollbars || undefined}\n        data-scrollbars={scrollbars || undefined}\n        data-vertical-scrollbar-position={verticalScrollbarPosition || undefined}\n        data-horizontal-hidden={\n          offsetScrollbars === 'present' && !horizontalThumbVisible ? 'true' : undefined\n        }\n        data-vertical-hidden={\n          offsetScrollbars === 'present' && !verticalThumbVisible ? 'true' : undefined\n        }\n        onScroll={(e) => {\n          viewportProps?.onScroll?.(e);\n          onScrollPositionChange?.({ x: e.currentTarget.scrollLeft, y: e.currentTarget.scrollTop });\n          const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } =\n            e.currentTarget;\n\n          // Vertical boundaries\n          // threshold of -0.8 is required for some browsers that use sub-pixel rendering, specifically when zoomed out.\n          const isAtBottom = scrollTop - (scrollHeight - clientHeight) >= -0.8;\n          const isAtTop = scrollTop === 0;\n\n          if (isAtBottom && !prevAtBottomRef.current) {\n            onBottomReached?.();\n          }\n          if (isAtTop && !prevAtTopRef.current) {\n            onTopReached?.();\n          }\n\n          prevAtBottomRef.current = isAtBottom;\n          prevAtTopRef.current = isAtTop;\n\n          // Horizontal boundaries\n          const isAtRight = scrollLeft - (scrollWidth - clientWidth) >= -0.8;\n          const isAtLeft = scrollLeft === 0;\n\n          if (isAtRight && !prevAtRightRef.current) {\n            onRightReached?.();\n          }\n          if (isAtLeft && !prevAtLeftRef.current) {\n            onLeftReached?.();\n          }\n\n          prevAtRightRef.current = isAtRight;\n          prevAtLeftRef.current = isAtLeft;\n        }}\n      >\n        {children}\n      </ScrollAreaViewport>\n\n      {(scrollbars === 'xy' || scrollbars === 'x') && (\n        <ScrollAreaScrollbar\n          {...getStyles('scrollbar')}\n          orientation=\"horizontal\"\n          data-vertical-scrollbar-position={verticalScrollbarPosition || undefined}\n          data-hidden={\n            type === 'never' || (offsetScrollbars === 'present' && !horizontalThumbVisible)\n              ? true\n              : undefined\n          }\n          forceMount\n          onMouseEnter={() => setScrollbarHovered(true)}\n          onMouseLeave={() => setScrollbarHovered(false)}\n        >\n          <ScrollAreaThumb {...getStyles('thumb')} />\n        </ScrollAreaScrollbar>\n      )}\n\n      {(scrollbars === 'xy' || scrollbars === 'y') && (\n        <ScrollAreaScrollbar\n          {...getStyles('scrollbar')}\n          orientation=\"vertical\"\n          data-vertical-scrollbar-position={verticalScrollbarPosition || undefined}\n          data-hidden={\n            type === 'never' || (offsetScrollbars === 'present' && !verticalThumbVisible)\n              ? true\n              : undefined\n          }\n          forceMount\n          onMouseEnter={() => setScrollbarHovered(true)}\n          onMouseLeave={() => setScrollbarHovered(false)}\n        >\n          <ScrollAreaThumb {...getStyles('thumb')} />\n        </ScrollAreaScrollbar>\n      )}\n\n      <ScrollAreaCorner\n        {...getStyles('corner')}\n        data-vertical-scrollbar-position={verticalScrollbarPosition || undefined}\n        data-hovered={scrollbarHovered || undefined}\n        data-hidden={type === 'never' || undefined}\n      />\n    </ScrollAreaRoot>\n  );\n});\n\nScrollArea.displayName = '@mantine/core/ScrollArea';\n\nexport const ScrollAreaAutosize = factory<ScrollAreaAutosizeFactory>((props) => {\n  const {\n    children,\n    classNames,\n    styles,\n    scrollbarSize,\n    scrollHideDelay,\n    type,\n    dir,\n    offsetScrollbars,\n    overscrollBehavior,\n    viewportRef,\n    onScrollPositionChange,\n    unstyled,\n    variant,\n    viewportProps,\n    scrollbars,\n    style,\n    vars,\n    onBottomReached,\n    onTopReached,\n    startScrollPosition,\n    verticalScrollbarPosition,\n    onOverflowChange,\n    ...others\n  } = useProps('ScrollAreaAutosize', defaultProps, props as ScrollAreaAutosizeProps);\n\n  // Overflow detection (Autosize-only)\n  const viewportObserverRef = useRef<HTMLDivElement>(null);\n  const [viewportObserverElement, setViewportObserverElement] = useState<HTMLDivElement | null>(\n    null\n  );\n  const viewportObserverCallbackRef = useCallback((node: HTMLDivElement | null) => {\n    setViewportObserverElement((current) => (current === node ? current : node));\n  }, []);\n  const combinedViewportRef = useMergeRefs([\n    viewportRef,\n    viewportObserverRef,\n    viewportObserverCallbackRef,\n  ]);\n\n  const overflowingRef = useRef(false);\n  const didMountRef = useRef(false);\n\n  const handleOverflowCheck = useEffectEvent(() => {\n    const el = viewportObserverRef.current;\n    if (!el || !onOverflowChange) {\n      return;\n    }\n\n    const isOverflowing = el.scrollHeight > el.clientHeight;\n\n    if (isOverflowing !== overflowingRef.current) {\n      if (didMountRef.current) {\n        onOverflowChange(isOverflowing);\n      } else {\n        didMountRef.current = true;\n        if (isOverflowing) {\n          onOverflowChange(true);\n        }\n      }\n\n      overflowingRef.current = isOverflowing;\n    }\n  });\n\n  useResizeObserver(onOverflowChange ? viewportObserverElement : null, handleOverflowCheck);\n\n  return (\n    <Box {...others} variant={variant} style={[{ display: 'flex', overflow: 'hidden' }, style]}>\n      <Box\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          flex: 1,\n          overflow: 'hidden',\n          ...(scrollbars === 'y' && { minWidth: 0 }),\n          ...(scrollbars === 'x' && { minHeight: 0 }),\n          ...(scrollbars === 'xy' && { minWidth: 0, minHeight: 0 }),\n          ...(scrollbars === false && { minWidth: 0, minHeight: 0 }),\n        }}\n      >\n        <ScrollArea\n          classNames={classNames}\n          styles={styles}\n          scrollHideDelay={scrollHideDelay}\n          scrollbarSize={scrollbarSize}\n          type={type}\n          dir={dir}\n          offsetScrollbars={offsetScrollbars}\n          overscrollBehavior={overscrollBehavior}\n          viewportRef={combinedViewportRef}\n          onScrollPositionChange={onScrollPositionChange}\n          unstyled={unstyled}\n          variant={variant}\n          viewportProps={viewportProps}\n          vars={vars}\n          scrollbars={scrollbars}\n          onBottomReached={onBottomReached}\n          onTopReached={onTopReached}\n          startScrollPosition={startScrollPosition}\n          verticalScrollbarPosition={verticalScrollbarPosition}\n          data-autosize=\"true\"\n        >\n          {children}\n        </ScrollArea>\n      </Box>\n    </Box>\n  );\n});\n\nScrollArea.classes = classes;\nScrollArea.varsResolver = varsResolver;\nScrollAreaAutosize.displayName = '@mantine/core/ScrollAreaAutosize';\nScrollAreaAutosize.classes = classes;\nScrollArea.Autosize = ScrollAreaAutosize;\n\nexport namespace ScrollArea {\n  export type Props = ScrollAreaProps;\n  export type AutosizeProps = ScrollAreaAutosizeProps;\n  export type StylesNames = ScrollAreaStylesNames;\n  export type CssVariables = ScrollAreaCssVariables;\n  export type Factory = ScrollAreaFactory;\n\n  export namespace Autosize {\n    export type Props = ScrollAreaAutosizeProps;\n  }\n}\n"],"mappings":"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"}

package/cjs/components/ScrollArea/ScrollArea.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.module.cjs","names":[],"sources":["../../../src/components/ScrollArea/ScrollArea.module.css"],"sourcesContent":[".root {\n  --scrollarea-scrollbar-size: 12px;\n\n  position: relative;\n  overflow: hidden;\n\n  &:where([data-autosize]) .content {\n    min-width: min-content;\n  }\n}\n\n.viewport {\n  scrollbar-width: none;\n  overscroll-behavior: var(--scrollarea-over-scroll-behavior);\n  -ms-overflow-style: none;\n  -webkit-overflow-scrolling: touch;\n  width: 100%;\n  height: 100%;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  &:where([data-scrollbars='xy'], [data-scrollbars='y']) {\n    &:where(\n      [data-offset-scrollbars='xy'],\n      [data-offset-scrollbars='y'],\n      [data-offset-scrollbars='present']\n    ) {\n      &:where([data-vertical-hidden]) {\n        padding-inline-end: 0;\n        padding-inline-start: 0;\n      }\n\n      &:not([data-vertical-hidden]) {\n        padding-inline-end: var(--scrollarea-scrollbar-size);\n        padding-inline-start: unset;\n      }\n    }\n  }\n\n  &:where([data-scrollbars='xy'], [data-scrollbars='x']) {\n    &:where(\n      [data-offset-scrollbars='xy'],\n      [data-offset-scrollbars='x'],\n      [data-offset-scrollbars='present']\n    ) {\n      &:where([data-horizontal-hidden]) {\n        padding-bottom: 0;\n      }\n\n      &:not([data-horizontal-hidden]) {\n        padding-bottom: var(--scrollarea-scrollbar-size);\n      }\n    }\n  }\n}\n\n.viewportInner {\n  min-width: 100%;\n  display: table;\n}\n\n.scrollbar {\n  user-select: none;\n  touch-action: none;\n  box-sizing: border-box;\n  transition:\n    background-color 150ms ease,\n    opacity 150ms ease;\n\n  padding: calc(var(--scrollarea-scrollbar-size) / 5);\n  display: flex;\n  background-color: transparent;\n  flex-direction: row;\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n\n      & > .thumb {\n        background-color: rgba(0, 0, 0, 0.5);\n      }\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-8);\n\n      & > .thumb {\n        background-color: rgba(255, 255, 255, 0.5);\n      }\n    }\n  }\n\n  &:where([data-hidden], [data-state='hidden']) {\n    display: none;\n  }\n\n  &:where([data-orientation='vertical']) {\n    width: var(--scrollarea-scrollbar-size);\n    top: 0;\n    bottom: var(--sa-corner-width);\n    inset-inline-end: 0;\n  }\n\n  &:where([data-orientation='horizontal']) {\n    height: var(--scrollarea-scrollbar-size);\n    flex-direction: column;\n    bottom: 0;\n    inset-inline-start: 0;\n    inset-inline-end: var(--sa-corner-width);\n  }\n}\n\n.thumb {\n  flex: 1;\n  border-radius: var(--scrollarea-scrollbar-size);\n  position: relative;\n  transition: background-color 150ms ease;\n  overflow: hidden;\n  opacity: var(--thumb-opacity);\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 100%;\n    height: 100%;\n    min-width: 44px;\n    min-height: 44px;\n  }\n\n  @mixin where-light {\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n\n  @mixin where-dark {\n    background-color: rgba(255, 255, 255, 0.4);\n  }\n}\n\n.corner {\n  position: absolute;\n  opacity: 0;\n  transition: opacity 150ms ease;\n  display: block;\n  inset-inline-end: 0;\n  bottom: 0;\n\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-0);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-8);\n  }\n\n  &:where([data-hovered]) {\n    opacity: 1;\n  }\n\n  &:where([data-hidden]) {\n    display: none;\n  }\n}\n\n.content {\n  min-width: 100%;\n}\n"],"mappings":""}
+{"version":3,"file":"ScrollArea.module.cjs","names":[],"sources":["../../../src/components/ScrollArea/ScrollArea.module.css"],"sourcesContent":[".root {\n  --scrollarea-scrollbar-size: 12px;\n\n  position: relative;\n  overflow: hidden;\n\n  &:where([data-autosize]) .content {\n    min-width: min-content;\n  }\n}\n\n.viewport {\n  scrollbar-width: none;\n  overscroll-behavior: var(--scrollarea-over-scroll-behavior);\n  -ms-overflow-style: none;\n  -webkit-overflow-scrolling: touch;\n  width: 100%;\n  height: 100%;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  &:where([data-scrollbars='xy'], [data-scrollbars='y']) {\n    &:where(\n      [data-offset-scrollbars='xy'],\n      [data-offset-scrollbars='y'],\n      [data-offset-scrollbars='present']\n    ) {\n      &:where([data-vertical-hidden]) {\n        padding-inline-end: 0;\n        padding-inline-start: 0;\n      }\n\n      &:not([data-vertical-hidden]) {\n        padding-inline-end: var(--scrollarea-scrollbar-size);\n        padding-inline-start: unset;\n\n        &:where([data-vertical-scrollbar-position='left']) {\n          padding-inline-end: unset;\n          padding-left: var(--scrollarea-scrollbar-size);\n          padding-right: unset;\n        }\n\n        &:where([data-vertical-scrollbar-position='right']) {\n          padding-inline-end: unset;\n          padding-left: unset;\n          padding-right: var(--scrollarea-scrollbar-size);\n        }\n      }\n    }\n  }\n\n  &:where([data-scrollbars='xy'], [data-scrollbars='x']) {\n    &:where(\n      [data-offset-scrollbars='xy'],\n      [data-offset-scrollbars='x'],\n      [data-offset-scrollbars='present']\n    ) {\n      &:where([data-horizontal-hidden]) {\n        padding-bottom: 0;\n      }\n\n      &:not([data-horizontal-hidden]) {\n        padding-bottom: var(--scrollarea-scrollbar-size);\n      }\n    }\n  }\n}\n\n.viewportInner {\n  min-width: 100%;\n  display: table;\n}\n\n.scrollbar {\n  user-select: none;\n  touch-action: none;\n  box-sizing: border-box;\n  transition:\n    background-color 150ms ease,\n    opacity 150ms ease;\n\n  padding: calc(var(--scrollarea-scrollbar-size) / 5);\n  display: flex;\n  background-color: transparent;\n  flex-direction: row;\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n\n      & > .thumb {\n        background-color: rgba(0, 0, 0, 0.5);\n      }\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-8);\n\n      & > .thumb {\n        background-color: rgba(255, 255, 255, 0.5);\n      }\n    }\n  }\n\n  &:where([data-hidden], [data-state='hidden']) {\n    display: none;\n  }\n\n  &:where([data-orientation='vertical']) {\n    width: var(--scrollarea-scrollbar-size);\n    top: 0;\n    bottom: var(--sa-corner-width);\n    inset-inline-end: 0;\n\n    &:where([data-vertical-scrollbar-position='left']) {\n      inset-inline-end: auto;\n      left: 0;\n      right: auto;\n    }\n\n    &:where([data-vertical-scrollbar-position='right']) {\n      inset-inline-end: auto;\n      left: auto;\n      right: 0;\n    }\n  }\n\n  &:where([data-orientation='horizontal']) {\n    height: var(--scrollarea-scrollbar-size);\n    flex-direction: column;\n    bottom: 0;\n    inset-inline-start: 0;\n    inset-inline-end: var(--sa-corner-width);\n\n    &:where([data-vertical-scrollbar-position='left']) {\n      inset-inline-start: auto;\n      inset-inline-end: auto;\n      left: var(--sa-corner-width);\n      right: 0;\n    }\n\n    &:where([data-vertical-scrollbar-position='right']) {\n      inset-inline-start: auto;\n      inset-inline-end: auto;\n      left: 0;\n      right: var(--sa-corner-width);\n    }\n  }\n}\n\n.thumb {\n  flex: 1;\n  border-radius: var(--scrollarea-scrollbar-size);\n  position: relative;\n  transition: background-color 150ms ease;\n  overflow: hidden;\n  opacity: var(--thumb-opacity);\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 100%;\n    height: 100%;\n    min-width: 44px;\n    min-height: 44px;\n  }\n\n  @mixin where-light {\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n\n  @mixin where-dark {\n    background-color: rgba(255, 255, 255, 0.4);\n  }\n}\n\n.corner {\n  position: absolute;\n  opacity: 0;\n  transition: opacity 150ms ease;\n  display: block;\n  inset-inline-end: 0;\n  bottom: 0;\n\n  &:where([data-vertical-scrollbar-position='left']) {\n    inset-inline-end: auto;\n    left: 0;\n    right: auto;\n  }\n\n  &:where([data-vertical-scrollbar-position='right']) {\n    inset-inline-end: auto;\n    left: auto;\n    right: 0;\n  }\n\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-0);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-8);\n  }\n\n  &:where([data-hovered]) {\n    opacity: 1;\n  }\n\n  &:where([data-hidden]) {\n    display: none;\n  }\n}\n\n.content {\n  min-width: 100%;\n}\n"],"mappings":""}

package/cjs/components/ScrollArea/ScrollAreaCorner/ScrollAreaCorner.cjs

@@ -35,6 +35,7 @@ function ScrollAreaCorner(props) {
 	return ctx.type !== "scroll" && hasBothScrollbarsVisible ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Corner, { ...props }) : null;
 }
 //#endregion
+exports.Corner = Corner;
 exports.ScrollAreaCorner = ScrollAreaCorner;
 
 //# sourceMappingURL=ScrollAreaCorner.cjs.map

package/cjs/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.cjs

@@ -20,10 +20,14 @@ function Scrollbar(props) {
 	const handleThumbPositionChange = (0, _mantine_hooks.useCallbackRef)(onThumbPositionChange);
 	const handleResize = (0, _mantine_hooks.useDebouncedCallback)(onResize, 10);
 	const handleDragScroll = (event) => {
-		if (rectRef.current) onDragScroll({
-			x: event.clientX - rectRef.current.left,
-			y: event.clientY - rectRef.current.top
-		});
+		if (rectRef.current) {
+			const x = event.clientX - rectRef.current.left;
+			const y = event.clientY - rectRef.current.top;
+			onDragScroll({
+				x,
+				y
+			});
+		}
 	};
 	(0, react.useEffect)(() => {
 		const handleWheel = (event) => {

package/cjs/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Scrollbar.cjs","names":["useScrollAreaContext","ScrollbarProvider","composeEventHandlers"],"sources":["../../../../src/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { useCallbackRef, useDebouncedCallback, useMergedRef } from '@mantine/hooks';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport { Sizes } from '../ScrollArea.types';\nimport { useResizeObserver } from '../use-resize-observer';\nimport { composeEventHandlers } from '../utils';\nimport { ScrollbarContextValue, ScrollbarProvider } from './Scrollbar.context';\n\nexport interface ScrollbarPrivateProps {\n  sizes: Sizes;\n  hasThumb: boolean;\n  onThumbChange: ScrollbarContextValue['onThumbChange'];\n  onThumbPointerUp: ScrollbarContextValue['onThumbPointerUp'];\n  onThumbPointerDown: ScrollbarContextValue['onThumbPointerDown'];\n  onThumbPositionChange: ScrollbarContextValue['onThumbPositionChange'];\n  onWheelScroll: (event: WheelEvent, maxScrollPos: number) => void;\n  onDragScroll: (pointerPos: { x: number; y: number }) => void;\n  onResize: () => void;\n}\n\ninterface ScrollbarProps\n  extends ScrollbarPrivateProps, Omit<React.ComponentProps<'div'>, 'onResize'> {}\n\nexport function Scrollbar(props: ScrollbarProps) {\n  const {\n    sizes,\n    hasThumb,\n    onThumbChange,\n    onThumbPointerUp,\n    onThumbPointerDown,\n    onThumbPositionChange,\n    onDragScroll,\n    onWheelScroll,\n    onResize,\n    ref,\n    ...scrollbarProps\n  } = props;\n  const context = useScrollAreaContext();\n  const [scrollbar, setScrollbar] = useState<HTMLDivElement | null>(null);\n  const composeRefs = useMergedRef(ref, setScrollbar);\n  const rectRef = useRef<DOMRect | null>(null);\n  const prevWebkitUserSelectRef = useRef<string>('');\n  const { viewport } = context;\n  const maxScrollPos = sizes.content - sizes.viewport;\n  const handleWheelScroll = useEffectEvent(onWheelScroll);\n  const handleThumbPositionChange = useCallbackRef(onThumbPositionChange);\n  const handleResize = useDebouncedCallback(onResize, 10);\n\n  const handleDragScroll = (event: React.PointerEvent<HTMLElement>) => {\n    if (rectRef.current) {\n      const x = event.clientX - rectRef.current.left;\n      const y = event.clientY - rectRef.current.top;\n      onDragScroll({ x, y });\n    }\n  };\n\n  useEffect(() => {\n    const handleWheel = (event: WheelEvent) => {\n      const element = event.target as HTMLElement;\n      const isScrollbarWheel = scrollbar?.contains(element);\n      if (isScrollbarWheel) {\n        handleWheelScroll(event, maxScrollPos);\n      }\n    };\n    document.addEventListener('wheel', handleWheel, { passive: false });\n    return () => document.removeEventListener('wheel', handleWheel, { passive: false } as any);\n  }, [viewport, scrollbar, maxScrollPos]);\n\n  useEffect(handleThumbPositionChange, [sizes, handleThumbPositionChange]);\n\n  useResizeObserver(scrollbar, handleResize);\n  useResizeObserver(context.content, handleResize);\n\n  return (\n    <ScrollbarProvider\n      value={{\n        scrollbar,\n        hasThumb,\n        onThumbChange: useCallbackRef(onThumbChange),\n        onThumbPointerUp: useCallbackRef(onThumbPointerUp),\n        onThumbPositionChange: handleThumbPositionChange,\n        onThumbPointerDown: useCallbackRef(onThumbPointerDown),\n      }}\n    >\n      <div\n        {...scrollbarProps}\n        ref={composeRefs}\n        data-mantine-scrollbar\n        style={{ position: 'absolute', ...scrollbarProps.style }}\n        onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n          event.preventDefault();\n\n          const mainPointer = 0;\n          if (event.button === mainPointer) {\n            const element = event.target as HTMLElement;\n            element.setPointerCapture(event.pointerId);\n            rectRef.current = scrollbar!.getBoundingClientRect();\n            /* oxlint-disable typescript/no-deprecated */\n            prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;\n            document.body.style.webkitUserSelect = 'none';\n            handleDragScroll(event);\n          }\n        })}\n        onPointerMove={composeEventHandlers(props.onPointerMove, handleDragScroll)}\n        onPointerUp={composeEventHandlers(props.onPointerUp, (event) => {\n          const element = event.target as HTMLElement;\n          if (element.hasPointerCapture(event.pointerId)) {\n            event.preventDefault();\n            element.releasePointerCapture(event.pointerId);\n          }\n        })}\n        onLostPointerCapture={() => {\n          document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;\n          /* oxlint-enable typescript/no-deprecated */\n          rectRef.current = null;\n        }}\n      />\n    </ScrollbarProvider>\n  );\n}\n"],"mappings":";;;;;;;;;AAuBA,SAAgB,UAAU,OAAuB;CAC/C,MAAM,EACJ,OACA,UACA,eACA,kBACA,oBACA,uBACA,cACA,eACA,UACA,KACA,GAAG,mBACD;CACJ,MAAM,UAAUA,2BAAAA,qBAAqB;CACrC,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,SAAA,CAAgD,IAAI;CACtE,MAAM,eAAA,GAAA,eAAA,aAAA,CAA2B,KAAK,YAAY;CAClD,MAAM,WAAA,GAAA,MAAA,OAAA,CAAiC,IAAI;CAC3C,MAAM,2BAAA,GAAA,MAAA,OAAA,CAAyC,EAAE;CACjD,MAAM,EAAE,aAAa;CACrB,MAAM,eAAe,MAAM,UAAU,MAAM;CAC3C,MAAM,qBAAA,GAAA,MAAA,eAAA,CAAmC,aAAa;CACtD,MAAM,6BAAA,GAAA,eAAA,eAAA,CAA2C,qBAAqB;CACtE,MAAM,gBAAA,GAAA,eAAA,qBAAA,CAAoC,UAAU,EAAE;CAEtD,MAAM,oBAAoB,UAA2C;EACnE,IAAI,QAAQ,SAGV,aAAa;GAAE,GAFL,MAAM,UAAU,QAAQ,QAAQ;GAExB,GADR,MAAM,UAAU,QAAQ,QAAQ;EACtB,CAAC;CAEzB;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,eAAe,UAAsB;GACzC,MAAM,UAAU,MAAM;GAEtB,IADyB,WAAW,SAAS,OAAO,GAElD,kBAAkB,OAAO,YAAY;EAEzC;EACA,SAAS,iBAAiB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAC;EAClE,aAAa,SAAS,oBAAoB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAQ;CAC3F,GAAG;EAAC;EAAU;EAAW;CAAY,CAAC;CAEtC,CAAA,GAAA,MAAA,UAAA,CAAU,2BAA2B,CAAC,OAAO,yBAAyB,CAAC;CAEvE,4BAAA,kBAAkB,WAAW,YAAY;CACzC,4BAAA,kBAAkB,QAAQ,SAAS,YAAY;CAE/C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,0BAAAA,mBAAD;EACE,OAAO;GACL;GACA;GACA,gBAAA,GAAA,eAAA,eAAA,CAA8B,aAAa;GAC3C,mBAAA,GAAA,eAAA,eAAA,CAAiC,gBAAgB;GACjD,uBAAuB;GACvB,qBAAA,GAAA,eAAA,eAAA,CAAmC,kBAAkB;EACvD;YAEA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,0BAAA;GACA,OAAO;IAAE,UAAU;IAAY,GAAG,eAAe;GAAM;GACvD,eAAeC,+BAAAA,qBAAqB,MAAM,gBAAgB,UAAU;IAClE,MAAM,eAAe;IAGrB,IAAI,MAAM,WAAW,GAAa;KAEhC,MADsB,OACd,kBAAkB,MAAM,SAAS;KACzC,QAAQ,UAAU,UAAW,sBAAsB;KAEnD,wBAAwB,UAAU,SAAS,KAAK,MAAM;KACtD,SAAS,KAAK,MAAM,mBAAmB;KACvC,iBAAiB,KAAK;IACxB;GACF,CAAC;GACD,eAAeA,+BAAAA,qBAAqB,MAAM,eAAe,gBAAgB;GACzE,aAAaA,+BAAAA,qBAAqB,MAAM,cAAc,UAAU;IAC9D,MAAM,UAAU,MAAM;IACtB,IAAI,QAAQ,kBAAkB,MAAM,SAAS,GAAG;KAC9C,MAAM,eAAe;KACrB,QAAQ,sBAAsB,MAAM,SAAS;IAC/C;GACF,CAAC;GACD,4BAA4B;IAC1B,SAAS,KAAK,MAAM,mBAAmB,wBAAwB;IAE/D,QAAQ,UAAU;GACpB;EACD,CAAA;CACgB,CAAA;AAEvB"}
+{"version":3,"file":"Scrollbar.cjs","names":["useScrollAreaContext","ScrollbarProvider","composeEventHandlers"],"sources":["../../../../src/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { useCallbackRef, useDebouncedCallback, useMergedRef } from '@mantine/hooks';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport { Sizes } from '../ScrollArea.types';\nimport { useResizeObserver } from '../use-resize-observer';\nimport { composeEventHandlers } from '../utils';\nimport { ScrollbarContextValue, ScrollbarProvider } from './Scrollbar.context';\n\nexport interface ScrollbarPrivateProps {\n  sizes: Sizes;\n  hasThumb: boolean;\n  onThumbChange: ScrollbarContextValue['onThumbChange'];\n  onThumbPointerUp: ScrollbarContextValue['onThumbPointerUp'];\n  onThumbPointerDown: ScrollbarContextValue['onThumbPointerDown'];\n  onThumbPositionChange: ScrollbarContextValue['onThumbPositionChange'];\n  onWheelScroll: (event: WheelEvent, maxScrollPos: number) => void;\n  onDragScroll: (pointerPos: { x: number; y: number }) => void;\n  onResize: () => void;\n}\n\ninterface ScrollbarProps\n  extends ScrollbarPrivateProps, Omit<React.ComponentProps<'div'>, 'onResize'> {}\n\nexport function Scrollbar(props: ScrollbarProps) {\n  const {\n    sizes,\n    hasThumb,\n    onThumbChange,\n    onThumbPointerUp,\n    onThumbPointerDown,\n    onThumbPositionChange,\n    onDragScroll,\n    onWheelScroll,\n    onResize,\n    ref,\n    ...scrollbarProps\n  } = props;\n  const context = useScrollAreaContext();\n  const [scrollbar, setScrollbar] = useState<HTMLDivElement | null>(null);\n  const composeRefs = useMergedRef(ref, setScrollbar);\n  const rectRef = useRef<DOMRect | null>(null);\n  const prevWebkitUserSelectRef = useRef<string>('');\n  const { viewport } = context;\n  const maxScrollPos = sizes.content - sizes.viewport;\n  const handleWheelScroll = useEffectEvent(onWheelScroll);\n  const handleThumbPositionChange = useCallbackRef(onThumbPositionChange);\n  const handleResize = useDebouncedCallback(onResize, 10);\n\n  const handleDragScroll = (event: React.PointerEvent<HTMLElement>) => {\n    if (rectRef.current) {\n      const x = event.clientX - rectRef.current.left;\n      const y = event.clientY - rectRef.current.top;\n      onDragScroll({ x, y });\n    }\n  };\n\n  useEffect(() => {\n    const handleWheel = (event: WheelEvent) => {\n      const element = event.target as HTMLElement;\n      const isScrollbarWheel = scrollbar?.contains(element);\n      if (isScrollbarWheel) {\n        handleWheelScroll(event, maxScrollPos);\n      }\n    };\n    document.addEventListener('wheel', handleWheel, { passive: false });\n    return () => document.removeEventListener('wheel', handleWheel, { passive: false } as any);\n  }, [viewport, scrollbar, maxScrollPos]);\n\n  useEffect(handleThumbPositionChange, [sizes, handleThumbPositionChange]);\n\n  useResizeObserver(scrollbar, handleResize);\n  useResizeObserver(context.content, handleResize);\n\n  return (\n    <ScrollbarProvider\n      value={{\n        scrollbar,\n        hasThumb,\n        onThumbChange: useCallbackRef(onThumbChange),\n        onThumbPointerUp: useCallbackRef(onThumbPointerUp),\n        onThumbPositionChange: handleThumbPositionChange,\n        onThumbPointerDown: useCallbackRef(onThumbPointerDown),\n      }}\n    >\n      <div\n        {...scrollbarProps}\n        ref={composeRefs}\n        data-mantine-scrollbar\n        style={{ position: 'absolute', ...scrollbarProps.style }}\n        onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n          event.preventDefault();\n\n          const mainPointer = 0;\n          if (event.button === mainPointer) {\n            const element = event.target as HTMLElement;\n            element.setPointerCapture(event.pointerId);\n            rectRef.current = scrollbar!.getBoundingClientRect();\n            /* oxlint-disable typescript/no-deprecated */\n            prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;\n            document.body.style.webkitUserSelect = 'none';\n            handleDragScroll(event);\n          }\n        })}\n        onPointerMove={composeEventHandlers(props.onPointerMove, handleDragScroll)}\n        onPointerUp={composeEventHandlers(props.onPointerUp, (event) => {\n          const element = event.target as HTMLElement;\n          if (element.hasPointerCapture(event.pointerId)) {\n            event.preventDefault();\n            element.releasePointerCapture(event.pointerId);\n          }\n        })}\n        onLostPointerCapture={() => {\n          document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;\n          /* oxlint-enable typescript/no-deprecated */\n          rectRef.current = null;\n        }}\n      />\n    </ScrollbarProvider>\n  );\n}\n"],"mappings":";;;;;;;;;AAuBA,SAAgB,UAAU,OAAuB;CAC/C,MAAM,EACJ,OACA,UACA,eACA,kBACA,oBACA,uBACA,cACA,eACA,UACA,KACA,GAAG,mBACD;CACJ,MAAM,UAAUA,2BAAAA,qBAAqB;CACrC,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,SAAA,CAAgD,IAAI;CACtE,MAAM,eAAA,GAAA,eAAA,aAAA,CAA2B,KAAK,YAAY;CAClD,MAAM,WAAA,GAAA,MAAA,OAAA,CAAiC,IAAI;CAC3C,MAAM,2BAAA,GAAA,MAAA,OAAA,CAAyC,EAAE;CACjD,MAAM,EAAE,aAAa;CACrB,MAAM,eAAe,MAAM,UAAU,MAAM;CAC3C,MAAM,qBAAA,GAAA,MAAA,eAAA,CAAmC,aAAa;CACtD,MAAM,6BAAA,GAAA,eAAA,eAAA,CAA2C,qBAAqB;CACtE,MAAM,gBAAA,GAAA,eAAA,qBAAA,CAAoC,UAAU,EAAE;CAEtD,MAAM,oBAAoB,UAA2C;EACnE,IAAI,QAAQ,SAAS;GACnB,MAAM,IAAI,MAAM,UAAU,QAAQ,QAAQ;GAC1C,MAAM,IAAI,MAAM,UAAU,QAAQ,QAAQ;GAC1C,aAAa;IAAE;IAAG;GAAE,CAAC;EACvB;CACF;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,eAAe,UAAsB;GACzC,MAAM,UAAU,MAAM;GAEtB,IADyB,WAAW,SAAS,OAAO,GAElD,kBAAkB,OAAO,YAAY;EAEzC;EACA,SAAS,iBAAiB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAC;EAClE,aAAa,SAAS,oBAAoB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAQ;CAC3F,GAAG;EAAC;EAAU;EAAW;CAAY,CAAC;CAEtC,CAAA,GAAA,MAAA,UAAA,CAAU,2BAA2B,CAAC,OAAO,yBAAyB,CAAC;CAEvE,4BAAA,kBAAkB,WAAW,YAAY;CACzC,4BAAA,kBAAkB,QAAQ,SAAS,YAAY;CAE/C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,0BAAAA,mBAAD;EACE,OAAO;GACL;GACA;GACA,gBAAA,GAAA,eAAA,eAAA,CAA8B,aAAa;GAC3C,mBAAA,GAAA,eAAA,eAAA,CAAiC,gBAAgB;GACjD,uBAAuB;GACvB,qBAAA,GAAA,eAAA,eAAA,CAAmC,kBAAkB;EACvD;YAEA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,0BAAA;GACA,OAAO;IAAE,UAAU;IAAY,GAAG,eAAe;GAAM;GACvD,eAAeC,+BAAAA,qBAAqB,MAAM,gBAAgB,UAAU;IAClE,MAAM,eAAe;IAGrB,IAAI,MAAM,WAAW,GAAa;KAEhC,MADsB,OACd,kBAAkB,MAAM,SAAS;KACzC,QAAQ,UAAU,UAAW,sBAAsB;KAEnD,wBAAwB,UAAU,SAAS,KAAK,MAAM;KACtD,SAAS,KAAK,MAAM,mBAAmB;KACvC,iBAAiB,KAAK;IACxB;GACF,CAAC;GACD,eAAeA,+BAAAA,qBAAqB,MAAM,eAAe,gBAAgB;GACzE,aAAaA,+BAAAA,qBAAqB,MAAM,cAAc,UAAU;IAC9D,MAAM,UAAU,MAAM;IACtB,IAAI,QAAQ,kBAAkB,MAAM,SAAS,GAAG;KAC9C,MAAM,eAAe;KACrB,QAAQ,sBAAsB,MAAM,SAAS;IAC/C;GACF,CAAC;GACD,4BAA4B;IAC1B,SAAS,KAAK,MAAM,mBAAmB,wBAAwB;IAE/D,QAAQ,UAAU;GACpB;EACD,CAAA;CACgB,CAAA;AAEvB"}

package/cjs/components/ScrollArea/ScrollAreaThumb/ScrollAreaThumb.cjs

@@ -26,7 +26,8 @@ function Thumb(props) {
 			const handleScroll = () => {
 				debounceScrollEnd();
 				if (!removeUnlinkedScrollListenerRef.current) {
-					removeUnlinkedScrollListenerRef.current = require_add_unlinked_scroll_listener.addUnlinkedScrollListener(viewport, onThumbPositionChange);
+					const listener = require_add_unlinked_scroll_listener.addUnlinkedScrollListener(viewport, onThumbPositionChange);
+					removeUnlinkedScrollListenerRef.current = listener;
 					onThumbPositionChange();
 				}
 			};
@@ -70,5 +71,6 @@ function ScrollAreaThumb(props) {
 ScrollAreaThumb.displayName = "@mantine/core/ScrollAreaThumb";
 //#endregion
 exports.ScrollAreaThumb = ScrollAreaThumb;
+exports.Thumb = Thumb;
 
 //# sourceMappingURL=ScrollAreaThumb.cjs.map

package/cjs/components/ScrollArea/ScrollAreaThumb/ScrollAreaThumb.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAreaThumb.cjs","names":["useScrollAreaContext","useScrollbarContext","addUnlinkedScrollListener","composeEventHandlers"],"sources":["../../../../src/components/ScrollArea/ScrollAreaThumb/ScrollAreaThumb.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useDebouncedCallback, useMergedRef } from '@mantine/hooks';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport { useScrollbarContext } from '../ScrollAreaScrollbar/Scrollbar.context';\nimport { addUnlinkedScrollListener, composeEventHandlers } from '../utils';\n\ninterface ThumbProps extends React.ComponentProps<'div'> {}\n\nexport function Thumb(props: ThumbProps) {\n  const { style, ref: forwardedRef, ...others } = props;\n  const scrollAreaContext = useScrollAreaContext();\n  const scrollbarContext = useScrollbarContext();\n  const { onThumbPositionChange } = scrollbarContext;\n  const composedRef = useMergedRef(forwardedRef, scrollbarContext.onThumbChange);\n  const removeUnlinkedScrollListenerRef = useRef<(() => void) | undefined>(undefined);\n  const debounceScrollEnd = useDebouncedCallback(() => {\n    if (removeUnlinkedScrollListenerRef.current) {\n      removeUnlinkedScrollListenerRef.current();\n      removeUnlinkedScrollListenerRef.current = undefined;\n    }\n  }, 100);\n\n  useEffect(() => {\n    const { viewport } = scrollAreaContext;\n    if (viewport) {\n      const handleScroll = () => {\n        debounceScrollEnd();\n        if (!removeUnlinkedScrollListenerRef.current) {\n          const listener = addUnlinkedScrollListener(viewport, onThumbPositionChange);\n          removeUnlinkedScrollListenerRef.current = listener;\n          onThumbPositionChange();\n        }\n      };\n      onThumbPositionChange();\n      viewport.addEventListener('scroll', handleScroll);\n      return () => viewport.removeEventListener('scroll', handleScroll);\n    }\n\n    return undefined;\n  }, [scrollAreaContext.viewport, debounceScrollEnd, onThumbPositionChange]);\n\n  return (\n    <div\n      data-state={scrollbarContext.hasThumb ? 'visible' : 'hidden'}\n      {...others}\n      ref={composedRef}\n      style={{\n        width: 'var(--sa-thumb-width)',\n        height: 'var(--sa-thumb-height)',\n        ...style,\n      }}\n      onPointerDownCapture={composeEventHandlers(props.onPointerDownCapture, (event) => {\n        const thumb = event.target as HTMLElement;\n        const thumbRect = thumb.getBoundingClientRect();\n        const x = event.clientX - thumbRect.left;\n        const y = event.clientY - thumbRect.top;\n        scrollbarContext.onThumbPointerDown({ x, y });\n      })}\n      onPointerUp={composeEventHandlers(props.onPointerUp, scrollbarContext.onThumbPointerUp)}\n    />\n  );\n}\n\nThumb.displayName = '@mantine/core/ScrollAreaThumb';\n\ninterface ScrollAreaThumbProps extends ThumbProps {\n  forceMount?: true;\n}\n\nexport function ScrollAreaThumb(props: ScrollAreaThumbProps) {\n  const { forceMount, ...thumbProps } = props;\n  const scrollbarContext = useScrollbarContext();\n\n  if (forceMount || scrollbarContext.hasThumb) {\n    return <Thumb {...thumbProps} />;\n  }\n\n  return null;\n}\n\nScrollAreaThumb.displayName = '@mantine/core/ScrollAreaThumb';\n"],"mappings":";;;;;;;;;AAQA,SAAgB,MAAM,OAAmB;CACvC,MAAM,EAAE,OAAO,KAAK,cAAc,GAAG,WAAW;CAChD,MAAM,oBAAoBA,2BAAAA,qBAAqB;CAC/C,MAAM,mBAAmBC,0BAAAA,oBAAoB;CAC7C,MAAM,EAAE,0BAA0B;CAClC,MAAM,eAAA,GAAA,eAAA,aAAA,CAA2B,cAAc,iBAAiB,aAAa;CAC7E,MAAM,mCAAA,GAAA,MAAA,OAAA,CAAmE,KAAA,CAAS;CAClF,MAAM,qBAAA,GAAA,eAAA,qBAAA,OAA+C;EACnD,IAAI,gCAAgC,SAAS;GAC3C,gCAAgC,QAAQ;GACxC,gCAAgC,UAAU,KAAA;EAC5C;CACF,GAAG,GAAG;CAEN,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,EAAE,aAAa;EACrB,IAAI,UAAU;GACZ,MAAM,qBAAqB;IACzB,kBAAkB;IAClB,IAAI,CAAC,gCAAgC,SAAS;KAE5C,gCAAgC,UADfC,qCAAAA,0BAA0B,UAAU,qBACJ;KACjD,sBAAsB;IACxB;GACF;GACA,sBAAsB;GACtB,SAAS,iBAAiB,UAAU,YAAY;GAChD,aAAa,SAAS,oBAAoB,UAAU,YAAY;EAClE;CAGF,GAAG;EAAC,kBAAkB;EAAU;EAAmB;CAAqB,CAAC;CAEzE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,cAAY,iBAAiB,WAAW,YAAY;EACpD,GAAI;EACJ,KAAK;EACL,OAAO;GACL,OAAO;GACP,QAAQ;GACR,GAAG;EACL;EACA,sBAAsBC,+BAAAA,qBAAqB,MAAM,uBAAuB,UAAU;GAEhF,MAAM,YADQ,MAAM,OACI,sBAAsB;GAC9C,MAAM,IAAI,MAAM,UAAU,UAAU;GACpC,MAAM,IAAI,MAAM,UAAU,UAAU;GACpC,iBAAiB,mBAAmB;IAAE;IAAG;GAAE,CAAC;EAC9C,CAAC;EACD,aAAaA,+BAAAA,qBAAqB,MAAM,aAAa,iBAAiB,gBAAgB;CACvF,CAAA;AAEL;AAEA,MAAM,cAAc;AAMpB,SAAgB,gBAAgB,OAA6B;CAC3D,MAAM,EAAE,YAAY,GAAG,eAAe;CACtC,MAAM,mBAAmBF,0BAAAA,oBAAoB;CAE7C,IAAI,cAAc,iBAAiB,UACjC,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAO,GAAI,WAAa,CAAA;CAGjC,OAAO;AACT;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"ScrollAreaThumb.cjs","names":["useScrollAreaContext","useScrollbarContext","addUnlinkedScrollListener","composeEventHandlers"],"sources":["../../../../src/components/ScrollArea/ScrollAreaThumb/ScrollAreaThumb.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useDebouncedCallback, useMergedRef } from '@mantine/hooks';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport { useScrollbarContext } from '../ScrollAreaScrollbar/Scrollbar.context';\nimport { addUnlinkedScrollListener, composeEventHandlers } from '../utils';\n\ninterface ThumbProps extends React.ComponentProps<'div'> {}\n\nexport function Thumb(props: ThumbProps) {\n  const { style, ref: forwardedRef, ...others } = props;\n  const scrollAreaContext = useScrollAreaContext();\n  const scrollbarContext = useScrollbarContext();\n  const { onThumbPositionChange } = scrollbarContext;\n  const composedRef = useMergedRef(forwardedRef, scrollbarContext.onThumbChange);\n  const removeUnlinkedScrollListenerRef = useRef<(() => void) | undefined>(undefined);\n  const debounceScrollEnd = useDebouncedCallback(() => {\n    if (removeUnlinkedScrollListenerRef.current) {\n      removeUnlinkedScrollListenerRef.current();\n      removeUnlinkedScrollListenerRef.current = undefined;\n    }\n  }, 100);\n\n  useEffect(() => {\n    const { viewport } = scrollAreaContext;\n    if (viewport) {\n      const handleScroll = () => {\n        debounceScrollEnd();\n        if (!removeUnlinkedScrollListenerRef.current) {\n          const listener = addUnlinkedScrollListener(viewport, onThumbPositionChange);\n          removeUnlinkedScrollListenerRef.current = listener;\n          onThumbPositionChange();\n        }\n      };\n      onThumbPositionChange();\n      viewport.addEventListener('scroll', handleScroll);\n      return () => viewport.removeEventListener('scroll', handleScroll);\n    }\n\n    return undefined;\n  }, [scrollAreaContext.viewport, debounceScrollEnd, onThumbPositionChange]);\n\n  return (\n    <div\n      data-state={scrollbarContext.hasThumb ? 'visible' : 'hidden'}\n      {...others}\n      ref={composedRef}\n      style={{\n        width: 'var(--sa-thumb-width)',\n        height: 'var(--sa-thumb-height)',\n        ...style,\n      }}\n      onPointerDownCapture={composeEventHandlers(props.onPointerDownCapture, (event) => {\n        const thumb = event.target as HTMLElement;\n        const thumbRect = thumb.getBoundingClientRect();\n        const x = event.clientX - thumbRect.left;\n        const y = event.clientY - thumbRect.top;\n        scrollbarContext.onThumbPointerDown({ x, y });\n      })}\n      onPointerUp={composeEventHandlers(props.onPointerUp, scrollbarContext.onThumbPointerUp)}\n    />\n  );\n}\n\nThumb.displayName = '@mantine/core/ScrollAreaThumb';\n\ninterface ScrollAreaThumbProps extends ThumbProps {\n  forceMount?: true;\n}\n\nexport function ScrollAreaThumb(props: ScrollAreaThumbProps) {\n  const { forceMount, ...thumbProps } = props;\n  const scrollbarContext = useScrollbarContext();\n\n  if (forceMount || scrollbarContext.hasThumb) {\n    return <Thumb {...thumbProps} />;\n  }\n\n  return null;\n}\n\nScrollAreaThumb.displayName = '@mantine/core/ScrollAreaThumb';\n"],"mappings":";;;;;;;;;AAQA,SAAgB,MAAM,OAAmB;CACvC,MAAM,EAAE,OAAO,KAAK,cAAc,GAAG,WAAW;CAChD,MAAM,oBAAoBA,2BAAAA,qBAAqB;CAC/C,MAAM,mBAAmBC,0BAAAA,oBAAoB;CAC7C,MAAM,EAAE,0BAA0B;CAClC,MAAM,eAAA,GAAA,eAAA,aAAA,CAA2B,cAAc,iBAAiB,aAAa;CAC7E,MAAM,mCAAA,GAAA,MAAA,OAAA,CAAmE,KAAA,CAAS;CAClF,MAAM,qBAAA,GAAA,eAAA,qBAAA,OAA+C;EACnD,IAAI,gCAAgC,SAAS;GAC3C,gCAAgC,QAAQ;GACxC,gCAAgC,UAAU,KAAA;EAC5C;CACF,GAAG,GAAG;CAEN,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,EAAE,aAAa;EACrB,IAAI,UAAU;GACZ,MAAM,qBAAqB;IACzB,kBAAkB;IAClB,IAAI,CAAC,gCAAgC,SAAS;KAC5C,MAAM,WAAWC,qCAAAA,0BAA0B,UAAU,qBAAqB;KAC1E,gCAAgC,UAAU;KAC1C,sBAAsB;IACxB;GACF;GACA,sBAAsB;GACtB,SAAS,iBAAiB,UAAU,YAAY;GAChD,aAAa,SAAS,oBAAoB,UAAU,YAAY;EAClE;CAGF,GAAG;EAAC,kBAAkB;EAAU;EAAmB;CAAqB,CAAC;CAEzE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,cAAY,iBAAiB,WAAW,YAAY;EACpD,GAAI;EACJ,KAAK;EACL,OAAO;GACL,OAAO;GACP,QAAQ;GACR,GAAG;EACL;EACA,sBAAsBC,+BAAAA,qBAAqB,MAAM,uBAAuB,UAAU;GAEhF,MAAM,YADQ,MAAM,OACI,sBAAsB;GAC9C,MAAM,IAAI,MAAM,UAAU,UAAU;GACpC,MAAM,IAAI,MAAM,UAAU,UAAU;GACpC,iBAAiB,mBAAmB;IAAE;IAAG;GAAE,CAAC;EAC9C,CAAC;EACD,aAAaA,+BAAAA,qBAAqB,MAAM,aAAa,iBAAiB,gBAAgB;CACvF,CAAA;AAEL;AAEA,MAAM,cAAc;AAMpB,SAAgB,gBAAgB,OAA6B;CAC3D,MAAM,EAAE,YAAY,GAAG,eAAe;CACtC,MAAM,mBAAmBF,0BAAAA,oBAAoB;CAE7C,IAAI,cAAc,iBAAiB,UACjC,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAO,GAAI,WAAa,CAAA;CAGjC,OAAO;AACT;AAEA,gBAAgB,cAAc"}

package/cjs/components/SimpleGrid/SimpleGridVariables.cjs

@@ -49,7 +49,7 @@ function sortBreakpoints(breakpoints) {
 	return breakpoints.sort((a, b) => require_px.px(a) - require_px.px(b));
 }
 function getUniqueBreakpoints({ spacing, verticalSpacing, cols, minColWidth }) {
-	return sortBreakpoints(Array.from(new Set([
+	return sortBreakpoints(Array.from(/* @__PURE__ */ new Set([
 		...getBreakpoints(spacing),
 		...getBreakpoints(verticalSpacing),
 		...minColWidth !== void 0 ? [] : getBreakpoints(cols)

package/cjs/components/SimpleGrid/SimpleGridVariables.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleGridVariables.cjs","names":["rem","useMantineTheme","filterProps","getSpacing","getBaseValue","keys","InlineStyles","getSortedBreakpoints","px"],"sources":["../../../src/components/SimpleGrid/SimpleGridVariables.tsx"],"sourcesContent":["import {\n  filterProps,\n  getBaseValue,\n  getSortedBreakpoints,\n  getSpacing,\n  InlineStyles,\n  keys,\n  MantineBreakpoint,\n  px,\n  rem,\n  useMantineTheme,\n} from '../../core';\nimport type { SimpleGridProps } from './SimpleGrid';\n\ninterface SimpleGridVariablesProps extends SimpleGridProps {\n  selector: string;\n}\n\nfunction getMinColWidthValue(value: string | number | undefined): string | undefined {\n  if (value === undefined) {\n    return undefined;\n  }\n\n  if (typeof value === 'number') {\n    return rem(value);\n  }\n\n  return value;\n}\n\nexport function SimpleGridMediaVariables({\n  spacing,\n  verticalSpacing,\n  cols,\n  minColWidth,\n  autoRows,\n  selector,\n}: SimpleGridVariablesProps) {\n  const theme = useMantineTheme();\n  const _verticalSpacing = verticalSpacing === undefined ? spacing : verticalSpacing;\n  const useAutoColumns = minColWidth !== undefined;\n\n  const baseStyles: Record<string, string | undefined> = filterProps({\n    '--sg-spacing-x': getSpacing(getBaseValue(spacing)),\n    '--sg-spacing-y': getSpacing(getBaseValue(_verticalSpacing)),\n    '--sg-auto-rows': autoRows,\n    ...(useAutoColumns\n      ? { '--sg-min-col-width': getMinColWidthValue(minColWidth) }\n      : { '--sg-cols': getBaseValue(cols)?.toString() }),\n  });\n\n  const queries = keys(theme.breakpoints).reduce<Record<string, Record<string, any>>>(\n    (acc, breakpoint) => {\n      if (!acc[breakpoint]) {\n        acc[breakpoint] = {};\n      }\n\n      if (typeof spacing === 'object' && spacing[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-spacing-x'] = getSpacing(spacing[breakpoint]);\n      }\n\n      if (typeof _verticalSpacing === 'object' && _verticalSpacing[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-spacing-y'] = getSpacing(_verticalSpacing[breakpoint]);\n      }\n\n      if (!useAutoColumns && typeof cols === 'object' && cols[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-cols'] = cols[breakpoint];\n      }\n\n      return acc;\n    },\n    {}\n  );\n\n  const sortedBreakpoints = getSortedBreakpoints(keys(queries), theme.breakpoints).filter(\n    (breakpoint) => keys(queries[breakpoint.value]).length > 0\n  );\n\n  const media = sortedBreakpoints.map((breakpoint) => ({\n    query: `(min-width: ${theme.breakpoints[breakpoint.value as MantineBreakpoint]})`,\n    styles: queries[breakpoint.value],\n  }));\n\n  return <InlineStyles styles={baseStyles} media={media} selector={selector} />;\n}\n\nfunction getBreakpoints(values: unknown) {\n  if (typeof values === 'object' && values !== null) {\n    return keys(values);\n  }\n\n  return [];\n}\n\nfunction sortBreakpoints(breakpoints: string[]) {\n  return breakpoints.sort((a, b) => (px(a) as number) - (px(b) as number));\n}\n\nfunction getUniqueBreakpoints({\n  spacing,\n  verticalSpacing,\n  cols,\n  minColWidth,\n}: Omit<SimpleGridVariablesProps, 'selector'>) {\n  const breakpoints = Array.from(\n    new Set([\n      ...getBreakpoints(spacing),\n      ...getBreakpoints(verticalSpacing),\n      ...(minColWidth !== undefined ? [] : getBreakpoints(cols)),\n    ])\n  );\n\n  return sortBreakpoints(breakpoints);\n}\n\nexport function SimpleGridContainerVariables({\n  spacing,\n  verticalSpacing,\n  cols,\n  minColWidth,\n  autoRows,\n  selector,\n}: SimpleGridVariablesProps) {\n  const _verticalSpacing = verticalSpacing === undefined ? spacing : verticalSpacing;\n  const useAutoColumns = minColWidth !== undefined;\n\n  const baseStyles: Record<string, string | undefined> = filterProps({\n    '--sg-spacing-x': getSpacing(getBaseValue(spacing)),\n    '--sg-spacing-y': getSpacing(getBaseValue(_verticalSpacing)),\n    '--sg-auto-rows': autoRows,\n    ...(useAutoColumns\n      ? { '--sg-min-col-width': getMinColWidthValue(minColWidth) }\n      : { '--sg-cols': getBaseValue(cols)?.toString() }),\n  });\n\n  const uniqueBreakpoints = getUniqueBreakpoints({ spacing, verticalSpacing, cols, minColWidth });\n\n  const queries = uniqueBreakpoints.reduce<Record<string, Record<string, any>>>(\n    (acc, breakpoint) => {\n      if (!acc[breakpoint]) {\n        acc[breakpoint] = {};\n      }\n\n      if (typeof spacing === 'object' && spacing[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-spacing-x'] = getSpacing(spacing[breakpoint]);\n      }\n\n      if (typeof _verticalSpacing === 'object' && _verticalSpacing[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-spacing-y'] = getSpacing(_verticalSpacing[breakpoint]);\n      }\n\n      if (!useAutoColumns && typeof cols === 'object' && cols[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-cols'] = cols[breakpoint];\n      }\n\n      return acc;\n    },\n    {}\n  );\n\n  const media = uniqueBreakpoints.map((breakpoint) => ({\n    query: `simple-grid (min-width: ${breakpoint})`,\n    styles: queries[breakpoint],\n  }));\n\n  return <InlineStyles styles={baseStyles} container={media} selector={selector} />;\n}\n"],"mappings":"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"}
+{"version":3,"file":"SimpleGridVariables.cjs","names":["rem","useMantineTheme","filterProps","getSpacing","getBaseValue","keys","InlineStyles","getSortedBreakpoints","px"],"sources":["../../../src/components/SimpleGrid/SimpleGridVariables.tsx"],"sourcesContent":["import {\n  filterProps,\n  getBaseValue,\n  getSortedBreakpoints,\n  getSpacing,\n  InlineStyles,\n  keys,\n  MantineBreakpoint,\n  px,\n  rem,\n  useMantineTheme,\n} from '../../core';\nimport type { SimpleGridProps } from './SimpleGrid';\n\ninterface SimpleGridVariablesProps extends SimpleGridProps {\n  selector: string;\n}\n\nfunction getMinColWidthValue(value: string | number | undefined): string | undefined {\n  if (value === undefined) {\n    return undefined;\n  }\n\n  if (typeof value === 'number') {\n    return rem(value);\n  }\n\n  return value;\n}\n\nexport function SimpleGridMediaVariables({\n  spacing,\n  verticalSpacing,\n  cols,\n  minColWidth,\n  autoRows,\n  selector,\n}: SimpleGridVariablesProps) {\n  const theme = useMantineTheme();\n  const _verticalSpacing = verticalSpacing === undefined ? spacing : verticalSpacing;\n  const useAutoColumns = minColWidth !== undefined;\n\n  const baseStyles: Record<string, string | undefined> = filterProps({\n    '--sg-spacing-x': getSpacing(getBaseValue(spacing)),\n    '--sg-spacing-y': getSpacing(getBaseValue(_verticalSpacing)),\n    '--sg-auto-rows': autoRows,\n    ...(useAutoColumns\n      ? { '--sg-min-col-width': getMinColWidthValue(minColWidth) }\n      : { '--sg-cols': getBaseValue(cols)?.toString() }),\n  });\n\n  const queries = keys(theme.breakpoints).reduce<Record<string, Record<string, any>>>(\n    (acc, breakpoint) => {\n      if (!acc[breakpoint]) {\n        acc[breakpoint] = {};\n      }\n\n      if (typeof spacing === 'object' && spacing[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-spacing-x'] = getSpacing(spacing[breakpoint]);\n      }\n\n      if (typeof _verticalSpacing === 'object' && _verticalSpacing[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-spacing-y'] = getSpacing(_verticalSpacing[breakpoint]);\n      }\n\n      if (!useAutoColumns && typeof cols === 'object' && cols[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-cols'] = cols[breakpoint];\n      }\n\n      return acc;\n    },\n    {}\n  );\n\n  const sortedBreakpoints = getSortedBreakpoints(keys(queries), theme.breakpoints).filter(\n    (breakpoint) => keys(queries[breakpoint.value]).length > 0\n  );\n\n  const media = sortedBreakpoints.map((breakpoint) => ({\n    query: `(min-width: ${theme.breakpoints[breakpoint.value as MantineBreakpoint]})`,\n    styles: queries[breakpoint.value],\n  }));\n\n  return <InlineStyles styles={baseStyles} media={media} selector={selector} />;\n}\n\nfunction getBreakpoints(values: unknown) {\n  if (typeof values === 'object' && values !== null) {\n    return keys(values);\n  }\n\n  return [];\n}\n\nfunction sortBreakpoints(breakpoints: string[]) {\n  return breakpoints.sort((a, b) => (px(a) as number) - (px(b) as number));\n}\n\nfunction getUniqueBreakpoints({\n  spacing,\n  verticalSpacing,\n  cols,\n  minColWidth,\n}: Omit<SimpleGridVariablesProps, 'selector'>) {\n  const breakpoints = Array.from(\n    new Set([\n      ...getBreakpoints(spacing),\n      ...getBreakpoints(verticalSpacing),\n      ...(minColWidth !== undefined ? [] : getBreakpoints(cols)),\n    ])\n  );\n\n  return sortBreakpoints(breakpoints);\n}\n\nexport function SimpleGridContainerVariables({\n  spacing,\n  verticalSpacing,\n  cols,\n  minColWidth,\n  autoRows,\n  selector,\n}: SimpleGridVariablesProps) {\n  const _verticalSpacing = verticalSpacing === undefined ? spacing : verticalSpacing;\n  const useAutoColumns = minColWidth !== undefined;\n\n  const baseStyles: Record<string, string | undefined> = filterProps({\n    '--sg-spacing-x': getSpacing(getBaseValue(spacing)),\n    '--sg-spacing-y': getSpacing(getBaseValue(_verticalSpacing)),\n    '--sg-auto-rows': autoRows,\n    ...(useAutoColumns\n      ? { '--sg-min-col-width': getMinColWidthValue(minColWidth) }\n      : { '--sg-cols': getBaseValue(cols)?.toString() }),\n  });\n\n  const uniqueBreakpoints = getUniqueBreakpoints({ spacing, verticalSpacing, cols, minColWidth });\n\n  const queries = uniqueBreakpoints.reduce<Record<string, Record<string, any>>>(\n    (acc, breakpoint) => {\n      if (!acc[breakpoint]) {\n        acc[breakpoint] = {};\n      }\n\n      if (typeof spacing === 'object' && spacing[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-spacing-x'] = getSpacing(spacing[breakpoint]);\n      }\n\n      if (typeof _verticalSpacing === 'object' && _verticalSpacing[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-spacing-y'] = getSpacing(_verticalSpacing[breakpoint]);\n      }\n\n      if (!useAutoColumns && typeof cols === 'object' && cols[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-cols'] = cols[breakpoint];\n      }\n\n      return acc;\n    },\n    {}\n  );\n\n  const media = uniqueBreakpoints.map((breakpoint) => ({\n    query: `simple-grid (min-width: ${breakpoint})`,\n    styles: queries[breakpoint],\n  }));\n\n  return <InlineStyles styles={baseStyles} container={media} selector={selector} />;\n}\n"],"mappings":"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"}