@manuscripts/style-guide 3.5.7 → 3.5.9

package/README.md

@@ -16,10 +16,10 @@ const Example: React.FunctionComponent<{
 )
 ```
 
-## Development
+## Development  
 
 Run `yarn build` to build the `dist` folder for distribution.
 
-Run `yarn dev` to automatically rebuild when a file is changed.
+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`.

package/dist/cjs/colors.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.butteryYellow = exports.wheatYellow = exports.zestOrange = exports.peppermintGreen = exports.springGreen = exports.killarneyGreen = exports.darkRed = exports.chablisRed = exports.mandysRed = exports.punchRed = exports.veryLightBlue = exports.graphBlue1 = exports.focusBlue = exports.powderBlue = exports.aliceBlue = exports.jellyBeanBlue = exports.white = exports.alabasterGrey = exports.seashellGrey = exports.mercuryGrey = exports.greyLight = exports.greyMutedText = exports.greyMuted = exports.greyDark = exports.black = exports.manuscriptsSecondary = exports.manuscriptsXLight2 = exports.manuscriptsXLight = exports.manuscriptsLight = exports.manuscriptsIcons = exports.manuscriptsBlue = exports.manuscriptsBlueDark = void 0;
+exports.zestOrange = exports.veryLightYellow = exports.contrastOrange = exports.butteryYellow = exports.wheatYellow = exports.contrastGreen = exports.veryLightGreen = exports.peppermintGreen = exports.springGreen = exports.killarneyGreen = exports.contrastRed = exports.darkRed = exports.chablisRed = exports.mandysRed = exports.punchRed = exports.veryLightBlue = exports.graphBlue1 = exports.focusBlue = exports.powderBlue = exports.aliceBlue = exports.jellyBeanBlue = exports.white = exports.alabasterGrey = exports.seashellGrey = exports.mercuryGrey = exports.greyLight = exports.greyMutedText = exports.greyMuted = exports.greyDark = exports.black = exports.manuscriptsSecondary = exports.manuscriptsXLight2 = exports.manuscriptsXLight = exports.manuscriptsLight = exports.manuscriptsIcons = exports.manuscriptsBlue = exports.manuscriptsBlueDark = void 0;
 exports.manuscriptsBlueDark = '#0b6bb8';
 exports.manuscriptsBlue = '#0d79d0';
 exports.manuscriptsIcons = '#1a9bc7';
@@ -42,9 +42,14 @@ exports.punchRed = '#f35143';
 exports.mandysRed = '#f5c1b7';
 exports.chablisRed = '#fff1f0';
 exports.darkRed = '#c74237';
+exports.contrastRed = '#cf1322';
 exports.killarneyGreen = '#36b260';
 exports.springGreen = '#b2c0ac';
 exports.peppermintGreen = '#dff0d7';
-exports.zestOrange = '#fe8f1f';
+exports.veryLightGreen = '#eefbe9';
+exports.contrastGreen = '#31a056';
 exports.wheatYellow = '#ffe0b2';
 exports.butteryYellow = '#fffcdb';
+exports.contrastOrange = '#fa5700';
+exports.veryLightYellow = '#fff9e5';
+exports.zestOrange = '#fe8f1f';

package/dist/cjs/components/AlertMessage.js

@@ -1,157 +1,88 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertMessage = exports.AlertMessageType = exports.TextButton = void 0;
+exports.AlertMessage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
+const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("./Button");
 const icons_1 = require("./icons");
-const buttonStyles = (0, styled_components_1.css) `
-  color: inherit;
-  margin-left: ${(props) => props.theme.grid.unit * 4}px;
-
-  g[fill] {
-    fill: currentColor;
-  }
-
-  &:not([disabled]):focus,
-  &:not([disabled]):hover {
-    color: inherit;
-    filter: brightness(80%);
-  }
-`;
-exports.TextButton = (0, styled_components_1.default)(Button_1.IconTextButton) `
-  ${buttonStyles}
-`;
-const CloseIconButton = (0, styled_components_1.default)(Button_1.IconButton).attrs({
-    defaultColor: true,
-    size: 16,
-}) `
-  ${buttonStyles}
+const variantIcons = {
+    success: icons_1.AttentionGreenIcon,
+    error: icons_1.AttentionRedIcon,
+    info: icons_1.AttentionBlueIcon,
+    warning: icons_1.AttentionOrangeIcon,
+};
+const AlertCloseAction = ({ closeConfig, onClose, }) => ((0, jsx_runtime_1.jsx)(CloseAction, { children: closeConfig.variant === 'icon' ? ((0, jsx_runtime_1.jsx)(CloseIconButton, { onClick: onClose, children: (0, jsx_runtime_1.jsx)(icons_1.XIcon, {}) })) : ((0, jsx_runtime_1.jsx)(DismissButton, { onClick: onClose, children: closeConfig.label })) }));
+const AlertMessage = ({ title, message, variant, link, closeConfig, className, }) => {
+    const [isOpen, setIsOpen] = react_1.default.useState(true);
+    const AlertIcon = variantIcons[variant];
+    const handleClose = () => {
+        setIsOpen(false);
+        closeConfig?.onClick?.();
+    };
+    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 }))] }));
+};
+exports.AlertMessage = AlertMessage;
+const Alert = styled_components_1.default.div `
+  align-items: center;
+  background-color: ${(props) => props.theme.colors.background[props.$variant]};
+  border: 1px solid ${(props) => props.theme.colors.border[props.$variant]};
+  border-radius: ${(props) => props.theme.grid.radius.small};
+  color: ${(props) => props.theme.colors.text.primary};
+  display: flex;
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.normal} / 1
+    ${(props) => props.theme.font.family.Lato};
+  gap: ${(props) => props.theme.grid.unit * 3}px;
+  padding: ${(props) => props.theme.grid.unit * 3}px;
 `;
-const InformativeIcon = styled_components_1.default.div `
-  height: 24px;
-  margin-right: ${(props) => props.theme.grid.unit * 3}px;
+const IconWrapper = styled_components_1.default.div `
   display: flex;
-  align-items: center;
+  align-self: ${(props) => (props.$hasTitle ? 'flex-start' : 'center')};
 `;
-const InnerContainer = styled_components_1.default.div `
-  align-items: center;
+const Content = styled_components_1.default.div `
   display: flex;
   flex: 1;
+  flex-direction: column;
+  gap: ${(props) => props.theme.grid.unit}px;
 `;
-const BaseAlertContainer = styled_components_1.default.div `
-  align-items: center;
-  border-radius: ${(props) => props.theme.grid.radius.small};
-  display: flex;
-  flex-shrink: 0;
-  font: ${(props) => props.theme.font.weight.normal}
-    ${(props) => props.theme.font.size.medium} / 1
-    ${(props) => props.theme.font.family.sans};
-  justify-content: space-between;
-  padding: ${(props) => props.theme.grid.unit * 3}px;
-  white-space: normal;
+const Title = styled_components_1.default.span `
+  font-weight: ${(props) => props.theme.font.weight.semibold};
 `;
-const SuccessAlertContainer = (0, styled_components_1.default)(BaseAlertContainer) `
-  background-color: ${(props) => props.theme.colors.background.success};
-  border: solid 1px ${(props) => props.theme.colors.border.success};
-  color: ${(props) => props.theme.colors.text.success};
+const MessageRow = styled_components_1.default.div `
+  display: flex;
+  align-items: baseline;
+  gap: ${(props) => props.theme.grid.unit * 2}px;
 `;
-const ErrorAlertContainer = (0, styled_components_1.default)(BaseAlertContainer) `
-  background-color: ${(props) => props.theme.colors.background.error};
-  border: solid 1px ${(props) => props.theme.colors.border.error};
-  color: ${(props) => props.theme.colors.text.error};
+const ActionLink = styled_components_1.default.button `
+  font-size: ${(props) => props.theme.font.size.normal};
+  color: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
 `;
-const InfoAlertContainer = (0, styled_components_1.default)(BaseAlertContainer) `
-  background-color: ${(props) => props.theme.colors.background.info};
-  border: solid 1px ${(props) => props.theme.colors.border.info};
-  color: ${(props) => props.theme.colors.text.info};
+const Message = styled_components_1.default.div `
+  font-size: ${(props) => props.theme.font.size.normal};
 `;
-const WarningAlertContainer = (0, styled_components_1.default)(BaseAlertContainer) `
-  background-color: ${(props) => props.theme.colors.background.warning};
-  border: solid 1px ${(props) => props.theme.colors.border.warning};
-  color: ${(props) => props.theme.colors.text.warning};
+const CloseIconButton = (0, styled_components_1.default)(Button_1.IconButton) `
+  width: ${(props) => props.theme.grid.unit * 6}px;
+  height: ${(props) => props.theme.grid.unit * 6}px;
 `;
-const TextContainer = styled_components_1.default.div `
-  flex: 1 1 auto;
+const CloseAction = styled_components_1.default.div `
   display: flex;
   align-items: center;
-  word-break: break-word;
+  flex-shrink: 0;
+  margin-left: auto;
 `;
-const SuccessIcon = (0, styled_components_1.default)(icons_1.AttentionGreenIcon) `
-  transform: scale(0.75, 0.75);
+const DismissButton = (0, styled_components_1.default)(Button_1.IconTextButton) `
+  font-size: ${(props) => props.theme.font.size.normal};
+  color: inherit;
 `;
-var AlertMessageType;
-(function (AlertMessageType) {
-    AlertMessageType["success"] = "success";
-    AlertMessageType["error"] = "error";
-    AlertMessageType["warning"] = "warning";
-    AlertMessageType["info"] = "info";
-})(AlertMessageType || (exports.AlertMessageType = AlertMessageType = {}));
-const alertIcons = {
-    success: SuccessIcon,
-    error: icons_1.AttentionRedIcon,
-    info: icons_1.AttentionBlueIcon,
-    warning: icons_1.AttentionOrangeIcon,
-};
-const alertContainers = {
-    success: SuccessAlertContainer,
-    error: ErrorAlertContainer,
-    info: InfoAlertContainer,
-    warning: WarningAlertContainer,
-};
-class AlertMessage extends react_1.default.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            isOpen: true,
-        };
-        this.handleClose = () => {
-            this.setState({ isOpen: false });
-        };
-    }
-    render() {
-        const { hideCloseButton, dismissButton, children, type } = this.props;
-        const { isOpen } = this.state;
-        const AlertContainer = alertContainers[type];
-        const AlertIcon = alertIcons[type];
-        return (isOpen && ((0, jsx_runtime_1.jsx)(AlertContainer, { className: 'alert-message', children: (0, jsx_runtime_1.jsxs)(InnerContainer, { children: [(0, jsx_runtime_1.jsx)(InformativeIcon, { children: (0, jsx_runtime_1.jsx)(AlertIcon, {}) }), (0, jsx_runtime_1.jsx)(TextContainer, { children: children }), dismissButton && ((0, jsx_runtime_1.jsx)(exports.TextButton, { onClick: dismissButton.action ? dismissButton.action : this.handleClose, children: dismissButton.text }))] }) })));
-    }
-}
-exports.AlertMessage = AlertMessage;

package/dist/cjs/components/Button.js

@@ -48,7 +48,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconButtonGroup = exports.ButtonGroup = exports.SecondaryIconButton = exports.RoundIconButton = exports.IconButton = exports.ToggleButtonAlt = exports.ToggleButton = exports.IconTextButton = exports.TertiaryButton = exports.LoginButton = exports.PrimaryButton = exports.SecondaryButton = exports.outlineStyle = void 0;
+exports.TextButton = exports.IconButtonGroup = exports.ButtonGroup = exports.SecondaryIconButton = exports.RoundIconButton = exports.IconButton = exports.ToggleButtonAlt = exports.ToggleButton = exports.IconTextButton = exports.TertiaryButton = exports.LoginButton = exports.PrimaryButton = exports.SecondaryButton = exports.outlineStyle = void 0;
 const styled_components_1 = __importStar(require("styled-components"));
 const dangerBtnStyles = (0, styled_components_1.css) `
   ${(props) => btnColors(props.theme.colors.button.error.color.default, props.theme.colors.button.error.background.default, props.theme.colors.button.error.border.default, true)}
@@ -320,3 +320,17 @@ exports.IconButtonGroup = styled_components_1.default.div `
     height: ${(props) => props.size || 28}px;
   }
 `;
+exports.TextButton = (0, styled_components_1.default)(exports.IconTextButton) `
+  color: inherit;
+  margin-left: ${(props) => props.theme.grid.unit * 4}px;
+
+  g[fill] {
+    fill: currentColor;
+  }
+
+  &:not([disabled]):focus,
+  &:not([disabled]):hover {
+    color: inherit;
+    filter: brightness(80%);
+  }
+`;

package/dist/cjs/components/NavDropdown.js

@@ -124,9 +124,7 @@ exports.NotificationsBadge = (0, styled_components_1.default)(Badge_1.Badge) `
   background-color: ${(props) => props.isOpen
     ? props.theme.colors.background.success
     : props.theme.colors.brand.default};
-  color: ${(props) => props.isOpen
-    ? props.theme.colors.text.success
-    : props.theme.colors.text.onDark};
+  color: ${(props) => props.theme.colors.text.onDark};
   font-family: ${(props) => props.theme.font.family.sans};
   font-size: 9px;
   margin-left: 4px;

package/dist/cjs/components/StyledModal.js

@@ -87,7 +87,7 @@ const StyledModal = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true,
             onRequestClose?.();
         }
     };
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(Dialog, { ref: dialogRef, onClick: handleBackdropClick, "$hideOverlay": hideOverlay, "$pointerEventsOnBackdrop": pointerEventsOnBackdrop, className: className, style: style?.content, children: children }), document.body);
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(Dialog, { ref: dialogRef, onClick: handleBackdropClick, "$hideOverlay": hideOverlay, "$pointerEventsOnBackdrop": pointerEventsOnBackdrop, className: className ? `Modal ${className}` : 'Modal', style: style?.content, children: children }), document.body);
 };
 exports.StyledModal = StyledModal;
 const Dialog = styled_components_1.default.dialog `

package/dist/cjs/components/icons/attention-blue.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const AttentionBlueIcon = (props) => ((0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [(0, jsx_runtime_1.jsx)("g", { clipPath: "url(#clip0_62_49)", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.201 17.799 1.5 12 1.5C6.201 1.5 1.5 6.201 1.5 12C1.5 17.799 6.2 22.5 12 22.5ZM12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.372 24 12 24ZM12 8C11.7348 8 11.4804 7.89464 11.2929 7.70711C11.1054 7.51957 11 7.26522 11 7C11 6.73478 11.1054 6.48043 11.2929 6.29289C11.4804 6.10536 11.7348 6 12 6C12.2652 6 12.5196 6.10536 12.7071 6.29289C12.8946 6.48043 13 6.73478 13 7C13 7.26522 12.8946 7.51957 12.7071 7.70711C12.5196 7.89464 12.2652 8 12 8ZM12.02 18.2C11.7813 18.2 11.5524 18.1052 11.3836 17.9364C11.2148 17.7676 11.12 17.5387 11.12 17.3V10.1C11.12 9.86131 11.2148 9.63239 11.3836 9.4636C11.5524 9.29482 11.7813 9.2 12.02 9.2C12.2587 9.2 12.4876 9.29482 12.6564 9.4636C12.8252 9.63239 12.92 9.86131 12.92 10.1V17.3C12.92 17.5387 12.8252 17.7676 12.6564 17.9364C12.4876 18.1052 12.2587 18.2 12.02 18.2Z", fill: "#1A9BC7" }) }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_62_49", children: (0, jsx_runtime_1.jsx)("rect", { width: "24", height: "24", fill: "white" }) }) })] }));
+const AttentionBlueIcon = (props) => ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M9 15H11V9H9V15ZM10 0C4.475 0 0 4.475 0 10C0 15.525 4.475 20 10 20C15.525 20 20 15.525 20 10C20 4.475 15.525 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18ZM9 7H11V5H9V7Z", fill: "#1A9BC7" }) }));
 exports.default = AttentionBlueIcon;

package/dist/cjs/components/icons/attention-green.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const AttentionGreenIcon = (props) => ((0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [(0, jsx_runtime_1.jsx)("path", { d: "M11.9998 0C5.38278 0 0 5.3832 0 12C0 18.6168 5.38278 24 11.9998 24C18.6167 24 24 18.6168 24 12C24 5.3832 18.6167 0 11.9998 0ZM11.9998 22.4262C6.2508 22.4262 1.5738 17.749 1.5738 12C1.5738 6.25098 6.25074 1.57386 11.9998 1.57386C17.7488 1.57386 22.426 6.25104 22.426 12C22.4261 17.749 17.7487 22.4262 11.9998 22.4262Z", fill: "#36B260" }), (0, jsx_runtime_1.jsx)("path", { d: "M16.3444 8.07156L10.1565 14.2591L7.65515 11.7583C7.34777 11.4513 6.84983 11.4511 6.54245 11.7585C6.23495 12.066 6.23495 12.564 6.54245 12.8714L9.60023 15.9287C9.75389 16.0822 9.95519 16.159 10.1565 16.159C10.3578 16.159 10.5596 16.0822 10.7132 15.9284L10.7149 15.9263L17.457 9.18426C17.7645 8.87706 17.7645 8.3787 17.457 8.0715C17.1497 7.76412 16.6514 7.76412 16.3444 8.07156Z", fill: "#36B260" })] }));
+const AttentionGreenIcon = (props) => ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M20 3.18L8.59 14.6L4.35 10.36L5.76 8.95L8.59 11.78L18.59 1.78L20 3.18ZM17.79 8.22C17.92 8.79 18 9.39 18 10C18 14.42 14.42 18 10 18C5.58 18 2 14.42 2 10C2 5.58 5.58 2 10 2C11.58 2 13.04 2.46 14.28 3.25L15.72 1.81C14.1 0.67 12.13 0 10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 8.81 19.78 7.67 19.4 6.61L17.79 8.22Z", fill: "#31A056" }) }));
 exports.default = AttentionGreenIcon;

package/dist/cjs/components/icons/attention-orange.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const AttentionOrangeIcon = (props) => ((0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [(0, jsx_runtime_1.jsxs)("g", { clipPath: "url(#clip0_62_51)", children: [(0, jsx_runtime_1.jsx)("path", { d: "M12 19.7C12.5523 19.7 13 19.2523 13 18.7C13 18.1477 12.5523 17.7 12 17.7C11.4477 17.7 11 18.1477 11 18.7C11 19.2523 11.4477 19.7 12 19.7Z", fill: "#FE8F1F" }), (0, jsx_runtime_1.jsx)("path", { d: "M12.92 8.4C12.92 7.90294 12.5171 7.5 12.02 7.5C11.5229 7.5 11.12 7.90294 11.12 8.4V15.6C11.12 16.0971 11.5229 16.5 12.02 16.5C12.5171 16.5 12.92 16.0971 12.92 15.6V8.4Z", fill: "#FE8F1F" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.901 1.98001L22.311 21.567C22.3842 21.7193 22.4176 21.8877 22.408 22.0565C22.3985 22.2252 22.3463 22.3888 22.2564 22.5319C22.1666 22.675 22.0419 22.793 21.894 22.8748C21.7462 22.9567 21.58 22.9998 21.411 23H2.59C2.42092 22.9999 2.25461 22.957 2.10663 22.8752C1.95865 22.7934 1.83382 22.6754 1.74383 22.5323C1.65383 22.3891 1.60159 22.2255 1.592 22.0567C1.58241 21.8879 1.61579 21.7194 1.689 21.567L11.099 1.98101C11.1807 1.8114 11.3085 1.66828 11.4679 1.56812C11.6273 1.46796 11.8118 1.41483 12 1.41483C12.1882 1.41483 12.3727 1.46796 12.5321 1.56812C12.6915 1.66828 12.8193 1.8114 12.901 1.98101V1.98001Z", stroke: "#FE8F1F", strokeWidth: "1.5" })] }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_62_51", children: (0, jsx_runtime_1.jsx)("rect", { width: "24", height: "24", fill: "white" }) }) })] }));
+const AttentionOrangeIcon = (props) => ((0, jsx_runtime_1.jsx)("svg", { width: "22", height: "19", viewBox: "0 0 22 19", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M11 3.99L18.53 17H3.47L11 3.99ZM11 0L0 19H22L11 0ZM12 14H10V16H12V14ZM12 8H10V12H12V8Z", fill: "#FA5700" }) }));
 exports.default = AttentionOrangeIcon;

package/dist/cjs/components/icons/attention-red.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const AttentionRedIcon = (props) => ((0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [(0, jsx_runtime_1.jsx)("g", { clipPath: "url(#clip0_62_44)", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 1.5C17.799 1.5 22.5 6.201 22.5 12C22.5 17.799 17.799 22.5 12 22.5C6.201 22.5 1.5 17.799 1.5 12C1.5 6.201 6.2 1.5 12 1.5ZM12 0C18.627 0 24 5.373 24 12C24 18.627 18.627 24 12 24C5.373 24 0 18.627 0 12C0 5.373 5.372 0 12 0ZM12 16.2C11.7348 16.2 11.4804 16.3054 11.2929 16.4929C11.1054 16.6804 11 16.9348 11 17.2C11 17.4652 11.1054 17.7196 11.2929 17.9071C11.4804 18.0946 11.7348 18.2 12 18.2C12.2652 18.2 12.5196 18.0946 12.7071 17.9071C12.8946 17.7196 13 17.4652 13 17.2C13 16.9348 12.8946 16.6804 12.7071 16.4929C12.5196 16.3054 12.2652 16.2 12 16.2ZM12.02 6C11.7813 6 11.5524 6.09482 11.3836 6.2636C11.2148 6.43239 11.12 6.66131 11.12 6.9V14.1C11.12 14.3387 11.2148 14.5676 11.3836 14.7364C11.5524 14.9052 11.7813 15 12.02 15C12.2587 15 12.4876 14.9052 12.6564 14.7364C12.8252 14.5676 12.92 14.3387 12.92 14.1V6.9C12.92 6.66131 12.8252 6.43239 12.6564 6.2636C12.4876 6.09482 12.2587 6 12.02 6Z", fill: "#F35143" }) }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_62_44", children: (0, jsx_runtime_1.jsx)("rect", { width: "24", height: "24", fill: "white" }) }) })] }));
+const AttentionRedIcon = (props) => ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M9 13H11V15H9V13ZM9 5H11V11H9V5ZM9.995 0C4.47 0 0 4.475 0 10C0 15.525 4.47 20 9.995 20C15.52 20 20 15.525 20 10C20 4.475 15.52 0 9.995 0ZM10 18C5.58 18 2 14.42 2 10C2 5.58 5.58 2 10 2C14.42 2 18 5.58 18 10C18 14.42 14.42 18 10 18Z", fill: "#CF1322" }) }));
 exports.default = AttentionRedIcon;

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

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ORCIDIcon = (props) => ((0, jsx_runtime_1.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [(0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M32 16c0 8.837-7.163 16-16 16-8.838 0-16-7.163-16-16C0 7.162 7.162 0 16 0c8.837 0 16 7.162 16 16Z", fill: "#A6CE39" }), (0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.813 9.637h-5.45v13.9h5.474c4.555 0 7.35-3.378 7.35-6.95 0-1.635-.562-3.372-1.77-4.704-1.215-1.336-3.065-2.246-5.605-2.246ZM18.6 21.3h-2.813v-9.425H18.5c1.823 0 3.12.552 3.96 1.4.842.849 1.252 2.021 1.252 3.312 0 .784-.239 1.967-.993 2.948-.745.969-2.01 1.765-4.119 1.765Zm5.311-4.026c-.251 1.74-1.494 4.276-5.311 4.276h-3.063H18.6c3.817 0 5.06-2.536 5.311-4.276Zm1.812-2.405c-.657-2.601-2.85-4.982-6.91-4.982h-5.2 5.2c4.06 0 6.253 2.38 6.91 4.982Zm.215 1.718ZM8.363 9.675v13.887h2.425V9.675H8.363Zm2.175 13.637H8.612h1.925ZM9.575 8.65c.84 0 1.513-.689 1.513-1.513 0-.823-.673-1.512-1.513-1.512-.838 0-1.512.674-1.512 1.513 0 .823.672 1.512 1.512 1.512Z", fill: "#fff" })] }));
+const ORCIDIcon = (props) => ((0, jsx_runtime_1.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M32 16c0 8.837-7.163 16-16 16-8.838 0-16-7.163-16-16C0 7.162 7.162 0 16 0c8.837 0 16 7.162 16 16Z", fill: "#A6CE39" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.813 9.637h-5.45v13.9h5.474c4.555 0 7.35-3.378 7.35-6.95 0-1.635-.562-3.372-1.77-4.704-1.215-1.336-3.065-2.246-5.605-2.246ZM18.6 21.3h-2.813v-9.425H18.5c1.823 0 3.12.552 3.96 1.4.842.849 1.252 2.021 1.252 3.312 0 .784-.239 1.967-.993 2.948-.745.969-2.01 1.765-4.119 1.765Zm5.311-4.026c-.251 1.74-1.494 4.276-5.311 4.276h-3.063H18.6c3.817 0 5.06-2.536 5.311-4.276Zm1.812-2.405c-.657-2.601-2.85-4.982-6.91-4.982h-5.2 5.2c4.06 0 6.253 2.38 6.91 4.982Zm.215 1.718ZM8.363 9.675v13.887h2.425V9.675H8.363Zm2.175 13.637H8.612h1.925ZM9.575 8.65c.84 0 1.513-.689 1.513-1.513 0-.823-.673-1.512-1.513-1.512-.838 0-1.512.674-1.512 1.513 0 .823.672 1.512 1.512 1.512Z", fill: "#fff" })] }));
 exports.default = ORCIDIcon;

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.jsxs)("svg", { width: 30, height: 30, viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.34921 12.4923C3.01447 12.1576 3.01447 11.6187 3.34921 11.2839L12.7654 \n        1.86772C13.1001 1.53298 13.639 1.53298 13.9738 1.86772C14.3085 2.20246 \n        14.3085 2.74135 13.9738 3.07609L4.55758 12.4923C4.22284 12.8271 3.68395 \n        12.8271 3.34921 12.4923Z" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.34921 1.86667C3.01447 2.20141 3.01447 2.74029 3.34921 3.07503L12.7654 \n        12.4913C13.1001 12.826 13.639 12.826 13.9738 12.4913C14.3085 12.1565 \n        14.3085 11.6176 13.9738 11.2829L4.55758 1.86667C4.22284 1.53193 3.68395 \n        1.53193 3.34921 1.86667Z" })] }));
+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' }) }));
 exports.XIcon = XIcon;
 exports.default = exports.XIcon;

package/dist/cjs/defaultTheme.js

@@ -60,10 +60,10 @@ exports.defaultTheme = {
             tertiary: colors.mercuryGrey,
             fifth: colors.manuscriptsXLight2,
             dark: 'rgba(0,0,0,0.5)',
-            error: colors.mandysRed,
-            info: colors.manuscriptsXLight2,
-            success: colors.peppermintGreen,
-            warning: colors.wheatYellow,
+            error: colors.chablisRed,
+            info: colors.aliceBlue,
+            success: colors.veryLightGreen,
+            warning: colors.veryLightYellow,
             selected: colors.aliceBlue,
             muted: colors.greyMuted,
             tracked: {
@@ -73,10 +73,10 @@ exports.defaultTheme = {
             },
         },
         border: {
-            error: colors.mandysRed,
-            info: colors.manuscriptsBlue,
-            success: colors.springGreen,
-            warning: colors.wheatYellow,
+            error: colors.contrastRed,
+            info: colors.jellyBeanBlue,
+            success: colors.contrastGreen,
+            warning: colors.contrastOrange,
             primary: colors.manuscriptsLight,
             secondary: colors.mercuryGrey,
             tertiary: colors.seashellGrey,
@@ -180,7 +180,7 @@ exports.defaultTheme = {
             error: colors.punchRed,
             info: colors.jellyBeanBlue,
             success: colors.killarneyGreen,
-            warning: colors.zestOrange,
+            warning: colors.contrastOrange
         },
         outline: {
             focus: colors.focusBlue,

package/dist/es/colors.js

@@ -39,9 +39,14 @@ export const punchRed = '#f35143';
 export const mandysRed = '#f5c1b7';
 export const chablisRed = '#fff1f0';
 export const darkRed = '#c74237';
+export const contrastRed = '#cf1322';
 export const killarneyGreen = '#36b260';
 export const springGreen = '#b2c0ac';
 export const peppermintGreen = '#dff0d7';
-export const zestOrange = '#fe8f1f';
+export const veryLightGreen = '#eefbe9';
+export const contrastGreen = '#31a056';
 export const wheatYellow = '#ffe0b2';
 export const butteryYellow = '#fffcdb';
+export const contrastOrange = '#fa5700';
+export const veryLightYellow = '#fff9e5';
+export const zestOrange = '#fe8f1f';

package/dist/es/components/AlertMessage.js

@@ -1,117 +1,81 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { IconButton, IconTextButton } from './Button';
-import { AttentionBlueIcon, AttentionGreenIcon, AttentionOrangeIcon, AttentionRedIcon, } from './icons';
-const buttonStyles = css `
-  color: inherit;
-  margin-left: ${(props) => props.theme.grid.unit * 4}px;
-
-  g[fill] {
-    fill: currentColor;
-  }
-
-  &:not([disabled]):focus,
-  &:not([disabled]):hover {
-    color: inherit;
-    filter: brightness(80%);
-  }
-`;
-export const TextButton = styled(IconTextButton) `
-  ${buttonStyles}
-`;
-const CloseIconButton = styled(IconButton).attrs({
-    defaultColor: true,
-    size: 16,
-}) `
-  ${buttonStyles}
+import { AttentionBlueIcon, AttentionGreenIcon, AttentionOrangeIcon, AttentionRedIcon, XIcon, } from './icons';
+const variantIcons = {
+    success: AttentionGreenIcon,
+    error: AttentionRedIcon,
+    info: AttentionBlueIcon,
+    warning: AttentionOrangeIcon,
+};
+const AlertCloseAction = ({ closeConfig, onClose, }) => (_jsx(CloseAction, { children: closeConfig.variant === 'icon' ? (_jsx(CloseIconButton, { onClick: onClose, children: _jsx(XIcon, {}) })) : (_jsx(DismissButton, { onClick: onClose, children: closeConfig.label })) }));
+export const AlertMessage = ({ title, message, variant, link, closeConfig, className, }) => {
+    const [isOpen, setIsOpen] = React.useState(true);
+    const AlertIcon = variantIcons[variant];
+    const handleClose = () => {
+        setIsOpen(false);
+        closeConfig?.onClick?.();
+    };
+    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 }))] }));
+};
+const Alert = styled.div `
+  align-items: center;
+  background-color: ${(props) => props.theme.colors.background[props.$variant]};
+  border: 1px solid ${(props) => props.theme.colors.border[props.$variant]};
+  border-radius: ${(props) => props.theme.grid.radius.small};
+  color: ${(props) => props.theme.colors.text.primary};
+  display: flex;
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.normal} / 1
+    ${(props) => props.theme.font.family.Lato};
+  gap: ${(props) => props.theme.grid.unit * 3}px;
+  padding: ${(props) => props.theme.grid.unit * 3}px;
 `;
-const InformativeIcon = styled.div `
-  height: 24px;
-  margin-right: ${(props) => props.theme.grid.unit * 3}px;
+const IconWrapper = styled.div `
   display: flex;
-  align-items: center;
+  align-self: ${(props) => (props.$hasTitle ? 'flex-start' : 'center')};
 `;
-const InnerContainer = styled.div `
-  align-items: center;
+const Content = styled.div `
   display: flex;
   flex: 1;
+  flex-direction: column;
+  gap: ${(props) => props.theme.grid.unit}px;
 `;
-const BaseAlertContainer = styled.div `
-  align-items: center;
-  border-radius: ${(props) => props.theme.grid.radius.small};
-  display: flex;
-  flex-shrink: 0;
-  font: ${(props) => props.theme.font.weight.normal}
-    ${(props) => props.theme.font.size.medium} / 1
-    ${(props) => props.theme.font.family.sans};
-  justify-content: space-between;
-  padding: ${(props) => props.theme.grid.unit * 3}px;
-  white-space: normal;
+const Title = styled.span `
+  font-weight: ${(props) => props.theme.font.weight.semibold};
 `;
-const SuccessAlertContainer = styled(BaseAlertContainer) `
-  background-color: ${(props) => props.theme.colors.background.success};
-  border: solid 1px ${(props) => props.theme.colors.border.success};
-  color: ${(props) => props.theme.colors.text.success};
+const MessageRow = styled.div `
+  display: flex;
+  align-items: baseline;
+  gap: ${(props) => props.theme.grid.unit * 2}px;
 `;
-const ErrorAlertContainer = styled(BaseAlertContainer) `
-  background-color: ${(props) => props.theme.colors.background.error};
-  border: solid 1px ${(props) => props.theme.colors.border.error};
-  color: ${(props) => props.theme.colors.text.error};
+const ActionLink = styled.button `
+  font-size: ${(props) => props.theme.font.size.normal};
+  color: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
 `;
-const InfoAlertContainer = styled(BaseAlertContainer) `
-  background-color: ${(props) => props.theme.colors.background.info};
-  border: solid 1px ${(props) => props.theme.colors.border.info};
-  color: ${(props) => props.theme.colors.text.info};
+const Message = styled.div `
+  font-size: ${(props) => props.theme.font.size.normal};
 `;
-const WarningAlertContainer = styled(BaseAlertContainer) `
-  background-color: ${(props) => props.theme.colors.background.warning};
-  border: solid 1px ${(props) => props.theme.colors.border.warning};
-  color: ${(props) => props.theme.colors.text.warning};
+const CloseIconButton = styled(IconButton) `
+  width: ${(props) => props.theme.grid.unit * 6}px;
+  height: ${(props) => props.theme.grid.unit * 6}px;
 `;
-const TextContainer = styled.div `
-  flex: 1 1 auto;
+const CloseAction = styled.div `
   display: flex;
   align-items: center;
-  word-break: break-word;
+  flex-shrink: 0;
+  margin-left: auto;
 `;
-const SuccessIcon = styled(AttentionGreenIcon) `
-  transform: scale(0.75, 0.75);
+const DismissButton = styled(IconTextButton) `
+  font-size: ${(props) => props.theme.font.size.normal};
+  color: inherit;
 `;
-export var AlertMessageType;
-(function (AlertMessageType) {
-    AlertMessageType["success"] = "success";
-    AlertMessageType["error"] = "error";
-    AlertMessageType["warning"] = "warning";
-    AlertMessageType["info"] = "info";
-})(AlertMessageType || (AlertMessageType = {}));
-const alertIcons = {
-    success: SuccessIcon,
-    error: AttentionRedIcon,
-    info: AttentionBlueIcon,
-    warning: AttentionOrangeIcon,
-};
-const alertContainers = {
-    success: SuccessAlertContainer,
-    error: ErrorAlertContainer,
-    info: InfoAlertContainer,
-    warning: WarningAlertContainer,
-};
-export class AlertMessage extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            isOpen: true,
-        };
-        this.handleClose = () => {
-            this.setState({ isOpen: false });
-        };
-    }
-    render() {
-        const { hideCloseButton, dismissButton, children, type } = this.props;
-        const { isOpen } = this.state;
-        const AlertContainer = alertContainers[type];
-        const AlertIcon = alertIcons[type];
-        return (isOpen && (_jsx(AlertContainer, { className: 'alert-message', children: _jsxs(InnerContainer, { children: [_jsx(InformativeIcon, { children: _jsx(AlertIcon, {}) }), _jsx(TextContainer, { children: children }), dismissButton && (_jsx(TextButton, { onClick: dismissButton.action ? dismissButton.action : this.handleClose, children: dismissButton.text }))] }) })));
-    }
-}

package/dist/es/components/Button.js

@@ -284,3 +284,17 @@ export const IconButtonGroup = styled.div `
     height: ${(props) => props.size || 28}px;
   }
 `;
+export const TextButton = styled(IconTextButton) `
+  color: inherit;
+  margin-left: ${(props) => props.theme.grid.unit * 4}px;
+
+  g[fill] {
+    fill: currentColor;
+  }
+
+  &:not([disabled]):focus,
+  &:not([disabled]):hover {
+    color: inherit;
+    filter: brightness(80%);
+  }
+`;

package/dist/es/components/NavDropdown.js

@@ -88,9 +88,7 @@ export const NotificationsBadge = styled(Badge) `
   background-color: ${(props) => props.isOpen
     ? props.theme.colors.background.success
     : props.theme.colors.brand.default};
-  color: ${(props) => props.isOpen
-    ? props.theme.colors.text.success
-    : props.theme.colors.text.onDark};
+  color: ${(props) => props.theme.colors.text.onDark};
   font-family: ${(props) => props.theme.font.family.sans};
   font-size: 9px;
   margin-left: 4px;

package/dist/es/components/StyledModal.js

@@ -51,7 +51,7 @@ export const StyledModal = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick
             onRequestClose?.();
         }
     };
-    return createPortal(_jsx(Dialog, { ref: dialogRef, onClick: handleBackdropClick, "$hideOverlay": hideOverlay, "$pointerEventsOnBackdrop": pointerEventsOnBackdrop, className: className, style: style?.content, children: children }), document.body);
+    return createPortal(_jsx(Dialog, { ref: dialogRef, onClick: handleBackdropClick, "$hideOverlay": hideOverlay, "$pointerEventsOnBackdrop": pointerEventsOnBackdrop, className: className ? `Modal ${className}` : 'Modal', style: style?.content, children: children }), document.body);
 };
 const Dialog = styled.dialog `
   background: transparent;

package/dist/es/components/icons/attention-blue.js

@@ -1,3 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AttentionBlueIcon = (props) => (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("g", { clipPath: "url(#clip0_62_49)", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.201 17.799 1.5 12 1.5C6.201 1.5 1.5 6.201 1.5 12C1.5 17.799 6.2 22.5 12 22.5ZM12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.372 24 12 24ZM12 8C11.7348 8 11.4804 7.89464 11.2929 7.70711C11.1054 7.51957 11 7.26522 11 7C11 6.73478 11.1054 6.48043 11.2929 6.29289C11.4804 6.10536 11.7348 6 12 6C12.2652 6 12.5196 6.10536 12.7071 6.29289C12.8946 6.48043 13 6.73478 13 7C13 7.26522 12.8946 7.51957 12.7071 7.70711C12.5196 7.89464 12.2652 8 12 8ZM12.02 18.2C11.7813 18.2 11.5524 18.1052 11.3836 17.9364C11.2148 17.7676 11.12 17.5387 11.12 17.3V10.1C11.12 9.86131 11.2148 9.63239 11.3836 9.4636C11.5524 9.29482 11.7813 9.2 12.02 9.2C12.2587 9.2 12.4876 9.29482 12.6564 9.4636C12.8252 9.63239 12.92 9.86131 12.92 10.1V17.3C12.92 17.5387 12.8252 17.7676 12.6564 17.9364C12.4876 18.1052 12.2587 18.2 12.02 18.2Z", fill: "#1A9BC7" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_62_49", children: _jsx("rect", { width: "24", height: "24", fill: "white" }) }) })] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+const AttentionBlueIcon = (props) => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { d: "M9 15H11V9H9V15ZM10 0C4.475 0 0 4.475 0 10C0 15.525 4.475 20 10 20C15.525 20 20 15.525 20 10C20 4.475 15.525 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18ZM9 7H11V5H9V7Z", fill: "#1A9BC7" }) }));
 export default AttentionBlueIcon;

package/dist/es/components/icons/attention-green.js

@@ -1,3 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AttentionGreenIcon = (props) => (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M11.9998 0C5.38278 0 0 5.3832 0 12C0 18.6168 5.38278 24 11.9998 24C18.6167 24 24 18.6168 24 12C24 5.3832 18.6167 0 11.9998 0ZM11.9998 22.4262C6.2508 22.4262 1.5738 17.749 1.5738 12C1.5738 6.25098 6.25074 1.57386 11.9998 1.57386C17.7488 1.57386 22.426 6.25104 22.426 12C22.4261 17.749 17.7487 22.4262 11.9998 22.4262Z", fill: "#36B260" }), _jsx("path", { d: "M16.3444 8.07156L10.1565 14.2591L7.65515 11.7583C7.34777 11.4513 6.84983 11.4511 6.54245 11.7585C6.23495 12.066 6.23495 12.564 6.54245 12.8714L9.60023 15.9287C9.75389 16.0822 9.95519 16.159 10.1565 16.159C10.3578 16.159 10.5596 16.0822 10.7132 15.9284L10.7149 15.9263L17.457 9.18426C17.7645 8.87706 17.7645 8.3787 17.457 8.0715C17.1497 7.76412 16.6514 7.76412 16.3444 8.07156Z", fill: "#36B260" })] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+const AttentionGreenIcon = (props) => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { d: "M20 3.18L8.59 14.6L4.35 10.36L5.76 8.95L8.59 11.78L18.59 1.78L20 3.18ZM17.79 8.22C17.92 8.79 18 9.39 18 10C18 14.42 14.42 18 10 18C5.58 18 2 14.42 2 10C2 5.58 5.58 2 10 2C11.58 2 13.04 2.46 14.28 3.25L15.72 1.81C14.1 0.67 12.13 0 10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 8.81 19.78 7.67 19.4 6.61L17.79 8.22Z", fill: "#31A056" }) }));
 export default AttentionGreenIcon;

package/dist/es/components/icons/attention-orange.js

@@ -1,3 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AttentionOrangeIcon = (props) => (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsxs("g", { clipPath: "url(#clip0_62_51)", children: [_jsx("path", { d: "M12 19.7C12.5523 19.7 13 19.2523 13 18.7C13 18.1477 12.5523 17.7 12 17.7C11.4477 17.7 11 18.1477 11 18.7C11 19.2523 11.4477 19.7 12 19.7Z", fill: "#FE8F1F" }), _jsx("path", { d: "M12.92 8.4C12.92 7.90294 12.5171 7.5 12.02 7.5C11.5229 7.5 11.12 7.90294 11.12 8.4V15.6C11.12 16.0971 11.5229 16.5 12.02 16.5C12.5171 16.5 12.92 16.0971 12.92 15.6V8.4Z", fill: "#FE8F1F" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.901 1.98001L22.311 21.567C22.3842 21.7193 22.4176 21.8877 22.408 22.0565C22.3985 22.2252 22.3463 22.3888 22.2564 22.5319C22.1666 22.675 22.0419 22.793 21.894 22.8748C21.7462 22.9567 21.58 22.9998 21.411 23H2.59C2.42092 22.9999 2.25461 22.957 2.10663 22.8752C1.95865 22.7934 1.83382 22.6754 1.74383 22.5323C1.65383 22.3891 1.60159 22.2255 1.592 22.0567C1.58241 21.8879 1.61579 21.7194 1.689 21.567L11.099 1.98101C11.1807 1.8114 11.3085 1.66828 11.4679 1.56812C11.6273 1.46796 11.8118 1.41483 12 1.41483C12.1882 1.41483 12.3727 1.46796 12.5321 1.56812C12.6915 1.66828 12.8193 1.8114 12.901 1.98101V1.98001Z", stroke: "#FE8F1F", strokeWidth: "1.5" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_62_51", children: _jsx("rect", { width: "24", height: "24", fill: "white" }) }) })] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+const AttentionOrangeIcon = (props) => (_jsx("svg", { width: "22", height: "19", viewBox: "0 0 22 19", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { d: "M11 3.99L18.53 17H3.47L11 3.99ZM11 0L0 19H22L11 0ZM12 14H10V16H12V14ZM12 8H10V12H12V8Z", fill: "#FA5700" }) }));
 export default AttentionOrangeIcon;

package/dist/es/components/icons/attention-red.js

@@ -1,3 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AttentionRedIcon = (props) => (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("g", { clipPath: "url(#clip0_62_44)", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 1.5C17.799 1.5 22.5 6.201 22.5 12C22.5 17.799 17.799 22.5 12 22.5C6.201 22.5 1.5 17.799 1.5 12C1.5 6.201 6.2 1.5 12 1.5ZM12 0C18.627 0 24 5.373 24 12C24 18.627 18.627 24 12 24C5.373 24 0 18.627 0 12C0 5.373 5.372 0 12 0ZM12 16.2C11.7348 16.2 11.4804 16.3054 11.2929 16.4929C11.1054 16.6804 11 16.9348 11 17.2C11 17.4652 11.1054 17.7196 11.2929 17.9071C11.4804 18.0946 11.7348 18.2 12 18.2C12.2652 18.2 12.5196 18.0946 12.7071 17.9071C12.8946 17.7196 13 17.4652 13 17.2C13 16.9348 12.8946 16.6804 12.7071 16.4929C12.5196 16.3054 12.2652 16.2 12 16.2ZM12.02 6C11.7813 6 11.5524 6.09482 11.3836 6.2636C11.2148 6.43239 11.12 6.66131 11.12 6.9V14.1C11.12 14.3387 11.2148 14.5676 11.3836 14.7364C11.5524 14.9052 11.7813 15 12.02 15C12.2587 15 12.4876 14.9052 12.6564 14.7364C12.8252 14.5676 12.92 14.3387 12.92 14.1V6.9C12.92 6.66131 12.8252 6.43239 12.6564 6.2636C12.4876 6.09482 12.2587 6 12.02 6Z", fill: "#F35143" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_62_44", children: _jsx("rect", { width: "24", height: "24", fill: "white" }) }) })] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+const AttentionRedIcon = (props) => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { d: "M9 13H11V15H9V13ZM9 5H11V11H9V5ZM9.995 0C4.47 0 0 4.475 0 10C0 15.525 4.47 20 9.995 20C15.52 20 20 15.525 20 10C20 4.475 15.52 0 9.995 0ZM10 18C5.58 18 2 14.42 2 10C2 5.58 5.58 2 10 2C14.42 2 18 5.58 18 10C18 14.42 14.42 18 10 18Z", fill: "#CF1322" }) }));
 export default AttentionRedIcon;

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

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ORCIDIcon = (props) => (_jsxs("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M32 16c0 8.837-7.163 16-16 16-8.838 0-16-7.163-16-16C0 7.162 7.162 0 16 0c8.837 0 16 7.162 16 16Z", fill: "#A6CE39" }), _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.813 9.637h-5.45v13.9h5.474c4.555 0 7.35-3.378 7.35-6.95 0-1.635-.562-3.372-1.77-4.704-1.215-1.336-3.065-2.246-5.605-2.246ZM18.6 21.3h-2.813v-9.425H18.5c1.823 0 3.12.552 3.96 1.4.842.849 1.252 2.021 1.252 3.312 0 .784-.239 1.967-.993 2.948-.745.969-2.01 1.765-4.119 1.765Zm5.311-4.026c-.251 1.74-1.494 4.276-5.311 4.276h-3.063H18.6c3.817 0 5.06-2.536 5.311-4.276Zm1.812-2.405c-.657-2.601-2.85-4.982-6.91-4.982h-5.2 5.2c4.06 0 6.253 2.38 6.91 4.982Zm.215 1.718ZM8.363 9.675v13.887h2.425V9.675H8.363Zm2.175 13.637H8.612h1.925ZM9.575 8.65c.84 0 1.513-.689 1.513-1.513 0-.823-.673-1.512-1.513-1.512-.838 0-1.512.674-1.512 1.513 0 .823.672 1.512 1.512 1.512Z", fill: "#fff" })] }));
+const ORCIDIcon = (props) => (_jsxs("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M32 16c0 8.837-7.163 16-16 16-8.838 0-16-7.163-16-16C0 7.162 7.162 0 16 0c8.837 0 16 7.162 16 16Z", fill: "#A6CE39" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.813 9.637h-5.45v13.9h5.474c4.555 0 7.35-3.378 7.35-6.95 0-1.635-.562-3.372-1.77-4.704-1.215-1.336-3.065-2.246-5.605-2.246ZM18.6 21.3h-2.813v-9.425H18.5c1.823 0 3.12.552 3.96 1.4.842.849 1.252 2.021 1.252 3.312 0 .784-.239 1.967-.993 2.948-.745.969-2.01 1.765-4.119 1.765Zm5.311-4.026c-.251 1.74-1.494 4.276-5.311 4.276h-3.063H18.6c3.817 0 5.06-2.536 5.311-4.276Zm1.812-2.405c-.657-2.601-2.85-4.982-6.91-4.982h-5.2 5.2c4.06 0 6.253 2.38 6.91 4.982Zm.215 1.718ZM8.363 9.675v13.887h2.425V9.675H8.363Zm2.175 13.637H8.612h1.925ZM9.575 8.65c.84 0 1.513-.689 1.513-1.513 0-.823-.673-1.512-1.513-1.512-.838 0-1.512.674-1.512 1.513 0 .823.672 1.512 1.512 1.512Z", fill: "#fff" })] }));
 export default ORCIDIcon;

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 = (props) => (_jsxs("svg", { width: 30, height: 30, viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.34921 12.4923C3.01447 12.1576 3.01447 11.6187 3.34921 11.2839L12.7654 \n        1.86772C13.1001 1.53298 13.639 1.53298 13.9738 1.86772C14.3085 2.20246 \n        14.3085 2.74135 13.9738 3.07609L4.55758 12.4923C4.22284 12.8271 3.68395 \n        12.8271 3.34921 12.4923Z" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.34921 1.86667C3.01447 2.20141 3.01447 2.74029 3.34921 3.07503L12.7654 \n        12.4913C13.1001 12.826 13.639 12.826 13.9738 12.4913C14.3085 12.1565 \n        14.3085 11.6176 13.9738 11.2829L4.55758 1.86667C4.22284 1.53193 3.68395 \n        1.53193 3.34921 1.86667Z" })] }));
+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' }) }));
 export default XIcon;

package/dist/es/defaultTheme.js

@@ -24,10 +24,10 @@ export const defaultTheme = {
             tertiary: colors.mercuryGrey,
             fifth: colors.manuscriptsXLight2,
             dark: 'rgba(0,0,0,0.5)',
-            error: colors.mandysRed,
-            info: colors.manuscriptsXLight2,
-            success: colors.peppermintGreen,
-            warning: colors.wheatYellow,
+            error: colors.chablisRed,
+            info: colors.aliceBlue,
+            success: colors.veryLightGreen,
+            warning: colors.veryLightYellow,
             selected: colors.aliceBlue,
             muted: colors.greyMuted,
             tracked: {
@@ -37,10 +37,10 @@ export const defaultTheme = {
             },
         },
         border: {
-            error: colors.mandysRed,
-            info: colors.manuscriptsBlue,
-            success: colors.springGreen,
-            warning: colors.wheatYellow,
+            error: colors.contrastRed,
+            info: colors.jellyBeanBlue,
+            success: colors.contrastGreen,
+            warning: colors.contrastOrange,
             primary: colors.manuscriptsLight,
             secondary: colors.mercuryGrey,
             tertiary: colors.seashellGrey,
@@ -144,7 +144,7 @@ export const defaultTheme = {
             error: colors.punchRed,
             info: colors.jellyBeanBlue,
             success: colors.killarneyGreen,
-            warning: colors.zestOrange,
+            warning: colors.contrastOrange
         },
         outline: {
             focus: colors.focusBlue,

package/dist/types/colors.d.ts

@@ -39,9 +39,14 @@ export declare const punchRed = "#f35143";
 export declare const mandysRed = "#f5c1b7";
 export declare const chablisRed = "#fff1f0";
 export declare const darkRed = "#c74237";
+export declare const contrastRed = "#cf1322";
 export declare const killarneyGreen = "#36b260";
 export declare const springGreen = "#b2c0ac";
 export declare const peppermintGreen = "#dff0d7";
-export declare const zestOrange = "#fe8f1f";
+export declare const veryLightGreen = "#eefbe9";
+export declare const contrastGreen = "#31a056";
 export declare const wheatYellow = "#ffe0b2";
 export declare const butteryYellow = "#fffcdb";
+export declare const contrastOrange = "#fa5700";
+export declare const veryLightYellow = "#fff9e5";
+export declare const zestOrange = "#fe8f1f";

package/dist/types/components/AlertMessage.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.
@@ -14,35 +14,22 @@
  * limitations under the License.
  */
 import React from 'react';
-export declare const TextButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
-    type: "button" | "submit" | "reset";
-} & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
-}, "type">;
-interface State {
-    isOpen: boolean;
+export type AlertVariant = 'success' | 'error' | 'info' | 'warning';
+interface AlertLink {
+    label: string;
+    onClick: () => void;
 }
-interface Dismiss {
-    text: string;
-    action?: () => void;
-}
-export declare enum AlertMessageType {
-    success = "success",
-    error = "error",
-    warning = "warning",
-    info = "info"
-}
-interface Props {
-    type: AlertMessageType;
-    dismissButton?: Dismiss;
-    hideCloseButton?: boolean;
-    children: React.ReactNode;
-}
-export declare class AlertMessage extends React.Component<Props, State> {
-    state: State;
-    render(): false | import("react/jsx-runtime").JSX.Element;
-    private handleClose;
+export interface AlertMessageProps {
+    title?: string;
+    message: string;
+    variant: 'success' | 'error' | 'info' | 'warning';
+    link?: AlertLink;
+    closeConfig?: {
+        onClick?: () => void;
+        variant?: 'icon' | 'text';
+        label?: string;
+    };
+    className?: string;
 }
+export declare const AlertMessage: React.FC<AlertMessageProps>;
 export {};

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

@@ -106,3 +106,10 @@ export declare const ButtonGroup: import("styled-components").StyledComponent<"d
 export declare const IconButtonGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     size?: number;
 }, never>;
+export declare const TextButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
+    type: "button" | "submit" | "reset";
+} & {
+    danger?: boolean;
+    disabled?: boolean;
+    mini?: boolean;
+}, "type">;

package/package.json

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