@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/dashboard/PageTabs/style.mjs

@@ -1,56 +1,38 @@
-import { createStaticStyles } from "antd-style";
 //#region src/dashboard/PageTabs/style.ts
-const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
-	count: css`
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    min-inline-size: 1.5em;
-    padding-inline: ${cssVar.paddingXXS};
-    border-radius: ${cssVar.borderRadiusXS};
-
-    font-size: ${cssVar.fontSizeSM};
-    font-weight: 500;
-    font-variant-numeric: tabular-nums;
-    line-height: 1.4;
-    color: ${cssVar.colorTextSecondary};
-
-    background: ${cssVar.colorFillSecondary};
-  `,
-	list: css`
-    scrollbar-width: none;
-    overflow-x: auto;
-    flex-wrap: nowrap;
-    max-inline-size: 100%;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    && {
-      gap: ${cssVar.paddingXXS};
-      padding: ${cssVar.paddingXXS};
-    }
-  `,
-	panel: css`
-    padding-block-start: 16px;
-  `,
-	root: css`
-    min-inline-size: 0;
-  `,
-	tab: css`
-    flex: none;
-
-    && {
-      gap: ${cssVar.paddingXS};
-    }
-
-    ${responsive.mobile} {
-      min-block-size: 44px;
-    }
-  `
-}));
+const styles = {
+	count: {
+		kaIpWk: "lb1jq78ib",
+		kg3NbH: "lb1ha9ihy",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lbjjy28o",
+		kMwMTN: "lbc77et8",
+		k1xSpc: "lb3nfvp2",
+		kGuDYH: "lbxobqjj",
+		kcqcaj: "lbss6m8b",
+		k63SB2: "lbk50ysn",
+		kjj79g: "lbl56j7k",
+		kLWn49: "lb37zpob",
+		k7Eaqz: "lb1et6avd",
+		$$css: true
+	},
+	list: {
+		kwnvtZ: "lbozqiw3",
+		ks0D6T: "lb193iq5w",
+		k5wCbM: "lb1rohswg",
+		kXHlph: "lbw2csxc",
+		kOuLrU: "lbfk6m8",
+		$$css: true
+	},
+	root: {
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	tab: {
+		kUk6DE: "lb1okw0bk",
+		kAzted: "lb10nga59",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PageTabs/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  count: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    min-inline-size: 1.5em;\n    padding-inline: ${cssVar.paddingXXS};\n    border-radius: ${cssVar.borderRadiusXS};\n\n    font-size: ${cssVar.fontSizeSM};\n    font-weight: 500;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n\n    background: ${cssVar.colorFillSecondary};\n  `,\n  list: css`\n    scrollbar-width: none;\n    overflow-x: auto;\n    flex-wrap: nowrap;\n    max-inline-size: 100%;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n\n    && {\n      gap: ${cssVar.paddingXXS};\n      padding: ${cssVar.paddingXXS};\n    }\n  `,\n  panel: css`\n    padding-block-start: 16px;\n  `,\n  root: css`\n    min-inline-size: 0;\n  `,\n  tab: css`\n    flex: none;\n\n    && {\n      gap: ${cssVar.paddingXS};\n    }\n\n    ${responsive.mobile} {\n      min-block-size: 44px;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,OAAO,GAAG;;;;;;sBAMU,OAAO,WAAW;qBACnB,OAAO,eAAe;;iBAE1B,OAAO,WAAW;;;;aAItB,OAAO,mBAAmB;;kBAErB,OAAO,mBAAmB;;CAE1C,MAAM,GAAG;;;;;;;;;;;aAWE,OAAO,WAAW;iBACd,OAAO,WAAW;;;CAGjC,OAAO,GAAG;;;CAGV,MAAM,GAAG;;;CAGT,KAAK,GAAG;;;;aAIG,OAAO,UAAU;;;MAGxB,WAAW,OAAO;;;;AAIxB,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PageTabs/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  count: {\n    borderRadius: cssVar.borderRadiusXS,\n    paddingInline: cssVar.paddingXXS,\n    alignItems: 'center',\n    backgroundColor: cssVar.colorFillSecondary,\n    color: cssVar.colorTextSecondary,\n    display: 'inline-flex',\n    fontSize: cssVar.fontSizeSM,\n    fontVariantNumeric: 'tabular-nums',\n    fontWeight: 500,\n    justifyContent: 'center',\n    lineHeight: 1.4,\n    minInlineSize: '1.5em',\n  },\n  list: {\n    'flexWrap': 'nowrap',\n    'maxInlineSize': '100%',\n    'scrollbarWidth': 'none',\n    'overflowX': 'auto',\n    '::-webkit-scrollbar': {\n      display: 'none',\n    },\n  },\n  root: {\n    minInlineSize: 0,\n  },\n  tab: {\n    flex: 'none',\n    minBlockSize: { default: null, [media.mobile]: 44 },\n  },\n});\n"],"mappings":";AAKA,MAAa,SAAS;CACpB,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,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,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

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

@@ -1,17 +1,16 @@
 import { ReactNode } from "react";
 //#region src/dashboard/PageTabs/type.d.ts
-interface PageTab<Value extends string> {
+export interface PageTab<Value extends string> {
   content: ReactNode;
   count?: ReactNode;
   label: string;
   value: Value;
 }
-interface PageTabsProps<Value extends string> {
+export interface PageTabsProps<Value extends string> {
   label: string;
   onChange: (value: Value) => void;
   tabs: PageTab<Value>[];
   value: Value;
 }
 //#endregion
-export { PageTab, PageTabsProps };
 //# sourceMappingURL=type.d.mts.map

package/es/dashboard/PageToolbar/PageToolbar.mjs

@@ -1,16 +1,17 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
 import { styles } from "./style.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
+import * as stylex from "@stylexjs/stylex";
 //#region src/dashboard/PageToolbar/PageToolbar.tsx
 /** Filters start at the left edge; actions hold the right edge, also after wrapping. */
 const PageToolbar = ({ actions, children, className }) => /* @__PURE__ */ jsxs("div", {
-	className: cx(styles.root, className),
+	...styleProps(styles.root, className),
 	children: [children ? /* @__PURE__ */ jsx("div", {
-		className: styles.filters,
+		...stylex.props(styles.filters),
 		children
 	}) : null, actions ? /* @__PURE__ */ jsx("div", {
-		className: styles.actions,
+		...stylex.props(styles.actions),
 		children: actions
 	}) : null]
 });

package/es/dashboard/PageToolbar/PageToolbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PageToolbar.mjs","names":[],"sources":["../../../src/dashboard/PageToolbar/PageToolbar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport { styles } from './style';\nimport type { PageToolbarProps } from './type';\n\n/** Filters start at the left edge; actions hold the right edge, also after wrapping. */\nconst PageToolbar = ({ actions, children, className }: PageToolbarProps) => (\n  <div className={cx(styles.root, className)}>\n    {children ? <div className={styles.filters}>{children}</div> : null}\n    {actions ? <div className={styles.actions}>{actions}</div> : null}\n  </div>\n);\n\nPageToolbar.displayName = 'PageToolbar';\n\nexport default PageToolbar;\n"],"mappings":";;;;;;AAQA,MAAM,eAAe,EAAE,SAAS,UAAU,gBACxC,qBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,MAAM,SAAS;CAAzC,UAAA,CACG,WAAW,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAU;CAAc,CAAA,IAAI,MAC9D,UAAU,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAU,UAAA;CAAa,CAAA,IAAI,IAC1D;;AAGP,YAAY,cAAc"}
+{"version":3,"file":"PageToolbar.mjs","names":[],"sources":["../../../src/dashboard/PageToolbar/PageToolbar.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 { PageToolbarProps } from './type';\n\n/** Filters start at the left edge; actions hold the right edge, also after wrapping. */\nconst PageToolbar = ({ actions, children, className }: PageToolbarProps) => (\n  <div {...styleProps(styles.root, className)}>\n    {children ? <div {...stylex.props(styles.filters)}>{children}</div> : null}\n    {actions ? <div {...stylex.props(styles.actions)}>{actions}</div> : null}\n  </div>\n);\n\nPageToolbar.displayName = 'PageToolbar';\n\nexport default PageToolbar;\n"],"mappings":";;;;;;;AAQA,MAAM,eAAe,EACnB,SACA,UACA,gBACsB,qBAAC,OAAD;CAAK,GAAI,WAAW,OAAO,MAAM,SAAS;CAA1C,UAAA,CACnB,WAAW,oBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,OAAO,OAAO;EAAI;CAAc,CAAA,IAAI,MACrE,UAAU,oBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,OAAO,OAAO;EAAI,UAAA;CAAa,CAAA,IAAI,IACjE;;AACP,YAAY,cAAc"}

package/es/dashboard/PageToolbar/style.mjs

@@ -1,33 +1,35 @@
-import { createStaticStyles } from "antd-style";
 //#region src/dashboard/PageToolbar/style.ts
-const styles = createStaticStyles(({ css }) => ({
-	actions: css`
-    display: flex;
-    flex: none;
-    flex-wrap: wrap;
-    gap: 8px;
-    align-items: center;
-
-    margin-inline-start: auto;
-  `,
-	filters: css`
-    display: flex;
-    flex: 0 1 auto;
-    flex-wrap: wrap;
-    gap: 8px;
-    align-items: center;
-
-    min-inline-size: 0;
-  `,
-	root: css`
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px 12px;
-    align-items: center;
-
-    min-inline-size: 0;
-  `
-}));
+const styles = {
+	actions: {
+		kUk6DE: "lb1okw0bk",
+		kOIVth: "lb167g77z",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		kwnvtZ: "lb1a02dak",
+		keTefX: "lbvc5jky",
+		$$css: true
+	},
+	filters: {
+		kOIVth: "lb167g77z",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		kCS8Yb: "lbdl72j9",
+		kzQI83: "lb1c4vz4f",
+		kmuXW: "lbs83m0k",
+		kwnvtZ: "lb1a02dak",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	root: {
+		kGNEyG: "lb6s0dn4",
+		k1C7PZ: "lbtqikln",
+		k1xSpc: "lb78zum5",
+		kwnvtZ: "lb1a02dak",
+		k7Eaqz: "lbeuugli",
+		khm7nJ: "lb3pnbk8",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PageToolbar/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  actions: css`\n    display: flex;\n    flex: none;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n\n    margin-inline-start: auto;\n  `,\n  filters: css`\n    display: flex;\n    flex: 0 1 auto;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n\n    min-inline-size: 0;\n  `,\n  root: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px 12px;\n    align-items: center;\n\n    min-inline-size: 0;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,WAAW;CACrD,SAAS,GAAG;;;;;;;;;CASZ,SAAS,GAAG;;;;;;;;;CASZ,MAAM,GAAG;;;;;;;;AAQX,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PageToolbar/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  actions: {\n    flex: 'none',\n    gap: 8,\n    alignItems: 'center',\n    display: 'flex',\n    flexWrap: 'wrap',\n    marginInlineStart: 'auto',\n  },\n  filters: {\n    gap: 8,\n    alignItems: 'center',\n    display: 'flex',\n    flexBasis: 'auto',\n    flexGrow: '0',\n    flexShrink: '1',\n    flexWrap: 'wrap',\n    minInlineSize: 0,\n  },\n  root: {\n    alignItems: 'center',\n    columnGap: '12px',\n    display: 'flex',\n    flexWrap: 'wrap',\n    minInlineSize: 0,\n    rowGap: '8px',\n  },\n});\n"],"mappings":";AACA,MAAa,SAAS;CACpB,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

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

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 //#region src/dashboard/PageToolbar/type.d.ts
-interface PageToolbarProps {
+export interface PageToolbarProps {
   /** Right side: refresh, export, the page's own buttons. */
   actions?: ReactNode;
   /** Left side: range, scope, search, whatever narrows the page. */
@@ -8,5 +8,4 @@ interface PageToolbarProps {
   className?: string;
 }
 //#endregion
-export { PageToolbarProps };
 //# sourceMappingURL=type.d.mts.map

package/es/dashboard/PanelSurface/PanelSurface.mjs

@@ -1,11 +1,12 @@
 "use client";
-import Spin from "../../base-ui/Spin/Spin.mjs";
-import Skeleton from "../../base-ui/Skeleton/index.mjs";
-import { styles } from "../Surface/style.mjs";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import Spin from "../../Spin/Spin.mjs";
+import Skeleton from "../../Skeleton/index.mjs";
+import { surfaceClassNames } from "../Surface/style.mjs";
 import Surface from "../Surface/Surface.mjs";
-import { styles as styles$1 } from "./style.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/PanelSurface/PanelSurface.tsx
 /** Titled console panel. Body padding stays inside so a trailing table can bleed to the edges. */
 const PanelSurface = ({ title, description, extra, href, loading, renderLink, size = "default", className, style, children }) => /* @__PURE__ */ jsx(Surface, {
@@ -22,13 +23,13 @@ const PanelSurface = ({ title, description, extra, href, loading, renderLink, si
 	title,
 	children: loading && !children ? /* @__PURE__ */ jsx("div", {
 		"aria-busy": "true",
-		className: styles$1.loadingBody,
+		...stylex.props(styles.loadingBody),
 		children: /* @__PURE__ */ jsx(Skeleton, {
 			height: 220,
 			radius: 8
 		})
 	}) : /* @__PURE__ */ jsx("div", {
-		className: cx(size === "small" ? styles$1.bodySmall : styles$1.body, styles.tableBleed),
+		...styleProps(size === "small" ? styles.bodySmall : styles.body, surfaceClassNames.tableBleed),
 		children
 	})
 });

package/es/dashboard/PanelSurface/PanelSurface.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PanelSurface.mjs","names":["styles","surfaceStyles"],"sources":["../../../src/dashboard/PanelSurface/PanelSurface.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport Skeleton from '@/base-ui/Skeleton';\nimport Spin from '@/base-ui/Spin';\n\nimport { styles as surfaceStyles } from '../Surface/style';\nimport Surface from '../Surface/Surface';\nimport { styles } from './style';\nimport type { PanelSurfaceProps } from './type';\n\n/** Titled console panel. Body padding stays inside so a trailing table can bleed to the edges. */\nconst PanelSurface = ({\n  title,\n  description,\n  extra,\n  href,\n  loading,\n  renderLink,\n  size = 'default',\n  className,\n  style,\n  children,\n}: PanelSurfaceProps) => (\n  <Surface\n    className={className}\n    description={description}\n    extra={loading && children ? <Spin size=\"small\" variant=\"network\" /> : extra}\n    href={href}\n    padded={false}\n    renderLink={renderLink}\n    style={style}\n    title={title}\n  >\n    {loading && !children ? (\n      <div aria-busy=\"true\" className={styles.loadingBody}>\n        <Skeleton height={220} radius={8} />\n      </div>\n    ) : (\n      <div\n        className={cx(size === 'small' ? styles.bodySmall : styles.body, surfaceStyles.tableBleed)}\n      >\n        {children}\n      </div>\n    )}\n  </Surface>\n);\n\nPanelSurface.displayName = 'PanelSurface';\n\nexport default PanelSurface;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,gBAAgB,EACpB,OACA,aACA,OACA,MACA,SACA,YACA,OAAO,WACP,WACA,OACA,eAEA,oBAAC,SAAD;CACa;CACE;CACb,OAAO,WAAW,WAAW,oBAAC,MAAD;EAAM,MAAK;EAAQ,SAAQ;CAAW,CAAA,IAAI;CACjE;CACN,QAAQ;CACI;CACL;CACA;CAEN,UAAA,WAAW,CAAC,WACX,oBAAC,OAAD;EAAK,aAAU;EAAO,WAAWA,SAAO;EACtC,UAAA,oBAAC,UAAD;GAAU,QAAQ;GAAK,QAAQ;EAAI,CAAA;CAChC,CAAA,IAEL,oBAAC,OAAD;EACE,WAAW,GAAG,SAAS,UAAUA,SAAO,YAAYA,SAAO,MAAMC,OAAc,UAAU;EAExF;CACE,CAAA;AAEA,CAAA;AAGX,aAAa,cAAc"}
+{"version":3,"file":"PanelSurface.mjs","names":[],"sources":["../../../src/dashboard/PanelSurface/PanelSurface.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport Skeleton from '@/Skeleton';\nimport Spin from '@/Spin';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { surfaceClassNames } from '../Surface/style';\nimport Surface from '../Surface/Surface';\nimport { styles } from './style';\nimport type { PanelSurfaceProps } from './type';\n\n/** Titled console panel. Body padding stays inside so a trailing table can bleed to the edges. */\nconst PanelSurface = ({\n  title,\n  description,\n  extra,\n  href,\n  loading,\n  renderLink,\n  size = 'default',\n  className,\n  style,\n  children,\n}: PanelSurfaceProps) => (\n  <Surface\n    className={className}\n    description={description}\n    extra={loading && children ? <Spin size=\"small\" variant=\"network\" /> : extra}\n    href={href}\n    padded={false}\n    renderLink={renderLink}\n    style={style}\n    title={title}\n  >\n    {loading && !children ? (\n      <div aria-busy=\"true\" {...stylex.props(styles.loadingBody)}>\n        <Skeleton height={220} radius={8} />\n      </div>\n    ) : (\n      <div\n        {...styleProps(\n          size === 'small' ? styles.bodySmall : styles.body,\n          surfaceClassNames.tableBleed,\n        )}\n      >\n        {children}\n      </div>\n    )}\n  </Surface>\n);\n\nPanelSurface.displayName = 'PanelSurface';\n\nexport default PanelSurface;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,gBAAgB,EACpB,OACA,aACA,OACA,MACA,SACA,YACA,OAAO,WACP,WACA,OACA,eACuB,oBAAC,SAAD;CAAoB;CAAwB;CAAa,OAAO,WAAW,WAAW,oBAAC,MAAD;EAAM,MAAK;EAAQ,SAAQ;CAAW,CAAA,IAAI;CAAa;CAAM,QAAQ;CAAmB;CAAmB;CAAc;CACnO,UAAA,WAAW,CAAC,WAAW,oBAAC,OAAD;EAAK,aAAU;EAAO,GAAI,OAAO,MAAM,OAAO,WAAW;EAC7E,UAAA,oBAAC,UAAD;GAAU,QAAQ;GAAK,QAAQ;EAAI,CAAA;CAChC,CAAA,IAAI,oBAAC,OAAD;EAAK,GAAI,WAAW,SAAS,UAAU,OAAO,YAAY,OAAO,MAAM,kBAAkB,UAAU;EACzG;CACE,CAAA;AACA,CAAA;AACX,aAAa,cAAc"}

package/es/dashboard/PanelSurface/style.mjs

@@ -1,23 +1,24 @@
-import { createStaticStyles } from "antd-style";
 //#region src/dashboard/PanelSurface/style.ts
-const styles = createStaticStyles(({ css }) => ({
-	body: css`
-    --surface-pad-inline: 16px;
-    --surface-pad-block: 16px;
-
-    padding: 16px;
-  `,
-	bodySmall: css`
-    --surface-pad-inline: 16px;
-    --surface-pad-block: 12px;
-
-    padding-block: 12px;
-    padding-inline: 16px;
-  `,
-	loadingBody: css`
-    padding-block: 4px 8px;
-  `
-}));
+const styles = {
+	body: {
+		"--surface-pad-block": "lb4vqstq",
+		"--surface-pad-inline": "lbssx8jz",
+		kmVPX3: "lb1tamke2",
+		$$css: true
+	},
+	bodySmall: {
+		"--surface-pad-block": "lbo35jsc",
+		"--surface-pad-inline": "lbssx8jz",
+		k8WAf4: "lb10dr8xq",
+		kg3NbH: "lb1hr3lfm",
+		$$css: true
+	},
+	loadingBody: {
+		kGO01o: "lbwib8y2",
+		kLKAdn: "lb1iorvi4",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PanelSurface/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  body: css`\n    --surface-pad-inline: 16px;\n    --surface-pad-block: 16px;\n\n    padding: 16px;\n  `,\n  bodySmall: css`\n    --surface-pad-inline: 16px;\n    --surface-pad-block: 12px;\n\n    padding-block: 12px;\n    padding-inline: 16px;\n  `,\n  loadingBody: css`\n    padding-block: 4px 8px;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,WAAW;CACrD,MAAM,GAAG;;;;;;CAMT,WAAW,GAAG;;;;;;;CAOd,aAAa,GAAG;;;AAGlB,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PanelSurface/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  body: {\n    '--surface-pad-block': '16px',\n    '--surface-pad-inline': '16px',\n    'padding': 16,\n  },\n  bodySmall: {\n    '--surface-pad-block': '12px',\n    '--surface-pad-inline': '16px',\n    'paddingBlock': 12,\n    'paddingInline': 16,\n  },\n  loadingBody: {\n    paddingBlockEnd: 8,\n    paddingBlockStart: 4,\n  },\n});\n"],"mappings":";AACA,MAAa,SAAS;CACpB,MAAM;EACJ,uBAAuB;EACvB,wBAAwB;EACxB,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,uBAAuB;EACvB,wBAAwB;EACxB,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

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

@@ -1,7 +1,7 @@
 import { SurfaceRenderLink } from "../Surface/type.mjs";
 import { CSSProperties, ReactNode } from "react";
 //#region src/dashboard/PanelSurface/type.d.ts
-interface PanelSurfaceProps {
+export interface PanelSurfaceProps {
   children?: ReactNode;
   className?: string;
   description?: ReactNode;
@@ -14,5 +14,4 @@ interface PanelSurfaceProps {
   title?: ReactNode;
 }
 //#endregion
-export { PanelSurfaceProps };
 //# sourceMappingURL=type.d.mts.map

package/es/dashboard/RouteProgress/RouteProgress.mjs

@@ -2,6 +2,7 @@
 import { styles } from "./style.mjs";
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
 //#region src/dashboard/RouteProgress/RouteProgress.tsx
 const FADE_MS = 200;
 const CREEP_MS = 120;
@@ -29,7 +30,7 @@ function RouteProgress({ loading = false }) {
 	if (progress === null) return null;
 	return /* @__PURE__ */ jsx("div", {
 		"aria-hidden": true,
-		className: styles.bar,
+		...stylex.props(styles.bar),
 		style: {
 			opacity: progress >= 1 ? 0 : 1,
 			transform: `scaleX(${progress})`,

package/es/dashboard/RouteProgress/RouteProgress.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RouteProgress.mjs","names":[],"sources":["../../../src/dashboard/RouteProgress/RouteProgress.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\nimport { styles } from './style';\nimport type { RouteProgressProps } from './type';\n\nconst FADE_MS = 200;\nconst CREEP_MS = 120;\n\nfunction RouteProgress({ loading = false }: RouteProgressProps) {\n  const [progress, setProgress] = useState<number | null>(null);\n\n  useEffect(() => {\n    if (loading) {\n      const creep = window.setInterval(() => {\n        setProgress((value) => {\n          const from = value ?? 0;\n          return from >= 0.9 ? from : from + (0.9 - from) * 0.2;\n        });\n      }, CREEP_MS);\n      return () => window.clearInterval(creep);\n    }\n\n    const settle = window.setTimeout(() => {\n      setProgress((value) => (value === null ? null : 1));\n    }, 0);\n    const hide = window.setTimeout(() => setProgress(null), FADE_MS);\n    return () => {\n      window.clearTimeout(settle);\n      window.clearTimeout(hide);\n    };\n  }, [loading]);\n\n  if (progress === null) return null;\n  return (\n    <div\n      aria-hidden\n      className={styles.bar}\n      style={{\n        opacity: progress >= 1 ? 0 : 1,\n        transform: `scaleX(${progress})`,\n        transition: `transform ${FADE_MS}ms ease-out, opacity ${FADE_MS}ms ease-in`,\n      }}\n    />\n  );\n}\n\nRouteProgress.displayName = 'RouteProgress';\n\nexport default RouteProgress;\n"],"mappings":";;;;;AAOA,MAAM,UAAU;AAChB,MAAM,WAAW;AAEjB,SAAS,cAAc,EAAE,UAAU,SAA6B;CAC9D,MAAM,CAAC,UAAU,eAAe,SAAwB,IAAI;CAE5D,gBAAgB;EACd,IAAI,SAAS;GACX,MAAM,QAAQ,OAAO,kBAAkB;IACrC,aAAa,UAAU;KACrB,MAAM,OAAO,SAAS;KACtB,OAAO,QAAQ,KAAM,OAAO,QAAQ,KAAM,QAAQ;IACpD,CAAC;GACH,GAAG,QAAQ;GACX,aAAa,OAAO,cAAc,KAAK;EACzC;EAEA,MAAM,SAAS,OAAO,iBAAiB;GACrC,aAAa,UAAW,UAAU,OAAO,OAAO,CAAE;EACpD,GAAG,CAAC;EACJ,MAAM,OAAO,OAAO,iBAAiB,YAAY,IAAI,GAAG,OAAO;EAC/D,aAAa;GACX,OAAO,aAAa,MAAM;GAC1B,OAAO,aAAa,IAAI;EAC1B;CACF,GAAG,CAAC,OAAO,CAAC;CAEZ,IAAI,aAAa,MAAM,OAAO;CAC9B,OACE,oBAAC,OAAD;EACE,eAAA;EACA,WAAW,OAAO;EAClB,OAAO;GACL,SAAS,YAAY,IAAI,IAAI;GAC7B,WAAW,UAAU,SAAS;GAC9B,YAAY,aAAa,QAAQ,uBAAuB,QAAQ;EAClE;CACD,CAAA;AAEL;AAEA,cAAc,cAAc"}
+{"version":3,"file":"RouteProgress.mjs","names":[],"sources":["../../../src/dashboard/RouteProgress/RouteProgress.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useEffect, useState } from 'react';\n\nimport { styles } from './style';\nimport type { RouteProgressProps } from './type';\n\nconst FADE_MS = 200;\nconst CREEP_MS = 120;\n\nfunction RouteProgress({ loading = false }: RouteProgressProps) {\n  const [progress, setProgress] = useState<number | null>(null);\n\n  useEffect(() => {\n    if (loading) {\n      const creep = window.setInterval(() => {\n        setProgress((value) => {\n          const from = value ?? 0;\n          return from >= 0.9 ? from : from + (0.9 - from) * 0.2;\n        });\n      }, CREEP_MS);\n      return () => window.clearInterval(creep);\n    }\n\n    const settle = window.setTimeout(() => {\n      setProgress((value) => (value === null ? null : 1));\n    }, 0);\n    const hide = window.setTimeout(() => setProgress(null), FADE_MS);\n    return () => {\n      window.clearTimeout(settle);\n      window.clearTimeout(hide);\n    };\n  }, [loading]);\n\n  if (progress === null) return null;\n  return (\n    <div\n      aria-hidden\n      {...stylex.props(styles.bar)}\n      style={{\n        opacity: progress >= 1 ? 0 : 1,\n        transform: `scaleX(${progress})`,\n        transition: `transform ${FADE_MS}ms ease-out, opacity ${FADE_MS}ms ease-in`,\n      }}\n    />\n  );\n}\n\nRouteProgress.displayName = 'RouteProgress';\n\nexport default RouteProgress;\n"],"mappings":";;;;;;AAMA,MAAM,UAAU;AAChB,MAAM,WAAW;AACjB,SAAS,cAAc,EACrB,UAAU,SACW;CACrB,MAAM,CAAC,UAAU,eAAe,SAAwB,IAAI;CAC5D,gBAAgB;EACd,IAAI,SAAS;GACX,MAAM,QAAQ,OAAO,kBAAkB;IACrC,aAAY,UAAS;KACnB,MAAM,OAAO,SAAS;KACtB,OAAO,QAAQ,KAAM,OAAO,QAAQ,KAAM,QAAQ;IACpD,CAAC;GACH,GAAG,QAAQ;GACX,aAAa,OAAO,cAAc,KAAK;EACzC;EACA,MAAM,SAAS,OAAO,iBAAiB;GACrC,aAAY,UAAS,UAAU,OAAO,OAAO,CAAC;EAChD,GAAG,CAAC;EACJ,MAAM,OAAO,OAAO,iBAAiB,YAAY,IAAI,GAAG,OAAO;EAC/D,aAAa;GACX,OAAO,aAAa,MAAM;GAC1B,OAAO,aAAa,IAAI;EAC1B;CACF,GAAG,CAAC,OAAO,CAAC;CACZ,IAAI,aAAa,MAAM,OAAO;CAC9B,OAAO,oBAAC,OAAD;EAAK,eAAA;EAAY,GAAI,OAAO,MAAM,OAAO,GAAG;EAAG,OAAO;GAC3D,SAAS,YAAY,IAAI,IAAI;GAC7B,WAAW,UAAU,SAAS;GAC9B,YAAY,aAAa,QAAQ,uBAAuB,QAAQ;EAClE;CAAI,CAAA;AACN;AACA,cAAc,cAAc"}

package/es/dashboard/RouteProgress/style.mjs

@@ -1,18 +1,15 @@
-import { createStaticStyles } from "antd-style";
 //#region src/dashboard/RouteProgress/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => ({ bar: css`
-    will-change: transform, opacity;
-
-    position: fixed;
-    z-index: 1000;
-    inset-block-start: 0;
-    inset-inline: 0;
-    transform-origin: 0 50%;
-
-    block-size: 2px;
-
-    background: ${cssVar.colorPrimary};
-  ` }));
+const styles = { bar: {
+	kkqhue: "lb17y0mx6",
+	kWkggS: "lb1hsafae",
+	kZKoxP: "lb36qwtl",
+	k87sOh: "lb13vifvy",
+	kVAEAm: "lbixxii4",
+	k3nNDw: "lb4uogl2",
+	k6sLGO: "lb1q1rmc8",
+	kY2c9j: "lbfo81ep",
+	$$css: true
+} };
 //#endregion
 export { styles };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/RouteProgress/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  bar: css`\n    will-change: transform, opacity;\n\n    position: fixed;\n    z-index: 1000;\n    inset-block-start: 0;\n    inset-inline: 0;\n    transform-origin: 0 50%;\n\n    block-size: 2px;\n\n    background: ${cssVar.colorPrimary};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc,EAC7D,KAAK,GAAG;;;;;;;;;;;kBAWQ,OAAO,aAAa;IAEtC,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/RouteProgress/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  bar: {\n    insetInline: 0,\n    backgroundColor: cssVar.colorPrimary,\n    blockSize: 2,\n    insetBlockStart: 0,\n    position: 'fixed',\n    transformOrigin: '0 50%',\n    willChange: 'transform, opacity',\n    zIndex: 1000,\n  },\n});\n"],"mappings":";AAGA,MAAa,SAAS,EACpB,KAAK;CACH,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF"}

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

@@ -1,8 +1,7 @@
 //#region src/dashboard/RouteProgress/type.d.ts
-interface RouteProgressProps {
+export interface RouteProgressProps {
   /** While true, the bar creeps toward the end. When it becomes false, the bar finishes and fades. */
   loading?: boolean;
 }
 //#endregion
-export { RouteProgressProps };
 //# sourceMappingURL=type.d.mts.map

package/es/dashboard/Section/Section.mjs

@@ -1,10 +1,12 @@
 "use client";
-import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { styleProps } from "../../styles/stylex/props.mjs";
 import Icon from "../../Icon/Icon.mjs";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import { useSurfaceLink } from "../Surface/link.mjs";
 import Surface from "../Surface/Surface.mjs";
 import { styles } from "./style.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
 import { ChevronRight } from "lucide-react";
 //#region src/dashboard/Section/Section.tsx
 /** A titled page section with description, extra and a "more" link, flat or as a card. */
@@ -12,7 +14,7 @@ const Section = ({ className, variant = "default", fontSize, title, more, moreLi
 	const link = useSurfaceLink(renderLink);
 	const moreNode = moreLink ? link({
 		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: more }), /* @__PURE__ */ jsx(Icon, { icon: ChevronRight })] }),
-		className: styles.more,
+		className: stylex.props(styles.more).className,
 		href: moreLink,
 		rel: moreLink.startsWith("http") ? "noreferrer" : void 0,
 		target: moreLink.startsWith("http") ? "_blank" : void 0
@@ -28,8 +30,7 @@ const Section = ({ className, variant = "default", fontSize, title, more, moreLi
 		extra: actions,
 		padded: padded ?? true,
 		title: title ? /* @__PURE__ */ jsxs("span", {
-			className: styles.title,
-			style: fontSize ? { fontSize } : void 0,
+			...styleProps(styles.title, void 0, fontSize ? { fontSize } : void 0),
 			children: [icon, title]
 		}) : void 0,
 		children: /* @__PURE__ */ jsx(FlexBasic_default, {
@@ -61,12 +62,11 @@ const Section = ({ className, variant = "default", fontSize, title, more, moreLi
 				children: [
 					icon,
 					/* @__PURE__ */ jsx("h2", {
-						className: styles.title,
-						style: fontSize ? { fontSize } : void 0,
+						...styleProps(styles.title, void 0, fontSize ? { fontSize } : void 0),
 						children: title
 					}),
 					desc ? /* @__PURE__ */ jsx("div", {
-						className: styles.desc,
+						...stylex.props(styles.desc),
 						children: desc
 					}) : null
 				]

package/es/dashboard/Section/Section.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Section.mjs","names":["Flexbox"],"sources":["../../../src/dashboard/Section/Section.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronRight } from 'lucide-react';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { useSurfaceLink } from '../Surface/link';\nimport Surface from '../Surface/Surface';\nimport { styles } from './style';\nimport type { SectionProps } from './type';\n\n/** A titled page section with description, extra and a \"more\" link, flat or as a card. */\nconst Section = ({\n  className,\n  variant = 'default',\n  fontSize,\n  title,\n  more,\n  moreLink,\n  icon,\n  children,\n  desc,\n  extra,\n  gap,\n  padded,\n  renderLink,\n  ...rest\n}: SectionProps) => {\n  const link = useSurfaceLink(renderLink);\n  const moreNode = moreLink\n    ? link({\n        children: (\n          <>\n            <span>{more}</span>\n            <Icon icon={ChevronRight} />\n          </>\n        ),\n        className: styles.more,\n        href: moreLink,\n        rel: moreLink.startsWith('http') ? 'noreferrer' : undefined,\n        target: moreLink.startsWith('http') ? '_blank' : undefined,\n      })\n    : null;\n  const actions =\n    extra || moreNode ? (\n      <Flexbox horizontal align=\"center\" gap={8}>\n        {extra}\n        {moreNode}\n      </Flexbox>\n    ) : undefined;\n\n  if (variant === 'card') {\n    return (\n      <Surface\n        description={desc}\n        extra={actions}\n        padded={padded ?? true}\n        title={\n          title ? (\n            <span className={styles.title} style={fontSize ? { fontSize } : undefined}>\n              {icon}\n              {title}\n            </span>\n          ) : undefined\n        }\n      >\n        <Flexbox className={className} gap={gap ?? 12} {...rest}>\n          {children}\n        </Flexbox>\n      </Surface>\n    );\n  }\n\n  if (!title) {\n    return (\n      <Flexbox className={className} gap={gap} {...rest}>\n        {children}\n      </Flexbox>\n    );\n  }\n\n  return (\n    <Flexbox className={className} gap={gap ?? 16} width=\"100%\" {...rest}>\n      <Flexbox horizontal align=\"center\" gap={12} justify=\"space-between\" width=\"100%\">\n        <Flexbox gap={4}>\n          {icon}\n          <h2 className={styles.title} style={fontSize ? { fontSize } : undefined}>\n            {title}\n          </h2>\n          {desc ? <div className={styles.desc}>{desc}</div> : null}\n        </Flexbox>\n        {actions ?? null}\n      </Flexbox>\n      {children}\n    </Flexbox>\n  );\n};\n\nSection.displayName = 'Section';\n\nexport default Section;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,WAAW,EACf,WACA,UAAU,WACV,UACA,OACA,MACA,UACA,MACA,UACA,MACA,OACA,KACA,QACA,YACA,GAAG,WACe;CAClB,MAAM,OAAO,eAAe,UAAU;CACtC,MAAM,WAAW,WACb,KAAK;EACH,UACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,GAClB,oBAAC,MAAD,EAAM,MAAM,aAAe,CAAA,CAC3B,EAAA,CAAA;EAEJ,WAAW,OAAO;EAClB,MAAM;EACN,KAAK,SAAS,WAAW,MAAM,IAAI,eAAe,KAAA;EAClD,QAAQ,SAAS,WAAW,MAAM,IAAI,WAAW,KAAA;CACnD,CAAC,IACD;CACJ,MAAM,UACJ,SAAS,WACP,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAM;EAAS,KAAK;EAAxC,UAAA,CACG,OACA,QACM;CACP,CAAA,IAAA,KAAA;CAEN,IAAI,YAAY,QACd,OACE,oBAAC,SAAD;EACE,aAAa;EACb,OAAO;EACP,QAAQ,UAAU;EAClB,OACE,QACE,qBAAC,QAAD;GAAM,WAAW,OAAO;GAAO,OAAO,WAAW,EAAE,SAAS,IAAI,KAAA;GAAhE,UAAA,CACG,MACA,KACG;EACJ,CAAA,IAAA,KAAA;EAGN,UAAA,oBAACA,mBAAD;GAAoB;GAAW,KAAK,OAAO;GAAI,GAAI;GAChD;EACM,CAAA;CACF,CAAA;CAIb,IAAI,CAAC,OACH,OACE,oBAACA,mBAAD;EAAoB;EAAgB;EAAK,GAAI;EAC1C;CACM,CAAA;CAIb,OACE,qBAACA,mBAAD;EAAoB;EAAW,KAAK,OAAO;EAAI,OAAM;EAAO,GAAI;EAAhE,UAAA,CACE,qBAACA,mBAAD;GAAS,YAAA;GAAW,OAAM;GAAS,KAAK;GAAI,SAAQ;GAAgB,OAAM;GAA1E,UAAA,CACE,qBAACA,mBAAD;IAAS,KAAK;IAAd,UAAA;KACG;KACD,oBAAC,MAAD;MAAI,WAAW,OAAO;MAAO,OAAO,WAAW,EAAE,SAAS,IAAI,KAAA;MAC3D,UAAA;KACC,CAAA;KACH,OAAO,oBAAC,OAAD;MAAK,WAAW,OAAO;MAAO,UAAA;KAAU,CAAA,IAAI;IAC7C;GACR,CAAA,GAAA,WAAW,IACL;EACR,CAAA,GAAA,QACM;;AAEb;AAEA,QAAQ,cAAc"}
+{"version":3,"file":"Section.mjs","names":["Flexbox"],"sources":["../../../src/dashboard/Section/Section.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { ChevronRight } from 'lucide-react';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { useSurfaceLink } from '../Surface/link';\nimport Surface from '../Surface/Surface';\nimport { styles } from './style';\nimport type { SectionProps } from './type';\n\n/** A titled page section with description, extra and a \"more\" link, flat or as a card. */\nconst Section = ({\n  className,\n  variant = 'default',\n  fontSize,\n  title,\n  more,\n  moreLink,\n  icon,\n  children,\n  desc,\n  extra,\n  gap,\n  padded,\n  renderLink,\n  ...rest\n}: SectionProps) => {\n  const link = useSurfaceLink(renderLink);\n  const moreNode = moreLink\n    ? link({\n        children: (\n          <>\n            <span>{more}</span>\n            <Icon icon={ChevronRight} />\n          </>\n        ),\n        className: stylex.props(styles.more).className,\n        href: moreLink,\n        rel: moreLink.startsWith('http') ? 'noreferrer' : undefined,\n        target: moreLink.startsWith('http') ? '_blank' : undefined,\n      })\n    : null;\n  const actions =\n    extra || moreNode ? (\n      <Flexbox horizontal align=\"center\" gap={8}>\n        {extra}\n        {moreNode}\n      </Flexbox>\n    ) : undefined;\n\n  if (variant === 'card') {\n    return (\n      <Surface\n        description={desc}\n        extra={actions}\n        padded={padded ?? true}\n        title={\n          title ? (\n            <span {...styleProps(styles.title, undefined, fontSize ? { fontSize } : undefined)}>\n              {icon}\n              {title}\n            </span>\n          ) : undefined\n        }\n      >\n        <Flexbox className={className} gap={gap ?? 12} {...rest}>\n          {children}\n        </Flexbox>\n      </Surface>\n    );\n  }\n\n  if (!title) {\n    return (\n      <Flexbox className={className} gap={gap} {...rest}>\n        {children}\n      </Flexbox>\n    );\n  }\n\n  return (\n    <Flexbox className={className} gap={gap ?? 16} width=\"100%\" {...rest}>\n      <Flexbox horizontal align=\"center\" gap={12} justify=\"space-between\" width=\"100%\">\n        <Flexbox gap={4}>\n          {icon}\n          <h2 {...styleProps(styles.title, undefined, fontSize ? { fontSize } : undefined)}>\n            {title}\n          </h2>\n          {desc ? <div {...stylex.props(styles.desc)}>{desc}</div> : null}\n        </Flexbox>\n        {actions ?? null}\n      </Flexbox>\n      {children}\n    </Flexbox>\n  );\n};\n\nSection.displayName = 'Section';\n\nexport default Section;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,WAAW,EACf,WACA,UAAU,WACV,UACA,OACA,MACA,UACA,MACA,UACA,MACA,OACA,KACA,QACA,YACA,GAAG,WACe;CAClB,MAAM,OAAO,eAAe,UAAU;CACtC,MAAM,WAAW,WAAW,KAAK;EAC/B,UAAU,qBAAA,UAAA,EAAA,UAAA,CACF,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,GAClB,oBAAC,MAAD,EAAM,MAAM,aAAe,CAAA,CAC3B,EAAA,CAAA;EACR,WAAW,OAAO,MAAM,OAAO,IAAI,CAAC,CAAC;EACrC,MAAM;EACN,KAAK,SAAS,WAAW,MAAM,IAAI,eAAe,KAAA;EAClD,QAAQ,SAAS,WAAW,MAAM,IAAI,WAAW,KAAA;CACnD,CAAC,IAAI;CACL,MAAM,UAAU,SAAS,WAAW,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAM;EAAS,KAAK;EAAxC,UAAA,CAC7B,OACA,QACM;CAAI,CAAA,IAAA,KAAA;CACjB,IAAI,YAAY,QACd,OAAO,oBAAC,SAAD;EAAS,aAAa;EAAM,OAAO;EAAS,QAAQ,UAAU;EAAM,OAAO,QAAQ,qBAAC,QAAD;GAAM,GAAI,WAAW,OAAO,OAAO,KAAA,GAAW,WAAW,EACjJ,SACF,IAAI,KAAA,CAAS;GAF6E,UAAA,CAG/E,MACA,KACG;EAAI,CAAA,IAAA,KAAA;EACd,UAAA,oBAACA,mBAAD;GAAoB;GAAW,KAAK,OAAO;GAAI,GAAI;GAChD;EACM,CAAA;CACF,CAAA;CAEb,IAAI,CAAC,OACH,OAAO,oBAACA,mBAAD;EAAoB;EAAgB;EAAK,GAAI;EAC/C;CACM,CAAA;CAEb,OAAO,qBAACA,mBAAD;EAAoB;EAAW,KAAK,OAAO;EAAI,OAAM;EAAO,GAAI;EAAhE,UAAA,CACH,qBAACA,mBAAD;GAAS,YAAA;GAAW,OAAM;GAAS,KAAK;GAAI,SAAQ;GAAgB,OAAM;GAA1E,UAAA,CACE,qBAACA,mBAAD;IAAS,KAAK;IAAd,UAAA;KACG;KACD,oBAAC,MAAD;MAAI,GAAI,WAAW,OAAO,OAAO,KAAA,GAAW,WAAW,EACvD,SACF,IAAI,KAAA,CAAS;MACR,UAAA;KACC,CAAA;KACH,OAAO,oBAAC,OAAD;MAAK,GAAI,OAAO,MAAM,OAAO,IAAI;MAAI,UAAA;KAAU,CAAA,IAAI;IACpD;GACR,CAAA,GAAA,WAAW,IACL;EACR,CAAA,GAAA,QACM;;AACb;AACA,QAAQ,cAAc"}

package/es/dashboard/Section/style.mjs

@@ -1,34 +1,30 @@
-import { createStaticStyles } from "antd-style";
 //#region src/dashboard/Section/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => ({
-	desc: css`
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 1.45;
-    color: ${cssVar.colorTextSecondary};
-  `,
-	more: css`
-    display: inline-flex;
-    gap: 2px;
-    align-items: center;
-
-    font-size: 13px;
-    color: ${cssVar.colorTextSecondary};
-    text-decoration: none;
-
-    &:hover {
-      color: ${cssVar.colorText};
-    }
-  `,
-	title: css`
-    margin: 0;
-
-    font-size: 15px;
-    font-weight: 600;
-    line-height: 1.4;
-    color: ${cssVar.colorText};
-  `
-}));
+const styles = {
+	desc: {
+		kMwMTN: "lbc77et8",
+		kGuDYH: "lb4z9k3i",
+		k63SB2: "lbo1l8bm",
+		kLWn49: "lbfrs9s4",
+		$$css: true
+	},
+	more: {
+		kOIVth: "lb195vfkc",
+		kybGjl: "lb1hl2dhg",
+		kGNEyG: "lb6s0dn4",
+		kMwMTN: "lbc77et8 lb1bxu9lh",
+		k1xSpc: "lb3nfvp2",
+		kGuDYH: "lb4z9k3i",
+		$$css: true
+	},
+	title: {
+		kogj98: "lb1ghz6dp",
+		kMwMTN: "lb66ogz0",
+		kGuDYH: "lb1jvydc1",
+		k63SB2: "lb1s688f",
+		kLWn49: "lb37zpob",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/Section/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  desc: css`\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 1.45;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  more: css`\n    display: inline-flex;\n    gap: 2px;\n    align-items: center;\n\n    font-size: 13px;\n    color: ${cssVar.colorTextSecondary};\n    text-decoration: none;\n\n    &:hover {\n      color: ${cssVar.colorText};\n    }\n  `,\n  title: css`\n    margin: 0;\n\n    font-size: 15px;\n    font-weight: 600;\n    line-height: 1.4;\n    color: ${cssVar.colorText};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;aAIE,OAAO,mBAAmB;;CAErC,MAAM,GAAG;;;;;;aAME,OAAO,mBAAmB;;;;eAIxB,OAAO,UAAU;;;CAG9B,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;AAE9B,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/Section/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  desc: {\n    color: cssVar.colorTextSecondary,\n    fontSize: 13,\n    fontWeight: 400,\n    lineHeight: 1.45,\n  },\n  more: {\n    gap: 2,\n    textDecoration: 'none',\n    alignItems: 'center',\n    color: { 'default': cssVar.colorTextSecondary, ':hover': cssVar.colorText },\n    display: 'inline-flex',\n    fontSize: 13,\n  },\n  title: {\n    margin: 0,\n    color: cssVar.colorText,\n    fontSize: 15,\n    fontWeight: 600,\n    lineHeight: 1.4,\n  },\n});\n"],"mappings":";AAGA,MAAa,SAAS;CACpB,MAAM;EACJ,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,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

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

@@ -3,7 +3,7 @@ import "../../Flex/index.mjs";
 import { SurfaceRenderLink } from "../Surface/type.mjs";
 import { ReactNode } from "react";
 //#region src/dashboard/Section/type.d.ts
-interface SectionProps extends Omit<FlexboxProps, 'title'> {
+export interface SectionProps extends Omit<FlexboxProps, 'title'> {
   desc?: ReactNode;
   extra?: ReactNode;
   fontSize?: number;
@@ -20,5 +20,4 @@ interface SectionProps extends Omit<FlexboxProps, 'title'> {
   variant?: 'default' | 'card';
 }
 //#endregion
-export { SectionProps };
 //# sourceMappingURL=type.d.mts.map