musae 1.2.0 → 1.3.0

package/dist/components/card/headline.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var React = require('react');
+var className = require('@aiszlab/relax/class-name');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var context = require('./context.cjs');
+var styles = require('./styles.cjs');
+
+/**
+ * @zh Title + Subhead 的 4px 紧凑分组。
+ * @en 4px-gap group for Title + Subhead.
+ */
+var CardHeadline = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className$1 = _ref.className,
+    style = _ref.style,
+    children = _ref.children;
+  var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
+  var headlineStyled = stylex.props(styles.default.headline["default"]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: className.stringify(classNames.headline, className$1, headlineStyled.className),
+    style: _objectSpread(_objectSpread({}, headlineStyled.style), style)
+  }, children);
+});
+
+exports.default = CardHeadline;

package/dist/components/card/headline.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode, CSSProperties } from "react";
+import React from "react";
+/**
+ * @zh Title + Subhead 的紧凑分组(4px gap)
+ * @en Compact group for Title + Subhead (4px gap)
+ */
+interface CardHeadlineProps {
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+/**
+ * @zh Title + Subhead 的 4px 紧凑分组。
+ * @en 4px-gap group for Title + Subhead.
+ */
+declare const CardHeadline: React.ForwardRefExoticComponent<CardHeadlineProps & React.RefAttributes<HTMLDivElement>>;
+export default CardHeadline;
+export type { CardHeadlineProps };

package/dist/components/card/headline.mjs

@@ -0,0 +1,26 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import React, { forwardRef } from 'react';
+import { stringify } from '@aiszlab/relax/class-name';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { CLASS_NAMES } from './context.mjs';
+import styles from './styles.mjs';
+
+/**
+ * @zh Title + Subhead 的 4px 紧凑分组。
+ * @en 4px-gap group for Title + Subhead.
+ */
+var CardHeadline = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    children = _ref.children;
+  var classNames = useClassNames(CLASS_NAMES);
+  var headlineStyled = props(styles.headline["default"]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: stringify(classNames.headline, className, headlineStyled.className),
+    style: _objectSpread(_objectSpread({}, headlineStyled.style), style)
+  }, children);
+});
+
+export { CardHeadline as default };

package/dist/components/card/index.d.ts

@@ -1,3 +1,3 @@
 import Card from "./card";
 export { Card };
-export type { CardProps, CardVariant } from "../../types/card";
+export type { CardProps, CardVariant, CardLayout } from "../../types/card";

package/dist/components/card/media.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var className = require('@aiszlab/relax/class-name');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var context = require('./context.cjs');
+var styles = require('./styles.cjs');
+
+var _excluded = ["className", "style", "src", "alt", "children"];
+/**
+ * @zh 卡片媒体区,用于展示图片或自定义内容。Horizontal 布局下宽度固定 80px 并带三边 border。
+ *
+ * @en Card media area for displaying images or custom content. In horizontal
+ * layout, it is fixed 80px wide with a 3-side border.
+ */
+var CardMedia = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className$1 = _ref.className,
+    style = _ref.style,
+    src = _ref.src,
+    alt = _ref.alt,
+    children = _ref.children,
+    imgProps = _objectWithoutProperties(_ref, _excluded);
+  var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
+  var _useCardContext = context.useCardContext(),
+    layout = _useCardContext.layout;
+  var mediaStyled = stylex.props(styles.default.media["default"], styles.default.media[layout]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: className.stringify(classNames.media, className$1, mediaStyled.className),
+    style: _objectSpread(_objectSpread({}, mediaStyled.style), style)
+  }, children || src && (/*#__PURE__*/React.createElement("img", _objectSpread(_objectSpread({
+    alt: alt,
+    src: src
+  }, imgProps), {}, {
+    style: {
+      position: "absolute",
+      inset: 0,
+      width: "100%",
+      height: "100%",
+      objectFit: "cover"
+    }
+  }))));
+});
+
+exports.default = CardMedia;

package/dist/components/card/media.d.ts

@@ -0,0 +1,42 @@
+import type { CSSProperties, ImgHTMLAttributes, ReactNode } from "react";
+import React from "react";
+/**
+ * @zh 卡片媒体区属性
+ * @en Card media props
+ */
+interface CardMediaProps extends ImgHTMLAttributes<HTMLImageElement> {
+    /**
+     * @zh 自定义类名
+     * @en Custom class name
+     */
+    className?: string;
+    /**
+     * @zh 自定义样式
+     * @en Custom style
+     */
+    style?: CSSProperties;
+    /**
+     * @zh 图片地址
+     * @en Image source
+     */
+    src?: string;
+    /**
+     * @zh 图片替代文本
+     * @en Image alt text
+     */
+    alt?: string;
+    /**
+     * @zh 自定义内容(覆盖默认图片渲染)
+     * @en Custom content (overrides default image)
+     */
+    children?: ReactNode;
+}
+/**
+ * @zh 卡片媒体区,用于展示图片或自定义内容。Horizontal 布局下宽度固定 80px 并带三边 border。
+ *
+ * @en Card media area for displaying images or custom content. In horizontal
+ * layout, it is fixed 80px wide with a 3-side border.
+ */
+declare const CardMedia: React.ForwardRefExoticComponent<CardMediaProps & React.RefAttributes<HTMLDivElement>>;
+export default CardMedia;
+export type { CardMediaProps };

package/dist/components/card/media.mjs

@@ -0,0 +1,46 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React, { forwardRef } from 'react';
+import { stringify } from '@aiszlab/relax/class-name';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { CLASS_NAMES, useCardContext } from './context.mjs';
+import styles from './styles.mjs';
+
+var _excluded = ["className", "style", "src", "alt", "children"];
+/**
+ * @zh 卡片媒体区,用于展示图片或自定义内容。Horizontal 布局下宽度固定 80px 并带三边 border。
+ *
+ * @en Card media area for displaying images or custom content. In horizontal
+ * layout, it is fixed 80px wide with a 3-side border.
+ */
+var CardMedia = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    src = _ref.src,
+    alt = _ref.alt,
+    children = _ref.children,
+    imgProps = _objectWithoutProperties(_ref, _excluded);
+  var classNames = useClassNames(CLASS_NAMES);
+  var _useCardContext = useCardContext(),
+    layout = _useCardContext.layout;
+  var mediaStyled = props(styles.media["default"], styles.media[layout]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: stringify(classNames.media, className, mediaStyled.className),
+    style: _objectSpread(_objectSpread({}, mediaStyled.style), style)
+  }, children || src && (/*#__PURE__*/React.createElement("img", _objectSpread(_objectSpread({
+    alt: alt,
+    src: src
+  }, imgProps), {}, {
+    style: {
+      position: "absolute",
+      inset: 0,
+      width: "100%",
+      height: "100%",
+      objectFit: "cover"
+    }
+  }))));
+});
+
+export { CardMedia as default };

package/dist/components/card/styles.cjs

@@ -2,6 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+/**
+ * @zh Card 组件样式定义,每个 namespace 独立 $create 调用
+ */
 var styles = {
   card: {
     "default": {
@@ -9,7 +12,7 @@ var styles = {
       kVQacm: "musaex-b3r6kr",
       kaIpWk: "musaex-1k532am",
       kB7OPa: "musaex-9f619",
-      k1ekBW: "musaex-1ijdko7",
+      k1ekBW: "musaex-f1bglv",
       kIyJzY: "musaex-1dg6om",
       k5JduY: "musaex-100rkj9",
       kwXMNM: "musaex-1j6awrg",
@@ -17,31 +20,68 @@ var styles = {
       kloYau: "musaex-2q1x1w",
       kRicXK: "musaex-1ywzrc5",
       kPNhGg: "musaex-l3kudx",
+      ks3ayO: "musaex-86grr",
+      $$css: true
+    },
+    stacked: {
+      k1xSpc: "musaex-78zum5",
+      kXwgrk: "musaex-dt5ytf",
+      $$css: true
+    },
+    horizontal: {
+      k1xSpc: "musaex-78zum5",
+      kXwgrk: "musaex-1q0g3np",
+      kGNEyG: "musaex-1qjc9v5",
       $$css: true
     },
     interactive: {
       kkrTdU: "musaex-1ypdohk",
       $$css: true
     },
+    disabled: {
+      kkrTdU: "musaex-1h6gzvc",
+      $$css: true
+    },
     outlined: {
       kWkggS: "musaex-k7eln3",
       kMzoRj: "musaex-1iyq3db",
       ksu8eU: "musaex-1y0btm7",
       kVAM5u: "musaex-axmpxa",
-      ks3ayO: "musaex-yhc2n1",
+      kGVxlE: "musaex-1gnnqk1",
       $$css: true
     },
     elevated: {
       kWkggS: "musaex-1eai1fy",
-      kMzoRj: "musaex-k59kd",
-      kGVxlE: "musaex-bapks6",
-      ks3ayO: "musaex-yhc2n1",
+      kMzoRj: "musaex-c342km",
+      kGVxlE: "musaex-1tw10uf",
       $$css: true
     },
     filled: {
       kWkggS: "musaex-1mu49yl",
-      kMzoRj: "musaex-k59kd",
-      ks3ayO: "musaex-yhc2n1",
+      kMzoRj: "musaex-c342km",
+      kGVxlE: "musaex-1gnnqk1",
+      $$css: true
+    }
+  },
+  elevationState: {
+    outlinedHover: {
+      kGVxlE: "musaex-1tw10uf",
+      $$css: true
+    },
+    outlinedDragged: {
+      kGVxlE: "musaex-15krw24",
+      $$css: true
+    },
+    elevatedHover: {
+      kGVxlE: "musaex-vkh6yx",
+      $$css: true
+    },
+    elevatedDragged: {
+      kGVxlE: "musaex-1ltemje",
+      $$css: true
+    },
+    filledDragged: {
+      kGVxlE: "musaex-15krw24",
       $$css: true
     }
   },
@@ -54,7 +94,7 @@ var styles = {
       kUltx: "musaex-177puvd",
       $$css: true
     },
-    active: {
+    press: {
       kAcZsS: "musaex-6g40nx",
       $$css: true
     }
@@ -63,12 +103,21 @@ var styles = {
     "default": {
       k1xSpc: "musaex-78zum5",
       kGNEyG: "musaex-6s0dn4",
-      kg3NbH: "musaex-1v4gb6w",
-      k8WAf4: "musaex-s7sbuz",
-      kpe85a: "musaex-15ebt9c",
       kB7OPa: "musaex-9f619",
       kzqmXN: "musaex-92755x",
-      kAzted: "musaex-1qafhyn",
+      kmuXW: "musaex-2lah0s",
+      kZCmMZ: "musaex-1ox7qdy",
+      kwRFfy: "musaex-epcfto",
+      k8WAf4: "musaex-s7sbuz",
+      kOIVth: "musaex-g4b44g",
+      $$css: true
+    },
+    stacked: {
+      $$css: true
+    },
+    horizontal: {
+      kmVPX3: "musaex-1atb43h",
+      kUk6DE: "musaex-5mp9sv",
       $$css: true
     }
   },
@@ -115,15 +164,46 @@ var styles = {
       $$css: true
     }
   },
+  headerAction: {
+    "default": {
+      k1xSpc: "musaex-78zum5",
+      kGNEyG: "musaex-6s0dn4",
+      kjj79g: "musaex-l56j7k",
+      kzqmXN: "musaex-1useyqa",
+      kZKoxP: "musaex-sdox4t",
+      kmuXW: "musaex-2lah0s",
+      kSGwAc: "musaex-kh2ocl",
+      $$css: true
+    }
+  },
   media: {
     "default": {
       kVAEAm: "musaex-1n2onr6",
+      kVQacm: "musaex-b3r6kr",
+      $$css: true
+    },
+    stacked: {
       kzqmXN: "musaex-92755x",
       kUk6DE: "musaex-5mp9sv",
       kAzted: "musaex-2lwn1j",
-      kVQacm: "musaex-b3r6kr",
       $$css: true
-    }},
+    },
+    horizontal: {
+      kzqmXN: "musaex-1dmp6jm",
+      kZKoxP: "musaex-qg7gut",
+      kUk6DE: "musaex-3psx0u",
+      kEafiO: "musaex-uvson1",
+      kWqL5O: "musaex-a640vs",
+      kt9PQ7: "musaex-d1xpcx",
+      kPef9Z: "musaex-13fuv20",
+      kSWEuD: "musaex-32b0ac",
+      kfdmCh: "musaex-1q0q8m5",
+      kLZC3w: "musaex-6ogecl",
+      k26BEO: "musaex-imfbgf",
+      kL6WhQ: "musaex-quqrak",
+      $$css: true
+    }
+  },
   content: {
     "default": {
       k1xSpc: "musaex-78zum5",
@@ -135,6 +215,45 @@ var styles = {
       $$css: true
     }
   },
+  headline: {
+    "default": {
+      k1xSpc: "musaex-78zum5",
+      kXwgrk: "musaex-dt5ytf",
+      kOIVth: "musaex-15wobh7",
+      kzqmXN: "musaex-92755x",
+      $$css: true
+    }
+  },
+  title: {
+    "default": {
+      kGuDYH: "musaex-1j61zf2",
+      k63SB2: "musaex-o1l8bm",
+      kLWn49: "musaex-1o2sk6j",
+      kb6lSQ: "musaex-bac8wx",
+      kMwMTN: "musaex-1j14bxn",
+      $$css: true
+    }
+  },
+  subhead: {
+    "default": {
+      kGuDYH: "musaex-if65rj",
+      k63SB2: "musaex-o1l8bm",
+      kLWn49: "musaex-1fc57z9",
+      kb6lSQ: "musaex-f4yft",
+      kMwMTN: "musaex-bq1wot",
+      $$css: true
+    }
+  },
+  body: {
+    "default": {
+      kGuDYH: "musaex-if65rj",
+      k63SB2: "musaex-o1l8bm",
+      kLWn49: "musaex-1fc57z9",
+      kb6lSQ: "musaex-f4yft",
+      kMwMTN: "musaex-bq1wot",
+      $$css: true
+    }
+  },
   actions: {
     "default": {
       k1xSpc: "musaex-78zum5",

package/dist/components/card/styles.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @zh Card 组件样式定义,每个 namespace 独立 $create 调用
+ */
 declare const styles: {
     card: Readonly<{
         readonly default: Readonly<{
@@ -5,7 +8,7 @@ declare const styles: {
             readonly overflow: import("@stylexjs/stylex").StyleXClassNameFor<"overflow", "hidden">;
             readonly borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
             readonly boxSizing: import("@stylexjs/stylex").StyleXClassNameFor<"boxSizing", "border-box">;
-            readonly transitionProperty: import("@stylexjs/stylex").StyleXClassNameFor<"transitionProperty", "background-color, box-shadow, border-color">;
+            readonly transitionProperty: import("@stylexjs/stylex").StyleXClassNameFor<"transitionProperty", "box-shadow, background-color, border-color">;
             readonly transitionDuration: import("@stylexjs/stylex").StyleXClassNameFor<"transitionDuration", string>;
             readonly "::after": import("@stylexjs/stylex").StyleXClassNameFor<"::after", {
                 readonly content: "''";
@@ -14,34 +17,57 @@ declare const styles: {
                 readonly pointerEvents: "none";
                 readonly transitionProperty: "background-color";
                 readonly transitionDuration: import("@stylexjs/stylex").StyleXVar<string>;
+                readonly backgroundColor: "var(--card-state-layer, transparent)";
             }>;
         }>;
+        readonly stacked: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly flexDirection: import("@stylexjs/stylex").StyleXClassNameFor<"flexDirection", "column">;
+        }>;
+        readonly horizontal: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly flexDirection: import("@stylexjs/stylex").StyleXClassNameFor<"flexDirection", "row">;
+            readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "stretch">;
+        }>;
         readonly interactive: Readonly<{
             readonly cursor: import("@stylexjs/stylex").StyleXClassNameFor<"cursor", "pointer">;
         }>;
+        readonly disabled: Readonly<{
+            readonly cursor: import("@stylexjs/stylex").StyleXClassNameFor<"cursor", "not-allowed">;
+        }>;
         readonly outlined: Readonly<{
             readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-surface)">;
             readonly borderWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderWidth", string>;
             readonly borderStyle: import("@stylexjs/stylex").StyleXClassNameFor<"borderStyle", "solid">;
             readonly borderColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderColor", "var(--color-outline-variant)">;
-            readonly "::after": import("@stylexjs/stylex").StyleXClassNameFor<"::after", {
-                readonly backgroundColor: "transparent";
-            }>;
+            readonly boxShadow: import("@stylexjs/stylex").StyleXClassNameFor<"boxShadow", "none">;
         }>;
         readonly elevated: Readonly<{
             readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-surface-container-low)">;
-            readonly borderWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderWidth", string>;
+            readonly borderWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderWidth", 0>;
             readonly boxShadow: import("@stylexjs/stylex").StyleXClassNameFor<"boxShadow", string>;
-            readonly "::after": import("@stylexjs/stylex").StyleXClassNameFor<"::after", {
-                readonly backgroundColor: "transparent";
-            }>;
         }>;
         readonly filled: Readonly<{
             readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-surface-container-highest)">;
-            readonly borderWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderWidth", string>;
-            readonly "::after": import("@stylexjs/stylex").StyleXClassNameFor<"::after", {
-                readonly backgroundColor: "transparent";
-            }>;
+            readonly borderWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderWidth", 0>;
+            readonly boxShadow: import("@stylexjs/stylex").StyleXClassNameFor<"boxShadow", "none">;
+        }>;
+    }>;
+    elevationState: Readonly<{
+        readonly outlinedHover: Readonly<{
+            readonly boxShadow: import("@stylexjs/stylex").StyleXClassNameFor<"boxShadow", string>;
+        }>;
+        readonly outlinedDragged: Readonly<{
+            readonly boxShadow: import("@stylexjs/stylex").StyleXClassNameFor<"boxShadow", string>;
+        }>;
+        readonly elevatedHover: Readonly<{
+            readonly boxShadow: import("@stylexjs/stylex").StyleXClassNameFor<"boxShadow", string>;
+        }>;
+        readonly elevatedDragged: Readonly<{
+            readonly boxShadow: import("@stylexjs/stylex").StyleXClassNameFor<"boxShadow", string>;
+        }>;
+        readonly filledDragged: Readonly<{
+            readonly boxShadow: import("@stylexjs/stylex").StyleXClassNameFor<"boxShadow", string>;
         }>;
     }>;
     stateLayer: Readonly<{
@@ -57,7 +83,7 @@ declare const styles: {
                 readonly backgroundColor: "var(--color-state-layer-focus)";
             }>;
         }>;
-        readonly active: Readonly<{
+        readonly press: Readonly<{
             readonly ":active::after": import("@stylexjs/stylex").StyleXClassNameFor<":active::after", {
                 readonly backgroundColor: "var(--color-state-layer-press)";
             }>;
@@ -67,12 +93,18 @@ declare const styles: {
         readonly default: Readonly<{
             readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
             readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "center">;
-            readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
-            readonly paddingBlock: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBlock", string>;
-            readonly paddingRight: import("@stylexjs/stylex").StyleXClassNameFor<"paddingRight", string>;
             readonly boxSizing: import("@stylexjs/stylex").StyleXClassNameFor<"boxSizing", "border-box">;
             readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", string>;
-            readonly minHeight: import("@stylexjs/stylex").StyleXClassNameFor<"minHeight", "72px">;
+            readonly flexShrink: import("@stylexjs/stylex").StyleXClassNameFor<"flexShrink", 0>;
+            readonly paddingInlineStart: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInlineStart", string>;
+            readonly paddingInlineEnd: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInlineEnd", string>;
+            readonly paddingBlock: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBlock", string>;
+            readonly gap: import("@stylexjs/stylex").StyleXClassNameFor<"gap", string>;
+        }>;
+        readonly stacked: Readonly<{}>;
+        readonly horizontal: Readonly<{
+            readonly padding: import("@stylexjs/stylex").StyleXClassNameFor<"padding", string>;
+            readonly flex: import("@stylexjs/stylex").StyleXClassNameFor<"flex", "1 0 0">;
         }>;
     }>;
     headerContent: Readonly<{
@@ -93,8 +125,8 @@ declare const styles: {
             readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", string>;
             readonly minWidth: import("@stylexjs/stylex").StyleXClassNameFor<"minWidth", string>;
             readonly borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
-            readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-primary)">;
-            readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-on-primary)">;
+            readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-primary-container)">;
+            readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-on-primary-container)">;
             readonly fontSize: import("@stylexjs/stylex").StyleXClassNameFor<"fontSize", "16px">;
             readonly fontWeight: import("@stylexjs/stylex").StyleXClassNameFor<"fontWeight", 500>;
             readonly lineHeight: import("@stylexjs/stylex").StyleXClassNameFor<"lineHeight", "24px">;
@@ -133,20 +165,40 @@ declare const styles: {
             readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-on-surface-variant)">;
         }>;
     }>;
+    headerAction: Readonly<{
+        readonly default: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "center">;
+            readonly justifyContent: import("@stylexjs/stylex").StyleXClassNameFor<"justifyContent", "center">;
+            readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", "48px">;
+            readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", "48px">;
+            readonly flexShrink: import("@stylexjs/stylex").StyleXClassNameFor<"flexShrink", 0>;
+            readonly alignSelf: import("@stylexjs/stylex").StyleXClassNameFor<"alignSelf", "stretch">;
+        }>;
+    }>;
     media: Readonly<{
         readonly default: Readonly<{
             readonly position: import("@stylexjs/stylex").StyleXClassNameFor<"position", "relative">;
+            readonly overflow: import("@stylexjs/stylex").StyleXClassNameFor<"overflow", "hidden">;
+        }>;
+        readonly stacked: Readonly<{
             readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", string>;
             readonly flex: import("@stylexjs/stylex").StyleXClassNameFor<"flex", "1 0 0">;
             readonly minHeight: import("@stylexjs/stylex").StyleXClassNameFor<"minHeight", 0>;
-            readonly overflow: import("@stylexjs/stylex").StyleXClassNameFor<"overflow", "hidden">;
         }>;
-        readonly image: Readonly<{
-            readonly position: import("@stylexjs/stylex").StyleXClassNameFor<"position", "absolute">;
-            readonly inset: import("@stylexjs/stylex").StyleXClassNameFor<"inset", 0>;
-            readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", string>;
+        readonly horizontal: Readonly<{
+            readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", "80px">;
             readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", string>;
-            readonly objectFit: import("@stylexjs/stylex").StyleXClassNameFor<"objectFit", "cover">;
+            readonly flex: import("@stylexjs/stylex").StyleXClassNameFor<"flex", "0 0 auto">;
+            readonly borderTopWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopWidth", string>;
+            readonly borderRightWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderRightWidth", string>;
+            readonly borderBottomWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderBottomWidth", string>;
+            readonly borderTopStyle: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopStyle", "solid">;
+            readonly borderRightStyle: import("@stylexjs/stylex").StyleXClassNameFor<"borderRightStyle", "solid">;
+            readonly borderBottomStyle: import("@stylexjs/stylex").StyleXClassNameFor<"borderBottomStyle", "solid">;
+            readonly borderTopColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopColor", "var(--color-outline-variant)">;
+            readonly borderRightColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderRightColor", "var(--color-outline-variant)">;
+            readonly borderBottomColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderBottomColor", "var(--color-outline-variant)">;
         }>;
     }>;
     content: Readonly<{
@@ -159,7 +211,15 @@ declare const styles: {
             readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", string>;
         }>;
     }>;
-    contentTitle: Readonly<{
+    headline: Readonly<{
+        readonly default: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly flexDirection: import("@stylexjs/stylex").StyleXClassNameFor<"flexDirection", "column">;
+            readonly gap: import("@stylexjs/stylex").StyleXClassNameFor<"gap", string>;
+            readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", string>;
+        }>;
+    }>;
+    title: Readonly<{
         readonly default: Readonly<{
             readonly fontSize: import("@stylexjs/stylex").StyleXClassNameFor<"fontSize", "16px">;
             readonly fontWeight: import("@stylexjs/stylex").StyleXClassNameFor<"fontWeight", 400>;
@@ -168,7 +228,7 @@ declare const styles: {
             readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-on-surface)">;
         }>;
     }>;
-    contentSubhead: Readonly<{
+    subhead: Readonly<{
         readonly default: Readonly<{
             readonly fontSize: import("@stylexjs/stylex").StyleXClassNameFor<"fontSize", "14px">;
             readonly fontWeight: import("@stylexjs/stylex").StyleXClassNameFor<"fontWeight", 400>;
@@ -177,7 +237,7 @@ declare const styles: {
             readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-on-surface-variant)">;
         }>;
     }>;
-    contentBody: Readonly<{
+    body: Readonly<{
         readonly default: Readonly<{
             readonly fontSize: import("@stylexjs/stylex").StyleXClassNameFor<"fontSize", "14px">;
             readonly fontWeight: import("@stylexjs/stylex").StyleXClassNameFor<"fontWeight", 400>;