@coveord/plasma-mantine 49.2.4 → 49.3.0

package/dist/cjs/components/table/TableFilter.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "TableFilter", {
         return TableFilter;
     }
 });
-var _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
 var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
 var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
 var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
@@ -33,15 +32,14 @@ var TableFilter = function(_param) {
         "styles",
         "unstyled"
     ]);
-    var _useStyles = useStyles(null, {
+    var classes = useStyles(null, {
         name: "TableHeader",
         classNames: classNames,
         styles: styles,
         unstyled: unstyled
-    }), classes = _useStyles.classes, cx = _useStyles.cx;
+    }).classes;
     var _useTable1 = (0, _useTable.useTable)(), state = _useTable1.state, setState = _useTable1.setState;
-    var handleSearchChange = function(event) {
-        var value = event.currentTarget.value;
+    var changeFilterValue = function(value) {
         setState(function(prevState) {
             return _objectSpreadProps(_objectSpread({}, prevState), {
                 pagination: prevState.pagination ? {
@@ -52,16 +50,28 @@ var TableFilter = function(_param) {
             });
         });
     };
+    var handleChange = function(event) {
+        var value = event.currentTarget.value;
+        changeFilterValue(value);
+    };
+    var handleClear = function() {
+        changeFilterValue("");
+    };
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.TextInput, _objectSpread({
         className: classes.wrapper,
         placeholder: placeholder,
         mb: "md",
-        rightSection: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plasmaReactIcons.SearchSize16Px, {
+        rightSection: state.globalFilter ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.ActionIcon, {
+            onClick: handleClear,
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plasmaReactIcons.CrossSize16Px, {
+                height: 16
+            })
+        }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plasmaReactIcons.SearchSize16Px, {
             height: 14,
-            className: cx(_defineProperty({}, classes.empty, !state.globalFilter))
+            className: classes.empty
         }),
         value: state.globalFilter,
-        onChange: handleSearchChange
+        onChange: handleChange
     }, others));
 };
 

package/dist/cjs/components/table/TableFilter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, TextInput, Selectors, DefaultProps} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {ChangeEvent, FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n    wrapper: {\n        marginBottom: '0 !important',\n    },\n    empty: {\n        color: theme.colors.gray[4],\n    },\n}));\n\ntype TableFilterStylesNames = Selectors<typeof useStyles>;\ninterface TableFilterProps extends DefaultProps<TableFilterStylesNames> {\n    /**\n     * The placeholder for the filter input\n     *\n     * @default \"Search by any field\"\n     */\n    placeholder?: string;\n}\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n    placeholder = 'Search by any field',\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n    const {state, setState} = useTable();\n\n    const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const {value} = event.currentTarget;\n        setState((prevState: TableState) => ({\n            ...prevState,\n            pagination: prevState.pagination\n                ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n                : prevState.pagination,\n            globalFilter: value,\n        }));\n    };\n\n    return (\n        <TextInput\n            className={classes.wrapper}\n            placeholder={placeholder}\n            mb=\"md\"\n            rightSection={<SearchSize16Px height={14} className={cx({[classes.empty]: !state.globalFilter})} />}\n            value={state.globalFilter}\n            onChange={handleSearchChange}\n            {...others}\n        />\n    );\n};\n"],"names":["TableFilter","useStyles","createStyles","theme","wrapper","marginBottom","empty","color","colors","gray","placeholder","classNames","styles","unstyled","others","name","classes","cx","useTable","state","setState","handleSearchChange","event","value","currentTarget","prevState","pagination","pageIndex","pageSize","globalFilter","TextInput","className","mb","rightSection","SearchSize16Px","height","onChange"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;;gCAzBgB;oBACkC;wBAGxC;AAEvB,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYO,IAAMT,cAAmD,iBAM1D;oCALFU,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAsBZ,aAAAA,UAAU,IAAI,EAAE;QAACc,MAAM;QAAeJ,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,IAAjFG,UAAef,WAAfe,SAASC,KAAMhB,WAANgB;IAChB,IAA0BC,aAAAA,IAAAA,kBAAQ,KAA3BC,QAAmBD,WAAnBC,OAAOC,WAAYF,WAAZE;IAEd,IAAMC,qBAAqB,SAACC,OAAyC;QACjE,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPH,SAAS,SAACK;mBAA2B,qCAC9BA;gBACHC,YAAYD,UAAUC,UAAU,GAC1B;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,UAAU,CAACE,QAAQ;gBAAA,IACtDH,UAAUC,UAAU;gBAC1BG,cAAcN;;;IAEtB;IAEA,qBACI,qBAACO,eAAS;QACNC,WAAWf,QAAQZ,OAAO;QAC1BM,aAAaA;QACbsB,IAAG;QACHC,4BAAc,qBAACC,gCAAc;YAACC,QAAQ;YAAIJ,WAAWd,GAAI,oBAACD,QAAQV,KAAK,EAAG,CAACa,MAAMU,YAAY;;QAC7FN,OAAOJ,MAAMU,YAAY;QACzBO,UAAUf;OACNP;AAGhB"}
+{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, createStyles, DefaultProps, Selectors, TextInput} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {ChangeEventHandler, FunctionComponent, MouseEventHandler} from 'react';\n\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n    wrapper: {\n        marginBottom: '0 !important',\n    },\n    empty: {\n        color: theme.colors.gray[4],\n    },\n}));\n\ntype TableFilterStylesNames = Selectors<typeof useStyles>;\ninterface TableFilterProps extends DefaultProps<TableFilterStylesNames> {\n    /**\n     * The placeholder for the filter input\n     *\n     * @default \"Search by any field\"\n     */\n    placeholder?: string;\n}\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n    placeholder = 'Search by any field',\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}) => {\n    const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n    const {state, setState} = useTable();\n\n    const changeFilterValue = (value: string) => {\n        setState((prevState: TableState) => ({\n            ...prevState,\n            pagination: prevState.pagination\n                ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n                : prevState.pagination,\n            globalFilter: value,\n        }));\n    };\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const {value} = event.currentTarget;\n        changeFilterValue(value);\n    };\n\n    const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n        changeFilterValue('');\n    };\n\n    return (\n        <TextInput\n            className={classes.wrapper}\n            placeholder={placeholder}\n            mb=\"md\"\n            rightSection={\n                state.globalFilter ? (\n                    <ActionIcon onClick={handleClear}>\n                        <CrossSize16Px height={16} />\n                    </ActionIcon>\n                ) : (\n                    <SearchSize16Px height={14} className={classes.empty} />\n                )\n            }\n            value={state.globalFilter}\n            onChange={handleChange}\n            {...others}\n        />\n    );\n};\n"],"names":["TableFilter","useStyles","createStyles","theme","wrapper","marginBottom","empty","color","colors","gray","placeholder","classNames","styles","unstyled","others","classes","name","useTable","state","setState","changeFilterValue","value","prevState","pagination","pageIndex","pageSize","globalFilter","handleChange","event","currentTarget","handleClear","TextInput","className","mb","rightSection","ActionIcon","onClick","CrossSize16Px","height","SearchSize16Px","onChange"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;;gCA1B+B;oBAC+B;wBAIpD;AAEvB,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYO,IAAMT,cAAmD,iBAM1D;oCALFU,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWd,UAAU,IAAI,EAAE;QAACe,MAAM;QAAeL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EE;IACP,IAA0BE,aAAAA,IAAAA,kBAAQ,KAA3BC,QAAmBD,WAAnBC,OAAOC,WAAYF,WAAZE;IAEd,IAAMC,oBAAoB,SAACC,OAAkB;QACzCF,SAAS,SAACG;mBAA2B,qCAC9BA;gBACHC,YAAYD,UAAUC,UAAU,GAC1B;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,UAAU,CAACE,QAAQ;gBAAA,IACtDH,UAAUC,UAAU;gBAC1BG,cAAcL;;;IAEtB;IAEA,IAAMM,eAAqD,SAACC,OAAU;QAClE,IAAM,AAACP,QAASO,MAAMC,aAAa,CAA5BR;QACPD,kBAAkBC;IACtB;IAEA,IAAMS,cAAoD,WAAM;QAC5DV,kBAAkB;IACtB;IAEA,qBACI,qBAACW,eAAS;QACNC,WAAWjB,QAAQX,OAAO;QAC1BM,aAAaA;QACbuB,IAAG;QACHC,cACIhB,MAAMQ,YAAY,iBACd,qBAACS,gBAAU;YAACC,SAASN;sBACjB,cAAA,qBAACO,+BAAa;gBAACC,QAAQ;;2BAG3B,qBAACC,gCAAc;YAACD,QAAQ;YAAIN,WAAWjB,QAAQT,KAAK;UACvD;QAELe,OAAOH,MAAMQ,YAAY;QACzBc,UAAUb;OACNb;AAGhB"}

package/dist/cjs/theme/Theme.js

@@ -34,32 +34,32 @@ var plasmaTheme = {
             h1: {
                 fontSize: 48,
                 lineHeight: "56px",
-                fontWeight: undefined
+                fontWeight: 300
             },
             h2: {
                 fontSize: 32,
                 lineHeight: "40px",
-                fontWeight: undefined
+                fontWeight: 500
             },
             h3: {
-                fontSize: 28,
-                lineHeight: "40px",
-                fontWeight: undefined
-            },
-            h4: {
                 fontSize: 24,
                 lineHeight: "32px",
-                fontWeight: undefined
+                fontWeight: 500
             },
-            h5: {
+            h4: {
                 fontSize: 18,
                 lineHeight: "28px",
-                fontWeight: undefined
+                fontWeight: 300
+            },
+            h5: {
+                fontSize: 14,
+                lineHeight: "20px",
+                fontWeight: 500
             },
             h6: {
-                fontSize: 16,
-                lineHeight: "24px",
-                fontWeight: undefined
+                fontSize: 12,
+                lineHeight: "16px",
+                fontWeight: 500
             }
         }
     },

package/dist/cjs/theme/Theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {ArrowHeadRightSize24Px, InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {ButtonStylesParams, MantineThemeOverride, ModalStylesParams} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n    // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts\n    colorScheme: 'light',\n    fontFamily: 'canada-type-gibson, sans-serif',\n    black: color.primary.gray[9],\n    defaultRadius: 8,\n    spacing: {\n        xs: 8,\n        sm: 16,\n        md: 24,\n        lg: 32,\n        xl: 40,\n    },\n    primaryColor: 'action',\n    headings: {\n        fontFamily: 'canada-type-gibson, sans-serif',\n        fontWeight: 500,\n        sizes: {\n            h1: {fontSize: 48, lineHeight: '56px', fontWeight: undefined},\n            h2: {fontSize: 32, lineHeight: '40px', fontWeight: undefined},\n            h3: {fontSize: 28, lineHeight: '40px', fontWeight: undefined},\n            h4: {fontSize: 24, lineHeight: '32px', fontWeight: undefined},\n            h5: {fontSize: 18, lineHeight: '28px', fontWeight: undefined},\n            h6: {fontSize: 16, lineHeight: '24px', fontWeight: undefined},\n        },\n    },\n    shadows: {\n        xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n        sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n        md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n        lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n        xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n    },\n    colors: PlasmaColors,\n    components: {\n        Alert: {\n            defaultProps: {\n                icon: <InfoSize24Px height={24} />,\n                color: 'navy',\n            },\n            styles: {\n                title: {\n                    fontWeight: 500,\n                },\n            },\n        },\n        Title: {\n            styles: (theme) => ({\n                root: {\n                    '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em', color: theme.colors.gray[9]},\n                },\n            }),\n        },\n        Button: {\n            styles: (theme, params: ButtonStylesParams) => ({\n                root: {\n                    fontWeight: 400,\n                    backgroundColor: params.variant === 'outline' ? 'white' : undefined,\n                },\n            }),\n        },\n        Modal: {\n            styles: (theme, {size, fullScreen}: ModalStylesParams) => ({\n                modal: {\n                    width: fullScreen\n                        ? undefined\n                        : theme.fn.size({size, sizes: {xs: 440, sm: 550, md: 800, lg: 1334, xl: '85%'}}),\n                },\n            }),\n            defaultProps: {\n                overlayColor: color.primary.navy[9],\n                overlayOpacity: 0.9,\n            },\n        },\n        InputWrapper: {\n            defaultProps: {\n                withAsterisk: false,\n            },\n            styles: (theme) => ({\n                label: {\n                    marginBottom: theme.spacing.xs,\n                    lineHeight: '20px',\n                },\n                description: {\n                    lineHeight: '20px',\n                    fontSize: theme.fontSizes.sm,\n                    color: theme.colors.gray[7],\n                    marginBottom: theme.spacing.xs,\n                },\n                invalid: {\n                    color: theme.colors.red[9],\n                    borderColor: theme.colors.red[6],\n                },\n                error: {\n                    color: theme.colors.red[9],\n                },\n            }),\n        },\n        TextInput: {\n            defaultProps: {\n                radius: 8,\n            },\n        },\n        Tooltip: {\n            defaultProps: {\n                color: 'navy',\n                withArrow: true,\n                withinPortal: true,\n                multiline: true,\n            },\n        },\n        Breadcrumbs: {\n            defaultProps: {\n                separator: <ArrowHeadRightSize24Px height={24} />,\n            },\n        },\n        Loader: {\n            defaultProps: {\n                variant: 'dots',\n                color: 'action',\n            },\n        },\n        DateRangePicker: {\n            styles: {\n                cell: {\n                    textAlign: 'center',\n                },\n            },\n        },\n        Anchor: {\n            defaultProps: {\n                color: 'action',\n            },\n            styles: (theme) => ({\n                root: {\n                    ...theme.fn.hover({\n                        textDecoration: 'underline',\n                        color: theme.colors.action[8],\n                    }),\n                },\n            }),\n        },\n        Checkbox: {\n            defaultProps: {\n                radius: 'sm',\n            },\n        },\n        List: {\n            styles: () => ({\n                root: {\n                    listStyleType: 'disc',\n                },\n            }),\n        },\n        Radio: {\n            styles: {\n                labelWrapper: {\n                    display: 'flex',\n                    alignItems: 'flex-start',\n                },\n            },\n        },\n        Popover: {\n            defaultProps: {\n                shadow: 'md',\n                withArrow: true,\n            },\n        },\n        Badge: {\n            styles: {\n                root: {\n                    textTransform: 'none',\n                    padding: '4px 8px',\n                    fontWeight: 500,\n                },\n            },\n        },\n        ColorSwatch: {\n            defaultProps: {\n                size: 8,\n                withShadow: false,\n            },\n        },\n        MenuItem: {\n            defaultProps: {\n                fw: 300,\n            },\n        },\n    },\n};\n"],"names":["plasmaTheme","colorScheme","fontFamily","black","color","primary","gray","defaultRadius","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","lineHeight","undefined","h2","h3","h4","h5","h6","shadows","colors","PlasmaColors","components","Alert","defaultProps","icon","InfoSize24Px","height","styles","title","Title","theme","root","letterSpacing","Button","params","backgroundColor","variant","Modal","size","fullScreen","modal","width","fn","overlayColor","navy","overlayOpacity","InputWrapper","withAsterisk","label","marginBottom","description","fontSizes","invalid","red","borderColor","error","TextInput","radius","Tooltip","withArrow","withinPortal","multiline","Breadcrumbs","separator","ArrowHeadRightSize24Px","Loader","DateRangePicker","cell","textAlign","Anchor","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","padding","ColorSwatch","withShadow","MenuItem","fw"],"mappings":"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"}
+{"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {ArrowHeadRightSize24Px, InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {ButtonStylesParams, MantineThemeOverride, ModalStylesParams} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n    // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts\n    colorScheme: 'light',\n    fontFamily: 'canada-type-gibson, sans-serif',\n    black: color.primary.gray[9],\n    defaultRadius: 8,\n    spacing: {\n        xs: 8,\n        sm: 16,\n        md: 24,\n        lg: 32,\n        xl: 40,\n    },\n    primaryColor: 'action',\n    headings: {\n        fontFamily: 'canada-type-gibson, sans-serif',\n        fontWeight: 500,\n        sizes: {\n            h1: {fontSize: 48, lineHeight: '56px', fontWeight: 300},\n            h2: {fontSize: 32, lineHeight: '40px', fontWeight: 500},\n            h3: {fontSize: 24, lineHeight: '32px', fontWeight: 500},\n            h4: {fontSize: 18, lineHeight: '28px', fontWeight: 300},\n            h5: {fontSize: 14, lineHeight: '20px', fontWeight: 500},\n            h6: {fontSize: 12, lineHeight: '16px', fontWeight: 500},\n        },\n    },\n    shadows: {\n        xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n        sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n        md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n        lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n        xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n    },\n    colors: PlasmaColors,\n    components: {\n        Alert: {\n            defaultProps: {\n                icon: <InfoSize24Px height={24} />,\n                color: 'navy',\n            },\n            styles: {\n                title: {\n                    fontWeight: 500,\n                },\n            },\n        },\n        Title: {\n            styles: (theme) => ({\n                root: {\n                    '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em', color: theme.colors.gray[9]},\n                },\n            }),\n        },\n        Button: {\n            styles: (theme, params: ButtonStylesParams) => ({\n                root: {\n                    fontWeight: 400,\n                    backgroundColor: params.variant === 'outline' ? 'white' : undefined,\n                },\n            }),\n        },\n        Modal: {\n            styles: (theme, {size, fullScreen}: ModalStylesParams) => ({\n                modal: {\n                    width: fullScreen\n                        ? undefined\n                        : theme.fn.size({size, sizes: {xs: 440, sm: 550, md: 800, lg: 1334, xl: '85%'}}),\n                },\n            }),\n            defaultProps: {\n                overlayColor: color.primary.navy[9],\n                overlayOpacity: 0.9,\n            },\n        },\n        InputWrapper: {\n            defaultProps: {\n                withAsterisk: false,\n            },\n            styles: (theme) => ({\n                label: {\n                    marginBottom: theme.spacing.xs,\n                    lineHeight: '20px',\n                },\n                description: {\n                    lineHeight: '20px',\n                    fontSize: theme.fontSizes.sm,\n                    color: theme.colors.gray[7],\n                    marginBottom: theme.spacing.xs,\n                },\n                invalid: {\n                    color: theme.colors.red[9],\n                    borderColor: theme.colors.red[6],\n                },\n                error: {\n                    color: theme.colors.red[9],\n                },\n            }),\n        },\n        TextInput: {\n            defaultProps: {\n                radius: 8,\n            },\n        },\n        Tooltip: {\n            defaultProps: {\n                color: 'navy',\n                withArrow: true,\n                withinPortal: true,\n                multiline: true,\n            },\n        },\n        Breadcrumbs: {\n            defaultProps: {\n                separator: <ArrowHeadRightSize24Px height={24} />,\n            },\n        },\n        Loader: {\n            defaultProps: {\n                variant: 'dots',\n                color: 'action',\n            },\n        },\n        DateRangePicker: {\n            styles: {\n                cell: {\n                    textAlign: 'center',\n                },\n            },\n        },\n        Anchor: {\n            defaultProps: {\n                color: 'action',\n            },\n            styles: (theme) => ({\n                root: {\n                    ...theme.fn.hover({\n                        textDecoration: 'underline',\n                        color: theme.colors.action[8],\n                    }),\n                },\n            }),\n        },\n        Checkbox: {\n            defaultProps: {\n                radius: 'sm',\n            },\n        },\n        List: {\n            styles: () => ({\n                root: {\n                    listStyleType: 'disc',\n                },\n            }),\n        },\n        Radio: {\n            styles: {\n                labelWrapper: {\n                    display: 'flex',\n                    alignItems: 'flex-start',\n                },\n            },\n        },\n        Popover: {\n            defaultProps: {\n                shadow: 'md',\n                withArrow: true,\n            },\n        },\n        Badge: {\n            styles: {\n                root: {\n                    textTransform: 'none',\n                    padding: '4px 8px',\n                    fontWeight: 500,\n                },\n            },\n        },\n        ColorSwatch: {\n            defaultProps: {\n                size: 8,\n                withShadow: false,\n            },\n        },\n        MenuItem: {\n            defaultProps: {\n                fw: 300,\n            },\n        },\n    },\n};\n"],"names":["plasmaTheme","colorScheme","fontFamily","black","color","primary","gray","defaultRadius","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","lineHeight","h2","h3","h4","h5","h6","shadows","colors","PlasmaColors","components","Alert","defaultProps","icon","InfoSize24Px","height","styles","title","Title","theme","root","letterSpacing","Button","params","backgroundColor","variant","undefined","Modal","size","fullScreen","modal","width","fn","overlayColor","navy","overlayOpacity","InputWrapper","withAsterisk","label","marginBottom","description","fontSizes","invalid","red","borderColor","error","TextInput","radius","Tooltip","withArrow","withinPortal","multiline","Breadcrumbs","separator","ArrowHeadRightSize24Px","Loader","DateRangePicker","cell","textAlign","Anchor","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","padding","ColorSwatch","withShadow","MenuItem","fw"],"mappings":"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"}

package/dist/definitions/components/table/TableFilter.d.ts

@@ -1,4 +1,4 @@
-import { Selectors, DefaultProps } from '@mantine/core';
+import { DefaultProps, Selectors } from '@mantine/core';
 import { FunctionComponent } from 'react';
 declare const useStyles: (params: void, options?: import("@mantine/core").UseStylesOptions<"wrapper" | "empty">) => {
     classes: Record<"wrapper" | "empty", string>;

package/dist/definitions/components/table/TableFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAA0B,SAAS,EAAE,YAAY,EAAC,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAc,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAGrD,QAAA,MAAM,SAAS;;;;CAOZ,CAAC;AAEJ,KAAK,sBAAsB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAC1D,UAAU,gBAAiB,SAAQ,YAAY,CAAC,sBAAsB,CAAC;IACnE;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAgC3D,CAAC"}
+{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,YAAY,EAAE,SAAS,EAAY,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAqB,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAI/E,QAAA,MAAM,SAAS;;;;CAOZ,CAAC;AAEJ,KAAK,sBAAsB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAC1D,UAAU,gBAAiB,SAAQ,YAAY,CAAC,sBAAsB,CAAC;IACnE;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAgD3D,CAAC"}

package/dist/esm/components/table/TableFilter.js

@@ -1,10 +1,9 @@
-import _define_property from "@swc/helpers/src/_define_property.mjs";
 import _object_spread from "@swc/helpers/src/_object_spread.mjs";
 import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
 import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { SearchSize16Px } from "@coveord/plasma-react-icons";
-import { createStyles, TextInput } from "@mantine/core";
+import { CrossSize16Px, SearchSize16Px } from "@coveord/plasma-react-icons";
+import { ActionIcon, createStyles, TextInput } from "@mantine/core";
 import { useTable } from "./useTable";
 var useStyles = createStyles(function(theme) {
     return {
@@ -23,15 +22,14 @@ export var TableFilter = function(_param) {
         "styles",
         "unstyled"
     ]);
-    var _useStyles = useStyles(null, {
+    var classes = useStyles(null, {
         name: "TableHeader",
         classNames: classNames,
         styles: styles,
         unstyled: unstyled
-    }), classes = _useStyles.classes, cx = _useStyles.cx;
+    }).classes;
     var _useTable = useTable(), state = _useTable.state, setState = _useTable.setState;
-    var handleSearchChange = function(event) {
-        var value = event.currentTarget.value;
+    var changeFilterValue = function(value) {
         setState(function(prevState) {
             return _object_spread_props(_object_spread({}, prevState), {
                 pagination: prevState.pagination ? {
@@ -42,16 +40,28 @@ export var TableFilter = function(_param) {
             });
         });
     };
+    var handleChange = function(event) {
+        var value = event.currentTarget.value;
+        changeFilterValue(value);
+    };
+    var handleClear = function() {
+        changeFilterValue("");
+    };
     return /*#__PURE__*/ _jsx(TextInput, _object_spread({
         className: classes.wrapper,
         placeholder: placeholder,
         mb: "md",
-        rightSection: /*#__PURE__*/ _jsx(SearchSize16Px, {
+        rightSection: state.globalFilter ? /*#__PURE__*/ _jsx(ActionIcon, {
+            onClick: handleClear,
+            children: /*#__PURE__*/ _jsx(CrossSize16Px, {
+                height: 16
+            })
+        }) : /*#__PURE__*/ _jsx(SearchSize16Px, {
             height: 14,
-            className: cx(_define_property({}, classes.empty, !state.globalFilter))
+            className: classes.empty
         }),
         value: state.globalFilter,
-        onChange: handleSearchChange
+        onChange: handleChange
     }, others));
 };
 

package/dist/esm/components/table/TableFilter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, TextInput, Selectors, DefaultProps} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {ChangeEvent, FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n    wrapper: {\n        marginBottom: '0 !important',\n    },\n    empty: {\n        color: theme.colors.gray[4],\n    },\n}));\n\ntype TableFilterStylesNames = Selectors<typeof useStyles>;\ninterface TableFilterProps extends DefaultProps<TableFilterStylesNames> {\n    /**\n     * The placeholder for the filter input\n     *\n     * @default \"Search by any field\"\n     */\n    placeholder?: string;\n}\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n    placeholder = 'Search by any field',\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n    const {state, setState} = useTable();\n\n    const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const {value} = event.currentTarget;\n        setState((prevState: TableState) => ({\n            ...prevState,\n            pagination: prevState.pagination\n                ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n                : prevState.pagination,\n            globalFilter: value,\n        }));\n    };\n\n    return (\n        <TextInput\n            className={classes.wrapper}\n            placeholder={placeholder}\n            mb=\"md\"\n            rightSection={<SearchSize16Px height={14} className={cx({[classes.empty]: !state.globalFilter})} />}\n            value={state.globalFilter}\n            onChange={handleSearchChange}\n            {...others}\n        />\n    );\n};\n"],"names":["SearchSize16Px","createStyles","TextInput","useTable","useStyles","theme","wrapper","marginBottom","empty","color","colors","gray","TableFilter","placeholder","classNames","styles","unstyled","others","name","classes","cx","state","setState","handleSearchChange","event","value","currentTarget","prevState","pagination","pageIndex","pageSize","globalFilter","className","mb","rightSection","height","onChange"],"mappings":";;;;;AAAA,SAAQA,cAAc,QAAO,8BAA8B;AAC3D,SAAQC,YAAY,EAAEC,SAAS,QAAgC,gBAAgB;AAG/E,SAAQC,QAAQ,QAAO,aAAa;AAEpC,IAAMC,YAAYH,aAAa,SAACI;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYA,OAAO,IAAMC,cAAmD,iBAM1D;oCALFC,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAsBZ,aAAAA,UAAU,IAAI,EAAE;QAACc,MAAM;QAAeJ,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,IAAjFG,UAAef,WAAfe,SAASC,KAAMhB,WAANgB;IAChB,IAA0BjB,YAAAA,YAAnBkB,QAAmBlB,UAAnBkB,OAAOC,WAAYnB,UAAZmB;IAEd,IAAMC,qBAAqB,SAACC,OAAyC;QACjE,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPH,SAAS,SAACK;mBAA2B,wCAC9BA;gBACHC,YAAYD,UAAUC,UAAU,GAC1B;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,UAAU,CAACE,QAAQ;gBAAA,IACtDH,UAAUC,UAAU;gBAC1BG,cAAcN;;;IAEtB;IAEA,qBACI,KAACvB;QACG8B,WAAWb,QAAQb,OAAO;QAC1BO,aAAaA;QACboB,IAAG;QACHC,4BAAc,KAAClC;YAAemC,QAAQ;YAAIH,WAAWZ,GAAI,qBAACD,QAAQX,KAAK,EAAG,CAACa,MAAMU,YAAY;;QAC7FN,OAAOJ,MAAMU,YAAY;QACzBK,UAAUb;OACNN;AAGhB,EAAE"}
+{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, createStyles, DefaultProps, Selectors, TextInput} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {ChangeEventHandler, FunctionComponent, MouseEventHandler} from 'react';\n\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n    wrapper: {\n        marginBottom: '0 !important',\n    },\n    empty: {\n        color: theme.colors.gray[4],\n    },\n}));\n\ntype TableFilterStylesNames = Selectors<typeof useStyles>;\ninterface TableFilterProps extends DefaultProps<TableFilterStylesNames> {\n    /**\n     * The placeholder for the filter input\n     *\n     * @default \"Search by any field\"\n     */\n    placeholder?: string;\n}\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n    placeholder = 'Search by any field',\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}) => {\n    const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n    const {state, setState} = useTable();\n\n    const changeFilterValue = (value: string) => {\n        setState((prevState: TableState) => ({\n            ...prevState,\n            pagination: prevState.pagination\n                ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n                : prevState.pagination,\n            globalFilter: value,\n        }));\n    };\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const {value} = event.currentTarget;\n        changeFilterValue(value);\n    };\n\n    const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n        changeFilterValue('');\n    };\n\n    return (\n        <TextInput\n            className={classes.wrapper}\n            placeholder={placeholder}\n            mb=\"md\"\n            rightSection={\n                state.globalFilter ? (\n                    <ActionIcon onClick={handleClear}>\n                        <CrossSize16Px height={16} />\n                    </ActionIcon>\n                ) : (\n                    <SearchSize16Px height={14} className={classes.empty} />\n                )\n            }\n            value={state.globalFilter}\n            onChange={handleChange}\n            {...others}\n        />\n    );\n};\n"],"names":["CrossSize16Px","SearchSize16Px","ActionIcon","createStyles","TextInput","useTable","useStyles","theme","wrapper","marginBottom","empty","color","colors","gray","TableFilter","placeholder","classNames","styles","unstyled","others","classes","name","state","setState","changeFilterValue","value","prevState","pagination","pageIndex","pageSize","globalFilter","handleChange","event","currentTarget","handleClear","className","mb","rightSection","onClick","height","onChange"],"mappings":";;;;AAAA,SAAQA,aAAa,EAAEC,cAAc,QAAO,8BAA8B;AAC1E,SAAQC,UAAU,EAAEC,YAAY,EAA2BC,SAAS,QAAO,gBAAgB;AAI3F,SAAQC,QAAQ,QAAO,aAAa;AAEpC,IAAMC,YAAYH,aAAa,SAACI;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYA,OAAO,IAAMC,cAAmD,iBAM1D;oCALFC,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWd,UAAU,IAAI,EAAE;QAACe,MAAM;QAAeL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EE;IACP,IAA0Bf,YAAAA,YAAnBiB,QAAmBjB,UAAnBiB,OAAOC,WAAYlB,UAAZkB;IAEd,IAAMC,oBAAoB,SAACC,OAAkB;QACzCF,SAAS,SAACG;mBAA2B,wCAC9BA;gBACHC,YAAYD,UAAUC,UAAU,GAC1B;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,UAAU,CAACE,QAAQ;gBAAA,IACtDH,UAAUC,UAAU;gBAC1BG,cAAcL;;;IAEtB;IAEA,IAAMM,eAAqD,SAACC,OAAU;QAClE,IAAM,AAACP,QAASO,MAAMC,aAAa,CAA5BR;QACPD,kBAAkBC;IACtB;IAEA,IAAMS,cAAoD,WAAM;QAC5DV,kBAAkB;IACtB;IAEA,qBACI,KAACpB;QACG+B,WAAWf,QAAQZ,OAAO;QAC1BO,aAAaA;QACbqB,IAAG;QACHC,cACIf,MAAMQ,YAAY,iBACd,KAAC5B;YAAWoC,SAASJ;sBACjB,cAAA,KAAClC;gBAAcuC,QAAQ;;2BAG3B,KAACtC;YAAesC,QAAQ;YAAIJ,WAAWf,QAAQV,KAAK;UACvD;QAELe,OAAOH,MAAMQ,YAAY;QACzBU,UAAUT;OACNZ;AAGhB,EAAE"}

package/dist/esm/theme/Theme.js

@@ -24,32 +24,32 @@ export var plasmaTheme = {
             h1: {
                 fontSize: 48,
                 lineHeight: "56px",
-                fontWeight: undefined
+                fontWeight: 300
             },
             h2: {
                 fontSize: 32,
                 lineHeight: "40px",
-                fontWeight: undefined
+                fontWeight: 500
             },
             h3: {
-                fontSize: 28,
-                lineHeight: "40px",
-                fontWeight: undefined
-            },
-            h4: {
                 fontSize: 24,
                 lineHeight: "32px",
-                fontWeight: undefined
+                fontWeight: 500
             },
-            h5: {
+            h4: {
                 fontSize: 18,
                 lineHeight: "28px",
-                fontWeight: undefined
+                fontWeight: 300
+            },
+            h5: {
+                fontSize: 14,
+                lineHeight: "20px",
+                fontWeight: 500
             },
             h6: {
-                fontSize: 16,
-                lineHeight: "24px",
-                fontWeight: undefined
+                fontSize: 12,
+                lineHeight: "16px",
+                fontWeight: 500
             }
         }
     },

package/dist/esm/theme/Theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {ArrowHeadRightSize24Px, InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {ButtonStylesParams, MantineThemeOverride, ModalStylesParams} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n    // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts\n    colorScheme: 'light',\n    fontFamily: 'canada-type-gibson, sans-serif',\n    black: color.primary.gray[9],\n    defaultRadius: 8,\n    spacing: {\n        xs: 8,\n        sm: 16,\n        md: 24,\n        lg: 32,\n        xl: 40,\n    },\n    primaryColor: 'action',\n    headings: {\n        fontFamily: 'canada-type-gibson, sans-serif',\n        fontWeight: 500,\n        sizes: {\n            h1: {fontSize: 48, lineHeight: '56px', fontWeight: undefined},\n            h2: {fontSize: 32, lineHeight: '40px', fontWeight: undefined},\n            h3: {fontSize: 28, lineHeight: '40px', fontWeight: undefined},\n            h4: {fontSize: 24, lineHeight: '32px', fontWeight: undefined},\n            h5: {fontSize: 18, lineHeight: '28px', fontWeight: undefined},\n            h6: {fontSize: 16, lineHeight: '24px', fontWeight: undefined},\n        },\n    },\n    shadows: {\n        xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n        sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n        md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n        lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n        xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n    },\n    colors: PlasmaColors,\n    components: {\n        Alert: {\n            defaultProps: {\n                icon: <InfoSize24Px height={24} />,\n                color: 'navy',\n            },\n            styles: {\n                title: {\n                    fontWeight: 500,\n                },\n            },\n        },\n        Title: {\n            styles: (theme) => ({\n                root: {\n                    '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em', color: theme.colors.gray[9]},\n                },\n            }),\n        },\n        Button: {\n            styles: (theme, params: ButtonStylesParams) => ({\n                root: {\n                    fontWeight: 400,\n                    backgroundColor: params.variant === 'outline' ? 'white' : undefined,\n                },\n            }),\n        },\n        Modal: {\n            styles: (theme, {size, fullScreen}: ModalStylesParams) => ({\n                modal: {\n                    width: fullScreen\n                        ? undefined\n                        : theme.fn.size({size, sizes: {xs: 440, sm: 550, md: 800, lg: 1334, xl: '85%'}}),\n                },\n            }),\n            defaultProps: {\n                overlayColor: color.primary.navy[9],\n                overlayOpacity: 0.9,\n            },\n        },\n        InputWrapper: {\n            defaultProps: {\n                withAsterisk: false,\n            },\n            styles: (theme) => ({\n                label: {\n                    marginBottom: theme.spacing.xs,\n                    lineHeight: '20px',\n                },\n                description: {\n                    lineHeight: '20px',\n                    fontSize: theme.fontSizes.sm,\n                    color: theme.colors.gray[7],\n                    marginBottom: theme.spacing.xs,\n                },\n                invalid: {\n                    color: theme.colors.red[9],\n                    borderColor: theme.colors.red[6],\n                },\n                error: {\n                    color: theme.colors.red[9],\n                },\n            }),\n        },\n        TextInput: {\n            defaultProps: {\n                radius: 8,\n            },\n        },\n        Tooltip: {\n            defaultProps: {\n                color: 'navy',\n                withArrow: true,\n                withinPortal: true,\n                multiline: true,\n            },\n        },\n        Breadcrumbs: {\n            defaultProps: {\n                separator: <ArrowHeadRightSize24Px height={24} />,\n            },\n        },\n        Loader: {\n            defaultProps: {\n                variant: 'dots',\n                color: 'action',\n            },\n        },\n        DateRangePicker: {\n            styles: {\n                cell: {\n                    textAlign: 'center',\n                },\n            },\n        },\n        Anchor: {\n            defaultProps: {\n                color: 'action',\n            },\n            styles: (theme) => ({\n                root: {\n                    ...theme.fn.hover({\n                        textDecoration: 'underline',\n                        color: theme.colors.action[8],\n                    }),\n                },\n            }),\n        },\n        Checkbox: {\n            defaultProps: {\n                radius: 'sm',\n            },\n        },\n        List: {\n            styles: () => ({\n                root: {\n                    listStyleType: 'disc',\n                },\n            }),\n        },\n        Radio: {\n            styles: {\n                labelWrapper: {\n                    display: 'flex',\n                    alignItems: 'flex-start',\n                },\n            },\n        },\n        Popover: {\n            defaultProps: {\n                shadow: 'md',\n                withArrow: true,\n            },\n        },\n        Badge: {\n            styles: {\n                root: {\n                    textTransform: 'none',\n                    padding: '4px 8px',\n                    fontWeight: 500,\n                },\n            },\n        },\n        ColorSwatch: {\n            defaultProps: {\n                size: 8,\n                withShadow: false,\n            },\n        },\n        MenuItem: {\n            defaultProps: {\n                fw: 300,\n            },\n        },\n    },\n};\n"],"names":["ArrowHeadRightSize24Px","InfoSize24Px","color","PlasmaColors","plasmaTheme","colorScheme","fontFamily","black","primary","gray","defaultRadius","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","lineHeight","undefined","h2","h3","h4","h5","h6","shadows","colors","components","Alert","defaultProps","icon","height","styles","title","Title","theme","root","letterSpacing","Button","params","backgroundColor","variant","Modal","size","fullScreen","modal","width","fn","overlayColor","navy","overlayOpacity","InputWrapper","withAsterisk","label","marginBottom","description","fontSizes","invalid","red","borderColor","error","TextInput","radius","Tooltip","withArrow","withinPortal","multiline","Breadcrumbs","separator","Loader","DateRangePicker","cell","textAlign","Anchor","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","padding","ColorSwatch","withShadow","MenuItem","fw"],"mappings":"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"}
+{"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {ArrowHeadRightSize24Px, InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {ButtonStylesParams, MantineThemeOverride, ModalStylesParams} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n    // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts\n    colorScheme: 'light',\n    fontFamily: 'canada-type-gibson, sans-serif',\n    black: color.primary.gray[9],\n    defaultRadius: 8,\n    spacing: {\n        xs: 8,\n        sm: 16,\n        md: 24,\n        lg: 32,\n        xl: 40,\n    },\n    primaryColor: 'action',\n    headings: {\n        fontFamily: 'canada-type-gibson, sans-serif',\n        fontWeight: 500,\n        sizes: {\n            h1: {fontSize: 48, lineHeight: '56px', fontWeight: 300},\n            h2: {fontSize: 32, lineHeight: '40px', fontWeight: 500},\n            h3: {fontSize: 24, lineHeight: '32px', fontWeight: 500},\n            h4: {fontSize: 18, lineHeight: '28px', fontWeight: 300},\n            h5: {fontSize: 14, lineHeight: '20px', fontWeight: 500},\n            h6: {fontSize: 12, lineHeight: '16px', fontWeight: 500},\n        },\n    },\n    shadows: {\n        xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n        sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n        md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n        lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n        xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n    },\n    colors: PlasmaColors,\n    components: {\n        Alert: {\n            defaultProps: {\n                icon: <InfoSize24Px height={24} />,\n                color: 'navy',\n            },\n            styles: {\n                title: {\n                    fontWeight: 500,\n                },\n            },\n        },\n        Title: {\n            styles: (theme) => ({\n                root: {\n                    '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em', color: theme.colors.gray[9]},\n                },\n            }),\n        },\n        Button: {\n            styles: (theme, params: ButtonStylesParams) => ({\n                root: {\n                    fontWeight: 400,\n                    backgroundColor: params.variant === 'outline' ? 'white' : undefined,\n                },\n            }),\n        },\n        Modal: {\n            styles: (theme, {size, fullScreen}: ModalStylesParams) => ({\n                modal: {\n                    width: fullScreen\n                        ? undefined\n                        : theme.fn.size({size, sizes: {xs: 440, sm: 550, md: 800, lg: 1334, xl: '85%'}}),\n                },\n            }),\n            defaultProps: {\n                overlayColor: color.primary.navy[9],\n                overlayOpacity: 0.9,\n            },\n        },\n        InputWrapper: {\n            defaultProps: {\n                withAsterisk: false,\n            },\n            styles: (theme) => ({\n                label: {\n                    marginBottom: theme.spacing.xs,\n                    lineHeight: '20px',\n                },\n                description: {\n                    lineHeight: '20px',\n                    fontSize: theme.fontSizes.sm,\n                    color: theme.colors.gray[7],\n                    marginBottom: theme.spacing.xs,\n                },\n                invalid: {\n                    color: theme.colors.red[9],\n                    borderColor: theme.colors.red[6],\n                },\n                error: {\n                    color: theme.colors.red[9],\n                },\n            }),\n        },\n        TextInput: {\n            defaultProps: {\n                radius: 8,\n            },\n        },\n        Tooltip: {\n            defaultProps: {\n                color: 'navy',\n                withArrow: true,\n                withinPortal: true,\n                multiline: true,\n            },\n        },\n        Breadcrumbs: {\n            defaultProps: {\n                separator: <ArrowHeadRightSize24Px height={24} />,\n            },\n        },\n        Loader: {\n            defaultProps: {\n                variant: 'dots',\n                color: 'action',\n            },\n        },\n        DateRangePicker: {\n            styles: {\n                cell: {\n                    textAlign: 'center',\n                },\n            },\n        },\n        Anchor: {\n            defaultProps: {\n                color: 'action',\n            },\n            styles: (theme) => ({\n                root: {\n                    ...theme.fn.hover({\n                        textDecoration: 'underline',\n                        color: theme.colors.action[8],\n                    }),\n                },\n            }),\n        },\n        Checkbox: {\n            defaultProps: {\n                radius: 'sm',\n            },\n        },\n        List: {\n            styles: () => ({\n                root: {\n                    listStyleType: 'disc',\n                },\n            }),\n        },\n        Radio: {\n            styles: {\n                labelWrapper: {\n                    display: 'flex',\n                    alignItems: 'flex-start',\n                },\n            },\n        },\n        Popover: {\n            defaultProps: {\n                shadow: 'md',\n                withArrow: true,\n            },\n        },\n        Badge: {\n            styles: {\n                root: {\n                    textTransform: 'none',\n                    padding: '4px 8px',\n                    fontWeight: 500,\n                },\n            },\n        },\n        ColorSwatch: {\n            defaultProps: {\n                size: 8,\n                withShadow: false,\n            },\n        },\n        MenuItem: {\n            defaultProps: {\n                fw: 300,\n            },\n        },\n    },\n};\n"],"names":["ArrowHeadRightSize24Px","InfoSize24Px","color","PlasmaColors","plasmaTheme","colorScheme","fontFamily","black","primary","gray","defaultRadius","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","lineHeight","h2","h3","h4","h5","h6","shadows","colors","components","Alert","defaultProps","icon","height","styles","title","Title","theme","root","letterSpacing","Button","params","backgroundColor","variant","undefined","Modal","size","fullScreen","modal","width","fn","overlayColor","navy","overlayOpacity","InputWrapper","withAsterisk","label","marginBottom","description","fontSizes","invalid","red","borderColor","error","TextInput","radius","Tooltip","withArrow","withinPortal","multiline","Breadcrumbs","separator","Loader","DateRangePicker","cell","textAlign","Anchor","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","padding","ColorSwatch","withShadow","MenuItem","fw"],"mappings":";;AAAA,SAAQA,sBAAsB,EAAEC,YAAY,QAAO,8BAA8B;AACjF,SAAQC,KAAK,QAAO,yBAAyB;AAG7C,SAAQC,YAAY,QAAO,iBAAiB;AAE5C,OAAO,IAAMC,cAAoC;IAC7C,2HAA2H;IAC3HC,aAAa;IACbC,YAAY;IACZC,OAAOL,MAAMM,OAAO,CAACC,IAAI,CAAC,EAAE;IAC5BC,eAAe;IACfC,SAAS;QACLC,IAAI;QACJC,IAAI;QACJC,IAAI;QACJC,IAAI;QACJC,IAAI;IACR;IACAC,cAAc;IACdC,UAAU;QACNZ,YAAY;QACZa,YAAY;QACZC,OAAO;YACHC,IAAI;gBAACC,UAAU;gBAAIC,YAAY;gBAAQJ,YAAY;YAAG;YACtDK,IAAI;gBAACF,UAAU;gBAAIC,YAAY;gBAAQJ,YAAY;YAAG;YACtDM,IAAI;gBAACH,UAAU;gBAAIC,YAAY;gBAAQJ,YAAY;YAAG;YACtDO,IAAI;gBAACJ,UAAU;gBAAIC,YAAY;gBAAQJ,YAAY;YAAG;YACtDQ,IAAI;gBAACL,UAAU;gBAAIC,YAAY;gBAAQJ,YAAY;YAAG;YACtDS,IAAI;gBAACN,UAAU;gBAAIC,YAAY;gBAAQJ,YAAY;YAAG;QAC1D;IACJ;IACAU,SAAS;QACLjB,IAAI;QACJC,IAAI;QACJC,IAAI;QACJC,IAAI;QACJC,IAAI;IACR;IACAc,QAAQ3B;IACR4B,YAAY;QACRC,OAAO;YACHC,cAAc;gBACVC,oBAAM,KAACjC;oBAAakC,QAAQ;;gBAC5BjC,OAAO;YACX;YACAkC,QAAQ;gBACJC,OAAO;oBACHlB,YAAY;gBAChB;YACJ;QACJ;QACAmB,OAAO;YACHF,QAAQ,SAACG;uBAAW;oBAChBC,MAAM;wBACF,2BAA2B;4BAACC,eAAe;4BAAWvC,OAAOqC,MAAMT,MAAM,CAACrB,IAAI,CAAC,EAAE;wBAAA;oBACrF;gBACJ;;QACJ;QACAiC,QAAQ;YACJN,QAAQ,SAACG,OAAOI;uBAAgC;oBAC5CH,MAAM;wBACFrB,YAAY;wBACZyB,iBAAiBD,OAAOE,OAAO,KAAK,YAAY,UAAUC,SAAS;oBACvE;gBACJ;;QACJ;QACAC,OAAO;YACHX,QAAQ,SAACG;oBAAQS,aAAAA,MAAMC,mBAAAA;uBAAoC;oBACvDC,OAAO;wBACHC,OAAOF,aACDH,YACAP,MAAMa,EAAE,CAACJ,IAAI,CAAC;4BAACA,MAAAA;4BAAM5B,OAAO;gCAACR,IAAI;gCAAKC,IAAI;gCAAKC,IAAI;gCAAKC,IAAI;gCAAMC,IAAI;4BAAK;wBAAC,EAAE;oBACxF;gBACJ;;YACAiB,cAAc;gBACVoB,cAAcnD,MAAMM,OAAO,CAAC8C,IAAI,CAAC,EAAE;gBACnCC,gBAAgB;YACpB;QACJ;QACAC,cAAc;YACVvB,cAAc;gBACVwB,cAAc,KAAK;YACvB;YACArB,QAAQ,SAACG;uBAAW;oBAChBmB,OAAO;wBACHC,cAAcpB,MAAM5B,OAAO,CAACC,EAAE;wBAC9BW,YAAY;oBAChB;oBACAqC,aAAa;wBACTrC,YAAY;wBACZD,UAAUiB,MAAMsB,SAAS,CAAChD,EAAE;wBAC5BX,OAAOqC,MAAMT,MAAM,CAACrB,IAAI,CAAC,EAAE;wBAC3BkD,cAAcpB,MAAM5B,OAAO,CAACC,EAAE;oBAClC;oBACAkD,SAAS;wBACL5D,OAAOqC,MAAMT,MAAM,CAACiC,GAAG,CAAC,EAAE;wBAC1BC,aAAazB,MAAMT,MAAM,CAACiC,GAAG,CAAC,EAAE;oBACpC;oBACAE,OAAO;wBACH/D,OAAOqC,MAAMT,MAAM,CAACiC,GAAG,CAAC,EAAE;oBAC9B;gBACJ;;QACJ;QACAG,WAAW;YACPjC,cAAc;gBACVkC,QAAQ;YACZ;QACJ;QACAC,SAAS;YACLnC,cAAc;gBACV/B,OAAO;gBACPmE,WAAW,IAAI;gBACfC,cAAc,IAAI;gBAClBC,WAAW,IAAI;YACnB;QACJ;QACAC,aAAa;YACTvC,cAAc;gBACVwC,yBAAW,KAACzE;oBAAuBmC,QAAQ;;YAC/C;QACJ;QACAuC,QAAQ;YACJzC,cAAc;gBACVY,SAAS;gBACT3C,OAAO;YACX;QACJ;QACAyE,iBAAiB;YACbvC,QAAQ;gBACJwC,MAAM;oBACFC,WAAW;gBACf;YACJ;QACJ;QACAC,QAAQ;YACJ7C,cAAc;gBACV/B,OAAO;YACX;YACAkC,QAAQ,SAACG;uBAAW;oBAChBC,MAAM,mBACCD,MAAMa,EAAE,CAAC2B,KAAK,CAAC;wBACdC,gBAAgB;wBAChB9E,OAAOqC,MAAMT,MAAM,CAACmD,MAAM,CAAC,EAAE;oBACjC;gBAER;;QACJ;QACAC,UAAU;YACNjD,cAAc;gBACVkC,QAAQ;YACZ;QACJ;QACAgB,MAAM;YACF/C,QAAQ;uBAAO;oBACXI,MAAM;wBACF4C,eAAe;oBACnB;gBACJ;;QACJ;QACAC,OAAO;YACHjD,QAAQ;gBACJkD,cAAc;oBACVC,SAAS;oBACTC,YAAY;gBAChB;YACJ;QACJ;QACAC,SAAS;YACLxD,cAAc;gBACVyD,QAAQ;gBACRrB,WAAW,IAAI;YACnB;QACJ;QACAsB,OAAO;YACHvD,QAAQ;gBACJI,MAAM;oBACFoD,eAAe;oBACfC,SAAS;oBACT1E,YAAY;gBAChB;YACJ;QACJ;QACA2E,aAAa;YACT7D,cAAc;gBACVe,MAAM;gBACN+C,YAAY,KAAK;YACrB;QACJ;QACAC,UAAU;YACN/D,cAAc;gBACVgE,IAAI;YACR;QACJ;IACJ;AACJ,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "49.2.4",
+  "version": "49.3.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",

package/src/components/header/__tests__/Header.spec.tsx

@@ -8,23 +8,23 @@ describe('Header', () => {
 
         const header = screen.getByRole('heading');
         expect(header).toMatchInlineSnapshot(`
-            <h4
-              class="mantine-Text-root mantine-Title-root mantine-1kh8n4o"
+          <h4
+            class="mantine-Text-root mantine-Title-root mantine-xv5lu6"
+          >
+            <div
+              class="mantine-Group-root mantine-fila1z"
             >
               <div
-                class="mantine-Group-root mantine-fila1z"
+                class="mantine-Breadcrumbs-root mantine-16ttirm"
               >
                 <div
-                  class="mantine-Breadcrumbs-root mantine-16ttirm"
+                  class="mantine-1iqrsug mantine-Breadcrumbs-breadcrumb"
                 >
-                  <div
-                    class="mantine-1iqrsug mantine-Breadcrumbs-breadcrumb"
-                  >
-                    child 1
-                  </div>
+                  child 1
                 </div>
               </div>
-            </h4>
+            </div>
+          </h4>
         `);
     });
 

package/src/components/table/TableFilter.tsx

@@ -1,7 +1,8 @@
-import {SearchSize16Px} from '@coveord/plasma-react-icons';
-import {createStyles, TextInput, Selectors, DefaultProps} from '@mantine/core';
+import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';
+import {ActionIcon, createStyles, DefaultProps, Selectors, TextInput} from '@mantine/core';
 import {TableState} from '@tanstack/react-table';
-import {ChangeEvent, FunctionComponent} from 'react';
+import {ChangeEventHandler, FunctionComponent, MouseEventHandler} from 'react';
+
 import {useTable} from './useTable';
 
 const useStyles = createStyles((theme) => ({
@@ -30,11 +31,10 @@ export const TableFilter: FunctionComponent<TableFilterProps> = ({
     unstyled,
     ...others
 }) => {
-    const {classes, cx} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});
+    const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});
     const {state, setState} = useTable();
 
-    const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
-        const {value} = event.currentTarget;
+    const changeFilterValue = (value: string) => {
         setState((prevState: TableState) => ({
             ...prevState,
             pagination: prevState.pagination
@@ -44,14 +44,31 @@ export const TableFilter: FunctionComponent<TableFilterProps> = ({
         }));
     };
 
+    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+        const {value} = event.currentTarget;
+        changeFilterValue(value);
+    };
+
+    const handleClear: MouseEventHandler<HTMLButtonElement> = () => {
+        changeFilterValue('');
+    };
+
     return (
         <TextInput
             className={classes.wrapper}
             placeholder={placeholder}
             mb="md"
-            rightSection={<SearchSize16Px height={14} className={cx({[classes.empty]: !state.globalFilter})} />}
+            rightSection={
+                state.globalFilter ? (
+                    <ActionIcon onClick={handleClear}>
+                        <CrossSize16Px height={16} />
+                    </ActionIcon>
+                ) : (
+                    <SearchSize16Px height={14} className={classes.empty} />
+                )
+            }
             value={state.globalFilter}
-            onChange={handleSearchChange}
+            onChange={handleChange}
             {...others}
         />
     );

package/src/components/table/__tests__/TableFilter.spec.tsx

@@ -60,6 +60,20 @@ describe('Table.Filter', () => {
         );
     });
 
+    it('clears the filter when clicking on the cross icon', async () => {
+        const user = userEvent.setup({delay: null});
+        render(
+            <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} initialState={{globalFilter: 'foo'}}>
+                <Table.Header>
+                    <Table.Filter placeholder="hello fruits" />
+                </Table.Header>
+            </Table>
+        );
+        expect(screen.getByRole('textbox')).toHaveValue('foo');
+        await user.click(screen.getByRole('button', {name: /cross/i}));
+        expect(screen.getByRole('textbox')).toHaveValue('');
+    });
+
     describe('when multi row selection is enabled', () => {
         it('does not unselect rows that get filtered out', async () => {
             const user = userEvent.setup({delay: null});

package/src/theme/Theme.tsx

@@ -22,12 +22,12 @@ export const plasmaTheme: MantineThemeOverride = {
         fontFamily: 'canada-type-gibson, sans-serif',
         fontWeight: 500,
         sizes: {
-            h1: {fontSize: 48, lineHeight: '56px', fontWeight: undefined},
-            h2: {fontSize: 32, lineHeight: '40px', fontWeight: undefined},
-            h3: {fontSize: 28, lineHeight: '40px', fontWeight: undefined},
-            h4: {fontSize: 24, lineHeight: '32px', fontWeight: undefined},
-            h5: {fontSize: 18, lineHeight: '28px', fontWeight: undefined},
-            h6: {fontSize: 16, lineHeight: '24px', fontWeight: undefined},
+            h1: {fontSize: 48, lineHeight: '56px', fontWeight: 300},
+            h2: {fontSize: 32, lineHeight: '40px', fontWeight: 500},
+            h3: {fontSize: 24, lineHeight: '32px', fontWeight: 500},
+            h4: {fontSize: 18, lineHeight: '28px', fontWeight: 300},
+            h5: {fontSize: 14, lineHeight: '20px', fontWeight: 500},
+            h6: {fontSize: 12, lineHeight: '16px', fontWeight: 500},
         },
     },
     shadows: {