@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/dashboard/MetricStrip/style.mjs

@@ -1,174 +1,168 @@
-import { createStaticStyles } from "antd-style";
 //#region src/dashboard/MetricStrip/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => ({
-	cell: css`
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-
-    min-inline-size: 0;
-    padding-block: 16px;
-    padding-inline: 20px;
-
-    background: transparent;
-  `,
-	/** Joined strip only: the divider on the cell's trailing and bottom edges. */
-	cellSeam: css`
-    box-shadow:
-      inset -1px 0 0 var(--metric-seam),
-      inset 0 -1px 0 var(--metric-seam);
-  `,
-	/** Split strip and StatCard: one card per item. */
-	card: css`
-    display: grid;
-    min-inline-size: 0;
-  `,
-	head: css`
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    justify-content: space-between;
-
-    box-sizing: border-box;
-    min-inline-size: 0;
-    block-size: 32px;
-  `,
-	headCopy: css`
-    display: flex;
-    flex: 1;
-    gap: 6px;
-    align-items: center;
-
-    min-inline-size: 0;
-  `,
-	/** Label-row control, pushed to the trailing edge. */
-	headAction: css`
-    display: flex;
-    flex: none;
-    align-items: center;
-  `,
-	/** Full-width chart slot under the delta and hint. */
-	chart: css`
-    inline-size: 100%;
-    min-inline-size: 0;
-    margin-block-start: 6px;
-  `,
-	mark: css`
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
-
-    inline-size: 24px;
-    block-size: 24px;
-    border: 1px solid ${cssVar.colorFillSecondary};
-    border-radius: ${cssVar.borderRadiusSM};
-
-    color: ${cssVar.colorTextTertiary};
-
-    background: ${cssVar.colorFillTertiary};
-  `,
-	split: css`
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: 12px;
-  `,
-	delta: css`
-    font-size: 13px;
-    font-variant-numeric: tabular-nums;
-    line-height: 1.4;
-  `,
-	deltaDown: css`
-    color: ${cssVar.colorError};
-  `,
-	deltaFlat: css`
-    color: ${cssVar.colorTextSecondary};
-  `,
-	deltaUp: css`
-    color: ${cssVar.colorSuccess};
-  `,
-	foot: css`
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    align-items: baseline;
-  `,
-	/**
-	* Clips the seam that would otherwise sit on the card's trailing and bottom
-	* edges. A short last row used to show the seam color across the empty
-	* track, which reads louder than the cells.
-	*/
-	frame: css`
-    --metric-seam: var(--lobe-fill-border, ${cssVar.colorFill});
-
-    overflow: hidden;
-    border-radius: inherit;
-    background: transparent;
-  `,
-	grid: css`
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-
-    inline-size: calc(100% + 1px);
-    margin-block-end: -1px;
-
-    background: transparent;
-  `,
-	hint: css`
-    font-size: 13px;
-    line-height: 1.4;
-    color: ${cssVar.colorTextSecondary};
-  `,
-	label: css`
-    font-size: 13px;
-    font-weight: 500;
-    line-height: 1.4;
-    color: ${cssVar.colorTextSecondary};
-  `,
-	link: css`
-    color: inherit;
-    text-decoration: none;
-
-    &:hover {
-      background: ${cssVar.colorFillQuaternary};
-    }
-  `,
-	press: css`
-    cursor: pointer;
-
-    border: none;
-
-    font: inherit;
-    color: inherit;
-    text-align: start;
-
-    &:hover {
-      background: ${cssVar.colorFillQuaternary};
-    }
-  `,
-	/** Grid cell around a rendered link, so the link fills it. */
-	slot: css`
-    display: grid;
-    min-inline-size: 0;
-  `,
-	value: css`
-    overflow: hidden;
-
-    font-size: ${cssVar.fontSizeHeading3};
-    font-weight: 600;
-    font-variant-numeric: tabular-nums;
-    line-height: 1.15;
-    color: ${cssVar.colorText};
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  `,
-	valueDanger: css`
-    color: ${cssVar.colorError};
-  `,
-	valueWarning: css`
-    color: ${cssVar.colorWarning};
-  `
-}));
+const styles = {
+	card: {
+		k1xSpc: "lbrvj5dj",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	cell: {
+		kOIVth: "lb17d4w8g",
+		k8WAf4: "lb1xn8qrt",
+		kg3NbH: "lb17qtykl",
+		kWkggS: "lbjbqb8w",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	cellSeam: {
+		kGVxlE: "lb4uk749",
+		$$css: true
+	},
+	delta: {
+		kGuDYH: "lb4z9k3i",
+		kcqcaj: "lbss6m8b",
+		kLWn49: "lb37zpob",
+		$$css: true
+	},
+	deltaDown: {
+		kMwMTN: "lb12ap7uz",
+		$$css: true
+	},
+	deltaFlat: {
+		kMwMTN: "lbc77et8",
+		$$css: true
+	},
+	deltaUp: {
+		kMwMTN: "lbs9y9h1",
+		$$css: true
+	},
+	foot: {
+		kOIVth: "lb167g77z",
+		kGNEyG: "lb1pha0wt",
+		k1xSpc: "lb78zum5",
+		kwnvtZ: "lb1a02dak",
+		$$css: true
+	},
+	frame: {
+		"--metric-seam": "lbecsxsy",
+		kaIpWk: "lb1pjcqnp",
+		kVQacm: "lbb3r6kr",
+		kWkggS: "lbjbqb8w",
+		$$css: true
+	},
+	grid: {
+		kWkggS: "lbjbqb8w",
+		k1xSpc: "lbrvj5dj",
+		kumcoG: "lb1rfa8br",
+		kzqmXN: "lbjl7whj",
+		k1K539: "lb1jyxor1",
+		$$css: true
+	},
+	head: {
+		kOIVth: "lb167g77z",
+		kGNEyG: "lb6s0dn4",
+		kZKoxP: "lb10w6t97",
+		kB7OPa: "lb9f619",
+		k1xSpc: "lb78zum5",
+		kjj79g: "lb1qughib",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	headCopy: {
+		kUk6DE: "lb98rzlu",
+		kOIVth: "lb17d4w8g",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	headAction: {
+		kUk6DE: "lb1okw0bk",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		$$css: true
+	},
+	chart: {
+		kzqmXN: "lbh8yej3",
+		keoZOQ: "lb1k70j0n",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	hint: {
+		kMwMTN: "lbc77et8",
+		kGuDYH: "lb4z9k3i",
+		kLWn49: "lb37zpob",
+		$$css: true
+	},
+	label: {
+		kMwMTN: "lbc77et8",
+		kGuDYH: "lb4z9k3i",
+		k63SB2: "lbk50ysn",
+		kLWn49: "lb37zpob",
+		$$css: true
+	},
+	link: {
+		kybGjl: "lb1hl2dhg",
+		kWkggS: "lbjbqb8w lbql1cz1",
+		kMwMTN: "lb1heor9g",
+		$$css: true
+	},
+	mark: {
+		kVAM5u: "lb6d5vuu",
+		kaIpWk: "lb1vihcfj",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbmkeg23",
+		kUk6DE: "lb1okw0bk",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lbaljia1",
+		kZKoxP: "lbxk0z11",
+		kMwMTN: "lb53gy9q",
+		k1xSpc: "lb3nfvp2",
+		kzqmXN: "lbvy4d1p",
+		kjj79g: "lbl56j7k",
+		$$css: true
+	},
+	press: {
+		kVVagm: "lbln7xf2",
+		ksu8eU: "lbng3xce",
+		kWkggS: "lbjbqb8w lbql1cz1",
+		kMwMTN: "lb1heor9g",
+		kkrTdU: "lb1ypdohk",
+		k9WMMc: "lb1yc453h",
+		$$css: true
+	},
+	slot: {
+		k1xSpc: "lbrvj5dj",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	split: {
+		kOIVth: "lb1v2ro7d",
+		k1xSpc: "lbrvj5dj",
+		kumcoG: "lb1rfa8br",
+		$$css: true
+	},
+	value: {
+		kVQacm: "lbb3r6kr",
+		kMwMTN: "lb66ogz0",
+		kGuDYH: "lb4zirph",
+		kcqcaj: "lbss6m8b",
+		k63SB2: "lb1s688f",
+		kLWn49: "lb1uo3zyz",
+		kg5iWk: "lblyipyv",
+		khDVqt: "lbuxw1ft",
+		$$css: true
+	},
+	valueDanger: {
+		kMwMTN: "lb12ap7uz",
+		$$css: true
+	},
+	valueWarning: {
+		kMwMTN: "lbgyvj36",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  cell: css`\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n\n    min-inline-size: 0;\n    padding-block: 16px;\n    padding-inline: 20px;\n\n    background: transparent;\n  `,\n  /** Joined strip only: the divider on the cell's trailing and bottom edges. */\n  cellSeam: css`\n    box-shadow:\n      inset -1px 0 0 var(--metric-seam),\n      inset 0 -1px 0 var(--metric-seam);\n  `,\n  /** Split strip and StatCard: one card per item. */\n  card: css`\n    display: grid;\n    min-inline-size: 0;\n  `,\n  /* One fixed 32px row (a small Segmented or ActionIcon fits): an action or mark in the head must not push the value down, so cells with and\n     without header controls line up across a split strip or a row of StatCards. */\n  head: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n\n    box-sizing: border-box;\n    min-inline-size: 0;\n    block-size: 32px;\n  `,\n  headCopy: css`\n    display: flex;\n    flex: 1;\n    gap: 6px;\n    align-items: center;\n\n    min-inline-size: 0;\n  `,\n  /** Label-row control, pushed to the trailing edge. */\n  headAction: css`\n    display: flex;\n    flex: none;\n    align-items: center;\n  `,\n  /** Full-width chart slot under the delta and hint. */\n  chart: css`\n    inline-size: 100%;\n    min-inline-size: 0;\n    margin-block-start: 6px;\n  `,\n  mark: css`\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    inline-size: 24px;\n    block-size: 24px;\n    border: 1px solid ${cssVar.colorFillSecondary};\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  split: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n    gap: 12px;\n  `,\n  delta: css`\n    font-size: 13px;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.4;\n  `,\n  deltaDown: css`\n    color: ${cssVar.colorError};\n  `,\n  deltaFlat: css`\n    color: ${cssVar.colorTextSecondary};\n  `,\n  deltaUp: css`\n    color: ${cssVar.colorSuccess};\n  `,\n  foot: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: baseline;\n  `,\n  /**\n   * Clips the seam that would otherwise sit on the card's trailing and bottom\n   * edges. A short last row used to show the seam color across the empty\n   * track, which reads louder than the cells.\n   */\n  frame: css`\n    --metric-seam: var(--lobe-fill-border, ${cssVar.colorFill});\n\n    overflow: hidden;\n    border-radius: inherit;\n    background: transparent;\n  `,\n  grid: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n\n    inline-size: calc(100% + 1px);\n    margin-block-end: -1px;\n\n    background: transparent;\n  `,\n  hint: css`\n    font-size: 13px;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  label: css`\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  link: css`\n    color: inherit;\n    text-decoration: none;\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  press: css`\n    cursor: pointer;\n\n    border: none;\n\n    font: inherit;\n    color: inherit;\n    text-align: start;\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  /** Grid cell around a rendered link, so the link fills it. */\n  slot: css`\n    display: grid;\n    min-inline-size: 0;\n  `,\n  value: css`\n    overflow: hidden;\n\n    font-size: ${cssVar.fontSizeHeading3};\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.15;\n    color: ${cssVar.colorText};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  valueDanger: css`\n    color: ${cssVar.colorError};\n  `,\n  valueWarning: css`\n    color: ${cssVar.colorWarning};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;;;CAYT,UAAU,GAAG;;;;;;CAMb,MAAM,GAAG;;;;CAMT,MAAM,GAAG;;;;;;;;;;CAUT,UAAU,GAAG;;;;;;;;;CASb,YAAY,GAAG;;;;;;CAMf,OAAO,GAAG;;;;;CAKV,MAAM,GAAG;;;;;;;;wBAQa,OAAO,mBAAmB;qBAC7B,OAAO,eAAe;;aAE9B,OAAO,kBAAkB;;kBAEpB,OAAO,kBAAkB;;CAEzC,OAAO,GAAG;;;;;CAKV,OAAO,GAAG;;;;;CAKV,WAAW,GAAG;aACH,OAAO,WAAW;;CAE7B,WAAW,GAAG;aACH,OAAO,mBAAmB;;CAErC,SAAS,GAAG;aACD,OAAO,aAAa;;CAE/B,MAAM,GAAG;;;;;;;;;;;CAWT,OAAO,GAAG;6CACiC,OAAO,UAAU;;;;;;CAM5D,MAAM,GAAG;;;;;;;;;CAST,MAAM,GAAG;;;aAGE,OAAO,mBAAmB;;CAErC,OAAO,GAAG;;;;aAIC,OAAO,mBAAmB;;CAErC,MAAM,GAAG;;;;;oBAKS,OAAO,oBAAoB;;;CAG7C,OAAO,GAAG;;;;;;;;;;oBAUQ,OAAO,oBAAoB;;;;CAI7C,MAAM,GAAG;;;;CAIT,OAAO,GAAG;;;iBAGK,OAAO,iBAAiB;;;;aAI5B,OAAO,UAAU;;;;CAI5B,aAAa,GAAG;aACL,OAAO,WAAW;;CAE7B,cAAc,GAAG;aACN,OAAO,aAAa;;AAEjC,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  /** Split strip and StatCard: one card per item. */\n  card: {\n    display: 'grid',\n    minInlineSize: 0,\n  },\n  cell: {\n    gap: 6,\n    paddingBlock: 16,\n    paddingInline: 20,\n    backgroundColor: 'transparent',\n    display: 'flex',\n    flexDirection: 'column',\n    minInlineSize: 0,\n  },\n  /** Joined strip only: the divider on the cell's trailing and bottom edges. */\n  cellSeam: {\n    boxShadow: 'inset -1px 0 0 var(--metric-seam), inset 0 -1px 0 var(--metric-seam)',\n  },\n  delta: {\n    fontSize: 13,\n    fontVariantNumeric: 'tabular-nums',\n    lineHeight: 1.4,\n  },\n  deltaDown: {\n    color: cssVar.colorError,\n  },\n  deltaFlat: {\n    color: cssVar.colorTextSecondary,\n  },\n  deltaUp: {\n    color: cssVar.colorSuccess,\n  },\n  foot: {\n    gap: 8,\n    alignItems: 'baseline',\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  /**\n   * Clips the seam that would otherwise sit on the card's trailing and bottom\n   * edges. A short last row used to show the seam color across the empty\n   * track, which reads louder than the cells.\n   */\n  frame: {\n    '--metric-seam': `var(--lobe-fill-border, ${cssVar.colorFill})`,\n    'borderRadius': 'inherit',\n    'overflow': 'hidden',\n    'backgroundColor': 'transparent',\n  },\n  grid: {\n    backgroundColor: 'transparent',\n    display: 'grid',\n    gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',\n    inlineSize: 'calc(100% + 1px)',\n    marginBlockEnd: -1,\n  },\n  /* One fixed 32px row (a small Segmented or ActionIcon fits): an action or mark in the head must\n     not push the value down, so cells with and without header controls line up across a split\n     strip or a row of StatCards. */\n  head: {\n    gap: 8,\n    alignItems: 'center',\n    blockSize: 32,\n    boxSizing: 'border-box',\n    display: 'flex',\n    justifyContent: 'space-between',\n    minInlineSize: 0,\n  },\n  headCopy: {\n    flex: '1',\n    gap: 6,\n    alignItems: 'center',\n    display: 'flex',\n    minInlineSize: 0,\n  },\n  headAction: {\n    flex: 'none',\n    alignItems: 'center',\n    display: 'flex',\n  },\n  chart: {\n    inlineSize: '100%',\n    marginBlockStart: 6,\n    minInlineSize: 0,\n  },\n  hint: {\n    color: cssVar.colorTextSecondary,\n    fontSize: 13,\n    lineHeight: 1.4,\n  },\n  label: {\n    color: cssVar.colorTextSecondary,\n    fontSize: 13,\n    fontWeight: 500,\n    lineHeight: 1.4,\n  },\n  link: {\n    textDecoration: 'none',\n    backgroundColor: { 'default': 'transparent', ':hover': cssVar.colorFillQuaternary },\n    color: 'inherit',\n  },\n  mark: {\n    borderColor: cssVar.colorFillSecondary,\n    borderRadius: cssVar.borderRadiusSM,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    flex: 'none',\n    alignItems: 'center',\n    backgroundColor: cssVar.colorFillTertiary,\n    blockSize: 24,\n    color: cssVar.colorTextTertiary,\n    display: 'inline-flex',\n    inlineSize: 24,\n    justifyContent: 'center',\n  },\n  press: {\n    font: 'inherit',\n    borderStyle: 'none',\n    backgroundColor: { 'default': 'transparent', ':hover': cssVar.colorFillQuaternary },\n    color: 'inherit',\n    cursor: 'pointer',\n    textAlign: 'start',\n  },\n  /** Grid cell around a rendered link, so the link fills it. */\n  slot: {\n    display: 'grid',\n    minInlineSize: 0,\n  },\n  split: {\n    gap: 12,\n    display: 'grid',\n    gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',\n  },\n  value: {\n    overflow: 'hidden',\n    color: cssVar.colorText,\n    fontSize: cssVar.fontSizeHeading3,\n    fontVariantNumeric: 'tabular-nums',\n    fontWeight: 600,\n    lineHeight: 1.15,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  valueDanger: {\n    color: cssVar.colorError,\n  },\n  valueWarning: {\n    color: cssVar.colorWarning,\n  },\n});\n"],"mappings":";AAGA,MAAa,SAAS;CACpB,MAAM;EACJ,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,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,iBAAiB;EACjB,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,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;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,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,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,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,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,OAAO;CACT;AACF"}

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

@@ -3,7 +3,7 @@ import "../../Icon/index.mjs";
 import { SurfaceRenderLink } from "../Surface/type.mjs";
 import { ReactNode } from "react";
 //#region src/dashboard/MetricStrip/type.d.ts
-interface MetricItem {
+export interface MetricItem {
   /** Control on the label row, such as a menu. */
   action?: ReactNode;
   /** Full-width chart (sparkline, area) under the delta and hint. */
@@ -22,7 +22,7 @@ interface MetricItem {
   /** Color the figure when the number itself is the thing to act on. */
   valueTone?: 'danger' | 'warning';
 }
-interface MetricStripProps {
+export interface MetricStripProps {
   items: MetricItem[];
   /** First load only: values become placeholders, labels stay. */
   loading?: boolean;
@@ -35,5 +35,4 @@ interface MetricStripProps {
   variant?: 'joined' | 'split';
 }
 //#endregion
-export { MetricItem, MetricStripProps };
 //# sourceMappingURL=type.d.mts.map

package/es/dashboard/PageHeader/PageHeader.mjs

@@ -1,13 +1,26 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { cssVar } from "../../styles/stylex/cssVar.stylex.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
-import Text from "../../base-ui/Text/Text.mjs";
+import Text from "../../Text/Text.mjs";
 import { styles } from "./style.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
 //#region src/dashboard/PageHeader/PageHeader.tsx
+const titleStyle = {
+	fontSize: cssVar.fontSizeHeading3,
+	lineHeight: cssVar.lineHeightHeading3,
+	margin: 0
+};
+const descriptionStyle = {
+	color: cssVar.colorTextSecondary,
+	lineHeight: 1.6,
+	maxInlineSize: "68ch"
+};
 function PageHeader({ action, children, description, mark, title }) {
 	const extra = action ?? children;
 	return /* @__PURE__ */ jsxs("div", {
-		className: styles.root,
+		...stylex.props(styles.root),
 		children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
 			align: mark ? "flex-start" : void 0,
 			gap: 12,
@@ -16,16 +29,16 @@ function PageHeader({ action, children, description, mark, title }) {
 				gap: 8,
 				children: [/* @__PURE__ */ jsx(Text, {
 					as: "h1",
-					className: styles.title,
+					style: titleStyle,
 					weight: "bold",
 					children: title
 				}), description ? /* @__PURE__ */ jsx(Text, {
-					className: styles.description,
+					style: descriptionStyle,
 					children: description
 				}) : null]
 			})]
 		}), extra ? /* @__PURE__ */ jsx("div", {
-			className: styles.actions,
+			...styleProps(styles.actions, "lobe-page-header-actions"),
 			children: extra
 		}) : null]
 	});

package/es/dashboard/PageHeader/PageHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.mjs","names":["Flexbox"],"sources":["../../../src/dashboard/PageHeader/PageHeader.tsx"],"sourcesContent":["'use client';\n\nimport Text from '@/base-ui/Text';\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from './style';\nimport type { PageHeaderProps } from './type';\n\nfunction PageHeader({ action, children, description, mark, title }: PageHeaderProps) {\n  const extra = action ?? children;\n  return (\n    <div className={styles.root}>\n      <Flexbox align={mark ? 'flex-start' : undefined} gap={12} horizontal={Boolean(mark)}>\n        {mark}\n        <Flexbox gap={8}>\n          <Text as=\"h1\" className={styles.title} weight=\"bold\">\n            {title}\n          </Text>\n          {description ? <Text className={styles.description}>{description}</Text> : null}\n        </Flexbox>\n      </Flexbox>\n      {extra ? <div className={styles.actions}>{extra}</div> : null}\n    </div>\n  );\n}\n\nPageHeader.displayName = 'PageHeader';\n\nexport default PageHeader;\n"],"mappings":";;;;;;AAQA,SAAS,WAAW,EAAE,QAAQ,UAAU,aAAa,MAAM,SAA0B;CACnF,MAAM,QAAQ,UAAU;CACxB,OACE,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACE,qBAACA,mBAAD;GAAS,OAAO,OAAO,eAAe,KAAA;GAAW,KAAK;GAAI,YAAY,QAAQ,IAAI;GAAlF,UAAA,CACG,MACD,qBAACA,mBAAD;IAAS,KAAK;IAAd,UAAA,CACE,oBAAC,MAAD;KAAM,IAAG;KAAK,WAAW,OAAO;KAAO,QAAO;KAC3C,UAAA;IACG,CAAA,GACL,cAAc,oBAAC,MAAD;KAAM,WAAW,OAAO;KAAc,UAAA;IAAkB,CAAA,IAAI,IACpE;GACF,CAAA,CAAA;EACR,CAAA,GAAA,QAAQ,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAU,UAAA;EAAW,CAAA,IAAI,IACtD;;AAET;AAEA,WAAW,cAAc"}
+{"version":3,"file":"PageHeader.mjs","names":["Flexbox"],"sources":["../../../src/dashboard/PageHeader/PageHeader.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport { Flexbox } from '@/Flex';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport Text from '@/Text';\n\nimport { styles } from './style';\nimport type { PageHeaderProps } from './type';\n\nconst titleStyle = {\n  fontSize: cssVar.fontSizeHeading3,\n  lineHeight: cssVar.lineHeightHeading3,\n  margin: 0,\n};\nconst descriptionStyle = {\n  color: cssVar.colorTextSecondary,\n  lineHeight: 1.6,\n  maxInlineSize: '68ch',\n};\n\nfunction PageHeader({ action, children, description, mark, title }: PageHeaderProps) {\n  const extra = action ?? children;\n  return (\n    <div {...stylex.props(styles.root)}>\n      <Flexbox align={mark ? 'flex-start' : undefined} gap={12} horizontal={Boolean(mark)}>\n        {mark}\n        <Flexbox gap={8}>\n          <Text as=\"h1\" style={titleStyle} weight=\"bold\">\n            {title}\n          </Text>\n          {description ? <Text style={descriptionStyle}>{description}</Text> : null}\n        </Flexbox>\n      </Flexbox>\n      {extra ? (\n        <div {...styleProps(styles.actions, 'lobe-page-header-actions')}>{extra}</div>\n      ) : null}\n    </div>\n  );\n}\n\nPageHeader.displayName = 'PageHeader';\n\nexport default PageHeader;\n"],"mappings":";;;;;;;;;AAUA,MAAM,aAAa;CACjB,UAAU,OAAO;CACjB,YAAY,OAAO;CACnB,QAAQ;AACV;AACA,MAAM,mBAAmB;CACvB,OAAO,OAAO;CACd,YAAY;CACZ,eAAe;AACjB;AACA,SAAS,WAAW,EAClB,QACA,UACA,aACA,MACA,SACkB;CAClB,MAAM,QAAQ,UAAU;CACxB,OAAO,qBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,OAAO,IAAI;EAAjC,UAAA,CACH,qBAACA,mBAAD;GAAS,OAAO,OAAO,eAAe,KAAA;GAAW,KAAK;GAAI,YAAY,QAAQ,IAAI;GAAlF,UAAA,CACG,MACD,qBAACA,mBAAD;IAAS,KAAK;IAAd,UAAA,CACE,oBAAC,MAAD;KAAM,IAAG;KAAK,OAAO;KAAY,QAAO;KACrC,UAAA;IACG,CAAA,GACL,cAAc,oBAAC,MAAD;KAAM,OAAO;KAAmB,UAAA;IAAkB,CAAA,IAAI,IAC9D;GACF,CAAA,CAAA;EACR,CAAA,GAAA,QAAQ,oBAAC,OAAD;GAAK,GAAI,WAAW,OAAO,SAAS,0BAA0B;GAAI,UAAA;EAAW,CAAA,IAAI,IACvF;;AACT;AACA,WAAW,cAAc"}

package/es/dashboard/PageHeader/style.mjs

@@ -1,46 +1,24 @@
-import { createStaticStyles } from "antd-style";
 //#region src/dashboard/PageHeader/style.ts
-const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
-	actions: css`
-    display: flex;
-    flex: none;
-    gap: 8px;
-    align-items: center;
-
-    ${responsive.mobile} {
-      inline-size: 100%;
-
-      button,
-      a {
-        min-block-size: 44px;
-      }
-    }
-  `,
-	description: css`
-    max-inline-size: 68ch;
-    line-height: 1.6;
-    color: ${cssVar.colorTextSecondary};
-  `,
-	root: css`
-    display: flex;
-    gap: 16px;
-    align-items: flex-start;
-    justify-content: space-between;
-
-    inline-size: 100%;
-    min-inline-size: 0;
-
-    ${responsive.mobile} {
-      flex-direction: column;
-      align-items: stretch;
-    }
-  `,
-	title: css`
-    margin: 0;
-    font-size: ${cssVar.fontSizeHeading3};
-    line-height: ${cssVar.lineHeightHeading3};
-  `
-}));
+const styles = {
+	actions: {
+		kUk6DE: "lb1okw0bk",
+		kOIVth: "lb167g77z",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		kzqmXN: "lbc4a2h3",
+		$$css: true
+	},
+	root: {
+		kOIVth: "lbou54vl",
+		kGNEyG: "lb1cy8zhl lb1p67ayb",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbrhvytc",
+		kzqmXN: "lbh8yej3",
+		kjj79g: "lb1qughib",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PageHeader/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  actions: css`\n    display: flex;\n    flex: none;\n    gap: 8px;\n    align-items: center;\n\n    ${responsive.mobile} {\n      inline-size: 100%;\n\n      button,\n      a {\n        min-block-size: 44px;\n      }\n    }\n  `,\n  description: css`\n    max-inline-size: 68ch;\n    line-height: 1.6;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  root: css`\n    display: flex;\n    gap: 16px;\n    align-items: flex-start;\n    justify-content: space-between;\n\n    inline-size: 100%;\n    min-inline-size: 0;\n\n    ${responsive.mobile} {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  `,\n  title: css`\n    margin: 0;\n    font-size: ${cssVar.fontSizeHeading3};\n    line-height: ${cssVar.lineHeightHeading3};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,SAAS,GAAG;;;;;;MAMR,WAAW,OAAO;;;;;;;;;CAStB,aAAa,GAAG;;;aAGL,OAAO,mBAAmB;;CAErC,MAAM,GAAG;;;;;;;;;MASL,WAAW,OAAO;;;;;CAKtB,OAAO,GAAG;;iBAEK,OAAO,iBAAiB;mBACtB,OAAO,mBAAmB;;AAE7C,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PageHeader/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { media } from '@/styles/stylex/media.stylex';\n\nexport const styles = stylex.create({\n  actions: {\n    flex: 'none',\n    gap: 8,\n    alignItems: 'center',\n    display: 'flex',\n    inlineSize: { default: null, [media.mobile]: '100%' },\n  },\n  root: {\n    gap: 16,\n    alignItems: { default: 'flex-start', [media.mobile]: 'stretch' },\n    display: 'flex',\n    flexDirection: { default: null, [media.mobile]: 'column' },\n    inlineSize: '100%',\n    justifyContent: 'space-between',\n    minInlineSize: 0,\n  },\n});\n"],"mappings":";AAGA,MAAa,SAAS;CACpB,SAAS;EACP,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;AACF"}

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

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 //#region src/dashboard/PageHeader/type.d.ts
-interface PageHeaderProps {
+export interface PageHeaderProps {
   /** Actions at the end of the header. Falls back to `children`. */
   action?: ReactNode;
   children?: ReactNode;
@@ -10,5 +10,4 @@ interface PageHeaderProps {
   title: ReactNode;
 }
 //#endregion
-export { PageHeaderProps };
 //# sourceMappingURL=type.d.mts.map