@coveord/plasma-mantine 55.7.1 → 55.7.2-alpha.0

package/dist/cjs/theme/PlasmaColors.js

@@ -30,32 +30,157 @@ var lime = [
 ];
 var PlasmaColors = {
     // Primary
-    gray: toMantineColor(_plasmatokens.color.primary.gray),
-    action: [
-        _plasmatokens.color.primary.action[1],
-        _plasmatokens.color.primary.action[1],
-        _plasmatokens.color.primary.action[2],
-        _plasmatokens.color.primary.action[3],
-        _plasmatokens.color.primary.action[4],
-        _plasmatokens.color.primary.action[6],
-        _plasmatokens.color.primary.action[6],
-        _plasmatokens.color.primary.action[8],
-        _plasmatokens.color.primary.action[8],
-        _plasmatokens.color.primary.action[9]
+    blue: [
+        '#f8f9ff',
+        '#eef2ff',
+        '#d5defe',
+        '#a6bcfe',
+        '#6e99fd',
+        '#1169da',
+        '#063c82',
+        '#03275a',
+        '#01193f',
+        '#010e29'
+    ],
+    red: [
+        '#fff8f8',
+        '#feefee',
+        '#fdd5d5',
+        '#fca7a5',
+        '#fb6f6c',
+        '#d2271b',
+        '#7e0f17',
+        '#58050f',
+        '#3e020a',
+        '#280104'
+    ],
+    gray: [
+        '#f9f9fa',
+        '#f1f2f4',
+        '#dddfe3',
+        '#b9bdc7',
+        '#959cab',
+        '#676d7a',
+        '#3b3e46',
+        '#26292f',
+        '#191b1f',
+        '#0e0f12'
+    ],
+    dark: [
+        '#c9c9c9',
+        '#b8b8b8',
+        '#828282',
+        '#696969',
+        '#424242',
+        '#3b3b3b',
+        '#2e2e2e',
+        '#242424',
+        '#1f1f1f',
+        '#141414'
+    ],
+    teal: [
+        '#e5fff9',
+        '#bffff0',
+        '#1efadc',
+        '#18d4bb',
+        '#0faf99',
+        '#077b6b',
+        '#02473e',
+        '#012f2a',
+        '#011f1b',
+        '#001210'
+    ],
+    yellow: [
+        '#fff9e5',
+        '#fff2c0',
+        '#fbe000',
+        '#e5b800',
+        '#c89300',
+        '#936400',
+        '#593700',
+        '#3c2301',
+        '#291700',
+        '#180d00'
+    ],
+    violet: [
+        '#faf8ff',
+        '#f4f0ff',
+        '#e3daff',
+        '#c7b2ff',
+        '#ac86ff',
+        '#8a36ff',
+        '#5500aa',
+        '#390076',
+        '#270054',
+        '#180037'
+    ],
+    grape: [
+        '#fbf8fd',
+        '#f6f0fb',
+        '#e7d6f5',
+        '#d2b0ed',
+        '#bc85e3',
+        '#9946c7',
+        '#592676',
+        '#3c1851',
+        '#290e38',
+        '#190624'
+    ],
+    cyan: [
+        '#e3fafc',
+        '#c5f6fa',
+        '#99e9f2',
+        '#66d9e8',
+        '#3bc9db',
+        '#22b8cf',
+        '#15aabf',
+        '#1098ad',
+        '#0c8599',
+        '#0b7285'
+    ],
+    orange: [
+        '#fff8f5',
+        '#ffefe8',
+        '#ffeedd',
+        '#fea980',
+        '#f27a38',
+        '#b84b11',
+        '#6c2a00',
+        '#491b02',
+        '#301301',
+        '#1c0a00'
+    ],
+    indigo: [
+        '#f9f9fb',
+        '#f1f1f9',
+        '#dbdbf2',
+        '#babadf',
+        '#9797cb',
+        '#6767a4',
+        '#393968',
+        '#252547',
+        '#181831',
+        '#0d0d1f'
+    ],
+    green: [
+        '#e9ffed',
+        '#cdfed5',
+        '#73fa84',
+        '#32d961',
+        '#15b43c',
+        '#0b7e2f',
+        '#044918',
+        '#02300f',
+        '#012008',
+        '#001304'
     ],
     navy: navy,
     info: navy,
     // Accent
-    blue: toMantineColor(_plasmatokens.color.accent.blue),
-    red: red,
     critical: red,
-    teal: teal,
     new: teal,
-    yellow: yellow,
     warning: yellow,
     // Secondary
-    green: toMantineColor(_plasmatokens.color.secondary.green),
-    indigo: toMantineColor(_plasmatokens.color.secondary.indigo),
     lime: lime,
     success: lime,
     purple: toMantineColor(_plasmatokens.color.secondary.purple)

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/theme/PlasmaColors.ts"],"sourcesContent":["import {color} from '@coveord/plasma-tokens';\nimport {MantineColorsTuple} from '@mantine/core';\n\nconst toMantineColor = (plasmaColor: Record<string, string>): MantineColorsTuple =>\n    Object.values(plasmaColor) as unknown as MantineColorsTuple;\n\nconst navy = toMantineColor(color.primary.navy);\nconst red = toMantineColor(color.accent.red);\nconst yellow = toMantineColor(color.accent.yellow);\nconst teal = toMantineColor(color.accent.teal);\nconst 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 MantineColorsTuple;\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 MantineColorsTuple,\n    navy,\n    info: navy,\n    // Accent\n    blue: toMantineColor(color.accent.blue),\n    red,\n    critical: red,\n    teal,\n    new: teal,\n    yellow,\n    warning: yellow,\n    // Secondary\n    green: toMantineColor(color.secondary.green),\n    indigo: toMantineColor(color.secondary.indigo),\n    lime,\n    success: lime,\n    purple: toMantineColor(color.secondary.purple),\n};\n"],"names":["PlasmaColors","toMantineColor","plasmaColor","Object","values","navy","color","primary","red","accent","yellow","teal","lime","secondary","gray","action","info","blue","critical","new","warning","green","indigo","success","purple"],"mappings":";;;;+BAuBaA;;;eAAAA;;;4BAvBO;AAGpB,IAAMC,iBAAiB,SAACC;WACpBC,OAAOC,MAAM,CAACF;;AAElB,IAAMG,OAAOJ,eAAeK,mBAAK,CAACC,OAAO,CAACF,IAAI;AAC9C,IAAMG,MAAMP,eAAeK,mBAAK,CAACG,MAAM,CAACD,GAAG;AAC3C,IAAME,SAAST,eAAeK,mBAAK,CAACG,MAAM,CAACC,MAAM;AACjD,IAAMC,OAAOV,eAAeK,mBAAK,CAACG,MAAM,CAACE,IAAI;AAC7C,IAAMC,OAAO;IACTN,mBAAK,CAACO,SAAS,CAACD,IAAI,CAAC,EAAE;IACvBN,mBAAK,CAACO,SAAS,CAACD,IAAI,CAAC,EAAE;IACvBN,mBAAK,CAACO,SAAS,CAACD,IAAI,CAAC,EAAE;IACvBN,mBAAK,CAACO,SAAS,CAACD,IAAI,CAAC,EAAE;IACvBN,mBAAK,CAACO,SAAS,CAACD,IAAI,CAAC,EAAE;IACvBN,mBAAK,CAACO,SAAS,CAACD,IAAI,CAAC,EAAE;IACvBN,mBAAK,CAACO,SAAS,CAACD,IAAI,CAAC,EAAE;IACvBN,mBAAK,CAACO,SAAS,CAACD,IAAI,CAAC,EAAE;IACvBN,mBAAK,CAACO,SAAS,CAACD,IAAI,CAAC,EAAE;IACvBN,mBAAK,CAACO,SAAS,CAACD,IAAI,CAAC,EAAE;CAC1B;AAEM,IAAMZ,eAAe;IACxB,UAAU;IACVc,MAAMb,eAAeK,mBAAK,CAACC,OAAO,CAACO,IAAI;IACvCC,QAAQ;QACJT,mBAAK,CAACC,OAAO,CAACQ,MAAM,CAAC,EAAE;QACvBT,mBAAK,CAACC,OAAO,CAACQ,MAAM,CAAC,EAAE;QACvBT,mBAAK,CAACC,OAAO,CAACQ,MAAM,CAAC,EAAE;QACvBT,mBAAK,CAACC,OAAO,CAACQ,MAAM,CAAC,EAAE;QACvBT,mBAAK,CAACC,OAAO,CAACQ,MAAM,CAAC,EAAE;QACvBT,mBAAK,CAACC,OAAO,CAACQ,MAAM,CAAC,EAAE;QACvBT,mBAAK,CAACC,OAAO,CAACQ,MAAM,CAAC,EAAE;QACvBT,mBAAK,CAACC,OAAO,CAACQ,MAAM,CAAC,EAAE;QACvBT,mBAAK,CAACC,OAAO,CAACQ,MAAM,CAAC,EAAE;QACvBT,mBAAK,CAACC,OAAO,CAACQ,MAAM,CAAC,EAAE;KAC1B;IACDV,MAAAA;IACAW,MAAMX;IACN,SAAS;IACTY,MAAMhB,eAAeK,mBAAK,CAACG,MAAM,CAACQ,IAAI;IACtCT,KAAAA;IACAU,UAAUV;IACVG,MAAAA;IACAQ,KAAKR;IACLD,QAAAA;IACAU,SAASV;IACT,YAAY;IACZW,OAAOpB,eAAeK,mBAAK,CAACO,SAAS,CAACQ,KAAK;IAC3CC,QAAQrB,eAAeK,mBAAK,CAACO,SAAS,CAACS,MAAM;IAC7CV,MAAAA;IACAW,SAASX;IACTY,QAAQvB,eAAeK,mBAAK,CAACO,SAAS,CAACW,MAAM;AACjD"}
+{"version":3,"sources":["../../../src/theme/PlasmaColors.ts"],"sourcesContent":["import {color} from '@coveord/plasma-tokens';\nimport {MantineColorsTuple} from '@mantine/core';\n\nconst toMantineColor = (plasmaColor: Record<string, string>): MantineColorsTuple =>\n    Object.values(plasmaColor) as unknown as MantineColorsTuple;\n\nconst navy = toMantineColor(color.primary.navy);\nconst red = toMantineColor(color.accent.red);\nconst yellow = toMantineColor(color.accent.yellow);\nconst teal = toMantineColor(color.accent.teal);\nconst 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 MantineColorsTuple;\n\nexport const PlasmaColors = {\n    // Primary\n    blue: [\n        '#f8f9ff',\n        '#eef2ff',\n        '#d5defe',\n        '#a6bcfe',\n        '#6e99fd',\n        '#1169da',\n        '#063c82',\n        '#03275a',\n        '#01193f',\n        '#010e29',\n    ] satisfies MantineColorsTuple,\n    red: [\n        '#fff8f8',\n        '#feefee',\n        '#fdd5d5',\n        '#fca7a5',\n        '#fb6f6c',\n        '#d2271b',\n        '#7e0f17',\n        '#58050f',\n        '#3e020a',\n        '#280104',\n    ] satisfies MantineColorsTuple,\n    gray: [\n        '#f9f9fa',\n        '#f1f2f4',\n        '#dddfe3',\n        '#b9bdc7',\n        '#959cab',\n        '#676d7a',\n        '#3b3e46',\n        '#26292f',\n        '#191b1f',\n        '#0e0f12',\n    ] satisfies MantineColorsTuple,\n    dark: [\n        '#c9c9c9',\n        '#b8b8b8',\n        '#828282',\n        '#696969',\n        '#424242',\n        '#3b3b3b',\n        '#2e2e2e',\n        '#242424',\n        '#1f1f1f',\n        '#141414',\n    ] satisfies MantineColorsTuple,\n    teal: [\n        '#e5fff9',\n        '#bffff0',\n        '#1efadc',\n        '#18d4bb',\n        '#0faf99',\n        '#077b6b',\n        '#02473e',\n        '#012f2a',\n        '#011f1b',\n        '#001210',\n    ] satisfies MantineColorsTuple,\n    yellow: [\n        '#fff9e5',\n        '#fff2c0',\n        '#fbe000',\n        '#e5b800',\n        '#c89300',\n        '#936400',\n        '#593700',\n        '#3c2301',\n        '#291700',\n        '#180d00',\n    ] satisfies MantineColorsTuple,\n    violet: [\n        '#faf8ff',\n        '#f4f0ff',\n        '#e3daff',\n        '#c7b2ff',\n        '#ac86ff',\n        '#8a36ff',\n        '#5500aa',\n        '#390076',\n        '#270054',\n        '#180037',\n    ] satisfies MantineColorsTuple,\n    grape: [\n        '#fbf8fd',\n        '#f6f0fb',\n        '#e7d6f5',\n        '#d2b0ed',\n        '#bc85e3',\n        '#9946c7',\n        '#592676',\n        '#3c1851',\n        '#290e38',\n        '#190624',\n    ] satisfies MantineColorsTuple,\n    cyan: [\n        '#e3fafc',\n        '#c5f6fa',\n        '#99e9f2',\n        '#66d9e8',\n        '#3bc9db',\n        '#22b8cf',\n        '#15aabf',\n        '#1098ad',\n        '#0c8599',\n        '#0b7285',\n    ] satisfies MantineColorsTuple,\n    orange: [\n        '#fff8f5',\n        '#ffefe8',\n        '#ffeedd',\n        '#fea980',\n        '#f27a38',\n        '#b84b11',\n        '#6c2a00',\n        '#491b02',\n        '#301301',\n        '#1c0a00',\n    ] satisfies MantineColorsTuple,\n    indigo: [\n        '#f9f9fb',\n        '#f1f1f9',\n        '#dbdbf2',\n        '#babadf',\n        '#9797cb',\n        '#6767a4',\n        '#393968',\n        '#252547',\n        '#181831',\n        '#0d0d1f',\n    ] satisfies MantineColorsTuple,\n    green: [\n        '#e9ffed',\n        '#cdfed5',\n        '#73fa84',\n        '#32d961',\n        '#15b43c',\n        '#0b7e2f',\n        '#044918',\n        '#02300f',\n        '#012008',\n        '#001304',\n    ] satisfies MantineColorsTuple,\n    navy,\n    info: navy,\n    // Accent\n    critical: red,\n    new: teal,\n    warning: yellow,\n    // Secondary\n    lime,\n    success: lime,\n    purple: toMantineColor(color.secondary.purple),\n};\n"],"names":["PlasmaColors","toMantineColor","plasmaColor","Object","values","navy","color","primary","red","accent","yellow","teal","lime","secondary","blue","gray","dark","violet","grape","cyan","orange","indigo","green","info","critical","new","warning","success","purple"],"mappings":";;;;+BAuBaA;;;eAAAA;;;4BAvBO;AAGpB,IAAMC,iBAAiB,SAACC;WACpBC,OAAOC,MAAM,CAACF;;AAElB,IAAMG,OAAOJ,eAAeK,mBAAK,CAACC,OAAO,CAACF,IAAI;AAC9C,IAAMG,MAAMP,eAAeK,mBAAK,CAACG,MAAM,CAACD,GAAG;AAC3C,IAAME,SAAST,eAAeK,mBAAK,CAACG,MAAM,CAACC,MAAM;AACjD,IAAMC,OAAOV,eAAeK,mBAAK,CAACG,MAAM,CAACE,IAAI;AAC7C,IAAMC,OAAO;IACTN,mBAAK,CAACO,SAAS,CAACD,IAAI,CAAC,EAAE;IACvBN,mBAAK,CAACO,SAAS,CAACD,IAAI,CAAC,EAAE;IACvBN,mBAAK,CAACO,SAAS,CAACD,IAAI,CAAC,EAAE;IACvBN,mBAAK,CAACO,SAAS,CAACD,IAAI,CAAC,EAAE;IACvBN,mBAAK,CAACO,SAAS,CAACD,IAAI,CAAC,EAAE;IACvBN,mBAAK,CAACO,SAAS,CAACD,IAAI,CAAC,EAAE;IACvBN,mBAAK,CAACO,SAAS,CAACD,IAAI,CAAC,EAAE;IACvBN,mBAAK,CAACO,SAAS,CAACD,IAAI,CAAC,EAAE;IACvBN,mBAAK,CAACO,SAAS,CAACD,IAAI,CAAC,EAAE;IACvBN,mBAAK,CAACO,SAAS,CAACD,IAAI,CAAC,EAAE;CAC1B;AAEM,IAAMZ,eAAe;IACxB,UAAU;IACVc,MAAM;QACF;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACH;IACDN,KAAK;QACD;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACH;IACDO,MAAM;QACF;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACH;IACDC,MAAM;QACF;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACH;IACDL,MAAM;QACF;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACH;IACDD,QAAQ;QACJ;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACH;IACDO,QAAQ;QACJ;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACH;IACDC,OAAO;QACH;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACH;IACDC,MAAM;QACF;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACH;IACDC,QAAQ;QACJ;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACH;IACDC,QAAQ;QACJ;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACH;IACDC,OAAO;QACH;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACH;IACDjB,MAAAA;IACAkB,MAAMlB;IACN,SAAS;IACTmB,UAAUhB;IACViB,KAAKd;IACLe,SAAShB;IACT,YAAY;IACZE,MAAAA;IACAe,SAASf;IACTgB,QAAQ3B,eAAeK,mBAAK,CAACO,SAAS,CAACe,MAAM;AACjD"}

package/dist/cjs/theme/Theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../../src/theme/Theme.tsx"],"names":[],"mappings":"AAUA,OAAO,EAmBH,oBAAoB,EAmBvB,MAAM,eAAe,CAAC;AAiCvB,eAAO,MAAM,WAAW,EAAE,oBAuSxB,CAAC"}
+{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../../src/theme/Theme.tsx"],"names":[],"mappings":"AAUA,OAAO,EAkBH,oBAAoB,EAkBvB,MAAM,eAAe,CAAC;AA4BvB,eAAO,MAAM,WAAW,EAAE,oBAkUxB,CAAC"}

package/dist/cjs/theme/Theme.js

@@ -9,46 +9,42 @@ Object.defineProperty(exports, "plasmaTheme", {
     }
 });
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _object_spread = require("@swc/helpers/_/_object_spread");
 var _jsxruntime = require("react/jsx-runtime");
 var _plasmareacticons = require("@coveord/plasma-react-icons");
 var _plasmatokens = require("@coveord/plasma-tokens");
 var _core = require("@mantine/core");
-var _dates = require("@mantine/dates");
-var _ActionIconmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/ActionIcon.module.css"));
+var _components = require("../components");
 var _Alertmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Alert.module.css"));
-var _Anchormodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Anchor.module.css"));
-var _AppShellNavBarmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/AppShellNavBar.module.css"));
 var _Badgemodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Badge.module.css"));
+var _Breadcrumbsmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Breadcrumbs.module.css"));
 var _Buttonmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Button.module.css"));
 var _Checkboxmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Checkbox.module.css"));
+var _CheckboxIndicatormodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/CheckboxIndicator.module.css"));
 var _Comboboxmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Combobox.module.css"));
-var _DatePickermodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/DatePicker.module.css"));
 var _Inputmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Input.module.css"));
 var _InputWrappermodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/InputWrapper.module.css"));
 var _Listmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/List.module.css"));
 var _Modalmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Modal.module.css"));
 var _NavLinkmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/NavLink.module.css"));
-var _Notificationmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Notification.module.css"));
 var _Paginationmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Pagination.module.css"));
 var _Radiomodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Radio.module.css"));
 var _ReadOnlyInputmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/ReadOnlyInput.module.css"));
 var _ReadOnlyStatemodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/ReadOnlyState.module.css"));
 var _ScrollAreamodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/ScrollArea.module.css"));
 var _SegmentedControlmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/SegmentedControl.module.css"));
-var _Selectmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Select.module.css"));
 var _Skeletonmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Skeleton.module.css"));
 var _Steppermodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Stepper.module.css"));
+var _Tablemodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Table.module.css"));
 var _Tabsmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Tabs.module.css"));
 var _Textmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Text.module.css"));
 var _Tooltipmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Tooltip.module.css"));
-var _Notificationvars = require("../vars/Notification.vars");
-var _Textvars = require("../vars/Text.vars");
 var _PlasmaColors = require("./PlasmaColors");
 var plasmaTheme = (0, _core.createTheme)({
     // These are overrides over https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/default-theme.ts
     fontFamily: 'canada-type-gibson, sans-serif',
     black: _plasmatokens.color.primary.gray[9],
-    defaultRadius: 8,
+    defaultRadius: 'md',
     lineHeights: {
         md: '1.5'
     },
@@ -60,43 +56,59 @@ var plasmaTheme = (0, _core.createTheme)({
         lg: '32px',
         xl: '40px'
     },
-    primaryColor: 'action',
+    radius: {
+        none: '0px',
+        xs: '2px',
+        sm: '4px',
+        md: '8px',
+        lg: '16px',
+        xl: '24px',
+        xxl: '32px'
+    },
+    primaryColor: 'blue',
     headings: {
         fontFamily: 'canada-type-gibson, sans-serif',
         fontWeight: '500',
         sizes: {
             h1: {
-                fontSize: '48px',
-                lineHeight: '1.5',
-                fontWeight: '300'
+                fontSize: '40px',
+                lineHeight: '1.2',
+                fontWeight: '500'
             },
             h2: {
                 fontSize: '32px',
-                lineHeight: '1.5',
+                lineHeight: '1.25',
                 fontWeight: '500'
             },
             h3: {
                 fontSize: '24px',
-                lineHeight: '1.5',
+                lineHeight: '1.33',
                 fontWeight: '500'
             },
             h4: {
                 fontSize: '18px',
-                lineHeight: '1.5',
+                lineHeight: '1.2',
                 fontWeight: '300'
             },
             h5: {
-                fontSize: '14px',
-                lineHeight: '1.5',
+                fontSize: '16px',
+                lineHeight: '1.25',
                 fontWeight: '500'
             },
             h6: {
                 fontSize: '12px',
-                lineHeight: '1.5',
+                lineHeight: '1.33',
                 fontWeight: '500'
             }
         }
     },
+    fontSizes: {
+        xs: '12px',
+        sm: '14px',
+        md: '16px',
+        lg: '18px',
+        xl: '20px'
+    },
     shadows: {
         xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',
         sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',
@@ -104,44 +116,47 @@ var plasmaTheme = (0, _core.createTheme)({
         lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',
         xl: '0px 16px 24px rgba(4, 8, 31, 0.06)'
     },
+    primaryShade: 5,
     colors: _PlasmaColors.PlasmaColors,
     components: {
-        ActionIcon: _core.ActionIcon.extend({
-            classNames: {
-                root: _ActionIconmodulecss.default.root
+        AppShell: _core.AppShell.extend({
+            vars: function(theme) {
+                return {
+                    root: {
+                        '--app-shell-border-color': theme.colors.gray[2]
+                    }
+                };
             }
         }),
         Alert: _core.Alert.extend({
             defaultProps: {
-                icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.InfoSize16Px, {
-                    height: 16
+                icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoToken, {
+                    variant: "advice"
                 }),
-                color: 'navy'
+                p: 'sm'
             },
             classNames: _Alertmodulecss.default
         }),
-        Anchor: _core.Anchor.extend({
+        Badge: _core.Badge.extend({
+            classNames: _Badgemodulecss.default,
             defaultProps: {
-                color: 'action.6'
-            },
-            classNames: {
-                root: _Anchormodulecss.default.root
-            }
-        }),
-        AppShellNavbar: _core.AppShellNavbar.extend({
-            classNames: {
-                navbar: _AppShellNavBarmodulecss.default.navbar
+                variant: 'light'
             }
         }),
-        Badge: _core.Badge.extend({
-            classNames: {
-                root: _Badgemodulecss.default.root
-            },
+        Breadcrumbs: _core.Breadcrumbs.extend({
+            classNames: _Breadcrumbsmodulecss.default,
             defaultProps: {
-                variant: 'light'
+                separator: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.IconSlash, {
+                    size: 16,
+                    color: "var(--mantine-color-dimmed)"
+                }),
+                separatorMargin: 'xxs'
             }
         }),
         Button: _core.Button.extend({
+            defaultProps: {
+                size: 'sm'
+            },
             classNames: _Buttonmodulecss.default
         }),
         Checkbox: _core.Checkbox.extend({
@@ -168,6 +183,12 @@ var plasmaTheme = (0, _core.createTheme)({
                 };
             }
         }),
+        CheckboxIndicator: _core.Checkbox.Indicator.extend({
+            defaultProps: {
+                radius: 'sm'
+            },
+            classNames: _CheckboxIndicatormodulecss.default
+        }),
         CloseButton: _core.CloseButton.extend({
             defaultProps: {
                 icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CrossSize16Px, {
@@ -183,10 +204,7 @@ var plasmaTheme = (0, _core.createTheme)({
             }
         }),
         Combobox: _core.Combobox.extend({
-            classNames: {
-                option: _Selectmodulecss.default.option,
-                search: _Comboboxmodulecss.default.search
-            }
+            classNames: _Comboboxmodulecss.default
         }),
         ComboboxSearch: _core.ComboboxSearch.extend({
             defaultProps: {
@@ -197,17 +215,15 @@ var plasmaTheme = (0, _core.createTheme)({
                 })
             }
         }),
-        DatePicker: _dates.DatePicker.extend({
-            classNames: {
-                monthCell: _DatePickermodulecss.default.monthCell
-            }
-        }),
         Divider: _core.Divider.extend({
             defaultProps: {
-                color: 'gray.3'
+                color: 'var(--mantine-color-default-border)'
             }
         }),
         Input: _core.Input.extend({
+            defaultProps: {
+                size: 'sm'
+            },
             classNames: function(_theme, props) {
                 var anyProps = props;
                 if (anyProps.readOnly && !props.disabled && ![
@@ -216,9 +232,20 @@ var plasmaTheme = (0, _core.createTheme)({
                     return (0, _core.deepMerge)(_Inputmodulecss.default, _ReadOnlyInputmodulecss.default);
                 }
                 return _Inputmodulecss.default;
+            },
+            vars: function(theme, props) {
+                var _props_wrapperProps, _props_wrapperProps1;
+                return {
+                    wrapper: {
+                        '--input-margin-top': ((_props_wrapperProps = props.wrapperProps) === null || _props_wrapperProps === void 0 ? void 0 : _props_wrapperProps.label) || ((_props_wrapperProps1 = props.wrapperProps) === null || _props_wrapperProps1 === void 0 ? void 0 : _props_wrapperProps1.description) ? theme.spacing.xxs : undefined
+                    }
+                };
             }
         }),
         InputWrapper: _core.InputWrapper.extend({
+            defaultProps: {
+                size: 'sm'
+            },
             classNames: _InputWrappermodulecss.default,
             vars: function(theme, props) {
                 var anyProps = props;
@@ -243,22 +270,26 @@ var plasmaTheme = (0, _core.createTheme)({
         Loader: _core.Loader.extend({
             defaultProps: {
                 type: 'dots',
-                color: 'action',
                 role: 'presentation'
             }
         }),
         List: _core.List.extend({
-            classNames: {
-                root: _Listmodulecss.default.root
-            }
-        }),
-        MenuItem: _core.MenuItem.extend({
-            defaultProps: {
-                fw: 300
-            }
+            classNames: _Listmodulecss.default
         }),
         Modal: _core.Modal.extend({
-            classNames: _Modalmodulecss.default
+            classNames: _Modalmodulecss.default,
+            vars: function() {
+                var sizes = {
+                    '--modal-size-xs': '432px',
+                    '--modal-size-sm': '664px',
+                    '--modal-size-md': '896px',
+                    '--modal-size-lg': '1120px',
+                    '--modal-size-xl': '88%'
+                };
+                return {
+                    root: _object_spread._({}, sizes)
+                };
+            }
         }),
         ModalOverlay: _core.Modal.Overlay.extend({
             defaultProps: {
@@ -283,25 +314,11 @@ var plasmaTheme = (0, _core.createTheme)({
             defaultProps: {
                 icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.InfoSize24Px, {
                     height: 24
-                }),
-                color: 'info'
-            },
-            classNames: {
-                root: _Notificationmodulecss.default.root,
-                icon: _Notificationmodulecss.default.icon,
-                closeButton: _Notificationmodulecss.default.closeButton
-            },
-            vars: _Notificationvars.NotificationVars
+                })
+            }
         }),
         Pagination: _core.Pagination.extend({
             classNames: _Paginationmodulecss.default,
-            vars: function() {
-                return {
-                    root: {
-                        '--pagination-control-fz': 'var(--mantine-font-size-sm)'
-                    }
-                };
-            },
             defaultProps: {
                 nextIcon: _plasmareacticons.ArrowHeadRightSize16Px,
                 previousIcon: _plasmareacticons.ArrowHeadLeftSize16Px
@@ -335,41 +352,25 @@ var plasmaTheme = (0, _core.createTheme)({
             }
         }),
         ScrollArea: _core.ScrollArea.extend({
-            classNames: {
-                viewport: _ScrollAreamodulecss.default.viewport
-            }
+            classNames: _ScrollAreamodulecss.default
         }),
         SegmentedControl: _core.SegmentedControl.extend({
             classNames: _SegmentedControlmodulecss.default
         }),
         Select: _core.Select.extend({
             defaultProps: {
-                withCheckIcon: false,
                 allowDeselect: false
-            },
-            classNames: {
-                input: _Selectmodulecss.default.input,
-                option: _Selectmodulecss.default.option
             }
         }),
         Skeleton: _core.Skeleton.extend({
-            classNames: {
-                root: _Skeletonmodulecss.default.root
-            }
+            classNames: _Skeletonmodulecss.default
         }),
         Stepper: _core.Stepper.extend({
             defaultProps: {
                 size: 'xs',
                 completedIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CheckSize16Px, {})
             },
-            classNames: {
-                step: _Steppermodulecss.default.step,
-                stepIcon: _Steppermodulecss.default.stepIcon,
-                stepCompletedIcon: _Steppermodulecss.default.stepCompletedIcon,
-                stepDescription: _Steppermodulecss.default.stepDescription,
-                separator: _Steppermodulecss.default.separator,
-                verticalSeparator: _Steppermodulecss.default.verticalSeparator
-            }
+            classNames: _Steppermodulecss.default
         }),
         Switch: _core.Switch.extend({
             classNames: function(theme, props) {
@@ -398,26 +399,27 @@ var plasmaTheme = (0, _core.createTheme)({
                 };
             }
         }),
+        Table: _core.Table.extend({
+            classNames: _Tablemodulecss.default,
+            vars: function() {
+                return {
+                    table: {
+                        '--table-border-color': 'var(--mantine-color-default-border)'
+                    }
+                };
+            }
+        }),
         Tabs: _core.Tabs.extend({
             classNames: _Tabsmodulecss.default
         }),
-        TabsTab: _core.Tabs.Tab.extend({
-            defaultProps: {
-                px: 'sm'
-            }
-        }),
         Text: _core.Text.extend({
-            classNames: _Textmodulecss.default,
-            vars: _Textvars.TextVars
-        }),
-        TextInput: _core.TextInput.extend({
             defaultProps: {
-                radius: 8
-            }
+                size: 'sm'
+            },
+            classNames: _Textmodulecss.default
         }),
         Tooltip: _core.Tooltip.extend({
             defaultProps: {
-                color: 'navy',
                 maw: 300,
                 multiline: true,
                 withArrow: true,