@luscii-healthtech/web-ui 58.1.3 → 58.2.1

package/dist/index.development.js

@@ -234,6 +234,9 @@ const newVariants = /* @__PURE__ */ new Set([
   "body-base-light",
   "body-base-regular",
   "body-base-bold",
+  "body-medium-light",
+  "body-medium-regular",
+  "body-medium-bold",
   "body-small-light",
   "body-small-regular",
   "body-small-bold"
@@ -243,6 +246,9 @@ const newVariantClasses = {
   "body-base-light": "ui-typo-body-base-light",
   "body-base-regular": "ui-typo-body-base-regular",
   "body-base-bold": "ui-typo-body-base-bold",
+  "body-medium-light": "ui-typo-body-medium-light",
+  "body-medium-regular": "ui-typo-body-medium-regular",
+  "body-medium-bold": "ui-typo-body-medium-bold",
   "body-small-light": "ui-typo-body-small-light",
   "body-small-regular": "ui-typo-body-small-regular",
   "body-small-bold": "ui-typo-body-small-bold"
@@ -5769,7 +5775,7 @@ DetailsDisclosure.Summary = Summary;
 Summary.OpenIndicator = OpenIndicator;
 Summary.DefaultOpenIndicator = () => jsxRuntime.jsx(OpenIndicator, { component: DefaultOpenIndicator });
 
-const DEFAULT_TEXT_CLASS_NAME = "ui:text-[#162130]";
+const DEFAULT_TEXT_CLASS_NAME = "ui:text-text-neutral-primary-default";
 const COLLAPSED_WIDTH_CLASS_NAME = "ui:w-min ui:min-w-[96px] ui:max-w-[120px]";
 const context$1 = React.createContext({
   variant: "primary"
@@ -5833,7 +5839,7 @@ function MenuItemText(props) {
         return props.variant;
     }
   };
-  return jsxRuntime.jsx(Text, Object.assign({ as: "span", color: "current", variant: getMenuVariant(), truncate: Boolean(props.truncate), clampLines: isCollapsed }, props, { className: classNames__default.default({
+  return jsxRuntime.jsx(Text, Object.assign({ as: "span", color: "current", variant: getMenuVariant(), truncate: Boolean(props.truncate), clampLines: isCollapsed }, props, { className: classNames__default.default("menu-item-text", {
     "ui:sm:leading-[16px]": isCollapsed,
     "ui:sm:leading-[24px]": !isCollapsed
   }, {
@@ -5845,43 +5851,31 @@ const useGetClassName = () => {
   return React.useCallback(
     // eslint-disable-next-line consistent-return
     ({ isActive = false, classNameProp = "" } = {}) => {
-      const base = "ui:block ui:w-full ui:radius-xxs ui:text-current";
+      const base = "ui:block ui:w-full ui:radius-xxs";
+      const primaryStates = classNames__default.default(
+        "ui:border ui:border-transparent",
+        // Transitions
+        "ui:transition-[color,background,transform]",
+        // Hover
+        "ui:hover:bg-background-neutral-secondary-hovered ui:hover:[&_.menu-item-text]:font-semibold",
+        // Pressed
+        "ui:active:bg-background-neutral-secondary-hovered ui:active:border-border-neutral-primary-pressed ui:active:[&_.menu-item-text]:font-semibold ui:active:scale-[0.98]",
+        {
+          "ui:bg-transparent ui:text-text-neutral-primary-default": !isActive,
+          // Selected
+          "ui:bg-background-neutral-secondary-selected ui:text-text-brand-primary-default ui:[&_.menu-item-text]:font-semibold": isActive,
+          // Style the icon inside the menu item. Selected items inherit the
+          // brand text color instead.
+          "ui:[&_.menu-icon]:text-icon-neutral-primary-default ui:hover:[&_.menu-icon]:text-icon-neutral-primary-hover": !isActive
+        }
+      );
       switch (variant) {
         case "primary":
-          return classNames__default.default(
-            base,
-            "ui:py-xs",
-            "ui:px-m",
-            // Transitions
-            "ui:transition-[color,background,transform]",
-            // States
-            "ui:hover:bg-primary-background ui:active:scale-[0.98]",
-            {
-              "ui:bg-transparent ui:text-on-surface": !isActive,
-              "ui:bg-primary-background-active": isActive
-            },
-            classNameProp
-          );
+          return classNames__default.default(base, "ui:py-xs", "ui:px-m", primaryStates, classNameProp);
         case "primary-collapsed":
-          return classNames__default.default(
-            base,
-            "ui:py-xxs",
-            "ui:px-xxxxs",
-            // Transitions
-            "ui:transition-[color,background,transform]",
-            // States
-            "ui:hover:bg-primary-background ui:active:scale-[0.98]",
-            {
-              "ui:bg-transparent ui:text-on-surface": !isActive,
-              "ui:bg-primary-background-active ui:text-primary": isActive,
-              // Style the icon inside the menu item
-              "ui:[&_.menu-icon]:text-[#3a4657]": !isActive,
-              "ui:hover:[&_.menu-icon]:text-[#162130]": true
-            },
-            classNameProp
-          );
+          return classNames__default.default(base, "ui:py-xxs", "ui:px-xxxxs", primaryStates, classNameProp);
         case "secondary":
-          return classNames__default.default(base, "ui:py-xs", "ui:hover:text-primary ui:focus:text-primary ui:active:scale-[0.98]", {
+          return classNames__default.default(base, "ui:text-current", "ui:py-xs", "ui:hover:text-primary ui:focus:text-primary ui:active:scale-[0.98]", {
             ["ui:[&_span]:font-bold"]: isActive
           }, classNameProp);
       }