@mantine/core 9.4.3-alpha.0 → 9.5.0

package/cjs/components/Accordion/Accordion.cjs

@@ -20,6 +20,7 @@ const defaultProps = {
 	multiple: false,
 	loop: true,
 	disableChevronRotation: false,
+	disableCollapse: false,
 	chevronPosition: "right",
 	variant: "default",
 	chevronSize: "auto",
@@ -33,7 +34,7 @@ const varsResolver = require_create_vars_resolver.createVarsResolver((_, { trans
 } }));
 const Accordion = require_factory.genericFactory((_props) => {
 	const props = require_use_props.useProps("Accordion", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, children, multiple, value, defaultValue, onChange, id, loop, transitionDuration, disableChevronRotation, chevronPosition, chevronSize, order, chevron, variant, radius, chevronIconSize, attributes, keepMounted, keepMountedMode, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, children, multiple, value, defaultValue, onChange, id, loop, transitionDuration, disableChevronRotation, disableCollapse, chevronPosition, chevronSize, order, chevron, variant, radius, chevronIconSize, attributes, keepMounted, keepMountedMode, ...others } = props;
 	const uid = (0, _mantine_hooks.useId)(id);
 	const [_value, handleChange] = (0, _mantine_hooks.useUncontrolled)({
 		value,
@@ -43,7 +44,9 @@ const Accordion = require_factory.genericFactory((_props) => {
 	});
 	const isItemActive = (itemValue) => Array.isArray(_value) ? _value.includes(itemValue) : itemValue === _value;
 	const handleItemChange = (itemValue) => {
-		handleChange(Array.isArray(_value) ? _value.includes(itemValue) ? _value.filter((selectedValue) => selectedValue !== itemValue) : [..._value, itemValue] : itemValue === _value ? null : itemValue);
+		if (!Array.isArray(_value) && disableCollapse && itemValue === _value) return;
+		const nextValue = Array.isArray(_value) ? _value.includes(itemValue) ? _value.filter((selectedValue) => selectedValue !== itemValue) : [..._value, itemValue] : itemValue === _value ? null : itemValue;
+		handleChange(nextValue);
 	};
 	const getStyles = require_use_styles.useStyles({
 		name: "Accordion",

package/cjs/components/Accordion/Accordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.cjs","names":["createVarsResolver","rem","getRadius","genericFactory","useProps","useStyles","AccordionProvider","getSafeId","AccordionChevron","Box","classes","AccordionItem","AccordionPanel","AccordionControl"],"sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  Factory,\n  genericFactory,\n  getRadius,\n  getSafeId,\n  MantineRadius,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { AccordionProvider } from './Accordion.context';\nimport { AccordionChevronPosition, AccordionHeadingOrder, AccordionValue } from './Accordion.types';\nimport { AccordionChevron } from './AccordionChevron';\nimport { AccordionControl, type AccordionControlProps } from './AccordionControl/AccordionControl';\nimport { AccordionItem, type AccordionItemProps } from './AccordionItem/AccordionItem';\nimport { AccordionPanel, type AccordionPanelProps } from './AccordionPanel/AccordionPanel';\nimport classes from './Accordion.module.css';\nimport type { AccordionItemContextValue } from './AccordionItem.context';\nexport type AccordionStylesNames =\n  | 'root'\n  | 'content'\n  | 'item'\n  | 'panel'\n  | 'icon'\n  | 'chevron'\n  | 'label'\n  | 'itemTitle'\n  | 'control';\n\nexport type AccordionVariant = 'default' | 'contained' | 'filled' | 'separated';\nexport type AccordionCssVariables = {\n  root: '--accordion-transition-duration' | '--accordion-chevron-size' | '--accordion-radius';\n};\n\nexport interface AccordionProps<Multiple extends boolean = false>\n  extends\n    BoxProps,\n    StylesApiProps<AccordionFactory>,\n    ElementProps<'div', 'value' | 'defaultValue' | 'onChange'> {\n  /** If set, multiple items can be opened at the same time @default false */\n  multiple?: Multiple;\n\n  /** Controlled component value */\n  value?: AccordionValue<Multiple>;\n\n  /** Uncontrolled component default value */\n  defaultValue?: AccordionValue<Multiple>;\n\n  /** Called when value changes, payload type depends on `multiple` prop */\n  onChange?: (value: AccordionValue<Multiple>) => void;\n\n  /** If set, arrow keys loop through items (first to last and last to first) @default true */\n  loop?: boolean;\n\n  /** Transition duration in ms @default 200 */\n  transitionDuration?: number;\n\n  /** If set, chevron rotation is disabled @default false */\n  disableChevronRotation?: boolean;\n\n  /** Position of the chevron relative to the item label @default right */\n  chevronPosition?: AccordionChevronPosition;\n\n  /** Size of the chevron icon container @default auto */\n  chevronSize?: number | string;\n\n  /** Size of the default chevron icon. Ignored when `chevron` prop is set. Use `chevronSize` instead when using custom chevron. @default 16 */\n  chevronIconSize?: number | string;\n\n  /** Sets heading level (h2-h6) for `Accordion.Control` elements. Wraps each control in the corresponding heading tag, recommended to meet WAI-ARIA accessibility requirements. Has no visual effect. */\n  order?: AccordionHeadingOrder;\n\n  /** Custom chevron icon */\n  chevron?: React.ReactNode;\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  /** If set to `false`, panels are unmounted when collapsed. By default, panels stay mounted when collapsed. @default true */\n  keepMounted?: boolean;\n\n  /** Controls how inactive panels content is hidden when `keepMounted` is `true`, `'activity'` – hidden with `Activity` component, `'display-none'` – hidden with `display: none` styles @default 'activity' */\n  keepMountedMode?: 'activity' | 'display-none';\n}\n\nexport type AccordionFactory = Factory<{\n  props: AccordionProps;\n  ref: HTMLDivElement;\n  stylesNames: AccordionStylesNames;\n  vars: AccordionCssVariables;\n  variant: AccordionVariant;\n  signature: <Multiple extends boolean = false>(\n    props: AccordionProps<Multiple>\n  ) => React.JSX.Element;\n  staticComponents: {\n    Item: typeof AccordionItem;\n    Panel: typeof AccordionPanel;\n    Control: typeof AccordionControl;\n    Chevron: typeof AccordionChevron;\n  };\n}>;\n\nconst defaultProps = {\n  multiple: false,\n  loop: true,\n  disableChevronRotation: false,\n  chevronPosition: 'right',\n  variant: 'default',\n  chevronSize: 'auto',\n  chevronIconSize: 16,\n  keepMountedMode: 'activity',\n} satisfies Partial<AccordionProps>;\n\nconst varsResolver = createVarsResolver<AccordionFactory>(\n  (_, { transitionDuration, chevronSize, radius }) => ({\n    root: {\n      '--accordion-transition-duration':\n        transitionDuration === undefined ? undefined : `${transitionDuration}ms`,\n      '--accordion-chevron-size': chevronSize === undefined ? undefined : rem(chevronSize),\n      '--accordion-radius': radius === undefined ? undefined : getRadius(radius),\n    },\n  })\n);\n\nexport const Accordion = genericFactory<AccordionFactory>((_props) => {\n  const props = useProps('Accordion', defaultProps as any, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    multiple,\n    value,\n    defaultValue,\n    onChange,\n    id,\n    loop,\n    transitionDuration,\n    disableChevronRotation,\n    chevronPosition,\n    chevronSize,\n    order,\n    chevron,\n    variant,\n    radius,\n    chevronIconSize,\n    attributes,\n    keepMounted,\n    keepMountedMode,\n    ...others\n  } = props;\n\n  const uid = useId(id);\n  const [_value, handleChange] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: multiple ? ([] as any) : null,\n    onChange,\n  });\n\n  const isItemActive = (itemValue: string) =>\n    Array.isArray(_value) ? _value.includes(itemValue) : itemValue === _value;\n\n  const handleItemChange = (itemValue: string) => {\n    const nextValue = Array.isArray(_value)\n      ? _value.includes(itemValue)\n        ? _value.filter((selectedValue) => selectedValue !== itemValue)\n        : [..._value, itemValue]\n      : itemValue === _value\n        ? null\n        : (itemValue as any);\n\n    handleChange(nextValue);\n  };\n\n  const getStyles = useStyles<AccordionFactory>({\n    name: 'Accordion',\n    classes,\n    props: props as AccordionProps,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <AccordionProvider\n      value={{\n        isItemActive,\n        onChange: handleItemChange,\n        getControlId: getSafeId(\n          `${uid}-control`,\n          'Accordion.Item component was rendered with invalid value or without value'\n        ),\n        getRegionId: getSafeId(\n          `${uid}-panel`,\n          'Accordion.Item component was rendered with invalid value or without value'\n        ),\n        chevron: chevron === null ? null : chevron || <AccordionChevron size={chevronIconSize} />,\n        transitionDuration,\n        disableChevronRotation,\n        chevronPosition,\n        order,\n        loop,\n        getStyles,\n        variant,\n        unstyled,\n        keepMounted,\n        keepMountedMode,\n      }}\n    >\n      <Box {...getStyles('root')} id={uid} {...others} variant={variant} data-accordion>\n        {children}\n      </Box>\n    </AccordionProvider>\n  );\n});\n\nAccordion.classes = classes;\nAccordion.varsResolver = varsResolver;\nAccordion.displayName = '@mantine/core/Accordion';\nAccordion.Item = AccordionItem;\nAccordion.Panel = AccordionPanel;\nAccordion.Control = AccordionControl;\nAccordion.Chevron = AccordionChevron;\n\nexport namespace Accordion {\n  export type Props = AccordionProps;\n  export type StylesNames = AccordionStylesNames;\n  export type CssVariables = AccordionCssVariables;\n  export type Factory = AccordionFactory;\n  export type Variant = AccordionVariant;\n\n  export namespace Control {\n    export type Props = AccordionControlProps;\n  }\n\n  export namespace Item {\n    export type Props = AccordionItemProps;\n    export type Context = AccordionItemContextValue;\n  }\n\n  export namespace Panel {\n    export type Props = AccordionPanelProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA4GA,MAAM,eAAe;CACnB,UAAU;CACV,MAAM;CACN,wBAAwB;CACxB,iBAAiB;CACjB,SAAS;CACT,aAAa;CACb,iBAAiB;CACjB,iBAAiB;AACnB;AAEA,MAAM,eAAeA,6BAAAA,oBAClB,GAAG,EAAE,oBAAoB,aAAa,cAAc,EACnD,MAAM;CACJ,mCACE,uBAAuB,KAAA,IAAY,KAAA,IAAY,GAAG,mBAAmB;CACvE,4BAA4B,gBAAgB,KAAA,IAAY,KAAA,IAAYC,YAAAA,IAAI,WAAW;CACnF,sBAAsB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,MAAM;AAC3E,EACF,EACF;AAEA,MAAa,YAAYC,gBAAAA,gBAAkC,WAAW;CACpE,MAAM,QAAQC,kBAAAA,SAAS,aAAa,cAAqB,MAAM;CAC/D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,UACA,OACA,cACA,UACA,IACA,MACA,oBACA,wBACA,iBACA,aACA,OACA,SACA,SACA,QACA,iBACA,YACA,aACA,iBACA,GAAG,WACD;CAEJ,MAAM,OAAA,GAAA,eAAA,MAAA,CAAY,EAAE;CACpB,MAAM,CAAC,QAAQ,iBAAA,GAAA,eAAA,gBAAA,CAAgC;EAC7C;EACA;EACA,YAAY,WAAY,CAAC,IAAY;EACrC;CACF,CAAC;CAED,MAAM,gBAAgB,cACpB,MAAM,QAAQ,MAAM,IAAI,OAAO,SAAS,SAAS,IAAI,cAAc;CAErE,MAAM,oBAAoB,cAAsB;EAS9C,aARkB,MAAM,QAAQ,MAAM,IAClC,OAAO,SAAS,SAAS,IACvB,OAAO,QAAQ,kBAAkB,kBAAkB,SAAS,IAC5D,CAAC,GAAG,QAAQ,SAAS,IACvB,cAAc,SACZ,OACC,SAEe;CACxB;CAEA,MAAM,YAAYC,mBAAAA,UAA4B;EAC5C,MAAM;EACN,SAAA,yBAAA;EACO;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,0BAAAA,mBAAD;EACE,OAAO;GACL;GACA,UAAU;GACV,cAAcC,oBAAAA,UACZ,GAAG,IAAI,WACP,2EACF;GACA,aAAaA,oBAAAA,UACX,GAAG,IAAI,SACP,2EACF;GACA,SAAS,YAAY,OAAO,OAAO,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,kBAAD,EAAkB,MAAM,gBAAkB,CAAA;GACxF;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;GAAK,GAAI,UAAU,MAAM;GAAG,IAAI;GAAK,GAAI;GAAiB;GAAS,kBAAA;GAChE;EACE,CAAA;CACY,CAAA;AAEvB,CAAC;AAED,UAAU,UAAUC,yBAAAA;AACpB,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,UAAU,OAAOC,sBAAAA;AACjB,UAAU,QAAQC,uBAAAA;AAClB,UAAU,UAAUC,yBAAAA;AACpB,UAAU,UAAUL,yBAAAA"}
+{"version":3,"file":"Accordion.cjs","names":["createVarsResolver","rem","getRadius","genericFactory","useProps","useStyles","AccordionProvider","getSafeId","AccordionChevron","Box","classes","AccordionItem","AccordionPanel","AccordionControl"],"sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  Factory,\n  genericFactory,\n  getRadius,\n  getSafeId,\n  MantineRadius,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { AccordionProvider } from './Accordion.context';\nimport { AccordionChevronPosition, AccordionHeadingOrder, AccordionValue } from './Accordion.types';\nimport { AccordionChevron } from './AccordionChevron';\nimport { AccordionControl, type AccordionControlProps } from './AccordionControl/AccordionControl';\nimport { AccordionItem, type AccordionItemProps } from './AccordionItem/AccordionItem';\nimport { AccordionPanel, type AccordionPanelProps } from './AccordionPanel/AccordionPanel';\nimport classes from './Accordion.module.css';\nimport type { AccordionItemContextValue } from './AccordionItem.context';\nexport type AccordionStylesNames =\n  | 'root'\n  | 'content'\n  | 'item'\n  | 'panel'\n  | 'icon'\n  | 'chevron'\n  | 'label'\n  | 'itemTitle'\n  | 'control';\n\nexport type AccordionVariant = 'default' | 'contained' | 'filled' | 'separated';\nexport type AccordionCssVariables = {\n  root: '--accordion-transition-duration' | '--accordion-chevron-size' | '--accordion-radius';\n};\n\nexport interface AccordionProps<Multiple extends boolean = false>\n  extends\n    BoxProps,\n    StylesApiProps<AccordionFactory>,\n    ElementProps<'div', 'value' | 'defaultValue' | 'onChange'> {\n  /** If set, multiple items can be opened at the same time @default false */\n  multiple?: Multiple;\n\n  /** Controlled component value */\n  value?: AccordionValue<Multiple>;\n\n  /** Uncontrolled component default value */\n  defaultValue?: AccordionValue<Multiple>;\n\n  /** Called when value changes, payload type depends on `multiple` prop */\n  onChange?: (value: AccordionValue<Multiple>) => void;\n\n  /** If set, arrow keys loop through items (first to last and last to first) @default true */\n  loop?: boolean;\n\n  /** Transition duration in ms @default 200 */\n  transitionDuration?: number;\n\n  /** If set, chevron rotation is disabled @default false */\n  disableChevronRotation?: boolean;\n\n  /** If set, the open item cannot be collapsed by clicking it again, so one item always stays open. Only applies when `multiple` is `false`. @default false */\n  disableCollapse?: boolean;\n\n  /** Position of the chevron relative to the item label @default right */\n  chevronPosition?: AccordionChevronPosition;\n\n  /** Size of the chevron icon container @default auto */\n  chevronSize?: number | string;\n\n  /** Size of the default chevron icon. Ignored when `chevron` prop is set. Use `chevronSize` instead when using custom chevron. @default 16 */\n  chevronIconSize?: number | string;\n\n  /** Sets heading level (h2-h6) for `Accordion.Control` elements. Wraps each control in the corresponding heading tag, recommended to meet WAI-ARIA accessibility requirements. Has no visual effect. */\n  order?: AccordionHeadingOrder;\n\n  /** Custom chevron icon */\n  chevron?: React.ReactNode;\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  /** If set to `false`, panels are unmounted when collapsed. By default, panels stay mounted when collapsed. @default true */\n  keepMounted?: boolean;\n\n  /** Controls how inactive panels content is hidden when `keepMounted` is `true`, `'activity'` – hidden with `Activity` component, `'display-none'` – hidden with `display: none` styles @default 'activity' */\n  keepMountedMode?: 'activity' | 'display-none';\n}\n\nexport type AccordionFactory = Factory<{\n  props: AccordionProps;\n  ref: HTMLDivElement;\n  stylesNames: AccordionStylesNames;\n  vars: AccordionCssVariables;\n  variant: AccordionVariant;\n  signature: <Multiple extends boolean = false>(\n    props: AccordionProps<Multiple>\n  ) => React.JSX.Element;\n  staticComponents: {\n    Item: typeof AccordionItem;\n    Panel: typeof AccordionPanel;\n    Control: typeof AccordionControl;\n    Chevron: typeof AccordionChevron;\n  };\n}>;\n\nconst defaultProps = {\n  multiple: false,\n  loop: true,\n  disableChevronRotation: false,\n  disableCollapse: false,\n  chevronPosition: 'right',\n  variant: 'default',\n  chevronSize: 'auto',\n  chevronIconSize: 16,\n  keepMountedMode: 'activity',\n} satisfies Partial<AccordionProps>;\n\nconst varsResolver = createVarsResolver<AccordionFactory>(\n  (_, { transitionDuration, chevronSize, radius }) => ({\n    root: {\n      '--accordion-transition-duration':\n        transitionDuration === undefined ? undefined : `${transitionDuration}ms`,\n      '--accordion-chevron-size': chevronSize === undefined ? undefined : rem(chevronSize),\n      '--accordion-radius': radius === undefined ? undefined : getRadius(radius),\n    },\n  })\n);\n\nexport const Accordion = genericFactory<AccordionFactory>((_props) => {\n  const props = useProps('Accordion', defaultProps as any, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    multiple,\n    value,\n    defaultValue,\n    onChange,\n    id,\n    loop,\n    transitionDuration,\n    disableChevronRotation,\n    disableCollapse,\n    chevronPosition,\n    chevronSize,\n    order,\n    chevron,\n    variant,\n    radius,\n    chevronIconSize,\n    attributes,\n    keepMounted,\n    keepMountedMode,\n    ...others\n  } = props;\n\n  const uid = useId(id);\n  const [_value, handleChange] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: multiple ? ([] as any) : null,\n    onChange,\n  });\n\n  const isItemActive = (itemValue: string) =>\n    Array.isArray(_value) ? _value.includes(itemValue) : itemValue === _value;\n\n  const handleItemChange = (itemValue: string) => {\n    if (!Array.isArray(_value) && disableCollapse && itemValue === _value) {\n      return;\n    }\n\n    const nextValue = Array.isArray(_value)\n      ? _value.includes(itemValue)\n        ? _value.filter((selectedValue) => selectedValue !== itemValue)\n        : [..._value, itemValue]\n      : itemValue === _value\n        ? null\n        : (itemValue as any);\n\n    handleChange(nextValue);\n  };\n\n  const getStyles = useStyles<AccordionFactory>({\n    name: 'Accordion',\n    classes,\n    props: props as AccordionProps,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <AccordionProvider\n      value={{\n        isItemActive,\n        onChange: handleItemChange,\n        getControlId: getSafeId(\n          `${uid}-control`,\n          'Accordion.Item component was rendered with invalid value or without value'\n        ),\n        getRegionId: getSafeId(\n          `${uid}-panel`,\n          'Accordion.Item component was rendered with invalid value or without value'\n        ),\n        chevron: chevron === null ? null : chevron || <AccordionChevron size={chevronIconSize} />,\n        transitionDuration,\n        disableChevronRotation,\n        chevronPosition,\n        order,\n        loop,\n        getStyles,\n        variant,\n        unstyled,\n        keepMounted,\n        keepMountedMode,\n      }}\n    >\n      <Box {...getStyles('root')} id={uid} {...others} variant={variant} data-accordion>\n        {children}\n      </Box>\n    </AccordionProvider>\n  );\n});\n\nAccordion.classes = classes;\nAccordion.varsResolver = varsResolver;\nAccordion.displayName = '@mantine/core/Accordion';\nAccordion.Item = AccordionItem;\nAccordion.Panel = AccordionPanel;\nAccordion.Control = AccordionControl;\nAccordion.Chevron = AccordionChevron;\n\nexport namespace Accordion {\n  export type Props = AccordionProps;\n  export type StylesNames = AccordionStylesNames;\n  export type CssVariables = AccordionCssVariables;\n  export type Factory = AccordionFactory;\n  export type Variant = AccordionVariant;\n\n  export namespace Control {\n    export type Props = AccordionControlProps;\n  }\n\n  export namespace Item {\n    export type Props = AccordionItemProps;\n    export type Context = AccordionItemContextValue;\n  }\n\n  export namespace Panel {\n    export type Props = AccordionPanelProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA+GA,MAAM,eAAe;CACnB,UAAU;CACV,MAAM;CACN,wBAAwB;CACxB,iBAAiB;CACjB,iBAAiB;CACjB,SAAS;CACT,aAAa;CACb,iBAAiB;CACjB,iBAAiB;AACnB;AAEA,MAAM,eAAeA,6BAAAA,oBAClB,GAAG,EAAE,oBAAoB,aAAa,cAAc,EACnD,MAAM;CACJ,mCACE,uBAAuB,KAAA,IAAY,KAAA,IAAY,GAAG,mBAAmB;CACvE,4BAA4B,gBAAgB,KAAA,IAAY,KAAA,IAAYC,YAAAA,IAAI,WAAW;CACnF,sBAAsB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,MAAM;AAC3E,EACF,EACF;AAEA,MAAa,YAAYC,gBAAAA,gBAAkC,WAAW;CACpE,MAAM,QAAQC,kBAAAA,SAAS,aAAa,cAAqB,MAAM;CAC/D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,UACA,OACA,cACA,UACA,IACA,MACA,oBACA,wBACA,iBACA,iBACA,aACA,OACA,SACA,SACA,QACA,iBACA,YACA,aACA,iBACA,GAAG,WACD;CAEJ,MAAM,OAAA,GAAA,eAAA,MAAA,CAAY,EAAE;CACpB,MAAM,CAAC,QAAQ,iBAAA,GAAA,eAAA,gBAAA,CAAgC;EAC7C;EACA;EACA,YAAY,WAAY,CAAC,IAAY;EACrC;CACF,CAAC;CAED,MAAM,gBAAgB,cACpB,MAAM,QAAQ,MAAM,IAAI,OAAO,SAAS,SAAS,IAAI,cAAc;CAErE,MAAM,oBAAoB,cAAsB;EAC9C,IAAI,CAAC,MAAM,QAAQ,MAAM,KAAK,mBAAmB,cAAc,QAC7D;EAGF,MAAM,YAAY,MAAM,QAAQ,MAAM,IAClC,OAAO,SAAS,SAAS,IACvB,OAAO,QAAQ,kBAAkB,kBAAkB,SAAS,IAC5D,CAAC,GAAG,QAAQ,SAAS,IACvB,cAAc,SACZ,OACC;EAEP,aAAa,SAAS;CACxB;CAEA,MAAM,YAAYC,mBAAAA,UAA4B;EAC5C,MAAM;EACN,SAAA,yBAAA;EACO;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,0BAAAA,mBAAD;EACE,OAAO;GACL;GACA,UAAU;GACV,cAAcC,oBAAAA,UACZ,GAAG,IAAI,WACP,2EACF;GACA,aAAaA,oBAAAA,UACX,GAAG,IAAI,SACP,2EACF;GACA,SAAS,YAAY,OAAO,OAAO,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,kBAAD,EAAkB,MAAM,gBAAkB,CAAA;GACxF;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;GAAK,GAAI,UAAU,MAAM;GAAG,IAAI;GAAK,GAAI;GAAiB;GAAS,kBAAA;GAChE;EACE,CAAA;CACY,CAAA;AAEvB,CAAC;AAED,UAAU,UAAUC,yBAAAA;AACpB,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,UAAU,OAAOC,sBAAAA;AACjB,UAAU,QAAQC,uBAAAA;AAClB,UAAU,UAAUC,yBAAAA;AACpB,UAAU,UAAUL,yBAAAA"}

package/cjs/components/AngleSlider/AngleSlider.cjs

@@ -30,7 +30,10 @@ const AngleSlider = require_factory.factory((_props) => {
 		onChange
 	});
 	const update = (val) => {
-		if (rootRef.current && !disabled) setValue(restrictToMarks && Array.isArray(marks) ? require_find_closest_number.findClosestNumber(val, marks.map((mark) => mark.value)) : val);
+		if (rootRef.current && !disabled) {
+			const newValue = restrictToMarks && Array.isArray(marks) ? require_find_closest_number.findClosestNumber(val, marks.map((mark) => mark.value)) : val;
+			setValue(newValue);
+		}
 	};
 	const { ref: radialMoveRef } = (0, _mantine_hooks.useRadialMove)(update, {
 		step,

package/cjs/components/AngleSlider/AngleSlider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AngleSlider.cjs","names":["createVarsResolver","rem","factory","useProps","findClosestNumber","useStyles","Box","classes"],"sources":["../../../src/components/AngleSlider/AngleSlider.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { normalizeRadialValue, useMergedRef, useRadialMove, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  findClosestNumber,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './AngleSlider.module.css';\n\nexport type AngleSliderStylesNames = 'root' | 'thumb' | 'label' | 'marks' | 'mark';\nexport type AngleSliderCssVariables = {\n  root: '--slider-size' | '--thumb-size';\n};\n\nexport interface AngleSliderProps\n  extends BoxProps, StylesApiProps<AngleSliderFactory>, ElementProps<'div', 'onChange'> {\n  /** Step between values @default 1 */\n  step?: number;\n\n  /** Controlled component value */\n  value?: number;\n\n  /** Uncontrolled component default value */\n  defaultValue?: number;\n\n  /** Called on value change */\n  onChange?: (value: number) => void;\n\n  /** Called after the selection is finished */\n  onChangeEnd?: (value: number) => void;\n\n  /** Called in `onMouseDown` and `onTouchStart` */\n  onScrubStart?: () => void;\n\n  /** Called in `onMouseUp` and `onTouchEnd` */\n  onScrubEnd?: () => void;\n\n  /** If set, the label is displayed inside the slider @default true */\n  withLabel?: boolean;\n\n  /** Array of marks displayed on the slider */\n  marks?: { value: number; label?: string }[];\n\n  /** Slider size in px @default 60 */\n  size?: number;\n\n  /** Size of the thumb in px. Calculated based on the `size` value by default. */\n  thumbSize?: number;\n\n  /** A function to format label based on the current value */\n  formatLabel?: (value: number) => React.ReactNode;\n\n  /** Sets `data-disabled` attribute, disables interactions */\n  disabled?: boolean;\n\n  /** If set, the selection is allowed only from the given marks array @default false */\n  restrictToMarks?: boolean;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'>;\n\n  /** Hidden input name, use with uncontrolled component */\n  name?: string;\n}\n\nexport type AngleSliderFactory = Factory<{\n  props: AngleSliderProps;\n  ref: HTMLDivElement;\n  stylesNames: AngleSliderStylesNames;\n  vars: AngleSliderCssVariables;\n}>;\n\nconst defaultProps = {\n  step: 1,\n  withLabel: true,\n} satisfies Partial<AngleSliderProps>;\n\nconst varsResolver = createVarsResolver<AngleSliderFactory>((_, { size, thumbSize }) => ({\n  root: {\n    '--slider-size': rem(size),\n    '--thumb-size': rem(thumbSize),\n  },\n}));\n\nexport const AngleSlider = factory<AngleSliderFactory>((_props) => {\n  const props = useProps('AngleSlider', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    step,\n    value,\n    defaultValue,\n    onChange,\n    onMouseDown,\n    withLabel,\n    marks,\n    thumbSize,\n    restrictToMarks,\n    formatLabel,\n    onChangeEnd,\n    disabled,\n    onTouchStart,\n    name,\n    hiddenInputProps,\n    'aria-label': ariaLabel,\n    tabIndex,\n    onScrubStart,\n    onScrubEnd,\n    mod,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const rootRef = useRef<HTMLDivElement | null>(null);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: 0,\n    onChange,\n  });\n\n  const update = (val: number) => {\n    if (rootRef.current && !disabled) {\n      const newValue =\n        restrictToMarks && Array.isArray(marks)\n          ? findClosestNumber(\n              val,\n              marks.map((mark) => mark.value)\n            )\n          : val;\n\n      setValue(newValue);\n    }\n  };\n\n  const { ref: radialMoveRef } = useRadialMove(update, {\n    step,\n    onChangeEnd,\n    onScrubStart,\n    onScrubEnd,\n  });\n\n  const getStyles = useStyles<AngleSliderFactory>({\n    name: 'AngleSlider',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      return;\n    }\n\n    let newValue = _value;\n\n    if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      if (_value === 0) {\n        newValue = 359;\n      } else {\n        newValue = normalizeRadialValue(_value - step, step);\n      }\n    }\n\n    if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      if (_value === 359) {\n        newValue = 0;\n      } else {\n        newValue = normalizeRadialValue(_value + step, step);\n      }\n    }\n\n    if (event.key === 'Home') {\n      newValue = 0;\n    }\n\n    if (event.key === 'End') {\n      newValue = 359;\n    }\n\n    if (restrictToMarks && Array.isArray(marks)) {\n      const markValues = marks.map((mark) => mark.value);\n      const currentIndex = markValues.indexOf(_value);\n\n      if (currentIndex !== -1) {\n        if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {\n          newValue = markValues[currentIndex === 0 ? markValues.length - 1 : currentIndex - 1];\n        } else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {\n          newValue = markValues[currentIndex === markValues.length - 1 ? 0 : currentIndex + 1];\n        } else {\n          newValue = findClosestNumber(newValue, markValues);\n        }\n      } else {\n        newValue = findClosestNumber(newValue, markValues);\n      }\n    }\n\n    setValue(newValue);\n    onChangeEnd?.(newValue);\n  };\n\n  const marksItems = marks?.map((mark, index) => (\n    <div\n      {...getStyles('mark', { style: { '--angle': `${mark.value}deg` } })}\n      data-label={mark.label || undefined}\n      key={index}\n    />\n  ));\n\n  return (\n    <Box\n      ref={useMergedRef(ref, rootRef, radialMoveRef)}\n      {...getStyles('root', { focusable: true })}\n      mod={[{ disabled }, mod]}\n      {...others}\n    >\n      {marksItems && marksItems.length > 0 && <div {...getStyles('marks')}>{marksItems}</div>}\n\n      {withLabel && (\n        <div {...getStyles('label')}>\n          {typeof formatLabel === 'function' ? formatLabel(_value) : _value}\n        </div>\n      )}\n      <div\n        tabIndex={tabIndex ?? (disabled ? -1 : 0)}\n        role=\"slider\"\n        aria-valuemax={360}\n        aria-valuemin={0}\n        aria-valuenow={_value}\n        onKeyDown={handleKeyDown}\n        aria-label={ariaLabel}\n        {...getStyles('thumb', { style: { transform: `rotate(${_value}deg)` } })}\n      />\n      <input type=\"hidden\" name={name} value={_value} {...hiddenInputProps} />\n    </Box>\n  );\n});\n\nAngleSlider.displayName = '@mantine/core/AngleSlider';\nAngleSlider.classes = classes;\nAngleSlider.varsResolver = varsResolver;\n\nexport namespace AngleSlider {\n  export type Props = AngleSliderProps;\n  export type StylesNames = AngleSliderStylesNames;\n  export type CssVariables = AngleSliderCssVariables;\n  export type Factory = AngleSliderFactory;\n}\n"],"mappings":"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"}
+{"version":3,"file":"AngleSlider.cjs","names":["createVarsResolver","rem","factory","useProps","findClosestNumber","useStyles","Box","classes"],"sources":["../../../src/components/AngleSlider/AngleSlider.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { normalizeRadialValue, useMergedRef, useRadialMove, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  findClosestNumber,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './AngleSlider.module.css';\n\nexport type AngleSliderStylesNames = 'root' | 'thumb' | 'label' | 'marks' | 'mark';\nexport type AngleSliderCssVariables = {\n  root: '--slider-size' | '--thumb-size';\n};\n\nexport interface AngleSliderProps\n  extends BoxProps, StylesApiProps<AngleSliderFactory>, ElementProps<'div', 'onChange'> {\n  /** Step between values @default 1 */\n  step?: number;\n\n  /** Controlled component value */\n  value?: number;\n\n  /** Uncontrolled component default value */\n  defaultValue?: number;\n\n  /** Called on value change */\n  onChange?: (value: number) => void;\n\n  /** Called after the selection is finished */\n  onChangeEnd?: (value: number) => void;\n\n  /** Called in `onMouseDown` and `onTouchStart` */\n  onScrubStart?: () => void;\n\n  /** Called in `onMouseUp` and `onTouchEnd` */\n  onScrubEnd?: () => void;\n\n  /** If set, the label is displayed inside the slider @default true */\n  withLabel?: boolean;\n\n  /** Array of marks displayed on the slider */\n  marks?: { value: number; label?: string }[];\n\n  /** Slider size in px @default 60 */\n  size?: number;\n\n  /** Size of the thumb in px. Calculated based on the `size` value by default. */\n  thumbSize?: number;\n\n  /** A function to format label based on the current value */\n  formatLabel?: (value: number) => React.ReactNode;\n\n  /** Sets `data-disabled` attribute, disables interactions */\n  disabled?: boolean;\n\n  /** If set, the selection is allowed only from the given marks array @default false */\n  restrictToMarks?: boolean;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'>;\n\n  /** Hidden input name, use with uncontrolled component */\n  name?: string;\n}\n\nexport type AngleSliderFactory = Factory<{\n  props: AngleSliderProps;\n  ref: HTMLDivElement;\n  stylesNames: AngleSliderStylesNames;\n  vars: AngleSliderCssVariables;\n}>;\n\nconst defaultProps = {\n  step: 1,\n  withLabel: true,\n} satisfies Partial<AngleSliderProps>;\n\nconst varsResolver = createVarsResolver<AngleSliderFactory>((_, { size, thumbSize }) => ({\n  root: {\n    '--slider-size': rem(size),\n    '--thumb-size': rem(thumbSize),\n  },\n}));\n\nexport const AngleSlider = factory<AngleSliderFactory>((_props) => {\n  const props = useProps('AngleSlider', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    step,\n    value,\n    defaultValue,\n    onChange,\n    onMouseDown,\n    withLabel,\n    marks,\n    thumbSize,\n    restrictToMarks,\n    formatLabel,\n    onChangeEnd,\n    disabled,\n    onTouchStart,\n    name,\n    hiddenInputProps,\n    'aria-label': ariaLabel,\n    tabIndex,\n    onScrubStart,\n    onScrubEnd,\n    mod,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const rootRef = useRef<HTMLDivElement | null>(null);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: 0,\n    onChange,\n  });\n\n  const update = (val: number) => {\n    if (rootRef.current && !disabled) {\n      const newValue =\n        restrictToMarks && Array.isArray(marks)\n          ? findClosestNumber(\n              val,\n              marks.map((mark) => mark.value)\n            )\n          : val;\n\n      setValue(newValue);\n    }\n  };\n\n  const { ref: radialMoveRef } = useRadialMove(update, {\n    step,\n    onChangeEnd,\n    onScrubStart,\n    onScrubEnd,\n  });\n\n  const getStyles = useStyles<AngleSliderFactory>({\n    name: 'AngleSlider',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      return;\n    }\n\n    let newValue = _value;\n\n    if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      if (_value === 0) {\n        newValue = 359;\n      } else {\n        newValue = normalizeRadialValue(_value - step, step);\n      }\n    }\n\n    if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      if (_value === 359) {\n        newValue = 0;\n      } else {\n        newValue = normalizeRadialValue(_value + step, step);\n      }\n    }\n\n    if (event.key === 'Home') {\n      newValue = 0;\n    }\n\n    if (event.key === 'End') {\n      newValue = 359;\n    }\n\n    if (restrictToMarks && Array.isArray(marks)) {\n      const markValues = marks.map((mark) => mark.value);\n      const currentIndex = markValues.indexOf(_value);\n\n      if (currentIndex !== -1) {\n        if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {\n          newValue = markValues[currentIndex === 0 ? markValues.length - 1 : currentIndex - 1];\n        } else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {\n          newValue = markValues[currentIndex === markValues.length - 1 ? 0 : currentIndex + 1];\n        } else {\n          newValue = findClosestNumber(newValue, markValues);\n        }\n      } else {\n        newValue = findClosestNumber(newValue, markValues);\n      }\n    }\n\n    setValue(newValue);\n    onChangeEnd?.(newValue);\n  };\n\n  const marksItems = marks?.map((mark, index) => (\n    <div\n      {...getStyles('mark', { style: { '--angle': `${mark.value}deg` } })}\n      data-label={mark.label || undefined}\n      key={index}\n    />\n  ));\n\n  return (\n    <Box\n      ref={useMergedRef(ref, rootRef, radialMoveRef)}\n      {...getStyles('root', { focusable: true })}\n      mod={[{ disabled }, mod]}\n      {...others}\n    >\n      {marksItems && marksItems.length > 0 && <div {...getStyles('marks')}>{marksItems}</div>}\n\n      {withLabel && (\n        <div {...getStyles('label')}>\n          {typeof formatLabel === 'function' ? formatLabel(_value) : _value}\n        </div>\n      )}\n      <div\n        tabIndex={tabIndex ?? (disabled ? -1 : 0)}\n        role=\"slider\"\n        aria-valuemax={360}\n        aria-valuemin={0}\n        aria-valuenow={_value}\n        onKeyDown={handleKeyDown}\n        aria-label={ariaLabel}\n        {...getStyles('thumb', { style: { transform: `rotate(${_value}deg)` } })}\n      />\n      <input type=\"hidden\" name={name} value={_value} {...hiddenInputProps} />\n    </Box>\n  );\n});\n\nAngleSlider.displayName = '@mantine/core/AngleSlider';\nAngleSlider.classes = classes;\nAngleSlider.varsResolver = varsResolver;\n\nexport namespace AngleSlider {\n  export type Props = AngleSliderProps;\n  export type StylesNames = AngleSliderStylesNames;\n  export type CssVariables = AngleSliderCssVariables;\n  export type Factory = AngleSliderFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AAgFA,MAAM,eAAe;CACnB,MAAM;CACN,WAAW;AACb;AAEA,MAAM,eAAeA,6BAAAA,oBAAwC,GAAG,EAAE,MAAM,iBAAiB,EACvF,MAAM;CACJ,iBAAiBC,YAAAA,IAAI,IAAI;CACzB,gBAAgBA,YAAAA,IAAI,SAAS;AAC/B,EACF,EAAE;AAEF,MAAa,cAAcC,gBAAAA,SAA6B,WAAW;CACjE,MAAM,QAAQC,kBAAAA,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,OACA,cACA,UACA,aACA,WACA,OACA,WACA,iBACA,aACA,aACA,UACA,cACA,MACA,kBACA,cAAc,WACd,UACA,cACA,YACA,KACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,WAAA,GAAA,MAAA,OAAA,CAAwC,IAAI;CAElD,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,gBAAA,CAA4B;EACzC;EACA;EACA,YAAY;EACZ;CACF,CAAC;CAED,MAAM,UAAU,QAAgB;EAC9B,IAAI,QAAQ,WAAW,CAAC,UAAU;GAChC,MAAM,WACJ,mBAAmB,MAAM,QAAQ,KAAK,IAClCC,4BAAAA,kBACE,KACA,MAAM,KAAK,SAAS,KAAK,KAAK,CAChC,IACA;GAEN,SAAS,QAAQ;EACnB;CACF;CAEA,MAAM,EAAE,KAAK,mBAAA,GAAA,eAAA,cAAA,CAAgC,QAAQ;EACnD;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,YAAYC,mBAAAA,UAA8B;EAC9C,MAAM;EACN,SAAA,2BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,iBAAiB,UAA+C;EACpE,IAAI,UACF;EAGF,IAAI,WAAW;EAEf,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,aAAa;GAC1D,MAAM,eAAe;GACrB,IAAI,WAAW,GACb,WAAW;QAEX,YAAA,GAAA,eAAA,qBAAA,CAAgC,SAAS,MAAM,IAAI;EAEvD;EAEA,IAAI,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,WAAW;GACzD,MAAM,eAAe;GACrB,IAAI,WAAW,KACb,WAAW;QAEX,YAAA,GAAA,eAAA,qBAAA,CAAgC,SAAS,MAAM,IAAI;EAEvD;EAEA,IAAI,MAAM,QAAQ,QAChB,WAAW;EAGb,IAAI,MAAM,QAAQ,OAChB,WAAW;EAGb,IAAI,mBAAmB,MAAM,QAAQ,KAAK,GAAG;GAC3C,MAAM,aAAa,MAAM,KAAK,SAAS,KAAK,KAAK;GACjD,MAAM,eAAe,WAAW,QAAQ,MAAM;GAE9C,IAAI,iBAAiB,IACnB,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,aAC7C,WAAW,WAAW,iBAAiB,IAAI,WAAW,SAAS,IAAI,eAAe;QAC7E,IAAI,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,WACrD,WAAW,WAAW,iBAAiB,WAAW,SAAS,IAAI,IAAI,eAAe;QAElF,WAAWD,4BAAAA,kBAAkB,UAAU,UAAU;QAGnD,WAAWA,4BAAAA,kBAAkB,UAAU,UAAU;EAErD;EAEA,SAAS,QAAQ;EACjB,cAAc,QAAQ;CACxB;CAEA,MAAM,aAAa,OAAO,KAAK,MAAM,UACnC,iBAAA,GAAA,MAAA,cAAA,CAAC,OAAD;EACE,GAAI,UAAU,QAAQ,EAAE,OAAO,EAAE,WAAW,GAAG,KAAK,MAAM,KAAK,EAAE,CAAC;EAClE,cAAY,KAAK,SAAS,KAAA;EAC1B,KAAK;CACN,CAAA,CACF;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACE,YAAAA,KAAD;EACE,MAAA,GAAA,eAAA,aAAA,CAAkB,KAAK,SAAS,aAAa;EAC7C,GAAI,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC;EACzC,KAAK,CAAC,EAAE,SAAS,GAAG,GAAG;EACvB,GAAI;YAJN;GAMG,cAAc,WAAW,SAAS,KAAK,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,GAAI,UAAU,OAAO;cAAI;GAAgB,CAAA;GAErF,aACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,GAAI,UAAU,OAAO;cACvB,OAAO,gBAAgB,aAAa,YAAY,MAAM,IAAI;GACxD,CAAA;GAEP,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,UAAU,aAAa,WAAW,KAAK;IACvC,MAAK;IACL,iBAAe;IACf,iBAAe;IACf,iBAAe;IACf,WAAW;IACX,cAAY;IACZ,GAAI,UAAU,SAAS,EAAE,OAAO,EAAE,WAAW,UAAU,OAAO,MAAM,EAAE,CAAC;GACxE,CAAA;GACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;IAAO,MAAK;IAAe;IAAM,OAAO;IAAQ,GAAI;GAAmB,CAAA;EACpE;;AAET,CAAC;AAED,YAAY,cAAc;AAC1B,YAAY,UAAUC,2BAAAA;AACtB,YAAY,eAAe"}

package/cjs/components/Avatar/AvatarGroup/AvatarGroup.cjs

@@ -14,23 +14,24 @@ const varsResolver = require_create_vars_resolver.createVarsResolver((_, { spaci
 const AvatarGroup = require_factory.factory((_props) => {
 	const props = require_use_props.useProps("AvatarGroup", null, _props);
 	const { classNames, className, style, styles, unstyled, vars, spacing, attributes, ...others } = props;
+	const getStyles = require_use_styles.useStyles({
+		name: "AvatarGroup",
+		classes: require_Avatar_module.default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver,
+		rootSelector: "group"
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AvatarGroupContext, {
 		value: { withinGroup: true },
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
-			...require_use_styles.useStyles({
-				name: "AvatarGroup",
-				classes: require_Avatar_module.default,
-				props,
-				className,
-				style,
-				classNames,
-				styles,
-				unstyled,
-				attributes,
-				vars,
-				varsResolver,
-				rootSelector: "group"
-			})("group"),
+			...getStyles("group"),
 			...others
 		})
 	});

package/cjs/components/Avatar/AvatarGroup/AvatarGroup.cjs.map

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

package/cjs/components/Cascader/Cascader.cjs

@@ -0,0 +1,371 @@
+"use client";
+const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
+const require_use_resolved_styles_api = require("../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.cjs");
+const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
+const require_extract_style_props = require("../../core/Box/style-props/extract-style-props/extract-style-props.cjs");
+const require_factory = require("../../core/factory/factory.cjs");
+const require_ScrollArea = require("../ScrollArea/ScrollArea.cjs");
+const require_InputBase = require("../InputBase/InputBase.cjs");
+const require_use_combobox = require("../Combobox/use-combobox/use-combobox.cjs");
+const require_Combobox = require("../Combobox/Combobox.cjs");
+const require_CheckIcon = require("../Checkbox/CheckIcon.cjs");
+const require_CascaderColumns = require("./CascaderColumns.cjs");
+const require_flatten_cascader_paths = require("./flatten-cascader-paths.cjs");
+const require_get_cascader_path_options = require("./get-cascader-path-options.cjs");
+const require_use_cascader = require("./use-cascader.cjs");
+const require_Cascader_module = require("./Cascader.module.cjs");
+let react = require("react");
+let _mantine_hooks = require("@mantine/hooks");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/core/src/components/Cascader/Cascader.tsx
+const defaultProps = {
+	expandTrigger: "click",
+	changeOnSelect: false,
+	allowDeselect: true,
+	withCheckIcon: true,
+	checkIconPosition: "right",
+	withColumns: true,
+	searchable: false,
+	separator: "/",
+	maxDisplayedLevels: 3,
+	previousLevelsControlLabel: "Show previous levels",
+	nextLevelsControlLabel: "Show next levels",
+	maxDropdownHeight: 260,
+	openOnFocus: true,
+	size: "sm"
+};
+function optionLabelToString(option) {
+	return typeof option.label === "string" || typeof option.label === "number" ? String(option.label) : option.value;
+}
+function firstEnabledOptionIndex(options) {
+	return options.findIndex((option) => !option.disabled);
+}
+function lastEnabledOptionIndex(options) {
+	for (let index = options.length - 1; index >= 0; index -= 1) if (!options[index].disabled) return index;
+	return -1;
+}
+function joinPathLabels(options, separator) {
+	return options.map(optionLabelToString).join(` ${separator} `);
+}
+function defaultCascaderFilter(query, options, separator) {
+	const trimmed = query.trim().toLowerCase();
+	if (trimmed.length === 0) return true;
+	return joinPathLabels(options, separator).toLowerCase().includes(trimmed);
+}
+function defaultRenderSearchOption(options, separator) {
+	return options.map((option, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [index > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		"data-cascader-separator": true,
+		children: [
+			" ",
+			separator,
+			" "
+		]
+	}), option.label ?? option.value] }, option.value));
+}
+const Cascader = require_factory.factory((_props) => {
+	const props = require_use_props.useProps([
+		"Input",
+		"InputWrapper",
+		"Cascader"
+	], defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, size, data, value, defaultValue, onChange, changeOnSelect, closeOnSelect, allowDeselect, withCheckIcon, checkIconPosition, withColumns, expandTrigger, searchable, searchValue, defaultSearchValue, onSearchChange, filter, renderSearchOption, formatValue, renderOption, separator, columnWidth, maxDisplayedLevels, previousLevelsControlLabel, nextLevelsControlLabel, maxDropdownHeight, nothingFoundMessage, clearable, clearSectionMode, clearButtonProps, onClear, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, comboboxProps, scrollAreaProps, chevronColor, hiddenInputProps, openOnFocus, variant, onKeyDown, onFocus, onBlur, onClick, readOnly, disabled, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, rightSectionProps, leftSection, leftSectionWidth, leftSectionPointerEvents, leftSectionProps, inputContainer, inputWrapperOrder, withAsterisk, labelProps, descriptionProps, errorProps, successProps, wrapperProps, description, label, error, success, withErrorStyles, withSuccessStyles, name, form, id, placeholder, required, mod, attributes, ...others } = props;
+	const _id = (0, _mantine_hooks.useId)(id);
+	const separatorString = typeof separator === "string" || typeof separator === "number" ? String(separator) : "/";
+	const combobox = require_use_combobox.useCombobox({
+		opened: dropdownOpened,
+		defaultOpened: defaultDropdownOpened,
+		onDropdownOpen: () => {
+			onDropdownOpen?.();
+			cascader.resetActivePath();
+		},
+		onDropdownClose: () => {
+			onDropdownClose?.();
+			if (searchable) setSearchValue(cascader.value ? displayString : "");
+		}
+	});
+	const shouldCloseOnSelect = closeOnSelect ?? !allowDeselect;
+	const cascader = require_use_cascader.useCascader({
+		data,
+		value,
+		defaultValue,
+		onChange,
+		changeOnSelect,
+		allowDeselect,
+		expandTrigger,
+		onLeafSelect: () => {
+			if (shouldCloseOnSelect) combobox.closeDropdown();
+		}
+	});
+	const getStyles = require_use_styles.useStyles({
+		name: "Cascader",
+		classes: require_Cascader_module.default,
+		props,
+		classNames,
+		styles,
+		unstyled,
+		attributes
+	});
+	const { resolvedClassNames, resolvedStyles } = require_use_resolved_styles_api.useResolvedStylesApi({
+		props,
+		styles,
+		classNames
+	});
+	const { styleProps, rest: { type, autoComplete, ...rest } } = require_extract_style_props.extractStyleProps(others);
+	const displayString = (0, react.useMemo)(() => {
+		if (cascader.pathOptions.length === 0 || !cascader.value) return "";
+		if (formatValue) {
+			const rendered = formatValue({
+				value: cascader.value,
+				options: cascader.pathOptions
+			});
+			if (typeof rendered === "string" || typeof rendered === "number") return String(rendered);
+		}
+		return joinPathLabels(cascader.pathOptions, separatorString);
+	}, [
+		cascader.pathOptions,
+		cascader.value,
+		formatValue,
+		separatorString
+	]);
+	const [_searchValue, setSearchValue] = (0, _mantine_hooks.useUncontrolled)({
+		value: searchValue,
+		defaultValue: defaultSearchValue,
+		finalValue: (0, react.useMemo)(() => {
+			if (!searchable || !defaultValue) return "";
+			return joinPathLabels(require_get_cascader_path_options.getCascaderPathOptions(data, defaultValue), separatorString);
+		}, []),
+		onChange: onSearchChange
+	});
+	const isSearching = !!searchable && _searchValue.trim().length > 0 && _searchValue !== displayString;
+	(0, react.useEffect)(() => {
+		if (searchable) setSearchValue(cascader.value ? displayString : "");
+	}, [cascader.value]);
+	const showFlatList = isSearching || !withColumns;
+	const flatPaths = (0, react.useMemo)(() => require_flatten_cascader_paths.flattenCascaderPaths(data), [data]);
+	const flatListItems = (0, react.useMemo)(() => {
+		if (!showFlatList) return [];
+		const base = flatPaths.filter((flatPath) => changeOnSelect ? true : flatPath.leaf);
+		if (!isSearching) return base;
+		return base.filter((flatPath) => filter ? filter(_searchValue, flatPath.options) : defaultCascaderFilter(_searchValue, flatPath.options, separatorString));
+	}, [
+		flatPaths,
+		showFlatList,
+		isSearching,
+		_searchValue,
+		changeOnSelect,
+		filter,
+		separatorString
+	]);
+	const canInteract = !readOnly && !disabled;
+	const handleSearchChange = (nextValue) => {
+		setSearchValue(nextValue);
+		if (canInteract) combobox.openDropdown();
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.key === "Escape") {
+			combobox.closeDropdown();
+			return;
+		}
+		if (showFlatList || !canInteract) return;
+		if (!combobox.dropdownOpened) {
+			if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "ArrowRight" || event.key === "Enter" || !searchable && event.key === " ") {
+				event.preventDefault();
+				cascader.setKeyboardNav(true);
+				combobox.openDropdown();
+				if (!cascader.value && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+					const rootIndex = event.key === "ArrowDown" ? firstEnabledOptionIndex(data) : lastEnabledOptionIndex(data);
+					if (rootIndex >= 0) cascader.setActivePath([data[rootIndex].value]);
+				}
+			}
+			return;
+		}
+		if (cascader.handleColumnsKeyDown(event)) event.preventDefault();
+		else if (!searchable && event.key === " ") event.preventDefault();
+	};
+	const clearButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.ClearButton, {
+		...clearButtonProps,
+		onClear: () => {
+			onClear?.();
+			cascader.setValue(null);
+			cascader.setActivePath([]);
+			setSearchValue("");
+			combobox.focusTarget();
+		}
+	});
+	const hasValue = Array.isArray(cascader.value) && cascader.value.length > 0;
+	const _clearable = clearable && hasValue && !disabled && !readOnly;
+	const listId = _id ? `${_id}-cascader-list` : void 0;
+	const valueKey = cascader.value ? JSON.stringify(cascader.value) : null;
+	const dropdown = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Dropdown, {
+		hidden: readOnly || disabled,
+		style: showFlatList ? void 0 : { padding: 0 },
+		children: showFlatList ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Combobox.Combobox.Options, {
+			"aria-label": typeof label === "string" ? label : void 0,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScrollArea.ScrollArea.Autosize, {
+				mah: maxDropdownHeight ?? 260,
+				type: "scroll",
+				scrollbarSize: "var(--combobox-padding)",
+				offsetScrollbars: "y",
+				...scrollAreaProps,
+				children: flatListItems.map((flatPath, index) => {
+					const pathKey = JSON.stringify(flatPath.path);
+					const active = valueKey !== null && pathKey === valueKey;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Option, {
+						value: `${index}`,
+						active,
+						disabled: flatPath.disabled,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							...getStyles("flatOption"),
+							children: [
+								active && withCheckIcon && checkIconPosition === "left" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CheckIcon.CheckIcon, { ...getStyles("columnOptionCheck") }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									...getStyles("columnOptionLabel"),
+									children: renderSearchOption ? renderSearchOption(_searchValue, flatPath.options) : defaultRenderSearchOption(flatPath.options, separator)
+								}),
+								active && withCheckIcon && checkIconPosition !== "left" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CheckIcon.CheckIcon, { ...getStyles("columnOptionCheck") })
+							]
+						})
+					}, pathKey);
+				})
+			}), flatListItems.length === 0 && nothingFoundMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Empty, { children: nothingFoundMessage })]
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CascaderColumns.CascaderColumns, {
+			data,
+			activePath: cascader.activePath,
+			value: cascader.value,
+			keyboardNav: cascader.keyboardNav,
+			withCheckIcon,
+			checkIconPosition,
+			renderOption,
+			columnWidth,
+			maxDisplayedLevels,
+			previousLevelsControlLabel,
+			nextLevelsControlLabel,
+			maxDropdownHeight,
+			nothingFoundMessage,
+			getStyles,
+			unstyled,
+			scrollAreaProps,
+			onOptionClick: cascader.handleOptionClick,
+			onOptionMouseEnter: cascader.handleOptionMouseEnter,
+			onColumnsMouseLeave: () => {
+				if (expandTrigger === "hover") cascader.setActivePath(cascader.value ?? []);
+			},
+			onPointerActivity: () => cascader.setKeyboardNav(false),
+			listId
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Combobox.Combobox, {
+		store: combobox,
+		__staticSelector: "Cascader",
+		classNames: resolvedClassNames,
+		styles: resolvedStyles,
+		unstyled,
+		readOnly,
+		size,
+		attributes,
+		width: showFlatList ? "target" : "max-content",
+		position: "bottom-start",
+		onOptionSubmit: (val) => {
+			const index = Number(val);
+			const flatPath = flatListItems[index];
+			if (!flatPath || flatPath.disabled) return;
+			cascader.selectPath(flatPath.path);
+			cascader.setActivePath(flatPath.path);
+			if (shouldCloseOnSelect) combobox.closeDropdown();
+		},
+		...comboboxProps,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Target, {
+			targetType: searchable ? "input" : "button",
+			withKeyboardNavigation: showFlatList,
+			autoComplete,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputBase.InputBase, {
+				id: _id,
+				__defaultRightSection: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Chevron, {
+					size,
+					error,
+					unstyled,
+					color: chevronColor
+				}),
+				__clearSection: clearButton,
+				__clearable: _clearable,
+				__clearSectionMode: clearSectionMode,
+				rightSection,
+				rightSectionPointerEvents: rightSectionPointerEvents || "none",
+				...rest,
+				...styleProps,
+				size,
+				__staticSelector: "Cascader",
+				disabled,
+				readOnly: readOnly || !searchable,
+				value: searchable ? _searchValue : displayString,
+				onChange: (event) => handleSearchChange(event.currentTarget.value),
+				onFocus: (event) => {
+					if (openOnFocus && searchable && canInteract) combobox.openDropdown();
+					onFocus?.(event);
+				},
+				onBlur: (event) => {
+					combobox.closeDropdown();
+					onBlur?.(event);
+				},
+				onClick: (event) => {
+					if (canInteract) {
+						cascader.setKeyboardNav(false);
+						if (searchable) combobox.openDropdown();
+						else combobox.toggleDropdown();
+					}
+					onClick?.(event);
+				},
+				onKeyDown: handleKeyDown,
+				classNames: resolvedClassNames,
+				styles: resolvedStyles,
+				unstyled,
+				pointer: !searchable,
+				error,
+				success,
+				attributes,
+				className,
+				style,
+				variant,
+				radius,
+				leftSection,
+				leftSectionWidth,
+				leftSectionPointerEvents,
+				leftSectionProps,
+				rightSectionWidth,
+				rightSectionProps,
+				inputContainer,
+				inputWrapperOrder,
+				withAsterisk,
+				labelProps,
+				descriptionProps,
+				errorProps,
+				successProps,
+				wrapperProps,
+				description,
+				label,
+				withErrorStyles,
+				withSuccessStyles,
+				placeholder,
+				required,
+				mod
+			})
+		}), dropdown]
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.HiddenInput, {
+		value: cascader.value,
+		name,
+		form,
+		disabled,
+		...hiddenInputProps
+	})] });
+});
+Cascader.classes = {
+	...require_InputBase.InputBase.classes,
+	...require_Combobox.Combobox.classes,
+	...require_Cascader_module.default
+};
+Cascader.displayName = "@mantine/core/Cascader";
+//#endregion
+exports.Cascader = Cascader;
+
+//# sourceMappingURL=Cascader.cjs.map