@manuscripts/style-guide 3.5.13 → 3.5.15

package/README.md

@@ -4,8 +4,8 @@ React components for Manuscripts applications.
 
 ## Example usage
 
-```tsx
-import { PrimaryButton } from '@manuscripts/style-guide' 
+```tsx 
+import { PrimaryButton } from '@manuscripts/style-guide'
 
 const Example: React.FunctionComponent<{
   handleClick: React.MouseEventHandler<HTMLButtonElement>
@@ -14,12 +14,12 @@ const Example: React.FunctionComponent<{
     <PrimaryButton onClick={handleClick}>Done</PrimaryButton>
   </div>
 )
-```
+``` 
 
-## Development
+## Development 
 
 Run `yarn build` to build the `dist` folder for distribution. 
 
 Run `yarn dev` to automatically rebuild when a file is changed.
 
-If a component needs new theme properties, add the types to `src/theme.ts` and add the corresponding values to `.storybook/theme.ts`.
+If a component needs new theme properties, add the types to `src/theme.ts` and add the corresponding values to `.storybook/theme.ts`. 

package/dist/cjs/components/AlertMessage.js

@@ -21,12 +21,9 @@ const AlertMessage = ({ title, message, variant, link, closeConfig, className, }
     const AlertIcon = variantIcons[variant];
     const handleClose = () => {
         setIsOpen(false);
-        closeConfig?.onClick?.();
+        setTimeout(() => closeConfig?.onClick?.(), 175);
     };
-    if (!isOpen) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsxs)(Alert, { "$variant": variant, className: className, children: [(0, jsx_runtime_1.jsx)(IconWrapper, { "$hasTitle": !!title, children: (0, jsx_runtime_1.jsx)(AlertIcon, {}) }), (0, jsx_runtime_1.jsxs)(Content, { children: [title && (0, jsx_runtime_1.jsx)(Title, { children: title }), (0, jsx_runtime_1.jsxs)(MessageRow, { children: [(0, jsx_runtime_1.jsx)(Message, { children: message }), link && ((0, jsx_runtime_1.jsx)(ActionLink, { type: "button", onClick: link.onClick, children: link.label }))] })] }), closeConfig && ((0, jsx_runtime_1.jsx)(AlertCloseAction, { closeConfig: closeConfig, onClose: handleClose }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Alert, { "$variant": variant, className: className, "data-open": isOpen ? '' : undefined, children: [(0, jsx_runtime_1.jsx)(IconWrapper, { "$hasTitle": !!title, children: (0, jsx_runtime_1.jsx)(AlertIcon, {}) }), (0, jsx_runtime_1.jsxs)(Content, { children: [title && (0, jsx_runtime_1.jsx)(Title, { children: title }), (0, jsx_runtime_1.jsxs)(MessageRow, { children: [(0, jsx_runtime_1.jsx)(Message, { children: message }), link && ((0, jsx_runtime_1.jsx)(ActionLink, { type: "button", onClick: link.onClick, children: link.label }))] })] }), closeConfig && ((0, jsx_runtime_1.jsx)(AlertCloseAction, { closeConfig: closeConfig, onClose: handleClose }))] }));
 };
 exports.AlertMessage = AlertMessage;
 const Alert = styled_components_1.default.div `
@@ -41,6 +38,21 @@ const Alert = styled_components_1.default.div `
     ${(props) => props.theme.font.family.Lato};
   gap: ${(props) => props.theme.grid.unit * 3}px;
   padding: ${(props) => props.theme.grid.unit * 3}px;
+  opacity: 1;
+  transition:
+    opacity 200ms ease-out,
+    display 200ms allow-discrete;
+
+  &:not([data-open]) {
+    display: none;
+    opacity: 0;
+  }
+
+  @starting-style {
+    &[data-open] {
+      opacity: 0;
+    }
+  }
 `;
 const IconWrapper = styled_components_1.default.div `
   display: flex;

package/dist/cjs/components/Badge.js

@@ -1,29 +1,33 @@
 "use strict";
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.Badge = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2px;
-  border-radius: 50px;
+const Badge = ({ variant = 'default', label, width, size = 'md', }) => {
+    return ((0, jsx_runtime_1.jsx)(BadgeContainer, { "$variant": variant, "$width": width, "$size": size, children: label }));
+};
+exports.Badge = Badge;
+const BadgeContainer = styled_components_1.default.div `
+  background: ${(props) => props.theme.colors.badge[props.$variant].background};
+  color: ${(props) => props.theme.colors.badge[props.$variant].color};
+  font-family: ${(props) => props.theme.font.family.Lato};
+  font-weight: ${(props) => props.theme.font.weight.bold};
+  font-size: ${(props) => props.$size === 'sm'
+    ? props.theme.font.size.small
+    : props.theme.font.size.normal};
+  line-height: ${(props) => props.$size === 'sm'
+    ? props.theme.font.lineHeight.normal
+    : props.theme.font.lineHeight.large};
+  width: ${(props) => (props.$width ? `${props.$width}px` : 'fit-content')};
+  padding-inline: ${(props) => props.theme.grid.unit * 2}px;
+  padding-block: ${(props) => props.theme.grid.unit}px;
+  border-radius: ${(props) => props.theme.grid.radius.small};
+  text-align: center;
+  border: ${(props) => props.theme.colors.badge[props.$variant].border
+    ? `1px solid ${props.theme.colors.badge[props.$variant].border}`
+    : 'none'};
+  min-width: max-content;
 `;

package/dist/cjs/components/ExpandableSection.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpandableSection = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const icons_1 = require("./icons");
+const ExpandableSection = ({ title, children, defaultOpen = true, bordered = false, }) => {
+    const [open, setOpen] = (0, react_1.useState)(defaultOpen);
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            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 }) }) })] }));
+};
+exports.ExpandableSection = ExpandableSection;
+const Container = styled_components_1.default.div `
+  border: ${(props) => props.bordered
+    ? `1px solid ${props.theme.colors.border.tertiary}`
+    : 'none'};
+  border-radius: ${(props) => props.theme.grid.radius.default};
+  background: ${(props) => props.theme.colors.background.primary};
+`;
+const Header = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${(props) => props.theme.grid.unit * 4}px;
+  cursor: pointer;
+  font-weight: ${(props) => props.theme.font.weight.semibold};
+`;
+const Title = styled_components_1.default.span `
+  font-size: ${(props) => props.theme.font.size.medium};
+  color: ${(props) => props.theme.colors.text.primary};
+`;
+const ArrowIcon = (0, styled_components_1.default)(icons_1.ArrowDownCircleIcon) `
+  transition: transform 0.25s ease;
+  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;
+`;
+const ContentInner = styled_components_1.default.div `
+  overflow: visible;
+  min-height: 0;
+`;

package/dist/cjs/components/NavDropdown.js

@@ -37,7 +37,6 @@ exports.NavDropdownButton = exports.NavDropdownButtonContainer = exports.Notific
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_router_dom_1 = require("react-router-dom");
 const styled_components_1 = __importStar(require("styled-components"));
-const Badge_1 = require("./Badge");
 const Button_1 = require("./Button");
 const icons_1 = require("./icons");
 exports.NavDropdownContainer = styled_components_1.default.div `
@@ -120,7 +119,7 @@ exports.NavDropdownToggle = (0, styled_components_1.default)(icons_1.ArrowUpIcon
     transform: rotate(0deg);
   }
 `;
-exports.NotificationsBadge = (0, styled_components_1.default)(Badge_1.Badge) `
+exports.NotificationsBadge = styled_components_1.default.div `
   background-color: ${(props) => props.isOpen
     ? props.theme.colors.background.success
     : props.theme.colors.brand.default};
@@ -131,6 +130,11 @@ exports.NotificationsBadge = (0, styled_components_1.default)(Badge_1.Badge) `
   max-height: 10px;
   min-width: 10px;
   min-height: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  border-radius: 50px;
 `;
 exports.NavDropdownButtonContainer = (0, styled_components_1.default)(Button_1.SecondaryButton).attrs((props) => ({
     selected: props.isOpen,

package/dist/cjs/components/Text.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SecondarySmallText = exports.PrimarySmallText = exports.SecondaryBoldHeading = exports.PrimaryBoldHeading = void 0;
+exports.SectionTitle = exports.SecondarySmallText = exports.PrimarySmallText = exports.SecondaryBoldHeading = exports.PrimaryBoldHeading = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 exports.PrimaryBoldHeading = styled_components_1.default.div `
   font-family: ${(props) => props.theme.font.family.sans};
@@ -41,3 +41,9 @@ exports.PrimarySmallText = styled_components_1.default.div `
 exports.SecondarySmallText = (0, styled_components_1.default)(exports.PrimarySmallText) `
   color: ${(props) => props.theme.colors.text.secondary};
 `;
+exports.SectionTitle = styled_components_1.default.div `
+  font-size: ${(props) => props.theme.font.size.medium};
+  font-weight: ${(props) => props.theme.font.weight.semibold};
+  color: ${(props) => props.theme.colors.text.primary};
+  padding-bottom: ${(props) => props.theme.grid.unit * 4}px;
+`;

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 = (props) => ((0, jsx_runtime_1.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M14 1.415L12.585 0L7 5.585L1.415 0L0 1.415L5.585 7L0 12.585L1.415 14L7 8.415L12.585 14L14 12.585L8.415 7L14 1.415Z", fill: props.fill || '#353535' }) }));
+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" })] }));
 exports.XIcon = XIcon;
 exports.default = exports.XIcon;

package/dist/cjs/defaultTheme.js

@@ -180,11 +180,30 @@ exports.defaultTheme = {
             error: colors.punchRed,
             info: colors.jellyBeanBlue,
             success: colors.killarneyGreen,
-            warning: colors.contrastOrange
+            warning: colors.contrastOrange,
         },
         outline: {
             focus: colors.focusBlue,
         },
+        badge: {
+            default: {
+                background: colors.mercuryGrey,
+                color: colors.greyDark,
+            },
+            primary: { background: colors.manuscriptsBlueDark, color: colors.white },
+            warning: {
+                background: colors.manuscriptsSecondary,
+                color: colors.greyDark,
+            },
+            info: { background: colors.manuscriptsIcons, color: colors.white },
+            bordered: {
+                background: colors.seashellGrey,
+                color: colors.greyDark,
+                border: colors.mercuryGrey,
+            },
+            success: { background: colors.contrastGreen, color: colors.white },
+            dark: { background: colors.greyMuted, color: colors.white },
+        },
     },
     font: {
         family: {

package/dist/cjs/index.js

@@ -51,7 +51,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToggleIcon = exports.ToggleHeader = exports.StyledRadioGroup = exports.defaultTheme = exports.colors = void 0;
+exports.StyledRadioGroup = exports.defaultTheme = exports.colors = void 0;
 exports.colors = __importStar(require("./colors"));
 var defaultTheme_1 = require("./defaultTheme");
 Object.defineProperty(exports, "defaultTheme", { enumerable: true, get: function () { return defaultTheme_1.defaultTheme; } });
@@ -76,13 +76,9 @@ __exportStar(require("./components/TextField"), exports);
 __exportStar(require("./components/FormFieldContainer"), exports);
 __exportStar(require("./components/FormCommon"), exports);
 __exportStar(require("./components/ToggleSwitch"), exports);
-var ToggleHeader_1 = require("./components/ToggleHeader");
-Object.defineProperty(exports, "ToggleHeader", { enumerable: true, get: function () { return ToggleHeader_1.ToggleHeader; } });
-Object.defineProperty(exports, "ToggleIcon", { enumerable: true, get: function () { return ToggleHeader_1.ToggleIcon; } });
 __exportStar(require("./components/Tooltip"), exports);
 __exportStar(require("./components/icons"), exports);
 __exportStar(require("./components/Inspector"), exports);
-__exportStar(require("./components/InspectorSection"), exports);
 __exportStar(require("./components/Badge"), exports);
 __exportStar(require("./components/NavDropdown"), exports);
 __exportStar(require("./components/Dropdown"), exports);
@@ -95,6 +91,7 @@ __exportStar(require("./components/Drawer"), exports);
 __exportStar(require("./components/DatePicker"), exports);
 __exportStar(require("./components/SelectField"), exports);
 __exportStar(require("./components/SelectedItemsBox"), exports);
+__exportStar(require("./components/ExpandableSection"), exports);
 __exportStar(require("./hooks/use-dropdown"), exports);
 __exportStar(require("./hooks/use-menus"), exports);
 __exportStar(require("./hooks/use-scroll-detection"), exports);

package/dist/es/components/AlertMessage.js

@@ -15,12 +15,9 @@ export const AlertMessage = ({ title, message, variant, link, closeConfig, class
     const AlertIcon = variantIcons[variant];
     const handleClose = () => {
         setIsOpen(false);
-        closeConfig?.onClick?.();
+        setTimeout(() => closeConfig?.onClick?.(), 175);
     };
-    if (!isOpen) {
-        return null;
-    }
-    return (_jsxs(Alert, { "$variant": variant, className: className, children: [_jsx(IconWrapper, { "$hasTitle": !!title, children: _jsx(AlertIcon, {}) }), _jsxs(Content, { children: [title && _jsx(Title, { children: title }), _jsxs(MessageRow, { children: [_jsx(Message, { children: message }), link && (_jsx(ActionLink, { type: "button", onClick: link.onClick, children: link.label }))] })] }), closeConfig && (_jsx(AlertCloseAction, { closeConfig: closeConfig, onClose: handleClose }))] }));
+    return (_jsxs(Alert, { "$variant": variant, className: className, "data-open": isOpen ? '' : undefined, children: [_jsx(IconWrapper, { "$hasTitle": !!title, children: _jsx(AlertIcon, {}) }), _jsxs(Content, { children: [title && _jsx(Title, { children: title }), _jsxs(MessageRow, { children: [_jsx(Message, { children: message }), link && (_jsx(ActionLink, { type: "button", onClick: link.onClick, children: link.label }))] })] }), closeConfig && (_jsx(AlertCloseAction, { closeConfig: closeConfig, onClose: handleClose }))] }));
 };
 const Alert = styled.div `
   align-items: center;
@@ -34,6 +31,21 @@ const Alert = styled.div `
     ${(props) => props.theme.font.family.Lato};
   gap: ${(props) => props.theme.grid.unit * 3}px;
   padding: ${(props) => props.theme.grid.unit * 3}px;
+  opacity: 1;
+  transition:
+    opacity 200ms ease-out,
+    display 200ms allow-discrete;
+
+  &:not([data-open]) {
+    display: none;
+    opacity: 0;
+  }
+
+  @starting-style {
+    &[data-open] {
+      opacity: 0;
+    }
+  }
 `;
 const IconWrapper = styled.div `
   display: flex;

package/dist/es/components/Badge.js

@@ -1,23 +1,26 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
-export const Badge = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2px;
-  border-radius: 50px;
+export const Badge = ({ variant = 'default', label, width, size = 'md', }) => {
+    return (_jsx(BadgeContainer, { "$variant": variant, "$width": width, "$size": size, children: label }));
+};
+const BadgeContainer = styled.div `
+  background: ${(props) => props.theme.colors.badge[props.$variant].background};
+  color: ${(props) => props.theme.colors.badge[props.$variant].color};
+  font-family: ${(props) => props.theme.font.family.Lato};
+  font-weight: ${(props) => props.theme.font.weight.bold};
+  font-size: ${(props) => props.$size === 'sm'
+    ? props.theme.font.size.small
+    : props.theme.font.size.normal};
+  line-height: ${(props) => props.$size === 'sm'
+    ? props.theme.font.lineHeight.normal
+    : props.theme.font.lineHeight.large};
+  width: ${(props) => (props.$width ? `${props.$width}px` : 'fit-content')};
+  padding-inline: ${(props) => props.theme.grid.unit * 2}px;
+  padding-block: ${(props) => props.theme.grid.unit}px;
+  border-radius: ${(props) => props.theme.grid.radius.small};
+  text-align: center;
+  border: ${(props) => props.theme.colors.badge[props.$variant].border
+    ? `1px solid ${props.theme.colors.badge[props.$variant].border}`
+    : 'none'};
+  min-width: max-content;
 `;

package/dist/es/components/ExpandableSection.js

@@ -0,0 +1,48 @@
+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, }) => {
+    const [open, setOpen] = useState(defaultOpen);
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            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 }) }) })] }));
+};
+const Container = styled.div `
+  border: ${(props) => props.bordered
+    ? `1px solid ${props.theme.colors.border.tertiary}`
+    : 'none'};
+  border-radius: ${(props) => props.theme.grid.radius.default};
+  background: ${(props) => props.theme.colors.background.primary};
+`;
+const Header = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${(props) => props.theme.grid.unit * 4}px;
+  cursor: pointer;
+  font-weight: ${(props) => props.theme.font.weight.semibold};
+`;
+const Title = styled.span `
+  font-size: ${(props) => props.theme.font.size.medium};
+  color: ${(props) => props.theme.colors.text.primary};
+`;
+const ArrowIcon = styled(ArrowDownCircleIcon) `
+  transition: transform 0.25s ease;
+  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;
+`;
+const ContentInner = styled.div `
+  overflow: visible;
+  min-height: 0;
+`;

package/dist/es/components/NavDropdown.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { NavLink } from 'react-router-dom';
 import styled, { css } from 'styled-components';
-import { Badge } from './Badge';
 import { SecondaryButton } from './Button';
 import { ArrowUpIcon } from './icons';
 export const NavDropdownContainer = styled.div `
@@ -84,7 +83,7 @@ export const NavDropdownToggle = styled(ArrowUpIcon) `
     transform: rotate(0deg);
   }
 `;
-export const NotificationsBadge = styled(Badge) `
+export const NotificationsBadge = styled.div `
   background-color: ${(props) => props.isOpen
     ? props.theme.colors.background.success
     : props.theme.colors.brand.default};
@@ -95,6 +94,11 @@ export const NotificationsBadge = styled(Badge) `
   max-height: 10px;
   min-width: 10px;
   min-height: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  border-radius: 50px;
 `;
 export const NavDropdownButtonContainer = styled(SecondaryButton).attrs((props) => ({
     selected: props.isOpen,

package/dist/es/components/Text.js

@@ -35,3 +35,9 @@ export const PrimarySmallText = styled.div `
 export const SecondarySmallText = styled(PrimarySmallText) `
   color: ${(props) => props.theme.colors.text.secondary};
 `;
+export const SectionTitle = styled.div `
+  font-size: ${(props) => props.theme.font.size.medium};
+  font-weight: ${(props) => props.theme.font.weight.semibold};
+  color: ${(props) => props.theme.colors.text.primary};
+  padding-bottom: ${(props) => props.theme.grid.unit * 4}px;
+`;

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

@@ -1,3 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export const XIcon = (props) => (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { d: "M14 1.415L12.585 0L7 5.585L1.415 0L0 1.415L5.585 7L0 12.585L1.415 14L7 8.415L12.585 14L14 12.585L8.415 7L14 1.415Z", fill: props.fill || '#353535' }) }));
+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 default XIcon;

package/dist/es/defaultTheme.js

@@ -144,11 +144,30 @@ export const defaultTheme = {
             error: colors.punchRed,
             info: colors.jellyBeanBlue,
             success: colors.killarneyGreen,
-            warning: colors.contrastOrange
+            warning: colors.contrastOrange,
         },
         outline: {
             focus: colors.focusBlue,
         },
+        badge: {
+            default: {
+                background: colors.mercuryGrey,
+                color: colors.greyDark,
+            },
+            primary: { background: colors.manuscriptsBlueDark, color: colors.white },
+            warning: {
+                background: colors.manuscriptsSecondary,
+                color: colors.greyDark,
+            },
+            info: { background: colors.manuscriptsIcons, color: colors.white },
+            bordered: {
+                background: colors.seashellGrey,
+                color: colors.greyDark,
+                border: colors.mercuryGrey,
+            },
+            success: { background: colors.contrastGreen, color: colors.white },
+            dark: { background: colors.greyMuted, color: colors.white },
+        },
     },
     font: {
         family: {

package/dist/es/index.js

@@ -35,11 +35,9 @@ export * from './components/TextField';
 export * from './components/FormFieldContainer';
 export * from './components/FormCommon';
 export * from './components/ToggleSwitch';
-export { ToggleHeader, ToggleIcon } from './components/ToggleHeader';
 export * from './components/Tooltip';
 export * from './components/icons';
 export * from './components/Inspector';
-export * from './components/InspectorSection';
 export * from './components/Badge';
 export * from './components/NavDropdown';
 export * from './components/Dropdown';
@@ -52,6 +50,7 @@ export * from './components/Drawer';
 export * from './components/DatePicker';
 export * from './components/SelectField';
 export * from './components/SelectedItemsBox';
+export * from './components/ExpandableSection';
 export * from './hooks/use-dropdown';
 export * from './hooks/use-menus';
 export * from './hooks/use-scroll-detection';

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

@@ -1,5 +1,5 @@
 /*!
- * © 2019 Atypon Systems LLC
+ * © 2026 Atypon Systems LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -13,4 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export declare const Badge: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+import React from 'react';
+export type BadgeVariant = 'default' | 'primary' | 'warning' | 'info' | 'bordered' | 'success' | 'dark';
+export type BadgeSize = 'sm' | 'md';
+interface BadgeProps {
+    label: string;
+    variant?: BadgeVariant;
+    width?: number;
+    size?: BadgeSize;
+}
+export declare const Badge: React.FC<BadgeProps>;
+export {};

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

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+interface ExpandableSectionProps {
+    title: ReactNode;
+    children: ReactNode;
+    defaultOpen?: boolean;
+    bordered?: boolean;
+}
+export declare const ExpandableSection: FC<ExpandableSectionProps>;
+export {};

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

@@ -17,3 +17,4 @@ export declare const PrimaryBoldHeading: import("styled-components").StyledCompo
 export declare const SecondaryBoldHeading: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const PrimarySmallText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const SecondarySmallText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SectionTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -1,3 +1,3 @@
 import { IconProps } from './types';
-export declare const XIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const XIcon: ({ fill, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export default XIcon;

package/dist/types/index.d.ts

@@ -36,11 +36,9 @@ export * from './components/TextField';
 export * from './components/FormFieldContainer';
 export * from './components/FormCommon';
 export * from './components/ToggleSwitch';
-export { ToggleHeader, ToggleIcon } from './components/ToggleHeader';
 export * from './components/Tooltip';
 export * from './components/icons';
 export * from './components/Inspector';
-export * from './components/InspectorSection';
 export * from './components/Badge';
 export * from './components/NavDropdown';
 export * from './components/Dropdown';
@@ -53,6 +51,7 @@ export * from './components/Drawer';
 export * from './components/DatePicker';
 export * from './components/SelectField';
 export * from './components/SelectedItemsBox';
+export * from './components/ExpandableSection';
 export * from './hooks/use-dropdown';
 export * from './hooks/use-menus';
 export * from './hooks/use-scroll-detection';

package/dist/types/theme.d.ts

@@ -25,6 +25,7 @@ interface Colors {
     border: Border & Alerts & Variations;
     brand: Brand;
     button: Button;
+    badge: Badge;
     text: Text & Alerts & Variations;
     outline: Outline;
 }
@@ -103,6 +104,20 @@ interface Button {
     secondary: Elements;
     error: Elements;
 }
+interface BadgeVariant {
+    background: string;
+    color: string;
+    border?: string;
+}
+interface Badge {
+    default: BadgeVariant;
+    primary: BadgeVariant;
+    warning: BadgeVariant;
+    info: BadgeVariant;
+    bordered: BadgeVariant;
+    success: BadgeVariant;
+    dark: BadgeVariant;
+}
 interface Text {
     muted: string;
     onDark: string;

package/package.json

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

package/dist/cjs/components/InspectorSection.js

@@ -1,72 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InspectorSection = exports.Field = exports.Subheading = exports.ExpanderButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const styled_components_1 = __importDefault(require("styled-components"));
-const Button_1 = require("./Button");
-const icons_1 = require("./icons");
-const Section = styled_components_1.default.div `
-  font-size: ${(props) => props.theme.font.size.normal};
-`;
-const Heading = styled_components_1.default.div `
-  display: flex;
-  padding: 0;
-  cursor: pointer;
-  margin: ${(props) => props.theme.grid.unit * 4}px
-    ${(props) => props.theme.grid.unit * 6}px
-    ${(props) => props.marginBottom || '32px'}
-    ${(props) => props.theme.grid.unit * 6}px;
-`;
-const HeadingText = styled_components_1.default.div `
-  font-size: ${(props) => props.theme.font.size.medium};
-  font-weight: ${(props) => props.theme.font.weight.semibold};
-  color: ${(props) => props.theme.colors.text.primary};
-  flex: 1;
-`;
-exports.ExpanderButton = (0, styled_components_1.default)(Button_1.IconButton).attrs(() => ({
-    size: 20,
-    defaultColor: true,
-})) `
-  border: none;
-  border-radius: 50%;
-
-  &:focus,
-  &:hover {
-    &:not([disabled]) {
-      background: ${(props) => props.theme.colors.background.fifth};
-    }
-  }
-
-  svg circle {
-    stroke: ${(props) => props.theme.colors.border.secondary};
-  }
-`;
-exports.Subheading = (0, styled_components_1.default)(HeadingText) `
-  font-size: ${(props) => props.theme.font.size.normal};
-  font-weight: ${(props) => props.theme.font.weight.normal};
-  margin-bottom: ${(props) => props.theme.grid.unit * 3}px;
-
-  &:not(:first-child) {
-    margin-top: ${(props) => props.theme.grid.unit * 6}px;
-  }
-`;
-exports.Field = styled_components_1.default.div `
-  margin-bottom: ${(props) => props.theme.grid.unit * 4}px;
-`;
-const InspectorSection = ({ title, contentStyles, children, collapsible = true, }) => {
-    const [expanded, setExpanded] = (0, react_1.useState)(true);
-    return ((0, jsx_runtime_1.jsxs)(Section, { children: [(0, jsx_runtime_1.jsx)(Line, {}), (0, jsx_runtime_1.jsxs)(Heading, { onClick: () => collapsible && setExpanded(!expanded), marginBottom: (!(expanded && children) && '40px') || undefined, style: { cursor: collapsible ? 'pointer' : 'default' }, children: [(0, jsx_runtime_1.jsx)(HeadingText, { children: title }), collapsible && ((0, jsx_runtime_1.jsx)(exports.ExpanderButton, { "aria-label": 'Toggle expand section', onClick: () => setExpanded(!expanded), style: {
-                            transform: expanded ? 'rotate(0deg)' : 'rotate(180deg)',
-                        }, children: (0, jsx_runtime_1.jsx)(icons_1.ArrowDownCircleIcon, {}) }))] }), expanded && children && (0, jsx_runtime_1.jsx)("div", { style: contentStyles, children: children })] }));
-};
-exports.InspectorSection = InspectorSection;
-const Line = styled_components_1.default.hr `
-  flex: 1;
-  border: 1px solid ${(props) => props.theme.colors.border.tertiary};
-  background: ${(props) => props.theme.colors.border.tertiary};
-  margin: 0 ${(props) => props.theme.grid.unit * 6}px;
-`;

package/dist/cjs/components/ToggleHeader.js

@@ -1,58 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToggleIcon = exports.ToggleHeader = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const icons_1 = require("./icons");
-const ToggleHeader = ({ title, isOpen, onToggle, }) => {
-    const handleToggle = (e) => {
-        e.stopPropagation();
-        onToggle();
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            handleToggle(e);
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)(ToggleHeaderContainer, { onClick: handleToggle, children: [(0, jsx_runtime_1.jsx)("span", { children: title }), (0, jsx_runtime_1.jsx)(exports.ToggleIcon, { isOpen: isOpen, onKeyDown: handleKeyDown, tabIndex: 0, children: isOpen ? (0, jsx_runtime_1.jsx)(icons_1.TriangleExpandedIcon, {}) : (0, jsx_runtime_1.jsx)(icons_1.TriangleCollapsedIcon, {}) })] }));
-};
-exports.ToggleHeader = ToggleHeader;
-const ToggleHeaderContainer = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  color: #353535;
-
-  cursor: pointer;
-
-  border-top: 1px solid #f2f2f2;
-
-  font-size: 16px;
-  font-weight: 700;
-  font-family: Lato, sans-serif;
-`;
-exports.ToggleIcon = styled_components_1.default.div `
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 1px solid #e2e2e2;
-  text-align: center;
-  cursor: pointer;
-
-  &:focus-visible {
-    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
-    outline-offset: 2px;
-  }
-
-  svg {
-    width: 19px;
-    height: 19px;
-    transform: rotate(${(props) => (props.isOpen ? '0deg' : '270deg')});
-    transition: transform 0.2s ease; // Smooth transition for rotation
-  }
-`;

package/dist/es/components/InspectorSection.js

@@ -1,65 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import styled from 'styled-components';
-import { IconButton } from './Button';
-import { ArrowDownCircleIcon } from './icons';
-const Section = styled.div `
-  font-size: ${(props) => props.theme.font.size.normal};
-`;
-const Heading = styled.div `
-  display: flex;
-  padding: 0;
-  cursor: pointer;
-  margin: ${(props) => props.theme.grid.unit * 4}px
-    ${(props) => props.theme.grid.unit * 6}px
-    ${(props) => props.marginBottom || '32px'}
-    ${(props) => props.theme.grid.unit * 6}px;
-`;
-const HeadingText = styled.div `
-  font-size: ${(props) => props.theme.font.size.medium};
-  font-weight: ${(props) => props.theme.font.weight.semibold};
-  color: ${(props) => props.theme.colors.text.primary};
-  flex: 1;
-`;
-export const ExpanderButton = styled(IconButton).attrs(() => ({
-    size: 20,
-    defaultColor: true,
-})) `
-  border: none;
-  border-radius: 50%;
-
-  &:focus,
-  &:hover {
-    &:not([disabled]) {
-      background: ${(props) => props.theme.colors.background.fifth};
-    }
-  }
-
-  svg circle {
-    stroke: ${(props) => props.theme.colors.border.secondary};
-  }
-`;
-export const Subheading = styled(HeadingText) `
-  font-size: ${(props) => props.theme.font.size.normal};
-  font-weight: ${(props) => props.theme.font.weight.normal};
-  margin-bottom: ${(props) => props.theme.grid.unit * 3}px;
-
-  &:not(:first-child) {
-    margin-top: ${(props) => props.theme.grid.unit * 6}px;
-  }
-`;
-export const Field = styled.div `
-  margin-bottom: ${(props) => props.theme.grid.unit * 4}px;
-`;
-export const InspectorSection = ({ title, contentStyles, children, collapsible = true, }) => {
-    const [expanded, setExpanded] = useState(true);
-    return (_jsxs(Section, { children: [_jsx(Line, {}), _jsxs(Heading, { onClick: () => collapsible && setExpanded(!expanded), marginBottom: (!(expanded && children) && '40px') || undefined, style: { cursor: collapsible ? 'pointer' : 'default' }, children: [_jsx(HeadingText, { children: title }), collapsible && (_jsx(ExpanderButton, { "aria-label": 'Toggle expand section', onClick: () => setExpanded(!expanded), style: {
-                            transform: expanded ? 'rotate(0deg)' : 'rotate(180deg)',
-                        }, children: _jsx(ArrowDownCircleIcon, {}) }))] }), expanded && children && _jsx("div", { style: contentStyles, children: children })] }));
-};
-const Line = styled.hr `
-  flex: 1;
-  border: 1px solid ${(props) => props.theme.colors.border.tertiary};
-  background: ${(props) => props.theme.colors.border.tertiary};
-  margin: 0 ${(props) => props.theme.grid.unit * 6}px;
-`;

package/dist/es/components/ToggleHeader.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from 'styled-components';
-import { TriangleCollapsedIcon, TriangleExpandedIcon } from './icons';
-export const ToggleHeader = ({ title, isOpen, onToggle, }) => {
-    const handleToggle = (e) => {
-        e.stopPropagation();
-        onToggle();
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            handleToggle(e);
-        }
-    };
-    return (_jsxs(ToggleHeaderContainer, { onClick: handleToggle, children: [_jsx("span", { children: title }), _jsx(ToggleIcon, { isOpen: isOpen, onKeyDown: handleKeyDown, tabIndex: 0, children: isOpen ? _jsx(TriangleExpandedIcon, {}) : _jsx(TriangleCollapsedIcon, {}) })] }));
-};
-const ToggleHeaderContainer = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  color: #353535;
-
-  cursor: pointer;
-
-  border-top: 1px solid #f2f2f2;
-
-  font-size: 16px;
-  font-weight: 700;
-  font-family: Lato, sans-serif;
-`;
-export const ToggleIcon = styled.div `
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 1px solid #e2e2e2;
-  text-align: center;
-  cursor: pointer;
-
-  &:focus-visible {
-    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
-    outline-offset: 2px;
-  }
-
-  svg {
-    width: 19px;
-    height: 19px;
-    transform: rotate(${(props) => (props.isOpen ? '0deg' : '270deg')});
-    transition: transform 0.2s ease; // Smooth transition for rotation
-  }
-`;

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

@@ -1,40 +0,0 @@
-/*!
- * © 2020 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React, { CSSProperties } from 'react';
-export declare const ExpanderButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
-    type: "button" | "submit" | "reset";
-} & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
-} & {
-    defaultColor?: boolean;
-    size?: number;
-    iconColor?: string;
-} & {
-    size: number;
-    defaultColor: boolean;
-}, "type" | "defaultColor" | "size">;
-export declare const Subheading: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const Field: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-interface Props {
-    title: React.ReactNode;
-    contentStyles?: CSSProperties;
-    children?: React.ReactNode;
-    collapsible?: boolean;
-}
-export declare const InspectorSection: React.FC<Props>;
-export {};

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

@@ -1,26 +0,0 @@
-/*!
- * © 2025 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-interface SectionHeaderProps {
-    title: string;
-    isOpen: boolean;
-    onToggle: () => void;
-}
-export declare const ToggleHeader: React.FC<SectionHeaderProps>;
-export declare const ToggleIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    isOpen: boolean;
-}, never>;
-export {};