@cerebruminc/cerebellum 20.0.0 → 20.0.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # react-component-lib-boilerplate
 
+## [20.0.1](https://github.com/cerebruminc/cerebellum/compare/v20.0.0...v20.0.1) (2026-08-04)
+
+
+### Bug Fixes
+
+* **dialog:** fix dialog style ([f4580ef](https://github.com/cerebruminc/cerebellum/commit/f4580ef21e45fff007de6636120e38c87d1bb818))
+* **text:** replace problematic CSS styles with Mantine props ([b08abc1](https://github.com/cerebruminc/cerebellum/commit/b08abc10f148cd3e148898d291706393ccb8edae))
+
 ## [20.0.0](https://github.com/cerebruminc/cerebellum/compare/v19.2.0...v20.0.0) (2026-08-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerebruminc/cerebellum",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "description": "Cerebrum's React Component Library",
   "type": "module",
   "main": "src/index.ts",
@@ -60,6 +60,8 @@
     "@babel/runtime": "^7.23.9",
     "@biomejs/biome": "^1.6.4",
     "@mantine/core": "^8.3.18",
+    "@mantine/charts": "^8.3.18",
+    "@mantine/dates": "^8.3.18",
     "@mantine/modals": "^8.3.18",
     "@mantine/notifications": "^8.3.18",
     "@storybook/addon-a11y": "^9.1.17",

package/src/components/UserCard/UserCard.module.css

@@ -53,18 +53,9 @@
 
 /* Text styles */
 .name {
-  font-size: 18px;
-  font-weight: 700;
-  line-height: 24px;
   margin-bottom: 7px;
 }
 
-.email {
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-}
-
 /* Layout groups */
 .optionsBox {
   margin-top: 27px;
@@ -116,12 +107,6 @@
   width: 320px;
 }
 
-.searchText {
-  color: #70748c;
-  font-size: 16px;
-  font-weight: 400;
-}
-
 /* Option (clickable list item) */
 .option {
   align-items: center;
@@ -188,9 +173,6 @@
 }
 
 .optionText {
-  font-size: 15px;
-  font-weight: 600;
-  letter-spacing: 0.36px;
   padding-right: 5px;
 }
 

package/src/components/UserCard/UserCard.tsx

@@ -14,6 +14,7 @@ import { ORGS_DIVIDER_ID, SIGN_OUT_DIVIDER_ID, SIGN_OUT_TEXT } from "./const";
 import { findOptimalScrollingheight } from "./findOptimalScrollingheight";
 import { UserCardOrganizationsType, UserCardType } from "./types";
 import { useWindowDimensions } from "./useWindowResize";
+import { fontWeightMap } from "../../mantine/mantineTheme";
 
 const USER_DETAILS_PADDING = 21;
 const BASE_HEIGHT_OFFSET = 20;
@@ -197,14 +198,14 @@ export const UserCard: FC<UserCardType> = ({
           {isLoading ? (
             <Skeleton height={18} width={100} mt={8} mb={18} />
           ) : (
-            <Text className={styles.name} c="gray.9">
+            <Text className={styles.name} variant="body-lg" c="gray.9" fw={fontWeightMap.Bold} lh="24px">
               {userName}
             </Text>
           )}
           {isLoading ? (
             <Skeleton height={16} width={160} mb={8} />
           ) : (
-            <Text className={styles.email} c="gray.9">
+            <Text variant="body-md" c="gray.9" lh="24px">
               <Truncate>{userEmail}</Truncate>
             </Text>
           )}
@@ -239,7 +240,7 @@ export const UserCard: FC<UserCardType> = ({
                         </div>
                       </div>
                     )}
-                    <Text className={styles.optionText} c="gray.9">
+                    <Text className={styles.optionText} variant="semibold-sm" c="gray.9" style={{ letterSpacing: "0.36px" }}>
                       <Truncate lines={2}>{text}</Truncate>
                     </Text>
                   </div>
@@ -253,7 +254,9 @@ export const UserCard: FC<UserCardType> = ({
 
           {organizations && orgSearchThreshold && organizations.length > orgSearchThreshold ? (
             <div className={styles.searchGroup}>
-              <Text className={styles.searchText}>Organizations:</Text>
+              <Text variant="body-md" c="gray.8">
+                Organizations:
+              </Text>
               <TextInput
                 size="sm"
                 placeholder="Search"
@@ -319,7 +322,7 @@ export const UserCard: FC<UserCardType> = ({
                         </div>
                       </div>
                     )}
-                    <Text className={styles.optionText} c="gray.9">
+                    <Text className={styles.optionText} variant="semibold-sm" c="gray.9" style={{ letterSpacing: "0.36px" }}>
                       <Truncate lines={2}>{text}</Truncate>
                     </Text>
                     {isActive && multipleOrgs && (
@@ -354,7 +357,7 @@ export const UserCard: FC<UserCardType> = ({
                 <LogOut fill={TEXT_COLOR} />
               </div>
             </div>
-            <Text className={styles.optionText} c="gray.9">
+            <Text className={styles.optionText} variant="semibold-sm" c="gray.9" style={{ letterSpacing: "0.36px" }}>
               {SIGN_OUT_TEXT}
             </Text>
           </div>

package/src/components/UserInformationCard/UserInformationCard.module.css

@@ -158,10 +158,7 @@
 .orderTag {
   background-color: #8da7ff; /* BLUE_35 — no exact Mantine shade */
   border-radius: 6px;
-  color: var(--mantine-color-white);
   display: inline-block;
-  font-size: 16px;
-  font-weight: 600;
   max-width: calc(var(--uic-order-tag-max-width, 186px) - 44px);
   padding: 6px 17px;
 }

package/src/components/UserInformationCard/UserInformationCard.tsx

@@ -156,7 +156,7 @@ export const UserInformationCard: FC<UserInformationCardType> = ({
       >
         {orderType && (
           <div className={styles.orderTag} style={{ "--uic-order-tag-max-width": `${orderTagMaxWidth}px` } as CSSProperties}>
-            <Text component="span" fw={fontWeightMap.SemiBold} truncate data-sentry-unmask>
+            <Text component="span" variant="body-md" c="white" fw={fontWeightMap.SemiBold} truncate data-sentry-unmask>
               {orderType}
             </Text>
           </div>

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

@@ -9,26 +9,18 @@
   opacity: 1;
 }
 
-/* Mantine's color highlight. We only use it in the Dialog */
-.root:before {
+/* Higher specificity than Mantine's single-class selector so this still wins
+   even when Mantine global styles are loaded later. */
+.root.root::before {
   width: 100%;
   top: 0;
   left: 0;
   right: 0;
   height: 5px;
+  inset-inline-start: 0;
 }
 
 /* Mantine hides the ::before bar when an icon is present — re-enable it */
-.root[data-with-icon]:before {
+.root.root[data-with-icon]::before {
   display: block;
 }
-
-.anchorRoot {
-  color: var(--mantine-color-gray-8);
-  transition: color 350ms ease;
-  text-underline-offset: 5px;
-  white-space: nowrap;
-}
-.anchorRoot:hover {
-  color: var(--mantine-color-gray-9);
-}

package/src/mantine/services/notifications.tsx

@@ -2,9 +2,6 @@ import { Anchor, Button, Group, Text } from "@mantine/core";
 import { type NotificationData, type NotificationsStore, notifications } from "@mantine/notifications";
 import type { MouseEventHandler } from "react";
 import { fontWeightMap } from "../mantineTheme";
-import notificationClasses from "./Notification.module.css";
-
-console.log("notificationClasses", notificationClasses);
 
 type ToastNotification = Omit<NotificationData, "title">;
 
@@ -65,8 +62,17 @@ export const showBar = (notification: BarNotification, store?: NotificationsStor
       </Text>
       <Anchor
         component="button"
-        classNames={{ root: notificationClasses.anchorRoot }}
         variant="body-sm"
+        c="gray.8"
+        styles={{
+          root: {
+            textUnderlineOffset: "5px",
+            whiteSpace: "nowrap",
+            "&:hover": {
+              color: "var(--mantine-color-gray-9)",
+            },
+          },
+        }}
         onClick={(event) => {
           buttonClick?.(event);
           notifications.hide(id, store);