@zat-design/sisyphus-react 3.0.16-beta.2 → 3.1.4

package/es/ProForm/utils/transformValue.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["value"];
-import { isEqual } from 'lodash';
+import { set } from 'lodash';
 import { contrast } from '../utils';
 export var transformValue = function transformValue(names, form, fieldName, _normalize, _getValueProps) {
   return {
@@ -16,7 +16,8 @@ export var transformValue = function transformValue(names, form, fieldName, _nor
       }
       names.forEach(function (name, index) {
         var _value2;
-        form.setFieldValue(name, (_value2 = _value) === null || _value2 === void 0 ? void 0 : _value2[index]);
+        // @ts-ignore
+        set(form.getFieldsValue(true), name, (_value2 = _value) === null || _value2 === void 0 ? void 0 : _value2[index]);
       });
       return _value;
     },
@@ -24,7 +25,7 @@ export var transformValue = function transformValue(names, form, fieldName, _nor
       var _value = [];
       names.forEach(function (name, index) {
         var value = form.getFieldValue(name);
-        ![null, undefined].includes(value) && (_value[index] = value);
+        _value[index] = value;
       });
       // 支持外部传入转换函数
       var _ref = (_getValueProps === null || _getValueProps === void 0 ? void 0 : _getValueProps(_value)) || {
@@ -32,12 +33,8 @@ export var transformValue = function transformValue(names, form, fieldName, _nor
         },
         cusValue = _ref.value,
         cusRest = _objectWithoutProperties(_ref, _excluded);
-      if (!isEqual(value, cusValue)) {
-        // 延时解决表单render期间，重复渲染阻塞的问题
-        setTimeout(function () {
-          form.setFieldValue(fieldName, cusValue);
-        }, 200);
-      }
+      // @ts-ignore
+      set(form.getFieldsValue(true), fieldName, cusValue);
       // 如果表单里的值和组合得到的值不全等  更新表单里的值、
       return _objectSpread({
         value: cusValue

package/es/ProForm/utils/useChanged.js

@@ -3,8 +3,12 @@ import _Form from "antd/es/form";
 import { get } from 'lodash';
 import { contrastOriginal } from './contrastOriginal';
 export var useChanged = function useChanged(name, names, nameStr, originalValues, form, fun) {
-  var value = _Form.useWatch(nameStr || name, form);
-  if (!originalValues || get(originalValues, nameStr || name) === undefined) return false;
+  var _form = form;
+  if (!originalValues || get(originalValues, nameStr || name) === undefined) {
+    _form = [];
+    return false;
+  }
+  var value = _Form.useWatch(nameStr || name, _form);
   var changed = contrastOriginal(name, names, originalValues, value, fun);
   return changed;
 };

package/es/ProForm/utils/useFieldProps.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ProFormOtherProps } from '../propsType';
+export declare const FieldProvider: React.Provider<ProFormOtherProps>;
+export declare const useFieldProps: () => ProFormOtherProps;

package/es/ProForm/utils/useFieldProps.js

@@ -0,0 +1,6 @@
+import React, { useContext } from 'react';
+var FieldContext = /*#__PURE__*/React.createContext({});
+export var FieldProvider = FieldContext.Provider;
+export var useFieldProps = function useFieldProps() {
+  return useContext(FieldContext);
+};

package/es/ProForm/utils/useForm.js

@@ -1,14 +1,12 @@
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import "antd/es/form/style";
 import _Form from "antd/es/form";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { useEffect } from 'react';
-import { cloneDeep } from 'lodash';
-import { filterInternalFields, processHyphenKeys, hasRowKey } from './index';
-// eslint-disable-next-line space-before-function-paren
+import { useMemo } from 'react';
+import { merge } from 'lodash';
+import { HOOK_MARK } from 'rc-field-form/es/FieldContext';
+import { deleteForPath } from '.';
 export var useForm = function useForm(originForm) {
   var _Form$useForm = _Form.useForm(originForm),
     _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
@@ -16,44 +14,37 @@ export var useForm = function useForm(originForm) {
   var getFieldsValue = form.getFieldsValue,
     validateFields = form.validateFields,
     getFieldValue = form.getFieldValue;
-  useEffect(function () {
+  useMemo(function () {
     var _getFieldsValue = function _getFieldsValue() {
-      for (var _len = arguments.length, rest = new Array(_len), _key = 0; _key < _len; _key++) {
-        rest[_key] = arguments[_key];
-      }
-      var props = (rest === null || rest === void 0 ? void 0 : rest.length) ? rest : [true];
-      // @ts-ignore
-      var values = getFieldsValue.apply(void 0, _toConsumableArray(props));
-      if (rest === null || rest === void 0 ? void 0 : rest.length) {
-        return values;
-      }
-      if ((rest === null || rest === void 0 ? void 0 : rest[0]) === true) {
-        return values;
-      }
-      return filterInternalFields(cloneDeep(values));
-    };
-    var originSetFieldsValue = form.setFieldsValue; // 备份原始的 setFieldsValue 方法
-    // const originSetFieldValue = form.setFieldValue; // 备份原始的 setFieldValue 方法
-    var _setFieldsValue = function _setFieldsValue(values) {
-      if (hasRowKey(values)) {
-        originSetFieldsValue(values); // 调用原始方法
-      } else {
-        var mergedValues = processHyphenKeys(_objectSpread(_objectSpread({}, getFieldsValue()), values));
-        originSetFieldsValue(mergedValues); // 调用原始方法
+      var firstProps = !(arguments.length <= 0 ? undefined : arguments[0]) ? true : arguments.length <= 0 ? undefined : arguments[0];
+      var values = getFieldsValue(firstProps, arguments.length <= 1 ? undefined : arguments[1]);
+      if ((arguments.length <= 0 ? undefined : arguments[0]) === undefined) {
+        var result = merge({}, values);
+        // @ts-ignore
+        var internalHooks = form.getInternalHooks(HOOK_MARK);
+        var fields = internalHooks.getFields();
+        var deletePath = [];
+        // 找到带'-'的name
+        fields.forEach(function (field) {
+          var name = field.name;
+          if (Array.isArray(name)) {
+            var index = name.findIndex(function (item) {
+              return typeof item === 'string' && item.includes('-');
+            });
+            if (index !== -1) deletePath.push(name);
+          }
+          if (typeof name === 'string' && name.includes('-')) {
+            deletePath.push(name);
+          }
+        });
+        // 执行删除操作
+        deletePath.forEach(function (item) {
+          deleteForPath(result, item);
+        });
+        return result;
       }
+      return values;
     };
-    // const _setFieldValue: FormInstance<T>['setFieldValue'] = (namePath, value) => {
-    //   // 当namePath是数组且最后一个为数字时，就是行编辑
-    //   if (Array.isArray(namePath) && isNumber(namePath[namePath.length - 1])) {
-    //     const newNamePath: any = getArrayBeforeNumber(namePath); // formList&ProEditTable的行namePath
-    //     const getRightValue = getFieldsValue()[newNamePath[0]] ? getFieldsValue()[newNamePath[0]] : getFieldsValue()[newNamePath[0].split('-')[0]];
-    //     const getNamePathValue = getRightValue?.[newNamePath[newNamePath.length - 1]]; // 取当前行数据
-    //     const mergedValues: any = processHyphenKeys({ ...getNamePathValue, ...value });
-    //     originSetFieldValue(newNamePath, mergedValues); // 调用原始方法
-    //   } else {
-    //     originSetFieldValue(namePath, value);
-    //   }
-    // };
     var _validateFields = /*#__PURE__*/function () {
       var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(nameList) {
         var values, _values;
@@ -84,13 +75,6 @@ export var useForm = function useForm(originForm) {
     }();
     form.getFieldsValue = _getFieldsValue;
     form.validateFields = _validateFields;
-    form.setFieldsValue = _setFieldsValue;
-    // form.setFieldValue = _setFieldValue;
-    // return () => {
-    //   // 组件卸载前恢复原始的 setFieldsValue 方法
-    //   form.setFieldsValue = originSetFieldsValue;
-    //   form.setFieldValue = originSetFieldValue;
-    // };
   }, [form]);
   return [form];
 };

package/es/ProForm/utils/useRules.d.ts

@@ -0,0 +1,16 @@
+import type { InternalNamePath } from 'antd/lib/form/interface';
+import type { ProRule } from '../propsType';
+interface Props {
+    rules?: ProRule[];
+    required?: boolean;
+    isSelect: boolean;
+    label?: string;
+    names?: InternalNamePath[];
+    labelRequired?: boolean;
+    type?: string;
+}
+declare const useRules: (props: Props) => {
+    rules: ProRule[];
+    required?: boolean;
+};
+export default useRules;

package/es/ProForm/utils/useRules.js

@@ -0,0 +1,62 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { useEffect, useMemo } from 'react';
+import { isBoolean } from 'lodash';
+import { rulesCreator } from './rulesCreator';
+import { isNotFullArray, isNullArray } from './index';
+var useRules = function useRules(props) {
+  var rules = props.rules,
+    required = props.required,
+    isSelect = props.isSelect,
+    label = props.label,
+    names = props.names,
+    labelRequired = props.labelRequired,
+    type = props.type;
+  // 根据 required 添加 rules, names 字段会添加数组的必填校验
+  var internalRule = useMemo(function () {
+    var result = {
+      rules: rules || []
+    };
+    if (required === true) {
+      var requiredRule = Array.isArray(rules) && (rules === null || rules === void 0 ? void 0 : rules.find(function (rule) {
+        return 'required' in rule;
+      }));
+      if (!requiredRule) {
+        var message = isSelect ? "\u8BF7\u9009\u62E9".concat(label || '') : "\u8BF7\u8F93\u5165".concat(label || '');
+        var rule = {
+          required: required,
+          message: message
+        };
+        // names字段的必填校验
+        if (names === null || names === void 0 ? void 0 : names.length) {
+          rule.validator = function (_, value) {
+            if (!value || isNullArray(value)) {
+              return Promise.reject(new Error("\u8BF7\u586B\u5199".concat(label)));
+            }
+            return Promise.resolve();
+          };
+        }
+        result.rules = Array.isArray(rules) ? [].concat(_toConsumableArray(rules), [rule]) : [rule];
+      }
+    }
+    return result;
+  }, [rules, required]);
+  // type转换为内置rules
+  internalRule.rules = internalRule.rules && rulesCreator(internalRule.rules, label, isSelect);
+  useEffect(function () {
+    // 添加完整性校验
+    if (names && !isBoolean(labelRequired) || type === 'Group' && Array.isArray(names) && required) {
+      var customRequired = {
+        validator: function validator(rules, value) {
+          // 完整性校验, 空数组不校验, 数组有值且值不完整则校验不通过
+          if (Array.isArray(value) && !isNullArray(value) && isNotFullArray(value, names.length)) {
+            return Promise.reject(new Error("\u8BF7\u5B8C\u6574\u586B\u5199".concat(label || '')));
+          }
+          return Promise.resolve();
+        }
+      };
+      internalRule.rules.push(customRequired);
+    }
+  }, [internalRule]);
+  return internalRule;
+};
+export default useRules;

package/es/ProForm/utils/useShouldUpdate.d.ts

@@ -12,13 +12,15 @@ interface UseShouldUpdateProps<Values> {
     show?: ProColumnProps['show'];
     formItemProps?: ProColumnProps['formItemProps'] & {
         clearNotShow?: boolean;
+        names?: any[];
     };
     form?: FormInstance<Values>;
     disabled?: ProColumnProps['disabled'];
     rules?: ProRule[];
     required?: boolean;
+    type: string;
     [key: string]: any;
 }
-type HookShouldUpdate<Values = any> = ({ show, formItemProps, form, disabled, rules, required, }: UseShouldUpdateProps<Values>) => Result<Values>;
+type HookShouldUpdate<Values = any> = (props: UseShouldUpdateProps<Values>) => Result<Values>;
 declare const useShouldUpdate: HookShouldUpdate;
 export default useShouldUpdate;

package/es/ProForm/utils/useShouldUpdate.js

@@ -1,6 +1,7 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useRef, useState } from 'react';
-import { isFunction, cloneDeep, isEqualWith } from 'lodash';
+import { isFunction, isEqualWith } from 'lodash';
 import { customEqualForFun } from './index';
 // 代理shouldUpdate事件, 执行函数值的[show, disabled], 当[show, disabled]与上一次值不相同时更新状态
 var useShouldUpdate = function useShouldUpdate(_ref) {
@@ -17,7 +18,8 @@ var useShouldUpdate = function useShouldUpdate(_ref) {
     name = formItemProps.name,
     clearNotShow = formItemProps.clearNotShow,
     index = formItemProps.index,
-    namePath = formItemProps.namePath;
+    namePath = formItemProps.namePath,
+    names = formItemProps.names;
   var timerRef = useRef();
   var showRef = useRef();
   var disabledRef = useRef();
@@ -76,38 +78,29 @@ var useShouldUpdate = function useShouldUpdate(_ref) {
     requiredRef.current = required;
   }
   if (isFunction(rules)) {
-    rulesRef.current = cloneDeep(rules(values, {
+    rulesRef.current = rules(values, {
       form: form,
       index: index,
       namePath: namePath
-    }));
-  } else {
-    rulesRef.current = rules;
-  }
-  if (isFunction(rules)) {
-    rulesRef.current = cloneDeep(rules(values, {
-      form: form,
-      index: index,
-      namePath: namePath
-    }));
+    });
   } else {
     rulesRef.current = rules;
   }
   if (isFunction(originComponent)) {
-    originComponentRef.current = cloneDeep(originComponent(values, {
+    originComponentRef.current = originComponent(values, {
       form: form,
       index: index,
       namePath: namePath
-    }));
+    });
   } else {
     originComponentRef.current = newComponent;
   }
   if (isFunction(fieldProps)) {
-    fieldPropsRef.current = cloneDeep(fieldProps(values, {
+    fieldPropsRef.current = fieldProps(values, {
       form: form,
       index: index,
       namePath: namePath
-    })); // index, namePath FormList才会有
+    }); // index, namePath FormList才会有
   } else {
     fieldPropsRef.current = fieldProps;
   }
@@ -146,17 +139,25 @@ var useShouldUpdate = function useShouldUpdate(_ref) {
         namePath: namePath
       }) : fieldProps;
       // 清值防抖  多次刷新时以最后一次为准
-      if (clearNotShow !== false && name) {
+      if (clearNotShow !== false && (name || names)) {
         if (_show === false) {
           clearInterval(timerRef.current);
           timerRef.current = setTimeout(function () {
-            form.resetFields([formItemProps.name]);
-          }, 5e2);
+            if (Array.isArray(names)) {
+              form.resetFields(_toConsumableArray(names));
+            } else {
+              form.resetFields([formItemProps.name]);
+            }
+          }, 200);
         } else {
           clearInterval(timerRef.current);
         }
       }
-      if (_show !== showRef.current || _disabled !== disabledRef.current || _required !== requiredRef.current || isEqualWith(rulesRef.current, _rules, customEqualForFun) || isEqualWith(fieldPropsRef.current, _fieldProps, customEqualForFun) || isEqualWith(originComponentRef.current, _component, customEqualForFun)) {
+      // 当校验规则改变的时候  重新执行校验
+      if (_required !== requiredRef.current || !isEqualWith(rulesRef.current, _rules, customEqualForFun)) {
+        form.validateFields([name]);
+      }
+      if (_show !== showRef.current || _disabled !== disabledRef.current || _required !== requiredRef.current || !isEqualWith(rulesRef.current, _rules, customEqualForFun) || !isEqualWith(fieldPropsRef.current, _fieldProps, customEqualForFun) || !isEqualWith(originComponentRef.current, _component, customEqualForFun)) {
         showRef.current = _show;
         disabledRef.current = _disabled;
         requiredRef.current = _required;
@@ -164,7 +165,7 @@ var useShouldUpdate = function useShouldUpdate(_ref) {
         originComponentRef.current = _component;
         fieldPropsRef.current = _fieldProps;
         reRender({});
-        return true;
+        return false;
       }
       if (typeof _shouldUpdate === 'function') {
         for (var _len = arguments.length, rest = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {

package/es/ProForm/utils/valueType.js

@@ -1,5 +1,5 @@
 import Big from 'big.js';
-import { transforms } from '@zat-design-pro-component/utils';
+import { transforms } from '@zat-design/utils';
 var transformDate = transforms.transformDate,
   transformSwitch = transforms.transformSwitch;
 /**

package/es/ProIcon/index.js

@@ -1,14 +1,7 @@
 import "antd/es/button/style";
 import _Button from "antd/es/button";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-/*
- * @Author: wangshengqiang
- * @Date: 2023-02-02 17:47:35
- * @LastEditTime: 2023-03-24 11:04:58
- * @LastEditors: wangshengqiang
- * @Description:
- */
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import symbolIcon from './symbolIcon';
 import './style/index.less';
@@ -60,28 +53,35 @@ var ProIcon = function ProIcon(props) {
     transform: "rotate(".concat(rotate, "deg)")
   } : undefined;
   var proIconClassNames = classNames(className, {
-    'pro-icon': true,
+    'pro-icon': !disabled,
     'pro-icon-spin': !!spin,
-    'pro-icon-with-theme': theme
+    'pro-icon-with-theme': theme,
+    'pro-icon-btn': disabled
+  });
+  var SvgElement = _jsx("span", {
+    className: "anticon",
+    style: {
+      color: color
+    },
+    children: _jsx("svg", {
+      className: proIconClassNames,
+      "aria-hidden": "true",
+      onClick: onClick,
+      fill: "currentColor",
+      style: _objectSpread(_objectSpread({
+        width: size,
+        height: size
+      }, rotateStyle), style),
+      children: _jsx("use", {
+        xlinkHref: "#icon-".concat(type)
+      })
+    })
   });
-  var SvgElement = /*#__PURE__*/React.createElement("span", {
-    className: "anticon"
-  }, /*#__PURE__*/React.createElement("svg", {
-    className: proIconClassNames,
-    "aria-hidden": "true",
-    onClick: onClick,
-    fill: "currentColor",
-    style: _objectSpread(_objectSpread({
-      width: size,
-      height: size
-    }, rotateStyle), style)
-  }, /*#__PURE__*/React.createElement("use", {
-    xlinkHref: "#icon-".concat(type)
-  })));
   if (disabled) {
-    return /*#__PURE__*/React.createElement(_Button, {
+    return _jsx(_Button, {
       type: "text",
-      icon: /*#__PURE__*/React.createElement(React.Fragment, null, SvgElement),
+      className: proIconClassNames,
+      icon: SvgElement,
       disabled: true
     });
   }

package/es/ProIcon/style/index.less

@@ -9,4 +9,19 @@
   &.pro-icon-spin {
     animation: loadingCircle 1s infinite linear;
   }
+
+}
+
+.pro-icon-btn {
+  .anticon {
+    display: inline-block;
+  }
+
+  &.ant-btn-icon-only {
+    width  : auto;
+    height : auto;
+    padding: 0;
+    border: 0;
+    vertical-align: 0;
+  }
 }

package/es/ProIcon/symbolIcon.js

@@ -1,13 +1,13 @@
-window._iconfont_svg_string_4063056 = '<svg><symbol id="icon-arrow" viewBox="0 0 1024 1024"><path d="M832 0a192 192 0 0 1 192 192v640a192 192 0 0 1-192 192H192A192 192 0 0 1 0 832V192A192 192 0 0 1 192 0z m0 42.667H192A149.333 149.333 0 0 0 42.667 192v640A149.333 149.333 0 0 0 192 981.333h640A149.333 149.333 0 0 0 981.333 832V192A149.333 149.333 0 0 0 832 42.667z m-94.165 329.386l60.33 60.331L512 718.592 225.835 432.384l60.33-60.33L512 597.887l225.835-225.835z"  ></path></symbol><symbol id="icon-delete" viewBox="0 0 1024 1024"><path d="M662.08 121.472v64H361.92v-64z m206.4 159.488v64H155.52v-64z"  ></path><path d="M280.512 303.232l-0.064 530.816h460.096V303.232h64v594.88H216.512v-594.88z"  ></path><path d="M431.424 440.704v337.728h-64V440.704z m225.152 0v337.728h-64V440.704z"  ></path></symbol><symbol id="icon-catalog" viewBox="0 0 1075 1024"><path d="M1044.429 758.323v128.973H313.702V758.272h730.727z m-833.127 0v128.973H71.732V758.272h139.57zM1044.43 447.54v128.922H313.702V447.539h730.727z m-833.127 0v128.922H71.732V447.539h139.57z m833.127-310.784v128.922H313.702V136.704h730.727z m-833.127 0v128.922H71.732V136.704h139.57z"  ></path></symbol><symbol id="icon-customColumn" viewBox="0 0 1024 1024"><path d="M170.368 128h0.576c28.288 0 42.368 14.848 42.368 44.608v678.784c0 29.76-14.08 44.608-42.368 44.608h-0.576C142.144 896 128 881.152 128 851.392V172.608c0-29.76 14.08-44.608 42.368-44.608z m682.752 0h0.576c28.224 0 42.368 14.848 42.368 44.608v678.784c0 29.76-14.08 44.608-42.368 44.608h-0.576c-28.288 0-42.368-14.848-42.368-44.608V172.608c0-29.76 14.08-44.608 42.368-44.608z m-453.632 0h225.024c38.784 0 58.176 20.16 58.176 60.416v647.168c0 40.32-19.392 60.416-58.176 60.416H399.488c-38.784 0-58.176-20.16-58.176-60.416V188.416c0-40.32 19.392-60.416 58.176-60.416z"  ></path></symbol><symbol id="icon-copy" viewBox="0 0 1024 1024"><path d="M363.746 0h565.883c52.05 0 94.286 42.236 94.286 94.285V660.17c0 52.049-42.237 94.285-94.286 94.285H363.746c-52.05 0-94.286-42.236-94.286-94.285V94.285C269.46 42.236 311.697 0 363.746 0z m0 80.804a13.482 13.482 0 0 0-13.482 13.481V660.17c0 7.423 6.058 13.482 13.482 13.482h565.883c7.424 0 13.482-6.059 13.482-13.482V94.285a13.482 13.482 0 0 0-13.482-13.481H363.746z m309.905 754.54a40.445 40.445 0 1 1 80.803 0v94.37c0 52.05-42.236 94.286-94.285 94.286H94.285C42.236 1023.915 0 981.678 0 929.63V363.745c0-52.05 42.236-94.286 94.285-94.286h94.371a40.445 40.445 0 0 1 0 80.804h-94.37a13.482 13.482 0 0 0-13.482 13.482v565.883c0 7.424 6.058 13.482 13.481 13.482H660.17c7.423 0 13.482-6.058 13.482-13.482v-94.37z"  ></path></symbol><symbol id="icon-drag" viewBox="0 0 1024 1024"><path d="M358.4 204.8m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z"  ></path><path d="M665.6 204.8m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z"  ></path><path d="M665.6 409.6m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z"  ></path><path d="M358.4 614.4m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z"  ></path><path d="M358.4 819.2m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z"  ></path><path d="M665.6 819.2m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z"  ></path><path d="M358.4 409.6m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z"  ></path><path d="M665.6 614.4m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z"  ></path></symbol><symbol id="icon-disabled" viewBox="0 0 1024 1024"><path d="M752.384 412.1088h-55.6544V300.3904C696.7296 183.6544 608.512 102.4 501.76 102.4 395.0592 102.4 306.8928 183.6544 306.8928 300.3904V407.04H251.1872c-27.8016 0-46.3872 25.344-46.3872 50.7392v385.8432c0 30.464 23.1936 50.7904 46.3872 50.7904h501.248c27.8016 0 46.3872-25.3952 46.3872-50.7904V462.848c0-30.464-18.5856-50.7392-46.4384-50.7392z m-222.72 253.8496v86.272c0 5.12-4.6592 5.12-4.6592 5.12h-41.7792c-4.608 0-4.608-5.12-4.608-5.12v-86.272c-23.2448-10.1888-37.12-30.464-37.12-55.8592 0-35.5328 27.8016-66.048 60.3136-66.048 32.4608 0 60.3136 30.5152 60.3136 66.048 0 25.3952-13.9264 45.6704-32.4608 55.808z m92.7744-253.8496H381.1328V295.3216c0-60.928 55.7056-111.6672 120.6784-111.6672 64.9728 0 120.6272 50.7392 120.6272 111.6672v116.736z"  ></path></symbol><symbol id="icon-tip" viewBox="0 0 1024 1024"><path d="M512 19.017a492.983 492.983 0 1 1-0.073 986.039A492.983 492.983 0 0 1 512 19.09z m0 48.786a444.27 444.27 0 1 0 0.073 888.467A444.27 444.27 0 0 0 512 67.803z m22.016 317.367c37.45 3.877 55.15 33.792 48.64 66.707l-78.41 259.072c-1.023 5.924 2.049 11.849 7.315 13.677 5.852 2.048 17.92-5.412 27.648-16.091l47.104-56.613c1.244 9.509-0.878 26.185-0.878 32.549-35.328 53.028-71.314 93.988-131.876 93.988-41.326-6.729-58.222-36.352-49.298-66.56l77.897-257.828c1.901-6.364-1.244-13.02-7.022-15.068-5.778-2.048-17.042 5.413-26.77 16.092l-47.031 56.612c-1.317-9.508-0.146-25.234-0.146-31.597 35.328-53.029 93.403-94.94 132.827-94.94z m40.96-144.823c29.77 0 53.906 21.724 53.906 53.614 0 31.964-24.137 53.614-53.906 53.614a52.297 52.297 0 0 1-53.906-53.614c0-31.89 24.137-53.614 53.906-53.614z"  ></path></symbol><symbol id="icon-reset" viewBox="0 0 1024 1024"><path d="M482.464768 117.691733L364.363435 66.696533A49.288533 49.288533 0 0 0 325.314901 157.013333a417.9968 417.9968 0 0 0 53.8624 789.845334 49.288533 49.288533 0 0 0 25.668267-95.163734 319.624533 319.624533 0 0 1-29.559467-608.324266l-7.850666 18.158933a49.152 49.152 0 0 0 26.0096 64.580267 49.288533 49.288533 0 0 0 64.580266-24.9856l50.107734-118.9888a49.425067 49.425067 0 0 0-25.668267-64.512z m429.602133 421.410134A418.884267 418.884267 0 0 0 614.424235 126.839467a49.288533 49.288533 0 1 0-28.398934 94.344533 319.829333 319.829333 0 0 1 56.9344 589.824 49.152 49.152 0 0 0-86.152533-47.240533l-67.106133 109.431466a48.9472 48.9472 0 0 0 16.110933 67.925334l109.294933 67.9936a49.288533 49.288533 0 1 0 50.9952-83.7632l-15.018666-9.352534a418.679467 418.679467 0 0 0 261.051733-376.900266z"  ></path></symbol><symbol id="icon-view" viewBox="0 0 1024 1024"><path d="M801.606 104.727a117.667 117.667 0 0 1 117.434 109.94l0.233 7.727v246.598a34.91 34.91 0 0 1-69.493 4.748l-0.325-4.748V222.394c0-24.669-18.619-44.963-42.636-47.57l-5.213-0.279H222.394c-24.669 0-44.963 18.619-47.57 42.636l-0.279 5.213v579.212c0 24.669 18.619 44.963 42.636 47.57l5.213 0.279h243.247a34.91 34.91 0 0 1 4.747 69.492l-4.747 0.326H222.394a117.667 117.667 0 0 1-117.434-109.94l-0.233-7.727V222.394a117.667 117.667 0 0 1 109.94-117.434l7.727-0.233h579.212zM448.559 585.728a34.91 34.91 0 1 1 0 69.818H332.195a34.91 34.91 0 1 1 0-69.818h116.364z m232.727-232.727a34.91 34.91 0 1 1 0 69.818H332.195a34.91 34.91 0 1 1 0-69.818h349.09z"  ></path><path d="M699.764 490.356a186.182 186.182 0 1 1 0 372.364 186.182 186.182 0 0 1 0-372.364z m0 69.819a116.364 116.364 0 1 0 0 232.727 116.364 116.364 0 0 0 0-232.727z"  ></path><path d="M798.673 769.35a34.91 34.91 0 0 1 49.339 0l82.292 82.246a34.91 34.91 0 1 1-49.338 49.384l-82.293-82.292a34.91 34.91 0 0 1 0-49.338z"  ></path></symbol><symbol id="icon-search" viewBox="0 0 1024 1024"><path d="M801.606 104.727a117.667 117.667 0 0 1 117.434 109.94l0.233 7.727v246.598a34.91 34.91 0 0 1-69.493 4.748l-0.325-4.748V222.394c0-24.669-18.619-44.963-42.636-47.57l-5.213-0.279H222.394c-24.669 0-44.963 18.619-47.57 42.636l-0.279 5.213v579.212c0 24.669 18.619 44.963 42.636 47.57l5.213 0.279h243.247a34.91 34.91 0 0 1 4.747 69.492l-4.747 0.326H222.394a117.667 117.667 0 0 1-117.434-109.94l-0.233-7.727V222.394a117.667 117.667 0 0 1 109.94-117.434l7.727-0.233h579.212zM448.559 585.728a34.91 34.91 0 1 1 0 69.818H332.195a34.91 34.91 0 1 1 0-69.818h116.364z m232.727-232.727a34.91 34.91 0 1 1 0 69.818H332.195a34.91 34.91 0 1 1 0-69.818h349.09z"  ></path><path d="M699.764 490.356a186.182 186.182 0 1 1 0 372.364 186.182 186.182 0 0 1 0-372.364z m0 69.819a116.364 116.364 0 1 0 0 232.727 116.364 116.364 0 0 0 0-232.727z"  ></path><path d="M798.673 769.35a34.91 34.91 0 0 1 49.339 0l82.292 82.246a34.91 34.91 0 1 1-49.338 49.384l-82.293-82.292a34.91 34.91 0 0 1 0-49.338z"  ></path></symbol></svg>', function (e) {
+window._iconfont_svg_string_4063056 = '<svg><symbol id="icon-dot" viewBox="0 0 1024 1024"><path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"  ></path></symbol><symbol id="icon-solid-close" viewBox="0 0 1024 1024"><path d="M516.707 66.513C272.86 66.513 75.16 264.212 75.16 508.06S272.86 949.607 516.707 949.607 958.254 751.91 958.254 508.06 760.556 66.513 516.707 66.513z m227.067 601.691c18.419 18.42 18.419 48.504 0 66.923s-48.504 18.42-66.923 0L516.707 574.983 356.563 735.127c-18.419 18.42-48.503 18.42-66.923 0s-18.419-48.504 0-66.923L449.784 508.06 289.64 347.916c-18.419-18.419-18.419-48.503 0-66.922 18.42-18.42 48.504-18.42 66.923 0l160.144 160.144 160.144-160.144c18.42-18.42 48.504-18.42 66.923 0 18.419 18.419 18.419 48.503 0 66.922L583.63 508.06l160.144 160.144z"  ></path></symbol><symbol id="icon-arrow" viewBox="0 0 1024 1024"><path d="M832 0a192 192 0 0 1 192 192v640a192 192 0 0 1-192 192H192A192 192 0 0 1 0 832V192A192 192 0 0 1 192 0z m0 42.667H192A149.333 149.333 0 0 0 42.667 192v640A149.333 149.333 0 0 0 192 981.333h640A149.333 149.333 0 0 0 981.333 832V192A149.333 149.333 0 0 0 832 42.667z m-94.165 329.386l60.33 60.331L512 718.592 225.835 432.384l60.33-60.33L512 597.887l225.835-225.835z"  ></path></symbol><symbol id="icon-delete" viewBox="0 0 1024 1024"><path d="M662.08 121.472v64H361.92v-64z m206.4 159.488v64H155.52v-64z"  ></path><path d="M280.512 303.232l-0.064 530.816h460.096V303.232h64v594.88H216.512v-594.88z"  ></path><path d="M431.424 440.704v337.728h-64V440.704z m225.152 0v337.728h-64V440.704z"  ></path></symbol><symbol id="icon-catalog" viewBox="0 0 1075 1024"><path d="M1044.429 758.323v128.973H313.702V758.272h730.727z m-833.127 0v128.973H71.732V758.272h139.57zM1044.43 447.54v128.922H313.702V447.539h730.727z m-833.127 0v128.922H71.732V447.539h139.57z m833.127-310.784v128.922H313.702V136.704h730.727z m-833.127 0v128.922H71.732V136.704h139.57z"  ></path></symbol><symbol id="icon-customColumn" viewBox="0 0 1024 1024"><path d="M170.368 128h0.576c28.288 0 42.368 14.848 42.368 44.608v678.784c0 29.76-14.08 44.608-42.368 44.608h-0.576C142.144 896 128 881.152 128 851.392V172.608c0-29.76 14.08-44.608 42.368-44.608z m682.752 0h0.576c28.224 0 42.368 14.848 42.368 44.608v678.784c0 29.76-14.08 44.608-42.368 44.608h-0.576c-28.288 0-42.368-14.848-42.368-44.608V172.608c0-29.76 14.08-44.608 42.368-44.608z m-453.632 0h225.024c38.784 0 58.176 20.16 58.176 60.416v647.168c0 40.32-19.392 60.416-58.176 60.416H399.488c-38.784 0-58.176-20.16-58.176-60.416V188.416c0-40.32 19.392-60.416 58.176-60.416z"  ></path></symbol><symbol id="icon-copy" viewBox="0 0 1024 1024"><path d="M363.746 0h565.883c52.05 0 94.286 42.236 94.286 94.285V660.17c0 52.049-42.237 94.285-94.286 94.285H363.746c-52.05 0-94.286-42.236-94.286-94.285V94.285C269.46 42.236 311.697 0 363.746 0z m0 80.804a13.482 13.482 0 0 0-13.482 13.481V660.17c0 7.423 6.058 13.482 13.482 13.482h565.883c7.424 0 13.482-6.059 13.482-13.482V94.285a13.482 13.482 0 0 0-13.482-13.481H363.746z m309.905 754.54a40.445 40.445 0 1 1 80.803 0v94.37c0 52.05-42.236 94.286-94.285 94.286H94.285C42.236 1023.915 0 981.678 0 929.63V363.745c0-52.05 42.236-94.286 94.285-94.286h94.371a40.445 40.445 0 0 1 0 80.804h-94.37a13.482 13.482 0 0 0-13.482 13.482v565.883c0 7.424 6.058 13.482 13.481 13.482H660.17c7.423 0 13.482-6.058 13.482-13.482v-94.37z"  ></path></symbol><symbol id="icon-drag" viewBox="0 0 1024 1024"><path d="M358.4 204.8m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z"  ></path><path d="M665.6 204.8m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z"  ></path><path d="M665.6 409.6m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z"  ></path><path d="M358.4 614.4m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z"  ></path><path d="M358.4 819.2m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z"  ></path><path d="M665.6 819.2m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z"  ></path><path d="M358.4 409.6m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z"  ></path><path d="M665.6 614.4m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z"  ></path></symbol><symbol id="icon-disabled" viewBox="0 0 1024 1024"><path d="M752.384 412.1088h-55.6544V300.3904C696.7296 183.6544 608.512 102.4 501.76 102.4 395.0592 102.4 306.8928 183.6544 306.8928 300.3904V407.04H251.1872c-27.8016 0-46.3872 25.344-46.3872 50.7392v385.8432c0 30.464 23.1936 50.7904 46.3872 50.7904h501.248c27.8016 0 46.3872-25.3952 46.3872-50.7904V462.848c0-30.464-18.5856-50.7392-46.4384-50.7392z m-222.72 253.8496v86.272c0 5.12-4.6592 5.12-4.6592 5.12h-41.7792c-4.608 0-4.608-5.12-4.608-5.12v-86.272c-23.2448-10.1888-37.12-30.464-37.12-55.8592 0-35.5328 27.8016-66.048 60.3136-66.048 32.4608 0 60.3136 30.5152 60.3136 66.048 0 25.3952-13.9264 45.6704-32.4608 55.808z m92.7744-253.8496H381.1328V295.3216c0-60.928 55.7056-111.6672 120.6784-111.6672 64.9728 0 120.6272 50.7392 120.6272 111.6672v116.736z"  ></path></symbol><symbol id="icon-tip" viewBox="0 0 1024 1024"><path d="M512 19.017a492.983 492.983 0 1 1-0.073 986.039A492.983 492.983 0 0 1 512 19.09z m0 48.786a444.27 444.27 0 1 0 0.073 888.467A444.27 444.27 0 0 0 512 67.803z m22.016 317.367c37.45 3.877 55.15 33.792 48.64 66.707l-78.41 259.072c-1.023 5.924 2.049 11.849 7.315 13.677 5.852 2.048 17.92-5.412 27.648-16.091l47.104-56.613c1.244 9.509-0.878 26.185-0.878 32.549-35.328 53.028-71.314 93.988-131.876 93.988-41.326-6.729-58.222-36.352-49.298-66.56l77.897-257.828c1.901-6.364-1.244-13.02-7.022-15.068-5.778-2.048-17.042 5.413-26.77 16.092l-47.031 56.612c-1.317-9.508-0.146-25.234-0.146-31.597 35.328-53.029 93.403-94.94 132.827-94.94z m40.96-144.823c29.77 0 53.906 21.724 53.906 53.614 0 31.964-24.137 53.614-53.906 53.614a52.297 52.297 0 0 1-53.906-53.614c0-31.89 24.137-53.614 53.906-53.614z"  ></path></symbol><symbol id="icon-reset" viewBox="0 0 1024 1024"><path d="M482.464768 117.691733L364.363435 66.696533A49.288533 49.288533 0 0 0 325.314901 157.013333a417.9968 417.9968 0 0 0 53.8624 789.845334 49.288533 49.288533 0 0 0 25.668267-95.163734 319.624533 319.624533 0 0 1-29.559467-608.324266l-7.850666 18.158933a49.152 49.152 0 0 0 26.0096 64.580267 49.288533 49.288533 0 0 0 64.580266-24.9856l50.107734-118.9888a49.425067 49.425067 0 0 0-25.668267-64.512z m429.602133 421.410134A418.884267 418.884267 0 0 0 614.424235 126.839467a49.288533 49.288533 0 1 0-28.398934 94.344533 319.829333 319.829333 0 0 1 56.9344 589.824 49.152 49.152 0 0 0-86.152533-47.240533l-67.106133 109.431466a48.9472 48.9472 0 0 0 16.110933 67.925334l109.294933 67.9936a49.288533 49.288533 0 1 0 50.9952-83.7632l-15.018666-9.352534a418.679467 418.679467 0 0 0 261.051733-376.900266z"  ></path></symbol><symbol id="icon-view" viewBox="0 0 1024 1024"><path d="M801.606 104.727a117.667 117.667 0 0 1 117.434 109.94l0.233 7.727v246.598a34.91 34.91 0 0 1-69.493 4.748l-0.325-4.748V222.394c0-24.669-18.619-44.963-42.636-47.57l-5.213-0.279H222.394c-24.669 0-44.963 18.619-47.57 42.636l-0.279 5.213v579.212c0 24.669 18.619 44.963 42.636 47.57l5.213 0.279h243.247a34.91 34.91 0 0 1 4.747 69.492l-4.747 0.326H222.394a117.667 117.667 0 0 1-117.434-109.94l-0.233-7.727V222.394a117.667 117.667 0 0 1 109.94-117.434l7.727-0.233h579.212zM448.559 585.728a34.91 34.91 0 1 1 0 69.818H332.195a34.91 34.91 0 1 1 0-69.818h116.364z m232.727-232.727a34.91 34.91 0 1 1 0 69.818H332.195a34.91 34.91 0 1 1 0-69.818h349.09z"  ></path><path d="M699.764 490.356a186.182 186.182 0 1 1 0 372.364 186.182 186.182 0 0 1 0-372.364z m0 69.819a116.364 116.364 0 1 0 0 232.727 116.364 116.364 0 0 0 0-232.727z"  ></path><path d="M798.673 769.35a34.91 34.91 0 0 1 49.339 0l82.292 82.246a34.91 34.91 0 1 1-49.338 49.384l-82.293-82.292a34.91 34.91 0 0 1 0-49.338z"  ></path></symbol><symbol id="icon-search" viewBox="0 0 1024 1024"><path d="M801.606 104.727a117.667 117.667 0 0 1 117.434 109.94l0.233 7.727v246.598a34.91 34.91 0 0 1-69.493 4.748l-0.325-4.748V222.394c0-24.669-18.619-44.963-42.636-47.57l-5.213-0.279H222.394c-24.669 0-44.963 18.619-47.57 42.636l-0.279 5.213v579.212c0 24.669 18.619 44.963 42.636 47.57l5.213 0.279h243.247a34.91 34.91 0 0 1 4.747 69.492l-4.747 0.326H222.394a117.667 117.667 0 0 1-117.434-109.94l-0.233-7.727V222.394a117.667 117.667 0 0 1 109.94-117.434l7.727-0.233h579.212zM448.559 585.728a34.91 34.91 0 1 1 0 69.818H332.195a34.91 34.91 0 1 1 0-69.818h116.364z m232.727-232.727a34.91 34.91 0 1 1 0 69.818H332.195a34.91 34.91 0 1 1 0-69.818h349.09z"  ></path><path d="M699.764 490.356a186.182 186.182 0 1 1 0 372.364 186.182 186.182 0 0 1 0-372.364z m0 69.819a116.364 116.364 0 1 0 0 232.727 116.364 116.364 0 0 0 0-232.727z"  ></path><path d="M798.673 769.35a34.91 34.91 0 0 1 49.339 0l82.292 82.246a34.91 34.91 0 1 1-49.338 49.384l-82.293-82.292a34.91 34.91 0 0 1 0-49.338z"  ></path></symbol></svg>', function (e) {
   var t = (t = document.getElementsByTagName("script"))[t.length - 1],
     a = t.getAttribute("data-injectcss"),
     t = t.getAttribute("data-disable-injectsvg");
   if (!t) {
     var o,
       _c,
-      h,
       i,
       l,
+      h,
       n = function n(t, a) {
         a.parentNode.insertBefore(t, a);
       };
@@ -25,16 +25,16 @@ window._iconfont_svg_string_4063056 = '<svg><symbol id="icon-arrow" viewBox="0 0
       a.innerHTML = e._iconfont_svg_string_4063056, (a = a.getElementsByTagName("svg")[0]) && (a.setAttribute("aria-hidden", "true"), a.style.position = "absolute", a.style.width = 0, a.style.height = 0, a.style.overflow = "hidden", a = a, (t = document.body).firstChild ? n(a, t.firstChild) : t.appendChild(a));
     }, document.addEventListener ? ~["complete", "loaded", "interactive"].indexOf(document.readyState) ? setTimeout(o, 0) : (_c = function c() {
       document.removeEventListener("DOMContentLoaded", _c, !1), o();
-    }, document.addEventListener("DOMContentLoaded", _c, !1)) : document.attachEvent && (h = o, i = e.document, l = !1, m(), i.onreadystatechange = function () {
-      "complete" == i.readyState && (i.onreadystatechange = null, d());
+    }, document.addEventListener("DOMContentLoaded", _c, !1)) : document.attachEvent && (i = o, l = e.document, h = !1, m(), l.onreadystatechange = function () {
+      "complete" == l.readyState && (l.onreadystatechange = null, d());
     });
   }
   function d() {
-    l || (l = !0, h());
+    h || (h = !0, i());
   }
   function m() {
     try {
-      i.documentElement.doScroll("left");
+      l.documentElement.doScroll("left");
     } catch (t) {
       return void setTimeout(m, 50);
     }

package/es/ProLayout/components/Layout/Header/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import logoImg from '../../../images/logoImg.png';
 var Header = function Header(props) {
@@ -10,24 +10,31 @@ var Header = function Header(props) {
     title = props.title,
     logo = props.logo;
   if (pure === true || (pure === null || pure === void 0 ? void 0 : pure.topMenu)) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null);
+    return _jsx(_Fragment, {});
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return _jsxs("div", {
     className: classNames({
       'pro-layout-header': true,
       'pro-layout-header-pure': typeof pure !== 'boolean' ? pure.topMenu : pure
     }),
     style: {
       height: headerHeight
-    }
-  }, headerTitleRender || /*#__PURE__*/React.createElement("div", {
-    className: "pro-layout-header-logo"
-  }, /*#__PURE__*/React.createElement("span", null, logo || /*#__PURE__*/React.createElement("img", {
-    className: "default-logo",
-    src: logoImg,
-    alt: "logo"
-  })), title ? /*#__PURE__*/React.createElement("h4", null, title) : null), headerContentRender || null, rightContentRender ? /*#__PURE__*/React.createElement("div", {
-    className: "pro-layout-header-actions"
-  }, rightContentRender) : null);
+    },
+    children: [headerTitleRender || _jsxs("div", {
+      className: "pro-layout-header-logo",
+      children: [_jsx("span", {
+        children: logo || _jsx("img", {
+          className: "default-logo",
+          src: logoImg,
+          alt: "logo"
+        })
+      }), title ? _jsx("h4", {
+        children: title
+      }) : null]
+    }), headerContentRender || null, rightContentRender ? _jsx("div", {
+      className: "pro-layout-header-actions",
+      children: rightContentRender
+    }) : null]
+  });
 };
 export default Header;

package/es/ProLayout/components/Layout/Header/style/index.less

@@ -2,7 +2,7 @@
   .pro-layout-header {
     position       : fixed;
     top            : 0;
-    z-index        : 102;
+    z-index        : 101;
     display        : flex;
     flex-direction : row;
     align-items    : center;
@@ -12,7 +12,7 @@
     padding        : 0 32px 0px 0px;
     line-height    : 48px;
     background     : var(--zaui-base-bg, #ffffff);
-    box-shadow     : 0px 2px 4px 0px rgba(0, 55, 93, 0.15) !important;
+    box-shadow     : 0px 1px 2px 0px rgba(0, 55, 93, 0.1) !important;
 
     .pro-layout-header-actions {
       .ant-avatar {
@@ -42,10 +42,10 @@
       }
 
       h4 {
-        font-size   : 16px;
+        font-size   : var(--zaui-font-size-lg, 16px);
         font-weight : 600;
         color       : #1D2129;
-        padding-left: 16px;
+        padding-left: var(--zaui-space-size-md, 16px);
         position    : relative;
         margin      : 0;
 
@@ -97,7 +97,7 @@
         margin      : 0.67em 0;
         padding-left: 12px;
         color       : var(--zaui-text, #343434);
-        font-size   : 18px;
+        font-size   : var(--zaui-font-size-xl, 18px);
       }
     }
 
@@ -123,4 +123,4 @@
         }
       }
     }
-  }
+  }