@cerebruminc/cerebellum 20.0.1 → 20.0.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # react-component-lib-boilerplate
 
+## [20.0.2](https://github.com/cerebruminc/cerebellum/compare/v20.0.1...v20.0.2) (2026-08-04)
+
+
+### Bug Fixes
+
+* **styles:** move supported Mantine styles out of CSS modules ([dec41d7](https://github.com/cerebruminc/cerebellum/commit/dec41d72eac485c18c1e63d2dec2a599bff68b39))
+
 ## [20.0.1](https://github.com/cerebruminc/cerebellum/compare/v20.0.0...v20.0.1) (2026-08-04)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerebruminc/cerebellum",
-  "version": "20.0.1",
+  "version": "20.0.2",
   "description": "Cerebrum's React Component Library",
   "type": "module",
   "main": "src/index.ts",

package/src/mantine/components/Pill.module.css

@@ -4,20 +4,8 @@
  *          remove button to match ClearableTag's XBox styling.
  */
 
-.root {
-  flex: 0 0 auto;
-  overflow: hidden;
-}
-
-.remove {
-  height: 100%;
-  margin-inline-start: 4px;
-  padding-inline: 8px;
-  position: relative;
-}
-
 /* X overlay */
-.remove::before {
+.remove.remove::before {
   content: "";
   background-color: currentColor;
   inset: 0;
@@ -27,6 +15,6 @@
   right: -10px;
 }
 
-.remove:hover::before {
+.remove.remove:hover::before {
   opacity: 0.2;
 }

package/src/mantine/components/modalHelpers.test.ts

@@ -45,16 +45,21 @@ describe("openConfirmModal", () => {
     expect(props.modalId).toMatch(/^confirm-/);
   });
 
-  it("applies confirmModalContent class to content classNames", () => {
+  it("applies default content styles", () => {
     openConfirmModal({ title: "Confirm" });
     const props = getModalProps();
-    expect(props.classNames.content).toBe("confirmModalContent");
+    expect(props.styles.content.minWidth).toBe("600px");
+    expect(props.styles.content["@media (max-width: 639px)"].minWidth).toBe("unset");
   });
 
-  it("applies confirmModalBody class to body classNames", () => {
+  it("applies default body styles", () => {
     openConfirmModal({ title: "Confirm" });
     const props = getModalProps();
-    expect(props.classNames.body).toBe("confirmModalBody");
+    expect(props.styles.body).toMatchObject({
+      display: "flex",
+      flexDirection: "column",
+      gap: "27px",
+    });
   });
 
   it("sets default confirm button width to 198px", () => {
@@ -108,7 +113,7 @@ describe("openConfirmModal", () => {
     expect(props.withCloseButton).toBe(false);
   });
 
-  it("allows callers to fully override content and body classNames", () => {
+  it("passes through caller-provided content and body classNames", () => {
     openConfirmModal({ title: "Confirm", ...({ classNames: { content: "myContent", body: "myBody" } } as object) } as Parameters<
       typeof openConfirmModal
     >[0]);
@@ -117,17 +122,10 @@ describe("openConfirmModal", () => {
     expect(props.classNames.body).toBe("myBody");
   });
 
-  it("applies confirmModalGroup class to groupProps", () => {
-    openConfirmModal({ title: "Confirm" });
-    const childProps = getChildProps();
-    expect(childProps.groupProps.className).toBe("confirmModalGroup");
-  });
-
-  it("merges caller-provided groupProps.className with confirmModalGroup", () => {
+  it("passes through caller-provided groupProps.className", () => {
     openConfirmModal({ title: "Confirm", groupProps: { className: "myGroup" } });
     const childProps = getChildProps();
-    expect(childProps.groupProps.className).toContain("confirmModalGroup");
-    expect(childProps.groupProps.className).toContain("myGroup");
+    expect(childProps.groupProps.className).toBe("myGroup");
   });
 
   it("defaults closeOnConfirm and closeOnCancel to true", () => {

package/src/mantine/components/modalHelpers.tsx

@@ -8,9 +8,7 @@
 import { Box, Button, Group } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import React, { ReactNode, useRef } from "react";
-import { clsx } from "clsx";
 import { useContainerQuery } from "../../hooks/useContainerQuery";
-import styles from "./modalHelpers.module.css";
 
 type ConfirmModalWithTitle = Parameters<typeof modals.openConfirmModal>[0] & {
   // title is strongly encouraged, but not required since some modals may use custom content that includes its own title element
@@ -99,6 +97,12 @@ const ResponsiveConfirmContent: React.FC<ResponsiveConfirmContentProps> = ({
   const resolvedCancelStyle = isStacked ? { ...cancelStyle, width: undefined } : cancelStyle;
 
   const { className: groupClassName, ...restGroupProps }: ConfirmGroupProps = groupProps ?? {};
+  const stackedGroupStyle = isStacked
+    ? {
+        alignItems: "center",
+        flexDirection: "column-reverse" as const,
+      }
+    : undefined;
 
   return (
     <>
@@ -108,7 +112,11 @@ const ResponsiveConfirmContent: React.FC<ResponsiveConfirmContentProps> = ({
         mt={children ? 0 : "md"}
         justify="flex-end"
         {...restGroupProps}
-        className={clsx(groupClassName, isStacked && styles.confirmModalGroupStacked)}
+        className={groupClassName}
+        style={{
+          ...restGroupProps.style,
+          ...stackedGroupStyle,
+        }}
       >
         <Button
           {...restCancelProps}
@@ -136,6 +144,7 @@ const ResponsiveConfirmContent: React.FC<ResponsiveConfirmContentProps> = ({
 export const openConfirmModal = (props: ConfirmModalWithTitle) => {
   const {
     classNames,
+    styles,
     children,
     onCancel,
     onConfirm,
@@ -155,10 +164,20 @@ export const openConfirmModal = (props: ConfirmModalWithTitle) => {
   modals.open({
     ...restModalProps,
     modalId,
-    classNames: {
-      content: clsx(styles.confirmModalContent, classNames?.content),
-      body: clsx(styles.confirmModalBody, classNames?.body),
-      ...classNames,
+    classNames,
+    styles: {
+      content: {
+        minWidth: "600px",
+        "@media (max-width: 639px)": {
+          minWidth: "unset",
+        },
+      },
+      body: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "27px",
+      },
+      ...styles,
     },
     children: (
       <ResponsiveConfirmContent
@@ -180,7 +199,7 @@ export const openConfirmModal = (props: ConfirmModalWithTitle) => {
             ...cancelProps?.style,
           },
         }}
-        groupProps={{ ...groupProps, className: clsx(styles.confirmModalGroup, groupProps?.className) }}
+        groupProps={groupProps}
         labels={labels}
         onConfirm={onConfirm}
         onCancel={onCancel}

package/src/mantine/mantineTheme.ts

@@ -29,9 +29,7 @@ import type { NotificationTone, NotificationType, TextVariant } from "./types";
 
 import avatarClasses from "./components/Avatar.module.css";
 import buttonClasses from "./components/Button.module.css";
-import modalClasses from "./components/Modal.module.css";
 import pillClasses from "./components/Pill.module.css";
-import scrollAreaClasses from "./components/ScrollArea.module.css";
 import notificationClasses from "./services/Notification.module.css";
 
 type TonedNotificationProps = NotificationProps &
@@ -51,14 +49,17 @@ const getLabelStyles = (theme: MantineTheme) => {
 /**
  * Common variables for form input sizing.
  */
-const getInputVars = () => {
+const getInputVars = (size?: MantineSize | (string & {})) => {
   const wrapper: Partial<
     Record<
+      | "--input-fz"
       | "--input-fz-xs"
       | "--input-fz-sm"
       | "--input-fz-md"
       | "--input-fz-lg"
       | "--input-fz-xl"
+      | "--input-height"
+      | "--input-font-family"
       | "--input-height-xs"
       | "--input-height-sm"
       | "--input-height-md"
@@ -68,12 +69,15 @@ const getInputVars = () => {
     >
   > = {};
 
+  const resolvedSize = size === "xs" || size === "sm" ? size : size === "xl" ? "xl" : "md";
+
   // TODO: FRN-2871 map sizes to supported sizes only
   wrapper["--input-fz-xs"] = "calc(0.875rem * var(--mantine-scale))"; // 14px
   wrapper["--input-fz-sm"] = "calc(0.875rem * var(--mantine-scale))"; // 14px
   wrapper["--input-fz-md"] = "calc(0.9375rem * var(--mantine-scale))"; // 15px
   wrapper["--input-fz-lg"] = "calc(0.9375rem * var(--mantine-scale))"; // 15px
   wrapper["--input-fz-xl"] = "calc(1rem * var(--mantine-scale))"; // 16px
+  wrapper["--input-font-family"] = "'Nunito Sans', sans-serif";
 
   wrapper["--input-height-xs"] = "calc(2.25rem * var(--mantine-scale))"; // 36px
   wrapper["--input-height-sm"] = "calc(2.5rem * var(--mantine-scale))"; // 40px
@@ -81,6 +85,9 @@ const getInputVars = () => {
   wrapper["--input-height-lg"] = "calc(3.4375rem * var(--mantine-scale))"; // 55px
   wrapper["--input-height-xl"] = "calc(3.75rem * var(--mantine-scale))"; // 60px
 
+  wrapper["--input-fz"] = wrapper[`--input-fz-${resolvedSize}` as const];
+  wrapper["--input-height"] = wrapper[`--input-height-${resolvedSize}` as const];
+
   return { wrapper };
 };
 
@@ -518,14 +525,14 @@ export const createCustomMantineTheme = (optionsOrBrandColor?: CreateCustomManti
           size: "lg",
           inputWrapperOrder: ["label", "error", "input", "description"],
         },
-        vars: (_theme: MantineTheme, props: TextInputProps) => getInputVars(),
+        vars: (_theme: MantineTheme, props: TextInputProps) => getInputVars(props.size),
       },
       PasswordInput: {
         defaultProps: {
           size: "lg",
           inputWrapperOrder: ["label", "error", "input", "description"],
         },
-        vars: (_theme: MantineTheme, props: PasswordInputProps) => getInputVars(),
+        vars: (_theme: MantineTheme, props: PasswordInputProps) => getInputVars(props.size),
       },
       Textarea: {
         defaultProps: {
@@ -533,7 +540,7 @@ export const createCustomMantineTheme = (optionsOrBrandColor?: CreateCustomManti
           inputWrapperOrder: ["label", "error", "input", "description"],
         },
         vars: (_theme: MantineTheme, props: TextareaProps) => {
-          const inputVars = getInputVars();
+          const inputVars = getInputVars(props.size);
           const wrapper: Partial<
             Record<
               | "--input-fz-xs"
@@ -572,13 +579,9 @@ export const createCustomMantineTheme = (optionsOrBrandColor?: CreateCustomManti
           size: "lg",
           inputWrapperOrder: ["label", "error", "input", "description"],
         },
-        vars: (_theme: MantineTheme, props: SelectProps) => getInputVars(),
+        vars: (_theme: MantineTheme, props: SelectProps) => getInputVars(props.size),
       },
       Modal: {
-        classNames: {
-          body: modalClasses.body,
-          header: modalClasses.header,
-        },
         defaultProps: {
           withCloseButton: false,
           radius: "10px",
@@ -598,6 +601,24 @@ export const createCustomMantineTheme = (optionsOrBrandColor?: CreateCustomManti
             fontWeight: 600,
             lineHeight: 1.33333,
           },
+          header: {
+            padding: "49px 71px 0",
+            "@media (max-width: 600px)": {
+              paddingInline: "50px",
+            },
+            "@media (max-width: 400px)": {
+              paddingInline: "30px",
+            },
+          },
+          body: {
+            padding: "20px 71px 61px",
+            "@media (max-width: 600px)": {
+              paddingInline: "50px",
+            },
+            "@media (max-width: 400px)": {
+              paddingInline: "30px",
+            },
+          },
           content: {
             // Custom scrollbar to match Cerebellum's Modal component
             scrollbarColor: "#DCE2ED transparent",
@@ -673,28 +694,28 @@ export const createCustomMantineTheme = (optionsOrBrandColor?: CreateCustomManti
           size: "lg",
           inputWrapperOrder: ["label", "error", "input", "description"],
         },
-        vars: (_theme: MantineTheme, props: { size?: MantineSize }) => getInputVars(),
+        vars: (_theme: MantineTheme, props: { size?: MantineSize }) => getInputVars(props.size),
       },
       DateInput: {
         defaultProps: {
           size: "lg",
           inputWrapperOrder: ["label", "error", "input", "description"],
         },
-        vars: (_theme: MantineTheme, props: { size?: MantineSize }) => getInputVars(),
+        vars: (_theme: MantineTheme, props: { size?: MantineSize }) => getInputVars(props.size),
       },
       DatePickerInput: {
         defaultProps: {
           size: "lg",
           inputWrapperOrder: ["label", "error", "input", "description"],
         },
-        vars: (_theme: MantineTheme, props: { size?: MantineSize }) => getInputVars(),
+        vars: (_theme: MantineTheme, props: { size?: MantineSize }) => getInputVars(props.size),
       },
       Autocomplete: {
         defaultProps: {
           size: "lg",
           inputWrapperOrder: ["label", "error", "input", "description"],
         },
-        vars: (_theme: MantineTheme, props: { size?: MantineSize }) => getInputVars(),
+        vars: (_theme: MantineTheme, props: { size?: MantineSize }) => getInputVars(props.size),
       },
       Combobox: {
         defaultProps: {
@@ -705,7 +726,7 @@ export const createCustomMantineTheme = (optionsOrBrandColor?: CreateCustomManti
         defaultProps: {
           size: "lg",
         },
-        vars: (_theme: MantineTheme, props: { size?: MantineSize }) => getInputVars(),
+        vars: (_theme: MantineTheme, props: { size?: MantineSize }) => getInputVars(props.size),
       },
       InputWrapper: {
         defaultProps: {
@@ -713,14 +734,27 @@ export const createCustomMantineTheme = (optionsOrBrandColor?: CreateCustomManti
         },
         vars: (theme: MantineTheme) => {
           const label: Partial<Record<"--input-asterisk-color" | "--input-label-size", string | undefined>> = {};
+          const description: Partial<Record<"--input-description-size", string | undefined>> = {};
+          const error: Partial<Record<"--input-error-size", string | undefined>> = {};
 
           label["--input-label-size"] = "calc(0.875rem * var(--mantine-scale))"; // 14px
           label["--input-asterisk-color"] = theme.colors.blue[7];
+          description["--input-description-size"] = "calc(0.875rem * var(--mantine-scale))"; // 14px
+          error["--input-error-size"] = "calc(0.875rem * var(--mantine-scale))"; // 14px
 
-          return { label };
+          return { label, description, error };
         },
         styles: (theme: MantineTheme) => ({
-          label: getLabelStyles(theme),
+          label: {
+            ...getLabelStyles(theme),
+            fontFamily: "'Nunito Sans', sans-serif",
+          },
+          description: {
+            fontFamily: "'Nunito Sans', sans-serif",
+          },
+          error: {
+            fontFamily: "'Nunito Sans', sans-serif",
+          },
         }),
       },
       Notifications: {
@@ -731,7 +765,6 @@ export const createCustomMantineTheme = (optionsOrBrandColor?: CreateCustomManti
       Notification: {
         defaultProps: {
           classNames: {
-            closeButton: notificationClasses.closeButton,
             root: notificationClasses.root,
           },
         },
@@ -813,7 +846,14 @@ export const createCustomMantineTheme = (optionsOrBrandColor?: CreateCustomManti
               // Make the button and icon larger
               "--cb-size": "calc(2rem * var(--mantine-scale))",
               "--cb-icon-size": "calc(1.5rem * var(--mantine-scale))",
+              backgroundColor: "transparent",
               color: theme.colors.gray[8],
+              opacity: 0.6,
+              transition: "opacity 350ms ease, background-color 350ms ease",
+              "&:hover": {
+                backgroundColor: "transparent",
+                opacity: 1,
+              },
               ...(isToast && {
                 display: "none",
               }),
@@ -839,7 +879,6 @@ export const createCustomMantineTheme = (optionsOrBrandColor?: CreateCustomManti
           },
         },
         classNames: {
-          root: pillClasses.root,
           remove: pillClasses.remove,
         },
         vars: (_theme: MantineTheme, _props: PillProps) => ({
@@ -869,6 +908,8 @@ export const createCustomMantineTheme = (optionsOrBrandColor?: CreateCustomManti
             root: {
               backgroundColor: colorScale[bgIndex],
               borderRadius: "8px",
+              flex: "0 0 auto",
+              overflow: "hidden",
               ...(theme.other.highContrast && {
                 border: "1px solid #000000",
               }),
@@ -884,15 +925,36 @@ export const createCustomMantineTheme = (optionsOrBrandColor?: CreateCustomManti
             },
             remove: {
               color: colorScale[textIndex],
+              height: "100%",
+              marginInlineStart: "4px",
+              paddingInline: "8px",
+              position: "relative",
             },
           };
         },
       },
       ScrollArea: {
-        classNames: {
-          scrollbar: scrollAreaClasses.scrollbar,
-          thumb: scrollAreaClasses.thumb,
-        },
+        styles: (theme: MantineTheme) => ({
+          scrollbar: {
+            backgroundColor: "transparent",
+            width: "11px",
+            "&:hover": {
+              backgroundColor: "transparent",
+            },
+            "&:active": {
+              backgroundColor: "transparent",
+            },
+          },
+          thumb: {
+            backgroundColor: theme.colors.gray[4],
+            ".mantine-ScrollArea-scrollbar:hover > &": {
+              backgroundColor: theme.colors.gray[6],
+            },
+            ".mantine-ScrollArea-scrollbar:active > &": {
+              backgroundColor: theme.colors.gray[4],
+            },
+          },
+        }),
       },
       TagsInput: {
         defaultProps: {
@@ -901,6 +963,12 @@ export const createCustomMantineTheme = (optionsOrBrandColor?: CreateCustomManti
       },
       Switch: {
         styles: (theme: MantineTheme) => ({
+          body: {
+            alignItems: "center",
+          },
+          labelWrapper: {
+            justifyContent: "center",
+          },
           thumb: {
             boxShadow: theme.other.highContrast ? "0 0 4px rgba(0, 0, 0, 1)" : "0 2px 9px rgba(81, 118, 236, 0.44)",
           },

package/src/mantine/services/Notification.module.css

@@ -1,14 +1,3 @@
-.closeButton {
-  background-color: transparent;
-  opacity: 0.6;
-  transition: opacity 350ms ease, background-color 350ms ease;
-}
-
-.closeButton:hover {
-  background-color: transparent;
-  opacity: 1;
-}
-
 /* Higher specificity than Mantine's single-class selector so this still wins
    even when Mantine global styles are loaded later. */
 .root.root::before {

package/src/mantine/components/Modal.module.css

@@ -1,21 +0,0 @@
-.body {
-  padding: 20px 71px 61px;
-}
-
-.header {
-  padding: 49px 71px 0px;
-}
-
-@media (max-width: 600px) {
-  .body,
-  .header {
-    padding-inline: 50px;
-  }
-}
-
-@media (max-width: 400px) {
-  .body,
-  .header {
-    padding-inline: 30px;
-  }
-}

package/src/mantine/components/ScrollArea.module.css

@@ -1,32 +0,0 @@
-.scrollbar {
-  background-color: transparent;
-  width: 11px;
-}
-
-@media (hover: hover) {
-  .scrollbar:hover {
-    background-color: transparent;
-  }
-}
-
-@media (hover: none) {
-  .scrollbar:active {
-    background-color: transparent;
-  }
-}
-
-.thumb {
-  background-color: var(--mantine-color-gray-4);
-}
-
-@media (hover: hover) {
-  .scrollbar:hover > .thumb {
-    background-color: var(--mantine-color-gray-6);
-  }
-}
-
-@media (hover: none) {
-  .scrollbar:active > .thumb {
-    background-color: var(--mantine-color-gray-4);
-  }
-}

package/src/mantine/components/modalHelpers.module.css

@@ -1,25 +0,0 @@
-.confirmModalContent {
-  min-width: 600px;
-}
-
-.confirmModalBody {
-  display: flex;
-  flex-direction: column;
-  gap: 27px;
-}
-
-/* Applied programmatically via useContainerQuery when buttons don't fit side-by-side */
-.confirmModalGroupStacked {
-  flex-direction: column-reverse !important;
-  align-items: center !important;
-}
-
-.confirmModalGroupStacked > * {
-  max-width: 100%;
-}
-
-@media (max-width: 639px) {
-  .confirmModalContent {
-    min-width: unset;
-  }
-}