@sheinx/shineout-style 3.5.2 → 3.5.3-beta.2

package/cjs/select/select.js

@@ -59,6 +59,7 @@ var wrapper = inputBorder.wrapper,
   wrapperDisabled = inputBorder.wrapperDisabled,
   resetWrapper = _objectWithoutProperties(inputBorder, ["wrapper", "wrapperDisabled"]);
 var selectStyle = _objectSpread(_objectSpread({
+  rootClass: {},
   wrapper: _objectSpread(_objectSpread({
     display: 'inline-block',
     position: 'relative',

package/cjs/slider/slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["slider.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,MAAM,eAAe,GAAG,MAAM,aAAa,CAAC;AAElD,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,eAAe,CAwR1C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["slider.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,MAAM,eAAe,GAAG,MAAM,aAAa,CAAC;AAElD,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,eAAe,CAyR1C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/cjs/slider/slider.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _theme = _interopRequireDefault(require("@sheinx/theme"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var sliderStyle = {
+  rootClass: {},
   wrapper: {
     display: 'block',
     padding: "20px 10px",

package/cjs/spin/spin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spin.d.ts","sourceRoot":"","sources":["spin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAkB3C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,WAAW,CA8E1C,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"spin.d.ts","sourceRoot":"","sources":["spin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAkB3C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,WAAW,CA+E1C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/cjs/spin/spin.js

@@ -26,7 +26,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 spinStyle = _objectSpread(_objectSpread({}, _animation.default), {}, {
+var spinStyle = _objectSpread(_objectSpread({
+  rootClass: {}
+}, _animation.default), {}, {
   default: (0, _default2.default)(12),
   chasingDots: _chasingDots.default,
   cubeGrid: _cubeGrid.default,

package/cjs/steps/steps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["steps.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAEhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CAsrBxC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["steps.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAEhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CAurBxC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/cjs/steps/steps.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _theme = _interopRequireDefault(require("@sheinx/theme"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var stepsStyle = {
+  rootClass: {},
   steps: {
     display: 'flex',
     '& $step:last-child ': {

package/cjs/sticky/index.d.ts

@@ -1,5 +1,5 @@
 import stickyStyle from './sticky';
-declare const useStickyStyle: () => import("jss").Classes<"wrapper">;
+declare const useStickyStyle: () => import("jss").Classes<keyof import("@sheinx/base").StickyClasses>;
 export { stickyStyle, useStickyStyle };
 export default useStickyStyle;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,WAAW,MAAM,UAAU,CAAC;AAEnC,QAAA,MAAM,cAAc,wCAAgC,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC;AACvC,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,WAAW,MAAM,UAAU,CAAC;AAEnC,QAAA,MAAM,cAAc,yEAAgC,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC;AACvC,eAAe,cAAc,CAAC"}

package/cjs/sticky/sticky.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sticky.d.ts","sourceRoot":"","sources":["sticky.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,MAAM,eAAe,GAAG,MAAM,aAAa,CAAC;AAElD,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,eAAe,CAI1C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"sticky.d.ts","sourceRoot":"","sources":["sticky.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,MAAM,eAAe,GAAG,MAAM,aAAa,CAAC;AAElD,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,eAAe,CAK1C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/cjs/sticky/sticky.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 // import token from '@sheinx/theme';
 
 var stickyStyle = {
+  rootClass: {},
   wrapper: {
     display: 'block'
   }

package/cjs/switch/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["switch.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAaxC,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,MAAM,aAAa,CA6K9C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["switch.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAaxC,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,MAAM,aAAa,CA8K9C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/cjs/switch/switch.js

@@ -23,7 +23,9 @@ var animation = {
   }
 };
 var transition = '.2s cubic-bezier(.34,.69,.1,1)';
-var switchStyle = _objectSpread(_objectSpread({}, animation), {}, {
+var switchStyle = _objectSpread(_objectSpread({
+  rootClass: {}
+}, animation), {}, {
   wrapper: {
     '[data-soui-role="form-control"] >  &': {
       margin: '5px 0'

package/cjs/table/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["table.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAUxC,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAUhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CAyexC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["table.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAUxC,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAUhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CA0exC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/cjs/table/table.js

@@ -26,7 +26,9 @@ var globalStyle = {
     }
   }
 };
-var tableStyle = _objectSpread(_objectSpread({}, globalStyle), {}, {
+var tableStyle = _objectSpread(_objectSpread({
+  rootClass: {}
+}, globalStyle), {}, {
   wrapper: {
     display: 'flex',
     flexDirection: 'column',

package/cjs/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAuQxC,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,WAAW,CA2f1C,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAwQxC,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,WAAW,CA4f1C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/cjs/tabs/tabs.js

@@ -50,6 +50,7 @@ var getCardStyle = function getCardStyle() {
         '& $cardHr': {
           '&:after': {
             right: 0,
+            left: 'auto',
             width: '1px',
             height: '100%'
           }
@@ -329,6 +330,7 @@ var getHeaderStyle = function getHeaderStyle() {
   });
 };
 var tabsStyle = {
+  rootClass: {},
   tabs: {
     // 水平模式
     '&[data-soui-position^="top-"],&[data-soui-position^="bottom-"]': {

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,CAgJxC,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,CAiJxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/cjs/tag/tag.js

@@ -122,6 +122,7 @@ var tag = function tag(type) {
   };
 };
 var TagStyle = {
+  rootClass: {},
   tag: {
     display: 'inline-flex',
     padding: "".concat(_theme.default.tagPaddingY, " ").concat(_theme.default.tagPaddingX),

package/cjs/textarea/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["textarea.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAyDxC,QAAA,MAAM,KAAK,EAAE,QAAQ,CAAC,MAAM,eAAe,CAqD1C,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["textarea.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAyDxC,QAAA,MAAM,KAAK,EAAE,QAAQ,CAAC,MAAM,eAAe,CAsD1C,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/cjs/textarea/textarea.js

@@ -57,7 +57,9 @@ var inputBorderToken = {
 var inputBorder = (0, _inputBorder.default)('wrapper', inputBorderToken);
 var wrapper = inputBorder.wrapper,
   resetWrapper = _objectWithoutProperties(inputBorder, ["wrapper"]);
-var input = _objectSpread(_objectSpread(_objectSpread({}, inputBorder), {}, {
+var input = _objectSpread(_objectSpread(_objectSpread({
+  rootClass: {}
+}, inputBorder), {}, {
   wrapper: _objectSpread({
     display: 'inline-flex',
     flexDirection: 'column',

package/cjs/tooltip/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AA+C9C,QAAA,MAAM,YAAY,EAAE,QAAQ,CAAC,MAAM,cAAc,CAoMhD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AA+C9C,QAAA,MAAM,YAAY,EAAE,QAAQ,CAAC,MAAM,cAAc,CAkKhD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/cjs/tooltip/tooltip.js

@@ -13,7 +13,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var arrowGap = 12;
-var arrowMargin = '8px';
+var arrowHeight = 8;
 var animation = {
   '@keyframes fadeIn': {
     '0%': {
@@ -56,7 +56,9 @@ var animation = {
     }
   }
 };
-var tooltipStyle = _objectSpread(_objectSpread({}, animation), {}, {
+var tooltipStyle = _objectSpread(_objectSpread({
+  rootClass: {}
+}, animation), {}, {
   wrapper: {
     display: 'none',
     cursor: 'pointer',
@@ -67,184 +69,149 @@ var tooltipStyle = _objectSpread(_objectSpread({}, animation), {}, {
     color: _theme.default.tooltipColor,
     wordWrap: 'break-word',
     pointerEvents: 'none',
+    '--tooltip-background-color': _theme.default.tooltipBackgroundColor,
     '&[data-soui-type^="light"]': {
       backgroundColor: _theme.default.tooltipLightBackgroundColor,
       color: _theme.default.tooltipLightColor,
       border: "1px solid ".concat(_theme.default.tooltipLightBorderColor),
-      boxSizing: 'border-box'
+      boxSizing: 'border-box',
+      '--tooltip-background-color': _theme.default.tooltipLightBackgroundColor,
+      '&[data-soui-position^="top"] $arrow': {
+        transform: 'translateY(calc(100% - 1px)) rotate(-180deg)'
+      },
+      '&[data-soui-position^="bottom"] $arrow': {
+        transform: 'translateY(calc(-100% + 1px)) rotate(0deg)'
+      }
     },
     '&[data-soui-type^="primary"]': {
       backgroundColor: _theme.default.tooltipPrimaryBackgroundColor,
-      color: _theme.default.tooltipPrimaryColor
+      color: _theme.default.tooltipPrimaryColor,
+      '--tooltip-background-color': _theme.default.tooltipPrimaryBackgroundColor
     },
     '&[data-soui-type^="success"]': {
       backgroundColor: _theme.default.tooltipSuccessBackgroundColor,
-      color: _theme.default.tooltipSuccessColor
+      color: _theme.default.tooltipSuccessColor,
+      '--tooltip-background-color': _theme.default.tooltipSuccessBackgroundColor
     },
     '&[data-soui-type^="warning"]': {
       backgroundColor: _theme.default.tooltipWarningBackgroundColor,
-      color: _theme.default.tooltipWarningColor
+      color: _theme.default.tooltipWarningColor,
+      '--tooltip-background-color': _theme.default.tooltipWarningBackgroundColor
     },
     '&[data-soui-type^="danger"]': {
       backgroundColor: _theme.default.tooltipDangerBackgroundColor,
-      color: _theme.default.tooltipDangerColor
-    },
-    // '&::before': {
-    '& $arrow': {
-      'z-index': 1,
-      position: 'absolute',
-      content: '" "',
-      display: 'block',
-      border: "inherit",
-      borderLeftColor: 'transparent',
-      width: '8.4px',
-      height: '8.4px',
-      boxSizing: 'content-box',
-      background: 'inherit',
-      borderBottomColor: 'transparent'
+      color: _theme.default.tooltipDangerColor,
+      '--tooltip-background-color': _theme.default.tooltipDangerBackgroundColor
     },
     '&[data-soui-position^="bottom"]': {
       marginTop: arrowGap - 2,
-      '&[dir=ltr] $arrow': {
-        transform: 'translate(0, -50%) rotate(-45deg)'
-      },
-      '&[dir=rtl] $arrow': {
-        transform: 'translate(0, -50%) rotate(45deg)'
-      },
-      '& $arrow::after': {
-        top: arrowGap * -1,
-        left: '0',
-        right: '0',
-        content: '" "',
-        display: 'block',
-        height: arrowGap,
-        position: 'absolute'
+      '& $arrow': {
+        transform: 'translateY(calc(-100% + 1px)) rotate(0deg)'
       }
     },
     '&[data-soui-position^="top"]': {
       marginTop: (arrowGap - 2) * -1,
-      '&[dir=ltr] $arrow': {
-        transform: 'translate(0, 50%) rotate(135deg)'
-      },
-      '&[dir=rtl] $arrow': {
-        transform: 'translate(0, 50%) rotate(-135deg)'
+      '& $arrow': {
+        transform: 'translateY(calc(100% + 1px)) rotate(-180deg)'
       }
-      // '&::before': {
-      //   bottom: '0',
-      //   transform: 'translate(0, 50%) rotate(135deg)',
-      //   left: '0',
-      //   right: '0',
-      //   margin: 'auto',
-      // },
-      // '&[dir=ltr]::before': {
-      //   transform: 'translate(0, 50%) rotate(135deg)',
-      // },
-      // '&[dir=rtl]::before': {
-      //   transform: 'translate(0, 50%) rotate(-135deg)',
-      // },
-      // '&::after': {
-      //   bottom: arrowGap * -1,
-      //   left: '0',
-      //   right: '0',
-      //   content: '" "',
-      //   display: 'block',
-      //   height: arrowGap,
-      //   position: 'absolute',
-      // },
     },
     '&[data-soui-position^="left"]': {
-      marginLeft: (arrowGap - 2) * -1,
-      '&[dir=ltr] $arrow': {
-        transform: 'translate(50%, 0) rotate(45deg)'
+      '&[dir=ltr]': {
+        marginLeft: -(arrowGap - 2),
+        '& $arrow': {
+          transform: 'translateX(11px) rotate(90deg)'
+        }
       },
-      '&[dir=rtl] $arrow': {
-        transform: 'translate(50%, 0) rotate(135deg)'
+      '&[dir=rtl]': {
+        marginRight: -(arrowGap - 2),
+        '& $arrow': {
+          left: 0,
+          transform: 'translateX(11px) rotate(90deg)'
+        }
       }
-
-      // '&[dir=ltr]': { marginLeft: (arrowGap - 2) * -1 },
-      // '&[dir=rtl]': { marginRight: (arrowGap - 2) * -1 },
-      // '&::before': {
-      //   right: 0,
-      //   top: '0',
-      //   bottom: '0',
-      //   margin: 'auto',
-      // },
-      // '&[dir=ltr]::before': {
-      //   transform: 'translate(50%, 0) rotate(45deg)',
-      // },
-      // '&[dir=rtl]::before': {
-      //   transform: 'translate(50%, 0) rotate(135deg)',
-      // },
-      // '&::after': {
-      //   left: arrowGap * -1,
-      //   top: '0',
-      //   bottom: '0',
-      //   content: '" "',
-      //   display: 'block',
-      //   width: arrowGap,
-      //   position: 'absolute',
-      // },
     },
     '&[data-soui-position^="right"]': {
-      marginLeft: arrowGap - 2,
-      '&[dir=ltr] $arrow': {
-        transform: 'translate(-50%, 0) rotate(-135deg)'
+      '&[dir=ltr]': {
+        marginLeft: arrowGap - 2,
+        '& $arrow': {
+          transform: 'translateX(-11px) rotate(-90deg)'
+        }
       },
-      '&[dir=rtl] $arrow': {
-        transform: 'translate(-50%, 0) rotate(-45deg)'
+      '&[dir=rtl]': {
+        marginRight: arrowGap - 2,
+        '& $arrow': {
+          left: 0,
+          transform: 'translateX(-11px) rotate(-90deg)'
+        }
       }
-
-      // '&[dir=ltr]': { marginLeft: arrowGap - 2 },
-      // '&[dir=rtl]': { marginRight: arrowGap - 2 },
-      // '&::before': {
-      //   left: '0',
-      //   top: '0',
-      //   bottom: '0',
-      //   margin: 'auto',
-      // },
-      // '&[dir=ltr]::before': {
-      //   transform: 'translate(-50%, 0) rotate(-135deg)',
-      // },
-      // '&[dir=rtl]::before': {
-      //   transform: 'translate(-50%, 0) rotate(-45deg)',
-      // },
-      // '&::after': {
-      //   left: arrowGap * -1,
-      //   top: '0',
-      //   bottom: '0',
-      //   content: '" "',
-      //   display: 'block',
-      //   width: arrowGap,
-      //   position: 'absolute',
-      // },
     }
-    // '&&[data-soui-position$="-left"]::before': { left: arrowMargin, right: 'auto' },
-    // '&&[data-soui-position$="-right"]::before': { right: arrowMargin, left: 'auto' },
-    // '&&[data-soui-position$="-top"]::before': { top: arrowMargin, bottom: 'auto' },
-    // '&&[data-soui-position$="-bottom"]::before': { bottom: arrowMargin, top: 'auto' },
   },
   wrapperOpen: {
     display: 'block',
+    '&::after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute'
+    },
     '&[data-soui-position^="bottom"]': {
-      animation: '$fadeIn .3s ease, $moveBottom .3s cubic-bezier(.71,1.7,.77,1.24);'
+      animation: '$fadeIn .3s ease, $moveBottom .3s cubic-bezier(.71,1.7,.77,1.24);',
+      '&::after': {
+        width: '100%',
+        height: arrowGap,
+        top: 0,
+        transform: 'translateY(-100%)'
+      }
     },
     '&[data-soui-position^="top"]': {
-      animation: '$fadeIn .3s ease, $moveTop .3s cubic-bezier(.71,1.7,.77,1.24);'
+      animation: '$fadeIn .3s ease, $moveTop .3s cubic-bezier(.71,1.7,.77,1.24);',
+      '&::after': {
+        width: '100%',
+        height: arrowGap,
+        bottom: 0,
+        transform: 'translateY(100%)'
+      }
     },
     '&[data-soui-position^="left"]': {
-      animation: '$fadeIn .3s ease, $moveLeft .3s cubic-bezier(.71,1.7,.77,1.24);'
+      animation: '$fadeIn .3s ease, $moveLeft .3s cubic-bezier(.71,1.7,.77,1.24);',
+      '&::after': {
+        width: arrowGap,
+        height: '100%',
+        top: 0,
+        right: 0,
+        transform: 'translateX(100%)'
+      }
     },
     '&[data-soui-position^="right"]': {
-      animation: '$fadeIn .3s ease, $moveRight .3s cubic-bezier(.71,1.7,.77,1.24);'
+      animation: '$fadeIn .3s ease, $moveRight .3s cubic-bezier(.71,1.7,.77,1.24);',
+      '&::after': {
+        width: arrowGap,
+        height: '100%',
+        top: 0,
+        right: 0,
+        transform: 'translateX(-100%)'
+      }
     }
   },
   target: {
     display: 'inline-block'
   },
   arrow: {
-    // before
+    zIndex: 1,
+    position: 'absolute',
+    overflow: 'hidden',
+    width: arrowHeight * 2,
+    height: arrowHeight,
+    pointerEvents: 'none',
+    transformOrigin: 'center center',
+    transform: 'translateY(calc(100% + 1px)) rotate(-180deg)',
     '&::before': {
-      content: "''"
+      display: 'block',
+      content: '""',
+      bottom: 0,
+      width: '100%',
+      height: '100%',
+      backgroundColor: 'var(--tooltip-background-color)',
+      clipPath: "path('M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z')"
     }
   },
   content: {

package/cjs/transfer/transfer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transfer.d.ts","sourceRoot":"","sources":["transfer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG,MAAM,eAAe,CAAC;AAElD,QAAA,MAAM,aAAa,EAAE,QAAQ,CAAC,aAAa,CA0M1C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"transfer.d.ts","sourceRoot":"","sources":["transfer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG,MAAM,eAAe,CAAC;AAElD,QAAA,MAAM,aAAa,EAAE,QAAQ,CAAC,aAAa,CA2M1C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/cjs/transfer/transfer.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _theme = _interopRequireDefault(require("@sheinx/theme"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var TransferStyle = {
+  rootClass: {},
   transfer: {
     display: 'flex',
     alignItems: 'stretch',

package/cjs/tree/tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["tree.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,CA2OtC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["tree.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,CA4OtC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/cjs/tree/tree.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _theme = _interopRequireDefault(require("@sheinx/theme"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var treeStyle = {
+  rootClass: {},
   tree: {},
   line: {
     '& $node': {

package/cjs/tree-select/tree-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-select.d.ts","sourceRoot":"","sources":["tree-select.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,MAAM,iBAAiB,CAAC;AAuD1D,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,mBAAmB,CAgelD,CAAC;AACF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"tree-select.d.ts","sourceRoot":"","sources":["tree-select.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,MAAM,iBAAiB,CAAC;AAuD1D,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,mBAAmB,CAielD,CAAC;AACF,eAAe,eAAe,CAAC"}

package/cjs/tree-select/tree-select.js

@@ -61,6 +61,7 @@ var wrapper = inputBorder.wrapper,
   wrapperDisabled = inputBorder.wrapperDisabled,
   resetWrapper = _objectWithoutProperties(inputBorder, ["wrapper", "wrapperDisabled"]);
 var treeSelectStyle = _objectSpread(_objectSpread({
+  rootClass: {},
   wrapper: _objectSpread(_objectSpread({
     display: 'inline-block',
     position: 'relative',

package/cjs/upload/upload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"upload.d.ts","sourceRoot":"","sources":["upload.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,MAAM,eAAe,GAAG,MAAM,aAAa,CAAC;AAElD,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,eAAe,CAkV1C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"upload.d.ts","sourceRoot":"","sources":["upload.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,MAAM,eAAe,GAAG,MAAM,aAAa,CAAC;AAElD,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,eAAe,CAmV1C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/cjs/upload/upload.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _theme = _interopRequireDefault(require("@sheinx/theme"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var uploadStyle = {
+  rootClass: {},
   wrapper: {
     display: 'block'
   },

package/cjs/version.d.ts

@@ -1,3 +1,3 @@
-declare const _default: "3.5.2";
+declare const _default: "3.5.3-beta.2";
 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,wBAAuB"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["version.ts"],"names":[],"mappings":";AAAA,wBAA8B"}

package/cjs/version.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = exports.default = '3.5.2';
+var _default = exports.default = '3.5.3-beta.2';

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,CA6J5C,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,CA8J5C,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/esm/alert/alert.js

@@ -1,5 +1,6 @@
 import Token from '@sheinx/theme';
 var alertStyle = {
+  rootClass: {},
   alert: {
     display: 'flex',
     width: '100%',

package/esm/badge/badge.d.ts

@@ -1,5 +1,6 @@
 import { JsStyles } from '../jss-style';
 export type BadgeClasses = {
+    rootClass: string;
     badge: string;
     count: string;
     dot: string;

package/esm/badge/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["badge.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IAEb,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IAEnB,KAAK,EAAE,MAAM,CAAC;IAEd,0BAA0B,EAAE,MAAM,CAAC;IACnC,iCAAiC,EAAE,MAAM,CAAC;CAC3C,CAAC;AACF,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAEhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CA4HxC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["badge.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IAEb,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IAEnB,KAAK,EAAE,MAAM,CAAC;IAEd,0BAA0B,EAAE,MAAM,CAAC;IACnC,iCAAiC,EAAE,MAAM,CAAC;CAC3C,CAAC;AACF,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAEhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CA6HxC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/esm/badge/badge.js

@@ -1,5 +1,6 @@
 import token from '@sheinx/theme';
 var badgeStyle = {
+  rootClass: {},
   badge: {
     boxSizing: 'border-box',
     width: 'fit-content',

package/esm/breadcrumb/breadcrumb.d.ts.map

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

package/esm/breadcrumb/breadcrumb.js

@@ -1,5 +1,6 @@
 import token from '@sheinx/theme';
 var breadcrumbStyle = {
+  rootClass: {},
   wrapper: {
     lineHeight: token.lineHeightDynamic,
     fontSize: token.breadcrumbFontSize,

package/esm/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAmL7C,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,MAAM,aAAa,CAgX9C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAmL7C,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,MAAM,aAAa,CAiX9C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/esm/button/button.js

@@ -182,6 +182,7 @@ var textBeforeLine = function textBeforeLine() {
 // };
 
 var ButtonStyle = {
+  rootClass: {},
   button: {
     outline: 'none',
     fontWeight: Token.buttonFontWeight,

package/esm/card/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["card.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;AAU9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CAgJtC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["card.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;AAU9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CAiJtC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/esm/card/card.js

@@ -13,6 +13,7 @@ var headerCommon = {
   minWidth: 0
 };
 var cardStyle = {
+  rootClass: {},
   wrapper: {
     display: 'flex',
     flexDirection: 'column',