musae 1.2.0 → 1.3.1-beta.1

package/dist/components/side-sheet/side-sheet.cjs

@@ -0,0 +1,140 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var sheet = require('../sheet/sheet.cjs');
+var divider = require('../divider/divider.cjs');
+var button = require('../button/button.cjs');
+var iconButton = require('../icon-button/icon-button.cjs');
+var useClosable = require('../../hooks/use-closable.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
+var useLocale = require('../../locale/use-locale.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var className = require('@aiszlab/relax/class-name');
+var theme = require('../theme/theme.cjs');
+var context = require('./context.cjs');
+var styles = require('./styles.cjs');
+var arrowBack = require('../icon/icons/navigation/arrow-back.cjs');
+
+/**
+ * @zh SideSheet 组件。Material Design 3 侧边栏：承载补充内容或操作的面板，
+ * 支持从屏幕四边（left/right/top/bottom）滑入。`modal` 类型基于共享的 Sheet
+ * 基础组件构建（遮罩层 + 滑入动画），mobile 下全屏展示；`standard` 类型内嵌
+ * 在布局中展示（无遮罩层，停靠边缘带分割线）。
+ * @en SideSheet component. A Material Design 3 side sheet: a surface for
+ * supplementary content or actions, sliding in from any screen edge
+ * (left/right/top/bottom). The `modal` type is built on the shared Sheet base
+ * component (scrim + slide animation) and goes fullscreen on mobile;
+ * the `standard` type renders inline in the layout (no scrim, with a divider
+ * on the anchored edge).
+ */
+var SideSheet = function SideSheet(_ref) {
+  var open = _ref.open,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "modal" : _ref$type,
+    title = _ref.title,
+    onBack = _ref.onBack,
+    onConfirm = _ref.onConfirm,
+    _ref$closable = _ref.closable,
+    closable = _ref$closable === void 0 ? true : _ref$closable,
+    onClose = _ref.onClose,
+    actions = _ref.actions,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 400 : _ref$size,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "right" : _ref$placement,
+    className$1 = _ref.className,
+    style = _ref.style,
+    children = _ref.children;
+  var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
+  var themeColorVars = useThemeColorVars.useThemeColorVars(["surface", "surface-container-low", "on-surface-variant", "outline-variant"]);
+  var _useLocale = useLocale.useLocale("drawer"),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
+  var _useClosable = useClosable.useClosable({
+      closable: closable,
+      onClose: onClose
+    }),
+    closer = _useClosable.closer;
+  var styled = {
+    panel: stylex.props(styles.styles.panel["default"]),
+    standard: stylex.props(styles.styles.standard["default"], styles.styles.standard[placement]),
+    header: stylex.props(styles.styles.header["default"], onBack ? styles.styles.header.withBack : styles.styles.header.withTitle),
+    title: stylex.props(theme.$title.large, styles.styles.title["default"]),
+    content: stylex.props(styles.styles.content["default"]),
+    actions: stylex.props(styles.styles.actions["default"]),
+    actionsRow: stylex.props(styles.styles.actions.row)
+  };
+  /**
+   * @zh 头部栏：可选的返回按钮、标题和关闭按钮。
+   * 三者都不存在时不渲染头部，避免空置的占位空间。
+   * @en Header bar: optional back button, headline, and closer.
+   * Not rendered when all three are absent, avoiding empty placeholder space.
+   */
+  var hasHeader = !!title || !!onBack || !!onConfirm || !!closer;
+  var header = hasHeader ? (/*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.header, styled.header.className),
+    style: styled.header.style
+  }, onBack && (/*#__PURE__*/React.createElement(iconButton.default, {
+    variant: "text",
+    onClick: onBack
+  }, /*#__PURE__*/React.createElement(arrowBack.default, null))), /*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.title, styled.title.className),
+    style: styled.title.style
+  }, title), onConfirm && /*#__PURE__*/React.createElement(button.Button, {
+    onClick: onConfirm
+  }, locale.confirm), closer)) : null;
+  /**
+   * @zh 底部操作区：分割线 + 操作按钮行。
+   * @en Footer actions: a divider above the actions row.
+   */
+  var footer = actions ? (/*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.actions, styled.actions.className),
+    style: styled.actions.style
+  }, /*#__PURE__*/React.createElement(divider.default, {
+    margin: 0
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styled.actionsRow.className,
+    style: styled.actionsRow.style
+  }, actions))) : null;
+  /**
+   * @zh 标准类型：内嵌在布局中展示，无遮罩层，停靠边缘带分割线。
+   * @en Standard type: rendered inline in the layout, without a scrim,
+   * with a divider on the anchored edge.
+   */
+  if (type === "standard") {
+    if (!open) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      className: className.stringify(classNames.sideSheet, className$1, styled.standard.className),
+      style: _objectSpread(_objectSpread(_objectSpread({}, styled.standard.style), themeColorVars), {}, {
+        "--size": typeof size === "number" ? "".concat(size, "px") : size
+      }, style)
+    }, header, /*#__PURE__*/React.createElement("div", {
+      className: className.stringify(classNames.content, styled.content.className),
+      style: styled.content.style
+    }, children), footer);
+  }
+  /**
+   * @zh 模态类型：基于共享的 Sheet 基础组件，带遮罩层和滑入动画。
+   * @en Modal type: built on the shared Sheet base component, with a scrim
+   * and slide animation.
+   */
+  return /*#__PURE__*/React.createElement(sheet.default, {
+    visible: open,
+    placement: placement,
+    size: size,
+    closable: closable,
+    onClose: onClose,
+    className: classNames.sideSheet,
+    header: header,
+    footer: footer,
+    panelClassName: styled.panel.className,
+    panelStyle: _objectSpread(_objectSpread({}, themeColorVars), styled.panel.style)
+  }, children);
+};
+
+exports.default = SideSheet;

package/dist/components/side-sheet/side-sheet.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { SideSheetProps } from "../../types/side-sheet";
+/**
+ * @zh SideSheet 组件。Material Design 3 侧边栏：承载补充内容或操作的面板，
+ * 支持从屏幕四边（left/right/top/bottom）滑入。`modal` 类型基于共享的 Sheet
+ * 基础组件构建（遮罩层 + 滑入动画），mobile 下全屏展示；`standard` 类型内嵌
+ * 在布局中展示（无遮罩层，停靠边缘带分割线）。
+ * @en SideSheet component. A Material Design 3 side sheet: a surface for
+ * supplementary content or actions, sliding in from any screen edge
+ * (left/right/top/bottom). The `modal` type is built on the shared Sheet base
+ * component (scrim + slide animation) and goes fullscreen on mobile;
+ * the `standard` type renders inline in the layout (no scrim, with a divider
+ * on the anchored edge).
+ */
+declare const SideSheet: ({ open, type, title, onBack, onConfirm, closable, onClose, actions, size, placement, className, style, children, }: SideSheetProps) => React.JSX.Element | null;
+export default SideSheet;

package/dist/components/side-sheet/side-sheet.mjs

@@ -0,0 +1,136 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React from 'react';
+import Sheet from '../sheet/sheet.mjs';
+import Divider from '../divider/divider.mjs';
+import { Button } from '../button/button.mjs';
+import IconButton from '../icon-button/icon-button.mjs';
+import { useClosable } from '../../hooks/use-closable.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
+import { useLocale } from '../../locale/use-locale.mjs';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { stringify } from '@aiszlab/relax/class-name';
+import { $title } from '../theme/theme.mjs';
+import { CLASS_NAMES } from './context.mjs';
+import { styles } from './styles.mjs';
+import IconArrowBack from '../icon/icons/navigation/arrow-back.mjs';
+
+/**
+ * @zh SideSheet 组件。Material Design 3 侧边栏：承载补充内容或操作的面板，
+ * 支持从屏幕四边（left/right/top/bottom）滑入。`modal` 类型基于共享的 Sheet
+ * 基础组件构建（遮罩层 + 滑入动画），mobile 下全屏展示；`standard` 类型内嵌
+ * 在布局中展示（无遮罩层，停靠边缘带分割线）。
+ * @en SideSheet component. A Material Design 3 side sheet: a surface for
+ * supplementary content or actions, sliding in from any screen edge
+ * (left/right/top/bottom). The `modal` type is built on the shared Sheet base
+ * component (scrim + slide animation) and goes fullscreen on mobile;
+ * the `standard` type renders inline in the layout (no scrim, with a divider
+ * on the anchored edge).
+ */
+var SideSheet = function SideSheet(_ref) {
+  var open = _ref.open,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "modal" : _ref$type,
+    title = _ref.title,
+    onBack = _ref.onBack,
+    onConfirm = _ref.onConfirm,
+    _ref$closable = _ref.closable,
+    closable = _ref$closable === void 0 ? true : _ref$closable,
+    onClose = _ref.onClose,
+    actions = _ref.actions,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 400 : _ref$size,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "right" : _ref$placement,
+    className = _ref.className,
+    style = _ref.style,
+    children = _ref.children;
+  var classNames = useClassNames(CLASS_NAMES);
+  var themeColorVars = useThemeColorVars(["surface", "surface-container-low", "on-surface-variant", "outline-variant"]);
+  var _useLocale = useLocale("drawer"),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
+  var _useClosable = useClosable({
+      closable: closable,
+      onClose: onClose
+    }),
+    closer = _useClosable.closer;
+  var styled = {
+    panel: props(styles.panel["default"]),
+    standard: props(styles.standard["default"], styles.standard[placement]),
+    header: props(styles.header["default"], onBack ? styles.header.withBack : styles.header.withTitle),
+    title: props($title.large, styles.title["default"]),
+    content: props(styles.content["default"]),
+    actions: props(styles.actions["default"]),
+    actionsRow: props(styles.actions.row)
+  };
+  /**
+   * @zh 头部栏：可选的返回按钮、标题和关闭按钮。
+   * 三者都不存在时不渲染头部，避免空置的占位空间。
+   * @en Header bar: optional back button, headline, and closer.
+   * Not rendered when all three are absent, avoiding empty placeholder space.
+   */
+  var hasHeader = !!title || !!onBack || !!onConfirm || !!closer;
+  var header = hasHeader ? (/*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.header, styled.header.className),
+    style: styled.header.style
+  }, onBack && (/*#__PURE__*/React.createElement(IconButton, {
+    variant: "text",
+    onClick: onBack
+  }, /*#__PURE__*/React.createElement(IconArrowBack, null))), /*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.title, styled.title.className),
+    style: styled.title.style
+  }, title), onConfirm && /*#__PURE__*/React.createElement(Button, {
+    onClick: onConfirm
+  }, locale.confirm), closer)) : null;
+  /**
+   * @zh 底部操作区：分割线 + 操作按钮行。
+   * @en Footer actions: a divider above the actions row.
+   */
+  var footer = actions ? (/*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.actions, styled.actions.className),
+    style: styled.actions.style
+  }, /*#__PURE__*/React.createElement(Divider, {
+    margin: 0
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styled.actionsRow.className,
+    style: styled.actionsRow.style
+  }, actions))) : null;
+  /**
+   * @zh 标准类型：内嵌在布局中展示，无遮罩层，停靠边缘带分割线。
+   * @en Standard type: rendered inline in the layout, without a scrim,
+   * with a divider on the anchored edge.
+   */
+  if (type === "standard") {
+    if (!open) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      className: stringify(classNames.sideSheet, className, styled.standard.className),
+      style: _objectSpread(_objectSpread(_objectSpread({}, styled.standard.style), themeColorVars), {}, {
+        "--size": typeof size === "number" ? "".concat(size, "px") : size
+      }, style)
+    }, header, /*#__PURE__*/React.createElement("div", {
+      className: stringify(classNames.content, styled.content.className),
+      style: styled.content.style
+    }, children), footer);
+  }
+  /**
+   * @zh 模态类型：基于共享的 Sheet 基础组件，带遮罩层和滑入动画。
+   * @en Modal type: built on the shared Sheet base component, with a scrim
+   * and slide animation.
+   */
+  return /*#__PURE__*/React.createElement(Sheet, {
+    visible: open,
+    placement: placement,
+    size: size,
+    closable: closable,
+    onClose: onClose,
+    className: classNames.sideSheet,
+    header: header,
+    footer: footer,
+    panelClassName: styled.panel.className,
+    panelStyle: _objectSpread(_objectSpread({}, themeColorVars), styled.panel.style)
+  }, children);
+};
+
+export { SideSheet as default };

package/dist/components/side-sheet/styles.cjs

@@ -0,0 +1,106 @@
+'use strict';
+
+var panel = {
+  "default": {
+    kWkggS: "musaex-1eai1fy",
+    kGO01o: "musaex-1oxn6w8",
+    $$css: true
+  }
+};
+var standard = {
+  "default": {
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-dt5ytf",
+    kzqmXN: "musaex-1fjlwjz",
+    kZKoxP: "musaex-qg7gut",
+    kmuXW: "musaex-2lah0s",
+    kWkggS: "musaex-k7eln3",
+    kGO01o: "musaex-1oxn6w8",
+    $$css: true
+  },
+  right: {
+    kZ1KPB: "musaex-6vwjc",
+    k4WBpm: "musaex-19ypqd9",
+    kaZRDh: "musaex-svd4c5",
+    $$css: true
+  },
+  left: {
+    kWqL5O: "musaex-a640vs",
+    kSWEuD: "musaex-32b0ac",
+    k26BEO: "musaex-imfbgf",
+    $$css: true
+  },
+  top: {
+    kt9PQ7: "musaex-d1xpcx",
+    kfdmCh: "musaex-1q0q8m5",
+    kL6WhQ: "musaex-quqrak",
+    $$css: true
+  },
+  bottom: {
+    kEafiO: "musaex-uvson1",
+    kPef9Z: "musaex-13fuv20",
+    kLZC3w: "musaex-6ogecl",
+    $$css: true
+  }
+};
+var header = {
+  "default": {
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-1cy8zhl",
+    kLKAdn: "musaex-h1u3e4",
+    kGO01o: "musaex-5ynjmo",
+    kwRFfy: "musaex-1max5gj",
+    $$css: true
+  },
+  withTitle: {
+    kZCmMZ: "musaex-150i2hq",
+    $$css: true
+  },
+  withBack: {
+    kZCmMZ: "musaex-1rl4tsp",
+    $$css: true
+  }
+};
+var content = {
+  "default": {
+    kUk6DE: "musaex-98rzlu",
+    kAzted: "musaex-2lwn1j",
+    kVQacm: "musaex-ysyzu8",
+    kZeWKH: "musaex-ish69e",
+    $$css: true
+  }
+};
+var title = {
+  "default": {
+    kUk6DE: "musaex-98rzlu",
+    k7Eaqz: "musaex-euugli",
+    kLKAdn: "musaex-h1u3e4",
+    kMwMTN: "musaex-bq1wot",
+    $$css: true
+  }
+};
+var actions = {
+  "default": {
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-dt5ytf",
+    $$css: true
+  },
+  row: {
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-6s0dn4",
+    kOIVth: "musaex-1wm2zkp",
+    kLKAdn: "musaex-1oop6c3",
+    kg3NbH: "musaex-1pyhihf",
+    $$css: true
+  }
+};
+var styles = {
+  panel: panel,
+  standard: standard,
+  header: header,
+  title: title,
+  content: content,
+  actions: actions
+};
+
+exports.styles = styles;

package/dist/components/side-sheet/styles.d.ts

@@ -0,0 +1,83 @@
+export declare const styles: {
+    panel: Readonly<{
+        readonly default: Readonly<{
+            readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-surface-container-low)">;
+            readonly paddingBottom: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBottom", string>;
+        }>;
+    }>;
+    standard: Readonly<{
+        readonly default: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly flexDirection: import("@stylexjs/stylex").StyleXClassNameFor<"flexDirection", "column">;
+            readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", "var(--size)">;
+            readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", string>;
+            readonly flexShrink: import("@stylexjs/stylex").StyleXClassNameFor<"flexShrink", 0>;
+            readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-surface)">;
+            readonly paddingBottom: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBottom", string>;
+        }>;
+        readonly right: Readonly<{
+            readonly borderLeftWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderLeftWidth", string>;
+            readonly borderLeftStyle: import("@stylexjs/stylex").StyleXClassNameFor<"borderLeftStyle", "solid">;
+            readonly borderLeftColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderLeftColor", "var(--color-outline-variant)">;
+        }>;
+        readonly left: Readonly<{
+            readonly borderRightWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderRightWidth", string>;
+            readonly borderRightStyle: import("@stylexjs/stylex").StyleXClassNameFor<"borderRightStyle", "solid">;
+            readonly borderRightColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderRightColor", "var(--color-outline-variant)">;
+        }>;
+        readonly top: Readonly<{
+            readonly borderBottomWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderBottomWidth", string>;
+            readonly borderBottomStyle: import("@stylexjs/stylex").StyleXClassNameFor<"borderBottomStyle", "solid">;
+            readonly borderBottomColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderBottomColor", "var(--color-outline-variant)">;
+        }>;
+        readonly bottom: Readonly<{
+            readonly borderTopWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopWidth", string>;
+            readonly borderTopStyle: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopStyle", "solid">;
+            readonly borderTopColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopColor", "var(--color-outline-variant)">;
+        }>;
+    }>;
+    header: Readonly<{
+        readonly default: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "flex-start">;
+            readonly paddingTop: import("@stylexjs/stylex").StyleXClassNameFor<"paddingTop", string>;
+            readonly paddingBottom: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBottom", string>;
+            readonly paddingInlineEnd: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInlineEnd", string>;
+        }>;
+        readonly withTitle: Readonly<{
+            readonly paddingInlineStart: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInlineStart", string>;
+        }>;
+        readonly withBack: Readonly<{
+            readonly paddingInlineStart: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInlineStart", string>;
+        }>;
+    }>;
+    title: Readonly<{
+        readonly default: Readonly<{
+            readonly flex: import("@stylexjs/stylex").StyleXClassNameFor<"flex", 1>;
+            readonly minWidth: import("@stylexjs/stylex").StyleXClassNameFor<"minWidth", 0>;
+            readonly paddingTop: import("@stylexjs/stylex").StyleXClassNameFor<"paddingTop", string>;
+            readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-on-surface-variant)">;
+        }>;
+    }>;
+    content: Readonly<{
+        readonly default: Readonly<{
+            readonly flex: import("@stylexjs/stylex").StyleXClassNameFor<"flex", 1>;
+            readonly minHeight: import("@stylexjs/stylex").StyleXClassNameFor<"minHeight", 0>;
+            readonly overflow: import("@stylexjs/stylex").StyleXClassNameFor<"overflow", "auto">;
+            readonly overscrollBehavior: import("@stylexjs/stylex").StyleXClassNameFor<"overscrollBehavior", "contain">;
+        }>;
+    }>;
+    actions: Readonly<{
+        readonly default: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly flexDirection: import("@stylexjs/stylex").StyleXClassNameFor<"flexDirection", "column">;
+        }>;
+        readonly row: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "center">;
+            readonly gap: import("@stylexjs/stylex").StyleXClassNameFor<"gap", string>;
+            readonly paddingTop: import("@stylexjs/stylex").StyleXClassNameFor<"paddingTop", string>;
+            readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
+        }>;
+    }>;
+};

package/dist/components/side-sheet/styles.mjs

@@ -0,0 +1,104 @@
+var panel = {
+  "default": {
+    kWkggS: "musaex-1eai1fy",
+    kGO01o: "musaex-1oxn6w8",
+    $$css: true
+  }
+};
+var standard = {
+  "default": {
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-dt5ytf",
+    kzqmXN: "musaex-1fjlwjz",
+    kZKoxP: "musaex-qg7gut",
+    kmuXW: "musaex-2lah0s",
+    kWkggS: "musaex-k7eln3",
+    kGO01o: "musaex-1oxn6w8",
+    $$css: true
+  },
+  right: {
+    kZ1KPB: "musaex-6vwjc",
+    k4WBpm: "musaex-19ypqd9",
+    kaZRDh: "musaex-svd4c5",
+    $$css: true
+  },
+  left: {
+    kWqL5O: "musaex-a640vs",
+    kSWEuD: "musaex-32b0ac",
+    k26BEO: "musaex-imfbgf",
+    $$css: true
+  },
+  top: {
+    kt9PQ7: "musaex-d1xpcx",
+    kfdmCh: "musaex-1q0q8m5",
+    kL6WhQ: "musaex-quqrak",
+    $$css: true
+  },
+  bottom: {
+    kEafiO: "musaex-uvson1",
+    kPef9Z: "musaex-13fuv20",
+    kLZC3w: "musaex-6ogecl",
+    $$css: true
+  }
+};
+var header = {
+  "default": {
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-1cy8zhl",
+    kLKAdn: "musaex-h1u3e4",
+    kGO01o: "musaex-5ynjmo",
+    kwRFfy: "musaex-1max5gj",
+    $$css: true
+  },
+  withTitle: {
+    kZCmMZ: "musaex-150i2hq",
+    $$css: true
+  },
+  withBack: {
+    kZCmMZ: "musaex-1rl4tsp",
+    $$css: true
+  }
+};
+var content = {
+  "default": {
+    kUk6DE: "musaex-98rzlu",
+    kAzted: "musaex-2lwn1j",
+    kVQacm: "musaex-ysyzu8",
+    kZeWKH: "musaex-ish69e",
+    $$css: true
+  }
+};
+var title = {
+  "default": {
+    kUk6DE: "musaex-98rzlu",
+    k7Eaqz: "musaex-euugli",
+    kLKAdn: "musaex-h1u3e4",
+    kMwMTN: "musaex-bq1wot",
+    $$css: true
+  }
+};
+var actions = {
+  "default": {
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-dt5ytf",
+    $$css: true
+  },
+  row: {
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-6s0dn4",
+    kOIVth: "musaex-1wm2zkp",
+    kLKAdn: "musaex-1oop6c3",
+    kg3NbH: "musaex-1pyhihf",
+    $$css: true
+  }
+};
+var styles = {
+  panel: panel,
+  standard: standard,
+  header: header,
+  title: title,
+  content: content,
+  actions: actions
+};
+
+export { styles };

package/dist/components/theme/theme.cjs

@@ -4,6 +4,29 @@
  * @description
  * typography - display
  */
+var $display = {
+  small: {
+    kGuDYH: "musaex-qozcyj",
+    k63SB2: "musaex-o1l8bm",
+    kLWn49: "musaex-bzal7z",
+    kb6lSQ: "musaex-1jcmgtk",
+    $$css: true
+  },
+  medium: {
+    kGuDYH: "musaex-ujqvrl",
+    k63SB2: "musaex-o1l8bm",
+    kLWn49: "musaex-5agonf",
+    kb6lSQ: "musaex-1jcmgtk",
+    $$css: true
+  },
+  large: {
+    kGuDYH: "musaex-8p9s6c",
+    k63SB2: "musaex-o1l8bm",
+    kLWn49: "musaex-1kke7aa",
+    kb6lSQ: "musaex-1i67g9q",
+    $$css: true
+  }
+};
 /**
  * @description
  * typography - headline
@@ -36,6 +59,13 @@ var $headline = {
  * typography - title
  */
 var $title = {
+  small: {
+    kGuDYH: "musaex-if65rj",
+    k63SB2: "musaex-o1l8bm",
+    kLWn49: "musaex-1fc57z9",
+    kb6lSQ: "musaex-19d5yem",
+    $$css: true
+  },
   medium: {
     kGuDYH: "musaex-1j61zf2",
     k63SB2: "musaex-o1l8bm",
@@ -117,6 +147,7 @@ var $scrollbar = {
 };
 
 exports.$body = $body;
+exports.$display = $display;
 exports.$headline = $headline;
 exports.$label = $label;
 exports.$scrollbar = $scrollbar;