@mantine/core 9.2.1 → 9.3.0

package/esm/components/Combobox/Combobox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.mjs","names":["classes"],"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import {\n  createVarsResolver,\n  ExtendComponent,\n  Factory,\n  getFontSize,\n  getSize,\n  MantineSize,\n  MantineThemeComponent,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { __PopoverProps, Popover } from '../Popover';\nimport { ComboboxProvider } from './Combobox.context';\nimport { ComboboxChevron, ComboboxChevronProps } from './ComboboxChevron/ComboboxChevron';\nimport {\n  ComboboxClearButton,\n  ComboboxClearButtonProps,\n} from './ComboboxClearButton/ComboboxClearButton';\nimport { ComboboxDropdown, ComboboxDropdownProps } from './ComboboxDropdown/ComboboxDropdown';\nimport {\n  ComboboxDropdownTarget,\n  ComboboxDropdownTargetProps,\n} from './ComboboxDropdownTarget/ComboboxDropdownTarget';\nimport { ComboboxEmpty, ComboboxEmptyProps } from './ComboboxEmpty/ComboboxEmpty';\nimport {\n  ComboboxEventsTarget,\n  ComboboxEventsTargetProps,\n} from './ComboboxEventsTarget/ComboboxEventsTarget';\nimport { ComboboxFooter, ComboboxFooterProps } from './ComboboxFooter/ComboboxFooter';\nimport { ComboboxGroup, ComboboxGroupProps } from './ComboboxGroup/ComboboxGroup';\nimport { ComboboxHeader, ComboboxHeaderProps } from './ComboboxHeader/ComboboxHeader';\nimport {\n  ComboboxHiddenInput,\n  ComboboxHiddenInputProps,\n} from './ComboboxHiddenInput/ComboboxHiddenInput';\nimport { ComboboxOption, ComboboxOptionProps } from './ComboboxOption/ComboboxOption';\nimport { ComboboxOptions, ComboboxOptionsProps } from './ComboboxOptions/ComboboxOptions';\nimport { ComboboxSearch, ComboboxSearchProps } from './ComboboxSearch/ComboboxSearch';\nimport { ComboboxTarget, ComboboxTargetProps } from './ComboboxTarget/ComboboxTarget';\nimport { ComboboxStore, useCombobox } from './use-combobox/use-combobox';\nimport classes from './Combobox.module.css';\n\nexport type ComboboxStylesNames =\n  | 'options'\n  | 'dropdown'\n  | 'option'\n  | 'search'\n  | 'empty'\n  | 'footer'\n  | 'header'\n  | 'group'\n  | 'groupLabel';\n\nexport type ComboboxCSSVariables = {\n  options: '--combobox-option-fz' | '--combobox-option-padding';\n  dropdown: '--combobox-padding' | '--combobox-option-fz' | '--combobox-option-padding';\n};\n\nexport interface ComboboxProps extends __PopoverProps, StylesApiProps<ComboboxFactory> {\n  __staticSelector?: string;\n\n  /** Combobox content */\n  children?: React.ReactNode;\n\n  /** Combobox store, can be used to control combobox state */\n  store?: ComboboxStore;\n\n  /** Called when item is selected with the `Enter` key or by clicking it */\n  onOptionSubmit?: (value: string, optionProps: ComboboxOptionProps) => void;\n\n  /** Controls items `font-size` and `padding` @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Controls `padding` of the dropdown @default 4 */\n  dropdownPadding?: React.CSSProperties['padding'];\n\n  /** Determines whether selection should be reset when option is hovered @default false */\n  resetSelectionOnOptionHover?: boolean;\n\n  /** Determines whether the `Combobox` value can be changed */\n  readOnly?: boolean;\n}\n\nexport type ComboboxFactory = Factory<{\n  props: ComboboxProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxStylesNames;\n  vars: ComboboxCSSVariables;\n  staticComponents: {\n    Target: typeof ComboboxTarget;\n    Dropdown: typeof ComboboxDropdown;\n    Options: typeof ComboboxOptions;\n    Option: typeof ComboboxOption;\n    Search: typeof ComboboxSearch;\n    Empty: typeof ComboboxEmpty;\n    Chevron: typeof ComboboxChevron;\n    Footer: typeof ComboboxFooter;\n    Header: typeof ComboboxHeader;\n    EventsTarget: typeof ComboboxEventsTarget;\n    DropdownTarget: typeof ComboboxDropdownTarget;\n    Group: typeof ComboboxGroup;\n    ClearButton: typeof ComboboxClearButton;\n    HiddenInput: typeof ComboboxHiddenInput;\n  };\n}>;\n\nconst defaultProps = {\n  keepMounted: true,\n  withinPortal: true,\n  resetSelectionOnOptionHover: false,\n  width: 'target',\n  transitionProps: { transition: 'fade', duration: 0 },\n  size: 'sm',\n} satisfies Partial<ComboboxProps>;\n\nconst varsResolver = createVarsResolver<ComboboxFactory>((_, { size, dropdownPadding }) => ({\n  options: {\n    '--combobox-option-fz': getFontSize(size),\n    '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n  },\n\n  dropdown: {\n    '--combobox-padding': dropdownPadding === undefined ? undefined : rem(dropdownPadding),\n    '--combobox-option-fz': getFontSize(size),\n    '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n  },\n}));\n\nexport const Combobox = (_props: ComboboxProps) => {\n  const props = useProps('Combobox', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    children,\n    store: controlledStore,\n    vars,\n    onOptionSubmit,\n    onClose,\n    size,\n    dropdownPadding,\n    resetSelectionOnOptionHover,\n    __staticSelector,\n    readOnly,\n    attributes,\n    ...others\n  } = props;\n\n  const uncontrolledStore = useCombobox();\n  const store = controlledStore || uncontrolledStore;\n\n  const getStyles = useStyles<ComboboxFactory>({\n    name: __staticSelector || 'Combobox',\n    classes,\n    props,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const onDropdownClose = () => {\n    onClose?.();\n    store.closeDropdown();\n  };\n\n  return (\n    <ComboboxProvider\n      value={{\n        getStyles,\n        store,\n        onOptionSubmit,\n        size,\n        resetSelectionOnOptionHover,\n        readOnly,\n      }}\n    >\n      <Popover\n        opened={store.dropdownOpened}\n        preventPositionChangeWhenVisible={false}\n        {...others}\n        onChange={(_opened) => !_opened && onDropdownClose()}\n        withRoles={false}\n        unstyled={unstyled}\n      >\n        {children}\n      </Popover>\n    </ComboboxProvider>\n  );\n};\n\nconst extendCombobox = (c: ExtendComponent<ComboboxFactory>): MantineThemeComponent => c;\n\nCombobox.extend = extendCombobox;\nCombobox.classes = classes;\nCombobox.varsResolver = varsResolver;\nCombobox.displayName = '@mantine/core/Combobox';\nCombobox.Target = ComboboxTarget;\nCombobox.Dropdown = ComboboxDropdown;\nCombobox.Options = ComboboxOptions;\nCombobox.Option = ComboboxOption;\nCombobox.Search = ComboboxSearch;\nCombobox.Empty = ComboboxEmpty;\nCombobox.Chevron = ComboboxChevron;\nCombobox.Footer = ComboboxFooter;\nCombobox.Header = ComboboxHeader;\nCombobox.EventsTarget = ComboboxEventsTarget;\nCombobox.DropdownTarget = ComboboxDropdownTarget;\nCombobox.Group = ComboboxGroup;\nCombobox.ClearButton = ComboboxClearButton;\nCombobox.HiddenInput = ComboboxHiddenInput;\n\nexport namespace Combobox {\n  export type Props = ComboboxProps;\n  export type StylesNames = ComboboxStylesNames;\n  export type Factory = ComboboxFactory;\n\n  export namespace Dropdown {\n    export type Props = ComboboxDropdownProps;\n  }\n\n  export namespace Options {\n    export type Props = ComboboxOptionsProps;\n  }\n\n  export namespace Option {\n    export type Props = ComboboxOptionProps;\n  }\n\n  export namespace Target {\n    export type Props = ComboboxTargetProps;\n  }\n\n  export namespace Chevron {\n    export type Props = ComboboxChevronProps;\n  }\n\n  export namespace Empty {\n    export type Props = ComboboxEmptyProps;\n  }\n\n  export namespace Search {\n    export type Props = ComboboxSearchProps;\n  }\n\n  export namespace Footer {\n    export type Props = ComboboxFooterProps;\n  }\n\n  export namespace Header {\n    export type Props = ComboboxHeaderProps;\n  }\n\n  export namespace DropdownTarget {\n    export type Props = ComboboxDropdownTargetProps;\n  }\n\n  export namespace EventsTarget {\n    export type Props = ComboboxEventsTargetProps;\n  }\n\n  export namespace Group {\n    export type Props = ComboboxGroupProps;\n  }\n\n  export namespace ClearButton {\n    export type Props = ComboboxClearButtonProps;\n  }\n\n  export namespace HiddenInput {\n    export type Props = ComboboxHiddenInputProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA4GA,MAAM,eAAe;CACnB,aAAa;CACb,cAAc;CACd,6BAA6B;CAC7B,OAAO;CACP,iBAAiB;EAAE,YAAY;EAAQ,UAAU;CAAE;CACnD,MAAM;AACR;AAEA,MAAM,eAAe,oBAAqC,GAAG,EAAE,MAAM,uBAAuB;CAC1F,SAAS;EACP,wBAAwB,YAAY,IAAI;EACxC,6BAA6B,QAAQ,MAAM,yBAAyB;CACtE;CAEA,UAAU;EACR,sBAAsB,oBAAoB,KAAA,IAAY,KAAA,IAAY,IAAI,eAAe;EACrF,wBAAwB,YAAY,IAAI;EACxC,6BAA6B,QAAQ,MAAM,yBAAyB;CACtE;AACF,EAAE;AAEF,MAAa,YAAY,WAA0B;CACjD,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,QACA,UACA,UACA,OAAO,iBACP,MACA,gBACA,SACA,MACA,iBACA,6BACA,kBACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,oBAAoB,YAAY;CACtC,MAAM,QAAQ,mBAAmB;CAEjC,MAAM,YAAY,UAA2B;EAC3C,MAAM,oBAAoB;EAC1B,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,wBAAwB;EAC5B,UAAU;EACV,MAAM,cAAc;CACtB;CAEA,OACE,oBAAC,kBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,oBAAC,SAAD;GACE,QAAQ,MAAM;GACd,kCAAkC;GAClC,GAAI;GACJ,WAAW,YAAY,CAAC,WAAW,gBAAgB;GACnD,WAAW;GACD;GAET;EACM,CAAA;CACO,CAAA;AAEtB;AAEA,MAAM,kBAAkB,MAA+D;AAEvF,SAAS,SAAS;AAClB,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,SAAS;AAClB,SAAS,WAAW;AACpB,SAAS,UAAU;AACnB,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,QAAQ;AACjB,SAAS,UAAU;AACnB,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,QAAQ;AACjB,SAAS,cAAc;AACvB,SAAS,cAAc"}
+{"version":3,"file":"Combobox.mjs","names":["classes"],"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import {\n  createVarsResolver,\n  ExtendComponent,\n  Factory,\n  getFontSize,\n  getSize,\n  MantineSize,\n  MantineThemeComponent,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { __PopoverProps, Popover } from '../Popover';\nimport { PopoverMiddlewares } from '../Popover/Popover.types';\nimport { ComboboxProvider } from './Combobox.context';\nimport { ComboboxChevron, ComboboxChevronProps } from './ComboboxChevron/ComboboxChevron';\nimport {\n  ComboboxClearButton,\n  ComboboxClearButtonProps,\n} from './ComboboxClearButton/ComboboxClearButton';\nimport { ComboboxDropdown, ComboboxDropdownProps } from './ComboboxDropdown/ComboboxDropdown';\nimport {\n  ComboboxDropdownTarget,\n  ComboboxDropdownTargetProps,\n} from './ComboboxDropdownTarget/ComboboxDropdownTarget';\nimport { ComboboxEmpty, ComboboxEmptyProps } from './ComboboxEmpty/ComboboxEmpty';\nimport {\n  ComboboxEventsTarget,\n  ComboboxEventsTargetProps,\n} from './ComboboxEventsTarget/ComboboxEventsTarget';\nimport { ComboboxFooter, ComboboxFooterProps } from './ComboboxFooter/ComboboxFooter';\nimport { ComboboxGroup, ComboboxGroupProps } from './ComboboxGroup/ComboboxGroup';\nimport { ComboboxHeader, ComboboxHeaderProps } from './ComboboxHeader/ComboboxHeader';\nimport {\n  ComboboxHiddenInput,\n  ComboboxHiddenInputProps,\n} from './ComboboxHiddenInput/ComboboxHiddenInput';\nimport { ComboboxOption, ComboboxOptionProps } from './ComboboxOption/ComboboxOption';\nimport { ComboboxOptions, ComboboxOptionsProps } from './ComboboxOptions/ComboboxOptions';\nimport { ComboboxSearch, ComboboxSearchProps } from './ComboboxSearch/ComboboxSearch';\nimport { ComboboxTarget, ComboboxTargetProps } from './ComboboxTarget/ComboboxTarget';\nimport { ComboboxStore, useCombobox } from './use-combobox/use-combobox';\nimport classes from './Combobox.module.css';\n\nexport type ComboboxStylesNames =\n  | 'options'\n  | 'dropdown'\n  | 'option'\n  | 'search'\n  | 'empty'\n  | 'footer'\n  | 'header'\n  | 'group'\n  | 'groupLabel';\n\nexport type ComboboxCSSVariables = {\n  options: '--combobox-option-fz' | '--combobox-option-padding';\n  dropdown: '--combobox-padding' | '--combobox-option-fz' | '--combobox-option-padding';\n};\n\nexport interface ComboboxProps extends __PopoverProps, StylesApiProps<ComboboxFactory> {\n  __staticSelector?: string;\n\n  /** Combobox content */\n  children?: React.ReactNode;\n\n  /** Combobox store, can be used to control combobox state */\n  store?: ComboboxStore;\n\n  /** Called when item is selected with the `Enter` key or by clicking it */\n  onOptionSubmit?: (value: string, optionProps: ComboboxOptionProps) => void;\n\n  /** Controls items `font-size` and `padding` @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Controls `padding` of the dropdown @default 4 */\n  dropdownPadding?: React.CSSProperties['padding'];\n\n  /** Determines whether selection should be reset when option is hovered @default false */\n  resetSelectionOnOptionHover?: boolean;\n\n  /** Determines whether the `Combobox` value can be changed */\n  readOnly?: boolean;\n\n  /** If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware. */\n  floatingHeight?: 'viewport';\n}\n\nexport type ComboboxFactory = Factory<{\n  props: ComboboxProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxStylesNames;\n  vars: ComboboxCSSVariables;\n  staticComponents: {\n    Target: typeof ComboboxTarget;\n    Dropdown: typeof ComboboxDropdown;\n    Options: typeof ComboboxOptions;\n    Option: typeof ComboboxOption;\n    Search: typeof ComboboxSearch;\n    Empty: typeof ComboboxEmpty;\n    Chevron: typeof ComboboxChevron;\n    Footer: typeof ComboboxFooter;\n    Header: typeof ComboboxHeader;\n    EventsTarget: typeof ComboboxEventsTarget;\n    DropdownTarget: typeof ComboboxDropdownTarget;\n    Group: typeof ComboboxGroup;\n    ClearButton: typeof ComboboxClearButton;\n    HiddenInput: typeof ComboboxHiddenInput;\n  };\n}>;\n\nconst defaultProps = {\n  keepMounted: true,\n  withinPortal: true,\n  resetSelectionOnOptionHover: false,\n  width: 'target',\n  transitionProps: { transition: 'fade', duration: 0 },\n  size: 'sm',\n} satisfies Partial<ComboboxProps>;\n\nconst varsResolver = createVarsResolver<ComboboxFactory>((_, { size, dropdownPadding }) => ({\n  options: {\n    '--combobox-option-fz': getFontSize(size),\n    '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n  },\n\n  dropdown: {\n    '--combobox-padding': dropdownPadding === undefined ? undefined : rem(dropdownPadding),\n    '--combobox-option-fz': getFontSize(size),\n    '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n  },\n}));\n\nexport const Combobox = (_props: ComboboxProps) => {\n  const props = useProps('Combobox', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    children,\n    store: controlledStore,\n    vars,\n    onOptionSubmit,\n    onClose,\n    size,\n    dropdownPadding,\n    resetSelectionOnOptionHover,\n    __staticSelector,\n    readOnly,\n    attributes,\n    floatingHeight,\n    middlewares,\n    ...others\n  } = props;\n\n  const resolvedMiddlewares: PopoverMiddlewares | undefined =\n    floatingHeight === 'viewport'\n      ? {\n          ...middlewares,\n          flip: false,\n          size: {\n            ...(typeof middlewares?.size === 'object' ? middlewares.size : {}),\n            padding:\n              typeof middlewares?.size === 'object' && middlewares.size.padding !== undefined\n                ? middlewares.size.padding\n                : 10,\n            apply: ({ availableHeight, availableWidth, elements, ...rest }) => {\n              elements.floating.style.setProperty(\n                '--combobox-floating-max-height',\n                `${availableHeight}px`\n              );\n              const userSize = middlewares?.size;\n              if (typeof userSize === 'object' && userSize.apply) {\n                userSize.apply({ availableHeight, availableWidth, elements, ...rest });\n              } else if (userSize) {\n                Object.assign(elements.floating.style, {\n                  maxWidth: `${availableWidth}px`,\n                  maxHeight: `${availableHeight}px`,\n                });\n              }\n            },\n          },\n        }\n      : middlewares;\n\n  const uncontrolledStore = useCombobox();\n  const store = controlledStore || uncontrolledStore;\n\n  const getStyles = useStyles<ComboboxFactory>({\n    name: __staticSelector || 'Combobox',\n    classes,\n    props,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const onDropdownClose = () => {\n    onClose?.();\n    store.closeDropdown();\n  };\n\n  return (\n    <ComboboxProvider\n      value={{\n        getStyles,\n        store,\n        onOptionSubmit,\n        size,\n        resetSelectionOnOptionHover,\n        readOnly,\n        floatingHeight,\n      }}\n    >\n      <Popover\n        opened={store.dropdownOpened}\n        {...others}\n        middlewares={resolvedMiddlewares}\n        onChange={(_opened) => !_opened && onDropdownClose()}\n        withRoles={false}\n        unstyled={unstyled}\n      >\n        {children}\n      </Popover>\n    </ComboboxProvider>\n  );\n};\n\nconst extendCombobox = (c: ExtendComponent<ComboboxFactory>): MantineThemeComponent => c;\n\nCombobox.extend = extendCombobox;\nCombobox.classes = classes;\nCombobox.varsResolver = varsResolver;\nCombobox.displayName = '@mantine/core/Combobox';\nCombobox.Target = ComboboxTarget;\nCombobox.Dropdown = ComboboxDropdown;\nCombobox.Options = ComboboxOptions;\nCombobox.Option = ComboboxOption;\nCombobox.Search = ComboboxSearch;\nCombobox.Empty = ComboboxEmpty;\nCombobox.Chevron = ComboboxChevron;\nCombobox.Footer = ComboboxFooter;\nCombobox.Header = ComboboxHeader;\nCombobox.EventsTarget = ComboboxEventsTarget;\nCombobox.DropdownTarget = ComboboxDropdownTarget;\nCombobox.Group = ComboboxGroup;\nCombobox.ClearButton = ComboboxClearButton;\nCombobox.HiddenInput = ComboboxHiddenInput;\n\nexport namespace Combobox {\n  export type Props = ComboboxProps;\n  export type StylesNames = ComboboxStylesNames;\n  export type Factory = ComboboxFactory;\n\n  export namespace Dropdown {\n    export type Props = ComboboxDropdownProps;\n  }\n\n  export namespace Options {\n    export type Props = ComboboxOptionsProps;\n  }\n\n  export namespace Option {\n    export type Props = ComboboxOptionProps;\n  }\n\n  export namespace Target {\n    export type Props = ComboboxTargetProps;\n  }\n\n  export namespace Chevron {\n    export type Props = ComboboxChevronProps;\n  }\n\n  export namespace Empty {\n    export type Props = ComboboxEmptyProps;\n  }\n\n  export namespace Search {\n    export type Props = ComboboxSearchProps;\n  }\n\n  export namespace Footer {\n    export type Props = ComboboxFooterProps;\n  }\n\n  export namespace Header {\n    export type Props = ComboboxHeaderProps;\n  }\n\n  export namespace DropdownTarget {\n    export type Props = ComboboxDropdownTargetProps;\n  }\n\n  export namespace EventsTarget {\n    export type Props = ComboboxEventsTargetProps;\n  }\n\n  export namespace Group {\n    export type Props = ComboboxGroupProps;\n  }\n\n  export namespace ClearButton {\n    export type Props = ComboboxClearButtonProps;\n  }\n\n  export namespace HiddenInput {\n    export type Props = ComboboxHiddenInputProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgHA,MAAM,eAAe;CACnB,aAAa;CACb,cAAc;CACd,6BAA6B;CAC7B,OAAO;CACP,iBAAiB;EAAE,YAAY;EAAQ,UAAU;CAAE;CACnD,MAAM;AACR;AAEA,MAAM,eAAe,oBAAqC,GAAG,EAAE,MAAM,uBAAuB;CAC1F,SAAS;EACP,wBAAwB,YAAY,IAAI;EACxC,6BAA6B,QAAQ,MAAM,yBAAyB;CACtE;CAEA,UAAU;EACR,sBAAsB,oBAAoB,KAAA,IAAY,KAAA,IAAY,IAAI,eAAe;EACrF,wBAAwB,YAAY,IAAI;EACxC,6BAA6B,QAAQ,MAAM,yBAAyB;CACtE;AACF,EAAE;AAEF,MAAa,YAAY,WAA0B;CACjD,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,QACA,UACA,UACA,OAAO,iBACP,MACA,gBACA,SACA,MACA,iBACA,6BACA,kBACA,UACA,YACA,gBACA,aACA,GAAG,WACD;CAEJ,MAAM,sBACJ,mBAAmB,aACf;EACE,GAAG;EACH,MAAM;EACN,MAAM;GACJ,GAAI,OAAO,aAAa,SAAS,WAAW,YAAY,OAAO,CAAC;GAChE,SACE,OAAO,aAAa,SAAS,YAAY,YAAY,KAAK,YAAY,KAAA,IAClE,YAAY,KAAK,UACjB;GACN,QAAQ,EAAE,iBAAiB,gBAAgB,UAAU,GAAG,WAAW;IACjE,SAAS,SAAS,MAAM,YACtB,kCACA,GAAG,gBAAgB,GACrB;IACA,MAAM,WAAW,aAAa;IAC9B,IAAI,OAAO,aAAa,YAAY,SAAS,OAC3C,SAAS,MAAM;KAAE;KAAiB;KAAgB;KAAU,GAAG;IAAK,CAAC;SAChE,IAAI,UACT,OAAO,OAAO,SAAS,SAAS,OAAO;KACrC,UAAU,GAAG,eAAe;KAC5B,WAAW,GAAG,gBAAgB;IAChC,CAAC;GAEL;EACF;CACF,IACA;CAEN,MAAM,oBAAoB,YAAY;CACtC,MAAM,QAAQ,mBAAmB;CAEjC,MAAM,YAAY,UAA2B;EAC3C,MAAM,oBAAoB;EAC1B,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,wBAAwB;EAC5B,UAAU;EACV,MAAM,cAAc;CACtB;CAEA,OACE,oBAAC,kBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,oBAAC,SAAD;GACE,QAAQ,MAAM;GACd,GAAI;GACJ,aAAa;GACb,WAAW,YAAY,CAAC,WAAW,gBAAgB;GACnD,WAAW;GACD;GAET;EACM,CAAA;CACO,CAAA;AAEtB;AAEA,MAAM,kBAAkB,MAA+D;AAEvF,SAAS,SAAS;AAClB,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,SAAS;AAClB,SAAS,WAAW;AACpB,SAAS,UAAU;AACnB,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,QAAQ;AACjB,SAAS,UAAU;AACnB,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,QAAQ;AACjB,SAAS,cAAc;AACvB,SAAS,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.module.mjs","names":[],"sources":["../../../src/components/Combobox/Combobox.module.css"],"sourcesContent":[".dropdown {\n  --combobox-padding: 4px;\n  padding: var(--combobox-padding);\n\n  &:has([data-mantine-scrollbar]) {\n    .search {\n      max-width: calc(100% + var(--combobox-padding));\n    }\n  }\n\n  &[data-composed] {\n    padding-inline-end: 0;\n  }\n\n  &[data-hidden] {\n    display: none;\n  }\n}\n\n/* Variables must be both on dropdown and options to support usage of Combobox.Options without Combobox.Dropdown */\n.dropdown,\n.options {\n  --combobox-option-padding-xs: 4px 8px;\n  --combobox-option-padding-sm: 6px 10px;\n  --combobox-option-padding-md: 8px 12px;\n  --combobox-option-padding-lg: 10px 16px;\n  --combobox-option-padding-xl: 14px 20px;\n  --combobox-option-padding: var(--combobox-option-padding-sm);\n}\n\n.option {\n  padding: var(--combobox-option-padding);\n  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));\n  border-radius: var(--mantine-radius-default);\n  background-color: transparent;\n  color: inherit;\n  cursor: pointer;\n  overflow-wrap: break-word;\n\n  &:where([data-combobox-selected]) {\n    background-color: var(--mantine-primary-color-filled);\n    color: var(--mantine-color-white);\n  }\n\n  &:where([data-combobox-disabled]) {\n    cursor: not-allowed;\n    opacity: 0.35;\n  }\n\n  @mixin hover {\n    &:where(:not([data-combobox-selected], [data-combobox-disabled])) {\n      @mixin where-light {\n        background-color: var(--mantine-color-gray-0);\n      }\n\n      @mixin where-dark {\n        background-color: var(--mantine-color-dark-7);\n      }\n    }\n  }\n}\n\n.search {\n  margin-inline: calc(var(--combobox-padding) * -1);\n  margin-top: calc(var(--combobox-padding) * -1);\n  width: calc(100% + var(--combobox-padding) * 2);\n  border-top-width: 0;\n  border-inline-width: 0;\n  border-end-start-radius: 0;\n  border-end-end-radius: 0;\n  margin-bottom: var(--combobox-padding);\n  position: relative;\n\n  &,\n  &:focus {\n    @mixin where-light {\n      border-color: var(--mantine-color-gray-2);\n    }\n\n    @mixin where-dark {\n      border-color: var(--mantine-color-dark-4);\n    }\n  }\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-7);\n  }\n}\n\n.empty {\n  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));\n  text-align: center;\n  padding: var(--combobox-option-padding);\n  color: var(--mantine-color-dimmed);\n}\n\n.header,\n.footer {\n  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));\n  border: 0 solid transparent;\n  margin-inline: calc(var(--combobox-padding) * -1);\n  padding: var(--combobox-option-padding);\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-2);\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-4);\n  }\n}\n\n.footer {\n  border-top-width: 1px;\n  margin-top: var(--combobox-padding);\n  margin-bottom: calc(var(--combobox-padding) * -1);\n}\n\n.header {\n  border-bottom-width: 1px;\n  margin-bottom: var(--combobox-padding);\n  margin-top: calc(var(--combobox-padding) * -1);\n}\n\n.group {\n  &:has(.groupLabel:only-child) {\n    display: none;\n  }\n}\n\n.groupLabel {\n  color: var(--mantine-color-dimmed);\n  font-size: calc(var(--combobox-option-fz, var(--mantine-font-size-sm)) * 0.85);\n  padding: var(--combobox-option-padding);\n  font-weight: var(--mantine-font-weight-medium);\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  &::after {\n    content: '';\n    flex: 1;\n    inset-inline: 0;\n    height: 1px;\n    margin-inline-start: var(--mantine-spacing-xs);\n\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-2);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-4);\n    }\n  }\n\n  &:only-child {\n    display: none;\n  }\n}\n\n/* ------- Combobox.Chevron ------- */\n.chevron {\n  --combobox-chevron-size-xs: 14px;\n  --combobox-chevron-size-sm: 18px;\n  --combobox-chevron-size-md: 20px;\n  --combobox-chevron-size-lg: 24px;\n  --combobox-chevron-size-xl: 28px;\n  --combobox-chevron-size: var(--combobox-chevron-size-sm);\n\n  @mixin where-light {\n    --_combobox-chevron-color: var(--combobox-chevron-color, var(--mantine-color-gray-6));\n  }\n\n  @mixin where-dark {\n    --_combobox-chevron-color: var(--combobox-chevron-color, var(--mantine-color-dark-3));\n  }\n\n  width: var(--combobox-chevron-size);\n  height: var(--combobox-chevron-size);\n  color: var(--_combobox-chevron-color);\n\n  &:where([data-error]) {\n    color: var(--combobox-chevron-color, var(--mantine-color-error));\n  }\n}\n\n/* ------- OptionsDropdown ------- */\n.optionsDropdownOption {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n\n  &:where([data-reverse]) {\n    justify-content: space-between;\n  }\n}\n\n.optionsDropdownCheckIcon {\n  opacity: 0.4;\n  width: 0.8em;\n  min-width: 0.8em;\n  height: 0.8em;\n\n  :where([data-combobox-selected]) & {\n    opacity: 1;\n  }\n}\n\n.optionsDropdownCheckPlaceholder {\n  width: 0.8em;\n  min-width: 0.8em;\n  height: 0.8em;\n}\n"],"mappings":""}
+{"version":3,"file":"Combobox.module.mjs","names":[],"sources":["../../../src/components/Combobox/Combobox.module.css"],"sourcesContent":[".dropdown {\n  --combobox-padding: 4px;\n  padding: var(--combobox-padding);\n\n  &:has([data-mantine-scrollbar]) {\n    .search {\n      max-width: calc(100% + var(--combobox-padding));\n    }\n  }\n\n  &[data-composed] {\n    padding-inline-end: 0;\n  }\n\n  &[data-hidden] {\n    display: none;\n  }\n\n  &[data-floating-height='viewport']:not([data-hidden]) {\n    --combobox-floating-options-max-height: calc(\n      var(--combobox-floating-max-height, 100vh) - var(--combobox-padding) * 2\n    );\n    max-height: var(--combobox-floating-max-height, none);\n    overflow: hidden;\n  }\n}\n\n/* Variables must be both on dropdown and options to support usage of Combobox.Options without Combobox.Dropdown */\n.dropdown,\n.options {\n  --combobox-option-padding-xs: 4px 8px;\n  --combobox-option-padding-sm: 6px 10px;\n  --combobox-option-padding-md: 8px 12px;\n  --combobox-option-padding-lg: 10px 16px;\n  --combobox-option-padding-xl: 14px 20px;\n  --combobox-option-padding: var(--combobox-option-padding-sm);\n}\n\n.option {\n  padding: var(--combobox-option-padding);\n  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));\n  border-radius: var(--mantine-radius-default);\n  background-color: transparent;\n  color: inherit;\n  cursor: pointer;\n  overflow-wrap: break-word;\n\n  &:where([data-combobox-selected]) {\n    background-color: var(--mantine-primary-color-filled);\n    color: var(--mantine-color-white);\n  }\n\n  &:where([data-combobox-disabled]) {\n    cursor: not-allowed;\n    opacity: 0.35;\n  }\n\n  @mixin hover {\n    &:where(:not([data-combobox-selected], [data-combobox-disabled])) {\n      @mixin where-light {\n        background-color: var(--mantine-color-gray-0);\n      }\n\n      @mixin where-dark {\n        background-color: var(--mantine-color-dark-7);\n      }\n    }\n  }\n}\n\n.search {\n  margin-inline: calc(var(--combobox-padding) * -1);\n  margin-top: calc(var(--combobox-padding) * -1);\n  width: calc(100% + var(--combobox-padding) * 2);\n  border-top-width: 0;\n  border-inline-width: 0;\n  border-end-start-radius: 0;\n  border-end-end-radius: 0;\n  margin-bottom: var(--combobox-padding);\n  position: relative;\n\n  &,\n  &:focus {\n    @mixin where-light {\n      border-color: var(--mantine-color-gray-2);\n    }\n\n    @mixin where-dark {\n      border-color: var(--mantine-color-dark-4);\n    }\n  }\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-7);\n  }\n}\n\n.empty {\n  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));\n  text-align: center;\n  padding: var(--combobox-option-padding);\n  color: var(--mantine-color-dimmed);\n}\n\n.header,\n.footer {\n  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));\n  border: 0 solid transparent;\n  margin-inline: calc(var(--combobox-padding) * -1);\n  padding: var(--combobox-option-padding);\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-2);\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-4);\n  }\n}\n\n.footer {\n  border-top-width: 1px;\n  margin-top: var(--combobox-padding);\n  margin-bottom: calc(var(--combobox-padding) * -1);\n}\n\n.header {\n  border-bottom-width: 1px;\n  margin-bottom: var(--combobox-padding);\n  margin-top: calc(var(--combobox-padding) * -1);\n}\n\n.group {\n  &:has(.groupLabel:only-child) {\n    display: none;\n  }\n}\n\n.groupLabel {\n  color: var(--mantine-color-dimmed);\n  font-size: calc(var(--combobox-option-fz, var(--mantine-font-size-sm)) * 0.85);\n  padding: var(--combobox-option-padding);\n  font-weight: var(--mantine-font-weight-medium);\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  &::after {\n    content: '';\n    flex: 1;\n    inset-inline: 0;\n    height: 1px;\n    margin-inline-start: var(--mantine-spacing-xs);\n\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-2);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-4);\n    }\n  }\n\n  &:only-child {\n    display: none;\n  }\n}\n\n/* ------- Combobox.Chevron ------- */\n.chevron {\n  --combobox-chevron-size-xs: 14px;\n  --combobox-chevron-size-sm: 18px;\n  --combobox-chevron-size-md: 20px;\n  --combobox-chevron-size-lg: 24px;\n  --combobox-chevron-size-xl: 28px;\n  --combobox-chevron-size: var(--combobox-chevron-size-sm);\n\n  @mixin where-light {\n    --_combobox-chevron-color: var(--combobox-chevron-color, var(--mantine-color-gray-6));\n  }\n\n  @mixin where-dark {\n    --_combobox-chevron-color: var(--combobox-chevron-color, var(--mantine-color-dark-3));\n  }\n\n  width: var(--combobox-chevron-size);\n  height: var(--combobox-chevron-size);\n  color: var(--_combobox-chevron-color);\n\n  &:where([data-error]) {\n    color: var(--combobox-chevron-color, var(--mantine-color-error));\n  }\n}\n\n/* ------- OptionsDropdown ------- */\n.optionsDropdownOption {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n\n  &:where([data-reverse]) {\n    justify-content: space-between;\n  }\n}\n\n.optionsDropdownCheckIcon {\n  opacity: 0.4;\n  width: 0.8em;\n  min-width: 0.8em;\n  height: 0.8em;\n\n  :where([data-combobox-selected]) & {\n    opacity: 1;\n  }\n}\n\n.optionsDropdownCheckPlaceholder {\n  width: 0.8em;\n  min-width: 0.8em;\n  height: 0.8em;\n}\n"],"mappings":""}

package/esm/components/Combobox/ComboboxDropdown/ComboboxDropdown.mjs

@@ -13,6 +13,7 @@ const ComboboxDropdown = factory((props) => {
 		...others,
 		role: "presentation",
 		"data-hidden": hidden || void 0,
+		"data-floating-height": ctx.floatingHeight || void 0,
 		...ctx.getStyles("dropdown", {
 			className,
 			style,

package/esm/components/Combobox/ComboboxDropdown/ComboboxDropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Combobox/ComboboxDropdown/ComboboxDropdown.tsx"],"sourcesContent":["import { factory, Factory, useProps } from '../../../core';\nimport { Popover, PopoverDropdownProps } from '../../Popover';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxDropdownStylesNames = 'dropdown';\n\nexport interface ComboboxDropdownProps extends PopoverDropdownProps {\n  /** Determines whether the dropdown should be hidden, for example, when there are no options to display */\n  hidden?: boolean;\n}\n\nexport type ComboboxDropdownFactory = Factory<{\n  props: ComboboxDropdownProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxDropdownStylesNames;\n  compound: true;\n}>;\n\nexport const ComboboxDropdown = factory<ComboboxDropdownFactory>((props) => {\n  const { classNames, styles, className, style, hidden, ...others } = useProps(\n    'ComboboxDropdown',\n    null,\n    props\n  );\n\n  const ctx = useComboboxContext();\n\n  return (\n    <Popover.Dropdown\n      {...others}\n      role=\"presentation\"\n      data-hidden={hidden || undefined}\n      {...ctx.getStyles('dropdown', { className, style, classNames, styles })}\n    />\n  );\n});\n\nComboboxDropdown.classes = classes;\nComboboxDropdown.displayName = '@mantine/core/ComboboxDropdown';\n"],"mappings":";;;;;;;;AAmBA,MAAa,mBAAmB,SAAkC,UAAU;CAC1E,MAAM,EAAE,YAAY,QAAQ,WAAW,OAAO,QAAQ,GAAG,WAAW,SAClE,oBACA,MACA,KACF;CAEA,MAAM,MAAM,mBAAmB;CAE/B,OACE,oBAAC,QAAQ,UAAT;EACE,GAAI;EACJ,MAAK;EACL,eAAa,UAAU,KAAA;EACvB,GAAI,IAAI,UAAU,YAAY;GAAE;GAAW;GAAO;GAAY;EAAO,CAAC;CACvE,CAAA;AAEL,CAAC;AAED,iBAAiB,UAAUA;AAC3B,iBAAiB,cAAc"}
+{"version":3,"file":"ComboboxDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Combobox/ComboboxDropdown/ComboboxDropdown.tsx"],"sourcesContent":["import { factory, Factory, useProps } from '../../../core';\nimport { Popover, PopoverDropdownProps } from '../../Popover';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxDropdownStylesNames = 'dropdown';\n\nexport interface ComboboxDropdownProps extends PopoverDropdownProps {\n  /** Determines whether the dropdown should be hidden, for example, when there are no options to display */\n  hidden?: boolean;\n}\n\nexport type ComboboxDropdownFactory = Factory<{\n  props: ComboboxDropdownProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxDropdownStylesNames;\n  compound: true;\n}>;\n\nexport const ComboboxDropdown = factory<ComboboxDropdownFactory>((props) => {\n  const { classNames, styles, className, style, hidden, ...others } = useProps(\n    'ComboboxDropdown',\n    null,\n    props\n  );\n\n  const ctx = useComboboxContext();\n\n  return (\n    <Popover.Dropdown\n      {...others}\n      role=\"presentation\"\n      data-hidden={hidden || undefined}\n      data-floating-height={ctx.floatingHeight || undefined}\n      {...ctx.getStyles('dropdown', { className, style, classNames, styles })}\n    />\n  );\n});\n\nComboboxDropdown.classes = classes;\nComboboxDropdown.displayName = '@mantine/core/ComboboxDropdown';\n"],"mappings":";;;;;;;;AAmBA,MAAa,mBAAmB,SAAkC,UAAU;CAC1E,MAAM,EAAE,YAAY,QAAQ,WAAW,OAAO,QAAQ,GAAG,WAAW,SAClE,oBACA,MACA,KACF;CAEA,MAAM,MAAM,mBAAmB;CAE/B,OACE,oBAAC,QAAQ,UAAT;EACE,GAAI;EACJ,MAAK;EACL,eAAa,UAAU,KAAA;EACvB,wBAAsB,IAAI,kBAAkB,KAAA;EAC5C,GAAI,IAAI,UAAU,YAAY;GAAE;GAAW;GAAO;GAAY;EAAO,CAAC;CACvE,CAAA;AAEL,CAAC;AAED,iBAAiB,UAAUA;AAC3B,iBAAiB,cAAc"}

package/esm/components/Combobox/OptionsDropdown/OptionsDropdown.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { ScrollArea } from "../../ScrollArea/ScrollArea.mjs";
 import Combobox_module_default from "../Combobox.module.mjs";
+import { useComboboxContext } from "../Combobox.context.mjs";
 import { Combobox } from "../Combobox.mjs";
 import { CheckIcon } from "../../Checkbox/CheckIcon.mjs";
 import { isOptionsGroup } from "./is-options-group.mjs";
@@ -50,7 +51,8 @@ function Option({ data, withCheckIcon, withAlignedLabels, value, checkIconPositi
 		children: options
 	});
 }
-function OptionsDropdown({ data, hidden, hiddenWhenEmpty, filter, search, limit, maxDropdownHeight, withScrollArea = true, filterOptions = true, withCheckIcon = false, withAlignedLabels = false, value, checkIconPosition, nothingFoundMessage, unstyled, labelId, renderOption, scrollAreaProps, "aria-label": ariaLabel }) {
+function OptionsDropdown({ data, hidden, hiddenWhenEmpty, filter, search, limit, maxDropdownHeight, floatingHeight, withScrollArea = true, filterOptions = true, withCheckIcon = false, withAlignedLabels = false, value, checkIconPosition, nothingFoundMessage, unstyled, labelId, renderOption, scrollAreaProps, "aria-label": ariaLabel }) {
+	const ctx = useComboboxContext();
 	validateOptions(data);
 	const filteredData = typeof search === "string" ? (filter || defaultOptionsFilter)({
 		options: data,
@@ -74,7 +76,7 @@ function OptionsDropdown({ data, hidden, hiddenWhenEmpty, filter, search, limit,
 			labelledBy: labelId,
 			"aria-label": ariaLabel,
 			children: [withScrollArea ? /* @__PURE__ */ jsx(ScrollArea.Autosize, {
-				mah: maxDropdownHeight ?? 220,
+				mah: (floatingHeight ?? ctx.floatingHeight) === "viewport" ? "var(--combobox-floating-options-max-height)" : maxDropdownHeight ?? 220,
 				type: "scroll",
 				scrollbarSize: "var(--combobox-padding)",
 				offsetScrollbars: "y",

package/esm/components/Combobox/OptionsDropdown/OptionsDropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"OptionsDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Combobox/OptionsDropdown/OptionsDropdown.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { Primitive } from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { ScrollArea, ScrollAreaProps } from '../../ScrollArea/ScrollArea';\nimport { Combobox } from '../Combobox';\nimport { ComboboxItem, ComboboxLikeRenderOptionInput, ComboboxParsedItem } from '../Combobox.types';\nimport { defaultOptionsFilter, FilterOptionsInput } from './default-options-filter';\nimport { isEmptyComboboxData } from './is-empty-combobox-data';\nimport { isOptionsGroup } from './is-options-group';\nimport { validateOptions } from './validate-options';\nimport classes from '../Combobox.module.css';\n\nexport type OptionsFilter<Value extends Primitive = string> = (\n  input: FilterOptionsInput<Value>\n) => ComboboxParsedItem<Value>[];\n\nexport interface OptionsGroup {\n  group: string;\n  items: ComboboxItem<Primitive>[];\n}\n\nexport type OptionsData = (ComboboxItem<Primitive> | OptionsGroup)[];\n\ninterface OptionProps {\n  data: ComboboxItem<Primitive> | OptionsGroup;\n  withCheckIcon?: boolean;\n  withAlignedLabels?: boolean;\n  value?: Primitive | Primitive[] | null;\n  checkIconPosition?: 'left' | 'right';\n  unstyled: boolean | undefined;\n  renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n}\n\nfunction isValueChecked(value: Primitive | Primitive[] | undefined | null, optionValue: Primitive) {\n  return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;\n}\n\nfunction Option({\n  data,\n  withCheckIcon,\n  withAlignedLabels,\n  value,\n  checkIconPosition,\n  unstyled,\n  renderOption,\n}: OptionProps) {\n  if (!isOptionsGroup(data)) {\n    const checked = isValueChecked(value, data.value);\n    const check =\n      withCheckIcon &&\n      (checked ? (\n        <CheckIcon className={classes.optionsDropdownCheckIcon} />\n      ) : withAlignedLabels ? (\n        <div className={classes.optionsDropdownCheckPlaceholder} />\n      ) : null);\n\n    const defaultContent = (\n      <>\n        {checkIconPosition === 'left' && check}\n        <span>{data.label}</span>\n        {checkIconPosition === 'right' && check}\n      </>\n    );\n\n    return (\n      <Combobox.Option\n        value={data.value}\n        disabled={data.disabled}\n        className={cx({ [classes.optionsDropdownOption]: !unstyled })}\n        data-reverse={checkIconPosition === 'right' || undefined}\n        data-checked={checked || undefined}\n        aria-selected={checked}\n        active={checked}\n      >\n        {typeof renderOption === 'function'\n          ? renderOption({ option: data, checked })\n          : defaultContent}\n      </Combobox.Option>\n    );\n  }\n\n  const options = data.items.map((item) => (\n    <Option\n      data={item}\n      value={value}\n      key={`${item.value}`}\n      unstyled={unstyled}\n      withCheckIcon={withCheckIcon}\n      withAlignedLabels={withAlignedLabels}\n      checkIconPosition={checkIconPosition}\n      renderOption={renderOption}\n    />\n  ));\n\n  return <Combobox.Group label={data.group}>{options}</Combobox.Group>;\n}\n\nexport interface OptionsDropdownProps {\n  data: OptionsData;\n  filter: OptionsFilter<Primitive> | undefined;\n  search: string | undefined;\n  limit: number | undefined;\n  withScrollArea: boolean | undefined;\n  maxDropdownHeight: number | string | undefined;\n  hidden?: boolean;\n  hiddenWhenEmpty?: boolean;\n  filterOptions?: boolean;\n  withCheckIcon?: boolean;\n  withAlignedLabels?: boolean;\n  value?: Primitive | Primitive[] | null;\n  checkIconPosition?: 'left' | 'right';\n  nothingFoundMessage?: React.ReactNode;\n  unstyled: boolean | undefined;\n  labelId: string | undefined;\n  'aria-label': string | undefined;\n  renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n  scrollAreaProps: ScrollAreaProps | undefined;\n}\n\nexport function OptionsDropdown({\n  data,\n  hidden,\n  hiddenWhenEmpty,\n  filter,\n  search,\n  limit,\n  maxDropdownHeight,\n  withScrollArea = true,\n  filterOptions = true,\n  withCheckIcon = false,\n  withAlignedLabels = false,\n  value,\n  checkIconPosition,\n  nothingFoundMessage,\n  unstyled,\n  labelId,\n  renderOption,\n  scrollAreaProps,\n  'aria-label': ariaLabel,\n}: OptionsDropdownProps) {\n  validateOptions(data);\n\n  const shouldFilter = typeof search === 'string';\n  const filteredData = shouldFilter\n    ? (filter || defaultOptionsFilter)({\n        options: data,\n        search: filterOptions ? search : '',\n        limit: limit ?? Infinity,\n      })\n    : data;\n  const isEmpty = isEmptyComboboxData(filteredData);\n\n  const options = filteredData.map((item) => (\n    <Option\n      data={item}\n      key={isOptionsGroup(item) ? item.group : `${item.value}`}\n      withCheckIcon={withCheckIcon}\n      withAlignedLabels={withAlignedLabels}\n      value={value}\n      checkIconPosition={checkIconPosition}\n      unstyled={unstyled}\n      renderOption={renderOption}\n    />\n  ));\n\n  return (\n    <Combobox.Dropdown hidden={hidden || (hiddenWhenEmpty && isEmpty)} data-composed>\n      <Combobox.Options labelledBy={labelId} aria-label={ariaLabel}>\n        {withScrollArea ? (\n          <ScrollArea.Autosize\n            mah={maxDropdownHeight ?? 220}\n            type=\"scroll\"\n            scrollbarSize=\"var(--combobox-padding)\"\n            offsetScrollbars=\"y\"\n            {...scrollAreaProps}\n          >\n            {options}\n          </ScrollArea.Autosize>\n        ) : (\n          options\n        )}\n        {isEmpty && nothingFoundMessage && <Combobox.Empty>{nothingFoundMessage}</Combobox.Empty>}\n      </Combobox.Options>\n    </Combobox.Dropdown>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAiCA,SAAS,eAAe,OAAmD,aAAwB;CACjG,OAAO,MAAM,QAAQ,KAAK,IAAI,MAAM,SAAS,WAAW,IAAI,UAAU;AACxE;AAEA,SAAS,OAAO,EACd,MACA,eACA,mBACA,OACA,mBACA,UACA,gBACc;CACd,IAAI,CAAC,eAAe,IAAI,GAAG;EACzB,MAAM,UAAU,eAAe,OAAO,KAAK,KAAK;EAChD,MAAM,QACJ,kBACC,UACC,oBAAC,WAAD,EAAW,WAAWA,wBAAQ,yBAA2B,CAAA,IACvD,oBACF,oBAAC,OAAD,EAAK,WAAWA,wBAAQ,gCAAkC,CAAA,IACxD;EAEN,MAAM,iBACJ,qBAAA,UAAA,EAAA,UAAA;GACG,sBAAsB,UAAU;GACjC,oBAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA;GACvB,sBAAsB,WAAW;EAClC,EAAA,CAAA;EAGJ,OACE,oBAAC,SAAS,QAAV;GACE,OAAO,KAAK;GACZ,UAAU,KAAK;GACf,WAAW,GAAG,GAAGA,wBAAQ,wBAAwB,CAAC,SAAS,CAAC;GAC5D,gBAAc,sBAAsB,WAAW,KAAA;GAC/C,gBAAc,WAAW,KAAA;GACzB,iBAAe;GACf,QAAQ;aAEP,OAAO,iBAAiB,aACrB,aAAa;IAAE,QAAQ;IAAM;GAAQ,CAAC,IACtC;EACW,CAAA;CAErB;CAEA,MAAM,UAAU,KAAK,MAAM,KAAK,SAC9B,oBAAC,QAAD;EACE,MAAM;EACC;EAEG;EACK;EACI;EACA;EACL;CACf,GANM,GAAG,KAAK,OAMd,CACF;CAED,OAAO,oBAAC,SAAS,OAAV;EAAgB,OAAO,KAAK;YAAQ;CAAwB,CAAA;AACrE;AAwBA,SAAgB,gBAAgB,EAC9B,MACA,QACA,iBACA,QACA,QACA,OACA,mBACA,iBAAiB,MACjB,gBAAgB,MAChB,gBAAgB,OAChB,oBAAoB,OACpB,OACA,mBACA,qBACA,UACA,SACA,cACA,iBACA,cAAc,aACS;CACvB,gBAAgB,IAAI;CAGpB,MAAM,eADe,OAAO,WAAW,YAElC,UAAU,sBAAsB;EAC/B,SAAS;EACT,QAAQ,gBAAgB,SAAS;EACjC,OAAO,SAAS;CAClB,CAAC,IACD;CACJ,MAAM,UAAU,oBAAoB,YAAY;CAEhD,MAAM,UAAU,aAAa,KAAK,SAChC,oBAAC,QAAD;EACE,MAAM;EAES;EACI;EACZ;EACY;EACT;EACI;CACf,GAPM,eAAe,IAAI,IAAI,KAAK,QAAQ,GAAG,KAAK,OAOlD,CACF;CAED,OACE,oBAAC,SAAS,UAAV;EAAmB,QAAQ,UAAW,mBAAmB;EAAU,iBAAA;YACjE,qBAAC,SAAS,SAAV;GAAkB,YAAY;GAAS,cAAY;aAAnD,CACG,iBACC,oBAAC,WAAW,UAAZ;IACE,KAAK,qBAAqB;IAC1B,MAAK;IACL,eAAc;IACd,kBAAiB;IACjB,GAAI;cAEH;GACkB,CAAA,IAErB,SAED,WAAW,uBAAuB,oBAAC,SAAS,OAAV,EAAA,UAAiB,oBAAoC,CAAA,CACxE;;CACD,CAAA;AAEvB"}
+{"version":3,"file":"OptionsDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Combobox/OptionsDropdown/OptionsDropdown.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { Primitive } from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { ScrollArea, ScrollAreaProps } from '../../ScrollArea/ScrollArea';\nimport { Combobox } from '../Combobox';\nimport { useComboboxContext } from '../Combobox.context';\nimport { ComboboxItem, ComboboxLikeRenderOptionInput, ComboboxParsedItem } from '../Combobox.types';\nimport { defaultOptionsFilter, FilterOptionsInput } from './default-options-filter';\nimport { isEmptyComboboxData } from './is-empty-combobox-data';\nimport { isOptionsGroup } from './is-options-group';\nimport { validateOptions } from './validate-options';\nimport classes from '../Combobox.module.css';\n\nexport type OptionsFilter<Value extends Primitive = string> = (\n  input: FilterOptionsInput<Value>\n) => ComboboxParsedItem<Value>[];\n\nexport interface OptionsGroup {\n  group: string;\n  items: ComboboxItem<Primitive>[];\n}\n\nexport type OptionsData = (ComboboxItem<Primitive> | OptionsGroup)[];\n\ninterface OptionProps {\n  data: ComboboxItem<Primitive> | OptionsGroup;\n  withCheckIcon?: boolean;\n  withAlignedLabels?: boolean;\n  value?: Primitive | Primitive[] | null;\n  checkIconPosition?: 'left' | 'right';\n  unstyled: boolean | undefined;\n  renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n}\n\nfunction isValueChecked(value: Primitive | Primitive[] | undefined | null, optionValue: Primitive) {\n  return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;\n}\n\nfunction Option({\n  data,\n  withCheckIcon,\n  withAlignedLabels,\n  value,\n  checkIconPosition,\n  unstyled,\n  renderOption,\n}: OptionProps) {\n  if (!isOptionsGroup(data)) {\n    const checked = isValueChecked(value, data.value);\n    const check =\n      withCheckIcon &&\n      (checked ? (\n        <CheckIcon className={classes.optionsDropdownCheckIcon} />\n      ) : withAlignedLabels ? (\n        <div className={classes.optionsDropdownCheckPlaceholder} />\n      ) : null);\n\n    const defaultContent = (\n      <>\n        {checkIconPosition === 'left' && check}\n        <span>{data.label}</span>\n        {checkIconPosition === 'right' && check}\n      </>\n    );\n\n    return (\n      <Combobox.Option\n        value={data.value}\n        disabled={data.disabled}\n        className={cx({ [classes.optionsDropdownOption]: !unstyled })}\n        data-reverse={checkIconPosition === 'right' || undefined}\n        data-checked={checked || undefined}\n        aria-selected={checked}\n        active={checked}\n      >\n        {typeof renderOption === 'function'\n          ? renderOption({ option: data, checked })\n          : defaultContent}\n      </Combobox.Option>\n    );\n  }\n\n  const options = data.items.map((item) => (\n    <Option\n      data={item}\n      value={value}\n      key={`${item.value}`}\n      unstyled={unstyled}\n      withCheckIcon={withCheckIcon}\n      withAlignedLabels={withAlignedLabels}\n      checkIconPosition={checkIconPosition}\n      renderOption={renderOption}\n    />\n  ));\n\n  return <Combobox.Group label={data.group}>{options}</Combobox.Group>;\n}\n\nexport interface OptionsDropdownProps {\n  data: OptionsData;\n  filter: OptionsFilter<Primitive> | undefined;\n  search: string | undefined;\n  limit: number | undefined;\n  withScrollArea: boolean | undefined;\n  maxDropdownHeight: number | string | undefined;\n  /** Overrides `floatingHeight` from the `Combobox` context, used by `Combobox`-based components */\n  floatingHeight?: 'viewport';\n  hidden?: boolean;\n  hiddenWhenEmpty?: boolean;\n  filterOptions?: boolean;\n  withCheckIcon?: boolean;\n  withAlignedLabels?: boolean;\n  value?: Primitive | Primitive[] | null;\n  checkIconPosition?: 'left' | 'right';\n  nothingFoundMessage?: React.ReactNode;\n  unstyled: boolean | undefined;\n  labelId: string | undefined;\n  'aria-label': string | undefined;\n  renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n  scrollAreaProps: ScrollAreaProps | undefined;\n}\n\nexport function OptionsDropdown({\n  data,\n  hidden,\n  hiddenWhenEmpty,\n  filter,\n  search,\n  limit,\n  maxDropdownHeight,\n  floatingHeight,\n  withScrollArea = true,\n  filterOptions = true,\n  withCheckIcon = false,\n  withAlignedLabels = false,\n  value,\n  checkIconPosition,\n  nothingFoundMessage,\n  unstyled,\n  labelId,\n  renderOption,\n  scrollAreaProps,\n  'aria-label': ariaLabel,\n}: OptionsDropdownProps) {\n  const ctx = useComboboxContext();\n  validateOptions(data);\n\n  const shouldFilter = typeof search === 'string';\n  const filteredData = shouldFilter\n    ? (filter || defaultOptionsFilter)({\n        options: data,\n        search: filterOptions ? search : '',\n        limit: limit ?? Infinity,\n      })\n    : data;\n  const isEmpty = isEmptyComboboxData(filteredData);\n\n  const options = filteredData.map((item) => (\n    <Option\n      data={item}\n      key={isOptionsGroup(item) ? item.group : `${item.value}`}\n      withCheckIcon={withCheckIcon}\n      withAlignedLabels={withAlignedLabels}\n      value={value}\n      checkIconPosition={checkIconPosition}\n      unstyled={unstyled}\n      renderOption={renderOption}\n    />\n  ));\n\n  return (\n    <Combobox.Dropdown hidden={hidden || (hiddenWhenEmpty && isEmpty)} data-composed>\n      <Combobox.Options labelledBy={labelId} aria-label={ariaLabel}>\n        {withScrollArea ? (\n          <ScrollArea.Autosize\n            mah={\n              (floatingHeight ?? ctx.floatingHeight) === 'viewport'\n                ? 'var(--combobox-floating-options-max-height)'\n                : (maxDropdownHeight ?? 220)\n            }\n            type=\"scroll\"\n            scrollbarSize=\"var(--combobox-padding)\"\n            offsetScrollbars=\"y\"\n            {...scrollAreaProps}\n          >\n            {options}\n          </ScrollArea.Autosize>\n        ) : (\n          options\n        )}\n        {isEmpty && nothingFoundMessage && <Combobox.Empty>{nothingFoundMessage}</Combobox.Empty>}\n      </Combobox.Options>\n    </Combobox.Dropdown>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAkCA,SAAS,eAAe,OAAmD,aAAwB;CACjG,OAAO,MAAM,QAAQ,KAAK,IAAI,MAAM,SAAS,WAAW,IAAI,UAAU;AACxE;AAEA,SAAS,OAAO,EACd,MACA,eACA,mBACA,OACA,mBACA,UACA,gBACc;CACd,IAAI,CAAC,eAAe,IAAI,GAAG;EACzB,MAAM,UAAU,eAAe,OAAO,KAAK,KAAK;EAChD,MAAM,QACJ,kBACC,UACC,oBAAC,WAAD,EAAW,WAAWA,wBAAQ,yBAA2B,CAAA,IACvD,oBACF,oBAAC,OAAD,EAAK,WAAWA,wBAAQ,gCAAkC,CAAA,IACxD;EAEN,MAAM,iBACJ,qBAAA,UAAA,EAAA,UAAA;GACG,sBAAsB,UAAU;GACjC,oBAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA;GACvB,sBAAsB,WAAW;EAClC,EAAA,CAAA;EAGJ,OACE,oBAAC,SAAS,QAAV;GACE,OAAO,KAAK;GACZ,UAAU,KAAK;GACf,WAAW,GAAG,GAAGA,wBAAQ,wBAAwB,CAAC,SAAS,CAAC;GAC5D,gBAAc,sBAAsB,WAAW,KAAA;GAC/C,gBAAc,WAAW,KAAA;GACzB,iBAAe;GACf,QAAQ;aAEP,OAAO,iBAAiB,aACrB,aAAa;IAAE,QAAQ;IAAM;GAAQ,CAAC,IACtC;EACW,CAAA;CAErB;CAEA,MAAM,UAAU,KAAK,MAAM,KAAK,SAC9B,oBAAC,QAAD;EACE,MAAM;EACC;EAEG;EACK;EACI;EACA;EACL;CACf,GANM,GAAG,KAAK,OAMd,CACF;CAED,OAAO,oBAAC,SAAS,OAAV;EAAgB,OAAO,KAAK;YAAQ;CAAwB,CAAA;AACrE;AA0BA,SAAgB,gBAAgB,EAC9B,MACA,QACA,iBACA,QACA,QACA,OACA,mBACA,gBACA,iBAAiB,MACjB,gBAAgB,MAChB,gBAAgB,OAChB,oBAAoB,OACpB,OACA,mBACA,qBACA,UACA,SACA,cACA,iBACA,cAAc,aACS;CACvB,MAAM,MAAM,mBAAmB;CAC/B,gBAAgB,IAAI;CAGpB,MAAM,eADe,OAAO,WAAW,YAElC,UAAU,sBAAsB;EAC/B,SAAS;EACT,QAAQ,gBAAgB,SAAS;EACjC,OAAO,SAAS;CAClB,CAAC,IACD;CACJ,MAAM,UAAU,oBAAoB,YAAY;CAEhD,MAAM,UAAU,aAAa,KAAK,SAChC,oBAAC,QAAD;EACE,MAAM;EAES;EACI;EACZ;EACY;EACT;EACI;CACf,GAPM,eAAe,IAAI,IAAI,KAAK,QAAQ,GAAG,KAAK,OAOlD,CACF;CAED,OACE,oBAAC,SAAS,UAAV;EAAmB,QAAQ,UAAW,mBAAmB;EAAU,iBAAA;YACjE,qBAAC,SAAS,SAAV;GAAkB,YAAY;GAAS,cAAY;aAAnD,CACG,iBACC,oBAAC,WAAW,UAAZ;IACE,MACG,kBAAkB,IAAI,oBAAoB,aACvC,gDACC,qBAAqB;IAE5B,MAAK;IACL,eAAc;IACd,kBAAiB;IACjB,GAAI;cAEH;GACkB,CAAA,IAErB,SAED,WAAW,uBAAuB,oBAAC,SAAS,OAAV,EAAA,UAAiB,oBAAoC,CAAA,CACxE;;CACD,CAAA;AAEvB"}

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, __bottomSection, __bottomSectionProps, 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,
@@ -97,7 +98,8 @@ const Input = polymorphicFactory((_props) => {
 				disabled,
 				multiline,
 				"data-with-right-section": !!_rightSection,
-				"data-with-left-section": !!_leftSection
+				"data-with-left-section": !!_leftSection,
+				"data-with-bottom-section": !!__bottomSection
 			}, mod],
 			variant,
 			size,
@@ -124,6 +126,14 @@ const Input = polymorphicFactory((_props) => {
 					__size: inputSize,
 					...getStyles("input")
 				}),
+				__bottomSection && /* @__PURE__ */ jsx("div", {
+					...__bottomSectionProps,
+					...getStyles("bottomSection", {
+						className: __bottomSectionProps?.className,
+						style: __bottomSectionProps?.style
+					}),
+					children: __bottomSection
+				}),
 				_rightSection && /* @__PURE__ */ jsx("div", {
 					...rightSectionProps,
 					"data-position": "right",

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' | 'bottomSection';\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  /** Content section displayed at the bottom of the input, inside the border */\n  __bottomSection?: React.ReactNode;\n\n  /** Props passed down to the `__bottomSection` element */\n  __bottomSectionProps?: React.ComponentProps<'div'>;\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    __bottomSection,\n    __bottomSectionProps,\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            'data-with-bottom-section': !!__bottomSection,\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        {__bottomSection && (\n          <div\n            {...__bottomSectionProps}\n            {...getStyles('bottomSection', {\n              className: __bottomSectionProps?.className,\n              style: __bottomSectionProps?.style,\n            })}\n          >\n            {__bottomSection}\n          </div>\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

@@ -3,6 +3,7 @@
 var Input_module_default = {
 	"wrapper": "m_6c018570",
 	"input": "m_8fb7ebe7",
+	"bottomSection": "m_93f4ed57",
 	"section": "m_82577fc2",
 	"placeholder": "m_88bacfd0",
 	"root": "m_46b77525",

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-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-with-bottom-section] {\n    --input-bottom-section-height: 28px;\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    --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    --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: start;\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  [data-with-bottom-section] & {\n    padding-bottom: calc(var(--input-padding-y, 0rem) + var(--input-bottom-section-height));\n  }\n}\n\n.bottomSection {\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  right: 1px;\n  height: var(--input-bottom-section-height);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding-inline: var(--input-padding);\n  border-radius: 0 0 var(--input-radius) var(--input-radius);\n  pointer-events: all;\n  color: var(--mantine-color-dimmed);\n  font-size: var(--input-fz, var(--mantine-font-size-sm));\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/Menu.context.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.context.mjs","names":[],"sources":["../../../src/components/Menu/Menu.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { MenuFactory } from './Menu';\n\nexport interface MenuContextValue {\n  toggleDropdown: () => void;\n  closeDropdownImmediately: () => void;\n  closeDropdown: () => void;\n  openDropdown: () => void;\n  getItemIndex: (node: HTMLButtonElement) => number | null;\n  closeOnItemClick: boolean | undefined;\n  loop: boolean | undefined;\n  trigger: 'click' | 'hover' | 'click-hover' | undefined;\n  opened: boolean;\n  unstyled: boolean | undefined;\n  getStyles: GetStylesApi<MenuFactory>;\n  menuItemTabIndex: -1 | 0 | undefined;\n  openedViaClick: boolean;\n  setOpenedViaClick: (value: boolean) => void;\n  withInitialFocusPlaceholder: boolean | undefined;\n  registerOpenSub: (closeFn: () => void) => () => void;\n}\n\nexport const [MenuContextProvider, useMenuContext] = createSafeContext<MenuContextValue>(\n  'Menu component was not found in the tree'\n);\n"],"mappings":";;;AAsBA,MAAa,CAAC,qBAAqB,kBAAkB,kBACnD,0CACF"}
+{"version":3,"file":"Menu.context.mjs","names":[],"sources":["../../../src/components/Menu/Menu.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { MenuFactory } from './Menu';\n\nexport interface MenuContextValue {\n  toggleDropdown: () => void;\n  closeDropdownImmediately: () => void;\n  closeDropdown: () => void;\n  openDropdown: () => void;\n  getItemIndex: (node: HTMLButtonElement) => number | null;\n  closeOnItemClick: boolean | undefined;\n  loop: boolean | undefined;\n  trigger: 'click' | 'hover' | 'click-hover' | undefined;\n  opened: boolean;\n  unstyled: boolean | undefined;\n  getStyles: GetStylesApi<MenuFactory>;\n  menuItemTabIndex: -1 | 0 | undefined;\n  openedViaClick: boolean;\n  setOpenedViaClick: (value: boolean) => void;\n  withInitialFocusPlaceholder: boolean | undefined;\n  registerOpenSub: (closeFn: () => void) => () => void;\n  hasSearch: boolean;\n  registerSearch: () => () => void;\n  searchExitClearRef: React.RefObject<(() => void) | null>;\n  alignItemsLabels: 'all' | 'with-indicators' | 'none';\n  checkIcon: React.ReactNode;\n}\n\nexport const [MenuContextProvider, useMenuContext] = createSafeContext<MenuContextValue>(\n  'Menu component was not found in the tree'\n);\n"],"mappings":";;;AA2BA,MAAa,CAAC,qBAAqB,kBAAkB,kBACnD,0CACF"}

package/esm/components/Menu/Menu.mjs

@@ -7,11 +7,17 @@ import { factory } from "../../core/factory/factory.mjs";
 import { useDelayedHover } from "../../utils/Floating/use-delayed-hover.mjs";
 import { Popover } from "../Popover/Popover.mjs";
 import { MenuContextProvider } from "./Menu.context.mjs";
+import { MenuCheckboxGroup } from "./MenuCheckboxGroup/MenuCheckboxGroup.mjs";
 import Menu_module_default from "./Menu.module.mjs";
+import { MenuCheckboxItem } from "./MenuCheckboxItem/MenuCheckboxItem.mjs";
+import { MenuContextMenu } from "./MenuContextMenu/MenuContextMenu.mjs";
 import { MenuDivider } from "./MenuDivider/MenuDivider.mjs";
 import { MenuDropdown } from "./MenuDropdown/MenuDropdown.mjs";
 import { MenuItem } from "./MenuItem/MenuItem.mjs";
 import { MenuLabel } from "./MenuLabel/MenuLabel.mjs";
+import { MenuRadioGroup } from "./MenuRadioGroup/MenuRadioGroup.mjs";
+import { MenuRadioItem } from "./MenuRadioItem/MenuRadioItem.mjs";
+import { MenuSearch } from "./MenuSearch/MenuSearch.mjs";
 import { MenuSub } from "./MenuSub/MenuSub.mjs";
 import { MenuTarget } from "./MenuTarget/MenuTarget.mjs";
 import { useCallback, useRef, useState } from "react";
@@ -31,11 +37,12 @@ const defaultProps = {
 	trigger: "click",
 	openDelay: 0,
 	closeDelay: 100,
-	menuItemTabIndex: -1
+	menuItemTabIndex: -1,
+	alignItemsLabels: "with-indicators"
 };
 const Menu = factory((_props) => {
 	const props = useProps("Menu", defaultProps, _props);
-	const { children, onOpen, onClose, opened, defaultOpened, trapFocus, onChange, closeOnItemClick, loop, closeOnEscape, trigger, openDelay, closeDelay, classNames, styles, unstyled, variant, vars, menuItemTabIndex, keepMounted, withInitialFocusPlaceholder, attributes, ...others } = props;
+	const { children, onOpen, onClose, opened, defaultOpened, trapFocus, onChange, closeOnItemClick, loop, closeOnEscape, trigger, openDelay, closeDelay, classNames, styles, unstyled, variant, vars, menuItemTabIndex, keepMounted, withInitialFocusPlaceholder, attributes, onExitTransitionEnd, alignItemsLabels, checkIcon, ...others } = props;
 	const getStyles = useStyles({
 		name: "Menu",
 		classes: Menu_module_default,
@@ -79,6 +86,21 @@ const Menu = factory((_props) => {
 			if (activeSubCloseRef.current === closeFn) activeSubCloseRef.current = null;
 		};
 	}, []);
+	const searchCountRef = useRef(0);
+	const [hasSearch, setHasSearch] = useState(false);
+	const registerSearch = useCallback(() => {
+		searchCountRef.current += 1;
+		if (searchCountRef.current === 1) setHasSearch(true);
+		return () => {
+			searchCountRef.current -= 1;
+			if (searchCountRef.current === 0) setHasSearch(false);
+		};
+	}, []);
+	const searchExitClearRef = useRef(null);
+	const handleExitTransitionEnd = () => {
+		searchExitClearRef.current?.();
+		onExitTransitionEnd?.();
+	};
 	const getItemIndex = (node) => getContextItemIndex("[data-menu-item]", "[data-menu-dropdown]", node);
 	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
 		classNames,
@@ -102,7 +124,12 @@ const Menu = factory((_props) => {
 			unstyled,
 			menuItemTabIndex,
 			withInitialFocusPlaceholder,
-			registerOpenSub
+			registerOpenSub,
+			hasSearch,
+			registerSearch,
+			searchExitClearRef,
+			alignItemsLabels,
+			checkIcon
 		},
 		children: /* @__PURE__ */ jsx(Popover, {
 			returnFocus: true,
@@ -118,6 +145,7 @@ const Menu = factory((_props) => {
 			unstyled,
 			variant,
 			keepMounted,
+			onExitTransitionEnd: handleExitTransitionEnd,
 			children
 		})
 	});
@@ -129,7 +157,13 @@ Menu.Label = MenuLabel;
 Menu.Dropdown = MenuDropdown;
 Menu.Target = MenuTarget;
 Menu.Divider = MenuDivider;
+Menu.Search = MenuSearch;
 Menu.Sub = MenuSub;
+Menu.CheckboxItem = MenuCheckboxItem;
+Menu.CheckboxGroup = MenuCheckboxGroup;
+Menu.RadioItem = MenuRadioItem;
+Menu.RadioGroup = MenuRadioGroup;
+Menu.ContextMenu = MenuContextMenu;
 //#endregion
 export { Menu };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.mjs","names":["classes"],"sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n  factory,\n  Factory,\n  getContextItemIndex,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { useDelayedHover } from '../../utils/Floating';\nimport { __PopoverProps, Popover, PopoverStylesNames } from '../Popover';\nimport { MenuContextProvider, type MenuContextValue } from './Menu.context';\nimport { MenuDivider, type MenuDividerProps } from './MenuDivider/MenuDivider';\nimport { MenuDropdown, type MenuDropdownProps } from './MenuDropdown/MenuDropdown';\nimport { MenuItem, type MenuItemProps } from './MenuItem/MenuItem';\nimport { MenuLabel, type MenuLabelProps } from './MenuLabel/MenuLabel';\nimport { MenuSub, type MenuSubProps } from './MenuSub/MenuSub';\nimport { MenuTarget, type MenuTargetProps } from './MenuTarget/MenuTarget';\nimport classes from './Menu.module.css';\nimport type { MenuSubDropdownProps } from './MenuSubDropdown/MenuSubDropdown';\nimport type { MenuSubItemProps } from './MenuSubItem/MenuSubItem';\nimport type { MenuSubTargetProps } from './MenuSubTarget/MenuSubTarget';\n\nexport type MenuStylesNames =\n  | 'item'\n  | 'itemLabel'\n  | 'itemSection'\n  | 'label'\n  | 'divider'\n  | 'chevron'\n  | PopoverStylesNames;\n\nexport type MenuFactory = Factory<{\n  props: MenuProps;\n  stylesNames: MenuStylesNames;\n  staticComponents: {\n    Item: typeof MenuItem;\n    Label: typeof MenuLabel;\n    Dropdown: typeof MenuDropdown;\n    Target: typeof MenuTarget;\n    Divider: typeof MenuDivider;\n    Sub: typeof MenuSub;\n  };\n}>;\n\nexport interface MenuProps extends __PopoverProps, StylesApiProps<MenuFactory> {\n  variant?: string;\n\n  /** Menu children */\n  children?: React.ReactNode;\n\n  /** Controlled menu opened state */\n  opened?: boolean;\n\n  /** Uncontrolled menu initial opened state */\n  defaultOpened?: boolean;\n\n  /** If set, focus is trapped within the menu dropdown when it is opened */\n  trapFocus?: boolean;\n\n  /** Called when menu opened state changes */\n  onChange?: (opened: boolean) => void;\n\n  /** Called when Menu is opened */\n  onOpen?: () => void;\n\n  /** Called when Menu is closed */\n  onClose?: () => void;\n\n  /** If set, the Menu is closed when one of the items is clicked. Can be overridden per item with `closeMenuOnClick` prop */\n  closeOnItemClick?: boolean;\n\n  /** If set, arrow key presses wrap around from last item to first and vice versa */\n  loop?: boolean;\n\n  /** If set, the dropdown is closed when the `Escape` key is pressed @default true */\n  closeOnEscape?: boolean;\n\n  /** Event trigger to open menu. Note: 'hover' is not keyboard accessible; prefer 'click-hover' for accessible hover menus */\n  trigger?: 'click' | 'hover' | 'click-hover';\n\n  /** Open delay in ms, applicable only to `trigger=\"hover\"` variant */\n  openDelay?: number;\n\n  /** Close delay in ms, applicable only to `trigger=\"hover\"` variant */\n  closeDelay?: number;\n\n  /** If set, the dropdown is closed on outside clicks */\n  closeOnClickOutside?: boolean;\n\n  /** Events that trigger outside click detection. Includes mousedown for desktop clicks, touchstart for mobile, and keydown for Escape key handling @default ['mousedown', 'touchstart', 'keydown'] */\n  clickOutsideEvents?: string[];\n\n  /** Id base to create accessibility connections */\n  id?: string;\n\n  /** Set the `tabindex` on all menu items. Use `0` to allow Tab key navigation through menu items (required for navigation menus following WAI-ARIA disclosure pattern). @default -1 */\n  menuItemTabIndex?: -1 | 0;\n\n  /** Adds a hidden focusable element at the start of the dropdown to prevent unexpected focus jumps when opening with keyboard. Set to false if you need custom focus management. @default true */\n  withInitialFocusPlaceholder?: boolean;\n\n  /** Determines whether focus should be automatically returned to control when dropdown closes @default `true` */\n  returnFocus?: boolean;\n}\n\nconst defaultProps = {\n  trapFocus: true,\n  closeOnItemClick: true,\n  withInitialFocusPlaceholder: true,\n  clickOutsideEvents: ['mousedown', 'touchstart', 'keydown'],\n  loop: true,\n  trigger: 'click',\n  openDelay: 0,\n  closeDelay: 100,\n  menuItemTabIndex: -1,\n} satisfies Partial<MenuProps>;\n\nexport const Menu = factory<MenuFactory>((_props) => {\n  const props = useProps('Menu', defaultProps, _props);\n  const {\n    children,\n    onOpen,\n    onClose,\n    opened,\n    defaultOpened,\n    trapFocus,\n    onChange,\n    closeOnItemClick,\n    loop,\n    closeOnEscape,\n    trigger,\n    openDelay,\n    closeDelay,\n    classNames,\n    styles,\n    unstyled,\n    variant,\n    vars,\n    menuItemTabIndex,\n    keepMounted,\n    withInitialFocusPlaceholder,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<MenuFactory>({\n    name: 'Menu',\n    classes,\n    props,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n  });\n\n  const [_opened, setOpened] = useUncontrolled({\n    value: opened,\n    defaultValue: defaultOpened,\n    finalValue: false,\n    onChange,\n  });\n  const [openedViaClick, setOpenedViaClick] = useState(false);\n\n  const close = () => {\n    setOpened(false);\n    setOpenedViaClick(false);\n    _opened && onClose?.();\n  };\n\n  const open = () => {\n    setOpened(true);\n    !_opened && onOpen?.();\n  };\n\n  const toggleDropdown = () => {\n    _opened ? close() : open();\n  };\n\n  const { openDropdown, closeDropdown } = useDelayedHover({ open, close, closeDelay, openDelay });\n\n  const activeSubCloseRef = useRef<(() => void) | null>(null);\n  const registerOpenSub = useCallback((closeFn: () => void) => {\n    const prev = activeSubCloseRef.current;\n    if (prev && prev !== closeFn) {\n      prev();\n    }\n    activeSubCloseRef.current = closeFn;\n    return () => {\n      if (activeSubCloseRef.current === closeFn) {\n        activeSubCloseRef.current = null;\n      }\n    };\n  }, []);\n\n  const getItemIndex = (node: HTMLButtonElement) =>\n    getContextItemIndex('[data-menu-item]', '[data-menu-dropdown]', node);\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<MenuFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <MenuContextProvider\n      value={{\n        getStyles,\n        opened: _opened,\n        toggleDropdown,\n        getItemIndex,\n        openedViaClick,\n        setOpenedViaClick,\n        closeOnItemClick,\n        closeDropdown: trigger === 'click' ? close : closeDropdown,\n        openDropdown: trigger === 'click' ? open : openDropdown,\n        closeDropdownImmediately: close,\n        loop,\n        trigger,\n        unstyled,\n        menuItemTabIndex,\n        withInitialFocusPlaceholder,\n        registerOpenSub,\n      }}\n    >\n      <Popover\n        returnFocus\n        {...others}\n        opened={_opened}\n        onChange={toggleDropdown}\n        defaultOpened={defaultOpened}\n        trapFocus={keepMounted ? false : trapFocus}\n        closeOnEscape={closeOnEscape}\n        __staticSelector=\"Menu\"\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        variant={variant}\n        keepMounted={keepMounted}\n      >\n        {children}\n      </Popover>\n    </MenuContextProvider>\n  );\n});\n\nMenu.displayName = '@mantine/core/Menu';\nMenu.classes = classes;\nMenu.Item = MenuItem;\nMenu.Label = MenuLabel;\nMenu.Dropdown = MenuDropdown;\nMenu.Target = MenuTarget;\nMenu.Divider = MenuDivider;\nMenu.Sub = MenuSub;\n\nexport namespace Menu {\n  export type Props = MenuProps;\n  export type StylesNames = MenuStylesNames;\n  export type Factory = MenuFactory;\n  export type ContextValue = MenuContextValue;\n\n  export namespace Item {\n    export type Props = MenuItemProps;\n  }\n\n  export namespace Label {\n    export type Props = MenuLabelProps;\n  }\n\n  export namespace Divider {\n    export type Props = MenuDividerProps;\n  }\n\n  export namespace Dropdown {\n    export type Props = MenuDropdownProps;\n  }\n\n  export namespace Target {\n    export type Props = MenuTargetProps;\n  }\n\n  export namespace Sub {\n    export type Props = MenuSubProps;\n  }\n\n  export namespace SubDropdown {\n    export type Props = MenuSubDropdownProps;\n  }\n\n  export namespace SubItem {\n    export type Props = MenuSubItemProps;\n  }\n\n  export namespace SubTarget {\n    export type Props = MenuSubTargetProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4GA,MAAM,eAAe;CACnB,WAAW;CACX,kBAAkB;CAClB,6BAA6B;CAC7B,oBAAoB;EAAC;EAAa;EAAc;CAAS;CACzD,MAAM;CACN,SAAS;CACT,WAAW;CACX,YAAY;CACZ,kBAAkB;AACpB;AAEA,MAAa,OAAO,SAAsB,WAAW;CACnD,MAAM,QAAQ,SAAS,QAAQ,cAAc,MAAM;CACnD,MAAM,EACJ,UACA,QACA,SACA,QACA,eACA,WACA,UACA,kBACA,MACA,eACA,SACA,WACA,YACA,YACA,QACA,UACA,SACA,MACA,kBACA,aACA,6BACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,CAAC,SAAS,aAAa,gBAAgB;EAC3C,OAAO;EACP,cAAc;EACd,YAAY;EACZ;CACF,CAAC;CACD,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,KAAK;CAE1D,MAAM,cAAc;EAClB,UAAU,KAAK;EACf,kBAAkB,KAAK;EACvB,WAAW,UAAU;CACvB;CAEA,MAAM,aAAa;EACjB,UAAU,IAAI;EACd,CAAC,WAAW,SAAS;CACvB;CAEA,MAAM,uBAAuB;EAC3B,UAAU,MAAM,IAAI,KAAK;CAC3B;CAEA,MAAM,EAAE,cAAc,kBAAkB,gBAAgB;EAAE;EAAM;EAAO;EAAY;CAAU,CAAC;CAE9F,MAAM,oBAAoB,OAA4B,IAAI;CAC1D,MAAM,kBAAkB,aAAa,YAAwB;EAC3D,MAAM,OAAO,kBAAkB;EAC/B,IAAI,QAAQ,SAAS,SACnB,KAAK;EAEP,kBAAkB,UAAU;EAC5B,aAAa;GACX,IAAI,kBAAkB,YAAY,SAChC,kBAAkB,UAAU;EAEhC;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB,SACpB,oBAAoB,oBAAoB,wBAAwB,IAAI;CAEtE,MAAM,EAAE,oBAAoB,mBAAmB,qBAAkC;EAC/E;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,qBAAD;EACE,OAAO;GACL;GACA,QAAQ;GACR;GACA;GACA;GACA;GACA;GACA,eAAe,YAAY,UAAU,QAAQ;GAC7C,cAAc,YAAY,UAAU,OAAO;GAC3C,0BAA0B;GAC1B;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,oBAAC,SAAD;GACE,aAAA;GACA,GAAI;GACJ,QAAQ;GACR,UAAU;GACK;GACf,WAAW,cAAc,QAAQ;GAClB;GACf,kBAAiB;GACjB,YAAY;GACZ,QAAQ;GACE;GACD;GACI;GAEZ;EACM,CAAA;CACU,CAAA;AAEzB,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,UAAUA;AACf,KAAK,OAAO;AACZ,KAAK,QAAQ;AACb,KAAK,WAAW;AAChB,KAAK,SAAS;AACd,KAAK,UAAU;AACf,KAAK,MAAM"}
+{"version":3,"file":"Menu.mjs","names":["classes"],"sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n  factory,\n  Factory,\n  getContextItemIndex,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { useDelayedHover } from '../../utils/Floating';\nimport { __PopoverProps, Popover, PopoverStylesNames } from '../Popover';\nimport { MenuContextProvider, type MenuContextValue } from './Menu.context';\nimport {\n  MenuCheckboxGroup,\n  type MenuCheckboxGroupProps,\n} from './MenuCheckboxGroup/MenuCheckboxGroup';\nimport { MenuCheckboxItem, type MenuCheckboxItemProps } from './MenuCheckboxItem/MenuCheckboxItem';\nimport { MenuContextMenu, type MenuContextMenuProps } from './MenuContextMenu/MenuContextMenu';\nimport { MenuDivider, type MenuDividerProps } from './MenuDivider/MenuDivider';\nimport { MenuDropdown, type MenuDropdownProps } from './MenuDropdown/MenuDropdown';\nimport { MenuItem, type MenuItemProps } from './MenuItem/MenuItem';\nimport { MenuLabel, type MenuLabelProps } from './MenuLabel/MenuLabel';\nimport { MenuRadioGroup, type MenuRadioGroupProps } from './MenuRadioGroup/MenuRadioGroup';\nimport { MenuRadioItem, type MenuRadioItemProps } from './MenuRadioItem/MenuRadioItem';\nimport { MenuSearch, type MenuSearchProps } from './MenuSearch/MenuSearch';\nimport { MenuSub, type MenuSubProps } from './MenuSub/MenuSub';\nimport { MenuTarget, type MenuTargetProps } from './MenuTarget/MenuTarget';\nimport classes from './Menu.module.css';\nimport type { MenuSubDropdownProps } from './MenuSubDropdown/MenuSubDropdown';\nimport type { MenuSubItemProps } from './MenuSubItem/MenuSubItem';\nimport type { MenuSubTargetProps } from './MenuSubTarget/MenuSubTarget';\n\nexport type MenuStylesNames =\n  | 'item'\n  | 'itemLabel'\n  | 'itemSection'\n  | 'itemIndicator'\n  | 'label'\n  | 'divider'\n  | 'chevron'\n  | 'search'\n  | PopoverStylesNames;\n\nexport type MenuFactory = Factory<{\n  props: MenuProps;\n  stylesNames: MenuStylesNames;\n  staticComponents: {\n    Item: typeof MenuItem;\n    Label: typeof MenuLabel;\n    Dropdown: typeof MenuDropdown;\n    Target: typeof MenuTarget;\n    Divider: typeof MenuDivider;\n    Search: typeof MenuSearch;\n    Sub: typeof MenuSub;\n    CheckboxItem: typeof MenuCheckboxItem;\n    CheckboxGroup: typeof MenuCheckboxGroup;\n    RadioItem: typeof MenuRadioItem;\n    RadioGroup: typeof MenuRadioGroup;\n    ContextMenu: typeof MenuContextMenu;\n  };\n}>;\n\nexport interface MenuProps extends __PopoverProps, StylesApiProps<MenuFactory> {\n  variant?: string;\n\n  /** Menu children */\n  children?: React.ReactNode;\n\n  /** Controlled menu opened state */\n  opened?: boolean;\n\n  /** Uncontrolled menu initial opened state */\n  defaultOpened?: boolean;\n\n  /** If set, focus is trapped within the menu dropdown when it is opened */\n  trapFocus?: boolean;\n\n  /** Called when menu opened state changes */\n  onChange?: (opened: boolean) => void;\n\n  /** Called when Menu is opened */\n  onOpen?: () => void;\n\n  /** Called when Menu is closed */\n  onClose?: () => void;\n\n  /** If set, the Menu is closed when one of the items is clicked. Can be overridden per item with `closeMenuOnClick` prop */\n  closeOnItemClick?: boolean;\n\n  /** If set, arrow key presses wrap around from last item to first and vice versa */\n  loop?: boolean;\n\n  /** If set, the dropdown is closed when the `Escape` key is pressed @default true */\n  closeOnEscape?: boolean;\n\n  /** Event trigger to open menu. Note: 'hover' is not keyboard accessible; prefer 'click-hover' for accessible hover menus */\n  trigger?: 'click' | 'hover' | 'click-hover';\n\n  /** Open delay in ms, applicable only to `trigger=\"hover\"` variant */\n  openDelay?: number;\n\n  /** Close delay in ms, applicable only to `trigger=\"hover\"` variant */\n  closeDelay?: number;\n\n  /** If set, the dropdown is closed on outside clicks */\n  closeOnClickOutside?: boolean;\n\n  /** Events that trigger outside click detection. Includes mousedown for desktop clicks, touchstart for mobile, and keydown for Escape key handling @default ['mousedown', 'touchstart', 'keydown'] */\n  clickOutsideEvents?: string[];\n\n  /** Id base to create accessibility connections */\n  id?: string;\n\n  /** Set the `tabindex` on all menu items. Use `0` to allow Tab key navigation through menu items (required for navigation menus following WAI-ARIA disclosure pattern). @default -1 */\n  menuItemTabIndex?: -1 | 0;\n\n  /** Adds a hidden focusable element at the start of the dropdown to prevent unexpected focus jumps when opening with keyboard. Set to false if you need custom focus management. @default true */\n  withInitialFocusPlaceholder?: boolean;\n\n  /** Determines whether focus should be automatically returned to control when dropdown closes @default `true` */\n  returnFocus?: boolean;\n\n  /** Controls how indicator slot space is reserved on menu items for label alignment. `'all'` reserves space on every `Menu.Item`, `'with-indicators'` reserves space only on `Menu.CheckboxItem` and `Menu.RadioItem`, `'none'` reserves space only on items that currently display an indicator. @default 'with-indicators' */\n  alignItemsLabels?: 'all' | 'with-indicators' | 'none';\n\n  /** Custom icon rendered as the indicator of checked `Menu.CheckboxItem` and selected `Menu.RadioItem`. Can be overridden per item with the `checkIcon` prop. */\n  checkIcon?: React.ReactNode;\n}\n\nconst defaultProps = {\n  trapFocus: true,\n  closeOnItemClick: true,\n  withInitialFocusPlaceholder: true,\n  clickOutsideEvents: ['mousedown', 'touchstart', 'keydown'],\n  loop: true,\n  trigger: 'click',\n  openDelay: 0,\n  closeDelay: 100,\n  menuItemTabIndex: -1,\n  alignItemsLabels: 'with-indicators',\n} satisfies Partial<MenuProps>;\n\nexport const Menu = factory<MenuFactory>((_props) => {\n  const props = useProps('Menu', defaultProps, _props);\n  const {\n    children,\n    onOpen,\n    onClose,\n    opened,\n    defaultOpened,\n    trapFocus,\n    onChange,\n    closeOnItemClick,\n    loop,\n    closeOnEscape,\n    trigger,\n    openDelay,\n    closeDelay,\n    classNames,\n    styles,\n    unstyled,\n    variant,\n    vars,\n    menuItemTabIndex,\n    keepMounted,\n    withInitialFocusPlaceholder,\n    attributes,\n    onExitTransitionEnd,\n    alignItemsLabels,\n    checkIcon,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<MenuFactory>({\n    name: 'Menu',\n    classes,\n    props,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n  });\n\n  const [_opened, setOpened] = useUncontrolled({\n    value: opened,\n    defaultValue: defaultOpened,\n    finalValue: false,\n    onChange,\n  });\n  const [openedViaClick, setOpenedViaClick] = useState(false);\n\n  const close = () => {\n    setOpened(false);\n    setOpenedViaClick(false);\n    _opened && onClose?.();\n  };\n\n  const open = () => {\n    setOpened(true);\n    !_opened && onOpen?.();\n  };\n\n  const toggleDropdown = () => {\n    _opened ? close() : open();\n  };\n\n  const { openDropdown, closeDropdown } = useDelayedHover({ open, close, closeDelay, openDelay });\n\n  const activeSubCloseRef = useRef<(() => void) | null>(null);\n  const registerOpenSub = useCallback((closeFn: () => void) => {\n    const prev = activeSubCloseRef.current;\n    if (prev && prev !== closeFn) {\n      prev();\n    }\n    activeSubCloseRef.current = closeFn;\n    return () => {\n      if (activeSubCloseRef.current === closeFn) {\n        activeSubCloseRef.current = null;\n      }\n    };\n  }, []);\n\n  const searchCountRef = useRef(0);\n  const [hasSearch, setHasSearch] = useState(false);\n  const registerSearch = useCallback(() => {\n    searchCountRef.current += 1;\n    if (searchCountRef.current === 1) {\n      setHasSearch(true);\n    }\n    return () => {\n      searchCountRef.current -= 1;\n      if (searchCountRef.current === 0) {\n        setHasSearch(false);\n      }\n    };\n  }, []);\n\n  const searchExitClearRef = useRef<(() => void) | null>(null);\n  const handleExitTransitionEnd = () => {\n    searchExitClearRef.current?.();\n    onExitTransitionEnd?.();\n  };\n\n  const getItemIndex = (node: HTMLButtonElement) =>\n    getContextItemIndex('[data-menu-item]', '[data-menu-dropdown]', node);\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<MenuFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <MenuContextProvider\n      value={{\n        getStyles,\n        opened: _opened,\n        toggleDropdown,\n        getItemIndex,\n        openedViaClick,\n        setOpenedViaClick,\n        closeOnItemClick,\n        closeDropdown: trigger === 'click' ? close : closeDropdown,\n        openDropdown: trigger === 'click' ? open : openDropdown,\n        closeDropdownImmediately: close,\n        loop,\n        trigger,\n        unstyled,\n        menuItemTabIndex,\n        withInitialFocusPlaceholder,\n        registerOpenSub,\n        hasSearch,\n        registerSearch,\n        searchExitClearRef,\n        alignItemsLabels: alignItemsLabels!,\n        checkIcon,\n      }}\n    >\n      <Popover\n        returnFocus\n        {...others}\n        opened={_opened}\n        onChange={toggleDropdown}\n        defaultOpened={defaultOpened}\n        trapFocus={keepMounted ? false : trapFocus}\n        closeOnEscape={closeOnEscape}\n        __staticSelector=\"Menu\"\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        variant={variant}\n        keepMounted={keepMounted}\n        onExitTransitionEnd={handleExitTransitionEnd}\n      >\n        {children}\n      </Popover>\n    </MenuContextProvider>\n  );\n});\n\nMenu.displayName = '@mantine/core/Menu';\nMenu.classes = classes;\nMenu.Item = MenuItem;\nMenu.Label = MenuLabel;\nMenu.Dropdown = MenuDropdown;\nMenu.Target = MenuTarget;\nMenu.Divider = MenuDivider;\nMenu.Search = MenuSearch;\nMenu.Sub = MenuSub;\nMenu.CheckboxItem = MenuCheckboxItem;\nMenu.CheckboxGroup = MenuCheckboxGroup;\nMenu.RadioItem = MenuRadioItem;\nMenu.RadioGroup = MenuRadioGroup;\nMenu.ContextMenu = MenuContextMenu;\n\nexport namespace Menu {\n  export type Props = MenuProps;\n  export type StylesNames = MenuStylesNames;\n  export type Factory = MenuFactory;\n  export type ContextValue = MenuContextValue;\n\n  export namespace Item {\n    export type Props = MenuItemProps;\n  }\n\n  export namespace Label {\n    export type Props = MenuLabelProps;\n  }\n\n  export namespace Divider {\n    export type Props = MenuDividerProps;\n  }\n\n  export namespace Dropdown {\n    export type Props = MenuDropdownProps;\n  }\n\n  export namespace Target {\n    export type Props = MenuTargetProps;\n  }\n\n  export namespace Search {\n    export type Props = MenuSearchProps;\n  }\n\n  export namespace Sub {\n    export type Props = MenuSubProps;\n  }\n\n  export namespace CheckboxItem {\n    export type Props = MenuCheckboxItemProps;\n  }\n\n  export namespace RadioItem {\n    export type Props = MenuRadioItemProps;\n  }\n\n  export namespace RadioGroup {\n    export type Props = MenuRadioGroupProps;\n  }\n\n  export namespace CheckboxGroup {\n    export type Props = MenuCheckboxGroupProps;\n  }\n\n  export namespace ContextMenu {\n    export type Props = MenuContextMenuProps;\n  }\n\n  export namespace SubDropdown {\n    export type Props = MenuSubDropdownProps;\n  }\n\n  export namespace SubItem {\n    export type Props = MenuSubItemProps;\n  }\n\n  export namespace SubTarget {\n    export type Props = MenuSubTargetProps;\n  }\n}\n"],"mappings":"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"}

package/esm/components/Menu/Menu.module.mjs

@@ -5,7 +5,9 @@ var Menu_module_default = {
 	"label": "m_9bfac126",
 	"divider": "m_efdf90cb",
 	"item": "m_99ac2aa1",
+	"search": "m_ef8769b6",
 	"itemLabel": "m_5476e0d3",
+	"itemIndicator": "m_8395186e",
 	"itemSection": "m_8b75e504",
 	"chevron": "m_b85b0bed"
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.module.mjs","names":[],"sources":["../../../src/components/Menu/Menu.module.css"],"sourcesContent":[".dropdown {\n  padding: 4px;\n}\n\n.label {\n  color: var(--mantine-color-dimmed);\n  font-weight: var(--mantine-font-weight-medium);\n  font-size: var(--mantine-font-size-xs);\n  padding: calc(var(--mantine-spacing-xs) / 2) var(--mantine-spacing-sm);\n  cursor: default;\n}\n\n.divider {\n  margin-top: 4px;\n  margin-bottom: 4px;\n  border-top: 1px solid;\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-2);\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-4);\n  }\n}\n\n.item {\n  font-size: var(--mantine-font-size-sm);\n  width: 100%;\n  padding: calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-sm);\n  border-radius: var(--popover-radius, var(--mantine-radius-default));\n  color: var(--menu-item-color, var(--mantine-color-text));\n  display: flex;\n  align-items: center;\n  user-select: none;\n\n  &:where([data-disabled], :disabled) {\n    color: var(--mantine-color-disabled-color);\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  &:where(:hover, :focus) {\n    &:where(:not(:disabled, [data-disabled])) {\n      @mixin where-light {\n        background-color: var(--menu-item-hover, var(--mantine-color-gray-1));\n      }\n\n      @mixin where-dark {\n        background-color: var(--menu-item-hover, var(--mantine-color-dark-4));\n      }\n    }\n  }\n\n  &:where([data-sub-menu-item]) {\n    padding-inline-end: 5px;\n  }\n}\n\n.itemLabel {\n  flex: 1;\n}\n\n.itemSection {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  &:where([data-position='left']) {\n    margin-inline-end: var(--mantine-spacing-xs);\n  }\n\n  &:where([data-position='right']) {\n    margin-inline-start: var(--mantine-spacing-xs);\n  }\n}\n\n.chevron {\n  transform: rotate(-90deg);\n\n  @mixin where-rtl {\n    transform: rotate(90deg);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Menu.module.mjs","names":[],"sources":["../../../src/components/Menu/Menu.module.css"],"sourcesContent":[".dropdown {\n  padding: 4px;\n}\n\n.label {\n  color: var(--mantine-color-dimmed);\n  font-weight: var(--mantine-font-weight-medium);\n  font-size: var(--mantine-font-size-xs);\n  padding: calc(var(--mantine-spacing-xs) / 2) var(--mantine-spacing-sm);\n  cursor: default;\n}\n\n.divider {\n  margin-top: 4px;\n  margin-bottom: 4px;\n  border-top: 1px solid;\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-2);\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-4);\n  }\n}\n\n.item {\n  font-size: var(--mantine-font-size-sm);\n  width: 100%;\n  padding: calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-sm);\n  border-radius: var(--popover-radius, var(--mantine-radius-default));\n  color: var(--menu-item-color, var(--mantine-color-text));\n  display: flex;\n  align-items: center;\n  user-select: none;\n\n  &:where([data-disabled], :disabled) {\n    color: var(--mantine-color-disabled-color);\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  &:where(:hover, :focus, [data-menu-active]) {\n    &:where(:not(:disabled, [data-disabled])) {\n      @mixin where-light {\n        background-color: var(--menu-item-hover, var(--mantine-color-gray-1));\n      }\n\n      @mixin where-dark {\n        background-color: var(--menu-item-hover, var(--mantine-color-dark-4));\n      }\n    }\n  }\n\n  &:where([data-sub-menu-item]) {\n    padding-inline-end: 5px;\n  }\n}\n\n.search {\n  --menu-search-padding: var(--popover-padding, 4px);\n\n  margin-inline: calc(var(--menu-search-padding) * -1);\n  margin-top: calc(var(--menu-search-padding) * -1);\n  width: calc(100% + var(--menu-search-padding) * 2);\n  border-top-width: 0;\n  border-inline-width: 0;\n  border-end-start-radius: 0;\n  border-end-end-radius: 0;\n  margin-bottom: var(--menu-search-padding);\n\n  &,\n  &:focus {\n    @mixin where-light {\n      border-color: var(--mantine-color-gray-2);\n    }\n\n    @mixin where-dark {\n      border-color: var(--mantine-color-dark-4);\n    }\n  }\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-7);\n  }\n}\n\n.itemLabel {\n  flex: 1;\n}\n\n.itemIndicator {\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-inline-end: 8px;\n}\n\n.itemSection {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  &:where([data-position='left']) {\n    margin-inline-end: var(--mantine-spacing-xs);\n  }\n\n  &:where([data-position='right']) {\n    margin-inline-start: var(--mantine-spacing-xs);\n  }\n}\n\n.chevron {\n  transform: rotate(-90deg);\n\n  @mixin where-rtl {\n    transform: rotate(90deg);\n  }\n}\n"],"mappings":""}

package/esm/components/Menu/MenuCheckboxGroup/MenuCheckboxGroup.context.mjs

@@ -0,0 +1,8 @@
+"use client";
+import { createContext } from "react";
+//#region packages/@mantine/core/src/components/Menu/MenuCheckboxGroup/MenuCheckboxGroup.context.tsx
+const MenuCheckboxGroupContext = createContext(null);
+//#endregion
+export { MenuCheckboxGroupContext };
+
+//# sourceMappingURL=MenuCheckboxGroup.context.mjs.map