@manuscripts/style-guide 3.6.2 → 3.6.4

package/dist/es/components/SelectedItemsBox.js

@@ -36,10 +36,10 @@ const Item = styled.div `
   display: flex;
   align-items: center;
   gap: 4px;
-  background: ${(props) => (props.disabled ? '#dddcdc' : '#f2f2f2')};
+  background: ${(props) => (props.$disabled ? '#dddcdc' : '#f2f2f2')};
   border-radius: 6px;
   padding: 4px;
-  color: ${(props) => props.disabled ? '#707070' : props.theme.colors.text.primary};
+  color: ${(props) => props.$disabled ? '#707070' : props.theme.colors.text.primary};
   font: ${(props) => props.theme.font.weight.normal}
     ${(props) => props.theme.font.size.small}
     ${(props) => props.theme.font.family.sans};
@@ -65,6 +65,6 @@ const RemoveButton = styled.button `
   }
 `;
 export const SelectedItemsBox = ({ items, onRemove, placeholder = 'No items selected', ...props }) => {
-    return (_jsx(BoxContainer, { ...props, children: items.length > 0 ? (_jsx(ItemsList, { children: items.map((item) => (_jsxs(Item, { "data-cy": "item", disabled: !!props.disabled, children: [item.label, !props.disabled && (_jsx(RemoveButton, { onClick: () => onRemove(item.id), "aria-label": `Remove ${item.label}`, children: "x" }))] }, item.id))) })) : (_jsx(EmptyContainer, { children: _jsx(Placeholder, { children: placeholder }) })) }));
+    return (_jsx(BoxContainer, { ...props, children: items.length > 0 ? (_jsx(ItemsList, { children: items.map((item) => (_jsxs(Item, { "data-cy": "item", "$disabled": !!props.disabled, children: [item.label, !props.disabled && (_jsx(RemoveButton, { onClick: () => onRemove(item.id), "aria-label": `Remove ${item.label}`, children: "x" }))] }, item.id))) })) : (_jsx(EmptyContainer, { children: _jsx(Placeholder, { children: placeholder }) })) }));
 };
 export default SelectedItemsBox;

package/dist/es/components/StyledModal.js

@@ -141,8 +141,8 @@ export const CloseButton = styled(RoundIconButton) `
   text-indent: -99999px;
   z-index: 2;
 
-  ::before,
-  ::after {
+  &::before,
+  &::after {
     background-color: ${(props) => props.theme.colors.text.secondary};
     border-radius: 2px;
     content: ' ';
@@ -154,7 +154,7 @@ export const CloseButton = styled(RoundIconButton) `
     top: calc(50% - 7px);
     left: calc(50% - 1px);
   }
-  ::after {
+  &::after {
     transform: rotate(45deg);
   }
 `;
@@ -204,10 +204,10 @@ export const ModalCardBody = styled.div `
   box-sizing: border-box;
   padding: ${(props) => 6 * props.theme.grid.unit}px;
   background-color: ${(props) => props.theme.colors.background.primary};
-  width: ${(props) => props.width
-    ? typeof props.width === 'number'
-        ? `${props.width}px`
-        : props.width
+  width: ${(props) => props.$width
+    ? typeof props.$width === 'number'
+        ? `${props.$width}px`
+        : props.$width
     : '640px'};
   max-width: 60vw;
   max-height: 80vh;

package/dist/es/components/SystemUserAvatar.js

@@ -9,19 +9,19 @@ const SystemUserAvatarContainer = styled.div `
   position: relative;
 `;
 const RoundedImage = styled.img `
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
+  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};
+    fill: ${(props) => props.$color || props.theme.colors.text.secondary};
   }
 
   &:hover path {
-    fill: ${(props) => props.color || props.theme.colors.text.info};
+    fill: ${(props) => props.$color || props.theme.colors.text.info};
   }
 `;
 export const Avatar = (props) => {
@@ -29,5 +29,5 @@ export const Avatar = (props) => {
     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 })) }));
+    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 })) }));
 };

package/dist/es/components/TextField.js

@@ -3,7 +3,7 @@ import { Field } from 'formik';
 import styled, { css } from 'styled-components';
 export const commonStyles = css `
   border: 1px solid
-    ${(props) => props.error
+    ${(props) => props.$error
     ? props.theme.colors.border.error
     : props.theme.colors.border.field.default};
   border-radius: 3px;
@@ -14,19 +14,19 @@ export const commonStyles = css `
   line-height: ${(props) => props.theme.font.lineHeight.large};
   outline: none;
   padding: ${(props) => {
-    if (props.variant === 'small') {
+    if (props.$variant === 'small') {
         return '0 12px';
     }
-    if (props.variant === 'large') {
+    if (props.$variant === 'large') {
         return '4px 16px';
     }
     return '0 12px';
 }};
   min-height: ${(props) => {
-    if (props.variant === 'small') {
+    if (props.$variant === 'small') {
         return '32px';
     }
-    if (props.variant === 'large') {
+    if (props.$variant === 'large') {
         return '40px';
     }
     return '40px';
@@ -53,13 +53,13 @@ export const commonStyles = css `
 
   &:focus:not(:disabled) {
     border: 2px solid
-      ${(props) => props.error
+      ${(props) => props.$error
     ? props.theme.colors.border.error
     : props.theme.colors.brand.default};
     background-color: #f2fbfc;
-    ${(props) => props.variant &&
+    ${(props) => props.$variant &&
     css `
-        padding: ${(props) => props.variant === 'small' ? '0 11px' : '3px 15px'};
+        padding: ${(props) => props.$variant === 'small' ? '0 11px' : '3px 15px'};
       `}
   }
 

package/dist/es/components/ToggleSwitch.js

@@ -6,8 +6,8 @@ const Track = styled.button `
   height: 16px;
   border-radius: 999px;
   border: 1px solid
-    ${(props) => props.checked ? '#0d79d0' : props.theme.colors.text.secondary};
-  background: ${(props) => props.checked ? '#0d79d0' : props.theme.colors.text.secondary};
+    ${(props) => props.$checked ? '#0d79d0' : props.theme.colors.text.secondary};
+  background: ${(props) => props.$checked ? '#0d79d0' : props.theme.colors.text.secondary};
   padding: 0;
   cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
   transition:
@@ -29,7 +29,7 @@ const Track = styled.button `
 const Thumb = styled.span `
   position: absolute;
   top: 0;
-  left: ${(props) => (props.checked ? '14px' : '0px')};
+  left: ${(props) => (props.$checked ? '14px' : '0px')};
   width: 14px;
   height: 14px;
   border-radius: 50%;
@@ -37,14 +37,14 @@ const Thumb = styled.span `
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   transition: left 120ms ease;
 
-  ${(props) => props.disabled &&
+  ${(props) => props.$disabled &&
     `
     background: #fdfdfd;
     box-shadow: none;
   `}
 `;
 const LabelText = styled.span `
-  color: ${(props) => props.disabled ? '#b3b3b3' : props.theme.colors.text.primary};
+  color: ${(props) => props.$disabled ? '#b3b3b3' : props.theme.colors.text.primary};
   font: ${(props) => props.theme.font.weight.normal}
     ${(props) => props.theme.font.size.medium} / 1
     ${(props) => props.theme.font.family.sans};
@@ -55,8 +55,8 @@ const Container = styled.label `
   align-items: center;
   gap: 8px;
   cursor: pointer;
-  flex-direction: ${(props) => props.labelPosition === 'left' ? 'row' : 'row-reverse'};
+  flex-direction: ${(props) => props.$labelPosition === 'left' ? 'row' : 'row-reverse'};
 `;
 export const ToggleSwitch = ({ checked, disabled, onChange, label, id, labelPosition = 'left', }) => {
-    return (_jsxs(Container, { labelPosition: labelPosition, children: [label && _jsx(LabelText, { disabled: disabled, children: label }), _jsx(Track, { id: id, type: "button", role: "switch", "aria-checked": checked, "aria-label": label, checked: checked, disabled: disabled, onClick: () => !disabled && onChange(!checked), children: _jsx(Thumb, { checked: checked, disabled: disabled }) })] }));
+    return (_jsxs(Container, { "$labelPosition": labelPosition, children: [label && _jsx(LabelText, { "$disabled": disabled, children: label }), _jsx(Track, { id: id, type: "button", role: "switch", "aria-checked": checked, "aria-label": label, "$checked": checked, disabled: disabled, onClick: () => !disabled && onChange(!checked), children: _jsx(Thumb, { "$checked": checked, "$disabled": disabled }) })] }));
 };

package/dist/es/components/icons/camera.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CameraIcon = (props) => (_jsxs("svg", { width: "23", height: "23", viewBox: "0 0 23 23", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsxs("g", { clipPath: "url(#clip0_41915_16038)", children: [_jsx("path", { d: "M20.9086 8.33386C20.9086 8.05391 20.7984 7.785 20.6023 7.58704C20.4063 7.38925 20.1405 7.2778 19.8634 7.2778H16.727C16.4168 7.2778 16.1224 7.13886 15.9238 6.89821L13.6236 4.11117H9.37617L7.07596 6.89821C6.87739 7.1388 6.58291 7.27772 6.27273 7.2778H3.13637C2.85909 7.2778 2.59275 7.38909 2.39669 7.58704C2.20062 7.785 2.0904 8.05391 2.0904 8.33386V17.8338C2.09047 18.1136 2.20076 18.3819 2.39669 18.5798C2.59275 18.7778 2.85909 18.889 3.13637 18.889H19.8634C20.1406 18.889 20.4063 18.7777 20.6023 18.5798C20.7983 18.3819 20.9085 18.1136 20.9086 17.8338V8.33386ZM22.9998 17.8338C22.9997 18.6735 22.669 19.4789 22.0809 20.0727C21.4927 20.6664 20.6951 21.0004 19.8634 21.0004H3.13637C2.30455 21.0004 1.50627 20.6665 0.918091 20.0727C0.330049 19.4789 6.73245e-05 18.6734 0 17.8338V8.33386C0 7.49402 0.329909 6.68804 0.918091 6.09418C1.50627 5.50032 2.30455 5.16723 3.13637 5.16723H5.78267L8.08288 2.38019C8.28151 2.13953 8.57584 2.0006 8.88611 2.0006H14.1136L14.2285 2.00678C14.4955 2.03663 14.743 2.16953 14.9169 2.38019L17.2171 5.16723H19.8634C20.6951 5.16723 21.4927 5.50048 22.0809 6.09418C22.6691 6.68804 22.9998 7.49402 22.9998 8.33386V17.8338Z", fill: "#6E6E6E" }), _jsx("path", { d: "M13.7503 12.5005C13.7503 11.2578 12.7427 10.2501 11.5 10.2501C10.2572 10.2501 9.24956 11.2578 9.24956 12.5005C9.24956 13.7432 10.2572 14.7509 11.5 14.7509C12.7427 14.7509 13.7503 13.7432 13.7503 12.5005ZM15.9999 12.5005C15.9999 14.9859 13.9854 17.0004 11.5 17.0004C9.01455 17.0004 7 14.9859 7 12.5005C7 10.0151 9.01455 8.00053 11.5 8.00053C13.9854 8.00053 15.9999 10.0151 15.9999 12.5005Z", fill: "#6E6E6E" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_41915_16038", children: _jsx("rect", { width: "23", height: "23", fill: "white" }) }) })] }));
+export default CameraIcon;

package/dist/es/components/icons/file-headshot-grid.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FileHeadshotGridIcon = (props) => (_jsxs("svg", { width: "23", height: "25", viewBox: "0 0 28 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.9862 15.4873C19.2694 15.0131 19.8833 14.8583 20.3575 15.1414C22.1323 16.2011 23.1794 16.6419 23.9682 16.9739C24.034 17.0015 24.0979 17.0285 24.1603 17.0549C25.0486 17.4313 25.7019 17.7479 26.6165 18.6815C27.2075 19.2847 27.518 20.1508 27.6977 20.9473C27.8839 21.7727 27.9622 22.6777 27.9887 23.4955C28.0154 24.3188 27.9904 25.0847 27.9592 25.6427C27.9435 25.9226 27.9261 26.1524 27.9125 26.3134C27.9057 26.394 27.8999 26.4575 27.8956 26.5017L27.8905 26.5531L27.8891 26.5675L27.8886 26.5717L27.8885 26.5731C27.8885 26.5731 27.8884 26.5739 26.894 26.4678L27.8885 26.5731C27.8775 26.6756 27.8507 26.7768 27.8091 26.8712C27.4529 27.6792 26.5926 28.174 25.7912 28.5021C24.9244 28.857 23.8215 29.1359 22.5958 29.3528C20.1361 29.788 17.021 30.0005 13.9357 30C10.8507 29.9995 7.74558 29.786 5.3064 29.3502C4.09138 29.1332 2.99947 28.8537 2.14625 28.4974C1.71919 28.3191 1.32064 28.1087 0.988942 27.8549C0.660797 27.6039 0.34607 27.2703 0.174677 26.8321C0.142268 26.7492 0.121063 26.6624 0.111622 26.5739L1.10598 26.4678C0.111622 26.5739 0.111622 26.5739 0.111622 26.5739L0.110943 26.5675L0.109469 26.5531L0.104391 26.5017C0.100144 26.4575 0.0942807 26.394 0.087482 26.3134C0.0738923 26.1524 0.0565193 25.9226 0.0408442 25.6427C0.00959061 25.0847 -0.0153945 24.3188 0.0112962 23.4955C0.037812 22.6777 0.11614 21.7727 0.302337 20.9473C0.482002 20.1508 0.792497 19.2847 1.38351 18.6815C2.29812 17.7479 2.9514 17.4313 3.83966 17.0549C3.90209 17.0285 3.96604 17.0015 4.03179 16.9739C4.82062 16.6419 5.86772 16.2011 7.64251 15.1414C8.1167 14.8583 8.73063 15.0131 9.01377 15.4873C9.2969 15.9615 9.14203 16.5755 8.66784 16.8586C6.77439 17.9892 5.62945 18.4712 4.81031 18.8161C4.74488 18.8436 4.68154 18.8703 4.62005 18.8964C3.86557 19.2161 3.47386 19.4057 2.81213 20.0811C2.61497 20.2824 2.4074 20.7043 2.25332 21.3874C2.10576 22.0415 2.03465 22.8077 2.01025 23.5603C1.98602 24.3076 2.00864 25.0117 2.03772 25.5309C2.05221 25.7897 2.06818 26.0005 2.0804 26.1452C2.08077 26.1496 2.08114 26.154 2.0815 26.1582C2.10713 26.1855 2.14608 26.222 2.2042 26.2665C2.35475 26.3816 2.58659 26.5139 2.917 26.6519C3.57872 26.9283 4.51009 27.1763 5.65813 27.3814C7.94505 27.79 10.9252 27.9995 13.936 28C16.9467 28.0005 19.9381 27.792 22.2473 27.3834C23.4061 27.1784 24.3531 26.9297 25.0334 26.6512C25.373 26.5122 25.6169 26.3774 25.7797 26.2573C25.845 26.209 25.8899 26.1687 25.9202 26.1376C25.9324 25.9931 25.948 25.7851 25.9623 25.5309C25.9914 25.0117 26.014 24.3076 25.9898 23.5603C25.9653 22.8077 25.8942 22.0415 25.7467 21.3874C25.5926 20.7043 25.385 20.2824 25.1879 20.0811C24.5261 19.4057 24.1344 19.2161 23.38 18.8964C23.3185 18.8703 23.2551 18.8436 23.1897 18.8161C22.3706 18.4712 21.2256 17.9892 19.3322 16.8586C18.858 16.5755 18.7031 15.9615 18.9862 15.4873Z", fill: "#4F4F4F" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14 14C17.3137 14 20 11.3137 20 8C20 4.68629 17.3137 2 14 2C10.6863 2 8 4.68629 8 8C8 11.3137 10.6863 14 14 14ZM14 16C18.4183 16 22 12.4183 22 8C22 3.58172 18.4183 0 14 0C9.58172 0 6 3.58172 6 8C6 12.4183 9.58172 16 14 16Z", fill: "#4F4F4F" })] }));
+export default FileHeadshotGridIcon;

package/dist/es/components/icons/index.js

@@ -37,6 +37,7 @@ export { default as AuthorPlaceholderIcon } from './author-placeholder';
 export { default as AffiliationPlaceholderIcon } from './affiliation-placeholder';
 export { default as BookIcon } from './book';
 export { default as CalendarIcon } from './calendar';
+export { default as CameraIcon } from './camera';
 export { default as ChatIcon } from './chat';
 export { default as SystemUserAvatarIcon } from './system-user-avatar';
 export { default as CitationCountIcon } from './citation-count';
@@ -57,6 +58,7 @@ export { default as FileCorruptedIcon } from './file-corrupted';
 export { default as FileDocumentIcon } from './file-document';
 export { default as FileFigureIcon } from './file-figure';
 export { default as FileGraphicalAbstractIcon } from './file-graphical-abstract';
+export { default as FileHeadshotGridIcon } from './file-headshot-grid';
 export { default as FileImageIcon } from './file-image';
 export { default as FileLatexIcon } from './file-latex-icon';
 export { default as FileMainDocumentIcon } from './file-main-document';

package/dist/es/lib/files.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { FileAudioIcon, FileCodeIcon, FileCompressedIcon, FileDocumentIcon, FileFigureIcon, FileGraphicalAbstractIcon, FileImageIcon, FileLatexIcon, FilePdfIcon, FileTableIcon, FileUnknownIcon, FileVideoIcon, } from '../components/icons';
+import { FileAudioIcon, FileCodeIcon, FileCompressedIcon, FileDocumentIcon, FileFigureIcon, FileGraphicalAbstractIcon, FileHeadshotGridIcon, FileImageIcon, FileLatexIcon, FilePdfIcon, FileTableIcon, FileUnknownIcon, FileVideoIcon, } from '../components/icons';
 export var FileType;
 (function (FileType) {
     FileType[FileType["Image"] = 0] = "Image";
@@ -14,6 +14,7 @@ export var FileType;
     FileType[FileType["PlainText"] = 9] = "PlainText";
     FileType[FileType["Figure"] = 10] = "Figure";
     FileType[FileType["GraphicalAbstract"] = 11] = "GraphicalAbstract";
+    FileType[FileType["HeadshotGrid"] = 12] = "HeadshotGrid";
 })(FileType || (FileType = {}));
 const extension2type = new Map([
     ['png', FileType.Image],
@@ -100,6 +101,10 @@ const type2icon = new Map([
         FileType.GraphicalAbstract,
         _jsx(FileGraphicalAbstractIcon, { className: "file-icon" }, FileType.GraphicalAbstract),
     ],
+    [
+        FileType.HeadshotGrid,
+        _jsx(FileHeadshotGridIcon, { className: "file-icon" }, FileType.HeadshotGrid),
+    ],
     [undefined, _jsx(FileUnknownIcon, { className: "file-icon" }, undefined)],
 ]);
 export const getFileType = (name) => {

package/dist/types/components/Button.d.ts

@@ -17,99 +17,88 @@ export declare const outlineStyle: import("styled-components").FlattenInterpolat
 export declare const SecondaryButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 }, "type">;
 export declare const PrimaryButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 }, "type">;
 export declare const LoginButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 }, "type">;
 export declare const TertiaryButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 }, "type">;
 export declare const IconTextButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 }, "type">;
 export declare const ToggleButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 } & {
-    selected?: boolean;
+    $selected?: boolean;
 }, "type">;
 export declare const ToggleButtonAlt: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 } & {
-    selected?: boolean;
+    $selected?: boolean;
 }, "type">;
 export declare const IconButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 } & {
-    defaultColor?: boolean;
-    size?: number;
-    iconColor?: string;
+    $defaultColor?: boolean;
+    $size?: number;
+    $iconColor?: string;
 }, "type">;
 export declare const RoundIconButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 } & {
-    defaultColor?: boolean;
-    size?: number;
-    iconColor?: string;
+    $defaultColor?: boolean;
+    $size?: number;
+    $iconColor?: string;
 } & {
-    defaultColor: boolean;
-}, "type" | "defaultColor">;
+    $defaultColor: boolean;
+}, "type" | "$defaultColor">;
 export declare const SecondaryIconButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 } & {
-    defaultColor?: boolean;
-    size?: number;
-    iconColor?: string;
+    $defaultColor?: boolean;
+    $size?: number;
+    $iconColor?: string;
 }, "type">;
 export declare const ButtonGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const IconButtonGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    size?: number;
+    $size?: number;
 }, never>;
 export declare const TextButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 }, "type">;

package/dist/types/components/Checkbox.d.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 export declare const CheckboxLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
-    disabled?: boolean;
+    $disabled?: boolean;
 }, never>;
 export declare const CheckboxField: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
     type: "checkbox";

package/dist/types/components/DateInput.d.ts

@@ -15,8 +15,8 @@
  */
 import React from 'react';
 export interface BaseDateInputProps {
-    error?: boolean | string;
-    variant?: 'small' | 'large';
+    $error?: boolean | string;
+    $variant?: 'small' | 'large';
 }
 export interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>, BaseDateInputProps {
 }

package/dist/types/components/Dropdown.d.ts

@@ -1,10 +1,8 @@
 export declare const DropdownList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    'data-cy': string;
-} & {
-    direction?: "left" | "right";
-    width?: number;
-    height?: number;
-    top?: number;
-}, "data-cy">;
+    $direction?: "left" | "right";
+    $width?: number;
+    $height?: number;
+    $top?: number;
+}, never>;
 export declare const DropdownContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const DropdownButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;

package/dist/types/components/Form.d.ts

@@ -26,9 +26,9 @@ export interface ErrorProps {
 export declare const FormContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const FormField: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const FormRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    direction?: "row" | "column";
-    justify?: string;
-    align?: string;
+    $direction?: "row" | "column";
+    $justify?: string;
+    $align?: string;
 }, never>;
 export declare const FormLabel: import("styled-components").StyledComponent<"legend", import("styled-components").DefaultTheme, {}, never>;
 export declare const FormActionsBar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/types/components/NavDropdown.d.ts

@@ -17,33 +17,30 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 export declare const NavDropdownContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const NavDropdown: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    direction?: "left" | "right";
-    minWidth?: number;
-    top?: number;
+    $direction?: "left" | "right";
+    $minWidth?: number;
+    $top?: number;
 }, never>;
 export declare const InvitedBy: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const NavDropdownLink: import("styled-components").StyledComponent<typeof NavLink, import("styled-components").DefaultTheme, {
-    disabled?: boolean;
+    $disabled?: boolean;
 }, never>;
 export declare const NavDropdownElement: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    disabled?: boolean;
+    $disabled?: boolean;
 }, never>;
 export declare const NavDropdownSeparator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const NavDropdownButtonText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 interface DropdownProps {
-    isOpen: boolean;
+    $isOpen: boolean;
 }
 export declare const NavDropdownToggle: import("styled-components").StyledComponent<React.FC<import("./icons/types").IconProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const NotificationsBadge: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, DropdownProps, never>;
 export declare const NavDropdownButtonContainer: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
-} & {
-    selected: boolean;
-} & DropdownProps, "type" | "selected">;
+    $danger?: boolean;
+    $mini?: boolean;
+} & DropdownProps, "type">;
 interface DropdownButtonProps {
     as?: React.FunctionComponent<any>;
     disabled?: boolean;

package/dist/types/components/Resizer/ResizerButtonInner.d.ts

@@ -1,6 +1,6 @@
 export interface ResizerButtonInnerProps {
-    isCollapsed: boolean;
-    isVisible: boolean;
+    $isCollapsed: boolean;
+    $isVisible: boolean;
 }
 export declare const HorizontalEndResizerButtonInner: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, ResizerButtonInnerProps, never>;
 export declare const HorizontalStartResizerButtonInner: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, ResizerButtonInnerProps, never>;

package/dist/types/components/StyledModal.d.ts

@@ -35,18 +35,17 @@ export declare const ModalHeader: import("styled-components").StyledComponent<"d
 export declare const CloseButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 } & {
-    defaultColor?: boolean;
-    size?: number;
-    iconColor?: string;
+    $defaultColor?: boolean;
+    $size?: number;
+    $iconColor?: string;
 } & {
-    defaultColor: boolean;
+    $defaultColor: boolean;
 } & {
     size?: number;
-}, "type" | "defaultColor">;
+}, "type" | "$defaultColor">;
 export declare const ModalBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ModalSidebar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ModalSidebarHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -54,7 +53,7 @@ export declare const ModalSidebarTitle: import("styled-components").StyledCompon
 export declare const ModelContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ScrollableModalContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ModalCardBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    width?: number | string;
+    $width?: number | string;
 }, never>;
 export declare const ModalTitle: import("styled-components").StyledComponent<"h2", import("styled-components").DefaultTheme, {}, never>;
 export {};

package/dist/types/components/TextField.d.ts

@@ -16,8 +16,8 @@
 import { Field } from 'formik';
 import React from 'react';
 export interface BaseTextFieldProps {
-    error?: boolean | string;
-    variant?: 'small' | 'large';
+    $error?: boolean | string;
+    $variant?: 'small' | 'large';
 }
 export interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement>, BaseTextFieldProps {
 }

package/dist/types/components/icons/camera.d.ts

@@ -0,0 +1,19 @@
+/*!
+ * © 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 React from 'react';
+import { IconProps } from './types';
+export declare const CameraIcon: React.FC<IconProps>;
+export default CameraIcon;

package/dist/types/components/icons/file-headshot-grid.d.ts

@@ -0,0 +1,19 @@
+/*!
+ * © 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 React from 'react';
+import { IconProps } from './types';
+declare const FileHeadshotGridIcon: React.FC<IconProps>;
+export default FileHeadshotGridIcon;

package/dist/types/components/icons/index.d.ts

@@ -37,6 +37,7 @@ export { default as AuthorPlaceholderIcon } from './author-placeholder';
 export { default as AffiliationPlaceholderIcon } from './affiliation-placeholder';
 export { default as BookIcon } from './book';
 export { default as CalendarIcon } from './calendar';
+export { default as CameraIcon } from './camera';
 export { default as ChatIcon } from './chat';
 export { default as SystemUserAvatarIcon } from './system-user-avatar';
 export { default as CitationCountIcon } from './citation-count';
@@ -57,6 +58,7 @@ export { default as FileCorruptedIcon } from './file-corrupted';
 export { default as FileDocumentIcon } from './file-document';
 export { default as FileFigureIcon } from './file-figure';
 export { default as FileGraphicalAbstractIcon } from './file-graphical-abstract';
+export { default as FileHeadshotGridIcon } from './file-headshot-grid';
 export { default as FileImageIcon } from './file-image';
 export { default as FileLatexIcon } from './file-latex-icon';
 export { default as FileMainDocumentIcon } from './file-main-document';

package/dist/types/lib/files.d.ts

@@ -11,7 +11,8 @@ export declare enum FileType {
     CompressedFile = 8,
     PlainText = 9,
     Figure = 10,
-    GraphicalAbstract = 11
+    GraphicalAbstract = 11,
+    HeadshotGrid = 12
 }
 export declare const getFileType: (name: string) => FileType | undefined;
 export declare const getFileIcon: (name: string) => React.ReactNode;

package/package.json

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