@oceanbase/ui 0.2.27 → 0.2.29

package/es/ContentWithQuestion/index.d.ts

@@ -1,10 +1,10 @@
+import { TooltipProps } from '@oceanbase/design';
 import React from 'react';
-import './index.less';
 export interface ContentWithQuestionProps {
     content?: React.ReactNode;
-    tooltip?: any;
+    tooltip?: TooltipProps;
     prefixIcon?: React.ReactNode | boolean;
-    suffixIcon?: React.ReactNode;
+    suffixIcon?: React.ReactNode | boolean;
     className?: string;
     style?: React.CSSProperties;
     onClick?: (e: React.SyntheticEvent) => void;

package/es/ContentWithQuestion/index.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["content", "tooltip", "prefixIcon", "suffixIcon", "className", "children"];
+var _excluded = ["prefixCls", "content", "tooltip", "prefixIcon", "suffixIcon", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -8,41 +8,44 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { QuestionCircleOutlined } from '@oceanbase/icons';
-import { Space, Tooltip } from '@oceanbase/design';
+import { ConfigProvider, Space, Tooltip } from '@oceanbase/design';
 import classNames from 'classnames';
-import React, { isValidElement } from 'react';
-import { getPrefix } from "../_util";
-import "./index.less";
+import React, { useContext, isValidElement } from 'react';
+import useStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var prefix = getPrefix('content-with-question');
 var ContentWithQuestion = function ContentWithQuestion(_ref) {
   var _classNames;
-  var content = _ref.content,
+  var customizePrefixCls = _ref.prefixCls,
+    content = _ref.content,
     tooltip = _ref.tooltip,
     _ref$prefixIcon = _ref.prefixIcon,
     prefixIcon = _ref$prefixIcon === void 0 ? null : _ref$prefixIcon,
     _ref$suffixIcon = _ref.suffixIcon,
-    suffixIcon = _ref$suffixIcon === void 0 ? /*#__PURE__*/_jsx(QuestionCircleOutlined, {
-      className: "".concat(prefix, "-help")
-    }) : _ref$suffixIcon,
+    suffixIcon = _ref$suffixIcon === void 0 ? true : _ref$suffixIcon,
     className = _ref.className,
     children = _ref.children,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  // FIXME: antd 已经废弃 icon type 的用法，该组件也需要做相应处理，后面将会是传入 Icon 的形式而非 type
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('content-with-question', customizePrefixCls);
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR;
   var getIcon = function getIcon(iconConfig) {
     return iconConfig ? /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({}, tooltip), {}, {
       children: /*#__PURE__*/isValidElement(iconConfig) ? iconConfig : /*#__PURE__*/_jsx(QuestionCircleOutlined, {
-        className: "".concat(prefix, "-help")
+        className: "".concat(prefixCls, "-help")
       })
     })) : null;
   };
-  return /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
-    className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "-item"), true), _defineProperty(_classNames, className, !!className), _classNames))
+  return wrapSSR( /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
+    // eslint-disable-next-line react/no-unknown-property
+    prefixCls: customizePrefixCls,
+    className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-item"), true), _defineProperty(_classNames, className, !!className), _classNames))
   }, restProps), {}, {
     children: /*#__PURE__*/_jsxs(Space, {
       children: [getIcon(prefixIcon === true ? /*#__PURE__*/_jsx(QuestionCircleOutlined, {
-        className: "".concat(prefix, "-help"),
+        className: "".concat(prefixCls, "-help"),
         style: {
           marginRight: 4
         }
@@ -51,6 +54,6 @@ var ContentWithQuestion = function ContentWithQuestion(_ref) {
         children: content !== null && content !== void 0 ? content : children
       }), getIcon(suffixIcon)]
     })
-  }));
+  })));
 };
 export default ContentWithQuestion;

package/es/ContentWithQuestion/style/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { GenerateStyle } from '@oceanbase/design/es/theme';
+export declare const genContentWithQuestionStyle: GenerateStyle<any>;
+declare const _default: (prefixCls: string) => {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};
+export default _default;

package/es/ContentWithQuestion/style/index.js

@@ -0,0 +1,28 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
+export var genContentWithQuestionStyle = function genContentWithQuestionStyle(token) {
+  var _$concat;
+  var componentCls = token.componentCls,
+    paddingSM = token.paddingSM;
+  return _defineProperty({}, "".concat(componentCls, "-item"), (_$concat = {
+    display: 'inline-flex',
+    alignItems: 'center'
+  }, _defineProperty(_$concat, "".concat(componentCls, "-prefix"), {
+    marginRight: 8
+  }), _defineProperty(_$concat, "".concat(componentCls, "-suffix"), {
+    marginLeft: 8
+  }), _defineProperty(_$concat, "".concat(componentCls, "-help"), {
+    cursor: 'help'
+  }), _defineProperty(_$concat, "".concat(componentCls, "-color"), {
+    color: 'red'
+  }), _$concat));
+};
+export default (function (prefixCls) {
+  var useStyle = genComponentStyleHook('ContentWithQuestion', function (token) {
+    return [genContentWithQuestionStyle(token)];
+  });
+  return useStyle(prefixCls);
+});

package/es/Highlight/index.d.ts

@@ -29,7 +29,7 @@ export declare const THEME_DARK = "dark";
 export declare const THEME_LIGHT = "light";
 declare const ThemeTypes: ["dark", "light"];
 export type ThemeType = (typeof ThemeTypes)[number];
-declare const supportedLanguages: ("ruby" | "css" | "bash" | "json" | "go" | "javascript" | "typescript" | "groovy" | "java" | "python" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "yaml" | "solidity" | "tsx" | "jsx")[];
+declare const supportedLanguages: ("ruby" | "css" | "javascript" | "typescript" | "groovy" | "java" | "python" | "bash" | "json" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "go" | "yaml" | "solidity" | "tsx" | "jsx")[];
 export type LanguageType = (typeof supportedLanguages)[number] | 'html';
 export interface HighlightProps extends LocaleWrapperProps {
     /**

package/es/Login/index.d.ts

@@ -61,6 +61,7 @@ export interface LoginProps extends FormProps {
     onShowRegisterChange?: (isShow: boolean) => void;
     onShowActivateChange?: (isShow: boolean) => void;
     onAuthCodeImgChange?: () => void;
+    isMobile?: boolean;
 }
 declare const _default: any;
 export default _default;

package/es/Login/index.js

@@ -11,13 +11,12 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useControllableValue } from 'ahooks';
-import { App, ConfigProvider, Button, Divider, Menu, Typography } from '@oceanbase/design';
+import { App, ConfigProvider, Button, Divider, Typography } from '@oceanbase/design';
 import { message } from '@oceanbase/design';
 import classNames from 'classnames';
 import React, { useContext, useCallback } from 'react';
-import { LOCALE_LIST } from "../constant";
 import LocaleWrapper from "../locale/LocaleWrapper";
-import { getPrefix, setLocale } from "../_util";
+import { getPrefix } from "../_util";
 import ActivateForm from "./ActivateForm";
 import zhCN from "./locale/zh-CN";
 import LoginForm from "./LoginForm";
@@ -33,6 +32,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 var prefix = getPrefix('login');
 var Login = function Login(props) {
+  var _classNames;
   var logo = props.logo,
     bgImage = props.bgImage,
     title = props.title,
@@ -51,6 +51,7 @@ var Login = function Login(props) {
     showOtherLoginButton = props.showOtherLoginButton,
     authCodeImg = props.authCodeImg,
     onAuthCodeImgChange = props.onAuthCodeImgChange,
+    isMobile = props.isMobile,
     _props$style = props.style,
     style = _props$style === void 0 ? {} : _props$style;
   var _useControllableValue = useControllableValue(props, {
@@ -84,23 +85,10 @@ var Login = function Login(props) {
     }
     setShowActivate(!showActivate);
   }, [showActivate, isLoading]);
-  var localeMenu = /*#__PURE__*/_jsx(Menu, {
-    onClick: function onClick(_ref) {
-      var key = _ref.key;
-      setLocale(key);
-    },
-    children: LOCALE_LIST.filter(function (item) {
-      return !locales || locales.includes(item.value);
-    }).map(function (item) {
-      return /*#__PURE__*/_jsx(Menu.Item, {
-        children: item.label
-      }, item.value);
-    })
-  });
   var showWaterMark = !showRegister;
   return /*#__PURE__*/_jsx(App, {
     children: /*#__PURE__*/_jsxs("div", {
-      className: classNames("".concat(prefix, "-container"), _defineProperty({}, "".concat(prefix, "-container-with-board"), board)),
+      className: classNames("".concat(prefix, "-container"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "-container-with-board"), board), _defineProperty(_classNames, "".concat(prefix, "-container-mobile"), isMobile), _classNames)),
       style: style,
       children: [/*#__PURE__*/_jsx("div", {
         className: "".concat(prefix, "-bg"),

package/es/Login/index.less

@@ -5,20 +5,19 @@
 .@{prefix}-container {
   display: flex;
   justify-content: space-between;
-  min-width: 768px;
+  min-width: 960px;
   height: 100vh;
   min-height: 600px;
   overflow: auto;
 
   .@{prefix}-bg {
-    width: 540px;
-    min-width: 400px;
+    width: 40%;
     height: 100%;
     background-repeat: no-repeat;
     background-size: cover;
 
     .@{prefix}-info {
-      margin: 185px 90px 0 90px;
+      margin: 185px 48px 0 48px;
       color: #fff;
       font-weight: 600;
       font-size: 56px;
@@ -43,7 +42,7 @@
     background-color: #fff;
 
     .@{prefix}-locale {
-      position: fixed;
+      position: absolute;
       top: 24px;
       right: 24px;
       color: @colorTextTertiary;
@@ -58,6 +57,7 @@
 
     .@{prefix}-content {
       margin-top: -60px;
+      width: 404px;
       .@{prefix}-logo {
         display: block;
         height: 68px;
@@ -87,13 +87,11 @@
         }
 
         .@{prefixCls}-form-item {
-          width: 404px;
           margin-bottom: 24px;
           padding-bottom: 0;
         }
 
         .@{prefixCls}-input-affix-wrapper {
-          width: 404px;
           height: 40px;
           border-radius: 8px;
 
@@ -178,7 +176,6 @@
         }
       }
       .@{prefix}-submit-btn {
-        width: 404px;
         height: 40px;
         border-radius: 8px;
       }
@@ -201,7 +198,6 @@
       }
 
       .@{prefix}-alert {
-        width: 404px;
         margin-bottom: 24px;
         border-radius: 8px;
       }
@@ -209,54 +205,6 @@
   }
 }
 
-@media (max-width: 2048px) {
-  .@{prefix}-container {
-    .@{prefix}-bg {
-      width: 800px;
-
-      .@{prefix}-info {
-        margin: 185px 48px 0 48px;
-        font-size: 72px;
-        .@{prefix}-start {
-          font-size: 48px;
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: 1800px) {
-  .@{prefix}-container {
-    .@{prefix}-bg {
-      width: 700px;
-
-      .@{prefix}-info {
-        margin: 185px 48px 0 48px;
-        font-size: 64px;
-        .@{prefix}-start {
-          font-size: 40px;
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: 1600px) {
-  .@{prefix}-container {
-    .@{prefix}-bg {
-      width: 600px;
-
-      .@{prefix}-info {
-        margin: 185px 48px 0 48px;
-        font-size: 56px;
-        .@{prefix}-start {
-          font-size: 32px;
-        }
-      }
-    }
-  }
-}
-
 // 设置的登录页最小高度，防止 logo 偏移位置偏移遮住输入框
 @media (max-height: 650px) {
   .@{prefix}-container {
@@ -267,59 +215,53 @@
   }
 }
 
-@media (max-width: 1200px) {
-  .@{prefix}-container {
-    .@{prefix}-bg {
-      width: 500px;
-
-      .@{prefix}-info {
-        margin: 185px 48px 0 48px;
-        font-size: 48px;
-        .@{prefix}-start {
-          font-size: 28px;
-        }
-      }
+.@{prefix}-container-with-board {
+  .@{prefix}-card {
+    .@{prefix}-content {
+      margin-top: 0;
     }
   }
 }
 
-@media (max-width: 992px) {
-  .@{prefix}-container {
-    .@{prefix}-bg {
-      width: 400px;
-
-      .@{prefix}-info {
-        margin: 185px 32px 0 32px;
-        font-size: 40px;
-        .@{prefix}-start {
-          font-size: 24px;
-        }
-      }
-    }
+.@{prefix}-container-mobile {
+  flex-direction: column;
+  min-width: auto;
+  .@{prefix}-banner {
+    // 移动端设置百分比高度，避免使用 vh，否则安卓端打开软键盘会重新计算高度，导致 banner 图片高度出现跳变
+    height: 25%;
   }
-}
-
-@media (max-width: 768px) {
-  .@{prefix}-container {
-    .@{prefix}-bg {
-      width: 250px;
-
-      .@{prefix}-info {
-        margin: 185px 24px 0 24px;
-        font-size: 32px;
-
-        .@{prefix}-start {
-          font-size: 20px;
-        }
-      }
-    }
+  .@{prefix}-bg {
+    width: 100%;
   }
-}
-
-.@{prefix}-container-with-board {
   .@{prefix}-card {
+    align-items: start;
+    width: 100%;
+    height: 75%;
+    margin-top: -48px;
+    padding: 0 32px;
+    border-radius: 16px 16px 0 0;
+    position: relative;
+    .@{prefix}-board {
+      top: 8px;
+      left: 24px;
+    }
+    .@{prefix}-locale {
+      top: 8px;
+    }
     .@{prefix}-content {
-      margin-top: 0;
+      width: 100%;
+      margin-top: 40px;
+      .@{prefix}-logo {
+        height: 48px;
+        margin-bottom: 24px;
+      }
+      .@{prefix}-watermark-wrapper {
+        // 移动端改为正常文档流，避免安卓端被软键盘顶起
+        width: calc(100% - 64px);
+        position: static;
+        width: 100%;
+        margin-top: 96px;
+      }
     }
   }
 }

package/es/PageContainer/style/index.js

@@ -4,7 +4,7 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 export var genPageContainerStyle = function genPageContainerStyle(token) {
-  var _$concat, _$concat2, _$concat3, _$concat5, _ref;
+  var _$concat, _$concat$concat, _$concat2, _$concat4, _ref;
   var antCls = token.antCls,
     proComponentsCls = token.proComponentsCls,
     componentCls = token.componentCls,
@@ -18,25 +18,25 @@ export var genPageContainerStyle = function genPageContainerStyle(token) {
     paddingLG = token.paddingLG;
   var height = controlHeightLG;
   var lineHeight = "".concat(controlHeightLG, "px");
-  return _ref = {}, _defineProperty(_ref, "".concat(componentCls), (_$concat3 = {
+  return _ref = {}, _defineProperty(_ref, "".concat(componentCls), (_$concat2 = {
     minHeight: '100vh',
     backgroundColor: colorBgLayout
-  }, _defineProperty(_$concat3, "".concat(proComponentsCls, "-grid-content"), {
+  }, _defineProperty(_$concat2, "".concat(proComponentsCls, "-grid-content"), {
     minHeight: 'auto'
-  }), _defineProperty(_$concat3, "".concat(antCls, "-page-header"), (_$concat2 = {
+  }), _defineProperty(_$concat2, "".concat(componentCls, "-warp-page-header,").concat(componentCls, "-wrap-page-header"), (_$concat$concat = {
     // 减小内容区左右两侧间距
-    paddingInlineStart: paddingLG,
-    paddingInlineEnd: paddingLG,
-    paddingBlockStart: padding,
-    paddingBlockEnd: padding
-  }, _defineProperty(_$concat2, "".concat(antCls, "-page-header-breadcrumb"), {
+    paddingInlineStart: "".concat(paddingLG, "px !important"),
+    paddingInlineEnd: "".concat(paddingLG, "px !important"),
+    paddingBlockStart: "".concat(padding, "px !important"),
+    paddingBlockEnd: "".concat(padding, "px !important")
+  }, _defineProperty(_$concat$concat, "".concat(antCls, "-page-header-breadcrumb"), {
     // overwritten pro-components style
     paddingBlockStart: 0
-  }), _defineProperty(_$concat2, "".concat(antCls, "-page-header-heading-title"), {
+  }), _defineProperty(_$concat$concat, "".concat(antCls, "-page-header-heading-title"), {
     fontSize: fontSizeHeading3
-  }), _defineProperty(_$concat2, "".concat(antCls, "-page-header-heading-reload"), {
+  }), _defineProperty(_$concat$concat, "".concat(antCls, "-page-header-heading-reload"), {
     cursor: 'pointer'
-  }), _defineProperty(_$concat2, "".concat(antCls, "-page-header-heading-extra"), (_$concat = {
+  }), _defineProperty(_$concat$concat, "".concat(antCls, "-page-header-heading-extra"), (_$concat = {
     height: height,
     lineHeight: lineHeight,
     marginBlock: 0
@@ -48,31 +48,31 @@ export var genPageContainerStyle = function genPageContainerStyle(token) {
     lineHeight: lineHeight
   }), _defineProperty(_$concat, "".concat(antCls, "-input-wrapper"), {
     lineHeight: lineHeight
-  }), _$concat)), _defineProperty(_$concat2, "".concat(antCls, "-page-header-footer"), {
+  }), _$concat)), _defineProperty(_$concat$concat, "".concat(antCls, "-page-header-footer"), {
     marginBlockStart: 0
-  }), _$concat2)), _defineProperty(_$concat3, "".concat(componentCls, "-children-container"), {
+  }), _$concat$concat)), _defineProperty(_$concat2, "".concat(componentCls, "-children-container"), {
     paddingInline: paddingLG,
     paddingBlockStart: 0,
     paddingBlockEnd: paddingLG
-  }), _defineProperty(_$concat3, "".concat(antCls, "-page-header:not(").concat(antCls, "-page-header-has-breadcrumb)"), _defineProperty({}, "".concat(antCls, "-page-header-heading"), {
+  }), _defineProperty(_$concat2, "".concat(antCls, "-page-header:not(").concat(antCls, "-page-header-has-breadcrumb)"), _defineProperty({}, "".concat(antCls, "-page-header-heading"), {
     paddingBlockStart: 0
-  })), _$concat3)), _defineProperty(_ref, "".concat(componentCls, "-no-page-header"), _defineProperty({}, "".concat(componentCls, "-children-container"), {
+  })), _$concat2)), _defineProperty(_ref, "".concat(componentCls, "-no-page-header"), _defineProperty({}, "".concat(componentCls, "-children-container"), {
     paddingBlockStart: paddingLG
   })), _defineProperty(_ref, "".concat(componentCls, "-with-footer "), {
     paddingBottom: 64
-  }), _defineProperty(_ref, "".concat(proComponentsCls, "-footer-bar"), (_$concat5 = {
+  }), _defineProperty(_ref, "".concat(proComponentsCls, "-footer-bar"), (_$concat4 = {
     width: '100%',
     backgroundColor: colorBgBase,
     borderRadius: borderRadius,
     boxShadow: boxShadowSecondary,
     borderBlockStart: 'none'
-  }, _defineProperty(_$concat5, "".concat(antCls, "-btn:not(").concat(antCls, "-input-search-button)"), {
+  }, _defineProperty(_$concat4, "".concat(antCls, "-btn:not(").concat(antCls, "-input-search-button)"), {
     minWidth: 68,
     height: height
-  }), _defineProperty(_$concat5, "".concat(antCls, "-radio-button-wrapper"), {
+  }), _defineProperty(_$concat4, "".concat(antCls, "-radio-button-wrapper"), {
     height: height,
     lineHeight: lineHeight
-  }), _$concat5)), _ref;
+  }), _$concat4)), _ref;
 };
 export default (function (prefixCls) {
   var useStyle = genComponentStyleHook('PageContainer', function (token) {

package/es/TagSelect/style/index.js

@@ -52,7 +52,8 @@ export var genTagSelectStyle = function genTagSelectStyle(token) {
     borderRadius: token.borderRadius,
     marginRight: token.marginXS,
     padding: "".concat(token.paddingXXS, "px ").concat(token.paddingContentHorizontal, "px"),
-    cursor: 'pointer'
+    cursor: 'pointer',
+    transition: "all ".concat(token.motionDurationMid, " ").concat(token.motionEaseInOut)
   }, _defineProperty(_$concat, "".concat(componentCls, "-input"), {
     width: 0,
     height: 0,
@@ -76,9 +77,9 @@ export var genTagSelectStyle = function genTagSelectStyle(token) {
   }), _defineProperty(_ref, "".concat(componentCls, "-large").concat(componentCls, "-img"), _objectSpread(_objectSpread({}, genImgCoverStyle('228px', '120px')), {}, {
     marginRight: '16px'
   })), _defineProperty(_ref, "".concat(componentCls, "-small").concat(componentCls, "-img"), genImgCoverStyle('76px', '32px')), _defineProperty(_ref, "".concat(componentCls, "-large"), genSizeStyle(token.paddingContentVerticalSM, token.fontSize)), _defineProperty(_ref, "".concat(componentCls, "-small"), genSizeStyle(0, token.fontSize)), _defineProperty(_ref, "".concat(componentCls, "-wrapper:not(").concat(componentCls, "-disabled):hover"), {
-    color: token.colorPrimaryTextHover
-  }), _defineProperty(_ref, "".concat(componentCls, "-checked"), genColoredStyle(token.blue, token.colorPrimaryBg, token.colorPrimaryText)), _defineProperty(_ref, "".concat(componentCls, "-wrapper").concat(componentCls, "-checked:not(").concat(componentCls, "-disabled):focus-within"), {
-    boxShadow: "0 1px 3px 0px #000",
+    borderColor: token.colorPrimaryText
+  }), _defineProperty(_ref, "".concat(componentCls, "-checked"), genColoredStyle(token.blue, token.colorPrimaryBg, token.colorPrimaryText)), _defineProperty(_ref, "".concat(componentCls, "-wrapper:not(").concat(componentCls, "-disabled):active"), {
+    boxShadow: "0px 0px 3px ".concat(token.colorPrimary),
     borderColor: "".concat(token.colorPrimary)
   }), _defineProperty(_ref, "".concat(componentCls, "-checked:not(").concat(componentCls, "-disabled)"), {
     '&:hover': _objectSpread(_objectSpread({}, genColoredStyle(token.colorInfoBorder, '#EBF1FF', token.colorInfoTextHover)), {}, _defineProperty({}, "".concat(componentCls, "-inner"), {

package/lib/ContentWithQuestion/index.d.ts

@@ -1,10 +1,10 @@
+import { TooltipProps } from '@oceanbase/design';
 import React from 'react';
-import './index.less';
 export interface ContentWithQuestionProps {
     content?: React.ReactNode;
-    tooltip?: any;
+    tooltip?: TooltipProps;
     prefixIcon?: React.ReactNode | boolean;
-    suffixIcon?: React.ReactNode;
+    suffixIcon?: React.ReactNode | boolean;
     className?: string;
     style?: React.CSSProperties;
     onClick?: (e: React.SyntheticEvent) => void;

package/lib/ContentWithQuestion/index.js

@@ -36,41 +36,46 @@ var import_icons = require("@oceanbase/icons");
 var import_design = require("@oceanbase/design");
 var import_classnames = __toESM(require("classnames"));
 var import_react = __toESM(require("react"));
-var import_util = require("../_util");
-var import_index = require("./index.less");
-var prefix = (0, import_util.getPrefix)("content-with-question");
+var import_style = __toESM(require("./style"));
 var ContentWithQuestion = ({
+  prefixCls: customizePrefixCls,
   content,
   tooltip,
   prefixIcon = null,
-  suffixIcon = /* @__PURE__ */ import_react.default.createElement(import_icons.QuestionCircleOutlined, { className: `${prefix}-help` }),
+  suffixIcon = true,
   className,
   children,
   ...restProps
 }) => {
+  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("content-with-question", customizePrefixCls);
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
   const getIcon = (iconConfig) => {
-    return iconConfig ? /* @__PURE__ */ import_react.default.createElement(import_design.Tooltip, { ...tooltip }, (0, import_react.isValidElement)(iconConfig) ? iconConfig : /* @__PURE__ */ import_react.default.createElement(import_icons.QuestionCircleOutlined, { className: `${prefix}-help` })) : null;
+    return iconConfig ? /* @__PURE__ */ import_react.default.createElement(import_design.Tooltip, { ...tooltip }, (0, import_react.isValidElement)(iconConfig) ? iconConfig : /* @__PURE__ */ import_react.default.createElement(import_icons.QuestionCircleOutlined, { className: `${prefixCls}-help` })) : null;
   };
-  return /* @__PURE__ */ import_react.default.createElement(
-    "span",
-    {
-      className: (0, import_classnames.default)({
-        [`${prefix}-item`]: true,
-        [className]: !!className
-      }),
-      ...restProps
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_design.Space, null, getIcon(
-      prefixIcon === true ? /* @__PURE__ */ import_react.default.createElement(
-        import_icons.QuestionCircleOutlined,
-        {
-          className: `${prefix}-help`,
-          style: {
-            marginRight: 4
+  return wrapSSR(
+    /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        prefixCls: customizePrefixCls,
+        className: (0, import_classnames.default)({
+          [`${prefixCls}-item`]: true,
+          [className]: !!className
+        }),
+        ...restProps
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_design.Space, null, getIcon(
+        prefixIcon === true ? /* @__PURE__ */ import_react.default.createElement(
+          import_icons.QuestionCircleOutlined,
+          {
+            className: `${prefixCls}-help`,
+            style: {
+              marginRight: 4
+            }
           }
-        }
-      ) : prefixIcon
-    ), /* @__PURE__ */ import_react.default.createElement("span", { "data-testid": "content" }, content ?? children), getIcon(suffixIcon))
+        ) : prefixIcon
+      ), /* @__PURE__ */ import_react.default.createElement("span", { "data-testid": "content" }, content ?? children), getIcon(suffixIcon))
+    )
   );
 };
 var ContentWithQuestion_default = ContentWithQuestion;

package/lib/ContentWithQuestion/style/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { GenerateStyle } from '@oceanbase/design/es/theme';
+export declare const genContentWithQuestionStyle: GenerateStyle<any>;
+declare const _default: (prefixCls: string) => {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};
+export default _default;