@sheinx/shineout-style 3.9.18 → 3.10.0-beta.10

package/cjs/border-beam/border-beam.d.ts

@@ -0,0 +1,5 @@
+import type { BorderBeamClasses } from '@sheinx/base';
+import type { JsStyles } from '../jss-style';
+declare const borderBeamStyle: JsStyles<keyof BorderBeamClasses>;
+export default borderBeamStyle;
+//# sourceMappingURL=border-beam.d.ts.map

package/cjs/border-beam/border-beam.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-beam.d.ts","sourceRoot":"","sources":["border-beam.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAW7C,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,MAAM,iBAAiB,CAuDtD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/cjs/border-beam/border-beam.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _theme = require("@sheinx/theme");
+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 _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 MASK_SUPPORT = '@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor))';
+var PATH_SUPPORT = '@supports (offset-path: rect(0 auto auto 0 round 1px))';
+var gradient = 'linear-gradient(to left, ' + _theme.CommonToken['Brand-6'] + ' 0%, ' + _theme.CommonToken['Brand-5'] + ' 70%, transparent)';
+var borderBeamStyle = {
+  rootClass: {},
+  beam: _defineProperty(_defineProperty({
+    boxSizing: 'border-box',
+    display: 'none',
+    position: 'absolute',
+    inset: 'var(--soui-border-beam-inset-offset, 0px)',
+    borderRadius: 'var(--soui-border-beam-border-radius, 0px)',
+    zIndex: 1,
+    overflow: 'hidden',
+    pointerEvents: 'none',
+    padding: 'var(--soui-border-beam-line-width, 1px)'
+  }, MASK_SUPPORT, _defineProperty({
+    '--soui-border-beam-mask': 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+    WebkitMask: 'var(--soui-border-beam-mask)',
+    mask: 'var(--soui-border-beam-mask)',
+    WebkitMaskComposite: 'xor',
+    maskComposite: 'exclude'
+  }, PATH_SUPPORT, {
+    display: 'block',
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: 'var(--soui-border-beam-size, 100px)',
+      aspectRatio: '1 / 1',
+      opacity: 0.95,
+      backgroundImage: 'var(--soui-border-beam-gradient, ' + gradient + ')',
+      offsetAnchor: '90% 50%',
+      offsetDistance: '0%',
+      offsetPath: 'rect(0 auto auto 0 round var(--soui-border-beam-size, 100px))',
+      offsetRotate: 'auto',
+      animationName: '$borderBeamMove',
+      animationDuration: 'var(--soui-border-beam-duration, 6s)',
+      animationTimingFunction: 'linear',
+      animationIterationCount: 'infinite',
+      willChange: 'offset-distance'
+    }
+  })), '@media (prefers-reduced-motion: reduce)', {
+    '&::before': {
+      display: 'none'
+    }
+  }),
+  '@keyframes borderBeamMove': {
+    from: {
+      offsetDistance: '0%'
+    },
+    to: {
+      offsetDistance: '100%'
+    }
+  }
+};
+var _default = exports.default = borderBeamStyle;

package/cjs/border-beam/index.d.ts

@@ -0,0 +1,5 @@
+import borderBeamStyle from './border-beam';
+declare const useBorderBeamStyle: () => import("jss").Classes<keyof import("@sheinx/base").BorderBeamClasses>;
+export { borderBeamStyle, useBorderBeamStyle };
+export default useBorderBeamStyle;
+//# sourceMappingURL=index.d.ts.map

package/cjs/border-beam/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,eAAe,MAAM,eAAe,CAAC;AAE5C,QAAA,MAAM,kBAAkB,6EAAyC,CAAC;AAElE,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAC;AAC/C,eAAe,kBAAkB,CAAC"}

package/cjs/border-beam/index.js

@@ -0,0 +1,18 @@
+"use strict";
+"use client";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "borderBeamStyle", {
+  enumerable: true,
+  get: function get() {
+    return _borderBeam.default;
+  }
+});
+exports.useBorderBeamStyle = exports.default = void 0;
+var _jssStyle = require("../jss-style");
+var _borderBeam = _interopRequireDefault(require("./border-beam"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var useBorderBeamStyle = exports.useBorderBeamStyle = (0, _jssStyle.styled)(_borderBeam.default, 'border-beam');
+var _default = exports.default = useBorderBeamStyle;

package/cjs/index.d.ts

@@ -1,6 +1,7 @@
 export * from './alert';
 export * from './avatar';
 export * from './badge';
+export * from './border-beam';
 export * from './breadcrumb';
 export * from './button';
 export * from './card';
@@ -51,6 +52,7 @@ export * from './tree';
 export * from './tree-select';
 export * from './upload';
 export * from './version';
+export * from './watermark';
 export * from './jss-style';
 export * as mixins from './mixin';
 declare const _default: {};

package/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAE1B,cAAc,aAAa,CAAC;AAE5B,OAAO,KAAK,MAAM,MAAM,SAAS,CAAC;;AAElC,wBAAkB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAE5B,cAAc,aAAa,CAAC;AAE5B,OAAO,KAAK,MAAM,MAAM,SAAS,CAAC;;AAElC,wBAAkB"}

package/cjs/index.js

@@ -45,6 +45,18 @@ Object.keys(_badge).forEach(function (key) {
     }
   });
 });
+var _borderBeam = require("./border-beam");
+Object.keys(_borderBeam).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _borderBeam[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _borderBeam[key];
+    }
+  });
+});
 var _breadcrumb = require("./breadcrumb");
 Object.keys(_breadcrumb).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -645,6 +657,18 @@ Object.keys(_version).forEach(function (key) {
     }
   });
 });
+var _watermark = require("./watermark");
+Object.keys(_watermark).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _watermark[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _watermark[key];
+    }
+  });
+});
 var _jssStyle = require("./jss-style");
 Object.keys(_jssStyle).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/popover/popover.js

@@ -18,6 +18,7 @@ var arrowWidth = arrowHeight * 2;
 var cssvar = '--popover-arrow-gap';
 var hideArrowGap = "var(".concat(cssvar, ", 10px)");
 var extraArrowGap = 'var(--popover-arrow-gap-extra, 0px)';
+var arrowBorderColor = "var(--popover-border-color, ".concat(_theme.default.popoverBorderColor, ")");
 var poyfillPos = "calc((".concat(hideArrowGap, " + ").concat(extraArrowGap, ") * -1)");
 var poyfillHeight = "calc((".concat(hideArrowGap, " + ").concat(extraArrowGap, "))");
 var popoverStyle = _objectSpread(_objectSpread({}, _tooltip.tooltipAnimation), {}, {
@@ -38,7 +39,7 @@ var popoverStyle = _objectSpread(_objectSpread({}, _tooltip.tooltipAnimation), {
       height: arrowHeight,
       pointerEvents: 'none',
       transformOrigin: 'center center',
-      filter: "drop-shadow(0 1px 0 ".concat(_theme.default.popoverBorderColor, ") drop-shadow(0 -1px 0 ").concat(_theme.default.popoverBorderColor, ") drop-shadow(1px 0 0 ").concat(_theme.default.popoverBorderColor, ") drop-shadow(-1px 0 0 ").concat(_theme.default.popoverBorderColor, ")"),
+      filter: "drop-shadow(0 1px 0 ".concat(arrowBorderColor, ") drop-shadow(0 -1px 0 ").concat(arrowBorderColor, ") drop-shadow(1px 0 0 ").concat(arrowBorderColor, ") drop-shadow(-1px 0 0 ").concat(arrowBorderColor, ")"),
       '&::before': {
         display: 'block',
         content: '""',

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

package/cjs/steps/steps.js

@@ -51,7 +51,7 @@ var stepsStyle = {
         left: -12
       },
       '& $step:not(:last-child)': {
-        '&$widthDescription': {
+        '&$withDescription': {
           '&:after': {
             borderLeftWidth: 22,
             borderTopWidth: 28,
@@ -96,7 +96,7 @@ var stepsStyle = {
         }
       },
       '& $step:last-child': {
-        '&$widthDescription': {
+        '&$withDescription': {
           '&:before': {
             borderLeftWidth: 22,
             borderTopWidth: 28,
@@ -199,7 +199,7 @@ var stepsStyle = {
   large: {
     '&$arrow': {
       '& $step:not(:last-child)': {
-        '&$widthDescription': {
+        '&$withDescription': {
           '&:after': {
             top: 0,
             width: 30,
@@ -247,7 +247,7 @@ var stepsStyle = {
         }
       },
       '& $step:last-child': {
-        '&$widthDescription': {
+        '&$withDescription': {
           '&:before': {
             borderLeftWidth: 30,
             borderTopWidth: 36,
@@ -625,88 +625,74 @@ var stepsStyle = {
       '& $title': {}
     }
   },
-  arrow: {
-    position: 'relative',
-    zIndex: 0,
-    '&$steps': {
-      overflow: 'hidden'
+  arrowIcon: {
+    position: 'absolute',
+    top: 0,
+    right: 0.25,
+    bottom: 0,
+    transform: 'translateX(100%)',
+    zIndex: 1,
+    '@media (min-resolution: 2dppx)': {
+      right: 0
+    },
+    '$withDescription &': {
+      transform: 'translateX(calc(100% - 0.5px))',
+      '@media (min-resolution: 2dppx)': {
+        transform: 'translateX(100%)'
+      }
     },
-    '& $step': {
-      marginRight: 4,
-      paddingLeft: _theme.default.stepsArrowPaddingX,
-      // before
-      '&:before': {
-        content: '""',
-        position: 'absolute',
-        width: 0,
-        height: 0,
-        top: 0,
-        borderLeftWidth: 16,
-        borderTopWidth: 20,
-        borderBottomWidth: 20,
-        borderLeftColor: '#ffffff'
+    '& > svg': {
+      display: 'block',
+      height: '100%',
+      color: _theme.default.stepsFinishBackgroundColor,
+      '$process &': {
+        color: _theme.default.stepsProcessBackgroundColor
       },
-      '&[dir=ltr]:before': {
-        left: 0
+      '$wait &': {
+        color: _theme.default.stepsWaitBackgroundColor
       },
-      '&[dir=rtl]:before': {
-        right: 0
+      '&:last-child': {
+        position: 'relative'
       },
-      // after
-      '&:after': {
-        content: '""',
+      '&:first-child': {
         position: 'absolute',
-        width: 0,
-        height: 0,
         top: 0,
-        zIndex: 1,
-        borderLeftWidth: 16,
-        borderTopWidth: 20,
-        borderBottomWidth: 20
-      },
-      '&[dir=ltr]:after': {
-        right: -16
-      },
-      '&[dir=rtl]:after': {
-        left: -16
+        left: 4,
+        color: 'white',
+        '$arrow[dir=rtl] &': {
+          right: 4,
+          left: 'auto'
+        }
       }
     },
+    '$step:last-child &': {
+      display: 'none'
+    },
+    '$arrow[dir=rtl] &': {
+      left: '0.25px',
+      right: 'auto',
+      transform: 'translateX(-100%)',
+      '& > svg': {
+        transform: "rotate(180deg)"
+      }
+    }
+  },
+  arrow: {
+    position: 'relative',
+    '& $step': {
+      marginRight: 4,
+      paddingLeft: _theme.default.stepsArrowPaddingX
+    },
     '&$horizontal': {
       '& $horizontalLabel $title:after': {
         display: 'none'
       }
     },
     '& $step:first-child': {
-      padding: 0,
-      '&:before': {
-        display: 'none'
-      },
-      '&$widthDescription': {
-        '&:after': {
-          borderLeftWidth: 26,
-          borderTopWidth: 32,
-          borderBottomWidth: 32
-        },
-        '&[dir=ltr]:after': {
-          right: -26
-        },
-        '&[dir=rtl]:after': {
-          left: -26
-        }
-      }
+      padding: 0
     },
     '& $step:last-child': {
-      paddingRight: 0,
-      '&:after': {
-        display: 'none'
-      },
-      '&$widthDescription': {
-        '&:before': {
-          borderLeftWidth: 26,
-          borderTopWidth: 32,
-          borderBottomWidth: 32
-        }
-      }
+      paddingRight: 0
     },
     '& $description': {
       paddingRight: 0,
@@ -721,84 +707,30 @@ var stepsStyle = {
       width: '100%'
     },
     '& $finish': {
-      backgroundColor: _theme.default.stepsFinishBackgroundColor,
-      '&:after': {
-        borderLeft: "16px solid ".concat(_theme.default.stepsFinishBackgroundColor),
-        borderTop: "20px solid transparent",
-        borderBottom: "20px solid transparent"
-      },
-      '&:before': {
-        // borderLeft: `16px solid #ffffff`,
-        // borderTop: `20px solid transparent`,
-        // borderBottom: `20px solid transparent`,
-      }
+      backgroundColor: _theme.default.stepsFinishBackgroundColor
     },
     '& $process': {
       color: _theme.default.stepsProcessFontColor,
       backgroundColor: _theme.default.stepsProcessBackgroundColor,
       '& $description': {
         color: _theme.default.stepsProcessFontColor
-      },
-      '&:after': {
-        borderLeft: "16px solid ".concat(_theme.default.stepsProcessBackgroundColor),
-        borderTop: "20px solid transparent",
-        borderBottom: "20px solid transparent"
-      },
-      '&[dir=ltr]:after': {
-        right: -16
-      },
-      '&[dir=rtl]:after': {
-        left: -16
-      },
-      '&:before': {
-        borderLeft: "16px solid #ffffff",
-        borderTop: "20px solid transparent",
-        borderBottom: "20px solid transparent"
       }
     },
     '& $wait': {
       color: _theme.default.stepsWaitFontColor,
       // backgroundColor: Token.stepsWaitBackgroundColor,
-      backgroundColor: _theme.default.stepsWaitBackgroundColor,
-      '&:after': {
-        borderLeft: "16px solid ".concat(_theme.default.stepsWaitBackgroundColor),
-        borderTop: "20px solid transparent",
-        borderBottom: "20px solid transparent"
-      },
-      '&:before': {
-        borderLeft: "16px solid #ffffff",
-        borderTop: "20px solid transparent",
-        borderBottom: "20px solid transparent"
-      }
+      backgroundColor: _theme.default.stepsWaitBackgroundColor
     },
-    '& $widthDescription': {
+    '& $withDescription': {
       '& $content,$description': {
         textAlign: 'left'
       },
       '& $title': {
         marginBottom: _theme.default.stepsDescriptionTitleMarginX
-      },
-      '&$process,$finish,$wait': {
-        '&:after': {
-          borderLeftWidth: 26,
-          borderTopWidth: 32,
-          borderBottomWidth: 32
-        },
-        '&[dir=ltr]:after': {
-          right: -26
-        },
-        '&[dir=rtl]:after': {
-          left: -26
-        },
-        '&:before': {
-          borderLeftWidth: 26,
-          borderTopWidth: 32,
-          borderBottomWidth: 32
-        }
       }
     }
   },
-  widthDescription: {},
+  withDescription: {},
   default: {
     lineHeight: 0,
     '&$vertical': {

package/cjs/version.d.ts

@@ -1,3 +1,3 @@
-declare const _default: "3.9.18";
+declare const _default: "3.10.0-beta.10";
 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,wBAAwB"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["version.ts"],"names":[],"mappings":";AAAA,wBAAgC"}

package/cjs/version.js

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

package/cjs/watermark/index.d.ts

@@ -0,0 +1,5 @@
+import watermarkStyle from './watermark';
+declare const useWatermarkStyle: () => import("jss").Classes<keyof import("@sheinx/base").WatermarkClasses>;
+export { watermarkStyle, useWatermarkStyle };
+export default useWatermarkStyle;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,cAAc,MAAM,aAAa,CAAC;AAEzC,QAAA,MAAM,iBAAiB,4EAAsC,CAAC;AAE9D,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAC;AAC7C,eAAe,iBAAiB,CAAC"}

package/cjs/watermark/index.js

@@ -0,0 +1,18 @@
+"use strict";
+"use client";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWatermarkStyle = exports.default = void 0;
+Object.defineProperty(exports, "watermarkStyle", {
+  enumerable: true,
+  get: function get() {
+    return _watermark.default;
+  }
+});
+var _jssStyle = require("../jss-style");
+var _watermark = _interopRequireDefault(require("./watermark"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var useWatermarkStyle = exports.useWatermarkStyle = (0, _jssStyle.styled)(_watermark.default, 'watermark');
+var _default = exports.default = useWatermarkStyle;

package/cjs/watermark/watermark.d.ts

@@ -0,0 +1,5 @@
+import { WatermarkClasses } from '@sheinx/base';
+import { JsStyles } from '../jss-style';
+declare const watermarkStyle: JsStyles<keyof WatermarkClasses>;
+export default watermarkStyle;
+//# sourceMappingURL=watermark.d.ts.map

package/cjs/watermark/watermark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"watermark.d.ts","sourceRoot":"","sources":["watermark.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,QAAA,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,gBAAgB,CAMpD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/cjs/watermark/watermark.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var watermarkStyle = {
+  rootClass: {},
+  wrapper: {
+    position: 'relative',
+    overflow: 'hidden'
+  }
+};
+var _default = exports.default = watermarkStyle;

package/esm/border-beam/border-beam.d.ts

@@ -0,0 +1,5 @@
+import type { BorderBeamClasses } from '@sheinx/base';
+import type { JsStyles } from '../jss-style';
+declare const borderBeamStyle: JsStyles<keyof BorderBeamClasses>;
+export default borderBeamStyle;
+//# sourceMappingURL=border-beam.d.ts.map

package/esm/border-beam/border-beam.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-beam.d.ts","sourceRoot":"","sources":["border-beam.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAW7C,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,MAAM,iBAAiB,CAuDtD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/esm/border-beam/border-beam.js

@@ -0,0 +1,62 @@
+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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { CommonToken } from '@sheinx/theme';
+var MASK_SUPPORT = '@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor))';
+var PATH_SUPPORT = '@supports (offset-path: rect(0 auto auto 0 round 1px))';
+var gradient = 'linear-gradient(to left, ' + CommonToken['Brand-6'] + ' 0%, ' + CommonToken['Brand-5'] + ' 70%, transparent)';
+var borderBeamStyle = {
+  rootClass: {},
+  beam: _defineProperty(_defineProperty({
+    boxSizing: 'border-box',
+    display: 'none',
+    position: 'absolute',
+    inset: 'var(--soui-border-beam-inset-offset, 0px)',
+    borderRadius: 'var(--soui-border-beam-border-radius, 0px)',
+    zIndex: 1,
+    overflow: 'hidden',
+    pointerEvents: 'none',
+    padding: 'var(--soui-border-beam-line-width, 1px)'
+  }, MASK_SUPPORT, _defineProperty({
+    '--soui-border-beam-mask': 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+    WebkitMask: 'var(--soui-border-beam-mask)',
+    mask: 'var(--soui-border-beam-mask)',
+    WebkitMaskComposite: 'xor',
+    maskComposite: 'exclude'
+  }, PATH_SUPPORT, {
+    display: 'block',
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: 'var(--soui-border-beam-size, 100px)',
+      aspectRatio: '1 / 1',
+      opacity: 0.95,
+      backgroundImage: 'var(--soui-border-beam-gradient, ' + gradient + ')',
+      offsetAnchor: '90% 50%',
+      offsetDistance: '0%',
+      offsetPath: 'rect(0 auto auto 0 round var(--soui-border-beam-size, 100px))',
+      offsetRotate: 'auto',
+      animationName: '$borderBeamMove',
+      animationDuration: 'var(--soui-border-beam-duration, 6s)',
+      animationTimingFunction: 'linear',
+      animationIterationCount: 'infinite',
+      willChange: 'offset-distance'
+    }
+  })), '@media (prefers-reduced-motion: reduce)', {
+    '&::before': {
+      display: 'none'
+    }
+  }),
+  '@keyframes borderBeamMove': {
+    from: {
+      offsetDistance: '0%'
+    },
+    to: {
+      offsetDistance: '100%'
+    }
+  }
+};
+export default borderBeamStyle;

package/esm/border-beam/index.d.ts

@@ -0,0 +1,5 @@
+import borderBeamStyle from './border-beam';
+declare const useBorderBeamStyle: () => import("jss").Classes<keyof import("@sheinx/base").BorderBeamClasses>;
+export { borderBeamStyle, useBorderBeamStyle };
+export default useBorderBeamStyle;
+//# sourceMappingURL=index.d.ts.map

package/esm/border-beam/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,eAAe,MAAM,eAAe,CAAC;AAE5C,QAAA,MAAM,kBAAkB,6EAAyC,CAAC;AAElE,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAC;AAC/C,eAAe,kBAAkB,CAAC"}

package/esm/border-beam/index.js

@@ -0,0 +1,6 @@
+"use client";
+import { styled } from "../jss-style";
+import borderBeamStyle from "./border-beam";
+var useBorderBeamStyle = styled(borderBeamStyle, 'border-beam');
+export { borderBeamStyle, useBorderBeamStyle };
+export default useBorderBeamStyle;

package/esm/index.d.ts

@@ -1,6 +1,7 @@
 export * from './alert';
 export * from './avatar';
 export * from './badge';
+export * from './border-beam';
 export * from './breadcrumb';
 export * from './button';
 export * from './card';
@@ -51,6 +52,7 @@ export * from './tree';
 export * from './tree-select';
 export * from './upload';
 export * from './version';
+export * from './watermark';
 export * from './jss-style';
 export * as mixins from './mixin';
 declare const _default: {};

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAE1B,cAAc,aAAa,CAAC;AAE5B,OAAO,KAAK,MAAM,MAAM,SAAS,CAAC;;AAElC,wBAAkB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAE5B,cAAc,aAAa,CAAC;AAE5B,OAAO,KAAK,MAAM,MAAM,SAAS,CAAC;;AAElC,wBAAkB"}

package/esm/index.js

@@ -2,6 +2,7 @@
 export * from "./alert";
 export * from "./avatar";
 export * from "./badge";
+export * from "./border-beam";
 export * from "./breadcrumb";
 export * from "./button";
 export * from "./card";
@@ -52,6 +53,7 @@ export * from "./tree";
 export * from "./tree-select";
 export * from "./upload";
 export * from "./version";
+export * from "./watermark";
 export * from "./jss-style";
 import * as _mixins from "./mixin";
 export { _mixins as mixins };

package/esm/popover/popover.js

@@ -11,6 +11,7 @@ var arrowWidth = arrowHeight * 2;
 var cssvar = '--popover-arrow-gap';
 var hideArrowGap = "var(".concat(cssvar, ", 10px)");
 var extraArrowGap = 'var(--popover-arrow-gap-extra, 0px)';
+var arrowBorderColor = "var(--popover-border-color, ".concat(token.popoverBorderColor, ")");
 var poyfillPos = "calc((".concat(hideArrowGap, " + ").concat(extraArrowGap, ") * -1)");
 var poyfillHeight = "calc((".concat(hideArrowGap, " + ").concat(extraArrowGap, "))");
 var popoverStyle = _objectSpread(_objectSpread({}, tooltipAnimation), {}, {
@@ -31,7 +32,7 @@ var popoverStyle = _objectSpread(_objectSpread({}, tooltipAnimation), {}, {
       height: arrowHeight,
       pointerEvents: 'none',
       transformOrigin: 'center center',
-      filter: "drop-shadow(0 1px 0 ".concat(token.popoverBorderColor, ") drop-shadow(0 -1px 0 ").concat(token.popoverBorderColor, ") drop-shadow(1px 0 0 ").concat(token.popoverBorderColor, ") drop-shadow(-1px 0 0 ").concat(token.popoverBorderColor, ")"),
+      filter: "drop-shadow(0 1px 0 ".concat(arrowBorderColor, ") drop-shadow(0 -1px 0 ").concat(arrowBorderColor, ") drop-shadow(1px 0 0 ").concat(arrowBorderColor, ") drop-shadow(-1px 0 0 ").concat(arrowBorderColor, ")"),
       '&::before': {
         display: 'block',
         content: '""',

package/esm/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,CAq0BxC,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,CAwwBxC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/esm/steps/steps.js

@@ -44,7 +44,7 @@ var stepsStyle = {
         left: -12
       },
       '& $step:not(:last-child)': {
-        '&$widthDescription': {
+        '&$withDescription': {
           '&:after': {
             borderLeftWidth: 22,
             borderTopWidth: 28,
@@ -89,7 +89,7 @@ var stepsStyle = {
         }
       },
       '& $step:last-child': {
-        '&$widthDescription': {
+        '&$withDescription': {
           '&:before': {
             borderLeftWidth: 22,
             borderTopWidth: 28,
@@ -192,7 +192,7 @@ var stepsStyle = {
   large: {
     '&$arrow': {
       '& $step:not(:last-child)': {
-        '&$widthDescription': {
+        '&$withDescription': {
           '&:after': {
             top: 0,
             width: 30,
@@ -240,7 +240,7 @@ var stepsStyle = {
         }
       },
       '& $step:last-child': {
-        '&$widthDescription': {
+        '&$withDescription': {
           '&:before': {
             borderLeftWidth: 30,
             borderTopWidth: 36,
@@ -618,88 +618,74 @@ var stepsStyle = {
       '& $title': {}
     }
   },
-  arrow: {
-    position: 'relative',
-    zIndex: 0,
-    '&$steps': {
-      overflow: 'hidden'
+  arrowIcon: {
+    position: 'absolute',
+    top: 0,
+    right: 0.25,
+    bottom: 0,
+    transform: 'translateX(100%)',
+    zIndex: 1,
+    '@media (min-resolution: 2dppx)': {
+      right: 0
+    },
+    '$withDescription &': {
+      transform: 'translateX(calc(100% - 0.5px))',
+      '@media (min-resolution: 2dppx)': {
+        transform: 'translateX(100%)'
+      }
     },
-    '& $step': {
-      marginRight: 4,
-      paddingLeft: Token.stepsArrowPaddingX,
-      // before
-      '&:before': {
-        content: '""',
-        position: 'absolute',
-        width: 0,
-        height: 0,
-        top: 0,
-        borderLeftWidth: 16,
-        borderTopWidth: 20,
-        borderBottomWidth: 20,
-        borderLeftColor: '#ffffff'
+    '& > svg': {
+      display: 'block',
+      height: '100%',
+      color: Token.stepsFinishBackgroundColor,
+      '$process &': {
+        color: Token.stepsProcessBackgroundColor
       },
-      '&[dir=ltr]:before': {
-        left: 0
+      '$wait &': {
+        color: Token.stepsWaitBackgroundColor
       },
-      '&[dir=rtl]:before': {
-        right: 0
+      '&:last-child': {
+        position: 'relative'
       },
-      // after
-      '&:after': {
-        content: '""',
+      '&:first-child': {
         position: 'absolute',
-        width: 0,
-        height: 0,
         top: 0,
-        zIndex: 1,
-        borderLeftWidth: 16,
-        borderTopWidth: 20,
-        borderBottomWidth: 20
-      },
-      '&[dir=ltr]:after': {
-        right: -16
-      },
-      '&[dir=rtl]:after': {
-        left: -16
+        left: 4,
+        color: 'white',
+        '$arrow[dir=rtl] &': {
+          right: 4,
+          left: 'auto'
+        }
       }
     },
+    '$step:last-child &': {
+      display: 'none'
+    },
+    '$arrow[dir=rtl] &': {
+      left: '0.25px',
+      right: 'auto',
+      transform: 'translateX(-100%)',
+      '& > svg': {
+        transform: "rotate(180deg)"
+      }
+    }
+  },
+  arrow: {
+    position: 'relative',
+    '& $step': {
+      marginRight: 4,
+      paddingLeft: Token.stepsArrowPaddingX
+    },
     '&$horizontal': {
       '& $horizontalLabel $title:after': {
         display: 'none'
       }
     },
     '& $step:first-child': {
-      padding: 0,
-      '&:before': {
-        display: 'none'
-      },
-      '&$widthDescription': {
-        '&:after': {
-          borderLeftWidth: 26,
-          borderTopWidth: 32,
-          borderBottomWidth: 32
-        },
-        '&[dir=ltr]:after': {
-          right: -26
-        },
-        '&[dir=rtl]:after': {
-          left: -26
-        }
-      }
+      padding: 0
     },
     '& $step:last-child': {
-      paddingRight: 0,
-      '&:after': {
-        display: 'none'
-      },
-      '&$widthDescription': {
-        '&:before': {
-          borderLeftWidth: 26,
-          borderTopWidth: 32,
-          borderBottomWidth: 32
-        }
-      }
+      paddingRight: 0
     },
     '& $description': {
       paddingRight: 0,
@@ -714,84 +700,30 @@ var stepsStyle = {
       width: '100%'
     },
     '& $finish': {
-      backgroundColor: Token.stepsFinishBackgroundColor,
-      '&:after': {
-        borderLeft: "16px solid ".concat(Token.stepsFinishBackgroundColor),
-        borderTop: "20px solid transparent",
-        borderBottom: "20px solid transparent"
-      },
-      '&:before': {
-        // borderLeft: `16px solid #ffffff`,
-        // borderTop: `20px solid transparent`,
-        // borderBottom: `20px solid transparent`,
-      }
+      backgroundColor: Token.stepsFinishBackgroundColor
     },
     '& $process': {
       color: Token.stepsProcessFontColor,
       backgroundColor: Token.stepsProcessBackgroundColor,
       '& $description': {
         color: Token.stepsProcessFontColor
-      },
-      '&:after': {
-        borderLeft: "16px solid ".concat(Token.stepsProcessBackgroundColor),
-        borderTop: "20px solid transparent",
-        borderBottom: "20px solid transparent"
-      },
-      '&[dir=ltr]:after': {
-        right: -16
-      },
-      '&[dir=rtl]:after': {
-        left: -16
-      },
-      '&:before': {
-        borderLeft: "16px solid #ffffff",
-        borderTop: "20px solid transparent",
-        borderBottom: "20px solid transparent"
       }
     },
     '& $wait': {
       color: Token.stepsWaitFontColor,
       // backgroundColor: Token.stepsWaitBackgroundColor,
-      backgroundColor: Token.stepsWaitBackgroundColor,
-      '&:after': {
-        borderLeft: "16px solid ".concat(Token.stepsWaitBackgroundColor),
-        borderTop: "20px solid transparent",
-        borderBottom: "20px solid transparent"
-      },
-      '&:before': {
-        borderLeft: "16px solid #ffffff",
-        borderTop: "20px solid transparent",
-        borderBottom: "20px solid transparent"
-      }
+      backgroundColor: Token.stepsWaitBackgroundColor
     },
-    '& $widthDescription': {
+    '& $withDescription': {
       '& $content,$description': {
         textAlign: 'left'
       },
       '& $title': {
         marginBottom: Token.stepsDescriptionTitleMarginX
-      },
-      '&$process,$finish,$wait': {
-        '&:after': {
-          borderLeftWidth: 26,
-          borderTopWidth: 32,
-          borderBottomWidth: 32
-        },
-        '&[dir=ltr]:after': {
-          right: -26
-        },
-        '&[dir=rtl]:after': {
-          left: -26
-        },
-        '&:before': {
-          borderLeftWidth: 26,
-          borderTopWidth: 32,
-          borderBottomWidth: 32
-        }
       }
     }
   },
-  widthDescription: {},
+  withDescription: {},
   default: {
     lineHeight: 0,
     '&$vertical': {

package/esm/version.d.ts

@@ -1,3 +1,3 @@
-declare const _default: "3.9.18";
+declare const _default: "3.10.0-beta.10";
 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,wBAAwB"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["version.ts"],"names":[],"mappings":";AAAA,wBAAgC"}

package/esm/version.js

@@ -1 +1 @@
-export default '3.9.18';
+export default '3.10.0-beta.10';

package/esm/watermark/index.d.ts

@@ -0,0 +1,5 @@
+import watermarkStyle from './watermark';
+declare const useWatermarkStyle: () => import("jss").Classes<keyof import("@sheinx/base").WatermarkClasses>;
+export { watermarkStyle, useWatermarkStyle };
+export default useWatermarkStyle;
+//# sourceMappingURL=index.d.ts.map

package/esm/watermark/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,cAAc,MAAM,aAAa,CAAC;AAEzC,QAAA,MAAM,iBAAiB,4EAAsC,CAAC;AAE9D,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAC;AAC7C,eAAe,iBAAiB,CAAC"}

package/esm/watermark/index.js

@@ -0,0 +1,6 @@
+"use client";
+import { styled } from "../jss-style";
+import watermarkStyle from "./watermark";
+var useWatermarkStyle = styled(watermarkStyle, 'watermark');
+export { watermarkStyle, useWatermarkStyle };
+export default useWatermarkStyle;

package/esm/watermark/watermark.d.ts

@@ -0,0 +1,5 @@
+import { WatermarkClasses } from '@sheinx/base';
+import { JsStyles } from '../jss-style';
+declare const watermarkStyle: JsStyles<keyof WatermarkClasses>;
+export default watermarkStyle;
+//# sourceMappingURL=watermark.d.ts.map

package/esm/watermark/watermark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"watermark.d.ts","sourceRoot":"","sources":["watermark.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,QAAA,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,gBAAgB,CAMpD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/esm/watermark/watermark.js

@@ -0,0 +1,8 @@
+var watermarkStyle = {
+  rootClass: {},
+  wrapper: {
+    position: 'relative',
+    overflow: 'hidden'
+  }
+};
+export default watermarkStyle;

package/package.json

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