@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/dashboard/AuthTools/AuthThemeSwitch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AuthThemeSwitch.mjs","names":[],"sources":["../../../src/dashboard/AuthTools/AuthThemeSwitch.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Monitor, Moon, Sun } from 'lucide-react';\n\nimport Segmented from '@/base-ui/Segmented';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport type { AuthThemeMode, AuthThemeSwitchProps } from './type';\n\nconst OPTIONS = [\n  { icon: Moon, value: 'dark' },\n  { icon: Monitor, value: 'auto' },\n  { icon: Sun, value: 'light' },\n] as const;\n\nconst DEFAULT_LABELS: Record<AuthThemeMode, string> = {\n  auto: 'System',\n  dark: 'Dark',\n  light: 'Light',\n};\n\n/** Compact icon-only theme picker for auth corner tools. Controlled; wire it to your store. */\nfunction AuthThemeSwitch({\n  className,\n  labels,\n  onChange,\n  style,\n  value = 'auto',\n}: AuthThemeSwitchProps) {\n  const names = { ...DEFAULT_LABELS, ...labels };\n  return (\n    <Segmented<AuthThemeMode>\n      className={cx(styles.theme, className)}\n      size=\"small\"\n      style={style}\n      value={value}\n      variant=\"outlined\"\n      classNames={{\n        indicator: styles.themeIndicator,\n        item: styles.themeItem,\n        itemIcon: styles.themeIcon,\n        itemLabel: styles.themeLabel,\n      }}\n      options={OPTIONS.map((option) => ({\n        icon: <Icon icon={option.icon} />,\n        label: names[option.value],\n        title: names[option.value],\n        value: option.value,\n      }))}\n      onChange={(next) => onChange?.(next)}\n    />\n  );\n}\n\nAuthThemeSwitch.displayName = 'AuthThemeSwitch';\n\nexport default AuthThemeSwitch;\n"],"mappings":";;;;;;;;AAWA,MAAM,UAAU;CACd;EAAE,MAAM;EAAM,OAAO;CAAO;CAC5B;EAAE,MAAM;EAAS,OAAO;CAAO;CAC/B;EAAE,MAAM;EAAK,OAAO;CAAQ;AAC9B;AAEA,MAAM,iBAAgD;CACpD,MAAM;CACN,MAAM;CACN,OAAO;AACT;;AAGA,SAAS,gBAAgB,EACvB,WACA,QACA,UACA,OACA,QAAQ,UACe;CACvB,MAAM,QAAQ;EAAE,GAAG;EAAgB,GAAG;CAAO;CAC7C,OACE,oBAAC,WAAD;EACE,WAAW,GAAG,OAAO,OAAO,SAAS;EACrC,MAAK;EACE;EACA;EACP,SAAQ;EACR,YAAY;GACV,WAAW,OAAO;GAClB,MAAM,OAAO;GACb,UAAU,OAAO;GACjB,WAAW,OAAO;EACpB;EACA,SAAS,QAAQ,KAAK,YAAY;GAChC,MAAM,oBAAC,MAAD,EAAM,MAAM,OAAO,KAAO,CAAA;GAChC,OAAO,MAAM,OAAO;GACpB,OAAO,MAAM,OAAO;GACpB,OAAO,OAAO;EAChB,EAAE;EACF,WAAW,SAAS,WAAW,IAAI;CACpC,CAAA;AAEL;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"AuthThemeSwitch.mjs","names":["clsx"],"sources":["../../../src/dashboard/AuthTools/AuthThemeSwitch.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { Monitor, Moon, Sun } from 'lucide-react';\n\nimport Icon from '@/Icon';\nimport Segmented from '@/Segmented';\n\nimport { styles } from './style';\nimport type { AuthThemeMode, AuthThemeSwitchProps } from './type';\n\nconst OPTIONS = [\n  { icon: Moon, value: 'dark' },\n  { icon: Monitor, value: 'auto' },\n  { icon: Sun, value: 'light' },\n] as const;\n\nconst DEFAULT_LABELS: Record<AuthThemeMode, string> = {\n  auto: 'System',\n  dark: 'Dark',\n  light: 'Light',\n};\n\n/** Compact icon-only theme picker for auth corner tools. Controlled; wire it to your store. */\nfunction AuthThemeSwitch({\n  className,\n  labels,\n  onChange,\n  style,\n  value = 'auto',\n}: AuthThemeSwitchProps) {\n  const names = { ...DEFAULT_LABELS, ...labels };\n  return (\n    <Segmented<AuthThemeMode>\n      className={clsx('lobe-auth-theme-switch', className)}\n      size=\"small\"\n      style={style}\n      value={value}\n      variant=\"outlined\"\n      classNames={{\n        item: 'lobe-auth-theme-switch-item',\n        itemIcon: stylex.props(styles.themeIcon).className,\n        itemLabel: stylex.props(styles.themeLabel).className,\n      }}\n      options={OPTIONS.map((option) => ({\n        icon: <Icon icon={option.icon} />,\n        label: names[option.value],\n        title: names[option.value],\n        value: option.value,\n      }))}\n      onChange={(next) => onChange?.(next)}\n    />\n  );\n}\n\nAuthThemeSwitch.displayName = 'AuthThemeSwitch';\n\nexport default AuthThemeSwitch;\n"],"mappings":";;;;;;;;;AAUA,MAAM,UAAU;CAAC;EACf,MAAM;EACN,OAAO;CACT;CAAG;EACD,MAAM;EACN,OAAO;CACT;CAAG;EACD,MAAM;EACN,OAAO;CACT;AAAC;AACD,MAAM,iBAAgD;CACpD,MAAM;CACN,MAAM;CACN,OAAO;AACT;;AAGA,SAAS,gBAAgB,EACvB,WACA,QACA,UACA,OACA,QAAQ,UACe;CACvB,MAAM,QAAQ;EACZ,GAAG;EACH,GAAG;CACL;CACA,OAAO,oBAAC,WAAD;EAA0B,WAAWA,OAAK,0BAA0B,SAAS;EAAG,MAAK;EAAe;EAAc;EAAO,SAAQ;EAAW,YAAY;GAC7J,MAAM;GACN,UAAU,OAAO,MAAM,OAAO,SAAS,CAAC,CAAC;GACzC,WAAW,OAAO,MAAM,OAAO,UAAU,CAAC,CAAC;EAC7C;EAAG,SAAS,QAAQ,KAAI,YAAW;GACjC,MAAM,oBAAC,MAAD,EAAM,MAAM,OAAO,KAAO,CAAA;GAChC,OAAO,MAAM,OAAO;GACpB,OAAO,MAAM,OAAO;GACpB,OAAO,OAAO;EAChB,EAAE;EAAG,WAAU,SAAQ,WAAW,IAAI;CAAI,CAAA;AAC5C;AACA,gBAAgB,cAAc"}

package/es/dashboard/AuthTools/style.mjs

@@ -1,62 +1,26 @@
-import { createStaticStyles } from "antd-style";
 //#region src/dashboard/AuthTools/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => ({
-	locale: css`
-    && {
-      inline-size: fit-content;
-      min-inline-size: 120px;
-      block-size: 28px;
-      border-radius: 28px;
-
-      background: ${cssVar.colorBgLayout};
-    }
-  `,
-	localeIcon: css`
-    margin-inline-end: 2px;
-  `,
-	theme: css`
-    && {
-      block-size: 28px;
-      padding: 2px;
-      border-radius: 28px;
-    }
-  `,
-	themeIcon: css`
-    inline-size: 16px;
-    block-size: 16px;
-  `,
-	themeIndicator: css`
-    && {
-      border-radius: 22px;
-    }
-  `,
-	themeItem: css`
-    && {
-      block-size: 22px;
-      padding-inline: 8px;
-      border-radius: 22px;
-    }
-  `,
-	themeLabel: css`
-    position: absolute;
-
-    overflow: hidden;
-
-    inline-size: 1px;
-    block-size: 1px;
-    padding: 0;
-    border: 0;
-
-    white-space: nowrap;
-
-    clip-path: inset(50%);
-  `,
-	toolRow: css`
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  `
-}));
+const styles = {
+	localeIcon: {
+		k71WvV: "lbnnr8r",
+		$$css: true
+	},
+	themeIcon: {
+		kZKoxP: "lblup9mm",
+		kzqmXN: "lb1kky2od",
+		$$css: true
+	},
+	themeLabel: {
+		kmVPX3: "lb1717udv",
+		kMzoRj: "lbc342km",
+		kVQacm: "lbb3r6kr",
+		kZKoxP: "lbjm9jq1",
+		kz4h6p: "lb1hyvwdk",
+		kzqmXN: "lb1i1rx1s",
+		kVAEAm: "lb10l6tqk",
+		khDVqt: "lbuxw1ft",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

package/es/dashboard/AuthTools/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/AuthTools/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  locale: css`\n    && {\n      inline-size: fit-content;\n      min-inline-size: 120px;\n      block-size: 28px;\n      border-radius: 28px;\n\n      background: ${cssVar.colorBgLayout};\n    }\n  `,\n  localeIcon: css`\n    margin-inline-end: 2px;\n  `,\n  theme: css`\n    && {\n      block-size: 28px;\n      padding: 2px;\n      border-radius: 28px;\n    }\n  `,\n  themeIcon: css`\n    inline-size: 16px;\n    block-size: 16px;\n  `,\n  themeIndicator: css`\n    && {\n      border-radius: 22px;\n    }\n  `,\n  themeItem: css`\n    && {\n      block-size: 22px;\n      padding-inline: 8px;\n      border-radius: 22px;\n    }\n  `,\n  themeLabel: css`\n    position: absolute;\n\n    overflow: hidden;\n\n    inline-size: 1px;\n    block-size: 1px;\n    padding: 0;\n    border: 0;\n\n    white-space: nowrap;\n\n    clip-path: inset(50%);\n  `,\n  toolRow: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;oBAOO,OAAO,cAAc;;;CAGvC,YAAY,GAAG;;;CAGf,OAAO,GAAG;;;;;;;CAOV,WAAW,GAAG;;;;CAId,gBAAgB,GAAG;;;;;CAKnB,WAAW,GAAG;;;;;;;CAOd,YAAY,GAAG;;;;;;;;;;;;;;CAcf,SAAS,GAAG;;;;;AAKd,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/AuthTools/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  localeIcon: {\n    marginInlineEnd: 2,\n  },\n  themeIcon: {\n    blockSize: 16,\n    inlineSize: 16,\n  },\n  themeLabel: {\n    padding: 0,\n    borderWidth: 0,\n    overflow: 'hidden',\n    blockSize: 1,\n    clipPath: 'inset(50%)',\n    inlineSize: 1,\n    position: 'absolute',\n    whiteSpace: 'nowrap',\n  },\n});\n"],"mappings":";AACA,MAAa,SAAS;CACpB,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/dashboard/AuthTools/type.d.mts

@@ -1,7 +1,7 @@
 import { CSSProperties } from "react";
 //#region src/dashboard/AuthTools/type.d.ts
-type AuthThemeMode = 'auto' | 'dark' | 'light';
-interface AuthThemeSwitchProps {
+export type AuthThemeMode = 'auto' | 'dark' | 'light';
+export interface AuthThemeSwitchProps {
   className?: string;
   /**
    * Accessible names, also shown as tooltips. Labels are visually hidden.
@@ -12,11 +12,11 @@ interface AuthThemeSwitchProps {
   style?: CSSProperties;
   value?: AuthThemeMode;
 }
-interface AuthLocaleOption {
+export interface AuthLocaleOption {
   label: string;
   value: string;
 }
-interface AuthLocaleSwitchProps {
+export interface AuthLocaleSwitchProps {
   /** Accessible name of the select. @default 'Language' */
   'aria-label'?: string;
   'className'?: string;
@@ -26,5 +26,4 @@ interface AuthLocaleSwitchProps {
   'value'?: string;
 }
 //#endregion
-export { AuthLocaleOption, AuthLocaleSwitchProps, AuthThemeMode, AuthThemeSwitchProps };
 //# sourceMappingURL=type.d.mts.map

package/es/dashboard/Breadcrumb/Breadcrumb.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { styles } from "./style.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
 //#region src/dashboard/Breadcrumb/Breadcrumb.tsx
 function CrumbLink({ className, item, renderLink }) {
 	const href = item.href ?? "#";
@@ -24,24 +25,24 @@ function CrumbLink({ className, item, renderLink }) {
 function Breadcrumb({ items, label = "Breadcrumb", renderLink }) {
 	return /* @__PURE__ */ jsx("nav", {
 		"aria-label": label,
-		className: styles.root,
+		...stylex.props(styles.root),
 		children: items.map((item, index) => {
 			const last = index === items.length - 1;
 			const linked = Boolean(item.href) && !last;
 			return /* @__PURE__ */ jsxs("span", {
-				className: item.optional ? styles.optional : void 0,
+				...stylex.props(styles.crumb, item.optional && styles.optional),
 				children: [linked ? /* @__PURE__ */ jsx(CrumbLink, {
-					className: styles.link,
+					className: stylex.props(styles.link).className ?? "",
 					item,
 					renderLink
 				}) : /* @__PURE__ */ jsx("span", {
 					"aria-current": last ? "page" : void 0,
-					className: last ? styles.page : styles.ancestor,
 					title: typeof item.label === "string" ? item.label : void 0,
+					...stylex.props(last ? styles.page : styles.ancestor),
 					children: item.label
 				}), index < items.length - 1 ? /* @__PURE__ */ jsx("span", {
 					"aria-hidden": true,
-					className: styles.separator,
+					...stylex.props(styles.separator),
 					children: "/"
 				}) : null]
 			}, `${index}`);

package/es/dashboard/Breadcrumb/Breadcrumb.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.mjs","names":[],"sources":["../../../src/dashboard/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["'use client';\n\nimport { styles } from './style';\nimport type { BreadcrumbItem, BreadcrumbProps } from './type';\n\nfunction CrumbLink({\n  className,\n  item,\n  renderLink,\n}: {\n  className: string;\n  item: BreadcrumbItem;\n  renderLink?: BreadcrumbProps['renderLink'];\n}) {\n  const href = item.href ?? '#';\n  if (renderLink && item.href) {\n    return renderLink({\n      children: item.label,\n      className,\n      href: item.href,\n      onClick: item.onClick,\n    });\n  }\n  return (\n    <a\n      className={className}\n      href={href}\n      onClick={(event) => {\n        if (!item.onClick) return;\n        event.preventDefault();\n        item.onClick();\n      }}\n    >\n      {item.label}\n    </a>\n  );\n}\n\nfunction Breadcrumb({ items, label = 'Breadcrumb', renderLink }: BreadcrumbProps) {\n  return (\n    <nav aria-label={label} className={styles.root}>\n      {items.map((item, index) => {\n        const last = index === items.length - 1;\n        const linked = Boolean(item.href) && !last;\n        return (\n          <span className={item.optional ? styles.optional : undefined} key={`${index}`}>\n            {linked ? (\n              <CrumbLink className={styles.link} item={item} renderLink={renderLink} />\n            ) : (\n              <span\n                aria-current={last ? 'page' : undefined}\n                className={last ? styles.page : styles.ancestor}\n                title={typeof item.label === 'string' ? item.label : undefined}\n              >\n                {item.label}\n              </span>\n            )}\n            {index < items.length - 1 ? (\n              <span aria-hidden className={styles.separator}>\n                /\n              </span>\n            ) : null}\n          </span>\n        );\n      })}\n    </nav>\n  );\n}\n\nBreadcrumb.displayName = 'Breadcrumb';\n\nexport default Breadcrumb;\n"],"mappings":";;;;AAKA,SAAS,UAAU,EACjB,WACA,MACA,cAKC;CACD,MAAM,OAAO,KAAK,QAAQ;CAC1B,IAAI,cAAc,KAAK,MACrB,OAAO,WAAW;EAChB,UAAU,KAAK;EACf;EACA,MAAM,KAAK;EACX,SAAS,KAAK;CAChB,CAAC;CAEH,OACE,oBAAC,KAAD;EACa;EACL;EACN,UAAU,UAAU;GAClB,IAAI,CAAC,KAAK,SAAS;GACnB,MAAM,eAAe;GACrB,KAAK,QAAQ;EACf;EAEC,UAAA,KAAK;CACL,CAAA;AAEP;AAEA,SAAS,WAAW,EAAE,OAAO,QAAQ,cAAc,cAA+B;CAChF,OACE,oBAAC,OAAD;EAAK,cAAY;EAAO,WAAW,OAAO;EACvC,UAAA,MAAM,KAAK,MAAM,UAAU;GAC1B,MAAM,OAAO,UAAU,MAAM,SAAS;GACtC,MAAM,SAAS,QAAQ,KAAK,IAAI,KAAK,CAAC;GACtC,OACE,qBAAC,QAAD;IAAM,WAAW,KAAK,WAAW,OAAO,WAAW,KAAA;IAAnD,UAAA,CACG,SACC,oBAAC,WAAD;KAAW,WAAW,OAAO;KAAY;KAAkB;IAAa,CAAA,IAExE,oBAAC,QAAD;KACE,gBAAc,OAAO,SAAS,KAAA;KAC9B,WAAW,OAAO,OAAO,OAAO,OAAO;KACvC,OAAO,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,KAAA;KAEpD,UAAA,KAAK;IACF,CAAA,GAEP,QAAQ,MAAM,SAAS,IACtB,oBAAC,QAAD;KAAM,eAAA;KAAY,WAAW,OAAO;KAAW,UAAA;IAEzC,CAAA,IACJ,IACA;GAjB6D,GAAA,GAAG,OAiBhE;EAEV,CAAC;CACE,CAAA;AAET;AAEA,WAAW,cAAc"}
+{"version":3,"file":"Breadcrumb.mjs","names":[],"sources":["../../../src/dashboard/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport { styles } from './style';\nimport type { BreadcrumbItem, BreadcrumbProps } from './type';\n\nfunction CrumbLink({\n  className,\n  item,\n  renderLink,\n}: {\n  className: string;\n  item: BreadcrumbItem;\n  renderLink?: BreadcrumbProps['renderLink'];\n}) {\n  const href = item.href ?? '#';\n  if (renderLink && item.href) {\n    return renderLink({\n      children: item.label,\n      className,\n      href: item.href,\n      onClick: item.onClick,\n    });\n  }\n  return (\n    <a\n      className={className}\n      href={href}\n      onClick={(event) => {\n        if (!item.onClick) return;\n        event.preventDefault();\n        item.onClick();\n      }}\n    >\n      {item.label}\n    </a>\n  );\n}\n\nfunction Breadcrumb({ items, label = 'Breadcrumb', renderLink }: BreadcrumbProps) {\n  return (\n    <nav aria-label={label} {...stylex.props(styles.root)}>\n      {items.map((item, index) => {\n        const last = index === items.length - 1;\n        const linked = Boolean(item.href) && !last;\n        return (\n          <span key={`${index}`} {...stylex.props(styles.crumb, item.optional && styles.optional)}>\n            {linked ? (\n              <CrumbLink\n                className={stylex.props(styles.link).className ?? ''}\n                item={item}\n                renderLink={renderLink}\n              />\n            ) : (\n              <span\n                aria-current={last ? 'page' : undefined}\n                title={typeof item.label === 'string' ? item.label : undefined}\n                {...stylex.props(last ? styles.page : styles.ancestor)}\n              >\n                {item.label}\n              </span>\n            )}\n            {index < items.length - 1 ? (\n              <span aria-hidden {...stylex.props(styles.separator)}>\n                /\n              </span>\n            ) : null}\n          </span>\n        );\n      })}\n    </nav>\n  );\n}\n\nBreadcrumb.displayName = 'Breadcrumb';\n\nexport default Breadcrumb;\n"],"mappings":";;;;;AAKA,SAAS,UAAU,EACjB,WACA,MACA,cAKC;CACD,MAAM,OAAO,KAAK,QAAQ;CAC1B,IAAI,cAAc,KAAK,MACrB,OAAO,WAAW;EAChB,UAAU,KAAK;EACf;EACA,MAAM,KAAK;EACX,SAAS,KAAK;CAChB,CAAC;CAEH,OAAO,oBAAC,KAAD;EAAc;EAAiB;EAAM,UAAS,UAAS;GAC5D,IAAI,CAAC,KAAK,SAAS;GACnB,MAAM,eAAe;GACrB,KAAK,QAAQ;EACf;EACK,UAAA,KAAK;CACL,CAAA;AACP;AACA,SAAS,WAAW,EAClB,OACA,QAAQ,cACR,cACkB;CAClB,OAAO,oBAAC,OAAD;EAAK,cAAY;EAAO,GAAI,OAAO,MAAM,OAAO,IAAI;EACtD,UAAA,MAAM,KAAK,MAAM,UAAU;GAC5B,MAAM,OAAO,UAAU,MAAM,SAAS;GACtC,MAAM,SAAS,QAAQ,KAAK,IAAI,KAAK,CAAC;GACtC,OAAO,qBAAC,QAAD;IAAuB,GAAI,OAAO,MAAM,OAAO,OAAO,KAAK,YAAY,OAAO,QAAQ;IAAtF,UAAA,CACA,SAAS,oBAAC,WAAD;KAAW,WAAW,OAAO,MAAM,OAAO,IAAI,CAAC,CAAC,aAAa;KAAU;KAAkB;IAAa,CAAA,IAAI,oBAAC,QAAD;KAAM,gBAAc,OAAO,SAAS,KAAA;KAAW,OAAO,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,KAAA;KAAW,GAAI,OAAO,MAAM,OAAO,OAAO,OAAO,OAAO,QAAQ;KACnR,UAAA,KAAK;IACF,CAAA,GACP,QAAQ,MAAM,SAAS,IAAI,oBAAC,QAAD;KAAM,eAAA;KAAY,GAAI,OAAO,MAAM,OAAO,SAAS;KAAG,UAAA;IAE1E,CAAA,IAAI,IACR;GAPQ,GAAA,GAAG,OAOX;EACZ,CAAC;CACI,CAAA;AACT;AACA,WAAW,cAAc"}

package/es/dashboard/Breadcrumb/style.mjs

@@ -1,65 +1,55 @@
-import { createStaticStyles } from "antd-style";
 //#region src/dashboard/Breadcrumb/style.ts
-const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
-	ancestor: css`
-    color: ${cssVar.colorTextSecondary};
-    white-space: nowrap;
-  `,
-	link: css`
-    color: ${cssVar.colorTextSecondary};
-    text-decoration: none;
-    white-space: nowrap;
-
-    &:hover {
-      color: ${cssVar.colorText};
-    }
-  `,
-	optional: css`
-    display: flex;
-    flex: none;
-    gap: 6px;
-    align-items: center;
-
-    ${responsive.mobile} {
-      /* Outranks the root's direct-child span rule. */
-      &&& {
-        display: none;
-      }
-    }
-  `,
-	page: css`
-    overflow: hidden;
-
-    min-inline-size: 0;
-
-    font-weight: 600;
-    color: ${cssVar.colorText};
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  `,
-	root: css`
-    overflow: hidden;
-    display: flex;
-    flex: 1;
-    align-items: center;
-
-    min-inline-size: 0;
-
-    font-size: ${cssVar.fontSize};
-    line-height: 1.4;
-
-    > span {
-      display: flex;
-      align-items: center;
-      min-inline-size: 0;
-    }
-  `,
-	separator: css`
-    flex: none;
-    margin-inline: 8px;
-    color: ${cssVar.colorTextQuaternary};
-  `
-}));
+const styles = {
+	ancestor: {
+		kMwMTN: "lbc77et8",
+		khDVqt: "lbuxw1ft",
+		$$css: true
+	},
+	crumb: {
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	link: {
+		kybGjl: "lb1hl2dhg",
+		kMwMTN: "lbc77et8 lb1bxu9lh",
+		khDVqt: "lbuxw1ft",
+		$$css: true
+	},
+	optional: {
+		kUk6DE: "lb1okw0bk",
+		kOIVth: "lb17d4w8g",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5 lb1kad8g2",
+		$$css: true
+	},
+	page: {
+		kVQacm: "lbb3r6kr",
+		kMwMTN: "lb66ogz0",
+		k63SB2: "lb1s688f",
+		k7Eaqz: "lbeuugli",
+		kg5iWk: "lblyipyv",
+		khDVqt: "lbuxw1ft",
+		$$css: true
+	},
+	root: {
+		kUk6DE: "lb98rzlu",
+		kVQacm: "lbb3r6kr",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		kGuDYH: "lb1pzwcx8",
+		kLWn49: "lb37zpob",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	separator: {
+		kUk6DE: "lb1okw0bk",
+		kUOVxO: "lbxbjj12",
+		kMwMTN: "lbybvley",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

package/es/dashboard/Breadcrumb/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/Breadcrumb/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  ancestor: css`\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n  `,\n  link: css`\n    color: ${cssVar.colorTextSecondary};\n    text-decoration: none;\n    white-space: nowrap;\n\n    &:hover {\n      color: ${cssVar.colorText};\n    }\n  `,\n  optional: css`\n    display: flex;\n    flex: none;\n    gap: 6px;\n    align-items: center;\n\n    ${responsive.mobile} {\n      /* Outranks the root's direct-child span rule. */\n      &&& {\n        display: none;\n      }\n    }\n  `,\n  page: css`\n    overflow: hidden;\n\n    min-inline-size: 0;\n\n    font-weight: 600;\n    color: ${cssVar.colorText};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  root: css`\n    overflow: hidden;\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    min-inline-size: 0;\n\n    font-size: ${cssVar.fontSize};\n    line-height: 1.4;\n\n    > span {\n      display: flex;\n      align-items: center;\n      min-inline-size: 0;\n    }\n  `,\n  separator: css`\n    flex: none;\n    margin-inline: 8px;\n    color: ${cssVar.colorTextQuaternary};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,UAAU,GAAG;aACF,OAAO,mBAAmB;;;CAGrC,MAAM,GAAG;aACE,OAAO,mBAAmB;;;;;eAKxB,OAAO,UAAU;;;CAG9B,UAAU,GAAG;;;;;;MAMT,WAAW,OAAO;;;;;;;CAOtB,MAAM,GAAG;;;;;;aAME,OAAO,UAAU;;;;CAI5B,MAAM,GAAG;;;;;;;;iBAQM,OAAO,SAAS;;;;;;;;;CAS/B,WAAW,GAAG;;;aAGH,OAAO,oBAAoB;;AAExC,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/Breadcrumb/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\n\nexport const styles = stylex.create({\n  ancestor: {\n    color: cssVar.colorTextSecondary,\n    whiteSpace: 'nowrap',\n  },\n  crumb: {\n    alignItems: 'center',\n    display: 'flex',\n    minInlineSize: 0,\n  },\n  link: {\n    textDecoration: 'none',\n    color: { 'default': cssVar.colorTextSecondary, ':hover': cssVar.colorText },\n    whiteSpace: 'nowrap',\n  },\n  optional: {\n    flex: 'none',\n    gap: 6,\n    alignItems: 'center',\n    display: { default: 'flex', [media.mobile]: 'none' },\n  },\n  page: {\n    overflow: 'hidden',\n    color: cssVar.colorText,\n    fontWeight: 600,\n    minInlineSize: 0,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  root: {\n    flex: '1',\n    overflow: 'hidden',\n    alignItems: 'center',\n    display: 'flex',\n    fontSize: cssVar.fontSize,\n    lineHeight: 1.4,\n    minInlineSize: 0,\n  },\n  separator: {\n    flex: 'none',\n    marginInline: 8,\n    color: cssVar.colorTextQuaternary,\n  },\n});\n"],"mappings":";AAKA,MAAa,SAAS;CACpB,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/dashboard/Breadcrumb/type.d.mts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 //#region src/dashboard/Breadcrumb/type.d.ts
-interface BreadcrumbItem {
+export interface BreadcrumbItem {
   href?: string;
   label: ReactNode;
   /** Called instead of following `href`. */
@@ -8,18 +8,17 @@ interface BreadcrumbItem {
   /** Dropped on narrow screens. Use this for a group name that the page title already repeats. */
   optional?: boolean;
 }
-interface BreadcrumbLinkProps {
+export interface BreadcrumbLinkProps {
   children: ReactNode;
   className: string;
   href: string;
   onClick?: () => void;
 }
-interface BreadcrumbProps {
+export interface BreadcrumbProps {
   items: BreadcrumbItem[];
   /** Accessible name for the navigation landmark. */
   label?: string;
   renderLink?: (props: BreadcrumbLinkProps) => ReactNode;
 }
 //#endregion
-export { BreadcrumbItem, BreadcrumbLinkProps, BreadcrumbProps };
 //# sourceMappingURL=type.d.mts.map

package/es/dashboard/ChartGrid/ChartGrid.mjs

@@ -1,13 +1,14 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
 import { styles } from "./style.mjs";
 import { jsx } from "react/jsx-runtime";
-import { cx } from "antd-style";
+import * as stylex from "@stylexjs/stylex";
 //#region src/dashboard/ChartGrid/ChartGrid.tsx
 /** Peer charts and ranked lists, two-up, one column below 640px. Not for label/value rows. */
 const ChartGrid = ({ children, className }) => /* @__PURE__ */ jsx("div", {
-	className: styles.frame,
+	...stylex.props(styles.frame),
 	children: /* @__PURE__ */ jsx("div", {
-		className: cx(styles.root, className),
+		...styleProps(styles.root, className),
 		children
 	})
 });

package/es/dashboard/ChartGrid/ChartGrid.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChartGrid.mjs","names":[],"sources":["../../../src/dashboard/ChartGrid/ChartGrid.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport { styles } from './style';\nimport type { ChartGridProps } from './type';\n\n/** Peer charts and ranked lists, two-up, one column below 640px. Not for label/value rows. */\nconst ChartGrid = ({ children, className }: ChartGridProps) => (\n  <div className={styles.frame}>\n    <div className={cx(styles.root, className)}>{children}</div>\n  </div>\n);\n\nChartGrid.displayName = 'ChartGrid';\n\nexport default ChartGrid;\n"],"mappings":";;;;;;AAQA,MAAM,aAAa,EAAE,UAAU,gBAC7B,oBAAC,OAAD;CAAK,WAAW,OAAO;CACrB,UAAA,oBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,MAAM,SAAS;EAAI;CAAc,CAAA;AACxD,CAAA;AAGP,UAAU,cAAc"}
+{"version":3,"file":"ChartGrid.mjs","names":[],"sources":["../../../src/dashboard/ChartGrid/ChartGrid.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { ChartGridProps } from './type';\n\n/** Peer charts and ranked lists, two-up, one column below 640px. Not for label/value rows. */\nconst ChartGrid = ({ children, className }: ChartGridProps) => (\n  <div {...stylex.props(styles.frame)}>\n    <div {...styleProps(styles.root, className)}>{children}</div>\n  </div>\n);\n\nChartGrid.displayName = 'ChartGrid';\n\nexport default ChartGrid;\n"],"mappings":";;;;;;;AAQA,MAAM,aAAa,EACjB,UACA,gBACoB,oBAAC,OAAD;CAAK,GAAI,OAAO,MAAM,OAAO,KAAK;CACpD,UAAA,oBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,MAAM,SAAS;EAAI;CAAc,CAAA;AACzD,CAAA;AACP,UAAU,cAAc"}

package/es/dashboard/ChartGrid/style.mjs

@@ -1,31 +1,17 @@
-import { createStaticStyles } from "antd-style";
 //#region src/dashboard/ChartGrid/style.ts
-const styles = createStaticStyles(({ css }) => ({
-	/**
-	* The frame is the container. A query on the grid itself would not see its own width.
-	* Charts stay two-up so a trend and its switch stay readable; one child does not
-	* stretch across the page.
-	*/
-	frame: css`
-    container-type: inline-size;
-
-    @container (max-width: 640px) {
-      & > * {
-        grid-template-columns: minmax(0, 1fr);
-      }
-    }
-  `,
-	root: css`
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 16px;
-    align-items: stretch;
-
-    &:has(> :only-child) {
-      grid-template-columns: minmax(0, min(100%, 560px));
-    }
-  `
-}));
+const styles = {
+	frame: {
+		k9g6sI: "lb12h1iku",
+		$$css: true
+	},
+	root: {
+		kOIVth: "lbou54vl",
+		kGNEyG: "lb1qjc9v5",
+		k1xSpc: "lbrvj5dj",
+		kumcoG: "lbnby9oq lb91szb2 lb43xpz4 lbb8zp9c",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

package/es/dashboard/ChartGrid/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/ChartGrid/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  /**\n   * The frame is the container. A query on the grid itself would not see its own width.\n   * Charts stay two-up so a trend and its switch stay readable; one child does not\n   * stretch across the page.\n   */\n  frame: css`\n    container-type: inline-size;\n\n    @container (max-width: 640px) {\n      & > * {\n        grid-template-columns: minmax(0, 1fr);\n      }\n    }\n  `,\n  root: css`\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 16px;\n    align-items: stretch;\n\n    &:has(> :only-child) {\n      grid-template-columns: minmax(0, min(100%, 560px));\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,WAAW;;;;;;CAMrD,OAAO,GAAG;;;;;;;;;CASV,MAAM,GAAG;;;;;;;;;;AAUX,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/ChartGrid/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  /**\n   * The frame is the container. A query on the grid itself would not see its own width.\n   * Charts stay two-up so a trend and its switch stay readable; one child does not\n   * stretch across the page.\n   */\n  frame: {\n    containerType: 'inline-size',\n  },\n  root: {\n    gap: 16,\n    alignItems: 'stretch',\n    display: 'grid',\n    gridTemplateColumns: {\n      'default': 'repeat(2, minmax(0, 1fr))',\n      ':has(> :only-child)': 'minmax(0, min(100%, 560px))',\n      '@container (max-width: 640px)': {\n        'default': 'minmax(0, 1fr)',\n        ':has(> :only-child)': 'minmax(0, min(100%, 560px))',\n      },\n    },\n  },\n});\n"],"mappings":";AACA,MAAa,SAAS;CACpB,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/dashboard/ChartGrid/type.d.mts

@@ -1,9 +1,8 @@
 import { ReactNode } from "react";
 //#region src/dashboard/ChartGrid/type.d.ts
-interface ChartGridProps {
+export interface ChartGridProps {
   children?: ReactNode;
   className?: string;
 }
 //#endregion
-export { ChartGridProps };
 //# sourceMappingURL=type.d.mts.map

package/es/dashboard/ConsoleNav/ConsoleNav.mjs

@@ -1,6 +1,6 @@
 "use client";
 import Icon from "../../Icon/Icon.mjs";
-import { Tooltip } from "../../base-ui/Tooltip/Tooltip.mjs";
+import { Tooltip } from "../../Tooltip/Tooltip.mjs";
 import ScrollShadow from "../../ScrollShadow/ScrollShadow.mjs";
 import { collectNavItems, findActiveBranch, resolveActiveHref } from "./active.mjs";
 import { useConsoleShellState } from "../ConsoleShell/context.mjs";
@@ -8,9 +8,22 @@ import { useLocalStorage, usePrefersReducedMotion } from "../hooks.mjs";
 import { styles } from "./style.mjs";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import * as stylex from "@stylexjs/stylex";
 import { ChevronDown, Play } from "lucide-react";
 //#region src/dashboard/ConsoleNav/ConsoleNav.tsx
 const PANEL_TRANSITION_MS = 160;
+const railLinkClassName = "lobe-console-nav-rail-link";
+const itemIndentStyles = [
+	null,
+	styles.itemIndent1,
+	styles.itemIndent2
+];
+const groupHeaderIndentStyles = [
+	null,
+	styles.groupHeaderIndent1,
+	styles.groupHeaderIndent2
+];
 const RAIL_TRANSITION_MS = 200;
 /** Older builds stored the closed group keys as an array. */
 function readOverrides(value) {
@@ -60,23 +73,24 @@ function NavLink({ active, collapsed, context, href, icon, indent = 0, item, nam
 		"aria-label": collapsed ? name : void 0,
 		"children": overlay ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			icon ? /* @__PURE__ */ jsx(Icon, {
+				className: stylex.props(styles.navIcon).className,
 				icon,
 				size: 18
 			}) : null,
 			/* @__PURE__ */ jsx("span", {
-				className: styles.itemLabel,
+				...stylex.props(styles.itemLabel, styles.railFade, collapsed && [styles.itemLabelRail, styles.railFaded]),
 				children: label
 			}),
 			item?.badge ? /* @__PURE__ */ jsx("span", {
-				className: styles.badge,
+				...stylex.props(styles.badge, styles.railFade, collapsed && styles.railFaded),
 				children: item.badge
 			}) : null,
 			item?.badge ? /* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
-				className: styles.dot
+				...stylex.props(styles.dot, collapsed && styles.dotRail)
 			}) : null
 		] }),
-		"className": overlay ? styles.railLink : styles.item,
+		"className": overlay ? clsx$1(stylex.props(styles.railLink, active && styles.railLinkActive).className, railLinkClassName) : stylex.props(styles.item, active && styles.itemActive, (indent === 1 || indent === 2) && styles.itemIndented, itemIndentStyles[indent], collapsed && indent !== 0 && styles.itemRailIndent).className ?? "",
 		"data-active": active,
 		"data-collapsed": collapsed,
 		"data-indent": indent,
@@ -96,10 +110,13 @@ function NavLink({ active, collapsed, context, href, icon, indent = 0, item, nam
 function Fold({ children, folded }) {
 	return /* @__PURE__ */ jsx("div", {
 		"aria-hidden": folded || void 0,
-		className: styles.fold,
 		"data-folded": folded,
 		inert: folded || void 0,
-		children: /* @__PURE__ */ jsx("div", { children })
+		...stylex.props(styles.fold, folded && styles.folded),
+		children: /* @__PURE__ */ jsx("div", {
+			...stylex.props(styles.foldBody),
+			children
+		})
 	});
 }
 function ConsoleNav({ collapsed: collapsedProp, defaultExpanded = "all", groups = [], items = [], label = "Primary", onNavigate, pathname, renderLink, storageKey }) {
@@ -167,7 +184,7 @@ function ConsoleNav({ collapsed: collapsedProp, defaultExpanded = "all", groups
 			children: link
 		}, item.href);
 	});
-	const renderGroup = (group, level, indent, underRailIcon) => {
+	const renderGroup = (group, level, indent, underRailIcon, afterGroup) => {
 		const expanded = isExpanded(group);
 		const panelId = `${id}-${group.key}`;
 		const childIndent = indent + (group.icon ? 1 : 0);
@@ -177,11 +194,12 @@ function ConsoleNav({ collapsed: collapsedProp, defaultExpanded = "all", groups
 		const open = onRail ? !railIcon : expanded;
 		const railHref = railIcon ? group.href ?? collectNavItems([group])[0]?.href : void 0;
 		const railEmpty = !railIcon && !collectNavItems([group]).some((item) => item.icon);
+		const nested = level !== 0;
+		const headerIconClassName = stylex.props(styles.headerIcon, Boolean(group.icon) && styles.headerIconWide).className;
 		const header = /* @__PURE__ */ jsxs("button", {
 			"aria-controls": panelId,
 			"aria-expanded": open,
 			"aria-hidden": onRail && railIcon || void 0,
-			className: styles.groupHeader,
 			"data-active": active,
 			"data-icon": Boolean(group.icon),
 			"data-indent": indent,
@@ -189,24 +207,26 @@ function ConsoleNav({ collapsed: collapsedProp, defaultExpanded = "all", groups
 			tabIndex: onRail && railIcon ? -1 : void 0,
 			type: "button",
 			onClick: () => toggleGroup(group.key, expanded),
+			...stylex.props(styles.groupHeader, active && styles.groupHeaderActive, Boolean(group.icon) && styles.groupHeaderIcon, !nested && Boolean(group.icon) && styles.groupHeaderRailIcon, nested && styles.groupHeaderNested, nested && active && styles.groupHeaderNestedActive, groupHeaderIndentStyles[indent]),
 			children: [
 				group.icon ? /* @__PURE__ */ jsx(Icon, {
+					className: headerIconClassName,
 					icon: group.icon,
 					size: 16
 				}) : null,
 				/* @__PURE__ */ jsx("span", {
-					className: styles.itemLabel,
 					"data-label": "",
+					...stylex.props(styles.itemLabel, styles.railFade, collapsed && [styles.itemLabelRail, styles.railFaded], nested && styles.groupLabelNested),
 					children: group.label
 				}),
 				level === 0 ? /* @__PURE__ */ jsx(Icon, {
-					className: styles.chevron,
 					"data-expanded": expanded,
 					icon: ChevronDown,
-					size: 14
+					size: 14,
+					className: clsx$1(headerIconClassName, stylex.props(styles.chevron, !expanded && styles.chevronFolded, collapsed && styles.railFaded).className)
 				}) : /* @__PURE__ */ jsx("span", {
-					className: styles.indicator,
 					"data-expanded": expanded,
+					...stylex.props(styles.indicator, expanded && styles.indicatorExpanded),
 					children: /* @__PURE__ */ jsx(Play, {
 						fill: "currentColor",
 						size: 7,
@@ -217,7 +237,7 @@ function ConsoleNav({ collapsed: collapsedProp, defaultExpanded = "all", groups
 		});
 		let head = header;
 		if (railIcon) head = /* @__PURE__ */ jsxs("div", {
-			className: styles.groupHead,
+			...stylex.props(styles.groupHead),
 			children: [header, onRail && railHref ? /* @__PURE__ */ jsx(NavLink, {
 				collapsed: true,
 				overlay: true,
@@ -232,20 +252,20 @@ function ConsoleNav({ collapsed: collapsedProp, defaultExpanded = "all", groups
 			children: header
 		});
 		return /* @__PURE__ */ jsxs("div", {
-			className: styles.group,
 			"data-icon": Boolean(group.icon),
 			"data-level": level,
 			"data-rail-empty": railEmpty,
+			...stylex.props(styles.group, !nested && Boolean(group.icon) && styles.groupLevelIcon, nested && styles.groupNested, collapsed && railEmpty && styles.groupRailEmpty, collapsed && afterGroup && !nested && !group.icon && styles.groupDivider),
 			children: [head, /* @__PURE__ */ jsx("div", {
 				"aria-hidden": !open,
-				className: styles.groupPanel,
 				"data-expanded": open,
 				"data-instant": reducedMotion,
 				id: panelId,
 				inert: open ? void 0 : true,
+				...stylex.props(styles.groupPanel, !open && styles.groupPanelCollapsed, reducedMotion && styles.groupPanelInstant),
 				children: /* @__PURE__ */ jsxs("div", {
-					className: styles.groupItems,
-					children: [renderItems(group.items ?? [], childIndent, group.label, !(underRailIcon || railIcon)), (group.groups ?? []).map((child) => renderGroup(child, level + 1, childIndent, underRailIcon || railIcon))]
+					...stylex.props(styles.groupItems),
+					children: [renderItems(group.items ?? [], childIndent, group.label, !(underRailIcon || railIcon)), (group.groups ?? []).map((child, index) => renderGroup(child, level + 1, childIndent, underRailIcon || railIcon, index > 0))]
 				})
 			})]
 		}, group.key);
@@ -253,17 +273,17 @@ function ConsoleNav({ collapsed: collapsedProp, defaultExpanded = "all", groups
 	return /* @__PURE__ */ jsxs(ScrollShadow, {
 		"aria-label": label,
 		as: "nav",
-		className: styles.nav,
+		className: stylex.props(styles.nav).className,
 		"data-collapsed": collapsed,
 		orientation: "vertical",
 		ref: navRef,
 		size: 4,
 		children: [items.length > 0 ? /* @__PURE__ */ jsx("div", {
-			className: styles.topItems,
 			"data-divided": groups.length > 0,
 			"data-rail-empty": !items.some((item) => item.icon),
+			...stylex.props(styles.topItems, groups.length > 0 && styles.topItemsDivided, collapsed && !items.some((item) => item.icon) && styles.topItemsRailEmpty),
 			children: renderItems(items, 0, void 0, true)
-		}) : null, groups.map((group) => renderGroup(group, 0, 0, false))]
+		}) : null, groups.map((group, index) => renderGroup(group, 0, 0, false, index > 0))]
 	});
 }
 ConsoleNav.displayName = "ConsoleNav";