@manuscripts/style-guide 3.8.1 → 3.8.3

package/dist/cjs/components/icons/profile-avatar.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ProfileAvatarIcon = (props) => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "44", height: "44", viewBox: "0 0 32 32", fill: "none", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M16 0C24.837 0 32 7.163 32 16C32 24.837 24.837 32 16 32C7.163 32 0 24.837 0 16C0 7.163 7.163 0 16 0ZM16 17.585C14.7258 17.585 13.4651 17.8457 12.2954 18.351C11.1257 18.8563 10.0718 19.5956 9.19841 20.5234C8.32504 21.4512 7.65073 22.5478 7.21694 23.7459C6.78315 24.944 6.59907 26.2181 6.676 27.49C9.31009 29.6338 12.6038 30.802 16 30.797C19.396 30.802 22.6896 29.6342 25.324 27.491C25.4009 26.2191 25.2168 24.945 24.7831 23.7469C24.3493 22.5488 23.675 21.4522 22.8016 20.5244C21.9282 19.5966 20.8743 18.8573 19.7046 18.352C18.5349 17.8467 17.2742 17.586 16 17.586V17.585ZM16 1.203C7.828 1.203 1.203 7.828 1.203 16C1.203 20.03 2.815 23.685 5.429 26.354C5.672 21.779 8.82 17.976 13.062 16.753C12.0228 16.1131 11.2209 15.1516 10.778 14.0145C10.3351 12.8773 10.2754 11.6267 10.608 10.4526C10.9406 9.27843 11.6473 8.24491 12.6208 7.509C13.5943 6.7731 14.7814 6.37501 16.0018 6.37522C17.2221 6.37543 18.4091 6.77391 19.3823 7.51015C20.3556 8.24639 21.0619 9.28015 21.3941 10.4544C21.7263 11.6287 21.6662 12.8793 21.2229 14.0163C20.7796 15.1533 19.9774 16.1145 18.938 16.754C23.18 17.976 26.328 21.779 26.571 26.354C29.2842 23.5912 30.802 19.8723 30.797 16C30.797 7.828 24.172 1.203 16 1.203ZM16 7.621C15.4219 7.61225 14.8479 7.71854 14.3113 7.93369C13.7747 8.14885 13.2863 8.46857 12.8744 8.87426C12.4625 9.27994 12.1355 9.76349 11.9122 10.2968C11.6889 10.83 11.574 11.4024 11.574 11.9805C11.574 12.5586 11.6889 13.131 11.9122 13.6642C12.1355 14.1975 12.4625 14.6811 12.8744 15.0867C13.2863 15.4924 13.7747 15.8122 14.3113 16.0273C14.8479 16.2425 15.4219 16.3488 16 16.34C17.1448 16.3227 18.2368 15.8557 19.0402 15.0401C19.8436 14.2244 20.294 13.1254 20.294 11.9805C20.294 10.8356 19.8436 9.73663 19.0402 8.92095C18.2368 8.10527 17.1448 7.63834 16 7.621Z", fill: "#6E6E6E" }) }));
+const ProfileAvatarIcon = (props) => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "44", height: "44", viewBox: "0 0 32 32", fill: "none", ...props, display: "block", children: (0, jsx_runtime_1.jsx)("path", { d: "M16 0C24.837 0 32 7.163 32 16C32 24.837 24.837 32 16 32C7.163 32 0 24.837 0 16C0 7.163 7.163 0 16 0ZM16 17.585C14.7258 17.585 13.4651 17.8457 12.2954 18.351C11.1257 18.8563 10.0718 19.5956 9.19841 20.5234C8.32504 21.4512 7.65073 22.5478 7.21694 23.7459C6.78315 24.944 6.59907 26.2181 6.676 27.49C9.31009 29.6338 12.6038 30.802 16 30.797C19.396 30.802 22.6896 29.6342 25.324 27.491C25.4009 26.2191 25.2168 24.945 24.7831 23.7469C24.3493 22.5488 23.675 21.4522 22.8016 20.5244C21.9282 19.5966 20.8743 18.8573 19.7046 18.352C18.5349 17.8467 17.2742 17.586 16 17.586V17.585ZM16 1.203C7.828 1.203 1.203 7.828 1.203 16C1.203 20.03 2.815 23.685 5.429 26.354C5.672 21.779 8.82 17.976 13.062 16.753C12.0228 16.1131 11.2209 15.1516 10.778 14.0145C10.3351 12.8773 10.2754 11.6267 10.608 10.4526C10.9406 9.27843 11.6473 8.24491 12.6208 7.509C13.5943 6.7731 14.7814 6.37501 16.0018 6.37522C17.2221 6.37543 18.4091 6.77391 19.3823 7.51015C20.3556 8.24639 21.0619 9.28015 21.3941 10.4544C21.7263 11.6287 21.6662 12.8793 21.2229 14.0163C20.7796 15.1533 19.9774 16.1145 18.938 16.754C23.18 17.976 26.328 21.779 26.571 26.354C29.2842 23.5912 30.802 19.8723 30.797 16C30.797 7.828 24.172 1.203 16 1.203ZM16 7.621C15.4219 7.61225 14.8479 7.71854 14.3113 7.93369C13.7747 8.14885 13.2863 8.46857 12.8744 8.87426C12.4625 9.27994 12.1355 9.76349 11.9122 10.2968C11.6889 10.83 11.574 11.4024 11.574 11.9805C11.574 12.5586 11.6889 13.131 11.9122 13.6642C12.1355 14.1975 12.4625 14.6811 12.8744 15.0867C13.2863 15.4924 13.7747 15.8122 14.3113 16.0273C14.8479 16.2425 15.4219 16.3488 16 16.34C17.1448 16.3227 18.2368 15.8557 19.0402 15.0401C19.8436 14.2244 20.294 13.1254 20.294 11.9805C20.294 10.8356 19.8436 9.73663 19.0402 8.92095C18.2368 8.10527 17.1448 7.63834 16 7.621Z", fill: "currentColor" }) }));
 exports.default = ProfileAvatarIcon;

package/dist/cjs/index.js

@@ -62,7 +62,6 @@ __exportStar(require("./components/ContextMenu"), exports);
 __exportStar(require("./components/RadioButton"), exports);
 var RadioGroup_1 = require("./components/RadioGroup");
 Object.defineProperty(exports, "StyledRadioGroup", { enumerable: true, get: function () { return RadioGroup_1.StyledRadioGroup; } });
-__exportStar(require("./components/Avatar"), exports);
 __exportStar(require("./components/Dialog"), exports);
 __exportStar(require("./components/DraggableModal"), exports);
 __exportStar(require("./components/Checkbox"), exports);

package/dist/cjs/mui/components/Avatar/Avatar.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Avatar_1 = __importDefault(require("@mui/material/Avatar"));
+const styles_1 = require("@mui/material/styles");
+const icons_1 = require("../../../components/icons");
+const INITIALS_PALETTE = [
+    '#1a9bc7',
+    '#31a056',
+    '#e65100',
+    '#6a1b9a',
+    '#c62828',
+    '#1565c0',
+    '#558b2f',
+    '#00695c',
+];
+const getInitials = (name) => {
+    const words = name.trim().split(/\s+/);
+    if (words.length === 1) {
+        return words[0].slice(0, 2).toUpperCase();
+    }
+    return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+};
+const Avatar = ({ size, name, color, opacity = 1, src, alt, ...rest }) => {
+    const initials = name ? getInitials(name) : undefined;
+    const initialsBg = name
+        ? INITIALS_PALETTE[name.charCodeAt(0) % INITIALS_PALETTE.length]
+        : undefined;
+    return ((0, jsx_runtime_1.jsx)(AvatarRoot, { ...rest, src: src, alt: alt ?? name, ownerState: { size, opacity, initialsBg, initials: !!initials, color }, children: initials ?? (0, jsx_runtime_1.jsx)(icons_1.ProfileIcon, { height: size, width: size }) }));
+};
+exports.Avatar = Avatar;
+const AvatarRoot = (0, styles_1.styled)(Avatar_1.default)(({ theme, ownerState }) => ({
+    width: ownerState.size,
+    height: ownerState.size,
+    fontSize: Math.round(ownerState.size * 0.4),
+    opacity: ownerState.opacity,
+    backgroundColor: ownerState.initialsBg ?? 'transparent',
+    color: ownerState.initials
+        ? theme.palette.common.white
+        : ownerState.color || theme.palette.grey[700],
+    ...(!ownerState.initials && {
+        '&:hover': {
+            color: ownerState.color || theme.palette.info.main,
+        },
+    }),
+}));

package/dist/cjs/mui/components/Avatar/index.js

@@ -0,0 +1,32 @@
+"use strict";
+/*!
+ * © 2026 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Avatar"), exports);

package/dist/cjs/mui/components/Typography/Typography.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Typography = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
+const styles_1 = require("@mui/material/styles");
+const variantMap = {
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    body: 'body1',
+    caption: 'caption',
+};
+const Typography = ({ variant = 'body', color = 'primary', fontWeight, italic, uppercase, clamp, ...rest }) => ((0, jsx_runtime_1.jsx)(TypographyRoot, { ...rest, variant: variantMap[variant], ownerState: { color, fontWeight, italic, uppercase, clamp } }));
+exports.Typography = Typography;
+const TypographyRoot = (0, styles_1.styled)(Typography_1.default)(({ theme, ownerState }) => {
+    const fontWeight = ownerState.fontWeight === undefined
+        ? undefined
+        : typeof ownerState.fontWeight === 'number'
+            ? ownerState.fontWeight
+            : {
+                regular: theme.typography.fontWeightRegular,
+                medium: theme.typography.fontWeightMedium,
+                bold: theme.typography.fontWeightBold,
+            }[ownerState.fontWeight];
+    return {
+        color: {
+            primary: theme.palette.text.primary,
+            secondary: theme.palette.text.secondary,
+            muted: theme.palette.text.disabled,
+        }[ownerState.color],
+        ...(fontWeight !== undefined && { fontWeight }),
+        ...(ownerState.italic && { fontStyle: 'italic' }),
+        ...(ownerState.uppercase && { textTransform: 'uppercase' }),
+        ...(ownerState.clamp && {
+            display: '-webkit-box',
+            overflow: 'hidden',
+            WebkitLineClamp: ownerState.clamp,
+            WebkitBoxOrient: 'vertical',
+        }),
+    };
+});

package/dist/cjs/mui/components/Typography/index.js

@@ -0,0 +1,32 @@
+"use strict";
+/*!
+ * © 2026 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Typography"), exports);

package/dist/cjs/mui/index.js

@@ -30,7 +30,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./theme"), exports);
+__exportStar(require("./components/Avatar"), exports);
 __exportStar(require("./components/Button"), exports);
 __exportStar(require("./components/IconButton"), exports);
 __exportStar(require("./components/InspectorToggleButton"), exports);
 __exportStar(require("./components/ToggleButton"), exports);
+__exportStar(require("./components/Typography"), exports);

package/dist/cjs/mui/theme/theme.js

@@ -28,10 +28,43 @@ exports.muiTheme = (0, styles_1.createTheme)({
         info: palette_1.palette.info,
         grey: palette_1.palette.grey,
         common: palette_1.palette.common,
+        text: {
+            primary: palette_1.palette.grey[900],
+            secondary: palette_1.palette.grey[700],
+            disabled: palette_1.palette.grey[400],
+        },
     },
     typography: {
         fontFamily: '"Lato", sans-serif',
         fontSize: 14,
+        fontWeightRegular: 400,
+        fontWeightMedium: 500,
+        fontWeightBold: 700,
+        h1: {
+            fontSize: '20px',
+            fontWeight: 700,
+            lineHeight: 1.25,
+        },
+        h2: {
+            fontSize: '18px',
+            fontWeight: 700,
+            lineHeight: '24px',
+        },
+        h3: {
+            fontSize: '16px',
+            fontWeight: 700,
+            lineHeight: '24px',
+        },
+        body1: {
+            fontSize: '14px',
+            fontWeight: 400,
+            lineHeight: '16px',
+        },
+        caption: {
+            fontSize: '12px',
+            fontWeight: 400,
+            lineHeight: '14px',
+        },
         button: {
             textTransform: 'none',
             fontWeight: 400,
@@ -64,6 +97,13 @@ exports.muiTheme = (0, styles_1.createTheme)({
                 },
             },
         },
+        MuiAvatar: {
+            styleOverrides: {
+                root: {
+                    fontWeight: 700,
+                },
+            },
+        },
         MuiIconButton: {
             styleOverrides: {
                 root: {

package/dist/es/components/icons/profile-avatar.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-const ProfileAvatarIcon = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "44", height: "44", viewBox: "0 0 32 32", fill: "none", ...props, children: _jsx("path", { d: "M16 0C24.837 0 32 7.163 32 16C32 24.837 24.837 32 16 32C7.163 32 0 24.837 0 16C0 7.163 7.163 0 16 0ZM16 17.585C14.7258 17.585 13.4651 17.8457 12.2954 18.351C11.1257 18.8563 10.0718 19.5956 9.19841 20.5234C8.32504 21.4512 7.65073 22.5478 7.21694 23.7459C6.78315 24.944 6.59907 26.2181 6.676 27.49C9.31009 29.6338 12.6038 30.802 16 30.797C19.396 30.802 22.6896 29.6342 25.324 27.491C25.4009 26.2191 25.2168 24.945 24.7831 23.7469C24.3493 22.5488 23.675 21.4522 22.8016 20.5244C21.9282 19.5966 20.8743 18.8573 19.7046 18.352C18.5349 17.8467 17.2742 17.586 16 17.586V17.585ZM16 1.203C7.828 1.203 1.203 7.828 1.203 16C1.203 20.03 2.815 23.685 5.429 26.354C5.672 21.779 8.82 17.976 13.062 16.753C12.0228 16.1131 11.2209 15.1516 10.778 14.0145C10.3351 12.8773 10.2754 11.6267 10.608 10.4526C10.9406 9.27843 11.6473 8.24491 12.6208 7.509C13.5943 6.7731 14.7814 6.37501 16.0018 6.37522C17.2221 6.37543 18.4091 6.77391 19.3823 7.51015C20.3556 8.24639 21.0619 9.28015 21.3941 10.4544C21.7263 11.6287 21.6662 12.8793 21.2229 14.0163C20.7796 15.1533 19.9774 16.1145 18.938 16.754C23.18 17.976 26.328 21.779 26.571 26.354C29.2842 23.5912 30.802 19.8723 30.797 16C30.797 7.828 24.172 1.203 16 1.203ZM16 7.621C15.4219 7.61225 14.8479 7.71854 14.3113 7.93369C13.7747 8.14885 13.2863 8.46857 12.8744 8.87426C12.4625 9.27994 12.1355 9.76349 11.9122 10.2968C11.6889 10.83 11.574 11.4024 11.574 11.9805C11.574 12.5586 11.6889 13.131 11.9122 13.6642C12.1355 14.1975 12.4625 14.6811 12.8744 15.0867C13.2863 15.4924 13.7747 15.8122 14.3113 16.0273C14.8479 16.2425 15.4219 16.3488 16 16.34C17.1448 16.3227 18.2368 15.8557 19.0402 15.0401C19.8436 14.2244 20.294 13.1254 20.294 11.9805C20.294 10.8356 19.8436 9.73663 19.0402 8.92095C18.2368 8.10527 17.1448 7.63834 16 7.621Z", fill: "#6E6E6E" }) }));
+const ProfileAvatarIcon = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "44", height: "44", viewBox: "0 0 32 32", fill: "none", ...props, display: "block", children: _jsx("path", { d: "M16 0C24.837 0 32 7.163 32 16C32 24.837 24.837 32 16 32C7.163 32 0 24.837 0 16C0 7.163 7.163 0 16 0ZM16 17.585C14.7258 17.585 13.4651 17.8457 12.2954 18.351C11.1257 18.8563 10.0718 19.5956 9.19841 20.5234C8.32504 21.4512 7.65073 22.5478 7.21694 23.7459C6.78315 24.944 6.59907 26.2181 6.676 27.49C9.31009 29.6338 12.6038 30.802 16 30.797C19.396 30.802 22.6896 29.6342 25.324 27.491C25.4009 26.2191 25.2168 24.945 24.7831 23.7469C24.3493 22.5488 23.675 21.4522 22.8016 20.5244C21.9282 19.5966 20.8743 18.8573 19.7046 18.352C18.5349 17.8467 17.2742 17.586 16 17.586V17.585ZM16 1.203C7.828 1.203 1.203 7.828 1.203 16C1.203 20.03 2.815 23.685 5.429 26.354C5.672 21.779 8.82 17.976 13.062 16.753C12.0228 16.1131 11.2209 15.1516 10.778 14.0145C10.3351 12.8773 10.2754 11.6267 10.608 10.4526C10.9406 9.27843 11.6473 8.24491 12.6208 7.509C13.5943 6.7731 14.7814 6.37501 16.0018 6.37522C17.2221 6.37543 18.4091 6.77391 19.3823 7.51015C20.3556 8.24639 21.0619 9.28015 21.3941 10.4544C21.7263 11.6287 21.6662 12.8793 21.2229 14.0163C20.7796 15.1533 19.9774 16.1145 18.938 16.754C23.18 17.976 26.328 21.779 26.571 26.354C29.2842 23.5912 30.802 19.8723 30.797 16C30.797 7.828 24.172 1.203 16 1.203ZM16 7.621C15.4219 7.61225 14.8479 7.71854 14.3113 7.93369C13.7747 8.14885 13.2863 8.46857 12.8744 8.87426C12.4625 9.27994 12.1355 9.76349 11.9122 10.2968C11.6889 10.83 11.574 11.4024 11.574 11.9805C11.574 12.5586 11.6889 13.131 11.9122 13.6642C12.1355 14.1975 12.4625 14.6811 12.8744 15.0867C13.2863 15.4924 13.7747 15.8122 14.3113 16.0273C14.8479 16.2425 15.4219 16.3488 16 16.34C17.1448 16.3227 18.2368 15.8557 19.0402 15.0401C19.8436 14.2244 20.294 13.1254 20.294 11.9805C20.294 10.8356 19.8436 9.73663 19.0402 8.92095C18.2368 8.10527 17.1448 7.63834 16 7.621Z", fill: "currentColor" }) }));
 export default ProfileAvatarIcon;

package/dist/es/index.js

@@ -21,7 +21,6 @@ export * from './components/Button';
 export * from './components/ContextMenu';
 export * from './components/RadioButton';
 export { StyledRadioGroup, } from './components/RadioGroup';
-export * from './components/Avatar';
 export * from './components/Dialog';
 export * from './components/DraggableModal';
 export * from './components/Checkbox';

package/dist/es/mui/components/Avatar/Avatar.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import MuiAvatar from '@mui/material/Avatar';
+import { styled } from '@mui/material/styles';
+import { ProfileIcon } from '../../../components/icons';
+const INITIALS_PALETTE = [
+    '#1a9bc7',
+    '#31a056',
+    '#e65100',
+    '#6a1b9a',
+    '#c62828',
+    '#1565c0',
+    '#558b2f',
+    '#00695c',
+];
+const getInitials = (name) => {
+    const words = name.trim().split(/\s+/);
+    if (words.length === 1) {
+        return words[0].slice(0, 2).toUpperCase();
+    }
+    return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+};
+export const Avatar = ({ size, name, color, opacity = 1, src, alt, ...rest }) => {
+    const initials = name ? getInitials(name) : undefined;
+    const initialsBg = name
+        ? INITIALS_PALETTE[name.charCodeAt(0) % INITIALS_PALETTE.length]
+        : undefined;
+    return (_jsx(AvatarRoot, { ...rest, src: src, alt: alt ?? name, ownerState: { size, opacity, initialsBg, initials: !!initials, color }, children: initials ?? _jsx(ProfileIcon, { height: size, width: size }) }));
+};
+const AvatarRoot = styled(MuiAvatar)(({ theme, ownerState }) => ({
+    width: ownerState.size,
+    height: ownerState.size,
+    fontSize: Math.round(ownerState.size * 0.4),
+    opacity: ownerState.opacity,
+    backgroundColor: ownerState.initialsBg ?? 'transparent',
+    color: ownerState.initials
+        ? theme.palette.common.white
+        : ownerState.color || theme.palette.grey[700],
+    ...(!ownerState.initials && {
+        '&:hover': {
+            color: ownerState.color || theme.palette.info.main,
+        },
+    }),
+}));

package/dist/{types/components/SystemUserAvatar.d.ts → es/mui/components/Avatar/index.js}

@@ -1,5 +1,5 @@
 /*!
- * © 2019 Atypon Systems LLC
+ * © 2026 Atypon Systems LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -13,11 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
-interface SystemUserAvatarProps {
-    src?: string;
-    size: number;
-    color?: string;
-}
-export declare const Avatar: React.FC<SystemUserAvatarProps>;
-export {};
+export * from './Avatar';

package/dist/es/mui/components/Typography/Typography.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import MuiTypography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+const variantMap = {
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    body: 'body1',
+    caption: 'caption',
+};
+export const Typography = ({ variant = 'body', color = 'primary', fontWeight, italic, uppercase, clamp, ...rest }) => (_jsx(TypographyRoot, { ...rest, variant: variantMap[variant], ownerState: { color, fontWeight, italic, uppercase, clamp } }));
+const TypographyRoot = styled(MuiTypography)(({ theme, ownerState }) => {
+    const fontWeight = ownerState.fontWeight === undefined
+        ? undefined
+        : typeof ownerState.fontWeight === 'number'
+            ? ownerState.fontWeight
+            : {
+                regular: theme.typography.fontWeightRegular,
+                medium: theme.typography.fontWeightMedium,
+                bold: theme.typography.fontWeightBold,
+            }[ownerState.fontWeight];
+    return {
+        color: {
+            primary: theme.palette.text.primary,
+            secondary: theme.palette.text.secondary,
+            muted: theme.palette.text.disabled,
+        }[ownerState.color],
+        ...(fontWeight !== undefined && { fontWeight }),
+        ...(ownerState.italic && { fontStyle: 'italic' }),
+        ...(ownerState.uppercase && { textTransform: 'uppercase' }),
+        ...(ownerState.clamp && {
+            display: '-webkit-box',
+            overflow: 'hidden',
+            WebkitLineClamp: ownerState.clamp,
+            WebkitBoxOrient: 'vertical',
+        }),
+    };
+});

package/dist/{types/components/Avatar.d.ts → es/mui/components/Typography/index.js}

@@ -1,5 +1,5 @@
 /*!
- * © 2019 Atypon Systems LLC
+ * © 2026 Atypon Systems LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -13,13 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
-interface AvatarProps {
-    src?: string;
-    size: number;
-    color?: string;
-    opacity?: number;
-    name?: string;
-}
-export declare const Avatar: React.FC<AvatarProps>;
-export {};
+export * from './Typography';

package/dist/es/mui/index.js

@@ -14,7 +14,9 @@
  * limitations under the License.
  */
 export * from './theme';
+export * from './components/Avatar';
 export * from './components/Button';
 export * from './components/IconButton';
 export * from './components/InspectorToggleButton';
 export * from './components/ToggleButton';
+export * from './components/Typography';

package/dist/es/mui/theme/theme.js

@@ -25,10 +25,43 @@ export const muiTheme = createTheme({
         info: palette.info,
         grey: palette.grey,
         common: palette.common,
+        text: {
+            primary: palette.grey[900],
+            secondary: palette.grey[700],
+            disabled: palette.grey[400],
+        },
     },
     typography: {
         fontFamily: '"Lato", sans-serif',
         fontSize: 14,
+        fontWeightRegular: 400,
+        fontWeightMedium: 500,
+        fontWeightBold: 700,
+        h1: {
+            fontSize: '20px',
+            fontWeight: 700,
+            lineHeight: 1.25,
+        },
+        h2: {
+            fontSize: '18px',
+            fontWeight: 700,
+            lineHeight: '24px',
+        },
+        h3: {
+            fontSize: '16px',
+            fontWeight: 700,
+            lineHeight: '24px',
+        },
+        body1: {
+            fontSize: '14px',
+            fontWeight: 400,
+            lineHeight: '16px',
+        },
+        caption: {
+            fontSize: '12px',
+            fontWeight: 400,
+            lineHeight: '14px',
+        },
         button: {
             textTransform: 'none',
             fontWeight: 400,
@@ -61,6 +94,13 @@ export const muiTheme = createTheme({
                 },
             },
         },
+        MuiAvatar: {
+            styleOverrides: {
+                root: {
+                    fontWeight: 700,
+                },
+            },
+        },
         MuiIconButton: {
             styleOverrides: {
                 root: {

package/dist/types/index.d.ts

@@ -22,7 +22,6 @@ export * from './components/Button';
 export * from './components/ContextMenu';
 export * from './components/RadioButton';
 export { StyledRadioGroup, type StyledRadioGroupOption, type StyledRadioGroupProps, } from './components/RadioGroup';
-export * from './components/Avatar';
 export * from './components/Dialog';
 export * from './components/DraggableModal';
 export * from './components/Checkbox';

package/dist/types/mui/components/Avatar/Avatar.d.ts

@@ -0,0 +1,24 @@
+/*!
+ * © 2026 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { AvatarProps as MuiAvatarProps } from '@mui/material/Avatar';
+import React from 'react';
+export interface AvatarProps extends Omit<MuiAvatarProps, 'children' | 'color'> {
+    size: number;
+    name?: string;
+    color?: string;
+    opacity?: number;
+}
+export declare const Avatar: ({ size, name, color, opacity, src, alt, ...rest }: AvatarProps) => React.JSX.Element;

package/dist/types/mui/components/Avatar/index.d.ts

@@ -0,0 +1,16 @@
+/*!
+ * © 2026 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './Avatar';

package/dist/types/mui/components/Typography/Typography.d.ts

@@ -0,0 +1,29 @@
+/*!
+ * © 2026 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { TypographyProps as MuiTypographyProps } from '@mui/material/Typography';
+import React from 'react';
+export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption';
+export type TypographyColor = 'primary' | 'secondary' | 'muted';
+export type TypographyFontWeight = 'regular' | 'medium' | 'bold' | number;
+export interface TypographyProps extends Omit<MuiTypographyProps, 'variant' | 'color'> {
+    variant?: TypographyVariant;
+    color?: TypographyColor;
+    fontWeight?: TypographyFontWeight;
+    italic?: boolean;
+    uppercase?: boolean;
+    clamp?: 2 | 3;
+}
+export declare const Typography: ({ variant, color, fontWeight, italic, uppercase, clamp, ...rest }: TypographyProps) => React.JSX.Element;

package/dist/types/mui/components/Typography/index.d.ts

@@ -0,0 +1,16 @@
+/*!
+ * © 2026 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './Typography';

package/dist/types/mui/index.d.ts

@@ -14,7 +14,9 @@
  * limitations under the License.
  */
 export * from './theme';
+export * from './components/Avatar';
 export * from './components/Button';
 export * from './components/IconButton';
 export * from './components/InspectorToggleButton';
 export * from './components/ToggleButton';
+export * from './components/Typography';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "3.8.1",
+  "version": "3.8.3",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",

package/dist/cjs/components/Avatar.js

@@ -1,73 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const styled_components_1 = __importDefault(require("styled-components"));
-const icons_1 = require("./icons");
-const INITIALS_PALETTE = [
-    '#1a9bc7',
-    '#31a056',
-    '#e65100',
-    '#6a1b9a',
-    '#c62828',
-    '#1565c0',
-    '#558b2f',
-    '#00695c',
-];
-const getInitials = (name) => {
-    const words = name.trim().split(/\s+/);
-    if (words.length === 1) {
-        return words[0].slice(0, 2).toUpperCase();
-    }
-    return (words[0][0] + words[words.length - 1][0]).toUpperCase();
-};
-const AvatarContainer = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  opacity: ${(props) => props.$opacity};
-`;
-const RoundedImage = styled_components_1.default.img `
-  width: ${(props) => props.$size}px;
-  height: ${(props) => props.$size}px;
-  border-radius: 50%;
-  align-items: center;
-  justify-content: center;
-`;
-const StyledAvatar = (0, styled_components_1.default)(icons_1.ProfileIcon) `
-  path {
-    fill: ${(props) => props.$color || props.theme.colors.text.secondary};
-  }
-
-  &:hover path {
-    fill: ${(props) => props.$color || props.theme.colors.text.info};
-  }
-`;
-const InitialsCircle = styled_components_1.default.div `
-  width: ${(props) => props.$size}px;
-  height: ${(props) => props.$size}px;
-  border-radius: 50%;
-  background: ${(props) => props.$bg};
-  color: #ffffff;
-  font-weight: bold;
-  font-size: ${(props) => Math.round(props.$size * 0.4)}px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-  flex-shrink: 0;
-`;
-const Avatar = (props) => {
-    const [srcError, setSrcError] = (0, react_1.useState)(false);
-    const handleSrcError = (0, react_1.useCallback)(() => {
-        setSrcError(true);
-    }, []);
-    const showInitials = (!props.src || srcError) && !!props.name;
-    return ((0, jsx_runtime_1.jsx)(AvatarContainer, { "$opacity": props.opacity || 1, children: props.src && !srcError ? ((0, jsx_runtime_1.jsx)(RoundedImage, { src: props.src, "$size": props.size, onError: handleSrcError })) : showInitials ? ((0, jsx_runtime_1.jsx)(InitialsCircle, { "$size": props.size, "$bg": INITIALS_PALETTE[props.name.charCodeAt(0) % INITIALS_PALETTE.length], children: getInitials(props.name) })) : ((0, jsx_runtime_1.jsx)(StyledAvatar, { height: props.size, width: props.size, "$color": props.color })) }));
-};
-exports.Avatar = Avatar;

package/dist/cjs/components/SystemUserAvatar.js

@@ -1,40 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const styled_components_1 = __importDefault(require("styled-components"));
-const icons_1 = require("./icons");
-const SystemUserAvatarContainer = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-`;
-const RoundedImage = styled_components_1.default.img `
-  width: ${(props) => props.$size}px;
-  height: ${(props) => props.$size}px;
-  border-radius: 50%;
-  align-items: center;
-  justify-content: center;
-`;
-const StyledAvatar = (0, styled_components_1.default)(icons_1.SystemUserAvatarIcon) `
-  path {
-    fill: ${(props) => props.$color || props.theme.colors.text.secondary};
-  }
-
-  &:hover path {
-    fill: ${(props) => props.$color || props.theme.colors.text.info};
-  }
-`;
-const Avatar = (props) => {
-    const [srcError, setSrcError] = (0, react_1.useState)(false);
-    const handleSrcError = (0, react_1.useCallback)(() => {
-        setSrcError(true);
-    }, []);
-    return ((0, jsx_runtime_1.jsx)(SystemUserAvatarContainer, { children: props.src && !srcError ? ((0, jsx_runtime_1.jsx)(RoundedImage, { src: props.src, "$size": props.size, onError: handleSrcError })) : ((0, jsx_runtime_1.jsx)(StyledAvatar, { height: props.size, width: props.size, "$color": props.color })) }));
-};
-exports.Avatar = Avatar;

package/dist/es/components/Avatar.js

@@ -1,66 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
-import styled from 'styled-components';
-import { ProfileIcon } from './icons';
-const INITIALS_PALETTE = [
-    '#1a9bc7',
-    '#31a056',
-    '#e65100',
-    '#6a1b9a',
-    '#c62828',
-    '#1565c0',
-    '#558b2f',
-    '#00695c',
-];
-const getInitials = (name) => {
-    const words = name.trim().split(/\s+/);
-    if (words.length === 1) {
-        return words[0].slice(0, 2).toUpperCase();
-    }
-    return (words[0][0] + words[words.length - 1][0]).toUpperCase();
-};
-const AvatarContainer = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  opacity: ${(props) => props.$opacity};
-`;
-const RoundedImage = styled.img `
-  width: ${(props) => props.$size}px;
-  height: ${(props) => props.$size}px;
-  border-radius: 50%;
-  align-items: center;
-  justify-content: center;
-`;
-const StyledAvatar = styled(ProfileIcon) `
-  path {
-    fill: ${(props) => props.$color || props.theme.colors.text.secondary};
-  }
-
-  &:hover path {
-    fill: ${(props) => props.$color || props.theme.colors.text.info};
-  }
-`;
-const InitialsCircle = styled.div `
-  width: ${(props) => props.$size}px;
-  height: ${(props) => props.$size}px;
-  border-radius: 50%;
-  background: ${(props) => props.$bg};
-  color: #ffffff;
-  font-weight: bold;
-  font-size: ${(props) => Math.round(props.$size * 0.4)}px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-  flex-shrink: 0;
-`;
-export const Avatar = (props) => {
-    const [srcError, setSrcError] = useState(false);
-    const handleSrcError = useCallback(() => {
-        setSrcError(true);
-    }, []);
-    const showInitials = (!props.src || srcError) && !!props.name;
-    return (_jsx(AvatarContainer, { "$opacity": props.opacity || 1, children: props.src && !srcError ? (_jsx(RoundedImage, { src: props.src, "$size": props.size, onError: handleSrcError })) : showInitials ? (_jsx(InitialsCircle, { "$size": props.size, "$bg": INITIALS_PALETTE[props.name.charCodeAt(0) % INITIALS_PALETTE.length], children: getInitials(props.name) })) : (_jsx(StyledAvatar, { height: props.size, width: props.size, "$color": props.color })) }));
-};

package/dist/es/components/SystemUserAvatar.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
-import styled from 'styled-components';
-import { SystemUserAvatarIcon } from './icons';
-const SystemUserAvatarContainer = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-`;
-const RoundedImage = styled.img `
-  width: ${(props) => props.$size}px;
-  height: ${(props) => props.$size}px;
-  border-radius: 50%;
-  align-items: center;
-  justify-content: center;
-`;
-const StyledAvatar = styled(SystemUserAvatarIcon) `
-  path {
-    fill: ${(props) => props.$color || props.theme.colors.text.secondary};
-  }
-
-  &:hover path {
-    fill: ${(props) => props.$color || props.theme.colors.text.info};
-  }
-`;
-export const Avatar = (props) => {
-    const [srcError, setSrcError] = useState(false);
-    const handleSrcError = useCallback(() => {
-        setSrcError(true);
-    }, []);
-    return (_jsx(SystemUserAvatarContainer, { children: props.src && !srcError ? (_jsx(RoundedImage, { src: props.src, "$size": props.size, onError: handleSrcError })) : (_jsx(StyledAvatar, { height: props.size, width: props.size, "$color": props.color })) }));
-};