@sheinx/shineout-style 3.1.27 → 3.2.0-beta.2

package/cjs/input/input-border.js

@@ -15,15 +15,19 @@ var _default = exports.default = function _default(name) {
     boxSizing: 'border-box',
     borderRadius: token.borderRadius,
     background: token.backgroundColor,
-    border: "1px solid ".concat(token.borderColor),
+    border: "".concat(token.borderWidth, " solid ").concat(token.borderColor),
     color: token.fontColor,
     lineHeight: token.lineHeight,
     fontSize: token.fontSize,
     // verticalAlign: 'top',
+    fontWeight: token.fontWeight,
+    verticalAlign: 'top',
     transition: "border-color .15s ease-in-out,box-shadow .15s ease-in-out;",
-    '&:hover': {
+    '&:hover': _defineProperty({
       borderColor: token.hoverBorderColor
-    },
+    }, "&:not($".concat(name, "Disabled):not($").concat(name, "Error)"), {
+      backgroundColor: token.hoverBackgroundColor
+    }),
     '[data-soui-role="input-group"] &': {
       borderWidth: 0,
       borderRadius: 0,
@@ -74,16 +78,21 @@ var _default = exports.default = function _default(name) {
   }), "".concat(name, "Focus"), {
     borderColor: token.focusBorderColor,
     boxShadow: "0 0 0 2px ".concat(token.focusShadow),
+    background: token.focusBackgroundColor,
     '&:hover': {
       borderColor: token.focusBorderColor
     }
   }), "".concat(name, "Error"), _defineProperty({
     borderColor: token.errorBorderColor,
+    background: token.errorBackgroundColor,
     '&:hover': {
-      borderColor: token.errorBorderColor
+      backgroundColor: token.errorHoverBackgroundColor,
+      borderColor: token.errorHoverBorderColor
     }
   }, "&$".concat(name, "Focus"), {
-    boxShadow: "0 0 0 2px ".concat(token.errorFocusShadow)
+    boxShadow: "0 0 0 2px ".concat(token.errorFocusShadow),
+    borderColor: token.errorFocusBorderColor,
+    background: token.errorFocusBackgroundColor
   })), "".concat(name, "Disabled"), {
     color: token.disabledFontColor,
     backgroundColor: token.disabledBackgroundColor,

package/cjs/input/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["input.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AA8F5C,QAAA,MAAM,KAAK,EAAE,QAAQ,CAAC,MAAM,YAAY,CAuMvC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["input.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAwG5C,QAAA,MAAM,KAAK,EAAE,QAAQ,CAAC,MAAM,YAAY,CAyMvC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/cjs/input/input.js

@@ -19,6 +19,7 @@ var inputBorderToken = {
   lineHeight: _theme.default.lineHeightDynamic,
   borderRadius: _theme.default.inputBorderRadius,
   fontSize: _theme.default.inputFontSize,
+  fontWeight: _theme.default.inputFontWeight,
   smallFontSize: _theme.default.inputSmallFontSize,
   largeFontSize: _theme.default.inputLargeFontSize,
   paddingY: _theme.default.inputPaddingY,
@@ -28,14 +29,22 @@ var inputBorderToken = {
   smallPaddingX: _theme.default.inputSmallPaddingX,
   largePaddingX: _theme.default.inputLargePaddingX,
   borderColor: _theme.default.inputBorderColor,
+  borderWidth: _theme.default.inputBorderWidth,
   focusBorderColor: _theme.default.inputFocusBorderColor,
   hoverBorderColor: _theme.default.inputHoverBorderColor,
   disabledBorderColor: _theme.default.inputDisabledBorderColor,
   errorBorderColor: _theme.default.inputErrorBorderColor,
+  errorHoverBorderColor: _theme.default.inputErrorHoverBorderColor,
+  errorFocusBorderColor: _theme.default.inputErrorFocusBorderColor,
   fontColor: _theme.default.inputFontColor,
   disabledFontColor: _theme.default.inputDisabledFontColor,
   backgroundColor: _theme.default.inputBackgroundColor,
+  hoverBackgroundColor: _theme.default.inputHoverBackgroundColor,
+  focusBackgroundColor: _theme.default.inputFocusBackgroundColor,
   disabledBackgroundColor: _theme.default.inputDisabledBackgroundColor,
+  errorBackgroundColor: _theme.default.inputErrorBackgroundColor,
+  errorFocusBackgroundColor: _theme.default.inputErrorFocusBackgroundColor,
+  errorHoverBackgroundColor: _theme.default.inputErrorHoverBackgroundColor,
   focusShadow: _theme.default.inputFocusShadow,
   errorFocusShadow: _theme.default.inputErrorFocusShadow,
   innerTitlePaddingY: _theme.default.inputInnerPaddingY,
@@ -67,8 +76,9 @@ var groupSpace = function groupSpace(gap) {
       alignItems: 'center',
       border: "1px solid ".concat(_theme.default.inputBorderColor),
       borderWidth: '0 1px',
-      background: _theme.default.inputDisabledBackgroundColor,
+      background: _theme.default.inputGroupFontBackgroundColor,
       fontWeight: 'normal',
+      color: _theme.default.inputGroupFontColor,
       '&:first-child': {
         borderLeftColor: 'inherit',
         marginLeft: '-1px'
@@ -129,7 +139,9 @@ var input = _objectSpread(_objectSpread(_objectSpread({
     outline: 'none',
     backgroundColor: 'transparent',
     boxSizing: 'border-box',
+    fontWeight: 'inherit',
     '&::placeholder': {
+      fontWeight: _theme.default.inputPlaceholderFontWeight,
       color: _theme.default.inputPlaceholderColor,
       fontSize: 'inherit'
     }
@@ -209,7 +221,7 @@ var input = _objectSpread(_objectSpread(_objectSpread({
       color: _theme.default.inputIconColor,
       '&:hover': {
         '$wrapper:not($wrapperDisabled) &': {
-          color: _theme.default.inputHoverBorderColor
+          color: _theme.default.inputHoverIconColor
         }
       },
       '&:first-child': {

package/cjs/list/list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["list.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC;AAE9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CAmHtC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["list.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC;AAE9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CAsHtC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/cjs/list/list.js

@@ -56,7 +56,7 @@ var listStyle = {
     alignItems: 'center',
     boxSizing: 'border-box',
     '&:not(:last-child)': {
-      borderBottom: "1px solid ".concat(_theme.default.listBorderColor)
+      borderBottom: "".concat(_theme.default.listBorderWidth, " solid ").concat(_theme.default.listBorderColor)
     }
   },
   item: {
@@ -65,13 +65,16 @@ var listStyle = {
     color: _theme.default.listFontColor,
     display: 'flex',
     flexWrap: 'nowrap',
+    background: _theme.default.listItemBackgroundColor,
     boxSizing: 'border-box',
     padding: "".concat(_theme.default.listItemPaddingY, " ").concat(_theme.default.listItemPaddingX),
     '$wrapperSmall &': {
-      padding: "".concat(_theme.default.listSmallItemPaddingY, " ").concat(_theme.default.listSmallItemPaddingX)
+      padding: "".concat(_theme.default.listSmallItemPaddingY, " ").concat(_theme.default.listSmallItemPaddingX),
+      fontSize: _theme.default.listSmallFontSize
     },
     '$wrapperLarge &': {
-      padding: "".concat(_theme.default.listLargeItemPaddingY, " ").concat(_theme.default.listLargeItemPaddingY)
+      padding: "".concat(_theme.default.listLargeItemPaddingY, " ").concat(_theme.default.listLargeItemPaddingY),
+      fontSize: _theme.default.listLargeFontSize
     }
   },
   checkContent: {

package/cjs/menu/index.d.ts

@@ -1,5 +1,8 @@
 import menuStyle from './menu';
+import menuSearchStyle from './search';
 declare const useMenuStyle: () => import("jss").Classes<keyof import("@sheinx/base").MenuClasses>;
 export { menuStyle, useMenuStyle };
 export default useMenuStyle;
+declare const useMenuSearchStyle: () => import("jss").Classes<keyof import("@sheinx/base").MenuSearchClasses>;
+export { menuSearchStyle, useMenuSearchStyle };
 //# sourceMappingURL=index.d.ts.map

package/cjs/menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,QAAQ,CAAC;AAE/B,QAAA,MAAM,YAAY,uEAA4B,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;AACnC,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,QAAQ,CAAC;AAC/B,OAAO,eAAe,MAAM,UAAU,CAAC;AAEvC,QAAA,MAAM,YAAY,uEAA4B,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;AACnC,eAAe,YAAY,CAAC;AAE5B,QAAA,MAAM,kBAAkB,6EAAyC,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAC"}

package/cjs/menu/index.js

@@ -5,15 +5,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+Object.defineProperty(exports, "menuSearchStyle", {
+  enumerable: true,
+  get: function get() {
+    return _search.default;
+  }
+});
 Object.defineProperty(exports, "menuStyle", {
   enumerable: true,
   get: function get() {
     return _menu.default;
   }
 });
-exports.useMenuStyle = void 0;
+exports.useMenuStyle = exports.useMenuSearchStyle = void 0;
 var _jssStyle = require("../jss-style");
 var _menu = _interopRequireDefault(require("./menu"));
+var _search = _interopRequireDefault(require("./search"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var useMenuStyle = exports.useMenuStyle = (0, _jssStyle.styled)(_menu.default, 'menu');
-var _default = exports.default = useMenuStyle;
+var _default = exports.default = useMenuStyle;
+var useMenuSearchStyle = exports.useMenuSearchStyle = (0, _jssStyle.styled)(_search.default, 'menu-search');

package/cjs/menu/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["menu.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,MAAM,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC;AAY9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CA6WtC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["menu.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,MAAM,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC;AAM9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CA8atC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/cjs/menu/menu.js

@@ -6,31 +6,91 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _theme = _interopRequireDefault(require("@sheinx/theme"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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); }
-var menuIndex = 1000;
-var arrow = {
-  content: '""',
-  position: 'absolute',
-  left: 0,
-  transform: 'translateY(-50%)',
-  border: '6px solid transparent',
-  borderRightColor: _theme.default.menuItemBackgroundColor,
-  marginLeft: '-10px'
-};
+var animationDuration = '.25s';
+var collpaseWidth = _theme.default.menuCollpaseWidth;
+var transitionFunc = 'ease-out';
 var menuStyle = {
   wrapper: {
     height: '100%',
-    backgroundColor: _theme.default.menuItemBackgroundColor
+    width: '100%',
+    backgroundColor: _theme.default.menuItemBackgroundColor,
+    transition: "width ".concat(animationDuration, " ").concat(transitionFunc),
+    color: _theme.default.menuFontColor
   },
   wrapperLight: {},
   wrapperDark: {
     backgroundColor: _theme.default.menuDarkItemBackgroundColor
   },
+  wrapperCollpase: {
+    width: "".concat(collpaseWidth, "!important"),
+    '& $title': {
+      paddingLeft: '0'
+    },
+    '& $expand': {
+      opacity: 0
+    },
+    '& $titleIcon': {
+      width: "".concat(collpaseWidth, "!important"),
+      flexShrink: 0,
+      justifyContent: 'center'
+    },
+    '& $titleContent': {
+      opacity: 0,
+      alignItems: 'center',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
+    },
+    '&$wrapperLight': {
+      '$menuRoot > $itemActive > $itemContent': {
+        backgroundColor: _theme.default.menuItemBackgroundColor
+      }
+    }
+  },
+  wrapperInTransition: {
+    '& $titleContent, & $header': {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
+    },
+    '& $expand': {
+      opacity: 0
+    }
+  },
+  popover: {
+    '&&': {
+      border: 'none',
+      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+      borderRadius: '4px',
+      backgroundColor: _theme.default.menuItemBackgroundColor
+    },
+    '&[data-soui-theme=dark]': {
+      backgroundColor: _theme.default.menuDarkItemBackgroundColor
+    },
+    '& $children': {
+      borderRadius: '4px',
+      padding: "".concat(_theme.default.menuPopoverPaddingY, " 0")
+      // '& > :first-child > $itemContent': {
+      //   borderTopRightRadius: '4px',
+      //   borderTopLeftRadius: '4px',
+      // },
+      // '& > :last-child > $itemContent': {
+      //   borderBottomRightRadius: '4px',
+      //   borderBottomLeftRadius: '4px',
+      // },
+    }
+  },
+  popArrow: {
+    '&&&': {
+      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+      width: '6px',
+      height: '6px'
+    }
+  },
+  popArrowDark: {
+    '&&&': {
+      backgroundColor: _theme.default.menuDarkItemBackgroundColor,
+      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'
+    }
+  },
   scrollbox: {
     '$wrapperVertical &': {
       overflow: 'hidden',
@@ -38,12 +98,6 @@ var menuStyle = {
     },
     '$wrapperHorizontal &': {
       overflow: 'hidden'
-    },
-    '$wrapperHasOpen$wrapperVertical &': {
-      width: '100vw'
-    },
-    '$wrapperHasOpen$wrapperHorizontal &': {
-      height: '100vh'
     }
   },
   root: {
@@ -59,89 +113,27 @@ var menuStyle = {
   },
   wrapperInline: {},
   wrapperVertical: {
-    position: 'relative',
-    zIndex: menuIndex
+    position: 'relative'
   },
   wrapperHorizontal: {
-    height: '42px',
-    position: 'relative',
-    zIndex: menuIndex
+    position: 'relative'
   },
   wrapperHasOpen: {},
   children: {
     padding: '0',
+    margin: '0',
     display: 'none',
     minWidth: '100%',
     whiteSpace: 'nowrap',
-    '$itemOpen > &': {
+    '$itemOpen > &, $childrenShow&': {
       display: 'block'
-    },
-    '$wrapper:not($wrapperInline) &': {
-      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'
-    },
-    '$wrapperHorizontal &': {
-      position: 'absolute',
-      bottom: '-2px',
-      left: 0,
-      transform: 'translateY(100%)'
-    },
-    '$wrapperHorizontal & &': {
-      position: 'absolute',
-      left: 'auto',
-      bottom: 'auto',
-      top: 0,
-      right: '-2px',
-      transform: 'translateX(100%)'
-    },
-    '$wrapperVertical &': {
-      position: 'absolute',
-      top: 0,
-      '&[dir=ltr]': {
-        right: '-6px',
-        transform: 'translateX(100%)'
-      },
-      '&[dir=rtl]': {
-        left: '-6px',
-        transform: 'translateX(-100%)'
-      },
-      minWidth: 'auto',
-      borderRadius: '4px',
-      '& > :first-child > $itemContent': {
-        borderTopRightRadius: '4px',
-        borderTopLeftRadius: '4px'
-      },
-      '& > :last-child > $itemContent': {
-        borderBottomRightRadius: '4px',
-        borderBottomLeftRadius: '4px'
-      },
-      '&$childrenUp': {
-        top: 'auto',
-        bottom: 0
-      },
-      '&$childrenUp::before': _objectSpread(_objectSpread({
-        top: 'auto',
-        bottom: '20%'
-      }, arrow), {}, {
-        '$wrapperDark&': {
-          borderRightColor: _theme.default.menuDarkItemBackgroundColor
-        }
-      }),
-      '&::before': _objectSpread(_objectSpread({
-        top: '20%'
-      }, arrow), {}, {
-        '$wrapperDark&': {
-          borderRightColor: _theme.default.menuDarkItemBackgroundColor
-        }
-      })
     }
   },
+  childrenShow: {},
   childrenUp: {},
   item: {
     listStyle: 'none',
-    flexShrink: 0,
-    '$wrapperVertical &, $wrapperHorizontal &': {
-      position: 'relative'
-    }
+    flexShrink: 0
   },
   itemActive: {},
   itemDisabled: {},
@@ -155,7 +147,7 @@ var menuStyle = {
     alignItems: 'center',
     cursor: 'pointer',
     position: 'relative',
-    '$wrapperLight &': {
+    '[data-soui-theme=light] &': {
       color: _theme.default.menuItemFontColor,
       backgroundColor: _theme.default.menuItemBackgroundColor,
       '&:hover': {
@@ -163,7 +155,7 @@ var menuStyle = {
         backgroundColor: _theme.default.menuItemHoverBackgroundColor
       }
     },
-    '$wrapperDark &': {
+    '[data-soui-theme=dark] &': {
       color: _theme.default.menuDarkFontColor,
       backgroundColor: _theme.default.menuDarkItemBackgroundColor,
       '&:hover': {
@@ -171,7 +163,7 @@ var menuStyle = {
         backgroundColor: _theme.default.menuDarkItemHoverBackgroundColor
       }
     },
-    '$wrapperDark $itemOpen > &': {
+    '[data-soui-theme=dark] $itemOpen > &': {
       color: _theme.default.menuDarkItemOpenFontColor,
       backgroundColor: _theme.default.menuDarkItemOpenBackgroundColor,
       '& $icon': {
@@ -179,13 +171,13 @@ var menuStyle = {
       }
     },
     '$itemInPath > &&': {
-      '$wrapperLight &': {
+      '[data-soui-theme=light] &': {
         color: _theme.default.menuItemActiveFontColor,
         '& $icon': {
           color: _theme.default.menuItemActiveFontColor
         }
       },
-      '$wrapperDark$wrapperInline &::before, $wrapperDark$wrapperVertical &::before': {
+      '[data-soui-theme=dark][data-soui-mode=inline] &::before, [data-soui-theme=dark][data-soui-mode=vertical] &::before': {
         content: '""',
         position: 'absolute',
         left: 0,
@@ -193,50 +185,73 @@ var menuStyle = {
         bottom: 0,
         width: '3px',
         backgroundColor: _theme.default.menuDarkItemActiveBackgroundColor
-      },
-      '$wrapperLight$wrapperVertical &': {
-        '&::before': {
-          display: 'block',
-          content: '""',
-          position: 'absolute',
-          right: 0,
-          top: 0,
-          bottom: 0,
-          width: '4px',
-          borderTopLeftRadius: '4px',
-          borderBottomLeftRadius: '4px',
-          backgroundColor: _theme.default.menuItemActiveFontColor
-        }
       }
+      // '[data-soui-theme=light][data-soui-mode=vertical]:not($wrapperCollpase) &': {
+      //   '&::before': {
+      //     display: 'block',
+      //     content: '""',
+      //     position: 'absolute',
+      //     right: 0,
+      //     top: 0,
+      //     bottom: 0,
+      //     width: '4px',
+      //     borderTopLeftRadius: '4px',
+      //     borderBottomLeftRadius: '4px',
+      //     backgroundColor: token.menuItemActiveFontColor,
+      //   },
+      // },
     },
     '$itemActive > &&': {
-      '$wrapperLight &': {
+      '[data-soui-theme=light] &': {
         color: _theme.default.menuItemActiveFontColor,
         backgroundColor: _theme.default.menuItemActiveBackgroundColor,
         '& $icon': {
           color: _theme.default.menuItemActiveFontColor
         }
       },
-      '$wrapperDark &': {
+      '$wrapperCollpase[data-soui-theme=light] $root > &': {
+        color: _theme.default.menuItemActiveFontColor,
+        backgroundColor: _theme.default.menuItemBackgroundColor,
+        '& $icon': {
+          color: _theme.default.menuItemActiveFontColor
+        }
+      },
+      '[data-soui-theme=dark]:not($wrapperCollpase) &': {
         color: _theme.default.menuDarkItemActiveFontColor,
         backgroundColor: _theme.default.menuDarkItemActiveBackgroundColor,
         '& $icon': {
           color: _theme.default.menuDarkItemActiveFontColor
         }
       },
-      '$wrapperLight$wrapperInline &,  $wrapperLight$wrapperHorizontal &': {
+      '[data-soui-theme=dark]$wrapperCollpase &': {
         '&::before': {
           content: '""',
           position: 'absolute',
-          display: 'block',
+          left: 0,
           top: 0,
-          right: 0,
+          bottom: 0,
           width: '3px',
-          height: '100%',
-          backgroundColor: _theme.default.menuItemActiveFontColor
+          backgroundColor: _theme.default.menuDarkItemActiveBackgroundColor
         }
       },
-      '$wrapperLight$wrapperHorizontal $root > &::before': {
+      // '[data-soui-theme=light][data-soui-mode=inline] &,  [data-soui-theme=light][data-soui-mode=horizontal] &':
+      //   {
+      //     '&::before': {
+      //       content: '""',
+      //       position: 'absolute',
+      //       display: 'block!important',
+      //       top: 0,
+      //       right: 0,
+      //       width: '3px',
+      //       height: '100%',
+      //       backgroundColor: token.menuItemActiveFontColor,
+      //     },
+      //   },
+      '[data-soui-theme=light][data-soui-mode=horizontal] $root > &::before': {
+        content: '""',
+        position: 'absolute',
+        display: 'block!important',
+        backgroundColor: _theme.default.menuItemActiveFontColor,
         width: '100%',
         height: '2px',
         top: 'auto',
@@ -245,7 +260,7 @@ var menuStyle = {
         right: 'auto'
       }
     },
-    '$wrapperLight $itemDisabled > &&': {
+    '[data-soui-theme=light] $itemDisabled > &&': {
       cursor: 'not-allowed',
       color: _theme.default.menuItemDisabledFontColor,
       backgroundColor: _theme.default.menuItemDisabledBackgroundColor,
@@ -253,7 +268,7 @@ var menuStyle = {
         color: _theme.default.menuItemDisabledFontColor
       }
     },
-    '$wrapperDark $itemDisabled > &&': {
+    '[data-soui-theme=dark] $itemDisabled > &&': {
       cursor: 'not-allowed',
       color: _theme.default.menuDarkItemDisabledFontColor,
       backgroundColor: _theme.default.menuDarkItemDisabledBackgroundColor,
@@ -264,7 +279,30 @@ var menuStyle = {
   },
   itemContentFront: {},
   itemContentBack: {},
+  header: {
+    padding: "".concat(_theme.default.menuTitlePaddingY, " ").concat(_theme.default.menuTitlePaddingX),
+    width: '100%',
+    transition: "width ".concat(animationDuration, " ").concat(transitionFunc),
+    color: _theme.default.menuFontColor,
+    '$wrapperDark &': {
+      color: _theme.default.menuDarkFontColor
+    },
+    '$wrapperCollpase &': {
+      paddingLeft: '0',
+      paddingRight: '0',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center'
+    },
+    '& + div': {
+      borderTop: "1px solid ".concat(_theme.default.menuHeaderBorderColor),
+      '$wrapperDark &': {
+        borderTop: "1px solid ".concat(_theme.default.menuDarkHeaderBorderColor)
+      }
+    }
+  },
   title: {
+    cursor: 'inherit',
     '&:hover': {
       color: 'inherit'
     },
@@ -276,13 +314,13 @@ var menuStyle = {
     minWidth: 0,
     padding: "".concat(_theme.default.menuTitlePaddingY, " ").concat(_theme.default.menuTitlePaddingX),
     '$wrapperInline $childrenHasExpand  $item:not($itemHasChildren)  $itemContentBack > &': {
-      paddingRight: _theme.default.menuExpandWidth
+      paddingRight: "calc(".concat(_theme.default.menuIconMarginX, " + ").concat(_theme.default.menuTitlePaddingX, " + ").concat(_theme.default.menuExpandSize, ")")
     },
     '$wrapperInline $itemHasChildren > $itemContentBack > &': {
       paddingRight: 0
     },
     '$childrenHasExpand > $item:not($itemHasChildren) > $itemContentBack > &': {
-      paddingRight: _theme.default.menuExpandWidth
+      paddingRight: "calc(".concat(_theme.default.menuIconMarginX, " + ").concat(_theme.default.menuTitlePaddingX, " + ").concat(_theme.default.menuExpandSize, ")")
     },
     '$childrenHasExpand $itemHasChildren > $itemContentBack > &': {
       paddingRight: 0
@@ -291,12 +329,24 @@ var menuStyle = {
       paddingLeft: 0
     }
   },
+  titleIcon: {
+    '& + $titleContent': {
+      paddingLeft: _theme.default.menuIconMarginX
+    },
+    lineHeight: 1,
+    display: 'inline-flex'
+  },
+  titleContent: {
+    whiteSpace: 'pre-wrap',
+    transition: "opacity ".concat(animationDuration, " ").concat(transitionFunc),
+    opacity: 1
+  },
   expand: {
     alignSelf: 'stretch',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    '$wrapperLight &': {
+    '[data-soui-theme=light] &': {
       color: _theme.default.menuIconColor
     },
     '& > $icon': {
@@ -306,14 +356,14 @@ var menuStyle = {
       '$wrapper:not($wrapperVertical) $itemOpen > $itemContent &': {
         transform: 'rotate(180deg)'
       }
+    }
+  },
+  expandVertical: {
+    '&[dir=ltr] svg': {
+      transform: 'rotate(-90deg)'
     },
-    '$wrapperVertical &': {
-      '&[dir=ltr]': {
-        transform: 'rotate(-90deg)'
-      },
-      '&[dir=rtl]': {
-        transform: 'rotate(90deg)'
-      }
+    '&[dir=rtl] svg': {
+      transform: 'rotate(90deg)'
     }
   },
   icon: {},
@@ -329,13 +379,14 @@ var menuStyle = {
     width: 'auto',
     visibility: 'hidden',
     paddingLeft: _theme.default.menuTitlePaddingX,
-    paddingRight: '8px',
+    paddingRight: _theme.default.menuIconMarginX,
     '$itemHasChildren > $itemContent &': {
       visibility: 'visible'
     }
   },
   expandBack: {
-    width: _theme.default.menuExpandWidth
+    paddingRight: _theme.default.menuTitlePaddingX,
+    paddingLeft: _theme.default.menuIconMarginX
   },
   scrollbar: {
     position: 'absolute',