@coveord/plasma-mantine 52.27.4 → 53.0.0

package/dist/esm/components/date-range-picker/DateRangePickerInlineCalendar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"sourcesContent":["import {Center, Group, Space} from '@mantine/core';\nimport {DatePicker, DatePickerBaseProps} from '@mantine/dates';\nimport {useForm} from '@mantine/form';\n\nimport {Button} from '../button';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\nexport type DateRangePickerValue = [Date | null, Date | null];\nexport interface DateRangePickerInlineCalendarProps\n    extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n    /**\n     * Initial selected range\n     */\n    initialRange: DateRangePickerValue;\n    /**\n     * Function called when the user applies the new date range\n     *\n     * @param range the newly selected dates\n     */\n    onApply: (range: DateRangePickerValue) => void;\n    /**\n     * Function called when the user click on the cancel button\n     */\n    onCancel: () => void;\n    /**\n     * The presets to display\n     *\n     * @default {}\n     * @example\n     * {\n     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n     * }\n     */\n    presets?: Record<string, DateRangePickerPreset>;\n    /**\n     * Props for RangeCalendar displayed in the popover\n     */\n    rangeCalendarProps?: Omit<\n        DatePickerBaseProps,\n        'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'\n    >;\n}\n\nexport const DateRangePickerInlineCalendar = ({\n    initialRange,\n    onApply,\n    onCancel,\n    presets,\n    startProps,\n    endProps,\n    rangeCalendarProps,\n}: DateRangePickerInlineCalendarProps) => {\n    const form = useForm({\n        initialValues: {\n            dates: initialRange,\n        },\n    });\n    const calendarInputProps = form.getInputProps('dates');\n\n    const onCalendarApply = () => {\n        if (!form.values.dates[1]) {\n            form.values.dates[1] = form.values.dates[0]; // when date range is the same day\n        }\n        onApply(form.values.dates);\n    };\n\n    return (\n        <>\n            <Group\n                align=\"center\"\n                spacing=\"xs\"\n                grow\n                px=\"md\"\n                py=\"sm\"\n                sx={(theme) => ({\n                    borderBottom: `1px solid ${theme.colors.gray[2]}`,\n                })}\n            >\n                <EditableDateRangePicker {...calendarInputProps} startProps={startProps} endProps={endProps} />\n                {presets ? (\n                    <>\n                        <Space w=\"sm\" />\n                        <DateRangePickerPresetSelect presets={presets} {...calendarInputProps} />\n                    </>\n                ) : null}\n            </Group>\n\n            <Center py=\"sm\" px=\"md\">\n                <DatePicker\n                    numberOfColumns={2}\n                    type=\"range\"\n                    styles={{calendar: {cell: {textAlign: 'center'}}}}\n                    firstDayOfWeek={0}\n                    allowSingleDateInRange\n                    {...rangeCalendarProps}\n                    {...calendarInputProps}\n                />\n            </Center>\n\n            <Group\n                position=\"right\"\n                spacing=\"xs\"\n                px=\"md\"\n                py=\"sm\"\n                sx={(theme) => ({\n                    borderTop: `1px solid ${theme.colors.gray[2]}`,\n                })}\n            >\n                <Button variant=\"outline\" size=\"xs\" onClick={onCancel}>\n                    Cancel\n                </Button>\n                <Button size=\"xs\" onClick={onCalendarApply}>\n                    Apply\n                </Button>\n            </Group>\n        </>\n    );\n};\n"],"names":["Center","Group","Space","DatePicker","useForm","Button","DateRangePickerPresetSelect","EditableDateRangePicker","DateRangePickerInlineCalendar","initialRange","onApply","onCancel","presets","startProps","endProps","rangeCalendarProps","form","initialValues","dates","calendarInputProps","getInputProps","onCalendarApply","values","align","spacing","grow","px","py","sx","theme","borderBottom","colors","gray","w","numberOfColumns","type","styles","calendar","cell","textAlign","firstDayOfWeek","allowSingleDateInRange","position","borderTop","variant","size","onClick"],"mappings":";AAAA,SAAQA,MAAM,EAAEC,KAAK,EAAEC,KAAK,QAAO,gBAAgB;AACnD,SAAQC,UAAU,QAA4B,iBAAiB;AAC/D,SAAQC,OAAO,QAAO,gBAAgB;AAEtC,SAAQC,MAAM,QAAO,YAAY;AACjC,SAA+BC,2BAA2B,QAAO,gCAAgC;AACjG,SAAQC,uBAAuB,QAAqC,4BAA4B;AAuChG,OAAO,MAAMC,gCAAgC,CAAC,EAC1CC,YAAY,EACZC,OAAO,EACPC,QAAQ,EACRC,OAAO,EACPC,UAAU,EACVC,QAAQ,EACRC,kBAAkB,EACe;IACjC,MAAMC,OAAOZ,QAAQ;QACjBa,eAAe;YACXC,OAAOT;QACX;IACJ;IACA,MAAMU,qBAAqBH,KAAKI,aAAa,CAAC;IAE9C,MAAMC,kBAAkB;QACpB,IAAI,CAACL,KAAKM,MAAM,CAACJ,KAAK,CAAC,EAAE,EAAE;YACvBF,KAAKM,MAAM,CAACJ,KAAK,CAAC,EAAE,GAAGF,KAAKM,MAAM,CAACJ,KAAK,CAAC,EAAE,EAAE,kCAAkC;QACnF;QACAR,QAAQM,KAAKM,MAAM,CAACJ,KAAK;IAC7B;IAEA,qBACI;;0BACI,MAACjB;gBACGsB,OAAM;gBACNC,SAAQ;gBACRC,IAAI;gBACJC,IAAG;gBACHC,IAAG;gBACHC,IAAI,CAACC,QAAW,CAAA;wBACZC,cAAc,CAAC,UAAU,EAAED,MAAME,MAAM,CAACC,IAAI,CAAC,EAAE,CAAC,CAAC;oBACrD,CAAA;;kCAEA,KAACzB;wBAAyB,GAAGY,kBAAkB;wBAAEN,YAAYA;wBAAYC,UAAUA;;oBAClFF,wBACG;;0CACI,KAACV;gCAAM+B,GAAE;;0CACT,KAAC3B;gCAA4BM,SAASA;gCAAU,GAAGO,kBAAkB;;;yBAEzE;;;0BAGR,KAACnB;gBAAO2B,IAAG;gBAAKD,IAAG;0BACf,cAAA,KAACvB;oBACG+B,iBAAiB;oBACjBC,MAAK;oBACLC,QAAQ;wBAACC,UAAU;4BAACC,MAAM;gCAACC,WAAW;4BAAQ;wBAAC;oBAAC;oBAChDC,gBAAgB;oBAChBC,sBAAsB;oBACrB,GAAG1B,kBAAkB;oBACrB,GAAGI,kBAAkB;;;0BAI9B,MAAClB;gBACGyC,UAAS;gBACTlB,SAAQ;gBACRE,IAAG;gBACHC,IAAG;gBACHC,IAAI,CAACC,QAAW,CAAA;wBACZc,WAAW,CAAC,UAAU,EAAEd,MAAME,MAAM,CAACC,IAAI,CAAC,EAAE,CAAC,CAAC;oBAClD,CAAA;;kCAEA,KAAC3B;wBAAOuC,SAAQ;wBAAUC,MAAK;wBAAKC,SAASnC;kCAAU;;kCAGvD,KAACN;wBAAOwC,MAAK;wBAAKC,SAASzB;kCAAiB;;;;;;AAM5D,EAAE"}
+{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"sourcesContent":["import {Center, Group, Space} from '@mantine/core';\nimport {DatePicker, DatePickerBaseProps} from '@mantine/dates';\nimport {useForm} from '@mantine/form';\n\nimport {Button} from '../button';\nimport DateRangeClasses from './DateRange.module.css';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\nexport type DateRangePickerValue = [Date | null, Date | null];\nexport interface DateRangePickerInlineCalendarProps\n    extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n    /**\n     * Initial selected range\n     */\n    initialRange: DateRangePickerValue;\n    /**\n     * Function called when the user applies the new date range\n     *\n     * @param range the newly selected dates\n     */\n    onApply: (range: DateRangePickerValue) => void;\n    /**\n     * Function called when the user click on the cancel button\n     */\n    onCancel: () => void;\n    /**\n     * The presets to display\n     *\n     * @default {}\n     * @example\n     * {\n     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n     * }\n     */\n    presets?: Record<string, DateRangePickerPreset>;\n    /**\n     * Props for RangeCalendar displayed in the popover\n     */\n    rangeCalendarProps?: Omit<\n        DatePickerBaseProps,\n        'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'\n    >;\n}\n\nexport const DateRangePickerInlineCalendar = ({\n    initialRange,\n    onApply,\n    onCancel,\n    presets,\n    startProps,\n    endProps,\n    rangeCalendarProps,\n}: DateRangePickerInlineCalendarProps) => {\n    const form = useForm({\n        initialValues: {\n            dates: initialRange,\n        },\n    });\n    const calendarInputProps = form.getInputProps('dates');\n\n    const onCalendarApply = () => {\n        if (!form.values.dates[1]) {\n            form.values.dates[1] = form.values.dates[0]; // when date range is the same day\n        }\n        onApply(form.values.dates);\n    };\n\n    return (\n        <>\n            <Group align=\"center\" gap=\"xs\" grow px=\"md\" py=\"sm\" className={DateRangeClasses.picker}>\n                <EditableDateRangePicker\n                    value={calendarInputProps.value}\n                    {...calendarInputProps}\n                    startProps={startProps}\n                    endProps={endProps}\n                />\n                {presets ? (\n                    <>\n                        <Space w=\"sm\" />\n                        <DateRangePickerPresetSelect\n                            value={calendarInputProps.value}\n                            presets={presets}\n                            {...calendarInputProps}\n                            selectProps={{comboboxProps: {withinPortal: false}}}\n                        />\n                    </>\n                ) : null}\n            </Group>\n\n            <Center py=\"sm\" px=\"md\">\n                <DatePicker\n                    numberOfColumns={2}\n                    type=\"range\"\n                    styles={{day: {textAlign: 'center'}}}\n                    firstDayOfWeek={0}\n                    allowSingleDateInRange\n                    {...rangeCalendarProps}\n                    {...calendarInputProps}\n                />\n            </Center>\n\n            <Group justify=\"right\" gap=\"xs\" px=\"md\" py=\"sm\" className={DateRangeClasses.save}>\n                <Button variant=\"outline\" size=\"xs\" onClick={onCancel}>\n                    Cancel\n                </Button>\n                <Button size=\"xs\" onClick={onCalendarApply}>\n                    Apply\n                </Button>\n            </Group>\n        </>\n    );\n};\n"],"names":["Center","Group","Space","DatePicker","useForm","Button","DateRangeClasses","DateRangePickerPresetSelect","EditableDateRangePicker","DateRangePickerInlineCalendar","initialRange","onApply","onCancel","presets","startProps","endProps","rangeCalendarProps","form","initialValues","dates","calendarInputProps","getInputProps","onCalendarApply","values","align","gap","grow","px","py","className","picker","value","w","selectProps","comboboxProps","withinPortal","numberOfColumns","type","styles","day","textAlign","firstDayOfWeek","allowSingleDateInRange","justify","save","variant","size","onClick"],"mappings":";AAAA,SAAQA,MAAM,EAAEC,KAAK,EAAEC,KAAK,QAAO,gBAAgB;AACnD,SAAQC,UAAU,QAA4B,iBAAiB;AAC/D,SAAQC,OAAO,QAAO,gBAAgB;AAEtC,SAAQC,MAAM,QAAO,YAAY;AACjC,OAAOC,sBAAsB,yBAAyB;AACtD,SAA+BC,2BAA2B,QAAO,gCAAgC;AACjG,SAAQC,uBAAuB,QAAqC,4BAA4B;AAuChG,OAAO,MAAMC,gCAAgC,CAAC,EAC1CC,YAAY,EACZC,OAAO,EACPC,QAAQ,EACRC,OAAO,EACPC,UAAU,EACVC,QAAQ,EACRC,kBAAkB,EACe;IACjC,MAAMC,OAAOb,QAAQ;QACjBc,eAAe;YACXC,OAAOT;QACX;IACJ;IACA,MAAMU,qBAAqBH,KAAKI,aAAa,CAAC;IAE9C,MAAMC,kBAAkB;QACpB,IAAI,CAACL,KAAKM,MAAM,CAACJ,KAAK,CAAC,EAAE,EAAE;YACvBF,KAAKM,MAAM,CAACJ,KAAK,CAAC,EAAE,GAAGF,KAAKM,MAAM,CAACJ,KAAK,CAAC,EAAE,EAAE,kCAAkC;QACnF;QACAR,QAAQM,KAAKM,MAAM,CAACJ,KAAK;IAC7B;IAEA,qBACI;;0BACI,MAAClB;gBAAMuB,OAAM;gBAASC,KAAI;gBAAKC,IAAI;gBAACC,IAAG;gBAAKC,IAAG;gBAAKC,WAAWvB,iBAAiBwB,MAAM;;kCAClF,KAACtB;wBACGuB,OAAOX,mBAAmBW,KAAK;wBAC9B,GAAGX,kBAAkB;wBACtBN,YAAYA;wBACZC,UAAUA;;oBAEbF,wBACG;;0CACI,KAACX;gCAAM8B,GAAE;;0CACT,KAACzB;gCACGwB,OAAOX,mBAAmBW,KAAK;gCAC/BlB,SAASA;gCACR,GAAGO,kBAAkB;gCACtBa,aAAa;oCAACC,eAAe;wCAACC,cAAc;oCAAK;gCAAC;;;yBAG1D;;;0BAGR,KAACnC;gBAAO4B,IAAG;gBAAKD,IAAG;0BACf,cAAA,KAACxB;oBACGiC,iBAAiB;oBACjBC,MAAK;oBACLC,QAAQ;wBAACC,KAAK;4BAACC,WAAW;wBAAQ;oBAAC;oBACnCC,gBAAgB;oBAChBC,sBAAsB;oBACrB,GAAG1B,kBAAkB;oBACrB,GAAGI,kBAAkB;;;0BAI9B,MAACnB;gBAAM0C,SAAQ;gBAAQlB,KAAI;gBAAKE,IAAG;gBAAKC,IAAG;gBAAKC,WAAWvB,iBAAiBsC,IAAI;;kCAC5E,KAACvC;wBAAOwC,SAAQ;wBAAUC,MAAK;wBAAKC,SAASnC;kCAAU;;kCAGvD,KAACP;wBAAOyC,MAAK;wBAAKC,SAASzB;kCAAiB;;;;;;AAM5D,EAAE"}

package/dist/esm/components/date-range-picker/DateRangePickerPopoverCalendar.js

@@ -58,10 +58,8 @@ export const DateRangePickerPopoverCalendar = ({ presets, value, defaultValue, o
                         ref: ref,
                         type: "range",
                         styles: {
-                            calendar: {
-                                cell: {
-                                    textAlign: 'center'
-                                }
+                            day: {
+                                textAlign: 'center'
                             }
                         },
                         numberOfColumns: 2,

package/dist/esm/components/date-range-picker/DateRangePickerPopoverCalendar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPopoverCalendar.tsx"],"sourcesContent":["import {Group, Popover, Space} from '@mantine/core';\nimport {CalendarBaseProps, DatePicker} from '@mantine/dates';\nimport {useClickOutside, useUncontrolled} from '@mantine/hooks';\nimport {useState} from 'react';\n\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\ninterface DateRangePickerPopoverCalendarProps<T> extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n    /** Default value for uncontrolled input */\n    defaultValue?: DateRangePickerValue;\n    /** Value for controlled input */\n    value?: DateRangePickerValue;\n    /** onChange value for controlled input */\n    onChange?(value: DateRangePickerValue): void;\n    /**\n     * The presets to display\n     *\n     * @default {}\n     * @example\n     * {\n     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n     * }\n     */\n    presets?: Record<string, DateRangePickerPreset>;\n\n    /**\n     * Props for RangeCalendar\n     */\n    rangeCalendarProps?: Omit<\n        CalendarBaseProps,\n        'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'\n    >;\n}\n\nexport const DateRangePickerPopoverCalendar = <T extends unknown>({\n    presets,\n    value,\n    defaultValue,\n    onChange,\n    startProps,\n    endProps,\n    rangeCalendarProps,\n}: DateRangePickerPopoverCalendarProps<T>) => {\n    const [opened, setOpened] = useState(false);\n    const ref = useClickOutside(() => setOpened(false));\n\n    const [_value, handleChange] = useUncontrolled<DateRangePickerValue>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: [null, null],\n    });\n\n    const onCalendarChange = (dates: DateRangePickerValue) => {\n        handleChange?.(dates);\n        if (dates[1] !== null) {\n            setOpened(false);\n        }\n    };\n\n    return (\n        <>\n            <Group align=\"center\">\n                <EditableDateRangePicker\n                    value={_value}\n                    onChange={handleChange}\n                    onFocus={() => setOpened(true)}\n                    startProps={startProps}\n                    endProps={endProps}\n                />\n                {presets ? (\n                    <>\n                        <Space w=\"sm\" />\n                        <DateRangePickerPresetSelect presets={presets} value={_value} onChange={handleChange} />\n                    </>\n                ) : null}\n            </Group>\n\n            <Popover opened={opened} onChange={setOpened} trapFocus>\n                <Popover.Dropdown>\n                    <DatePicker\n                        ref={ref}\n                        type=\"range\"\n                        styles={{calendar: {cell: {textAlign: 'center'}}}}\n                        numberOfColumns={2}\n                        firstDayOfWeek={0}\n                        allowSingleDateInRange\n                        value={_value}\n                        onChange={onCalendarChange}\n                        {...rangeCalendarProps}\n                    />\n                </Popover.Dropdown>\n            </Popover>\n        </>\n    );\n};\n"],"names":["Group","Popover","Space","DatePicker","useClickOutside","useUncontrolled","useState","DateRangePickerPresetSelect","EditableDateRangePicker","DateRangePickerPopoverCalendar","presets","value","defaultValue","onChange","startProps","endProps","rangeCalendarProps","opened","setOpened","ref","_value","handleChange","finalValue","onCalendarChange","dates","align","onFocus","w","trapFocus","Dropdown","type","styles","calendar","cell","textAlign","numberOfColumns","firstDayOfWeek","allowSingleDateInRange"],"mappings":";AAAA,SAAQA,KAAK,EAAEC,OAAO,EAAEC,KAAK,QAAO,gBAAgB;AACpD,SAA2BC,UAAU,QAAO,iBAAiB;AAC7D,SAAQC,eAAe,EAAEC,eAAe,QAAO,iBAAiB;AAChE,SAAQC,QAAQ,QAAO,QAAQ;AAG/B,SAA+BC,2BAA2B,QAAO,gCAAgC;AACjG,SAAQC,uBAAuB,QAAqC,4BAA4B;AA8BhG,OAAO,MAAMC,iCAAiC,CAAoB,EAC9DC,OAAO,EACPC,KAAK,EACLC,YAAY,EACZC,QAAQ,EACRC,UAAU,EACVC,QAAQ,EACRC,kBAAkB,EACmB;IACrC,MAAM,CAACC,QAAQC,UAAU,GAAGZ,SAAS;IACrC,MAAMa,MAAMf,gBAAgB,IAAMc,UAAU;IAE5C,MAAM,CAACE,QAAQC,aAAa,GAAGhB,gBAAsC;QACjEM;QACAC;QACAC;QACAS,YAAY;YAAC;YAAM;SAAK;IAC5B;IAEA,MAAMC,mBAAmB,CAACC;QACtBH,eAAeG;QACf,IAAIA,KAAK,CAAC,EAAE,KAAK,MAAM;YACnBN,UAAU;QACd;IACJ;IAEA,qBACI;;0BACI,MAAClB;gBAAMyB,OAAM;;kCACT,KAACjB;wBACGG,OAAOS;wBACPP,UAAUQ;wBACVK,SAAS,IAAMR,UAAU;wBACzBJ,YAAYA;wBACZC,UAAUA;;oBAEbL,wBACG;;0CACI,KAACR;gCAAMyB,GAAE;;0CACT,KAACpB;gCAA4BG,SAASA;gCAASC,OAAOS;gCAAQP,UAAUQ;;;yBAE5E;;;0BAGR,KAACpB;gBAAQgB,QAAQA;gBAAQJ,UAAUK;gBAAWU,SAAS;0BACnD,cAAA,KAAC3B,QAAQ4B,QAAQ;8BACb,cAAA,KAAC1B;wBACGgB,KAAKA;wBACLW,MAAK;wBACLC,QAAQ;4BAACC,UAAU;gCAACC,MAAM;oCAACC,WAAW;gCAAQ;4BAAC;wBAAC;wBAChDC,iBAAiB;wBACjBC,gBAAgB;wBAChBC,sBAAsB;wBACtB1B,OAAOS;wBACPP,UAAUU;wBACT,GAAGP,kBAAkB;;;;;;AAM9C,EAAE"}
+{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPopoverCalendar.tsx"],"sourcesContent":["import {Group, Popover, Space} from '@mantine/core';\nimport {CalendarBaseProps, DatePicker} from '@mantine/dates';\nimport {useClickOutside, useUncontrolled} from '@mantine/hooks';\nimport {useState} from 'react';\n\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\ninterface DateRangePickerPopoverCalendarProps<T> extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n    /** Default value for uncontrolled input */\n    defaultValue?: DateRangePickerValue;\n    /** Value for controlled input */\n    value?: DateRangePickerValue;\n    /** onChange value for controlled input */\n    onChange?(value: DateRangePickerValue): void;\n    /**\n     * The presets to display\n     *\n     * @default {}\n     * @example\n     * {\n     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n     * }\n     */\n    presets?: Record<string, DateRangePickerPreset>;\n\n    /**\n     * Props for RangeCalendar\n     */\n    rangeCalendarProps?: Omit<\n        CalendarBaseProps,\n        'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'\n    >;\n}\n\nexport const DateRangePickerPopoverCalendar = <T extends unknown>({\n    presets,\n    value,\n    defaultValue,\n    onChange,\n    startProps,\n    endProps,\n    rangeCalendarProps,\n}: DateRangePickerPopoverCalendarProps<T>) => {\n    const [opened, setOpened] = useState(false);\n    const ref = useClickOutside(() => setOpened(false));\n\n    const [_value, handleChange] = useUncontrolled<DateRangePickerValue>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: [null, null],\n    });\n\n    const onCalendarChange = (dates: DateRangePickerValue) => {\n        handleChange?.(dates);\n        if (dates[1] !== null) {\n            setOpened(false);\n        }\n    };\n\n    return (\n        <>\n            <Group align=\"center\">\n                <EditableDateRangePicker\n                    value={_value}\n                    onChange={handleChange}\n                    onFocus={() => setOpened(true)}\n                    startProps={startProps}\n                    endProps={endProps}\n                />\n                {presets ? (\n                    <>\n                        <Space w=\"sm\" />\n                        <DateRangePickerPresetSelect presets={presets} value={_value} onChange={handleChange} />\n                    </>\n                ) : null}\n            </Group>\n\n            <Popover opened={opened} onChange={setOpened} trapFocus>\n                <Popover.Dropdown>\n                    <DatePicker\n                        ref={ref}\n                        type=\"range\"\n                        styles={{day: {textAlign: 'center'}}}\n                        numberOfColumns={2}\n                        firstDayOfWeek={0}\n                        allowSingleDateInRange\n                        value={_value}\n                        onChange={onCalendarChange}\n                        {...rangeCalendarProps}\n                    />\n                </Popover.Dropdown>\n            </Popover>\n        </>\n    );\n};\n"],"names":["Group","Popover","Space","DatePicker","useClickOutside","useUncontrolled","useState","DateRangePickerPresetSelect","EditableDateRangePicker","DateRangePickerPopoverCalendar","presets","value","defaultValue","onChange","startProps","endProps","rangeCalendarProps","opened","setOpened","ref","_value","handleChange","finalValue","onCalendarChange","dates","align","onFocus","w","trapFocus","Dropdown","type","styles","day","textAlign","numberOfColumns","firstDayOfWeek","allowSingleDateInRange"],"mappings":";AAAA,SAAQA,KAAK,EAAEC,OAAO,EAAEC,KAAK,QAAO,gBAAgB;AACpD,SAA2BC,UAAU,QAAO,iBAAiB;AAC7D,SAAQC,eAAe,EAAEC,eAAe,QAAO,iBAAiB;AAChE,SAAQC,QAAQ,QAAO,QAAQ;AAG/B,SAA+BC,2BAA2B,QAAO,gCAAgC;AACjG,SAAQC,uBAAuB,QAAqC,4BAA4B;AA8BhG,OAAO,MAAMC,iCAAiC,CAAoB,EAC9DC,OAAO,EACPC,KAAK,EACLC,YAAY,EACZC,QAAQ,EACRC,UAAU,EACVC,QAAQ,EACRC,kBAAkB,EACmB;IACrC,MAAM,CAACC,QAAQC,UAAU,GAAGZ,SAAS;IACrC,MAAMa,MAAMf,gBAAgB,IAAMc,UAAU;IAE5C,MAAM,CAACE,QAAQC,aAAa,GAAGhB,gBAAsC;QACjEM;QACAC;QACAC;QACAS,YAAY;YAAC;YAAM;SAAK;IAC5B;IAEA,MAAMC,mBAAmB,CAACC;QACtBH,eAAeG;QACf,IAAIA,KAAK,CAAC,EAAE,KAAK,MAAM;YACnBN,UAAU;QACd;IACJ;IAEA,qBACI;;0BACI,MAAClB;gBAAMyB,OAAM;;kCACT,KAACjB;wBACGG,OAAOS;wBACPP,UAAUQ;wBACVK,SAAS,IAAMR,UAAU;wBACzBJ,YAAYA;wBACZC,UAAUA;;oBAEbL,wBACG;;0CACI,KAACR;gCAAMyB,GAAE;;0CACT,KAACpB;gCAA4BG,SAASA;gCAASC,OAAOS;gCAAQP,UAAUQ;;;yBAE5E;;;0BAGR,KAACpB;gBAAQgB,QAAQA;gBAAQJ,UAAUK;gBAAWU,SAAS;0BACnD,cAAA,KAAC3B,QAAQ4B,QAAQ;8BACb,cAAA,KAAC1B;wBACGgB,KAAKA;wBACLW,MAAK;wBACLC,QAAQ;4BAACC,KAAK;gCAACC,WAAW;4BAAQ;wBAAC;wBACnCC,iBAAiB;wBACjBC,gBAAgB;wBAChBC,sBAAsB;wBACtBzB,OAAOS;wBACPP,UAAUU;wBACT,GAAGP,kBAAkB;;;;;;AAM9C,EAAE"}

package/dist/esm/components/date-range-picker/DateRangePickerPresetSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePickerPresetSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/DateRangePickerPresetSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,WAAW,EAAC,MAAM,eAAe,CAAC;AAG9D,OAAO,EAAC,oBAAoB,EAAC,MAAM,iCAAiC,CAAC;AAErE,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,oBAAoB,CAAC;CAC/B;AAED,UAAU,iCAAiC,CAAC,CAAC;IACzC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAC/C,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC;CAC3E;AAED,eAAO,MAAM,2BAA2B,kJA6CvC,CAAC"}
+{"version":3,"file":"DateRangePickerPresetSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/DateRangePickerPresetSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,WAAW,EAAC,MAAM,eAAe,CAAC;AAGhE,OAAO,EAAC,oBAAoB,EAAC,MAAM,iCAAiC,CAAC;AAErE,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,oBAAoB,CAAC;CAC/B;AAED,UAAU,iCAAiC,CAAC,CAAC;IACzC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAC/C,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC;CAC3E;AAED,eAAO,MAAM,2BAA2B,kJA6CvC,CAAC"}

package/dist/esm/components/date-range-picker/DateRangePickerPresetSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPresetSelect.tsx"],"sourcesContent":["import {Select, SelectItem, SelectProps} from '@mantine/core';\nimport dayjs from 'dayjs';\nimport {useEffect, useState} from 'react';\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\n\nexport interface DateRangePickerPreset {\n    label: string;\n    range: DateRangePickerValue;\n}\n\ninterface DateRangePickerPresetsSelectProps<T> {\n    presets: Record<string, DateRangePickerPreset>;\n    value: DateRangePickerValue;\n    onChange?(value: DateRangePickerValue): void;\n    selectProps?: Partial<Omit<SelectProps, 'data' | 'value' | 'onChange'>>;\n}\n\nexport const DateRangePickerPresetSelect = <T extends unknown>({\n    presets,\n    value,\n    onChange,\n    selectProps = {},\n}: DateRangePickerPresetsSelectProps<T>) => {\n    const selectData: SelectItem[] = Object.entries(presets).map(([val, {label}]) => ({value: val, label}));\n\n    const getSelectedPreset = () => {\n        if (value[0] !== null && value[1] !== null && dayjs(value[0]).unix() !== dayjs(value[1]).unix()) {\n            const selected = Object.entries(presets).find(\n                ([id, {range}]) => dayjs(range[0]!).isSame(value[0]) && dayjs(value[1]!).isSame(value[1]!),\n            );\n            if (selected) {\n                return selected[0];\n            }\n        }\n        return null;\n    };\n\n    const [selectedPreset, setSelectedPreset] = useState<string | null>(getSelectedPreset());\n\n    useEffect(() => {\n        const newPreset = getSelectedPreset();\n        if (newPreset !== selectedPreset) {\n            setSelectedPreset(newPreset);\n        }\n    }, [value]);\n\n    const onChangePreset = (presetId: keyof typeof presets) => {\n        const range = presets[presetId].range as any;\n        onChange?.(range);\n    };\n\n    return (\n        <Select\n            label=\"Date range\"\n            placeholder=\"Select a date range\"\n            {...selectProps}\n            value={selectedPreset}\n            onChange={onChangePreset}\n            data={selectData}\n            maxDropdownHeight={240}\n        />\n    );\n};\n"],"names":["Select","dayjs","useEffect","useState","DateRangePickerPresetSelect","presets","value","onChange","selectProps","selectData","Object","entries","map","val","label","getSelectedPreset","unix","selected","find","id","range","isSame","selectedPreset","setSelectedPreset","newPreset","onChangePreset","presetId","placeholder","data","maxDropdownHeight"],"mappings":";AAAA,SAAQA,MAAM,QAAgC,gBAAgB;AAC9D,OAAOC,WAAW,QAAQ;AAC1B,SAAQC,SAAS,EAAEC,QAAQ,QAAO,QAAQ;AAe1C,OAAO,MAAMC,8BAA8B,CAAoB,EAC3DC,OAAO,EACPC,KAAK,EACLC,QAAQ,EACRC,cAAc,CAAC,CAAC,EACmB;IACnC,MAAMC,aAA2BC,OAAOC,OAAO,CAACN,SAASO,GAAG,CAAC,CAAC,CAACC,KAAK,EAACC,KAAK,EAAC,CAAC,GAAM,CAAA;YAACR,OAAOO;YAAKC;QAAK,CAAA;IAEpG,MAAMC,oBAAoB;QACtB,IAAIT,KAAK,CAAC,EAAE,KAAK,QAAQA,KAAK,CAAC,EAAE,KAAK,QAAQL,MAAMK,KAAK,CAAC,EAAE,EAAEU,IAAI,OAAOf,MAAMK,KAAK,CAAC,EAAE,EAAEU,IAAI,IAAI;YAC7F,MAAMC,WAAWP,OAAOC,OAAO,CAACN,SAASa,IAAI,CACzC,CAAC,CAACC,IAAI,EAACC,KAAK,EAAC,CAAC,GAAKnB,MAAMmB,KAAK,CAAC,EAAE,EAAGC,MAAM,CAACf,KAAK,CAAC,EAAE,KAAKL,MAAMK,KAAK,CAAC,EAAE,EAAGe,MAAM,CAACf,KAAK,CAAC,EAAE;YAE5F,IAAIW,UAAU;gBACV,OAAOA,QAAQ,CAAC,EAAE;YACtB;QACJ;QACA,OAAO;IACX;IAEA,MAAM,CAACK,gBAAgBC,kBAAkB,GAAGpB,SAAwBY;IAEpEb,UAAU;QACN,MAAMsB,YAAYT;QAClB,IAAIS,cAAcF,gBAAgB;YAC9BC,kBAAkBC;QACtB;IACJ,GAAG;QAAClB;KAAM;IAEV,MAAMmB,iBAAiB,CAACC;QACpB,MAAMN,QAAQf,OAAO,CAACqB,SAAS,CAACN,KAAK;QACrCb,WAAWa;IACf;IAEA,qBACI,KAACpB;QACGc,OAAM;QACNa,aAAY;QACX,GAAGnB,WAAW;QACfF,OAAOgB;QACPf,UAAUkB;QACVG,MAAMnB;QACNoB,mBAAmB;;AAG/B,EAAE"}
+{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPresetSelect.tsx"],"sourcesContent":["import {ComboboxItem, Select, SelectProps} from '@mantine/core';\nimport dayjs from 'dayjs';\nimport {useEffect, useState} from 'react';\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\n\nexport interface DateRangePickerPreset {\n    label: string;\n    range: DateRangePickerValue;\n}\n\ninterface DateRangePickerPresetsSelectProps<T> {\n    presets: Record<string, DateRangePickerPreset>;\n    value: DateRangePickerValue;\n    onChange?(value: DateRangePickerValue): void;\n    selectProps?: Partial<Omit<SelectProps, 'data' | 'value' | 'onChange'>>;\n}\n\nexport const DateRangePickerPresetSelect = <T extends unknown>({\n    presets,\n    value,\n    onChange,\n    selectProps = {},\n}: DateRangePickerPresetsSelectProps<T>) => {\n    const selectData: ComboboxItem[] = Object.entries(presets).map(([val, {label}]) => ({value: val, label}));\n\n    const getSelectedPreset = () => {\n        if (value[0] !== null && value[1] !== null && dayjs(value[0]).unix() !== dayjs(value[1]).unix()) {\n            const selected = Object.entries(presets).find(\n                ([id, {range}]) => dayjs(range[0]!).isSame(value[0]) && dayjs(value[1]!).isSame(value[1]!),\n            );\n            if (selected) {\n                return selected[0];\n            }\n        }\n        return null;\n    };\n\n    const [selectedPreset, setSelectedPreset] = useState<string | null>(getSelectedPreset());\n\n    useEffect(() => {\n        const newPreset = getSelectedPreset();\n        if (newPreset !== selectedPreset) {\n            setSelectedPreset(newPreset);\n        }\n    }, [value]);\n\n    const onChangePreset = (presetId: keyof typeof presets) => {\n        const range = presets[presetId].range as any;\n        onChange?.(range);\n    };\n\n    return (\n        <Select\n            label=\"Date range\"\n            placeholder=\"Select a date range\"\n            {...selectProps}\n            value={selectedPreset}\n            onChange={onChangePreset}\n            data={selectData}\n            maxDropdownHeight={240}\n        />\n    );\n};\n"],"names":["Select","dayjs","useEffect","useState","DateRangePickerPresetSelect","presets","value","onChange","selectProps","selectData","Object","entries","map","val","label","getSelectedPreset","unix","selected","find","id","range","isSame","selectedPreset","setSelectedPreset","newPreset","onChangePreset","presetId","placeholder","data","maxDropdownHeight"],"mappings":";AAAA,SAAsBA,MAAM,QAAoB,gBAAgB;AAChE,OAAOC,WAAW,QAAQ;AAC1B,SAAQC,SAAS,EAAEC,QAAQ,QAAO,QAAQ;AAe1C,OAAO,MAAMC,8BAA8B,CAAoB,EAC3DC,OAAO,EACPC,KAAK,EACLC,QAAQ,EACRC,cAAc,CAAC,CAAC,EACmB;IACnC,MAAMC,aAA6BC,OAAOC,OAAO,CAACN,SAASO,GAAG,CAAC,CAAC,CAACC,KAAK,EAACC,KAAK,EAAC,CAAC,GAAM,CAAA;YAACR,OAAOO;YAAKC;QAAK,CAAA;IAEtG,MAAMC,oBAAoB;QACtB,IAAIT,KAAK,CAAC,EAAE,KAAK,QAAQA,KAAK,CAAC,EAAE,KAAK,QAAQL,MAAMK,KAAK,CAAC,EAAE,EAAEU,IAAI,OAAOf,MAAMK,KAAK,CAAC,EAAE,EAAEU,IAAI,IAAI;YAC7F,MAAMC,WAAWP,OAAOC,OAAO,CAACN,SAASa,IAAI,CACzC,CAAC,CAACC,IAAI,EAACC,KAAK,EAAC,CAAC,GAAKnB,MAAMmB,KAAK,CAAC,EAAE,EAAGC,MAAM,CAACf,KAAK,CAAC,EAAE,KAAKL,MAAMK,KAAK,CAAC,EAAE,EAAGe,MAAM,CAACf,KAAK,CAAC,EAAE;YAE5F,IAAIW,UAAU;gBACV,OAAOA,QAAQ,CAAC,EAAE;YACtB;QACJ;QACA,OAAO;IACX;IAEA,MAAM,CAACK,gBAAgBC,kBAAkB,GAAGpB,SAAwBY;IAEpEb,UAAU;QACN,MAAMsB,YAAYT;QAClB,IAAIS,cAAcF,gBAAgB;YAC9BC,kBAAkBC;QACtB;IACJ,GAAG;QAAClB;KAAM;IAEV,MAAMmB,iBAAiB,CAACC;QACpB,MAAMN,QAAQf,OAAO,CAACqB,SAAS,CAACN,KAAK;QACrCb,WAAWa;IACf;IAEA,qBACI,KAACpB;QACGc,OAAM;QACNa,aAAY;QACX,GAAGnB,WAAW;QACfF,OAAOgB;QACPf,UAAUkB;QACVG,MAAMnB;QACNoB,mBAAmB;;AAG/B,EAAE"}

package/dist/esm/components/date-range-picker/EditableDateRangePicker.d.ts

@@ -1,11 +1,9 @@
 import { DatePickerProps } from '@mantine/dates';
-import { ReactNode } from 'react';
 import { DateRangePickerValue } from './DateRangePickerInlineCalendar';
 export interface EditableDateRangePickerProps {
     value: DateRangePickerValue;
     onChange?(value: DateRangePickerValue): void;
     onFocus?: () => void;
-    separator?: ReactNode;
     /**
      * Props for the start input
      */
@@ -15,5 +13,5 @@ export interface EditableDateRangePickerProps {
      */
     endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;
 }
-export declare const EditableDateRangePicker: ({ value, onChange, onFocus, separator, startProps, endProps, }: EditableDateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EditableDateRangePicker: ({ value, onChange, onFocus, startProps, endProps, }: EditableDateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EditableDateRangePicker.d.ts.map

package/dist/esm/components/date-range-picker/EditableDateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableDateRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/EditableDateRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAChC,OAAO,EAAC,oBAAoB,EAAC,MAAM,iCAAiC,CAAC;AAErE,MAAM,WAAW,4BAA4B;IACzC,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;IAC9E;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;CAC/E;AAED,eAAO,MAAM,uBAAuB,mEAOjC,4BAA4B,4CA+B9B,CAAC"}
+{"version":3,"file":"EditableDateRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/EditableDateRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAC,oBAAoB,EAAC,MAAM,iCAAiC,CAAC;AAErE,MAAM,WAAW,4BAA4B;IACzC,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;IAC9E;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;CAC/E;AAED,eAAO,MAAM,uBAAuB,wDAMjC,4BAA4B,4CA8B9B,CAAC"}

package/dist/esm/components/date-range-picker/EditableDateRangePicker.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { DateInput } from '@mantine/dates';
 import dayjs from 'dayjs';
-export const EditableDateRangePicker = ({ value, onChange, onFocus, separator = 'to', startProps = {}, endProps = {} })=>{
+export const EditableDateRangePicker = ({ value, onChange, onFocus, startProps = {}, endProps = {} })=>{
     const onChangeStart = (date)=>{
         onChange?.([
             dayjs(date).startOf('day').toDate(),
@@ -33,7 +33,6 @@ export const EditableDateRangePicker = ({ value, onChange, onFocus, separator =
                     ...startProps.styles
                 }
             }),
-            separator,
             /*#__PURE__*/ _jsx(DateInput, {
                 clearable: false,
                 label: "End",

package/dist/esm/components/date-range-picker/EditableDateRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/date-range-picker/EditableDateRangePicker.tsx"],"sourcesContent":["import {DateInput, DatePickerProps} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {ReactNode} from 'react';\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\n\nexport interface EditableDateRangePickerProps {\n    value: DateRangePickerValue;\n    onChange?(value: DateRangePickerValue): void;\n    onFocus?: () => void;\n    separator?: ReactNode;\n    /**\n     * Props for the start input\n     */\n    startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n    /**\n     * Props for the end input\n     */\n    endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n}\n\nexport const EditableDateRangePicker = ({\n    value,\n    onChange,\n    onFocus,\n    separator = 'to',\n    startProps = {},\n    endProps = {},\n}: EditableDateRangePickerProps) => {\n    const onChangeStart = (date: Date) => {\n        onChange?.([dayjs(date).startOf('day').toDate(), value?.[1]]);\n    };\n    const onChangeEnd = (date: Date) => {\n        onChange?.([value?.[0], dayjs(date).endOf('day').toDate()]);\n    };\n\n    return (\n        <>\n            <DateInput\n                clearable={false}\n                label=\"Start\"\n                value={value?.[0]}\n                onChange={onChangeStart}\n                onFocus={onFocus}\n                popoverProps={{styles: {dropdown: {display: 'none'}}}}\n                styles={{...startProps.styles}}\n            />\n            {separator}\n            <DateInput\n                clearable={false}\n                label=\"End\"\n                value={value?.[1]}\n                onChange={onChangeEnd}\n                onFocus={onFocus}\n                popoverProps={{styles: {dropdown: {display: 'none'}}}}\n                styles={{...endProps.styles}}\n            />\n        </>\n    );\n};\n"],"names":["DateInput","dayjs","EditableDateRangePicker","value","onChange","onFocus","separator","startProps","endProps","onChangeStart","date","startOf","toDate","onChangeEnd","endOf","clearable","label","popoverProps","styles","dropdown","display"],"mappings":";AAAA,SAAQA,SAAS,QAAwB,iBAAiB;AAC1D,OAAOC,WAAW,QAAQ;AAmB1B,OAAO,MAAMC,0BAA0B,CAAC,EACpCC,KAAK,EACLC,QAAQ,EACRC,OAAO,EACPC,YAAY,IAAI,EAChBC,aAAa,CAAC,CAAC,EACfC,WAAW,CAAC,CAAC,EACc;IAC3B,MAAMC,gBAAgB,CAACC;QACnBN,WAAW;YAACH,MAAMS,MAAMC,OAAO,CAAC,OAAOC,MAAM;YAAIT,OAAO,CAAC,EAAE;SAAC;IAChE;IACA,MAAMU,cAAc,CAACH;QACjBN,WAAW;YAACD,OAAO,CAAC,EAAE;YAAEF,MAAMS,MAAMI,KAAK,CAAC,OAAOF,MAAM;SAAG;IAC9D;IAEA,qBACI;;0BACI,KAACZ;gBACGe,WAAW;gBACXC,OAAM;gBACNb,OAAOA,OAAO,CAAC,EAAE;gBACjBC,UAAUK;gBACVJ,SAASA;gBACTY,cAAc;oBAACC,QAAQ;wBAACC,UAAU;4BAACC,SAAS;wBAAM;oBAAC;gBAAC;gBACpDF,QAAQ;oBAAC,GAAGX,WAAWW,MAAM;gBAAA;;YAEhCZ;0BACD,KAACN;gBACGe,WAAW;gBACXC,OAAM;gBACNb,OAAOA,OAAO,CAAC,EAAE;gBACjBC,UAAUS;gBACVR,SAASA;gBACTY,cAAc;oBAACC,QAAQ;wBAACC,UAAU;4BAACC,SAAS;wBAAM;oBAAC;gBAAC;gBACpDF,QAAQ;oBAAC,GAAGV,SAASU,MAAM;gBAAA;;;;AAI3C,EAAE"}
+{"version":3,"sources":["../../../../src/components/date-range-picker/EditableDateRangePicker.tsx"],"sourcesContent":["import {DateInput, DatePickerProps} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\n\nexport interface EditableDateRangePickerProps {\n    value: DateRangePickerValue;\n    onChange?(value: DateRangePickerValue): void;\n    onFocus?: () => void;\n    /**\n     * Props for the start input\n     */\n    startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n    /**\n     * Props for the end input\n     */\n    endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n}\n\nexport const EditableDateRangePicker = ({\n    value,\n    onChange,\n    onFocus,\n    startProps = {},\n    endProps = {},\n}: EditableDateRangePickerProps) => {\n    const onChangeStart = (date: Date) => {\n        onChange?.([dayjs(date).startOf('day').toDate(), value?.[1]]);\n    };\n    const onChangeEnd = (date: Date) => {\n        onChange?.([value?.[0], dayjs(date).endOf('day').toDate()]);\n    };\n\n    return (\n        <>\n            <DateInput\n                clearable={false}\n                label=\"Start\"\n                value={value?.[0]}\n                onChange={onChangeStart}\n                onFocus={onFocus}\n                popoverProps={{styles: {dropdown: {display: 'none'}}}}\n                styles={{...startProps.styles}}\n            />\n            <DateInput\n                clearable={false}\n                label=\"End\"\n                value={value?.[1]}\n                onChange={onChangeEnd}\n                onFocus={onFocus}\n                popoverProps={{styles: {dropdown: {display: 'none'}}}}\n                styles={{...endProps.styles}}\n            />\n        </>\n    );\n};\n"],"names":["DateInput","dayjs","EditableDateRangePicker","value","onChange","onFocus","startProps","endProps","onChangeStart","date","startOf","toDate","onChangeEnd","endOf","clearable","label","popoverProps","styles","dropdown","display"],"mappings":";AAAA,SAAQA,SAAS,QAAwB,iBAAiB;AAC1D,OAAOC,WAAW,QAAQ;AAiB1B,OAAO,MAAMC,0BAA0B,CAAC,EACpCC,KAAK,EACLC,QAAQ,EACRC,OAAO,EACPC,aAAa,CAAC,CAAC,EACfC,WAAW,CAAC,CAAC,EACc;IAC3B,MAAMC,gBAAgB,CAACC;QACnBL,WAAW;YAACH,MAAMQ,MAAMC,OAAO,CAAC,OAAOC,MAAM;YAAIR,OAAO,CAAC,EAAE;SAAC;IAChE;IACA,MAAMS,cAAc,CAACH;QACjBL,WAAW;YAACD,OAAO,CAAC,EAAE;YAAEF,MAAMQ,MAAMI,KAAK,CAAC,OAAOF,MAAM;SAAG;IAC9D;IAEA,qBACI;;0BACI,KAACX;gBACGc,WAAW;gBACXC,OAAM;gBACNZ,OAAOA,OAAO,CAAC,EAAE;gBACjBC,UAAUI;gBACVH,SAASA;gBACTW,cAAc;oBAACC,QAAQ;wBAACC,UAAU;4BAACC,SAAS;wBAAM;oBAAC;gBAAC;gBACpDF,QAAQ;oBAAC,GAAGX,WAAWW,MAAM;gBAAA;;0BAEjC,KAACjB;gBACGc,WAAW;gBACXC,OAAM;gBACNZ,OAAOA,OAAO,CAAC,EAAE;gBACjBC,UAAUQ;gBACVP,SAASA;gBACTW,cAAc;oBAACC,QAAQ;wBAACC,UAAU;4BAACC,SAAS;wBAAM;oBAAC;gBAAC;gBACpDF,QAAQ;oBAAC,GAAGV,SAASU,MAAM;gBAAA;;;;AAI3C,EAAE"}

package/dist/esm/components/header/Header.context.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { GetStylesApi } from '@mantine/core';
+import type { HeaderFactory } from './Header';
+export interface HeaderContextValue {
+    getStyles: GetStylesApi<HeaderFactory>;
+}
+export declare const HeaderProvider: ({ children, value }: {
+    value: HeaderContextValue;
+    children: import("react").ReactNode;
+}) => import("react").JSX.Element, useHeaderContext: () => HeaderContextValue;
+//# sourceMappingURL=Header.context.d.ts.map

package/dist/esm/components/header/Header.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.context.d.ts","sourceRoot":"","sources":["../../../../src/components/header/Header.context.ts"],"names":[],"mappings":";AAAA,OAAO,EAAC,YAAY,EAAoB,MAAM,eAAe,CAAC;AAC9D,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,UAAU,CAAC;AAE5C,MAAM,WAAW,kBAAkB;IAC/B,SAAS,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC;CAC1C;AAED,eAAO,MAAO,cAAc;;;mCAAE,gBAAgB,0BAE7C,CAAC"}

package/dist/esm/components/header/Header.context.js

@@ -0,0 +1,4 @@
+import { createSafeContext } from '@mantine/core';
+export const [HeaderProvider, useHeaderContext] = createSafeContext('Header component was not found in tree');
+
+//# sourceMappingURL=Header.context.js.map

package/dist/esm/components/header/Header.context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/header/Header.context.ts"],"sourcesContent":["import {GetStylesApi, createSafeContext} from '@mantine/core';\nimport type {HeaderFactory} from './Header';\n\nexport interface HeaderContextValue {\n    getStyles: GetStylesApi<HeaderFactory>;\n}\n\nexport const [HeaderProvider, useHeaderContext] = createSafeContext<HeaderContextValue>(\n    'Header component was not found in tree',\n);\n"],"names":["createSafeContext","HeaderProvider","useHeaderContext"],"mappings":"AAAA,SAAsBA,iBAAiB,QAAO,gBAAgB;AAO9D,OAAO,MAAM,CAACC,gBAAgBC,iBAAiB,GAAGF,kBAC9C,0CACF"}

package/dist/esm/components/header/Header.d.ts

@@ -1,14 +1,14 @@
-import { DefaultProps, GroupProps, Selectors } from '@mantine/core';
-import { ReactElement, ReactNode } from 'react';
-import { HeaderStylesParams, useStyles } from './Header.styles';
-import { HeaderActions } from './HeaderActions/HeaderActions';
-import { HeaderBreadcrumbs } from './HeaderBreadcrumbs/HeaderBreadcrumbs';
-import { HeaderDocAnchor } from './HeaderDocAnchor/HeaderDocAnchor';
-export type { HeaderDocAnchorProps, HeaderDocAnchorStylesNames } from './HeaderDocAnchor/HeaderDocAnchor';
-export type { HeaderBreadcrumbsProps, HeaderBreadcrumbsStylesNames } from './HeaderBreadcrumbs/HeaderBreadcrumbs';
-export type { HeaderActionsProps, HeaderActionsStylesNames } from './HeaderActions/HeaderActions';
-export type HeaderStylesNames = Selectors<typeof useStyles>;
-export interface HeaderProps extends Omit<GroupProps, 'styles'>, DefaultProps<HeaderStylesNames, HeaderStylesParams> {
+import { Factory, GroupProps, StylesApiProps } from '@mantine/core';
+import { ReactNode } from 'react';
+import { HeaderActions, HeaderActionsStyleNames } from './HeaderActions/HeaderActions';
+import { HeaderBreadcrumbs, HeaderBreadcrumbsStyleNames } from './HeaderBreadcrumbs/HeaderBreadcrumbs';
+import { HeaderDocAnchor, HeaderDocAnchorStyleNames } from './HeaderDocAnchor/HeaderDocAnchor';
+export type { HeaderActionsProps } from './HeaderActions/HeaderActions';
+export type { HeaderBreadcrumbsProps } from './HeaderBreadcrumbs/HeaderBreadcrumbs';
+export type { HeaderDocAnchorProps } from './HeaderDocAnchor/HeaderDocAnchor';
+export type HeaderVariant = 'primary' | 'secondary';
+export type HeaderStyleNames = 'root' | 'title' | 'description' | 'divider' | HeaderDocAnchorStyleNames | HeaderBreadcrumbsStyleNames | HeaderActionsStyleNames;
+export interface HeaderProps extends StylesApiProps<HeaderFactory>, Omit<GroupProps, 'classNames' | 'styles' | 'vars'> {
     /**
      * The description text displayed inside the header underneath the title
      */
@@ -18,21 +18,36 @@ export interface HeaderProps extends Omit<GroupProps, 'styles'>, DefaultProps<He
      */
     borderBottom?: boolean;
     /**
-     * Use the modal variant when displaying the header inside a modal
+     * Use the primary variant for page header and secondary variant elsewhere
      *
-     * @default 'page'
+     * @default 'primary'
      */
-    variant?: 'page' | 'modal';
+    variant?: 'primary' | 'secondary';
     /**
      * The title of the header.
      */
     children: ReactNode;
 }
-interface HeaderType {
-    (props: HeaderProps): ReactElement;
-    Breadcrumbs: typeof HeaderBreadcrumbs;
-    Actions: typeof HeaderActions;
-    DocAnchor: typeof HeaderDocAnchor;
-}
-export declare const Header: HeaderType;
+export type HeaderFactory = Factory<{
+    props: HeaderProps;
+    ref: HTMLDivElement;
+    variant: HeaderVariant;
+    stylesNames: HeaderStyleNames;
+    staticComponents: {
+        Breadcrumbs: typeof HeaderBreadcrumbs;
+        Actions: typeof HeaderActions;
+        DocAnchor: typeof HeaderDocAnchor;
+    };
+}>;
+export declare const Header: import("@mantine/core").MantineComponent<{
+    props: HeaderProps;
+    ref: HTMLDivElement;
+    variant: HeaderVariant;
+    stylesNames: HeaderStyleNames;
+    staticComponents: {
+        Breadcrumbs: typeof HeaderBreadcrumbs;
+        Actions: typeof HeaderActions;
+        DocAnchor: typeof HeaderDocAnchor;
+    };
+}>;
 //# sourceMappingURL=Header.d.ts.map

package/dist/esm/components/header/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EAGZ,UAAU,EACV,SAAS,EAKZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAW,YAAY,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAExD,OAAO,EAAC,kBAAkB,EAAE,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAC,aAAa,EAAC,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAC,iBAAiB,EAAC,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAC,eAAe,EAAC,MAAM,mCAAmC,CAAC;AAElE,YAAY,EAAC,oBAAoB,EAAE,0BAA0B,EAAC,MAAM,mCAAmC,CAAC;AACxG,YAAY,EAAC,sBAAsB,EAAE,4BAA4B,EAAC,MAAM,uCAAuC,CAAC;AAChH,YAAY,EAAC,kBAAkB,EAAE,wBAAwB,EAAC,MAAM,+BAA+B,CAAC;AAChG,MAAM,MAAM,iBAAiB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAE5D,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,EAAE,YAAY,CAAC,iBAAiB,EAAE,kBAAkB,CAAC;IAChH;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,UAAU,UAAU;IAChB,CAAC,KAAK,EAAE,WAAW,GAAG,YAAY,CAAC;IACnC,WAAW,EAAE,OAAO,iBAAiB,CAAC;IACtC,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,SAAS,EAAE,OAAO,eAAe,CAAC;CACrC;AAQD,eAAO,MAAM,MAAM,EAAE,UA8BpB,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,OAAO,EAEP,UAAU,EAEV,cAAc,EAMjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAyB,SAAS,EAAC,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAC,aAAa,EAAE,uBAAuB,EAAC,MAAM,+BAA+B,CAAC;AACrF,OAAO,EAAC,iBAAiB,EAAE,2BAA2B,EAAC,MAAM,uCAAuC,CAAC;AACrG,OAAO,EAAC,eAAe,EAAE,yBAAyB,EAAC,MAAM,mCAAmC,CAAC;AAE7F,YAAY,EAAC,kBAAkB,EAAC,MAAM,+BAA+B,CAAC;AACtE,YAAY,EAAC,sBAAsB,EAAC,MAAM,uCAAuC,CAAC;AAClF,YAAY,EAAC,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAE5E,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,CAAC;AACpD,MAAM,MAAM,gBAAgB,GACtB,MAAM,GACN,OAAO,GACP,aAAa,GACb,SAAS,GACT,yBAAyB,GACzB,2BAA2B,GAC3B,uBAAuB,CAAC;AAE9B,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,aAAa,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,YAAY,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClH;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC;IAChC,KAAK,EAAE,WAAW,CAAC;IACnB,GAAG,EAAE,cAAc,CAAC;IACpB,OAAO,EAAE,aAAa,CAAC;IACvB,WAAW,EAAE,gBAAgB,CAAC;IAC9B,gBAAgB,EAAE;QACd,WAAW,EAAE,OAAO,iBAAiB,CAAC;QACtC,OAAO,EAAE,OAAO,aAAa,CAAC;QAC9B,SAAS,EAAE,OAAO,eAAe,CAAC;KACrC,CAAC;CACL,CAAC,CAAC;AAQH,eAAO,MAAM,MAAM;WAjBR,WAAW;SACb,cAAc;aACV,aAAa;iBACT,gBAAgB;sBACX;QACd,WAAW,EAAE,wBAAwB,CAAC;QACtC,OAAO,EAAE,oBAAoB,CAAC;QAC9B,SAAS,EAAE,sBAAsB,CAAC;KACrC;EAkEH,CAAC"}

package/dist/esm/components/header/Header.js

@@ -1,51 +1,66 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Divider, Group, Stack, Text, Title, useComponentDefaultProps } from '@mantine/core';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Divider, Group, Stack, Text, Title, factory, useProps, useStyles } from '@mantine/core';
 import { Children } from 'react';
-import { useStyles } from './Header.styles';
+import { HeaderProvider } from './Header.context';
+import classes from './Header.module.css';
 import { HeaderActions } from './HeaderActions/HeaderActions';
 import { HeaderBreadcrumbs } from './HeaderBreadcrumbs/HeaderBreadcrumbs';
 import { HeaderDocAnchor } from './HeaderDocAnchor/HeaderDocAnchor';
 const defaultProps = {
-    variant: 'page',
-    position: 'apart',
-    noWrap: true
+    variant: 'primary',
+    justify: 'space-between',
+    wrap: 'nowrap'
 };
-export const Header = (props)=>{
-    const { classNames, styles, unstyled, className, description, borderBottom, variant, children, ...others } = useComponentDefaultProps('PlasmaHeader', defaultProps, props);
-    const { classes, cx } = useStyles({
-        variant
-    }, {
+export const Header = factory((_props, ref)=>{
+    const props = useProps('PlasmaHeader', defaultProps, _props);
+    const { className, description, borderBottom, variant, children, style, classNames, unstyled, vars, styles, ...others } = props;
+    const getStyles = useStyles({
         name: 'PlasmaHeader',
+        props,
+        classes,
+        className,
+        style,
         classNames,
         styles,
-        unstyled
+        unstyled,
+        vars
     });
+    const stylesApiProps = {
+        classNames,
+        styles
+    };
     const convertedChildren = Children.toArray(children);
     const breadcrumbs = convertedChildren.find((child)=>child.type === HeaderBreadcrumbs);
     const actions = convertedChildren.find((child)=>child.type === HeaderActions);
     const docAnchor = convertedChildren.find((child)=>child.type === HeaderDocAnchor);
     const otherChildren = convertedChildren.filter((child)=>child.type !== HeaderBreadcrumbs && child.type !== HeaderActions && child.type !== HeaderDocAnchor);
-    return /*#__PURE__*/ _jsxs(_Fragment, {
+    return /*#__PURE__*/ _jsxs(HeaderProvider, {
+        value: {
+            getStyles
+        },
         children: [
             /*#__PURE__*/ _jsxs(Group, {
-                className: cx(className, classes.root),
+                ref: ref,
+                variant: variant,
+                ...getStyles('root'),
                 ...others,
                 children: [
                     /*#__PURE__*/ _jsxs(Stack, {
-                        spacing: 0,
+                        gap: 0,
                         children: [
                             breadcrumbs,
                             /*#__PURE__*/ _jsxs(Title, {
-                                order: variant === 'page' ? 1 : 3,
-                                className: classes.title,
+                                variant: variant,
+                                order: variant === 'primary' ? 1 : 3,
+                                ...getStyles('title', stylesApiProps),
                                 children: [
                                     otherChildren,
                                     docAnchor
                                 ]
                             }),
                             /*#__PURE__*/ _jsx(Text, {
-                                className: classes.description,
-                                size: variant === 'page' ? 'md' : 'sm',
+                                ...getStyles('description', stylesApiProps),
+                                size: variant === 'primary' ? 'md' : 'sm',
                                 children: description
                             })
                         ]
@@ -54,12 +69,12 @@ export const Header = (props)=>{
                 ]
             }),
             borderBottom ? /*#__PURE__*/ _jsx(Divider, {
-                className: classes.divider,
+                ...getStyles('divider', stylesApiProps),
                 size: "xs"
             }) : null
         ]
     });
-};
+});
 Header.Breadcrumbs = HeaderBreadcrumbs;
 Header.Actions = HeaderActions;
 Header.DocAnchor = HeaderDocAnchor;

package/dist/esm/components/header/Header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/header/Header.tsx"],"sourcesContent":["import {\n    DefaultProps,\n    Divider,\n    Group,\n    GroupProps,\n    Selectors,\n    Stack,\n    Text,\n    Title,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {Children, ReactElement, ReactNode} from 'react';\n\nimport {HeaderStylesParams, useStyles} from './Header.styles';\nimport {HeaderActions} from './HeaderActions/HeaderActions';\nimport {HeaderBreadcrumbs} from './HeaderBreadcrumbs/HeaderBreadcrumbs';\nimport {HeaderDocAnchor} from './HeaderDocAnchor/HeaderDocAnchor';\n\nexport type {HeaderDocAnchorProps, HeaderDocAnchorStylesNames} from './HeaderDocAnchor/HeaderDocAnchor';\nexport type {HeaderBreadcrumbsProps, HeaderBreadcrumbsStylesNames} from './HeaderBreadcrumbs/HeaderBreadcrumbs';\nexport type {HeaderActionsProps, HeaderActionsStylesNames} from './HeaderActions/HeaderActions';\nexport type HeaderStylesNames = Selectors<typeof useStyles>;\n\nexport interface HeaderProps extends Omit<GroupProps, 'styles'>, DefaultProps<HeaderStylesNames, HeaderStylesParams> {\n    /**\n     * The description text displayed inside the header underneath the title\n     */\n    description?: ReactNode;\n    /**\n     * Whether the header should have a border on the bottom\n     */\n    borderBottom?: boolean;\n    /**\n     * Use the modal variant when displaying the header inside a modal\n     *\n     * @default 'page'\n     */\n    variant?: 'page' | 'modal';\n    /**\n     * The title of the header.\n     */\n    children: ReactNode;\n}\n\ninterface HeaderType {\n    (props: HeaderProps): ReactElement;\n    Breadcrumbs: typeof HeaderBreadcrumbs;\n    Actions: typeof HeaderActions;\n    DocAnchor: typeof HeaderDocAnchor;\n}\n\nconst defaultProps: Partial<HeaderProps> = {\n    variant: 'page',\n    position: 'apart',\n    noWrap: true,\n};\n\nexport const Header: HeaderType = (props: HeaderProps) => {\n    const {classNames, styles, unstyled, className, description, borderBottom, variant, children, ...others} =\n        useComponentDefaultProps('PlasmaHeader', defaultProps, props);\n    const {classes, cx} = useStyles({variant}, {name: 'PlasmaHeader', classNames, styles, unstyled});\n\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const breadcrumbs = convertedChildren.find((child) => child.type === HeaderBreadcrumbs);\n    const actions = convertedChildren.find((child) => child.type === HeaderActions);\n    const docAnchor = convertedChildren.find((child) => child.type === HeaderDocAnchor);\n    const otherChildren = convertedChildren.filter(\n        (child) => child.type !== HeaderBreadcrumbs && child.type !== HeaderActions && child.type !== HeaderDocAnchor,\n    );\n    return (\n        <>\n            <Group className={cx(className, classes.root)} {...others}>\n                <Stack spacing={0}>\n                    {breadcrumbs}\n                    <Title order={variant === 'page' ? 1 : 3} className={classes.title}>\n                        {otherChildren}\n                        {docAnchor}\n                    </Title>\n                    <Text className={classes.description} size={variant === 'page' ? 'md' : 'sm'}>\n                        {description}\n                    </Text>\n                </Stack>\n                {actions}\n            </Group>\n            {borderBottom ? <Divider className={classes.divider} size=\"xs\" /> : null}\n        </>\n    );\n};\n\nHeader.Breadcrumbs = HeaderBreadcrumbs;\nHeader.Actions = HeaderActions;\nHeader.DocAnchor = HeaderDocAnchor;\n"],"names":["Divider","Group","Stack","Text","Title","useComponentDefaultProps","Children","useStyles","HeaderActions","HeaderBreadcrumbs","HeaderDocAnchor","defaultProps","variant","position","noWrap","Header","props","classNames","styles","unstyled","className","description","borderBottom","children","others","classes","cx","name","convertedChildren","toArray","breadcrumbs","find","child","type","actions","docAnchor","otherChildren","filter","root","spacing","order","title","size","divider","Breadcrumbs","Actions","DocAnchor"],"mappings":";AAAA,SAEIA,OAAO,EACPC,KAAK,EAGLC,KAAK,EACLC,IAAI,EACJC,KAAK,EACLC,wBAAwB,QACrB,gBAAgB;AACvB,SAAQC,QAAQ,QAAgC,QAAQ;AAExD,SAA4BC,SAAS,QAAO,kBAAkB;AAC9D,SAAQC,aAAa,QAAO,gCAAgC;AAC5D,SAAQC,iBAAiB,QAAO,wCAAwC;AACxE,SAAQC,eAAe,QAAO,oCAAoC;AAmClE,MAAMC,eAAqC;IACvCC,SAAS;IACTC,UAAU;IACVC,QAAQ;AACZ;AAEA,OAAO,MAAMC,SAAqB,CAACC;IAC/B,MAAM,EAACC,UAAU,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,WAAW,EAAEC,YAAY,EAAEV,OAAO,EAAEW,QAAQ,EAAE,GAAGC,QAAO,GACpGnB,yBAAyB,gBAAgBM,cAAcK;IAC3D,MAAM,EAACS,OAAO,EAAEC,EAAE,EAAC,GAAGnB,UAAU;QAACK;IAAO,GAAG;QAACe,MAAM;QAAgBV;QAAYC;QAAQC;IAAQ;IAE9F,MAAMS,oBAAoBtB,SAASuB,OAAO,CAACN;IAC3C,MAAMO,cAAcF,kBAAkBG,IAAI,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAKxB;IACrE,MAAMyB,UAAUN,kBAAkBG,IAAI,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAKzB;IACjE,MAAM2B,YAAYP,kBAAkBG,IAAI,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAKvB;IACnE,MAAM0B,gBAAgBR,kBAAkBS,MAAM,CAC1C,CAACL,QAAUA,MAAMC,IAAI,KAAKxB,qBAAqBuB,MAAMC,IAAI,KAAKzB,iBAAiBwB,MAAMC,IAAI,KAAKvB;IAElG,qBACI;;0BACI,MAACT;gBAAMmB,WAAWM,GAAGN,WAAWK,QAAQa,IAAI;gBAAI,GAAGd,MAAM;;kCACrD,MAACtB;wBAAMqC,SAAS;;4BACXT;0CACD,MAAC1B;gCAAMoC,OAAO5B,YAAY,SAAS,IAAI;gCAAGQ,WAAWK,QAAQgB,KAAK;;oCAC7DL;oCACAD;;;0CAEL,KAAChC;gCAAKiB,WAAWK,QAAQJ,WAAW;gCAAEqB,MAAM9B,YAAY,SAAS,OAAO;0CACnES;;;;oBAGRa;;;YAEJZ,6BAAe,KAACtB;gBAAQoB,WAAWK,QAAQkB,OAAO;gBAAED,MAAK;iBAAU;;;AAGhF,EAAE;AAEF3B,OAAO6B,WAAW,GAAGnC;AACrBM,OAAO8B,OAAO,GAAGrC;AACjBO,OAAO+B,SAAS,GAAGpC"}
+{"version":3,"sources":["../../../../src/components/header/Header.tsx"],"sourcesContent":["import {\n    Divider,\n    Factory,\n    Group,\n    GroupProps,\n    Stack,\n    StylesApiProps,\n    Text,\n    Title,\n    factory,\n    useProps,\n    useStyles,\n} from '@mantine/core';\nimport {Children, ReactElement, ReactNode} from 'react';\nimport {HeaderProvider} from './Header.context';\nimport classes from './Header.module.css';\nimport {HeaderActions, HeaderActionsStyleNames} from './HeaderActions/HeaderActions';\nimport {HeaderBreadcrumbs, HeaderBreadcrumbsStyleNames} from './HeaderBreadcrumbs/HeaderBreadcrumbs';\nimport {HeaderDocAnchor, HeaderDocAnchorStyleNames} from './HeaderDocAnchor/HeaderDocAnchor';\n\nexport type {HeaderActionsProps} from './HeaderActions/HeaderActions';\nexport type {HeaderBreadcrumbsProps} from './HeaderBreadcrumbs/HeaderBreadcrumbs';\nexport type {HeaderDocAnchorProps} from './HeaderDocAnchor/HeaderDocAnchor';\n\nexport type HeaderVariant = 'primary' | 'secondary';\nexport type HeaderStyleNames =\n    | 'root'\n    | 'title'\n    | 'description'\n    | 'divider'\n    | HeaderDocAnchorStyleNames\n    | HeaderBreadcrumbsStyleNames\n    | HeaderActionsStyleNames;\n\nexport interface HeaderProps extends StylesApiProps<HeaderFactory>, Omit<GroupProps, 'classNames' | 'styles' | 'vars'> {\n    /**\n     * The description text displayed inside the header underneath the title\n     */\n    description?: ReactNode;\n    /**\n     * Whether the header should have a border on the bottom\n     */\n    borderBottom?: boolean;\n    /**\n     * Use the primary variant for page header and secondary variant elsewhere\n     *\n     * @default 'primary'\n     */\n    variant?: 'primary' | 'secondary';\n    /**\n     * The title of the header.\n     */\n    children: ReactNode;\n}\n\nexport type HeaderFactory = Factory<{\n    props: HeaderProps;\n    ref: HTMLDivElement;\n    variant: HeaderVariant;\n    stylesNames: HeaderStyleNames;\n    staticComponents: {\n        Breadcrumbs: typeof HeaderBreadcrumbs;\n        Actions: typeof HeaderActions;\n        DocAnchor: typeof HeaderDocAnchor;\n    };\n}>;\n\nconst defaultProps: Partial<HeaderProps> = {\n    variant: 'primary',\n    justify: 'space-between',\n    wrap: 'nowrap',\n};\n\nexport const Header = factory<HeaderFactory>((_props, ref) => {\n    const props = useProps('PlasmaHeader', defaultProps, _props);\n    const {\n        className,\n        description,\n        borderBottom,\n        variant,\n        children,\n        style,\n        classNames,\n        unstyled,\n        vars,\n        styles,\n        ...others\n    } = props;\n    const getStyles = useStyles<HeaderFactory>({\n        name: 'PlasmaHeader',\n        props,\n        classes,\n        className,\n        style,\n        classNames,\n        styles,\n        unstyled,\n        vars,\n    });\n    const stylesApiProps = {classNames, styles};\n\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const breadcrumbs = convertedChildren.find((child) => child.type === HeaderBreadcrumbs);\n    const actions = convertedChildren.find((child) => child.type === HeaderActions);\n    const docAnchor = convertedChildren.find((child) => child.type === HeaderDocAnchor);\n    const otherChildren = convertedChildren.filter(\n        (child) => child.type !== HeaderBreadcrumbs && child.type !== HeaderActions && child.type !== HeaderDocAnchor,\n    );\n    return (\n        <HeaderProvider value={{getStyles}}>\n            <Group ref={ref} variant={variant} {...getStyles('root')} {...others}>\n                <Stack gap={0}>\n                    {breadcrumbs}\n                    <Title\n                        variant={variant}\n                        order={variant === 'primary' ? 1 : 3}\n                        {...getStyles('title', stylesApiProps)}\n                    >\n                        {otherChildren}\n                        {docAnchor}\n                    </Title>\n                    <Text {...getStyles('description', stylesApiProps)} size={variant === 'primary' ? 'md' : 'sm'}>\n                        {description}\n                    </Text>\n                </Stack>\n                {actions}\n            </Group>\n            {borderBottom ? <Divider {...getStyles('divider', stylesApiProps)} size=\"xs\" /> : null}\n        </HeaderProvider>\n    );\n});\n\nHeader.Breadcrumbs = HeaderBreadcrumbs;\nHeader.Actions = HeaderActions;\nHeader.DocAnchor = HeaderDocAnchor;\n"],"names":["Divider","Group","Stack","Text","Title","factory","useProps","useStyles","Children","HeaderProvider","classes","HeaderActions","HeaderBreadcrumbs","HeaderDocAnchor","defaultProps","variant","justify","wrap","Header","_props","ref","props","className","description","borderBottom","children","style","classNames","unstyled","vars","styles","others","getStyles","name","stylesApiProps","convertedChildren","toArray","breadcrumbs","find","child","type","actions","docAnchor","otherChildren","filter","value","gap","order","size","Breadcrumbs","Actions","DocAnchor"],"mappings":";AAAA,SACIA,OAAO,EAEPC,KAAK,EAELC,KAAK,EAELC,IAAI,EACJC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,SAAS,QACN,gBAAgB;AACvB,SAAQC,QAAQ,QAAgC,QAAQ;AACxD,SAAQC,cAAc,QAAO,mBAAmB;AAChD,OAAOC,aAAa,sBAAsB;AAC1C,SAAQC,aAAa,QAAgC,gCAAgC;AACrF,SAAQC,iBAAiB,QAAoC,wCAAwC;AACrG,SAAQC,eAAe,QAAkC,oCAAoC;AAiD7F,MAAMC,eAAqC;IACvCC,SAAS;IACTC,SAAS;IACTC,MAAM;AACV;AAEA,OAAO,MAAMC,SAASb,QAAuB,CAACc,QAAQC;IAClD,MAAMC,QAAQf,SAAS,gBAAgBQ,cAAcK;IACrD,MAAM,EACFG,SAAS,EACTC,WAAW,EACXC,YAAY,EACZT,OAAO,EACPU,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,QAAQ,EACRC,IAAI,EACJC,MAAM,EACN,GAAGC,QACN,GAAGV;IACJ,MAAMW,YAAYzB,UAAyB;QACvC0B,MAAM;QACNZ;QACAX;QACAY;QACAI;QACAC;QACAG;QACAF;QACAC;IACJ;IACA,MAAMK,iBAAiB;QAACP;QAAYG;IAAM;IAE1C,MAAMK,oBAAoB3B,SAAS4B,OAAO,CAACX;IAC3C,MAAMY,cAAcF,kBAAkBG,IAAI,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAK5B;IACrE,MAAM6B,UAAUN,kBAAkBG,IAAI,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAK7B;IACjE,MAAM+B,YAAYP,kBAAkBG,IAAI,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAK3B;IACnE,MAAM8B,gBAAgBR,kBAAkBS,MAAM,CAC1C,CAACL,QAAUA,MAAMC,IAAI,KAAK5B,qBAAqB2B,MAAMC,IAAI,KAAK7B,iBAAiB4B,MAAMC,IAAI,KAAK3B;IAElG,qBACI,MAACJ;QAAeoC,OAAO;YAACb;QAAS;;0BAC7B,MAAC/B;gBAAMmB,KAAKA;gBAAKL,SAASA;gBAAU,GAAGiB,UAAU,OAAO;gBAAG,GAAGD,MAAM;;kCAChE,MAAC7B;wBAAM4C,KAAK;;4BACPT;0CACD,MAACjC;gCACGW,SAASA;gCACTgC,OAAOhC,YAAY,YAAY,IAAI;gCAClC,GAAGiB,UAAU,SAASE,eAAe;;oCAErCS;oCACAD;;;0CAEL,KAACvC;gCAAM,GAAG6B,UAAU,eAAeE,eAAe;gCAAEc,MAAMjC,YAAY,YAAY,OAAO;0CACpFQ;;;;oBAGRkB;;;YAEJjB,6BAAe,KAACxB;gBAAS,GAAGgC,UAAU,WAAWE,eAAe;gBAAEc,MAAK;iBAAU;;;AAG9F,GAAG;AAEH9B,OAAO+B,WAAW,GAAGrC;AACrBM,OAAOgC,OAAO,GAAGvC;AACjBO,OAAOiC,SAAS,GAAGtC"}

package/dist/esm/components/header/Header.module.css

@@ -0,0 +1,32 @@
+.root {
+    &[data-variant='primary'] {
+        padding: var(--mantine-spacing-xl);
+        padding-bottom: var(--mantine-spacing-lg);
+    }
+    & .description {
+        color: var(--mantine-color-gray-6);
+        font-weight: 300;
+    }
+}
+
+.title {
+    word-break: break-word;
+    &[data-variant='primary'] {
+        color: var(--mantine-color-gray-5);
+    }
+    line-height: var(--mantine-line-height-md);
+}
+
+.docAnchor {
+    margin-left: var(--mantine-spacing-xs);
+    vertical-align: middle;
+}
+
+.breadcrumbs {
+    font-size: var(--mantine-font-size-sm);
+    font-weight: 300;
+}
+
+.breadcrumbsSeparator {
+    color: var(--mantine-color-gray-5);
+}

package/dist/esm/components/header/HeaderActions/HeaderActions.d.ts

@@ -1,7 +1,19 @@
-import { DefaultProps, GroupProps, Selectors } from '@mantine/core';
-import { FunctionComponent } from 'react';
-import { HeaderActionsStylesParams, useStyles } from './HeaderActions.styles';
-export type HeaderActionsStylesNames = Selectors<typeof useStyles>;
-export type HeaderActionsProps = GroupProps & DefaultProps<HeaderActionsStylesNames, HeaderActionsStylesParams>;
-export declare const HeaderActions: FunctionComponent<HeaderActionsProps>;
+import { CompoundStylesApiProps, Factory, GroupProps } from '@mantine/core';
+import { ReactNode } from 'react';
+export type HeaderActionsStyleNames = 'actions';
+export interface HeaderActionsProps extends Omit<GroupProps, 'classNames' | 'styles' | 'vars' | 'children'>, CompoundStylesApiProps<HeaderActionsFactory> {
+    children: ReactNode;
+}
+export type HeaderActionsFactory = Factory<{
+    props: HeaderActionsProps;
+    ref: HTMLDivElement;
+    stylesNames: HeaderActionsStyleNames;
+    compound: true;
+}>;
+export declare const HeaderActions: import("@mantine/core").MantineComponent<{
+    props: HeaderActionsProps;
+    ref: HTMLDivElement;
+    stylesNames: HeaderActionsStyleNames;
+    compound: true;
+}>;
 //# sourceMappingURL=HeaderActions.d.ts.map

package/dist/esm/components/header/HeaderActions/HeaderActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderActions.d.ts","sourceRoot":"","sources":["../../../../../src/components/header/HeaderActions/HeaderActions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAS,UAAU,EAAE,SAAS,EAA2B,MAAM,eAAe,CAAC;AACnG,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AACxC,OAAO,EAAC,yBAAyB,EAAE,SAAS,EAAC,MAAM,wBAAwB,CAAC;AAE5E,MAAM,MAAM,wBAAwB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAEnE,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,YAAY,CAAC,wBAAwB,EAAE,yBAAyB,CAAC,CAAC;AAMhH,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAa/D,CAAC"}
+{"version":3,"file":"HeaderActions.d.ts","sourceRoot":"","sources":["../../../../../src/components/header/HeaderActions/HeaderActions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,sBAAsB,EAAE,OAAO,EAAS,UAAU,EAAoB,MAAM,eAAe,CAAC;AACpG,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhC,MAAM,MAAM,uBAAuB,GAAG,SAAS,CAAC;AAEhD,MAAM,WAAW,kBACb,SAAQ,IAAI,CAAC,UAAU,EAAE,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC,EACnE,sBAAsB,CAAC,oBAAoB,CAAC;IAChD,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC;IACvC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,uBAAuB,CAAC;IACrC,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAMH,eAAO,MAAM,aAAa;WAVf,kBAAkB;SACpB,cAAc;iBACN,uBAAuB;cAC1B,IAAI;EAsBhB,CAAC"}

package/dist/esm/components/header/HeaderActions/HeaderActions.js

@@ -1,22 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Group, useComponentDefaultProps } from '@mantine/core';
-import { useStyles } from './HeaderActions.styles';
+import { Group, factory, useProps } from '@mantine/core';
+import { useHeaderContext } from '../Header.context';
 const defaultProps = {
-    spacing: 'sm'
+    gap: 'sm'
 };
-export const HeaderActions = (props)=>{
-    const { classNames, styles, unstyled, className, children, ...others } = useComponentDefaultProps('PlasmaHeaderActions', defaultProps, props);
-    const { classes, cx } = useStyles({}, {
-        name: 'PlasmaHeaderActions',
-        classNames,
-        styles,
-        unstyled
-    });
+export const HeaderActions = factory((_props, ref)=>{
+    const props = useProps('HeaderActions', defaultProps, _props);
+    const { gap, className, classNames, styles, style, children, vars, ...others } = props;
+    const ctx = useHeaderContext();
     return /*#__PURE__*/ _jsx(Group, {
-        className: cx(className, classes.root),
+        ref: ref,
+        gap: gap,
+        ...ctx.getStyles('actions', {
+            className,
+            style,
+            classNames,
+            styles,
+            props
+        }),
         ...others,
         children: children
     });
-};
+});
 
 //# sourceMappingURL=HeaderActions.js.map

package/dist/esm/components/header/HeaderActions/HeaderActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/header/HeaderActions/HeaderActions.tsx"],"sourcesContent":["import {DefaultProps, Group, GroupProps, Selectors, useComponentDefaultProps} from '@mantine/core';\nimport {FunctionComponent} from 'react';\nimport {HeaderActionsStylesParams, useStyles} from './HeaderActions.styles';\n\nexport type HeaderActionsStylesNames = Selectors<typeof useStyles>;\n\nexport type HeaderActionsProps = GroupProps & DefaultProps<HeaderActionsStylesNames, HeaderActionsStylesParams>;\n\nconst defaultProps: Partial<HeaderActionsProps> = {\n    spacing: 'sm',\n};\n\nexport const HeaderActions: FunctionComponent<HeaderActionsProps> = (props: HeaderActionsProps) => {\n    const {classNames, styles, unstyled, className, children, ...others} = useComponentDefaultProps(\n        'PlasmaHeaderActions',\n        defaultProps,\n        props,\n    );\n    const {classes, cx} = useStyles({}, {name: 'PlasmaHeaderActions', classNames, styles, unstyled});\n\n    return (\n        <Group className={cx(className, classes.root)} {...others}>\n            {children}\n        </Group>\n    );\n};\n"],"names":["Group","useComponentDefaultProps","useStyles","defaultProps","spacing","HeaderActions","props","classNames","styles","unstyled","className","children","others","classes","cx","name","root"],"mappings":";AAAA,SAAsBA,KAAK,EAAyBC,wBAAwB,QAAO,gBAAgB;AAEnG,SAAmCC,SAAS,QAAO,yBAAyB;AAM5E,MAAMC,eAA4C;IAC9CC,SAAS;AACb;AAEA,OAAO,MAAMC,gBAAuD,CAACC;IACjE,MAAM,EAACC,UAAU,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,QAAO,GAAGX,yBACnE,uBACAE,cACAG;IAEJ,MAAM,EAACO,OAAO,EAAEC,EAAE,EAAC,GAAGZ,UAAU,CAAC,GAAG;QAACa,MAAM;QAAuBR;QAAYC;QAAQC;IAAQ;IAE9F,qBACI,KAACT;QAAMU,WAAWI,GAAGJ,WAAWG,QAAQG,IAAI;QAAI,GAAGJ,MAAM;kBACpDD;;AAGb,EAAE"}
+{"version":3,"sources":["../../../../../src/components/header/HeaderActions/HeaderActions.tsx"],"sourcesContent":["import {CompoundStylesApiProps, Factory, Group, GroupProps, factory, useProps} from '@mantine/core';\nimport {ReactNode} from 'react';\nimport {useHeaderContext} from '../Header.context';\n\nexport type HeaderActionsStyleNames = 'actions';\n\nexport interface HeaderActionsProps\n    extends Omit<GroupProps, 'classNames' | 'styles' | 'vars' | 'children'>,\n        CompoundStylesApiProps<HeaderActionsFactory> {\n    children: ReactNode;\n}\n\nexport type HeaderActionsFactory = Factory<{\n    props: HeaderActionsProps;\n    ref: HTMLDivElement;\n    stylesNames: HeaderActionsStyleNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<HeaderActionsProps> = {\n    gap: 'sm',\n};\n\nexport const HeaderActions = factory<HeaderActionsFactory>((_props, ref) => {\n    const props = useProps('HeaderActions', defaultProps, _props);\n    const {gap, className, classNames, styles, style, children, vars, ...others} = props;\n    const ctx = useHeaderContext();\n\n    return (\n        <Group\n            ref={ref}\n            gap={gap}\n            {...ctx.getStyles('actions', {className, style, classNames, styles, props})}\n            {...others}\n        >\n            {children}\n        </Group>\n    );\n});\n"],"names":["Group","factory","useProps","useHeaderContext","defaultProps","gap","HeaderActions","_props","ref","props","className","classNames","styles","style","children","vars","others","ctx","getStyles"],"mappings":";AAAA,SAAyCA,KAAK,EAAcC,OAAO,EAAEC,QAAQ,QAAO,gBAAgB;AAEpG,SAAQC,gBAAgB,QAAO,oBAAoB;AAiBnD,MAAMC,eAA4C;IAC9CC,KAAK;AACT;AAEA,OAAO,MAAMC,gBAAgBL,QAA8B,CAACM,QAAQC;IAChE,MAAMC,QAAQP,SAAS,iBAAiBE,cAAcG;IACtD,MAAM,EAACF,GAAG,EAAEK,SAAS,EAAEC,UAAU,EAAEC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGC,QAAO,GAAGP;IAC/E,MAAMQ,MAAMd;IAEZ,qBACI,KAACH;QACGQ,KAAKA;QACLH,KAAKA;QACJ,GAAGY,IAAIC,SAAS,CAAC,WAAW;YAACR;YAAWG;YAAOF;YAAYC;YAAQH;QAAK,EAAE;QAC1E,GAAGO,MAAM;kBAETF;;AAGb,GAAG"}

package/dist/esm/components/header/HeaderBreadcrumbs/HeaderBreadcrumbs.d.ts

@@ -1,7 +1,17 @@
-import { BreadcrumbsProps, DefaultProps, Selectors } from '@mantine/core';
-import { FunctionComponent } from 'react';
-import { HeaderBreadcrumbsStylesParams, useStyles } from './HeaderBreadcrumbs.styles';
-export type HeaderBreadcrumbsStylesNames = Selectors<typeof useStyles>;
-export type HeaderBreadcrumbsProps = BreadcrumbsProps & DefaultProps<HeaderBreadcrumbsStylesNames, HeaderBreadcrumbsStylesParams>;
-export declare const HeaderBreadcrumbs: FunctionComponent<HeaderBreadcrumbsProps>;
+import { BreadcrumbsProps, CompoundStylesApiProps, Factory } from '@mantine/core';
+export type HeaderBreadcrumbsStyleNames = 'breadcrumbsRoot' | 'breadcrumbsSeparator';
+export interface HeaderBreadcrumbsProps extends Omit<BreadcrumbsProps, 'classNames' | 'styles' | 'vars'>, CompoundStylesApiProps<HeaderBreadcrumbsFactory> {
+}
+export type HeaderBreadcrumbsFactory = Factory<{
+    props: BreadcrumbsProps;
+    ref: HTMLDivElement;
+    stylesNames: HeaderBreadcrumbsStyleNames;
+    compound: true;
+}>;
+export declare const HeaderBreadcrumbs: import("@mantine/core").MantineComponent<{
+    props: BreadcrumbsProps;
+    ref: HTMLDivElement;
+    stylesNames: HeaderBreadcrumbsStyleNames;
+    compound: true;
+}>;
 //# sourceMappingURL=HeaderBreadcrumbs.d.ts.map

package/dist/esm/components/header/HeaderBreadcrumbs/HeaderBreadcrumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderBreadcrumbs.d.ts","sourceRoot":"","sources":["../../../../../src/components/header/HeaderBreadcrumbs/HeaderBreadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAC,MAAM,eAAe,CAAC;AACrF,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AACxC,OAAO,EAAC,6BAA6B,EAAE,SAAS,EAAC,MAAM,4BAA4B,CAAC;AAEpF,MAAM,MAAM,4BAA4B,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAEvE,MAAM,MAAM,sBAAsB,GAAG,gBAAgB,GACjD,YAAY,CAAC,4BAA4B,EAAE,6BAA6B,CAAC,CAAC;AAE9E,eAAO,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,CAqBvE,CAAC"}
+{"version":3,"file":"HeaderBreadcrumbs.d.ts","sourceRoot":"","sources":["../../../../../src/components/header/HeaderBreadcrumbs/HeaderBreadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,gBAAgB,EAAE,sBAAsB,EAAE,OAAO,EAAU,MAAM,eAAe,CAAC;AAGtG,MAAM,MAAM,2BAA2B,GAAG,iBAAiB,GAAG,sBAAsB,CAAC;AACrF,MAAM,WAAW,sBACb,SAAQ,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,QAAQ,GAAG,MAAM,CAAC,EAC5D,sBAAsB,CAAC,wBAAwB,CAAC;CAAG;AAE3D,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAAC;IAC3C,KAAK,EAAE,gBAAgB,CAAC;IACxB,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,2BAA2B,CAAC;IACzC,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAEH,eAAO,MAAM,iBAAiB;WANnB,gBAAgB;SAClB,cAAc;iBACN,2BAA2B;cAC9B,IAAI;EAmBhB,CAAC"}