@agentscope-ai/design 1.0.7 → 1.0.9

package/lib/components/commonComponents/CodeBlock/index.style.js

@@ -1,72 +1,26 @@
-var _excluded = ["css"];
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import createStyle from "../../../libs/createStyle";
-export function getIndexStyleData(params) {
-  var _ref;
-  var antPrefix = params.antPrefix,
-    sparkPrefix = params.sparkPrefix;
-  return _ref = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref, ".".concat(sparkPrefix, "-code-block"), {
-    width: '100%'
-  }), '.cm-theme', {
-    border: 'none !important',
-    borderRadius: '0 !important'
-  }), '.cm-gutters', {
-    borderRight: 'none !important',
-    backgroundColor: "var(--".concat(antPrefix, "-color-bg-base) !important")
-  }), '.cm-editor', {
-    backgroundColor: "var(--".concat(antPrefix, "-color-bg-base) !important")
-  }), '.cm-gutterElement:not(:first-child)', _defineProperty({
-    color: "var(--".concat(antPrefix, "-color-text-tertiary)"),
-    height: '24px !important',
-    lineHeight: '24px !important',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }, "span:not([title*=\"Unfold line\"])", {
-    height: '30px !important'
-  })), '.cm-line', {
-    height: '24px !important',
-    lineHeight: '24px !important'
-  }), '.cm-lineNumbers .cm-gutterElement', {
-    padding: '0px 4px 0px 12px !important'
-  }), '.cm-activeLine, .cm-activeLineGutter', {
-    backgroundColor: "var(--".concat(antPrefix, "-color-fill-secondary) !important")
-  }), '.cm-button', {
-    backgroundImage: 'none !important',
-    background: "var(--".concat(antPrefix, "-color-bg-base) !important"),
-    border: "1px solid var(--".concat(antPrefix, "-color-border-secondary) !important"),
-    borderRadius: '4px !important',
-    '&:hover': {
-      color: "var(--".concat(antPrefix, "-color-text-secondary)"),
-      cursor: 'pointer'
-    }
-  }), '.cm-search', {
-    background: "var(--".concat(antPrefix, "-color-fill-secondary) !important")
-  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref, '.cm-panel.cm-search label', {
-    display: 'inline-flex',
-    alignItems: 'center'
-  }), '.cm-panel.cm-search [name=close]', {
-    right: '8px !important',
-    background: 'none !important',
-    fontSize: '16px !important',
-    color: "var(--".concat(antPrefix, "-color-text-tertiary) !important")
-  }), '.cm-textfield', {
-    borderRadius: '4px'
-  }), '.cm-panel.cm-search input[type=checkbox]', {
-    border: "1px solid var(--".concat(antPrefix, "-color-border-secondary) !important")
-  }), '.cm-focused', {
-    outline: 'none !important'
-  });
-}
-var useIndexStyle = createStyle(function (_ref2) {
-  var css = _ref2.css,
-    params = _objectWithoutProperties(_ref2, _excluded);
-  var result = css(getIndexStyleData(params));
-  return result;
-});
-export default useIndexStyle;
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import createGlobalStyle from "../../../libs/newCreateStyle";
+export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-code-block {\n  width: 100%;\n}\n\n.cm-theme {\n  border: none !important;\n  border-radius: 0 !important;\n}\n\n.cm-gutters {\n  border-right: none !important;\n  background-color: var(--", "-color-bg-base) !important;\n}\n\n.cm-editor {\n  background-color: var(--", "-color-bg-base) !important;\n}\n\n.cm-gutterElement:not(:first-child) {\n  color: var(--", "-color-text-tertiary);\n  height: 24px !important;\n  line-height: 24px !important;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  \n  span:not([title*=\"Unfold line\"]) {\n    height: 30px !important;\n  }\n}\n\n.cm-line {\n  height: 24px !important;\n  line-height: 24px !important;\n}\n\n.cm-lineNumbers .cm-gutterElement {\n  padding: 0px 4px 0px 12px !important;\n}\n\n.cm-activeLine,\n.cm-activeLineGutter {\n  background-color: var(--", "-color-fill-secondary) !important;\n}\n\n.cm-button {\n  background-image: none !important;\n  background: var(--", "-color-bg-base) !important;\n  border: 1px solid var(--", "-color-border-secondary) !important;\n  border-radius: 4px !important;\n  \n  &:hover {\n    color: var(--", "-color-text-secondary);\n    cursor: pointer;\n  }\n}\n\n.cm-search {\n  background: var(--", "-color-fill-secondary) !important;\n}\n\n.cm-panel.cm-search label {\n  display: inline-flex;\n  align-items: center;\n}\n\n.cm-panel.cm-search [name=close] {\n  right: 8px !important;\n  background: none !important;\n  font-size: 16px !important;\n  color: var(--", "-color-text-tertiary) !important;\n}\n\n.cm-textfield {\n  border-radius: 4px;\n}\n\n.cm-panel.cm-search input[type=checkbox] {\n  border: 1px solid var(--", "-color-border-secondary) !important;\n}\n\n.cm-focused {\n  outline: none !important;\n}\n"])), function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+});

package/lib/components/commonComponents/Collapse/index.js

@@ -5,10 +5,14 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { Collapse as AntdCollapse } from 'antd';
-import useIndexStyle from "./index.style";
+import { useStyle } from "./index.style";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var Collapse = function Collapse(props) {
-  useIndexStyle();
-  return /*#__PURE__*/_jsx(AntdCollapse, _objectSpread({}, props));
+  var Style = useStyle();
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsx(AntdCollapse, _objectSpread({}, props))]
+  });
 };
 export default Collapse;

package/lib/components/commonComponents/Collapse/index.style.d.ts

@@ -1,57 +1 @@
-export declare function getIndexStyleData(params: any): {
-    [x: string]: {
-        [x: string]: string | {
-            color: string;
-            backgroundColor: string;
-            borderTop: string;
-            borderBottom?: undefined;
-        } | {
-            [x: string]: string | {
-                [x: string]: string | number | {
-                    width: number;
-                    height: number;
-                    padding: number;
-                    justifyContent: string;
-                    marginRight: number;
-                    fontSize?: undefined;
-                    display?: undefined;
-                    alignItems?: undefined;
-                    marginLeft?: undefined;
-                } | {
-                    fontSize: number;
-                    width?: undefined;
-                    height?: undefined;
-                    padding?: undefined;
-                    justifyContent?: undefined;
-                    marginRight?: undefined;
-                    display?: undefined;
-                    alignItems?: undefined;
-                    marginLeft?: undefined;
-                } | {
-                    height: number;
-                    display: string;
-                    alignItems: string;
-                    marginLeft: number;
-                    width?: undefined;
-                    padding?: undefined;
-                    justifyContent?: undefined;
-                    marginRight?: undefined;
-                    fontSize?: undefined;
-                };
-                color: string;
-                fontWeight: number;
-                lineHeight: string;
-                alignItems: string;
-            };
-            borderBottom: string;
-            color?: undefined;
-            backgroundColor?: undefined;
-            borderTop?: undefined;
-        };
-        backgroundColor: string;
-        border: string;
-        borderRadius: string;
-    };
-};
-declare const useIndexStyle: (props?: {}) => import("../../../config").CommonConfig;
-export default useIndexStyle;
+export declare const useStyle: () => () => import("react/jsx-runtime").JSX.Element;

package/lib/components/commonComponents/Collapse/index.style.js

@@ -1,47 +1,34 @@
-var _excluded = ["css"];
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import createStyle from "../../../libs/createStyle";
-export function getIndexStyleData(params) {
-  var antPrefix = params.antPrefix;
-  return _defineProperty({}, ".".concat(antPrefix, "-collapse"), _defineProperty(_defineProperty({
-    backgroundColor: "var(--".concat(antPrefix, "-color-fill-tertiary)"),
-    border: "1px solid var(--".concat(antPrefix, "-color-border-secondary)"),
-    borderRadius: "var(--".concat(antPrefix, "-border-radius)")
-  }, ".".concat(antPrefix, "-collapse-content"), {
-    color: "var(--".concat(antPrefix, "-color-text)"),
-    backgroundColor: "var(--".concat(antPrefix, "-color-bg-base)"),
-    borderTop: "1px solid var(--".concat(antPrefix, "-color-border-secondary)")
-  }), "& > .".concat(antPrefix, "-collapse-item"), _defineProperty({
-    borderBottom: "1px solid var(--".concat(antPrefix, "-color-border-secondary)")
-  }, "& > .".concat(antPrefix, "-collapse-header"), _defineProperty(_defineProperty(_defineProperty({
-    color: "var(--".concat(antPrefix, "-color-text)"),
-    fontWeight: 500,
-    lineHeight: '24px',
-    alignItems: 'center'
-  }, ".".concat(antPrefix, "-collapse-expand-icon"), {
-    width: 32,
-    height: 32,
-    padding: 0,
-    justifyContent: 'center',
-    marginRight: 8
-  }), ".".concat(antPrefix, "-collapse-arrow"), {
-    fontSize: 15
-  }), ".".concat(antPrefix, "-collapse-extra"), {
-    height: 32,
-    display: 'flex',
-    alignItems: 'center',
-    marginLeft: 8
-  }))));
-}
-var useIndexStyle = createStyle(function (_ref2) {
-  var css = _ref2.css,
-    params = _objectWithoutProperties(_ref2, _excluded);
-  var result = css(getIndexStyleData(params));
-  return result;
-});
-export default useIndexStyle;
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import createGlobalStyle from "../../../libs/newCreateStyle";
+export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-collapse {\n  background-color: var(--", "-color-fill-tertiary);\n  border: 1px solid var(--", "-color-border-secondary);\n  border-radius: var(--", "-border-radius);\n  \n  .", "-collapse-content {\n    color: var(--", "-color-text);\n    background-color: var(--", "-color-bg-base);\n    border-top: 1px solid var(--", "-color-border-secondary);\n  }\n  \n  & > .", "-collapse-item {\n    border-bottom: 1px solid var(--", "-color-border-secondary);\n    \n    & > .", "-collapse-header {\n      color: var(--", "-color-text);\n      font-weight: 500;\n      line-height: 24px;\n      align-items: center;\n      \n      .", "-collapse-expand-icon {\n        width: 32px;\n        height: 32px;\n        padding: 0;\n        justify-content: center;\n        margin-right: 8px;\n      }\n      \n      .", "-collapse-arrow {\n        font-size: 15px;\n      }\n      \n      .", "-collapse-extra {\n        height: 32px;\n        display: flex;\n        align-items: center;\n        margin-left: 8px;\n      }\n    }\n  }\n}\n"])), function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+});

package/lib/components/commonComponents/CollapsePanel/index.d.ts

@@ -33,6 +33,16 @@ export interface CollapsePanelProps {
      * @default false
      */
     defaultExpanded?: boolean;
+    /**
+     * @description 语义化的classNames
+     * @descriptionEn Semantic classNames
+     */
+    classNames?: Partial<Record<'wrapper' | 'header' | 'content', string>>;
+    /**
+     * @description 语义化的styles
+     * @descriptionEn Semantic styles
+     */
+    styles?: Partial<Record<'wrapper' | 'header' | 'content', React.CSSProperties>>;
 }
 declare const CollapsePanel: (props: CollapsePanelProps) => import("react/jsx-runtime").JSX.Element;
 export default CollapsePanel;

package/lib/components/commonComponents/CollapsePanel/index.js

@@ -1,3 +1,9 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -6,11 +12,14 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { getCommonConfig } from "../../..";
 import { SparkDownLine, SparkUpLine } from '@agentscope-ai/icons';
+import classNames from 'classnames';
 import { useEffect, useRef, useState } from 'react';
-import useIndexStyle from "./index.style";
+import { useStyle } from "./index.style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 var CollapsePanel = function CollapsePanel(props) {
+  var _props$classNames, _props$styles, _props$classNames2, _props$styles2, _props$classNames3, _props$styles3;
   var collapsedHeight = props.collapsedHeight,
     expandedHeight = props.expandedHeight,
     _props$title = props.title,
@@ -35,10 +44,7 @@ var CollapsePanel = function CollapsePanel(props) {
   var commonConfig = getCommonConfig();
   var sparkPrefix = commonConfig.sparkPrefix,
     antPrefix = commonConfig.antPrefix;
-  useIndexStyle({
-    sparkPrefix: sparkPrefix,
-    antPrefix: antPrefix
-  });
+  var Style = useStyle();
   useEffect(function () {
     if (contentRef.current) {
       if (isExpanded && expandedHeight) {
@@ -71,47 +77,53 @@ var CollapsePanel = function CollapsePanel(props) {
   var handleMouseLeave = function handleMouseLeave() {
     setIsHovered(true);
   };
-  return /*#__PURE__*/_jsxs("div", {
-    className: "".concat(sparkPrefix, "-collapse-panel ").concat(!isExpanded && expandOnPanelClick ? 'collapsible' : ''),
-    onClick: expandOnPanelClick ? handlePanelClick : undefined,
-    onMouseEnter: expandOnPanelClick ? handleMouseEnter : undefined,
-    onMouseLeave: expandOnPanelClick ? handleMouseLeave : undefined,
-    children: [/*#__PURE__*/_jsxs("div", {
-      className: "".concat(sparkPrefix, "-collapse-panel-header"),
-      onClick: handleHeaderClick,
-      children: [/*#__PURE__*/_jsxs("span", {
-        className: "".concat(sparkPrefix, "-collapse-panel-title"),
-        children: [title, expandedHeight && /*#__PURE__*/_jsxs("div", {
-          className: "".concat(sparkPrefix, "-collapse-panel-icon-wrapper"),
-          children: [!isExpanded && isHovered && expandOnPanelClick && /*#__PURE__*/_jsx(SparkDownLine, {
-            style: {
-              fontSize: '18px'
-            }
-          }), isExpanded && isHovered && expandOnPanelClick && /*#__PURE__*/_jsx(SparkUpLine, {
-            style: {
-              fontSize: '18px'
-            }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsxs("div", {
+      className: classNames("".concat(sparkPrefix, "-collapse-panel"), {
+        collapsible: !isExpanded && expandOnPanelClick
+      }, (_props$classNames = props.classNames) === null || _props$classNames === void 0 ? void 0 : _props$classNames.wrapper),
+      style: (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.wrapper,
+      onClick: expandOnPanelClick ? handlePanelClick : undefined,
+      onMouseEnter: expandOnPanelClick ? handleMouseEnter : undefined,
+      onMouseLeave: expandOnPanelClick ? handleMouseLeave : undefined,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: classNames("".concat(sparkPrefix, "-collapse-panel-header"), (_props$classNames2 = props.classNames) === null || _props$classNames2 === void 0 ? void 0 : _props$classNames2.header),
+        style: (_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.header,
+        onClick: handleHeaderClick,
+        children: [/*#__PURE__*/_jsxs("span", {
+          className: "".concat(sparkPrefix, "-collapse-panel-title"),
+          children: [title, expandedHeight && /*#__PURE__*/_jsxs("div", {
+            className: "".concat(sparkPrefix, "-collapse-panel-icon-wrapper"),
+            children: [!isExpanded && isHovered && expandOnPanelClick && /*#__PURE__*/_jsx(SparkDownLine, {
+              style: {
+                fontSize: '18px'
+              }
+            }), isExpanded && isHovered && expandOnPanelClick && /*#__PURE__*/_jsx(SparkUpLine, {
+              style: {
+                fontSize: '18px'
+              }
+            })]
           })]
+        }), extra && /*#__PURE__*/_jsx("div", {
+          className: "".concat(sparkPrefix, "-collapse-panel-extra"),
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            e.preventDefault();
+          },
+          children: extra
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: classNames("".concat(sparkPrefix, "-collapse-panel-content"), _defineProperty({}, "".concat(sparkPrefix, "-collapse-panel-expanded"), isExpanded), (_props$classNames3 = props.classNames) === null || _props$classNames3 === void 0 ? void 0 : _props$classNames3.content),
+        style: _objectSpread({
+          height: contentHeight
+        }, (_props$styles3 = props.styles) === null || _props$styles3 === void 0 ? void 0 : _props$styles3.content),
+        children: [/*#__PURE__*/_jsx("div", {
+          ref: contentRef,
+          className: "".concat("".concat(sparkPrefix, "-collapse-panel-contentWrapper"), " ", isExpanded && expandedHeight ? 'scrollable' : ''),
+          children: children
+        }), !isExpanded && expandedHeight && /*#__PURE__*/_jsx("div", {
+          className: "".concat(sparkPrefix, "-collapse-panel-mask")
         })]
-      }), extra && /*#__PURE__*/_jsx("div", {
-        className: "".concat(sparkPrefix, "-collapse-panel-extra"),
-        onClick: function onClick(e) {
-          e.stopPropagation();
-          e.preventDefault();
-        },
-        children: extra
-      })]
-    }), /*#__PURE__*/_jsxs("div", {
-      className: "".concat("".concat(sparkPrefix, "-collapse-panel-content"), " ", isExpanded ? "".concat(sparkPrefix, "-collapse-panel-expanded") : ''),
-      style: {
-        height: contentHeight
-      },
-      children: [/*#__PURE__*/_jsx("div", {
-        ref: contentRef,
-        className: "".concat("".concat(sparkPrefix, "-collapse-panel-contentWrapper"), " ", isExpanded && expandedHeight ? 'scrollable' : ''),
-        children: children
-      }), !isExpanded && expandedHeight && /*#__PURE__*/_jsx("div", {
-        className: "".concat(sparkPrefix, "-collapse-panel-mask")
       })]
     })]
   });