amis-ui 2.0.2 → 2.1.0

package/package.json

@@ -3,7 +3,7 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "",
   "scripts": {
     "build": "npm run clean-dist && NODE_ENV=production rollup -c ",
@@ -33,12 +33,12 @@
     }
   },
   "dependencies": {
-    "amis-core": "^2.0.2",
-    "amis-formula": "^2.0.2",
+    "amis-core": "^2.1.0",
+    "amis-formula": "^2.1.0",
     "classnames": "2.3.1",
     "codemirror": "^5.63.0",
     "downshift": "6.1.7",
-    "echarts": "5.3.1",
+    "echarts": "5.3.3",
     "froala-editor": "3.1.1",
     "hoist-non-react-statics": "^3.3.2",
     "jsbarcode": "^3.11.5",
@@ -50,7 +50,7 @@
     "mobx": "^4.5.0",
     "mobx-react": "^6.3.1",
     "mobx-state-tree": "^3.17.3",
-    "moment": "^2.19.3",
+    "moment": "^2.19.4",
     "monaco-editor": "0.30.1",
     "prop-types": "^15.6.1",
     "rc-input-number": "^7.3.4",
@@ -63,7 +63,7 @@
     "react-transition-group": "4.4.2",
     "react-visibility-sensor": "5.1.1",
     "sortablejs": "1.14.0",
-    "tinymce": "^5.10.3",
+    "tinymce": "^6.1.2",
     "tslib": "^2.3.1",
     "uncontrollable": "7.2.1"
   },
@@ -83,15 +83,15 @@
     "jest-environment-jsdom": "^28.1.0",
     "moment-timezone": "^0.5.34",
     "postcss-import": "^14.1.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.73.0",
     "rollup-plugin-auto-external": "^2.0.0",
     "rollup-plugin-license": "^2.7.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-scss": "^3.0.0",
-    "sass": "^1.52.1",
+    "sass": "^1.54.0",
     "ts-jest": "^28.0.3",
     "typescript": "^4.6.4"
   },
@@ -134,5 +134,5 @@
       }
     }
   },
-  "gitHead": "248d7661db0a703388301b9aacae720e06ed5a25"
+  "gitHead": "0c57e9936e83d55b75fb162667e15c84c09fc4ff"
 }

package/scss/_properties.scss

@@ -34,6 +34,10 @@
     Roboto, 'Hiragino Sans GB', 'Arial', 'microsoft yahei ui', 'Microsoft YaHei',
     SimSun, sans-serif;
 
+  // box-shadow
+  $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
+  0px 1px 10px 0px rgba(8, 14, 26, 0.05), 0px 2px 4px -1px rgba(8, 14, 26, 0.04);
+
   --fontSizeBase: #{px2rem(14px)};
   --fontSizeMd: #{px2rem(14px)};
   --fontSizeLg: #{px2rem(16px)};
@@ -81,7 +85,8 @@
   --pre-background: var(--background);
   --link-color: var(--info);
   --link-decoration: none;
-  --link-onHover-color: var(--info-onHover);
+  --link-onHover-color: #{$B5};
+  --link-onClick-color: #{$B7};
   --link-onHover-decoration: underline;
 
   --body-bg: var(--light);
@@ -131,8 +136,11 @@
   --Alert-boxShadow: none;
   --Alert-fontSize: var(--fontSizeBase);
   --Alert-marginBottom: var(--gap-md);
-  --Alert-paddingX: var(--gap-sm);
-  --Alert-paddingY: var(--gap-sm);
+  --Alert-paddingX: var(--gap-md);
+  --Alert-paddingY: var(--gap-xs);
+  --Alert-fontColor: #151b26;
+  --Alert-title-fontColor: #151b26;
+  --Alert-height: #{px2rem(40px)};
 
   --Audio-border: #{px2rem(1px)} solid #dee2e6;
   --Audio-height: #{px2rem(50px)};
@@ -293,6 +301,15 @@
   --Button--success-onHover-bg: var(--success-onHover);
   --Button--success-onHover-border: var(--success-onActive);
   --Button--success-onHover-color: var(--Button--success-color);
+  --Button--emphasize-bg: #ffffff;
+  --Button--emphasize-color: var(--primary);
+  --Button--emphasize-onHover-bg: #ffffff;
+  --Button--emphasize-onHover-border: var(--primary);
+  --Button--emphasize-onHover-color: #528eff;
+  --Button--emphasize-onActive-bg: #ffffff;
+  --Button--emphasize-onActive-border: #144bcc;
+  --Button--emphasize-onActive-color: #144bcc;
+
   --Button--enhance-border: var(--primary);
   --Button--enhance-color: var(--primary);
   --Button--enhance-onActive-bg: var(--white);
@@ -355,6 +372,8 @@
 
   --ButtonGroup--primary-isActive-color: var(--white);
   --ButtonGroup--primary-isActive-bg: var(--primary);
+  --ButtonGroup-divider-width: #{px2rem(1px)};
+  --ButtonGroup-divider-color: #fff;
 
   --Breadcrumb-item-fontSize: var(--fontSizeMd);
   --Breadcrumb-item-default-color: #83868c;
@@ -370,6 +389,7 @@
   --BreadcrumbDropdown-item-paddingY: calc(
     (var(--BreadcrumbDropdown-item-height) - var(--fontSizeSm)) / 2
   );
+  --Breadcrumb-item-disabled-color: #b8babf;
 
   --Calendar-btn-bg: var(--info);
   --Calendar-btn-border: var(--Calendar-btn-bg);
@@ -586,6 +606,7 @@
     --Collapse-header-collapsed-border
   );
   --Collapse-header-wrapper-direction: row;
+  --Collapse-header-bg-disabled-color: #f7f7f9;
   --Collapse-content-padding: #{px2rem(18px)} 0;
   --Collapse-content-color: var(--body-color);
   --Collapse-content-fontSize: var(--body-size);
@@ -607,9 +628,11 @@
   --DatePicker-height: var(--Form-input-height);
   --DatePicker-iconColor: var(--icon-color);
   --DatePicker-lineHeight: var(--Form-input-lineHeight);
-  --DatePicker-onFocused-borderColor: var(--Form-input-onFocused-borderColor);
+  --DatePicker-onFocused-borderColor: #144bcc;
   --DatePicker-onHover-bg: var(--DatePicker-bg);
   --DatePicker-onHover-borderColor: var(--Form-input-onFocused-borderColor);
+  --DatePicker-onDisabled-bg: #f5f5f5;
+  --DatePicker-onDisabled-color: #999;
   --DatePicker-onHover-iconColor: var(--icon-onHover-color);
   --DatePicker-paddingX: #{px2rem(12px)};
   --DatePicker-paddingY: calc(
@@ -634,7 +657,7 @@
 
   --Drawer-bg: var(--background);
   --Drawer-body-padding: var(--gap-base);
-  --Drawer-close-color: var(--text--muted-color);
+  --Drawer-close-color: #{$G2};
   --Drawer-close-onHover-color: var(--text-color);
   --Drawer-close-size: #{px2rem(12px)};
   --Drawer-content-borderColor: var(--borderColor);
@@ -646,7 +669,7 @@
   --Drawer-header-borderColor: #{lighten($borderColor, 5%)};
   --Drawer-header-padding: var(--gap-base);
   --Drawer-overlay-bg: rgba(0, 0, 0, 0.6);
-  --Drawer-title-fontColor: var(--text--loud-color);
+  --Drawer-title-fontColor: #{$G2};
   --Drawer-title-fontSize: var(--fontSizeMd);
   --Drawer-widthBase: 80%;
   --Drawer-widthLg: #{px2rem(800px)};
@@ -777,6 +800,7 @@
   --Form-select-borderWidth: var(--Form-input-borderWidth);
   --Form-select-caret-iconColor: var(--icon-color);
   --Form-select-caret-onHover-iconColor: var(--icon-onHover-color);
+  --Form-select-caret-fontSize: #{px2rem(12px)};
   --Form-select-checkall-bottomBorder: #eceff8;
   --Form-select-color: var(--text-color);
   --Form-select-input-fontSize: var(--fontSizeSm);
@@ -796,6 +820,7 @@
   --Form-select-onHover-bg: #{darken($white, 5%)};
   --Form-select-onHover-borderColor: var(--Form-input-borderColor);
   --Form-select-outer-borderWidth: #{px2rem(1px)};
+  --Form-select-outer-top: #{px2rem(32px)};
   --Form-select-outer-boxShadow: none;
   --Form-select-paddingX: var(--Form-input-paddingX);
   --Form-select-placeholderColor: var(--Form-input-placeholderColor);
@@ -807,6 +832,7 @@
   --Form-select-valueIcon-color: var(--Form-select-valueIcon-color);
   --Form-select-valueIcon-color--dark: #e9e9e9;
   --Form-select-valueIcon-onHover-color: var(--Form-select-color);
+  --Form-select-multiple-bgColor: #{$G10};
   --Form-selectOption-height: var(--Form-input-height);
   --Form-selectValue-bg: #{saturate(lighten($info, 40%), 2.5%)};
   --Form-selectValue-onHover-bgColor: var(--Form-select-borderColor);
@@ -952,6 +978,8 @@
   --Layout-asideLink-color: #b4b6bd;
   --Layout-asideLink-fontSize: var(--fontSizeBase);
   --Layout-asideLink-fontSize: var(--fontSizeBase);
+  --Layout-asideLink-arrowFontSize: #{px2rem(12px)};
+  --Layout-asideLink-arrowColor: #8d99b0;
   --Layout-asideLink-iconColor: inherit;
   --Layout-asideLink-onActive-arrowColor: var(
     --Layout-asideLink-onActive-color
@@ -1063,7 +1091,7 @@
   --Modal-body-paddingX: var(--gap-md);
   --Modal-body-paddingY: var(--gap-md);
   --Modal-close-color: var(--text--muted-color);
-  --Modal-close-width: #{px2rem(12px)};
+  --Modal-close-width: #{px2rem(16px)};
   --Modal-content-borderColor: var(--borderColor);
   --Modal-content-borderRadius: var(--borderRadius);
   --Modal-content-borderWidth: var(--borderWidth);
@@ -1147,8 +1175,8 @@
   --Page-title-lineHeight: 1.5;
 
   --Pagination-fontSize: var(--fontSizeBase);
-  --Pagination-height: #{px2rem(30px)};
-  --Pagination-minWidth: #{px2rem(30px)};
+  --Pagination-height: #{px2rem(32px)};
+  --Pagination-minWidth: #{px2rem(32px)};
   --Pagination-onActive-backgroundColor: var(--primary);
   --Pagination-onActive-border: 0;
   --Pagination-onActive-color: var(--white);
@@ -1256,7 +1284,7 @@
   --ResultBox-value-clear-bg: #d4d6d9;
   --ResultBox-value-clear-hover-bg: #f5f5f5;
 
-  --Rating-inactive-color: #e6e6e8;
+  --Rating-inactive-color: #e8e9eb;
   --Rating-star-margin: #{px2rem(8px)};
   --Rating-star-size: #{px2rem(24px)};
 
@@ -1286,6 +1314,8 @@
   --Switch-onDisabled-circle-BackgroundColor: var(--white);
   --Switch-onDisabled-color: #fff;
   --Switch-onHover-bgColor: var(--Switch-bgColor);
+  --Switch-checked-onHover-bgColor: #144bcc;
+  --Switch-checked-onActive-bgColor: #144bcc;
   --Switch-valueColor: var(--white);
   --Switch-width: #{px2rem(50px)};
   --Switch-slider-margin: #{px2rem(1px)};
@@ -1326,6 +1356,9 @@
   --Table-onChecked-bg: #d9f3fb;
   --Table-onChecked-borderColor: #{darken(#d9f3fb, 10%)};
   --Table-onChecked-color: #{darken(#d9f3fb, 40%)};
+  --Table-onChecked-onHover-bg: #f5f5f5;
+  --Table-onChecked-onHover-borderColor: #eceff8;
+  --Table-onChecked-onHover-color: #666;
   --Table-onDragging-opacity: 0.1;
   // 背景用到了 rgba，所以必须再提供这种写法，搜一下这个变量就知道为什么了
   --Table-onHover-bg-rgb: 243, 246, 246;
@@ -1352,6 +1385,9 @@
   --Table-searchableForm-borderRadius: #{px2rem(4px)};
   --Table-empty-icon-size: #{px2rem(74px)};
 
+  --TableRow-onDisabled-bg: #f7f7f9;
+  --TableRow-onDisabled-color: #b8babf;
+
   --TableCell--edge-paddingX: var(--gap-md);
   --TableCell--edge-paddingX-default: var(--gap-base);
   --TableCell-filterBtn--onActive-color: var(--primary);
@@ -1428,6 +1464,10 @@
   --Tabs--strong-add-size: #{px2rem(32px)};
   --Tabs--strong-arrow-size: #{px2rem(24px)};
 
+  --Tabs-link-disabled-color: #b8babf;
+  --Tabs--simple-split-size: var(--gap-xs) var(--gap-md);
+  --Tabs--sidebar-iconColor: #2468f2;
+
   --Tabs-borderColor: var(--borderColor);
   --Tabs--simple-split-color: var(--Tabs-borderColor);
   --Tabs-borderRadius: var(--borderRadius);
@@ -1451,6 +1491,8 @@
   --Tabs-close-marginTop: #{px2rem(1px)};
   --Tabs-close-size: #{px2rem(12px)};
   --Tabs-link-maxWidth: #{px2rem(160px)};
+  --Tabs-icon-gap: var(--gap-sm);
+  --Tabs-animation-duration: var(--animation-duration);
 
   --Tabs--sidebar-sideWidth: #{px2rem(62px)};
   --Tabs--sidebar-sidePadding: #{px2rem(27px)};
@@ -1511,7 +1553,7 @@
 
   --Toast-border-width: 0;
   --Toast-borderRadius: #{px2rem(2px)};
-  --Toast-box-shadow: var(--boxShadow);
+  --Toast-box-shadow: #{$L1};
   --Toast-close-color: var(--icon-color);
   --Toast-close--onHover-color: var(--Toast-close-color);
 
@@ -1525,6 +1567,8 @@
   --Toast-title-display: block;
   --Toast-width: #{px2rem(400px)};
 
+  --Toast--info-paddingL: 0;
+
   --Tooltip--attr-bg: rgba(0, 0, 0, 0.7);
   --Tooltip--attr-borderColor: var(--borderColor);
   --Tooltip--attr-borderRadius: var(--borderRadius);
@@ -1569,13 +1613,16 @@
 
   --Transfer-title-bg: #f6f8f8;
   --Transfer-selection-maxHeight: #{px2rem(350px)};
+  --TransferSelect--table-heading-bg: var(--background);
+  --TransferSelect--normal-heading-bg: #f6f7fb;
+  --TransferSelect-heading-borderBottom: 0;
 
   --TabsTransfer-title-bg: #f7f7f9;
   --TabsTransfer-border-color: #e8e9eb;
 
   --Tree-indent: var(--gap-md);
   --Tree-icon-gap: var(--gap-xs);
-  --Tree-icon-margin-right: #{px2rem(10px)};
+  --Tree-icon-margin-right: #{px2rem(8px)};
   --Tree-inputHeight: calc(var(--Form-input-height) * 0.85);
   --Tree-item-onHover-bg: rgba(0, 126, 255, 0.08);
   --Tree-item-onHover-bg-pure: rgba(0, 126, 255, 0.08);
@@ -1583,6 +1630,12 @@
   --Tree-itemHeight: #{px2rem(30px)};
   --Tree-itemLabel--onChecked-color: var(--Form-selectValue-color);
   --TreeSelect-popover-bg: #fff;
+  --Tree-item-text-max-height: #{px2rem(250px)};
+  --Tree-item-text-top: #{px2rem(4px)};
+  --Tree-item-arrow-padding-left: #{px2rem(4px)};
+  --Tree-item-arrow-color: #84868c;
+  --Tree-item-onChekced-bg: var(--Form-select-menu-onHover-bg);
+  --Tree-item-onChekced-bg-borderRadius: #{px2rem(2px)};
 
   --Wizard-badge-bg: #{$gray400};
   --Wizard-badge-border: 0;
@@ -1608,17 +1661,20 @@
   --Wizard-steps-ulDisplay: block;
   --Wizard-stepsContent-padding: var(--gap-base);
 
-  --AnchorNav-links-container-borderRight: #{px2rem(1px)} solid #d3dae0;
-  --AnchorNav-onActive-borderWidth: 0 #{px2rem(2px)} 0 0;
+  --AnchorNav-links-container-borderRight: #{px2rem(2px)} solid #d3dae0;
+  --AnchorNav-onActive-borderWidth: 0 0 0 #{px2rem(2px)};
 
   --Steps-bg: var(--borderColorDarken);
   --Steps-status-success: var(--info);
-  --Steps-status-error: var(--danger);
+  --Steps-status-error: var(--Tag-error-color);
+  --Steps-status-wait: #84868c;
   --Steps-icon-fontsize: var(--fontSizeLg);
-  --Steps-title-fontsize: var(--fontSizeLg);
-  --Steps-title-color: var(--text--loud-color);
+  --Steps-title-fontsize: var(--fontSizeMd);
+  --Steps-title-color: #151b26;
   --Steps-sub-title-fontsize: var(--fontSizeBase);
   --Steps-sub-title-color: var(--text-color);
+  --Steps-description-title-fontsize: var(--fontSizeSm);
+  --Steps-description-title-color: #84868c;
   --Steps-line-bg: var(--Steps-bg);
   --Steps-line-success-bg: var(--Steps-status-success);
 
@@ -1648,6 +1704,8 @@
   --TimelineItem--left-line-width: #{px2rem(2px)};
   --TimelineItem--left-line-left: #{px2rem(13px)};
   --TimelineItem--left-line-top: #{px2rem(20px)};
+  --TimelineItem--horizontal-left-line-top: #{px2rem(18px)};
+  --TimelineItem--icon-left-line-left: #{px2rem(12px)};
   --TimelineItem--round-width: #{px2rem(8px)};
   --TimelineItem--round-height: #{px2rem(8px)};
   --TimelineItem--round-left: #{px2rem(10px)};
@@ -1664,6 +1722,8 @@
   --TimelineItem-detail-visible-padding: #{px2rem(10px)};
   --TimelineItem-detail-visible-max-width: #{px2rem(300px)};
   --Timeline-alternate-margin-left: var(--gap-xl);
+  --Timeline-visible-border-radius: var(--gap-xs);
+  --Timeline-horizontal-content-margin-top: #{px2rem(-3px)};
 
   --TimelineItem--icon-radius: 50%;
   --TimelineItem--round-radius: 50%;
@@ -1680,6 +1740,9 @@
   --TimelineItem--line-bg: #e6e6e8;
   --TimelineItem--content-bg: #f2f2f4;
   --TimelineItem-round-bg: #dadbdd;
+  --TimelineItem-custem-button-margin-left: var(--fontSizeSm);
+  --TimelineItem-custem-time-padding-right: var(--fontSizeSm);
+  --TimelineItem-round-bg: #dadbdd;
 
   --Timeline--success-bg: var(--success);
   --Timeline--info-bg: var(--info);
@@ -1699,12 +1762,12 @@
   --Tag-fontColor: #151a26;
 
   --Tag-default-color: #f2f2f4;
-  --Tag-inactive-color: #b4b6ba;
+  --Tag-inactive-color: #b8babf;
   --Tag-active-color: #2468f2;
-  --Tag-processing-color: #1ac5ff;
-  --Tag-success-color: #0bc286;
-  --Tag-error-color: #e8684a;
-  --Tag-warning-color: #ffb200;
+  --Tag-processing-color: #528eff;
+  --Tag-success-color: #30bf13;
+  --Tag-error-color: #f33e3e;
+  --Tag-warning-color: #ff9326;
 
   --Tag-checkable-bgColor: #f2f2f4;
   --Tag-checkable-bgColor-onDisable: #e6e6e8;
@@ -1736,4 +1799,15 @@
   --SearchBox-width: #{px2rem(150px)};
   --SearchBox-history-dropdown-maxWidth: calc(var(--SearchBox-width) * 2);
   --SearchBox-history-dropdown-maxHeight: #{px2rem(200px)};
+  --SearchBox-hover-color: #2468f2;
+  --SearchBox-focus-color: #144bcc;
+  --SearchBox-search-icon-color: #84868c;
+  --SearchBox-enhonce-icon-color: #ffffff;
+  --SearchBox-clearable-icon-color: #d4d6d9;
+  --SearchBox-clearable-icon-size: #{px2rem(16px)};
+  --SearchBox-height: #{px2rem(30px)};
+  --SearchBox-disabled-color: #f7f7f9;
+  --SearchBox-enhonce-disabled-color: #f2f2f4;
+  --SearchBox-enhonce-disabled-search-color: #b8babf;
+  --SearchBox-enhonce-clearable-gap: #{px2rem(6px)};
 }

package/scss/base/_typography.scss

@@ -24,6 +24,10 @@ a {
     color: var(--link-onHover-color);
     text-decoration: var(--link-onHover-decoration);
   }
+
+  &:active {
+    color: var(--link-onClick-color);
+  }
 }
 
 label {

package/scss/components/_alert.scss

@@ -12,6 +12,21 @@
   justify-content: space-between;
   align-items: flex-start;
 
+  &-has-title {
+    padding: var(--Alert-paddingX);
+
+    .#{$ns}Alert-content {
+
+      .#{$ns}Alert-title {
+        line-height: #{px2rem(22px)};
+      }
+
+      .#{$ns}Alert-desc {
+        line-height: #{px2rem(20px)};
+      }
+    }
+  }
+
   &-icon {
     margin-right: var(--gap-sm);
     font-size: var(--fontSizeLg);

package/scss/components/_anchor-nav.scss

@@ -7,7 +7,7 @@
       margin: 0;
       padding: 0;
       width: var(--Tabs--vertical-width);
-      border-right: var(--AnchorNav-links-container-borderRight);
+      border-left: var(--AnchorNav-links-container-borderRight);
       padding-bottom: px2rem(60px);
 
       > .#{$ns}AnchorNav-link {
@@ -19,24 +19,39 @@
           border: var(--Tabs-borderWidth) solid transparent;
           border-width: var(--AnchorNav-onActive-borderWidth);
           color: var(--Tabs-color);
-          padding: var(--Tabs-linkPadding);
-          font-size: var(--Tabs-linkFontSize);
+          padding: 0 var(--gap-sm);
+          padding-left: px2rem(10px);
+          font-size: var(--fontSizeSm);
           outline: none;
-          text-align: right;
+          text-align: left;
           text-decoration: none;
           cursor: pointer;
           margin: 0;
+          margin-left: px2rem(-2px);
+          height: px2rem(32px);
+          line-height: px2rem(32px);
 
           &:hover {
             color: var(--primary);
           }
+
+          &:active {
+            color: #144bcc;
+          }
         }
 
         &.is-active {
-          > a,
+          > a {
+            color: var(--primary);
+            border-color: var(--primary);
+          }
           > a:hover {
-            color: var(--Tabs--vertical-onActive-color);
-            border-color: var(--Tabs--vertical-onActive-border);
+            color: #528EFF;
+            border-color: #528EFF;
+          }
+          > a:active {
+            color: #144bcc;
+            border-color: #144bcc;
           }
         }
       }

package/scss/components/_badge.scss

@@ -61,6 +61,7 @@
     white-space: nowrap;
     text-align: center;
     padding: 0 6px;
+    border: 1px solid #FFFFFF;
   }
 
   // 只显示小红点

package/scss/components/_breadcrumb.scss

@@ -10,10 +10,20 @@
 
   &-item {
     position: relative;
+    display: inline-flex;
+    align-items: center;
 
     &-default {
       cursor: pointer;
       color: var(--Breadcrumb-item-default-color);
+
+      &:hover {
+        color: var(--Breadcrumb-item-hover-color);
+      }
+
+      &:active {
+        color: var(--Breadcrumb-item-active-color);
+      }
     }
     &-dropdown {
       cursor: pointer;
@@ -32,7 +42,8 @@
     }
 
     &-caret {
-      margin-left: var(--gap-sm);
+      height: 16px;
+      margin: 0 2px;
       cursor: pointer;
       display: inline-block;
       transition: transform var(--animation-duration) ease;

package/scss/components/_card.scss

@@ -166,6 +166,10 @@
           text-decoration: none;
         }
       }
+
+      & > .#{$ns}Button-icon:first-child:not(:last-child) {
+        margin-right: var(--Button-icon-rightMargin);
+      }
     }
   }
 

package/scss/components/_collapse-group.scss

@@ -1,15 +1,27 @@
 .#{$ns}CollapseGroup {
-
   .#{$ns}Collapse {
     border-radius: 0;
   }
 
   .#{$ns}Collapse:first-child {
     border-radius: 4px 4px 0 0;
+    & > .#{$ns}Collapse-header {
+      border-radius: 4px 4px 0 0;
+    }
   }
 
   .#{$ns}Collapse:last-child {
     border-radius: 0 0 4px 4px;
+    & > .#{$ns}Collapse-header {
+      border-radius: 0 0 4px 4px;
+    }
+  }
+
+  .#{$ns}Collapse:first-child:nth-last-child(1) {
+    border-radius: 4px;
+    & > .#{$ns}Collapse-header {
+      border-radius: 4px;
+    }
   }
 
   .#{$ns}Collapse:not(:last-child) {

package/scss/components/_collapse.scss

@@ -31,6 +31,7 @@
   &-arrow {
     display: inline-block;
     width: px2rem(16px);
+    height: px2rem(16px);
     text-align: center;
     margin-right: var(--gap-sm);
 
@@ -41,7 +42,7 @@
       width: px2rem(6px);
       height: px2rem(6px);
       top: px2rem(-2px);
-      border-color: #84868C;
+      border-color: #84868c;
       border-style: solid;
       border-width: px2rem(1px) px2rem(1px) 0 0;
       transform: rotate(45deg);

package/scss/components/_crud.scss

@@ -74,7 +74,11 @@
     display: inline-flex;
     align-items: center;
 
-    &:not(:first-child) {
+    &--left:not(:first-child) {
+      margin-left: var(--Crud-toolbar-gap);
+    }
+
+    &--right:not(:last-child) {
       margin-left: var(--Crud-toolbar-gap);
     }
 
@@ -133,7 +137,11 @@
       height: var(--Crud-toolbar-height);
       vertical-align: middle;
 
-      &:not(:first-child) {
+      &--left:not(:first-child) {
+        margin-left: var(--Crud-toolbar-gap);
+      }
+
+      &--right:not(:last-child) {
         margin-left: var(--Crud-toolbar-gap);
       }
 

package/scss/components/_crud2.scss

@@ -70,7 +70,11 @@
     display: inline-flex;
     align-items: center;
 
-    &:not(:first-child) {
+    &--left:not(:first-child) {
+      margin-left: var(--Crud-toolbar-gap);
+    }
+
+    &--right:not(:last-child) {
       margin-left: var(--Crud-toolbar-gap);
     }
 
@@ -125,7 +129,11 @@
       height: var(--Crud-toolbar-height);
       vertical-align: middle;
 
-      &:not(:first-child) {
+      &--left:not(:first-child) {
+        margin-left: var(--Crud-toolbar-gap);
+      }
+
+      &--right:not(:last-child) {
         margin-left: var(--Crud-toolbar-gap);
       }