@hi-ui/menu 5.0.0-experimental.1 → 5.0.0-experimental.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/lib/cjs/GroupMenu.js +36 -8
  3. package/lib/cjs/Menu.js +40 -9
  4. package/lib/cjs/MenuItem.js +53 -24
  5. package/lib/cjs/MenuSearch.js +72 -28
  6. package/lib/cjs/SideMenu.js +60 -10
  7. package/lib/cjs/styles/index.scss.js +1 -1
  8. package/lib/esm/GroupMenu.js +36 -8
  9. package/lib/esm/Menu.js +40 -9
  10. package/lib/esm/MenuItem.js +53 -24
  11. package/lib/esm/MenuSearch.js +73 -29
  12. package/lib/esm/SideMenu.js +60 -10
  13. package/lib/esm/styles/index.scss.js +1 -1
  14. package/lib/types/GroupMenu.d.ts +6 -1
  15. package/lib/types/Menu.d.ts +6 -1
  16. package/lib/types/MenuSearch.d.ts +8 -1
  17. package/lib/types/SideMenu.d.ts +6 -1
  18. package/lib/types/context.d.ts +6 -1
  19. package/package.json +16 -15
package/lib/cjs/SideMenu.js CHANGED
@@ -17,6 +17,8 @@ var tslib = require('tslib');
17
17
  var React = require('react');
18
18
  var classname = require('@hi-ui/classname');
19
19
  var env = require('@hi-ui/env');
20
+ var core = require('@hi-ui/core');
21
+ var useMergeSemantic = require('@hi-ui/use-merge-semantic');
20
22
  var Tooltip = require('@hi-ui/tooltip');
21
23
  var useLatest = require('@hi-ui/use-latest');
22
24
  var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
@@ -41,6 +43,9 @@ var SideMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
41
43
  _a$role = _a.role,
42
44
  role = _a$role === void 0 ? 'side-menu' : _a$role,
43
45
  className = _a.className,
46
+ style = _a.style,
47
+ classNamesProp = _a.classNames,
48
+ stylesProp = _a.styles,
44
49
  _a$defaultActiveId = _a.defaultActiveId,
45
50
  defaultActiveId = _a$defaultActiveId === void 0 ? null : _a$defaultActiveId,
46
51
  activeIdProp = _a.activeId,
@@ -51,8 +56,25 @@ var SideMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
51
56
  onClick = _a.onClick,
52
57
  onMouseEnter = _a.onMouseEnter,
53
58
  onMouseLeave = _a.onMouseLeave,
54
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "defaultActiveId", "activeId", "selectedId", "data", "mini", "childrenContainerRef", "onClick", "onMouseEnter", "onMouseLeave"]);
55
- var cls = classname.cx(prefixCls, className, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx));
59
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "defaultActiveId", "activeId", "selectedId", "data", "mini", "childrenContainerRef", "onClick", "onMouseEnter", "onMouseLeave"]);
60
+ var _useGlobalContext = core.useGlobalContext(),
61
+ sideMenuConfig = _useGlobalContext.sideMenu;
62
+ var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
63
+ classNamesList: [sideMenuConfig === null || sideMenuConfig === void 0 ? void 0 : sideMenuConfig.classNames, classNamesProp],
64
+ stylesList: [sideMenuConfig === null || sideMenuConfig === void 0 ? void 0 : sideMenuConfig.styles, stylesProp],
65
+ info: {
66
+ props: Object.assign(Object.assign({}, rest), {
67
+ data: data,
68
+ mini: mini,
69
+ defaultActiveId: defaultActiveId,
70
+ activeId: activeIdProp,
71
+ selectedId: selectedIdProp
72
+ })
73
+ }
74
+ }),
75
+ classNames = _useMergeSemantic.classNames,
76
+ styles = _useMergeSemantic.styles;
77
+ var cls = classname.cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx));
56
78
  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId, activeIdProp),
57
79
  activeId = _useUncontrolledState[0],
58
80
  tryChangeActiveId = _useUncontrolledState[1];
@@ -71,10 +93,13 @@ var SideMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
71
93
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
72
94
  ref: ref,
73
95
  role: role,
74
- className: cls
96
+ className: cls,
97
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
75
98
  }, rest), /*#__PURE__*/React__default["default"].createElement(Scrollbar__default["default"], {
76
99
  onlyScrollVisible: true,
77
- axes: "y"
100
+ axes: "y",
101
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.wrapper,
102
+ style: styles === null || styles === void 0 ? void 0 : styles.wrapper
78
103
  }, data.map(function (item) {
79
104
  var _cx2;
80
105
  var id = item.id,
@@ -82,16 +107,25 @@ var SideMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
82
107
  icon = item.icon;
83
108
  return /*#__PURE__*/React__default["default"].createElement("div", {
84
109
  key: id,
85
- className: classname.cx(prefixCls + "-item-wrapper"),
110
+ className: classname.cx(prefixCls + "-item-wrapper", classNames === null || classNames === void 0 ? void 0 : classNames.itemWrapper),
111
+ style: styles === null || styles === void 0 ? void 0 : styles.itemWrapper,
86
112
  onClick: function onClick(evt) {
87
113
  return handleClick(evt, id, item);
88
114
  },
89
115
  onMouseEnter: function onMouseEnter(evt) {
90
116
  var currentTarget = evt.currentTarget;
91
117
  var titleElement = currentTarget.querySelector("." + prefixCls + "-item__title");
118
+ if (!titleElement) {
119
+ handleMouseEnter(evt, id, item);
120
+ return;
121
+ }
92
122
  var scrollWidth = titleElement.scrollWidth,
93
- clientWidth = titleElement.clientWidth;
94
- if (scrollWidth > clientWidth) {
123
+ clientWidth = titleElement.clientWidth,
124
+ scrollHeight = titleElement.scrollHeight,
125
+ clientHeight = titleElement.clientHeight;
126
+ // 单行溢出：scrollWidth > clientWidth；多行（如 mini 2 行）溢出：scrollHeight > clientHeight
127
+ var isOverflow = scrollWidth > clientWidth || scrollHeight > clientHeight;
128
+ if (isOverflow) {
95
129
  Tooltip__default["default"].open(currentTarget, {
96
130
  key: "side-menu-tooltip-" + id,
97
131
  title: title,
@@ -106,11 +140,27 @@ var SideMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
106
140
  handleMouseLeave(evt, id, item);
107
141
  }
108
142
  }, /*#__PURE__*/React__default["default"].createElement("div", {
109
- className: classname.cx(prefixCls + "-item", (_cx2 = {}, _cx2[prefixCls + "-item--active"] = activeId === id, _cx2[prefixCls + "-item--mini"] = mini, _cx2[prefixCls + "-item--selected"] = selectedIdProp === id, _cx2))
143
+ className: classname.cx(prefixCls + "-item", (_cx2 = {}, _cx2[prefixCls + "-item--active"] = activeId === id, _cx2[prefixCls + "-item--mini"] = mini, _cx2[prefixCls + "-item--selected"] = selectedIdProp === id, _cx2), classNames === null || classNames === void 0 ? void 0 : classNames.item),
144
+ style: styles === null || styles === void 0 ? void 0 : styles.item
110
145
  }, /*#__PURE__*/React__default["default"].createElement("div", {
111
- className: classname.cx(prefixCls + "-item__icon")
146
+ className: classname.cx(prefixCls + "-item__icon", classNames === null || classNames === void 0 ? void 0 : classNames.itemIcon),
147
+ style: styles === null || styles === void 0 ? void 0 : styles.itemIcon
112
148
  }, icon), /*#__PURE__*/React__default["default"].createElement("div", {
113
- className: classname.cx(prefixCls + "-item__title")
149
+ className: classname.cx(prefixCls + "-item__title", classNames === null || classNames === void 0 ? void 0 : classNames.itemTitle),
150
+ style: styles === null || styles === void 0 ? void 0 : styles.itemTitle,
151
+ ref: function ref(el) {
152
+ if (el) {
153
+ if (mini) {
154
+ if (el.clientHeight > 28) {
155
+ el.style.marginBlockEnd = '-28px';
156
+ } else {
157
+ el.style.marginBlockEnd = '';
158
+ }
159
+ } else {
160
+ el.style.marginBlockEnd = '';
161
+ }
162
+ }
163
+ }
114
164
  }, title)));
115
165
  })));
116
166
  });
package/lib/cjs/styles/index.scss.js CHANGED
@@ -12,7 +12,7 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- var css_248z = ".hi-v5-menu-fat-menu {background-color: var(--hi-v5-color-static-white, #fff);margin: 0;font-size: var(--hi-v5-text-size-md, 0.875rem);padding: var(--hi-v5-spacing-4, 8px);display: -webkit-box;display: -ms-flexbox;display: flex;color: var(--hi-v5-color-gray-800, #1a1d26);border-radius: var(--hi-v5-border-radius-lg, 6px);-ms-flex-wrap: wrap;flex-wrap: wrap;}.hi-v5-menu-fat-menu__group:not(:last-of-type) {-webkit-margin-end: var(--hi-v5-spacing-18, 36px);margin-inline-end: var(--hi-v5-spacing-18, 36px);}.hi-v5-menu-fat-menu .hi-v5-menu-group-item {height: var(--hi-v5-height-10, 40px);margin: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-6, 12px);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-menu-fat-menu .hi-v5-menu-item {height: var(--hi-v5-height-10, 40px);margin: 0;border-radius: var(--hi-v5-border-radius-lg, 6px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);}.hi-v5-menu-fat-menu .hi-v5-menu-item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-menu-fat-menu .hi-v5-menu-item:not(.hi-v5-menu-item--active):hover {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu-fat-menu .hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-500, #babcc2);cursor: not-allowed;}.hi-v5-menu-fat-menu ul {padding: 0;margin: 0;}.hi-v5-menu-fat-menu ul li {list-style-type: none;}.hi-v5-menu-popmenu {background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-xl, 8px);margin: 0;font-size: var(--hi-v5-text-size-md, 0.875rem);padding: var(--hi-v5-spacing-4, 8px);color: var(--hi-v5-color-gray-800, #1a1d26);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-menu-popmenu .hi-v5-menu-item {margin: 0;}.hi-v5-menu-popmenu .hi-v5-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--active .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--active-p {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--expanded {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu-popmenu .hi-v5-menu-item__inner:not(.hi-v5-menu-item__inner--active):hover {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--disabled {color: var(--hi-v5-color-gray-500, #babcc2);cursor: not-allowed;}.hi-v5-menu-popmenu .hi-v5-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;-webkit-padding-end: var(--hi-v5-spacing-4, 8px);padding-inline-end: var(--hi-v5-spacing-4, 8px);}.hi-v5-menu-popmenu.hi-v5-menu--size-sm .hi-v5-menu-item__inner {height: var(--hi-v5-height-8, 32px);}.hi-v5-menu-popmenu.hi-v5-menu--size-md .hi-v5-menu-item__inner {height: var(--hi-v5-height-9, 36px);}.hi-v5-menu-popmenu.hi-v5-menu--size-lg .hi-v5-menu-item__inner {height: var(--hi-v5-height-10, 40px);}.hi-v5-menu {background-color: var(--hi-v5-color-static-white, #fff);color: var(--hi-v5-color-gray-800, #1a1d26);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-menu ul {margin: 0;padding: 0;}.hi-v5-menu-item {list-style: none;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-menu-item__icon {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-margin-end: var(--hi-v5-spacing-4, 8px);margin-inline-end: var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-lg, 1rem);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-menu-item__arrow {font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-menu-item__indent {display: inline-block;width: 24px;height: 100%;-ms-flex-negative: 0;flex-shrink: 0;}.hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-500, #babcc2);cursor: not-allowed;}.hi-v5-menu__wrapper {padding: 0;margin: 0;}.hi-v5-menu--horizontal {width: 100%;overflow: hidden;}.hi-v5-menu--horizontal .hi-v5-menu__wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;overflow: visible;width: -webkit-max-content;width: -moz-max-content;width: max-content;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-menu--horizontal .hi-v5-menu-item {padding: 0 var(--hi-v5-spacing-10, 20px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 56px;border: none;font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-menu--horizontal .hi-v5-menu-item__arrow {-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);}.hi-v5-menu--horizontal .hi-v5-menu-item:hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item:hover .hi-v5-menu-item__inner {-webkit-border-after: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-end: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active .hi-v5-menu-item__inner {-webkit-border-after: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-end: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active-p {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item__inner {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-border-after: 2px solid transparent;border-block-end: 2px solid transparent;}.hi-v5-menu--horizontal .hi-v5-menu-item__inner--expanded {-webkit-border-after: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-end: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;white-space: nowrap;max-width: none;}.hi-v5-menu--horizontal .hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-500, #babcc2);cursor: not-allowed;}.hi-v5-menu--horizontal .hi-v5-menu-item--disabled:hover .hi-v5-menu-item__inner {border-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-menu--horizontal .hi-v5-menu-item--disabled .hi-v5-menu-item__content {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-menu--vertical {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v5-spacing-4, 8px);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v5-menu--vertical .hi-v5-menu__wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto;}.hi-v5-menu--vertical.hi-v5-menu--mini {width: 56px;overflow-x: hidden;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini {-webkit-padding-start: var(--hi-v5-spacing-2, 4px);padding-inline-start: var(--hi-v5-spacing-2, 4px);-webkit-padding-end: var(--hi-v5-spacing-2, 4px);padding-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-menu--vertical.hi-v5-menu--popup .hi-v5-menu-item__inner--expanded {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu--vertical.hi-v5-menu--popup:not(.hi-v5-menu--mini) .hi-v5-menu__wrapper > .hi-v5-menu-item:last-child .hi-v5-menu-item__inner {-webkit-margin-after: 0;margin-block-end: 0;}.hi-v5-menu--vertical .hi-v5-menu__toggle {height: var(--hi-v5-height-10, 40px);line-height: var(--hi-v5-height-10, 40px);padding: 0 var(--hi-v5-spacing-6, 12px);cursor: pointer;border-radius: var(--hi-v5-border-radius-lg, 6px);color: var(--hi-v5-color-gray-600, #91959e);font-size: var(--hi-v5-text-size-lg, 1rem);-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));-webkit-transition-property: background-color;transition-property: background-color;}.hi-v5-menu--vertical .hi-v5-menu__toggle:hover {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu--vertical .hi-v5-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active-p {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner:not(.hi-v5-menu-item__inner--active):hover {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu--vertical .hi-v5-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-indent: 0.5px;}.hi-v5-menu--vertical .hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-500, #babcc2);cursor: not-allowed;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini {width: 60px;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini .hi-v5-menu-item__inner {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-sizing: border-box;box-sizing: border-box;width: 52px;height: 48px;padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-3, 6px) 0;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini .hi-v5-menu-item__inner .hi-v5-menu-item__icon {-webkit-margin-end: 0;margin-inline-end: 0;-webkit-margin-after: var(--hi-v5-spacing-1, 2px);margin-block-end: var(--hi-v5-spacing-1, 2px);display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini .hi-v5-menu-item__inner .hi-v5-menu-item__icon svg[class^=hi-v5-icon] {font-size: var(--hi-v5-text-size-xl, 1.125rem);}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini .hi-v5-menu-item__inner .hi-v5-menu-item__content {-webkit-transform: scale(0.5);transform: scale(0.5);width: 200%;font-size: calc(var(--hi-v5-text-size-xl, 1.125rem) + 2px);text-align: center;text-indent: 0;}.hi-v5-menu--vertical.hi-v5-menu--size-lg .hi-v5-menu-item__inner {height: var(--hi-v5-height-10, 40px);-webkit-margin-after: var(--hi-v5-spacing-4, 8px);margin-block-end: var(--hi-v5-spacing-4, 8px);}.hi-v5-menu--vertical.hi-v5-menu--size-md .hi-v5-menu-item__inner {height: var(--hi-v5-height-9, 36px);-webkit-margin-after: var(--hi-v5-spacing-2, 4px);margin-block-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-menu--vertical.hi-v5-menu--size-sm .hi-v5-menu-item__inner {height: var(--hi-v5-height-8, 32px);-webkit-margin-after: var(--hi-v5-spacing-1, 2px);margin-block-end: var(--hi-v5-spacing-1, 2px);}.hi-v5-sidebar-wrapper {position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;height: 100%;}.hi-v5-sidebar-wrapper:not(.hi-v5-sidebar-wrapper-showMenuArrow) .hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__arrow {display: none;}.hi-v5-sidebar-wrapper--showMenu .hi-v5-sidebar-menu-wrapper {-webkit-border-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-inline-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-sidebar-wrapper--showMenu .hi-v5-sidebar-toggle svg[class^=hi-v5-icon] {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v5-sidebar-wrapper:not(.hi-v5-sidebar-wrapper--collapsible) .hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__inner--expanded:hover {background-color: transparent;cursor: default;}.hi-v5-sidebar {-webkit-box-sizing: border-box;box-sizing: border-box;width: 64px;height: 100%;padding: var(--hi-v5-spacing-4, 8px) 0;overflow: auto;-webkit-border-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-inline-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);background-color: #fff;}.hi-v5-sidebar-list {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}.hi-v5-sidebar-item {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;margin: var(--hi-v5-spacing-6, 12px) var(--hi-v5-spacing-2, 4px) 0;padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-1, 2px);width: 52px;overflow: hidden;text-align: center;border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-sidebar-item:first-child {-webkit-margin-before: 0;margin-block-start: 0;}.hi-v5-sidebar-item:hover {cursor: pointer;}.hi-v5-sidebar-item:not(.hi-v5-sidebar-item--active):hover {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-sidebar-item--active {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-sidebar-item--active .hi-v5-sidebar-item__icon, .hi-v5-sidebar-item--active .hi-v5-sidebar-item__title {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-sidebar-item__icon {height: 20px;color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-sidebar-item__icon svg[class^=hi-v5-icon] {width: 20px;height: 20px;}.hi-v5-sidebar-item__title {font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-sidebar-menu-wrapper {width: 0;-webkit-border-end: none;border-inline-end: none;overflow: hidden;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item .hi-v5-menu-item__inner {height: var(--hi-v5-height-8, 32px);-webkit-margin-after: 0;margin-block-end: 0;padding: 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item .hi-v5-menu-item__inner--hasIcon + div .hi-v5-menu-submenu .hi-v5-menu-item__indent {width: 20px;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__icon {color: var(--hi-v5-color-gray-700, #60636b);-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__indent {width: 14px;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__content {font-weight: 550;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__inner--active-p {color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-submenu .hi-v5-menu-item__inner .hi-v5-menu-item__content {font-size: var(--hi-v5-text-size-sm, 0.75rem);font-weight: var(--hi-v5-text-weight-normal, 400);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu__wrapper > .hi-v5-menu-item {-webkit-margin-before: var(--hi-v5-spacing-4, 8px);margin-block-start: var(--hi-v5-spacing-4, 8px);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu__wrapper > .hi-v5-menu-item:first-child {-webkit-margin-before: 0;margin-block-start: 0;}.hi-v5-sidebar-toggle {-webkit-box-sizing: border-box;box-sizing: border-box;position: absolute;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 12px;height: 60px;inset-inline-end: -11px;inset-block-start: 50%;-webkit-transform: translate3d(0, -50%, 0);transform: translate3d(0, -50%, 0);border-start-end-radius: 16px 8px;border-end-end-radius: 16px 8px;border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);-webkit-border-start: none;border-inline-start: none;cursor: pointer;color: var(--hi-v5-color-gray-700, #60636b);background-color: #fff;}.hi-v5-sidebar-toggle svg[class^=hi-v5-icon] {-webkit-margin-start: -4px;margin-inline-start: -4px;}.hi-v5-menu-search {min-width: 360px;border-radius: var(--hi-v5-border-radius-xl, 8px);overflow: hidden;background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-menu-search__input-wrapper {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-8, 16px) 0 calc(var(--hi-v5-spacing-2, 4px) + 1px);height: var(--hi-v5-height-12, 48px);}.hi-v5-menu-search--open .hi-v5-menu-search__input-wrapper {border-end-start-radius: 0;border-end-end-radius: 0;}.hi-v5-menu-search__input .hi-v5-input__inner:hover {background-color: transparent !important;}.hi-v5-menu-search__input-prefix {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-menu-search__input-clear {font-size: var(--hi-v5-text-size-sm, 0.75rem);}.hi-v5-menu-search__close {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;height: var(--hi-v5-height-4, 16px);-webkit-padding-start: var(--hi-v5-spacing-5, 10px);padding-inline-start: var(--hi-v5-spacing-5, 10px);-webkit-border-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-inline-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-menu-search__content {-webkit-box-sizing: border-box;box-sizing: border-box;display: none;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v5-spacing-4, 8px);max-height: 550px;-webkit-border-before: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #edeff2);border-block-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu-search__content--visible {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-menu-search__header {padding: 0 var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);font-weight: var(--hi-v5-text-weight-medium, 500);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-menu-search__header-count {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu-search__list {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow-y: auto;position: relative;outline: none;}.hi-v5-menu-search__list:focus {outline: none;}.hi-v5-menu-search__list-item {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;height: var(--hi-v5-height-10, 40px);padding: calc(var(--hi-v5-spacing-4, 8px) + 1px) var(--hi-v5-spacing-4, 8px);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-menu-search__list-item__title {font-size: var(--hi-v5-text-size-md, 0.875rem);color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-menu-search__list-item--selected, .hi-v5-menu-search__list-item:hover {cursor: pointer;background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu-search__empty {padding: calc(var(--hi-v5-spacing-2, 4px) + 1px) var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-menu-search__footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-8, 16px);background-color: #f5f7fa;}.hi-v5-menu-search__footer-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-margin-end: var(--hi-v5-spacing-8, 16px);margin-inline-end: var(--hi-v5-spacing-8, 16px);font-size: var(--hi-v5-text-size-sm, 0.75rem);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-menu-search__footer-item__icon {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;gap: var(--hi-v5-spacing-1, 2px);-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);padding: 0 var(--hi-v5-spacing-2, 4px);height: var(--hi-v5-height-5, 20px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-radius: var(--hi-v5-border-radius-md, 4px);}.hi-v5-menu-search__picker-overlay .hi-v5-menu-search__picker-container {min-width: 360px;border-start-start-radius: 0;border-start-end-radius: 0;}.hi-v5-menu-search__picker-overlay .hi-v5-menu-search__picker-panel {border-top: none;border-start-start-radius: 0;border-start-end-radius: 0;}.hi-v5-menu-search__picker-overlay .hi-v5-menu-search__picker-body {max-height: 544px;}.hi-v5-menu-search__picker-overlay .hi-v5-menu-search__picker-footer {-webkit-box-shadow: none;box-shadow: none;background-color: #f5f7fa;}.hi-v5-group-menu {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 100%;padding: var(--hi-v5-spacing-4, 8px) 0;}.hi-v5-group-menu-item:not(:first-child) {-webkit-margin-before: var(--hi-v5-spacing-4, 8px);margin-block-start: var(--hi-v5-spacing-4, 8px);}.hi-v5-group-menu-item__content {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: var(--hi-v5-height-8, 32px);padding: 0 var(--hi-v5-spacing-4, 8px);margin: 0 var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-800, rgba(26, 29, 38, 0.8));}.hi-v5-group-menu-item:not(.hi-v5-group-menu-item--parent):not(.hi-v5-group-menu-item--disabled) {cursor: pointer;}.hi-v5-group-menu-item:not(.hi-v5-group-menu-item--parent):not(.hi-v5-group-menu-item--disabled):hover .hi-v5-group-menu-item__content {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-group-menu-item:not(.hi-v5-group-menu-item--parent):not(.hi-v5-group-menu-item--disabled).hi-v5-group-menu-item--active > .hi-v5-group-menu-item__content {font-weight: var(--hi-v5-text-weight-medium, 500);color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-100, var(--hi-v5-color-brandblue-100, #e5ecff));}.hi-v5-group-menu-item:not(.hi-v5-group-menu-item--parent):not(.hi-v5-group-menu-item--disabled).hi-v5-group-menu-item--active:hover > .hi-v5-group-menu-item__content {background-color: var(--hi-v5-color-primary-100, var(--hi-v5-color-brandblue-100, #e5ecff));}.hi-v5-group-menu-item--disabled > .hi-v5-group-menu-item__content {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-group-menu-item--empty > .hi-v5-group-menu-item__content {display: none;}.hi-v5-group-menu-item__icon {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-margin-end: var(--hi-v5-spacing-4, 8px);margin-inline-end: var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-group-menu-parent-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-group-menu-parent-item > .hi-v5-group-menu-item__content {height: var(--hi-v5-height-7, 28px);font-weight: var(--hi-v5-text-weight-medium, 500);color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-group-menu-parent-item > .hi-v5-group-menu-item__content .hi-v5-group-menu-item__title {font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-group-menu-parent-item:not(:first-child) > .hi-v5-group-menu-item__content {-webkit-margin-before: var(--hi-v5-spacing-12, 24px);margin-block-start: var(--hi-v5-spacing-12, 24px);}.hi-v5-group-menu-parent-item + .hi-v5-group-menu-item {-webkit-margin-before: var(--hi-v5-spacing-12, 24px);margin-block-start: var(--hi-v5-spacing-12, 24px);}.hi-v5-side-menu {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v5-spacing-2, 4px) 0;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v5-side-menu-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: var(--hi-v5-height-8, 32px);padding: 0 var(--hi-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-800, #1a1d26);border-radius: var(--hi-v5-border-radius-lg, 6px);cursor: pointer;position: relative;}.hi-v5-side-menu-item:hover, .hi-v5-side-menu-item--selected {background-color: rgba(124, 135, 166, 0.15);}.hi-v5-side-menu-item-wrapper {padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-4, 8px);}.hi-v5-side-menu-item--active {font-weight: var(--hi-v5-text-weight-medium, 500);color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-side-menu-item--active:hover {background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-side-menu-item--active .hi-v5-side-menu-item__icon,.hi-v5-side-menu-item--active .hi-v5-side-menu-item__title {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-side-menu-item__icon {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-margin-end: var(--hi-v5-spacing-4, 8px);margin-inline-end: var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-lg, 1rem);color: #7c87a6;}.hi-v5-side-menu-item__title {min-width: 1px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v5-side-menu-item--mini {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-3, 6px) 0;width: 52px;height: 48px;color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-side-menu-item--mini .hi-v5-side-menu-item__icon {-webkit-margin-end: 0;margin-inline-end: 0;font-size: var(--hi-v5-text-size-xl, 1.125rem);}.hi-v5-side-menu-item--mini .hi-v5-side-menu-item__title {width: 200%;font-size: calc(var(--hi-v5-text-size-xl, 1.125rem) + 2px);text-align: center;text-indent: 0;-webkit-transform: scale(0.5);transform: scale(0.5);}.hi-v5-side-menu--mini .hi-v5-side-menu-item-wrapper {padding: var(--hi-v5-spacing-2, 4px);}.hi-v5-side-menu .hi-v5-scrollbar__wrapper {width: 100%;}";
15
+ var css_248z = ".hi-v5-menu-fat-menu {background-color: var(--hi-v5-color-static-white, #fff);margin: 0;font-size: var(--hi-v5-text-size-md, 0.875rem);padding: var(--hi-v5-spacing-4, 8px);display: -webkit-box;display: -ms-flexbox;display: flex;color: var(--hi-v5-color-gray-800, #1a1d26);border-radius: var(--hi-v5-border-radius-lg, 6px);-ms-flex-wrap: wrap;flex-wrap: wrap;}.hi-v5-menu-fat-menu__group:not(:last-of-type) {-webkit-margin-end: var(--hi-v5-spacing-18, 36px);margin-inline-end: var(--hi-v5-spacing-18, 36px);}.hi-v5-menu-fat-menu .hi-v5-menu-group-item {height: var(--hi-v5-height-10, 40px);margin: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-6, 12px);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-menu-fat-menu .hi-v5-menu-item {height: var(--hi-v5-height-10, 40px);margin: 0;border-radius: var(--hi-v5-border-radius-lg, 6px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);}.hi-v5-menu-fat-menu .hi-v5-menu-item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-menu-fat-menu .hi-v5-menu-item:not(.hi-v5-menu-item--active):hover {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu-fat-menu .hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-500, #babcc2);cursor: not-allowed;}.hi-v5-menu-fat-menu ul {padding: 0;margin: 0;}.hi-v5-menu-fat-menu ul li {list-style-type: none;}.hi-v5-menu-popmenu {background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-xl, 8px);margin: 0;font-size: var(--hi-v5-text-size-md, 0.875rem);padding: var(--hi-v5-spacing-4, 8px);color: var(--hi-v5-color-gray-800, #1a1d26);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-menu-popmenu .hi-v5-menu-item {margin: 0;}.hi-v5-menu-popmenu .hi-v5-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--active .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--active-p {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--expanded {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu-popmenu .hi-v5-menu-item__inner:not(.hi-v5-menu-item__inner--active):hover {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--disabled {color: var(--hi-v5-color-gray-500, #babcc2);cursor: not-allowed;}.hi-v5-menu-popmenu .hi-v5-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;-webkit-padding-end: var(--hi-v5-spacing-4, 8px);padding-inline-end: var(--hi-v5-spacing-4, 8px);}.hi-v5-menu-popmenu.hi-v5-menu--size-sm .hi-v5-menu-item__inner {height: var(--hi-v5-height-8, 32px);}.hi-v5-menu-popmenu.hi-v5-menu--size-md .hi-v5-menu-item__inner {height: var(--hi-v5-height-9, 36px);}.hi-v5-menu-popmenu.hi-v5-menu--size-lg .hi-v5-menu-item__inner {height: var(--hi-v5-height-10, 40px);}.hi-v5-menu {background-color: var(--hi-v5-color-static-white, #fff);color: var(--hi-v5-color-gray-800, #1a1d26);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-menu ul {margin: 0;padding: 0;}.hi-v5-menu-item {list-style: none;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-menu-item__icon {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-margin-end: var(--hi-v5-spacing-4, 8px);margin-inline-end: var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-lg, 1rem);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-menu-item__arrow {font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-menu-item__indent {display: inline-block;width: 24px;height: 100%;-ms-flex-negative: 0;flex-shrink: 0;}.hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-500, #babcc2);cursor: not-allowed;}.hi-v5-menu__wrapper {padding: 0;margin: 0;}.hi-v5-menu--horizontal {width: 100%;overflow: hidden;}.hi-v5-menu--horizontal .hi-v5-menu__wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;overflow: visible;width: -webkit-max-content;width: -moz-max-content;width: max-content;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-menu--horizontal .hi-v5-menu-item {padding: 0 var(--hi-v5-spacing-10, 20px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 56px;border: none;font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-menu--horizontal .hi-v5-menu-item__arrow {-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);}.hi-v5-menu--horizontal .hi-v5-menu-item:hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item:hover .hi-v5-menu-item__inner {-webkit-border-after: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-end: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active .hi-v5-menu-item__inner {-webkit-border-after: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-end: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active-p {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item__inner {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-border-after: 2px solid transparent;border-block-end: 2px solid transparent;}.hi-v5-menu--horizontal .hi-v5-menu-item__inner--expanded {-webkit-border-after: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-end: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;white-space: nowrap;max-width: none;}.hi-v5-menu--horizontal .hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-500, #babcc2);cursor: not-allowed;}.hi-v5-menu--horizontal .hi-v5-menu-item--disabled:hover .hi-v5-menu-item__inner {border-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-menu--horizontal .hi-v5-menu-item--disabled .hi-v5-menu-item__content {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-menu--vertical {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v5-spacing-4, 8px);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v5-menu--vertical .hi-v5-menu__wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto;}.hi-v5-menu--vertical.hi-v5-menu--mini {width: 56px;overflow-x: hidden;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini {-webkit-padding-start: var(--hi-v5-spacing-2, 4px);padding-inline-start: var(--hi-v5-spacing-2, 4px);-webkit-padding-end: var(--hi-v5-spacing-2, 4px);padding-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-menu--vertical.hi-v5-menu--popup .hi-v5-menu-item__inner--expanded {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu--vertical.hi-v5-menu--popup:not(.hi-v5-menu--mini) .hi-v5-menu__wrapper > .hi-v5-menu-item:last-child .hi-v5-menu-item__inner {-webkit-margin-after: 0;margin-block-end: 0;}.hi-v5-menu--vertical .hi-v5-menu__toggle {height: var(--hi-v5-height-10, 40px);line-height: var(--hi-v5-height-10, 40px);padding: 0 var(--hi-v5-spacing-6, 12px);cursor: pointer;border-radius: var(--hi-v5-border-radius-lg, 6px);color: var(--hi-v5-color-gray-600, #91959e);font-size: var(--hi-v5-text-size-lg, 1rem);-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));-webkit-transition-property: background-color;transition-property: background-color;}.hi-v5-menu--vertical .hi-v5-menu__toggle:hover {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu--vertical .hi-v5-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active-p {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner:not(.hi-v5-menu-item__inner--active):hover {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu--vertical .hi-v5-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-indent: 0.5px;}.hi-v5-menu--vertical .hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-500, #babcc2);cursor: not-allowed;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini {width: 60px;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini .hi-v5-menu-item__inner {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-sizing: border-box;box-sizing: border-box;width: 52px;height: 48px;padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-3, 6px) 0;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini .hi-v5-menu-item__inner .hi-v5-menu-item__icon {-webkit-margin-end: 0;margin-inline-end: 0;-webkit-margin-after: var(--hi-v5-spacing-1, 2px);margin-block-end: var(--hi-v5-spacing-1, 2px);display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini .hi-v5-menu-item__inner .hi-v5-menu-item__icon svg[class^=hi-v5-icon] {font-size: var(--hi-v5-text-size-xl, 1.125rem);}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini .hi-v5-menu-item__inner .hi-v5-menu-item__content {-webkit-transform: scale(0.5);transform: scale(0.5);width: 200%;font-size: calc(var(--hi-v5-text-size-xl, 1.125rem) + 2px);text-align: center;text-indent: 0;}.hi-v5-menu--vertical.hi-v5-menu--size-lg .hi-v5-menu-item__inner {height: var(--hi-v5-height-10, 40px);-webkit-margin-after: var(--hi-v5-spacing-4, 8px);margin-block-end: var(--hi-v5-spacing-4, 8px);}.hi-v5-menu--vertical.hi-v5-menu--size-md .hi-v5-menu-item__inner {height: var(--hi-v5-height-9, 36px);-webkit-margin-after: var(--hi-v5-spacing-2, 4px);margin-block-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-menu--vertical.hi-v5-menu--size-sm .hi-v5-menu-item__inner {height: var(--hi-v5-height-8, 32px);-webkit-margin-after: var(--hi-v5-spacing-1, 2px);margin-block-end: var(--hi-v5-spacing-1, 2px);}.hi-v5-sidebar-wrapper {position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;height: 100%;}.hi-v5-sidebar-wrapper:not(.hi-v5-sidebar-wrapper-showMenuArrow) .hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__arrow {display: none;}.hi-v5-sidebar-wrapper--showMenu .hi-v5-sidebar-menu-wrapper {-webkit-border-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-inline-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-sidebar-wrapper--showMenu .hi-v5-sidebar-toggle svg[class^=hi-v5-icon] {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v5-sidebar-wrapper:not(.hi-v5-sidebar-wrapper--collapsible) .hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__inner--expanded:hover {background-color: transparent;cursor: default;}.hi-v5-sidebar {-webkit-box-sizing: border-box;box-sizing: border-box;width: 64px;height: 100%;padding: var(--hi-v5-spacing-4, 8px) 0;overflow: auto;-webkit-border-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-inline-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);background-color: #fff;}.hi-v5-sidebar-list {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}.hi-v5-sidebar-item {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;margin: var(--hi-v5-spacing-6, 12px) var(--hi-v5-spacing-2, 4px) 0;padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-1, 2px);width: 52px;overflow: hidden;text-align: center;border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-sidebar-item:first-child {-webkit-margin-before: 0;margin-block-start: 0;}.hi-v5-sidebar-item:hover {cursor: pointer;}.hi-v5-sidebar-item:not(.hi-v5-sidebar-item--active):hover {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-sidebar-item--active {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-sidebar-item--active .hi-v5-sidebar-item__icon, .hi-v5-sidebar-item--active .hi-v5-sidebar-item__title {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-sidebar-item__icon {height: 20px;color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-sidebar-item__icon svg[class^=hi-v5-icon] {width: 20px;height: 20px;}.hi-v5-sidebar-item__title {font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-sidebar-menu-wrapper {width: 0;-webkit-border-end: none;border-inline-end: none;overflow: hidden;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item .hi-v5-menu-item__inner {height: var(--hi-v5-height-8, 32px);-webkit-margin-after: 0;margin-block-end: 0;padding: 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item .hi-v5-menu-item__inner--hasIcon + div .hi-v5-menu-submenu .hi-v5-menu-item__indent {width: 20px;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__icon {color: var(--hi-v5-color-gray-700, #60636b);-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__indent {width: 14px;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__content {font-weight: 550;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__inner--active-p {color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-submenu .hi-v5-menu-item__inner .hi-v5-menu-item__content {font-size: var(--hi-v5-text-size-sm, 0.75rem);font-weight: var(--hi-v5-text-weight-normal, 400);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu__wrapper > .hi-v5-menu-item {-webkit-margin-before: var(--hi-v5-spacing-4, 8px);margin-block-start: var(--hi-v5-spacing-4, 8px);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu__wrapper > .hi-v5-menu-item:first-child {-webkit-margin-before: 0;margin-block-start: 0;}.hi-v5-sidebar-toggle {-webkit-box-sizing: border-box;box-sizing: border-box;position: absolute;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 12px;height: 60px;inset-inline-end: -11px;inset-block-start: 50%;-webkit-transform: translate3d(0, -50%, 0);transform: translate3d(0, -50%, 0);border-start-end-radius: 16px 8px;border-end-end-radius: 16px 8px;border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);-webkit-border-start: none;border-inline-start: none;cursor: pointer;color: var(--hi-v5-color-gray-700, #60636b);background-color: #fff;}.hi-v5-sidebar-toggle svg[class^=hi-v5-icon] {-webkit-margin-start: -4px;margin-inline-start: -4px;}.hi-v5-menu-search {min-width: 360px;border-radius: var(--hi-v5-border-radius-xl, 8px);overflow: hidden;background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-menu-search__input-wrapper {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-8, 16px) 0 calc(var(--hi-v5-spacing-2, 4px) + 1px);height: var(--hi-v5-height-12, 48px);}.hi-v5-menu-search--open .hi-v5-menu-search__input-wrapper {border-end-start-radius: 0;border-end-end-radius: 0;}.hi-v5-menu-search__input .hi-v5-input__inner:hover {background-color: transparent !important;}.hi-v5-menu-search__input-prefix {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-menu-search__input-clear {font-size: var(--hi-v5-text-size-sm, 0.75rem);}.hi-v5-menu-search__close {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;height: var(--hi-v5-height-4, 16px);-webkit-padding-start: var(--hi-v5-spacing-5, 10px);padding-inline-start: var(--hi-v5-spacing-5, 10px);-webkit-border-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-inline-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-menu-search__content {-webkit-box-sizing: border-box;box-sizing: border-box;display: none;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v5-spacing-4, 8px);max-height: 550px;-webkit-border-before: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #edeff2);border-block-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu-search__content--visible {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-menu-search__header {padding: 0 var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);font-weight: var(--hi-v5-text-weight-medium, 500);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-menu-search__header-count {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu-search__list {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow-y: auto;position: relative;outline: none;}.hi-v5-menu-search__list:focus {outline: none;}.hi-v5-menu-search__list-item {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;height: var(--hi-v5-height-10, 40px);padding: calc(var(--hi-v5-spacing-4, 8px) + 1px) var(--hi-v5-spacing-4, 8px);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-menu-search__list-item__title {font-size: var(--hi-v5-text-size-md, 0.875rem);color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-menu-search__list-item--selected, .hi-v5-menu-search__list-item:hover {cursor: pointer;background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu-search__empty {padding: calc(var(--hi-v5-spacing-2, 4px) + 1px) var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-menu-search__footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-8, 16px);background-color: #f5f7fa;}.hi-v5-menu-search__footer-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-margin-end: var(--hi-v5-spacing-8, 16px);margin-inline-end: var(--hi-v5-spacing-8, 16px);font-size: var(--hi-v5-text-size-sm, 0.75rem);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-menu-search__footer-item__icon {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;gap: var(--hi-v5-spacing-1, 2px);-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);padding: 0 var(--hi-v5-spacing-2, 4px);height: var(--hi-v5-height-5, 20px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-radius: var(--hi-v5-border-radius-md, 4px);}.hi-v5-menu-search__picker-overlay .hi-v5-menu-search__picker-container {min-width: 360px;border-start-start-radius: 0;border-start-end-radius: 0;}.hi-v5-menu-search__picker-overlay .hi-v5-menu-search__picker-panel {border-top: none;border-start-start-radius: 0;border-start-end-radius: 0;}.hi-v5-menu-search__picker-overlay .hi-v5-menu-search__picker-body {max-height: 544px;}.hi-v5-menu-search__picker-overlay .hi-v5-menu-search__picker-footer {-webkit-box-shadow: none;box-shadow: none;background-color: #f5f7fa;}.hi-v5-group-menu {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 100%;padding: var(--hi-v5-spacing-4, 8px) 0;}.hi-v5-group-menu-item:not(:first-child) {-webkit-margin-before: var(--hi-v5-spacing-4, 8px);margin-block-start: var(--hi-v5-spacing-4, 8px);}.hi-v5-group-menu-item__content {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: var(--hi-v5-height-8, 32px);padding: 0 var(--hi-v5-spacing-4, 8px);margin: 0 var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-800, rgba(26, 29, 38, 0.8));}.hi-v5-group-menu-item:not(.hi-v5-group-menu-item--parent):not(.hi-v5-group-menu-item--disabled) {cursor: pointer;}.hi-v5-group-menu-item:not(.hi-v5-group-menu-item--parent):not(.hi-v5-group-menu-item--disabled):hover .hi-v5-group-menu-item__content {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-group-menu-item:not(.hi-v5-group-menu-item--parent):not(.hi-v5-group-menu-item--disabled).hi-v5-group-menu-item--active > .hi-v5-group-menu-item__content {font-weight: var(--hi-v5-text-weight-medium, 500);color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-100, var(--hi-v5-color-brandblue-100, #e5ecff));}.hi-v5-group-menu-item:not(.hi-v5-group-menu-item--parent):not(.hi-v5-group-menu-item--disabled).hi-v5-group-menu-item--active:hover > .hi-v5-group-menu-item__content {background-color: var(--hi-v5-color-primary-100, var(--hi-v5-color-brandblue-100, #e5ecff));}.hi-v5-group-menu-item--disabled > .hi-v5-group-menu-item__content {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-group-menu-item--empty > .hi-v5-group-menu-item__content {display: none;}.hi-v5-group-menu-item__icon {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-margin-end: var(--hi-v5-spacing-4, 8px);margin-inline-end: var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-group-menu-parent-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-group-menu-parent-item > .hi-v5-group-menu-item__content {height: var(--hi-v5-height-7, 28px);font-weight: var(--hi-v5-text-weight-medium, 500);color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-group-menu-parent-item > .hi-v5-group-menu-item__content .hi-v5-group-menu-item__title {font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-group-menu-parent-item:not(:first-child) > .hi-v5-group-menu-item__content {-webkit-margin-before: var(--hi-v5-spacing-12, 24px);margin-block-start: var(--hi-v5-spacing-12, 24px);}.hi-v5-group-menu-parent-item + .hi-v5-group-menu-item {-webkit-margin-before: var(--hi-v5-spacing-12, 24px);margin-block-start: var(--hi-v5-spacing-12, 24px);}.hi-v5-side-menu {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v5-spacing-2, 4px) 0;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v5-side-menu-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-800, #1a1d26);border-radius: var(--hi-v5-border-radius-lg, 6px);cursor: pointer;position: relative;}.hi-v5-side-menu-item:hover, .hi-v5-side-menu-item--selected {background-color: rgba(124, 135, 166, 0.15);}.hi-v5-side-menu-item:not(.hi-v5-side-menu-item--mini) {height: var(--hi-v5-height-8, 32px);}.hi-v5-side-menu-item:not(.hi-v5-side-menu-item--mini) .hi-v5-side-menu-item__title {min-width: 1px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v5-side-menu-item-wrapper {padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-4, 8px);}.hi-v5-side-menu-item--active {font-weight: var(--hi-v5-text-weight-medium, 500);color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-side-menu-item--active:hover {background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-side-menu-item--active .hi-v5-side-menu-item__icon,.hi-v5-side-menu-item--active .hi-v5-side-menu-item__title {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-side-menu-item__icon {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-margin-end: var(--hi-v5-spacing-4, 8px);margin-inline-end: var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-lg, 1rem);color: #7c87a6;}.hi-v5-side-menu-item--mini {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;padding: var(--hi-v5-spacing-3, 6px);width: 52px;max-height: 64px;color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-side-menu-item--mini .hi-v5-side-menu-item__icon {-webkit-margin-end: 0;margin-inline-end: 0;-webkit-margin-after: var(--hi-v5-spacing-3, 6px);margin-block-end: var(--hi-v5-spacing-3, 6px);font-size: var(--hi-v5-text-size-xl, 1.125rem);}.hi-v5-side-menu-item--mini .hi-v5-side-menu-item__title {font-size: 20px;line-height: 28px;text-align: center;text-indent: 0;-webkit-transform: scale(0.5);transform: scale(0.5);width: 200%;-webkit-margin-after: -14px;margin-block-end: -14px;-webkit-transform-origin: top;transform-origin: top;white-space: normal;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;line-clamp: 2;word-break: break-word;overflow: hidden;text-overflow: ellipsis;}.hi-v5-side-menu--mini .hi-v5-side-menu-item-wrapper {padding: var(--hi-v5-spacing-2, 4px);}.hi-v5-side-menu .hi-v5-scrollbar__wrapper {width: 100%;}";
16
16
  var __styleInject__ = require('@hi-ui/style-inject')["default"];
17
17
  __styleInject__(css_248z);
18
18
  exports["default"] = css_248z;
package/lib/esm/GroupMenu.js CHANGED
@@ -11,6 +11,8 @@ import { __rest } from 'tslib';
11
11
  import React, { forwardRef, useCallback } from 'react';
12
12
  import { getPrefixCls, cx } from '@hi-ui/classname';
13
13
  import { __DEV__ } from '@hi-ui/env';
14
+ import { useGlobalContext } from '@hi-ui/core';
15
+ import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
14
16
  import { isArrayNonEmpty } from '@hi-ui/type-assertion';
15
17
  import { useLatestCallback } from '@hi-ui/use-latest';
16
18
  import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
@@ -26,6 +28,9 @@ var GroupMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
26
28
  _a$role = _a.role,
27
29
  role = _a$role === void 0 ? _role : _a$role,
28
30
  className = _a.className,
31
+ style = _a.style,
32
+ classNamesProp = _a.classNames,
33
+ stylesProp = _a.styles,
29
34
  _a$data = _a.data,
30
35
  data = _a$data === void 0 ? [] : _a$data,
31
36
  onClick = _a.onClick,
@@ -33,7 +38,23 @@ var GroupMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
33
38
  defaultActiveId = _a$defaultActiveId === void 0 ? '' : _a$defaultActiveId,
34
39
  activeIdProp = _a.activeId,
35
40
  titleRender = _a.titleRender,
36
- rest = __rest(_a, ["prefixCls", "role", "className", "data", "onClick", "defaultActiveId", "activeId", "titleRender"]);
41
+ rest = __rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "data", "onClick", "defaultActiveId", "activeId", "titleRender"]);
42
+ var _useGlobalContext = useGlobalContext(),
43
+ groupMenuConfig = _useGlobalContext.groupMenu;
44
+ var _useMergeSemantic = useMergeSemantic({
45
+ classNamesList: [groupMenuConfig === null || groupMenuConfig === void 0 ? void 0 : groupMenuConfig.classNames, classNamesProp],
46
+ stylesList: [groupMenuConfig === null || groupMenuConfig === void 0 ? void 0 : groupMenuConfig.styles, stylesProp],
47
+ info: {
48
+ props: Object.assign(Object.assign({}, rest), {
49
+ data: data,
50
+ defaultActiveId: defaultActiveId,
51
+ activeId: activeIdProp,
52
+ titleRender: titleRender
53
+ })
54
+ }
55
+ }),
56
+ classNames = _useMergeSemantic.classNames,
57
+ styles = _useMergeSemantic.styles;
37
58
  var _useUncontrolledState = useUncontrolledState(defaultActiveId, activeIdProp),
38
59
  activeId = _useUncontrolledState[0],
39
60
  tryChangeActiveId = _useUncontrolledState[1];
@@ -53,28 +74,35 @@ var GroupMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
53
74
  var isParent = isArrayNonEmpty(children);
54
75
  return /*#__PURE__*/React.createElement("div", {
55
76
  key: id,
56
- className: cx(isParent ? prefixCls + "-parent-item" : prefixCls + "-item", (_cx = {}, _cx[prefixCls + "-item--active"] = activeId === id, _cx[prefixCls + "-item--disabled"] = disabled, _cx[prefixCls + "-item--empty"] = !title && !icon, _cx)),
77
+ className: cx(isParent ? prefixCls + "-parent-item" : prefixCls + "-item", (_cx = {}, _cx[prefixCls + "-item--active"] = activeId === id, _cx[prefixCls + "-item--disabled"] = disabled, _cx[prefixCls + "-item--empty"] = !title && !icon, _cx), classNames === null || classNames === void 0 ? void 0 : classNames.item),
78
+ style: styles === null || styles === void 0 ? void 0 : styles.item,
57
79
  onClick: function onClick(evt) {
58
80
  if (disabled || isParent) return;
59
81
  evt.stopPropagation();
60
82
  handleClick(evt, id, item);
61
83
  }
62
84
  }, /*#__PURE__*/React.createElement("div", {
63
- className: cx(prefixCls + "-item__content")
85
+ className: cx(prefixCls + "-item__content", classNames === null || classNames === void 0 ? void 0 : classNames.itemContent),
86
+ style: styles === null || styles === void 0 ? void 0 : styles.itemContent
64
87
  }, /*#__PURE__*/React.createElement("div", {
65
- className: cx(prefixCls + "-item__icon")
88
+ className: cx(prefixCls + "-item__icon", classNames === null || classNames === void 0 ? void 0 : classNames.itemIcon),
89
+ style: styles === null || styles === void 0 ? void 0 : styles.itemIcon
66
90
  }, icon), /*#__PURE__*/React.createElement("div", {
67
- className: cx(prefixCls + "-item__title")
91
+ className: cx(prefixCls + "-item__title", classNames === null || classNames === void 0 ? void 0 : classNames.itemTitle),
92
+ style: styles === null || styles === void 0 ? void 0 : styles.itemTitle
68
93
  }, typeof titleRender === 'function' ? titleRender(item) : title)), isParent && renderItem(children));
69
94
  });
70
- }, [activeId, handleClick, prefixCls, titleRender]);
95
+ }, [activeId, handleClick, prefixCls, titleRender, classNames, styles]);
71
96
  return /*#__PURE__*/React.createElement("div", Object.assign({
72
- className: cx("" + prefixCls, className),
97
+ className: cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
98
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
73
99
  ref: ref,
74
100
  role: role
75
101
  }, rest), /*#__PURE__*/React.createElement(Scrollbar, {
76
102
  onlyScrollVisible: true,
77
- axes: "y"
103
+ axes: "y",
104
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.wrapper,
105
+ style: styles === null || styles === void 0 ? void 0 : styles.wrapper
78
106
  }, renderItem(data)));
79
107
  });
80
108
  if (__DEV__) {
package/lib/esm/Menu.js CHANGED
@@ -14,6 +14,7 @@ import { MenuUnfoldOutlined, MenuFoldOutlined } from '@hi-ui/icons';
14
14
  import { __DEV__ } from '@hi-ui/env';
15
15
  import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
16
16
  import { useLocaleContext, useGlobalContext } from '@hi-ui/core';
17
+ import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
17
18
  import Tooltip from '@hi-ui/tooltip';
18
19
  import { useUncontrolledToggle } from '@hi-ui/use-toggle';
19
20
  import { getTreeNodesWithChildren } from '@hi-ui/tree-utils';
@@ -33,12 +34,15 @@ var MENU_MORE_ID = "MENU_MORE_" + uuid();
33
34
  * 菜单
34
35
  */
35
36
  var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
36
- var _b;
37
+ var _b, _c;
37
38
  var _a$prefixCls = _a.prefixCls,
38
39
  prefixCls = _a$prefixCls === void 0 ? MENU_PREFIX : _a$prefixCls,
39
40
  _a$role = _a.role,
40
41
  role = _a$role === void 0 ? 'menu' : _a$role,
41
42
  className = _a.className,
43
+ style = _a.style,
44
+ classNamesProp = _a.classNames,
45
+ stylesProp = _a.styles,
42
46
  _a$data = _a.data,
43
47
  data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
44
48
  fieldNames = _a.fieldNames,
@@ -72,17 +76,38 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
72
76
  sizeProp = _a.size,
73
77
  _a$showTitleOnMini = _a.showTitleOnMini,
74
78
  showTitleOnMini = _a$showTitleOnMini === void 0 ? false : _a$showTitleOnMini,
75
- rest = __rest(_a, ["prefixCls", "role", "className", "data", "fieldNames", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size", "showTitleOnMini"]);
79
+ rest = __rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "data", "fieldNames", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size", "showTitleOnMini"]);
76
80
  var i18n = useLocaleContext();
77
81
  var _useUncontrolledState = useUncontrolledState(defaultActiveId, activeIdProp, onClick),
78
82
  activeId = _useUncontrolledState[0],
79
83
  updateActiveId = _useUncontrolledState[1];
80
84
  var _useGlobalContext = useGlobalContext(),
81
- globalSize = _useGlobalContext.size;
85
+ globalSize = _useGlobalContext.size,
86
+ menuConfig = _useGlobalContext.menu;
82
87
  var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'lg';
83
88
  if (size === 'xs') {
84
89
  size = 'sm';
85
90
  }
91
+ var _useMergeSemantic = useMergeSemantic({
92
+ classNamesList: [menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.classNames, classNamesProp],
93
+ stylesList: [menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.styles, stylesProp],
94
+ info: {
95
+ props: Object.assign(Object.assign({}, rest), {
96
+ data: data,
97
+ placement: placement,
98
+ size: (_c = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _c !== void 0 ? _c : 'lg',
99
+ showCollapse: showCollapse,
100
+ expandedType: expandedType,
101
+ showAllSubMenus: showAllSubMenus,
102
+ defaultExpandAll: defaultExpandAll,
103
+ defaultCollapsed: defaultCollapsed,
104
+ collapsed: collapsed,
105
+ showTitleOnMini: showTitleOnMini
106
+ })
107
+ }
108
+ }),
109
+ classNames = _useMergeSemantic.classNames,
110
+ styles = _useMergeSemantic.styles;
86
111
  var _useState = useState(function () {
87
112
  return getAncestorIds(activeId, data);
88
113
  }),
@@ -208,7 +233,8 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
208
233
  }, [showVertical, getTagWidth, containerWidth, mergedTagList]);
209
234
  var renderFooter = function renderFooter() {
210
235
  var collapseNode = canToggle ? ( /*#__PURE__*/React.createElement("div", {
211
- className: cx(prefixCls + "__toggle"),
236
+ className: cx(prefixCls + "__toggle", classNames === null || classNames === void 0 ? void 0 : classNames.toggle),
237
+ style: styles === null || styles === void 0 ? void 0 : styles.toggle,
212
238
  onClick: function onClick() {
213
239
  return miniToggleAction.not();
214
240
  }
@@ -225,11 +251,12 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
225
251
  }
226
252
  return isFunction(render) ? render(menuItem, level) : menuItem.title;
227
253
  }, [render, showMini, showTitleOnMini]);
228
- var cls = cx(prefixCls, className, prefixCls + "--" + placement, prefixCls + "--size-" + size, mini && prefixCls + "--mini", showTitleOnMini && prefixCls + "--show-title-on-mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
254
+ var cls = cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, prefixCls + "--" + placement, prefixCls + "--size-" + size, mini && prefixCls + "--mini", showTitleOnMini && prefixCls + "--show-title-on-mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
229
255
  return /*#__PURE__*/React.createElement("div", Object.assign({
230
256
  ref: useMergeRefs(ref, setContainerElement),
231
257
  role: role,
232
- className: cls
258
+ className: cls,
259
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
233
260
  }, rest), extraHeader, /*#__PURE__*/React.createElement(MenuContext.Provider, {
234
261
  value: {
235
262
  placement: placement,
@@ -244,10 +271,13 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
244
271
  activeParents: activeParents,
245
272
  activeId: activeId,
246
273
  expandedIds: expandedIds,
247
- overlayClassName: overlayClassName
274
+ overlayClassName: overlayClassName,
275
+ semanticClassNames: classNames,
276
+ semanticStyles: styles
248
277
  }
249
278
  }, /*#__PURE__*/React.createElement("ul", {
250
- className: cx(prefixCls + "__wrapper")
279
+ className: cx(prefixCls + "__wrapper", classNames === null || classNames === void 0 ? void 0 : classNames.wrapper),
280
+ style: styles === null || styles === void 0 ? void 0 : styles.wrapper
251
281
  }, mergedTagList.map(function (item, index) {
252
282
  return showMini ? ( /*#__PURE__*/React.createElement(Tooltip, {
253
283
  title: item.title,
@@ -273,7 +303,8 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
273
303
  title: i18n.tabs.more,
274
304
  children: restTagList
275
305
  }))), /*#__PURE__*/React.createElement("div", {
276
- className: prefixCls + "__footer"
306
+ className: cx(prefixCls + "__footer", classNames === null || classNames === void 0 ? void 0 : classNames.footer),
307
+ style: styles === null || styles === void 0 ? void 0 : styles.footer
277
308
  }, renderFooter())));
278
309
  });
279
310
  if (__DEV__) {