@para-ui/core 3.0.0 → 3.0.2

package/Stepper/index.js

@@ -13,6 +13,8 @@ import Seven from '@para-ui/icons/Seven';
 import Eight from '@para-ui/icons/Eight';
 import Nine from '@para-ui/icons/Nine';
 import Check from '@para-ui/icons/Check';
+import { $ as $prefixCls, a as $rcPrefixCls } from '../_verture/constant-bf34e6fa.js';
+import clsx from 'clsx';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 
 var Icons = {
@@ -28,7 +30,7 @@ var Icons = {
   'done': jsx(Check, {})
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/26 下午2:57\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-stepper {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  font-variant: tabular-nums;\n  line-height: 1.5715;\n  list-style: none;\n  font-feature-settings: \"tnum\";\n  display: flex;\n  width: 100%;\n  text-align: initial;\n}\n\n.paraui-stepper-item {\n  position: relative;\n  display: inline-block;\n  flex: 1;\n  vertical-align: top;\n}\n\n.paraui-stepper-item-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  outline: none;\n}\n\n.paraui-stepper-item:last-child > .paraui-stepper-item-container > .paraui-stepper-item-tail,\n.paraui-stepper-item:last-child > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-title::after {\n  display: none;\n}\n\n.paraui-stepper-item-icon,\n.paraui-stepper-item-content {\n  display: block;\n  vertical-align: top;\n}\n\n.paraui-stepper-item-icon {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 30px;\n  height: 30px;\n  font-size: 16px;\n  line-height: 30px;\n  text-align: center;\n  border-radius: 50%;\n  background-color: rgba(171, 176, 185, 0.12);\n  transition: background-color 0.3s, border-color 0.3s;\n}\n\n.paraui-stepper-item-icon .paraui-stepper-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: rgba(46, 55, 67, 0.7);\n  vertical-align: middle;\n}\n.paraui-stepper-item-icon .paraui-stepper-icon svg {\n  color: inherit;\n}\n\n.paraui-stepper-item-tail {\n  position: absolute;\n  top: 12px;\n  left: 0;\n  width: 100%;\n  padding: 0 10px;\n}\n\n.paraui-stepper-item-tail::after {\n  display: inline-block;\n  width: 100%;\n  height: 1px;\n  border-radius: 1px;\n  transition: background 0.3s;\n  content: \"\";\n}\n\n.paraui-stepper-item-title {\n  display: inline-block;\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 30px;\n}\n\n.paraui-stepper-item-title::after {\n  position: absolute;\n  display: block;\n  height: 1px;\n  content: \"\";\n  top: 15px;\n  left: calc(50% + 30px);\n  right: calc(-50% + 30px);\n}\n\n.paraui-stepper-item-subtitle {\n  display: inline;\n  margin-left: 8px;\n  color: rgb(46, 55, 67);\n  font-weight: normal;\n  font-size: 14px;\n}\n\n.paraui-stepper-item-description {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n}\n\n.paraui-stepper-item-wait .paraui-stepper-item-icon {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n\n.paraui-stepper-item-wait .paraui-stepper-item-icon > .paraui-stepper-icon {\n  color: rgba(46, 55, 67, 0.7);\n}\n\n.paraui-stepper-item-wait .paraui-stepper-item-icon > .paraui-stepper-icon .paraui-stepper-icon-dot {\n  background: rgba(171, 176, 185, 0.4);\n}\n\n.paraui-stepper-item-wait > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-title {\n  color: rgba(46, 55, 67, 0.7);\n}\n\n.paraui-stepper-item-wait > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-title::after {\n  border-top: 1px dashed rgba(171, 176, 185, 0.4);\n  height: 0;\n  background: transparent;\n}\n\n.paraui-stepper-item-wait > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-description {\n  color: rgb(235, 96, 84);\n}\n\n.paraui-stepper-item-wait > .paraui-stepper-item-container > .paraui-stepper-item-tail::after {\n  border-left: 1px dashed rgba(171, 176, 185, 0.4);\n}\n\n.paraui-stepper-item-process .paraui-stepper-item-icon {\n  background-color: rgb(255, 255, 255);\n}\n\n.paraui-stepper-item-process .paraui-stepper-item-icon > .paraui-stepper-icon {\n  color: rgb(54, 102, 214);\n}\n\n.paraui-stepper-item-process .paraui-stepper-item-icon > .paraui-stepper-icon .paraui-stepper-icon-dot {\n  background: rgb(54, 102, 214);\n}\n\n.paraui-stepper-item-process > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-title {\n  color: rgb(54, 102, 214);\n}\n\n.paraui-stepper-item-process > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-title::after {\n  background: linear-gradient(90deg, rgb(61, 102, 248), rgb(119, 147, 249) 74%, rgb(216, 223, 250));\n}\n\n.paraui-stepper-item-process > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-description {\n  color: rgb(46, 55, 67);\n}\n\n.paraui-stepper-item-process > .paraui-stepper-item-container > .paraui-stepper-item-tail::after {\n  background: linear-gradient(180deg, rgb(61, 102, 248), rgb(119, 147, 249) 74%, rgb(216, 223, 250));\n}\n\n.paraui-stepper-item-process > .paraui-stepper-item-container > .paraui-stepper-item-icon {\n  background: rgb(54, 102, 214);\n}\n\n.paraui-stepper-item-process > .paraui-stepper-item-container > .paraui-stepper-item-icon .paraui-stepper-icon {\n  color: rgb(255, 255, 255);\n}\n\n.paraui-stepper-item-process > .paraui-stepper-item-container > .paraui-stepper-item-title {\n  font-weight: 400;\n}\n\n.paraui-stepper-item-finish .paraui-stepper-item-icon {\n  background-color: rgba(54, 102, 214, 0.8);\n}\n\n.paraui-stepper-item-finish .paraui-stepper-item-icon > .paraui-stepper-icon {\n  color: rgb(255, 255, 255);\n}\n\n.paraui-stepper-item-finish .paraui-stepper-item-icon > .paraui-stepper-icon .paraui-stepper-icon-dot {\n  background: rgb(54, 102, 214);\n}\n\n.paraui-stepper-item-finish > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-title {\n  color: rgb(46, 55, 67);\n}\n\n.paraui-stepper-item-finish > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-title::after {\n  background-color: rgba(171, 176, 185, 0.4);\n}\n\n.paraui-stepper-item-finish > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-description {\n  color: rgb(46, 55, 67);\n}\n\n.paraui-stepper-item-finish > .paraui-stepper-item-container > .paraui-stepper-item-tail::after {\n  border-left: 1px solid rgba(171, 176, 185, 0.4);\n}\n\n.paraui-stepper-item-error .paraui-stepper-item-icon {\n  background-color: rgb(255, 255, 255);\n  border-color: rgb(235, 96, 84);\n}\n\n.paraui-stepper-item-error .paraui-stepper-item-icon > .paraui-stepper-icon {\n  color: rgb(235, 96, 84);\n}\n\n.paraui-stepper-item-error .paraui-stepper-item-icon > .paraui-stepper-icon .paraui-stepper-icon-dot {\n  background: rgb(235, 96, 84);\n}\n\n.paraui-stepper-item-error > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-title {\n  color: rgb(235, 96, 84);\n}\n\n.paraui-stepper-item-error > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-title::after {\n  background-color: rgba(248, 249, 251, 0.8);\n}\n\n.paraui-stepper-item-error > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-description {\n  color: rgb(235, 96, 84);\n}\n\n.paraui-stepper-item-error > .paraui-stepper-item-container > .paraui-stepper-item-tail::after {\n  background-color: rgba(248, 249, 251, 0.8);\n}\n\n.paraui-stepper-item.paraui-stepper-next-error .paraui-stepper-item-title::after {\n  background: rgb(235, 96, 84);\n}\n\n.paraui-stepper-item-disabled {\n  cursor: not-allowed;\n}\n\n.paraui-stepper .paraui-stepper-item:not(.paraui-stepper-item-active) > .paraui-stepper-item-container[role=button] {\n  cursor: pointer;\n}\n\n.paraui-stepper .paraui-stepper-item:not(.paraui-stepper-item-active) > .paraui-stepper-item-container[role=button] .paraui-stepper-item-title,\n.paraui-stepper .paraui-stepper-item:not(.paraui-stepper-item-active) > .paraui-stepper-item-container[role=button] .paraui-stepper-item-subtitle,\n.paraui-stepper .paraui-stepper-item:not(.paraui-stepper-item-active) > .paraui-stepper-item-container[role=button] .paraui-stepper-item-description,\n.paraui-stepper .paraui-stepper-item:not(.paraui-stepper-item-active) > .paraui-stepper-item-container[role=button] .paraui-stepper-item-icon .paraui-stepper-icon {\n  transition: color 0.3s;\n}\n\n.paraui-stepper .paraui-stepper-item:not(.paraui-stepper-item-active) > .paraui-stepper-item-container[role=button]:hover .paraui-stepper-item-title,\n.paraui-stepper .paraui-stepper-item:not(.paraui-stepper-item-active) > .paraui-stepper-item-container[role=button]:hover .paraui-stepper-item-subtitle,\n.paraui-stepper .paraui-stepper-item:not(.paraui-stepper-item-active) > .paraui-stepper-item-container[role=button]:hover .paraui-stepper-item-description {\n  color: rgb(54, 102, 214);\n}\n\n.paraui-stepper .paraui-stepper-item:not(.paraui-stepper-item-active):not(.paraui-stepper-item-process) > .paraui-stepper-item-container[role=button]:hover .paraui-stepper-item-icon {\n  border-color: rgb(54, 102, 214);\n}\n\n.paraui-stepper .paraui-stepper-item:not(.paraui-stepper-item-active):not(.paraui-stepper-item-process) > .paraui-stepper-item-container[role=button]:hover .paraui-stepper-item-icon .paraui-stepper-icon {\n  color: rgb(54, 102, 214);\n}\n\n.paraui-stepper-horizontal:not(.paraui-stepper-label-vertical) .paraui-stepper-item {\n  white-space: nowrap;\n}\n\n.paraui-stepper-horizontal:not(.paraui-stepper-label-vertical) .paraui-stepper-item:first-child {\n  padding-left: 0;\n}\n\n.paraui-stepper-horizontal:not(.paraui-stepper-label-vertical) .paraui-stepper-item:last-child .paraui-stepper-item-title {\n  padding-right: 0;\n}\n\n.paraui-stepper-horizontal:not(.paraui-stepper-label-vertical) .paraui-stepper-item-tail {\n  display: none;\n}\n\n.paraui-stepper-horizontal:not(.paraui-stepper-label-vertical) .paraui-stepper-item-description {\n  max-width: 140px;\n  white-space: normal;\n}\n\n.paraui-stepper-item-custom > .paraui-stepper-item-container > .paraui-stepper-item-icon {\n  height: auto;\n  border: 0;\n}\n\n.paraui-stepper-item-custom > .paraui-stepper-item-container > .paraui-stepper-item-icon > .paraui-stepper-icon {\n  top: 0;\n  left: 0;\n  width: 30px;\n  height: 30px;\n  background-color: rgba(171, 176, 185, 0.12);\n  border-radius: 50%;\n}\n\n.paraui-stepper-item-custom.paraui-stepper-item-process .paraui-stepper-item-icon > .paraui-stepper-icon {\n  background: rgb(54, 102, 214);\n}\n\n.paraui-stepper:not(.paraui-stepper-vertical) .paraui-stepper-item-custom .paraui-stepper-item-icon {\n  width: auto;\n  background: none;\n}\n\n.paraui-stepper:not(.paraui-stepper-vertical) .paraui-stepper-item-custom.paraui-stepper-item-process .paraui-stepper-item-icon {\n  background: rgb(54, 102, 214);\n}\n\n.paraui-stepper:not(.paraui-stepper-vertical) .paraui-stepper-item-custom.paraui-stepper-item-finish .paraui-stepper-item-icon {\n  background: rgba(54, 102, 214, 0.8);\n}\n\n.paraui-stepper-small.paraui-stepper-horizontal:not(.paraui-stepper-label-vertical) .paraui-stepper-item {\n  padding-left: 12px;\n}\n\n.paraui-stepper-small.paraui-stepper-horizontal:not(.paraui-stepper-label-vertical) .paraui-stepper-item:first-child {\n  padding-left: 0;\n}\n\n.paraui-stepper-small .paraui-stepper-item-icon {\n  width: 24px;\n  height: 24px;\n  margin: 0 8px 0 0;\n  font-size: 12px;\n  line-height: 24px;\n  text-align: center;\n  border-radius: 24px;\n}\n\n.paraui-stepper-small .paraui-stepper-item-title {\n  padding-right: 12px;\n  font-size: 14px;\n  line-height: 24px;\n}\n\n.paraui-stepper-small .paraui-stepper-item-title::after {\n  top: 12px;\n}\n\n.paraui-stepper-small .paraui-stepper-item-description {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n}\n\n.paraui-stepper-small .paraui-stepper-item-tail {\n  top: 8px;\n}\n\n.paraui-stepper-small .paraui-stepper-item-custom .paraui-stepper-item-icon {\n  width: inherit;\n  height: inherit;\n  line-height: inherit;\n  background: none;\n  border: 0;\n  border-radius: 0;\n}\n\n.paraui-stepper-small .paraui-stepper-item-custom .paraui-stepper-item-icon > .paraui-stepper-icon {\n  font-size: 24px;\n  line-height: 24px;\n  transform: none;\n}\n\n.paraui-stepper-vertical {\n  display: flex;\n  flex-direction: column;\n}\n\n.paraui-stepper-vertical > .paraui-stepper-item {\n  display: block;\n  flex: 1 0 auto;\n  padding-left: 0;\n  overflow: visible;\n}\n\n.paraui-stepper-vertical > .paraui-stepper-item .paraui-stepper-item-icon {\n  float: left;\n  margin-right: 16px;\n}\n\n.paraui-stepper-vertical > .paraui-stepper-item .paraui-stepper-item-content {\n  display: block;\n  min-height: 68px;\n  overflow: hidden;\n}\n\n.paraui-stepper-vertical > .paraui-stepper-item .paraui-stepper-item-title {\n  line-height: 32px;\n}\n\n.paraui-stepper-vertical > .paraui-stepper-item .paraui-stepper-item-description {\n  padding-bottom: 12px;\n}\n\n.paraui-stepper-vertical > .paraui-stepper-item > .paraui-stepper-item-container {\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n.paraui-stepper-vertical > .paraui-stepper-item > .paraui-stepper-item-container > .paraui-stepper-item-tail {\n  position: absolute;\n  top: 0;\n  left: 15px;\n  width: 1px;\n  height: 100%;\n  padding: 36px 0 6px;\n}\n\n.paraui-stepper-vertical > .paraui-stepper-item > .paraui-stepper-item-container > .paraui-stepper-item-tail::after {\n  width: 1px;\n  height: 100%;\n}\n\n.paraui-stepper-vertical > .paraui-stepper-item:not(:last-child) > .paraui-stepper-item-container > .paraui-stepper-item-tail {\n  display: block;\n}\n\n.paraui-stepper-vertical > .paraui-stepper-item > .paraui-stepper-item-container > .paraui-stepper-item-content > .paraui-stepper-item-title::after {\n  display: none;\n}\n\n.paraui-stepper-vertical.paraui-stepper-small .paraui-stepper-item-container .paraui-stepper-item-tail {\n  position: absolute;\n  top: 0;\n  left: 12px;\n  padding: 30px 0 6px;\n}\n\n.paraui-stepper-vertical.paraui-stepper-small .paraui-stepper-item-container .paraui-stepper-item-title {\n  line-height: 24px;\n}\n\n.paraui-stepper-label-vertical .paraui-stepper-item {\n  overflow: visible;\n}\n\n.paraui-stepper-label-vertical .paraui-stepper-item-tail {\n  margin-left: 58px;\n  padding: 3.5px 24px;\n}\n\n.paraui-stepper-label-vertical .paraui-stepper-item-content {\n  display: block;\n  width: 116px;\n  margin-top: 8px;\n  text-align: center;\n}\n\n.paraui-stepper-label-vertical .paraui-stepper-item-icon {\n  display: inline-block;\n  margin-left: 42px;\n}\n\n.paraui-stepper-label-vertical .paraui-stepper-item-title {\n  padding-right: 0;\n  padding-left: 0;\n}\n\n.paraui-stepper-label-vertical .paraui-stepper-item-title::after {\n  display: none;\n}\n\n.paraui-stepper-label-vertical .paraui-stepper-item-subtitle {\n  display: block;\n  margin-bottom: 4px;\n  margin-left: 0;\n  line-height: 1.5715;\n}\n\n.paraui-stepper-label-vertical.paraui-stepper-small:not(.paraui-stepper-dot) .paraui-stepper-item-icon {\n  margin-left: 46px;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/26 下午2:57\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-stepper {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  font-variant: tabular-nums;\n  line-height: 1.5715;\n  list-style: none;\n  font-feature-settings: \"tnum\";\n  display: flex;\n  width: 100%;\n  text-align: initial;\n}\n.paraui-v3-stepper .component-stepper-item {\n  position: relative;\n  display: inline-block;\n  flex: 1;\n  vertical-align: top;\n}\n.paraui-v3-stepper .component-stepper-item-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  outline: none;\n}\n.paraui-v3-stepper .component-stepper-item:last-child > .component-stepper-item-container > .component-stepper-item-tail,\n.paraui-v3-stepper .component-stepper-item:last-child > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  display: none;\n}\n.paraui-v3-stepper .component-stepper-item-icon,\n.paraui-v3-stepper .component-stepper-item-content {\n  display: block;\n  vertical-align: top;\n}\n.paraui-v3-stepper .component-stepper-item-icon {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 30px;\n  height: 30px;\n  font-size: 16px;\n  line-height: 30px;\n  text-align: center;\n  border-radius: 50%;\n  background-color: rgba(171, 176, 185, 0.12);\n  transition: background-color 0.3s, border-color 0.3s;\n}\n.paraui-v3-stepper .component-stepper-item-icon .component-stepper-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: rgba(46, 55, 67, 0.7);\n  vertical-align: middle;\n}\n.paraui-v3-stepper .component-stepper-item-icon .component-stepper-icon svg {\n  color: inherit;\n}\n.paraui-v3-stepper .component-stepper-item-tail {\n  position: absolute;\n  top: 12px;\n  left: 0;\n  width: 100%;\n  padding: 0 10px;\n}\n.paraui-v3-stepper .component-stepper-item-tail::after {\n  display: inline-block;\n  width: 100%;\n  height: 1px;\n  border-radius: 1px;\n  transition: background 0.3s;\n  content: \"\";\n}\n.paraui-v3-stepper .component-stepper-item-title {\n  display: inline-block;\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 30px;\n}\n.paraui-v3-stepper .component-stepper-item-title::after {\n  position: absolute;\n  display: block;\n  height: 1px;\n  content: \"\";\n  top: 15px;\n  left: calc(50% + 30px);\n  right: calc(-50% + 30px);\n}\n.paraui-v3-stepper .component-stepper-item-subtitle {\n  display: inline;\n  margin-left: 8px;\n  color: rgb(46, 55, 67);\n  font-weight: normal;\n  font-size: 14px;\n}\n.paraui-v3-stepper .component-stepper-item-description {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n}\n.paraui-v3-stepper .component-stepper-item-wait .component-stepper-item-icon {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-stepper .component-stepper-item-wait .component-stepper-item-icon > .component-stepper-icon {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-stepper .component-stepper-item-wait .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  border-top: 1px dashed rgba(171, 176, 185, 0.4);\n  height: 0;\n  background: transparent;\n}\n.paraui-v3-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: rgb(235, 96, 84);\n}\n.paraui-v3-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-tail::after {\n  border-left: 1px dashed rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-stepper .component-stepper-item-process .component-stepper-item-icon {\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v3-stepper .component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  background: linear-gradient(90deg, rgb(61, 102, 248), rgb(119, 147, 249) 74%, rgb(216, 223, 250));\n}\n.paraui-v3-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-tail::after {\n  background: linear-gradient(180deg, rgb(61, 102, 248), rgb(119, 147, 249) 74%, rgb(216, 223, 250));\n}\n.paraui-v3-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-icon {\n  background: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-icon .component-stepper-icon {\n  color: rgb(255, 255, 255);\n}\n.paraui-v3-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-title {\n  font-weight: 400;\n}\n.paraui-v3-stepper .component-stepper-item-finish .component-stepper-item-icon {\n  background-color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-stepper .component-stepper-item-finish .component-stepper-item-icon > .component-stepper-icon {\n  color: rgb(255, 255, 255);\n}\n.paraui-v3-stepper .component-stepper-item-finish .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  background-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-tail::after {\n  border-left: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-stepper .component-stepper-item-error .component-stepper-item-icon {\n  background-color: rgb(255, 255, 255);\n  border-color: rgb(235, 96, 84);\n}\n.paraui-v3-stepper .component-stepper-item-error .component-stepper-item-icon > .component-stepper-icon {\n  color: rgb(235, 96, 84);\n}\n.paraui-v3-stepper .component-stepper-item-error .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: rgb(235, 96, 84);\n}\n.paraui-v3-stepper .component-stepper-item-error > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: rgb(235, 96, 84);\n}\n.paraui-v3-stepper .component-stepper-item-error > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  background-color: rgba(248, 249, 251, 0.8);\n}\n.paraui-v3-stepper .component-stepper-item-error > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: rgb(235, 96, 84);\n}\n.paraui-v3-stepper .component-stepper-item-error > .component-stepper-item-container > .component-stepper-item-tail::after {\n  background-color: rgba(248, 249, 251, 0.8);\n}\n.paraui-v3-stepper .component-stepper-item.component-stepper-next-error .component-stepper-item-title::after {\n  background: rgb(235, 96, 84);\n}\n.paraui-v3-stepper .component-stepper-item-disabled {\n  cursor: not-allowed;\n}\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] {\n  cursor: pointer;\n}\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-title,\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-subtitle,\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-description,\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-icon .component-stepper-icon {\n  transition: color 0.3s;\n}\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-title,\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-subtitle,\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-description {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active):not(.component-stepper-item-process) > .component-stepper-item-container[role=button]:hover .component-stepper-item-icon {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active):not(.component-stepper-item-process) > .component-stepper-item-container[role=button]:hover .component-stepper-item-icon .component-stepper-icon {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper-item-custom > .component-stepper-item-container > .component-stepper-item-icon {\n  height: auto;\n  border: 0;\n}\n.paraui-v3-stepper .component-stepper-item-custom > .component-stepper-item-container > .component-stepper-item-icon > .component-stepper-icon {\n  top: 0;\n  left: 0;\n  width: 30px;\n  height: 30px;\n  background-color: rgba(171, 176, 185, 0.12);\n  border-radius: 50%;\n}\n.paraui-v3-stepper .component-stepper-item-custom.component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon {\n  background: rgb(54, 102, 214);\n}\n.paraui-v3-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item {\n  white-space: nowrap;\n}\n.paraui-v3-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:first-child {\n  padding-left: 0;\n}\n.paraui-v3-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:last-child .component-stepper-item-title {\n  padding-right: 0;\n}\n.paraui-v3-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item-tail {\n  display: none;\n}\n.paraui-v3-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item-description {\n  max-width: 140px;\n  white-space: normal;\n}\n.paraui-v3-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom .component-stepper-item-icon {\n  width: auto;\n  background: none;\n}\n.paraui-v3-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom.component-stepper-item-process .component-stepper-item-icon {\n  background: rgb(54, 102, 214);\n}\n.paraui-v3-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom.component-stepper-item-finish .component-stepper-item-icon {\n  background: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-stepper.component-stepper-small.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item {\n  padding-left: 12px;\n}\n.paraui-v3-stepper.component-stepper-small.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:first-child {\n  padding-left: 0;\n}\n.paraui-v3-stepper.component-stepper-small .component-stepper-item-icon {\n  width: 24px;\n  height: 24px;\n  margin: 0 8px 0 0;\n  font-size: 12px;\n  line-height: 24px;\n  text-align: center;\n  border-radius: 24px;\n}\n.paraui-v3-stepper.component-stepper-small .component-stepper-item-title {\n  padding-right: 12px;\n  font-size: 14px;\n  line-height: 24px;\n}\n.paraui-v3-stepper.component-stepper-small .component-stepper-item-title::after {\n  top: 12px;\n}\n.paraui-v3-stepper.component-stepper-small .component-stepper-item-description {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n}\n.paraui-v3-stepper.component-stepper-small .component-stepper-item-tail {\n  top: 8px;\n}\n.paraui-v3-stepper.component-stepper-small .component-stepper-item-custom .component-stepper-item-icon {\n  width: inherit;\n  height: inherit;\n  line-height: inherit;\n  background: none;\n  border: 0;\n  border-radius: 0;\n}\n.paraui-v3-stepper.component-stepper-small .component-stepper-item-custom .component-stepper-item-icon > .component-stepper-icon {\n  font-size: 24px;\n  line-height: 24px;\n  transform: none;\n}\n.paraui-v3-stepper.component-stepper-vertical {\n  display: flex;\n  flex-direction: column;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item {\n  display: block;\n  flex: 1 0 auto;\n  padding-left: 0;\n  overflow: visible;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-icon {\n  float: left;\n  margin-right: 16px;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-content {\n  display: block;\n  min-height: 68px;\n  overflow: hidden;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-title {\n  line-height: 32px;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-description {\n  padding-bottom: 12px;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container {\n  flex-direction: row;\n  align-items: flex-start;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-tail {\n  position: absolute;\n  top: 0;\n  left: 15px;\n  width: 1px;\n  height: 100%;\n  padding: 36px 0 6px;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-tail::after {\n  width: 1px;\n  height: 100%;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item:not(:last-child) > .component-stepper-item-container > .component-stepper-item-tail {\n  display: block;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  display: none;\n}\n.paraui-v3-stepper.component-stepper-vertical.component-stepper-small .component-stepper-item-container .component-stepper-item-tail {\n  position: absolute;\n  top: 0;\n  left: 12px;\n  padding: 30px 0 6px;\n}\n.paraui-v3-stepper.component-stepper-vertical.component-stepper-small .component-stepper-item-container .component-stepper-item-title {\n  line-height: 24px;\n}\n.paraui-v3-stepper.component-stepper-label-vertical .component-stepper-item {\n  overflow: visible;\n}\n.paraui-v3-stepper.component-stepper-label-vertical .component-stepper-item-tail {\n  margin-left: 58px;\n  padding: 3.5px 24px;\n}\n.paraui-v3-stepper.component-stepper-label-vertical .component-stepper-item-content {\n  display: block;\n  width: 116px;\n  margin-top: 8px;\n  text-align: center;\n}\n.paraui-v3-stepper.component-stepper-label-vertical .component-stepper-item-icon {\n  display: inline-block;\n  margin-left: 42px;\n}\n.paraui-v3-stepper.component-stepper-label-vertical .component-stepper-item-title {\n  padding-right: 0;\n  padding-left: 0;\n}\n.paraui-v3-stepper.component-stepper-label-vertical .component-stepper-item-title::after {\n  display: none;\n}\n.paraui-v3-stepper.component-stepper-label-vertical .component-stepper-item-subtitle {\n  display: block;\n  margin-bottom: 4px;\n  margin-left: 0;\n  line-height: 1.5715;\n}\n.paraui-v3-stepper.component-stepper-label-vertical.component-stepper-small:not(.component-stepper-dot) .component-stepper-item-icon {\n  margin-left: 46px;\n}";
 styleInject(css_248z);
 
 var Stepper = function Stepper(props) {
@@ -41,9 +43,10 @@ var Stepper = function Stepper(props) {
       _props$direction = props.direction,
       direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
       children = props.children,
-      restProps = __rest(props, ["current", "activeStep", "mode", "steps", "direction", "children"]);
+      className = props.className,
+      restProps = __rest(props, ["current", "activeStep", "mode", "steps", "direction", "children", "className"]);
 
-  var prefixCls = 'paraui-stepper'; //内置finish、error 图标
+  var prefixCls = "".concat($rcPrefixCls, "-stepper"); //内置finish、error 图标
 
   var icons = {
     finish: Icons['done'],
@@ -84,6 +87,7 @@ var Stepper = function Stepper(props) {
   };
 
   return jsx(RcSteps, Object.assign({}, restProps, {
+    className: clsx("".concat($prefixCls, "-stepper"), className),
     current: activeStep !== null && activeStep !== void 0 ? activeStep : current,
     icons: icons,
     direction: direction,

package/Switch/index.js

@@ -1,9 +1,11 @@
+import { _ as _defineProperty } from '../_verture/defineProperty-0590dc61.js';
 import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import RcSwitch from 'rc-switch';
 import clsx from 'clsx';
 import LoadingOutlined from '@para-ui/icons/LoadingF';
 import Label from '../Label/index.js';
+import { $ as $prefixCls, a as $rcPrefixCls } from '../_verture/constant-bf34e6fa.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../Help/index.js';
 import '../Tooltip/index.js';
@@ -13,7 +15,7 @@ import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 import '@para-ui/icons/Help';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/3 下午5:58\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-switch {\n  position: relative;\n  display: inline-block;\n  min-width: 32px;\n  height: 18px;\n  vertical-align: middle;\n  background-color: transparent;\n  border: 0;\n  border-radius: 100px;\n  cursor: pointer;\n  transition: all 0.2s;\n  user-select: none;\n}\n.paraui-switch:before {\n  position: absolute;\n  top: 2px;\n  left: 0;\n  width: 100%;\n  height: 14px;\n  border-radius: 100px;\n  background-color: rgba(171, 176, 185, 0.4);\n  content: \"\";\n  transition: all 0.2s;\n}\n.paraui-switch:focus {\n  outline: 0;\n  box-shadow: none;\n}\n.paraui-switch-checked:focus {\n  box-shadow: none;\n}\n.paraui-switch:focus:hover {\n  box-shadow: none;\n}\n.paraui-switch-checked:before {\n  background-color: rgba(54, 102, 214, 0.2);\n}\n.paraui-switch-loading, .paraui-switch-disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n.paraui-switch-loading *, .paraui-switch-disabled * {\n  box-shadow: none;\n  cursor: not-allowed;\n}\n.paraui-switch-inner {\n  display: block;\n  margin: 0 7px 0 25px;\n  color: rgb(255, 255, 255);\n  font-size: 14px;\n  transition: margin 0.2s;\n}\n.paraui-switch-checked .paraui-switch-inner {\n  margin: 0 25px 0 7px;\n}\n.paraui-switch-handle {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 18px;\n  height: 18px;\n  transition: all 0.2s ease-in-out;\n}\n.paraui-switch-handle::before {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: #8996AA;\n  border-radius: 9px;\n  box-shadow: none;\n  transition: all 0.2s ease-in-out;\n  content: \"\";\n}\n.paraui-switch-checked .paraui-switch-handle {\n  left: calc(100% - 18px);\n}\n.paraui-switch-checked .paraui-switch-handle::before {\n  background-color: rgb(54, 102, 214);\n}\n.paraui-switch:not(.paraui-switch-disabled):active .paraui-switch-handle::before {\n  right: -30%;\n  left: 0;\n}\n.paraui-switch:not(.paraui-switch-disabled):active.paraui-switch-checked .paraui-switch-handle::before {\n  right: 0;\n  left: -30%;\n}\n.paraui-switch-loading-icon {\n  position: relative;\n  top: 1px;\n  color: rgb(54, 102, 214);\n  vertical-align: top;\n  animation: loadingCircle 1s infinite linear;\n}\n.paraui-switch-checked .paraui-switch-loading-icon {\n  color: rgb(255, 255, 255);\n}\n.paraui-switch-small {\n  min-width: 28px;\n  height: 14px;\n  line-height: 14px;\n}\n.paraui-switch-small .paraui-switch-inner {\n  margin: 0 5px 0 18px;\n  font-size: 14px;\n}\n.paraui-switch-small .paraui-switch-handle {\n  width: 12px;\n  height: 12px;\n}\n.paraui-switch-small .paraui-switch-loading-icon {\n  top: 1.5px;\n  font-size: 9px;\n}\n.paraui-switch-small.paraui-switch-checked .paraui-switch-inner {\n  margin: 0 18px 0 5px;\n}\n.paraui-switch-small.paraui-switch-checked .paraui-switch-handle {\n  left: calc(100% - 12px - 2px);\n}\n@keyframes loadingCircle {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.paraui-switch-label {\n  display: inline-flex;\n}\n.paraui-switch-label .paraui-switch-text {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 14px;\n  font-weight: 400;\n}\n.paraui-switch-label-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n.paraui-switch-label-top .paraui-switch-text {\n  margin-bottom: 8px;\n}\n.paraui-switch-label-bottom {\n  flex-direction: column;\n  align-items: flex-start;\n}\n.paraui-switch-label-bottom .paraui-switch-text {\n  margin-top: 8px;\n  margin-bottom: 0;\n}\n.paraui-switch-label-start {\n  flex-direction: row-reverse;\n  align-items: center;\n}\n.paraui-switch-label-start .paraui-switch-text {\n  margin-right: 8px;\n  margin-bottom: 0;\n}\n.paraui-switch-label-end {\n  flex-direction: row;\n  align-items: center;\n}\n.paraui-switch-label-end .paraui-switch-text {\n  margin-left: 8px;\n  margin-bottom: 0;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/3 下午5:58\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-switch {\n  position: relative;\n  display: inline-block;\n  min-width: 32px;\n  height: 18px;\n  vertical-align: middle;\n  background-color: transparent;\n  border: 0;\n  border-radius: 100px;\n  cursor: pointer;\n  transition: all 0.2s;\n  user-select: none;\n}\n.paraui-v3-switch:before {\n  position: absolute;\n  top: 2px;\n  left: 0;\n  width: 100%;\n  height: 14px;\n  border-radius: 100px;\n  background-color: rgba(171, 176, 185, 0.4);\n  content: \"\";\n  transition: all 0.2s;\n}\n.paraui-v3-switch:focus {\n  outline: 0;\n  box-shadow: none;\n}\n.paraui-v3-switch.component-switch-checked:focus {\n  box-shadow: none;\n}\n.paraui-v3-switch:focus:hover {\n  box-shadow: none;\n}\n.paraui-v3-switch.component-switch-checked:before {\n  background-color: rgba(54, 102, 214, 0.2);\n}\n.paraui-v3-switch-loading, .paraui-v3-switch.component-switch-disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n.paraui-v3-switch-loading *, .paraui-v3-switch.component-switch-disabled * {\n  box-shadow: none;\n  cursor: not-allowed;\n}\n.paraui-v3-switch .component-switch-inner {\n  display: block;\n  margin: 0 7px 0 25px;\n  color: rgb(255, 255, 255);\n  font-size: 14px;\n  transition: margin 0.2s;\n}\n.paraui-v3-switch.component-switch-checked .component-switch-inner {\n  margin: 0 25px 0 7px;\n}\n.paraui-v3-switch .component-switch-handle {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 18px;\n  height: 18px;\n  transition: all 0.2s ease-in-out;\n}\n.paraui-v3-switch .component-switch-handle::before {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: #8996AA;\n  border-radius: 9px;\n  box-shadow: none;\n  transition: all 0.2s ease-in-out;\n  content: \"\";\n}\n.paraui-v3-switch.component-switch-checked .component-switch-handle {\n  left: calc(100% - 18px);\n}\n.paraui-v3-switch.component-switch-checked .component-switch-handle::before {\n  background-color: rgb(54, 102, 214);\n}\n.paraui-v3-switch:not(.paraui-v3-switch-disabled):active .component-switch-handle::before {\n  right: -30%;\n  left: 0;\n}\n.paraui-v3-switch:not(.paraui-v3-switch-disabled):active.component-switch-checked .component-switch-handle::before {\n  right: 0;\n  left: -30%;\n}\n.paraui-v3-switch .component-switch-loading-icon {\n  position: relative;\n  top: 1px;\n  color: rgb(54, 102, 214);\n  vertical-align: top;\n  animation: switchLoadingCircle 1s infinite linear;\n}\n.paraui-v3-switch.component-switch-checked .component-switch-loading-icon {\n  color: rgb(255, 255, 255);\n}\n.paraui-v3-switch-small {\n  min-width: 28px;\n  height: 14px;\n  line-height: 14px;\n}\n.paraui-v3-switch-small .component-switch-inner {\n  margin: 0 5px 0 18px;\n  font-size: 14px;\n}\n.paraui-v3-switch-small .component-switch-handle {\n  width: 12px;\n  height: 12px;\n  top: 3px;\n  left: 2px;\n}\n.paraui-v3-switch-small .component-switch-loading-icon {\n  top: 1.5px;\n  font-size: 9px;\n}\n.paraui-v3-switch-small.component-switch-checked .component-switch-inner {\n  margin: 0 18px 0 5px;\n}\n.paraui-v3-switch-small.component-switch-checked .component-switch-handle {\n  left: calc(100% - 12px - 2px);\n}\n@keyframes switchLoadingCircle {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.paraui-v3-switch-label {\n  display: inline-flex;\n}\n.paraui-v3-switch-label .component-switch-text {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 14px;\n  font-weight: 400;\n}\n.paraui-v3-switch-label-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n.paraui-v3-switch-label-top .component-switch-text {\n  margin-bottom: 8px;\n}\n.paraui-v3-switch-label-bottom {\n  flex-direction: column;\n  align-items: flex-start;\n}\n.paraui-v3-switch-label-bottom .component-switch-text {\n  margin-top: 8px;\n  margin-bottom: 0;\n}\n.paraui-v3-switch-label-start {\n  flex-direction: row-reverse;\n  align-items: center;\n}\n.paraui-v3-switch-label-start .component-switch-text {\n  margin-right: 8px;\n  margin-bottom: 0;\n}\n.paraui-v3-switch-label-end {\n  flex-direction: row;\n  align-items: center;\n}\n.paraui-v3-switch-label-end .component-switch-text {\n  margin-left: 8px;\n  margin-bottom: 0;\n}";
 styleInject(css_248z);
 
 var Switch = function Switch(props) {
@@ -29,19 +31,15 @@ var Switch = function Switch(props) {
       restProps = __rest(props, ["compact", "size", "loading", "disabled", "className", "label", "labelTooltip", "labelPlacement"]); //cls
 
 
-  var classes = clsx('paraui-switch', {
-    // 'paraui-switch-small': size === 'small',
-    'paraui-switch-loading': loading // 'paraui-switch-compact': compact
+  var classes = clsx("".concat($prefixCls, "-switch"), _defineProperty({}, "".concat($prefixCls, "-switch-loading"), loading), className); //label cls
 
-  }, className); //label cls
-
-  var labelClasses = clsx('paraui-switch-label', "paraui-switch-label-".concat(labelPlacement)); //loading circle
+  var labelClasses = clsx("".concat($prefixCls, "-switch-label"), "".concat($prefixCls, "-switch-label-").concat(labelPlacement)); //loading circle
 
   var loadingIcon = jsx("div", Object.assign({
-    className: 'paraui-switch-handle'
+    className: "".concat($rcPrefixCls, "-switch-handle")
   }, {
     children: loading && jsx(LoadingOutlined, {
-      className: 'paraui-switch-loading-icon'
+      className: "".concat($rcPrefixCls, "-switch-loading-icon")
     })
   }));
 
@@ -50,20 +48,20 @@ var Switch = function Switch(props) {
       className: labelClasses
     }, {
       children: [jsx(RcSwitch, Object.assign({}, restProps, {
-        prefixCls: 'paraui-switch',
+        prefixCls: "".concat($rcPrefixCls, "-switch"),
         className: classes,
         disabled: disabled || loading,
         loadingIcon: loadingIcon
       })), jsx(Label, Object.assign({
         label: label
       }, labelTooltip, {
-        className: 'paraui-switch-text'
+        className: "".concat($rcPrefixCls, "-switch-text")
       }))]
     }));
   }
 
   return jsx(RcSwitch, Object.assign({}, restProps, {
-    prefixCls: 'paraui-switch',
+    prefixCls: "".concat($rcPrefixCls, "-switch"),
     className: classes,
     disabled: disabled || loading,
     loadingIcon: loadingIcon