@pisell/materials 1.0.488 → 1.0.489

package/es/components/dataSourceComponents/fields/index.d.ts

@@ -39,18 +39,18 @@ declare const formFieldMap: {
     FormItemDateRangePicker: import("react").FC<import("./DateRangePicker/type").DateRangePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
     FormItemUpload: import("react").FC<import("./Upload/type").UploadProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
 };
-declare const getFieldComponent: (fieldComponent: string) => import("react").FC<any> | import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps> | (import("react").FC<{}> & {
+declare const getFieldComponent: (fieldComponent: string) => (import("react").FC<{}> & {
     Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
 } & {
     Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
-}) | import("react").FC<import("./ColorPicker/type").ColorPickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<(import("antd").DatePickerProps & import("../dataSourceForm/utils").WithModeProps) & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd").InputProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | (import("react").FC<import("./Input/type").InputProps> & {
+}) | import("react").FC<import("./ColorPicker/type").ColorPickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<(import("antd").DatePickerProps & import("../dataSourceForm/utils").WithModeProps) & import("../dataSourceForm/utils").WithFormItemProps> | (import("react").FC<import("./Input/type").InputProps> & {
     JSON: import("react").FC<any>;
     Password: import("react").FC<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
     TextArea: import("react").FC<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
     URL: import("react").FC<import("antd").InputProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
     Email: import("react").FC<import("antd").InputProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
     Phone: import("react").FC<import("./Input.Phone/WithMode").PhoneInputProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
-}) | import("react").FC<import("./Radio/type").RadioGroupProps & import("../dataSourceForm/utils").WithModeProps> | (import("react").FC<{}> & {
+}) | (import("react").FC<{}> & {
     Group: import("react").FC<import("./Radio/type").RadioGroupProps & import("../dataSourceForm/utils").WithModeProps>;
 } & {
     Group: import("react").FC<import("./Radio/type").RadioGroupProps & import("../dataSourceForm/utils").WithModeProps>;
@@ -61,5 +61,5 @@ declare const getFieldComponent: (fieldComponent: string) => import("react").FC<
     valueField: string;
 } & {
     dataSource?: any;
-}) => import("react").JSX.Element) | import("react").FC<import("./TimePicker/type").TimePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./DateRangePicker/type").DateRangePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Upload/type").UploadProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
+}) => import("react").JSX.Element) | import("react").FC<any> | import("react").FC<import("./TimePicker/type").TimePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd").InputProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Radio/type").RadioGroupProps & import("../dataSourceForm/utils").WithModeProps> | import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps> | import("react").FC<import("./DateRangePicker/type").DateRangePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Upload/type").UploadProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
 export { getFieldComponent, formFieldMap };

package/es/components/dataSourceComponents/hooks/useActions.js

@@ -3,12 +3,13 @@ function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyri
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 import { useMemoizedFn } from 'ahooks';
-import { message } from 'antd';
+import PisellToast from "../../pisellToast";
 import useFormat from "../dataSourceTable/hooks/useFormat";
 import { createNocobaseData, customApi, updateNocobaseData, getNocobaseDataList, deleteNocobaseData } from "../dataSourceForm/serve";
 import useParseActionsVariable from "./useParseActionsVariable";
 import useVariables from "./useVariables";
 import useDataSource from "./useDataSource";
+import { getText } from "../../../locales";
 var useActions = function useActions() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     propsDataSource = _ref.dataSource,
@@ -194,7 +195,9 @@ var useActions = function useActions() {
               _context4.next = 12;
               break;
             }
-            message.error('请先获取数据');
+            PisellToast({
+              content: getText('pisell-action-get-data')
+            });
             return _context4.abrupt("return", Promise.reject());
           case 12:
             return _context4.abrupt("return", updateNocobaseData({

package/es/components/table/Table/utils.d.ts

@@ -167,7 +167,7 @@ export declare const getSettingKeyArrByMode: ({ filter, columnSetting, dataSourc
     sort?: SortType | undefined;
     mode: "" | "localStorage" | "remote";
     currentViewMode: ModeType;
-}) => ("filter_setting" | "column_setting" | "gallery_setting" | "view_mode" | "group_by" | "order_by")[];
+}) => ("view_mode" | "column_setting" | "order_by" | "group_by" | "gallery_setting" | "filter_setting")[];
 export declare const omit: (obj: Record<string, any>, keys: string[]) => Record<string, any>;
 export declare const stringify: (obj: Record<string, any>) => string;
 export {};

package/es/locales/en-US.d.ts

@@ -151,6 +151,10 @@ declare const _default: {
     'pisell-upload-setting-size-error': (maxSize: number) => string;
     'pisell-upload-setting-type-error': (type: string) => string;
     'pisell-upload-count-error': (count: number) => string;
+    'pisell-upload-error': (name: string) => string;
+    'pisell-color-picker-default': string;
+    'pisell-action-get-data': string;
+    'pisell-action-delete-failed': string;
     'walletCard-points': string;
     'walletCard-rechargeable': string;
     'walletCard-voucher': string;

package/es/locales/en-US.js

@@ -186,6 +186,7 @@ export default {
   //walletCard 组件
   'walletCard-done': 'Done',
   'walletCard-qrcode': 'QR code',
+  // 上传组件
   'pisell-upload-button': 'Upload',
   'pisell-upload-setting-size-error': function pisellUploadSettingSizeError(maxSize) {
     return "Each file should not exceed ".concat(maxSize, "MB in size.");
@@ -196,6 +197,14 @@ export default {
   'pisell-upload-count-error': function pisellUploadCountError(count) {
     return "Please upload ".concat(count, " file");
   },
+  'pisell-upload-error': function pisellUploadError(name) {
+    return "".concat(name, " upload failed");
+  },
+  // 颜色组件
+  'pisell-color-picker-default': 'Default',
+  // 获取数据
+  'pisell-action-get-data': 'Please get data first',
+  'pisell-action-delete-failed': 'Delete failed, please try again',
   'walletCard-points': 'Points',
   'walletCard-rechargeable': 'Recharge',
   'walletCard-voucher': 'Voucher',

package/es/locales/zh-CN.d.ts

@@ -151,6 +151,10 @@ declare const _default: {
     'pisell-upload-setting-size-error': (maxSize: number) => string;
     'pisell-upload-setting-type-error': (type: string) => string;
     'pisell-upload-count-error': (count: number) => string;
+    'pisell-upload-error': (name: string) => string;
+    'pisell-color-picker-default': string;
+    'pisell-action-get-data': string;
+    'pisell-action-delete-failed': string;
     'walletCard-points': string;
     'walletCard-rechargeable': string;
     'walletCard-voucher': string;

package/es/locales/zh-CN.js

@@ -185,6 +185,7 @@ export default {
   //walletCard 组件
   'walletCard-done': '完成',
   'walletCard-qrcode': '二维码',
+  // 上传组件
   'pisell-upload-button': '上传',
   'pisell-upload-setting-size-error': function pisellUploadSettingSizeError(maxSize) {
     return "\u6BCF\u4E2A\u6587\u4EF6\u7684\u5927\u5C0F\u4E0D\u8D85\u8FC7".concat(maxSize, "MB");
@@ -195,6 +196,14 @@ export default {
   'pisell-upload-count-error': function pisellUploadCountError(count) {
     return "\u8BF7\u4E0A\u4F20".concat(count, "\u4E2A\u6587\u4EF6");
   },
+  'pisell-upload-error': function pisellUploadError(name) {
+    return "".concat(name, " \u4E0A\u4F20\u5931\u8D25");
+  },
+  // 颜色组件
+  'pisell-color-picker-default': '默认',
+  // 获取数据
+  'pisell-action-get-data': '请先获取数据',
+  'pisell-action-delete-failed': '删除失败,请重试',
   'walletCard-points': '积分卡',
   'walletCard-rechargeable': '充值卡',
   'walletCard-voucher': '代金券',

package/es/locales/zh-TW.d.ts

@@ -151,6 +151,10 @@ declare const _default: {
     'pisell-upload-setting-size-error': (maxSize: number) => string;
     'pisell-upload-setting-type-error': (type: string) => string;
     'pisell-upload-count-error': (count: number) => string;
+    'pisell-upload-error': (name: string) => string;
+    'pisell-color-picker-default': string;
+    'pisell-action-get-data': string;
+    'pisell-action-delete-failed': string;
     'walletCard-points': string;
     'walletCard-rechargeable': string;
     'walletCard-voucher': string;

package/es/locales/zh-TW.js

@@ -186,6 +186,7 @@ export default {
   //walletCard 组件
   'walletCard-done': '完成',
   'walletCard-qrcode': '二維碼',
+  // 上传组件
   'pisell-upload-button': '上傳',
   'pisell-upload-setting-size-error': function pisellUploadSettingSizeError(maxSize) {
     return "\u6BCF\u500B\u6587\u4EF6\u7684\u5927\u5C0F\u4E0D\u8D85\u904E".concat(maxSize, "MB");
@@ -196,6 +197,14 @@ export default {
   'pisell-upload-count-error': function pisellUploadCountError(count) {
     return "\u8ACB\u4E0A\u50B3".concat(count, "\u500B\u6587\u4EF6");
   },
+  'pisell-upload-error': function pisellUploadError(name) {
+    return "".concat(name, " \u4E0A\u50B3\u5931\u6557");
+  },
+  // 颜色选择组件
+  'pisell-color-picker-default': '默認',
+  // 获取数据
+  'pisell-action-get-data': '請先獲取數據',
+  'pisell-action-delete-failed': '刪除失敗,請重試',
   'walletCard-points': '積分卡',
   'walletCard-rechargeable': '充值卡',
   'walletCard-voucher': '代金券',

package/lib/components/dataSourceComponents/dataSourceForm/style.less

@@ -0,0 +1,5 @@
+.pisell-lowcode-form-vertical {
+    .pisell-data-source-form-item .pisell-lowcode-form-item-label>label {
+        height: auto;
+    }
+}

package/lib/components/dataSourceComponents/dataSourceForm/utils.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ModeType } from './type';
+import "./style.less";
 export interface WithModeProps {
     renderMode?: ModeType;
     value?: any;

package/lib/components/dataSourceComponents/dataSourceForm/utils.js

@@ -50,6 +50,7 @@ var import_useDataSource = __toESM(require("../hooks/useDataSource"));
 var import_useFormSetting = __toESM(require("./provider/hooks/useFormSetting"));
 var import_useJsonPrefixPath = __toESM(require("./provider/hooks/useJsonPrefixPath"));
 var import_DataSourceProvider = __toESM(require("../provider/dataSource/DataSourceProvider"));
+var import_style = require("./style.less");
 var withMode = (FieldComponent, ReadPrettyComponent, transformProps) => {
   return ({ renderMode = "edit", value, onChange, ...props }) => {
     const transformedProps = (transformProps == null ? void 0 : transformProps(
@@ -105,7 +106,9 @@ var withFormItem = (WrappedComponent, overlayProps) => {
     style,
     validateTrigger,
     __designMode,
-    labelCol,
+    labelCol: propsLabelCol,
+    hideLabel,
+    innerStyle,
     ...otherProps
   }) => {
     var _a;
@@ -126,6 +129,7 @@ var withFormItem = (WrappedComponent, overlayProps) => {
           renderMode: effectiveMode,
           ...overlayProps == null ? void 0 : overlayProps.innerProps,
           style: {
+            ...innerStyle || {},
             ...((_a2 = overlayProps == null ? void 0 : overlayProps.innerProps) == null ? void 0 : _a2.style) || {}
           },
           isVerification: typeobj == null ? void 0 : typeobj.enabled,
@@ -138,7 +142,8 @@ var withFormItem = (WrappedComponent, overlayProps) => {
       propsMode,
       overlayProps == null ? void 0 : overlayProps.innerProps,
       typeobj == null ? void 0 : typeobj.enabled,
-      size
+      size,
+      innerStyle
     ]);
     const isDesignMode = __designMode === "design";
     const isHidden = effectiveMode === "hidden";
@@ -180,6 +185,7 @@ var withFormItem = (WrappedComponent, overlayProps) => {
     if (maxLengthobj && maxLengthobj.enabled) {
       rules.push({
         ...maxLengthobj,
+        type: "string",
         message: maxLengthobj.message || (0, import_locales.getText)("pisell-data-source-form-max-length-message")(
           maxLengthobj == null ? void 0 : maxLengthobj.max
         )
@@ -188,6 +194,7 @@ var withFormItem = (WrappedComponent, overlayProps) => {
     if (minLengthobj && minLengthobj.enabled) {
       rules.push({
         ...minLengthobj,
+        type: "string",
         message: minLengthobj.message || (0, import_locales.getText)("pisell-data-source-form-min-length-message")(
           minLengthobj == null ? void 0 : minLengthobj.min
         )
@@ -196,15 +203,23 @@ var withFormItem = (WrappedComponent, overlayProps) => {
     if (maxobj && maxobj.enabled) {
       rules.push({
         ...maxobj,
+        type: "number",
         message: maxobj.message || (0, import_locales.getText)("pisell-data-source-form-max-value-message")(maxobj == null ? void 0 : maxobj.max)
       });
     }
     if (minobj && minobj.enabled) {
       rules.push({
         ...minobj,
+        type: "number",
         message: minobj.message || (0, import_locales.getText)("pisell-data-source-form-min-value-message")(minobj == null ? void 0 : minobj.min)
       });
     }
+    const labelCol = (0, import_react.useMemo)(() => {
+      if (hideLabel) {
+        return { span: 0 };
+      }
+      return propsLabelCol;
+    }, [hideLabel, propsLabelCol]);
     return /* @__PURE__ */ import_react.default.createElement(
       import_form.default.Item,
       {
@@ -227,6 +242,7 @@ var withFormItem = (WrappedComponent, overlayProps) => {
         validateTrigger,
         labelCol,
         initialValue: otherProps == null ? void 0 : otherProps.defaultValue,
+        className: `pisell-data-source-form-item`,
         ...overlayProps == null ? void 0 : overlayProps.otherFormItemProps
       },
       renderComponent

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts

@@ -40,7 +40,7 @@ declare const useTableProps: (props: UseTablePropsProps) => {
         width: number;
         align: "center" | "left" | "right";
         fixed: false | "left" | "right";
-        type: "button" | "link";
+        type: "link" | "button";
         items: OperationItem[];
     } | undefined;
     operationContent?: {

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.js

@@ -35,13 +35,15 @@ module.exports = __toCommonJS(useTableProps_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_utils = require("@pisell/utils");
+var import_ahooks = require("ahooks");
 var import_filter = __toESM(require("../filter"));
 var import_usePagination = __toESM(require("./usePagination"));
 var import_useColumns = __toESM(require("./useColumns"));
 var import_useVariables = __toESM(require("../../hooks/useVariables"));
 var import_useComponentId = __toESM(require("../../hooks/useComponentId"));
 var import_useDataSource = __toESM(require("../../hooks/useDataSource"));
-var import_ahooks = require("ahooks");
+var import_pisellToast = __toESM(require("../../../pisellToast"));
+var import_locales = require("../../../../locales");
 var useTableProps = (props) => {
   var _a;
   const {
@@ -105,7 +107,9 @@ var useTableProps = (props) => {
       });
     } catch (error) {
       console.error(error);
-      import_antd.message.error("删除失败,请重试");
+      (0, import_pisellToast.default)({
+        content: (0, import_locales.getText)("pisell-action-delete-failed")
+      });
     }
   });
   const actionsColumns = (0, import_react.useMemo)(() => {

package/lib/components/dataSourceComponents/fields/Checkbox/ReadPretty.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CheckboxProps, CheckboxGroupProps } from './type';
+import './ReadPretty.less';
 declare type CheckboxReadPrettyType = React.FC<CheckboxProps> & {
     Group: React.FC<CheckboxGroupProps>;
 };

package/lib/components/dataSourceComponents/fields/Checkbox/ReadPretty.js

@@ -36,6 +36,7 @@ var import_react = __toESM(require("react"));
 var import_icons = require("@ant-design/icons");
 var import_useValueMap = __toESM(require("../../hooks/useValueMap"));
 var import_utils = require("../../dataSourceForm/utils");
+var import_ReadPretty = require("./ReadPretty.less");
 var CheckboxReadPretty = (props) => {
   const { value } = props;
   return value ? /* @__PURE__ */ import_react.default.createElement(import_icons.CheckOutlined, { style: { color: "rgb(82, 196, 26)" } }) : null;

package/lib/components/dataSourceComponents/fields/ColorPicker/ReadPretty.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { ColorPickerProps } from './type';
+import './ReadPretty.less';
 declare const ColorPickerReadPretty: (props: ColorPickerProps) => React.JSX.Element;
 export default ColorPickerReadPretty;

package/lib/components/dataSourceComponents/fields/ColorPicker/ReadPretty.js

@@ -34,7 +34,15 @@ __export(ReadPretty_exports, {
 module.exports = __toCommonJS(ReadPretty_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
+var import_ReadPretty = require("./ReadPretty.less");
 var ColorPickerReadPretty = (props) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_antd.ColorPicker, { ...props, open: false });
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.ColorPicker,
+    {
+      ...props,
+      open: false,
+      className: "pisell-color-picker-read-pretty"
+    }
+  );
 };
 var ReadPretty_default = ColorPickerReadPretty;

package/lib/components/dataSourceComponents/fields/ColorPicker/WithMode.js

@@ -35,19 +35,29 @@ module.exports = __toCommonJS(WithMode_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_colors = require("@ant-design/colors");
+var import_locales = require("../../../../locales");
 var import_ReadPretty = __toESM(require("./ReadPretty"));
 var import_utils = require("../../dataSourceForm/utils");
-var genPresets = (presets = import_colors.presetPalettes) => Object.entries(presets).map(([label, colors]) => ({
-  label,
-  colors
-}));
 var ColorPicker = (props) => {
-  const { token } = import_antd.theme.useToken();
-  const presets = genPresets({
-    primary: (0, import_colors.generate)(token.colorPrimary),
-    red: import_colors.red,
-    green: import_colors.green
-  });
+  const presets = [
+    {
+      label: (0, import_locales.getText)("pisell-color-picker-default"),
+      colors: [
+        import_colors.red.primary || import_colors.red[5],
+        import_colors.volcano.primary || import_colors.volcano[5],
+        import_colors.orange.primary || import_colors.orange[5],
+        import_colors.gold.primary || import_colors.gold[5],
+        import_colors.yellow.primary || import_colors.yellow[5],
+        import_colors.lime.primary || import_colors.lime[5],
+        import_colors.green.primary || import_colors.green[5],
+        import_colors.cyan.primary || import_colors.cyan[5],
+        import_colors.blue.primary || import_colors.blue[5],
+        import_colors.geekblue.primary || import_colors.geekblue[5],
+        import_colors.purple.primary || import_colors.purple[5],
+        import_colors.magenta.primary || import_colors.magenta[5]
+      ]
+    }
+  ];
   const { renderMode, ...restProps } = props;
   return /* @__PURE__ */ import_react.default.createElement(import_antd.ColorPicker, { ...restProps, presets });
 };

package/lib/components/dataSourceComponents/fields/DatePicker/ReadPretty.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { DatePickerProps } from './type';
+import './ReadPretty.less';
 declare const DatePickerReadPretty: (props: DatePickerProps) => React.JSX.Element;
 export default DatePickerReadPretty;

package/lib/components/dataSourceComponents/fields/DatePicker/ReadPretty.js

@@ -34,8 +34,9 @@ __export(ReadPretty_exports, {
 module.exports = __toCommonJS(ReadPretty_exports);
 var import_react = __toESM(require("react"));
 var import_dayjs = __toESM(require("dayjs"));
+var import_ReadPretty = require("./ReadPretty.less");
 var DatePickerReadPretty = (props) => {
   const { value } = props;
-  return /* @__PURE__ */ import_react.default.createElement("span", null, value ? (0, import_dayjs.default)(value).format("YYYY-MM-DD HH:mm:ss") : "");
+  return /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-date-picker-read-pretty" }, value ? (0, import_dayjs.default)(value).format("YYYY-MM-DD HH:mm:ss") : "");
 };
 var ReadPretty_default = DatePickerReadPretty;

package/lib/components/dataSourceComponents/fields/DatePicker/ReadPretty.less

@@ -0,0 +1,6 @@
+.pisell-date-picker-read-pretty {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px; /* 150% */
+}

package/lib/components/dataSourceComponents/fields/DateRangePicker/ReadPretty.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { DateRangePickerProps } from './type';
+import './ReadPretty.less';
 declare const DateRangePickerReadPretty: (props: DateRangePickerProps) => React.JSX.Element;
 export default DateRangePickerReadPretty;

package/lib/components/dataSourceComponents/fields/DateRangePicker/ReadPretty.js

@@ -34,8 +34,9 @@ __export(ReadPretty_exports, {
 module.exports = __toCommonJS(ReadPretty_exports);
 var import_react = __toESM(require("react"));
 var import_dayjs = __toESM(require("dayjs"));
+var import_ReadPretty = require("./ReadPretty.less");
 var DateRangePickerReadPretty = (props) => {
   const { value } = props;
-  return /* @__PURE__ */ import_react.default.createElement("span", null, value ? (0, import_dayjs.default)(value).format("YYYY-MM-DD HH:mm:ss") : "");
+  return /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-date-range-picker-read-pretty" }, value ? (0, import_dayjs.default)(value).format("YYYY-MM-DD HH:mm:ss") : "");
 };
 var ReadPretty_default = DateRangePickerReadPretty;

package/lib/components/dataSourceComponents/fields/DateRangePicker/ReadPretty.less

@@ -0,0 +1,6 @@
+.pisell-date-range-picker-read-pretty {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px; /* 150% */
+}

package/lib/components/dataSourceComponents/fields/Input/ReadPretty.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
-import { InputProps } from "./type";
+import { InputProps } from './type';
+import './ReadPretty.less';
 declare const InputReadPretty: (props: InputProps) => React.JSX.Element;
 export default InputReadPretty;

package/lib/components/dataSourceComponents/fields/Input/ReadPretty.js

@@ -33,7 +33,8 @@ __export(ReadPretty_exports, {
 });
 module.exports = __toCommonJS(ReadPretty_exports);
 var import_react = __toESM(require("react"));
+var import_ReadPretty = require("./ReadPretty.less");
 var InputReadPretty = (props) => {
-  return /* @__PURE__ */ import_react.default.createElement("span", null, props.value);
+  return /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-input-read-pretty" }, props.value);
 };
 var ReadPretty_default = InputReadPretty;

package/lib/components/dataSourceComponents/fields/Input/ReadPretty.less

@@ -0,0 +1,6 @@
+.pisell-input-read-pretty {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px; /* 150% */
+}

package/lib/components/dataSourceComponents/fields/Input.Email/ReadPretty.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
-import { InputProps } from "./type";
+import { InputProps } from './type';
+import './ReadPretty.less';
 declare const InputReadPretty: (props: InputProps) => React.JSX.Element;
 export default InputReadPretty;

package/lib/components/dataSourceComponents/fields/Input.Email/ReadPretty.js

@@ -33,7 +33,8 @@ __export(ReadPretty_exports, {
 });
 module.exports = __toCommonJS(ReadPretty_exports);
 var import_react = __toESM(require("react"));
+var import_ReadPretty = require("./ReadPretty.less");
 var InputReadPretty = (props) => {
-  return /* @__PURE__ */ import_react.default.createElement("span", null, props.value);
+  return /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-input-email-read-pretty" }, props.value);
 };
 var ReadPretty_default = InputReadPretty;

package/lib/components/dataSourceComponents/fields/Input.Email/ReadPretty.less

@@ -0,0 +1,6 @@
+.pisell-input-email-read-pretty {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px; /* 150% */
+}

package/lib/components/dataSourceComponents/fields/Input.Json/ReadPretty.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { JsonProps } from "./type";
+import "./ReadPretty.less";
 declare const JsonReadPretty: (props: JsonProps) => React.JSX.Element | null;
 export default JsonReadPretty;

package/lib/components/dataSourceComponents/fields/Input.Json/ReadPretty.js

@@ -34,9 +34,10 @@ __export(ReadPretty_exports, {
 module.exports = __toCommonJS(ReadPretty_exports);
 var import_react = __toESM(require("react"));
 var import_utils = require("@pisell/utils");
+var import_ReadPretty = require("./ReadPretty.less");
 var JsonReadPretty = (props) => {
   if ((0, import_utils.isString)(props.value)) {
-    return /* @__PURE__ */ import_react.default.createElement("pre", null, props.value);
+    return /* @__PURE__ */ import_react.default.createElement("pre", { className: "pisell-json-read-pretty" }, props.value);
   } else if ((0, import_utils.isPlainObject)(props.value)) {
     return /* @__PURE__ */ import_react.default.createElement("pre", null, JSON.stringify(props.value, null, 2));
   }

package/lib/components/dataSourceComponents/fields/Input.Json/ReadPretty.less

@@ -0,0 +1,3 @@
+.pisell-json-read-pretty {
+    
+}

package/lib/components/dataSourceComponents/fields/Input.Password/ReadPretty.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { PasswordProps } from './type';
+import './ReadPretty.less';
 declare const PasswordReadPretty: (props: PasswordProps) => React.JSX.Element;
 export default PasswordReadPretty;

package/lib/components/dataSourceComponents/fields/Input.Password/ReadPretty.js

@@ -34,11 +34,12 @@ __export(ReadPretty_exports, {
 module.exports = __toCommonJS(ReadPretty_exports);
 var import_react = __toESM(require("react"));
 var import_utils = require("@pisell/utils");
+var import_ReadPretty = require("./ReadPretty.less");
 var PasswordReadPretty = (props) => {
   var _a, _b;
   if (props.value && (0, import_utils.isString)(props.value)) {
-    return /* @__PURE__ */ import_react.default.createElement("span", null, (_b = (_a = props.value) == null ? void 0 : _a.split) == null ? void 0 : _b.call(_a, "").map(() => "•"));
+    return /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-password-read-pretty" }, (_b = (_a = props.value) == null ? void 0 : _a.split) == null ? void 0 : _b.call(_a, "").map(() => "•"));
   }
-  return /* @__PURE__ */ import_react.default.createElement("span", null, "••••••");
+  return /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-password-read-pretty" }, "••••••");
 };
 var ReadPretty_default = PasswordReadPretty;

package/lib/components/dataSourceComponents/fields/Input.Password/ReadPretty.less

@@ -0,0 +1,6 @@
+.pisell-password-read-pretty {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px; /* 150% */
+}

package/lib/components/dataSourceComponents/fields/Input.Phone/ReadPretty.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import type { PhoneInputProps } from './WithMode';
+import './ReadPretty.less';
 declare const ReadPretty: React.FC<Omit<PhoneInputProps, 'onChange'>>;
 export default ReadPretty;

package/lib/components/dataSourceComponents/fields/Input.Phone/ReadPretty.js

@@ -34,6 +34,7 @@ __export(ReadPretty_exports, {
 module.exports = __toCommonJS(ReadPretty_exports);
 var import_react = __toESM(require("react"));
 var import_libphonenumber_js = require("libphonenumber-js");
+var import_ReadPretty = require("./ReadPretty.less");
 var ReadPretty = ({ value }) => {
   if (!value)
     return null;
@@ -42,9 +43,9 @@ var ReadPretty = ({ value }) => {
     if (!phoneNumber)
       return /* @__PURE__ */ import_react.default.createElement("span", null, value);
     const formattedValue = `(${phoneNumber.formatInternational().split(" ")[0]}) ${phoneNumber.formatNational()}`;
-    return /* @__PURE__ */ import_react.default.createElement("span", null, formattedValue);
+    return /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-phone-read-pretty" }, formattedValue);
   } catch (error) {
-    return /* @__PURE__ */ import_react.default.createElement("span", null, value);
+    return /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-phone-read-pretty" }, value);
   }
 };
 var ReadPretty_default = ReadPretty;

package/lib/components/dataSourceComponents/fields/Input.Phone/ReadPretty.less

@@ -0,0 +1,6 @@
+.pisell-phone-read-pretty {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px; /* 150% */
+}