@coveord/plasma-mantine 47.0.1-next.2

package/dist/esm/hooks/useControlledList.js

@@ -0,0 +1,44 @@
+import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+import _to_consumable_array from "@swc/helpers/src/_to_consumable_array.mjs";
+import { useUncontrolled } from "@mantine/hooks";
+/**
+ * Manage a list of items in a controlled fashion, to be used with inputs
+ */ export var useControlledList = function(param) {
+    var defaultValue = param.defaultValue, value = param.value, onChange = param.onChange;
+    var ref = _sliced_to_array(useUncontrolled({
+        value: value,
+        defaultValue: defaultValue,
+        finalValue: [],
+        onChange: onChange
+    }), 2), values = ref[0], handleChange = ref[1];
+    var remove = function(index) {
+        var newValues = values.filter(function(_, i) {
+            return i !== index;
+        });
+        handleChange === null || handleChange === void 0 ? void 0 : handleChange(newValues);
+    };
+    var append = function(item) {
+        var newValues = _to_consumable_array(values).concat([
+            item
+        ]);
+        handleChange === null || handleChange === void 0 ? void 0 : handleChange(newValues);
+    };
+    var reorder = function(param) {
+        var from = param.from, to = param.to;
+        var newValues = _to_consumable_array(values);
+        var item = values[from];
+        newValues.splice(from, 1);
+        newValues.splice(to, 0, item);
+        handleChange === null || handleChange === void 0 ? void 0 : handleChange(newValues);
+    };
+    return [
+        values,
+        {
+            remove: remove,
+            append: append,
+            reorder: reorder
+        }
+    ];
+};
+
+//# sourceMappingURL=useControlledList.js.map

package/dist/esm/hooks/useControlledList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useControlledList.ts"],"sourcesContent":["import {useUncontrolled} from '@mantine/hooks';\n\ninterface UseControlledList<T> {\n    /** Initial value for uncontrolled state */\n    defaultValue?: T[];\n    /** Value for controlled state */\n    value?: T[];\n    /** Controlled state onChange handler */\n    onChange?: (values: T[]) => void;\n}\n\ninterface ListHandlers<T> {\n    /** Appends the item at the end of the list */\n    append: (item: T) => void;\n    /** Removes the item at the index from the list */\n    remove: (index: number) => void;\n    /** Moves the item at the \"from\" position to another position within the list  */\n    reorder: ({from, to}: {from: number; to: number}) => void;\n}\n\n/**\n * Manage a list of items in a controlled fashion, to be used with inputs\n */\nexport const useControlledList = <T>({defaultValue, value, onChange}: UseControlledList<T>): [T[], ListHandlers<T>] => {\n    const [values, handleChange] = useUncontrolled({\n        value,\n        defaultValue,\n        finalValue: [],\n        onChange,\n    });\n\n    const remove = (index: number) => {\n        const newValues = values.filter((_, i) => i !== index);\n        handleChange?.(newValues);\n    };\n\n    const append = (item: T) => {\n        const newValues = [...values, item];\n        handleChange?.(newValues);\n    };\n\n    const reorder = ({from, to}: {from: number; to: number}) => {\n        const newValues = [...values];\n        const item = values[from];\n\n        newValues.splice(from, 1);\n        newValues.splice(to, 0, item);\n\n        handleChange?.(newValues);\n    };\n\n    return [values, {remove, append, reorder}];\n};\n"],"names":["useUncontrolled","useControlledList","defaultValue","value","onChange","finalValue","values","handleChange","remove","index","newValues","filter","_","i","append","item","reorder","from","to","splice"],"mappings":"AAAA;;AAAA,SAAQA,eAAe,QAAO,gBAAgB,CAAC;AAoB/C;;CAEC,GACD,OAAO,IAAMC,iBAAiB,GAAG,gBAAsF;QAAjFC,YAAY,SAAZA,YAAY,EAAEC,KAAK,SAALA,KAAK,EAAEC,QAAQ,SAARA,QAAQ;IAC/D,IAA+BJ,GAK7B,oBAL6BA,eAAe,CAAC;QAC3CG,KAAK,EAALA,KAAK;QACLD,YAAY,EAAZA,YAAY;QACZG,UAAU,EAAE,EAAE;QACdD,QAAQ,EAARA,QAAQ;KACX,CAAC,IAAA,EALKE,MAAM,GAAkBN,GAK7B,GALW,EAAEO,YAAY,GAAIP,GAK7B,GALyB,AAKxB;IAEH,IAAMQ,MAAM,GAAG,SAACC,KAAa,EAAK;QAC9B,IAAMC,SAAS,GAAGJ,MAAM,CAACK,MAAM,CAAC,SAACC,CAAC,EAAEC,CAAC;mBAAKA,CAAC,KAAKJ,KAAK;SAAA,CAAC,AAAC;QACvDF,YAAY,aAAZA,YAAY,WAAa,GAAzBA,KAAAA,CAAyB,GAAzBA,YAAY,CAAGG,SAAS,CAAC,CAAC;IAC9B,CAAC,AAAC;IAEF,IAAMI,MAAM,GAAG,SAACC,IAAO,EAAK;QACxB,IAAML,SAAS,GAAG,AAAC,qBAAGJ,MAAM,CAANA,QAAJ;YAAYS,IAAI;SAAC,CAAA,AAAC;QACpCR,YAAY,aAAZA,YAAY,WAAa,GAAzBA,KAAAA,CAAyB,GAAzBA,YAAY,CAAGG,SAAS,CAAC,CAAC;IAC9B,CAAC,AAAC;IAEF,IAAMM,OAAO,GAAG,gBAA4C;YAA1CC,IAAI,SAAJA,IAAI,EAAEC,EAAE,SAAFA,EAAE;QACtB,IAAMR,SAAS,GAAI,qBAAGJ,MAAM,CAANA,AAAO,AAAC;QAC9B,IAAMS,IAAI,GAAGT,MAAM,CAACW,IAAI,CAAC,AAAC;QAE1BP,SAAS,CAACS,MAAM,CAACF,IAAI,EAAE,CAAC,CAAC,CAAC;QAC1BP,SAAS,CAACS,MAAM,CAACD,EAAE,EAAE,CAAC,EAAEH,IAAI,CAAC,CAAC;QAE9BR,YAAY,aAAZA,YAAY,WAAa,GAAzBA,KAAAA,CAAyB,GAAzBA,YAAY,CAAGG,SAAS,CAAC,CAAC;IAC9B,CAAC,AAAC;IAEF,OAAO;QAACJ,MAAM;QAAE;YAACE,MAAM,EAANA,MAAM;YAAEM,MAAM,EAANA,MAAM;YAAEE,OAAO,EAAPA,OAAO;SAAC;KAAC,CAAC;AAC/C,CAAC,CAAC"}

package/dist/esm/hooks/useParentHeight.js

@@ -0,0 +1,28 @@
+import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+import { useEffect, useRef, useState } from "react";
+var getElementInnerHeight = function(el) {
+    var fullHeight = el.getBoundingClientRect().height;
+    var cs = getComputedStyle(el);
+    var padding = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
+    var border = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
+    return fullHeight - padding - border;
+};
+/**
+ * Computes the available height of the parent element on mount
+ */ export var useParentHeight = function() {
+    var ref = _sliced_to_array(useState(-1), 2), height = ref[0], setHeight = ref[1];
+    var ref1 = useRef();
+    useEffect(function() {
+        if (ref1.current) {
+            setHeight(getElementInnerHeight(ref1.current.parentElement));
+        }
+    }, [
+        ref1.current
+    ]);
+    return [
+        height,
+        ref1
+    ];
+};
+
+//# sourceMappingURL=useParentHeight.js.map

package/dist/esm/hooks/useParentHeight.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useParentHeight.ts"],"sourcesContent":["import {useEffect, useRef, useState} from 'react';\n\nconst getElementInnerHeight = (el: HTMLElement): number => {\n    const fullHeight = el.getBoundingClientRect().height;\n    const cs = getComputedStyle(el);\n    const padding = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);\n    const border = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);\n    return fullHeight - padding - border;\n};\n\n/**\n * Computes the available height of the parent element on mount\n */\nexport const useParentHeight = (): [number, React.MutableRefObject<HTMLDivElement>] => {\n    const [height, setHeight] = useState(-1);\n    const ref = useRef<HTMLDivElement>();\n\n    useEffect(() => {\n        if (ref.current) {\n            setHeight(getElementInnerHeight(ref.current.parentElement));\n        }\n    }, [ref.current]);\n\n    return [height, ref];\n};\n"],"names":["useEffect","useRef","useState","getElementInnerHeight","el","fullHeight","getBoundingClientRect","height","cs","getComputedStyle","padding","parseFloat","paddingTop","paddingBottom","border","borderTopWidth","borderBottomWidth","useParentHeight","setHeight","ref","current","parentElement"],"mappings":"AAAA;AAAA,SAAQA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAO,OAAO,CAAC;AAElD,IAAMC,qBAAqB,GAAG,SAACC,EAAe,EAAa;IACvD,IAAMC,UAAU,GAAGD,EAAE,CAACE,qBAAqB,EAAE,CAACC,MAAM,AAAC;IACrD,IAAMC,EAAE,GAAGC,gBAAgB,CAACL,EAAE,CAAC,AAAC;IAChC,IAAMM,OAAO,GAAGC,UAAU,CAACH,EAAE,CAACI,UAAU,CAAC,GAAGD,UAAU,CAACH,EAAE,CAACK,aAAa,CAAC,AAAC;IACzE,IAAMC,MAAM,GAAGH,UAAU,CAACH,EAAE,CAACO,cAAc,CAAC,GAAGJ,UAAU,CAACH,EAAE,CAACQ,iBAAiB,CAAC,AAAC;IAChF,OAAOX,UAAU,GAAGK,OAAO,GAAGI,MAAM,CAAC;AACzC,CAAC,AAAC;AAEF;;CAEC,GACD,OAAO,IAAMG,eAAe,GAAG,WAAwD;IACnF,IAA4Bf,GAAY,oBAAZA,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAA,EAAjCK,MAAM,GAAeL,GAAY,GAA3B,EAAEgB,SAAS,GAAIhB,GAAY,GAAhB,AAAiB;IACzC,IAAMiB,IAAG,GAAGlB,MAAM,EAAkB,AAAC;IAErCD,SAAS,CAAC,WAAM;QACZ,IAAImB,IAAG,CAACC,OAAO,EAAE;YACbF,SAAS,CAACf,qBAAqB,CAACgB,IAAG,CAACC,OAAO,CAACC,aAAa,CAAC,CAAC,CAAC;QAChE,CAAC;IACL,CAAC,EAAE;QAACF,IAAG,CAACC,OAAO;KAAC,CAAC,CAAC;IAElB,OAAO;QAACb,MAAM;QAAEY,IAAG;KAAC,CAAC;AACzB,CAAC,CAAC"}

package/dist/esm/index.js

@@ -0,0 +1,11 @@
+export * from "@mantine/carousel";
+export * from "@mantine/core";
+export * from "@mantine/form";
+export * from "@mantine/hooks";
+export { createColumnHelper } from "@tanstack/table-core";
+export * from "./components";
+// explicitly overriding mantine components
+export { Header, Table } from "./components";
+export * from "./theme";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import {Tuple} from '@mantine/core';\n\nimport {PlasmaColors} from './theme/PlasmaColors';\n\nexport * from '@mantine/carousel';\nexport * from '@mantine/core';\nexport * from '@mantine/form';\nexport type {FormValidateInput} from '@mantine/form/lib/types';\nexport * from '@mantine/hooks';\nexport {createColumnHelper, type ColumnDef} from '@tanstack/table-core';\nexport * from './components';\n// explicitly overriding mantine components\nexport {Header, Table} from './components';\nexport * from './theme';\n\ndeclare module '@mantine/core' {\n    export interface MantineThemeColorsOverride {\n        // eslint-disable-next-line @typescript-eslint/ban-types\n        colors: Record<keyof typeof PlasmaColors | (string & {}), Tuple<string, 10>>;\n    }\n}\n"],"names":["createColumnHelper","Header","Table"],"mappings":"AAIA,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAE9B,cAAc,gBAAgB,CAAC;AAC/B,SAAQA,kBAAkB,QAAuB,sBAAsB,CAAC;AACxE,cAAc,cAAc,CAAC;AAC7B,2CAA2C;AAC3C,SAAQC,MAAM,EAAEC,KAAK,QAAO,cAAc,CAAC;AAC3C,cAAc,SAAS,CAAC"}

package/dist/esm/theme/PlasmaColors.js

@@ -0,0 +1,44 @@
+import { color } from "@coveord/plasma-tokens";
+var toMantineColor = function(plasmaColor) {
+    return Object.values(plasmaColor);
+};
+export var PlasmaColors = {
+    // Primary
+    gray: toMantineColor(color.primary.gray),
+    action: [
+        color.primary.action[1],
+        color.primary.action[1],
+        color.primary.action[2],
+        color.primary.action[3],
+        color.primary.action[4],
+        color.primary.action[6],
+        color.primary.action[6],
+        color.primary.action[8],
+        color.primary.action[8],
+        color.primary.action[9]
+    ],
+    navy: toMantineColor(color.primary.navy),
+    // Accent
+    blue: toMantineColor(color.accent.blue),
+    red: toMantineColor(color.accent.red),
+    teal: toMantineColor(color.accent.teal),
+    yellow: toMantineColor(color.accent.yellow),
+    // Secondary
+    green: toMantineColor(color.secondary.green),
+    indigo: toMantineColor(color.secondary.indigo),
+    lime: [
+        color.secondary.lime[0],
+        color.secondary.lime[0],
+        color.secondary.lime[0],
+        color.secondary.lime[0],
+        color.secondary.lime[6],
+        color.secondary.lime[6],
+        color.secondary.lime[6],
+        color.secondary.lime[9],
+        color.secondary.lime[9],
+        color.secondary.lime[9]
+    ],
+    purple: toMantineColor(color.secondary.purple)
+};
+
+//# sourceMappingURL=PlasmaColors.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/theme/PlasmaColors.ts"],"sourcesContent":["import {color} from '@coveord/plasma-tokens';\nimport {Tuple} from '@mantine/core';\n\nconst toMantineColor = (plasmaColor: Record<string, string>): Tuple<string, 10> =>\n    Object.values(plasmaColor) as Tuple<string, 10>;\n\nexport const PlasmaColors = {\n    // Primary\n    gray: toMantineColor(color.primary.gray),\n    action: [\n        color.primary.action[1],\n        color.primary.action[1],\n        color.primary.action[2],\n        color.primary.action[3],\n        color.primary.action[4],\n        color.primary.action[6],\n        color.primary.action[6],\n        color.primary.action[8],\n        color.primary.action[8],\n        color.primary.action[9],\n    ] as Tuple<string, 10>,\n    navy: toMantineColor(color.primary.navy),\n    // Accent\n    blue: toMantineColor(color.accent.blue),\n    red: toMantineColor(color.accent.red),\n    teal: toMantineColor(color.accent.teal),\n    yellow: toMantineColor(color.accent.yellow),\n    // Secondary\n    green: toMantineColor(color.secondary.green),\n    indigo: toMantineColor(color.secondary.indigo),\n    lime: [\n        color.secondary.lime[0],\n        color.secondary.lime[0],\n        color.secondary.lime[0],\n        color.secondary.lime[0],\n        color.secondary.lime[6],\n        color.secondary.lime[6],\n        color.secondary.lime[6],\n        color.secondary.lime[9],\n        color.secondary.lime[9],\n        color.secondary.lime[9],\n    ] as Tuple<string, 10>,\n    purple: toMantineColor(color.secondary.purple),\n};\n"],"names":["color","toMantineColor","plasmaColor","Object","values","PlasmaColors","gray","primary","action","navy","blue","accent","red","teal","yellow","green","secondary","indigo","lime","purple"],"mappings":"AAAA,SAAQA,KAAK,QAAO,wBAAwB,CAAC;AAG7C,IAAMC,cAAc,GAAG,SAACC,WAAmC;WACvDC,MAAM,CAACC,MAAM,CAACF,WAAW,CAAC;CAAqB,AAAC;AAEpD,OAAO,IAAMG,YAAY,GAAG;IACxB,UAAU;IACVC,IAAI,EAAEL,cAAc,CAACD,KAAK,CAACO,OAAO,CAACD,IAAI,CAAC;IACxCE,MAAM,EAAE;QACJR,KAAK,CAACO,OAAO,CAACC,MAAM,CAAC,CAAC,CAAC;QACvBR,KAAK,CAACO,OAAO,CAACC,MAAM,CAAC,CAAC,CAAC;QACvBR,KAAK,CAACO,OAAO,CAACC,MAAM,CAAC,CAAC,CAAC;QACvBR,KAAK,CAACO,OAAO,CAACC,MAAM,CAAC,CAAC,CAAC;QACvBR,KAAK,CAACO,OAAO,CAACC,MAAM,CAAC,CAAC,CAAC;QACvBR,KAAK,CAACO,OAAO,CAACC,MAAM,CAAC,CAAC,CAAC;QACvBR,KAAK,CAACO,OAAO,CAACC,MAAM,CAAC,CAAC,CAAC;QACvBR,KAAK,CAACO,OAAO,CAACC,MAAM,CAAC,CAAC,CAAC;QACvBR,KAAK,CAACO,OAAO,CAACC,MAAM,CAAC,CAAC,CAAC;QACvBR,KAAK,CAACO,OAAO,CAACC,MAAM,CAAC,CAAC,CAAC;KAC1B;IACDC,IAAI,EAAER,cAAc,CAACD,KAAK,CAACO,OAAO,CAACE,IAAI,CAAC;IACxC,SAAS;IACTC,IAAI,EAAET,cAAc,CAACD,KAAK,CAACW,MAAM,CAACD,IAAI,CAAC;IACvCE,GAAG,EAAEX,cAAc,CAACD,KAAK,CAACW,MAAM,CAACC,GAAG,CAAC;IACrCC,IAAI,EAAEZ,cAAc,CAACD,KAAK,CAACW,MAAM,CAACE,IAAI,CAAC;IACvCC,MAAM,EAAEb,cAAc,CAACD,KAAK,CAACW,MAAM,CAACG,MAAM,CAAC;IAC3C,YAAY;IACZC,KAAK,EAAEd,cAAc,CAACD,KAAK,CAACgB,SAAS,CAACD,KAAK,CAAC;IAC5CE,MAAM,EAAEhB,cAAc,CAACD,KAAK,CAACgB,SAAS,CAACC,MAAM,CAAC;IAC9CC,IAAI,EAAE;QACFlB,KAAK,CAACgB,SAAS,CAACE,IAAI,CAAC,CAAC,CAAC;QACvBlB,KAAK,CAACgB,SAAS,CAACE,IAAI,CAAC,CAAC,CAAC;QACvBlB,KAAK,CAACgB,SAAS,CAACE,IAAI,CAAC,CAAC,CAAC;QACvBlB,KAAK,CAACgB,SAAS,CAACE,IAAI,CAAC,CAAC,CAAC;QACvBlB,KAAK,CAACgB,SAAS,CAACE,IAAI,CAAC,CAAC,CAAC;QACvBlB,KAAK,CAACgB,SAAS,CAACE,IAAI,CAAC,CAAC,CAAC;QACvBlB,KAAK,CAACgB,SAAS,CAACE,IAAI,CAAC,CAAC,CAAC;QACvBlB,KAAK,CAACgB,SAAS,CAACE,IAAI,CAAC,CAAC,CAAC;QACvBlB,KAAK,CAACgB,SAAS,CAACE,IAAI,CAAC,CAAC,CAAC;QACvBlB,KAAK,CAACgB,SAAS,CAACE,IAAI,CAAC,CAAC,CAAC;KAC1B;IACDC,MAAM,EAAElB,cAAc,CAACD,KAAK,CAACgB,SAAS,CAACG,MAAM,CAAC;CACjD,CAAC"}

package/dist/esm/theme/Plasmantine.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MantineProvider } from "@mantine/core";
+import { plasmaTheme } from "./Theme";
+export var Plasmantine = function(param) {
+    var children = param.children;
+    return /*#__PURE__*/ _jsx(MantineProvider, {
+        withGlobalStyles: true,
+        withNormalizeCSS: true,
+        theme: plasmaTheme,
+        children: children
+    });
+};
+
+//# sourceMappingURL=Plasmantine.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/theme/Plasmantine.tsx"],"sourcesContent":["import {MantineProvider} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nimport {plasmaTheme} from './Theme';\n\nexport const Plasmantine: FunctionComponent<PropsWithChildren> = ({children}) => (\n    <MantineProvider withGlobalStyles withNormalizeCSS theme={plasmaTheme}>\n        {children}\n    </MantineProvider>\n);\n"],"names":["MantineProvider","plasmaTheme","Plasmantine","children","withGlobalStyles","withNormalizeCSS","theme"],"mappings":"AAAA;AAAA,SAAQA,eAAe,QAAO,eAAe,CAAC;AAG9C,SAAQC,WAAW,QAAO,SAAS,CAAC;AAEpC,OAAO,IAAMC,WAAW,GAAyC;QAAEC,QAAQ,SAARA,QAAQ;yBACvE,KAACH,eAAe;QAACI,gBAAgB;QAACC,gBAAgB;QAACC,KAAK,EAAEL,WAAW;kBAChEE,QAAQ;MACK;CACrB,CAAC"}

package/dist/esm/theme/Theme.js

@@ -0,0 +1,213 @@
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArrowHeadRightSize24Px, InfoSize24Px } from "@coveord/plasma-react-icons";
+import { color } from "@coveord/plasma-tokens";
+import { PlasmaColors } from "./PlasmaColors";
+export var plasmaTheme = {
+    colorScheme: "light",
+    fontFamily: "canada-type-gibson, sans-serif",
+    black: color.primary.gray[9],
+    defaultRadius: 8,
+    spacing: {
+        xs: 8,
+        sm: 16,
+        md: 24,
+        lg: 32,
+        xl: 40
+    },
+    primaryColor: "action",
+    headings: {
+        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
+            }
+        }
+    },
+    shadows: {
+        xs: "0px 1px 0px rgba(4, 8, 31, 0.08)",
+        sm: "0px 2px 4px rgba(4, 8, 31, 0.12)",
+        md: "0px 4px 8px rgba(4, 8, 31, 0.08)",
+        lg: "0px 8px 16px rgba(7, 12, 41, 0.06)",
+        xl: "0px 16px 24px rgba(4, 8, 31, 0.06)"
+    },
+    colors: PlasmaColors,
+    components: {
+        Alert: {
+            defaultProps: {
+                icon: /*#__PURE__*/ _jsx(InfoSize24Px, {
+                    height: 24
+                }),
+                color: "navy"
+            },
+            styles: {
+                title: {
+                    fontWeight: 500
+                }
+            }
+        },
+        Title: {
+            styles: function(theme) {
+                return {
+                    root: {
+                        "&:is(h1,h2,h3,h4,h5,h6)": {
+                            letterSpacing: "0.011em",
+                            color: theme.colors.gray[9]
+                        }
+                    }
+                };
+            }
+        },
+        Button: {
+            styles: function(theme, params) {
+                return {
+                    root: {
+                        "&": {
+                            fontWeight: 400
+                        },
+                        backgroundColor: params.variant === "outline" ? "white" : undefined
+                    }
+                };
+            }
+        },
+        Modal: {
+            styles: function(theme, param) {
+                var size = param.size, fullScreen = param.fullScreen;
+                return {
+                    modal: {
+                        width: fullScreen ? undefined : theme.fn.size({
+                            size: size,
+                            sizes: {
+                                xs: 320,
+                                sm: 440,
+                                md: "45%",
+                                lg: 1334,
+                                xl: "85%"
+                            }
+                        })
+                    }
+                };
+            },
+            defaultProps: {
+                overlayColor: color.primary.navy[9],
+                overlayOpacity: 0.9
+            }
+        },
+        InputWrapper: {
+            defaultProps: {
+                withAsterisk: false
+            }
+        },
+        TextInput: {
+            defaultProps: {
+                radius: 8
+            },
+            styles: function(theme) {
+                return {
+                    description: {
+                        fontSize: "inherit",
+                        paddingBottom: theme.spacing.xs
+                    }
+                };
+            }
+        },
+        Tooltip: {
+            defaultProps: {
+                color: "navy",
+                withArrow: true,
+                withinPortal: true
+            }
+        },
+        Breadcrumbs: {
+            defaultProps: {
+                separator: /*#__PURE__*/ _jsx(ArrowHeadRightSize24Px, {
+                    height: 24
+                })
+            }
+        },
+        Loader: {
+            defaultProps: {
+                variant: "dots",
+                color: "action"
+            }
+        },
+        DateRangePicker: {
+            styles: {
+                cell: {
+                    textAlign: "center"
+                }
+            }
+        },
+        Anchor: {
+            defaultProps: {
+                color: "action"
+            },
+            styles: function(theme) {
+                return {
+                    root: _object_spread({}, theme.fn.hover({
+                        textDecoration: "underline",
+                        color: theme.colors.action[8]
+                    }))
+                };
+            }
+        },
+        Checkbox: {
+            defaultProps: {
+                radius: "sm"
+            },
+            styles: {
+                labelWrapper: {
+                    display: "flex",
+                    alignItems: "center"
+                }
+            }
+        },
+        List: {
+            styles: function() {
+                return {
+                    root: {
+                        listStyleType: "disc"
+                    }
+                };
+            }
+        },
+        Radio: {
+            styles: {
+                labelWrapper: {
+                    display: "flex",
+                    alignItems: "flex-start"
+                }
+            }
+        }
+    }
+};
+
+//# sourceMappingURL=Theme.js.map

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

@@ -0,0 +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    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: 320, sm: 440, md: '45%', 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        },\n        TextInput: {\n            defaultProps: {\n                radius: 8,\n            },\n            styles: (theme) => ({\n                description: {\n                    fontSize: 'inherit',\n                    paddingBottom: theme.spacing.xs,\n                },\n            }),\n        },\n        Tooltip: {\n            defaultProps: {\n                color: 'navy',\n                withArrow: true,\n                withinPortal: 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            styles: {\n                labelWrapper: {\n                    display: 'flex',\n                    alignItems: 'center',\n                },\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    },\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","TextInput","radius","description","paddingBottom","Tooltip","withArrow","withinPortal","Breadcrumbs","separator","Loader","DateRangePicker","cell","textAlign","Anchor","hover","textDecoration","action","Checkbox","labelWrapper","display","alignItems","List","listStyleType","Radio"],"mappings":"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"}

package/dist/esm/theme/index.js

@@ -0,0 +1,3 @@
+export * from "./Plasmantine";
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/theme/index.ts"],"sourcesContent":["export * from './Plasmantine';\n"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/jest.config.js

@@ -0,0 +1,25 @@
+module.exports = {
+    setupFiles: ['<rootDir>/src/__tests__/Setup.ts'],
+    setupFilesAfterEnv: ['<rootDir>/src/__tests__/SetupAfterEnv.ts'],
+    globalSetup: '<rootDir>/src/__tests__/GlobalSetup.ts',
+    moduleNameMapper: {
+        '^@test-utils$': '<rootDir>/src/__tests__/Utils.tsx',
+    },
+    testEnvironment: 'jsdom',
+    transform: {
+        '^.+\\.(t|j)sx?$': [
+            '@swc/jest',
+            {
+                jsc: {
+                    transform: {
+                        react: {
+                            runtime: 'automatic',
+                        },
+                    },
+                },
+            },
+        ],
+    },
+    testMatch: ['<rootDir>/src/**/*.spec.{ts,tsx}'],
+    modulePathIgnorePatterns: ['<rootDir>/dist/'],
+};

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@coveord/plasma-mantine",
+  "version": "47.0.1-next.2",
+  "description": "A Plasma flavoured Mantine theme",
+  "keywords": [
+    "plasma",
+    "mantine",
+    "components",
+    "coveo"
+  ],
+  "license": "Apache-2.0",
+  "author": "Coveo",
+  "exports": {
+    ".": {
+      "types": "./dist/definitions/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "main": "./dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "./dist/definitions/index.d.ts",
+  "dependencies": {
+    "@coveord/plasma-react-icons": "47.0.1-next.2",
+    "@coveord/plasma-tokens": "47.0.1-next.2",
+    "@monaco-editor/react": "4.4.5",
+    "@swc/helpers": "0.4.11",
+    "@tanstack/react-table": "8.5.11",
+    "@tanstack/table-core": "8.5.11",
+    "dayjs": "1.11.3",
+    "lodash.defaultsdeep": "4.6.1",
+    "monaco-editor": "0.34.0",
+    "react-beautiful-dnd": "13.1.1"
+  },
+  "devDependencies": {
+    "@emotion/react": "11.10.0",
+    "@mantine/carousel": "5.6.4",
+    "@mantine/core": "5.6.2",
+    "@mantine/dates": "5.6.2",
+    "@mantine/form": "5.6.2",
+    "@mantine/hooks": "5.6.2",
+    "@mantine/modals": "5.6.2",
+    "@swc/cli": "0.1.57",
+    "@swc/core": "1.3.3",
+    "@swc/jest": "0.2.23",
+    "@testing-library/dom": "8.18.1",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "13.4.0",
+    "@testing-library/user-event": "12.8.3",
+    "@types/jest": "29.1.2",
+    "@types/lodash.defaultsdeep": "4.6.7",
+    "@types/react": "18.0.21",
+    "@types/react-beautiful-dnd": "13.1.2",
+    "@types/react-dom": "18.0.6",
+    "@types/testing-library__jest-dom": "5.14.5",
+    "eslint-plugin-jest": "27.1.1",
+    "eslint-plugin-testing-library": "5.7.2",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "29.2.1",
+    "jest-environment-jsdom": "29.1.2",
+    "jest-junit": "13.2.0",
+    "npm-run-all": "4.1.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rimraf": "3.0.2",
+    "tslib": "2.4.0",
+    "typescript": "4.7.4"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.10.0",
+    "@mantine/carousel": "5.6.4",
+    "@mantine/core": "^5.6.2",
+    "@mantine/dates": "^5.6.2",
+    "@mantine/form": "^5.6.2",
+    "@mantine/hooks": "^5.6.2",
+    "@mantine/modals": "^5.6.2",
+    "embla-carousel-react": "7.0.4",
+    "react": ">= 18.0.0",
+    "react-dom": ">= 18.0.0"
+  },
+  "scripts": {
+    "build": "node ../../scripts/build",
+    "clean": "rimraf dist",
+    "start": "node ../../scripts/start",
+    "test": "jest --maxWorkers=65%",
+    "test:watch": "jest --watchAll"
+  }
+}

package/src/__tests__/GlobalSetup.ts

@@ -0,0 +1,5 @@
+// This file is executed once, before everything else.
+export default () => {
+    // @ts-ignore
+    process.env.TZ = 'UTC';
+};

package/src/__tests__/Setup.ts

@@ -0,0 +1,4 @@
+/**
+ * This file is executed once per test file.
+ * It is executed before executing SetupAfterEnv and before the test code itself.
+ */

package/src/__tests__/SetupAfterEnv.ts

@@ -0,0 +1,16 @@
+/**
+ * This file is executed once per test file.
+ * It is executed after executing Setup and Jest is initialised, but before the test code itself.
+ */
+
+import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/extend-expect';
+
+Element.prototype.scrollTo = jest.fn();
+window.ResizeObserver =
+    window.ResizeObserver ||
+    jest.fn().mockImplementation(() => ({
+        disconnect: jest.fn(),
+        observe: jest.fn(),
+        unobserve: jest.fn(),
+    }));

package/src/__tests__/Utils.tsx

@@ -0,0 +1,15 @@
+import {render, RenderOptions, RenderResult} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {FunctionComponent, PropsWithChildren, ReactElement} from 'react';
+
+import {Plasmantine} from '../theme';
+
+const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'queries'>): RenderResult => {
+    const TestWrapper: FunctionComponent<PropsWithChildren> = ({children}) => <Plasmantine>{children}</Plasmantine>;
+
+    return render(ui, {wrapper: TestWrapper, ...options});
+};
+
+export {userEvent};
+export * from '@testing-library/react';
+export {customRender as render};

package/src/components/blank-slate/BlankSlate.tsx

@@ -0,0 +1,17 @@
+import {Paper, Stack} from '@mantine/core';
+import {FunctionComponent, PropsWithChildren} from 'react';
+
+interface BlankSlateProps {
+    /**
+     * Whether the Blankslate render with a border
+     *
+     * @default true
+     */
+    withBorder?: boolean;
+}
+
+export const BlankSlate: FunctionComponent<PropsWithChildren<BlankSlateProps>> = ({children, withBorder = true}) => (
+    <Paper shadow={withBorder && 'xs'} p="xl" withBorder={withBorder}>
+        <Stack align="center">{children}</Stack>
+    </Paper>
+);

package/src/components/blank-slate/__tests__/BlankSlate.spec.tsx

@@ -0,0 +1,11 @@
+import {render, screen} from '@test-utils';
+
+import {BlankSlate} from '../BlankSlate';
+
+describe('BlankSlate', () => {
+    it('renders the children', () => {
+        render(<BlankSlate>content</BlankSlate>);
+
+        expect(screen.getByText('content')).toBeInTheDocument();
+    });
+});

package/src/components/blank-slate/index.ts

@@ -0,0 +1 @@
+export * from './BlankSlate';

package/src/components/code-editor/CodeEditor.example.tsx

@@ -0,0 +1,32 @@
+import {useForm} from '@mantine/form';
+import {CodeEditor} from './CodeEditor';
+
+export default () => {
+    const form = useForm({
+        initialValues: {
+            config: '{"key":"value"}',
+        },
+        validate: {
+            config: (jsonValue) => {
+                try {
+                    const config = JSON.parse(jsonValue);
+                    if (!config.key) {
+                        return 'The key must have a value';
+                    }
+                } catch {
+                    return 'Invalid JSON';
+                }
+                return null;
+            },
+        },
+    });
+
+    return (
+        <CodeEditor
+            language="json"
+            label="Configuration"
+            description="This JSON configuration is very important"
+            {...form.getInputProps('config')}
+        />
+    );
+};