@mantine/core 9.2.1 → 9.2.2

package/cjs/components/Drawer/DrawerRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerRoot.cjs","names":["getDefaultZIndex","createVarsResolver","getSize","rem","factory","useProps","useDirection","useStyles","DrawerProvider","ModalBase","ScrollArea","classes"],"sources":["../../../src/components/Drawer/DrawerRoot.tsx"],"sourcesContent":["import {\n  createVarsResolver,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  getSize,\n  MantineRadius,\n  rem,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ModalBase, ModalBaseProps, ModalBaseStylesNames } from '../ModalBase';\nimport { ScrollArea } from '../ScrollArea';\nimport { MantineTransition } from '../Transition';\nimport { DrawerProvider, ScrollAreaComponent } from './Drawer.context';\nimport classes from './Drawer.module.css';\n\ntype DrawerPosition = 'bottom' | 'left' | 'right' | 'top';\n\nfunction getDrawerAlign(position: DrawerPosition | undefined) {\n  switch (position) {\n    case 'top':\n      return 'flex-start';\n    case 'bottom':\n      return 'flex-end';\n    default:\n      return undefined;\n  }\n}\n\nfunction getDrawerFlex(position: DrawerPosition | undefined) {\n  if (position === 'top' || position === 'bottom') {\n    return '0 0 calc(100% - var(--drawer-offset, 0rem) * 2)';\n  }\n\n  return undefined;\n}\n\nexport type DrawerRootStylesNames = ModalBaseStylesNames;\nexport type DrawerRootCssVariables = {\n  root:\n    | '--drawer-size'\n    | '--drawer-flex'\n    | '--drawer-height'\n    | '--drawer-align'\n    | '--drawer-justify'\n    | '--drawer-offset';\n};\n\nexport interface DrawerRootProps extends StylesApiProps<DrawerRootFactory>, ModalBaseProps {\n  /** Scroll area component @default 'div' */\n  scrollAreaComponent?: ScrollAreaComponent;\n\n  /** Side of the screen on which drawer will be opened @default 'left' */\n  position?: DrawerPosition;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 0 */\n  radius?: MantineRadius;\n\n  /** Drawer container offset from the viewport end @default 0 */\n  offset?: number | string;\n}\n\nexport type DrawerRootFactory = Factory<{\n  props: DrawerRootProps;\n  ref: HTMLDivElement;\n  stylesNames: DrawerRootStylesNames;\n  vars: DrawerRootCssVariables;\n  compound: true;\n}>;\n\nconst transitions: Record<DrawerPosition, MantineTransition> = {\n  top: 'slide-down',\n  bottom: 'slide-up',\n  left: 'slide-right',\n  right: 'slide-left',\n};\n\nconst rtlTransitions: Record<DrawerPosition, MantineTransition> = {\n  top: 'slide-down',\n  bottom: 'slide-up',\n  right: 'slide-right',\n  left: 'slide-left',\n};\n\nconst defaultProps = {\n  closeOnClickOutside: true,\n  withinPortal: true,\n  lockScroll: true,\n  trapFocus: true,\n  returnFocus: true,\n  closeOnEscape: true,\n  keepMounted: false,\n  zIndex: getDefaultZIndex('modal'),\n  position: 'left',\n} satisfies Partial<DrawerRootProps>;\n\nconst varsResolver = createVarsResolver<DrawerRootFactory>((_, { position, size, offset }) => ({\n  root: {\n    '--drawer-size': getSize(size, 'drawer-size'),\n    '--drawer-flex': getDrawerFlex(position),\n    '--drawer-height':\n      position === 'left' || position === 'right' ? undefined : 'var(--drawer-size)',\n    '--drawer-align': getDrawerAlign(position),\n    '--drawer-justify': position === 'right' ? 'flex-end' : undefined,\n    '--drawer-offset': rem(offset),\n  },\n}));\n\nexport const DrawerRoot = factory<DrawerRootFactory>((_props) => {\n  const props = useProps('DrawerRoot', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    scrollAreaComponent,\n    position,\n    transitionProps,\n    radius,\n    attributes,\n    ...others\n  } = props;\n\n  const { dir } = useDirection();\n\n  const getStyles = useStyles<DrawerRootFactory>({\n    name: 'Drawer',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const drawerTransition = (dir === 'rtl' ? rtlTransitions : transitions)[position];\n\n  return (\n    <DrawerProvider value={{ scrollAreaComponent, getStyles, radius }}>\n      <ModalBase\n        {...getStyles('root')}\n        transitionProps={{ transition: drawerTransition, ...transitionProps }}\n        data-offset-scrollbars={scrollAreaComponent === ScrollArea.Autosize || undefined}\n        unstyled={unstyled}\n        {...others}\n      />\n    </DrawerProvider>\n  );\n});\n\nDrawerRoot.classes = classes;\nDrawerRoot.varsResolver = varsResolver;\nDrawerRoot.displayName = '@mantine/core/DrawerRoot';\n"],"mappings":";;;;;;;;;;;;;;;;AAqBA,SAAS,eAAe,UAAsC;CAC5D,QAAQ,UAAR;EACE,KAAK,OACH,OAAO;EACT,KAAK,UACH,OAAO;EACT,SACE;CACJ;AACF;AAEA,SAAS,cAAc,UAAsC;CAC3D,IAAI,aAAa,SAAS,aAAa,UACrC,OAAO;AAIX;AAmCA,MAAM,cAAyD;CAC7D,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;AACT;AAEA,MAAM,iBAA4D;CAChE,KAAK;CACL,QAAQ;CACR,OAAO;CACP,MAAM;AACR;AAEA,MAAM,eAAe;CACnB,qBAAqB;CACrB,cAAc;CACd,YAAY;CACZ,WAAW;CACX,aAAa;CACb,eAAe;CACf,aAAa;CACb,QAAQA,4BAAAA,iBAAiB,OAAO;CAChC,UAAU;AACZ;AAEA,MAAM,eAAeC,6BAAAA,oBAAuC,GAAG,EAAE,UAAU,MAAM,cAAc,EAC7F,MAAM;CACJ,iBAAiBC,iBAAAA,QAAQ,MAAM,aAAa;CAC5C,iBAAiB,cAAc,QAAQ;CACvC,mBACE,aAAa,UAAU,aAAa,UAAU,KAAA,IAAY;CAC5D,kBAAkB,eAAe,QAAQ;CACzC,oBAAoB,aAAa,UAAU,aAAa,KAAA;CACxD,mBAAmBC,YAAAA,IAAI,MAAM;AAC/B,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,qBACA,UACA,iBACA,QACA,YACA,GAAG,WACD;CAEJ,MAAM,EAAE,QAAQC,0BAAAA,aAAa;CAE7B,MAAM,YAAYC,mBAAAA,UAA6B;EAC7C,MAAM;EACN,SAAA,sBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,oBAAoB,QAAQ,QAAQ,iBAAiB,aAAa;CAExE,OACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,gBAAD;EAAgB,OAAO;GAAE;GAAqB;GAAW;EAAO;YAC9D,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;GACE,GAAI,UAAU,MAAM;GACpB,iBAAiB;IAAE,YAAY;IAAkB,GAAG;GAAgB;GACpE,0BAAwB,wBAAwBC,mBAAAA,WAAW,YAAY,KAAA;GAC7D;GACV,GAAI;EACL,CAAA;CACa,CAAA;AAEpB,CAAC;AAED,WAAW,UAAUC,sBAAAA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}
+{"version":3,"file":"DrawerRoot.cjs","names":["getDefaultZIndex","createVarsResolver","getSize","rem","factory","useProps","useDirection","useStyles","DrawerProvider","ModalBase","ScrollArea","classes"],"sources":["../../../src/components/Drawer/DrawerRoot.tsx"],"sourcesContent":["import {\n  createVarsResolver,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  getSize,\n  MantineRadius,\n  rem,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ModalBase, ModalBaseProps, ModalBaseStylesNames } from '../ModalBase';\nimport { ScrollArea } from '../ScrollArea';\nimport { MantineTransition } from '../Transition';\nimport { DrawerProvider, ScrollAreaComponent } from './Drawer.context';\nimport classes from './Drawer.module.css';\n\ntype DrawerPosition = 'bottom' | 'left' | 'right' | 'top';\n\nfunction getDrawerAlign(position: DrawerPosition | undefined) {\n  switch (position) {\n    case 'top':\n      return 'flex-start';\n    case 'bottom':\n      return 'flex-end';\n    default:\n      return undefined;\n  }\n}\n\nfunction getDrawerFlex(position: DrawerPosition | undefined) {\n  if (position === 'top' || position === 'bottom') {\n    return '0 0 calc(100% - var(--drawer-offset, 0rem) * 2)';\n  }\n\n  return undefined;\n}\n\nexport type DrawerRootStylesNames = ModalBaseStylesNames;\nexport type DrawerRootCssVariables = {\n  root:\n    | '--drawer-size'\n    | '--drawer-flex'\n    | '--drawer-height'\n    | '--drawer-align'\n    | '--drawer-justify'\n    | '--drawer-offset';\n};\n\nexport interface DrawerRootProps extends StylesApiProps<DrawerRootFactory>, ModalBaseProps {\n  /** Scroll area component @default 'div' */\n  scrollAreaComponent?: ScrollAreaComponent;\n\n  /** Side of the screen on which drawer will be opened @default 'left' */\n  position?: DrawerPosition;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 0 */\n  radius?: MantineRadius;\n\n  /** Drawer container offset from the viewport end @default 0 */\n  offset?: number | string;\n}\n\nexport type DrawerRootFactory = Factory<{\n  props: DrawerRootProps;\n  ref: HTMLDivElement;\n  stylesNames: DrawerRootStylesNames;\n  vars: DrawerRootCssVariables;\n}>;\n\nconst transitions: Record<DrawerPosition, MantineTransition> = {\n  top: 'slide-down',\n  bottom: 'slide-up',\n  left: 'slide-right',\n  right: 'slide-left',\n};\n\nconst rtlTransitions: Record<DrawerPosition, MantineTransition> = {\n  top: 'slide-down',\n  bottom: 'slide-up',\n  right: 'slide-right',\n  left: 'slide-left',\n};\n\nconst defaultProps = {\n  closeOnClickOutside: true,\n  withinPortal: true,\n  lockScroll: true,\n  trapFocus: true,\n  returnFocus: true,\n  closeOnEscape: true,\n  keepMounted: false,\n  zIndex: getDefaultZIndex('modal'),\n  position: 'left',\n} satisfies Partial<DrawerRootProps>;\n\nconst varsResolver = createVarsResolver<DrawerRootFactory>((_, { position, size, offset }) => ({\n  root: {\n    '--drawer-size': getSize(size, 'drawer-size'),\n    '--drawer-flex': getDrawerFlex(position),\n    '--drawer-height':\n      position === 'left' || position === 'right' ? undefined : 'var(--drawer-size)',\n    '--drawer-align': getDrawerAlign(position),\n    '--drawer-justify': position === 'right' ? 'flex-end' : undefined,\n    '--drawer-offset': rem(offset),\n  },\n}));\n\nexport const DrawerRoot = factory<DrawerRootFactory>((_props) => {\n  const props = useProps('DrawerRoot', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    scrollAreaComponent,\n    position,\n    transitionProps,\n    radius,\n    attributes,\n    ...others\n  } = props;\n\n  const { dir } = useDirection();\n\n  const getStyles = useStyles<DrawerRootFactory>({\n    name: 'Drawer',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const drawerTransition = (dir === 'rtl' ? rtlTransitions : transitions)[position];\n\n  return (\n    <DrawerProvider value={{ scrollAreaComponent, getStyles, radius }}>\n      <ModalBase\n        {...getStyles('root')}\n        transitionProps={{ transition: drawerTransition, ...transitionProps }}\n        data-offset-scrollbars={scrollAreaComponent === ScrollArea.Autosize || undefined}\n        unstyled={unstyled}\n        {...others}\n      />\n    </DrawerProvider>\n  );\n});\n\nDrawerRoot.classes = classes;\nDrawerRoot.varsResolver = varsResolver;\nDrawerRoot.displayName = '@mantine/core/DrawerRoot';\n"],"mappings":";;;;;;;;;;;;;;;;AAqBA,SAAS,eAAe,UAAsC;CAC5D,QAAQ,UAAR;EACE,KAAK,OACH,OAAO;EACT,KAAK,UACH,OAAO;EACT,SACE;CACJ;AACF;AAEA,SAAS,cAAc,UAAsC;CAC3D,IAAI,aAAa,SAAS,aAAa,UACrC,OAAO;AAIX;AAkCA,MAAM,cAAyD;CAC7D,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;AACT;AAEA,MAAM,iBAA4D;CAChE,KAAK;CACL,QAAQ;CACR,OAAO;CACP,MAAM;AACR;AAEA,MAAM,eAAe;CACnB,qBAAqB;CACrB,cAAc;CACd,YAAY;CACZ,WAAW;CACX,aAAa;CACb,eAAe;CACf,aAAa;CACb,QAAQA,4BAAAA,iBAAiB,OAAO;CAChC,UAAU;AACZ;AAEA,MAAM,eAAeC,6BAAAA,oBAAuC,GAAG,EAAE,UAAU,MAAM,cAAc,EAC7F,MAAM;CACJ,iBAAiBC,iBAAAA,QAAQ,MAAM,aAAa;CAC5C,iBAAiB,cAAc,QAAQ;CACvC,mBACE,aAAa,UAAU,aAAa,UAAU,KAAA,IAAY;CAC5D,kBAAkB,eAAe,QAAQ;CACzC,oBAAoB,aAAa,UAAU,aAAa,KAAA;CACxD,mBAAmBC,YAAAA,IAAI,MAAM;AAC/B,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,qBACA,UACA,iBACA,QACA,YACA,GAAG,WACD;CAEJ,MAAM,EAAE,QAAQC,0BAAAA,aAAa;CAE7B,MAAM,YAAYC,mBAAAA,UAA6B;EAC7C,MAAM;EACN,SAAA,sBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,oBAAoB,QAAQ,QAAQ,iBAAiB,aAAa;CAExE,OACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,gBAAD;EAAgB,OAAO;GAAE;GAAqB;GAAW;EAAO;YAC9D,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;GACE,GAAI,UAAU,MAAM;GACpB,iBAAiB;IAAE,YAAY;IAAkB,GAAG;GAAgB;GACpE,0BAAwB,wBAAwBC,mBAAAA,WAAW,YAAY,KAAA;GAC7D;GACV,GAAI;EACL,CAAA;CACa,CAAA;AAEpB,CAAC;AAED,WAAW,UAAUC,sBAAAA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}

package/cjs/components/Input/Input.cjs

@@ -46,7 +46,7 @@ const varsResolver = require_create_vars_resolver.createVarsResolver((_, props,
 } }));
 const Input = require_polymorphic_factory.polymorphicFactory((_props) => {
 	const props = require_use_props.useProps("Input", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, required, __staticSelector, __stylesApiProps, size, wrapperProps, error, disabled, leftSection, leftSectionProps, leftSectionWidth, rightSection, rightSectionProps, rightSectionWidth, rightSectionPointerEvents, leftSectionPointerEvents, variant, vars, pointer, multiline, radius, id, withAria, withErrorStyles, mod, inputSize, attributes, __clearSection, __clearable, __clearSectionMode, __defaultRightSection, loading, loadingPosition, rootRef, ...others } = props;
+	const { classNames, className, style, styles, unstyled, required, __staticSelector, __stylesApiProps, size, wrapperProps, error, disabled, leftSection, leftSectionProps, leftSectionWidth, rightSection, rightSectionProps, rightSectionWidth, rightSectionPointerEvents, leftSectionPointerEvents, variant, vars, pointer, multiline, radius, id, withAria, withErrorStyles, mod, inputSize, attributes, __clearSection, __clearable, __clearSectionMode, __defaultRightSection, loading, loadingPosition, rootRef, dir, ...others } = props;
 	const { styleProps, rest } = require_extract_style_props.extractStyleProps(others);
 	const ctx = (0, react.use)(require_InputWrapper_context.InputWrapperContext);
 	const stylesCtx = {
@@ -89,6 +89,7 @@ const Input = require_polymorphic_factory.polymorphicFactory((_props) => {
 		value: { size: size || "sm" },
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
 			ref: rootRef,
+			dir,
 			...getStyles("wrapper"),
 			...styleProps,
 			...wrapperProps,

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

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs","names":["createVarsResolver","getSize","getFontSize","getRadius","rem","polymorphicFactory","useProps","extractStyleProps","InputWrapperContext","useStyles","Loader","InputClearSection","InputContext","Box","classes","InputWrapper","InputLabel","InputError","InputDescription","InputPlaceholder","InputClearButton"],"sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  extractStyleProps,\n  getFontSize,\n  getRadius,\n  getSize,\n  MantineRadius,\n  MantineSize,\n  polymorphicFactory,\n  PolymorphicFactory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Loader } from '../Loader/Loader';\nimport { InputContext } from './Input.context';\nimport {\n  InputClearButton,\n  type InputClearButtonProps,\n  type InputClearButtonFactory,\n} from './InputClearButton/InputClearButton';\nimport {\n  ClearSectionMode,\n  InputClearSection,\n  type InputClearSectionProps,\n} from './InputClearSection/InputClearSection';\nimport {\n  InputDescription,\n  type InputDescriptionProps,\n  type InputDescriptionStylesNames,\n  type InputDescriptionCssVariables,\n  type InputDescriptionFactory,\n} from './InputDescription/InputDescription';\nimport {\n  InputError,\n  type InputErrorProps,\n  type InputErrorStylesNames,\n  type InputErrorCssVariables,\n  type InputErrorFactory,\n} from './InputError/InputError';\nimport {\n  InputLabel,\n  type InputLabelProps,\n  type InputLabelStylesNames,\n  type InputLabelCssVariables,\n  type InputLabelFactory,\n} from './InputLabel/InputLabel';\nimport {\n  InputPlaceholder,\n  type InputPlaceholderProps,\n  type InputPlaceholderStylesNames,\n  type InputPlaceholderFactory,\n} from './InputPlaceholder/InputPlaceholder';\nimport { InputWrapperContext } from './InputWrapper.context';\nimport {\n  __InputWrapperProps,\n  InputWrapper,\n  InputWrapperStylesNames,\n  type InputWrapperProps,\n  type InputWrapperFactory,\n} from './InputWrapper/InputWrapper';\nimport classes from './Input.module.css';\n// Required to be a separate type for docgen script\ntype WrapperProps = React.ComponentProps<'div'> & DataAttributes;\n\nexport interface __BaseInputProps extends __InputWrapperProps, __InputProps {\n  /** Props passed down to the root element */\n  wrapperProps?: WrapperProps;\n}\n\nexport type __InputStylesNames = InputStylesNames | InputWrapperStylesNames;\n\nexport type InputStylesNames = 'input' | 'wrapper' | 'section';\nexport type InputVariant = 'default' | 'filled' | 'unstyled';\nexport type InputCssVariables = {\n  wrapper:\n    | '--input-height'\n    | '--input-fz'\n    | '--input-radius'\n    | '--input-left-section-width'\n    | '--input-right-section-width'\n    | '--input-left-section-pointer-events'\n    | '--input-right-section-pointer-events'\n    | '--input-padding-y'\n    | '--input-margin-top'\n    | '--input-margin-bottom';\n};\n\nexport interface InputStylesCtx {\n  offsetTop: boolean | undefined;\n  offsetBottom: boolean | undefined;\n}\n\nexport interface __InputProps {\n  /** Content section displayed on the left side of the input */\n  leftSection?: React.ReactNode;\n\n  /** Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height */\n  leftSectionWidth?: React.CSSProperties['width'];\n\n  /** Props passed down to the `leftSection` element */\n  leftSectionProps?: React.ComponentProps<'div'>;\n\n  /** Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). @default 'none' */\n  leftSectionPointerEvents?: React.CSSProperties['pointerEvents'];\n\n  /** Content section displayed on the right side of the input */\n  rightSection?: React.ReactNode;\n\n  /** Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height */\n  rightSectionWidth?: React.CSSProperties['width'];\n\n  /** Props passed down to the `rightSection` element */\n  rightSectionProps?: React.ComponentProps<'div'>;\n\n  /** Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). @default 'none' */\n  rightSectionPointerEvents?: React.CSSProperties['pointerEvents'];\n\n  /** Sets `required` attribute on the `input` element */\n  required?: boolean;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Sets `disabled` attribute on the `input` element */\n  disabled?: boolean;\n\n  /** Controls input `height`, horizontal `padding`, and `font-size` @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). @default false */\n  pointer?: boolean;\n\n  /** Determines whether the input should have red border and red text color when the `error` prop is set @default true */\n  withErrorStyles?: boolean;\n\n  /** HTML `size` attribute for the input element (number of visible characters) */\n  inputSize?: string;\n\n  /** Section to be displayed when the input is `__clearable` and `rightSection` is not defined */\n  __clearSection?: React.ReactNode;\n\n  /** Determines whether the `__clearSection` should be displayed if it is passed to the component, has no effect if `rightSection` is defined */\n  __clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  __clearSectionMode?: ClearSectionMode;\n\n  /** Right section displayed when both `__clearSection` and `rightSection` are not defined */\n  __defaultRightSection?: React.ReactNode;\n\n  /** Displays loading indicator in the left or right section @default false */\n  loading?: boolean;\n\n  /** Position of the loading indicator @default 'right' */\n  loadingPosition?: 'left' | 'right';\n}\n\nexport interface InputProps extends BoxProps, __InputProps, StylesApiProps<InputFactory> {\n  __staticSelector?: string;\n\n  /** Props passed to Styles API context, replaces `Input.Wrapper` props */\n  __stylesApiProps?: Record<string, any>;\n\n  /** Determines whether the input should have error styles and `aria-invalid` attribute */\n  error?: React.ReactNode;\n\n  /** Adjusts padding and sizing calculations for multiline inputs (use with `component=\"textarea\"`). Does not make the input multiline by itself. @default false */\n  multiline?: boolean;\n\n  /** Input element id */\n  id?: string;\n\n  /** Determines whether `aria-` and other accessibility attributes should be added to the input. Only disable when implementing custom accessibility handling. @default true */\n  withAria?: boolean;\n\n  /** Props passed down to the root element of the `Input` component */\n  wrapperProps?: WrapperProps;\n\n  /** Root element ref */\n  rootRef?: React.Ref<HTMLDivElement>;\n}\n\nexport type InputFactory = PolymorphicFactory<{\n  props: InputProps;\n  defaultRef: HTMLInputElement;\n  defaultComponent: 'input';\n  stylesNames: InputStylesNames;\n  variant: InputVariant;\n  vars: InputCssVariables;\n  ctx: InputStylesCtx;\n  staticComponents: {\n    Label: typeof InputLabel;\n    Error: typeof InputError;\n    Description: typeof InputDescription;\n    Placeholder: typeof InputPlaceholder;\n    Wrapper: typeof InputWrapper;\n    ClearButton: typeof InputClearButton;\n  };\n}>;\n\nconst defaultProps = {\n  variant: 'default',\n  leftSectionPointerEvents: 'none',\n  rightSectionPointerEvents: 'none',\n  withAria: true,\n  withErrorStyles: true,\n  size: 'sm',\n  loading: false,\n  loadingPosition: 'right',\n} satisfies Partial<InputProps>;\n\nconst varsResolver = createVarsResolver<InputFactory>((_, props, ctx) => ({\n  wrapper: {\n    '--input-margin-top': ctx.offsetTop ? 'calc(var(--mantine-spacing-xs) / 2)' : undefined,\n    '--input-margin-bottom': ctx.offsetBottom ? 'calc(var(--mantine-spacing-xs) / 2)' : undefined,\n    '--input-height': getSize(props.size, 'input-height'),\n    '--input-fz': getFontSize(props.size),\n    '--input-radius': props.radius === undefined ? undefined : getRadius(props.radius),\n    '--input-left-section-width':\n      props.leftSectionWidth !== undefined ? rem(props.leftSectionWidth) : undefined,\n    '--input-right-section-width':\n      props.rightSectionWidth !== undefined ? rem(props.rightSectionWidth) : undefined,\n    '--input-padding-y': props.multiline ? getSize(props.size, 'input-padding-y') : undefined,\n    '--input-left-section-pointer-events': props.leftSectionPointerEvents,\n    '--input-right-section-pointer-events': props.rightSectionPointerEvents,\n  },\n}));\n\nexport const Input = polymorphicFactory<InputFactory>((_props) => {\n  const props = useProps('Input', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    required,\n    __staticSelector,\n    __stylesApiProps,\n    size,\n    wrapperProps,\n    error,\n    disabled,\n    leftSection,\n    leftSectionProps,\n    leftSectionWidth,\n    rightSection,\n    rightSectionProps,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    leftSectionPointerEvents,\n    variant,\n    vars,\n    pointer,\n    multiline,\n    radius,\n    id,\n    withAria,\n    withErrorStyles,\n    mod,\n    inputSize,\n    attributes,\n    __clearSection,\n    __clearable,\n    __clearSectionMode,\n    __defaultRightSection,\n    loading,\n    loadingPosition,\n    rootRef,\n    ...others\n  } = props;\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const ctx = use(InputWrapperContext);\n  const stylesCtx: InputStylesCtx = { offsetBottom: ctx?.offsetBottom, offsetTop: ctx?.offsetTop };\n\n  const getStyles = useStyles<InputFactory>({\n    name: ['Input', __staticSelector],\n    props: __stylesApiProps || props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    stylesCtx,\n    rootSelector: 'wrapper',\n    vars,\n    varsResolver,\n  });\n\n  const ariaAttributes = withAria\n    ? {\n        required,\n        disabled,\n        'aria-invalid': error ? true : undefined,\n        'aria-describedby': ctx?.describedBy,\n        id: ctx?.inputId || id,\n      }\n    : {};\n\n  const loadingIndicator = loading ? (\n    <Loader\n      size={\n        loadingPosition === 'left'\n          ? 'calc(var(--input-left-section-size) / 2)'\n          : 'calc(var(--input-right-section-size) / 2)'\n      }\n    />\n  ) : null;\n\n  const _leftSection = loading && loadingPosition === 'left' ? loadingIndicator : leftSection;\n  const _rightSection: React.ReactNode = InputClearSection({\n    __clearable,\n    __clearSection,\n    rightSection: loading && loadingPosition === 'right' ? loadingIndicator : rightSection,\n    __defaultRightSection,\n    size,\n    __clearSectionMode,\n  });\n\n  return (\n    <InputContext value={{ size: size || 'sm' }}>\n      <Box\n        ref={rootRef}\n        {...getStyles('wrapper')}\n        {...styleProps}\n        {...wrapperProps}\n        mod={[\n          {\n            error: !!error && withErrorStyles,\n            pointer,\n            disabled,\n            multiline,\n            'data-with-right-section': !!_rightSection,\n            'data-with-left-section': !!_leftSection,\n          },\n          mod,\n        ]}\n        variant={variant}\n        size={size}\n      >\n        {_leftSection && (\n          <div\n            {...leftSectionProps}\n            data-position=\"left\"\n            {...getStyles('section', {\n              className: leftSectionProps?.className,\n              style: leftSectionProps?.style,\n            })}\n          >\n            {_leftSection}\n          </div>\n        )}\n\n        <Box\n          component=\"input\"\n          {...rest}\n          {...ariaAttributes}\n          required={required}\n          mod={{ disabled, error: !!error && withErrorStyles }}\n          variant={variant}\n          __size={inputSize}\n          {...getStyles('input')}\n        />\n\n        {_rightSection && (\n          <div\n            {...rightSectionProps}\n            data-position=\"right\"\n            {...getStyles('section', {\n              className: rightSectionProps?.className,\n              style: rightSectionProps?.style,\n            })}\n          >\n            {_rightSection}\n          </div>\n        )}\n      </Box>\n    </InputContext>\n  );\n});\n\nInput.classes = classes;\nInput.varsResolver = varsResolver;\nInput.Wrapper = InputWrapper;\nInput.Label = InputLabel;\nInput.Error = InputError;\nInput.Description = InputDescription;\nInput.Placeholder = InputPlaceholder;\nInput.ClearButton = InputClearButton;\nInput.displayName = '@mantine/core/Input';\n\nexport namespace Input {\n  export type Props = InputProps;\n  export type StylesNames = InputStylesNames;\n  export type CssVariables = InputCssVariables;\n  export type Factory = InputFactory;\n\n  export namespace Wrapper {\n    export type Props = InputWrapperProps;\n    export type StylesNames = InputWrapperStylesNames;\n    export type Factory = InputWrapperFactory;\n  }\n\n  export namespace Description {\n    export type Props = InputDescriptionProps;\n    export type StylesNames = InputDescriptionStylesNames;\n    export type CssVariables = InputDescriptionCssVariables;\n    export type Factory = InputDescriptionFactory;\n  }\n\n  export namespace Error {\n    export type Props = InputErrorProps;\n    export type StylesNames = InputErrorStylesNames;\n    export type CssVariables = InputErrorCssVariables;\n    export type Factory = InputErrorFactory;\n  }\n\n  export namespace Label {\n    export type Props = InputLabelProps;\n    export type StylesNames = InputLabelStylesNames;\n    export type CssVariables = InputLabelCssVariables;\n    export type Factory = InputLabelFactory;\n  }\n\n  export namespace Placeholder {\n    export type Props = InputPlaceholderProps;\n    export type StylesNames = InputPlaceholderStylesNames;\n    export type Factory = InputPlaceholderFactory;\n  }\n\n  export namespace ClearButton {\n    export type Props = InputClearButtonProps;\n    export type Factory = InputClearButtonFactory;\n  }\n\n  export namespace ClearSection {\n    export type Props = InputClearSectionProps;\n    export type Mode = ClearSectionMode;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Input.cjs","names":["createVarsResolver","getSize","getFontSize","getRadius","rem","polymorphicFactory","useProps","extractStyleProps","InputWrapperContext","useStyles","Loader","InputClearSection","InputContext","Box","classes","InputWrapper","InputLabel","InputError","InputDescription","InputPlaceholder","InputClearButton"],"sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  extractStyleProps,\n  getFontSize,\n  getRadius,\n  getSize,\n  MantineRadius,\n  MantineSize,\n  polymorphicFactory,\n  PolymorphicFactory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Loader } from '../Loader/Loader';\nimport { InputContext } from './Input.context';\nimport {\n  InputClearButton,\n  type InputClearButtonProps,\n  type InputClearButtonFactory,\n} from './InputClearButton/InputClearButton';\nimport {\n  ClearSectionMode,\n  InputClearSection,\n  type InputClearSectionProps,\n} from './InputClearSection/InputClearSection';\nimport {\n  InputDescription,\n  type InputDescriptionProps,\n  type InputDescriptionStylesNames,\n  type InputDescriptionCssVariables,\n  type InputDescriptionFactory,\n} from './InputDescription/InputDescription';\nimport {\n  InputError,\n  type InputErrorProps,\n  type InputErrorStylesNames,\n  type InputErrorCssVariables,\n  type InputErrorFactory,\n} from './InputError/InputError';\nimport {\n  InputLabel,\n  type InputLabelProps,\n  type InputLabelStylesNames,\n  type InputLabelCssVariables,\n  type InputLabelFactory,\n} from './InputLabel/InputLabel';\nimport {\n  InputPlaceholder,\n  type InputPlaceholderProps,\n  type InputPlaceholderStylesNames,\n  type InputPlaceholderFactory,\n} from './InputPlaceholder/InputPlaceholder';\nimport { InputWrapperContext } from './InputWrapper.context';\nimport {\n  __InputWrapperProps,\n  InputWrapper,\n  InputWrapperStylesNames,\n  type InputWrapperProps,\n  type InputWrapperFactory,\n} from './InputWrapper/InputWrapper';\nimport classes from './Input.module.css';\n// Required to be a separate type for docgen script\ntype WrapperProps = React.ComponentProps<'div'> & DataAttributes;\n\nexport interface __BaseInputProps extends __InputWrapperProps, __InputProps {\n  /** Props passed down to the root element */\n  wrapperProps?: WrapperProps;\n}\n\nexport type __InputStylesNames = InputStylesNames | InputWrapperStylesNames;\n\nexport type InputStylesNames = 'input' | 'wrapper' | 'section';\nexport type InputVariant = 'default' | 'filled' | 'unstyled';\nexport type InputCssVariables = {\n  wrapper:\n    | '--input-height'\n    | '--input-fz'\n    | '--input-radius'\n    | '--input-left-section-width'\n    | '--input-right-section-width'\n    | '--input-left-section-pointer-events'\n    | '--input-right-section-pointer-events'\n    | '--input-padding-y'\n    | '--input-margin-top'\n    | '--input-margin-bottom';\n};\n\nexport interface InputStylesCtx {\n  offsetTop: boolean | undefined;\n  offsetBottom: boolean | undefined;\n}\n\nexport interface __InputProps {\n  /** Content section displayed on the left side of the input */\n  leftSection?: React.ReactNode;\n\n  /** Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height */\n  leftSectionWidth?: React.CSSProperties['width'];\n\n  /** Props passed down to the `leftSection` element */\n  leftSectionProps?: React.ComponentProps<'div'>;\n\n  /** Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). @default 'none' */\n  leftSectionPointerEvents?: React.CSSProperties['pointerEvents'];\n\n  /** Content section displayed on the right side of the input */\n  rightSection?: React.ReactNode;\n\n  /** Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height */\n  rightSectionWidth?: React.CSSProperties['width'];\n\n  /** Props passed down to the `rightSection` element */\n  rightSectionProps?: React.ComponentProps<'div'>;\n\n  /** Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). @default 'none' */\n  rightSectionPointerEvents?: React.CSSProperties['pointerEvents'];\n\n  /** Sets `required` attribute on the `input` element */\n  required?: boolean;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Sets `disabled` attribute on the `input` element */\n  disabled?: boolean;\n\n  /** Controls input `height`, horizontal `padding`, and `font-size` @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). @default false */\n  pointer?: boolean;\n\n  /** Determines whether the input should have red border and red text color when the `error` prop is set @default true */\n  withErrorStyles?: boolean;\n\n  /** HTML `size` attribute for the input element (number of visible characters) */\n  inputSize?: string;\n\n  /** Section to be displayed when the input is `__clearable` and `rightSection` is not defined */\n  __clearSection?: React.ReactNode;\n\n  /** Determines whether the `__clearSection` should be displayed if it is passed to the component, has no effect if `rightSection` is defined */\n  __clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  __clearSectionMode?: ClearSectionMode;\n\n  /** Right section displayed when both `__clearSection` and `rightSection` are not defined */\n  __defaultRightSection?: React.ReactNode;\n\n  /** Displays loading indicator in the left or right section @default false */\n  loading?: boolean;\n\n  /** Position of the loading indicator @default 'right' */\n  loadingPosition?: 'left' | 'right';\n}\n\nexport interface InputProps extends BoxProps, __InputProps, StylesApiProps<InputFactory> {\n  __staticSelector?: string;\n\n  /** Props passed to Styles API context, replaces `Input.Wrapper` props */\n  __stylesApiProps?: Record<string, any>;\n\n  /** Determines whether the input should have error styles and `aria-invalid` attribute */\n  error?: React.ReactNode;\n\n  /** Adjusts padding and sizing calculations for multiline inputs (use with `component=\"textarea\"`). Does not make the input multiline by itself. @default false */\n  multiline?: boolean;\n\n  /** Input element id */\n  id?: string;\n\n  /** Determines whether `aria-` and other accessibility attributes should be added to the input. Only disable when implementing custom accessibility handling. @default true */\n  withAria?: boolean;\n\n  /** Props passed down to the root element of the `Input` component */\n  wrapperProps?: WrapperProps;\n\n  /** Root element ref */\n  rootRef?: React.Ref<HTMLDivElement>;\n}\n\nexport type InputFactory = PolymorphicFactory<{\n  props: InputProps;\n  defaultRef: HTMLInputElement;\n  defaultComponent: 'input';\n  stylesNames: InputStylesNames;\n  variant: InputVariant;\n  vars: InputCssVariables;\n  ctx: InputStylesCtx;\n  staticComponents: {\n    Label: typeof InputLabel;\n    Error: typeof InputError;\n    Description: typeof InputDescription;\n    Placeholder: typeof InputPlaceholder;\n    Wrapper: typeof InputWrapper;\n    ClearButton: typeof InputClearButton;\n  };\n}>;\n\nconst defaultProps = {\n  variant: 'default',\n  leftSectionPointerEvents: 'none',\n  rightSectionPointerEvents: 'none',\n  withAria: true,\n  withErrorStyles: true,\n  size: 'sm',\n  loading: false,\n  loadingPosition: 'right',\n} satisfies Partial<InputProps>;\n\nconst varsResolver = createVarsResolver<InputFactory>((_, props, ctx) => ({\n  wrapper: {\n    '--input-margin-top': ctx.offsetTop ? 'calc(var(--mantine-spacing-xs) / 2)' : undefined,\n    '--input-margin-bottom': ctx.offsetBottom ? 'calc(var(--mantine-spacing-xs) / 2)' : undefined,\n    '--input-height': getSize(props.size, 'input-height'),\n    '--input-fz': getFontSize(props.size),\n    '--input-radius': props.radius === undefined ? undefined : getRadius(props.radius),\n    '--input-left-section-width':\n      props.leftSectionWidth !== undefined ? rem(props.leftSectionWidth) : undefined,\n    '--input-right-section-width':\n      props.rightSectionWidth !== undefined ? rem(props.rightSectionWidth) : undefined,\n    '--input-padding-y': props.multiline ? getSize(props.size, 'input-padding-y') : undefined,\n    '--input-left-section-pointer-events': props.leftSectionPointerEvents,\n    '--input-right-section-pointer-events': props.rightSectionPointerEvents,\n  },\n}));\n\nexport const Input = polymorphicFactory<InputFactory>((_props) => {\n  const props = useProps('Input', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    required,\n    __staticSelector,\n    __stylesApiProps,\n    size,\n    wrapperProps,\n    error,\n    disabled,\n    leftSection,\n    leftSectionProps,\n    leftSectionWidth,\n    rightSection,\n    rightSectionProps,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    leftSectionPointerEvents,\n    variant,\n    vars,\n    pointer,\n    multiline,\n    radius,\n    id,\n    withAria,\n    withErrorStyles,\n    mod,\n    inputSize,\n    attributes,\n    __clearSection,\n    __clearable,\n    __clearSectionMode,\n    __defaultRightSection,\n    loading,\n    loadingPosition,\n    rootRef,\n    dir,\n    ...others\n  } = props as typeof props & Pick<React.HTMLAttributes<HTMLDivElement>, 'dir'>;\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const ctx = use(InputWrapperContext);\n  const stylesCtx: InputStylesCtx = { offsetBottom: ctx?.offsetBottom, offsetTop: ctx?.offsetTop };\n\n  const getStyles = useStyles<InputFactory>({\n    name: ['Input', __staticSelector],\n    props: __stylesApiProps || props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    stylesCtx,\n    rootSelector: 'wrapper',\n    vars,\n    varsResolver,\n  });\n\n  const ariaAttributes = withAria\n    ? {\n        required,\n        disabled,\n        'aria-invalid': error ? true : undefined,\n        'aria-describedby': ctx?.describedBy,\n        id: ctx?.inputId || id,\n      }\n    : {};\n\n  const loadingIndicator = loading ? (\n    <Loader\n      size={\n        loadingPosition === 'left'\n          ? 'calc(var(--input-left-section-size) / 2)'\n          : 'calc(var(--input-right-section-size) / 2)'\n      }\n    />\n  ) : null;\n\n  const _leftSection = loading && loadingPosition === 'left' ? loadingIndicator : leftSection;\n  const _rightSection: React.ReactNode = InputClearSection({\n    __clearable,\n    __clearSection,\n    rightSection: loading && loadingPosition === 'right' ? loadingIndicator : rightSection,\n    __defaultRightSection,\n    size,\n    __clearSectionMode,\n  });\n\n  return (\n    <InputContext value={{ size: size || 'sm' }}>\n      <Box\n        ref={rootRef}\n        dir={dir}\n        {...getStyles('wrapper')}\n        {...styleProps}\n        {...wrapperProps}\n        mod={[\n          {\n            error: !!error && withErrorStyles,\n            pointer,\n            disabled,\n            multiline,\n            'data-with-right-section': !!_rightSection,\n            'data-with-left-section': !!_leftSection,\n          },\n          mod,\n        ]}\n        variant={variant}\n        size={size}\n      >\n        {_leftSection && (\n          <div\n            {...leftSectionProps}\n            data-position=\"left\"\n            {...getStyles('section', {\n              className: leftSectionProps?.className,\n              style: leftSectionProps?.style,\n            })}\n          >\n            {_leftSection}\n          </div>\n        )}\n\n        <Box\n          component=\"input\"\n          {...rest}\n          {...ariaAttributes}\n          required={required}\n          mod={{ disabled, error: !!error && withErrorStyles }}\n          variant={variant}\n          __size={inputSize}\n          {...getStyles('input')}\n        />\n\n        {_rightSection && (\n          <div\n            {...rightSectionProps}\n            data-position=\"right\"\n            {...getStyles('section', {\n              className: rightSectionProps?.className,\n              style: rightSectionProps?.style,\n            })}\n          >\n            {_rightSection}\n          </div>\n        )}\n      </Box>\n    </InputContext>\n  );\n});\n\nInput.classes = classes;\nInput.varsResolver = varsResolver;\nInput.Wrapper = InputWrapper;\nInput.Label = InputLabel;\nInput.Error = InputError;\nInput.Description = InputDescription;\nInput.Placeholder = InputPlaceholder;\nInput.ClearButton = InputClearButton;\nInput.displayName = '@mantine/core/Input';\n\nexport namespace Input {\n  export type Props = InputProps;\n  export type StylesNames = InputStylesNames;\n  export type CssVariables = InputCssVariables;\n  export type Factory = InputFactory;\n\n  export namespace Wrapper {\n    export type Props = InputWrapperProps;\n    export type StylesNames = InputWrapperStylesNames;\n    export type Factory = InputWrapperFactory;\n  }\n\n  export namespace Description {\n    export type Props = InputDescriptionProps;\n    export type StylesNames = InputDescriptionStylesNames;\n    export type CssVariables = InputDescriptionCssVariables;\n    export type Factory = InputDescriptionFactory;\n  }\n\n  export namespace Error {\n    export type Props = InputErrorProps;\n    export type StylesNames = InputErrorStylesNames;\n    export type CssVariables = InputErrorCssVariables;\n    export type Factory = InputErrorFactory;\n  }\n\n  export namespace Label {\n    export type Props = InputLabelProps;\n    export type StylesNames = InputLabelStylesNames;\n    export type CssVariables = InputLabelCssVariables;\n    export type Factory = InputLabelFactory;\n  }\n\n  export namespace Placeholder {\n    export type Props = InputPlaceholderProps;\n    export type StylesNames = InputPlaceholderStylesNames;\n    export type Factory = InputPlaceholderFactory;\n  }\n\n  export namespace ClearButton {\n    export type Props = InputClearButtonProps;\n    export type Factory = InputClearButtonFactory;\n  }\n\n  export namespace ClearSection {\n    export type Props = InputClearSectionProps;\n    export type Mode = ClearSectionMode;\n  }\n}\n"],"mappings":"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"}

package/cjs/components/Input/Input.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.module.cjs","names":[],"sources":["../../../src/components/Input/Input.module.css"],"sourcesContent":[".wrapper {\n  position: relative;\n  margin-top: var(--input-margin-top, 0rem);\n  margin-bottom: var(--input-margin-bottom, 0rem);\n\n  --input-height-xs: 30px;\n  --input-height-sm: 36px;\n  --input-height-md: 42px;\n  --input-height-lg: 50px;\n  --input-height-xl: 60px;\n\n  --input-padding-y-xs: 5px;\n  --input-padding-y-sm: 6px;\n  --input-padding-y-md: 8px;\n  --input-padding-y-lg: 10px;\n  --input-padding-y-xl: 13px;\n\n  --input-height: var(--input-height-sm);\n  --input-radius: var(--mantine-radius-default);\n\n  --input-cursor: text;\n  --input-text-align: left;\n  --input-line-height: calc(var(--input-height) - rem(2px));\n  --input-padding: calc(var(--input-height) / 3);\n  --input-padding-inline-start: var(--input-padding);\n  --input-padding-inline-end: var(--input-padding);\n  --input-placeholder-color: var(--mantine-color-placeholder);\n  --input-color: var(--mantine-color-text);\n  --input-disabled-bg: var(--mantine-color-disabled);\n  --input-disabled-color: var(--mantine-color-disabled-color);\n\n  --input-left-section-size: var(--input-left-section-width, calc(var(--input-height) - rem(2px)));\n\n  --input-right-section-size: var(\n    --input-right-section-width,\n    calc(var(--input-height) - rem(2px))\n  );\n\n  --input-size: var(--input-height);\n\n  --section-y: 1px;\n  --left-section-start: 1px;\n  --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n\n  --right-section-end: 1px;\n  --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n\n  &[data-variant='unstyled'] {\n    --input-padding: 0;\n    --input-padding-y: 0;\n    --input-padding-inline-start: 0;\n    --input-padding-inline-end: 0;\n  }\n\n  &[data-pointer] {\n    --input-cursor: pointer;\n  }\n\n  &[data-multiline] {\n    --input-padding-y-xs: 4.5px;\n    --input-padding-y-sm: 5.5px;\n    --input-padding-y-md: 7px;\n    --input-padding-y-lg: 9.5px;\n    --input-padding-y-xl: 13px;\n\n    --input-size: auto;\n    --input-line-height: var(--mantine-line-height);\n  }\n\n  &[data-with-left-section] {\n    --input-padding-inline-start: var(--input-left-section-size);\n  }\n\n  &[data-with-right-section] {\n    --input-padding-inline-end: var(--input-right-section-size);\n\n    &:has([data-combined-clear-section]) {\n      .wrapper[data-size='xs'] & {\n        --input-padding-inline-end: 41px;\n      }\n\n      .wrapper[data-size='sm'] & {\n        --input-padding-inline-end: 50px;\n      }\n\n      .wrapper[data-size='md'] & {\n        --input-padding-inline-end: 60px;\n      }\n\n      .wrapper[data-size='lg'] & {\n        --input-padding-inline-end: 72px;\n      }\n\n      .wrapper[data-size='xl'] & {\n        --input-padding-inline-end: 89px;\n      }\n    }\n  }\n\n  @mixin light {\n    &[data-variant='default'] {\n      --input-bd: var(--mantine-color-gray-4);\n      --input-bg: var(--mantine-color-white);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='filled'] {\n      --input-bd: transparent;\n      --input-bg: var(--mantine-color-gray-1);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='unstyled'] {\n      --input-bd: transparent;\n      --input-bg: transparent;\n      --input-bd-focus: transparent;\n    }\n  }\n\n  @mixin dark {\n    &[data-variant='default'] {\n      --input-bd: var(--mantine-color-dark-4);\n      --input-bg: var(--mantine-color-dark-6);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='filled'] {\n      --input-bd: transparent;\n      --input-bg: var(--mantine-color-dark-5);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='unstyled'] {\n      --input-bd: transparent;\n      --input-bg: transparent;\n      --input-bd-focus: transparent;\n    }\n  }\n\n  [data-mantine-color-scheme] &[data-error] {\n    &:not([data-variant='unstyled']) {\n      --input-bd: var(--mantine-color-error);\n    }\n\n    --input-color: var(--mantine-color-error);\n    --input-placeholder-color: var(--mantine-color-error);\n    --input-section-color: var(--mantine-color-error);\n  }\n\n  @mixin where-rtl {\n    --input-text-align: right;\n    --left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n    --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n  }\n}\n\n.input {\n  -webkit-tap-highlight-color: transparent;\n  appearance: none;\n  resize: var(--input-resize, none);\n  display: block;\n  width: 100%;\n  transition: border-color 100ms ease;\n\n  text-align: var(--input-text-align);\n  color: var(--input-color);\n  border: rem(1px) solid var(--input-bd);\n  background-color: var(--input-bg);\n  font-family: var(--input-font-family, var(--mantine-font-family));\n  height: var(--input-size);\n  min-height: var(--input-height);\n  line-height: var(--input-line-height);\n  font-size: var(--_input-fz, var(--input-fz, var(--mantine-font-size-md)));\n  border-radius: var(--input-radius);\n  padding-inline-start: var(--input-padding-inline-start);\n  padding-inline-end: var(--input-padding-inline-end);\n  padding-top: var(--input-padding-y, 0rem);\n  padding-bottom: var(--input-padding-y, 0rem);\n  cursor: var(--input-cursor);\n  overflow: var(--input-overflow);\n\n  /* Used as data attribute in Textarea component, does not have associated prop on the Input component */\n  &[data-no-overflow] {\n    --input-overflow: hidden;\n  }\n\n  /* Used as data attribute in JsonInput component, does not have associated prop on the Input component */\n  &[data-monospace] {\n    --input-font-family: var(--mantine-font-family-monospace);\n    --_input-fz: calc(var(--input-fz) - rem(2px));\n  }\n\n  &:focus,\n  &:focus-within {\n    outline: none;\n    --input-bd: var(--input-bd-focus);\n\n    [data-error] & {\n      --input-bd: var(--mantine-color-error);\n    }\n  }\n\n  &::placeholder {\n    color: var(--input-placeholder-color);\n    opacity: 1;\n  }\n\n  &::-webkit-inner-spin-button,\n  &::-webkit-outer-spin-button,\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    appearance: none;\n  }\n\n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  &:disabled,\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background-color: var(--input-disabled-bg);\n    color: var(--input-disabled-color);\n  }\n\n  /* Required to be a separate selector to work in Firefox, can be merged with &:disabled once :has is supported */\n  &:has(input:disabled) {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background-color: var(--input-disabled-bg);\n    color: var(--input-disabled-color);\n  }\n\n  &[readonly] {\n    caret-color: transparent;\n  }\n}\n\n.section {\n  pointer-events: var(--section-pointer-events);\n  position: absolute;\n  z-index: 1;\n  inset-inline-start: var(--section-start);\n  inset-inline-end: var(--section-end);\n  bottom: var(--section-y);\n  top: var(--section-y);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--section-size);\n  border-radius: var(--section-border-radius);\n  color: var(--input-section-color, var(--mantine-color-dimmed));\n\n  &[data-position='right'] {\n    --section-pointer-events: var(--input-right-section-pointer-events);\n    --section-end: var(--right-section-end);\n    --section-size: var(--input-right-section-size);\n    --section-border-radius: var(--right-section-border-radius);\n\n    &:has([data-combined-clear-section]) {\n      .wrapper[data-size='xs'] & {\n        --section-size: 41px;\n      }\n\n      .wrapper[data-size='sm'] & {\n        --section-size: 50px;\n      }\n\n      .wrapper[data-size='md'] & {\n        --section-size: 60px;\n      }\n\n      .wrapper[data-size='lg'] & {\n        --section-size: 72px;\n      }\n\n      .wrapper[data-size='xl'] & {\n        --section-size: 89px;\n      }\n    }\n  }\n\n  &[data-position='left'] {\n    --section-pointer-events: var(--input-left-section-pointer-events);\n    --section-start: var(--left-section-start);\n    --section-size: var(--input-left-section-size);\n    --section-border-radius: var(--left-section-border-radius);\n  }\n}\n\n/* ----- Input.Placeholder ----- */\n.placeholder {\n  color: var(--input-placeholder-color, var(--mantine-color-placeholder));\n\n  [data-error] & {\n    --input-placeholder-color: var(--input-color, var(--mantine-color-placeholder));\n  }\n}\n\n/* ----- Input.Wrapper ----- */\n.root {\n  line-height: var(--mantine-line-height);\n}\n\n.label {\n  display: inline-block;\n  font-weight: var(--mantine-font-weight-medium);\n  overflow-wrap: break-word;\n  cursor: default;\n  -webkit-tap-highlight-color: transparent;\n  font-size: var(--input-label-size, var(--mantine-font-size-sm));\n}\n\n.required {\n  color: var(--input-asterisk-color, var(--mantine-color-error));\n}\n\n.error,\n.description {\n  word-wrap: break-word;\n  line-height: 1.2;\n  display: block;\n  margin: 0;\n  padding: 0;\n}\n\n.error {\n  color: var(--mantine-color-error);\n  font-size: var(--input-error-size, calc(var(--mantine-font-size-sm) - rem(2px)));\n}\n\n.description {\n  color: var(--mantine-color-dimmed);\n  font-size: var(--input-description-size, calc(var(--mantine-font-size-sm) - rem(2px)));\n}\n"],"mappings":""}
+{"version":3,"file":"Input.module.cjs","names":[],"sources":["../../../src/components/Input/Input.module.css"],"sourcesContent":[".wrapper {\n  position: relative;\n  margin-top: var(--input-margin-top, 0rem);\n  margin-bottom: var(--input-margin-bottom, 0rem);\n\n  --input-height-xs: 30px;\n  --input-height-sm: 36px;\n  --input-height-md: 42px;\n  --input-height-lg: 50px;\n  --input-height-xl: 60px;\n\n  --input-padding-y-xs: 5px;\n  --input-padding-y-sm: 6px;\n  --input-padding-y-md: 8px;\n  --input-padding-y-lg: 10px;\n  --input-padding-y-xl: 13px;\n\n  --input-height: var(--input-height-sm);\n  --input-radius: var(--mantine-radius-default);\n\n  --input-cursor: text;\n  --input-text-align: left;\n  --input-line-height: calc(var(--input-height) - rem(2px));\n  --input-padding: calc(var(--input-height) / 3);\n  --input-padding-inline-start: var(--input-padding);\n  --input-padding-inline-end: var(--input-padding);\n  --input-placeholder-color: var(--mantine-color-placeholder);\n  --input-color: var(--mantine-color-text);\n  --input-disabled-bg: var(--mantine-color-disabled);\n  --input-disabled-color: var(--mantine-color-disabled-color);\n\n  --input-left-section-size: var(--input-left-section-width, calc(var(--input-height) - rem(2px)));\n\n  --input-right-section-size: var(\n    --input-right-section-width,\n    calc(var(--input-height) - rem(2px))\n  );\n\n  --input-size: var(--input-height);\n\n  --section-y: 1px;\n  --left-section-start: 1px;\n  --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n\n  --right-section-end: 1px;\n  --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n\n  &[data-variant='unstyled'] {\n    --input-padding: 0;\n    --input-padding-y: 0;\n    --input-padding-inline-start: 0;\n    --input-padding-inline-end: 0;\n  }\n\n  &[data-pointer] {\n    --input-cursor: pointer;\n  }\n\n  &[data-multiline] {\n    --input-padding-y-xs: 4.5px;\n    --input-padding-y-sm: 5.5px;\n    --input-padding-y-md: 7px;\n    --input-padding-y-lg: 9.5px;\n    --input-padding-y-xl: 13px;\n\n    --input-size: auto;\n    --input-line-height: var(--mantine-line-height);\n  }\n\n  &[data-with-left-section] {\n    --input-padding-inline-start: var(--input-left-section-size);\n  }\n\n  &[data-with-right-section] {\n    --input-padding-inline-end: var(--input-right-section-size);\n\n    &:has([data-combined-clear-section]) {\n      .wrapper[data-size='xs'] & {\n        --input-padding-inline-end: 41px;\n      }\n\n      .wrapper[data-size='sm'] & {\n        --input-padding-inline-end: 50px;\n      }\n\n      .wrapper[data-size='md'] & {\n        --input-padding-inline-end: 60px;\n      }\n\n      .wrapper[data-size='lg'] & {\n        --input-padding-inline-end: 72px;\n      }\n\n      .wrapper[data-size='xl'] & {\n        --input-padding-inline-end: 89px;\n      }\n    }\n  }\n\n  @mixin light {\n    &[data-variant='default'] {\n      --input-bd: var(--mantine-color-gray-4);\n      --input-bg: var(--mantine-color-white);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='filled'] {\n      --input-bd: transparent;\n      --input-bg: var(--mantine-color-gray-1);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='unstyled'] {\n      --input-bd: transparent;\n      --input-bg: transparent;\n      --input-bd-focus: transparent;\n    }\n  }\n\n  @mixin dark {\n    &[data-variant='default'] {\n      --input-bd: var(--mantine-color-dark-4);\n      --input-bg: var(--mantine-color-dark-6);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='filled'] {\n      --input-bd: transparent;\n      --input-bg: var(--mantine-color-dark-5);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='unstyled'] {\n      --input-bd: transparent;\n      --input-bg: transparent;\n      --input-bd-focus: transparent;\n    }\n  }\n\n  [data-mantine-color-scheme] &[data-error] {\n    &:not([data-variant='unstyled']) {\n      --input-bd: var(--mantine-color-error);\n    }\n\n    --input-color: var(--mantine-color-error);\n    --input-placeholder-color: var(--mantine-color-error);\n    --input-section-color: var(--mantine-color-error);\n  }\n\n  @mixin where-rtl {\n    --input-text-align: right;\n    --left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n    --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n  }\n\n  &[dir='ltr'] {\n    --input-text-align: left;\n    --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n    --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n  }\n}\n\n.input {\n  -webkit-tap-highlight-color: transparent;\n  appearance: none;\n  resize: var(--input-resize, none);\n  display: block;\n  width: 100%;\n  transition: border-color 100ms ease;\n\n  text-align: var(--input-text-align);\n  color: var(--input-color);\n  border: rem(1px) solid var(--input-bd);\n  background-color: var(--input-bg);\n  font-family: var(--input-font-family, var(--mantine-font-family));\n  height: var(--input-size);\n  min-height: var(--input-height);\n  line-height: var(--input-line-height);\n  font-size: var(--_input-fz, var(--input-fz, var(--mantine-font-size-md)));\n  border-radius: var(--input-radius);\n  padding-inline-start: var(--input-padding-inline-start);\n  padding-inline-end: var(--input-padding-inline-end);\n  padding-top: var(--input-padding-y, 0rem);\n  padding-bottom: var(--input-padding-y, 0rem);\n  cursor: var(--input-cursor);\n  overflow: var(--input-overflow);\n\n  /* Used as data attribute in Textarea component, does not have associated prop on the Input component */\n  &[data-no-overflow] {\n    --input-overflow: hidden;\n  }\n\n  /* Used as data attribute in JsonInput component, does not have associated prop on the Input component */\n  &[data-monospace] {\n    --input-font-family: var(--mantine-font-family-monospace);\n    --_input-fz: calc(var(--input-fz) - rem(2px));\n  }\n\n  &:focus,\n  &:focus-within {\n    outline: none;\n    --input-bd: var(--input-bd-focus);\n\n    [data-error] & {\n      --input-bd: var(--mantine-color-error);\n    }\n  }\n\n  &::placeholder {\n    color: var(--input-placeholder-color);\n    opacity: 1;\n  }\n\n  &::-webkit-inner-spin-button,\n  &::-webkit-outer-spin-button,\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    appearance: none;\n  }\n\n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  &:disabled,\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background-color: var(--input-disabled-bg);\n    color: var(--input-disabled-color);\n  }\n\n  /* Required to be a separate selector to work in Firefox, can be merged with &:disabled once :has is supported */\n  &:has(input:disabled) {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background-color: var(--input-disabled-bg);\n    color: var(--input-disabled-color);\n  }\n\n  &[readonly] {\n    caret-color: transparent;\n  }\n}\n\n.section {\n  pointer-events: var(--section-pointer-events);\n  position: absolute;\n  z-index: 1;\n  inset-inline-start: var(--section-start);\n  inset-inline-end: var(--section-end);\n  bottom: var(--section-y);\n  top: var(--section-y);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--section-size);\n  border-radius: var(--section-border-radius);\n  color: var(--input-section-color, var(--mantine-color-dimmed));\n\n  &[data-position='right'] {\n    --section-pointer-events: var(--input-right-section-pointer-events);\n    --section-end: var(--right-section-end);\n    --section-size: var(--input-right-section-size);\n    --section-border-radius: var(--right-section-border-radius);\n\n    &:has([data-combined-clear-section]) {\n      .wrapper[data-size='xs'] & {\n        --section-size: 41px;\n      }\n\n      .wrapper[data-size='sm'] & {\n        --section-size: 50px;\n      }\n\n      .wrapper[data-size='md'] & {\n        --section-size: 60px;\n      }\n\n      .wrapper[data-size='lg'] & {\n        --section-size: 72px;\n      }\n\n      .wrapper[data-size='xl'] & {\n        --section-size: 89px;\n      }\n    }\n  }\n\n  &[data-position='left'] {\n    --section-pointer-events: var(--input-left-section-pointer-events);\n    --section-start: var(--left-section-start);\n    --section-size: var(--input-left-section-size);\n    --section-border-radius: var(--left-section-border-radius);\n  }\n}\n\n/* ----- Input.Placeholder ----- */\n.placeholder {\n  color: var(--input-placeholder-color, var(--mantine-color-placeholder));\n\n  [data-error] & {\n    --input-placeholder-color: var(--input-color, var(--mantine-color-placeholder));\n  }\n}\n\n/* ----- Input.Wrapper ----- */\n.root {\n  line-height: var(--mantine-line-height);\n}\n\n.label {\n  display: inline-block;\n  font-weight: var(--mantine-font-weight-medium);\n  overflow-wrap: break-word;\n  cursor: default;\n  -webkit-tap-highlight-color: transparent;\n  font-size: var(--input-label-size, var(--mantine-font-size-sm));\n}\n\n.required {\n  color: var(--input-asterisk-color, var(--mantine-color-error));\n}\n\n.error,\n.description {\n  word-wrap: break-word;\n  line-height: 1.2;\n  display: block;\n  margin: 0;\n  padding: 0;\n}\n\n.error {\n  color: var(--mantine-color-error);\n  font-size: var(--input-error-size, calc(var(--mantine-font-size-sm) - rem(2px)));\n}\n\n.description {\n  color: var(--mantine-color-dimmed);\n  font-size: var(--input-description-size, calc(var(--mantine-font-size-sm) - rem(2px)));\n}\n"],"mappings":""}

package/cjs/components/Menu/MenuSub/MenuSub.cjs

@@ -17,12 +17,13 @@ let _floating_ui_react = require("@floating-ui/react");
 const defaultProps = {
 	offset: 0,
 	position: "right-start",
+	safeAreaPolygon: true,
 	transitionProps: { duration: 0 },
 	openDelay: 0,
 	middlewares: { shift: { crossAxis: true } }
 };
 function MenuSub(_props) {
-	const { children, closeDelay, openDelay, position, ...others } = require_use_props.useProps("MenuSub", defaultProps, _props);
+	const { children, closeDelay, openDelay, position, safeAreaPolygon, ...others } = require_use_props.useProps("MenuSub", defaultProps, _props);
 	const id = (0, _mantine_hooks.useId)();
 	const [opened, { open, close }] = (0, _mantine_hooks.useDisclosure)(false);
 	const parentSubCtx = (0, react.use)(require_MenuSub_context.SubMenuContext);
@@ -62,7 +63,7 @@ function MenuSub(_props) {
 		}
 	});
 	const { getReferenceProps, getFloatingProps } = (0, _floating_ui_react.useInteractions)([(0, _floating_ui_react.useHover)(context, {
-		handleClose: (0, _floating_ui_react.safePolygon)(),
+		handleClose: safeAreaPolygon ? (0, _floating_ui_react.safePolygon)(typeof safeAreaPolygon === "object" ? safeAreaPolygon : void 0) : void 0,
 		delay: {
 			open: openDelay,
 			close: closeDelay

package/cjs/components/Menu/MenuSub/MenuSub.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuSub.cjs","names":["useProps","SubMenuContext","useMenuContext","useDirection","getFloatingPosition","Popover","MenuSubTarget","MenuSubDropdown","MenuSubItem"],"sources":["../../../../src/components/Menu/MenuSub/MenuSub.tsx"],"sourcesContent":["import { use, useCallback, useRef } from 'react';\nimport { safePolygon, useFloating, useHover, useInteractions } from '@floating-ui/react';\nimport { useDisclosure, useId } from '@mantine/hooks';\nimport { ExtendComponent, Factory, useDirection, useProps } from '../../../core';\nimport {\n  FloatingAxesOffsets,\n  FloatingPosition,\n  getFloatingPosition,\n} from '../../../utils/Floating';\nimport { __PopoverProps, Popover } from '../../Popover';\nimport { TransitionOverride } from '../../Transition';\nimport { useMenuContext } from '../Menu.context';\nimport { MenuSubDropdown } from '../MenuSubDropdown/MenuSubDropdown';\nimport { MenuSubItem } from '../MenuSubItem/MenuSubItem';\nimport { MenuSubTarget } from '../MenuSubTarget/MenuSubTarget';\nimport { SubMenuContext } from './MenuSub.context';\n\nexport type MenuSubFactory = Factory<{\n  props: MenuSubProps;\n}>;\n\nexport interface MenuSubProps extends __PopoverProps {\n  children: React.ReactNode;\n\n  /** Called with current state when dropdown opens or closes */\n  onChange?: (opened: boolean) => void;\n\n  /** Open delay in ms, applicable when hover trigger is used */\n  openDelay?: number;\n\n  /** Close delay in ms, applicable when hover trigger is used */\n  closeDelay?: number;\n\n  /** Dropdown position relative to the target element @default 'right-start' */\n  position?: FloatingPosition;\n\n  /** Offset of the dropdown element @default 0 */\n  offset?: number | FloatingAxesOffsets;\n\n  /** Props passed down to the `Transition` component that used to animate dropdown presence, use to configure duration and animation type @default { duration: 0 } */\n  transitionProps?: TransitionOverride;\n}\n\nconst defaultProps = {\n  offset: 0,\n  position: 'right-start',\n  transitionProps: { duration: 0 },\n  openDelay: 0,\n  middlewares: {\n    shift: {\n      // Enable crossAxis shift to keep submenu dropdown within viewport bounds when positioned horizontally\n      crossAxis: true,\n    },\n  },\n} satisfies Partial<MenuSubProps>;\n\nexport function MenuSub(_props: MenuSubProps) {\n  const { children, closeDelay, openDelay, position, ...others } = useProps(\n    'MenuSub',\n    defaultProps,\n    _props\n  );\n  const id = useId();\n  const [opened, { open, close }] = useDisclosure(false);\n  const parentSubCtx = use(SubMenuContext);\n  const menuCtx = useMenuContext();\n  const { dir } = useDirection();\n  const resolvedPosition = getFloatingPosition(dir, position);\n\n  const levelRegister = parentSubCtx?.registerOpenSub ?? menuCtx.registerOpenSub;\n  const unregisterRef = useRef<(() => void) | null>(null);\n\n  const activeChildCloseRef = useRef<(() => void) | null>(null);\n  const registerOpenSub = useCallback((closeFn: () => void) => {\n    const prev = activeChildCloseRef.current;\n    if (prev && prev !== closeFn) {\n      prev();\n    }\n    activeChildCloseRef.current = closeFn;\n    return () => {\n      if (activeChildCloseRef.current === closeFn) {\n        activeChildCloseRef.current = null;\n      }\n    };\n  }, []);\n\n  const handleOpen = useCallback(() => {\n    unregisterRef.current = levelRegister(close);\n    open();\n  }, [close, levelRegister, open]);\n\n  const handleClose = useCallback(() => {\n    unregisterRef.current?.();\n    unregisterRef.current = null;\n    close();\n  }, [close]);\n\n  const { context, refs } = useFloating({\n    placement: resolvedPosition,\n    open: opened,\n    onOpenChange: (nextOpen) => {\n      if (nextOpen) {\n        handleOpen();\n      } else {\n        handleClose();\n      }\n    },\n  });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      handleClose: safePolygon(),\n      delay: { open: openDelay, close: closeDelay },\n    }),\n  ]);\n\n  const focusFirstItem = () =>\n    window.setTimeout(() => {\n      document\n        .getElementById(`${id}-dropdown`)\n        ?.querySelectorAll<HTMLButtonElement>('[data-menu-item]:not([data-disabled])')[0]\n        ?.focus();\n    }, 16);\n\n  const focusParentItem = () =>\n    window.setTimeout(() => {\n      document.getElementById(`${id}-target`)?.focus();\n    }, 16);\n\n  return (\n    <SubMenuContext\n      value={{\n        opened,\n        close: handleClose,\n        open: handleOpen,\n        focusFirstItem,\n        focusParentItem,\n        parentContext: parentSubCtx,\n        setReference: refs.setReference,\n        setFloating: refs.setFloating,\n        getReferenceProps,\n        getFloatingProps,\n        registerOpenSub,\n      }}\n    >\n      <Popover\n        opened={opened}\n        withinPortal={false}\n        withArrow={false}\n        id={id}\n        position={position}\n        {...others}\n      >\n        {children}\n      </Popover>\n    </SubMenuContext>\n  );\n}\n\nMenuSub.extend = (input: ExtendComponent<MenuSubFactory>) => input;\nMenuSub.displayName = '@mantine/core/MenuSub';\nMenuSub.Target = MenuSubTarget;\nMenuSub.Dropdown = MenuSubDropdown;\nMenuSub.Item = MenuSubItem;\n"],"mappings":";;;;;;;;;;;;;;;;AA2CA,MAAM,eAAe;CACnB,QAAQ;CACR,UAAU;CACV,iBAAiB,EAAE,UAAU,EAAE;CAC/B,WAAW;CACX,aAAa,EACX,OAAO,EAEL,WAAW,KACb,EACF;AACF;AAEA,SAAgB,QAAQ,QAAsB;CAC5C,MAAM,EAAE,UAAU,YAAY,WAAW,UAAU,GAAG,WAAWA,kBAAAA,SAC/D,WACA,cACA,MACF;CACA,MAAM,MAAA,GAAA,eAAA,OAAW;CACjB,MAAM,CAAC,QAAQ,EAAE,MAAM,YAAA,GAAA,eAAA,eAAyB,KAAK;CACrD,MAAM,gBAAA,GAAA,MAAA,KAAmBC,wBAAAA,cAAc;CACvC,MAAM,UAAUC,qBAAAA,eAAe;CAC/B,MAAM,EAAE,QAAQC,0BAAAA,aAAa;CAC7B,MAAM,mBAAmBC,8BAAAA,oBAAoB,KAAK,QAAQ;CAE1D,MAAM,gBAAgB,cAAc,mBAAmB,QAAQ;CAC/D,MAAM,iBAAA,GAAA,MAAA,QAA4C,IAAI;CAEtD,MAAM,uBAAA,GAAA,MAAA,QAAkD,IAAI;CAC5D,MAAM,mBAAA,GAAA,MAAA,cAA+B,YAAwB;EAC3D,MAAM,OAAO,oBAAoB;EACjC,IAAI,QAAQ,SAAS,SACnB,KAAK;EAEP,oBAAoB,UAAU;EAC9B,aAAa;GACX,IAAI,oBAAoB,YAAY,SAClC,oBAAoB,UAAU;EAElC;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,cAAA,GAAA,MAAA,mBAA+B;EACnC,cAAc,UAAU,cAAc,KAAK;EAC3C,KAAK;CACP,GAAG;EAAC;EAAO;EAAe;CAAI,CAAC;CAE/B,MAAM,eAAA,GAAA,MAAA,mBAAgC;EACpC,cAAc,UAAU;EACxB,cAAc,UAAU;EACxB,MAAM;CACR,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,EAAE,SAAS,UAAA,GAAA,mBAAA,aAAqB;EACpC,WAAW;EACX,MAAM;EACN,eAAe,aAAa;GAC1B,IAAI,UACF,WAAW;QAEX,YAAY;EAEhB;CACF,CAAC;CAED,MAAM,EAAE,mBAAmB,sBAAA,GAAA,mBAAA,iBAAqC,EAAA,GAAA,mBAAA,UACrD,SAAS;EAChB,cAAA,GAAA,mBAAA,aAAyB;EACzB,OAAO;GAAE,MAAM;GAAW,OAAO;EAAW;CAC9C,CAAC,CACH,CAAC;CAED,MAAM,uBACJ,OAAO,iBAAiB;EACtB,SACG,eAAe,GAAG,GAAG,UAAU,GAC9B,iBAAoC,uCAAuC,EAAE,IAC7E,MAAM;CACZ,GAAG,EAAE;CAEP,MAAM,wBACJ,OAAO,iBAAiB;EACtB,SAAS,eAAe,GAAG,GAAG,QAAQ,GAAG,MAAM;CACjD,GAAG,EAAE;CAEP,OACE,iBAAA,GAAA,kBAAA,KAACH,wBAAAA,gBAAD;EACE,OAAO;GACL;GACA,OAAO;GACP,MAAM;GACN;GACA;GACA,eAAe;GACf,cAAc,KAAK;GACnB,aAAa,KAAK;GAClB;GACA;GACA;EACF;YAEA,iBAAA,GAAA,kBAAA,KAACI,gBAAAA,SAAD;GACU;GACR,cAAc;GACd,WAAW;GACP;GACM;GACV,GAAI;GAEH;EACM,CAAA;CACK,CAAA;AAEpB;AAEA,QAAQ,UAAU,UAA2C;AAC7D,QAAQ,cAAc;AACtB,QAAQ,SAASC,sBAAAA;AACjB,QAAQ,WAAWC,wBAAAA;AACnB,QAAQ,OAAOC,oBAAAA"}
+{"version":3,"file":"MenuSub.cjs","names":["useProps","SubMenuContext","useMenuContext","useDirection","getFloatingPosition","Popover","MenuSubTarget","MenuSubDropdown","MenuSubItem"],"sources":["../../../../src/components/Menu/MenuSub/MenuSub.tsx"],"sourcesContent":["import { use, useCallback, useRef } from 'react';\nimport {\n  safePolygon,\n  useFloating,\n  useHover,\n  useInteractions,\n  type SafePolygonOptions,\n} from '@floating-ui/react';\nimport { useDisclosure, useId } from '@mantine/hooks';\nimport { ExtendComponent, Factory, useDirection, useProps } from '../../../core';\nimport {\n  FloatingAxesOffsets,\n  FloatingPosition,\n  getFloatingPosition,\n} from '../../../utils/Floating';\nimport { __PopoverProps, Popover } from '../../Popover';\nimport { TransitionOverride } from '../../Transition';\nimport { useMenuContext } from '../Menu.context';\nimport { MenuSubDropdown } from '../MenuSubDropdown/MenuSubDropdown';\nimport { MenuSubItem } from '../MenuSubItem/MenuSubItem';\nimport { MenuSubTarget } from '../MenuSubTarget/MenuSubTarget';\nimport { SubMenuContext } from './MenuSub.context';\n\nexport type MenuSubFactory = Factory<{\n  props: MenuSubProps;\n}>;\n\nexport interface MenuSubProps extends __PopoverProps {\n  children: React.ReactNode;\n\n  /** Called with current state when dropdown opens or closes */\n  onChange?: (opened: boolean) => void;\n\n  /** Open delay in ms, applicable when hover trigger is used */\n  openDelay?: number;\n\n  /** Close delay in ms, applicable when hover trigger is used */\n  closeDelay?: number;\n\n  /** Dropdown position relative to the target element @default 'right-start' */\n  position?: FloatingPosition;\n\n  /** Offset of the dropdown element @default 0 */\n  offset?: number | FloatingAxesOffsets;\n\n  /** Props passed down to the `Transition` component that used to animate dropdown presence, use to configure duration and animation type @default { duration: 0 } */\n  transitionProps?: TransitionOverride;\n\n  /** Determines whether submenu stays open while the cursor moves toward its dropdown. Pass an object to configure safe polygon behavior. @default true */\n  safeAreaPolygon?: boolean | SafePolygonOptions;\n}\n\nconst defaultProps = {\n  offset: 0,\n  position: 'right-start',\n  safeAreaPolygon: true,\n  transitionProps: { duration: 0 },\n  openDelay: 0,\n  middlewares: {\n    shift: {\n      // Enable crossAxis shift to keep submenu dropdown within viewport bounds when positioned horizontally\n      crossAxis: true,\n    },\n  },\n} satisfies Partial<MenuSubProps>;\n\nexport function MenuSub(_props: MenuSubProps) {\n  const { children, closeDelay, openDelay, position, safeAreaPolygon, ...others } = useProps(\n    'MenuSub',\n    defaultProps,\n    _props\n  );\n  const id = useId();\n  const [opened, { open, close }] = useDisclosure(false);\n  const parentSubCtx = use(SubMenuContext);\n  const menuCtx = useMenuContext();\n  const { dir } = useDirection();\n  const resolvedPosition = getFloatingPosition(dir, position);\n\n  const levelRegister = parentSubCtx?.registerOpenSub ?? menuCtx.registerOpenSub;\n  const unregisterRef = useRef<(() => void) | null>(null);\n\n  const activeChildCloseRef = useRef<(() => void) | null>(null);\n  const registerOpenSub = useCallback((closeFn: () => void) => {\n    const prev = activeChildCloseRef.current;\n    if (prev && prev !== closeFn) {\n      prev();\n    }\n    activeChildCloseRef.current = closeFn;\n    return () => {\n      if (activeChildCloseRef.current === closeFn) {\n        activeChildCloseRef.current = null;\n      }\n    };\n  }, []);\n\n  const handleOpen = useCallback(() => {\n    unregisterRef.current = levelRegister(close);\n    open();\n  }, [close, levelRegister, open]);\n\n  const handleClose = useCallback(() => {\n    unregisterRef.current?.();\n    unregisterRef.current = null;\n    close();\n  }, [close]);\n\n  const { context, refs } = useFloating({\n    placement: resolvedPosition,\n    open: opened,\n    onOpenChange: (nextOpen) => {\n      if (nextOpen) {\n        handleOpen();\n      } else {\n        handleClose();\n      }\n    },\n  });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      handleClose: safeAreaPolygon\n        ? safePolygon(typeof safeAreaPolygon === 'object' ? safeAreaPolygon : undefined)\n        : undefined,\n      delay: { open: openDelay, close: closeDelay },\n    }),\n  ]);\n\n  const focusFirstItem = () =>\n    window.setTimeout(() => {\n      document\n        .getElementById(`${id}-dropdown`)\n        ?.querySelectorAll<HTMLButtonElement>('[data-menu-item]:not([data-disabled])')[0]\n        ?.focus();\n    }, 16);\n\n  const focusParentItem = () =>\n    window.setTimeout(() => {\n      document.getElementById(`${id}-target`)?.focus();\n    }, 16);\n\n  return (\n    <SubMenuContext\n      value={{\n        opened,\n        close: handleClose,\n        open: handleOpen,\n        focusFirstItem,\n        focusParentItem,\n        parentContext: parentSubCtx,\n        setReference: refs.setReference,\n        setFloating: refs.setFloating,\n        getReferenceProps,\n        getFloatingProps,\n        registerOpenSub,\n      }}\n    >\n      <Popover\n        opened={opened}\n        withinPortal={false}\n        withArrow={false}\n        id={id}\n        position={position}\n        {...others}\n      >\n        {children}\n      </Popover>\n    </SubMenuContext>\n  );\n}\n\nMenuSub.extend = (input: ExtendComponent<MenuSubFactory>) => input;\nMenuSub.displayName = '@mantine/core/MenuSub';\nMenuSub.Target = MenuSubTarget;\nMenuSub.Dropdown = MenuSubDropdown;\nMenuSub.Item = MenuSubItem;\n"],"mappings":";;;;;;;;;;;;;;;;AAoDA,MAAM,eAAe;CACnB,QAAQ;CACR,UAAU;CACV,iBAAiB;CACjB,iBAAiB,EAAE,UAAU,EAAE;CAC/B,WAAW;CACX,aAAa,EACX,OAAO,EAEL,WAAW,KACb,EACF;AACF;AAEA,SAAgB,QAAQ,QAAsB;CAC5C,MAAM,EAAE,UAAU,YAAY,WAAW,UAAU,iBAAiB,GAAG,WAAWA,kBAAAA,SAChF,WACA,cACA,MACF;CACA,MAAM,MAAA,GAAA,eAAA,OAAW;CACjB,MAAM,CAAC,QAAQ,EAAE,MAAM,YAAA,GAAA,eAAA,eAAyB,KAAK;CACrD,MAAM,gBAAA,GAAA,MAAA,KAAmBC,wBAAAA,cAAc;CACvC,MAAM,UAAUC,qBAAAA,eAAe;CAC/B,MAAM,EAAE,QAAQC,0BAAAA,aAAa;CAC7B,MAAM,mBAAmBC,8BAAAA,oBAAoB,KAAK,QAAQ;CAE1D,MAAM,gBAAgB,cAAc,mBAAmB,QAAQ;CAC/D,MAAM,iBAAA,GAAA,MAAA,QAA4C,IAAI;CAEtD,MAAM,uBAAA,GAAA,MAAA,QAAkD,IAAI;CAC5D,MAAM,mBAAA,GAAA,MAAA,cAA+B,YAAwB;EAC3D,MAAM,OAAO,oBAAoB;EACjC,IAAI,QAAQ,SAAS,SACnB,KAAK;EAEP,oBAAoB,UAAU;EAC9B,aAAa;GACX,IAAI,oBAAoB,YAAY,SAClC,oBAAoB,UAAU;EAElC;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,cAAA,GAAA,MAAA,mBAA+B;EACnC,cAAc,UAAU,cAAc,KAAK;EAC3C,KAAK;CACP,GAAG;EAAC;EAAO;EAAe;CAAI,CAAC;CAE/B,MAAM,eAAA,GAAA,MAAA,mBAAgC;EACpC,cAAc,UAAU;EACxB,cAAc,UAAU;EACxB,MAAM;CACR,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,EAAE,SAAS,UAAA,GAAA,mBAAA,aAAqB;EACpC,WAAW;EACX,MAAM;EACN,eAAe,aAAa;GAC1B,IAAI,UACF,WAAW;QAEX,YAAY;EAEhB;CACF,CAAC;CAED,MAAM,EAAE,mBAAmB,sBAAA,GAAA,mBAAA,iBAAqC,EAAA,GAAA,mBAAA,UACrD,SAAS;EAChB,aAAa,mBAAA,GAAA,mBAAA,aACG,OAAO,oBAAoB,WAAW,kBAAkB,KAAA,CAAS,IAC7E,KAAA;EACJ,OAAO;GAAE,MAAM;GAAW,OAAO;EAAW;CAC9C,CAAC,CACH,CAAC;CAED,MAAM,uBACJ,OAAO,iBAAiB;EACtB,SACG,eAAe,GAAG,GAAG,UAAU,GAC9B,iBAAoC,uCAAuC,EAAE,IAC7E,MAAM;CACZ,GAAG,EAAE;CAEP,MAAM,wBACJ,OAAO,iBAAiB;EACtB,SAAS,eAAe,GAAG,GAAG,QAAQ,GAAG,MAAM;CACjD,GAAG,EAAE;CAEP,OACE,iBAAA,GAAA,kBAAA,KAACH,wBAAAA,gBAAD;EACE,OAAO;GACL;GACA,OAAO;GACP,MAAM;GACN;GACA;GACA,eAAe;GACf,cAAc,KAAK;GACnB,aAAa,KAAK;GAClB;GACA;GACA;EACF;YAEA,iBAAA,GAAA,kBAAA,KAACI,gBAAAA,SAAD;GACU;GACR,cAAc;GACd,WAAW;GACP;GACM;GACV,GAAI;GAEH;EACM,CAAA;CACK,CAAA;AAEpB;AAEA,QAAQ,UAAU,UAA2C;AAC7D,QAAQ,cAAc;AACtB,QAAQ,SAASC,sBAAAA;AACjB,QAAQ,WAAWC,wBAAAA;AACnB,QAAQ,OAAOC,oBAAAA"}

package/cjs/components/Modal/ModalRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModalRoot.cjs","names":["getDefaultZIndex","createVarsResolver","getRadius","getSize","rem","factory","useProps","useStyles","ModalProvider","ModalBase","ScrollArea","classes"],"sources":["../../../src/components/Modal/ModalRoot.tsx"],"sourcesContent":["import {\n  createVarsResolver,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  getRadius,\n  getSize,\n  MantineRadius,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ModalBase, ModalBaseProps, ModalBaseStylesNames } from '../ModalBase';\nimport { ScrollArea } from '../ScrollArea';\nimport { ModalProvider, ScrollAreaComponent } from './Modal.context';\nimport classes from './Modal.module.css';\n\nexport type ModalRootStylesNames = ModalBaseStylesNames;\nexport type ModalRootCssVariables = {\n  root: '--modal-radius' | '--modal-size' | '--modal-y-offset' | '--modal-x-offset';\n};\n\nexport interface ModalRootProps extends StylesApiProps<ModalRootFactory>, ModalBaseProps {\n  __staticSelector?: string;\n\n  /** Top/bottom modal offset @default 5dvh */\n  yOffset?: React.CSSProperties['marginTop'];\n\n  /** Left/right modal offset @default 5vw */\n  xOffset?: React.CSSProperties['marginLeft'];\n\n  /** Scroll area component @default 'div' */\n  scrollAreaComponent?: ScrollAreaComponent;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** If set, the modal is centered vertically @default false */\n  centered?: boolean;\n\n  /** If set, the modal takes the entire screen @default false */\n  fullScreen?: boolean;\n}\n\nexport type ModalRootFactory = Factory<{\n  props: ModalRootProps;\n  ref: HTMLDivElement;\n  stylesNames: ModalRootStylesNames;\n  vars: ModalRootCssVariables;\n  compound: true;\n}>;\n\nconst defaultProps = {\n  __staticSelector: 'Modal',\n  closeOnClickOutside: true,\n  withinPortal: true,\n  lockScroll: true,\n  trapFocus: true,\n  returnFocus: true,\n  closeOnEscape: true,\n  keepMounted: false,\n  zIndex: getDefaultZIndex('modal'),\n  transitionProps: { duration: 200, transition: 'fade-down' },\n  yOffset: '5dvh',\n} satisfies Partial<ModalRootProps>;\n\nconst varsResolver = createVarsResolver<ModalRootFactory>(\n  (_, { radius, size, yOffset, xOffset }) => ({\n    root: {\n      '--modal-radius': radius === undefined ? undefined : getRadius(radius),\n      '--modal-size': getSize(size, 'modal-size'),\n      '--modal-y-offset': rem(yOffset),\n      '--modal-x-offset': rem(xOffset),\n    },\n  })\n);\n\nexport const ModalRoot = factory<ModalRootFactory>((_props) => {\n  const props = useProps('ModalRoot', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    yOffset,\n    scrollAreaComponent,\n    radius,\n    fullScreen,\n    centered,\n    xOffset,\n    __staticSelector,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ModalRootFactory>({\n    name: __staticSelector,\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <ModalProvider value={{ yOffset, scrollAreaComponent, getStyles, fullScreen }}>\n      <ModalBase\n        {...getStyles('root')}\n        data-full-screen={fullScreen || undefined}\n        data-centered={centered || undefined}\n        data-offset-scrollbars={scrollAreaComponent === ScrollArea.Autosize || undefined}\n        unstyled={unstyled}\n        {...others}\n      />\n    </ModalProvider>\n  );\n});\n\nModalRoot.classes = classes;\nModalRoot.varsResolver = varsResolver;\nModalRoot.displayName = '@mantine/core/ModalRoot';\n"],"mappings":";;;;;;;;;;;;;;;AAqDA,MAAM,eAAe;CACnB,kBAAkB;CAClB,qBAAqB;CACrB,cAAc;CACd,YAAY;CACZ,WAAW;CACX,aAAa;CACb,eAAe;CACf,aAAa;CACb,QAAQA,4BAAAA,iBAAiB,OAAO;CAChC,iBAAiB;EAAE,UAAU;EAAK,YAAY;CAAY;CAC1D,SAAS;AACX;AAEA,MAAM,eAAeC,6BAAAA,oBAClB,GAAG,EAAE,QAAQ,MAAM,SAAS,eAAe,EAC1C,MAAM;CACJ,kBAAkB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,MAAM;CACrE,gBAAgBC,iBAAAA,QAAQ,MAAM,YAAY;CAC1C,oBAAoBC,YAAAA,IAAI,OAAO;CAC/B,oBAAoBA,YAAAA,IAAI,OAAO;AACjC,EACF,EACF;AAEA,MAAa,YAAYC,gBAAAA,SAA2B,WAAW;CAC7D,MAAM,QAAQC,kBAAAA,SAAS,aAAa,cAAc,MAAM;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,SACA,qBACA,QACA,YACA,UACA,SACA,kBACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA4B;EAC5C,MAAM;EACN,SAAA,qBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,eAAD;EAAe,OAAO;GAAE;GAAS;GAAqB;GAAW;EAAW;YAC1E,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;GACE,GAAI,UAAU,MAAM;GACpB,oBAAkB,cAAc,KAAA;GAChC,iBAAe,YAAY,KAAA;GAC3B,0BAAwB,wBAAwBC,mBAAAA,WAAW,YAAY,KAAA;GAC7D;GACV,GAAI;EACL,CAAA;CACY,CAAA;AAEnB,CAAC;AAED,UAAU,UAAUC,qBAAAA;AACpB,UAAU,eAAe;AACzB,UAAU,cAAc"}
+{"version":3,"file":"ModalRoot.cjs","names":["getDefaultZIndex","createVarsResolver","getRadius","getSize","rem","factory","useProps","useStyles","ModalProvider","ModalBase","ScrollArea","classes"],"sources":["../../../src/components/Modal/ModalRoot.tsx"],"sourcesContent":["import {\n  createVarsResolver,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  getRadius,\n  getSize,\n  MantineRadius,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ModalBase, ModalBaseProps, ModalBaseStylesNames } from '../ModalBase';\nimport { ScrollArea } from '../ScrollArea';\nimport { ModalProvider, ScrollAreaComponent } from './Modal.context';\nimport classes from './Modal.module.css';\n\nexport type ModalRootStylesNames = ModalBaseStylesNames;\nexport type ModalRootCssVariables = {\n  root: '--modal-radius' | '--modal-size' | '--modal-y-offset' | '--modal-x-offset';\n};\n\nexport interface ModalRootProps extends StylesApiProps<ModalRootFactory>, ModalBaseProps {\n  __staticSelector?: string;\n\n  /** Top/bottom modal offset @default 5dvh */\n  yOffset?: React.CSSProperties['marginTop'];\n\n  /** Left/right modal offset @default 5vw */\n  xOffset?: React.CSSProperties['marginLeft'];\n\n  /** Scroll area component @default 'div' */\n  scrollAreaComponent?: ScrollAreaComponent;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** If set, the modal is centered vertically @default false */\n  centered?: boolean;\n\n  /** If set, the modal takes the entire screen @default false */\n  fullScreen?: boolean;\n}\n\nexport type ModalRootFactory = Factory<{\n  props: ModalRootProps;\n  ref: HTMLDivElement;\n  stylesNames: ModalRootStylesNames;\n  vars: ModalRootCssVariables;\n}>;\n\nconst defaultProps = {\n  __staticSelector: 'Modal',\n  closeOnClickOutside: true,\n  withinPortal: true,\n  lockScroll: true,\n  trapFocus: true,\n  returnFocus: true,\n  closeOnEscape: true,\n  keepMounted: false,\n  zIndex: getDefaultZIndex('modal'),\n  transitionProps: { duration: 200, transition: 'fade-down' },\n  yOffset: '5dvh',\n} satisfies Partial<ModalRootProps>;\n\nconst varsResolver = createVarsResolver<ModalRootFactory>(\n  (_, { radius, size, yOffset, xOffset }) => ({\n    root: {\n      '--modal-radius': radius === undefined ? undefined : getRadius(radius),\n      '--modal-size': getSize(size, 'modal-size'),\n      '--modal-y-offset': rem(yOffset),\n      '--modal-x-offset': rem(xOffset),\n    },\n  })\n);\n\nexport const ModalRoot = factory<ModalRootFactory>((_props) => {\n  const props = useProps('ModalRoot', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    yOffset,\n    scrollAreaComponent,\n    radius,\n    fullScreen,\n    centered,\n    xOffset,\n    __staticSelector,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ModalRootFactory>({\n    name: __staticSelector,\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <ModalProvider value={{ yOffset, scrollAreaComponent, getStyles, fullScreen }}>\n      <ModalBase\n        {...getStyles('root')}\n        data-full-screen={fullScreen || undefined}\n        data-centered={centered || undefined}\n        data-offset-scrollbars={scrollAreaComponent === ScrollArea.Autosize || undefined}\n        unstyled={unstyled}\n        {...others}\n      />\n    </ModalProvider>\n  );\n});\n\nModalRoot.classes = classes;\nModalRoot.varsResolver = varsResolver;\nModalRoot.displayName = '@mantine/core/ModalRoot';\n"],"mappings":";;;;;;;;;;;;;;;AAoDA,MAAM,eAAe;CACnB,kBAAkB;CAClB,qBAAqB;CACrB,cAAc;CACd,YAAY;CACZ,WAAW;CACX,aAAa;CACb,eAAe;CACf,aAAa;CACb,QAAQA,4BAAAA,iBAAiB,OAAO;CAChC,iBAAiB;EAAE,UAAU;EAAK,YAAY;CAAY;CAC1D,SAAS;AACX;AAEA,MAAM,eAAeC,6BAAAA,oBAClB,GAAG,EAAE,QAAQ,MAAM,SAAS,eAAe,EAC1C,MAAM;CACJ,kBAAkB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,MAAM;CACrE,gBAAgBC,iBAAAA,QAAQ,MAAM,YAAY;CAC1C,oBAAoBC,YAAAA,IAAI,OAAO;CAC/B,oBAAoBA,YAAAA,IAAI,OAAO;AACjC,EACF,EACF;AAEA,MAAa,YAAYC,gBAAAA,SAA2B,WAAW;CAC7D,MAAM,QAAQC,kBAAAA,SAAS,aAAa,cAAc,MAAM;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,SACA,qBACA,QACA,YACA,UACA,SACA,kBACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA4B;EAC5C,MAAM;EACN,SAAA,qBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,eAAD;EAAe,OAAO;GAAE;GAAS;GAAqB;GAAW;EAAW;YAC1E,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;GACE,GAAI,UAAU,MAAM;GACpB,oBAAkB,cAAc,KAAA;GAChC,iBAAe,YAAY,KAAA;GAC3B,0BAAwB,wBAAwBC,mBAAAA,WAAW,YAAY,KAAA;GAC7D;GACV,GAAI;EACL,CAAA;CACY,CAAA;AAEnB,CAAC;AAED,UAAU,UAAUC,qBAAAA;AACpB,UAAU,eAAe;AACzB,UAAU,cAAc"}

package/cjs/components/Pill/Pill.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.module.cjs","names":[],"sources":["../../../src/components/Pill/Pill.module.css"],"sourcesContent":[".root {\n  --pill-fz-xs: 10px;\n  --pill-fz-sm: 12px;\n  --pill-fz-md: 14px;\n  --pill-fz-lg: 16px;\n  --pill-fz-xl: 18px;\n\n  --pill-height-xs: 18px;\n  --pill-height-sm: 22px;\n  --pill-height-md: 25px;\n  --pill-height-lg: 28px;\n  --pill-height-xl: 32px;\n\n  --pill-fz: var(--pill-fz-sm);\n  --pill-height: var(--pill-height-sm);\n\n  font-size: var(--pill-fz);\n  flex: 0;\n  height: var(--pill-height);\n  padding-inline: 0.8em;\n  display: inline-flex;\n  align-items: center;\n  border-radius: var(--pill-radius, 1000rem);\n  line-height: 1;\n  white-space: nowrap;\n  user-select: none;\n  -webkit-user-select: none;\n  max-width: 100%;\n  position: relative;\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-7);\n    color: var(--mantine-color-dark-0);\n  }\n\n  @mixin where-light {\n    color: var(--mantine-color-black);\n  }\n\n  &:where([data-with-remove]:not(:has(button:disabled))) {\n    padding-inline-end: 0;\n  }\n\n  &:where([data-disabled], :has(button:disabled)) {\n    cursor: not-allowed;\n  }\n\n  &:where([draggable='true']) {\n    cursor: grab;\n  }\n\n  &:where([draggable='true']):focus-visible {\n    outline: 2px solid var(--mantine-primary-color-filled);\n    outline-offset: 2px;\n  }\n\n  &:where([data-dragging]) {\n    opacity: 0.4;\n    cursor: grabbing;\n  }\n\n  &:where([data-drag-over='before'])::before,\n  &:where([data-drag-over='after'])::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: rem(2px);\n    background-color: var(--mantine-primary-color-filled);\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  &:where([data-drag-over='before'])::before {\n    inset-inline-start: rem(-4px);\n  }\n\n  &:where([data-drag-over='after'])::after {\n    inset-inline-end: rem(-4px);\n  }\n}\n\n.root--default {\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-1);\n\n    &:where([data-disabled], :has(button:disabled)) {\n      background-color: var(--mantine-color-disabled);\n    }\n  }\n}\n\n.root--contrast {\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n\n    &:where([data-disabled], :has(button:disabled)) {\n      background-color: var(--mantine-color-disabled);\n    }\n  }\n}\n\n.label {\n  cursor: inherit;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: flex;\n  align-items: center;\n  height: 100%;\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n}\n\n.remove {\n  color: inherit;\n  font-size: inherit;\n  height: 100%;\n  min-height: unset;\n  min-width: 2em;\n  width: unset;\n  border-radius: 0;\n  padding-inline-start: 0.1em;\n  padding-inline-end: 0.3em;\n  flex: 0;\n  border-end-end-radius: var(--pill-radius, 50%);\n  border-start-end-radius: var(--pill-radius, 50%);\n\n  .root[data-disabled] > &,\n  &:disabled {\n    display: none;\n    background-color: transparent;\n    width: 0.8em;\n    min-width: 0.8em;\n    padding: 0;\n    cursor: not-allowed;\n\n    & > svg {\n      display: none;\n    }\n  }\n\n  & > svg {\n    pointer-events: none;\n  }\n}\n\n.group {\n  --pg-gap-xs: 6px;\n  --pg-gap-sm: 8px;\n  --pg-gap-md: 10px;\n  --pg-gap-lg: 12px;\n  --pg-gap-xl: 12px;\n  --pg-gap: var(--pg-gap-sm);\n\n  display: flex;\n  align-items: center;\n  gap: var(--pg-gap);\n  flex-wrap: wrap;\n}\n"],"mappings":""}
+{"version":3,"file":"Pill.module.cjs","names":[],"sources":["../../../src/components/Pill/Pill.module.css"],"sourcesContent":[".root {\n  --pill-fz-xs: 10px;\n  --pill-fz-sm: 12px;\n  --pill-fz-md: 14px;\n  --pill-fz-lg: 16px;\n  --pill-fz-xl: 18px;\n\n  --pill-height-xs: 18px;\n  --pill-height-sm: 22px;\n  --pill-height-md: 25px;\n  --pill-height-lg: 28px;\n  --pill-height-xl: 32px;\n\n  --pill-fz: var(--pill-fz-sm);\n  --pill-height: var(--pill-height-sm);\n\n  font-size: var(--pill-fz);\n  flex: 0;\n  height: var(--pill-height);\n  padding-inline: 0.8em;\n  display: inline-flex;\n  align-items: center;\n  border-radius: var(--pill-radius, 1000rem);\n  line-height: 1;\n  white-space: nowrap;\n  user-select: none;\n  -webkit-user-select: none;\n  max-width: 100%;\n  position: relative;\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-7);\n    color: var(--mantine-color-dark-0);\n  }\n\n  @mixin where-light {\n    color: var(--mantine-color-black);\n  }\n\n  &:where([data-with-remove]:not(:has(button:disabled))) {\n    padding-inline-end: 0;\n  }\n\n  &:where([data-disabled], :has(button:disabled)) {\n    cursor: not-allowed;\n  }\n\n  &:where([draggable='true']) {\n    cursor: grab;\n  }\n\n  &:where([draggable='true']):focus-visible {\n    outline: 2px solid var(--mantine-primary-color-filled);\n    outline-offset: 2px;\n  }\n\n  &:where([data-dragging]) {\n    opacity: 0.4;\n    cursor: grabbing;\n  }\n\n  &:where([data-drag-over='before'])::before,\n  &:where([data-drag-over='after'])::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: rem(2px);\n    background-color: var(--mantine-primary-color-filled);\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  &:where([data-drag-over='before'])::before {\n    inset-inline-start: rem(-4px);\n  }\n\n  &:where([data-drag-over='after'])::after {\n    inset-inline-end: rem(-4px);\n  }\n}\n\n.root--default {\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-1);\n\n    &:where([data-disabled], :has(button:disabled)) {\n      background-color: var(--mantine-color-disabled);\n    }\n  }\n}\n\n.root--contrast {\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n\n    &:where([data-disabled], :has(button:disabled)) {\n      background-color: var(--mantine-color-disabled);\n    }\n  }\n}\n\n.label {\n  cursor: inherit;\n  display: block;\n  overflow: hidden;\n  height: 100%;\n  line-height: var(--pill-height);\n  text-overflow: ellipsis;\n}\n\n.remove {\n  color: inherit;\n  font-size: inherit;\n  height: 100%;\n  min-height: unset;\n  min-width: 2em;\n  width: unset;\n  border-radius: 0;\n  padding-inline-start: 0.1em;\n  padding-inline-end: 0.3em;\n  flex: 0;\n  border-end-end-radius: var(--pill-radius, 50%);\n  border-start-end-radius: var(--pill-radius, 50%);\n\n  .root[data-disabled] > &,\n  &:disabled {\n    display: none;\n    background-color: transparent;\n    width: 0.8em;\n    min-width: 0.8em;\n    padding: 0;\n    cursor: not-allowed;\n\n    & > svg {\n      display: none;\n    }\n  }\n\n  & > svg {\n    pointer-events: none;\n  }\n}\n\n.group {\n  --pg-gap-xs: 6px;\n  --pg-gap-sm: 8px;\n  --pg-gap-md: 10px;\n  --pg-gap-lg: 12px;\n  --pg-gap-xl: 12px;\n  --pg-gap: var(--pg-gap-sm);\n\n  display: flex;\n  align-items: center;\n  gap: var(--pg-gap);\n  flex-wrap: wrap;\n}\n"],"mappings":""}

package/cjs/components/Select/Select.cjs

@@ -90,7 +90,7 @@ const Select = require_factory.genericFactory((_props) => {
 			onClear?.();
 		}
 	});
-	const _clearable = clearable && !!_value && !disabled && !readOnly;
+	const _clearable = clearable && _value != null && !disabled && !readOnly;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Combobox.Combobox, {
 		store: combobox,
 		__staticSelector: "Select",

package/cjs/components/Select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","names":["genericFactory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","useResolvedStylesApi","Combobox","InputBase","OptionsDropdown"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useId, usePrevious, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  Factory,\n  genericFactory,\n  MantineColor,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n  InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type SelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames;\n\nexport interface SelectProps<Value extends Primitive = string>\n  extends\n    BoxProps,\n    __BaseInputProps,\n    ComboboxLikeProps<Value>,\n    StylesApiProps<SelectFactory>,\n    ElementProps<'input', 'onChange' | 'size' | 'value' | 'defaultValue'> {\n  /** Controlled component value */\n  value?: Value | null;\n\n  /** Uncontrolled component default value */\n  defaultValue?: Value | null;\n\n  /** Called when value changes */\n  onChange?: (value: Value | null, option: ComboboxItem<Value>) => void;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Determines whether the select should be searchable @default false */\n  searchable?: boolean;\n\n  /** Displays check icon near the selected option label @default true */\n  withCheckIcon?: boolean;\n\n  /** Aligns unchecked labels with the checked one @default false */\n  withAlignedLabels?: boolean;\n\n  /** Position of the check icon relative to the option label @default 'left' */\n  checkIconPosition?: 'left' | 'right';\n\n  /** Message displayed when no options match the search query or when there is no data */\n  nothingFoundMessage?: React.ReactNode;\n\n  /** Controlled search value */\n  searchValue?: string;\n\n  /** Default search value */\n  defaultSearchValue?: string;\n\n  /** Called when search changes */\n  onSearchChange?: (value: string) => void;\n\n  /** Allows deselecting the selected option by clicking it @default true */\n  allowDeselect?: boolean;\n\n  /** Displays clear button in the right section when component has value @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** A function to render content of the option, replaces the default content of the option */\n  renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem<Value>>) => React.ReactNode;\n\n  /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Controls color of the default chevron, by default depends on the color scheme */\n  chevronColor?: MantineColor;\n\n  /** Automatically selects the highlighted option when input loses focus @default false */\n  autoSelectOnBlur?: boolean;\n\n  /** Opens dropdown when input receives focus (requires searchable={true}) @default true */\n  openOnFocus?: boolean;\n}\n\nexport type SelectFactory = Factory<{\n  props: SelectProps;\n  ref: HTMLInputElement;\n  stylesNames: SelectStylesNames;\n  variant: InputVariant;\n  signature: <Value extends Primitive = string>(props: SelectProps<Value>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  size: 'sm',\n  withCheckIcon: true,\n  allowDeselect: true,\n  checkIconPosition: 'left',\n  openOnFocus: true,\n} satisfies Partial<SelectProps>;\n\nexport const Select = genericFactory<SelectFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'Select'], defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownClose,\n    onDropdownOpen,\n    onFocus,\n    onBlur,\n    onClick,\n    onChange,\n    data,\n    value,\n    defaultValue,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    readOnly,\n    disabled,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    size,\n    searchable,\n    rightSection,\n    checkIconPosition,\n    withCheckIcon,\n    withAlignedLabels,\n    nothingFoundMessage,\n    name,\n    form,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    allowDeselect,\n    error,\n    rightSectionPointerEvents,\n    id,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    hiddenInputProps,\n    renderOption,\n    onClear,\n    autoComplete,\n    scrollAreaProps,\n    __defaultRightSection,\n    __clearSection,\n    __clearable,\n    chevronColor,\n    autoSelectOnBlur,\n    openOnFocus,\n    attributes,\n    ...others\n  } = props;\n\n  const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n  const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n  const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\n  const _id = useId(id);\n\n  const [_value, setValue, controlled] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: null,\n    onChange,\n  });\n\n  const selectedOption =\n    _value != null\n      ? `${_value}` in optionsLockup\n        ? optionsLockup[`${_value}`]\n        : retainedSelectedOptions.current[`${_value}`]\n      : undefined;\n  const previousSelectedOption = usePrevious(selectedOption);\n\n  const [search, setSearch, searchControlled] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: selectedOption ? selectedOption.label : '',\n    onChange: onSearchChange,\n  });\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      } else {\n        combobox.updateSelectedOptionIndex('active', { scrollIntoView: true });\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      // Required for autoSelectOnBlur to work correctly\n      setTimeout(combobox.resetSelectedOption, 0);\n    },\n  });\n\n  const handleSearchChange = (value: string) => {\n    setSearch(value);\n    combobox.resetSelectedOption();\n  };\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<SelectFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, search]);\n\n  useEffect(() => {\n    if (value === null) {\n      handleSearchChange('');\n    }\n\n    if (\n      value != null &&\n      selectedOption &&\n      (previousSelectedOption?.value !== selectedOption.value ||\n        previousSelectedOption?.label !== selectedOption.label)\n    ) {\n      handleSearchChange(selectedOption.label);\n    }\n  }, [value, selectedOption]);\n\n  useEffect(() => {\n    if (!controlled && !searchControlled) {\n      handleSearchChange(\n        _value != null\n          ? `${_value}` in optionsLockup\n            ? optionsLockup[`${_value}`]?.label\n            : retainedSelectedOptions.current[`${_value}`]?.label || ''\n          : ''\n      );\n    }\n  }, [optionsLockup, _value]);\n\n  useEffect(() => {\n    if (_value) {\n      if (`${_value}` in optionsLockup) {\n        retainedSelectedOptions.current[`${_value}`] = optionsLockup[`${_value}`];\n      }\n    }\n  }, [optionsLockup, _value]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        setValue(null, null);\n        handleSearchChange('');\n        onClear?.();\n      }}\n    />\n  );\n\n  const _clearable = clearable && !!_value && !disabled && !readOnly;\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        __staticSelector=\"Select\"\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        readOnly={readOnly}\n        size={size}\n        attributes={attributes}\n        keepMounted={autoSelectOnBlur}\n        onOptionSubmit={(val) => {\n          onOptionSubmit?.(val as any);\n          const optionLockup = allowDeselect\n            ? `${optionsLockup[val].value}` === `${_value}`\n              ? null\n              : optionsLockup[val]\n            : optionsLockup[val];\n\n          const nextValue = optionLockup ? optionLockup.value : null;\n\n          nextValue !== _value && setValue(nextValue as any, optionLockup);\n          !controlled && handleSearchChange(nextValue != null ? optionLockup?.label || '' : '');\n          combobox.closeDropdown();\n        }}\n        {...comboboxProps}\n      >\n        <Combobox.Target\n          targetType={searchable ? 'input' : 'button'}\n          autoComplete={autoComplete}\n          withExpandedAttribute\n        >\n          <InputBase\n            id={_id}\n            __defaultRightSection={\n              <Combobox.Chevron\n                size={size}\n                error={error}\n                unstyled={unstyled}\n                color={chevronColor}\n              />\n            }\n            __clearSection={clearButton}\n            __clearable={_clearable}\n            __clearSectionMode={clearSectionMode}\n            rightSection={rightSection}\n            rightSectionPointerEvents={rightSectionPointerEvents || 'none'}\n            {...others}\n            size={size}\n            __staticSelector=\"Select\"\n            disabled={disabled}\n            readOnly={readOnly || !searchable}\n            value={search}\n            onChange={(event) => {\n              handleSearchChange(event.currentTarget.value);\n              combobox.openDropdown();\n              selectFirstOptionOnChange && combobox.selectFirstOption();\n            }}\n            onFocus={(event) => {\n              openOnFocus && !!searchable && combobox.openDropdown();\n              onFocus?.(event);\n            }}\n            onBlur={(event) => {\n              if (autoSelectOnBlur) {\n                combobox.clickSelectedOption();\n              }\n\n              !!searchable && combobox.closeDropdown();\n              const optionLockup =\n                _value != null &&\n                (`${_value}` in optionsLockup\n                  ? optionsLockup[`${_value}`]\n                  : retainedSelectedOptions.current[`${_value}`]);\n              handleSearchChange(optionLockup ? optionLockup.label || '' : '');\n              onBlur?.(event);\n            }}\n            onClick={(event) => {\n              searchable ? combobox.openDropdown() : combobox.toggleDropdown();\n              onClick?.(event);\n            }}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            unstyled={unstyled}\n            pointer={!searchable}\n            error={error}\n            attributes={attributes}\n          />\n        </Combobox.Target>\n        <OptionsDropdown\n          data={parsedData as any}\n          hidden={readOnly || disabled}\n          filter={filter as OptionsFilter<Primitive> | undefined}\n          search={search}\n          limit={limit}\n          hiddenWhenEmpty={!nothingFoundMessage}\n          withScrollArea={withScrollArea}\n          maxDropdownHeight={maxDropdownHeight}\n          filterOptions={!!searchable && selectedOption?.label !== search}\n          value={_value}\n          checkIconPosition={checkIconPosition}\n          withCheckIcon={withCheckIcon}\n          withAlignedLabels={withAlignedLabels}\n          nothingFoundMessage={nothingFoundMessage}\n          unstyled={unstyled}\n          labelId={others.label ? `${_id}-label` : undefined}\n          aria-label={others.label ? undefined : others['aria-label']}\n          renderOption={renderOption}\n          scrollAreaProps={scrollAreaProps}\n        />\n      </Combobox>\n      <Combobox.HiddenInput\n        value={_value}\n        name={name}\n        form={form}\n        disabled={disabled}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nSelect.displayName = '@mantine/core/Select';\n\nexport namespace Select {\n  export type Props<Value extends Primitive = string> = SelectProps<Value>;\n  export type StylesNames = SelectStylesNames;\n  export type Factory = SelectFactory;\n}\n"],"mappings":"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"}
+{"version":3,"file":"Select.cjs","names":["genericFactory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","useResolvedStylesApi","Combobox","InputBase","OptionsDropdown"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useId, usePrevious, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  Factory,\n  genericFactory,\n  MantineColor,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n  InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type SelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames;\n\nexport interface SelectProps<Value extends Primitive = string>\n  extends\n    BoxProps,\n    __BaseInputProps,\n    ComboboxLikeProps<Value>,\n    StylesApiProps<SelectFactory>,\n    ElementProps<'input', 'onChange' | 'size' | 'value' | 'defaultValue'> {\n  /** Controlled component value */\n  value?: Value | null;\n\n  /** Uncontrolled component default value */\n  defaultValue?: Value | null;\n\n  /** Called when value changes */\n  onChange?: (value: Value | null, option: ComboboxItem<Value>) => void;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Determines whether the select should be searchable @default false */\n  searchable?: boolean;\n\n  /** Displays check icon near the selected option label @default true */\n  withCheckIcon?: boolean;\n\n  /** Aligns unchecked labels with the checked one @default false */\n  withAlignedLabels?: boolean;\n\n  /** Position of the check icon relative to the option label @default 'left' */\n  checkIconPosition?: 'left' | 'right';\n\n  /** Message displayed when no options match the search query or when there is no data */\n  nothingFoundMessage?: React.ReactNode;\n\n  /** Controlled search value */\n  searchValue?: string;\n\n  /** Default search value */\n  defaultSearchValue?: string;\n\n  /** Called when search changes */\n  onSearchChange?: (value: string) => void;\n\n  /** Allows deselecting the selected option by clicking it @default true */\n  allowDeselect?: boolean;\n\n  /** Displays clear button in the right section when component has value @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** A function to render content of the option, replaces the default content of the option */\n  renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem<Value>>) => React.ReactNode;\n\n  /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Controls color of the default chevron, by default depends on the color scheme */\n  chevronColor?: MantineColor;\n\n  /** Automatically selects the highlighted option when input loses focus @default false */\n  autoSelectOnBlur?: boolean;\n\n  /** Opens dropdown when input receives focus (requires searchable={true}) @default true */\n  openOnFocus?: boolean;\n}\n\nexport type SelectFactory = Factory<{\n  props: SelectProps;\n  ref: HTMLInputElement;\n  stylesNames: SelectStylesNames;\n  variant: InputVariant;\n  signature: <Value extends Primitive = string>(props: SelectProps<Value>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  size: 'sm',\n  withCheckIcon: true,\n  allowDeselect: true,\n  checkIconPosition: 'left',\n  openOnFocus: true,\n} satisfies Partial<SelectProps>;\n\nexport const Select = genericFactory<SelectFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'Select'], defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownClose,\n    onDropdownOpen,\n    onFocus,\n    onBlur,\n    onClick,\n    onChange,\n    data,\n    value,\n    defaultValue,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    readOnly,\n    disabled,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    size,\n    searchable,\n    rightSection,\n    checkIconPosition,\n    withCheckIcon,\n    withAlignedLabels,\n    nothingFoundMessage,\n    name,\n    form,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    allowDeselect,\n    error,\n    rightSectionPointerEvents,\n    id,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    hiddenInputProps,\n    renderOption,\n    onClear,\n    autoComplete,\n    scrollAreaProps,\n    __defaultRightSection,\n    __clearSection,\n    __clearable,\n    chevronColor,\n    autoSelectOnBlur,\n    openOnFocus,\n    attributes,\n    ...others\n  } = props;\n\n  const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n  const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n  const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\n  const _id = useId(id);\n\n  const [_value, setValue, controlled] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: null,\n    onChange,\n  });\n\n  const selectedOption =\n    _value != null\n      ? `${_value}` in optionsLockup\n        ? optionsLockup[`${_value}`]\n        : retainedSelectedOptions.current[`${_value}`]\n      : undefined;\n  const previousSelectedOption = usePrevious(selectedOption);\n\n  const [search, setSearch, searchControlled] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: selectedOption ? selectedOption.label : '',\n    onChange: onSearchChange,\n  });\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      } else {\n        combobox.updateSelectedOptionIndex('active', { scrollIntoView: true });\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      // Required for autoSelectOnBlur to work correctly\n      setTimeout(combobox.resetSelectedOption, 0);\n    },\n  });\n\n  const handleSearchChange = (value: string) => {\n    setSearch(value);\n    combobox.resetSelectedOption();\n  };\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<SelectFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, search]);\n\n  useEffect(() => {\n    if (value === null) {\n      handleSearchChange('');\n    }\n\n    if (\n      value != null &&\n      selectedOption &&\n      (previousSelectedOption?.value !== selectedOption.value ||\n        previousSelectedOption?.label !== selectedOption.label)\n    ) {\n      handleSearchChange(selectedOption.label);\n    }\n  }, [value, selectedOption]);\n\n  useEffect(() => {\n    if (!controlled && !searchControlled) {\n      handleSearchChange(\n        _value != null\n          ? `${_value}` in optionsLockup\n            ? optionsLockup[`${_value}`]?.label\n            : retainedSelectedOptions.current[`${_value}`]?.label || ''\n          : ''\n      );\n    }\n  }, [optionsLockup, _value]);\n\n  useEffect(() => {\n    if (_value) {\n      if (`${_value}` in optionsLockup) {\n        retainedSelectedOptions.current[`${_value}`] = optionsLockup[`${_value}`];\n      }\n    }\n  }, [optionsLockup, _value]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        setValue(null, null);\n        handleSearchChange('');\n        onClear?.();\n      }}\n    />\n  );\n\n  const _clearable = clearable && _value != null && !disabled && !readOnly;\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        __staticSelector=\"Select\"\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        readOnly={readOnly}\n        size={size}\n        attributes={attributes}\n        keepMounted={autoSelectOnBlur}\n        onOptionSubmit={(val) => {\n          onOptionSubmit?.(val as any);\n          const optionLockup = allowDeselect\n            ? `${optionsLockup[val].value}` === `${_value}`\n              ? null\n              : optionsLockup[val]\n            : optionsLockup[val];\n\n          const nextValue = optionLockup ? optionLockup.value : null;\n\n          nextValue !== _value && setValue(nextValue as any, optionLockup);\n          !controlled && handleSearchChange(nextValue != null ? optionLockup?.label || '' : '');\n          combobox.closeDropdown();\n        }}\n        {...comboboxProps}\n      >\n        <Combobox.Target\n          targetType={searchable ? 'input' : 'button'}\n          autoComplete={autoComplete}\n          withExpandedAttribute\n        >\n          <InputBase\n            id={_id}\n            __defaultRightSection={\n              <Combobox.Chevron\n                size={size}\n                error={error}\n                unstyled={unstyled}\n                color={chevronColor}\n              />\n            }\n            __clearSection={clearButton}\n            __clearable={_clearable}\n            __clearSectionMode={clearSectionMode}\n            rightSection={rightSection}\n            rightSectionPointerEvents={rightSectionPointerEvents || 'none'}\n            {...others}\n            size={size}\n            __staticSelector=\"Select\"\n            disabled={disabled}\n            readOnly={readOnly || !searchable}\n            value={search}\n            onChange={(event) => {\n              handleSearchChange(event.currentTarget.value);\n              combobox.openDropdown();\n              selectFirstOptionOnChange && combobox.selectFirstOption();\n            }}\n            onFocus={(event) => {\n              openOnFocus && !!searchable && combobox.openDropdown();\n              onFocus?.(event);\n            }}\n            onBlur={(event) => {\n              if (autoSelectOnBlur) {\n                combobox.clickSelectedOption();\n              }\n\n              !!searchable && combobox.closeDropdown();\n              const optionLockup =\n                _value != null &&\n                (`${_value}` in optionsLockup\n                  ? optionsLockup[`${_value}`]\n                  : retainedSelectedOptions.current[`${_value}`]);\n              handleSearchChange(optionLockup ? optionLockup.label || '' : '');\n              onBlur?.(event);\n            }}\n            onClick={(event) => {\n              searchable ? combobox.openDropdown() : combobox.toggleDropdown();\n              onClick?.(event);\n            }}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            unstyled={unstyled}\n            pointer={!searchable}\n            error={error}\n            attributes={attributes}\n          />\n        </Combobox.Target>\n        <OptionsDropdown\n          data={parsedData as any}\n          hidden={readOnly || disabled}\n          filter={filter as OptionsFilter<Primitive> | undefined}\n          search={search}\n          limit={limit}\n          hiddenWhenEmpty={!nothingFoundMessage}\n          withScrollArea={withScrollArea}\n          maxDropdownHeight={maxDropdownHeight}\n          filterOptions={!!searchable && selectedOption?.label !== search}\n          value={_value}\n          checkIconPosition={checkIconPosition}\n          withCheckIcon={withCheckIcon}\n          withAlignedLabels={withAlignedLabels}\n          nothingFoundMessage={nothingFoundMessage}\n          unstyled={unstyled}\n          labelId={others.label ? `${_id}-label` : undefined}\n          aria-label={others.label ? undefined : others['aria-label']}\n          renderOption={renderOption}\n          scrollAreaProps={scrollAreaProps}\n        />\n      </Combobox>\n      <Combobox.HiddenInput\n        value={_value}\n        name={name}\n        form={form}\n        disabled={disabled}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nSelect.displayName = '@mantine/core/Select';\n\nexport namespace Select {\n  export type Props<Value extends Primitive = string> = SelectProps<Value>;\n  export type StylesNames = SelectStylesNames;\n  export type Factory = SelectFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAuHA,MAAM,eAAe;CACnB,MAAM;CACN,eAAe;CACf,eAAe;CACf,mBAAmB;CACnB,aAAa;AACf;AAEA,MAAa,SAASA,gBAAAA,gBAA+B,WAAW;CAC9D,MAAM,QAAQC,kBAAAA,SAAS;EAAC;EAAS;EAAgB;CAAQ,GAAG,cAAc,MAAM;CAChF,MAAM,EACJ,YACA,QACA,UACA,MACA,gBACA,uBACA,iBACA,gBACA,SACA,QACA,SACA,UACA,MACA,OACA,cACA,2BACA,iCACA,gBACA,eACA,UACA,UACA,QACA,OACA,gBACA,mBACA,MACA,YACA,cACA,mBACA,eACA,mBACA,qBACA,MACA,MACA,aACA,oBACA,gBACA,eACA,OACA,2BACA,IACA,WACA,kBACA,kBACA,kBACA,cACA,SACA,cACA,iBACA,uBACA,gBACA,aACA,cACA,kBACA,aACA,YACA,GAAG,WACD;CAEJ,MAAM,cAAA,GAAA,MAAA,eAA2BC,iCAAAA,sBAAsB,IAAI,GAAG,CAAC,IAAI,CAAC;CACpE,MAAM,2BAAA,GAAA,MAAA,QAA0E,CAAC,CAAC;CAClF,MAAM,iBAAA,GAAA,MAAA,eAA8BC,2BAAAA,iBAAiB,UAAU,GAAG,CAAC,UAAU,CAAC;CAC9E,MAAM,OAAA,GAAA,eAAA,OAAY,EAAE;CAEpB,MAAM,CAAC,QAAQ,UAAU,eAAA,GAAA,eAAA,iBAA8B;EACrD;EACA;EACA,YAAY;EACZ;CACF,CAAC;CAED,MAAM,iBACJ,UAAU,OACN,GAAG,YAAY,gBACb,cAAc,GAAG,YACjB,wBAAwB,QAAQ,GAAG,YACrC,KAAA;CACN,MAAM,0BAAA,GAAA,eAAA,aAAqC,cAAc;CAEzD,MAAM,CAAC,QAAQ,WAAW,qBAAA,GAAA,eAAA,iBAAoC;EAC5D,OAAO;EACP,cAAc;EACd,YAAY,iBAAiB,eAAe,QAAQ;EACpD,UAAU;CACZ,CAAC;CAED,MAAM,WAAWC,qBAAAA,YAAY;EAC3B,QAAQ;EACR,eAAe;EACf,sBAAsB;GACpB,iBAAiB;GACjB,IAAI,iCACF,SAAS,kBAAkB;QAE3B,SAAS,0BAA0B,UAAU,EAAE,gBAAgB,KAAK,CAAC;EAEzE;EACA,uBAAuB;GACrB,kBAAkB;GAElB,WAAW,SAAS,qBAAqB,CAAC;EAC5C;CACF,CAAC;CAED,MAAM,sBAAsB,UAAkB;EAC5C,UAAU,KAAK;EACf,SAAS,oBAAoB;CAC/B;CAEA,MAAM,EAAE,oBAAoB,mBAAmBC,gCAAAA,qBAAoC;EACjF;EACA;EACA;CACF,CAAC;CAED,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,2BACF,SAAS,kBAAkB;CAE/B,GAAG,CAAC,2BAA2B,MAAM,CAAC;CAEtC,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,UAAU,MACZ,mBAAmB,EAAE;EAGvB,IACE,SAAS,QACT,mBACC,wBAAwB,UAAU,eAAe,SAChD,wBAAwB,UAAU,eAAe,QAEnD,mBAAmB,eAAe,KAAK;CAE3C,GAAG,CAAC,OAAO,cAAc,CAAC;CAE1B,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,CAAC,cAAc,CAAC,kBAClB,mBACE,UAAU,OACN,GAAG,YAAY,gBACb,cAAc,GAAG,WAAW,QAC5B,wBAAwB,QAAQ,GAAG,WAAW,SAAS,KACzD,EACN;CAEJ,GAAG,CAAC,eAAe,MAAM,CAAC;CAE1B,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI;OACE,GAAG,YAAY,eACjB,wBAAwB,QAAQ,GAAG,YAAY,cAAc,GAAG;EAAA;CAGtE,GAAG,CAAC,eAAe,MAAM,CAAC;CAE1B,MAAM,cACJ,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,SAAS,aAAV;EACE,GAAI;EACJ,eAAe;GACb,SAAS,MAAM,IAAI;GACnB,mBAAmB,EAAE;GACrB,UAAU;EACZ;CACD,CAAA;CAGH,MAAM,aAAa,aAAa,UAAU,QAAQ,CAAC,YAAY,CAAC;CAEhE,OACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,MAACA,iBAAAA,UAAD;EACE,OAAO;EACP,kBAAiB;EACjB,YAAY;EACZ,QAAQ;EACE;EACA;EACJ;EACM;EACZ,aAAa;EACb,iBAAiB,QAAQ;GACvB,iBAAiB,GAAU;GAC3B,MAAM,eAAe,gBACjB,GAAG,cAAc,KAAK,YAAY,GAAG,WACnC,OACA,cAAc,OAChB,cAAc;GAElB,MAAM,YAAY,eAAe,aAAa,QAAQ;GAEtD,cAAc,UAAU,SAAS,WAAkB,YAAY;GAC/D,CAAC,cAAc,mBAAmB,aAAa,OAAO,cAAc,SAAS,KAAK,EAAE;GACpF,SAAS,cAAc;EACzB;EACA,GAAI;YAxBN,CA0BE,iBAAA,GAAA,kBAAA,KAACA,iBAAAA,SAAS,QAAV;GACE,YAAY,aAAa,UAAU;GACrB;GACd,uBAAA;aAEA,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;IACE,IAAI;IACJ,uBACE,iBAAA,GAAA,kBAAA,KAACD,iBAAAA,SAAS,SAAV;KACQ;KACC;KACG;KACV,OAAO;IACR,CAAA;IAEH,gBAAgB;IAChB,aAAa;IACb,oBAAoB;IACN;IACd,2BAA2B,6BAA6B;IACxD,GAAI;IACE;IACN,kBAAiB;IACP;IACV,UAAU,YAAY,CAAC;IACvB,OAAO;IACP,WAAW,UAAU;KACnB,mBAAmB,MAAM,cAAc,KAAK;KAC5C,SAAS,aAAa;KACtB,6BAA6B,SAAS,kBAAkB;IAC1D;IACA,UAAU,UAAU;KAClB,eAAiB,cAAc,SAAS,aAAa;KACrD,UAAU,KAAK;IACjB;IACA,SAAS,UAAU;KACjB,IAAI,kBACF,SAAS,oBAAoB;KAG/B,cAAgB,SAAS,cAAc;KACvC,MAAM,eACJ,UAAU,SACT,GAAG,YAAY,gBACZ,cAAc,GAAG,YACjB,wBAAwB,QAAQ,GAAG;KACzC,mBAAmB,eAAe,aAAa,SAAS,KAAK,EAAE;KAC/D,SAAS,KAAK;IAChB;IACA,UAAU,UAAU;KAClB,aAAa,SAAS,aAAa,IAAI,SAAS,eAAe;KAC/D,UAAU,KAAK;IACjB;IACA,YAAY;IACZ,QAAQ;IACE;IACV,SAAS,CAAC;IACH;IACK;GACb,CAAA;EACc,CAAA,GACjB,iBAAA,GAAA,kBAAA,KAACE,wBAAAA,iBAAD;GACE,MAAM;GACN,QAAQ,YAAY;GACZ;GACA;GACD;GACP,iBAAiB,CAAC;GACF;GACG;GACnB,eAAe,CAAC,CAAC,cAAc,gBAAgB,UAAU;GACzD,OAAO;GACY;GACJ;GACI;GACE;GACX;GACV,SAAS,OAAO,QAAQ,GAAG,IAAI,UAAU,KAAA;GACzC,cAAY,OAAO,QAAQ,KAAA,IAAY,OAAO;GAChC;GACG;EAClB,CAAA,CACO;KACV,iBAAA,GAAA,kBAAA,KAACF,iBAAAA,SAAS,aAAV;EACE,OAAO;EACD;EACA;EACI;EACV,GAAI;CACL,CAAA,CACD,EAAA,CAAA;AAEN,CAAC;AAED,OAAO,UAAU;CAAE,GAAGC,kBAAAA,UAAU;CAAS,GAAGD,iBAAAA,SAAS;AAAQ;AAC7D,OAAO,cAAc"}

package/esm/components/Drawer/DrawerRoot.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerRoot.mjs","names":["classes"],"sources":["../../../src/components/Drawer/DrawerRoot.tsx"],"sourcesContent":["import {\n  createVarsResolver,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  getSize,\n  MantineRadius,\n  rem,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ModalBase, ModalBaseProps, ModalBaseStylesNames } from '../ModalBase';\nimport { ScrollArea } from '../ScrollArea';\nimport { MantineTransition } from '../Transition';\nimport { DrawerProvider, ScrollAreaComponent } from './Drawer.context';\nimport classes from './Drawer.module.css';\n\ntype DrawerPosition = 'bottom' | 'left' | 'right' | 'top';\n\nfunction getDrawerAlign(position: DrawerPosition | undefined) {\n  switch (position) {\n    case 'top':\n      return 'flex-start';\n    case 'bottom':\n      return 'flex-end';\n    default:\n      return undefined;\n  }\n}\n\nfunction getDrawerFlex(position: DrawerPosition | undefined) {\n  if (position === 'top' || position === 'bottom') {\n    return '0 0 calc(100% - var(--drawer-offset, 0rem) * 2)';\n  }\n\n  return undefined;\n}\n\nexport type DrawerRootStylesNames = ModalBaseStylesNames;\nexport type DrawerRootCssVariables = {\n  root:\n    | '--drawer-size'\n    | '--drawer-flex'\n    | '--drawer-height'\n    | '--drawer-align'\n    | '--drawer-justify'\n    | '--drawer-offset';\n};\n\nexport interface DrawerRootProps extends StylesApiProps<DrawerRootFactory>, ModalBaseProps {\n  /** Scroll area component @default 'div' */\n  scrollAreaComponent?: ScrollAreaComponent;\n\n  /** Side of the screen on which drawer will be opened @default 'left' */\n  position?: DrawerPosition;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 0 */\n  radius?: MantineRadius;\n\n  /** Drawer container offset from the viewport end @default 0 */\n  offset?: number | string;\n}\n\nexport type DrawerRootFactory = Factory<{\n  props: DrawerRootProps;\n  ref: HTMLDivElement;\n  stylesNames: DrawerRootStylesNames;\n  vars: DrawerRootCssVariables;\n  compound: true;\n}>;\n\nconst transitions: Record<DrawerPosition, MantineTransition> = {\n  top: 'slide-down',\n  bottom: 'slide-up',\n  left: 'slide-right',\n  right: 'slide-left',\n};\n\nconst rtlTransitions: Record<DrawerPosition, MantineTransition> = {\n  top: 'slide-down',\n  bottom: 'slide-up',\n  right: 'slide-right',\n  left: 'slide-left',\n};\n\nconst defaultProps = {\n  closeOnClickOutside: true,\n  withinPortal: true,\n  lockScroll: true,\n  trapFocus: true,\n  returnFocus: true,\n  closeOnEscape: true,\n  keepMounted: false,\n  zIndex: getDefaultZIndex('modal'),\n  position: 'left',\n} satisfies Partial<DrawerRootProps>;\n\nconst varsResolver = createVarsResolver<DrawerRootFactory>((_, { position, size, offset }) => ({\n  root: {\n    '--drawer-size': getSize(size, 'drawer-size'),\n    '--drawer-flex': getDrawerFlex(position),\n    '--drawer-height':\n      position === 'left' || position === 'right' ? undefined : 'var(--drawer-size)',\n    '--drawer-align': getDrawerAlign(position),\n    '--drawer-justify': position === 'right' ? 'flex-end' : undefined,\n    '--drawer-offset': rem(offset),\n  },\n}));\n\nexport const DrawerRoot = factory<DrawerRootFactory>((_props) => {\n  const props = useProps('DrawerRoot', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    scrollAreaComponent,\n    position,\n    transitionProps,\n    radius,\n    attributes,\n    ...others\n  } = props;\n\n  const { dir } = useDirection();\n\n  const getStyles = useStyles<DrawerRootFactory>({\n    name: 'Drawer',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const drawerTransition = (dir === 'rtl' ? rtlTransitions : transitions)[position];\n\n  return (\n    <DrawerProvider value={{ scrollAreaComponent, getStyles, radius }}>\n      <ModalBase\n        {...getStyles('root')}\n        transitionProps={{ transition: drawerTransition, ...transitionProps }}\n        data-offset-scrollbars={scrollAreaComponent === ScrollArea.Autosize || undefined}\n        unstyled={unstyled}\n        {...others}\n      />\n    </DrawerProvider>\n  );\n});\n\nDrawerRoot.classes = classes;\nDrawerRoot.varsResolver = varsResolver;\nDrawerRoot.displayName = '@mantine/core/DrawerRoot';\n"],"mappings":";;;;;;;;;;;;;;;AAqBA,SAAS,eAAe,UAAsC;CAC5D,QAAQ,UAAR;EACE,KAAK,OACH,OAAO;EACT,KAAK,UACH,OAAO;EACT,SACE;CACJ;AACF;AAEA,SAAS,cAAc,UAAsC;CAC3D,IAAI,aAAa,SAAS,aAAa,UACrC,OAAO;AAIX;AAmCA,MAAM,cAAyD;CAC7D,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;AACT;AAEA,MAAM,iBAA4D;CAChE,KAAK;CACL,QAAQ;CACR,OAAO;CACP,MAAM;AACR;AAEA,MAAM,eAAe;CACnB,qBAAqB;CACrB,cAAc;CACd,YAAY;CACZ,WAAW;CACX,aAAa;CACb,eAAe;CACf,aAAa;CACb,QAAQ,iBAAiB,OAAO;CAChC,UAAU;AACZ;AAEA,MAAM,eAAe,oBAAuC,GAAG,EAAE,UAAU,MAAM,cAAc,EAC7F,MAAM;CACJ,iBAAiB,QAAQ,MAAM,aAAa;CAC5C,iBAAiB,cAAc,QAAQ;CACvC,mBACE,aAAa,UAAU,aAAa,UAAU,KAAA,IAAY;CAC5D,kBAAkB,eAAe,QAAQ;CACzC,oBAAoB,aAAa,UAAU,aAAa,KAAA;CACxD,mBAAmB,IAAI,MAAM;AAC/B,EACF,EAAE;AAEF,MAAa,aAAa,SAA4B,WAAW;CAC/D,MAAM,QAAQ,SAAS,cAAc,cAAc,MAAM;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,qBACA,UACA,iBACA,QACA,YACA,GAAG,WACD;CAEJ,MAAM,EAAE,QAAQ,aAAa;CAE7B,MAAM,YAAY,UAA6B;EAC7C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,oBAAoB,QAAQ,QAAQ,iBAAiB,aAAa;CAExE,OACE,oBAAC,gBAAD;EAAgB,OAAO;GAAE;GAAqB;GAAW;EAAO;YAC9D,oBAAC,WAAD;GACE,GAAI,UAAU,MAAM;GACpB,iBAAiB;IAAE,YAAY;IAAkB,GAAG;GAAgB;GACpE,0BAAwB,wBAAwB,WAAW,YAAY,KAAA;GAC7D;GACV,GAAI;EACL,CAAA;CACa,CAAA;AAEpB,CAAC;AAED,WAAW,UAAUA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}
+{"version":3,"file":"DrawerRoot.mjs","names":["classes"],"sources":["../../../src/components/Drawer/DrawerRoot.tsx"],"sourcesContent":["import {\n  createVarsResolver,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  getSize,\n  MantineRadius,\n  rem,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ModalBase, ModalBaseProps, ModalBaseStylesNames } from '../ModalBase';\nimport { ScrollArea } from '../ScrollArea';\nimport { MantineTransition } from '../Transition';\nimport { DrawerProvider, ScrollAreaComponent } from './Drawer.context';\nimport classes from './Drawer.module.css';\n\ntype DrawerPosition = 'bottom' | 'left' | 'right' | 'top';\n\nfunction getDrawerAlign(position: DrawerPosition | undefined) {\n  switch (position) {\n    case 'top':\n      return 'flex-start';\n    case 'bottom':\n      return 'flex-end';\n    default:\n      return undefined;\n  }\n}\n\nfunction getDrawerFlex(position: DrawerPosition | undefined) {\n  if (position === 'top' || position === 'bottom') {\n    return '0 0 calc(100% - var(--drawer-offset, 0rem) * 2)';\n  }\n\n  return undefined;\n}\n\nexport type DrawerRootStylesNames = ModalBaseStylesNames;\nexport type DrawerRootCssVariables = {\n  root:\n    | '--drawer-size'\n    | '--drawer-flex'\n    | '--drawer-height'\n    | '--drawer-align'\n    | '--drawer-justify'\n    | '--drawer-offset';\n};\n\nexport interface DrawerRootProps extends StylesApiProps<DrawerRootFactory>, ModalBaseProps {\n  /** Scroll area component @default 'div' */\n  scrollAreaComponent?: ScrollAreaComponent;\n\n  /** Side of the screen on which drawer will be opened @default 'left' */\n  position?: DrawerPosition;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 0 */\n  radius?: MantineRadius;\n\n  /** Drawer container offset from the viewport end @default 0 */\n  offset?: number | string;\n}\n\nexport type DrawerRootFactory = Factory<{\n  props: DrawerRootProps;\n  ref: HTMLDivElement;\n  stylesNames: DrawerRootStylesNames;\n  vars: DrawerRootCssVariables;\n}>;\n\nconst transitions: Record<DrawerPosition, MantineTransition> = {\n  top: 'slide-down',\n  bottom: 'slide-up',\n  left: 'slide-right',\n  right: 'slide-left',\n};\n\nconst rtlTransitions: Record<DrawerPosition, MantineTransition> = {\n  top: 'slide-down',\n  bottom: 'slide-up',\n  right: 'slide-right',\n  left: 'slide-left',\n};\n\nconst defaultProps = {\n  closeOnClickOutside: true,\n  withinPortal: true,\n  lockScroll: true,\n  trapFocus: true,\n  returnFocus: true,\n  closeOnEscape: true,\n  keepMounted: false,\n  zIndex: getDefaultZIndex('modal'),\n  position: 'left',\n} satisfies Partial<DrawerRootProps>;\n\nconst varsResolver = createVarsResolver<DrawerRootFactory>((_, { position, size, offset }) => ({\n  root: {\n    '--drawer-size': getSize(size, 'drawer-size'),\n    '--drawer-flex': getDrawerFlex(position),\n    '--drawer-height':\n      position === 'left' || position === 'right' ? undefined : 'var(--drawer-size)',\n    '--drawer-align': getDrawerAlign(position),\n    '--drawer-justify': position === 'right' ? 'flex-end' : undefined,\n    '--drawer-offset': rem(offset),\n  },\n}));\n\nexport const DrawerRoot = factory<DrawerRootFactory>((_props) => {\n  const props = useProps('DrawerRoot', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    scrollAreaComponent,\n    position,\n    transitionProps,\n    radius,\n    attributes,\n    ...others\n  } = props;\n\n  const { dir } = useDirection();\n\n  const getStyles = useStyles<DrawerRootFactory>({\n    name: 'Drawer',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const drawerTransition = (dir === 'rtl' ? rtlTransitions : transitions)[position];\n\n  return (\n    <DrawerProvider value={{ scrollAreaComponent, getStyles, radius }}>\n      <ModalBase\n        {...getStyles('root')}\n        transitionProps={{ transition: drawerTransition, ...transitionProps }}\n        data-offset-scrollbars={scrollAreaComponent === ScrollArea.Autosize || undefined}\n        unstyled={unstyled}\n        {...others}\n      />\n    </DrawerProvider>\n  );\n});\n\nDrawerRoot.classes = classes;\nDrawerRoot.varsResolver = varsResolver;\nDrawerRoot.displayName = '@mantine/core/DrawerRoot';\n"],"mappings":";;;;;;;;;;;;;;;AAqBA,SAAS,eAAe,UAAsC;CAC5D,QAAQ,UAAR;EACE,KAAK,OACH,OAAO;EACT,KAAK,UACH,OAAO;EACT,SACE;CACJ;AACF;AAEA,SAAS,cAAc,UAAsC;CAC3D,IAAI,aAAa,SAAS,aAAa,UACrC,OAAO;AAIX;AAkCA,MAAM,cAAyD;CAC7D,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;AACT;AAEA,MAAM,iBAA4D;CAChE,KAAK;CACL,QAAQ;CACR,OAAO;CACP,MAAM;AACR;AAEA,MAAM,eAAe;CACnB,qBAAqB;CACrB,cAAc;CACd,YAAY;CACZ,WAAW;CACX,aAAa;CACb,eAAe;CACf,aAAa;CACb,QAAQ,iBAAiB,OAAO;CAChC,UAAU;AACZ;AAEA,MAAM,eAAe,oBAAuC,GAAG,EAAE,UAAU,MAAM,cAAc,EAC7F,MAAM;CACJ,iBAAiB,QAAQ,MAAM,aAAa;CAC5C,iBAAiB,cAAc,QAAQ;CACvC,mBACE,aAAa,UAAU,aAAa,UAAU,KAAA,IAAY;CAC5D,kBAAkB,eAAe,QAAQ;CACzC,oBAAoB,aAAa,UAAU,aAAa,KAAA;CACxD,mBAAmB,IAAI,MAAM;AAC/B,EACF,EAAE;AAEF,MAAa,aAAa,SAA4B,WAAW;CAC/D,MAAM,QAAQ,SAAS,cAAc,cAAc,MAAM;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,qBACA,UACA,iBACA,QACA,YACA,GAAG,WACD;CAEJ,MAAM,EAAE,QAAQ,aAAa;CAE7B,MAAM,YAAY,UAA6B;EAC7C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,oBAAoB,QAAQ,QAAQ,iBAAiB,aAAa;CAExE,OACE,oBAAC,gBAAD;EAAgB,OAAO;GAAE;GAAqB;GAAW;EAAO;YAC9D,oBAAC,WAAD;GACE,GAAI,UAAU,MAAM;GACpB,iBAAiB;IAAE,YAAY;IAAkB,GAAG;GAAgB;GACpE,0BAAwB,wBAAwB,WAAW,YAAY,KAAA;GAC7D;GACV,GAAI;EACL,CAAA;CACa,CAAA;AAEpB,CAAC;AAED,WAAW,UAAUA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}

package/esm/components/Input/Input.mjs

@@ -45,7 +45,7 @@ const varsResolver = createVarsResolver((_, props, ctx) => ({ wrapper: {
 } }));
 const Input = polymorphicFactory((_props) => {
 	const props = useProps("Input", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, required, __staticSelector, __stylesApiProps, size, wrapperProps, error, disabled, leftSection, leftSectionProps, leftSectionWidth, rightSection, rightSectionProps, rightSectionWidth, rightSectionPointerEvents, leftSectionPointerEvents, variant, vars, pointer, multiline, radius, id, withAria, withErrorStyles, mod, inputSize, attributes, __clearSection, __clearable, __clearSectionMode, __defaultRightSection, loading, loadingPosition, rootRef, ...others } = props;
+	const { classNames, className, style, styles, unstyled, required, __staticSelector, __stylesApiProps, size, wrapperProps, error, disabled, leftSection, leftSectionProps, leftSectionWidth, rightSection, rightSectionProps, rightSectionWidth, rightSectionPointerEvents, leftSectionPointerEvents, variant, vars, pointer, multiline, radius, id, withAria, withErrorStyles, mod, inputSize, attributes, __clearSection, __clearable, __clearSectionMode, __defaultRightSection, loading, loadingPosition, rootRef, dir, ...others } = props;
 	const { styleProps, rest } = extractStyleProps(others);
 	const ctx = use(InputWrapperContext);
 	const stylesCtx = {
@@ -88,6 +88,7 @@ const Input = polymorphicFactory((_props) => {
 		value: { size: size || "sm" },
 		children: /* @__PURE__ */ jsxs(Box, {
 			ref: rootRef,
+			dir,
 			...getStyles("wrapper"),
 			...styleProps,
 			...wrapperProps,

package/esm/components/Input/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","names":["classes"],"sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  extractStyleProps,\n  getFontSize,\n  getRadius,\n  getSize,\n  MantineRadius,\n  MantineSize,\n  polymorphicFactory,\n  PolymorphicFactory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Loader } from '../Loader/Loader';\nimport { InputContext } from './Input.context';\nimport {\n  InputClearButton,\n  type InputClearButtonProps,\n  type InputClearButtonFactory,\n} from './InputClearButton/InputClearButton';\nimport {\n  ClearSectionMode,\n  InputClearSection,\n  type InputClearSectionProps,\n} from './InputClearSection/InputClearSection';\nimport {\n  InputDescription,\n  type InputDescriptionProps,\n  type InputDescriptionStylesNames,\n  type InputDescriptionCssVariables,\n  type InputDescriptionFactory,\n} from './InputDescription/InputDescription';\nimport {\n  InputError,\n  type InputErrorProps,\n  type InputErrorStylesNames,\n  type InputErrorCssVariables,\n  type InputErrorFactory,\n} from './InputError/InputError';\nimport {\n  InputLabel,\n  type InputLabelProps,\n  type InputLabelStylesNames,\n  type InputLabelCssVariables,\n  type InputLabelFactory,\n} from './InputLabel/InputLabel';\nimport {\n  InputPlaceholder,\n  type InputPlaceholderProps,\n  type InputPlaceholderStylesNames,\n  type InputPlaceholderFactory,\n} from './InputPlaceholder/InputPlaceholder';\nimport { InputWrapperContext } from './InputWrapper.context';\nimport {\n  __InputWrapperProps,\n  InputWrapper,\n  InputWrapperStylesNames,\n  type InputWrapperProps,\n  type InputWrapperFactory,\n} from './InputWrapper/InputWrapper';\nimport classes from './Input.module.css';\n// Required to be a separate type for docgen script\ntype WrapperProps = React.ComponentProps<'div'> & DataAttributes;\n\nexport interface __BaseInputProps extends __InputWrapperProps, __InputProps {\n  /** Props passed down to the root element */\n  wrapperProps?: WrapperProps;\n}\n\nexport type __InputStylesNames = InputStylesNames | InputWrapperStylesNames;\n\nexport type InputStylesNames = 'input' | 'wrapper' | 'section';\nexport type InputVariant = 'default' | 'filled' | 'unstyled';\nexport type InputCssVariables = {\n  wrapper:\n    | '--input-height'\n    | '--input-fz'\n    | '--input-radius'\n    | '--input-left-section-width'\n    | '--input-right-section-width'\n    | '--input-left-section-pointer-events'\n    | '--input-right-section-pointer-events'\n    | '--input-padding-y'\n    | '--input-margin-top'\n    | '--input-margin-bottom';\n};\n\nexport interface InputStylesCtx {\n  offsetTop: boolean | undefined;\n  offsetBottom: boolean | undefined;\n}\n\nexport interface __InputProps {\n  /** Content section displayed on the left side of the input */\n  leftSection?: React.ReactNode;\n\n  /** Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height */\n  leftSectionWidth?: React.CSSProperties['width'];\n\n  /** Props passed down to the `leftSection` element */\n  leftSectionProps?: React.ComponentProps<'div'>;\n\n  /** Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). @default 'none' */\n  leftSectionPointerEvents?: React.CSSProperties['pointerEvents'];\n\n  /** Content section displayed on the right side of the input */\n  rightSection?: React.ReactNode;\n\n  /** Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height */\n  rightSectionWidth?: React.CSSProperties['width'];\n\n  /** Props passed down to the `rightSection` element */\n  rightSectionProps?: React.ComponentProps<'div'>;\n\n  /** Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). @default 'none' */\n  rightSectionPointerEvents?: React.CSSProperties['pointerEvents'];\n\n  /** Sets `required` attribute on the `input` element */\n  required?: boolean;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Sets `disabled` attribute on the `input` element */\n  disabled?: boolean;\n\n  /** Controls input `height`, horizontal `padding`, and `font-size` @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). @default false */\n  pointer?: boolean;\n\n  /** Determines whether the input should have red border and red text color when the `error` prop is set @default true */\n  withErrorStyles?: boolean;\n\n  /** HTML `size` attribute for the input element (number of visible characters) */\n  inputSize?: string;\n\n  /** Section to be displayed when the input is `__clearable` and `rightSection` is not defined */\n  __clearSection?: React.ReactNode;\n\n  /** Determines whether the `__clearSection` should be displayed if it is passed to the component, has no effect if `rightSection` is defined */\n  __clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  __clearSectionMode?: ClearSectionMode;\n\n  /** Right section displayed when both `__clearSection` and `rightSection` are not defined */\n  __defaultRightSection?: React.ReactNode;\n\n  /** Displays loading indicator in the left or right section @default false */\n  loading?: boolean;\n\n  /** Position of the loading indicator @default 'right' */\n  loadingPosition?: 'left' | 'right';\n}\n\nexport interface InputProps extends BoxProps, __InputProps, StylesApiProps<InputFactory> {\n  __staticSelector?: string;\n\n  /** Props passed to Styles API context, replaces `Input.Wrapper` props */\n  __stylesApiProps?: Record<string, any>;\n\n  /** Determines whether the input should have error styles and `aria-invalid` attribute */\n  error?: React.ReactNode;\n\n  /** Adjusts padding and sizing calculations for multiline inputs (use with `component=\"textarea\"`). Does not make the input multiline by itself. @default false */\n  multiline?: boolean;\n\n  /** Input element id */\n  id?: string;\n\n  /** Determines whether `aria-` and other accessibility attributes should be added to the input. Only disable when implementing custom accessibility handling. @default true */\n  withAria?: boolean;\n\n  /** Props passed down to the root element of the `Input` component */\n  wrapperProps?: WrapperProps;\n\n  /** Root element ref */\n  rootRef?: React.Ref<HTMLDivElement>;\n}\n\nexport type InputFactory = PolymorphicFactory<{\n  props: InputProps;\n  defaultRef: HTMLInputElement;\n  defaultComponent: 'input';\n  stylesNames: InputStylesNames;\n  variant: InputVariant;\n  vars: InputCssVariables;\n  ctx: InputStylesCtx;\n  staticComponents: {\n    Label: typeof InputLabel;\n    Error: typeof InputError;\n    Description: typeof InputDescription;\n    Placeholder: typeof InputPlaceholder;\n    Wrapper: typeof InputWrapper;\n    ClearButton: typeof InputClearButton;\n  };\n}>;\n\nconst defaultProps = {\n  variant: 'default',\n  leftSectionPointerEvents: 'none',\n  rightSectionPointerEvents: 'none',\n  withAria: true,\n  withErrorStyles: true,\n  size: 'sm',\n  loading: false,\n  loadingPosition: 'right',\n} satisfies Partial<InputProps>;\n\nconst varsResolver = createVarsResolver<InputFactory>((_, props, ctx) => ({\n  wrapper: {\n    '--input-margin-top': ctx.offsetTop ? 'calc(var(--mantine-spacing-xs) / 2)' : undefined,\n    '--input-margin-bottom': ctx.offsetBottom ? 'calc(var(--mantine-spacing-xs) / 2)' : undefined,\n    '--input-height': getSize(props.size, 'input-height'),\n    '--input-fz': getFontSize(props.size),\n    '--input-radius': props.radius === undefined ? undefined : getRadius(props.radius),\n    '--input-left-section-width':\n      props.leftSectionWidth !== undefined ? rem(props.leftSectionWidth) : undefined,\n    '--input-right-section-width':\n      props.rightSectionWidth !== undefined ? rem(props.rightSectionWidth) : undefined,\n    '--input-padding-y': props.multiline ? getSize(props.size, 'input-padding-y') : undefined,\n    '--input-left-section-pointer-events': props.leftSectionPointerEvents,\n    '--input-right-section-pointer-events': props.rightSectionPointerEvents,\n  },\n}));\n\nexport const Input = polymorphicFactory<InputFactory>((_props) => {\n  const props = useProps('Input', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    required,\n    __staticSelector,\n    __stylesApiProps,\n    size,\n    wrapperProps,\n    error,\n    disabled,\n    leftSection,\n    leftSectionProps,\n    leftSectionWidth,\n    rightSection,\n    rightSectionProps,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    leftSectionPointerEvents,\n    variant,\n    vars,\n    pointer,\n    multiline,\n    radius,\n    id,\n    withAria,\n    withErrorStyles,\n    mod,\n    inputSize,\n    attributes,\n    __clearSection,\n    __clearable,\n    __clearSectionMode,\n    __defaultRightSection,\n    loading,\n    loadingPosition,\n    rootRef,\n    ...others\n  } = props;\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const ctx = use(InputWrapperContext);\n  const stylesCtx: InputStylesCtx = { offsetBottom: ctx?.offsetBottom, offsetTop: ctx?.offsetTop };\n\n  const getStyles = useStyles<InputFactory>({\n    name: ['Input', __staticSelector],\n    props: __stylesApiProps || props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    stylesCtx,\n    rootSelector: 'wrapper',\n    vars,\n    varsResolver,\n  });\n\n  const ariaAttributes = withAria\n    ? {\n        required,\n        disabled,\n        'aria-invalid': error ? true : undefined,\n        'aria-describedby': ctx?.describedBy,\n        id: ctx?.inputId || id,\n      }\n    : {};\n\n  const loadingIndicator = loading ? (\n    <Loader\n      size={\n        loadingPosition === 'left'\n          ? 'calc(var(--input-left-section-size) / 2)'\n          : 'calc(var(--input-right-section-size) / 2)'\n      }\n    />\n  ) : null;\n\n  const _leftSection = loading && loadingPosition === 'left' ? loadingIndicator : leftSection;\n  const _rightSection: React.ReactNode = InputClearSection({\n    __clearable,\n    __clearSection,\n    rightSection: loading && loadingPosition === 'right' ? loadingIndicator : rightSection,\n    __defaultRightSection,\n    size,\n    __clearSectionMode,\n  });\n\n  return (\n    <InputContext value={{ size: size || 'sm' }}>\n      <Box\n        ref={rootRef}\n        {...getStyles('wrapper')}\n        {...styleProps}\n        {...wrapperProps}\n        mod={[\n          {\n            error: !!error && withErrorStyles,\n            pointer,\n            disabled,\n            multiline,\n            'data-with-right-section': !!_rightSection,\n            'data-with-left-section': !!_leftSection,\n          },\n          mod,\n        ]}\n        variant={variant}\n        size={size}\n      >\n        {_leftSection && (\n          <div\n            {...leftSectionProps}\n            data-position=\"left\"\n            {...getStyles('section', {\n              className: leftSectionProps?.className,\n              style: leftSectionProps?.style,\n            })}\n          >\n            {_leftSection}\n          </div>\n        )}\n\n        <Box\n          component=\"input\"\n          {...rest}\n          {...ariaAttributes}\n          required={required}\n          mod={{ disabled, error: !!error && withErrorStyles }}\n          variant={variant}\n          __size={inputSize}\n          {...getStyles('input')}\n        />\n\n        {_rightSection && (\n          <div\n            {...rightSectionProps}\n            data-position=\"right\"\n            {...getStyles('section', {\n              className: rightSectionProps?.className,\n              style: rightSectionProps?.style,\n            })}\n          >\n            {_rightSection}\n          </div>\n        )}\n      </Box>\n    </InputContext>\n  );\n});\n\nInput.classes = classes;\nInput.varsResolver = varsResolver;\nInput.Wrapper = InputWrapper;\nInput.Label = InputLabel;\nInput.Error = InputError;\nInput.Description = InputDescription;\nInput.Placeholder = InputPlaceholder;\nInput.ClearButton = InputClearButton;\nInput.displayName = '@mantine/core/Input';\n\nexport namespace Input {\n  export type Props = InputProps;\n  export type StylesNames = InputStylesNames;\n  export type CssVariables = InputCssVariables;\n  export type Factory = InputFactory;\n\n  export namespace Wrapper {\n    export type Props = InputWrapperProps;\n    export type StylesNames = InputWrapperStylesNames;\n    export type Factory = InputWrapperFactory;\n  }\n\n  export namespace Description {\n    export type Props = InputDescriptionProps;\n    export type StylesNames = InputDescriptionStylesNames;\n    export type CssVariables = InputDescriptionCssVariables;\n    export type Factory = InputDescriptionFactory;\n  }\n\n  export namespace Error {\n    export type Props = InputErrorProps;\n    export type StylesNames = InputErrorStylesNames;\n    export type CssVariables = InputErrorCssVariables;\n    export type Factory = InputErrorFactory;\n  }\n\n  export namespace Label {\n    export type Props = InputLabelProps;\n    export type StylesNames = InputLabelStylesNames;\n    export type CssVariables = InputLabelCssVariables;\n    export type Factory = InputLabelFactory;\n  }\n\n  export namespace Placeholder {\n    export type Props = InputPlaceholderProps;\n    export type StylesNames = InputPlaceholderStylesNames;\n    export type Factory = InputPlaceholderFactory;\n  }\n\n  export namespace ClearButton {\n    export type Props = InputClearButtonProps;\n    export type Factory = InputClearButtonFactory;\n  }\n\n  export namespace ClearSection {\n    export type Props = InputClearSectionProps;\n    export type Mode = ClearSectionMode;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Input.mjs","names":["classes"],"sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  extractStyleProps,\n  getFontSize,\n  getRadius,\n  getSize,\n  MantineRadius,\n  MantineSize,\n  polymorphicFactory,\n  PolymorphicFactory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Loader } from '../Loader/Loader';\nimport { InputContext } from './Input.context';\nimport {\n  InputClearButton,\n  type InputClearButtonProps,\n  type InputClearButtonFactory,\n} from './InputClearButton/InputClearButton';\nimport {\n  ClearSectionMode,\n  InputClearSection,\n  type InputClearSectionProps,\n} from './InputClearSection/InputClearSection';\nimport {\n  InputDescription,\n  type InputDescriptionProps,\n  type InputDescriptionStylesNames,\n  type InputDescriptionCssVariables,\n  type InputDescriptionFactory,\n} from './InputDescription/InputDescription';\nimport {\n  InputError,\n  type InputErrorProps,\n  type InputErrorStylesNames,\n  type InputErrorCssVariables,\n  type InputErrorFactory,\n} from './InputError/InputError';\nimport {\n  InputLabel,\n  type InputLabelProps,\n  type InputLabelStylesNames,\n  type InputLabelCssVariables,\n  type InputLabelFactory,\n} from './InputLabel/InputLabel';\nimport {\n  InputPlaceholder,\n  type InputPlaceholderProps,\n  type InputPlaceholderStylesNames,\n  type InputPlaceholderFactory,\n} from './InputPlaceholder/InputPlaceholder';\nimport { InputWrapperContext } from './InputWrapper.context';\nimport {\n  __InputWrapperProps,\n  InputWrapper,\n  InputWrapperStylesNames,\n  type InputWrapperProps,\n  type InputWrapperFactory,\n} from './InputWrapper/InputWrapper';\nimport classes from './Input.module.css';\n// Required to be a separate type for docgen script\ntype WrapperProps = React.ComponentProps<'div'> & DataAttributes;\n\nexport interface __BaseInputProps extends __InputWrapperProps, __InputProps {\n  /** Props passed down to the root element */\n  wrapperProps?: WrapperProps;\n}\n\nexport type __InputStylesNames = InputStylesNames | InputWrapperStylesNames;\n\nexport type InputStylesNames = 'input' | 'wrapper' | 'section';\nexport type InputVariant = 'default' | 'filled' | 'unstyled';\nexport type InputCssVariables = {\n  wrapper:\n    | '--input-height'\n    | '--input-fz'\n    | '--input-radius'\n    | '--input-left-section-width'\n    | '--input-right-section-width'\n    | '--input-left-section-pointer-events'\n    | '--input-right-section-pointer-events'\n    | '--input-padding-y'\n    | '--input-margin-top'\n    | '--input-margin-bottom';\n};\n\nexport interface InputStylesCtx {\n  offsetTop: boolean | undefined;\n  offsetBottom: boolean | undefined;\n}\n\nexport interface __InputProps {\n  /** Content section displayed on the left side of the input */\n  leftSection?: React.ReactNode;\n\n  /** Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height */\n  leftSectionWidth?: React.CSSProperties['width'];\n\n  /** Props passed down to the `leftSection` element */\n  leftSectionProps?: React.ComponentProps<'div'>;\n\n  /** Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). @default 'none' */\n  leftSectionPointerEvents?: React.CSSProperties['pointerEvents'];\n\n  /** Content section displayed on the right side of the input */\n  rightSection?: React.ReactNode;\n\n  /** Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height */\n  rightSectionWidth?: React.CSSProperties['width'];\n\n  /** Props passed down to the `rightSection` element */\n  rightSectionProps?: React.ComponentProps<'div'>;\n\n  /** Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). @default 'none' */\n  rightSectionPointerEvents?: React.CSSProperties['pointerEvents'];\n\n  /** Sets `required` attribute on the `input` element */\n  required?: boolean;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Sets `disabled` attribute on the `input` element */\n  disabled?: boolean;\n\n  /** Controls input `height`, horizontal `padding`, and `font-size` @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). @default false */\n  pointer?: boolean;\n\n  /** Determines whether the input should have red border and red text color when the `error` prop is set @default true */\n  withErrorStyles?: boolean;\n\n  /** HTML `size` attribute for the input element (number of visible characters) */\n  inputSize?: string;\n\n  /** Section to be displayed when the input is `__clearable` and `rightSection` is not defined */\n  __clearSection?: React.ReactNode;\n\n  /** Determines whether the `__clearSection` should be displayed if it is passed to the component, has no effect if `rightSection` is defined */\n  __clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  __clearSectionMode?: ClearSectionMode;\n\n  /** Right section displayed when both `__clearSection` and `rightSection` are not defined */\n  __defaultRightSection?: React.ReactNode;\n\n  /** Displays loading indicator in the left or right section @default false */\n  loading?: boolean;\n\n  /** Position of the loading indicator @default 'right' */\n  loadingPosition?: 'left' | 'right';\n}\n\nexport interface InputProps extends BoxProps, __InputProps, StylesApiProps<InputFactory> {\n  __staticSelector?: string;\n\n  /** Props passed to Styles API context, replaces `Input.Wrapper` props */\n  __stylesApiProps?: Record<string, any>;\n\n  /** Determines whether the input should have error styles and `aria-invalid` attribute */\n  error?: React.ReactNode;\n\n  /** Adjusts padding and sizing calculations for multiline inputs (use with `component=\"textarea\"`). Does not make the input multiline by itself. @default false */\n  multiline?: boolean;\n\n  /** Input element id */\n  id?: string;\n\n  /** Determines whether `aria-` and other accessibility attributes should be added to the input. Only disable when implementing custom accessibility handling. @default true */\n  withAria?: boolean;\n\n  /** Props passed down to the root element of the `Input` component */\n  wrapperProps?: WrapperProps;\n\n  /** Root element ref */\n  rootRef?: React.Ref<HTMLDivElement>;\n}\n\nexport type InputFactory = PolymorphicFactory<{\n  props: InputProps;\n  defaultRef: HTMLInputElement;\n  defaultComponent: 'input';\n  stylesNames: InputStylesNames;\n  variant: InputVariant;\n  vars: InputCssVariables;\n  ctx: InputStylesCtx;\n  staticComponents: {\n    Label: typeof InputLabel;\n    Error: typeof InputError;\n    Description: typeof InputDescription;\n    Placeholder: typeof InputPlaceholder;\n    Wrapper: typeof InputWrapper;\n    ClearButton: typeof InputClearButton;\n  };\n}>;\n\nconst defaultProps = {\n  variant: 'default',\n  leftSectionPointerEvents: 'none',\n  rightSectionPointerEvents: 'none',\n  withAria: true,\n  withErrorStyles: true,\n  size: 'sm',\n  loading: false,\n  loadingPosition: 'right',\n} satisfies Partial<InputProps>;\n\nconst varsResolver = createVarsResolver<InputFactory>((_, props, ctx) => ({\n  wrapper: {\n    '--input-margin-top': ctx.offsetTop ? 'calc(var(--mantine-spacing-xs) / 2)' : undefined,\n    '--input-margin-bottom': ctx.offsetBottom ? 'calc(var(--mantine-spacing-xs) / 2)' : undefined,\n    '--input-height': getSize(props.size, 'input-height'),\n    '--input-fz': getFontSize(props.size),\n    '--input-radius': props.radius === undefined ? undefined : getRadius(props.radius),\n    '--input-left-section-width':\n      props.leftSectionWidth !== undefined ? rem(props.leftSectionWidth) : undefined,\n    '--input-right-section-width':\n      props.rightSectionWidth !== undefined ? rem(props.rightSectionWidth) : undefined,\n    '--input-padding-y': props.multiline ? getSize(props.size, 'input-padding-y') : undefined,\n    '--input-left-section-pointer-events': props.leftSectionPointerEvents,\n    '--input-right-section-pointer-events': props.rightSectionPointerEvents,\n  },\n}));\n\nexport const Input = polymorphicFactory<InputFactory>((_props) => {\n  const props = useProps('Input', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    required,\n    __staticSelector,\n    __stylesApiProps,\n    size,\n    wrapperProps,\n    error,\n    disabled,\n    leftSection,\n    leftSectionProps,\n    leftSectionWidth,\n    rightSection,\n    rightSectionProps,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    leftSectionPointerEvents,\n    variant,\n    vars,\n    pointer,\n    multiline,\n    radius,\n    id,\n    withAria,\n    withErrorStyles,\n    mod,\n    inputSize,\n    attributes,\n    __clearSection,\n    __clearable,\n    __clearSectionMode,\n    __defaultRightSection,\n    loading,\n    loadingPosition,\n    rootRef,\n    dir,\n    ...others\n  } = props as typeof props & Pick<React.HTMLAttributes<HTMLDivElement>, 'dir'>;\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const ctx = use(InputWrapperContext);\n  const stylesCtx: InputStylesCtx = { offsetBottom: ctx?.offsetBottom, offsetTop: ctx?.offsetTop };\n\n  const getStyles = useStyles<InputFactory>({\n    name: ['Input', __staticSelector],\n    props: __stylesApiProps || props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    stylesCtx,\n    rootSelector: 'wrapper',\n    vars,\n    varsResolver,\n  });\n\n  const ariaAttributes = withAria\n    ? {\n        required,\n        disabled,\n        'aria-invalid': error ? true : undefined,\n        'aria-describedby': ctx?.describedBy,\n        id: ctx?.inputId || id,\n      }\n    : {};\n\n  const loadingIndicator = loading ? (\n    <Loader\n      size={\n        loadingPosition === 'left'\n          ? 'calc(var(--input-left-section-size) / 2)'\n          : 'calc(var(--input-right-section-size) / 2)'\n      }\n    />\n  ) : null;\n\n  const _leftSection = loading && loadingPosition === 'left' ? loadingIndicator : leftSection;\n  const _rightSection: React.ReactNode = InputClearSection({\n    __clearable,\n    __clearSection,\n    rightSection: loading && loadingPosition === 'right' ? loadingIndicator : rightSection,\n    __defaultRightSection,\n    size,\n    __clearSectionMode,\n  });\n\n  return (\n    <InputContext value={{ size: size || 'sm' }}>\n      <Box\n        ref={rootRef}\n        dir={dir}\n        {...getStyles('wrapper')}\n        {...styleProps}\n        {...wrapperProps}\n        mod={[\n          {\n            error: !!error && withErrorStyles,\n            pointer,\n            disabled,\n            multiline,\n            'data-with-right-section': !!_rightSection,\n            'data-with-left-section': !!_leftSection,\n          },\n          mod,\n        ]}\n        variant={variant}\n        size={size}\n      >\n        {_leftSection && (\n          <div\n            {...leftSectionProps}\n            data-position=\"left\"\n            {...getStyles('section', {\n              className: leftSectionProps?.className,\n              style: leftSectionProps?.style,\n            })}\n          >\n            {_leftSection}\n          </div>\n        )}\n\n        <Box\n          component=\"input\"\n          {...rest}\n          {...ariaAttributes}\n          required={required}\n          mod={{ disabled, error: !!error && withErrorStyles }}\n          variant={variant}\n          __size={inputSize}\n          {...getStyles('input')}\n        />\n\n        {_rightSection && (\n          <div\n            {...rightSectionProps}\n            data-position=\"right\"\n            {...getStyles('section', {\n              className: rightSectionProps?.className,\n              style: rightSectionProps?.style,\n            })}\n          >\n            {_rightSection}\n          </div>\n        )}\n      </Box>\n    </InputContext>\n  );\n});\n\nInput.classes = classes;\nInput.varsResolver = varsResolver;\nInput.Wrapper = InputWrapper;\nInput.Label = InputLabel;\nInput.Error = InputError;\nInput.Description = InputDescription;\nInput.Placeholder = InputPlaceholder;\nInput.ClearButton = InputClearButton;\nInput.displayName = '@mantine/core/Input';\n\nexport namespace Input {\n  export type Props = InputProps;\n  export type StylesNames = InputStylesNames;\n  export type CssVariables = InputCssVariables;\n  export type Factory = InputFactory;\n\n  export namespace Wrapper {\n    export type Props = InputWrapperProps;\n    export type StylesNames = InputWrapperStylesNames;\n    export type Factory = InputWrapperFactory;\n  }\n\n  export namespace Description {\n    export type Props = InputDescriptionProps;\n    export type StylesNames = InputDescriptionStylesNames;\n    export type CssVariables = InputDescriptionCssVariables;\n    export type Factory = InputDescriptionFactory;\n  }\n\n  export namespace Error {\n    export type Props = InputErrorProps;\n    export type StylesNames = InputErrorStylesNames;\n    export type CssVariables = InputErrorCssVariables;\n    export type Factory = InputErrorFactory;\n  }\n\n  export namespace Label {\n    export type Props = InputLabelProps;\n    export type StylesNames = InputLabelStylesNames;\n    export type CssVariables = InputLabelCssVariables;\n    export type Factory = InputLabelFactory;\n  }\n\n  export namespace Placeholder {\n    export type Props = InputPlaceholderProps;\n    export type StylesNames = InputPlaceholderStylesNames;\n    export type Factory = InputPlaceholderFactory;\n  }\n\n  export namespace ClearButton {\n    export type Props = InputClearButtonProps;\n    export type Factory = InputClearButtonFactory;\n  }\n\n  export namespace ClearSection {\n    export type Props = InputClearSectionProps;\n    export type Mode = ClearSectionMode;\n  }\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Input.module.mjs","names":[],"sources":["../../../src/components/Input/Input.module.css"],"sourcesContent":[".wrapper {\n  position: relative;\n  margin-top: var(--input-margin-top, 0rem);\n  margin-bottom: var(--input-margin-bottom, 0rem);\n\n  --input-height-xs: 30px;\n  --input-height-sm: 36px;\n  --input-height-md: 42px;\n  --input-height-lg: 50px;\n  --input-height-xl: 60px;\n\n  --input-padding-y-xs: 5px;\n  --input-padding-y-sm: 6px;\n  --input-padding-y-md: 8px;\n  --input-padding-y-lg: 10px;\n  --input-padding-y-xl: 13px;\n\n  --input-height: var(--input-height-sm);\n  --input-radius: var(--mantine-radius-default);\n\n  --input-cursor: text;\n  --input-text-align: left;\n  --input-line-height: calc(var(--input-height) - rem(2px));\n  --input-padding: calc(var(--input-height) / 3);\n  --input-padding-inline-start: var(--input-padding);\n  --input-padding-inline-end: var(--input-padding);\n  --input-placeholder-color: var(--mantine-color-placeholder);\n  --input-color: var(--mantine-color-text);\n  --input-disabled-bg: var(--mantine-color-disabled);\n  --input-disabled-color: var(--mantine-color-disabled-color);\n\n  --input-left-section-size: var(--input-left-section-width, calc(var(--input-height) - rem(2px)));\n\n  --input-right-section-size: var(\n    --input-right-section-width,\n    calc(var(--input-height) - rem(2px))\n  );\n\n  --input-size: var(--input-height);\n\n  --section-y: 1px;\n  --left-section-start: 1px;\n  --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n\n  --right-section-end: 1px;\n  --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n\n  &[data-variant='unstyled'] {\n    --input-padding: 0;\n    --input-padding-y: 0;\n    --input-padding-inline-start: 0;\n    --input-padding-inline-end: 0;\n  }\n\n  &[data-pointer] {\n    --input-cursor: pointer;\n  }\n\n  &[data-multiline] {\n    --input-padding-y-xs: 4.5px;\n    --input-padding-y-sm: 5.5px;\n    --input-padding-y-md: 7px;\n    --input-padding-y-lg: 9.5px;\n    --input-padding-y-xl: 13px;\n\n    --input-size: auto;\n    --input-line-height: var(--mantine-line-height);\n  }\n\n  &[data-with-left-section] {\n    --input-padding-inline-start: var(--input-left-section-size);\n  }\n\n  &[data-with-right-section] {\n    --input-padding-inline-end: var(--input-right-section-size);\n\n    &:has([data-combined-clear-section]) {\n      .wrapper[data-size='xs'] & {\n        --input-padding-inline-end: 41px;\n      }\n\n      .wrapper[data-size='sm'] & {\n        --input-padding-inline-end: 50px;\n      }\n\n      .wrapper[data-size='md'] & {\n        --input-padding-inline-end: 60px;\n      }\n\n      .wrapper[data-size='lg'] & {\n        --input-padding-inline-end: 72px;\n      }\n\n      .wrapper[data-size='xl'] & {\n        --input-padding-inline-end: 89px;\n      }\n    }\n  }\n\n  @mixin light {\n    &[data-variant='default'] {\n      --input-bd: var(--mantine-color-gray-4);\n      --input-bg: var(--mantine-color-white);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='filled'] {\n      --input-bd: transparent;\n      --input-bg: var(--mantine-color-gray-1);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='unstyled'] {\n      --input-bd: transparent;\n      --input-bg: transparent;\n      --input-bd-focus: transparent;\n    }\n  }\n\n  @mixin dark {\n    &[data-variant='default'] {\n      --input-bd: var(--mantine-color-dark-4);\n      --input-bg: var(--mantine-color-dark-6);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='filled'] {\n      --input-bd: transparent;\n      --input-bg: var(--mantine-color-dark-5);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='unstyled'] {\n      --input-bd: transparent;\n      --input-bg: transparent;\n      --input-bd-focus: transparent;\n    }\n  }\n\n  [data-mantine-color-scheme] &[data-error] {\n    &:not([data-variant='unstyled']) {\n      --input-bd: var(--mantine-color-error);\n    }\n\n    --input-color: var(--mantine-color-error);\n    --input-placeholder-color: var(--mantine-color-error);\n    --input-section-color: var(--mantine-color-error);\n  }\n\n  @mixin where-rtl {\n    --input-text-align: right;\n    --left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n    --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n  }\n}\n\n.input {\n  -webkit-tap-highlight-color: transparent;\n  appearance: none;\n  resize: var(--input-resize, none);\n  display: block;\n  width: 100%;\n  transition: border-color 100ms ease;\n\n  text-align: var(--input-text-align);\n  color: var(--input-color);\n  border: rem(1px) solid var(--input-bd);\n  background-color: var(--input-bg);\n  font-family: var(--input-font-family, var(--mantine-font-family));\n  height: var(--input-size);\n  min-height: var(--input-height);\n  line-height: var(--input-line-height);\n  font-size: var(--_input-fz, var(--input-fz, var(--mantine-font-size-md)));\n  border-radius: var(--input-radius);\n  padding-inline-start: var(--input-padding-inline-start);\n  padding-inline-end: var(--input-padding-inline-end);\n  padding-top: var(--input-padding-y, 0rem);\n  padding-bottom: var(--input-padding-y, 0rem);\n  cursor: var(--input-cursor);\n  overflow: var(--input-overflow);\n\n  /* Used as data attribute in Textarea component, does not have associated prop on the Input component */\n  &[data-no-overflow] {\n    --input-overflow: hidden;\n  }\n\n  /* Used as data attribute in JsonInput component, does not have associated prop on the Input component */\n  &[data-monospace] {\n    --input-font-family: var(--mantine-font-family-monospace);\n    --_input-fz: calc(var(--input-fz) - rem(2px));\n  }\n\n  &:focus,\n  &:focus-within {\n    outline: none;\n    --input-bd: var(--input-bd-focus);\n\n    [data-error] & {\n      --input-bd: var(--mantine-color-error);\n    }\n  }\n\n  &::placeholder {\n    color: var(--input-placeholder-color);\n    opacity: 1;\n  }\n\n  &::-webkit-inner-spin-button,\n  &::-webkit-outer-spin-button,\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    appearance: none;\n  }\n\n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  &:disabled,\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background-color: var(--input-disabled-bg);\n    color: var(--input-disabled-color);\n  }\n\n  /* Required to be a separate selector to work in Firefox, can be merged with &:disabled once :has is supported */\n  &:has(input:disabled) {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background-color: var(--input-disabled-bg);\n    color: var(--input-disabled-color);\n  }\n\n  &[readonly] {\n    caret-color: transparent;\n  }\n}\n\n.section {\n  pointer-events: var(--section-pointer-events);\n  position: absolute;\n  z-index: 1;\n  inset-inline-start: var(--section-start);\n  inset-inline-end: var(--section-end);\n  bottom: var(--section-y);\n  top: var(--section-y);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--section-size);\n  border-radius: var(--section-border-radius);\n  color: var(--input-section-color, var(--mantine-color-dimmed));\n\n  &[data-position='right'] {\n    --section-pointer-events: var(--input-right-section-pointer-events);\n    --section-end: var(--right-section-end);\n    --section-size: var(--input-right-section-size);\n    --section-border-radius: var(--right-section-border-radius);\n\n    &:has([data-combined-clear-section]) {\n      .wrapper[data-size='xs'] & {\n        --section-size: 41px;\n      }\n\n      .wrapper[data-size='sm'] & {\n        --section-size: 50px;\n      }\n\n      .wrapper[data-size='md'] & {\n        --section-size: 60px;\n      }\n\n      .wrapper[data-size='lg'] & {\n        --section-size: 72px;\n      }\n\n      .wrapper[data-size='xl'] & {\n        --section-size: 89px;\n      }\n    }\n  }\n\n  &[data-position='left'] {\n    --section-pointer-events: var(--input-left-section-pointer-events);\n    --section-start: var(--left-section-start);\n    --section-size: var(--input-left-section-size);\n    --section-border-radius: var(--left-section-border-radius);\n  }\n}\n\n/* ----- Input.Placeholder ----- */\n.placeholder {\n  color: var(--input-placeholder-color, var(--mantine-color-placeholder));\n\n  [data-error] & {\n    --input-placeholder-color: var(--input-color, var(--mantine-color-placeholder));\n  }\n}\n\n/* ----- Input.Wrapper ----- */\n.root {\n  line-height: var(--mantine-line-height);\n}\n\n.label {\n  display: inline-block;\n  font-weight: var(--mantine-font-weight-medium);\n  overflow-wrap: break-word;\n  cursor: default;\n  -webkit-tap-highlight-color: transparent;\n  font-size: var(--input-label-size, var(--mantine-font-size-sm));\n}\n\n.required {\n  color: var(--input-asterisk-color, var(--mantine-color-error));\n}\n\n.error,\n.description {\n  word-wrap: break-word;\n  line-height: 1.2;\n  display: block;\n  margin: 0;\n  padding: 0;\n}\n\n.error {\n  color: var(--mantine-color-error);\n  font-size: var(--input-error-size, calc(var(--mantine-font-size-sm) - rem(2px)));\n}\n\n.description {\n  color: var(--mantine-color-dimmed);\n  font-size: var(--input-description-size, calc(var(--mantine-font-size-sm) - rem(2px)));\n}\n"],"mappings":""}
+{"version":3,"file":"Input.module.mjs","names":[],"sources":["../../../src/components/Input/Input.module.css"],"sourcesContent":[".wrapper {\n  position: relative;\n  margin-top: var(--input-margin-top, 0rem);\n  margin-bottom: var(--input-margin-bottom, 0rem);\n\n  --input-height-xs: 30px;\n  --input-height-sm: 36px;\n  --input-height-md: 42px;\n  --input-height-lg: 50px;\n  --input-height-xl: 60px;\n\n  --input-padding-y-xs: 5px;\n  --input-padding-y-sm: 6px;\n  --input-padding-y-md: 8px;\n  --input-padding-y-lg: 10px;\n  --input-padding-y-xl: 13px;\n\n  --input-height: var(--input-height-sm);\n  --input-radius: var(--mantine-radius-default);\n\n  --input-cursor: text;\n  --input-text-align: left;\n  --input-line-height: calc(var(--input-height) - rem(2px));\n  --input-padding: calc(var(--input-height) / 3);\n  --input-padding-inline-start: var(--input-padding);\n  --input-padding-inline-end: var(--input-padding);\n  --input-placeholder-color: var(--mantine-color-placeholder);\n  --input-color: var(--mantine-color-text);\n  --input-disabled-bg: var(--mantine-color-disabled);\n  --input-disabled-color: var(--mantine-color-disabled-color);\n\n  --input-left-section-size: var(--input-left-section-width, calc(var(--input-height) - rem(2px)));\n\n  --input-right-section-size: var(\n    --input-right-section-width,\n    calc(var(--input-height) - rem(2px))\n  );\n\n  --input-size: var(--input-height);\n\n  --section-y: 1px;\n  --left-section-start: 1px;\n  --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n\n  --right-section-end: 1px;\n  --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n\n  &[data-variant='unstyled'] {\n    --input-padding: 0;\n    --input-padding-y: 0;\n    --input-padding-inline-start: 0;\n    --input-padding-inline-end: 0;\n  }\n\n  &[data-pointer] {\n    --input-cursor: pointer;\n  }\n\n  &[data-multiline] {\n    --input-padding-y-xs: 4.5px;\n    --input-padding-y-sm: 5.5px;\n    --input-padding-y-md: 7px;\n    --input-padding-y-lg: 9.5px;\n    --input-padding-y-xl: 13px;\n\n    --input-size: auto;\n    --input-line-height: var(--mantine-line-height);\n  }\n\n  &[data-with-left-section] {\n    --input-padding-inline-start: var(--input-left-section-size);\n  }\n\n  &[data-with-right-section] {\n    --input-padding-inline-end: var(--input-right-section-size);\n\n    &:has([data-combined-clear-section]) {\n      .wrapper[data-size='xs'] & {\n        --input-padding-inline-end: 41px;\n      }\n\n      .wrapper[data-size='sm'] & {\n        --input-padding-inline-end: 50px;\n      }\n\n      .wrapper[data-size='md'] & {\n        --input-padding-inline-end: 60px;\n      }\n\n      .wrapper[data-size='lg'] & {\n        --input-padding-inline-end: 72px;\n      }\n\n      .wrapper[data-size='xl'] & {\n        --input-padding-inline-end: 89px;\n      }\n    }\n  }\n\n  @mixin light {\n    &[data-variant='default'] {\n      --input-bd: var(--mantine-color-gray-4);\n      --input-bg: var(--mantine-color-white);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='filled'] {\n      --input-bd: transparent;\n      --input-bg: var(--mantine-color-gray-1);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='unstyled'] {\n      --input-bd: transparent;\n      --input-bg: transparent;\n      --input-bd-focus: transparent;\n    }\n  }\n\n  @mixin dark {\n    &[data-variant='default'] {\n      --input-bd: var(--mantine-color-dark-4);\n      --input-bg: var(--mantine-color-dark-6);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='filled'] {\n      --input-bd: transparent;\n      --input-bg: var(--mantine-color-dark-5);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='unstyled'] {\n      --input-bd: transparent;\n      --input-bg: transparent;\n      --input-bd-focus: transparent;\n    }\n  }\n\n  [data-mantine-color-scheme] &[data-error] {\n    &:not([data-variant='unstyled']) {\n      --input-bd: var(--mantine-color-error);\n    }\n\n    --input-color: var(--mantine-color-error);\n    --input-placeholder-color: var(--mantine-color-error);\n    --input-section-color: var(--mantine-color-error);\n  }\n\n  @mixin where-rtl {\n    --input-text-align: right;\n    --left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n    --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n  }\n\n  &[dir='ltr'] {\n    --input-text-align: left;\n    --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n    --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n  }\n}\n\n.input {\n  -webkit-tap-highlight-color: transparent;\n  appearance: none;\n  resize: var(--input-resize, none);\n  display: block;\n  width: 100%;\n  transition: border-color 100ms ease;\n\n  text-align: var(--input-text-align);\n  color: var(--input-color);\n  border: rem(1px) solid var(--input-bd);\n  background-color: var(--input-bg);\n  font-family: var(--input-font-family, var(--mantine-font-family));\n  height: var(--input-size);\n  min-height: var(--input-height);\n  line-height: var(--input-line-height);\n  font-size: var(--_input-fz, var(--input-fz, var(--mantine-font-size-md)));\n  border-radius: var(--input-radius);\n  padding-inline-start: var(--input-padding-inline-start);\n  padding-inline-end: var(--input-padding-inline-end);\n  padding-top: var(--input-padding-y, 0rem);\n  padding-bottom: var(--input-padding-y, 0rem);\n  cursor: var(--input-cursor);\n  overflow: var(--input-overflow);\n\n  /* Used as data attribute in Textarea component, does not have associated prop on the Input component */\n  &[data-no-overflow] {\n    --input-overflow: hidden;\n  }\n\n  /* Used as data attribute in JsonInput component, does not have associated prop on the Input component */\n  &[data-monospace] {\n    --input-font-family: var(--mantine-font-family-monospace);\n    --_input-fz: calc(var(--input-fz) - rem(2px));\n  }\n\n  &:focus,\n  &:focus-within {\n    outline: none;\n    --input-bd: var(--input-bd-focus);\n\n    [data-error] & {\n      --input-bd: var(--mantine-color-error);\n    }\n  }\n\n  &::placeholder {\n    color: var(--input-placeholder-color);\n    opacity: 1;\n  }\n\n  &::-webkit-inner-spin-button,\n  &::-webkit-outer-spin-button,\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    appearance: none;\n  }\n\n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  &:disabled,\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background-color: var(--input-disabled-bg);\n    color: var(--input-disabled-color);\n  }\n\n  /* Required to be a separate selector to work in Firefox, can be merged with &:disabled once :has is supported */\n  &:has(input:disabled) {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background-color: var(--input-disabled-bg);\n    color: var(--input-disabled-color);\n  }\n\n  &[readonly] {\n    caret-color: transparent;\n  }\n}\n\n.section {\n  pointer-events: var(--section-pointer-events);\n  position: absolute;\n  z-index: 1;\n  inset-inline-start: var(--section-start);\n  inset-inline-end: var(--section-end);\n  bottom: var(--section-y);\n  top: var(--section-y);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--section-size);\n  border-radius: var(--section-border-radius);\n  color: var(--input-section-color, var(--mantine-color-dimmed));\n\n  &[data-position='right'] {\n    --section-pointer-events: var(--input-right-section-pointer-events);\n    --section-end: var(--right-section-end);\n    --section-size: var(--input-right-section-size);\n    --section-border-radius: var(--right-section-border-radius);\n\n    &:has([data-combined-clear-section]) {\n      .wrapper[data-size='xs'] & {\n        --section-size: 41px;\n      }\n\n      .wrapper[data-size='sm'] & {\n        --section-size: 50px;\n      }\n\n      .wrapper[data-size='md'] & {\n        --section-size: 60px;\n      }\n\n      .wrapper[data-size='lg'] & {\n        --section-size: 72px;\n      }\n\n      .wrapper[data-size='xl'] & {\n        --section-size: 89px;\n      }\n    }\n  }\n\n  &[data-position='left'] {\n    --section-pointer-events: var(--input-left-section-pointer-events);\n    --section-start: var(--left-section-start);\n    --section-size: var(--input-left-section-size);\n    --section-border-radius: var(--left-section-border-radius);\n  }\n}\n\n/* ----- Input.Placeholder ----- */\n.placeholder {\n  color: var(--input-placeholder-color, var(--mantine-color-placeholder));\n\n  [data-error] & {\n    --input-placeholder-color: var(--input-color, var(--mantine-color-placeholder));\n  }\n}\n\n/* ----- Input.Wrapper ----- */\n.root {\n  line-height: var(--mantine-line-height);\n}\n\n.label {\n  display: inline-block;\n  font-weight: var(--mantine-font-weight-medium);\n  overflow-wrap: break-word;\n  cursor: default;\n  -webkit-tap-highlight-color: transparent;\n  font-size: var(--input-label-size, var(--mantine-font-size-sm));\n}\n\n.required {\n  color: var(--input-asterisk-color, var(--mantine-color-error));\n}\n\n.error,\n.description {\n  word-wrap: break-word;\n  line-height: 1.2;\n  display: block;\n  margin: 0;\n  padding: 0;\n}\n\n.error {\n  color: var(--mantine-color-error);\n  font-size: var(--input-error-size, calc(var(--mantine-font-size-sm) - rem(2px)));\n}\n\n.description {\n  color: var(--mantine-color-dimmed);\n  font-size: var(--input-description-size, calc(var(--mantine-font-size-sm) - rem(2px)));\n}\n"],"mappings":""}

package/esm/components/Menu/MenuSub/MenuSub.mjs

@@ -16,12 +16,13 @@ import { safePolygon, useFloating, useHover, useInteractions } from "@floating-u
 const defaultProps = {
 	offset: 0,
 	position: "right-start",
+	safeAreaPolygon: true,
 	transitionProps: { duration: 0 },
 	openDelay: 0,
 	middlewares: { shift: { crossAxis: true } }
 };
 function MenuSub(_props) {
-	const { children, closeDelay, openDelay, position, ...others } = useProps("MenuSub", defaultProps, _props);
+	const { children, closeDelay, openDelay, position, safeAreaPolygon, ...others } = useProps("MenuSub", defaultProps, _props);
 	const id = useId$1();
 	const [opened, { open, close }] = useDisclosure(false);
 	const parentSubCtx = use(SubMenuContext);
@@ -61,7 +62,7 @@ function MenuSub(_props) {
 		}
 	});
 	const { getReferenceProps, getFloatingProps } = useInteractions([useHover(context, {
-		handleClose: safePolygon(),
+		handleClose: safeAreaPolygon ? safePolygon(typeof safeAreaPolygon === "object" ? safeAreaPolygon : void 0) : void 0,
 		delay: {
 			open: openDelay,
 			close: closeDelay

package/esm/components/Menu/MenuSub/MenuSub.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuSub.mjs","names":["useId"],"sources":["../../../../src/components/Menu/MenuSub/MenuSub.tsx"],"sourcesContent":["import { use, useCallback, useRef } from 'react';\nimport { safePolygon, useFloating, useHover, useInteractions } from '@floating-ui/react';\nimport { useDisclosure, useId } from '@mantine/hooks';\nimport { ExtendComponent, Factory, useDirection, useProps } from '../../../core';\nimport {\n  FloatingAxesOffsets,\n  FloatingPosition,\n  getFloatingPosition,\n} from '../../../utils/Floating';\nimport { __PopoverProps, Popover } from '../../Popover';\nimport { TransitionOverride } from '../../Transition';\nimport { useMenuContext } from '../Menu.context';\nimport { MenuSubDropdown } from '../MenuSubDropdown/MenuSubDropdown';\nimport { MenuSubItem } from '../MenuSubItem/MenuSubItem';\nimport { MenuSubTarget } from '../MenuSubTarget/MenuSubTarget';\nimport { SubMenuContext } from './MenuSub.context';\n\nexport type MenuSubFactory = Factory<{\n  props: MenuSubProps;\n}>;\n\nexport interface MenuSubProps extends __PopoverProps {\n  children: React.ReactNode;\n\n  /** Called with current state when dropdown opens or closes */\n  onChange?: (opened: boolean) => void;\n\n  /** Open delay in ms, applicable when hover trigger is used */\n  openDelay?: number;\n\n  /** Close delay in ms, applicable when hover trigger is used */\n  closeDelay?: number;\n\n  /** Dropdown position relative to the target element @default 'right-start' */\n  position?: FloatingPosition;\n\n  /** Offset of the dropdown element @default 0 */\n  offset?: number | FloatingAxesOffsets;\n\n  /** Props passed down to the `Transition` component that used to animate dropdown presence, use to configure duration and animation type @default { duration: 0 } */\n  transitionProps?: TransitionOverride;\n}\n\nconst defaultProps = {\n  offset: 0,\n  position: 'right-start',\n  transitionProps: { duration: 0 },\n  openDelay: 0,\n  middlewares: {\n    shift: {\n      // Enable crossAxis shift to keep submenu dropdown within viewport bounds when positioned horizontally\n      crossAxis: true,\n    },\n  },\n} satisfies Partial<MenuSubProps>;\n\nexport function MenuSub(_props: MenuSubProps) {\n  const { children, closeDelay, openDelay, position, ...others } = useProps(\n    'MenuSub',\n    defaultProps,\n    _props\n  );\n  const id = useId();\n  const [opened, { open, close }] = useDisclosure(false);\n  const parentSubCtx = use(SubMenuContext);\n  const menuCtx = useMenuContext();\n  const { dir } = useDirection();\n  const resolvedPosition = getFloatingPosition(dir, position);\n\n  const levelRegister = parentSubCtx?.registerOpenSub ?? menuCtx.registerOpenSub;\n  const unregisterRef = useRef<(() => void) | null>(null);\n\n  const activeChildCloseRef = useRef<(() => void) | null>(null);\n  const registerOpenSub = useCallback((closeFn: () => void) => {\n    const prev = activeChildCloseRef.current;\n    if (prev && prev !== closeFn) {\n      prev();\n    }\n    activeChildCloseRef.current = closeFn;\n    return () => {\n      if (activeChildCloseRef.current === closeFn) {\n        activeChildCloseRef.current = null;\n      }\n    };\n  }, []);\n\n  const handleOpen = useCallback(() => {\n    unregisterRef.current = levelRegister(close);\n    open();\n  }, [close, levelRegister, open]);\n\n  const handleClose = useCallback(() => {\n    unregisterRef.current?.();\n    unregisterRef.current = null;\n    close();\n  }, [close]);\n\n  const { context, refs } = useFloating({\n    placement: resolvedPosition,\n    open: opened,\n    onOpenChange: (nextOpen) => {\n      if (nextOpen) {\n        handleOpen();\n      } else {\n        handleClose();\n      }\n    },\n  });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      handleClose: safePolygon(),\n      delay: { open: openDelay, close: closeDelay },\n    }),\n  ]);\n\n  const focusFirstItem = () =>\n    window.setTimeout(() => {\n      document\n        .getElementById(`${id}-dropdown`)\n        ?.querySelectorAll<HTMLButtonElement>('[data-menu-item]:not([data-disabled])')[0]\n        ?.focus();\n    }, 16);\n\n  const focusParentItem = () =>\n    window.setTimeout(() => {\n      document.getElementById(`${id}-target`)?.focus();\n    }, 16);\n\n  return (\n    <SubMenuContext\n      value={{\n        opened,\n        close: handleClose,\n        open: handleOpen,\n        focusFirstItem,\n        focusParentItem,\n        parentContext: parentSubCtx,\n        setReference: refs.setReference,\n        setFloating: refs.setFloating,\n        getReferenceProps,\n        getFloatingProps,\n        registerOpenSub,\n      }}\n    >\n      <Popover\n        opened={opened}\n        withinPortal={false}\n        withArrow={false}\n        id={id}\n        position={position}\n        {...others}\n      >\n        {children}\n      </Popover>\n    </SubMenuContext>\n  );\n}\n\nMenuSub.extend = (input: ExtendComponent<MenuSubFactory>) => input;\nMenuSub.displayName = '@mantine/core/MenuSub';\nMenuSub.Target = MenuSubTarget;\nMenuSub.Dropdown = MenuSubDropdown;\nMenuSub.Item = MenuSubItem;\n"],"mappings":";;;;;;;;;;;;;;;AA2CA,MAAM,eAAe;CACnB,QAAQ;CACR,UAAU;CACV,iBAAiB,EAAE,UAAU,EAAE;CAC/B,WAAW;CACX,aAAa,EACX,OAAO,EAEL,WAAW,KACb,EACF;AACF;AAEA,SAAgB,QAAQ,QAAsB;CAC5C,MAAM,EAAE,UAAU,YAAY,WAAW,UAAU,GAAG,WAAW,SAC/D,WACA,cACA,MACF;CACA,MAAM,KAAKA,QAAM;CACjB,MAAM,CAAC,QAAQ,EAAE,MAAM,WAAW,cAAc,KAAK;CACrD,MAAM,eAAe,IAAI,cAAc;CACvC,MAAM,UAAU,eAAe;CAC/B,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,mBAAmB,oBAAoB,KAAK,QAAQ;CAE1D,MAAM,gBAAgB,cAAc,mBAAmB,QAAQ;CAC/D,MAAM,gBAAgB,OAA4B,IAAI;CAEtD,MAAM,sBAAsB,OAA4B,IAAI;CAC5D,MAAM,kBAAkB,aAAa,YAAwB;EAC3D,MAAM,OAAO,oBAAoB;EACjC,IAAI,QAAQ,SAAS,SACnB,KAAK;EAEP,oBAAoB,UAAU;EAC9B,aAAa;GACX,IAAI,oBAAoB,YAAY,SAClC,oBAAoB,UAAU;EAElC;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,aAAa,kBAAkB;EACnC,cAAc,UAAU,cAAc,KAAK;EAC3C,KAAK;CACP,GAAG;EAAC;EAAO;EAAe;CAAI,CAAC;CAE/B,MAAM,cAAc,kBAAkB;EACpC,cAAc,UAAU;EACxB,cAAc,UAAU;EACxB,MAAM;CACR,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,EAAE,SAAS,SAAS,YAAY;EACpC,WAAW;EACX,MAAM;EACN,eAAe,aAAa;GAC1B,IAAI,UACF,WAAW;QAEX,YAAY;EAEhB;CACF,CAAC;CAED,MAAM,EAAE,mBAAmB,qBAAqB,gBAAgB,CAC9D,SAAS,SAAS;EAChB,aAAa,YAAY;EACzB,OAAO;GAAE,MAAM;GAAW,OAAO;EAAW;CAC9C,CAAC,CACH,CAAC;CAED,MAAM,uBACJ,OAAO,iBAAiB;EACtB,SACG,eAAe,GAAG,GAAG,UAAU,GAC9B,iBAAoC,uCAAuC,EAAE,IAC7E,MAAM;CACZ,GAAG,EAAE;CAEP,MAAM,wBACJ,OAAO,iBAAiB;EACtB,SAAS,eAAe,GAAG,GAAG,QAAQ,GAAG,MAAM;CACjD,GAAG,EAAE;CAEP,OACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,OAAO;GACP,MAAM;GACN;GACA;GACA,eAAe;GACf,cAAc,KAAK;GACnB,aAAa,KAAK;GAClB;GACA;GACA;EACF;YAEA,oBAAC,SAAD;GACU;GACR,cAAc;GACd,WAAW;GACP;GACM;GACV,GAAI;GAEH;EACM,CAAA;CACK,CAAA;AAEpB;AAEA,QAAQ,UAAU,UAA2C;AAC7D,QAAQ,cAAc;AACtB,QAAQ,SAAS;AACjB,QAAQ,WAAW;AACnB,QAAQ,OAAO"}
+{"version":3,"file":"MenuSub.mjs","names":["useId"],"sources":["../../../../src/components/Menu/MenuSub/MenuSub.tsx"],"sourcesContent":["import { use, useCallback, useRef } from 'react';\nimport {\n  safePolygon,\n  useFloating,\n  useHover,\n  useInteractions,\n  type SafePolygonOptions,\n} from '@floating-ui/react';\nimport { useDisclosure, useId } from '@mantine/hooks';\nimport { ExtendComponent, Factory, useDirection, useProps } from '../../../core';\nimport {\n  FloatingAxesOffsets,\n  FloatingPosition,\n  getFloatingPosition,\n} from '../../../utils/Floating';\nimport { __PopoverProps, Popover } from '../../Popover';\nimport { TransitionOverride } from '../../Transition';\nimport { useMenuContext } from '../Menu.context';\nimport { MenuSubDropdown } from '../MenuSubDropdown/MenuSubDropdown';\nimport { MenuSubItem } from '../MenuSubItem/MenuSubItem';\nimport { MenuSubTarget } from '../MenuSubTarget/MenuSubTarget';\nimport { SubMenuContext } from './MenuSub.context';\n\nexport type MenuSubFactory = Factory<{\n  props: MenuSubProps;\n}>;\n\nexport interface MenuSubProps extends __PopoverProps {\n  children: React.ReactNode;\n\n  /** Called with current state when dropdown opens or closes */\n  onChange?: (opened: boolean) => void;\n\n  /** Open delay in ms, applicable when hover trigger is used */\n  openDelay?: number;\n\n  /** Close delay in ms, applicable when hover trigger is used */\n  closeDelay?: number;\n\n  /** Dropdown position relative to the target element @default 'right-start' */\n  position?: FloatingPosition;\n\n  /** Offset of the dropdown element @default 0 */\n  offset?: number | FloatingAxesOffsets;\n\n  /** Props passed down to the `Transition` component that used to animate dropdown presence, use to configure duration and animation type @default { duration: 0 } */\n  transitionProps?: TransitionOverride;\n\n  /** Determines whether submenu stays open while the cursor moves toward its dropdown. Pass an object to configure safe polygon behavior. @default true */\n  safeAreaPolygon?: boolean | SafePolygonOptions;\n}\n\nconst defaultProps = {\n  offset: 0,\n  position: 'right-start',\n  safeAreaPolygon: true,\n  transitionProps: { duration: 0 },\n  openDelay: 0,\n  middlewares: {\n    shift: {\n      // Enable crossAxis shift to keep submenu dropdown within viewport bounds when positioned horizontally\n      crossAxis: true,\n    },\n  },\n} satisfies Partial<MenuSubProps>;\n\nexport function MenuSub(_props: MenuSubProps) {\n  const { children, closeDelay, openDelay, position, safeAreaPolygon, ...others } = useProps(\n    'MenuSub',\n    defaultProps,\n    _props\n  );\n  const id = useId();\n  const [opened, { open, close }] = useDisclosure(false);\n  const parentSubCtx = use(SubMenuContext);\n  const menuCtx = useMenuContext();\n  const { dir } = useDirection();\n  const resolvedPosition = getFloatingPosition(dir, position);\n\n  const levelRegister = parentSubCtx?.registerOpenSub ?? menuCtx.registerOpenSub;\n  const unregisterRef = useRef<(() => void) | null>(null);\n\n  const activeChildCloseRef = useRef<(() => void) | null>(null);\n  const registerOpenSub = useCallback((closeFn: () => void) => {\n    const prev = activeChildCloseRef.current;\n    if (prev && prev !== closeFn) {\n      prev();\n    }\n    activeChildCloseRef.current = closeFn;\n    return () => {\n      if (activeChildCloseRef.current === closeFn) {\n        activeChildCloseRef.current = null;\n      }\n    };\n  }, []);\n\n  const handleOpen = useCallback(() => {\n    unregisterRef.current = levelRegister(close);\n    open();\n  }, [close, levelRegister, open]);\n\n  const handleClose = useCallback(() => {\n    unregisterRef.current?.();\n    unregisterRef.current = null;\n    close();\n  }, [close]);\n\n  const { context, refs } = useFloating({\n    placement: resolvedPosition,\n    open: opened,\n    onOpenChange: (nextOpen) => {\n      if (nextOpen) {\n        handleOpen();\n      } else {\n        handleClose();\n      }\n    },\n  });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      handleClose: safeAreaPolygon\n        ? safePolygon(typeof safeAreaPolygon === 'object' ? safeAreaPolygon : undefined)\n        : undefined,\n      delay: { open: openDelay, close: closeDelay },\n    }),\n  ]);\n\n  const focusFirstItem = () =>\n    window.setTimeout(() => {\n      document\n        .getElementById(`${id}-dropdown`)\n        ?.querySelectorAll<HTMLButtonElement>('[data-menu-item]:not([data-disabled])')[0]\n        ?.focus();\n    }, 16);\n\n  const focusParentItem = () =>\n    window.setTimeout(() => {\n      document.getElementById(`${id}-target`)?.focus();\n    }, 16);\n\n  return (\n    <SubMenuContext\n      value={{\n        opened,\n        close: handleClose,\n        open: handleOpen,\n        focusFirstItem,\n        focusParentItem,\n        parentContext: parentSubCtx,\n        setReference: refs.setReference,\n        setFloating: refs.setFloating,\n        getReferenceProps,\n        getFloatingProps,\n        registerOpenSub,\n      }}\n    >\n      <Popover\n        opened={opened}\n        withinPortal={false}\n        withArrow={false}\n        id={id}\n        position={position}\n        {...others}\n      >\n        {children}\n      </Popover>\n    </SubMenuContext>\n  );\n}\n\nMenuSub.extend = (input: ExtendComponent<MenuSubFactory>) => input;\nMenuSub.displayName = '@mantine/core/MenuSub';\nMenuSub.Target = MenuSubTarget;\nMenuSub.Dropdown = MenuSubDropdown;\nMenuSub.Item = MenuSubItem;\n"],"mappings":";;;;;;;;;;;;;;;AAoDA,MAAM,eAAe;CACnB,QAAQ;CACR,UAAU;CACV,iBAAiB;CACjB,iBAAiB,EAAE,UAAU,EAAE;CAC/B,WAAW;CACX,aAAa,EACX,OAAO,EAEL,WAAW,KACb,EACF;AACF;AAEA,SAAgB,QAAQ,QAAsB;CAC5C,MAAM,EAAE,UAAU,YAAY,WAAW,UAAU,iBAAiB,GAAG,WAAW,SAChF,WACA,cACA,MACF;CACA,MAAM,KAAKA,QAAM;CACjB,MAAM,CAAC,QAAQ,EAAE,MAAM,WAAW,cAAc,KAAK;CACrD,MAAM,eAAe,IAAI,cAAc;CACvC,MAAM,UAAU,eAAe;CAC/B,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,mBAAmB,oBAAoB,KAAK,QAAQ;CAE1D,MAAM,gBAAgB,cAAc,mBAAmB,QAAQ;CAC/D,MAAM,gBAAgB,OAA4B,IAAI;CAEtD,MAAM,sBAAsB,OAA4B,IAAI;CAC5D,MAAM,kBAAkB,aAAa,YAAwB;EAC3D,MAAM,OAAO,oBAAoB;EACjC,IAAI,QAAQ,SAAS,SACnB,KAAK;EAEP,oBAAoB,UAAU;EAC9B,aAAa;GACX,IAAI,oBAAoB,YAAY,SAClC,oBAAoB,UAAU;EAElC;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,aAAa,kBAAkB;EACnC,cAAc,UAAU,cAAc,KAAK;EAC3C,KAAK;CACP,GAAG;EAAC;EAAO;EAAe;CAAI,CAAC;CAE/B,MAAM,cAAc,kBAAkB;EACpC,cAAc,UAAU;EACxB,cAAc,UAAU;EACxB,MAAM;CACR,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,EAAE,SAAS,SAAS,YAAY;EACpC,WAAW;EACX,MAAM;EACN,eAAe,aAAa;GAC1B,IAAI,UACF,WAAW;QAEX,YAAY;EAEhB;CACF,CAAC;CAED,MAAM,EAAE,mBAAmB,qBAAqB,gBAAgB,CAC9D,SAAS,SAAS;EAChB,aAAa,kBACT,YAAY,OAAO,oBAAoB,WAAW,kBAAkB,KAAA,CAAS,IAC7E,KAAA;EACJ,OAAO;GAAE,MAAM;GAAW,OAAO;EAAW;CAC9C,CAAC,CACH,CAAC;CAED,MAAM,uBACJ,OAAO,iBAAiB;EACtB,SACG,eAAe,GAAG,GAAG,UAAU,GAC9B,iBAAoC,uCAAuC,EAAE,IAC7E,MAAM;CACZ,GAAG,EAAE;CAEP,MAAM,wBACJ,OAAO,iBAAiB;EACtB,SAAS,eAAe,GAAG,GAAG,QAAQ,GAAG,MAAM;CACjD,GAAG,EAAE;CAEP,OACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,OAAO;GACP,MAAM;GACN;GACA;GACA,eAAe;GACf,cAAc,KAAK;GACnB,aAAa,KAAK;GAClB;GACA;GACA;EACF;YAEA,oBAAC,SAAD;GACU;GACR,cAAc;GACd,WAAW;GACP;GACM;GACV,GAAI;GAEH;EACM,CAAA;CACK,CAAA;AAEpB;AAEA,QAAQ,UAAU,UAA2C;AAC7D,QAAQ,cAAc;AACtB,QAAQ,SAAS;AACjB,QAAQ,WAAW;AACnB,QAAQ,OAAO"}

package/esm/components/Modal/ModalRoot.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModalRoot.mjs","names":["classes"],"sources":["../../../src/components/Modal/ModalRoot.tsx"],"sourcesContent":["import {\n  createVarsResolver,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  getRadius,\n  getSize,\n  MantineRadius,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ModalBase, ModalBaseProps, ModalBaseStylesNames } from '../ModalBase';\nimport { ScrollArea } from '../ScrollArea';\nimport { ModalProvider, ScrollAreaComponent } from './Modal.context';\nimport classes from './Modal.module.css';\n\nexport type ModalRootStylesNames = ModalBaseStylesNames;\nexport type ModalRootCssVariables = {\n  root: '--modal-radius' | '--modal-size' | '--modal-y-offset' | '--modal-x-offset';\n};\n\nexport interface ModalRootProps extends StylesApiProps<ModalRootFactory>, ModalBaseProps {\n  __staticSelector?: string;\n\n  /** Top/bottom modal offset @default 5dvh */\n  yOffset?: React.CSSProperties['marginTop'];\n\n  /** Left/right modal offset @default 5vw */\n  xOffset?: React.CSSProperties['marginLeft'];\n\n  /** Scroll area component @default 'div' */\n  scrollAreaComponent?: ScrollAreaComponent;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** If set, the modal is centered vertically @default false */\n  centered?: boolean;\n\n  /** If set, the modal takes the entire screen @default false */\n  fullScreen?: boolean;\n}\n\nexport type ModalRootFactory = Factory<{\n  props: ModalRootProps;\n  ref: HTMLDivElement;\n  stylesNames: ModalRootStylesNames;\n  vars: ModalRootCssVariables;\n  compound: true;\n}>;\n\nconst defaultProps = {\n  __staticSelector: 'Modal',\n  closeOnClickOutside: true,\n  withinPortal: true,\n  lockScroll: true,\n  trapFocus: true,\n  returnFocus: true,\n  closeOnEscape: true,\n  keepMounted: false,\n  zIndex: getDefaultZIndex('modal'),\n  transitionProps: { duration: 200, transition: 'fade-down' },\n  yOffset: '5dvh',\n} satisfies Partial<ModalRootProps>;\n\nconst varsResolver = createVarsResolver<ModalRootFactory>(\n  (_, { radius, size, yOffset, xOffset }) => ({\n    root: {\n      '--modal-radius': radius === undefined ? undefined : getRadius(radius),\n      '--modal-size': getSize(size, 'modal-size'),\n      '--modal-y-offset': rem(yOffset),\n      '--modal-x-offset': rem(xOffset),\n    },\n  })\n);\n\nexport const ModalRoot = factory<ModalRootFactory>((_props) => {\n  const props = useProps('ModalRoot', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    yOffset,\n    scrollAreaComponent,\n    radius,\n    fullScreen,\n    centered,\n    xOffset,\n    __staticSelector,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ModalRootFactory>({\n    name: __staticSelector,\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <ModalProvider value={{ yOffset, scrollAreaComponent, getStyles, fullScreen }}>\n      <ModalBase\n        {...getStyles('root')}\n        data-full-screen={fullScreen || undefined}\n        data-centered={centered || undefined}\n        data-offset-scrollbars={scrollAreaComponent === ScrollArea.Autosize || undefined}\n        unstyled={unstyled}\n        {...others}\n      />\n    </ModalProvider>\n  );\n});\n\nModalRoot.classes = classes;\nModalRoot.varsResolver = varsResolver;\nModalRoot.displayName = '@mantine/core/ModalRoot';\n"],"mappings":";;;;;;;;;;;;;;AAqDA,MAAM,eAAe;CACnB,kBAAkB;CAClB,qBAAqB;CACrB,cAAc;CACd,YAAY;CACZ,WAAW;CACX,aAAa;CACb,eAAe;CACf,aAAa;CACb,QAAQ,iBAAiB,OAAO;CAChC,iBAAiB;EAAE,UAAU;EAAK,YAAY;CAAY;CAC1D,SAAS;AACX;AAEA,MAAM,eAAe,oBAClB,GAAG,EAAE,QAAQ,MAAM,SAAS,eAAe,EAC1C,MAAM;CACJ,kBAAkB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;CACrE,gBAAgB,QAAQ,MAAM,YAAY;CAC1C,oBAAoB,IAAI,OAAO;CAC/B,oBAAoB,IAAI,OAAO;AACjC,EACF,EACF;AAEA,MAAa,YAAY,SAA2B,WAAW;CAC7D,MAAM,QAAQ,SAAS,aAAa,cAAc,MAAM;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,SACA,qBACA,QACA,YACA,UACA,SACA,kBACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA4B;EAC5C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,eAAD;EAAe,OAAO;GAAE;GAAS;GAAqB;GAAW;EAAW;YAC1E,oBAAC,WAAD;GACE,GAAI,UAAU,MAAM;GACpB,oBAAkB,cAAc,KAAA;GAChC,iBAAe,YAAY,KAAA;GAC3B,0BAAwB,wBAAwB,WAAW,YAAY,KAAA;GAC7D;GACV,GAAI;EACL,CAAA;CACY,CAAA;AAEnB,CAAC;AAED,UAAU,UAAUA;AACpB,UAAU,eAAe;AACzB,UAAU,cAAc"}
+{"version":3,"file":"ModalRoot.mjs","names":["classes"],"sources":["../../../src/components/Modal/ModalRoot.tsx"],"sourcesContent":["import {\n  createVarsResolver,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  getRadius,\n  getSize,\n  MantineRadius,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ModalBase, ModalBaseProps, ModalBaseStylesNames } from '../ModalBase';\nimport { ScrollArea } from '../ScrollArea';\nimport { ModalProvider, ScrollAreaComponent } from './Modal.context';\nimport classes from './Modal.module.css';\n\nexport type ModalRootStylesNames = ModalBaseStylesNames;\nexport type ModalRootCssVariables = {\n  root: '--modal-radius' | '--modal-size' | '--modal-y-offset' | '--modal-x-offset';\n};\n\nexport interface ModalRootProps extends StylesApiProps<ModalRootFactory>, ModalBaseProps {\n  __staticSelector?: string;\n\n  /** Top/bottom modal offset @default 5dvh */\n  yOffset?: React.CSSProperties['marginTop'];\n\n  /** Left/right modal offset @default 5vw */\n  xOffset?: React.CSSProperties['marginLeft'];\n\n  /** Scroll area component @default 'div' */\n  scrollAreaComponent?: ScrollAreaComponent;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** If set, the modal is centered vertically @default false */\n  centered?: boolean;\n\n  /** If set, the modal takes the entire screen @default false */\n  fullScreen?: boolean;\n}\n\nexport type ModalRootFactory = Factory<{\n  props: ModalRootProps;\n  ref: HTMLDivElement;\n  stylesNames: ModalRootStylesNames;\n  vars: ModalRootCssVariables;\n}>;\n\nconst defaultProps = {\n  __staticSelector: 'Modal',\n  closeOnClickOutside: true,\n  withinPortal: true,\n  lockScroll: true,\n  trapFocus: true,\n  returnFocus: true,\n  closeOnEscape: true,\n  keepMounted: false,\n  zIndex: getDefaultZIndex('modal'),\n  transitionProps: { duration: 200, transition: 'fade-down' },\n  yOffset: '5dvh',\n} satisfies Partial<ModalRootProps>;\n\nconst varsResolver = createVarsResolver<ModalRootFactory>(\n  (_, { radius, size, yOffset, xOffset }) => ({\n    root: {\n      '--modal-radius': radius === undefined ? undefined : getRadius(radius),\n      '--modal-size': getSize(size, 'modal-size'),\n      '--modal-y-offset': rem(yOffset),\n      '--modal-x-offset': rem(xOffset),\n    },\n  })\n);\n\nexport const ModalRoot = factory<ModalRootFactory>((_props) => {\n  const props = useProps('ModalRoot', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    yOffset,\n    scrollAreaComponent,\n    radius,\n    fullScreen,\n    centered,\n    xOffset,\n    __staticSelector,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ModalRootFactory>({\n    name: __staticSelector,\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <ModalProvider value={{ yOffset, scrollAreaComponent, getStyles, fullScreen }}>\n      <ModalBase\n        {...getStyles('root')}\n        data-full-screen={fullScreen || undefined}\n        data-centered={centered || undefined}\n        data-offset-scrollbars={scrollAreaComponent === ScrollArea.Autosize || undefined}\n        unstyled={unstyled}\n        {...others}\n      />\n    </ModalProvider>\n  );\n});\n\nModalRoot.classes = classes;\nModalRoot.varsResolver = varsResolver;\nModalRoot.displayName = '@mantine/core/ModalRoot';\n"],"mappings":";;;;;;;;;;;;;;AAoDA,MAAM,eAAe;CACnB,kBAAkB;CAClB,qBAAqB;CACrB,cAAc;CACd,YAAY;CACZ,WAAW;CACX,aAAa;CACb,eAAe;CACf,aAAa;CACb,QAAQ,iBAAiB,OAAO;CAChC,iBAAiB;EAAE,UAAU;EAAK,YAAY;CAAY;CAC1D,SAAS;AACX;AAEA,MAAM,eAAe,oBAClB,GAAG,EAAE,QAAQ,MAAM,SAAS,eAAe,EAC1C,MAAM;CACJ,kBAAkB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;CACrE,gBAAgB,QAAQ,MAAM,YAAY;CAC1C,oBAAoB,IAAI,OAAO;CAC/B,oBAAoB,IAAI,OAAO;AACjC,EACF,EACF;AAEA,MAAa,YAAY,SAA2B,WAAW;CAC7D,MAAM,QAAQ,SAAS,aAAa,cAAc,MAAM;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,SACA,qBACA,QACA,YACA,UACA,SACA,kBACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA4B;EAC5C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,eAAD;EAAe,OAAO;GAAE;GAAS;GAAqB;GAAW;EAAW;YAC1E,oBAAC,WAAD;GACE,GAAI,UAAU,MAAM;GACpB,oBAAkB,cAAc,KAAA;GAChC,iBAAe,YAAY,KAAA;GAC3B,0BAAwB,wBAAwB,WAAW,YAAY,KAAA;GAC7D;GACV,GAAI;EACL,CAAA;CACY,CAAA;AAEnB,CAAC;AAED,UAAU,UAAUA;AACpB,UAAU,eAAe;AACzB,UAAU,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"Pill.module.mjs","names":[],"sources":["../../../src/components/Pill/Pill.module.css"],"sourcesContent":[".root {\n  --pill-fz-xs: 10px;\n  --pill-fz-sm: 12px;\n  --pill-fz-md: 14px;\n  --pill-fz-lg: 16px;\n  --pill-fz-xl: 18px;\n\n  --pill-height-xs: 18px;\n  --pill-height-sm: 22px;\n  --pill-height-md: 25px;\n  --pill-height-lg: 28px;\n  --pill-height-xl: 32px;\n\n  --pill-fz: var(--pill-fz-sm);\n  --pill-height: var(--pill-height-sm);\n\n  font-size: var(--pill-fz);\n  flex: 0;\n  height: var(--pill-height);\n  padding-inline: 0.8em;\n  display: inline-flex;\n  align-items: center;\n  border-radius: var(--pill-radius, 1000rem);\n  line-height: 1;\n  white-space: nowrap;\n  user-select: none;\n  -webkit-user-select: none;\n  max-width: 100%;\n  position: relative;\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-7);\n    color: var(--mantine-color-dark-0);\n  }\n\n  @mixin where-light {\n    color: var(--mantine-color-black);\n  }\n\n  &:where([data-with-remove]:not(:has(button:disabled))) {\n    padding-inline-end: 0;\n  }\n\n  &:where([data-disabled], :has(button:disabled)) {\n    cursor: not-allowed;\n  }\n\n  &:where([draggable='true']) {\n    cursor: grab;\n  }\n\n  &:where([draggable='true']):focus-visible {\n    outline: 2px solid var(--mantine-primary-color-filled);\n    outline-offset: 2px;\n  }\n\n  &:where([data-dragging]) {\n    opacity: 0.4;\n    cursor: grabbing;\n  }\n\n  &:where([data-drag-over='before'])::before,\n  &:where([data-drag-over='after'])::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: rem(2px);\n    background-color: var(--mantine-primary-color-filled);\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  &:where([data-drag-over='before'])::before {\n    inset-inline-start: rem(-4px);\n  }\n\n  &:where([data-drag-over='after'])::after {\n    inset-inline-end: rem(-4px);\n  }\n}\n\n.root--default {\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-1);\n\n    &:where([data-disabled], :has(button:disabled)) {\n      background-color: var(--mantine-color-disabled);\n    }\n  }\n}\n\n.root--contrast {\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n\n    &:where([data-disabled], :has(button:disabled)) {\n      background-color: var(--mantine-color-disabled);\n    }\n  }\n}\n\n.label {\n  cursor: inherit;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: flex;\n  align-items: center;\n  height: 100%;\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n}\n\n.remove {\n  color: inherit;\n  font-size: inherit;\n  height: 100%;\n  min-height: unset;\n  min-width: 2em;\n  width: unset;\n  border-radius: 0;\n  padding-inline-start: 0.1em;\n  padding-inline-end: 0.3em;\n  flex: 0;\n  border-end-end-radius: var(--pill-radius, 50%);\n  border-start-end-radius: var(--pill-radius, 50%);\n\n  .root[data-disabled] > &,\n  &:disabled {\n    display: none;\n    background-color: transparent;\n    width: 0.8em;\n    min-width: 0.8em;\n    padding: 0;\n    cursor: not-allowed;\n\n    & > svg {\n      display: none;\n    }\n  }\n\n  & > svg {\n    pointer-events: none;\n  }\n}\n\n.group {\n  --pg-gap-xs: 6px;\n  --pg-gap-sm: 8px;\n  --pg-gap-md: 10px;\n  --pg-gap-lg: 12px;\n  --pg-gap-xl: 12px;\n  --pg-gap: var(--pg-gap-sm);\n\n  display: flex;\n  align-items: center;\n  gap: var(--pg-gap);\n  flex-wrap: wrap;\n}\n"],"mappings":""}
+{"version":3,"file":"Pill.module.mjs","names":[],"sources":["../../../src/components/Pill/Pill.module.css"],"sourcesContent":[".root {\n  --pill-fz-xs: 10px;\n  --pill-fz-sm: 12px;\n  --pill-fz-md: 14px;\n  --pill-fz-lg: 16px;\n  --pill-fz-xl: 18px;\n\n  --pill-height-xs: 18px;\n  --pill-height-sm: 22px;\n  --pill-height-md: 25px;\n  --pill-height-lg: 28px;\n  --pill-height-xl: 32px;\n\n  --pill-fz: var(--pill-fz-sm);\n  --pill-height: var(--pill-height-sm);\n\n  font-size: var(--pill-fz);\n  flex: 0;\n  height: var(--pill-height);\n  padding-inline: 0.8em;\n  display: inline-flex;\n  align-items: center;\n  border-radius: var(--pill-radius, 1000rem);\n  line-height: 1;\n  white-space: nowrap;\n  user-select: none;\n  -webkit-user-select: none;\n  max-width: 100%;\n  position: relative;\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-7);\n    color: var(--mantine-color-dark-0);\n  }\n\n  @mixin where-light {\n    color: var(--mantine-color-black);\n  }\n\n  &:where([data-with-remove]:not(:has(button:disabled))) {\n    padding-inline-end: 0;\n  }\n\n  &:where([data-disabled], :has(button:disabled)) {\n    cursor: not-allowed;\n  }\n\n  &:where([draggable='true']) {\n    cursor: grab;\n  }\n\n  &:where([draggable='true']):focus-visible {\n    outline: 2px solid var(--mantine-primary-color-filled);\n    outline-offset: 2px;\n  }\n\n  &:where([data-dragging]) {\n    opacity: 0.4;\n    cursor: grabbing;\n  }\n\n  &:where([data-drag-over='before'])::before,\n  &:where([data-drag-over='after'])::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: rem(2px);\n    background-color: var(--mantine-primary-color-filled);\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  &:where([data-drag-over='before'])::before {\n    inset-inline-start: rem(-4px);\n  }\n\n  &:where([data-drag-over='after'])::after {\n    inset-inline-end: rem(-4px);\n  }\n}\n\n.root--default {\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-1);\n\n    &:where([data-disabled], :has(button:disabled)) {\n      background-color: var(--mantine-color-disabled);\n    }\n  }\n}\n\n.root--contrast {\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n\n    &:where([data-disabled], :has(button:disabled)) {\n      background-color: var(--mantine-color-disabled);\n    }\n  }\n}\n\n.label {\n  cursor: inherit;\n  display: block;\n  overflow: hidden;\n  height: 100%;\n  line-height: var(--pill-height);\n  text-overflow: ellipsis;\n}\n\n.remove {\n  color: inherit;\n  font-size: inherit;\n  height: 100%;\n  min-height: unset;\n  min-width: 2em;\n  width: unset;\n  border-radius: 0;\n  padding-inline-start: 0.1em;\n  padding-inline-end: 0.3em;\n  flex: 0;\n  border-end-end-radius: var(--pill-radius, 50%);\n  border-start-end-radius: var(--pill-radius, 50%);\n\n  .root[data-disabled] > &,\n  &:disabled {\n    display: none;\n    background-color: transparent;\n    width: 0.8em;\n    min-width: 0.8em;\n    padding: 0;\n    cursor: not-allowed;\n\n    & > svg {\n      display: none;\n    }\n  }\n\n  & > svg {\n    pointer-events: none;\n  }\n}\n\n.group {\n  --pg-gap-xs: 6px;\n  --pg-gap-sm: 8px;\n  --pg-gap-md: 10px;\n  --pg-gap-lg: 12px;\n  --pg-gap-xl: 12px;\n  --pg-gap: var(--pg-gap-sm);\n\n  display: flex;\n  align-items: center;\n  gap: var(--pg-gap);\n  flex-wrap: wrap;\n}\n"],"mappings":""}

package/esm/components/Select/Select.mjs

@@ -89,7 +89,7 @@ const Select = genericFactory((_props) => {
 			onClear?.();
 		}
 	});
-	const _clearable = clearable && !!_value && !disabled && !readOnly;
+	const _clearable = clearable && _value != null && !disabled && !readOnly;
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Combobox, {
 		store: combobox,
 		__staticSelector: "Select",

package/esm/components/Select/Select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","names":["useId"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useId, usePrevious, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  Factory,\n  genericFactory,\n  MantineColor,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n  InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type SelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames;\n\nexport interface SelectProps<Value extends Primitive = string>\n  extends\n    BoxProps,\n    __BaseInputProps,\n    ComboboxLikeProps<Value>,\n    StylesApiProps<SelectFactory>,\n    ElementProps<'input', 'onChange' | 'size' | 'value' | 'defaultValue'> {\n  /** Controlled component value */\n  value?: Value | null;\n\n  /** Uncontrolled component default value */\n  defaultValue?: Value | null;\n\n  /** Called when value changes */\n  onChange?: (value: Value | null, option: ComboboxItem<Value>) => void;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Determines whether the select should be searchable @default false */\n  searchable?: boolean;\n\n  /** Displays check icon near the selected option label @default true */\n  withCheckIcon?: boolean;\n\n  /** Aligns unchecked labels with the checked one @default false */\n  withAlignedLabels?: boolean;\n\n  /** Position of the check icon relative to the option label @default 'left' */\n  checkIconPosition?: 'left' | 'right';\n\n  /** Message displayed when no options match the search query or when there is no data */\n  nothingFoundMessage?: React.ReactNode;\n\n  /** Controlled search value */\n  searchValue?: string;\n\n  /** Default search value */\n  defaultSearchValue?: string;\n\n  /** Called when search changes */\n  onSearchChange?: (value: string) => void;\n\n  /** Allows deselecting the selected option by clicking it @default true */\n  allowDeselect?: boolean;\n\n  /** Displays clear button in the right section when component has value @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** A function to render content of the option, replaces the default content of the option */\n  renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem<Value>>) => React.ReactNode;\n\n  /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Controls color of the default chevron, by default depends on the color scheme */\n  chevronColor?: MantineColor;\n\n  /** Automatically selects the highlighted option when input loses focus @default false */\n  autoSelectOnBlur?: boolean;\n\n  /** Opens dropdown when input receives focus (requires searchable={true}) @default true */\n  openOnFocus?: boolean;\n}\n\nexport type SelectFactory = Factory<{\n  props: SelectProps;\n  ref: HTMLInputElement;\n  stylesNames: SelectStylesNames;\n  variant: InputVariant;\n  signature: <Value extends Primitive = string>(props: SelectProps<Value>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  size: 'sm',\n  withCheckIcon: true,\n  allowDeselect: true,\n  checkIconPosition: 'left',\n  openOnFocus: true,\n} satisfies Partial<SelectProps>;\n\nexport const Select = genericFactory<SelectFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'Select'], defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownClose,\n    onDropdownOpen,\n    onFocus,\n    onBlur,\n    onClick,\n    onChange,\n    data,\n    value,\n    defaultValue,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    readOnly,\n    disabled,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    size,\n    searchable,\n    rightSection,\n    checkIconPosition,\n    withCheckIcon,\n    withAlignedLabels,\n    nothingFoundMessage,\n    name,\n    form,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    allowDeselect,\n    error,\n    rightSectionPointerEvents,\n    id,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    hiddenInputProps,\n    renderOption,\n    onClear,\n    autoComplete,\n    scrollAreaProps,\n    __defaultRightSection,\n    __clearSection,\n    __clearable,\n    chevronColor,\n    autoSelectOnBlur,\n    openOnFocus,\n    attributes,\n    ...others\n  } = props;\n\n  const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n  const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n  const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\n  const _id = useId(id);\n\n  const [_value, setValue, controlled] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: null,\n    onChange,\n  });\n\n  const selectedOption =\n    _value != null\n      ? `${_value}` in optionsLockup\n        ? optionsLockup[`${_value}`]\n        : retainedSelectedOptions.current[`${_value}`]\n      : undefined;\n  const previousSelectedOption = usePrevious(selectedOption);\n\n  const [search, setSearch, searchControlled] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: selectedOption ? selectedOption.label : '',\n    onChange: onSearchChange,\n  });\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      } else {\n        combobox.updateSelectedOptionIndex('active', { scrollIntoView: true });\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      // Required for autoSelectOnBlur to work correctly\n      setTimeout(combobox.resetSelectedOption, 0);\n    },\n  });\n\n  const handleSearchChange = (value: string) => {\n    setSearch(value);\n    combobox.resetSelectedOption();\n  };\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<SelectFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, search]);\n\n  useEffect(() => {\n    if (value === null) {\n      handleSearchChange('');\n    }\n\n    if (\n      value != null &&\n      selectedOption &&\n      (previousSelectedOption?.value !== selectedOption.value ||\n        previousSelectedOption?.label !== selectedOption.label)\n    ) {\n      handleSearchChange(selectedOption.label);\n    }\n  }, [value, selectedOption]);\n\n  useEffect(() => {\n    if (!controlled && !searchControlled) {\n      handleSearchChange(\n        _value != null\n          ? `${_value}` in optionsLockup\n            ? optionsLockup[`${_value}`]?.label\n            : retainedSelectedOptions.current[`${_value}`]?.label || ''\n          : ''\n      );\n    }\n  }, [optionsLockup, _value]);\n\n  useEffect(() => {\n    if (_value) {\n      if (`${_value}` in optionsLockup) {\n        retainedSelectedOptions.current[`${_value}`] = optionsLockup[`${_value}`];\n      }\n    }\n  }, [optionsLockup, _value]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        setValue(null, null);\n        handleSearchChange('');\n        onClear?.();\n      }}\n    />\n  );\n\n  const _clearable = clearable && !!_value && !disabled && !readOnly;\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        __staticSelector=\"Select\"\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        readOnly={readOnly}\n        size={size}\n        attributes={attributes}\n        keepMounted={autoSelectOnBlur}\n        onOptionSubmit={(val) => {\n          onOptionSubmit?.(val as any);\n          const optionLockup = allowDeselect\n            ? `${optionsLockup[val].value}` === `${_value}`\n              ? null\n              : optionsLockup[val]\n            : optionsLockup[val];\n\n          const nextValue = optionLockup ? optionLockup.value : null;\n\n          nextValue !== _value && setValue(nextValue as any, optionLockup);\n          !controlled && handleSearchChange(nextValue != null ? optionLockup?.label || '' : '');\n          combobox.closeDropdown();\n        }}\n        {...comboboxProps}\n      >\n        <Combobox.Target\n          targetType={searchable ? 'input' : 'button'}\n          autoComplete={autoComplete}\n          withExpandedAttribute\n        >\n          <InputBase\n            id={_id}\n            __defaultRightSection={\n              <Combobox.Chevron\n                size={size}\n                error={error}\n                unstyled={unstyled}\n                color={chevronColor}\n              />\n            }\n            __clearSection={clearButton}\n            __clearable={_clearable}\n            __clearSectionMode={clearSectionMode}\n            rightSection={rightSection}\n            rightSectionPointerEvents={rightSectionPointerEvents || 'none'}\n            {...others}\n            size={size}\n            __staticSelector=\"Select\"\n            disabled={disabled}\n            readOnly={readOnly || !searchable}\n            value={search}\n            onChange={(event) => {\n              handleSearchChange(event.currentTarget.value);\n              combobox.openDropdown();\n              selectFirstOptionOnChange && combobox.selectFirstOption();\n            }}\n            onFocus={(event) => {\n              openOnFocus && !!searchable && combobox.openDropdown();\n              onFocus?.(event);\n            }}\n            onBlur={(event) => {\n              if (autoSelectOnBlur) {\n                combobox.clickSelectedOption();\n              }\n\n              !!searchable && combobox.closeDropdown();\n              const optionLockup =\n                _value != null &&\n                (`${_value}` in optionsLockup\n                  ? optionsLockup[`${_value}`]\n                  : retainedSelectedOptions.current[`${_value}`]);\n              handleSearchChange(optionLockup ? optionLockup.label || '' : '');\n              onBlur?.(event);\n            }}\n            onClick={(event) => {\n              searchable ? combobox.openDropdown() : combobox.toggleDropdown();\n              onClick?.(event);\n            }}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            unstyled={unstyled}\n            pointer={!searchable}\n            error={error}\n            attributes={attributes}\n          />\n        </Combobox.Target>\n        <OptionsDropdown\n          data={parsedData as any}\n          hidden={readOnly || disabled}\n          filter={filter as OptionsFilter<Primitive> | undefined}\n          search={search}\n          limit={limit}\n          hiddenWhenEmpty={!nothingFoundMessage}\n          withScrollArea={withScrollArea}\n          maxDropdownHeight={maxDropdownHeight}\n          filterOptions={!!searchable && selectedOption?.label !== search}\n          value={_value}\n          checkIconPosition={checkIconPosition}\n          withCheckIcon={withCheckIcon}\n          withAlignedLabels={withAlignedLabels}\n          nothingFoundMessage={nothingFoundMessage}\n          unstyled={unstyled}\n          labelId={others.label ? `${_id}-label` : undefined}\n          aria-label={others.label ? undefined : others['aria-label']}\n          renderOption={renderOption}\n          scrollAreaProps={scrollAreaProps}\n        />\n      </Combobox>\n      <Combobox.HiddenInput\n        value={_value}\n        name={name}\n        form={form}\n        disabled={disabled}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nSelect.displayName = '@mantine/core/Select';\n\nexport namespace Select {\n  export type Props<Value extends Primitive = string> = SelectProps<Value>;\n  export type StylesNames = SelectStylesNames;\n  export type Factory = SelectFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;AAuHA,MAAM,eAAe;CACnB,MAAM;CACN,eAAe;CACf,eAAe;CACf,mBAAmB;CACnB,aAAa;AACf;AAEA,MAAa,SAAS,gBAA+B,WAAW;CAC9D,MAAM,QAAQ,SAAS;EAAC;EAAS;EAAgB;CAAQ,GAAG,cAAc,MAAM;CAChF,MAAM,EACJ,YACA,QACA,UACA,MACA,gBACA,uBACA,iBACA,gBACA,SACA,QACA,SACA,UACA,MACA,OACA,cACA,2BACA,iCACA,gBACA,eACA,UACA,UACA,QACA,OACA,gBACA,mBACA,MACA,YACA,cACA,mBACA,eACA,mBACA,qBACA,MACA,MACA,aACA,oBACA,gBACA,eACA,OACA,2BACA,IACA,WACA,kBACA,kBACA,kBACA,cACA,SACA,cACA,iBACA,uBACA,gBACA,aACA,cACA,kBACA,aACA,YACA,GAAG,WACD;CAEJ,MAAM,aAAa,cAAc,sBAAsB,IAAI,GAAG,CAAC,IAAI,CAAC;CACpE,MAAM,0BAA0B,OAAgD,CAAC,CAAC;CAClF,MAAM,gBAAgB,cAAc,iBAAiB,UAAU,GAAG,CAAC,UAAU,CAAC;CAC9E,MAAM,MAAMA,QAAM,EAAE;CAEpB,MAAM,CAAC,QAAQ,UAAU,cAAc,gBAAgB;EACrD;EACA;EACA,YAAY;EACZ;CACF,CAAC;CAED,MAAM,iBACJ,UAAU,OACN,GAAG,YAAY,gBACb,cAAc,GAAG,YACjB,wBAAwB,QAAQ,GAAG,YACrC,KAAA;CACN,MAAM,yBAAyB,YAAY,cAAc;CAEzD,MAAM,CAAC,QAAQ,WAAW,oBAAoB,gBAAgB;EAC5D,OAAO;EACP,cAAc;EACd,YAAY,iBAAiB,eAAe,QAAQ;EACpD,UAAU;CACZ,CAAC;CAED,MAAM,WAAW,YAAY;EAC3B,QAAQ;EACR,eAAe;EACf,sBAAsB;GACpB,iBAAiB;GACjB,IAAI,iCACF,SAAS,kBAAkB;QAE3B,SAAS,0BAA0B,UAAU,EAAE,gBAAgB,KAAK,CAAC;EAEzE;EACA,uBAAuB;GACrB,kBAAkB;GAElB,WAAW,SAAS,qBAAqB,CAAC;EAC5C;CACF,CAAC;CAED,MAAM,sBAAsB,UAAkB;EAC5C,UAAU,KAAK;EACf,SAAS,oBAAoB;CAC/B;CAEA,MAAM,EAAE,oBAAoB,mBAAmB,qBAAoC;EACjF;EACA;EACA;CACF,CAAC;CAED,gBAAgB;EACd,IAAI,2BACF,SAAS,kBAAkB;CAE/B,GAAG,CAAC,2BAA2B,MAAM,CAAC;CAEtC,gBAAgB;EACd,IAAI,UAAU,MACZ,mBAAmB,EAAE;EAGvB,IACE,SAAS,QACT,mBACC,wBAAwB,UAAU,eAAe,SAChD,wBAAwB,UAAU,eAAe,QAEnD,mBAAmB,eAAe,KAAK;CAE3C,GAAG,CAAC,OAAO,cAAc,CAAC;CAE1B,gBAAgB;EACd,IAAI,CAAC,cAAc,CAAC,kBAClB,mBACE,UAAU,OACN,GAAG,YAAY,gBACb,cAAc,GAAG,WAAW,QAC5B,wBAAwB,QAAQ,GAAG,WAAW,SAAS,KACzD,EACN;CAEJ,GAAG,CAAC,eAAe,MAAM,CAAC;CAE1B,gBAAgB;EACd,IAAI;OACE,GAAG,YAAY,eACjB,wBAAwB,QAAQ,GAAG,YAAY,cAAc,GAAG;EAAA;CAGtE,GAAG,CAAC,eAAe,MAAM,CAAC;CAE1B,MAAM,cACJ,oBAAC,SAAS,aAAV;EACE,GAAI;EACJ,eAAe;GACb,SAAS,MAAM,IAAI;GACnB,mBAAmB,EAAE;GACrB,UAAU;EACZ;CACD,CAAA;CAGH,MAAM,aAAa,aAAa,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC;CAE1D,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,UAAD;EACE,OAAO;EACP,kBAAiB;EACjB,YAAY;EACZ,QAAQ;EACE;EACA;EACJ;EACM;EACZ,aAAa;EACb,iBAAiB,QAAQ;GACvB,iBAAiB,GAAU;GAC3B,MAAM,eAAe,gBACjB,GAAG,cAAc,KAAK,YAAY,GAAG,WACnC,OACA,cAAc,OAChB,cAAc;GAElB,MAAM,YAAY,eAAe,aAAa,QAAQ;GAEtD,cAAc,UAAU,SAAS,WAAkB,YAAY;GAC/D,CAAC,cAAc,mBAAmB,aAAa,OAAO,cAAc,SAAS,KAAK,EAAE;GACpF,SAAS,cAAc;EACzB;EACA,GAAI;YAxBN,CA0BE,oBAAC,SAAS,QAAV;GACE,YAAY,aAAa,UAAU;GACrB;GACd,uBAAA;aAEA,oBAAC,WAAD;IACE,IAAI;IACJ,uBACE,oBAAC,SAAS,SAAV;KACQ;KACC;KACG;KACV,OAAO;IACR,CAAA;IAEH,gBAAgB;IAChB,aAAa;IACb,oBAAoB;IACN;IACd,2BAA2B,6BAA6B;IACxD,GAAI;IACE;IACN,kBAAiB;IACP;IACV,UAAU,YAAY,CAAC;IACvB,OAAO;IACP,WAAW,UAAU;KACnB,mBAAmB,MAAM,cAAc,KAAK;KAC5C,SAAS,aAAa;KACtB,6BAA6B,SAAS,kBAAkB;IAC1D;IACA,UAAU,UAAU;KAClB,eAAiB,cAAc,SAAS,aAAa;KACrD,UAAU,KAAK;IACjB;IACA,SAAS,UAAU;KACjB,IAAI,kBACF,SAAS,oBAAoB;KAG/B,cAAgB,SAAS,cAAc;KACvC,MAAM,eACJ,UAAU,SACT,GAAG,YAAY,gBACZ,cAAc,GAAG,YACjB,wBAAwB,QAAQ,GAAG;KACzC,mBAAmB,eAAe,aAAa,SAAS,KAAK,EAAE;KAC/D,SAAS,KAAK;IAChB;IACA,UAAU,UAAU;KAClB,aAAa,SAAS,aAAa,IAAI,SAAS,eAAe;KAC/D,UAAU,KAAK;IACjB;IACA,YAAY;IACZ,QAAQ;IACE;IACV,SAAS,CAAC;IACH;IACK;GACb,CAAA;EACc,CAAA,GACjB,oBAAC,iBAAD;GACE,MAAM;GACN,QAAQ,YAAY;GACZ;GACA;GACD;GACP,iBAAiB,CAAC;GACF;GACG;GACnB,eAAe,CAAC,CAAC,cAAc,gBAAgB,UAAU;GACzD,OAAO;GACY;GACJ;GACI;GACE;GACX;GACV,SAAS,OAAO,QAAQ,GAAG,IAAI,UAAU,KAAA;GACzC,cAAY,OAAO,QAAQ,KAAA,IAAY,OAAO;GAChC;GACG;EAClB,CAAA,CACO;KACV,oBAAC,SAAS,aAAV;EACE,OAAO;EACD;EACA;EACI;EACV,GAAI;CACL,CAAA,CACD,EAAA,CAAA;AAEN,CAAC;AAED,OAAO,UAAU;CAAE,GAAG,UAAU;CAAS,GAAG,SAAS;AAAQ;AAC7D,OAAO,cAAc"}
+{"version":3,"file":"Select.mjs","names":["useId"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useId, usePrevious, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  Factory,\n  genericFactory,\n  MantineColor,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n  InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type SelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames;\n\nexport interface SelectProps<Value extends Primitive = string>\n  extends\n    BoxProps,\n    __BaseInputProps,\n    ComboboxLikeProps<Value>,\n    StylesApiProps<SelectFactory>,\n    ElementProps<'input', 'onChange' | 'size' | 'value' | 'defaultValue'> {\n  /** Controlled component value */\n  value?: Value | null;\n\n  /** Uncontrolled component default value */\n  defaultValue?: Value | null;\n\n  /** Called when value changes */\n  onChange?: (value: Value | null, option: ComboboxItem<Value>) => void;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Determines whether the select should be searchable @default false */\n  searchable?: boolean;\n\n  /** Displays check icon near the selected option label @default true */\n  withCheckIcon?: boolean;\n\n  /** Aligns unchecked labels with the checked one @default false */\n  withAlignedLabels?: boolean;\n\n  /** Position of the check icon relative to the option label @default 'left' */\n  checkIconPosition?: 'left' | 'right';\n\n  /** Message displayed when no options match the search query or when there is no data */\n  nothingFoundMessage?: React.ReactNode;\n\n  /** Controlled search value */\n  searchValue?: string;\n\n  /** Default search value */\n  defaultSearchValue?: string;\n\n  /** Called when search changes */\n  onSearchChange?: (value: string) => void;\n\n  /** Allows deselecting the selected option by clicking it @default true */\n  allowDeselect?: boolean;\n\n  /** Displays clear button in the right section when component has value @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** A function to render content of the option, replaces the default content of the option */\n  renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem<Value>>) => React.ReactNode;\n\n  /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Controls color of the default chevron, by default depends on the color scheme */\n  chevronColor?: MantineColor;\n\n  /** Automatically selects the highlighted option when input loses focus @default false */\n  autoSelectOnBlur?: boolean;\n\n  /** Opens dropdown when input receives focus (requires searchable={true}) @default true */\n  openOnFocus?: boolean;\n}\n\nexport type SelectFactory = Factory<{\n  props: SelectProps;\n  ref: HTMLInputElement;\n  stylesNames: SelectStylesNames;\n  variant: InputVariant;\n  signature: <Value extends Primitive = string>(props: SelectProps<Value>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  size: 'sm',\n  withCheckIcon: true,\n  allowDeselect: true,\n  checkIconPosition: 'left',\n  openOnFocus: true,\n} satisfies Partial<SelectProps>;\n\nexport const Select = genericFactory<SelectFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'Select'], defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownClose,\n    onDropdownOpen,\n    onFocus,\n    onBlur,\n    onClick,\n    onChange,\n    data,\n    value,\n    defaultValue,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    readOnly,\n    disabled,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    size,\n    searchable,\n    rightSection,\n    checkIconPosition,\n    withCheckIcon,\n    withAlignedLabels,\n    nothingFoundMessage,\n    name,\n    form,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    allowDeselect,\n    error,\n    rightSectionPointerEvents,\n    id,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    hiddenInputProps,\n    renderOption,\n    onClear,\n    autoComplete,\n    scrollAreaProps,\n    __defaultRightSection,\n    __clearSection,\n    __clearable,\n    chevronColor,\n    autoSelectOnBlur,\n    openOnFocus,\n    attributes,\n    ...others\n  } = props;\n\n  const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n  const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n  const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\n  const _id = useId(id);\n\n  const [_value, setValue, controlled] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: null,\n    onChange,\n  });\n\n  const selectedOption =\n    _value != null\n      ? `${_value}` in optionsLockup\n        ? optionsLockup[`${_value}`]\n        : retainedSelectedOptions.current[`${_value}`]\n      : undefined;\n  const previousSelectedOption = usePrevious(selectedOption);\n\n  const [search, setSearch, searchControlled] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: selectedOption ? selectedOption.label : '',\n    onChange: onSearchChange,\n  });\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      } else {\n        combobox.updateSelectedOptionIndex('active', { scrollIntoView: true });\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      // Required for autoSelectOnBlur to work correctly\n      setTimeout(combobox.resetSelectedOption, 0);\n    },\n  });\n\n  const handleSearchChange = (value: string) => {\n    setSearch(value);\n    combobox.resetSelectedOption();\n  };\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<SelectFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, search]);\n\n  useEffect(() => {\n    if (value === null) {\n      handleSearchChange('');\n    }\n\n    if (\n      value != null &&\n      selectedOption &&\n      (previousSelectedOption?.value !== selectedOption.value ||\n        previousSelectedOption?.label !== selectedOption.label)\n    ) {\n      handleSearchChange(selectedOption.label);\n    }\n  }, [value, selectedOption]);\n\n  useEffect(() => {\n    if (!controlled && !searchControlled) {\n      handleSearchChange(\n        _value != null\n          ? `${_value}` in optionsLockup\n            ? optionsLockup[`${_value}`]?.label\n            : retainedSelectedOptions.current[`${_value}`]?.label || ''\n          : ''\n      );\n    }\n  }, [optionsLockup, _value]);\n\n  useEffect(() => {\n    if (_value) {\n      if (`${_value}` in optionsLockup) {\n        retainedSelectedOptions.current[`${_value}`] = optionsLockup[`${_value}`];\n      }\n    }\n  }, [optionsLockup, _value]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        setValue(null, null);\n        handleSearchChange('');\n        onClear?.();\n      }}\n    />\n  );\n\n  const _clearable = clearable && _value != null && !disabled && !readOnly;\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        __staticSelector=\"Select\"\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        readOnly={readOnly}\n        size={size}\n        attributes={attributes}\n        keepMounted={autoSelectOnBlur}\n        onOptionSubmit={(val) => {\n          onOptionSubmit?.(val as any);\n          const optionLockup = allowDeselect\n            ? `${optionsLockup[val].value}` === `${_value}`\n              ? null\n              : optionsLockup[val]\n            : optionsLockup[val];\n\n          const nextValue = optionLockup ? optionLockup.value : null;\n\n          nextValue !== _value && setValue(nextValue as any, optionLockup);\n          !controlled && handleSearchChange(nextValue != null ? optionLockup?.label || '' : '');\n          combobox.closeDropdown();\n        }}\n        {...comboboxProps}\n      >\n        <Combobox.Target\n          targetType={searchable ? 'input' : 'button'}\n          autoComplete={autoComplete}\n          withExpandedAttribute\n        >\n          <InputBase\n            id={_id}\n            __defaultRightSection={\n              <Combobox.Chevron\n                size={size}\n                error={error}\n                unstyled={unstyled}\n                color={chevronColor}\n              />\n            }\n            __clearSection={clearButton}\n            __clearable={_clearable}\n            __clearSectionMode={clearSectionMode}\n            rightSection={rightSection}\n            rightSectionPointerEvents={rightSectionPointerEvents || 'none'}\n            {...others}\n            size={size}\n            __staticSelector=\"Select\"\n            disabled={disabled}\n            readOnly={readOnly || !searchable}\n            value={search}\n            onChange={(event) => {\n              handleSearchChange(event.currentTarget.value);\n              combobox.openDropdown();\n              selectFirstOptionOnChange && combobox.selectFirstOption();\n            }}\n            onFocus={(event) => {\n              openOnFocus && !!searchable && combobox.openDropdown();\n              onFocus?.(event);\n            }}\n            onBlur={(event) => {\n              if (autoSelectOnBlur) {\n                combobox.clickSelectedOption();\n              }\n\n              !!searchable && combobox.closeDropdown();\n              const optionLockup =\n                _value != null &&\n                (`${_value}` in optionsLockup\n                  ? optionsLockup[`${_value}`]\n                  : retainedSelectedOptions.current[`${_value}`]);\n              handleSearchChange(optionLockup ? optionLockup.label || '' : '');\n              onBlur?.(event);\n            }}\n            onClick={(event) => {\n              searchable ? combobox.openDropdown() : combobox.toggleDropdown();\n              onClick?.(event);\n            }}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            unstyled={unstyled}\n            pointer={!searchable}\n            error={error}\n            attributes={attributes}\n          />\n        </Combobox.Target>\n        <OptionsDropdown\n          data={parsedData as any}\n          hidden={readOnly || disabled}\n          filter={filter as OptionsFilter<Primitive> | undefined}\n          search={search}\n          limit={limit}\n          hiddenWhenEmpty={!nothingFoundMessage}\n          withScrollArea={withScrollArea}\n          maxDropdownHeight={maxDropdownHeight}\n          filterOptions={!!searchable && selectedOption?.label !== search}\n          value={_value}\n          checkIconPosition={checkIconPosition}\n          withCheckIcon={withCheckIcon}\n          withAlignedLabels={withAlignedLabels}\n          nothingFoundMessage={nothingFoundMessage}\n          unstyled={unstyled}\n          labelId={others.label ? `${_id}-label` : undefined}\n          aria-label={others.label ? undefined : others['aria-label']}\n          renderOption={renderOption}\n          scrollAreaProps={scrollAreaProps}\n        />\n      </Combobox>\n      <Combobox.HiddenInput\n        value={_value}\n        name={name}\n        form={form}\n        disabled={disabled}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nSelect.displayName = '@mantine/core/Select';\n\nexport namespace Select {\n  export type Props<Value extends Primitive = string> = SelectProps<Value>;\n  export type StylesNames = SelectStylesNames;\n  export type Factory = SelectFactory;\n}\n"],"mappings":"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"}

package/lib/components/Drawer/DrawerRoot.d.ts

@@ -21,13 +21,11 @@ export type DrawerRootFactory = Factory<{
     ref: HTMLDivElement;
     stylesNames: DrawerRootStylesNames;
     vars: DrawerRootCssVariables;
-    compound: true;
 }>;
 export declare const DrawerRoot: import("../..").MantineComponent<{
     props: DrawerRootProps;
     ref: HTMLDivElement;
     stylesNames: DrawerRootStylesNames;
     vars: DrawerRootCssVariables;
-    compound: true;
 }>;
 export {};

package/lib/components/Menu/MenuSub/MenuSub.d.ts

@@ -1,3 +1,4 @@
+import { type SafePolygonOptions } from '@floating-ui/react';
 import { ExtendComponent, Factory } from '../../../core';
 import { FloatingAxesOffsets, FloatingPosition } from '../../../utils/Floating';
 import { __PopoverProps } from '../../Popover';
@@ -20,6 +21,8 @@ export interface MenuSubProps extends __PopoverProps {
     offset?: number | FloatingAxesOffsets;
     /** Props passed down to the `Transition` component that used to animate dropdown presence, use to configure duration and animation type @default { duration: 0 } */
     transitionProps?: TransitionOverride;
+    /** Determines whether submenu stays open while the cursor moves toward its dropdown. Pass an object to configure safe polygon behavior. @default true */
+    safeAreaPolygon?: boolean | SafePolygonOptions;
 }
 export declare function MenuSub(_props: MenuSubProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace MenuSub {

package/lib/components/Modal/ModalRoot.d.ts

@@ -25,12 +25,10 @@ export type ModalRootFactory = Factory<{
     ref: HTMLDivElement;
     stylesNames: ModalRootStylesNames;
     vars: ModalRootCssVariables;
-    compound: true;
 }>;
 export declare const ModalRoot: import("../..").MantineComponent<{
     props: ModalRootProps;
     ref: HTMLDivElement;
     stylesNames: ModalRootStylesNames;
     vars: ModalRootCssVariables;
-    compound: true;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "9.2.1",
+  "version": "9.2.2",
   "description": "React components library focused on usability, accessibility and developer experience",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "directory": "packages/@mantine/core"
   },
   "peerDependencies": {
-    "@mantine/hooks": "9.2.1",
+    "@mantine/hooks": "9.2.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },

package/styles/Input.css

@@ -149,6 +149,12 @@
     --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
 }
 
+  .m_6c018570[dir='ltr'] {
+    --input-text-align: left;
+    --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
+    --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
+  }
+
 .m_8fb7ebe7 {
   -webkit-tap-highlight-color: transparent;
   appearance: none;

package/styles/Input.layer.css

@@ -149,6 +149,12 @@
     --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
 }
 
+  .m_6c018570[dir='ltr'] {
+    --input-text-align: left;
+    --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
+    --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
+  }
+
 .m_8fb7ebe7 {
   -webkit-tap-highlight-color: transparent;
   appearance: none;

package/styles/Pill.css

@@ -98,13 +98,11 @@
 
 .m_1e0e6180 {
   cursor: inherit;
+  display: block;
   overflow: hidden;
-  text-overflow: ellipsis;
-  display: flex;
-  align-items: center;
   height: 100%;
-  text-box-trim: trim-both;
-  text-box-edge: cap alphabetic;
+  line-height: var(--pill-height);
+  text-overflow: ellipsis;
 }
 
 .m_ae386778 {

package/styles/Pill.layer.css

@@ -98,13 +98,11 @@
 
 .m_1e0e6180 {
   cursor: inherit;
+  display: block;
   overflow: hidden;
-  text-overflow: ellipsis;
-  display: flex;
-  align-items: center;
   height: 100%;
-  text-box-trim: trim-both;
-  text-box-edge: cap alphabetic;
+  line-height: var(--pill-height);
+  text-overflow: ellipsis;
 }
 
 .m_ae386778 {

package/styles.css

@@ -1496,6 +1496,12 @@ fieldset:disabled .mantine-active:active {
     --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
 }
 
+  .m_6c018570[dir='ltr'] {
+    --input-text-align: left;
+    --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
+    --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
+  }
+
 .m_8fb7ebe7 {
   -webkit-tap-highlight-color: transparent;
   appearance: none;
@@ -4943,13 +4949,11 @@ fieldset:disabled .m_8ee546b8,
 
 .m_1e0e6180 {
   cursor: inherit;
+  display: block;
   overflow: hidden;
-  text-overflow: ellipsis;
-  display: flex;
-  align-items: center;
   height: 100%;
-  text-box-trim: trim-both;
-  text-box-edge: cap alphabetic;
+  line-height: var(--pill-height);
+  text-overflow: ellipsis;
 }
 
 .m_ae386778 {

package/styles.layer.css

@@ -1496,6 +1496,12 @@ fieldset:disabled .mantine-active:active {
     --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
 }
 
+  .m_6c018570[dir='ltr'] {
+    --input-text-align: left;
+    --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
+    --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
+  }
+
 .m_8fb7ebe7 {
   -webkit-tap-highlight-color: transparent;
   appearance: none;
@@ -4943,13 +4949,11 @@ fieldset:disabled .m_8ee546b8,
 
 .m_1e0e6180 {
   cursor: inherit;
+  display: block;
   overflow: hidden;
-  text-overflow: ellipsis;
-  display: flex;
-  align-items: center;
   height: 100%;
-  text-box-trim: trim-both;
-  text-box-edge: cap alphabetic;
+  line-height: var(--pill-height);
+  text-overflow: ellipsis;
 }
 
 .m_ae386778 {