amis-ui 2.0.0 → 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.0",
+  "version": "2.1.0",
   "description": "",
   "scripts": {
     "build": "npm run clean-dist && NODE_ENV=production rollup -c ",
@@ -33,12 +33,12 @@
     }
   },
   "dependencies": {
-    "amis-core": "*",
-    "amis-formula": "*",
+    "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": "32dc0167ca8637559ac487006c0e78b627573759"
+  "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;
@@ -1731,4 +1794,20 @@
   --default-padding: 4px 12px; // 6px 12px
   --menu-min-width: 150px; // 一级子项最小宽度
   --menu-sub-min-width: 100px; // 二级子项最小宽度
+
+  --SearchBox-height: #{px2rem(30px)};
+  --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/_calendar.scss

@@ -1,4 +1,3 @@
-
 .#{$ns}ScheduleCalendar {
   &-icon {
     position: absolute;
@@ -30,9 +29,9 @@
   }
 
   &-text-overflow {
-    white-space:nowrap;
-    overflow:hidden;
-    text-overflow:ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     position: absolute;
     width: 100%;
   }
@@ -45,7 +44,7 @@
         background: transparent !important;
       }
     }
-    td.rdtActive:hover{
+    td.rdtActive:hover {
       background: var(--Calendar-cell-onHover-bg);
     }
   }
@@ -108,6 +107,11 @@
     border-radius: px2rem(16px) px2rem(16px) 0 0;
     overflow: hidden;
     border-width: 0;
+
+    &--time {
+      height: fit-content;
+      max-height: 90vh;
+    }
   }
 
   &-wrap {
@@ -189,13 +193,15 @@
       border-spacing: 0 px2rem(4px);
     }
 
-    .rdt .rdtPicker td.rdtActive, .rdt .rdtPicker td.rdtActive:hover {
+    .rdt .rdtPicker td.rdtActive,
+    .rdt .rdtPicker td.rdtActive:hover {
       background: transparent;
       color: var(--Calendar-color);
       text-shadow: none;
     }
 
-    .rdt .rdtPicker tr td.rdtDisabled, .rdt .rdtPicker tr td.rdtDisabled:hover {
+    .rdt .rdtPicker tr td.rdtDisabled,
+    .rdt .rdtPicker tr td.rdtDisabled:hover {
       color: #999;
     }
 
@@ -257,7 +263,7 @@
     }
     &-ranges {
       background: #fff;
-      box-shadow: 0 0 2px 2px rgba(0,0,0,0.02);
+      box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.02);
       border-radius: 24px;
       overflow-x: auto;
       position: relative;
@@ -281,8 +287,8 @@
   }
 
   & &-calendar-wrap &-calendar .rdtPicker {
-      width: 100%;
-      padding: 0;
+    width: 100%;
+    padding: 0;
     .rdtOld {
       visibility: hidden;
     }
@@ -309,18 +315,30 @@
 
     .rdtRangeHasEnd,
     .rdtRangeHasEnd:hover {
-      background: linear-gradient(to right, transparent 0%, transparent 50%, var(--Calendar-cell-onBetween-bg) 51%, var(--Calendar-cell-onBetween-bg) 100%) !important;
+      background: linear-gradient(
+        to right,
+        transparent 0%,
+        transparent 50%,
+        var(--Calendar-cell-onBetween-bg) 51%,
+        var(--Calendar-cell-onBetween-bg) 100%
+      ) !important;
     }
 
     .rdtRangeEnd,
     .rdtRangeEnd:hover {
-      background: linear-gradient(to right, var(--Calendar-cell-onBetween-bg) 0%, var(--Calendar-cell-onBetween-bg) 50%, transparent 51%, transparent 100%) !important;
+      background: linear-gradient(
+        to right,
+        var(--Calendar-cell-onBetween-bg) 0%,
+        var(--Calendar-cell-onBetween-bg) 50%,
+        transparent 51%,
+        transparent 100%
+      ) !important;
     }
 
     .rdtToday {
       border: none;
       .calendar-wrap {
-        border: 1px solid #2468F2;
+        border: 1px solid #2468f2;
       }
     }
   }
@@ -363,7 +381,7 @@
     transform: translate(-50%, -50%);
     width: px2rem(136px);
     height: px2rem(36px);
-    background: rgba(0, 0, 0, .9);
+    background: rgba(0, 0, 0, 0.9);
     border-radius: 4px;
     color: #fff;
     display: flex;

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);
+      }
     }
   }