@pisell/materials 1.0.1034 → 1.0.1035

package/es/components/pisellMetricCard/docs/pisellMetricCard.$tab-design.md

@@ -254,9 +254,7 @@ https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library
 - 显示数值 "3249"
 - 显示环比 "v.s. pre -230" + 红色下降箭头
 
-## 7.4 带副标题和标签示例
-
-```
+## 7.4 带副标题和标签示例```
 <PisellMetricCard
   title="Active Users"
   subtitle="Last 30 days"
@@ -317,7 +315,5 @@ https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library
 
 - 使用 Ant Design 图标库：`ArrowUpOutlined`、`ArrowDownOutlined`
 - 根据 `comparison` 值自动判断正负
-- 正值显示绿色上升箭头，负值显示红色下降箭头
-
-## 8.4 响应式设计- 支持移动端、平板、PC 端自适应
+- 正值显示绿色上升箭头，负值显示红色下降箭头## 8.4 响应式设计- 支持移动端、平板、PC 端自适应
 - 可根据容器宽度自动调整布局

package/es/components/pisellMetricCard/index.d.ts

@@ -0,0 +1,2 @@
+import { PisellMetricCardProps } from "./types.js";
+import { PisellMetricCard } from "./PisellMetricCard.js";

package/es/components/pisellMetricCard/types.d.ts

@@ -0,0 +1,143 @@
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/components/pisellMetricCard/types.d.ts
+/**
+ * 数值格式化配置
+ */
+interface ValueFormatConfig {
+  /** 小数精度（小数位数），默认 0 */
+  precision?: number;
+  /** 是否使用千分位分隔符，默认 false */
+  useGrouping?: boolean;
+  /** 是否显示货币符号，默认 false */
+  showCurrencySymbol?: boolean;
+  /** 货币符号（如 $, ¥），默认 '' */
+  currencySymbol?: string;
+  /** 自定义格式化函数 */
+  formatter?: (value: number | null) => string;
+  /** 整数时隐藏小数部分，默认 true */
+  hideDecimalForWholeNumbers?: boolean;
+}
+/**
+ * 环比配置
+ */
+interface ComparisonConfig {
+  /** 环比数值（支持正负值） */
+  value: number | string | null;
+  /** 环比前缀文本，默认 'v.s. pre' */
+  text?: string;
+  /** 是否显示趋势箭头，默认 true */
+  showTrendIcon?: boolean;
+  /** 正向趋势颜色，默认 '#52c41a' */
+  positiveColor?: string;
+  /** 负向趋势颜色，默认 '#ff4d4f' */
+  negativeColor?: string;
+  /** 环比字号，默认 14 */
+  size?: number | string;
+}
+/**
+ * 样式配置
+ */
+interface MetricCardStyleConfig {
+  /** 卡片容器样式 */
+  card?: {
+    /** 是否显示边框，默认 true */bordered?: boolean; /** 圆角大小（px），默认 12 */
+    borderRadius?: number; /** 内边距（px），默认 16 */
+    padding?: number; /** 阴影效果，默认 true */
+    shadow?: boolean | string; /** 背景色，默认 '#ffffff' */
+    background?: string; /** 卡片宽度，默认 'auto' */
+    width?: string | number;
+  };
+  /** 标题样式 */
+  title?: {
+    /** 字号，默认 14 */size?: number | string; /** 字重，默认 400 */
+    weight?: number | string; /** 颜色，默认 'rgba(0, 0, 0, 0.45)' */
+    color?: string;
+  };
+  /** 数值样式 */
+  value?: {
+    /** 字号，默认 30 */size?: number | string; /** 字重，默认 600 */
+    weight?: number | string; /** 颜色，默认 'rgba(0, 0, 0, 0.85)' */
+    color?: string;
+  };
+}
+/**
+ * PisellMetricCard 组件 Props
+ *
+ * 采用扁平 + 对象组合的设计，降低复杂度和耦合
+ *
+ * @example 基础用法
+ * ```tsx
+ * <PisellMetricCard
+ *   title="Total Sales"
+ *   value={1580}
+ * />
+ * ```
+ *
+ * @example 带格式化和环比
+ * ```tsx
+ * <PisellMetricCard
+ *   title="Revenue"
+ *   value={1580}
+ *   format={{
+ *     showCurrencySymbol: true,
+ *     currencySymbol: '$',
+ *     useGrouping: true
+ *   }}
+ *   comparison={{
+ *     value: 120,
+ *     text: 'v.s. last month'
+ *   }}
+ * />
+ * ```
+ */
+interface PisellMetricCardProps {
+  /** 标题文本 */
+  title: string | ReactNode;
+  /** 主数值 */
+  value: number | string | null;
+  /** 副标题文本（可选） */
+  subtitle?: string | ReactNode;
+  /** 标签内容（可选） */
+  tag?: ReactNode;
+  /** 提示信息内容（可选） */
+  tooltip?: string | ReactNode;
+  /**
+   * 数值格式化配置
+   * @example format={{ precision: 2, useGrouping: true, currencySymbol: '$' }}
+   */
+  format?: ValueFormatConfig;
+  /**
+   * 环比配置
+   * @example comparison={{ value: 120, text: 'v.s. pre' }}
+   */
+  comparison?: ComparisonConfig;
+  /**
+   * 样式配置
+   * @example
+   * styleConfig={{
+   *   card: { borderRadius: 8, padding: 24 },
+   *   title: { size: 16, weight: 600 },
+   *   value: { size: 36, color: '#1890ff' }
+   * }}
+   */
+  styleConfig?: MetricCardStyleConfig;
+  /** 是否显示副标题，默认 false */
+  showSubtitle?: boolean;
+  /** 是否显示标签，默认 false */
+  showTag?: boolean;
+  /** 是否显示提示信息，默认 false */
+  showTooltip?: boolean;
+  /** 是否显示加载状态，默认 false */
+  loading?: boolean;
+  /** 鼠标悬停是否有交互效果，默认 true */
+  hoverable?: boolean;
+  /** 自定义类名 */
+  className?: string;
+  /** 自定义样式 */
+  style?: CSSProperties;
+  /** 点击卡片回调 */
+  onClick?: () => void;
+}
+//#endregion
+export { PisellMetricCardProps };

package/es/components/pisellMetricCard/utils/calculateTrend.js

@@ -0,0 +1,22 @@
+//#region src/components/pisellMetricCard/utils/calculateTrend.ts
+/**
+* 计算趋势方向
+* 
+* @param comparison 环比数值
+* @returns 'up' | 'down' | 'neutral'
+* 
+* @example
+* calculateTrend(120) // 'up'
+* calculateTrend(-230) // 'down'
+* calculateTrend(0) // 'neutral'
+* calculateTrend(null) // 'neutral'
+*/
+function calculateTrend(comparison) {
+	if (comparison === null || comparison === void 0) return "neutral";
+	const numComparison = typeof comparison === "string" ? parseFloat(comparison) : comparison;
+	if (isNaN(numComparison) || numComparison === 0) return "neutral";
+	return numComparison > 0 ? "up" : "down";
+}
+
+//#endregion
+export { calculateTrend };

package/es/components/pisellMetricCard/utils/formatMetricValue.js

@@ -0,0 +1,52 @@
+import { formatAmountWithOptions } from "@pisell/utils";
+
+//#region src/components/pisellMetricCard/utils/formatMetricValue.ts
+/**
+* 格式化指标数值
+* 
+* 支持以下格式化选项：
+* - 小数精度控制
+* - 千分位分隔符
+* - 货币符号显示
+* - 自定义格式化函数
+* - 整数时隐藏小数部分
+* 
+* @param value 数值
+* @param options 格式化选项
+* @returns 格式化后的字符串，null 时返回 null
+* 
+* @example
+* formatMetricValue(1234.56, { precision: 2, useGrouping: true })
+* // 返回: "1,234.56"
+* 
+* @example
+* formatMetricValue(1580, { 
+*   showCurrencySymbol: true, 
+*   currencySymbol: '$' 
+* })
+* // 返回: "$1580"
+* 
+* @example
+* formatMetricValue(100.00, { 
+*   precision: 2,
+*   hideDecimalForWholeNumbers: true 
+* })
+* // 返回: "100"
+*/
+function formatMetricValue(value, options = {}) {
+	var _options$precision, _options$useGrouping, _options$showCurrency, _options$hideDecimalF;
+	if (value === null || value === void 0) return null;
+	const numValue = typeof value === "string" ? parseFloat(value) : value;
+	if (isNaN(numValue)) return null;
+	if (options.formatter) return options.formatter(numValue);
+	const formatted = formatAmountWithOptions(numValue, options.currencySymbol || "", {
+		precision: (_options$precision = options.precision) !== null && _options$precision !== void 0 ? _options$precision : 0,
+		useThousandsSeparator: (_options$useGrouping = options.useGrouping) !== null && _options$useGrouping !== void 0 ? _options$useGrouping : false,
+		showCurrencySymbol: (_options$showCurrency = options.showCurrencySymbol) !== null && _options$showCurrency !== void 0 ? _options$showCurrency : false,
+		hideDecimalForWholeNumbers: (_options$hideDecimalF = options.hideDecimalForWholeNumbers) !== null && _options$hideDecimalF !== void 0 ? _options$hideDecimalF : true
+	});
+	return String(formatted);
+}
+
+//#endregion
+export { formatMetricValue };

package/es/components/pisellMultipleSelect/PisellMultipleSelect.less

@@ -1,53 +1,131 @@
 /**
  * PisellMultipleSelect 组件样式
- * 
- * 注意：大部分样式通过 tokens.ts 中的 Select Token 配置实现
- * 此文件仅包含 Token 无法实现的样式
+ * 基于 Figma 设计规范，覆盖时使用 pisell-lowcode-xxx
  */
 
 .pisell-multiple-select {
+  height: 48px !important;
   width: 100%;
 
-  // 包装器布局（Token 无法配置）
+  // Select 触发器（Figma 设计规范，与 SingleSelect / Input 体系一致）
+  .pisell-lowcode-select:not(.pisell-lowcode-select-disabled):not(.pisell-lowcode-select-customize-input) {
+    .pisell-lowcode-select-selector {
+      font-size: 16px !important;
+      line-height: 24px !important;
+      border-radius: 8px !important;
+      border: 1px solid #d0d5dd !important; // Gray/300
+      padding: 12px 16px !important;
+      min-height: 48px !important;
+      color: #101828 !important; // Gray/900
+      background-color: #ffffff !important;
+    }
+
+    // 多选模式：内边距适配标签，高度保持 48px
+    &.pisell-lowcode-select-multiple .pisell-lowcode-select-selector {
+      padding: 6px 16px !important;
+      min-height: 48px !important;
+    }
+
+    &.pisell-lowcode-select-open .pisell-lowcode-select-selector {
+      border-color: #d6bbfb !important; // Primary/300
+      box-shadow: 0 0 0 4px #f4ebff !important; // Primary/100
+    }
+
+    &:not(.pisell-lowcode-select-open):not(.pisell-lowcode-select-disabled)
+    .pisell-lowcode-select-selector:hover {
+      border-color: #b692f6 !important; // Primary/400
+    }
+
+    &.pisell-lowcode-select-disabled .pisell-lowcode-select-selector {
+      background-color: #f9fafb !important; // Gray/50
+      color: #98a2b3 !important; // Gray/400
+      border-color: #d0d5dd !important;
+      cursor: not-allowed !important;
+    }
+
+    .pisell-lowcode-select-selection-placeholder {
+      color: #667085 !important; // Gray/500
+    }
+
+    .pisell-lowcode-select-arrow {
+      color: #667085;
+    }
+
+    .pisell-lowcode-select-clear {
+      color: #667085;
+
+      &:hover {
+        color: #344054;
+      }
+    }
+
+    // 多选标签（选择后展示的 item）高度 36px
+    .pisell-lowcode-select-selection-item {
+      border-radius: 6px !important;
+      padding: 0 10px !important;
+      margin-inline-end: 4px !important;
+      height: 36px !important;
+      min-height: 36px !important;
+      line-height: 36px !important;
+
+      &-content {
+        line-height: 36px !important;
+      }
+
+      &-remove {
+        margin-left: 4px !important;
+
+        &:hover {
+          background-color: transparent !important;
+        }
+      }
+    }
+  }
+
   &-wrapper {
     display: flex;
     flex-direction: column;
     gap: 8px;
+    position: relative;
+
+    // 下拉选项高度 48px（通过 getPopupContainer 挂到 wrapper 内，无需 :global）
+    .pisell-multiple-select-dropdown .pisell-lowcode-select-item {
+      min-height: 48px !important;
+      height: 48px !important;
+      line-height: 48px !important;
+      padding: 0 16px !important;
+      font-size: 16px !important;
+    }
   }
 
-  // 标签（Token 无法配置的自定义元素）
   &-label {
-    font-family: 'Inter', sans-serif;
     font-size: 14px;
     font-weight: 600;
-    color: #344054;
+    color: #344054; // Gray/700
     line-height: 20px;
 
     &-required::after {
       content: ' *';
-      color: #D92D20;
+      color: #d92d20; // Error/600
       margin-left: 0;
     }
   }
 
-  // 辅助文本（Token 无法配置的自定义元素）
   &-helper-text {
     font-size: 14px;
     font-weight: 400;
-    color: #667085;
+    color: #667085; // Gray/500
     line-height: 20px;
   }
 
-  // 错误文本（Token 无法配置的自定义元素）
   &-error-text {
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 400;
-    color: #D92D20;
-    line-height: 20px;
-    animation: fadeIn 0.3s ease-in-out;
+    color: #d92d20; // Error/600
+    line-height: 1.5;
+    animation: pisell-multiple-select-fadeIn 0.3s ease-in-out;
   }
 
-  // 下拉选项中的勾选图标（Figma 设计）
   &-option-content {
     display: flex;
     align-items: center;
@@ -56,99 +134,34 @@
   }
 
   &-option-check {
-    color: #7F56D9; // Primary/600
+    color: #7f56d9; // Primary/600
     font-size: 16px;
     margin-left: 8px;
   }
 
-  // 多选模式下的特殊样式（Token 部分支持，Less 补充细节）
-  :global {
-    // 选择框垂直内边距（多选时需要更小的内边距以容纳标签）
-    .pisell-lowcode-select-multiple .pisell-lowcode-select-selector {
-      padding: 6px 16px !important;
-    }
-
-    // 标签圆角（Token 不支持 multipleItemBorderRadius）
-    .pisell-lowcode-select-selection-item {
-      border-radius: 6px !important;
-      padding: 6px 10px !important;
-      margin-inline-end: 4px !important;
-
-      // 确保标签内容垂直居中
-      &-content {
-        line-height: 24px !important;
-      }
-
-      // 删除图标样式微调
-      &-remove {
-        margin-left: 4px !important;
-
-        &:hover {
-          background-color: transparent !important;
-        }
-      }
-    }
-
-    // hover 边框颜色（Token 不支持 colorBorderHover）
-    .pisell-lowcode-select-multiple:not(.pisell-lowcode-select-disabled):not(.pisell-lowcode-select-customize-input):not(.ant-select-open) {
-      .ant-select-selector:hover {
-        border-color: #D6BBFB !important;
-      }
-    }
-  }
-}
-
-// 下拉框内的搜索框样式（Figma 设计）
-:global {
-  .pisell-select-search-wrapper {
-    padding: 6px;
-    border-bottom: 1px solid #EAECF0;
-  }
-
-  .pisell-select-search-input {
-    padding: 9px 10px !important;
-    font-size: 14px;
-
-    .ant-input {
-      font-size: 14px !important;
-      color: #344054 !important;
-
-      &::placeholder {
-        color: #98A2B3 !important;
-        font-size: 12px !important;
-      }
-    }
-
-    &:hover,
-    &:focus-within {
-      background-color: transparent !important;
-    }
-  }
-}
-
-.pisell-multiple-select {
-  // 错误状态（Token 无法单独配置错误边框颜色）
+  // 错误状态（Figma 设计体系 Error 色）
   &-error {
-    :global(.ant-select-selector) {
-      border-color: #D92D20 !important;
+    .pisell-lowcode-select .pisell-lowcode-select-selector {
+      border-color: #fda29b !important; // Error/300
 
       &:hover {
-        border-color: #D92D20 !important;
+        border-color: #f97066 !important; // Error/400
       }
     }
 
-    :global(.ant-select-focused .ant-select-selector) {
-      border-color: #D92D20 !important;
-      box-shadow: 0px 0px 0px 4px rgba(217, 45, 32, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+    .pisell-lowcode-select.pisell-lowcode-select-focused .pisell-lowcode-select-selector,
+    .pisell-lowcode-select.pisell-lowcode-select-open .pisell-lowcode-select-selector {
+      border-color: #f97066 !important; // Error/400
+      box-shadow: 0 0 0 4px #fee4e2 !important; // Error/100
     }
   }
 
-  // 自定义聚合标签样式（用于 maxTagPlaceholder 返回的元素，不受 Token 控制）
+  // 聚合标签（maxTagPlaceholder）
   &-more-tag {
     display: inline-flex;
     align-items: center;
-    background-color: #EAECF0;
-    color: #344054;
+    background-color: #eaecf0;
+    color: #344054; // Gray/700
     border: none;
     border-radius: 6px;
     padding: 6px 10px;
@@ -159,35 +172,28 @@
     transition: background-color 0.2s ease;
 
     &:hover {
-      background-color: #D0D5DD;
+      background-color: #d0d5dd; // Gray/300
     }
   }
 
-  // 只读状态（完全自定义的显示，不使用 Select 组件）
+  // 只读状态
   &-readonly {
     &-display {
       display: flex;
       flex-wrap: wrap;
       gap: 4px;
-      padding: 12px 16px;
-      background-color: #F9FAFB;
-      border: 1px solid #EAECF0;
-      border-radius: 8px;
-      min-height: 48px;
+      align-items: center;
+      min-height: 24px;
     }
 
     &-tag {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      padding: 6px 10px;
-      background-color: #EAECF0;
-      border: none;
-      border-radius: 6px;
-      font-size: 16px;
-      font-weight: 500;
-      line-height: 24px;
-      color: #344054;
+      margin: 0;
+      cursor: default;
+      border-radius: 12px;
+      border: 1px solid transparent;
+      font-size: 14px;
+      line-height: 22px;
+      padding: 2px 10px;
 
       &-icon {
         display: flex;
@@ -196,17 +202,13 @@
     }
 
     &-more-tag {
-      display: inline-flex;
-      align-items: center;
-      padding: 6px 10px;
-      background-color: #EAECF0;
-      color: #344054;
-      border: none;
-      border-radius: 6px;
-      font-size: 16px;
-      font-weight: 500;
-      line-height: 24px;
-      cursor: pointer;
+      margin: 0;
+      cursor: default;
+      border-radius: 12px;
+      border: 1px solid transparent;
+      font-size: 14px;
+      line-height: 22px;
+      padding: 2px 10px;
     }
 
     &-empty {
@@ -218,8 +220,33 @@
   }
 }
 
-// 动画
-@keyframes fadeIn {
+// 下拉内搜索框（在 dropdown 内）
+.pisell-select-search-wrapper {
+  padding: 6px;
+  border-bottom: 1px solid #eaecf0;
+}
+
+.pisell-select-search-input {
+  padding: 9px 10px !important;
+  font-size: 14px;
+
+  .pisell-lowcode-input {
+    font-size: 14px !important;
+    color: #344054 !important;
+
+    &::placeholder {
+      color: #98a2b3 !important;
+      font-size: 12px !important;
+    }
+  }
+
+  &:hover,
+  &:focus-within {
+    background-color: transparent !important;
+  }
+}
+
+@keyframes pisell-multiple-select-fadeIn {
   from {
     opacity: 0;
     transform: translateY(-4px);

package/es/components/pisellMultipleSelect/components/EditView.js

@@ -2,7 +2,7 @@ import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.108.0/
 import { _objectWithoutProperties } from "../../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectWithoutProperties.js";
 import { Input, Select, Tooltip } from "antd";
 import classNames from "classnames";
-import React, { forwardRef, useCallback, useMemo, useState } from "react";
+import React, { forwardRef, useCallback, useMemo, useRef, useState } from "react";
 import { useDebouncedSearch } from "@pisell/utils";
 import { CheckOutlined, SearchOutlined } from "@ant-design/icons";
 
@@ -61,6 +61,7 @@ const EditView = forwardRef((props, ref) => {
 		filterOption,
 		options
 	]);
+	const wrapperRef = useRef(null);
 	const menuItemSelectedIcon = /* @__PURE__ */ React.createElement(CheckOutlined, { style: {
 		color: "#7F56D9",
 		fontSize: 16
@@ -93,6 +94,7 @@ const EditView = forwardRef((props, ref) => {
 		return /* @__PURE__ */ React.createElement(Tooltip, { title: tooltipContent }, /* @__PURE__ */ React.createElement("span", { className: "pisell-multiple-select-more-tag" }, "+", omittedValues.length));
 	}, [options, showTooltipOnOverflow]);
 	return /* @__PURE__ */ React.createElement("div", {
+		ref: wrapperRef,
 		className: classNames("pisell-multiple-select-wrapper", className),
 		style
 	}, label && /* @__PURE__ */ React.createElement("label", { className: classNames("pisell-multiple-select-label", { "pisell-multiple-select-label-required": required }) }, label), /* @__PURE__ */ React.createElement(Select, _objectSpread2(_objectSpread2({}, restProps), {}, {
@@ -109,6 +111,11 @@ const EditView = forwardRef((props, ref) => {
 		maxTagCount,
 		maxTagPlaceholder,
 		size,
+		popupClassName: "pisell-multiple-select-dropdown",
+		getPopupContainer: () => {
+			var _wrapperRef$current;
+			return (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 ? _wrapperRef$current : document.body;
+		},
 		className: classNames("pisell-multiple-select", { "pisell-multiple-select-error": error })
 	})), helperText && !error && /* @__PURE__ */ React.createElement("div", { className: "pisell-multiple-select-helper-text" }, helperText), error && errorText && /* @__PURE__ */ React.createElement("div", { className: "pisell-multiple-select-error-text" }, errorText));
 });

package/es/components/pisellMultipleSelect/components/ReadOnlyView.js

@@ -1,4 +1,5 @@
-import { Tooltip } from "antd";
+import { getDefaultTagColor } from "../../../utils/tagColor.js";
+import { Tag, Tooltip } from "antd";
 import classNames from "classnames";
 import React, { useMemo } from "react";
 import { calculateTagDisplay, findOptionsByValues } from "@pisell/utils";
@@ -6,7 +7,7 @@ import { calculateTagDisplay, findOptionsByValues } from "@pisell/utils";
 //#region src/components/pisellMultipleSelect/components/ReadOnlyView.tsx
 /**
 * PisellMultipleSelect - ReadOnlyView (只读态视图)
-* 只读状态下的渲染
+* 只读状态下使用 Tag 展示选中值
 */
 const ReadOnlyView = (props) => {
 	const { value = [], options, label, required, maxTagCount = 3, className, style } = props;
@@ -19,10 +20,21 @@ const ReadOnlyView = (props) => {
 	return /* @__PURE__ */ React.createElement("div", {
 		className: classNames("pisell-multiple-select-wrapper", "pisell-multiple-select-readonly", className),
 		style
-	}, label && /* @__PURE__ */ React.createElement("label", { className: classNames("pisell-multiple-select-label", { "pisell-multiple-select-label-required": required }) }, label), /* @__PURE__ */ React.createElement("div", { className: "pisell-multiple-select-readonly-display" }, selectedOptions.length > 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, tagDisplayInfo.visibleTags.map((option) => /* @__PURE__ */ React.createElement("span", {
-		key: option.value,
-		className: "pisell-multiple-select-readonly-tag"
-	}, option.icon && /* @__PURE__ */ React.createElement("span", { className: "pisell-multiple-select-readonly-tag-icon" }, option.icon), option.label)), tagDisplayInfo.hiddenCount > 0 && /* @__PURE__ */ React.createElement(Tooltip, { title: tagDisplayInfo.hiddenTags.map((t) => t.label).join(", ") }, /* @__PURE__ */ React.createElement("span", { className: "pisell-multiple-select-readonly-more-tag" }, "+", tagDisplayInfo.hiddenCount))) : /* @__PURE__ */ React.createElement("span", { className: "pisell-multiple-select-readonly-empty" }, "-")));
+	}, label && /* @__PURE__ */ React.createElement("label", { className: classNames("pisell-multiple-select-label", { "pisell-multiple-select-label-required": required }) }, label), /* @__PURE__ */ React.createElement("div", { className: "pisell-multiple-select-readonly-display" }, selectedOptions.length > 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, tagDisplayInfo.visibleTags.map((option, idx) => {
+		var _option$color;
+		return /* @__PURE__ */ React.createElement(Tag, {
+			key: option.value,
+			className: "pisell-multiple-select-readonly-tag",
+			color: (_option$color = option.color) !== null && _option$color !== void 0 ? _option$color : getDefaultTagColor(option.value, idx)
+		}, option.icon && /* @__PURE__ */ React.createElement("span", { className: "pisell-multiple-select-readonly-tag-icon" }, option.icon), option.label);
+	}), tagDisplayInfo.hiddenCount > 0 && /* @__PURE__ */ React.createElement(Tooltip, { title: tagDisplayInfo.hiddenTags.map((t) => t.label).join(", ") }, /* @__PURE__ */ React.createElement(Tag, {
+		className: "pisell-multiple-select-readonly-more-tag",
+		style: {
+			backgroundColor: "#F2F4F7",
+			borderColor: "#EAECF0",
+			color: "#667085"
+		}
+	}, "+", tagDisplayInfo.hiddenCount))) : /* @__PURE__ */ React.createElement("span", { className: "pisell-multiple-select-readonly-empty" }, "-")));
 };
 ReadOnlyView.displayName = "PisellMultipleSelectReadOnlyView";
 var ReadOnlyView_default = ReadOnlyView;