@mantine/core 9.3.1 → 9.4.0

package/esm/components/ComboboxPopover/ComboboxPopover.mjs

@@ -0,0 +1,216 @@
+"use client";
+import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
+import { useResolvedStylesApi } from "../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.mjs";
+import { genericFactory } from "../../core/factory/factory.mjs";
+import { ScrollArea } from "../ScrollArea/ScrollArea.mjs";
+import { getParsedComboboxData } from "../Combobox/get-parsed-combobox-data/get-parsed-combobox-data.mjs";
+import { getOptionsLockup } from "../Combobox/get-options-lockup/get-options-lockup.mjs";
+import Combobox_module_default from "../Combobox/Combobox.module.mjs";
+import { useCombobox } from "../Combobox/use-combobox/use-combobox.mjs";
+import { Combobox } from "../Combobox/Combobox.mjs";
+import { CheckIcon } from "../Checkbox/CheckIcon.mjs";
+import { isOptionsGroup } from "../Combobox/OptionsDropdown/is-options-group.mjs";
+import { defaultOptionsFilter } from "../Combobox/OptionsDropdown/default-options-filter.mjs";
+import { isEmptyComboboxData } from "../Combobox/OptionsDropdown/is-empty-combobox-data.mjs";
+import { OptionsDropdown } from "../Combobox/OptionsDropdown/OptionsDropdown.mjs";
+import { ComboboxPopoverTarget } from "./ComboboxPopoverTarget.mjs";
+import { useMemo } from "react";
+import { useUncontrolled } from "@mantine/hooks";
+import cx from "clsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/ComboboxPopover/ComboboxPopover.tsx
+function isValueChecked(value, optionValue) {
+	return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;
+}
+function Option({ data, withCheckIcon, withAlignedLabels, value, checkIconPosition, unstyled, renderOption }) {
+	if (isOptionsGroup(data)) {
+		const options = data.items.map((item) => /* @__PURE__ */ jsx(Option, {
+			data: item,
+			value,
+			unstyled,
+			withCheckIcon,
+			withAlignedLabels,
+			checkIconPosition,
+			renderOption
+		}, `${item.value}`));
+		return /* @__PURE__ */ jsx(Combobox.Group, {
+			label: data.group,
+			children: options
+		});
+	}
+	const checked = isValueChecked(value, data.value);
+	const check = withCheckIcon && (checked ? /* @__PURE__ */ jsx(CheckIcon, { className: Combobox_module_default.optionsDropdownCheckIcon }) : withAlignedLabels ? /* @__PURE__ */ jsx("div", { className: Combobox_module_default.optionsDropdownCheckPlaceholder }) : null);
+	const defaultContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		checkIconPosition === "left" && check,
+		/* @__PURE__ */ jsx("span", { children: data.label }),
+		checkIconPosition === "right" && check
+	] });
+	return /* @__PURE__ */ jsx(Combobox.Option, {
+		value: data.value,
+		disabled: data.disabled,
+		className: cx({ [Combobox_module_default.optionsDropdownOption]: !unstyled }),
+		"data-reverse": checkIconPosition === "right" || void 0,
+		"data-checked": checked || void 0,
+		"aria-selected": checked,
+		active: checked,
+		children: typeof renderOption === "function" ? renderOption({
+			option: data,
+			checked
+		}) : defaultContent
+	});
+}
+function SearchableDropdown({ data, filter, search, limit, nothingFoundMessage, withScrollArea = true, maxDropdownHeight, value, checkIconPosition, withCheckIcon = false, withAlignedLabels = false, unstyled, renderOption, scrollAreaProps, onSearchChange }) {
+	const filteredData = (filter || defaultOptionsFilter)({
+		options: data,
+		search,
+		limit: limit ?? Infinity
+	});
+	const isEmpty = isEmptyComboboxData(filteredData);
+	const options = filteredData.map((item, index) => /* @__PURE__ */ jsx(Option, {
+		data: item,
+		withCheckIcon,
+		withAlignedLabels,
+		value,
+		checkIconPosition,
+		unstyled,
+		renderOption
+	}, isOptionsGroup(item) ? `group-${typeof item.group === "string" ? item.group : index}` : `${item.value}`));
+	return /* @__PURE__ */ jsxs(Combobox.Dropdown, {
+		"data-composed": true,
+		children: [/* @__PURE__ */ jsx(Combobox.Search, {
+			value: search,
+			onChange: onSearchChange,
+			placeholder: "Search..."
+		}), /* @__PURE__ */ jsxs(Combobox.Options, { children: [withScrollArea ? /* @__PURE__ */ jsx(ScrollArea.Autosize, {
+			mah: maxDropdownHeight ?? 220,
+			type: "scroll",
+			scrollbarSize: "var(--combobox-padding)",
+			offsetScrollbars: "y",
+			...scrollAreaProps,
+			children: options
+		}) : options, isEmpty && nothingFoundMessage && /* @__PURE__ */ jsx(Combobox.Empty, { children: nothingFoundMessage })] })]
+	});
+}
+const defaultProps = {
+	withCheckIcon: true,
+	allowDeselect: true,
+	checkIconPosition: "left",
+	hiddenInputValuesDivider: ","
+};
+const ComboboxPopover = genericFactory((_props) => {
+	const props = useProps("ComboboxPopover", defaultProps, _props);
+	const { classNames, styles, unstyled, vars, children, multiple, value, defaultValue, onChange, data, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, onOptionSubmit, comboboxProps, filter, limit, withScrollArea, maxDropdownHeight, selectFirstOptionOnDropdownOpen, withCheckIcon, withAlignedLabels, checkIconPosition, nothingFoundMessage, searchable, searchValue, defaultSearchValue, onSearchChange, allowDeselect, renderOption, scrollAreaProps, hiddenInputProps, name, form, hiddenInputValuesDivider, attributes, ...others } = props;
+	const parsedData = useMemo(() => getParsedComboboxData(data), [data]);
+	const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);
+	const [_value, setValue] = useUncontrolled({
+		value,
+		defaultValue,
+		finalValue: multiple ? [] : null,
+		onChange
+	});
+	const [_searchValue, setSearchValue] = useUncontrolled({
+		value: searchValue,
+		defaultValue: defaultSearchValue,
+		finalValue: "",
+		onChange: onSearchChange
+	});
+	const combobox = useCombobox({
+		opened: dropdownOpened,
+		defaultOpened: defaultDropdownOpened,
+		onDropdownOpen: () => {
+			onDropdownOpen?.();
+			if (searchable) combobox.focusSearchInput();
+			if (selectFirstOptionOnDropdownOpen) combobox.selectFirstOption();
+		},
+		onDropdownClose: () => {
+			onDropdownClose?.();
+			combobox.resetSelectedOption();
+			if (searchable) combobox.focusTarget();
+		}
+	});
+	const handleSearchChange = (val) => {
+		setSearchValue(val);
+		combobox.resetSelectedOption();
+	};
+	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
+		props,
+		styles,
+		classNames
+	});
+	const handleOptionSubmit = (val) => {
+		onOptionSubmit?.(val);
+		const option = optionsLockup[val];
+		if (multiple) {
+			const currentValue = Array.isArray(_value) ? _value : [];
+			if (currentValue.includes(option.value)) setValue(currentValue.filter((v) => v !== option.value));
+			else setValue([...currentValue, option.value]);
+			combobox.updateSelectedOptionIndex("selected");
+		} else {
+			setValue(allowDeselect && `${option.value}` === `${_value}` ? null : option.value);
+			combobox.closeDropdown();
+		}
+		if (searchable) handleSearchChange("");
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Combobox, {
+		store: combobox,
+		__staticSelector: "ComboboxPopover",
+		classNames: resolvedClassNames,
+		styles: resolvedStyles,
+		unstyled,
+		attributes,
+		onOptionSubmit: handleOptionSubmit,
+		...comboboxProps,
+		...others,
+		children: [children, searchable ? /* @__PURE__ */ jsx(SearchableDropdown, {
+			data: parsedData,
+			filter,
+			search: _searchValue,
+			limit,
+			nothingFoundMessage,
+			withScrollArea,
+			maxDropdownHeight,
+			value: _value,
+			checkIconPosition,
+			withCheckIcon,
+			withAlignedLabels,
+			unstyled,
+			renderOption,
+			scrollAreaProps,
+			onSearchChange: (event) => {
+				handleSearchChange(event.currentTarget.value);
+			}
+		}) : /* @__PURE__ */ jsx(OptionsDropdown, {
+			data: parsedData,
+			filter,
+			search: void 0,
+			limit,
+			hiddenWhenEmpty: !nothingFoundMessage,
+			withScrollArea,
+			maxDropdownHeight,
+			filterOptions: false,
+			value: _value,
+			checkIconPosition,
+			withCheckIcon,
+			withAlignedLabels,
+			nothingFoundMessage,
+			unstyled,
+			renderOption,
+			scrollAreaProps,
+			labelId: void 0,
+			"aria-label": void 0
+		})]
+	}), /* @__PURE__ */ jsx(Combobox.HiddenInput, {
+		name,
+		value: _value,
+		form,
+		valuesDivider: hiddenInputValuesDivider,
+		...hiddenInputProps
+	})] });
+});
+ComboboxPopover.classes = Combobox.classes;
+ComboboxPopover.displayName = "@mantine/core/ComboboxPopover";
+ComboboxPopover.Target = ComboboxPopoverTarget;
+//#endregion
+export { ComboboxPopover };
+
+//# sourceMappingURL=ComboboxPopover.mjs.map

package/esm/components/ComboboxPopover/ComboboxPopover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxPopover.mjs","names":["comboboxClasses"],"sources":["../../../src/components/ComboboxPopover/ComboboxPopover.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport cx from 'clsx';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n  Factory,\n  genericFactory,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport { CheckIcon } from '../Checkbox';\nimport {\n  Combobox,\n  ComboboxData,\n  ComboboxItem,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  ComboboxProps,\n  defaultOptionsFilter,\n  getOptionsLockup,\n  getParsedComboboxData,\n  isOptionsGroup,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport { ComboboxParsedItem } from '../Combobox/Combobox.types';\nimport { isEmptyComboboxData } from '../Combobox/OptionsDropdown/is-empty-combobox-data';\nimport { ScrollArea, ScrollAreaProps } from '../ScrollArea';\nimport { ComboboxPopoverValue } from './ComboboxPopover.types';\nimport { ComboboxPopoverTarget } from './ComboboxPopoverTarget';\nimport comboboxClasses from '../Combobox/Combobox.module.css';\n\nfunction isValueChecked(value: Primitive | Primitive[] | undefined | null, optionValue: Primitive) {\n  return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;\n}\n\ninterface OptionProps {\n  data: ComboboxParsedItem<Primitive>;\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 Option({\n  data,\n  withCheckIcon,\n  withAlignedLabels,\n  value,\n  checkIconPosition,\n  unstyled,\n  renderOption,\n}: OptionProps) {\n  if (isOptionsGroup(data)) {\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    return <Combobox.Group label={data.group}>{options}</Combobox.Group>;\n  }\n\n  const checked = isValueChecked(value, data.value);\n  const check =\n    withCheckIcon &&\n    (checked ? (\n      <CheckIcon className={comboboxClasses.optionsDropdownCheckIcon} />\n    ) : withAlignedLabels ? (\n      <div className={comboboxClasses.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({ [comboboxClasses.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\ninterface SearchableDropdownProps {\n  data: ComboboxParsedItem<Primitive>[];\n  filter: OptionsFilter<Primitive> | undefined;\n  search: string;\n  limit: number | undefined;\n  nothingFoundMessage: React.ReactNode | undefined;\n  withScrollArea: boolean | undefined;\n  maxDropdownHeight: number | string | undefined;\n  value: Primitive | Primitive[] | null;\n  checkIconPosition: 'left' | 'right' | undefined;\n  withCheckIcon: boolean | undefined;\n  withAlignedLabels: boolean | undefined;\n  unstyled: boolean | undefined;\n  renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n  scrollAreaProps: ScrollAreaProps | undefined;\n  onSearchChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nfunction SearchableDropdown({\n  data,\n  filter,\n  search,\n  limit,\n  nothingFoundMessage,\n  withScrollArea = true,\n  maxDropdownHeight,\n  value,\n  checkIconPosition,\n  withCheckIcon = false,\n  withAlignedLabels = false,\n  unstyled,\n  renderOption,\n  scrollAreaProps,\n  onSearchChange,\n}: SearchableDropdownProps) {\n  const filteredData = (filter || defaultOptionsFilter)({\n    options: data,\n    search,\n    limit: limit ?? Infinity,\n  });\n  const isEmpty = isEmptyComboboxData(filteredData);\n\n  const options = filteredData.map((item, index) => (\n    <Option\n      data={item}\n      key={\n        isOptionsGroup(item)\n          ? `group-${typeof item.group === 'string' ? item.group : index}`\n          : `${item.value}`\n      }\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 data-composed>\n      <Combobox.Search value={search} onChange={onSearchChange} placeholder=\"Search...\" />\n      <Combobox.Options>\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\nexport type ComboboxPopoverStylesNames = ComboboxLikeStylesNames;\n\nexport interface ComboboxPopoverProps<\n  Multiple extends boolean = false,\n  Value extends Primitive = string,\n> extends StylesApiProps<ComboboxPopoverFactory> {\n  /** If set, multiple items can be selected at the same time */\n  multiple?: Multiple;\n\n  /** Controlled component value */\n  value?: ComboboxPopoverValue<Multiple, Value>;\n\n  /** Uncontrolled component default value */\n  defaultValue?: ComboboxPopoverValue<Multiple, Value>;\n\n  /** Called when value changes */\n  onChange?: (value: ComboboxPopoverValue<Multiple, Value>) => void;\n\n  /** Data used to generate options */\n  data?: ComboboxData<Value>;\n\n  /** Controlled dropdown opened state */\n  dropdownOpened?: boolean;\n\n  /** Uncontrolled dropdown initial opened state */\n  defaultDropdownOpened?: boolean;\n\n  /** Called when dropdown opens */\n  onDropdownOpen?: () => void;\n\n  /** Called when dropdown closes */\n  onDropdownClose?: () => void;\n\n  /** Called when option is submitted from dropdown with mouse click or Enter key */\n  onOptionSubmit?: (value: Value) => void;\n\n  /** Props passed down to Combobox component */\n  comboboxProps?: ComboboxProps;\n\n  /** Function based on which items are filtered and sorted */\n  filter?: OptionsFilter<Value>;\n\n  /** Maximum number of options displayed at a time @default Infinity */\n  limit?: number;\n\n  /** Determines whether the options should be wrapped with ScrollArea.AutoSize @default true */\n  withScrollArea?: boolean;\n\n  /** max-height of the dropdown @default 250 */\n  maxDropdownHeight?: number | string;\n\n  /** If set, the first option is selected when dropdown opens @default false */\n  selectFirstOptionOnDropdownOpen?: boolean;\n\n  /** Displays check icon near the selected option label @default true */\n  withCheckIcon?: boolean;\n\n  /** Aligns unchecked labels with the checked one @default false */\n  withAlignedLabels?: boolean;\n\n  /** Position of the check icon relative to the option label @default 'left' */\n  checkIconPosition?: 'left' | 'right';\n\n  /** Message displayed when no options match the search query or when there is no data */\n  nothingFoundMessage?: React.ReactNode;\n\n  /** Allows searching through options @default false */\n  searchable?: boolean;\n\n  /** Controlled search value */\n  searchValue?: string;\n\n  /** Default search value */\n  defaultSearchValue?: string;\n\n  /** Called when search changes */\n  onSearchChange?: (value: string) => void;\n\n  /** Allows deselecting the selected option by clicking it (only for single mode) @default true */\n  allowDeselect?: boolean;\n\n  /** A function to render content of the option, replaces the default content of the option */\n  renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => React.ReactNode;\n\n  /** Props passed down to the underlying ScrollArea component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** Hidden input name for form submission */\n  name?: string;\n\n  /** Hidden input form for form submission */\n  form?: string;\n\n  /** Content of the component */\n  children?: React.ReactNode;\n\n  /** Divider used to separate values in the hidden input value attribute @default ',' */\n  hiddenInputValuesDivider?: string;\n}\n\nexport type ComboboxPopoverFactory = Factory<{\n  props: ComboboxPopoverProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxPopoverStylesNames;\n  signature: <Multiple extends boolean = false, Value extends Primitive = string>(\n    props: ComboboxPopoverProps<Multiple, Value>\n  ) => React.JSX.Element;\n  staticComponents: {\n    Target: typeof ComboboxPopoverTarget;\n  };\n}>;\n\nconst defaultProps = {\n  withCheckIcon: true,\n  allowDeselect: true,\n  checkIconPosition: 'left',\n  hiddenInputValuesDivider: ',',\n} satisfies Partial<ComboboxPopoverProps>;\n\nexport const ComboboxPopover = genericFactory<ComboboxPopoverFactory>((_props) => {\n  const props = useProps('ComboboxPopover', defaultProps as any, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    children,\n    multiple,\n    value,\n    defaultValue,\n    onChange,\n    data,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownOpen,\n    onDropdownClose,\n    onOptionSubmit,\n    comboboxProps,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    selectFirstOptionOnDropdownOpen,\n    withCheckIcon,\n    withAlignedLabels,\n    checkIconPosition,\n    nothingFoundMessage,\n    searchable,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    allowDeselect,\n    renderOption,\n    scrollAreaProps,\n    hiddenInputProps,\n    name,\n    form,\n    hiddenInputValuesDivider,\n    attributes,\n    ...others\n  } = props;\n\n  const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n  const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: multiple ? ([] as any) : null,\n    onChange,\n  });\n\n  const [_searchValue, setSearchValue] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: '',\n    onChange: onSearchChange,\n  });\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (searchable) {\n        combobox.focusSearchInput();\n      }\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      combobox.resetSelectedOption();\n      if (searchable) {\n        combobox.focusTarget();\n      }\n    },\n  });\n\n  const handleSearchChange = (val: string) => {\n    setSearchValue(val);\n    combobox.resetSelectedOption();\n  };\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ComboboxPopoverFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  const handleOptionSubmit = (val: string) => {\n    onOptionSubmit?.(val as any);\n    const option = optionsLockup[val];\n\n    if (multiple) {\n      const currentValue = Array.isArray(_value) ? _value : [];\n      if (currentValue.includes(option.value)) {\n        setValue(currentValue.filter((v: any) => v !== option.value) as any);\n      } else {\n        setValue([...currentValue, option.value] as any);\n      }\n      combobox.updateSelectedOptionIndex('selected');\n    } else {\n      const nextValue = allowDeselect && `${option.value}` === `${_value}` ? null : option.value;\n      setValue(nextValue as any);\n      combobox.closeDropdown();\n    }\n\n    if (searchable) {\n      handleSearchChange('');\n    }\n  };\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        __staticSelector=\"ComboboxPopover\"\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        attributes={attributes}\n        onOptionSubmit={handleOptionSubmit}\n        {...comboboxProps}\n        {...others}\n      >\n        {children}\n        {searchable ? (\n          <SearchableDropdown\n            data={parsedData as any}\n            filter={filter as OptionsFilter<Primitive> | undefined}\n            search={_searchValue}\n            limit={limit}\n            nothingFoundMessage={nothingFoundMessage}\n            withScrollArea={withScrollArea}\n            maxDropdownHeight={maxDropdownHeight}\n            value={_value}\n            checkIconPosition={checkIconPosition}\n            withCheckIcon={withCheckIcon}\n            withAlignedLabels={withAlignedLabels}\n            unstyled={unstyled}\n            renderOption={renderOption}\n            scrollAreaProps={scrollAreaProps}\n            onSearchChange={(event) => {\n              handleSearchChange(event.currentTarget.value);\n            }}\n          />\n        ) : (\n          <OptionsDropdown\n            data={parsedData as any}\n            filter={filter as OptionsFilter<Primitive> | undefined}\n            search={undefined}\n            limit={limit}\n            hiddenWhenEmpty={!nothingFoundMessage}\n            withScrollArea={withScrollArea}\n            maxDropdownHeight={maxDropdownHeight}\n            filterOptions={false}\n            value={_value}\n            checkIconPosition={checkIconPosition}\n            withCheckIcon={withCheckIcon}\n            withAlignedLabels={withAlignedLabels}\n            nothingFoundMessage={nothingFoundMessage}\n            unstyled={unstyled}\n            renderOption={renderOption}\n            scrollAreaProps={scrollAreaProps}\n            labelId={undefined}\n            aria-label={undefined}\n          />\n        )}\n      </Combobox>\n      <Combobox.HiddenInput\n        name={name}\n        value={_value}\n        form={form}\n        valuesDivider={hiddenInputValuesDivider}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nComboboxPopover.classes = Combobox.classes;\nComboboxPopover.displayName = '@mantine/core/ComboboxPopover';\nComboboxPopover.Target = ComboboxPopoverTarget;\n"],"mappings":"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"}

package/esm/components/ComboboxPopover/ComboboxPopoverTarget.mjs

@@ -0,0 +1,45 @@
+"use client";
+import { getRefProp } from "../../core/utils/get-ref-prop/get-ref-prop.mjs";
+import { getSingleElementChild } from "../../core/utils/get-single-element-child/get-single-element-child.mjs";
+import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
+import { factory } from "../../core/factory/factory.mjs";
+import { Popover } from "../Popover/Popover.mjs";
+import { useComboboxContext } from "../Combobox/Combobox.context.mjs";
+import { useComboboxTargetProps } from "../Combobox/use-combobox-target-props/use-combobox-target-props.mjs";
+import { cloneElement } from "react";
+import { useMergedRef } from "@mantine/hooks";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/ComboboxPopover/ComboboxPopoverTarget.tsx
+const defaultProps = { refProp: "ref" };
+const ComboboxPopoverTarget = factory((props) => {
+	const { children, refProp, ref, ...others } = useProps("ComboboxPopoverTarget", defaultProps, props);
+	const child = getSingleElementChild(children);
+	if (!child) throw new Error("ComboboxPopover.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");
+	const ctx = useComboboxContext();
+	const targetRef = useMergedRef(ref, ctx.store.targetRef, getRefProp(child));
+	const clonedElement = cloneElement(child, {
+		...useComboboxTargetProps({
+			targetType: "button",
+			withAriaAttributes: true,
+			withKeyboardNavigation: true,
+			withExpandedAttribute: true,
+			onKeyDown: child.props.onKeyDown,
+			onClick: (event) => {
+				ctx.store.toggleDropdown();
+				child.props.onClick?.(event);
+			},
+			autoComplete: "off"
+		}),
+		...others,
+		[refProp]: targetRef
+	});
+	return /* @__PURE__ */ jsx(Popover.Target, {
+		refProp,
+		children: clonedElement
+	});
+});
+ComboboxPopoverTarget.displayName = "@mantine/core/ComboboxPopoverTarget";
+//#endregion
+export { ComboboxPopoverTarget };
+
+//# sourceMappingURL=ComboboxPopoverTarget.mjs.map

package/esm/components/ComboboxPopover/ComboboxPopoverTarget.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxPopoverTarget.mjs","names":[],"sources":["../../../src/components/ComboboxPopover/ComboboxPopoverTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getRefProp, getSingleElementChild, useProps } from '../../core';\nimport { useComboboxContext } from '../Combobox/Combobox.context';\nimport { useComboboxTargetProps } from '../Combobox/use-combobox-target-props/use-combobox-target-props';\nimport { Popover } from '../Popover';\n\nexport interface ComboboxPopoverTargetProps {\n  children: React.ReactNode;\n\n  /** Key of the prop that is used to access element ref @default 'ref' */\n  refProp?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n} satisfies Partial<ComboboxPopoverTargetProps>;\n\nexport type ComboboxPopoverTargetFactory = Factory<{\n  props: ComboboxPopoverTargetProps;\n  ref: HTMLElement;\n  compound: true;\n}>;\n\nexport const ComboboxPopoverTarget = factory<ComboboxPopoverTargetFactory>((props) => {\n  const { children, refProp, ref, ...others } = useProps(\n    'ComboboxPopoverTarget',\n    defaultProps,\n    props\n  );\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'ComboboxPopover.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const ctx = useComboboxContext();\n  const targetRef = useMergedRef(ref, ctx.store.targetRef, getRefProp(child));\n\n  const targetProps = useComboboxTargetProps({\n    targetType: 'button',\n    withAriaAttributes: true,\n    withKeyboardNavigation: true,\n    withExpandedAttribute: true,\n    onKeyDown: (child.props as any).onKeyDown,\n    onClick: (event) => {\n      ctx.store.toggleDropdown();\n      (child.props as any).onClick?.(event);\n    },\n    autoComplete: 'off',\n  });\n\n  const clonedElement = cloneElement(child, {\n    ...targetProps,\n    ...others,\n    [refProp!]: targetRef,\n  } as any);\n\n  return <Popover.Target refProp={refProp}>{clonedElement}</Popover.Target>;\n});\n\nComboboxPopoverTarget.displayName = '@mantine/core/ComboboxPopoverTarget';\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,eAAe,EACnB,SAAS,MACX;AAQA,MAAa,wBAAwB,SAAuC,UAAU;CACpF,MAAM,EAAE,UAAU,SAAS,KAAK,GAAG,WAAW,SAC5C,yBACA,cACA,KACF;CAEA,MAAM,QAAQ,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,0KACF;CAGF,MAAM,MAAM,mBAAmB;CAC/B,MAAM,YAAY,aAAa,KAAK,IAAI,MAAM,WAAW,WAAW,KAAK,CAAC;CAe1E,MAAM,gBAAgB,aAAa,OAAO;EACxC,GAdkB,uBAAuB;GACzC,YAAY;GACZ,oBAAoB;GACpB,wBAAwB;GACxB,uBAAuB;GACvB,WAAY,MAAM,MAAc;GAChC,UAAU,UAAU;IAClB,IAAI,MAAM,eAAe;IACzB,MAAO,MAAc,UAAU,KAAK;GACtC;GACA,cAAc;EAChB,CAGe;EACb,GAAG;GACF,UAAW;CACd,CAAQ;CAER,OAAO,oBAAC,QAAQ,QAAT;EAAyB;YAAU;CAA8B,CAAA;AAC1E,CAAC;AAED,sBAAsB,cAAc"}

package/esm/components/DataList/DataList.context.mjs

@@ -0,0 +1,8 @@
+"use client";
+import { createSafeContext } from "../../core/utils/create-safe-context/create-safe-context.mjs";
+//#region packages/@mantine/core/src/components/DataList/DataList.context.ts
+const [DataListProvider, useDataListContext] = createSafeContext("DataList component was not found in tree");
+//#endregion
+export { DataListProvider, useDataListContext };
+
+//# sourceMappingURL=DataList.context.mjs.map

package/esm/components/DataList/DataList.context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataList.context.mjs","names":[],"sources":["../../../src/components/DataList/DataList.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { DataListFactory } from './DataList';\n\nexport interface DataListContextValue {\n  getStyles: GetStylesApi<DataListFactory>;\n}\n\nexport const [DataListProvider, useDataListContext] = createSafeContext<DataListContextValue>(\n  'DataList component was not found in tree'\n);\n"],"mappings":";;;AAOA,MAAa,CAAC,kBAAkB,sBAAsB,kBACpD,0CACF"}

package/esm/components/DataList/DataList.mjs

@@ -0,0 +1,61 @@
+"use client";
+import { getFontSize, getLineHeight, getSpacing } from "../../core/utils/get-size/get-size.mjs";
+import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
+import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
+import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
+import { factory } from "../../core/factory/factory.mjs";
+import { Box } from "../../core/Box/Box.mjs";
+import { DataListProvider } from "./DataList.context.mjs";
+import DataList_module_default from "./DataList.module.mjs";
+import { DataListItem } from "./DataListItem/DataListItem.mjs";
+import { DataListItemLabel } from "./DataListItemLabel/DataListItemLabel.mjs";
+import { DataListItemValue } from "./DataListItemValue/DataListItemValue.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/DataList/DataList.tsx
+const defaultProps = { orientation: "horizontal" };
+const varsResolver = createVarsResolver((_, { size, gap, labelWidth }) => ({ root: {
+	"--data-list-fz": getFontSize(size),
+	"--data-list-lh": getLineHeight(size),
+	"--data-list-gap": getSpacing(gap),
+	"--data-list-label-width": labelWidth !== void 0 ? typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth : void 0
+} }));
+const DataList = factory((_props) => {
+	const props = useProps("DataList", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, children, gap, orientation, withDivider, labelWidth, mod, attributes, ...others } = props;
+	const getStyles = useStyles({
+		name: "DataList",
+		classes: DataList_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver
+	});
+	return /* @__PURE__ */ jsx(DataListProvider, {
+		value: { getStyles },
+		children: /* @__PURE__ */ jsx(Box, {
+			...getStyles("root"),
+			component: "dl",
+			mod: [{
+				orientation,
+				"with-divider": withDivider
+			}, mod],
+			...others,
+			children
+		})
+	});
+});
+DataList.classes = DataList_module_default;
+DataList.varsResolver = varsResolver;
+DataList.displayName = "@mantine/core/DataList";
+DataList.Item = DataListItem;
+DataList.ItemLabel = DataListItemLabel;
+DataList.ItemValue = DataListItemValue;
+//#endregion
+export { DataList };
+
+//# sourceMappingURL=DataList.mjs.map

package/esm/components/DataList/DataList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataList.mjs","names":["classes"],"sources":["../../../src/components/DataList/DataList.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  getLineHeight,\n  getSpacing,\n  MantineSize,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { DataListProvider } from './DataList.context';\nimport { DataListItem, DataListItemStylesNames } from './DataListItem/DataListItem';\nimport {\n  DataListItemLabel,\n  DataListItemLabelStylesNames,\n} from './DataListItemLabel/DataListItemLabel';\nimport {\n  DataListItemValue,\n  DataListItemValueStylesNames,\n} from './DataListItemValue/DataListItemValue';\nimport classes from './DataList.module.css';\n\nexport type DataListStylesNames =\n  | 'root'\n  | DataListItemStylesNames\n  | DataListItemLabelStylesNames\n  | DataListItemValueStylesNames;\n\nexport type DataListCssVariables = {\n  root: '--data-list-fz' | '--data-list-lh' | '--data-list-gap' | '--data-list-label-width';\n};\n\nexport interface DataListProps\n  extends BoxProps, StylesApiProps<DataListFactory>, ElementProps<'dl'> {\n  /** DataList.Item components */\n  children?: React.ReactNode;\n\n  /** Controls `font-size` and `line-height` @default 'sm' */\n  size?: MantineSize;\n\n  /** Key of `theme.spacing` or any valid CSS value to set gap between items @default 'sm' */\n  gap?: MantineSpacing;\n\n  /** Controls arrangement of label and value within each item. `horizontal` renders label and value side by side, `vertical` stacks label on top of value @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** Adds border between items @default false */\n  withDivider?: boolean;\n\n  /** Controls min-width of the label (dt) element, any valid CSS value @default '120px' */\n  labelWidth?: React.CSSProperties['minWidth'];\n}\n\nexport type DataListFactory = Factory<{\n  props: DataListProps;\n  ref: HTMLDListElement;\n  stylesNames: DataListStylesNames;\n  vars: DataListCssVariables;\n  staticComponents: {\n    Item: typeof DataListItem;\n    ItemLabel: typeof DataListItemLabel;\n    ItemValue: typeof DataListItemValue;\n  };\n}>;\n\nconst defaultProps = {\n  orientation: 'horizontal',\n} satisfies Partial<DataListProps>;\n\nconst varsResolver = createVarsResolver<DataListFactory>((_, { size, gap, labelWidth }) => ({\n  root: {\n    '--data-list-fz': getFontSize(size),\n    '--data-list-lh': getLineHeight(size),\n    '--data-list-gap': getSpacing(gap),\n    '--data-list-label-width':\n      labelWidth !== undefined\n        ? typeof labelWidth === 'number'\n          ? `${labelWidth}px`\n          : labelWidth\n        : undefined,\n  },\n}));\n\nexport const DataList = factory<DataListFactory>((_props) => {\n  const props = useProps('DataList', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    gap,\n    orientation,\n    withDivider,\n    labelWidth,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<DataListFactory>({\n    name: 'DataList',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <DataListProvider value={{ getStyles }}>\n      <Box<any>\n        {...getStyles('root')}\n        component=\"dl\"\n        mod={[{ orientation, 'with-divider': withDivider }, mod]}\n        {...others}\n      >\n        {children}\n      </Box>\n    </DataListProvider>\n  );\n});\n\nDataList.classes = classes;\nDataList.varsResolver = varsResolver;\nDataList.displayName = '@mantine/core/DataList';\nDataList.Item = DataListItem;\nDataList.ItemLabel = DataListItemLabel;\nDataList.ItemValue = DataListItemValue;\n"],"mappings":";;;;;;;;;;;;;;AAuEA,MAAM,eAAe,EACnB,aAAa,aACf;AAEA,MAAM,eAAe,oBAAqC,GAAG,EAAE,MAAM,KAAK,kBAAkB,EAC1F,MAAM;CACJ,kBAAkB,YAAY,IAAI;CAClC,kBAAkB,cAAc,IAAI;CACpC,mBAAmB,WAAW,GAAG;CACjC,2BACE,eAAe,KAAA,IACX,OAAO,eAAe,WACpB,GAAG,WAAW,MACd,aACF,KAAA;AACR,EACF,EAAE;AAEF,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,KACA,aACA,aACA,YACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA2B;EAC3C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,kBAAD;EAAkB,OAAO,EAAE,UAAU;YACnC,oBAAC,KAAD;GACE,GAAI,UAAU,MAAM;GACpB,WAAU;GACV,KAAK,CAAC;IAAE;IAAa,gBAAgB;GAAY,GAAG,GAAG;GACvD,GAAI;GAEH;EACE,CAAA;CACW,CAAA;AAEtB,CAAC;AAED,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,OAAO;AAChB,SAAS,YAAY;AACrB,SAAS,YAAY"}

package/esm/components/DataList/DataList.module.mjs

@@ -0,0 +1,12 @@
+"use client";
+//#region packages/@mantine/core/src/components/DataList/DataList.module.css
+var DataList_module_default = {
+	"root": "m_f84d0407",
+	"item": "m_f848fe38",
+	"itemLabel": "m_c791b39c",
+	"itemValue": "m_c81ec619"
+};
+//#endregion
+export { DataList_module_default as default };
+
+//# sourceMappingURL=DataList.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataList.module.mjs","names":[],"sources":["../../../src/components/DataList/DataList.module.css"],"sourcesContent":[".root {\n  --data-list-fz: var(--mantine-font-size-sm);\n  --data-list-lh: var(--mantine-line-height-sm);\n  --data-list-gap: var(--mantine-spacing-sm);\n  --data-list-label-width: rem(120px);\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--data-list-gap);\n  font-size: var(--data-list-fz);\n  line-height: var(--data-list-lh);\n  margin: 0;\n  padding: 0;\n\n  &:where([data-with-divider]) {\n    gap: 0;\n  }\n}\n\n.item {\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n  gap: var(--mantine-spacing-xs);\n}\n\n.root:where([data-orientation='vertical']) > .item {\n  flex-direction: column;\n  gap: 0;\n}\n\n.itemLabel {\n  color: var(--mantine-color-dimmed);\n  font-size: var(--data-list-fz);\n  line-height: var(--data-list-lh);\n  min-width: var(--data-list-label-width);\n  margin: 0;\n}\n\n.root:where([data-orientation='vertical']) .itemLabel {\n  min-width: 100%;\n}\n\n.itemValue {\n  font-size: var(--data-list-fz);\n  line-height: var(--data-list-lh);\n  margin: 0;\n}\n\n.root:where([data-with-divider]) > .item:where(:not(:first-of-type)) {\n  border-top: rem(1px) solid var(--mantine-color-default-border);\n  padding-top: var(--data-list-gap);\n  margin-top: var(--data-list-gap);\n}\n"],"mappings":""}

package/esm/components/DataList/DataListItem/DataListItem.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { factory } from "../../../core/factory/factory.mjs";
+import { Box } from "../../../core/Box/Box.mjs";
+import { useDataListContext } from "../DataList.context.mjs";
+import DataList_module_default from "../DataList.module.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/DataList/DataListItem/DataListItem.tsx
+const DataListItem = factory((_props) => {
+	const { classNames, className, style, styles, vars, children, mod, ...others } = useProps("DataListItem", null, _props);
+	const ctx = useDataListContext();
+	const stylesApiProps = {
+		classNames,
+		styles
+	};
+	return /* @__PURE__ */ jsx(Box, {
+		...ctx.getStyles("item", {
+			...stylesApiProps,
+			className,
+			style
+		}),
+		mod,
+		...others,
+		children
+	});
+});
+DataListItem.classes = DataList_module_default;
+DataListItem.displayName = "@mantine/core/DataListItem";
+//#endregion
+export { DataListItem };
+
+//# sourceMappingURL=DataListItem.mjs.map

package/esm/components/DataList/DataListItem/DataListItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataListItem.mjs","names":["classes"],"sources":["../../../../src/components/DataList/DataListItem/DataListItem.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useDataListContext } from '../DataList.context';\nimport classes from '../DataList.module.css';\n\nexport type DataListItemStylesNames = 'item';\n\nexport interface DataListItemProps\n  extends BoxProps, CompoundStylesApiProps<DataListItemFactory>, ElementProps<'div'> {\n  /** Item content */\n  children?: React.ReactNode;\n}\n\nexport type DataListItemFactory = Factory<{\n  props: DataListItemProps;\n  ref: HTMLDivElement;\n  stylesNames: DataListItemStylesNames;\n  compound: true;\n}>;\n\nexport const DataListItem = factory<DataListItemFactory>((_props) => {\n  const props = useProps('DataListItem', null, _props);\n  const { classNames, className, style, styles, vars, children, mod, ...others } = props;\n\n  const ctx = useDataListContext();\n  const stylesApiProps = { classNames, styles };\n\n  return (\n    <Box {...ctx.getStyles('item', { ...stylesApiProps, className, style })} mod={mod} {...others}>\n      {children}\n    </Box>\n  );\n});\n\nDataListItem.classes = classes;\nDataListItem.displayName = '@mantine/core/DataListItem';\n"],"mappings":";;;;;;;;AA2BA,MAAa,eAAe,SAA8B,WAAW;CAEnE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,UAAU,KAAK,GAAG,WADxD,SAAS,gBAAgB,MAAM,MACwC;CAErF,MAAM,MAAM,mBAAmB;CAC/B,MAAM,iBAAiB;EAAE;EAAY;CAAO;CAE5C,OACE,oBAAC,KAAD;EAAK,GAAI,IAAI,UAAU,QAAQ;GAAE,GAAG;GAAgB;GAAW;EAAM,CAAC;EAAQ;EAAK,GAAI;EACpF;CACE,CAAA;AAET,CAAC;AAED,aAAa,UAAUA;AACvB,aAAa,cAAc"}

package/esm/components/DataList/DataListItemLabel/DataListItemLabel.mjs

@@ -0,0 +1,33 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { factory } from "../../../core/factory/factory.mjs";
+import { Box } from "../../../core/Box/Box.mjs";
+import { useDataListContext } from "../DataList.context.mjs";
+import DataList_module_default from "../DataList.module.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/DataList/DataListItemLabel/DataListItemLabel.tsx
+const DataListItemLabel = factory((_props) => {
+	const { classNames, className, style, styles, vars, children, mod, ...others } = useProps("DataListItemLabel", null, _props);
+	const ctx = useDataListContext();
+	const stylesApiProps = {
+		classNames,
+		styles
+	};
+	return /* @__PURE__ */ jsx(Box, {
+		component: "dt",
+		...ctx.getStyles("itemLabel", {
+			...stylesApiProps,
+			className,
+			style
+		}),
+		mod,
+		...others,
+		children
+	});
+});
+DataListItemLabel.classes = DataList_module_default;
+DataListItemLabel.displayName = "@mantine/core/DataListItemLabel";
+//#endregion
+export { DataListItemLabel };
+
+//# sourceMappingURL=DataListItemLabel.mjs.map

package/esm/components/DataList/DataListItemLabel/DataListItemLabel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataListItemLabel.mjs","names":["classes"],"sources":["../../../../src/components/DataList/DataListItemLabel/DataListItemLabel.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useDataListContext } from '../DataList.context';\nimport classes from '../DataList.module.css';\n\nexport type DataListItemLabelStylesNames = 'itemLabel';\n\nexport interface DataListItemLabelProps\n  extends BoxProps, CompoundStylesApiProps<DataListItemLabelFactory>, ElementProps<'dt'> {\n  /** Label content */\n  children?: React.ReactNode;\n}\n\nexport type DataListItemLabelFactory = Factory<{\n  props: DataListItemLabelProps;\n  ref: HTMLElement;\n  stylesNames: DataListItemLabelStylesNames;\n  compound: true;\n}>;\n\nexport const DataListItemLabel = factory<DataListItemLabelFactory>((_props) => {\n  const props = useProps('DataListItemLabel', null, _props);\n  const { classNames, className, style, styles, vars, children, mod, ...others } = props;\n\n  const ctx = useDataListContext();\n  const stylesApiProps = { classNames, styles };\n\n  return (\n    <Box\n      component=\"dt\"\n      {...ctx.getStyles('itemLabel', { ...stylesApiProps, className, style })}\n      mod={mod}\n      {...others}\n    >\n      {children}\n    </Box>\n  );\n});\n\nDataListItemLabel.classes = classes;\nDataListItemLabel.displayName = '@mantine/core/DataListItemLabel';\n"],"mappings":";;;;;;;;AA2BA,MAAa,oBAAoB,SAAmC,WAAW;CAE7E,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,UAAU,KAAK,GAAG,WADxD,SAAS,qBAAqB,MAAM,MACmC;CAErF,MAAM,MAAM,mBAAmB;CAC/B,MAAM,iBAAiB;EAAE;EAAY;CAAO;CAE5C,OACE,oBAAC,KAAD;EACE,WAAU;EACV,GAAI,IAAI,UAAU,aAAa;GAAE,GAAG;GAAgB;GAAW;EAAM,CAAC;EACjE;EACL,GAAI;EAEH;CACE,CAAA;AAET,CAAC;AAED,kBAAkB,UAAUA;AAC5B,kBAAkB,cAAc"}

package/esm/components/DataList/DataListItemValue/DataListItemValue.mjs

@@ -0,0 +1,33 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { factory } from "../../../core/factory/factory.mjs";
+import { Box } from "../../../core/Box/Box.mjs";
+import { useDataListContext } from "../DataList.context.mjs";
+import DataList_module_default from "../DataList.module.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/DataList/DataListItemValue/DataListItemValue.tsx
+const DataListItemValue = factory((_props) => {
+	const { classNames, className, style, styles, vars, children, mod, ...others } = useProps("DataListItemValue", null, _props);
+	const ctx = useDataListContext();
+	const stylesApiProps = {
+		classNames,
+		styles
+	};
+	return /* @__PURE__ */ jsx(Box, {
+		component: "dd",
+		...ctx.getStyles("itemValue", {
+			...stylesApiProps,
+			className,
+			style
+		}),
+		mod,
+		...others,
+		children
+	});
+});
+DataListItemValue.classes = DataList_module_default;
+DataListItemValue.displayName = "@mantine/core/DataListItemValue";
+//#endregion
+export { DataListItemValue };
+
+//# sourceMappingURL=DataListItemValue.mjs.map

package/esm/components/DataList/DataListItemValue/DataListItemValue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataListItemValue.mjs","names":["classes"],"sources":["../../../../src/components/DataList/DataListItemValue/DataListItemValue.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useDataListContext } from '../DataList.context';\nimport classes from '../DataList.module.css';\n\nexport type DataListItemValueStylesNames = 'itemValue';\n\nexport interface DataListItemValueProps\n  extends BoxProps, CompoundStylesApiProps<DataListItemValueFactory>, ElementProps<'dd'> {\n  /** Value content */\n  children?: React.ReactNode;\n}\n\nexport type DataListItemValueFactory = Factory<{\n  props: DataListItemValueProps;\n  ref: HTMLElement;\n  stylesNames: DataListItemValueStylesNames;\n  compound: true;\n}>;\n\nexport const DataListItemValue = factory<DataListItemValueFactory>((_props) => {\n  const props = useProps('DataListItemValue', null, _props);\n  const { classNames, className, style, styles, vars, children, mod, ...others } = props;\n\n  const ctx = useDataListContext();\n  const stylesApiProps = { classNames, styles };\n\n  return (\n    <Box\n      component=\"dd\"\n      {...ctx.getStyles('itemValue', { ...stylesApiProps, className, style })}\n      mod={mod}\n      {...others}\n    >\n      {children}\n    </Box>\n  );\n});\n\nDataListItemValue.classes = classes;\nDataListItemValue.displayName = '@mantine/core/DataListItemValue';\n"],"mappings":";;;;;;;;AA2BA,MAAa,oBAAoB,SAAmC,WAAW;CAE7E,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,UAAU,KAAK,GAAG,WADxD,SAAS,qBAAqB,MAAM,MACmC;CAErF,MAAM,MAAM,mBAAmB;CAC/B,MAAM,iBAAiB;EAAE;EAAY;CAAO;CAE5C,OACE,oBAAC,KAAD;EACE,WAAU;EACV,GAAI,IAAI,UAAU,aAAa;GAAE,GAAG;GAAgB;GAAW;EAAM,CAAC;EACjE;EACL,GAAI;EAEH;CACE,CAAA;AAET,CAAC;AAED,kBAAkB,UAAUA;AAC5B,kBAAkB,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerBody.mjs","names":["classes"],"sources":["../../../src/components/Drawer/DrawerBody.tsx"],"sourcesContent":["import { CompoundStylesApiProps, factory, Factory, useProps } from '../../core';\nimport { ModalBaseBody, ModalBaseBodyProps } from '../ModalBase';\nimport { useDrawerContext } from './Drawer.context';\nimport classes from './Drawer.module.css';\n\nexport type DrawerBodyStylesNames = 'body';\n\nexport interface DrawerBodyProps\n  extends ModalBaseBodyProps, CompoundStylesApiProps<DrawerBodyFactory> {}\n\nexport type DrawerBodyFactory = Factory<{\n  props: DrawerBodyProps;\n  ref: HTMLDivElement;\n  stylesNames: DrawerBodyStylesNames;\n  compound: true;\n}>;\n\nexport const DrawerBody = factory<DrawerBodyFactory>((_props) => {\n  const props = useProps('DrawerBody', null, _props);\n  const { classNames, className, style, styles, vars, ...others } = props;\n\n  const ctx = useDrawerContext();\n\n  return (\n    <ModalBaseBody\n      {...ctx.getStyles('body', { classNames, style, styles, className })}\n      {...others}\n    />\n  );\n});\n\nDrawerBody.classes = classes;\nDrawerBody.displayName = '@mantine/core/DrawerBody';\n"],"mappings":";;;;;;;;AAiBA,MAAa,aAAa,SAA4B,WAAW;CAE/D,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WADzC,SAAS,cAAc,MAAM,MAC2B;CAItE,OACE,oBAAC,eAAD;EACE,GAJQ,iBAIF,EAAE,UAAU,QAAQ;GAAE;GAAY;GAAO;GAAQ;EAAU,CAAC;EAClE,GAAI;CACL,CAAA;AAEL,CAAC;AAED,WAAW,UAAUA;AACrB,WAAW,cAAc"}
+{"version":3,"file":"DrawerBody.mjs","names":["classes"],"sources":["../../../src/components/Drawer/DrawerBody.tsx"],"sourcesContent":["import { CompoundStylesApiProps, factory, Factory, useProps } from '../../core';\nimport { ModalBaseBody, ModalBaseBodyProps } from '../ModalBase';\nimport { useDrawerContext } from './Drawer.context';\nimport classes from './Drawer.module.css';\n\nexport type DrawerBodyStylesNames = 'body';\n\nexport interface DrawerBodyProps\n  extends ModalBaseBodyProps, CompoundStylesApiProps<DrawerBodyFactory> {}\n\nexport type DrawerBodyFactory = Factory<{\n  props: DrawerBodyProps;\n  ref: HTMLDivElement;\n  stylesNames: DrawerBodyStylesNames;\n  compound: true;\n}>;\n\nexport const DrawerBody = factory<DrawerBodyFactory>((_props) => {\n  const props = useProps('DrawerBody', null, _props);\n  const { classNames, className, style, styles, vars, ...others } = props;\n\n  const ctx = useDrawerContext();\n\n  return (\n    <ModalBaseBody\n      {...ctx.getStyles('body', { classNames, style, styles, className })}\n      {...others}\n    />\n  );\n});\n\nDrawerBody.classes = classes;\nDrawerBody.displayName = '@mantine/core/DrawerBody';\n"],"mappings":";;;;;;;;AAiBA,MAAa,aAAa,SAA4B,WAAW;CAE/D,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WADzC,SAAS,cAAc,MAAM,MAC2B;CAItE,OACE,oBAAC,eAAD;EACE,GAJQ,iBAIF,CAAC,CAAC,UAAU,QAAQ;GAAE;GAAY;GAAO;GAAQ;EAAU,CAAC;EAClE,GAAI;CACL,CAAA;AAEL,CAAC;AAED,WAAW,UAAUA;AACrB,WAAW,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerCloseButton.mjs","names":["classes"],"sources":["../../../src/components/Drawer/DrawerCloseButton.tsx"],"sourcesContent":["import { CompoundStylesApiProps, factory, Factory, useProps } from '../../core';\nimport { ModalBaseCloseButton, ModalBaseCloseButtonProps } from '../ModalBase';\nimport { useDrawerContext } from './Drawer.context';\nimport classes from './Drawer.module.css';\n\nexport type DrawerCloseButtonStylesNames = 'close';\n\nexport interface DrawerCloseButtonProps\n  extends ModalBaseCloseButtonProps, CompoundStylesApiProps<DrawerCloseButtonFactory> {}\n\nexport type DrawerCloseButtonFactory = Factory<{\n  props: DrawerCloseButtonProps;\n  ref: HTMLButtonElement;\n  stylesNames: DrawerCloseButtonStylesNames;\n  compound: true;\n}>;\n\nexport const DrawerCloseButton = factory<DrawerCloseButtonFactory>((_props) => {\n  const props = useProps('DrawerCloseButton', null, _props);\n  const { classNames, className, style, styles, vars, ...others } = props;\n\n  const ctx = useDrawerContext();\n\n  return (\n    <ModalBaseCloseButton\n      {...ctx.getStyles('close', { classNames, style, styles, className })}\n      {...others}\n    />\n  );\n});\n\nDrawerCloseButton.classes = classes;\nDrawerCloseButton.displayName = '@mantine/core/DrawerCloseButton';\n"],"mappings":";;;;;;;;AAiBA,MAAa,oBAAoB,SAAmC,WAAW;CAE7E,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WADzC,SAAS,qBAAqB,MAAM,MACoB;CAItE,OACE,oBAAC,sBAAD;EACE,GAJQ,iBAIF,EAAE,UAAU,SAAS;GAAE;GAAY;GAAO;GAAQ;EAAU,CAAC;EACnE,GAAI;CACL,CAAA;AAEL,CAAC;AAED,kBAAkB,UAAUA;AAC5B,kBAAkB,cAAc"}
+{"version":3,"file":"DrawerCloseButton.mjs","names":["classes"],"sources":["../../../src/components/Drawer/DrawerCloseButton.tsx"],"sourcesContent":["import { CompoundStylesApiProps, factory, Factory, useProps } from '../../core';\nimport { ModalBaseCloseButton, ModalBaseCloseButtonProps } from '../ModalBase';\nimport { useDrawerContext } from './Drawer.context';\nimport classes from './Drawer.module.css';\n\nexport type DrawerCloseButtonStylesNames = 'close';\n\nexport interface DrawerCloseButtonProps\n  extends ModalBaseCloseButtonProps, CompoundStylesApiProps<DrawerCloseButtonFactory> {}\n\nexport type DrawerCloseButtonFactory = Factory<{\n  props: DrawerCloseButtonProps;\n  ref: HTMLButtonElement;\n  stylesNames: DrawerCloseButtonStylesNames;\n  compound: true;\n}>;\n\nexport const DrawerCloseButton = factory<DrawerCloseButtonFactory>((_props) => {\n  const props = useProps('DrawerCloseButton', null, _props);\n  const { classNames, className, style, styles, vars, ...others } = props;\n\n  const ctx = useDrawerContext();\n\n  return (\n    <ModalBaseCloseButton\n      {...ctx.getStyles('close', { classNames, style, styles, className })}\n      {...others}\n    />\n  );\n});\n\nDrawerCloseButton.classes = classes;\nDrawerCloseButton.displayName = '@mantine/core/DrawerCloseButton';\n"],"mappings":";;;;;;;;AAiBA,MAAa,oBAAoB,SAAmC,WAAW;CAE7E,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WADzC,SAAS,qBAAqB,MAAM,MACoB;CAItE,OACE,oBAAC,sBAAD;EACE,GAJQ,iBAIF,CAAC,CAAC,UAAU,SAAS;GAAE;GAAY;GAAO;GAAQ;EAAU,CAAC;EACnE,GAAI;CACL,CAAA;AAEL,CAAC;AAED,kBAAkB,UAAUA;AAC5B,kBAAkB,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerHeader.mjs","names":["classes"],"sources":["../../../src/components/Drawer/DrawerHeader.tsx"],"sourcesContent":["import { CompoundStylesApiProps, factory, Factory, useProps } from '../../core';\nimport { ModalBaseHeader, ModalBaseHeaderProps } from '../ModalBase';\nimport { useDrawerContext } from './Drawer.context';\nimport classes from './Drawer.module.css';\n\nexport type DrawerHeaderStylesNames = 'header';\n\nexport interface DrawerHeaderProps\n  extends ModalBaseHeaderProps, CompoundStylesApiProps<DrawerHeaderFactory> {}\n\nexport type DrawerHeaderFactory = Factory<{\n  props: DrawerHeaderProps;\n  ref: HTMLElement;\n  stylesNames: DrawerHeaderStylesNames;\n  compound: true;\n}>;\n\nexport const DrawerHeader = factory<DrawerHeaderFactory>((_props) => {\n  const props = useProps('DrawerHeader', null, _props);\n  const { classNames, className, style, styles, vars, ...others } = props;\n\n  const ctx = useDrawerContext();\n\n  return (\n    <ModalBaseHeader\n      {...ctx.getStyles('header', { classNames, style, styles, className })}\n      {...others}\n    />\n  );\n});\n\nDrawerHeader.classes = classes;\nDrawerHeader.displayName = '@mantine/core/DrawerHeader';\n"],"mappings":";;;;;;;;AAiBA,MAAa,eAAe,SAA8B,WAAW;CAEnE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WADzC,SAAS,gBAAgB,MAAM,MACyB;CAItE,OACE,oBAAC,iBAAD;EACE,GAJQ,iBAIF,EAAE,UAAU,UAAU;GAAE;GAAY;GAAO;GAAQ;EAAU,CAAC;EACpE,GAAI;CACL,CAAA;AAEL,CAAC;AAED,aAAa,UAAUA;AACvB,aAAa,cAAc"}
+{"version":3,"file":"DrawerHeader.mjs","names":["classes"],"sources":["../../../src/components/Drawer/DrawerHeader.tsx"],"sourcesContent":["import { CompoundStylesApiProps, factory, Factory, useProps } from '../../core';\nimport { ModalBaseHeader, ModalBaseHeaderProps } from '../ModalBase';\nimport { useDrawerContext } from './Drawer.context';\nimport classes from './Drawer.module.css';\n\nexport type DrawerHeaderStylesNames = 'header';\n\nexport interface DrawerHeaderProps\n  extends ModalBaseHeaderProps, CompoundStylesApiProps<DrawerHeaderFactory> {}\n\nexport type DrawerHeaderFactory = Factory<{\n  props: DrawerHeaderProps;\n  ref: HTMLElement;\n  stylesNames: DrawerHeaderStylesNames;\n  compound: true;\n}>;\n\nexport const DrawerHeader = factory<DrawerHeaderFactory>((_props) => {\n  const props = useProps('DrawerHeader', null, _props);\n  const { classNames, className, style, styles, vars, ...others } = props;\n\n  const ctx = useDrawerContext();\n\n  return (\n    <ModalBaseHeader\n      {...ctx.getStyles('header', { classNames, style, styles, className })}\n      {...others}\n    />\n  );\n});\n\nDrawerHeader.classes = classes;\nDrawerHeader.displayName = '@mantine/core/DrawerHeader';\n"],"mappings":";;;;;;;;AAiBA,MAAa,eAAe,SAA8B,WAAW;CAEnE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WADzC,SAAS,gBAAgB,MAAM,MACyB;CAItE,OACE,oBAAC,iBAAD;EACE,GAJQ,iBAIF,CAAC,CAAC,UAAU,UAAU;GAAE;GAAY;GAAO;GAAQ;EAAU,CAAC;EACpE,GAAI;CACL,CAAA;AAEL,CAAC;AAED,aAAa,UAAUA;AACvB,aAAa,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerOverlay.mjs","names":["classes"],"sources":["../../../src/components/Drawer/DrawerOverlay.tsx"],"sourcesContent":["import { CompoundStylesApiProps, factory, Factory, useProps } from '../../core';\nimport { ModalBaseOverlay, ModalBaseOverlayProps } from '../ModalBase';\nimport { useDrawerContext } from './Drawer.context';\nimport classes from './Drawer.module.css';\n\nexport type DrawerOverlayStylesNames = 'overlay';\n\nexport interface DrawerOverlayProps\n  extends ModalBaseOverlayProps, CompoundStylesApiProps<DrawerOverlayFactory> {}\n\nexport type DrawerOverlayFactory = Factory<{\n  props: DrawerOverlayProps;\n  ref: HTMLDivElement;\n  stylesNames: DrawerOverlayStylesNames;\n  compound: true;\n}>;\n\nexport const DrawerOverlay = factory<DrawerOverlayFactory>((_props) => {\n  const props = useProps('DrawerOverlay', null, _props);\n  const { classNames, className, style, styles, vars, ...others } = props;\n\n  const ctx = useDrawerContext();\n\n  return (\n    <ModalBaseOverlay\n      {...ctx.getStyles('overlay', { classNames, style, styles, className })}\n      {...others}\n    />\n  );\n});\n\nDrawerOverlay.classes = classes;\nDrawerOverlay.displayName = '@mantine/core/DrawerOverlay';\n"],"mappings":";;;;;;;;AAiBA,MAAa,gBAAgB,SAA+B,WAAW;CAErE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WADzC,SAAS,iBAAiB,MAAM,MACwB;CAItE,OACE,oBAAC,kBAAD;EACE,GAJQ,iBAIF,EAAE,UAAU,WAAW;GAAE;GAAY;GAAO;GAAQ;EAAU,CAAC;EACrE,GAAI;CACL,CAAA;AAEL,CAAC;AAED,cAAc,UAAUA;AACxB,cAAc,cAAc"}
+{"version":3,"file":"DrawerOverlay.mjs","names":["classes"],"sources":["../../../src/components/Drawer/DrawerOverlay.tsx"],"sourcesContent":["import { CompoundStylesApiProps, factory, Factory, useProps } from '../../core';\nimport { ModalBaseOverlay, ModalBaseOverlayProps } from '../ModalBase';\nimport { useDrawerContext } from './Drawer.context';\nimport classes from './Drawer.module.css';\n\nexport type DrawerOverlayStylesNames = 'overlay';\n\nexport interface DrawerOverlayProps\n  extends ModalBaseOverlayProps, CompoundStylesApiProps<DrawerOverlayFactory> {}\n\nexport type DrawerOverlayFactory = Factory<{\n  props: DrawerOverlayProps;\n  ref: HTMLDivElement;\n  stylesNames: DrawerOverlayStylesNames;\n  compound: true;\n}>;\n\nexport const DrawerOverlay = factory<DrawerOverlayFactory>((_props) => {\n  const props = useProps('DrawerOverlay', null, _props);\n  const { classNames, className, style, styles, vars, ...others } = props;\n\n  const ctx = useDrawerContext();\n\n  return (\n    <ModalBaseOverlay\n      {...ctx.getStyles('overlay', { classNames, style, styles, className })}\n      {...others}\n    />\n  );\n});\n\nDrawerOverlay.classes = classes;\nDrawerOverlay.displayName = '@mantine/core/DrawerOverlay';\n"],"mappings":";;;;;;;;AAiBA,MAAa,gBAAgB,SAA+B,WAAW;CAErE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WADzC,SAAS,iBAAiB,MAAM,MACwB;CAItE,OACE,oBAAC,kBAAD;EACE,GAJQ,iBAIF,CAAC,CAAC,UAAU,WAAW;GAAE;GAAY;GAAO;GAAQ;EAAU,CAAC;EACrE,GAAI;CACL,CAAA;AAEL,CAAC;AAED,cAAc,UAAUA;AACxB,cAAc,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerRoot.mjs","names":["classes"],"sources":["../../../src/components/Drawer/DrawerRoot.tsx"],"sourcesContent":["import {\n  createVarsResolver,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  getSize,\n  MantineRadius,\n  rem,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ModalBase, ModalBaseProps, ModalBaseStylesNames } from '../ModalBase';\nimport { ScrollArea } from '../ScrollArea';\nimport { MantineTransition } from '../Transition';\nimport { DrawerProvider, ScrollAreaComponent } from './Drawer.context';\nimport classes from './Drawer.module.css';\n\ntype DrawerPosition = 'bottom' | 'left' | 'right' | 'top';\n\nfunction getDrawerAlign(position: DrawerPosition | undefined) {\n  switch (position) {\n    case 'top':\n      return 'flex-start';\n    case 'bottom':\n      return 'flex-end';\n    default:\n      return undefined;\n  }\n}\n\nfunction getDrawerFlex(position: DrawerPosition | undefined) {\n  if (position === 'top' || position === 'bottom') {\n    return '0 0 calc(100% - var(--drawer-offset, 0rem) * 2)';\n  }\n\n  return undefined;\n}\n\nexport type DrawerRootStylesNames = ModalBaseStylesNames;\nexport type DrawerRootCssVariables = {\n  root:\n    | '--drawer-size'\n    | '--drawer-flex'\n    | '--drawer-height'\n    | '--drawer-align'\n    | '--drawer-justify'\n    | '--drawer-offset';\n};\n\nexport interface DrawerRootProps extends StylesApiProps<DrawerRootFactory>, ModalBaseProps {\n  /** Scroll area component @default 'div' */\n  scrollAreaComponent?: ScrollAreaComponent;\n\n  /** Side of the screen on which drawer will be opened @default 'left' */\n  position?: DrawerPosition;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 0 */\n  radius?: MantineRadius;\n\n  /** Drawer container offset from the viewport end @default 0 */\n  offset?: number | string;\n}\n\nexport type DrawerRootFactory = Factory<{\n  props: DrawerRootProps;\n  ref: HTMLDivElement;\n  stylesNames: DrawerRootStylesNames;\n  vars: DrawerRootCssVariables;\n}>;\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"}
+{"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,YAAA,CAAa;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"}