@meta-1/design 0.0.159

package/src/components/uix/pagination/index.tsx

@@ -0,0 +1,180 @@
+import { type FC, useContext, useEffect, useState } from "react";
+import get from "lodash/get";
+
+import { Input } from "@meta-1/design/components/ui/input";
+import {
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+  Pagination as ShadcnPagination,
+} from "@meta-1/design/components/ui/pagination";
+import { UIXContext } from "@meta-1/design/components/uix/config-provider";
+import { Select } from "@meta-1/design/components/uix/select";
+
+export interface PaginationProps {
+  total: number;
+  page: number;
+  size: number;
+  onChange?: (page: number) => void;
+  onSizeChange?: (size: number) => void;
+  sizeOptions?: number[];
+}
+
+export const SIZE_OPTIONS = [10, 20, 50, 100];
+
+// 生成页码数组的辅助函数
+const generatePageNumbers = (currentPage: number, totalPages: number) => {
+  const pages: (number | "ellipsis")[] = [];
+
+  if (totalPages <= 7) {
+    // 如果总页数小于等于7，显示所有页码
+    for (let i = 1; i <= totalPages; i++) {
+      pages.push(i);
+    }
+  } else {
+    // 总是显示第一页
+    pages.push(1);
+
+    if (currentPage <= 4) {
+      // 当前页在前面时
+      for (let i = 2; i <= 5; i++) {
+        pages.push(i);
+      }
+      pages.push("ellipsis");
+      pages.push(totalPages);
+    } else if (currentPage >= totalPages - 3) {
+      // 当前页在后面时
+      pages.push("ellipsis");
+      for (let i = totalPages - 4; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      // 当前页在中间时
+      pages.push("ellipsis");
+      for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+        pages.push(i);
+      }
+      pages.push("ellipsis");
+      pages.push(totalPages);
+    }
+  }
+
+  return pages;
+};
+
+export const Pagination: FC<PaginationProps> = (props) => {
+  const { total = 0, page = 1, size = 20, sizeOptions = SIZE_OPTIONS, onChange, onSizeChange } = props;
+
+  const config = useContext(UIXContext);
+  const totalPageText = get(config.locale, "Pagination.totalPage");
+  const totalText = get(config.locale, "Pagination.total");
+  const sizeText = get(config.locale, "Pagination.size");
+  const go = get(config.locale, "Pagination.go");
+  const goSuffix = get(config.locale, "Pagination.goSuffix");
+
+  const totalPage = Math.ceil(Number(total) / Number(size));
+  // biome-ignore lint/suspicious/noExplicitAny: <pageValue>
+  const [pageValue, setPageValue] = useState<any>(page);
+
+  useEffect(() => {
+    setPageValue(page);
+  }, [page]);
+
+  // biome-ignore lint/suspicious/noExplicitAny: <e>
+  const handleChange = (e: any) => {
+    let v = e.target.value.replace(/[^\d]/g, "");
+    if (v === "") {
+      setPageValue(v);
+      return;
+    }
+    if (v < 1) {
+      v = 1;
+    }
+    if (v > totalPage) {
+      v = totalPage;
+    }
+    setPageValue(v);
+  };
+
+  const pageNumbers = generatePageNumbers(page, totalPage);
+
+  return (
+    <div className="flex items-center justify-center space-x-6">
+      <ShadcnPagination>
+        {/* 总数信息 */}
+        <div className="flex items-center space-x-2 text-muted-foreground text-sm">
+          <span>{totalPageText?.replace("%total", `${total}`)}</span>
+          <span>{totalText?.replace("%page", `${totalPage}`)}</span>
+        </div>
+        {/* 分页导航 */}
+        <PaginationContent>
+          {/* 上一页 */}
+          <PaginationItem>
+            <PaginationPrevious
+              className={page === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
+              onClick={page === 1 ? undefined : () => onChange?.(page - 1)}
+              size="default"
+            />
+          </PaginationItem>
+
+          {/* 页码数字 */}
+          {pageNumbers.map((pageNum, index) => (
+            <PaginationItem key={pageNum === "ellipsis" ? `ellipsis-${index}` : `page-${pageNum}`}>
+              {pageNum === "ellipsis" ? (
+                <PaginationEllipsis />
+              ) : (
+                <PaginationLink
+                  className="cursor-pointer"
+                  isActive={pageNum === page}
+                  onClick={() => onChange?.(pageNum)}
+                  size="default"
+                >
+                  {pageNum}
+                </PaginationLink>
+              )}
+            </PaginationItem>
+          ))}
+
+          {/* 下一页 */}
+          <PaginationItem>
+            <PaginationNext
+              className={page === totalPage ? "pointer-events-none opacity-50" : "cursor-pointer"}
+              onClick={page === totalPage ? undefined : () => onChange?.(page + 1)}
+              size="default"
+            />
+          </PaginationItem>
+        </PaginationContent>
+        {/* 控制区域 */}
+        <div className="flex items-center space-x-3">
+          {/* 页面大小选择 */}
+          <Select
+            className="w-auto"
+            onChange={(v) => onSizeChange?.(Number(v))}
+            options={sizeOptions.map((v) => ({ label: sizeText?.replace("%size", `${v}`) || "", value: `${v}` }))}
+            value={`${size}`}
+          />
+
+          {/* 跳转输入框 */}
+          <div className="flex items-center space-x-1 text-sm">
+            <span>{go}</span>
+            <Input
+              className="h-9 w-12 rounded px-2 text-center"
+              onChange={handleChange}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  onChange?.(Number(pageValue));
+                }
+              }}
+              type="text"
+              value={pageValue}
+            />
+            <span>{goSuffix}</span>
+          </div>
+        </div>
+      </ShadcnPagination>
+    </div>
+  );
+};

package/src/components/uix/radio-group/index.tsx

@@ -0,0 +1,35 @@
+import { type FC, forwardRef, type PropsWithChildren, useState } from "react";
+
+import { Label } from "@meta-1/design/components/ui/label";
+import { RadioGroupItem, RadioGroup as UIRadioGroup } from "@meta-1/design/components/ui/radio-group";
+
+export interface SimpleRadioGroupOptionProps {
+  label: string;
+  value: string;
+}
+
+export interface SimpleRadioGroupProps extends PropsWithChildren {
+  value?: string;
+  onChange?: (value: string) => void;
+  options?: SimpleRadioGroupOptionProps[];
+}
+
+export const SimpleRadioGroup: FC<SimpleRadioGroupProps> = forwardRef((props, _ref) => {
+  const { options = [], value, onChange } = props;
+
+  const [labelKey] = useState(Date.now());
+
+  return (
+    <UIRadioGroup onValueChange={onChange} value={value}>
+      {options.map((option) => {
+        const id = `${labelKey}-${option.value}`;
+        return (
+          <div className="flex items-center space-x-2" key={option.value}>
+            <RadioGroupItem id={id} value={option.value} />
+            <Label htmlFor={id}>{option.label}</Label>
+          </div>
+        );
+      })}
+    </UIRadioGroup>
+  );
+});

package/src/components/uix/result/index.tsx

@@ -0,0 +1,45 @@
+import type { FC, PropsWithChildren, ReactNode } from "react";
+import { CheckIcon, Cross2Icon, ExclamationTriangleIcon, InfoCircledIcon } from "@radix-ui/react-icons";
+
+import { cn } from "@meta-1/design/lib";
+
+export interface ResultProps extends PropsWithChildren {
+  status: "success" | "error" | "info" | "warning";
+  title?: string;
+  subTitle?: string;
+  extra?: ReactNode;
+}
+
+const ICON_MAP = {
+  success: CheckIcon,
+  error: Cross2Icon,
+  info: InfoCircledIcon,
+  warning: ExclamationTriangleIcon,
+};
+
+export const Result: FC<ResultProps> = (props) => {
+  const { status = "info", title, subTitle, extra } = props;
+
+  const Icon = ICON_MAP[status];
+
+  return (
+    <div className="flex flex-col items-center justify-center">
+      {Icon ? (
+        <div
+          className={cn(
+            "flex h-12 w-12 items-center justify-center rounded-full",
+            status === "success" ? "bg-success text-success-foreground" : null,
+            status === "error" ? "bg-error text-error-foreground" : null,
+            status === "info" ? "bg-secondary text-secondary-foreground" : null,
+            status === "warning" ? "bg-warning text-warning-foreground" : null,
+          )}
+        >
+          <Icon className="h-6 w-6" />
+        </div>
+      ) : null}
+      {title ? <div className="mt-4 text-lg">{title}</div> : null}
+      {subTitle ? <div className="mt-4 text-gray-500">{subTitle}</div> : null}
+      {extra ? <div className="mt-4">{extra}</div> : null}
+    </div>
+  );
+};

package/src/components/uix/select/index.tsx

@@ -0,0 +1,93 @@
+import { forwardRef, type MouseEvent, type ReactNode, useState } from "react";
+import { XIcon } from "lucide-react";
+
+import { Empty } from "@meta-1/design/components/uix/empty";
+import { cn } from "@meta-1/design/lib";
+import { SelectContent, SelectItem, SelectTrigger, SelectValue, Select as UISelect } from "../../ui/select";
+
+export interface SelectOptionProps {
+  value: string;
+  label: ReactNode;
+  disabled?: boolean;
+}
+
+export interface SelectProps {
+  options: SelectOptionProps[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  side?: "top" | "right" | "bottom" | "left";
+  sideOffset?: number;
+  align?: "start" | "center" | "end";
+  alignOffset?: number;
+  empty?: ReactNode;
+  allowClear?: boolean;
+  triggerClassName?: string;
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>((props, _ref) => {
+  const {
+    options = [],
+    value,
+    defaultValue,
+    onChange,
+    placeholder,
+    className,
+    empty,
+    allowClear,
+    triggerClassName,
+    ...rest
+  } = props;
+
+  const [innerValue, setInnerValue] = useState<string | undefined>(defaultValue);
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? value : innerValue;
+
+  const handleChange = (val: string) => {
+    if (onChange) {
+      onChange(val);
+    }
+    if (!isControlled) {
+      setInnerValue(val);
+    }
+  };
+
+  const clear = (e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    handleChange("");
+  };
+
+  return (
+    <UISelect {...rest} defaultValue={defaultValue} onValueChange={handleChange} value={currentValue}>
+      <div className={cn("relative inline-block", allowClear && currentValue ? "group" : "", className)}>
+        <SelectTrigger className={cn("flex w-full", triggerClassName)}>
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        {allowClear && currentValue && (
+          <div
+            className="absolute top-0 right-0 z-50 hidden h-full cursor-pointer items-center justify-center px-3 group-hover:flex"
+            onClick={clear}
+          >
+            <XIcon className="size-4 opacity-50" />
+          </div>
+        )}
+      </div>
+      <SelectContent
+        align={props.align}
+        alignOffset={props.alignOffset}
+        side={props.side}
+        sideOffset={props.sideOffset}
+      >
+        {options?.length
+          ? options.map((option) => (
+              <SelectItem disabled={option.disabled} key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))
+          : empty || <Empty />}
+      </SelectContent>
+    </UISelect>
+  );
+});

package/src/components/uix/space/index.tsx

@@ -0,0 +1,24 @@
+import type { FC, PropsWithChildren } from "react";
+
+import { cn } from "@meta-1/design/lib";
+
+export interface SpaceProps extends PropsWithChildren {
+  className?: string;
+  direction?: "horizontal" | "vertical";
+}
+
+export const Space: FC<SpaceProps> = (props) => {
+  const { direction = "horizontal", className } = props;
+  return (
+    <div
+      className={cn(
+        "flex items-start justify-start",
+        direction === "vertical" ? "flex-col space-y-2" : null,
+        direction === "horizontal" ? "flex-row items-start space-x-2" : null,
+        className,
+      )}
+    >
+      {props.children}
+    </div>
+  );
+};

package/src/components/uix/spin/index.tsx

@@ -0,0 +1,12 @@
+import type { FC } from "react";
+
+import { Spin as IconSpin } from "@meta-1/design/components/icons";
+import { cn } from "@meta-1/design/lib";
+
+export type SpinProps = {
+  className?: string;
+};
+
+export const Spin: FC<SpinProps> = (props) => {
+  return <IconSpin className={cn("animate-spin", props.className)} />;
+};

package/src/components/uix/steps/index.tsx

@@ -0,0 +1,67 @@
+import { Children, cloneElement, type FC, type PropsWithChildren, type ReactElement } from "react";
+import { CheckIcon, Cross2Icon } from "@radix-ui/react-icons";
+
+import { cn } from "@meta-1/design/lib";
+
+export interface StepsProps extends PropsWithChildren {
+  current?: number;
+  className?: string;
+}
+
+export interface StepsItemProps extends PropsWithChildren {
+  title: string;
+  description?: string;
+  className?: string;
+  status?: "wait" | "process" | "finish" | "error";
+  index?: number;
+  last?: boolean;
+}
+
+export const StepsItem: FC<StepsItemProps> = (props) => {
+  const { index, status, last, description } = props;
+  return (
+    <div className={cn("flex", last ? null : "flex-1")}>
+      <div
+        className={cn(
+          "mr-2 flex h-8 w-8 items-center justify-center rounded-full",
+          status === "wait" ? "bg-secondary text-secondary-foreground" : null,
+          status === "process" ? "bg-primary text-primary-foreground" : null,
+          status === "finish" ? "bg-success text-success-foreground" : null,
+        )}
+      >
+        {status === "finish" ? <CheckIcon /> : null}
+        {status === "error" ? <Cross2Icon /> : null}
+        {["wait", "process"].includes(status!) ? index! + 1 : null}
+      </div>
+      <div>
+        <div className="leading-8">{props.title}</div>
+        {description ? <div>{description}</div> : null}
+      </div>
+      {last ? null : (
+        <div className="mx-2 flex h-8 flex-1 items-center justify-center">
+          <div className={cn("h-px w-full bg-secondary", status === "finish" ? "bg-primary" : null)} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const Steps: FC<StepsProps> = (props) => {
+  const { current } = props;
+  const size = Children.count(props.children);
+  return (
+    <div className={cn("flex", props.className)}>
+      {Children.map(props.children, (child, index) => {
+        const c = child as ReactElement;
+        // biome-ignore lint/suspicious/noExplicitAny: <props>
+        return cloneElement<any>(c, {
+          // biome-ignore lint/suspicious/noExplicitAny: <props>
+          ...(c as any).props,
+          index,
+          last: index === size - 1,
+          status: index < current! ? "finish" : index === current ? "process" : "wait",
+        });
+      })}
+    </div>
+  );
+};

package/src/components/uix/switch/index.tsx

@@ -0,0 +1,33 @@
+import { type FC, forwardRef, useState } from "react";
+
+import { Switch as UISwitch } from "@meta-1/design/components/ui/switch";
+
+export interface SwitchProps {
+  value?: boolean;
+  onChange?: (value: boolean) => void;
+  readonly?: boolean;
+}
+
+export const Switch: FC<SwitchProps> = forwardRef((props, _ref) => {
+  const { onChange, readonly = false } = props;
+
+  const [checked, setChecked] = useState(props.value);
+
+  const core = (
+    <UISwitch
+      checked={checked}
+      onCheckedChange={(checked) => {
+        setChecked(checked);
+        onChange?.(checked);
+      }}
+    />
+  );
+  return readonly ? (
+    <div className="relative inline-block">
+      {core}
+      <div className="absolute top-0 right-0 bottom-0 left-0" />
+    </div>
+  ) : (
+    core
+  );
+});

package/src/components/uix/tooltip/index.tsx

@@ -0,0 +1,29 @@
+import type { FC, PropsWithChildren, ReactNode } from "react";
+
+import {
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  Tooltip as TooltipUI,
+} from "@meta-1/design/components/ui/tooltip";
+
+type Side = "top" | "right" | "bottom" | "left";
+
+export type TooltipProps = PropsWithChildren & {
+  content: ReactNode;
+  side?: Side;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+
+export const Tooltip: FC<TooltipProps> = (props) => {
+  const { open, onOpenChange } = props;
+  return (
+    <TooltipProvider>
+      <TooltipUI onOpenChange={onOpenChange} open={open}>
+        <TooltipTrigger asChild={true}>{props.children}</TooltipTrigger>
+        <TooltipContent side={props.side}>{props.content}</TooltipContent>
+      </TooltipUI>
+    </TooltipProvider>
+  );
+};

package/src/components/uix/tree/index.tsx

@@ -0,0 +1,39 @@
+import RCTree, { type BasicDataNode, type TreeProps as RCTreeProps, type TreeNodeProps } from "rc-tree";
+import "rc-tree/assets/index.css";
+import "./style.css";
+
+import type { FC, ReactNode } from "react";
+import { TriangleDownIcon, TriangleRightIcon } from "@radix-ui/react-icons";
+
+export type TreeData = {
+  key: string;
+  title: ReactNode;
+  children?: TreeData[];
+} & BasicDataNode;
+
+export type TreeProps = Omit<RCTreeProps<TreeData>, "prefixCls"> & {
+  prefixCls?: string;
+};
+
+export const Tree: FC<TreeProps> = (props) => {
+  return (
+    <RCTree<TreeData>
+      dropIndicatorRender={({ dropPosition, dropLevelOffset, indent }) => {
+        return (
+          <div
+            className="pointer-events-none absolute right-1 rounded-sm bg-primary"
+            style={{ left: indent * -(dropLevelOffset + dropPosition), bottom: -13, height: 3 }}
+          />
+        );
+      }}
+      prefixCls="rc-tree"
+      showIcon={false}
+      switcherIcon={(props: TreeNodeProps) => {
+        const { expanded, isLeaf } = props;
+        if (isLeaf) return null;
+        return expanded ? <TriangleDownIcon className="h-5 w-5" /> : <TriangleRightIcon className="h-5 w-5" />;
+      }}
+      {...props}
+    />
+  );
+};

package/src/components/uix/tree/style.css

@@ -0,0 +1,75 @@
+@import "../../../assets/style/theme.css";
+
+.rc-tree-focused:not(.rc-tree-active-focused) {
+  @apply border-none;
+}
+
+.rc-tree .rc-tree-treenode {
+  @apply w-full px-2 py-1.5 my-0.5 rounded-sm relative;
+  @apply action-effect;
+  @apply action-effect-active;
+  @apply flex justify-start items-center;
+}
+
+.rc-tree .rc-tree-treenode span.rc-tree-switcher,
+.rc-tree .rc-tree-treenode span.rc-tree-iconEle {
+  @apply bg-none w-5 h-5 mr-0 ml-0.5;
+}
+
+.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper {
+  @apply ml-2 flex-1 h-auto w-0 flex-shrink-0;
+}
+
+.rc-tree .rc-tree-node-selected {
+  @apply bg-transparent shadow-none opacity-100;
+}
+
+.rc-tree .rc-tree-treenode.drop-target {
+  @apply bg-primary/20;
+}
+
+.rc-tree .rc-tree-treenode.drop-container ~ .rc-tree-treenode {
+  @apply border-none;
+}
+
+.rc-tree .rc-tree-treenode.dragging {
+  @apply opacity-50;
+}
+
+.rc-tree .rc-tree-title {
+  @apply w-full;
+}
+
+.rc-tree .rc-tree-treenode-selected {
+  @apply action-active;
+}
+
+.rc-tree .rc-tree-treenode span.rc-tree-checkbox {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAC1klEQVRYhe2WT0iTYRzHv77vu3eHOmQLdmiwXEq1KW7GazYjyg2ZnraE6BIdtDYRBOkghII38aBCFLbcDpKH6hAesoaoRKQR4lLcv2ybe2Mddhi79Idt79vTZVsvFZG4vad94Xf6HT4feHgenm8NIQTSbH8M6X0br/s2PwS6kulUnSCKShwgDE1nNSp1/OypRp+Nu+hpbtCHpPuaokA+n2cnn3qnnr1Z6gdAHQT6j/y4cqFz9vbV3iGFQvG9JJDNZtnhhxOL66EtKwDc6LTD0tIeqtdoPQzNvASwByC7T5gSgE4QBVs0yfet+Nf0c0sLAACz3rg6cWu4S6lU5kAIwfj8zH3O5SA9o/0knIhmCSEDhBCKEIIyDUUIcYYT0W89o/2EcznI+PzMPUIIsBnZMXAuh8C5HEW4tYzg36cjnIhmOZeDcC6HsBnZMdB1bU13wp/i5huddnS3XR4E8KRsJ/5n9o4dOZrJ5bPd27EIxTJMjvLvBm0AYGlpDwJwVxBezIMCC/7doI1KplM6AKjXaD0ARBkExAILyXRKRwmiyAIAQzM+GeCQsgRRZKX3PS6XgJQlFcjJKFBiVerF++9UBaoCVYGqQFVAKsDKyD38NwGdjALakgBD0zkAEETBJhddEAUrADA0/YXSqNRxAIgm+V4AtAx8OprkewBAo1LzlKlB7wOAFf9aIwCnDALOAgumBv0yZTGZvQDEuaUFRPjYNABrBeEdET42XSgoosVk9lCtBmPAbra4AWDEO8lG+NgigAGU94pSAJwRPvZ8xDvJAoDdbHG3GoyBGkIIMpkMO/bo7uLb8La0mgXrNdrZwgcyDiC/T+ghACcEUbAWqlljsZqdP9O8OnZ9sKu2tjZXKqfpdJp1v3g8tbC+UtFyajdbZp3d14ZUKtWvcirN2vsNw6addze3YhHb53RKJ4ii4iBEhqa/HlepE8aTp5cvNZ3ztJu4gHT/E4eYrk2ZjgXVAAAAAElFTkSuQmCC");
+  @apply bg-contain w-4 h-4 bg-center;
+}
+
+.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-checkbox-checked {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAACwUlEQVRYhcWXX0hTURzHvzv792puhiYEDqd1LzrpbtbKNETBzZcGjt4SY4IVWwwKogeX0kNQrtowFGdB0EMW1Evmw5AiQqmMrfyXhhaUBWtRYNn0uvWgW3eic7tz1y9cOHB+934/vy/3nnuOKBKJgCvf1Dj15OVTy5upMcOXYKCADbNypCEJkYTyFTkz+4roAUP5EU9ZETXOnRdFAZaWlmRX7/U4H77wngRA0jFNoLDpUE3P2WPNdqlUuhADCIVCsnNdlx8PT/prMmQcpwN7NINXWs4b5HL5IgGAjj7PNaHMAWB40l/d0dfrBADRyMRbuuWGww9ALBTAqpa7zrRpxLvLqQvvP88eFNgcAIiYkEXxjpKC67/+zCu3AQALob9ZZC4YUGXKgFHTCefnggEVYcOsLBPmFqMZLmsrOq2ODWvYMCvLyPfOqGk01TUAAMrUVMLajACcWDUHgNsDD4QFsBjNsa590+Pw9N8XDoAbPQDc2qT7LQdYG/3I9JhwAKlGv6UAfKJPGsBiNG+6oPCJPimAaGcuayssRvOGNXyiTwqA20lTXcO6q5rL2hobpxJ9UgAAYHO3x8ZlaioOgjtONfqoxPjavRcTFXz9EYD/wwTysnOQq1i5mEIau5Q7YdhfBWAl+kt3b6ZsDgAiXYspsnnZijqtjnXXdpu7nVf3QIqf4Wl3G3zTcZta3tHzAohCRH8wfN76tRLpT5lDfPYEjJpOq3MAkBDJPMnLVs7wuTldcwDIy1Z+IhpV8UDaT+IpjarYS2qZil4Ay9vgv1zLVHiIvpQZrddVdgvtXq+r7NaXMqMEAGymRru2kPIKZa4tpAZtpkY7wDmcBoNBmfvRHWf/6+cZPZwatYd7rEeP2xUKxf/DKVfPXg3Rg/6h5nezU3Xffn5XseGwNB1HCSG/c7OUH0sKirzVGr2nSqcf5c7/A2XQD+i/hQ92AAAAAElFTkSuQmCC");
+}
+
+.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-checkbox-indeterminate {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAB4klEQVRYhWP8//8/AzK4cOua1vZTB1LO3brq+fTta8U///6wM1AAWJhYfkoLi94zUtPe4WnmMMdATesasjwjzAG/f/9m61k5u2/90T2ZDAwMTJRYigf8C7R2mV0SnlrIysr6He6Anz9/spXO6Nh64sZFFxpZjAIsNPT3dWdUeLKzs/9iYmBgYOhdNaefXpYzMDAwnLhx0al31dw+BgYGBsaz1y9pZ0ysv8jAwMBMLwdAwd8Z+Y36zHJmWlU3n9y3orPlDAwMDEzMTEy/mAV1FSd8/PZFZAAcwPD95w8BpmdvXysNhOUMDAwMz96+VmL68+8P20A54M+/P2y0yu9Eg1EHjDpgwB3Agkvi1PR1jNS0yCwz6D828QEPAUbTjECsLqMXGPAQGHXAqAMG3gEsTCy/BspyFiaWL0ySQiL3BsoBkkIiD5n0ldR3DJQD9JXU9zC5GtvMZWBg+DsA9v91NbaZw2SpZ3zF29RuJr1t9za1m2mpZ3yFiYGBgSEvML7QREVrD70sN1HR2pcXGF/IwIDUOX379i3b5A2L+radOUzTzqmXie3s3IC4QmFhYUTnFBkcPH1ce9/F46mX79/yePHhjdKff/9YKbGRhYnpq4SAyANdRbU9TvqWc+xNLa8gywMAuU2irA5cYeUAAAAASUVORK5CYII=");
+}
+
+.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-checkbox-disabled {
+  opacity: 0.5;
+}
+
+.dark .rc-tree .rc-tree-treenode span.rc-tree-checkbox {
+  background-image: url("data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAACyUlEQVRYhe2Xz0uTcRzH39/noUdcG8rzGVuX6TZJZS4kyIOnoiZN8lYQQbcW0o+L/iF5khLXLYigboqGS+rUwSBGm+hCp+6SY5+HjS2HTzz7dpnroSIS3U57X7+H1+t7eB6+LyGlhH29FwZCesgfc/k841qXMyBU0YETTFry0CxVtsu5/LKxvhPf/bK5bj8XRwJEpPVELj1xD/c9AKCcBPqP1QrJrfm9xKcpZq42BIhIO3/z8qLLfy4CAPm1DRibufVqoRiXVm0JQJaZD49DIqIOAEGhKtFOd3dMH/CFPCODAIDyzrfVr28+jDOzKaSUuHj7+qx7uO/hYbGC7MJH82DfmAbwlJlrp3FtIlIA3Hd49ZnAxGhnR7cTheTW7OdXbx+LnnD/UP+da0kA6saLFfNg37jBzInTAP9F5KrDqy8N3h3TAFiZl++GFT3kjwFQ82sbONg3ppoFBwBmXj3YN6bzaxsAoOohf0xx+TxRADA2c2kAc82C2/aszoLL54kqWpczCADVQjHOzFaz6cxsVQvFOABoXc6gIlShAYC0asvNhh/tiCVUodm/9+1WCdhZDQFmNltFt7Oa9cf777UF2gJtgbZAW6AhQERaq6BE5PxDAECwVQIAehsC0pImAAhVibaKLlQlAgDSkhXFLFW2AaDT3X2PiNRmw4lI7XR3xwDALFV2lXIuvwwA+oAvDGCy2QIAJusslHP5hMLp7HMAlmdkEA6vPkNEkWaR68/ymXqgWJzOxpW9VCZVSG7NAUBgYlRzePVFInpUj4nTAitENOnw6guBiVENAArJrbm9VCYlpJTQdV3rv3Xl9zRLVwvF+foDcpuZfxwTehaAX6hKpJ5mYXuaZV6/HzcMw2zEqa7rWu/YSEvidHdlbcowjF9xal9PuH+IhgL3XT5PVOtyBoUqzpyEKC353SxVdsq5fILT2fheKpOyn/8ESjQ22fqGVzwAAAAASUVORK5CYII=");
+}
+
+.dark .rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-checkbox-checked {
+  background-image: url("data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAACiUlEQVRYhcWXMUwTURjH/++dHktLE84Ay1Va22CoDSToAjEm2qGNTi6AkQ0HExmIg6uTkQUH40DEiURccDOQ0BAcYDAdWnvFQE9beg4FepfQYgxNrucgV4+SSHuld7/kkkveu/v/3vfed8kRTdNg5HKwt6+jr2fCyXdGWJfDQxjShibQVO2ofHD4oyTtLSub2bmd5NamcZzoAhzHse7Q9ZlL/VceA6DNhP6HSiHx/W0uGpuSZfl3VYDjONZ3/9andk93qEXBJyhm8qvix88RWZbLFADcocFXVoUDQLun+7Y7NDgDAIQP+AO9D0IJAIxVAseoW++j/ZQL9EzYEA4ADBfomaBOvitsQzgAwMl3hSnrcnjtEmBdDi8lDGHtEiAMYVvV73XTMoEB3m+fwPhwBC9Gn2B6ZNIegbGhv40l/BStFxgfjlTvkzmLBcaHI9XVL2wsIy6lrRXQw5M5EfPrS3U9c24CxtIvbCzX/dy5CJgpfUMC0yOTJ1ZYi5nS61w4a8IA70fQ7UPQ7QOAUwFGsXrarpYzKxCX0tV2GhsKnwisLX2jqwcAxnvnxvOzJkVTX0AJQZD3Icj7QAnBV0nEy9F/X7pnH143HA7UsQU6+urGhsLVS6eRU19LQ10wv750Ksxs6asCmqqVzUqYOfVGNFU7JDefPvzW1uG8avotTXCklFK0JO2a38AmKUm7USqnsu8AqDbkq3IqO0dzwrZQSIizVqcXEuJsTtgWKADsrMSmipl81KrwYia/urMSmwKO21BRlHJ6ce3uflx8A6DSwuzKflycTS+u3VMUpQwY/o51+Gv+ANfnedTu7gyzLoeXMPRiM4maWvlVPjjMFnN7UXkzMycJacE4/gcJ4gNYSrcwdgAAAABJRU5ErkJggg==");
+}
+
+.dark .rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-checkbox-indeterminate {
+  background-image: url("data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAB6klEQVRYhe2XvW/TQBiHf3cGUyQnkTjUdnFIAlWlGNShiLVS8ZAKxNCROQwd80ewlokhIqxs7VAJqVJN1a4oQyPcSG1M87WkbWwpifmy5BxLWzlSEwEhuSXPdvfq7nkG32DCOUeQe4/mk3eSsXRInV6RI0qcSOQWhoD7/JfXck869bNtp1jJVb8cFYNzchnAGJOj+uP1uwv31wDQYaQD6DYLX9/VjHzGtu0fVwGMMfnB6tLHcHxWH5G4h3a5sWtt7q/Ytu1RAIjqi2/GJQeAcHx2OaovrgMAUbU5bf6lXgAgjSvgAv/og7FAmRZLC5ADgMS0WJqG1JmUADkAIKTOpKgcURKiAuSIkqBEIrKoACIReVTv/Y+ZBEwChAfc6DdIL73A6pOnPXvuz++BFel7qTJ1u2e9+fkTcvtbfxdwPf2lAB8wG3Cj/nrt307+J4R/A5OASYD4AO5zT5Sc+9ylXss9ERXgtdwq7dRPt0UFdOqnBrUPK+8B+AL8vn1YydGaeWw2C1Z23PZmwcrWzGOTAkB1J59plxvGuOTtcmO3upPPABfP0HEcr7Sx9+z8wHoLoDtCd/f8wMqWNvaeO47jAYG/40vUh3MaS8ZfhaPTKTmiJIhEbw5j5H73m9dyK+3amWEXy7m6WTKD89+j97MqngYOywAAAABJRU5ErkJggg==");
+}
+