@para-ui/core 4.0.62 → 4.0.63

package/DynamicMultiBox/index.js

@@ -395,7 +395,7 @@ var localeJson = {
   en
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-dynamic-multi-box {\n  width: 100%;\n}\n.paraui-v4-dynamic-multi-box svg {\n  overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content {\n  width: 100%;\n  position: relative;\n  overflow-x: auto;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row {\n  display: flex;\n  flex: 1;\n  align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row .title-config-row-item {\n  display: flex;\n  align-items: center;\n  min-width: 180px;\n  margin-right: 10px;\n  flex-shrink: 0;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row .row-form-switch {\n  flex: 0;\n  min-width: 80px;\n  align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 {\n  width: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 32px;\n  cursor: pointer;\n  margin-right: 4px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box {\n  height: 24px;\n  width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgb(247, 248, 250);\n  border-radius: 2px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box svg {\n  font-size: 20px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box svg:hover {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon svg {\n  font-size: 20px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon:hover {\n  background: rgb(247, 248, 250);\n  border-radius: 4px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon:hover svg {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .hidden-icon {\n  display: none;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .center-line {\n  width: 1px;\n  height: 12px;\n  background-color: rgb(212, 218, 227);\n  margin: 0 3px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 {\n  width: 72px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form {\n  width: 100%;\n  display: flex;\n  align-items: flex-start;\n  min-height: 42px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .paraui-v4-select {\n  overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .form-item {\n  display: flex;\n  align-items: flex-start;\n  min-width: 180px;\n  margin-right: 10px;\n  flex-shrink: 0;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .form-item-icon {\n  margin-left: 10px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .row-form-switch {\n  flex: 0;\n  box-sizing: content-box;\n  align-items: center;\n  height: 32px;\n  min-width: 80px;\n}\n.paraui-v4-dynamic-multi-box .add-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 32px;\n  background: rgb(247, 248, 250);\n  border: 1px dashed rgb(212, 218, 227);\n  border-radius: 4px;\n}\n.paraui-v4-dynamic-multi-box .add-button .text {\n  font-size: 14px;\n  margin-left: 4px;\n}\n.paraui-v4-dynamic-multi-box .add-button.add-button-scroll {\n  margin-top: 14px;\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button {\n  cursor: pointer;\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button .text {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button:hover {\n  background: rgb(240, 245, 255);\n  border: 1px dashed rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add {\n  cursor: not-allowed;\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add .text {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add svg {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-dynamic-multi-box .paraui-v4-comboselect,\n.paraui-v4-dynamic-multi-box .paraui-v4-picker-wrapper {\n  width: 100%;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch .switch-text {\n  color: rgb(161, 168, 179);\n  margin-right: 4px;\n  overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch .switch {\n  flex: 1;\n}\n\n.paraui-v4-dynamic-multi-box-popover .filter-config {\n  width: 140px;\n  padding-top: 4px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .title {\n  font-size: 12px;\n  color: rgb(161, 168, 179);\n  line-height: 30px;\n  padding: 0 10px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .paraui-v4-checkbox-group {\n  max-height: 320px;\n  overflow-y: auto;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .paraui-v4-checkbox-group.paraui-v4-checkbox-group-column .checkbox-group-content > span {\n  padding: 0 10px;\n  margin-bottom: 0;\n  line-height: 30px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .restore-default {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 36px;\n  color: rgb(46, 101, 230);\n  cursor: pointer;\n  border-top: 1px solid rgb(247, 248, 250);\n}\n.paraui-v4-dynamic-multi-box-popover .no-other-property {\n  width: 200px;\n  padding: 16px 0;\n  text-align: center;\n  font-size: 12px;\n  color: rgb(161, 168, 179);\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-dynamic-multi-box {\n  width: 100%;\n}\n.paraui-v4-dynamic-multi-box svg {\n  overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content {\n  width: 100%;\n  position: relative;\n  overflow-x: auto;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row {\n  display: flex;\n  flex: 1;\n  align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row .title-config-row-item {\n  display: flex;\n  align-items: center;\n  min-width: 180px;\n  margin-right: 10px;\n  flex-shrink: 0;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row .row-form-switch {\n  flex: 0;\n  min-width: 80px;\n  align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 {\n  width: 32px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operator-column-icon-panel, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operator-column-icon-panel, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operator-column-icon-panel, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operator-column-icon-panel {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 32px;\n  cursor: pointer;\n  margin-right: 4px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operator-column-icon-panel .svg-box, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operator-column-icon-panel .svg-box, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operator-column-icon-panel .svg-box, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operator-column-icon-panel .svg-box {\n  height: 24px;\n  width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgb(247, 248, 250);\n  border-radius: 2px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operator-column-icon-panel .svg-box svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operator-column-icon-panel .svg-box svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operator-column-icon-panel .svg-box svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operator-column-icon-panel .svg-box svg {\n  font-size: 20px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box svg:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operator-column-icon-panel .svg-box svg:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operator-column-icon-panel .svg-box svg:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operator-column-icon-panel .svg-box svg:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operator-column-icon-panel .svg-box svg:hover {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operator-column-icon, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operator-column-icon, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operator-column-icon, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operator-column-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operator-column-icon svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operator-column-icon svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operator-column-icon svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operator-column-icon svg {\n  font-size: 20px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operator-column-icon:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operator-column-icon:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operator-column-icon:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operator-column-icon:hover {\n  background: rgb(247, 248, 250);\n  border-radius: 4px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon:hover svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operator-column-icon:hover svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operator-column-icon:hover svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operator-column-icon:hover svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operator-column-icon:hover svg {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .hidden-icon, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .hidden-icon, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .hidden-icon, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .hidden-icon, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .hidden-icon {\n  display: none;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .center-line, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .center-line, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .center-line, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .center-line, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .center-line {\n  width: 1px;\n  height: 12px;\n  background-color: rgb(212, 218, 227);\n  margin: 0 3px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operation-button.disabled-operation, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operation-button.disabled-operation, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operation-button.disabled-operation, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operation-button.disabled-operation, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operation-button.disabled-operation {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operation-button.disabled-operation:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operation-button.disabled-operation:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operation-button.disabled-operation:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operation-button.disabled-operation:hover, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operation-button.disabled-operation:hover {\n  background: transparent;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operation-button.disabled-operation:hover svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operation-button.disabled-operation:hover svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operation-button.disabled-operation:hover svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operation-button.disabled-operation:hover svg, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operation-button.disabled-operation:hover svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operation-button .operation-text, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 .operation-button .operation-text, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 .operation-button .operation-text, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 .operation-button .operation-text, .paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 .operation-button .operation-text {\n  margin-left: 4px;\n  font-size: 12px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 {\n  width: 72px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-120 {\n  width: 112px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-160 {\n  width: 152px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-200 {\n  width: 192px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form {\n  width: 100%;\n  display: flex;\n  align-items: flex-start;\n  min-height: 42px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .paraui-v4-select {\n  overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .form-item {\n  display: flex;\n  align-items: flex-start;\n  min-width: 180px;\n  margin-right: 10px;\n  flex-shrink: 0;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .form-item-icon {\n  margin-left: 10px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .row-form-switch {\n  flex: 0;\n  box-sizing: content-box;\n  align-items: center;\n  height: 32px;\n  min-width: 80px;\n}\n.paraui-v4-dynamic-multi-box .add-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 32px;\n  background: rgb(247, 248, 250);\n  border: 1px dashed rgb(212, 218, 227);\n  border-radius: 4px;\n}\n.paraui-v4-dynamic-multi-box .add-button .text {\n  font-size: 14px;\n  margin-left: 4px;\n}\n.paraui-v4-dynamic-multi-box .add-button.add-button-scroll {\n  margin-top: 14px;\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button {\n  cursor: pointer;\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button .text {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button:hover {\n  background: rgb(240, 245, 255);\n  border: 1px dashed rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add {\n  cursor: not-allowed;\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add .text {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add svg {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-dynamic-multi-box .paraui-v4-comboselect,\n.paraui-v4-dynamic-multi-box .paraui-v4-picker-wrapper {\n  width: 100%;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch .switch-text {\n  color: rgb(161, 168, 179);\n  margin-right: 4px;\n  overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch .switch {\n  flex: 1;\n}\n\n.paraui-v4-dynamic-multi-box-popover .filter-config {\n  width: 140px;\n  padding-top: 4px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .title {\n  font-size: 12px;\n  color: rgb(161, 168, 179);\n  line-height: 30px;\n  padding: 0 10px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .paraui-v4-checkbox-group {\n  max-height: 320px;\n  overflow-y: auto;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .paraui-v4-checkbox-group.paraui-v4-checkbox-group-column .checkbox-group-content > span {\n  padding: 0 10px;\n  margin-bottom: 0;\n  line-height: 30px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .restore-default {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 36px;\n  color: rgb(46, 101, 230);\n  cursor: pointer;\n  border-top: 1px solid rgb(247, 248, 250);\n}\n.paraui-v4-dynamic-multi-box-popover .no-other-property {\n  width: 200px;\n  padding: 16px 0;\n  text-align: center;\n  font-size: 12px;\n  color: rgb(161, 168, 179);\n}";
 styleInject(css_248z);
 
 const DynamicMultiBox = props => {
@@ -416,6 +416,7 @@ const DynamicMultiBox = props => {
     singleTitle,
     initValue,
     popoverClassName,
+    operationButtons = [],
     onChange,
     onAdd,
     onFilter,
@@ -613,6 +614,196 @@ const DynamicMultiBox = props => {
     }
     return bol;
   };
+  /**
+   * 创建操作按钮
+   */
+  const createOperationButton = (button, rowIndex, item) => {
+    const {
+      key,
+      icon,
+      text,
+      disabled,
+      onClick,
+      render,
+      className,
+      tooltip
+    } = button;
+    // 如果有自定义渲染方法，使用自定义渲染
+    if (render) {
+      return jsx("div", Object.assign({
+        className: "operator-column-icon operation-button ".concat(className || '')
+      }, {
+        children: render(rowIndex, item, valueList)
+      }), key);
+    }
+    // 判断是否禁用
+    const isDisabled = typeof disabled === 'function' ? disabled(rowIndex, item, valueList) : disabled;
+    // 创建按钮内容
+    const buttonContent = jsxs("div", Object.assign({
+      className: "operator-column-icon operation-button ".concat(className || '', " ").concat(isDisabled ? 'disabled-operation' : ''),
+      onClick: () => !isDisabled && onClick(rowIndex, item, valueList)
+    }, {
+      children: [icon, text && jsx("span", Object.assign({
+        className: "operation-text"
+      }, {
+        children: text
+      }))]
+    }));
+    // 如果有tooltip，添加tooltip
+    if (tooltip) {
+      return jsx(Tooltip, Object.assign({
+        disabled: isDisabled,
+        placement: tooltip.placement || 'top'
+      }, tooltip, {
+        children: buttonContent
+      }), key);
+    }
+    return buttonContent;
+  };
+  /**
+   * 渲染行操作按钮区域，按照顺序混排
+   */
+  const renderRowOperations = (rowIndex, item, showDeleteIcon, isAllHideDelBol) => {
+    // 收集所有可见的按钮元素
+    const allButtons = [];
+    // 按order排序操作按钮
+    const sortedButtons = [...operationButtons].sort((a, b) => {
+      return (a.order || 3) - (b.order || 3);
+    });
+    // 准备三个位置的按钮
+    const beforeDeleteButtons = [];
+    const betweenDeleteAndSortButtons = [];
+    const afterSortButtons = [];
+    const defaultButtons = [];
+    // 分配按钮到不同位置
+    sortedButtons.forEach(button => {
+      const buttonNode = createOperationButton(button, rowIndex, item);
+      const order = button.order !== undefined ? button.order : 3;
+      switch (order) {
+        case 0:
+          beforeDeleteButtons.push(buttonNode);
+          break;
+        case 1:
+          betweenDeleteAndSortButtons.push(buttonNode);
+          break;
+        case 2:
+          afterSortButtons.push(buttonNode);
+          break;
+        default:
+          defaultButtons.push(buttonNode);
+          break;
+      }
+    });
+    // 1. 添加删除按钮前的操作按钮
+    beforeDeleteButtons.forEach(button => {
+      allButtons.push(button);
+    });
+    // 2. 添加删除按钮
+    const deleteButton = jsx("div", Object.assign({
+      className: "operator-column-icon delete-icon ".concat(!showDeleteIcon || deleteDisable.includes((item === null || item === void 0 ? void 0 : item[rowKey]) || '') ? 'hidden-icon' : ''),
+      onClick: () => onDeleteEvent(rowIndex)
+    }, {
+      children: deleteRender ? deleteRender(rowIndex, item, valueList) : jsx(Delete, {})
+    }), "delete-button");
+    // 只有当删除按钮可见时才添加
+    if (showDeleteIcon && !deleteDisable.includes(item[rowKey])) {
+      allButtons.push(deleteButton);
+    }
+    // 3. 添加删除按钮和排序按钮之间的操作按钮
+    betweenDeleteAndSortButtons.forEach(button => {
+      allButtons.push(button);
+    });
+    // 4. 添加排序按钮（如果启用）
+    if (isSort && showDeleteIcon) {
+      const sortButton = jsx("div", Object.assign({
+        className: "sort-handler operator-column-icon ".concat(!showDeleteIcon ? 'hidden-icon' : '')
+      }, {
+        children: jsx(Drag, {})
+      }), "sort-handler");
+      allButtons.push(sortButton);
+    }
+    // 5. 添加排序按钮后的操作按钮
+    afterSortButtons.forEach(button => {
+      allButtons.push(button);
+    });
+    // 6. 添加默认位置的操作按钮
+    defaultButtons.forEach(button => {
+      allButtons.push(button);
+    });
+    // 渲染所有按钮和分隔线
+    // 简化逻辑：除了最后一个元素外，每个元素后面都添加分隔线
+    const elements = [];
+    allButtons.forEach((button, index) => {
+      elements.push(button);
+      // 如果不是最后一个按钮，添加分隔线
+      if (index < allButtons.length - 1) {
+        elements.push(jsx("div", Object.assign({
+          className: "center-line"
+        }, {
+          children: jsx("div", {
+            className: 'line'
+          })
+        }), "divider-".concat(index)));
+      }
+    });
+    return jsx(Fragment, {
+      children: elements
+    });
+  };
+  /**
+   * 计算操作列宽度类名
+   */
+  const getOperatorColumnClass = function (showDeleteIcon, isAllHideDelBol, rowIndex, item) {
+    let isHeader = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+    // 是否只有一行且是第一行
+    const isSingleRow = valueList.length === 1 && rowIndex === 0;
+    let buttonCount = 0;
+    if (isHeader || !isSingleRow) {
+      // 头部或多行情况下，按照最大可能按钮数量计算
+      // 只要启用了删除功能（无论是否当前行可见），都计入按钮数量
+      if (keepLastItem ? valueList.length > 1 : true) {
+        buttonCount++; // 删除按钮
+      }
+      // 如果启用了排序，计入排序按钮
+      if (isSort) {
+        buttonCount++; // 排序按钮
+      }
+      // 计算自定义操作按钮数量 - 始终计算所有可能的按钮
+      buttonCount += (operationButtons === null || operationButtons === void 0 ? void 0 : operationButtons.length) || 0;
+    } else {
+      // 只有一行时，计算实际可见的按钮数量
+      // 删除按钮是否可见
+      if (showDeleteIcon && !deleteDisable.includes((item === null || item === void 0 ? void 0 : item[rowKey]) || '')) {
+        buttonCount++; // 删除按钮
+      }
+      // 排序按钮是否可见
+      if (isSort && showDeleteIcon) {
+        buttonCount++; // 排序按钮
+      }
+      // 计算实际可见的自定义操作按钮数量
+      buttonCount += (operationButtons === null || operationButtons === void 0 ? void 0 : operationButtons.length) || 0;
+    }
+    // 根据按钮数量返回对应的类名
+    return getColumnClassByCount(buttonCount);
+  };
+  /**
+   * 根据按钮数量获取对应的CSS类名
+   */
+  const getColumnClassByCount = count => {
+    switch (count) {
+      case 0:
+      case 1:
+        return 'operator-column-40';
+      case 2:
+        return 'operator-column-80';
+      case 3:
+        return 'operator-column-120';
+      case 4:
+        return 'operator-column-160';
+      default:
+        return 'operator-column-200';
+    }
+  };
   /**
    * 渲染表头
    * */
@@ -621,6 +812,13 @@ const DynamicMultiBox = props => {
     if (!(config === null || config === void 0 ? void 0 : config.length)) return null;
     const showDeleteIcon = keepLastItem ? valueList.length > 1 : true;
     const isAllHideDelBol = isAllHideDelete();
+    // 只有一行时，表头宽度class与内容区保持一致，均用实际按钮数计算
+    let headerClass = 'operator-column-40';
+    if (valueList.length === 1) {
+      headerClass = getOperatorColumnClass(showDeleteIcon, isAllHideDelBol, 0, valueList[0], false);
+    } else {
+      headerClass = getOperatorColumnClass(showDeleteIcon, isAllHideDelBol, 0, valueList[0], true);
+    }
     return jsxs("div", Object.assign({
       className: 'title-config'
     }, {
@@ -655,7 +853,7 @@ const DynamicMultiBox = props => {
         required: singleTitle === null || singleTitle === void 0 ? void 0 : singleTitle.required,
         label: singleTitle === null || singleTitle === void 0 ? void 0 : singleTitle.label
       }) : null, jsxs("div", Object.assign({
-        className: "operator-column-40 ".concat(isSort && showDeleteIcon && !isAllHideDelBol ? 'operator-column-80' : '')
+        className: headerClass
       }, {
         children: [isSort && jsx("div", {
           className: 'blank-block'
@@ -678,7 +876,7 @@ const DynamicMultiBox = props => {
         }))]
       }))]
     }));
-  }, [titleMode, fixedConfig, selectedConfig, isSort, isFilter, checked, onCheckChange, onRestoreDefault, rowKey, keepLastItem, valueList, deleteDisable]);
+  }, [titleMode, fixedConfig, selectedConfig, isSort, isFilter, checked, onCheckChange, onRestoreDefault, rowKey, keepLastItem, valueList, deleteDisable, operationButtons]);
   /**
    *@desc 渲染内容
    * */
@@ -692,6 +890,8 @@ const DynamicMultiBox = props => {
           var _a;
           const id = item[rowKey];
           const rowError = (_a = errors === null || errors === void 0 ? void 0 : errors.filter(item => item[rowKey] === id)) === null || _a === void 0 ? void 0 : _a[0];
+          // 计算每一行的操作列类名（考虑按钮禁用情况）
+          const operatorColumnClass = getOperatorColumnClass(showDeleteIcon, isAllHideDelBol, rowIndex, item);
           return jsxs("div", Object.assign({
             className: 'content-row-form'
           }, {
@@ -703,31 +903,16 @@ const DynamicMultiBox = props => {
               onFormItemChange: (name, id, value) => onFormItemChange(name, id, value, rowIndex),
               icon: icon,
               config: config
-            }), jsxs("div", Object.assign({
-              className: "operator-column-40 ".concat(isSort && showDeleteIcon && !isAllHideDelBol ? 'operator-column-80' : '')
+            }), jsx("div", Object.assign({
+              className: operatorColumnClass
             }, {
-              children: [jsx("div", Object.assign({
-                className: "operator-column-icon delete-icon ".concat(!showDeleteIcon || deleteDisable.includes(id) ? 'hidden-icon' : ''),
-                onClick: () => onDeleteEvent(rowIndex)
-              }, {
-                children: deleteRender ? deleteRender(rowIndex, item, valueList) : jsx(Delete, {})
-              })), isSort && jsx("div", Object.assign({
-                className: !showDeleteIcon || deleteDisable.includes(id) ? 'hidden-icon' : 'center-line'
-              }, {
-                children: jsx("div", {
-                  className: 'line'
-                })
-              })), isSort && jsx("div", Object.assign({
-                className: "sort-handler operator-column-icon ".concat(!showDeleteIcon ? 'hidden-icon' : '')
-              }, {
-                children: jsx(Drag, {})
-              }))]
+              children: renderRowOperations(rowIndex, item, showDeleteIcon)
             }))]
           }), id);
         })
       });
     }
-  }, [valueList, isSort, isFilter, errors, fixedConfig, selectedConfig, keepLastItem, deleteRender, rowKey, deleteDisable]);
+  }, [valueList, isSort, isFilter, errors, fixedConfig, selectedConfig, keepLastItem, deleteRender, rowKey, deleteDisable, operationButtons]);
   /**
    * @desc 删除事件
    * */

package/DynamicMultiBox/interface.d.ts

@@ -36,6 +36,32 @@ export type IConfig = {
     /** 其他*/
     [name: string]: any;
 } & (TextFieldProps | SelectProps | SwitchProps | InputNumberProps | InputLangProps | ComboSelectProps | DatePickerProps);
+/** 操作按钮配置项 */
+export interface IOperationButton {
+    /** 按钮标识 */
+    key: string;
+    /** 按钮图标 */
+    icon?: ReactNode;
+    /** 按钮文本 */
+    text?: string;
+    /** 是否禁用 */
+    disabled?: boolean | ((rowIndex: number, item: IValueList, valueList: IValueList[]) => boolean);
+    /** 点击事件 */
+    onClick: (rowIndex: number, item: IValueList, valueList: IValueList[]) => void;
+    /** 自定义渲染 */
+    render?: (rowIndex: number, item: IValueList, valueList: IValueList[]) => ReactNode;
+    /** 样式 */
+    className?: string;
+    /** 提示 */
+    tooltip?: TooltipProps;
+    /** 排序位置:
+     * 0 - 插入到删除按钮之前
+     * 1 - 插入到删除按钮之后，排序按钮之前（如果有排序按钮）
+     * 2 - 插入到排序按钮之后（如果有排序按钮），否则删除按钮之后
+     * 3+ - 默认放在最后
+     */
+    order?: number;
+}
 /** value集合*/
 export interface IValueList {
     /** 每行value值集合， name映射configItem中的name*/
@@ -175,4 +201,8 @@ export interface IMultiValueProps {
      * 是否保持最后一条
      * */
     keepLastItem?: boolean;
+    /**
+     * 自定义操作按钮，支持每行配置多个操作按钮
+     */
+    operationButtons?: IOperationButton[];
 }

package/README.md

@@ -1,4 +1,7 @@
-## 🎉 para-ui/core@4.0.62 发布
+## 🎉 para-ui/core@4.0.63 发布
+
+🎁【Feature】
+- 【动态多值框-DynamicMultiBox】新增自定义操作按钮支持
 
 🎁【Feature】
 - 【国际化输入框-InputLang】增加长度限制参数

package/Tabs/index.js

@@ -42,8 +42,8 @@ var zh = {
 };
 
 var localeJson = {
-  zh: zh,
-  en: en
+  zh,
+  en
 };
 
 var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/5/30 上午10:29\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-tabs.paraui-v4-tabs-track.paraui-v4-tabs-medium .component-tabs-nav {\n  height: 32px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track.paraui-v4-tabs-medium .component-tabs-nav .component-tabs-tab {\n  height: 24px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track.paraui-v4-tabs-medium .component-tabs-nav .component-tabs-nav-operations {\n  height: 100%;\n}\n\n/**\n* @author Hanz\n* @date 2022/5/30 上午10:44\n* @description\n*/\n.paraui-v4-tabs.component-tabs-top, .paraui-v4-tabs.component-tabs-bottom {\n  flex-direction: column;\n}\n.paraui-v4-tabs.paraui-v4-tabs-line.component-nav-padding.component-tabs-top > .component-tabs-nav, .paraui-v4-tabs.paraui-v4-tabs-line.component-nav-padding.component-tabs-bottom > .component-tabs-nav, .paraui-v4-tabs.paraui-v4-tabs-line.component-nav-padding.component-tabs-top > div > .component-tabs-nav, .paraui-v4-tabs.paraui-v4-tabs-line.component-nav-padding.component-tabs-bottom > div > .component-tabs-nav {\n  padding: 0 20px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-line.component-nav-padding.component-tabs-left > .component-tabs-nav, .paraui-v4-tabs.paraui-v4-tabs-line.component-nav-padding.component-tabs-right > .component-tabs-nav, .paraui-v4-tabs.paraui-v4-tabs-line.component-nav-padding.component-tabs-left > div > .component-tabs-nav, .paraui-v4-tabs.paraui-v4-tabs-line.component-nav-padding.component-tabs-right > div > .component-tabs-nav {\n  padding: 20px 0;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav {\n  margin: 0 0 16px 0;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav::before, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav::before, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav::before, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav::before {\n  position: absolute;\n  right: 0;\n  left: 0;\n  border-bottom: 1px solid rgb(234, 236, 241);\n  content: \"\";\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-ink-bar {\n  height: 1px;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-ink-bar-animated {\n  transition: width 0.3s, left 0.3s, right 0.3s;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  top: 0;\n  bottom: 0;\n  width: 30px;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::before {\n  left: 0;\n  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  right: 0;\n  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before {\n  opacity: 1;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after {\n  opacity: 1;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav::before, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav::before {\n  bottom: 0;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-ink-bar {\n  bottom: 0;\n}\n.paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav {\n  order: 1;\n  margin-top: 16px;\n  margin-bottom: 0;\n}\n.paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav::before, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav::before {\n  top: 0;\n}\n.paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-ink-bar {\n  top: 0;\n}\n.paraui-v4-tabs.component-tabs-bottom > .component-tabs-content-holder, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-content-holder {\n  order: 0;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav {\n  flex-direction: column;\n  min-width: 50px;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-tab, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-tab, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-tab, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-tab {\n  padding: 0 12px;\n  text-align: center;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab {\n  margin: 8px 0 0 0;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap {\n  flex-direction: column;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  right: 0;\n  left: 0;\n  height: 30px;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::before {\n  top: 0;\n  box-shadow: inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  bottom: 0;\n  box-shadow: inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before {\n  opacity: 1;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after {\n  opacity: 1;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-ink-bar {\n  width: 1px;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-ink-bar-animated {\n  transition: height 0.3s, top 0.3s;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-list, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-list, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-list, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-list, .paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-operations, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-operations, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-operations, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-operations {\n  flex: 1 0 auto;\n  flex-direction: column;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-ink-bar {\n  right: 0;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-content-holder, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-content-holder {\n  margin-left: -1px;\n  border-left: 1px solid rgb(234, 236, 241);\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane {\n  padding-left: 20px;\n}\n.paraui-v4-tabs.component-tabs-right > .component-tabs-nav, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav {\n  order: 1;\n}\n.paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-ink-bar {\n  left: 0;\n}\n.paraui-v4-tabs.component-tabs-right > .component-tabs-content-holder, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-content-holder {\n  order: 0;\n  margin-right: -1px;\n  border-right: 1px solid rgb(234, 236, 241);\n}\n.paraui-v4-tabs.component-tabs-right > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane {\n  padding-right: 20px;\n}\n\n.component-tabs-dropdown {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  color: rgba(0, 0, 0, 0.85);\n  font-size: 14px;\n  font-variant: tabular-nums;\n  line-height: 1.5715;\n  list-style: none;\n  font-feature-settings: \"tnum\";\n  position: absolute;\n  top: -9999px;\n  left: -9999px;\n  z-index: 1050;\n  display: block;\n}\n.component-tabs-dropdown.component-tabs-dropdown-hidden {\n  display: none;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu {\n  max-height: 200px;\n  margin: 0;\n  padding: 4px 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  text-align: left;\n  list-style-type: none;\n  background-color: rgb(255, 255, 255);\n  background-clip: padding-box;\n  border-radius: 4px;\n  outline: none;\n  box-shadow: 1px 1px 10px 2px rgba(212, 218, 227, 0.4);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item {\n  display: flex;\n  align-items: center;\n  min-width: 140px;\n  margin: 0;\n  padding: 5px 10px;\n  overflow: hidden;\n  color: rgb(29, 33, 38);\n  font-weight: normal;\n  font-size: 14px;\n  line-height: 20px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  transition: all 0.3s;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item .component-tabs-tab-help {\n  display: inline-flex;\n  flex-direction: row-reverse;\n  align-items: center;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item .component-tabs-tab-help .paraui-v4-help {\n  display: inline-flex;\n  margin-left: 4px;\n  font-size: 14px;\n  color: rgb(161, 168, 179);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item .component-tabs-tab-help .paraui-v4-help svg {\n  color: inherit;\n  font-size: inherit;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item > span {\n  flex: 1;\n  white-space: nowrap;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-remove {\n  flex: none;\n  margin-left: 12px;\n  margin-top: 2px;\n  color: rgb(92, 101, 115);\n  background: transparent;\n  border: 0;\n  cursor: pointer;\n  transition: all 0.3s;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-remove svg {\n  color: inherit;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-remove:hover {\n  color: rgb(87, 131, 235);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item:hover {\n  background: rgb(247, 248, 250);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-disabled,\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-disabled:hover {\n  color: rgb(161, 168, 179);\n  background: transparent;\n  cursor: not-allowed;\n}\n\n.component-tabs-slide-up-enter,\n.component-tabs-slide-up-appear {\n  animation-duration: 0.2s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.component-tabs-slide-up-leave {\n  animation-duration: 0.2s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.component-tabs-slide-up-enter.component-tabs-slide-up-enter-active,\n.component-tabs-slide-up-appear.component-tabs-slide-up-appear-active {\n  animation-name: componentTabsSlideUpIn;\n  animation-play-state: running;\n}\n\n.component-tabs-slide-up-leave.component-tabs-slide-up-leave-active {\n  animation-name: componentTabsSlideUpOut;\n  animation-play-state: running;\n  pointer-events: none;\n}\n\n.component-tabs-slide-up-enter,\n.component-tabs-slide-up-appear {\n  opacity: 0;\n  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.component-tabs-slide-up-leave {\n  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n}\n\n@keyframes componentTabsSlideUpIn {\n  0% {\n    transform: scaleY(0.8);\n    transform-origin: 0% 0%;\n    opacity: 0;\n  }\n  100% {\n    transform: scaleY(1);\n    transform-origin: 0% 0%;\n    opacity: 1;\n  }\n}\n@keyframes componentTabsSlideUpOut {\n  0% {\n    transform: scaleY(1);\n    transform-origin: 0% 0%;\n    opacity: 1;\n  }\n  100% {\n    transform: scaleY(0.8);\n    transform-origin: 0% 0%;\n    opacity: 0;\n  }\n}\n.paraui-v4-tabs {\n  color: rgb(29, 33, 38);\n  font-size: 14px;\n  line-height: 1.5715;\n  display: flex;\n  background-color: rgb(255, 255, 255);\n  overflow: hidden;\n  flex-shrink: 0;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav {\n  position: relative;\n  display: flex;\n  flex: none;\n  align-items: center;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-wrap {\n  position: relative;\n  display: flex;\n  flex: auto;\n  align-self: stretch;\n  overflow: hidden;\n  white-space: nowrap;\n  transform: translate(0);\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  position: absolute;\n  z-index: 1;\n  opacity: 0;\n  transition: opacity 0.3s;\n  content: \"\";\n  pointer-events: none;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-list, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-list {\n  position: relative;\n  display: flex;\n  flex-shrink: 0;\n  transition: transform 0.3s;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-operations, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-operations {\n  display: flex;\n  align-self: stretch;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-operations-hidden, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-operations-hidden {\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-more, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-more {\n  position: relative;\n  padding: 8px;\n  background: transparent;\n  border: 0;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-more:hover svg, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-more:hover svg {\n  color: rgb(46, 101, 230);\n  transition: all 0.3s;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-more svg, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-more svg {\n  font-size: 18px;\n  vertical-align: top;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-more::after, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-more::after {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 5px;\n  transform: translateY(100%);\n  content: \"\";\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-add, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-add {\n  min-width: 40px;\n  margin-left: 2px;\n  padding: 0 8px;\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgb(212, 218, 227);\n  color: rgb(29, 33, 38);\n  outline: none;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-add svg, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-add svg {\n  color: inherit;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-add:hover, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-add:hover {\n  color: rgb(46, 101, 230);\n  border: 1px solid rgb(87, 131, 235);\n}\n.paraui-v4-tabs .component-tabs-extra-content {\n  flex: none;\n}\n.paraui-v4-tabs.paraui-v4-tabs-centered > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v4-tabs.paraui-v4-tabs-centered > div > .component-tabs-nav .component-tabs-nav-wrap {\n  justify-content: center;\n}\n.paraui-v4-tabs .component-tabs-ink-bar {\n  position: absolute;\n  background: rgb(46, 101, 230);\n  pointer-events: none;\n}\n.paraui-v4-tabs .component-tabs-tab {\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  height: 40px;\n  padding: 0 10px;\n  font-size: 14px;\n  background: transparent;\n  border: 0;\n  outline: none;\n  cursor: pointer;\n}\n.paraui-v4-tabs .component-tabs-tab:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-tabs .component-tabs-tab-btn {\n  outline: none;\n  transition: all 0.3s;\n}\n.paraui-v4-tabs .component-tabs-tab-btn .component-tabs-tab-help {\n  display: flex;\n  align-items: center;\n}\n.paraui-v4-tabs .component-tabs-tab-btn .component-tabs-tab-help .paraui-v4-help {\n  display: inline-flex;\n  margin-left: 4px;\n  font-size: 16px;\n}\n.paraui-v4-tabs .component-tabs-tab-btn .component-tabs-tab-help .paraui-v4-help svg {\n  margin-right: 0;\n  color: inherit;\n  font-size: inherit;\n}\n.paraui-v4-tabs .component-tabs-tab-btn .paraui-v4-radio {\n  margin-right: 8px;\n}\n.paraui-v4-tabs .component-tabs-tab-remove {\n  display: inline-flex;\n  flex: none;\n  margin-right: -4px;\n  margin-left: 4px;\n  color: rgb(92, 101, 115);\n  font-size: 14px;\n  background: transparent;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  transition: all 0.3s;\n}\n.paraui-v4-tabs .component-tabs-tab-remove:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-tabs .component-tabs-tab-remove svg {\n  color: inherit;\n  font-size: inherit;\n}\n.paraui-v4-tabs .component-tabs-tab-remove span {\n  display: inline-flex;\n}\n.paraui-v4-tabs .component-tabs-tab.component-tabs-tab-active {\n  color: rgb(46, 101, 230);\n  font-weight: 400;\n  text-shadow: 0 0 0.25px currentcolor;\n}\n.paraui-v4-tabs .component-tabs-tab.component-tabs-tab-active .component-tabs-tab-btn {\n  color: inherit;\n}\n.paraui-v4-tabs .component-tabs-tab.component-tabs-tab-disabled {\n  color: rgb(161, 168, 179);\n  cursor: not-allowed;\n}\n.paraui-v4-tabs .component-tabs-tab .component-tabs-tab-remove svg {\n  margin: 0;\n}\n.paraui-v4-tabs .component-tabs-tab svg {\n  margin-right: 12px;\n}\n.paraui-v4-tabs .component-tabs-tab + .component-tabs-tab {\n  margin: 0;\n}\n.paraui-v4-tabs .component-tabs-content {\n  display: flex;\n  width: 100%;\n}\n.paraui-v4-tabs .component-tabs-content-holder {\n  flex: auto;\n  min-width: 0;\n  min-height: 0;\n}\n.paraui-v4-tabs .component-tabs-content-animated {\n  transition: margin 0.3s;\n}\n.paraui-v4-tabs .component-tabs-tabpane {\n  flex: none;\n  width: 100%;\n  outline: none;\n}\n.paraui-v4-tabs.paraui-v4-tabs-editable-line .component-tabs-nav .component-tabs-nav-add, .paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-nav-add, .paraui-v4-tabs.paraui-v4-tabs-card-container .component-tabs-nav .component-tabs-nav-add {\n  min-width: initial;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  align-self: center;\n  margin-left: 10px;\n  padding: 0;\n  background-color: rgb(255, 255, 255);\n  border-color: rgb(212, 218, 227);\n  border-radius: 2px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track {\n  display: inline-flex;\n  max-width: 100%;\n  border-radius: 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav {\n  height: 36px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-nav-wrap {\n  padding: 0 4px;\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-nav-add {\n  margin-right: 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav:before {\n  display: none;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-ink-bar {\n  visibility: hidden;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-tab {\n  height: 28px;\n  margin: 4px 0;\n  padding: 0 10px;\n  border-radius: 2px;\n  transition: 0.3s;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-tab.component-tabs-tab-active {\n  color: rgb(46, 101, 230);\n  text-shadow: none;\n  background-color: rgb(255, 255, 255);\n  font-weight: 400;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track.component-tabs-left .component-tabs-nav, .paraui-v4-tabs.paraui-v4-tabs-track.component-tabs-right .component-tabs-nav {\n  max-width: 200px;\n  height: auto;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track.component-tabs-left .component-tabs-content-holder, .paraui-v4-tabs.paraui-v4-tabs-track.component-tabs-right .component-tabs-content-holder {\n  border-left: 0;\n  border-right: 0;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane {\n  padding: 0;\n}\n.paraui-v4-tabs.paraui-v4-tabs-editable-track {\n  border-radius: 4px 0 0 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-editable-track .component-tabs-nav {\n  border-radius: 4px;\n}\n.paraui-v4-tabs.component-tabs.paraui-v4-tabs-track > .component-tabs-nav .component-tabs-nav-more {\n  background-color: rgb(247, 248, 250);\n  border-radius: 0 4px 4px 0;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card > .component-tabs-nav .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card > div > .component-tabs-nav .component-tabs-tab {\n  margin: 0;\n  padding: 0 10px;\n  background: rgb(255, 255, 255);\n  border: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card > .component-tabs-nav .component-tabs-tab .component-tabs-tab-remove, .paraui-v4-tabs.paraui-v4-tabs-card > div > .component-tabs-nav .component-tabs-tab .component-tabs-tab-remove {\n  margin-left: 8px;\n  font-size: 14px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card > .component-tabs-nav .component-tabs-tab-active, .paraui-v4-tabs.paraui-v4-tabs-card > div > .component-tabs-nav .component-tabs-tab-active {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.paraui-v4-tabs-card > div > .component-tabs-nav .component-tabs-ink-bar {\n  visibility: hidden;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-bottom > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-bottom > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab {\n  margin-left: 0;\n  border-left: 0;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab:first-child {\n  border-top-left-radius: 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab:nth-last-child(2) {\n  border-top-right-radius: 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab-active, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > div > .component-tabs-nav .component-tabs-tab-active {\n  border-bottom-color: rgb(212, 218, 227);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-bottom > .component-tabs-nav .component-tabs-tab-active, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-bottom > div > .component-tabs-nav .component-tabs-tab-active {\n  border-top-color: rgb(212, 218, 227);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-right > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-right > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab {\n  margin-top: 0;\n  border-top: 0;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > .component-tabs-nav .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > div > .component-tabs-nav .component-tabs-tab {\n  margin-left: 0;\n  margin-top: 2px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > .component-tabs-nav .component-tabs-tab-active, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > div > .component-tabs-nav .component-tabs-tab-active {\n  border-right-color: rgb(212, 218, 227);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-right > .component-tabs-nav .component-tabs-tab-active, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-right > div > .component-tabs-nav .component-tabs-tab-active {\n  border-left-color: rgb(212, 218, 227);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-right .component-tabs-nav .component-tabs-nav-add {\n  margin-left: 0;\n  margin-top: 2px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left .component-tabs-nav .component-tabs-nav-add {\n  margin-left: 0;\n  margin-top: 2px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card-container > .component-tabs-nav:before {\n  display: none;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card-container > .component-tabs-nav .component-tabs-tab {\n  border: 0;\n  transition: 0.3s;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card-container > .component-tabs-nav .component-tabs-tab.component-tabs-tab-active {\n  border-radius: 4px 4px 0 0;\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card-container .component-tabs-content {\n  margin-top: -16px;\n  padding: 16px;\n  background-color: rgb(247, 248, 250);\n  border-radius: 0 0 4px 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-no-child:not(.paraui-v4-tabs-card-container) .component-tabs-nav {\n  margin: 0;\n}";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@para-ui/core",
   "private": false,
-  "version": "4.0.62",
+  "version": "4.0.63",
   "main": "./index.js",
   "typings": "./index.d.ts",
   "description": "Powered by Para FED",