@nocobase/client-v2 2.1.0-beta.34 → 2.1.0-beta.36

package/src/components/form/DialogFormLayout.tsx

@@ -0,0 +1,111 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { useFlowView } from '@nocobase/flow-engine';
+import { Button, Space } from 'antd';
+import React, { useCallback } from 'react';
+
+export interface DialogFormLayoutProps {
+  /** Header title rendered in the dialog's title slot. */
+  title: React.ReactNode;
+  /** Form body — typically a `<Form>` wrapping `<Form.Item>` fields. */
+  children: React.ReactNode;
+  /**
+   * Called before the dialog is closed by the Cancel button or the
+   * top-right close (X) icon. Use for "discard changes" confirmations.
+   */
+  onCancel?: () => void | Promise<void>;
+  /**
+   * Called when the Submit button is clicked. Caller owns validation
+   * + the actual API call; the dialog is closed automatically when
+   * `onSubmit` resolves. Throw from `onSubmit` to keep the dialog open
+   * (e.g. on a validation error).
+   */
+  onSubmit?: () => void | Promise<void>;
+  /** Drives the Submit button's loading state. */
+  submitting?: boolean;
+  /** Override the Submit button label. Defaults to "Submit". */
+  submitText?: React.ReactNode;
+  /** Override the Cancel button label. Defaults to "Cancel". */
+  cancelText?: React.ReactNode;
+  /**
+   * Full override of the footer content. When provided, the default
+   * Cancel + Submit buttons are replaced. Useful for forms that need
+   * extra actions (e.g. Preview, Save draft).
+   */
+  footer?: React.ReactNode;
+}
+
+/**
+ * Standard layout for dialog-hosted forms — the dialog counterpart of
+ * `DrawerFormLayout`. Title sits left-aligned in the dialog's native
+ * header (no inline close icon — the dialog provides its own X in the
+ * top-right when opened with `viewer.dialog({ closable: true, ... })`),
+ * the form body fills the middle, and a Cancel + Submit footer sits
+ * at the bottom.
+ *
+ * Why not just reuse `DrawerFormLayout`? `DrawerFormLayout` injects a
+ * `<CloseOutlined>` button next to the title — that's the drawer
+ * visual contract (close lives near the title in a side panel). In a
+ * centered dialog the native top-right close button is the expected
+ * affordance, so a separate layout keeps the visual contract clean.
+ *
+ * Callers own the `<Form>` instance, validation, and the actual API
+ * call. This component only handles the chrome and close behaviour.
+ *
+ * Example:
+ *
+ * ```tsx
+ * ctx.viewer.dialog({
+ *   closable: true,                       // native top-right X
+ *   content: () => (
+ *     <DialogFormLayout
+ *       title={t('Bind verifier')}
+ *       onSubmit={handleSubmit}
+ *       submitting={submitting}
+ *       submitText={t('Bind')}
+ *     >
+ *       <Form form={form} layout="vertical">...</Form>
+ *     </DialogFormLayout>
+ *   ),
+ * });
+ * ```
+ */
+export function DialogFormLayout(props: DialogFormLayoutProps) {
+  const view = useFlowView();
+
+  const handleCancel = useCallback(async () => {
+    await props.onCancel?.();
+    await view.close();
+  }, [props, view]);
+
+  const handleSubmit = useCallback(async () => {
+    await props.onSubmit?.();
+    await view.close();
+  }, [props, view]);
+
+  return (
+    <div>
+      {view.Header ? <view.Header title={props.title} /> : null}
+      {props.children}
+      {view.Footer ? (
+        <view.Footer>
+          {props.footer ?? (
+            <Space>
+              <Button onClick={handleCancel}>{props.cancelText ?? 'Cancel'}</Button>
+              <Button type="primary" loading={props.submitting} onClick={handleSubmit}>
+                {props.submitText ?? 'Submit'}
+              </Button>
+            </Space>
+          )}
+        </view.Footer>
+      ) : null}
+    </div>
+  );
+}

package/src/components/form/DrawerFormLayout.tsx

@@ -7,22 +7,15 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { CloseOutlined } from '@ant-design/icons';
-import { css } from '@emotion/css';
 import { useFlowView } from '@nocobase/flow-engine';
 import { Button, Space } from 'antd';
 import React, { useCallback } from 'react';
 
 export interface DrawerFormLayoutProps {
-  /** Header title rendered next to the close (X) button. */
+  /** Header title rendered next to antd Drawer's native close (X) icon. */
   title: React.ReactNode;
   /** Form body — typically a `<Form>` wrapping `<Form.Item>` fields. */
   children: React.ReactNode;
-  /**
-   * Called before the drawer is closed by either the Cancel button or the
-   * header's X icon. Use for "discard changes" confirmations.
-   */
-  onCancel?: () => void | Promise<void>;
   /**
    * Called when the Submit button is clicked. Caller owns validation + the
    * actual API call; the drawer is closed automatically when `onSubmit`
@@ -44,29 +37,26 @@ export interface DrawerFormLayoutProps {
   footer?: React.ReactNode;
 }
 
-const titleClassName = css`
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  margin-left: -8px;
-`;
-
 /**
- * Standard layout for drawer-hosted forms: a close-icon + title header on
- * top, the caller-provided form body in the middle, and a Cancel + Submit
- * footer at the bottom. Wraps `useFlowView()`'s `Header` / `Footer` slots
- * so the drawer chrome stays consistent across plugins.
+ * Standard layout for drawer-hosted forms: a title-only header on top
+ * (caller must open the drawer with `viewer.drawer({ closable: true })`
+ * so antd Drawer renders its native left-side X next to the title),
+ * the caller-provided form body in the middle, and a Cancel + Submit
+ * footer at the bottom. Wraps `useFlowView()`'s `Header` / `Footer`
+ * slots so the drawer chrome stays consistent across plugins.
+ *
+ * To intercept close (e.g. dirty-form confirmation), use the lower-level
+ * `viewer.drawer({ preventClose, beforeClose, ... })` hooks — this
+ * layout no longer wraps a custom close handler.
  *
  * Callers own the `<Form>` instance, validation, and the actual API call.
- * This component only handles the chrome and the close behaviour.
  */
 export function DrawerFormLayout(props: DrawerFormLayoutProps) {
   const view = useFlowView();
 
   const handleCancel = useCallback(async () => {
-    await props.onCancel?.();
     await view.close();
-  }, [props, view]);
+  }, [view]);
 
   const handleSubmit = useCallback(async () => {
     await props.onSubmit?.();
@@ -75,16 +65,7 @@ export function DrawerFormLayout(props: DrawerFormLayoutProps) {
 
   return (
     <div>
-      {view.Header ? (
-        <view.Header
-          title={
-            <span className={titleClassName}>
-              <Button type="text" size="small" icon={<CloseOutlined />} onClick={handleCancel} />
-              <span>{props.title}</span>
-            </span>
-          }
-        />
-      ) : null}
+      {view.Header ? <view.Header title={props.title} /> : null}
       {props.children}
       {view.Footer ? (
         <view.Footer>

package/src/components/form/PasswordInput.tsx

@@ -0,0 +1,211 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { Input, type InputProps } from 'antd';
+import type { PasswordProps as AntdPasswordProps } from 'antd/es/input';
+import React from 'react';
+
+// --- Strength scoring -------------------------------------------------------
+// Pure scoring function ported from the v1 client's password utils. Returns a
+// bucketed score in `[20, 40, 60, 80, 100]` based on character-class diversity,
+// length, repeated / sequential / consecutive character penalties, and a
+// "middle non-letter / non-symbol" bonus. No external dependencies — safe to
+// run on any string.
+//
+// Kept private to this module on purpose. Callers consume the visual strength
+// bar via `<PasswordInput checkStrength>`; they shouldn't need to compute the
+// raw score themselves.
+
+const isNum = (c: number) => c >= 48 && c <= 57;
+const isLower = (c: number) => c >= 97 && c <= 122;
+const isUpper = (c: number) => c >= 65 && c <= 90;
+const isSymbol = (c: number) => !(isLower(c) || isUpper(c) || isNum(c));
+const isLetter = (c: number) => isLower(c) || isUpper(c);
+
+function getStrength(val: string): number {
+  if (!val) return 0;
+  let num = 0;
+  let lower = 0;
+  let upper = 0;
+  let symbol = 0;
+  let MNS = 0;
+  let rep = 0;
+  let repC = 0;
+  let consecutive = 0;
+  let sequential = 0;
+  const len = () => num + lower + upper + symbol;
+  const callMe = () => {
+    let re = num > 0 ? 1 : 0;
+    re += lower > 0 ? 1 : 0;
+    re += upper > 0 ? 1 : 0;
+    re += symbol > 0 ? 1 : 0;
+    return re > 2 && len() >= 8 ? re + 1 : 0;
+  };
+  for (let i = 0; i < val.length; i++) {
+    const c = val.charCodeAt(i);
+    if (isNum(c)) {
+      num++;
+      if (i !== 0 && i !== val.length - 1) MNS++;
+      if (i > 0 && isNum(val.charCodeAt(i - 1))) consecutive++;
+    } else if (isLower(c)) {
+      lower++;
+      if (i > 0 && isLower(val.charCodeAt(i - 1))) consecutive++;
+    } else if (isUpper(c)) {
+      upper++;
+      if (i > 0 && isUpper(val.charCodeAt(i - 1))) consecutive++;
+    } else {
+      symbol++;
+      if (i !== 0 && i !== val.length - 1) MNS++;
+    }
+    let exists = false;
+    for (let j = 0; j < val.length; j++) {
+      if (val[i] === val[j] && i !== j) {
+        exists = true;
+        repC += Math.abs(val.length / (j - i));
+      }
+    }
+    if (exists) {
+      rep++;
+      const unique = val.length - rep;
+      repC = unique ? Math.ceil(repC / unique) : Math.ceil(repC);
+    }
+    if (i > 1) {
+      const last1 = val.charCodeAt(i - 1);
+      const last2 = val.charCodeAt(i - 2);
+      if (isLetter(c)) {
+        if (isLetter(last1) && isLetter(last2)) {
+          const v = val.toLowerCase();
+          const vi = v.charCodeAt(i);
+          const vi1 = v.charCodeAt(i - 1);
+          const vi2 = v.charCodeAt(i - 2);
+          if (vi - vi1 === vi1 - vi2 && Math.abs(vi - vi1) === 1) sequential++;
+        }
+      } else if (isNum(c)) {
+        if (isNum(last1) && isNum(last2)) {
+          if (c - last1 === last1 - last2 && Math.abs(c - last1) === 1) sequential++;
+        }
+      } else if (isSymbol(last1) && isSymbol(last2)) {
+        if (c - last1 === last1 - last2 && Math.abs(c - last1) === 1) sequential++;
+      }
+    }
+  }
+  let sum = 0;
+  const length = len();
+  sum += 4 * length;
+  if (lower > 0) sum += 2 * (length - lower);
+  if (upper > 0) sum += 2 * (length - upper);
+  if (num !== length) sum += 4 * num;
+  sum += 6 * symbol;
+  sum += 2 * MNS;
+  sum += 2 * callMe();
+  if (length === lower + upper) sum -= length;
+  if (length === num) sum -= num;
+  sum -= repC;
+  sum -= 2 * consecutive;
+  sum -= 3 * sequential;
+  sum = Math.max(0, Math.min(100, sum));
+
+  if (sum >= 80) return 100;
+  if (sum >= 60) return 80;
+  if (sum >= 40) return 60;
+  if (sum >= 20) return 40;
+  return 20;
+}
+
+// --- Strength bar UI --------------------------------------------------------
+// Colours and pixel sizes are intentionally kept identical to v1's
+// `PasswordStrength` so the visual remains unchanged across the v1 → v2
+// migration. When the design system formalises tokens for "strength signal"
+// colours, swap these literals for the matching token expressions.
+
+const segmentDividerStyle: React.CSSProperties = {
+  position: 'absolute',
+  zIndex: 1,
+  height: 8,
+  top: 0,
+  background: '#fff',
+  width: 1,
+  transform: 'translate(-50%, 0)',
+};
+
+function StrengthBar({ score }: { score: number }) {
+  return (
+    <div
+      style={{
+        background: '#e0e0e0',
+        marginBottom: 3,
+        position: 'relative',
+      }}
+    >
+      {/* Four white dividers split the bar into five strength brackets that
+          line up with the bucketed scoring in `getStrength`. */}
+      <div style={{ ...segmentDividerStyle, left: '20%' }} />
+      <div style={{ ...segmentDividerStyle, left: '40%' }} />
+      <div style={{ ...segmentDividerStyle, left: '60%' }} />
+      <div style={{ ...segmentDividerStyle, left: '80%' }} />
+      {/* The full gradient is always laid down, then `clip-path` trims it back
+          to the current score percentage — gives a smooth fill animation on
+          value change without re-painting the gradient on every render. */}
+      <div
+        style={{
+          position: 'relative',
+          backgroundImage: '-webkit-linear-gradient(left, #ff5500, #ff9300)',
+          transition: 'all 0.35s ease-in-out',
+          height: 8,
+          width: '100%',
+          marginTop: 5,
+          clipPath: `polygon(0 0,${score}% 0,${score}% 100%,0 100%)`,
+        }}
+      />
+    </div>
+  );
+}
+
+// --- Public component -------------------------------------------------------
+
+export interface PasswordInputProps extends AntdPasswordProps {
+  /**
+   * Render a visual strength bar beneath the input. Defaults to `false`. The
+   * score is computed locally — opting in does NOT add any form validation;
+   * use a separate `Form.Item.rules` entry for that (or wire the entry up to
+   * a cross-plugin password-validator extension point if your project
+   * provides one).
+   */
+  checkStrength?: boolean;
+}
+
+/**
+ * `Input.Password` plus an optional strength meter, ported from the v1
+ * `Password` component. The strength scoring and bar UI are identical to v1,
+ * so users who switch from a v1 page to a v2 page see the same visual signal.
+ *
+ * The component is value-shape compatible with antd `Input.Password` — drop
+ * it into any existing `Form.Item<password>` and toggle the meter with
+ * `checkStrength`.
+ *
+ * Caveats:
+ *
+ * - Strength scoring is purely a UX hint, not validation. Submitting a weak
+ *   password is still allowed unless the server (or a separately installed
+ *   password-policy plugin) rejects it.
+ * - The meter swallows the gap between `<Input.Password>` and the next form
+ *   element. If your `Form.Item` already adds vertical rhythm, the meter
+ *   inherits it; no extra spacing is added.
+ */
+export function PasswordInput(props: PasswordInputProps) {
+  const { value, checkStrength, ...rest } = props;
+  return (
+    <span>
+      <Input.Password {...(rest as InputProps)} value={value} />
+      {checkStrength ? <StrengthBar score={getStrength(String(value || ''))} /> : null}
+    </span>
+  );
+}
+
+export default PasswordInput;

package/src/components/form/RemoteSelect.tsx

@@ -0,0 +1,137 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { useRequest } from 'ahooks';
+import { Select, type SelectProps } from 'antd';
+import React, { useMemo } from 'react';
+
+export interface RemoteSelectFieldNames {
+  label?: string;
+  value?: string;
+}
+
+export interface RemoteSelectProps<RawItem = any, Resp = RawItem[], V = any>
+  extends Omit<SelectProps<V>, 'options' | 'loading'> {
+  /**
+   * Fetch the option source. Receives no arguments; caller closes over the
+   * `ctx.api.resource(...)` (or any other source) it needs. May resolve
+   * with either an array of raw items (the common case) or an arbitrary
+   * envelope object — in the latter case, supply `selectItems` to pluck
+   * the array out.
+   */
+  request: () => Promise<Resp | undefined>;
+  /**
+   * When `request` returns an envelope (object with metadata around the
+   * list), use this to extract the array of items that drives the
+   * dropdown. Defaults to identity, i.e. `request` itself returns the
+   * array.
+   */
+  selectItems?: (response: Resp) => RawItem[] | undefined;
+  /**
+   * Names of the raw item properties that hold the display label and the
+   * persisted value. Defaults to `{ label: 'label', value: 'value' }`.
+   * Ignored when `mapOptions` is supplied.
+   */
+  fieldNames?: RemoteSelectFieldNames;
+  /**
+   * Full custom mapping from a raw item to an antd `OptionType`. When
+   * provided, overrides `fieldNames`.
+   */
+  mapOptions?: (item: RawItem, index: number) => { label: React.ReactNode; value: any };
+  /**
+   * Stable cache key for ahooks `useRequest` so the dropdown doesn't re-fetch
+   * on every re-mount. Pass a value tied to the request's effective inputs.
+   */
+  cacheKey?: string;
+  /**
+   * Re-run the request when any of these values changes. Forwarded to
+   * `useRequest`'s `refreshDeps`.
+   */
+  refreshDeps?: unknown[];
+  /**
+   * Skip the auto-fetch on mount when `false`. Defaults to `true`.
+   */
+  ready?: boolean;
+  /**
+   * Notified once the request resolves. Receives both the mapped item
+   * array and the raw response envelope — useful when callers need to
+   * read sibling metadata (counts, availability hints, etc.) without
+   * issuing a second request.
+   */
+  onLoaded?: (items: RawItem[], response: Resp) => void;
+}
+
+/**
+ * Generic settings-page Select bound to an async option source. The
+ * component itself stays framework-agnostic — it knows nothing about
+ * NocoBase resources, data sources, or Formily. Pass any async `request`
+ * that resolves with an array, and supply `fieldNames` (or `mapOptions`)
+ * to map raw items to antd option shape.
+ *
+ * Search is local-only (antd's default `optionFilterProp="label"`). For
+ * server-side search, drive `request` from external state and pass the
+ * search input via `refreshDeps`.
+ */
+export function RemoteSelect<RawItem = any, Resp = RawItem[], V = any>(props: RemoteSelectProps<RawItem, Resp, V>) {
+  const {
+    request,
+    selectItems,
+    fieldNames,
+    mapOptions,
+    cacheKey,
+    refreshDeps,
+    ready = true,
+    onLoaded,
+    showSearch = true,
+    allowClear = true,
+    ...selectProps
+  } = props;
+
+  const { data: response, loading } = useRequest<Resp | undefined, []>(request, {
+    cacheKey,
+    refreshDeps,
+    ready,
+    onSuccess: (resp) => {
+      if (resp === undefined) return;
+      const items = (selectItems ? selectItems(resp) : (resp as unknown as RawItem[])) || [];
+      onLoaded?.(items, resp);
+    },
+  });
+
+  const items = useMemo<RawItem[]>(() => {
+    if (response === undefined) return [];
+    return (selectItems ? selectItems(response) : (response as unknown as RawItem[])) || [];
+  }, [response, selectItems]);
+
+  const labelKey = fieldNames?.label ?? 'label';
+  const valueKey = fieldNames?.value ?? 'value';
+
+  const options = useMemo(() => {
+    if (mapOptions) {
+      return items.map((item, index) => mapOptions(item, index));
+    }
+    return items.map((item: any) => ({
+      label: item?.[labelKey],
+      value: item?.[valueKey],
+    }));
+  }, [items, mapOptions, labelKey, valueKey]);
+
+  return (
+    <Select
+      {...selectProps}
+      showSearch={showSearch}
+      allowClear={allowClear}
+      optionFilterProp="label"
+      loading={loading}
+      options={options}
+    />
+  );
+}
+
+export default RemoteSelect;

package/src/components/form/index.tsx

@@ -8,8 +8,11 @@
  */
 
 export * from './createFormRegistry';
+export * from './DialogFormLayout';
 export * from './DrawerFormLayout';
 export * from './EnvVariableInput';
 export * from './FileSizeInput';
 export * from './JsonTextArea';
+export * from './PasswordInput';
+export * from './RemoteSelect';
 export * from './VariableInput';

package/src/components/form/table/Table.tsx

@@ -19,7 +19,7 @@ import React, { useMemo, useState } from 'react';
 import { SortableRow, SortHandle } from './dnd/SortableRow';
 import { RowOverlayPreview } from './RowOverlayPreview';
 import { SelectionCell } from './SelectionCell';
-import { indexSwapClassName, selectionGutterClassName } from './styles';
+import { indexSwapClassName, selectionGutterClassName, tableScrollClassName } from './styles';
 import { readRowKey, snapshotSourceRow, type RowKey, type RowSnapshot } from './utils';
 
 type RowSelectionRenderCellResult<RecordType> = React.ReactNode | RenderedCell<RecordType>;
@@ -227,6 +227,7 @@ export function Table<RecordType extends object = any>(props: TableProps<RecordT
 
   const tableClassName = cx(
     className,
+    tableScrollClassName,
     showHandleInSelection && selectionGutterClassName,
     showIndex && rowSelection && indexSwapClassName,
   );

package/src/components/form/table/styles.ts

@@ -10,6 +10,25 @@
 import { css } from '@emotion/css';
 import { SORT_HANDLE_GUTTER } from './constants';
 
+/**
+ * Restore horizontal scrolling on `.ant-table-content` so wide tables in
+ * narrow containers (drawer / settings panel) scroll their inner `<table>`
+ * instead of getting clipped or forcing the outer container to grow.
+ *
+ * `width: max-content` on the inner `<table>` lets columns size to their
+ * natural width; `min-width: 100%` keeps the table filling the viewport
+ * when total column width is smaller than the container.
+ */
+export const tableScrollClassName = css`
+  &.ant-table-wrapper .ant-table-content {
+    overflow: auto hidden;
+  }
+  &.ant-table-wrapper .ant-table-content > table {
+    width: max-content;
+    min-width: 100%;
+  }
+`;
+
 /**
  * Reserve a `SORT_HANDLE_GUTTER`-wide gap on the left of the rowSelection
  * column so the handle's `left:0` lands inside a `position:relative` cell.

package/src/components/index.ts

@@ -12,5 +12,7 @@ export * from './BlankComponent';
 export * from './form/table/dnd';
 export * from './form';
 export * from './Icon';
+export * from './PoweredBy';
 export * from './RouterContextCleaner';
+export * from './SwitchLanguage';
 export * from './form/table';

package/src/css-variable/CSSVariableProvider.tsx

@@ -9,8 +9,9 @@
 
 import { TinyColor } from '@ctrl/tinycolor';
 import { useEffect } from 'react';
-import { CustomToken, defaultTheme } from '@nocobase/client-v2';
 import { theme } from 'antd';
+import { defaultTheme } from '../theme';
+import type { CustomToken } from '../theme';
 
 interface Result extends ReturnType<typeof theme.useToken> {
   token: CustomToken;
@@ -42,6 +43,10 @@ export const CSSVariableProvider = ({ children }) => {
     document.body.style.setProperty('--colorWarningBg', token.colorWarningBg);
     document.body.style.setProperty('--colorWarningBorder', token.colorWarningBorder);
     document.body.style.setProperty('--colorText', token.colorText);
+    document.body.style.setProperty('--colorTextDescription', token.colorTextDescription);
+    document.body.style.setProperty('--colorBgTextHover', token.colorBgTextHover);
+    document.body.style.setProperty('--colorSplit', token.colorSplit);
+    document.body.style.setProperty('--borderRadiusOuter', `${token.borderRadiusOuter}px`);
     document.body.style.setProperty('--colorTextHeaderMenu', token.colorTextHeaderMenu);
     document.body.style.setProperty('--colorPrimaryText', token.colorPrimaryText);
     document.body.style.setProperty('--colorPrimaryTextActive', token.colorPrimaryTextActive);
@@ -81,9 +86,13 @@ export const CSSVariableProvider = ({ children }) => {
     token.colorPrimaryTextActive,
     token.colorPrimaryTextHover,
     token.colorSettings,
+    token.colorBgTextHover,
+    token.colorSplit,
     token.colorText,
+    token.colorTextDescription,
     token.colorWarningBg,
     token.colorWarningBorder,
+    token.borderRadiusOuter,
     token.controlHeightLG,
     token.marginLG,
     token.marginSM,