@douyinfe/semi-foundation 2.1.0 → 2.1.4

package/lib/cjs/cascader/rtl.scss

@@ -0,0 +1,114 @@
+$module: #{$prefix}-cascader;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+
+        &-arrow,
+        &-clearbtn {
+            margin-right: 0;
+            margin-left: $spacing-cascader_clearBtn-marginRight;
+        }
+
+        &-inset-label {
+            margin-right:  $spacing-cascader_label-marginRight;
+            margin-left:  $spacing-cascader_label-marginRight;
+        }
+
+        &.#{$module}-with-prefix {
+            .#{$module}-selection {
+                padding-left: auto;
+                padding-right: 0;
+            }
+        }
+
+        &.#{$module}-with-suffix {
+            .#{$module}-selection {
+                padding-right: auto;
+                padding-left: 0;
+            }
+        }
+
+        &-selection{
+            &-multiple {
+                padding-right: $spacing-cascader_selection_multiple-paddingLeft;
+                padding-left: $spacing-cascader_selection_multiple-paddingRight;
+            }
+
+            &-tag {
+                &:first-child {
+                    margin-right: 0;
+                }
+            }
+
+            &-n {
+                margin-right: 0;
+                margin-left: $spacing-cascader_selection_n-marginRight;
+            }
+
+            .#{$module}-tagInput-wrapper {
+                margin-left: 0;
+                margin-right: $spacing-cascader_selection_tagInput-marginLeft;
+            }
+
+            .#{$prefix}-tagInput {
+                .#{$prefix}-input-wrapper {
+                    margin-left: 0;
+                    margin-right: $spacing-cascader_selection_input-marginLeft;
+                    .#{$prefix}-input {
+                        padding-right: 0;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.#{$module}-option {
+    &-label {
+        &-checkbox {
+            margin-right: 0;
+            margin-left: $spacing-cascader_label_checkbox-marginRight;
+        }
+    }
+}
+
+.#{$module}-option-lists {
+    &-rtl {
+        direction: rtl;
+    }
+
+    .#{$module}-option-lists-rtl ul > li {
+        padding-right: $spacing-cascader_option-paddingLeft;
+        padding-left: auto;
+    }
+
+    .#{$module}-option-lists-rtl .#{$module}-option-list {
+        border-left: 0;
+        border-right: $width-cascader_option_list-border solid $color-cascader_option_list-border-default;
+
+        &:first-child {
+            border-right: none;
+        }
+    }
+
+    .#{$module}-option-lists-rtl .#{$module}-option {
+        &-icon {
+            &-active,
+            &-empty {
+                margin-right: 0;
+                margin-left: $spacing-cascader_empty_icon-marginRight;
+            }
+        }
+
+        &-flatten {
+            padding-right: 0;
+            padding-left: $spacing-cascader_flatten_list-paddingRight;
+        }
+
+        .#{$prefix}-icon-chevron_right {
+            transform: scaleX(-1);
+        }
+    }
+}

package/lib/cjs/cascader/util.d.ts

@@ -0,0 +1,4 @@
+export declare function isValid(val: any): boolean;
+export declare function normalizedArr(val: any): any[];
+export declare function convertDataToEntities(dataNodes: any): any;
+export declare function findKeysForValues(value: any, keyEntities: any): any[];

package/lib/cjs/cascader/util.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.convertDataToEntities = convertDataToEntities;
+exports.findKeysForValues = findKeysForValues;
+exports.isValid = isValid;
+exports.normalizedArr = normalizedArr;
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
+
+var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
+
+var _isNull2 = _interopRequireDefault(require("lodash/isNull"));
+
+function getPosition(level, index) {
+  var _context;
+
+  return (0, _concat.default)(_context = "".concat(level, "-")).call(_context, index);
+}
+
+function isValid(val) {
+  return !(0, _isNull2.default)(val) && !(0, _isUndefined2.default)(val);
+}
+
+function normalizedArr(val) {
+  if (!(0, _isArray.default)(val)) {
+    return [val];
+  } else {
+    return val;
+  }
+}
+/**
+ * Traverse all the data by `treeData`.
+ */
+
+
+function traverseDataNodes(treeNodes, callback) {
+  const processNode = (node, ind, parent) => {
+    const children = node ? node.children : treeNodes;
+    let item = null; // Process node if is not root
+
+    if (node) {
+      const key = parent ? getPosition(parent.key, ind) : "".concat(ind);
+      item = {
+        data: (0, _assign.default)({}, node),
+        ind,
+        key,
+        level: parent ? parent.level + 1 : 0,
+        parentKey: parent ? parent.key : null,
+        path: parent ? [...parent.path, key] : [key],
+        valuePath: parent ? [...parent.valuePath, node.value] : [node.value]
+      };
+      callback(item);
+    } // Process children node
+
+
+    if (children) {
+      (0, _forEach.default)(children).call(children, (subNode, subIndex) => {
+        processNode(subNode, subIndex, item);
+      });
+    }
+  };
+
+  processNode(null);
+}
+
+function convertDataToEntities(dataNodes) {
+  const keyEntities = {};
+  traverseDataNodes(dataNodes, data => {
+    const {
+      key,
+      parentKey
+    } = data;
+    const entity = (0, _assign.default)({}, data);
+    keyEntities[key] = entity; // Fill children
+
+    entity.parent = keyEntities[parentKey];
+
+    if (entity.parent) {
+      entity.parent.children = entity.parent.children || [];
+      entity.parent.children.push(entity);
+    }
+  });
+  return keyEntities;
+}
+
+function findKeysForValues(value, keyEntities) {
+  var _context2, _context3;
+
+  const valuePath = normalizedArr(value);
+  const res = (0, _map.default)(_context2 = (0, _filter.default)(_context3 = (0, _values.default)(keyEntities)).call(_context3, item => (0, _isEqual2.default)(item.valuePath, valuePath))).call(_context2, item => item.key);
+  return res;
+}

package/lib/cjs/cascader/variables.scss

@@ -0,0 +1,117 @@
+$radius-cascader: var(--semi-border-radius-small); // 级联选择菜单圆角
+
+$color-cascader_default-border-default: transparent; // 级联选择描边颜色
+$color-cascader_default-bg-default: var(--semi-color-fill-0); // 级联选择菜单项背景颜色 - 默认
+$color-cascader_default-bg-hover: var(--semi-color-fill-1); // 级联选择菜单项背景颜色 - 悬浮
+$color-cascader_default-border-focus: var(--semi-color-focus-border); // 级联选择描边颜色 - 选中
+$color-cascader_option_list-border-default: var(--semi-color-fill-0); // 级联选择各级菜单分割线颜色
+$color-cascader_option_main-text-default: var(--semi-color-text-0); // 级联选择菜单项文字颜色
+$color-cascader_option-bg-hover: var(--semi-color-fill-0); // 级联选择菜单项背景颜色 - 悬浮
+$color-cascader_option-bg-active: var(--semi-color-fill-1); // 级联选择菜单项背景颜色 - 按下
+$color-cascader_option-bg-selected: var(--semi-color-primary-light-default); // 级联选择菜单项背景颜色 - 命中
+$color-cascader_option_disabled-text-default: var(--semi-color-disabled-text); // 级联选择菜单项文字颜色 - 禁用
+$color-cascader_option_disabled-bg-hover: transparent; // 级联选择菜禁用单项背景颜色 - 悬浮
+$color-cascader_option_disabled-bg-active: transparent; // 级联选择菜禁用单项背景颜色 - 按下
+
+// warning，same as Input
+$color-cascader_warning-bg-default: var(--semi-color-warning-light-default); // 级联选择触发器警告背景颜色
+$color-cascader_warning-border-default: var(--semi-color-warning-light-default); // 级联选择触发器警告描边颜色
+
+$color-cascader_warning-bg-hover: var(--semi-color-warning-light-hover); // 级联选择触发器警告背景颜色 - 悬浮
+$color-cascader_warning-border-hover: var(--semi-color-warning-light-hover); // 级联选择触发器警告描边颜色 - 悬浮
+
+$color-cascader_warning-bg-focus: var(--semi-color-warning-light-default); // 级联选择触发器警告背景颜色 - 选中
+$color-cascader_warning-border-focus: var(--semi-color-warning); // 级联选择触发器警告描边颜色 - 选中
+
+$color-cascader_warning-bg-active: var(--semi-color-warning-light-active); // 级联选择触发器警告背景颜色 - 按下
+$color-cascader_warning-border-active: var(--semi-color-warning-light-active); // 级联选择触发器警告描边颜色 - 按下
+
+// error，same as Input
+$color-cascader_danger-bg-default: var(--semi-color-danger-light-default); // 级联选择触发器危险背景颜色
+$color-cascader_danger-border-default: var(--semi-color-danger-light-default); // 级联选择触发器危险描边颜色
+
+$color-cascader_danger-bg-hover: var(--semi-color-danger-light-hover); // 级联选择触发器危险背景颜色 - 悬浮
+$color-cascader_danger-border-hover: var(--semi-color-danger-light-hover); // 级联选择触发器危险描边颜色 - 悬浮
+
+$color-cascader_danger-bg-focus: var(--semi-color-danger-light-default); // 级联选择触发器危险背景颜色 - 选中
+$color-cascader_danger-border-focus: var(--semi-color-danger); // 级联选择触发器危险描边颜色 - 选中
+
+$color-cascader_danger-bg-active: var(--semi-color-danger-light-active); // 级联选择触发器危险背景颜色 - 按下
+$color-cascader_danger-border-active: var(--semi-color-danger-light-active); // 级联选择触发器危险描边颜色 - 按下
+
+$spacing-cascader_selection-paddingLeft: 12px; // 级联选择触发器左侧内边距
+$spacing-cascader_selection-paddingRight: 12px; // 级联选择触发器右侧内边距
+$spacing-cascader_selection_multiple-paddingLeft: $spacing-extra-tight; // 级联选择触发器多选时左侧内边距
+$spacing-cascader_selection_multiple-paddingRight: $spacing-extra-tight; // 级联选择触发器多选时右侧内边距
+$spacing-cascader_selection_tag-marginX: $spacing-super-tight; // 级联选择触发器多选时标签的水平外边距
+$spacing-cascader_selection_tag-marginY: 1px; // 级联选择触发器多选时标签的垂直外边距
+$spacing-cascader_selection_tagInput-marginLeft: - $spacing-extra-tight; // 级联选择触发器多选搜索时 TagInput 的左外边距
+$spacing-cascader_selection_input-marginLeft: $spacing-extra-tight; // 级联选择触发器多选搜索时输入框的左外边距
+$spacing-cascader_selection_n-marginRight: $spacing-extra-tight; // 超出 maxTagCount 后，+n 的右外边距
+$spacing-cascader_clearBtn-marginRight: 12px; // 级联选择触发器清空按钮右侧外边距
+
+$color-cascader_selection_n-text-default: var(--semi-color-text-0); // 超出 maxTagCount 后，+n 的文字默认颜色
+$color-cascader_selection_n-text-disabled: var(--semi-color-disabled-text); // 超出 maxTagCount 后，+n 的文字disabled颜色
+$color-cascader_selection-text-default: var(--semi-color-text-0); // 级联选择选中项文字颜色
+$color-cascader_placeholder-text-default: var(--semi-color-text-2); // 级联选择未选中项文字颜色
+$color-cascader-icon-default: var(--semi-color-text-2); // 级联选择图标颜色 - 默认
+$color-cascader-icon-hover: var(--semi-color-primary-hover); // 级联选择图标颜色 - 悬浮
+$color-cascader-icon-active: var(--semi-color-primary-active); // 级联选择图标颜色 - 按下
+
+$color-cascader_label-text-default: var(--semi-color-text-2); // 级联选择 prefix 文字颜色
+$color-cascader_option-icon-default: $color-cascader-icon-default; // 级联选择菜单项图标颜色
+
+
+$color-cascader_input_disabled-bg-default: var(--semi-color-disabled-fill); // 级联选择禁用态背景颜色
+$color-cascader_input_disabled-bg-hover: var(--semi-color-disabled-fill); // 级联选择禁用态背景颜色 - 悬浮
+$color-cascader_input_disabled-text-default: var(--semi-color-disabled-text); // 级联选择禁用态文字颜色
+$color-cascader_input_disabled-icon-default: var(--semi-color-disabled-text); // 级联选择禁用态图标颜色
+$color-cascader_search-border-default: var(--semi-color-fill-0); // 级联选择搜索描边颜色
+$color-cascader_option_empty-text-default: var(--semi-color-disabled-text); // 级联选择空状态文字颜色
+$color-cascader_input-bg-default: transparent; // 级联选择输入框背景颜色
+$color-cascader_input-border-default: none; // 级联选择输入框描边颜色
+$color-cascader_select_highlight: var(--semi-color-primary); // 级联选择器搜索命中后文字高亮的颜色
+
+$font-cascader_select-fontWeight: $font-weight-bold; // 级联选择菜单项字重 - 选中
+$font-cascader-fontWeight: $font-weight-regular; // 级联选择菜单项字重 - 未选中
+$font-cascader_label-fontWeight: 600;
+$font-cascader_selection_n-fontSize: $font-size-small; // 超出 maxTagCount 后，+n 的文字尺寸
+
+$width-cascader-border: 1px; // 级联选择触发器描边宽度
+$width-cascader_option_list-border: 1px; // 级联选择各级菜单分割线宽度
+$width-cascader:  80px; // 级联选择触发器最小宽度
+$height-cascader_default:  $height-control-default; // 级联选择触发器高度 - 默认
+$height-cascader_small: $height-control-small; // 级联选择触发器高度 - 小尺寸
+$height-cascader_large: $height-control-large; // 级联选择触发器高度 - 大尺寸
+$width-cascader_focus-border: $border-thickness-control-focus; // 级联选择触发器描边宽度 - 选中态
+$width-cascader_search-border: 1px; // 级联选择触搜索描边宽度
+$width-cascader-icon: 16px; // 级联选择图标尺寸
+$width-cascader_option:  150px; // 级联选择各级菜单宽度
+$height-cascader_option_list: 180px; // 级联选择菜单高度
+$height-cascader_selection_tagInput_input_small: 22px;
+$height-cascader_selection_tagInput_input_default: 30px;
+$height-cascader_selection_tagInput_input_large: 38px;
+
+$spacing-cascader_text-marginX: $spacing-base-tight; // 级联选择 prefix/suffix 文字水平内间距
+$spacing-cascader_icon-marginX: $spacing-tight; // 级联选择 prefix/suffix 图标水平内间距
+$spacing-cascader_label-marginRight: $spacing-base-tight; // 级联选择 prefix/suffix 图标水平内间距
+$spacing-cascader_label_checkbox-marginRight: $spacing-tight; // 级联选择 checkbox 的右间距
+$spacing-cascader_selection_n-paddingX: $spacing-tight; // 级联选择 +N 的水平间距
+
+$spacing-cascader_flatten_list-paddingRight: 64px; // 级联选择搜索结果菜单右侧内边距
+$spacing-cascader_empty_icon-marginRight: 8px;  // 级联选择搜索结果菜单
+
+$spacing-cacader_option_list-paddingY: 4px; // 级联选择菜单项垂直内边距
+$spacing-cacader_option_list-paddingX: 0px; // 级联选择菜单项水平内边距
+
+$spacing-cascader_search-paddingX: 12px; // 级联选择搜索水平内边距
+$spacing-cascader_search-paddingY: 8px; // 级联选择搜索垂直内边距
+$spacing-cascader_option_empty-paddingY: 8px; // 级联选择空结果垂直内边距
+$spacing-cascader_option_empty-paddingX: 12px;  // 级联选择空结果水平内边距
+$spacing-cascader_option-paddingTop: 8px; // 级联选择菜单项顶部内边距
+$spacing-cascader_option-paddingBottom: 8px; // 级联选择菜单项底部内边距
+$spacing-cascader_option-paddingLeft: 12px; // 级联选择菜单项左侧内边距
+$spacing-cascader_option-paddingRight: 16px; // 级联选择菜单项右侧内边距
+
+
+

package/lib/cjs/checkbox/checkbox.css

@@ -0,0 +1,330 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-checkbox {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  cursor: pointer;
+}
+.semi-checkbox input[type=checkbox] {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+}
+.semi-checkbox-addon {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  padding-left: 8px;
+  color: var(--semi-color-text-0);
+  line-height: 20px;
+  user-select: none;
+}
+.semi-checkbox:hover .semi-checkbox-inner-display {
+  background: var(--semi-color-fill-0);
+  box-shadow: inset 0 0 0 1px var(--semi-color-focus-border);
+}
+.semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
+  background: var(--semi-color-primary-hover);
+  box-shadow: none;
+}
+.semi-checkbox:active .semi-checkbox-inner-display {
+  background: var(--semi-color-fill-1);
+}
+.semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
+  background: var(--semi-color-primary-active);
+  box-shadow: none;
+}
+.semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-display {
+  background: var(--semi-color-disabled-fill);
+  box-shadow: inset 0 0 0 1px var(--semi-color-border);
+}
+.semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
+  background: var(--semi-color-primary-disabled);
+  box-shadow: none;
+}
+.semi-checkbox-inner {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 16px;
+  height: 20px;
+  user-select: none;
+  cursor: pointer;
+}
+.semi-checkbox-inner-display {
+  box-sizing: border-box;
+  position: relative;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  background: transparent;
+  box-shadow: inset 0 0 0 1px var(--semi-color-text-3);
+  border-radius: var(--semi-border-radius-extra-small);
+}
+.semi-checkbox-inner-display .semi-icon {
+  font-size: 16px;
+}
+.semi-checkbox-inner-pureCardType {
+  display: none;
+}
+.semi-checkbox-inner-checked .semi-checkbox-inner-display {
+  background: var(--semi-color-primary);
+  color: var(--semi-color-white);
+  box-shadow: inset 0 0 0 1px var(--semi-color-primary);
+  border-radius: var(--semi-border-radius-extra-small);
+}
+.semi-checkbox-inner-checked > .semi-checkbox-addon {
+  color: var(--semi-color-text-0);
+}
+.semi-checkbox:hover .semi-checkbox-inner-display {
+  background: var(--semi-color-fill-0);
+}
+.semi-checkbox:hover.semi-checkbox-indeterminate .semi-checkbox-inner-display {
+  background: var(--semi-color-primary-hover);
+  box-shadow: none;
+  color: var(--semi-color-white);
+}
+.semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
+  background: var(--semi-color-primary-hover);
+  border-color: var(--semi-color-primary-hover);
+  color: var(--semi-color-white);
+}
+.semi-checkbox:hover.semi-checkbox-cardType.semi-checkbox-unChecked.semi-checkbox-cardType_unDisabled .semi-checkbox-inner-display {
+  background: var(--semi-color-white);
+}
+.semi-checkbox:active .semi-checkbox-inner-display {
+  background: var(--semi-color-fill-1);
+}
+.semi-checkbox:active.semi-checkbox-indeterminate .semi-checkbox-inner-display {
+  background: var(--semi-color-primary-active);
+  border-color: var(--semi-color-primary-active);
+  color: var(--semi-color-white);
+  box-shadow: none;
+}
+.semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
+  background: var(--semi-color-primary-active);
+  border-color: var(--semi-color-primary-active);
+  color: var(--semi-color-white);
+}
+.semi-checkbox:active.semi-checkbox-cardType.semi-checkbox-unChecked.semi-checkbox-cardType_unDisabled .semi-checkbox-inner-display {
+  background: var(--semi-color-white);
+}
+.semi-checkbox-cardType {
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  border-radius: 3px;
+  padding: 12px 16px;
+  background: transparent;
+  border: 1px solid transparent;
+}
+.semi-checkbox-cardType .semi-checkbox-inner {
+  position: relative;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+.semi-checkbox-cardType .semi-checkbox-inner-display {
+  background: var(--semi-color-white);
+}
+.semi-checkbox-cardType .semi-checkbox-addon {
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--semi-color-text-0);
+  margin-left: 0;
+  padding-left: 0;
+}
+.semi-checkbox-cardType .semi-checkbox-extra {
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--semi-color-text-2);
+  padding-left: 0;
+}
+.semi-checkbox-cardType .semi-checkbox-extra.semi-checkbox-cardType_extra_noChildren {
+  margin-top: 0;
+}
+.semi-checkbox-cardType:hover {
+  background: var(--semi-color-fill-0);
+}
+.semi-checkbox-cardType:active {
+  background: var(--semi-color-fill-1);
+}
+.semi-checkbox-cardType_checked {
+  background: var(--semi-color-primary-light-default);
+  border: 1px solid var(--semi-color-primary);
+}
+.semi-checkbox-cardType_checked:hover {
+  background: var(--semi-color-primary-light-default);
+  border-color: var(--semi-color-primary-hover);
+}
+.semi-checkbox-cardType_checked:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
+  box-shadow: none;
+}
+.semi-checkbox-cardType_checked:active {
+  background: var(--semi-color-primary-light-default);
+  border-color: var(--semi-color-primary-active);
+}
+.semi-checkbox-cardType_disabled:active {
+  background: transparent;
+}
+.semi-checkbox-cardType_disabled:hover {
+  background: transparent;
+}
+.semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType {
+  background: var(--semi-color-primary-light-default);
+  border: 1px solid var(--semi-color-primary-disabled);
+}
+.semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
+  box-shadow: none;
+}
+.semi-checkbox-indeterminate .semi-checkbox-inner-display, .semi-checkbox-checked .semi-checkbox-inner-display {
+  background: var(--semi-color-primary);
+  color: var(--semi-color-white);
+  box-shadow: inset 0 0 0 1px var(--semi-color-primary);
+  border-radius: var(--semi-border-radius-extra-small);
+}
+.semi-checkbox-indeterminate .semi-checkbox-inner-display:hover, .semi-checkbox-checked .semi-checkbox-inner-display:hover {
+  background: var(--semi-color-primary-hover);
+  border-color: var(--semi-color-primary-hover);
+  color: var(--semi-color-white);
+}
+.semi-checkbox-indeterminate .semi-checkbox-inner-display:active, .semi-checkbox-checked .semi-checkbox-inner-display:active {
+  background: var(--semi-color-primary-active);
+  border-color: var(--semi-color-primary-active);
+  color: var(--semi-color-white);
+}
+.semi-checkbox-indeterminate .semi-checkbox-inner-addon, .semi-checkbox-checked .semi-checkbox-inner-addon {
+  color: var(--semi-color-text-0);
+}
+.semi-checkbox-disabled {
+  cursor: not-allowed;
+}
+.semi-checkbox-disabled .semi-checkbox-inner {
+  cursor: not-allowed;
+}
+.semi-checkbox-disabled .semi-checkbox-inner-display {
+  color: var(--semi-color-white);
+  background: var(--semi-color-disabled-fill);
+  box-shadow: inset 0 0 0 1px var(--semi-color-border);
+}
+.semi-checkbox-disabled .semi-checkbox-inner-display:hover {
+  color: var(--semi-color-white);
+  background: transparent;
+}
+.semi-checkbox-disabled .semi-checkbox-inner-checked {
+  color: var(--semi-color-white);
+}
+.semi-checkbox-disabled .semi-checkbox-inner-checked .semi-checkbox-inner-display {
+  opacity: 0.75;
+  background: var(--semi-color-primary-disabled);
+  box-shadow: inset 0 0 0 1px var(--semi-color-primary-disabled);
+}
+.semi-checkbox-disabled .semi-checkbox-inner-checked .semi-checkbox-inner-display:hover {
+  color: var(--semi-color-white);
+  background: var(--semi-color-primary-disabled);
+}
+.semi-checkbox-disabled .semi-checkbox-addon {
+  color: var(--semi-color-disabled-text);
+}
+.semi-checkbox-disabled .semi-checkbox-extra {
+  color: var(--semi-color-disabled-text);
+}
+.semi-checkbox.semi-checkbox-disabled.semi-checkbox-indeterminate .semi-checkbox-inner-display {
+  opacity: 0.75;
+  background: var(--semi-color-primary-disabled);
+  box-shadow: inset 0 0 0 1px var(--semi-color-primary-disabled);
+  color: var(--semi-color-white);
+}
+.semi-checkbox-extra {
+  flex-shrink: 0;
+  flex-grow: 1;
+  flex-basis: 100%;
+  box-sizing: border-box;
+  padding-left: 24px;
+  color: var(--semi-color-text-2);
+  margin-top: 4px;
+}
+
+.semi-checkboxGroup {
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  line-height: 14px;
+}
+.semi-checkboxGroup .semi-checkbox.semi-checkbox-vertical {
+  margin-bottom: 16px;
+}
+.semi-checkboxGroup-horizontal .semi-checkbox {
+  margin-right: 16px;
+  display: inline-flex;
+}
+.semi-checkboxGroup-horizontal .semi-checkbox:last-of-type {
+  margin-right: 0;
+}
+.semi-checkboxGroup-vertical .semi-checkbox {
+  margin-bottom: 12px;
+}
+.semi-checkboxGroup-vertical .semi-checkbox:last-of-type {
+  margin-bottom: 0;
+}
+.semi-checkboxGroup-vertical-cardType .semi-checkbox {
+  margin-bottom: 16px;
+}
+
+.semi-rtl .semi-checkbox,
+.semi-portal-rtl .semi-checkbox {
+  direction: rtl;
+}
+.semi-rtl .semi-checkbox input[type=checkbox],
+.semi-portal-rtl .semi-checkbox input[type=checkbox] {
+  left: auto;
+  right: 0;
+}
+.semi-rtl .semi-checkbox-addon,
+.semi-portal-rtl .semi-checkbox-addon {
+  padding-left: 0;
+  padding-right: 8px;
+}
+.semi-rtl .semi-checkbox-extra,
+.semi-portal-rtl .semi-checkbox-extra {
+  padding-left: 0;
+  padding-right: 24px;
+}
+.semi-rtl .semi-checkbox-cardType .semi-checkbox-inner,
+.semi-portal-rtl .semi-checkbox-cardType .semi-checkbox-inner {
+  margin-right: 0;
+  margin-left: 8px;
+}
+.semi-rtl .semi-checkbox-cardType .semi-checkbox-addon,
+.semi-portal-rtl .semi-checkbox-cardType .semi-checkbox-addon {
+  margin-right: 0;
+  padding-right: 0;
+}
+.semi-rtl .semi-checkbox-cardType .semi-checkbox-extra,
+.semi-portal-rtl .semi-checkbox-cardType .semi-checkbox-extra {
+  padding-right: 0;
+}
+.semi-rtl .semi-checkboxGroup,
+.semi-portal-rtl .semi-checkboxGroup {
+  direction: rtl;
+}
+.semi-rtl .semi-checkboxGroup-horizontal .semi-checkbox,
+.semi-portal-rtl .semi-checkboxGroup-horizontal .semi-checkbox {
+  margin-right: 0;
+  margin-left: 16px;
+}
+.semi-rtl .semi-checkboxGroup-horizontal .semi-checkbox:last-of-type,
+.semi-portal-rtl .semi-checkboxGroup-horizontal .semi-checkbox:last-of-type {
+  margin-left: 0;
+}