@lobehub/ui 3.4.0 → 3.4.2

package/es/Avatar/Avatar.js

@@ -23,7 +23,6 @@ import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Avatar = /*#__PURE__*/memo(function (_ref) {
-  var _ref2, _ref3;
   var bordered = _ref.bordered,
     className = _ref.className,
     avatar = _ref.avatar,
@@ -93,12 +92,15 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
     width: size
   }) : avatar;
   var hasBackground = background && background !== 'transparent' && background !== 'rgba(0,0,0,0)' && background !== null;
-  var customAvatar = emoji ? /*#__PURE__*/_jsx(FluentEmoji, {
-    emoji: emoji,
-    size: emojiScaleWithBackground ? hasBackground ? size * 0.8 : size : size * 0.8,
-    type: animation ? 'anim' : '3d',
-    unoptimized: unoptimized
-  }) : sliceText ? (_ref2 = text || title) === null || _ref2 === void 0 ? void 0 : _ref2.toUpperCase().slice(0, 2) : (_ref3 = text || title) === null || _ref3 === void 0 ? void 0 : _ref3.toUpperCase();
+  var customAvatar = useMemo(function () {
+    var _ref2, _ref3;
+    return emoji ? /*#__PURE__*/_jsx(FluentEmoji, {
+      emoji: emoji,
+      size: emojiScaleWithBackground ? hasBackground ? size * 0.85 : size : size * 0.85,
+      type: animation ? 'anim' : '3d',
+      unoptimized: unoptimized
+    }) : sliceText ? (_ref2 = text || title) === null || _ref2 === void 0 ? void 0 : _ref2.toUpperCase().slice(0, 2) : (_ref3 = text || title) === null || _ref3 === void 0 ? void 0 : _ref3.toUpperCase();
+  }, [animation, emoji, hasBackground, size, sliceText, text, title, unoptimized, emojiScaleWithBackground]);
   return /*#__PURE__*/_jsxs(AntAvatar, _objectSpread(_objectSpread({
     alt: imgAlt,
     className: cx(variants({
@@ -111,7 +113,7 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
     size: size,
     src: isDefaultAntAvatar ? defualtAvatar : undefined,
     style: _objectSpread({
-      background: isDefaultAntAvatar && !emoji ? background : background || theme.colorBorder,
+      background: isDefaultAntAvatar || !!emoji ? background : background || theme.colorBorder,
       boxShadow: bordered ? "".concat(theme.colorBgLayout, " 0 0 0 2px, ").concat(borderedColor || theme.colorTextTertiary, " 0 0 0 4px") : undefined,
       color: readableColor(background || theme.colorBorder),
       cursor: rest !== null && rest !== void 0 && rest.onClick ? 'pointer' : undefined,

package/es/Flex/FlexBasic.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import './style.css';
 import type { FlexBasicProps } from './type';
 declare const _default: import("react").NamedExoticComponent<FlexBasicProps>;
 export default _default;

package/es/Flex/FlexBasic.js

@@ -10,7 +10,6 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { memo } from 'react';
-import "./style.css";
 import { getCssValue, getFlexDirection, isHorizontal, isSpaceDistribution } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 var FlexBasic = function FlexBasic(_ref) {

package/es/ThemeProvider/GlobalStyle/global.js

@@ -2,5 +2,5 @@ var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css } from 'antd-style';
 export default (function (token) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  :root {\n    --font-settings: 'cv01', 'tnum', 'kern';\n    --font-variations: 'opsz' auto, tabular-nums;\n\n    text-autospace: normal;\n  }\n\n  html {\n    overscroll-behavior: none;\n    color-scheme: ", ";\n  }\n\n  body {\n    overflow: hidden auto;\n\n    min-height: 100vh;\n    margin: 0;\n    padding: 0;\n\n    font-family: ", ";\n    font-size: ", "px;\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    line-height: 1;\n    color: ", ";\n    text-size-adjust: none;\n    text-rendering: optimizelegibility;\n    word-wrap: break-word;\n    vertical-align: baseline;\n\n    background-color: ", ";\n\n    -webkit-overflow-scrolling: touch;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  code {\n    font-family: ", " !important;\n\n    span {\n      font-family: ", " !important;\n    }\n  }\n\n  ::selection {\n    color: #000;\n    background: ", ";\n\n    -webkit-text-fill-color: unset !important;\n  }\n\n  * {\n    scrollbar-color: ", " transparent;\n    scrollbar-width: thin;\n    box-sizing: border-box;\n    vertical-align: baseline;\n  }\n"])), token.isDarkMode ? 'dark' : 'light', token.fontFamily, token.fontSize, token.colorTextBase, token.colorBgLayout, token.fontFamilyCode, token.fontFamilyCode, token.yellow9, token.colorFill);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  :root {\n    --font-settings: 'cv01', 'tnum', 'kern';\n    --font-variations: 'opsz' auto, tabular-nums;\n\n    text-autospace: normal;\n  }\n\n  html {\n    overscroll-behavior: none;\n    color-scheme: ", ";\n  }\n\n  body {\n    overflow: hidden auto;\n\n    min-height: 100vh;\n    margin: 0;\n    padding: 0;\n\n    font-family: ", ";\n    font-size: ", "px;\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    line-height: 1;\n    color: ", ";\n    text-size-adjust: none;\n    text-rendering: optimizelegibility;\n    word-wrap: break-word;\n    vertical-align: baseline;\n\n    background-color: ", ";\n\n    -webkit-overflow-scrolling: touch;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  code {\n    font-family: ", " !important;\n\n    span {\n      font-family: ", " !important;\n    }\n  }\n\n  ::selection {\n    color: #000;\n    background: ", ";\n\n    -webkit-text-fill-color: unset !important;\n  }\n\n  * {\n    scrollbar-color: ", " transparent;\n    scrollbar-width: thin;\n    box-sizing: border-box;\n    vertical-align: baseline;\n  }\n\n  @layer lobe-base {\n    :where(.lobe-flex) {\n      /* Define defaults on the element itself to avoid CSS variable inheritance leaking to nested Flex */\n      --lobe-flex: 0 1 auto;\n      --lobe-flex-direction: column;\n      --lobe-flex-wrap: nowrap;\n      --lobe-flex-justify: flex-start;\n      --lobe-flex-align: stretch;\n      --lobe-flex-width: auto;\n      --lobe-flex-height: auto;\n      --lobe-flex-padding: 0;\n      /* Keep padding-inline/block aligned with padding by default, and prevent inheriting from parent */\n      --lobe-flex-padding-inline: var(--lobe-flex-padding);\n      --lobe-flex-padding-block: var(--lobe-flex-padding);\n      --lobe-flex-gap: 0;\n\n      display: flex;\n\n      flex: var(--lobe-flex);\n      flex-direction: var(--lobe-flex-direction);\n      flex-wrap: var(--lobe-flex-wrap);\n      justify-content: var(--lobe-flex-justify);\n      align-items: var(--lobe-flex-align);\n\n      width: var(--lobe-flex-width);\n      height: var(--lobe-flex-height);\n\n      padding: var(--lobe-flex-padding);\n      padding-inline: var(--lobe-flex-padding-inline);\n      padding-block: var(--lobe-flex-padding-block);\n\n      gap: var(--lobe-flex-gap);\n    }\n\n    .lobe-flex--hidden {\n      display: none;\n    }\n  }\n"])), token.isDarkMode ? 'dark' : 'light', token.fontFamily, token.fontSize, token.colorTextBase, token.colorBgLayout, token.fontFamilyCode, token.fontFamilyCode, token.yellow9, token.colorFill);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "3.4.0",
+  "version": "3.4.2",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",

package/es/Flex/style.css

@@ -1,36 +0,0 @@
-.lobe-flex {
-  /* Define defaults on the element itself to avoid CSS variable inheritance leaking to nested Flex */
-  --lobe-flex: 0 1 auto;
-  --lobe-flex-direction: column;
-  --lobe-flex-wrap: nowrap;
-  --lobe-flex-justify: flex-start;
-  --lobe-flex-align: stretch;
-  --lobe-flex-width: auto;
-  --lobe-flex-height: auto;
-  --lobe-flex-padding: 0;
-  /* Keep padding-inline/block aligned with padding by default, and prevent inheriting from parent */
-  --lobe-flex-padding-inline: var(--lobe-flex-padding);
-  --lobe-flex-padding-block: var(--lobe-flex-padding);
-  --lobe-flex-gap: 0;
-
-  display: flex;
-
-  flex: var(--lobe-flex);
-  flex-direction: var(--lobe-flex-direction);
-  flex-wrap: var(--lobe-flex-wrap);
-  justify-content: var(--lobe-flex-justify);
-  align-items: var(--lobe-flex-align);
-
-  width: var(--lobe-flex-width);
-  height: var(--lobe-flex-height);
-
-  padding: var(--lobe-flex-padding);
-  padding-inline: var(--lobe-flex-padding-inline);
-  padding-block: var(--lobe-flex-padding-block);
-
-  gap: var(--lobe-flex-gap);
-}
-
-.lobe-flex--hidden {
-  display: none;
-}