npm - @mantine/core - Versions diffs - 9.0.0-alpha.6 → 9.0.0 - Mend

@mantine/core 9.0.0-alpha.6 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (199) hide show

package/esm/components/Autocomplete/Autocomplete.mjs CHANGED Viewed

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

package/esm/components/Autocomplete/Autocomplete.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Autocomplete.mjs","names":["useId"],"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,eAAe,SAA8B,WAAW;CACnE,MAAM,QAAQ,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,MAAMA,QAAM,GAAG;CACrB,MAAM,aAAa,sBAAsB,KAAK;CAC9C,MAAM,gBAAgB,iBAAiB,WAAW;CAElD,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY;EACZ;EACD,CAAC;CAEF,MAAM,WAAW,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,mBAAmB,qBAA0C;EACvF;EACA;EACA;EACD,CAAC;AAEF,iBAAgB;AACd,MAAI,0BACF,UAAS,mBAAmB;IAE7B,CAAC,2BAA2B,OAAO,CAAC;CAEvC,MAAM,cACJ,oBAAC,SAAS,aAAV;EACE,GAAI;EACJ,eAAe;AACb,qBAAkB,GAAG;AACrB,cAAW;;EAEb,CAAA;AAGJ,QACE,qBAAC,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,oBAAC,SAAS,QAAV;GAA+B;~~aAC7B~~,oBAAC,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,oBAAC,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,GAAG,UAAU;CAAS,GAAG,SAAS;CAAS;AACpE,aAAa,cAAc"}
1	+ {"version":3,"file":"Autocomplete.mjs","names":["useId"],"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":";;;;;;;;;;;;;;AA4FA,MAAa,eAAe,SAA8B,WAAW;CACnE,MAAM,QAAQ,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,MAAMA,QAAM,GAAG;CACrB,MAAM,aAAa,sBAAsB,KAAK;CAC9C,MAAM,gBAAgB,iBAAiB,WAAW;CAElD,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY;EACZ;EACD,CAAC;CAEF,MAAM,WAAW,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,mBAAmB,qBAA0C;EACvF;EACA;EACA;EACD,CAAC;AAEF,iBAAgB;AACd,MAAI,0BACF,UAAS,mBAAmB;IAE7B,CAAC,2BAA2B,OAAO,CAAC;CAEvC,MAAM,cACJ,oBAAC,SAAS,aAAV;EACE,GAAI;EACJ,eAAe;AACb,qBAAkB,GAAG;AACrB,cAAW;;EAEb,CAAA;AAGJ,QACE,qBAAC,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,oBAAC,SAAS,QAAV;GAA+B;GAAc,uBAAA;aAC3C,oBAAC,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,oBAAC,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,GAAG,UAAU;CAAS,GAAG,SAAS;CAAS;AACpE,aAAa,cAAc"}

package/esm/components/Badge/Badge.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge.module.mjs","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":""}
1	+ {"version":3,"file":"Badge.module.mjs","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/esm/components/Button/Button.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.module.mjs","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":""}
1	+ {"version":3,"file":"Button.module.mjs","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/esm/components/Checkbox/Checkbox.mjs CHANGED Viewed

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

package/esm/components/Checkbox/Checkbox.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.mjs","names":["useId","classes"],"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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"}
1	+ {"version":3,"file":"Checkbox.mjs","names":["useId","classes"],"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/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.mjs CHANGED Viewed

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

package/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxIndicator.mjs","names":["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,MAAM;CACN,SAAS;~~CACV~~;AAED,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAc,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,mBAAmB,QAAQ,MAAM,gBAAgB;EACjD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;EACzE,oBAAoB,YAAY,YAAY,eAAe,cAAc,OAAO,MAAM;EACtF,yBAAyB,YACrB,cAAc,WAAW,MAAM,GAC/B,qBAAqB,cAAc,MAAM,GACvC,iBAAiB;GAAE;GAAO;GAAO;GAAc,CAAC,GAChD,KAAA;EACP,EACF;EAEJ;AAED,MAAa,oBAAoB,SAAmC,WAAW;CAC7E,MAAM,QAAQ,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,YAAY,UAAoC;EACpD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACf,CAAC;CAEF,MAAM,MAAM,IAAI,oBAAoB;CACpC,MAAM,WACJ,OAAO,YAAY,aAAa,OAAO,kBAAkB,YACrD,WAAW,gBACX,KAAK,WAAW;AAEtB,QACE,oBAAC,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,SAAS,CAAC;EAC9B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;GAAU,EAAE,IAAI;EAC3C,GAAI;YAEJ,oBAAC,MAAD;GAAqB;GAAe,GAAI,UAAU,OAAO;GAAI,CAAA;EACzD,CAAA;EAER;AAEF,kBAAkB,cAAc;AAChC,kBAAkB,UAAUA;AAC5B,kBAAkB,eAAe"}
1	+ {"version":3,"file":"CheckboxIndicator.mjs","names":["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,MAAM;CACN,SAAS;CACT,QAAQ;CACT;AAED,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAc,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,mBAAmB,QAAQ,MAAM,gBAAgB;EACjD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;EACzE,oBAAoB,YAAY,YAAY,eAAe,cAAc,OAAO,MAAM;EACtF,yBAAyB,YACrB,cAAc,WAAW,MAAM,GAC/B,qBAAqB,cAAc,MAAM,GACvC,iBAAiB;GAAE;GAAO;GAAO;GAAc,CAAC,GAChD,KAAA;EACP,EACF;EAEJ;AAED,MAAa,oBAAoB,SAAmC,WAAW;CAC7E,MAAM,QAAQ,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,YAAY,UAAoC;EACpD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACf,CAAC;CAEF,MAAM,MAAM,IAAI,oBAAoB;CACpC,MAAM,WACJ,OAAO,YAAY,aAAa,OAAO,kBAAkB,YACrD,WAAW,gBACX,KAAK,WAAW;AAEtB,QACE,oBAAC,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,SAAS,CAAC;EAC9B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;GAAU,EAAE,IAAI;EAC3C,GAAI;YAEJ,oBAAC,MAAD;GAAqB;GAAe,GAAI,UAAU,OAAO;GAAI,CAAA;EACzD,CAAA;EAER;AAEF,kBAAkB,cAAc;AAChC,kBAAkB,UAAUA;AAC5B,kBAAkB,eAAe"}

package/esm/components/Chip/Chip.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Chip.module.mjs","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":""}
1	+ {"version":3,"file":"Chip.module.mjs","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/esm/components/Combobox/use-combobox-target-props/use-combobox-target-props.mjs CHANGED Viewed

@@ -48,6 +48,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/esm/components/Combobox/use-combobox-target-props/use-combobox-target-props.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-combobox-target-props.mjs","names":[],"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,MAAM,oBAAoB;CAChC,MAAM,CAAC,kBAAkB,uBAAuB,SAAwB,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"}
1	+ {"version":3,"file":"use-combobox-target-props.mjs","names":[],"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,MAAM,oBAAoB;CAChC,MAAM,CAAC,kBAAkB,uBAAuB,SAAwB,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/esm/components/MultiSelect/MultiSelect.mjs CHANGED Viewed

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

package/esm/components/MultiSelect/MultiSelect.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelect.mjs","names":["useId"],"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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"}
1	+ {"version":3,"file":"MultiSelect.mjs","names":["useId"],"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/esm/components/PasswordInput/PasswordInput.mjs CHANGED Viewed

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

package/esm/components/PasswordInput/PasswordInput.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordInput.mjs","names":["classes"],"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":";;;;;;;;;;;;;;;;;AA4DA,MAAM,eAAe,EACnB,sBAAsB,oBACvB;AAED,MAAM,eAAe,oBAA0C,GAAG,EAAE,YAAY,EAC9E,MAAM;CACJ,mBAAmB,QAAQ,MAAM,gBAAgB;CACjD,qBAAqB,QAAQ,MAAM,kBAAkB;CACtD,EACF,EAAE;AAEH,MAAa,gBAAgB,SAA+B,WAAW;CACrE,MAAM,QAAQ,SAAS,iBAAiB,cAAc,OAAO;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,OACA,aACA,UACA,IACA,SACA,gBACA,aACA,OACA,MACA,YACA,kBACA,YACA,cACA,mBACA,cACA,QACA,cACA,mBACA,2BACA,kBACA,SACA,gBACA,oBACA,sBAAsB,sBACtB,6BACA,mBACA,kBACA,0BACA,iBACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,OAAO,MAAM,GAAG;CAEtB,MAAM,CAAC,UAAU,iBAAiB,gBAAgB;EAChD,OAAO;EACP,cAAc;EACd,YAAY;EACZ,UAAU;EACX,CAAC;CAEF,MAAM,yBAAyB,cAAc,CAAC,SAAS;CAEvD,MAAM,YAAY,UAAgC;EAChD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,oBAAoB,mBAAmB,qBAA2C;EACxF;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,YAAY,SAAS,kBAAkB,OAAO;CACtD,MAAM,UAAU,YAAY,MAAM,GAAG,KAAK;CAC1C,MAAM,gBAAgB,kBAAkB,MAAM,GAAG,KAAK;CAGtD,MAAM,eAAe,GAFJ,CAAC,CAAC,SAAS,OAAO,UAAU,YAEV,UAAU,GAAG,GADzB,CAAC,CAAC,cAC2C,gBAAgB;CACpF,MAAM,cAAc,aAAa,MAAM,CAAC,SAAS,IAAI,aAAa,MAAM,GAAG,KAAA;CAE3E,MAAM,yBACJ,oBAAC,YAAD;EACE,GAAI,UAAU,mBAAmB;EACvB;EACF;EACR,gBAAc;EACd,UAAU;EACV,cAAW;EACX,GAAI;EACJ,SAAS,6BAA6B,WAAW;EACjD,OAAM;EACI;EACV,aAAa,UAAU;AACrB,SAAM,gBAAgB;AACtB,gCAA6B,aAAa,MAAM;AAChD,qBAAkB;;EAEpB,cAAc,UAAU;AACtB,SAAM,gBAAgB;AACtB,gCAA6B,cAAc,MAAM;AACjD,qBAAkB;;EAEpB,YAAY,UAAU;AACpB,gCAA6B,YAAY,MAAM;AAC/C,OAAI,MAAM,QAAQ,KAAK;AACrB,UAAM,gBAAgB;AACtB,sBAAkB;;;YAItB,oBAAC,sBAAD,EAAsB,QAAQ,UAAY,CAAA;EAC/B,CAAA;AAGf,QACE,oBAAC,MAAM,SAAP;EACY;EACV,IAAI;EACG;EACA;EACM;EACP;EACN,YAAY;EACZ,QAAQ;EACR,kBAAiB;~~EACP~~;EACI;EACK;EACH;EACP;EACT,YAAY;GAAE,GAAG;GAAY,SAAS;GAAM;EAC5C,kBAAkB;GAAE,GAAG;GAAkB,IAAI;GAAe;EAC5D,YAAY;GAAE,GAAG;GAAY,IAAI;GAAS;EACrC;EACO;EACZ,GAAI,UAAU,OAAO;EACrB,GAAI;EACJ,GAAI;YAEJ,oBAAC,OAAD;GACE,WAAU;GACH;GACM;GACP;GACN,YAAY;IAAE,GAAG;IAAoB,OAAO,GAAGA,6BAAQ,OAAO,mBAAmB,MAAM;IAAE;GACzF,QAAQ;GACA;GACE;GACV,kBAAiB;~~GACE~~;GACnB,cAAc,gBAAgB;GACrB;GACC;GACQ;GAClB,2BAA2B,6BAA6B;GACrC;GACD;GACQ;GAC1B,UAAU;GACO;GACL;aAEZ,oBAAC,SAAD;IACY;IACV,gBAAc,CAAC,CAAC,SAAS,KAAA;IACzB,0BAAwB,CAAC,CAAC,eAAe,KAAA;IACzC,GAAI,UAAU,aAAa;IACjB;IACV,IAAI;IACJ,GAAI;IACJ,oBAAkB;IAClB,cAAc,KAAK,gBAAgB;IACnC,MAAM,WAAW,SAAS;IAC1B,CAAA;GACI,CAAA;EACM,CAAA;EAElB;AAEF,cAAc,UAAU;CAAE,GAAG,UAAU;CAAS,GAAGA;CAAS;AAC5D,cAAc,eAAe;AAC7B,cAAc,cAAc"}
1	+ {"version":3,"file":"PasswordInput.mjs","names":["classes"],"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/esm/components/Pill/Pill.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pill.module.mjs","names":[],"sources":["../../../src/components/Pill/Pill.module.css"],"sourcesContent":[".root {\n --pill-fz-xs: 10px;\n --pill-fz-sm: 12px;\n --pill-fz-md: 14px;\n --pill-fz-lg: 16px;\n --pill-fz-xl: 18px;\n\n --pill-height-xs: 18px;\n --pill-height-sm: 22px;\n --pill-height-md: 25px;\n --pill-height-lg: 28px;\n --pill-height-xl: 32px;\n\n --pill-fz: var(--pill-fz-sm);\n --pill-height: var(--pill-height-sm);\n\n font-size: var(--pill-fz);\n flex: 0;\n height: var(--pill-height);\n padding-inline: 0.8em;\n display: inline-flex;\n align-items: center;\n border-radius: var(--pill-radius, 1000rem);\n line-height: 1;\n white-space: nowrap;\n user-select: none;\n -webkit-user-select: none;\n max-width: 100%;\n\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":""}
1	+ {"version":3,"file":"Pill.module.mjs","names":[],"sources":["../../../src/components/Pill/Pill.module.css"],"sourcesContent":[".root {\n --pill-fz-xs: 10px;\n --pill-fz-sm: 12px;\n --pill-fz-md: 14px;\n --pill-fz-lg: 16px;\n --pill-fz-xl: 18px;\n\n --pill-height-xs: 18px;\n --pill-height-sm: 22px;\n --pill-height-md: 25px;\n --pill-height-lg: 28px;\n --pill-height-xl: 32px;\n\n --pill-fz: var(--pill-fz-sm);\n --pill-height: var(--pill-height-sm);\n\n font-size: var(--pill-fz);\n flex: 0;\n height: var(--pill-height);\n padding-inline: 0.8em;\n display: inline-flex;\n align-items: center;\n border-radius: var(--pill-radius, 1000rem);\n line-height: 1;\n white-space: nowrap;\n user-select: none;\n -webkit-user-select: none;\n max-width: 100%;\n\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/esm/components/Popover/PopoverTarget/PopoverTarget.mjs CHANGED Viewed

@@ -32,9 +32,9 @@ const PopoverTarget = factory((props) => {
 		...ctx.targetProps,
 		className: cx(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/esm/components/Popover/PopoverTarget/PopoverTarget.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PopoverTarget.mjs","names":[],"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,gBAAgB,SAA+B,UAAU;CACpE,MAAM,EAAE,UAAU,SAAS,WAAW,KAAK,GAAG,WAAW,SACvD,iBACA,cACA,MACD;CAED,MAAM,QAAQ,sBAAsB,SAAS;AAC7C,KAAI,CAAC,MACH,OAAM,IAAI,MACR,mKACD;CAGH,MAAM,iBAAsB;CAC5B,MAAM,MAAM,mBAAmB;CAC/B,MAAM,YAAY,aAAa,IAAI,WAAW,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,QAAO,aAAa,OAAO;EACzB,GAAG;EACH,GAAG;EACH,GAAG,IAAI;EACP,WAAW,GAAG,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"}
1	+ {"version":3,"file":"PopoverTarget.mjs","names":[],"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,gBAAgB,SAA+B,UAAU;CACpE,MAAM,EAAE,UAAU,SAAS,WAAW,KAAK,GAAG,WAAW,SACvD,iBACA,cACA,MACD;CAED,MAAM,QAAQ,sBAAsB,SAAS;AAC7C,KAAI,CAAC,MACH,OAAM,IAAI,MACR,mKACD;CAGH,MAAM,iBAAsB;CAC5B,MAAM,MAAM,mBAAmB;CAC/B,MAAM,YAAY,aAAa,IAAI,WAAW,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,QAAO,aAAa,OAAO;EACzB,GAAG;EACH,GAAG;EACH,GAAG,IAAI;EACP,WAAW,GAAG,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/esm/components/Radio/Radio.mjs CHANGED Viewed

@@ -66,7 +66,7 @@ const Radio = 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);

package/esm/components/Radio/Radio.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.mjs","names":["useId","classes"],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId } 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, InlineInputStylesNames } from '../../utils/InlineInput';\nimport { RadioCard } from './RadioCard/RadioCard';\nimport { RadioGroup, RadioGroupContext } from './RadioGroup/RadioGroup';\nimport { RadioIcon, RadioIconProps } from './RadioIcon';\nimport { RadioIndicator } from './RadioIndicator/RadioIndicator';\nimport classes from './Radio.module.css';\n\nexport type RadioVariant = 'filled' \| 'outline';\nexport type RadioStylesNames = InlineInputStylesNames \| 'inner' \| 'radio' \| 'icon';\nexport type RadioCssVariables = {\n root:\n \| '--radio-size'\n \| '--radio-radius'\n \| '--radio-color'\n \| '--radio-icon-color'\n \| '--radio-icon-size';\n};\n\nexport interface RadioProps\n extends BoxProps, StylesApiProps<RadioFactory>, ElementProps<'input', 'size' \| 'children'> {\n /** Content of the `label` associated with the radio /\n label?: React.ReactNode;\n\n /* Key of theme.colors or any valid CSS color to set radio 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 /* A component that replaces the default radio icon (centered dot) /\n icon?: React.FC<RadioIconProps>;\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 displayed below the label /\n description?: React.ReactNode;\n\n /* Error displayed below the label /\n error?: React.ReactNode;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' /\n radius?: MantineRadius;\n\n /* Assigns ref of the root element /\n rootRef?: React.Ref<HTMLDivElement>;\n\n /* Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting /\n iconColor?: MantineColor;\n\n /* If set, adjusts text color based on background color for `filled` variant /\n autoContrast?: boolean;\n\n /* If set, applies error styles to the radio when `error` prop is set @default true */\n withErrorStyles?: boolean;\n}\n\nexport type RadioFactory = Factory<{\n props: RadioProps;\n ref: HTMLInputElement;\n stylesNames: RadioStylesNames;\n vars: RadioCssVariables;\n variant: RadioVariant;\n staticComponents: {\n Group: typeof RadioGroup;\n Card: typeof RadioCard;\n Indicator: typeof RadioIndicator;\n };\n}>;\n\nconst defaultProps = {\n labelPosition: 'right',\n withErrorStyles: true,\n} satisfies Partial<RadioProps>;\n\nconst varsResolver = createVarsResolver<RadioFactory>(\n (theme, { size, radius, color, 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 '--radio-size': getSize(size, 'radio-size'),\n '--radio-radius': radius === undefined ? undefined : getRadius(radius),\n '--radio-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n '--radio-icon-color': iconColor\n ? getThemeColor(iconColor, theme)\n : getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n '--radio-icon-size': getSize(size, 'radio-icon-size'),\n },\n };\n }\n);\n\nexport const Radio = factory<RadioFactory>((_props) => {\n const props = useProps('Radio', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n id,\n size,\n label,\n labelPosition,\n description,\n error,\n radius,\n color,\n variant,\n disabled,\n wrapperProps,\n icon: Icon = RadioIcon,\n rootRef,\n iconColor,\n onChange,\n mod,\n attributes,\n withErrorStyles,\n checked,\n ...others\n } = props;\n\n const getStyles = useStyles<RadioFactory>({\n name: 'Radio',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const ctx = use(RadioGroupContext);\n\n const contextSize = ctx?.size ?? size;\n const componentSize = props.size ? size : contextSize;\n\n const { styleProps, rest } = extractStyleProps(others);\n const uuid = useId(id);\n\n const contextChecked = ctx ? ctx.value === rest.value : undefined;\n\n const withContextProps = {\n checked: contextChecked ?? checked,\n name: ~~ctx?.~~name ?? ~~rest.~~name,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n ctx?.onChange(event);\n onChange?.(event);\n },\n disabled: ctx?.disabled ?? disabled,\n };\n\n return (\n <InlineInput\n {...getStyles('root')}\n __staticSelector=\"Radio\"\n __stylesApiProps={props}\n id={uuid}\n size={componentSize}\n labelPosition={labelPosition}\n label={label}\n description={description}\n error={error}\n disabled={withContextProps.disabled}\n classNames={classNames}\n styles={styles}\n unstyled={unstyled}\n data-checked={(contextChecked ?? checked) \|\| undefined}\n variant={variant}\n ref={rootRef}\n mod={mod}\n attributes={attributes}\n {...styleProps}\n {...wrapperProps}\n >\n <Box {...getStyles('inner')} mod={{ 'label-position': labelPosition }}>\n <Box\n {...getStyles('radio', { focusable: true, variant })}\n {...rest}\n {...withContextProps}\n component=\"input\"\n mod={{ error: !!error, 'with-error-styles': withErrorStyles }}\n id={uuid}\n type=\"radio\"\n />\n <Icon {...getStyles('icon')} aria-hidden />\n </Box>\n </InlineInput>\n );\n});\n\nRadio.classes = classes;\nRadio.varsResolver = varsResolver;\nRadio.displayName = '@mantine/core/Radio';\nRadio.Group = RadioGroup;\nRadio.Card = RadioCard;\nRadio.Indicator = RadioIndicator;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiGA,MAAM,eAAe;CACnB,eAAe;CACf,iBAAiB;CAClB;AAED,MAAM,eAAe,oBAClB,OAAO,EAAE,MAAM,QAAQ,OAAO,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAc,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,MAAM;EACJ,gBAAgB,QAAQ,MAAM,aAAa;EAC3C,kBAAkB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;EACtE,iBAAiB,YAAY,YAAY,eAAe,cAAc,OAAO,MAAM;EACnF,sBAAsB,YAClB,cAAc,WAAW,MAAM,GAC/B,qBAAqB,cAAc,MAAM,GACvC,iBAAiB;GAAE;GAAO;GAAO;GAAc,CAAC,GAChD,KAAA;EACN,qBAAqB,QAAQ,MAAM,kBAAkB;EACtD,EACF;EAEJ;AAED,MAAa,QAAQ,SAAuB,WAAW;CACrD,MAAM,QAAQ,SAAS,SAAS,cAAc,OAAO;CACrD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,IACA,MACA,OACA,eACA,aACA,OACA,QACA,OACA,SACA,UACA,cACA,MAAM,OAAO,WACb,SACA,WACA,UACA,KACA,YACA,iBACA,SACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAwB;EACxC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,MAAM,IAAI,kBAAkB;CAElC,MAAM,cAAc,KAAK,QAAQ;CACjC,MAAM,gBAAgB,MAAM,OAAO,OAAO;CAE1C,MAAM,EAAE,YAAY,SAAS,kBAAkB,OAAO;CACtD,MAAM,OAAOA,QAAM,GAAG;CAEtB,MAAM,iBAAiB,MAAM,IAAI,UAAU,KAAK,QAAQ,KAAA;CAExD,MAAM,mBAAmB;EACvB,SAAS,kBAAkB;EAC3B,MAAM,KAAK,QAAQ,KAAK;EACxB,WAAW,UAA+C;AACxD,QAAK,SAAS,MAAM;AACpB,cAAW,MAAM;;EAEnB,UAAU,KAAK,YAAY;EAC5B;AAED,QACE,oBAAC,aAAD;EACE,GAAI,UAAU,OAAO;EACrB,kBAAiB;EACjB,kBAAkB;EAClB,IAAI;EACJ,MAAM;EACS;EACR;EACM;EACN;EACP,UAAU,iBAAiB;EACf;EACJ;EACE;EACV,iBAAe,kBAAkB,YAAY,KAAA;EACpC;EACT,KAAK;EACA;EACO;EACZ,GAAI;EACJ,GAAI;YAEJ,qBAAC,KAAD;GAAK,GAAI,UAAU,QAAQ;GAAE,KAAK,EAAE,kBAAkB,eAAe;aAArE,CACE,oBAAC,KAAD;IACE,GAAI,UAAU,SAAS;KAAE,WAAW;KAAM;KAAS,CAAC;IACpD,GAAI;IACJ,GAAI;IACJ,WAAU;IACV,KAAK;KAAE,OAAO,CAAC,CAAC;KAAO,qBAAqB;KAAiB;IAC7D,IAAI;IACJ,MAAK;IACL,CAAA,EACF,oBAAC,MAAD;IAAM,GAAI,UAAU,OAAO;IAAE,eAAA;IAAc,CAAA,CACvC;;EACM,CAAA;EAEhB;AAEF,MAAM,UAAUC;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,QAAQ;AACd,MAAM,OAAO;AACb,MAAM,YAAY"}
1	+ {"version":3,"file":"Radio.mjs","names":["useId","classes"],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId } 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, InlineInputStylesNames } from '../../utils/InlineInput';\nimport { RadioCard } from './RadioCard/RadioCard';\nimport { RadioGroup, RadioGroupContext } from './RadioGroup/RadioGroup';\nimport { RadioIcon, RadioIconProps } from './RadioIcon';\nimport { RadioIndicator } from './RadioIndicator/RadioIndicator';\nimport classes from './Radio.module.css';\n\nexport type RadioVariant = 'filled' \| 'outline';\nexport type RadioStylesNames = InlineInputStylesNames \| 'inner' \| 'radio' \| 'icon';\nexport type RadioCssVariables = {\n root:\n \| '--radio-size'\n \| '--radio-radius'\n \| '--radio-color'\n \| '--radio-icon-color'\n \| '--radio-icon-size';\n};\n\nexport interface RadioProps\n extends BoxProps, StylesApiProps<RadioFactory>, ElementProps<'input', 'size' \| 'children'> {\n /** Content of the `label` associated with the radio /\n label?: React.ReactNode;\n\n /* Key of theme.colors or any valid CSS color to set radio 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 /* A component that replaces the default radio icon (centered dot) /\n icon?: React.FC<RadioIconProps>;\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 displayed below the label /\n description?: React.ReactNode;\n\n /* Error displayed below the label /\n error?: React.ReactNode;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' /\n radius?: MantineRadius;\n\n /* Assigns ref of the root element /\n rootRef?: React.Ref<HTMLDivElement>;\n\n /* Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting /\n iconColor?: MantineColor;\n\n /* If set, adjusts text color based on background color for `filled` variant /\n autoContrast?: boolean;\n\n /* If set, applies error styles to the radio when `error` prop is set @default true */\n withErrorStyles?: boolean;\n}\n\nexport type RadioFactory = Factory<{\n props: RadioProps;\n ref: HTMLInputElement;\n stylesNames: RadioStylesNames;\n vars: RadioCssVariables;\n variant: RadioVariant;\n staticComponents: {\n Group: typeof RadioGroup;\n Card: typeof RadioCard;\n Indicator: typeof RadioIndicator;\n };\n}>;\n\nconst defaultProps = {\n labelPosition: 'right',\n withErrorStyles: true,\n} satisfies Partial<RadioProps>;\n\nconst varsResolver = createVarsResolver<RadioFactory>(\n (theme, { size, radius, color, 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 '--radio-size': getSize(size, 'radio-size'),\n '--radio-radius': radius === undefined ? undefined : getRadius(radius),\n '--radio-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n '--radio-icon-color': iconColor\n ? getThemeColor(iconColor, theme)\n : getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n '--radio-icon-size': getSize(size, 'radio-icon-size'),\n },\n };\n }\n);\n\nexport const Radio = factory<RadioFactory>((_props) => {\n const props = useProps('Radio', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n id,\n size,\n label,\n labelPosition,\n description,\n error,\n radius,\n color,\n variant,\n disabled,\n wrapperProps,\n icon: Icon = RadioIcon,\n rootRef,\n iconColor,\n onChange,\n mod,\n attributes,\n withErrorStyles,\n checked,\n ...others\n } = props;\n\n const getStyles = useStyles<RadioFactory>({\n name: 'Radio',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const ctx = use(RadioGroupContext);\n\n const contextSize = ctx?.size ?? size;\n const componentSize = props.size ? size : contextSize;\n\n const { styleProps, rest } = extractStyleProps(others);\n const uuid = useId(id);\n\n const contextChecked = ctx ? ctx.value === rest.value : undefined;\n\n const withContextProps = {\n checked: contextChecked ?? checked,\n name: rest.name ?? ctx?.name,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n ctx?.onChange(event);\n onChange?.(event);\n },\n disabled: ctx?.disabled ?? disabled,\n };\n\n return (\n <InlineInput\n {...getStyles('root')}\n __staticSelector=\"Radio\"\n __stylesApiProps={props}\n id={uuid}\n size={componentSize}\n labelPosition={labelPosition}\n label={label}\n description={description}\n error={error}\n disabled={withContextProps.disabled}\n classNames={classNames}\n styles={styles}\n unstyled={unstyled}\n data-checked={(contextChecked ?? checked) \|\| undefined}\n variant={variant}\n ref={rootRef}\n mod={mod}\n attributes={attributes}\n {...styleProps}\n {...wrapperProps}\n >\n <Box {...getStyles('inner')} mod={{ 'label-position': labelPosition }}>\n <Box\n {...getStyles('radio', { focusable: true, variant })}\n {...rest}\n {...withContextProps}\n component=\"input\"\n mod={{ error: !!error, 'with-error-styles': withErrorStyles }}\n id={uuid}\n type=\"radio\"\n />\n <Icon {...getStyles('icon')} aria-hidden />\n </Box>\n </InlineInput>\n );\n});\n\nRadio.classes = classes;\nRadio.varsResolver = varsResolver;\nRadio.displayName = '@mantine/core/Radio';\nRadio.Group = RadioGroup;\nRadio.Card = RadioCard;\nRadio.Indicator = RadioIndicator;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiGA,MAAM,eAAe;CACnB,eAAe;CACf,iBAAiB;CAClB;AAED,MAAM,eAAe,oBAClB,OAAO,EAAE,MAAM,QAAQ,OAAO,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAc,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,MAAM;EACJ,gBAAgB,QAAQ,MAAM,aAAa;EAC3C,kBAAkB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;EACtE,iBAAiB,YAAY,YAAY,eAAe,cAAc,OAAO,MAAM;EACnF,sBAAsB,YAClB,cAAc,WAAW,MAAM,GAC/B,qBAAqB,cAAc,MAAM,GACvC,iBAAiB;GAAE;GAAO;GAAO;GAAc,CAAC,GAChD,KAAA;EACN,qBAAqB,QAAQ,MAAM,kBAAkB;EACtD,EACF;EAEJ;AAED,MAAa,QAAQ,SAAuB,WAAW;CACrD,MAAM,QAAQ,SAAS,SAAS,cAAc,OAAO;CACrD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,IACA,MACA,OACA,eACA,aACA,OACA,QACA,OACA,SACA,UACA,cACA,MAAM,OAAO,WACb,SACA,WACA,UACA,KACA,YACA,iBACA,SACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAwB;EACxC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,MAAM,IAAI,kBAAkB;CAElC,MAAM,cAAc,KAAK,QAAQ;CACjC,MAAM,gBAAgB,MAAM,OAAO,OAAO;CAE1C,MAAM,EAAE,YAAY,SAAS,kBAAkB,OAAO;CACtD,MAAM,OAAOA,QAAM,GAAG;CAEtB,MAAM,iBAAiB,MAAM,IAAI,UAAU,KAAK,QAAQ,KAAA;CAExD,MAAM,mBAAmB;EACvB,SAAS,kBAAkB;EAC3B,MAAM,KAAK,QAAQ,KAAK;EACxB,WAAW,UAA+C;AACxD,QAAK,SAAS,MAAM;AACpB,cAAW,MAAM;;EAEnB,UAAU,KAAK,YAAY;EAC5B;AAED,QACE,oBAAC,aAAD;EACE,GAAI,UAAU,OAAO;EACrB,kBAAiB;EACjB,kBAAkB;EAClB,IAAI;EACJ,MAAM;EACS;EACR;EACM;EACN;EACP,UAAU,iBAAiB;EACf;EACJ;EACE;EACV,iBAAe,kBAAkB,YAAY,KAAA;EACpC;EACT,KAAK;EACA;EACO;EACZ,GAAI;EACJ,GAAI;YAEJ,qBAAC,KAAD;GAAK,GAAI,UAAU,QAAQ;GAAE,KAAK,EAAE,kBAAkB,eAAe;aAArE,CACE,oBAAC,KAAD;IACE,GAAI,UAAU,SAAS;KAAE,WAAW;KAAM;KAAS,CAAC;IACpD,GAAI;IACJ,GAAI;IACJ,WAAU;IACV,KAAK;KAAE,OAAO,CAAC,CAAC;KAAO,qBAAqB;KAAiB;IAC7D,IAAI;IACJ,MAAK;IACL,CAAA,EACF,oBAAC,MAAD;IAAM,GAAI,UAAU,OAAO;IAAE,eAAA;IAAc,CAAA,CACvC;;EACM,CAAA;EAEhB;AAEF,MAAM,UAAUC;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,QAAQ;AACd,MAAM,OAAO;AACb,MAAM,YAAY"}