@manuscripts/style-guide 3.6.6 → 3.7.1

package/dist/cjs/components/ExpandableSection.js

@@ -8,7 +8,7 @@ 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 ExpandableSection = ({ title, children, defaultOpen = true, bordered = false, }) => {
+const ExpandableSection = ({ title, children, defaultOpen = true, bordered = false, className, icon: Icon, }) => {
     const [open, setOpen] = (0, react_1.useState)(defaultOpen);
     const handleKeyDown = (e) => {
         if (e.key === 'Enter' || e.key === ' ') {
@@ -16,7 +16,7 @@ const ExpandableSection = ({ title, children, defaultOpen = true, bordered = fal
             setOpen((prev) => !prev);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Container, { bordered: bordered, children: [(0, jsx_runtime_1.jsxs)(Header, { onClick: () => setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-expanded": open, children: [(0, jsx_runtime_1.jsx)(Title, { children: title }), (0, jsx_runtime_1.jsx)(ArrowIcon, { "$open": open })] }), (0, jsx_runtime_1.jsx)(ContentOuter, { "$open": open, inert: !open || undefined, children: (0, jsx_runtime_1.jsx)(ContentInner, { children: (0, jsx_runtime_1.jsx)("div", { children: children }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(Container, { bordered: bordered, className: className, children: [(0, jsx_runtime_1.jsxs)(Header, { onClick: () => setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-expanded": open, children: [(0, jsx_runtime_1.jsx)(Title, { children: title }), (0, jsx_runtime_1.jsx)(ArrowIcon, { as: Icon ?? icons_1.ArrowDownCircleIcon, "$open": open })] }), (0, jsx_runtime_1.jsx)(ContentOuter, { open: open, inert: !open || undefined, children: (0, jsx_runtime_1.jsx)(ContentInner, { children: (0, jsx_runtime_1.jsx)("div", { children: children }) }) })] }));
 };
 exports.ExpandableSection = ExpandableSection;
 const Container = styled_components_1.default.div `
@@ -43,12 +43,17 @@ const ArrowIcon = (0, styled_components_1.default)(icons_1.ArrowDownCircleIcon)
   transform: rotate(${(props) => (props.$open ? '180deg' : '0deg')});
 `;
 const ContentOuter = styled_components_1.default.div `
-  display: grid;
-  grid-template-rows: ${(props) => (props.$open ? '1fr' : '0fr')};
-  overflow: ${(props) => (props.$open ? 'visible' : 'hidden')};
-  transition:
-    grid-template-rows 0.25s ease,
-    overflow 0s ${(props) => (props.$open ? '0.25s' : '0s')} allow-discrete;
+  display: ${(props) => (props.open ? 'block' : 'none')};
+  // TODO: Uncomment this when we have a better solution for the overflow issue
+  // ISSUE: the width of the container is not limited
+  // - it is wider than the parent container
+  // and the truncation is not working as expected
+  // display: grid;
+  // grid-template-rows: ${(props) => (props.open ? '1fr' : '0fr')};
+  // overflow: ${(props) => (props.open ? 'visible' : 'hidden')};
+  // transition:
+  //   grid-template-rows 0.25s ease,
+  //   overflow 0s ${(props) => (props.open ? '0.25s' : '0s')} allow-discrete;
 `;
 const ContentInner = styled_components_1.default.div `
   overflow: visible;

package/dist/cjs/components/Resizer/ResizerButtonInner.js

@@ -84,10 +84,14 @@ exports.HorizontalEndResizerButtonInner = (0, styled_components_1.default)(Horiz
   &:hover,
   &:focus {
     &::before {
-      transform: rotate(${(props) => (props.$isCollapsed ? '-40deg' : '40deg')});
+      transform: rotate(
+        ${(props) => (props.$isCollapsed ? '-40deg' : '40deg')}
+      );
     }
     &::after {
-      transform: rotate(${(props) => (props.$isCollapsed ? '40deg' : '-40deg')});
+      transform: rotate(
+        ${(props) => (props.$isCollapsed ? '40deg' : '-40deg')}
+      );
     }
   }
 `;
@@ -102,10 +106,14 @@ exports.HorizontalStartResizerButtonInner = (0, styled_components_1.default)(Hor
   &:hover,
   &:focus {
     &::before {
-      transform: rotate(${(props) => (props.$isCollapsed ? '40deg' : '-40deg')});
+      transform: rotate(
+        ${(props) => (props.$isCollapsed ? '40deg' : '-40deg')}
+      );
     }
     &::after {
-      transform: rotate(${(props) => (props.$isCollapsed ? '-40deg' : '40deg')});
+      transform: rotate(
+        ${(props) => (props.$isCollapsed ? '-40deg' : '40deg')}
+      );
     }
   }
 `;
@@ -140,10 +148,14 @@ exports.VerticalEndResizerButtonInner = (0, styled_components_1.default)(Vertica
   &:hover,
   &:focus {
     &::before {
-      transform: rotate(${(props) => (props.$isCollapsed ? '40deg' : '-40deg')});
+      transform: rotate(
+        ${(props) => (props.$isCollapsed ? '40deg' : '-40deg')}
+      );
     }
     &::after {
-      transform: rotate(${(props) => (props.$isCollapsed ? '-40deg' : '40deg')});
+      transform: rotate(
+        ${(props) => (props.$isCollapsed ? '-40deg' : '40deg')}
+      );
     }
   }
 `;
@@ -160,10 +172,14 @@ exports.VerticalStartResizerButtonInner = (0, styled_components_1.default)(Verti
   &:hover,
   &:focus {
     &::before {
-      transform: rotate(${(props) => (props.$isCollapsed ? '-40deg' : '40deg')});
+      transform: rotate(
+        ${(props) => (props.$isCollapsed ? '-40deg' : '40deg')}
+      );
     }
     &::after {
-      transform: rotate(${(props) => (props.$isCollapsed ? '40deg' : '-40deg')});
+      transform: rotate(
+        ${(props) => (props.$isCollapsed ? '40deg' : '-40deg')}
+      );
     }
   }
 `;

package/dist/cjs/components/Shortcut/index.js

@@ -29,7 +29,9 @@ exports.Shortcut = styled_components_1.default.span `
   border-radius: ${({ theme }) => theme.grid.radius.small};
   background: ${({ theme }) => theme.colors.background.primary};
   font-size: ${({ theme }) => theme.font.size.small};
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px -1px rgba(0, 0, 0, 0.1);
 `;
 exports.ShortcutConnector = styled_components_1.default.span `
   padding: 0 ${({ theme }) => theme.grid.unit * 2}px;

package/dist/cjs/components/StyledModal.js

@@ -92,7 +92,7 @@ const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick
             onRequestClose?.();
         }
     };
-    return ((0, jsx_runtime_1.jsx)(Dialog, { ref: dialogRef, onClick: e => {
+    return ((0, jsx_runtime_1.jsx)(Dialog, { ref: dialogRef, onClick: (e) => {
             e.stopPropagation();
             handleBackdropClick(e);
         }, "$hideOverlay": hideOverlay, "$pointerEventsOnBackdrop": pointerEventsOnBackdrop, className: className ? `Modal ${className}` : 'Modal', style: style?.content, "aria-labelledby": ariaLabelledby ? ariaLabelledby : undefined, id: id ? id : undefined, children: children }));

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

@@ -20,7 +20,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilePdfIcon = exports.FileMainDocumentIcon = exports.FileLatexIcon = exports.FileImageIcon = exports.FileHeadshotGridIcon = exports.FileGraphicalAbstractIcon = exports.FileFigureIcon = exports.FileDocumentIcon = exports.FileCorruptedIcon = exports.FileCompressedIcon = exports.FileCodeIcon = exports.FileAudioIcon = exports.EditAttrsTrackingIcon = exports.EditIcon = exports.DraggableIcon = exports.DotsIcon = exports.DeleteIcon = exports.DeleteSolidIcon = exports.CorrespondingAuthorIcon = exports.CommentIcon = exports.CommentResolveIcon = exports.CommentReplyIcon = exports.CitationCountIcon = exports.SystemUserAvatarIcon = exports.ChatIcon = exports.CameraIcon = exports.CalendarIcon = exports.BookIcon = exports.AffiliationPlaceholderIcon = exports.AuthorPlaceholderIcon = exports.AffiliationIcon = exports.AlertIcon = exports.AvatarIcon = exports.AttentionRedIcon = exports.AttentionOrangeIcon = exports.AttentionGreenIcon = exports.AttentionBlueIcon = exports.AttachIcon = exports.ArrowUpIcon = exports.ArrowLeftIcon = exports.ArrowDownCircleIcon = exports.ArrowDownIcon = exports.AddRoleIcon = exports.AddIcon = exports.AddOutlineIcon = exports.AddNewIcon = exports.AddedIcon = exports.AddFigureIcon = exports.AddCommentIcon = exports.AddAuthorIcon = void 0;
 exports.ToolbarBoldIcon = exports.TickIcon = exports.TaskStepDoneIcon = exports.SupplementsIcon = exports.SliderOnIcon = exports.SliderOffIcon = exports.SectionCategoryIcon = exports.SearchIcon = exports.ScrollIcon = exports.SaveStatusErrorIcon = exports.SaveStatusSavingIcon = exports.SaveStatusSavedIcon = exports.SaveStatusOfflineIcon = exports.RoleReadingIcon = exports.RoleAnnotatingIcon = exports.PlusIcon = exports.ORCIDIcon = exports.OutlineUnorderedListIcon = exports.OutlineTableIcon = exports.OutlineSectionIcon = exports.OutlinePullQuoteIcon = exports.OutlineParagraphIcon = exports.OutlineOrderedListIcon = exports.OutlineManuscriptIcon = exports.OutlineFigureIcon = exports.OutlineEmbedIcon = exports.OutlineEquationIcon = exports.OutlineCodeIcon = exports.OutlineBlockQuoteIcon = exports.ManuscriptIcon = exports.LeadingHalfLeftIcon = exports.LeadingWallpaperIcon = exports.LeadingLargeFloatIcon = exports.LeadingSmallFloatIcon = exports.LeadingHeroImageIcon = exports.LogoutIcon = exports.LockIcon = exports.LinkIcon = exports.InspectorPluginIcon = exports.InfoCircleIcon = exports.ImageRightIcon = exports.ImageDefaultIcon = exports.ImageLeftIcon = exports.HelpIcon = exports.GlobeIcon = exports.HandleOutlineIcon = exports.HandleInspectorIcon = exports.FileVideoIcon = exports.FileUnknownIcon = exports.FileTableIcon = void 0;
-exports.PencilIcon = exports.NotificationsIcon = exports.EyeIcon = exports.XIcon = exports.DangerIcon = exports.AddInstitutionIcon = exports.AddUserIcon = exports.ProfileIcon = exports.CrclTickAnimation = exports.VerticalEllipsisIcon = exports.UploadIcon = exports.TriangleExpandedIcon = exports.TriangleCollapsedIcon = exports.TranslateIcon = exports.ToolbarUnindentIcon = exports.ToolbarIndentIcon = exports.ToolbarUnorderedListIcon = exports.ToolbarUnderlineIcon = exports.ToolbarTableIcon = exports.ToolbarSymbolIcon = exports.ToolbarSuperscriptIcon = exports.ToolbarSubscriptIcon = exports.ToolbarSpecialCharactersIcon = exports.ToolbarOrderedListIcon = exports.ToolbarItalicIcon = exports.ToolbarFigureIcon = exports.ToolbarEquationIcon = exports.ToolbarCodeIcon = exports.ToolbarCitationIcon = exports.ToolbarBoxedTextIcon = void 0;
+exports.WebLinkIcon = exports.PencilIcon = exports.NotificationsIcon = exports.EyeIcon = exports.XIcon = exports.DangerIcon = exports.AddInstitutionIcon = exports.AddUserIcon = exports.ProfileIcon = exports.CrclTickAnimation = exports.VerticalEllipsisIcon = exports.UploadIcon = exports.TriangleExpandedIcon = exports.TriangleCollapsedIcon = exports.TranslateIcon = exports.ToolbarUnindentIcon = exports.ToolbarIndentIcon = exports.ToolbarUnorderedListIcon = exports.ToolbarUnderlineIcon = exports.ToolbarTableIcon = exports.ToolbarSymbolIcon = exports.ToolbarSuperscriptIcon = exports.ToolbarSubscriptIcon = exports.ToolbarSpecialCharactersIcon = exports.ToolbarOrderedListIcon = exports.ToolbarItalicIcon = exports.ToolbarFigureIcon = exports.ToolbarEquationIcon = exports.ToolbarCodeIcon = exports.ToolbarCrossReferenceIcon = exports.ToolbarCitationIcon = exports.ToolbarBoxedTextIcon = void 0;
 var add_author_1 = require("./add-author");
 Object.defineProperty(exports, "AddAuthorIcon", { enumerable: true, get: function () { return __importDefault(add_author_1).default; } });
 var add_comment_1 = require("./add-comment");
@@ -225,6 +225,8 @@ var toolbar_boxed_text_1 = require("./toolbar-boxed-text");
 Object.defineProperty(exports, "ToolbarBoxedTextIcon", { enumerable: true, get: function () { return __importDefault(toolbar_boxed_text_1).default; } });
 var toolbar_citation_1 = require("./toolbar-citation");
 Object.defineProperty(exports, "ToolbarCitationIcon", { enumerable: true, get: function () { return __importDefault(toolbar_citation_1).default; } });
+var toolbar_cross_reference_1 = require("./toolbar-cross-reference");
+Object.defineProperty(exports, "ToolbarCrossReferenceIcon", { enumerable: true, get: function () { return __importDefault(toolbar_cross_reference_1).default; } });
 var toolbar_code_1 = require("./toolbar-code");
 Object.defineProperty(exports, "ToolbarCodeIcon", { enumerable: true, get: function () { return __importDefault(toolbar_code_1).default; } });
 var toolbar_equation_1 = require("./toolbar-equation");
@@ -281,3 +283,5 @@ var notifications_1 = require("./notifications");
 Object.defineProperty(exports, "NotificationsIcon", { enumerable: true, get: function () { return __importDefault(notifications_1).default; } });
 var pencil_icon_1 = require("./pencil-icon");
 Object.defineProperty(exports, "PencilIcon", { enumerable: true, get: function () { return __importDefault(pencil_icon_1).default; } });
+var weblink_1 = require("./weblink");
+Object.defineProperty(exports, "WebLinkIcon", { enumerable: true, get: function () { return __importDefault(weblink_1).default; } });

package/dist/cjs/components/icons/toolbar-cross-reference.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ToolbarCrossReferenceIcon = (props) => ((0, jsx_runtime_1.jsx)("svg", { width: "11", height: "10", viewBox: "0 0 11 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M6.55963 0V3.81877L10.2936 2.62136L11 4.49838L7.23242 5.72815L9.55352 8.77022L7.87156 10L5.48318 6.95793C5.03466 7.62675 4.58614 8.25243 4.13761 8.83495C3.71152 9.3959 3.41998 9.78425 3.263 10L1.48012 8.86731L3.73395 5.72815L0 4.53074L0.706422 2.62136L4.47401 3.81877V0H6.55963Z", fill: "#4999C3" }) }));
+exports.default = ToolbarCrossReferenceIcon;

package/dist/cjs/components/icons/weblink.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const WebLinkIcon = (props) => ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", ...props, children: [(0, jsx_runtime_1.jsxs)("g", { clipPath: "url(#clip0_24947_17865)", children: [(0, jsx_runtime_1.jsx)("path", { d: "M6.63292 12.1949L4.74758 14.0803C3.96595 14.8619 2.70017 14.8619 1.9192 14.0804C1.13808 13.2993 1.13808 12.0334 1.91905 11.2524L5.69039 7.48109C6.47136 6.70009 7.73727 6.70009 8.51823 7.48109C8.77858 7.74143 9.2007 7.74143 9.46105 7.48109C9.72139 7.22075 9.72139 6.79862 9.46105 6.53828C8.15936 5.23659 6.04927 5.23659 4.74758 6.53828L0.976266 10.3096C-0.325422 11.6113 -0.325422 13.7214 0.976266 15.0231C2.2778 16.3254 4.38805 16.3254 5.69042 15.0231L7.57577 13.1377C7.83611 12.8774 7.83611 12.4552 7.57577 12.1949C7.31542 11.9346 6.89327 11.9346 6.63292 12.1949Z", fill: "#353535" }), (0, jsx_runtime_1.jsx)("path", { d: "M15.023 0.976266C13.7213 -0.325422 11.6106 -0.325422 10.3089 0.976266L8.04688 3.23827C7.78654 3.49861 7.78654 3.92073 8.04688 4.18108C8.30722 4.44142 8.72935 4.44142 8.98969 4.18108L11.2517 1.91908C12.0327 1.13808 13.2992 1.13808 14.0802 1.91908C14.8612 2.70005 14.8612 3.96595 14.0802 4.74692L9.93222 8.89495C9.15122 9.67595 7.88535 9.67595 7.10438 8.89495C6.84404 8.63461 6.42191 8.63461 6.16157 8.89495C5.90122 9.1553 5.90122 9.57742 6.16157 9.83777C7.46325 11.1395 9.57335 11.1395 10.875 9.83777L15.023 5.68977C16.3247 4.38808 16.3247 2.27795 15.023 0.976266Z", fill: "#353535" })] }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_24947_17865", children: (0, jsx_runtime_1.jsx)("rect", { width: "16", height: "16", fill: "353535" }) }) })] }));
+exports.default = WebLinkIcon;

package/dist/es/components/ExpandableSection.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import styled from 'styled-components';
 import { ArrowDownCircleIcon } from './icons';
-export const ExpandableSection = ({ title, children, defaultOpen = true, bordered = false, }) => {
+export const ExpandableSection = ({ title, children, defaultOpen = true, bordered = false, className, icon: Icon, }) => {
     const [open, setOpen] = useState(defaultOpen);
     const handleKeyDown = (e) => {
         if (e.key === 'Enter' || e.key === ' ') {
@@ -10,7 +10,7 @@ export const ExpandableSection = ({ title, children, defaultOpen = true, bordere
             setOpen((prev) => !prev);
         }
     };
-    return (_jsxs(Container, { bordered: bordered, children: [_jsxs(Header, { onClick: () => setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-expanded": open, children: [_jsx(Title, { children: title }), _jsx(ArrowIcon, { "$open": open })] }), _jsx(ContentOuter, { "$open": open, inert: !open || undefined, children: _jsx(ContentInner, { children: _jsx("div", { children: children }) }) })] }));
+    return (_jsxs(Container, { bordered: bordered, className: className, children: [_jsxs(Header, { onClick: () => setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-expanded": open, children: [_jsx(Title, { children: title }), _jsx(ArrowIcon, { as: Icon ?? ArrowDownCircleIcon, "$open": open })] }), _jsx(ContentOuter, { open: open, inert: !open || undefined, children: _jsx(ContentInner, { children: _jsx("div", { children: children }) }) })] }));
 };
 const Container = styled.div `
   border: ${(props) => props.bordered
@@ -36,12 +36,17 @@ const ArrowIcon = styled(ArrowDownCircleIcon) `
   transform: rotate(${(props) => (props.$open ? '180deg' : '0deg')});
 `;
 const ContentOuter = styled.div `
-  display: grid;
-  grid-template-rows: ${(props) => (props.$open ? '1fr' : '0fr')};
-  overflow: ${(props) => (props.$open ? 'visible' : 'hidden')};
-  transition:
-    grid-template-rows 0.25s ease,
-    overflow 0s ${(props) => (props.$open ? '0.25s' : '0s')} allow-discrete;
+  display: ${(props) => (props.open ? 'block' : 'none')};
+  // TODO: Uncomment this when we have a better solution for the overflow issue
+  // ISSUE: the width of the container is not limited
+  // - it is wider than the parent container
+  // and the truncation is not working as expected
+  // display: grid;
+  // grid-template-rows: ${(props) => (props.open ? '1fr' : '0fr')};
+  // overflow: ${(props) => (props.open ? 'visible' : 'hidden')};
+  // transition:
+  //   grid-template-rows 0.25s ease,
+  //   overflow 0s ${(props) => (props.open ? '0.25s' : '0s')} allow-discrete;
 `;
 const ContentInner = styled.div `
   overflow: visible;

package/dist/es/components/Resizer/ResizerButtonInner.js

@@ -78,10 +78,14 @@ export const HorizontalEndResizerButtonInner = styled(HorizontalResizerButtonInn
   &:hover,
   &:focus {
     &::before {
-      transform: rotate(${(props) => (props.$isCollapsed ? '-40deg' : '40deg')});
+      transform: rotate(
+        ${(props) => (props.$isCollapsed ? '-40deg' : '40deg')}
+      );
     }
     &::after {
-      transform: rotate(${(props) => (props.$isCollapsed ? '40deg' : '-40deg')});
+      transform: rotate(
+        ${(props) => (props.$isCollapsed ? '40deg' : '-40deg')}
+      );
     }
   }
 `;
@@ -96,10 +100,14 @@ export const HorizontalStartResizerButtonInner = styled(HorizontalResizerButtonI
   &:hover,
   &:focus {
     &::before {
-      transform: rotate(${(props) => (props.$isCollapsed ? '40deg' : '-40deg')});
+      transform: rotate(
+        ${(props) => (props.$isCollapsed ? '40deg' : '-40deg')}
+      );
     }
     &::after {
-      transform: rotate(${(props) => (props.$isCollapsed ? '-40deg' : '40deg')});
+      transform: rotate(
+        ${(props) => (props.$isCollapsed ? '-40deg' : '40deg')}
+      );
     }
   }
 `;
@@ -134,10 +142,14 @@ export const VerticalEndResizerButtonInner = styled(VerticalResizerButtonInner)
   &:hover,
   &:focus {
     &::before {
-      transform: rotate(${(props) => (props.$isCollapsed ? '40deg' : '-40deg')});
+      transform: rotate(
+        ${(props) => (props.$isCollapsed ? '40deg' : '-40deg')}
+      );
     }
     &::after {
-      transform: rotate(${(props) => (props.$isCollapsed ? '-40deg' : '40deg')});
+      transform: rotate(
+        ${(props) => (props.$isCollapsed ? '-40deg' : '40deg')}
+      );
     }
   }
 `;
@@ -154,10 +166,14 @@ export const VerticalStartResizerButtonInner = styled(VerticalResizerButtonInner
   &:hover,
   &:focus {
     &::before {
-      transform: rotate(${(props) => (props.$isCollapsed ? '-40deg' : '40deg')});
+      transform: rotate(
+        ${(props) => (props.$isCollapsed ? '-40deg' : '40deg')}
+      );
     }
     &::after {
-      transform: rotate(${(props) => (props.$isCollapsed ? '40deg' : '-40deg')});
+      transform: rotate(
+        ${(props) => (props.$isCollapsed ? '40deg' : '-40deg')}
+      );
     }
   }
 `;

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

@@ -23,7 +23,9 @@ export const Shortcut = styled.span `
   border-radius: ${({ theme }) => theme.grid.radius.small};
   background: ${({ theme }) => theme.colors.background.primary};
   font-size: ${({ theme }) => theme.font.size.small};
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px -1px rgba(0, 0, 0, 0.1);
 `;
 export const ShortcutConnector = styled.span `
   padding: 0 ${({ theme }) => theme.grid.unit * 2}px;

package/dist/es/components/StyledModal.js

@@ -56,7 +56,7 @@ export const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverla
             onRequestClose?.();
         }
     };
-    return (_jsx(Dialog, { ref: dialogRef, onClick: e => {
+    return (_jsx(Dialog, { ref: dialogRef, onClick: (e) => {
             e.stopPropagation();
             handleBackdropClick(e);
         }, "$hideOverlay": hideOverlay, "$pointerEventsOnBackdrop": pointerEventsOnBackdrop, className: className ? `Modal ${className}` : 'Modal', style: style?.content, "aria-labelledby": ariaLabelledby ? ariaLabelledby : undefined, id: id ? id : undefined, children: children }));

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

@@ -115,6 +115,7 @@ export { default as TickIcon } from './tick';
 export { default as ToolbarBoldIcon } from './toolbar-bold';
 export { default as ToolbarBoxedTextIcon } from './toolbar-boxed-text';
 export { default as ToolbarCitationIcon } from './toolbar-citation';
+export { default as ToolbarCrossReferenceIcon } from './toolbar-cross-reference';
 export { default as ToolbarCodeIcon } from './toolbar-code';
 export { default as ToolbarEquationIcon } from './toolbar-equation';
 export { default as ToolbarFigureIcon } from './toolbar-figure';
@@ -143,3 +144,4 @@ export { default as XIcon } from './x';
 export { default as EyeIcon } from './eye-icon';
 export { default as NotificationsIcon } from './notifications';
 export { default as PencilIcon } from './pencil-icon';
+export { default as WebLinkIcon } from './weblink';

package/dist/es/components/icons/toolbar-cross-reference.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ToolbarCrossReferenceIcon = (props) => (_jsx("svg", { width: "11", height: "10", viewBox: "0 0 11 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { d: "M6.55963 0V3.81877L10.2936 2.62136L11 4.49838L7.23242 5.72815L9.55352 8.77022L7.87156 10L5.48318 6.95793C5.03466 7.62675 4.58614 8.25243 4.13761 8.83495C3.71152 9.3959 3.41998 9.78425 3.263 10L1.48012 8.86731L3.73395 5.72815L0 4.53074L0.706422 2.62136L4.47401 3.81877V0H6.55963Z", fill: "#4999C3" }) }));
+export default ToolbarCrossReferenceIcon;

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const WebLinkIcon = (props) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", ...props, children: [_jsxs("g", { clipPath: "url(#clip0_24947_17865)", children: [_jsx("path", { d: "M6.63292 12.1949L4.74758 14.0803C3.96595 14.8619 2.70017 14.8619 1.9192 14.0804C1.13808 13.2993 1.13808 12.0334 1.91905 11.2524L5.69039 7.48109C6.47136 6.70009 7.73727 6.70009 8.51823 7.48109C8.77858 7.74143 9.2007 7.74143 9.46105 7.48109C9.72139 7.22075 9.72139 6.79862 9.46105 6.53828C8.15936 5.23659 6.04927 5.23659 4.74758 6.53828L0.976266 10.3096C-0.325422 11.6113 -0.325422 13.7214 0.976266 15.0231C2.2778 16.3254 4.38805 16.3254 5.69042 15.0231L7.57577 13.1377C7.83611 12.8774 7.83611 12.4552 7.57577 12.1949C7.31542 11.9346 6.89327 11.9346 6.63292 12.1949Z", fill: "#353535" }), _jsx("path", { d: "M15.023 0.976266C13.7213 -0.325422 11.6106 -0.325422 10.3089 0.976266L8.04688 3.23827C7.78654 3.49861 7.78654 3.92073 8.04688 4.18108C8.30722 4.44142 8.72935 4.44142 8.98969 4.18108L11.2517 1.91908C12.0327 1.13808 13.2992 1.13808 14.0802 1.91908C14.8612 2.70005 14.8612 3.96595 14.0802 4.74692L9.93222 8.89495C9.15122 9.67595 7.88535 9.67595 7.10438 8.89495C6.84404 8.63461 6.42191 8.63461 6.16157 8.89495C5.90122 9.1553 5.90122 9.57742 6.16157 9.83777C7.46325 11.1395 9.57335 11.1395 10.875 9.83777L15.023 5.68977C16.3247 4.38808 16.3247 2.27795 15.023 0.976266Z", fill: "#353535" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_24947_17865", children: _jsx("rect", { width: "16", height: "16", fill: "353535" }) }) })] }));
+export default WebLinkIcon;

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

@@ -1,9 +1,11 @@
-import { FC, ReactNode } from 'react';
+import React, { FC, ReactNode } from 'react';
 interface ExpandableSectionProps {
     title: ReactNode;
     children: ReactNode;
     defaultOpen?: boolean;
     bordered?: boolean;
+    className?: string;
+    icon?: FC<React.SVGAttributes<SVGElement>>;
 }
 export declare const ExpandableSection: FC<ExpandableSectionProps>;
 export {};

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

@@ -115,6 +115,7 @@ export { default as TickIcon } from './tick';
 export { default as ToolbarBoldIcon } from './toolbar-bold';
 export { default as ToolbarBoxedTextIcon } from './toolbar-boxed-text';
 export { default as ToolbarCitationIcon } from './toolbar-citation';
+export { default as ToolbarCrossReferenceIcon } from './toolbar-cross-reference';
 export { default as ToolbarCodeIcon } from './toolbar-code';
 export { default as ToolbarEquationIcon } from './toolbar-equation';
 export { default as ToolbarFigureIcon } from './toolbar-figure';
@@ -143,3 +144,4 @@ export { default as XIcon } from './x';
 export { default as EyeIcon } from './eye-icon';
 export { default as NotificationsIcon } from './notifications';
 export { default as PencilIcon } from './pencil-icon';
+export { default as WebLinkIcon } from './weblink';

package/dist/types/components/icons/toolbar-cross-reference.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from './types';
+declare const ToolbarCrossReferenceIcon: React.FC<IconProps>;
+export default ToolbarCrossReferenceIcon;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from './types';
+declare const WebLinkIcon: React.FC<IconProps>;
+export default WebLinkIcon;

package/package.json

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