@sheinx/shineout-style 3.2.0-rc.5 → 3.2.1

package/cjs/alert/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["alert.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,MAAM,YAAY,CAgJ5C,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["alert.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,MAAM,YAAY,CAuJ5C,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/cjs/alert/alert.js

@@ -91,7 +91,7 @@ var alertStyle = {
     width: _theme.default.alertFontSize,
     color: _theme.default.alertCloseFontColor,
     fontSize: _theme.default.alertFontSize,
-    height: _theme.default.lineHeightDynamic,
+    height: _theme.default.alertFontSize,
     flex: '0 0 auto',
     display: 'flex',
     alignItems: 'center',
@@ -101,8 +101,15 @@ var alertStyle = {
       color: _theme.default.alertCloseHoverColor
     }
   },
+  closeWrapper: {
+    width: _theme.default.alertFontSize,
+    height: _theme.default.lineHeightDynamic,
+    display: 'flex',
+    alignItems: 'center'
+  },
   content: {
     flex: '1 1 0',
+    minWidth: 0,
     wordBreak: 'break-all'
   },
   pending: {

package/cjs/button/button.js

@@ -177,12 +177,17 @@ var textBeforeLine = function textBeforeLine() {
     }
   };
 };
-var loading = function loading(type, styles) {
-  var buttonStyle = button(type, styles);
-  return {
-    '&$loading': _objectSpread({}, buttonStyle['&$disabled'])
-  };
-};
+
+// const loading = (type: ButtonTypeWithoutLink, styles: ButtonStyleType) => {
+//   const buttonStyle = button(type, styles);
+
+//   return {
+//     '&$loading': {
+//       ...buttonStyle['&$disabled'],
+//     },
+//   };
+// };
+
 var ButtonStyle = {
   button: {
     outline: 'none',
@@ -303,13 +308,26 @@ var ButtonStyle = {
     cursor: 'not-allowed'
   },
   loading: {
-    cursor: 'not-allowed',
-    '&$default': _objectSpread({}, loading('Secondary', '')),
-    '&$primary': _objectSpread({}, loading('Primary', '')),
-    '&$success': _objectSpread({}, loading('Success', '')),
-    '&$danger': _objectSpread({}, loading('Danger', '')),
-    '&$warning': _objectSpread({}, loading('Warning', '')),
-    '&$secondary': _objectSpread({}, loading('Secondary', ''))
+    cursor: 'not-allowed'
+
+    // '&$default': {
+    //   ...loading('Secondary', ''),
+    // },
+    // '&$primary': {
+    //   ...loading('Primary', ''),
+    // },
+    // '&$success': {
+    //   ...loading('Success', ''),
+    // },
+    // '&$danger': {
+    //   ...loading('Danger', ''),
+    // },
+    // '&$warning': {
+    //   ...loading('Warning', ''),
+    // },
+    // '&$secondary': {
+    //   ...loading('Secondary', ''),
+    // },
   },
   groupItem: {},
   group: {

package/cjs/date-picker/date-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["date-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,MAAM,iBAAiB,CAAC;AAuD1D,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,mBAAmB,CAwmBlD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["date-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,MAAM,iBAAiB,CAAC;AAuD1D,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,mBAAmB,CAymBlD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/cjs/date-picker/date-picker.js

@@ -64,6 +64,7 @@ var datePickerStyle = _objectSpread(_objectSpread({
     position: 'relative',
     // width: token.datePickerDateWidth,
     width: 240,
+    cursor: 'pointer',
     '&[data-soui-type="datetime"]': {
       // width: token.datePickerDatetimeWidth,
       width: 240

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;AACxC,MAAM,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC;AAM9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CA8atC,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,CA8ftC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/cjs/menu/menu.js

@@ -15,7 +15,9 @@ var menuStyle = {
     width: '100%',
     backgroundColor: _theme.default.menuItemBackgroundColor,
     transition: "width ".concat(animationDuration, " ").concat(transitionFunc),
-    color: _theme.default.menuFontColor
+    color: _theme.default.menuFontColor,
+    display: 'flex',
+    flexDirection: 'column'
   },
   wrapperLight: {},
   wrapperDark: {
@@ -35,7 +37,6 @@ var menuStyle = {
       justifyContent: 'center'
     },
     '& $titleContent': {
-      opacity: 0,
       alignItems: 'center',
       whiteSpace: 'nowrap',
       overflow: 'hidden'
@@ -92,12 +93,46 @@ var menuStyle = {
     }
   },
   scrollbox: {
+    flex: 1,
+    minWidth: 0,
+    minHeight: 0,
+    overflow: 'auto',
+    // scrollbarWidth: 'thin',
+    // '$wrapperLight &': {
+    //   scrollbarColor: 'rgba(0, 0, 0, 0.1) transparent',
+    //   '&::-moz-scrollbar-thumb:hover': {
+    //     backgroundColor: 'rgba(0, 0, 0, 0.2)',
+    //   },
+    // },
+    // '$wrapperDark &': {
+    //   scrollbarColor: 'rgba(255, 255, 255, 0.4) transparent',
+    // },
     '$wrapperVertical &': {
-      overflow: 'hidden',
-      height: '100%'
+      overflowX: 'hidden'
     },
     '$wrapperHorizontal &': {
-      overflow: 'hidden'
+      overflowY: 'hidden'
+    },
+    '&::-webkit-scrollbar': {
+      width: '6px',
+      height: '6px'
+    },
+    '&::-webkit-scrollbar-thumb': {
+      border: '0px solid transparent',
+      backgroundClip: 'content-box',
+      borderRadius: '11px',
+      '$wrapperLight &': {
+        backgroundColor: 'rgba(0, 0, 0, 0.05)',
+        '&:hover': {
+          backgroundColor: 'rgba(0, 0, 0, 0.1)'
+        }
+      },
+      '$wrapperDark &': {
+        backgroundColor: 'rgba(255, 255, 255, 0.4)',
+        '&:hover': {
+          backgroundColor: 'rgba(255, 255, 255, 0.5)'
+        }
+      }
     }
   },
   root: {
@@ -112,11 +147,9 @@ var menuStyle = {
     }
   },
   wrapperInline: {},
-  wrapperVertical: {
-    position: 'relative'
-  },
+  wrapperVertical: {},
   wrapperHorizontal: {
-    position: 'relative'
+    flexDirection: 'row'
   },
   wrapperHasOpen: {},
   children: {
@@ -147,6 +180,9 @@ var menuStyle = {
     alignItems: 'center',
     cursor: 'pointer',
     position: 'relative',
+    '&  a': {
+      transition: 'none'
+    },
     '[data-soui-theme=light] &': {
       color: _theme.default.menuItemFontColor,
       backgroundColor: _theme.default.menuItemBackgroundColor,
@@ -177,6 +213,12 @@ var menuStyle = {
           color: _theme.default.menuItemActiveFontColor
         }
       },
+      '[data-soui-theme=light] $itemDisabled&': {
+        color: _theme.default.menuItemActiveDisabledFontColor,
+        '& $icon': {
+          color: _theme.default.menuItemActiveDisabledFontColor
+        }
+      },
       '[data-soui-theme=dark][data-soui-mode=inline] &::before, [data-soui-theme=dark][data-soui-mode=vertical] &::before': {
         content: '""',
         position: 'absolute',
@@ -185,7 +227,25 @@ var menuStyle = {
         bottom: 0,
         width: '3px',
         backgroundColor: _theme.default.menuDarkItemActiveBackgroundColor
+      },
+      '$wrapperCollpase[data-soui-theme=light] $root > &': {
+        color: _theme.default.menuItemCollpaseActiveFontColor,
+        backgroundColor: _theme.default.menuItemCollpaseActiveBackgroundColor,
+        '& $icon': {
+          color: _theme.default.menuItemCollpaseActiveFontColor
+        }
+      },
+      '$wrapperCollpase[data-soui-theme=dark] $root > &': {
+        color: _theme.default.menuDarkItemCollpaseActiveFontColor,
+        backgroundColor: _theme.default.menuDarkItemCollpaseActiveBackgroundColor,
+        '& $icon': {
+          color: _theme.default.menuDarkItemCollpaseActiveFontColor
+        }
+      },
+      '$wrapperCollpase $root > &::before': {
+        display: 'none'
       }
+
       // '[data-soui-theme=light][data-soui-mode=vertical]:not($wrapperCollpase) &': {
       //   '&::before': {
       //     display: 'block',
@@ -209,13 +269,29 @@ var menuStyle = {
           color: _theme.default.menuItemActiveFontColor
         }
       },
+      '[data-soui-theme=light] $itemDisabled&': {
+        color: _theme.default.menuItemActiveDisabledFontColor,
+        '& $icon': {
+          color: _theme.default.menuItemActiveDisabledFontColor
+        }
+      },
       '$wrapperCollpase[data-soui-theme=light] $root > &': {
-        color: _theme.default.menuItemActiveFontColor,
-        backgroundColor: _theme.default.menuItemBackgroundColor,
+        color: _theme.default.menuItemCollpaseActiveFontColor,
+        backgroundColor: _theme.default.menuItemCollpaseActiveBackgroundColor,
         '& $icon': {
-          color: _theme.default.menuItemActiveFontColor
+          color: _theme.default.menuItemCollpaseActiveFontColor
         }
       },
+      '$wrapperCollpase[data-soui-theme=dark] $root > &': {
+        color: _theme.default.menuDarkItemCollpaseActiveFontColor,
+        backgroundColor: _theme.default.menuDarkItemCollpaseActiveBackgroundColor,
+        '& $icon': {
+          color: _theme.default.menuDarkItemCollpaseActiveFontColor
+        }
+      },
+      '$wrapperCollpase $root > &::before': {
+        display: 'none'
+      },
       '[data-soui-theme=dark]:not($wrapperCollpase) &': {
         color: _theme.default.menuDarkItemActiveFontColor,
         backgroundColor: _theme.default.menuDarkItemActiveBackgroundColor,
@@ -280,7 +356,7 @@ var menuStyle = {
   itemContentFront: {},
   itemContentBack: {},
   header: {
-    padding: "".concat(_theme.default.menuTitlePaddingY, " ").concat(_theme.default.menuTitlePaddingX),
+    padding: "".concat(_theme.default.menuHeaderPaddingX, " ").concat(_theme.default.menuHeaderPaddingY),
     width: '100%',
     transition: "width ".concat(animationDuration, " ").concat(transitionFunc),
     color: _theme.default.menuFontColor,
@@ -337,9 +413,11 @@ var menuStyle = {
     display: 'inline-flex'
   },
   titleContent: {
-    whiteSpace: 'pre-wrap',
-    transition: "opacity ".concat(animationDuration, " ").concat(transitionFunc),
-    opacity: 1
+    whiteSpace: 'pre-wrap'
+    // '$wrapperCollpase &': {
+    //   transition: `opacity ${animationDuration} ${transitionFunc}`,
+    // },
+    // opacity: 1,
   },
   expand: {
     alignSelf: 'stretch',

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

@@ -1 +1 @@
-{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["search.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,MAAM,MAAM,mBAAmB,GAAG,MAAM,iBAAiB,CAAC;AAE1D,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,mBAAmB,CA6FlD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["search.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,MAAM,MAAM,mBAAmB,GAAG,MAAM,iBAAiB,CAAC;AAE1D,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,mBAAmB,CAoElD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/cjs/menu/search.js

@@ -17,36 +17,12 @@ var menuSearchStyle = {
   wrapperDark: (_wrapperDark = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_wrapperDark, (0, _theme.getTokenName)('inputClearColor'), _theme.default.menuSearchDarkClearColor), (0, _theme.getTokenName)('inputHoverClearColor'), _theme.default.menuSearchDarkHoverClearColor), (0, _theme.getTokenName)('inputBorderColor'), _theme.default.menuSearchDarkBackgroundColor), (0, _theme.getTokenName)('inputBackgroundColor'), _theme.default.menuSearchDarkBackgroundColor), (0, _theme.getTokenName)('inputFontColor'), _theme.default.menuSearchDarkFontColor), (0, _theme.getTokenName)('inputPlaceholderFontColor'), _theme.default.menuSearchDarkPlaceholderFontColor), (0, _theme.getTokenName)('inputHoverBorderColor'), _theme.default.menuSearchDarkHoverBorderColor), (0, _theme.getTokenName)('inputHoverBackgroundColor'), _theme.default.menuSearchDarkHoverBackgroundColor), (0, _theme.getTokenName)('inputFocusBorderColor'), _theme.default.menuSearchDarkFocusBorderColor), (0, _theme.getTokenName)('inputFocusBackgroundColor'), _theme.default.menuSearchDarkFocusBackgroundColor), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_wrapperDark, (0, _theme.getTokenName)('inputFocusShadow'), _theme.default.menuSearchDarkFocusShadow), (0, _theme.getTokenName)('inputDisabledBorderColor'), _theme.default.menuSearchDarkBackgroundColor), (0, _theme.getTokenName)('inputDisabledBackgroundColor'), _theme.default.menuSearchDarkBackgroundColor), (0, _theme.getTokenName)('inputDisabledFontColor'), _theme.default.menuSearchDarkFontColor), (0, _theme.getTokenName)('inputDisabledPlaceholderFontColor'), _theme.default.menuSearchDarkPlaceholderFontColor)),
   wrapperLight: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, (0, _theme.getTokenName)('inputBorderColor'), _theme.default.menuSearchBackgroundColor), (0, _theme.getTokenName)('inputBackgroundColor'), _theme.default.menuSearchBackgroundColor), (0, _theme.getTokenName)('inputHoverBorderColor'), _theme.default.menuSearchHoverBorderColor), (0, _theme.getTokenName)('inputHoverBackgroundColor'), _theme.default.menuSearchHoverBackgroundColor), (0, _theme.getTokenName)('inputDisabledBorderColor'), _theme.default.menuSearchDisabledBackgroundColor), (0, _theme.getTokenName)('inputDisabledBackgroundColor'), _theme.default.menuSearchDisabledBackgroundColor), (0, _theme.getTokenName)('inputClearColor'), _theme.default.menuSearchClearColor), (0, _theme.getTokenName)('inputHoverClearColor'), _theme.default.menuSearchHoverClearColor),
   wrapperCollapsed: {
-    borderRadius: '50%',
-    padding: _theme.default.menuSearchPaddingX,
     cursor: 'pointer',
+    width: _theme.default.menuSearchCollpaseSize,
+    height: _theme.default.menuSearchCollpaseSize,
     lineHeight: 1,
-    '$wrapperLight&': {
-      background: _theme.default.menuSearchBackgroundColor,
-      border: "1px solid ".concat(_theme.default.menuSearchBackgroundColor),
-      '&:hover': {
-        background: _theme.default.menuSearchHoverBackgroundColor,
-        borderColor: _theme.default.menuSearchHoverBorderColor
-      },
-      '$wrapperDisabled&': {
-        background: _theme.default.menuSearchDisabledBackgroundColor,
-        borderColor: _theme.default.menuSearchDisabledBackgroundColor
-      }
-    },
-    '$wrapperDark&': {
-      background: _theme.default.menuSearchDarkBackgroundColor,
-      border: "1px solid ".concat(_theme.default.menuSearchDarkBackgroundColor),
-      '&:hover': {
-        background: _theme.default.menuSearchDarkHoverBackgroundColor,
-        borderColor: _theme.default.menuSearchDarkHoverBorderColor
-      },
-      '$wrapperDisabled&': {
-        background: _theme.default.menuSearchDarkBackgroundColor,
-        borderColor: _theme.default.menuSearchDarkBackgroundColor,
-        '&$search': {
-          color: _theme.default.menuSearchDarkIconColor
-        }
-      }
+    '& input': {
+      opacity: 0
     }
   },
   wrapperDisabled: {

package/cjs/slider/slider.js

@@ -158,7 +158,7 @@ var sliderStyle = {
       bottom: '100%',
       '&[dir=ltr]': {
         left: 0,
-        transform: 'translate(-50%, 10px)'
+        transform: 'translate(-50%, -10px)'
       },
       '&[dir=rtl]': {
         right: 0,

package/cjs/tag/tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA+I1C,QAAA,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,UAAU,CA4IxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA+I1C,QAAA,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,UAAU,CAwIxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/cjs/tag/tag.js

@@ -144,7 +144,6 @@ var TagStyle = {
   wrapper: {
     lineHeight: _theme.default.lineHeightDynamic
   },
-  container: {},
   inline: {
     display: 'inline-block',
     flex: 1,
@@ -166,9 +165,6 @@ var TagStyle = {
   small: {
     lineHeight: "calc(".concat(_theme.default.tagSmallFontSize, " + 6px)"),
     padding: "0 ".concat(_theme.default.tagSmallPaddingX),
-    '& $container': {
-      lineHeight: "calc(".concat(_theme.default.tagSmallFontSize, " + 6px)")
-    },
     '& $wrapper': {
       lineHeight: "calc(".concat(_theme.default.tagSmallFontSize, " + 6px)")
     },

package/cjs/version.d.ts

@@ -1,3 +1,3 @@
-declare const _default: "3.2.0-rc.5";
+declare const _default: "3.2.1";
 export default _default;
 //# sourceMappingURL=version.d.ts.map

package/cjs/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["version.ts"],"names":[],"mappings":";AAAA,wBAA4B"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["version.ts"],"names":[],"mappings":";AAAA,wBAAuB"}

package/cjs/version.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = exports.default = '3.2.0-rc.5';
+var _default = exports.default = '3.2.1';

package/esm/alert/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["alert.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,MAAM,YAAY,CAgJ5C,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["alert.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,MAAM,YAAY,CAuJ5C,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/esm/alert/alert.js

@@ -84,7 +84,7 @@ var alertStyle = {
     width: Token.alertFontSize,
     color: Token.alertCloseFontColor,
     fontSize: Token.alertFontSize,
-    height: Token.lineHeightDynamic,
+    height: Token.alertFontSize,
     flex: '0 0 auto',
     display: 'flex',
     alignItems: 'center',
@@ -94,8 +94,15 @@ var alertStyle = {
       color: Token.alertCloseHoverColor
     }
   },
+  closeWrapper: {
+    width: Token.alertFontSize,
+    height: Token.lineHeightDynamic,
+    display: 'flex',
+    alignItems: 'center'
+  },
   content: {
     flex: '1 1 0',
+    minWidth: 0,
     wordBreak: 'break-all'
   },
   pending: {

package/esm/button/button.js

@@ -170,12 +170,17 @@ var textBeforeLine = function textBeforeLine() {
     }
   };
 };
-var loading = function loading(type, styles) {
-  var buttonStyle = button(type, styles);
-  return {
-    '&$loading': _objectSpread({}, buttonStyle['&$disabled'])
-  };
-};
+
+// const loading = (type: ButtonTypeWithoutLink, styles: ButtonStyleType) => {
+//   const buttonStyle = button(type, styles);
+
+//   return {
+//     '&$loading': {
+//       ...buttonStyle['&$disabled'],
+//     },
+//   };
+// };
+
 var ButtonStyle = {
   button: {
     outline: 'none',
@@ -296,13 +301,26 @@ var ButtonStyle = {
     cursor: 'not-allowed'
   },
   loading: {
-    cursor: 'not-allowed',
-    '&$default': _objectSpread({}, loading('Secondary', '')),
-    '&$primary': _objectSpread({}, loading('Primary', '')),
-    '&$success': _objectSpread({}, loading('Success', '')),
-    '&$danger': _objectSpread({}, loading('Danger', '')),
-    '&$warning': _objectSpread({}, loading('Warning', '')),
-    '&$secondary': _objectSpread({}, loading('Secondary', ''))
+    cursor: 'not-allowed'
+
+    // '&$default': {
+    //   ...loading('Secondary', ''),
+    // },
+    // '&$primary': {
+    //   ...loading('Primary', ''),
+    // },
+    // '&$success': {
+    //   ...loading('Success', ''),
+    // },
+    // '&$danger': {
+    //   ...loading('Danger', ''),
+    // },
+    // '&$warning': {
+    //   ...loading('Warning', ''),
+    // },
+    // '&$secondary': {
+    //   ...loading('Secondary', ''),
+    // },
   },
   groupItem: {},
   group: {

package/esm/date-picker/date-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["date-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,MAAM,iBAAiB,CAAC;AAuD1D,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,mBAAmB,CAwmBlD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["date-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,MAAM,iBAAiB,CAAC;AAuD1D,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,mBAAmB,CAymBlD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/esm/date-picker/date-picker.js

@@ -57,6 +57,7 @@ var datePickerStyle = _objectSpread(_objectSpread({
     position: 'relative',
     // width: token.datePickerDateWidth,
     width: 240,
+    cursor: 'pointer',
     '&[data-soui-type="datetime"]': {
       // width: token.datePickerDatetimeWidth,
       width: 240

package/esm/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;AACxC,MAAM,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC;AAM9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CA8atC,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,CA8ftC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/esm/menu/menu.js

@@ -8,7 +8,9 @@ var menuStyle = {
     width: '100%',
     backgroundColor: token.menuItemBackgroundColor,
     transition: "width ".concat(animationDuration, " ").concat(transitionFunc),
-    color: token.menuFontColor
+    color: token.menuFontColor,
+    display: 'flex',
+    flexDirection: 'column'
   },
   wrapperLight: {},
   wrapperDark: {
@@ -28,7 +30,6 @@ var menuStyle = {
       justifyContent: 'center'
     },
     '& $titleContent': {
-      opacity: 0,
       alignItems: 'center',
       whiteSpace: 'nowrap',
       overflow: 'hidden'
@@ -85,12 +86,46 @@ var menuStyle = {
     }
   },
   scrollbox: {
+    flex: 1,
+    minWidth: 0,
+    minHeight: 0,
+    overflow: 'auto',
+    // scrollbarWidth: 'thin',
+    // '$wrapperLight &': {
+    //   scrollbarColor: 'rgba(0, 0, 0, 0.1) transparent',
+    //   '&::-moz-scrollbar-thumb:hover': {
+    //     backgroundColor: 'rgba(0, 0, 0, 0.2)',
+    //   },
+    // },
+    // '$wrapperDark &': {
+    //   scrollbarColor: 'rgba(255, 255, 255, 0.4) transparent',
+    // },
     '$wrapperVertical &': {
-      overflow: 'hidden',
-      height: '100%'
+      overflowX: 'hidden'
     },
     '$wrapperHorizontal &': {
-      overflow: 'hidden'
+      overflowY: 'hidden'
+    },
+    '&::-webkit-scrollbar': {
+      width: '6px',
+      height: '6px'
+    },
+    '&::-webkit-scrollbar-thumb': {
+      border: '0px solid transparent',
+      backgroundClip: 'content-box',
+      borderRadius: '11px',
+      '$wrapperLight &': {
+        backgroundColor: 'rgba(0, 0, 0, 0.05)',
+        '&:hover': {
+          backgroundColor: 'rgba(0, 0, 0, 0.1)'
+        }
+      },
+      '$wrapperDark &': {
+        backgroundColor: 'rgba(255, 255, 255, 0.4)',
+        '&:hover': {
+          backgroundColor: 'rgba(255, 255, 255, 0.5)'
+        }
+      }
     }
   },
   root: {
@@ -105,11 +140,9 @@ var menuStyle = {
     }
   },
   wrapperInline: {},
-  wrapperVertical: {
-    position: 'relative'
-  },
+  wrapperVertical: {},
   wrapperHorizontal: {
-    position: 'relative'
+    flexDirection: 'row'
   },
   wrapperHasOpen: {},
   children: {
@@ -140,6 +173,9 @@ var menuStyle = {
     alignItems: 'center',
     cursor: 'pointer',
     position: 'relative',
+    '&  a': {
+      transition: 'none'
+    },
     '[data-soui-theme=light] &': {
       color: token.menuItemFontColor,
       backgroundColor: token.menuItemBackgroundColor,
@@ -170,6 +206,12 @@ var menuStyle = {
           color: token.menuItemActiveFontColor
         }
       },
+      '[data-soui-theme=light] $itemDisabled&': {
+        color: token.menuItemActiveDisabledFontColor,
+        '& $icon': {
+          color: token.menuItemActiveDisabledFontColor
+        }
+      },
       '[data-soui-theme=dark][data-soui-mode=inline] &::before, [data-soui-theme=dark][data-soui-mode=vertical] &::before': {
         content: '""',
         position: 'absolute',
@@ -178,7 +220,25 @@ var menuStyle = {
         bottom: 0,
         width: '3px',
         backgroundColor: token.menuDarkItemActiveBackgroundColor
+      },
+      '$wrapperCollpase[data-soui-theme=light] $root > &': {
+        color: token.menuItemCollpaseActiveFontColor,
+        backgroundColor: token.menuItemCollpaseActiveBackgroundColor,
+        '& $icon': {
+          color: token.menuItemCollpaseActiveFontColor
+        }
+      },
+      '$wrapperCollpase[data-soui-theme=dark] $root > &': {
+        color: token.menuDarkItemCollpaseActiveFontColor,
+        backgroundColor: token.menuDarkItemCollpaseActiveBackgroundColor,
+        '& $icon': {
+          color: token.menuDarkItemCollpaseActiveFontColor
+        }
+      },
+      '$wrapperCollpase $root > &::before': {
+        display: 'none'
       }
+
       // '[data-soui-theme=light][data-soui-mode=vertical]:not($wrapperCollpase) &': {
       //   '&::before': {
       //     display: 'block',
@@ -202,13 +262,29 @@ var menuStyle = {
           color: token.menuItemActiveFontColor
         }
       },
+      '[data-soui-theme=light] $itemDisabled&': {
+        color: token.menuItemActiveDisabledFontColor,
+        '& $icon': {
+          color: token.menuItemActiveDisabledFontColor
+        }
+      },
       '$wrapperCollpase[data-soui-theme=light] $root > &': {
-        color: token.menuItemActiveFontColor,
-        backgroundColor: token.menuItemBackgroundColor,
+        color: token.menuItemCollpaseActiveFontColor,
+        backgroundColor: token.menuItemCollpaseActiveBackgroundColor,
         '& $icon': {
-          color: token.menuItemActiveFontColor
+          color: token.menuItemCollpaseActiveFontColor
         }
       },
+      '$wrapperCollpase[data-soui-theme=dark] $root > &': {
+        color: token.menuDarkItemCollpaseActiveFontColor,
+        backgroundColor: token.menuDarkItemCollpaseActiveBackgroundColor,
+        '& $icon': {
+          color: token.menuDarkItemCollpaseActiveFontColor
+        }
+      },
+      '$wrapperCollpase $root > &::before': {
+        display: 'none'
+      },
       '[data-soui-theme=dark]:not($wrapperCollpase) &': {
         color: token.menuDarkItemActiveFontColor,
         backgroundColor: token.menuDarkItemActiveBackgroundColor,
@@ -273,7 +349,7 @@ var menuStyle = {
   itemContentFront: {},
   itemContentBack: {},
   header: {
-    padding: "".concat(token.menuTitlePaddingY, " ").concat(token.menuTitlePaddingX),
+    padding: "".concat(token.menuHeaderPaddingX, " ").concat(token.menuHeaderPaddingY),
     width: '100%',
     transition: "width ".concat(animationDuration, " ").concat(transitionFunc),
     color: token.menuFontColor,
@@ -330,9 +406,11 @@ var menuStyle = {
     display: 'inline-flex'
   },
   titleContent: {
-    whiteSpace: 'pre-wrap',
-    transition: "opacity ".concat(animationDuration, " ").concat(transitionFunc),
-    opacity: 1
+    whiteSpace: 'pre-wrap'
+    // '$wrapperCollpase &': {
+    //   transition: `opacity ${animationDuration} ${transitionFunc}`,
+    // },
+    // opacity: 1,
   },
   expand: {
     alignSelf: 'stretch',

package/esm/menu/search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["search.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,MAAM,MAAM,mBAAmB,GAAG,MAAM,iBAAiB,CAAC;AAE1D,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,mBAAmB,CA6FlD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["search.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,MAAM,MAAM,mBAAmB,GAAG,MAAM,iBAAiB,CAAC;AAE1D,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,mBAAmB,CAoElD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/esm/menu/search.js

@@ -9,36 +9,12 @@ var menuSearchStyle = {
   wrapperDark: (_wrapperDark = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_wrapperDark, getTokenName('inputClearColor'), token.menuSearchDarkClearColor), getTokenName('inputHoverClearColor'), token.menuSearchDarkHoverClearColor), getTokenName('inputBorderColor'), token.menuSearchDarkBackgroundColor), getTokenName('inputBackgroundColor'), token.menuSearchDarkBackgroundColor), getTokenName('inputFontColor'), token.menuSearchDarkFontColor), getTokenName('inputPlaceholderFontColor'), token.menuSearchDarkPlaceholderFontColor), getTokenName('inputHoverBorderColor'), token.menuSearchDarkHoverBorderColor), getTokenName('inputHoverBackgroundColor'), token.menuSearchDarkHoverBackgroundColor), getTokenName('inputFocusBorderColor'), token.menuSearchDarkFocusBorderColor), getTokenName('inputFocusBackgroundColor'), token.menuSearchDarkFocusBackgroundColor), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_wrapperDark, getTokenName('inputFocusShadow'), token.menuSearchDarkFocusShadow), getTokenName('inputDisabledBorderColor'), token.menuSearchDarkBackgroundColor), getTokenName('inputDisabledBackgroundColor'), token.menuSearchDarkBackgroundColor), getTokenName('inputDisabledFontColor'), token.menuSearchDarkFontColor), getTokenName('inputDisabledPlaceholderFontColor'), token.menuSearchDarkPlaceholderFontColor)),
   wrapperLight: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, getTokenName('inputBorderColor'), token.menuSearchBackgroundColor), getTokenName('inputBackgroundColor'), token.menuSearchBackgroundColor), getTokenName('inputHoverBorderColor'), token.menuSearchHoverBorderColor), getTokenName('inputHoverBackgroundColor'), token.menuSearchHoverBackgroundColor), getTokenName('inputDisabledBorderColor'), token.menuSearchDisabledBackgroundColor), getTokenName('inputDisabledBackgroundColor'), token.menuSearchDisabledBackgroundColor), getTokenName('inputClearColor'), token.menuSearchClearColor), getTokenName('inputHoverClearColor'), token.menuSearchHoverClearColor),
   wrapperCollapsed: {
-    borderRadius: '50%',
-    padding: token.menuSearchPaddingX,
     cursor: 'pointer',
+    width: token.menuSearchCollpaseSize,
+    height: token.menuSearchCollpaseSize,
     lineHeight: 1,
-    '$wrapperLight&': {
-      background: token.menuSearchBackgroundColor,
-      border: "1px solid ".concat(token.menuSearchBackgroundColor),
-      '&:hover': {
-        background: token.menuSearchHoverBackgroundColor,
-        borderColor: token.menuSearchHoverBorderColor
-      },
-      '$wrapperDisabled&': {
-        background: token.menuSearchDisabledBackgroundColor,
-        borderColor: token.menuSearchDisabledBackgroundColor
-      }
-    },
-    '$wrapperDark&': {
-      background: token.menuSearchDarkBackgroundColor,
-      border: "1px solid ".concat(token.menuSearchDarkBackgroundColor),
-      '&:hover': {
-        background: token.menuSearchDarkHoverBackgroundColor,
-        borderColor: token.menuSearchDarkHoverBorderColor
-      },
-      '$wrapperDisabled&': {
-        background: token.menuSearchDarkBackgroundColor,
-        borderColor: token.menuSearchDarkBackgroundColor,
-        '&$search': {
-          color: token.menuSearchDarkIconColor
-        }
-      }
+    '& input': {
+      opacity: 0
     }
   },
   wrapperDisabled: {

package/esm/slider/slider.js

@@ -151,7 +151,7 @@ var sliderStyle = {
       bottom: '100%',
       '&[dir=ltr]': {
         left: 0,
-        transform: 'translate(-50%, 10px)'
+        transform: 'translate(-50%, -10px)'
       },
       '&[dir=rtl]': {
         right: 0,

package/esm/tag/tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA+I1C,QAAA,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,UAAU,CA4IxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA+I1C,QAAA,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,UAAU,CAwIxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/tag/tag.js

@@ -137,7 +137,6 @@ var TagStyle = {
   wrapper: {
     lineHeight: Token.lineHeightDynamic
   },
-  container: {},
   inline: {
     display: 'inline-block',
     flex: 1,
@@ -159,9 +158,6 @@ var TagStyle = {
   small: {
     lineHeight: "calc(".concat(Token.tagSmallFontSize, " + 6px)"),
     padding: "0 ".concat(Token.tagSmallPaddingX),
-    '& $container': {
-      lineHeight: "calc(".concat(Token.tagSmallFontSize, " + 6px)")
-    },
     '& $wrapper': {
       lineHeight: "calc(".concat(Token.tagSmallFontSize, " + 6px)")
     },

package/esm/version.d.ts

@@ -1,3 +1,3 @@
-declare const _default: "3.2.0-rc.5";
+declare const _default: "3.2.1";
 export default _default;
 //# sourceMappingURL=version.d.ts.map

package/esm/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["version.ts"],"names":[],"mappings":";AAAA,wBAA4B"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["version.ts"],"names":[],"mappings":";AAAA,wBAAuB"}

package/esm/version.js

@@ -1 +1 @@
-export default '3.2.0-rc.5';
+export default '3.2.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sheinx/shineout-style",
-  "version": "3.2.0-rc.5",
+  "version": "3.2.1",
   "description": "",
   "keywords": [],
   "license": "MIT",
@@ -17,8 +17,8 @@
   "dependencies": {
     "jss": "10.9.2",
     "react-jss": "10.9.2",
-    "@sheinx/theme": "3.2.0-rc.5",
-    "@sheinx/base": "3.2.0-rc.5"
+    "@sheinx/theme": "3.2.1",
+    "@sheinx/base": "3.2.1"
   },
   "peerDependencies": {
     "core-js": ">=3"