bkui-vue 0.0.2-beta.130 → 0.0.2-beta.131

package/lib/affix/affix.variable.css

@@ -21,9 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
-  --component-size-small-padding: var(--component-size-small-padding);
-  --component-size-base-padding: var(--component-size-base-padding);
-  --component-size-large-padding: var(--component-size-large-padding);
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/alert/alert.variable.css

@@ -21,9 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
-  --component-size-small-padding: var(--component-size-small-padding);
-  --component-size-base-padding: var(--component-size-base-padding);
-  --component-size-large-padding: var(--component-size-large-padding);
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/backtop/backtop.variable.css

@@ -21,9 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
-  --component-size-small-padding: var(--component-size-small-padding);
-  --component-size-base-padding: var(--component-size-base-padding);
-  --component-size-large-padding: var(--component-size-large-padding);
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/badge/badge.variable.css

@@ -21,9 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
-  --component-size-small-padding: var(--component-size-small-padding);
-  --component-size-base-padding: var(--component-size-base-padding);
-  --component-size-large-padding: var(--component-size-large-padding);
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/breadcrumb/breadcrumb.variable.css

@@ -21,9 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
-  --component-size-small-padding: var(--component-size-small-padding);
-  --component-size-base-padding: var(--component-size-base-padding);
-  --component-size-large-padding: var(--component-size-large-padding);
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/button/button.css

@@ -1,7 +1,7 @@
 .bk-button {
   display: inline-flex;
   height: 32px;
-  padding: var(--component-size-base-padding);
+  padding: 0 14px;
   font-size: 14px;
   color: #63656e;
   text-decoration: none;
@@ -223,12 +223,12 @@
 }
 .bk-button.bk-button-small {
   height: 26px;
-  padding: var(--component-size-small-padding);
+  padding: 0 12px;
   font-size: 12px;
 }
 .bk-button.bk-button-large {
   height: 40px;
-  padding: var(--component-size-large-padding);
+  padding: 0 16px;
   font-size: 16px;
 }
 .bk-button .bk-button-text {
@@ -277,12 +277,12 @@
 }
 .bk-button-group.bk-button-group-small .bk-button {
   height: 26px;
-  padding: var(--component-size-small-padding);
+  padding: 0 12px;
   font-size: 12px;
 }
 .bk-button-group.bk-button-group-large .bk-button {
   height: 40px;
-  padding: var(--component-size-large-padding);
+  padding: 0 16px;
   font-size: 16px;
 }
 .bk-button-group .bk-button {

package/lib/button/button.d.ts

@@ -153,8 +153,8 @@ declare const _default: import("vue").DefineComponent<{
     disabled: boolean;
     size: "" | "small" | "large";
     icon: string;
-    outline: boolean;
     loading: boolean;
+    outline: boolean;
     iconRight: string;
     loadingMode: "default" | "spin";
     selected: boolean;

package/lib/button/button.variable.css

@@ -21,9 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
-  --component-size-small-padding: var(--component-size-small-padding);
-  --component-size-base-padding: var(--component-size-base-padding);
-  --component-size-large-padding: var(--component-size-large-padding);
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/button/index.d.ts

@@ -9,8 +9,8 @@ declare const BkButton: {
             disabled?: boolean;
             size?: "" | "small" | "large";
             icon?: string;
-            outline?: boolean;
             loading?: boolean;
+            outline?: boolean;
             iconRight?: string;
             loadingMode?: "default" | "spin";
             selected?: boolean;
@@ -125,8 +125,8 @@ declare const BkButton: {
             disabled: boolean;
             size: "" | "small" | "large";
             icon: string;
-            outline: boolean;
             loading: boolean;
+            outline: boolean;
             iconRight: string;
             loadingMode: "default" | "spin";
             selected: boolean;
@@ -245,8 +245,8 @@ declare const BkButton: {
     disabled: boolean;
     size: "" | "small" | "large";
     icon: string;
-    outline: boolean;
     loading: boolean;
+    outline: boolean;
     iconRight: string;
     loadingMode: "default" | "spin";
     selected: boolean;

package/lib/card/card.variable.css

@@ -21,9 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
-  --component-size-small-padding: var(--component-size-small-padding);
-  --component-size-base-padding: var(--component-size-base-padding);
-  --component-size-large-padding: var(--component-size-large-padding);
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/cascader/cascader.variable.css

@@ -21,9 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
-  --component-size-small-padding: var(--component-size-small-padding);
-  --component-size-base-padding: var(--component-size-base-padding);
-  --component-size-large-padding: var(--component-size-large-padding);
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/checkbox/checkbox.css

@@ -76,6 +76,12 @@
 .bk-checkbox.is-disabled.is-checked .bk-checkbox-input::after {
   background: #a3c5fd;
 }
+.bk-checkbox.is-prechecking {
+  position: relative;
+}
+.bk-checkbox.is-prechecking .bk-checkbox-input {
+  visibility: hidden;
+}
 .bk-checkbox-input {
   position: relative;
   display: inline-block;
@@ -102,3 +108,9 @@
   margin-left: 6px;
   vertical-align: middle;
 }
+.bk-checkbox-checking {
+  position: absolute;
+  font-size: 16px;
+  color: #3a84ff;
+  animation: loading 1s linear infinite;
+}

package/lib/checkbox/checkbox.d.ts

@@ -71,6 +71,7 @@ declare const _default: import("vue").DefineComponent<{
     inputRef: import("vue").Ref<any>;
     isFocus: import("vue").Ref<boolean>;
     isChecked: import("vue").Ref<boolean>;
+    isPrechecking: import("vue").Ref<boolean>;
     isDisabled: import("vue").ComputedRef<boolean>;
     setChecked: (value?: boolean) => void;
     handleBlur: () => void;

package/lib/checkbox/checkbox.less

@@ -100,6 +100,13 @@
       }
     }
   }
+
+  &.is-prechecking {
+    position: relative;
+    .@{bk-prefix}-checkbox-input {
+      visibility: hidden;
+    }
+  }
 }
 
 .@{bk-prefix}-checkbox-input {
@@ -131,3 +138,10 @@
   margin-left: 6px;
   vertical-align: middle;
 }
+
+.@{bk-prefix}-checkbox-checking {
+  position: absolute;
+  font-size: 16px;
+  color: #3a84ff;
+  animation: loading 1s linear infinite;
+}

package/lib/checkbox/checkbox.variable.css

@@ -21,9 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
-  --component-size-small-padding: var(--component-size-small-padding);
-  --component-size-base-padding: var(--component-size-base-padding);
-  --component-size-large-padding: var(--component-size-large-padding);
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
@@ -202,6 +202,12 @@
 .bk-checkbox.is-disabled.is-checked .bk-checkbox-input::after {
   background: var(--checkbox-disabled-checked-bg);
 }
+.bk-checkbox.is-prechecking {
+  position: relative;
+}
+.bk-checkbox.is-prechecking .bk-checkbox-input {
+  visibility: hidden;
+}
 .bk-checkbox-input {
   position: relative;
   display: inline-block;
@@ -228,3 +234,9 @@
   margin-left: 6px;
   vertical-align: middle;
 }
+.bk-checkbox-checking {
+  position: absolute;
+  font-size: 16px;
+  color: #3a84ff;
+  animation: loading 1s linear infinite;
+}

package/lib/checkbox/common.d.ts

@@ -8,6 +8,7 @@ export declare function useFocus(): [Ref<boolean>, {
 export declare const useCheckbox: () => {
     inputRef: Ref<any>;
     isChecked: Ref<boolean>;
+    isPrechecking: Ref<boolean>;
     isDisabled: import("vue").ComputedRef<boolean>;
     setChecked: (value?: boolean) => void;
     handleChange: (event: Event) => void;

package/lib/checkbox/index.d.ts

@@ -117,6 +117,7 @@ declare const BkCheckbox: {
             inputRef: import("vue").Ref<any>;
             isFocus: import("vue").Ref<boolean>;
             isChecked: import("vue").Ref<boolean>;
+            isPrechecking: import("vue").Ref<boolean>;
             isDisabled: import("vue").ComputedRef<boolean>;
             setChecked: (value?: boolean) => void;
             handleBlur: () => void;
@@ -198,6 +199,7 @@ declare const BkCheckbox: {
         inputRef: import("vue").Ref<any>;
         isFocus: import("vue").Ref<boolean>;
         isChecked: import("vue").Ref<boolean>;
+        isPrechecking: import("vue").Ref<boolean>;
         isDisabled: import("vue").ComputedRef<boolean>;
         setChecked: (value?: boolean) => void;
         handleBlur: () => void;
@@ -250,6 +252,7 @@ declare const BkCheckbox: {
     inputRef: import("vue").Ref<any>;
     isFocus: import("vue").Ref<boolean>;
     isChecked: import("vue").Ref<boolean>;
+    isPrechecking: import("vue").Ref<boolean>;
     isDisabled: import("vue").ComputedRef<boolean>;
     setChecked: (value?: boolean) => void;
     handleBlur: () => void;

package/lib/checkbox/index.js

@@ -1,6 +1,7 @@
 import * as __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__ from "../shared";
 import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
 import * as __WEBPACK_EXTERNAL_MODULE__config_provider_9d0186d9__ from "../config-provider";
+import * as __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__ from "../icon";
 /******/ // The require scope
 /******/ var __webpack_require__ = {};
 /******/ 
@@ -149,6 +150,10 @@ const external_vue_namespaceObject = external_vue_x({ ["computed"]: () => __WEBP
 var external_config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_config_provider_y = x => () => x
 const external_config_provider_namespaceObject = external_config_provider_x({ ["usePrefix"]: () => __WEBPACK_EXTERNAL_MODULE__config_provider_9d0186d9__.usePrefix });
+;// CONCATENATED MODULE: external "../icon"
+var external_icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_icon_y = x => () => x
+const external_icon_namespaceObject = external_icon_x({ ["Loading"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.Loading });
 ;// CONCATENATED MODULE: ../../packages/checkbox/src/common.ts
 /*
  * Tencent is pleased to support the open source community by making
@@ -199,6 +204,7 @@ var useCheckbox = function useCheckbox() {
   var isGroup = !(0,external_shared_namespaceObject.isEmptyObj)(checkboxGroup);
   var inputRef = (0,external_vue_namespaceObject.ref)();
   var isChecked = (0,external_vue_namespaceObject.ref)(props.checked);
+  var isPrechecking = (0,external_vue_namespaceObject.ref)(false);
   // 禁用状态
   var isDisabled = (0,external_vue_namespaceObject.computed)(function () {
     if (isGroup && checkboxGroup.props.disabled) {
@@ -259,12 +265,24 @@ var useCheckbox = function useCheckbox() {
   };
   // 值更新
   var handleChange = function handleChange(event) {
-    if (isDisabled.value) {
+    var $targetInput = event.target;
+    if (isDisabled.value || isPrechecking.value) {
       return;
     }
-    var $targetInput = event.target;
-    isChecked.value = $targetInput.checked;
-    triggerChange(event);
+    isPrechecking.value = true;
+    var nextValue = $targetInput.checked;
+    Promise.resolve(props.beforeChange ? props.beforeChange(nextValue) : true).then(function (result) {
+      if (result) {
+        isChecked.value = nextValue;
+        triggerChange(event);
+      } else {
+        return Promise.reject();
+      }
+    })["catch"](function () {
+      $targetInput.checked = isChecked.value;
+    })["finally"](function () {
+      isPrechecking.value = false;
+    });
   };
   (0,external_vue_namespaceObject.onMounted)(function () {
     if (isGroup) {
@@ -279,6 +297,7 @@ var useCheckbox = function useCheckbox() {
   return {
     inputRef: inputRef,
     isChecked: isChecked,
+    isPrechecking: isPrechecking,
     isDisabled: isDisabled,
     setChecked: setChecked,
     handleChange: handleChange
@@ -317,6 +336,7 @@ var useCheckbox = function useCheckbox() {
 
 
 
+
 var checkboxProps = {
   modelValue: external_shared_namespaceObject.PropTypes.oneOfType([String, Number, Boolean]),
   label: external_shared_namespaceObject.PropTypes.oneOfType([String, Number, Boolean]),
@@ -326,7 +346,7 @@ var checkboxProps = {
   checked: external_shared_namespaceObject.PropTypes.bool.def(false),
   indeterminate: external_shared_namespaceObject.PropTypes.bool,
   beforeChange: external_shared_namespaceObject.PropTypes.func,
-  size: external_shared_namespaceObject.PropTypes.size().def(external_shared_namespaceObject.SizeEnum.LARGE),
+  size: external_shared_namespaceObject.PropTypes.size().def(external_shared_namespaceObject.SizeEnum.DEFAULT),
   immediateEmitChange: external_shared_namespaceObject.PropTypes.bool.def(true) // 默认设置checked是否触发change事件
 };
 
@@ -354,6 +374,7 @@ var checkboxProps = {
     var _useCheckbox = useCheckbox(),
       inputRef = _useCheckbox.inputRef,
       isChecked = _useCheckbox.isChecked,
+      isPrechecking = _useCheckbox.isPrechecking,
       isDisabled = _useCheckbox.isDisabled,
       setChecked = _useCheckbox.setChecked,
       handleChange = _useCheckbox.handleChange;
@@ -363,6 +384,7 @@ var checkboxProps = {
       inputRef: inputRef,
       isFocus: isFocus,
       isChecked: isChecked,
+      isPrechecking: isPrechecking,
       isDisabled: isDisabled,
       setChecked: setChecked,
       handleBlur: handleBlur,
@@ -375,7 +397,7 @@ var checkboxProps = {
   render: function render() {
     var _classes,
       _this = this;
-    var checkboxClass = (0,external_shared_namespaceObject.classes)((_classes = {}, _defineProperty(_classes, "".concat(this.resolveClassName('checkbox')), true), _defineProperty(_classes, 'is-focused', this.isFocus), _defineProperty(_classes, 'is-checked', this.isChecked), _defineProperty(_classes, 'is-disabled', this.isDisabled), _defineProperty(_classes, 'is-indeterminated', this.indeterminate), _classes));
+    var checkboxClass = (0,external_shared_namespaceObject.classes)((_classes = {}, _defineProperty(_classes, "".concat(this.resolveClassName('checkbox')), true), _defineProperty(_classes, "".concat(this.resolveClassName('checkbox'), "-").concat(this.size), true), _defineProperty(_classes, 'is-focused', this.isFocus), _defineProperty(_classes, 'is-checked', this.isChecked), _defineProperty(_classes, 'is-disabled', this.isDisabled), _defineProperty(_classes, 'is-indeterminated', this.indeterminate), _defineProperty(_classes, 'is-prechecking', this.isPrechecking), _classes));
     var renderLabel = function renderLabel() {
       if (!_this.label && !_this.$slots["default"]) {
         return null;
@@ -387,16 +409,18 @@ var checkboxProps = {
     return (0,external_vue_namespaceObject.createVNode)("label", {
       "class": checkboxClass
     }, [(0,external_vue_namespaceObject.createVNode)("span", {
-      "class": [this.resolveClassName('checkbox-input'), this.size]
+      "class": this.resolveClassName('checkbox-input')
     }, [(0,external_vue_namespaceObject.createVNode)("input", {
       "ref": "inputRef",
       "role": "checkbox",
       "type": "checkbox",
       "class": "".concat(this.resolveClassName('checkbox-original')),
-      "disabled": this.isDisabled,
+      "disabled": this.isDisabled || this.isPrechecking,
       "checked": this.isChecked,
       "onChange": this.handleChange
-    }, null)]), renderLabel()]);
+    }, null)]), renderLabel(), this.isPrechecking && (0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.Loading, {
+      "class": "".concat(this.resolveClassName('checkbox-checking'))
+    }, null)]);
   }
 }));
 ;// CONCATENATED MODULE: ../../packages/checkbox/src/checkbox-group.tsx

package/lib/code-diff/code-diff.variable.css

@@ -22,9 +22,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
-  --component-size-small-padding: var(--component-size-small-padding);
-  --component-size-base-padding: var(--component-size-base-padding);
-  --component-size-large-padding: var(--component-size-large-padding);
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/collapse/collapse.variable.css

@@ -21,9 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
-  --component-size-small-padding: var(--component-size-small-padding);
-  --component-size-base-padding: var(--component-size-base-padding);
-  --component-size-large-padding: var(--component-size-large-padding);
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/collapse-transition/collapse-transition.variable.css

@@ -21,9 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
-  --component-size-small-padding: var(--component-size-small-padding);
-  --component-size-base-padding: var(--component-size-base-padding);
-  --component-size-large-padding: var(--component-size-large-padding);
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/color-picker/color-picker.variable.css

@@ -21,9 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
-  --component-size-small-padding: var(--component-size-small-padding);
-  --component-size-base-padding: var(--component-size-base-padding);
-  --component-size-large-padding: var(--component-size-large-padding);
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/config-provider/config-provider.variable.css

@@ -21,9 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
-  --component-size-small-padding: var(--component-size-small-padding);
-  --component-size-base-padding: var(--component-size-base-padding);
-  --component-size-large-padding: var(--component-size-large-padding);
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/container/container.variable.css

@@ -21,9 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
-  --component-size-small-padding: var(--component-size-small-padding);
-  --component-size-base-padding: var(--component-size-base-padding);
-  --component-size-large-padding: var(--component-size-large-padding);
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/date-picker/date-picker.variable.css

@@ -21,9 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
-  --component-size-small-padding: var(--component-size-small-padding);
-  --component-size-base-padding: var(--component-size-base-padding);
-  --component-size-large-padding: var(--component-size-large-padding);
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/dialog/dialog.variable.css

@@ -21,9 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
-  --component-size-small-padding: var(--component-size-small-padding);
-  --component-size-base-padding: var(--component-size-base-padding);
-  --component-size-large-padding: var(--component-size-large-padding);
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/divider/divider.variable.css

@@ -21,9 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
-  --component-size-small-padding: var(--component-size-small-padding);
-  --component-size-base-padding: var(--component-size-base-padding);
-  --component-size-large-padding: var(--component-size-large-padding);
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/dropdown/dropdown.variable.css

@@ -21,9 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
-  --component-size-small-padding: var(--component-size-small-padding);
-  --component-size-base-padding: var(--component-size-base-padding);
-  --component-size-large-padding: var(--component-size-large-padding);
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/exception/exception.variable.css

@@ -21,9 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
-  --component-size-small-padding: var(--component-size-small-padding);
-  --component-size-base-padding: var(--component-size-base-padding);
-  --component-size-large-padding: var(--component-size-large-padding);
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/fixed-navbar/fixed-navbar.variable.css

@@ -21,9 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
-  --component-size-small-padding: var(--component-size-small-padding);
-  --component-size-base-padding: var(--component-size-base-padding);
-  --component-size-large-padding: var(--component-size-large-padding);
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/form/form.variable.css

@@ -21,9 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
-  --component-size-small-padding: var(--component-size-small-padding);
-  --component-size-base-padding: var(--component-size-base-padding);
-  --component-size-large-padding: var(--component-size-large-padding);
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;

package/lib/icon/index.d.ts

@@ -56,6 +56,7 @@ export { default as InfoLine } from '../icon/info-line';
 export { default as Info } from '../icon/info';
 export { default as LeftShape } from '../icon/left-shape';
 export { default as LeftTurnLine } from '../icon/left-turn-line';
+export { default as Loading } from '../icon/loading';
 export { default as NarrowLine } from '../icon/narrow-line';
 export { default as Original } from '../icon/original';
 export { default as PdfFill } from '../icon/pdf-fill';