@manuscripts/style-guide 3.6.5 → 3.7.0

package/dist/cjs/components/ExpandableSection.js

@@ -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, 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 }) }) })] }));
 };
 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/icons/index.js

@@ -19,8 +19,8 @@ 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.ToolbarFigureIcon = exports.ToolbarEquationIcon = exports.ToolbarCodeIcon = exports.ToolbarCitationIcon = exports.ToolbarBoxedTextIcon = 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.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 = 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.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;
 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");
@@ -151,6 +151,16 @@ var lock_1 = require("./lock");
 Object.defineProperty(exports, "LockIcon", { enumerable: true, get: function () { return __importDefault(lock_1).default; } });
 var logout_1 = require("./logout");
 Object.defineProperty(exports, "LogoutIcon", { enumerable: true, get: function () { return __importDefault(logout_1).default; } });
+var leading_hero_image_1 = require("./leading-hero-image");
+Object.defineProperty(exports, "LeadingHeroImageIcon", { enumerable: true, get: function () { return __importDefault(leading_hero_image_1).default; } });
+var leading_small_float_1 = require("./leading-small-float");
+Object.defineProperty(exports, "LeadingSmallFloatIcon", { enumerable: true, get: function () { return __importDefault(leading_small_float_1).default; } });
+var leading_large_float_1 = require("./leading-large-float");
+Object.defineProperty(exports, "LeadingLargeFloatIcon", { enumerable: true, get: function () { return __importDefault(leading_large_float_1).default; } });
+var leading_wallpaper_1 = require("./leading-wallpaper");
+Object.defineProperty(exports, "LeadingWallpaperIcon", { enumerable: true, get: function () { return __importDefault(leading_wallpaper_1).default; } });
+var leading_half_left_1 = require("./leading-half-left");
+Object.defineProperty(exports, "LeadingHalfLeftIcon", { enumerable: true, get: function () { return __importDefault(leading_half_left_1).default; } });
 var manuscript_1 = require("./manuscript");
 Object.defineProperty(exports, "ManuscriptIcon", { enumerable: true, get: function () { return __importDefault(manuscript_1).default; } });
 var outline_block_quote_1 = require("./outline-block-quote");
@@ -271,3 +281,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/leading-half-left.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LeadingHalfLeftIcon = (props) => ((0, jsx_runtime_1.jsxs)("svg", { width: "104", height: "34", viewBox: "0 0 104 34", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [(0, jsx_runtime_1.jsx)("path", { d: "M52 0H104V34H52V0Z", fill: "url(#paint0_linear_16_6209)" }), (0, jsx_runtime_1.jsx)("path", { d: "M0 0H52V34H0V0Z", fill: "#6F6F6F" }), (0, jsx_runtime_1.jsx)("rect", { x: "4", y: "9", width: "16", height: "3", fill: "white" }), (0, jsx_runtime_1.jsx)("rect", { x: "4", y: "15", width: "43", height: "4", fill: "white" }), (0, jsx_runtime_1.jsx)("rect", { x: "4", y: "22", width: "36", height: "3", fill: "white" }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "paint0_linear_16_6209", x1: "67.7857", y1: "3.00714e-08", x2: "98.0958", y2: "27.5621", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#898989" }), (0, jsx_runtime_1.jsx)("stop", { offset: "0.461538", stopColor: "#D9D9D9" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#898989" })] }) })] }));
+exports.default = LeadingHalfLeftIcon;

package/dist/cjs/components/icons/leading-hero-image.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LeadingHeroImageIcon = (props) => ((0, jsx_runtime_1.jsxs)("svg", { width: "104", height: "26", viewBox: "0 0 104 26", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0H104V26H0V0Z", fill: "url(#paint0_linear_16_6153)" }), (0, jsx_runtime_1.jsx)("rect", { x: "4", y: "5", width: "16", height: "3", fill: "white" }), (0, jsx_runtime_1.jsx)("rect", { x: "4", y: "11", width: "64", height: "4", fill: "white" }), (0, jsx_runtime_1.jsx)("rect", { x: "4", y: "18", width: "40", height: "3", fill: "white" }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "paint0_linear_16_6153", x1: "31.5714", y1: "2.29958e-08", x2: "48.2097", y2: "39.5702", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#898989" }), (0, jsx_runtime_1.jsx)("stop", { offset: "0.461538", stopColor: "#D9D9D9" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#898989" })] }) })] }));
+exports.default = LeadingHeroImageIcon;

package/dist/cjs/components/icons/leading-large-float.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LeadingLargeFloatIcon = (props) => ((0, jsx_runtime_1.jsxs)("svg", { width: "104", height: "77", viewBox: "0 0 104 77", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0H104V55H0V0Z", fill: "#6F6F6F" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 25H94V77H10V25Z", fill: "url(#paint0_linear_16_6175)" }), (0, jsx_runtime_1.jsx)("rect", { x: "44", y: "5", width: "16", height: "3", fill: "white" }), (0, jsx_runtime_1.jsx)("rect", { x: "29", y: "11", width: "46", height: "4", fill: "white" }), (0, jsx_runtime_1.jsx)("rect", { x: "32", y: "18", width: "40", height: "3", fill: "white" }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "paint0_linear_16_6175", x1: "35.5", y1: "25", x2: "82.0283", y2: "69.6883", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#898989" }), (0, jsx_runtime_1.jsx)("stop", { offset: "0.461538", stopColor: "#D9D9D9" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#898989" })] }) })] }));
+exports.default = LeadingLargeFloatIcon;

package/dist/cjs/components/icons/leading-small-float.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LeadingSmallFloatIcon = (props) => ((0, jsx_runtime_1.jsxs)("svg", { width: "104", height: "30", viewBox: "0 0 104 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0H104V26H0V0Z", fill: "#6F6F6F" }), (0, jsx_runtime_1.jsx)("path", { d: "M74 4H100V30H74V4Z", fill: "url(#paint0_linear_16_6163)" }), (0, jsx_runtime_1.jsx)("rect", { x: "4", y: "5", width: "16", height: "3", fill: "white" }), (0, jsx_runtime_1.jsx)("rect", { x: "4", y: "11", width: "46", height: "4", fill: "white" }), (0, jsx_runtime_1.jsx)("rect", { x: "4", y: "18", width: "40", height: "3", fill: "white" }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "paint0_linear_16_6163", x1: "81.8929", y1: "4", x2: "102.348", y2: "16.1622", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#898989" }), (0, jsx_runtime_1.jsx)("stop", { offset: "0.461538", stopColor: "#D9D9D9" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#898989" })] }) })] }));
+exports.default = LeadingSmallFloatIcon;

package/dist/cjs/components/icons/leading-wallpaper.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LeadingWallpaperIcon = (props) => ((0, jsx_runtime_1.jsxs)("svg", { width: "104", height: "63", viewBox: "0 0 104 63", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 0H104V63H0V0Z", fill: "url(#paint0_linear_16_6198)" }), (0, jsx_runtime_1.jsx)("rect", { x: "44", y: "36", width: "16", height: "3", fill: "white" }), (0, jsx_runtime_1.jsx)("rect", { x: "29", y: "42", width: "46", height: "4", fill: "white" }), (0, jsx_runtime_1.jsx)("rect", { x: "32", y: "49", width: "40", height: "3", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M53.8958 55.1386C54.1736 54.934 54.5947 54.9588 54.8363 55.1941C55.078 55.4294 55.0486 55.786 54.7708 55.9906L52.043 58L49.2398 56.0208C48.957 55.8211 48.9189 55.4651 49.1546 55.2256C49.3904 54.9861 49.8108 54.9538 50.0936 55.1534L52.0247 56.5169L53.8958 55.1386Z", fill: "white" }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "paint0_linear_16_6198", x1: "31.5714", y1: "5.57205e-08", x2: "87.9783", y2: "55.3638", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#898989" }), (0, jsx_runtime_1.jsx)("stop", { offset: "0.461538", stopColor: "#D9D9D9" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#898989" })] }) })] }));
+exports.default = LeadingWallpaperIcon;

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/cjs/components/icons/x.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const XIcon = ({ fill = '#353535', ...props }) => ((0, jsx_runtime_1.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [(0, jsx_runtime_1.jsx)("path", { d: "M9.89853 0.833309C10.293 0.439192 10.9322 0.439008 11.3266 0.833309C11.7209 1.22764 11.7207 1.86688 11.3266 2.26133L2.50153 11.0864C2.1071 11.4808 1.46793 11.4808 1.07351 11.0864C0.679117 10.6919 0.679116 10.0528 1.07351 9.65833L9.89853 0.833309Z", fill: fill, stroke: fill, "stroke-width": "0.1" }), (0, jsx_runtime_1.jsx)("path", { d: "M9.89853 11.0867C10.293 11.4808 10.9322 11.481 11.3266 11.0867C11.7209 10.6924 11.7207 10.0531 11.3266 9.65868L2.50153 0.833656C2.1071 0.439254 1.46793 0.439236 1.07351 0.833656C0.679117 1.22808 0.679116 1.86726 1.07351 2.26168L9.89853 11.0867Z", fill: fill, stroke: fill, "stroke-width": "0.1" })] }));
+const XIcon = ({ fill = '#353535', ...props }) => ((0, jsx_runtime_1.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [(0, jsx_runtime_1.jsx)("path", { d: "M9.89853 0.833309C10.293 0.439192 10.9322 0.439008 11.3266 0.833309C11.7209 1.22764 11.7207 1.86688 11.3266 2.26133L2.50153 11.0864C2.1071 11.4808 1.46793 11.4808 1.07351 11.0864C0.679117 10.6919 0.679116 10.0528 1.07351 9.65833L9.89853 0.833309Z", fill: fill, stroke: fill, strokeWidth: "0.1" }), (0, jsx_runtime_1.jsx)("path", { d: "M9.89853 11.0867C10.293 11.4808 10.9322 11.481 11.3266 11.0867C11.7209 10.6924 11.7207 10.0531 11.3266 9.65868L2.50153 0.833656C2.1071 0.439254 1.46793 0.439236 1.07351 0.833656C0.679117 1.22808 0.679116 1.86726 1.07351 2.26168L9.89853 11.0867Z", fill: fill, stroke: fill, strokeWidth: "0.1" })] }));
 exports.XIcon = XIcon;
 exports.default = exports.XIcon;

package/dist/es/components/ExpandableSection.js

@@ -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, 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 }) }) })] }));
 };
 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/icons/index.js

@@ -78,6 +78,11 @@ export { default as InspectorPluginIcon } from './inspector-plugin';
 export { default as LinkIcon } from './link';
 export { default as LockIcon } from './lock';
 export { default as LogoutIcon } from './logout';
+export { default as LeadingHeroImageIcon } from './leading-hero-image';
+export { default as LeadingSmallFloatIcon } from './leading-small-float';
+export { default as LeadingLargeFloatIcon } from './leading-large-float';
+export { default as LeadingWallpaperIcon } from './leading-wallpaper';
+export { default as LeadingHalfLeftIcon } from './leading-half-left';
 export { default as ManuscriptIcon } from './manuscript';
 export { default as OutlineBlockQuoteIcon } from './outline-block-quote';
 export { default as OutlineCodeIcon } from './outline-code';
@@ -138,3 +143,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/leading-half-left.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LeadingHalfLeftIcon = (props) => (_jsxs("svg", { width: "104", height: "34", viewBox: "0 0 104 34", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M52 0H104V34H52V0Z", fill: "url(#paint0_linear_16_6209)" }), _jsx("path", { d: "M0 0H52V34H0V0Z", fill: "#6F6F6F" }), _jsx("rect", { x: "4", y: "9", width: "16", height: "3", fill: "white" }), _jsx("rect", { x: "4", y: "15", width: "43", height: "4", fill: "white" }), _jsx("rect", { x: "4", y: "22", width: "36", height: "3", fill: "white" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "paint0_linear_16_6209", x1: "67.7857", y1: "3.00714e-08", x2: "98.0958", y2: "27.5621", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#898989" }), _jsx("stop", { offset: "0.461538", stopColor: "#D9D9D9" }), _jsx("stop", { offset: "1", stopColor: "#898989" })] }) })] }));
+export default LeadingHalfLeftIcon;

package/dist/es/components/icons/leading-hero-image.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LeadingHeroImageIcon = (props) => (_jsxs("svg", { width: "104", height: "26", viewBox: "0 0 104 26", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M0 0H104V26H0V0Z", fill: "url(#paint0_linear_16_6153)" }), _jsx("rect", { x: "4", y: "5", width: "16", height: "3", fill: "white" }), _jsx("rect", { x: "4", y: "11", width: "64", height: "4", fill: "white" }), _jsx("rect", { x: "4", y: "18", width: "40", height: "3", fill: "white" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "paint0_linear_16_6153", x1: "31.5714", y1: "2.29958e-08", x2: "48.2097", y2: "39.5702", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#898989" }), _jsx("stop", { offset: "0.461538", stopColor: "#D9D9D9" }), _jsx("stop", { offset: "1", stopColor: "#898989" })] }) })] }));
+export default LeadingHeroImageIcon;

package/dist/es/components/icons/leading-large-float.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LeadingLargeFloatIcon = (props) => (_jsxs("svg", { width: "104", height: "77", viewBox: "0 0 104 77", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M0 0H104V55H0V0Z", fill: "#6F6F6F" }), _jsx("path", { d: "M10 25H94V77H10V25Z", fill: "url(#paint0_linear_16_6175)" }), _jsx("rect", { x: "44", y: "5", width: "16", height: "3", fill: "white" }), _jsx("rect", { x: "29", y: "11", width: "46", height: "4", fill: "white" }), _jsx("rect", { x: "32", y: "18", width: "40", height: "3", fill: "white" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "paint0_linear_16_6175", x1: "35.5", y1: "25", x2: "82.0283", y2: "69.6883", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#898989" }), _jsx("stop", { offset: "0.461538", stopColor: "#D9D9D9" }), _jsx("stop", { offset: "1", stopColor: "#898989" })] }) })] }));
+export default LeadingLargeFloatIcon;

package/dist/es/components/icons/leading-small-float.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LeadingSmallFloatIcon = (props) => (_jsxs("svg", { width: "104", height: "30", viewBox: "0 0 104 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M0 0H104V26H0V0Z", fill: "#6F6F6F" }), _jsx("path", { d: "M74 4H100V30H74V4Z", fill: "url(#paint0_linear_16_6163)" }), _jsx("rect", { x: "4", y: "5", width: "16", height: "3", fill: "white" }), _jsx("rect", { x: "4", y: "11", width: "46", height: "4", fill: "white" }), _jsx("rect", { x: "4", y: "18", width: "40", height: "3", fill: "white" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "paint0_linear_16_6163", x1: "81.8929", y1: "4", x2: "102.348", y2: "16.1622", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#898989" }), _jsx("stop", { offset: "0.461538", stopColor: "#D9D9D9" }), _jsx("stop", { offset: "1", stopColor: "#898989" })] }) })] }));
+export default LeadingSmallFloatIcon;

package/dist/es/components/icons/leading-wallpaper.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LeadingWallpaperIcon = (props) => (_jsxs("svg", { width: "104", height: "63", viewBox: "0 0 104 63", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M0 0H104V63H0V0Z", fill: "url(#paint0_linear_16_6198)" }), _jsx("rect", { x: "44", y: "36", width: "16", height: "3", fill: "white" }), _jsx("rect", { x: "29", y: "42", width: "46", height: "4", fill: "white" }), _jsx("rect", { x: "32", y: "49", width: "40", height: "3", fill: "white" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M53.8958 55.1386C54.1736 54.934 54.5947 54.9588 54.8363 55.1941C55.078 55.4294 55.0486 55.786 54.7708 55.9906L52.043 58L49.2398 56.0208C48.957 55.8211 48.9189 55.4651 49.1546 55.2256C49.3904 54.9861 49.8108 54.9538 50.0936 55.1534L52.0247 56.5169L53.8958 55.1386Z", fill: "white" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "paint0_linear_16_6198", x1: "31.5714", y1: "5.57205e-08", x2: "87.9783", y2: "55.3638", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#898989" }), _jsx("stop", { offset: "0.461538", stopColor: "#D9D9D9" }), _jsx("stop", { offset: "1", stopColor: "#898989" })] }) })] }));
+export default LeadingWallpaperIcon;

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/es/components/icons/x.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const XIcon = ({ fill = '#353535', ...props }) => (_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M9.89853 0.833309C10.293 0.439192 10.9322 0.439008 11.3266 0.833309C11.7209 1.22764 11.7207 1.86688 11.3266 2.26133L2.50153 11.0864C2.1071 11.4808 1.46793 11.4808 1.07351 11.0864C0.679117 10.6919 0.679116 10.0528 1.07351 9.65833L9.89853 0.833309Z", fill: fill, stroke: fill, "stroke-width": "0.1" }), _jsx("path", { d: "M9.89853 11.0867C10.293 11.4808 10.9322 11.481 11.3266 11.0867C11.7209 10.6924 11.7207 10.0531 11.3266 9.65868L2.50153 0.833656C2.1071 0.439254 1.46793 0.439236 1.07351 0.833656C0.679117 1.22808 0.679116 1.86726 1.07351 2.26168L9.89853 11.0867Z", fill: fill, stroke: fill, "stroke-width": "0.1" })] }));
+export const XIcon = ({ fill = '#353535', ...props }) => (_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M9.89853 0.833309C10.293 0.439192 10.9322 0.439008 11.3266 0.833309C11.7209 1.22764 11.7207 1.86688 11.3266 2.26133L2.50153 11.0864C2.1071 11.4808 1.46793 11.4808 1.07351 11.0864C0.679117 10.6919 0.679116 10.0528 1.07351 9.65833L9.89853 0.833309Z", fill: fill, stroke: fill, strokeWidth: "0.1" }), _jsx("path", { d: "M9.89853 11.0867C10.293 11.4808 10.9322 11.481 11.3266 11.0867C11.7209 10.6924 11.7207 10.0531 11.3266 9.65868L2.50153 0.833656C2.1071 0.439254 1.46793 0.439236 1.07351 0.833656C0.679117 1.22808 0.679116 1.86726 1.07351 2.26168L9.89853 11.0867Z", fill: fill, stroke: fill, strokeWidth: "0.1" })] }));
 export default XIcon;

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

@@ -78,6 +78,11 @@ export { default as InspectorPluginIcon } from './inspector-plugin';
 export { default as LinkIcon } from './link';
 export { default as LockIcon } from './lock';
 export { default as LogoutIcon } from './logout';
+export { default as LeadingHeroImageIcon } from './leading-hero-image';
+export { default as LeadingSmallFloatIcon } from './leading-small-float';
+export { default as LeadingLargeFloatIcon } from './leading-large-float';
+export { default as LeadingWallpaperIcon } from './leading-wallpaper';
+export { default as LeadingHalfLeftIcon } from './leading-half-left';
 export { default as ManuscriptIcon } from './manuscript';
 export { default as OutlineBlockQuoteIcon } from './outline-block-quote';
 export { default as OutlineCodeIcon } from './outline-code';
@@ -138,3 +143,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/leading-half-left.d.ts

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

package/dist/types/components/icons/leading-hero-image.d.ts

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

package/dist/types/components/icons/leading-large-float.d.ts

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

package/dist/types/components/icons/leading-small-float.d.ts

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

package/dist/types/components/icons/leading-wallpaper.d.ts

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

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.5",
+  "version": "3.7.0",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",