@mantine/core 9.0.0-alpha.6 → 9.0.0

package/cjs/components/Autocomplete/Autocomplete.cjs

@@ -74,6 +74,7 @@ const Autocomplete = require_factory.factory((_props) => {
 		...comboboxProps,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Target, {
 			autoComplete,
+			withExpandedAttribute: true,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputBase.InputBase, {
 				...others,
 				size,

package/cjs/components/Autocomplete/Autocomplete.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.cjs","names":["factory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","useResolvedStylesApi","Combobox","InputBase","OptionsDropdown"],"sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxGenericData,\n  ComboboxGenericItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n  InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type RenderAutocompleteOption = (\n  input: ComboboxLikeRenderOptionInput<ComboboxGenericItem>\n) => React.ReactNode;\n\nexport type AutocompleteStylesNames = __InputStylesNames | ComboboxLikeStylesNames;\n\nexport interface AutocompleteProps\n  extends\n    BoxProps,\n    Omit<__BaseInputProps, 'pointer'>,\n    Omit<ComboboxLikeProps, 'data'>,\n    StylesApiProps<AutocompleteFactory>,\n    ElementProps<'input', 'onChange' | 'size'> {\n  /** Data used to display options. Values must be unique. */\n  data?: ComboboxGenericData;\n\n  /** Controlled component value */\n  value?: string;\n\n  /** Default value for uncontrolled component */\n  defaultValue?: string;\n\n  /** Called when value changes */\n  onChange?: (value: string) => void;\n\n  /** Function to render custom option content */\n  renderOption?: RenderAutocompleteOption;\n\n  /** Props passed to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** If set, the clear button is displayed when the component has a value @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** If set, the highlighted option is selected when the input loses focus @default false */\n  autoSelectOnBlur?: boolean;\n\n  /** If set, the dropdown opens when the input receives focus @default true */\n  openOnFocus?: boolean;\n}\n\nexport type AutocompleteFactory = Factory<{\n  props: AutocompleteProps;\n  ref: HTMLInputElement;\n  stylesNames: AutocompleteStylesNames;\n  variant: InputVariant;\n}>;\n\nexport const Autocomplete = factory<AutocompleteFactory>((_props) => {\n  const props = useProps('Autocomplete', null, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownClose,\n    onDropdownOpen,\n    onFocus,\n    onBlur,\n    onClick,\n    onChange,\n    data,\n    value,\n    defaultValue,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    readOnly,\n    disabled,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    size,\n    id,\n    renderOption,\n    autoComplete,\n    scrollAreaProps,\n    onClear,\n    clearButtonProps,\n    error,\n    clearable,\n    clearSectionMode,\n    rightSection,\n    autoSelectOnBlur,\n    openOnFocus = true,\n    attributes,\n    ...others\n  } = props;\n\n  const _id = useId(id);\n  const parsedData = getParsedComboboxData(data);\n  const optionsLockup = getOptionsLockup(parsedData);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      // Required for autoSelectOnBlur to work correctly\n      setTimeout(combobox.resetSelectedOption, 0);\n    },\n  });\n\n  const handleValueChange = (value: string) => {\n    setValue(value);\n    combobox.resetSelectedOption();\n  };\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<AutocompleteFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, _value]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        handleValueChange('');\n        onClear?.();\n      }}\n    />\n  );\n\n  return (\n    <Combobox\n      store={combobox}\n      __staticSelector=\"Autocomplete\"\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      unstyled={unstyled}\n      readOnly={readOnly}\n      size={size}\n      attributes={attributes}\n      keepMounted={autoSelectOnBlur}\n      onOptionSubmit={(val) => {\n        onOptionSubmit?.(val);\n        handleValueChange(optionsLockup[val].label);\n        combobox.closeDropdown();\n      }}\n      {...comboboxProps}\n    >\n      <Combobox.Target autoComplete={autoComplete}>\n        <InputBase\n          {...others}\n          size={size}\n          __staticSelector=\"Autocomplete\"\n          __clearSection={clearButton}\n          __clearable={clearable && !!_value && !disabled && !readOnly}\n          __clearSectionMode={clearSectionMode}\n          rightSection={rightSection}\n          disabled={disabled}\n          readOnly={readOnly}\n          value={_value}\n          error={error}\n          onChange={(event) => {\n            handleValueChange(event.currentTarget.value);\n            combobox.openDropdown();\n            selectFirstOptionOnChange && combobox.selectFirstOption();\n          }}\n          onFocus={(event) => {\n            openOnFocus && combobox.openDropdown();\n            onFocus?.(event);\n          }}\n          onBlur={(event) => {\n            if (autoSelectOnBlur) {\n              combobox.clickSelectedOption();\n            }\n\n            combobox.closeDropdown();\n            onBlur?.(event);\n          }}\n          onClick={(event) => {\n            combobox.openDropdown();\n            onClick?.(event);\n          }}\n          classNames={resolvedClassNames}\n          styles={resolvedStyles}\n          unstyled={unstyled}\n          attributes={attributes}\n          id={_id}\n        />\n      </Combobox.Target>\n      <OptionsDropdown\n        data={parsedData}\n        hidden={readOnly || disabled}\n        filter={filter as OptionsFilter<Primitive> | undefined}\n        search={_value}\n        limit={limit}\n        hiddenWhenEmpty\n        withScrollArea={withScrollArea}\n        maxDropdownHeight={maxDropdownHeight}\n        unstyled={unstyled}\n        labelId={others.label ? `${_id}-label` : undefined}\n        aria-label={others.label ? undefined : others['aria-label']}\n        renderOption={renderOption}\n        scrollAreaProps={scrollAreaProps}\n      />\n    </Combobox>\n  );\n});\n\nAutocomplete.classes = { ...InputBase.classes, ...Combobox.classes };\nAutocomplete.displayName = '@mantine/core/Autocomplete';\n"],"mappings":";;;;;;;;;;;;;;;AA4FA,MAAa,eAAeA,gBAAAA,SAA8B,WAAW;CACnE,MAAM,QAAQC,kBAAAA,SAAS,gBAAgB,MAAM,OAAO;CACpD,MAAM,EACJ,YACA,QACA,UACA,MACA,gBACA,uBACA,iBACA,gBACA,SACA,QACA,SACA,UACA,MACA,OACA,cACA,2BACA,iCACA,gBACA,eACA,UACA,UACA,QACA,OACA,gBACA,mBACA,MACA,IACA,cACA,cACA,iBACA,SACA,kBACA,OACA,WACA,kBACA,cACA,kBACA,cAAc,MACd,YACA,GAAG,WACD;CAEJ,MAAM,OAAA,GAAA,eAAA,OAAY,GAAG;CACrB,MAAM,aAAaC,iCAAAA,sBAAsB,KAAK;CAC9C,MAAM,gBAAgBC,2BAAAA,iBAAiB,WAAW;CAElD,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,iBAA4B;EACzC;EACA;EACA,YAAY;EACZ;EACD,CAAC;CAEF,MAAM,WAAWC,qBAAAA,YAAY;EAC3B,QAAQ;EACR,eAAe;EACf,sBAAsB;AACpB,qBAAkB;AAClB,OAAI,gCACF,UAAS,mBAAmB;;EAGhC,uBAAuB;AACrB,sBAAmB;AAEnB,cAAW,SAAS,qBAAqB,EAAE;;EAE9C,CAAC;CAEF,MAAM,qBAAqB,UAAkB;AAC3C,WAAS,MAAM;AACf,WAAS,qBAAqB;;CAGhC,MAAM,EAAE,oBAAoB,mBAAmBC,gCAAAA,qBAA0C;EACvF;EACA;EACA;EACD,CAAC;AAEF,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,0BACF,UAAS,mBAAmB;IAE7B,CAAC,2BAA2B,OAAO,CAAC;CAEvC,MAAM,cACJ,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,SAAS,aAAV;EACE,GAAI;EACJ,eAAe;AACb,qBAAkB,GAAG;AACrB,cAAW;;EAEb,CAAA;AAGJ,QACE,iBAAA,GAAA,kBAAA,MAACA,iBAAAA,UAAD;EACE,OAAO;EACP,kBAAiB;EACjB,YAAY;EACZ,QAAQ;EACE;EACA;EACJ;EACM;EACZ,aAAa;EACb,iBAAiB,QAAQ;AACvB,oBAAiB,IAAI;AACrB,qBAAkB,cAAc,KAAK,MAAM;AAC3C,YAAS,eAAe;;EAE1B,GAAI;YAfN,CAiBE,iBAAA,GAAA,kBAAA,KAACA,iBAAAA,SAAS,QAAV;GAA+B;aAC7B,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;IACE,GAAI;IACE;IACN,kBAAiB;IACjB,gBAAgB;IAChB,aAAa,aAAa,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC;IACpD,oBAAoB;IACN;IACJ;IACA;IACV,OAAO;IACA;IACP,WAAW,UAAU;AACnB,uBAAkB,MAAM,cAAc,MAAM;AAC5C,cAAS,cAAc;AACvB,kCAA6B,SAAS,mBAAmB;;IAE3D,UAAU,UAAU;AAClB,oBAAe,SAAS,cAAc;AACtC,eAAU,MAAM;;IAElB,SAAS,UAAU;AACjB,SAAI,iBACF,UAAS,qBAAqB;AAGhC,cAAS,eAAe;AACxB,cAAS,MAAM;;IAEjB,UAAU,UAAU;AAClB,cAAS,cAAc;AACvB,eAAU,MAAM;;IAElB,YAAY;IACZ,QAAQ;IACE;IACE;IACZ,IAAI;IACJ,CAAA;GACc,CAAA,EAClB,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,iBAAD;GACE,MAAM;GACN,QAAQ,YAAY;GACZ;GACR,QAAQ;GACD;GACP,iBAAA;GACgB;GACG;GACT;GACV,SAAS,OAAO,QAAQ,GAAG,IAAI,UAAU,KAAA;GACzC,cAAY,OAAO,QAAQ,KAAA,IAAY,OAAO;GAChC;GACG;GACjB,CAAA,CACO;;EAEb;AAEF,aAAa,UAAU;CAAE,GAAGD,kBAAAA,UAAU;CAAS,GAAGD,iBAAAA,SAAS;CAAS;AACpE,aAAa,cAAc"}
+{"version":3,"file":"Autocomplete.cjs","names":["factory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","useResolvedStylesApi","Combobox","InputBase","OptionsDropdown"],"sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxGenericData,\n  ComboboxGenericItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n  InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type RenderAutocompleteOption = (\n  input: ComboboxLikeRenderOptionInput<ComboboxGenericItem>\n) => React.ReactNode;\n\nexport type AutocompleteStylesNames = __InputStylesNames | ComboboxLikeStylesNames;\n\nexport interface AutocompleteProps\n  extends\n    BoxProps,\n    Omit<__BaseInputProps, 'pointer'>,\n    Omit<ComboboxLikeProps, 'data'>,\n    StylesApiProps<AutocompleteFactory>,\n    ElementProps<'input', 'onChange' | 'size'> {\n  /** Data used to display options. Values must be unique. */\n  data?: ComboboxGenericData;\n\n  /** Controlled component value */\n  value?: string;\n\n  /** Default value for uncontrolled component */\n  defaultValue?: string;\n\n  /** Called when value changes */\n  onChange?: (value: string) => void;\n\n  /** Function to render custom option content */\n  renderOption?: RenderAutocompleteOption;\n\n  /** Props passed to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** If set, the clear button is displayed when the component has a value @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** If set, the highlighted option is selected when the input loses focus @default false */\n  autoSelectOnBlur?: boolean;\n\n  /** If set, the dropdown opens when the input receives focus @default true */\n  openOnFocus?: boolean;\n}\n\nexport type AutocompleteFactory = Factory<{\n  props: AutocompleteProps;\n  ref: HTMLInputElement;\n  stylesNames: AutocompleteStylesNames;\n  variant: InputVariant;\n}>;\n\nexport const Autocomplete = factory<AutocompleteFactory>((_props) => {\n  const props = useProps('Autocomplete', null, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownClose,\n    onDropdownOpen,\n    onFocus,\n    onBlur,\n    onClick,\n    onChange,\n    data,\n    value,\n    defaultValue,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    readOnly,\n    disabled,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    size,\n    id,\n    renderOption,\n    autoComplete,\n    scrollAreaProps,\n    onClear,\n    clearButtonProps,\n    error,\n    clearable,\n    clearSectionMode,\n    rightSection,\n    autoSelectOnBlur,\n    openOnFocus = true,\n    attributes,\n    ...others\n  } = props;\n\n  const _id = useId(id);\n  const parsedData = getParsedComboboxData(data);\n  const optionsLockup = getOptionsLockup(parsedData);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      // Required for autoSelectOnBlur to work correctly\n      setTimeout(combobox.resetSelectedOption, 0);\n    },\n  });\n\n  const handleValueChange = (value: string) => {\n    setValue(value);\n    combobox.resetSelectedOption();\n  };\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<AutocompleteFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, _value]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        handleValueChange('');\n        onClear?.();\n      }}\n    />\n  );\n\n  return (\n    <Combobox\n      store={combobox}\n      __staticSelector=\"Autocomplete\"\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      unstyled={unstyled}\n      readOnly={readOnly}\n      size={size}\n      attributes={attributes}\n      keepMounted={autoSelectOnBlur}\n      onOptionSubmit={(val) => {\n        onOptionSubmit?.(val);\n        handleValueChange(optionsLockup[val].label);\n        combobox.closeDropdown();\n      }}\n      {...comboboxProps}\n    >\n      <Combobox.Target autoComplete={autoComplete} withExpandedAttribute>\n        <InputBase\n          {...others}\n          size={size}\n          __staticSelector=\"Autocomplete\"\n          __clearSection={clearButton}\n          __clearable={clearable && !!_value && !disabled && !readOnly}\n          __clearSectionMode={clearSectionMode}\n          rightSection={rightSection}\n          disabled={disabled}\n          readOnly={readOnly}\n          value={_value}\n          error={error}\n          onChange={(event) => {\n            handleValueChange(event.currentTarget.value);\n            combobox.openDropdown();\n            selectFirstOptionOnChange && combobox.selectFirstOption();\n          }}\n          onFocus={(event) => {\n            openOnFocus && combobox.openDropdown();\n            onFocus?.(event);\n          }}\n          onBlur={(event) => {\n            if (autoSelectOnBlur) {\n              combobox.clickSelectedOption();\n            }\n\n            combobox.closeDropdown();\n            onBlur?.(event);\n          }}\n          onClick={(event) => {\n            combobox.openDropdown();\n            onClick?.(event);\n          }}\n          classNames={resolvedClassNames}\n          styles={resolvedStyles}\n          unstyled={unstyled}\n          attributes={attributes}\n          id={_id}\n        />\n      </Combobox.Target>\n      <OptionsDropdown\n        data={parsedData}\n        hidden={readOnly || disabled}\n        filter={filter as OptionsFilter<Primitive> | undefined}\n        search={_value}\n        limit={limit}\n        hiddenWhenEmpty\n        withScrollArea={withScrollArea}\n        maxDropdownHeight={maxDropdownHeight}\n        unstyled={unstyled}\n        labelId={others.label ? `${_id}-label` : undefined}\n        aria-label={others.label ? undefined : others['aria-label']}\n        renderOption={renderOption}\n        scrollAreaProps={scrollAreaProps}\n      />\n    </Combobox>\n  );\n});\n\nAutocomplete.classes = { ...InputBase.classes, ...Combobox.classes };\nAutocomplete.displayName = '@mantine/core/Autocomplete';\n"],"mappings":"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"}

package/cjs/components/Badge/Badge.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.module.cjs","names":[],"sources":["../../../src/components/Badge/Badge.module.css"],"sourcesContent":[".root {\n  --badge-height-xs: 16px;\n  --badge-height-sm: 18px;\n  --badge-height-md: 20px;\n  --badge-height-lg: 26px;\n  --badge-height-xl: 32px;\n\n  --badge-fz-xs: 9px;\n  --badge-fz-sm: 10px;\n  --badge-fz-md: 11px;\n  --badge-fz-lg: 13px;\n  --badge-fz-xl: 16px;\n\n  --badge-padding-x-xs: 6px;\n  --badge-padding-x-sm: 8px;\n  --badge-padding-x-md: 10px;\n  --badge-padding-x-lg: 12px;\n  --badge-padding-x-xl: 16px;\n\n  --badge-height: var(--badge-height-md);\n  --badge-fz: var(--badge-fz-md);\n  --badge-padding-x: var(--badge-padding-x-md);\n  --badge-radius: 1000px;\n  --badge-lh: calc(var(--badge-height) - rem(2px));\n  --badge-color: var(--mantine-color-white);\n  --badge-bg: var(--mantine-primary-color-filled);\n  --badge-border-width: 1px;\n  --badge-bd: var(--badge-border-width) solid transparent;\n\n  -webkit-tap-highlight-color: transparent;\n  font-size: var(--badge-fz);\n  border-radius: var(--badge-radius);\n  height: var(--badge-height);\n  line-height: var(--badge-lh);\n  text-decoration: none;\n  padding: 0 var(--badge-padding-x);\n  display: inline-grid;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  text-transform: uppercase;\n  font-weight: var(--mantine-font-weight-bold);\n  letter-spacing: 0.25px;\n  cursor: default;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: var(--badge-color);\n  background: var(--badge-bg);\n  border: var(--badge-bd);\n\n  &:where([data-with-left-section], [data-variant='dot']) {\n    grid-template-columns: auto 1fr;\n  }\n\n  &:where([data-with-right-section]) {\n    grid-template-columns: 1fr auto;\n  }\n\n  &:where(\n    [data-with-left-section][data-with-right-section],\n    [data-variant='dot'][data-with-right-section]\n  ) {\n    grid-template-columns: auto 1fr auto;\n  }\n\n  &:where([data-block]) {\n    display: flex;\n    width: 100%;\n  }\n\n  &:where([data-circle]) {\n    padding-inline: 2px;\n    display: flex;\n    width: var(--badge-height);\n  }\n}\n\n.root--dot {\n  --badge-dot-size: calc(var(--badge-height) / 3.4);\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n    color: var(--mantine-color-black);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-5);\n    border-color: var(--mantine-color-dark-5);\n    color: var(--mantine-color-white);\n  }\n\n  &::before {\n    content: '';\n    display: block;\n    width: var(--badge-dot-size);\n    height: var(--badge-dot-size);\n    border-radius: var(--badge-dot-size);\n    background-color: var(--badge-dot-color);\n    margin-inline-end: var(--badge-dot-size);\n  }\n}\n\n.label {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-align: center;\n  cursor: inherit;\n}\n\n.section {\n  --badge-section-margin: calc(var(--mantine-spacing-xs) / 2);\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  max-height: calc(var(--badge-height) - var(--badge-border-width) * 2);\n\n  &:where([data-position='left']) {\n    margin-inline-end: var(--badge-section-margin);\n  }\n\n  &:where([data-position='right']) {\n    margin-inline-start: var(--badge-section-margin);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Badge.module.cjs","names":[],"sources":["../../../src/components/Badge/Badge.module.css"],"sourcesContent":[".root {\n  --badge-height-xs: 16px;\n  --badge-height-sm: 18px;\n  --badge-height-md: 20px;\n  --badge-height-lg: 26px;\n  --badge-height-xl: 32px;\n\n  --badge-fz-xs: 9px;\n  --badge-fz-sm: 10px;\n  --badge-fz-md: 11px;\n  --badge-fz-lg: 13px;\n  --badge-fz-xl: 16px;\n\n  --badge-padding-x-xs: 6px;\n  --badge-padding-x-sm: 8px;\n  --badge-padding-x-md: 10px;\n  --badge-padding-x-lg: 12px;\n  --badge-padding-x-xl: 16px;\n\n  --badge-height: var(--badge-height-md);\n  --badge-fz: var(--badge-fz-md);\n  --badge-padding-x: var(--badge-padding-x-md);\n  --badge-radius: 1000px;\n  --badge-lh: calc(var(--badge-height) - rem(2px));\n  --badge-color: var(--mantine-color-white);\n  --badge-bg: var(--mantine-primary-color-filled);\n  --badge-border-width: 1px;\n  --badge-bd: var(--badge-border-width) solid transparent;\n\n  -webkit-tap-highlight-color: transparent;\n  font-size: var(--badge-fz);\n  border-radius: var(--badge-radius);\n  height: var(--badge-height);\n  line-height: var(--badge-lh);\n  text-decoration: none;\n  padding: 0 var(--badge-padding-x);\n  display: inline-grid;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  text-transform: uppercase;\n  font-weight: var(--mantine-font-weight-bold);\n  letter-spacing: 0.25px;\n  cursor: default;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: var(--badge-color);\n  background: var(--badge-bg);\n  border: var(--badge-bd);\n\n  &:where([data-with-left-section], [data-variant='dot']) {\n    grid-template-columns: auto 1fr;\n  }\n\n  &:where([data-with-right-section]) {\n    grid-template-columns: 1fr auto;\n  }\n\n  &:where(\n    [data-with-left-section][data-with-right-section],\n    [data-variant='dot'][data-with-right-section]\n  ) {\n    grid-template-columns: auto 1fr auto;\n  }\n\n  &:where([data-block]) {\n    display: flex;\n    width: 100%;\n  }\n\n  &:where([data-circle]) {\n    padding-inline: 2px;\n    display: flex;\n    width: var(--badge-height);\n  }\n}\n\n.root--dot {\n  --badge-dot-size: calc(var(--badge-height) / 3.4);\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n    color: var(--mantine-color-black);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-5);\n    border-color: var(--mantine-color-dark-5);\n    color: var(--mantine-color-white);\n  }\n\n  &::before {\n    content: '';\n    display: block;\n    width: var(--badge-dot-size);\n    height: var(--badge-dot-size);\n    border-radius: var(--badge-dot-size);\n    background-color: var(--badge-dot-color);\n    margin-inline-end: var(--badge-dot-size);\n  }\n}\n\n.label {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-align: center;\n  cursor: inherit;\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n}\n\n.section {\n  --badge-section-margin: calc(var(--mantine-spacing-xs) / 2);\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  max-height: calc(var(--badge-height) - var(--badge-border-width) * 2);\n\n  &:where([data-position='left']) {\n    margin-inline-end: var(--badge-section-margin);\n  }\n\n  &:where([data-position='right']) {\n    margin-inline-start: var(--badge-section-margin);\n  }\n}\n"],"mappings":""}

package/cjs/components/Button/Button.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.module.cjs","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".root {\n  --button-height-xs: 30px;\n  --button-height-sm: 36px;\n  --button-height-md: 42px;\n  --button-height-lg: 50px;\n  --button-height-xl: 60px;\n\n  --button-height-compact-xs: 22px;\n  --button-height-compact-sm: 26px;\n  --button-height-compact-md: 30px;\n  --button-height-compact-lg: 34px;\n  --button-height-compact-xl: 40px;\n\n  --button-padding-x-xs: 14px;\n  --button-padding-x-sm: 18px;\n  --button-padding-x-md: 22px;\n  --button-padding-x-lg: 26px;\n  --button-padding-x-xl: 32px;\n\n  --button-padding-x-compact-xs: 7px;\n  --button-padding-x-compact-sm: 8px;\n  --button-padding-x-compact-md: 10px;\n  --button-padding-x-compact-lg: 12px;\n  --button-padding-x-compact-xl: 14px;\n\n  --button-height: var(--button-height-sm);\n  --button-padding-x: var(--button-padding-x-sm);\n  --button-color: var(--mantine-color-white);\n\n  user-select: none;\n  font-weight: var(--mantine-font-weight-medium);\n  position: relative;\n  line-height: 1;\n  text-align: center;\n  overflow: hidden;\n\n  width: auto;\n  cursor: pointer;\n  display: inline-block;\n  border-radius: var(--button-radius, var(--mantine-radius-default));\n  font-size: var(--button-fz, var(--mantine-font-size-sm));\n  background: var(--button-bg, var(--mantine-primary-color-filled));\n  border: var(--button-bd, rem(1px) solid transparent);\n  color: var(--button-color, var(--mantine-color-white));\n  height: var(--button-height, var(--button-height-sm));\n  padding-inline: var(--button-padding-x, var(--button-padding-x-sm));\n  vertical-align: middle;\n\n  &:where([data-block]) {\n    display: block;\n    width: 100%;\n  }\n\n  &:where([data-with-left-section]) {\n    padding-inline-start: calc(var(--button-padding-x) / 1.5);\n  }\n\n  &:where([data-with-right-section]) {\n    padding-inline-end: calc(var(--button-padding-x) / 1.5);\n  }\n\n  &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {\n    cursor: not-allowed;\n    border: 1px solid transparent;\n    transform: none;\n    color: var(--mantine-color-disabled-color);\n    background: var(--mantine-color-disabled);\n  }\n\n  &::before {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    inset: -1px;\n    border-radius: var(--button-radius, var(--mantine-radius-default));\n    transform: translateY(-100%);\n    opacity: 0;\n    filter: blur(12px);\n    transition:\n      transform 150ms ease,\n      opacity 100ms ease;\n\n    @mixin where-light {\n      background-color: rgba(255, 255, 255, 0.15);\n    }\n\n    @mixin where-dark {\n      background-color: rgba(0, 0, 0, 0.15);\n    }\n  }\n\n  &:where([data-loading]) {\n    cursor: not-allowed;\n    transform: none;\n\n    &::before {\n      transform: translateY(0);\n      opacity: 1;\n    }\n\n    & .inner {\n      opacity: 0;\n      transform: translateY(100%);\n    }\n  }\n\n  @mixin hover {\n    &:where(:not([data-loading], :disabled, [data-disabled])) {\n      background-color: var(--button-hover, var(--mantine-primary-color-filled-hover));\n      color: var(--button-hover-color, var(--button-color));\n    }\n  }\n}\n\n.inner {\n  display: flex;\n  align-items: center;\n  justify-content: var(--button-justify, center);\n  height: 100%;\n  overflow: visible;\n  transition:\n    transform 150ms ease,\n    opacity 100ms ease;\n}\n\n.label {\n  white-space: nowrap;\n  height: 100%;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  opacity: 1;\n\n  &:where([data-loading]) {\n    opacity: 0.2;\n  }\n}\n\n.section {\n  display: flex;\n  align-items: center;\n\n  &:where([data-position='left']) {\n    margin-inline-end: var(--mantine-spacing-xs);\n  }\n\n  &:where([data-position='right']) {\n    margin-inline-start: var(--mantine-spacing-xs);\n  }\n}\n\n.loader {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n}\n\n.group {\n  --button-border-width: 1px;\n  display: flex;\n\n  & :where(.root) {\n    &:focus {\n      position: relative;\n      z-index: 1;\n    }\n  }\n\n  &[data-orientation='horizontal'] {\n    flex-direction: row;\n\n    & .root,\n    & .groupSection {\n      &:not(:only-child):first-child {\n        border-end-end-radius: 0;\n        border-start-end-radius: 0;\n        border-inline-end-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):last-child {\n        border-end-start-radius: 0;\n        border-start-start-radius: 0;\n        border-inline-start-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):not(:first-child):not(:last-child) {\n        border-radius: 0;\n        border-inline-width: calc(var(--button-border-width) / 2);\n      }\n    }\n  }\n\n  &[data-orientation='vertical'] {\n    flex-direction: column;\n\n    & .root,\n    & .groupSection {\n      &:not(:only-child):first-child {\n        border-end-start-radius: 0;\n        border-end-end-radius: 0;\n        border-bottom-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):last-child {\n        border-start-start-radius: 0;\n        border-start-end-radius: 0;\n        border-top-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):not(:first-child):not(:last-child) {\n        border-radius: 0;\n        border-bottom-width: calc(var(--button-border-width) / 2);\n        border-top-width: calc(var(--button-border-width) / 2);\n      }\n    }\n  }\n}\n\n.groupSection {\n  --section-height-xs: 30px;\n  --section-height-sm: 36px;\n  --section-height-md: 42px;\n  --section-height-lg: 50px;\n  --section-height-xl: 60px;\n\n  --section-height-compact-xs: 22px;\n  --section-height-compact-sm: 26px;\n  --section-height-compact-md: 30px;\n  --section-height-compact-lg: 34px;\n  --section-height-compact-xl: 40px;\n\n  --section-padding-x-xs: 14px;\n  --section-padding-x-sm: 18px;\n  --section-padding-x-md: 22px;\n  --section-padding-x-lg: 26px;\n  --section-padding-x-xl: 32px;\n\n  --section-padding-x-compact-xs: 7px;\n  --section-padding-x-compact-sm: 8px;\n  --section-padding-x-compact-md: 10px;\n  --section-padding-x-compact-lg: 12px;\n  --section-padding-x-compact-xl: 14px;\n\n  --section-height: var(--section-height-sm);\n  --section-padding-x: var(--section-padding-x-sm);\n  --section-color: var(--mantine-color-white);\n\n  font-weight: var(--mantine-font-weight-medium);\n  width: auto;\n  border-radius: var(--section-radius, var(--mantine-radius-default));\n  font-size: var(--section-fz, var(--mantine-font-size-sm));\n  background: var(--section-bg, var(--mantine-primary-color-filled));\n  border: var(--section-bd, rem(1px) solid transparent);\n  color: var(--section-color, var(--mantine-color-white));\n  height: var(--section-height, var(--section-height-sm));\n  padding-inline: var(--section-padding-x, var(--section-padding-x-sm));\n  vertical-align: middle;\n  line-height: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n"],"mappings":""}
+{"version":3,"file":"Button.module.cjs","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".root {\n  --button-height-xs: 30px;\n  --button-height-sm: 36px;\n  --button-height-md: 42px;\n  --button-height-lg: 50px;\n  --button-height-xl: 60px;\n\n  --button-height-compact-xs: 22px;\n  --button-height-compact-sm: 26px;\n  --button-height-compact-md: 30px;\n  --button-height-compact-lg: 34px;\n  --button-height-compact-xl: 40px;\n\n  --button-padding-x-xs: 14px;\n  --button-padding-x-sm: 18px;\n  --button-padding-x-md: 22px;\n  --button-padding-x-lg: 26px;\n  --button-padding-x-xl: 32px;\n\n  --button-padding-x-compact-xs: 7px;\n  --button-padding-x-compact-sm: 8px;\n  --button-padding-x-compact-md: 10px;\n  --button-padding-x-compact-lg: 12px;\n  --button-padding-x-compact-xl: 14px;\n\n  --button-height: var(--button-height-sm);\n  --button-padding-x: var(--button-padding-x-sm);\n  --button-color: var(--mantine-color-white);\n\n  user-select: none;\n  font-weight: var(--mantine-font-weight-medium);\n  position: relative;\n  line-height: 1;\n  text-align: center;\n  overflow: hidden;\n\n  width: auto;\n  cursor: pointer;\n  display: inline-block;\n  border-radius: var(--button-radius, var(--mantine-radius-default));\n  font-size: var(--button-fz, var(--mantine-font-size-sm));\n  background: var(--button-bg, var(--mantine-primary-color-filled));\n  border: var(--button-bd, rem(1px) solid transparent);\n  color: var(--button-color, var(--mantine-color-white));\n  height: var(--button-height, var(--button-height-sm));\n  padding-inline: var(--button-padding-x, var(--button-padding-x-sm));\n  vertical-align: middle;\n\n  &:where([data-block]) {\n    display: block;\n    width: 100%;\n  }\n\n  &:where([data-with-left-section]) {\n    padding-inline-start: calc(var(--button-padding-x) / 1.5);\n  }\n\n  &:where([data-with-right-section]) {\n    padding-inline-end: calc(var(--button-padding-x) / 1.5);\n  }\n\n  &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {\n    cursor: not-allowed;\n    border: 1px solid transparent;\n    transform: none;\n    color: var(--mantine-color-disabled-color);\n    background: var(--mantine-color-disabled);\n  }\n\n  &::before {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    inset: -1px;\n    border-radius: var(--button-radius, var(--mantine-radius-default));\n    transform: translateY(-100%);\n    opacity: 0;\n    filter: blur(12px);\n    transition:\n      transform 150ms ease,\n      opacity 100ms ease;\n\n    @mixin where-light {\n      background-color: rgba(255, 255, 255, 0.15);\n    }\n\n    @mixin where-dark {\n      background-color: rgba(0, 0, 0, 0.15);\n    }\n  }\n\n  &:where([data-loading]) {\n    cursor: not-allowed;\n    transform: none;\n\n    &::before {\n      transform: translateY(0);\n      opacity: 1;\n    }\n\n    & .inner {\n      opacity: 0;\n      transform: translateY(100%);\n    }\n  }\n\n  @mixin hover {\n    &:where(:not([data-loading], :disabled, [data-disabled])) {\n      background-color: var(--button-hover, var(--mantine-primary-color-filled-hover));\n      color: var(--button-hover-color, var(--button-color));\n    }\n  }\n}\n\n.inner {\n  display: flex;\n  align-items: center;\n  justify-content: var(--button-justify, center);\n  height: 100%;\n  overflow: visible;\n  transition:\n    transform 150ms ease,\n    opacity 100ms ease;\n}\n\n.label {\n  white-space: nowrap;\n  height: 100%;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  opacity: 1;\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n\n  &:where([data-loading]) {\n    opacity: 0.2;\n  }\n}\n\n.section {\n  display: flex;\n  align-items: center;\n\n  &:where([data-position='left']) {\n    margin-inline-end: var(--mantine-spacing-xs);\n  }\n\n  &:where([data-position='right']) {\n    margin-inline-start: var(--mantine-spacing-xs);\n  }\n}\n\n.loader {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n}\n\n.group {\n  --button-border-width: 1px;\n  display: flex;\n\n  & :where(.root) {\n    &:focus {\n      position: relative;\n      z-index: 1;\n    }\n  }\n\n  &[data-orientation='horizontal'] {\n    flex-direction: row;\n\n    & .root,\n    & .groupSection {\n      &:not(:only-child):first-child {\n        border-end-end-radius: 0;\n        border-start-end-radius: 0;\n        border-inline-end-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):last-child {\n        border-end-start-radius: 0;\n        border-start-start-radius: 0;\n        border-inline-start-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):not(:first-child):not(:last-child) {\n        border-radius: 0;\n        border-inline-width: calc(var(--button-border-width) / 2);\n      }\n    }\n  }\n\n  &[data-orientation='vertical'] {\n    flex-direction: column;\n\n    & .root,\n    & .groupSection {\n      &:not(:only-child):first-child {\n        border-end-start-radius: 0;\n        border-end-end-radius: 0;\n        border-bottom-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):last-child {\n        border-start-start-radius: 0;\n        border-start-end-radius: 0;\n        border-top-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):not(:first-child):not(:last-child) {\n        border-radius: 0;\n        border-bottom-width: calc(var(--button-border-width) / 2);\n        border-top-width: calc(var(--button-border-width) / 2);\n      }\n    }\n  }\n}\n\n.groupSection {\n  --section-height-xs: 30px;\n  --section-height-sm: 36px;\n  --section-height-md: 42px;\n  --section-height-lg: 50px;\n  --section-height-xl: 60px;\n\n  --section-height-compact-xs: 22px;\n  --section-height-compact-sm: 26px;\n  --section-height-compact-md: 30px;\n  --section-height-compact-lg: 34px;\n  --section-height-compact-xl: 40px;\n\n  --section-padding-x-xs: 14px;\n  --section-padding-x-sm: 18px;\n  --section-padding-x-md: 22px;\n  --section-padding-x-lg: 26px;\n  --section-padding-x-xl: 32px;\n\n  --section-padding-x-compact-xs: 7px;\n  --section-padding-x-compact-sm: 8px;\n  --section-padding-x-compact-md: 10px;\n  --section-padding-x-compact-lg: 12px;\n  --section-padding-x-compact-xl: 14px;\n\n  --section-height: var(--section-height-sm);\n  --section-padding-x: var(--section-padding-x-sm);\n  --section-color: var(--mantine-color-white);\n\n  font-weight: var(--mantine-font-weight-medium);\n  width: auto;\n  border-radius: var(--section-radius, var(--mantine-radius-default));\n  font-size: var(--section-fz, var(--mantine-font-size-sm));\n  background: var(--section-bg, var(--mantine-primary-color-filled));\n  border: var(--section-bd, rem(1px) solid transparent);\n  color: var(--section-color, var(--mantine-color-white));\n  height: var(--section-height, var(--section-height-sm));\n  padding-inline: var(--section-padding-x, var(--section-padding-x-sm));\n  vertical-align: middle;\n  line-height: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n"],"mappings":""}

package/cjs/components/Checkbox/Checkbox.cjs

@@ -25,7 +25,8 @@ const defaultProps = {
 	labelPosition: "right",
 	icon: require_CheckIcon.CheckboxIcon,
 	withErrorStyles: true,
-	variant: "filled"
+	variant: "filled",
+	radius: "sm"
 };
 const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { radius, color, size, iconColor, variant, autoContrast }) => {
 	const parsedColor = require_parse_theme_color.parseThemeColor({

package/cjs/components/Checkbox/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","names":["CheckboxIcon","createVarsResolver","parseThemeColor","getSize","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","CheckboxGroupContext","useStyles","extractStyleProps","InlineInput","Box","classes","InlineInputClasses","CheckboxGroup","CheckboxIndicator","CheckboxCard"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { use, useEffect, useRef } from 'react';\nimport { useId, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport { CheckboxCard } from './CheckboxCard/CheckboxCard';\nimport { CheckboxGroup, CheckboxGroupContext } from './CheckboxGroup/CheckboxGroup';\nimport { CheckboxIndicator } from './CheckboxIndicator/CheckboxIndicator';\nimport { CheckboxIcon } from './CheckIcon';\nimport classes from './Checkbox.module.css';\n\nexport type CheckboxVariant = 'filled' | 'outline';\nexport type CheckboxStylesNames = 'icon' | 'inner' | 'input' | InlineInputStylesNames;\nexport type CheckboxCssVariables = {\n  root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport type CheckboxIconComponent = React.FC<{\n  indeterminate: boolean | undefined;\n  className: string;\n}>;\n\nexport interface CheckboxProps\n  extends BoxProps, StylesApiProps<CheckboxFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Unique input id */\n  id?: string;\n\n  /** `label` associated with the checkbox */\n  label?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description below the label */\n  description?: React.ReactNode;\n\n  /** Error message below the label */\n  error?: React.ReactNode;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is dismissed. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Root element ref */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`. */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** If set, applies error styles to the checkbox when `error` prop is set @default true */\n  withErrorStyles?: boolean;\n}\n\nexport type CheckboxFactory = Factory<{\n  props: CheckboxProps;\n  ref: HTMLInputElement;\n  stylesNames: CheckboxStylesNames;\n  vars: CheckboxCssVariables;\n  variant: CheckboxVariant;\n  staticComponents: {\n    Group: typeof CheckboxGroup;\n    Indicator: typeof CheckboxIndicator;\n    Card: typeof CheckboxCard;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  icon: CheckboxIcon,\n  withErrorStyles: true,\n  variant: 'filled',\n} satisfies Partial<CheckboxProps>;\n\nconst varsResolver = createVarsResolver<CheckboxFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      root: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const Checkbox = factory<CheckboxFactory>((_props) => {\n  const props = useProps('Checkbox', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    label,\n    id,\n    size,\n    radius,\n    wrapperProps,\n    checked,\n    labelPosition,\n    description,\n    error,\n    disabled,\n    variant,\n    indeterminate,\n    icon: Icon,\n    rootRef,\n    iconColor,\n    onChange,\n    autoContrast,\n    mod,\n    attributes,\n    readOnly,\n    onClick,\n    withErrorStyles,\n    ref,\n    ...others\n  } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const ctx = use(CheckboxGroupContext);\n  const _size = size || ctx?.size;\n\n  const getStyles = useStyles<CheckboxFactory>({\n    name: 'Checkbox',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n\n  const withContextProps = {\n    checked: ctx?.value.includes(rest.value as string) ?? checked,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n  };\n\n  const isDisabledByGroup = ctx?.isDisabled?.(rest.value as string) ?? false;\n  const finalDisabled = disabled || isDisabledByGroup;\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate || false;\n\n      if (indeterminate) {\n        inputRef.current.setAttribute('data-indeterminate', 'true');\n      } else {\n        inputRef.current.removeAttribute('data-indeterminate');\n      }\n    }\n  }, [indeterminate]);\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Checkbox\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={_size}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={finalDisabled}\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={withContextProps.checked || checked || undefined}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      inert={rest.inert}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Box {...getStyles('inner')} mod={{ 'data-label-position': labelPosition }}>\n        <Box\n          component=\"input\"\n          id={uuid}\n          ref={useMergedRef(inputRef, ref)}\n          mod={{ error: !!error }}\n          {...getStyles('input', { focusable: true, variant })}\n          {...rest}\n          {...withContextProps}\n          disabled={finalDisabled}\n          inert={rest.inert}\n          type=\"checkbox\"\n          onClick={(event) => {\n            if (readOnly) {\n              event.preventDefault();\n            }\n\n            onClick?.(event);\n          }}\n        />\n\n        <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n      </Box>\n    </InlineInput>\n  );\n});\n\nCheckbox.classes = { ...classes, ...InlineInputClasses };\nCheckbox.varsResolver = varsResolver;\nCheckbox.displayName = '@mantine/core/Checkbox';\nCheckbox.Group = CheckboxGroup;\nCheckbox.Indicator = CheckboxIndicator;\nCheckbox.Card = CheckboxCard;\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.cjs","names":["CheckboxIcon","createVarsResolver","parseThemeColor","getSize","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","CheckboxGroupContext","useStyles","extractStyleProps","InlineInput","Box","classes","InlineInputClasses","CheckboxGroup","CheckboxIndicator","CheckboxCard"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { use, useEffect, useRef } from 'react';\nimport { useId, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport { CheckboxCard } from './CheckboxCard/CheckboxCard';\nimport { CheckboxGroup, CheckboxGroupContext } from './CheckboxGroup/CheckboxGroup';\nimport { CheckboxIndicator } from './CheckboxIndicator/CheckboxIndicator';\nimport { CheckboxIcon } from './CheckIcon';\nimport classes from './Checkbox.module.css';\n\nexport type CheckboxVariant = 'filled' | 'outline';\nexport type CheckboxStylesNames = 'icon' | 'inner' | 'input' | InlineInputStylesNames;\nexport type CheckboxCssVariables = {\n  root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport type CheckboxIconComponent = React.FC<{\n  indeterminate: boolean | undefined;\n  className: string;\n}>;\n\nexport interface CheckboxProps\n  extends BoxProps, StylesApiProps<CheckboxFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Unique input id */\n  id?: string;\n\n  /** `label` associated with the checkbox */\n  label?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description below the label */\n  description?: React.ReactNode;\n\n  /** Error message below the label */\n  error?: React.ReactNode;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is dismissed. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Root element ref */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`. */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** If set, applies error styles to the checkbox when `error` prop is set @default true */\n  withErrorStyles?: boolean;\n}\n\nexport type CheckboxFactory = Factory<{\n  props: CheckboxProps;\n  ref: HTMLInputElement;\n  stylesNames: CheckboxStylesNames;\n  vars: CheckboxCssVariables;\n  variant: CheckboxVariant;\n  staticComponents: {\n    Group: typeof CheckboxGroup;\n    Indicator: typeof CheckboxIndicator;\n    Card: typeof CheckboxCard;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  icon: CheckboxIcon,\n  withErrorStyles: true,\n  variant: 'filled',\n  radius: 'sm',\n} satisfies Partial<CheckboxProps>;\n\nconst varsResolver = createVarsResolver<CheckboxFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      root: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const Checkbox = factory<CheckboxFactory>((_props) => {\n  const props = useProps('Checkbox', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    label,\n    id,\n    size,\n    radius,\n    wrapperProps,\n    checked,\n    labelPosition,\n    description,\n    error,\n    disabled,\n    variant,\n    indeterminate,\n    icon: Icon,\n    rootRef,\n    iconColor,\n    onChange,\n    autoContrast,\n    mod,\n    attributes,\n    readOnly,\n    onClick,\n    withErrorStyles,\n    ref,\n    ...others\n  } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const ctx = use(CheckboxGroupContext);\n  const _size = size || ctx?.size;\n\n  const getStyles = useStyles<CheckboxFactory>({\n    name: 'Checkbox',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n\n  const withContextProps = {\n    checked: ctx?.value.includes(rest.value as string) ?? checked,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n  };\n\n  const isDisabledByGroup = ctx?.isDisabled?.(rest.value as string) ?? false;\n  const finalDisabled = disabled || isDisabledByGroup;\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate || false;\n\n      if (indeterminate) {\n        inputRef.current.setAttribute('data-indeterminate', 'true');\n      } else {\n        inputRef.current.removeAttribute('data-indeterminate');\n      }\n    }\n  }, [indeterminate]);\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Checkbox\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={_size}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={finalDisabled}\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={withContextProps.checked || checked || undefined}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      inert={rest.inert}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Box {...getStyles('inner')} mod={{ 'data-label-position': labelPosition }}>\n        <Box\n          component=\"input\"\n          id={uuid}\n          ref={useMergedRef(inputRef, ref)}\n          mod={{ error: !!error }}\n          {...getStyles('input', { focusable: true, variant })}\n          {...rest}\n          {...withContextProps}\n          disabled={finalDisabled}\n          inert={rest.inert}\n          type=\"checkbox\"\n          onClick={(event) => {\n            if (readOnly) {\n              event.preventDefault();\n            }\n\n            onClick?.(event);\n          }}\n        />\n\n        <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n      </Box>\n    </InlineInput>\n  );\n});\n\nCheckbox.classes = { ...classes, ...InlineInputClasses };\nCheckbox.varsResolver = varsResolver;\nCheckbox.displayName = '@mantine/core/Checkbox';\nCheckbox.Group = CheckboxGroup;\nCheckbox.Indicator = CheckboxIndicator;\nCheckbox.Card = CheckboxCard;\n"],"mappings":"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"}

package/cjs/components/Checkbox/CheckboxIndicator/CheckboxIndicator.cjs

@@ -18,7 +18,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.tsx
 const defaultProps = {
 	icon: require_CheckIcon.CheckboxIcon,
-	variant: "filled"
+	variant: "filled",
+	radius: "sm"
 };
 const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { radius, color, size, iconColor, variant, autoContrast }) => {
 	const parsedColor = require_parse_theme_color.parseThemeColor({

package/cjs/components/Checkbox/CheckboxIndicator/CheckboxIndicator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxIndicator.cjs","names":["CheckboxIcon","createVarsResolver","parseThemeColor","getSize","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","useStyles","CheckboxCardContext","Box","classes"],"sources":["../../../../src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport type { CheckboxIconComponent } from '../Checkbox';\nimport { CheckboxCardContext } from '../CheckboxCard/CheckboxCard';\nimport { CheckboxIcon } from '../CheckIcon';\nimport classes from './CheckboxIndicator.module.css';\n\nexport type CheckboxIndicatorStylesNames = 'indicator' | 'icon';\nexport type CheckboxIndicatorVariant = 'filled' | 'outline';\nexport type CheckboxIndicatorCssVariables = {\n  indicator: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport interface CheckboxIndicatorProps\n  extends BoxProps, StylesApiProps<CheckboxIndicatorFactory>, ElementProps<'div'> {\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is ignored. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Determines whether the component should have checked styles */\n  checked?: boolean;\n\n  /** Indicates disabled state */\n  disabled?: boolean;\n}\n\nexport type CheckboxIndicatorFactory = Factory<{\n  props: CheckboxIndicatorProps;\n  ref: HTMLDivElement;\n  stylesNames: CheckboxIndicatorStylesNames;\n  vars: CheckboxIndicatorCssVariables;\n  variant: CheckboxIndicatorVariant;\n}>;\n\nconst defaultProps = {\n  icon: CheckboxIcon,\n  variant: 'filled',\n} satisfies Partial<CheckboxIndicatorProps>;\n\nconst varsResolver = createVarsResolver<CheckboxIndicatorFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      indicator: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const CheckboxIndicator = factory<CheckboxIndicatorFactory>((_props) => {\n  const props = useProps('CheckboxIndicator', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    icon: Icon,\n    indeterminate,\n    radius,\n    color,\n    iconColor,\n    autoContrast,\n    checked,\n    mod,\n    variant,\n    disabled,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CheckboxIndicatorFactory>({\n    name: 'CheckboxIndicator',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'indicator',\n  });\n\n  const ctx = use(CheckboxCardContext);\n  const _checked =\n    typeof checked === 'boolean' || typeof indeterminate === 'boolean'\n      ? checked || indeterminate\n      : ctx?.checked || false;\n\n  return (\n    <Box\n      {...getStyles('indicator', { variant })}\n      variant={variant}\n      mod={[{ checked: _checked, disabled }, mod]}\n      {...others}\n    >\n      <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n    </Box>\n  );\n});\n\nCheckboxIndicator.displayName = '@mantine/core/CheckboxIndicator';\nCheckboxIndicator.classes = classes;\nCheckboxIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAsEA,MAAM,eAAe;CACnB,MAAMA,kBAAAA;CACN,SAAS;CACV;AAED,MAAM,eAAeC,6BAAAA,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAcC,0BAAAA,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;EAAO,CAAC;CAClF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;AAElB,QAAO,EACL,WAAW;EACT,mBAAmBC,iBAAAA,QAAQ,MAAM,gBAAgB;EACjD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,OAAO;EACzE,oBAAoB,YAAY,YAAY,eAAeC,wBAAAA,cAAc,OAAO,MAAM;EACtF,yBAAyB,YACrBA,wBAAAA,cAAc,WAAW,MAAM,GAC/BC,gCAAAA,qBAAqB,cAAc,MAAM,GACvCC,2BAAAA,iBAAiB;GAAE;GAAO;GAAO;GAAc,CAAC,GAChD,KAAA;EACP,EACF;EAEJ;AAED,MAAa,oBAAoBC,gBAAAA,SAAmC,WAAW;CAC7E,MAAM,QAAQC,kBAAAA,SAAS,qBAAqB,cAAc,OAAO;CACjE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,eACA,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAoC;EACpD,MAAM;EACN,SAAA,iCAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACf,CAAC;CAEF,MAAM,OAAA,GAAA,MAAA,KAAUC,qBAAAA,oBAAoB;CACpC,MAAM,WACJ,OAAO,YAAY,aAAa,OAAO,kBAAkB,YACrD,WAAW,gBACX,KAAK,WAAW;AAEtB,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,SAAS,CAAC;EAC9B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;GAAU,EAAE,IAAI;EAC3C,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,MAAD;GAAqB;GAAe,GAAI,UAAU,OAAO;GAAI,CAAA;EACzD,CAAA;EAER;AAEF,kBAAkB,cAAc;AAChC,kBAAkB,UAAUC,iCAAAA;AAC5B,kBAAkB,eAAe"}
+{"version":3,"file":"CheckboxIndicator.cjs","names":["CheckboxIcon","createVarsResolver","parseThemeColor","getSize","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","useStyles","CheckboxCardContext","Box","classes"],"sources":["../../../../src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport type { CheckboxIconComponent } from '../Checkbox';\nimport { CheckboxCardContext } from '../CheckboxCard/CheckboxCard';\nimport { CheckboxIcon } from '../CheckIcon';\nimport classes from './CheckboxIndicator.module.css';\n\nexport type CheckboxIndicatorStylesNames = 'indicator' | 'icon';\nexport type CheckboxIndicatorVariant = 'filled' | 'outline';\nexport type CheckboxIndicatorCssVariables = {\n  indicator: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport interface CheckboxIndicatorProps\n  extends BoxProps, StylesApiProps<CheckboxIndicatorFactory>, ElementProps<'div'> {\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is ignored. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Determines whether the component should have checked styles */\n  checked?: boolean;\n\n  /** Indicates disabled state */\n  disabled?: boolean;\n}\n\nexport type CheckboxIndicatorFactory = Factory<{\n  props: CheckboxIndicatorProps;\n  ref: HTMLDivElement;\n  stylesNames: CheckboxIndicatorStylesNames;\n  vars: CheckboxIndicatorCssVariables;\n  variant: CheckboxIndicatorVariant;\n}>;\n\nconst defaultProps = {\n  icon: CheckboxIcon,\n  variant: 'filled',\n  radius: 'sm',\n} satisfies Partial<CheckboxIndicatorProps>;\n\nconst varsResolver = createVarsResolver<CheckboxIndicatorFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      indicator: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const CheckboxIndicator = factory<CheckboxIndicatorFactory>((_props) => {\n  const props = useProps('CheckboxIndicator', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    icon: Icon,\n    indeterminate,\n    radius,\n    color,\n    iconColor,\n    autoContrast,\n    checked,\n    mod,\n    variant,\n    disabled,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CheckboxIndicatorFactory>({\n    name: 'CheckboxIndicator',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'indicator',\n  });\n\n  const ctx = use(CheckboxCardContext);\n  const _checked =\n    typeof checked === 'boolean' || typeof indeterminate === 'boolean'\n      ? checked || indeterminate\n      : ctx?.checked || false;\n\n  return (\n    <Box\n      {...getStyles('indicator', { variant })}\n      variant={variant}\n      mod={[{ checked: _checked, disabled }, mod]}\n      {...others}\n    >\n      <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n    </Box>\n  );\n});\n\nCheckboxIndicator.displayName = '@mantine/core/CheckboxIndicator';\nCheckboxIndicator.classes = classes;\nCheckboxIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAsEA,MAAM,eAAe;CACnB,MAAMA,kBAAAA;CACN,SAAS;CACT,QAAQ;CACT;AAED,MAAM,eAAeC,6BAAAA,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAcC,0BAAAA,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;EAAO,CAAC;CAClF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;AAElB,QAAO,EACL,WAAW;EACT,mBAAmBC,iBAAAA,QAAQ,MAAM,gBAAgB;EACjD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,OAAO;EACzE,oBAAoB,YAAY,YAAY,eAAeC,wBAAAA,cAAc,OAAO,MAAM;EACtF,yBAAyB,YACrBA,wBAAAA,cAAc,WAAW,MAAM,GAC/BC,gCAAAA,qBAAqB,cAAc,MAAM,GACvCC,2BAAAA,iBAAiB;GAAE;GAAO;GAAO;GAAc,CAAC,GAChD,KAAA;EACP,EACF;EAEJ;AAED,MAAa,oBAAoBC,gBAAAA,SAAmC,WAAW;CAC7E,MAAM,QAAQC,kBAAAA,SAAS,qBAAqB,cAAc,OAAO;CACjE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,eACA,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAoC;EACpD,MAAM;EACN,SAAA,iCAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACf,CAAC;CAEF,MAAM,OAAA,GAAA,MAAA,KAAUC,qBAAAA,oBAAoB;CACpC,MAAM,WACJ,OAAO,YAAY,aAAa,OAAO,kBAAkB,YACrD,WAAW,gBACX,KAAK,WAAW;AAEtB,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,SAAS,CAAC;EAC9B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;GAAU,EAAE,IAAI;EAC3C,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,MAAD;GAAqB;GAAe,GAAI,UAAU,OAAO;GAAI,CAAA;EACzD,CAAA;EAER;AAEF,kBAAkB,cAAc;AAChC,kBAAkB,UAAUC,iCAAAA;AAC5B,kBAAkB,eAAe"}

package/cjs/components/Chip/Chip.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.module.cjs","names":[],"sources":["../../../src/components/Chip/Chip.module.css"],"sourcesContent":[".root {\n  --chip-size-xs: 23px;\n  --chip-size-sm: 28px;\n  --chip-size-md: 32px;\n  --chip-size-lg: 36px;\n  --chip-size-xl: 40px;\n\n  --chip-icon-size-xs: 9px;\n  --chip-icon-size-sm: 12px;\n  --chip-icon-size-md: 14px;\n  --chip-icon-size-lg: 16px;\n  --chip-icon-size-xl: 18px;\n\n  --chip-padding-xs: 16px;\n  --chip-padding-sm: 20px;\n  --chip-padding-md: 24px;\n  --chip-padding-lg: 28px;\n  --chip-padding-xl: 32px;\n\n  --chip-checked-padding-xs: 8.2px;\n  --chip-checked-padding-sm: 10px;\n  --chip-checked-padding-md: 11.7px;\n  --chip-checked-padding-lg: 13.5px;\n  --chip-checked-padding-xl: 15.7px;\n\n  --chip-spacing-xs: 10px;\n  --chip-spacing-sm: 12px;\n  --chip-spacing-md: 16px;\n  --chip-spacing-lg: 20px;\n  --chip-spacing-xl: 22px;\n\n  --chip-size: var(--chip-size-sm);\n  --chip-icon-size: var(--chip-icon-size-sm);\n  --chip-padding: var(--chip-padding-sm);\n  --chip-spacing: var(--chip-spacing-sm);\n  --chip-checked-padding: var(--chip-checked-padding-sm);\n  --chip-bg: var(--mantine-primary-color-filled);\n  --chip-hover: var(--mantine-primary-color-filled-hover);\n  --chip-color: var(--mantine-color-white);\n  --chip-bd: 1px solid transparent;\n}\n\n.label {\n  display: inline-flex;\n  align-items: center;\n  user-select: none;\n  border-radius: var(--chip-radius, 1000rem);\n  height: var(--chip-size);\n  font-size: var(--chip-fz, var(--mantine-font-size-sm));\n  line-height: calc(var(--chip-size) - rem(2px));\n  padding-inline: var(--chip-padding);\n  cursor: pointer;\n  white-space: nowrap;\n  -webkit-tap-highlight-color: transparent;\n  border: 1px solid transparent;\n  color: var(--mantine-color-text);\n\n  &:where([data-checked]) {\n    padding-inline: var(--chip-checked-padding);\n  }\n\n  &:where([data-disabled]) {\n    cursor: not-allowed;\n    background-color: var(--mantine-color-disabled);\n    color: var(--mantine-color-disabled-color);\n  }\n}\n\n.label--outline:not([data-disabled]) {\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border: 1px solid var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border: 1px solid var(--mantine-color-dark-4);\n  }\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-5);\n    }\n  }\n\n  &:where([data-checked]) {\n    --chip-icon-color: var(--chip-color);\n    border: var(--chip-bd);\n\n    @mixin hover {\n      background-color: var(--chip-hover);\n    }\n  }\n}\n\n.label--filled:not([data-disabled]),\n.label--light:not([data-disabled]) {\n  border: 1px solid transparent;\n  color: var(--mantine-color-text);\n\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-1);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-5);\n  }\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-2);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-4);\n    }\n  }\n\n  &:where([data-checked]) {\n    --chip-icon-color: var(--chip-color);\n    color: var(--chip-color);\n    background-color: var(--chip-bg);\n\n    @mixin hover {\n      background-color: var(--chip-hover);\n    }\n  }\n}\n\n.iconWrapper {\n  width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));\n  max-width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));\n  height: var(--chip-icon-size);\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n}\n\n.checkIcon {\n  width: var(--chip-icon-size);\n  height: var(--chip-icon-size);\n  display: block;\n  color: var(--chip-icon-color, inherit);\n}\n\n.input {\n  width: 0;\n  height: 0;\n  padding: 0;\n  opacity: 0;\n  margin: 0;\n\n  &:focus-visible + .label {\n    outline: 2px solid var(--mantine-primary-color-filled);\n    outline-offset: 2px;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Chip.module.cjs","names":[],"sources":["../../../src/components/Chip/Chip.module.css"],"sourcesContent":[".root {\n  --chip-size-xs: 23px;\n  --chip-size-sm: 28px;\n  --chip-size-md: 32px;\n  --chip-size-lg: 36px;\n  --chip-size-xl: 40px;\n\n  --chip-icon-size-xs: 9px;\n  --chip-icon-size-sm: 12px;\n  --chip-icon-size-md: 14px;\n  --chip-icon-size-lg: 16px;\n  --chip-icon-size-xl: 18px;\n\n  --chip-padding-xs: 16px;\n  --chip-padding-sm: 20px;\n  --chip-padding-md: 24px;\n  --chip-padding-lg: 28px;\n  --chip-padding-xl: 32px;\n\n  --chip-checked-padding-xs: 8.2px;\n  --chip-checked-padding-sm: 10px;\n  --chip-checked-padding-md: 11.7px;\n  --chip-checked-padding-lg: 13.5px;\n  --chip-checked-padding-xl: 15.7px;\n\n  --chip-spacing-xs: 10px;\n  --chip-spacing-sm: 12px;\n  --chip-spacing-md: 16px;\n  --chip-spacing-lg: 20px;\n  --chip-spacing-xl: 22px;\n\n  --chip-size: var(--chip-size-sm);\n  --chip-icon-size: var(--chip-icon-size-sm);\n  --chip-padding: var(--chip-padding-sm);\n  --chip-spacing: var(--chip-spacing-sm);\n  --chip-checked-padding: var(--chip-checked-padding-sm);\n  --chip-bg: var(--mantine-primary-color-filled);\n  --chip-hover: var(--mantine-primary-color-filled-hover);\n  --chip-color: var(--mantine-color-white);\n  --chip-bd: 1px solid transparent;\n}\n\n.label {\n  display: inline-flex;\n  align-items: center;\n  user-select: none;\n  border-radius: var(--chip-radius, 1000rem);\n  height: var(--chip-size);\n  font-size: var(--chip-fz, var(--mantine-font-size-sm));\n  line-height: calc(var(--chip-size) - rem(2px));\n  padding-inline: var(--chip-padding);\n  cursor: pointer;\n  white-space: nowrap;\n  -webkit-tap-highlight-color: transparent;\n  border: 1px solid transparent;\n  color: var(--mantine-color-text);\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n\n  &:where([data-checked]) {\n    padding-inline: var(--chip-checked-padding);\n  }\n\n  &:where([data-disabled]) {\n    cursor: not-allowed;\n    background-color: var(--mantine-color-disabled);\n    color: var(--mantine-color-disabled-color);\n  }\n}\n\n.label--outline:not([data-disabled]) {\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border: 1px solid var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border: 1px solid var(--mantine-color-dark-4);\n  }\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-5);\n    }\n  }\n\n  &:where([data-checked]) {\n    --chip-icon-color: var(--chip-color);\n    border: var(--chip-bd);\n\n    @mixin hover {\n      background-color: var(--chip-hover);\n    }\n  }\n}\n\n.label--filled:not([data-disabled]),\n.label--light:not([data-disabled]) {\n  border: 1px solid transparent;\n  color: var(--mantine-color-text);\n\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-1);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-5);\n  }\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-2);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-4);\n    }\n  }\n\n  &:where([data-checked]) {\n    --chip-icon-color: var(--chip-color);\n    color: var(--chip-color);\n    background-color: var(--chip-bg);\n\n    @mixin hover {\n      background-color: var(--chip-hover);\n    }\n  }\n}\n\n.iconWrapper {\n  width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));\n  max-width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));\n  height: var(--chip-icon-size);\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n}\n\n.checkIcon {\n  width: var(--chip-icon-size);\n  height: var(--chip-icon-size);\n  display: block;\n  color: var(--chip-icon-color, inherit);\n}\n\n.input {\n  width: 0;\n  height: 0;\n  padding: 0;\n  opacity: 0;\n  margin: 0;\n\n  &:focus-visible + .label {\n    outline: 2px solid var(--mantine-primary-color-filled);\n    outline-offset: 2px;\n  }\n}\n"],"mappings":""}

package/cjs/components/Combobox/use-combobox-target-props/use-combobox-target-props.cjs

@@ -49,6 +49,7 @@ function useComboboxTargetProps({ onKeyDown, withKeyboardNavigation, withAriaAtt
 	};
 	return {
 		...withAriaAttributes ? {
+			...withExpandedAttribute ? { role: "combobox" } : {},
 			"aria-haspopup": "listbox",
 			"aria-expanded": withExpandedAttribute ? !!(ctx.store.listId && ctx.store.dropdownOpened) : void 0,
 			"aria-controls": ctx.store.dropdownOpened && ctx.store.listId ? ctx.store.listId : void 0,

package/cjs/components/Combobox/use-combobox-target-props/use-combobox-target-props.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-combobox-target-props.cjs","names":["useComboboxContext"],"sources":["../../../../src/components/Combobox/use-combobox-target-props/use-combobox-target-props.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useComboboxContext } from '../Combobox.context';\n\ninterface UseComboboxTargetPropsInput {\n  targetType: 'input' | 'button' | undefined;\n  withAriaAttributes: boolean | undefined;\n  withKeyboardNavigation: boolean | undefined;\n  withExpandedAttribute: boolean | undefined;\n  onKeyDown: React.KeyboardEventHandler<HTMLInputElement> | undefined;\n  autoComplete: string | undefined;\n}\n\nexport function useComboboxTargetProps({\n  onKeyDown,\n  withKeyboardNavigation,\n  withAriaAttributes,\n  withExpandedAttribute,\n  targetType,\n  autoComplete,\n}: UseComboboxTargetPropsInput) {\n  const ctx = useComboboxContext();\n  const [selectedOptionId, setSelectedOptionId] = useState<string | null>(null);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (ctx.readOnly) {\n      return;\n    }\n\n    if (withKeyboardNavigation) {\n      // Ignore during composition in IME\n      if (event.nativeEvent.isComposing) {\n        return;\n      }\n\n      if (event.nativeEvent.code === 'ArrowDown') {\n        event.preventDefault();\n\n        if (!ctx.store.dropdownOpened) {\n          ctx.store.openDropdown('keyboard');\n          setSelectedOptionId(ctx.store.selectActiveOption());\n          ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n        } else {\n          setSelectedOptionId(ctx.store.selectNextOption());\n        }\n      }\n\n      if (event.nativeEvent.code === 'ArrowUp') {\n        event.preventDefault();\n\n        if (!ctx.store.dropdownOpened) {\n          ctx.store.openDropdown('keyboard');\n          setSelectedOptionId(ctx.store.selectActiveOption());\n          ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n        } else {\n          setSelectedOptionId(ctx.store.selectPreviousOption());\n        }\n      }\n\n      if (event.nativeEvent.code === 'Enter' || event.nativeEvent.code === 'NumpadEnter') {\n        // This is a workaround for handling differences in behavior of isComposing property in Safari\n        // See: https://dninomiya.github.io/form-guide/stop-enter-submit\n        // eslint-disable-next-line @typescript-eslint/no-deprecated\n        if (event.nativeEvent.keyCode === 229) {\n          return;\n        }\n\n        const selectedOptionIndex = ctx.store.getSelectedOptionIndex();\n\n        if (ctx.store.dropdownOpened && selectedOptionIndex !== -1) {\n          event.preventDefault();\n          ctx.store.clickSelectedOption();\n        } else if (targetType === 'button') {\n          event.preventDefault();\n          ctx.store.openDropdown('keyboard');\n        }\n      }\n\n      if (event.key === 'Escape') {\n        ctx.store.closeDropdown('keyboard');\n      }\n\n      if (event.nativeEvent.code === 'Space') {\n        if (targetType === 'button') {\n          event.preventDefault();\n          ctx.store.toggleDropdown('keyboard');\n        }\n      }\n    }\n  };\n\n  const ariaAttributes = withAriaAttributes\n    ? {\n        'aria-haspopup': 'listbox' as const,\n        'aria-expanded': withExpandedAttribute\n          ? !!(ctx.store.listId && ctx.store.dropdownOpened)\n          : undefined,\n        'aria-controls':\n          ctx.store.dropdownOpened && ctx.store.listId ? ctx.store.listId : undefined,\n        'aria-activedescendant': ctx.store.dropdownOpened\n          ? selectedOptionId || undefined\n          : undefined,\n        autoComplete,\n        'data-expanded': ctx.store.dropdownOpened || undefined,\n        'data-mantine-stop-propagation': ctx.store.dropdownOpened || undefined,\n      }\n    : {};\n\n  return {\n    ...ariaAttributes,\n    onKeyDown: handleKeyDown,\n  };\n}\n"],"mappings":";;;;;AAYA,SAAgB,uBAAuB,EACrC,WACA,wBACA,oBACA,uBACA,YACA,gBAC8B;CAC9B,MAAM,MAAMA,yBAAAA,oBAAoB;CAChC,MAAM,CAAC,kBAAkB,wBAAA,GAAA,MAAA,UAA+C,KAAK;CAE7E,MAAM,iBAAiB,UAAiD;AACtE,cAAY,MAAM;AAElB,MAAI,IAAI,SACN;AAGF,MAAI,wBAAwB;AAE1B,OAAI,MAAM,YAAY,YACpB;AAGF,OAAI,MAAM,YAAY,SAAS,aAAa;AAC1C,UAAM,gBAAgB;AAEtB,QAAI,CAAC,IAAI,MAAM,gBAAgB;AAC7B,SAAI,MAAM,aAAa,WAAW;AAClC,yBAAoB,IAAI,MAAM,oBAAoB,CAAC;AACnD,SAAI,MAAM,0BAA0B,YAAY,EAAE,gBAAgB,MAAM,CAAC;UAEzE,qBAAoB,IAAI,MAAM,kBAAkB,CAAC;;AAIrD,OAAI,MAAM,YAAY,SAAS,WAAW;AACxC,UAAM,gBAAgB;AAEtB,QAAI,CAAC,IAAI,MAAM,gBAAgB;AAC7B,SAAI,MAAM,aAAa,WAAW;AAClC,yBAAoB,IAAI,MAAM,oBAAoB,CAAC;AACnD,SAAI,MAAM,0BAA0B,YAAY,EAAE,gBAAgB,MAAM,CAAC;UAEzE,qBAAoB,IAAI,MAAM,sBAAsB,CAAC;;AAIzD,OAAI,MAAM,YAAY,SAAS,WAAW,MAAM,YAAY,SAAS,eAAe;AAIlF,QAAI,MAAM,YAAY,YAAY,IAChC;IAGF,MAAM,sBAAsB,IAAI,MAAM,wBAAwB;AAE9D,QAAI,IAAI,MAAM,kBAAkB,wBAAwB,IAAI;AAC1D,WAAM,gBAAgB;AACtB,SAAI,MAAM,qBAAqB;eACtB,eAAe,UAAU;AAClC,WAAM,gBAAgB;AACtB,SAAI,MAAM,aAAa,WAAW;;;AAItC,OAAI,MAAM,QAAQ,SAChB,KAAI,MAAM,cAAc,WAAW;AAGrC,OAAI,MAAM,YAAY,SAAS;QACzB,eAAe,UAAU;AAC3B,WAAM,gBAAgB;AACtB,SAAI,MAAM,eAAe,WAAW;;;;;AAuB5C,QAAO;EACL,GAlBqB,qBACnB;GACE,iBAAiB;GACjB,iBAAiB,wBACb,CAAC,EAAE,IAAI,MAAM,UAAU,IAAI,MAAM,kBACjC,KAAA;GACJ,iBACE,IAAI,MAAM,kBAAkB,IAAI,MAAM,SAAS,IAAI,MAAM,SAAS,KAAA;GACpE,yBAAyB,IAAI,MAAM,iBAC/B,oBAAoB,KAAA,IACpB,KAAA;GACJ;GACA,iBAAiB,IAAI,MAAM,kBAAkB,KAAA;GAC7C,iCAAiC,IAAI,MAAM,kBAAkB,KAAA;GAC9D,GACD,EAAE;EAIJ,WAAW;EACZ"}
+{"version":3,"file":"use-combobox-target-props.cjs","names":["useComboboxContext"],"sources":["../../../../src/components/Combobox/use-combobox-target-props/use-combobox-target-props.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useComboboxContext } from '../Combobox.context';\n\ninterface UseComboboxTargetPropsInput {\n  targetType: 'input' | 'button' | undefined;\n  withAriaAttributes: boolean | undefined;\n  withKeyboardNavigation: boolean | undefined;\n  withExpandedAttribute: boolean | undefined;\n  onKeyDown: React.KeyboardEventHandler<HTMLInputElement> | undefined;\n  autoComplete: string | undefined;\n}\n\nexport function useComboboxTargetProps({\n  onKeyDown,\n  withKeyboardNavigation,\n  withAriaAttributes,\n  withExpandedAttribute,\n  targetType,\n  autoComplete,\n}: UseComboboxTargetPropsInput) {\n  const ctx = useComboboxContext();\n  const [selectedOptionId, setSelectedOptionId] = useState<string | null>(null);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (ctx.readOnly) {\n      return;\n    }\n\n    if (withKeyboardNavigation) {\n      // Ignore during composition in IME\n      if (event.nativeEvent.isComposing) {\n        return;\n      }\n\n      if (event.nativeEvent.code === 'ArrowDown') {\n        event.preventDefault();\n\n        if (!ctx.store.dropdownOpened) {\n          ctx.store.openDropdown('keyboard');\n          setSelectedOptionId(ctx.store.selectActiveOption());\n          ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n        } else {\n          setSelectedOptionId(ctx.store.selectNextOption());\n        }\n      }\n\n      if (event.nativeEvent.code === 'ArrowUp') {\n        event.preventDefault();\n\n        if (!ctx.store.dropdownOpened) {\n          ctx.store.openDropdown('keyboard');\n          setSelectedOptionId(ctx.store.selectActiveOption());\n          ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n        } else {\n          setSelectedOptionId(ctx.store.selectPreviousOption());\n        }\n      }\n\n      if (event.nativeEvent.code === 'Enter' || event.nativeEvent.code === 'NumpadEnter') {\n        // This is a workaround for handling differences in behavior of isComposing property in Safari\n        // See: https://dninomiya.github.io/form-guide/stop-enter-submit\n        // eslint-disable-next-line @typescript-eslint/no-deprecated\n        if (event.nativeEvent.keyCode === 229) {\n          return;\n        }\n\n        const selectedOptionIndex = ctx.store.getSelectedOptionIndex();\n\n        if (ctx.store.dropdownOpened && selectedOptionIndex !== -1) {\n          event.preventDefault();\n          ctx.store.clickSelectedOption();\n        } else if (targetType === 'button') {\n          event.preventDefault();\n          ctx.store.openDropdown('keyboard');\n        }\n      }\n\n      if (event.key === 'Escape') {\n        ctx.store.closeDropdown('keyboard');\n      }\n\n      if (event.nativeEvent.code === 'Space') {\n        if (targetType === 'button') {\n          event.preventDefault();\n          ctx.store.toggleDropdown('keyboard');\n        }\n      }\n    }\n  };\n\n  const ariaAttributes = withAriaAttributes\n    ? {\n        ...(withExpandedAttribute ? { role: 'combobox' as const } : {}),\n        'aria-haspopup': 'listbox' as const,\n        'aria-expanded': withExpandedAttribute\n          ? !!(ctx.store.listId && ctx.store.dropdownOpened)\n          : undefined,\n        'aria-controls':\n          ctx.store.dropdownOpened && ctx.store.listId ? ctx.store.listId : undefined,\n        'aria-activedescendant': ctx.store.dropdownOpened\n          ? selectedOptionId || undefined\n          : undefined,\n        autoComplete,\n        'data-expanded': ctx.store.dropdownOpened || undefined,\n        'data-mantine-stop-propagation': ctx.store.dropdownOpened || undefined,\n      }\n    : {};\n\n  return {\n    ...ariaAttributes,\n    onKeyDown: handleKeyDown,\n  };\n}\n"],"mappings":";;;;;AAYA,SAAgB,uBAAuB,EACrC,WACA,wBACA,oBACA,uBACA,YACA,gBAC8B;CAC9B,MAAM,MAAMA,yBAAAA,oBAAoB;CAChC,MAAM,CAAC,kBAAkB,wBAAA,GAAA,MAAA,UAA+C,KAAK;CAE7E,MAAM,iBAAiB,UAAiD;AACtE,cAAY,MAAM;AAElB,MAAI,IAAI,SACN;AAGF,MAAI,wBAAwB;AAE1B,OAAI,MAAM,YAAY,YACpB;AAGF,OAAI,MAAM,YAAY,SAAS,aAAa;AAC1C,UAAM,gBAAgB;AAEtB,QAAI,CAAC,IAAI,MAAM,gBAAgB;AAC7B,SAAI,MAAM,aAAa,WAAW;AAClC,yBAAoB,IAAI,MAAM,oBAAoB,CAAC;AACnD,SAAI,MAAM,0BAA0B,YAAY,EAAE,gBAAgB,MAAM,CAAC;UAEzE,qBAAoB,IAAI,MAAM,kBAAkB,CAAC;;AAIrD,OAAI,MAAM,YAAY,SAAS,WAAW;AACxC,UAAM,gBAAgB;AAEtB,QAAI,CAAC,IAAI,MAAM,gBAAgB;AAC7B,SAAI,MAAM,aAAa,WAAW;AAClC,yBAAoB,IAAI,MAAM,oBAAoB,CAAC;AACnD,SAAI,MAAM,0BAA0B,YAAY,EAAE,gBAAgB,MAAM,CAAC;UAEzE,qBAAoB,IAAI,MAAM,sBAAsB,CAAC;;AAIzD,OAAI,MAAM,YAAY,SAAS,WAAW,MAAM,YAAY,SAAS,eAAe;AAIlF,QAAI,MAAM,YAAY,YAAY,IAChC;IAGF,MAAM,sBAAsB,IAAI,MAAM,wBAAwB;AAE9D,QAAI,IAAI,MAAM,kBAAkB,wBAAwB,IAAI;AAC1D,WAAM,gBAAgB;AACtB,SAAI,MAAM,qBAAqB;eACtB,eAAe,UAAU;AAClC,WAAM,gBAAgB;AACtB,SAAI,MAAM,aAAa,WAAW;;;AAItC,OAAI,MAAM,QAAQ,SAChB,KAAI,MAAM,cAAc,WAAW;AAGrC,OAAI,MAAM,YAAY,SAAS;QACzB,eAAe,UAAU;AAC3B,WAAM,gBAAgB;AACtB,SAAI,MAAM,eAAe,WAAW;;;;;AAwB5C,QAAO;EACL,GAnBqB,qBACnB;GACE,GAAI,wBAAwB,EAAE,MAAM,YAAqB,GAAG,EAAE;GAC9D,iBAAiB;GACjB,iBAAiB,wBACb,CAAC,EAAE,IAAI,MAAM,UAAU,IAAI,MAAM,kBACjC,KAAA;GACJ,iBACE,IAAI,MAAM,kBAAkB,IAAI,MAAM,SAAS,IAAI,MAAM,SAAS,KAAA;GACpE,yBAAyB,IAAI,MAAM,iBAC/B,oBAAoB,KAAA,IACpB,KAAA;GACJ;GACA,iBAAiB,IAAI,MAAM,kBAAkB,KAAA;GAC7C,iCAAiC,IAAI,MAAM,kBAAkB,KAAA;GAC9D,GACD,EAAE;EAIJ,WAAW;EACZ"}

package/cjs/components/MultiSelect/MultiSelect.cjs

@@ -219,6 +219,7 @@ const MultiSelect = require_factory.genericFactory((_props) => {
 				...getStyles("pillsList", { style: pillsListStyle }),
 				children: [values, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.EventsTarget, {
 					autoComplete,
+					withExpandedAttribute: true,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PillsInput.PillsInput.Field, {
 						...rest,
 						id: _id,

package/cjs/components/MultiSelect/MultiSelect.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.cjs","names":["genericFactory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","extractStyleProps","useStyles","useResolvedStylesApi","Fragment","Pill","Combobox","filterPickedValues","PillsInput","OptionsDropdown","InputBase"],"sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  extractStyleProps,\n  Factory,\n  genericFactory,\n  MantineColor,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  ComboboxRenderPillInput,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Pill } from '../Pill';\nimport { PillsInput } from '../PillsInput';\nimport { ScrollAreaProps } from '../ScrollArea';\nimport { filterPickedValues } from './filter-picked-values';\n\nconst clearSectionOffset: Record<string, number> = {\n  xs: 41,\n  sm: 50,\n  md: 60,\n  lg: 72,\n  xl: 89,\n};\n\nexport type MultiSelectStylesNames =\n  | __InputStylesNames\n  | ComboboxLikeStylesNames\n  | 'pill'\n  | 'pillsList'\n  | 'inputField';\n\nexport interface MultiSelectProps<Value extends Primitive = string>\n  extends\n    BoxProps,\n    __BaseInputProps,\n    ComboboxLikeProps<Value>,\n    StylesApiProps<MultiSelectFactory>,\n    ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {\n  /** Controlled component value */\n  value?: Value[];\n\n  /** Uncontrolled component default value */\n  defaultValue?: Value[];\n\n  /** Called when value changes */\n  onChange?: (value: Value[]) => void;\n\n  /** Called with `value` of the removed item */\n  onRemove?: (value: Value) => void;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Called when user attemps to select more values than allowed */\n  onMaxValues?: () => void;\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  /** Maximum number of values, no limit if not set */\n  maxValues?: number;\n\n  /** Allows searching through options by user input @default false */\n  searchable?: boolean;\n\n  /** Message displayed when no options match the search query (when searchable is enabled) or when the data array is empty. If not set, the dropdown will be hidden instead. */\n  nothingFoundMessage?: React.ReactNode;\n\n  /** If set, the check icon is displayed near the selected option label @default true */\n  withCheckIcon?: boolean;\n\n  /** If set, unchecked labels are aligned with checked ones @default false */\n  withAlignedLabels?: boolean;\n\n  /** Position of the checkmark icon shown next to selected options in the dropdown @default 'left' */\n  checkIconPosition?: 'left' | 'right';\n\n  /** When enabled, selected options are hidden from the dropdown list @default false */\n  hidePickedOptions?: boolean;\n\n  /** When enabled, displays a clear button to remove all selected values (hidden when component is empty, disabled, or read-only) @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** Divider used to separate values in the hidden input `value` attribute @default ',' */\n  hiddenInputValuesDivider?: string;\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  /** A function to render content of the pill */\n  renderPill?: (props: ComboboxRenderPillInput<Value>) => React.ReactNode;\n\n  /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Controls color of the default chevron */\n  chevronColor?: MantineColor;\n\n  /** Clear search value when item is selected @default true */\n  clearSearchOnChange?: boolean;\n\n  /** Controls whether dropdown opens when the input receives focus @default true */\n  openOnFocus?: boolean;\n}\n\nexport type MultiSelectFactory = Factory<{\n  props: MultiSelectProps;\n  ref: HTMLInputElement;\n  stylesNames: MultiSelectStylesNames;\n  signature: <Value extends Primitive = string>(\n    props: MultiSelectProps<Value>\n  ) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  maxValues: Infinity,\n  withCheckIcon: true,\n  checkIconPosition: 'left',\n  hiddenInputValuesDivider: ',',\n  clearSearchOnChange: true,\n  openOnFocus: true,\n  size: 'sm',\n} satisfies Partial<MultiSelectProps>;\n\nexport const MultiSelect = genericFactory<MultiSelectFactory>((_props) => {\n  const props = useProps('MultiSelect', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    value,\n    defaultValue,\n    onChange,\n    onKeyDown,\n    variant,\n    data,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownOpen,\n    onDropdownClose,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    readOnly,\n    disabled,\n    onFocus,\n    onBlur,\n    radius,\n    rightSection,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    rightSectionProps,\n    leftSection,\n    leftSectionWidth,\n    leftSectionPointerEvents,\n    leftSectionProps,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    labelProps,\n    descriptionProps,\n    errorProps,\n    wrapperProps,\n    description,\n    label,\n    error,\n    maxValues,\n    searchable,\n    nothingFoundMessage,\n    withCheckIcon,\n    withAlignedLabels,\n    checkIconPosition,\n    hidePickedOptions,\n    withErrorStyles,\n    name,\n    form,\n    id,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    hiddenInputProps,\n    placeholder,\n    hiddenInputValuesDivider,\n    required,\n    mod,\n    renderOption,\n    renderPill,\n    onRemove,\n    onClear,\n    onMaxValues,\n    scrollAreaProps,\n    chevronColor,\n    attributes,\n    clearSearchOnChange,\n    openOnFocus,\n    ...others\n  } = props;\n\n  const _id = useId(id);\n  const parsedData = getParsedComboboxData(data);\n  const optionsLockup = getOptionsLockup(parsedData);\n  const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      combobox.resetSelectedOption();\n    },\n  });\n\n  const {\n    styleProps,\n    rest: { type, autoComplete, ...rest },\n  } = extractStyleProps(others);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: [],\n    onChange,\n  });\n\n  const [_searchValue, setSearchValue] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: '',\n    onChange: onSearchChange,\n  });\n\n  const handleSearchChange = (value: string) => {\n    setSearchValue(value);\n    combobox.resetSelectedOption();\n  };\n\n  const getStyles = useStyles<MultiSelectFactory>({\n    name: 'MultiSelect',\n    classes: {} as any,\n    props: props as any,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<MultiSelectFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (event.key === ' ' && !searchable) {\n      event.preventDefault();\n      combobox.toggleDropdown();\n    }\n\n    if (event.key === 'Backspace' && _searchValue.length === 0 && _value.length > 0) {\n      onRemove?.(_value[_value.length - 1]);\n      setValue(_value.slice(0, _value.length - 1));\n    }\n  };\n\n  const values = _value.map((item, index) => {\n    const optionData = optionsLockup[`${item}`] || retainedSelectedOptions.current[`${item}`];\n\n    if (renderPill) {\n      return (\n        <Fragment key={`${item}-${index}`}>\n          {renderPill({\n            option: optionData,\n            value: item,\n            onRemove: () => {\n              setValue(_value.filter((i) => item !== i));\n              onRemove?.(item);\n            },\n            disabled,\n          })}\n        </Fragment>\n      );\n    }\n\n    return (\n      <Pill\n        key={`${item}-${index}`}\n        withRemoveButton={!readOnly && !optionsLockup[`${item}`]?.disabled}\n        onRemove={() => {\n          setValue(_value.filter((i) => item !== i));\n          onRemove?.(item);\n        }}\n        unstyled={unstyled}\n        disabled={disabled}\n        {...getStyles('pill')}\n      >\n        {optionData?.label || item}\n      </Pill>\n    );\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, _searchValue]);\n\n  useEffect(() => {\n    _value.forEach((val) => {\n      if (`${val}` in optionsLockup) {\n        retainedSelectedOptions.current[`${val}`] = optionsLockup[`${val}`];\n      }\n    });\n  }, [optionsLockup, _value]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        onClear?.();\n        setValue([]);\n        handleSearchChange('');\n      }}\n    />\n  );\n\n  const filteredData = filterPickedValues({ data: parsedData, value: _value });\n  const _clearable = clearable && _value.length > 0 && !disabled && !readOnly;\n  const pillsListStyle = _clearable\n    ? { paddingInlineEnd: clearSectionOffset[size] ?? clearSectionOffset.sm }\n    : undefined;\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        size={size}\n        readOnly={readOnly}\n        __staticSelector=\"MultiSelect\"\n        attributes={attributes}\n        onOptionSubmit={(val) => {\n          onOptionSubmit?.(val as any);\n          if (clearSearchOnChange) {\n            handleSearchChange('');\n          }\n          combobox.updateSelectedOptionIndex('selected');\n\n          if (_value.includes(optionsLockup[`${val}`].value as any)) {\n            setValue(_value.filter((v) => v !== optionsLockup[`${val}`].value));\n            onRemove?.(optionsLockup[`${val}`].value as any);\n          } else if (_value.length < maxValues) {\n            setValue([..._value, optionsLockup[`${val}`].value] as any);\n          } else {\n            onMaxValues?.();\n          }\n        }}\n        {...comboboxProps}\n      >\n        <Combobox.DropdownTarget>\n          <PillsInput\n            {...styleProps}\n            __staticSelector=\"MultiSelect\"\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            unstyled={unstyled}\n            size={size}\n            className={className}\n            style={style}\n            variant={variant}\n            disabled={disabled}\n            radius={radius}\n            __defaultRightSection={\n              <Combobox.Chevron\n                size={size}\n                error={error}\n                unstyled={unstyled}\n                color={chevronColor}\n              />\n            }\n            __clearSection={clearButton}\n            __clearable={_clearable}\n            __clearSectionMode={clearSectionMode}\n            rightSection={rightSection}\n            rightSectionPointerEvents={rightSectionPointerEvents || 'none'}\n            rightSectionWidth={rightSectionWidth}\n            rightSectionProps={rightSectionProps}\n            leftSection={leftSection}\n            leftSectionWidth={leftSectionWidth}\n            leftSectionPointerEvents={leftSectionPointerEvents}\n            leftSectionProps={leftSectionProps}\n            inputContainer={inputContainer}\n            inputWrapperOrder={inputWrapperOrder}\n            withAsterisk={withAsterisk}\n            labelProps={labelProps}\n            descriptionProps={descriptionProps}\n            errorProps={errorProps}\n            wrapperProps={wrapperProps}\n            description={description}\n            label={label}\n            error={error}\n            withErrorStyles={withErrorStyles}\n            __stylesApiProps={{\n              ...props,\n              rightSectionPointerEvents: rightSectionPointerEvents || 'none',\n              multiline: true,\n            }}\n            pointer={!searchable}\n            onClick={() => (searchable ? combobox.openDropdown() : combobox.toggleDropdown())}\n            data-expanded={combobox.dropdownOpened || undefined}\n            id={_id}\n            required={required}\n            mod={mod}\n            attributes={attributes}\n          >\n            <Pill.Group\n              attributes={attributes}\n              disabled={disabled}\n              unstyled={unstyled}\n              {...getStyles('pillsList', { style: pillsListStyle })}\n            >\n              {values}\n              <Combobox.EventsTarget autoComplete={autoComplete}>\n                <PillsInput.Field\n                  {...rest}\n                  id={_id}\n                  placeholder={placeholder}\n                  type={!searchable && !placeholder ? 'hidden' : 'visible'}\n                  {...getStyles('inputField')}\n                  unstyled={unstyled}\n                  onFocus={(event) => {\n                    onFocus?.(event);\n                    openOnFocus && searchable && combobox.openDropdown();\n                  }}\n                  onBlur={(event) => {\n                    onBlur?.(event);\n                    combobox.closeDropdown();\n                    handleSearchChange('');\n                  }}\n                  onKeyDown={handleInputKeydown}\n                  value={_searchValue}\n                  onChange={(event) => {\n                    handleSearchChange(event.currentTarget.value);\n                    searchable && combobox.openDropdown();\n                    selectFirstOptionOnChange && combobox.selectFirstOption();\n                  }}\n                  disabled={disabled}\n                  readOnly={readOnly || !searchable}\n                  pointer={!searchable}\n                />\n              </Combobox.EventsTarget>\n            </Pill.Group>\n          </PillsInput>\n        </Combobox.DropdownTarget>\n\n        <OptionsDropdown\n          data={hidePickedOptions ? filteredData : parsedData}\n          hidden={readOnly || disabled}\n          filter={filter as OptionsFilter<Primitive> | undefined}\n          search={_searchValue}\n          limit={limit}\n          hiddenWhenEmpty={!nothingFoundMessage}\n          withScrollArea={withScrollArea}\n          maxDropdownHeight={maxDropdownHeight}\n          filterOptions={searchable}\n          value={_value}\n          checkIconPosition={checkIconPosition}\n          withCheckIcon={withCheckIcon}\n          withAlignedLabels={withAlignedLabels}\n          nothingFoundMessage={nothingFoundMessage}\n          unstyled={unstyled}\n          labelId={label ? `${_id}-label` : undefined}\n          aria-label={label ? undefined : others['aria-label']}\n          renderOption={renderOption}\n          scrollAreaProps={scrollAreaProps}\n        />\n      </Combobox>\n      <Combobox.HiddenInput\n        name={name}\n        valuesDivider={hiddenInputValuesDivider}\n        value={_value}\n        form={form}\n        disabled={disabled}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nMultiSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nMultiSelect.displayName = '@mantine/core/MultiSelect';\n"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.cjs","names":["genericFactory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","extractStyleProps","useStyles","useResolvedStylesApi","Fragment","Pill","Combobox","filterPickedValues","PillsInput","OptionsDropdown","InputBase"],"sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  extractStyleProps,\n  Factory,\n  genericFactory,\n  MantineColor,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  ComboboxRenderPillInput,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Pill } from '../Pill';\nimport { PillsInput } from '../PillsInput';\nimport { ScrollAreaProps } from '../ScrollArea';\nimport { filterPickedValues } from './filter-picked-values';\n\nconst clearSectionOffset: Record<string, number> = {\n  xs: 41,\n  sm: 50,\n  md: 60,\n  lg: 72,\n  xl: 89,\n};\n\nexport type MultiSelectStylesNames =\n  | __InputStylesNames\n  | ComboboxLikeStylesNames\n  | 'pill'\n  | 'pillsList'\n  | 'inputField';\n\nexport interface MultiSelectProps<Value extends Primitive = string>\n  extends\n    BoxProps,\n    __BaseInputProps,\n    ComboboxLikeProps<Value>,\n    StylesApiProps<MultiSelectFactory>,\n    ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {\n  /** Controlled component value */\n  value?: Value[];\n\n  /** Uncontrolled component default value */\n  defaultValue?: Value[];\n\n  /** Called when value changes */\n  onChange?: (value: Value[]) => void;\n\n  /** Called with `value` of the removed item */\n  onRemove?: (value: Value) => void;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Called when user attemps to select more values than allowed */\n  onMaxValues?: () => void;\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  /** Maximum number of values, no limit if not set */\n  maxValues?: number;\n\n  /** Allows searching through options by user input @default false */\n  searchable?: boolean;\n\n  /** Message displayed when no options match the search query (when searchable is enabled) or when the data array is empty. If not set, the dropdown will be hidden instead. */\n  nothingFoundMessage?: React.ReactNode;\n\n  /** If set, the check icon is displayed near the selected option label @default true */\n  withCheckIcon?: boolean;\n\n  /** If set, unchecked labels are aligned with checked ones @default false */\n  withAlignedLabels?: boolean;\n\n  /** Position of the checkmark icon shown next to selected options in the dropdown @default 'left' */\n  checkIconPosition?: 'left' | 'right';\n\n  /** When enabled, selected options are hidden from the dropdown list @default false */\n  hidePickedOptions?: boolean;\n\n  /** When enabled, displays a clear button to remove all selected values (hidden when component is empty, disabled, or read-only) @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** Divider used to separate values in the hidden input `value` attribute @default ',' */\n  hiddenInputValuesDivider?: string;\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  /** A function to render content of the pill */\n  renderPill?: (props: ComboboxRenderPillInput<Value>) => React.ReactNode;\n\n  /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Controls color of the default chevron */\n  chevronColor?: MantineColor;\n\n  /** Clear search value when item is selected @default true */\n  clearSearchOnChange?: boolean;\n\n  /** Controls whether dropdown opens when the input receives focus @default true */\n  openOnFocus?: boolean;\n}\n\nexport type MultiSelectFactory = Factory<{\n  props: MultiSelectProps;\n  ref: HTMLInputElement;\n  stylesNames: MultiSelectStylesNames;\n  signature: <Value extends Primitive = string>(\n    props: MultiSelectProps<Value>\n  ) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  maxValues: Infinity,\n  withCheckIcon: true,\n  checkIconPosition: 'left',\n  hiddenInputValuesDivider: ',',\n  clearSearchOnChange: true,\n  openOnFocus: true,\n  size: 'sm',\n} satisfies Partial<MultiSelectProps>;\n\nexport const MultiSelect = genericFactory<MultiSelectFactory>((_props) => {\n  const props = useProps('MultiSelect', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    value,\n    defaultValue,\n    onChange,\n    onKeyDown,\n    variant,\n    data,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownOpen,\n    onDropdownClose,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    readOnly,\n    disabled,\n    onFocus,\n    onBlur,\n    radius,\n    rightSection,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    rightSectionProps,\n    leftSection,\n    leftSectionWidth,\n    leftSectionPointerEvents,\n    leftSectionProps,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    labelProps,\n    descriptionProps,\n    errorProps,\n    wrapperProps,\n    description,\n    label,\n    error,\n    maxValues,\n    searchable,\n    nothingFoundMessage,\n    withCheckIcon,\n    withAlignedLabels,\n    checkIconPosition,\n    hidePickedOptions,\n    withErrorStyles,\n    name,\n    form,\n    id,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    hiddenInputProps,\n    placeholder,\n    hiddenInputValuesDivider,\n    required,\n    mod,\n    renderOption,\n    renderPill,\n    onRemove,\n    onClear,\n    onMaxValues,\n    scrollAreaProps,\n    chevronColor,\n    attributes,\n    clearSearchOnChange,\n    openOnFocus,\n    ...others\n  } = props;\n\n  const _id = useId(id);\n  const parsedData = getParsedComboboxData(data);\n  const optionsLockup = getOptionsLockup(parsedData);\n  const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      combobox.resetSelectedOption();\n    },\n  });\n\n  const {\n    styleProps,\n    rest: { type, autoComplete, ...rest },\n  } = extractStyleProps(others);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: [],\n    onChange,\n  });\n\n  const [_searchValue, setSearchValue] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: '',\n    onChange: onSearchChange,\n  });\n\n  const handleSearchChange = (value: string) => {\n    setSearchValue(value);\n    combobox.resetSelectedOption();\n  };\n\n  const getStyles = useStyles<MultiSelectFactory>({\n    name: 'MultiSelect',\n    classes: {} as any,\n    props: props as any,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<MultiSelectFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (event.key === ' ' && !searchable) {\n      event.preventDefault();\n      combobox.toggleDropdown();\n    }\n\n    if (event.key === 'Backspace' && _searchValue.length === 0 && _value.length > 0) {\n      onRemove?.(_value[_value.length - 1]);\n      setValue(_value.slice(0, _value.length - 1));\n    }\n  };\n\n  const values = _value.map((item, index) => {\n    const optionData = optionsLockup[`${item}`] || retainedSelectedOptions.current[`${item}`];\n\n    if (renderPill) {\n      return (\n        <Fragment key={`${item}-${index}`}>\n          {renderPill({\n            option: optionData,\n            value: item,\n            onRemove: () => {\n              setValue(_value.filter((i) => item !== i));\n              onRemove?.(item);\n            },\n            disabled,\n          })}\n        </Fragment>\n      );\n    }\n\n    return (\n      <Pill\n        key={`${item}-${index}`}\n        withRemoveButton={!readOnly && !optionsLockup[`${item}`]?.disabled}\n        onRemove={() => {\n          setValue(_value.filter((i) => item !== i));\n          onRemove?.(item);\n        }}\n        unstyled={unstyled}\n        disabled={disabled}\n        {...getStyles('pill')}\n      >\n        {optionData?.label || item}\n      </Pill>\n    );\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, _searchValue]);\n\n  useEffect(() => {\n    _value.forEach((val) => {\n      if (`${val}` in optionsLockup) {\n        retainedSelectedOptions.current[`${val}`] = optionsLockup[`${val}`];\n      }\n    });\n  }, [optionsLockup, _value]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        onClear?.();\n        setValue([]);\n        handleSearchChange('');\n      }}\n    />\n  );\n\n  const filteredData = filterPickedValues({ data: parsedData, value: _value });\n  const _clearable = clearable && _value.length > 0 && !disabled && !readOnly;\n  const pillsListStyle = _clearable\n    ? { paddingInlineEnd: clearSectionOffset[size] ?? clearSectionOffset.sm }\n    : undefined;\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        size={size}\n        readOnly={readOnly}\n        __staticSelector=\"MultiSelect\"\n        attributes={attributes}\n        onOptionSubmit={(val) => {\n          onOptionSubmit?.(val as any);\n          if (clearSearchOnChange) {\n            handleSearchChange('');\n          }\n          combobox.updateSelectedOptionIndex('selected');\n\n          if (_value.includes(optionsLockup[`${val}`].value as any)) {\n            setValue(_value.filter((v) => v !== optionsLockup[`${val}`].value));\n            onRemove?.(optionsLockup[`${val}`].value as any);\n          } else if (_value.length < maxValues) {\n            setValue([..._value, optionsLockup[`${val}`].value] as any);\n          } else {\n            onMaxValues?.();\n          }\n        }}\n        {...comboboxProps}\n      >\n        <Combobox.DropdownTarget>\n          <PillsInput\n            {...styleProps}\n            __staticSelector=\"MultiSelect\"\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            unstyled={unstyled}\n            size={size}\n            className={className}\n            style={style}\n            variant={variant}\n            disabled={disabled}\n            radius={radius}\n            __defaultRightSection={\n              <Combobox.Chevron\n                size={size}\n                error={error}\n                unstyled={unstyled}\n                color={chevronColor}\n              />\n            }\n            __clearSection={clearButton}\n            __clearable={_clearable}\n            __clearSectionMode={clearSectionMode}\n            rightSection={rightSection}\n            rightSectionPointerEvents={rightSectionPointerEvents || 'none'}\n            rightSectionWidth={rightSectionWidth}\n            rightSectionProps={rightSectionProps}\n            leftSection={leftSection}\n            leftSectionWidth={leftSectionWidth}\n            leftSectionPointerEvents={leftSectionPointerEvents}\n            leftSectionProps={leftSectionProps}\n            inputContainer={inputContainer}\n            inputWrapperOrder={inputWrapperOrder}\n            withAsterisk={withAsterisk}\n            labelProps={labelProps}\n            descriptionProps={descriptionProps}\n            errorProps={errorProps}\n            wrapperProps={wrapperProps}\n            description={description}\n            label={label}\n            error={error}\n            withErrorStyles={withErrorStyles}\n            __stylesApiProps={{\n              ...props,\n              rightSectionPointerEvents: rightSectionPointerEvents || 'none',\n              multiline: true,\n            }}\n            pointer={!searchable}\n            onClick={() => (searchable ? combobox.openDropdown() : combobox.toggleDropdown())}\n            data-expanded={combobox.dropdownOpened || undefined}\n            id={_id}\n            required={required}\n            mod={mod}\n            attributes={attributes}\n          >\n            <Pill.Group\n              attributes={attributes}\n              disabled={disabled}\n              unstyled={unstyled}\n              {...getStyles('pillsList', { style: pillsListStyle })}\n            >\n              {values}\n              <Combobox.EventsTarget autoComplete={autoComplete} withExpandedAttribute>\n                <PillsInput.Field\n                  {...rest}\n                  id={_id}\n                  placeholder={placeholder}\n                  type={!searchable && !placeholder ? 'hidden' : 'visible'}\n                  {...getStyles('inputField')}\n                  unstyled={unstyled}\n                  onFocus={(event) => {\n                    onFocus?.(event);\n                    openOnFocus && searchable && combobox.openDropdown();\n                  }}\n                  onBlur={(event) => {\n                    onBlur?.(event);\n                    combobox.closeDropdown();\n                    handleSearchChange('');\n                  }}\n                  onKeyDown={handleInputKeydown}\n                  value={_searchValue}\n                  onChange={(event) => {\n                    handleSearchChange(event.currentTarget.value);\n                    searchable && combobox.openDropdown();\n                    selectFirstOptionOnChange && combobox.selectFirstOption();\n                  }}\n                  disabled={disabled}\n                  readOnly={readOnly || !searchable}\n                  pointer={!searchable}\n                />\n              </Combobox.EventsTarget>\n            </Pill.Group>\n          </PillsInput>\n        </Combobox.DropdownTarget>\n\n        <OptionsDropdown\n          data={hidePickedOptions ? filteredData : parsedData}\n          hidden={readOnly || disabled}\n          filter={filter as OptionsFilter<Primitive> | undefined}\n          search={_searchValue}\n          limit={limit}\n          hiddenWhenEmpty={!nothingFoundMessage}\n          withScrollArea={withScrollArea}\n          maxDropdownHeight={maxDropdownHeight}\n          filterOptions={searchable}\n          value={_value}\n          checkIconPosition={checkIconPosition}\n          withCheckIcon={withCheckIcon}\n          withAlignedLabels={withAlignedLabels}\n          nothingFoundMessage={nothingFoundMessage}\n          unstyled={unstyled}\n          labelId={label ? `${_id}-label` : undefined}\n          aria-label={label ? undefined : others['aria-label']}\n          renderOption={renderOption}\n          scrollAreaProps={scrollAreaProps}\n        />\n      </Combobox>\n      <Combobox.HiddenInput\n        name={name}\n        valuesDivider={hiddenInputValuesDivider}\n        value={_value}\n        form={form}\n        disabled={disabled}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nMultiSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nMultiSelect.displayName = '@mantine/core/MultiSelect';\n"],"mappings":"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"}

package/cjs/components/PasswordInput/PasswordInput.cjs

@@ -96,6 +96,7 @@ const PasswordInput = require_factory.factory((_props) => {
 		classNames: resolvedClassNames,
 		styles: resolvedStyles,
 		__staticSelector: "PasswordInput",
+		__stylesApiProps: props,
 		unstyled,
 		withAsterisk,
 		inputWrapperOrder,
@@ -131,6 +132,7 @@ const PasswordInput = require_factory.factory((_props) => {
 			radius,
 			disabled,
 			__staticSelector: "PasswordInput",
+			__stylesApiProps: props,
 			rightSectionWidth,
 			rightSection: rightSection ?? visibilityToggleButton,
 			variant,

package/cjs/components/PasswordInput/PasswordInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.cjs","names":["PasswordToggleIcon","createVarsResolver","getSize","factory","useProps","useStyles","useResolvedStylesApi","extractStyleProps","ActionIcon","Input","classes","InputBase"],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getSize,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { PasswordToggleIcon } from './PasswordToggleIcon';\nimport classes from './PasswordInput.module.css';\n\nexport type PasswordInputStylesNames =\n  | 'root'\n  | 'visibilityToggle'\n  | 'innerInput'\n  | __InputStylesNames;\nexport type PasswordInputCssVariables = {\n  root: '--psi-icon-size' | '--psi-button-size';\n};\n\nexport interface PasswordInputProps\n  extends\n    BoxProps,\n    Omit<__BaseInputProps, 'pointer'>,\n    StylesApiProps<PasswordInputFactory>,\n    ElementProps<'input', 'size'> {\n  /** A component to replace the visibility toggle icon */\n  visibilityToggleIcon?: React.FC<{ reveal: boolean }>;\n\n  /** Props passed down to the visibility toggle button */\n  visibilityToggleButtonProps?: Record<string, any>;\n\n  /** If set, the input value is visible */\n  visible?: boolean;\n\n  /** If set, the input value is visible by default */\n  defaultVisible?: boolean;\n\n  /** Called when visibility changes */\n  onVisibilityChange?: (visible: boolean) => void;\n}\n\nexport type PasswordInputFactory = Factory<{\n  props: PasswordInputProps;\n  ref: HTMLInputElement;\n  stylesNames: PasswordInputStylesNames;\n  vars: PasswordInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  visibilityToggleIcon: PasswordToggleIcon,\n} satisfies Partial<PasswordInputProps>;\n\nconst varsResolver = createVarsResolver<PasswordInputFactory>((_, { size }) => ({\n  root: {\n    '--psi-icon-size': getSize(size, 'psi-icon-size'),\n    '--psi-button-size': getSize(size, 'psi-button-size'),\n  },\n}));\n\nexport const PasswordInput = factory<PasswordInputFactory>((_props) => {\n  const props = useProps('PasswordInput', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    required,\n    error,\n    leftSection,\n    disabled,\n    id,\n    variant,\n    inputContainer,\n    description,\n    label,\n    size,\n    errorProps,\n    descriptionProps,\n    labelProps,\n    withAsterisk,\n    inputWrapperOrder,\n    wrapperProps,\n    radius,\n    rightSection,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    leftSectionWidth,\n    visible,\n    defaultVisible,\n    onVisibilityChange,\n    visibilityToggleIcon: VisibilityToggleIcon,\n    visibilityToggleButtonProps,\n    rightSectionProps,\n    leftSectionProps,\n    leftSectionPointerEvents,\n    withErrorStyles,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const uuid = useId(id);\n\n  const [_visible, setVisibility] = useUncontrolled({\n    value: visible,\n    defaultValue: defaultVisible,\n    finalValue: false,\n    onChange: onVisibilityChange,\n  });\n\n  const toggleVisibility = () => setVisibility(!_visible);\n\n  const getStyles = useStyles<PasswordInputFactory>({\n    name: 'PasswordInput',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<PasswordInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const errorId = errorProps?.id || `${uuid}-error`;\n  const descriptionId = descriptionProps?.id || `${uuid}-description`;\n  const hasError = !!error && typeof error !== 'boolean';\n  const hasDescription = !!description;\n  const _describedBy = `${hasError ? errorId : ''} ${hasDescription ? descriptionId : ''}`;\n  const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : undefined;\n\n  const visibilityToggleButton = (\n    <ActionIcon<'button'>\n      {...getStyles('visibilityToggle')}\n      disabled={disabled}\n      radius={radius}\n      aria-pressed={_visible}\n      tabIndex={-1}\n      aria-label=\"Toggle password visibility\"\n      {...visibilityToggleButtonProps}\n      variant={visibilityToggleButtonProps?.variant ?? 'subtle'}\n      color=\"gray\"\n      unstyled={unstyled}\n      onTouchEnd={(event) => {\n        event.preventDefault();\n        visibilityToggleButtonProps?.onTouchEnd?.(event);\n        toggleVisibility();\n      }}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        visibilityToggleButtonProps?.onMouseDown?.(event);\n        toggleVisibility();\n      }}\n      onKeyDown={(event) => {\n        visibilityToggleButtonProps?.onKeyDown?.(event);\n        if (event.key === ' ') {\n          event.preventDefault();\n          toggleVisibility();\n        }\n      }}\n    >\n      <VisibilityToggleIcon reveal={_visible} />\n    </ActionIcon>\n  );\n\n  return (\n    <Input.Wrapper\n      required={required}\n      id={uuid}\n      label={label}\n      error={error}\n      description={description}\n      size={size}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"PasswordInput\"\n      unstyled={unstyled}\n      withAsterisk={withAsterisk}\n      inputWrapperOrder={inputWrapperOrder}\n      inputContainer={inputContainer}\n      variant={variant}\n      labelProps={{ ...labelProps, htmlFor: uuid }}\n      descriptionProps={{ ...descriptionProps, id: descriptionId }}\n      errorProps={{ ...errorProps, id: errorId }}\n      mod={mod}\n      attributes={attributes}\n      {...getStyles('root')}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Input\n        component=\"div\"\n        error={error}\n        leftSection={leftSection}\n        size={size}\n        classNames={{ ...resolvedClassNames, input: cx(classes.input, resolvedClassNames.input) }}\n        styles={resolvedStyles}\n        radius={radius}\n        disabled={disabled}\n        __staticSelector=\"PasswordInput\"\n        rightSectionWidth={rightSectionWidth}\n        rightSection={rightSection ?? visibilityToggleButton}\n        variant={variant}\n        unstyled={unstyled}\n        leftSectionWidth={leftSectionWidth}\n        rightSectionPointerEvents={rightSectionPointerEvents || 'all'}\n        rightSectionProps={rightSectionProps}\n        leftSectionProps={leftSectionProps}\n        leftSectionPointerEvents={leftSectionPointerEvents}\n        withAria={false}\n        withErrorStyles={withErrorStyles}\n        attributes={attributes}\n      >\n        <input\n          required={required}\n          data-invalid={!!error || undefined}\n          data-with-left-section={!!leftSection || undefined}\n          {...getStyles('innerInput')}\n          disabled={disabled}\n          id={uuid}\n          {...rest}\n          aria-describedby={describedBy}\n          autoComplete={rest.autoComplete || 'off'}\n          type={_visible ? 'text' : 'password'}\n        />\n      </Input>\n    </Input.Wrapper>\n  );\n});\n\nPasswordInput.classes = { ...InputBase.classes, ...classes };\nPasswordInput.varsResolver = varsResolver;\nPasswordInput.displayName = '@mantine/core/PasswordInput';\n"],"mappings":"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"}
+{"version":3,"file":"PasswordInput.cjs","names":["PasswordToggleIcon","createVarsResolver","getSize","factory","useProps","useStyles","useResolvedStylesApi","extractStyleProps","ActionIcon","Input","classes","InputBase"],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getSize,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { PasswordToggleIcon } from './PasswordToggleIcon';\nimport classes from './PasswordInput.module.css';\n\nexport type PasswordInputStylesNames =\n  | 'root'\n  | 'visibilityToggle'\n  | 'innerInput'\n  | __InputStylesNames;\nexport type PasswordInputCssVariables = {\n  root: '--psi-icon-size' | '--psi-button-size';\n};\n\nexport interface PasswordInputProps\n  extends\n    BoxProps,\n    Omit<__BaseInputProps, 'pointer'>,\n    StylesApiProps<PasswordInputFactory>,\n    ElementProps<'input', 'size'> {\n  /** A component to replace the visibility toggle icon */\n  visibilityToggleIcon?: React.FC<{ reveal: boolean }>;\n\n  /** Props passed down to the visibility toggle button */\n  visibilityToggleButtonProps?: Record<string, any>;\n\n  /** If set, the input value is visible */\n  visible?: boolean;\n\n  /** If set, the input value is visible by default */\n  defaultVisible?: boolean;\n\n  /** Called when visibility changes */\n  onVisibilityChange?: (visible: boolean) => void;\n}\n\nexport type PasswordInputFactory = Factory<{\n  props: PasswordInputProps;\n  ref: HTMLInputElement;\n  stylesNames: PasswordInputStylesNames;\n  vars: PasswordInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  visibilityToggleIcon: PasswordToggleIcon,\n} satisfies Partial<PasswordInputProps>;\n\nconst varsResolver = createVarsResolver<PasswordInputFactory>((_, { size }) => ({\n  root: {\n    '--psi-icon-size': getSize(size, 'psi-icon-size'),\n    '--psi-button-size': getSize(size, 'psi-button-size'),\n  },\n}));\n\nexport const PasswordInput = factory<PasswordInputFactory>((_props) => {\n  const props = useProps('PasswordInput', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    required,\n    error,\n    leftSection,\n    disabled,\n    id,\n    variant,\n    inputContainer,\n    description,\n    label,\n    size,\n    errorProps,\n    descriptionProps,\n    labelProps,\n    withAsterisk,\n    inputWrapperOrder,\n    wrapperProps,\n    radius,\n    rightSection,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    leftSectionWidth,\n    visible,\n    defaultVisible,\n    onVisibilityChange,\n    visibilityToggleIcon: VisibilityToggleIcon,\n    visibilityToggleButtonProps,\n    rightSectionProps,\n    leftSectionProps,\n    leftSectionPointerEvents,\n    withErrorStyles,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const uuid = useId(id);\n\n  const [_visible, setVisibility] = useUncontrolled({\n    value: visible,\n    defaultValue: defaultVisible,\n    finalValue: false,\n    onChange: onVisibilityChange,\n  });\n\n  const toggleVisibility = () => setVisibility(!_visible);\n\n  const getStyles = useStyles<PasswordInputFactory>({\n    name: 'PasswordInput',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<PasswordInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const errorId = errorProps?.id || `${uuid}-error`;\n  const descriptionId = descriptionProps?.id || `${uuid}-description`;\n  const hasError = !!error && typeof error !== 'boolean';\n  const hasDescription = !!description;\n  const _describedBy = `${hasError ? errorId : ''} ${hasDescription ? descriptionId : ''}`;\n  const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : undefined;\n\n  const visibilityToggleButton = (\n    <ActionIcon<'button'>\n      {...getStyles('visibilityToggle')}\n      disabled={disabled}\n      radius={radius}\n      aria-pressed={_visible}\n      tabIndex={-1}\n      aria-label=\"Toggle password visibility\"\n      {...visibilityToggleButtonProps}\n      variant={visibilityToggleButtonProps?.variant ?? 'subtle'}\n      color=\"gray\"\n      unstyled={unstyled}\n      onTouchEnd={(event) => {\n        event.preventDefault();\n        visibilityToggleButtonProps?.onTouchEnd?.(event);\n        toggleVisibility();\n      }}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        visibilityToggleButtonProps?.onMouseDown?.(event);\n        toggleVisibility();\n      }}\n      onKeyDown={(event) => {\n        visibilityToggleButtonProps?.onKeyDown?.(event);\n        if (event.key === ' ') {\n          event.preventDefault();\n          toggleVisibility();\n        }\n      }}\n    >\n      <VisibilityToggleIcon reveal={_visible} />\n    </ActionIcon>\n  );\n\n  return (\n    <Input.Wrapper\n      required={required}\n      id={uuid}\n      label={label}\n      error={error}\n      description={description}\n      size={size}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"PasswordInput\"\n      __stylesApiProps={props}\n      unstyled={unstyled}\n      withAsterisk={withAsterisk}\n      inputWrapperOrder={inputWrapperOrder}\n      inputContainer={inputContainer}\n      variant={variant}\n      labelProps={{ ...labelProps, htmlFor: uuid }}\n      descriptionProps={{ ...descriptionProps, id: descriptionId }}\n      errorProps={{ ...errorProps, id: errorId }}\n      mod={mod}\n      attributes={attributes}\n      {...getStyles('root')}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Input\n        component=\"div\"\n        error={error}\n        leftSection={leftSection}\n        size={size}\n        classNames={{ ...resolvedClassNames, input: cx(classes.input, resolvedClassNames.input) }}\n        styles={resolvedStyles}\n        radius={radius}\n        disabled={disabled}\n        __staticSelector=\"PasswordInput\"\n        __stylesApiProps={props}\n        rightSectionWidth={rightSectionWidth}\n        rightSection={rightSection ?? visibilityToggleButton}\n        variant={variant}\n        unstyled={unstyled}\n        leftSectionWidth={leftSectionWidth}\n        rightSectionPointerEvents={rightSectionPointerEvents || 'all'}\n        rightSectionProps={rightSectionProps}\n        leftSectionProps={leftSectionProps}\n        leftSectionPointerEvents={leftSectionPointerEvents}\n        withAria={false}\n        withErrorStyles={withErrorStyles}\n        attributes={attributes}\n      >\n        <input\n          required={required}\n          data-invalid={!!error || undefined}\n          data-with-left-section={!!leftSection || undefined}\n          {...getStyles('innerInput')}\n          disabled={disabled}\n          id={uuid}\n          {...rest}\n          aria-describedby={describedBy}\n          autoComplete={rest.autoComplete || 'off'}\n          type={_visible ? 'text' : 'password'}\n        />\n      </Input>\n    </Input.Wrapper>\n  );\n});\n\nPasswordInput.classes = { ...InputBase.classes, ...classes };\nPasswordInput.varsResolver = varsResolver;\nPasswordInput.displayName = '@mantine/core/PasswordInput';\n"],"mappings":"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"}

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

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

package/cjs/components/Popover/PopoverTarget/PopoverTarget.cjs

@@ -34,9 +34,9 @@ const PopoverTarget = require_factory.factory((props) => {
 		...ctx.targetProps,
 		className: (0, clsx.default)(ctx.targetProps.className, forwardedProps.className, childProps.className),
 		[refProp]: targetRef,
-		...!ctx.controlled ? { onClick: () => {
+		...!ctx.controlled ? { onClick: (event) => {
 			ctx.onToggle();
-			childProps.onClick?.();
+			childProps.onClick?.(event);
 		} } : null
 	});
 });

package/cjs/components/Popover/PopoverTarget/PopoverTarget.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverTarget.cjs","names":["factory","useProps","getSingleElementChild","usePopoverContext","getRefProp"],"sources":["../../../../src/components/Popover/PopoverTarget/PopoverTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport cx from 'clsx';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getRefProp, getSingleElementChild, useProps } from '../../../core';\nimport { usePopoverContext } from '../Popover.context';\n\nexport interface PopoverTargetProps {\n  /** Target element */\n  children: React.ReactNode;\n\n  /** Key of the prop that should be used to access element ref */\n  refProp?: string;\n\n  /** Popup accessible type @default 'dialog' */\n  popupType?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n  popupType: 'dialog',\n} satisfies Partial<PopoverTargetProps>;\n\nexport type PopoverTargetFactory = Factory<{\n  props: PopoverTargetProps;\n  ref: HTMLElement;\n  compound: true;\n}>;\n\nexport const PopoverTarget = factory<PopoverTargetFactory>((props) => {\n  const { children, refProp, popupType, ref, ...others } = useProps(\n    'PopoverTarget',\n    defaultProps,\n    props\n  );\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Popover.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 forwardedProps: any = others;\n  const ctx = usePopoverContext();\n  const targetRef = useMergedRef(ctx.reference, getRefProp(child), ref);\n\n  const accessibleProps = ctx.withRoles\n    ? {\n        'aria-haspopup': popupType,\n        'aria-expanded': ctx.opened,\n        'aria-controls': ctx.opened ? ctx.getDropdownId() : undefined,\n        id: ctx.getTargetId(),\n      }\n    : {};\n\n  const childProps = child.props as any;\n  return cloneElement(child, {\n    ...forwardedProps,\n    ...accessibleProps,\n    ...ctx.targetProps,\n    className: cx(ctx.targetProps.className, forwardedProps.className, childProps.className),\n    [refProp]: targetRef,\n    ...(!ctx.controlled\n      ? {\n          onClick: () => {\n            ctx.onToggle();\n            childProps.onClick?.();\n          },\n        }\n      : null),\n  });\n});\n\nPopoverTarget.displayName = '@mantine/core/PopoverTarget';\n"],"mappings":";;;;;;;;;;;;AAiBA,MAAM,eAAe;CACnB,SAAS;CACT,WAAW;CACZ;AAQD,MAAa,gBAAgBA,gBAAAA,SAA+B,UAAU;CACpE,MAAM,EAAE,UAAU,SAAS,WAAW,KAAK,GAAG,WAAWC,kBAAAA,SACvD,iBACA,cACA,MACD;CAED,MAAM,QAAQC,iCAAAA,sBAAsB,SAAS;AAC7C,KAAI,CAAC,MACH,OAAM,IAAI,MACR,mKACD;CAGH,MAAM,iBAAsB;CAC5B,MAAM,MAAMC,wBAAAA,mBAAmB;CAC/B,MAAM,aAAA,GAAA,eAAA,cAAyB,IAAI,WAAWC,qBAAAA,WAAW,MAAM,EAAE,IAAI;CAErE,MAAM,kBAAkB,IAAI,YACxB;EACE,iBAAiB;EACjB,iBAAiB,IAAI;EACrB,iBAAiB,IAAI,SAAS,IAAI,eAAe,GAAG,KAAA;EACpD,IAAI,IAAI,aAAa;EACtB,GACD,EAAE;CAEN,MAAM,aAAa,MAAM;AACzB,SAAA,GAAA,MAAA,cAAoB,OAAO;EACzB,GAAG;EACH,GAAG;EACH,GAAG,IAAI;EACP,YAAA,GAAA,KAAA,SAAc,IAAI,YAAY,WAAW,eAAe,WAAW,WAAW,UAAU;GACvF,UAAU;EACX,GAAI,CAAC,IAAI,aACL,EACE,eAAe;AACb,OAAI,UAAU;AACd,cAAW,WAAW;KAEzB,GACD;EACL,CAAC;EACF;AAEF,cAAc,cAAc"}
+{"version":3,"file":"PopoverTarget.cjs","names":["factory","useProps","getSingleElementChild","usePopoverContext","getRefProp"],"sources":["../../../../src/components/Popover/PopoverTarget/PopoverTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport cx from 'clsx';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getRefProp, getSingleElementChild, useProps } from '../../../core';\nimport { usePopoverContext } from '../Popover.context';\n\nexport interface PopoverTargetProps {\n  /** Target element */\n  children: React.ReactNode;\n\n  /** Key of the prop that should be used to access element ref */\n  refProp?: string;\n\n  /** Popup accessible type @default 'dialog' */\n  popupType?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n  popupType: 'dialog',\n} satisfies Partial<PopoverTargetProps>;\n\nexport type PopoverTargetFactory = Factory<{\n  props: PopoverTargetProps;\n  ref: HTMLElement;\n  compound: true;\n}>;\n\nexport const PopoverTarget = factory<PopoverTargetFactory>((props) => {\n  const { children, refProp, popupType, ref, ...others } = useProps(\n    'PopoverTarget',\n    defaultProps,\n    props\n  );\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Popover.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 forwardedProps: any = others;\n  const ctx = usePopoverContext();\n  const targetRef = useMergedRef(ctx.reference, getRefProp(child), ref);\n\n  const accessibleProps = ctx.withRoles\n    ? {\n        'aria-haspopup': popupType,\n        'aria-expanded': ctx.opened,\n        'aria-controls': ctx.opened ? ctx.getDropdownId() : undefined,\n        id: ctx.getTargetId(),\n      }\n    : {};\n\n  const childProps = child.props as any;\n  return cloneElement(child, {\n    ...forwardedProps,\n    ...accessibleProps,\n    ...ctx.targetProps,\n    className: cx(ctx.targetProps.className, forwardedProps.className, childProps.className),\n    [refProp]: targetRef,\n    ...(!ctx.controlled\n      ? {\n          onClick: (event: React.MouseEvent<HTMLElement>) => {\n            ctx.onToggle();\n            childProps.onClick?.(event);\n          },\n        }\n      : null),\n  });\n});\n\nPopoverTarget.displayName = '@mantine/core/PopoverTarget';\n"],"mappings":";;;;;;;;;;;;AAiBA,MAAM,eAAe;CACnB,SAAS;CACT,WAAW;CACZ;AAQD,MAAa,gBAAgBA,gBAAAA,SAA+B,UAAU;CACpE,MAAM,EAAE,UAAU,SAAS,WAAW,KAAK,GAAG,WAAWC,kBAAAA,SACvD,iBACA,cACA,MACD;CAED,MAAM,QAAQC,iCAAAA,sBAAsB,SAAS;AAC7C,KAAI,CAAC,MACH,OAAM,IAAI,MACR,mKACD;CAGH,MAAM,iBAAsB;CAC5B,MAAM,MAAMC,wBAAAA,mBAAmB;CAC/B,MAAM,aAAA,GAAA,eAAA,cAAyB,IAAI,WAAWC,qBAAAA,WAAW,MAAM,EAAE,IAAI;CAErE,MAAM,kBAAkB,IAAI,YACxB;EACE,iBAAiB;EACjB,iBAAiB,IAAI;EACrB,iBAAiB,IAAI,SAAS,IAAI,eAAe,GAAG,KAAA;EACpD,IAAI,IAAI,aAAa;EACtB,GACD,EAAE;CAEN,MAAM,aAAa,MAAM;AACzB,SAAA,GAAA,MAAA,cAAoB,OAAO;EACzB,GAAG;EACH,GAAG;EACH,GAAG,IAAI;EACP,YAAA,GAAA,KAAA,SAAc,IAAI,YAAY,WAAW,eAAe,WAAW,WAAW,UAAU;GACvF,UAAU;EACX,GAAI,CAAC,IAAI,aACL,EACE,UAAU,UAAyC;AACjD,OAAI,UAAU;AACd,cAAW,UAAU,MAAM;KAE9B,GACD;EACL,CAAC;EACF;AAEF,cAAc,cAAc"}

package/cjs/components/Radio/Radio.cjs

@@ -67,7 +67,7 @@ const Radio = require_factory.factory((_props) => {
 	const contextChecked = ctx ? ctx.value === rest.value : void 0;
 	const withContextProps = {
 		checked: contextChecked ?? checked,
-		name: ctx?.name ?? rest.name,
+		name: rest.name ?? ctx?.name,
 		onChange: (event) => {
 			ctx?.onChange(event);
 			onChange?.(event);