@agentscope-ai/design 1.0.6 → 1.0.7

package/lib/antd/themes/carbonDarkTheme.json

@@ -0,0 +1,91 @@
+{
+  "borderRadiusXS": 2,
+  "borderRadiusSM": 4,
+  "borderRadius": 6,
+  "borderRadiusLG": 8,
+  "borderRadiusXL": 12,
+  "borderRadiusFull": 999,
+  "wireframe": false,
+  "colorPrimaryBg": "#181818",
+  "colorPrimaryBgHover": "#2E2E2E",
+  "colorPrimaryBorder": "#323232",
+  "colorPrimaryBorderHover": "#2C2C2C",
+  "colorPrimaryHover": "#DFDFDF",
+  "colorPrimary": "#E4E4E4",
+  "colorPrimaryActive": "#7E7E7E",
+  "colorPrimaryTextHover": "#909090",
+  "colorPrimaryText": "#676767",
+  "colorPrimaryTextActive": "#959595",
+  "colorTextBase": "#E7E7ED",
+  "colorBgBase": "#0A0A0B",
+  "colorText": "#E7E7EDC7",
+  "colorTextSecondary": "#E7E7EDA6",
+  "colorTextTertiary": "#E7E7ED73",
+  "colorTextQuaternary": "#E7E7ED40",
+  "colorBorder": "#5B5B5BCC",
+  "colorBorderSecondary": "#323232CC",
+  "colorFill": "#E7E7ED2E",
+  "colorFillSecondary": "#E7E7ED1F",
+  "colorFillTertiary": "#E7E7ED14",
+  "colorFillQuaternary": "#E7E7ED0A",
+  "colorBgContainer": "#121212",
+  "colorBgElevated": "#212121",
+  "colorBgLayout": "#141414",
+  "colorBgSpotlight": "#525252D9",
+  "colorBgMask": "#050508CC",
+  "colorInfo": "#0B83F1",
+  "colorInfoHover": "#5EBCFF",
+  "colorInfoBorder": "#3990C9",
+  "colorInfoText": "#0B83F1",
+  "colorInfoBg": "#112233",
+  "colorInfoBgHover": "#264866",
+  "colorInfoBorderHover": "#5EBCFF",
+  "colorSuccess": "#5BB98B",
+  "colorSuccessHover": "#74A47C",
+  "colorSuccessBg": "#293631",
+  "colorSuccessBgHover": "#3F5147",
+  "colorSuccessBorder": "#73A377",
+  "colorSuccessBorderHover": "#ABD4BE",
+  "colorWarning": "#FAAD14",
+  "colorWarningHover": "#FF8C28",
+  "colorWarningBg": "#2D231A",
+  "colorWarningBgHover": "#4D3B23",
+  "colorWarningBorder": "#FFA628",
+  "colorWarningBorderHover": "#FFD666",
+  "colorError": "#FF4D4F",
+  "colorErrorHover": "#EE654E",
+  "colorErrorBg": "#2B0B08",
+  "colorErrorBgHover": "#4A2A28",
+  "colorErrorBorder": "#EE5B4E",
+  "colorErrorBorderHover": "#FFA39E",
+  "colorLink": "#4D7DFF",
+  "boxShadow": "0px 4px 6px 0px rgba(255, 255, 255, 0.08)",
+  "boxShadowSecondary": "0px 12px 24px -16px rgba(255, 255, 255, 0.06),0px 8px 40px 0px rgba(255, 255, 255, 0.12),0px 0px 1px 0px rgba(255, 255, 255, 0.04)",
+  "colorTextWhite": "#FFFFFF",
+  "colorFillDisable": "#898989",
+  "colorPurple": "#615CED",
+  "colorPurpleHover": "#8383F0",
+  "colorPurpleBg": "#6964877A",
+  "colorPink": "#EC4899",
+  "colorPinkHover": "#E494BC",
+  "colorPinkBg": "#53424D7A",
+  "colorYellow": "#EAB308",
+  "colorYellowHover": "#DBBE62",
+  "colorYellowBg": "#9585527A",
+  "colorOrange": "#FA8125",
+  "colorOrangeHover": "#F7A25F",
+  "colorOrangeBg": "#6F58417A",
+  "colorTeal": "#14B8A6",
+  "colorTealHover": "#7BC7BE",
+  "colorTealBg": "#4658547A",
+  "colorBlue": "#0090FF",
+  "colorBlueHover": "#83BFED",
+  "colorBlueBg": "#5E76897A",
+  "colorMauve": "#8E8C99",
+  "colorMauveHover": "#BBB8CA",
+  "colorMauveBg": "#5859647A",
+  "boxShadowTertiary": "0px 12px 32px -16px rgba(255, 255, 255, 0.24),0px 12px 60px 0px rgba(255, 255, 255, 0.12),0px 0px 1px 0px rgba(255, 255, 255, 0.04)",
+  "boxShadowTertiaryLeft": "-12px 0px 32px -16px rgba(255, 255, 255, 0.24),-12px 0px 60px 0px rgba(255, 255, 255, 0.12),0px 0px 1px 0px rgba(255, 255, 255, 0.04)",
+  "boxShadowInput": "0px 12px 24px -16px rgba(255, 255, 255, 0.08),0px 12px 40px 0px rgba(255, 255, 255, 0.16),0px 0px 1px 0px rgba(255, 255, 255, 0.04)",
+  "colorTextBlack": "#000000"
+}

package/lib/antd/themes/carbonTheme.json

@@ -0,0 +1,90 @@
+{
+  "borderRadiusXS": 2,
+  "borderRadiusSM": 4,
+  "borderRadius": 6,
+  "borderRadiusLG": 8,
+  "borderRadiusXL": 12,
+  "borderRadiusFull": 999,
+  "wireframe": false,
+  "colorPrimaryBg": "rgba(244, 244, 247, 1)",
+  "colorPrimaryBgHover": "rgba(239, 239, 244, 1)",
+  "colorPrimaryBorder": "rgba(62, 63, 66, 1)",
+  "colorPrimaryBorderHover": "rgba(130, 132, 137, 1)",
+  "colorPrimaryHover": "rgba(38, 38, 41, 1)",
+  "colorPrimary": "rgba(26, 26, 29, 1)",
+  "colorPrimaryActive": "rgba(0, 0, 0, 1)",
+  "colorPrimaryTextHover": "rgba(38, 38, 41, 1)",
+  "colorPrimaryText": "rgba(26, 26, 29, 1)",
+  "colorPrimaryTextActive": "rgba(0, 0, 0, 1)",
+  "colorTextBase": "rgba(26, 26, 29, 1)",
+  "colorBgBase": "rgba(255, 255, 255, 1)",
+  "colorText": "rgba(26, 26, 29, 0.88)",
+  "colorTextSecondary": "rgba(26, 26, 29, 0.65)",
+  "colorTextTertiary": "rgba(26, 26, 29, 0.45)",
+  "colorTextQuaternary": "rgba(26, 26, 29, 0.25)",
+  "colorBorder": "rgba(187, 187, 193, 1)",
+  "colorBorderSecondary": "rgba(234, 234, 234, 1)",
+  "colorFill": "rgba(0, 0, 43, 0.06)",
+  "colorFillSecondary": "rgba(0, 0, 85, 0.03)",
+  "colorFillTertiary": "rgba(205, 208, 220, 0.15)",
+  "colorFillQuaternary": "rgba(205, 208, 220, 0.1)",
+  "colorBgContainer": "rgba(255, 255, 255, 1)",
+  "colorBgElevated": "rgba(255, 255, 255, 1)",
+  "colorBgLayout": "rgba(250, 250, 251, 1)",
+  "colorBgSpotlight": "rgba(26, 26, 29, 0.85)",
+  "colorBgMask": "rgba(0, 0, 0, 0.45)",
+  "colorInfo": "rgba(11, 131, 241, 1)",
+  "colorInfoHover": "rgba(94, 188, 255, 1)",
+  "colorInfoBorder": "rgba(135, 209, 255, 1)",
+  "colorInfoText": "rgba(11, 131, 241, 1)",
+  "colorInfoBg": "rgba(230, 247, 255, 1)",
+  "colorInfoBgHover": "rgba(176, 227, 255, 1)",
+  "colorInfoBorderHover": "rgba(94, 188, 255, 1)",
+  "colorSuccess": "rgba(91, 185, 139, 1)",
+  "colorSuccessHover": "rgba(171, 212, 190, 1)",
+  "colorSuccessBg": "rgba(235, 250, 240, 1)",
+  "colorSuccessBgHover": "rgba(223, 237, 228, 1)",
+  "colorSuccessBorder": "rgba(211, 224, 217, 1)",
+  "colorSuccessBorderHover": "rgba(171, 212, 190, 1)",
+  "colorWarning": "rgba(250, 173, 20, 1)",
+  "colorWarningHover": "rgba(255, 214, 102, 1)",
+  "colorWarningBg": "rgba(255, 251, 230, 1)",
+  "colorWarningBgHover": "rgba(255, 241, 184, 1)",
+  "colorWarningBorder": "rgba(255, 229, 143, 1)",
+  "colorWarningBorderHover": "rgba(255, 214, 102, 1)",
+  "colorError": "rgba(255, 77, 79, 1)",
+  "colorErrorHover": "rgba(255, 120, 117, 1)",
+  "colorErrorBg": "rgba(255, 242, 240, 1)",
+  "colorErrorBgHover": "rgba(255, 241, 240, 1)",
+  "colorErrorBorder": "rgba(255, 204, 199, 1)",
+  "colorErrorBorderHover": "rgba(255, 163, 158, 1)",
+  "colorLink": "rgba(0, 77, 255, 1)",
+  "boxShadow": "0px 4px 6px 0px rgba(0, 0, 0, 0.08)",
+  "boxShadowSecondary": "0px 12px 24px -16px rgba(0, 0, 0, 0.06),0px 8px 40px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
+  "colorTextWhite": "rgba(255, 255, 255, 1)",
+  "colorFillDisable": "rgba(232, 232, 235, 1)",
+  "colorPurple": "rgba(97, 92, 237, 1)",
+  "colorPurpleHover": "#8080FF",
+  "colorPurpleBg": "rgba(226, 222, 255, 0.8)",
+  "colorPink": "rgba(236, 72, 153, 1)",
+  "colorPinkHover": "#E593BC",
+  "colorPinkBg": "rgba(251, 220, 239, 0.8)",
+  "colorYellow": "rgba(234, 179, 8, 1)",
+  "colorYellowHover": "#F1D372",
+  "colorYellowBg": "rgba(255, 250, 184, 0.8)",
+  "colorOrange": "rgba(250, 129, 37, 1)",
+  "colorOrangeHover": "#E88C45",
+  "colorOrangeBg": "rgba(255, 232, 201, 0.8)",
+  "colorTeal": "rgba(20, 184, 166, 1)",
+  "colorTealHover": "#5FB3A9",
+  "colorTealBg": "rgba(200, 244, 233, 0.8)",
+  "colorBlue": "rgba(0, 144, 255, 1)",
+  "colorBlueHover": "#72BCF5",
+  "colorBlueBg": "rgba(194, 229, 255, 0.8)",
+  "colorMauve": "rgba(142, 140, 153, 1)",
+  "colorMauveHover": "#C0BFC8",
+  "colorMauveBg": "rgba(239, 240, 243, 0.8)",
+  "boxShadowTertiary": "0px 12px 32px -16px rgba(0, 0, 0, 0.24),0px 12px 60px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
+  "boxShadowTertiaryLeft": "-12px 0px 32px -16px rgba(0, 0, 0, 0.24),-12px 0px 60px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
+  "boxShadowInput": "0px 12px 24px -16px rgba(54, 54, 73, 0.04),0px 12px 40px 0px rgba(51, 51, 71, 0.08),0px 0px 1px 0px rgba(44, 44, 54, 0.02)"
+}

package/lib/antd/themes/generateThemeByToken.d.ts

@@ -0,0 +1,10 @@
+import { ConfigProviderProps } from 'antd';
+export default function generateThemeByToken(
+/**
+ * @description 输入自定义 token，包含颜色、尺寸等主题变量。这些令牌会被合并到 Ant Design 的主题配置中，覆盖默认样式
+ * @descriptionEn custom token, including color, size, etc. theme variables. These tokens will be merged into the theme configuration of Ant Design, overriding the default style
+ * @returns ConfigProviderProps
+ */
+token: {
+    [key: string]: string | number;
+}, darkMode?: boolean): Partial<ConfigProviderProps>;

package/lib/antd/themes/generateThemeByToken.js

@@ -0,0 +1,201 @@
+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 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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var INVISIBLE_COLOR = 'rgba(0,0,0,0)';
+
+// border
+var borderRadiusXS = 2;
+var borderRadiusSM = 4;
+var borderRadius = 6;
+var borderRadiusLG = 8;
+var borderRadiusXL = 12;
+var borderRadiusFull = 999;
+// font
+var footnoteRegular = "normal 12px/20px inherit";
+var footnoteMedium = "500 12px/20px inherit";
+var footnoteSystemMonospace = "normal 12px/20px Menlo, monospace";
+var bodyFormTitle = "500 13px/20px inherit";
+var bodyRegular = "normal 14px/24px inherit";
+var bodyMedium = "500 14px/24px inherit";
+var bodyCode = "normal 14px/24px Menlo, monospace";
+var h5Regular = "normal 16px/28px inherit";
+var h5Medium = "500 16px/28px inherit";
+var h4Medium = "500 18px/32px inherit";
+var h3Medium = "500 20px/36px inherit";
+var h2Medium = "500 24px/44px inherit";
+var h1Medium = "500 32px/48px inherit";
+export default function generateThemeByToken(
+/**
+ * @description 输入自定义 token，包含颜色、尺寸等主题变量。这些令牌会被合并到 Ant Design 的主题配置中，覆盖默认样式
+ * @descriptionEn custom token, including color, size, etc. theme variables. These tokens will be merged into the theme configuration of Ant Design, overriding the default style
+ * @returns ConfigProviderProps
+ */
+token, darkMode) {
+  // 输入token，生成主题
+  return {
+    theme: {
+      cssVar: true,
+      hashed: false,
+      darkMode: darkMode,
+      token: _objectSpread({
+        borderRadiusXS: borderRadiusXS,
+        borderRadiusSM: borderRadiusSM,
+        borderRadius: borderRadius,
+        borderRadiusLG: borderRadiusLG,
+        // @ts-ignore
+        borderRadiusXL: borderRadiusXL,
+        borderRadiusFull: borderRadiusFull,
+        // font 系列
+        footnoteRegular: footnoteRegular,
+        footnoteMedium: footnoteMedium,
+        footnoteSystemMonospace: footnoteSystemMonospace,
+        bodyFormTitle: bodyFormTitle,
+        bodyRegular: bodyRegular,
+        bodyMedium: bodyMedium,
+        bodyCode: bodyCode,
+        h5Regular: h5Regular,
+        h5Medium: h5Medium,
+        h4Medium: h4Medium,
+        h3Medium: h3Medium,
+        h2Medium: h2Medium,
+        h1Medium: h1Medium
+      }, token),
+      components: {
+        Alert: {
+          colorErrorBorder: INVISIBLE_COLOR,
+          colorInfoBorder: INVISIBLE_COLOR,
+          colorSuccessBorder: INVISIBLE_COLOR,
+          colorWarningBorder: INVISIBLE_COLOR,
+          colorInfoBg: token.colorInfoBg,
+          borderRadiusLG: 0,
+          // Alert 不要圆角
+          defaultPadding: '8px 20px',
+          fontSize: 15,
+          // @ts-ignore
+          lineHeight: '20px'
+        },
+        Badge: {
+          colorError: token.colorPrimary,
+          indicatorHeight: 16,
+          textFontSize: 10
+        },
+        Breadcrumb: {
+          separatorMargin: 4,
+          lastItemColor: token.colorText
+        },
+        Button: {
+          contentFontSizeSM: 12,
+          defaultHoverBg: token.colorFillSecondary,
+          defaultHoverBorderColor: token.colorBorderSecondary,
+          defaultHoverColor: token.colorText,
+          defaultActiveBg: token.colorFillSecondary,
+          defaultActiveBorderColor: token.colorBorderSecondary,
+          defaultActiveColor: token.colorText,
+          defaultGhostColor: token.colorText,
+          defaultGhostBorderColor: 'transparent',
+          dangerShadow: 'none',
+          defaultShadow: 'none',
+          primaryShadow: 'none'
+        },
+        DatePicker: {
+          paddingInline: 8,
+          colorBgBase: token.colorBgBase,
+          colorBgContainerDisabled: token.colorFillTertiary
+        },
+        Dropdown: {
+          paddingBlock: 4,
+          controlPaddingHorizontal: 8,
+          controlItemBgHover: token.colorFillTertiary
+        },
+        Progress: {
+          remainingColor: token.colorPrimaryBg,
+          defaultColor: token.colorPrimary
+        },
+        Input: {
+          colorBgBase: token.colorBgBase,
+          colorBgContainerDisabled: token.colorFillTertiary
+        },
+        InputNumber: {
+          colorBgBase: token.colorBgBase,
+          colorBgContainerDisabled: token.colorFillTertiary
+        },
+        Select: {
+          colorBgBase: token.colorBgBase,
+          selectorBg: token.colorBgBase,
+          colorBgContainerDisabled: token.colorFillTertiary
+        },
+        Skeleton: {
+          paragraphLiHeight: 24,
+          paragraphMarginTop: 16,
+          blockRadius: 8
+        },
+        Slider: {
+          railBg: token.colorPrimaryBg,
+          railHoverBg: token.colorPrimaryBgHover,
+          trackBg: token.colorPrimary,
+          trackHoverBg: token.colorPrimary,
+          handleColor: token.colorPrimary,
+          railSize: 8,
+          handleSize: 12,
+          handleSizeHover: 12
+        },
+        Segmented: {
+          itemSelectedBg: token.colorBgBase,
+          trackPadding: 4,
+          controlHeight: 40,
+          controlHeightLG: 42,
+          itemHoverBg: 'unset'
+        },
+        Steps: {
+          iconSize: 20,
+          iconFontSize: 12,
+          titleLineHeight: 20
+        },
+        Modal: {
+          headerBg: token.colorBgBase,
+          contentBg: token.colorBgBase,
+          titleFontSize: 16,
+          controlHeight: 20
+        },
+        Tooltip: {
+          sizePopupArrow: 0
+        },
+        Popover: {
+          sizePopupArrow: 0
+        },
+        Table: {
+          cellPaddingInline: 20
+        },
+        Form: {
+          itemMarginBottom: 20
+        },
+        Collapse: {
+          contentPadding: '8px 12px',
+          headerPadding: '4px 12px'
+        },
+        Descriptions: {
+          colonMarginRight: 10,
+          // @ts-ignores
+          verticalLabelPaddingBottom: 4,
+          verticalContentPaddingBottom: 24
+        },
+        Switch: {
+          handleBg: token.colorBgContainer
+        }
+      }
+    },
+    checkbox: {
+      style: {
+        fontWeight: '500'
+      }
+    },
+    radio: {
+      style: {
+        fontWeight: '500'
+      }
+    }
+  };
+}

package/lib/components/commonComponents/Alert/demo/demo1.js

@@ -0,0 +1,9 @@
+import { Alert } from "../../../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(Alert, {
+    message: "I am a description of a component.",
+    type: "info",
+    showIcon: true
+  });
+});

package/lib/components/commonComponents/Alert/demo/demo2.js

@@ -0,0 +1,27 @@
+import { Alert } from "../../../..";
+import { Flex } from 'antd';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsxs(Flex, {
+    vertical: true,
+    gap: 28,
+    children: [/*#__PURE__*/_jsx(Alert, {
+      type: "info",
+      message: "I am a description of a component.",
+      showIcon: true
+    }), /*#__PURE__*/_jsx(Alert, {
+      type: "error",
+      message: "I am a description of a component.",
+      showIcon: true
+    }), /*#__PURE__*/_jsx(Alert, {
+      type: "success",
+      message: "I am a description of a component.",
+      showIcon: true
+    }), /*#__PURE__*/_jsx(Alert, {
+      type: "warning",
+      message: "I am a description of a component.",
+      showIcon: true
+    })]
+  });
+});

package/lib/components/commonComponents/Alert/demo/demo3.js

@@ -0,0 +1,9 @@
+import { Alert } from "../../../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(Alert, {
+    type: "info",
+    message: "I am a description of a component.",
+    showIcon: false
+  });
+});

package/lib/components/commonComponents/Alert/demo/demo4.js

@@ -0,0 +1,10 @@
+import { Alert } from "../../../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(Alert, {
+    type: "info",
+    message: "I am a description of a component.",
+    closable: true,
+    showIcon: true
+  });
+});

package/lib/components/commonComponents/Alert/demo/demo5.js

@@ -0,0 +1,15 @@
+import { Alert, Button } from "../../../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(Alert, {
+    type: "info",
+    message: "I am a description of a component.",
+    closable: true,
+    showIcon: true,
+    action: /*#__PURE__*/_jsx(Button, {
+      type: "textCompact",
+      size: "small",
+      children: "Text Compact"
+    })
+  });
+});

package/lib/components/commonComponents/Alert/demo/demo6.js

@@ -0,0 +1,29 @@
+import { Alert } from "../../../..";
+import { Flex } from 'antd';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Alert, {
+      type: "info",
+      message: "This alert is used for banner.",
+      banner: true
+    }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx(Flex, {
+      justify: "center",
+      children: /*#__PURE__*/_jsx("div", {
+        style: {
+          width: 512
+        },
+        children: /*#__PURE__*/_jsx(Alert, {
+          type: "info",
+          showIcon: true,
+          message: "This alert is used for non-banner scenarios.",
+          style: {
+            borderRadius: 4
+          }
+        })
+      })
+    })]
+  });
+});

package/lib/components/commonComponents/Anchor/demo/demo1.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * Anchor 锚点组件演示
+ * 根据 masterGo DSL 实现的垂直方向锚点导航
+ */
+declare const Demo1: React.FC;
+export default Demo1;

package/lib/components/commonComponents/Anchor/demo/demo1.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Anchor } from "../../../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Anchor 锚点组件演示
+ * 根据 masterGo DSL 实现的垂直方向锚点导航
+ */
+var Demo1 = function Demo1() {
+  var items = [{
+    key: 'anchor-item-1',
+    href: '#anchor-item-1',
+    title: 'Anchor item'
+  }, {
+    key: 'anchor-item-2',
+    href: '#anchor-item-2',
+    title: 'Anchor item'
+  }, {
+    key: 'anchor-item-3',
+    href: '#anchor-item-3',
+    title: 'Anchor item'
+  }];
+  return /*#__PURE__*/_jsx(Anchor, {
+    direction: "vertical",
+    items: items
+  });
+};
+export default Demo1;

package/lib/components/commonComponents/Anchor/demo/demo2.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * Anchor 锚点组件演示
+ * 根据 masterGo DSL 实现的垂直方向锚点导航
+ */
+declare const Demo1: React.FC;
+export default Demo1;

package/lib/components/commonComponents/Anchor/demo/demo2.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Anchor } from "../../../..";
+
+/**
+ * Anchor 锚点组件演示
+ * 根据 masterGo DSL 实现的垂直方向锚点导航
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var Demo1 = function Demo1() {
+  var items = [{
+    key: 'anchor-item-1',
+    href: '#anchor-item-1',
+    title: 'Anchor item'
+  }, {
+    key: 'anchor-item-2',
+    href: '#anchor-item-2',
+    title: 'Anchor item'
+  }, {
+    key: 'anchor-item-3',
+    href: '#anchor-item-3',
+    title: 'Anchor item'
+  }];
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(Anchor, {
+      direction: "horizontal",
+      items: items
+    })
+  });
+};
+export default Demo1;

package/lib/components/commonComponents/Anchor/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { AnchorProps } from 'antd';
+export type { AnchorProps };
+declare const SparkAnchor: import("react").ForwardRefExoticComponent<AnchorProps & import("react").RefAttributes<any>>;
+export default SparkAnchor;

package/lib/components/commonComponents/Anchor/index.js

@@ -0,0 +1,15 @@
+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 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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Anchor } from 'antd';
+import { forwardRef } from 'react';
+import useIndexStyle from "./index.style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var SparkAnchor = /*#__PURE__*/forwardRef(function (props, ref) {
+  useIndexStyle();
+  return /*#__PURE__*/_jsx(Anchor, _objectSpread({}, props));
+});
+export default SparkAnchor;

package/lib/components/commonComponents/Anchor/index.style.d.ts

@@ -0,0 +1,14 @@
+export declare function getIndexStyleData(params: any): {
+    [x: string]: {
+        color: string;
+        lineHeight: string;
+        padding: string;
+    } | {
+        [x: string]: number;
+        color?: undefined;
+        lineHeight?: undefined;
+        padding?: undefined;
+    };
+};
+declare const useIndexStyle: (props?: {}) => import("../../../config").CommonConfig;
+export default useIndexStyle;

package/lib/components/commonComponents/Anchor/index.style.js

@@ -0,0 +1,23 @@
+var _excluded = ["css"];
+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 _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; }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import createStyle from "../../../libs/createStyle";
+export function getIndexStyleData(params) {
+  var antPrefix = params.antPrefix;
+  return _defineProperty(_defineProperty(_defineProperty({}, ".".concat(antPrefix, "-anchor-link-title-active"), {}), ".".concat(antPrefix, "-anchor-wrapper .").concat(antPrefix, "-anchor .").concat(antPrefix, "-anchor-link-title"), {
+    color: "var(--".concat(antPrefix, "-color-text-secondary)"),
+    lineHeight: '32px',
+    padding: '0 16px'
+  }), ".".concat(antPrefix, "-anchor-link"), _defineProperty(_defineProperty({}, "--".concat(antPrefix, "-anchor-link-padding-block"), 0), "--".concat(antPrefix, "-anchor-link-padding-inline-start"), 0));
+}
+var useIndexStyle = createStyle(function (_ref2) {
+  var css = _ref2.css,
+    params = _objectWithoutProperties(_ref2, _excluded);
+  var result = css(getIndexStyleData(params));
+  return result;
+});
+export default useIndexStyle;

package/lib/components/commonComponents/Avatar/demo/demo1.js

@@ -0,0 +1,7 @@
+import { Avatar } from "../../../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(Avatar, {
+    src: 'https://img.alicdn.com/imgextra/i2/O1CN01PbkG9o1tq4Q12GvNM_!!6000000005952-55-tps-32-32.svg'
+  });
+});