shineout 3.5.2 → 3.5.3-beta.2

package/dist/shineout.js

@@ -7051,6 +7051,29 @@ var AlertIcon = function AlertIcon(props) {
 };
 var AlertIconMap = alert_icon_icons;
 /* harmony default export */ var alert_icon = (AlertIcon);
+;// CONCATENATED MODULE: ../hooks/src/utils/warning.ts
+var deprecated = function deprecated(prop, newProp, component, extraMessage) {
+  if (false) {}
+};
+var breakingChange = function breakingChange(message) {
+  if (false) {}
+};
+var devWarn = function devWarn(message) {
+  if (false) {}
+};
+var conflictWarning = function conflictWarning(component, prop1, prop2) {
+  if (false) {}
+};
+var error = function error(message) {
+  console.error(new Error("[shineout] ".concat(message)));
+};
+var devUseWarning = {
+  error: error,
+  deprecated: deprecated,
+  warn: devWarn,
+  breaking: breakingChange,
+  conflict: conflictWarning
+};
 ;// CONCATENATED MODULE: ../base/src/alert/alert.tsx
 
 
@@ -7063,6 +7086,8 @@ var _excluded = ["jssStyle", "type", "className", "children", "icon", "title", "
 
 
 
+
+var alert_devUseWarning = devUseWarning;
 var HIDE = 0;
 var SHOW = 1;
 var PENDING = 2;
@@ -7082,6 +7107,9 @@ var Alert = function Alert(props) {
     closeItem = props.closeItem,
     onClose = props.onClose,
     rest = objectWithoutProperties_default()(props, _excluded);
+  if (props.hideClose) {
+    alert_devUseWarning.deprecated('hideClose', 'closable', 'Alert');
+  }
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(SHOW),
     _useState2 = slicedToArray_default()(_useState, 2),
     dismiss = _useState2[0],
@@ -7094,7 +7122,7 @@ var Alert = function Alert(props) {
   };
   var type = getType();
   var alertStyle = (jssStyle === null || jssStyle === void 0 || (_jssStyle$alert = jssStyle.alert) === null || _jssStyle$alert === void 0 ? void 0 : _jssStyle$alert.call(jssStyle)) || {};
-  var rootClass = classnames_default()(className, alertStyle.alert, defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()({}, alertStyle[type], true), alertStyle.widthTitle, title), alertStyle.pending, dismiss === PENDING), alertStyle.noBordered, bordered === false));
+  var rootClass = classnames_default()(className, alertStyle.rootClass, alertStyle.alert, defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()({}, alertStyle[type], true), alertStyle.widthTitle, title), alertStyle.pending, dismiss === PENDING), alertStyle.noBordered, bordered === false));
   var getRootProps = function getRootProps() {
     return rest;
   };
@@ -12002,7 +12030,7 @@ var handleStyle = function handleStyle(style) {
 };
 /* harmony default export */ var jss_style_handleStyle = (handleStyle);
 ;// CONCATENATED MODULE: ../shineout-style/src/version.ts
-/* harmony default export */ var version = ('3.5.2');
+/* harmony default export */ var version = ('3.5.3-beta.2');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -12054,9 +12082,15 @@ var styled = function styled(style, ns) {
     var classes = hoc();
     return Object.keys(classes).reduce(function (acc, key) {
       var k = key;
-      var oldClass = classes[k];
-      var constClass = "".concat(jss_style_prefix, "-").concat(ns, "-").concat(camelToDash(k));
-      var value = constClass === oldClass ? oldClass : "".concat(oldClass, " ").concat(constClass);
+      var value = '';
+      // 给每个组件的root类名添加命名空间
+      if (k === 'rootClass') {
+        value = "".concat(jss_style_prefix, "-").concat(camelToDash(ns)).concat(value);
+      } else {
+        var oldClass = classes[k];
+        var constClass = "".concat(jss_style_prefix, "-").concat(ns, "-").concat(camelToDash(k));
+        value = constClass === oldClass ? oldClass : "".concat(oldClass, " ").concat(constClass);
+      }
       acc[k] = value;
       return acc;
     }, {});
@@ -15135,6 +15169,7 @@ var ComponentTokenMap = objectSpread2_default()(objectSpread2_default()(objectSp
 ;// CONCATENATED MODULE: ../shineout-style/src/alert/alert.ts
 
 var alertStyle = {
+  rootClass: {},
   alert: {
     display: 'flex',
     width: '100%',
@@ -15392,6 +15427,7 @@ var useAvatarStyle = styled(avatar_avatar, 'avatar');
 ;// CONCATENATED MODULE: ../shineout-style/src/badge/badge.ts
 
 var badgeStyle = {
+  rootClass: {},
   badge: {
     boxSizing: 'border-box',
     width: 'fit-content',
@@ -15532,6 +15568,7 @@ var useBadgeStyle = styled(badge_badge, 'badge');
 ;// CONCATENATED MODULE: ../shineout-style/src/breadcrumb/breadcrumb.ts
 
 var breadcrumbStyle = {
+  rootClass: {},
   wrapper: {
     lineHeight: src.lineHeightDynamic,
     fontSize: src.breadcrumbFontSize,
@@ -15818,6 +15855,7 @@ var textBeforeLine = function textBeforeLine() {
 // };
 
 var ButtonStyle = {
+  rootClass: {},
   button: {
     outline: 'none',
     fontWeight: src.buttonFontWeight,
@@ -16122,6 +16160,7 @@ var headerCommon = {
   minWidth: 0
 };
 var cardStyle = {
+  rootClass: {},
   wrapper: {
     display: 'flex',
     flexDirection: 'column',
@@ -16277,6 +16316,7 @@ var useCardStyle = styled(card_card, 'card');
 var cardGroupPadding = 0;
 var cardGroupItemBorderRadius = 8;
 var cardGroupStyle = {
+  rootClass: {},
   wrapper: {
     display: 'block'
   },
@@ -16402,7 +16442,9 @@ var animations = {
     }
   }
 };
-var carouselStyle = objectSpread2_default()(objectSpread2_default()({}, animations), {}, {
+var carouselStyle = objectSpread2_default()(objectSpread2_default()({
+  rootClass: {}
+}, animations), {}, {
   wrapper: {
     position: 'relative',
     zIndex: 0
@@ -16806,6 +16848,7 @@ var wrapper = inputBorder.wrapper,
   wrapperDisabled = inputBorder.wrapperDisabled,
   resetWrapper = objectWithoutProperties_default()(inputBorder, ["wrapper", "wrapperDisabled"]);
 var cascaderStyle = objectSpread2_default()(objectSpread2_default()({
+  rootClass: {},
   wrapperEmpty: {},
   wrapper: objectSpread2_default()(objectSpread2_default()({
     display: 'inline-block',
@@ -17293,6 +17336,7 @@ var useCascaderStyle = styled(cascader_cascader, 'cascader');
 ;// CONCATENATED MODULE: ../shineout-style/src/checkbox/checkbox.ts
 
 var checkboxStyle = {
+  rootClass: {},
   wrapper: {
     display: 'inline-flex',
     position: 'relative',
@@ -17440,6 +17484,7 @@ var useCheckboxStyle = styled(src_checkbox_checkbox, 'checkbox');
 ;// CONCATENATED MODULE: ../shineout-style/src/collapse/collapse.ts
 
 var collapseStyle = {
+  rootClass: {},
   wrapper: {
     overflow: 'hidden',
     borderRadius: src.collapseWrapperBorderRadius,
@@ -17454,6 +17499,7 @@ var collapseStyle = {
 ;// CONCATENATED MODULE: ../shineout-style/src/collapse/collapse-item.ts
 
 var collapseItemStyle = {
+  rootClass: {},
   wrapper: {
     boxSizing: 'border-box',
     borderBottom: "".concat(src.collapseWrapperBorderSize, " solid ").concat(src.collapseHeaderBorderColor),
@@ -17641,6 +17687,7 @@ var date_picker_wrapper = date_picker_inputBorder.wrapper,
   date_picker_wrapperDisabled = date_picker_inputBorder.wrapperDisabled,
   date_picker_resetWrapper = objectWithoutProperties_default()(date_picker_inputBorder, ["wrapper", "wrapperDisabled"]);
 var datePickerStyle = objectSpread2_default()(objectSpread2_default()({
+  rootClass: {},
   wrapper: objectSpread2_default()({
     display: 'inline-block',
     position: 'relative',
@@ -18299,6 +18346,7 @@ var useDatePickerStyle = styled(date_picker_date_picker, 'datePicker');
 ;// CONCATENATED MODULE: ../shineout-style/src/descriptions/descriptions.ts
 
 var descriptionsStyle = {
+  rootClass: {},
   wrapper: {
     display: 'block'
   },
@@ -18473,6 +18521,7 @@ var useDescriptionsStyle = styled(descriptions_descriptions, 'descriptions');
 ;// CONCATENATED MODULE: ../shineout-style/src/divider/divider.ts
 
 var dividerStyle = {
+  rootClass: {},
   wrapper: {
     margin: 0,
     padding: 0,
@@ -18564,6 +18613,7 @@ var useDividerStyle = styled(divider_divider, 'divider');
 ;// CONCATENATED MODULE: ../shineout-style/src/dropdown/dropdown.ts
 
 var dropdown_dropdown = {
+  rootClass: {},
   wrapper: {
     display: 'inline-block',
     position: 'relative',
@@ -18806,6 +18856,7 @@ var editable_area_wrapper = editable_area_inputBorder.wrapper,
   _noFocus = editable_area_inputBorder.wrapperFocus,
   editable_area_resetWrapper = objectWithoutProperties_default()(editable_area_inputBorder, ["wrapper", "wrapperNoBorder", "wrapperFocus"]);
 var editableAreaStyle = objectSpread2_default()(objectSpread2_default()({
+  rootClass: {},
   wrapper: objectSpread2_default()(objectSpread2_default()({
     display: 'block',
     position: 'relative'
@@ -18870,6 +18921,7 @@ var useEditableAreaStyle = styled(editable_area_editable_area, 'editableArea');
 ;// CONCATENATED MODULE: ../shineout-style/src/empty/empty.ts
 
 var emptyStyle = {
+  rootClass: {},
   empty: {
     width: '100%',
     boxSizing: 'border-box'
@@ -18905,6 +18957,7 @@ var useEmptyStyle = styled(empty_empty, 'empty');
 ;// CONCATENATED MODULE: ../shineout-style/src/form/form-item.ts
 
 var formItemStyle = {
+  rootClass: {},
   wrapper: {
     display: 'flex',
     alignItems: 'flex-start',
@@ -19027,6 +19080,7 @@ var formItemStyle = {
 ;// CONCATENATED MODULE: ../shineout-style/src/form/form.ts
 
 var form_form_form = {
+  rootClass: {},
   wrapper: {
     // display: 'block',
   },
@@ -19050,6 +19104,7 @@ var useFormItemStyle = styled(form_item, 'form-item');
 /* harmony default export */ var shineout_style_src_form = ((/* unused pure expression or super */ null && (useFormStyle)));
 ;// CONCATENATED MODULE: ../shineout-style/src/gap/gap.ts
 var gapStyle = {
+  rootClass: {},
   item: {},
   wrapper: {}
 };
@@ -19063,6 +19118,7 @@ var useGapStyle = styled(gap, 'gap');
 ;// CONCATENATED MODULE: ../shineout-style/src/icon/icon.ts
 
 var icon_form = {
+  rootClass: {},
   wrapper: {
     display: 'inline-block',
     fontSize: 'inherit',
@@ -19164,7 +19220,9 @@ var animation = {
     }
   }
 };
-var ImageStyle = objectSpread2_default()(objectSpread2_default()({}, animation), {}, {
+var ImageStyle = objectSpread2_default()(objectSpread2_default()({
+  rootClass: {}
+}, animation), {}, {
   // image
   href: {
     outline: 'none',
@@ -19555,7 +19613,9 @@ var inner_title_animation = {
     }
   }
 };
-var innerTitle = objectSpread2_default()(objectSpread2_default()({}, inner_title_animation), {}, {
+var innerTitle = objectSpread2_default()(objectSpread2_default()({
+  rootClass: {}
+}, inner_title_animation), {}, {
   wrapper: {
     width: '100%',
     boxSizing: 'border-box',
@@ -19739,6 +19799,7 @@ var groupSpace = function groupSpace(gap) {
   };
 };
 var input_input = objectSpread2_default()(objectSpread2_default()(objectSpread2_default()({
+  rootClass: {},
   wrapper: objectSpread2_default()({
     display: 'inline-flex',
     width: '100%',
@@ -19942,7 +20003,10 @@ var useInputStyle = styled(src_input_input, 'input');
 ;// CONCATENATED MODULE: ../shineout-style/src/link/link.ts
 
 var linkStyle = {
+  rootClass: {},
   wrapper: {
+    display: 'inline-flex',
+    alignItems: 'center',
     fontSize: src.linkDefaultFontSize
   },
   sizeSmall: {
@@ -20031,12 +20095,12 @@ var linkStyle = {
     }
   },
   icon: {
-    display: 'inline-block',
-    width: '1em',
-    verticalAlign: 'middle',
-    marginRight: 6,
+    marginRight: 4,
     '& > svg': {
-      fill: 'currentcolor'
+      fill: 'currentcolor',
+      width: '1em',
+      height: '1em',
+      verticalAlign: '-2px'
     }
   }
 };
@@ -20050,6 +20114,7 @@ var useLinkStyle = styled(src_link_link, 'link');
 ;// CONCATENATED MODULE: ../shineout-style/src/list/list.ts
 
 var listStyle = {
+  rootClass: {},
   wrapper: {
     position: 'relative',
     boxSizing: 'border-box',
@@ -20183,6 +20248,7 @@ var animationDuration = '.25s';
 var collapseWidth = src.menuCollapseWidth;
 var transitionFunc = 'ease-out';
 var menuStyle = {
+  rootClass: {},
   wrapper: {
     width: '100%',
     backgroundColor: src.menuItemBackgroundColor,
@@ -20707,6 +20773,7 @@ var menuStyle = {
 var _wrapperDark;
 
 var menuSearchStyle = {
+  rootClass: {},
   wrapper: defineProperty_default()({}, getTokenName('inputBorderRadius'), src.menuSearchBorderRadius),
   wrapperDark: (_wrapperDark = {}, defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(_wrapperDark, getTokenName('inputClearColor'), src.menuSearchDarkClearColor), getTokenName('inputHoverClearColor'), src.menuSearchDarkHoverClearColor), getTokenName('inputBorderColor'), src.menuSearchDarkBackgroundColor), getTokenName('inputBackgroundColor'), src.menuSearchDarkBackgroundColor), getTokenName('inputFontColor'), src.menuSearchDarkFontColor), getTokenName('inputPlaceholderFontColor'), src.menuSearchDarkPlaceholderFontColor), getTokenName('inputHoverBorderColor'), src.menuSearchDarkHoverBorderColor), getTokenName('inputHoverBackgroundColor'), src.menuSearchDarkHoverBackgroundColor), getTokenName('inputFocusBorderColor'), src.menuSearchDarkFocusBorderColor), getTokenName('inputFocusBackgroundColor'), src.menuSearchDarkFocusBackgroundColor), defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(_wrapperDark, getTokenName('inputFocusShadow'), src.menuSearchDarkFocusShadow), getTokenName('inputDisabledBorderColor'), src.menuSearchDarkBackgroundColor), getTokenName('inputDisabledBackgroundColor'), src.menuSearchDarkBackgroundColor), getTokenName('inputDisabledFontColor'), src.menuSearchDarkFontColor), getTokenName('inputDisabledPlaceholderFontColor'), src.menuSearchDarkPlaceholderFontColor)),
   wrapperLight: defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()({}, getTokenName('inputBorderColor'), src.menuSearchBackgroundColor), getTokenName('inputBackgroundColor'), src.menuSearchBackgroundColor), getTokenName('inputHoverBorderColor'), src.menuSearchHoverBorderColor), getTokenName('inputHoverBackgroundColor'), src.menuSearchHoverBackgroundColor), getTokenName('inputDisabledBorderColor'), src.menuSearchDisabledBackgroundColor), getTokenName('inputDisabledBackgroundColor'), src.menuSearchDisabledBackgroundColor), getTokenName('inputClearColor'), src.menuSearchClearColor), getTokenName('inputHoverClearColor'), src.menuSearchHoverClearColor),
@@ -20811,7 +20878,9 @@ var message_animations = {
     }
   }
 };
-var messageStyle = objectSpread2_default()(objectSpread2_default()({}, message_animations), {}, {
+var messageStyle = objectSpread2_default()(objectSpread2_default()({
+  rootClass: {}
+}, message_animations), {}, {
   wrapper: {
     position: 'fixed',
     zIndex: 1060,
@@ -21034,7 +21103,9 @@ var hoverAfterStyles = {
   left: -4,
   borderRadius: '50%'
 };
-var modalStyle = objectSpread2_default()(objectSpread2_default()({}, animationStyle), {}, {
+var modalStyle = objectSpread2_default()(objectSpread2_default()({
+  rootClass: {}
+}, animationStyle), {}, {
   wrapper: {
     position: 'fixed',
     zIndex: modalIndex,
@@ -21487,6 +21558,7 @@ token_setter({
 ;// CONCATENATED MODULE: ../shineout-style/src/pagination/pagination.ts
 
 var PaginationStyle = {
+  rootClass: {},
   pagination: {
     display: 'flex',
     flexWrap: 'wrap',
@@ -21570,6 +21642,7 @@ var popover_cssvar = '--popover-arrow-gap';
 var hideArrowGap = "var(".concat(popover_cssvar, ", 10px)");
 var arrowMargin = '8px';
 var popoverStyle = {
+  rootClass: {},
   wrapper: {
     display: 'none',
     cursor: 'pointer',
@@ -21778,6 +21851,7 @@ var usePopoverStyle = styled(popover_popover, 'popover');
 ;// CONCATENATED MODULE: ../shineout-style/src/progress/progress.ts
 
 var progressStyle = {
+  rootClass: {},
   wrapper: {
     fontSize: src.progressFontSize,
     color: src.progressFontColor,
@@ -21977,6 +22051,7 @@ var useProgressStyle = styled(progress_progress, 'progress');
 ;// CONCATENATED MODULE: ../shineout-style/src/radio/radio.ts
 
 var radioStyle = {
+  rootClass: {},
   // '@keyframes so-checkinput-focus': {
   //   '0%': {
   //     boxShadow: `0 0 0 0 ${cssVars.primaryColorFade50}`,
@@ -22154,6 +22229,7 @@ var rate_animation = {
   }
 };
 var rateStyle = objectSpread2_default()(objectSpread2_default()({}, rate_animation), {}, {
+  rootClass: {},
   wrapper: {
     display: 'inline-block',
     '[data-soui-role="form-control"] >  &': {
@@ -22305,6 +22381,7 @@ var select_wrapper = select_inputBorder.wrapper,
   select_wrapperDisabled = select_inputBorder.wrapperDisabled,
   select_resetWrapper = objectWithoutProperties_default()(select_inputBorder, ["wrapper", "wrapperDisabled"]);
 var selectStyle = objectSpread2_default()(objectSpread2_default()({
+  rootClass: {},
   wrapper: objectSpread2_default()(objectSpread2_default()({
     display: 'inline-block',
     position: 'relative',
@@ -22839,6 +22916,7 @@ var useSelectStyle = styled(src_select_select, 'select');
 ;// CONCATENATED MODULE: ../shineout-style/src/slider/slider.ts
 
 var sliderStyle = {
+  rootClass: {},
   wrapper: {
     display: 'block',
     padding: "20px 10px",
@@ -23708,7 +23786,9 @@ var wave_loop = function loop() {
 
 
 
-var spinStyle = objectSpread2_default()(objectSpread2_default()({}, spin_animation), {}, {
+var spinStyle = objectSpread2_default()(objectSpread2_default()({
+  rootClass: {}
+}, spin_animation), {}, {
   default: spin_default(12),
   chasingDots: chasing_dots,
   cubeGrid: cube_grid,
@@ -23792,6 +23872,7 @@ var useSpinStyle = styled(spin_spin, 'spin');
 ;// CONCATENATED MODULE: ../shineout-style/src/steps/steps.ts
 
 var stepsStyle = {
+  rootClass: {},
   steps: {
     display: 'flex',
     '& $step:last-child ': {
@@ -24528,6 +24609,7 @@ var useStepsStyle = styled(steps_steps, 'steps');
 // import token from '@sheinx/theme';
 
 var stickyStyle = {
+  rootClass: {},
   wrapper: {
     display: 'block'
   }
@@ -24553,7 +24635,9 @@ var switch_animation = {
   }
 };
 var switch_transition = '.2s cubic-bezier(.34,.69,.1,1)';
-var switchStyle = objectSpread2_default()(objectSpread2_default()({}, switch_animation), {}, {
+var switchStyle = objectSpread2_default()(objectSpread2_default()({
+  rootClass: {}
+}, switch_animation), {}, {
   wrapper: {
     '[data-soui-role="form-control"] >  &': {
       margin: '5px 0'
@@ -24761,7 +24845,9 @@ var globalStyle = {
     }
   }
 };
-var tableStyle = objectSpread2_default()(objectSpread2_default()({}, globalStyle), {}, {
+var tableStyle = objectSpread2_default()(objectSpread2_default()({
+  rootClass: {}
+}, globalStyle), {}, {
   wrapper: {
     display: 'flex',
     flexDirection: 'column',
@@ -25306,6 +25392,7 @@ var getCardStyle = function getCardStyle() {
         '& $cardHr': {
           '&:after': {
             right: 0,
+            left: 'auto',
             width: '1px',
             height: '100%'
           }
@@ -25585,6 +25672,7 @@ var getHeaderStyle = function getHeaderStyle() {
   });
 };
 var tabsStyle = {
+  rootClass: {},
   tabs: {
     // 水平模式
     '&[data-soui-position^="top-"],&[data-soui-position^="bottom-"]': {
@@ -26203,6 +26291,7 @@ var tag_tag = function tag(type) {
   };
 };
 var TagStyle = {
+  rootClass: {},
   tag: {
     display: 'inline-flex',
     padding: "".concat(src.tagPaddingY, " ").concat(src.tagPaddingX),
@@ -26370,7 +26459,9 @@ var textarea_inputBorderToken = {
 var textarea_inputBorder = input_border('wrapper', textarea_inputBorderToken);
 var textarea_wrapper = textarea_inputBorder.wrapper,
   textarea_resetWrapper = objectWithoutProperties_default()(textarea_inputBorder, ["wrapper"]);
-var textarea_input = objectSpread2_default()(objectSpread2_default()(objectSpread2_default()({}, textarea_inputBorder), {}, {
+var textarea_input = objectSpread2_default()(objectSpread2_default()(objectSpread2_default()({
+  rootClass: {}
+}, textarea_inputBorder), {}, {
   wrapper: objectSpread2_default()({
     display: 'inline-flex',
     flexDirection: 'column',
@@ -26433,7 +26524,7 @@ var useTextareaStyle = styled(src_textarea_textarea, 'textarea');
 
 
 var arrowGap = 12;
-var tooltip_arrowMargin = '8px';
+var arrowHeight = 8;
 var tooltip_animation = {
   '@keyframes fadeIn': {
     '0%': {
@@ -26476,7 +26567,9 @@ var tooltip_animation = {
     }
   }
 };
-var tooltipStyle = objectSpread2_default()(objectSpread2_default()({}, tooltip_animation), {}, {
+var tooltipStyle = objectSpread2_default()(objectSpread2_default()({
+  rootClass: {}
+}, tooltip_animation), {}, {
   wrapper: {
     display: 'none',
     cursor: 'pointer',
@@ -26487,184 +26580,149 @@ var tooltipStyle = objectSpread2_default()(objectSpread2_default()({}, tooltip_a
     color: src.tooltipColor,
     wordWrap: 'break-word',
     pointerEvents: 'none',
+    '--tooltip-background-color': src.tooltipBackgroundColor,
     '&[data-soui-type^="light"]': {
       backgroundColor: src.tooltipLightBackgroundColor,
       color: src.tooltipLightColor,
       border: "1px solid ".concat(src.tooltipLightBorderColor),
-      boxSizing: 'border-box'
+      boxSizing: 'border-box',
+      '--tooltip-background-color': src.tooltipLightBackgroundColor,
+      '&[data-soui-position^="top"] $arrow': {
+        transform: 'translateY(calc(100% - 1px)) rotate(-180deg)'
+      },
+      '&[data-soui-position^="bottom"] $arrow': {
+        transform: 'translateY(calc(-100% + 1px)) rotate(0deg)'
+      }
     },
     '&[data-soui-type^="primary"]': {
       backgroundColor: src.tooltipPrimaryBackgroundColor,
-      color: src.tooltipPrimaryColor
+      color: src.tooltipPrimaryColor,
+      '--tooltip-background-color': src.tooltipPrimaryBackgroundColor
     },
     '&[data-soui-type^="success"]': {
       backgroundColor: src.tooltipSuccessBackgroundColor,
-      color: src.tooltipSuccessColor
+      color: src.tooltipSuccessColor,
+      '--tooltip-background-color': src.tooltipSuccessBackgroundColor
     },
     '&[data-soui-type^="warning"]': {
       backgroundColor: src.tooltipWarningBackgroundColor,
-      color: src.tooltipWarningColor
+      color: src.tooltipWarningColor,
+      '--tooltip-background-color': src.tooltipWarningBackgroundColor
     },
     '&[data-soui-type^="danger"]': {
       backgroundColor: src.tooltipDangerBackgroundColor,
-      color: src.tooltipDangerColor
-    },
-    // '&::before': {
-    '& $arrow': {
-      'z-index': 1,
-      position: 'absolute',
-      content: '" "',
-      display: 'block',
-      border: "inherit",
-      borderLeftColor: 'transparent',
-      width: '8.4px',
-      height: '8.4px',
-      boxSizing: 'content-box',
-      background: 'inherit',
-      borderBottomColor: 'transparent'
+      color: src.tooltipDangerColor,
+      '--tooltip-background-color': src.tooltipDangerBackgroundColor
     },
     '&[data-soui-position^="bottom"]': {
       marginTop: arrowGap - 2,
-      '&[dir=ltr] $arrow': {
-        transform: 'translate(0, -50%) rotate(-45deg)'
-      },
-      '&[dir=rtl] $arrow': {
-        transform: 'translate(0, -50%) rotate(45deg)'
-      },
-      '& $arrow::after': {
-        top: arrowGap * -1,
-        left: '0',
-        right: '0',
-        content: '" "',
-        display: 'block',
-        height: arrowGap,
-        position: 'absolute'
+      '& $arrow': {
+        transform: 'translateY(calc(-100% + 1px)) rotate(0deg)'
       }
     },
     '&[data-soui-position^="top"]': {
       marginTop: (arrowGap - 2) * -1,
-      '&[dir=ltr] $arrow': {
-        transform: 'translate(0, 50%) rotate(135deg)'
-      },
-      '&[dir=rtl] $arrow': {
-        transform: 'translate(0, 50%) rotate(-135deg)'
-      }
-      // '&::before': {
-      //   bottom: '0',
-      //   transform: 'translate(0, 50%) rotate(135deg)',
-      //   left: '0',
-      //   right: '0',
-      //   margin: 'auto',
-      // },
-      // '&[dir=ltr]::before': {
-      //   transform: 'translate(0, 50%) rotate(135deg)',
-      // },
-      // '&[dir=rtl]::before': {
-      //   transform: 'translate(0, 50%) rotate(-135deg)',
-      // },
-      // '&::after': {
-      //   bottom: arrowGap * -1,
-      //   left: '0',
-      //   right: '0',
-      //   content: '" "',
-      //   display: 'block',
-      //   height: arrowGap,
-      //   position: 'absolute',
-      // },
+      '& $arrow': {
+        transform: 'translateY(calc(100% + 1px)) rotate(-180deg)'
+      }
     },
     '&[data-soui-position^="left"]': {
-      marginLeft: (arrowGap - 2) * -1,
-      '&[dir=ltr] $arrow': {
-        transform: 'translate(50%, 0) rotate(45deg)'
+      '&[dir=ltr]': {
+        marginLeft: -(arrowGap - 2),
+        '& $arrow': {
+          transform: 'translateX(11px) rotate(90deg)'
+        }
       },
-      '&[dir=rtl] $arrow': {
-        transform: 'translate(50%, 0) rotate(135deg)'
+      '&[dir=rtl]': {
+        marginRight: -(arrowGap - 2),
+        '& $arrow': {
+          left: 0,
+          transform: 'translateX(11px) rotate(90deg)'
+        }
       }
-
-      // '&[dir=ltr]': { marginLeft: (arrowGap - 2) * -1 },
-      // '&[dir=rtl]': { marginRight: (arrowGap - 2) * -1 },
-      // '&::before': {
-      //   right: 0,
-      //   top: '0',
-      //   bottom: '0',
-      //   margin: 'auto',
-      // },
-      // '&[dir=ltr]::before': {
-      //   transform: 'translate(50%, 0) rotate(45deg)',
-      // },
-      // '&[dir=rtl]::before': {
-      //   transform: 'translate(50%, 0) rotate(135deg)',
-      // },
-      // '&::after': {
-      //   left: arrowGap * -1,
-      //   top: '0',
-      //   bottom: '0',
-      //   content: '" "',
-      //   display: 'block',
-      //   width: arrowGap,
-      //   position: 'absolute',
-      // },
     },
     '&[data-soui-position^="right"]': {
-      marginLeft: arrowGap - 2,
-      '&[dir=ltr] $arrow': {
-        transform: 'translate(-50%, 0) rotate(-135deg)'
+      '&[dir=ltr]': {
+        marginLeft: arrowGap - 2,
+        '& $arrow': {
+          transform: 'translateX(-11px) rotate(-90deg)'
+        }
       },
-      '&[dir=rtl] $arrow': {
-        transform: 'translate(-50%, 0) rotate(-45deg)'
+      '&[dir=rtl]': {
+        marginRight: arrowGap - 2,
+        '& $arrow': {
+          left: 0,
+          transform: 'translateX(-11px) rotate(-90deg)'
+        }
       }
-
-      // '&[dir=ltr]': { marginLeft: arrowGap - 2 },
-      // '&[dir=rtl]': { marginRight: arrowGap - 2 },
-      // '&::before': {
-      //   left: '0',
-      //   top: '0',
-      //   bottom: '0',
-      //   margin: 'auto',
-      // },
-      // '&[dir=ltr]::before': {
-      //   transform: 'translate(-50%, 0) rotate(-135deg)',
-      // },
-      // '&[dir=rtl]::before': {
-      //   transform: 'translate(-50%, 0) rotate(-45deg)',
-      // },
-      // '&::after': {
-      //   left: arrowGap * -1,
-      //   top: '0',
-      //   bottom: '0',
-      //   content: '" "',
-      //   display: 'block',
-      //   width: arrowGap,
-      //   position: 'absolute',
-      // },
     }
-    // '&&[data-soui-position$="-left"]::before': { left: arrowMargin, right: 'auto' },
-    // '&&[data-soui-position$="-right"]::before': { right: arrowMargin, left: 'auto' },
-    // '&&[data-soui-position$="-top"]::before': { top: arrowMargin, bottom: 'auto' },
-    // '&&[data-soui-position$="-bottom"]::before': { bottom: arrowMargin, top: 'auto' },
   },
   wrapperOpen: {
     display: 'block',
+    '&::after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute'
+    },
     '&[data-soui-position^="bottom"]': {
-      animation: '$fadeIn .3s ease, $moveBottom .3s cubic-bezier(.71,1.7,.77,1.24);'
+      animation: '$fadeIn .3s ease, $moveBottom .3s cubic-bezier(.71,1.7,.77,1.24);',
+      '&::after': {
+        width: '100%',
+        height: arrowGap,
+        top: 0,
+        transform: 'translateY(-100%)'
+      }
     },
     '&[data-soui-position^="top"]': {
-      animation: '$fadeIn .3s ease, $moveTop .3s cubic-bezier(.71,1.7,.77,1.24);'
+      animation: '$fadeIn .3s ease, $moveTop .3s cubic-bezier(.71,1.7,.77,1.24);',
+      '&::after': {
+        width: '100%',
+        height: arrowGap,
+        bottom: 0,
+        transform: 'translateY(100%)'
+      }
     },
     '&[data-soui-position^="left"]': {
-      animation: '$fadeIn .3s ease, $moveLeft .3s cubic-bezier(.71,1.7,.77,1.24);'
+      animation: '$fadeIn .3s ease, $moveLeft .3s cubic-bezier(.71,1.7,.77,1.24);',
+      '&::after': {
+        width: arrowGap,
+        height: '100%',
+        top: 0,
+        right: 0,
+        transform: 'translateX(100%)'
+      }
     },
     '&[data-soui-position^="right"]': {
-      animation: '$fadeIn .3s ease, $moveRight .3s cubic-bezier(.71,1.7,.77,1.24);'
+      animation: '$fadeIn .3s ease, $moveRight .3s cubic-bezier(.71,1.7,.77,1.24);',
+      '&::after': {
+        width: arrowGap,
+        height: '100%',
+        top: 0,
+        right: 0,
+        transform: 'translateX(-100%)'
+      }
     }
   },
   target: {
     display: 'inline-block'
   },
   arrow: {
-    // before
+    zIndex: 1,
+    position: 'absolute',
+    overflow: 'hidden',
+    width: arrowHeight * 2,
+    height: arrowHeight,
+    pointerEvents: 'none',
+    transformOrigin: 'center center',
+    transform: 'translateY(calc(100% + 1px)) rotate(-180deg)',
     '&::before': {
-      content: "''"
+      display: 'block',
+      content: '""',
+      bottom: 0,
+      width: '100%',
+      height: '100%',
+      backgroundColor: 'var(--tooltip-background-color)',
+      clipPath: "path('M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z')"
     }
   },
   content: {
@@ -26682,6 +26740,7 @@ var useTooltipStyle = styled(tooltip_tooltip, 'tooltip');
 ;// CONCATENATED MODULE: ../shineout-style/src/transfer/transfer.ts
 
 var TransferStyle = {
+  rootClass: {},
   transfer: {
     display: 'flex',
     alignItems: 'stretch',
@@ -26909,6 +26968,7 @@ var useTransferStyle = styled(transfer_transfer, 'transfer');
 ;// CONCATENATED MODULE: ../shineout-style/src/tree/tree.ts
 
 var treeStyle = {
+  rootClass: {},
   tree: {},
   line: {
     '& $node': {
@@ -27216,6 +27276,7 @@ var tree_select_wrapper = tree_select_inputBorder.wrapper,
   tree_select_wrapperDisabled = tree_select_inputBorder.wrapperDisabled,
   tree_select_resetWrapper = objectWithoutProperties_default()(tree_select_inputBorder, ["wrapper", "wrapperDisabled"]);
 var treeSelectStyle = objectSpread2_default()(objectSpread2_default()({
+  rootClass: {},
   wrapper: objectSpread2_default()(objectSpread2_default()({
     display: 'inline-block',
     position: 'relative',
@@ -27693,6 +27754,7 @@ var useTreeSelectStyle = styled(tree_select_tree_select, 'treeSelect');
 ;// CONCATENATED MODULE: ../shineout-style/src/upload/upload.ts
 
 var uploadStyle = {
+  rootClass: {},
   wrapper: {
     display: 'block'
   },
@@ -29061,6 +29123,10 @@ function cssSupport(attr, value) {
 var parsePxToNumber = function parsePxToNumber(str) {
   return Number(str.replace(/\s+|px/gi, ''));
 };
+var getFieldId = function getFieldId(name, formName) {
+  if (!name) return undefined;
+  return "".concat(formName ? "".concat(formName, "_") : '').concat(name);
+};
 ;// CONCATENATED MODULE: ../hooks/src/common/use-position-style/get-position-style.ts
 
 var ReverseDir = {
@@ -30504,7 +30570,7 @@ var Popover = function Popover(props) {
     adjust: props.adjust,
     lazy: props.lazy,
     children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()(objectSpread2_default()({
-      className: classnames_default()(className, popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.wrapper, open && (popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.wrapperOpen), !showArrow && (popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.hideArrow)),
+      className: classnames_default()(className, popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.rootClass, popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.wrapper, open && (popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.wrapperOpen), !showArrow && (popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.hideArrow)),
       style: colorStyle
     }, getDataAttribute({
       position: position,
@@ -30646,7 +30712,7 @@ var Badge = function Badge(props) {
     text = props.text;
   var badgeStyle = (jssStyle === null || jssStyle === void 0 || (_jssStyle$badge = jssStyle.badge) === null || _jssStyle$badge === void 0 ? void 0 : _jssStyle$badge.call(jssStyle)) || {};
   var isTextBadge = text !== undefined || dot && children === undefined;
-  var rootClass = classnames_default()(className, badgeStyle.badge, isTextBadge && badgeStyle.textBadge);
+  var rootClass = classnames_default()(className, badgeStyle.rootClass, badgeStyle.badge, isTextBadge && badgeStyle.textBadge);
   var isOverflowCount = overflowCount !== undefined && Number(count) > overflowCount;
   var renderCount = function renderCount() {
     if (isOverflowCount) {
@@ -30736,6 +30802,7 @@ var toConsumableArray = __webpack_require__(6468);
 var toConsumableArray_default = /*#__PURE__*/__webpack_require__.n(toConsumableArray);
 ;// CONCATENATED MODULE: ../hooks/src/utils/render.ts
 
+
 var render_render = function render(r) {
   for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     args[_key - 1] = arguments[_key];
@@ -30753,7 +30820,7 @@ function $getKey(gen, d, index) {
 function getKey(gen, d, index, ignoreError) {
   var key = $getKey(gen, d, index);
   if (typeof key !== 'string' && typeof key !== 'number' && !ignoreError) {
-    console.error(new Error("keygen result expect a string or a number, get '".concat(typeof_default()(key), "'")));
+    devUseWarning.error("keygen result expect a string or a number, get '".concat(typeof_default()(key), "'"));
   }
   return key;
 }
@@ -31226,7 +31293,7 @@ var Breadcrumb = function Breadcrumb(props) {
       maxHeight: maxHeight
     });
   };
-  var className = classnames_default()(breadcrumbClasses === null || breadcrumbClasses === void 0 ? void 0 : breadcrumbClasses.wrapper, props.className);
+  var className = classnames_default()(breadcrumbClasses === null || breadcrumbClasses === void 0 ? void 0 : breadcrumbClasses.rootClass, breadcrumbClasses === null || breadcrumbClasses === void 0 ? void 0 : breadcrumbClasses.wrapper, props.className);
   var getRenderData = function getRenderData() {
     if (!props.max) return data;
     if (data.length <= props.max) return data;
@@ -31360,6 +31427,8 @@ var useButton = function useButton() {
 
 
 
+
+var button_group_devUseWarning = devUseWarning;
 var Group = function Group(props) {
   var _jssStyle$button;
   var children = props.children,
@@ -31373,8 +31442,11 @@ var Group = function Group(props) {
     shape = props.shape,
     type = props.type;
   var config = useConfig();
-  if (outline || text) {
-    console.warn('[Button / Button.Group] The properties outline, and text are being deprecated and you should use the mode property to specify the style of the button instead.');
+  if (outline) {
+    button_group_devUseWarning.deprecated('outline', 'mode="outline"', 'Button.Group');
+  }
+  if (text) {
+    button_group_devUseWarning.deprecated('text', 'mode="text"', 'Button.Group');
   }
   var modeSetted = mode || (text ? 'text' : outline ? 'outline' : undefined);
   var buttonStyle = (jssStyle === null || jssStyle === void 0 || (_jssStyle$button = jssStyle.button) === null || _jssStyle$button === void 0 ? void 0 : _jssStyle$button.call(jssStyle)) || {};
@@ -31384,6 +31456,7 @@ var Group = function Group(props) {
     className: groupClass,
     style: style,
     dir: config.direction,
+    id: props.id,
     children: external_root_React_commonjs2_react_commonjs_react_amd_react_.Children.toArray(children).map(function (child) {
       var Child = child;
       return /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.cloneElement)(Child, {
@@ -31398,11 +31471,12 @@ var Group = function Group(props) {
 };
 /* harmony default export */ var button_group = (Group);
 ;// CONCATENATED MODULE: ../hooks/src/utils/number.ts
+
 function range(end) {
   var start = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   var delta = end - start;
   if (typeof delta !== 'number' || Number.isNaN(delta)) {
-    console.error(new Error('end can not computed with start'));
+    devUseWarning.error('end can not computed with start');
   }
   return Array.from({
     length: end - start
@@ -31504,7 +31578,7 @@ var Spin = function Spin(props) {
     width: size,
     height: size
   }, props.style);
-  var classname = classnames_default()(className, styles === null || styles === void 0 ? void 0 : styles.spin, uniqueClassName);
+  var classname = classnames_default()(className, styles === null || styles === void 0 ? void 0 : styles.rootClass, styles === null || styles === void 0 ? void 0 : styles.spin, uniqueClassName);
   if (count < 1 || !render) {
     return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
       style: style,
@@ -31889,7 +31963,7 @@ var spin_Spin = function Spin() {
   var color = colorProps !== null && colorProps !== void 0 ? colorProps : getSpinColor();
   var mode = (_ref2 = modeProps !== null && modeProps !== void 0 ? modeProps : getSpinMode()) !== null && _ref2 !== void 0 ? _ref2 : 'vertical';
   var spinStyle = (jssStyle === null || jssStyle === void 0 || (_jssStyle$spin = jssStyle.spin) === null || _jssStyle$spin === void 0 ? void 0 : _jssStyle$spin.call(jssStyle)) || {};
-  var contentClass = classnames_default()(className, spinStyle.content, defineProperty_default()(defineProperty_default()({}, spinStyle.vertical, mode === 'vertical'), spinStyle.horizontal, mode === 'horizontal'));
+  var contentClass = classnames_default()(className, spinStyle.rootClass, spinStyle.content, defineProperty_default()(defineProperty_default()({}, spinStyle.vertical, mode === 'vertical'), spinStyle.horizontal, mode === 'horizontal'));
   var renderSpin = function renderSpin() {
     var n = name;
     if (spins[n]) {
@@ -31950,6 +32024,8 @@ var button_excluded = ["jssStyle", "className", "style", "children", "loading",
 
 
 
+
+var button_devUseWarning = devUseWarning;
 var Button = function Button(props) {
   var _jssStyle$button, _React$Children$map;
   var jssStyle = props.jssStyle,
@@ -31971,6 +32047,12 @@ var Button = function Button(props) {
     htmlTypeProp = _props$htmlType === void 0 ? 'button' : _props$htmlType,
     renderLoading = props.renderLoading,
     rest = objectWithoutProperties_default()(props, button_excluded);
+  if (outline) {
+    button_devUseWarning.deprecated('outline', 'mode="outline"', 'Button');
+  }
+  if (text) {
+    button_devUseWarning.deprecated('text', 'mode="text"', 'Button');
+  }
   var config = useConfig();
   var _useButton = use_button(objectSpread2_default()({
       loading: loading,
@@ -31993,7 +32075,7 @@ var Button = function Button(props) {
   var mode = getMode();
   var type = getType();
   var modeSetted = mode || (text ? 'text' : outline ? 'outline' : undefined);
-  var rootClass = classnames_default()(className, buttonStyle[type || 'default'], buttonStyle.button, !!disabled && buttonStyle.disabled, !!loading && buttonStyle.loading, modeSetted === 'text' && buttonStyle.text, modeSetted === 'dashed' && buttonStyle.dashed, modeSetted === 'outline' && buttonStyle.outline, shape === 'round' && buttonStyle.round, shape === 'circle' && buttonStyle.circle, shape === 'square' && buttonStyle.square, size === 'small' && buttonStyle.small, size === 'large' && buttonStyle.large);
+  var rootClass = classnames_default()(className, buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.rootClass, buttonStyle[type || 'default'], buttonStyle.button, !!disabled && buttonStyle.disabled, !!loading && buttonStyle.loading, modeSetted === 'text' && buttonStyle.text, modeSetted === 'dashed' && buttonStyle.dashed, modeSetted === 'outline' && buttonStyle.outline, shape === 'round' && buttonStyle.round, shape === 'circle' && buttonStyle.circle, shape === 'square' && buttonStyle.square, size === 'small' && buttonStyle.small, size === 'large' && buttonStyle.large);
   var rootProps = getButtonProps();
   var htmlType = rootProps.htmlType,
     onRef = rootProps.onRef,
@@ -32007,8 +32089,9 @@ var Button = function Button(props) {
     }
     return 12;
   };
-  var childrenEl = (_React$Children$map = external_root_React_commonjs2_react_commonjs_react_amd_react_default().Children.map(getSpaceChildren(children, space), function (item) {
-    if (loading && /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.isValidElement)(item) && item.type.isShineoutIcon) return null;
+  var childrenEl = (_React$Children$map = external_root_React_commonjs2_react_commonjs_react_amd_react_default().Children.map(getSpaceChildren(children, space), function (item, index) {
+    // 仅隐藏前置的icon
+    if (loading && index === 0 && /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.isValidElement)(item) && item.type.isShineoutIcon) return null;
     return item;
   })) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.filter(function (item) {
     return item !== null;
@@ -32460,7 +32543,7 @@ var Card = function Card(props) {
     wrapStyle.transform = "translate(".concat(moveInfo.pos.x, "px, ").concat(moveInfo.pos.y, "px)");
   }
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-    className: classnames_default()(props.className, cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapper, props.shadow === 'hover' && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperHover), alwaysShowShadow && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperShadow), collapsible && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperCollapsible), realCollapsed && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperCollapsed), props.resizable && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperResizable), props.moveable && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperMoveable), props.split && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperSplit), inAccordion && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperInAccordion)),
+    className: classnames_default()(props.className, cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.rootClass, cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapper, props.shadow === 'hover' && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperHover), alwaysShowShadow && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperShadow), collapsible && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperCollapsible), realCollapsed && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperCollapsed), props.resizable && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperResizable), props.moveable && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperMoveable), props.split && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperSplit), inAccordion && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperInAccordion)),
     ref: panelRef,
     style: wrapStyle,
     children: [/*#__PURE__*/(0,jsx_runtime.jsx)(CardContext.Provider, {
@@ -32830,7 +32913,7 @@ var CardGroup = function CardGroup(props) {
     });
   };
   return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-    className: classnames_default()(props.className, classes === null || classes === void 0 ? void 0 : classes.wrapper),
+    className: classnames_default()(props.className, classes === null || classes === void 0 ? void 0 : classes.rootClass, classes === null || classes === void 0 ? void 0 : classes.wrapper),
     style: objectSpread2_default()({
       height: props.height
     }, props.style),
@@ -32953,7 +33036,10 @@ var winHeight = docSize.height;
 var getRect = function getRect(el) {
   // document or invalid element
   if (!el || !el.getBoundingClientRect) {
-    if (el) console.error("the ".concat(el, " is not a element"));
+    if (el) {
+      devUseWarning.error("the ".concat(el, " is not a element"));
+    }
+    ;
     return {
       top: 0,
       bottom: winHeight
@@ -33187,6 +33273,12 @@ var useCheck = function useCheck(props) {
   };
 };
 /* harmony default export */ var use_check = (useCheck);
+;// CONCATENATED MODULE: ../base/src/form/form-field-context.ts
+
+var FormFieldContext = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createContext({
+  fieldId: undefined,
+  separator: '__separator__'
+});
 ;// CONCATENATED MODULE: ../base/src/checkbox/simple-checkbox.tsx
 
 
@@ -33196,6 +33288,7 @@ var simple_checkbox_excluded = ["jssStyle", "className", "style", "children", "r
 
 
 
+
 var simple_checkbox_getDataAttribute = getDataAttribute;
 var Checkbox = function Checkbox(props) {
   var _jssStyle$checkbox;
@@ -33207,6 +33300,8 @@ var Checkbox = function Checkbox(props) {
     size = props.size,
     theme = props.theme,
     rest = objectWithoutProperties_default()(props, simple_checkbox_excluded);
+  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(FormFieldContext),
+    fieldId = _useContext.fieldId;
   var checkboxStyle = jssStyle === null || jssStyle === void 0 || (_jssStyle$checkbox = jssStyle.checkbox) === null || _jssStyle$checkbox === void 0 ? void 0 : _jssStyle$checkbox.call(jssStyle);
   var _useCheck = use_check(objectSpread2_default()(objectSpread2_default()({}, rest), {}, {
       checked: props.checked === 'indeterminate' ? true : props.checked,
@@ -33217,10 +33312,12 @@ var Checkbox = function Checkbox(props) {
     getInputProps = _useCheck.getInputProps,
     disabled = _useCheck.disabled,
     checked = _useCheck.checked;
-  var rootClass = classnames_default()(className, checkboxStyle === null || checkboxStyle === void 0 ? void 0 : checkboxStyle.wrapper, size === 'small' && (checkboxStyle === null || checkboxStyle === void 0 ? void 0 : checkboxStyle.wrapperSmall), size === 'large' && (checkboxStyle === null || checkboxStyle === void 0 ? void 0 : checkboxStyle.wrapperLarge), !!disabled && (checkboxStyle === null || checkboxStyle === void 0 ? void 0 : checkboxStyle.wrapperDisabled), !!checked && (checkboxStyle === null || checkboxStyle === void 0 ? void 0 : checkboxStyle.wrapperChecked), props.checked === 'indeterminate' && (checkboxStyle === null || checkboxStyle === void 0 ? void 0 : checkboxStyle.wrapperIndeterminate));
+  var rootClass = classnames_default()(className, checkboxStyle === null || checkboxStyle === void 0 ? void 0 : checkboxStyle.rootClass, checkboxStyle === null || checkboxStyle === void 0 ? void 0 : checkboxStyle.wrapper, size === 'small' && (checkboxStyle === null || checkboxStyle === void 0 ? void 0 : checkboxStyle.wrapperSmall), size === 'large' && (checkboxStyle === null || checkboxStyle === void 0 ? void 0 : checkboxStyle.wrapperLarge), !!disabled && (checkboxStyle === null || checkboxStyle === void 0 ? void 0 : checkboxStyle.wrapperDisabled), !!checked && (checkboxStyle === null || checkboxStyle === void 0 ? void 0 : checkboxStyle.wrapperChecked), props.checked === 'indeterminate' && (checkboxStyle === null || checkboxStyle === void 0 ? void 0 : checkboxStyle.wrapperIndeterminate));
   var indicatorClass = classnames_default()(checkboxStyle === null || checkboxStyle === void 0 ? void 0 : checkboxStyle.indicatorWrapper, theme === 'dark' && (checkboxStyle === null || checkboxStyle === void 0 ? void 0 : checkboxStyle.darkIndicatorWrapper));
   var inputProps = getInputProps();
-  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({}, getRootProps({
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({
+    id: fieldId
+  }, getRootProps({
     className: rootClass,
     style: style
   })), {}, {
@@ -33563,6 +33660,7 @@ var simple_input_excluded = ["jssStyle", "className", "style", "status", "clearI
 
 
 
+
 var Input = function Input(props) {
   var _jssStyle$input;
   var jssStyle = props.jssStyle,
@@ -33584,6 +33682,8 @@ var Input = function Input(props) {
     rest = objectWithoutProperties_default()(props, simple_input_excluded);
   var inputStyle = jssStyle === null || jssStyle === void 0 || (_jssStyle$input = jssStyle.input) === null || _jssStyle$input === void 0 ? void 0 : _jssStyle$input.call(jssStyle);
   var config = useConfig();
+  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(FormFieldContext),
+    fieldId = _useContext.fieldId;
   var _useInput = use_input(objectSpread2_default()(objectSpread2_default()({}, rest), {}, {
       onFocusedChange: onFocusedChange
     })),
@@ -33593,7 +33693,7 @@ var Input = function Input(props) {
     showClear = _useInput.showClear,
     focused = _useInput.focused,
     disabled = _useInput.disabled;
-  var rootClass = classnames_default()(className, inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapper, !!focused && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperFocus), !!disabled && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperDisabled), status === 'error' && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperError), size === 'small' && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperSmall), size === 'large' && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperLarge), !!underline && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperUnderline), !border && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperNoBorder), hasSuffix && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.password));
+  var rootClass = classnames_default()(className, inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.rootClass, inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapper, !!focused && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperFocus), !!disabled && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperDisabled), status === 'error' && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperError), size === 'small' && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperSmall), size === 'large' && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperLarge), !!underline && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperUnderline), !border && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperNoBorder), hasSuffix && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.password));
   var keyHandler = useKeyEvent({
     onEnterPress: function onEnterPress(e) {
       _onEnterPress === null || _onEnterPress === void 0 || _onEnterPress(e.target.value || '', e);
@@ -33614,7 +33714,9 @@ var Input = function Input(props) {
   if (typeof renderInput === 'function') {
     inputEl = renderInput(inputEl);
   }
-  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()(objectSpread2_default()({}, getDataAttribute(defineProperty_default()({}, 'input-border', 'true'))), getRootProps({
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()(objectSpread2_default()({
+    id: fieldId
+  }, getDataAttribute(defineProperty_default()({}, 'input-border', 'true'))), getRootProps({
     className: rootClass,
     style: style
   })), {}, {
@@ -34425,10 +34527,14 @@ var useWithFormConfig = function useWithFormConfig(props) {
   var size = (props === null || props === void 0 ? void 0 : props.size) || formConfig.size;
   var disabled = formConfig.disabled || (props === null || props === void 0 ? void 0 : props.disabled);
   var reserveAble = (_reserveAble = props === null || props === void 0 ? void 0 : props.reserveAble) !== null && _reserveAble !== void 0 ? _reserveAble : formConfig.reserveAble;
-  return objectSpread2_default()(objectSpread2_default()({}, props), {}, {
-    size: size,
-    disabled: disabled,
+  return objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()({}, props), size !== undefined && {
+    size: size
+  }), disabled !== undefined && {
+    disabled: disabled
+  }), reserveAble !== undefined && {
     reserveAble: reserveAble
+  }), formConfig.formName !== undefined && {
+    formName: formConfig.formName
   });
 };
 /* harmony default export */ var use_with_form_config = (useWithFormConfig);
@@ -34596,7 +34702,10 @@ var input_Input = function Input(props) {
     digits: commonProps.digits,
     integerLimit: commonProps.integerLimit,
     numType: commonProps.numType,
-    trim: (_ref = (_commonProps$trim = commonProps.trim) !== null && _commonProps$trim !== void 0 ? _commonProps$trim : config.trim) !== null && _ref !== void 0 ? _ref : false
+    trim: (_ref = (_commonProps$trim = commonProps.trim) !== null && _commonProps$trim !== void 0 ? _commonProps$trim : config.trim) !== null && _ref !== void 0 ? _ref : false,
+    // 移除 reserveAble 和 formName，避免渲染到原生 input 上
+    reserveAble: undefined,
+    formName: undefined
   };
   var inputFormatProps = use_input_format(objectSpread2_default()({
     value: commonProps.value,
@@ -34629,6 +34738,8 @@ var checkbox_excluded = ["children", "htmlValue", "onChange", "jssStyle", "value
 
 
 
+
+var checkbox_devUseWarning = devUseWarning;
 var checkbox_Checkbox = function Checkbox(props) {
   var _jssStyle$checkbox;
   var children = props.children,
@@ -34640,6 +34751,9 @@ var checkbox_Checkbox = function Checkbox(props) {
     defaultValuePo = props.defaultValue,
     inputable = props.inputable,
     rest = objectWithoutProperties_default()(props, checkbox_excluded);
+  if (props.inputable) {
+    checkbox_devUseWarning.deprecated('inputable', 'Checkbox + Input', 'Checkbox');
+  }
   var checkboxStyle = jssStyle === null || jssStyle === void 0 || (_jssStyle$checkbox = jssStyle.checkbox) === null || _jssStyle$checkbox === void 0 ? void 0 : _jssStyle$checkbox.call(jssStyle);
   var disabled = props.disabled;
   if (htmlValue !== undefined && typeof disabled === 'function') {
@@ -34930,7 +35044,7 @@ var Carousel = function Carousel(props) {
     pre = _useCarousel.pre,
     direction = _useCarousel.direction,
     func = _useCarousel.func;
-  var wrapperClasses = classnames_default()(carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.wrapper, props.className, animation === 'slide' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.animationSlide), animation === 'fade' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.animationFade), animation === 'slide-y' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.animationSlideY), direction === 'forward' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.directionForward), direction === 'backward' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.directionBackward), direction === 'stop' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.directionStop));
+  var wrapperClasses = classnames_default()(carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.rootClass, carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.wrapper, props.className, animation === 'slide' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.animationSlide), animation === 'fade' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.animationFade), animation === 'slide-y' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.animationSlideY), direction === 'forward' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.directionForward), direction === 'backward' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.directionBackward), direction === 'stop' && (carouselClasses === null || carouselClasses === void 0 ? void 0 : carouselClasses.directionStop));
   var renderItems = function renderItems() {
     var _props$style;
     return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
@@ -36576,6 +36690,7 @@ var useFilter = function useFilter(props) {
 
 
 
+
 function use_tree_toArray(value) {
   if (!value) return [];
   if (!Array.isArray(value)) return [value];
@@ -36792,7 +36907,7 @@ var useTree = function useTree(props) {
       var id = getKey(item, path[path.length - 1], i);
       // 重复 id 警告
       if (context.dataMap.get(id)) {
-        console.error("There is already a key \"".concat(id, "\" exists. The key must be unique."));
+        devUseWarning.error("There is already a key \"".concat(id, "\" exists. The key must be unique."));
         continue;
       }
       // 制作 data mapping
@@ -37604,6 +37719,8 @@ var CascaderNode = function CascaderNode(props) {
 
 
 
+
+var list_devUseWarning = devUseWarning;
 var CascaderList = function CascaderList(props) {
   var _jssStyle$cascader;
   var jssStyle = props.jssStyle,
@@ -37650,7 +37767,7 @@ var CascaderList = function CascaderList(props) {
       if (typeof key === 'string' || typeof key === 'number') {
         return key;
       }
-      console.error('key must be number or string but get', key);
+      list_devUseWarning.error("key must be number or string but get ".concat(key));
     }
     return parentId + (parentId ? ',' : '') + index;
   };
@@ -37892,6 +38009,7 @@ var FilterList = function FilterList(props) {
 
 
 
+
 var result_Input = function Input(props) {
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(props.value),
     _useState2 = slicedToArray_default()(_useState, 2),
@@ -37952,6 +38070,9 @@ var Result = function Result(props) {
     onClickProps = props.onClick;
   var _useConfig = useConfig(),
     locale = _useConfig.locale;
+  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(FormFieldContext),
+    fieldId = _useContext.fieldId,
+    separator = _useContext.separator;
   var styles = jssStyle === null || jssStyle === void 0 || (_jssStyle$datePicker = jssStyle.datePicker) === null || _jssStyle$datePicker === void 0 ? void 0 : _jssStyle$datePicker.call(jssStyle);
   var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
       inputRefs: [],
@@ -38005,8 +38126,10 @@ var Result = function Result(props) {
   var renderItem = function renderItem(info) {
     var dis = info.index === 1 ? disabledRight : disabledLeft;
     var className = classnames_default()(styles === null || styles === void 0 ? void 0 : styles.resultText, info.target && (styles === null || styles === void 0 ? void 0 : styles.placeholder), dis && (styles === null || styles === void 0 ? void 0 : styles.resultTextDisabled), info.index === activeIndex && (styles === null || styles === void 0 ? void 0 : styles.resultTextActive));
+    var formFieldId = (fieldId === null || fieldId === void 0 ? void 0 : fieldId.split(separator)) || [];
     return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
       className: className,
+      id: formFieldId[info.index],
       children: [/*#__PURE__*/(0,jsx_runtime.jsx)("span", {
         className: styles === null || styles === void 0 ? void 0 : styles.resultTextPadding,
         children: /*#__PURE__*/(0,jsx_runtime.jsx)(result_Input, {
@@ -38329,6 +38452,7 @@ var tag_excluded = ["jssStyle", "className", "type", "color", "size", "disabled"
 
 
 
+var tag_devUseWarning = devUseWarning;
 var tag_Done = 2;
 var tag_Pending = 1;
 var Tag = function Tag(props) {
@@ -38352,6 +38476,9 @@ var Tag = function Tag(props) {
     onEnterPress = props.onEnterPress,
     closable = props.closable,
     rest = objectWithoutProperties_default()(props, tag_excluded);
+  if (props.type) {
+    tag_devUseWarning.deprecated('type', 'color', 'Tag');
+  }
   var showClose = closable || onClose;
   var _useTag = use_tag({
       jssStyle: jssStyle,
@@ -38372,7 +38499,7 @@ var Tag = function Tag(props) {
   var modeSet = mode || 'bright';
   var colorSet = type || color || 'default';
   var tagStyle = (jssStyle === null || jssStyle === void 0 || (_jssStyle$tag = jssStyle.tag) === null || _jssStyle$tag === void 0 ? void 0 : _jssStyle$tag.call(jssStyle)) || {};
-  var tagClass = classnames_default()(className, tagStyle.tag, defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()({}, tagStyle.small, size === 'small'), tagStyle.large, size === 'large'), tagStyle.rounded, shape === 'rounded'), tagStyle[colorSet], true), tagStyle[modeSet], true), tagStyle.disabled, !!disabled));
+  var tagClass = classnames_default()(className, tagStyle.rootClass, tagStyle.tag, defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()({}, tagStyle.small, size === 'small'), tagStyle.large, size === 'large'), tagStyle.rounded, shape === 'rounded'), tagStyle[colorSet], true), tagStyle[modeSet], true), tagStyle.disabled, !!disabled));
   var getTagRootProps = function getTagRootProps() {
     var propsSet = rest;
     if (style || backgroundColor) {
@@ -39012,9 +39139,13 @@ var result_Result = function Result(props) {
 
 
 
+
+var cascader_devUseWarning = devUseWarning;
 var Cascader = function Cascader(props0) {
   var _jssStyle$cascader;
   var props = use_with_form_config(props0);
+  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(FormFieldContext),
+    fieldId = _useContext.fieldId;
   var defaultHeight = 250;
   var jssStyle = props.jssStyle,
     style = props.style,
@@ -39185,7 +39316,7 @@ var Cascader = function Cascader(props0) {
     return isEmpty;
   };
   var isEmpty = checkEmpty();
-  var rootClass = classnames_default()(className, isEmpty && styles.wrapperEmpty, styles === null || styles === void 0 ? void 0 : styles.wrapper, disabled === true && (styles === null || styles === void 0 ? void 0 : styles.wrapperDisabled), focused && disabled !== true && (styles === null || styles === void 0 ? void 0 : styles.wrapperFocus), innerTitle && (styles === null || styles === void 0 ? void 0 : styles.wrapperInnerTitle), virtual && styles.virtual, size === 'small' && (styles === null || styles === void 0 ? void 0 : styles.wrapperSmall), size === 'large' && (styles === null || styles === void 0 ? void 0 : styles.wrapperLarge), (!!props.error || props.status === 'error') && (styles === null || styles === void 0 ? void 0 : styles.wrapperError), clearable && (styles === null || styles === void 0 ? void 0 : styles.clearable), !border && (styles === null || styles === void 0 ? void 0 : styles.wrapperNoBorder), !!underline && (styles === null || styles === void 0 ? void 0 : styles.wrapperUnderline), defineProperty_default()({}, styles === null || styles === void 0 ? void 0 : styles.multiple, multiple));
+  var rootClass = classnames_default()(className, styles === null || styles === void 0 ? void 0 : styles.rootClass, styles === null || styles === void 0 ? void 0 : styles.wrapper, isEmpty && styles.wrapperEmpty, disabled === true && (styles === null || styles === void 0 ? void 0 : styles.wrapperDisabled), focused && disabled !== true && (styles === null || styles === void 0 ? void 0 : styles.wrapperFocus), innerTitle && (styles === null || styles === void 0 ? void 0 : styles.wrapperInnerTitle), virtual && styles.virtual, size === 'small' && (styles === null || styles === void 0 ? void 0 : styles.wrapperSmall), size === 'large' && (styles === null || styles === void 0 ? void 0 : styles.wrapperLarge), (!!props.error || props.status === 'error') && (styles === null || styles === void 0 ? void 0 : styles.wrapperError), clearable && (styles === null || styles === void 0 ? void 0 : styles.clearable), !border && (styles === null || styles === void 0 ? void 0 : styles.wrapperNoBorder), !!underline && (styles === null || styles === void 0 ? void 0 : styles.wrapperUnderline), defineProperty_default()({}, styles === null || styles === void 0 ? void 0 : styles.multiple, multiple));
   var getRenderItem = function getRenderItem(data, active, id) {
     return typeof renderItemProp === 'function' ? renderItemProp(data, active, id) : data[renderItemProp];
   };
@@ -39594,7 +39725,7 @@ var Cascader = function Cascader(props0) {
       }
     }
     if (mode !== undefined && loader && [0, 1, 2].includes(mode)) {
-      console.error(new Error("The mode ".concat(mode, " is not supported when loader setted. Only 3 or 4 can be set.")));
+      cascader_devUseWarning.error("The mode ".concat(mode, " is not supported when loader setted. Only 3 or 4 can be set."));
     }
   }, []);
   var shouldFullWidth = props.loading || isDataEmpty;
@@ -39611,6 +39742,7 @@ var Cascader = function Cascader(props0) {
     return false;
   };
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({
+    id: fieldId,
     tabIndex: disabled === true || showInput ? undefined : 0
   }, getDataAttribute(defineProperty_default()({}, 'input-border', 'true'))), {}, {
     className: rootClass,
@@ -39782,6 +39914,7 @@ var useFieldSetConsumer = function useFieldSetConsumer(props) {
 ;// CONCATENATED MODULE: ../hooks/src/utils/validate/type.ts
 
 
+
 /* eslint-disable */
 var regs = {
   get email() {
@@ -39857,7 +39990,7 @@ var regs = {
     }
     var reg = regs[type];
     if (!reg) {
-      console.error(new Error("Type '".concat(type, "' not existed.")));
+      devUseWarning.error("Type '".concat(type, "' not existed."));
       callback(new Error("Validate failured. Type '".concat(type, "' not existed.")));
     }
     if (typeof value === 'string' && reg.test(value)) {
@@ -40006,7 +40139,7 @@ function getRule(rule, props) {
   } else if (type) {
     cb = validate_type(type, po.message);
   } else {
-    var err = new FormError("Rule ".concat(JSON.stringify(rule), " is not valid."), po);
+    var err = new FormError("[shineout] Rule ".concat(JSON.stringify(rule), " is not valid."), po);
     console.error(err);
     throw err;
   }
@@ -40190,7 +40323,7 @@ function useFormControl(props) {
       }
     }
   });
-  var validateFiled = use_persist_fn(function (name, v, formV) {
+  var validateField = use_persist_fn(function (name, v, formV) {
     var config = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
     var validateProps = (getValidateProps === null || getValidateProps === void 0 ? void 0 : getValidateProps()) || {};
     if (config.type === 'forcePass') {
@@ -40267,7 +40400,7 @@ function useFormControl(props) {
         });
       }
     } else {
-      validateFiled('', v, undefined);
+      validateField('', v, undefined);
     }
     for (var _len = arguments.length, other = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       other[_key - 1] = arguments[_key];
@@ -40280,21 +40413,21 @@ function useFormControl(props) {
       if (isArray(name)) {
         var dv = isArray(defaultValue) ? defaultValue : [];
         name.forEach(function (n, index) {
-          controlFunc.bind(n, dv[index], validateFiled, update);
+          controlFunc.bind(n, dv[index], validateField, update);
         });
       } else {
-        controlFunc.bind(name, defaultValue, validateFiled, update);
+        controlFunc.bind(name, defaultValue, validateField, update);
       }
     }
     return function () {
       if (inForm && controlFunc) {
         if (isArray(name)) {
           name.forEach(function (n) {
-            controlFunc.unbind(n, reserveAble, validateFiled, update);
+            controlFunc.unbind(n, reserveAble, validateField, update);
             updateError(n, undefined);
           });
         } else {
-          controlFunc.unbind(name, reserveAble, validateFiled, update);
+          controlFunc.unbind(name, reserveAble, validateField, update);
           updateError(name, undefined);
         }
       }
@@ -40315,6 +40448,8 @@ function useFormControl(props) {
 ;// CONCATENATED MODULE: ../base/src/form/form-field.tsx
 
 
+
+
 var FormField = function FormField(props) {
   var _childrenProps$error, _childrenProps$status;
   var children = props.children;
@@ -40347,6 +40482,18 @@ var FormField = function FormField(props) {
   var childrenProps = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().isValidElement(children) ? children.props : {};
   var error = (_childrenProps$error = childrenProps.error) !== null && _childrenProps$error !== void 0 ? _childrenProps$error : formControl.error;
   var status = (_childrenProps$status = childrenProps.status) !== null && _childrenProps$status !== void 0 ? _childrenProps$status : formControl.error ? 'error' : undefined;
+  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(FormFieldContext),
+    separator = _useContext.separator;
+  var formFieldId = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function () {
+    if (!props.formName) return;
+    if (childrenProps.id) return childrenProps.id;
+    if (Array.isArray(formControl.name)) {
+      return formControl.name.map(function (name) {
+        return getFieldId(name, props.formName);
+      }).join(separator);
+    }
+    return getFieldId(formControl.name, props.formName);
+  }, [formControl.name, props.formName, childrenProps.id]);
   var cloneProps = {
     onChange: handleChange,
     status: status,
@@ -40358,11 +40505,21 @@ var FormField = function FormField(props) {
   if (formControl.disabled) {
     cloneProps.disabled = true;
   }
+  var finalChildren;
   if (isFunc(children)) {
-    return children(cloneProps);
+    finalChildren = children(cloneProps);
+  } else if ( /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().isValidElement(children)) {
+    finalChildren = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().cloneElement(children, cloneProps);
+  } else {
+    finalChildren = children;
   }
-  if ( /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().isValidElement(children)) return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().cloneElement(children, cloneProps);
-  return children;
+  return /*#__PURE__*/(0,jsx_runtime.jsx)(FormFieldContext.Provider, {
+    value: {
+      fieldId: formFieldId,
+      separator: separator
+    },
+    children: finalChildren
+  });
 };
 /* harmony default export */ var form_field = (FormField);
 ;// CONCATENATED MODULE: ./src/hooks/use-field-common.tsx
@@ -40389,6 +40546,7 @@ var useFieldCommon = function useFieldCommon(props, Origin, type) {
     name: props.name,
     defaultValue: props.defaultValue,
     reserveAble: (_props$reserveAble = props.reserveAble) !== null && _props$reserveAble !== void 0 ? _props$reserveAble : formConfig.reserveAble,
+    formName: formConfig.formName,
     rules: props.rules,
     onError: props.onError,
     bind: props.bind,
@@ -40471,7 +40629,7 @@ var useListSelectMultiple = function useListSelectMultiple(props) {
     if (typeof props.value === 'string') {
       valueArr = (props.value || '').split(props.separator);
     } else {
-      console.error('use-list-select: separator is string, but value is not string');
+      console.error('[shineout] use-list-select: separator is string, but value is not string');
       valueArr = props.value;
     }
   } else {
@@ -40727,6 +40885,7 @@ var useListSelectMultiple = function useListSelectMultiple(props) {
 
 
 
+
 var defaultFormat = function defaultFormat(d) {
   return d;
 };
@@ -40740,6 +40899,8 @@ var checkbox_group_Group = function Group(props0) {
     _props0$renderItem = props0.renderItem,
     renderItem = _props0$renderItem === void 0 ? defaultRenderItem : _props0$renderItem;
   var props = use_with_form_config(props0);
+  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(FormFieldContext),
+    fieldId = _useContext.fieldId;
   var children = props.children,
     className = props.className,
     block = props.block,
@@ -40805,6 +40966,7 @@ var checkbox_group_Group = function Group(props0) {
     return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
       className: groupClass,
       style: style,
+      id: fieldId,
       children: /*#__PURE__*/(0,jsx_runtime.jsx)(group_context.Provider, {
         value: providerValue,
         children: children
@@ -40814,6 +40976,7 @@ var checkbox_group_Group = function Group(props0) {
     return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
       className: groupClass,
       style: style,
+      id: fieldId,
       children: [props.data.map(function (d, i) {
         return /*#__PURE__*/(0,jsx_runtime.jsx)(base_src_checkbox_checkbox, {
           jssStyle: jssStyle,
@@ -40909,6 +41072,7 @@ var useCollapse = function useCollapse(props) {
 
 
 var Collapse = function Collapse(props) {
+  var _jssStyle$collapse, _jssStyle$collapse2, _jssStyle$collapse3;
   var children = props.children,
     jssStyle = props.jssStyle,
     style = props.style,
@@ -40934,7 +41098,7 @@ var Collapse = function Collapse(props) {
     }),
     active = _useCollapse.active,
     onChange = _useCollapse.onChange;
-  var collapseRootClassName = classnames_default()(className, jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.collapse.wrapper, !border && (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.collapse.borderLess));
+  var collapseRootClassName = classnames_default()(className, jssStyle === null || jssStyle === void 0 || (_jssStyle$collapse = jssStyle.collapse) === null || _jssStyle$collapse === void 0 ? void 0 : _jssStyle$collapse.rootClass, jssStyle === null || jssStyle === void 0 || (_jssStyle$collapse2 = jssStyle.collapse) === null || _jssStyle$collapse2 === void 0 ? void 0 : _jssStyle$collapse2.wrapper, !border && (jssStyle === null || jssStyle === void 0 || (_jssStyle$collapse3 = jssStyle.collapse) === null || _jssStyle$collapse3 === void 0 ? void 0 : _jssStyle$collapse3.borderLess));
   var providerValue = {
     active: active,
     triggerRegion: triggerRegion,
@@ -41887,6 +42051,8 @@ var en_default = /*#__PURE__*/__webpack_require__.n(en);
 
 
 
+var util_devUseWarning = devUseWarning;
+
 // import { DateTimeType } from './Props';
 // import { DateMode } from './Props';
 
@@ -41921,7 +42087,7 @@ var compatibleFmt = function compatibleFmt(fmt) {
     result = result.replace(new RegExp(key, 'g'), trans[key]);
   });
   if (result !== fmt) {
-    console.warn("invalid datepicker format: ".concat(fmt, " please use ").concat(result));
+    util_devUseWarning.warn("invalid datepicker format: ".concat(fmt, " please use ").concat(result));
   }
   return result;
 };
@@ -41941,7 +42107,7 @@ function transDateWithZone(dd) {
         return back ? zonedTimeToUtc(dd, options.timeZone) : utcToZonedTime(dd, options.timeZone);
       }
     }
-    console.error(new Error("timeZone is not supported: ".concat(options.timeZone)));
+    util_devUseWarning.error("timeZone is not supported: ".concat(options.timeZone));
   }
   return new Date(dd);
 }
@@ -42417,13 +42583,13 @@ var useDatePickerFormat = function useDatePickerFormat(props) {
       quick: quick
     });
   });
-  var isDisabledDate = usePersistFn(function (date, position) {
+  var isDisabledDate = usePersistFn(function (date, position, triggerType) {
     var mode = getTypeMode(type);
     var disabled = position === 'end' ? context.modeDisabledEnd[mode] : context.modeDisabledStart[mode];
     var isDisabled = disabled ? disabled(date) : false;
     if (type === 'datetime' && !isDisabled) {
       var disabledTime = position === 'end' ? context.modeDisabledEnd['time'] : context.modeDisabledStart['time'];
-      isDisabled = disabledTime ? disabledTime(date) : false;
+      isDisabled = disabledTime ? disabledTime(date, triggerType) : false;
     }
     return isDisabled;
   });
@@ -42522,7 +42688,10 @@ var useDatePickerFormat = function useDatePickerFormat(props) {
     var isValid = util.isValidString(str, format);
     if (!isValid) return;
     var date = util.toDateWithFormat(str, format, undefined, options);
-    if (date && isDisabledDate(date, index === 1 ? 'end' : 'start')) return;
+    // 此次校验是由输入触发的
+    if (date && isDisabledDate(date, index === 1 ? 'end' : 'start', 'input')) {
+      return;
+    }
     setStateDate(function (prev) {
       var arr = toConsumableArray_default()(prev);
       arr[index] = date;
@@ -42758,7 +42927,9 @@ var useTime = function useTime(props) {
     _props$minuteStep = props.minuteStep,
     minuteStep = _props$minuteStep === void 0 ? 1 : _props$minuteStep,
     _props$secondStep = props.secondStep,
-    secondStep = _props$secondStep === void 0 ? 1 : _props$secondStep;
+    secondStep = _props$secondStep === void 0 ? 1 : _props$secondStep,
+    staticMin = props.staticMin,
+    staticMax = props.staticMax;
   var min = util.resetTimeByFormat(mi, format, options);
   var max = util.resetTimeByFormat(ma, format, options);
   var current = props.value || util.newDate(undefined, options);
@@ -42779,7 +42950,7 @@ var useTime = function useTime(props) {
       time.apm = 'am';
     }
   }
-  var isDisabled = function isDisabled(date) {
+  var isDisabled = function isDisabled(date, triggerType) {
     var disabled = props.disabled,
       disabledTime = props.disabledTime;
     if (disabledTime) {
@@ -42788,8 +42959,22 @@ var useTime = function useTime(props) {
       return disabledTime === _time;
     }
     var isDis = disabled && typeof disabled === 'function' ? disabled(date) : false;
-    if (min && util.compareAsc(date, min) < 0) isDis = true;
-    if (max && util.compareAsc(date, max) > 0) isDis = true;
+    if (min && util.compareAsc(date, min) < 0) {
+      isDis = true;
+    }
+    if (max && util.compareAsc(date, max) > 0) {
+      isDis = true;
+    }
+
+    // 此次校验是由输入触发的
+    if (triggerType === 'input' && !min && !max) {
+      if (staticMin && util.compareAsc(date, staticMin) < 0) {
+        isDis = true;
+      }
+      if (staticMax && util.compareAsc(date, staticMax) > 0) {
+        isDis = true;
+      }
+    }
     return isDis;
   };
   var getTargetDate = function getTargetDate(type, target) {
@@ -42927,7 +43112,7 @@ var Link = function Link(props) {
     children = props.children,
     restProps = objectWithoutProperties_default()(props, link_excluded);
   var linkClasses = (jssStyle === null || jssStyle === void 0 || (_jssStyle$link = jssStyle.link) === null || _jssStyle$link === void 0 ? void 0 : _jssStyle$link.call(jssStyle)) || {};
-  var rootClass = classnames_default()(className, linkClasses.wrapper, defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()({}, linkClasses.underline, underline === true), linkClasses.underlineHover, underline === 'hover'), linkClasses.disabled, disabled), linkClasses.sizeSmall, size === 'small'), linkClasses.sizeLarge, size === 'large'), linkClasses.primary, type === 'primary'), linkClasses.secondary, type === 'secondary'), linkClasses.danger, type === 'danger'), linkClasses.warning, type === 'warning'), linkClasses.success, type === 'success'));
+  var rootClass = classnames_default()(className, linkClasses.rootClass, linkClasses.wrapper, defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()({}, linkClasses.underline, underline === true), linkClasses.underlineHover, underline === 'hover'), linkClasses.disabled, disabled), linkClasses.sizeSmall, size === 'small'), linkClasses.sizeLarge, size === 'large'), linkClasses.primary, type === 'primary'), linkClasses.secondary, type === 'secondary'), linkClasses.danger, type === 'danger'), linkClasses.warning, type === 'warning'), linkClasses.success, type === 'success'));
   var handleClick = function handleClick(e) {
     if (disabled) {
       e.preventDefault();
@@ -43115,6 +43300,8 @@ var Time = function Time(props) {
       onChange: onChange,
       min: props.min,
       max: props.max,
+      staticMin: props.staticMin,
+      staticMax: props.staticMax,
       disabled: props.disabled,
       disabledTime: props.disabledTime,
       hourStep: props.hourStep,
@@ -44396,6 +44583,8 @@ var useRangePick = function useRangePick(props) {
   }
   var startMin = minDate;
   var startMax = maxDate;
+  var staticStartMin = minDate;
+  var staticStartMax = maxDate;
   if (disabledEnd && props.dateArr[1]) {
     if (!startMax || util.compareAsc(startMax, props.dateArr[1]) > 0) {
       startMax = props.dateArr[1];
@@ -44407,12 +44596,25 @@ var useRangePick = function useRangePick(props) {
       }
     }
   }
+  if (!disabledEnd && props.dateArr[1]) {
+    if (!staticStartMax || util.compareAsc(staticStartMax, props.dateArr[1]) > 0) {
+      staticStartMax = props.dateArr[1];
+    }
+    if (typeof range === 'number') {
+      var _rangeDate2 = util.addSeconds(props.dateArr[1], -range, options);
+      if (!staticStartMin || util.compareAsc(staticStartMin, _rangeDate2) < 0) {
+        staticStartMin = _rangeDate2;
+      }
+    }
+  }
   return {
     defaultTimeArr: defaultTimeArr,
     endMin: endMin,
     endMax: endMax,
     startMin: startMin,
     startMax: startMax,
+    staticStartMin: staticStartMin,
+    staticStartMax: staticStartMax,
     func: func
   };
 };
@@ -44462,7 +44664,9 @@ var Picker = function Picker(props) {
     endMax = _useDatePickerRange.endMax,
     endMin = _useDatePickerRange.endMin,
     startMin = _useDatePickerRange.startMin,
-    startMax = _useDatePickerRange.startMax;
+    startMax = _useDatePickerRange.startMax,
+    staticStartMin = _useDatePickerRange.staticStartMin,
+    staticStartMax = _useDatePickerRange.staticStartMax;
   var handleEnterStart = usePersistFn(function () {
     props.setActiveIndex(0);
   });
@@ -44490,7 +44694,9 @@ var Picker = function Picker(props) {
       disabled: position === 'end' ? func.endDisabled : func.startDisabled,
       rangeDate: dateArr,
       min: position === 'end' ? endMin : startMin,
+      staticMin: position === 'end' ? endMin : staticStartMin,
       max: position === 'end' ? endMax : startMax,
+      staticMax: position === 'end' ? endMax : staticStartMax,
       jssStyle: jssStyle,
       position: position,
       showSelNow: props.showSelNow,
@@ -44602,6 +44808,7 @@ var Picker = function Picker(props) {
 
 
 
+var date_picker_devUseWarning = devUseWarning;
 var date_picker_verticalPosition = ['bottom-left', 'bottom-right', 'top-left', 'top-right'];
 var date_picker_horizontalPosition = ['left-top', 'left-bottom', 'right-top', 'right-bottom'];
 var preventDefault = function preventDefault(e) {
@@ -44609,6 +44816,9 @@ var preventDefault = function preventDefault(e) {
 };
 var DatePicker = function DatePicker(props0) {
   var _jssStyle$datePicker;
+  if (props0.defaultRangeMonth) {
+    date_picker_devUseWarning.deprecated('defaultRangeMonth', 'defaultPickerValue', 'DatePicker');
+  }
   var props = use_with_form_config(props0);
   var _useConfig = useConfig(),
     locale = _useConfig.locale,
@@ -44822,11 +45032,11 @@ var DatePicker = function DatePicker(props0) {
   };
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     if (props.formatResult && props.inputable) {
-      console.warn('formatResult and inputable cannot be used at the same time');
+      date_picker_devUseWarning.conflict('DatePicker', 'formatResult', 'inputable');
     }
   }, []);
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({}, getDataAttribute(defineProperty_default()(defineProperty_default()({}, 'input-border', 'true'), "type", type))), {}, {
-    className: classnames_default()(props.className, styles === null || styles === void 0 ? void 0 : styles.wrapper, props.innerTitle && (styles === null || styles === void 0 ? void 0 : styles.wrapperInnerTitle), size === 'small' && (styles === null || styles === void 0 ? void 0 : styles.wrapperSmall), size === 'large' && (styles === null || styles === void 0 ? void 0 : styles.wrapperLarge), focused && disabled !== true && (styles === null || styles === void 0 ? void 0 : styles.wrapperFocus), disabledStatus === 'all' && (styles === null || styles === void 0 ? void 0 : styles.wrapperDisabled), (!!props.error || props.status === 'error') && (styles === null || styles === void 0 ? void 0 : styles.wrapperError), range && (styles === null || styles === void 0 ? void 0 : styles.wrapperRange), !border && (styles === null || styles === void 0 ? void 0 : styles.wrapperNoBorder), !!props.underline && (styles === null || styles === void 0 ? void 0 : styles.wrapperUnderline)),
+    className: classnames_default()(props.className, styles === null || styles === void 0 ? void 0 : styles.rootClass, styles === null || styles === void 0 ? void 0 : styles.wrapper, props.innerTitle && (styles === null || styles === void 0 ? void 0 : styles.wrapperInnerTitle), size === 'small' && (styles === null || styles === void 0 ? void 0 : styles.wrapperSmall), size === 'large' && (styles === null || styles === void 0 ? void 0 : styles.wrapperLarge), focused && disabled !== true && (styles === null || styles === void 0 ? void 0 : styles.wrapperFocus), disabledStatus === 'all' && (styles === null || styles === void 0 ? void 0 : styles.wrapperDisabled), (!!props.error || props.status === 'error') && (styles === null || styles === void 0 ? void 0 : styles.wrapperError), range && (styles === null || styles === void 0 ? void 0 : styles.wrapperRange), !border && (styles === null || styles === void 0 ? void 0 : styles.wrapperNoBorder), !!props.underline && (styles === null || styles === void 0 ? void 0 : styles.wrapperUnderline)),
     style: objectSpread2_default()({
       width: props.width
     }, props.style),
@@ -45170,7 +45380,7 @@ var Descriptions = function Descriptions(props) {
     if (layout === 'inlineHorizontal' || layout === 'inlineVertical') return renderInline(d, i);
     return layout === 'horizontal' ? renderHorizontal(d, i) : renderVertical(d, i);
   };
-  var rootClassName = classnames_default()(className, jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.wrapper, size === 'small' && (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.small), size === 'large' && (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.large));
+  var rootClassName = classnames_default()(className, jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.rootClass, jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.wrapper, size === 'small' && (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.small), size === 'large' && (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.large));
   var bodyClassName = classnames_default()(jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.body, border && (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.border), tableLayout === 'fixed' && (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.tableLayoutFixed), layout === 'inlineHorizontal' && (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.inlineHorizontal), layout === 'horizontal' && (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.horizontal), layout === 'vertical' && (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.vertical));
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
     className: rootClassName,
@@ -45226,7 +45436,7 @@ var Divider = function Divider(props) {
     type = props.type;
   var styles = jssStyle === null || jssStyle === void 0 || (_jssStyle$divider = jssStyle.divider) === null || _jssStyle$divider === void 0 ? void 0 : _jssStyle$divider.call(jssStyle);
   var showText = mode === 'horizontal' && children;
-  var mc = classnames_default()(className, styles === null || styles === void 0 ? void 0 : styles.wrapper, mode === 'vertical' && (styles === null || styles === void 0 ? void 0 : styles.vertical), mode === 'horizontal' && (styles === null || styles === void 0 ? void 0 : styles.horizontal), showText && (styles === null || styles === void 0 ? void 0 : styles.withText), showText && orientation === 'center' && (styles === null || styles === void 0 ? void 0 : styles.withTextCenter), showText && orientation === 'left' && (styles === null || styles === void 0 ? void 0 : styles.withTextLeft), showText && orientation === 'right' && (styles === null || styles === void 0 ? void 0 : styles.withTextRight), type === 'dashed' && (styles === null || styles === void 0 ? void 0 : styles.wrapperDashed));
+  var mc = classnames_default()(className, styles === null || styles === void 0 ? void 0 : styles.rootClass, styles === null || styles === void 0 ? void 0 : styles.wrapper, mode === 'vertical' && (styles === null || styles === void 0 ? void 0 : styles.vertical), mode === 'horizontal' && (styles === null || styles === void 0 ? void 0 : styles.horizontal), showText && (styles === null || styles === void 0 ? void 0 : styles.withText), showText && orientation === 'center' && (styles === null || styles === void 0 ? void 0 : styles.withTextCenter), showText && orientation === 'left' && (styles === null || styles === void 0 ? void 0 : styles.withTextLeft), showText && orientation === 'right' && (styles === null || styles === void 0 ? void 0 : styles.withTextRight), type === 'dashed' && (styles === null || styles === void 0 ? void 0 : styles.wrapperDashed));
   return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
     className: mc,
     style: style,
@@ -45670,7 +45880,7 @@ var Modal = function Modal(props) {
       onClick: function onClick(e) {
         e.stopPropagation();
       },
-      className: classnames_default()(props.rootClassName, modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapper, animation && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperAnimation), visible ? modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperShow : modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperHide, (context.isMask || props.forceMask) && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperIsMask), props.fullScreen && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperFullScreen), props.moveable && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperMoveable), props.hideMask && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperHideMask), props.zoom && !props.moveable && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperZoom), (isPositionX || isPositionY) && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawer), props.position === 'left' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerLeft), props.position === 'right' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerRight), props.position === 'top' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerTop), props.position === 'bottom' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerBottom)),
+      className: classnames_default()(props.rootClassName, modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.rootClass, modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapper, animation && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperAnimation), visible ? modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperShow : modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperHide, (context.isMask || props.forceMask) && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperIsMask), props.fullScreen && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperFullScreen), props.moveable && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperMoveable), props.hideMask && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperHideMask), props.zoom && !props.moveable && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperZoom), (isPositionX || isPositionY) && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawer), props.position === 'left' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerLeft), props.position === 'right' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerRight), props.position === 'top' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerTop), props.position === 'bottom' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerBottom)),
       onAnimationEnd: handleAnimationEnd,
       style: {
         background: props.maskBackground,
@@ -45827,7 +46037,12 @@ var method = function method(type, jssStyle) {
 
 
 
+
+var modal_devUseWarning = devUseWarning;
 var modal_Modal = function Modal(props) {
+  if (props.maskOpacity) {
+    modal_devUseWarning.deprecated('maskOpacity', 'maskBackground', 'Modal');
+  }
   var _useContainer = use_container({
       container: props.container
     }),
@@ -46183,7 +46398,7 @@ var Dropdown = function Dropdown(props) {
   });
   var targetProps = getTargetProps();
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({
-    className: classnames_default()(className, dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.wrapper, !isSub && open && (dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.open)),
+    className: classnames_default()(className, dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.rootClass, dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.wrapper, !isSub && open && (dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.open)),
     style: style,
     "data-position": position,
     "data-role": "dropdown",
@@ -46223,8 +46438,14 @@ var Dropdown = function Dropdown(props) {
 
 
 
+
+var dropdown_devUseWarning = devUseWarning;
+
 // 过滤内部属性
 var dropdown_Dropdown = function Dropdown(props) {
+  if (props.outline) {
+    dropdown_devUseWarning.deprecated('outline', 'mode="outline"', 'Dropdown');
+  }
   return /*#__PURE__*/(0,jsx_runtime.jsx)(dropdownIn, objectSpread2_default()(objectSpread2_default()({}, props), {}, {
     isSub: false,
     closePop: undefined
@@ -46354,6 +46575,7 @@ var simple_textarea_excluded = ["jssStyle", "className", "style", "status", "siz
 
 
 
+
 var Textarea = function Textarea(props) {
   var _jssStyle$textarea;
   var jssStyle = props.jssStyle,
@@ -46378,7 +46600,9 @@ var Textarea = function Textarea(props) {
     getTextAreaProps = _useTextarea.getTextAreaProps,
     focused = _useTextarea.focused,
     disabled = _useTextarea.disabled;
-  var rootClass = classnames_default()(className, textareaClasses === null || textareaClasses === void 0 ? void 0 : textareaClasses.wrapper, !!focused && (textareaClasses === null || textareaClasses === void 0 ? void 0 : textareaClasses.wrapperFocus), !!disabled && (textareaClasses === null || textareaClasses === void 0 ? void 0 : textareaClasses.wrapperDisabled), status === 'error' && (textareaClasses === null || textareaClasses === void 0 ? void 0 : textareaClasses.wrapperError), size === 'small' && (textareaClasses === null || textareaClasses === void 0 ? void 0 : textareaClasses.wrapperSmall), size === 'large' && (textareaClasses === null || textareaClasses === void 0 ? void 0 : textareaClasses.wrapperLarge), !!underline && (textareaClasses === null || textareaClasses === void 0 ? void 0 : textareaClasses.wrapperUnderline), !border && (textareaClasses === null || textareaClasses === void 0 ? void 0 : textareaClasses.wrapperNoBorder));
+  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(FormFieldContext),
+    fieldId = _useContext.fieldId;
+  var rootClass = classnames_default()(className, textareaClasses === null || textareaClasses === void 0 ? void 0 : textareaClasses.rootClass, textareaClasses === null || textareaClasses === void 0 ? void 0 : textareaClasses.wrapper, !!focused && (textareaClasses === null || textareaClasses === void 0 ? void 0 : textareaClasses.wrapperFocus), !!disabled && (textareaClasses === null || textareaClasses === void 0 ? void 0 : textareaClasses.wrapperDisabled), status === 'error' && (textareaClasses === null || textareaClasses === void 0 ? void 0 : textareaClasses.wrapperError), size === 'small' && (textareaClasses === null || textareaClasses === void 0 ? void 0 : textareaClasses.wrapperSmall), size === 'large' && (textareaClasses === null || textareaClasses === void 0 ? void 0 : textareaClasses.wrapperLarge), !!underline && (textareaClasses === null || textareaClasses === void 0 ? void 0 : textareaClasses.wrapperUnderline), !border && (textareaClasses === null || textareaClasses === void 0 ? void 0 : textareaClasses.wrapperNoBorder));
   var keyHandler = useKeyEvent({
     onEnterPress: function onEnterPress(e) {
       _onEnterPress === null || _onEnterPress === void 0 || _onEnterPress(e.target.value || '', e);
@@ -46404,7 +46628,9 @@ var Textarea = function Textarea(props) {
   if (typeof renderTextarea === 'function') {
     textareaEl = renderTextarea(textareaEl);
   }
-  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()(objectSpread2_default()({}, getDataAttribute(defineProperty_default()({}, 'input-border', 'true'))), getRootProps({
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()(objectSpread2_default()({
+    id: fieldId
+  }, getDataAttribute(defineProperty_default()({}, 'input-border', 'true'))), getRootProps({
     className: rootClass,
     style: style
   })), {}, {
@@ -46698,6 +46924,7 @@ var textarea_Textarea = function Textarea(props0) {
 
 
 
+
 function formatShowValue(value) {
   if (!value && value !== 0) return '';
   var arr = String(value).split('\n');
@@ -46726,6 +46953,8 @@ var EditableArea = function EditableArea(props) {
     placeTitle = props.placeTitle,
     _props$bordered = props.bordered,
     bordered = _props$bordered === void 0 ? false : _props$bordered;
+  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(FormFieldContext),
+    fieldId = _useContext.fieldId;
   var editableAreaStyle = jssStyle === null || jssStyle === void 0 || (_jssStyle$editableAre = jssStyle.editableArea) === null || _jssStyle$editableAre === void 0 ? void 0 : _jssStyle$editableAre.call(jssStyle);
   var status = error ? 'error' : props.status;
   var textareaRef = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useRef(null);
@@ -46831,7 +47060,8 @@ var EditableArea = function EditableArea(props) {
     });
   };
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-    className: classnames_default()(className, editableAreaStyle === null || editableAreaStyle === void 0 ? void 0 : editableAreaStyle.wrapper, status === 'error' && (editableAreaStyle === null || editableAreaStyle === void 0 ? void 0 : editableAreaStyle.wrapperError), disabled && (editableAreaStyle === null || editableAreaStyle === void 0 ? void 0 : editableAreaStyle.wrapperDisabled), !bordered && (editableAreaStyle === null || editableAreaStyle === void 0 ? void 0 : editableAreaStyle.wrapperNoBorder), !!props.innerTitle && (editableAreaStyle === null || editableAreaStyle === void 0 ? void 0 : editableAreaStyle.wrapperInnerTitle)),
+    id: fieldId,
+    className: classnames_default()(className, editableAreaStyle === null || editableAreaStyle === void 0 ? void 0 : editableAreaStyle.rootClass, editableAreaStyle === null || editableAreaStyle === void 0 ? void 0 : editableAreaStyle.wrapper, status === 'error' && (editableAreaStyle === null || editableAreaStyle === void 0 ? void 0 : editableAreaStyle.wrapperError), disabled && (editableAreaStyle === null || editableAreaStyle === void 0 ? void 0 : editableAreaStyle.wrapperDisabled), !bordered && (editableAreaStyle === null || editableAreaStyle === void 0 ? void 0 : editableAreaStyle.wrapperNoBorder), !!props.innerTitle && (editableAreaStyle === null || editableAreaStyle === void 0 ? void 0 : editableAreaStyle.wrapperInnerTitle)),
     style: objectSpread2_default()({
       width: width
     }, style),
@@ -47039,7 +47269,7 @@ var Empty = function Empty(props) {
   var _useConfig = useConfig(),
     locale = _useConfig.locale;
   var styles = jssStyle === null || jssStyle === void 0 || (_jssStyle$empty = jssStyle.empty) === null || _jssStyle$empty === void 0 ? void 0 : _jssStyle$empty.call(jssStyle);
-  var rootClass = classnames_default()(styles === null || styles === void 0 ? void 0 : styles.empty, className);
+  var rootClass = classnames_default()(styles === null || styles === void 0 ? void 0 : styles.rootClass, styles === null || styles === void 0 ? void 0 : styles.empty, className);
   var wrapperClass = classnames_default()(styles === null || styles === void 0 ? void 0 : styles.wrapper);
   var alt = typeof description === 'string' ? description : 'empty';
   var getRootProps = function getRootProps() {
@@ -47256,6 +47486,7 @@ var useForm = function useForm(props) {
     _props$throttle = props.throttle,
     throttle = _props$throttle === void 0 ? 1000 : _props$throttle,
     size = props.size,
+    formName = props.name,
     reserveAble = props.reserveAble,
     scrollParent = props.scrollParent;
   var deepSetOptions = {
@@ -47263,7 +47494,7 @@ var useForm = function useForm(props) {
     forceSet: true
   };
   var preValue = use_previous_usePrevious(props.value);
-  var formRef = external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef();
+  var formDomRef = external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef();
   var _React$useRef = external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef({
       defaultValues: {},
       validateMap: {},
@@ -47325,9 +47556,9 @@ var useForm = function useForm(props) {
     onError === null || onError === void 0 || onError(err);
     if (!props.scrollToError) return;
     setTimeout(function () {
-      var _formRef$current;
+      var _formDomRef$current;
       var selector = "[".concat(getDataAttributeName('status'), "=\"error\"]");
-      var el = (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : _formRef$current.querySelector(selector);
+      var el = (_formDomRef$current = formDomRef.current) === null || _formDomRef$current === void 0 ? void 0 : _formDomRef$current.querySelector(selector);
       if (el) {
         el.scrollIntoView();
         var focusableSelectors = 'textarea, input,[tabindex]:not([tabindex="-1"])';
@@ -47350,32 +47581,106 @@ var useForm = function useForm(props) {
     context.value = newValue;
     (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, context.value);
   });
+  var getValue = use_persist_fn(function (name) {
+    if (name) {
+      return deepGet(context.value, name);
+    }
+    return context.value;
+  });
   var validateFields = use_persist_fn(function (fields) {
     var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     return new Promise(function (resolve, reject) {
-      var files2 = fields ? (isArray(fields) ? fields : [fields]).filter(function (key) {
+      var finalFields = fields ? (isArray(fields) ? fields : [fields]).filter(function (key) {
         return context.validateMap[key];
       }) : Object.keys(context.validateMap);
-      var validates = files2.map(function (key) {
+      var validates = finalFields.map(function (key) {
         var validateField = context.validateMap[key];
         return Array.from(validateField).map(function (validate) {
           return validate(key, deepGet(context.value, key), context.value, config);
         });
       });
-      Promise.all(validates.flat()).then(function (results) {
-        var error = results.find(function (n) {
-          return n !== true;
-        });
-        if (error !== undefined) {
-          reject(error);
-        } else {
-          resolve(true);
+      if (config.type === 'withValue') {
+        var validatorValue = context.value;
+        if (fields) {
+          var fieldArray = isArray(fields) ? fields : [fields];
+          validatorValue = fieldArray.reduce(function (prev, cur) {
+            return objectSpread2_default()(objectSpread2_default()({}, prev), {}, defineProperty_default()({}, cur, getValue(cur)));
+          }, {});
         }
-      }).catch(function (e) {
-        reject(wrapFormError(e));
-      });
+        Promise.all(validates.flat()).then(function (results) {
+          var errors = results.filter(function (n) {
+            return n !== true;
+          });
+          if (errors.length > 0) {
+            var errorFields = [];
+            for (var _key in context.errors) {
+              if (context.errors[_key]) {
+                var _context$errors$_key;
+                errorFields.push({
+                  name: _key,
+                  errors: [((_context$errors$_key = context.errors[_key]) === null || _context$errors$_key === void 0 ? void 0 : _context$errors$_key.message) || '']
+                });
+              }
+            }
+            reject({
+              values: validatorValue,
+              errorFields: errorFields
+            });
+          } else {
+            resolve(validatorValue);
+          }
+        });
+      } else {
+        Promise.all(validates.flat()).then(function (results) {
+          var error = results.find(function (n) {
+            return n !== true;
+          });
+          if (error !== undefined) {
+            reject(error);
+          } else {
+            resolve(true);
+          }
+        }).catch(function (e) {
+          reject(wrapFormError(e));
+        });
+      }
     });
   });
+  var scrollToField = use_persist_fn(function (name) {
+    var _document;
+    var scrollIntoViewOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    if (!name) return;
+    var fieldId = getFieldId(name, formName);
+    if (!fieldId) return;
+    var element = (_document = document) === null || _document === void 0 ? void 0 : _document.getElementById(fieldId);
+    if (element) {
+      // 查找可滚动的父元素
+      var parentEl = getClosestScrollContainer(element);
+      if (parentEl) {
+        var parentRect = parentEl.getBoundingClientRect();
+        var elementRect = element.getBoundingClientRect();
+
+        // 判断父元素是否在可见范围内
+        var isVisibleY = elementRect.top >= parentRect.top && elementRect.bottom <= parentRect.bottom;
+        var isVisibleX = elementRect.left >= parentRect.left && elementRect.right <= parentRect.right;
+        if (!isVisibleY || !isVisibleX) {
+          // 计算元素相对于父元素的偏移量
+          var offsetTop = element.offsetTop - parentEl.offsetTop;
+          var offsetLeft = element.offsetLeft - parentEl.offsetLeft;
+          parentEl.scrollTop = offsetTop;
+          parentEl.scrollLeft = offsetLeft;
+        }
+      } else {
+        // 如果没有找到可滚动的父元素，使用默认行为
+        element.scrollIntoView(objectSpread2_default()({
+          behavior: 'smooth'
+        }, scrollIntoViewOptions));
+      }
+    } else {
+      // todo: 统一警告|错误信息(by Tom)
+      console.warn("[shineout] fieldId: ".concat(fieldId, " not found"));
+    }
+  });
   var remove = function remove() {
     if (!context.removeArr.size) return;
     if (context.unmounted) return;
@@ -47393,12 +47698,6 @@ var useForm = function useForm(props) {
     }
     context.removeTimer = setTimeout(remove);
   };
-  var getValue = use_persist_fn(function (name) {
-    if (name) {
-      return deepGet(context.value, name);
-    }
-    return context.value;
-  });
   var setValue = use_persist_fn(function (vals) {
     var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
       validate: false
@@ -47406,9 +47705,11 @@ var useForm = function useForm(props) {
     onChange(function (draft) {
       var values = Object.keys(vals);
       // 针对 name 为数组模式，如 datepicker 的 name={['startTime', 'endTime']} 时，前者校验可能需要依赖后者，因此需要提前将后者数据整合至 draft 用于多字段整合校验
-      var nextDraft = Object.assign({}, current(draft), vals);
+      var nextDraft = current(draft);
+      values.forEach(function (key) {
+        deepSet(nextDraft, key, vals[key], deepSetOptions);
+      });
       values.forEach(function (key) {
-        deepSet(draft, key, vals[key], deepSetOptions);
         if (option.validate) {
           var _context$validateMap$;
           (_context$validateMap$ = context.validateMap[key]) === null || _context$validateMap$ === void 0 || _context$validateMap$.forEach(function (validate) {
@@ -47467,7 +47768,7 @@ var useForm = function useForm(props) {
       context.submitLock = false;
     }, throttle);
     asyncToGenerator_default()( /*#__PURE__*/regeneratorRuntime_default()().mark(function _callee() {
-      var _props$onSubmit, _ref2, result, _props$onSubmit2, _ref3;
+      var _props$onSubmit, _context$value, result, _props$onSubmit2, _context$value2;
       return regeneratorRuntime_default()().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -47475,7 +47776,7 @@ var useForm = function useForm(props) {
               _context.next = 3;
               break;
             }
-            (_props$onSubmit = props.onSubmit) === null || _props$onSubmit === void 0 || _props$onSubmit.call(props, (_ref2 = context.value) !== null && _ref2 !== void 0 ? _ref2 : {});
+            (_props$onSubmit = props.onSubmit) === null || _props$onSubmit === void 0 || _props$onSubmit.call(props, (_context$value = context.value) !== null && _context$value !== void 0 ? _context$value : {});
             return _context.abrupt("return");
           case 3:
             _context.next = 5;
@@ -47490,7 +47791,7 @@ var useForm = function useForm(props) {
               _context.next = 10;
               break;
             }
-            (_props$onSubmit2 = props.onSubmit) === null || _props$onSubmit2 === void 0 || _props$onSubmit2.call(props, (_ref3 = context.value) !== null && _ref3 !== void 0 ? _ref3 : {});
+            (_props$onSubmit2 = props.onSubmit) === null || _props$onSubmit2 === void 0 || _props$onSubmit2.call(props, (_context$value2 = context.value) !== null && _context$value2 !== void 0 ? _context$value2 : {});
             _context.next = 12;
             break;
           case 10:
@@ -47549,7 +47850,7 @@ var useForm = function useForm(props) {
     var externalProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     var externalEventHandlers = extractEventHandlers(externalProps);
     return objectSpread2_default()(objectSpread2_default()(objectSpread2_default()({}, externalProps), externalEventHandlers), {}, {
-      ref: formRef,
+      ref: formDomRef,
       disabled: !!disabled,
       onSubmit: handleSubmit(externalEventHandlers),
       onReset: handleReset(externalEventHandlers)
@@ -47560,9 +47861,7 @@ var useForm = function useForm(props) {
   });
   var controlFunc = use_latest_obj({
     bind: function bind(n, df, validate, updateFn) {
-      if (context.names.has(n)) {
-        console.warn("name \"".concat(n, "\" already exist"));
-      }
+      if (false) {}
       context.names.add(n);
       if (!context.validateMap[n]) {
         context.validateMap[n] = new Set();
@@ -47583,10 +47882,10 @@ var useForm = function useForm(props) {
         });
       }
     },
-    unbind: function unbind(n, reserveAble, validateFiled, update) {
+    unbind: function unbind(n, reserveAble, validateField, update) {
       var validateFieldSet = context.validateMap[n];
-      if (validateFiled && validateFieldSet.has(validateFiled)) {
-        validateFieldSet.delete(validateFiled);
+      if (validateField && validateFieldSet.has(validateField)) {
+        validateFieldSet.delete(validateField);
       }
       var updateFieldSet = context.updateMap[n];
       if (update && updateFieldSet.has(update)) {
@@ -47647,7 +47946,8 @@ var useForm = function useForm(props) {
     validateFields: validateFields,
     validateFieldset: validateFieldset,
     insertError: insertError,
-    spliceError: spliceError
+    spliceError: spliceError,
+    scrollToField: scrollToField
   });
   var formConfig = external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo(function () {
     return {
@@ -47658,9 +47958,10 @@ var useForm = function useForm(props) {
       inline: inline,
       disabled: disabled,
       size: size,
-      reserveAble: reserveAble
+      reserveAble: reserveAble,
+      formName: formName
     };
-  }, [labelWidth, labelAlign, labelVerticalAlign, keepErrorHeight, inline, disabled, size, reserveAble]);
+  }, [labelWidth, labelAlign, labelVerticalAlign, keepErrorHeight, inline, disabled, size, reserveAble, formName]);
   var updateValue = function updateValue() {
     if (props.value !== context.lastValue && props.value !== context.value) {
       context.value = deepClone(props.value) || emptyObj;
@@ -47775,8 +48076,13 @@ var Form = function Form(props) {
   var validate = usePersistFn(function () {
     return formFunc.validateFields();
   });
-  var validateFields = usePersistFn(function (fileds) {
-    return formFunc.validateFields(fileds).catch(function () {});
+  var validateFields = usePersistFn(function (fields) {
+    return formFunc.validateFields(fields).catch(function () {});
+  });
+  var validateFieldsWithValue = usePersistFn(function (fields) {
+    return formFunc.validateFields(fields, {
+      type: 'withValue'
+    });
   });
   var formRefObj = useLatestObj({
     clearValidate: formFunc.clearValidate,
@@ -47785,8 +48091,10 @@ var Form = function Form(props) {
     submit: formFunc.submit,
     validate: validate,
     validateFields: validateFields,
+    validateFieldsWithValue: validateFieldsWithValue,
     validateFieldsWithError: formFunc.validateFields,
-    set: formFunc.setValue
+    set: formFunc.setValue,
+    scrollToField: formFunc.scrollToField
   });
   external_root_React_commonjs2_react_commonjs_react_amd_react_default().useEffect(function () {
     if (formRef) {
@@ -47818,7 +48126,7 @@ var Form = function Form(props) {
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     handleFormModalInfo();
   }, [props.disabled, props.pending]);
-  var rootClass = classnames_default()([formClasses === null || formClasses === void 0 ? void 0 : formClasses.wrapper, className, props.inline && (formClasses === null || formClasses === void 0 ? void 0 : formClasses.wrapperInline)]);
+  var rootClass = classnames_default()([formClasses === null || formClasses === void 0 ? void 0 : formClasses.rootClass, formClasses === null || formClasses === void 0 ? void 0 : formClasses.wrapper, className, props.inline && (formClasses === null || formClasses === void 0 ? void 0 : formClasses.wrapperInline)]);
   return /*#__PURE__*/(0,jsx_runtime.jsx)("form", objectSpread2_default()(objectSpread2_default()({}, getFormProps({
     className: rootClass,
     style: style
@@ -47903,6 +48211,7 @@ var UseFormItem = function UseFormItem() {
 
 
 
+var tooltip_devUseWarning = devUseWarning;
 var defaultDelay = 0;
 var Tooltip = function Tooltip(props) {
   var _jssStyle$tooltip;
@@ -47916,11 +48225,11 @@ var Tooltip = function Tooltip(props) {
     className = props.className,
     style = props.style,
     zIndex = props.zIndex,
+    persistent = props.persistent,
     _props$type = props.type,
     type = _props$type === void 0 ? 'default' : _props$type,
     _props$position = props.position,
     popsitionProps = _props$position === void 0 ? 'auto' : _props$position;
-  var arrowStyleRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({});
   var tooltipClasses = jssStyle === null || jssStyle === void 0 || (_jssStyle$tooltip = jssStyle.tooltip) === null || _jssStyle$tooltip === void 0 ? void 0 : _jssStyle$tooltip.call(jssStyle);
   var config = useConfig();
   var childrenProps = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.isValidElement)(children) ? children === null || children === void 0 ? void 0 : children.props : {};
@@ -47938,9 +48247,34 @@ var Tooltip = function Tooltip(props) {
     getTargetProps = _usePopup.getTargetProps,
     targetRef = _usePopup.targetRef,
     popupRef = _usePopup.popupRef,
-    arrowRef = _usePopup.arrowRef;
+    arrowRef = _usePopup.arrowRef,
+    closePop = _usePopup.closePop;
+  var events = getTargetProps();
+  var bindEvents = function bindEvents() {
+    var targetEl = targetRef.current;
+    if (!targetEl) return;
+    if (events.onMouseEnter) targetEl.addEventListener('mouseenter', events.onMouseEnter);
+    if (events.onMouseLeave) targetEl.addEventListener('mouseleave', events.onMouseLeave);
+    if (events.onClick) targetEl.addEventListener('click', events.onClick);
+  };
+  var unbindEvents = function unbindEvents() {
+    var targetEl = targetRef.current;
+    if (!targetEl) return;
+    var events = getTargetProps();
+    if (events.onMouseEnter) targetEl.removeEventListener('mouseenter', events.onMouseEnter);
+    if (events.onMouseLeave) targetEl.removeEventListener('mouseleave', events.onMouseLeave);
+    if (events.onClick) targetEl.removeEventListener('click', events.onClick);
+    targetEl.removeEventListener('click', closePop);
+  };
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (!persistent) return;
+    bindEvents();
+    return function () {
+      unbindEvents();
+    };
+  }, [persistent]);
   if (! /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.isValidElement)(children)) {
-    console.error(new Error('Tooltip children expect a single ReactElement.'));
+    tooltip_devUseWarning.error('Tooltip children expect a single ReactElement.');
     return null;
   }
   if (!tip) return children;
@@ -47955,7 +48289,6 @@ var Tooltip = function Tooltip(props) {
       })
     })
   }) : children;
-  var events = getTargetProps();
   return /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
     children: [/*#__PURE__*/(0,jsx_runtime.jsx)("noscript", {
       ref: function ref(el) {
@@ -47969,17 +48302,18 @@ var Tooltip = function Tooltip(props) {
       focus: open,
       parentElRef: targetRef,
       popupElRef: popupRef,
-      arrowRef: arrowRef,
       absolute: true,
-      adjust: popsitionProps === 'auto',
       position: position,
       fixedWidth: false,
-      popupGap: 0
-      // arrowStyleRef={arrowStyleRef}
-      ,
+      popupGap: 0,
       zIndex: zIndex,
+      adjust: popsitionProps === 'auto',
+      arrowRef: arrowRef,
       children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({
-        className: classnames_default()(className, tooltipClasses === null || tooltipClasses === void 0 ? void 0 : tooltipClasses.wrapper, open && (tooltipClasses === null || tooltipClasses === void 0 ? void 0 : tooltipClasses.wrapperOpen))
+        className: classnames_default()(className, tooltipClasses === null || tooltipClasses === void 0 ? void 0 : tooltipClasses.rootClass, tooltipClasses === null || tooltipClasses === void 0 ? void 0 : tooltipClasses.wrapper, open && (tooltipClasses === null || tooltipClasses === void 0 ? void 0 : tooltipClasses.wrapperOpen)),
+        style: {
+          pointerEvents: persistent ? 'initial' : undefined
+        }
       }, getDataAttribute({
         type: type,
         position: position
@@ -47989,7 +48323,6 @@ var Tooltip = function Tooltip(props) {
         dir: config.direction,
         children: [/*#__PURE__*/(0,jsx_runtime.jsx)("span", objectSpread2_default()({
           ref: arrowRef,
-          style: arrowStyleRef.current,
           className: tooltipClasses === null || tooltipClasses === void 0 ? void 0 : tooltipClasses.arrow
         }, getDataAttribute({
           role: 'arrow'
@@ -48018,7 +48351,7 @@ var form_item_excluded = ["children", "jssStyle", "className", "style", "label",
 
 
 
-/* harmony default export */ var form_form_item = (function (props) {
+var FormItem = function FormItem(props) {
   var _jssStyle$formItem;
   var children = props.children,
     jssStyle = props.jssStyle,
@@ -48105,7 +48438,8 @@ var form_item_excluded = ["children", "jssStyle", "className", "style", "label",
       })]
     }))]
   }));
-});
+};
+/* harmony default export */ var form_form_item = (FormItem);
 ;// CONCATENATED MODULE: ./src/form/form-item.tsx
 
 
@@ -48131,6 +48465,7 @@ var form_item_jssStyle = {
 ;// CONCATENATED MODULE: ../hooks/src/components/use-form/use-form-fieldset/use-form-fieldset.ts
 
 
+
 var emptyFunc = function emptyFunc() {};
 var emptyArr = [];
 var useFormFieldSet = function useFormFieldSet(props) {
@@ -48150,7 +48485,7 @@ var useFormFieldSet = function useFormFieldSet(props) {
     onChange = _useFormControl.onChange,
     name = _useFormControl.name;
   if (!inForm) {
-    console.error('[FieldSet] should render in Form');
+    devUseWarning.error('[FieldSet] should render in Form');
   }
   var ProviderValue = {
     path: name,
@@ -48466,7 +48801,7 @@ var Gap = function Gap(props) {
     marginRight: column
   });
   return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-    className: classnames_default()(className, styles === null || styles === void 0 ? void 0 : styles.wrapper),
+    className: classnames_default()(className, styles === null || styles === void 0 ? void 0 : styles.rootClass, styles === null || styles === void 0 ? void 0 : styles.wrapper),
     style: objectSpread2_default()(objectSpread2_default()({}, extendStyle), style),
     children: external_root_React_commonjs2_react_commonjs_react_amd_react_default().Children.map(children, function (child) {
       return child && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
@@ -48655,6 +48990,7 @@ var icon_excluded = ["children", "prefix", "name", "fontFamily", "fontSize", "ex
 
 
 
+var icon_devUseWarning = devUseWarning;
 function Icon() {
   var _jssStyle$icon;
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
@@ -48676,7 +49012,7 @@ function Icon() {
     type = undefined;
   }
   var iconClasses = jssStyle === null || jssStyle === void 0 || (_jssStyle$icon = jssStyle.icon) === null || _jssStyle$icon === void 0 ? void 0 : _jssStyle$icon.call(jssStyle);
-  var className = classnames_default()(iconClasses === null || iconClasses === void 0 ? void 0 : iconClasses.wrapper, iconClasses === null || iconClasses === void 0 ? void 0 : iconClasses[type], props.className, "".concat(prefix, "-").concat(name));
+  var className = classnames_default()(iconClasses === null || iconClasses === void 0 ? void 0 : iconClasses.rootClass, iconClasses === null || iconClasses === void 0 ? void 0 : iconClasses.wrapper, iconClasses === null || iconClasses === void 0 ? void 0 : iconClasses[type], props.className, "".concat(prefix, "-").concat(name));
   var style = Object.assign({}, {
     fontFamily: fontFamily,
     fontSize: fontSize
@@ -48706,7 +49042,7 @@ function makeIcon(url) {
   var fontFamily = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'iconfont';
   var prefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'icon';
   if (typeof url !== 'string') {
-    console.error("Shineout Icon url must be a string, but get ".concat(url));
+    icon_devUseWarning.error("Shineout Icon url must be a string, but get ".concat(url));
     return null;
   }
   var ext = url.substr(url.lastIndexOf('.') + 1);
@@ -48753,6 +49089,7 @@ function icon_icon_icon() {
     }));
   };
   ShineoutIcon.displayName = 'ShineoutIcon';
+  ShineoutIcon.isShineoutIcon = true;
   return ShineoutIcon;
 }
 ;// CONCATENATED MODULE: ./src/icon/index.ts
@@ -49641,7 +49978,7 @@ var Image = function Image(props) {
     }),
     onClick: onClick
   }, rest));
-  var rootClass = classnames_default()(className, imageStyle.image, defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()({}, imageStyle.href, !!href), imageStyle.fit, fit === 'fit'), imageStyle.fill, fit === 'fill'), imageStyle.center, fit === 'center'), imageStyle.stretch, fit === 'stretch'), imageStyle.circle, shape === 'circle'), imageStyle.rounded, shape === 'rounded'), imageStyle.thumbnail, shape === 'thumbnail'), imageStyle.preview, shouldPreview), imageStyle.download, shouldDownload));
+  var rootClass = classnames_default()(className, imageStyle.rootClass, imageStyle.image, defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()({}, imageStyle.href, !!href), imageStyle.fit, fit === 'fit'), imageStyle.fill, fit === 'fill'), imageStyle.center, fit === 'center'), imageStyle.stretch, fit === 'stretch'), imageStyle.circle, shape === 'circle'), imageStyle.rounded, shape === 'rounded'), imageStyle.thumbnail, shape === 'thumbnail'), imageStyle.preview, shouldPreview), imageStyle.download, shouldDownload));
   var imgClass = classnames_default()(imageStyle.img);
   var imgInnerClass = classnames_default()(imageStyle.inner);
   var placeholderClass = classnames_default()(imageStyle.placeholder);
@@ -51676,6 +52013,7 @@ var tree_excluded = ["jssStyle", "line", "childrenKey", "data", "value", "mode",
 
 
 
+
 var tree_produce = utils_immer_produce;
 var Tree = function Tree(props) {
   var jssStyle = props.jssStyle,
@@ -51763,7 +52101,7 @@ var Tree = function Tree(props) {
     expanded = _useTree.expanded,
     onExpand = _useTree.onExpand;
   var treeStyle = (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.tree()) || {};
-  var rootClass = classnames_default()(treeStyle.tree, className, defineProperty_default()(defineProperty_default()({}, treeStyle.line, line), treeStyle.noline, !line));
+  var rootClass = classnames_default()(treeStyle.rootClass, treeStyle.tree, className, defineProperty_default()(defineProperty_default()({}, treeStyle.line, line), treeStyle.noline, !line));
   var getDragImageSelector = function getDragImageSelector(data) {
     if (isFunc(dragImageSelector)) return dragImageSelector(data);
     return dragImageSelector;
@@ -51873,8 +52211,11 @@ var Tree = function Tree(props) {
     if (getDatum) getDatum(datum);
     context.mounted = true;
   }, []);
+  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(FormFieldContext),
+    fieldId = _useContext.fieldId;
   return /*#__PURE__*/(0,jsx_runtime.jsx)("div", objectSpread2_default()(objectSpread2_default()({
-    className: rootClass
+    className: rootClass,
+    id: fieldId
   }, rest), {}, {
     children: /*#__PURE__*/(0,jsx_runtime.jsx)(tree_context_Provider, {
       value: datum,
@@ -51998,6 +52339,7 @@ var simple_radio_excluded = ["jssStyle", "className", "style", "children", "rend
 
 
 
+
 var Radio = function Radio(props) {
   var _jssStyle$radio;
   var jssStyle = props.jssStyle,
@@ -52008,6 +52350,8 @@ var Radio = function Radio(props) {
     size = props.size,
     theme = props.theme,
     rest = objectWithoutProperties_default()(props, simple_radio_excluded);
+  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(FormFieldContext),
+    fieldId = _useContext.fieldId;
   var radioClasses = jssStyle === null || jssStyle === void 0 || (_jssStyle$radio = jssStyle.radio) === null || _jssStyle$radio === void 0 ? void 0 : _jssStyle$radio.call(jssStyle);
   var _useCheck = use_check(objectSpread2_default()({}, rest)),
     getRootProps = _useCheck.getRootProps,
@@ -52015,7 +52359,7 @@ var Radio = function Radio(props) {
     getInputProps = _useCheck.getInputProps,
     disabled = _useCheck.disabled,
     checked = _useCheck.checked;
-  var rootClass = classnames_default()([radioClasses === null || radioClasses === void 0 ? void 0 : radioClasses.wrapper, className, !!disabled && (radioClasses === null || radioClasses === void 0 ? void 0 : radioClasses.wrapperDisabled), !!checked && (radioClasses === null || radioClasses === void 0 ? void 0 : radioClasses.wrapperChecked), size === 'small' && (radioClasses === null || radioClasses === void 0 ? void 0 : radioClasses.wrapperSmall), size === 'large' && (radioClasses === null || radioClasses === void 0 ? void 0 : radioClasses.wrapperLarge)]);
+  var rootClass = classnames_default()([radioClasses === null || radioClasses === void 0 ? void 0 : radioClasses.rootClass, radioClasses === null || radioClasses === void 0 ? void 0 : radioClasses.wrapper, className, !!disabled && (radioClasses === null || radioClasses === void 0 ? void 0 : radioClasses.wrapperDisabled), !!checked && (radioClasses === null || radioClasses === void 0 ? void 0 : radioClasses.wrapperChecked), size === 'small' && (radioClasses === null || radioClasses === void 0 ? void 0 : radioClasses.wrapperSmall), size === 'large' && (radioClasses === null || radioClasses === void 0 ? void 0 : radioClasses.wrapperLarge)]);
   var indicatorClass = classnames_default()(radioClasses === null || radioClasses === void 0 ? void 0 : radioClasses.indicatorWrapper, theme === 'dark' && (radioClasses === null || radioClasses === void 0 ? void 0 : radioClasses.darkIndicatorWrapper));
   var inputProps = getInputProps();
   var rootProps = getRootProps({
@@ -52023,7 +52367,9 @@ var Radio = function Radio(props) {
     style: style
   });
   var indicatorProps = getIndicatorProps();
-  var simpleRadio = /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({}, rootProps), {}, {
+  var simpleRadio = /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({
+    id: fieldId
+  }, rootProps), {}, {
     children: [/*#__PURE__*/(0,jsx_runtime.jsx)("input", objectSpread2_default()(objectSpread2_default()({}, inputProps), {}, {
       type: "radio"
     })), /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
@@ -52321,6 +52667,7 @@ var ColumnsList = function ColumnsList(props) {
 
 
 
+
 
 
 function Select(props0) {
@@ -52597,7 +52944,7 @@ function Select(props0) {
     rootRef: targetRef,
     jssStyle: props.jssStyle
   });
-  var rootClass = classnames_default()(className, isEmpty && styles.wrapperEmpty, styles === null || styles === void 0 ? void 0 : styles.wrapper, open && (styles === null || styles === void 0 ? void 0 : styles.wrapperOpen), open && trigger === 'hover' && (styles === null || styles === void 0 ? void 0 : styles.triggerHover), disabled === true && (styles === null || styles === void 0 ? void 0 : styles.wrapperDisabled), disabled !== true && focused && (styles === null || styles === void 0 ? void 0 : styles.wrapperFocus), innerTitle && (styles === null || styles === void 0 ? void 0 : styles.wrapperInnerTitle), size === 'small' && (styles === null || styles === void 0 ? void 0 : styles.wrapperSmall), size === 'large' && (styles === null || styles === void 0 ? void 0 : styles.wrapperLarge), (!!props.error || props.status === 'error') && (styles === null || styles === void 0 ? void 0 : styles.wrapperError), clearable && (styles === null || styles === void 0 ? void 0 : styles.clearable), !border && (styles === null || styles === void 0 ? void 0 : styles.wrapperNoBorder), !!underline && (styles === null || styles === void 0 ? void 0 : styles.wrapperUnderline), defineProperty_default()({}, styles === null || styles === void 0 ? void 0 : styles.multiple, multiple));
+  var rootClass = classnames_default()(className, styles === null || styles === void 0 ? void 0 : styles.rootClass, styles === null || styles === void 0 ? void 0 : styles.wrapper, isEmpty && styles.wrapperEmpty, open && (styles === null || styles === void 0 ? void 0 : styles.wrapperOpen), open && trigger === 'hover' && (styles === null || styles === void 0 ? void 0 : styles.triggerHover), disabled === true && (styles === null || styles === void 0 ? void 0 : styles.wrapperDisabled), disabled !== true && focused && (styles === null || styles === void 0 ? void 0 : styles.wrapperFocus), innerTitle && (styles === null || styles === void 0 ? void 0 : styles.wrapperInnerTitle), size === 'small' && (styles === null || styles === void 0 ? void 0 : styles.wrapperSmall), size === 'large' && (styles === null || styles === void 0 ? void 0 : styles.wrapperLarge), (!!props.error || props.status === 'error') && (styles === null || styles === void 0 ? void 0 : styles.wrapperError), clearable && (styles === null || styles === void 0 ? void 0 : styles.clearable), !border && (styles === null || styles === void 0 ? void 0 : styles.wrapperNoBorder), !!underline && (styles === null || styles === void 0 ? void 0 : styles.wrapperUnderline), defineProperty_default()({}, styles === null || styles === void 0 ? void 0 : styles.multiple, multiple));
   var getRenderItem = function getRenderItem(data, index) {
     return typeof renderItemProp === 'function' ? renderItemProp(data, index) : data[renderItemProp];
   };
@@ -52793,6 +53140,8 @@ function Select(props0) {
       children: defaultIcon
     });
   };
+  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(FormFieldContext),
+    fieldId = _useContext.fieldId;
   var renderResult = function renderResult() {
     var result = /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
       className: classnames_default()(styles === null || styles === void 0 ? void 0 : styles.result),
@@ -52838,6 +53187,7 @@ function Select(props0) {
     return /*#__PURE__*/(0,jsx_runtime.jsx)(PopupProvider, {
       value: popupProviderValue,
       children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+        id: fieldId,
         className: classnames_default()(styles === null || styles === void 0 ? void 0 : styles.resultWrapper, styles === null || styles === void 0 ? void 0 : styles.wrapperPaddingBox, styles === null || styles === void 0 ? void 0 : styles.wrapperInnerTitleTop, styles === null || styles === void 0 ? void 0 : styles.wrapperInnerTitleBottom),
         onClick: handleResultClick,
         children: [renderInnerTitle(result), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
@@ -53628,7 +53978,7 @@ var Pagination = function Pagination(props) {
     current = _usePagination.current,
     pageSize = _usePagination.pageSize;
   var paginationStyle = jssStyle === null || jssStyle === void 0 || (_jssStyle$pagination = jssStyle.pagination) === null || _jssStyle$pagination === void 0 ? void 0 : _jssStyle$pagination.call(jssStyle);
-  var rootClasses = classnames_default()(className, paginationStyle === null || paginationStyle === void 0 ? void 0 : paginationStyle.pagination, align === 'left' && (paginationStyle === null || paginationStyle === void 0 ? void 0 : paginationStyle.left), align === 'center' && (paginationStyle === null || paginationStyle === void 0 ? void 0 : paginationStyle.center), align === 'right' && (paginationStyle === null || paginationStyle === void 0 ? void 0 : paginationStyle.right), size === 'small' && (paginationStyle === null || paginationStyle === void 0 ? void 0 : paginationStyle.small), size === 'large' && (paginationStyle === null || paginationStyle === void 0 ? void 0 : paginationStyle.large));
+  var rootClasses = classnames_default()(className, paginationStyle === null || paginationStyle === void 0 ? void 0 : paginationStyle.rootClass, paginationStyle === null || paginationStyle === void 0 ? void 0 : paginationStyle.pagination, align === 'left' && (paginationStyle === null || paginationStyle === void 0 ? void 0 : paginationStyle.left), align === 'center' && (paginationStyle === null || paginationStyle === void 0 ? void 0 : paginationStyle.center), align === 'right' && (paginationStyle === null || paginationStyle === void 0 ? void 0 : paginationStyle.right), size === 'small' && (paginationStyle === null || paginationStyle === void 0 ? void 0 : paginationStyle.small), size === 'large' && (paginationStyle === null || paginationStyle === void 0 ? void 0 : paginationStyle.large));
   var getRootProps = function getRootProps() {
     return {
       style: style
@@ -53898,7 +54248,7 @@ var list_list_List = function List(props) {
       }), renderFooter()]
     });
   };
-  var wrapperClass = classnames_default()(props.className, listClasses === null || listClasses === void 0 ? void 0 : listClasses.wrapper, isEmpty && (listClasses === null || listClasses === void 0 ? void 0 : listClasses.wrapperEmpty), props.bordered && (listClasses === null || listClasses === void 0 ? void 0 : listClasses.wrapperBordered), props.size === 'small' && (listClasses === null || listClasses === void 0 ? void 0 : listClasses.wrapperSmall), props.size === 'large' && (listClasses === null || listClasses === void 0 ? void 0 : listClasses.wrapperLarge), props.striped && (listClasses === null || listClasses === void 0 ? void 0 : listClasses.wrapperStriped));
+  var wrapperClass = classnames_default()(props.className, listClasses === null || listClasses === void 0 ? void 0 : listClasses.rootClass, listClasses === null || listClasses === void 0 ? void 0 : listClasses.wrapper, isEmpty && (listClasses === null || listClasses === void 0 ? void 0 : listClasses.wrapperEmpty), props.bordered && (listClasses === null || listClasses === void 0 ? void 0 : listClasses.wrapperBordered), props.size === 'small' && (listClasses === null || listClasses === void 0 ? void 0 : listClasses.wrapperSmall), props.size === 'large' && (listClasses === null || listClasses === void 0 ? void 0 : listClasses.wrapperLarge), props.striped && (listClasses === null || listClasses === void 0 ? void 0 : listClasses.wrapperStriped));
   var wrapperStyle = objectSpread2_default()(objectSpread2_default()({}, props.style), {}, {
     height: props.height
   });
@@ -54619,7 +54969,7 @@ var Menu = function Menu(props) {
     }
   }, [data, openKeys]);
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({
-    className: classnames_default()(props.className, classes === null || classes === void 0 ? void 0 : classes.wrapper, mode === 'inline' && (classes === null || classes === void 0 ? void 0 : classes.wrapperInline), (mode === 'vertical' || mode === 'vertical-auto') && (classes === null || classes === void 0 ? void 0 : classes.wrapperVertical), mode === 'horizontal' && (classes === null || classes === void 0 ? void 0 : classes.wrapperHorizontal), hasOpen && (classes === null || classes === void 0 ? void 0 : classes.wrapperHasOpen), theme === 'dark' ? classes === null || classes === void 0 ? void 0 : classes.wrapperDark : classes === null || classes === void 0 ? void 0 : classes.wrapperLight, collapse && (classes === null || classes === void 0 ? void 0 : classes.wrapperCollapse), context.inTransition && (classes === null || classes === void 0 ? void 0 : classes.wrapperInTransition))
+    className: classnames_default()(props.className, classes === null || classes === void 0 ? void 0 : classes.rootClass, classes === null || classes === void 0 ? void 0 : classes.wrapper, mode === 'inline' && (classes === null || classes === void 0 ? void 0 : classes.wrapperInline), (mode === 'vertical' || mode === 'vertical-auto') && (classes === null || classes === void 0 ? void 0 : classes.wrapperVertical), mode === 'horizontal' && (classes === null || classes === void 0 ? void 0 : classes.wrapperHorizontal), hasOpen && (classes === null || classes === void 0 ? void 0 : classes.wrapperHasOpen), theme === 'dark' ? classes === null || classes === void 0 ? void 0 : classes.wrapperDark : classes === null || classes === void 0 ? void 0 : classes.wrapperLight, collapse && (classes === null || classes === void 0 ? void 0 : classes.wrapperCollapse), context.inTransition && (classes === null || classes === void 0 ? void 0 : classes.wrapperInTransition))
   }, getDataAttribute({
     theme: theme,
     mode: isVertical ? 'vertical' : mode
@@ -54818,7 +55168,7 @@ var MessagePure = function MessagePure(props) {
     return styles;
   };
   return /*#__PURE__*/(0,jsx_runtime.jsx)("div", objectSpread2_default()(objectSpread2_default()({
-    className: styles === null || styles === void 0 ? void 0 : styles.wrapper
+    className: classnames_default()(styles === null || styles === void 0 ? void 0 : styles.rootClass, styles === null || styles === void 0 ? void 0 : styles.wrapper)
   }, message_getDataAttribute({
     position: position
   })), {}, {
@@ -55159,14 +55509,25 @@ src_pagination_pagination_0.displayName = 'ShineoutPagination';
 
 
 
+
+var popover_devUseWarning = devUseWarning;
 var popover_jssStyle = {
   popover: usePopoverStyle
 };
-/* harmony default export */ var src_popover_popover_0 = (function (props) {
+var IPopover = function IPopover(props) {
   return /*#__PURE__*/(0,jsx_runtime.jsx)(src_popover_popover, objectSpread2_default()({
     jssStyle: popover_jssStyle
   }, props));
-});
+};
+var IPopoverContent = function IPopoverContent(props) {
+  popover_devUseWarning.deprecated('Popover.Content', 'useTextStyle', 'Popover');
+  return /*#__PURE__*/(0,jsx_runtime.jsx)(src_popover_popover, objectSpread2_default()(objectSpread2_default()({
+    jssStyle: popover_jssStyle
+  }, props), {}, {
+    useTextStyle: true
+  }));
+};
+/* harmony default export */ var src_popover_popover_0 = (IPopover);
 ;// CONCATENATED MODULE: ../base/src/popover/confirm.tsx
 
 
@@ -55305,6 +55666,7 @@ ConfirmComp.displayName = 'ShineoutPopoverConfirm';
 var PopoverComp = src_popover_popover_0;
 PopoverComp.displayName = 'ShineoutPopover';
 PopoverComp.Confirm = ConfirmComp;
+PopoverComp.Content = IPopoverContent;
 /* harmony default export */ var src_popover_0 = (PopoverComp);
 ;// CONCATENATED MODULE: ../base/src/progress/analyzeColor.ts
 /* harmony default export */ var analyzeColor = (function (color) {
@@ -55386,7 +55748,7 @@ var Line = function Line(props) {
     width: iconSize,
     height: iconSize
   };
-  var mc = classnames_default()(props.className, progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.line, progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapper, type === 'success' && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapperSuccess), type === 'info' && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapperInfo), type === 'warning' && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapperWarning), type === 'danger' && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapperDanger), isDefault && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.lineDefault), isDefaultPop && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.linePop), isInner && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.lineInner), isInnerRight && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.lineInnerRight));
+  var mc = classnames_default()(props.className, progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.rootClass, progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.line, progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapper, type === 'success' && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapperSuccess), type === 'info' && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapperInfo), type === 'warning' && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapperWarning), type === 'danger' && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapperDanger), isDefault && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.lineDefault), isDefaultPop && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.linePop), isInner && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.lineInner), isInnerRight && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.lineInnerRight));
   var bgStyle = {
     height: props.strokeWidth,
     background: props.background,
@@ -55471,7 +55833,7 @@ var Circle = function Circle(props) {
   }, props.style);
   var width = value === 0 && strokeLinecap === 'round' ? 0 : strokeWidth;
   var objColor = color && typeof_default()(color) === 'object';
-  var mc = classnames_default()(props.className, progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.circle, progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapper, type === 'success' && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapperSuccess), type === 'info' && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapperInfo), type === 'warning' && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapperWarning), type === 'danger' && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapperDanger));
+  var mc = classnames_default()(props.className, progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.rootClass, progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.circle, progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapper, type === 'success' && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapperSuccess), type === 'info' && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapperInfo), type === 'warning' && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapperWarning), type === 'danger' && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapperDanger));
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
     className: mc,
     style: style,
@@ -55531,9 +55893,14 @@ var Circle = function Circle(props) {
 
 
 
+
+var progress_devUseWarning = devUseWarning;
 var Progress = function Progress(props) {
   var _props$shape = props.shape,
     shape = _props$shape === void 0 ? 'line' : _props$shape;
+  if (props.popup) {
+    progress_devUseWarning.deprecated('popup', 'shape="line-pop"', 'Progress');
+  }
   if (shape.indexOf('circle') > -1) {
     return /*#__PURE__*/(0,jsx_runtime.jsx)(circle, objectSpread2_default()({}, props));
   }
@@ -55666,6 +56033,7 @@ var useListSelectSingle = function useListSelectSingle(props) {
 
 
 
+
 var radio_group_defaultFormat = function defaultFormat(d) {
   return d;
 };
@@ -55679,6 +56047,8 @@ var radio_group_Group = function Group(props0) {
     _props0$renderItem = props0.renderItem,
     renderItem = _props0$renderItem === void 0 ? radio_group_defaultRenderItem : _props0$renderItem;
   var props = use_with_form_config(props0);
+  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(FormFieldContext),
+    fieldId = _useContext.fieldId;
   var children = props.children,
     className = props.className,
     button = props.button,
@@ -55782,11 +56152,13 @@ var radio_group_Group = function Group(props0) {
     jssStyle: jssStyle,
     className: groupClass,
     style: style,
+    id: fieldId,
     children: Radios
   });
   return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
     className: groupClass,
     style: style,
+    id: fieldId,
     children: Radios
   });
 };
@@ -55828,10 +56200,13 @@ src_radio_radio_0.Group = RadioGroup;
 
 
 
+
 var Rate = function Rate(props0) {
   var _props$jssStyle, _props$jssStyle$rate;
   var props = use_with_form_config(props0);
   var config = useConfig();
+  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(FormFieldContext),
+    fieldId = _useContext.fieldId;
   var size = props0.size;
   var _props$max = props.max,
     max = _props$max === void 0 ? 5 : _props$max,
@@ -55915,7 +56290,8 @@ var Rate = function Rate(props0) {
   };
   var text = Array.isArray(props.text) && props.text[Math.ceil(value - 1)];
   return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-    className: classnames_default()(props.className, rateClasses === null || rateClasses === void 0 ? void 0 : rateClasses.wrapper),
+    className: classnames_default()(props.className, rateClasses === null || rateClasses === void 0 ? void 0 : rateClasses.rootClass, rateClasses === null || rateClasses === void 0 ? void 0 : rateClasses.wrapper),
+    id: fieldId,
     style: props.style,
     onMouseLeave: function onMouseLeave() {
       setHoverValue(null);
@@ -55992,6 +56368,7 @@ var requiredMessage = function requiredMessage(props) {
 
 
 
+
 var length_createMessage = function createMessage(key) {
   return function (props) {
     var lt = '';
@@ -56021,7 +56398,7 @@ var lengthMessage = {
     message = _ref.message;
   return function (len, msg) {
     if (typeof len !== 'number') {
-      console.error(new Error("Rule \"".concat(key, "\" param expect a number, get ").concat(typeof_default()(len))));
+      devUseWarning.error("Rule \"".concat(key, "\" param expect a number, get ").concat(typeof_default()(len)));
       return null;
     }
     return deepMerge({
@@ -56060,6 +56437,7 @@ var type_options = {
 ;// CONCATENATED MODULE: ../hooks/src/utils/rule/regexp.ts
 
 
+
 var regexp_options = {
   skipUndefined: true
 };
@@ -56068,7 +56446,7 @@ var regexp_options = {
     message = _ref.message;
   return function (regExp, msg) {
     if (typeof regExp !== 'string' && !(regExp instanceof RegExp)) {
-      console.error(new Error("Rule \"reg\" param expect a RegExp object or a string, get ".concat(typeof_default()(regExp))));
+      devUseWarning.error("Rule \"reg\" param expect a RegExp object or a string, get ".concat(typeof_default()(regExp)));
       return null;
     }
     return deepMerge({
@@ -56089,12 +56467,13 @@ var regexp_options = {
 
 
 
+
 var RULE_TYPE = 'RULE_OBJECT';
 var innerType = ['email', 'integer', 'number', 'url', 'json', 'hex', 'rgb', 'ipv4'];
 var mergeOptions = function mergeOptions() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   if (!is_isObject(opts)) {
-    console.error(new Error("rules expect an object, got ".concat(typeof_default()(opts))));
+    devUseWarning.error("rules expect an object, got ".concat(typeof_default()(opts)));
     return {};
   }
   for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -56143,7 +56522,7 @@ function Rule() {
           });
         };
       } else {
-        console.error(new Error("Rule ".concat(k, " is invalid, expect a function or an object.")));
+        devUseWarning.error("Rule ".concat(k, " is invalid, expect a function or an object."));
       }
     }
   });
@@ -56371,12 +56750,15 @@ var useSlider = function useSlider(props) {
 
 
 
+
 var defaultScale = [0, 100];
 var Slider = function Slider(props0) {
   var _props$jssStyle, _props$jssStyle$slide;
   var props = use_with_form_config(props0);
   var sliderClasses = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 || (_props$jssStyle$slide = _props$jssStyle.slider) === null || _props$jssStyle$slide === void 0 ? void 0 : _props$jssStyle$slide.call(_props$jssStyle);
   var config = useConfig();
+  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(FormFieldContext),
+    fieldId = _useContext.fieldId;
   var _props$scale = props.scale,
     scale = _props$scale === void 0 ? defaultScale : _props$scale,
     _props$step = props.step,
@@ -56444,7 +56826,8 @@ var Slider = function Slider(props0) {
     height: height
   } : {};
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-    className: classnames_default()(sliderClasses === null || sliderClasses === void 0 ? void 0 : sliderClasses.wrapper, props.autoHide && (sliderClasses === null || sliderClasses === void 0 ? void 0 : sliderClasses.autoHide), props.disabled && (sliderClasses === null || sliderClasses === void 0 ? void 0 : sliderClasses.disabled), props.vertical && (sliderClasses === null || sliderClasses === void 0 ? void 0 : sliderClasses.vertical), props.className),
+    id: fieldId,
+    className: classnames_default()(sliderClasses === null || sliderClasses === void 0 ? void 0 : sliderClasses.rootClass, sliderClasses === null || sliderClasses === void 0 ? void 0 : sliderClasses.wrapper, props.autoHide && (sliderClasses === null || sliderClasses === void 0 ? void 0 : sliderClasses.autoHide), props.disabled && (sliderClasses === null || sliderClasses === void 0 ? void 0 : sliderClasses.disabled), props.vertical && (sliderClasses === null || sliderClasses === void 0 ? void 0 : sliderClasses.vertical), props.className),
     style: objectSpread2_default()(objectSpread2_default()({}, verticalStyle), props.style),
     children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
       className: sliderClasses === null || sliderClasses === void 0 ? void 0 : sliderClasses.track,
@@ -56848,7 +57231,7 @@ var Steps = function Steps(props) {
   };
   var labelPlacement = getLabelPlacement();
   var styles = (jssStyle === null || jssStyle === void 0 || (_jssStyle$steps = jssStyle.steps) === null || _jssStyle$steps === void 0 ? void 0 : _jssStyle$steps.call(jssStyle)) || {};
-  var rootClass = classnames_default()(styles.steps, className, defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()({}, styles[type], type), styles.small, size === 'small'), styles.large, size === 'large'), styles.vertical, direction === 'vertical'), styles.horizontal, direction === 'horizontal'), styles.click, onChange !== undefined));
+  var rootClass = classnames_default()(styles.rootClass, styles.steps, className, defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()({}, styles[type], type), styles.small, size === 'small'), styles.large, size === 'large'), styles.vertical, direction === 'vertical'), styles.horizontal, direction === 'horizontal'), styles.click, onChange !== undefined));
   var renderStep = function renderStep() {
     return external_root_React_commonjs2_react_commonjs_react_amd_react_.Children.map(children, function (child, index) {
       var Child = child;
@@ -56925,7 +57308,8 @@ StepsComp.Step = StepsStep;
 
 
 
-var sticky_cssSupport = cssSupport;
+var sticky_cssSupport = cssSupport,
+  sticky_devUseWarning = devUseWarning;
 var supportSticky = sticky_cssSupport('position', 'sticky');
 var defaultZIndex = 900;
 var events = ['scroll', 'pageshow', 'load', 'resize'];
@@ -56947,6 +57331,9 @@ var events = ['scroll', 'pageshow', 'load', 'resize'];
 // };
 
 var Sticky = function Sticky(props) {
+  if (props.target) {
+    sticky_devUseWarning.deprecated('target', 'scrollContainer', 'Sticky');
+  }
   var children = props.children,
     top = props.top,
     bottom = props.bottom;
@@ -57345,6 +57732,7 @@ StickyComp.displayName = 'ShineoutSticky';
 
 
 
+
 var Switch = function Switch(props0) {
   var _jssStyle$switch;
   var props = use_with_form_config(props0);
@@ -57355,6 +57743,8 @@ var Switch = function Switch(props0) {
     className = props.className,
     style = props.style;
   var config = useConfig();
+  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(FormFieldContext),
+    fieldId = _useContext.fieldId;
   var switchClasses = jssStyle === null || jssStyle === void 0 || (_jssStyle$switch = jssStyle.switch) === null || _jssStyle$switch === void 0 ? void 0 : _jssStyle$switch.call(jssStyle);
   var disabled = props.disabled || props.loading;
   var _useInputAble = useInputAble({
@@ -57386,7 +57776,7 @@ var Switch = function Switch(props0) {
     _ref2 = slicedToArray_default()(_ref, 2),
     checkedContent = _ref2[0],
     unCheckedContent = _ref2[1];
-  var rootClassName = classnames_default()(className, switchClasses === null || switchClasses === void 0 ? void 0 : switchClasses.wrapper, !!checked && (switchClasses === null || switchClasses === void 0 ? void 0 : switchClasses.wrapperChecked), disabled && (switchClasses === null || switchClasses === void 0 ? void 0 : switchClasses.wrapperDisabled), size === 'small' && (switchClasses === null || switchClasses === void 0 ? void 0 : switchClasses.wrapperSmall), size === 'large' && (switchClasses === null || switchClasses === void 0 ? void 0 : switchClasses.wrapperLarge));
+  var rootClassName = classnames_default()(className, switchClasses === null || switchClasses === void 0 ? void 0 : switchClasses.rootClass, switchClasses === null || switchClasses === void 0 ? void 0 : switchClasses.wrapper, !!checked && (switchClasses === null || switchClasses === void 0 ? void 0 : switchClasses.wrapperChecked), disabled && (switchClasses === null || switchClasses === void 0 ? void 0 : switchClasses.wrapperDisabled), size === 'small' && (switchClasses === null || switchClasses === void 0 ? void 0 : switchClasses.wrapperSmall), size === 'large' && (switchClasses === null || switchClasses === void 0 ? void 0 : switchClasses.wrapperLarge));
   var rootProps = getRootProps({
     className: rootClassName,
     style: style
@@ -57394,7 +57784,8 @@ var Switch = function Switch(props0) {
   var inputProps = getInputProps();
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("button", objectSpread2_default()(objectSpread2_default()({
     type: 'button',
-    role: 'switch'
+    role: 'switch',
+    id: fieldId
   }, rootProps), {}, {
     children: [/*#__PURE__*/(0,jsx_runtime.jsx)("input", objectSpread2_default()(objectSpread2_default()({}, inputProps), {}, {
       type: 'checkbox'
@@ -59121,6 +59512,7 @@ var thead_toNum = toNum;
 
 
 
+
 var useTableExpand = function useTableExpand(props) {
   var columns = props.columns,
     expandKeys = props.expandKeys;
@@ -59162,7 +59554,7 @@ var useTableExpand = function useTableExpand(props) {
       return col.type === 'expand' || col.type === 'row-expand';
     }).length;
     if (expandNum > 1) {
-      console.error('columns should not have more than one expand column');
+      devUseWarning.error('columns should not have more than one expand column');
     }
   });
   return {
@@ -59857,6 +60249,7 @@ var table_excluded = ["data"];
 
 
 
+var table_devUseWarning = devUseWarning;
 var table_emptyArr = [];
 var virtualScrollerStyle = {
   flex: 1,
@@ -59895,6 +60288,9 @@ var emptyRef = {
   var mirrorScrollRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var tableRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var browserScrollbarWidth = useScrollbarWidth();
+  if (props.fixed) {
+    table_devUseWarning.deprecated('fixed', 'virtual', 'Table');
+  }
   var getSpinConfig = function getSpinConfig() {
     if (typeof_default()(config.spin) === 'object') {
       return objectSpread2_default()({
@@ -60343,7 +60739,7 @@ var emptyRef = {
       props.tableRef(tableFunc);
     }
   }, []);
-  var tableWrapperClass = classnames_default()(props.className, tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.wrapper, props.bordered && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.bordered), verticalAlign === 'top' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.verticalAlignTop), verticalAlign === 'middle' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.verticalAlignMiddle), size === 'small' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.small), size === 'large' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.large), size === 'default' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.default));
+  var tableWrapperClass = classnames_default()(props.className, tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.rootClass, tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.wrapper, props.bordered && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.bordered), verticalAlign === 'top' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.verticalAlignTop), verticalAlign === 'middle' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.verticalAlignMiddle), size === 'small' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.small), size === 'large' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.large), size === 'default' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.default));
   if (!props.columns || columns.length === 0) return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
     className: classnames_default()(tableWrapperClass, tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.simple, props.striped && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.striped)),
     style: objectSpread2_default()({
@@ -60412,7 +60808,10 @@ TableComp.displayName = 'ShineoutTable';
 
 
 
-var TabsContext = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_.createContext({});
+var TabsContext = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_.createContext({
+  tabs: [],
+  setTabs: function setTabs() {}
+});
 var context_Provider = function Provider(props) {
   var children = props.children,
     value = props.value;
@@ -60437,6 +60836,10 @@ var useTabs = function useTabs(props) {
     _useState2 = slicedToArray_default()(_useState, 2),
     activeTabs = _useState2[0],
     setActiveTabs = _useState2[1];
+  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)([]),
+    _useState4 = slicedToArray_default()(_useState3, 2),
+    tabs = _useState4[0],
+    setTabs = _useState4[1];
   var getActive = function getActive() {
     if (props.active === undefined) {
       return activeTabs;
@@ -60450,6 +60853,8 @@ var useTabs = function useTabs(props) {
   return {
     active: getActive(),
     onChange: handleChange,
+    tabs: tabs,
+    setTabs: setTabs,
     Provider: context_Provider
   };
 };
@@ -60461,20 +60866,44 @@ var useTabs = function useTabs(props) {
 
 
 
+
 var TabsPanel = function TabsPanel(props) {
   var _jssStyle$tabs;
   var children = props.children,
     id = props.id,
+    tab = props.tab,
     className = props.className,
     style = props.style,
-    color = props.color,
     jssStyle = props.jssStyle;
   var panelStyle = (jssStyle === null || jssStyle === void 0 || (_jssStyle$tabs = jssStyle.tabs) === null || _jssStyle$tabs === void 0 ? void 0 : _jssStyle$tabs.call(jssStyle)) || {};
   var _useTabsContext = useTabsContext(),
     active = _useTabsContext.active,
-    lazy = _useTabsContext.lazy;
+    lazy = _useTabsContext.lazy,
+    setTabs = _useTabsContext.setTabs,
+    color = _useTabsContext.color;
   var isActive = active === id;
   var keekAlive = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(false);
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useLayoutEffect)(function () {
+    setTabs(function (prev) {
+      var prevTab = prev.find(function (item) {
+        return item.id === id;
+      });
+      if (prevTab) {
+        return prev.map(function (item) {
+          return item.id === id ? objectSpread2_default()(objectSpread2_default()({}, item), {}, {
+            tab: tab
+          }) : item;
+        });
+      }
+      return [].concat(toConsumableArray_default()(prev), [{
+        id: id,
+        tab: tab,
+        disabled: props.disabled,
+        jssStyle: jssStyle,
+        color: props.color || (active === id ? color : undefined)
+      }]);
+    });
+  }, [id, tab, color].concat(toConsumableArray_default()(color ? [active] : []), [props.disabled, props.jssStyle]));
   if (!isActive && lazy && !keekAlive.current) {
     return null;
   }
@@ -61032,7 +61461,7 @@ var TabsHeader = function TabsHeader(props) {
 
 
 
-var tabs_excluded = ["jssStyle", "align", "children", "shape", "position", "lazy", "autoFill", "hideSplit", "collapsible", "defaultCollapsed", "onChange", "extra", "border", "splitColor", "tabBarExtraContent", "background", "activeBackground", "inactiveBackground", "defaultActive", "tabBarStyle", "color", "sticky", "className"];
+var tabs_excluded = ["jssStyle", "align", "children", "shape", "position", "lazy", "autoFill", "hideSplit", "collapsible", "defaultCollapsed", "onChange", "extra", "border", "splitColor", "tabBarExtraContent", "background", "activeBackground", "inactiveBackground", "defaultActive", "tabBarStyle", "color", "sticky", "allowNonPanel", "className"];
 
 
 
@@ -61045,9 +61474,24 @@ var tabs_excluded = ["jssStyle", "align", "children", "shape", "position", "lazy
 var tabs_isEmpty = is_isEmpty,
   tabs_isObject = is_isObject,
   tabs_isNumber = isNumber,
-  tabs_isNamedComponent = isNamedComponent;
+  tabs_isNamedComponent = isNamedComponent,
+  tabs_devUseWarning = devUseWarning;
 var Tabs = function Tabs(props) {
   var _jssStyle$tabs;
+  if (props.border) {
+    tabs_devUseWarning.deprecated('border', 'splitColor', 'Tabs');
+  }
+  if (props.tabBarExtraContent) {
+    tabs_devUseWarning.deprecated('tabBarExtraContent', 'extra', 'Tabs');
+  }
+  if (props.align) {
+    tabs_devUseWarning.deprecated('align', 'position', 'Tabs');
+  }
+  // todo: activeBackground 的作用需要再确认（by Tom）
+  // if(props.background){
+  //   devUseWarning.deprecated('background', 'activeBackground', 'Tabs');
+  // }
+
   var jssStyle = props.jssStyle,
     align = props.align,
     children = props.children,
@@ -61073,6 +61517,7 @@ var Tabs = function Tabs(props) {
     tabBarStyle = props.tabBarStyle,
     color = props.color,
     sticky = props.sticky,
+    allowNonPanel = props.allowNonPanel,
     tabsClassName = props.className,
     rest = objectWithoutProperties_default()(props, tabs_excluded);
   var shape = shapeProps && shapeProps !== 'bordered' ? shapeProps : 'card';
@@ -61082,7 +61527,9 @@ var Tabs = function Tabs(props) {
     })),
     Provider = _useTabs.Provider,
     active = _useTabs.active,
-    onChange = _useTabs.onChange;
+    onChange = _useTabs.onChange,
+    tabs = _useTabs.tabs,
+    setTabs = _useTabs.setTabs;
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(),
     _useState2 = slicedToArray_default()(_useState, 2),
     panelStyle = _useState2[0],
@@ -61095,7 +61542,7 @@ var Tabs = function Tabs(props) {
   var panelRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var panelHeight = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(0);
   var tabsStyle = (jssStyle === null || jssStyle === void 0 || (_jssStyle$tabs = jssStyle.tabs) === null || _jssStyle$tabs === void 0 ? void 0 : _jssStyle$tabs.call(jssStyle)) || {};
-  var rootClass = classnames_default()(tabsStyle.tabs, tabsClassName, defineProperty_default()(defineProperty_default()({}, tabsStyle.autoFill, isVertical || autoFill), tabsStyle.collapsed, collapse));
+  var rootClass = classnames_default()(tabsStyle.rootClass, tabsStyle.tabs, tabsClassName, defineProperty_default()(defineProperty_default()({}, tabsStyle.autoFill, isVertical || autoFill), tabsStyle.collapsed, collapse));
   var getRootProps = function getRootProps() {
     return rest;
   };
@@ -61183,12 +61630,14 @@ var Tabs = function Tabs(props) {
             id: Child.props.id !== undefined ? Child.props.id : index
           });
         }
+        if (allowNonPanel) {
+          return Child;
+        }
         return null;
       })
     });
   };
   var renderHeader = function renderHeader() {
-    var tabs = [];
     var border = getSplitColor();
     external_root_React_commonjs2_react_commonjs_react_amd_react_.Children.toArray(children).forEach(function (child, index) {
       var Child = child;
@@ -61199,13 +61648,6 @@ var Tabs = function Tabs(props) {
       if (active === id && childBorder) {
         border = childBorder;
       }
-      tabs.push({
-        id: Child.props.id !== undefined ? Child.props.id : index,
-        tab: Child.props.tab,
-        disabled: Child.props.disabled,
-        jssStyle: jssStyle,
-        color: Child.props.color || (active === id ? color : undefined)
-      });
     });
     var header = /*#__PURE__*/(0,jsx_runtime.jsx)(tabs_header, {
       tabs: tabs,
@@ -61252,7 +61694,7 @@ var Tabs = function Tabs(props) {
         children: [renderContent(), renderHeader()]
       });
     }
-    console.warn('Tabs position is invalid, please check it.');
+    tabs_devUseWarning.warn('Tabs position is invalid, please check it.');
     return /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
       children: [renderHeader(), renderContent()]
     });
@@ -61263,6 +61705,9 @@ var Tabs = function Tabs(props) {
       active: active,
       shape: shape,
       onChange: onChange,
+      color: color,
+      tabs: tabs,
+      setTabs: setTabs,
       isVertical: isVertical,
       inactiveBackground: inactiveBackground,
       onCollapsible: handleCollapsible,
@@ -62010,6 +62455,7 @@ var TransferOperate = function TransferOperate(props) {
 
 
 
+
 var Transfer = function Transfer(props) {
   var _jssStyle$transfer;
   var jssStyle = props.jssStyle,
@@ -62086,7 +62532,7 @@ var Transfer = function Transfer(props) {
     onFilter = _useTransfer.onFilter,
     onSelectChange = _useTransfer.onSelectChange;
   var styles = (jssStyle === null || jssStyle === void 0 || (_jssStyle$transfer = jssStyle.transfer) === null || _jssStyle$transfer === void 0 ? void 0 : _jssStyle$transfer.call(jssStyle)) || {};
-  var rootClass = classnames_default()(styles.transfer, className, defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()({}, styles.simple, simple), styles.small, size === 'small'), styles.large, size === 'large'), styles.equalPanelWidth, equalPanelWidth));
+  var rootClass = classnames_default()(styles.rootClass, styles.transfer, className, defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()({}, styles.simple, simple), styles.small, size === 'small'), styles.large, size === 'large'), styles.equalPanelWidth, equalPanelWidth));
   var renderOperations = function renderOperations() {
     var sourceOperation = operations === null || operations === void 0 ? void 0 : operations[0];
     var targetOperation = operations === null || operations === void 0 ? void 0 : operations[1];
@@ -62167,9 +62613,12 @@ var Transfer = function Transfer(props) {
   var renderTargetList = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function () {
     return renderList('target');
   }, [target, size, filterTargetText, targetSelectedKeys]);
+  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(FormFieldContext),
+    fieldId = _useContext.fieldId;
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
     className: rootClass,
     style: style,
+    id: fieldId,
     children: [renderSourceList, !simple && renderOperations(), renderTargetList]
   });
 };
@@ -62295,6 +62744,7 @@ var useTreeSelect = function useTreeSelect(props) {
 
 
 
+
 var TreeSelect = function TreeSelect(props0) {
   var _jssStyle$treeSelect;
   var props = use_with_form_config(props0);
@@ -62489,7 +62939,7 @@ var TreeSelect = function TreeSelect(props0) {
     rootRef: targetRef,
     jssStyle: props.jssStyle
   });
-  var rootClass = classnames_default()(className, isEmpty && styles.wrapperEmpty, styles === null || styles === void 0 ? void 0 : styles.wrapper, open && (styles === null || styles === void 0 ? void 0 : styles.wrapperOpen), disabled === true && (styles === null || styles === void 0 ? void 0 : styles.wrapperDisabled), !!open && (styles === null || styles === void 0 ? void 0 : styles.wrapperFocus), disabled !== true && focused && (styles === null || styles === void 0 ? void 0 : styles.wrapperFocus), innerTitle && (styles === null || styles === void 0 ? void 0 : styles.wrapperInnerTitle), size === 'small' && (styles === null || styles === void 0 ? void 0 : styles.wrapperSmall), size === 'large' && (styles === null || styles === void 0 ? void 0 : styles.wrapperLarge), (!!props.error || props.status === 'error') && (styles === null || styles === void 0 ? void 0 : styles.wrapperError), clearable && (styles === null || styles === void 0 ? void 0 : styles.clearable), !border && (styles === null || styles === void 0 ? void 0 : styles.wrapperNoBorder), !!underline && (styles === null || styles === void 0 ? void 0 : styles.wrapperUnderline), defineProperty_default()({}, styles === null || styles === void 0 ? void 0 : styles.multiple, multiple));
+  var rootClass = classnames_default()(className, styles === null || styles === void 0 ? void 0 : styles.rootClass, styles === null || styles === void 0 ? void 0 : styles.wrapper, isEmpty && styles.wrapperEmpty, open && (styles === null || styles === void 0 ? void 0 : styles.wrapperOpen), disabled === true && (styles === null || styles === void 0 ? void 0 : styles.wrapperDisabled), !!open && (styles === null || styles === void 0 ? void 0 : styles.wrapperFocus), disabled !== true && focused && (styles === null || styles === void 0 ? void 0 : styles.wrapperFocus), innerTitle && (styles === null || styles === void 0 ? void 0 : styles.wrapperInnerTitle), size === 'small' && (styles === null || styles === void 0 ? void 0 : styles.wrapperSmall), size === 'large' && (styles === null || styles === void 0 ? void 0 : styles.wrapperLarge), (!!props.error || props.status === 'error') && (styles === null || styles === void 0 ? void 0 : styles.wrapperError), clearable && (styles === null || styles === void 0 ? void 0 : styles.clearable), !border && (styles === null || styles === void 0 ? void 0 : styles.wrapperNoBorder), !!underline && (styles === null || styles === void 0 ? void 0 : styles.wrapperUnderline), defineProperty_default()({}, styles === null || styles === void 0 ? void 0 : styles.multiple, multiple));
   var getRenderItem = function getRenderItem(data, expanded, active, id) {
     return typeof renderItemProp === 'function' ? renderItemProp(data, expanded, active, id) : data[renderItemProp];
   };
@@ -62842,7 +63292,10 @@ var TreeSelect = function TreeSelect(props0) {
       }
     }
   }, []);
+  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(FormFieldContext),
+    fieldId = _useContext.fieldId;
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({
+    id: fieldId,
     ref: targetRef,
     tabIndex: disabled === true || showInput ? undefined : 0
   }, getDataAttribute(defineProperty_default()({}, 'input-border', 'true'))), {}, {
@@ -62907,6 +63360,7 @@ var TreeSelectComp = src_tree_select_tree_select_0;
 TreeSelectComp.displayName = 'ShineoutTreeSelect';
 /* harmony default export */ var src_tree_select_0 = (TreeSelectComp);
 ;// CONCATENATED MODULE: ../hooks/src/components/use-upload/xhr.ts
+
 function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();
   if ('withCredentials' in xhr) {
@@ -62937,7 +63391,7 @@ function createCORSRequest(method, url) {
     onStart = args.onStart,
     responseType = args.responseType;
   if (!url) {
-    console.error(new Error("action is required, but its value is ".concat(url)));
+    devUseWarning.error("action is required, but its value is ".concat(url));
     return undefined;
   }
   var data = new FormData();
@@ -63711,6 +64165,7 @@ var useInputClick = function useInputClick() {
 
 
 
+
 var Upload = function Upload(props0) {
   var _props$jssStyle, _props$jssStyle$uploa, _props$imageStyle, _props$imageStyle2;
   var props = use_with_form_config(props0);
@@ -63894,9 +64349,12 @@ var Upload = function Upload(props0) {
   };
   var CustomResult = props.customResult;
   var shouldRenderLeft = listType !== 'image' || leftHandler;
+  var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(FormFieldContext),
+    fieldId = _useContext.fieldId;
   return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+    id: fieldId,
     style: props.style,
-    className: classnames_default()(uploadClasses === null || uploadClasses === void 0 ? void 0 : uploadClasses.wrapper, isImage && (uploadClasses === null || uploadClasses === void 0 ? void 0 : uploadClasses.wrapperImage), drop && (uploadClasses === null || uploadClasses === void 0 ? void 0 : uploadClasses.wrapperDrop), props.disabled && (uploadClasses === null || uploadClasses === void 0 ? void 0 : uploadClasses.wrapperDisabled), props.className),
+    className: classnames_default()(uploadClasses === null || uploadClasses === void 0 ? void 0 : uploadClasses.rootClass, uploadClasses === null || uploadClasses === void 0 ? void 0 : uploadClasses.wrapper, isImage && (uploadClasses === null || uploadClasses === void 0 ? void 0 : uploadClasses.wrapperImage), drop && (uploadClasses === null || uploadClasses === void 0 ? void 0 : uploadClasses.wrapperDrop), props.disabled && (uploadClasses === null || uploadClasses === void 0 ? void 0 : uploadClasses.wrapperDisabled), props.className),
     children: CustomResult ? /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
       children: [shouldRenderLeft && renderHandler(), /*#__PURE__*/(0,jsx_runtime.jsx)(CustomResult, {
         value: value,
@@ -64452,7 +64910,7 @@ var clone_cloneObject = function cloneObject(source) {
       target[key] = target[key];
     }
   } catch (e) {
-    console.error('should not pass non-serializable data', source);
+    console.error('[shineout] should not pass non-serializable data', source);
     console.error(e);
     target = {};
   }
@@ -64484,6 +64942,8 @@ var clone_deepClone = function deepClone(source) {
 
 
 
+
+var color_devUseWarning = devUseWarning;
 var CSS_INTEGER = '[-\\+]?\\d+%?';
 
 // <http://www.w3.org/TR/css3-values/#number-value>
@@ -64573,11 +65033,11 @@ var toRGB = function toRGB(input) {
 };
 var color_isString = function isString(string) {
   if (!string) {
-    console.error(new Error('the color is empty'));
+    color_devUseWarning.error('the color is empty');
     return false;
   }
   if (typeof string !== 'string') {
-    console.error(new Error("the color is get a ".concat(typeof_default()(string), ", expect string")));
+    color_devUseWarning.error("the color is get a ".concat(typeof_default()(string), ", expect string"));
     return false;
   }
   return true;
@@ -64679,7 +65139,7 @@ var isDarkRgb = function isDarkRgb(color) {
       b = _matchs2[3];
     return Number(r) * 0.299 + Number(g) * 0.578 + Number(b) * 0.114 < 192;
   }
-  console.error(new Error("the string '".concat(color, "' is not a legal color")));
+  color_devUseWarning.error("the string '".concat(color, "' is not a legal color"));
   return undefined;
 };
 var toHex = function toHex(rgb, noAlpha, a) {
@@ -64756,7 +65216,7 @@ var rgbTranlate = function rgbTranlate(target) {
     if (matchs) {
       return target(matchs, noAlpha, Number(matchs[4]));
     }
-    console.error(new Error("the string '".concat(rgb, "' is not a rgb color")));
+    color_devUseWarning.error("the string '".concat(rgb, "' is not a rgb color"));
     return '';
   };
 };
@@ -64779,7 +65239,7 @@ function hexToRgb(hex) {
   if (matchs) {
     return getRgba(matchs, 8);
   }
-  console.error(new Error("the string '".concat(hex, "' is not a hex color")));
+  color_devUseWarning.error("the string '".concat(hex, "' is not a hex color"));
   return '';
 }
 function hslToRgb(hsl) {
@@ -64793,7 +65253,7 @@ function hslToRgb(hsl) {
   if (matchs) {
     return translateHsl(matchs, matchs[4]);
   }
-  console.error(new Error("the string '".concat(hsl, "' is not a hsl color")));
+  color_devUseWarning.error("the string '".concat(hsl, "' is not a hsl color"));
   return '';
 }
 // @ts-ignore
@@ -65077,11 +65537,13 @@ function hash_createHash(obj) {
   return hash.toString(36);
 }
 ;// CONCATENATED MODULE: ./src/utils/numbers.ts
+
+var numbers_devUseWarning = devUseWarning;
 function numbers_range(end) {
   var start = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   var delta = end - start;
   if (typeof delta !== 'number' || Number.isNaN(delta)) {
-    console.error(new Error('end can not computed with start'));
+    numbers_devUseWarning.error('end can not computed with start');
   }
   return Array.from({
     length: end - start
@@ -65091,7 +65553,7 @@ function numbers_range(end) {
 }
 function split(total, nums) {
   if (typeof total !== 'number' || total === 0) {
-    console.error(new Error('total mast be a number(not equal 0)'));
+    numbers_devUseWarning.error('total mast be a number(not equal 0)');
   }
   var remain = 1;
   var nilCount = 0;
@@ -65480,9 +65942,11 @@ function shallowEqual_compareColumns(columns1, columns2) {
 }
 ;// CONCATENATED MODULE: ./src/utils/strings.ts
 
+
+var strings_devUseWarning = devUseWarning;
 function capitalize(str) {
   if (typeof str !== 'string') {
-    console.error(new Error('str should be a string'));
+    strings_devUseWarning.error('str should be a string');
   }
   return str && str[0].toUpperCase() + str.slice(1);
 }
@@ -66166,6 +66630,8 @@ var cssAccessors = {};
 var cssInject = {};
 
 ;// CONCATENATED MODULE: ./src/deprecated.ts
+
+var deprecated_devUseWarning = devUseWarning;
 var color = {
   danger: 'rgb(255, 77, 80)',
   gray100: 'rgb(244, 245, 248)',
@@ -66181,27 +66647,27 @@ var color = {
   primary: 'rgb(44, 95, 193)',
   secondary: 'rgb(51, 62, 89)',
   setColor: function setColor(_e) {
-    console.warn('shineout: color.setColor is deprecated');
+    deprecated_devUseWarning.warn('color.setColor is deprecated');
   },
   success: 'rgb(82, 196, 26)',
   warning: 'rgb(255, 140, 0)'
 };
 var deprecated_style = {
   getClassName: function getClassName() {
-    console.warn('shineout: style.getClassName is deprecated');
+    deprecated_devUseWarning.warn('style.getClassName is deprecated');
   },
   setStyle: function setStyle() {
-    console.warn('shineout: style.getClassName is deprecated');
+    deprecated_devUseWarning.warn('style.setStyle is deprecated');
     return function () {};
   },
   cleanCache: function cleanCache() {
-    console.warn('shineout: style.getClassName is deprecated');
+    deprecated_devUseWarning.warn('style.cleanCache is deprecated');
   },
   setInjectType: function setInjectType() {
-    console.warn('shineout: style.getClassName is deprecated');
+    deprecated_devUseWarning.warn('style.setInjectType is deprecated');
   },
   getInjectType: function getInjectType() {
-    console.warn('shineout: style.getClassName is deprecated');
+    deprecated_devUseWarning.warn('style.getInjectType is deprecated');
   }
 };
 // EXTERNAL MODULE: ./src/alert/interface.ts
@@ -66468,7 +66934,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.5.2'
+  version: '3.5.3-beta.2'
 });
 }();
 /******/ 	return __webpack_exports__;