@manuscripts/style-guide 3.7.0 → 3.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/dist/cjs/components/ExpandableSection.js +3 -3
  2. package/dist/cjs/components/Resizer/ResizerButtonInner.js +24 -8
  3. package/dist/cjs/components/Shortcut/index.js +3 -1
  4. package/dist/cjs/components/StyledModal.js +1 -1
  5. package/dist/cjs/components/icons/convert-to-weblink.js +5 -0
  6. package/dist/cjs/components/icons/external-link.js +5 -0
  7. package/dist/cjs/components/icons/index.js +7 -1
  8. package/dist/cjs/components/icons/toolbar-cross-reference.js +5 -0
  9. package/dist/es/components/ExpandableSection.js +3 -3
  10. package/dist/es/components/Resizer/ResizerButtonInner.js +24 -8
  11. package/dist/es/components/Shortcut/index.js +3 -1
  12. package/dist/es/components/StyledModal.js +1 -1
  13. package/dist/es/components/icons/convert-to-weblink.js +3 -0
  14. package/dist/es/components/icons/external-link.js +3 -0
  15. package/dist/es/components/icons/index.js +3 -0
  16. package/dist/es/components/icons/toolbar-cross-reference.js +3 -0
  17. package/dist/types/components/ExpandableSection.d.ts +3 -1
  18. package/dist/types/components/icons/convert-to-weblink.d.ts +4 -0
  19. package/dist/types/components/icons/external-link.d.ts +4 -0
  20. package/dist/types/components/icons/index.d.ts +3 -0
  21. package/dist/types/components/icons/toolbar-cross-reference.d.ts +4 -0
  22. package/package.json +1 -1
package/dist/cjs/components/ExpandableSection.js CHANGED
@@ -8,7 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const react_1 = require("react");
9
9
  const styled_components_1 = __importDefault(require("styled-components"));
10
10
  const icons_1 = require("./icons");
11
- const ExpandableSection = ({ title, children, defaultOpen = true, bordered = false, }) => {
11
+ const ExpandableSection = ({ title, children, defaultOpen = true, bordered = false, className, icon: Icon, }) => {
12
12
  const [open, setOpen] = (0, react_1.useState)(defaultOpen);
13
13
  const handleKeyDown = (e) => {
14
14
  if (e.key === 'Enter' || e.key === ' ') {
@@ -16,7 +16,7 @@ const ExpandableSection = ({ title, children, defaultOpen = true, bordered = fal
16
16
  setOpen((prev) => !prev);
17
17
  }
18
18
  };
19
- 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 }) }) })] }));
19
+ 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 }) }) })] }));
20
20
  };
21
21
  exports.ExpandableSection = ExpandableSection;
22
22
  const Container = styled_components_1.default.div `
@@ -46,7 +46,7 @@ const ContentOuter = styled_components_1.default.div `
46
46
  display: ${(props) => (props.open ? 'block' : 'none')};
47
47
  // TODO: Uncomment this when we have a better solution for the overflow issue
48
48
  // ISSUE: the width of the container is not limited
49
- // - it is wider than the parent container
49
+ // - it is wider than the parent container
50
50
  // and the truncation is not working as expected
51
51
  // display: grid;
52
52
  // grid-template-rows: ${(props) => (props.open ? '1fr' : '0fr')};
package/dist/cjs/components/Resizer/ResizerButtonInner.js CHANGED
@@ -84,10 +84,14 @@ exports.HorizontalEndResizerButtonInner = (0, styled_components_1.default)(Horiz
84
84
  &:hover,
85
85
  &:focus {
86
86
  &::before {
87
- transform: rotate(${(props) => (props.$isCollapsed ? '-40deg' : '40deg')});
87
+ transform: rotate(
88
+ ${(props) => (props.$isCollapsed ? '-40deg' : '40deg')}
89
+ );
88
90
  }
89
91
  &::after {
90
- transform: rotate(${(props) => (props.$isCollapsed ? '40deg' : '-40deg')});
92
+ transform: rotate(
93
+ ${(props) => (props.$isCollapsed ? '40deg' : '-40deg')}
94
+ );
91
95
  }
92
96
  }
93
97
  `;
@@ -102,10 +106,14 @@ exports.HorizontalStartResizerButtonInner = (0, styled_components_1.default)(Hor
102
106
  &:hover,
103
107
  &:focus {
104
108
  &::before {
105
- transform: rotate(${(props) => (props.$isCollapsed ? '40deg' : '-40deg')});
109
+ transform: rotate(
110
+ ${(props) => (props.$isCollapsed ? '40deg' : '-40deg')}
111
+ );
106
112
  }
107
113
  &::after {
108
- transform: rotate(${(props) => (props.$isCollapsed ? '-40deg' : '40deg')});
114
+ transform: rotate(
115
+ ${(props) => (props.$isCollapsed ? '-40deg' : '40deg')}
116
+ );
109
117
  }
110
118
  }
111
119
  `;
@@ -140,10 +148,14 @@ exports.VerticalEndResizerButtonInner = (0, styled_components_1.default)(Vertica
140
148
  &:hover,
141
149
  &:focus {
142
150
  &::before {
143
- transform: rotate(${(props) => (props.$isCollapsed ? '40deg' : '-40deg')});
151
+ transform: rotate(
152
+ ${(props) => (props.$isCollapsed ? '40deg' : '-40deg')}
153
+ );
144
154
  }
145
155
  &::after {
146
- transform: rotate(${(props) => (props.$isCollapsed ? '-40deg' : '40deg')});
156
+ transform: rotate(
157
+ ${(props) => (props.$isCollapsed ? '-40deg' : '40deg')}
158
+ );
147
159
  }
148
160
  }
149
161
  `;
@@ -160,10 +172,14 @@ exports.VerticalStartResizerButtonInner = (0, styled_components_1.default)(Verti
160
172
  &:hover,
161
173
  &:focus {
162
174
  &::before {
163
- transform: rotate(${(props) => (props.$isCollapsed ? '-40deg' : '40deg')});
175
+ transform: rotate(
176
+ ${(props) => (props.$isCollapsed ? '-40deg' : '40deg')}
177
+ );
164
178
  }
165
179
  &::after {
166
- transform: rotate(${(props) => (props.$isCollapsed ? '40deg' : '-40deg')});
180
+ transform: rotate(
181
+ ${(props) => (props.$isCollapsed ? '40deg' : '-40deg')}
182
+ );
167
183
  }
168
184
  }
169
185
  `;
package/dist/cjs/components/Shortcut/index.js CHANGED
@@ -29,7 +29,9 @@ exports.Shortcut = styled_components_1.default.span `
29
29
  border-radius: ${({ theme }) => theme.grid.radius.small};
30
30
  background: ${({ theme }) => theme.colors.background.primary};
31
31
  font-size: ${({ theme }) => theme.font.size.small};
32
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
32
+ box-shadow:
33
+ 0 1px 3px 0 rgba(0, 0, 0, 0.1),
34
+ 0 1px 2px -1px rgba(0, 0, 0, 0.1);
33
35
  `;
34
36
  exports.ShortcutConnector = styled_components_1.default.span `
35
37
  padding: 0 ${({ theme }) => theme.grid.unit * 2}px;
package/dist/cjs/components/StyledModal.js CHANGED
@@ -92,7 +92,7 @@ const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick
92
92
  onRequestClose?.();
93
93
  }
94
94
  };
95
- return ((0, jsx_runtime_1.jsx)(Dialog, { ref: dialogRef, onClick: e => {
95
+ return ((0, jsx_runtime_1.jsx)(Dialog, { ref: dialogRef, onClick: (e) => {
96
96
  e.stopPropagation();
97
97
  handleBackdropClick(e);
98
98
  }, "$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/convert-to-weblink.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const jsx_runtime_1 = require("react/jsx-runtime");
4
+ const ConvertToWebLinkIcon = (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_17192)", children: [(0, jsx_runtime_1.jsx)("path", { d: "M6.80381 11.6705L5.15413 13.3202C4.47021 14.0041 3.36265 14.0041 2.6793 13.3203C1.99582 12.6368 1.99582 11.5292 2.67917 10.8458L5.97909 7.54589C6.66244 6.86252 7.77011 6.86252 8.45345 7.54589C8.68126 7.77369 9.05062 7.77369 9.27842 7.54589C9.50622 7.31809 9.50622 6.94873 9.27842 6.72093C8.13944 5.58196 6.29311 5.58196 5.15413 6.72093L1.85423 10.0208C0.715256 11.1598 0.715256 13.0061 1.85423 14.1451C2.99307 15.2847 4.83954 15.2847 5.97912 14.1451L7.62879 12.4954C7.8566 12.2676 7.8566 11.8983 7.62879 11.6705C7.40099 11.4427 7.03161 11.4427 6.80381 11.6705Z", fill: "#6E6E6E" }), (0, jsx_runtime_1.jsx)("path", { d: "M14.1453 1.85423C13.0064 0.715256 11.1594 0.715256 10.0205 1.85423L8.0412 3.83348C7.8134 4.06128 7.8134 4.43064 8.0412 4.65844C8.269 4.88624 8.63836 4.88624 8.86616 4.65844L10.8454 2.67919C11.5288 1.99582 12.637 1.99582 13.3204 2.67919C14.0037 3.36254 14.0037 4.47021 13.3204 5.15356L9.69088 8.78308C9.0075 9.46646 7.89986 9.46646 7.21651 8.78308C6.98871 8.55528 6.61935 8.55528 6.39155 8.78308C6.16375 9.01088 6.16375 9.38024 6.39155 9.60804C7.53053 10.747 9.37686 10.747 10.5158 9.60804L14.1453 5.97855C15.2843 4.83957 15.2843 2.99321 14.1453 1.85423Z", fill: "#6E6E6E" })] }), (0, jsx_runtime_1.jsx)("path", { d: "M6.03135 0.0257959C6.3353 -0.05247 6.65943 0.0510401 6.84802 0.286352C7.03658 0.521689 7.05102 0.840387 6.88387 1.08935L5.92777 2.5136C5.71875 2.82482 5.28946 2.93734 4.93682 2.77323L4.14405 2.40418C3.66469 2.7133 3.2454 3.0558 2.88917 3.40468C2.02685 4.24923 1.59582 5.06266 1.51378 5.43164C1.42833 5.81669 1.02404 6.06457 0.610469 5.9852C0.196888 5.90565 -0.0693643 5.52924 0.0158945 5.14419C0.176091 4.42231 0.805747 3.37852 1.78069 2.42365C2.77623 1.44866 4.19941 0.497558 6.03135 0.0257959Z", fill: "#6E6E6E" }), (0, jsx_runtime_1.jsx)("path", { d: "M14.4863 10.5684C14.5718 10.1833 14.976 9.93537 15.3896 10.0148C15.8031 10.0944 16.0693 10.4708 15.9841 10.8558C15.8239 11.5777 15.1943 12.6215 14.2194 13.5763C13.2239 14.5513 11.8008 15.5024 9.96896 15.9742C9.66499 16.0525 9.33991 15.949 9.15134 15.7136C8.96301 15.4783 8.94937 15.1595 9.11648 14.9106L10.0725 13.4864L10.1612 13.3788C10.3881 13.1513 10.755 13.0832 11.0634 13.2268L11.8552 13.5949C12.3344 13.2858 12.7538 12.9441 13.11 12.5953C13.9724 11.7507 14.4043 10.9374 14.4863 10.5684Z", fill: "#6E6E6E" }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_24947_17192", children: (0, jsx_runtime_1.jsx)("rect", { width: "14", height: "14", fill: "white", transform: "translate(1 1)" }) }) })] }));
5
+ exports.default = ConvertToWebLinkIcon;
package/dist/cjs/components/icons/external-link.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const jsx_runtime_1 = require("react/jsx-runtime");
4
+ const ExternalLinkIcon = ({ color = '#6E6E6E', ...props }) => ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", ...props, children: [(0, jsx_runtime_1.jsx)("path", { d: "M14.5 11.375V13.0625C14.5 13.994 13.744 14.75 12.8125 14.75H4.9375C4.006 14.75 3.25 13.994 3.25 13.0625V5.1875C3.25 4.256 4.006 3.5 4.9375 3.5H6.625", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M14.499 7.75V3.5H10.249C9.83479 3.5 9.49901 3.16421 9.49901 2.75C9.49901 2.33579 9.83479 2 10.249 2H15.249C15.6632 2 15.999 2.33579 15.999 2.75V7.75C15.999 8.16421 15.6632 8.5 15.249 8.5C14.8348 8.5 14.499 8.16421 14.499 7.75Z", fill: color }), (0, jsx_runtime_1.jsx)("path", { d: "M14.7914 4.2785C15.083 3.98443 15.0812 3.5095 14.7873 3.21784C14.4932 2.92625 14.0183 2.92801 13.7266 3.22199L7.74728 9.25242C7.45571 9.54649 7.4575 10.0214 7.75143 10.3131C8.04546 10.6046 8.52042 10.6028 8.81209 10.3089L14.7914 4.2785Z", fill: color })] }));
5
+ exports.default = ExternalLinkIcon;
package/dist/cjs/components/icons/index.js CHANGED
@@ -20,7 +20,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
21
  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;
22
22
  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;
23
- 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.ToolbarCitationIcon = exports.ToolbarBoxedTextIcon = void 0;
23
+ exports.ExternalLinkIcon = exports.ConvertToWebLinkIcon = 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;
24
24
  var add_author_1 = require("./add-author");
25
25
  Object.defineProperty(exports, "AddAuthorIcon", { enumerable: true, get: function () { return __importDefault(add_author_1).default; } });
26
26
  var add_comment_1 = require("./add-comment");
@@ -225,6 +225,8 @@ var toolbar_boxed_text_1 = require("./toolbar-boxed-text");
225
225
  Object.defineProperty(exports, "ToolbarBoxedTextIcon", { enumerable: true, get: function () { return __importDefault(toolbar_boxed_text_1).default; } });
226
226
  var toolbar_citation_1 = require("./toolbar-citation");
227
227
  Object.defineProperty(exports, "ToolbarCitationIcon", { enumerable: true, get: function () { return __importDefault(toolbar_citation_1).default; } });
228
+ var toolbar_cross_reference_1 = require("./toolbar-cross-reference");
229
+ Object.defineProperty(exports, "ToolbarCrossReferenceIcon", { enumerable: true, get: function () { return __importDefault(toolbar_cross_reference_1).default; } });
228
230
  var toolbar_code_1 = require("./toolbar-code");
229
231
  Object.defineProperty(exports, "ToolbarCodeIcon", { enumerable: true, get: function () { return __importDefault(toolbar_code_1).default; } });
230
232
  var toolbar_equation_1 = require("./toolbar-equation");
@@ -283,3 +285,7 @@ var pencil_icon_1 = require("./pencil-icon");
283
285
  Object.defineProperty(exports, "PencilIcon", { enumerable: true, get: function () { return __importDefault(pencil_icon_1).default; } });
284
286
  var weblink_1 = require("./weblink");
285
287
  Object.defineProperty(exports, "WebLinkIcon", { enumerable: true, get: function () { return __importDefault(weblink_1).default; } });
288
+ var convert_to_weblink_1 = require("./convert-to-weblink");
289
+ Object.defineProperty(exports, "ConvertToWebLinkIcon", { enumerable: true, get: function () { return __importDefault(convert_to_weblink_1).default; } });
290
+ var external_link_1 = require("./external-link");
291
+ Object.defineProperty(exports, "ExternalLinkIcon", { enumerable: true, get: function () { return __importDefault(external_link_1).default; } });
package/dist/cjs/components/icons/toolbar-cross-reference.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const jsx_runtime_1 = require("react/jsx-runtime");
4
+ 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" }) }));
5
+ exports.default = ToolbarCrossReferenceIcon;
package/dist/es/components/ExpandableSection.js CHANGED
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useState } from 'react';
3
3
  import styled from 'styled-components';
4
4
  import { ArrowDownCircleIcon } from './icons';
5
- export const ExpandableSection = ({ title, children, defaultOpen = true, bordered = false, }) => {
5
+ export const ExpandableSection = ({ title, children, defaultOpen = true, bordered = false, className, icon: Icon, }) => {
6
6
  const [open, setOpen] = useState(defaultOpen);
7
7
  const handleKeyDown = (e) => {
8
8
  if (e.key === 'Enter' || e.key === ' ') {
@@ -10,7 +10,7 @@ export const ExpandableSection = ({ title, children, defaultOpen = true, bordere
10
10
  setOpen((prev) => !prev);
11
11
  }
12
12
  };
13
- 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 }) }) })] }));
13
+ 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 }) }) })] }));
14
14
  };
15
15
  const Container = styled.div `
16
16
  border: ${(props) => props.bordered
@@ -39,7 +39,7 @@ const ContentOuter = styled.div `
39
39
  display: ${(props) => (props.open ? 'block' : 'none')};
40
40
  // TODO: Uncomment this when we have a better solution for the overflow issue
41
41
  // ISSUE: the width of the container is not limited
42
- // - it is wider than the parent container
42
+ // - it is wider than the parent container
43
43
  // and the truncation is not working as expected
44
44
  // display: grid;
45
45
  // grid-template-rows: ${(props) => (props.open ? '1fr' : '0fr')};
package/dist/es/components/Resizer/ResizerButtonInner.js CHANGED
@@ -78,10 +78,14 @@ export const HorizontalEndResizerButtonInner = styled(HorizontalResizerButtonInn
78
78
  &:hover,
79
79
  &:focus {
80
80
  &::before {
81
- transform: rotate(${(props) => (props.$isCollapsed ? '-40deg' : '40deg')});
81
+ transform: rotate(
82
+ ${(props) => (props.$isCollapsed ? '-40deg' : '40deg')}
83
+ );
82
84
  }
83
85
  &::after {
84
- transform: rotate(${(props) => (props.$isCollapsed ? '40deg' : '-40deg')});
86
+ transform: rotate(
87
+ ${(props) => (props.$isCollapsed ? '40deg' : '-40deg')}
88
+ );
85
89
  }
86
90
  }
87
91
  `;
@@ -96,10 +100,14 @@ export const HorizontalStartResizerButtonInner = styled(HorizontalResizerButtonI
96
100
  &:hover,
97
101
  &:focus {
98
102
  &::before {
99
- transform: rotate(${(props) => (props.$isCollapsed ? '40deg' : '-40deg')});
103
+ transform: rotate(
104
+ ${(props) => (props.$isCollapsed ? '40deg' : '-40deg')}
105
+ );
100
106
  }
101
107
  &::after {
102
- transform: rotate(${(props) => (props.$isCollapsed ? '-40deg' : '40deg')});
108
+ transform: rotate(
109
+ ${(props) => (props.$isCollapsed ? '-40deg' : '40deg')}
110
+ );
103
111
  }
104
112
  }
105
113
  `;
@@ -134,10 +142,14 @@ export const VerticalEndResizerButtonInner = styled(VerticalResizerButtonInner)
134
142
  &:hover,
135
143
  &:focus {
136
144
  &::before {
137
- transform: rotate(${(props) => (props.$isCollapsed ? '40deg' : '-40deg')});
145
+ transform: rotate(
146
+ ${(props) => (props.$isCollapsed ? '40deg' : '-40deg')}
147
+ );
138
148
  }
139
149
  &::after {
140
- transform: rotate(${(props) => (props.$isCollapsed ? '-40deg' : '40deg')});
150
+ transform: rotate(
151
+ ${(props) => (props.$isCollapsed ? '-40deg' : '40deg')}
152
+ );
141
153
  }
142
154
  }
143
155
  `;
@@ -154,10 +166,14 @@ export const VerticalStartResizerButtonInner = styled(VerticalResizerButtonInner
154
166
  &:hover,
155
167
  &:focus {
156
168
  &::before {
157
- transform: rotate(${(props) => (props.$isCollapsed ? '-40deg' : '40deg')});
169
+ transform: rotate(
170
+ ${(props) => (props.$isCollapsed ? '-40deg' : '40deg')}
171
+ );
158
172
  }
159
173
  &::after {
160
- transform: rotate(${(props) => (props.$isCollapsed ? '40deg' : '-40deg')});
174
+ transform: rotate(
175
+ ${(props) => (props.$isCollapsed ? '40deg' : '-40deg')}
176
+ );
161
177
  }
162
178
  }
163
179
  `;
package/dist/es/components/Shortcut/index.js CHANGED
@@ -23,7 +23,9 @@ export const Shortcut = styled.span `
23
23
  border-radius: ${({ theme }) => theme.grid.radius.small};
24
24
  background: ${({ theme }) => theme.colors.background.primary};
25
25
  font-size: ${({ theme }) => theme.font.size.small};
26
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
26
+ box-shadow:
27
+ 0 1px 3px 0 rgba(0, 0, 0, 0.1),
28
+ 0 1px 2px -1px rgba(0, 0, 0, 0.1);
27
29
  `;
28
30
  export const ShortcutConnector = styled.span `
29
31
  padding: 0 ${({ theme }) => theme.grid.unit * 2}px;
package/dist/es/components/StyledModal.js CHANGED
@@ -56,7 +56,7 @@ export const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverla
56
56
  onRequestClose?.();
57
57
  }
58
58
  };
59
- return (_jsx(Dialog, { ref: dialogRef, onClick: e => {
59
+ return (_jsx(Dialog, { ref: dialogRef, onClick: (e) => {
60
60
  e.stopPropagation();
61
61
  handleBackdropClick(e);
62
62
  }, "$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/convert-to-weblink.js ADDED
@@ -0,0 +1,3 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ const ConvertToWebLinkIcon = (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_17192)", children: [_jsx("path", { d: "M6.80381 11.6705L5.15413 13.3202C4.47021 14.0041 3.36265 14.0041 2.6793 13.3203C1.99582 12.6368 1.99582 11.5292 2.67917 10.8458L5.97909 7.54589C6.66244 6.86252 7.77011 6.86252 8.45345 7.54589C8.68126 7.77369 9.05062 7.77369 9.27842 7.54589C9.50622 7.31809 9.50622 6.94873 9.27842 6.72093C8.13944 5.58196 6.29311 5.58196 5.15413 6.72093L1.85423 10.0208C0.715256 11.1598 0.715256 13.0061 1.85423 14.1451C2.99307 15.2847 4.83954 15.2847 5.97912 14.1451L7.62879 12.4954C7.8566 12.2676 7.8566 11.8983 7.62879 11.6705C7.40099 11.4427 7.03161 11.4427 6.80381 11.6705Z", fill: "#6E6E6E" }), _jsx("path", { d: "M14.1453 1.85423C13.0064 0.715256 11.1594 0.715256 10.0205 1.85423L8.0412 3.83348C7.8134 4.06128 7.8134 4.43064 8.0412 4.65844C8.269 4.88624 8.63836 4.88624 8.86616 4.65844L10.8454 2.67919C11.5288 1.99582 12.637 1.99582 13.3204 2.67919C14.0037 3.36254 14.0037 4.47021 13.3204 5.15356L9.69088 8.78308C9.0075 9.46646 7.89986 9.46646 7.21651 8.78308C6.98871 8.55528 6.61935 8.55528 6.39155 8.78308C6.16375 9.01088 6.16375 9.38024 6.39155 9.60804C7.53053 10.747 9.37686 10.747 10.5158 9.60804L14.1453 5.97855C15.2843 4.83957 15.2843 2.99321 14.1453 1.85423Z", fill: "#6E6E6E" })] }), _jsx("path", { d: "M6.03135 0.0257959C6.3353 -0.05247 6.65943 0.0510401 6.84802 0.286352C7.03658 0.521689 7.05102 0.840387 6.88387 1.08935L5.92777 2.5136C5.71875 2.82482 5.28946 2.93734 4.93682 2.77323L4.14405 2.40418C3.66469 2.7133 3.2454 3.0558 2.88917 3.40468C2.02685 4.24923 1.59582 5.06266 1.51378 5.43164C1.42833 5.81669 1.02404 6.06457 0.610469 5.9852C0.196888 5.90565 -0.0693643 5.52924 0.0158945 5.14419C0.176091 4.42231 0.805747 3.37852 1.78069 2.42365C2.77623 1.44866 4.19941 0.497558 6.03135 0.0257959Z", fill: "#6E6E6E" }), _jsx("path", { d: "M14.4863 10.5684C14.5718 10.1833 14.976 9.93537 15.3896 10.0148C15.8031 10.0944 16.0693 10.4708 15.9841 10.8558C15.8239 11.5777 15.1943 12.6215 14.2194 13.5763C13.2239 14.5513 11.8008 15.5024 9.96896 15.9742C9.66499 16.0525 9.33991 15.949 9.15134 15.7136C8.96301 15.4783 8.94937 15.1595 9.11648 14.9106L10.0725 13.4864L10.1612 13.3788C10.3881 13.1513 10.755 13.0832 11.0634 13.2268L11.8552 13.5949C12.3344 13.2858 12.7538 12.9441 13.11 12.5953C13.9724 11.7507 14.4043 10.9374 14.4863 10.5684Z", fill: "#6E6E6E" }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_24947_17192", children: _jsx("rect", { width: "14", height: "14", fill: "white", transform: "translate(1 1)" }) }) })] }));
3
+ export default ConvertToWebLinkIcon;
package/dist/es/components/icons/external-link.js ADDED
@@ -0,0 +1,3 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ const ExternalLinkIcon = ({ color = '#6E6E6E', ...props }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", ...props, children: [_jsx("path", { d: "M14.5 11.375V13.0625C14.5 13.994 13.744 14.75 12.8125 14.75H4.9375C4.006 14.75 3.25 13.994 3.25 13.0625V5.1875C3.25 4.256 4.006 3.5 4.9375 3.5H6.625", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M14.499 7.75V3.5H10.249C9.83479 3.5 9.49901 3.16421 9.49901 2.75C9.49901 2.33579 9.83479 2 10.249 2H15.249C15.6632 2 15.999 2.33579 15.999 2.75V7.75C15.999 8.16421 15.6632 8.5 15.249 8.5C14.8348 8.5 14.499 8.16421 14.499 7.75Z", fill: color }), _jsx("path", { d: "M14.7914 4.2785C15.083 3.98443 15.0812 3.5095 14.7873 3.21784C14.4932 2.92625 14.0183 2.92801 13.7266 3.22199L7.74728 9.25242C7.45571 9.54649 7.4575 10.0214 7.75143 10.3131C8.04546 10.6046 8.52042 10.6028 8.81209 10.3089L14.7914 4.2785Z", fill: color })] }));
3
+ export default ExternalLinkIcon;
package/dist/es/components/icons/index.js CHANGED
@@ -115,6 +115,7 @@ export { default as TickIcon } from './tick';
115
115
  export { default as ToolbarBoldIcon } from './toolbar-bold';
116
116
  export { default as ToolbarBoxedTextIcon } from './toolbar-boxed-text';
117
117
  export { default as ToolbarCitationIcon } from './toolbar-citation';
118
+ export { default as ToolbarCrossReferenceIcon } from './toolbar-cross-reference';
118
119
  export { default as ToolbarCodeIcon } from './toolbar-code';
119
120
  export { default as ToolbarEquationIcon } from './toolbar-equation';
120
121
  export { default as ToolbarFigureIcon } from './toolbar-figure';
@@ -144,3 +145,5 @@ export { default as EyeIcon } from './eye-icon';
144
145
  export { default as NotificationsIcon } from './notifications';
145
146
  export { default as PencilIcon } from './pencil-icon';
146
147
  export { default as WebLinkIcon } from './weblink';
148
+ export { default as ConvertToWebLinkIcon } from './convert-to-weblink';
149
+ export { default as ExternalLinkIcon } from './external-link';
package/dist/es/components/icons/toolbar-cross-reference.js ADDED
@@ -0,0 +1,3 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ 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" }) }));
3
+ export default ToolbarCrossReferenceIcon;
package/dist/types/components/ExpandableSection.d.ts CHANGED
@@ -1,9 +1,11 @@
1
- import { FC, ReactNode } from 'react';
1
+ import React, { FC, ReactNode } from 'react';
2
2
  interface ExpandableSectionProps {
3
3
  title: ReactNode;
4
4
  children: ReactNode;
5
5
  defaultOpen?: boolean;
6
6
  bordered?: boolean;
7
+ className?: string;
8
+ icon?: FC<React.SVGAttributes<SVGElement>>;
7
9
  }
8
10
  export declare const ExpandableSection: FC<ExpandableSectionProps>;
9
11
  export {};
package/dist/types/components/icons/convert-to-weblink.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { IconProps } from './types';
3
+ declare const ConvertToWebLinkIcon: React.FC<IconProps>;
4
+ export default ConvertToWebLinkIcon;
package/dist/types/components/icons/external-link.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { IconProps } from './types';
3
+ declare const ExternalLinkIcon: React.FC<IconProps>;
4
+ export default ExternalLinkIcon;
package/dist/types/components/icons/index.d.ts CHANGED
@@ -115,6 +115,7 @@ export { default as TickIcon } from './tick';
115
115
  export { default as ToolbarBoldIcon } from './toolbar-bold';
116
116
  export { default as ToolbarBoxedTextIcon } from './toolbar-boxed-text';
117
117
  export { default as ToolbarCitationIcon } from './toolbar-citation';
118
+ export { default as ToolbarCrossReferenceIcon } from './toolbar-cross-reference';
118
119
  export { default as ToolbarCodeIcon } from './toolbar-code';
119
120
  export { default as ToolbarEquationIcon } from './toolbar-equation';
120
121
  export { default as ToolbarFigureIcon } from './toolbar-figure';
@@ -144,3 +145,5 @@ export { default as EyeIcon } from './eye-icon';
144
145
  export { default as NotificationsIcon } from './notifications';
145
146
  export { default as PencilIcon } from './pencil-icon';
146
147
  export { default as WebLinkIcon } from './weblink';
148
+ export { default as ConvertToWebLinkIcon } from './convert-to-weblink';
149
+ export { default as ExternalLinkIcon } from './external-link';
package/dist/types/components/icons/toolbar-cross-reference.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { IconProps } from './types';
3
+ declare const ToolbarCrossReferenceIcon: React.FC<IconProps>;
4
+ export default ToolbarCrossReferenceIcon;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@manuscripts/style-guide",
3
3
  "description": "Shared components for Manuscripts applications",
4
- "version": "3.7.0",
4
+ "version": "3.7.2",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",