shineout 3.2.0-beta.1 → 3.2.0-beta.2

package/dist/shineout.js

@@ -4116,6 +4116,13 @@ const figma = [
     describe: '',
     locked: true,
   },
+  {
+    name: '填充色',
+    token: 'Neutral-fill-8',
+    value: '#333E59',
+    describe: '',
+    locked: true,
+  },
   {
     name: 'colorFillActive',
     token: 'Neutral-fill-4',
@@ -6883,7 +6890,8 @@ var config = {
   },
   menu: {
     CollapseArrow: icons.ArrowDown,
-    FrontSolidArrowDown: icons.PcArrowFillDown
+    FrontSolidArrowDown: icons.PcArrowFillDown,
+    Search: icons.Search
   },
   modal: {
     Close: icons === null || icons === void 0 ? void 0 : icons.Close
@@ -11949,7 +11957,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.2.0-beta.1');
+/* harmony default export */ var version = ('3.2.0-beta.2');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -12123,6 +12131,11 @@ var cssvar = function cssvar(str, value, key, _size) {
   }
   return "var(--".concat(prefix, "-").concat(camelCaseToDash(key), ",var(--").concat(prefix, "-").concat(replaceNonAlphanumeric(str), ",").concat(value, "))");
 };
+var getTokenName = function getTokenName(key) {
+  var _getConfig2 = getConfig(),
+    prefix = _getConfig2.prefix;
+  return "--".concat(prefix, "-").concat(camelCaseToDash(key));
+};
 ;// CONCATENATED MODULE: ../theme/src/token/token.ts
 
 
@@ -12268,6 +12281,7 @@ var Token = {
   'Neutral-fill-9': '#141737',
   'Neutral-fill-10': '#020B18',
   'Neutral-fill-6': '#999DA8',
+  'Neutral-fill-8': '#333E59',
   'Neutral-fill-4': '#CCCFD7',
   'Neutral-fill-3': '#E8EBF0',
   'Neutral-fill-2': '#F4F5F8',
@@ -12425,7 +12439,6 @@ var Token = {
 
 // @ts-ignore
 var CommonToken = {};
-var CommonTokenMap = (/* unused pure expression or super */ null && (Token));
 Object.keys(Token).forEach(function (key) {
   var _getConfig = getConfig(),
     prefix = _getConfig.prefix;
@@ -12509,7 +12522,7 @@ var breadcrumbTokens = {
   breadcrumbLinkColor: 'Neutral-text-3',
   breadcrumbLinkHoverColor: 'Brand-5',
   breadcrumbListPaddingY: 'Spacing-4',
-  breadcrumbListItemBorderRadius: 'Radius-4',
+  breadcrumbListItemBorderRadius: 'Radius-default',
   breadcrumbListItemWrapperPaddingX: 'Spacing-4',
   breadcrumbListItemPaddingX: 'Spacing-8',
   breadcrumbListItemPaddingY: 'Spacing-5',
@@ -12891,7 +12904,7 @@ var cardTokens = {
   cardShadow: 'Shadow-2',
   cardBorderWidth: 'Border-1',
   cardBorderColor: 'Neutral-border-1',
-  cardBorderRadius: 'Radius-4',
+  cardBorderRadius: 'Radius-default',
   cardFontColor: 'Neutral-text-5',
   cardFontSize: 'Font-14',
   cardPaddingX: 'Spacing-16',
@@ -12943,7 +12956,7 @@ var carouselTokens = {
   carouselArrowSize: 'Size-12',
   carouselArrowIconSize: 'Size-10',
   carouselArrowBackgroundColor: 'rgba(255, 255, 255, 0.2)',
-  carouselArrowBorderRadius: 'Radius-4',
+  carouselArrowBorderRadius: 'Radius-default',
   carouselArrowFontColor: 'Neutral-text-1',
   carouselArrowHoverBackgroundColor: 'rgba(255, 255, 255, 0.4)',
   carouselIndicatorBackgroundColor: 'Neutral-fill-4',
@@ -12979,7 +12992,7 @@ var carouselTokens = {
 var cascaderTokens = {
   cascaderFontSize: 'Font-14',
   cascaderFontColor: 'Neutral-text-5',
-  cascaderBorderRadius: 'Radius-4',
+  cascaderBorderRadius: 'Radius-default',
   cascaderBorderColor: 'Neutral-border-2',
   cascaderPaddingX: 'Spacing-8',
   cascaderPaddingY: 'Spacing-2',
@@ -13012,7 +13025,7 @@ var cascaderTokens = {
   cascaderDisabledPlaceholderColor: 'Neutral-text-2',
   cascaderDisabledBorderColor: 'Neutral-border-2',
   cascaderDisabledBackgroundColor: 'Neutral-fill-2',
-  cascaderResultTextBorderRadius: 'Radius-4',
+  cascaderResultTextBorderRadius: 'Radius-default',
   cascaderResultTextPaddingX: 'Spacing-4',
   cascaderResultTextSmallPaddingX: 'Spacing-4',
   cascaderResultTextLargePaddingX: 'Spacing-10',
@@ -13025,7 +13038,7 @@ var cascaderTokens = {
   cascaderPanelColor: 'Neutral-text-5',
   cascaderPanelBackgroundColor: 'Neutral-fill-1',
   cascaderPanelShadow: 'Shadow-2',
-  cascaderPanelRadius: 'Radius-4',
+  cascaderPanelRadius: 'Radius-default',
   cascaderPanelBorder: 'Neutral-border-1',
   cascaderOptionHeight: 'Size-16',
   cascaderOptionFontColor: 'Neutral-text-5',
@@ -13037,7 +13050,7 @@ var cascaderTokens = {
   cascaderOptionInnerPaddingX: 'Spacing-8',
   cascaderOptionInnerPaddingY: 'Spacing-5',
   cascaderOptionInnerPaddingRight: 'Size-15',
-  cascaderOptionInnerBorderRadius: 'Radius-2',
+  cascaderOptionInnerBorderRadius: 'Radius-lesser',
   cascaderOptionIconColor: 'Neutral-text-4',
   cascaderOptionHoverBackgroundColor: 'Neutral-fill-2',
   cascaderOptionHoverFontColor: 'Neutral-text-5',
@@ -13112,22 +13125,22 @@ var collapseTokens = {
   collapseIconHoverBackgroundColor: 'Neutral-fill-3',
   collapseExtraMargin: 'Spacing-24',
   collapseWrapperBorderSize: 'Border-1',
-  collapseWrapperBorderRadius: 'Radius-4',
+  collapseWrapperBorderRadius: 'Radius-default',
   collapseWrapperGap: 'Size-12',
   collapseWrapperPaddingX: 'Spacing-16',
   collapseWrapperPaddingY: 'Spacing-12',
   collapseHeaderLineHeight: 'Size-11',
-  collapseHeaderGap: 'Size-4',
+  collapseHeaderGap: 'Spacing-8',
   collapseHeaderFontSize: 'Font-14',
   collapseHeaderWeight: '400',
   collapseHeaderIconWidth: 'Size-7',
   collapseHeaderExtraGap: 'Size-5',
   collapseContentLineHeight: 'Size-11',
-  collapseContentGap: 'Size-12',
+  collapseContentGap: 'Spacing-24',
   collapseContentPaddingY: 'Spacing-12',
   collapseContentFontSize: 'Font-14',
   collapseContentWeight: '400',
-  collapseContentPaddingLeft: 'Size-19',
+  collapseContentPaddingLeft: 'Spacing-38',
   collapseContentPaddingRight: 'Spacing-16',
   collapseWrapperBorderColor: 'Neutral-border-1',
   collapseWrapperColor: 'Neutral-border-1',
@@ -13163,7 +13176,7 @@ var common = {
 var datePickerTokens = {
   datePickerFontSize: 'Font-14',
   datePickerFontColor: 'Neutral-text-5',
-  datePickerBorderRadius: 'Radius-4',
+  datePickerBorderRadius: 'Radius-default',
   datePickerBorderColor: 'Neutral-border-2',
   datePickerPaddingX: 'Spacing-8',
   datePickerPaddingY: 'Spacing-4',
@@ -13186,7 +13199,7 @@ var datePickerTokens = {
   datePickerDisabledPlaceholderColor: 'Neutral-text-2',
   datePickerDisabledBorderColor: 'Neutral-border-1',
   datePickerDisabledBackgroundColor: 'Neutral-fill-2',
-  datePickerResultTextBorderRadius: 'Radius-4',
+  datePickerResultTextBorderRadius: 'Radius-default',
   datePickerResultTextPaddingX: 'Spacing-4',
   datePickerResultTextSmallPaddingX: 'Spacing-4',
   datePickerResultTextLargePaddingX: 'Spacing-10',
@@ -13198,7 +13211,7 @@ var datePickerTokens = {
   datePickerPanelColor: 'Neutral-text-5',
   datePickerPanelBackgroundColor: 'Neutral-fill-1',
   datePickerPanelShadow: 'Shadow-2',
-  datePickerPanelRadius: 'Radius-4',
+  datePickerPanelRadius: 'Radius-default',
   datePickerPanelMargin: 'Spacing-24',
   datePickerPanelBorder: 'Neutral-border-1',
   datePickerPanelHeaderFontSize: 'Font-14',
@@ -13235,7 +13248,7 @@ var datePickerTokens = {
   datePickerTimePanelPaddingY: 'Spacing-7',
   datePickerTimeListGap: 'Spacing-8',
   datePickerTimeItemHeight: 'Size-15',
-  datePickerTimeItemBorderRadius: 'Radius-4',
+  datePickerTimeItemBorderRadius: 'Radius-default',
   datePickerTimeItemPaddingY: '2px',
   datePickerTimeItemBackgroundColor: 'Neutral-fill-1',
   datePickerTimeItemColor: 'Neutral-text-5',
@@ -13421,10 +13434,17 @@ var formTokens = {
   formItemLabelWidth: '140px',
   formItemLabelPaddingY: 'Spacing-5',
   formItemLabelMarginXEnd: 'Spacing-8',
-  formItemDangerColor: 'Danger-6',
+  formItemLabelTopPaddingY: 'Spacing-4',
+  formItemLabelFontWeight: 'Weight-regular',
+  formItemLabelFontColor: 'Neutral-text-5',
+  formItemDangerFontSize: 'Font-12',
+  formItemDangerFontColor: 'Danger-6',
+  formItemDangerFontWeight: 'Weight-regular',
   formItemTipMinHeight: 'Size-10',
   formItemTipFontSize: 'Font-12',
-  formItemTipFontColor: 'Neutral-text-3'
+  formItemTipFontColor: 'Neutral-text-3',
+  formItemTipFontWeight: 'Weight-regular',
+  formItemTipMarginTop: 'Spacing-0'
 };
 /* harmony default export */ var form_form = (formTokens);
 ;// CONCATENATED MODULE: ../theme/src/form/index.ts
@@ -13460,11 +13480,13 @@ var iconTokens = {
 
 var imageTokens = {
   imageSpinColor: 'Neutral-text-2',
-  imageCircleBorderRadius: 'Radius-50%',
+  imageBorderRadius: 'Radius-default',
+  imageBorderColor: 'Neutral-border-1',
+  imageCircleBorderRadius: 'Radius-circle',
   imageCircleBorderColor: 'Neutral-border-1',
-  imageRoundedBorderRadius: 'Radius-4',
+  imageRoundedBorderRadius: 'Radius-default',
   imageRoundedBorderColor: 'Neutral-border-1',
-  imageThumbnailBorderRadius: 'Radius-4',
+  imageThumbnailBorderRadius: 'Radius-default',
   imageThumbnailBorderColor: 'Neutral-border-1',
   imagePlaceholderBackgroundColor: 'Neutral-fill-2',
   imageErrorBackgroundColor: 'Neutral-fill-2',
@@ -13586,14 +13608,12 @@ var listTokens = {
 // This file was generated automatically by a script. Please do not modify it directly.
 
 var menuTokens = {
+  menuCollpaseWidth: 'Spacing-40',
   menuFontSize: 'Font-14',
   menuFontColor: 'Neutral-text-5',
   menuIconColor: 'Neutral-text-4',
-  menuCollapseWidth: 'Size-20',
-  menuCollapseItemDisabledFontColor: 'Neutral-text-2',
-  menuCollapseItemDisabledBackgroundColor: 'Neutral-fill-1',
-  menuCollapseItemActiveFontColor: 'Brand-6',
-  menuCollapseItemActiveBackgroundColor: 'Neutral-fill-1',
+  menuIconMarginX: 'Spacing-8',
+  menuPopoverPaddingY: 'Spacing-4',
   menuItemBackgroundColor: 'Neutral-fill-1',
   menuItemFontColor: 'Neutral-text-5',
   menuItemHoverBackgroundColor: 'Neutral-fill-2',
@@ -13603,12 +13623,13 @@ var menuTokens = {
   menuItemActiveFontColor: 'Brand-6',
   menuItemDisabledBackgroundColor: 'Neutral-fill-1',
   menuItemDisabledFontColor: 'Neutral-text-2',
-  menuTitlePaddingX: '13px',
-  menuTitlePaddingY: '9px',
-  menuExpandWidth: '46px',
-  menuExpandSize: '14px',
+  menuTitlePaddingX: 'Spacing-16',
+  menuTitlePaddingY: 'Spacing-9',
+  menuExpandWidth: 'Spacing-46',
+  menuExpandSize: 'Spacing-14',
   menuExpandHoverBackgroundColor: 'Neutral-fill-3',
   menuChildrenBoxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+  menuHeaderBorderColor: 'Neutral-border-1',
   menuDarkFontColor: 'Neutral-text-1',
   menuDarkItemBackgroundColor: 'Neutral-fill-10',
   menuDarkItemFontColor: 'Neutral-text-1',
@@ -13620,14 +13641,31 @@ var menuTokens = {
   menuDarkItemOpenFontColor: 'Neutral-text-1',
   menuDarkItemDisabledBackgroundColor: 'Neutral-fill-10',
   menuDarkItemDisabledFontColor: 'Neutral-text-4',
-  menuDarkCollapseItemFontColor: 'Brand-1',
-  menuDarkCollapseItemBackgroundColor: 'Neutral-fill-9',
-  menuDarkCollapseItemActiveFontColor: 'Neutral-text-1',
-  menuDarkCollapseItemActiveBackgroundColor: 'Brand-6',
-  menuDarkCollapseItemDisabledFontColor: 'Neutral-text-4',
-  menuDarkCollapseItemDisabledBackgroundColor: 'Neutral-fill-9',
-  menuDarkCollapseItemHoverFontColor: 'Neutral-text-1',
-  menuDarkCollapseItemHoverBackgroundColor: 'Brand-9'
+  menuDarkHeaderBorderColor: 'Neutral-fill-8',
+  menuSearchBorderRadius: 'Radius-Full',
+  menuSearchBorderColor: 'Neutral-border-2',
+  menuSearchPaddingX: 'Spacing-8',
+  menuSearchIconSize: 'Size-7',
+  menuSearchIconColor: 'Neutral-text-4',
+  menuSearchIconMarginX: 'Spacing-8',
+  menuSearchBackgroundColor: 'Neutral-fill-2',
+  menuSearchClearColor: 'Neutral-text-2',
+  menuSearchHoverClearColor: 'Neutral-text-4',
+  menuSearchHoverBorderColor: 'Brand-5',
+  menuSearchHoverBackgroundColor: 'Neutral-fill-1',
+  menuSearchDisabledBackgroundColor: 'Neutral-fill-3',
+  menuSearchDarkFontColor: 'Neutral-text-1',
+  menuSearchDarkBorderColor: 'Neutral-fill-8',
+  menuSearchDarkBackgroundColor: 'Neutral-fill-8',
+  menuSearchDarkIconColor: 'Neutral-text-1',
+  menuSearchDarkClearColor: 'Neutral-text-3',
+  menuSearchDarkPlaceholderFontColor: 'Neutral-text-2',
+  menuSearchDarkHoverBorderColor: 'Brand-5',
+  menuSearchDarkHoverBackgroundColor: 'Neutral-fill-9',
+  menuSearchDarkHoverClearColor: 'Neutral-text-2',
+  menuSearchDarkFocusBorderColor: 'Brand-5',
+  menuSearchDarkFocusBackgroundColor: 'Neutral-fill-9',
+  menuSearchDarkFocusShadow: 'Brand-9'
 };
 /* harmony default export */ var menu = (menuTokens);
 ;// CONCATENATED MODULE: ../theme/src/menu/index.ts
@@ -13665,7 +13703,7 @@ var modalTokens = {
   modalPanelShadow: 'Shadow-3',
   modalPanelBorder: 'Neutral-border-1',
   modalPanelGap: 'Spacing-16',
-  modalPanelRadius: 'Radius-4',
+  modalPanelRadius: 'Radius-default',
   modalPanelFontSize: 'Font-14',
   modalHeaderIconMarginEnd: 'Spacing-8',
   modalHeaderIconMarginTop: 'Size-2',
@@ -13755,9 +13793,18 @@ var progressTokens = {
   progressFontColor: 'Neutral-text-4',
   progressBackground: 'Neutral-fill-3',
   progressInfoFrontBackgroundColor: 'Brand-6',
+  progressInfoInnerFontColor: 'Neutral-text-1',
   progressWarningFrontBackgroundColor: 'Warning-6',
+  progressWarningInnerFontColor: 'Neutral-text-1',
   progressSuccessFrontBackgroundColor: 'Success-6',
+  progressSuccessInnerFontColor: 'Neutral-text-1',
   progressDangerFrontBackgroundColor: 'Danger-6',
+  progressDangerInnerFontColor: 'Neutral-text-1',
+  progressCircleInfoFontColor: 'Neutral-text-4',
+  progressCircleWarningFontColor: 'Warning-6',
+  progressCircleSuccessFontColor: 'success-6',
+  progressCircleDangerFontColor: 'danger-6',
+  progressCircleFontWeight: 'Weight-regular',
   progressLineHeight: 'Size-3',
   progressLineGap: 'Spacing-8',
   progressLineInnerHeight: 'Size-10',
@@ -13766,9 +13813,14 @@ var progressTokens = {
   progressLineInnerFontColor: 'Neutral-text-1',
   progressLineInnerFontSize: 'Font-12',
   progressLineInnerRightFontColor: 'Neutral-text-5',
+  progressLineInnerInfoFrontBackgroundColor: 'Brand-6',
+  progressLineInnerWarningFrontBackgroundColor: 'Warning-6',
+  progressLineInnerSuccessFrontBackgroundColor: 'Success-6',
+  progressLineInnerDangerFrontBackgroundColor: 'Danger-6',
+  progressLinePopFontColor: 'Neutral-text-1',
   progressLineIconSize: 'Size-7',
   progressLineBackgroundColor: 'Neutral-fill-9',
-  progressLineColor: 'Neutral-text-1'
+  progressLineFontWeight: 'Weight-regular'
 };
 /* harmony default export */ var progress = (progressTokens);
 ;// CONCATENATED MODULE: ../theme/src/progress/index.ts
@@ -13964,7 +14016,7 @@ var sliderTokens = {
   sliderValueBackgroundColor: 'Neutral-fill-1',
   sliderValueHoverBackgroundColor: 'Neutral-fill-9',
   sliderValueHoverFontColor: 'Neutral-text-1',
-  sliderValueHoverRadius: 'Radius-2',
+  sliderValueHoverRadius: 'Radius-lesser',
   sliderValueHoverPaddingX: 'Spacing-8',
   sliderValueHoverPaddingY: 'Spacing-3',
   sliderScaleLineSize: 'Size-3',
@@ -14170,7 +14222,7 @@ var tabsTokens = {
   tabsTabPaddingX: 'Spacing-15',
   tabsTabPaddingY: 'Spacing-9',
   tabsTabFontSize: 'Font-14',
-  tabsTabBorderRadius: 'Radius-4',
+  tabsTabBorderRadius: 'Radius-default',
   tabsNearlyMargin: 'Spacing-4',
   tabsLinePaddingX: 'Spacing-8',
   tabsLinePaddingY: 'Spacing-6',
@@ -14221,7 +14273,7 @@ var tagTokens = {
   tagDefaultDisabledFontColor: 'Neutral-text-2',
   tagDefaultDisabledBackgroundColor: 'Neutral-fill-2',
   tagDefaultDisabledBorderColor: 'Neutral-fill-2',
-  tagDefaultOutlineFontColor: 'Neutral-text-4',
+  tagDefaultOutlineFontColor: 'Neutral-text-5',
   tagDefaultOutlineBackgroundColor: 'Neutral-fill-1',
   tagDefaultOutlineBorderColor: 'Neutral-border-2',
   tagDefaultOutlineDisabledFontColor: 'Neutral-text-2',
@@ -14432,19 +14484,22 @@ var tagTokens = {
   tagTangerineFillDisabledBackgroundColor: 'Tangerine-3',
   tagTangerineFillDisabledBorderColor: 'Tangerine-3',
   tagFontSize: 'Font-12',
-  tagBorderRadius: 'Radius-3',
+  tagBorderRadius: 'Radius-small',
   tagPaddingX: 'Spacing-6',
   tagPaddingY: 'Spacing-2',
   tagHeight: 'Size-11',
+  tagFontWeight: 'Weight-regular',
   tagSmallFontSize: 'Font-12',
-  tagSmallBorderRadius: 'Radius-2',
+  tagSmallBorderRadius: 'Radius-lesser',
   tagSmallPaddingX: 'Spacing-4',
   tagSmallHeight: 'Size-10',
+  tagSmallFontWeight: 'Weight-regular',
   tagLargeFontSize: 'Font-14',
-  tagLargeBorderRadius: 'Radius-4',
+  tagLargeBorderRadius: 'Radius-default',
   tagLargePaddingX: 'Spacing-12',
   tagLargePaddingY: 'Spacing-2',
   tagLargeHeight: 'Size-14',
+  tagLargeFontWeight: 'Weight-regular',
   tagInputPaddingX: 'Spacing-4',
   tagInputFontSize: 'Font-12',
   tagSmallInputPaddingX: 'Spacing-4',
@@ -14509,7 +14564,7 @@ var tagTokens = {
 
 var textareaTokens = {
   textareaFontSize: 'Font-14',
-  textareaBorderRadius: 'Radius-4',
+  textareaBorderRadius: 'Radius-default',
   textareaPaddingX: 'Spacing-8',
   textareaPaddingY: 'Spacing-4',
   textareaSmallFontSize: 'Font-12',
@@ -14552,7 +14607,7 @@ var tooltipTokens = {
   tooltipFontSize: 'Font-12',
   tooltipPaddingX: 'Spacing-8',
   tooltipPaddingY: 'Spacing-5',
-  tooltipBorderRadius: 'Radius-2',
+  tooltipBorderRadius: 'Radius-lesser',
   tooltipColor: 'Neutral-text-1',
   tooltipShadow: 'Shadow-2',
   tooltipBackgroundColor: 'Neutral-fill-9',
@@ -14639,7 +14694,7 @@ var treeTokens = {
   treeContentDisabledFontColor: 'Neutral-text-2',
   treeDragBorderColor: 'Brand-6',
   treeDragBackgroundColor: 'Brand-1',
-  treeContentBorderRadius: 'Radius-2'
+  treeContentBorderRadius: 'Radius-lesser'
 };
 /* harmony default export */ var tree = (treeTokens);
 ;// CONCATENATED MODULE: ../theme/src/tree/index.ts
@@ -14654,7 +14709,7 @@ var treeTokens = {
 var treeSelectTokens = {
   treeSelectFontSize: 'Font-14',
   treeSelectFontColor: 'Neutral-text-5',
-  treeSelectBorderRadius: 'Radius-4',
+  treeSelectBorderRadius: 'Radius-default',
   treeSelectBorderColor: 'Neutral-border-2',
   treeSelectPaddingX: 'Spacing-8',
   treeSelectPaddingY: 'Spacing-2',
@@ -14686,7 +14741,7 @@ var treeSelectTokens = {
   treeSelectDisabledPlaceholderColor: 'Neutral-text-2',
   treeSelectDisabledBorderColor: 'Neutral-border-2',
   treeSelectDisabledBackgroundColor: 'Neutral-fill-2',
-  treeSelectResultTextBorderRadius: 'Radius-4',
+  treeSelectResultTextBorderRadius: 'Radius-default',
   treeSelectResultTextPaddingX: 'Spacing-4',
   treeSelectResultTextSmallPaddingX: 'Spacing-4',
   treeSelectResultTextLargePaddingX: 'Spacing-10',
@@ -14696,7 +14751,7 @@ var treeSelectTokens = {
   treeSelectPanelColor: 'Neutral-text-5',
   treeSelectPanelBackgroundColor: 'Neutral-fill-1',
   treeSelectPanelShadow: 'Shadow-2',
-  treeSelectPanelRadius: 'Radius-4',
+  treeSelectPanelRadius: 'Radius-default',
   treeSelectPanelBorder: 'Neutral-border-1',
   treeSelectOptionHeight: 'Size-16',
   treeSelectOptionPaddingX: 'Spacing-4',
@@ -14706,7 +14761,7 @@ var treeSelectTokens = {
   treeSelectOptionInnerPaddingX: 'Spacing-8',
   treeSelectOptionInnerPaddingY: 'Spacing-5',
   treeSelectOptionInnerPaddingRight: 'Size-15',
-  treeSelectOptionInnerBorderRadius: 'Radius-2',
+  treeSelectOptionInnerBorderRadius: 'Radius-lesser',
   treeSelectOptionHoverBackgroundColor: 'Neutral-fill-2',
   treeSelectOptionDisabledColor: 'Neutral-text-2',
   treeSelectOptionDisabledBackgroundColor: 'Neutral-fill-1',
@@ -14742,13 +14797,13 @@ var uploadTokens = {
   uploadResultIconHoverBackgroundColor: 'Neutral-fill-2',
   uploadResultFontSize: 'Font-14',
   uploadResultFontColor: 'Neutral-text-5',
-  uploadResultBorderRadius: 'Radius-4',
+  uploadResultBorderRadius: 'Radius-default',
   uploadResultErrorFontColor: 'Danger-6',
   uploadResultErrorIconColor: 'Danger-6',
   uploadResultSuccessIconColor: 'Success-6',
   uploadResultDeletedFontColor: 'Neutral-text-3',
   uploadResultUploadingIconColor: 'Brand-6',
-  uploadImageBorderRadius: 'Radius-4',
+  uploadImageBorderRadius: 'Radius-default',
   uploadImageHandlerBorderColor: 'Neutral-border-1',
   uploadImageHandlerBackgroundColor: 'Neutral-fill-1',
   uploadImageHandlerFontColor: 'Neutral-text-4',
@@ -14831,6 +14886,8 @@ var src_Tokens = objectSpread2_default()(objectSpread2_default()(objectSpread2_d
 var ComponentTokenMap = objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()({}, src_alert_alert), breadcrumb), button_button), card), card_group), carousel), cascader), checkbox_checkbox), collapse), common_common), date_picker), descriptions), divider), dropdown), editable_area), empty), form_form), icon_icon), image_image), input), list), menu), message), modal), pagination), popover), progress), radio_radio), rate), select_select), slider), spin), steps), sticky), switch_switch), table), tabs), tag), textarea_textarea), tooltip), transfer), tree), tree_select), upload);
 
 
+
+
 /* harmony default export */ var src = (src_Tokens);
 ;// CONCATENATED MODULE: ../shineout-style/src/alert/alert.ts
 
@@ -18304,6 +18361,8 @@ var formItemStyle = {
     },
     wordWrap: 'break-word',
     width: src.formItemLabelWidth,
+    fontWeight: src.formItemLabelFontWeight,
+    color: src.formItemLabelFontColor,
     padding: "".concat(src.formItemLabelPaddingY, " 0"),
     lineHeight: src.lineHeightDynamic,
     marginRight: src.formItemLabelMarginXEnd,
@@ -18331,6 +18390,7 @@ var formItemStyle = {
       textAlign: 'start',
       width: 'auto',
       paddingTop: '0',
+      paddingBottom: src.formItemLabelTopPaddingY,
       margin: '0'
     }
   },
@@ -18348,7 +18408,7 @@ var formItemStyle = {
   wrapperRequired: {
     '& $label::before': {
       marginRight: '4px',
-      color: src.formItemDangerColor,
+      color: src.formItemDangerFontColor,
       content: '"*"',
       fontFamily: 'SimSun',
       position: 'relative',
@@ -18371,18 +18431,21 @@ var formItemStyle = {
     }
   },
   error: {
-    color: src.formItemDangerColor,
+    color: src.formItemDangerFontColor,
     lineHeight: src.lineHeightDynamic,
     minHeight: src.formItemTipMinHeight,
-    fontSize: src.formItemTipFontSize
+    fontSize: src.formItemDangerFontSize,
+    fontWeight: src.formItemDangerFontWeight
     // flexBasis: '100%',
     // width: 0,
   },
   tip: {
     color: src.formItemTipFontColor,
     fontSize: src.formItemTipFontSize,
+    fontWeight: src.formItemTipFontWeight,
     lineHeight: src.lineHeightDynamic,
     minHeight: src.formItemTipMinHeight,
+    marginTop: src.formItemTipMarginTop,
     width: '100%'
   }
 };
@@ -18625,16 +18688,16 @@ var ImageStyle = objectSpread2_default()(objectSpread2_default()({}, animation),
   },
   circle: {
     borderRadius: src.imageCircleBorderRadius,
-    border: "1px solid ".concat(src.imageCircleBorderColor)
+    border: "1px solid ".concat(src.imageBorderColor)
   },
   rounded: {
-    borderRadius: src.imageRoundedBorderRadius,
-    border: "1px solid ".concat(src.imageRoundedBorderColor)
+    borderRadius: src.imageBorderRadius,
+    border: "1px solid ".concat(src.imageBorderColor)
   },
   thumbnail: {
-    borderRadius: src.imageThumbnailBorderRadius,
+    borderRadius: src.imageBorderRadius,
     backgroundColor: '#FFFFFF',
-    border: "1px solid ".concat(src.imageThumbnailBorderColor),
+    border: "1px solid ".concat(src.imageBorderColor),
     '& $inner': {
       top: 4,
       left: 4,
@@ -19426,32 +19489,89 @@ var useListStyle = styled(list_list, 'list');
 /* harmony default export */ var shineout_style_src_list = ((/* unused pure expression or super */ null && (useListStyle)));
 ;// CONCATENATED MODULE: ../shineout-style/src/menu/menu.ts
 
-
-var menuIndex = 1000;
-var arrow = {
-  content: '""',
-  position: 'absolute',
-  left: 0,
-  transform: 'translateY(-50%)',
-  border: '6px solid transparent',
-  borderRightColor: src.menuItemBackgroundColor,
-  marginLeft: '-10px'
-};
+var animationDuration = '.25s';
+var collpaseWidth = src.menuCollpaseWidth;
+var transitionFunc = 'ease-out';
 var menuStyle = {
   wrapper: {
     height: '100%',
-    transition: 'width 0.3s',
-    backgroundColor: src.menuItemBackgroundColor
+    width: '100%',
+    backgroundColor: src.menuItemBackgroundColor,
+    transition: "width ".concat(animationDuration, " ").concat(transitionFunc),
+    color: src.menuFontColor
   },
   wrapperLight: {},
   wrapperDark: {
     backgroundColor: src.menuDarkItemBackgroundColor
   },
-  collapse: {
-    width: src.menuCollapseWidth,
-    boxSizing: 'content-box',
-    '& $root': {
-      width: src.menuCollapseWidth
+  wrapperCollpase: {
+    width: "".concat(collpaseWidth, "!important"),
+    '& $title': {
+      paddingLeft: '0'
+    },
+    '& $expand': {
+      opacity: 0
+    },
+    '& $titleIcon': {
+      width: "".concat(collpaseWidth, "!important"),
+      flexShrink: 0,
+      justifyContent: 'center'
+    },
+    '& $titleContent': {
+      opacity: 0,
+      alignItems: 'center',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
+    },
+    '&$wrapperLight': {
+      '$menuRoot > $itemActive > $itemContent': {
+        backgroundColor: src.menuItemBackgroundColor
+      }
+    }
+  },
+  wrapperInTransition: {
+    '& $titleContent, & $header': {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
+    },
+    '& $expand': {
+      opacity: 0
+    }
+  },
+  popover: {
+    '&&': {
+      border: 'none',
+      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+      borderRadius: '4px',
+      backgroundColor: src.menuItemBackgroundColor
+    },
+    '&[data-soui-theme=dark]': {
+      backgroundColor: src.menuDarkItemBackgroundColor
+    },
+    '& $children': {
+      borderRadius: '4px',
+      padding: "".concat(src.menuPopoverPaddingY, " 0")
+      // '& > :first-child > $itemContent': {
+      //   borderTopRightRadius: '4px',
+      //   borderTopLeftRadius: '4px',
+      // },
+      // '& > :last-child > $itemContent': {
+      //   borderBottomRightRadius: '4px',
+      //   borderBottomLeftRadius: '4px',
+      // },
+    }
+  },
+  popArrow: {
+    '&&&': {
+      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+      width: '6px',
+      height: '6px'
+    }
+  },
+  popArrowDark: {
+    '&&&': {
+      backgroundColor: src.menuDarkItemBackgroundColor,
+      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'
     }
   },
   scrollbox: {
@@ -19461,12 +19581,6 @@ var menuStyle = {
     },
     '$wrapperHorizontal &': {
       overflow: 'hidden'
-    },
-    '$wrapperHasOpen$wrapperVertical &': {
-      width: '100vw'
-    },
-    '$wrapperHasOpen$wrapperHorizontal &': {
-      height: '100vh'
     }
   },
   root: {
@@ -19482,166 +19596,27 @@ var menuStyle = {
   },
   wrapperInline: {},
   wrapperVertical: {
-    position: 'relative',
-    zIndex: menuIndex
+    position: 'relative'
   },
   wrapperHorizontal: {
-    height: '42px',
-    position: 'relative',
-    zIndex: menuIndex
+    position: 'relative'
   },
   wrapperHasOpen: {},
   children: {
     padding: '0',
+    margin: '0',
     display: 'none',
     minWidth: '100%',
     whiteSpace: 'nowrap',
-    '$itemOpen > &': {
+    '$itemOpen > &, $childrenShow&': {
       display: 'block'
-    },
-    '$wrapper:not($wrapperInline) &': {
-      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'
-    },
-    '$wrapperHorizontal &': {
-      position: 'absolute',
-      bottom: '-2px',
-      left: 0,
-      transform: 'translateY(100%)'
-    },
-    '$wrapperHorizontal & &': {
-      position: 'absolute',
-      left: 'auto',
-      bottom: 'auto',
-      top: 0,
-      right: '-2px',
-      transform: 'translateX(100%)'
-    },
-    '$wrapperVertical &': {
-      position: 'absolute',
-      top: 0,
-      '&[dir=ltr]': {
-        right: '-6px',
-        transform: 'translateX(100%)'
-      },
-      '&[dir=rtl]': {
-        left: '-6px',
-        transform: 'translateX(-100%)'
-      },
-      minWidth: 'auto',
-      borderRadius: '4px',
-      '& > :first-child > $itemContent': {
-        borderTopRightRadius: '4px',
-        borderTopLeftRadius: '4px'
-      },
-      '& > :last-child > $itemContent': {
-        borderBottomRightRadius: '4px',
-        borderBottomLeftRadius: '4px'
-      },
-      '&$childrenUp': {
-        top: 'auto',
-        bottom: 0
-      },
-      '&$childrenUp::before': objectSpread2_default()(objectSpread2_default()({
-        top: 'auto',
-        bottom: '20%'
-      }, arrow), {}, {
-        '$wrapperDark&': {
-          borderRightColor: src.menuDarkItemBackgroundColor
-        }
-      }),
-      '&::before': objectSpread2_default()(objectSpread2_default()({
-        top: '20%'
-      }, arrow), {}, {
-        '$wrapperDark&': {
-          borderRightColor: src.menuDarkItemBackgroundColor
-        }
-      })
     }
   },
+  childrenShow: {},
   childrenUp: {},
   item: {
     listStyle: 'none',
-    flexShrink: 0,
-    position: 'relative',
-    '$wrapperVertical &, $wrapperHorizontal &': {
-      position: 'relative'
-    }
-  },
-  collapseItem: {
-    // width: 40,
-    cursor: 'pointer',
-    opacity: 1,
-    height: src.menuCollapseWidth,
-    transition: 'all ease .3s',
-    color: 'inherit',
-    position: 'relative',
-    '$wrapperLight &': {
-      background: src.menuItemBackgroundColor,
-      '&:hover': {
-        background: src.menuItemHoverBackgroundColor,
-        color: src.menuItemHoverFontColor
-      }
-    },
-    '$wrapperLight $itemDisabled > &&': {
-      cursor: 'not-allowed',
-      color: src.menuCollapseItemDisabledFontColor,
-      background: src.menuCollapseItemDisabledBackgroundColor
-    },
-    '$wrapperDark $itemDisabled > &&': {
-      cursor: 'not-allowed',
-      color: src.menuDarkCollapseItemDisabledFontColor,
-      background: src.menuDarkCollapseItemDisabledBackgroundColor
-    },
-    '$wrapperDark &': {
-      color: src.menuDarkCollapseItemFontColor,
-      background: src.menuDarkCollapseItemBackgroundColor,
-      '&:hover': {
-        background: src.menuDarkCollapseItemHoverBackgroundColor,
-        color: src.menuDarkCollapseItemHoverFontColor
-      }
-    },
-    '$itemActive > &&': {
-      '$wrapperLight &': {
-        color: src.menuCollapseItemActiveFontColor,
-        background: src.menuCollapseItemActiveBackgroundColor
-      },
-      '$wrapperDark &': {
-        color: src.menuDarkCollapseItemActiveFontColor,
-        background: src.menuDarkCollapseItemActiveBackgroundColor
-      }
-    },
-    '&$collapseItemInPath': {
-      // background: token.menuItemBackgroundColor,
-      '&::after': {
-        content: '""',
-        position: 'absolute',
-        left: 0,
-        top: 0,
-        bottom: 0,
-        width: 3,
-        transition: 'all ease 0.3s',
-        backgroundColor: src.menuCollapseItemActiveFontColor
-      }
-    }
-  },
-  collapseItemInPath: {},
-  collapseItemHide: {
-    opacity: 0,
-    width: 0,
-    // height: 0,
-    // zIndex: -1,
-    position: 'absolute',
-    top: 0,
-    color: 'transparent',
-    background: 'transparent',
-    '&$collapseItemInPath': {
-      // background: token.menuItemBackgroundColor,
-      '&::after': {
-        top: 20,
-        bottom: 20,
-        backgroundColor: 'transparent'
-      }
-    }
+    flexShrink: 0
   },
   itemActive: {},
   itemDisabled: {},
@@ -19655,9 +19630,7 @@ var menuStyle = {
     alignItems: 'center',
     cursor: 'pointer',
     position: 'relative',
-    // opacity: 1,
-    transition: 'all ease 0.3s',
-    '$wrapperLight &': {
+    '[data-soui-theme=light] &': {
       color: src.menuItemFontColor,
       backgroundColor: src.menuItemBackgroundColor,
       '&:hover': {
@@ -19665,7 +19638,7 @@ var menuStyle = {
         backgroundColor: src.menuItemHoverBackgroundColor
       }
     },
-    '$wrapperDark &': {
+    '[data-soui-theme=dark] &': {
       color: src.menuDarkFontColor,
       backgroundColor: src.menuDarkItemBackgroundColor,
       '&:hover': {
@@ -19673,7 +19646,7 @@ var menuStyle = {
         backgroundColor: src.menuDarkItemHoverBackgroundColor
       }
     },
-    '$wrapperDark $itemOpen > &': {
+    '[data-soui-theme=dark] $itemOpen > &': {
       color: src.menuDarkItemOpenFontColor,
       backgroundColor: src.menuDarkItemOpenBackgroundColor,
       '& $icon': {
@@ -19681,13 +19654,13 @@ var menuStyle = {
       }
     },
     '$itemInPath > &&': {
-      '$wrapperLight &': {
+      '[data-soui-theme=light] &': {
         color: src.menuItemActiveFontColor,
         '& $icon': {
           color: src.menuItemActiveFontColor
         }
       },
-      '$wrapperDark$wrapperInline &::before, $wrapperDark$wrapperVertical &::before': {
+      '[data-soui-theme=dark][data-soui-mode=inline] &::before, [data-soui-theme=dark][data-soui-mode=vertical] &::before': {
         content: '""',
         position: 'absolute',
         left: 0,
@@ -19695,50 +19668,73 @@ var menuStyle = {
         bottom: 0,
         width: '3px',
         backgroundColor: src.menuDarkItemActiveBackgroundColor
-      },
-      '$wrapperLight$wrapperVertical &': {
-        '&::before': {
-          display: 'block',
-          content: '""',
-          position: 'absolute',
-          right: 0,
-          top: 0,
-          bottom: 0,
-          width: '4px',
-          borderTopLeftRadius: '4px',
-          borderBottomLeftRadius: '4px',
-          backgroundColor: src.menuItemActiveFontColor
-        }
       }
+      // '[data-soui-theme=light][data-soui-mode=vertical]:not($wrapperCollpase) &': {
+      //   '&::before': {
+      //     display: 'block',
+      //     content: '""',
+      //     position: 'absolute',
+      //     right: 0,
+      //     top: 0,
+      //     bottom: 0,
+      //     width: '4px',
+      //     borderTopLeftRadius: '4px',
+      //     borderBottomLeftRadius: '4px',
+      //     backgroundColor: token.menuItemActiveFontColor,
+      //   },
+      // },
     },
     '$itemActive > &&': {
-      '$wrapperLight &': {
+      '[data-soui-theme=light] &': {
         color: src.menuItemActiveFontColor,
         backgroundColor: src.menuItemActiveBackgroundColor,
         '& $icon': {
           color: src.menuItemActiveFontColor
         }
       },
-      '$wrapperDark &': {
+      '$wrapperCollpase[data-soui-theme=light] $root > &': {
+        color: src.menuItemActiveFontColor,
+        backgroundColor: src.menuItemBackgroundColor,
+        '& $icon': {
+          color: src.menuItemActiveFontColor
+        }
+      },
+      '[data-soui-theme=dark]:not($wrapperCollpase) &': {
         color: src.menuDarkItemActiveFontColor,
         backgroundColor: src.menuDarkItemActiveBackgroundColor,
         '& $icon': {
           color: src.menuDarkItemActiveFontColor
         }
       },
-      '$wrapperLight$wrapperInline &,  $wrapperLight$wrapperHorizontal &': {
+      '[data-soui-theme=dark]$wrapperCollpase &': {
         '&::before': {
           content: '""',
           position: 'absolute',
-          display: 'block',
+          left: 0,
           top: 0,
-          right: 0,
+          bottom: 0,
           width: '3px',
-          height: '100%',
-          backgroundColor: src.menuItemActiveFontColor
-        }
-      },
-      '$wrapperLight$wrapperHorizontal $root > &::before': {
+          backgroundColor: src.menuDarkItemActiveBackgroundColor
+        }
+      },
+      // '[data-soui-theme=light][data-soui-mode=inline] &,  [data-soui-theme=light][data-soui-mode=horizontal] &':
+      //   {
+      //     '&::before': {
+      //       content: '""',
+      //       position: 'absolute',
+      //       display: 'block!important',
+      //       top: 0,
+      //       right: 0,
+      //       width: '3px',
+      //       height: '100%',
+      //       backgroundColor: token.menuItemActiveFontColor,
+      //     },
+      //   },
+      '[data-soui-theme=light][data-soui-mode=horizontal] $root > &::before': {
+        content: '""',
+        position: 'absolute',
+        display: 'block!important',
+        backgroundColor: src.menuItemActiveFontColor,
         width: '100%',
         height: '2px',
         top: 'auto',
@@ -19747,7 +19743,7 @@ var menuStyle = {
         right: 'auto'
       }
     },
-    '$wrapperLight $itemDisabled > &&': {
+    '[data-soui-theme=light] $itemDisabled > &&': {
       cursor: 'not-allowed',
       color: src.menuItemDisabledFontColor,
       backgroundColor: src.menuItemDisabledBackgroundColor,
@@ -19755,7 +19751,7 @@ var menuStyle = {
         color: src.menuItemDisabledFontColor
       }
     },
-    '$wrapperDark $itemDisabled > &&': {
+    '[data-soui-theme=dark] $itemDisabled > &&': {
       cursor: 'not-allowed',
       color: src.menuDarkItemDisabledFontColor,
       backgroundColor: src.menuDarkItemDisabledBackgroundColor,
@@ -19764,23 +19760,32 @@ var menuStyle = {
       }
     }
   },
-  itemContentHide: {
-    position: 'absolute',
-    overflow: 'hidden',
-    pointerEvents: 'none',
-    // opacity: 0,
-    visibility: 'hidden',
-    '& $title': {
-      pointerEvents: 'none',
-      whiteSpace: 'nowrap'
+  itemContentFront: {},
+  itemContentBack: {},
+  header: {
+    padding: "".concat(src.menuTitlePaddingY, " ").concat(src.menuTitlePaddingX),
+    width: '100%',
+    transition: "width ".concat(animationDuration, " ").concat(transitionFunc),
+    color: src.menuFontColor,
+    '$wrapperDark &': {
+      color: src.menuDarkFontColor
     },
-    '& $menuIcon': {
-      opacity: 0
+    '$wrapperCollpase &': {
+      paddingLeft: '0',
+      paddingRight: '0',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center'
+    },
+    '& + div': {
+      borderTop: "1px solid ".concat(src.menuHeaderBorderColor),
+      '$wrapperDark &': {
+        borderTop: "1px solid ".concat(src.menuDarkHeaderBorderColor)
+      }
     }
   },
-  itemContentFront: {},
-  itemContentBack: {},
   title: {
+    cursor: 'inherit',
     '&:hover': {
       color: 'inherit'
     },
@@ -19792,13 +19797,13 @@ var menuStyle = {
     minWidth: 0,
     padding: "".concat(src.menuTitlePaddingY, " ").concat(src.menuTitlePaddingX),
     '$wrapperInline $childrenHasExpand  $item:not($itemHasChildren)  $itemContentBack > &': {
-      paddingRight: src.menuExpandWidth
+      paddingRight: "calc(".concat(src.menuIconMarginX, " + ").concat(src.menuTitlePaddingX, " + ").concat(src.menuExpandSize, ")")
     },
     '$wrapperInline $itemHasChildren > $itemContentBack > &': {
       paddingRight: 0
     },
     '$childrenHasExpand > $item:not($itemHasChildren) > $itemContentBack > &': {
-      paddingRight: src.menuExpandWidth
+      paddingRight: "calc(".concat(src.menuIconMarginX, " + ").concat(src.menuTitlePaddingX, " + ").concat(src.menuExpandSize, ")")
     },
     '$childrenHasExpand $itemHasChildren > $itemContentBack > &': {
       paddingRight: 0
@@ -19807,35 +19812,44 @@ var menuStyle = {
       paddingLeft: 0
     }
   },
+  titleIcon: {
+    '& + $titleContent': {
+      paddingLeft: src.menuIconMarginX
+    },
+    lineHeight: 1,
+    display: 'inline-flex'
+  },
+  titleContent: {
+    whiteSpace: 'pre-wrap',
+    transition: "opacity ".concat(animationDuration, " ").concat(transitionFunc),
+    opacity: 1
+  },
   expand: {
     alignSelf: 'stretch',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    '$wrapperLight &': {
+    '[data-soui-theme=light] &': {
       color: src.menuIconColor
     },
     '& > $icon': {
       lineHeight: 1,
-      opacity: 1,
       width: src.menuExpandSize,
       height: src.menuExpandSize,
       '$wrapper:not($wrapperVertical) $itemOpen > $itemContent &': {
         transform: 'rotate(180deg)'
       }
-    },
-    '$wrapperVertical &': {
-      '&[dir=ltr]': {
-        transform: 'rotate(-90deg)'
-      },
-      '&[dir=rtl]': {
-        transform: 'rotate(90deg)'
-      }
     }
   },
-  icon: {
-    transition: 'all ease 0.3s'
+  expandVertical: {
+    '&[dir=ltr] svg': {
+      transform: 'rotate(-90deg)'
+    },
+    '&[dir=rtl] svg': {
+      transform: 'rotate(90deg)'
+    }
   },
+  icon: {},
   expandHover: {
     '&:hover': {
       backgroundColor: src.menuExpandHoverBackgroundColor
@@ -19848,13 +19862,14 @@ var menuStyle = {
     width: 'auto',
     visibility: 'hidden',
     paddingLeft: src.menuTitlePaddingX,
-    paddingRight: '8px',
+    paddingRight: src.menuIconMarginX,
     '$itemHasChildren > $itemContent &': {
       visibility: 'visible'
     }
   },
   expandBack: {
-    width: src.menuExpandWidth
+    paddingRight: src.menuTitlePaddingX,
+    paddingLeft: src.menuIconMarginX
   },
   scrollbar: {
     position: 'absolute',
@@ -19905,16 +19920,90 @@ var menuStyle = {
   scrollbarDragging: {}
 };
 /* harmony default export */ var menu_menu = (menuStyle);
+;// CONCATENATED MODULE: ../shineout-style/src/menu/search.ts
+
+var _wrapperDark;
+
+var menuSearchStyle = {
+  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),
+  wrapperCollapsed: {
+    borderRadius: '50%',
+    padding: src.menuSearchPaddingX,
+    cursor: 'pointer',
+    lineHeight: 1,
+    '$wrapperLight&': {
+      background: src.menuSearchBackgroundColor,
+      border: "1px solid ".concat(src.menuSearchBackgroundColor),
+      '&:hover': {
+        background: src.menuSearchHoverBackgroundColor,
+        borderColor: src.menuSearchHoverBorderColor
+      },
+      '$wrapperDisabled&': {
+        background: src.menuSearchDisabledBackgroundColor,
+        borderColor: src.menuSearchDisabledBackgroundColor
+      }
+    },
+    '$wrapperDark&': {
+      background: src.menuSearchDarkBackgroundColor,
+      border: "1px solid ".concat(src.menuSearchDarkBackgroundColor),
+      '&:hover': {
+        background: src.menuSearchDarkHoverBackgroundColor,
+        borderColor: src.menuSearchDarkHoverBorderColor
+      },
+      '$wrapperDisabled&': {
+        background: src.menuSearchDarkBackgroundColor,
+        borderColor: src.menuSearchDarkBackgroundColor,
+        '&$search': {
+          color: src.menuSearchDarkIconColor
+        }
+      }
+    }
+  },
+  wrapperDisabled: {
+    cursor: 'not-allowed',
+    '&$wrapperDark': {
+      opacity: 0.3
+    }
+  },
+  input: {
+    width: '100%'
+  },
+  search: {
+    width: src.menuSearchIconSize,
+    height: src.menuSearchIconSize,
+    cursor: 'pointer',
+    display: 'flex',
+    justifyContent: 'center',
+    marginRight: src.menuSearchIconMarginX,
+    color: src.menuSearchIconColor,
+    '$wrapperDisabled &': {
+      color: src.inputDisabledFontColor,
+      cursor: 'not-allowed'
+    },
+    '$wrapperDark &': {
+      color: src.menuSearchDarkIconColor
+    },
+    '$wrapperCollapsed &': {
+      marginRight: 0
+    }
+  }
+};
+/* harmony default export */ var menu_search = (menuSearchStyle);
 ;// CONCATENATED MODULE: ../shineout-style/src/menu/index.ts
 
 
+
 var useMenuStyle = styled(menu_menu, 'menu');
 
 /* harmony default export */ var shineout_style_src_menu = ((/* unused pure expression or super */ null && (useMenuStyle)));
+var useMenuSearchStyle = styled(menu_search, 'menu-search');
+
 ;// CONCATENATED MODULE: ../shineout-style/src/message/message.ts
 
 
-var animationDuration = '0.2s';
+var message_animationDuration = '0.2s';
 var messageMargin = src.messageMarginBottom;
 var message_animations = {
   '@keyframes left-in': {
@@ -20007,21 +20096,21 @@ var messageStyle = objectSpread2_default()(objectSpread2_default()({}, message_a
   },
   itemDismissed: {
     ' [data-soui-position="bottom-left"] &': {
-      animation: "$left-out ".concat(animationDuration, " ease-in-out")
+      animation: "$left-out ".concat(message_animationDuration, " ease-in-out")
     },
     ' [data-soui-position="bottom-right"] &': {
-      animation: "$right-out ".concat(animationDuration, " ease-in-out")
+      animation: "$right-out ".concat(message_animationDuration, " ease-in-out")
     }
   },
   itemShow: {
     '[data-soui-position="top-left"] &, [data-soui-position="bottom-left"] &': {
-      animation: "$left-in ".concat(animationDuration, " ease-in-out")
+      animation: "$left-in ".concat(message_animationDuration, " ease-in-out")
     },
     '[data-soui-position="top-right"] &, [data-soui-position="bottom-right"] &': {
-      animation: "$right-in ".concat(animationDuration, " ease-in-out")
+      animation: "$right-in ".concat(message_animationDuration, " ease-in-out")
     },
     '[data-soui-position="middle"] &, [data-soui-position="top"] &': {
-      animation: "$middle-in ".concat(animationDuration, " ease-in-out")
+      animation: "$middle-in ".concat(message_animationDuration, " ease-in-out")
     }
   },
   message: {
@@ -20690,7 +20779,9 @@ var usePaginationStyle = styled(pagination_pagination, 'pagination');
 /* harmony default export */ var shineout_style_src_pagination = ((/* unused pure expression or super */ null && (usePaginationStyle)));
 ;// CONCATENATED MODULE: ../shineout-style/src/popover/popover.ts
 
-var arrowGap = 10;
+
+var popover_cssvar = '--popover-arrow-gap';
+var hideArrowGap = "var(".concat(popover_cssvar, ", 10px)");
 var arrowMargin = '8px';
 var popoverStyle = {
   wrapper: {
@@ -20720,8 +20811,9 @@ var popoverStyle = {
         borderRight: 'transparent'
       }
     },
+    '&$hideArrow': defineProperty_default()({}, popover_cssvar, '4px'),
     '&[data-soui-position^="bottom"]': {
-      marginTop: arrowGap - 2,
+      marginTop: "calc(".concat(hideArrowGap, " - 2px)"),
       '& $arrow': {
         top: '0',
         transform: 'translate(0, -50%) rotate(-45deg)',
@@ -20730,17 +20822,18 @@ var popoverStyle = {
         margin: 'auto'
       },
       '&::after': {
-        top: arrowGap * -1,
+        top: "calc(".concat(hideArrowGap, " * -1)"),
         left: '0',
         right: '0',
         content: '" "',
         display: 'block',
-        height: arrowGap,
+        height: hideArrowGap,
         position: 'absolute'
       }
     },
     '&[data-soui-position^="top"]': {
-      marginTop: (arrowGap - 2) * -1,
+      // marginTop: (arrowGap - 2) * -1,
+      marginTop: "calc((".concat(hideArrowGap, " - 2px) * -1)"),
       '& $arrow': {
         bottom: '0',
         transform: 'translate(0, 50%) rotate(135deg)',
@@ -20749,21 +20842,25 @@ var popoverStyle = {
         margin: 'auto'
       },
       '&::after': {
-        bottom: arrowGap * -1,
+        // bottom: arrowGap * -1,
+        bottom: "calc(".concat(hideArrowGap, " * -1)"),
         left: '0',
         right: '0',
         content: '" "',
         display: 'block',
-        height: arrowGap,
+        // height: arrowGap,
+        height: hideArrowGap,
         position: 'absolute'
       }
     },
     '&[data-soui-position^="left"]': {
+      // '&[dir=ltr]': { marginLeft: (arrowGap - 2) * -1 },
       '&[dir=ltr]': {
-        marginLeft: (arrowGap - 2) * -1
+        marginLeft: "calc((".concat(hideArrowGap, " - 2px) * -1)")
       },
+      // '&[dir=rtl]': { marginRight: (arrowGap - 2) * -1 },
       '&[dir=rtl]': {
-        marginRight: (arrowGap - 2) * -1
+        marginRight: "calc((".concat(hideArrowGap, " - 2px) * -1)")
       },
       '& $arrow': {
         right: src.popoverBorderWidth,
@@ -20773,21 +20870,24 @@ var popoverStyle = {
         margin: 'auto'
       },
       '&::after': {
-        left: arrowGap * -1,
+        // left: arrowGap * -1,
+        left: "calc(".concat(hideArrowGap, " * -1)"),
         top: '0',
         bottom: '0',
         content: '" "',
         display: 'block',
-        width: arrowGap,
+        width: hideArrowGap,
         position: 'absolute'
       }
     },
     '&[data-soui-position^="right"]': {
+      // '&[dir=ltr]': { marginLeft: arrowGap - 2 },
       '&[dir=ltr]': {
-        marginLeft: arrowGap - 2
+        marginLeft: "calc(".concat(hideArrowGap, " - 2px)")
       },
+      // '&[dir=rtl]': { marginRight: arrowGap - 2 },
       '&[dir=rtl]': {
-        marginRight: arrowGap - 2
+        marginRight: "calc(".concat(hideArrowGap, " - 2px)")
       },
       '& $arrow': {
         left: '0',
@@ -20797,12 +20897,14 @@ var popoverStyle = {
         margin: 'auto'
       },
       '&::after': {
-        left: arrowGap * -1,
+        // left: arrowGap * -1,
+        left: "calc(".concat(hideArrowGap, " * -1)"),
         top: '0',
         bottom: '0',
         content: '" "',
         display: 'block',
-        width: arrowGap,
+        // width: arrowGap,
+        width: hideArrowGap,
         position: 'absolute'
       }
     },
@@ -20850,6 +20952,7 @@ var popoverStyle = {
     display: 'block'
   },
   arrow: {},
+  hideArrow: {},
   content: {
     position: 'relative',
     zIndex: 2,
@@ -20938,10 +21041,6 @@ var progressStyle = {
     height: '100%',
     boxSizing: 'border-box',
     borderRadius: 'inherit',
-    '$lineInner &': {
-      display: 'flex',
-      alignItems: 'center'
-    },
     '$wrapperSuccess &': {
       backgroundColor: src.progressSuccessFrontBackgroundColor
     },
@@ -20953,6 +21052,22 @@ var progressStyle = {
     },
     '$wrapperDanger &': {
       backgroundColor: src.progressDangerFrontBackgroundColor
+    },
+    '$lineInner &': {
+      display: 'flex',
+      alignItems: 'center',
+      '$wrapperSuccess&': {
+        backgroundColor: src.progressLineInnerSuccessFrontBackgroundColor
+      },
+      '$wrapperWarning&': {
+        backgroundColor: src.progressLineInnerWarningFrontBackgroundColor
+      },
+      '$wrapperInfo&': {
+        backgroundColor: src.progressLineInnerInfoFrontBackgroundColor
+      },
+      '$wrapperDanger&': {
+        backgroundColor: src.progressLineInnerDangerFrontBackgroundColor
+      }
     }
   },
   content: {
@@ -20962,7 +21077,19 @@ var progressStyle = {
     '$lineInner &': {
       marginLeft: 'auto',
       padding: "0 ".concat(src.progressLineInnerPaddingX),
-      color: src.progressLineInnerFontColor
+      fontWeight: src.progressLineFontWeight
+    },
+    '$wrapperSuccess &': {
+      color: src.progressSuccessInnerFontColor
+    },
+    '$wrapperWarning &': {
+      color: src.progressWarningInnerFontColor
+    },
+    '$wrapperInfo &': {
+      color: src.progressInfoInnerFontColor
+    },
+    '$wrapperDanger &': {
+      color: src.progressDangerInnerFontColor
     },
     '$lineInnerRight &&': {
       // marginLeft: token.progressLineInnerPaddingX,
@@ -20979,7 +21106,7 @@ var progressStyle = {
     background: src.progressLineBackgroundColor,
     padding: '3px 8px',
     borderRadius: '2px',
-    color: src.progressLineColor,
+    color: src.progressLinePopFontColor,
     boxShadow: '0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05)'
   },
   linePopValue: {},
@@ -21020,6 +21147,19 @@ var progressStyle = {
     '& $icon': {
       width: '31.25%',
       height: '31.25%'
+    },
+    fontWeight: src.progressCircleFontWeight,
+    '&$wrapperSuccess $content': {
+      color: src.progressCircleSuccessFontColor
+    },
+    '&$wrapperWarning $content': {
+      color: src.progressCircleWarningFontColor
+    },
+    '&$wrapperInfo $content': {
+      color: src.progressCircleInfoFontColor
+    },
+    '&$wrapperDanger $content': {
+      color: src.progressCircleDangerFontColor
     }
   },
   circleBg: {
@@ -22035,7 +22175,7 @@ var sliderStyle = {
       bottom: '100%',
       '&[dir=ltr]': {
         left: 0,
-        transform: 'translate(-50%, 10px)'
+        transform: 'translate(-50%, -10px)'
       },
       '&[dir=rtl]': {
         right: 0,
@@ -25102,7 +25242,7 @@ var tag_tag = function tag(type) {
         backgroundColor: src["tag".concat(type, "FillDisabledBackgroundColor")],
         border: "1px solid ".concat(src["tag".concat(type, "FillDisabledBorderColor")]),
         '& $closeIconWrapper': {
-          fill: src["tag".concat(type, "FillFontColor")],
+          fill: src["tag".concat(type, "FillDisabledFontColor")],
           '&:hover': {
             fill: src["tag".concat(type, "FillFontColor")],
             backgroundColor: 'transparent'
@@ -25113,7 +25253,7 @@ var tag_tag = function tag(type) {
     // outline 边框风格
     '&$outline': {
       background: '#fff',
-      color: src["tag".concat(type, "FontColor")],
+      color: src["tag".concat(type, "OutlineFontColor")],
       border: "1px solid ".concat(src["tag".concat(type, "OutlineBorderColor")]),
       '& $closeIconWrapper': {
         // hover
@@ -25165,6 +25305,7 @@ var TagStyle = {
     display: 'inline-flex',
     padding: "0 ".concat(src.tagPaddingX),
     fontSize: src.tagFontSize,
+    fontWeight: src.tagFontWeight,
     borderRadius: src.tagBorderRadius,
     boxSizing: 'border-box',
     lineHeight: "calc(".concat(src.tagFontSize, " + 4px)"),
@@ -25194,6 +25335,7 @@ var TagStyle = {
   large: {
     fontSize: src.tagLargeFontSize,
     lineHeight: "calc(".concat(src.tagLargeFontSize, " + 8px)"),
+    fontWeight: src.tagLargeFontWeight,
     padding: "".concat(src.tagLargePaddingY, " ").concat(src.tagLargePaddingX),
     '& $closeIconWrapper': {
       '& svg': {
@@ -25205,6 +25347,7 @@ var TagStyle = {
   small: {
     lineHeight: "calc(".concat(src.tagSmallFontSize, " + 6px)"),
     padding: "0 ".concat(src.tagSmallPaddingX),
+    fontWeight: src.tagSmallFontWeight,
     '& $container': {
       lineHeight: "calc(".concat(src.tagSmallFontSize, " + 6px)")
     },
@@ -25429,7 +25572,7 @@ var useTextareaStyle = styled(src_textarea_textarea, 'textarea');
 ;// CONCATENATED MODULE: ../shineout-style/src/tooltip/tooltip.ts
 
 
-var tooltip_arrowGap = 12;
+var arrowGap = 12;
 var tooltip_arrowMargin = '8px';
 var tooltip_animation = {
   '@keyframes fadeIn': {
@@ -25483,6 +25626,7 @@ var tooltipStyle = objectSpread2_default()(objectSpread2_default()({}, tooltip_a
     boxShadow: src.tooltipShadow,
     color: src.tooltipColor,
     wordWrap: 'break-word',
+    pointerEvents: 'none',
     '&[data-soui-type^="light"]': {
       backgroundColor: src.tooltipLightBackgroundColor,
       color: src.tooltipLightColor,
@@ -25519,7 +25663,7 @@ var tooltipStyle = objectSpread2_default()(objectSpread2_default()({}, tooltip_a
       borderBottomColor: 'transparent'
     },
     '&[data-soui-position^="bottom"]': {
-      marginTop: tooltip_arrowGap - 2,
+      marginTop: arrowGap - 2,
       '&::before': {
         top: '0',
         left: '0',
@@ -25533,17 +25677,17 @@ var tooltipStyle = objectSpread2_default()(objectSpread2_default()({}, tooltip_a
         transform: 'translate(0, -50%) rotate(45deg)'
       },
       '&::after': {
-        top: tooltip_arrowGap * -1,
+        top: arrowGap * -1,
         left: '0',
         right: '0',
         content: '" "',
         display: 'block',
-        height: tooltip_arrowGap,
+        height: arrowGap,
         position: 'absolute'
       }
     },
     '&[data-soui-position^="top"]': {
-      marginTop: (tooltip_arrowGap - 2) * -1,
+      marginTop: (arrowGap - 2) * -1,
       '&::before': {
         bottom: '0',
         transform: 'translate(0, 50%) rotate(135deg)',
@@ -25558,22 +25702,22 @@ var tooltipStyle = objectSpread2_default()(objectSpread2_default()({}, tooltip_a
         transform: 'translate(0, 50%) rotate(-135deg)'
       },
       '&::after': {
-        bottom: tooltip_arrowGap * -1,
+        bottom: arrowGap * -1,
         left: '0',
         right: '0',
         content: '" "',
         display: 'block',
-        height: tooltip_arrowGap,
+        height: arrowGap,
         position: 'absolute'
       }
     },
     '&[data-soui-position^="left"]': {
-      marginLeft: (tooltip_arrowGap - 2) * -1,
+      marginLeft: (arrowGap - 2) * -1,
       '&[dir=ltr]': {
-        marginLeft: (tooltip_arrowGap - 2) * -1
+        marginLeft: (arrowGap - 2) * -1
       },
       '&[dir=rtl]': {
-        marginRight: (tooltip_arrowGap - 2) * -1
+        marginRight: (arrowGap - 2) * -1
       },
       '&::before': {
         right: 0,
@@ -25588,22 +25732,22 @@ var tooltipStyle = objectSpread2_default()(objectSpread2_default()({}, tooltip_a
         transform: 'translate(50%, 0) rotate(135deg)'
       },
       '&::after': {
-        left: tooltip_arrowGap * -1,
+        left: arrowGap * -1,
         top: '0',
         bottom: '0',
         content: '" "',
         display: 'block',
-        width: tooltip_arrowGap,
+        width: arrowGap,
         position: 'absolute'
       }
     },
     '&[data-soui-position^="right"]': {
-      marginLeft: tooltip_arrowGap - 2,
+      marginLeft: arrowGap - 2,
       '&[dir=ltr]': {
-        marginLeft: tooltip_arrowGap - 2
+        marginLeft: arrowGap - 2
       },
       '&[dir=rtl]': {
-        marginRight: tooltip_arrowGap - 2
+        marginRight: arrowGap - 2
       },
       '&::before': {
         left: '0',
@@ -25618,12 +25762,12 @@ var tooltipStyle = objectSpread2_default()(objectSpread2_default()({}, tooltip_a
         transform: 'translate(-50%, 0) rotate(-45deg)'
       },
       '&::after': {
-        left: tooltip_arrowGap * -1,
+        left: arrowGap * -1,
         top: '0',
         bottom: '0',
         content: '" "',
         display: 'block',
-        width: tooltip_arrowGap,
+        width: arrowGap,
         position: 'absolute'
       }
     },
@@ -32207,7 +32351,7 @@ var Popover = function Popover(props) {
       }
     };
   });
-  var noRender = !open && !context.rendered;
+  var noRender = props.lazy && !open && !context.rendered;
   if (!targetRef.current || !children || noRender) {
     return /*#__PURE__*/(0,jsx_runtime.jsx)("noscript", {
       ref: function ref(el) {
@@ -32236,18 +32380,21 @@ var Popover = function Popover(props) {
     popupGap: 0,
     destroy: destroy,
     zIndex: zIndex,
-    children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", 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)),
+    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)),
       style: colorStyle
     }, getDataAttribute({
       position: position,
       type: type
-    })), {}, {
+    })), props.attributes), {}, {
       ref: popupRef,
       onMouseLeave: events.onMouseLeave,
+      onMouseEnter: events.onMouseEnter,
       dir: config.direction,
       children: [showArrow && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-        className: popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.arrow,
+        className: classnames_default()(popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.arrow, props.arrowClass),
         dir: config.direction
       }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
         style: style,
@@ -35699,6 +35846,7 @@ var ResultInput = function ResultInput(props) {
       onChange: onChange,
       onBlur: handleBlur,
       open: focus,
+      disabled: props.disabled,
       onPaste: handlePaste
     }), /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
       className: styles.inputMirror,
@@ -35998,7 +36146,6 @@ Tag.Input = tag_input;
 
 
 
-
 function getResetMore(onFilter, container, doms) {
   if (!container || !doms || !doms.length) return -1;
   var items = Array.from(doms);
@@ -36088,14 +36235,26 @@ var More = function More(props) {
     });
     itemsLength = after.length;
   }
-  if (after && after.length > 0) {
-    after = external_root_React_commonjs2_react_commonjs_react_amd_react_.Children.map(after, function (item) {
-      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().cloneElement(item, objectSpread2_default()(objectSpread2_default()({}, item.props), {}, {
+  if (showNum < 0 || showNum >= data.length) {
+    return /*#__PURE__*/(0,jsx_runtime.jsxs)((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, {
+      children: [data, /*#__PURE__*/(0,jsx_runtime.jsx)(base_src_tag_tag, {
+        className: styles.tag,
+        jssStyle: jssStyle,
+        size: size,
         style: {
-          opcacity: 1
-        }
-      }));
-    }) || after;
+          position: 'absolute',
+          zIndex: -100,
+          userSelect: 'none',
+          msUserSelect: 'none',
+          contain: 'layout'
+        },
+        mode: visible ? 'fill' : 'bright',
+        color: visible ? 'info' : 'default',
+        children: /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
+          children: "+"
+        })
+      }, 'hidden')]
+    });
   }
   return /*#__PURE__*/(0,jsx_runtime.jsxs)((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, {
     children: [shouldShowMore ? data : before, /*#__PURE__*/(0,jsx_runtime.jsxs)("span", {
@@ -36250,7 +36409,8 @@ var result_Result = function Result(props) {
         convertBr: convertBr,
         onInputBlur: onInputBlur,
         onClearCreatedData: onClearCreatedData,
-        placeholder: placeholder2
+        placeholder: placeholder2,
+        disabled: isFunc(disabled) ? false : !!disabled
       })
     }, 'input');
   };
@@ -40358,7 +40518,8 @@ var TimeScroll = function TimeScroll(props) {
   var elRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
       timer: null,
-      changeTimer: null
+      changeTimer: null,
+      controlScroll: false
     }),
     context = _useRef.current;
   var _useResize = useResize({
@@ -40371,11 +40532,12 @@ var TimeScroll = function TimeScroll(props) {
       var el = elRef.current;
       if (!el) return;
       var lineHeight = el.childNodes[0].clientHeight;
+      context.controlScroll = true;
       el.scrollTop = lineHeight * index;
     }, immudiate ? 0 : 30);
   };
   var changeToIndex = function changeToIndex(index) {
-    if (!times[index] || times[index].disabled || index === currentIndex) {
+    if (!times[index] || times[index].disabled || index === currentIndex && !props.isEmpty) {
       return;
     }
     onChange(times[index].date);
@@ -40383,6 +40545,10 @@ var TimeScroll = function TimeScroll(props) {
   var handleScroll = function handleScroll(e) {
     if (context.changeTimer) clearTimeout(context.changeTimer);
     var el = e.currentTarget;
+    if (context.controlScroll) {
+      context.controlScroll = false;
+      return;
+    }
     context.changeTimer = setTimeout(function () {
       if (!el) return;
       var lineHeight = el.childNodes[0].clientHeight;
@@ -40483,6 +40649,7 @@ var Time = function Time(props) {
           jssStyle: props.jssStyle,
           times: item.times,
           currentIndex: item.currentIndex,
+          isEmpty: props.value === null || props.value === undefined,
           onChange: func.handleChange
         }, item.mode);
       })
@@ -42722,10 +42889,9 @@ var Modal = function Modal(props) {
     return function () {
       var _props$shouldDestroy2;
       (_props$shouldDestroy2 = props.shouldDestroy) === null || _props$shouldDestroy2 === void 0 || _props$shouldDestroy2.call(props, true);
-      if (props.autoShow) {
-        var _props$onClose2;
-        (_props$onClose2 = props.onClose) === null || _props$onClose2 === void 0 || _props$onClose2.call(props);
-      }
+      // if (props.autoShow) {
+      //   props.onClose?.();
+      // }
       if (context.isMask) {
         context.isMask = false;
         hasMask = false;
@@ -42958,6 +43124,7 @@ var method = function method(type, jssStyle) {
       children: options.content || options.children
     }));
     ReactRender(Content, root);
+    return destroyModal;
   };
 };
 /* harmony default export */ var modal_func = ({
@@ -44614,6 +44781,13 @@ var useForm = function useForm(props) {
       size: size
     };
   }, [labelWidth, labelAlign, labelVerticalAlign, keepErrorHeight, inline, disabled, size]);
+  var updateValue = function updateValue() {
+    if (props.value !== context.lastValue && props.value !== context.value) {
+      context.value = deepClone(props.value) || emptyObj;
+      context.lastValue = props.value;
+    }
+  };
+  updateValue();
   external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect(function () {
     // 服务端错误更新
     if (!props.error) context.serverErrors = {};else {
@@ -44630,8 +44804,8 @@ var useForm = function useForm(props) {
   // 默认值更新
   external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect(function () {
     context.removeLock = false;
-    if (props.value === context.lastValue) return;
-    context.value = deepClone(props.value) || emptyObj;
+    // 内部 onChange 改的 value, 不需要更新
+    if (props.value === context.value) return;
     if (initValidate && !context.resetTime) {
       var keys = Object.keys(context.validateMap).filter(function (key) {
         var oldValue = deepGet(context.lastValue || emptyObj, key);
@@ -50842,7 +51016,8 @@ var useMenu = function useMenu(props) {
   var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
       updateMap: new Map(),
       activeId: '',
-      cachedOpenKeys: props.openKeys || []
+      cachedOpenKeys: props.openKeys || [],
+      updateTimer: 0
     }),
     context = _useRef.current;
   var render = use_render();
@@ -50897,14 +51072,23 @@ var useMenu = function useMenu(props) {
       updateItem(getStatus);
     });
   });
+  var updateWithThreshold = use_persist_fn(function () {
+    if (context.updateTimer) clearTimeout(context.updateTimer);
+    context.updateTimer = window.setTimeout(function () {
+      update();
+      // 需要更新两次 否则 inPath 状态错误
+      update();
+    }, 50);
+  });
   var bindUpdate = function bindUpdate(id, updateItem) {
     context.updateMap.set(id, updateItem);
+    updateWithThreshold();
   };
   var unbindUpdate = function unbindUpdate(id) {
     context.updateMap.delete(id);
   };
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    update();
+    updateWithThreshold();
   });
   return {
     openKeys: value,
@@ -50923,15 +51107,13 @@ var useMenu = function useMenu(props) {
 var useMenuItem = function useMenuItem(props) {
   var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
       id: '',
-      timer: null,
-      isUp: false
+      timer: null
     }),
     context = _useRef.current;
   var _props$parentId = props.parentId,
     parentId = _props$parentId === void 0 ? '' : _props$parentId,
-    dataItem = props.dataItem,
-    _props$toggleDuration = props.toggleDuration,
-    toggleDuration = _props$toggleDuration === void 0 ? 200 : _props$toggleDuration;
+    dataItem = props.dataItem;
+  var isLeaf = ((dataItem || {}).children || []).length === 0;
   if (!context.id) {
     context.id = "".concat(parentId, ",").concat(getUidStr());
   }
@@ -50946,6 +51128,10 @@ var useMenuItem = function useMenuItem(props) {
     _useState4 = slicedToArray_default()(_useState3, 2),
     isInPath = _useState4[0],
     setInPath = _useState4[1];
+  var _useState5 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
+    _useState6 = slicedToArray_default()(_useState5, 2),
+    isUp = _useState6[0],
+    setIsUp = _useState6[1];
   var update = use_persist_fn(function (getStatus) {
     var status = getStatus(context.id, props.dataItem);
     if (isChecked !== status.isChecked) {
@@ -50978,8 +51164,11 @@ var useMenuItem = function useMenuItem(props) {
         props.onClick(dataItem);
       }
     }
-    var isLeaf = ((dataItem || {}).children || []).length === 0;
-    if (!isLeaf) e.nativeEvent.stopImmediatePropagation();
+    // 阻止冒泡
+    if (!isLeaf) {
+      e.stopPropagation();
+      e.nativeEvent.stopImmediatePropagation();
+    }
   });
   var handleExpandClick = use_persist_fn(function (e) {
     e.stopPropagation();
@@ -50996,29 +51185,29 @@ var useMenuItem = function useMenuItem(props) {
     }
   });
   var handleMouseLeave = use_persist_fn(function () {
-    if (expandAble && props.mode !== 'inline') {
-      if (context.timer) {
-        clearTimeout(context.timer);
-        context.timer = null;
-      }
-      context.timer = setTimeout(function () {
-        props.onOpenChange(function (before) {
-          var openKeySet = new Set(before);
-          openKeySet.delete(props.keyResult);
-          return Array.from(openKeySet);
-        });
-      }, toggleDuration);
-      document.removeEventListener('click', handleMouseLeave);
-    }
+    // if (expandAble && props.mode !== 'inline') {
+    // if (context.timer) {
+    //   clearTimeout(context.timer);
+    //   context.timer = null;
+    // }
+    // context.timer = setTimeout(() => {
+    //   props.onOpenChange((before) => {
+    //     const openKeySet = new Set(before);
+    //     openKeySet.delete(props.keyResult);
+    //     return Array.from(openKeySet);
+    //   });
+    // }, toggleDuration);
+    // document.removeEventListener('click', handleMouseLeave);
+    // }
   });
   var handleMouseEnter = use_persist_fn(function (e) {
     if (expandAble && props.mode !== 'inline') {
       var _props$scrollRef;
-      if (context.timer) {
-        clearTimeout(context.timer);
-        context.timer = null;
-      }
-      var isUp = false;
+      // if (context.timer) {
+      //   clearTimeout(context.timer);
+      //   context.timer = null;
+      // }
+      var up = false;
       if (props.mode === 'vertical-auto' && (_props$scrollRef = props.scrollRef) !== null && _props$scrollRef !== void 0 && _props$scrollRef.current) {
         var _props$scrollRef$curr;
         var target = e.currentTarget;
@@ -51026,15 +51215,17 @@ var useMenuItem = function useMenuItem(props) {
         var scrollRect = (_props$scrollRef$curr = props.scrollRef.current) === null || _props$scrollRef$curr === void 0 ? void 0 : _props$scrollRef$curr.getBoundingClientRect();
         var topLine = scrollRect === null || scrollRect === void 0 ? void 0 : scrollRect.top;
         var bottomLine = scrollRect === null || scrollRect === void 0 ? void 0 : scrollRect.bottom;
-        isUp = rect.bottom - topLine > (bottomLine - topLine) / 2;
+        up = rect.bottom - topLine > (bottomLine - topLine) / 2;
       }
-      context.isUp = isUp;
-      props.onOpenChange(function (before) {
-        var openKeySet = new Set(before);
-        openKeySet.add(props.keyResult);
-        return Array.from(openKeySet);
-      });
-      document.addEventListener('click', handleMouseLeave);
+      if (isUp !== up) {
+        setIsUp(up);
+      }
+      // props.onOpenChange((before) => {
+      //   const openKeySet = new Set(before);
+      //   openKeySet.add(props.keyResult);
+      //   return Array.from(openKeySet);
+      // });
+      // document.addEventListener('click', handleMouseLeave);
     }
   });
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
@@ -51050,11 +51241,12 @@ var useMenuItem = function useMenuItem(props) {
     isOpen: gopenKeySet.has(props.keyResult),
     isDisabled: isDisabled,
     expandAble: expandAble,
-    isUp: context.isUp,
+    isUp: isUp,
     handleItemClick: handleItemClick,
     handleMouseEnter: handleMouseEnter,
     handleMouseLeave: handleMouseLeave,
-    handleExpandClick: handleExpandClick
+    handleExpandClick: handleExpandClick,
+    isLeaf: isLeaf
   };
 };
 /* harmony default export */ var use_menu_item = (useMenuItem);
@@ -51068,18 +51260,23 @@ var useMenuItem = function useMenuItem(props) {
 
 
 
+
+
 var MenuItem = function MenuItem(props) {
   var _props$jssStyle, _props$jssStyle$menu;
   var classes = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 || (_props$jssStyle$menu = _props$jssStyle.menu) === null || _props$jssStyle$menu === void 0 ? void 0 : _props$jssStyle$menu.call(_props$jssStyle);
   var children = props.dataItem.children || [];
-  var itemContentRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
-  var timer = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var _props$inlineIndent = props.inlineIndent,
     inlineIndent = _props$inlineIndent === void 0 ? 24 : _props$inlineIndent,
     _props$frontCaretType = props.frontCaretType,
     frontCaretType = _props$frontCaretType === void 0 ? 'solid' : _props$frontCaretType,
-    collapse = props.collapse;
+    mode = props.mode,
+    _props$toggleDuration = props.toggleDuration,
+    toggleDuration = _props$toggleDuration === void 0 ? 200 : _props$toggleDuration;
   var config = useConfig();
+  var shoudPop = mode === 'vertical' || mode === 'vertical-auto' || mode === 'horizontal';
+  var isVertical = mode === 'vertical' || mode === 'vertical-auto';
+  var isSubHorizontal = mode === 'horizontal' && props.level > 0;
   var hasExpandAbleChildren = children.some(function (item) {
     return item && item.children && (props.looseChildren || item.children.length);
   });
@@ -51095,7 +51292,6 @@ var MenuItem = function MenuItem(props) {
       parentId: props.parentId,
       looseChildren: props.looseChildren,
       parentSelectable: props.parentSelectable,
-      toggleDuration: props.toggleDuration,
       disabled: props.disabled,
       mode: props.mode,
       scrollRef: props.scrollRef
@@ -51111,41 +51307,107 @@ var MenuItem = function MenuItem(props) {
     handleItemClick = _useMenuItem.handleItemClick,
     handleMouseEnter = _useMenuItem.handleMouseEnter,
     handleMouseLeave = _useMenuItem.handleMouseLeave;
+  var renderChildren = function renderChildren() {
+    var _items;
+    var items = children;
+    var isTitle = false;
+    if (!((_items = items) !== null && _items !== void 0 && _items.length)) {
+      if (props.level === 0 && props.collapse && shoudPop) {
+        items = [props.dataItem];
+        isTitle = true;
+      } else {
+        return null;
+      }
+    }
+    var content = function content(close) {
+      return /*#__PURE__*/(0,jsx_runtime.jsx)("ul", {
+        className: classnames_default()(shoudPop && (classes === null || classes === void 0 ? void 0 : classes.childrenShow), classes === null || classes === void 0 ? void 0 : classes.children, isUp && (classes === null || classes === void 0 ? void 0 : classes.childrenUp), hasExpandAbleChildren && (classes === null || classes === void 0 ? void 0 : classes.childrenHasExpand))
+        // 子菜单点击弹出
+        ,
+        onClick: close,
+        dir: config.direction,
+        children: items.map(function (item, index) {
+          var key = getKey(props.keygen, item, index);
+          return /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.createElement)(MenuItem, objectSpread2_default()(objectSpread2_default()({}, props), {}, {
+            mode: mode,
+            parentId: id,
+            dataItem: item,
+            key: key,
+            index: index,
+            keyResult: key,
+            level: props.level + 1,
+            renderIcon: isTitle ? undefined : props.renderIcon
+          }));
+        })
+      });
+    };
+    if (shoudPop) {
+      var position = isVertical || isSubHorizontal ? isUp ? 'right-bottom' : 'right-top' : 'bottom';
+      return /*#__PURE__*/(0,jsx_runtime.jsx)(src_popover_popover, {
+        mouseLeaveDelay: toggleDuration,
+        className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.popover),
+        attributes: getDataAttribute({
+          theme: props.theme || 'light',
+          mode: isVertical ? 'vertical' : mode
+        }),
+        jssStyle: props.jssStyle,
+        arrowClass: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.popArrow, props.theme === 'dark' && (classes === null || classes === void 0 ? void 0 : classes.popArrowDark)),
+        position: position,
+        lazy: false,
+        children: function children(close) {
+          return content(close);
+        }
+      });
+    }
+    return content();
+  };
   var renderItem = function renderItem() {
+    var icon = isFunc(props.renderIcon) ? props.renderIcon(props.dataItem) : null;
+    var iconEl = icon ? /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+      className: classes === null || classes === void 0 ? void 0 : classes.titleIcon,
+      children: icon
+    }) : null;
+    var indent = props.mode === 'inline' && props.level ? /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+      style: {
+        width: props.level * inlineIndent,
+        flexShrink: 0
+      }
+    }) : null;
     var item = render_render(props.renderItem, props.dataItem, props.index);
     var link = props.linkKey ? getKey(props.linkKey, props.dataItem, props.index) : undefined;
     var title = null;
     if (isLink(item)) {
       var mergeClass = classnames_default()(classes === null || classes === void 0 ? void 0 : classes.title, item.props && item.props.className);
       title = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.cloneElement)(item, {
-        className: mergeClass
+        className: mergeClass,
+        children: /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
+          children: [indent, iconEl, /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+            className: classes === null || classes === void 0 ? void 0 : classes.titleContent,
+            children: item.props.children
+          })]
+        })
       });
     } else {
       var linkProps = {
         className: classes === null || classes === void 0 ? void 0 : classes.title,
         href: link
       };
-      title = /*#__PURE__*/(0,jsx_runtime.jsx)("a", objectSpread2_default()(objectSpread2_default()({}, linkProps), {}, {
-        children: wrapSpan(item)
+      title = /*#__PURE__*/(0,jsx_runtime.jsxs)("a", objectSpread2_default()(objectSpread2_default()({}, linkProps), {}, {
+        children: [indent, iconEl, /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+          className: classes === null || classes === void 0 ? void 0 : classes.titleContent,
+          children: wrapSpan(item)
+        })]
       }));
     }
-    var indent = props.mode === 'inline' && props.level ? /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-      style: {
-        width: props.level * inlineIndent,
-        flexShrink: 0
-      }
-    }) : null;
-    var isFirstCollapseItem = collapse && props.level === 0;
     if (props.frontCaret) {
       return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-        ref: itemContentRef,
-        className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.itemContent, classes === null || classes === void 0 ? void 0 : classes.itemContentFront, isFirstCollapseItem && (classes === null || classes === void 0 ? void 0 : classes.itemContentHide)),
+        className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.itemContent, classes === null || classes === void 0 ? void 0 : classes.itemContentFront),
         onClick: handleItemClick,
-        children: [indent, /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
           style: {
             color: props.caretColor
           },
-          className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.expand, classes === null || classes === void 0 ? void 0 : classes.expandFront, props.parentSelectable && (classes === null || classes === void 0 ? void 0 : classes.expandHover)),
+          className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.expand, classes === null || classes === void 0 ? void 0 : classes.expandFront, (isVertical || isSubHorizontal) && (classes === null || classes === void 0 ? void 0 : classes.expandVertical), props.parentSelectable && (classes === null || classes === void 0 ? void 0 : classes.expandHover)),
           onClick: handleExpandClick,
           dir: config.direction,
           children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
@@ -51156,15 +51418,14 @@ var MenuItem = function MenuItem(props) {
       });
     } else {
       return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-        ref: itemContentRef,
-        className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.itemContent, classes === null || classes === void 0 ? void 0 : classes.itemContentBack, isFirstCollapseItem && (classes === null || classes === void 0 ? void 0 : classes.itemContentHide)),
+        className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.itemContent, classes === null || classes === void 0 ? void 0 : classes.itemContentBack),
         onClick: handleItemClick,
-        children: [indent, title, expandAble && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        children: [title, expandAble && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
           onClick: handleExpandClick,
           style: {
             color: props.caretColor
           },
-          className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.expand, classes === null || classes === void 0 ? void 0 : classes.expandBack, props.parentSelectable && (classes === null || classes === void 0 ? void 0 : classes.expandHover)),
+          className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.expand, classes === null || classes === void 0 ? void 0 : classes.expandBack, (isVertical || isSubHorizontal) && (classes === null || classes === void 0 ? void 0 : classes.expandVertical), props.parentSelectable && (classes === null || classes === void 0 ? void 0 : classes.expandHover)),
           dir: config.direction,
           children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
             className: classes === null || classes === void 0 ? void 0 : classes.icon,
@@ -51174,50 +51435,12 @@ var MenuItem = function MenuItem(props) {
       });
     }
   };
-  var renderCollapseItem = function renderCollapseItem() {
-    if (!props.renderCollapse) return null;
-    var isFirstCollapseItem = props.level === 0 && collapse;
-    return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-      className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.collapseItem, isInPath && (classes === null || classes === void 0 ? void 0 : classes.collapseItemInPath), !isFirstCollapseItem && (classes === null || classes === void 0 ? void 0 : classes.collapseItemHide)),
-      onClick: handleItemClick,
-      children: props.renderCollapse(props.dataItem, props.index)
-    });
-  };
-  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    if (!itemContentRef.current) return;
-    if (collapse === undefined) return;
-    if (timer.current) clearTimeout(timer.current);
-    itemContentRef.current.style.overflow = 'hidden';
-    itemContentRef.current.style.whiteSpace = 'nowrap';
-    timer.current = setTimeout(function () {
-      if (!itemContentRef.current) return;
-      itemContentRef.current.style.overflow = '';
-      itemContentRef.current.style.whiteSpace = '';
-    }, 300);
-    return function () {
-      if (timer.current) clearTimeout(timer.current);
-    };
-  }, [collapse]);
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("li", {
     className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.item, isDisabled && (classes === null || classes === void 0 ? void 0 : classes.itemDisabled), isInPath && (classes === null || classes === void 0 ? void 0 : classes.itemInPath), isOpen && (classes === null || classes === void 0 ? void 0 : classes.itemOpen), isChecked && (classes === null || classes === void 0 ? void 0 : classes.itemActive), expandAble && (classes === null || classes === void 0 ? void 0 : classes.itemHasChildren)),
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     dir: config.direction,
-    children: [renderItem(), renderCollapseItem(), children.length > 0 && /*#__PURE__*/(0,jsx_runtime.jsx)("ul", {
-      className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.children, isUp && (classes === null || classes === void 0 ? void 0 : classes.childrenUp), hasExpandAbleChildren && (classes === null || classes === void 0 ? void 0 : classes.childrenHasExpand)),
-      dir: config.direction,
-      children: children.map(function (item, index) {
-        var key = getKey(props.keygen, item, index);
-        return /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.createElement)(MenuItem, objectSpread2_default()(objectSpread2_default()({}, props), {}, {
-          parentId: id,
-          dataItem: item,
-          key: key,
-          index: index,
-          keyResult: key,
-          level: props.level + 1
-        }));
-      })
-    })]
+    children: [renderItem(), renderChildren()]
   });
 };
 /* harmony default export */ var menu_item = (MenuItem);
@@ -51430,7 +51653,7 @@ var scroll_Scroll = function Scroll(props) {
 
 var menu_emptyArray = [];
 var Menu = function Menu(props) {
-  var _props$jssStyle, _props$jssStyle$menu, _props$style;
+  var _props$jssStyle, _props$jssStyle$menu;
   var _props$data = props.data,
     data = _props$data === void 0 ? menu_emptyArray : _props$data,
     _props$mode = props.mode,
@@ -51438,7 +51661,19 @@ var Menu = function Menu(props) {
     _props$theme = props.theme,
     theme = _props$theme === void 0 ? 'light' : _props$theme,
     collapse = props.collapse;
-  var mode = collapse ? 'vertical' : modeProps;
+  var render = useRender();
+
+  // const [inTransition, setInTransition] = useState(false);
+  var mode = collapse ? 'vertical-auto' : modeProps;
+  var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
+      inTransition: false,
+      lastCollapse: !!props.collapse
+    }),
+    context = _useRef.current;
+  if (props.mode !== 'horizontal' && !!context.lastCollapse !== !!collapse) {
+    context.inTransition = true;
+    context.lastCollapse = !!props.collapse;
+  }
   var classes = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 || (_props$jssStyle$menu = _props$jssStyle.menu) === null || _props$jssStyle$menu === void 0 ? void 0 : _props$jssStyle$menu.call(_props$jssStyle);
   var isVertical = mode === 'vertical' || mode === 'vertical-auto';
   var isHorizontal = mode === 'horizontal';
@@ -51446,16 +51681,12 @@ var Menu = function Menu(props) {
     _useState2 = slicedToArray_default()(_useState, 2),
     hasOpen = _useState2[0],
     setHasOpen = _useState2[1];
-  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)([]),
-    _useState4 = slicedToArray_default()(_useState3, 2),
-    collapseOpenKeys = _useState4[0],
-    setCollapseOpenKeys = _useState4[1];
   var _useMenu = use_menu({
       data: data,
       active: props.active,
       defaultOpenKeys: props.defaultOpenKeys,
-      openKeys: props.collapse ? collapseOpenKeys : props.openKeys,
-      onOpenChange: props.collapse ? setCollapseOpenKeys : props.onOpenChange
+      openKeys: props.openKeys,
+      onOpenChange: props.onOpenChange
     }),
     openKeys = _useMenu.openKeys,
     onOpenChange = _useMenu.onOpenChange,
@@ -51467,11 +51698,16 @@ var Menu = function Menu(props) {
     return item && item.children && (props.looseChildren || item.children.length);
   });
   var showScrollBar = isHorizontal || isVertical;
-  var style = objectSpread2_default()({}, props.style);
-  if (collapse) delete style.width;
-  var listStyle = isVertical && !collapse ? {
-    width: (_props$style = props.style) === null || _props$style === void 0 ? void 0 : _props$style.width
-  } : undefined;
+  var renderHeader = function renderHeader() {
+    if (modeProps === 'horizontal') return;
+    if (props.header) {
+      return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        className: classes === null || classes === void 0 ? void 0 : classes.header,
+        children: props.header
+      });
+    }
+    return null;
+  };
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     var newOpen = (openKeys || []).filter(function (k) {
       return data.find(function (d, i) {
@@ -51482,24 +51718,32 @@ var Menu = function Menu(props) {
       setHasOpen(newOpen);
     }
   }, [data, openKeys]);
-  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-    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.collapse)),
+  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.wrapperCollpase), context.inTransition && (classes === null || classes === void 0 ? void 0 : classes.wrapperInTransition))
+  }, getDataAttribute({
+    theme: theme,
+    mode: isVertical ? 'vertical' : mode
+  })), {}, {
     style: objectSpread2_default()({
       height: props.height
-    }, style),
-    children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+    }, props.style),
+    onTransitionEnd: function onTransitionEnd(e) {
+      if (e.target === e.currentTarget) {
+        context.inTransition = false;
+        render();
+      }
+    },
+    children: [renderHeader(), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
       className: classes === null || classes === void 0 ? void 0 : classes.scrollbox,
       ref: scrollRef,
       children: /*#__PURE__*/(0,jsx_runtime.jsx)("ul", {
         className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.root, hasExpand && (classes === null || classes === void 0 ? void 0 : classes.childrenHasExpand)),
-        style: listStyle,
         children: data.map(function (item, index) {
           var key = getKey(props.keygen, item, index);
           return /*#__PURE__*/(0,jsx_runtime.jsx)(menu_item, {
             level: 0,
             index: index,
             parentId: "",
-            collapse: collapse,
             dataItem: item,
             keyResult: key,
             openKeys: openKeys,
@@ -51514,7 +51758,6 @@ var Menu = function Menu(props) {
             toggleDuration: props.toggleDuration,
             disabled: props.disabled,
             renderItem: props.renderItem,
-            renderCollapse: props.renderCollapse,
             keygen: props.keygen,
             jssStyle: props.jssStyle,
             linkKey: props.linkKey,
@@ -51522,7 +51765,10 @@ var Menu = function Menu(props) {
             frontCaretType: props.frontCaretType,
             caretColor: props.caretColor,
             inlineIndent: props.inlineIndent,
-            scrollRef: scrollRef
+            scrollRef: scrollRef,
+            theme: theme,
+            renderIcon: props.renderIcon,
+            collapse: collapse
           }, key);
         })
       })
@@ -51532,7 +51778,7 @@ var Menu = function Menu(props) {
       data: data,
       jssStyle: props.jssStyle
     })]
-  });
+  }));
 };
 /* harmony default export */ var src_menu_menu = (Menu);
 ;// CONCATENATED MODULE: ./src/menu/menu.tsx
@@ -51542,17 +51788,79 @@ var Menu = function Menu(props) {
 
 
 var menu_jssStyle = {
-  menu: useMenuStyle
+  menu: useMenuStyle,
+  popover: usePopoverStyle
 };
 /* harmony default export */ var src_menu_menu_0 = (function (props) {
   return /*#__PURE__*/(0,jsx_runtime.jsx)(src_menu_menu, objectSpread2_default()({
     jssStyle: menu_jssStyle
   }, props));
 });
+;// CONCATENATED MODULE: ../base/src/menu/search.tsx
+
+
+var search_excluded = ["tip", "status", "innerTitle", "placeTitle", "onSearchClick", "collpase", "theme", "jssStyle", "className", "style"];
+
+
+
+
+
+var Search = function Search(props) {
+  var _jssStyle$menuSearch;
+  var _tip = props.tip,
+    _status = props.status,
+    _innerTitle = props.innerTitle,
+    _placeTitle = props.placeTitle,
+    onSearchClick = props.onSearchClick,
+    collpase = props.collpase,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? 'light' : _props$theme,
+    jssStyle = props.jssStyle,
+    className = props.className,
+    style = props.style,
+    rest = objectWithoutProperties_default()(props, search_excluded);
+  var classes = jssStyle === null || jssStyle === void 0 || (_jssStyle$menuSearch = jssStyle.menuSearch) === null || _jssStyle$menuSearch === void 0 ? void 0 : _jssStyle$menuSearch.call(jssStyle);
+  var Search = /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+    className: classes === null || classes === void 0 ? void 0 : classes.search,
+    children: icons_config.menu.Search
+  });
+  return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+    className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.wrapper, theme === 'light' && (classes === null || classes === void 0 ? void 0 : classes.wrapperLight), theme === 'dark' && (classes === null || classes === void 0 ? void 0 : classes.wrapperDark), !!rest.disabled && (classes === null || classes === void 0 ? void 0 : classes.wrapperDisabled), collpase && (classes === null || classes === void 0 ? void 0 : classes.wrapperCollapsed), className),
+    style: style,
+    onClick: onSearchClick,
+    children: collpase ? Search : /*#__PURE__*/(0,jsx_runtime.jsx)(base_src_input_input, objectSpread2_default()(objectSpread2_default()({
+      prefix: Search,
+      className: classes === null || classes === void 0 ? void 0 : classes.input
+    }, rest), {}, {
+      jssStyle: jssStyle
+    }))
+  });
+};
+/* harmony default export */ var src_menu_search = (Search);
+;// CONCATENATED MODULE: ./src/menu/search.tsx
+
+
+
+
+
+var search_jssStyle = {
+  menuSearch: useMenuSearchStyle,
+  input: useInputStyle,
+  popover: usePopoverStyle
+};
+/* harmony default export */ var src_menu_search_0 = (function (props) {
+  return /*#__PURE__*/(0,jsx_runtime.jsx)(src_menu_search, objectSpread2_default()({
+    jssStyle: search_jssStyle
+  }, props));
+});
 ;// CONCATENATED MODULE: ./src/menu/index.ts
 
+
+var SearchComp = src_menu_search_0;
+SearchComp.displayName = 'ShineoutMenuSearch';
 var MenuComp = src_menu_menu_0;
 MenuComp.displayName = 'ShineoutMenu';
+MenuComp.Search = SearchComp;
 /* harmony default export */ var src_menu_0 = (MenuComp);
 ;// CONCATENATED MODULE: ../base/src/message/message.tsx
 'use client';
@@ -62788,7 +63096,7 @@ var upload_interface = __webpack_require__(4412);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.2.0-beta.1'
+  version: '3.2.0-beta.2'
 });
 }();
 /******/ 	return __webpack_exports__;