rc-slider-captcha - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

dist/index.cjs.js

@@ -37,3 +37,3 @@ 'use strict';
 
-var css_248z = "@-webkit-keyframes slider-icon-animate_spin {\n  100% {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n@keyframes slider-icon-animate_spin {\n  100% {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n.rc-slider-captcha-icon {\n  display: inline-block;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-style: normal;\n  line-height: 0;\n  text-align: center;\n  text-transform: none;\n  vertical-align: -0.125em;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.rc-slider-captcha-icon > svg {\n  line-height: 1;\n}\n.rc-slider-captcha-icon-spin {\n  -webkit-animation: slider-icon-animate_spin 1s infinite linear;\n          animation: slider-icon-animate_spin 1s infinite linear;\n}\n.rc-slider-captcha-button {\n  display: inline-block;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 40px;\n  height: 100%;\n  padding: 5px 0;\n  color: #676d73;\n  color: var(--rcsc-button-color, #676d73);\n  font-size: 22px;\n  line-height: 1;\n  background-color: #fff;\n  background-color: var(--rcsc-button-bg-color, #fff);\n  border-radius: 2px;\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);\n  cursor: -webkit-grab;\n  cursor: grab;\n  transition-timing-function: linear;\n  transition-duration: 0.2s;\n  transition-property: background-color, color;\n  touch-action: none;\n}\n.rc-slider-captcha-button-active {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-verify {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-pc:hover {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button:active {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-active,\n.rc-slider-captcha-button:active {\n  cursor: -webkit-grabbing;\n  cursor: grabbing;\n}\n.rc-slider-captcha-button-verify,\n.rc-slider-captcha-button-verify:active {\n  cursor: wait;\n}\n.rc-slider-captcha-button-error {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-error:hover {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-error:active {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-success {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-success:hover {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-success:active {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-disabled {\n  color: #676d73;\n  color: var(--rcsc-button-color, #676d73);\n  background-color: #fff;\n  background-color: var(--rcsc-button-bg-color, #fff);\n  cursor: no-drop;\n  opacity: 0.7;\n}\n.rc-slider-captcha-button-disabled:hover {\n  color: #676d73;\n  color: var(--rcsc-button-color, #676d73);\n  background-color: #fff;\n  background-color: var(--rcsc-button-bg-color, #fff);\n  cursor: no-drop;\n  opacity: 0.7;\n}\n.rc-slider-captcha-button-disabled:active {\n  color: #676d73;\n  color: var(--rcsc-button-color, #676d73);\n  background-color: #fff;\n  background-color: var(--rcsc-button-bg-color, #fff);\n  cursor: no-drop;\n  opacity: 0.7;\n}\n.rc-slider-captcha-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  padding: 15px;\n  color: #45494c;\n  color: var(--rcsc-text-color, #45494c);\n  font-size: 14px;\n  text-align: center;\n  background-color: #f7f9fa;\n  background-color: var(--rcsc-bg-color, #f7f9fa);\n}\n.rc-slider-captcha-loading-icon {\n  font-size: 30px;\n}\n.rc-slider-captcha-loading-text {\n  margin-top: 5px;\n}\n.rc-slider-captcha {\n  position: relative;\n}\n.rc-slider-captcha > * {\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.rc-slider-captcha-control {\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 42px;\n  background-color: #f7f9fa;\n  background-color: var(--rcsc-bg-color, #f7f9fa);\n  border: 1px solid #e4e7eb;\n  border: 1px solid var(--rcsc-border-color, #e4e7eb);\n  border-radius: 2px;\n}\n.rc-slider-captcha-control-button {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n}\n.rc-slider-captcha-control-indicator {\n  position: absolute;\n  top: -1px;\n  bottom: -1px;\n  left: -1px;\n  display: none;\n  box-sizing: border-box;\n  width: 0;\n  background-color: #d1e9fe;\n  background-color: var(--rcsc-primary-light, #d1e9fe);\n  border: 1px solid #1991fa;\n  border: 1px solid var(--rcsc-primary, #1991fa);\n  border-radius: 2px;\n}\n.rc-slider-captcha-control-tips {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px 0;\n  color: #45494c;\n  color: var(--rcsc-text-color, #45494c);\n  font-size: 14px;\n  line-height: 20px;\n  text-align: center;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.rc-slider-captcha-control-moving .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-verify .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-error .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-success .rc-slider-captcha-control-indicator {\n  display: block;\n}\n.rc-slider-captcha-control-error .rc-slider-captcha-control-indicator {\n  background-color: #fce1e1;\n  background-color: var(--rcsc-error-light, #fce1e1);\n  border-color: #f57a7a;\n  border-color: var(--rcsc-error, #f57a7a);\n}\n.rc-slider-captcha-control-success .rc-slider-captcha-control-indicator {\n  background-color: #d2f4ef;\n  background-color: var(--rcsc-success-light, #d2f4ef);\n  border-color: #52ccba;\n  border-color: var(--rcsc-success, #52ccba);\n}\n.rc-slider-captcha-control-errors {\n  padding-left: 0;\n  background-color: #fce1e1;\n  background-color: var(--rcsc-error-light, #fce1e1);\n  border-color: #f57a7a;\n  border-color: var(--rcsc-error, #f57a7a);\n}\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-button,\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-indicator {\n  display: none;\n}\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-tips {\n  color: #f57a7a;\n  color: var(--rcsc-error, #f57a7a);\n  cursor: pointer;\n}\n.rc-slider-captcha-jigsaw {\n  position: relative;\n  background-color: #f7f9fa;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.rc-slider-captcha-jigsaw img {\n  position: absolute;\n}\n.rc-slider-captcha-jigsaw-bg {\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.rc-slider-captcha-jigsaw-puzzle {\n  width: 60px;\n  height: 100%;\n  touch-action: none;\n}\n.rc-slider-captcha-jigsaw-puzzle:hover {\n  cursor: -webkit-grab;\n  cursor: grab;\n}\n.rc-slider-captcha-jigsaw-puzzle:active {\n  cursor: -webkit-grabbing;\n  cursor: grabbing;\n}\n.rc-slider-captcha-jigsaw-refresh {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  padding: 5px;\n  color: #fff;\n  font-size: 22px;\n  line-height: 0;\n  cursor: pointer;\n  opacity: 0.75;\n  transition: opacity 0.2s linear;\n}\n.rc-slider-captcha-jigsaw-refresh:hover {\n  opacity: 1;\n}\n.rc-slider-captcha-jigsaw-refresh-disabled {\n  cursor: not-allowed;\n}\n.rc-slider-captcha-jigsaw-refresh-disabled:hover {\n  opacity: 0.75;\n}\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle {\n  pointer-events: none;\n}\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle:hover,\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle:active {\n  cursor: default;\n}\n.rc-slider-captcha-panel {\n  padding-bottom: 15px;\n}\n.rc-slider-captcha-panel-inner {\n  overflow: hidden;\n  border-radius: 2px;\n}\n.rc-slider-captcha-float .rc-slider-captcha-panel {\n  position: absolute;\n  left: 0;\n  display: none;\n  opacity: 0;\n  transition-timing-function: ease-out;\n  transition-duration: 0.3s;\n  transition-property: top, bottom, opacity;\n}\n.rc-slider-captcha-float-top .rc-slider-captcha-panel {\n  bottom: 22px;\n}\n.rc-slider-captcha-float-bottom .rc-slider-captcha-panel {\n  top: 22px;\n  padding: 15px 0 0;\n}\n";
+var css_248z = "@-webkit-keyframes slider-icon-animate_spin {\n  100% {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n@keyframes slider-icon-animate_spin {\n  100% {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n.rc-slider-captcha-icon {\n  display: inline-block;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-style: normal;\n  line-height: 0;\n  text-align: center;\n  text-transform: none;\n  vertical-align: -0.125em;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.rc-slider-captcha-icon > svg {\n  line-height: 1;\n}\n.rc-slider-captcha-icon-spin {\n  -webkit-animation: slider-icon-animate_spin 1s infinite linear;\n          animation: slider-icon-animate_spin 1s infinite linear;\n}\n.rc-slider-captcha-button {\n  display: inline-block;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 40px;\n  height: 100%;\n  padding: 5px 0;\n  color: #676d73;\n  color: var(--rcsc-button-color, #676d73);\n  font-size: 22px;\n  line-height: 1;\n  background-color: #fff;\n  background-color: var(--rcsc-button-bg-color, #fff);\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);\n  cursor: -webkit-grab;\n  cursor: grab;\n  transition-timing-function: linear;\n  transition-duration: 0.2s;\n  transition-property: background-color, color;\n  touch-action: none;\n}\n.rc-slider-captcha-button-active {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-verify {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-pc:hover {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button:active {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-active,\n.rc-slider-captcha-button:active {\n  cursor: -webkit-grabbing;\n  cursor: grabbing;\n}\n.rc-slider-captcha-button-verify,\n.rc-slider-captcha-button-verify:active {\n  cursor: wait;\n}\n.rc-slider-captcha-button-error {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-error:hover {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-error:active {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-success {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-success:hover {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-success:active {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-disabled {\n  color: #676d73;\n  color: var(--rcsc-button-color, #676d73);\n  background-color: #fff;\n  background-color: var(--rcsc-button-bg-color, #fff);\n  cursor: no-drop;\n  opacity: 0.7;\n}\n.rc-slider-captcha-button-disabled:hover {\n  color: #676d73;\n  color: var(--rcsc-button-color, #676d73);\n  background-color: #fff;\n  background-color: var(--rcsc-button-bg-color, #fff);\n  cursor: no-drop;\n  opacity: 0.7;\n}\n.rc-slider-captcha-button-disabled:active {\n  color: #676d73;\n  color: var(--rcsc-button-color, #676d73);\n  background-color: #fff;\n  background-color: var(--rcsc-button-bg-color, #fff);\n  cursor: no-drop;\n  opacity: 0.7;\n}\n.rc-slider-captcha-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  padding: 15px;\n  color: #45494c;\n  color: var(--rcsc-text-color, #45494c);\n  font-size: 14px;\n  text-align: center;\n  background-color: #f7f9fa;\n  background-color: var(--rcsc-bg-color, #f7f9fa);\n}\n.rc-slider-captcha-loading-icon {\n  font-size: 30px;\n}\n.rc-slider-captcha-loading-text {\n  margin-top: 5px;\n}\n.rc-slider-captcha {\n  position: relative;\n}\n.rc-slider-captcha > * {\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.rc-slider-captcha-control {\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 42px;\n  background-color: #f7f9fa;\n  background-color: var(--rcsc-bg-color, #f7f9fa);\n  border: 1px solid #e4e7eb;\n  border: 1px solid var(--rcsc-border-color, #e4e7eb);\n  border-radius: 2px;\n  border-radius: var(--rcsc-control-border-radius, 2px);\n}\n.rc-slider-captcha-control-button {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n  border-radius: 2px;\n  border-radius: var(--rcsc-control-border-radius, 2px);\n}\n.rc-slider-captcha-control-indicator {\n  position: absolute;\n  top: -1px;\n  bottom: -1px;\n  left: -1px;\n  display: none;\n  box-sizing: border-box;\n  width: 0;\n  background-color: #d1e9fe;\n  background-color: var(--rcsc-primary-light, #d1e9fe);\n  border: 1px solid #1991fa;\n  border: 1px solid var(--rcsc-primary, #1991fa);\n  border-radius: 2px;\n  border-radius: var(--rcsc-control-border-radius, 2px);\n}\n.rc-slider-captcha-control-tips {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px 0;\n  color: #45494c;\n  color: var(--rcsc-text-color, #45494c);\n  font-size: 14px;\n  line-height: 20px;\n  text-align: center;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.rc-slider-captcha-control-moving .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-verify .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-error .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-success .rc-slider-captcha-control-indicator {\n  display: block;\n}\n.rc-slider-captcha-control-error .rc-slider-captcha-control-indicator {\n  background-color: #fce1e1;\n  background-color: var(--rcsc-error-light, #fce1e1);\n  border-color: #f57a7a;\n  border-color: var(--rcsc-error, #f57a7a);\n}\n.rc-slider-captcha-control-success .rc-slider-captcha-control-indicator {\n  background-color: #d2f4ef;\n  background-color: var(--rcsc-success-light, #d2f4ef);\n  border-color: #52ccba;\n  border-color: var(--rcsc-success, #52ccba);\n}\n.rc-slider-captcha-control-errors {\n  padding-left: 0;\n  background-color: #fce1e1;\n  background-color: var(--rcsc-error-light, #fce1e1);\n  border-color: #f57a7a;\n  border-color: var(--rcsc-error, #f57a7a);\n}\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-button,\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-indicator {\n  display: none;\n}\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-tips {\n  color: #f57a7a;\n  color: var(--rcsc-error, #f57a7a);\n  cursor: pointer;\n}\n.rc-slider-captcha-jigsaw {\n  position: relative;\n  background-color: #f7f9fa;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.rc-slider-captcha-jigsaw img {\n  position: absolute;\n}\n.rc-slider-captcha-jigsaw-bg {\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.rc-slider-captcha-jigsaw-puzzle {\n  width: 60px;\n  height: 100%;\n  touch-action: none;\n}\n.rc-slider-captcha-jigsaw-puzzle:hover {\n  cursor: -webkit-grab;\n  cursor: grab;\n}\n.rc-slider-captcha-jigsaw-puzzle:active {\n  cursor: -webkit-grabbing;\n  cursor: grabbing;\n}\n.rc-slider-captcha-jigsaw-refresh {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  padding: 5px;\n  color: #fff;\n  font-size: 22px;\n  line-height: 0;\n  cursor: pointer;\n  opacity: 0.75;\n  transition: opacity 0.2s linear;\n}\n.rc-slider-captcha-jigsaw-refresh:hover {\n  opacity: 1;\n}\n.rc-slider-captcha-jigsaw-refresh-disabled {\n  cursor: not-allowed;\n}\n.rc-slider-captcha-jigsaw-refresh-disabled:hover {\n  opacity: 0.75;\n}\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle {\n  pointer-events: none;\n}\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle:hover,\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle:active {\n  cursor: default;\n}\n.rc-slider-captcha-panel {\n  padding-bottom: 15px;\n}\n.rc-slider-captcha-panel-inner {\n  overflow: hidden;\n  border-radius: 2px;\n  border-radius: var(--rcsc-panel-border-radius, 2px);\n}\n.rc-slider-captcha-float .rc-slider-captcha-panel {\n  position: absolute;\n  left: 0;\n  display: none;\n  opacity: 0;\n  transition-timing-function: ease-out;\n  transition-duration: 0.3s;\n  transition-property: top, bottom, opacity;\n}\n.rc-slider-captcha-float-top .rc-slider-captcha-panel {\n  bottom: 22px;\n}\n.rc-slider-captcha-float-bottom .rc-slider-captcha-panel {\n  top: 22px;\n  padding: 15px 0 0;\n}\n";
 styleInject(css_248z);
@@ -228,3 +228,3 @@
     var _b, _c, _d, _e;
-    var _f = _a.mode, outMode = _f === void 0 ? 'embed' : _f, _g = _a.limitErrorCount, limitErrorCount = _g === void 0 ? 0 : _g, outTipText = _a.tipText, outTipIcon = _a.tipIcon, outBgSize = _a.bgSize, outPuzzleSize = _a.puzzleSize, request = _a.request, _h = _a.autoRequest, autoRequest = _h === void 0 ? true : _h, onVerify = _a.onVerify, _j = _a.autoRefreshOnError, autoRefreshOnError = _j === void 0 ? true : _j, actionRef = _a.actionRef, _k = _a.showRefreshIcon, showRefreshIcon = _k === void 0 ? true : _k, jigsawContent = _a.jigsawContent, _l = _a.errorHoldDuration, errorHoldDuration = _l === void 0 ? 500 : _l, _m = _a.loadingDelay, loadingDelay = _m === void 0 ? 0 : _m, _o = _a.placement, placement = _o === void 0 ? 'top' : _o, loadingBoxProps = _a.loadingBoxProps, sliderButtonProps = _a.sliderButtonProps, className = _a.className, style = _a.style;
+    var _f = _a.mode, outMode = _f === void 0 ? 'embed' : _f, _g = _a.limitErrorCount, limitErrorCount = _g === void 0 ? 0 : _g, outTipText = _a.tipText, outTipIcon = _a.tipIcon, outBgSize = _a.bgSize, outPuzzleSize = _a.puzzleSize, request = _a.request, _h = _a.autoRequest, autoRequest = _h === void 0 ? true : _h, onVerify = _a.onVerify, _j = _a.autoRefreshOnError, autoRefreshOnError = _j === void 0 ? true : _j, actionRef = _a.actionRef, _k = _a.showRefreshIcon, showRefreshIcon = _k === void 0 ? true : _k, jigsawContent = _a.jigsawContent, _l = _a.errorHoldDuration, errorHoldDuration = _l === void 0 ? 500 : _l, _m = _a.loadingDelay, loadingDelay = _m === void 0 ? 0 : _m, _o = _a.placement, placement = _o === void 0 ? 'top' : _o, loadingBoxProps = _a.loadingBoxProps, sliderButtonProps = _a.sliderButtonProps, className = _a.className, style = _a.style, styles = _a.styles;
     var _p = rcHooks.useSafeState(), jigsawImgs = _p[0], setJigsawImgs = _p[1];
@@ -580,6 +580,6 @@ var _q = rcHooks.useSafeState(exports.Status.Default), status = _q[0], setStatus = _q[1];
         !modeIsSlider && (React.createElement("div", { className: "".concat(prefixCls, "-panel"), ref: panelRef },
-            React.createElement("div", { className: "".concat(prefixCls, "-panel-inner"), style: { height: bgSize.height } },
-                React.createElement("div", { className: classnames(jigsawPrefixCls, (_c = {}, _c["".concat(jigsawPrefixCls, "-stop")] = isStop, _c)), style: tslib.__assign(tslib.__assign({}, bgSize), (loading || !(jigsawImgs === null || jigsawImgs === void 0 ? void 0 : jigsawImgs.bgUrl) ? { display: 'none' } : {})) },
-                    React.createElement("img", { className: "".concat(jigsawPrefixCls, "-bg"), style: bgSize, src: jigsawImgs === null || jigsawImgs === void 0 ? void 0 : jigsawImgs.bgUrl, alt: "" }),
-                    React.createElement("img", { className: "".concat(jigsawPrefixCls, "-puzzle"), style: puzzleSize, src: jigsawImgs === null || jigsawImgs === void 0 ? void 0 : jigsawImgs.puzzleUrl, alt: "", "data-id": exports.CurrentTargetType.Puzzle, ref: puzzleRef }),
+            React.createElement("div", { className: "".concat(prefixCls, "-panel-inner"), style: tslib.__assign(tslib.__assign({}, styles === null || styles === void 0 ? void 0 : styles.panel), { height: bgSize.height }) },
+                React.createElement("div", { className: classnames(jigsawPrefixCls, (_c = {}, _c["".concat(jigsawPrefixCls, "-stop")] = isStop, _c)), style: tslib.__assign(tslib.__assign(tslib.__assign({}, styles === null || styles === void 0 ? void 0 : styles.jigsaw), bgSize), (loading || !(jigsawImgs === null || jigsawImgs === void 0 ? void 0 : jigsawImgs.bgUrl) ? { display: 'none' } : {})) },
+                    React.createElement("img", { className: "".concat(jigsawPrefixCls, "-bg"), style: tslib.__assign(tslib.__assign({}, styles === null || styles === void 0 ? void 0 : styles.bgImg), bgSize), src: jigsawImgs === null || jigsawImgs === void 0 ? void 0 : jigsawImgs.bgUrl, alt: "" }),
+                    React.createElement("img", { className: "".concat(jigsawPrefixCls, "-puzzle"), style: tslib.__assign(tslib.__assign({}, styles === null || styles === void 0 ? void 0 : styles.puzzleImg), puzzleSize), src: jigsawImgs === null || jigsawImgs === void 0 ? void 0 : jigsawImgs.puzzleUrl, alt: "", "data-id": exports.CurrentTargetType.Puzzle, ref: puzzleRef }),
                     showRefreshIcon && status !== exports.Status.Success && tipIcon.refresh && (React.createElement("div", { className: classnames("".concat(jigsawPrefixCls, "-refresh"), (_d = {},
@@ -597,3 +597,3 @@ _d["".concat(jigsawPrefixCls, "-refresh-disabled")] = status === exports.Status.Verify || isLimitErrors,
                 _e["".concat(controlPrefixCls, "-errors")] = isLimitErrors,
-                _e)), onClick: handleClickControl },
+                _e)), onClick: handleClickControl, style: styles === null || styles === void 0 ? void 0 : styles.control },
             React.createElement("div", { className: classnames("".concat(controlPrefixCls, "-indicator")), ref: indicatorRef }),
@@ -600,0 +600,0 @@ React.createElement(SliderButton, tslib.__assign({}, sliderButtonProps, { className: classnames("".concat(controlPrefixCls, "-button"), sliderButtonProps === null || sliderButtonProps === void 0 ? void 0 : sliderButtonProps.className), disabled: loading, active: status === exports.Status.Moving, verify: status === exports.Status.Verify, success: status === exports.Status.Success, error: status === exports.Status.Error, "data-id": exports.CurrentTargetType.Button, mobile: isSupportTouch, ref: sliderButtonRef }), currentTipIcon),

dist/index.esm.js

@@ -33,3 +33,3 @@ import { __assign, __rest, __awaiter, __generator } from 'tslib';
 
-var css_248z = "@-webkit-keyframes slider-icon-animate_spin {\n  100% {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n@keyframes slider-icon-animate_spin {\n  100% {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n.rc-slider-captcha-icon {\n  display: inline-block;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-style: normal;\n  line-height: 0;\n  text-align: center;\n  text-transform: none;\n  vertical-align: -0.125em;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.rc-slider-captcha-icon > svg {\n  line-height: 1;\n}\n.rc-slider-captcha-icon-spin {\n  -webkit-animation: slider-icon-animate_spin 1s infinite linear;\n          animation: slider-icon-animate_spin 1s infinite linear;\n}\n.rc-slider-captcha-button {\n  display: inline-block;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 40px;\n  height: 100%;\n  padding: 5px 0;\n  color: #676d73;\n  color: var(--rcsc-button-color, #676d73);\n  font-size: 22px;\n  line-height: 1;\n  background-color: #fff;\n  background-color: var(--rcsc-button-bg-color, #fff);\n  border-radius: 2px;\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);\n  cursor: -webkit-grab;\n  cursor: grab;\n  transition-timing-function: linear;\n  transition-duration: 0.2s;\n  transition-property: background-color, color;\n  touch-action: none;\n}\n.rc-slider-captcha-button-active {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-verify {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-pc:hover {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button:active {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-active,\n.rc-slider-captcha-button:active {\n  cursor: -webkit-grabbing;\n  cursor: grabbing;\n}\n.rc-slider-captcha-button-verify,\n.rc-slider-captcha-button-verify:active {\n  cursor: wait;\n}\n.rc-slider-captcha-button-error {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-error:hover {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-error:active {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-success {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-success:hover {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-success:active {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-disabled {\n  color: #676d73;\n  color: var(--rcsc-button-color, #676d73);\n  background-color: #fff;\n  background-color: var(--rcsc-button-bg-color, #fff);\n  cursor: no-drop;\n  opacity: 0.7;\n}\n.rc-slider-captcha-button-disabled:hover {\n  color: #676d73;\n  color: var(--rcsc-button-color, #676d73);\n  background-color: #fff;\n  background-color: var(--rcsc-button-bg-color, #fff);\n  cursor: no-drop;\n  opacity: 0.7;\n}\n.rc-slider-captcha-button-disabled:active {\n  color: #676d73;\n  color: var(--rcsc-button-color, #676d73);\n  background-color: #fff;\n  background-color: var(--rcsc-button-bg-color, #fff);\n  cursor: no-drop;\n  opacity: 0.7;\n}\n.rc-slider-captcha-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  padding: 15px;\n  color: #45494c;\n  color: var(--rcsc-text-color, #45494c);\n  font-size: 14px;\n  text-align: center;\n  background-color: #f7f9fa;\n  background-color: var(--rcsc-bg-color, #f7f9fa);\n}\n.rc-slider-captcha-loading-icon {\n  font-size: 30px;\n}\n.rc-slider-captcha-loading-text {\n  margin-top: 5px;\n}\n.rc-slider-captcha {\n  position: relative;\n}\n.rc-slider-captcha > * {\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.rc-slider-captcha-control {\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 42px;\n  background-color: #f7f9fa;\n  background-color: var(--rcsc-bg-color, #f7f9fa);\n  border: 1px solid #e4e7eb;\n  border: 1px solid var(--rcsc-border-color, #e4e7eb);\n  border-radius: 2px;\n}\n.rc-slider-captcha-control-button {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n}\n.rc-slider-captcha-control-indicator {\n  position: absolute;\n  top: -1px;\n  bottom: -1px;\n  left: -1px;\n  display: none;\n  box-sizing: border-box;\n  width: 0;\n  background-color: #d1e9fe;\n  background-color: var(--rcsc-primary-light, #d1e9fe);\n  border: 1px solid #1991fa;\n  border: 1px solid var(--rcsc-primary, #1991fa);\n  border-radius: 2px;\n}\n.rc-slider-captcha-control-tips {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px 0;\n  color: #45494c;\n  color: var(--rcsc-text-color, #45494c);\n  font-size: 14px;\n  line-height: 20px;\n  text-align: center;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.rc-slider-captcha-control-moving .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-verify .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-error .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-success .rc-slider-captcha-control-indicator {\n  display: block;\n}\n.rc-slider-captcha-control-error .rc-slider-captcha-control-indicator {\n  background-color: #fce1e1;\n  background-color: var(--rcsc-error-light, #fce1e1);\n  border-color: #f57a7a;\n  border-color: var(--rcsc-error, #f57a7a);\n}\n.rc-slider-captcha-control-success .rc-slider-captcha-control-indicator {\n  background-color: #d2f4ef;\n  background-color: var(--rcsc-success-light, #d2f4ef);\n  border-color: #52ccba;\n  border-color: var(--rcsc-success, #52ccba);\n}\n.rc-slider-captcha-control-errors {\n  padding-left: 0;\n  background-color: #fce1e1;\n  background-color: var(--rcsc-error-light, #fce1e1);\n  border-color: #f57a7a;\n  border-color: var(--rcsc-error, #f57a7a);\n}\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-button,\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-indicator {\n  display: none;\n}\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-tips {\n  color: #f57a7a;\n  color: var(--rcsc-error, #f57a7a);\n  cursor: pointer;\n}\n.rc-slider-captcha-jigsaw {\n  position: relative;\n  background-color: #f7f9fa;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.rc-slider-captcha-jigsaw img {\n  position: absolute;\n}\n.rc-slider-captcha-jigsaw-bg {\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.rc-slider-captcha-jigsaw-puzzle {\n  width: 60px;\n  height: 100%;\n  touch-action: none;\n}\n.rc-slider-captcha-jigsaw-puzzle:hover {\n  cursor: -webkit-grab;\n  cursor: grab;\n}\n.rc-slider-captcha-jigsaw-puzzle:active {\n  cursor: -webkit-grabbing;\n  cursor: grabbing;\n}\n.rc-slider-captcha-jigsaw-refresh {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  padding: 5px;\n  color: #fff;\n  font-size: 22px;\n  line-height: 0;\n  cursor: pointer;\n  opacity: 0.75;\n  transition: opacity 0.2s linear;\n}\n.rc-slider-captcha-jigsaw-refresh:hover {\n  opacity: 1;\n}\n.rc-slider-captcha-jigsaw-refresh-disabled {\n  cursor: not-allowed;\n}\n.rc-slider-captcha-jigsaw-refresh-disabled:hover {\n  opacity: 0.75;\n}\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle {\n  pointer-events: none;\n}\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle:hover,\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle:active {\n  cursor: default;\n}\n.rc-slider-captcha-panel {\n  padding-bottom: 15px;\n}\n.rc-slider-captcha-panel-inner {\n  overflow: hidden;\n  border-radius: 2px;\n}\n.rc-slider-captcha-float .rc-slider-captcha-panel {\n  position: absolute;\n  left: 0;\n  display: none;\n  opacity: 0;\n  transition-timing-function: ease-out;\n  transition-duration: 0.3s;\n  transition-property: top, bottom, opacity;\n}\n.rc-slider-captcha-float-top .rc-slider-captcha-panel {\n  bottom: 22px;\n}\n.rc-slider-captcha-float-bottom .rc-slider-captcha-panel {\n  top: 22px;\n  padding: 15px 0 0;\n}\n";
+var css_248z = "@-webkit-keyframes slider-icon-animate_spin {\n  100% {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n@keyframes slider-icon-animate_spin {\n  100% {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n.rc-slider-captcha-icon {\n  display: inline-block;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-style: normal;\n  line-height: 0;\n  text-align: center;\n  text-transform: none;\n  vertical-align: -0.125em;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.rc-slider-captcha-icon > svg {\n  line-height: 1;\n}\n.rc-slider-captcha-icon-spin {\n  -webkit-animation: slider-icon-animate_spin 1s infinite linear;\n          animation: slider-icon-animate_spin 1s infinite linear;\n}\n.rc-slider-captcha-button {\n  display: inline-block;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 40px;\n  height: 100%;\n  padding: 5px 0;\n  color: #676d73;\n  color: var(--rcsc-button-color, #676d73);\n  font-size: 22px;\n  line-height: 1;\n  background-color: #fff;\n  background-color: var(--rcsc-button-bg-color, #fff);\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);\n  cursor: -webkit-grab;\n  cursor: grab;\n  transition-timing-function: linear;\n  transition-duration: 0.2s;\n  transition-property: background-color, color;\n  touch-action: none;\n}\n.rc-slider-captcha-button-active {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-verify {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-pc:hover {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button:active {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-active,\n.rc-slider-captcha-button:active {\n  cursor: -webkit-grabbing;\n  cursor: grabbing;\n}\n.rc-slider-captcha-button-verify,\n.rc-slider-captcha-button-verify:active {\n  cursor: wait;\n}\n.rc-slider-captcha-button-error {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-error:hover {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-error:active {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-success {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-success:hover {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-success:active {\n  color: #fff;\n  color: var(--rcsc-button-hover-color, #fff);\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-disabled {\n  color: #676d73;\n  color: var(--rcsc-button-color, #676d73);\n  background-color: #fff;\n  background-color: var(--rcsc-button-bg-color, #fff);\n  cursor: no-drop;\n  opacity: 0.7;\n}\n.rc-slider-captcha-button-disabled:hover {\n  color: #676d73;\n  color: var(--rcsc-button-color, #676d73);\n  background-color: #fff;\n  background-color: var(--rcsc-button-bg-color, #fff);\n  cursor: no-drop;\n  opacity: 0.7;\n}\n.rc-slider-captcha-button-disabled:active {\n  color: #676d73;\n  color: var(--rcsc-button-color, #676d73);\n  background-color: #fff;\n  background-color: var(--rcsc-button-bg-color, #fff);\n  cursor: no-drop;\n  opacity: 0.7;\n}\n.rc-slider-captcha-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  padding: 15px;\n  color: #45494c;\n  color: var(--rcsc-text-color, #45494c);\n  font-size: 14px;\n  text-align: center;\n  background-color: #f7f9fa;\n  background-color: var(--rcsc-bg-color, #f7f9fa);\n}\n.rc-slider-captcha-loading-icon {\n  font-size: 30px;\n}\n.rc-slider-captcha-loading-text {\n  margin-top: 5px;\n}\n.rc-slider-captcha {\n  position: relative;\n}\n.rc-slider-captcha > * {\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.rc-slider-captcha-control {\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 42px;\n  background-color: #f7f9fa;\n  background-color: var(--rcsc-bg-color, #f7f9fa);\n  border: 1px solid #e4e7eb;\n  border: 1px solid var(--rcsc-border-color, #e4e7eb);\n  border-radius: 2px;\n  border-radius: var(--rcsc-control-border-radius, 2px);\n}\n.rc-slider-captcha-control-button {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n  border-radius: 2px;\n  border-radius: var(--rcsc-control-border-radius, 2px);\n}\n.rc-slider-captcha-control-indicator {\n  position: absolute;\n  top: -1px;\n  bottom: -1px;\n  left: -1px;\n  display: none;\n  box-sizing: border-box;\n  width: 0;\n  background-color: #d1e9fe;\n  background-color: var(--rcsc-primary-light, #d1e9fe);\n  border: 1px solid #1991fa;\n  border: 1px solid var(--rcsc-primary, #1991fa);\n  border-radius: 2px;\n  border-radius: var(--rcsc-control-border-radius, 2px);\n}\n.rc-slider-captcha-control-tips {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px 0;\n  color: #45494c;\n  color: var(--rcsc-text-color, #45494c);\n  font-size: 14px;\n  line-height: 20px;\n  text-align: center;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.rc-slider-captcha-control-moving .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-verify .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-error .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-success .rc-slider-captcha-control-indicator {\n  display: block;\n}\n.rc-slider-captcha-control-error .rc-slider-captcha-control-indicator {\n  background-color: #fce1e1;\n  background-color: var(--rcsc-error-light, #fce1e1);\n  border-color: #f57a7a;\n  border-color: var(--rcsc-error, #f57a7a);\n}\n.rc-slider-captcha-control-success .rc-slider-captcha-control-indicator {\n  background-color: #d2f4ef;\n  background-color: var(--rcsc-success-light, #d2f4ef);\n  border-color: #52ccba;\n  border-color: var(--rcsc-success, #52ccba);\n}\n.rc-slider-captcha-control-errors {\n  padding-left: 0;\n  background-color: #fce1e1;\n  background-color: var(--rcsc-error-light, #fce1e1);\n  border-color: #f57a7a;\n  border-color: var(--rcsc-error, #f57a7a);\n}\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-button,\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-indicator {\n  display: none;\n}\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-tips {\n  color: #f57a7a;\n  color: var(--rcsc-error, #f57a7a);\n  cursor: pointer;\n}\n.rc-slider-captcha-jigsaw {\n  position: relative;\n  background-color: #f7f9fa;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.rc-slider-captcha-jigsaw img {\n  position: absolute;\n}\n.rc-slider-captcha-jigsaw-bg {\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.rc-slider-captcha-jigsaw-puzzle {\n  width: 60px;\n  height: 100%;\n  touch-action: none;\n}\n.rc-slider-captcha-jigsaw-puzzle:hover {\n  cursor: -webkit-grab;\n  cursor: grab;\n}\n.rc-slider-captcha-jigsaw-puzzle:active {\n  cursor: -webkit-grabbing;\n  cursor: grabbing;\n}\n.rc-slider-captcha-jigsaw-refresh {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  padding: 5px;\n  color: #fff;\n  font-size: 22px;\n  line-height: 0;\n  cursor: pointer;\n  opacity: 0.75;\n  transition: opacity 0.2s linear;\n}\n.rc-slider-captcha-jigsaw-refresh:hover {\n  opacity: 1;\n}\n.rc-slider-captcha-jigsaw-refresh-disabled {\n  cursor: not-allowed;\n}\n.rc-slider-captcha-jigsaw-refresh-disabled:hover {\n  opacity: 0.75;\n}\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle {\n  pointer-events: none;\n}\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle:hover,\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle:active {\n  cursor: default;\n}\n.rc-slider-captcha-panel {\n  padding-bottom: 15px;\n}\n.rc-slider-captcha-panel-inner {\n  overflow: hidden;\n  border-radius: 2px;\n  border-radius: var(--rcsc-panel-border-radius, 2px);\n}\n.rc-slider-captcha-float .rc-slider-captcha-panel {\n  position: absolute;\n  left: 0;\n  display: none;\n  opacity: 0;\n  transition-timing-function: ease-out;\n  transition-duration: 0.3s;\n  transition-property: top, bottom, opacity;\n}\n.rc-slider-captcha-float-top .rc-slider-captcha-panel {\n  bottom: 22px;\n}\n.rc-slider-captcha-float-bottom .rc-slider-captcha-panel {\n  top: 22px;\n  padding: 15px 0 0;\n}\n";
 styleInject(css_248z);
@@ -224,3 +224,3 @@
     var _b, _c, _d, _e;
-    var _f = _a.mode, outMode = _f === void 0 ? 'embed' : _f, _g = _a.limitErrorCount, limitErrorCount = _g === void 0 ? 0 : _g, outTipText = _a.tipText, outTipIcon = _a.tipIcon, outBgSize = _a.bgSize, outPuzzleSize = _a.puzzleSize, request = _a.request, _h = _a.autoRequest, autoRequest = _h === void 0 ? true : _h, onVerify = _a.onVerify, _j = _a.autoRefreshOnError, autoRefreshOnError = _j === void 0 ? true : _j, actionRef = _a.actionRef, _k = _a.showRefreshIcon, showRefreshIcon = _k === void 0 ? true : _k, jigsawContent = _a.jigsawContent, _l = _a.errorHoldDuration, errorHoldDuration = _l === void 0 ? 500 : _l, _m = _a.loadingDelay, loadingDelay = _m === void 0 ? 0 : _m, _o = _a.placement, placement = _o === void 0 ? 'top' : _o, loadingBoxProps = _a.loadingBoxProps, sliderButtonProps = _a.sliderButtonProps, className = _a.className, style = _a.style;
+    var _f = _a.mode, outMode = _f === void 0 ? 'embed' : _f, _g = _a.limitErrorCount, limitErrorCount = _g === void 0 ? 0 : _g, outTipText = _a.tipText, outTipIcon = _a.tipIcon, outBgSize = _a.bgSize, outPuzzleSize = _a.puzzleSize, request = _a.request, _h = _a.autoRequest, autoRequest = _h === void 0 ? true : _h, onVerify = _a.onVerify, _j = _a.autoRefreshOnError, autoRefreshOnError = _j === void 0 ? true : _j, actionRef = _a.actionRef, _k = _a.showRefreshIcon, showRefreshIcon = _k === void 0 ? true : _k, jigsawContent = _a.jigsawContent, _l = _a.errorHoldDuration, errorHoldDuration = _l === void 0 ? 500 : _l, _m = _a.loadingDelay, loadingDelay = _m === void 0 ? 0 : _m, _o = _a.placement, placement = _o === void 0 ? 'top' : _o, loadingBoxProps = _a.loadingBoxProps, sliderButtonProps = _a.sliderButtonProps, className = _a.className, style = _a.style, styles = _a.styles;
     var _p = useSafeState(), jigsawImgs = _p[0], setJigsawImgs = _p[1];
@@ -576,6 +576,6 @@ var _q = useSafeState(Status.Default), status = _q[0], setStatus = _q[1];
         !modeIsSlider && (React.createElement("div", { className: "".concat(prefixCls, "-panel"), ref: panelRef },
-            React.createElement("div", { className: "".concat(prefixCls, "-panel-inner"), style: { height: bgSize.height } },
-                React.createElement("div", { className: classnames(jigsawPrefixCls, (_c = {}, _c["".concat(jigsawPrefixCls, "-stop")] = isStop, _c)), style: __assign(__assign({}, bgSize), (loading || !(jigsawImgs === null || jigsawImgs === void 0 ? void 0 : jigsawImgs.bgUrl) ? { display: 'none' } : {})) },
-                    React.createElement("img", { className: "".concat(jigsawPrefixCls, "-bg"), style: bgSize, src: jigsawImgs === null || jigsawImgs === void 0 ? void 0 : jigsawImgs.bgUrl, alt: "" }),
-                    React.createElement("img", { className: "".concat(jigsawPrefixCls, "-puzzle"), style: puzzleSize, src: jigsawImgs === null || jigsawImgs === void 0 ? void 0 : jigsawImgs.puzzleUrl, alt: "", "data-id": CurrentTargetType.Puzzle, ref: puzzleRef }),
+            React.createElement("div", { className: "".concat(prefixCls, "-panel-inner"), style: __assign(__assign({}, styles === null || styles === void 0 ? void 0 : styles.panel), { height: bgSize.height }) },
+                React.createElement("div", { className: classnames(jigsawPrefixCls, (_c = {}, _c["".concat(jigsawPrefixCls, "-stop")] = isStop, _c)), style: __assign(__assign(__assign({}, styles === null || styles === void 0 ? void 0 : styles.jigsaw), bgSize), (loading || !(jigsawImgs === null || jigsawImgs === void 0 ? void 0 : jigsawImgs.bgUrl) ? { display: 'none' } : {})) },
+                    React.createElement("img", { className: "".concat(jigsawPrefixCls, "-bg"), style: __assign(__assign({}, styles === null || styles === void 0 ? void 0 : styles.bgImg), bgSize), src: jigsawImgs === null || jigsawImgs === void 0 ? void 0 : jigsawImgs.bgUrl, alt: "" }),
+                    React.createElement("img", { className: "".concat(jigsawPrefixCls, "-puzzle"), style: __assign(__assign({}, styles === null || styles === void 0 ? void 0 : styles.puzzleImg), puzzleSize), src: jigsawImgs === null || jigsawImgs === void 0 ? void 0 : jigsawImgs.puzzleUrl, alt: "", "data-id": CurrentTargetType.Puzzle, ref: puzzleRef }),
                     showRefreshIcon && status !== Status.Success && tipIcon.refresh && (React.createElement("div", { className: classnames("".concat(jigsawPrefixCls, "-refresh"), (_d = {},
@@ -593,3 +593,3 @@ _d["".concat(jigsawPrefixCls, "-refresh-disabled")] = status === Status.Verify || isLimitErrors,
                 _e["".concat(controlPrefixCls, "-errors")] = isLimitErrors,
-                _e)), onClick: handleClickControl },
+                _e)), onClick: handleClickControl, style: styles === null || styles === void 0 ? void 0 : styles.control },
             React.createElement("div", { className: classnames("".concat(controlPrefixCls, "-indicator")), ref: indicatorRef }),
@@ -596,0 +596,0 @@ React.createElement(SliderButton, __assign({}, sliderButtonProps, { className: classnames("".concat(controlPrefixCls, "-button"), sliderButtonProps === null || sliderButtonProps === void 0 ? void 0 : sliderButtonProps.className), disabled: loading, active: status === Status.Moving, verify: status === Status.Verify, success: status === Status.Success, error: status === Status.Error, "data-id": CurrentTargetType.Button, mobile: isSupportTouch, ref: sliderButtonRef }), currentTipIcon),

package.json

 {
   "name": "rc-slider-captcha",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "React slider captcha component.",
@@ -32,7 +32,7 @@ "keywords": [
     "tsc": "tsc --noEmit",
-    "prepare": "husky install"
+    "prepare": "husky"
   },
   "config": {
     "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
+      "path": "@commitlint/cz-commitlint"
     }
@@ -65,34 +65,36 @@ },
     "@babel/preset-typescript": "~7.22.15",
-    "@commitlint/cli": "^17.8.1",
-    "@commitlint/config-conventional": "^17.8.1",
+    "@commitlint/cli": "^19.2.1",
+    "@commitlint/config-conventional": "^19.1.0",
+    "@commitlint/cz-commitlint": "^19.2.0",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.5",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.1.2",
-    "@types/jest": "^29.5.10",
-    "@types/react": "^18.2.38",
-    "@types/react-dom": "^18.2.17",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.2",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.67",
+    "@types/react-dom": "^18.2.22",
     "@types/react-test-renderer": "^18.0.7",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
-    "antd": "^5.11.3",
-    "autoprefixer": "^10.4.16",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "antd": "^5.15.3",
+    "autoprefixer": "^10.4.19",
     "babel-jest": "^29.7.0",
-    "create-puzzle": "^2.0.0",
-    "cz-conventional-changelog": "^3.3.0",
-    "doly-icons": "^1.5.2",
+    "commitizen": "^4.3.0",
+    "create-puzzle": "^2.0.2",
+    "doly-icons": "^1.5.3",
     "dumi": "^1.1.54",
     "element-remove": "^1.0.4",
-    "eslint": "^8.54.0",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "husky": "^8.0.3",
+    "husky": "^9.0.11",
+    "inquirer": "9",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "less": "^4.2.0",
-    "lint-staged": "^13.3.0",
-    "postcss": "^8.4.31",
+    "lint-staged": "^15.2.2",
+    "postcss": "^8.4.38",
     "postcss-css-variables": "^0.19.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.2.5",
     "prettier-plugin-two-style-order": "^1.0.1",
@@ -102,13 +104,13 @@ "react": "^18.2.0",
     "react-test-renderer": "^18.2.0",
-    "rollup": "^3.29.4",
+    "rollup": "^4.13.0",
     "rollup-plugin-postcss": "^4.0.2",
     "stylelint": "^14.16.1",
-    "stylelint-config-css-modules": "^4.3.0",
+    "stylelint-config-css-modules": "^4.4.0",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^28.0.0",
-    "stylelint-declaration-block-no-ignored-properties": "^2.7.0",
+    "stylelint-declaration-block-no-ignored-properties": "^2.8.0",
     "stylelint-no-unsupported-browser-features": "^5.0.4",
-    "typescript": "^5.3.2",
-    "ut2": "^1.5.5"
+    "typescript": "^5.4.3",
+    "ut2": "^1.7.1"
   },
@@ -137,3 +139,6 @@ "peerDependencies": {
     ]
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
   }
 }

README.md

@@ -146,4 +146,6 @@ # rc-slider-captcha
 | --rcsc-button-color | 按钮颜色 | `#676d73` <input type='color' value='#676d73' disabled /> |
-| --rcsc-button-bg-color | 按钮颜色 | `#ffffff` <input type='color' value='#ffffff' disabled /> |
 | --rcsc-button-hover-color | 鼠标移入时，按钮颜色 | `#ffffff` <input type='color' value='#ffffff' disabled /> |
+| --rcsc-button-bg-color | 按钮背景颜色 | `#ffffff` <input type='color' value='#ffffff' disabled /> |
+| --rcsc-panel-border-radius | 图片容器边框圆角 | `2px` |
+| --rcsc-control-border-radius | 滑轨\/滑轨按钮边框圆角 | `2px` |
 
@@ -150,0 +152,0 @@ [site]: https://caijf.github.io/rc-slider-captcha/index.html

types/index.d.ts

@@ -75,2 +75,9 @@ import React, { ReactNode } from 'react';
     style?: React.CSSProperties;
+    styles?: {
+        panel?: React.CSSProperties;
+        jigsaw?: React.CSSProperties;
+        bgImg?: React.CSSProperties;
+        puzzleImg?: React.CSSProperties;
+        control?: React.CSSProperties;
+    };
 } & ({
@@ -77,0 +84,0 @@ mode?: 'embed' | 'float';

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

99085

increased by1.86%

Lines of code

1402

increased by0.86%

Number of lines in readme file

154

increased by1.32%

Worsened metrics

Dev dependency count

53

increased by3.92%

No dependency changes